From 2d6992d6569410ea844c24f53d7f2d048d3e6fea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=91=A3=E5=AE=8F=E5=87=AF?= Date: Mon, 20 Jul 2026 20:10:22 +0800 Subject: [PATCH] feat(frontend): adapt TDesign themes --- frontend-web/src/main.tsx | 7 +- .../src/pages/light-app-management.css | 18 +- .../task-components/css/strategy-data.css | 3 - frontend-web/src/styles/tdesign-theme.css | 338 ++++++++++++++++++ 4 files changed, 356 insertions(+), 10 deletions(-) create mode 100644 frontend-web/src/styles/tdesign-theme.css diff --git a/frontend-web/src/main.tsx b/frontend-web/src/main.tsx index 2c9beaf4..263da283 100644 --- a/frontend-web/src/main.tsx +++ b/frontend-web/src/main.tsx @@ -2,9 +2,10 @@ import "@fontsource/noto-sans-sc/chinese-simplified-400.css"; import "@fontsource/noto-sans-sc/chinese-simplified-500.css"; import "@fontsource/noto-sans-sc/chinese-simplified-600.css"; import "@fontsource/noto-sans-sc/chinese-simplified-700.css"; -import "./styles/globals.css"; -import "tdesign-react/es/style/index.css"; -import "katex/dist/katex.min.css"; +import "./styles/globals.css"; +import "tdesign-react/es/style/index.css"; +import "./styles/tdesign-theme.css"; +import "katex/dist/katex.min.css"; import React from "react"; import ReactDOM from "react-dom/client"; diff --git a/frontend-web/src/pages/light-app-management.css b/frontend-web/src/pages/light-app-management.css index 22250842..5ea2b8ce 100644 --- a/frontend-web/src/pages/light-app-management.css +++ b/frontend-web/src/pages/light-app-management.css @@ -651,15 +651,25 @@ box-shadow: 0 0 0 2px rgba(0, 98, 217, 0.16); } -/* ── TDesign Select focus / hover ────────────────────────────────────── */ +/* ── TDesign Select interaction ──────────────────────────────────────── */ [data-theme="lightblue"] .light-app-management-page .t-select:hover .t-input, [data-theme="lightblue"] .light-app-management-page .t-select:hover .t-input__wrap { - border-color: rgba(0, 98, 217, 0.5); + border-color: #A6A6A6; } [data-theme="lightblue"] .light-app-management-page .t-select.t-is-focused .t-input, [data-theme="lightblue"] .light-app-management-page .t-select.t-is-focused .t-input__wrap { - border-color: #0062D9; - box-shadow: 0 0 0 2px rgba(0, 98, 217, 0.16); + /* Opening the options with a mouse is not a validation or selected state. */ + border-color: #DBDBDB; + box-shadow: none; +} + +/* Keep a visible focus ring for keyboard navigation only. */ +@supports selector(.t-select:has(.t-input__inner:focus-visible)) { + [data-theme="lightblue"] .light-app-management-page .t-select.t-is-focused:has(.t-input__inner:focus-visible) .t-input, + [data-theme="lightblue"] .light-app-management-page .t-select.t-is-focused:has(.t-input__inner:focus-visible) .t-input__wrap { + border-color: #0062D9; + box-shadow: 0 0 0 2px rgba(0, 98, 217, 0.16); + } } /* ── 启用开关 ───────────────────────────────────────────────────────── */ diff --git a/frontend-web/src/strategy-components/components/task-components/css/strategy-data.css b/frontend-web/src/strategy-components/components/task-components/css/strategy-data.css index 03e053c4..8687eb0c 100644 --- a/frontend-web/src/strategy-components/components/task-components/css/strategy-data.css +++ b/frontend-web/src/strategy-components/components/task-components/css/strategy-data.css @@ -8,7 +8,6 @@ /* ── CSS variables (light - red) ─────────────────────────────────────── */ .strategy-data { --color-main: #cf1322; - --td-brand-color: #ce2d39; --bg-color: #fef6f6; --card-border: #fa9196; --text-color: #222222; @@ -23,7 +22,6 @@ /* ── CSS variables (light - blue) ────────────────────────────────────── */ [data-theme="lightblue"] .strategy-data { --color-main: #0062D9; - --td-brand-color: #0062D9; --bg-color: #EAF4FF; --card-border: #80BCFF; @@ -35,7 +33,6 @@ /* ── CSS variables (dark) ────────────────────────────────────────────── */ .dark .strategy-data { --color-main: var(--color-primary); - --td-brand-color: var(--color-primary); --bg-color: rgba(22, 119, 255, 0.12); --card-border: rgba(43, 143, 254, 0.55); --text-color: var(--color-text-strong); diff --git a/frontend-web/src/styles/tdesign-theme.css b/frontend-web/src/styles/tdesign-theme.css new file mode 100644 index 00000000..046bc052 --- /dev/null +++ b/frontend-web/src/styles/tdesign-theme.css @@ -0,0 +1,338 @@ +/** + * TDesign React theme bridge. + * + * Keep this file loaded after `tdesign-react/es/style/index.css`. TDesign + * overlays are mounted below , so the tokens intentionally live on the + * document root instead of a page container. + * + * Sources: + * - docs/浅红色UI规范/01-基础样式.md + * - docs/ui规范-浅蓝/浅蓝色ui规范.md + * - docs/ui规范-深蓝/00-基础-色彩字体间距.md + */ + +/* Shared light-theme functional palettes and neutral scale. */ +:root { + --td-gray-color-1: #fafafa; + --td-gray-color-2: #f5f5f5; + --td-gray-color-3: #e8e8e8; + --td-gray-color-4: #dbdbdb; + --td-gray-color-5: #c1c1c1; + --td-gray-color-6: #a6a6a6; + --td-gray-color-7: #7f7f7f; + --td-gray-color-8: #6b6b6b; + --td-gray-color-9: #575757; + --td-gray-color-10: #3d3d3d; + --td-gray-color-11: #333333; + --td-gray-color-12: #2b2b2b; + --td-gray-color-13: #222222; + --td-gray-color-14: #181818; + + --td-warning-color-1: #fffcf9; + --td-warning-color-2: #fffaf4; + --td-warning-color-3: #fff6ea; + --td-warning-color-4: #ffeed4; + --td-warning-color-5: #ffddaa; + --td-warning-color-6: #ffcc80; + --td-warning-color-7: #ffbb55; + --td-warning-color-8: #ffaa2b; + --td-warning-color-9: #ff9900; + --td-warning-color-10: #b35f00; + + --td-success-color-1: #fafefd; + --td-success-color-2: #f6fdfb; + --td-success-color-3: #eefcf7; + --td-success-color-4: #dcf8ee; + --td-success-color-5: #baf1dd; + --td-success-color-6: #97ebcd; + --td-success-color-7: #74e4bc; + --td-success-color-8: #52ddab; + --td-success-color-9: #2fd69a; + --td-success-color-10: #118a65; + + --td-error-color-1: #fefafa; + --td-error-color-2: #fef6f6; + --td-error-color-3: #feeded; + --td-error-color-4: #fddadc; + --td-error-color-5: #fcb5b9; + --td-error-color-6: #f5222d; + --td-error-color-7: #cf1322; + --td-error-color-8: #a8071a; + --td-error-color-9: #820014; + --td-error-color-10: #5c0011; + + --td-warning-color: #ff9900; + --td-warning-color-hover: #c66d00; + --td-warning-color-focus: #fff6ea; + --td-warning-color-active: #b35f00; + --td-warning-color-disabled: #ffcc80; + --td-warning-color-light: #fffaf4; + --td-warning-color-light-hover: #fff6ea; + + --td-success-color: #2fd69a; + --td-success-color-hover: #189d72; + --td-success-color-focus: #eefcf7; + --td-success-color-active: #118a65; + --td-success-color-disabled: #97ebcd; + --td-success-color-light: #f6fdfb; + --td-success-color-light-hover: #eefcf7; + + --td-error-color: #f5222d; + --td-error-color-hover: #cf1322; + --td-error-color-focus: #feeded; + --td-error-color-active: #a8071a; + --td-error-color-disabled: #fa9196; + --td-error-color-light: #fef6f6; + --td-error-color-light-hover: #feeded; + + --td-font-white-1: #ffffff; + --td-font-white-2: rgba(255, 255, 255, 0.72); + --td-font-white-3: rgba(255, 255, 255, 0.48); + --td-font-white-4: rgba(255, 255, 255, 0.32); + --td-font-gray-1: #222222; + --td-font-gray-2: #575757; + --td-font-gray-3: #a6a6a6; + --td-font-gray-4: #c1c1c1; + + --td-mask-active: rgba(0, 0, 0, 0.6); + --td-mask-disabled: rgba(255, 255, 255, 0.6); + --td-mask-background: rgba(255, 255, 255, 0.96); + + --td-bg-color-page: #fafafa; + --td-bg-color-container: #ffffff; + --td-bg-color-container-hover: #fafafa; + --td-bg-color-container-active: #f5f5f5; + --td-bg-color-container-select: #ffffff; + --td-bg-color-secondarycontainer: #fafafa; + --td-bg-color-secondarycontainer-hover: #f5f5f5; + --td-bg-color-secondarycontainer-active: #e8e8e8; + --td-bg-color-component: #f5f5f5; + --td-bg-color-component-hover: #e8e8e8; + --td-bg-color-component-active: #dbdbdb; + --td-bg-color-secondarycomponent: #e8e8e8; + --td-bg-color-secondarycomponent-hover: #dbdbdb; + --td-bg-color-secondarycomponent-active: #c1c1c1; + --td-bg-color-component-disabled: #f5f5f5; + --td-bg-color-specialcomponent: #ffffff; + + --td-text-color-primary: #222222; + --td-text-color-secondary: #575757; + --td-text-color-placeholder: #a6a6a6; + --td-text-color-disabled: #c1c1c1; + --td-text-color-anti: #ffffff; + --td-text-color-watermark: rgba(34, 34, 34, 0.1); + + --td-border-level-1-color: #e8e8e8; + --td-component-stroke: #e8e8e8; + --td-border-level-2-color: #dbdbdb; + --td-component-border: #dbdbdb; + + --td-shadow-1: 0 2px 8px rgba(34, 34, 34, 0.08); + --td-shadow-2: 0 6px 18px rgba(34, 34, 34, 0.12); + --td-shadow-3: 0 12px 32px rgba(34, 34, 34, 0.16); + --td-shadow-inset-top: inset 0 0.5px 0 #e8e8e8; + --td-shadow-inset-right: inset 0.5px 0 0 #e8e8e8; + --td-shadow-inset-bottom: inset 0 -0.5px 0 #e8e8e8; + --td-shadow-inset-left: inset -0.5px 0 0 #e8e8e8; + --td-table-shadow-color: rgba(34, 34, 34, 0.08); + --td-scrollbar-color: rgba(34, 34, 34, 0.12); + --td-scrollbar-hover-color: rgba(34, 34, 34, 0.3); + --td-scroll-track-color: #ffffff; +} + +/* Light red: the default DeerFlow theme. */ +:root { + --td-brand-color-1: #fefafa; + --td-brand-color-2: #fef6f6; + --td-brand-color-3: #feeded; + --td-brand-color-4: #fddadc; + --td-brand-color-5: #fcb5b9; + --td-brand-color-6: #f74750; + --td-brand-color-7: #f5222d; + --td-brand-color-8: #bc0d1e; + --td-brand-color-9: #a8071a; + --td-brand-color-10: #5c0011; + + --td-brand-color: #f5222d; + --td-brand-color-hover: #bc0d1e; + --td-brand-color-focus: #feeded; + --td-brand-color-active: #a8071a; + --td-brand-color-disabled: #fa9196; + --td-brand-color-light: #fef6f6; + --td-brand-color-light-hover: #feeded; + --td-text-color-brand: #f5222d; + --td-text-color-link: #0079fe; +} + +/* Light blue: selected by ThemeContext through data-theme="lightblue". */ +:root[data-theme="lightblue"] { + --td-brand-color-1: #f9fcff; + --td-brand-color-2: #f4f9ff; + --td-brand-color-3: #eaf4ff; + --td-brand-color-4: #d4e9ff; + --td-brand-color-5: #aad2ff; + --td-brand-color-6: #0079fe; + --td-brand-color-7: #0062d9; + --td-brand-color-8: #0056c6; + --td-brand-color-9: #004ab3; + --td-brand-color-10: #002466; + + --td-brand-color: #0062d9; + --td-brand-color-hover: #0079fe; + --td-brand-color-focus: #eaf4ff; + --td-brand-color-active: #0056c6; + --td-brand-color-disabled: #a6a6a6; + --td-brand-color-light: #eaf4ff; + --td-brand-color-light-hover: #d4e9ff; + --td-text-color-primary: #3d3d3d; + --td-text-color-secondary: #7f7f7f; + --td-text-color-brand: #0062d9; + --td-text-color-link: #0062d9; + --td-bg-color-container-hover: #f9fcff; + --td-bg-color-container-active: #eaf4ff; + --td-bg-color-secondarycontainer: #f9fcff; + --td-bg-color-secondarycontainer-hover: #f4f9ff; + --td-bg-color-secondarycontainer-active: #eaf4ff; +} + +/* Deep blue: selected by ThemeContext through .dark + theme-mode="dark". */ +:root.dark, +:root[theme-mode="dark"] { + --td-brand-color-1: #e6f4ff; + --td-brand-color-2: #bae0ff; + --td-brand-color-3: #91caff; + --td-brand-color-4: #69b1ff; + --td-brand-color-5: #4096ff; + --td-brand-color-6: #1677ff; + --td-brand-color-7: #0958d9; + --td-brand-color-8: #003eb3; + --td-brand-color-9: #002c8c; + --td-brand-color-10: #001d6c; + + --td-success-color-1: #e6fffb; + --td-success-color-2: #b5f5ec; + --td-success-color-3: #87e8de; + --td-success-color-4: #5cdbd3; + --td-success-color-5: #36cfc9; + --td-success-color-6: #13c2c2; + --td-success-color-7: #08979c; + --td-success-color-8: #006d75; + --td-success-color-9: #00474f; + --td-success-color-10: #002329; + + --td-error-color-1: #fff1f0; + --td-error-color-2: #ffccc7; + --td-error-color-3: #ffa39e; + --td-error-color-4: #ff7875; + --td-error-color-5: #ff4d4f; + --td-error-color-6: #f5222d; + --td-error-color-7: #cf1322; + --td-error-color-8: #a8071a; + --td-error-color-9: #820014; + --td-error-color-10: #5c0011; + + --td-brand-color: #1677ff; + --td-brand-color-hover: #0958d9; + --td-brand-color-focus: rgba(22, 119, 255, 0.24); + --td-brand-color-active: #003eb3; + --td-brand-color-disabled: rgba(22, 119, 255, 0.35); + --td-brand-color-light: rgba(22, 119, 255, 0.16); + --td-brand-color-light-hover: rgba(22, 119, 255, 0.24); + + --td-success-color: #52c41a; + --td-success-color-hover: #73d13d; + --td-success-color-focus: rgba(82, 196, 26, 0.24); + --td-success-color-active: #389e0d; + --td-success-color-disabled: rgba(82, 196, 26, 0.35); + --td-success-color-light: rgba(82, 196, 26, 0.16); + --td-success-color-light-hover: rgba(82, 196, 26, 0.24); + + --td-warning-color: #faad14; + --td-warning-color-hover: #ffc53d; + --td-warning-color-focus: rgba(250, 173, 20, 0.24); + --td-warning-color-active: #d48806; + --td-warning-color-disabled: rgba(250, 173, 20, 0.35); + --td-warning-color-light: rgba(250, 173, 20, 0.16); + --td-warning-color-light-hover: rgba(250, 173, 20, 0.24); + + --td-error-color: #f5222d; + --td-error-color-hover: #cf1322; + --td-error-color-focus: rgba(245, 34, 45, 0.24); + --td-error-color-active: #a8071a; + --td-error-color-disabled: rgba(245, 34, 45, 0.35); + --td-error-color-light: rgba(245, 34, 45, 0.16); + --td-error-color-light-hover: rgba(245, 34, 45, 0.24); + + --td-gray-color-1: #e8edf5; + --td-gray-color-2: #c5cfe0; + --td-gray-color-3: #9badc8; + --td-gray-color-4: #6e88b0; + --td-gray-color-5: #4a6491; + --td-gray-color-6: #3b5683; + --td-gray-color-7: #2d4473; + --td-gray-color-8: #243b68; + --td-gray-color-9: #1a2f5a; + --td-gray-color-10: #162952; + --td-gray-color-11: #122347; + --td-gray-color-12: #0f1d3e; + --td-gray-color-13: #0c1836; + --td-gray-color-14: #060e24; + + --td-font-white-1: #c5cfe0; + --td-font-white-2: #9badc8; + --td-font-white-3: #6e88b0; + --td-font-white-4: #4a6491; + + --td-mask-active: rgba(6, 14, 36, 0.6); + --td-mask-disabled: rgba(6, 14, 36, 0.72); + --td-mask-background: rgba(6, 14, 36, 0.96); + + --td-bg-color-page: #0c1836; + --td-bg-color-container: #1a2f5a; + --td-bg-color-container-hover: #243b68; + --td-bg-color-container-active: #2d4473; + --td-bg-color-container-select: #122347; + --td-bg-color-secondarycontainer: #122347; + --td-bg-color-secondarycontainer-hover: #1a2f5a; + --td-bg-color-secondarycontainer-active: #2d4473; + --td-bg-color-component: #122347; + --td-bg-color-component-hover: #1a2f5a; + --td-bg-color-component-active: #2d4473; + --td-bg-color-secondarycomponent: #1a2f5a; + --td-bg-color-secondarycomponent-hover: #2d4473; + --td-bg-color-secondarycomponent-active: #4a6491; + --td-bg-color-component-disabled: #122347; + --td-bg-color-specialcomponent: transparent; + + --td-text-color-primary: #c5cfe0; + --td-text-color-secondary: #6e88b0; + --td-text-color-placeholder: #6e88b0; + --td-text-color-disabled: #4a6491; + --td-text-color-anti: #ffffff; + --td-text-color-brand: #4096ff; + --td-text-color-link: #4096ff; + --td-text-color-watermark: rgba(197, 207, 224, 0.1); + + --td-border-level-1-color: #2d4473; + --td-component-stroke: #2d4473; + --td-border-level-2-color: #4a6491; + --td-component-border: #4a6491; + + /* + * Keep menus and selects crisp on the deep-blue canvas. A blue glow here + * makes every floating layer look like it has an oversized blurred border. + * The blue accent remains on focus/selected states; elevation uses the + * neutral navy shadow instead. + */ + --td-shadow-1: 0 1px 4px rgba(6, 14, 36, 0.22); + --td-shadow-2: 0 4px 12px rgba(6, 14, 36, 0.34); + --td-shadow-3: 0 10px 24px rgba(6, 14, 36, 0.48); + --td-shadow-inset-top: inset 0 0.5px 0 #2d4473; + --td-shadow-inset-right: inset 0.5px 0 0 #2d4473; + --td-shadow-inset-bottom: inset 0 -0.5px 0 #2d4473; + --td-shadow-inset-left: inset -0.5px 0 0 #2d4473; + --td-table-shadow-color: rgba(6, 14, 36, 0.55); + --td-scrollbar-color: rgba(197, 207, 224, 0.16); + --td-scrollbar-hover-color: rgba(197, 207, 224, 0.36); + --td-scroll-track-color: #122347; +}