Modify stdf file structure to reduce NPM volume

doc/components/icon/guide.md

@@ -39,9 +39,9 @@ STDF 部分组件内使用的图标源自 [Remix Icon 图标库](https://remixic
 | ri-error-warning-line         | Toast            |
 | ri-information-line           | Toast            |
 
-可到 `node_modules/stdf/assets/fonts/stdf.remixicon.symbol.svg` 查看由这些图标组成的 SVG Sprites。
+可到 `node_modules/stdf/dist/assets/fonts/stdf.remixicon.symbol.svg` 查看由这些图标组成的 SVG Sprites。
 
-可到 `node_modules/stdf/assets/svg_base/` 查看这些图标的 SVG 源文件。
+可到 `node_modules/stdf/dist/assets/svg_base/` 查看这些图标的 SVG 源文件。
 
 目前前端打包工具无论是 Webpack 还是 Vite 或者 Rollup 都有对应的 SVG Sprites 合成插件，请自行选择或手动合成。
 

doc/components/icon/guide_en.md

@@ -39,9 +39,9 @@ Usage is as follows:
 | ri-error-warning-line         | Toast            |
 | ri-information-line           | Toast            |
 
-You can go to the `node_modules/stdf/assets/fonts/stdf.remixicon.symbol.svg` to view the SVG Sprites composed of these icons.
+You can go to the `node_modules/stdf/dist/assets/fonts/stdf.remixicon.symbol.svg` to view the SVG Sprites composed of these icons.
 
-You can go to the `node_modules/stdf/assets/svg_base/` to view svg source file of these icons.
+You can go to the `node_modules/stdf/dist/assets/svg_base/` to view svg source file of these icons.
 
 Currently, whether it is Webpack, Vite, or Rollup for front-end packaging tools, there are corresponding SVG Sprite synthesis plugins. You can choose one or combine it manually.
 

doc/guide/changelog.md

@@ -1,3 +1,8 @@
+## 0.2.4
+
+- 0.2.2 ~ 0.0.4 优化文件结构，精简 NPM 包体积。抵制 `node_modules` 体积膨胀和依赖黑洞，从我做起！
+- 多语言引入路径由 `stdf/lang/xx_XX` 改为 `stdf/dist/lang/xx_XX`，详见 [国际化](https://stdf.design/#/guide?nav=internation)。
+
 ## 0.2.1
 
 -  新增了 `create-stdf`，可以快速创建使用 STDF 的工程。（beta 版本，可能存在问题）

doc/guide/changelog_en.md

@@ -1,3 +1,8 @@
+## 0.2.4
+
+- 0.2.2 ~ 0.0.4 Optimized file structure and reduced NPM package size. Say no to bloated `node_modules` and dependency black holes!
+- Updated the language import path from `stdf/lang/xx_XX` to `stdf/dist/lang/xx_XX`. For more details, please refer to the [Internation](https://stdf.design/#/guide?nav=internation).
+
 ## 0.2.1
 
 -   Added `create-stdf` to quickly create a project using STDF. (beta version, may have issues)

doc/guide/internation.md

@@ -6,7 +6,7 @@ STDF 组件使用 Svelte 的 [Context](https://svelte.dev/docs#run-time-svelte-s
 <!-- App.svelte -->
 <script>
     import { setContext } from 'svelte'; // 引入 setContext
-    import en_US from 'stdf/lang/en_US'; // 导入语言文件
+    import en_US from 'stdf/dist/lang/en_US'; // 导入语言文件
 
     setContext('STDF_lang', en_US); // 设置语言
 </script>
@@ -91,7 +91,7 @@ STDF 组件使用 Svelte 的 [Context](https://svelte.dev/docs#run-time-svelte-s
 
 ## 增加语言包
 
-如果找不到你需要的语言包，欢迎你在 [中文语言包](https://github.com/dufu1991/stdf/blob/main/components/lang/zh_CN.js) 或 [英文语言包](https://github.com/dufu1991/stdf/blob/main/components/lang/en_US.js) 的基础上创建一个新的语言包，并发一个 Pull Request。[语言对照表](http://www.lingoes.net/en/translator/langcode.htm)
+如果找不到你需要的语言包，欢迎你在 [中文语言包](https://github.com/dufu1991/stdf/blob/main/packages/stdf/lang/zh_CN.js) 或 [英文语言包](https://github.com/dufu1991/stdf/blob/main/packages/stdf/lang/en_US.js) 的基础上创建一个新的语言包，并发一个 Pull Request。[语言对照表](http://www.lingoes.net/en/translator/langcode.htm)
 
 基本步骤如下：
 

doc/guide/internation_en.md

@@ -6,7 +6,7 @@ The STDF component uses Svelte's [Context](https://svelte.dev/docs#run-time-svel
 <!-- App.svelte -->
 <script>
     import { setContext } from 'svelte'; // import setContext
-    import en_US from 'stdf/lang/en_US'; // import language file
+    import en_US from 'stdf/dist/lang/en_US'; // import language file
 
     setContext('STDF_lang', en_US); // set language
 </script>
@@ -91,7 +91,7 @@ The multilingual files are translated by machine. If there are any inaccuracies,
 
 ## Adding a Language Pack
 
-If you cannot find the language pack you need, you are welcome to create a new language pack based on the [Chinese language pack](https://github.com/dufu1991/stdf/blob/main/components/lang/zh_CN.js) or [English language pack](https://github.com/dufu1991/stdf/blob/main/components/lang/en_US.js) and submit it as a Pull Request. [Language code table](http://www.lingoes.net/en/translator/langcode.htm)
+If you cannot find the language pack you need, you are welcome to create a new language pack based on the [Chinese language pack](https://github.com/dufu1991/stdf/blob/main/packages/stdf/lang/zh_CN.js) or [English language pack](https://github.com/dufu1991/stdf/blob/main/packages/stdf/lang/en_US.js) and submit it as a Pull Request. [Language code table](http://www.lingoes.net/en/translator/langcode.htm)
 
 The basic steps are as follows:
 

doc/guide/quickStart.md

@@ -58,7 +58,7 @@ npm install -D tailwindcss postcss autoprefixer
 npx tailwindcss init -p
 ```
 
-2. 在 `tailwind.config.js` 文件内添加模板文件。注意 content 内添加`./node_modules/stdf/src/**/*.svelte`，这是 STDF 的组件位置。其中 theme 的 colors 可以根据自己的需要进行修改。可参考 [STDF 指南 - 色彩](/#/guide?nav=color)。
+2. 在 `tailwind.config.js` 文件内添加模板文件。注意 content 内添加`./node_modules/stdf/dist/**/*.svelte`，这是 STDF 的组件位置。其中 theme 的 colors 可以根据自己的需要进行修改。可参考 [STDF 指南 - 色彩](/#/guide?nav=color)。
 
 注意：Tailwind 配置文件中的 content 即表示所有可能用到 Tailwind 的文件，请不要遗漏。darkMode 请设置为 'class'，这是为了配合 STDF 的暗黑模式。
 
@@ -66,7 +66,7 @@ npx tailwindcss init -p
 /** @type {import('tailwindcss').Config} */
 module.exports = {
     // ...
-    content: ['./index.html', './src/**/*.svelte', './node_modules/stdf/src/**/*.svelte'],
+    content: ['./index.html', './src/**/*.svelte', './node_modules/stdf/dist/**/*.svelte'],
     theme: {
         colors: {
             // 主题色

doc/guide/quickStart_en.md

@@ -58,7 +58,7 @@ npm install -D tailwindcss postcss autoprefixer
 npx tailwindcss init -p
 ```
 
-2. Add a template file within the `tailwind.config.js` file. Note that `./node_modules/stdf/src/**/*.svelte` is added in content, which is the component location of STDF.The colors of theme can be modified according to its own needs. Reference [STDF Guide - Color](/#/Guide?nav=color).
+2. Add a template file within the `tailwind.config.js` file. Note that `./node_modules/stdf/dist/**/*.svelte` is added in content, which is the component location of STDF.The colors of theme can be modified according to its own needs. Reference [STDF Guide - Color](/#/Guide?nav=color).
 
 Note: The 'content' in the Tailwind configuration file represents all files that may use Tailwind, please do not omit any files. Please set darkMode to 'class' to match STDF's dark mode.
 
@@ -66,7 +66,7 @@ Note: The 'content' in the Tailwind configuration file represents all files that
 /** @type {import('tailwindcss').Config} */
 module.exports = {
     // ...
-    content: ['./index.html', './src/**/*.svelte', './node_modules/stdf/src/**/*.svelte'],
+    content: ['./index.html', './src/**/*.svelte', './node_modules/stdf/dist/**/*.svelte'],
     theme: {
         colors: {
             // Theme Color

packages/stdf/package.json

@@ -1,6 +1,6 @@
 {
     "name": "stdf",
-    "version": "0.2.3",
+    "version": "0.2.4",
     "description": "Mobile web component library based on Svelte and Tailwind",
     "main": "dist/components/index.js",
     "scripts": {