Optimize demo and doc

demo/src/App.svelte

@@ -51,7 +51,7 @@
     };
 </script>
 
-<main class="bg-gray9 dark:bg-gray5 text-black dark:text-white/90 relative min-h-screen text-justify w-screen antialiased">
+<main class="bg-gray9 dark:bg-gray3 text-black dark:text-white/90 relative min-h-screen text-justify w-screen antialiased">
     <div class="sticky z-10 top-0">
         <NavBar
             left={showLeft ? 'back' : ''}

demo/tailwind.config.cjs

@@ -1,17 +1,32 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-    content: ['./src/**/*.{html,js,svelte}', './node_modules/stdf/src/**/*.svelte', '../components/**/*.svelte'],
+    content: ['./src/**/*.{html,js,svelte}','./src/App.svelte', './node_modules/stdf/src/**/*.svelte', '../components/**/*.svelte'],
     theme: {
         colors: {
-            blue: '#0B24FB',
-            yellow: '#FFC043',
+            // 主题色
+            // Theme Color
             primary: '#0B24FB',
             dark: '#FFC043',
+            blue: '#0B24FB', // primary 别名 alias
+            yellow: '#FFC043', // dark 别名 alias
+
+            // 扩展色
+            // Extended Color
             purple: '#7356BF',
             green: '#05944F',
             orange: '#FF6937',
-            primaryBlack: '#09101D',
+
+            // 功能色
+            // Functional Color
+            success: '#11BB8D',
+            warning: '#B95000',
+            error: '#DA1414',
+            info: '#2E5AAC',
+
+            // 中性色
+            // Neutral Color
             black: '#000000',
+            white: '#fff',
             gray1: '#23262B',
             gray2: '#2A2B2F',
             gray3: '#303239',
@@ -22,19 +37,9 @@ module.exports = {
             gray8: '#EBEEF2',
             gray9: '#F4F6F9',
             gray10: '#FAFAFB',
-            success: '#11BB8D',
-            warning: '#B95000',
-            error: '#DA1414',
-            info: '#2E5AAC',
             transparent: 'transparent',
         },
         extend: {
-            colors: {
-                white: '#fff',
-                primaryBlack: '#09101D',
-                black: '#000000',
-                yellow: '#FFC043',
-            },
             keyframes: {
                 wiggle: {
                     '0%, 100%': { transform: 'rotate(-3deg)' },

doc/guide/future.md

@@ -1,8 +1,8 @@
 ## 💪 新增 💪
 
-- [ ] 开发支持 VS Code 与 WebStorm 的插件，支持光标悬浮显示组件 API 等功能。
-- [ ] 一步步完成 Figma 设计稿，并按照 Figma 的 Variable 规则实现与组件 API 的连通。
-- [ ] 开发脚手架工具，支持按照配置初始使用 STDF 的工程，初步考虑支持 Vite、Webpack、SvelteKit 等。
+- [ ] 开发一款 Vite 插件，支持将指定目录下的所有 svg 合并为 SVG symbol。
+- [ ] 开发一款 VS Code 插件，支持光标悬浮显示 STDF 组件 API 等功能。
+- [ ] 开发一款模板脚手架，支持按照配置初始使用 STDF 的工程，初步考虑支持 Vite、SvelteKit。
 - [ ] 按照 Tailwind CSS 变量规则，实现自定义主题色。
 - [ ] 新增 NumKeyboard-数字键盘组件，一般用于输入数字。
 - [ ] 新增 SecurityCode-安全码组件，一般用于输入短信或邮件收到的数字校验码。
@@ -12,7 +12,7 @@
 
 ## 👏 优化 👏
 
-- [ ] 按照 JSDoc 规则完善源码注释，对 Props 进行约束，也方便 IDE 提示。
+- [ ] 按照 JSDoc 规则完善源码类型注释，对 Props 进行约束，也方便 IDE 提示。
 - [ ] Skeleton 骨架屏组件增加更多的动画效果。
 
 ---
@@ -20,3 +20,4 @@
 ## 💪 持续 💪
 
 - 丰富 Loading 加载组件类型。
+- 完成 Figma 设计稿，并按照 Figma 的 Variable 规则实现与组件 API 的连通。

doc/guide/future_en.md

@@ -1,22 +1,23 @@
 ## 💪 New Features 💪
 
-- [ ] Develop plugins that support VS Code and WebStorm, allowing for features such as displaying component APIs when hovering over the cursor.
-- [ ] Complete the Figma design step by step and connect it with component APIs according to Figma's Variable rules.
-- [ ] Develop scaffolding tools that support setting up projects use STDF according to configuration. Initial considerations include support for Vite, Webpack, SvelteKit, and other tools.
-- [ ] Implement custom theme colors according to the Tailwind CSS variable rules.
-- [ ] Added NumKeyboard component for inputting numbers.
-- [ ] Added SecurityCode component for entering verification codes received via SMS or email.
+- [ ] Develop a Vite plugin that supports merging all SVGs in a specified directory into an SVG symbol.
+- [ ] Develop a VS Code plugin that supports displaying STDF component API and other functions when hovering over the cursor.
+- [ ] Develop a template scaffold that supports initializing STDF projects according to configuration. Initial support for Vite and SvelteKit.
+- [ ] Implement custom theme colors according to Tailwind CSS variable rules.
+- [ ] Add NumKeyboard component, which is generally used for entering numbers.
+- [ ] Add SecurityCode component, which is generally used for entering numeric verification codes received via SMS or email.
 - [x] Added Pagination component.
 
 ---
 
 ## 👏 Improvements 👏
 
-- [ ] Improved source code comments according to JSDoc rules, added constraints on Props, and made it easier for IDEs to provide suggestions.
+- [ ] Improve source code type annotations according to JSDoc rules, constrain Props, and facilitate IDE prompts.
 - [ ] Increased the number of animation effects in the Skeleton screen component.
 
 ---
 
 ## 💪 Ongoing Development 💪
 
-- [ ] Expand the types of Loading components available.
+- Expand the types of Loading components available.
+- Complete the Figma design draft and implement connectivity with component API according to Figma's Variable rules.

doc/guide/quickStart.md

@@ -7,9 +7,9 @@
 已有配置好 Svelte 与 Tailwind 的工程，直接安装。
 
 ```bash
-npm i stdf -D
-# or
 pnpm i stdf -D
+# or
+npm i stdf -D
 ```
 
 ### 在 Svelte 中使用
@@ -48,19 +48,35 @@ npx tailwindcss init -p
 
 2. 在 `tailwind.config.js` 文件内添加模板文件。注意 content 内添加`./node_modules/stdf/src/**/*.svelte`，这是 STDF 的组件位置。其中 theme 的 colors 可以根据自己的需要进行修改。可参考 [STDF 指南 - 色彩](/#/guide?nav=color)。
 
+注意：Tailwind 配置文件中的 content 即表示所有可能用到 Tailwind 的文件，请不要遗漏。darkMode 请设置为 'class'，这是为了配合 STDF 的暗黑模式。
+
 ```javascript
 /** @type {import('tailwindcss').Config} */
 module.exports = {
     // ...
-    content: ['./index.html', './src/**/*.{html,js,svelte}', './node_modules/stdf/src/**/*.svelte'],
+    content: ['./src/**/*.{html,js,svelte}', './src/App.svelte', './node_modules/stdf/src/**/*.svelte'],
     theme: {
         colors: {
+            // 主题色
             primary: '#0B24FB',
             dark: '#FFC043',
+            blue: '#0B24FB', // primary 别名
+            yellow: '#FFC043', // dark 别名
+
+            // 扩展色
             purple: '#7356BF',
             green: '#05944F',
             orange: '#FF6937',
+
+            // 功能色
+            success: '#11BB8D',
+            warning: '#B95000',
+            error: '#DA1414',
+            info: '#2E5AAC',
+
+            // 中性色
             black: '#000000',
+            white: '#fff',
             gray1: '#23262B',
             gray2: '#2A2B2F',
             gray3: '#303239',
@@ -71,10 +87,6 @@ module.exports = {
             gray8: '#EBEEF2',
             gray9: '#F4F6F9',
             gray10: '#FAFAFB',
-            success: '#11BB8D',
-            warning: '#B95000',
-            error: '#DA1414',
-            info: '#2E5AAC',
             transparent: 'transparent',
         },
     },

doc/guide/quickStart_en.md

@@ -7,9 +7,9 @@
 Svelte and Tailwind have been configured for direct installation.
 
 ```bash
-npm i stdf -D
-# or
 pnpm i stdf -D
+# or
+npm i stdf -D
 ```
 
 ### Used in Svelte
@@ -48,19 +48,35 @@ 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).
 
+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.
+
 ```javascript
 /** @type {import('tailwindcss').Config} */
 module.exports = {
     // ...
-    content: ['./index.html', './src/**/*.{html,js,svelte}', './node_modules/stdf/src/**/*.svelte'],
+    content: ['./src/**/*.{html,js,svelte}', './src/App.svelte', './node_modules/stdf/src/**/*.svelte'],
     theme: {
         colors: {
+            // Theme Color
             primary: '#0B24FB',
             dark: '#FFC043',
+            blue: '#0B24FB', // primary alias
+            yellow: '#FFC043', // dark alias
+
+            // Extended Color
             purple: '#7356BF',
             green: '#05944F',
             orange: '#FF6937',
+
+            // Functional Color
+            success: '#11BB8D',
+            warning: '#B95000',
+            error: '#DA1414',
+            info: '#2E5AAC',
+
+            // Neutral Color
             black: '#000000',
+            white: '#fff',
             gray1: '#23262B',
             gray2: '#2A2B2F',
             gray3: '#303239',
@@ -71,10 +87,6 @@ module.exports = {
             gray8: '#EBEEF2',
             gray9: '#F4F6F9',
             gray10: '#FAFAFB',
-            success: '#11BB8D',
-            warning: '#B95000',
-            error: '#DA1414',
-            info: '#2E5AAC',
             transparent: 'transparent',
         },
     },