From b52a954e8691005c8b87ecaa54403cd8d0bbd259 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E5=BC=A0?= <2091066548@qq.com>
Date: Sat, 27 Sep 2025 01:21:26 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9Abug=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                             | 944 ++++++++++++++++++
 package.json                                  |   2 +
 src/components/common/Loading.md              | 244 +++++
 src/router/index.ts                           |  12 +
 src/views/AICompanion.vue                     |   5 +-
 src/views/Ai/AI-App-NaiveUI-README.md         | 212 ++++
 src/views/Ai/AiAppChat.vue                    | 377 +++++++
 src/views/Ai/AiAppList-NaiveUI.vue            | 796 +++++++++++++++
 src/views/Ai/aiApp.ts                         | 245 +++++
 src/views/Ai/component/AiAppForm.vue          | 382 +++++++
 .../Ai/component/AiAppPublish-Simple.vue      | 322 ++++++
 src/views/Ai/component/AiAppPublish.vue       | 643 ++++++++++++
 src/views/Ai/component/AiAppSetting.vue       | 749 ++++++++++++++
 src/views/Ai/type/aiApp.ts                    | 338 +++++++
 src/views/Ai/upload.ts                        | 368 +++++++
 src/views/Ai/utils/clipboard.ts               | 235 +++++
 src/views/Ai/utils/http.ts                    | 255 +++++
 src/views/CourseExchanged.vue                 | 144 ++-
 src/views/Home.vue                            |  29 +-
 19 files changed, 6274 insertions(+), 28 deletions(-)
 create mode 100644 src/components/common/Loading.md
 create mode 100644 src/views/Ai/AI-App-NaiveUI-README.md
 create mode 100644 src/views/Ai/AiAppChat.vue
 create mode 100644 src/views/Ai/AiAppList-NaiveUI.vue
 create mode 100644 src/views/Ai/aiApp.ts
 create mode 100644 src/views/Ai/component/AiAppForm.vue
 create mode 100644 src/views/Ai/component/AiAppPublish-Simple.vue
 create mode 100644 src/views/Ai/component/AiAppPublish.vue
 create mode 100644 src/views/Ai/component/AiAppSetting.vue
 create mode 100644 src/views/Ai/type/aiApp.ts
 create mode 100644 src/views/Ai/upload.ts
 create mode 100644 src/views/Ai/utils/clipboard.ts
 create mode 100644 src/views/Ai/utils/http.ts

diff --git a/package-lock.json b/package-lock.json
index 2afec29..499f9dd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@types/sortablejs": "^1.15.8",
+        "@vicons/antd": "^0.13.0",
         "@vicons/ionicons5": "^0.13.0",
         "@wangeditor/editor": "^5.1.23",
         "@wangeditor/editor-for-vue": "^5.1.12",
@@ -32,6 +33,7 @@
         "@types/dplayer": "^1.25.5",
         "@types/node": "^24.0.15",
         "@vitejs/plugin-vue": "^6.0.0",
+        "sass-embedded": "^1.93.2",
         "typescript": "^5.8.3",
         "vite": "^7.0.0",
         "vite-plugin-vue-devtools": "^7.7.7",
@@ -526,6 +528,13 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@bufbuild/protobuf": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmmirror.com/@bufbuild/protobuf/-/protobuf-2.9.0.tgz",
+      "integrity": "sha512-rnJenoStJ8nvmt9Gzye8nkYd6V22xUAnu4086ER7h1zJ508vStko4pMvDeQ446ilDTFpV5wnoc5YS7XvMwwMqA==",
+      "dev": true,
+      "license": "(Apache-2.0 AND BSD-3-Clause)"
+    },
     "node_modules/@css-render/plugin-bem": {
       "version": "0.15.14",
       "resolved": "https://registry.npmmirror.com/@css-render/plugin-bem/-/plugin-bem-0.15.14.tgz",
@@ -1080,6 +1089,316 @@
       "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==",
       "license": "Apache-2.0"
     },
+    "node_modules/@parcel/watcher": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmmirror.com/@parcel/watcher/-/watcher-2.5.1.tgz",
+      "integrity": "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "detect-libc": "^1.0.3",
+        "is-glob": "^4.0.3",
+        "micromatch": "^4.0.5",
+        "node-addon-api": "^7.0.0"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher-android-arm64": "2.5.1",
+        "@parcel/watcher-darwin-arm64": "2.5.1",
+        "@parcel/watcher-darwin-x64": "2.5.1",
+        "@parcel/watcher-freebsd-x64": "2.5.1",
+        "@parcel/watcher-linux-arm-glibc": "2.5.1",
+        "@parcel/watcher-linux-arm-musl": "2.5.1",
+        "@parcel/watcher-linux-arm64-glibc": "2.5.1",
+        "@parcel/watcher-linux-arm64-musl": "2.5.1",
+        "@parcel/watcher-linux-x64-glibc": "2.5.1",
+        "@parcel/watcher-linux-x64-musl": "2.5.1",
+        "@parcel/watcher-win32-arm64": "2.5.1",
+        "@parcel/watcher-win32-ia32": "2.5.1",
+        "@parcel/watcher-win32-x64": "2.5.1"
+      }
+    },
+    "node_modules/@parcel/watcher-android-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmmirror.com/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.1.tgz",
+      "integrity": "sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmmirror.com/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.1.tgz",
+      "integrity": "sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmmirror.com/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.1.tgz",
+      "integrity": "sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-freebsd-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmmirror.com/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.1.tgz",
+      "integrity": "sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmmirror.com/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.1.tgz",
+      "integrity": "sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmmirror.com/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.1.tgz",
+      "integrity": "sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmmirror.com/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.1.tgz",
+      "integrity": "sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmmirror.com/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.1.tgz",
+      "integrity": "sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmmirror.com/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.1.tgz",
+      "integrity": "sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmmirror.com/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.1.tgz",
+      "integrity": "sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmmirror.com/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.1.tgz",
+      "integrity": "sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-ia32": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmmirror.com/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.1.tgz",
+      "integrity": "sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmmirror.com/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.1.tgz",
+      "integrity": "sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
     "node_modules/@polka/url": {
       "version": "1.0.0-next.29",
       "resolved": "https://registry.npmmirror.com/@polka/url/-/url-1.0.0-next.29.tgz",
@@ -1535,6 +1854,12 @@
         "@uppy/core": "^2.3.3"
       }
     },
+    "node_modules/@vicons/antd": {
+      "version": "0.13.0",
+      "resolved": "https://registry.npmmirror.com/@vicons/antd/-/antd-0.13.0.tgz",
+      "integrity": "sha512-yrUGoUSz2BbGupk9ghQOahc04n5H3MwUDM9pVPsLh9U1uqB47oRWZvYRiZaT1JKPqgTgSE6BXcVw4i9MOF4M+g==",
+      "license": "MIT"
+    },
     "node_modules/@vicons/ionicons5": {
       "version": "0.13.0",
       "resolved": "https://registry.npmmirror.com/@vicons/ionicons5/-/ionicons5-0.13.0.tgz",
@@ -2079,6 +2404,20 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmmirror.com/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/browserslist": {
       "version": "4.25.1",
       "resolved": "https://registry.npmmirror.com/browserslist/-/browserslist-4.25.1.tgz",
@@ -2112,6 +2451,13 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/buffer-builder": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmmirror.com/buffer-builder/-/buffer-builder-0.2.0.tgz",
+      "integrity": "sha512-7VPMEPuYznPSoR21NE1zvd2Xna6c/CloiZCfcMXR1Jny6PjX0N4Nsa38zcBFo/FMK+BlA+FLKbJCQ0i2yxp+Xg==",
+      "dev": true,
+      "license": "MIT/X11"
+    },
     "node_modules/bundle-name": {
       "version": "4.1.0",
       "resolved": "https://registry.npmmirror.com/bundle-name/-/bundle-name-4.1.0.tgz",
@@ -2196,6 +2542,23 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/chokidar": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmmirror.com/chokidar/-/chokidar-4.0.3.tgz",
+      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/ckplayer": {
       "version": "3.1.2",
       "resolved": "https://registry.npmmirror.com/ckplayer/-/ckplayer-3.1.2.tgz",
@@ -2211,6 +2574,13 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/colorjs.io": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmmirror.com/colorjs.io/-/colorjs.io-0.5.2.tgz",
+      "integrity": "sha512-twmVoizEW7ylZSN32OgKdXRmo1qg+wT5/6C3xu5b9QsWzSFAhHLn2xd8ro0diCsKfCj1RdaTP/nrcW+vAoQPIw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -2451,6 +2821,20 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/detect-libc": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/detect-libc/-/detect-libc-1.0.3.tgz",
+      "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "bin": {
+        "detect-libc": "bin/detect-libc.js"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/dom7": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/dom7/-/dom7-3.0.0.tgz",
@@ -2794,6 +3178,20 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmmirror.com/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/follow-redirects": {
       "version": "1.15.9",
       "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.9.tgz",
@@ -2961,6 +3359,16 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/has-property-descriptors": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
@@ -3076,6 +3484,13 @@
         "url": "https://opencollective.com/immer"
       }
     },
+    "node_modules/immutable": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmmirror.com/immutable/-/immutable-5.1.3.tgz",
+      "integrity": "sha512-+chQdDfvscSF1SJqv2gn4SRO2ZyS3xL3r7IW/wWEEzrzLisnOlKiQu5ytC/BVNcS15C39WT2Hg/bjKjDMcu+zg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/is-arguments": {
       "version": "1.2.0",
       "resolved": "https://registry.npmmirror.com/is-arguments/-/is-arguments-1.2.0.tgz",
@@ -3124,6 +3539,31 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmmirror.com/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmmirror.com/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-hotkey": {
       "version": "0.2.0",
       "resolved": "https://registry.npmmirror.com/is-hotkey/-/is-hotkey-0.2.0.tgz",
@@ -3149,6 +3589,17 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmmirror.com/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
     "node_modules/is-plain-obj": {
       "version": "4.1.0",
       "resolved": "https://registry.npmmirror.com/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
@@ -3392,6 +3843,35 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmmirror.com/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/micromatch/node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmmirror.com/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
@@ -3526,6 +4006,14 @@
       "integrity": "sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==",
       "license": "ISC"
     },
+    "node_modules/node-addon-api": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmmirror.com/node-addon-api/-/node-addon-api-7.1.1.tgz",
+      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/node-releases": {
       "version": "2.0.19",
       "resolved": "https://registry.npmmirror.com/node-releases/-/node-releases-2.0.19.tgz",
@@ -3809,6 +4297,21 @@
         "node": ">= 12.0.0"
       }
     },
