Compare commits
5
Commits
dffafce8b9
...
6c14047899
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
6c14047899 | ||
|
|
780e24a399 | ||
|
|
e29cc427e4 | ||
|
|
174e723545 | ||
|
|
f0fe8f2629 |
@@ -127,16 +127,30 @@ class DocxExporter:
|
||||
self._render_inline(p, node.children, warnings)
|
||||
|
||||
def _block_blockquote(self, node: DocumentNode, warnings: list[str]) -> None:
|
||||
# 引用块的直接子节点是块级节点(paragraph/list 等),不能交给行内渲染器,
|
||||
# 否则正文会被当作「无法表示的行内节点」丢弃;逐个渲染并继承引用缩进/颜色。
|
||||
for child in node.children:
|
||||
if child.type == "paragraph":
|
||||
p = self._doc.add_paragraph()
|
||||
self._render_inline(p, node.children, warnings)
|
||||
self._render_inline(p, child.children, warnings)
|
||||
p.paragraph_format.left_indent = Pt(16)
|
||||
for run in p.runs:
|
||||
run.font.color.rgb = RGBColor(0x57, 0x60, 0x6A)
|
||||
elif child.type == "list":
|
||||
self._block_list(child, warnings, level=1, color=RGBColor(0x57, 0x60, 0x6A))
|
||||
else:
|
||||
self._render_block(child, warnings)
|
||||
|
||||
def _block_list(self, node: DocumentNode, warnings: list[str], level: int = 0) -> None:
|
||||
def _block_list(
|
||||
self,
|
||||
node: DocumentNode,
|
||||
warnings: list[str],
|
||||
level: int = 0,
|
||||
color: RGBColor | None = None,
|
||||
) -> None:
|
||||
ordered = bool(node.attributes.get("ordered"))
|
||||
for index, item in enumerate(node.children, start=1):
|
||||
self._block_list_item(item, warnings, ordered, index, level)
|
||||
self._block_list_item(item, warnings, ordered, index, level, color)
|
||||
|
||||
def _block_list_item(
|
||||
self,
|
||||
@@ -145,6 +159,7 @@ class DocxExporter:
|
||||
ordered: bool,
|
||||
index: int,
|
||||
level: int,
|
||||
color: RGBColor | None = None,
|
||||
) -> None:
|
||||
if item.attributes.get("task"):
|
||||
marker = "☑ " if item.attributes.get("checked") else "☐ "
|
||||
@@ -154,26 +169,22 @@ class DocxExporter:
|
||||
first = True
|
||||
for child in item.children:
|
||||
if child.type == "list":
|
||||
self._block_list(child, warnings, level + 1)
|
||||
self._block_list(child, warnings, level + 1, color)
|
||||
continue
|
||||
if child.type == "paragraph":
|
||||
p = self._doc.add_paragraph()
|
||||
p.paragraph_format.left_indent = indent
|
||||
if first:
|
||||
self._add_run(p, marker)
|
||||
first = False
|
||||
self._render_inline(p, child.children, warnings)
|
||||
elif child.children:
|
||||
# 直接行内子节点:拼进一个段落
|
||||
p = self._doc.add_paragraph()
|
||||
p.paragraph_format.left_indent = indent
|
||||
if first:
|
||||
self._add_run(p, marker)
|
||||
first = False
|
||||
if child.children:
|
||||
# 段落或行内容器(strong/link 等):渲染其行内子节点
|
||||
self._render_inline(p, child.children, warnings)
|
||||
else:
|
||||
self._render_block(child, warnings)
|
||||
first = False
|
||||
# 直接行内叶子节点(text 等):拼进段落,不能交给块级渲染器(会丢弃正文)
|
||||
self._add_run(p, child.text or "")
|
||||
if color is not None:
|
||||
for run in p.runs:
|
||||
run.font.color.rgb = color
|
||||
|
||||
def _block_table(self, node: DocumentNode, warnings: list[str]) -> None:
|
||||
rows = node.children
|
||||
|
||||
@@ -46,6 +46,8 @@ _PAGE_SIZES = {"a4": A4, "letter": letter}
|
||||
|
||||
# 标题字号随层级递减;标题不依赖粗体(CID 无粗体字重),靠字号拉开层级
|
||||
_HEADING_SIZES = {1: 20, 2: 16, 3: 14, 4: 12, 5: 11, 6: 10.5}
|
||||
# 引用块文字颜色,与 HtmlExporter 的引用灰一致
|
||||
_QUOTE_COLOR = "#57606a"
|
||||
|
||||
|
||||
def _make_styles() -> dict[str, ParagraphStyle]:
|
||||
@@ -171,12 +173,29 @@ class PdfExporter:
|
||||
story.append(Paragraph(self._render_inline(node.children, warnings), self._styles["body"]))
|
||||
|
||||
def _block_blockquote(self, node: DocumentNode, story: list, warnings: list[str]) -> None:
|
||||
story.append(Paragraph(self._render_inline(node.children, warnings), self._styles["quote"]))
|
||||
# 引用块的直接子节点是块级节点(paragraph/list 等),不能交给行内渲染器,
|
||||
# 否则正文会被当作「无法表示的行内节点」丢弃;逐个渲染并继承引用缩进/颜色。
|
||||
for child in node.children:
|
||||
if child.type == "paragraph":
|
||||
story.append(
|
||||
Paragraph(self._render_inline(child.children, warnings), self._styles["quote"])
|
||||
)
|
||||
elif child.type == "list":
|
||||
self._block_list(child, story, warnings, indent=14, color=_QUOTE_COLOR)
|
||||
else:
|
||||
self._render_block(child, story, warnings)
|
||||
|
||||
def _block_list(self, node: DocumentNode, story: list, warnings: list[str], indent: int = 14) -> None:
|
||||
def _block_list(
|
||||
self,
|
||||
node: DocumentNode,
|
||||
story: list,
|
||||
warnings: list[str],
|
||||
indent: int = 14,
|
||||
color: str | None = None,
|
||||
) -> None:
|
||||
ordered = bool(node.attributes.get("ordered"))
|
||||
for index, item in enumerate(node.children, start=1):
|
||||
self._block_list_item(item, story, warnings, ordered, index, indent)
|
||||
self._block_list_item(item, story, warnings, ordered, index, indent, color)
|
||||
|
||||
def _block_list_item(
|
||||
self,
|
||||
@@ -186,23 +205,28 @@ class PdfExporter:
|
||||
ordered: bool,
|
||||
index: int,
|
||||
indent: int,
|
||||
color: str | None = None,
|
||||
) -> None:
|
||||
if item.attributes.get("task"):
|
||||
marker = "☑ " if item.attributes.get("checked") else "☐ "
|
||||
else:
|
||||
marker = f"{index}. " if ordered else "• "
|
||||
style = ParagraphStyle(
|
||||
f"pdf-li-{indent}",
|
||||
style_kwargs: dict = dict(
|
||||
parent=self._styles["body"],
|
||||
leftIndent=indent,
|
||||
firstLineIndent=-7,
|
||||
spaceAfter=2,
|
||||
)
|
||||
# 列表项内容通常是单个段落或直接行内节点,嵌套列表单独递归加深缩进
|
||||
if color:
|
||||
style_kwargs["textColor"] = color
|
||||
style = ParagraphStyle(f"pdf-li-{indent}-{color or 'normal'}", **style_kwargs)
|
||||
# 先收集父级正文、后处理嵌套列表:保证「父级文字在前、子列表在后」的阅读顺序,
|
||||
# 而不是在循环里遇到嵌套列表就立刻递归输出(那会把子列表排到父级前面)。
|
||||
parts: list[str] = []
|
||||
nested: list[DocumentNode] = []
|
||||
for child in item.children:
|
||||
if child.type == "list":
|
||||
self._block_list(child, story, warnings, indent + 14)
|
||||
nested.append(child)
|
||||
elif child.type == "paragraph":
|
||||
parts.append(self._render_inline(child.children, warnings))
|
||||
elif child.children:
|
||||
@@ -210,6 +234,8 @@ class PdfExporter:
|
||||
else:
|
||||
parts.append(_html.escape(child.text))
|
||||
story.append(Paragraph(marker + "<br/>".join(parts), style))
|
||||
for child_list in nested:
|
||||
self._block_list(child_list, story, warnings, indent + 14, color)
|
||||
|
||||
def _block_table(self, node: DocumentNode, story: list, warnings: list[str]) -> None:
|
||||
rows = node.children
|
||||
|
||||
@@ -212,6 +212,32 @@ async def create_export(request: ExportRequest) -> ExportJob:
|
||||
return job
|
||||
|
||||
|
||||
async def _acquire_render_slot(cancel_event: asyncio.Event) -> bool:
|
||||
"""等待渲染槽位,同时响应取消:拿到槽位返回 True,被取消返回 False。
|
||||
|
||||
等待期间任务保持 queued;取消即时生效,不必等前面的渲染完成。
|
||||
"""
|
||||
while True:
|
||||
if cancel_event.is_set():
|
||||
return False
|
||||
acquire = asyncio.create_task(_render_slots.acquire())
|
||||
cancel_wait = asyncio.create_task(cancel_event.wait())
|
||||
done, pending = await asyncio.wait(
|
||||
(acquire, cancel_wait), return_when=asyncio.FIRST_COMPLETED
|
||||
)
|
||||
if acquire in done:
|
||||
# 拿到槽位;收掉仍在等待取消标志的任务(不释放刚拿到的槽位)
|
||||
for task in pending:
|
||||
task.cancel()
|
||||
await asyncio.gather(*pending, return_exceptions=True)
|
||||
return True
|
||||
# 取消先到:取消尚未完成的 acquire(Semaphore.acquire 取消不会递减计数)
|
||||
acquire.cancel()
|
||||
cancel_wait.cancel()
|
||||
await asyncio.gather(acquire, cancel_wait, return_exceptions=True)
|
||||
return False
|
||||
|
||||
|
||||
async def _execute(
|
||||
job_id: str,
|
||||
format: ExportFormat,
|
||||
@@ -220,8 +246,17 @@ async def _execute(
|
||||
metadata: dict | None,
|
||||
options: ExportOptions,
|
||||
) -> None:
|
||||
"""后台渲染:解析 → 导出 → 写文件 → 挂载产物元信息。"""
|
||||
"""后台渲染:排队 → 解析 → 导出 → 写文件 → 挂载产物元信息。"""
|
||||
cancel_event = _cancel_flags[job_id]
|
||||
acquired = False
|
||||
try:
|
||||
# 并发渲染限额:解析/渲染是 CPU 密集的同步工作,用信号量限制同时执行的任务数。
|
||||
# 等待槽位期间保持 queued 并同时监听取消,取消即时生效,不必等前面的渲染完成。
|
||||
if not await _acquire_render_slot(cancel_event):
|
||||
raise ExportCancelled()
|
||||
acquired = True
|
||||
|
||||
# 拿到槽位后才进入 running
|
||||
_jobs[job_id] = _jobs[job_id].model_copy(
|
||||
update={
|
||||
"status": ExportStatus.running,
|
||||
@@ -229,10 +264,6 @@ async def _execute(
|
||||
"progress": ExportProgress(phase="rendering", current=0, total=1, percent=0.0),
|
||||
}
|
||||
)
|
||||
try:
|
||||
# 并发渲染限额:解析/渲染是 CPU 密集的同步工作,用信号量限制同时执行的任务数,
|
||||
# 超出限额的任务在此排队等待,避免大量任务同时占满工作线程与内存
|
||||
async with _render_slots:
|
||||
# 让出一次,使「创建后立即取消」的 queued 任务能及时进入 cancelled
|
||||
await asyncio.sleep(0)
|
||||
if cancel_event.is_set():
|
||||
@@ -302,6 +333,8 @@ async def _execute(
|
||||
}
|
||||
)
|
||||
finally:
|
||||
if acquired:
|
||||
_render_slots.release()
|
||||
_cancel_flags.pop(job_id, None)
|
||||
|
||||
|
||||
|
||||
@@ -8,6 +8,9 @@
|
||||
from __future__ import annotations
|
||||
|
||||
import asyncio
|
||||
import base64
|
||||
import re
|
||||
import zlib
|
||||
from datetime import datetime, timedelta, timezone
|
||||
|
||||
import pytest
|
||||
@@ -60,10 +63,15 @@ $$
|
||||
|
||||
@pytest.fixture(autouse=True)
|
||||
def _reset_export_state():
|
||||
"""清空内存注册表,避免跨用例的任务/取消标志互相污染。"""
|
||||
"""清空内存注册表,避免跨用例的任务/取消标志互相污染。
|
||||
|
||||
每个用例经 `asyncio.run()` 使用独立事件循环,模块级 Semaphore 会绑定到首个
|
||||
循环,跨用例复用会触发「bound to a different event loop」;此处每例重建槽位。
|
||||
"""
|
||||
export_service._jobs.clear()
|
||||
export_service._tasks.clear()
|
||||
export_service._cancel_flags.clear()
|
||||
export_service._render_slots = asyncio.Semaphore(export_service.MAX_CONCURRENT_RENDERS)
|
||||
yield
|
||||
export_service._jobs.clear()
|
||||
export_service._tasks.clear()
|
||||
@@ -347,6 +355,158 @@ def test_docx_exporter_contains_cjk_text() -> None:
|
||||
assert "进程调度".encode("utf-8") in xml
|
||||
|
||||
|
||||
def _pdf_unescape(raw: bytes) -> bytes:
|
||||
"""反转义 PDF 字符串字面量(八进制转义与 \n \r \t 等)。"""
|
||||
out = bytearray()
|
||||
i = 0
|
||||
n = len(raw)
|
||||
while i < n:
|
||||
b = raw[i]
|
||||
if b == 0x5C and i + 1 < n: # 反斜杠转义
|
||||
nxt = raw[i + 1]
|
||||
if 0x30 <= nxt <= 0x37: # 八进制(如 \000)
|
||||
j = i + 1
|
||||
digits = bytearray()
|
||||
while j < n and j < i + 4 and 0x30 <= raw[j] <= 0x37:
|
||||
digits.append(raw[j])
|
||||
j += 1
|
||||
out.append(int(digits.decode(), 8) & 0xFF)
|
||||
i = j
|
||||
continue
|
||||
simple = {0x6E: 0x0A, 0x72: 0x0D, 0x74: 0x09, 0x62: 0x08, 0x66: 0x0C}
|
||||
out.append(simple.get(nxt, nxt))
|
||||
i += 2
|
||||
continue
|
||||
out.append(b)
|
||||
i += 1
|
||||
return bytes(out)
|
||||
|
||||
|
||||
def _extract_pdf_text(content: bytes) -> str:
|
||||
"""从 PDF 内容流提取文本(仅测试断言用,非完整 PDF 文本提取)。
|
||||
|
||||
reportlab 对 CID 字体按 UTF-16BE(高位 0x00)编码,字符串写为 \000 前缀的八进制
|
||||
转义;这里解码 ASCII85+flate 内容流、反转义字符串并去掉 0x00 还原 ASCII 正文。
|
||||
"""
|
||||
chunks: list[str] = []
|
||||
for m in re.finditer(rb"stream\r?\n(.*?)endstream", content, re.DOTALL):
|
||||
raw = m.group(1).strip()
|
||||
if raw.endswith(b"~>"):
|
||||
raw = raw[:-2]
|
||||
try:
|
||||
dec = zlib.decompress(base64.a85decode(raw))
|
||||
except Exception:
|
||||
try:
|
||||
dec = zlib.decompress(raw)
|
||||
except Exception:
|
||||
dec = raw
|
||||
for sm in re.finditer(rb"\(((?:[^()\\]|\\.)*)\)\s*Tj", dec):
|
||||
text = _pdf_unescape(sm.group(1))
|
||||
if text.count(0) > len(text) // 4:
|
||||
text = text.replace(b"\x00", b"")
|
||||
chunks.append(text.decode("latin-1"))
|
||||
return "".join(chunks)
|
||||
|
||||
|
||||
# --------------------------------------------------------------------------- #
|
||||
# 审阅回归:结构内容验证(不只校验魔法字节,还验证产物正文)
|
||||
# --------------------------------------------------------------------------- #
|
||||
def test_pdf_blockquote_preserves_content() -> None:
|
||||
from app.export.exporters.pdf import PdfExporter
|
||||
|
||||
# P2:引用块正文不能因「把块级子节点交给行内渲染器」而丢失
|
||||
result = asyncio.run(
|
||||
PdfExporter().export(parse_document("> quoted **content**"), ExportOptions())
|
||||
)
|
||||
text = _extract_pdf_text(result.content)
|
||||
assert "quoted" in text
|
||||
assert "content" in text
|
||||
assert not any("无法表示" in w for w in result.warnings)
|
||||
|
||||
|
||||
def test_docx_blockquote_preserves_content() -> None:
|
||||
import zipfile
|
||||
from io import BytesIO
|
||||
|
||||
from app.export.exporters.docx import DocxExporter
|
||||
|
||||
result = asyncio.run(
|
||||
DocxExporter().export(parse_document("> quoted **content**"), ExportOptions())
|
||||
)
|
||||
with zipfile.ZipFile(BytesIO(result.content)) as zf:
|
||||
xml = zf.read("word/document.xml").decode("utf-8")
|
||||
assert "quoted" in xml
|
||||
assert "content" in xml
|
||||
assert not any("无法表示" in w for w in result.warnings)
|
||||
|
||||
|
||||
def test_pdf_nested_list_parent_before_child() -> None:
|
||||
from app.export.exporters.pdf import PdfExporter
|
||||
|
||||
# P2:嵌套列表输出顺序颠倒——父级正文应在子列表之前
|
||||
result = asyncio.run(
|
||||
PdfExporter().export(parse_document("- parent\n - child"), ExportOptions())
|
||||
)
|
||||
text = _extract_pdf_text(result.content)
|
||||
assert text.index("parent") < text.index("child")
|
||||
|
||||
|
||||
def test_docx_nested_list_parent_before_child() -> None:
|
||||
import zipfile
|
||||
from io import BytesIO
|
||||
|
||||
from app.export.exporters.docx import DocxExporter
|
||||
|
||||
result = asyncio.run(
|
||||
DocxExporter().export(parse_document("- parent\n - child"), ExportOptions())
|
||||
)
|
||||
with zipfile.ZipFile(BytesIO(result.content)) as zf:
|
||||
xml = zf.read("word/document.xml").decode("utf-8")
|
||||
assert xml.index("parent") < xml.index("child")
|
||||
|
||||
|
||||
def test_export_cancel_queued_job_waiting_for_slot(monkeypatch) -> None:
|
||||
# P2:等待渲染槽位的任务取消后应立即进入 cancelled,不必等前面的渲染完成
|
||||
import threading
|
||||
|
||||
real_render = export_service._render_document
|
||||
release = threading.Event()
|
||||
entered = 0
|
||||
lock = threading.Lock()
|
||||
|
||||
def blocking_render(document, options, format):
|
||||
nonlocal entered
|
||||
with lock:
|
||||
entered += 1
|
||||
release.wait(timeout=5)
|
||||
return real_render(document, options, format)
|
||||
|
||||
monkeypatch.setattr(export_service, "_render_document", blocking_render)
|
||||
|
||||
async def _go():
|
||||
a = await export_service.create_export(_markdown_request("# a"))
|
||||
b = await export_service.create_export(_markdown_request("# b"))
|
||||
# 等 a/b 两个任务都拿到槽位并阻塞在渲染里
|
||||
for _ in range(2000):
|
||||
if entered >= 2:
|
||||
break
|
||||
await asyncio.sleep(0.001)
|
||||
c = await export_service.create_export(_markdown_request("# c"))
|
||||
await asyncio.sleep(0.01) # 让 c 进入排队等待槽位
|
||||
export_service.cancel_export(c.job_id)
|
||||
finished_c = await export_service.wait_for_export(c.job_id)
|
||||
release.set() # 放行前面的任务,避免测试挂起
|
||||
await asyncio.gather(
|
||||
export_service.wait_for_export(a.job_id),
|
||||
export_service.wait_for_export(b.job_id),
|
||||
)
|
||||
return finished_c
|
||||
|
||||
finished = asyncio.run(_go())
|
||||
assert finished.status == ExportStatus.cancelled
|
||||
assert finished.file is None
|
||||
|
||||
|
||||
def test_export_unknown_note_404() -> None:
|
||||
request = ExportRequest(
|
||||
source=ExportSource(type=ExportSourceType.note, note_id="note_missing"),
|
||||
|
||||
@@ -68,11 +68,11 @@
|
||||
| Benchmark | POST | `/api/benchmarks/agent/runs` | 暂缓 | 创建 Agent Benchmark(依赖 Agent Runtime 完成后交付) |
|
||||
| Benchmark | GET | `/api/benchmarks/runs` | 已实现 | 分页获取 Benchmark Run |
|
||||
| Benchmark | GET/POST | `/api/benchmarks/runs/{run_id}/*` | 计划新增 | 查询、订阅、取消和读取报告 |
|
||||
| Export | POST | `/api/exports` | 已实现(HTML) | 创建导出任务;`pdf`/`docx` 暂缓,返回 `EXPORT_FORMAT_UNSUPPORTED` |
|
||||
| Export | GET | `/api/exports` | 已实现(HTML) | 分页获取导出任务 |
|
||||
| Export | GET | `/api/exports/{job_id}` | 已实现(HTML) | 查询导出任务 |
|
||||
| Export | GET | `/api/exports/{job_id}/file` | 已实现(HTML) | 下载已完成产物 |
|
||||
| Export | POST | `/api/exports/{job_id}/cancel` | 已实现(HTML) | 取消导出任务 |
|
||||
| Export | POST | `/api/exports` | 已实现(HTML/PDF/DOCX) | 创建导出任务;`html`/`pdf`/`docx` 三格式均已支持 |
|
||||
| Export | GET | `/api/exports` | 已实现 | 分页获取导出任务 |
|
||||
| Export | GET | `/api/exports/{job_id}` | 已实现 | 查询导出任务 |
|
||||
| Export | GET | `/api/exports/{job_id}/file` | 已实现 | 下载已完成产物 |
|
||||
| Export | POST | `/api/exports/{job_id}/cancel` | 已实现 | 取消导出任务 |
|
||||
| Theme | Host Contract | `ThemePackageService` | 计划新增 | 导入、预览、启停和卸载主题包 |
|
||||
| Renderer | 内部 Contract | `StaticRenderer` | 计划新增 | Mermaid/Function Plot 预览和导出复用 |
|
||||
|
||||
@@ -1080,7 +1080,7 @@ VECTOR_INDEX_REBUILD_REQUIRED
|
||||
|
||||
## 10. Export Service
|
||||
|
||||
> 实现状态:HTML 导出已实现(`backend/app/export/`),`pdf`/`docx` 暂缓——请求这两个格式返回 `EXPORT_FORMAT_UNSUPPORTED`。`function-plot` 已支持静态 SVG 内嵌(`backend/app/plot/`),解析或渲染失败时回退为源码占位并记录 warning;Mermaid 目前仍以占位代码块保留并记 warning。
|
||||
> 实现状态:HTML / PDF / DOCX 导出均已实现(`backend/app/export/`),`format` 支持 `html`/`pdf`/`docx` 三格式。`function-plot` 已支持静态 SVG 内嵌(`backend/app/plot/`),解析或渲染失败时回退为源码占位并记录 warning;Mermaid 目前仍以占位代码块保留并记 warning。PDF/DOCX 为文本优先 v1,`function-plot` 与 Mermaid 保留源码占位并记 warning。
|
||||
|
||||
### 10.1 创建导出任务
|
||||
|
||||
@@ -1103,7 +1103,7 @@ VECTOR_INDEX_REBUILD_REQUIRED
|
||||
}
|
||||
```
|
||||
|
||||
`source.type` 首批支持 `note` 和 `markdown`。`note` 来源通过 `source.note_id` 引用已建索引笔记;`markdown` 来源用于尚未保存的预览,内容放在 `source.markdown` 字段,大小限制为 200 000 字符、不持久化到 Trace。`format` 可取 `html`、`pdf`、`docx`,但当前仅 `html` 已实现,`pdf`/`docx` 返回 `EXPORT_FORMAT_UNSUPPORTED`。
|
||||
`source.type` 首批支持 `note` 和 `markdown`。`note` 来源通过 `source.note_id` 引用已建索引笔记;`markdown` 来源用于尚未保存的预览,内容放在 `source.markdown` 字段,大小限制为 200 000 字符、不持久化到 Trace。`format` 可取 `html`、`pdf`、`docx`,三格式均已实现。
|
||||
|
||||
响应:
|
||||
|
||||
@@ -1222,7 +1222,6 @@ interface StaticRenderResult {
|
||||
|
||||
```text
|
||||
EXPORT_SOURCE_NOT_FOUND
|
||||
EXPORT_FORMAT_UNSUPPORTED
|
||||
EXPORT_OPTIONS_INVALID
|
||||
EXPORT_RENDER_FAILED
|
||||
EXPORT_UNSUPPORTED_CONTENT
|
||||
|
||||
@@ -121,7 +121,7 @@ cd backend
|
||||
uv run pytest -q
|
||||
```
|
||||
|
||||
`tests/test_export.py` 覆盖 Markdown 解析(标题/行内/列表/代码分流/表格/数学)、HTML 渲染(标签 + 转义 + warning)、Service 端到端(note 源与 markdown 源、PDF/DOCX 魔法字节与 CJK 字体、未知 note、取消、list/get、过期 410)与 `ExportSource` 契约校验。`tests/test_plot.py` 覆盖表达式解析/求值、SVG 渲染与 `StaticRenderer` 契约(函数图像渲染、Mermaid 占位)。
|
||||
`tests/test_export.py` 覆盖 Markdown 解析(标题/行内/列表/代码分流/表格/数学)、HTML 渲染(标签 + 转义 + warning)、Service 端到端(note 源与 markdown 源、PDF/DOCX 魔法字节与 CJK 字体、引用块正文与嵌套列表顺序等结构内容回归、排队任务取消、未知 note、取消、list/get、过期 410)与 `ExportSource` 契约校验。`tests/test_plot.py` 覆盖表达式解析/求值、SVG 渲染与 `StaticRenderer` 契约(函数图像渲染、Mermaid 占位)。
|
||||
|
||||
## 范围外(后续 PR)
|
||||
|
||||
|
||||
@@ -1,5 +1,28 @@
|
||||
# 主题组件覆盖检查(2026-09-05)
|
||||
|
||||
## 2026-09-06:Markdown 行为与文档滚动适配
|
||||
|
||||
| 主题 | 当前版本 |
|
||||
| --- | --- |
|
||||
| Light / Dark / Sepia | 1.4.0 |
|
||||
| 纸间时光 | 1.9.0 |
|
||||
| Ocean Blue | 1.6.0 |
|
||||
| Midnight Purple | 2.4.0 |
|
||||
|
||||
新增共享 `frontend/src/styles/markdown-behavior.css`,由应用入口及隔离主题预览同时加载。六个主题通过语义变量提供链接悬停与键盘焦点、任务复选框、引用与分隔线、文字选区、表格选区、标题折叠状态、警告框折叠状态和文档滚动按钮配色。标题箭头沿用悬停或键盘聚焦时显示的规则;表格选区采用透明叠色,避免遮住单元格文字。纸间时光保留长文轻量背景实现。
|
||||
|
||||
只读 Markdown(包括 AI 对话)现在同步代码行号、自动换行和缩进宽度设置。语法是否启用仍由 Markdown 预设与解析器决定;ATX / Setext 等源码写法解析成同级标题后使用相同主题样式,不用 CSS 模拟语法。主题预览新增 H4–H6、嵌套列表、任务列表、链接、行内代码、折叠警告框、带行号长代码及滚动按钮样例。
|
||||
|
||||
工作区滚动按钮固定在编辑区域右下角,适用于写作和源码模式:顶部只显示到底部、底部只显示到顶部、中间同时显示;空文档或没有可滚动内容时隐藏。滚动状态通过被动监听与动画帧合并更新,尺寸、内容和折叠变化会重新计算,减少动画偏好开启时直接跳转。
|
||||
|
||||
验证方法:
|
||||
|
||||
1. 运行 `cd frontend` 后执行 `npm test` 和 `npm run build`,检查主题变量覆盖、六主题预览矩阵、主题升级、Markdown 预设和滚动按钮回归。
|
||||
2. 本地启动前端,访问 `tests/visual/index.html?theme=light`,依次切换表中六个主题,检查新增样例的链接焦点、复选框、折叠态、代码换行及行号。社区主题已安装旧版本时,应在主题页更新后再检查。
|
||||
3. 工作区分别打开空笔记、短笔记、长笔记,切换写作与源码模式,在顶部、中间、底部验证按钮数量和跳转方向;调整窗口尺寸、折叠标题后再次检查。
|
||||
|
||||
本次自动检查覆盖仓库内六主题的结构和样式变量,不包含用户自行导入的任意第三方 CSS,也不等同于所有浏览器的逐页视觉验收。
|
||||
|
||||
本次检查仓库内 3 个内置主题和 3 个社区预设,共扫描 105 个前端源文件的组件与语义样式变量。用户自行导入的第三方 CSS 不在仓库中,不据此声称已验收。
|
||||
|
||||
## 范围与结果
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
theme_id: paper-moments
|
||||
name: 纸间时光 · Paper Moments
|
||||
version: 1.8.1
|
||||
version: 1.9.0
|
||||
author: NotesAgent
|
||||
description: 奶油纸张、手帐虚线与粉蓝胶带,把每天的灵感好好收藏。
|
||||
min_app_version: 0.2.0
|
||||
@@ -9,6 +9,9 @@ css_entry: theme.css
|
||||
license: MIT
|
||||
---
|
||||
[data-theme="paper-moments"] {
|
||||
--color-markdown-selection: #ecd3c7;
|
||||
--color-editor-scroll-background: #fff9e9;
|
||||
--color-editor-scroll-text: #875343;
|
||||
--color-callout-info: #406b7b;
|
||||
--color-callout-success: #536f43;
|
||||
--color-callout-warning: #875f25;
|
||||
|
||||
@@ -24,7 +24,7 @@ watch([() => props.source, diagramTheme, () => themeStore.currentThemeId, () =>
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DiagramInteractions :data-heading-style="headingAppearance.preferences.custom ? 'custom' : undefined" :style="headingAppearance.cssVariables"><div class="markdown-content" v-html="html" /></DiagramInteractions>
|
||||
<DiagramInteractions :data-heading-style="headingAppearance.preferences.custom ? 'custom' : undefined" :style="headingAppearance.cssVariables"><div class="markdown-content" :data-code-wrap="markdownPreferences.normalized.wrapCode" :data-line-numbers="markdownPreferences.normalized.lineNumbers" :style="{ '--markdown-code-indent': markdownPreferences.normalized.indent }" v-html="html" /></DiagramInteractions>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
@@ -36,12 +36,10 @@ watch([() => props.source, diagramTheme, () => themeStore.currentThemeId, () =>
|
||||
.markdown-content li::marker { color: var(--color-markdown-marker); font-weight: 700; }
|
||||
.markdown-content .shiki { overflow: auto; margin: .85em 0; padding: 16px; border: 1px solid var(--color-code-border); border-radius: 6px; background: var(--color-code-background) !important; color: var(--color-code-text); font-family: var(--font-ui-mono); font-size: .875em; line-height: 1.45; tab-size: 4; }
|
||||
.markdown-content code { padding: .1em .3em; border-radius: var(--radius-sm); background: var(--color-background-tertiary); font-family: var(--font-ui-mono); }
|
||||
.markdown-content .shiki code { display: block; min-width: max-content; padding: 0; background: transparent; font: inherit; }
|
||||
.markdown-content :not(pre) > code { background: var(--color-code-background); color: var(--color-code-text); border: 1px solid var(--color-code-border); }
|
||||
.markdown-content div.markdown-math { overflow-x: auto; padding-block: .5em; }
|
||||
.markdown-content h4, .markdown-content h5, .markdown-content h6 { margin: 1em 0 .5em; font-weight: 600; }
|
||||
.markdown-content input[type="checkbox"] { margin-right: .45em; accent-color: var(--color-accent-primary); }
|
||||
.markdown-content .shiki .line { display: block; min-height: 1.45em; }
|
||||
.markdown-content blockquote { padding-left: 1em; border-left: 3px solid var(--color-accent-primary); color: var(--color-text-secondary); }
|
||||
.markdown-content table { width: 100%; margin: .65em 0; border-collapse: collapse; }
|
||||
.markdown-content th, .markdown-content td { padding: .45em .65em; border: 1px solid var(--color-markdown-grid); text-align: left; }
|
||||
|
||||
@@ -3,12 +3,14 @@ import { defineAsyncComponent, ref, watch } from 'vue'
|
||||
import { useEditorStore } from '@/stores/editor'
|
||||
import { useSettingsStore } from '@/stores/settings'
|
||||
import { useThemeStore } from '@/stores/theme'
|
||||
import EditorScrollButtons from './EditorScrollButtons.vue'
|
||||
const VisualMarkdownEditor = defineAsyncComponent(() => import('./VisualMarkdownEditor.vue'))
|
||||
|
||||
const editorStore = useEditorStore()
|
||||
const settingsStore = useSettingsStore()
|
||||
const themeStore = useThemeStore()
|
||||
const sourceEditor = ref<HTMLTextAreaElement | null>(null)
|
||||
const container = ref<HTMLElement | null>(null)
|
||||
watch(() => editorStore.headingRequest, request => {
|
||||
const input = sourceEditor.value
|
||||
if (!request || !input || request.path !== editorStore.currentFilePath) return
|
||||
@@ -24,13 +26,17 @@ function updateContent(event: Event) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="container" class="editor-scroll-pane">
|
||||
<VisualMarkdownEditor v-if="editorStore.mode === 'wysiwyg'" :key="`${editorStore.currentFilePath ?? 'empty'}:${editorStore.contentRevision}:${themeStore.resolvedCodeBlockTheme}:${settingsStore.language}`"
|
||||
:initial-content="editorStore.content" />
|
||||
<textarea v-else ref="sourceEditor" class="editor-pane source" :value="editorStore.content" :spellcheck="settingsStore.spellCheck"
|
||||
:lang="settingsStore.language" :aria-label="settingsStore.language === 'en' ? 'Markdown source editor' : 'Markdown 源码编辑器'" @input="updateContent" />
|
||||
<EditorScrollButtons :container="container" :content="editorStore.content" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.editor-scroll-pane { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; overflow: hidden; }
|
||||
.editor-pane {
|
||||
box-sizing: border-box;
|
||||
flex: 1;
|
||||
|
||||
@@ -0,0 +1,47 @@
|
||||
// @vitest-environment happy-dom
|
||||
import { afterEach, expect, it, vi } from 'vitest'
|
||||
import { mount } from '@vue/test-utils'
|
||||
import EditorScrollButtons from './EditorScrollButtons.vue'
|
||||
|
||||
afterEach(() => { vi.useRealTimers(); vi.unstubAllGlobals(); document.body.innerHTML = '' })
|
||||
|
||||
it('shows only useful directions, scrolls the editor, and hides empty or short documents', async () => {
|
||||
vi.useFakeTimers()
|
||||
vi.stubGlobal('matchMedia', () => ({ matches: false }))
|
||||
const container = document.createElement('div')
|
||||
const viewport = document.createElement('textarea')
|
||||
viewport.className = 'source'
|
||||
container.append(viewport)
|
||||
document.body.append(container)
|
||||
Object.defineProperty(viewport, 'scrollHeight', { configurable: true, value: 1000 })
|
||||
Object.defineProperty(viewport, 'clientHeight', { configurable: true, value: 200 })
|
||||
const scroll = vi.fn()
|
||||
viewport.scrollTo = scroll
|
||||
const wrapper = mount(EditorScrollButtons, { props: { container, content: 'A long note' } })
|
||||
const update = async (top: number) => {
|
||||
viewport.scrollTop = top
|
||||
viewport.dispatchEvent(new Event('scroll'))
|
||||
await vi.advanceTimersByTimeAsync(40)
|
||||
}
|
||||
try {
|
||||
await update(0)
|
||||
expect(wrapper.findAll('button')).toHaveLength(1)
|
||||
expect(wrapper.find('button').attributes('aria-label')).toBe('滑动到底部')
|
||||
await wrapper.find('button').trigger('click')
|
||||
expect(scroll).toHaveBeenLastCalledWith({ top: 1000, behavior: 'smooth' })
|
||||
await update(400)
|
||||
expect(wrapper.findAll('button')).toHaveLength(2)
|
||||
await update(800)
|
||||
expect(wrapper.findAll('button')).toHaveLength(1)
|
||||
expect(wrapper.find('button').attributes('aria-label')).toBe('滑动到顶部')
|
||||
await wrapper.find('button').trigger('click')
|
||||
expect(scroll).toHaveBeenLastCalledWith({ top: 0, behavior: 'smooth' })
|
||||
await wrapper.setProps({ content: ' \n' })
|
||||
await update(400)
|
||||
expect(wrapper.findAll('button')).toHaveLength(0)
|
||||
Object.defineProperty(viewport, 'scrollHeight', { value: 200 })
|
||||
await wrapper.setProps({ content: 'Short note' })
|
||||
await update(0)
|
||||
expect(wrapper.findAll('button')).toHaveLength(0)
|
||||
} finally { wrapper.unmount() }
|
||||
})
|
||||
@@ -0,0 +1,62 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onBeforeUnmount, ref, watch } from 'vue'
|
||||
import { Top, Bottom } from '@element-plus/icons-vue'
|
||||
import AppIcon from '@/components/common/AppIcon.vue'
|
||||
import { t } from '@/i18n'
|
||||
|
||||
const props = defineProps<{ container: HTMLElement | null; content: string }>()
|
||||
const hasContent = computed(() => !!props.content.trim())
|
||||
const canUp = ref(false), canDown = ref(false)
|
||||
let viewport: HTMLElement | null = null
|
||||
let frame = 0
|
||||
let mutation: MutationObserver | undefined
|
||||
let resize: ResizeObserver | undefined
|
||||
function update() {
|
||||
frame = 0
|
||||
const next = props.container?.querySelector<HTMLElement>('.milkdown-host, textarea.source') ?? null
|
||||
if (next !== viewport) {
|
||||
viewport?.removeEventListener('scroll', schedule)
|
||||
resize?.disconnect()
|
||||
viewport = next
|
||||
viewport?.addEventListener('scroll', schedule, { passive: true })
|
||||
}
|
||||
if (viewport) {
|
||||
resize?.observe(viewport)
|
||||
for (const child of viewport.children) resize?.observe(child)
|
||||
const document = viewport.querySelector('.ProseMirror')
|
||||
if (document) resize?.observe(document)
|
||||
}
|
||||
const max = viewport ? viewport.scrollHeight - viewport.clientHeight : 0
|
||||
const visible = hasContent.value && max > 2
|
||||
canUp.value = visible && viewport!.scrollTop > 2
|
||||
canDown.value = visible && viewport!.scrollTop < max - 2
|
||||
}
|
||||
function schedule() { if (!frame) frame = requestAnimationFrame(update) }
|
||||
function scroll(to: 'top' | 'bottom') {
|
||||
viewport?.scrollTo({ top: to === 'top' ? 0 : viewport.scrollHeight,
|
||||
behavior: window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth' })
|
||||
}
|
||||
watch(() => props.container, container => {
|
||||
mutation?.disconnect()
|
||||
resize?.disconnect()
|
||||
mutation = new MutationObserver(schedule)
|
||||
resize = new ResizeObserver(schedule)
|
||||
if (container) mutation.observe(container, { childList: true, subtree: true, characterData: true, attributes: true })
|
||||
schedule()
|
||||
}, { immediate: true, flush: 'post' })
|
||||
watch(() => props.content, schedule)
|
||||
onBeforeUnmount(() => {
|
||||
cancelAnimationFrame(frame)
|
||||
mutation?.disconnect()
|
||||
resize?.disconnect()
|
||||
viewport?.removeEventListener('scroll', schedule)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="canUp || canDown" class="editor-scroll-buttons" :aria-label="t('文档滚动', 'Document scrolling')">
|
||||
<button v-if="canUp" type="button" class="button-secondary" :title="t('滑动到顶部', 'Scroll to top')" :aria-label="t('滑动到顶部', 'Scroll to top')" @click="scroll('top')"><AppIcon :icon="Top" :size="20" /></button>
|
||||
<button v-if="canDown" type="button" class="button-secondary" :title="t('滑动到底部', 'Scroll to bottom')" :aria-label="t('滑动到底部', 'Scroll to bottom')" @click="scroll('bottom')"><AppIcon :icon="Bottom" :size="20" /></button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -6,6 +6,7 @@ vi.mock('@/styles/features.css?raw', async () => ({ default: (await import('node
|
||||
vi.mock('@/styles/tokens.css?raw', async () => ({ default: (await import('node:fs')).readFileSync(process.cwd() + '/src/styles/tokens.css', 'utf8') }))
|
||||
vi.mock('@/styles/callouts.css?raw', async () => ({ default: (await import('node:fs')).readFileSync(process.cwd() + '/src/styles/callouts.css', 'utf8') }))
|
||||
import CommunityThemePreview from './CommunityThemePreview.vue'
|
||||
vi.mock('@/styles/markdown-behavior.css?raw', async () => ({ default: (await import('node:fs')).readFileSync(process.cwd() + '/src/styles/markdown-behavior.css', 'utf8') }))
|
||||
import { mockCommunityThemes } from '@/services/themePackageService'
|
||||
const themes = [...['light','dark','sepia'].map(theme_id => ({theme_id,name:theme_id,builtin:true})), ...mockCommunityThemes.map(t => ({...t,builtin:false}))]
|
||||
it.each(themes)('previews shared component states safely for $theme_id', theme => {
|
||||
@@ -16,6 +17,9 @@ it.each(themes)('previews shared component states safely for $theme_id', theme =
|
||||
const doc = new DOMParser().parseFromString(iframe.attributes('srcdoc')!, 'text/html')
|
||||
expect(doc.documentElement.dataset.theme).toBe(theme.theme_id)
|
||||
expect(doc.querySelector('script')).toBeNull()
|
||||
for (const selector of ['.editor-scroll-buttons button', '.markdown-content h6', '.task-list-item input:checked', '.markdown-content[data-code-wrap="true"][data-line-numbers="true"] .line', '.heading-fold-toggle']) expect(doc.querySelector(selector), selector).not.toBeNull()
|
||||
expect(doc.querySelector('style')!.textContent).toContain('.editor-scroll-buttons button:focus-visible')
|
||||
expect(doc.querySelector('style')!.textContent).toContain(".markdown-content[data-code-wrap='true'] .shiki code")
|
||||
expect(doc.querySelectorAll('.specimen-callouts > aside.markdown-callout')).toHaveLength(14)
|
||||
expect(doc.querySelector('.specimen-callouts > details[open]')).not.toBeNull()
|
||||
expect(doc.querySelector('.specimen-callouts > details:not([open])')).not.toBeNull()
|
||||
@@ -25,6 +29,12 @@ it.each(themes)('previews shared component states safely for $theme_id', theme =
|
||||
expect(doc.querySelector('style')!.textContent).toContain('.button-primary:hover')
|
||||
expect(doc.querySelector('style')!.textContent).not.toContain('color:white')
|
||||
const rules = Array.from(doc.styleSheets[0]!.cssRules) as CSSStyleRule[]
|
||||
// The sandbox cannot inherit MarkdownContent's component stylesheet.
|
||||
const codeRule = rules.find(rule => rule.selectorText === '.markdown-content .shiki code')!
|
||||
const lineRule = rules.find(rule => rule.selectorText === '.markdown-content .shiki .line')!
|
||||
expect(codeRule.style.getPropertyValue('display')).toBe('block')
|
||||
expect(lineRule.style.getPropertyValue('display')).toBe('block')
|
||||
expect(lineRule.style.getPropertyValue('min-height')).toBe('1.45em')
|
||||
const rootRule = rules.filter(rule => rule.selectorText === 'html').pop()!
|
||||
const bodyRule = rules.filter(rule => rule.selectorText === 'body').pop()!
|
||||
// The embedded document must override the app-shell overflow lock.
|
||||
|
||||
@@ -6,6 +6,7 @@ import { getCommunityThemePreviewCss, mockCommunityThemes } from '@/services/the
|
||||
import tokensCss from '@/styles/tokens.css?raw'
|
||||
import featuresCss from '@/styles/features.css?raw'
|
||||
import headingsCss from '@/styles/headings.css?raw'
|
||||
import markdownBehaviorCss from '@/styles/markdown-behavior.css?raw'
|
||||
import calloutsCss from '@/styles/callouts.css?raw'
|
||||
import { calloutTypes } from '@/utils/callouts'
|
||||
import specimenHtml from './themeSpecimen.html?raw'
|
||||
@@ -25,6 +26,7 @@ const previewDocument = computed(() => {
|
||||
const style = doc.createElement('style')
|
||||
style.textContent = `${tokensCss}\n${featuresCss}\n${calloutsCss}\n${headingsCss}\n${props.css ?? getCommunityThemePreviewCss(props.themeId)}\nhtml { height:100% !important; overflow-y:auto !important; overflow-x:hidden !important; overscroll-behavior:contain; } body { height:auto !important; min-height:100%; overflow:visible !important; margin:0; padding:24px; background:var(--color-background-primary); color:var(--color-text-primary); font:16px/1.6 system-ui; } article { min-width:0; } .theme-specimen { display:grid; gap:16px; margin-top:20px; } .surface-nested { padding:12px; border:1px solid var(--color-border-default); border-radius:var(--radius-md); } .specimen-markdown { overflow:auto; } .specimen-markdown code { background:var(--color-code-background, var(--color-background-secondary)); color:var(--color-code-text, var(--color-text-primary)); padding:3px 6px; border-radius:4px; } .specimen-markdown pre { padding:12px; background:var(--color-background-secondary); } .specimen-markdown blockquote { border-left:3px solid var(--color-accent-primary); padding-left:12px; } .specimen-markdown table { width:100%; border-collapse:collapse; } .specimen-markdown td,.specimen-markdown th { padding:8px; border:1px solid var(--color-border-default); } .specimen-markdown th { background:var(--color-markdown-table-header); } .specimen-chart > div { display:flex; align-items:flex-end; gap:12px; height:100px; border-bottom:1px solid var(--color-border-default); } .specimen-chart span { width:36px; } .specimen-long { overflow-wrap:anywhere; } @media(max-width:480px) { body { padding:12px; } .form-grid { grid-template-columns:minmax(0,1fr); } }`
|
||||
|
||||
style.textContent += `\n${markdownBehaviorCss}\n.specimen-scroll { position:relative; min-height:110px; }`
|
||||
doc.head.append(style)
|
||||
const article = doc.createElement('article')
|
||||
article.className = 'panel'
|
||||
|
||||
@@ -105,6 +105,6 @@ it('offers and applies the paper theme update without discarding the active them
|
||||
const card = wrapper.findAll('article.theme-card').find(item => item.text().includes('Paper Moments'))!
|
||||
await card.findAll('button').find(button => button.text() === '更新')!.trigger('click')
|
||||
await flushPromises()
|
||||
expect(store.allThemes.find(theme => theme.theme_id === 'paper-moments')?.version).toBe('1.8.1')
|
||||
expect(store.allThemes.find(theme => theme.theme_id === 'paper-moments')?.version).toBe('1.9.0')
|
||||
expect(document.getElementById('theme-style-paper-moments')!.textContent).toContain('.surface-nested')
|
||||
})
|
||||
|
||||
@@ -20,3 +20,20 @@ console.log(note);</code></pre><table><thead><tr><th>名称</th><th>状态</th><
|
||||
|
||||
<section class="surface-nested markdown-preferences"><h2>Markdown 语法预设</h2><label>标题样式 <select class="select"><option>ATX (#)</option><option>Setext</option></select></label><label><input type="checkbox" checked> 警告框与提示框</label><button class="button-secondary">保存为预设</button></section>
|
||||
<section class="milkdown"><div class="ProseMirror"><h2><button class="heading-fold-toggle" aria-expanded="true" aria-label="折叠示例标题"></button>悬停查看折叠箭头</h2><p>折叠按钮跟随主题,键盘聚焦时也可见。</p></div></section>
|
||||
<section class="markdown-content specimen-markdown">
|
||||
<h2>Markdown 行为与状态</h2>
|
||||
<h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>
|
||||
<p><a href="#markdown-preview-target">链接:检查悬停与键盘焦点</a>,<code>行内代码</code>与<strong>强调</strong>、<em>斜体</em>、<del>删除线</del>。选中这段文字检查主题选区颜色。</p>
|
||||
<ul><li>无序列表<ul><li>嵌套列表</li></ul></li></ul><ol><li>有序列表</li><li>第二项</li></ol>
|
||||
<ul><li class="task-list-item"><input type="checkbox" disabled> 未完成任务</li><li class="task-list-item"><input type="checkbox" checked disabled> 已完成任务</li></ul>
|
||||
<blockquote><p>普通引用</p><blockquote>嵌套引用</blockquote></blockquote><hr>
|
||||
<details class="markdown-callout" data-callout="tip"><summary class="callout-title">点击展开提示</summary><div class="callout-body"><p>提示内的 <code>代码</code> 与列表也继承主题。</p></div></details>
|
||||
<p id="markdown-preview-target">ATX 和 Setext 解析后使用相同标题样式;关闭扩展语法时保留源码展示。</p>
|
||||
<pre><code>> [!NOTE]
|
||||
关闭警告框扩展时显示原始内容
|
||||
```mermaid
|
||||
graph LR; A-->B
|
||||
```</code></pre>
|
||||
</section>
|
||||
<section class="surface-nested specimen-scroll"><p>工作区滚动按钮:悬停、按下或 Tab 聚焦检查配色。</p><div class="editor-scroll-buttons"><button class="button-secondary" aria-label="滑动到顶部" title="滑动到顶部">↑</button><button class="button-secondary" aria-label="滑动到底部" title="滑动到底部">↓</button></div></section>
|
||||
<section class="markdown-content specimen-markdown" data-code-wrap="true" data-line-numbers="true"><h3>代码换行与行号</h3><pre class="shiki"><code><span class="line">const description = "这是一段用于检查代码自动换行、行号与主题配色的较长说明,较窄视口下也应该保留可读内容。";</span><span class="line">console.log(description);</span></code></pre></section>
|
||||
|
||||
@@ -4,6 +4,7 @@ import App from './App.vue'
|
||||
import router from './router'
|
||||
import './styles/tokens.css'
|
||||
import './styles/features.css'
|
||||
import './styles/markdown-behavior.css'
|
||||
import { useThemeStore } from './stores/theme'
|
||||
import { useSettingsStore } from './stores/settings'
|
||||
import { watch } from 'vue'
|
||||
|
||||
@@ -361,7 +361,7 @@ export const mockCommunityThemes: ThemeManifest[] = [
|
||||
{
|
||||
theme_id: 'ocean-blue',
|
||||
name: 'Ocean Blue',
|
||||
version: '1.5.0',
|
||||
version: '1.6.0',
|
||||
author: 'community',
|
||||
description: '宁静的海洋蓝色主题,适合长时间阅读',
|
||||
min_app_version: '0.2.0',
|
||||
@@ -373,7 +373,7 @@ export const mockCommunityThemes: ThemeManifest[] = [
|
||||
{
|
||||
theme_id: 'midnight-purple',
|
||||
name: 'Midnight Purple',
|
||||
version: '2.3.0',
|
||||
version: '2.4.0',
|
||||
author: 'night-owl',
|
||||
description: '深紫色暗夜主题,适合编码',
|
||||
min_app_version: '0.2.0',
|
||||
@@ -464,6 +464,9 @@ export function getCommunityThemePreviewCss(themeId: string): string {
|
||||
return buildCommunityThemeCss(themeId, t.is_dark) + `
|
||||
[data-theme="${themeId}"] {
|
||||
color-scheme: ${t.is_dark ? 'dark' : 'light'};
|
||||
--color-markdown-selection: ${t.is_dark ? '#443252' : '#d4eaf5'};
|
||||
--color-editor-scroll-background: var(--color-surface-elevated);
|
||||
--color-editor-scroll-text: var(--color-accent-primary);
|
||||
--color-callout-info: ${t.is_dark ? '#9dbbff' : '#126589'};
|
||||
--color-callout-success: ${t.is_dark ? '#a7d58c' : '#267049'};
|
||||
--color-callout-warning: ${t.is_dark ? '#efc886' : '#885c13'};
|
||||
|
||||
@@ -6,9 +6,9 @@ import * as themePkg from '@/services/themePackageService'
|
||||
import { t } from '@/i18n'
|
||||
|
||||
const builtinThemes = (): ThemeConfig[] => [
|
||||
{ theme_id: 'light', name: t('浅色', 'Light'), version: '1.3.0', description: t('默认浅色主题', 'Default light theme'), is_dark: false, builtin: true, code_theme: 'github-light' },
|
||||
{ theme_id: 'dark', name: t('深色', 'Dark'), version: '1.3.0', description: t('默认深色主题', 'Default dark theme'), is_dark: true, builtin: true, code_theme: 'github-dark' },
|
||||
{ theme_id: 'sepia', name: t('护眼', 'Sepia'), version: '1.3.0', description: t('护眼暖色调', 'Warm, low-glare theme'), is_dark: false, builtin: true, code_theme: 'github-light' },
|
||||
{ theme_id: 'light', name: t('浅色', 'Light'), version: '1.4.0', description: t('默认浅色主题', 'Default light theme'), is_dark: false, builtin: true, code_theme: 'github-light' },
|
||||
{ theme_id: 'dark', name: t('深色', 'Dark'), version: '1.4.0', description: t('默认深色主题', 'Default dark theme'), is_dark: true, builtin: true, code_theme: 'github-dark' },
|
||||
{ theme_id: 'sepia', name: t('护眼', 'Sepia'), version: '1.4.0', description: t('护眼暖色调', 'Warm, low-glare theme'), is_dark: false, builtin: true, code_theme: 'github-light' },
|
||||
]
|
||||
|
||||
export type CodeBlockThemePreference = 'auto' | 'github-light' | 'github-dark'
|
||||
|
||||
@@ -0,0 +1,34 @@
|
||||
/* Shared interaction layer: colors follow the active theme; syntax preferences
|
||||
continue to be handled by the parser/editor rather than CSS-generated content. */
|
||||
:is(.markdown-content, .milkdown .ProseMirror) a:not(.callout-title) {
|
||||
color: var(--color-text-link); text-decoration: underline; text-underline-offset: .18em;
|
||||
text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
|
||||
}
|
||||
:is(.markdown-content, .milkdown .ProseMirror) a:hover { text-decoration-color: currentColor; }
|
||||
:is(.markdown-content, .milkdown .ProseMirror) a:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 3px; border-radius: var(--radius-sm); }
|
||||
:is(.markdown-content, .milkdown .ProseMirror) input[type='checkbox'] { accent-color: var(--color-accent-primary); }
|
||||
:is(.markdown-content, .milkdown .ProseMirror) input[type='checkbox']:disabled { opacity: 1; }
|
||||
.markdown-content .task-list-item { list-style: none; }
|
||||
:is(.markdown-content, .milkdown .ProseMirror) blockquote:not(.markdown-callout) { border-inline-start: 3px solid var(--color-markdown-marker); color: var(--color-text-secondary); }
|
||||
:is(.markdown-content, .milkdown .ProseMirror) hr { border: 0; border-top: 1px solid var(--color-markdown-grid); }
|
||||
:is(.markdown-content, .milkdown .ProseMirror) :is(h1,h2,h3,h4,h5,h6) { scroll-margin-top: 16px; }
|
||||
:is(.markdown-content, .milkdown .ProseMirror) :is(p,li,h1,h2,h3,h4,h5,h6,code)::selection,
|
||||
.editor-pane.source::selection { background: var(--color-markdown-selection); color: var(--color-text-primary); }
|
||||
.milkdown .ProseMirror .selectedCell::after { background: color-mix(in srgb, var(--color-accent-primary) 18%, transparent); pointer-events: none; }
|
||||
.milkdown .ProseMirror .heading-fold-toggle[aria-expanded='false'] { color: var(--color-accent-primary); background: var(--color-accent-soft); }
|
||||
.markdown-callout[data-collapsed='true'] { border-style: dashed; border-inline-start-style: solid; }
|
||||
.markdown-content details.markdown-callout:not([open]) { border-style: dashed; border-inline-start-style: solid; }
|
||||
.editor-pane.source { caret-color: var(--color-accent-primary); }
|
||||
.markdown-content .shiki code { display: block; min-width: max-content; padding: 0; background: transparent; font: inherit; }
|
||||
.markdown-content .shiki .line { display: block; min-height: 1.45em; }
|
||||
.markdown-content[data-code-wrap] .shiki { tab-size: var(--markdown-code-indent, 4); }
|
||||
.markdown-content[data-code-wrap='true'] .shiki code { min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
|
||||
.markdown-content[data-line-numbers='true'] .shiki code { counter-reset: code-line; }
|
||||
.markdown-content[data-line-numbers='true'] .shiki .line { position: relative; padding-inline-start: 3.5em; }
|
||||
.markdown-content[data-line-numbers='true'] .shiki .line::before { counter-increment: code-line; content: counter(code-line); position: absolute; inset-inline-start: 0; width: 2.5em; text-align: end; color: var(--color-code-muted); user-select: none; }
|
||||
:is(.milkdown-host, .editor-pane.source) { scrollbar-color: var(--color-border-default) var(--color-background-primary); }
|
||||
.editor-scroll-buttons { position: absolute; right: 24px; bottom: 24px; z-index: 10; display: flex; flex-direction: column; gap: 8px; }
|
||||
.editor-scroll-buttons button { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; min-height: 38px; padding: 0; border-radius: var(--radius-md); background: var(--color-editor-scroll-background); color: var(--color-editor-scroll-text); border: 1px solid var(--color-border-default); box-shadow: var(--shadow-sm); }
|
||||
.editor-scroll-buttons button:hover { background: var(--color-background-hover); border-color: var(--color-accent-primary); }
|
||||
.editor-scroll-buttons button:active { background: var(--color-accent-soft); }
|
||||
.editor-scroll-buttons button:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }
|
||||
@@ -1,4 +1,7 @@
|
||||
:root {
|
||||
--color-markdown-selection: color-mix(in srgb, var(--color-accent-primary) 24%, var(--color-background-primary));
|
||||
--color-editor-scroll-background: var(--color-surface-elevated);
|
||||
--color-editor-scroll-text: var(--color-accent-primary);
|
||||
/* Callout heading colors also serve as borders; keep text readable on tint. */
|
||||
--color-callout-info: var(--color-info);
|
||||
--color-callout-success: var(--color-success);
|
||||
|
||||
Reference in New Issue
Block a user