From 82f7f56cbac6ef44ff07dbf7b85470547fe17bbb Mon Sep 17 00:00:00 2001 From: martin <406615373@qq.com> Date: Mon, 27 Jul 2026 22:44:08 +0800 Subject: [PATCH] =?UTF-8?q?improve:=E8=B0=83=E6=95=B4=E9=85=8D=E8=89=B2?= =?UTF-8?q?=E6=96=B9=E6=A1=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/tenant/DESIGN_SYSTEM.md | 82 +++++++++---------- .../src/components/charts/ModelDistChart.vue | 2 +- .../src/components/charts/TokenTrendChart.vue | 6 +- .../src/components/common/BasePagination.vue | 14 ++-- web/tenant/src/styles/main.css | 82 +++++++++---------- web/tenant/src/views/Layout.vue | 12 +-- .../src/views/dashboard/DashboardPage.vue | 2 +- .../views/dashboard/PersonalDashboardPage.vue | 12 +-- web/tenant/src/views/finance/WalletPage.vue | 18 ++-- .../views/service/RequestAuditLogsPage.vue | 2 +- .../src/views/service/UsageLogsPage.vue | 2 +- 11 files changed, 117 insertions(+), 117 deletions(-) diff --git a/web/tenant/DESIGN_SYSTEM.md b/web/tenant/DESIGN_SYSTEM.md index b87c3f8..92d1f4b 100644 --- a/web/tenant/DESIGN_SYSTEM.md +++ b/web/tenant/DESIGN_SYSTEM.md @@ -11,7 +11,7 @@ 租户端采用一套轻量、明亮、低对比度的现代控制台设计语言，核心视觉方向为： - 冷白蓝雾背景，避免传统后台常见的纯灰或纯白大面积铺底。 -- 蓝紫色作为品牌主色，冰青、天蓝、薄荷绿、暖橙和珊瑚粉作为功能辅助色。 +- 青绿色作为品牌主色，冰青、天蓝、靛蓝、暖橙和珊瑚粉作为功能辅助色，与落地页保持一致。 - 参考 macOS Liquid Glass 的视觉特征，以半透明材质、环境色折射、镜面高光和柔和阴影表现层级。 - 卡片边界尽量通过透明度、内高光和冷色阴影区分，避免使用过深边框。 - 信息密度保持适中，使用大圆角、充足留白和紧凑的数据排版。 @@ -25,7 +25,7 @@ ### 2.2 玻璃以中性色为主 -玻璃主体保持冷白透明，蓝色、紫色和青色只用于边缘折射或局部光晕，不应形成明显的彩色实心区域。 +玻璃主体保持冷白透明，青绿、青色和少量靛蓝只用于边缘折射或局部光晕，不应形成明显的彩色实心区域。 ### 2.3 层级由材质区分 @@ -38,7 +38,7 @@ ### 2.4 色彩承担语义 -- 蓝紫：品牌、主要操作、当前状态。 +- 青绿：品牌、主要操作、当前状态。 - 天蓝：请求、数据、信息类功能。 - 冰青：Token、连接、实时状态。 - 绿色：成功、安全、余额正常。 @@ -50,26 +50,26 @@ ### 3.1 品牌主色 -主色使用蓝紫色阶，默认品牌色为 `Primary 500`。 +主色使用与落地页一致的 Teal 色阶，默认品牌色为 `Primary 500`。 | Token | 色值 | 建议用途 | | --- | --- | --- | -| `primary-50` | `#F4F3FF` | 浅色选中背景、图标底色 | -| `primary-100` | `#ECE9FF` | 聚焦环、浅色悬停 | -| `primary-200` | `#D9D4FF` | 浅色边框 | -| `primary-300` | `#BBB2FF` | 装饰、高亮边缘 | -| `primary-400` | `#9588FF` | 次级品牌强调 | -| `primary-500` | `#7568F8` | 默认品牌色、主要按钮 | -| `primary-600` | `#6558EA` | 按钮悬停、链接 | -| `primary-700` | `#5547D1` | 按压状态、强调文字 | -| `primary-800` | `#463BAB` | 深色品牌元素 | -| `primary-900` | `#3C3588` | 高对比品牌文字 | -| `primary-950` | `#251F5C` | 极深品牌背景 | +| `primary-50` | `#F0FDFA` | 浅色选中背景、图标底色 | +| `primary-100` | `#CCFBF1` | 聚焦环、浅色悬停 | +| `primary-200` | `#99F6E4` | 浅色边框 | +| `primary-300` | `#5EEAD4` | 装饰、高亮边缘 | +| `primary-400` | `#2DD4BF` | 次级品牌强调 | +| `primary-500` | `#14B8A6` | 默认品牌色、主要按钮 | +| `primary-600` | `#0D9488` | 按钮悬停、链接 | +| `primary-700` | `#0F766E` | 按压状态、强调文字 | +| `primary-800` | `#115E59` | 深色品牌元素 | +| `primary-900` | `#134E4A` | 高对比品牌文字 | +| `primary-950` | `#042F2E` | 极深品牌背景 | 品牌渐变： ```css -linear-gradient(135deg, #7b72ff, #6457e8) +linear-gradient(135deg, #14b8a6, #0d9488) ``` ### 3.2 功能辅助色 @@ -111,10 +111,10 @@ linear-gradient(135deg, #7b72ff, #6457e8) 环境 Mesh Gradient： ```css -radial-gradient(at 12% 8%, rgba(87, 168, 255, 0.08) 0, transparent 36%), -radial-gradient(at 72% 0%, rgba(137, 117, 255, 0.065) 0, transparent 40%), -radial-gradient(at 95% 70%, rgba(70, 213, 219, 0.055) 0, transparent 38%), -radial-gradient(at 45% 100%, rgba(121, 151, 255, 0.045) 0, transparent 42%) +radial-gradient(at 12% 8%, rgba(20, 184, 166, 0.09) 0, transparent 36%), +radial-gradient(at 72% 0%, rgba(6, 182, 212, 0.07) 0, transparent 40%), +radial-gradient(at 95% 70%, rgba(20, 184, 166, 0.055) 0, transparent 38%), +radial-gradient(at 45% 100%, rgba(99, 102, 241, 0.035) 0, transparent 42%) ``` 背景光晕只用于提供环境色，不应成为页面的视觉主体。 @@ -161,9 +161,9 @@ radial-gradient(at 45% 100%, rgba(121, 151, 255, 0.045) 0, transparent 42%) ```css background: - radial-gradient(circle at 4% 7%, rgba(80, 171, 255, 0.16), transparent 31%), - radial-gradient(circle at 105% 62%, rgba(139, 111, 248, 0.13), transparent 35%), - radial-gradient(circle at 28% 106%, rgba(64, 211, 211, 0.10), transparent 30%), + radial-gradient(circle at 4% 7%, rgba(6, 182, 212, 0.13), transparent 31%), + radial-gradient(circle at 105% 62%, rgba(20, 184, 166, 0.11), transparent 35%), + radial-gradient(circle at 28% 106%, rgba(45, 212, 191, 0.10), transparent 30%), rgba(250, 252, 255, 0.62); backdrop-filter: blur(32px) saturate(1.35); ``` @@ -175,7 +175,7 @@ backdrop-filter: blur(32px) saturate(1.35); 菜单选中态采用接近 macOS Liquid Glass 的纯 CSS 近似效果： - 中性半透明白色为主体。 -- 左下角冰青、右下角蓝紫作为极淡折射色。 +- 左下角冰青、右下角青绿作为极淡折射色。 - `blur(26px) saturate(1.7) brightness(1.06)` 增强背景折射。 - 顶部椭圆形高光模拟镜面反射。 - 底部 `1px` 虹彩线模拟玻璃边缘色散。 @@ -208,7 +208,7 @@ backdrop-filter: blur(32px) saturate(1.35); | `shadow-glass` | `0 18px 55px rgba(76, 91, 142, 0.11)` | 大型玻璃容器 | | `shadow-card` | 冷色外阴影 + 白色内高光 | 普通卡片 | | `shadow-card-hover` | `0 18px 48px rgba(91, 104, 151, 0.14)` | 卡片悬停 | -| `shadow-glow` | 蓝紫色柔光 | 品牌图标和少量强调 | +| `shadow-glow` | 青绿色柔光 | 品牌图标和少量强调 | 阴影颜色使用蓝灰或品牌色透明值，不使用纯黑重阴影。 @@ -263,19 +263,19 @@ sans-serif 推荐图表序列： ```text -#7568F8 蓝紫，主数据 -#399CF4 天蓝，次数据 -#2CC5C1 冰青 -#FFB552 暖橙 -#F487A8 珊瑚粉 -#9F74EE 紫色扩展 -#67D49D 薄荷绿 -#FF826F 珊瑚红 +#14B8A6 青绿，主数据 +#06B6D4 冰青，次数据 +#6366F1 靛蓝 +#F59E0B 暖橙 +#EC4899 珊瑚粉 +#3B82F6 天蓝 +#10B981 薄荷绿 +#EF4444 珊瑚红 ``` 图表使用规范： -- 主曲线使用蓝紫，第二曲线使用天蓝。 +- 主曲线使用青绿，第二曲线使用天蓝或冰青。 - 填充区域透明度控制在 `0.04–0.12`。 - 网格线使用低透明度 Slate 色。 - Tooltip 使用深蓝灰半透明背景，不使用纯黑。 @@ -335,13 +335,13 @@ ease-out - 使用透明白色、内高光和冷色阴影建立材质层次。 - 让背景保留极淡的环境色，为玻璃提供折射内容。 -- 使用蓝紫色表达品牌和主要状态。 +- 使用青绿色表达品牌和主要状态。 - 使用功能色区分数据类别和业务状态。 - 保持大圆角、低对比边界和充足留白。 ### 避免 -- 避免大面积高饱和蓝紫渐变。 +- 避免大面积高饱和青绿渐变。 - 避免纯黑阴影、纯黑正文和深灰粗边框。 - 避免在同一视图中使用过多发光元素。 - 避免所有卡片都设置悬浮动画，静态信息卡可保持稳定。 @@ -367,11 +367,11 @@ ease-out ### 15.1 表格容器 - 圆角：`20px`。 -- 背景：半透明冷白玻璃，叠加极淡的天蓝和蓝紫环境光。 +- 背景：半透明冷白玻璃，叠加极淡的冰青和青绿环境光。 - 模糊：`blur(22px) saturate(1.2)`。 - 描边：半透明白色，不使用传统灰色实线外框。 - 阴影：冷色轻阴影与顶部内高光。 -- 横向滚动条使用蓝紫渐变滑块，宽表格在移动端保持横向滚动。 +- 横向滚动条使用冰青到青绿的渐变滑块，宽表格在移动端保持横向滚动。 当表格已经位于带有 `overflow-hidden` 的卡片内部时，使用 `.table-container-flush` 移除重复的圆角、描边和阴影。 @@ -381,7 +381,7 @@ ease-out - 字号：`12px`。 - 字重：`650`。 - 文字颜色：`#64748B`。 -- 背景：冷白玻璃叠加低透明度蓝紫渐变。 +- 背景：冷白玻璃叠加低透明度冰青到青绿渐变。 - 使用顶部镜面高光和底部柔和分隔线表现玻璃厚度。 - 相邻表头之间使用短竖向渐变分隔，不使用贯穿整行的深色边框。 - 表头内容默认不换行，长表格通过横向滚动查看。 @@ -391,8 +391,8 @@ ease-out - 单元格默认背景为低透明度白色。 - 偶数行使用极淡蓝灰背景，形成弱斑马纹。 - 行分隔线使用低透明度 Slate 色。 -- 悬停或行内元素获得焦点时，整行显示冰蓝至淡紫的液态渐变。 -- 悬停行首显示 `3px` 蓝紫色内侧指示条。 +- 悬停或行内元素获得焦点时，整行显示冰青至淡青绿的液态渐变。 +- 悬停行首显示 `3px` 青绿色内侧指示条。 - 数字统一使用 `tabular-nums`，避免金额和计数变化造成宽度跳动。 - 表格内普通链接使用 `primary-600`，悬停时切换为 `primary-800`。 diff --git a/web/tenant/src/components/charts/ModelDistChart.vue b/web/tenant/src/components/charts/ModelDistChart.vue index 2a1215a..f4b88e2 100644 --- a/web/tenant/src/components/charts/ModelDistChart.vue +++ b/web/tenant/src/components/charts/ModelDistChart.vue @@ -26,7 +26,7 @@ const props = withDefaults(defineProps<{ data: () => [], }) -const colors = ['#7568f8', '#42a4f5', '#2cc5c1', '#ffb552', '#f487a8', '#9f74ee', '#67d49d', '#ff826f'] +const colors = ['#14b8a6', '#06b6d4', '#6366f1', '#f59e0b', '#ec4899', '#3b82f6', '#10b981', '#ef4444'] function formatCost(value: number): string { if (value === 0) return '$0.00' diff --git a/web/tenant/src/components/charts/TokenTrendChart.vue b/web/tenant/src/components/charts/TokenTrendChart.vue index 20a94dd..a88a518 100644 --- a/web/tenant/src/components/charts/TokenTrendChart.vue +++ b/web/tenant/src/components/charts/TokenTrendChart.vue @@ -55,14 +55,14 @@ const chartData = computed>(() => ({ { label: 'Token 用量', data: props.data.map((item) => item.input_tokens + item.output_tokens), - borderColor: '#7568f8', - backgroundColor: 'rgba(117, 104, 248, 0.1)', + borderColor: '#14b8a6', + backgroundColor: 'rgba(20, 184, 166, 0.1)', fill: true, tension: 0.42, pointRadius: 2.5, pointHoverRadius: 5, pointBackgroundColor: '#ffffff', - pointBorderColor: '#7568f8', + pointBorderColor: '#14b8a6', pointBorderWidth: 2, borderWidth: 2.25, yAxisID: 'y', diff --git a/web/tenant/src/components/common/BasePagination.vue b/web/tenant/src/components/common/BasePagination.vue index c5abef9..bdd6260 100644 --- a/web/tenant/src/components/common/BasePagination.vue +++ b/web/tenant/src/components/common/BasePagination.vue @@ -147,19 +147,19 @@ function submitJump() { } .pagination-page:hover { - border-color: rgba(117, 104, 248, 0.45); + border-color: rgba(20, 184, 166, 0.45); background: rgba(255, 255, 255, 0.9); - color: #6558ea; + color: #0d9488; } .pagination-page-active { - border-color: #7568f8; - background: #7568f8; + border-color: #14b8a6; + background: #14b8a6; color: white; } .pagination-page-active:hover { - background: #6558ea; + background: #0d9488; color: white; } @@ -192,8 +192,8 @@ function submitJump() { } .pagination-jump-input:focus { - border-color: #7568f8; - box-shadow: 0 0 0 3px rgba(117, 104, 248, 0.12); + border-color: #14b8a6; + box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.12); } @media (max-width: 900px) { diff --git a/web/tenant/src/styles/main.css b/web/tenant/src/styles/main.css index aa8d9a2..3028698 100644 --- a/web/tenant/src/styles/main.css +++ b/web/tenant/src/styles/main.css @@ -1,18 +1,18 @@ @import "tailwindcss"; @theme { - /* 主色 - 蓝紫色系 */ - --color-primary-50: #f4f3ff; - --color-primary-100: #ece9ff; - --color-primary-200: #d9d4ff; - --color-primary-300: #bbb2ff; - --color-primary-400: #9588ff; - --color-primary-500: #7568f8; - --color-primary-600: #6558ea; - --color-primary-700: #5547d1; - --color-primary-800: #463bab; - --color-primary-900: #3c3588; - --color-primary-950: #251f5c; + /* 主色 - 与落地页一致的青绿色系 */ + --color-primary-50: #f0fdfa; + --color-primary-100: #ccfbf1; + --color-primary-200: #99f6e4; + --color-primary-300: #5eead4; + --color-primary-400: #2dd4bf; + --color-primary-500: #14b8a6; + --color-primary-600: #0d9488; + --color-primary-700: #0f766e; + --color-primary-800: #115e59; + --color-primary-900: #134e4a; + --color-primary-950: #042f2e; /* 多彩辅助色（与设计图对齐） */ --color-accent-blue: #3B82F6; @@ -38,16 +38,16 @@ /* 阴影 - 轻量精致（对齐设计图） */ --shadow-glass: 0 18px 55px rgba(76, 91, 142, 0.11); --shadow-glass-sm: 0 8px 24px rgba(76, 91, 142, 0.08); - --shadow-glow: 0 10px 30px rgba(117, 104, 248, 0.28); - --shadow-glow-lg: 0 18px 46px rgba(117, 104, 248, 0.34); + --shadow-glow: 0 10px 30px rgba(20, 184, 166, 0.26); + --shadow-glow-lg: 0 18px 46px rgba(20, 184, 166, 0.32); --shadow-card: 0 10px 34px rgba(91, 104, 151, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9); --shadow-card-hover: 0 18px 48px rgba(91, 104, 151, 0.14); --shadow-inner-glow: inset 0 1px 0 rgba(255, 255, 255, 0.6); /* 背景渐变（对齐设计图） */ - --background-image-gradient-primary: linear-gradient(135deg, #7b72ff, #6457e8); + --background-image-gradient-primary: linear-gradient(135deg, #14b8a6, #0d9488); --background-image-gradient-dark: linear-gradient(135deg, #1e293b, #0f172a); - --background-image-mesh-gradient: radial-gradient(at 12% 8%, rgba(87, 168, 255, 0.08) 0px, transparent 36%), radial-gradient(at 72% 0%, rgba(137, 117, 255, 0.065) 0px, transparent 40%), radial-gradient(at 95% 70%, rgba(70, 213, 219, 0.055) 0px, transparent 38%), radial-gradient(at 45% 100%, rgba(121, 151, 255, 0.045) 0px, transparent 42%); + --background-image-mesh-gradient: radial-gradient(at 12% 8%, rgba(20, 184, 166, 0.09) 0px, transparent 36%), radial-gradient(at 72% 0%, rgba(6, 182, 212, 0.07) 0px, transparent 40%), radial-gradient(at 95% 70%, rgba(20, 184, 166, 0.055) 0px, transparent 38%), radial-gradient(at 45% 100%, rgba(99, 102, 241, 0.035) 0px, transparent 42%); /* 动画 */ --animate-fade-in: fade-in 0.3s ease-out; @@ -83,8 +83,8 @@ to { background-position: 200% 0; } } @keyframes glow { - from { box-shadow: 0 0 20px rgba(123, 143, 245, 0.22); } - to { box-shadow: 0 0 30px rgba(123, 143, 245, 0.38); } + from { box-shadow: 0 0 20px rgba(20, 184, 166, 0.22); } + to { box-shadow: 0 0 30px rgba(20, 184, 166, 0.38); } } } @@ -373,7 +373,7 @@ body.modal-open { border-radius: 1.25rem; background: radial-gradient(circle at 0 0, rgba(92, 177, 255, 0.055), transparent 28%), - radial-gradient(circle at 100% 100%, rgba(132, 105, 246, 0.045), transparent 30%), + radial-gradient(circle at 100% 100%, rgba(20, 184, 166, 0.055), transparent 30%), rgba(255, 255, 255, 0.42); box-shadow: 0 10px 30px rgba(75, 91, 137, 0.07), @@ -381,7 +381,7 @@ body.modal-open { backdrop-filter: blur(22px) saturate(1.2); -webkit-backdrop-filter: blur(22px) saturate(1.2); scrollbar-width: thin; - scrollbar-color: rgba(117, 104, 248, 0.28) transparent; + scrollbar-color: rgba(20, 184, 166, 0.28) transparent; } .table-container::-webkit-scrollbar { width: 8px; @@ -393,7 +393,7 @@ body.modal-open { .table-container::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 9999px; - background: linear-gradient(90deg, rgba(65, 168, 244, 0.4), rgba(117, 104, 248, 0.42)); + background: linear-gradient(90deg, rgba(6, 182, 212, 0.4), rgba(20, 184, 166, 0.44)); background-clip: padding-box; } @@ -480,7 +480,7 @@ body.modal-open { color: #64748b; background: linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(242, 246, 255, 0.72)), - linear-gradient(100deg, rgba(63, 163, 247, 0.065), rgba(117, 104, 248, 0.075)); + linear-gradient(100deg, rgba(6, 182, 212, 0.055), rgba(20, 184, 166, 0.075)); border-bottom: 1px solid rgba(191, 203, 225, 0.42); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98), @@ -528,13 +528,13 @@ body.modal-open { .table tbody tr:focus-within td { color: #334155; background: - linear-gradient(90deg, rgba(235, 247, 255, 0.76), rgba(244, 240, 255, 0.68)), + linear-gradient(90deg, rgba(236, 254, 255, 0.72), rgba(240, 253, 250, 0.76)), rgba(255, 255, 255, 0.74); } .table tbody tr:hover td:first-child, .table tbody tr:focus-within td:first-child { box-shadow: - inset 3px 0 0 rgba(117, 104, 248, 0.62), + inset 3px 0 0 rgba(20, 184, 166, 0.64), inset 0 1px 0 rgba(255, 255, 255, 0.7); } .table tbody tr:hover td:last-child, @@ -543,11 +543,11 @@ body.modal-open { } .table tbody a:not(.btn) { font-weight: 550; - color: #6558ea; + color: #0d9488; transition: color 160ms ease; } .table tbody a:not(.btn):hover { - color: #463bab; + color: #0f766e; } .table tbody .btn-ghost { border: 1px solid transparent; @@ -602,12 +602,12 @@ body.modal-open { color: #64748b; } .table-pagination .btn:hover:not(:disabled) { - border-color: rgba(217, 212, 255, 0.9); + border-color: rgba(153, 246, 228, 0.9); background: rgba(255, 255, 255, 0.86); box-shadow: 0 7px 18px rgba(76, 91, 142, 0.1), inset 0 1px 0 rgba(255, 255, 255, 1); - color: #6558ea; + color: #0d9488; } .table-pagination .btn:disabled { border-color: rgba(226, 232, 240, 0.58); @@ -756,7 +756,7 @@ body.modal-open { linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 18%), linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 20%), radial-gradient(ellipse 105% 34% at 8% 108%, rgba(44, 199, 218, 0.11), transparent 70%), - radial-gradient(ellipse 92% 32% at 104% 106%, rgba(117, 104, 248, 0.1), transparent 72%); + radial-gradient(ellipse 92% 32% at 104% 106%, rgba(20, 184, 166, 0.11), transparent 72%); content: ''; pointer-events: none; } @@ -804,27 +804,27 @@ body.modal-open { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); } .sidebar-link-active { - color: #5547d1; - background: rgba(117, 104, 248, 0.13); + color: #0f766e; + background: rgba(20, 184, 166, 0.13); background: color-mix(in srgb, var(--color-primary-500) 14%, rgba(255, 255, 255, 0.24)); border-color: transparent; box-shadow: - 0 2px 8px rgba(85, 71, 209, 0.08), + 0 2px 8px rgba(13, 148, 136, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 1px 0 0 rgba(255, 255, 255, 0.28), inset -1px 0 0 rgba(255, 255, 255, 0.08), - inset 0 -1px 0 rgba(85, 71, 209, 0.05); + inset 0 -1px 0 rgba(13, 148, 136, 0.05); } .sidebar-link-active:hover { - color: #463bab; - background: rgba(117, 104, 248, 0.17); + color: #115e59; + background: rgba(20, 184, 166, 0.17); background: color-mix(in srgb, var(--color-primary-500) 18%, rgba(255, 255, 255, 0.28)); box-shadow: - 0 3px 10px rgba(85, 71, 209, 0.1), + 0 3px 10px rgba(13, 148, 136, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.56), inset 1px 0 0 rgba(255, 255, 255, 0.32), inset -1px 0 0 rgba(255, 255, 255, 0.1), - inset 0 -1px 0 rgba(85, 71, 209, 0.06); + inset 0 -1px 0 rgba(13, 148, 136, 0.06); } .sidebar-link > * { position: relative; @@ -846,12 +846,12 @@ body.modal-open { .sidebar-toggle:hover { border-color: rgba(255, 255, 255, 0.34); background: rgba(255, 255, 255, 0.28); - color: #5547d1; + color: #0f766e; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); } .sidebar-toggle:focus-visible, .sidebar-link:focus-visible { - outline: 2px solid rgba(117, 104, 248, 0.62); + outline: 2px solid rgba(20, 184, 166, 0.62); outline-offset: 2px; } @media (prefers-reduced-transparency: reduce) { @@ -870,8 +870,8 @@ body.modal-open { color: rgba(17, 24, 39, 0.92); } .sidebar-link-active { - border-color: rgba(85, 71, 209, 0.38); - background: rgba(117, 104, 248, 0.22); + border-color: rgba(13, 148, 136, 0.38); + background: rgba(20, 184, 166, 0.22); } } @media (prefers-reduced-motion: reduce) { diff --git a/web/tenant/src/views/Layout.vue b/web/tenant/src/views/Layout.vue index 6c20f2f..a928885 100644 --- a/web/tenant/src/views/Layout.vue +++ b/web/tenant/src/views/Layout.vue @@ -248,7 +248,7 @@ onBeforeUnmount(() => { >
-
+
{{ tenantInfo.name.charAt(0) || 'T' }}
@@ -550,12 +550,12 @@ onBeforeUnmount(() => { align-items: center; justify-content: center; gap: 0.5rem; - border: 1px solid rgba(117, 104, 248, 0.28); + border: 1px solid rgba(20, 184, 166, 0.28); border-radius: 9999px; background: rgba(255, 255, 255, 0.82); padding: 0 0.65rem; - box-shadow: 0 8px 22px rgba(92, 82, 210, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.94); - color: #6558d9; + box-shadow: 0 8px 22px rgba(13, 148, 136, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.94); + color: #0d9488; font-size: 0.75rem; font-weight: 700; transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease; @@ -564,9 +564,9 @@ onBeforeUnmount(() => { .docs-nav-entry:hover, .docs-nav-entry-active { transform: translateY(-1px); - border-color: rgba(117, 104, 248, 0.5); + border-color: rgba(20, 184, 166, 0.5); background: #fff; - box-shadow: 0 10px 26px rgba(92, 82, 210, 0.18), inset 0 1px 0 #fff; + box-shadow: 0 10px 26px rgba(13, 148, 136, 0.18), inset 0 1px 0 #fff; } .docs-nav-badge { diff --git a/web/tenant/src/views/dashboard/DashboardPage.vue b/web/tenant/src/views/dashboard/DashboardPage.vue index 2f8caa8..79f15c8 100644 --- a/web/tenant/src/views/dashboard/DashboardPage.vue +++ b/web/tenant/src/views/dashboard/DashboardPage.vue @@ -460,7 +460,7 @@ onMounted(refreshAll) .refresh-button:hover:not(:disabled) { transform: translateY(-1px); background: white; - color: #6558ea; + color: #0d9488; } .refresh-button:disabled { diff --git a/web/tenant/src/views/dashboard/PersonalDashboardPage.vue b/web/tenant/src/views/dashboard/PersonalDashboardPage.vue index 6afd8ae..0c6bef1 100644 --- a/web/tenant/src/views/dashboard/PersonalDashboardPage.vue +++ b/web/tenant/src/views/dashboard/PersonalDashboardPage.vue @@ -556,7 +556,7 @@ onMounted(refreshAll) .personal-refresh:hover:not(:disabled) { transform: translateY(-1px); background: white; - color: #6558ea; + color: #0d9488; } .personal-refresh:disabled { @@ -649,7 +649,7 @@ onMounted(refreshAll) .quota-card { background: - radial-gradient(circle at 100% 0, rgba(117, 104, 248, 0.11), transparent 34%), + radial-gradient(circle at 100% 0, rgba(20, 184, 166, 0.11), transparent 34%), var(--glass-bg-strong); } @@ -660,8 +660,8 @@ onMounted(refreshAll) } .quota-icon { - background: rgba(117, 104, 248, 0.12); - color: #7568f8; + background: rgba(20, 184, 166, 0.12); + color: #14b8a6; } .quality-icon { @@ -721,7 +721,7 @@ onMounted(refreshAll) display: block; height: 100%; border-radius: inherit; - background: linear-gradient(90deg, #42a4f5, #7568f8); + background: linear-gradient(90deg, #06b6d4, #14b8a6); } .cache-strip { @@ -761,7 +761,7 @@ onMounted(refreshAll) display: block; height: 100%; border-radius: inherit; - background: linear-gradient(90deg, #42a4f5, #7568f8); + background: linear-gradient(90deg, #06b6d4, #14b8a6); } .model-progress span { diff --git a/web/tenant/src/views/finance/WalletPage.vue b/web/tenant/src/views/finance/WalletPage.vue index d3240b5..07207e2 100644 --- a/web/tenant/src/views/finance/WalletPage.vue +++ b/web/tenant/src/views/finance/WalletPage.vue @@ -771,12 +771,12 @@ onBeforeUnmount(() => { .amount-pill small { margin-right: 0.125rem; font-size: 0.6875rem; font-weight: 500; } .amount-pill em { margin-top: 0.15rem; color: #059669; font-size: 0.5625rem; font-style: normal; font-weight: 700; } -.amount-pill:hover { border-color: #c7d2fe; color: #6558d9; } +.amount-pill:hover { border-color: #99f6e4; color: #0d9488; } .amount-pill-active { - border-color: #a5b4fc; - background: #f5f3ff; - box-shadow: 0 0 0 3px rgba(117, 104, 248, 0.08); - color: #6558d9; + border-color: #5eead4; + background: #f0fdfa; + box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.08); + color: #0d9488; } .pay-method-card { @@ -792,11 +792,11 @@ onBeforeUnmount(() => { transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease; } -.pay-method-card:hover { border-color: #c7d2fe; } +.pay-method-card:hover { border-color: #99f6e4; } .pay-method-card-active { - border-color: #a5b4fc; - background: #f5f3ff; - box-shadow: 0 0 0 3px rgba(117, 104, 248, 0.08); + border-color: #5eead4; + background: #f0fdfa; + box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.08); } .pay-method-icon { diff --git a/web/tenant/src/views/service/RequestAuditLogsPage.vue b/web/tenant/src/views/service/RequestAuditLogsPage.vue index 96ceb45..86cb810 100644 --- a/web/tenant/src/views/service/RequestAuditLogsPage.vue +++ b/web/tenant/src/views/service/RequestAuditLogsPage.vue @@ -445,7 +445,7 @@ onMounted(() => { z-index: 5; background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(239, 244, 255, 0.94)), - linear-gradient(100deg, rgba(63, 163, 247, 0.08), rgba(117, 104, 248, 0.1)); + linear-gradient(100deg, rgba(6, 182, 212, 0.07), rgba(20, 184, 166, 0.1)); backdrop-filter: blur(24px) saturate(1.35); -webkit-backdrop-filter: blur(24px) saturate(1.35); } diff --git a/web/tenant/src/views/service/UsageLogsPage.vue b/web/tenant/src/views/service/UsageLogsPage.vue index 14a7ac4..6f73911 100644 --- a/web/tenant/src/views/service/UsageLogsPage.vue +++ b/web/tenant/src/views/service/UsageLogsPage.vue @@ -1002,7 +1002,7 @@ onMounted(() => { z-index: 5; background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(239, 244, 255, 0.94)), - linear-gradient(100deg, rgba(63, 163, 247, 0.08), rgba(117, 104, 248, 0.1)); + linear-gradient(100deg, rgba(6, 182, 212, 0.07), rgba(20, 184, 166, 0.1)); backdrop-filter: blur(24px) saturate(1.35); -webkit-backdrop-filter: blur(24px) saturate(1.35); }