+    "node_modules/readdirp": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmmirror.com/readdirp/-/readdirp-4.1.2.tgz",
+      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">= 14.18.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/regexp.prototype.flags": {
       "version": "1.5.4",
       "resolved": "https://registry.npmmirror.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
@@ -3888,6 +4391,387 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/rxjs": {
+      "version": "7.8.2",
+      "resolved": "https://registry.npmmirror.com/rxjs/-/rxjs-7.8.2.tgz",
+      "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/sass": {
+      "version": "1.93.2",
+      "resolved": "https://registry.npmmirror.com/sass/-/sass-1.93.2.tgz",
+      "integrity": "sha512-t+YPtOQHpGW1QWsh1CHQ5cPIr9lbbGZLZnbihP/D/qZj/yuV68m8qarcV17nvkOX81BCrvzAlq2klCQFZghyTg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "chokidar": "^4.0.0",
+        "immutable": "^5.0.2",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher": "^2.4.1"
+      }
+    },
+    "node_modules/sass-embedded": {
+      "version": "1.93.2",
+      "resolved": "https://registry.npmmirror.com/sass-embedded/-/sass-embedded-1.93.2.tgz",
+      "integrity": "sha512-FvQdkn2dZ8DGiLgi0Uf4zsj7r/BsiLImNa5QJ10eZalY6NfZyjrmWGFcuCN5jNwlDlXFJnftauv+UtvBKLvepQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@bufbuild/protobuf": "^2.5.0",
+        "buffer-builder": "^0.2.0",
+        "colorjs.io": "^0.5.0",
+        "immutable": "^5.0.2",
+        "rxjs": "^7.4.0",
+        "supports-color": "^8.1.1",
+        "sync-child-process": "^1.0.2",
+        "varint": "^6.0.0"
+      },
+      "bin": {
+        "sass": "dist/bin/sass.js"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      },
+      "optionalDependencies": {
+        "sass-embedded-all-unknown": "1.93.2",
+        "sass-embedded-android-arm": "1.93.2",
+        "sass-embedded-android-arm64": "1.93.2",
+        "sass-embedded-android-riscv64": "1.93.2",
+        "sass-embedded-android-x64": "1.93.2",
+        "sass-embedded-darwin-arm64": "1.93.2",
+        "sass-embedded-darwin-x64": "1.93.2",
+        "sass-embedded-linux-arm": "1.93.2",
+        "sass-embedded-linux-arm64": "1.93.2",
+        "sass-embedded-linux-musl-arm": "1.93.2",
+        "sass-embedded-linux-musl-arm64": "1.93.2",
+        "sass-embedded-linux-musl-riscv64": "1.93.2",
+        "sass-embedded-linux-musl-x64": "1.93.2",
+        "sass-embedded-linux-riscv64": "1.93.2",
+        "sass-embedded-linux-x64": "1.93.2",
+        "sass-embedded-unknown-all": "1.93.2",
+        "sass-embedded-win32-arm64": "1.93.2",
+        "sass-embedded-win32-x64": "1.93.2"
+      }
+    },
+    "node_modules/sass-embedded-all-unknown": {
+      "version": "1.93.2",
+      "resolved": "https://registry.npmmirror.com/sass-embedded-all-unknown/-/sass-embedded-all-unknown-1.93.2.tgz",
+      "integrity": "sha512-GdEuPXIzmhRS5J7UKAwEvtk8YyHQuFZRcpnEnkA3rwRUI27kwjyXkNeIj38XjUQ3DzrfMe8HcKFaqWGHvblS7Q==",
+      "cpu": [
+        "!arm",
+        "!arm64",
+        "!riscv64",
+        "!x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "sass": "1.93.2"
+      }
+    },
+    "node_modules/sass-embedded-android-arm": {
+      "version": "1.93.2",
+      "resolved": "https://registry.npmmirror.com/sass-embedded-android-arm/-/sass-embedded-android-arm-1.93.2.tgz",
+      "integrity": "sha512-I8bpO8meZNo5FvFx5FIiE7DGPVOYft0WjuwcCCdeJ6duwfkl6tZdatex1GrSigvTsuz9L0m4ngDcX/Tj/8yMow==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-android-arm64": {
+      "version": "1.93.2",
+      "resolved": "https://registry.npmmirror.com/sass-embedded-android-arm64/-/sass-embedded-android-arm64-1.93.2.tgz",
+      "integrity": "sha512-346f4iVGAPGcNP6V6IOOFkN5qnArAoXNTPr5eA/rmNpeGwomdb7kJyQ717r9rbJXxOG8OAAUado6J0qLsjnjXQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-android-riscv64": {
+      "version": "1.93.2",
+      "resolved": "https://registry.npmmirror.com/sass-embedded-android-riscv64/-/sass-embedded-android-riscv64-1.93.2.tgz",
+      "integrity": "sha512-hSMW1s4yJf5guT9mrdkumluqrwh7BjbZ4MbBW9tmi1DRDdlw1Wh9Oy1HnnmOG8x9XcI1qkojtPL6LUuEJmsiDg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-android-x64": {
+      "version": "1.93.2",
+      "resolved": "https://registry.npmmirror.com/sass-embedded-android-x64/-/sass-embedded-android-x64-1.93.2.tgz",
+      "integrity": "sha512-JqktiHZduvn+ldGBosE40ALgQ//tGCVNAObgcQ6UIZznEJbsHegqStqhRo8UW3x2cgOO2XYJcrInH6cc7wdKbw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-darwin-arm64": {
+      "version": "1.93.2",
+      "resolved": "https://registry.npmmirror.com/sass-embedded-darwin-arm64/-/sass-embedded-darwin-arm64-1.93.2.tgz",
+      "integrity": "sha512-qI1X16qKNeBJp+M/5BNW7v/JHCDYWr1/mdoJ7+UMHmP0b5AVudIZtimtK0hnjrLnBECURifd6IkulybR+h+4UA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-darwin-x64": {
+      "version": "1.93.2",
+      "resolved": "https://registry.npmmirror.com/sass-embedded-darwin-x64/-/sass-embedded-darwin-x64-1.93.2.tgz",
+      "integrity": "sha512-4KeAvlkQ0m0enKUnDGQJZwpovYw99iiMb8CTZRSsQm8Eh7halbJZVmx67f4heFY/zISgVOCcxNg19GrM5NTwtA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-arm": {
+      "version": "1.93.2",
+      "resolved": "https://registry.npmmirror.com/sass-embedded-linux-arm/-/sass-embedded-linux-arm-1.93.2.tgz",
+      "integrity": "sha512-N3+D/ToHtzwLDO+lSH05Wo6/KRxFBPnbjVHASOlHzqJnK+g5cqex7IFAp6ozzlRStySk61Rp6d+YGrqZ6/P0PA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-arm64": {
+      "version": "1.93.2",
+      "resolved": "https://registry.npmmirror.com/sass-embedded-linux-arm64/-/sass-embedded-linux-arm64-1.93.2.tgz",
+      "integrity": "sha512-9ftX6nd5CsShJqJ2WRg+ptaYvUW+spqZfJ88FbcKQBNFQm6L87luj3UI1rB6cP5EWrLwHA754OKxRJyzWiaN6g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-musl-arm": {
+      "version": "1.93.2",
+      "resolved": "https://registry.npmmirror.com/sass-embedded-linux-musl-arm/-/sass-embedded-linux-musl-arm-1.93.2.tgz",
+      "integrity": "sha512-XBTvx66yRenvEsp3VaJCb3HQSyqCsUh7R+pbxcN5TuzueybZi0LXvn9zneksdXcmjACMlMpIVXi6LyHPQkYc8A==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-musl-arm64": {
+      "version": "1.93.2",
+      "resolved": "https://registry.npmmirror.com/sass-embedded-linux-musl-arm64/-/sass-embedded-linux-musl-arm64-1.93.2.tgz",
+      "integrity": "sha512-+3EHuDPkMiAX5kytsjEC1bKZCawB9J6pm2eBIzzLMPWbf5xdx++vO1DpT7hD4bm4ZGn0eVHgSOKIfP6CVz6tVg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-musl-riscv64": {
+      "version": "1.93.2",
+      "resolved": "https://registry.npmmirror.com/sass-embedded-linux-musl-riscv64/-/sass-embedded-linux-musl-riscv64-1.93.2.tgz",
+      "integrity": "sha512-0sB5kmVZDKTYzmCSlTUnjh6mzOhzmQiW/NNI5g8JS4JiHw2sDNTvt1dsFTuqFkUHyEOY3ESTsfHHBQV8Ip4bEA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-musl-x64": {
+      "version": "1.93.2",
+      "resolved": "https://registry.npmmirror.com/sass-embedded-linux-musl-x64/-/sass-embedded-linux-musl-x64-1.93.2.tgz",
+      "integrity": "sha512-t3ejQ+1LEVuHy7JHBI2tWHhoMfhedUNDjGJR2FKaLgrtJntGnyD1RyX0xb3nuqL/UXiEAtmTmZY+Uh3SLUe1Hg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-riscv64": {
+      "version": "1.93.2",
+      "resolved": "https://registry.npmmirror.com/sass-embedded-linux-riscv64/-/sass-embedded-linux-riscv64-1.93.2.tgz",
+      "integrity": "sha512-e7AndEwAbFtXaLy6on4BfNGTr3wtGZQmypUgYpSNVcYDO+CWxatKVY4cxbehMPhxG9g5ru+eaMfynvhZt7fLaA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-x64": {
+      "version": "1.93.2",
+      "resolved": "https://registry.npmmirror.com/sass-embedded-linux-x64/-/sass-embedded-linux-x64-1.93.2.tgz",
+      "integrity": "sha512-U3EIUZQL11DU0xDDHXexd4PYPHQaSQa2hzc4EzmhHqrAj+TyfYO94htjWOd+DdTPtSwmLp+9cTWwPZBODzC96w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-unknown-all": {
+      "version": "1.93.2",
+      "resolved": "https://registry.npmmirror.com/sass-embedded-unknown-all/-/sass-embedded-unknown-all-1.93.2.tgz",
+      "integrity": "sha512-7VnaOmyewcXohiuoFagJ3SK5ddP9yXpU0rzz+pZQmS1/+5O6vzyFCUoEt3HDRaLctH4GT3nUGoK1jg0ae62IfQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "!android",
+        "!darwin",
+        "!linux",
+        "!win32"
+      ],
+      "dependencies": {
+        "sass": "1.93.2"
+      }
+    },
+    "node_modules/sass-embedded-win32-arm64": {
+      "version": "1.93.2",
+      "resolved": "https://registry.npmmirror.com/sass-embedded-win32-arm64/-/sass-embedded-win32-arm64-1.93.2.tgz",
+      "integrity": "sha512-Y90DZDbQvtv4Bt0GTXKlcT9pn4pz8AObEjFF8eyul+/boXwyptPZ/A1EyziAeNaIEIfxyy87z78PUgCeGHsx3Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-win32-x64": {
+      "version": "1.93.2",
+      "resolved": "https://registry.npmmirror.com/sass-embedded-win32-x64/-/sass-embedded-win32-x64-1.93.2.tgz",
+      "integrity": "sha512-BbSucRP6PVRZGIwlEBkp+6VQl2GWdkWFMN+9EuOTPrLxCJZoq+yhzmbjspd3PeM8+7WJ7AdFu/uRYdO8tor1iQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/scroll-into-view-if-needed": {
       "version": "2.2.31",
       "resolved": "https://registry.npmmirror.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.31.tgz",
@@ -4083,6 +4967,45 @@
         "node": ">=16"
       }
     },
+    "node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
+    "node_modules/sync-child-process": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/sync-child-process/-/sync-child-process-1.0.2.tgz",
+      "integrity": "sha512-8lD+t2KrrScJ/7KXCSyfhT3/hRq78rC0wBFqNJXv3mZyn6hW2ypM05JmlSvtqRbeq6jqA94oHbxAr2vYsJ8vDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "sync-message-port": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
+    "node_modules/sync-message-port": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmmirror.com/sync-message-port/-/sync-message-port-1.1.3.tgz",
+      "integrity": "sha512-GTt8rSKje5FilG+wEdfCkOcLL7LWqpMlr2c3LRuKt/YXxcJ52aGSbGBAdI4L3aaqfrBt6y711El53ItyH1NWzg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
     "node_modules/tiny-warning": {
       "version": "1.0.3",
       "resolved": "https://registry.npmmirror.com/tiny-warning/-/tiny-warning-1.0.3.tgz",
@@ -4106,6 +5029,20 @@
         "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmmirror.com/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
     "node_modules/totalist": {
       "version": "3.0.1",
       "resolved": "https://registry.npmmirror.com/totalist/-/totalist-3.0.1.tgz",
@@ -4209,6 +5146,13 @@
         "browserslist": ">= 4.21.0"
       }
     },
+    "node_modules/varint": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/varint/-/varint-6.0.0.tgz",
+      "integrity": "sha512-cXEIW6cfr15lFv563k4GuVuW/fiwjknytD37jIOLSdSWuOI6WnO/oKwmP2FQTU2l01LP8/M5TSAJpzUaGe3uWg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/vdirs": {
       "version": "0.1.8",
       "resolved": "https://registry.npmmirror.com/vdirs/-/vdirs-0.1.8.tgz",
diff --git a/package.json b/package.json
index adab33d..a3dc000 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@types/sortablejs": "^1.15.8",
+    "@vicons/antd": "^0.13.0",
     "@vicons/ionicons5": "^0.13.0",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^5.1.12",
@@ -37,6 +38,7 @@
     "@types/dplayer": "^1.25.5",
     "@types/node": "^24.0.15",
     "@vitejs/plugin-vue": "^6.0.0",
+    "sass-embedded": "^1.93.2",
     "typescript": "^5.8.3",
     "vite": "^7.0.0",
     "vite-plugin-vue-devtools": "^7.7.7",
diff --git a/src/components/common/Loading.md b/src/components/common/Loading.md
new file mode 100644
index 0000000..2f0995a
--- /dev/null
+++ b/src/components/common/Loading.md
@@ -0,0 +1,244 @@
+# Loading 组件使用文档
+
+基于 Naive UI 的通用 Loading 组件，支持全屏遮罩和内联两种模式。
+
+## 功能特性
+
+- ✅ **两种模式**：全屏遮罩模式和内联模式
+- ✅ **多种尺寸**：small、medium、large
+- ✅ **自定义样式**：颜色、文本、背景等
+- ✅ **TypeScript 支持**：完整的类型定义
+- ✅ **响应式设计**：适配移动端
+- ✅ **异步包装器**：简化异步操作的 Loading 处理
+- ✅ **全局实例**：支持全局调用
+- ✅ **组件 Hook**：支持组件内状态管理
+
+## 安装使用
+
+### 1. 组件方式使用
+
+```vue
+<template>
+  <div>
+    <!-- 内联模式 -->
+    <Loading 
+      :loading="loading" 
+      text="加载中..." 
+      size="medium"
+      color="#1890ff"
+    />
+    
+    <!-- 遮罩模式 -->
+    <Loading 
+      :loading="loading" 
+      text="正在处理..." 
+      overlay
+      background-color="rgba(0, 0, 0, 0.5)"
+      opacity="0.8"
+    />
+  </div>
+</template>
+
+<script setup>
+import Loading from '@/components/common/Loading.vue'
+import { ref } from 'vue'
+
+const loading = ref(false)
+</script>
+```
+
+### 2. Composable Hook 使用
+
+```vue
+<template>
+  <div>
+    <n-button @click="handleLoad">开始加载</n-button>
+    
+    <Loading 
+      :loading="loading" 
+      :text="loadingText"
+      size="large"
+    />
+  </div>
+</template>
+
+<script setup>
+import { useLoading } from '@/composables/useLoading'
+import Loading from '@/components/common/Loading.vue'
+
+const { 
+  loading, 
+  loadingText, 
+  showLoading, 
+  hideLoading, 
+  updateLoadingText 
+} = useLoading()
+
+const handleLoad = async () => {
+  showLoading('正在加载数据...')
+  
+  setTimeout(() => {
+    updateLoadingText('即将完成...')
+  }, 1500)
+  
+  setTimeout(() => {
+    hideLoading()
+  }, 3000)
+}
+</script>
+```
+
+### 3. 全局方式使用
+
+```javascript
+import Loading from '@/composables/useLoading'
+
+// 显示 Loading
+Loading.show({
+  text: '正在加载...',
+  size: 'large',
+  color: '#52c41a'
+})
+
+// 更新文本
+Loading.updateText('加载中... 50%')
+
+// 隐藏 Loading
+Loading.hide()
+
+// 异步操作包装
+const result = await Loading.wrap(
+  () => fetch('/api/data').then(res => res.json()),
+  {
+    text: '正在获取数据...',
+    onError: (error) => console.error('请求失败:', error)
+  }
+)
+```
+
+## API 参数
+
+### Loading 组件 Props
+
+| 参数 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| loading | boolean | true | 是否显示加载状态 |
+| text | string | '加载中...' | 加载文本 |
+| overlay | boolean | false | 是否显示遮罩层 |
+| size | 'small' \| 'medium' \| 'large' | 'medium' | 尺寸 |
+| color | string | '#1890ff' | 自定义颜色 |
+| textColor | string | '#666666' | 文本颜色 |
+| backgroundColor | string | 'rgba(255, 255, 255, 0.8)' | 背景颜色（遮罩模式） |
+| opacity | number | 0.8 | 透明度（遮罩模式） |
+| customClass | string | '' | 自定义类名 |
+| zIndex | number | 1000 | z-index |
+
+### useLoading Hook 返回值
+
+| 属性 | 类型 | 说明 |
+|------|------|------|
+| loading | Ref\<boolean\> | 加载状态 |
+| loadingText | Ref\<string\> | 加载文本 |
+| showLoading | (text?: string) => void | 显示加载 |
+| hideLoading | () => void | 隐藏加载 |
+| updateLoadingText | (text: string) => void | 更新加载文本 |
+
+### 全局 Loading 方法
+
+| 方法 | 参数 | 说明 |
+|------|------|------|
+| Loading.show | (options?: LoadingOptions) => void | 显示全局 Loading |
+| Loading.hide | () => void | 隐藏全局 Loading |
+| Loading.updateText | (text: string) => void | 更新 Loading 文本 |
+| Loading.destroy | () => void | 销毁全局 Loading |
+| Loading.wrap | \<T\>(asyncFn, options?) => Promise\<T\> | 异步操作包装器 |
+
+## 使用场景
+
+### 1. 页面级加载
+
+```javascript
+// 页面进入时显示
+Loading.show({ text: '正在加载页面...' })
+
+// 数据加载完成后隐藏
+Loading.hide()
+```
+
+### 2. API 请求加载
+
+```javascript
+const fetchData = async () => {
+  return await Loading.wrap(
+    () => api.getData(),
+    {
+      text: '正在获取数据...',
+      onError: (error) => message.error('获取数据失败')
+    }
+  )
+}
+```
+
+### 3. 表单提交加载
+
+```javascript
+const handleSubmit = async () => {
+  Loading.show({ text: '正在提交...' })
+  
+  try {
+    await api.submitForm(formData)
+    message.success('提交成功')
+  } catch (error) {
+    message.error('提交失败')
+  } finally {
+    Loading.hide()
+  }
+}
+```
+
+### 4. 进度加载
+
+```javascript
+const uploadFile = () => {
+  Loading.show({ text: '准备上传... 0%' })
+  
+  let progress = 0
+  const interval = setInterval(() => {
+    progress += 10
+    Loading.updateText(`上传中... ${progress}%`)
+    
+    if (progress >= 100) {
+      clearInterval(interval)
+      Loading.hide()
+    }
+  }, 200)
+}
+```
+
+## 样式自定义
+
+组件支持通过 CSS 变量进行样式自定义：
+
+```css
+.loading-container {
+  --loading-bg-color: rgba(255, 255, 255, 0.9);
+  --loading-text-color: #333;
+  --loading-spin-color: #1890ff;
+}
+```
+
+## 注意事项
+
+1. **全局 Loading** 会自动创建和销毁 DOM 元素
+2. **遮罩模式** 会阻止用户交互，请合理使用
+3. **异步包装器** 会自动处理 Loading 的显示和隐藏
+4. **组件卸载时** 建议调用 `Loading.destroy()` 清理资源
+5. **移动端适配** 已内置响应式样式
+
+## 最佳实践
+
+1. **统一管理**：建议在 API 拦截器中统一处理 Loading
+2. **错误处理**：使用 `Loading.wrap` 时提供错误处理回调
+3. **用户体验**：避免过短或过长的 Loading 时间
+4. **文本提示**：提供有意义的加载文本提示
+5. **性能优化**：避免频繁的显示/隐藏操作
diff --git a/src/router/index.ts b/src/router/index.ts
index 43750f6..7a59b28 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -760,6 +760,18 @@ const routes: RouteRecordRaw[] = [
     component: () => import('@/views/Ai.vue'),
     meta: { title: 'AI' }
   },
+  {
+    path: '/ai/app',
+    name: 'AiAppList',
+    component: () => import('@/views/Ai/AiAppList-NaiveUI.vue'),
+    meta: { title: 'AI应用管理' }
+  },
+  {
+    path: '/ai/app/chat/:id',
+    name: 'AiAppChat',
+    component: () => import('@/views/Ai/AiAppChat.vue'),
+    meta: { title: 'AI应用对话' }
+  },
   {
     path: '/ai-demo',
     name: 'AIDemo',
diff --git a/src/views/AICompanion.vue b/src/views/AICompanion.vue
index 72af8a3..d6cdad6 100644
--- a/src/views/AICompanion.vue
+++ b/src/views/AICompanion.vue
@@ -440,10 +440,10 @@
 
             <!-- 左侧边栏 -->
             <div class="sidebar">
-              <div class="sidebar-title">
+              <!-- <div class="sidebar-title">
                 <h2>学习进度</h2>
                 <img src="/images/aiCompanion/fold.png" alt="">
-              </div>
+              </div> -->
 
               <!-- 学习进度 -->
               <div class="progress-section">
@@ -1828,6 +1828,7 @@ onMounted(() => {
   padding: 24px;
   margin-bottom: 20px;
   border: 1px solid white;
+  display: none;
 }
 
 /* 进度头部样式 */
diff --git a/src/views/Ai/AI-App-NaiveUI-README.md b/src/views/Ai/AI-App-NaiveUI-README.md
new file mode 100644
index 0000000..35a6ce7
--- /dev/null
+++ b/src/views/Ai/AI-App-NaiveUI-README.md
@@ -0,0 +1,212 @@
+# AI应用列表 - Naive UI版本
+
+这是将原有的Ant Design Vue + JeecgBoot项目中的AI应用列表页面转换为Naive UI + TypeScript + Vue3版本的实现。
+
+## 📁 文件结构
+
+```
+├── AiAppList-NaiveUI.vue          # 主页面组件
+├── api/
+│   ├── aiApp.ts                   # AI应用相关API
+│   └── upload.ts                  # 文件上传API
+├── components/
+│   ├── AiAppForm.vue              # 应用表单组件
+│   ├── AiAppSetting.vue           # 应用设置组件
+│   └── AiAppPublish.vue           # 应用发布组件
+├── types/
+│   └── aiApp.ts                   # 类型定义
+├── utils/
+│   ├── http.ts                    # HTTP请求工具
+│   └── clipboard.ts               # 剪贴板工具
+└── AI-App-NaiveUI-README.md       # 说明文档
+```
+
+## 🔄 接口转换对照
+
+### 原始接口 → 转换后接口
+
+| 功能 | 原始接口 | 转换后接口 | 说明 |
+|------|----------|------------|------|
+| 获取应用列表 | `GET /airag/app/list` | `aiAppApi.getAppList()` | 分页查询AI应用列表 |
+| 删除应用 | `DELETE /airag/app/delete` | `aiAppApi.deleteApp()` | 删除指定应用 |
+| 发布应用 | `POST /airag/app/release` | `aiAppApi.releaseApp()` | 发布或取消发布应用 |
+| 查询应用详情 | `GET /airag/app/queryById` | `aiAppApi.getAppById()` | 获取单个应用详情 |
+| 保存应用 | `PUT /airag/app/edit` | `aiAppApi.saveApp()` | 新增或编辑应用 |
+| 查询知识库 | `GET /airag/knowledge/query/batch/byId` | `aiAppApi.getKnowledgeBatch()` | 批量查询知识库 |
+| 查询流程 | `GET /airag/flow/queryById` | `aiAppApi.getFlowById()` | 根据ID查询流程 |
+| 生成提示词 | `POST /airag/app/prompt/generate` | `aiAppApi.generatePrompt()` | AI应用编排生成提示词 |
+
+## 🎨 UI组件转换
+
+### Ant Design Vue → Naive UI
+
+| 原组件 | 新组件 | 说明 |
+|--------|--------|------|
+| `a-card` | `n-card` | 卡片组件 |
+| `a-form` | `n-form` | 表单组件 |
+| `a-input` | `n-input` | 输入框组件 |
+| `a-select` | `n-select` | 选择器组件 |
+| `a-button` | `n-button` | 按钮组件 |
+| `a-modal` | `n-modal` | 弹窗组件 |
+| `a-pagination` | `n-pagination` | 分页组件 |
+| `a-tag` | `n-tag` | 标签组件 |
+| `a-tooltip` | `n-tooltip` | 提示组件 |
+| `a-dropdown` | `n-dropdown` | 下拉菜单组件 |
+| `a-upload` | `n-upload` | 上传组件 |
+| `a-avatar` | `n-avatar` | 头像组件 |
+
+## 🚀 使用方法
+
+### 1. 安装依赖
+
+```bash
+npm install naive-ui @vicons/antd
+# 或
+yarn add naive-ui @vicons/antd
+# 或
+pnpm add naive-ui @vicons/antd
+```
+
+### 2. 配置Naive UI
+
+在你的主应用中配置Naive UI：
+
+```typescript
+// main.ts
+import { createApp } from 'vue'
+import naive from 'naive-ui'
+import App from './App.vue'
+
+const app = createApp(App)
+app.use(naive)
+app.mount('#app')
+```
+
+### 3. 使用组件
+
+```vue
+<template>
+  <AiAppList />
+</template>
+
+<script setup lang="ts">
+import AiAppList from './AiAppList-NaiveUI.vue'
+</script>
+```
+
+## 🔧 配置说明
+
+### HTTP请求配置
+
+在 `utils/http.ts` 中配置你的API基础地址：
+
+```typescript
+const http = new HttpClient({
+  baseURL: 'http://your-api-domain.com/api', // 修改为你的API地址
+  timeout: 60000
+})
+```
+
+### 认证配置
+
+系统会自动从localStorage或sessionStorage中获取token：
+
+```typescript
+// 设置token
+localStorage.setItem('ACCESS_TOKEN', 'your-token')
+// 或
+sessionStorage.setItem('ACCESS_TOKEN', 'your-token')
+```
+
+## 📋 功能特性
+
+### ✅ 已实现功能
+
+- [x] 应用列表展示（卡片式布局）
+- [x] 搜索和筛选功能
+- [x] 分页功能
+- [x] 创建新应用
+- [x] 编辑应用信息
+- [x] 删除应用
+- [x] 发布/取消发布应用
+- [x] 应用预览
+- [x] 嵌入网站代码生成
+- [x] 菜单配置SQL生成
+- [x] 文件上传功能
+- [x] 响应式布局
+
+### 🎯 主要改进
+
+1. **类型安全**: 使用TypeScript提供完整的类型定义
+2. **组件化**: 将复杂功能拆分为独立的组件
+3. **响应式设计**: 适配不同屏幕尺寸
+4. **错误处理**: 完善的错误处理和用户提示
+5. **代码复用**: 提取公共工具函数和API封装
+
+## 🔍 代码示例
+
+### 调用API
+
+```typescript
+// 获取应用列表
+const loadAppList = async () => {
+  try {
+    const response = await aiAppApi.getAppList({
+      pageNo: 1,
+      pageSize: 10,
+      name: '搜索关键词'
+    })
+    console.log(response.result.records)
+  } catch (error) {
+    console.error('加载失败:', error)
+  }
+}
+
+// 删除应用
+const deleteApp = async (appId: string) => {
+  try {
+    await aiAppApi.deleteApp({ id: appId, name: '应用名称' })
+    console.log('删除成功')
+  } catch (error) {
+    console.error('删除失败:', error)
+  }
+}
+```
+
+### 复制到剪贴板
+
+```typescript
+import { copyToClipboard } from '@/utils/clipboard'
+
+const copyCode = async () => {
+  const success = await copyToClipboard('要复制的内容')
+  if (success) {
+    console.log('复制成功')
+  }
+}
+```
+
+## 🐛 注意事项
+
+1. **图标引用**: 使用`@vicons/antd`包中的图标，需要按需引入
+2. **样式覆盖**: 使用`:deep()`选择器来覆盖组件内部样式
+3. **类型导入**: 确保正确导入Naive UI的类型定义
+4. **API地址**: 根据实际情况修改API基础地址
+5. **权限控制**: 根据需要添加路由守卫和权限验证
+
+## 📝 待完善功能
+
+- [ ] 国际化支持
+- [ ] 主题切换
+- [ ] 更多文件类型支持
+- [ ] 批量操作功能
+- [ ] 导入导出功能
+- [ ] 应用模板功能
+
+## 🤝 贡献
+
+欢迎提交Issue和Pull Request来改进这个项目！
+
+## 📄 许可证
+
+MIT License
diff --git a/src/views/Ai/AiAppChat.vue b/src/views/Ai/AiAppChat.vue
new file mode 100644
index 0000000..0286154
--- /dev/null
+++ b/src/views/Ai/AiAppChat.vue
@@ -0,0 +1,377 @@
+<template>
+  <div class="ai-app-chat">
+    <div class="chat-container">
+      <div class="chat-header">
+        <div class="app-info">
+          <n-avatar
+            :size="32"
+            :src="appInfo?.icon ? getAppIcon(appInfo.icon) : '/default-app-icon.png'"
+            round
+          />
+          <div class="app-details">
+            <h3 class="app-name">{{ appInfo?.name || 'AI应用' }}</h3>
+            <p class="app-desc">{{ appInfo?.descr || '智能对话助手' }}</p>
+          </div>
+        </div>
+        <n-button @click="handleBack" quaternary>
+          <template #icon>
+            <n-icon><ArrowLeftOutlined /></n-icon>
+          </template>
+          返回
+        </n-button>
+      </div>
+
+      <div class="chat-content" ref="chatContentRef">
+        <div class="message-list">
+          <!-- 欢迎消息 -->
+          <div v-if="messages.length === 0 && appInfo?.prologue" class="message bot-message">
+            <n-avatar size="small" src="/ai-avatar.png" round />
+            <div class="message-content">
+              <div class="message-text">{{ appInfo.prologue }}</div>
+            </div>
+          </div>
+
+          <!-- 消息列表 -->
+          <div
+            v-for="(message, index) in messages"
+            :key="index"
+            class="message"
+            :class="message.type === 'user' ? 'user-message' : 'bot-message'"
+          >
+            <n-avatar
+              size="small"
+              :src="message.type === 'user' ? '/user-avatar.png' : '/ai-avatar.png'"
+              round
+            />
+            <div class="message-content">
+              <div class="message-text" v-html="formatMessage(message.content)"></div>
+              <div class="message-time">{{ formatTime(message.timestamp) }}</div>
+            </div>
+          </div>
+
+          <!-- 加载中 -->
+          <div v-if="isLoading" class="message bot-message">
+            <n-avatar size="small" src="/ai-avatar.png" round />
+            <div class="message-content">
+              <div class="message-text">
+                <n-spin size="small" />
+                <span style="margin-left: 8px">正在思考中...</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="chat-input">
+        <!-- 预设问题 -->
+        <div v-if="presetQuestions.length > 0 && messages.length === 0" class="preset-questions">
+          <n-space>
+            <n-button
+              v-for="question in presetQuestions"
+              :key="question"
+              size="small"
+              @click="handlePresetQuestion(question)"
+            >
+              {{ question }}
+            </n-button>
+          </n-space>
+        </div>
+
+        <div class="input-area">
+          <n-input
+            v-model:value="inputMessage"
+            type="textarea"
+            placeholder="请输入您的问题..."
+            :rows="3"
+            :maxlength="1000"
+            show-count
+            @keydown.enter.prevent="handleSend"
+          />
+          <n-button
+            type="primary"
+            :disabled="!inputMessage.trim() || isLoading"
+            :loading="isLoading"
+            @click="handleSend"
+          >
+            发送
+          </n-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted, nextTick } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useMessage } from 'naive-ui'
+import { ArrowLeftOutlined } from '@vicons/antd'
+import { aiAppApi } from './aiApp'
+import type { AiApp } from './type/aiApp'
+
+interface ChatMessage {
+  type: 'user' | 'bot'
+  content: string
+  timestamp: number
+}
+
+const route = useRoute()
+const router = useRouter()
+const message = useMessage()
+
+const appId = route.params.id as string
+const appInfo = ref<AiApp | null>(null)
+const messages = ref<ChatMessage[]>([])
+const inputMessage = ref('')
+const isLoading = ref(false)
+const chatContentRef = ref<HTMLElement>()
+
+const presetQuestions = ref<string[]>([])
+
+// 获取应用信息
+const loadAppInfo = async () => {
+  try {
+    const response = await aiAppApi.getAppById({ id: appId })
+    if (response.success) {
+      appInfo.value = response.result
+      // 解析预设问题
+      if (appInfo.value.presetQuestion) {
+        presetQuestions.value = appInfo.value.presetQuestion.split('\n').filter(q => q.trim())
+      }
+    }
+  } catch (error) {
+    message.error('加载应用信息失败')
+    console.error('Load app info error:', error)
+  }
+}
+
+// 获取应用图标
+const getAppIcon = (icon: string) => {
+  return icon ? `/api/sys/common/static/${icon}` : '/default-app-icon.png'
+}
+
+// 发送消息
+const handleSend = async () => {
+  if (!inputMessage.value.trim() || isLoading.value) return
+
+  const userMessage: ChatMessage = {
+    type: 'user',
+    content: inputMessage.value.trim(),
+    timestamp: Date.now()
+  }
+
+  messages.value.push(userMessage)
+  const currentInput = inputMessage.value.trim()
+  inputMessage.value = ''
+  isLoading.value = true
+
+  // 滚动到底部
+  await nextTick()
+  scrollToBottom()
+
+  try {
+    // 这里应该调用实际的AI对话接口
+    // 暂时使用模拟响应
+    await new Promise(resolve => setTimeout(resolve, 1000))
+    
+    const botMessage: ChatMessage = {
+      type: 'bot',
+      content: `您好！我收到了您的问题："${currentInput}"。这是一个模拟回复，实际的AI对话功能需要连接到具体的AI服务。`,
+      timestamp: Date.now()
+    }
+
+    messages.value.push(botMessage)
+    await nextTick()
+    scrollToBottom()
+  } catch (error) {
+    message.error('发送消息失败')
+    console.error('Send message error:', error)
+  } finally {
+    isLoading.value = false
+  }
+}
+
+// 处理预设问题
+const handlePresetQuestion = (question: string) => {
+  inputMessage.value = question
+  handleSend()
+}
+
+// 返回
+const handleBack = () => {
+  router.back()
+}
+
+// 格式化消息
+const formatMessage = (content: string) => {
+  return content.replace(/\n/g, '<br>')
+}
+
+// 格式化时间
+const formatTime = (timestamp: number) => {
+  const date = new Date(timestamp)
+  return date.toLocaleTimeString('zh-CN', { 
+    hour: '2-digit', 
+    minute: '2-digit' 
+  })
+}
+
+// 滚动到底部
+const scrollToBottom = () => {
+  if (chatContentRef.value) {
+    chatContentRef.value.scrollTop = chatContentRef.value.scrollHeight
+  }
+}
+
+onMounted(() => {
+  loadAppInfo()
+})
+</script>
+
+<style scoped lang="scss">
+.ai-app-chat {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: #f5f5f5;
+
+  .chat-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    max-width: 800px;
+    margin: 0 auto;
+    background: white;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+    .chat-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 16px 24px;
+      border-bottom: 1px solid #f0f0f0;
+      background: white;
+
+      .app-info {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+
+        .app-details {
+          .app-name {
+            margin: 0;
+            font-size: 16px;
+            font-weight: 600;
+            color: #333;
+          }
+
+          .app-desc {
+            margin: 4px 0 0 0;
+            font-size: 12px;
+            color: #666;
+          }
+        }
+      }
+    }
+
+    .chat-content {
+      flex: 1;
+      overflow-y: auto;
+      padding: 16px 24px;
+
+      .message-list {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+
+        .message {
+          display: flex;
+          gap: 12px;
+
+          &.user-message {
+            flex-direction: row-reverse;
+
+            .message-content {
+              background: #1890ff;
+              color: white;
+              border-radius: 18px 18px 4px 18px;
+            }
+          }
+
+          &.bot-message {
+            .message-content {
+              background: #f6f6f6;
+              color: #333;
+              border-radius: 18px 18px 18px 4px;
+            }
+          }
+
+          .message-content {
+            max-width: 70%;
+            padding: 12px 16px;
+
+            .message-text {
+              line-height: 1.5;
+              word-break: break-word;
+            }
+
+            .message-time {
+              font-size: 11px;
+              opacity: 0.7;
+              margin-top: 4px;
+            }
+          }
+        }
+      }
+    }
+
+    .chat-input {
+      padding: 16px 24px;
+      border-top: 1px solid #f0f0f0;
+      background: white;
+
+      .preset-questions {
+        margin-bottom: 12px;
+      }
+
+      .input-area {
+        display: flex;
+        gap: 12px;
+        align-items: flex-end;
+
+        .n-input {
+          flex: 1;
+        }
+      }
+    }
+  }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .ai-app-chat {
+    .chat-container {
+      margin: 0;
+      border-radius: 0;
+      box-shadow: none;
+
+      .chat-header,
+      .chat-content,
+      .chat-input {
+        padding-left: 16px;
+        padding-right: 16px;
+      }
+
+      .chat-content {
+        .message-list {
+          .message {
+            .message-content {
+              max-width: 85%;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/Ai/AiAppList-NaiveUI.vue b/src/views/Ai/AiAppList-NaiveUI.vue
new file mode 100644
index 0000000..453bdb2
--- /dev/null
+++ b/src/views/Ai/AiAppList-NaiveUI.vue
@@ -0,0 +1,796 @@
+<template>
+  <div class="ai-app-container">
+    <!-- 查询区域 -->
+    <n-card class="search-card" :bordered="false">
+      <n-form
+        ref="searchFormRef"
+        :model="searchForm"
+        label-placement="left"
+        :label-width="80"
+        class="search-form"
+      >
+        <n-grid :cols="24" :x-gap="16" responsive="screen">
+          <n-form-item-gi :span="searchFormSpan.name" label="应用名称" path="name">
+            <n-input
+              v-model:value="searchForm.name"
+              placeholder="请输入应用名称"
+              clearable
+              @keyup.enter="handleSearch"
+            />
+          </n-form-item-gi>
+          <n-form-item-gi :span="searchFormSpan.type" label="应用类型" path="type">
+            <n-select
+              v-model:value="searchForm.type"
+              placeholder="请选择应用类型"
+              clearable
+              :options="appTypeOptions"
+            />
+          </n-form-item-gi>
+          <n-form-item-gi :span="searchFormSpan.actions">
+            <n-space>
+              <n-button type="primary" @click="handleSearch">
+                <template #icon>
+                  <n-icon><SearchOutlined /></n-icon>
+                </template>
+                查询
+              </n-button>
+              <n-button @click="handleReset">
+                <template #icon>
+                  <n-icon><ReloadOutlined /></n-icon>
+                </template>
+                重置
+              </n-button>
+            </n-space>
+          </n-form-item-gi>
+        </n-grid>
+      </n-form>
+    </n-card>
+
+    <!-- 应用卡片区域 -->
+    <n-card class="app-cards-container" :bordered="false">
+      <n-grid
+        :cols="24"
+        :x-gap="20"
+        :y-gap="20"
+        responsive="screen"
+      >
+        <!-- 创建应用卡片 -->
+        <n-grid-item :span="gridSpan">
+          <n-card
+            class="add-app-card"
+            hoverable
+            @click="handleCreateApp"
+          >
+            <div class="add-app-content">
+              <n-icon size="24" class="add-icon">
+                <PlusOutlined />
+              </n-icon>
+              <span class="add-text">创建应用</span>
+            </div>
+          </n-card>
+        </n-grid-item>
+
+        <!-- 应用列表卡片 -->
+        <n-grid-item v-for="item in appList" :key="item.id" :span="gridSpan">
+          <n-card
+            class="app-card"
+            hoverable
+            @click="handleEditApp(item)"
+          >
+            <div class="app-header">
+              <n-avatar
+                :size="40"
+                :src="getAppIcon(item.icon)"
+                fallback-src="/default-app-icon.png"
+                round
+              />
+              <div class="app-info">
+                <div class="app-name">{{ item.name }}</div>
+                <div class="app-meta">
+                  <n-tag
+                    v-if="item.status === 'release'"
+                    type="success"
+                    size="small"
+                  >
+                    已发布
+                  </n-tag>
+                  <n-tag
+                    v-else-if="item.status === 'disable'"
+                    type="warning"
+                    size="small"
+                  >
+                    已禁用
+                  </n-tag>
+                  <span class="creator">创建者：{{ item.createBy_dictText || item.createBy }}</span>
+                </div>
+              </div>
+              <div class="app-type-tag">
+                <n-tag
+                  v-if="item.type === 'chatSimple'"
+                  type="info"
+                  size="small"
+                >
+                  简单配置
+                </n-tag>
+                <n-tag
+                  v-else-if="item.type === 'chatFlow'"
+                  type="warning"
+                  size="small"
+                >
+                  高级编排
+                </n-tag>
+              </div>
+            </div>
+
+            <div class="app-description">
+              {{ item.descr || '暂无描述' }}
+            </div>
+
+            <div class="app-actions" @click.stop>
+              <n-space>
+                <n-tooltip trigger="hover">
+                  <template #trigger>
+                    <n-button
+                      text
+                      @click="handlePreview(item.id)"
+                    >
+                      <template #icon>
+                        <n-icon><PlayCircleOutlined /></n-icon>
+                      </template>
+                    </n-button>
+                  </template>
+                  演示
+                </n-tooltip>
+
+                <n-tooltip v-if="item.status !== 'release'" trigger="hover">
+                  <template #trigger>
+                    <n-button
+                      text
+                      @click="handleDelete(item)"
+                    >
+                      <template #icon>
+                        <n-icon><DeleteOutlined /></n-icon>
+                      </template>
+                    </n-button>
+                  </template>
+                  删除
+                </n-tooltip>
+
+                <n-dropdown
+                  :options="getActionOptions(item)"
+                  @select="(key) => handleActionSelect(key, item)"
+                >
+                  <n-button text>
+                    <template #icon>
+                      <n-icon><SendOutlined /></n-icon>
+                    </template>
+                  </n-button>
+                </n-dropdown>
+              </n-space>
+            </div>
+          </n-card>
+        </n-grid-item>
+      </n-grid>
+
+      <!-- 分页 -->
+      <div class="pagination-container" v-if="appList.length > 0">
+        <n-pagination
+          v-model:page="pagination.page"
+          v-model:page-size="pagination.pageSize"
+          :total="pagination.total"
+          :page-sizes="[10, 20, 30, 50]"
+          show-size-picker
+          show-quick-jumper
+          @update:page="handlePageChange"
+          @update:page-size="handlePageSizeChange"
+        >
+          <template #prefix="{ total }">
+            共 {{ total }} 条
+          </template>
+        </n-pagination>
+      </div>
+    </n-card>
+
+    <!-- 创建/编辑应用弹窗 -->
+    <n-modal
+      v-model:show="showAppModal"
+      preset="card"
+      :title="appModalTitle"
+      :style="modalStyle"
+      :mask-closable="false"
+    >
+      <AiAppForm
+        ref="appFormRef"
+        :form-data="currentApp"
+        :is-edit="isEditMode"
+        @submit="handleAppSubmit"
+      />
+      <template #action>
+        <n-space>
+          <n-button @click="showAppModal = false">取消</n-button>
+          <n-button type="primary" @click="handleAppFormSubmit">确定</n-button>
+        </n-space>
+      </template>
+    </n-modal>
+
+    <!-- 应用设置弹窗 -->
+    <n-modal
+      v-model:show="showSettingModal"
+      preset="card"
+      title="应用设置"
+      :style="settingModalStyle"
+      :mask-closable="false"
+    >
+      <AiAppSetting
+        ref="appSettingRef"
+        :app-data="currentApp"
+        @success="handleSettingSuccess"
+      />
+    </n-modal>
+
+    <!-- 发布配置弹窗 -->
+    <n-modal
+      v-model:show="showPublishModal"
+      preset="card"
+      :title="publishModalTitle"
+      :style="publishModalStyle"
+      :mask-closable="false"
+    >
+      <AiAppPublish
+        ref="appPublishRef"
+        :app-data="currentApp"
+        :publish-type="publishType"
+      />
+    </n-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted, computed, h } from 'vue'
+import { useMessage, useDialog } from 'naive-ui'
+import {
+  SearchOutlined,
+  ReloadOutlined,
+  PlusOutlined,
+  PlayCircleOutlined,
+  DeleteOutlined,
+  SendOutlined,
+  RocketOutlined,
+  GlobalOutlined,
+  MenuOutlined
+} from '@vicons/antd'
+import { aiAppApi } from './aiApp'
+import type { AiApp, SearchForm, Pagination } from './type/aiApp'
+import AiAppForm from './component/AiAppForm.vue'
+import AiAppSetting from './component/AiAppSetting.vue'
+import AiAppPublish from './component/AiAppPublish.vue'
+
+// 组件引用
+const searchFormRef = ref()
+const appFormRef = ref()
+const appSettingRef = ref()
+const appPublishRef = ref()
+
+// 消息和对话框
+const message = useMessage()
+const dialog = useDialog()
+
+// 响应式数据
+const appList = ref<AiApp[]>([])
+const searchForm = reactive<SearchForm>({
+  name: '',
+  type: ''
+})
+
+const pagination = reactive<Pagination>({
+  page: 1,
+  pageSize: 10,
+  total: 0
+})
+
+// 弹窗状态
+const showAppModal = ref(false)
+const showSettingModal = ref(false)
+const showPublishModal = ref(false)
+const isEditMode = ref(false)
+const currentApp = ref<Partial<AiApp>>({})
+const publishType = ref<'web' | 'menu'>('web')
+
+// 应用类型选项
+const appTypeOptions = [
+  { label: '简单配置', value: 'chatSimple' },
+  { label: '高级编排', value: 'chatFlow' }
+]
+
+// 计算属性
+const appModalTitle = computed(() => isEditMode.value ? '编辑应用' : '创建应用')
+const publishModalTitle = computed(() => publishType.value === 'web' ? '嵌入网站' : '配置菜单')
+
+// 响应式网格布局
+const gridSpan = computed(() => {
+  // 根据屏幕尺寸动态调整网格列数
+  // 24列系统：超大屏6列(4span)，大屏4列(6span)，中屏3列(8span)，小屏2列(12span)，超小屏1列(24span)
+  if (typeof window !== 'undefined') {
+    const width = window.innerWidth
+    if (width >= 1600) return 4  // 超大屏：6列
+    if (width >= 1200) return 6  // 大屏：4列
+    if (width >= 992) return 8   // 中屏：3列
+    if (width >= 768) return 12  // 小屏：2列
+    return 24                    // 超小屏：1列
+  }
+  return 6 // 默认值
+})
+
+// 搜索表单响应式布局
+const searchFormSpan = computed(() => {
+  if (typeof window !== 'undefined') {
+    const width = window.innerWidth
+    if (width >= 1200) {
+      return { name: 6, type: 6, actions: 6 }  // 大屏：三列
+    }
+    if (width >= 768) {
+      return { name: 8, type: 8, actions: 8 }  // 中屏：三列紧凑
+    }
+    return { name: 24, type: 24, actions: 24 }  // 小屏：单列
+  }
+  return { name: 6, type: 6, actions: 6 } // 默认值
+})
+
+// 弹窗样式响应式
+const modalStyle = computed(() => {
+  if (typeof window !== 'undefined') {
+    const width = window.innerWidth
+    if (width <= 768) {
+      return 'width: 95vw; max-width: 500px'
+    }
+    return 'width: 800px'
+  }
+  return 'width: 800px'
+})
+
+const settingModalStyle = computed(() => {
+  if (typeof window !== 'undefined') {
+    const width = window.innerWidth
+    if (width <= 768) {
+      return 'width: 95vw; max-width: 600px'
+    }
+    if (width <= 1024) {
+      return 'width: 90vw; max-width: 900px'
+    }
+    return 'width: 1200px'
+  }
+  return 'width: 1200px'
+})
+
+const publishModalStyle = computed(() => {
+  if (typeof window !== 'undefined') {
+    const width = window.innerWidth
+    if (width <= 768) {
+      return 'width: 95vw; max-width: 400px'
+    }
+    return 'width: 600px'
+  }
+  return 'width: 600px'
+})
+
+// 获取应用图标
+const getAppIcon = (icon?: string) => {
+  return icon ? `/api/sys/common/static/${icon}` : '/default-app-icon.png'
+}
+
+// 获取操作选项
+const getActionOptions = (item: AiApp) => {
+  const options = []
+  
+  if (item.status === 'enable') {
+    options.push({
+      label: '发布',
+      key: 'release',
+      icon: () => h(RocketOutlined)
+    })
+  } else if (item.status === 'release') {
+    options.push({
+      label: '取消发布',
+      key: 'un-release',
+      icon: () => h(RocketOutlined)
+    })
+  }
+  
+  options.push({
+    label: '嵌入网站',
+    key: 'web',
+    icon: () => h(GlobalOutlined)
+  })
+  
+  // 根据路由判断是否显示菜单配置
+  const currentPath = window.location.pathname
+  if (currentPath !== '/myapps/ai/app') {
+    options.push({
+      label: '配置菜单',
+      key: 'menu',
+      icon: () => h(MenuOutlined)
+    })
+  }
+  
+  return options
+}
+
+// 加载应用列表
+const loadAppList = async () => {
+  try {
+    const params = {
+      pageNo: pagination.page,
+      pageSize: pagination.pageSize,
+      column: 'createTime',
+      order: 'desc',
+      ...searchForm
+    }
+    
+    const response = await aiAppApi.getAppList(params)
+    if (response.success) {
+      appList.value = response.result.records
+      pagination.total = response.result.total
+    } else {
+      appList.value = []
+      pagination.total = 0
+    }
+  } catch (error) {
+    message.error('加载应用列表失败')
+    console.error('Load app list error:', error)
+  }
+}
+
+// 搜索
+const handleSearch = () => {
+  pagination.page = 1
+  loadAppList()
+}
+
+// 重置
+const handleReset = () => {
+  searchFormRef.value?.restoreValidation()
+  Object.assign(searchForm, { name: '', type: '' })
+  pagination.page = 1
+  loadAppList()
+}
+
+// 分页变化
+const handlePageChange = (page: number) => {
+  pagination.page = page
+  loadAppList()
+}
+
+const handlePageSizeChange = (pageSize: number) => {
+  pagination.pageSize = pageSize
+  pagination.page = 1
+  loadAppList()
+}
+
+// 创建应用
+const handleCreateApp = () => {
+  isEditMode.value = false
+  currentApp.value = {}
+  showAppModal.value = true
+}
+
+// 编辑应用
+const handleEditApp = (app: AiApp) => {
+  isEditMode.value = true
+  currentApp.value = { ...app }
+  showSettingModal.value = true
+}
+
+// 预览应用
+const handlePreview = (appId: string) => {
+  const url = `/ai/app/chat/${appId}`
+  window.open(url, '_blank')
+}
+
+// 删除应用
+const handleDelete = (app: AiApp) => {
+  dialog.warning({
+    title: '确认删除',
+    content: `是否删除名称为"${app.name}"的应用？`,
+    positiveText: '确定',
+    negativeText: '取消',
+    onPositiveClick: async () => {
+      try {
+        await aiAppApi.deleteApp({ id: app.id, name: app.name })
+        message.success('删除成功')
+        
+        // 如果当前页只有一条数据且不是第一页，则回到上一页
+        if (appList.value.length === 1 && pagination.page > 1) {
+          pagination.page -= 1
+        }
+        
+        loadAppList()
+      } catch (error) {
+        message.error('删除失败')
+        console.error('Delete app error:', error)
+      }
+    }
+  })
+}
+
+// 操作选择
+const handleActionSelect = (key: string, app: AiApp) => {
+  currentApp.value = app
+  
+  switch (key) {
+    case 'release':
+    case 'un-release':
+      handleRelease(app, key === 'release')
+      break
+    case 'web':
+      publishType.value = 'web'
+      showPublishModal.value = true
+      break
+    case 'menu':
+      publishType.value = 'menu'
+      showPublishModal.value = true
+      break
+  }
+}
+
+// 发布/取消发布
+const handleRelease = (app: AiApp, toRelease: boolean) => {
+  const title = toRelease ? '发布应用' : '取消发布应用'
+  const content = toRelease 
+    ? '确定要发布应用吗？发布后将不允许修改应用。' 
+    : '确定要取消发布应用吗？'
+  
+  dialog.warning({
+    title,
+    content,
+    positiveText: '确定',
+    negativeText: '取消',
+    onPositiveClick: async () => {
+      try {
+        const success = await aiAppApi.releaseApp(app.id, toRelease)
+        if (success) {
+          app.status = toRelease ? 'release' : 'enable'
+          message.success(toRelease ? '发布成功' : '取消发布成功')
+        }
+      } catch (error) {
+        message.error(toRelease ? '发布失败' : '取消发布失败')
+        console.error('Release app error:', error)
+      }
+    }
+  })
+}
+
+// 应用表单提交
+const handleAppFormSubmit = () => {
+  appFormRef.value?.submit()
+}
+
+const handleAppSubmit = async (formData: AiApp) => {
+  try {
+    await aiAppApi.saveApp(formData)
+    message.success(isEditMode.value ? '编辑成功' : '创建成功')
+    showAppModal.value = false
+    
+    if (!isEditMode.value) {
+      // 创建成功后打开设置弹窗
+      currentApp.value = formData
+      showSettingModal.value = true
+    }
+    
+    loadAppList()
+  } catch (error) {
+    message.error(isEditMode.value ? '编辑失败' : '创建失败')
+    console.error('Save app error:', error)
+  }
+}
+
+// 设置成功
+const handleSettingSuccess = () => {
+  showSettingModal.value = false
+  loadAppList()
+}
+
+// 初始化
+onMounted(() => {
+  loadAppList()
+})
+</script>
+
+<style scoped lang="scss">
+.ai-app-container {
+  padding: 24px;
+  background-color: #f5f5f5;
+  min-height: calc(100vh - 64px);
+
+  // 响应式padding
+  @media (max-width: 768px) {
+    padding: 16px;
+  }
+
+  @media (max-width: 480px) {
+    padding: 12px;
+  }
+
+  .search-card {
+    margin-bottom: 16px;
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+
+    .search-form {
+      .n-form-item {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .app-cards-container {
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+
+    .add-app-card {
+      height: 180px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      border: 2px dashed #d9d9d9;
+      background: #fafafa;
+      border-radius: 8px;
+      transition: all 0.3s ease;
+
+      // 响应式高度
+      @media (max-width: 768px) {
+        height: 160px;
+      }
+
+      @media (max-width: 480px) {
+        height: 140px;
+      }
+
+      &:hover {
+        border-color: #1890ff;
+        background-color: #f0f8ff;
+      }
+
+      .add-app-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 8px;
+
+        .add-icon {
+          color: #1890ff;
+          padding: 8px;
+          background: #f0f8ff;
+          border-radius: 50%;
+        }
+
+        .add-text {
+          font-size: 16px;
+          font-weight: 500;
+          color: #333;
+        }
+      }
+    }
+
+    .app-card {
+      height: 180px;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      position: relative;
+      border-radius: 8px;
+      border: 1px solid #f0f0f0;
+
+      // 响应式高度
+      @media (max-width: 768px) {
+        height: 160px;
+      }
+
+      @media (max-width: 480px) {
+        height: 140px;
+      }
+
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+        border-color: #1890ff;
+      }
+
+      .app-header {
+        display: flex;
+        align-items: flex-start;
+        gap: 12px;
+        margin-bottom: 12px;
+
+        .app-info {
+          flex: 1;
+          min-width: 0;
+
+          .app-name {
+            font-size: 16px;
+            font-weight: 600;
+            margin-bottom: 4px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            color: #333;
+          }
+
+          .app-meta {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            font-size: 12px;
+
+            .creator {
+              color: #666;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+          }
+        }
+
+        .app-type-tag {
+          position: absolute;
+          top: 8px;
+          right: 8px;
+        }
+      }
+
+      .app-description {
+        color: #666;
+        font-size: 14px;
+        line-height: 1.4;
+        margin-bottom: 16px;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .app-actions {
+        position: absolute;
+        bottom: 16px;
+        left: 16px;
+        right: 16px;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        gap: 8px;
+      }
+    }
+
+    .pagination-container {
+      display: flex;
+      justify-content: flex-end;
+      margin-top: 24px;
+      padding: 16px 0;
+    }
+  }
+}
+
+:deep(.n-card) {
+  .n-card__content {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+:deep(.n-grid-item) {
+  display: flex;
+
+  .n-card {
+    width: 100%;
+  }
+}
+
+:deep(.n-button--text-type) {
+  &:hover {
+    background-color: rgba(24, 144, 255, 0.1);
+  }
+}
+</style>
diff --git a/src/views/Ai/aiApp.ts b/src/views/Ai/aiApp.ts
new file mode 100644
index 0000000..e4408f6
--- /dev/null
+++ b/src/views/Ai/aiApp.ts
@@ -0,0 +1,245 @@
+import { http } from './utils/http'
+import type { AiApp, AppListParams, AppListResponse, ApiResponse } from './type/aiApp'
+
+/**
+ * AI应用相关API接口
+ */
+export const aiAppApi = {
+  /**
+   * 获取应用列表
+   * @param params 查询参数
+   */
+  getAppList(params: AppListParams): Promise<AppListResponse> {
+    return http.get('/airag/app/list', { params })
+  },
+
+  /**
+   * 根据ID查询应用详情
+   * @param params 查询参数
+   */
+  getAppById(params: { id: string }): Promise<ApiResponse<AiApp>> {
+    return http.get('/airag/app/queryById', { params })
+  },
+
+  /**
+   * 保存应用（新增或编辑）
+   * @param data 应用数据
+   */
+  saveApp(data: Partial<AiApp>): Promise<ApiResponse<any>> {
+    return http.put('/airag/app/edit', data)
+  },
+
+  /**
+   * 删除应用
+   * @param params 删除参数
+   */
+  deleteApp(params: { id: string; name: string }): Promise<ApiResponse<any>> {
+    return http.delete('/airag/app/delete', { params })
+  },
+
+  /**
+   * 发布/取消发布应用
+   * @param appId 应用ID
+   * @param release 是否发布
+   */
+  releaseApp(appId: string, release: boolean): Promise<boolean> {
+    return http.post('/airag/app/release', null, {
+      params: {
+        id: appId,
+        release: release
+      }
+    }).then(response => {
+      return response.success || false
+    })
+  },
+
+  /**
+   * 批量查询知识库
+   * @param params 查询参数
+   */
+  getKnowledgeBatch(params: { ids: string }): Promise<ApiResponse<any[]>> {
+    return http.get('/airag/knowledge/query/batch/byId', { params })
+  },
+
+  /**
+   * 根据ID查询流程
+   * @param params 查询参数
+   */
+  getFlowById(params: { id: string }): Promise<ApiResponse<any>> {
+    return http.get('/airag/flow/queryById', { params })
+  },
+
+  /**
+   * 生成提示词
+   * @param params 生成参数
+   */
+  generatePrompt(params: { prompt: string }): Promise<ReadableStream> {
+    return http.post(`/airag/app/prompt/generate?prompt=${encodeURIComponent(params.prompt)}`, null, {
+      responseType: 'stream',
+      timeout: 5 * 60 * 1000
+    })
+  }
+}
+
+/**
+ * 应用类型字典
+ */
+export const APP_TYPE_DICT = {
+  chatSimple: '简单配置',
+  chatFlow: '高级编排'
+} as const
+
+/**
+ * 应用状态字典
+ */
+export const APP_STATUS_DICT = {
+  enable: '启用',
+  disable: '禁用',
+  release: '已发布'
+} as const
+
+/**
+ * 获取应用类型标签
+ */
+export const getAppTypeLabel = (type: string): string => {
+  return APP_TYPE_DICT[type as keyof typeof APP_TYPE_DICT] || type
+}
+
+/**
+ * 获取应用状态标签
+ */
+export const getAppStatusLabel = (status: string): string => {
+  return APP_STATUS_DICT[status as keyof typeof APP_STATUS_DICT] || status
+}
+
+/**
+ * 获取应用图标URL
+ */
+export const getAppIconUrl = (icon?: string): string => {
+  if (!icon) {
+    return '/images/default-app-icon.png'
+  }
+  
+  // 如果是完整URL，直接返回
+  if (icon.startsWith('http')) {
+    return icon
+  }
+  
+  // 拼接文件访问URL
+  return `/api/sys/common/static/${icon}`
+}
+
+/**
+ * 应用操作权限检查
+ */
+export const checkAppPermission = (app: AiApp, action: string): boolean => {
+  switch (action) {
+    case 'edit':
+      // 已发布的应用不允许编辑
+      return app.status !== 'release'
+    case 'delete':
+      // 已发布的应用不允许删除
+      return app.status !== 'release'
+    case 'release':
+      // 只有启用状态的应用可以发布
+      return app.status === 'enable'
+    case 'un-release':
+      // 只有已发布的应用可以取消发布
+      return app.status === 'release'
+    default:
+      return true
+  }
+}
+
+/**
+ * 格式化应用数据用于显示
+ */
+export const formatAppForDisplay = (app: AiApp) => {
+  return {
+    ...app,
+    typeLabel: getAppTypeLabel(app.type),
+    statusLabel: getAppStatusLabel(app.status),
+    iconUrl: getAppIconUrl(app.icon),
+    canEdit: checkAppPermission(app, 'edit'),
+    canDelete: checkAppPermission(app, 'delete'),
+    canRelease: checkAppPermission(app, 'release'),
+    canUnRelease: checkAppPermission(app, 'un-release')
+  }
+}
+
+/**
+ * 构建应用聊天URL
+ */
+export const buildChatUrl = (appId: string, mode?: string): string => {
+  const baseUrl = '/ai/app/chat'
+  if (mode) {
+    return `${baseUrl}/${appId}?mode=${mode}`
+  }
+  return `${baseUrl}/${appId}`
+}
+
+/**
+ * 构建应用嵌入代码
+ */
+export const buildEmbedCode = (appId: string, type: 'iframe' | 'script' = 'iframe'): string => {
+  const baseUrl = window.location.origin
+  const chatUrl = `${baseUrl}/ai/app/chat/${appId}`
+  
+  if (type === 'iframe') {
+    return `<iframe src="${chatUrl}" width="100%" height="600" frameborder="0"></iframe>`
+  } else {
+    return `<script>
+  (function() {
+    var script = document.createElement('script');
+    script.src = '${baseUrl}/js/ai-chat-widget.js';
+    script.setAttribute('data-app-id', '${appId}');
+    document.head.appendChild(script);
+  })();
+</script>`
+  }
+}
+
+/**
+ * 生成菜单配置SQL
+ */
+export const generateMenuSql = (app: AiApp): string => {
+  const menuId = `ai_app_${app.id}`
+  const menuUrl = `/ai/chat/${app.id}`
+  
+  return `-- AI应用菜单配置SQL
+INSERT INTO sys_permission(
+  id, parent_id, name, url, component, component_name, 
+  redirect, menu_type, perms, perms_type, sort_no, 
+  always_show, icon, is_route, is_leaf, keep_alive, 
+  hidden, hide_tab, description, status, del_flag, 
+  rule_flag, create_by, create_time, internal_or_external
+) VALUES (
+  '${menuId}', 
+  NULL, 
+  '${app.name}', 
+  '${menuUrl}', 
+  'super/airag/aiapp/chat/AiChat', 
+  NULL, 
+  NULL, 
+  1, 
+  NULL, 
+  '0', 
+  1.00, 
+  0, 
+  'ant-design:robot-outlined', 
+  1, 
+  1, 
+  0, 
+  0, 
+  0, 
+  '${app.descr || app.name}', 
+  '1', 
+  0, 
+  0, 
+  'admin', 
+  NOW(), 
+  0
+);`
+}
+
+export default aiAppApi
diff --git a/src/views/Ai/component/AiAppForm.vue b/src/views/Ai/component/AiAppForm.vue
new file mode 100644
index 0000000..cb91559
--- /dev/null
+++ b/src/views/Ai/component/AiAppForm.vue
@@ -0,0 +1,382 @@
+<template>
+  <div class="ai-app-form">
+    <n-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-placement="left"
+      :label-width="100"
+      require-mark-placement="right-hanging"
+    >
+      <n-form-item label="应用名称" path="name">
+        <n-input
+          v-model:value="formData.name"
+          placeholder="请输入应用名称"
+          :maxlength="64"
+          show-count
+          clearable
+        />
+      </n-form-item>
+
+      <n-form-item label="应用描述" path="descr">
+        <n-input
+          v-model:value="formData.descr"
+          type="textarea"
+          placeholder="描述该应用的应用场景及用途"
+          :rows="4"
+          :maxlength="256"
+          show-count
+          clearable
+        />
+      </n-form-item>
+
+      <n-form-item label="应用图标" path="icon">
+        <div class="icon-upload-container">
+          <n-upload
+            v-model:file-list="iconFileList"
+            :max="1"
+            list-type="image-card"
+            :on-before-upload="handleBeforeUpload"
+            :on-finish="handleUploadFinish"
+            :on-remove="handleRemoveIcon"
+            accept="image/*"
+          >
+            <n-upload-dragger v-if="!formData.icon">
+              <div class="upload-content">
+                <n-icon size="48" :depth="3">
+                  <CloudUploadOutlined />
+                </n-icon>
+                <n-text style="font-size: 16px">
+                  点击或者拖动文件到该区域来上传
+                </n-text>
+                <n-p depth="3" style="margin: 8px 0 0 0">
+                  支持 JPG、PNG、GIF 格式，建议尺寸 200x200px
+                </n-p>
+              </div>
+            </n-upload-dragger>
+          </n-upload>
+          
+          <div v-if="formData.icon && !iconFileList.length" class="current-icon">
+            <n-image
+              :src="getIconUrl(formData.icon)"
+              width="100"
+              height="100"
+              object-fit="cover"
+              preview-disabled
+            />
+            <n-button
+              size="small"
+              type="error"
+              ghost
+              @click="handleRemoveCurrentIcon"
+              class="remove-btn"
+            >
+              移除
+            </n-button>
+          </div>
+        </div>
+      </n-form-item>
+
+      <n-form-item v-if="!isEdit" label="应用类型" path="type">
+        <div class="app-type-selector">
+          <n-radio-group v-model:value="formData.type">
+            <n-space vertical>
+              <n-card
+                v-for="option in appTypeOptions"
+                :key="option.value"
+                class="type-option-card"
+                :class="{ active: formData.type === option.value }"
+                hoverable
+                @click="formData.type = option.value"
+              >
+                <div class="type-option-content">
+                  <n-radio :value="option.value" />
+                  <div class="type-info">
+                    <div class="type-title">{{ option.label }}</div>
+                    <div class="type-description">{{ option.description }}</div>
+                  </div>
+                  <n-icon v-if="option.icon" size="24" class="type-icon">
+                    <component :is="option.icon" />
+                  </n-icon>
+                </div>
+              </n-card>
+            </n-space>
+          </n-radio-group>
+        </div>
+      </n-form-item>
+    </n-form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watch, computed } from 'vue'
+import { useMessage } from 'naive-ui'
+import { CloudUploadOutlined, RobotOutlined, SettingOutlined } from '@vicons/antd'
+import type { FormInst, FormRules, UploadFileInfo } from 'naive-ui'
+import type { AiApp, AppFormData } from '../type/aiApp'
+import { uploadApi } from '../upload'
+
+interface Props {
+  formData: Partial<AiApp>
+  isEdit?: boolean
+}
+
+interface Emits {
+  (e: 'submit', data: AppFormData): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isEdit: false
+})
+
+const emit = defineEmits<Emits>()
+
+const message = useMessage()
+const formRef = ref<FormInst>()
+const iconFileList = ref<UploadFileInfo[]>([])
+
+// 表单数据
+const formData = reactive<AppFormData>({
+  name: '',
+  descr: '',
+  icon: '',
+  type: 'chatSimple',
+  ...props.formData
+})
+
+// 应用类型选项
+const appTypeOptions = [
+  {
+    label: '简单配置',
+    value: 'chatSimple',
+    description: '通过简单的配置快速创建AI应用，适合大多数场景',
+    icon: RobotOutlined
+  },
+  {
+    label: '高级编排',
+    value: 'chatFlow',
+    description: '通过流程编排创建复杂的AI应用，支持多步骤处理',
+    icon: SettingOutlined
+  }
+]
+
+// 表单验证规则
+const formRules: FormRules = {
+  name: [
+    { required: true, message: '请输入应用名称', trigger: 'blur' },
+    { min: 1, max: 64, message: '应用名称长度在1-64个字符', trigger: 'blur' }
+  ],
+  descr: [
+    { max: 256, message: '应用描述不能超过256个字符', trigger: 'blur' }
+  ],
+  type: [
+    { required: true, message: '请选择应用类型', trigger: 'change' }
+  ]
+}
+
+// 获取图标URL
+const getIconUrl = (icon: string) => {
+  if (!icon) return ''
+  if (icon.startsWith('http')) return icon
+  return `/api/sys/common/static/${icon}`
+}
+
+// 上传前检查
+const handleBeforeUpload = (data: { file: UploadFileInfo }) => {
+  const file = data.file.file
+  if (!file) return false
+  
+  // 检查文件类型
+  const isImage = file.type.startsWith('image/')
+  if (!isImage) {
+    message.error('只能上传图片文件')
+    return false
+  }
+  
+  // 检查文件大小（2MB）
+  const isLt2M = file.size / 1024 / 1024 < 2
+  if (!isLt2M) {
+    message.error('图片大小不能超过2MB')
+    return false
+  }
+  
+  return true
+}
+
+// 上传完成
+const handleUploadFinish = async ({ file, event }: { file: UploadFileInfo, event?: ProgressEvent }) => {
+  try {
+    if (file.file) {
+      const response = await uploadApi.uploadImage(file.file)
+      if (response.success) {
+        formData.icon = response.result.url
+        message.success('图标上传成功')
+      } else {
+        message.error('图标上传失败')
+        iconFileList.value = []
+      }
+    }
+  } catch (error) {
+    message.error('图标上传失败')
+    iconFileList.value = []
+    console.error('Upload error:', error)
+  }
+}
+
+// 移除图标
+const handleRemoveIcon = () => {
+  formData.icon = ''
+  iconFileList.value = []
+}
+
+// 移除当前图标
+const handleRemoveCurrentIcon = () => {
+  formData.icon = ''
+}
+
+// 监听props变化
+watch(() => props.formData, (newData) => {
+  Object.assign(formData, newData)
+}, { deep: true, immediate: true })
+
+// 提交表单
+const submit = async () => {
+  try {
+    await formRef.value?.validate()
+    emit('submit', { ...formData })
+  } catch (error) {
+    message.error('请检查表单填写')
+    console.error('Form validation error:', error)
+  }
+}
+
+// 重置表单
+const reset = () => {
+  formRef.value?.restoreValidation()
+  Object.assign(formData, {
+    name: '',
+    descr: '',
+    icon: '',
+    type: 'chatSimple'
+  })
+  iconFileList.value = []
+}
+
+// 暴露方法
+defineExpose({
+  submit,
+  reset,
+  formData
+})
+</script>
+
+<style scoped lang="scss">
+.ai-app-form {
+  .icon-upload-container {
+    width: 100%;
+    
+    .upload-content {
+      text-align: center;
+      padding: 20px;
+    }
+    
+    .current-icon {
+      position: relative;
+      display: inline-block;
+      
+      .remove-btn {
+        position: absolute;
+        top: -8px;
+        right: -8px;
+      }
+    }
+  }
+  
+  .app-type-selector {
+    width: 100%;
+    
+    .type-option-card {
+      cursor: pointer;
+      transition: all 0.3s ease;
+      border: 2px solid transparent;
+      
+      &:hover {
+        border-color: var(--n-color-target);
+      }
+      
+      &.active {
+        border-color: var(--n-color-target);
+        background-color: var(--n-color-target-light);
+      }
+      
+      .type-option-content {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+
+        // 响应式布局
+        @media (max-width: 768px) {
+          flex-direction: column;
+          text-align: center;
+          gap: 8px;
+        }
+
+        .type-info {
+          flex: 1;
+
+          .type-title {
+            font-weight: 600;
+            font-size: 16px;
+            margin-bottom: 4px;
+
+            // 响应式字体
+            @media (max-width: 768px) {
+              font-size: 14px;
+            }
+          }
+
+          .type-description {
+            color: var(--n-text-color-2);
+            font-size: 14px;
+            line-height: 1.4;
+
+            // 响应式字体
+            @media (max-width: 768px) {
+              font-size: 12px;
+            }
+          }
+        }
+
+        .type-icon {
+          color: var(--n-color-target);
+        }
+      }
+    }
+  }
+
+  // 响应式表单布局
+  @media (max-width: 768px) {
+    :deep(.n-form-item) {
+      .n-form-item-label {
+        text-align: left;
+      }
+    }
+
+    .icon-upload-container {
+      .upload-content {
+        padding: 16px;
+      }
+    }
+  }
+}
+
+:deep(.n-upload-file-list) {
+  .n-upload-file {
+    .n-upload-file-info {
+      .n-upload-file-info__thumbnail {
+        border-radius: 8px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/Ai/component/AiAppPublish-Simple.vue b/src/views/Ai/component/AiAppPublish-Simple.vue
new file mode 100644
index 0000000..1b28819
--- /dev/null
+++ b/src/views/Ai/component/AiAppPublish-Simple.vue
@@ -0,0 +1,322 @@
+<template>
+  <div class="ai-app-publish">
+    <!-- 嵌入网站 -->
+    <div v-if="publishType === 'web'" class="web-embed">
+      <div class="embed-type-selector">
+        <n-radio-group v-model:value="embedType">
+          <n-space>
+            <n-card
+              class="embed-option"
+              :class="{ active: embedType === 'iframe' }"
+              hoverable
+              @click="embedType = 'iframe'"
+            >
+              <div class="embed-option-content">
+                <n-radio value="iframe" />
+                <div class="embed-info">
+                  <div class="embed-title">iframe 嵌入</div>
+                  <div class="embed-desc">完整页面嵌入</div>
+                </div>
+              </div>
+            </n-card>
+            
+            <n-card
+              class="embed-option"
+              :class="{ active: embedType === 'script' }"
+              hoverable
+              @click="embedType = 'script'"
+            >
+              <div class="embed-option-content">
+                <n-radio value="script" />
+                <div class="embed-info">
+                  <div class="embed-title">脚本嵌入</div>
+                  <div class="embed-desc">悬浮窗口形式</div>
+                </div>
+              </div>
+            </n-card>
+          </n-space>
+        </n-radio-group>
+      </div>
+      
+      <div class="embed-config">
+        <h4>嵌入配置</h4>
+        <n-form label-placement="left" :label-width="100">
+          <n-form-item v-if="embedType === 'iframe'" label="宽度">
+            <n-input v-model:value="embedConfig.width" placeholder="100%" />
+          </n-form-item>
+          <n-form-item v-if="embedType === 'iframe'" label="高度">
+            <n-input v-model:value="embedConfig.height" placeholder="600px" />
+          </n-form-item>
+        </n-form>
+      </div>
+      
+      <div class="embed-code">
+        <div class="code-header">
+          <h4>{{ embedType === 'iframe' ? 'HTML' : 'JavaScript' }} 代码</h4>
+          <n-button type="primary" @click="copyEmbedCode">
+            <template #icon>
+              <n-icon><CopyOutlined /></n-icon>
+            </template>
+            复制代码
+          </n-button>
+        </div>
+        <n-input
+          type="textarea"
+          :value="embedCode"
+          readonly
+          :rows="8"
+        />
+      </div>
+    </div>
+    
+    <!-- 配置菜单 -->
+    <div v-else-if="publishType === 'menu'" class="menu-config">
+      <n-form
+        :model="menuConfig"
+        label-placement="left"
+        :label-width="100"
+      >
+        <n-form-item label="菜单名称">
+          <n-input
+            v-model:value="menuConfig.menuName"
+            placeholder="请输入菜单名称"
+            readonly
+          />
+        </n-form-item>
+        
+        <n-form-item label="菜单地址">
+          <n-input
+            v-model:value="menuConfig.menuUrl"
+            placeholder="菜单访问地址"
+            readonly
+          />
+        </n-form-item>
+        
+        <n-form-item label="菜单图标">
+          <n-input
+            v-model:value="menuConfig.icon"
+            placeholder="菜单图标"
+          />
+        </n-form-item>
+        
+        <n-form-item label="排序号">
+          <n-input-number
+            v-model:value="menuConfig.sortNo"
+            :min="0"
+            placeholder="排序号"
+          />
+        </n-form-item>
+      </n-form>
+      
+      <div class="menu-actions">
+        <n-space>
+          <n-button type="primary" @click="copyMenuConfig">
+            复制菜单配置
+          </n-button>
+          <n-button type="primary" @click="copySqlScript">
+            复制SQL脚本
+          </n-button>
+        </n-space>
+      </div>
+      
+      <div class="sql-script">
+        <div class="code-header">
+          <h4>SQL 脚本</h4>
+          <n-button text @click="copySqlScript">
+            <template #icon>
+              <n-icon><CopyOutlined /></n-icon>
+            </template>
+            复制
+          </n-button>
+        </div>
+        <n-input
+          type="textarea"
+          :value="sqlScript"
+          readonly
+          :rows="10"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, reactive, watch } from 'vue'
+import { useMessage } from 'naive-ui'
+import { CopyOutlined } from '@vicons/antd'
+import type { AiApp } from '../type/aiApp'
+import { copyToClipboard } from '../utils/clipboard'
+
+interface Props {
+  appData: AiApp
+  publishType: 'web' | 'menu'
+}
+
+const props = defineProps<Props>()
+const message = useMessage()
+
+// 嵌入类型
+const embedType = ref<'iframe' | 'script'>('iframe')
+
+// 嵌入配置
+const embedConfig = reactive({
+  width: '100%',
+  height: '600px'
+})
+
+// 菜单配置
+const menuConfig = reactive({
+  menuName: props.appData.name,
+  menuUrl: `/ai/chat/${props.appData.id}`,
+  icon: 'ant-design:robot-outlined',
+  sortNo: 1
+})
+
+// 嵌入代码
+const embedCode = computed(() => {
+  const baseUrl = window.location.origin
+  const chatUrl = `${baseUrl}/ai/app/chat/${props.appData.id}`
+  
+  if (embedType.value === 'iframe') {
+    return `<iframe src="${chatUrl}" width="${embedConfig.width}" height="${embedConfig.height}" frameborder="0"></iframe>`
+  } else {
+    return `<script>
+(function() {
+  var script = document.createElement('script');
+  script.src = '${baseUrl}/js/ai-chat-widget.js';
+  script.setAttribute('data-app-id', '${props.appData.id}');
+  document.head.appendChild(script);
+})();
+</script>`
+  }
+})
+
+// SQL脚本
+const sqlScript = computed(() => {
+  const menuId = `ai_app_${props.appData.id}`
+  return `INSERT INTO sys_permission(id, name, url, icon, sort_no) VALUES ('${menuId}', '${menuConfig.menuName}', '${menuConfig.menuUrl}', '${menuConfig.icon}', ${menuConfig.sortNo});`
+})
+
+// 复制嵌入代码
+const copyEmbedCode = async () => {
+  const success = await copyToClipboard(embedCode.value)
+  if (success) {
+    message.success('代码已复制到剪贴板')
+  } else {
+    message.error('复制失败')
+  }
+}
+
+// 复制菜单配置
+const copyMenuConfig = async () => {
+  const config = JSON.stringify(menuConfig, null, 2)
+  const success = await copyToClipboard(config)
+  if (success) {
+    message.success('菜单配置已复制到剪贴板')
+  } else {
+    message.error('复制失败')
+  }
+}
+
+// 复制SQL脚本
+const copySqlScript = async () => {
+  const success = await copyToClipboard(sqlScript.value)
+  if (success) {
+    message.success('SQL脚本已复制到剪贴板')
+  } else {
+    message.error('复制失败')
+  }
+}
+
+// 监听应用数据变化
+watch(() => props.appData, (newData) => {
+  menuConfig.menuName = newData.name
+  menuConfig.menuUrl = `/ai/chat/${newData.id}`
+}, { deep: true })
+</script>
+
+<style scoped lang="scss">
+.ai-app-publish {
+  .web-embed {
+    .embed-type-selector {
+      margin-bottom: 24px;
+      
+      .embed-option {
+        cursor: pointer;
+        transition: all 0.3s ease;
+        border: 2px solid transparent;
+        
+        &:hover {
+          border-color: #1890ff;
+        }
+        
+        &.active {
+          border-color: #1890ff;
+          background-color: #f0f8ff;
+        }
+        
+        .embed-option-content {
+          display: flex;
+          align-items: center;
+          gap: 12px;
+          
+          .embed-info {
+            flex: 1;
+            
+            .embed-title {
+              font-weight: 600;
+              font-size: 16px;
+              margin-bottom: 4px;
+            }
+            
+            .embed-desc {
+              color: #666;
+              font-size: 14px;
+            }
+          }
+        }
+      }
+    }
+    
+    .embed-config {
+      margin-bottom: 24px;
+      
+      h4 {
+        margin-bottom: 16px;
+      }
+    }
+    
+    .embed-code {
+      .code-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 12px;
+        
+        h4 {
+          margin: 0;
+        }
+      }
+    }
+  }
+  
+  .menu-config {
+    .menu-actions {
+      margin: 24px 0;
+    }
+    
+    .sql-script {
+      .code-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 12px;
+        
+        h4 {
+          margin: 0;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/Ai/component/AiAppPublish.vue b/src/views/Ai/component/AiAppPublish.vue
new file mode 100644
index 0000000..989f520
--- /dev/null
+++ b/src/views/Ai/component/AiAppPublish.vue
@@ -0,0 +1,643 @@
+<template>
+  <div class="ai-app-publish">
+    <!-- 嵌入网站 -->
+    <div v-if="publishType === 'web'" class="web-embed">
+      <div class="embed-type-selector">
+        <n-radio-group v-model:value="embedType">
+          <n-space>
+            <n-card
+              class="embed-option"
+              :class="{ active: embedType === 'iframe' }"
+              hoverable
+              @click="embedType = 'iframe'"
+            >
+              <div class="embed-option-content">
+                <n-radio value="iframe" />
+                <div class="embed-info">
+                  <div class="embed-title">iframe 嵌入</div>
+                  <div class="embed-desc">完整页面嵌入</div>
+                </div>
+              </div>
+            </n-card>
+
+            <n-card
+              class="embed-option"
+              :class="{ active: embedType === 'script' }"
+              hoverable
+              @click="embedType = 'script'"
+            >
+              <div class="embed-option-content">
+                <n-radio value="script" />
+                <div class="embed-info">
+                  <div class="embed-title">脚本嵌入</div>
+                  <div class="embed-desc">悬浮窗口形式</div>
+                </div>
+              </div>
+            </n-card>
+          </n-space>
+        </n-radio-group>
+      </div>
+
+      <div class="embed-config">
+        <h4>嵌入配置</h4>
+        <n-form label-placement="left" :label-width="100">
+          <n-form-item v-if="embedType === 'iframe'" label="宽度">
+            <n-input v-model:value="embedConfig.width" placeholder="100%" />
+          </n-form-item>
+          <n-form-item v-if="embedType === 'iframe'" label="高度">
+            <n-input v-model:value="embedConfig.height" placeholder="600px" />
+          </n-form-item>
+          <n-form-item label="显示标题">
+            <n-switch v-model:value="embedConfig.showHeader" />
+          </n-form-item>
+        </n-form>
+      </div>
+
+      <div class="embed-code">
+        <div class="code-header">
+          <h4>{{ embedType === 'iframe' ? 'HTML' : 'JavaScript' }} 代码</h4>
+          <n-button type="primary" @click="copyEmbedCode">
+            <template #icon>
+              <n-icon><CopyOutlined /></n-icon>
+            </template>
+            复制代码
+          </n-button>
+        </div>
+        <n-input
+          type="textarea"
+          :value="embedCode"
+          readonly
+          :rows="8"
+        />
+      </div>
+
+      <div class="embed-preview">
+        <h4>预览效果</h4>
+        <n-card>
+          <div class="preview-container">
+            <div v-if="embedType === 'iframe'" class="iframe-preview">
+              <p>iframe 预览：{{ previewUrl }}</p>
+            </div>
+            <div v-else class="script-preview">
+              <div class="chat-widget">
+                <div class="widget-header">
+                  <span>{{ appData.name }}</span>
+                  <n-button text size="small">
+                    <template #icon>
+                      <n-icon><CloseOutlined /></n-icon>
+                    </template>
+                  </n-button>
+                </div>
+                <div class="widget-body">
+                  <div class="message">{{ appData.prologue || '您好，我是AI助手，有什么可以帮助您的吗？' }}</div>
+                </div>
+                <div class="widget-input">
+                  <n-input placeholder="输入消息..." />
+                </div>
+              </div>
+            </div>
+          </div>
+        </n-card>
+      </div>
+    </div>
+
+    <!-- 配置菜单 -->
+    <div v-else-if="publishType === 'menu'" class="menu-config">
+      <n-form
+        :model="menuConfig"
+        label-placement="left"
+        :label-width="100"
+      >
+        <n-form-item label="菜单名称">
+          <n-input
+            v-model:value="menuConfig.menuName"
+            placeholder="请输入菜单名称"
+            readonly
+          />
+        </n-form-item>
+
+        <n-form-item label="菜单地址">
+          <n-input
+            v-model:value="menuConfig.menuUrl"
+            placeholder="菜单访问地址"
+            readonly
+          />
+        </n-form-item>
+
+        <n-form-item label="菜单图标">
+          <n-input
+            v-model:value="menuConfig.icon"
+            placeholder="菜单图标"
+          />
+        </n-form-item>
+
+        <n-form-item label="排序号">
+          <n-input-number
+            v-model:value="menuConfig.sortNo"
+            :min="0"
+            placeholder="排序号"
+          />
+        </n-form-item>
+      </n-form>
+
+      <div class="menu-actions">
+        <n-space>
+          <n-button type="primary" @click="copyMenuConfig">
+            复制菜单配置
+          </n-button>
+          <n-button type="primary" @click="copySqlScript">
+            复制SQL脚本
+          </n-button>
+        </n-space>
+      </div>
+
+      <div class="sql-script">
+        <div class="code-header">
+          <h4>SQL 脚本</h4>
+          <n-button text @click="copySqlScript">
+            <template #icon>
+              <n-icon><CopyOutlined /></n-icon>
+            </template>
+            复制
+          </n-button>
+        </div>
+        <n-input
+          type="textarea"
+          :value="sqlScript"
+          readonly
+          :rows="10"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, reactive, watch } from 'vue'
+import { useMessage } from 'naive-ui'
+import { CopyOutlined, CloseOutlined } from '@vicons/antd'
+import type { AiApp } from '../type/aiApp'
+import { copyToClipboard } from '../utils/clipboard'
+
+interface Props {
+  appData: AiApp
+  publishType: 'web' | 'menu'
+}
+
+const props = defineProps<Props>()
+const message = useMessage()
+
+// 嵌入类型
+const embedType = ref<'iframe' | 'script'>('iframe')
+
+// 嵌入配置
+const embedConfig = reactive({
+  width: '100%',
+  height: '600px',
+  theme: 'light',
+  showHeader: true,
+  showFooter: false
+})
+
+// 菜单配置
+const menuConfig = reactive({
+  menuName: props.appData.name,
+  menuUrl: `/ai/chat/${props.appData.id}`,
+  icon: 'ant-design:robot-outlined',
+  sortNo: 1
+})
+
+// 主题选项
+const themeOptions = [
+  { label: '浅色主题', value: 'light' },
+  { label: '深色主题', value: 'dark' },
+  { label: '自动主题', value: 'auto' }
+]
+
+// 预览URL
+const previewUrl = computed(() => {
+  const baseUrl = window.location.origin
+  const params = new URLSearchParams({
+    theme: embedConfig.theme,
+    showHeader: embedConfig.showHeader.toString(),
+    showFooter: embedConfig.showFooter.toString()
+  })
+  return `${baseUrl}/ai/app/chat/${props.appData.id}?${params.toString()}`
+})
+
+// 嵌入代码
+const embedCode = computed(() => {
+  if (embedType.value === 'iframe') {
+    return generateIframeCode()
+  } else {
+    return generateScriptCode()
+  }
+})
+
+// SQL脚本
+const sqlScript = computed(() => {
+  return generateMenuSql()
+})
+
+// 生成iframe代码
+const generateIframeCode = () => {
+  const params = new URLSearchParams({
+    theme: embedConfig.theme,
+    showHeader: embedConfig.showHeader.toString(),
+    showFooter: embedConfig.showFooter.toString()
+  })
+  
+  const url = `${window.location.origin}/ai/app/chat/${props.appData.id}?${params.toString()}`
+  
+  return `<iframe 
+  src="${url}"
+  width="${embedConfig.width}"
+  height="${embedConfig.height}"
+  frameborder="0"
+  style="border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
+</iframe>`
+}
+
+// 生成脚本代码
+const generateScriptCode = () => {
+  return `<!-- AI聊天组件 -->
+<script>
+(function() {
+  // 创建聊天组件配置
+  window.AIChatConfig = {
+    appId: '${props.appData.id}',
+    theme: '${embedConfig.theme}',
+    showHeader: ${embedConfig.showHeader},
+    showFooter: ${embedConfig.showFooter},
+    position: 'bottom-right', // 位置：bottom-right, bottom-left, top-right, top-left
+    trigger: 'button' // 触发方式：button, auto
+  };
+
+  // 加载聊天组件脚本
+  var script = document.createElement('script');
+  script.src = '${window.location.origin}/js/ai-chat-widget.js';
+  script.async = true;
+  document.head.appendChild(script);
+
+  // 加载样式文件
+  var link = document.createElement('link');
+  link.rel = 'stylesheet';
+  link.href = '${window.location.origin}/css/ai-chat-widget.css';
+  document.head.appendChild(link);
+})();
+<\/script>`
+}
+
+// 生成菜单SQL
+const generateMenuSql = () => {
+  const menuId = `ai_app_${props.appData.id}`
+  const now = new Date().toISOString().slice(0, 19).replace('T', ' ')
+  
+  return `-- AI应用菜单配置SQL
+-- 应用名称: ${props.appData.name}
+-- 应用ID: ${props.appData.id}
+-- 生成时间: ${now}
+
+INSERT INTO sys_permission (
+  id, 
+  parent_id, 
+  name, 
+  url, 
+  component, 
+  component_name, 
+  redirect, 
+  menu_type, 
+  perms, 
+  perms_type, 
+  sort_no, 
+  always_show, 
+  icon, 
+  is_route, 
+  is_leaf, 
+  keep_alive, 
+  hidden, 
+  hide_tab, 
+  description, 
+  status, 
+  del_flag, 
+  rule_flag, 
+  create_by, 
+  create_time, 
+  internal_or_external
+) VALUES (
+  '${menuId}',
+  NULL,
+  '${menuConfig.menuName}',
+  '${menuConfig.menuUrl}',
+  'super/airag/aiapp/chat/AiChat',
+  NULL,
+  NULL,
+  1,
+  NULL,
+  '0',
+  ${menuConfig.sortNo}.00,
+  0,
+  '${menuConfig.icon}',
+  1,
+  1,
+  0,
+  0,
+  0,
+  '${props.appData.descr || props.appData.name}',
+  '1',
+  0,
+  0,
+  'admin',
+  NOW(),
+  0
+);
+
+-- 如果需要添加到特定父菜单下，请修改上面的 parent_id 字段
+-- 常用父菜单ID参考：
+-- AI应用管理: '1893865471550578689'
+-- 系统管理: '1'`
+}
+
+// 复制嵌入代码
+const copyEmbedCode = async () => {
+  try {
+    await copyToClipboard(embedCode.value)
+    message.success('代码已复制到剪贴板')
+  } catch (error) {
+    message.error('复制失败')
+  }
+}
+
+// 复制菜单配置
+const copyMenuConfig = async () => {
+  const config = JSON.stringify(menuConfig, null, 2)
+  try {
+    await copyToClipboard(config)
+    message.success('菜单配置已复制到剪贴板')
+  } catch (error) {
+    message.error('复制失败')
+  }
+}
+
+// 复制SQL脚本
+const copySqlScript = async () => {
+  try {
+    await copyToClipboard(sqlScript.value)
+    message.success('SQL脚本已复制到剪贴板')
+  } catch (error) {
+    message.error('复制失败')
+  }
+}
+
+// 监听应用数据变化
+watch(() => props.appData, (newData) => {
+  menuConfig.menuName = newData.name
+  menuConfig.menuUrl = `/ai/chat/${newData.id}`
+}, { deep: true })
+</script>
+
+<style scoped lang="scss">
+.ai-app-publish {
+  .web-embed {
+    .embed-type-selector {
+      margin-bottom: 24px;
+      
+      .embed-option {
+        cursor: pointer;
+        transition: all 0.3s ease;
+        border: 2px solid transparent;
+        
+        &:hover {
+          border-color: var(--n-color-target);
+        }
+        
+        &.active {
+          border-color: var(--n-color-target);
+          background-color: var(--n-color-target-light);
+        }
+        
+        .embed-option-content {
+          display: flex;
+          align-items: center;
+          gap: 12px;
+          
+          .embed-info {
+            flex: 1;
+            
+            .embed-title {
+              font-weight: 600;
+              margin-bottom: 4px;
+            }
+            
+            .embed-desc {
+              color: var(--n-text-color-2);
+              font-size: 12px;
+            }
+          }
+          
+          .embed-preview {
+            width: 60px;
+            height: 40px;
+            object-fit: cover;
+            border-radius: 4px;
+          }
+        }
+      }
+    }
+    
+    .embed-config {
+      margin-bottom: 24px;
+      
+      h4 {
+        margin-bottom: 16px;
+      }
+    }
+    
+    .embed-code {
+      margin-bottom: 24px;
+      
+      .code-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 12px;
+        
+        h4 {
+          margin: 0;
+        }
+      }
+    }
+    
+    .embed-preview {
+      h4 {
+        margin-bottom: 12px;
+      }
+      
+      .preview-container {
+        min-height: 400px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        
+        .script-preview {
+          position: relative;
+          width: 300px;
+          height: 400px;
+          
+          .chat-widget {
+            position: absolute;
+            bottom: 20px;
+            right: 20px;
+            width: 280px;
+            height: 360px;
+            background: white;
+            border-radius: 12px;
+            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+            display: flex;
+            flex-direction: column;
+            
+            .widget-header {
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              padding: 12px 16px;
+              border-bottom: 1px solid var(--n-border-color);
+              font-weight: 600;
+            }
+            
+            .widget-body {
+              flex: 1;
+              padding: 16px;
+              overflow-y: auto;
+              
+              .message {
+                background: var(--n-color-target-light);
+                padding: 8px 12px;
+                border-radius: 8px;
+                font-size: 14px;
+                line-height: 1.4;
+              }
+            }
+            
+            .widget-input {
+              padding: 12px 16px;
+              border-top: 1px solid var(--n-border-color);
+            }
+          }
+        }
+      }
+    }
+  }
+  
+  .menu-config {
+    .menu-actions {
+      margin: 24px 0;
+    }
+    
+    .sql-script {
+      .code-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 12px;
+        
+        h4 {
+          margin: 0;
+        }
+      }
+    }
+  }
+
+  // 响应式设计
+  @media (max-width: 768px) {
+    .web-embed {
+      .embed-type-selector {
+        :deep(.n-space) {
+          flex-direction: column;
+          width: 100%;
+
+          .n-space-item {
+            width: 100%;
+          }
+        }
+
+        .embed-option {
+          .embed-option-content {
+            flex-direction: column;
+            text-align: center;
+            gap: 8px;
+
+            .embed-info {
+              .embed-title {
+                font-size: 14px;
+              }
+
+              .embed-desc {
+                font-size: 12px;
+              }
+            }
+
+            .embed-preview {
+              width: 60px;
+              height: 40px;
+            }
+          }
+        }
+      }
+
+      .embed-config {
+        :deep(.n-form-item) {
+          .n-form-item-label {
+            text-align: left;
+          }
+        }
+      }
+
+      .code-display {
+        .code-header {
+          flex-direction: column;
+          align-items: flex-start;
+          gap: 8px;
+
+          h4 {
+            font-size: 14px;
+          }
+        }
+      }
+    }
+
+    .menu-config {
+      :deep(.n-form-item) {
+        .n-form-item-label {
+          text-align: left;
+        }
+      }
+
+      .sql-display {
+        .sql-header {
+          flex-direction: column;
+          align-items: flex-start;
+          gap: 8px;
+
+          h4 {
+            font-size: 14px;
+          }
+        }
+      }
+    }
+  }
+
+  @media (max-width: 480px) {
+    .web-embed {
+      .embed-option {
+        .embed-option-content {
+          .embed-preview {
+            width: 50px;
+            height: 30px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/Ai/component/AiAppSetting.vue b/src/views/Ai/component/AiAppSetting.vue
new file mode 100644
index 0000000..a82b0c3
--- /dev/null
+++ b/src/views/Ai/component/AiAppSetting.vue
@@ -0,0 +1,749 @@
+<template>
+  <div class="ai-app-setting">
+    <!-- 应用头部信息 -->
+    <div class="app-header">
+      <n-avatar
+        :size="48"
+        :src="getAppIcon(appData.icon)"
+        fallback-src="/default-app-icon.png"
+        round
+      />
+      <div class="app-info">
+        <h3 class="app-name">{{ appData.name }}</h3>
+        <n-space>
+          <n-tag
+            v-if="appData.status === 'release'"
+            type="success"
+            size="small"
+          >
+            已发布
+          </n-tag>
+          <n-tag
+            v-else-if="appData.status === 'disable'"
+            type="warning"
+            size="small"
+          >
+            已禁用
+          </n-tag>
+          <n-button
+            v-if="!isReleased"
+            text
+            type="primary"
+            @click="handleEditBasic"
+          >
+            <template #icon>
+              <n-icon><EditOutlined /></n-icon>
+            </template>
+            编辑
+          </n-button>
+        </n-space>
+      </div>
+      <div class="app-actions">
+        <n-button type="primary" @click="handleSave" :loading="saving">
+          保存配置
+        </n-button>
+      </div>
+    </div>
+
+    <n-divider />
+
+    <!-- 配置选项卡 -->
+    <n-tabs v-model:value="activeTab" type="line" animated>
+      <!-- 基础配置 -->
+      <n-tab-pane name="basic" tab="基础配置">
+        <div class="config-section">
+          <n-form
+            ref="basicFormRef"
+            :model="configData.basic"
+            :rules="basicRules"
+            label-placement="left"
+            :label-width="120"
+          >
+            <n-form-item label="应用名称" path="name">
+              <n-input
+                v-model:value="configData.basic.name"
+                placeholder="请输入应用名称"
+                :maxlength="64"
+                show-count
+                :disabled="isReleased"
+              />
+            </n-form-item>
+            
+            <n-form-item label="应用描述" path="descr">
+              <n-input
+                v-model:value="configData.basic.descr"
+                type="textarea"
+                placeholder="描述该应用的应用场景及用途"
+                :rows="3"
+                :maxlength="256"
+                show-count
+                :disabled="isReleased"
+              />
+            </n-form-item>
+          </n-form>
+        </div>
+      </n-tab-pane>
+
+      <!-- 模型配置 -->
+      <n-tab-pane name="model" tab="模型配置">
+        <div class="config-section">
+          <n-form
+            ref="modelFormRef"
+            :model="configData.model"
+            :rules="modelRules"
+            label-placement="left"
+            :label-width="120"
+          >
+            <n-form-item label="AI模型" path="modelId">
+              <n-select
+                v-model:value="configData.model.modelId"
+                placeholder="请选择AI模型"
+                :options="modelOptions"
+                :loading="loadingModels"
+                :disabled="isReleased"
+                @update:value="handleModelChange"
+              />
+            </n-form-item>
+            
+            <n-form-item label="温度" path="temperature">
+              <n-slider
+                v-model:value="configData.model.temperature"
+                :min="0"
+                :max="2"
+                :step="0.1"
+                :disabled="isReleased"
+              />
+              <n-input-number
+                v-model:value="configData.model.temperature"
+                :min="0"
+                :max="2"
+                :step="0.1"
+                size="small"
+                style="width: 80px; margin-left: 12px"
+                :disabled="isReleased"
+              />
+            </n-form-item>
+            
+            <n-form-item label="最大令牌数" path="maxTokens">
+              <n-input-number
+                v-model:value="configData.model.maxTokens"
+                :min="1"
+                :max="32000"
+                placeholder="请输入最大令牌数"
+                :disabled="isReleased"
+              />
+            </n-form-item>
+          </n-form>
+        </div>
+      </n-tab-pane>
+
+      <!-- 知识库配置 -->
+      <n-tab-pane name="knowledge" tab="知识库">
+        <div class="config-section">
+          <div class="knowledge-header">
+            <h4>已选择知识库</h4>
+            <n-button
+              v-if="!isReleased"
+              type="primary"
+              @click="showKnowledgeModal = true"
+            >
+              <template #icon>
+                <n-icon><PlusOutlined /></n-icon>
+              </template>
+              添加知识库
+            </n-button>
+          </div>
+          
+          <div class="knowledge-list">
+            <n-empty v-if="selectedKnowledges.length === 0" description="暂未选择知识库">
+              <template #extra>
+                <n-button
+                  v-if="!isReleased"
+                  size="small"
+                  @click="showKnowledgeModal = true"
+                >
+                  添加知识库
+                </n-button>
+              </template>
+            </n-empty>
+            
+            <n-card
+              v-for="knowledge in selectedKnowledges"
+              :key="knowledge.id"
+              class="knowledge-item"
+              size="small"
+            >
+              <div class="knowledge-content">
+                <div class="knowledge-info">
+                  <div class="knowledge-name">{{ knowledge.name }}</div>
+                  <div class="knowledge-desc">{{ knowledge.description || '暂无描述' }}</div>
+                </div>
+                <n-button
+                  v-if="!isReleased"
+                  text
+                  type="error"
+                  @click="handleRemoveKnowledge(knowledge.id)"
+                >
+                  <template #icon>
+                    <n-icon><DeleteOutlined /></n-icon>
+                  </template>
+                </n-button>
+              </div>
+            </n-card>
+          </div>
+        </div>
+      </n-tab-pane>
+
+      <!-- 对话配置 -->
+      <n-tab-pane name="chat" tab="对话配置">
+        <div class="config-section">
+          <n-form
+            ref="chatFormRef"
+            :model="configData.chat"
+            label-placement="left"
+            :label-width="120"
+          >
+            <n-form-item label="系统提示词" path="prompt">
+              <n-input
+                v-model:value="configData.chat.prompt"
+                type="textarea"
+                placeholder="请输入系统提示词，用于指导AI的回答风格和行为"
+                :rows="6"
+                :maxlength="2000"
+                show-count
+                :disabled="isReleased"
+              />
+              <template #feedback>
+                <n-space style="margin-top: 8px">
+                  <n-button
+                    v-if="!isReleased"
+                    size="small"
+                    @click="handleGeneratePrompt"
+                    :loading="generatingPrompt"
+                  >
+                    AI生成提示词
+                  </n-button>
+                </n-space>
+              </template>
+            </n-form-item>
+            
+            <n-form-item label="开场白" path="prologue">
+              <n-input
+                v-model:value="configData.chat.prologue"
+                type="textarea"
+                placeholder="请输入开场白，用户进入对话时显示"
+                :rows="3"
+                :maxlength="500"
+                show-count
+                :disabled="isReleased"
+              />
+            </n-form-item>
+            
+            <n-form-item label="预设问题" path="presetQuestions">
+              <div class="preset-questions">
+                <n-dynamic-input
+                  v-model:value="configData.chat.presetQuestions"
+                  placeholder="请输入预设问题"
+                  :disabled="isReleased"
+                />
+              </div>
+            </n-form-item>
+            
+            <n-form-item label="消息轮次限制" path="msgNum">
+              <n-input-number
+                v-model:value="configData.chat.msgNum"
+                :min="1"
+                :max="100"
+                placeholder="请输入消息轮次限制"
+                :disabled="isReleased"
+              />
+              <template #feedback>
+                <n-text depth="3" style="font-size: 12px">
+                  限制用户在一次对话中的消息轮次，0表示不限制
+                </n-text>
+              </template>
+            </n-form-item>
+          </n-form>
+        </div>
+      </n-tab-pane>
+
+      <!-- 流程配置（高级编排） -->
+      <n-tab-pane v-if="appData.type === 'chatFlow'" name="flow" tab="流程编排">
+        <div class="config-section">
+          <n-form
+            ref="flowFormRef"
+            :model="configData.flow"
+            :rules="flowRules"
+            label-placement="left"
+            :label-width="120"
+          >
+            <n-form-item label="选择流程" path="flowId">
+              <n-select
+                v-model:value="configData.flow.flowId"
+                placeholder="请选择流程"
+                :options="flowOptions"
+                :loading="loadingFlows"
+                :disabled="isReleased"
+              />
+            </n-form-item>
+          </n-form>
+          
+          <div v-if="configData.flow.flowId" class="flow-preview">
+            <h4>流程预览</h4>
+            <n-card>
+              <n-empty description="流程预览功能开发中" />
+            </n-card>
+          </div>
+        </div>
+      </n-tab-pane>
+    </n-tabs>
+
+    <!-- 知识库选择弹窗 -->
+    <n-modal
+      v-model:show="showKnowledgeModal"
+      preset="card"
+      title="选择知识库"
+      style="width: 800px"
+    >
+      <n-empty description="知识库选择功能开发中" />
+      <template #action>
+        <n-space>
+          <n-button @click="showKnowledgeModal = false">取消</n-button>
+          <n-button type="primary" @click="handleKnowledgeConfirm">确定</n-button>
+        </n-space>
+      </template>
+    </n-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, onMounted, watch } from 'vue'
+import { useMessage } from 'naive-ui'
+import {
+  EditOutlined,
+  PlusOutlined,
+  DeleteOutlined
+} from '@vicons/antd'
+import type { FormInst } from 'naive-ui'
+import type { AiApp, AppConfig, Knowledge } from '../type/aiApp'
+import { aiAppApi } from '../aiApp'
+
+interface Props {
+  appData: AiApp
+}
+
+interface Emits {
+  (e: 'success'): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const message = useMessage()
+
+// 表单引用
+const basicFormRef = ref<FormInst>()
+const modelFormRef = ref<FormInst>()
+const chatFormRef = ref<FormInst>()
+const flowFormRef = ref<FormInst>()
+
+// 状态
+const activeTab = ref('basic')
+const saving = ref(false)
+const loadingModels = ref(false)
+const loadingFlows = ref(false)
+const generatingPrompt = ref(false)
+const showKnowledgeModal = ref(false)
+
+// 选项数据
+const modelOptions = ref([])
+const flowOptions = ref([])
+const selectedKnowledges = ref<Knowledge[]>([])
+
+// 配置数据
+const configData = reactive<AppConfig>({
+  basic: {
+    name: props.appData.name || '',
+    descr: props.appData.descr || '',
+    icon: props.appData.icon || '',
+    type: props.appData.type || 'chatSimple'
+  },
+  model: {
+    modelId: props.appData.modelId || '',
+    temperature: 0.7,
+    maxTokens: 2000
+  },
+  knowledge: {
+    knowledgeIds: props.appData.knowledgeIds ? props.appData.knowledgeIds.split(',') : [],
+    searchType: 'similarity',
+    topK: 5,
+    scoreThreshold: 0.7
+  },
+  chat: {
+    prompt: props.appData.prompt || '',
+    prologue: props.appData.prologue || '',
+    presetQuestions: props.appData.presetQuestion ? props.appData.presetQuestion.split('\n') : [],
+    msgNum: props.appData.msgNum || 0
+  },
+  flow: {
+    flowId: props.appData.flowId || '',
+    config: {}
+  }
+})
+
+// 计算属性
+const isReleased = computed(() => props.appData.status === 'release')
+
+// 获取应用图标
+const getAppIcon = (icon?: string) => {
+  return icon ? `/api/sys/common/static/${icon}` : '/default-app-icon.png'
+}
+
+// 表单验证规则
+const basicRules = {
+  name: [
+    { required: true, message: '请输入应用名称', trigger: 'blur' }
+  ]
+}
+
+const modelRules = {
+  modelId: [
+    { required: true, message: '请选择AI模型', trigger: 'change' }
+  ]
+}
+
+const flowRules = {
+  flowId: [
+    { required: true, message: '请选择流程', trigger: 'change' }
+  ]
+}
+
+// 加载模型选项
+const loadModelOptions = async () => {
+  loadingModels.value = true
+  try {
+    // 这里调用获取模型列表的API
+    // const response = await aiModelApi.getModelList()
+    // modelOptions.value = response.result.map(item => ({
+    //   label: item.name,
+    //   value: item.id
+    // }))
+    
+    // 模拟数据
+    modelOptions.value = [
+      { label: 'GPT-3.5 Turbo', value: 'gpt-3.5-turbo' },
+      { label: 'GPT-4', value: 'gpt-4' },
+      { label: 'Claude-3', value: 'claude-3' }
+    ]
+  } catch (error) {
+    message.error('加载模型列表失败')
+  } finally {
+    loadingModels.value = false
+  }
+}
+
+// 加载流程选项
+const loadFlowOptions = async () => {
+  if (props.appData.type !== 'chatFlow') return
+  
+  loadingFlows.value = true
+  try {
+    // 这里调用获取流程列表的API
+    // const response = await flowApi.getFlowList()
+    // flowOptions.value = response.result.map(item => ({
+    //   label: item.name,
+    //   value: item.id
+    // }))
+    
+    // 模拟数据
+    flowOptions.value = [
+      { label: '客服流程', value: 'flow-1' },
+      { label: '销售流程', value: 'flow-2' },
+      { label: '技术支持流程', value: 'flow-3' }
+    ]
+  } catch (error) {
+    message.error('加载流程列表失败')
+  } finally {
+    loadingFlows.value = false
+  }
+}
+
+// 加载已选择的知识库
+const loadSelectedKnowledges = async () => {
+  if (!configData.knowledge.knowledgeIds.length) return
+  
+  try {
+    const response = await aiAppApi.getKnowledgeBatch({
+      ids: configData.knowledge.knowledgeIds.join(',')
+    })
+    if (response.success) {
+      selectedKnowledges.value = response.result
+    }
+  } catch (error) {
+    message.error('加载知识库信息失败')
+  }
+}
+
+// 处理模型变化
+const handleModelChange = (modelId: string) => {
+  // 根据模型设置默认参数
+  const modelDefaults = {
+    'gpt-3.5-turbo': { temperature: 0.7, maxTokens: 4000 },
+    'gpt-4': { temperature: 0.7, maxTokens: 8000 },
+    'claude-3': { temperature: 0.7, maxTokens: 4000 }
+  }
+  
+  const defaults = modelDefaults[modelId]
+  if (defaults) {
+    Object.assign(configData.model, defaults)
+  }
+}
+
+// 编辑基础信息
+const handleEditBasic = () => {
+  activeTab.value = 'basic'
+}
+
+// 生成提示词
+const handleGeneratePrompt = async () => {
+  generatingPrompt.value = true
+  try {
+    const currentPrompt = configData.chat.prompt || '请为我生成一个AI助手的系统提示词'
+    const response = await aiAppApi.generatePrompt({ prompt: currentPrompt })
+    
+    // 处理流式响应
+    const reader = response.getReader()
+    let result = ''
+    
+    while (true) {
+      const { done, value } = await reader.read()
+      if (done) break
+      
+      const chunk = new TextDecoder().decode(value)
+      result += chunk
+    }
+    
+    configData.chat.prompt = result
+    message.success('提示词生成成功')
+  } catch (error) {
+    message.error('生成提示词失败')
+  } finally {
+    generatingPrompt.value = false
+  }
+}
+
+// 移除知识库
+const handleRemoveKnowledge = (knowledgeId: string) => {
+  const index = configData.knowledge.knowledgeIds.indexOf(knowledgeId)
+  if (index > -1) {
+    configData.knowledge.knowledgeIds.splice(index, 1)
+    selectedKnowledges.value = selectedKnowledges.value.filter(k => k.id !== knowledgeId)
+  }
+}
+
+// 知识库选择确认
+const handleKnowledgeConfirm = () => {
+  showKnowledgeModal.value = false
+  loadSelectedKnowledges()
+}
+
+// 保存配置
+const handleSave = async () => {
+  saving.value = true
+  try {
+    // 验证所有表单
+    await Promise.all([
+      basicFormRef.value?.validate(),
+      modelFormRef.value?.validate(),
+      props.appData.type === 'chatFlow' ? flowFormRef.value?.validate() : Promise.resolve()
+    ])
+    
+    // 构建保存数据
+    const saveData = {
+      id: props.appData.id,
+      ...configData.basic,
+      ...configData.model,
+      knowledgeIds: configData.knowledge.knowledgeIds.join(','),
+      prompt: configData.chat.prompt,
+      prologue: configData.chat.prologue,
+      presetQuestion: configData.chat.presetQuestions?.join('\n') || '',
+      msgNum: configData.chat.msgNum,
+      flowId: configData.flow?.flowId || ''
+    }
+    
+    await aiAppApi.saveApp(saveData)
+    message.success('保存成功')
+    emit('success')
+  } catch (error) {
+    message.error('保存失败')
+    console.error('Save error:', error)
+  } finally {
+    saving.value = false
+  }
+}
+
+// 初始化
+onMounted(() => {
+  loadModelOptions()
+  loadFlowOptions()
+  loadSelectedKnowledges()
+})
+
+// 监听知识库ID变化
+watch(() => configData.knowledge.knowledgeIds, () => {
+  loadSelectedKnowledges()
+}, { deep: true })
+</script>
+
+<style scoped lang="scss">
+.ai-app-setting {
+  .app-header {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    
+    .app-info {
+      flex: 1;
+      
+      .app-name {
+        margin: 0 0 8px 0;
+        font-size: 18px;
+        font-weight: 600;
+      }
+    }
+  }
+  
+  .config-section {
+    padding: 16px 0;
+  }
+  
+  .knowledge-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+    
+    h4 {
+      margin: 0;
+    }
+  }
+  
+  .knowledge-list {
+    .knowledge-item {
+      margin-bottom: 12px;
+      
+      .knowledge-content {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        
+        .knowledge-info {
+          flex: 1;
+          
+          .knowledge-name {
+            font-weight: 500;
+            margin-bottom: 4px;
+          }
+          
+          .knowledge-desc {
+            color: var(--n-text-color-2);
+            font-size: 12px;
+          }
+        }
+      }
+    }
+  }
+  
+  .preset-questions {
+    width: 100%;
+  }
+  
+  .flow-preview {
+    margin-top: 24px;
+
+    h4 {
+      margin-bottom: 12px;
+    }
+  }
+
+  // 响应式设计
+  @media (max-width: 768px) {
+    .app-header {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 12px;
+
+      .app-info {
+        gap: 8px;
+
+        .app-name {
+          font-size: 18px;
+        }
+      }
+
+      .app-actions {
+        width: 100%;
+        display: flex;
+        justify-content: flex-end;
+      }
+    }
+
+    :deep(.n-tabs) {
+      .n-tabs-nav {
+        .n-tabs-nav-scroll-content {
+          .n-tabs-tab {
+            padding: 8px 12px;
+            font-size: 14px;
+          }
+        }
+      }
+    }
+
+    :deep(.n-form-item) {
+      .n-form-item-label {
+        text-align: left;
+      }
+    }
+
+    .knowledge-list {
+      .knowledge-item {
+        padding: 12px;
+
+        .knowledge-info {
+          .knowledge-name {
+            font-size: 14px;
+          }
+
+          .knowledge-desc {
+            font-size: 12px;
+          }
+        }
+      }
+    }
+  }
+
+  @media (max-width: 480px) {
+    .app-header {
+      .app-info {
+        flex-direction: column;
+        align-items: flex-start;
+
+        .app-name {
+          font-size: 16px;
+        }
+      }
+    }
+
+    :deep(.n-tabs) {
+      .n-tabs-nav {
+        .n-tabs-nav-scroll-content {
+          .n-tabs-tab {
+            padding: 6px 8px;
+            font-size: 12px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/Ai/type/aiApp.ts b/src/views/Ai/type/aiApp.ts
new file mode 100644
index 0000000..b351fc9
--- /dev/null
+++ b/src/views/Ai/type/aiApp.ts
@@ -0,0 +1,338 @@
+/**
+ * AI应用相关类型定义
+ */
+
+/**
+ * 基础API响应类型
+ */
+export interface ApiResponse<T = any> {
+  success: boolean
+  result: T
+  message?: string
+  code?: number
+  timestamp?: number
+}
+
+/**
+ * 分页响应类型
+ */
+export interface PageResponse<T = any> {
+  records: T[]
+  total: number
+  size: number
+  current: number
+  pages: number
+}
+
+/**
+ * AI应用数据类型
+ */
+export interface AiApp {
+  /** 应用ID */
+  id: string
+  /** 应用名称 */
+  name: string
+  /** 应用描述 */
+  descr?: string
+  /** 应用图标 */
+  icon?: string
+  /** 应用类型 */
+  type: 'chatSimple' | 'chatFlow'
+  /** 应用状态 */
+  status: 'enable' | 'disable' | 'release'
+  /** 模型ID */
+  modelId?: string
+  /** 流程ID */
+  flowId?: string
+  /** 知识库IDs */
+  knowledgeIds?: string
+  /** 提示词 */
+  prompt?: string
+  /** 开场白 */
+  prologue?: string
+  /** 预设问题 */
+  presetQuestion?: string
+  /** 消息数量限制 */
+  msgNum?: number
+  /** 创建者 */
+  createBy?: string
+  /** 创建者显示名 */
+  createBy_dictText?: string
+  /** 创建时间 */
+  createTime?: string
+  /** 更新时间 */
+  updateTime?: string
+}
+
+/**
+ * 应用列表查询参数
+ */
+export interface AppListParams {
+  /** 页码 */
+  pageNo: number
+  /** 每页大小 */
+  pageSize: number
+  /** 排序字段 */
+  column?: string
+  /** 排序方式 */
+  order?: 'asc' | 'desc'
+  /** 应用名称 */
+  name?: string
+  /** 应用类型 */
+  type?: string
+  /** 应用状态 */
+  status?: string
+  /** 创建者 */
+  createBy?: string
+}
+
+/**
+ * 应用列表响应类型
+ */
+export interface AppListResponse extends ApiResponse<PageResponse<AiApp>> {}
+
+/**
+ * 搜索表单类型
+ */
+export interface SearchForm {
+  /** 应用名称 */
+  name: string
+  /** 应用类型 */
+  type: string
+}
+
+/**
+ * 分页配置类型
+ */
+export interface Pagination {
+  /** 当前页 */
+  page: number
+  /** 每页大小 */
+  pageSize: number
+  /** 总数 */
+  total: number
+}
+
+/**
+ * 应用表单数据类型
+ */
+export interface AppFormData extends Omit<AiApp, 'id' | 'createTime' | 'updateTime'> {
+  id?: string
+}
+
+/**
+ * 应用类型选项
+ */
+export interface AppTypeOption {
+  label: string
+  value: string
+  description?: string
+  icon?: string
+}
+
+/**
+ * 应用状态选项
+ */
+export interface AppStatusOption {
+  label: string
+  value: string
+  color?: string
+  type?: 'success' | 'warning' | 'error' | 'info'
+}
+
+/**
+ * 操作选项类型
+ */
+export interface ActionOption {
+  label: string
+  key: string
+  icon?: any
+  disabled?: boolean
+  show?: boolean
+}
+
+/**
+ * 知识库数据类型
+ */
+export interface Knowledge {
+  id: string
+  name: string
+  description?: string
+  type?: string
+  status?: string
+  createTime?: string
+}
+
+/**
+ * 流程数据类型
+ */
+export interface Flow {
+  id: string
+  name: string
+  description?: string
+  config?: any
+  status?: string
+  createTime?: string
+}
+
+/**
+ * AI模型数据类型
+ */
+export interface AiModel {
+  id: string
+  name: string
+  provider?: string
+  modelType?: string
+  maxTokens?: number
+  temperature?: number
+  status?: string
+}
+
+/**
+ * 快捷指令类型
+ */
+export interface QuickCommand {
+  key: string
+  name: string
+  icon?: string
+  descr: string
+  order?: number
+}
+
+/**
+ * 应用配置类型
+ */
+export interface AppConfig {
+  /** 基础配置 */
+  basic: {
+    name: string
+    descr?: string
+    icon?: string
+    type: string
+  }
+  /** 模型配置 */
+  model: {
+    modelId: string
+    temperature?: number
+    maxTokens?: number
+    topP?: number
+    frequencyPenalty?: number
+    presencePenalty?: number
+  }
+  /** 知识库配置 */
+  knowledge: {
+    knowledgeIds: string[]
+    searchType?: string
+    topK?: number
+    scoreThreshold?: number
+  }
+  /** 对话配置 */
+  chat: {
+    prompt?: string
+    prologue?: string
+    presetQuestions?: string[]
+    quickCommands?: QuickCommand[]
+    msgNum?: number
+  }
+  /** 流程配置（高级编排） */
+  flow?: {
+    flowId: string
+    config?: any
+  }
+}
+
+/**
+ * 发布配置类型
+ */
+export interface PublishConfig {
+  /** 发布类型 */
+  type: 'web' | 'menu' | 'api'
+  /** 应用数据 */
+  appData: AiApp
+  /** 嵌入配置 */
+  embedConfig?: {
+    width?: string
+    height?: string
+    theme?: string
+    showHeader?: boolean
+    showFooter?: boolean
+  }
+  /** 菜单配置 */
+  menuConfig?: {
+    parentId?: string
+    menuName?: string
+    menuUrl?: string
+    icon?: string
+    sortNo?: number
+  }
+}
+
+/**
+ * 应用统计数据类型
+ */
+export interface AppStats {
+  /** 总应用数 */
+  totalApps: number
+  /** 已发布应用数 */
+  publishedApps: number
+  /** 今日新增 */
+  todayAdded: number
+  /** 本月活跃 */
+  monthlyActive: number
+  /** 按类型统计 */
+  byType: Record<string, number>
+  /** 按状态统计 */
+  byStatus: Record<string, number>
+}
+
+/**
+ * 应用使用统计
+ */
+export interface AppUsageStats {
+  appId: string
+  appName: string
+  /** 总对话数 */
+  totalChats: number
+  /** 总消息数 */
+  totalMessages: number
+  /** 活跃用户数 */
+  activeUsers: number
+  /** 平均对话轮次 */
+  avgChatRounds: number
+  /** 用户满意度 */
+  satisfaction?: number
+  /** 最后使用时间 */
+  lastUsedTime?: string
+}
+
+/**
+ * 导出配置类型
+ */
+export interface ExportConfig {
+  /** 导出格式 */
+  format: 'json' | 'yaml' | 'excel'
+  /** 包含字段 */
+  fields: string[]
+  /** 过滤条件 */
+  filters?: Partial<AppListParams>
+  /** 是否包含配置 */
+  includeConfig?: boolean
+  /** 是否包含统计 */
+  includeStats?: boolean
+}
+
+/**
+ * 导入配置类型
+ */
+export interface ImportConfig {
+  /** 导入文件 */
+  file: File
+  /** 导入模式 */
+  mode: 'create' | 'update' | 'merge'
+  /** 冲突处理 */
+  conflictStrategy: 'skip' | 'overwrite' | 'rename'
+  /** 字段映射 */
+  fieldMapping?: Record<string, string>
+}
+
+export default AiApp
diff --git a/src/views/Ai/upload.ts b/src/views/Ai/upload.ts
new file mode 100644
index 0000000..66b3914
--- /dev/null
+++ b/src/views/Ai/upload.ts
@@ -0,0 +1,368 @@
+import { http } from './utils/http'
+import type { HttpResponse } from './utils/http'
+
+/**
+ * 上传文件响应接口
+ */
+export interface UploadResponse {
+  /** 文件URL */
+  url: string
+  /** 文件名 */
+  filename: string
+  /** 文件大小 */
+  size: number
+  /** 文件类型 */
+  type: string
+  /** 文件ID */
+  id?: string
+}
+
+/**
+ * 上传进度回调
+ */
+export type UploadProgressCallback = (progress: number) => void
+
+/**
+ * 上传配置
+ */
+export interface UploadConfig {
+  /** 上传进度回调 */
+  onProgress?: UploadProgressCallback
+  /** 是否显示成功消息 */
+  showSuccessMessage?: boolean
+  /** 成功消息内容 */
+  successMessage?: string
+}
+
+/**
+ * 上传API
+ */
+export const uploadApi = {
+  /**
+   * 上传图片
+   * @param file 图片文件
+   * @param config 上传配置
+   */
+  uploadImage(file: File, config?: UploadConfig): Promise<HttpResponse<UploadResponse>> {
+    const formData = new FormData()
+    formData.append('file', file)
+    
+    return http.post('/sys/common/upload', formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      },
+      showSuccessMessage: config?.showSuccessMessage,
+      successMessage: config?.successMessage || '图片上传成功',
+      onUploadProgress: (progressEvent) => {
+        if (config?.onProgress && progressEvent.total) {
+          const progress = Math.round((progressEvent.loaded * 100) / progressEvent.total)
+          config.onProgress(progress)
+        }
+      }
+    })
+  },
+
+  /**
+   * 上传文档
+   * @param file 文档文件
+   * @param config 上传配置
+   */
+  uploadDocument(file: File, config?: UploadConfig): Promise<HttpResponse<UploadResponse>> {
+    const formData = new FormData()
+    formData.append('file', file)
+    
+    return http.post('/sys/common/upload', formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      },
+      showSuccessMessage: config?.showSuccessMessage,
+      successMessage: config?.successMessage || '文档上传成功',
+      onUploadProgress: (progressEvent) => {
+        if (config?.onProgress && progressEvent.total) {
+          const progress = Math.round((progressEvent.loaded * 100) / progressEvent.total)
+          config.onProgress(progress)
+        }
+      }
+    })
+  },
+
+  /**
+   * 上传视频
+   * @param file 视频文件
+   * @param config 上传配置
+   */
+  uploadVideo(file: File, config?: UploadConfig): Promise<HttpResponse<UploadResponse>> {
+    const formData = new FormData()
+    formData.append('file', file)
+    
+    return http.post('/sys/common/upload', formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      },
+      showSuccessMessage: config?.showSuccessMessage,
+      successMessage: config?.successMessage || '视频上传成功',
+      onUploadProgress: (progressEvent) => {
+        if (config?.onProgress && progressEvent.total) {
+          const progress = Math.round((progressEvent.loaded * 100) / progressEvent.total)
+          config.onProgress(progress)
+        }
+      }
+    })
+  },
+
+  /**
+   * 上传音频
+   * @param file 音频文件
+   * @param config 上传配置
+   */
+  uploadAudio(file: File, config?: UploadConfig): Promise<HttpResponse<UploadResponse>> {
+    const formData = new FormData()
+    formData.append('file', file)
+    
+    return http.post('/sys/common/upload', formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      },
+      showSuccessMessage: config?.showSuccessMessage,
+      successMessage: config?.successMessage || '音频上传成功',
+      onUploadProgress: (progressEvent) => {
+        if (config?.onProgress && progressEvent.total) {
+          const progress = Math.round((progressEvent.loaded * 100) / progressEvent.total)
+          config.onProgress(progress)
+        }
+      }
+    })
+  },
+
+  /**
+   * 批量上传文件
+   * @param files 文件列表
+   * @param config 上传配置
+   */
+  uploadMultiple(files: File[], config?: UploadConfig): Promise<HttpResponse<UploadResponse[]>> {
+    const formData = new FormData()
+    files.forEach((file, index) => {
+      formData.append(`files[${index}]`, file)
+    })
+    
+    return http.post('/sys/common/upload/multiple', formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      },
+      showSuccessMessage: config?.showSuccessMessage,
+      successMessage: config?.successMessage || '文件上传成功',
+      onUploadProgress: (progressEvent) => {
+        if (config?.onProgress && progressEvent.total) {
+          const progress = Math.round((progressEvent.loaded * 100) / progressEvent.total)
+          config.onProgress(progress)
+        }
+      }
+    })
+  },
+
+  /**
+   * 删除文件
+   * @param fileUrl 文件URL或ID
+   */
+  deleteFile(fileUrl: string): Promise<HttpResponse<void>> {
+    return http.delete('/sys/common/deleteFile', {
+      params: { fileUrl }
+    })
+  },
+
+  /**
+   * 获取文件信息
+   * @param fileUrl 文件URL
+   */
+  getFileInfo(fileUrl: string): Promise<HttpResponse<UploadResponse>> {
+    return http.get('/sys/common/fileInfo', {
+      params: { fileUrl }
+    })
+  }
+}
+
+/**
+ * 文件类型验证
+ */
+export const fileValidation = {
+  /**
+   * 验证图片文件
+   * @param file 文件
+   * @param maxSize 最大大小（MB）
+   */
+  validateImage(file: File, maxSize = 5): { valid: boolean; message?: string } {
+    const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp']
+    
+    if (!allowedTypes.includes(file.type)) {
+      return { valid: false, message: '只支持 JPG、PNG、GIF、WebP 格式的图片' }
+    }
+    
+    if (file.size > maxSize * 1024 * 1024) {
+      return { valid: false, message: `图片大小不能超过 ${maxSize}MB` }
+    }
+    
+    return { valid: true }
+  },
+
+  /**
+   * 验证文档文件
+   * @param file 文件
+   * @param maxSize 最大大小（MB）
+   */
+  validateDocument(file: File, maxSize = 10): { valid: boolean; message?: string } {
+    const allowedTypes = [
+      'application/pdf',
+      'application/msword',
+      'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+      'application/vnd.ms-excel',
+      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+      'application/vnd.ms-powerpoint',
+      'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+      'text/plain'
+    ]
+    
+    if (!allowedTypes.includes(file.type)) {
+      return { valid: false, message: '只支持 PDF、Word、Excel、PowerPoint、TXT 格式的文档' }
+    }
+    
+    if (file.size > maxSize * 1024 * 1024) {
+      return { valid: false, message: `文档大小不能超过 ${maxSize}MB` }
+    }
+    
+    return { valid: true }
+  },
+
+  /**
+   * 验证视频文件
+   * @param file 文件
+   * @param maxSize 最大大小（MB）
+   */
+  validateVideo(file: File, maxSize = 100): { valid: boolean; message?: string } {
+    const allowedTypes = ['video/mp4', 'video/avi', 'video/mov', 'video/wmv', 'video/flv']
+    
+    if (!allowedTypes.includes(file.type)) {
+      return { valid: false, message: '只支持 MP4、AVI、MOV、WMV、FLV 格式的视频' }
+    }
+    
+    if (file.size > maxSize * 1024 * 1024) {
+      return { valid: false, message: `视频大小不能超过 ${maxSize}MB` }
+    }
+    
+    return { valid: true }
+  },
+
+  /**
+   * 验证音频文件
+   * @param file 文件
+   * @param maxSize 最大大小（MB）
+   */
+  validateAudio(file: File, maxSize = 20): { valid: boolean; message?: string } {
+    const allowedTypes = ['audio/mp3', 'audio/wav', 'audio/ogg', 'audio/aac', 'audio/flac']
+    
+    if (!allowedTypes.includes(file.type)) {
+      return { valid: false, message: '只支持 MP3、WAV、OGG、AAC、FLAC 格式的音频' }
+    }
+    
+    if (file.size > maxSize * 1024 * 1024) {
+      return { valid: false, message: `音频大小不能超过 ${maxSize}MB` }
+    }
+    
+    return { valid: true }
+  }
+}
+
+/**
+ * 文件工具函数
+ */
+export const fileUtils = {
+  /**
+   * 格式化文件大小
+   * @param bytes 字节数
+   */
+  formatFileSize(bytes: number): string {
+    if (bytes === 0) return '0 B'
+    
+    const k = 1024
+    const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
+    const i = Math.floor(Math.log(bytes) / Math.log(k))
+    
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
+  },
+
+  /**
+   * 获取文件扩展名
+   * @param filename 文件名
+   */
+  getFileExtension(filename: string): string {
+    return filename.slice((filename.lastIndexOf('.') - 1 >>> 0) + 2)
+  },
+
+  /**
+   * 获取文件类型图标
+   * @param filename 文件名或文件类型
+   */
+  getFileIcon(filename: string): string {
+    const ext = this.getFileExtension(filename).toLowerCase()
+    
+    const iconMap: Record<string, string> = {
+      // 图片
+      jpg: 'image',
+      jpeg: 'image',
+      png: 'image',
+      gif: 'image',
+      webp: 'image',
+      svg: 'image',
+      
+      // 文档
+      pdf: 'pdf',
+      doc: 'word',
+      docx: 'word',
+      xls: 'excel',
+      xlsx: 'excel',
+      ppt: 'powerpoint',
+      pptx: 'powerpoint',
+      txt: 'text',
+      
+      // 视频
+      mp4: 'video',
+      avi: 'video',
+      mov: 'video',
+      wmv: 'video',
+      flv: 'video',
+      
+      // 音频
+      mp3: 'audio',
+      wav: 'audio',
+      ogg: 'audio',
+      aac: 'audio',
+      flac: 'audio',
+      
+      // 压缩包
+      zip: 'archive',
+      rar: 'archive',
+      '7z': 'archive',
+      tar: 'archive',
+      gz: 'archive'
+    }
+    
+    return iconMap[ext] || 'file'
+  },
+
+  /**
+   * 创建文件预览URL
+   * @param file 文件
+   */
+  createPreviewUrl(file: File): string {
+    return URL.createObjectURL(file)
+  },
+
+  /**
+   * 释放文件预览URL
+   * @param url 预览URL
+   */
+  revokePreviewUrl(url: string): void {
+    URL.revokeObjectURL(url)
+  }
+}
+
+export default uploadApi
diff --git a/src/views/Ai/utils/clipboard.ts b/src/views/Ai/utils/clipboard.ts
new file mode 100644
index 0000000..d041d35
--- /dev/null
+++ b/src/views/Ai/utils/clipboard.ts
@@ -0,0 +1,235 @@
+/**
+ * 剪贴板工具函数
+ */
+
+/**
+ * 复制文本到剪贴板
+ * @param text 要复制的文本
+ * @returns Promise<boolean> 是否复制成功
+ */
+export async function copyToClipboard(text: string): Promise<boolean> {
+  try {
+    // 优先使用现代 Clipboard API
+    if (navigator.clipboard && window.isSecureContext) {
+      await navigator.clipboard.writeText(text)
+      return true
+    }
+    
+    // 降级到传统方法
+    return fallbackCopyToClipboard(text)
+  } catch (error) {
+    console.error('复制到剪贴板失败:', error)
+    return fallbackCopyToClipboard(text)
+  }
+}
+
+/**
+ * 传统方法复制文本到剪贴板
+ * @param text 要复制的文本
+ * @returns boolean 是否复制成功
+ */
+function fallbackCopyToClipboard(text: string): boolean {
+  try {
+    // 创建临时文本区域
+    const textArea = document.createElement('textarea')
+    textArea.value = text
+    textArea.style.position = 'fixed'
+    textArea.style.left = '-999999px'
+    textArea.style.top = '-999999px'
+    document.body.appendChild(textArea)
+    
+    // 选择并复制文本
+    textArea.focus()
+    textArea.select()
+    const successful = document.execCommand('copy')
+    
+    // 清理
+    document.body.removeChild(textArea)
+    
+    return successful
+  } catch (error) {
+    console.error('传统复制方法失败:', error)
+    return false
+  }
+}
+
+/**
+ * 从剪贴板读取文本
+ * @returns Promise<string> 剪贴板中的文本
+ */
+export async function readFromClipboard(): Promise<string> {
+  try {
+    if (navigator.clipboard && window.isSecureContext) {
+      return await navigator.clipboard.readText()
+    }
+    throw new Error('Clipboard API not supported')
+  } catch (error) {
+    console.error('从剪贴板读取失败:', error)
+    throw error
+  }
+}
+
+/**
+ * 检查是否支持剪贴板操作
+ * @returns boolean 是否支持
+ */
+export function isClipboardSupported(): boolean {
+  return !!(navigator.clipboard && window.isSecureContext) || document.queryCommandSupported('copy')
+}
+
+/**
+ * 复制图片到剪贴板
+ * @param imageUrl 图片URL
+ * @returns Promise<boolean> 是否复制成功
+ */
+export async function copyImageToClipboard(imageUrl: string): Promise<boolean> {
+  try {
+    if (!navigator.clipboard || !window.isSecureContext) {
+      throw new Error('Clipboard API not supported')
+    }
+
+    const response = await fetch(imageUrl)
+    const blob = await response.blob()
+    
+    await navigator.clipboard.write([
+      new ClipboardItem({
+        [blob.type]: blob
+      })
+    ])
+    
+    return true
+  } catch (error) {
+    console.error('复制图片到剪贴板失败:', error)
+    return false
+  }
+}
+
+/**
+ * 复制HTML内容到剪贴板
+ * @param html HTML内容
+ * @param text 纯文本内容（可选）
+ * @returns Promise<boolean> 是否复制成功
+ */
+export async function copyHtmlToClipboard(html: string, text?: string): Promise<boolean> {
+  try {
+    if (!navigator.clipboard || !window.isSecureContext) {
+      throw new Error('Clipboard API not supported')
+    }
+
+    const clipboardItem = new ClipboardItem({
+      'text/html': new Blob([html], { type: 'text/html' }),
+      'text/plain': new Blob([text || html.replace(/<[^>]*>/g, '')], { type: 'text/plain' })
+    })
+    
+    await navigator.clipboard.write([clipboardItem])
+    return true
+  } catch (error) {
+    console.error('复制HTML到剪贴板失败:', error)
+    // 降级到纯文本复制
+    return copyToClipboard(text || html.replace(/<[^>]*>/g, ''))
+  }
+}
+
+/**
+ * 监听剪贴板变化
+ * @param callback 回调函数
+ * @returns 取消监听的函数
+ */
+export function watchClipboard(callback: (text: string) => void): () => void {
+  let lastText = ''
+  
+  const checkClipboard = async () => {
+    try {
+      const currentText = await readFromClipboard()
+      if (currentText !== lastText) {
+        lastText = currentText
+        callback(currentText)
+      }
+    } catch (error) {
+      // 忽略读取错误
+    }
+  }
+  
+  // 每秒检查一次剪贴板
+  const interval = setInterval(checkClipboard, 1000)
+  
+  return () => {
+    clearInterval(interval)
+  }
+}
+
+/**
+ * 格式化代码并复制到剪贴板
+ * @param code 代码内容
+ * @param language 编程语言
+ * @returns Promise<boolean> 是否复制成功
+ */
+export async function copyCodeToClipboard(code: string, language?: string): Promise<boolean> {
+  const formattedCode = language ? `\`\`\`${language}\n${code}\n\`\`\`` : code
+  return copyToClipboard(formattedCode)
+}
+
+/**
+ * 复制JSON数据到剪贴板
+ * @param data 要复制的数据
+ * @param pretty 是否格式化
+ * @returns Promise<boolean> 是否复制成功
+ */
+export async function copyJsonToClipboard(data: any, pretty = true): Promise<boolean> {
+  try {
+    const jsonString = pretty ? JSON.stringify(data, null, 2) : JSON.stringify(data)
+    return copyToClipboard(jsonString)
+  } catch (error) {
+    console.error('复制JSON失败:', error)
+    return false
+  }
+}
+
+/**
+ * 复制表格数据到剪贴板（TSV格式）
+ * @param data 表格数据
+ * @param headers 表头（可选）
+ * @returns Promise<boolean> 是否复制成功
+ */
+export async function copyTableToClipboard(data: any[][], headers?: string[]): Promise<boolean> {
+  try {
+    let tsvContent = ''
+    
+    // 添加表头
+    if (headers) {
+      tsvContent += headers.join('\t') + '\n'
+    }
+    
+    // 添加数据行
+    tsvContent += data.map(row => row.join('\t')).join('\n')
+    
+    return copyToClipboard(tsvContent)
+  } catch (error) {
+    console.error('复制表格失败:', error)
+    return false
+  }
+}
+
+/**
+ * 复制URL到剪贴板
+ * @param url URL地址
+ * @param title 标题（可选）
+ * @returns Promise<boolean> 是否复制成功
+ */
+export async function copyUrlToClipboard(url: string, title?: string): Promise<boolean> {
+  const content = title ? `${title}\n${url}` : url
+  return copyToClipboard(content)
+}
+
+export default {
+  copyToClipboard,
+  readFromClipboard,
+  isClipboardSupported,
+  copyImageToClipboard,
+  copyHtmlToClipboard,
+  watchClipboard,
+  copyCodeToClipboard,
+  copyJsonToClipboard,
+  copyTableToClipboard,
+  copyUrlToClipboard
+}
diff --git a/src/views/Ai/utils/http.ts b/src/views/Ai/utils/http.ts
new file mode 100644
index 0000000..f1d1364
--- /dev/null
+++ b/src/views/Ai/utils/http.ts
@@ -0,0 +1,255 @@
+import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios'
+import { useMessage } from 'naive-ui'
+
+/**
+ * HTTP请求响应接口
+ */
+export interface HttpResponse<T = any> {
+  success: boolean
+  result: T
+  message?: string
+  code?: number
+  timestamp?: number
+}
+
+/**
+ * HTTP请求配置
+ */
+export interface HttpRequestConfig extends AxiosRequestConfig {
+  // 是否显示错误消息
+  showErrorMessage?: boolean
+  // 是否显示成功消息
+  showSuccessMessage?: boolean
+  // 成功消息内容
+  successMessage?: string
+}
+
+/**
+ * 创建HTTP客户端
+ */
+class HttpClient {
+  private instance: AxiosInstance
+  private message = useMessage()
+
+  constructor(config?: AxiosRequestConfig) {
+    this.instance = axios.create({
+      baseURL: '/api',
+      timeout: 60000,
+      headers: {
+        'Content-Type': 'application/json;charset=UTF-8'
+      },
+      ...config
+    })
+
+    this.setupInterceptors()
+  }
+
+  /**
+   * 设置拦截器
+   */
+  private setupInterceptors() {
+    // 请求拦截器
+    this.instance.interceptors.request.use(
+      (config) => {
+        // 添加认证token
+        const token = this.getToken()
+        if (token) {
+          config.headers = config.headers || {}
+          config.headers['Authorization'] = `Bearer ${token}`
+          config.headers['X-Access-Token'] = token
+        }
+
+        // 添加租户ID
+        const tenantId = this.getTenantId()
+        if (tenantId) {
+          config.headers = config.headers || {}
+          config.headers['X-Tenant-Id'] = tenantId
+        }
+
+        // 添加版本标识
+        config.headers = config.headers || {}
+        config.headers['X-Version'] = 'v3'
+
+        return config
+      },
+      (error) => {
+        return Promise.reject(error)
+      }
+    )
+
+    // 响应拦截器
+    this.instance.interceptors.response.use(
+      (response: AxiosResponse<HttpResponse>) => {
+        const { data, config } = response
+        const requestConfig = config as HttpRequestConfig
+
+        // 处理成功响应
+        if (data.success) {
+          // 显示成功消息
+          if (requestConfig.showSuccessMessage && requestConfig.successMessage) {
+            this.message.success(requestConfig.successMessage)
+          }
+          return data
+        } else {
+          // 处理业务错误
+          const errorMessage = data.message || '请求失败'
+          if (requestConfig.showErrorMessage !== false) {
+            this.message.error(errorMessage)
+          }
+          return Promise.reject(new Error(errorMessage))
+        }
+      },
+      (error: AxiosError) => {
+        const { response, config } = error
+        const requestConfig = config as HttpRequestConfig
+
+        let errorMessage = '网络错误'
+
+        if (response) {
+          const { status, data } = response
+          
+          switch (status) {
+            case 401:
+              errorMessage = '未授权，请重新登录'
+              this.handleUnauthorized()
+              break
+            case 403:
+              errorMessage = '拒绝访问'
+              break
+            case 404:
+              errorMessage = '请求地址不存在'
+              break
+            case 500:
+              errorMessage = '服务器内部错误'
+              break
+            default:
+              errorMessage = (data as any)?.message || `请求失败 (${status})`
+          }
+        } else if (error.code === 'ECONNABORTED') {
+          errorMessage = '请求超时'
+        }
+
+        // 显示错误消息
+        if (requestConfig?.showErrorMessage !== false) {
+          this.message.error(errorMessage)
+        }
+
+        return Promise.reject(error)
+      }
+    )
+  }
+
+  /**
+   * 获取认证token
+   */
+  private getToken(): string | null {
+    return localStorage.getItem('ACCESS_TOKEN') || sessionStorage.getItem('ACCESS_TOKEN')
+  }
+
+  /**
+   * 获取租户ID
+   */
+  private getTenantId(): string | null {
+    return localStorage.getItem('TENANT_ID') || '0'
+  }
+
+  /**
+   * 处理未授权
+   */
+  private handleUnauthorized() {
+    // 清除token
+    localStorage.removeItem('ACCESS_TOKEN')
+    sessionStorage.removeItem('ACCESS_TOKEN')
+    
+    // 跳转到登录页
+    if (window.location.pathname !== '/login') {
+      window.location.href = '/login'
+    }
+  }
+
+  /**
+   * GET请求
+   */
+  get<T = any>(url: string, config?: HttpRequestConfig): Promise<HttpResponse<T>> {
+    return this.instance.get(url, config)
+  }
+
+  /**
+   * POST请求
+   */
+  post<T = any>(url: string, data?: any, config?: HttpRequestConfig): Promise<HttpResponse<T>> {
+    return this.instance.post(url, data, config)
+  }
+
+  /**
+   * PUT请求
+   */
+  put<T = any>(url: string, data?: any, config?: HttpRequestConfig): Promise<HttpResponse<T>> {
+    return this.instance.put(url, data, config)
+  }
+
+  /**
+   * DELETE请求
+   */
+  delete<T = any>(url: string, config?: HttpRequestConfig): Promise<HttpResponse<T>> {
+    return this.instance.delete(url, config)
+  }
+
+  /**
+   * PATCH请求
+   */
+  patch<T = any>(url: string, data?: any, config?: HttpRequestConfig): Promise<HttpResponse<T>> {
+    return this.instance.patch(url, data, config)
+  }
+
+  /**
+   * 上传文件
+   */
+  upload<T = any>(url: string, file: File, config?: HttpRequestConfig): Promise<HttpResponse<T>> {
+    const formData = new FormData()
+    formData.append('file', file)
+    
+    return this.instance.post(url, formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      },
+      ...config
+    })
+  }
+
+  /**
+   * 下载文件
+   */
+  download(url: string, filename?: string, config?: HttpRequestConfig): Promise<void> {
+    return this.instance.get(url, {
+      responseType: 'blob',
+      ...config
+    }).then((response) => {
+      const blob = new Blob([response.data])
+      const downloadUrl = window.URL.createObjectURL(blob)
+      const link = document.createElement('a')
+      link.href = downloadUrl
+      link.download = filename || 'download'
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+      window.URL.revokeObjectURL(downloadUrl)
+    })
+  }
+
+  /**
+   * 获取原始axios实例
+   */
+  getInstance(): AxiosInstance {
+    return this.instance
+  }
+}
+
+// 创建默认HTTP客户端实例
+export const http = new HttpClient()
+
+// 导出类型
+export type { HttpResponse, HttpRequestConfig }
+export { HttpClient }
+
+export default http
diff --git a/src/views/CourseExchanged.vue b/src/views/CourseExchanged.vue
index a1c4efb..b2d2b68 100644
--- a/src/views/CourseExchanged.vue
+++ b/src/views/CourseExchanged.vue
@@ -749,7 +749,7 @@
              
 
               <!-- 学期显示 -->
-              <div class="semester-display">
+              <div class="semester-display" @click="goToAiPage">
                 <span class="semester-text">2025年上学期</span>
               </div>
 
@@ -1010,16 +1010,15 @@
             </div> -->
 
 
-            <!-- AI主要内容区域 -->
-            <div v-if="showAiAssistant" class="ai-main-content">
+            <!-- AI助手区域 - 展开状态 -->
+            <div v-if="aiAssistantExpanded" class="ai-main-content">
               <!-- AI头部栏 -->
               <div class="ai-header-bar">
                 <div class="ai-header-left">
                   <img src="/images/aiCompanion/AI小助手@2x.png" alt="AI小助手" class="ai-avatar">
                   <h3 class="ai-title">AI小助手</h3>
-
                 </div>
-                <button class="save-button" @click="hideAiAssistant">
+                <button class="save-button" @click="toggleAiAssistant">
                   <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <path d="M1 1L9 9M9 1L1 9" stroke="#999999" stroke-width="1.5" stroke-linecap="round" />
                   </svg>
@@ -1190,6 +1189,19 @@
               </div>
             </div>
 
+            <!-- AI助手折叠状态 - 小区域显示 -->
+            <div v-if="!aiAssistantExpanded" class="ai-collapsed-area" @click="toggleAiAssistant">
+              <div class="ai-collapsed-content">
+                <img src="/images/aiCompanion/AI小助手@2x.png" alt="AI小助手" class="ai-collapsed-avatar">
+                <span class="ai-collapsed-text">AI小助手</span>
+                <div class="expand-icon">
+                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M3 6h6M6 3v6" stroke="#0088D1" stroke-width="1.5" stroke-linecap="round" />
+                  </svg>
+                </div>
+              </div>
+            </div>
+
             <!-- 知识图谱横幅 -->
             <div class="knowledge-graph-banner">
               <img src="/images/aiCompanion/知识图谱@2x.png" alt="知识图谱" class="graph-image">
@@ -1449,9 +1461,10 @@ const hideTipSection = () => {
   console.log('隐藏提示区域')
 }
 
-const hideAiAssistant = () => {
-  showAiAssistant.value = false
-  console.log('隐藏AI助手')
+// 切换AI助手展开/折叠状态
+const toggleAiAssistant = () => {
+  aiAssistantExpanded.value = !aiAssistantExpanded.value
+  console.log('切换AI助手状态:', aiAssistantExpanded.value ? '展开' : '折叠')
 }
 
 // 章节分组数据
@@ -1602,7 +1615,7 @@ const courseActiveTab = ref('summary')
 
 // 控制区域显示状态
 const showTipSection = ref(true)
-const showAiAssistant = ref(true)
+const aiAssistantExpanded = ref(true) // 改为展开/折叠状态
 
 // 更多课程相关状态
 const moreCourses = ref<any[]>([])
@@ -3639,6 +3652,11 @@ const loadUserInfo = async () => {
   }
 }
 
+// 跳转到AI页面
+const goToAiPage = () => {
+  router.push('/ai')
+}
+
 onMounted(() => {
   console.log('课程详情页加载完成，课程ID:', courseId.value)
   loadUserInfo() // 加载用户信息
@@ -3717,8 +3735,8 @@ onActivated(() => {
 .container {
   max-width: none;
   margin: 0;
-  padding-left: 120px;
-  padding-right: 72px;
+  padding-left: 80px;
+  padding-right: 80px;
 }
 
 /* 练习/讨论模式整体布局 */
@@ -3876,6 +3894,13 @@ onActivated(() => {
   height: 42px;
   margin: 20px 0 -3px 0;
   box-sizing: border-box;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.semester-display:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 136, 209, 0.2);
 }
 
 .semester-text {
@@ -3887,10 +3912,11 @@ onActivated(() => {
   border-radius: 4px;
   padding: 0 16px;
   font-family: PingFangSC, PingFang SC;
-  font-weight: 400;
-  font-size: 14px;
+  font-weight: 500;
+  font-size: 16px;
   color: #0088D1;
   line-height: 40px;
+  text-align: center;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -5890,13 +5916,84 @@ onActivated(() => {
 /* AI助手界面样式 */
 .ai-assistant-interface {
   position: relative;
-  width: 360px; /* 固定宽度，不再自适应 */
+  width: 392px; /* 从360px增加到392px，增加32px宽度 */
   flex-shrink: 0; /* 防止收缩 */
   /* background: white; */
   padding-top: 12px;
   margin-top: 30px;
 }
 
+/* AI助手折叠状态样式 */
+.ai-collapsed-area {
+  position: relative;
+  width: 392px;
+  flex-shrink: 0;
+  margin-top: 30px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  animation: slideInCollapsed 0.3s ease-out;
+}
+
+@keyframes slideInCollapsed {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.ai-collapsed-content {
+  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid #E6F7FF;
+  border-radius: 8px;
+  padding: 12px 16px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  box-shadow: 0 2px 8px rgba(0, 136, 209, 0.1);
+  transition: all 0.3s ease;
+}
+
+.ai-collapsed-area:hover .ai-collapsed-content {
+  background: rgba(255, 255, 255, 1);
+  border-color: #0088D1;
+  box-shadow: 0 4px 12px rgba(0, 136, 209, 0.2);
+  transform: translateY(-1px);
+}
+
+.ai-collapsed-avatar {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.ai-collapsed-text {
+  font-size: 14px;
+  font-weight: 500;
+  color: #0088D1;
+  flex: 1;
+}
+
+.expand-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: rgba(0, 136, 209, 0.1);
+  transition: all 0.3s ease;
+}
+
+.ai-collapsed-area:hover .expand-icon {
+  background: rgba(0, 136, 209, 0.2);
+  transform: rotate(90deg);
+}
+
 /* 顶部控制栏 */
 .top-controls {
   display: flex;
@@ -5945,6 +6042,19 @@ onActivated(() => {
   background-color: rgba(255, 255, 255, 0.5);
   padding: 15px 20px;
   border: 1px solid #fff;
+  transition: all 0.3s ease;
+  animation: slideIn 0.3s ease-out;
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 /* AI头部栏 */
@@ -6879,8 +6989,8 @@ onActivated(() => {
 /* 大屏幕 - 使用120px左右边距 */
 @media (min-width: 1400px) {
   .container {
-    padding-left: 120px;
-    padding-right: 72px;
+    padding-left: 80px;
+    padding-right: 80px;
     max-width: none;
     margin: 0;
   }
@@ -8307,7 +8417,7 @@ onActivated(() => {
 
 /* 练习模式布局调整 */
 .course-layout.practice-layout-mode {
-  padding-left: 120px;
+  padding-left: 80px;
   padding-right: 140px;
 }
 
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 71bf4e7..e1dfa1c 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -125,7 +125,7 @@
               <div class="training-meta">
                 <span class="training-students">{{ training.studentsCount }}{{
                   t('home.specialTraining.studentsCheckedIn') }}</span>
-                <button class="join-btn">{{ t('home.specialTraining.join') }}</button>
+                <button class="join-btn" @click="showDevelopmentTip">{{ t('home.specialTraining.join') }}</button>
               </div>
             </div>
           </div>
@@ -138,7 +138,7 @@
       <div class="container">
         <div class="ad-container">
           <!-- <button class="close-btn" @click="closeAdvertisement">关闭</button> -->
-          <img src="/images/advertising/advertising3.png" alt="广告图片" class="ad-image" />
+          <img src="/images/advertising/advertising3.png" alt="广告图片" class="ad-image" @click="showDevelopmentTip" />
           <div class="ad-container-text">
             2025AI算法挑战活动大赛
           </div>
@@ -195,7 +195,7 @@
                   {{ t('home.learningPaths.warmTip') }}
                 </div>
 
-                <button class="path-learn-btn">{{ t('home.learningPaths.startLearning') }}</button>
+                <button class="path-learn-btn" @click="showDevelopmentTip">{{ t('home.learningPaths.startLearning') }}</button>
               </div>
             </div>
           </div>
@@ -225,7 +225,7 @@
                 程、模型训练等方法提高动作识别精度，探索开发能够指导“五禽戏”练习
                 的虚拟现实应用、智能健身教练系统等作品。
               </p>
-              <button class="activity-btn">立即报名</button>
+              <button class="activity-btn" @click="showDevelopmentTip">立即报名</button>
             </div>
             <div class="activity-left-img">
               <img src="/images/activity/activity1.png" alt="">
@@ -251,7 +251,7 @@
           <div class="view-all-btn">查看更多 > </div>
         </div>
         <div class="ai-cards-grid">
-          <div class="ai-card" v-for="aiCard in aiCards" :key="aiCard.id">
+          <div class="ai-card" v-for="aiCard in aiCards" :key="aiCard.id" @click="goToAiPage">
             <div class="ai-card-icon">
               <div class="ai-icon-wrapper">
                 <img :src="aiCard.icon" :alt="aiCard.title" class="ai-icon-image" />
@@ -307,7 +307,7 @@
     </section>
 
     <!-- 精选评论 -->
-    <section class="featured-reviews">
+    <!-- <section class="featured-reviews">
       <div class="container">
         <div class="section-header">
           <div class="section-title-group">
@@ -473,7 +473,7 @@
           </div>
         </div>
       </div>
-    </section>
+    </section> -->
 
     <!-- 合作伙伴 -->
     <!-- <section class="partners-section">
@@ -794,6 +794,16 @@ const closeAdvertisement = () => {
   showAdvertisement.value = false
 }
 
+// 显示开发中提示
+const showDevelopmentTip = () => {
+  message.info('该功能正在开发中，敬请期待！')
+}
+
+// 跳转到AI页面
+const goToAiPage = () => {
+  router.push('/ai')
+}
+
 // 轮播图根据语言动态切换
 const bannerImage = computed(() => {
   return locale.value === 'zh' ? '/banners/banner6.png' : '/banners/banner1-en.png'
@@ -1502,6 +1512,7 @@ onUnmounted(() => {
   height: auto;
   border-radius: 6px;
   transition: all 0.3s ease;
+  cursor: pointer;
 }
 
 .ad-container {
@@ -1532,10 +1543,10 @@ onUnmounted(() => {
 }
 
 /* 广告悬停效果 */
-/* .ad-image:hover {
+.ad-image:hover {
   transform: translateY(-2px);
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
-} */
+}
 
 .stats-grid {
   display: flex;