Fix(XMarkdown)：Mermaid 切换时渲染异常 #1175
Conversation
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. 📝 WalkthroughWalkthrough本次变更大规模删除多类组件与文档（Actions、Attachments.FileList、Bubble、Conversations、Sender、ThoughtChain、use-x-agent 及其样式、测试、示例、文档），重写顶层 README（中英），清理 dumi 页与 PeterCat 入口，更新仓库配置（gitignore、biome、husky），并将 CI/CD 工作流由 Bun 迁移至 npm。 Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor Dev as Developer
participant GH as GitHub Actions
participant Node as Setup Node
participant NPM as npm
participant Codecov as Codecov
Dev->>GH: push / PR
GH->>GH: permissions: contents=read
GH->>Node: setup node (ubuntu-latest)
GH->>NPM: npm ci / npm run prestart
GH->>NPM: npm run lint / tsc / compile / test
GH-->>Codecov: Upload coverage (token)
Note over GH,NPM: 流程由 Bun 迁移至 npm 执行
sequenceDiagram
autonumber
actor Dev as Developer
participant GH as GitHub Actions (Preview/Site)
participant WS as Workspace packages/x
participant NPM as npm
participant Pages as GitHub Pages/Surge
Dev->>GH: workflow_run (Preview Build)
GH->>NPM: npm run prestart --workspaces
GH->>NPM: npm run site --workspace packages/x
GH->>GH: Upload artifact from packages/x/_site
Note over GH,WS: 产物路径改为 packages/x/_site
Dev->>GH: Site Deploy
GH->>NPM: npm run predeploy --workspace packages/x
GH->>NPM: npm run compile --workspace packages/x
GH->>Pages: Publish ./packages/x/_site
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested labels
Pre-merge checks (2 passed, 1 warning)❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
Poem
Pre-merge checks (2 passed, 1 warning)❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
Poem
Pre-merge checks (2 passed, 1 warning)❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
Poem
Pre-merge checks (2 passed, 1 warning)❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
Poem
Pre-merge checks (2 passed, 1 warning)❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
|
Deploying ant-design-x with
|
| Latest commit: |
b595e74
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://2da80284.ant-design-x.pages.dev |
| Branch Preview URL: | https://feature-markdown.ant-design-x.pages.dev |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Summary of Changes
Hello @Div627, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!
此拉取请求旨在解决 XMarkdown 中 Mermaid 图表渲染的特定问题，同时对项目结构进行了大规模的重构。通过将现有组件和功能拆分为独立的 npm 包（@ant-design/x、@ant-design/x-sdk、@ant-design/x-markdown），提升了项目的模块化、可维护性和可扩展性。此次变更也更新了开发工具配置和文档，以适应新的多包工作流。
Highlights
- 项目结构重构: 项目已进行重大重构，从扁平化的
components目录结构迁移至多包（monorepo）架构，新增了packages/x、packages/x-markdown和packages/x-sdk等独立包。 - 核心组件迁移与移除: 原
components目录下的Actions、Attachments、Bubble、Conversations、Sender、ThoughtChain组件及其相关的 hooks (useXAgent、useXChat) 已被移除。这些组件已迁移至新的独立包中，以实现更好的模块化和维护性。 - 构建与配置更新:
.gitignore和biome.json文件已更新，以适应新的多包项目结构，并调整了 linting 规则，包括启用新的代码风格检查和更新忽略路径。 - 文档与开发流程更新: 中英文
README.md文件已全面更新，反映了新的项目结构、核心包的职责划分以及本地开发环境的设置（推荐使用utoo和npm-workspace）。此外，新增了 Huskycommit-msg钩子，用于commitlint检查提交信息规范。 - XMarkdown Mermaid 渲染问题修复: 根据 PR 标题，此 PR 修复了 XMarkdown 中 Mermaid 图表切换时的渲染异常问题。此修复是
x-markdown包重构的一部分。
Using Gemini Code Assist
The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.
Invoking Gemini
You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.
| Feature | Command | Description |
|---|---|---|
| Code Review | /gemini review |
Performs a code review for the current pull request in its current state. |
| Pull Request Summary | /gemini summary |
Provides a summary of the current pull request in its current state. |
| Comment | @gemini-code-assist | Responds in comments when explicitly tagged, both in issue comments and review comments. |
| Help | /gemini help |
Displays a list of available commands. |
Customization
To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.
Limitations & Feedback
Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.
You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.
Footnotes
-
Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩
|
|
||
| try { | ||
| const isValid = await mermaid.parse(children, { suppressErrors: true }); | ||
| if (!isValid) throw new Error('Invalid Mermaid syntax'); | ||
|
|
||
| console.log('renderDiagram'); |
There was a problem hiding this comment.
这行 console.log 看起来是用于调试的，建议在合并前移除，以保持生产代码的整洁。
| while (performance.now() < waitUntil) { | ||
| // busy wait 来模拟真实渲染时间 | ||
| } |
There was a problem hiding this comment.
在性能测试中使用 while 循环进行忙等待（busy-wait）来模拟渲染延迟会阻塞浏览器的主线程，导致 UI 卡顿，这可能会影响测试页面的用户体验。虽然这是一个演示，但最好避免使用这种模式。
建议使用异步方式实现非阻塞的延迟，例如：
const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
// 在 runPerformanceTest 中
// ...
const actualDelay = ...;
await sleep(actualDelay);
// ...这需要将 runPerformanceTest 函数以及内部的循环改为 async。这样既能模拟耗时操作，又不会冻结页面。
Bundle ReportBundle size has no change ✅ |
size-limit report 📦
|
中文版模板 / Chinese template
🤔 This is a ...
🔗 Related Issues
💡 Background and Solution
📝 Change Log
Summary by CodeRabbit