Переглянути джерело

[doc]修改 md 和 icon 插件。

dufu1991 7 місяців тому
батько
коміт
30b00db537
32 змінених файлів з 385 додано та 70 видалено
  1. 2 8
      .github/workflows/releases-site.yml
  2. 3 3
      docs/mds/components/feedback/api.md
  3. 3 3
      docs/mds/components/feedback/api_en.md
  4. 3 3
      docs/mds/guide/feedback.md
  5. 3 3
      docs/mds/guide/feedback_en.md
  6. 92 0
      docs/mds/guide/iconPlugin.md
  7. 92 0
      docs/mds/guide/iconPlugin_en.md
  8. 85 0
      docs/mds/guide/mdPlugin.md
  9. 83 0
      docs/mds/guide/mdPlugin_en.md
  10. 5 5
      docs/site/package.json
  11. 5 15
      docs/site/src/routes/guide/+layout.svelte
  12. 0 1
      docs/site/src/routes/guide/+page.svelte
  13. 0 1
      docs/site/src/routes/guide/Create.svelte
  14. 0 1
      docs/site/src/routes/guide/about/+page.svelte
  15. 0 1
      docs/site/src/routes/guide/changelog/+page.svelte
  16. 0 1
      docs/site/src/routes/guide/compatibility/+page.svelte
  17. 0 1
      docs/site/src/routes/guide/contribution/+page.svelte
  18. 2 3
      docs/site/src/routes/guide/create/+page.svelte
  19. 0 1
      docs/site/src/routes/guide/faq/+page.svelte
  20. 0 1
      docs/site/src/routes/guide/feedback/+page.svelte
  21. 0 1
      docs/site/src/routes/guide/future/+page.svelte
  22. 0 2
      docs/site/src/routes/guide/generator/+page.svelte
  23. 2 3
      docs/site/src/routes/guide/icon-plugin/+page.svelte
  24. 0 1
      docs/site/src/routes/guide/icon/+page.svelte
  25. 0 1
      docs/site/src/routes/guide/internation/+page.svelte
  26. 2 3
      docs/site/src/routes/guide/md/+page.svelte
  27. 0 1
      docs/site/src/routes/guide/milestone/+page.svelte
  28. 0 1
      docs/site/src/routes/guide/theme/+page.svelte
  29. 0 1
      docs/site/src/routes/guide/upgrade/+page.svelte
  30. 0 1
      docs/site/src/routes/guide/utils/+page.svelte
  31. 0 1
      docs/site/src/routes/guide/vscode/+page.svelte
  32. 3 3
      docs/site/vite.config.ts

+ 2 - 8
.github/workflows/releases-site.yml

@@ -38,17 +38,11 @@ jobs:
               with:
                   bun-version: 'latest'
 
-            - name: Build rollup-plugin-stdf-icon & stdf & rollup-plugin-md-ts
+            - name: Build STDF
               run: |
-                  cd packages/rollup-plugin-stdf-icon
-                  bun i
-                  bun run build
-                  cd ../stdf
+                  cd packages/stdf
                   bun i
                   bun run package
-                  cd ../rollup-plugin-md-ts
-                  bun i
-                  bun run build
                   cd ../../
 
             - name: Install dependencies and build

+ 3 - 3
docs/mds/components/feedback/api.md

@@ -1,16 +1,16 @@
 ## 初始化
 
-在使用函数式 API 之前,需要在应用根布局中添加 `FeedbackContainer` 组件:
+在使用函数式 API 之前,需要在应用根布局中添加 `Feedback` 组件:
 
 ```svelte
 <!-- +layout.svelte -->
 <script>
-    import { FeedbackContainer } from 'stdf';
+    import { Feedback } from 'stdf';
     let { children } = $props();
 </script>
 
 {@render children()}
-<FeedbackContainer />
+<Feedback />
 ```
 
 ## toast 函数

+ 3 - 3
docs/mds/components/feedback/api_en.md

@@ -1,16 +1,16 @@
 ## Initialization
 
-Before using the functional API, add the `FeedbackContainer` component to your app's root layout:
+Before using the functional API, add the `Feedback` component to your app's root layout:
 
 ```svelte
 <!-- +layout.svelte -->
 <script>
-    import { FeedbackContainer } from 'stdf';
+    import { Feedback } from 'stdf';
     let { children } = $props();
 </script>
 
 {@render children()}
-<FeedbackContainer />
+<Feedback />
 ```
 
 ## toast Function

+ 3 - 3
docs/mds/guide/feedback.md

