優化文檔內容（zh）。

Author: pardnchiu

dist/QuickUI.esm.js

@@ -1,6 +1,6 @@
 {
     "name": "@pardnchiu/quickui",
-    "version": "0.6.16",
+    "version": "0.6.17",
     "description": "QuickUI is a lightweight frontend framework built on pure JavaScript and native APIs. Supports data binding, i18n support, event binding, conditional rendering, and loop rendering.",
     "main": "dist/QuickUI.js",
     "module": "dist/QuickUI.esm.js",

dist/QuickUI.js

@@ -122,7 +122,7 @@ <h4 :else>{{ title }} 4
         <p>{{ UPPER(test1) }} {{ LOWER(test2) }}</p>
         <p>{{ DATE(now, YYYY-MM-DD hh:mm:ss) }}</p>
         <hr>
-        <img :for="e in icons" :lazyload="https://skillicons.dev/icons?i={{e}}">
+        <!-- <img :for="e in icons" :lazyload="https://skillicons.dev/icons?i={{e}}"> -->
         <script>
             document.addEventListener("DOMContentLoaded", () => {
                 let icons = "ableton,activitypub,actix,adonis,ae,aiscript,alpinejs,anaconda,androidstudio,angular,ansible,apollo,apple,appwrite,arch,arduino,astro,atom,au,autocad,aws,azul,azure,babel,bash,bevy,bitbucket,blender,bootstrap,bsd,bun,c,cs,cpp,crystal,cassandra,clion,clojure,cloudflare,cmake,codepen,coffeescript,css,cypress,d3,dart,debian,deno,devto,discord,bots,discordjs,django,docker,dotnet,dynamodb,eclipse,elasticsearch,electron,elixir,elysia,emacs,ember,emotion,express,fastapi,fediverse,figma,firebase,flask,flutter,forth,fortran,gamemakerstudio,gatsby,gcp,git,github,githubactions,gitlab,gmail,gherkin,go,gradle,godot,grafana,graphql,gtk,gulp,haskell,haxe,haxeflixel,heroku,hibernate,html,htmx,idea,ai,instagram,ipfs,java,js,jenkins,jest,jquery,kafka,kali,kotlin,ktor,kubernetes,laravel,latex,less,linkedin,linux,lit,lua,md,mastodon,materialui,matlab,maven,mint,misskey,mongodb,mysql,neovim,nestjs,netlify,nextjs,nginx,nim,nix,nodejs,notion,npm,nuxtjs,obsidian,ocaml,octave,opencv,openshift,openstack,p5js,perl,ps,php,phpstorm,pinia,pkl,plan9,planetscale,pnpm,postgres,postman,powershell,pr,prisma,processing,prometheus,pug,pycharm,py,pytorch,qt,r,rabbitmq,rails,raspberrypi,react,reactivex,redhat,redis,redux,regex,remix,replit,rider,robloxstudio,rocket,rollupjs,ros,ruby,rust,sass,spring,sqlite,stackoverflow,styledcomponents,sublime,supabase,scala,sklearn,selenium,sentry,sequelize,sketchup,solidity,solidjs,svelte,svg,swift,symfony,tailwind,tauri,tensorflow,terraform,threejs,twitter,ts,ubuntu,unity,unreal,v,vala,vercel,vim,visualstudio,vite,vitest,vscode,vscodium,vue,vuetify,wasm,webflow,webpack,webstorm,windicss,windows,wordpress,workers,xd,yarn,yew,zig".split(",");
@@ -237,15 +237,15 @@ <h4 :else>{{ title }} 4
                             alert("good2");
                         },
                         input: _ => {
-                            console.log(app.data)
+                            // console.log(app.data)
                         }
                     },
                     when: {
                         beforeRender: _ => {
-                            console.log("準備渲染");
+                            // console.log("準備渲染");
                             // return false;
                         },
-                        rendered: _ => {
+                        rendered: sec => {
                             // const html = app.parseToHTML(`
                             // div#main-card.primary.highlighted { 
                             //     style: "background: red;", 
@@ -272,15 +272,15 @@ <h4 :else>{{ title }} 4
                                 app.data.obj.home.ary[0].name = "Test"
 
                             }, 2000)
-                            console.log("已渲染")
+                            // console.log("已渲染", sec)
                         },
                         beforeUpdate: _ => {
-                            console.log("準備更新")
+                            // console.log("準備更新")
                             // alert(true)
                             // return false;
                         },
-                        updated: _ => {
-                            console.log("已更新")
+                        updated: sec => {
+                            // console.log("已更新", sec)
                         }
                     }
                 });

