diff --git a/dashboard/src/views/ChatPage.vue b/dashboard/src/views/ChatPage.vue index 0dae041b2..89262b0d8 100644 --- a/dashboard/src/views/ChatPage.vue +++ b/dashboard/src/views/ChatPage.vue @@ -236,58 +236,7 @@ {{ t('core.common.save') }} - - - - - mdi-information-outline - {{ tm('connection.title') }} - - - mdi-close - - - - -
- {{ tm('connection.message') }} -
- - -
- {{ tm('connection.reasons') }} -
-
    -
  • {{ tm('connection.reasonWindowResize') }}
  • -
  • {{ tm('connection.reasonMultipleTabs') }}
  • -
  • {{ tm('connection.reasonNetworkIssue') }}
  • -
-
- - -
- {{ tm('connection.notice') }} -
-
-
- - - - - {{ tm('connection.understand') }} - - -
- - - - - {{ connectionStatusColor === 'success' ? 'mdi-check-circle' : - connectionStatusColor === 'warning' ? 'mdi-alert-circle' : 'mdi-information' }} - - {{ connectionStatusMessage }} - @@ -1631,6 +1638,7 @@ export default { border-radius: 6px; overflow-x: auto; margin: 12px 0; + position: relative; } .markdown-content code { @@ -1642,6 +1650,144 @@ export default { color: var(--v-theme-code); } +/* 代码块中的code标签样式 */ +.markdown-content pre code { + background-color: transparent; + padding: 0; + border-radius: 0; + font-family: 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace; + font-size: 0.85em; + color: inherit; + display: block; + overflow-x: auto; + line-height: 1.5; +} + +/* 自定义代码高亮样式 */ +.markdown-content pre { + border: 1px solid var(--v-theme-border); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); +} + +/* 确保highlight.js的样式正确应用 */ +.markdown-content pre code.hljs { + background: transparent !important; + color: inherit; +} + +/* 亮色主题下的代码高亮 */ +.v-theme--light .markdown-content pre { + background-color: #f6f8fa; +} + +/* 暗色主题下的代码块样式 */ +.v-theme--dark .markdown-content pre { + background-color: #0d1117 !important; + border-color: rgba(255, 255, 255, 0.1); +} + +.v-theme--dark .markdown-content pre code { + color: #e6edf3 !important; +} + +/* 暗色主题下的highlight.js样式覆盖 */ +.v-theme--dark .hljs { + background: #0d1117 !important; + color: #e6edf3 !important; +} + +.v-theme--dark .hljs-keyword, +.v-theme--dark .hljs-selector-tag, +.v-theme--dark .hljs-built_in, +.v-theme--dark .hljs-name, +.v-theme--dark .hljs-tag { + color: #ff7b72 !important; +} + +.v-theme--dark .hljs-string, +.v-theme--dark .hljs-title, +.v-theme--dark .hljs-section, +.v-theme--dark .hljs-attribute, +.v-theme--dark .hljs-literal, +.v-theme--dark .hljs-template-tag, +.v-theme--dark .hljs-template-variable, +.v-theme--dark .hljs-type, +.v-theme--dark .hljs-addition { + color: #a5d6ff !important; +} + +.v-theme--dark .hljs-comment, +.v-theme--dark .hljs-quote, +.v-theme--dark .hljs-deletion, +.v-theme--dark .hljs-meta { + color: #8b949e !important; +} + +.v-theme--dark .hljs-number, +.v-theme--dark .hljs-regexp, +.v-theme--dark .hljs-symbol, +.v-theme--dark .hljs-variable, +.v-theme--dark .hljs-template-variable, +.v-theme--dark .hljs-link, +.v-theme--dark .hljs-selector-attr, +.v-theme--dark .hljs-selector-pseudo { + color: #79c0ff !important; +} + +.v-theme--dark .hljs-function, +.v-theme--dark .hljs-class, +.v-theme--dark .hljs-title.class_ { + color: #d2a8ff !important; +} + +/* 复制按钮样式 */ +.copy-code-btn { + position: absolute; + top: 8px; + right: 8px; + background: rgba(255, 255, 255, 0.9); + border: 1px solid rgba(0, 0, 0, 0.1); + border-radius: 4px; + padding: 6px; + cursor: pointer; + opacity: 0; + transition: all 0.2s ease; + display: flex; + align-items: center; + justify-content: center; + color: #666; + font-size: 12px; + z-index: 10; + backdrop-filter: blur(4px); +} + +.copy-code-btn:hover { + background: rgba(255, 255, 255, 1); + color: #333; + transform: scale(1.05); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); +} + +.copy-code-btn:active { + transform: scale(0.95); +} + +.markdown-content pre:hover .copy-code-btn { + opacity: 1; +} + +.v-theme--dark .copy-code-btn { + background: rgba(45, 45, 45, 0.9); + border-color: rgba(255, 255, 255, 0.15); + color: #ccc; +} + +.v-theme--dark .copy-code-btn:hover { + background: rgba(45, 45, 45, 1); + color: #fff; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); +} + .markdown-content img { max-width: 100%; border-radius: 8px;