feat(web): connect quick share flow

Signed-off-by: JustMe <mr.toing@outlook.com>

web/src/styles/base.css

@@ -0,0 +1,61 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+  height: 100%;
+}
+
+html {
+  /* stylelint-disable property-no-vendor-prefix */
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: transparent;
+  /* stylelint-enable property-no-vendor-prefix */
+}
+
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--text);
+  font-family: var(--font-sans);
+  font-size: 15px;
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+}
+
+button,
+input,
+textarea {
+  font: inherit;
+  color: inherit;
+}
+
+/* 去掉触屏的双击缩放延迟 */
+button,
+input,
+textarea,
+summary,
+[role="radio"] {
+  touch-action: manipulation;
+}
+
+/* iOS Safari 对小于 16px 的输入框聚焦时会自动放大页面 */
+@media (pointer: coarse) {
+  input,
+  textarea {
+    font-size: 16px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ::view-transition-old(*),
+  ::view-transition-new(*),
+  ::view-transition-group(*) {
+    animation-duration: 0s !important;
+    animation-delay: 0s !important;
+  }
+}

web/src/styles/tokens.css

@@ -0,0 +1,127 @@
+/* 唯一允许出现颜色字面量的文件。其余 CSS 只能 var(--*)。 */
+:root {
+  color-scheme: light dark;
+
+  --bg: #f7f7f6;
+  --surface: #fff;
+  --line: rgb(0 0 0 / 8%);
+  --text: #1a1a1a;
+  --text-dim: #6b6b6b;
+  --accent: #1a1a1a;
+  --on-accent: #fff;
+
+  --ok: #1f7a4d;
+  --warn: #b25e00;
+  --danger: #b3261e;
+  --busy: #3b6ea8;
+
+  --surface-2: #efefed;
+  --line-strong: rgb(0 0 0 / 14%);
+  --accent-soft: rgb(0 0 0 / 5%);
+
+  --glass: rgb(247 247 246 / 72%);
+  --scrim: rgb(0 0 0 / 40%);
+  /* 二维码必须深色码点配浅色底,暗色主题下也不反转,否则很多扫码器识别不了 */
+  --qr-bg: #fff;
+  --qr-fg: #000;
+  --shadow-pop: 0 4px 16px rgb(0 0 0 / 12%);
+  --shadow-sheet: 0 12px 40px rgb(0 0 0 / 18%);
+
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --blur-bar: blur(10px);
+
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-6: 24px;
+
+  --font-sans: "Source Han Sans SC", "Noto Sans SC", system-ui, sans-serif;
+  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", monospace;
+
+  --bar-h: 52px;
+
+  /* 渐变只表达状态与层次,低饱和、小面积 */
+  --ok-soft: color-mix(in srgb, var(--ok) 16%, transparent);
+  --warn-soft: color-mix(in srgb, var(--warn) 14%, transparent);
+  --danger-soft: color-mix(in srgb, var(--danger) 12%, transparent);
+  --busy-soft: color-mix(in srgb, var(--busy) 14%, transparent);
+  --fade-down: linear-gradient(to bottom, var(--glass), transparent);
+  --tile-gradient: linear-gradient(145deg, var(--surface), var(--surface-2));
+  --progress-gradient: linear-gradient(90deg, var(--busy-soft), var(--busy));
+  --warn-bar: linear-gradient(90deg, var(--warn), transparent);
+
+  --duration-exit: 150ms;
+  --duration-enter: 210ms;
+  --duration-move: 400ms;
+}
+
+/* 暗色变量出现两次:跟随系统(未手动选亮色时),和手动指定暗色。改一处必须同步另一处 */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    color-scheme: dark;
+
+    --bg: #141414;
+    --surface: #1c1c1c;
+    --line: rgb(255 255 255 / 9%);
+    --text: #ececec;
+    --text-dim: #8a8a8a;
+    --accent: #ececec;
+    --on-accent: #141414;
+
+    --ok: #5bc48a;
+    --warn: #e0a050;
+    --danger: #f2877f;
+    --busy: #7fb0e6;
+
+    --surface-2: #262626;
+    --line-strong: rgb(255 255 255 / 16%);
+    --accent-soft: rgb(255 255 255 / 6%);
+
+    --glass: rgb(20 20 20 / 72%);
+    --scrim: rgb(0 0 0 / 60%);
+    --shadow-pop: 0 4px 16px rgb(0 0 0 / 50%);
+    --shadow-sheet: 0 12px 40px rgb(0 0 0 / 60%);
+  
+  }
+}
+
+:root[data-theme="dark"] {
+  color-scheme: dark;
+
+  --bg: #141414;
+  --surface: #1c1c1c;
+  --line: rgb(255 255 255 / 9%);
+  --text: #ececec;
+  --text-dim: #8a8a8a;
+  --accent: #ececec;
+  --on-accent: #141414;
+
+  --ok: #5bc48a;
+  --warn: #e0a050;
+  --danger: #f2877f;
+  --busy: #7fb0e6;
+
+  --surface-2: #262626;
+  --line-strong: rgb(255 255 255 / 16%);
+  --accent-soft: rgb(255 255 255 / 6%);
+
+  --glass: rgb(20 20 20 / 72%);
+  --scrim: rgb(0 0 0 / 60%);
+  --shadow-pop: 0 4px 16px rgb(0 0 0 / 50%);
+  --shadow-sheet: 0 12px 40px rgb(0 0 0 / 60%);
+
+}
+
+:root[data-theme="light"] {
+  color-scheme: light;
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  :root:root {
+    --glass: var(--bg);
+    --blur-bar: none;
+  }
+}

