feat(plugin-md-power)!: use # as the comment delimiter (#870)

docs/en/guide/markdown/file-tree.md

@@ -3,6 +3,9 @@ title: File Tree
 createTime: 2025/10/08 14:41:57
 icon: mdi:file-tree
 permalink: /en/guide/markdown/file-tree/
+badge:
+  text: Change
+  type: warning
 ---
 
 ## Overview
@@ -18,7 +21,7 @@ displayed, simply add a slash `/` at the end of the list item.
 The following syntax can be used to customize the appearance of the file tree:
 
 - Emphasize file or directory names by making them bold, e.g., `**README.md**`
-- Add comments to files or directories by adding additional text after the name
+- Add comments to files or directories by appending a comment starting with `#` after the name, for example, `README.md This is a README file`
 - Mark files or directories as **added** or **deleted** by prefixing the name with `++` or `--`
 - Use `...` or `…` as the name to add placeholder files and directories.
 - Add `icon="simple"` or `icon="colored"` after `:::file-tree` to switch to simple icons or colored icons. The default is colored icons.
@@ -34,7 +37,7 @@ The following syntax can be used to customize the appearance of the file tree:
     - ++ config.ts
   - -- page1.md
   - README.md
-- theme  A **theme** directory
+- theme  # A **theme** directory
   - client
     - components
       - **Navbar.vue**
@@ -61,7 +64,7 @@ The following syntax can be used to customize the appearance of the file tree:
     - ++ config.ts
   - -- page1.md
   - README.md
-- theme  A **theme** directory
+- theme  # A **theme** directory
   - client
     - components
       - **Navbar.vue**

docs/en/guide/quick-start/collection.md

@@ -28,10 +28,10 @@ A typical VuePress static site has the following file structure:
 :::file-tree
 
 - my-site
-  - docs \# Source directory
+  - docs # Source directory
     - .vuepress/
     - …
-    - README.md \# Homepage
+    - README.md # Homepage
   - package.json
 
 :::

docs/en/guide/quick-start/project-structure.md

