v4.3.0

2025-11-16 13:43:43 +08:00 · 2025-05-31 02:28:46 +08:00
parent 0f7adc5c65
commit 86e2eecc1f
1808 changed files with 183083 additions and 86701 deletions
--- a/chat/src/styles/base.css
+++ b/chat/src/styles/base.css
@@ -0,0 +1,10 @@
+/* Tailwind base reset 之外，自定义全局字体/排版 */
+html {
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'SF Pro SC',
+    'PingFang SC',
+    sans-serif;
+}
--- a/chat/src/styles/github-markdown.less
+++ b/chat/src/styles/github-markdown.less
--- a/chat/src/styles/global.less
+++ b/chat/src/styles/global.less
@@ -0,0 +1,255 @@
+/* 引入 Tailwind CSS 的基础、组件和工具类 */
+// @import 'tailwindcss/base';
+// @import 'tailwindcss/components';
+// @import 'tailwindcss/utilities';
+
+html {
+  height: 100%;
+}
+
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  background-color: #fff;
+  font-family:
+    system-ui,
+    -apple-system,
+    'Segoe UI',
+    Roboto,
+    Ubuntu,
+    Cantarell,
+    'Noto Sans',
+    sans-serif,
+    'Helvetica Neue',
+    Arial,
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol',
+    'Noto Color Emoji';
+  // padding-bottom: constant(safe-area-inset-bottom);
+  // padding-bottom: env(safe-area-inset-bottom);
+  @apply text-gray-950 dark:text-gray-100 !important;
+}
+
+:root.dark body {
+  background-color: #212121;
+}
+
+#app {
+  height: 100%;
+  overflow: hidden;
+}
+
+// div {
+//   @apply text-gray-950 dark:text-gray-100;
+// }
+
+// 全局焦点样式
+* :focus {
+  outline: none;
+}
+
+/* 自定义滚动条样式 */
+.custom-scrollbar {
+  /* 现代浏览器：确保滚动条不占据宽度 */
+  scrollbar-gutter: stable both-edges;
+
+  /* Firefox 支持 */
+  scrollbar-width: thin;
+  scrollbar-color: rgba(209, 213, 219, 0.8) transparent;
+
+  /* 确保滚动条为overlay模式（不占据宽度） */
+  overflow: overlay; /* 虽然已废弃，但仍有浏览器支持 */
+}
+
+/* 当overflow: overlay不被支持时的回退 */
+@supports not (overflow: overlay) {
+  .custom-scrollbar {
+    overflow: auto;
+    /* 通过padding-right为可能出现的滚动条预留空间，然后用负margin抵消 */
+    padding-right: 8px;
+    margin-right: -8px;
+  }
+}
+
+/* Webkit内核浏览器的滚动条自定义 */
+.custom-scrollbar::-webkit-scrollbar {
+  width: 6px;
+  background-color: transparent;
+  /* 强制滚动条为overlay模式 */
+  position: absolute;
+}
+
+/* 隐藏横向滚动条 */
+.custom-scrollbar::-webkit-scrollbar:horizontal {
+  height: 0;
+  display: none;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background-color: rgba(209, 213, 219, 0.8);
+  border-radius: 6px;
+  transition: background-color 0.2s ease;
+  /* 确保滚动条thumb不会增加宽度 */
+  border: 1px solid transparent;
+  background-clip: content-box;
+}
+
+/* 滚动条悬停效果 */
+.custom-scrollbar:hover::-webkit-scrollbar {
+  width: 8px; /* 悬停时加宽 */
+}
+
+.custom-scrollbar:hover::-webkit-scrollbar-thumb {
+  background-color: rgba(156, 163, 175, 0.9); /* 悬停时颜色加深 */
+}
+
+/* 深色模式滚动条 */
+.dark .custom-scrollbar {
+  scrollbar-gutter: stable both-edges;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(75, 85, 99, 0.8) transparent;
+}
+
+.dark .custom-scrollbar::-webkit-scrollbar-thumb {
+  background-color: rgba(75, 85, 99, 0.8);
+}
+
+.dark .custom-scrollbar:hover::-webkit-scrollbar-thumb {
+  background-color: rgba(107, 114, 128, 0.9);
+}
+
+/* 额外的兼容性处理：针对不同浏览器引擎 */
+
+/* Chrome 和基于 Chromium 的浏览器 */
+@supports (-webkit-appearance: none) {
+  .custom-scrollbar {
+    overflow: auto;
+  }
+
+  .custom-scrollbar::-webkit-scrollbar {
+    /* 使用 overlay 样式 */
+    width: 6px;
+    height: 6px;
+  }
+}
+
+/* Firefox 特殊处理 */
+@-moz-document url-prefix() {
+  .custom-scrollbar {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(209, 213, 219, 0.8) transparent;
+    /* Firefox 的滚动条通常不占据宽度 */
+    overflow: auto;
+  }
+}
+
+/* 
+ * 终极方案：完全overlay滚动条
+ * 如果上面的方案仍有问题，可以使用这个类名：.overlay-scrollbar
+ * 这将完全隐藏原生滚动条并确保不占据任何宽度
+ */
+.overlay-scrollbar {
+  overflow: hidden;
+  position: relative;
+}
+
+.overlay-scrollbar:hover {
+  overflow: auto;
+}
+
+/* 完全隐藏滚动条但保持滚动功能 */
+.overlay-scrollbar::-webkit-scrollbar {
+  width: 0px;
+  background: transparent;
+}
+
+.overlay-scrollbar::-webkit-scrollbar-thumb {
+  background: transparent;
+}
+
+/* 当鼠标悬停时显示滚动条 */
+.overlay-scrollbar:hover::-webkit-scrollbar {
+  width: 6px;
+  background: transparent;
+}
+
+.overlay-scrollbar:hover::-webkit-scrollbar-thumb {
+  background-color: rgba(209, 213, 219, 0.8);
+  border-radius: 6px;
+}
+
+/* Firefox 的overlay滚动条 */
+.overlay-scrollbar {
+  scrollbar-width: none; /* 完全隐藏 */
+}
+
+.overlay-scrollbar:hover {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(209, 213, 219, 0.8) transparent;
+}
+
+/* 深色模式的overlay滚动条 */
+.dark .overlay-scrollbar:hover::-webkit-scrollbar-thumb {
+  background-color: rgba(75, 85, 99, 0.8);
+}
+
+.dark .overlay-scrollbar:hover {
+  scrollbar-color: rgba(75, 85, 99, 0.8) transparent;
+}
+
+/* 加载动画样式 */
+.loading-animation {
+  display: inline-block;
+  position: relative;
+  width: 60px;
+  height: 20px;
+}
+
+.loading-animation:before,
+.loading-animation:after,
+.loading-animation span {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: #6366f1;
+  animation: dotBounce 1.4s infinite ease-in-out;
+}
+
+.loading-animation:before {
+  left: 0;
+  animation-delay: 0s;
+}
+
+.loading-animation span {
+  left: 26px;
+  animation-delay: 0.2s;
+}
+
+.loading-animation:after {
+  left: 52px;
+  animation-delay: 0.4s;
+}
+
+@keyframes dotBounce {
+  0%,
+  80%,
+  100% {
+    transform: translateY(-50%) scale(0.6);
+    opacity: 0.6;
+  }
+  40% {
+    transform: translateY(-50%) scale(1);
+    opacity: 1;
+  }
+}
--- a/chat/src/styles/highlight.less
+++ b/chat/src/styles/highlight.less
@@ -0,0 +1,125 @@
+/*!
+  Theme: GitHub Dark
+  Description: Dark theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-dark
+  Current colors taken from GitHub's CSS
+*/
+
+.hljs {
+  color: #c9d1d9;
+  background: #0d1117;
+}
+
+.hljs-doctag,
+.hljs-keyword,
+.hljs-meta .hljs-keyword,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable.language_ {
+  /* prettylights-syntax-keyword */
+  color: #ff7b72;
+}
+
+.hljs-title,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-title.function_ {
+  /* prettylights-syntax-entity */
+  color: #d2a8ff;
+}
+
+.hljs-attr,
+.hljs-attribute,
+.hljs-literal,
+.hljs-meta,
+.hljs-number,
+.hljs-operator,
+.hljs-variable,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-id {
+  /* prettylights-syntax-constant */
+  color: #79c0ff;
+}
+
+.hljs-regexp,
+.hljs-string,
+.hljs-meta .hljs-string {
+  /* prettylights-syntax-string */
+  color: #a5d6ff;
+}
+
+.hljs-built_in,
+.hljs-symbol {
+  /* prettylights-syntax-variable */
+  color: #ffa657;
+}
+
+.hljs-comment,
+.hljs-code,
+.hljs-formula {
+  /* prettylights-syntax-comment */
+  color: #8b949e;
+}
+
+.hljs-name,
+.hljs-quote,
+.hljs-selector-tag,
+.hljs-selector-pseudo {
+  /* prettylights-syntax-entity-tag */
+  color: #7ee787;
+}
+
+.hljs-subst {
+  /* prettylights-syntax-storage-modifier-import */
+  color: #c9d1d9;
+}
+
+.hljs-section {
+  /* prettylights-syntax-markup-heading */
+  color: #1f6feb;
+  font-weight: bold;
+}
+
+.hljs-bullet {
+  /* prettylights-syntax-markup-list */
+  color: #f2cc60;
+}
+
+.hljs-emphasis {
+  /* prettylights-syntax-markup-italic */
+  color: #c9d1d9;
+  font-style: italic;
+}
+
+.hljs-strong {
+  /* prettylights-syntax-markup-bold */
+  color: #c9d1d9;
+  font-weight: bold;
+}
+
+.hljs-addition {
+  /* prettylights-syntax-markup-inserted */
+  color: #aff5b4;
+  background-color: #033a16;
+}
+
+.hljs-deletion {
+  /* prettylights-syntax-markup-deleted */
+  color: #ffdcd7;
+  background-color: #67060c;
+}
+
+.hljs-char.escape_,
+.hljs-link,
+.hljs-params,
+.hljs-property,
+.hljs-punctuation,
+.hljs-tag {
+  /* purposely ignored */
+}
--- a/chat/src/styles/index.css
+++ b/chat/src/styles/index.css
@@ -0,0 +1,7 @@
+@import './base.css';
+@import './themes/light.css';
+@import './themes/dark.css';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
--- a/chat/src/styles/tailwind.css
+++ b/chat/src/styles/tailwind.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
--- a/chat/src/styles/themes/dark.css
+++ b/chat/src/styles/themes/dark.css
@@ -0,0 +1,42 @@
+:root[data-theme='dark'] {
+  /* ────────── Button Color ────────── */
+  --btn-bg-primary: #818cf8;
+  --btn-bg-primary-hover: #6366f1;
+  --btn-bg-primary-active: #4f46e5;
+  --btn-text-primary: #ffffff;
+  --btn-border-primary: transparent;
+
+  --btn-bg-secondary: #2f2f2f;
+  --btn-bg-secondary-hover: #424242;
+  --btn-bg-secondary-active: #676767;
+  --btn-text-secondary: #cdcdcd;
+  --btn-border-secondary: #424242;
+  --btn-border-secondary-hover: #676767;
+  --btn-border-secondary-active: #9b9b9b;
+
+  --btn-bg-ghost: transparent;
+  --btn-bg-ghost-hover: rgba(255, 255, 255, 0.08);
+  --btn-bg-ghost-active: rgba(255, 255, 255, 0.12);
+  --btn-text-ghost: #cdcdcd;
+
+  --btn-bg-danger: #f87171;
+  --btn-bg-danger-hover: #ef4444;
+  --btn-bg-danger-active: #dc2626;
+  --btn-text-danger: #ffffff;
+
+  /* ────────── Input Color ────────── */
+  --input-border: #424242;
+  --input-border-hover: #676767;
+  --input-border-focus: #818cf8;
+  --input-border-error: #f87171;
+  --input-bg: #2f2f2f;
+  --input-text: #cdcdcd;
+  --input-placeholder: #9b9b9b;
+
+  /* ────────── Tab Component ────────── */
+  --tab-group-bg-dark: #212121;
+  --tab-group-bg-filled-dark: #334155;
+  --tab-text-dark: #9ca3af;
+  --tab-active-bg-dark: #424242;
+  --tab-active-text-dark: #f3f4f6;
+}
--- a/chat/src/styles/themes/light.css
+++ b/chat/src/styles/themes/light.css
@@ -0,0 +1,51 @@
+:root,
+:root[data-theme='light'] {
+  /* ────────── Button Color ────────── */
+  --btn-bg-primary: #4f46e5;
+  --btn-bg-primary-hover: #6366f1;
+  --btn-bg-primary-active: #4338ca;
+  --btn-text-primary: #ffffff;
+  --btn-border-primary: transparent;
+  --btn-border-primary-hover: transparent;
+  --btn-border-primary-active: transparent;
+
+  --btn-bg-secondary: #ffffff;
+  --btn-bg-secondary-hover: #f9f9f9;
+  --btn-bg-secondary-active: #ececec;
+  --btn-text-secondary: #424242;
+  --btn-border-secondary: #e3e3e3;
+  --btn-border-secondary-hover: #cdcdcd;
+  --btn-border-secondary-active: #b4b4b4;
+
+  --btn-bg-ghost: transparent;
+  --btn-bg-ghost-hover: rgba(0, 0, 0, 0.04);
+  --btn-bg-ghost-active: rgba(0, 0, 0, 0.08);
+  --btn-text-ghost: #424242;
+  --btn-border-ghost: transparent;
+
+  --btn-bg-danger: #ef4444;
+  --btn-bg-danger-hover: #dc2626;
+  --btn-bg-danger-active: #b91c1c;
+  --btn-text-danger: #ffffff;
+  --btn-border-danger: transparent;
+
+  /* ────────── Button Size ────────── */
+  --btn-border-width: 1px; /* Secondary 用描边，Primary 可自行覆盖为 0 */
+
+  /* ────────── Input Color ────────── */
+  --input-border: #e3e3e3;
+  --input-border-hover: #cdcdcd;
+  --input-border-focus: #4f46e5;
+  --input-border-error: #ef4444;
+  --input-bg: #ffffff;
+  --input-text: #424242;
+  --input-placeholder: #9b9b9b;
+
+  /* ────────── Tab Component ────────── */
+  --tab-group-bg: #ececec;
+  --tab-group-bg-filled: #e2e8f0;
+  --tab-text: #424242;
+  --tab-active-bg: #ffffff;
+  --tab-active-text: #4f46e5;
+  --tab-active-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}