Skip to content

feat: markdown 表格闭合边框渲染 + CJK/emoji 宽度适配#115

Open
dengmik-commits wants to merge 2 commits into
lessweb:mainfrom
dengmik-commits:feat/table-render
Open

feat: markdown 表格闭合边框渲染 + CJK/emoji 宽度适配#115
dengmik-commits wants to merge 2 commits into
lessweb:mainfrom
dengmik-commits:feat/table-render

Conversation

@dengmik-commits
Copy link
Copy Markdown
Contributor

@dengmik-commits dengmik-commits commented May 23, 2026

概述

当前 deepcode-cli 的 markdown 表格仅原样输出 | col1 | col2 | 分隔符,排版简陋、宽度溢出时自动被 Ink 断行导致错乱。本次改动增加了闭合边框表格渲染、CJK 宽字符和 emoji 视觉宽度计算、单元格内自动换行,以及表格与普通文本分离渲染。

效果

变更

src/ui/components/MessageView/markdown.ts

  • 新增 visualWidth(text) — 按终端列宽计算字符视觉宽度(CJK 字符、全角、emoji = 2 列,ASCII = 1 列)
  • 新增 splitTableBlocks(text) — 从文本中检测和解析 markdown 表格(| col | col | + ---|---
  • 新增 renderTableBorder(rows, maxWidth) — 渲染闭合边框表格:
    • 基于视觉宽度的列宽计算
    • 列宽分配:窄列(#、状态、评论、日期)优先压缩,内容列保有最少 12 字符
    • 单元格内逐字符自动换行,满格时在最后一个空格处截断
  • 新增 renderMarkdownSegments(text, maxWidth) — 将文本拆分为 text/table/code 分段
  • renderMarkdown() 委托给 renderMarkdownSegments()(向后兼容)

src/ui/components/MessageView/index.tsx

  • 内容渲染改用 renderMarkdownSegments() 返回的分段数组
  • 表格<Text wrap="truncate-end"> 渲染,彻底杜绝 Ink 在单元格空格处断行
  • 普通文本<Text> 默认 wrap,保持正常折行

src/ui/index.ts

  • 导出 renderMarkdownSegments

验证

npm run typecheck    # ✅ 零错误
npm run bundle       # ✅ dist/cli.js

- Detect markdown tables and render with Unicode box-drawing characters
- Calculate visual terminal width for CJK/emoji (2 cols) vs ASCII (1 col)
- Wrap long cells across multiple lines, prefer word-boundary breaks
- Allocate column widths: narrow columns (#, status, count, date) minimal,
  content columns kept >= 12 chars
- Render tables with <Text wrap="truncate-end"> to prevent Ink from
  breaking box-drawing lines at cell boundary spaces
- Expose renderMarkdownSegments() for per-segment wrapping control
@dengmik-commits
Copy link
Copy Markdown
Contributor Author

Screenshot_2026-05-23_195028

@qorzj
Copy link
Copy Markdown
Collaborator

qorzj commented May 25, 2026

@dengmik-commits 我这边测出的问题是:每一列都是限制了固定宽度,导致表格宽度过小高度过大,看能否再优化一下呢

我本地环境:macOS + iterm2

请用 Markdown 表格列出 5 个待办事项,列包括:编号、状态、任务、备注。备注里写长一点,确保会换行。

image

请输出一个 Markdown 表格,对比三个功能方案:方案 A、方案 B、方案 C。列包括:Feature、中文说明、Status、Trade-off。Status 使用 emoji,Trade-off 同时包含英文短语和中文解释。

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants