feat(editor): add themed callouts and desktop command boundary

2026-09-06 11:33:19 +08:00
parent fcc319d5e1
commit 415efc4444
26 changed files with 759 additions and 13 deletions
@@ -6,5 +6,6 @@
 - `/tests/visual/index.html?case=dialog`：检查满视口遮罩、背景无法滚动、内部长内容可滚动、Tab 焦点限定、Escape 关闭与再次打开。
 - `/tests/visual/index.html?case=editor`：逐字输入行内代码；先输入两个反引号、向左移再填字；连续普通/软换行；输入法提交；选区替换；撤销/重做。编辑器单元测试另覆盖 Markdown 序列化往返。
 - `/tests/visual/mermaid-matrix.html`：真实 Mermaid（无渲染 mock）的 6 图型 × 6 主题矩阵。顶部报告检查结果；加 `?theme=paper-moments` 可查看单主题外观。
+- `/tests/visual/callouts.html?theme=paper-moments`：工作区与静态预览的警告框类型、嵌套和折叠对照；可切换上述六个主题，不读写用户笔记。

 运行自动回归：`pnpm test`。AppDialog 测试覆盖滚动锁引用计数、恢复焦点、禁止隐式关闭；主题预览矩阵覆盖六主题的实际共享 CSS、控件状态和 CSP/无脚本隔离。自动结构检查不代替浏览器截图、布局和对比度检查。
@@ -0,0 +1,21 @@
+<!doctype html><html><head><meta charset="utf-8"><title>警告框渲染验收</title></head>
+<body><div id="app"></div><script type="module">
+import { createApp, h } from 'vue';
+import { createPinia } from 'pinia';
+import Editor from '/src/features/editor/VisualMarkdownEditor.vue';
+import MarkdownContent from '/src/components/common/MarkdownContent.vue';
+import { calloutTypes } from '/src/utils/callouts.ts';
+import { getCommunityThemePreviewCss } from '/src/services/themePackageService.ts';
+import '/src/styles/tokens.css';
+import '/src/styles/features.css';
+const theme = new URLSearchParams(location.search).get('theme') || 'light';
+document.documentElement.dataset.theme = theme;
+const style = document.createElement('style');
+style.textContent = getCommunityThemePreviewCss(theme) || '';
+document.head.append(style);
+const source = Object.keys(calloutTypes).map(type => `> [!${type.toUpperCase()}] ${type} 提示\n> 正文 **粗体** 与 \`code\`\n>\n> - 列表项`).join('\n\n') + '\n\n> [!WARNING]- 折叠提示\n>\n> > [!TIP]+ 嵌套提示\n> > 点击展开后可见';
+createApp({ render: () => h('main', {style:'max-width:1200px;margin:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px'}, [
+  h('section', [h('h1', '工作区'), h(Editor, {initialContent:source})]),
+  h('section', [h('h1', '静态预览'), h(MarkdownContent, {source})]),
+]) }).use(createPinia()).mount('#app');
+</script></body></html>