fix(frontend): 提升 Markdown 表格与列表对比度

frontend/src/components/common/MarkdownContent.vue

@@ -23,12 +23,14 @@ watch(() => props.source, async (source) => {
 .markdown-content :deep(h1), .markdown-content :deep(h2), .markdown-content :deep(h3) { margin: 1em 0 .5em; line-height: var(--line-height-tight); }
 .markdown-content :deep(ul) { padding-left: 1.5em; list-style: disc; }
 .markdown-content :deep(ol) { padding-left: 1.5em; list-style: decimal; }
+.markdown-content :deep(li::marker) { color: var(--color-markdown-marker); font-weight: 700; }
 .markdown-content :deep(.shiki) { overflow: auto; padding: var(--space-md); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); }
 .markdown-content :deep(code) { padding: .1em .3em; border-radius: var(--radius-sm); background: var(--color-background-tertiary); font-family: var(--font-ui-mono); }
 .markdown-content :deep(pre code) { padding: 0; background: transparent; }
 .markdown-content :deep(blockquote) { padding-left: 1em; border-left: 3px solid var(--color-accent-primary); color: var(--color-text-secondary); }
 .markdown-content :deep(table) { width: 100%; margin: .65em 0; border-collapse: collapse; }
-.markdown-content :deep(th), .markdown-content :deep(td) { padding: .45em .65em; border: 1px solid var(--color-border-default); text-align: left; }
+.markdown-content :deep(th), .markdown-content :deep(td) { padding: .45em .65em; border: 1px solid var(--color-markdown-grid); text-align: left; }
+.markdown-content :deep(th) { background: var(--color-markdown-table-header); font-weight: 700; }
 .markdown-content :deep(img) { max-width: 100%; }
 .markdown-content :deep(hr) { margin: 1em 0; border: 0; border-top: 1px solid var(--color-border-default); }
 :global([data-theme='dark']) .markdown-content :deep(.shiki),

frontend/src/features/editor/VisualMarkdownEditor.vue

@@ -250,7 +250,7 @@ defineExpose({ getEditor: () => crepe?.editor })
   --crepe-color-surface-low: var(--color-background-secondary);
   --crepe-color-on-surface: var(--color-text-primary);
   --crepe-color-on-surface-variant: var(--color-text-secondary);
-  --crepe-color-outline: var(--color-border-default);
+  --crepe-color-outline: var(--color-markdown-grid);
   --crepe-color-primary: var(--color-accent-primary);
   --crepe-color-secondary: var(--color-accent-soft);
   --crepe-color-on-secondary: var(--color-text-primary);
@@ -272,10 +272,11 @@ defineExpose({ getEditor: () => crepe?.editor })
 :global(.milkdown-toolbar) { border: 1px solid var(--color-border-default) !important; background: var(--color-surface-elevated) !important; box-shadow: var(--shadow-md) !important; }
 :global(.milkdown-toolbar .toolbar-item svg), :global(.milkdown-toolbar .toolbar-item.active svg) { color: var(--color-text-primary) !important; fill: var(--color-text-primary) !important; opacity: 1 !important; }
 :global(.milkdown-toolbar .toolbar-item:hover svg), :global(.milkdown-toolbar .toolbar-item.active svg) { color: var(--color-accent-primary) !important; fill: var(--color-accent-primary) !important; }
-:global([data-theme='light']) .milkdown-host :deep(.milkdown-table-block th),
-:global([data-theme='light']) .milkdown-host :deep(.milkdown-table-block td) { border-color: var(--color-text-tertiary); }
-:global([data-theme='light']) .milkdown-host :deep(.milkdown-list-item-block li .label-wrapper) { color: var(--color-text-secondary); font-weight: 600; }
-:global([data-theme='light']) .milkdown-host :deep(.milkdown-list-item-block li .label-wrapper svg) { fill: var(--color-text-secondary); }
+.milkdown-host :deep(.milkdown-table-block th),
+.milkdown-host :deep(.milkdown-table-block td) { border-color: var(--color-markdown-grid); }
+.milkdown-host :deep(.milkdown-table-block th) { background: var(--color-markdown-table-header); font-weight: 700; }
+.milkdown-host :deep(.milkdown-list-item-block li .label-wrapper) { color: var(--color-markdown-marker); font-weight: 700; }
+.milkdown-host :deep(.milkdown-list-item-block li .label-wrapper svg) { fill: var(--color-markdown-marker); }
 .milkdown-host :deep(code) { font-family: var(--font-editor-mono); }
 :global([data-theme='dark']) .milkdown-host :deep(.milkdown) { color-scheme: dark; }
 @media (max-width: 680px) { .toolbar-select select { min-width: 46px; width: 46px; } }

frontend/src/styles/motion.spec.ts

@@ -8,6 +8,11 @@ const globalStyles = [
   new URL('./features.css', import.meta.url),
 ].map((path) => readFileSync(path, 'utf8')).join('\n')
 
+const markdownStyles = [
+  new URL('../features/editor/VisualMarkdownEditor.vue', import.meta.url),
+  new URL('../components/common/MarkdownContent.vue', import.meta.url),
+].map((path) => readFileSync(path, 'utf8')).join('\n')
+
 describe('轻量动效基线', () => {
   it('为减少动态效果偏好提供全局回退', () => {
     expect(globalStyles).toContain('@media (prefers-reduced-motion: reduce)')
@@ -24,4 +29,11 @@ describe('轻量动效基线', () => {
     expect(pageAnimation).toContain('transform')
     expect(pageAnimation).not.toMatch(/(?:width|height|margin|padding|top|left)\s*:/)
   })
+
+  it('Markdown 序号和表格使用独立的高对比度主题变量', () => {
+    expect(globalStyles).toContain('--color-markdown-grid:')
+    expect(globalStyles).toContain('--color-markdown-marker:')
+    expect(markdownStyles).toContain('var(--color-markdown-grid)')
+    expect(markdownStyles).toContain('var(--color-markdown-marker)')
+  })
 })

frontend/src/styles/tokens.css

@@ -44,6 +44,11 @@
   --color-border-focus: #5b67f1;
   --color-border-disabled: #eef0f3;
 
+  /* Markdown */
+  --color-markdown-grid: #8b949e;
+  --color-markdown-marker: #343b44;
+  --color-markdown-table-header: #eef0f3;
+
   /* Shadow */
   --shadow-sm: 0 1px 2px rgba(31, 35, 40, 0.05), 0 1px 5px rgba(31, 35, 40, 0.03);
   --shadow-md: 0 8px 22px rgba(31, 35, 40, 0.08), 0 2px 6px rgba(31, 35, 40, 0.04);
@@ -152,6 +157,10 @@
   --color-border-focus: #7d8bff;
   --color-border-disabled: #21262d;
 
+  --color-markdown-grid: #6e7681;
+  --color-markdown-marker: #c9d1d9;
+  --color-markdown-table-header: #21262d;
+
   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
   --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
   --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
@@ -172,6 +181,9 @@
   --color-text-tertiary: #9a8a72;
   --color-border-default: #ddcfad;
   --color-border-subtle: #eadfc4;
+  --color-markdown-grid: #9c8353;
+  --color-markdown-marker: #554735;
+  --color-markdown-table-header: #eadbb8;
   --color-accent-primary: #8a5b32;
   --color-accent-primary-hover: #704724;
   --color-accent-soft: #edddbd;