@@ -4,17 +4,17 @@ STDF 提供了 5 种反馈组件的函数式调用方式,可以在任意位置
 
 ## 初始化
 
-在使用函数式 API 之前,需要在应用根布局中添加 `FeedbackContainer` 组件:
+在使用函数式 API 之前,需要在应用根布局中添加 `Feedback` 组件:
 
 ```svelte
 <!-- +layout.svelte -->
 <script>
-    import { FeedbackContainer } from 'stdf';
+    import { Feedback } from 'stdf';
     let { children } = $props();
 </script>
 
 {@render children()}
-<FeedbackContainer />
+<Feedback />
 ```
 
 ## Toast 轻提示

+ 3 - 3
docs/mds/guide/feedback_en.md

@@ -4,17 +4,17 @@ STDF provides functional API for 5 feedback components, allowing you to use them
 
 ## Initialization
 
-Before using the functional API, add the `FeedbackContainer` component to your app's root layout:
+Before using the functional API, add the `Feedback` component to your app's root layout:
 
 ```svelte
 <!-- +layout.svelte -->
 <script>
-    import { FeedbackContainer } from 'stdf';
+    import { Feedback } from 'stdf';
     let { children } = $props();
 </script>
 
 {@render children()}
-<FeedbackContainer />
+<Feedback />
 ```
 
 ## Toast

+ 92 - 0
docs/mds/guide/iconPlugin.md