@@ -13,22 +13,22 @@ For projects created via the [command-line tool](./usage.md#command-line-install
 ::: file-tree
 
 - .git/
-- **docs** \# Documentation source directory
+- **docs**              # Documentation source directory
-  - .vuepress  \# VuePress configuration directory
+  - .vuepress/          # VuePress configuration directory
-    - public/ \# Static assets
+    - public/           # Static assets
-    - client.ts \# Client configuration (optional)
+    - client.ts         # Client configuration (optional)
-    - collections.ts \# Collections configuration (optional)
+    - collections.ts    # Collections configuration (optional)
-    - config.ts \# VuePress main configuration
+    - config.ts         # VuePress main configuration
-    - navbar.ts \# Navbar configuration (optional)
+    - navbar.ts         # Navbar configuration (optional)
-    - plume.config.ts \# Theme configuration file (optional)
+    - plume.config.ts   # Theme configuration file (optional)
-  - demo \# `doc` type collection
+  - demo                 # `doc` type collection
     - foo.md
     - bar.md
-  - blog \# `post` type collection
+  - blog                 # `post` type collection
-    - preview \# Blog category
+    - preview            # Blog category
-      - markdown.md \# Category article
+      - markdown.md      # Category article
-    - article.md \# Blog article
+    - article.md         # Blog article
-  - README.md \# Site homepage
+  - README.md            # Site homepage
   - …
 - package.json
 - pnpm-lock.yaml

docs/en/guide/quick-start/sidebar.md

@@ -33,7 +33,7 @@ A typical project structure might look like:
   - rust           # Rust Programming Notes
     - tuple.md
     - struct.md
-  - README.md        # Site Homepage
+  - README.md      # Site Homepage
 :::
 
 ### Configuration via `sidebar`

docs/en/guide/quick-start/write.md

@@ -139,14 +139,14 @@ The numeric part serves as the **sorting basis**. Directories without numbers ar
 ::: file-tree
 
 - docs
-  - blog \# post type collection
+  - blog  # post type collection
     - 1.Frontend
       - 1.html/
       - 2.css/
       - 3.javascript/
     - 2.Backend/
     - DevOps/
-  - typescript \# doc type collection
+  - typescript  # doc type collection
     - 1.Basics
       - 1.Variables.md
       - 2.Types.md

docs/guide/markdown/file-tree.md

@@ -3,6 +3,9 @@ title: 文件树
 createTime: 2024/09/30 14:41:57
 icon: mdi:file-tree
 permalink: /guide/markdown/file-tree/
+badge:
+  text: 变更
+  type: warning
 ---
 
 ## 概述
@@ -17,12 +20,19 @@ permalink: /guide/markdown/file-tree/
 以下语法可用于自定义文件树的外观：
 
 - 通过加粗文件名或目录名来突出显示，例如 `**README.md**`
-- 通过在名称后添加更多文本来为文件或目录添加注释
+- 通过在名称后添加以 `#` 开头的注释来为文件或目录添加注释，例如 `README.md # 这是一个 README 文件`
 - 通过在名称前添加 `++` 或 `--` 来标记文件或目录为 **新增** 或 **删除**
 - 使用 `...` 或 `…` 作为名称来添加占位符文件和目录。
 - 在 `:::file-tree` 后添加 `icon="simple"` 或 添加 `icon="colored"` 可以切换为简单图标或彩色图标，默认为彩色图标。
 - 在 `:::file-tree` 后添加 `title="xxxx"` 可以为文件树添加标题。
 
+::: important `rc.193` 主题更新说明
+过去 `file-tree` 使用 **空格** 来区分文件名和注释，这在某些情况下会导致问题，例如文件名中包含空格时。
+为了解决这个问题，我们引入了 **# 号注释** 语法，您可以在文件名后添加以 `#` 开头的注释，例如 `README.md # 这是一个 README 文件`。
+
+**此修改为 ==破坏性更新=={.danger} 更新。**
+:::
+
 **输入：**
 
 ```md /++/ /--/
@@ -33,7 +43,7 @@ permalink: /guide/markdown/file-tree/
     - ++ config.ts
   - -- page1.md
   - README.md
-- theme  一个 **主题** 目录
+- theme  # 一个 **主题** 目录
   - client
     - components
       - **Navbar.vue**
@@ -60,7 +70,7 @@ permalink: /guide/markdown/file-tree/
     - ++ config.ts
   - -- page1.md
   - README.md
-- theme  一个 **主题** 目录
+- theme  # 一个 **主题** 目录
   - client
     - components
       - **Navbar.vue**

docs/guide/quick-start/collection.md

@@ -27,10 +27,10 @@ permalink: /guide/collection/
 :::file-tree
 
 - my-site
-  - docs \# 源目录
+  - docs # 源目录
     - .vuepress/
     - …
-    - README.md \# 首页
+    - README.md # 首页
   - package.json
 
 :::

docs/guide/quick-start/project-structure.md

@@ -12,22 +12,22 @@ permalink: /guide/project-structure/
 ::: file-tree
 
 - .git/
-- **docs** \# 文档源目录
+- **docs**               # 文档源目录
-  - .vuepress  \# VuePress 配置目录
+  - .vuepress/           # VuePress 配置目录
-    - public/ \# 静态资源
+    - public/            # 静态资源
-    - client.ts \# 客户端配置（可选）
+    - client.ts          # 客户端配置（可选）
-    - collections.ts \# Collections 配置（可选）
+    - collections.ts     # Collections 配置（可选）
-    - config.ts \# VuePress 主配置
+    - config.ts          # VuePress 主配置
-    - navbar.ts \# 导航栏配置（可选）
+    - navbar.ts          # 导航栏配置（可选）
-    - plume.config.ts \# 主题配置文件（可选）
+    - plume.config.ts    # 主题配置文件（可选）
-  - demo \# `doc` 类型 collection
+  - demo                 # `doc` 类型 collection
     - foo.md
     - bar.md
-  - blog \# `post` 类型 collection
+  - blog                 # `post` 类型 collection
-    - preview \# 博客分类
+    - preview            # 博客分类
-      - markdown.md \# 分类文章
+      - markdown.md      # 分类文章
-    - article.md \# 博客文章
+    - article.md         # 博客文章
-  - README.md \# 站点首页
+  - README.md            # 站点首页
   - …
 - package.json
 - pnpm-lock.yaml

docs/guide/quick-start/sidebar.md

@@ -33,7 +33,7 @@ tags:
   - rust           # Rust 编程笔记
     - tuple.md
     - struct.md
-  - README.md        # 站点首页
+  - README.md      # 站点首页
 :::
 
 ### 通过`sidebar` 配置

docs/guide/quick-start/write.md

@@ -130,14 +130,14 @@ const dir = /\d+\.[\s\S]+/
 ::: file-tree
 
 - docs
-  - blog \# post 类型 collection
+  - blog  # post 类型 collection
     - 1.前端
       - 1.html/
       - 2.css/
       - 3.javascript/
     - 2.后端/
     - 运维/
-  - typescript \# doc 类型 collection
+  - typescript  # doc 类型 collection
     - 1.基础
       - 1.变量.md
       - 2.类型.md

plugins/plugin-md-power/__test__/fileTreePlugin.spec.ts

@@ -72,7 +72,7 @@ describe('fileTreePlugin', () => {
   - client
     - components
       - **Navbar.vue**
-    - index.ts \# comment
+    - index.ts # comment
   - node
     - index.ts
 - .gitignore

plugins/plugin-md-power/src/node/container/fileTree.ts

@@ -119,9 +119,9 @@ export function parseFileTreeNodeInfo(info: string): FileTreeNodeProps {
 
   // Extract filename and comment
   if (filename === '' && !focus) {
-    const spaceIndex = info.indexOf(' ')
+    const sharpIndex = info.indexOf('#')
-    filename = info.slice(0, spaceIndex === -1 ? info.length : spaceIndex)
+    filename = info.slice(0, sharpIndex === -1 ? info.length : sharpIndex).trim()
-    info = spaceIndex === -1 ? '' : info.slice(spaceIndex)
+    info = sharpIndex === -1 ? '' : info.slice(sharpIndex)
   }
 
   comment = info.trim()