first

src/static/styles/common.scss

@@ -0,0 +1,5 @@
+page {
+  font-size: $u-font-base;
+  color: $u-main-color;
+  background-color: $u-bg-color;
+}

src/static/styles/theme.scss

@@ -0,0 +1,280 @@
+/* ================================
+   GT Agent Company - Design System
+   小米风格 + 现代扁平化设计
+   ================================ */
+
+:root,
+page {
+  /* === 品牌色 Brand Colors - 只保留3个核心颜色 === */
+  --brand-primary: #d4af37;        /* 主色 - 金色 */
+  --brand-secondary: #1e293b;      /* 辅色 - 深灰/黑色 */
+  --brand-accent: #ffffff;         /* 强调 - 白色 */
+
+  /* === 语义色 Semantic Colors === */
+  --color-success: #52c41a;        /* 成功 - Green */
+  --color-success-bg: #f6ffed;     /* 成功背景 */
+  --color-warning: #faad14;        /* 警告 - Amber */
+  --color-warning-bg: #fffbe6;     /* 警告背景 */
+  --color-error: #ff4d4f;          /* 错误 - Red */
+  --color-error-bg: #fff2f0;       /* 错误背景 */
+  --color-info: #1890ff;           /* 信息 - Blue */
+  --color-info-bg: #e6f7ff;        /* 信息背景 */
+
+  /* === 文字色阶 Text Colors === */
+  --text-primary: #212121;         /* 标题/重要文字 */
+  --text-secondary: #666666;       /* 正文 */
+  --text-tertiary: #999999;        /* 辅助信息 */
+  --text-quaternary: #cccccc;      /* 禁用/占位符 */
+  --text-inverse: #ffffff;         /* 反色文字 */
+
+  /* === 背景色 Background Colors === */
+  --bg-page: #fafafa;              /* 页面背景 */
+  --bg-container: #ffffff;         /* 容器/卡片背景 */
+  --bg-elevated: #ffffff;          /* 悬浮层背景 */
+  --bg-muted: #f5f5f5;             /* 静音背景 */
+  --bg-overlay: rgba(0, 0, 0, 0.45); /* 遮罩层 */
+
+  /* === 边框色 Border Colors === */
+  --border-primary: #e8e8e8;       /* 主边框 */
+  --border-secondary: #f0f0f0;     /* 次边框 */
+  --border-light: #fafafa;         /* 浅边框 */
+
+  /* === 阴影 Shadows === */
+  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.06);
+  --shadow-md: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
+  --shadow-lg: 0 4px 16px 0 rgba(0, 0, 0, 0.12);
+  --shadow-xl: 0 8px 24px 0 rgba(0, 0, 0, 0.15);
+  --shadow-brand: 0 4px 12px 0 rgba(255, 103, 0, 0.2);
+
+  /* === 圆角 Radius === */
+  --radius-xs: 4px;
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-xl: 20px;
+  --radius-full: 9999px;
+
+  /* === 间距 Spacing === */
+  --space-xs: 4px;
+  --space-sm: 8px;
+  --space-md: 12px;
+  --space-lg: 16px;
+  --space-xl: 24px;
+  --space-2xl: 32px;
+  --space-3xl: 48px;
+
+  /* === 字号 Font Sizes === */
+  --text-xs: 11px;    /* 徽章/小标签 */
+  --text-sm: 12px;    /* 次要信息 */
+  --text-base: 14px;  /* 正文 */
+  --text-lg: 16px;    /* 卡片标题 */
+  --text-xl: 18px;    /* 页面标题 */
+  --text-2xl: 20px;   /* Logo */
+  --text-3xl: 24px;   /* 统计数值 */
+  --text-4xl: 32px;   /* 大数字 */
+  --text-5xl: 40px;   /* 主要金额 */
+
+  /* === 行高 Line Heights === */
+  --leading-tight: 1.2;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.75;
+
+  /* === 过渡 Transitions === */
+  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* === Z-index === */
+  --z-base: 1;
+  --z-dropdown: 1000;
+  --z-sticky: 1020;
+  --z-fixed: 1030;
+  --z-modal-backdrop: 1040;
+  --z-modal: 1050;
+  --z-popover: 1060;
+  --z-tooltip: 1070;
+  --z-toast: 1080;
+}
+
+/* === 暗色主题 Dark Theme === */
+.theme-dark {
+  --brand-primary: #ff8533;        /* 暗色下橙色更柔和 */
+  --color-success: #73d13d;
+  --color-warning: #ffc53d;
+  --color-error: #ff7875;
+  --color-info: #40a9ff;
+
+  --text-primary: #ffffff;
+  --text-secondary: #b0b8c1;
+  --text-tertiary: #8a8f95;
+  --text-quaternary: #6c757d;
+  --text-inverse: #1a1a1a;
+
+  --bg-page: #1a1a1a;
+  --bg-container: #2d2d2d;
+  --bg-elevated: #3a3a3a;
+  --bg-muted: #242424;
+  --bg-overlay: rgba(0, 0, 0, 0.65);
+
+  --border-primary: #3a3a3a;
+  --border-secondary: #2d2d2d;
+  --border-light: #242424;
+
+  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 2px 8px 0 rgba(0, 0, 0, 0.4);
+  --shadow-lg: 0 4px 16px 0 rgba(0, 0, 0, 0.5);
+  --shadow-xl: 0 8px 24px 0 rgba(0, 0, 0, 0.6);
+}
+
+/* === 全局重置 Global Resets === */
+page {
+  background-color: var(--bg-page);
+  color: var(--text-secondary);
+  font-size: var(--text-base);
+  line-height: var(--leading-normal);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* === 工具类 Utility Classes === */
+.text-primary { color: var(--text-primary); }
+.text-secondary { color: var(--text-secondary); }
+.text-tertiary { color: var(--text-tertiary); }
+.text-brand { color: var(--brand-primary); }
+.text-success { color: var(--color-success); }
+.text-warning { color: var(--color-warning); }
+.text-error { color: var(--color-error); }
+
+.bg-page { background-color: var(--bg-page); }
+.bg-container { background-color: var(--bg-container); }
+.bg-muted { background-color: var(--bg-muted); }
+.bg-brand { background-color: var(--brand-primary); }
+.bg-brand-light { background-color: var(--brand-primary-light); }
+
+.border-primary { border-color: var(--border-primary); }
+.border-secondary { border-color: var(--border-secondary); }
+
+.shadow-sm { box-shadow: var(--shadow-sm); }
+.shadow-md { box-shadow: var(--shadow-md); }
+.shadow-lg { box-shadow: var(--shadow-lg); }
+.shadow-brand { box-shadow: var(--shadow-brand); }
+
+.radius-xs { border-radius: var(--radius-xs); }
+.radius-sm { border-radius: var(--radius-sm); }
+.radius-md { border-radius: var(--radius-md); }
+.radius-lg { border-radius: var(--radius-lg); }
+.radius-full { border-radius: var(--radius-full); }
+
+.transition-all { transition: all var(--transition-base); }
+.transition-fast { transition: all var(--transition-fast); }
+
+/* === 组件样式 Component Styles === */
+
+/* 卡片 */
+.card {
+  background-color: var(--bg-container);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-sm);
+  padding: var(--space-lg);
+  transition: var(--transition-base);
+}
+
+.card:active {
+  transform: scale(0.98);
+  box-shadow: var(--shadow-xs);
+}
+
+/* 按钮 */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-sm) var(--space-lg);
+  border-radius: var(--radius-sm);
+  font-size: var(--text-base);
+  font-weight: 500;
+  line-height: var(--leading-tight);
+  transition: var(--transition-fast);
+  cursor: pointer;
+  user-select: none;
+}
+
+.btn-primary {
+  background-color: var(--brand-primary);
+  color: var(--text-inverse);
+  box-shadow: var(--shadow-brand);
+}
+
+.btn-primary:hover {
+  background-color: var(--brand-primary-light);
+}
+
+.btn-primary:active {
+  background-color: var(--brand-primary-dark);
+  transform: scale(0.96);
+}
+
+/* 输入框 */
+.input {
+  width: 100%;
+  padding: var(--space-md);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-sm);
+  font-size: var(--text-base);
+  color: var(--text-primary);
+  background-color: var(--bg-container);
+  transition: var(--transition-fast);
+}
+
+.input:focus {
+  border-color: var(--brand-primary);
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(255, 103, 0, 0.1);
+}
+
+.input::placeholder {
+  color: var(--text-quaternary);
+}
+
+/* 徽章 */
+.badge {
+  display: inline-block;
+  padding: 2px var(--space-sm);
+  border-radius: var(--radius-full);
+  font-size: var(--text-xs);
+  font-weight: 500;
+  line-height: var(--leading-tight);
+}
+
+.badge-success {
+  background-color: var(--color-success-bg);
+  color: var(--color-success);
+}
+
+.badge-warning {
+  background-color: var(--color-warning-bg);
+  color: var(--color-warning);
+}
+
+.badge-error {
+  background-color: var(--color-error-bg);
+  color: var(--color-error);
+}
+
+/* 分隔线 */
+.divider {
+  height: 1px;
+  background-color: var(--border-secondary);
+  margin: var(--space-lg) 0;
+}
+
+/* 安全区域 */
+.safe-area-bottom {
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.safe-area-top {
+  padding-top: constant(safe-area-inset-top);
+  padding-top: env(safe-area-inset-top);
+}