web/src/styles/transitions.css

@@ -0,0 +1,79 @@
+/* 配方取自 react-view-transitions 技能。时长变量见 tokens.css。 */
+@keyframes fade {
+  from {
+    filter: blur(3px);
+    opacity: 0;
+  }
+
+  to {
+    filter: blur(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slide {
+  from {
+    translate: var(--slide-offset);
+  }
+
+  to {
+    translate: 0;
+  }
+}
+
+::view-transition-old(.fade-out) {
+  animation: var(--duration-exit) ease-in fade reverse;
+}
+
+::view-transition-new(.fade-in) {
+  animation: var(--duration-enter) ease-out var(--duration-exit) both fade;
+}
+
+::view-transition-old(.nav-forward) {
+  --slide-offset: -60px;
+
+  animation:
+    var(--duration-exit) ease-in both fade reverse,
+    var(--duration-move) ease-in-out both slide reverse;
+}
+
+::view-transition-new(.nav-forward) {
+  --slide-offset: 60px;
+
+  animation:
+    var(--duration-enter) ease-out var(--duration-exit) both fade,
+    var(--duration-move) ease-in-out both slide;
+}
+
+::view-transition-old(.nav-back) {
+  --slide-offset: 60px;
+
+  animation:
+    var(--duration-exit) ease-in both fade reverse,
+    var(--duration-move) ease-in-out both slide reverse;
+}
+
+::view-transition-new(.nav-back) {
+  --slide-offset: -60px;
+
+  animation:
+    var(--duration-enter) ease-out var(--duration-exit) both fade,
+    var(--duration-move) ease-in-out both slide;
+}
+
+/* 顶栏、底栏使用 backdrop-filter,需隐藏旧快照以免闪烁 */
+::view-transition-group(bar-top),
+::view-transition-group(bar-bottom) {
+  animation: none;
+  z-index: 100;
+}
+
+::view-transition-old(bar-top),
+::view-transition-old(bar-bottom) {
+  display: none;
+}
+
+::view-transition-new(bar-top),
+::view-transition-new(bar-bottom) {
+  animation: none;
+}