From d24053cbe539dfc00a3f1db4bae891b2f65bd8c0 Mon Sep 17 00:00:00 2001 From: SonyLeo <746591437@qq.com> Date: Thu, 21 May 2026 01:12:49 -0700 Subject: [PATCH 1/4] fix(styles): update colors and borders for dark mode compatibility in anchor component --- docs/demos/anchor/basic-source.vue | 11 +++++----- docs/demos/anchor/demo-shell.css | 6 +++--- .../src/styles/components/anchor.less | 8 -------- packages/components/src/styles/variables.css | 20 +++++++++++++++++++ 4 files changed, 29 insertions(+), 16 deletions(-) diff --git a/docs/demos/anchor/basic-source.vue b/docs/demos/anchor/basic-source.vue index 1ec6c8c96..8cf791ef3 100644 --- a/docs/demos/anchor/basic-source.vue +++ b/docs/demos/anchor/basic-source.vue @@ -100,7 +100,7 @@ const items = sections.map((section) => ({ .tip { margin: 0; - color: #4f647a; + color: var(--tr-text-secondary); line-height: 1.5; } @@ -110,13 +110,14 @@ const items = sections.map((section) => ({ height: 100%; overflow: auto; padding: 24px 28px; + color: #191919; } .article-section { padding: 20px 24px; - border: 1px solid #eef3f8; + border: 1px solid var(--vp-c-divider); border-radius: 12px; - background: #fff; + color: var(--tr-text-secondary); scroll-margin-top: 16px; } @@ -130,14 +131,14 @@ const items = sections.map((section) => ({ background-color: #b9d7ff; } 45% { - background-color: #fff; + background-color: var(--vp-c-bg); } 65%, 85% { background-color: #b9d7ff; } 100% { - background-color: #fff; + background-color: var(--vp-c-bg); } } diff --git a/docs/demos/anchor/demo-shell.css b/docs/demos/anchor/demo-shell.css index d958192f8..84eed0202 100644 --- a/docs/demos/anchor/demo-shell.css +++ b/docs/demos/anchor/demo-shell.css @@ -8,7 +8,7 @@ align-items: center; flex-wrap: wrap; gap: var(--anchor-demo-controls-gap, 12px 16px); - color: var(--anchor-demo-controls-color, #4f647a); + color: var(--tr-text-secondary); font-size: 13px; } @@ -28,7 +28,7 @@ position: relative; height: var(--anchor-demo-stage-height, 420px); overflow: hidden; - border: 1px solid var(--anchor-demo-stage-border, #dfe7f2); + border: 1px solid var(--vp-c-divider); border-radius: 12px; - background: var(--anchor-demo-stage-bg, #fff); + background: var(--tr-container-bg-default); } diff --git a/packages/components/src/styles/components/anchor.less b/packages/components/src/styles/components/anchor.less index 4d77b0d34..b713c14dd 100644 --- a/packages/components/src/styles/components/anchor.less +++ b/packages/components/src/styles/components/anchor.less @@ -10,21 +10,13 @@ marker-height: 4px; marker-radius: 64px; marker-track-size: 8px; - bg: var(--tr-container-bg-default); - border: color-mix(in srgb, var(--tr-border-color-default) 32%, transparent); - shadow: var(--tr-shadow-sm); - item-color: var(--tr-text-secondary); item-color-active: var(--tr-color-primary); item-bg-hover: var(--tr-container-bg-hover); item-label-font-size: var(--tr-font-size-sm); item-label-font-weight: var(--tr-font-weight-regular); item-label-line-height: 24px; item-label-letter-spacing: 0px; - marker-color: color-mix(in srgb, var(--tr-text-tertiary) 50%, transparent); marker-color-active: var(--tr-color-primary); - tooltip-bg: var(--tr-container-bg-default); - tooltip-color: var(--tr-text-primary); - tooltip-shadow: var(--tr-shadow-sm); search-bg: var(--tr-container-bg-default); search-color: var(--tr-text-primary); search-border: color-mix(in srgb, var(--tr-border-color-default) 42%, transparent); diff --git a/packages/components/src/styles/variables.css b/packages/components/src/styles/variables.css index 5e1b83b15..7f23bc935 100644 --- a/packages/components/src/styles/variables.css +++ b/packages/components/src/styles/variables.css @@ -109,6 +109,16 @@ --tr-container-bg-active: rgba(0, 0, 0, 0.15); --tr-container-bg-disabled: rgba(0, 0, 0, 0.04); + /* ===== Anchor ===== */ + --tr-anchor-bg: #ffffff; + --tr-anchor-border: transparent; + --tr-anchor-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); + --tr-anchor-item-color: var(--tr-text-primary); + --tr-anchor-marker-color: var(--tr-text-disabled); + --tr-anchor-tooltip-bg: #ffffff; + --tr-anchor-tooltip-color: var(--tr-text-primary); + --tr-anchor-tooltip-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); + /* ===== MCP Server Picker ===== */ --tr-mcp-server-picker-bg-default: #ffffff; --tr-mcp-server-picker-bg-default-2: #ffffff; @@ -234,6 +244,16 @@ --tr-container-bg-active: rgba(255, 255, 255, 0.15); --tr-container-bg-disabled: rgba(255, 255, 255, 0.06); + /* ===== Anchor ===== */ + --tr-anchor-bg: #333333; + --tr-anchor-border: transparent; + --tr-anchor-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); + --tr-anchor-item-color: var(--tr-text-primary); + --tr-anchor-marker-color: var(--tr-text-secondary); + --tr-anchor-tooltip-bg: #484848; + --tr-anchor-tooltip-color: var(--tr-text-primary); + --tr-anchor-tooltip-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); + /* ===== 阴影系统 ===== */ --tr-shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.48); --tr-shadow-md: 0 4px 12px 0 rgba(0, 0, 0, 0.02); From 5554d14de19e54f3e395b480dc750ff75439b0d4 Mon Sep 17 00:00:00 2001 From: SonyLeo <746591437@qq.com> Date: Thu, 21 May 2026 01:13:53 -0700 Subject: [PATCH 2/4] fix(styles): update borders and colors for dark mode compatibility in drag overlay demos --- docs/demos/drag-overlay/basic.vue | 20 +++++++++----------- docs/demos/drag-overlay/custom-overlay.vue | 6 +++--- docs/demos/drag-overlay/disabled.vue | 6 +++--- 3 files changed, 15 insertions(+), 17 deletions(-) diff --git a/docs/demos/drag-overlay/basic.vue b/docs/demos/drag-overlay/basic.vue index 62a6b9c7a..b30bb7848 100644 --- a/docs/demos/drag-overlay/basic.vue +++ b/docs/demos/drag-overlay/basic.vue @@ -134,7 +134,7 @@ function handleFilesRejected(rejection: FileRejection) { .demo-section { margin-bottom: 10px; padding: 20px; - border: 1px solid #e0e0e0; + border: 1px solid var(--vp-c-divider); border-radius: 8px; } @@ -152,19 +152,18 @@ function handleFilesRejected(rejection: FileRejection) { .demo-section h3 { margin-top: 0; - color: #333; + color: var(--vp-c-text-1); } .demo-section p { - color: #666; + color: var(--vp-c-text-1); margin-bottom: 16px; } /* 聊天容器样式 */ .chat-container { - border: 1px solid #ddd; + border: 1px solid var(--vp-c-divider); border-radius: 8px; - background: white; min-height: 300px; display: flex; flex-direction: column; @@ -174,8 +173,7 @@ function handleFilesRejected(rejection: FileRejection) { .chat-header { padding: 12px 16px; - background: #f8f9fa; - border-bottom: 1px solid #e9ecef; + border: 1px solid var(--vp-c-divider); display: flex; justify-content: space-between; align-items: center; @@ -183,7 +181,7 @@ function handleFilesRejected(rejection: FileRejection) { .chat-header h4 { margin: 0; - color: #333; + color: var(--vp-c-text-1); } .drag-indicator { @@ -213,8 +211,8 @@ function handleFilesRejected(rejection: FileRejection) { } .message-content { - background: #f1f3f4; padding: 8px 12px; + background-color: var(--tr-bubble-box-bg); border-radius: 18px; display: inline-block; max-width: 70%; @@ -222,7 +220,7 @@ function handleFilesRejected(rejection: FileRejection) { .chat-input { padding: 12px 16px; - border-top: 1px solid #e9ecef; + border: 1px solid var(--vp-c-divider); display: flex; gap: 8px; } @@ -230,7 +228,7 @@ function handleFilesRejected(rejection: FileRejection) { .chat-input input { flex: 1; padding: 8px 12px; - border: 1px solid #ddd; + border: 1px solid var(--vp-c-divider); border-radius: 20px; outline: none; } diff --git a/docs/demos/drag-overlay/custom-overlay.vue b/docs/demos/drag-overlay/custom-overlay.vue index 29bd424d4..5a4a591e6 100644 --- a/docs/demos/drag-overlay/custom-overlay.vue +++ b/docs/demos/drag-overlay/custom-overlay.vue @@ -70,7 +70,7 @@ function handleImageError(rejection: FileRejection) { .demo-section { margin-bottom: 40px; padding: 20px; - border: 1px solid #e0e0e0; + border: 1px solid var(--vp-c-divider); border-radius: 8px; } @@ -86,7 +86,7 @@ function handleImageError(rejection: FileRejection) { /* 图片上传区域样式 */ .image-upload-area { - border: 2px dashed #ddd; + border: 2px dashed var(--vp-c-divider); border-radius: 8px; min-height: 200px; display: flex; @@ -140,7 +140,7 @@ function handleImageError(rejection: FileRejection) { text-align: center; color: white; padding: 20px; - border: 2px dashed white; + border: 2px dashed var(--vp-c-divider); border-radius: 8px; } diff --git a/docs/demos/drag-overlay/disabled.vue b/docs/demos/drag-overlay/disabled.vue index 83b1e5176..b493c3800 100644 --- a/docs/demos/drag-overlay/disabled.vue +++ b/docs/demos/drag-overlay/disabled.vue @@ -23,7 +23,7 @@ import { vDropzone } from '@opentiny/tiny-robot' .demo-section { margin-bottom: 40px; padding: 20px; - border: 1px solid #e0e0e0; + border: 1px solid var(--vp-c-divider); border-radius: 8px; } @@ -39,13 +39,13 @@ import { vDropzone } from '@opentiny/tiny-robot' /* 禁用状态样式 */ .disabled-area { - border: 2px solid #ccc; + border: 2px solid var(--vp-c-divider); border-radius: 8px; min-height: 120px; display: flex; align-items: center; justify-content: center; - background: #f8f9fa; + background: var(--vp-c-bg); } .disabled-area.disabled { From b25cb4ce41fd769f1a74f11372bca7556e971cab Mon Sep 17 00:00:00 2001 From: SonyLeo <746591437@qq.com> Date: Thu, 21 May 2026 02:33:57 -0700 Subject: [PATCH 3/4] fix(styles): remove hardcoded color for improved dark mode compatibility in anchor demo --- docs/demos/anchor/basic-source.vue | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/demos/anchor/basic-source.vue b/docs/demos/anchor/basic-source.vue index 8cf791ef3..823360c34 100644 --- a/docs/demos/anchor/basic-source.vue +++ b/docs/demos/anchor/basic-source.vue @@ -110,7 +110,6 @@ const items = sections.map((section) => ({ height: 100%; overflow: auto; padding: 24px 28px; - color: #191919; } .article-section { From 5d67ae2111969c8a37bf5aece0165009abd70959 Mon Sep 17 00:00:00 2001 From: SonyLeo <746591437@qq.com> Date: Fri, 22 May 2026 02:17:25 -0700 Subject: [PATCH 4/4] fix: review suggestion --- docs/demos/anchor/basic-source.vue | 9 +++++++-- docs/demos/anchor/controlled-search.vue | 17 ++++++++++++----- 2 files changed, 19 insertions(+), 7 deletions(-) diff --git a/docs/demos/anchor/basic-source.vue b/docs/demos/anchor/basic-source.vue index 823360c34..82600b2c9 100644 --- a/docs/demos/anchor/basic-source.vue +++ b/docs/demos/anchor/basic-source.vue @@ -105,6 +105,7 @@ const items = sections.map((section) => ({ } .article { + --anchor-section-active-bg: #b9d7ff; display: grid; gap: 16px; height: 100%; @@ -112,6 +113,10 @@ const items = sections.map((section) => ({ padding: 24px 28px; } +:global([data-tr-color-mode='dark'] .article) { + --anchor-section-active-bg: color-mix(in srgb, #317af7 40%, var(--vp-c-bg)); +} + .article-section { padding: 20px 24px; border: 1px solid var(--vp-c-divider); @@ -127,14 +132,14 @@ const items = sections.map((section) => ({ @keyframes section-active { 0%, 25% { - background-color: #b9d7ff; + background-color: var(--anchor-section-active-bg); } 45% { background-color: var(--vp-c-bg); } 65%, 85% { - background-color: #b9d7ff; + background-color: var(--anchor-section-active-bg); } 100% { background-color: var(--vp-c-bg); diff --git a/docs/demos/anchor/controlled-search.vue b/docs/demos/anchor/controlled-search.vue index d6c1a170f..a23fd77e2 100644 --- a/docs/demos/anchor/controlled-search.vue +++ b/docs/demos/anchor/controlled-search.vue @@ -136,12 +136,19 @@ const boxAttributes: BubbleBoxAttributesConfig = (groupedMessages) => { } .conversation-list { + --anchor-bubble-bg: var(--tr-color-primary-light); + --anchor-bubble-active-bg: #b9d7ff; --tr-bubble-list-gap: 16px; --tr-bubble-list-padding: 24px 72px 40px; --tr-bubble-max-width: 560px; height: 100%; } +:global([data-tr-color-mode='dark'] .conversation-list) { + --anchor-bubble-bg: color-mix(in srgb, #317af7 30%, var(--tr-container-bg-default)); + --anchor-bubble-active-bg: color-mix(in srgb, #317af7 40%, var(--tr-container-bg-default)); +} + .nav.is-right { right: 16px; } @@ -151,7 +158,7 @@ const boxAttributes: BubbleBoxAttributesConfig = (groupedMessages) => { } :deep(.user-bubble-target) { - --tr-bubble-box-bg: var(--tr-color-primary-light); + --tr-bubble-box-bg: var(--anchor-bubble-bg); scroll-margin-top: 20px; } @@ -162,17 +169,17 @@ const boxAttributes: BubbleBoxAttributesConfig = (groupedMessages) => { @keyframes user-bubble-active-flash { 0%, 25% { - background-color: #b9d7ff; + background-color: var(--anchor-bubble-active-bg); } 45% { - background-color: var(--tr-color-primary-light); + background-color: var(--anchor-bubble-bg); } 65%, 85% { - background-color: #b9d7ff; + background-color: var(--anchor-bubble-active-bg); } 100% { - background-color: var(--tr-color-primary-light); + background-color: var(--anchor-bubble-bg); } }