package.json

@@ -1,21 +1,56 @@
-## 雙向綁定
+# QuickUI 雙向綁定
+
+> [!NOTE] 
+> 將表單元素與資料模型同步。當使用者與表單元素進行互動時，相應的資料會自動更新，而當資料變更時，相關 UI 元素也會即時反映這些變化。
+
+## 語法
+
+```html
+<input type="text" :model="屬性名稱">
+```
+
+## 範例
+
+展示了密碼輸入框的雙向綁定實現：
 
 ```html
 <body id="app">
     <input type="password" :model="password">
     <button @click="show">test</button>
 </body>
+
 <script>
-    const app = new QUI({
-        id: "app",
-        data: {
-            password: null,
-        },
-        event: {
-            show: function(e){
-                alert("Password:", app.data.password);
-            }
+const app = new QUI({
+    id: "app",
+    data: {
+        password: "",
+    },
+    event: {
+        show: e => {
+            alert("Password: " + app.data.password);
         }
-    });
+    }
+});
 </script>
-```
+```
+
+## 支持
+
+- 文本輸入框（`<input type="text">`）
+- 密碼輸入框（`<input type="password">`）
+- 文本區域（`<textarea>`）
+- 複選框（`<input type="checkbox">`）
+- 單選按鈕（`<input type="radio">`）
+- 下拉選單（`<select>`）
+
+## 實現
+
+1. 監聽表單元素的 `keyup` 和 `change` 事件
+2. 當事件觸發時，自動更新 `data` 中對應的屬性值
+3. 當 `data` 中的屬性值變化時，自動更新表單元素的顯示
+
+## 注意事項
+
+- 對於 `checkbox` 和 `radio` 類型的輸入框，綁定的值會是勾選的元素的 `value` 值
+- 若多個 `checkbox` 擁有相同的 `name` 屬性，結果會以逗號分隔的字串形式保存
+- 確保在初始化時提供相應的資料屬性，以避免未定義錯誤

page/test.html

@@ -1,29 +1,67 @@
+# QuickUI 插入區塊
+
 > [!NOTE]
-> 確保測試時已禁用瀏覽器中的本地文件限制或使用實時服務器。
+> 動態載入和插入外部 HTML 檔案的內容到當前頁面中。模組化網頁結構，將不同的 HTML 區塊分離成獨立檔案。
+
+## 語法
+
+`:path` 指令需與 `<temp>` 標籤配合使用，語法如下：
+
+```html
+<temp :path="檔案路徑"></temp>
+```
 
-#### `:path`
+自動將指定路徑的 HTML 檔案內容載入並替換整個 `<temp>` 元素。
 
-- test.html
-    ```html
+## 範例
+
+### test.html
+```html
+<h1>path heading</h1>
+<p>path content</p>
+```
+
+### index.html
+```html
+<body id="app">
+    <temp :path="./test.html"></temp>
+</body>
+<script>
+const app = new QUI({
+    id: "app"
+});
+</script>
+```
+
+### 渲染結果
+```html
+<body id="app">
+    <!-- 直接插入 PATH 內容 -->
     <h1>path heading</h1>
     <p>path content</p>
-    ```
-- index.html
-    ```html
-    <body id="app">
-        <temp :path="./test.html"></temp>
-    </body>
-    <script>
-        const app = new QUI({
-            id: "app"
-        });
-    </script>
-    ```
-- Result
-    ```html
-    <body id="app">
-        <!-- 直接插入 PATH 內容 -->
-        <h1>path heading</h1>
-        <p>path content</p>
-    </body>
-    ```
+</body>
+```
+
+## 實現
+
+1. 使用 `fetch` 發送請求獲取指定路徑的 HTML 內容
+2. 解析並創建對應的 DOM 節點
+3. 使用解析後的 DOM 節點替換原始的 `<temp>` 元素
+4. 如果請求失敗或檔案不存在，`<temp>` 元素將保留在頁面中且不會有任何變化
+
+## 注意事項
+
+> [!NOTE]
+> 本地測試時請確保測試時已禁用瀏覽器中的本地文件限制或使用實時服務器。
+
+- 在本地環境測試時，由於瀏覽器的安全限制，直接打開 HTML 檔案可能無法正常加載外部 HTML 內容
+- 推薦使用本地服務器（如 Live Server、http-server 等）進行開發和測試
+- 相對路徑基於當前頁面的位置，使用時需注意檔案結構
+- 所有載入的內容將在頁面初始化過程中替換，不會產生額外的閃爍
+
+## 應用場景
+
+- 將重複使用的 UI 組件（如頁首、頁尾、導航欄）抽取為獨立檔案
+- 在多頁應用中共享相同的 HTML 片段
+- 實現簡單的模板複用，減少重複代碼
+- 將複雜的頁面結構分解為更小的、更易管理的檔案

src/*.ts

@@ -1,26 +1,77 @@
-## CSS 設置
+# QuickUI CSS 設置
+
+> [!NOTE]
+> 透過 `:[CSS屬性]` 的方式直接將資料綁定到元素的樣式屬性上。無需手動操作 DOM 元素的 style 屬性。
+
+## 語法
+
+```html
+<元素 :[CSS屬性]="資料屬性"></元素>
+```
+
+初始化或資料更新時會自動將指定的資料屬性值設定到元素的對應 CSS 樣式上。支援所有標準的 CSS 屬性名稱，並會自動處理 camelCase 與 kebab-case 之間的轉換。
+
+## 範例
+
+展示了如何使用 CSS 設置功能來動態綁定元素的寬度和背景顏色：
+
+### index.html
+```html
+<body id="app">
+    <button :width="width" :background-color="red">test</button>
+</body>
+<script>
+const app = new QUI({
+    id: "app",
+    data: {
+        width: "100px"
+    }
+});
+</script>
+```
+
+### 渲染結果
+```html
+<body id="app">
+    <button style="width: 100px; background-color: red;">test</button>
+</body>
+```
+
+## 支持
+
+支持所有標準的 CSS 屬性，包括但不限於：
+
+- 尺寸：`:width`、`:height`、`:max-width`、`:min-height` 等
+- 顏色：`:color`、`:background-color`、`:border-color` 等
+- 定位：`:position`、`:top`、`:left`、`:z-index` 等
+- 邊框：`:border`、`:border-radius`、`:border-width` 等
+- 間距：`:margin`、`:padding`、`:gap` 等
+- 顯示：`:display`、`:opacity`、`:visibility` 等
+- 字體：`:font-size`、`:font-weight`、`:line-height` 等
+
+## 實現
+
+1. 識別所有以 `:` 開頭的非指令性屬性
+2. 判斷是否為 CSS 屬性（根據內部映射表）
+3. 獲取對應資料屬性的值
+4. 設定元素的 `style.屬性名` 為對應的值
+
+## 動態更新
+
+當資料模型中的值發生變化時，綁定的 CSS 樣式也會自動更新：
+
+```javascript
+// 動態更新按鈕樣式
+// 按鈕樣式會自動更新為 width: 200px;
+app.data.width = "200px";
+```
+
+## 注意事項
 
 > [!NOTE]
 > 支援 `:[CSS屬性]` 的簡易設定方式，直接將資料綁定到樣式屬性。
 
-- index.html
-    ```html
-    <body id="app">
-        <button :width="width" :backdround-color="color">test</button>
-    </body>
-    <script>
-        const app = new QUI({
-            id: "app",
-            data: {
-                width: "100px",
-                color: "red"
-            }
-        });
-    </script>
-    ```
-- Result:
-    ```html
-    <body id="app">
-        <button style="width: 100px; backdround-color: red;">test</button>
-    </body>
-    ```
+- CSS 屬性名稱可以使用 kebab-case（如 `background-color`）或 camelCase（如 `backgroundColor`）
+- 當值為 `null`、`undefined` 或空字串時，對應的樣式屬性會被移除
+- 數值型屬性會自動添加單位（如 `width: 100` 會被轉換為 `width: 100px`）
+- 可以與 `:style` 指令共用，但直接指定的 CSS 屬性會優先於 `:style` 中的同名屬性