From 78d4adfff33a36ffb4dbf0b4cfc15bfd7c71bdc0 Mon Sep 17 00:00:00 2001 From: Cano1997 <1978141412@qq.com> Date: Thu, 3 Apr 2025 21:07:14 +0800 Subject: [PATCH] =?UTF-8?q?style:=20cherry=E6=8F=92=E4=BB=B6=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E8=B0=83=E6=95=B4=E5=88=B058=E7=89=88=E6=9C=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../markdown-message/markdown-message.scss | 11 ---- .../markdown-message/markdown-message.tsx | 6 ++ .../user-message/user-message.scss | 33 ++++------- .../user-message/user-message.tsx | 6 ++ .../chat-toolbar-item/chat-toolbar-item.scss | 57 ++++++++++--------- 5 files changed, 52 insertions(+), 61 deletions(-) diff --git a/src/components/chat-message-item/markdown-message/markdown-message.scss b/src/components/chat-message-item/markdown-message/markdown-message.scss index 43946f5..494790b 100644 --- a/src/components/chat-message-item/markdown-message/markdown-message.scss +++ b/src/components/chat-message-item/markdown-message/markdown-message.scss @@ -44,17 +44,6 @@ min-height: 100px; } } - - div[data-type="codeBlock"] { - position: relative !important; - display: flex; - padding-top: 24px; - - .cherry-edit-code-block,.cherry-copy-code-block { - position: absolute; - top: 0; - } - } } .anchor { diff --git a/src/components/chat-message-item/markdown-message/markdown-message.tsx b/src/components/chat-message-item/markdown-message/markdown-message.tsx index fe778bf..19407de 100644 --- a/src/components/chat-message-item/markdown-message/markdown-message.tsx +++ b/src/components/chat-message-item/markdown-message/markdown-message.tsx @@ -217,6 +217,12 @@ export const MarkdownMessage = (props: MarkdownMessageProps) => { editor: { defaultModel: 'previewOnly', }, + themeSettings: { + // 目前应用的主题 + mainTheme: 'dark', + // 目前应用的代码块主题 + codeBlockTheme: 'twilight', + }, }); }, []); diff --git a/src/components/chat-message-item/user-message/user-message.scss b/src/components/chat-message-item/user-message/user-message.scss index 80c64a2..5d488b7 100644 --- a/src/components/chat-message-item/user-message/user-message.scss +++ b/src/components/chat-message-item/user-message/user-message.scss @@ -21,10 +21,10 @@ color: var(--color-fg-default); word-wrap: break-word; background: #e7f8ff; - border-radius: #{getCssVar('ai-chat', 'border-radius')}; - text-size-adjust: 100%; background-color: getCssVar('ai-chat', 'background-color-light'); + border-radius: #{getCssVar('ai-chat', 'border-radius')}; border-radius: getCssVar('ai-chat', 'border-radius'); + text-size-adjust: 100%; &::before { display: table; @@ -39,14 +39,15 @@ } @include m('material') { - gap: 8px; display: flex; - align-items: center; flex-flow: row-reverse wrap; + gap: 8px; + align-items: center; margin-bottom: 8px; } + .cherry { - min-height: 0px; + min-height: 0; border-radius: #{getCssVar('ai-chat', 'border-radius')}; box-shadow: none; @@ -78,10 +79,10 @@ } .cherry-previewer { - padding: 0px; - border: 0; + padding: 0; color: getCssVar(ai-chat, color); background-color: getCssVar('ai-chat', 'background-color-light'); + border: 0; figure { max-width: 1200px; @@ -91,18 +92,6 @@ min-height: 100px; } } - - div[data-type='codeBlock'] { - position: relative !important; - display: flex; - padding-top: 24px; - - .cherry-edit-code-block, - .cherry-copy-code-block { - position: absolute; - top: 0; - } - } } .anchor { @@ -111,12 +100,12 @@ } @include e('user-header') { - width: 100%; - height: 32px; display: flex; - margin-bottom: 8px; align-items: center; justify-content: end; + width: 100%; + height: 32px; + margin-bottom: 8px; } @include e('user') { diff --git a/src/components/chat-message-item/user-message/user-message.tsx b/src/components/chat-message-item/user-message/user-message.tsx index 40edb1a..ec5a799 100644 --- a/src/components/chat-message-item/user-message/user-message.tsx +++ b/src/components/chat-message-item/user-message/user-message.tsx @@ -49,6 +49,12 @@ export const UserMessage = (props: UserMessageProps) => { editor: { defaultModel: 'previewOnly', }, + themeSettings: { + // 目前应用的主题 + mainTheme: 'dark', + // 目前应用的代码块主题 + codeBlockTheme: 'twilight', + }, }); }, [materialResult.value.remainingText]); diff --git a/src/components/chat-toolbar/chat-toolbar-item/chat-toolbar-item.scss b/src/components/chat-toolbar/chat-toolbar-item/chat-toolbar-item.scss index 01fd918..f2009f0 100644 --- a/src/components/chat-toolbar/chat-toolbar-item/chat-toolbar-item.scss +++ b/src/components/chat-toolbar/chat-toolbar-item/chat-toolbar-item.scss @@ -1,9 +1,9 @@ @include b(chat-toolbar-item) { - display: flex; - cursor: pointer; position: relative; + display: flex; align-items: center; white-space: nowrap; + cursor: pointer; @include e(content) { display: flex; @@ -11,13 +11,13 @@ white-space: nowrap; @include m(icon) { - width: 18px; - height: 18px; - font-size: 18px; display: flex; flex-shrink: 0; align-items: center; justify-content: center; + width: 18px; + height: 18px; + font-size: 18px; } @include m(label) { @@ -37,17 +37,17 @@ } @include b(chat-toolbar-item-default) { - font-size: 14px; width: fit-content; + font-size: 14px; color: #{getCssVar('ai-chat', 'color-2')}; .#{bem(chat-toolbar-item, content)} { + z-index: 9; gap: 6px; - line-height: 28px; padding: 2px 14px; - border-radius: 12px; - + line-height: 28px; background-color: #{getCssVar('ai-chat', 'background-color-2')}; + border-radius: 12px; } @include when(disabled) { @@ -75,28 +75,29 @@ } .#{bem(chat-toolbar-item, more)} { + z-index: 9; height: 32px; padding: 2px 14px 2px 8px; - border-radius: 0 12px 12px 0; - border-left: 1px solid #{getCssVar('ai-chat', 'border-color')}; background-color: #{getCssVar('ai-chat', 'background-color-2')}; + border-left: 1px solid #{getCssVar('ai-chat', 'border-color')}; + border-radius: 0 12px 12px 0; } } @include b(chat-toolbar-item-circle) { + max-width: 32px; height: 32px; padding: 6px; - max-width: 32px; overflow: hidden; font-size: 12px; white-space: nowrap; + border: 1px solid #{getCssVar('ai-chat', 'border-color')}; border-radius: 15px; transition: max-width 0.8s ease; - border: 1px solid #{getCssVar('ai-chat', 'border-color')}; @include when(disabled) { - cursor: not-allowed; color: #{getCssVar('ai-chat', 'disabled-color')}; + cursor: not-allowed; } &:hover:not(.is-disabled) { @@ -106,32 +107,32 @@ } .#{bem(chat-toolbar-item, content, label)} { - font-size: 14px; - margin-left: 8px; width: calc(100% - 32px); + margin-left: 8px; + font-size: 14px; } } @include b(chat-toolbar-item-dropdown) { + position: absolute; right: 0; - gap: 4px; bottom: 36px; - padding: 4px; display: flex; - max-width: 150px; - border-radius: 6px; - position: absolute; flex-direction: column; + gap: 4px; + max-width: 150px; + padding: 4px; background-color: #{getCssVar('ai-chat', 'background-color-2')}; + border-radius: 6px; @include e(item) { - gap: 6px; display: flex; + gap: 6px; + align-items: center; padding: 0 8px; - cursor: pointer; line-height: 32px; + cursor: pointer; border-radius: 6px; - align-items: center; @include when(disabled) { cursor: not-allowed; @@ -143,20 +144,20 @@ } @include m(icon) { - width: 18px; - height: 18px; - font-size: 18px; display: flex; flex-shrink: 0; align-items: center; justify-content: center; + width: 18px; + height: 18px; + font-size: 18px; } @include m(label) { flex-grow: 1; overflow: hidden; - white-space: nowrap; text-overflow: ellipsis; + white-space: nowrap; } } } -- Gitee