@@ -0,0 +1,92 @@
+[English](./README.md)
+
+[![Public Status](https://github.com/any-tdf/vite-plugin-svg-symbol/actions/workflows/publish-npm.yml/badge.svg)](https://github.com/any-tdf/vite-plugin-svg-symbol/actions/workflows/publish-npm.yml)
+
+[![npm](https://img.shields.io/npm/v/@any-tdf/vite-plugin-svg-symbol?logo=npm&label=icon&style=for-the-badge&color=8cf2be&logoColor=D5FCE3&labelColor=01190C)](https://www.npmjs.com/package/@any-tdf/vite-plugin-svg-symbol)
+
+# 介绍
+
+一个 Vite 插件,将指定文件夹(支持多个)内的所有 SVG 组合为一个 [SVG symbol](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol)。同时支持 Vite 和 Rollup。
+
+如 [STDF](https://stdf.design) 使用。
+
+# 安装
+
+<!-- :::code-groups -->
+<!-- bun -->
+```sh
+bun add @any-tdf/vite-plugin-svg-symbol -D
+```
+<!-- :: -->
+<!-- pnpm -->
+```sh
+pnpm i @any-tdf/vite-plugin-svg-symbol -D
+```
+<!-- :: -->
+<!-- npm -->
+```sh
+npm i @any-tdf/vite-plugin-svg-symbol -D
+```
+<!-- :: -->
+<!-- yarn -->
+```sh
+yarn add @any-tdf/vite-plugin-svg-symbol -D
+```
+<!-- ::: -->
+
+# 使用
+
+在 vite.config.js 或 vite.config.ts 中配置:
+
+```js
+// ...
+import svgSymbol from '@any-tdf/vite-plugin-svg-symbol';
+
+export default defineConfig({
+	// ...
+	plugins: [
+		// ...
+		svgSymbol(),
+		// ...
+	],
+	// ...
+});
+```
+
+在 Rollup 的 rollup.config.js 中也可以使用相同插件配置,插件会在构建阶段执行(不包含 dev 监听)。
+
+开发过程中只需要将用到的 SVG 文件放到指定的入口文件夹(默认 `src/lib/symbol`),插件会自动将其合并为一个 SVG symbol 文件,输出到指定的输出文件夹(默认 `public/fonts`)。Vite 构建之后 public 文件夹下的文件会被复制到 dist 文件夹下,所以在构建之后,合并的 SVG symbol 文件会出现在 `dist/fonts` 文件夹下。请参考 [Vite 配置](https://cn.vitejs.dev/guide/assets.html#the-public-directory)。
+
+> 默认参数使用 `src/lib/symbol` 和 `public/fonts`。如果你使用 SvelteKit 的 `static` 目录或其他结构,请修改 vite.config.js 或 vite.config.ts 中的配置。
+
+一般来说,按照默认配置将 SVG 文件放到入口文件夹即可,无需过多配置。
+
+如果需要修改输入输出文件夹以及合并的文件名,或者同时需要合并多个文件夹,可以在 vite.config.js 或 vite.config.ts 中修改配置:
+
+```javascript
+// ...
+    svgSymbol([
+        { inFile: 'src/lib/svgs', outFile: 'public/fonts', fileName: 'symbol' },
+        { inFile: 'src/lib/icons', outFile: 'public/fonts', fileName: 'icon' },
+    ]),
+// ...
+```
+
+此配置会合并两个 symbol。**此时使用 STDF 的 Icon 组件时,请配合修改 `path` 为对应的 `fonts/symbol.svg` 或 `fonts/icon.svg`。**
+
+注意:**传入参数为数组**,表示多个文件夹的配置。**每个文件夹的配置为一个对象**。对象中的 `inFile` 为将要被合并的 SVG 文件所在的文件夹,`outFile` 为合并后的 SVG symbol 文件的输出路径,`fileName` 为合并后的 SVG symbol 文件的文件名(如果不传则取 `inFile` 的最后一个文件夹名称)。请注意路径与文件名的正确性与冲突。
+
+一般来说,使用 symbol 的场景是将一系列小的单色 SVG 合并为一个 symbol,可以方便项目使用 SVG 时修改颜色、大小、透明度等属性,所以默认配置下 @any-tdf/vite-plugin-svg-symbol 会去除掉 SVG 本身的颜色属性。如果需要使用多色 SVG,合成的 symbol 需要保留 SVG 本身的颜色,只需要将 `simple` 参数设置为 `false`。
+
+# 数组配置
+
+| 参数     | 类型   | 默认             | 描述                                                                           |
+| -------- | ------ | ---------------- | ------------------------------------------------------------------------------ |
+| inFile   | `string` | `'src/lib/symbol'` | 将要被合并的所有 SVG 文件所在的文件夹。                                        |
+| outFile  | `string` | `'public/fonts'`   | 合并后的 SVG symbol 文件的输出路径。                                           |
+| fileName | `string` | `'symbol'`               | 合并后的 SVG symbol 文件的文件名(如果不传则取 `inFile` 的最后一个文件夹名称)。 |
+| simple   | `boolean` | `true`             | 是否使用简单模式,简单模式会将 SVG 自带的颜色去除。                            |
+
+# 许可证
+
+本项目基于 [MIT 许可证](https://github.com/any-tdf/vite-plugin-svg-symbol/blob/main/LICENSE)。

+ 92 - 0
docs/mds/guide/iconPlugin_en.md

@@ -0,0 +1,92 @@
+[简体中文](https://github.com/any-tdf/vite-plugin-svg-symbol/blob/main/README_CN.md)
+
+[![Public Status](https://github.com/any-tdf/vite-plugin-svg-symbol/actions/workflows/publish-npm.yml/badge.svg)](https://github.com/any-tdf/vite-plugin-svg-symbol/actions/workflows/publish-npm.yml)
+
+[![npm](https://img.shields.io/npm/v/@any-tdf/vite-plugin-svg-symbol?logo=npm&label=icon&style=for-the-badge&color=8cf2be&logoColor=D5FCE3&labelColor=01190C)](https://www.npmjs.com/package/@any-tdf/vite-plugin-svg-symbol)
+
+# Introduction
+
+A Vite plugin that combines all SVG files in specified folders (supports multiple) into a single [SVG symbol](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol). It supports both Vite and Rollup.
+
+As used by [STDF](https://stdf.design).
+
+# Installation
+
+<!-- :::code-groups -->
+<!-- bun -->
+```sh
+bun add @any-tdf/vite-plugin-svg-symbol -D
+```
+<!-- :: -->
+<!-- pnpm -->
+```sh
+pnpm i @any-tdf/vite-plugin-svg-symbol -D
+```
+<!-- :: -->
+<!-- npm -->
+```sh
+npm i @any-tdf/vite-plugin-svg-symbol -D
+```
+<!-- :: -->
+<!-- yarn -->
+```sh
+yarn add @any-tdf/vite-plugin-svg-symbol -D
+```
+<!-- ::: -->
+
+# Usage
+
+Configure the plugin in vite.config.js or vite.config.ts:
+
+```js
+// ...
+import svgSymbol from '@any-tdf/vite-plugin-svg-symbol';
+
+export default defineConfig({
+	// ...
+	plugins: [
+		// ...
+		svgSymbol(),
+		// ...
+	],
+	// ...
+});
+```
+
+For Rollup, register the same plugin in rollup.config.js and it will run during build (no dev watcher).
+
+During development, simply place the SVG files you need in the specified input folder (default: `src/lib/symbol`). The plugin will automatically combine them into a single SVG symbol file and output it to the specified output folder (default: `public/fonts`). After building with Vite, the files in the public folder will be copied to the dist folder. Therefore, after building, the combined SVG symbol file will be located in the `dist/fonts` folder. Please refer to the [Vite Asset Handling](https://vitejs.dev/guide/assets.html#the-public-directory) documentation.
+
+> Default parameters use `src/lib/symbol` and `public/fonts`. If you use SvelteKit's `static` directory or another layout, please modify the configuration in vite.config.js or vite.config.ts.
+
+Generally, you can simply place the SVG files in the default input folder without the need for additional configuration.
+
+If you need to modify the input/output folders and the filename of the combined file, or if you need to combine multiple folders, you can customize the configuration in vite.config.js or vite.config.ts:
+
+```javascript
+// ...
+    svgSymbol([
+        { inFile: 'src/lib/svgs', outFile: 'public/fonts', fileName: 'symbol' },
+        { inFile: 'src/lib/icons', outFile: 'public/fonts', fileName: 'icon' },
+    ]),
+// ...
+```
+
+This configuration will combine two symbols. **When using the STDF Icon component, please update `path` to the corresponding `fonts/symbol.svg` or `fonts/icon.svg`**.
+
+Note: **The parameter should be an array** representing the configuration for multiple folders. **Each folder configuration should be an object** with `inFile` as the folder where the SVG files to be combined are located, `outFile` as the output path for the combined SVG symbol file, and `fileName` as the filename of the combined SVG symbol file (if not passed, the last folder name of `inFile` will be used). Please ensure the correctness and avoid conflicts in paths and filenames.
+
+In general, the use of symbols is to combine a series of small, single-color SVG files into one symbol. This allows for easy modification of attributes such as color, size, and opacity when using SVG in a project. Therefore, when default configuring @any-tdf/vite-plugin-svg-symbol, the color attributes of the SVG files themselves are removed. If you need to use multi-color SVG files and want to preserve the colors in the generated symbol, you just need to set the `simple` parameter to `false`.
+
+# Array Configuration
+
+| Parameter | Type   | Default          | Description                                                                                                   |
+| --------- | ------ | ---------------- | ------------------------------------------------------------------------------------------------------------- |
+| inFile    | `string` | `'src/lib/symbol'` | The folder where all the SVG files to be merged are located.                                                  |
+| outFile   | `string` | `'public/fonts'`   | The output path for the merged SVG symbol file.                                                               |
+| fileName  | `string` | `'symbol'`               | The filename of the merged SVG symbol file (if not passed, the last folder name of `inFile` will be used).    |
+| simple    | `boolean` | `true`             | Whether to use the simple mode, the simple mode will remove the color attributes of the SVG files themselves. |
+
+# License
+
+This project is licensed under the [MIT License](https://github.com/any-tdf/vite-plugin-svg-symbol/blob/main/LICENSE).

+ 85 - 0
docs/mds/guide/mdPlugin.md

@@ -0,0 +1,85 @@
+[English](./README.md)
+
+[![Public Status](https://github.com/any-tdf/vite-plugin-md-ts/actions/workflows/publish-npm.yml/badge.svg)](https://github.com/any-tdf/vite-plugin-md-ts/actions/workflows/publish-npm.yml)
+
+[![npm](https://img.shields.io/npm/v/@any-tdf/vite-plugin-md-ts?logo=npm&label=icon&style=for-the-badge&color=8cf2be&logoColor=D5FCE3&labelColor=01190C)](https://www.npmjs.com/package/@any-tdf/vite-plugin-md-ts)
+
+## 介绍
+
+一款 Vite 和 Rollup 插件,功能是将 Markdown 文件转换为 HTML 字符串,基于 [marked](https://github.com/markedjs/marked)。
+
+实现思路参考 [rollup-plugin-md](https://github.com/xiaofuzi/rollup-plugin-md),增加了 TypeScript 支持。
+
+可同时用于 Vite 和 Rollup 的插件配置。
+
+STDF 文档站点 <https://stdf.design> 使用了此插件。
+
+## 参数
+
+| 参数     | 类型 | 默认             | 描述                                                                           |
+| -------- | ---- | ---------------- | ------------------------------------------------------------------------------ |
+| marked   | `MarkedOptions` | `{}`   | [marked](https://github.com/markedjs/marked) 的配置。                       |
+| include  | `string[]`      | `['**/*.md']`      | 要包含的 Markdown 文件路径。                                                 |
+| exclude  | `string[]`      | `[]`               | 要排除的 Markdown 文件路径。                                                 |
+
+其中 include 和 exclude 是相对项目根目录(一般就是 vite.config.js 或 vite.config.ts 所在目录)的相对路径。
+
+## 安装
+
+<!-- :::code-groups -->
+<!-- bun -->
+```sh
+bun add @any-tdf/vite-plugin-md-ts -D
+```
+<!-- :: -->
+<!-- pnpm -->
+```sh
+pnpm i @any-tdf/vite-plugin-md-ts -D
+```
+<!-- :: -->
+<!-- npm -->
+```sh
+npm i @any-tdf/vite-plugin-md-ts -D
+```
+<!-- :: -->
+<!-- yarn -->
+```sh
+yarn add @any-tdf/vite-plugin-md-ts -D
+```
+<!-- ::: -->
+
+## 使用
+
+在 vite.config.js 或 vite.config.ts 中配置:
+
+```javascript
+import md from '@any-tdf/vite-plugin-md-ts';
+
+export default defineConfig({
+    // ...
+	plugins: [
+		// ...
+		md({
+			marked: {},
+			include: [ './src/**/*.md']
+		})
+		// ...
+	],
+	// ...
+});
+```
+
+也可以在 rollup.config.js 或 rollup.config.ts 中使用。
+
+## 为何创建
+
+其实市面上已经有很多能实现类似功能的插件,比如 [vite-plugin-markdown](https://www.npmjs.com/package/vite-plugin-markdown),这些基于 [markdown-it](https://www.npmjs.com/package/markdown-it) 的插件在转换待办事项列表时,并不会转换以下字符,而这个正好是 [STDF](https://stdf.design) 中需要用到的功能。
+
+```md
+- [ ] 待办事项
+- [x] 已完成事项
+```
+
+## 许可证
+
+本项目基于 [MIT 许可证](https://github.com/any-tdf/vite-plugin-md-ts/blob/main/LICENSE)。

+ 83 - 0
docs/mds/guide/mdPlugin_en.md

@@ -0,0 +1,83 @@
+[简体中文](./README_CN.md)
+
+[![Public Status](https://github.com/any-tdf/vite-plugin-md-ts/actions/workflows/publish-npm.yml/badge.svg)](https://github.com/any-tdf/vite-plugin-md-ts/actions/workflows/publish-npm.yml)
+
+[![npm](https://img.shields.io/npm/v/@any-tdf/vite-plugin-md-ts?logo=npm&label=icon&style=for-the-badge&color=8cf2be&logoColor=D5FCE3&labelColor=01190C)](https://www.npmjs.com/package/@any-tdf/vite-plugin-md-ts)
+
+## Introduction
+
+This is a Vite and Rollup plugin that converts Markdown files to HTML strings, based on [marked](https://github.com/markedjs/marked).
+
+The implementation idea is based on [rollup-plugin-md](https://github.com/xiaofuzi/rollup-plugin-md), adding TypeScript support.
+
+The STDF doc site <https://stdf.design> uses this plugin.
+
+## Parameters
+
+| Parameter | Type | Default | Description                                                                           |
+| --------- | ---- | -------- | ------------------------------------------------------------------------------ |
+| marked    | `MarkedOptions` | `{}`   | [marked](https://github.com/markedjs/marked) options.                       |
+| include  | `string[]`      | `['**/*.md']`      | The path of the Markdown file to include.                                                 |
+| exclude  | `string[]`      | `[]`               | The path of the Markdown file to exclude.                                                 |
+
+The `include` and `exclude` parameters are relative to the project root directory (usually the directory where vite.config.js or vite.config.ts is located).
+
+## Installation
+
+<!-- :::code-groups -->
+<!-- bun -->
+```sh
+bun add @any-tdf/vite-plugin-md-ts -D
+```
+<!-- :: -->
+<!-- pnpm -->
+```sh
+pnpm i @any-tdf/vite-plugin-md-ts -D
+```
+<!-- :: -->
+<!-- npm -->
+```sh
+npm i @any-tdf/vite-plugin-md-ts -D
+```
+<!-- :: -->
+<!-- yarn -->
+```sh
+yarn add @any-tdf/vite-plugin-md-ts -D
+```
+<!-- ::: -->
+
+## Usage
+
+Configure in vite.config.js or vite.config.ts:
+
+```javascript
+import md from '@any-tdf/vite-plugin-md-ts';
+
+export default defineConfig({
+    // ...
+	plugins: [
+		// ...
+		md({
+			marked: {},
+			include: [ './src/**/*.md']
+		})
+		// ...
+	],
+	// ...
+});
+```
+
+It also works in rollup.config.js or rollup.config.ts with the same plugin.
+
+## Why Create
+
+There are already many plugins that can implement similar functions, such as [vite-plugin-markdown](https://www.npmjs.com/package/vite-plugin-markdown), which do not convert the following characters when converting to-do lists, which is exactly the function needed in [STDF](https://stdf.design).
+
+```md
+- [ ] TODO
+- [x] DONE
+```
+
+## License
+
+This project is licensed under the [MIT License](https://github.com/any-tdf/vite-plugin-md-ts/blob/main/LICENSE).

+ 5 - 5
docs/site/package.json

@@ -13,9 +13,11 @@
 		"lint": "prettier --check . && eslint ."
 	},
 	"devDependencies": {
+		"@any-tdf/vite-plugin-md-ts": "^0.0.2",
+		"@any-tdf/vite-plugin-svg-symbol": "^0.0.3",
 		"@eslint/compat": "^1.4.1",
 		"@sveltejs/adapter-static": "^3.0.10",
-		"@sveltejs/kit": "^2.50.0",
+		"@sveltejs/kit": "^2.50.1",
 		"@sveltejs/vite-plugin-svelte": "^5.1.1",
 		"@tailwindcss/typography": "^0.5.19",
 		"@tailwindcss/vite": "^4.1.18",
@@ -27,13 +29,11 @@
 		"globals": "^15.15.0",
 		"highlight.js": "^11.11.1",
 		"highlightjs-svelte": "^1.0.6",
-		"prettier": "^3.8.1",
+		"prettier": "3.5.3",
 		"prettier-plugin-svelte": "^3.4.1",
 		"prettier-plugin-tailwindcss": "^0.6.14",
-		"rollup-plugin-md-ts": "file:../../packages/rollup-plugin-md-ts",
-		"rollup-plugin-stdf-icon": "file:../../packages/rollup-plugin-stdf-icon",
 		"stdf": "file:../../packages/stdf",
-		"svelte": "^5.47.1",
+		"svelte": "^5.48.0",
 		"svelte-check": "^4.3.5",
 		"svelte-confetti": "^2.3.2",
 		"tailwindcss": "^4.1.18",

+ 5 - 15
docs/site/src/routes/guide/+layout.svelte

@@ -18,23 +18,13 @@
 			class_en: 'General',
 			childs: [
 				{ title: '快速上手', title_en: 'Quick start', nav: 'quick-start', doc: 'quickStart' },
+				{ title: '更新日志', title_en: 'Changelog', nav: 'changelog', doc: 'changelog' },
 				{ title: '主题配置', title_en: 'Theme', nav: 'theme', doc: 'theme' },
 				{ title: '图标', title_en: 'Icon', nav: 'icon', doc: 'icon' },
 				{ title: '函数式反馈', title_en: 'Functional Feedback', nav: 'feedback', doc: 'feedback' },
-				{
-					title: '国际化',
-					title_en: 'Internationalization',
-					nav: 'internation',
-					doc: 'internation'
-				},
-				{ title: '更新日志', title_en: 'Changelog', nav: 'changelog', doc: 'changelog' },
+				{ title: '国际化', title_en: 'Internationalization', nav: 'internation', doc: 'internation' },
 				{ title: '常见问题', title_en: 'FAQ', nav: 'faq', doc: 'faq' },
-				{
-					title: '贡献指南',
-					title_en: 'Contribution Guide',
-					nav: 'contribution',
-					doc: 'contribution'
-				},
+				{ title: '贡献指南', title_en: 'Contribution Guide', nav: 'contribution', doc: 'contribution' },
 				{ title: '兼容性', title_en: 'Compatibility', nav: 'compatibility', doc: 'compatibility' },
 				{ title: '升级指南', title_en: 'Upgrade Guide', nav: 'upgrade', doc: 'upgrade' }
 			]
@@ -127,7 +117,7 @@
 
 <div class="flex">
 	<div
-		class="z-100 bg-bg-base dark:bg-bg-base-dark fixed -left-52 top-14 w-48 overflow-y-scroll border-black/10 transition-all duration-300 md:left-0 md:bg-transparent dark:border-white/20 dark:md:bg-transparent"
+		class="bg-bg-base dark:bg-bg-base-dark fixed top-14 -left-52 z-100 w-48 overflow-y-scroll border-black/10 transition-all duration-300 md:left-0 md:bg-transparent dark:border-white/20 dark:md:bg-transparent"
 		class:left-0={$isShowNavStore}
 		class:-left-52={!$isShowNavStore}
 		style="height:{menuHeight + 'px'}"
@@ -164,7 +154,7 @@
 </div>
 {#if !page.url.pathname.includes('generator')}
 	<button
-		class="bg-primary shadow-primary/50 dark:bg-dark dark:shadow-dark/50 fixed bottom-4 right-2 z-50 hidden h-8 w-8 cursor-pointer rounded-full p-1.5 text-white shadow-md md:block dark:text-black"
+		class="bg-primary shadow-primary/50 dark:bg-dark dark:shadow-dark/50 fixed right-2 bottom-4 z-50 hidden h-8 w-8 cursor-pointer rounded-full p-1.5 text-white shadow-md md:block dark:text-black"
 		onclick={changeFullFunc}
 	>
 		{#if $isWideScreenStore}

+ 0 - 1
docs/site/src/routes/guide/+page.svelte

@@ -18,6 +18,5 @@
 		? 'max-w-full'
 		: 'max-w-7xl'}"
 >
-	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 	{@html text}
 </article>

+ 0 - 1
docs/site/src/routes/guide/Create.svelte

@@ -18,6 +18,5 @@
 		? 'max-w-full'
 		: 'max-w-5xl'}"
 >
-	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 	{@html text}
 </article>

+ 0 - 1
docs/site/src/routes/guide/about/+page.svelte

@@ -17,6 +17,5 @@
 		? 'max-w-full'
 		: 'max-w-7xl'}"
 >
-	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 	{@html hljsText}
 </article>

+ 0 - 1
docs/site/src/routes/guide/changelog/+page.svelte

@@ -75,6 +75,5 @@
 			? '注:此处仅展示站点更新说明或总体概述,具体组件更新内容请查看组件内部更新日志。描述后面的头像表示此项的提出者或贡献者,感谢他们。发布时间格式均为 GMT+8。'
 			: 'Note: Only the site update instructions or general overview are displayed here. For the specific component update content, please refer to the update log inside the component. The avatars after the description represent the submitter or contributor, thank them for their contribution. The release time format is GMT+8.'}
 	</p>
-	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 	{@html mdTextToHljsFun(hljsText)}
 </article>

+ 0 - 1
docs/site/src/routes/guide/compatibility/+page.svelte

@@ -16,6 +16,5 @@
 		? 'max-w-full'
 		: 'max-w-7xl'}"
 >
-	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 	{@html hljsText}
 </article>

+ 0 - 1
docs/site/src/routes/guide/contribution/+page.svelte

@@ -16,6 +16,5 @@
 		? 'max-w-full'
 		: 'max-w-7xl'}"
 >
-	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 	{@html hljsText}
 </article>

+ 2 - 3
docs/site/src/routes/guide/create/+page.svelte

@@ -3,9 +3,9 @@
 	import { isWideScreenStore } from '../../../store';
 
 	// @ts-ignore
-	import createText from '../../../../../../packages/create-stdf/README_CN.md';
+	import createText from '../../../../../../packages/create/README_CN.md';
 	// @ts-ignore
-	import createText_en from '../../../../../../packages/create-stdf/README.md';
+	import createText_en from '../../../../../../packages/create/README.md';
 
 	const isZh = localStorage.getItem('lang') === 'zh_CN';
 	const text = groupIconMdPlugin(
@@ -18,6 +18,5 @@
 		? 'max-w-full'
 		: 'max-w-7xl'}"
 >
-	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 	{@html text}
 </article>

+ 0 - 1
docs/site/src/routes/guide/faq/+page.svelte

@@ -16,6 +16,5 @@
 		? 'max-w-full'
 		: 'max-w-7xl'}"
 >
-	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 	{@html hljsText}
 </article>

+ 0 - 1
docs/site/src/routes/guide/feedback/+page.svelte

@@ -16,6 +16,5 @@
 		? 'max-w-full'
 		: 'max-w-7xl'}"
 >
-	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 	{@html hljsText}
 </article>

+ 0 - 1
docs/site/src/routes/guide/future/+page.svelte

@@ -16,6 +16,5 @@
 		? 'max-w-full'
 		: 'max-w-7xl'}"
 >
-	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 	{@html hljsText}
 </article>

+ 0 - 2
docs/site/src/routes/guide/generator/+page.svelte

@@ -1879,7 +1879,6 @@ ${extendListStr2}
 						style="height:{windowWidth >= 1280 ? windowHeight - 350 : (windowHeight - 350) / 2}px"
 					>
 						<article class="prose dark:prose-invert max-w-none text-xs">
-							<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 							<pre><code class="hljs language-css" id="myCodeBlock">{@html configStr}</code></pre>
 						</article>
 						<button
@@ -1905,7 +1904,6 @@ ${extendListStr2}
 						style="height:{windowWidth >= 1280 ? windowHeight - 350 : (windowHeight - 350) / 2}px"
 					>
 						<article class="prose dark:prose-invert max-w-none text-xs">
-							<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 							<pre><code class="hljs language-css" id="myCodeBlock2">{@html configStr2}</code></pre>
 						</article>
 						<button

+ 2 - 3
docs/site/src/routes/guide/icon-plugin/+page.svelte

@@ -3,9 +3,9 @@
 	import { isWideScreenStore } from '../../../store';
 
 	// @ts-ignore
-	import iconPluginText from '../../../../../../packages/rollup-plugin-stdf-icon/README_CN.md';
+	import iconPluginText from '../../../../../mds/guide/iconPlugin.md';
 	// @ts-ignore
-	import iconPluginText_en from '../../../../../../packages/rollup-plugin-stdf-icon/README.md';
+	import iconPluginText_en from '../../../../../mds/guide/iconPlugin_en.md';
 
 	const isZh = localStorage.getItem('lang') === 'zh_CN';
 	const text = mdTextToHljs(
@@ -18,6 +18,5 @@
 		? 'max-w-full'
 		: 'max-w-7xl'}"
 >
-	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 	{@html text}
 </article>

+ 0 - 1
docs/site/src/routes/guide/icon/+page.svelte

@@ -16,6 +16,5 @@
 		? 'max-w-full'
 		: 'max-w-7xl'}"
 >
-	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 	{@html hljsText}
 </article>

+ 0 - 1
docs/site/src/routes/guide/internation/+page.svelte

@@ -16,6 +16,5 @@
 		? 'max-w-full'
 		: 'max-w-7xl'}"
 >
-	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 	{@html hljsText}
 </article>

+ 2 - 3
docs/site/src/routes/guide/md/+page.svelte

@@ -3,9 +3,9 @@
 	import { isWideScreenStore } from '../../../store';
 
 	// @ts-ignore
-	import mdPluginText from '../../../../../../packages/rollup-plugin-md-ts/README_CN.md';
+	import mdPluginText from '../../../../../mds/guide/mdPlugin.md';
 	// @ts-ignore
-	import mdPluginText_en from '../../../../../../packages/rollup-plugin-md-ts/README.md';
+	import mdPluginText_en from '../../../../../mds/guide/mdPlugin_en.md';
 
 	const isZh = localStorage.getItem('lang') === 'zh_CN';
 	const text = mdTextToHljs(
@@ -18,6 +18,5 @@
 		? 'max-w-full'
 		: 'max-w-7xl'}"
 >
-	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 	{@html text}
 </article>

+ 0 - 1
docs/site/src/routes/guide/milestone/+page.svelte

@@ -17,6 +17,5 @@
 		? 'max-w-full'
 		: 'max-w-7xl'}"
 >
-	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 	{@html hljsText}
 </article>

+ 0 - 1
docs/site/src/routes/guide/theme/+page.svelte

@@ -16,6 +16,5 @@
 		? 'max-w-full'
 		: 'max-w-7xl'}"
 >
-	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 	{@html text}
 </article>

+ 0 - 1
docs/site/src/routes/guide/upgrade/+page.svelte

@@ -16,6 +16,5 @@
 		? 'max-w-full'
 		: 'max-w-7xl'}"
 >
-	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 	{@html hljsText}
 </article>

+ 0 - 1
docs/site/src/routes/guide/utils/+page.svelte

@@ -16,6 +16,5 @@
 		? 'max-w-full'
 		: 'max-w-7xl'}"
 >
-	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 	{@html text}
 </article>

+ 0 - 1
docs/site/src/routes/guide/vscode/+page.svelte

@@ -16,6 +16,5 @@
 		? 'max-w-full'
 		: 'max-w-7xl'}"
 >
-	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 	{@html hljsText}
 </article>

+ 3 - 3
docs/site/vite.config.ts

@@ -1,15 +1,15 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
 import tailwindcss from '@tailwindcss/vite';
-import md from 'rollup-plugin-md-ts';
-import svgSprite from 'rollup-plugin-stdf-icon';
+import md from '@any-tdf/vite-plugin-md-ts';
+import svgSymbol from '@any-tdf/vite-plugin-svg-symbol';
 
 export default defineConfig({
 	plugins: [
 		sveltekit(),
 		tailwindcss(),
 		md({ marked: {}, include: ['../mds/**/*.md', '../../packages/**/*.md'] }),
-		svgSprite([{ inFile: 'src/lib/symbol', outFile: 'static/fonts', fileName: 'symbol' }])
+		svgSymbol([{ inFile: 'src/lib/symbol', outFile: 'static/fonts', fileName: 'symbol' }])
 	],
 	server: {
 		hmr: true,