@huyooo/ai-chat-frontend-react 0.2.12 → 0.2.14

package/src/components/message/parts/TextPart.css

@@ -1,10 +1,579 @@
-/* 导入 Markdown 渲染样式 */
-@import '@huyooo/ai-chat-shared/styles';
+/* ============================================
+   Vercel + GitHub 混合风格 Markdown 主题
+   ============================================ */
 
 .text-part {
+  max-width: 100%;
+}
+
+/* 文本块基础样式 */
+.text-block {
   font-size: 14px;
-  line-height: 1.7;
-  color: var(--chat-text, #ccc);
+  line-height: 1.75;
+  color: var(--chat-text, #e5e7eb);
   word-break: break-word;
-  overflow-wrap: break-word;
+  letter-spacing: 0.01em;
+}
+
+/* 段落 */
+.text-block p {
+  margin: 0.75em 0;
+}
+
+.text-block p:first-child {
+  margin-top: 0;
+}
+
+.text-block p:last-child {
+  margin-bottom: 0;
+}
+
+/* 标题 - GitHub 风格层级 + Vercel 现代感 */
+.text-block h1 {
+  font-size: 1.5em;
+  font-weight: 700;
+  margin: 1.5em 0 0.75em;
+  padding-bottom: 0.4em;
+  border-bottom: 1px solid var(--chat-border, rgba(255, 255, 255, 0.1));
+  color: var(--chat-text-strong, #fff);
+  letter-spacing: -0.02em;
+}
+
+.text-block h2 {
+  font-size: 1.3em;
+  font-weight: 600;
+  margin: 1.25em 0 0.6em;
+  padding-bottom: 0.3em;
+  border-bottom: 1px solid var(--chat-border, rgba(255, 255, 255, 0.08));
+  color: var(--chat-text-strong, #fff);
+  letter-spacing: -0.01em;
+}
+
+.text-block h3 {
+  font-size: 1.15em;
+  font-weight: 600;
+  margin: 1em 0 0.5em;
+  color: var(--chat-text-strong, #fff);
+}
+
+.text-block h4,
+.text-block h5,
+.text-block h6 {
+  font-size: 1em;
+  font-weight: 600;
+  margin: 0.8em 0 0.4em;
+  color: var(--chat-text, #e5e7eb);
+}
+
+.text-block h1:first-child,
+.text-block h2:first-child,
+.text-block h3:first-child {
+  margin-top: 0;
+}
+
+/* 列表 */
+.text-block ul,
+.text-block ol {
+  margin: 0.75em 0;
+  padding-left: 1.5em;
+}
+
+.text-block li {
+  margin: 0.4em 0;
+  line-height: 1.6;
+}
+
+.text-block li::marker {
+  color: var(--chat-text-muted, #9ca3af);
+}
+
+/* 嵌套列表 */
+.text-block li ul,
+.text-block li ol {
+  margin: 0.25em 0;
+}
+
+/* 任务列表 */
+.text-block .markdown-task-item {
+  list-style: none;
+  margin-left: -1.5em;
+  padding-left: 0;
+}
+
+.text-block .markdown-task-checkbox {
+  display: inline-block;
+  width: 1.2em;
+  margin-right: 0.4em;
+  font-family: "Monaco", "Menlo", monospace;
+  font-size: 0.85em;
+  color: var(--chat-accent, #60a5fa);
+}
+
+/* 链接 - Vercel 风格下划线动画 */
+.text-block a {
+  color: var(--chat-accent, #60a5fa);
+  text-decoration: none;
+  background-image: linear-gradient(var(--chat-accent, #60a5fa), var(--chat-accent, #60a5fa));
+  background-size: 0% 1px;
+  background-position: 0 100%;
+  background-repeat: no-repeat;
+  transition: background-size 0.25s ease-out;
+}
+
+.text-block a:hover {
+  background-size: 100% 1px;
+}
+
+/* 粗体和斜体 */
+.text-block strong {
+  font-weight: 600;
+  color: var(--chat-text-strong, #fff);
+}
+
+.text-block em {
+  font-style: italic;
+  color: var(--chat-text, #e5e7eb);
+}
+
+/* 删除线 */
+.text-block s,
+.text-block del {
+  text-decoration: line-through;
+  color: var(--chat-text-muted, #9ca3af);
+}
+
+/* 行内代码 - 突出显示 */
+.text-block code {
+  font-family: "JetBrains Mono", "Fira Code", "Monaco", "Menlo", "Consolas", monospace;
+  font-size: 0.875em;
+  background: var(--chat-inline-code-bg, rgba(110, 118, 129, 0.25));
+  padding: 0.2em 0.45em;
+  border-radius: 6px;
+  color: var(--chat-inline-code-text, #f472b6);
+  font-weight: 500;
+}
+
+/* 引用块 - VitePress 风格 */
+.text-block blockquote {
+  margin: 1em 0;
+  padding: 0.75em 1em;
+  border-left: 4px solid var(--chat-accent, #60a5fa);
+  background: var(--chat-blockquote-bg, rgba(96, 165, 250, 0.08));
+  border-radius: 0 8px 8px 0;
+  color: var(--chat-text-muted, #d1d5db);
+}
+
+.text-block blockquote p {
+  margin: 0.25em 0;
+}
+
+.text-block blockquote p:first-child {
+  margin-top: 0;
+}
+
+.text-block blockquote p:last-child {
+  margin-bottom: 0;
+}
+
+/* 分隔线 - 渐变效果 */
+.text-block hr {
+  border: none;
+  height: 1px;
+  margin: 1.5em 0;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    var(--chat-border, rgba(255, 255, 255, 0.15)) 20%,
+    var(--chat-border, rgba(255, 255, 255, 0.15)) 80%,
+    transparent
+  );
+}
+
+/* 表格 - GitHub 风格 + 现代感 */
+.text-block .markdown-table-wrapper {
+  margin: 1em 0;
+  overflow-x: auto;
+  border-radius: 8px;
+  border: 1px solid var(--chat-border, rgba(255, 255, 255, 0.1));
+  scrollbar-gutter: stable;
+}
+
+.text-block .markdown-table {
+  min-width: 100%;
+  width: max-content;
+  border-collapse: collapse;
+  font-size: 0.9em;
+}
+
+.text-block .markdown-table th {
+  background: var(--chat-table-header-bg, rgba(255, 255, 255, 0.06));
+  font-weight: 600;
+  text-align: left;
+  padding: 0.75em 1em;
+  border-bottom: 1px solid var(--chat-border, rgba(255, 255, 255, 0.1));
+  color: var(--chat-text-strong, #fff);
+}
+
+.text-block .markdown-table td {
+  padding: 0.65em 1em;
+  border-bottom: 1px solid var(--chat-border, rgba(255, 255, 255, 0.06));
+}
+
+.text-block .markdown-table tr:last-child td {
+  border-bottom: none;
+}
+
+.text-block .markdown-table tbody tr:hover {
+  background: var(--chat-table-row-hover-bg, rgba(255, 255, 255, 0.05));
+}
+
+/* 图片 */
+.text-block img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
+  margin: 0.75em 0;
+}
+
+/* ============================================
+   代码块样式 - 简洁边框风格
+   ============================================ */
+
+.code-block-wrapper {
+  margin: 1em 0;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid var(--chat-border, rgba(255, 255, 255, 0.15));
+  background: transparent;
+}
+
+.code-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 14px;
+  border-bottom: 1px solid var(--chat-border, rgba(255, 255, 255, 0.08));
+}
+
+.code-language {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--chat-text-muted, #8b949e);
+  text-transform: lowercase;
+  letter-spacing: 0.03em;
+}
+
+/* 按钮组容器 */
+.code-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+/* 统一的操作按钮样式 */
+.code-action-btn {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 8px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--chat-text-muted, #8b949e);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 5px;
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+  line-height: 1;
+  transition: all 0.15s ease;
+}
+
+.code-action-btn:hover {
+  color: var(--chat-text, #e5e7eb);
+  background: var(--chat-hover-bg, rgba(255, 255, 255, 0.08));
+  border-color: var(--chat-border, rgba(255, 255, 255, 0.1));
+}
+
+.code-action-btn:active {
+  transform: scale(0.97);
+}
+
+.code-action-btn svg {
+  flex-shrink: 0;
+  width: 14px;
+  height: 14px;
+}
+
+.code-block {
+  margin: 0;
+  padding: 14px 18px;
+  overflow-x: auto;
+  font-family: "JetBrains Mono", "Fira Code", "Monaco", "Menlo", "Consolas", monospace;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--chat-code-text, #e6edf3);
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  -webkit-font-smoothing: antialiased;
+}
+
+.code-block code {
+  display: block;
+  white-space: pre;
+  tab-size: 2;
+}
+
+/* 代码块滚动条 */
+.code-block::-webkit-scrollbar {
+  height: 6px;
+}
+
+.code-block::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.code-block::-webkit-scrollbar-thumb {
+  background: var(--chat-scrollbar, rgba(255, 255, 255, 0.2));
+  border-radius: 3px;
+}
+
+.code-block::-webkit-scrollbar-thumb:hover {
+  background: var(--chat-scrollbar-hover, rgba(255, 255, 255, 0.3));
+}
+
+/* ============================================
+   代码高亮主题 - 跟随主题变化
+   使用 CSS 变量，支持浅色/深色主题
+   ============================================ */
+
+/* 关键字: if, const, function, return, import, export 等 */
+.code-block .hljs-keyword,
+.code-block .hljs-selector-tag {
+  color: var(--chat-hljs-keyword, #ff7b72);
+}
+
+/* 内置: console, document, window, Array, Object 等 */
+.code-block .hljs-built_in {
+  color: var(--chat-hljs-built-in, #ffa657);
+}
+
+/* 类型: string, number, boolean, interface, type 等 */
+.code-block .hljs-type,
+.code-block .hljs-class {
+  color: var(--chat-hljs-type, #ffa657);
+}
+
+/* 函数名 */
+.code-block .hljs-title,
+.code-block .hljs-title.function_,
+.code-block .hljs-function {
+  color: var(--chat-hljs-function, #d2a8ff);
+}
+
+/* 字符串 */
+.code-block .hljs-string,
+.code-block .hljs-template-variable {
+  color: var(--chat-hljs-string, #a5d6ff);
+}
+
+/* 数字 */
+.code-block .hljs-number {
+  color: var(--chat-hljs-number, #79c0ff);
+}
+
+/* 布尔值、null、undefined */
+.code-block .hljs-literal,
+.code-block .hljs-null {
+  color: var(--chat-hljs-literal, #79c0ff);
+}
+
+/* 注释 */
+.code-block .hljs-comment,
+.code-block .hljs-quote {
+  color: var(--chat-hljs-comment, #8b949e);
+  font-style: italic;
+}
+
+/* 变量 */
+.code-block .hljs-variable,
+.code-block .hljs-template-tag {
+  color: var(--chat-hljs-variable, #ffa657);
+}
+
+/* 属性 */
+.code-block .hljs-attr,
+.code-block .hljs-attribute {
+  color: var(--chat-hljs-attr, #79c0ff);
+}
+
+/* 对象属性名 */
+.code-block .hljs-property {
+  color: var(--chat-hljs-property, #7ee787);
+}
+
+/* 操作符 */
+.code-block .hljs-operator {
+  color: var(--chat-hljs-operator, #ff7b72);
+}
+
+/* 标点符号 */
+.code-block .hljs-punctuation {
+  color: var(--chat-hljs-punctuation, #e6edf3);
+}
+
+/* 参数 */
+.code-block .hljs-params {
+  color: var(--chat-hljs-params, #e6edf3);
+}
+
+/* 正则表达式 */
+.code-block .hljs-regexp {
+  color: var(--chat-hljs-regexp, #7ee787);
+}
+
+/* 选择器 (CSS) */
+.code-block .hljs-selector-class,
+.code-block .hljs-selector-id {
+  color: var(--chat-hljs-selector, #7ee787);
+}
+
+/* 标签 (HTML/XML) */
+.code-block .hljs-tag {
+  color: var(--chat-hljs-tag, #7ee787);
+}
+
+.code-block .hljs-name {
+  color: var(--chat-hljs-name, #7ee787);
+}
+
+/* 删除 (diff) */
+.code-block .hljs-deletion {
+  color: var(--chat-hljs-deletion, #ffa198);
+  background: var(--chat-hljs-deletion-bg, rgba(248, 81, 73, 0.15));
+}
+
+/* 添加 (diff) */
+.code-block .hljs-addition {
+  color: var(--chat-hljs-addition, #7ee787);
+  background: var(--chat-hljs-addition-bg, rgba(46, 160, 67, 0.15));
+}
+
+/* meta 信息 */
+.code-block .hljs-meta {
+  color: var(--chat-hljs-meta, #8b949e);
+}
+
+/* 链接 */
+.code-block .hljs-link {
+  color: var(--chat-hljs-link, #a5d6ff);
+  text-decoration: underline;
+}
+
+/* 符号 */
+.code-block .hljs-symbol {
+  color: var(--chat-hljs-symbol, #79c0ff);
+}
+
+/* 子字符串 (模板字符串中的 ${}) */
+.code-block .hljs-subst {
+  color: var(--chat-hljs-subst, #e6edf3);
+}
+
+/* section (markdown 标题等) */
+.code-block .hljs-section {
+  color: var(--chat-hljs-section, #79c0ff);
+  font-weight: bold;
+}
+
+/* bullet (markdown 列表) */
+.code-block .hljs-bullet {
+  color: var(--chat-hljs-bullet, #ffa657);
+}
+
+/* emphasis */
+.code-block .hljs-emphasis {
+  font-style: italic;
+}
+
+/* strong */
+.code-block .hljs-strong {
+  font-weight: bold;
+}
+
+/* ============================================
+   LaTeX 数学公式样式
+   ============================================ */
+
+/* 块级公式 */
+.text-block .latex-block {
+  display: block;
+  margin: 1em 0;
+  padding: 0.75em 1em;
+  overflow-x: auto;
+  background: var(--chat-latex-bg, rgba(255, 255, 255, 0.02));
+  border-radius: 8px;
+  border: 1px solid var(--chat-border, rgba(255, 255, 255, 0.08));
+}
+
+.text-block .latex-block .katex-display {
+  margin: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  text-align: left;
+}
+
+.text-block .latex-block .katex {
+  text-align: left;
+}
+
+/* 行内公式 */
+.text-block .latex-inline {
+  display: inline;
+  padding: 0 0.15em;
+}
+
+/* 公式错误提示 */
+.text-block .latex-error {
+  color: var(--chat-error, #ef4444);
+  background: rgba(239, 68, 68, 0.1);
+  padding: 0.2em 0.4em;
+  border-radius: 4px;
+  font-family: monospace;
+  font-size: 0.9em;
+}
+
+/* KaTeX 样式覆盖 - 适配暗色主题 */
+.text-block .katex {
+  font-size: 1.1em;
+  color: var(--chat-text, #e5e7eb);
+}
+
+/* KaTeX 分数线颜色 */
+.text-block .katex .frac-line {
+  background: var(--chat-text, #e5e7eb);
+}
+
+/* KaTeX 根号 */
+.text-block .katex .sqrt > .sqrt-sign {
+  color: var(--chat-text, #e5e7eb);
+}
+
+/* 滚动条样式 */
+.text-block .latex-block::-webkit-scrollbar {
+  height: 6px;
+}
+
+.text-block .latex-block::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.text-block .latex-block::-webkit-scrollbar-thumb {
+  background: var(--chat-scrollbar, rgba(255, 255, 255, 0.2));
+  border-radius: 3px;
+}
+
+.text-block .latex-block::-webkit-scrollbar-thumb:hover {
+  background: var(--chat-scrollbar-hover, rgba(255, 255, 255, 0.3));
 }