chore: flatten web project structure

2026-05-26 12:14:31 +08:00
parent 30b9100b4a
commit aff380dad9
569 changed files with 1081 additions and 74985 deletions
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -0,0 +1,210 @@
+@import "tailwindcss";
+
+@theme {
+  --color-brand-50: #eef8ff;
+  --color-brand-100: #d9eeff;
+  --color-brand-500: #2d91ff;
+  --color-brand-700: #145ee1;
+  --color-brand-800: #174bb6;
+  --color-ink-900: #181b25;
+  --color-ink-800: #222530;
+  --color-ink-700: #2b303b;
+  --color-ink-600: #525866;
+  --color-ink-500: #717784;
+  --color-ink-400: #99a0ae;
+  --color-ink-300: #cacfd8;
+  --color-ink-200: #e5e8ee;
+  --color-ink-100: #f2f5f8;
+  --color-ink-50: #f9fafb;
+  --color-app-bg: #f5f7fa;
+  --color-surface: #ffffff;
+  --color-surface-muted: #f2f5f8;
+  --radius-card: 8px;
+  --radius-control: 6px;
+  --spacing-page-x: 1rem;
+  --spacing-page-y: 1rem;
+  --font-sans: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
+}
+
+:root {
+  color: var(--color-ink-900);
+  background: var(--color-app-bg);
+  font-family: var(--font-sans);
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  --app-max-width: 480px;
+  --safe-area-top: env(safe-area-inset-top, 0px);
+  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
+  --ui-page-x: var(--spacing-page-x);
+  --ui-page-y: var(--spacing-page-y);
+  --ui-bottom-bar-height: calc(72px + var(--safe-area-bottom));
+  --theme-color-800: var(--color-brand-800);
+  --theme-color-700: var(--color-brand-700);
+  --theme-color-500: var(--color-brand-500);
+  --theme-color-100: var(--color-brand-100);
+  --theme-color-50: var(--color-brand-50);
+  --van-primary-color: var(--color-brand-500);
+  --van-success-color: #16a34a;
+  --van-danger-color: #dc2626;
+  --van-warning-color: #f59e0b;
+  --van-text-color: var(--color-ink-900);
+  --van-text-color-2: var(--color-ink-600);
+  --van-text-color-3: var(--color-ink-400);
+  --van-border-color: var(--color-ink-100);
+  --van-background: var(--color-app-bg);
+  --van-background-2: var(--color-surface);
+  --van-radius-md: var(--radius-control);
+  --van-radius-lg: var(--radius-card);
+  --uni-color-primary: #007aff;
+  --uni-color-success: #4cd964;
+  --uni-color-warning: #f0ad4e;
+  --uni-color-error: #dd524d;
+  --uni-text-color: #333333;
+  --uni-text-color-grey: #999999;
+  --uni-border-color: #c8c7cc;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#app {
+  min-height: 100%;
+  margin: 0;
+}
+
+body {
+  min-width: 320px;
+  overflow: hidden;
+}
+
+button,
+input,
+textarea {
+  font: inherit;
+}
+
+button {
+  cursor: pointer;
+}
+
+button:disabled {
+  cursor: not-allowed;
+}
+
+.app-viewport {
+  min-height: 100dvh;
+  background:
+    linear-gradient(180deg, rgba(238, 248, 255, 0.95) 0%, rgba(245, 247, 250, 0) 280px),
+    var(--color-app-bg);
+}
+
+@utility mobile-shell {
+  display: flex;
+  min-height: 100dvh;
+  width: 100%;
+  max-width: var(--app-max-width);
+  margin-inline: auto;
+  flex-direction: column;
+  background: var(--color-app-bg);
+}
+
+@utility mobile-shell-surface {
+  display: flex;
+  min-height: 100dvh;
+  width: 100%;
+  max-width: var(--app-max-width);
+  margin-inline: auto;
+  flex-direction: column;
+  background: var(--color-surface);
+}
+
+@utility mobile-header {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  border-bottom: 1px solid var(--color-ink-100);
+  background: color-mix(in srgb, var(--color-surface) 95%, transparent);
+  padding: calc(var(--safe-area-top) + 0.75rem) var(--ui-page-x) 0.75rem;
+}
+
+@utility mobile-scroll {
+  min-height: 0;
+  flex: 1 1 0%;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+}
+
+@utility mobile-bottom-bar {
+  position: fixed;
+  bottom: 0;
+  left: 50%;
+  width: 100%;
+  max-width: var(--app-max-width);
+  transform: translateX(-50%);
+  border-top: 1px solid var(--color-ink-100);
+  background: var(--color-surface);
+  padding: 0.75rem var(--ui-page-x) calc(var(--safe-area-bottom) + 0.75rem);
+}
+
+@utility pb-bottom-bar {
+  padding-bottom: calc(var(--ui-bottom-bar-height) + 1rem);
+}
+
+@utility ui-card {
+  border-radius: var(--radius-card);
+  background: var(--color-surface);
+  padding: 1rem;
+}
+
+@utility ui-input {
+  width: 100%;
+  border-radius: var(--radius-control);
+  border: 1px solid var(--color-ink-100);
+  background: var(--color-surface);
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  color: var(--color-ink-900);
+}
+
+@utility ui-button-primary {
+  border-radius: var(--radius-card);
+  background: var(--color-brand-500);
+  padding: 0.75rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: white;
+}
+
+@utility ui-button-secondary {
+  border-radius: var(--radius-card);
+  border: 1px solid var(--color-ink-100);
+  background: var(--color-surface);
+  padding: 0.75rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-ink-700);
+}
+
+@utility mobile-drawer-surface {
+  width: 100%;
+  max-width: var(--app-max-width);
+  border-radius: 1rem 1rem 0 0;
+  background: var(--color-surface);
+  padding: 1rem var(--ui-page-x) calc(var(--safe-area-bottom) + 1rem);
+}
+
+@utility mobile-modal-surface {
+  width: min(calc(100vw - 2rem), 420px);
+  border-radius: var(--radius-card);
+  background: var(--color-surface);
+  padding: 1rem;
+}