diff --git a/config/unplugin/auto-import.ts b/config/unplugin/auto-import.ts
index 91f9266..5b72bd4 100644
--- a/config/unplugin/auto-import.ts
+++ b/config/unplugin/auto-import.ts
@@ -29,7 +29,10 @@ export function configAutoImport() {
           'merge',
           'debounce',
           'isEqual',
-          'isString'
+          'isString',
+          'isArray',
+          'findLast',
+          'findLastIndex',
         ],
         '@/hooks': ['useModal'],
       },
diff --git a/env.d.ts b/env.d.ts
index fda0b3d..d21ba2c 100644
--- a/env.d.ts
+++ b/env.d.ts
@@ -1,4 +1,5 @@
 /// <reference types="vite/client" />
+
 declare module '*.vue' {
   import type { DefineComponent } from 'vue';
   const vueComponent: DefineComponent<{}, {}, any>;
diff --git a/package.json b/package.json
index 04e8e0a..d5f56e1 100644
--- a/package.json
+++ b/package.json
@@ -12,9 +12,12 @@
   },
   "dependencies": {
     "@arco-design/web-vue": "^2.42.0",
+    "@microsoft/fetch-event-source": "^2.0.1",
     "@types/nprogress": "^0.2.0",
     "@vueuse/core": "^9.12.0",
     "ali-oss": "^6.17.1",
+    "ant-design-vue": "~4.2.6",
+    "ant-design-x-vue": "^1.3.2",
     "axios": "^1.3.0",
     "dayjs": "^1.11.7",
     "dompurify": "^3.2.6",
@@ -23,6 +26,7 @@
     "html2canvas": "^1.4.1",
     "jspdf": "^3.0.1",
     "lodash-es": "^4.17.21",
+    "markdown-it": "^14.1.0",
     "marked": "^16.1.1",
     "mitt": "^3.0.0",
     "normalize.css": "^8.0.1",
@@ -30,12 +34,12 @@
     "sass": "^1.89.2",
     "swiper": "^11.2.8",
     "update": "^0.7.4",
-    "vue": "^3.2.45",
+    "vue": "^3.5.0",
     "vue-cropper": "^1.1.4",
     "vue-draggable-next": "^2.2.1",
     "vue-draggable-plus": "^0.6.0",
     "vue-echarts": "^7.0.3",
-    "vue-router": "^4.1.6",
+    "vue-router": "^4.4.0",
     "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a1896ff..37f87db 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10,16 +10,25 @@ importers:
     dependencies:
       '@arco-design/web-vue':
         specifier: ^2.42.0
-        version: 2.42.0(vue@3.2.45)
+        version: 2.42.0(vue@3.5.18(typescript@4.9.5))
+      '@microsoft/fetch-event-source':
+        specifier: ^2.0.1
+        version: 2.0.1
       '@types/nprogress':
         specifier: ^0.2.0
         version: 0.2.3
       '@vueuse/core':
         specifier: ^9.12.0
-        version: 9.12.0(vue@3.2.45)
+        version: 9.12.0(vue@3.5.18(typescript@4.9.5))
       ali-oss:
         specifier: ^6.17.1
         version: 6.20.0
+      ant-design-vue:
+        specifier: ~4.2.6
+        version: 4.2.6(vue@3.5.18(typescript@4.9.5))
+      ant-design-x-vue:
+        specifier: ^1.3.2
+        version: 1.3.2(ant-design-vue@4.2.6(vue@3.5.18(typescript@4.9.5)))(vue@3.5.18(typescript@4.9.5))
       axios:
         specifier: ^1.3.0
         version: 1.3.0
@@ -44,6 +53,9 @@ importers:
       lodash-es:
         specifier: ^4.17.21
         version: 4.17.21
+      markdown-it:
+        specifier: ^14.1.0
+        version: 14.1.0
       marked:
         specifier: ^16.1.1
         version: 16.1.2
@@ -55,7 +67,7 @@ importers:
         version: 8.0.1
       pinia:
         specifier: ^2.0.29
-        version: 2.0.29(typescript@4.9.5)(vue@3.2.45)
+        version: 2.0.29(typescript@4.9.5)(vue@3.5.18(typescript@4.9.5))
       sass:
         specifier: ^1.89.2
         version: 1.89.2
@@ -66,26 +78,26 @@ importers:
         specifier: ^0.7.4
         version: 0.7.4
       vue:
-        specifier: ^3.2.45
-        version: 3.2.45
+        specifier: ^3.5.0
+        version: 3.5.18(typescript@4.9.5)
       vue-cropper:
         specifier: ^1.1.4
         version: 1.1.4
       vue-draggable-next:
         specifier: ^2.2.1
-        version: 2.2.1(sortablejs@1.14.0)(vue@3.2.45)
+        version: 2.2.1(sortablejs@1.14.0)(vue@3.5.18(typescript@4.9.5))
       vue-draggable-plus:
         specifier: ^0.6.0
         version: 0.6.0(@types/sortablejs@1.15.8)
       vue-echarts:
         specifier: ^7.0.3
-        version: 7.0.3(@vue/runtime-core@3.2.45)(echarts@5.6.0)(vue@3.2.45)
+        version: 7.0.3(@vue/runtime-core@3.5.18)(echarts@5.6.0)(vue@3.5.18(typescript@4.9.5))
       vue-router:
-        specifier: ^4.1.6
-        version: 4.1.6(vue@3.2.45)
+        specifier: ^4.4.0
+        version: 4.5.1(vue@3.5.18(typescript@4.9.5))
       vuedraggable:
         specifier: ^4.1.0
-        version: 4.1.0(vue@3.2.45)
+        version: 4.1.0(vue@3.5.18(typescript@4.9.5))
     devDependencies:
       '@babel/core':
         specifier: ^7.20.12
@@ -113,10 +125,10 @@ importers:
         version: 0.49.2
       '@vitejs/plugin-vue':
         specifier: ^4.0.0
-        version: 4.0.0(vite@4.0.4(@types/node@18.11.18)(less@4.1.3)(sass@1.89.2))(vue@3.2.45)
+        version: 4.0.0(vite@4.0.4(@types/node@18.11.18)(less@4.1.3)(sass@1.89.2))(vue@3.5.18(typescript@4.9.5))
       '@vitejs/plugin-vue-jsx':
         specifier: ^3.0.0
-        version: 3.0.0(vite@4.0.4(@types/node@18.11.18)(less@4.1.3)(sass@1.89.2))(vue@3.2.45)
+        version: 3.0.0(vite@4.0.4(@types/node@18.11.18)(less@4.1.3)(sass@1.89.2))(vue@3.5.18(typescript@4.9.5))
       '@vue/eslint-config-prettier':
         specifier: ^7.0.0
         version: 7.0.0(eslint@8.33.0)(prettier@2.8.3)
@@ -170,16 +182,16 @@ importers:
         version: 0.49.2(rollup@3.12.0)(vite@4.0.4(@types/node@18.11.18)(less@4.1.3)(sass@1.89.2))
       unplugin-auto-import:
         specifier: ^0.13.0
-        version: 0.13.0(@vueuse/core@9.12.0(vue@3.2.45))(rollup@3.12.0)
+        version: 0.13.0(@vueuse/core@9.12.0(vue@3.5.18(typescript@4.9.5)))(rollup@3.12.0)
       unplugin-icons:
         specifier: ^0.15.2
-        version: 0.15.2(@vue/compiler-sfc@3.4.27)(vue-template-compiler@2.7.14)
+        version: 0.15.2(@vue/compiler-sfc@3.5.18)(vue-template-compiler@2.7.14)
       unplugin-vue-components:
         specifier: ^0.23.0
-        version: 0.23.0(@babel/parser@7.24.6)(rollup@3.12.0)(vue@3.2.45)
+        version: 0.23.0(@babel/parser@7.28.3)(rollup@3.12.0)(vue@3.5.18(typescript@4.9.5))
       unplugin-vue-define-options:
         specifier: ^1.2.4
-        version: 1.4.5(rollup@3.12.0)(vue@3.2.45)
+        version: 1.4.5(rollup@3.12.0)(vue@3.5.18(typescript@4.9.5))
       vite:
         specifier: ^4.0.4
         version: 4.0.4(@types/node@18.11.18)(less@4.1.3)(sass@1.89.2)
@@ -205,6 +217,21 @@ packages:
     resolution: {integrity: sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==}
     engines: {node: '>=6.0.0'}
 
+  '@ant-design/colors@6.0.0':
+    resolution: {integrity: sha512-qAZRvPzfdWHtfameEGP2Qvuf838NhergR35o+EuVyB5XvSA98xod5r4utvi4TJ3ywmevm290g9nsCG5MryrdWQ==}
+
+  '@ant-design/fast-color@2.0.6':
+    resolution: {integrity: sha512-y2217gk4NqL35giHl72o6Zzqji9O7vHh9YmhUVkPtAOpoTCH4uWxo/pr4VE8t0+ChEPs0qo4eJRC5Q1eXWo3vA==}
+    engines: {node: '>=8.x'}
+
+  '@ant-design/icons-svg@4.4.2':
+    resolution: {integrity: sha512-vHbT+zJEVzllwP+CM+ul7reTEfBR0vgxFe7+lREAsAA7YGsYpboiq2sQNeQeRvh09GfQgs/GyFEvZpJ9cLXpXA==}
+
+  '@ant-design/icons-vue@7.0.1':
+    resolution: {integrity: sha512-eCqY2unfZK6Fe02AwFlDHLfoyEFreP6rBwAZMIJ1LugmfMiVgwWDYlp1YsRugaPtICYOabV1iWxXdP12u9U43Q==}
+    peerDependencies:
+      vue: '>=3.0.3'
+
   '@antfu/install-pkg@0.1.1':
     resolution: {integrity: sha512-LyB/8+bSfa0DFGC06zpCEfs89/XoWZwws5ygEa5D+Xsm3OfI+aXQ86VgVG7Acyef+rSZ5HE7J8rrxzrQeM3PjQ==}
 
@@ -317,6 +344,10 @@ packages:
     resolution: {integrity: sha512-WdJjwMEkmBicq5T9fm/cHND3+UlFa2Yj8ALLgmoSQAJZysYbBjw+azChSGPN4DSPLXOcooGRvDwZWMcF/mLO2Q==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-string-parser@7.27.1':
+    resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-validator-identifier@7.19.1':
     resolution: {integrity: sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==}
     engines: {node: '>=6.9.0'}
@@ -325,6 +356,10 @@ packages:
     resolution: {integrity: sha512-4yA7s865JHaqUdRbnaxarZREuPTHrjpDT+pXoAZ1yhyo6uFnIEpS8VMu16siFOHDpZNKYv5BObhsB//ycbICyw==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-validator-identifier@7.27.1':
+    resolution: {integrity: sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-validator-option@7.18.6':
     resolution: {integrity: sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==}
     engines: {node: '>=6.9.0'}
@@ -347,6 +382,11 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
 
+  '@babel/parser@7.28.3':
+    resolution: {integrity: sha512-7+Ey1mAgYqFAx2h0RuoxcQT5+MlG3GTV0TQrgr7/ZliKsm/MNDxVVutlWaziMq7wJNAz8MTqz55XLpWvva6StA==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
   '@babel/plugin-syntax-jsx@7.18.6':
     resolution: {integrity: sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q==}
     engines: {node: '>=6.9.0'}
@@ -389,6 +429,23 @@ packages:
     resolution: {integrity: sha512-WaMsgi6Q8zMgMth93GvWPXkhAIEobfsIkLTacoVZoK1J0CevIPGYY2Vo5YvJGqyHqXM6P4ppOYGsIRU8MM9pFQ==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/types@7.28.2':
+    resolution: {integrity: sha512-ruv7Ae4J5dUYULmeXw1gmb7rYRz57OWCPM57pHojnLq/3Z1CK2lNSLTCVjxVk1F/TZHwOZZrOWi0ur95BbLxNQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@ctrl/tinycolor@3.6.1':
+    resolution: {integrity: sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==}
+    engines: {node: '>=10'}
+
+  '@emotion/hash@0.9.2':
+    resolution: {integrity: sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==}
+
+  '@emotion/unitless@0.10.0':
+    resolution: {integrity: sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==}
+
+  '@emotion/unitless@0.8.1':
+    resolution: {integrity: sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==}
+
   '@esbuild/android-arm64@0.16.17':
     resolution: {integrity: sha512-MIGl6p5sc3RDTLLkYL1MyL8BMRN4tLMRCn+yRJJmEDvYZ2M7tmAf80hx1kbNEUX2KJ50RRtxZ4JHLvCfuB6kBg==}
     engines: {node: '>=12'}
@@ -564,9 +621,15 @@ packages:
   '@jridgewell/sourcemap-codec@1.4.15':
     resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
 
+  '@jridgewell/sourcemap-codec@1.5.5':
+    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
+
   '@jridgewell/trace-mapping@0.3.17':
     resolution: {integrity: sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==}
 
+  '@microsoft/fetch-event-source@2.0.1':
+    resolution: {integrity: sha512-W6CLUJ2eBMw3Rec70qrsEW0jOm/3twwJv21mrmj2yORiaVmVYGS4sSS5yUwvQc1ZlDLYGPnClVWmUUMagKNsfA==}
+
   '@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1':
     resolution: {integrity: sha512-54/JRvkLIzzDWshCWfuhadfrfZVPiElY8Fcgmg1HroEly/EDSszzhBAsarCux+D/kOslTRquNzuyGSmUSTTHGg==}
 
@@ -619,42 +682,36 @@ packages:
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
   '@parcel/watcher-linux-arm-musl@2.5.1':
     resolution: {integrity: sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
-    libc: [musl]
 
   '@parcel/watcher-linux-arm64-glibc@2.5.1':
     resolution: {integrity: sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@parcel/watcher-linux-arm64-musl@2.5.1':
     resolution: {integrity: sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@parcel/watcher-linux-x64-glibc@2.5.1':
     resolution: {integrity: sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@parcel/watcher-linux-x64-musl@2.5.1':
     resolution: {integrity: sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@parcel/watcher-win32-arm64@2.5.1':
     resolution: {integrity: sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==}
@@ -702,6 +759,9 @@ packages:
   '@rushstack/eslint-patch@1.2.0':
     resolution: {integrity: sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg==}
 
+  '@simonwep/pickr@1.8.2':
+    resolution: {integrity: sha512-/l5w8BIkrpP6n1xsetx9MWPWlU6OblN5YgZZphxan0Tq4BByTCETL6lyIeY8lagalS2Nbt4F2W034KHLIiunKA==}
+
   '@trysound/sax@0.2.0':
     resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
     engines: {node: '>=10.13.0'}
@@ -742,6 +802,9 @@ packages:
   '@types/web-bluetooth@0.0.16':
     resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
 
+  '@types/web-bluetooth@0.0.21':
+    resolution: {integrity: sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==}
+
   '@typescript-eslint/eslint-plugin@5.50.0':
     resolution: {integrity: sha512-vwksQWSFZiUhgq3Kv7o1Jcj0DUNylwnIlGvKvLLYsq8pAWha6/WCnXUeaSoNNha/K7QSf2+jvmkxggC1u3pIwQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -912,33 +975,36 @@ packages:
   '@vue/babel-plugin-jsx@1.1.1':
     resolution: {integrity: sha512-j2uVfZjnB5+zkcbc/zsOc0fSNGCMMjaEXP52wdwdIfn0qjFfEYpYZBFKFg+HHnQeJCVrjOeO0YxgaL7DMrym9w==}
 
-  '@vue/compiler-core@3.2.45':
-    resolution: {integrity: sha512-rcMj7H+PYe5wBV3iYeUgbCglC+pbpN8hBLTJvRiK2eKQiWqu+fG9F+8sW99JdL4LQi7Re178UOxn09puSXvn4A==}
-
   '@vue/compiler-core@3.4.27':
     resolution: {integrity: sha512-E+RyqY24KnyDXsCuQrI+mlcdW3ALND6U7Gqa/+bVwbcpcR3BRRIckFoz7Qyd4TTlnugtwuI7YgjbvsLmxb+yvg==}
 
-  '@vue/compiler-dom@3.2.45':
-    resolution: {integrity: sha512-tyYeUEuKqqZO137WrZkpwfPCdiiIeXYCcJ8L4gWz9vqaxzIQRccTSwSWZ/Axx5YR2z+LvpUbmPNXxuBU45lyRw==}
+  '@vue/compiler-core@3.5.18':
+    resolution: {integrity: sha512-3slwjQrrV1TO8MoXgy3aynDQ7lslj5UqDxuHnrzHtpON5CBinhWjJETciPngpin/T3OuW3tXUf86tEurusnztw==}
 
   '@vue/compiler-dom@3.4.27':
     resolution: {integrity: sha512-kUTvochG/oVgE1w5ViSr3KUBh9X7CWirebA3bezTbB5ZKBQZwR2Mwj9uoSKRMFcz4gSMzzLXBPD6KpCLb9nvWw==}
 
-  '@vue/compiler-sfc@3.2.45':
-    resolution: {integrity: sha512-1jXDuWah1ggsnSAOGsec8cFjT/K6TMZ0sPL3o3d84Ft2AYZi2jWJgRMjw4iaK0rBfA89L5gw427H4n1RZQBu6Q==}
+  '@vue/compiler-dom@3.5.18':
+    resolution: {integrity: sha512-RMbU6NTU70++B1JyVJbNbeFkK+A+Q7y9XKE2EM4NLGm2WFR8x9MbAtWxPPLdm0wUkuZv9trpwfSlL6tjdIa1+A==}
 
   '@vue/compiler-sfc@3.4.27':
     resolution: {integrity: sha512-nDwntUEADssW8e0rrmE0+OrONwmRlegDA1pD6QhVeXxjIytV03yDqTey9SBDiALsvAd5U4ZrEKbMyVXhX6mCGA==}
 
-  '@vue/compiler-ssr@3.2.45':
-    resolution: {integrity: sha512-6BRaggEGqhWht3lt24CrIbQSRD5O07MTmd+LjAn5fJj568+R9eUD2F7wMQJjX859seSlrYog7sUtrZSd7feqrQ==}
+  '@vue/compiler-sfc@3.5.18':
+    resolution: {integrity: sha512-5aBjvGqsWs+MoxswZPoTB9nSDb3dhd1x30xrrltKujlCxo48j8HGDNj3QPhF4VIS0VQDUrA1xUfp2hEa+FNyXA==}
 
   '@vue/compiler-ssr@3.4.27':
     resolution: {integrity: sha512-CVRzSJIltzMG5FcidsW0jKNQnNRYC8bT21VegyMMtHmhW3UOI7knmUehzswXLrExDLE6lQCZdrhD4ogI7c+vuw==}
 
+  '@vue/compiler-ssr@3.5.18':
+    resolution: {integrity: sha512-xM16Ak7rSWHkM3m22NlmcdIM+K4BMyFARAfV9hYFl+SFuRzrZ3uGMNW05kA5pmeMa0X9X963Kgou7ufdbpOP9g==}
+
   '@vue/devtools-api@6.5.0':
     resolution: {integrity: sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==}
 
+  '@vue/devtools-api@6.6.4':
+    resolution: {integrity: sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==}
+
   '@vue/eslint-config-prettier@7.0.0':
     resolution: {integrity: sha512-/CTc6ML3Wta1tCe1gUeO0EYnVXfo3nJXsIhZ8WJr3sov+cGASr6yuiibJTL6lmIBm7GobopToOuB3B6AWyV0Iw==}
     peerDependencies:
@@ -956,22 +1022,22 @@ packages:
       typescript:
         optional: true
 
-  '@vue/reactivity-transform@3.2.45':
-    resolution: {integrity: sha512-BHVmzYAvM7vcU5WmuYqXpwaBHjsS8T63jlKGWVtHxAHIoMIlmaMyurUSEs1Zcg46M4AYT5MtB1U274/2aNzjJQ==}
-
   '@vue/reactivity@3.2.45':
     resolution: {integrity: sha512-PRvhCcQcyEVohW0P8iQ7HDcIOXRjZfAsOds3N99X/Dzewy8TVhTCT4uXpAHfoKjVTJRA0O0K+6QNkDIZAxNi3A==}
 
-  '@vue/runtime-core@3.2.45':
-    resolution: {integrity: sha512-gzJiTA3f74cgARptqzYswmoQx0fIA+gGYBfokYVhF8YSXjWTUA2SngRzZRku2HbGbjzB6LBYSbKGIaK8IW+s0A==}
+  '@vue/reactivity@3.5.18':
+    resolution: {integrity: sha512-x0vPO5Imw+3sChLM5Y+B6G1zPjwdOri9e8V21NnTnlEvkxatHEH5B5KEAJcjuzQ7BsjGrKtfzuQ5eQwXh8HXBg==}
 
-  '@vue/runtime-dom@3.2.45':
-    resolution: {integrity: sha512-cy88YpfP5Ue2bDBbj75Cb4bIEZUMM/mAkDMfqDTpUYVgTf/kuQ2VQ8LebuZ8k6EudgH8pYhsGWHlY0lcxlvTwA==}
+  '@vue/runtime-core@3.5.18':
+    resolution: {integrity: sha512-DUpHa1HpeOQEt6+3nheUfqVXRog2kivkXHUhoqJiKR33SO4x+a5uNOMkV487WPerQkL0vUuRvq/7JhRgLW3S+w==}
 
-  '@vue/server-renderer@3.2.45':
-    resolution: {integrity: sha512-ebiMq7q24WBU1D6uhPK//2OTR1iRIyxjF5iVq/1a5I1SDMDyDu4Ts6fJaMnjrvD3MqnaiFkKQj+LKAgz5WIK3g==}
+  '@vue/runtime-dom@3.5.18':
+    resolution: {integrity: sha512-YwDj71iV05j4RnzZnZtGaXwPoUWeRsqinblgVJwR8XTXYZ9D5PbahHQgsbmzUvCWNF6x7siQ89HgnX5eWkr3mw==}
+
+  '@vue/server-renderer@3.5.18':
+    resolution: {integrity: sha512-PvIHLUoWgSbDG7zLHqSqaCoZvHi6NNmfVFOqO+OnwvqMz/tqQr3FuGWS8ufluNddk7ZLBJYMrjcw1c6XzR12mA==}
     peerDependencies:
-      vue: 3.2.45
+      vue: 3.5.18
 
   '@vue/shared@3.2.45':
     resolution: {integrity: sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg==}
@@ -979,6 +1045,9 @@ packages:
   '@vue/shared@3.4.27':
     resolution: {integrity: sha512-DL3NmY2OFlqmYYrzp39yi3LDkKxa5vZVwxWdQ3rG0ekuWscHraeIbnI8t+aZK7qhYqEqWKTUdijadunb9pnrgA==}
 
+  '@vue/shared@3.5.18':
+    resolution: {integrity: sha512-cZy8Dq+uuIXbxCZpuLd2GJdeSO/lIzIspC2WtkqIpje5QyFbvLaI5wZtdUjLHjGZrlVX6GilejatWwVYYRc8tA==}
+
   '@vue/tsconfig@0.1.3':
     resolution: {integrity: sha512-kQVsh8yyWPvHpb8gIc9l/HIDiiVUy1amynLNpCy8p+FoCiZXCo6fQos5/097MmnNZc9AtseDsCrfkhqCrJ8Olg==}
     peerDependencies:
@@ -987,12 +1056,25 @@ packages:
       '@types/node':
         optional: true
 
+  '@vueuse/core@13.6.0':
+    resolution: {integrity: sha512-DJbD5fV86muVmBgS9QQPddVX7d9hWYswzlf4bIyUD2dj8GC46R1uNClZhVAmsdVts4xb2jwp1PbpuiA50Qee1A==}
+    peerDependencies:
+      vue: ^3.5.0
+
   '@vueuse/core@9.12.0':
     resolution: {integrity: sha512-h/Di8Bvf6xRcvS/PvUVheiMYYz3U0tH3X25YxONSaAUBa841ayMwxkuzx/DGUMCW/wHWzD8tRy2zYmOC36r4sg==}
 
+  '@vueuse/metadata@13.6.0':
+    resolution: {integrity: sha512-rnIH7JvU7NjrpexTsl2Iwv0V0yAx9cw7+clymjKuLSXG0QMcLD0LDgdNmXic+qL0SGvgSVPEpM9IDO/wqo1vkQ==}
+
   '@vueuse/metadata@9.12.0':
     resolution: {integrity: sha512-9oJ9MM9lFLlmvxXUqsR1wLt1uF7EVbP5iYaHJYqk+G2PbMjY6EXvZeTjbdO89HgoF5cI6z49o2zT/jD9SVoNpQ==}
 
+  '@vueuse/shared@13.6.0':
+    resolution: {integrity: sha512-pDykCSoS2T3fsQrYqf9SyF0QXWHmcGPQ+qiOVjlYSzlWd9dgppB2bFSM1GgKKkt7uzn0BBMV3IbJsUfHG2+BCg==}
+    peerDependencies:
+      vue: ^3.5.0
+
   '@vueuse/shared@9.12.0':
     resolution: {integrity: sha512-TWuJLACQ0BVithVTRbex4Wf1a1VaRuSpVeyEd4vMUWl54PzlE0ciFUshKCXnlLuD0lxIaLK4Ypj3NXYzZh4+SQ==}
 
@@ -1190,6 +1272,18 @@ packages:
     resolution: {integrity: sha512-6E3D4BQLXHLl3c/NwirWVZ+BCkMq2qsYxdeAGGOijKrx09FaqU+HktFL6QwAwNvgJiMLnv6AQ2C1gFZx0h1CBg==}
     engines: {node: '>=0.10.0'}
 
+  ant-design-vue@4.2.6:
+    resolution: {integrity: sha512-t7eX13Yj3i9+i5g9lqFyYneoIb3OzTvQjq9Tts1i+eiOd3Eva/6GagxBSXM1fOCjqemIu0FYVE1ByZ/38epR3Q==}
+    engines: {node: '>=12.22.0'}
+    peerDependencies:
+      vue: '>=3.2.0'
+
+  ant-design-x-vue@1.3.2:
+    resolution: {integrity: sha512-17me/rUGAj5w8zN98ngGSqjtTckZT4nKexnta4TBw7SNC4+gXB4jTzQqk4ZCLVuoXSZ0w3Qa4FfyTEP8z6Fx4g==}
+    peerDependencies:
+      ant-design-vue: '>=4.0.0'
+      vue: '>=3.5.0'
+
   any-promise@1.3.0:
     resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
 
@@ -1235,6 +1329,9 @@ packages:
     resolution: {integrity: sha512-BNcM+RXxndPxiZ2rd76k6nyQLRZr2/B/sdi8pQ+Joafr5AH279L40dfokSUTp8O+AaqYjXWhblBWa2st2nc4fQ==}
     engines: {node: '>=0.10.0'}
 
+  array-tree-filter@2.1.0:
+    resolution: {integrity: sha512-4ROwICNlNw/Hqa9v+rk5h22KjmzB1JGTMVKP2AKJBOCgb0yL0ASf0+YvCcLNNwquOHNX48jkeZIJ3a+oOQqKcw==}
+
   array-union@2.1.0:
     resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
     engines: {node: '>=8'}
@@ -1332,6 +1429,9 @@ packages:
   async-settle@0.2.1:
     resolution: {integrity: sha512-3b4i8Bf/9Zw3V/EsLtMx+qj2r0mDYotjMhzXJQxjvESOe5LgevY5KaH5BHROVZWHE7TlSY2FkeTgIgDvdkRFYQ==}
 
+  async-validator@4.2.5:
+    resolution: {integrity: sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==}
+
   async@1.5.2:
     resolution: {integrity: sha512-nSVgobk4rv61R9PUSDtYt7mPVB2olxNR5RWJcAsH676/ef11bUZwvu7+RGYrYauVdDPcO519v68wRhXQtxsV9w==}
 
@@ -1613,6 +1713,9 @@ packages:
     resolution: {integrity: sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==}
     engines: {node: '>=0.10.0'}
 
+  classnames@2.5.1:
+    resolution: {integrity: sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==}
+
   clean-stack@2.2.0:
     resolution: {integrity: sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==}
     engines: {node: '>=6'}
@@ -1812,8 +1915,8 @@ packages:
     resolution: {integrity: sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==}
     engines: {node: '>=8.0.0'}
 
-  csstype@2.6.21:
-    resolution: {integrity: sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==}
+  csstype@3.1.3:
+    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
   cwd@0.10.0:
     resolution: {integrity: sha512-YGZxdTTL9lmLkCUTpg4j0zQ7IhRB5ZmqNBbGCl3Tg6MP/d5/6sY7L5mmTjzbc6JKgVZYiqTQTNhPFsbXNGlRaA==}
@@ -1963,6 +2066,12 @@ packages:
     resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
     engines: {node: '>=6.0.0'}
 
+  dom-align@1.12.4:
+    resolution: {integrity: sha512-R8LUSEay/68zE5c8/3BDxiTEvgb4xZTF0RKmAHfiEVN3klfIpXfi2/QCoiWPccVQ0J/ZGdz9OjzL4uJEP/MRAw==}
+
+  dom-scroll-into-view@2.0.1:
+    resolution: {integrity: sha512-bvVTQe1lfaUr1oFzZX80ce9KLDlZ3iU+XGNE/bz9HnGdklTieqsbmsLHe+rT2XWqopvL0PckkYqN7ksmm5pe3w==}
+
   dom-serializer@0.2.2:
     resolution: {integrity: sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==}
 
@@ -3089,6 +3198,10 @@ packages:
     resolution: {integrity: sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==}
     engines: {node: '>=0.10.0'}
 
+  is-plain-object@3.0.1:
+    resolution: {integrity: sha512-Xnpx182SBMrr/aBik8y+GuR4U1L9FqMSojwDQwPMmxyC6bvEqly9UBCxhauBF5vNh2gwWJNX6oDV7O+OM4z34g==}
+    engines: {node: '>=0.10.0'}
+
   is-posix-bracket@0.1.1:
     resolution: {integrity: sha512-Yu68oeXJ7LeWNmZ3Zov/xg/oDBnBK2RNxwYY1ilNJX+tKKZqgPK+qOn/Gs9jEu66KDY9Netf5XLKNGzas/vPfQ==}
     engines: {node: '>=0.10.0'}
@@ -3385,6 +3498,9 @@ packages:
     resolution: {integrity: sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==}
     engines: {node: '>=10'}
 
+  linkify-it@5.0.0:
+    resolution: {integrity: sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==}
+
   lint-staged@13.1.0:
     resolution: {integrity: sha512-pn/sR8IrcF/T0vpWLilih8jmVouMlxqXxKuAojmbiGX5n/gDnz+abdPptlj0vYnbfE0SQNl3CY/HwtM0+yfOVQ==}
     engines: {node: ^14.13.1 || >=16.0.0}
@@ -3558,6 +3674,10 @@ packages:
     resolution: {integrity: sha512-k+yt5n3l48JU4k8ftnKG6V7u32wyH2NfKzeMto9F/QRE0amxy/LayxwlvjjkZEIzqR+19IrtFO8p5kB9QaYUFg==}
     engines: {node: '>=0.10.0'}
 
+  loose-envify@1.4.0:
+    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    hasBin: true
+
   lower-case@1.1.4:
     resolution: {integrity: sha512-2Fgx1Ycm599x+WGpIYwJOvsjmXFzTSc34IwDWALRA/8AopUKAVPwfJ+h5+f85BCp0PWmmJcWzEpxOpoXycMpdA==}
 
@@ -3572,9 +3692,6 @@ packages:
     resolution: {integrity: sha512-eczKQUDaBpB/mcEqZZNGEUG1FQNsXCuk3uOrCpu6y7qTygIy6jnpqDa62j9MGKSoqlXhM1lCFQv1THuGDQtvUA==}
     engines: {node: '>=16.14.0'}
 
-  magic-string@0.25.9:
-    resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==}
-
   magic-string@0.26.7:
     resolution: {integrity: sha512-hX9XH3ziStPoPhJxLq1syWuZMxbDvGNbVchfrdCtanC7D13888bMFow61x8axrx+GfHLtVeAx2kxL7tTGRl+Ow==}
     engines: {node: '>=12'}
@@ -3586,6 +3703,9 @@ packages:
   magic-string@0.30.10:
     resolution: {integrity: sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==}
 
+  magic-string@0.30.17:
+    resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
+
   make-dir@2.1.0:
     resolution: {integrity: sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==}
     engines: {node: '>=6'}
@@ -3614,6 +3734,10 @@ packages:
     resolution: {integrity: sha512-4y7uGv8bd2WdM9vpQsiQNo41Ln1NvhvDRuVt0k2JZQ+ezN2uaQes7lZeZ+QQUHOLQAtDaBJ+7wCbi+ab/KFs+w==}
     engines: {node: '>=0.10.0'}
 
+  markdown-it@14.1.0:
+    resolution: {integrity: sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==}
+    hasBin: true
+
   marked@16.1.2:
     resolution: {integrity: sha512-rNQt5EvRinalby7zJZu/mB+BvaAY2oz3wCuCjt1RDrWNpS1Pdf9xqMOeC9Hm5adBdcV/3XZPJpG58eT+WBc0XQ==}
     engines: {node: '>= 20'}
@@ -3644,6 +3768,9 @@ packages:
   mdn-data@2.0.30:
     resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
 
+  mdurl@2.0.0:
+    resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==}
+
   memory-fs@0.5.0:
     resolution: {integrity: sha512-jA0rdU5KoQMC0e6ppoNRtpp6vjFq6+NY7r8hywnC7V+1Xj/MtHwGIbB1QaK/dunyjWteJzmkpd7ooeWg10T7GA==}
     engines: {node: '>=4.3.0 <5.0.0 || >=5.10'}
@@ -3797,6 +3924,11 @@ packages:
   mz@2.7.0:
     resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
 
+  nanoid@3.3.11:
+    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
   nanoid@3.3.4:
     resolution: {integrity: sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -3811,6 +3943,9 @@ packages:
     resolution: {integrity: sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==}
     engines: {node: '>=0.10.0'}
 
+  nanopop@2.4.2:
+    resolution: {integrity: sha512-NzOgmMQ+elxxHeIha+OG/Pv3Oc3p4RU2aBhwWwAqDpXrdTbtRylbRLQztLy8dMMwfl6pclznBdfUhccEn9ZIzw==}
+
   nanoseconds@0.1.0:
     resolution: {integrity: sha512-6yOHqTvJNI9xGmVHWQ4ZTYhGpT0O4h9N+uk/UuRVPI8TskViB4s4QL3y+jY/Yxsdz7gvoBGPCHWRUibOyyYMwA==}
     engines: {node: '>=0.10.0'}
@@ -4123,6 +4258,9 @@ packages:
   picocolors@1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
 
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
   picomatch@2.3.1:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
@@ -4202,6 +4340,10 @@ packages:
     resolution: {integrity: sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==}
     engines: {node: ^10 || ^12 || >=14}
 
+  postcss@8.5.6:
+    resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
+    engines: {node: ^10 || ^12 || >=14}
+
   posthtml-parser@0.2.1:
     resolution: {integrity: sha512-nPC53YMqJnc/+1x4fRYFfm81KV2V+G9NZY+hTohpYg64Ay7NemWWcV4UWuy/SgMupqQ3kJ88M/iRfZmSnxT+pw==}
 
@@ -4261,6 +4403,10 @@ packages:
   pump@3.0.0:
     resolution: {integrity: sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==}
 
+  punycode.js@2.3.1:
+    resolution: {integrity: sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==}
+    engines: {node: '>=6'}
+
   punycode@2.3.0:
     resolution: {integrity: sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==}
     engines: {node: '>=6'}
@@ -4598,6 +4744,9 @@ packages:
     resolution: {integrity: sha512-J1zdXCky5GmNnuauESROVu31MQSnLoYvlyEn6j2Ztk6Q5EHFIhxkMhYcv6vuDzl2XEzoRr856QwzMgWM/TmZgw==}
     engines: {node: '>=0.10.0'}
 
+  shallow-equal@1.2.1:
+    resolution: {integrity: sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==}
+
   shebang-command@1.2.0:
     resolution: {integrity: sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==}
     engines: {node: '>=0.10.0'}
@@ -4697,6 +4846,10 @@ packages:
     resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==}
     engines: {node: '>=0.10.0'}
 
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+
   source-map-resolve@0.5.3:
     resolution: {integrity: sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==}
     deprecated: See https://github.com/lydell/source-map-resolve#deprecated
@@ -4894,6 +5047,9 @@ packages:
   strip-literal@1.0.0:
     resolution: {integrity: sha512-5o4LsH1lzBzO9UFH63AJ2ad2/S2AVx6NtjOcaz+VTT2h1RiRvbipW72z8M/lxEhcPHDBQwpDrnTF7sXy/7OwCQ==}
 
+  stylis@4.3.6:
+    resolution: {integrity: sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ==}
+
   success-symbol@0.1.0:
     resolution: {integrity: sha512-7S6uOTxPklNGxOSbDIg4KlVLBQw1UiGVyfCUYgYxrZUKRblUkmGj7r8xlfQoFudvqLv6Ap5gd76/IIFfI9JG2A==}
     engines: {node: '>=0.10.0'}
@@ -4970,6 +5126,10 @@ packages:
   thenify@3.3.1:
     resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
 
+  throttle-debounce@5.0.2:
+    resolution: {integrity: sha512-B71/4oyj61iNH0KeCamLuE2rmKuTO5byTOSVwECM5FA7TiAiAW+UqTKZ9ERueC4qvgSttUhdmq1mXC3kJqGX7A==}
+    engines: {node: '>=12.22'}
+
   through2-filter@2.0.0:
     resolution: {integrity: sha512-miwWajb1B80NvIVKXFPN/o7+vJc4jYUvnZCwvhicRAoTxdD9wbcjri70j+BenCrN/JXEPKDjhpw4iY7yiNsCGg==}
 
@@ -5099,6 +5259,9 @@ packages:
     engines: {node: '>=4.2.0'}
     hasBin: true
 
+  uc.micro@2.1.0:
+    resolution: {integrity: sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==}
+
   ufo@1.0.1:
     resolution: {integrity: sha512-boAm74ubXHY7KJQZLlXrtMz52qFvpsbOxDcZOnw/Wf+LS4Mmyu7JxmzD4tDLtUQtmZECypJ0FrCz4QIe6dvKRA==}
 
@@ -5384,8 +5547,8 @@ packages:
     peerDependencies:
       eslint: '>=6.0.0'
 
-  vue-router@4.1.6:
-    resolution: {integrity: sha512-DYWYwsG6xNPmLq/FmZn8Ip+qrhFEzA14EI12MsMgVxvHFDYvlr4NXpVF5hrRH1wVcDP8fGi5F4rxuJSl8/r+EQ==}
+  vue-router@4.5.1:
+    resolution: {integrity: sha512-ogAF3P97NPm8fJsE4by9dwSYtDwXIY1nFY9T6DyQnGHd1E2Da94w9JIolpe42LJGIl0DwOHBi8TcRPlPGwbTtw==}
     peerDependencies:
       vue: ^3.2.0
 
@@ -5398,8 +5561,19 @@ packages:
     peerDependencies:
       typescript: '*'
 
-  vue@3.2.45:
-    resolution: {integrity: sha512-9Nx/Mg2b2xWlXykmCwiTUCWHbWIj53bnkizBxKai1g61f2Xit700A1ljowpTIM11e3uipOeiPcSqnmBg6gyiaA==}
+  vue-types@3.0.2:
+    resolution: {integrity: sha512-IwUC0Aq2zwaXqy74h4WCvFCUtoV0iSWr0snWnE9TnU18S66GAQyqQbRf2qfJtUuiFsBf6qp0MEwdonlwznlcrw==}
+    engines: {node: '>=10.15.0'}
+    peerDependencies:
+      vue: ^3.0.0
+
+  vue@3.5.18:
+    resolution: {integrity: sha512-7W4Y4ZbMiQ3SEo+m9lnoNpV9xG7QVMLa+/0RFwwiAVkeYoyGXqWE85jabU4pllJNUzqfLShJ5YLptewhCWUgNA==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
 
   vuedraggable@4.1.0:
     resolution: {integrity: sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==}
@@ -5410,6 +5584,9 @@ packages:
     resolution: {integrity: sha512-1S0lwbHo3kNUKA4VomBAhqn4DPjQkIKSdbOin5K7EFUQNwyIKx+wZMGXKI53RUjla8V2B8ouQduUlgtx8LoSMw==}
     engines: {node: '>=0.10.0'}
 
+  warning@4.0.3:
+    resolution: {integrity: sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==}
+
   webpack-sources@3.2.3:
     resolution: {integrity: sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==}
     engines: {node: '>=10.13.0'}
@@ -5534,6 +5711,22 @@ snapshots:
       '@jridgewell/gen-mapping': 0.1.1
       '@jridgewell/trace-mapping': 0.3.17
 
+  '@ant-design/colors@6.0.0':
+    dependencies:
+      '@ctrl/tinycolor': 3.6.1
+
+  '@ant-design/fast-color@2.0.6':
+    dependencies:
+      '@babel/runtime': 7.28.2
+
+  '@ant-design/icons-svg@4.4.2': {}
+
+  '@ant-design/icons-vue@7.0.1(vue@3.5.18(typescript@4.9.5))':
+    dependencies:
+      '@ant-design/colors': 6.0.0
+      '@ant-design/icons-svg': 4.4.2
+      vue: 3.5.18(typescript@4.9.5)
+
   '@antfu/install-pkg@0.1.1':
     dependencies:
       execa: 5.1.1
@@ -5547,7 +5740,7 @@ snapshots:
     dependencies:
       color: 3.2.1
 
-  '@arco-design/web-vue@2.42.0(vue@3.2.45)':
+  '@arco-design/web-vue@2.42.0(vue@3.5.18(typescript@4.9.5))':
     dependencies:
       '@arco-design/color': 0.4.0
       b-tween: 0.3.3
@@ -5557,7 +5750,7 @@ snapshots:
       number-precision: 1.6.0
       resize-observer-polyfill: 1.5.1
       scroll-into-view-if-needed: 2.2.31
-      vue: 3.2.45
+      vue: 3.5.18(typescript@4.9.5)
 
   '@babel/code-frame@7.18.6':
     dependencies:
@@ -5691,10 +5884,14 @@ snapshots:
 
   '@babel/helper-string-parser@7.24.6': {}
 
+  '@babel/helper-string-parser@7.27.1': {}
+
   '@babel/helper-validator-identifier@7.19.1': {}
 
   '@babel/helper-validator-identifier@7.24.6': {}
 
+  '@babel/helper-validator-identifier@7.27.1': {}
+
   '@babel/helper-validator-option@7.18.6': {}
 
   '@babel/helpers@7.20.13':
@@ -5719,6 +5916,10 @@ snapshots:
     dependencies:
       '@babel/types': 7.20.7
 
+  '@babel/parser@7.28.3':
+    dependencies:
+      '@babel/types': 7.28.2
+
   '@babel/plugin-syntax-jsx@7.18.6(@babel/core@7.20.12)':
     dependencies:
       '@babel/core': 7.20.12
@@ -5775,6 +5976,19 @@ snapshots:
       '@babel/helper-validator-identifier': 7.24.6
       to-fast-properties: 2.0.0
 
+  '@babel/types@7.28.2':
+    dependencies:
+      '@babel/helper-string-parser': 7.27.1
+      '@babel/helper-validator-identifier': 7.27.1
+
+  '@ctrl/tinycolor@3.6.1': {}
+
+  '@emotion/hash@0.9.2': {}
+
+  '@emotion/unitless@0.10.0': {}
+
+  '@emotion/unitless@0.8.1': {}
+
   '@esbuild/android-arm64@0.16.17':
     optional: true
 
@@ -5883,7 +6097,7 @@ snapshots:
   '@jridgewell/gen-mapping@0.1.1':
     dependencies:
       '@jridgewell/set-array': 1.1.2
-      '@jridgewell/sourcemap-codec': 1.4.14
+      '@jridgewell/sourcemap-codec': 1.4.15
 
   '@jridgewell/gen-mapping@0.3.2':
     dependencies:
@@ -5899,11 +6113,15 @@ snapshots:
 
   '@jridgewell/sourcemap-codec@1.4.15': {}
 
+  '@jridgewell/sourcemap-codec@1.5.5': {}
+
   '@jridgewell/trace-mapping@0.3.17':
     dependencies:
       '@jridgewell/resolve-uri': 3.1.0
       '@jridgewell/sourcemap-codec': 1.4.14
 
+  '@microsoft/fetch-event-source@2.0.1': {}
+
   '@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1':
     dependencies:
       eslint-scope: 5.1.1
@@ -6044,6 +6262,11 @@ snapshots:
 
   '@rushstack/eslint-patch@1.2.0': {}
 
+  '@simonwep/pickr@1.8.2':
+    dependencies:
+      core-js: 3.45.0
+      nanopop: 2.4.2
+
   '@trysound/sax@0.2.0': {}
 
   '@types/estree@1.0.0': {}
@@ -6074,6 +6297,8 @@ snapshots:
 
   '@types/web-bluetooth@0.0.16': {}
 
+  '@types/web-bluetooth@0.0.21': {}
+
   '@typescript-eslint/eslint-plugin@5.50.0(@typescript-eslint/parser@5.50.0(eslint@8.33.0)(typescript@4.9.5))(eslint@8.33.0)(typescript@4.9.5)':
     dependencies:
       '@typescript-eslint/parser': 5.50.0(eslint@8.33.0)(typescript@4.9.5)
@@ -6278,20 +6503,20 @@ snapshots:
     transitivePeerDependencies:
       - rollup
 
-  '@vitejs/plugin-vue-jsx@3.0.0(vite@4.0.4(@types/node@18.11.18)(less@4.1.3)(sass@1.89.2))(vue@3.2.45)':
+  '@vitejs/plugin-vue-jsx@3.0.0(vite@4.0.4(@types/node@18.11.18)(less@4.1.3)(sass@1.89.2))(vue@3.5.18(typescript@4.9.5))':
     dependencies:
       '@babel/core': 7.20.12
       '@babel/plugin-transform-typescript': 7.20.13(@babel/core@7.20.12)
       '@vue/babel-plugin-jsx': 1.1.1(@babel/core@7.20.12)
       vite: 4.0.4(@types/node@18.11.18)(less@4.1.3)(sass@1.89.2)
-      vue: 3.2.45
+      vue: 3.5.18(typescript@4.9.5)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-vue@4.0.0(vite@4.0.4(@types/node@18.11.18)(less@4.1.3)(sass@1.89.2))(vue@3.2.45)':
+  '@vitejs/plugin-vue@4.0.0(vite@4.0.4(@types/node@18.11.18)(less@4.1.3)(sass@1.89.2))(vue@3.5.18(typescript@4.9.5))':
     dependencies:
       vite: 4.0.4(@types/node@18.11.18)(less@4.1.3)(sass@1.89.2)
-      vue: 3.2.45
+      vue: 3.5.18(typescript@4.9.5)
 
   '@volar/language-core@1.0.24':
     dependencies:
@@ -6310,10 +6535,10 @@ snapshots:
     dependencies:
       '@volar/language-core': 1.0.24
       '@volar/source-map': 1.0.24
-      '@vue/compiler-dom': 3.2.45
-      '@vue/compiler-sfc': 3.2.45
+      '@vue/compiler-dom': 3.4.27
+      '@vue/compiler-sfc': 3.4.27
       '@vue/reactivity': 3.2.45
-      '@vue/shared': 3.2.45
+      '@vue/shared': 3.4.27
       minimatch: 5.1.6
       vue-template-compiler: 2.7.14
 
@@ -6322,7 +6547,7 @@ snapshots:
       '@volar/typescript': 1.0.24
       '@volar/vue-language-core': 1.0.24
 
-  '@vue-macros/common@1.10.4(rollup@3.12.0)(vue@3.2.45)':
+  '@vue-macros/common@1.10.4(rollup@3.12.0)(vue@3.5.18(typescript@4.9.5))':
     dependencies:
       '@babel/types': 7.24.6
       '@rollup/pluginutils': 5.1.0(rollup@3.12.0)
@@ -6331,7 +6556,7 @@ snapshots:
       local-pkg: 0.5.0
       magic-string-ast: 0.6.1
     optionalDependencies:
-      vue: 3.2.45
+      vue: 3.5.18(typescript@4.9.5)
     transitivePeerDependencies:
       - rollup
 
@@ -6352,13 +6577,6 @@ snapshots:
       - '@babel/core'
       - supports-color
 
-  '@vue/compiler-core@3.2.45':
-    dependencies:
-      '@babel/parser': 7.20.13
-      '@vue/shared': 3.2.45
-      estree-walker: 2.0.2
-      source-map: 0.6.1
-
   '@vue/compiler-core@3.4.27':
     dependencies:
       '@babel/parser': 7.24.6
@@ -6367,28 +6585,23 @@ snapshots:
       estree-walker: 2.0.2
       source-map-js: 1.2.0
 
-  '@vue/compiler-dom@3.2.45':
+  '@vue/compiler-core@3.5.18':
     dependencies:
-      '@vue/compiler-core': 3.2.45
-      '@vue/shared': 3.2.45
+      '@babel/parser': 7.28.3
+      '@vue/shared': 3.5.18
+      entities: 4.5.0
+      estree-walker: 2.0.2
+      source-map-js: 1.2.1
 
   '@vue/compiler-dom@3.4.27':
     dependencies:
       '@vue/compiler-core': 3.4.27
       '@vue/shared': 3.4.27
 
-  '@vue/compiler-sfc@3.2.45':
+  '@vue/compiler-dom@3.5.18':
     dependencies:
-      '@babel/parser': 7.20.13
-      '@vue/compiler-core': 3.2.45
-      '@vue/compiler-dom': 3.2.45
-      '@vue/compiler-ssr': 3.2.45
-      '@vue/reactivity-transform': 3.2.45
-      '@vue/shared': 3.2.45
-      estree-walker: 2.0.2
-      magic-string: 0.25.9
-      postcss: 8.4.21
-      source-map: 0.6.1
+      '@vue/compiler-core': 3.5.18
+      '@vue/shared': 3.5.18
 
   '@vue/compiler-sfc@3.4.27':
     dependencies:
@@ -6402,18 +6615,32 @@ snapshots:
       postcss: 8.4.38
       source-map-js: 1.2.0
 
-  '@vue/compiler-ssr@3.2.45':
+  '@vue/compiler-sfc@3.5.18':
     dependencies:
-      '@vue/compiler-dom': 3.2.45
-      '@vue/shared': 3.2.45
+      '@babel/parser': 7.28.3
+      '@vue/compiler-core': 3.5.18
+      '@vue/compiler-dom': 3.5.18
+      '@vue/compiler-ssr': 3.5.18
+      '@vue/shared': 3.5.18
+      estree-walker: 2.0.2
+      magic-string: 0.30.17
+      postcss: 8.5.6
+      source-map-js: 1.2.1
 
   '@vue/compiler-ssr@3.4.27':
     dependencies:
       '@vue/compiler-dom': 3.4.27
       '@vue/shared': 3.4.27
 
+  '@vue/compiler-ssr@3.5.18':
+    dependencies:
+      '@vue/compiler-dom': 3.5.18
+      '@vue/shared': 3.5.18
+
   '@vue/devtools-api@6.5.0': {}
 
+  '@vue/devtools-api@6.6.4': {}
+
   '@vue/eslint-config-prettier@7.0.0(eslint@8.33.0)(prettier@2.8.3)':
     dependencies:
       eslint: 8.33.0
@@ -6433,58 +6660,70 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@vue/reactivity-transform@3.2.45':
-    dependencies:
-      '@babel/parser': 7.20.13
-      '@vue/compiler-core': 3.2.45
-      '@vue/shared': 3.2.45
-      estree-walker: 2.0.2
-      magic-string: 0.25.9
-
   '@vue/reactivity@3.2.45':
     dependencies:
       '@vue/shared': 3.2.45
 
-  '@vue/runtime-core@3.2.45':
+  '@vue/reactivity@3.5.18':
     dependencies:
-      '@vue/reactivity': 3.2.45
-      '@vue/shared': 3.2.45
+      '@vue/shared': 3.5.18
 
-  '@vue/runtime-dom@3.2.45':
+  '@vue/runtime-core@3.5.18':
     dependencies:
-      '@vue/runtime-core': 3.2.45
-      '@vue/shared': 3.2.45
-      csstype: 2.6.21
+      '@vue/reactivity': 3.5.18
+      '@vue/shared': 3.5.18
 
-  '@vue/server-renderer@3.2.45(vue@3.2.45)':
+  '@vue/runtime-dom@3.5.18':
     dependencies:
-      '@vue/compiler-ssr': 3.2.45
-      '@vue/shared': 3.2.45
-      vue: 3.2.45
+      '@vue/reactivity': 3.5.18
+      '@vue/runtime-core': 3.5.18
+      '@vue/shared': 3.5.18
+      csstype: 3.1.3
+
+  '@vue/server-renderer@3.5.18(vue@3.5.18(typescript@4.9.5))':
+    dependencies:
+      '@vue/compiler-ssr': 3.5.18
+      '@vue/shared': 3.5.18
+      vue: 3.5.18(typescript@4.9.5)
 
   '@vue/shared@3.2.45': {}
 
   '@vue/shared@3.4.27': {}
 
+  '@vue/shared@3.5.18': {}
+
   '@vue/tsconfig@0.1.3(@types/node@18.11.18)':
     optionalDependencies:
       '@types/node': 18.11.18
 
-  '@vueuse/core@9.12.0(vue@3.2.45)':
+  '@vueuse/core@13.6.0(vue@3.5.18(typescript@4.9.5))':
+    dependencies:
+      '@types/web-bluetooth': 0.0.21
+      '@vueuse/metadata': 13.6.0
+      '@vueuse/shared': 13.6.0(vue@3.5.18(typescript@4.9.5))
+      vue: 3.5.18(typescript@4.9.5)
+
+  '@vueuse/core@9.12.0(vue@3.5.18(typescript@4.9.5))':
     dependencies:
       '@types/web-bluetooth': 0.0.16
       '@vueuse/metadata': 9.12.0
-      '@vueuse/shared': 9.12.0(vue@3.2.45)
-      vue-demi: 0.13.11(vue@3.2.45)
+      '@vueuse/shared': 9.12.0(vue@3.5.18(typescript@4.9.5))
+      vue-demi: 0.13.11(vue@3.5.18(typescript@4.9.5))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
 
+  '@vueuse/metadata@13.6.0': {}
+
   '@vueuse/metadata@9.12.0': {}
 
-  '@vueuse/shared@9.12.0(vue@3.2.45)':
+  '@vueuse/shared@13.6.0(vue@3.5.18(typescript@4.9.5))':
     dependencies:
-      vue-demi: 0.13.11(vue@3.2.45)
+      vue: 3.5.18(typescript@4.9.5)
+
+  '@vueuse/shared@9.12.0(vue@3.5.18(typescript@4.9.5))':
+    dependencies:
+      vue-demi: 0.13.11(vue@3.5.18(typescript@4.9.5))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -6748,6 +6987,44 @@ snapshots:
     dependencies:
       ansi-wrap: 0.1.0
 
+  ant-design-vue@4.2.6(vue@3.5.18(typescript@4.9.5)):
+    dependencies:
+      '@ant-design/colors': 6.0.0
+      '@ant-design/icons-vue': 7.0.1(vue@3.5.18(typescript@4.9.5))
+      '@babel/runtime': 7.28.2
+      '@ctrl/tinycolor': 3.6.1
+      '@emotion/hash': 0.9.2
+      '@emotion/unitless': 0.8.1
+      '@simonwep/pickr': 1.8.2
+      array-tree-filter: 2.1.0
+      async-validator: 4.2.5
+      csstype: 3.1.3
+      dayjs: 1.11.7
+      dom-align: 1.12.4
+      dom-scroll-into-view: 2.0.1
+      lodash: 4.17.21
+      lodash-es: 4.17.21
+      resize-observer-polyfill: 1.5.1
+      scroll-into-view-if-needed: 2.2.31
+      shallow-equal: 1.2.1
+      stylis: 4.3.6
+      throttle-debounce: 5.0.2
+      vue: 3.5.18(typescript@4.9.5)
+      vue-types: 3.0.2(vue@3.5.18(typescript@4.9.5))
+      warning: 4.0.3
+
+  ant-design-x-vue@1.3.2(ant-design-vue@4.2.6(vue@3.5.18(typescript@4.9.5)))(vue@3.5.18(typescript@4.9.5)):
+    dependencies:
+      '@ant-design/fast-color': 2.0.6
+      '@emotion/hash': 0.9.2
+      '@emotion/unitless': 0.10.0
+      '@vueuse/core': 13.6.0(vue@3.5.18(typescript@4.9.5))
+      ant-design-vue: 4.2.6(vue@3.5.18(typescript@4.9.5))
+      classnames: 2.5.1
+      csstype: 3.1.3
+      stylis: 4.3.6
+      vue: 3.5.18(typescript@4.9.5)
+
   any-promise@1.3.0: {}
 
   anymatch@3.1.3:
@@ -6790,6 +7067,8 @@ snapshots:
       get-value: 2.0.6
       kind-of: 5.1.0
 
+  array-tree-filter@2.1.0: {}
+
   array-union@2.1.0: {}
 
   array-unique@0.2.1: {}
@@ -6924,6 +7203,8 @@ snapshots:
     dependencies:
       async-done: 0.4.0
 
+  async-validator@4.2.5: {}
+
   async@1.5.2: {}
 
   asynckit@0.4.0: {}
@@ -7497,6 +7778,8 @@ snapshots:
       isobject: 3.0.1
       static-extend: 0.1.2
 
+  classnames@2.5.1: {}
+
   clean-stack@2.2.0: {}
 
   cli-cursor@1.0.2:
@@ -7655,8 +7938,7 @@ snapshots:
 
   copy-to@2.0.1: {}
 
-  core-js@3.45.0:
-    optional: true
+  core-js@3.45.0: {}
 
   core-util-is@1.0.3: {}
 
@@ -7701,7 +7983,7 @@ snapshots:
   css-tree@2.3.1:
     dependencies:
       mdn-data: 2.0.30
-      source-map-js: 1.0.2
+      source-map-js: 1.2.0
 
   css-what@6.2.2: {}
 
@@ -7711,7 +7993,7 @@ snapshots:
     dependencies:
       css-tree: 1.1.3
 
-  csstype@2.6.21: {}
+  csstype@3.1.3: {}
 
   cwd@0.10.0:
     dependencies:
@@ -7861,6 +8143,10 @@ snapshots:
     dependencies:
       esutils: 2.0.3
 
+  dom-align@1.12.4: {}
+
+  dom-scroll-into-view@2.0.1: {}
+
   dom-serializer@0.2.2:
     dependencies:
       domelementtype: 2.3.0
@@ -9264,6 +9550,8 @@ snapshots:
     dependencies:
       isobject: 3.0.1
 
+  is-plain-object@3.0.1: {}
+
   is-posix-bracket@0.1.1: {}
 
   is-primitive@2.0.0: {}
@@ -9558,6 +9846,10 @@ snapshots:
 
   lilconfig@2.0.6: {}
 
+  linkify-it@5.0.0:
+    dependencies:
+      uc.micro: 2.1.0
+
   lint-staged@13.1.0:
     dependencies:
       cli-truncate: 3.1.0
@@ -9789,6 +10081,10 @@ snapshots:
 
   longest@1.0.1: {}
 
+  loose-envify@1.4.0:
+    dependencies:
+      js-tokens: 4.0.0
+
   lower-case@1.1.4: {}
 
   lru-cache@5.1.1:
@@ -9803,10 +10099,6 @@ snapshots:
     dependencies:
       magic-string: 0.30.10
 
-  magic-string@0.25.9:
-    dependencies:
-      sourcemap-codec: 1.4.8
-
   magic-string@0.26.7:
     dependencies:
       sourcemap-codec: 1.4.8
@@ -9819,6 +10111,10 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.4.15
 
+  magic-string@0.30.17:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
   make-dir@2.1.0:
     dependencies:
       pify: 4.0.1
@@ -9870,6 +10166,15 @@ snapshots:
     dependencies:
       object-visit: 1.0.1
 
+  markdown-it@14.1.0:
+    dependencies:
+      argparse: 2.0.1
+      entities: 4.5.0
+      linkify-it: 5.0.0
+      mdurl: 2.0.0
+      punycode.js: 2.3.1
+      uc.micro: 2.1.0
+
   marked@16.1.2: {}
 
   match-file@0.2.2:
@@ -9907,6 +10212,8 @@ snapshots:
 
   mdn-data@2.0.30: {}
 
+  mdurl@2.0.0: {}
+
   memory-fs@0.5.0:
     dependencies:
       errno: 0.1.8
@@ -10078,6 +10385,8 @@ snapshots:
       object-assign: 4.1.1
       thenify-all: 1.6.0
 
+  nanoid@3.3.11: {}
+
   nanoid@3.3.4: {}
 
   nanoid@3.3.7: {}
@@ -10098,6 +10407,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  nanopop@2.4.2: {}
+
   nanoseconds@0.1.0: {}
 
   natural-compare-lite@1.4.0: {}
@@ -10440,6 +10751,8 @@ snapshots:
 
   picocolors@1.0.0: {}
 
+  picocolors@1.1.1: {}
+
   picomatch@2.3.1: {}
 
   pidtree@0.3.1: {}
@@ -10451,11 +10764,11 @@ snapshots:
   pify@4.0.1:
     optional: true
 
-  pinia@2.0.29(typescript@4.9.5)(vue@3.2.45):
+  pinia@2.0.29(typescript@4.9.5)(vue@3.5.18(typescript@4.9.5)):
     dependencies:
       '@vue/devtools-api': 6.5.0
-      vue: 3.2.45
-      vue-demi: 0.13.11(vue@3.2.45)
+      vue: 3.5.18(typescript@4.9.5)
+      vue-demi: 0.13.11(vue@3.5.18(typescript@4.9.5))
     optionalDependencies:
       typescript: 4.9.5
 
@@ -10517,6 +10830,12 @@ snapshots:
       picocolors: 1.0.0
       source-map-js: 1.2.0
 
+  postcss@8.5.6:
+    dependencies:
+      nanoid: 3.3.11
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
   posthtml-parser@0.2.1:
     dependencies:
       htmlparser2: 3.10.1
@@ -10574,6 +10893,8 @@ snapshots:
       end-of-stream: 1.4.4
       once: 1.4.0
 
+  punycode.js@2.3.1: {}
+
   punycode@2.3.0: {}
 
   qs@6.12.1:
@@ -11033,6 +11354,8 @@ snapshots:
       lazy-cache: 0.2.7
       mixin-object: 2.0.1
 
+  shallow-equal@1.2.1: {}
+
   shebang-command@1.2.0:
     dependencies:
       shebang-regex: 1.0.0
@@ -11154,6 +11477,8 @@ snapshots:
 
   source-map-js@1.2.0: {}
 
+  source-map-js@1.2.1: {}
+
   source-map-resolve@0.5.3:
     dependencies:
       atob: 2.1.2
@@ -11351,6 +11676,8 @@ snapshots:
     dependencies:
       acorn: 8.8.2
 
+  stylis@4.3.6: {}
+
   success-symbol@0.1.0: {}
 
   supports-color@2.0.0: {}
@@ -11478,6 +11805,8 @@ snapshots:
     dependencies:
       any-promise: 1.3.0
 
+  throttle-debounce@5.0.2: {}
+
   through2-filter@2.0.0:
     dependencies:
       through2: 2.0.5
@@ -11641,6 +11970,8 @@ snapshots:
 
   typescript@4.9.5: {}
 
+  uc.micro@2.1.0: {}
+
   ufo@1.0.1: {}
 
   ufo@1.5.3: {}
@@ -11743,7 +12074,7 @@ snapshots:
       - supports-color
       - vite
 
-  unplugin-auto-import@0.13.0(@vueuse/core@9.12.0(vue@3.2.45))(rollup@3.12.0):
+  unplugin-auto-import@0.13.0(@vueuse/core@9.12.0(vue@3.5.18(typescript@4.9.5)))(rollup@3.12.0):
     dependencies:
       '@antfu/utils': 0.7.2
       '@rollup/pluginutils': 5.0.2(rollup@3.12.0)
@@ -11752,11 +12083,11 @@ snapshots:
       unimport: 2.1.0(rollup@3.12.0)
       unplugin: 1.0.1
     optionalDependencies:
-      '@vueuse/core': 9.12.0(vue@3.2.45)
+      '@vueuse/core': 9.12.0(vue@3.5.18(typescript@4.9.5))
     transitivePeerDependencies:
       - rollup
 
-  unplugin-icons@0.15.2(@vue/compiler-sfc@3.4.27)(vue-template-compiler@2.7.14):
+  unplugin-icons@0.15.2(@vue/compiler-sfc@3.5.18)(vue-template-compiler@2.7.14):
     dependencies:
       '@antfu/install-pkg': 0.1.1
       '@antfu/utils': 0.7.2
@@ -11766,12 +12097,12 @@ snapshots:
       local-pkg: 0.4.3
       unplugin: 1.0.1
     optionalDependencies:
-      '@vue/compiler-sfc': 3.4.27
+      '@vue/compiler-sfc': 3.5.18
       vue-template-compiler: 2.7.14
     transitivePeerDependencies:
       - supports-color
 
-  unplugin-vue-components@0.23.0(@babel/parser@7.24.6)(rollup@3.12.0)(vue@3.2.45):
+  unplugin-vue-components@0.23.0(@babel/parser@7.28.3)(rollup@3.12.0)(vue@3.5.18(typescript@4.9.5)):
     dependencies:
       '@antfu/utils': 0.7.2
       '@nuxt/kit': 3.1.1(rollup@3.12.0)
@@ -11784,16 +12115,16 @@ snapshots:
       minimatch: 6.1.6
       resolve: 1.22.1
       unplugin: 1.0.1
-      vue: 3.2.45
+      vue: 3.5.18(typescript@4.9.5)
     optionalDependencies:
-      '@babel/parser': 7.24.6
+      '@babel/parser': 7.28.3
     transitivePeerDependencies:
       - rollup
       - supports-color
 
-  unplugin-vue-define-options@1.4.5(rollup@3.12.0)(vue@3.2.45):
+  unplugin-vue-define-options@1.4.5(rollup@3.12.0)(vue@3.5.18(typescript@4.9.5)):
     dependencies:
-      '@vue-macros/common': 1.10.4(rollup@3.12.0)(vue@3.2.45)
+      '@vue-macros/common': 1.10.4(rollup@3.12.0)(vue@3.5.18(typescript@4.9.5))
       ast-walker-scope: 0.6.1
       unplugin: 1.10.1
     transitivePeerDependencies:
@@ -11828,7 +12159,7 @@ snapshots:
     dependencies:
       '@babel/core': 7.20.12
       '@babel/standalone': 7.20.14
-      '@babel/types': 7.20.7
+      '@babel/types': 7.24.6
       scule: 1.0.0
     transitivePeerDependencies:
       - supports-color
@@ -12042,26 +12373,26 @@ snapshots:
 
   vue-cropper@1.1.4: {}
 
-  vue-demi@0.13.11(vue@3.2.45):
+  vue-demi@0.13.11(vue@3.5.18(typescript@4.9.5)):
     dependencies:
-      vue: 3.2.45
+      vue: 3.5.18(typescript@4.9.5)
 
-  vue-draggable-next@2.2.1(sortablejs@1.14.0)(vue@3.2.45):
+  vue-draggable-next@2.2.1(sortablejs@1.14.0)(vue@3.5.18(typescript@4.9.5)):
     dependencies:
       sortablejs: 1.14.0
-      vue: 3.2.45
+      vue: 3.5.18(typescript@4.9.5)
 
   vue-draggable-plus@0.6.0(@types/sortablejs@1.15.8):
     dependencies:
       '@types/sortablejs': 1.15.8
 
-  vue-echarts@7.0.3(@vue/runtime-core@3.2.45)(echarts@5.6.0)(vue@3.2.45):
+  vue-echarts@7.0.3(@vue/runtime-core@3.5.18)(echarts@5.6.0)(vue@3.5.18(typescript@4.9.5)):
     dependencies:
       echarts: 5.6.0
-      vue: 3.2.45
-      vue-demi: 0.13.11(vue@3.2.45)
+      vue: 3.5.18(typescript@4.9.5)
+      vue-demi: 0.13.11(vue@3.5.18(typescript@4.9.5))
     optionalDependencies:
-      '@vue/runtime-core': 3.2.45
+      '@vue/runtime-core': 3.5.18
     transitivePeerDependencies:
       - '@vue/composition-api'
 
@@ -12078,10 +12409,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vue-router@4.1.6(vue@3.2.45):
+  vue-router@4.5.1(vue@3.5.18(typescript@4.9.5)):
     dependencies:
-      '@vue/devtools-api': 6.5.0
-      vue: 3.2.45
+      '@vue/devtools-api': 6.6.4
+      vue: 3.5.18(typescript@4.9.5)
 
   vue-template-compiler@2.7.14:
     dependencies:
@@ -12094,21 +12425,32 @@ snapshots:
       '@volar/vue-typescript': 1.0.24
       typescript: 4.9.5
 
-  vue@3.2.45:
+  vue-types@3.0.2(vue@3.5.18(typescript@4.9.5)):
     dependencies:
-      '@vue/compiler-dom': 3.2.45
-      '@vue/compiler-sfc': 3.2.45
-      '@vue/runtime-dom': 3.2.45
-      '@vue/server-renderer': 3.2.45(vue@3.2.45)
-      '@vue/shared': 3.2.45
+      is-plain-object: 3.0.1
+      vue: 3.5.18(typescript@4.9.5)
 
-  vuedraggable@4.1.0(vue@3.2.45):
+  vue@3.5.18(typescript@4.9.5):
+    dependencies:
+      '@vue/compiler-dom': 3.5.18
+      '@vue/compiler-sfc': 3.5.18
+      '@vue/runtime-dom': 3.5.18
+      '@vue/server-renderer': 3.5.18(vue@3.5.18(typescript@4.9.5))
+      '@vue/shared': 3.5.18
+    optionalDependencies:
+      typescript: 4.9.5
+
+  vuedraggable@4.1.0(vue@3.5.18(typescript@4.9.5)):
     dependencies:
       sortablejs: 1.14.0
-      vue: 3.2.45
+      vue: 3.5.18(typescript@4.9.5)
 
   warning-symbol@0.1.0: {}
 
+  warning@4.0.3:
+    dependencies:
+      loose-envify: 1.4.0
+
   webpack-sources@3.2.3: {}
 
   webpack-virtual-modules@0.5.0: {}
diff --git a/src/App.vue b/src/App.vue
index d177a78..2e627f8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,14 +7,17 @@
 
 <script setup>
 import { useUserStore } from '@/stores';
+import { useChatStore } from '@/stores/modules/chat';
 
-import { getUserEnterpriseInfo } from '@/utils/user';
+import { initApp } from '@/utils/user';
 import { useSidebarStore } from '@/stores/modules/side-bar';
 
 import zhCN from '@arco-design/web-vue/es/locale/lang/zh-cn';
 
 const userStore = useUserStore();
+const route = useRoute();
 const sidebarStore = useSidebarStore();
+const chatStore = useChatStore();
 
 const redTheme = {
   token: {
@@ -24,11 +27,10 @@ const redTheme = {
 };
 
 const init = async () => {
-  const { isLogin, getUserInfo } = userStore;
+  const { isLogin } = userStore;
 
   if (isLogin) {
-    await getUserInfo(); // 初始化用户信息
-    await getUserEnterpriseInfo();
+    await initApp();
 
     sidebarStore.startUnreadInfoPolling();
   } else {
diff --git a/src/api/all/chat.ts b/src/api/all/chat.ts
new file mode 100644
index 0000000..be7fea7
--- /dev/null
+++ b/src/api/all/chat.ts
@@ -0,0 +1,62 @@
+import Http from '@/api';
+import axios from 'axios';
+import { glsWithCatch } from '@/utils/stroage';
+import { useEnterpriseStore } from '@/stores/modules/enterprise';
+export const BASE_PYTHON_URL = 'https://agent.lvfunai.com';
+import { genRandomId } from '@/utils/tools';
+
+// 历史记录-列表
+export const getAgentHistory = (id: string) => {
+  return Http.get(`/v1/multi-agent/history/${id}`);
+};
+
+// 历史记录-更新标题
+export const postUpdateSessionTitle = (data: any) => {
+  return Http.post('/v1/multi-agent/edit-session-title', data);
+};
+
+// 历史记录-置顶/取消置顶
+export const postUpdateSessionSort = (data: any) => {
+  return Http.post('/v1/multi-agent/edit-session-sort', data);
+};
+
+// 历史记录-删除
+export const deleteHistoryItem = (id: string) => {
+  return Http.delete(`/v1/multi-agent/del-session/${id}`);
+};
+
+// 历史记录-列表
+export const getConversationList = (params: {}) => {
+  return Http.get(`/v1/conversation/message/list`, params);
+};
+
+export const getHeaders = () => {
+  const store = useEnterpriseStore();
+  return {
+    Authorization: glsWithCatch('accessToken'),
+    'enterprise-id': store.enterpriseInfo?.id,
+    Accept: 'application/json',
+    'Content-Type': 'application/json',
+    requestid: genRandomId(),
+  };
+};
+
+/**
+ * 获取智能体信息
+ */
+export const getAgentData = async () => {
+  const { data } = await axios.get(`${BASE_PYTHON_URL}/api/agent/info`, {
+    headers: getHeaders(),
+  });
+  return data;
+};
+
+/**
+ * 生成会话id
+ */
+export const createSession = async () => {
+  const { data } = await axios.get(`${BASE_PYTHON_URL}/api/agent/create_session`, {
+    headers: getHeaders(),
+  });
+  return data;
+};
diff --git a/src/api/all/generationWorkshop.ts b/src/api/all/generationWorkshop.ts
index 8c9a16d..f31186e 100644
--- a/src/api/all/generationWorkshop.ts
+++ b/src/api/all/generationWorkshop.ts
@@ -150,3 +150,23 @@ export const deleteShareWorksComments = (id: string, commentId: string, shareCod
     headers: { 'share-code': shareCode },
   });
 };
+
+// 原料库-分页
+export const getRawMaterialsPage = (params = {}) => {
+  return Http.get('/v1/raw-materials', params);
+};
+
+// 原料库-删除
+export const deleteRawMaterial = (id: string) => {
+  return Http.delete(`/v1/raw-materials/${id}`);
+};
+
+// 原料库-批量删除
+export const batchDeleteRawMaterials = (params = {}) => {
+  return Http.delete(`/v1/raw-materials/batch`, { data: params });
+};
+
+// 原料库-AI添加
+export const postRawMaterialsAI = (params = {}) => {
+  return Http.post('/v1/raw-materials/ai', params);
+};
diff --git a/src/api/index.ts b/src/api/index.ts
index 2684e95..752c186 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -72,7 +72,6 @@ export class Request {
         const { response } = err;
         const status = response?.status;
         let errMessage = response?.data?.message ?? err.message;
-
         switch (status) {
           case HttpStatusCode.InternalServerError:
             errMessage = '系统繁忙，请稍后再试或联系管理员。';
diff --git a/src/assets/LOGO.svg b/src/assets/LOGO.svg
deleted file mode 100644
index bdc8784..0000000
--- a/src/assets/LOGO.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="148" height="32" viewBox="0 0 148 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13.082 15.38L13.342 13.17H28.188L28.396 11.428H14.694L15.006 9.244H28.682L28.916 7.528H14.278L14.538 5.292H29.28C30.06 5.292 30.6407 5.49133 31.022 5.89C31.4033 6.27133 31.5507 6.83467 31.464 7.58L30.502 15.38H13.082ZM30.71 27.262C28.6647 26.3433 27.0007 25.4333 25.718 24.532C24.2273 23.492 22.91 22.2787 21.766 20.892C20.778 22.3653 19.3913 23.6307 17.606 24.688C16.15 25.5547 14.304 26.4127 12.068 27.262L10.274 25.442C11.9727 24.7487 13.316 24.1767 14.304 23.726C15.292 23.258 16.202 22.738 17.034 22.166C18.0047 21.5073 18.802 20.7707 19.426 19.956C20.0673 19.124 20.5093 18.1707 20.752 17.096L20.934 15.978H23.56L23.326 17.148C23.1873 17.7373 23.04 18.2313 22.884 18.63C24.1147 20.242 25.4927 21.542 27.018 22.53C27.7633 23.0153 28.5867 23.466 29.488 23.882C30.4067 24.2807 31.49 24.7053 32.738 25.156L30.71 27.262ZM28.942 16.732H31.49L28.63 20.944H25.978L28.942 16.732ZM17.684 20.944H15.11L12.77 16.914H15.24L17.684 20.944ZM40.98 15.926C39.9747 17.8327 38.9347 19.4793 37.86 20.866L35.884 19.722C37.8253 17.2607 39.5847 14.3833 41.162 11.09H37.808L38.068 8.802H41.864L42.41 4.46H44.828L44.282 8.802H47.09L46.856 11.09H43.996L43.918 11.688C44.802 13.1267 45.738 14.912 46.726 17.044L44.828 18.214C44.412 17.174 43.97 16.1427 43.502 15.12L42.046 26.82H39.628L40.98 15.926ZM55.046 7.996H50.99L49.976 16.342C49.404 21.1433 48.1647 24.714 46.258 27.054L43.866 26.144C44.8887 24.8267 45.686 23.3793 46.258 21.802C46.83 20.2073 47.246 18.37 47.506 16.29L48.546 7.554C48.6327 6.89533 48.8147 6.41867 49.092 6.124C49.3867 5.812 49.8373 5.656 50.444 5.656H55.774C56.3633 5.656 56.814 5.80333 57.126 6.098C57.438 6.39267 57.594 6.81733 57.594 7.372C57.594 7.56267 57.5853 7.71 57.568 7.814L55.748 23.622C55.7307 23.674 55.722 23.752 55.722 23.856C55.722 24.012 55.7653 24.116 55.852 24.168C55.9387 24.22 56.086 24.246 56.294 24.246C57.1953 24.246 58.114 23.9947 59.05 23.492L58.764 26.118C58.0533 26.4647 57.1607 26.638 56.086 26.638H55.124C53.824 26.638 53.174 26.0053 53.174 24.74C53.174 24.532 53.1827 24.3673 53.2 24.246L55.046 7.996ZM73.922 6.41C74.8927 6.41 75.456 6.878 75.612 7.814L78.576 25.936H75.326L74.468 20.294H66.07L63.808 25.936H60.454L67.942 7.606C68.2713 6.80867 68.878 6.41 69.762 6.41H73.922ZM70.516 9.27L67.214 17.434H74.026L72.778 9.27H70.516ZM83.2706 6.41H86.3386L83.9466 25.936H80.8786L83.2706 6.41ZM103.385 4.486H105.855L105.621 5.994H111.133L110.821 8.23H105.309L105.153 9.426H102.735L102.891 8.23H97.7169L97.5609 9.426H95.1169L95.2729 8.23H89.7869L90.0989 5.994H95.5589L95.7669 4.486H98.2369L98.0289 5.994H103.177L103.385 4.486ZM107.961 9.92C108.793 9.92 109.382 10.0587 109.729 10.336C110.093 10.6133 110.275 11.038 110.275 11.61C110.275 11.818 110.266 11.9827 110.249 12.104L109.989 14.626H107.493L107.805 11.974H92.5689L92.2569 14.626H89.7089L90.0209 12.052C90.1249 11.3067 90.3589 10.7693 90.7229 10.44C91.0869 10.0933 91.6589 9.92 92.4389 9.92H107.961ZM106.479 18.942H92.6209L93.0369 15.068C93.1235 14.3573 93.3229 13.8807 93.6349 13.638C93.9642 13.3953 94.5275 13.274 95.3249 13.274H104.919C105.664 13.274 106.202 13.456 106.531 13.82C106.878 14.1667 107.016 14.6173 106.947 15.172L106.479 18.942ZM95.3769 16.966H104.295L104.529 15.25H95.5329L95.3769 16.966ZM107.519 26.664H90.3849L90.9309 22.27C91.1215 20.8313 91.9882 20.112 93.5309 20.112H105.959C107.519 20.112 108.221 20.8227 108.065 22.244L107.519 26.664ZM93.2709 24.506H105.205L105.491 22.244H93.5569L93.2709 24.506ZM132.583 4.564L131.829 10.7H134.481C135.989 10.7 136.674 11.4453 136.535 12.936L135.157 25.13C135.07 25.6673 134.854 26.0833 134.507 26.378C134.178 26.6727 133.762 26.82 133.259 26.82C132.167 26.82 130.884 26.6727 129.411 26.378L129.645 24.168C130.616 24.376 131.56 24.4973 132.479 24.532H132.609C132.73 24.532 132.808 24.506 132.843 24.454C132.878 24.402 132.904 24.2893 132.921 24.116L133.207 21.62H125.927L125.329 26.716H123.015L124.627 12.806C124.696 12.1473 124.922 11.636 125.303 11.272C125.702 10.8907 126.239 10.7 126.915 10.7H129.437L130.165 4.564H132.583ZM124.211 6.826L123.769 9.088H117.373C116.801 9.088 116.515 8.88 116.515 8.464C116.515 8.308 116.558 8.11733 116.645 7.892L117.893 4.616H120.441L119.661 6.826H124.211ZM127.409 5.474L128.475 9.686H126.057L125.043 5.474H127.409ZM137.211 5.552L135.625 9.712H133.233L134.819 5.552H137.211ZM123.067 16.628L122.807 18.89H119.791L119.297 22.894V22.972C119.297 23.2147 119.375 23.336 119.531 23.336L119.739 23.284C120.779 22.92 121.689 22.556 122.469 22.192L122.183 24.766C120.952 25.286 119.73 25.702 118.517 26.014C118.344 26.066 118.17 26.092 117.997 26.092C117.564 26.092 117.226 25.9273 116.983 25.598C116.758 25.286 116.68 24.8527 116.749 24.298L117.399 18.89H114.851L115.111 16.628H117.685L118.023 13.846H115.631L115.891 11.61H123.223L122.963 13.846H120.415L120.051 16.628H123.067ZM134.195 12.884H126.967L126.707 15.068H133.935L134.195 12.884ZM133.701 17.2H126.447L126.187 19.488H133.441L133.701 17.2Z" fill="#6D4CFE"/>
-</svg>
diff --git a/src/assets/img/LOGO.svg b/src/assets/img/LOGO.svg
deleted file mode 100644
index de60bf9..0000000
--- a/src/assets/img/LOGO.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="180" height="38" viewBox="0 0 180 38" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M17.4129 18.4937L17.7129 15.9437H34.8429L35.0829 13.9337H19.2729L19.6329 11.4137H35.4129L35.6829 9.43375H18.7929L19.0929 6.85375H36.1029C37.0029 6.85375 37.6729 7.08375 38.1129 7.54375C38.5529 7.98375 38.7229 8.63375 38.6229 9.49375L37.5129 18.4937H17.4129ZM37.7529 32.2038C35.3929 31.1438 33.4729 30.0938 31.9929 29.0537C30.2729 27.8537 28.7529 26.4537 27.4329 24.8537C26.2929 26.5537 24.6929 28.0137 22.6329 29.2337C20.9529 30.2338 18.8229 31.2238 16.2429 32.2038L14.1729 30.1038C16.1329 29.3037 17.6829 28.6437 18.8229 28.1237C19.9629 27.5837 21.0129 26.9837 21.9729 26.3237C23.0929 25.5637 24.0129 24.7137 24.7329 23.7737C25.4729 22.8137 25.9829 21.7137 26.2629 20.4737L26.4729 19.1837H29.5029L29.2329 20.5337C29.0729 21.2137 28.9029 21.7837 28.7229 22.2437C30.1429 24.1037 31.7329 25.6037 33.4929 26.7437C34.3529 27.3037 35.3029 27.8237 36.3429 28.3037C37.4029 28.7637 38.6529 29.2537 40.0929 29.7738L37.7529 32.2038ZM35.7129 20.0537H38.6529L35.3529 24.9137H32.2929L35.7129 20.0537ZM22.7229 24.9137H19.7529L17.0529 20.2637H19.9029L22.7229 24.9137ZM49.6029 19.1237C48.4429 21.3237 47.2429 23.2237 46.0029 24.8237L43.7229 23.5037C45.9629 20.6637 47.9929 17.3437 49.8129 13.5437H45.9429L46.2429 10.9037H50.6229L51.2529 5.89375H54.0429L53.4129 10.9037H56.6529L56.3829 13.5437H53.0829L52.9929 14.2337C54.0129 15.8937 55.0929 17.9537 56.2329 20.4137L54.0429 21.7637C53.5629 20.5637 53.0529 19.3737 52.5129 18.1937L50.8329 31.6938H48.0429L49.6029 19.1237ZM65.8329 9.97375H61.1529L59.9829 19.6037C59.3229 25.1437 57.8929 29.2638 55.6929 31.9638L52.9329 30.9138C54.1129 29.3938 55.0329 27.7237 55.6929 25.9037C56.3529 24.0637 56.8329 21.9437 57.1329 19.5437L58.3329 9.46375C58.4329 8.70375 58.6429 8.15375 58.9629 7.81375C59.3029 7.45375 59.8229 7.27375 60.5229 7.27375H66.6729C67.3529 7.27375 67.8729 7.44375 68.2329 7.78375C68.5929 8.12375 68.7729 8.61375 68.7729 9.25375C68.7729 9.47375 68.7629 9.64375 68.7429 9.76375L66.6429 28.0037C66.6229 28.0637 66.6129 28.1537 66.6129 28.2737C66.6129 28.4537 66.6629 28.5737 66.7629 28.6337C66.8629 28.6937 67.0329 28.7237 67.2729 28.7237C68.3129 28.7237 69.3729 28.4337 70.4529 27.8537L70.1229 30.8838C69.3029 31.2838 68.2729 31.4838 67.0329 31.4838H65.9229C64.4229 31.4838 63.6729 30.7538 63.6729 29.2937C63.6729 29.0537 63.6829 28.8637 63.7029 28.7237L65.8329 9.97375ZM87.6129 8.14375C88.7329 8.14375 89.3829 8.68375 89.5629 9.76375L92.9829 30.6738H89.2329L88.2429 24.1637H78.5529L75.9429 30.6738H72.0729L80.7129 9.52375C81.0929 8.60375 81.7929 8.14375 82.8129 8.14375H87.6129ZM83.6829 11.4437L79.8729 20.8637H87.7329L86.2929 11.4437H83.6829ZM98.3998 8.14375H101.94L99.1798 30.6738H95.6398L98.3998 8.14375ZM121.609 5.92375H124.459L124.189 7.66375H130.549L130.189 10.2437H123.829L123.649 11.6237H120.859L121.039 10.2437H115.069L114.889 11.6237H112.069L112.249 10.2437H105.919L106.279 7.66375H112.579L112.819 5.92375H115.669L115.429 7.66375H121.369L121.609 5.92375ZM126.889 12.1937C127.849 12.1937 128.529 12.3537 128.929 12.6737C129.349 12.9937 129.559 13.4837 129.559 14.1437C129.559 14.3837 129.549 14.5737 129.529 14.7137L129.229 17.6237H126.349L126.709 14.5637H109.129L108.769 17.6237H105.829L106.189 14.6537C106.309 13.7937 106.579 13.1737 106.999 12.7937C107.419 12.3937 108.079 12.1937 108.979 12.1937H126.889ZM125.179 22.6037H109.189L109.669 18.1337C109.769 17.3137 109.999 16.7637 110.359 16.4837C110.739 16.2037 111.389 16.0637 112.309 16.0637H123.379C124.239 16.0637 124.859 16.2737 125.239 16.6937C125.639 17.0937 125.799 17.6137 125.719 18.2537L125.179 22.6037ZM112.369 20.3237H122.659L122.929 18.3437H112.549L112.369 20.3237ZM126.379 31.5138H106.609L107.239 26.4437C107.459 24.7837 108.459 23.9537 110.239 23.9537H124.579C126.379 23.9537 127.189 24.7737 127.009 26.4137L126.379 31.5138ZM109.939 29.0237H123.709L124.039 26.4137H110.269L109.939 29.0237ZM155.299 6.01375L154.429 13.0937H157.489C159.229 13.0937 160.019 13.9537 159.859 15.6737L158.269 29.7438C158.169 30.3638 157.919 30.8438 157.519 31.1838C157.139 31.5238 156.659 31.6938 156.079 31.6938C154.819 31.6938 153.339 31.5238 151.639 31.1838L151.909 28.6337C153.029 28.8737 154.119 29.0137 155.179 29.0537H155.329C155.469 29.0537 155.559 29.0237 155.599 28.9637C155.639 28.9037 155.669 28.7737 155.689 28.5737L156.019 25.6937H147.619L146.929 31.5737H144.259L146.119 15.5237C146.199 14.7637 146.459 14.1737 146.899 13.7538C147.359 13.3137 147.979 13.0937 148.759 13.0937H151.669L152.509 6.01375H155.299ZM145.639 8.62375L145.129 11.2337H137.749C137.089 11.2337 136.759 10.9937 136.759 10.5137C136.759 10.3337 136.809 10.1137 136.909 9.85375L138.349 6.07375H141.289L140.389 8.62375H145.639ZM149.329 7.06375L150.559 11.9237H147.769L146.599 7.06375H149.329ZM160.639 7.15375L158.809 11.9538H156.049L157.879 7.15375H160.639ZM144.319 19.9337L144.019 22.5437H140.539L139.969 27.1637V27.2537C139.969 27.5337 140.059 27.6737 140.239 27.6737L140.479 27.6138C141.679 27.1937 142.729 26.7737 143.629 26.3537L143.299 29.3237C141.879 29.9238 140.469 30.4038 139.069 30.7638C138.869 30.8238 138.669 30.8538 138.469 30.8538C137.969 30.8538 137.579 30.6638 137.299 30.2838C137.039 29.9238 136.949 29.4238 137.029 28.7837L137.779 22.5437H134.839L135.139 19.9337H138.109L138.499 16.7237H135.739L136.039 14.1437H144.499L144.199 16.7237H141.259L140.839 19.9337H144.319ZM157.159 15.6137H148.819L148.519 18.1337H156.859L157.159 15.6137ZM156.589 20.5937H148.219L147.919 23.2337H156.289L156.589 20.5937Z" fill="#6D4CFE"/>
-</svg>
diff --git a/src/assets/img/agent/icon-end.png b/src/assets/img/agent/icon-end.png
new file mode 100644
index 0000000..894073e
Binary files /dev/null and b/src/assets/img/agent/icon-end.png differ
diff --git a/src/assets/img/agent/icon-history.png b/src/assets/img/agent/icon-history.png
new file mode 100644
index 0000000..86f1078
Binary files /dev/null and b/src/assets/img/agent/icon-history.png differ
diff --git a/src/assets/img/agent/icon-loading.png b/src/assets/img/agent/icon-loading.png
new file mode 100644
index 0000000..ea35805
Binary files /dev/null and b/src/assets/img/agent/icon-loading.png differ
diff --git a/src/assets/img/agent/icon1.png b/src/assets/img/agent/icon1.png
new file mode 100644
index 0000000..979815e
Binary files /dev/null and b/src/assets/img/agent/icon1.png differ
diff --git a/src/assets/img/icon-app-bg.png b/src/assets/img/icon-app-bg.png
new file mode 100644
index 0000000..228d586
Binary files /dev/null and b/src/assets/img/icon-app-bg.png differ
diff --git a/src/assets/img/icon-app-header-bg.png b/src/assets/img/icon-app-header-bg.png
new file mode 100644
index 0000000..726f67d
Binary files /dev/null and b/src/assets/img/icon-app-header-bg.png differ
diff --git a/src/assets/img/icon-logo.png b/src/assets/img/icon-logo.png
new file mode 100644
index 0000000..b920639
Binary files /dev/null and b/src/assets/img/icon-logo.png differ
diff --git a/src/assets/svg/svg-accountManage-active.svg b/src/assets/svg/svg-accountManage-active.svg
new file mode 100644
index 0000000..d4f5e5b
--- /dev/null
+++ b/src/assets/svg/svg-accountManage-active.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+  <path d="M15.75 1.5C16.5784 1.5 17.25 2.17157 17.25 3V15C17.25 15.8284 16.5784 16.5 15.75 16.5H3.75C2.92157 16.5 2.25 15.8284 2.25 15V12.75H3.75C4.57843 12.75 5.25 12.0784 5.25 11.25C5.25 10.4216 4.57843 9.75 3.75 9.75H2.25V8.25H3.75C4.57843 8.25 5.25 7.57843 5.25 6.75C5.25 5.92157 4.57843 5.25 3.75 5.25H2.25V3C2.25 2.17157 2.92157 1.5 3.75 1.5H15.75Z" fill="#6D4CFE"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M10.1248 4.59375C11.7298 4.59375 13.031 5.89492 13.031 7.5C13.031 8.3054 12.7033 9.03394 12.1741 9.5603C13.4265 10.175 14.3629 11.3342 14.6724 12.7302C14.7518 13.0889 14.5249 13.4439 14.1663 13.5234C13.8076 13.6028 13.4526 13.3767 13.3731 13.0181C13.0428 11.5287 11.7128 10.4151 10.1248 10.415C8.53684 10.4152 7.20745 11.5288 6.87721 13.0181C6.79767 13.3768 6.44201 13.603 6.08326 13.5234C5.72474 13.4438 5.49846 13.0888 5.57789 12.7302C5.88742 11.3342 6.82321 10.1743 8.07545 9.55957C7.54658 9.03325 7.21852 8.30508 7.21852 7.5C7.21852 5.89501 8.51981 4.59389 10.1248 4.59375ZM10.1248 5.90625C9.24468 5.90639 8.53102 6.61988 8.53102 7.5C8.53102 8.33817 9.17843 9.02345 10.0003 9.08716C10.0416 9.08607 10.0831 9.08496 10.1248 9.08496C10.1664 9.08496 10.2079 9.08607 10.2493 9.08716C11.0713 9.02369 11.7185 8.33834 11.7185 7.5C11.7185 6.6198 11.005 5.90625 10.1248 5.90625Z" fill="white"/>
+  <path d="M3.75 10.5C4.16421 10.5 4.5 10.8358 4.5 11.25C4.5 11.6642 4.16421 12 3.75 12H1.5C1.08579 12 0.75 11.6642 0.75 11.25C0.75 10.8358 1.08579 10.5 1.5 10.5H3.75Z" fill="#39C6E9"/>
+  <path d="M3.75 6C4.16421 6 4.5 6.33579 4.5 6.75C4.5 7.16421 4.16421 7.5 3.75 7.5H1.5C1.08579 7.5 0.75 7.16421 0.75 6.75C0.75 6.33579 1.08579 6 1.5 6H3.75Z" fill="#39C6E9"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/svg/svg-accountManage.svg b/src/assets/svg/svg-accountManage.svg
new file mode 100644
index 0000000..dd1a936
--- /dev/null
+++ b/src/assets/svg/svg-accountManage.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M10.125 4.59375C11.7301 4.59375 13.0312 5.89492 13.0312 7.5C13.0312 8.30533 12.7035 9.03395 12.1743 9.5603C13.4266 10.175 14.3631 11.3343 14.6726 12.7302C14.752 13.0888 14.525 13.4438 14.1665 13.5234C13.8078 13.6028 13.4528 13.3767 13.3733 13.0181C13.0431 11.5288 11.7129 10.4152 10.125 10.415C8.53709 10.4152 7.2077 11.5289 6.87744 13.0181C6.79792 13.3767 6.44216 13.6028 6.0835 13.5234C5.72497 13.4438 5.4987 13.0888 5.57812 12.7302C5.88761 11.3345 6.82306 10.1751 8.07495 9.5603C7.54601 9.03398 7.21875 8.30515 7.21875 7.5C7.21875 5.89492 8.51992 4.59375 10.125 4.59375ZM10.125 5.90625C9.2448 5.90625 8.53125 6.6198 8.53125 7.5C8.53125 8.33825 9.17854 9.02357 10.0005 9.08716C10.0418 9.08608 10.0835 9.08496 10.125 9.08496C10.1664 9.08496 10.2076 9.08608 10.2488 9.08716C11.0711 9.02392 11.7188 8.3385 11.7188 7.5C11.7188 6.6198 11.0052 5.90625 10.125 5.90625Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M15.75 1.5C16.5784 1.5 17.25 2.17157 17.25 3V15C17.25 15.8284 16.5784 16.5 15.75 16.5H3.75C2.92157 16.5 2.25 15.8284 2.25 15V12H1.5C1.08579 12 0.75 11.6642 0.75 11.25C0.75 10.8358 1.08579 10.5 1.5 10.5H2.25V7.5H1.5C1.08579 7.5 0.75 7.16421 0.75 6.75C0.75 6.33579 1.08579 6 1.5 6H2.25V3C2.25 2.17157 2.92157 1.5 3.75 1.5H15.75ZM3.75 6H4.5C4.91421 6 5.25 6.33579 5.25 6.75C5.25 7.16421 4.91421 7.5 4.5 7.5H3.75V10.5H4.5C4.91421 10.5 5.25 10.8358 5.25 11.25C5.25 11.6642 4.91421 12 4.5 12H3.75V15H15.75V3H3.75V6Z" fill="currentColor"/>
+</svg>
diff --git a/src/assets/svg/svg-finishProductsWareHouse.svg b/src/assets/svg/svg-finishProductsWareHouse.svg
new file mode 100644
index 0000000..a137e0f
--- /dev/null
+++ b/src/assets/svg/svg-finishProductsWareHouse.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.01884 6.07878C7.23558 5.96285 7.49856 5.97564 7.70308 6.11198L9.70308 7.44532C9.88855 7.56896 9.99995 7.77711 9.99996 8C9.99996 8.2229 9.88855 8.43105 9.70308 8.55469L7.70308 9.88803C7.49856 10.0244 7.23558 10.0372 7.01884 9.92123C6.80207 9.80521 6.66663 9.5792 6.66663 9.33334V6.66667L6.67314 6.57553C6.70203 6.36603 6.8292 6.18027 7.01884 6.07878ZM7.99996 8.08724L8.13147 8L7.99996 7.91211V8.08724Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M12.3333 1.66667C12.7015 1.66667 13 1.96515 13 2.33334V3.00001H14.6666C15.0348 3.00001 15.3333 3.29848 15.3333 3.66667V12.3333C15.3333 12.7015 15.0348 13 14.6666 13H13V13.6667C13 14.0349 12.7015 14.3333 12.3333 14.3333H3.66663C3.29844 14.3333 2.99996 14.0349 2.99996 13.6667V13H1.33329C0.965103 13 0.666626 12.7015 0.666626 12.3333V3.66667C0.666626 3.29848 0.965103 3.00001 1.33329 3.00001H2.99996V2.33334C2.99996 1.96515 3.29844 1.66667 3.66663 1.66667H12.3333ZM4.33329 13H11.6666V3.00001H4.33329V13ZM1.99996 11.6667H2.99996V4.33334H1.99996V11.6667ZM13 11.6667H14V4.33334H13V11.6667Z" fill="currentColor"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/svg/svg-management-active.svg b/src/assets/svg/svg-management-active.svg
new file mode 100644
index 0000000..ceee542
--- /dev/null
+++ b/src/assets/svg/svg-management-active.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+  <path d="M7.19971 1.875C7.61392 1.875 7.94971 2.21079 7.94971 2.625V7.5C7.94971 7.91421 7.61392 8.25 7.19971 8.25H2.25C1.83579 8.25 1.5 7.91421 1.5 7.5V2.625C1.5 2.21079 1.83579 1.875 2.25 1.875H7.19971Z" fill="#6D4CFE"/>
+  <path d="M7.19971 9.75C7.61392 9.75 7.94971 10.0858 7.94971 10.5V15.375C7.94971 15.7892 7.61392 16.125 7.19971 16.125H2.25C1.83579 16.125 1.5 15.7892 1.5 15.375V10.5C1.5 10.0858 1.83579 9.75 2.25 9.75H7.19971Z" fill="#6D4CFE"/>
+  <path d="M15.0747 1.875C15.4889 1.875 15.8247 2.21079 15.8247 2.625V7.5C15.8247 7.91421 15.4889 8.25 15.0747 8.25H10.125C9.71079 8.25 9.375 7.91421 9.375 7.5V2.625C9.375 2.21079 9.71079 1.875 10.125 1.875H15.0747Z" fill="#6D4CFE"/>
+  <path d="M15.0747 9.75C15.4889 9.75 15.8247 10.0858 15.8247 10.5V15.375C15.8247 15.7892 15.4889 16.125 15.0747 16.125H10.125C9.71079 16.125 9.375 15.7892 9.375 15.375V10.5C9.375 10.0858 9.71079 9.75 10.125 9.75H15.0747Z" fill="#39C6E9"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/svg/svg-management.svg b/src/assets/svg/svg-management.svg
new file mode 100644
index 0000000..2616de8
--- /dev/null
+++ b/src/assets/svg/svg-management.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M2.625 1.875C2.21079 1.875 1.875 2.21079 1.875 2.625V7.5C1.875 7.91421 2.21079 8.25 2.625 8.25H7.5C7.91421 8.25 8.25 7.91421 8.25 7.5V2.625C8.25 2.21079 7.91421 1.875 7.5 1.875H2.625ZM3.375 6.75V3.375H6.75V6.75H3.375ZM10.5 1.875C10.0858 1.875 9.75 2.21079 9.75 2.625V7.5C9.75 7.91421 10.0858 8.25 10.5 8.25H15.375C15.7892 8.25 16.125 7.91421 16.125 7.5V2.625C16.125 2.21079 15.7892 1.875 15.375 1.875H10.5ZM11.25 6.75V3.375H14.625V6.75H11.25ZM1.875 10.5C1.875 10.0858 2.21079 9.75 2.625 9.75H7.5C7.91421 9.75 8.25 10.0858 8.25 10.5V15.375C8.25 15.7892 7.91421 16.125 7.5 16.125H2.625C2.21079 16.125 1.875 15.7892 1.875 15.375V10.5ZM3.375 11.25V14.625H6.75V11.25H3.375ZM10.5 9.75C10.0858 9.75 9.75 10.0858 9.75 10.5V15.375C9.75 15.7892 10.0858 16.125 10.5 16.125H15.375C15.7892 16.125 16.125 15.7892 16.125 15.375V10.5C16.125 10.0858 15.7892 9.75 15.375 9.75H10.5ZM11.25 14.625V11.25H14.625V14.625H11.25Z" fill="currentColor"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/svg/svg-managementAccount.svg b/src/assets/svg/svg-managementAccount.svg
new file mode 100644
index 0000000..cbe43b7
--- /dev/null
+++ b/src/assets/svg/svg-managementAccount.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M12.6666 8.66671C13.7712 8.66671 14.6666 9.56214 14.6666 10.6667V12.6667C14.6666 13.7713 13.7712 14.6667 12.6666 14.6667H3.33325C2.22868 14.6667 1.33325 13.7713 1.33325 12.6667V10.6667C1.33325 9.56214 2.22868 8.66671 3.33325 8.66671H12.6666ZM3.33325 10C2.96506 10 2.66659 10.2985 2.66659 10.6667V12.6667C2.66659 13.0349 2.96506 13.3334 3.33325 13.3334H12.6666C13.0348 13.3334 13.3333 13.0349 13.3333 12.6667V10.6667C13.3333 10.2985 13.0348 10 12.6666 10H3.33325Z" fill="currentColor"/>
+  <path d="M11.3333 3.66671C11.8855 3.66671 12.3333 4.11442 12.3333 4.66671C12.3333 5.21899 11.8855 5.66671 11.3333 5.66671C10.781 5.66671 10.3333 5.21899 10.3333 4.66671C10.3333 4.11442 10.781 3.66671 11.3333 3.66671Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M11.3333 1.33337C13.1742 1.33337 14.6666 2.82576 14.6666 4.66671C14.6666 6.50766 13.1742 8.00004 11.3333 8.00004C9.4923 8.00004 7.99992 6.50766 7.99992 4.66671C7.99992 2.82576 9.4923 1.33337 11.3333 1.33337ZM11.3333 2.66671C10.2287 2.66671 9.33325 3.56214 9.33325 4.66671C9.33325 5.77128 10.2287 6.66671 11.3333 6.66671C12.4378 6.66671 13.3333 5.77128 13.3333 4.66671C13.3333 3.56214 12.4378 2.66671 11.3333 2.66671Z" fill="currentColor"/>
+  <path d="M6.66659 1.66671C7.03478 1.66671 7.33325 1.96518 7.33325 2.33337C7.33325 2.70156 7.03478 3.00004 6.66659 3.00004H3.33325C2.96506 3.00004 2.66659 3.29852 2.66659 3.66671V5.66671C2.66659 6.03489 2.96507 6.33337 3.33325 6.33337H6.66659C7.03478 6.33337 7.33325 6.63185 7.33325 7.00004C7.33325 7.36823 7.03478 7.66671 6.66659 7.66671H3.33325C2.22868 7.66671 1.33325 6.77126 1.33325 5.66671V3.66671C1.33325 2.56214 2.22868 1.66671 3.33325 1.66671H6.66659Z" fill="currentColor"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/svg/svg-managementEnterprise.svg b/src/assets/svg/svg-managementEnterprise.svg
new file mode 100644
index 0000000..0cd10b0
--- /dev/null
+++ b/src/assets/svg/svg-managementEnterprise.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <g clip-path="url(#clip0_1822_2135)">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M6.69214 0.742281C6.91258 0.627508 7.17861 0.644734 7.38224 0.787203L10.7156 3.12054C10.8938 3.24529 11.0001 3.44924 11.0001 3.66676V7.657L13.0541 9.12444C13.2293 9.24959 13.3334 9.45149 13.3334 9.66676V14.0001H14.6667C15.0349 14.0001 15.3334 14.2986 15.3334 14.6668C15.3334 15.0349 15.0349 15.3334 14.6667 15.3334H1.33341C0.965261 15.3334 0.666807 15.0349 0.666748 14.6668C0.666748 14.2986 0.965225 14.0001 1.33341 14.0001H3.00008V6.66676C3.00008 6.44924 3.1064 6.24529 3.28459 6.12054L6.33341 3.98577V1.33343L6.33992 1.24163C6.36934 1.02986 6.49924 0.842793 6.69214 0.742281ZM4.33341 7.01377V14.0001H6.33341V5.61338L4.33341 7.01377ZM7.66675 14.0001H12.0001V10.0092L9.94604 8.54241C9.77088 8.4173 9.66679 8.21534 9.66675 8.00009V4.01377L7.66675 2.61338V14.0001Z" fill="currentColor"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_1822_2135">
+      <rect width="16" height="16" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>
\ No newline at end of file
diff --git a/src/assets/svg/svg-managementPerson.svg b/src/assets/svg/svg-managementPerson.svg
new file mode 100644
index 0000000..961dfd6
--- /dev/null
+++ b/src/assets/svg/svg-managementPerson.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M6.66675 2.66663C7.03494 2.66663 7.33341 2.9651 7.33341 3.33329C7.33341 3.70148 7.03494 3.99996 6.66675 3.99996H2.00008V12.6666H14.0001V11.8333C14.0001 11.4651 14.2986 11.1666 14.6667 11.1666C15.0349 11.1666 15.3334 11.4651 15.3334 11.8333V12.6666C15.3334 13.403 14.7365 14 14.0001 14H2.00008C1.26371 14 0.666748 13.403 0.666748 12.6666V3.99996C0.666748 3.26356 1.26371 2.66663 2.00008 2.66663H6.66675Z" fill="currentColor"/>
+  <path d="M11.3334 9.66663C11.7016 9.66663 12.0001 9.9651 12.0001 10.3333C12.0001 10.7015 11.7016 11 11.3334 11H3.33341C2.96522 11 2.66675 10.7015 2.66675 10.3333C2.66675 9.9651 2.96522 9.66663 3.33341 9.66663H11.3334Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M11.3334 2.66663C12.8062 2.66663 14.0001 3.86053 14.0001 5.33329C14.0001 6.04266 13.722 6.68629 13.2703 7.16402C14.107 7.60518 14.8215 8.31147 15.2605 9.16923C15.428 9.49687 15.2983 9.89858 14.9708 10.0664C14.6431 10.2341 14.2414 10.1043 14.0736 9.77665C13.526 8.70664 12.3939 8.0001 11.3334 7.99996C10.7314 7.99999 10.3219 8.08478 10.0027 8.2161C9.68314 8.34763 9.41097 8.54307 9.09839 8.82678C8.82582 9.07418 8.40446 9.05368 8.15698 8.78121C7.90953 8.50858 7.92994 8.08726 8.20255 7.8398C8.52921 7.54331 8.87871 7.27263 9.30802 7.06702C8.90854 6.60077 8.66675 5.99542 8.66675 5.33329C8.66675 3.86053 9.86065 2.66663 11.3334 2.66663ZM11.3334 3.99996C10.597 3.99996 10.0001 4.59691 10.0001 5.33329C10.0001 6.06967 10.597 6.66663 11.3334 6.66663C12.0698 6.66663 12.6667 6.06967 12.6667 5.33329C12.6667 4.59691 12.0698 3.99996 11.3334 3.99996Z" fill="currentColor"/>
+  <path d="M6.00008 6.99996C6.36827 6.99996 6.66675 7.29844 6.66675 7.66663C6.66675 8.03482 6.36827 8.33329 6.00008 8.33329H3.33341C2.96522 8.33329 2.66675 8.03482 2.66675 7.66663C2.66675 7.29844 2.96522 6.99996 3.33341 6.99996H6.00008Z" fill="currentColor"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/svg/svg-materialCenter-active.svg b/src/assets/svg/svg-materialCenter-active.svg
new file mode 100644
index 0000000..bb453bd
--- /dev/null
+++ b/src/assets/svg/svg-materialCenter-active.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+  <path d="M9.12668 3.48014C9.26917 3.65113 9.48026 3.75 9.70284 3.75H15.375C16.2034 3.75 16.875 4.42156 16.875 5.25V6.75H1.125V3C1.125 2.17157 1.79657 1.5 2.625 1.5H7.12528C7.34787 1.5 7.55895 1.59887 7.70145 1.76986L9.12668 3.48014Z" fill="#39C6E9"/>
+  <path d="M16.875 15C16.875 15.8284 16.2034 16.5 15.375 16.5H2.625C1.79658 16.5 1.125 15.8284 1.125 15V8.25H16.875V15Z" fill="#6D4CFE"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/svg/svg-materialCenter.svg b/src/assets/svg/svg-materialCenter.svg
new file mode 100644
index 0000000..fbfb039
--- /dev/null
+++ b/src/assets/svg/svg-materialCenter.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.20776 1.50439C7.39923 1.52564 7.57672 1.61993 7.70142 1.76953L9.35156 3.75H15.375C16.2034 3.75 16.875 4.42156 16.875 5.25V15C16.875 15.8284 16.2034 16.5 15.375 16.5H2.625C1.79658 16.5 1.125 15.8284 1.125 15V3C1.125 2.17157 1.79657 1.5 2.625 1.5H7.125L7.20776 1.50439ZM2.625 8.25V15H15.375V8.25H2.625ZM2.625 6.75H15.375V5.25H9C8.77745 5.25 8.56608 5.15142 8.42358 4.98047L6.77344 3H2.625V6.75Z" fill="currentColor"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/svg/svg-mediaAccountData.svg b/src/assets/svg/svg-mediaAccountData.svg
new file mode 100644
index 0000000..a786784
--- /dev/null
+++ b/src/assets/svg/svg-mediaAccountData.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M10.2279 4.16463C10.505 3.92241 10.9263 3.95078 11.1687 4.22778C11.4109 4.50487 11.3826 4.92615 11.1055 5.16854L5.77222 9.83521C5.49512 10.0774 5.07385 10.0491 4.83146 9.77205C4.58924 9.49496 4.6176 9.07368 4.89461 8.8313L10.2279 4.16463Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M11.0001 6.66659C11.9206 6.66659 12.6667 7.41278 12.6667 8.33325C12.6667 9.25373 11.9206 9.99992 11.0001 9.99992C10.0796 9.99992 9.33341 9.25373 9.33341 8.33325C9.33341 7.41278 10.0796 6.66659 11.0001 6.66659ZM11.0001 7.99992C10.816 7.99992 10.6667 8.14916 10.6667 8.33325C10.6667 8.51735 10.816 8.66659 11.0001 8.66659C11.1842 8.66659 11.3334 8.51735 11.3334 8.33325C11.3334 8.14916 11.1842 7.99992 11.0001 7.99992Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.00008 3.99992C5.92056 3.99992 6.66675 4.74611 6.66675 5.66659C6.66675 6.58706 5.92056 7.33325 5.00008 7.33325C4.07961 7.33325 3.33341 6.58706 3.33341 5.66659C3.33341 4.74611 4.07961 3.99992 5.00008 3.99992ZM5.00008 5.33325C4.81599 5.33325 4.66675 5.48249 4.66675 5.66659C4.66675 5.85068 4.81599 5.99992 5.00008 5.99992C5.18418 5.99992 5.33341 5.85068 5.33341 5.66659C5.33341 5.48249 5.18418 5.33325 5.00008 5.33325Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6667 1.33325C14.5872 1.33325 15.3334 2.07944 15.3334 2.99992V10.9999C15.3334 11.9204 14.5872 12.6666 13.6667 12.6666H8.66675V13.6666H12.6667C13.0349 13.6666 13.3334 13.9651 13.3334 14.3333C13.3334 14.7014 13.0349 14.9999 12.6667 14.9999H3.33341C2.96522 14.9999 2.66675 14.7014 2.66675 14.3333C2.66675 13.9651 2.96522 13.6666 3.33341 13.6666H7.33341V12.6666H2.33341C1.41294 12.6666 0.666748 11.9204 0.666748 10.9999V2.99992C0.666748 2.07944 1.41294 1.33325 2.33341 1.33325H13.6667ZM2.33341 2.66659C2.14932 2.66659 2.00008 2.81582 2.00008 2.99992V10.9999C2.00008 11.184 2.14932 11.3333 2.33341 11.3333H13.6667C13.8508 11.3333 14.0001 11.184 14.0001 10.9999V2.99992C14.0001 2.81582 13.8508 2.66659 13.6667 2.66659H2.33341Z" fill="currentColor"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/svg/svg-mediaAccountManage.svg b/src/assets/svg/svg-mediaAccountManage.svg
new file mode 100644
index 0000000..031f058
--- /dev/null
+++ b/src/assets/svg/svg-mediaAccountManage.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M7.99992 1.33325C8.36811 1.33325 8.66659 1.63173 8.66659 1.99992C8.66659 2.36811 8.36811 2.66659 7.99992 2.66659H2.99992C2.81583 2.66659 2.66659 2.81583 2.66659 2.99992V10.3333C2.66659 10.5174 2.81582 10.6666 2.99992 10.6666H12.9999C13.184 10.6666 13.3333 10.5174 13.3333 10.3333V8.66659C13.3333 8.2984 13.6317 7.99992 13.9999 7.99992C14.3681 7.99992 14.6666 8.2984 14.6666 8.66659V10.3333C14.6666 11.2537 13.9204 11.9999 12.9999 11.9999H8.66659V13.3333H11.3333C11.7014 13.3333 11.9999 13.6317 11.9999 13.9999C11.9999 14.3681 11.7014 14.6666 11.3333 14.6666H4.66659C4.2984 14.6666 3.99992 14.3681 3.99992 13.9999C3.99992 13.6317 4.2984 13.3333 4.66659 13.3333H7.33325V11.9999H2.99992C2.07945 11.9999 1.33325 11.2537 1.33325 10.3333V2.99992C1.33325 2.07945 2.07945 1.33325 2.99992 1.33325H7.99992Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M12.3333 1.33325C12.7014 1.33325 12.9999 1.63173 12.9999 1.99992V2.80591C13.1143 2.8559 13.221 2.91954 13.3202 2.99276L14.0208 2.58911C14.3395 2.40525 14.7468 2.51462 14.9309 2.83325C15.115 3.15207 15.0062 3.55993 14.6874 3.74406L13.9889 4.14705C13.9957 4.20821 13.9999 4.27028 13.9999 4.33325C13.9999 4.396 13.9956 4.45785 13.9889 4.5188L14.6874 4.92244C15.0062 5.10658 15.115 5.51443 14.9309 5.83325C14.7468 6.15192 14.3395 6.26127 14.0208 6.07739L13.3202 5.6731C13.2209 5.74636 13.1143 5.80991 12.9999 5.85994V6.66659C12.9999 7.03478 12.7014 7.33325 12.3333 7.33325C11.9651 7.33325 11.6666 7.03478 11.6666 6.66659V5.85994C11.552 5.80984 11.445 5.74649 11.3456 5.6731L10.6458 6.07739C10.3269 6.26138 9.91901 6.15207 9.73495 5.83325C9.55094 5.51443 9.66031 5.10654 9.97909 4.92244L10.677 4.5188C10.6703 4.45787 10.6666 4.39598 10.6666 4.33325C10.6666 4.27031 10.6702 4.20819 10.677 4.14705L9.97909 3.74406C9.66025 3.55997 9.55089 3.1521 9.73495 2.83325C9.91903 2.51442 10.3269 2.40507 10.6458 2.58911L11.3456 2.99276C11.445 2.91941 11.552 2.85598 11.6666 2.80591V1.99992C11.6666 1.63173 11.9651 1.33325 12.3333 1.33325ZM12.3333 3.99992C12.1492 3.99992 11.9999 4.14916 11.9999 4.33325C11.9999 4.51735 12.1492 4.66659 12.3333 4.66659C12.5173 4.66659 12.6666 4.51735 12.6666 4.33325C12.6666 4.14916 12.5173 3.99992 12.3333 3.99992Z" fill="currentColor"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/svg/svg-pushpin.svg b/src/assets/svg/svg-pushpin.svg
new file mode 100644
index 0000000..fa3ea76
--- /dev/null
+++ b/src/assets/svg/svg-pushpin.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+  <path d="M6.10963 5.99245L5.88754 6.00922L2.72457 6.2548L7.74479 11.275L7.99037 8.11205L8.00714 7.88996L10.5716 5.3255L8.67409 3.42799L6.10963 5.99245ZM9.17397 8.42741L8.8472 12.6525C8.80683 13.1737 8.17358 13.4078 7.80384 13.0383L4.80861 10.0431L1.9355 12.9162C1.85964 12.9921 1.7363 12.992 1.6604 12.9162L1.08404 12.3399C1.00814 12.264 1.00814 12.1407 1.08404 12.0648L3.95715 9.19165L0.961248 6.19575C0.592209 5.82604 0.826163 5.19293 1.34706 5.15239L5.57218 4.82562L7.82196 2.57585L6.9356 1.68949C6.86001 1.61358 6.86048 1.49086 6.93627 1.41506L7.51264 0.838698C7.58845 0.763107 7.71122 0.7625 7.78706 0.838028L13.1616 6.21253C13.2374 6.28835 13.2373 6.41172 13.1616 6.48763L12.5852 7.06399C12.5093 7.13989 12.386 7.13989 12.3101 7.06399L11.4237 6.17764L9.17397 8.42741Z" fill="currentColor"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/svg/svg-putAccountAccountDashboard.svg b/src/assets/svg/svg-putAccountAccountDashboard.svg
new file mode 100644
index 0000000..0b91051
--- /dev/null
+++ b/src/assets/svg/svg-putAccountAccountDashboard.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M4.37052 4C4.73864 4.00009 5.03719 4.29853 5.03719 4.66667C5.03719 5.0348 4.73864 5.33325 4.37052 5.33333H3.70386C3.33567 5.33333 3.03719 5.03486 3.03719 4.66667C3.03719 4.29848 3.33567 4 3.70386 4H4.37052Z" fill="currentColor"/>
+  <path d="M12.3705 4C12.7387 4 13.0372 4.29848 13.0372 4.66667C13.0372 5.03486 12.7387 5.33333 12.3705 5.33333H6.37052C6.00241 5.33325 5.70386 5.0348 5.70386 4.66667C5.70386 4.29853 6.00241 4.00009 6.37052 4H12.3705Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6667 2C14.5872 2 15.3334 2.7462 15.3334 3.66667V12.3333C15.3334 13.2538 14.5872 14 13.6667 14H4.00008C3.63189 14 3.33341 13.7015 3.33341 13.3333C3.33341 12.9651 3.63189 12.6667 4.00008 12.6667H13.6667C13.8509 12.6667 14.0001 12.5174 14.0001 12.3333V7.33333H2.00008V9C2.00008 9.36819 1.7016 9.66667 1.33341 9.66667C0.965225 9.66667 0.666748 9.36819 0.666748 9V3.66667C0.666748 2.74619 1.41294 2 2.33341 2H13.6667ZM2.33341 3.33333C2.14932 3.33333 2.00008 3.48257 2.00008 3.66667V6H14.0001V3.66667C14.0001 3.48257 13.8509 3.33333 13.6667 3.33333H2.33341Z" fill="currentColor"/>
+  <path d="M9.91545 8.12435C10.1752 7.93809 10.5357 7.96212 10.769 8.18945L12.2631 9.64518C12.5264 9.90214 12.5315 10.3243 12.2748 10.5879C12.0179 10.8514 11.5958 10.857 11.3321 10.6003L10.2787 9.57357L8.06128 11.5117C7.80135 11.7389 7.41092 11.7302 7.16154 11.4915L5.44214 9.8444L1.84513 13.4792C1.58619 13.7408 1.16412 13.7425 0.902425 13.4837C0.640767 13.2247 0.638261 12.8027 0.897217 12.541L4.95581 8.44076L5.00594 8.39518C5.26355 8.1827 5.64443 8.19254 5.89071 8.42839L7.64331 10.1061L9.86532 8.16471L9.91545 8.12435Z" fill="currentColor"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/svg/svg-putAccountData.svg b/src/assets/svg/svg-putAccountData.svg
new file mode 100644
index 0000000..c68b023
--- /dev/null
+++ b/src/assets/svg/svg-putAccountData.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M11.3333 5.33325C11.3749 5.33325 11.4155 5.33767 11.455 5.34497C11.4567 5.34529 11.4585 5.34529 11.4602 5.34562C11.4774 5.34894 11.4943 5.35337 11.511 5.35799C11.515 5.35911 11.5193 5.3594 11.5234 5.3606C11.5607 5.37169 11.5965 5.38642 11.6308 5.40356C11.636 5.40616 11.6413 5.40864 11.6464 5.41138C11.658 5.41757 11.6691 5.42471 11.6803 5.43156C11.687 5.43567 11.6938 5.43956 11.7004 5.44393C11.7137 5.45269 11.7263 5.46226 11.7389 5.47192C11.7613 5.48918 11.7834 5.50741 11.804 5.52791C11.8564 5.58023 11.8976 5.63957 11.929 5.70239C11.9449 5.73417 11.9592 5.76693 11.97 5.80135L11.9875 5.87166C11.9892 5.88025 11.9895 5.88907 11.9908 5.89771C11.996 5.93109 11.9999 5.96509 11.9999 5.99992V8.66659C11.9999 9.03478 11.7014 9.33325 11.3333 9.33325C10.9651 9.33325 10.6666 9.03478 10.6666 8.66659V7.6132L8.30005 9.98885C8.17529 10.114 8.00606 10.1845 7.82935 10.1848C7.65249 10.1851 7.48255 10.1151 7.35734 9.99015L6.36515 9.00122L4.95109 10.4159C4.69074 10.6762 4.26872 10.6763 4.00838 10.4159C3.74821 10.1556 3.74812 9.73352 4.00838 9.47323L5.8938 7.58781L5.94458 7.54224C6.20618 7.32876 6.59231 7.34361 6.83651 7.58716L7.82674 8.57479L9.72778 6.66659H8.66659C8.2984 6.66659 7.99992 6.36811 7.99992 5.99992C7.99992 5.63173 8.2984 5.33325 8.66659 5.33325H11.3333Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M12.9999 1.33325C13.9204 1.33325 14.6666 2.07945 14.6666 2.99992V12.9999C14.6666 13.9204 13.9204 14.6666 12.9999 14.6666H2.99992C2.07945 14.6666 1.33325 13.9204 1.33325 12.9999V2.99992C1.33325 2.07945 2.07945 1.33325 2.99992 1.33325H12.9999ZM2.99992 2.66659C2.81583 2.66659 2.66659 2.81583 2.66659 2.99992V12.9999C2.66659 13.184 2.81582 13.3333 2.99992 13.3333H12.9999C13.184 13.3333 13.3333 13.184 13.3333 12.9999V2.99992C13.3333 2.81582 13.184 2.66659 12.9999 2.66659H2.99992Z" fill="currentColor"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/svg/svg-putAccountInvestmentGuidelines.svg b/src/assets/svg/svg-putAccountInvestmentGuidelines.svg
new file mode 100644
index 0000000..da548ab
--- /dev/null
+++ b/src/assets/svg/svg-putAccountInvestmentGuidelines.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M8.00011 0.666748C8.36828 0.666775 8.66678 0.965242 8.66678 1.33341V2.00008H12.6668L12.7325 2.00334C12.8852 2.01847 13.0287 2.08598 13.1381 2.19539L14.4715 3.52873C14.7318 3.78907 14.7318 4.21109 14.4715 4.47144L13.1381 5.80477C13.0131 5.92978 12.8436 6.00007 12.6668 6.00008H8.66678V7.00008H12.6668C13.0349 7.00011 13.3334 7.29858 13.3334 7.66675V10.3334C13.3334 10.7016 13.0349 11 12.6668 11.0001H8.66678V14.0001H9.66678C10.0349 14.0001 10.3334 14.2986 10.3334 14.6667C10.3334 15.0349 10.0349 15.3334 9.66678 15.3334H6.33345C5.96526 15.3334 5.66678 15.0349 5.66678 14.6667C5.66678 14.2986 5.96526 14.0001 6.33345 14.0001H7.33345V11.0001H3.33345C3.15665 11.0001 2.98711 10.9298 2.86209 10.8048L1.52876 9.47143C1.26841 9.21109 1.26841 8.78908 1.52876 8.52873L2.86209 7.19539L2.91092 7.15112C3.02955 7.05392 3.17873 7.00008 3.33345 7.00008H7.33345V6.00008H3.33345C2.96526 6.00008 2.66678 5.7016 2.66678 5.33341V2.66675C2.66678 2.29856 2.96526 2.00008 3.33345 2.00008H7.33345V1.33341C7.33345 0.965225 7.63192 0.666748 8.00011 0.666748ZM2.94282 9.00008L3.60949 9.66675H12.0001V8.33341H3.60949L2.94282 9.00008ZM4.00011 4.66675H12.3907L13.0574 4.00008L12.3907 3.33341H4.00011V4.66675Z" fill="currentColor"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/svg/svg-putAccountManage.svg b/src/assets/svg/svg-putAccountManage.svg
new file mode 100644
index 0000000..9bff0b3
--- /dev/null
+++ b/src/assets/svg/svg-putAccountManage.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M11.1667 8.00008C11.4428 8.00008 11.6667 8.22394 11.6667 8.50008C11.6667 8.77622 11.4428 9.00008 11.1667 9.00008C10.8905 9.00008 10.6667 8.77622 10.6667 8.50008C10.6667 8.22394 10.8905 8.00008 11.1667 8.00008Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M9 1.66675C9.36913 1.66675 9.94634 1.78371 10.4447 2.19409C10.846 2.52467 11.1507 3.00935 11.2734 3.66675H13.6667C14.403 3.66675 15 4.2637 15 5.00008V12.3334C15 13.0698 14.403 13.6667 13.6667 13.6667H2.33333C1.59695 13.6667 1 13.0698 1 12.3334V5.00008C1 4.37823 1.42607 3.85717 2.00195 3.70972C2.01269 3.36141 2.12207 2.88367 2.43424 2.46948C2.78795 2.00022 3.36198 1.66675 4.16667 1.66675H9ZM2.33333 12.3334H13.6667V11.0001H8.33333C7.96514 11.0001 7.66667 10.7016 7.66667 10.3334V6.66675C7.66667 6.29856 7.96514 6.00008 8.33333 6.00008H13.6667V5.00008H2.33333V12.3334ZM9 9.66675H13.6667V7.33342H9V9.66675ZM4.16667 3.00008C3.77137 3.00008 3.59565 3.14446 3.49935 3.27222C3.40692 3.39484 3.35929 3.54618 3.3418 3.66675H9.89648C9.81547 3.4438 9.70073 3.30816 9.59701 3.22274C9.38703 3.0499 9.13084 3.00008 9 3.00008H4.16667Z" fill="currentColor"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/svg/svg-rawMaterialStorage.svg b/src/assets/svg/svg-rawMaterialStorage.svg
new file mode 100644
index 0000000..f3cce8a
--- /dev/null
+++ b/src/assets/svg/svg-rawMaterialStorage.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M13.3334 1.33334C14.0698 1.33334 14.6667 1.9303 14.6667 2.66668V13.3333C14.6667 14.0697 14.0698 14.6667 13.3334 14.6667H2.66671C1.93033 14.6667 1.33337 14.0697 1.33337 13.3333V2.66668C1.33337 1.9303 1.93033 1.33334 2.66671 1.33334H13.3334ZM2.66671 12V13.3333H4.00004V12H2.66671ZM5.33337 13.3333H10.6667V8.66668H5.33337V13.3333ZM12 13.3333H13.3334V12H12V13.3333ZM2.66671 10.6667H4.00004V8.66668H2.66671V10.6667ZM12 10.6667H13.3334V8.66668H12V10.6667ZM2.66671 7.33334H4.00004V5.33334H2.66671V7.33334ZM5.33337 7.33334H10.6667V2.66668H5.33337V7.33334ZM12 7.33334H13.3334V5.33334H12V7.33334ZM2.66671 4.00001H4.00004V2.66668H2.66671V4.00001ZM12 4.00001H13.3334V2.66668H12V4.00001Z" fill="currentColor"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/svg/svg-taskManage-active.svg b/src/assets/svg/svg-taskManage-active.svg
new file mode 100644
index 0000000..cf53876
--- /dev/null
+++ b/src/assets/svg/svg-taskManage-active.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M15.375 2.25C16.2034 2.25 16.875 2.92158 16.875 3.75V15.375C16.875 16.2034 16.2034 16.875 15.375 16.875H2.625C1.79658 16.875 1.125 16.2034 1.125 15.375V3.75C1.125 2.92157 1.79657 2.25 2.625 2.25H15.375ZM2.625 6.375H15.375V3.75H2.625V6.375Z" fill="#6D4CFE"/>
+  <path d="M12.2197 8.84467C12.5126 8.55178 12.9873 8.55178 13.2802 8.84467C13.5731 9.13756 13.5731 9.61232 13.2802 9.90522L8.78022 14.4052C8.48732 14.6981 8.01256 14.6981 7.71967 14.4052L5.46967 12.1552C5.17678 11.8623 5.17678 11.3876 5.46967 11.0947C5.76256 10.8018 6.23732 10.8018 6.53022 11.0947L8.24994 12.8144L12.2197 8.84467Z" fill="white"/>
+  <path d="M6 1.125C6.41421 1.125 6.75 1.46079 6.75 1.875V4.875C6.75 5.28921 6.41421 5.625 6 5.625C5.58579 5.625 5.25 5.28921 5.25 4.875V1.875C5.25 1.46079 5.58579 1.125 6 1.125Z" fill="#39C6E9"/>
+  <path d="M12 1.125C12.4142 1.125 12.75 1.46079 12.75 1.875V4.875C12.75 5.28921 12.4142 5.625 12 5.625C11.5858 5.625 11.25 5.28921 11.25 4.875V1.875C11.25 1.46079 11.5858 1.125 12 1.125Z" fill="#39C6E9"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/svg/svg-taskManage.svg b/src/assets/svg/svg-taskManage.svg
new file mode 100644
index 0000000..bd26a7e
--- /dev/null
+++ b/src/assets/svg/svg-taskManage.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+  <path d="M12.2197 8.84473C12.5126 8.55186 12.9874 8.55185 13.2803 8.84473C13.5732 9.13761 13.5731 9.61238 13.2803 9.90527L8.78027 14.4053C8.48738 14.6982 8.01262 14.6982 7.71973 14.4053L5.46973 12.1553C5.17685 11.8624 5.17684 11.3876 5.46973 11.0947C5.76262 10.8019 6.23739 10.8019 6.53027 11.0947L8.25 12.8145L12.2197 8.84473Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M12 1.125C12.4142 1.125 12.75 1.46079 12.75 1.875V2.25H15.375C16.2034 2.25 16.875 2.92158 16.875 3.75V15.375C16.875 16.2034 16.2034 16.875 15.375 16.875H2.625C1.79658 16.875 1.125 16.2034 1.125 15.375V3.75C1.125 2.92157 1.79657 2.25 2.625 2.25H5.25V1.875C5.25 1.46079 5.58579 1.125 6 1.125C6.41421 1.125 6.75 1.46079 6.75 1.875V2.25H11.25V1.875C11.25 1.46079 11.5858 1.125 12 1.125ZM2.625 15.375H15.375V7.875H2.625V15.375ZM2.625 6.375H15.375V3.75H12.75V4.875C12.75 5.28921 12.4142 5.625 12 5.625C11.5858 5.625 11.25 5.28921 11.25 4.875V3.75H6.75V4.875C6.75 5.28921 6.41421 5.625 6 5.625C5.58579 5.625 5.25 5.28921 5.25 4.875V3.75H2.625V6.375Z" fill="currentColor"/>
+</svg>
\ No newline at end of file
diff --git a/src/components/_base/breadcrumb/index.vue b/src/components/_base/breadcrumb/index.vue
deleted file mode 100644
index b5539c7..0000000
--- a/src/components/_base/breadcrumb/index.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<!--
- * @Author: 田鑫
- * @Date: 2023-03-05 18:14:16
- * @LastEditors: 田鑫
- * @LastEditTime: 2023-03-05 19:17:52
- * @Description: 
--->
-<script lang="ts" setup>
-import type { RouteLocationNormalized } from 'vue-router';
-
-const router = useRouter();
-const route = useRoute();
-
-const matched = computed(() => {
-  if (route.matched.length === 1 && route.matched[0].path === '/') {
-    return [];
-  } else {
-    return route.matched.reduce((t: RouteLocationNormalized[], o) => {
-      const isExist = t.find((c) => c.name === o.name);
-      return isExist ? t : [...t, router.resolve(o)];
-    }, []);
-  }
-});
-</script>
-
-<template>
-  <view></view>
-  <!-- <a-breadcrumb class="container-breadcrumb">
-    <a-breadcrumb-item v-for="{ meta, name } in matched" :key="name">
-      <router-link v-slot="{ href, navigate }" :to="{ name }" custom>
-        <a-link v-if="meta.needNavigate" :href="href" @click="navigate">{{
-          meta.locale ? meta.locale : '主页'
-        }}</a-link>
-        <a-link v-else disabled>{{ meta.locale ? meta.locale : '主页' }}</a-link>
-      </router-link>
-    </a-breadcrumb-item>
-  </a-breadcrumb> -->
-</template>
-
-<style scoped lang="scss">
-.container-breadcrumb {
-  margin: 16px 0;
-  :deep(.arco-breadcrumb-item) {
-    > a {
-      color: rgb(var(--gray-6));
-    }
-    &:last-child {
-      color: rgb(var(--gray-8));
-    }
-  }
-}
-</style>
diff --git a/src/components/_base/index.ts b/src/components/_base/index.ts
index 69530d5..72e9e7e 100644
--- a/src/components/_base/index.ts
+++ b/src/components/_base/index.ts
@@ -1,5 +1,2 @@
-export { default as Navbar } from './navbar/index.vue';
-export { default as Menu } from './menu/index.vue';
 export { default as TabBar } from './tab-bar/index.vue';
-export { default as Breadcrumb } from './breadcrumb/index.vue';
 export { default as ModalSimple } from './modal/index.vue';
diff --git a/src/components/_base/menu/index.vue b/src/components/_base/menu/index.vue
deleted file mode 100644
index e78ad55..0000000
--- a/src/components/_base/menu/index.vue
+++ /dev/null
@@ -1,204 +0,0 @@
-<script lang="tsx">
-import type { RouteMeta, RouteRecordRaw } from 'vue-router';
-
-import { useAppStore } from '@/stores';
-import { useSidebarStore } from '@/stores/modules/side-bar';
-import { listenerRouteChange } from '@/utils/route-listener';
-import { openWindow, regexUrl } from '@/utils';
-import useMenuTree from './use-menu-tree';
-
-export default defineComponent({
-  emit: ['collapse'],
-  setup() {
-    const appStore = useAppStore();
-    const router = useRouter();
-    const route = useRoute();
-    const { menuTree } = useMenuTree();
-    const collapsed = computed({
-      get() {
-        if (appStore.device === 'desktop') return appStore.menuCollapse;
-        return false;
-      },
-      set(value: boolean) {
-        appStore.updateSettings({ menuCollapse: value });
-      },
-    });
-    const topMenu = computed(() => appStore.topMenu);
-    const openKeys = ref<string[]>([]);
-    const selectedKey = ref<string[]>([]);
-    const sidebarStore = useSidebarStore();
-    const onMenuItemClick = (item: RouteRecordRaw) => {
-      if (regexUrl.test(item.path)) {
-        openWindow(item.path);
-        selectedKey.value = [item.name as string];
-        return;
-      }
-      // Eliminate external link side effects
-      const { hideInMenu, activeMenu } = item.meta as RouteMeta;
-      if (route.name === item.name && !hideInMenu && !activeMenu) {
-        selectedKey.value = [item.name as string];
-        return;
-      }
-      // Trigger router change
-      router.push({
-        name: item.name,
-      });
-    };
-    const findMenuOpenKeys = (target: string) => {
-      const result: string[] = [];
-      let isFind = false;
-      const backtrack = (item: RouteRecordRaw, keys: string[]) => {
-        if (item.name === target) {
-          isFind = true;
-          result.push(...keys);
-          return;
-        }
-        if (item.children?.length) {
-          item.children.forEach((el) => {
-            backtrack(el, [...keys, el.name as string]);
-          });
-        }
-      };
-      menuTree.value.forEach((el: RouteRecordRaw) => {
-        if (isFind) return; // Performance optimization
-        backtrack(el, [el.name as string]);
-      });
-      return result;
-    };
-    listenerRouteChange((newRoute) => {
-      const { requiresAuth, activeMenu, hideInMenu } = newRoute.meta;
-      // if (requiresAuth && (!hideInMenu || activeMenu)) {
-      if (!hideInMenu || activeMenu) {
-        const menuOpenKeys = findMenuOpenKeys((activeMenu || newRoute.name) as string);
-        const keySet = new Set([...menuOpenKeys, ...openKeys.value]);
-        openKeys.value = [...keySet];
-        selectedKey.value = [activeMenu || menuOpenKeys[menuOpenKeys.length - 1]];
-
-        // 自动设置 activeMenuId
-        sidebarStore.setActiveMenuIdByRoute(newRoute);
-      }
-    }, true);
-    const setCollapse = (val: boolean) => {
-      if (appStore.device === 'desktop') appStore.updateSettings({ menuCollapse: val });
-    };
-    const renderSubMenu = () => {
-      function travel(_route: RouteRecordRaw[] = [], nodes: any[] = []) {
-        if (!Array.isArray(_route)) return nodes;
-        _route.forEach((element) => {
-          // 跳过没有 name 的菜单项，防止 key 报错
-          if (!element?.name) return;
-
-          const icon = element?.meta?.icon
-            ? (() => {
-                if (typeof element.meta.icon === 'string') {
-                  return (
-                    <svg class="w-16px h-16px">
-                      <use xlinkHref={element.meta.icon} />
-                    </svg>
-                  );
-                } else {
-                  return h(element.meta.icon as object);
-                }
-              })()
-            : null;
-
-          if (element.children && element.children.length > 0) {
-            nodes.push(
-              <a-sub-menu
-                key={String(element.name)}
-                v-slots={{
-                  icon,
-                  title: () => element?.meta?.locale || '',
-                }}
-              >
-                {travel(element.children)}
-              </a-sub-menu>,
-            );
-          } else {
-            nodes.push(
-              <a-menu-item key={String(element.name)} v-slots={{ icon }} onClick={() => onMenuItemClick(element)}>
-                {element?.meta?.locale || ''}
-              </a-menu-item>,
-            );
-          }
-        });
-        return nodes;
-      }
-      return travel(menuTree.value ?? []);
-    };
-    return () => (
-      <a-menu
-        mode={topMenu.value ? 'horizontal' : 'vertical'}
-        v-model:collapsed={collapsed.value}
-        v-model:open-keys={openKeys.value}
-        show-collapse-button={appStore.device !== 'mobile'}
-        auto-open={false}
-        selected-keys={selectedKey.value}
-        auto-open-selected={true}
-        level-indent={24}
-        style="height: 100%;width:100%;"
-        onCollapse={setCollapse}
-      >
-        {renderSubMenu()}
-      </a-menu>
-    );
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-:deep(.arco-menu-inner) {
-  padding: 20px 24px 0 12px !important;
-  .arco-menu-inline-header {
-    display: flex;
-    align-items: center;
-    height: 40px;
-    margin-bottom: 12px;
-    border-radius: 8px;
-    .arco-menu-icon {
-      margin-right: 8px;
-    }
-    .arco-menu-title {
-      color: var(--Text-2, #3c4043);
-      font-family: $font-family-medium;
-      font-size: 16px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: 22px; /* 137.5% */
-    }
-    &:hover {
-      background: var(--BG-200, #f2f3f5) !important;
-    }
-    &.arco-menu-selected {
-      .arco-menu-title {
-        color: var(--Brand-Brand-6, #6d4cfe) !important;
-      }
-    }
-  }
-  .arco-icon {
-    &:not(.arco-icon-down) {
-      font-size: 18px;
-    }
-  }
-  .arco-menu-item {
-    border-radius: 8px;
-    .arco-menu-item-inner {
-      color: var(--Text-3, #737478);
-      font-family: $font-family-regular;
-      font-size: 16px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: 22px; /* 137.5% */
-    }
-    &:hover {
-      background: var(--BG-200, #f2f3f5) !important;
-    }
-    &.arco-menu-selected {
-      background: var(--Brand-Brand-1, #f0edff) !important;
-      .arco-menu-item-inner {
-        color: var(--Brand-Brand-6, #6d4cfe) !important;
-      }
-    }
-  }
-}
-</style>
diff --git a/src/components/_base/menu/use-menu-tree.ts b/src/components/_base/menu/use-menu-tree.ts
deleted file mode 100644
index 9b18626..0000000
--- a/src/components/_base/menu/use-menu-tree.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-/*
- * @Author: RenXiaoDong
- * @Date: 2025-06-19 01:45:53
- */
-import type { RouteRecordRaw, RouteRecordNormalized } from 'vue-router';
-import { useRouter } from 'vue-router';
-import { useSidebarStore } from '@/stores/modules/side-bar';
-
-export default function useMenuTree() {
-  const router  = useRouter();
-  const appRoutes = router.options?.routes ?? [];
-
-  const sidebarStore = useSidebarStore();
-  const appRoute = computed(() => {
-    const _filterRoutes = appRoutes.filter((v) => v.meta?.id === sidebarStore.activeMenuId);
-    return _filterRoutes;
-  });
-  const menuTree = computed(() => {
-    const copyRouter = cloneDeep(appRoute.value) as RouteRecordNormalized[];
-    copyRouter.sort((a: RouteRecordNormalized, b: RouteRecordNormalized) => {
-      return (a.meta.order || 0) - (b.meta.order || 0);
-    });
-    function travel(_routes: RouteRecordRaw[], layer: number) {
-      if (!_routes) return null;
-
-      const collector: any = _routes.map((element) => {
-        // leaf node
-        if (element.meta?.hideChildrenInMenu || !element.children) {
-          element.children = [];
-          return element;
-        }
-
-        // route filter hideInMenu true
-        element.children = element.children.filter((x) => x.meta?.hideInMenu !== true);
-
-        // Associated child node
-        const subItem = travel(element.children, layer + 1);
-
-        if (subItem.length) {
-          element.children = subItem;
-          return element;
-        }
-        // the else logic
-        if (layer > 1) {
-          element.children = subItem;
-          return element;
-        }
-
-        if (element.meta?.hideInMenu === false) {
-          return element;
-        }
-
-        return null;
-      });
-      return collector.filter(Boolean);
-    }
-    return travel(copyRouter, 0);
-  });
-
-  return {
-    menuTree,
-  };
-}
diff --git a/src/components/_base/navbar/components/navbar-menu/index.vue b/src/components/_base/navbar/components/navbar-menu/index.vue
deleted file mode 100644
index d5be9d6..0000000
--- a/src/components/_base/navbar/components/navbar-menu/index.vue
+++ /dev/null
@@ -1,95 +0,0 @@
-<template>
-  <div class="navbar-menu h-100%">
-    <a-menu mode="horizontal" :selected-keys="selectedKey">
-      <a-menu-item v-for="item in menuList" :key="String(item.id)">
-        <template v-if="item.children">
-          <a-dropdown :popup-max-height="false" class="layout-menu-item-dropdown">
-            <a-button type="text">
-              <span class="menu-item-text mr-2px"> {{ item.name }}</span>
-              <icon-caret-down size="16" class="arco-icon-down !mr-0" />
-            </a-button>
-            <template #content>
-              <a-doption
-                v-for="(child, ind) in item.children"
-                :key="ind"
-                @click="handleDropdownClick(child)"
-                :class="{ active: child.includeRouteNames.includes(route.name) }"
-              >
-                <span class="menu-item-text"> {{ child.name }}</span>
-              </a-doption>
-            </template>
-          </a-dropdown>
-        </template>
-        <template v-else>
-          <a-menu-item :key="String(item.id)" @click="handleDropdownClick(item)">
-            <span class="menu-item-text"> {{ item.name }}</span>
-          </a-menu-item>
-        </template>
-      </a-menu-item>
-    </a-menu>
-  </div>
-</template>
-
-<script setup>
-import { useRoute } from 'vue-router';
-import { useSidebarStore } from '@/stores/modules/side-bar';
-// import router from '@/router';
-import { useRouter } from 'vue-router';
-
-const sidebarStore = useSidebarStore();
-const router = useRouter();
-const route = useRoute();
-
-const selectedKey = computed(() => {
-  return [String(sidebarStore.activeMenuId)];
-});
-const menuList = computed(() => {
-  return sidebarStore.menuList;
-});
-
-const handleDropdownClick = (item) => {
-  router.push({ name: item.routeName });
-};
-</script>
-
-<style scoped lang="scss">
-@import './style.scss';
-</style>
-<style lang="scss">
-.layout-menu-item-dropdown {
-  .arco-dropdown {
-    border-radius: 8px;
-    border: 1px solid var(--BG-300, #e6e6e8);
-    background: var(--BG-white, #fff);
-    padding: 12px 0px;
-    .arco-dropdown-option {
-      padding: 0 12px;
-      margin-bottom: 4px;
-      &-content {
-        display: flex;
-        height: 40px;
-        width: 100%;
-        padding: 10px 0;
-        align-items: center;
-        .menu-item-text {
-          color: var(--Text-2, #3c4043);
-          font-family: $font-family-regular;
-          font-size: 16px;
-          font-style: normal;
-          font-weight: 400;
-          line-height: 22px; /* 137.5% */
-        }
-      }
-      &:not(.arco-dropdown-option-disabled):hover {
-        background: var(--BG-200, #f2f3f5);
-      }
-      &.active {
-        background: var(--Brand-Brand-1, #f0edff) !important;
-        .menu-item-text {
-          color: var(--Brand-Brand-6, #6d4cfe) !important;
-        }
-      }
-    }
-  }
-}
-</style>
diff --git a/src/components/_base/navbar/components/navbar-menu/style.scss b/src/components/_base/navbar/components/navbar-menu/style.scss
deleted file mode 100644
index 5a15e33..0000000
--- a/src/components/_base/navbar/components/navbar-menu/style.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-.navbar-menu {
-  display: flex;
-  align-items: center;
-  margin-left: 40px;
-  .menu-item-text {
-    color: var(--Text-2, #3c4043);
-    font-family: $font-family-medium;
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 22px;
-  }
-  :deep(.arco-menu) {
-    height: 100%;
-    .arco-menu-inner {
-      padding: 0 20px;
-    }
-    .arco-menu-item {
-      padding: 0;
-      position: relative;
-      &.arco-menu-selected {
-        .menu-item-text,
-        .arco-menu-selected-label {
-          color: #6d4cfe;
-        }
-        .arco-menu-selected-label {
-          background: var(--Brand-Brand-6, #6d4cfe);
-          height: 4px;
-          border-radius: 4px;
-          width: 50%;
-          position: absolute;
-          bottom: -8px;
-          left: 50%;
-          transform: translateX(-50%);
-        }
-      }
-    }
-  }
-  .arco-icon-down {
-    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  }
-  .arco-dropdown-open .arco-icon-down {
-    transform: rotate(180deg);
-  }
-}
diff --git a/src/components/_base/navbar/index.vue b/src/components/_base/navbar/index.vue
deleted file mode 100644
index 2e241ea..0000000
--- a/src/components/_base/navbar/index.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-  <div class="navbar-wrap">
-    <div class="left-wrap">
-      <div class="h-full flex items-center cursor-pointer" @click="handleUserHome">
-        <img src="@/assets/LOGO.svg" alt="" />
-      </div>
-    </div>
-    <div class="flex-1">
-      <NavbarMenu v-if="!isAgentRoute"/>
-    </div>
-    <RightSide :isAgentRoute="isAgentRoute" v-if="userStore.isLogin"/>
-  </div>
-</template>
-
-<script setup>
-import NavbarMenu from './components/navbar-menu';
-import RightSide from './components/right-side';
-
-import { useUserStore } from '@/stores';
-import { handleUserHome } from '@/utils/user.ts';
-import router from '@/router';
-
-const route = useRoute();
-const userStore = useUserStore();
-
-const isAgentRoute = computed(() => {
-  return route.meta?.isAgentRoute;
-});
-</script>
-<style scoped lang="scss">
-.navbar-wrap {
-  display: flex;
-  justify-content: space-between;
-  height: 100%;
-  background-color: var(--color-bg-2);
-  border-bottom: 1px solid var(--color-border);
-  .left-wrap {
-    display: flex;
-    align-items: center;
-    padding-left: 24px;
-  }
-  .arco-dropdown-option-suffix {
-    display: none;
-  }
-  .enterprises-doption {
-    .arco-dropdown-option-content {
-      padding: 0 !important;
-      border-radius: 8px;
-    }
-    &:not(.arco-dropdown-option-disabled):hover {
-      background-color: transparent;
-      .arco-dropdown-option-content {
-        background: var(--BG-200, #f2f3f5);
-      }
-    }
-  }
-}
-</style>
diff --git a/src/components/common-select/index.vue b/src/components/common-select/index.vue
index fbcc4c9..80dc179 100644
--- a/src/components/common-select/index.vue
+++ b/src/components/common-select/index.vue
@@ -9,6 +9,7 @@
     size="medium"
     :placeholder="placeholder"
     :allow-clear="allClear"
+    :allow-search="allowSearch"
     :max-tag-count="maxTagCount"
     @change="handleChange"
   >
@@ -45,6 +46,10 @@ const props = defineProps({
   allClear: {
     type: Boolean,
     default: true,
+  },
+  allowSearch: {
+    type: Boolean,
+    default: false,
   }
 });
 
diff --git a/src/components/container.vue b/src/components/container.vue
index b99a435..2b7d8b7 100644
--- a/src/components/container.vue
+++ b/src/components/container.vue
@@ -17,7 +17,7 @@ const props = defineProps<{
 </script>
 <style scoped lang="scss">
 .container {
-  border: 1px solid var(--BG-300, rgba(230, 230, 232, 1));
+  // border: 1px solid var(--BG-300, rgba(230, 230, 232, 1));
   background: var(--BG-white, rgba(255, 255, 255, 1));
   padding: 16px 24px 20px 24px;
   border-radius: 8px;
diff --git a/src/components/expandable-tags/index.vue b/src/components/expandable-tags/index.vue
new file mode 100644
index 0000000..446c32c
--- /dev/null
+++ b/src/components/expandable-tags/index.vue
@@ -0,0 +1,205 @@
+<script lang="tsx">
+import { ref, defineComponent, onMounted, nextTick, watch, h } from 'vue';
+
+export interface ExpandableTagsProps {
+  // 标签数据数组
+  tags: string[];
+  // 最大显示行数
+  maxLine: number;
+  // 是否可点击标签
+  clickable: boolean;
+}
+
+export interface ExpandableTagsEmits {
+  (e: 'tagClick', tag: string, index: number): void;
+  (e: 'expandChange', isExpand: boolean): void;
+}
+
+export default defineComponent({
+  name: 'ExpandableTags',
+  props: {
+    tags: {
+      type: Array as () => string[],
+      default: () => [],
+    },
+    maxLine: {
+      type: Number,
+      default: 2,
+    },
+    clickable: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['tagClick', 'expandChange'],
+  setup(props: ExpandableTagsProps, { emit, expose }) {
+    const isExpand = ref(false);
+    const showExpandBtn = ref(false);
+    const displayedTags = ref(props.tags);
+    const hideLength = ref(0);
+
+    // 初始化计算标签显示状态
+    const init = async () => {
+      await nextTick();
+
+      const listCon = document.querySelector('.expandable-tags-container .tag-list') as HTMLElement;
+      if (!listCon) return;
+
+      displayedTags.value = props.tags;
+
+      await nextTick();
+
+      const labels = listCon.querySelectorAll('.tag-item:not(.expand-btn)');
+      if (labels.length === 0) return;
+
+      // 计算单行高度
+      const lineHeight = labels[0].getBoundingClientRect().height;
+
+      // 设置容器最大高度
+      const containerHeight = lineHeight * props.maxLine;
+      listCon.style.maxHeight = `${containerHeight}px`;
+      listCon.style.overflow = 'hidden';
+
+      await nextTick();
+
+      // 检查是否有标签超出容器高度
+      let labelIndex = 0;
+      const listConBottom = listCon.getBoundingClientRect().bottom;
+
+      for (let i = 0; i < labels.length; i++) {
+        const _top = labels[i].getBoundingClientRect().top;
+        if (_top >= listConBottom) {
+          // 标签顶部超过容器底部，说明超出
+          showExpandBtn.value = true;
+          labelIndex = i;
+          break;
+        }
+      }
+
+      // 重置容器样式
+      listCon.style.maxHeight = '';
+      listCon.style.overflow = '';
+
+      if (!showExpandBtn.value) {
+        return;
+      }
+
+      // 重新计算可显示的标签数量（考虑展开按钮占用的空间）
+      await nextTick();
+
+      const listConRect = listCon.getBoundingClientRect();
+      const expandBtn = listCon.querySelector('.expand-btn');
+      const expandBtnWidth = expandBtn?.getBoundingClientRect()?.width || 0;
+
+      // 获取实际的column-gap值
+      const computedStyle = window.getComputedStyle(listCon);
+      const columnGap = parseInt(computedStyle.getPropertyValue('column-gap')) || 8;
+
+      // 从超出的位置向前查找，找到能容纳展开按钮的位置
+      for (let i = labelIndex - 1; i >= 0; i--) {
+        const labelRight = labels[i].getBoundingClientRect().right - listConRect.left;
+        // 使用columnGap代替marginRight
+        if (labelRight + columnGap + expandBtnWidth <= listConRect.width) {
+          hideLength.value = i + 1;
+          displayedTags.value = props.tags.slice(0, hideLength.value);
+          break;
+        }
+      }
+    };
+
+    // 切换展开/折叠状态
+    const toggleExpand = () => {
+      isExpand.value = !isExpand.value;
+
+      if (isExpand.value) {
+        displayedTags.value = props.tags;
+      } else {
+        displayedTags.value = props.tags.slice(0, hideLength.value);
+      }
+
+      emit('expandChange', isExpand.value);
+    };
+
+    const handleTagClick = (tag: string, index: number) => {
+      if (props.clickable) {
+        emit('tagClick', tag, index);
+      }
+    };
+
+    const handleResize = () => {
+      if (!isExpand.value) {
+        showExpandBtn.value = false;
+        nextTick(() => {
+          init();
+        });
+      }
+    };
+
+    watch(
+      () => props.tags,
+      () => {
+        isExpand.value = false;
+        showExpandBtn.value = false;
+        nextTick(() => {
+          init();
+        });
+      },
+      { deep: true },
+    );
+
+    watch(
+      () => props.maxLine,
+      () => {
+        isExpand.value = false;
+        showExpandBtn.value = false;
+        nextTick(() => {
+          init();
+        });
+      },
+    );
+
+    onMounted(() => {
+      nextTick(() => {
+        init();
+      });
+
+      window.addEventListener('resize', handleResize);
+    });
+    onUnmounted(() => {
+      window.removeEventListener('resize', handleResize);
+    });
+
+    return () => (
+      <div class="expandable-tags-container">
+        <div class={`tag-list ${isExpand.value ? 'expand' : ''}`}>
+          {displayedTags.value.map((tag, index) => (
+            <div
+              key={index}
+              class={`flex items-center h-24px tag-item ${props.clickable ? 'clickable' : ''}`}
+              onClick={() => handleTagClick(tag, index)}
+            >
+              <span class="cts color-#6D4CFE tag-text">{tag}</span>
+            </div>
+          ))}
+          {showExpandBtn.value && (
+            <div
+              class="expand-btn flex items-center h-24px cursor-pointer"
+              onClick={(e: Event) => {
+                e.stopPropagation();
+                toggleExpand();
+              }}
+            >
+              <span class="cts mr-2px color-#6D4CFE expand-text">{isExpand.value ? '收起' : '更多'}</span>
+              <icon-down size={12} class="color-#6D4CFE icon" />
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  },
+});
+</script>
+
+<style scoped lang="scss">
+@import './style.scss';
+</style>
diff --git a/src/components/expandable-tags/style.scss b/src/components/expandable-tags/style.scss
new file mode 100644
index 0000000..c5b8e1d
--- /dev/null
+++ b/src/components/expandable-tags/style.scss
@@ -0,0 +1,40 @@
+.expandable-tags-container {
+  width: 100%;
+  // overflow: hidden;
+  .cts {
+    font-family: $font-family-regular;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+  }
+  .tag-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    transition: all 0.3s;
+    .tag-item {
+      padding: 0 8px;
+      background-color: #f6f4ff;
+      border-radius: 4px;
+      transition: all 0.3s;
+      &.clickable {
+        cursor: pointer;
+        &:hover {
+          box-shadow: 0 4px 8px 0 rgba(109, 76, 254, 0.1);
+        }
+      }
+    }
+    .expand-btn {
+      transition: all 0.3s;
+    }
+    &.expand {
+      max-height: none !important;
+      .expand-btn {
+        .icon {
+          transform: rotate(180deg);
+          transition: all 0.3s;
+        }
+      }
+    }
+  }
+}
diff --git a/src/components/text-over-tips/index.vue b/src/components/text-over-tips/index.vue
index 57c8d43..efbe7c1 100644
--- a/src/components/text-over-tips/index.vue
+++ b/src/components/text-over-tips/index.vue
@@ -1,9 +1,21 @@
 <template>
-  <a-tooltip :disabled="isShowBtn || (!isShowBtn && disabled)" :placement="props.placement">
-    <template #content>
+  <Tooltip
+    :open="open"
+    :placement="props.placement"
+  >
+    <template #title>
       <div :style="contentStyle" class="tip-content">{{ props.context }}</div>
     </template>
-    <div v-bind="$attrs" ref="Text" :class="`${isShow ? '' : `line-${props.line}`} `" class="overflow-text">
+    <div
+      v-bind="$attrs"
+      ref="Text"
+      :class="`${isShow ? '' : `line-${props.line}`} `"
+      class="overflow-text"
+      @mouseenter="handleMouseEnter"
+      @mouseleave="
+        handleMouseLeave
+      "
+    >
       {{ props.context }}
     </div>
     <div
@@ -18,11 +30,23 @@
       {{ isShow ? '收起' : '展开' }}
       <icon-up size="16" :class="{ active: isShow }" class="ml-2px color-#8C8C8C" />
     </div>
-  </a-tooltip>
+  </Tooltip>
 </template>
 
 <script setup>
-import { ref, reactive, toRefs, onBeforeMount, onMounted, watchEffect, computed, watch, nextTick, defineProps } from 'vue';
+import { Tooltip } from 'ant-design-vue';
+import {
+  ref,
+  reactive,
+  toRefs,
+  onBeforeMount,
+  onMounted,
+  watchEffect,
+  computed,
+  watch,
+  nextTick,
+  defineProps,
+} from 'vue';
 import elementResizeDetectorMaker from 'element-resize-detector';
 
 const props = defineProps({
@@ -32,12 +56,17 @@ const props = defineProps({
   },
   placement: {
     type: String,
-    default: 'bottom',
+    default: 'top',
   },
   line: {
     type: Number,
     default: 1,
   },
+  // 显示延迟时间，毫秒级
+  mouseEnterDelay: {
+    type: Number,
+    default: 100,
+  },
   maxHeight: {
     type: [String, Number],
     default: '',
@@ -51,10 +80,17 @@ const props = defineProps({
     default: false,
   },
 });
+
 const data = reactive({});
 const isShow = ref(false);
+const open = ref(false);
+const disabled = ref(false);
+const Text = ref(null);
+const textWidth = ref();
+const timer = ref(null);
+
 const contentStyle = computed(() => {
-  let style = {
+  const style = {
     'max-height': props.maxHeight + 'px',
     'max-width': props.maxWidth + 'px',
     overflow: 'auto',
@@ -62,9 +98,10 @@ const contentStyle = computed(() => {
   };
   return props.maxHeight || props.maxWidth ? style : {};
 });
-const disabled = ref(true);
-const Text = ref(null);
-const textWidth = ref();
+const notShowTooltip = computed(() => {
+  return props.isShowBtn || (!props.isShowBtn && disabled.value);
+});
+
 watch(
   [() => props.context, textWidth],
   async () => {
@@ -92,7 +129,24 @@ watch(
     immediate: true,
   },
 );
-onBeforeMount(() => {});
+
+const clearTimer = () => {
+  if (timer.value) {
+    clearTimeout(timer.value);
+  }
+};
+const handleMouseEnter = () => {
+  clearTimer();
+  timer.value = setTimeout(() => {
+    open.value = !notShowTooltip.value;
+  }, props.mouseEnterDelay);
+};
+
+const handleMouseLeave = () => {
+  clearTimer();
+  open.value = false;
+};
+
 onMounted(async () => {
   await nextTick();
   const erd = elementResizeDetectorMaker();
@@ -103,7 +157,10 @@ onMounted(async () => {
     });
   }
 });
-watchEffect(() => {});
+onUnmounted(() => {
+  clearTimer();
+});
+
 defineExpose({
   ...toRefs(data),
 });
diff --git a/src/components/xt-chat/chat-view/components/right-view/index.vue b/src/components/xt-chat/chat-view/components/right-view/index.vue
new file mode 100644
index 0000000..ca682d1
--- /dev/null
+++ b/src/components/xt-chat/chat-view/components/right-view/index.vue
@@ -0,0 +1,220 @@
+<script lang="tsx">
+import { Button } from '@arco-design/web-vue';
+import { Bubble } from '@/components/xt-chat/xt-bubble';
+
+import Http from '@/api';
+import { downloadByUrl } from '@/utils/tools';
+import markdownit from 'markdown-it';
+import { message } from 'ant-design-vue';
+import { FILE_TYPE } from '@/components/xt-chat/chat-view/constants';
+
+export default {
+  emits: ['close'],
+  props: {
+    dataSource: {
+      type: Array,
+      default: () => [],
+    },
+    previewData: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  setup(props: { dataSource: any[]; previewData: any }, { emit, expose }) {
+    const bubbleRef = ref(null);
+
+    const md = markdownit({
+      html: true,
+      breaks: true,
+      linkify: true,
+      typographer: true,
+    });
+
+    const tasks = computed(() => {
+      return props.previewData.payload?.tasks ?? [];
+    });
+
+    const isTaskManage = computed(() => {
+      return props.previewData.task_type === '任务管理';
+    });
+    const hasMediaCenter = computed(() => {
+      return props.dataSource.some((v) => v.task_type === '素材中心');
+    });
+
+    const onDownload = () => {
+      //   downloadByUrl('');
+      message.success('下载成功！');
+    };
+    const onAddMediaCenter = () => {
+      const _data = props.dataSource.find((v) => v.task_type === '素材中心');
+      const {
+        api: { endpoint, method },
+        payload,
+      } = _data;
+      Http[method.toLowerCase()]?.(endpoint, payload).then((res) => {
+        const { code } = res;
+        if (code === 200) {
+          message.success('成功添加至“素材中心”模块。');
+        }
+      });
+    };
+    const onAddTaskManage = () => {
+      const _data = props.dataSource.find((v) => v.task_type === '任务管理');
+      const {
+        api: { endpoint, method },
+        payload,
+      } = _data;
+      Http[method.toLowerCase()]?.(endpoint, payload).then((res) => {
+        const { code } = res;
+        if (code === 200) {
+          message.success('成功添加至“任务管理”模块。');
+        }
+      });
+    };
+    const abortTyping = () => {
+      bubbleRef.value?.abortTyping?.();
+    };
+    const renderHeader = () => {
+      return (
+        <header class="header flex justify-end items-center mb-16px px-32px">
+          {hasMediaCenter.value && (
+            <Button
+              type="outline"
+              size="medium"
+              class="mr-16px"
+              v-slots={{ icon: () => <icon-plus size="14" /> }}
+              onClick={onAddMediaCenter}
+            >
+              素材中心
+            </Button>
+          )}
+
+          <Button
+            type="outline"
+            size="medium"
+            class="mr-16px"
+            v-slots={{ icon: () => <icon-plus size="14" /> }}
+            onClick={onAddTaskManage}
+          >
+            任务管理
+          </Button>
+          {/*<Button
+            type="outline"
+            size="medium"
+            class="mr-16px"
+            v-slots={{ icon: () => <icon-download size="14" /> }}
+            onClick={onDownload}
+          >
+            下载
+          </Button>*/}
+          <div class="line mr-24px w-1px h-16px bg-#B1B2B5"></div>
+          <icon-close size={20} class="color-#737478 cursor-pointer" onClick={() => emit('close')} />
+        </header>
+      );
+    };
+    const renderTaskManage = () => {
+      const { file_type } = props.previewData;
+      return tasks.value.map((item) => {
+        const { params, execution_time, name } = item;
+        if (file_type === FILE_TYPE.topic_only) {
+          return (
+            <div class="mb-20px">
+              <p>{params?.media_account ?? '-'}</p>
+              <p>{`- ${execution_time}：${name}`}</p>
+            </div>
+          );
+        } else if (file_type === FILE_TYPE.topic_with_content) {
+          return (
+            <div class="mb-20px">
+              <p>{`${params.media_account}（${params.platform}）`}</p>
+              <p>{`日期：${execution_time}`}</p>
+              <p>{`选题：${params.topic}`}</p>
+              <p>{`标题：${name}`}</p>
+              <p>{`正文：${params.content}`}</p>
+            </div>
+          );
+        }
+        return null;
+      });
+    };
+    // const renderMediaCenter = () => {
+    //   return tasks.value.map((item) => {
+    //     const { params, execution_time, name, content } = item;
+    //     const { file_type } = dataSource.value;
+    //     if (file_type === FILE_TYPE.content_only) {
+    //       return (
+    //         <div class="mb-20px">
+    //           <p>{params?.media_account ?? '-'}</p>
+    //           <p>📅 {`${execution_time}`}</p>
+    //           <p class="mb-10">📝 {`${name}`}</p>
+    //           <p>正文：</p>
+    //           <p>📝 {`${content}`}</p>
+    //         </div>
+    //       );
+    //     } else if (file_type === FILE_TYPE.topic_with_content) {
+    //       return (
+    //         <div class="mb-20px">
+    //           <p>{`${params.media_account}（${params.platform}）`}</p>
+    //           <p>{`日期：${execution_time}`}</p>
+    //           <p>{`选题：${params.topic}`}</p>
+    //           <p>{`标题${name}`}</p>
+    //           <p>{`正文：${params.content}`}</p>
+    //         </div>
+    //       );
+    //     }
+    //   });
+    // };
+    const renderContainer = () => {
+      const renderMessage = () => {
+        if (isTaskManage.value) {
+          return renderTaskManage();
+        }
+        // if (isMediaCenter.value) {
+        //   return renderMediaCenter();
+        // }
+        return null;
+      };
+      return (
+        <section class="flex-1 overflow-y-auto content flex justify-center px-32px">
+          <Bubble
+            ref={bubbleRef}
+            placement="start"
+            variant="borderless"
+            style={{ width: '100%' }}
+            typing={{ step: 2, interval: 100 }}
+            onTypingComplete={() => {
+              console.log('onTypingComplete');
+            }}
+            messageRender={() => {
+              return renderMessage();
+            }}
+          />
+        </section>
+      );
+    };
+
+    expose({
+      abortTyping,
+    });
+    return () => (
+      <div class="right-view-wrap flex-1 flex flex-col overflow-hidden py-20px">
+        {renderHeader()}
+        {renderContainer()}
+      </div>
+    );
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.right-view-wrap {
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
+  @media (max-width: 900px) {
+    .header,
+    .content {
+      padding-left: 16px !important;
+      padding-right: 16px !important;
+    }
+  }
+}
+</style>
diff --git a/src/components/xt-chat/chat-view/components/sender-input/index.vue b/src/components/xt-chat/chat-view/components/sender-input/index.vue
new file mode 100644
index 0000000..e587a43
--- /dev/null
+++ b/src/components/xt-chat/chat-view/components/sender-input/index.vue
@@ -0,0 +1,112 @@
+<script lang="tsx">
+import { ref } from 'vue';
+import { Sender } from 'ant-design-x-vue';
+import { Tooltip } from 'ant-design-vue';
+
+interface SenderInputProps {
+  modelValue?: string;
+  loading?: boolean;
+  placeholder?: string;
+}
+
+export default {
+  name: 'SenderInput',
+  props: {
+    modelValue: {
+      type: String,
+      default: '',
+    },
+    placeholder: {
+      type: String,
+      default: '随时告诉我你想做什么，比如查数据、发任务、写内容，我会立刻帮你完成。',
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['update:modelValue', 'submit', 'cancel'],
+  setup(props: SenderInputProps, { emit, expose }) {
+    const senderRef = ref(null);
+    const localSearchValue = ref(props.modelValue);
+
+    const isEmptyValue = computed(() => !localSearchValue.value.trim());
+
+    watch(
+      () => props.modelValue,
+      (newValue) => {
+        localSearchValue.value = newValue || '';
+      },
+    );
+
+    const handleSubmit = () => {
+      if (isEmptyValue.value) {
+        return;
+      }
+
+      emit('submit', localSearchValue.value);
+      // localSearchValue.value = ''
+    };
+    const handleCancel = () => {
+      emit('cancel');
+    };
+
+    const focus = () => {
+      senderRef.value?.focus?.();
+    };
+
+    const renderActions = () => {
+      if (props.loading) {
+        return (
+          <Tooltip title="停止生成" onClick={handleCancel}>
+            <div class="w-32px h-32px p-6px flex justify-center items-center rounded-50% bg-#6D4CFE cursor-pointer">
+              <div class="w-12px h-12px rounded-2px bg-#FFF"></div>
+            </div>
+          </Tooltip>
+        );
+      }
+
+      return (
+        <div
+          onClick={handleSubmit}
+          class={`submit-btn  w-32px h-32px p-6px flex justify-center items-center rounded-50% cursor-pointer ${
+            isEmptyValue.value ? 'opacity-50' : ''
+          }`}
+        >
+          <icon-arrow-right size={20} class="color-#FFFFFF" />
+        </div>
+      );
+    };
+
+    expose({
+      focus,
+      searchValue: computed(() => localSearchValue.value),
+    });
+
+    return () => (
+      <div class="sender-input-wrap full h-120px">
+        <Sender
+          v-model:value={localSearchValue.value}
+          ref={senderRef}
+          onChange={(value: string) => emit('update:modelValue', value.trim())}
+          onSubmit={handleSubmit}
+          class="h-full w-full mb-24px"
+          placeholder={props.placeholder}
+          actions={() => renderActions()}
+        />
+      </div>
+    );
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.sender-input-wrap {
+  :deep(.ant-sender) {
+    .submit-btn {
+      background: linear-gradient(125deg, #6d4cfe 32.25%, #3ba1f0 72.31%),
+        linear-gradient(113deg, #6d4cfe 0%, #b93bf0 100%);
+    }
+  }
+}
+</style>
diff --git a/src/components/xt-chat/chat-view/constants.ts b/src/components/xt-chat/chat-view/constants.ts
new file mode 100644
index 0000000..de31db9
--- /dev/null
+++ b/src/components/xt-chat/chat-view/constants.ts
@@ -0,0 +1,58 @@
+import type { Ref } from 'vue';
+import type { BubbleListProps } from '@/components/xt-chat/xt-bubble/types';
+
+export interface UseChatHandlerReturn {
+  roles?: BubbleListProps['roles'];
+  generateTeamRunTaskId?: Ref<string | null>;
+  handleMessage?: (parsedData: { event: string; data: MESSAGE.Answer }) => void;
+  handleOpen?: (data: Response) => void;
+  generateLoading?: Ref<boolean>;
+  conversationList?: Ref<any[]>;
+  showRightView?: Ref<boolean>;
+  rightViewDataSource?: Ref<any>;
+  rightPreviewData?: Ref<any>;
+  senderRef?: Ref<null>
+}
+export enum EnumTeamRunStatus {
+  TeamRunStarted = 'TeamRunStarted', // 对话开始
+  TeamRunResponseContent = 'TeamRunResponseContent', // 对话执行中
+  TeamRunCompleted = 'TeamRunCompleted', // 对话完成
+  RunStarted = 'RunStarted', // l2开始运行
+  RunResponseContent = 'RunResponseContent', // l2执行中
+  RunCompleted = 'RunCompleted', // l2完成
+}
+export interface UseChatHandlerOptions {
+  initSse: (inputInfo: CHAT.TInputInfo) => Promise<void>; // 明确 initSse 带参
+}
+
+// 定义角色常量
+export const LOADING_ROLE = 'loading'; // 加载中
+export const INTELLECTUAL_THINKING_ROLE = 'intellectual_thinking'; // 智能思考标题
+export const QUESTION_ROLE = 'question'; // 问题
+export const ANSWER_ROLE = 'answer'; // 回答
+export const REMOTE_USER_ROLE = 'user'; // 接口返回用户
+export const REMOTE_ASSISTANT_ROLE = 'assistant'; // 接口返回智能体
+
+export const ROLE_STYLE = {
+  width: '600px',
+  margin: '0 auto',
+};
+
+export const ANSWER_STYLE = {
+  ...ROLE_STYLE,
+  paddingLeft: '14px',
+  borderLeft: '1px solid #E6E6E8',
+  position: 'relative',
+  left: '6px',
+};
+
+export const FILE_TYPE = {
+  topic_only: 'topic_only', // 排期&选题
+  topic_with_content: 'topic_with_content', // 选题&内容稿件
+  content_only: 'content_only', //  内容稿件
+}
+export const FILE_TYPE_MAP = {
+  [FILE_TYPE.topic_only]: '排期&选题',
+  [FILE_TYPE.topic_with_content]: '选题&内容稿件',
+  [FILE_TYPE.content_only]: '内容稿件',
+}
\ No newline at end of file
diff --git a/src/components/xt-chat/chat-view/index.vue b/src/components/xt-chat/chat-view/index.vue
new file mode 100644
index 0000000..440f4a8
--- /dev/null
+++ b/src/components/xt-chat/chat-view/index.vue
@@ -0,0 +1,196 @@
+<script lang="tsx">
+import { message as antdMessage } from 'ant-design-vue';
+import { BubbleList } from '@/components/xt-chat/xt-bubble';
+import SenderInput from './components/sender-input/index.vue';
+import RightView from './components/right-view/index.vue';
+
+import { useChatStore } from '@/stores/modules/chat';
+import { getConversationList } from '@/api/all/chat';
+import querySSE from '@/utils/querySSE';
+import useChatHandler from './useChatHandler';
+import { QUESTION_ROLE, LOADING_ROLE } from './constants';
+
+export default {
+  props: {
+    inputInfo: {
+      type: Object as () => CHAT.TInputInfo,
+      default: null,
+    },
+    conversationId: {
+      type: String,
+      default: '',
+    },
+  },
+  setup(props, { emit, expose }) {
+    const chatStore = useChatStore();
+
+    // const route = useRoute();
+
+    const rightViewRef = ref(null);
+    const bubbleListRef = ref<any>(null);
+    const sseController = ref<any>(null);
+    const searchValue = ref<string>('');
+
+    const handleSubmit = (message: string) => {
+      if (generateLoading.value) {
+        antdMessage.warning('停止生成后可发送');
+        return;
+      }
+
+      searchValue.value = '';
+
+      conversationList.value.push({
+        role: QUESTION_ROLE,
+        content: message,
+      });
+
+      initSse({ message });
+    };
+
+    const clearSseController = () => {
+      if (sseController.value) {
+        sseController.value.abort?.();
+        sseController.value = null;
+      }
+    };
+
+    const handleCancel = () => {
+      if (generateLoading.value) {
+        bubbleListRef.value?.abortTypingByKey(generateTeamRunTaskId.value);
+        sseController.value?.abort?.();
+      }
+      if (showRightView.value) {
+        rightViewRef.value?.abortTyping?.();
+      }
+
+      generateLoading.value = false;
+      antdMessage.info('取消生成');
+    };
+
+    const initSse = async (inputInfo: CHAT.TInputInfo): Promise<void> => {
+      clearSseController();
+
+      try {
+        const { message } = inputInfo;
+
+        generateLoading.value = true;
+
+        sseController.value = await querySSE({
+          method: 'POST',
+          handleMessage,
+          body: JSON.stringify({
+            content: message,
+            session_id: props.conversationId,
+            agent_id: chatStore.agentInfo.agent_id,
+          }),
+        });
+      } catch (error) {
+        console.error('Failed to initialize SSE:', error);
+        antdMessage.error('初始化连接失败');
+        generateLoading.value = false;
+      }
+    };
+
+    const getConversationInfo = async () => {
+      const { data, code } = await getConversationList({
+        session_id: props.conversationId,
+        agent_id: chatStore.agentInfo.agent_id,
+      });
+      if (code === 200) {
+        const remoteData = (data.list?.flat(1) ?? []).map((v: any) => ({
+          ...v,
+          teamRunTaskId: v.step_run_id,
+        }));
+        conversationList.value = [...conversationList.value, ...remoteData];
+      }
+    };
+
+    const {
+      roles,
+      showRightView,
+      rightViewDataSource,
+      rightPreviewData,
+      generateTeamRunTaskId,
+      handleMessage,
+      conversationList,
+      generateLoading,
+      senderRef,
+    } = useChatHandler({
+      initSse,
+    });
+
+    watch(
+      () => props.inputInfo,
+      async (newVal) => {
+        if (newVal) {
+          const { message } = newVal;
+          conversationList.value.push({
+            role: QUESTION_ROLE,
+            content: message,
+          });
+
+          initSse(newVal);
+        }
+      },
+      { deep: true },
+    );
+    watch(
+      () => props.conversationId,
+      (newVal) => {
+        if (newVal) {
+          getConversationInfo();
+        }
+      },
+      { immediate: true },
+    );
+
+    onUnmounted(() => {
+      clearSseController();
+    });
+
+    return () => (
+      <div class="chat-view-wrap w-full h-full flex">
+        <section class="flex-1 flex flex-col pt-20px justify-center relative pl-16px pr-2px">
+          <div class="flex-1 overflow-hidden pb-20px">
+            <BubbleList
+              ref={bubbleListRef}
+              roles={roles}
+              items={[
+                ...conversationList.value,
+                generateLoading.value ? { loading: true, role: LOADING_ROLE } : null,
+              ].filter(Boolean)}
+            />
+          </div>
+          <div class="w-full flex flex-col justify-center items-center">
+            <SenderInput
+              v-model={searchValue.value}
+              ref={senderRef}
+              class="w-600px"
+              placeholder="继续追问..."
+              loading={generateLoading.value}
+              onSubmit={handleSubmit}
+              onCancel={handleCancel}
+            />
+            <p class="cts !color-#939499 !text-12px !lh-20px my-4px">内容由AI生成，仅供参考</p>
+          </div>
+        </section>
+
+        {/* 右侧展示区域 */}
+        {showRightView.value && (
+          <RightView
+            ref={rightViewRef}
+            dataSource={rightViewDataSource.value}
+            previewData={rightPreviewData.value}
+            showRightView={showRightView.value}
+            onClose={() => (showRightView.value = false)}
+          />
+        )}
+      </div>
+    );
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import './style.scss';
+</style>
diff --git a/src/components/xt-chat/chat-view/style.scss b/src/components/xt-chat/chat-view/style.scss
new file mode 100644
index 0000000..8f33429
--- /dev/null
+++ b/src/components/xt-chat/chat-view/style.scss
@@ -0,0 +1,20 @@
+.chat-view-wrap {
+  .cts {
+    color: var(--Text-1, #737478);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+  }
+  :deep(.xt-bubble) {
+    .file-card {
+      border-radius: 12px;
+      border: 1px solid var(--Border-2, #e6e6e8);
+      background: linear-gradient(90deg, #f6f4ff 0%, #fff 100%);
+      padding: 13px 16px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+}
diff --git a/src/components/xt-chat/chat-view/useChatHandler.tsx b/src/components/xt-chat/chat-view/useChatHandler.tsx
new file mode 100644
index 0000000..4dca3cb
--- /dev/null
+++ b/src/components/xt-chat/chat-view/useChatHandler.tsx
@@ -0,0 +1,423 @@
+import { ref } from 'vue';
+
+import type { BubbleListProps } from '@/components/xt-chat/xt-bubble/types';
+import markdownit from 'markdown-it';
+import { message as antdMessage } from 'ant-design-vue';
+import {
+  IconFile,
+  IconCaretUp,
+  IconDownload,
+  IconCaretDown,
+  IconRefresh,
+  IconCopy,
+} from '@arco-design/web-vue/es/icon';
+
+import { Tooltip } from 'ant-design-vue';
+import TextOverTips from '@/components/text-over-tips/index.vue';
+import { genRandomId, exactFormatTime } from '@/utils/tools';
+
+import icon1 from '@/assets/img/agent/icon-end.png';
+import icon2 from '@/assets/img/agent/icon-loading.png';
+
+import { useClipboard } from '@vueuse/core';
+import {
+  QUESTION_ROLE,
+  ANSWER_ROLE,
+  INTELLECTUAL_THINKING_ROLE,
+  LOADING_ROLE,
+  ROLE_STYLE,
+  EnumTeamRunStatus,
+  REMOTE_USER_ROLE,
+  REMOTE_ASSISTANT_ROLE,
+  FILE_TYPE_MAP,
+} from './constants';
+import type { UseChatHandlerReturn, UseChatHandlerOptions } from './constants';
+
+/**
+ * 聊天处理器Hook
+ * @returns 包含角色配置、消息处理函数和对话列表的对象
+ */
+export default function useChatHandler(options: UseChatHandlerOptions): UseChatHandlerReturn {
+  const { initSse } = options;
+  // 在内部定义对话列表
+  const { copy } = useClipboard();
+
+  const senderRef = ref(null);
+  const conversationList = ref<MESSAGE.Answer[]>([]);
+  const generateLoading = ref<boolean>(false);
+  const generateTeamRunTaskId = ref<string | null>(null);
+
+  const showRightView = ref(false);
+  const rightViewDataSource = ref<any>([]);
+  const rightPreviewData = ref<any>([]);
+
+  // 初始化markdown
+  const md = markdownit({
+    html: true,
+    breaks: true,
+    linkify: true,
+    typographer: true,
+  });
+
+  // 定义角色配置
+  const roles: BubbleListProps['roles'] = {
+    [LOADING_ROLE]: {
+      placement: 'start',
+      variant: 'borderless',
+      style: { ...ROLE_STYLE, paddingLeft: '20px' },
+    },
+    [INTELLECTUAL_THINKING_ROLE]: {
+      placement: 'start',
+      variant: 'borderless',
+      typing: { step: 2, interval: 100 },
+      style: ROLE_STYLE,
+    },
+    [ANSWER_ROLE]: {
+      placement: 'start',
+      variant: 'borderless',
+      typing: { step: 2, interval: 100 },
+      // onTypingComplete: () => {
+      //   generateTeamRunTaskId.value = null;
+      // },
+      style: ROLE_STYLE,
+    },
+    [QUESTION_ROLE]: {
+      placement: 'end',
+      shape: 'round',
+      style: ROLE_STYLE,
+      messageRender: (message: string) => {
+        return <div class="max-w-400px">
+          {message}
+        </div>;
+      },
+    },
+    [REMOTE_USER_ROLE]: {
+      placement: 'end',
+      shape: 'round',
+      style: ROLE_STYLE,
+      messageRender: (message: string) => {
+        return <div class="max-w-400px">
+          {message}
+        </div>;
+      },
+    },
+    [REMOTE_ASSISTANT_ROLE]: {
+      placement: 'start',
+      variant: 'borderless',
+      style: ROLE_STYLE,
+      messageRender: (message: string) => {
+        return <div class="max-w-400px markdown-wrap" v-html={md.render(message)} />;
+      },
+      footer: (params) => {
+        const { content, item } = params as { content: string; item: MESSAGE.Answer };
+        const isShow = conversationList.value[conversationList.value.length - 1].run_id === item.run_id;
+        return (
+          <div class="flex items-center">
+            <Tooltip title="复制" onClick={() => onCopy(content)} align={{ offset: [0, 4] }} >
+              <div class="action-box">
+                <IconCopy size={16} class="color-#737478" />
+              </div>
+            </Tooltip>
+            {isShow && (
+              <Tooltip title="重新生成" onClick={() => handleRemoteRefresh(item)} align={{ offset: [0, 4] }}>
+                <div class="action-box ml-12px">
+                  <IconRefresh size={16} class="color-#737478 " />
+                </div>
+              </Tooltip>
+            )}
+          </div>
+        );
+      },
+    },
+  };
+
+  // 下载处理
+  const onDownload = () => {
+    console.log('onDownload', rightViewDataSource.value);
+  };
+
+  const onCopy = (content: string) => {
+    copy(content);
+    antdMessage.success('复制成功！');
+  };
+
+  // 重置生成状态
+  const resetGenerateStatus = () => {
+    generateLoading.value = false;
+    generateTeamRunTaskId.value = null;
+  };
+
+  const handleRemoteRefresh = (item: MESSAGE.Answer) => {
+    generateLoading.value = true;
+
+    const targetIndex = conversationList.value.findIndex(
+      (v) => v.teamRunTaskId === item.teamRunTaskId && v.run_id === item.run_id && v.role === REMOTE_ASSISTANT_ROLE,
+    );
+    const message = conversationList.value[targetIndex - 1]?.content;
+    conversationList.value.splice(targetIndex, 1);
+
+    initSse({ message });
+  };
+
+  const onRefresh = (run_id: string) => {
+    generateLoading.value = true;
+
+    const targetIndex = conversationList.value.findIndex((v) => v.teamRunTaskId === run_id);
+    conversationList.value = conversationList.value.filter((item) => item.teamRunTaskId !== run_id);
+    const message = conversationList.value[targetIndex - 1]?.content;
+    initSse({ message });
+  };
+
+  const getAllRunTask = (teamRunTaskId: string) => {
+    return conversationList.value.filter(
+      (item) => item.role === ANSWER_ROLE && item.teamRunTaskId === teamRunTaskId && !item.isTeamRunTask,
+    );
+  };
+  const getRunTask = (run_id: string) => {
+    return conversationList.value.find((item) => item.run_id === run_id && !item.isTeamRunTask);
+  };
+  // 设置当前对话所有思考过程任务展开收起状态
+  const setRunTaskCollapse = (teamRunTaskId: string, isCollapse: boolean) => {
+    getAllRunTask(teamRunTaskId).forEach((item) => {
+      item.content.isCollapse = isCollapse;
+    });
+  };
+  // 获取同一个对话下的最后一个run_task
+  const getLastRunTask = (teamRunTaskId: string) => {
+    const allRunTask = getAllRunTask(teamRunTaskId);
+    return allRunTask[allRunTask.length - 1] ?? {};
+  };
+  const getFirstRunTask = (teamRunTaskId: string) => {
+    const allRunTask = getAllRunTask(teamRunTaskId);
+    return allRunTask[0] ?? {};
+  };
+  // 判断当前对话是否含有过程任务
+  const hasRunTask = (teamRunTaskId: string) => {
+    return conversationList.value.some((item) => item.teamRunTaskId === teamRunTaskId && !item.isTeamRunTask);
+  };
+
+  const getTeamRunTask = (teamRunTaskId: string) => {
+    return conversationList.value.find((item) => item.teamRunTaskId === teamRunTaskId);
+  };
+  const isLastRunTask = (data: MESSAGE.Answer): boolean => {
+    const { teamRunTaskId, run_id } = data;
+    return getLastRunTask(teamRunTaskId).run_id === run_id;
+  };
+  const isFirstRunTask = (data: MESSAGE.Answer): boolean => {
+    const { teamRunTaskId, run_id } = data;
+    return getFirstRunTask(teamRunTaskId).run_id === run_id;
+  };
+
+  // 过程节点开始
+  const handleRunTaskStart = (data: MESSAGE.Answer) => {
+    const { run_id } = data;
+    // generateTeamRunTaskId.value = run_id;
+    conversationList.value.push({
+      run_id,
+      key: run_id,
+      teamRunTaskId: generateTeamRunTaskId.value,
+      content: { ...data, runStatus: EnumTeamRunStatus.RunStarted, teamRunTaskId: generateTeamRunTaskId.value },
+      output: data.output,
+      role: ANSWER_ROLE,
+      messageRender: (data: MESSAGE.Answer) => {
+        const { node, output, runStatus, isCollapse = true, customRender, teamRunTaskId } = data;
+        const isRulCompleted = runStatus === EnumTeamRunStatus.RunCompleted;
+
+        let outputEleClass: string = `thought-chain-output border-l-#E6E6E8 border-l-1px  pl-12px relative left-8px mb-4px markdown-wrap`;
+        !isLastRunTask(data) && (outputEleClass += ' hasLine pb-12px pt-4px');
+
+        return (
+          <>
+            {isFirstRunTask(data) && (
+              <div
+                class="flex items-center mb-8px cursor-pointer"
+                onClick={() => setRunTaskCollapse(teamRunTaskId, !isCollapse)}
+              >
+                <span class="font-family-medium color-#211F24 text-14px font-400 lh-22px mr-4px">智能思考</span>
+                {isCollapse ? (
+                  <IconCaretUp size={12} class="color-#211F24 " />
+                ) : (
+                  <IconCaretDown size={12} class="color-#211F24" />
+                )}
+              </div>
+            )}
+            <div class="relative thought-chain-item" style={{ display: isCollapse ? 'block' : 'none' }}>
+              <div class="flex items-center mb-4px">
+                <img src={isRulCompleted ? icon1 : icon2} width={16} height={16} class="mr-4px" />
+                <div class="color-#211F24 !lh-20px">{node}</div>
+              </div>
+              <div v-html={md.render(output)} class={outputEleClass} />
+            </div>
+            {customRender?.()}
+          </>
+        );
+      },
+    });
+  };
+  // 过程节点更新
+  const handleRunTaskUpdate = (data: MESSAGE.Answer) => {
+    const { run_id, output } = data;
+
+    const existingItem = conversationList.value.find((item) => item.run_id === run_id);
+    if (existingItem && output) {
+      existingItem.content.output += output;
+      existingItem.content.runStatus = EnumTeamRunStatus.RunResponseContent;
+    }
+  };
+  // 过程节点结束
+  const handleRunTaskEnd = (data: MESSAGE.Answer) => {
+    const { output } = data;
+
+    const existingItem = getRunTask(data.run_id);
+
+    if (existingItem) {
+      existingItem.content.output += output;
+      existingItem.content.runStatus = EnumTeamRunStatus.RunCompleted;
+    }
+  };
+
+  // 任务开始
+  const handleTeamRunTaskStart = (data: MESSAGE.Answer) => {
+    const { run_id } = data;
+    generateTeamRunTaskId.value = run_id;
+    conversationList.value.push({
+      run_id,
+      isTeamRunTask: true,
+      teamRunTaskId: generateTeamRunTaskId.value,
+      key: run_id,
+      content: { ...data, teamRunStatus: EnumTeamRunStatus.TeamRunStarted, teamRunTaskId: run_id },
+      output: data.output,
+      role: ANSWER_ROLE,
+      messageRender: (data: MESSAGE.Answer) => {
+        return <div v-html={md.render(data.output ?? '')} class="markdown-wrap" />;
+      },
+    });
+  };
+  // 任务更新
+  const handleTeamRunTaskUpdate = (data: MESSAGE.Answer) => {
+    const { run_id, output } = data;
+    const existingItem = conversationList.value.find((item) => item.run_id === run_id);
+    if (existingItem && output) {
+      existingItem.content.output += output;
+      existingItem.content.teamRunStatus = EnumTeamRunStatus.TeamRunResponseContent;
+    }
+  };
+  // 任务结束
+  const handleTeamRunTaskEnd = (data: MESSAGE.Answer) => {
+    resetGenerateStatus();
+
+    const { run_id: teamRunTaskId, extra_data, output } = data;
+
+    const _hasRunTask = hasRunTask(teamRunTaskId);
+    const _targetTask = _hasRunTask ? getLastRunTask(teamRunTaskId) : getTeamRunTask(teamRunTaskId);
+
+    if (isEmpty(_targetTask)) {
+      return;
+    }
+
+    // 含有思考过程，折叠思考过程，展示结果
+    if (_hasRunTask) {
+      setRunTaskCollapse(teamRunTaskId, false);
+      const _targetData = extra_data?.data?.find((item: any) => item.task_type === '任务管理')
+      if (_targetData) {
+        showRightView.value = true;
+        rightViewDataSource.value = extra_data.data;
+        rightPreviewData.value = _targetData;
+      }
+
+      _targetTask.content.customRender = () => {
+        return (
+          <>
+            <div v-html={md.render(output)} class="markdown-wrap" />
+            {_targetData && (
+              <div class="file-card mt-10px">
+                <IconFile class="w-24px h-24px mr-16px color-#6D4CFE" />
+                <div>
+                  <TextOverTips
+                    context={FILE_TYPE_MAP?.[_targetData.file_type] ?? '-'}
+                    class="font-family-medium color-#211F24 text-14px font-400 lh-22px mb-4px"
+                  />
+                  <span class="color-#939499 font-family-regular text-12px font-400 lh-22px">
+                    创建时间：{exactFormatTime(dayjs().unix())}
+                  </span>
+                </div>
+              </div>
+            )}
+          </>
+        );
+      }
+
+    } else {
+      _targetTask.content.teamRunStatus = EnumTeamRunStatus.TeamRunCompleted;
+    }
+
+    _targetTask.footer = () => {
+      const isShow = conversationList.value[conversationList.value.length - 1].teamRunTaskId === teamRunTaskId;
+      return (
+        <div class="flex items-center">
+          {!extra_data && (
+            // ? (
+            // <Tooltip title="下载" onClick={onDownload} align={{ offset: [0, 4] }}>
+            //   <div class="action-box">
+            //     <IconDownload size={16} class="color-#737478 mr-12px" />
+            //   </div>
+            // </Tooltip>
+            // ) :
+            <Tooltip title="复制" onClick={() => onCopy(_targetTask.content.output)} align={{ offset: [0, 4] }}>
+              <div class="action-box">
+                <IconCopy size={16} class="color-#737478" />
+              </div>
+            </Tooltip>
+          )}
+          {isShow && (
+            <Tooltip title="重新生成" onClick={() => onRefresh(teamRunTaskId)} align={{ offset: [0, 4] }}>
+              <div class="action-box ml-12px">
+                <IconRefresh size={16} class="color-#737478 " />
+              </div>
+            </Tooltip>
+          )}
+        </div>
+      );
+    };
+  };
+
+  // 消息处理主函数
+  const handleMessage = (parsedData: { event: string; data: MESSAGE.Answer }) => {
+    const { data } = parsedData;
+    const { status } = data;
+    switch (status) {
+      case EnumTeamRunStatus.RunStarted:
+        handleRunTaskStart(data);
+        break;
+      case EnumTeamRunStatus.RunResponseContent:
+        handleRunTaskUpdate(data);
+        break;
+      case EnumTeamRunStatus.RunCompleted:
+        handleRunTaskEnd(data);
+        break;
+      case EnumTeamRunStatus.TeamRunStarted:
+        handleTeamRunTaskStart(data);
+        break;
+      case EnumTeamRunStatus.TeamRunResponseContent:
+        handleTeamRunTaskUpdate(data);
+        break;
+      case EnumTeamRunStatus.TeamRunCompleted:
+        handleTeamRunTaskEnd(data);
+        break;
+      default:
+        break;
+    }
+  };
+
+  return {
+    roles,
+    senderRef,
+    generateTeamRunTaskId,
+    handleMessage,
+    generateLoading,
+    conversationList,
+    showRightView,
+    rightViewDataSource,
+    rightPreviewData
+  };
+}
diff --git a/src/components/xt-chat/xt-bubble/context.ts b/src/components/xt-chat/xt-bubble/context.ts
new file mode 100644
index 0000000..25303c0
--- /dev/null
+++ b/src/components/xt-chat/xt-bubble/context.ts
@@ -0,0 +1,81 @@
+/*
+ * @Author: RenXiaoDong
+ * @Date: 2025-08-20 23:17:49
+ * @Description: 气泡上下文管理
+ * 提供气泡组件间的通信机制，支持全局状态管理和组件间数据传递
+ */
+import { computed, defineComponent, inject, provide, shallowRef, triggerRef, unref, watch } from "vue";
+import type { ComputedRef, InjectionKey } from "vue";
+import { objectType } from "@/utils/type";
+import type { BubbleContextProps } from "./types";
+
+/**
+ * 气泡上下文注入键
+ * 用于Vue的依赖注入系统，确保上下文的唯一性
+ */
+const BubbleContextKey: InjectionKey<ComputedRef<BubbleContextProps>> =
+  Symbol('BubbleContext');
+
+/**
+ * 全局气泡上下文API
+ * 提供全局访问气泡上下文的能力，用于跨组件通信
+ */
+export const globalBubbleContextApi = shallowRef<BubbleContextProps>();
+
+/**
+ * 气泡上下文提供者Hook
+ * 向子组件提供气泡上下文，并同步更新全局API
+ * 
+ * @param value - 要提供的上下文值（计算属性）
+ */
+export const useBubbleContextProvider = (value: ComputedRef<BubbleContextProps>) => {
+  // 向子组件提供上下文
+  provide(BubbleContextKey, value);
+  
+  // 监听上下文变化，同步更新全局API
+  watch(
+    value,
+    () => {
+      globalBubbleContextApi.value = unref(value);
+      // 触发响应式更新
+      triggerRef(globalBubbleContextApi);
+    },
+    { immediate: true, deep: true }, // 立即执行，深度监听
+  );
+};
+
+/**
+ * 气泡上下文注入Hook
+ * 从父组件或全局API获取气泡上下文
+ * 
+ * @returns 气泡上下文（计算属性）
+ */
+export const useBubbleContextInject = () => {
+  return inject(
+    BubbleContextKey,
+    // 如果没有找到注入的上下文，使用全局API作为后备
+    computed(() => globalBubbleContextApi.value || {}),
+  );
+};
+
+/**
+ * 气泡上下文提供者组件
+ * 用于在模板中提供气泡上下文，简化使用方式
+ */
+export const BubbleContextProvider = defineComponent({
+  props: {
+    // 上下文值，支持对象类型验证
+    value: objectType<BubbleContextProps>(),
+  },
+  setup(props, { slots }) {
+    // 使用计算属性包装props.value，确保响应式
+    useBubbleContextProvider(computed(() => props.value));
+    
+    // 渲染默认插槽内容
+    return () => {
+      return slots.default?.();
+    };
+  },
+});
+
+export default BubbleContextProvider;
\ No newline at end of file
diff --git a/src/components/xt-chat/xt-bubble/hooks/useDisplayData.ts b/src/components/xt-chat/xt-bubble/hooks/useDisplayData.ts
new file mode 100644
index 0000000..932eef6
--- /dev/null
+++ b/src/components/xt-chat/xt-bubble/hooks/useDisplayData.ts
@@ -0,0 +1,87 @@
+/*
+ * @Author: RenXiaoDong
+ * @Date: 2025-08-20 23:12:42
+ * @Description: 聊天气泡列表数据显示逻辑Hook
+ * 用于控制气泡列表的渐进式显示，实现打字效果和动态加载
+ */
+import { computed, unref, watch } from 'vue';
+import type { Ref } from 'vue';
+import { useEventCallback } from '@/hooks/useEventCallback';
+import useState from '@/hooks/useState';
+import type { ListItemType } from './useListData';
+
+/**
+ * Hook返回值类型定义
+ * @returns [displayList: 当前显示的数据列表, onTypingComplete: 打字完成回调函数]
+ */
+type UseDisplayDataReturn = [Ref<ListItemType[]>, (value: string | number) => void];
+
+/**
+ * 数据显示逻辑Hook
+ * 实现气泡列表的渐进式显示，支持打字效果和动态加载
+ * 
+ * @param items - 完整的数据列表引用
+ * @returns [displayList, onTypingComplete] - 当前显示列表和打字完成回调
+ */
+export default function useDisplayData(items: Ref<ListItemType[]>): UseDisplayDataReturn {
+  // 当前显示的数据条数，初始值为完整列表的长度
+  const [displayCount, setDisplayCount] = useState(items.value.length);
+
+  // 计算当前应该显示的数据列表（从完整列表中截取前displayCount条）
+  const displayList = computed(() => items.value.slice(0, unref(displayCount)));
+
+  // 获取当前显示列表中最后一条数据的key，用于判断是否继续显示下一条
+  const displayListLastKey = computed(() => {
+    const lastItem = unref(displayList)[unref(displayList).length - 1];
+    return lastItem ? lastItem.key : null;
+  });
+
+  // 监听完整数据列表的变化，智能调整显示数量
+  watch(
+    items,
+    () => {
+      // 当数据列表变化时，先尝试显示所有数据
+      setDisplayCount(items.value.length);
+      
+      // 检查当前显示列表是否与完整列表的前N项完全匹配
+      // 如果匹配，说明数据没有变化，保持当前显示状态
+      if (
+        unref(displayList).length &&
+        unref(displayList).every((item, index) => item.key === items.value[index]?.key)
+      ) {
+        return;
+      }
+
+      // 如果当前没有显示任何数据，显示第一条
+      if (unref(displayList).length === 0) {
+        setDisplayCount(1);
+      } else {
+        // 找到第一个不匹配的位置，将显示数量设置为该位置
+        // 这样可以保持已显示数据的连续性，避免跳跃
+        for (let i = 0; i < unref(displayList).length; i += 1) {
+          if (unref(displayList)[i].key !== items.value[i]?.key) {
+            setDisplayCount(i);
+            break;
+          }
+        }
+      }
+    },
+    { immediate: true, deep: true }, // 立即执行，深度监听
+  );
+
+  /**
+   * 打字完成回调函数
+   * 当某个气泡的打字效果完成时，显示下一条数据
+   * 
+   * @param key - 完成打字的项目key
+   */
+  const onTypingComplete = useEventCallback((key: string | number) => {
+    // 只有当完成打字的是当前显示列表的最后一条时，才显示下一条
+    // 这确保了显示的顺序性和连续性
+    if (key === unref(displayListLastKey)) {
+      setDisplayCount(unref(displayCount) + 1);
+    }
+  });
+
+  return [displayList, onTypingComplete] as const;
+}
diff --git a/src/components/xt-chat/xt-bubble/hooks/useListData.ts b/src/components/xt-chat/xt-bubble/hooks/useListData.ts
new file mode 100644
index 0000000..7ab47b1
--- /dev/null
+++ b/src/components/xt-chat/xt-bubble/hooks/useListData.ts
@@ -0,0 +1,79 @@
+/*
+ * @Author: RenXiaoDong
+ * @Date: 2025-08-20 23:14:55
+ * @Description: 气泡列表数据处理Hook
+ * 用于处理气泡数据列表，支持角色配置和属性合并
+ */
+import { computed, type Ref } from 'vue';
+import type { BubbleDataType, BubbleListProps } from '../types';
+import type { BubbleProps } from '../types';
+
+/**
+ * 类型工具：从Ref类型中提取原始类型
+ * @template T - Ref类型
+ * @returns 原始类型
+ */
+export type UnRef<T extends Ref<any>> = T extends Ref<infer R> ? R : never;
+
+/**
+ * 列表项类型定义
+ * 从useListData返回值中提取单个列表项的类型
+ */
+export type ListItemType = UnRef<ReturnType<typeof useListData>>[number];
+
+/**
+ * 气泡列表数据处理Hook
+ * 处理原始气泡数据，应用角色配置，生成最终的气泡属性
+ * 
+ * @param items - 原始气泡数据列表
+ * @param roles - 角色配置，可以是对象或函数
+ * @returns 处理后的气泡数据列表
+ */
+export default function useListData(
+  items: Ref<BubbleListProps['items']>,
+  roles?: Ref<BubbleListProps['roles']>,
+) {
+  /**
+   * 获取角色对应的气泡属性配置
+   * 根据气泡的角色类型，返回对应的样式和属性配置
+   * 
+   * @param bubble - 气泡数据
+   * @param index - 气泡在列表中的索引
+   * @returns 角色对应的气泡属性
+   */
+  const getRoleBubbleProps = (bubble: BubbleDataType, index: number): Partial<BubbleProps> => {
+    // 如果roles是函数，调用函数获取配置
+    if (typeof roles.value === 'function') {
+      return roles.value(bubble, index);
+    }
+
+    // 如果roles是对象，根据bubble.role获取对应配置
+    if (roles) {
+      return roles.value?.[bubble.role!] || {};
+    }
+
+    // 如果没有角色配置，返回空对象
+    return {};
+  }
+
+  /**
+   * 计算处理后的列表数据
+   * 合并角色配置和原始数据，生成最终的气泡属性
+   */
+  const listData = computed(() =>
+    (items.value || []).map((bubbleData, i) => {
+      // 生成唯一key：优先使用传入的 key，其次使用 id，最后回退到预设格式
+      const mergedKey = (bubbleData as any).key ?? (bubbleData as any).id ?? `preset_${i}`;
+
+      return {
+        // 先应用角色配置（作为默认值）
+        ...getRoleBubbleProps(bubbleData, i),
+        // 再应用原始数据（会覆盖角色配置中的相同属性）
+        ...bubbleData,
+        // 最后设置key（确保唯一性）
+        key: mergedKey,
+      };
+    }));
+
+  return listData as Ref<any[]>;
+}
\ No newline at end of file
diff --git a/src/components/xt-chat/xt-bubble/hooks/useTypedEffect.ts b/src/components/xt-chat/xt-bubble/hooks/useTypedEffect.ts
new file mode 100644
index 0000000..26509b1
--- /dev/null
+++ b/src/components/xt-chat/xt-bubble/hooks/useTypedEffect.ts
@@ -0,0 +1,147 @@
+import useState from '@/hooks/useState';
+import { computed, onUnmounted, unref, watch } from 'vue';
+import type { Ref } from 'vue';
+import type { BubbleContentType } from '../types';
+
+function isString(content: BubbleContentType): content is string {
+  return typeof content === 'string';
+}
+
+// 类型守卫：判断是否为非字符串类型（用于快速排除）
+function isNonString(content: BubbleContentType): content is Exclude<BubbleContentType, string> {
+  return !isString(content);
+}
+/**
+ * 打字效果Hook
+ * 当启用打字效果时，返回渐进式显示的内容和打字状态
+ * 否则直接返回原始内容
+ *
+ * @param content - 原始内容
+ * @param typingEnabled - 是否启用打字效果
+ * @param typingStep - 每次显示的字符数
+ * @param typingInterval - 打字间隔时间（毫秒）
+ * @returns [typedContent: 当前显示的内容, isTyping: 是否正在打字]
+ */
+const useTypedEffect = (
+  content: Ref<BubbleContentType>,
+  typingEnabled: Ref<boolean>,
+  typingStep: Ref<number>,
+  typingInterval: Ref<number>,
+  abortRef?: Ref<boolean>,
+): [typedContent: Ref<BubbleContentType>, isTyping: Ref<boolean>] => {
+  // 记录上一次的内容，用于检测内容变化
+  const [prevContent, setPrevContent] = useState<BubbleContentType>('');
+  // 当前打字位置（已显示的字符数）
+  const [typingIndex, setTypingIndex] = useState<number>(1);
+  let timer: number | null = null;
+
+  // 合并启用状态：仅当 启用打字 且 内容是字符串 时生效
+  const mergedTypingEnabled = computed(() => typingEnabled.value && isString(content.value));
+
+  // 清理定时器
+  const clearTypingTimer = () => {
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
+  };
+
+  // 监听内容变化，重置打字状态
+  watch(
+    content,
+    (newVal) => {
+      const prevVal = unref(prevContent);
+      setPrevContent(newVal);
+
+      // 非字符串类型：直接返回原始值，不执行打字逻辑
+      if (isNonString(newVal)) {
+        setTypingIndex(0); // 重置索引（无意义，仅为状态一致）
+        clearTypingTimer();
+        return;
+      }
+
+      // 字符串类型的逻辑
+      if (!mergedTypingEnabled.value) {
+        if (!(abortRef && abortRef.value)) {
+          setTypingIndex(newVal.length); // 直接显示完整内容
+        }
+      } else if (
+        isString(prevVal) &&
+        newVal.indexOf(prevVal) !== 0 // 新内容不是旧内容的前缀，重置打字
+      ) {
+        setTypingIndex(1);
+      }
+      clearTypingTimer();
+    },
+    { immediate: true },
+  );
+
+  // 打字逻辑（仅处理字符串类型）
+  const startTyping = () => {
+    clearTypingTimer();
+
+    // 终止条件：未启用打字 / 内容不是字符串 / 已中止
+    if (!mergedTypingEnabled.value || isNonString(content.value) || (abortRef && abortRef.value)) {
+      return;
+    }
+
+    const currentContent = content.value; // 此时 TypeScript 可推断为 string（因为 mergedTypingEnabled 已过滤）
+    const currentIndex = unref(typingIndex);
+
+    // 已打完所有字符，停止
+    if (currentIndex >= currentContent.length) {
+      return;
+    }
+
+    // 计算下一步索引（避免超出长度）
+    const nextIndex = Math.min(currentIndex + typingStep.value, currentContent.length);
+
+    timer = window.setTimeout(() => {
+      setTypingIndex(nextIndex);
+      startTyping(); // 递归触发下一次打字
+    }, typingInterval.value);
+  };
+
+  // 监听打字相关依赖变化
+  watch(
+    [typingEnabled, abortRef, () => content.value], // 监听 content 变化
+    () => {
+      startTyping();
+    },
+    { immediate: true },
+  );
+
+  // 计算当前显示的内容（核心：仅对字符串调用 slice）
+  const mergedTypingContent = computed(() => {
+    const currentContent = content.value;
+
+    // 非字符串类型：直接返回原始值（不处理打字）
+    if (isNonString(currentContent)) {
+      return currentContent;
+    }
+
+    // 字符串类型：根据打字状态返回部分/完整内容
+    if (mergedTypingEnabled.value || (abortRef && abortRef.value)) {
+      return currentContent.slice(0, unref(typingIndex)); // 此时确定是 string，可安全调用 slice
+    }
+
+    return currentContent; // 不启用打字时，返回完整字符串
+  });
+
+  // 是否正在打字（仅字符串类型可能为 true）
+  const isTyping = computed(
+    () =>
+      mergedTypingEnabled.value &&
+      unref(typingIndex) < (content.value as string).length && // 此时 content.value 已被 mergedTypingEnabled 限定为 string
+      !(abortRef && abortRef.value),
+  );
+
+  // 组件卸载时清理定时器
+  onUnmounted(() => {
+    clearTypingTimer();
+  });
+
+  return [mergedTypingContent, isTyping];
+};
+
+export default useTypedEffect;
diff --git a/src/components/xt-chat/xt-bubble/hooks/useTypingConfig.ts b/src/components/xt-chat/xt-bubble/hooks/useTypingConfig.ts
new file mode 100644
index 0000000..ecdcc8d
--- /dev/null
+++ b/src/components/xt-chat/xt-bubble/hooks/useTypingConfig.ts
@@ -0,0 +1,61 @@
+/*
+ * @Author: RenXiaoDong
+ * @Date: 2025-08-20 23:27:05
+ * @Description: 打字配置Hook
+ * 处理打字效果的配置参数，提供默认值和配置合并功能
+ */
+import { computed, toValue, type MaybeRefOrGetter } from 'vue';
+import type { BubbleProps, TypingOption } from '../types';
+
+/**
+ * 打字配置Hook
+ * 解析打字配置参数，提供默认值，返回配置化的打字参数
+ * 
+ * @param typing - 打字配置，可以是布尔值、配置对象或null
+ * @returns [typingEnabled, step, interval, suffix] - 打字启用状态、步长、间隔、后缀
+ */
+function useTypingConfig(typing: MaybeRefOrGetter<BubbleProps['typing']>) {
+  /**
+   * 计算是否启用打字效果
+   * 只有当typing为真值时才启用打字效果
+   */
+  const typingEnabled = computed(() => {
+    if (!toValue(typing)) {
+      return false;
+    }
+    return true;
+  });
+
+  /**
+   * 基础配置：提供默认的打字参数
+   * 当用户没有提供完整配置时，使用这些默认值
+   */
+  const baseConfig: Required<TypingOption> = {
+    step: 1,        // 每次显示的字符数
+    interval: 50,   // 打字间隔时间（毫秒）
+    suffix: null,   // 打字时的后缀（默认为空）
+  };
+
+  /**
+   * 合并配置：将用户配置与默认配置合并
+   * 用户配置会覆盖默认配置中的相同属性
+   */
+  const config = computed(() => {
+    const typingRaw = toValue(typing);
+    return {
+      ...baseConfig,
+      // 如果typing是对象，则合并对象属性；否则使用默认配置
+      ...(typeof typingRaw === 'object' ? typingRaw : {})
+    }
+  });
+
+  // 返回解构的配置参数，方便使用
+  return [
+    typingEnabled,                    // 是否启用打字效果
+    computed(() => config.value.step),        // 每次显示的字符数
+    computed(() => config.value.interval),    // 打字间隔时间
+    computed(() => config.value.suffix)       // 打字后缀
+  ] as const;
+}
+
+export default useTypingConfig;
\ No newline at end of file
diff --git a/src/components/xt-chat/xt-bubble/index.ts b/src/components/xt-chat/xt-bubble/index.ts
new file mode 100644
index 0000000..75d4bce
--- /dev/null
+++ b/src/components/xt-chat/xt-bubble/index.ts
@@ -0,0 +1,9 @@
+/*
+ * @Author: RenXiaoDong
+ * @Date: 2025-08-20 22:16:14
+ */
+export { default as Bubble } from './xt-bubble.vue';
+export { default as BubbleList } from './xt-bubbleList.vue';
+export * from './types';
+
+
diff --git a/src/components/xt-chat/xt-bubble/loading.vue b/src/components/xt-chat/xt-bubble/loading.vue
new file mode 100644
index 0000000..1a8e64f
--- /dev/null
+++ b/src/components/xt-chat/xt-bubble/loading.vue
@@ -0,0 +1,66 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-08-20 23:20:21
+-->
+<script lang="tsx">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  setup(props, { emit, expose }) {
+    return () => (
+      <span class="xt-bubble-dot">
+        <i class="dot-item w-2px h-2px" key="item-1" />
+        <i class="dot-item w-3px h-3px" key="item-2" />
+        <i class="dot-item w-5px h-5px" key="item-3" />
+      </span>
+    );
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.xt-bubble-dot {
+  display: flex;
+  align-items: center;
+  column-gap: 4px;
+  
+  @keyframes loadingMove {
+    0% {
+      transform: translateY(0);
+    }
+    10% {
+      transform: translateY(4px);
+    }
+    20% {
+      transform: translateY(0);
+    }
+    30% {
+      transform: translateY(4px);
+    }
+    40% {
+      transform: translateY(0);
+    }
+  }
+  
+  .dot-item {
+    border-radius: 50%;
+    background: var(--Brand-6, #6d4cfe);
+    animation-name: loadingMove;
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+    
+    &:nth-child(1) {
+      animation-delay: 0s;
+    }
+    
+    &:nth-child(2) {
+      animation-delay: 0.2s;
+    }
+    
+    &:nth-child(3) {
+      animation-delay: 0.4s;
+    }
+  }
+}
+</style>
diff --git a/src/components/xt-chat/xt-bubble/style.scss b/src/components/xt-chat/xt-bubble/style.scss
new file mode 100644
index 0000000..bf2cf31
--- /dev/null
+++ b/src/components/xt-chat/xt-bubble/style.scss
@@ -0,0 +1,160 @@
+.xt-bubble-list {
+  height: 100%;
+  gap: 8px;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
+}
+
+.xt-bubble {
+  display: flex;
+  justify-content: start;
+  column-gap: 12px;
+  @mixin cts {
+    color: var(--Text-1, #211f24);
+    font-family: $font-family-regular;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+  }
+  &.xt-bubble-start {
+    flex-direction: row;
+  }
+
+  &.xt-bubble-end {
+    justify-content: end;
+    flex-direction: row-reverse;
+  }
+
+  .xt-bubble-content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    min-width: 0;
+    max-width: 100%;
+    // min-height: 36px;
+    word-break: break-all;
+    @include cts;
+    &-filled {
+      background-color: #f2f3f5;
+      padding: 6px 12px;
+      border-radius: 10px;
+    }
+
+    &-outlined {
+      background-color: #fff;
+      border: 1px solid #e5e6eb;
+      padding: 6px 12px;
+      border-radius: 10px;
+    }
+
+    &-shadow {
+      background-color: #fff;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+      padding: 6px 12px;
+      border-radius: 10px;
+    }
+
+    &-borderless {
+      background-color: transparent !important;
+    }
+
+    // 形状样式
+    &-default {
+      border-radius: 10px;
+    }
+
+    &-round {
+      padding: 6px 12px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: 16px;
+      background-color: var(--BG-200, #f2f3f5);
+    }
+
+    &-corner {
+      border-radius: 4px;
+    }
+
+    .thought-chain-item {
+      position: relative;
+      margin: 0;
+      font-size: 12px;
+      list-style: none;
+      .thought-chain-output {
+        position: relative;
+        &.hasLine {
+          &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            border-left: 1px solid #e6e6e8;
+          }
+        }
+      }
+    }
+
+    // 设置markdown返回的标签样式
+    :deep(.markdown-wrap) {
+      pre {
+        white-space: normal;
+      }
+      table {
+        border-collapse: collapse;
+        thead {
+          tr {
+            th {
+              @include cts;
+              padding: 6px 8px;
+              border: 1px solid #e6e6e8;
+              text-align: left;
+            }
+          }
+        }
+        tbody {
+          tr {
+            td {
+              @include cts;
+              border: 1px solid #e6e6e8;
+              padding: 16px 8px;
+              text-align: left;
+            }
+          }
+        }
+      }
+    }
+
+    .action-box {
+      cursor: pointer;
+      padding: 2px;
+      border-radius: 2px;
+      transition: all 0.2s;
+      line-height: normal;
+      &:hover {
+        background-color: #f2f3f5;
+      }
+    }
+  }
+
+  .xt-bubble-header {
+    @include cts;
+    margin-bottom: 6px;
+  }
+
+  .xt-bubble-footer {
+    @include cts;
+    margin-top: 6px;
+  }
+
+  &.xt-bubble-typing {
+    display: inline-block;
+    min-width: 36px;
+  }
+}
diff --git a/src/components/xt-chat/xt-bubble/types.ts b/src/components/xt-chat/xt-bubble/types.ts
new file mode 100644
index 0000000..83c872e
--- /dev/null
+++ b/src/components/xt-chat/xt-bubble/types.ts
@@ -0,0 +1,191 @@
+/*
+ * @Author: RenXiaoDong
+ * @Date: 2025-08-20 22:04:54
+ * @Description: 聊天气泡组件的类型定义
+ */
+import type { AvatarProps } from 'ant-design-vue';
+import type { CSSProperties, HTMLAttributes, VNode } from 'vue';
+
+/**
+ * 避免类型验证的包装类型
+ * 用于包装可能引起TypeScript严格检查问题的类型
+ */
+export type AvoidValidation<T> = T;
+
+/**
+ * 打字效果配置选项
+ * 控制消息的打字动画效果
+ */
+export interface TypingOption {
+  /**
+   * 每次打字的字符数
+   * @default 1
+   */
+  step?: number;
+  /**
+   * 打字间隔时间（毫秒）
+   * @default 50
+   */
+  interval?: number;
+  /**
+   * 打字时的后缀显示内容
+   * @default null
+   */
+  suffix?: VNode | string;
+}
+
+/**
+ * 语义化类型
+ * 定义气泡组件中各个部分的语义化标识
+ */
+export type SemanticType = 'avatar' | 'content' | 'header' | 'footer';
+
+/**
+ * 气泡内容类型
+ * 支持多种内容格式：VNode、字符串、对象、数字等
+ */
+export type BubbleContentType = VNode | string | Record<PropertyKey, any> | number;
+
+/**
+ * 插槽信息类型
+ * 传递给插槽函数的额外信息
+ */
+export type SlotInfoType = {
+  /** 气泡的唯一标识键 */
+  key?: string | number;
+};
+
+/**
+ * 头像属性扩展接口
+ * 继承自ant-design-vue的AvatarProps，添加了class和style属性
+ */
+export interface _AvatarProps extends AvatarProps {
+  /** 自定义CSS类名 */
+  class: string;
+  /** 自定义内联样式 */
+  style: CSSProperties;
+}
+
+/**
+ * 气泡组件属性接口
+ * 定义气泡组件的所有可配置属性
+ */
+export interface BubbleProps<ContentType extends BubbleContentType = string>
+  extends /* @vue-ignore */ Omit<HTMLAttributes, 'content'> {
+  /** 组件前缀类名 */
+  prefixCls?: string;
+  /** 根元素的自定义类名 */
+  rootClassName?: string;
+  /** 各部分的样式配置 */
+  styles?: Partial<Record<SemanticType, CSSProperties>>;
+  /** 各部分的类名配置 */
+  classNames?: Partial<Record<SemanticType, string>>;
+  /** 头像配置：可以是属性对象、VNode或渲染函数 */
+  avatar?: Partial<_AvatarProps> | VNode | (() => VNode);
+  /** 气泡位置：start(左侧) | end(右侧) */
+  placement?: 'start' | 'end';
+  /** 是否显示加载状态 */
+  loading?: boolean;
+  /** 打字效果配置：可以是配置对象或布尔值 */
+  typing?: AvoidValidation<TypingOption | boolean>;
+  /** 气泡内容 */
+  content?: ContentType;
+  /** 自定义消息渲染函数 */
+  messageRender?: (content: ContentType) => VNode | string;
+  /** 自定义加载状态渲染函数 */
+  loadingRender?: () => VNode;
+  /** 气泡样式变体：filled(填充) | borderless(无边框) | outlined(轮廓) | shadow(阴影) */
+  variant?: 'filled' | 'borderless' | 'outlined' | 'shadow';
+  /** 气泡形状：round(圆角) | corner(直角) */
+  shape?: 'round' | 'corner';
+  /** 内部使用的唯一标识键 */
+  _key?: number | string;
+  /** 打字完成时的回调函数 */
+  onTypingComplete?: VoidFunction;
+  /** 头部内容：可以是VNode、字符串或渲染函数 */
+  header?: AvoidValidation<
+    VNode | string | ((params: { content: ContentType; info: SlotInfoType; item: BubbleProps<any> }) => VNode | string)
+  >;
+  /** 底部内容：可以是VNode、字符串或渲染函数 */
+  footer?: AvoidValidation<
+    VNode | string | ((params: { content: ContentType; info: SlotInfoType; item: BubbleProps<any> }) => VNode | string)
+  >;
+}
+
+/**
+ * 气泡组件引用接口
+ * 提供对气泡组件DOM元素的访问
+ */
+export interface BubbleRef {
+  /** 气泡组件的原生DOM元素 */
+  bubbleElement: HTMLElement;
+  /** 中止当前打字效果并立即展示完整内容 */
+  abortTyping: VoidFunction;
+}
+
+/**
+ * 气泡上下文属性接口
+ * 用于气泡组件间的通信
+ */
+export interface BubbleContextProps {
+  /** 更新回调函数 */
+  onUpdate?: VoidFunction;
+}
+
+/**
+ * 气泡列表引用接口
+ * 提供对气泡列表组件的访问和控制方法
+ */
+export interface BubbleListRef {
+  /** 气泡列表的原生DOM元素 */
+  bubbleElement: HTMLDivElement;
+  /** 滚动到指定位置的方法 */
+  scrollTo: (info: {
+    /** 滚动偏移量 */
+    offset?: number;
+    /** 目标气泡的键值 */
+    key?: string | number;
+    /** 滚动行为：smooth(平滑) | auto(自动) */
+    behavior?: ScrollBehavior;
+    /** 滚动位置：start | center | end | nearest */
+    block?: ScrollLogicalPosition;
+  }) => void;
+}
+
+/**
+ * 气泡数据类型
+ * 扩展了BubbleProps，添加了key和role属性
+ */
+export type BubbleDataType = BubbleProps<any> & {
+  /** 气泡的唯一标识键 */
+  key?: string | number;
+  /** 气泡的角色类型 */
+  role?: string;
+};
+
+/**
+ * 角色类型
+ * 定义不同角色的气泡样式配置
+ */
+export type RoleType = Partial<Omit<BubbleProps<any>, 'content'>>;
+
+/**
+ * 角色配置类型
+ * 可以是角色配置对象或根据气泡数据和索引返回角色配置的函数
+ */
+export type RolesType = Record<string, RoleType> | ((bubbleDataP: BubbleDataType, index: number) => RoleType);
+
+/**
+ * 气泡列表属性接口
+ * 定义气泡列表组件的所有可配置属性
+ */
+export interface BubbleListProps extends /* @vue-ignore */ HTMLAttributes {
+  /** 根元素的自定义类名 */
+  rootClassName?: string;
+  /** 气泡数据数组 */
+  items?: BubbleDataType[];
+  /** 是否自动滚动到最新消息 */
+  autoScroll?: boolean;
+  /** 角色配置：定义不同角色的气泡样式 */
+  roles?: AvoidValidation<RolesType>;
+}
diff --git a/src/components/xt-chat/xt-bubble/xt-bubble.vue b/src/components/xt-chat/xt-bubble/xt-bubble.vue
new file mode 100644
index 0000000..2fecee2
--- /dev/null
+++ b/src/components/xt-chat/xt-bubble/xt-bubble.vue
@@ -0,0 +1,148 @@
+<script lang="tsx">
+import { Avatar } from 'ant-design-vue';
+import { computed, defineComponent, ref, toRef, unref, watch, watchEffect } from 'vue';
+import Loading from './loading.vue';
+import useTypingConfig from './hooks/useTypingConfig';
+import useTypedEffect from './hooks/useTypedEffect';
+import { useBubbleContextInject } from './context';
+import type { BubbleProps, BubbleContentType, SlotInfoType } from './types';
+
+export default defineComponent({
+  name: 'Bubble',
+  inheritAttrs: false,
+  props: {},
+  setup(_, { attrs, slots, expose }) {
+    const props = attrs as unknown as BubbleProps<BubbleContentType> & { style?: any; class?: any };
+
+    const content = ref<BubbleContentType>(props.content ?? '');
+    const bubbleElement = ref<HTMLDivElement>(null);
+
+    watch(
+      () => props.content,
+      (val) => {
+        content.value = val;
+      },
+      { immediate: true },
+    );
+
+    const { onUpdate } = unref(useBubbleContextInject());
+
+    const [typingEnabled, typingStep, typingInterval, typingSuffix] = useTypingConfig(() => props.typing);
+    const abortRef = ref(false);
+    const [typedContent, isTyping] = useTypedEffect(content, typingEnabled, typingStep, typingInterval, abortRef);
+
+    // 提供中止打字的能力：关闭typing并立即展示完整内容
+    const abortTyping = () => {
+      abortRef.value = true;
+    };
+
+    const triggerTypingCompleteRef = ref(false);
+    watch(typedContent, () => {
+      onUpdate?.();
+    });
+    watchEffect(() => {
+      if (!isTyping.value && !props.loading) {
+        if (!triggerTypingCompleteRef.value) {
+          triggerTypingCompleteRef.value = true;
+          props.onTypingComplete?.();
+        }
+      } else {
+        triggerTypingCompleteRef.value = false;
+      }
+    });
+
+    const prefixCls = 'xt-bubble';
+    const mergedCls = computed(() => [
+      prefixCls,
+      `${prefixCls}-${props.placement ?? 'start'}`,
+      props.class,
+      {
+        [`${prefixCls}-typing`]:
+          isTyping.value && !props.loading && !props.messageRender && !slots.message && !typingSuffix.value,
+      },
+    ]);
+
+    const avatarNode = computed(() => {
+      if (slots.avatar) return slots.avatar();
+      const avatar = props.avatar as any;
+      return typeof avatar === 'function' ? avatar() : avatar && avatar.src ? <Avatar {...avatar} /> : null;
+    });
+
+    const mergedContent = computed(() => {
+      if (slots.message) return slots.message({ content: typedContent.value });
+      return props.messageRender ? props.messageRender(typedContent.value) : typedContent.value;
+    });
+
+    const contentNode = computed(() => {
+      if (props.loading) {
+        if (slots.loading) {
+          return slots.loading();
+        }
+        return props.loadingRender ? props.loadingRender() : <Loading />;
+      }
+
+      return (
+        <>
+          {mergedContent.value}
+          {isTyping.value && unref(typingSuffix)}
+        </>
+      );
+    });
+
+    const renderHeader = () => {
+      const info: SlotInfoType = { key: props._key };
+      if (slots.header) return slots.header({ content: typedContent.value, info, item: props });
+      const h = props.header;
+      return typeof h === 'function' ? h({ content: typedContent.value, info, item: props }) : h;
+    };
+
+    const renderFooter = () => {
+      const info: SlotInfoType = { key: props._key };
+      if (slots.footer) return slots.footer({ content: typedContent.value, info, item: props });
+      const f = props.footer;
+      return typeof f === 'function' ? f({ content: typedContent.value, info, item: props }) : f;
+    };
+
+    expose({
+      abortTyping,
+      bubbleElement,
+    });
+
+    return () => (
+      <div class={mergedCls.value} style={{ ...(props.style || {}) }} ref={bubbleElement}>
+        {(slots.avatar || props.avatar) && (
+          <div class={[`${prefixCls}-avatar`, props.classNames?.avatar]} style={props.styles?.avatar}>
+            {avatarNode.value}
+          </div>
+        )}
+
+        <div
+          class={[
+            `${prefixCls}-content`,
+            `${prefixCls}-content-${props.variant ?? 'filled'}`,
+            { [`${prefixCls}-content-${props.shape}`]: props.shape },
+            props.classNames?.content,
+          ]}
+          style={props.styles?.content}
+        >
+          {renderHeader() ? (
+            <div class={[`${prefixCls}-header`, props.classNames?.header]} style={props.styles?.header}>
+              {renderHeader()}
+            </div>
+          ) : null}
+          {contentNode.value}
+          {renderFooter() ? (
+            <div class={[`${prefixCls}-footer`, props.classNames?.footer]} style={props.styles?.footer}>
+              {renderFooter()}
+            </div>
+          ) : null}
+        </div>
+      </div>
+    );
+  },
+});
+</script>
+
+<style scoped lang="scss">
+@import './style.scss';
+</style>
diff --git a/src/components/xt-chat/xt-bubble/xt-bubbleList.vue b/src/components/xt-chat/xt-bubble/xt-bubbleList.vue
new file mode 100644
index 0000000..9142b3c
--- /dev/null
+++ b/src/components/xt-chat/xt-bubble/xt-bubbleList.vue
@@ -0,0 +1,204 @@
+<script lang="tsx">
+import Bubble from './xt-bubble.vue';
+import BubbleContextProvider from './context';
+import useDisplayData from './hooks/useDisplayData';
+import useListData from './hooks/useListData';
+import useState from '@/hooks/useState';
+import pickAttrs from '@/utils/pick-attrs';
+import { useEventCallback } from '@/hooks/useEventCallback';
+import type { BubbleListProps, BubbleRef, RolesType } from './types';
+import {
+  computed,
+  defineComponent,
+  mergeProps,
+  nextTick,
+  onWatcherCleanup,
+  ref,
+  unref,
+  useAttrs,
+  watch,
+  watchPostEffect,
+} from 'vue';
+
+export default defineComponent({
+  name: 'BubbleList',
+  inheritAttrs: false,
+  // 正确声明 props，提供默认值，确保 TSX 下默认值生效
+  props: {
+    autoScroll: {
+      type: Boolean,
+      default: true,
+    },
+    items: {
+      type: Array as () => BubbleListProps['items'],
+      required: true,
+    },
+    roles: {
+      type: Object as () => RolesType,
+      default: () => ({} as RolesType),
+    },
+    rootClassName: {
+      type: String,
+      default: '',
+    },
+    style: {
+      type: Object as () => Record<string, any>,
+      default: () => ({}),
+    },
+    class: {
+      type: [String, Array, Object] as unknown as () => any,
+      default: '',
+    },
+  },
+  setup(props, { attrs, slots, expose }) {
+    const passThroughAttrs = useAttrs();
+
+    const TOLERANCE = 1;
+
+    const domProps = computed(() => pickAttrs(mergeProps(props as any, passThroughAttrs)));
+
+    const items = ref(props.items);
+    const roles = ref(props.roles as RolesType);
+    watch(
+      () => props.items,
+      (val) => (items.value = val),
+      { immediate: true },
+    );
+    watch(
+      () => props.roles,
+      (val) => (roles.value = val as RolesType),
+      { immediate: true },
+    );
+
+    const listRef = ref<HTMLDivElement | null>(null);
+    const bubbleRefs = ref<Record<string | number, BubbleRef>>({});
+
+    const listPrefixCls = 'xt-bubble-list';
+
+    const [initialized, setInitialized] = useState(false);
+    watchPostEffect(() => {
+      setInitialized(true);
+      onWatcherCleanup(() => setInitialized(false));
+    });
+
+    // data
+    const mergedData = useListData(items as any, roles as any);
+    const [displayData, onTypingComplete] = useDisplayData(mergedData);
+
+    // scroll
+    const [scrollReachEnd, setScrollReachEnd] = useState(true);
+    const [updateCount, setUpdateCount] = useState(0);
+    // 首次挂载后仅自动滚动一次
+    const didInitialAutoScroll = ref(false);
+
+    const onInternalScroll = (e: Event) => {
+      const target = e.target as HTMLElement;
+      setScrollReachEnd(target.scrollHeight - Math.abs(target.scrollTop) - target.clientHeight <= TOLERANCE);
+    };
+
+    watch([updateCount, scrollReachEnd, listRef], () => {
+      if (props.autoScroll && unref(listRef) && unref(scrollReachEnd)) {
+        nextTick(() => {
+          console.log('自然滚动')
+          unref(listRef)!.scrollTo({ top: unref(listRef)!.scrollHeight });
+        });
+      }
+    });
+
+    watch(
+      () => unref(displayData).length,
+      (newLen, oldLen) => {
+        if (!props.autoScroll) return;
+        // 首次渲染：当有内容时滚到底部一次
+        if (!didInitialAutoScroll.value && newLen > 0) {
+          console.log('首次渲染滚动到底部-----')
+          scrollToBottom('auto');
+          didInitialAutoScroll.value = true;
+          return;
+        }
+        // 新增内容且当前在底部：继续粘底
+        if (oldLen !== undefined && newLen > (oldLen ?? 0) && unref(scrollReachEnd)) {
+            scrollToBottom();
+        }
+      },
+      { immediate: true },
+    );
+
+    const onBubbleUpdate = useEventCallback<void>(() => {
+      if (props.autoScroll) setUpdateCount(unref(updateCount) + 1);
+    });
+    const context = computed(() => ({ onUpdate: onBubbleUpdate }));
+
+    // 暴露控制方法
+    const abortTypingByKey = (key: string | number) => {
+      bubbleRefs.value[key]?.abortTyping?.();
+    };
+    // 通用：滚动到底部
+    const scrollToBottom = (behavior: ScrollBehavior = 'smooth') => {
+      nextTick(() => {
+        requestAnimationFrame(() => {
+          const el = unref(listRef);
+          if (el) {
+            el.scrollTo({ top: el.scrollHeight, behavior });
+            setScrollReachEnd(true);
+          }
+        })
+      });
+    };
+    // 对外暴露能力
+    expose({
+      nativeElement: listRef,
+      abortTypingByKey,
+      scrollTo: (info: any) => {
+        unref(listRef)?.scrollTo?.(info);
+      },
+      scrollToBottom,
+    });
+
+    return () => (
+      <BubbleContextProvider value={context.value}>
+        <div
+          {...domProps.value}
+          class={[
+            listPrefixCls,
+            props.rootClassName,
+            props.class,
+            { [`${listPrefixCls}-reach-end`]: unref(scrollReachEnd) },
+          ]}
+          style={props.style}
+          ref={listRef}
+          onScroll={onInternalScroll}
+        >
+          {unref(displayData).map(({ key, onTypingComplete: onTypingCompleteBubble, ...bubble }) => (
+            <Bubble
+              {...bubble}
+              avatar={slots.avatar ? () => slots.avatar?.({ item: { key, ...bubble } }) : bubble.avatar}
+              header={slots.header?.({ item: { key, ...bubble } }) ?? bubble.header}
+              footer={slots.footer?.({ item: { key, ...bubble } }) ?? bubble.footer}
+              loadingRender={slots.loading ? () => slots.loading({ item: { key, ...bubble } }) : bubble.loadingRender}
+              content={slots.message?.({ item: { key, ...bubble } }) ?? bubble.content}
+              key={key}
+              ref={(node: any) => {
+                if (node) {
+                  bubbleRefs.value[key] = node as BubbleRef;
+                } else {
+                  delete bubbleRefs.value[key];
+                }
+              }}
+              typing={unref(initialized) ? bubble.typing : false}
+              onTypingComplete={() => {
+                onTypingCompleteBubble?.();
+                onTypingComplete(key);
+              }}
+            />
+          ))}
+        </div>
+      </BubbleContextProvider>
+    );
+  },
+});
+</script>
+
+<style scoped lang="scss">
+@import './style.scss';
+</style>
diff --git a/src/components/xt-chat/xt-conversations/index.vue b/src/components/xt-chat/xt-conversations/index.vue
new file mode 100644
index 0000000..4b6bb33
--- /dev/null
+++ b/src/components/xt-chat/xt-conversations/index.vue
@@ -0,0 +1,180 @@
+<script lang="tsx">
+import { ref, defineComponent, computed } from 'vue';
+import { Input, Dropdown, Menu } from 'ant-design-vue';
+import type { MenuProps } from 'ant-design-vue';
+
+import type { VNode } from 'vue';
+import SvgIcon from '@/components/svg-icon/index.vue';
+import TextoverTips from '@/components/text-over-tips/index.vue';
+
+// 定义对话项类型
+interface ConversationItem {
+  key: string;
+  label: string | VNode;
+  icon?: string | VNode;
+  disabled?: boolean;
+  maxlength?: number;
+  [key: string]: any;
+}
+
+const DEFAULT_MENU_CONFIG = [
+  {
+    label: '置顶',
+    key: 'pin',
+    icon: () => <SvgIcon name="svg-pushpin" size={14} class="color-#737478 hover:color-#6D4CFE" />,
+  },
+  {
+    label: '重命名',
+    key: 'rename',
+    icon: <icon-edit size={14} class="color-#737478" />,
+  },
+  {
+    label: '删除',
+    key: 'delete',
+    icon: <icon-delete size={14} class="color-#F64B31" />,
+    status: 'danger',
+  },
+] as ConversationItem[];
+
+export default defineComponent({
+  name: 'Conversations',
+  props: {
+    dataSource: {
+      type: Array as () => ConversationItem[],
+      default: () => [],
+    },
+    activeKey: {
+      type: String,
+      default: '',
+    },
+    defaultActiveKey: {
+      type: String,
+      default: '',
+    },
+    menu: {
+      type: Array as () => ConversationItem[],
+      default: () => DEFAULT_MENU_CONFIG,
+    },
+    maxlength: {
+      type: Number,
+      default: 20,
+    },
+  },
+  emits: ['activeChange', 'menuClick', 'update:dataSource', 'update:modelValue', 'rename'],
+  setup(props, { emit, expose }) {
+    const activeKey = ref(props.activeKey || props.defaultActiveKey || '');
+    const localDataSource = ref<ConversationItem[]>([]);
+    const inputRef = ref(null);
+    const menuConfigs = ref<ConversationItem[]>(props.menu ?? DEFAULT_MENU_CONFIG);
+
+    // 处理选中变更
+    const handleActiveChange = (item: ConversationItem) => {
+      const { value } = item;
+      activeKey.value = value;
+      emit('update:modelValue', value);
+      emit('activeChange', item);
+    };
+    const onMenuItemClick = ({ menuInfo, item }) => {
+      const { key } = menuInfo;
+      emit('menuClick', { menuInfo, item });
+
+      switch (key) {
+        case 'rename':
+          item.editing = true;
+          nextTick(() => {
+            inputRef.value.focus();
+          });
+          break;
+      }
+    };
+
+    const changeItems = () => {
+      emit('update:dataSource', localDataSource.value);
+    };
+
+    watch(
+      () => props.dataSource,
+      (newItems) => {
+        if (newItems) {
+          localDataSource.value = cloneDeep(newItems);
+        }
+      },
+      { deep: true, immediate: true },
+    );
+
+    const renderItems = () => {
+      return localDataSource.value.map((item, index) => (
+        <div
+          class={`group flex justify-between cursor-pointer items-center p-8px h-40px rounded-8px hover:bg-#F2F3F5 ${
+            activeKey.value === item.key ? 'bg-#F2F3F5' : ''
+          }`}
+          onClick={() => handleActiveChange(item)}
+        >
+          {item.editing ? (
+            <Input
+              ref={inputRef}
+              v-model:value={item.label}
+              maxlength={props.maxlength}
+              onBlur={() => {
+                item.editing = false;
+                changeItems();
+                emit('rename', item);
+              }}
+              onPressEnter={() => {
+                item.editing = false;
+              }}
+              class="flex-1"
+            />
+          ) : (
+            <TextoverTips context={item.label} class="flex-1" placement="bottom" />
+          )}
+          <Dropdown
+            class="p-0"
+            overlayClassName="xt-conversations-dropdown"
+            placement="bottomRight"
+            v-slots={{
+              overlay: () => (
+                <Menu onClick={(menuInfo: MenuProps) => onMenuItemClick({ menuInfo, item })}>
+                  {menuConfigs.value.map((menuItem) => (
+                    <Menu.Item key={menuItem.key} icon={menuItem.icon} class={`${menuItem.status || ''}`}>
+                      {menuItem.label}
+                    </Menu.Item>
+                  ))}
+                </Menu>
+              ),
+            }}
+          >
+            <icon-more size={16} class="color-#737478 cursor-pointer ml-8px opacity-0 group-hover:opacity-100" />
+          </Dropdown>
+        </div>
+      ));
+    };
+
+    return () => <div className="xt-conversations-container">{renderItems()}</div>;
+  },
+});
+</script>
+
+<style scoped lang="scss">
+@import './style.scss';
+</style>
+<style lang="scss">
+.xt-conversations-dropdown {
+  .ant-dropdown-menu {
+    padding: 4px 0;
+    .ant-dropdown-menu-item {
+      padding: 0 12px;
+      min-width: 124px;
+      height: 36px;
+      display: flex;
+      align-items: center;
+      &:hover {
+        background: var(--BG-200, #f2f3f5);
+      }
+      &.danger {
+        color: var(--RED-600, #f64b31);
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/xt-chat/xt-conversations/style.scss b/src/components/xt-chat/xt-conversations/style.scss
new file mode 100644
index 0000000..46fb267
--- /dev/null
+++ b/src/components/xt-chat/xt-conversations/style.scss
@@ -0,0 +1,13 @@
+.xt-conversations-container {
+  width: 100%;
+  height: 100%;
+  // overflow-y: auto;
+  :deep(.overflow-text) {
+    color: var(--Text-1, #211f24);
+    font-family: $font-family-regular;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+  }
+}
diff --git a/src/config/settings.json b/src/config/settings.json
index ef20b23..cb5615b 100644
--- a/src/config/settings.json
+++ b/src/config/settings.json
@@ -8,7 +8,8 @@
   "menuCollapse": false,
   "footer": true,
   "themeColor": "#165DFF",
-  "menuWidth": 220,
+  "menuWidth": 138,
+  "menuWidthFold": 74,
   "globalSettings": false,
   "device": "desktop",
   "tabBar": false,
diff --git a/src/hooks/useEventCallback.ts b/src/hooks/useEventCallback.ts
new file mode 100644
index 0000000..1e21f73
--- /dev/null
+++ b/src/hooks/useEventCallback.ts
@@ -0,0 +1,15 @@
+/*
+ * @Author: RenXiaoDong
+ * @Date: 2025-08-20 23:12:14
+ */
+import { ref } from 'vue';
+
+export function useEventCallback<T>(handler?: (value: T) => void): (value: T) => void {
+  const callbackRef = ref(handler);
+  const fn = ref((value: T) => {
+    callbackRef.value && callbackRef.value(value);
+  });
+  callbackRef.value = handler;
+
+  return fn.value;
+}
\ No newline at end of file
diff --git a/src/hooks/useState.ts b/src/hooks/useState.ts
new file mode 100644
index 0000000..7393c43
--- /dev/null
+++ b/src/hooks/useState.ts
@@ -0,0 +1,21 @@
+/*
+ * @Author: RenXiaoDong
+ * @Date: 2025-08-20 23:14:22
+ */
+import type { Ref } from 'vue';
+import { ref } from 'vue';
+
+export default function useState<T, R = Ref<T>>(
+  defaultStateValue?: T | (() => T),
+): [R, (val: T) => void] {
+  const initValue: T =
+    typeof defaultStateValue === 'function' ? (defaultStateValue as any)() : defaultStateValue;
+
+  const innerValue = ref(initValue) as Ref<T>;
+
+  function triggerChange(newValue: T) {
+    innerValue.value = newValue;
+  }
+
+  return [innerValue as unknown as R, triggerChange];
+}
\ No newline at end of file
diff --git a/src/layouts/Basic.vue b/src/layouts/Basic.vue
index 7d179f6..e08ae80 100644
--- a/src/layouts/Basic.vue
+++ b/src/layouts/Basic.vue
@@ -1,5 +1,10 @@
 <script setup>
+import { Layout } from 'ant-design-vue';
+import Navbar from './components/navbar';
+import SiderBar from './components/siderBar';
+
 import { useAppStore } from '@/stores';
+import { useSidebarStore } from '@/stores/modules/side-bar';
 import { useResponsive } from '@/hooks';
 import JoinModal from '@/components/join-modal.vue';
 import { getQueryParam } from '@/utils/helper';
@@ -11,38 +16,33 @@ import { useRoute } from 'vue-router';
 const joinEnterpriseVisible = ref(false);
 const joinModalRef = ref(null);
 const appStore = useAppStore();
+const sidebarStore = useSidebarStore();
 const userStore = useUserStore();
 const router = useRouter();
 const route = useRoute();
 
 useResponsive(true);
-const navbarHeight = `72px`;
-const navbar = computed(() => appStore.navbar);
-const renderMenu = computed(() => appStore.menu && !appStore.topMenu);
-const hideMenu = computed(() => appStore.hideMenu);
 
-const menuWidth = computed(() => {
-  return appStore.menuCollapse ? 48 : appStore.menuWidth;
+const isHomeRoute = computed(() => {
+  return route.name === 'Home';
 });
-const collapsed = computed(() => {
-  return appStore.menuCollapse;
+const showInOnePage = computed(() => {
+  return isHomeRoute.value;
 });
-const showSidebar = computed(() => {
-  return !(route.meta && route.meta.hideSidebar);
-});
-const paddingStyle = computed(() => {
-  const paddingLeft =
-    showSidebar.value && renderMenu.value && !hideMenu.value ? { paddingLeft: `${menuWidth.value}px` } : {};
-  const paddingTop = navbar.value ? { paddingTop: navbarHeight } : {};
-  return { ...paddingLeft, ...paddingTop };
+
+const layoutPageClass = computed(() => {
+  let result = showInOnePage.value ? 'overflow-hidden' : '';
+  if (isHomeRoute.value) {
+    result += ' pb-8px pr-8px';
+  } else {
+    result += ' pb-24px pr-24px';
+  }
+  return result;
 });
 
 onMounted(() => {
   checkHasInviteCode();
 });
-const setCollapsed = (val) => {
-  appStore.updateSettings({ menuCollapse: val });
-};
 
 const checkHasInviteCode = () => {
   const inviteCode = getQueryParam('invite_code');
@@ -51,121 +51,95 @@ const checkHasInviteCode = () => {
     joinModalRef.value?.getEnterprise?.();
   }
 };
-const drawerVisible = ref(false);
-const drawerCancel = () => {
-  drawerVisible.value = false;
-};
-provide('toggleDrawerMenu', () => {
-  drawerVisible.value = !drawerVisible.value;
-});
 </script>
 
 <template>
-  <a-layout :class="['layout', { mobile: appStore.hideMenu }]" class="h-100vh flex flex-col w-full">
+  <Layout :class="['layout-wrap', { mobile: appStore.hideMenu }]" class="h-full flex flex-col w-full">
     <JoinModal v-model:visible="joinEnterpriseVisible" ref="joinModalRef" />
-    <div v-if="navbar" class="layout-navbar">
-      <base-navbar />
-    </div>
-    <a-layout>
-      <a-layout>
-        <a-layout-sider
-          v-if="renderMenu && showSidebar"
-          v-show="!hideMenu"
-          class="layout-sider"
-          breakpoint="xl"
-          :collapsed="collapsed"
-          :width="menuWidth"
-          :style="{ paddingTop: navbar ? '72px' : '' }"
-          collapsible
-          hide-trigger
-          @collapse="setCollapsed"
-        >
-          <div class="menu-wrapper">
-            <base-menu />
-          </div>
-        </a-layout-sider>
-        <a-drawer
-          v-if="hideMenu"
-          :visible="drawerVisible"
-          placement="left"
-          :footer="false"
-          mask-closable
-          :closable="false"
-          @cancel="drawerCancel"
-        >
-          <base-menu />
-        </a-drawer>
-        <a-layout class="layout-content" :style="paddingStyle">
-          <base-tab-bar v-if="appStore.tabBar" />
-          <a-layout-content class="px-5 py-5">
-            <!-- <base-breadcrumb /> -->
-            <layout-page />
-          </a-layout-content>
-        </a-layout>
-      </a-layout>
-    </a-layout>
-  </a-layout>
+    <Layout.Header class="layout-header-wrap">
+      <Navbar />
+    </Layout.Header>
+    <Layout class="flex app-content-layout">
+      <div class="flex flex-1 app-content-scroll">
+        <div class="app-content-inner">
+          <SiderBar />
+          <Layout
+            class="layout-content"
+            :style="{
+              width: `calc(100vw - ${sidebarStore.sidebarWidth}px)`,
+            }"
+          >
+            <Layout.Content :class="layoutPageClass" class="!min-h-initial w-full">
+              <layout-page />
+            </Layout.Content>
+          </Layout>
+        </div>
+      </div>
+    </Layout>
+  </Layout>
 </template>
 
 <style scoped lang="scss">
-$layout-max-width: 1100px;
-
-.layout-navbar {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 1000;
-  width: 100%;
-  height: $navbar-height;
-}
-.layout-sider {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 99;
-  height: 100%;
-  transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
-
-  &::after {
-    position: absolute;
-    top: 0;
-    right: -1px;
-    display: block;
-    width: 1px;
+.layout-wrap {
+  font-family: inherit;
+  background: transparent;
+  min-width: $layout-min-width;
+  .layout-header-wrap {
+    background: transparent;
+    height: $navbar-height;
+    line-height: $navbar-height;
+    padding-inline: inherit;
+    color: inherit;
+    // position: fixed;
+    // top: 0;
+    // left: 0;
+    // z-index: 1000;
+    width: 100%;
+    min-width: $layout-min-width;
+  }
+  .app-content-layout {
+    width: 100%;
     height: 100%;
-    background-color: var(--color-border);
-    content: '';
-  }
-  > :deep(.arco-layout-sider-children) {
-    overflow-y: hidden;
-  }
-}
-.menu-wrapper {
-  height: 100%;
-  overflow: auto;
-  overflow-x: hidden;
-
-  :deep(.arco-menu) {
-    ::-webkit-scrollbar {
-      width: 12px;
-      height: 4px;
+    background: transparent;
+    min-height: calc(100vh - $navbar-height);
+    .app-content-scroll {
+      min-height: calc(100vh - $navbar-height);
+      height: calc(100vh - $navbar-height);
+      overflow-y: auto;
+      overflow-x: auto;
+      .app-content-inner {
+        width: 100%;
+        height: calc(100vh - $navbar-height);
+        overflow: hidden;
+        display: flex;
+      }
     }
-    ::-webkit-scrollbar-thumb {
-      border: 4px solid transparent;
-      background-clip: padding-box;
-      border-radius: 7px;
-      background-color: var(--color-text-4);
+    :deep(.ant-layout-sider) {
+      background: none;
+      box-shadow: none;
+      // padding-top: $navbar-height;
+      padding-bottom: 0;
+      // position: fixed;
+      // top: 0;
+      // left: 0;
+      // z-index: 999;
+      height: 100%;
+      transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
+      .ant-layout-sider-trigger {
+        display: none;
+      }
+      .ant-layout-sider-children {
+        overflow: hidden;
+      }
     }
-    ::-webkit-scrollbar-thumb:hover {
-      background-color: var(--color-text-3);
+    .layout-content {
+      background: transparent;
+      transition: padding 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
+      flex: 1;
+      height: 100%;
+      overflow-y: auto;
+      overflow-x: hidden;
     }
   }
 }
-.layout-content {
-  min-width: 1366px;
-  height: 100%;
-  overflow-y: hidden;
-  background-color: $color-background;
-  transition: padding 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
-}
 </style>
diff --git a/src/layouts/Page.vue b/src/layouts/Page.vue
index c17a8a5..7b36d06 100644
--- a/src/layouts/Page.vue
+++ b/src/layouts/Page.vue
@@ -8,7 +8,7 @@ const route = useRoute();
 const routerKey = computed(() => {
   return route.path + Math.random();
 });
-const hideFooter = computed(() => route.meta?.hideFooter);
+// const hideFooter = computed(() => route.meta?.hideFooter);
 /*** - end */
 </script>
 
@@ -20,10 +20,10 @@ const hideFooter = computed(() => route.meta?.hideFooter);
         <component :is="Component" :key="route.fullPath" />
       </keep-alive>
     </transition>
-    <view class="footer" v-if="!hideFooter">
+    <!-- <view class="footer" v-if="!hideFooter">
       <view>闽公网安备 352018502850842号 闽ICP备20250520582号 © 2025小题科技，All Rights Reserved.</view>
       <view>* 数据通过公开渠道获取，灵机进行统计分析</view>
-    </view>
+    </view> -->
   </router-view>
 </template>
 
diff --git a/src/components/_base/exit-account-modal/img/icon1.png b/src/layouts/components/navbar/components/exit-account-modal/img/icon1.png
similarity index 100%
rename from src/components/_base/exit-account-modal/img/icon1.png
rename to src/layouts/components/navbar/components/exit-account-modal/img/icon1.png
diff --git a/src/components/_base/exit-account-modal/index.vue b/src/layouts/components/navbar/components/exit-account-modal/index.vue
similarity index 100%
rename from src/components/_base/exit-account-modal/index.vue
rename to src/layouts/components/navbar/components/exit-account-modal/index.vue
diff --git a/src/layouts/components/navbar/components/middle-side/index.vue b/src/layouts/components/navbar/components/middle-side/index.vue
new file mode 100644
index 0000000..32b7782
--- /dev/null
+++ b/src/layouts/components/navbar/components/middle-side/index.vue
@@ -0,0 +1,40 @@
+<script lang="jsx">
+import { Input } from 'ant-design-vue';
+// import { handleUserHome } from '@/utils/user.ts';
+import { useChatStore } from '@/stores/modules/chat';
+
+export default {
+  setup(props, { emit, expose }) {
+    const chatStore = useChatStore();
+    const keyWord = ref('');
+
+    const handleSearch = () => {
+      chatStore.setSearchValue(keyWord.value);
+      chatStore.onCreateSession();
+      keyWord.value = '';
+    };
+    return () => (
+      <div class="middle-wrap h-100% flex items-center justify-center">
+        <Input
+          v-model:value={keyWord.value}
+          onPressEnter={handleSearch}
+          size="large"
+          class="sender-input-wrap"
+          placeholder="随时告诉我你想做什么，比如查数据、发任务、写内容，我会立刻帮你完成。"
+          v-slots={{
+            suffix: () => (
+              <div class=" rounded-16px w-32px h-32px flex justify-center items-center icon " onClick={handleSearch}>
+                <icon-arrow-right size={20} class="color-#6D4CFE" />
+              </div>
+            ),
+          }}
+        />
+      </div>
+    );
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import './style.scss';
+</style>
diff --git a/src/layouts/components/navbar/components/middle-side/style.scss b/src/layouts/components/navbar/components/middle-side/style.scss
new file mode 100644
index 0000000..c2887a7
--- /dev/null
+++ b/src/layouts/components/navbar/components/middle-side/style.scss
@@ -0,0 +1,59 @@
+.middle-wrap {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  :deep(.ant-input-affix-wrapper) {
+    width: 560px;
+    height: 36px;
+    padding: 0 2px 0 16px;
+    border-radius: 50px;
+    background: rgba(255, 255, 255, 0.6);
+    backdrop-filter: blur(8px);
+    border-color: #fff;
+    box-shadow: none;
+    transition: all 0.3s;
+    display: flex;
+    align-items: center;
+    &.ant-input-affix-wrapper-focused {
+      border-color: #6d4cfe;
+      caret-color: #6d4cfe;
+    }
+    &:hover {
+      border-color: #6d4cfe;
+    }
+    .ant-input-suffix {
+      margin-inline-start: 0;
+    }
+    .ant-input {
+      padding-right: 16px;
+      border: none !important;
+      background-color: transparent;
+      box-shadow: none;
+      font-family: $font-family-regular;
+      color: #211f24;
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px;
+      &::placeholder {
+        color: #939499;
+      }
+
+      &:focus-within {
+        &::after {
+          border-width: 1px;
+        }
+      }
+    }
+    .icon {
+      cursor: pointer;
+      background: #f0edff;
+      transition: background 0.3s;
+      &:hover {
+        background: linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--Brand-1, #f0edff);
+      }
+    }
+  }
+}
diff --git a/src/components/_base/navbar/components/right-side/index.vue b/src/layouts/components/navbar/components/right-side/index.vue
similarity index 90%
rename from src/components/_base/navbar/components/right-side/index.vue
rename to src/layouts/components/navbar/components/right-side/index.vue
index 0e9f5cc..6e2bc12 100644
--- a/src/components/_base/navbar/components/right-side/index.vue
+++ b/src/layouts/components/navbar/components/right-side/index.vue
@@ -1,19 +1,14 @@
 <template>
   <div class="right-wrap">
-    <!-- 灵机空间入口 -->
-    <div class="agent-entry" :class="isAgentRoute ? 'agent' : ''" @click="handleAgentClick"></div>
-
     <!-- 任务中心 -->
-    <div class="relative mx-16px" @click="setUnread">
-      <SvgIcon
-        name="svg-taskCenter"
-        size="16"
-        class="cursor-pointer color-#737478 hover:color-#6D4CFE"
-        @click="openDownloadCenter"
-      />
-      <div class="w-4px h-4px rounded-50% bg-#F64B31 absolute top-1px right-1px" v-if="hasUnreadInfo"></div>
+    <div class="relative p-6px rounded-30px flex items-center justify-center task-icon" @click="setUnread">
+      <SvgIcon name="svg-taskCenter" size="20" class="color-#737478" @click="openDownloadCenter" />
+      <div class="w-6px h-6px rounded-50% bg-#F64B31 absolute top-6px right-6px" v-if="hasUnreadInfo"></div>
     </div>
 
+    <!-- 灵机空间入口 -->
+    <div class="agent-entry mx-16px" :class="isAgentRoute ? 'agent' : ''" @click="handleAgentClick"></div>
+
     <!-- 头像设置 -->
     <a-dropdown trigger="click" class="layout-avatar-dropdown">
       <a-avatar class="cursor-pointer" :size="32">
@@ -80,8 +75,9 @@ import router from '@/router';
 import { useEnterpriseStore } from '@/stores/modules/enterprise';
 import { useSidebarStore } from '@/stores/modules/side-bar';
 import { useUserStore } from '@/stores';
+import { handleUserHome } from '@/utils/user';
 
-import ExitAccountModal from '@/components/_base/exit-account-modal';
+import ExitAccountModal from '../exit-account-modal';
 import DownloadCenterModal from '../task-center-modal';
 
 import icon1 from '@/assets/option.svg';
@@ -131,7 +127,7 @@ const setUnread = () => {
   }
 };
 const handleAgentClick = () => {
-  router.push({ name: props.isAgentRoute ? 'Home' : 'AgentIndex' });
+  props.isAgentRoute ? handleUserHome() : router.push({ name: 'AgentIndex' });
 };
 </script>
 
diff --git a/src/components/_base/navbar/components/right-side/style.scss b/src/layouts/components/navbar/components/right-side/style.scss
similarity index 80%
rename from src/components/_base/navbar/components/right-side/style.scss
rename to src/layouts/components/navbar/components/right-side/style.scss
index 4f926e2..cb690fe 100644
--- a/src/components/_base/navbar/components/right-side/style.scss
+++ b/src/layouts/components/navbar/components/right-side/style.scss
@@ -1,6 +1,5 @@
 .right-wrap {
   display: flex;
-  padding-right: 20px;
   list-style: none;
   align-items: center;
   .agent-entry {
@@ -24,4 +23,12 @@
       }
     }
   }
+  .task-icon {
+    cursor: pointer;
+    background: rgba(255, 255, 255, 0.6);
+    transition: background 0.2s;
+    &:hover {
+      background: #fff;
+    }
+  }
 }
diff --git a/src/components/_base/navbar/components/task-center-modal/components/export-task/constants.ts b/src/layouts/components/navbar/components/task-center-modal/components/export-task/constants.ts
similarity index 100%
rename from src/components/_base/navbar/components/task-center-modal/components/export-task/constants.ts
rename to src/layouts/components/navbar/components/task-center-modal/components/export-task/constants.ts
diff --git a/src/components/_base/navbar/components/task-center-modal/components/export-task/delete-task-modal.vue b/src/layouts/components/navbar/components/task-center-modal/components/export-task/delete-task-modal.vue
similarity index 100%
rename from src/components/_base/navbar/components/task-center-modal/components/export-task/delete-task-modal.vue
rename to src/layouts/components/navbar/components/task-center-modal/components/export-task/delete-task-modal.vue
diff --git a/src/components/_base/navbar/components/task-center-modal/components/export-task/index.vue b/src/layouts/components/navbar/components/task-center-modal/components/export-task/index.vue
similarity index 100%
rename from src/components/_base/navbar/components/task-center-modal/components/export-task/index.vue
rename to src/layouts/components/navbar/components/task-center-modal/components/export-task/index.vue
diff --git a/src/components/_base/navbar/components/task-center-modal/components/export-task/style.scss b/src/layouts/components/navbar/components/task-center-modal/components/export-task/style.scss
similarity index 100%
rename from src/components/_base/navbar/components/task-center-modal/components/export-task/style.scss
rename to src/layouts/components/navbar/components/task-center-modal/components/export-task/style.scss
diff --git a/src/components/_base/navbar/components/task-center-modal/components/import-task/constants.ts b/src/layouts/components/navbar/components/task-center-modal/components/import-task/constants.ts
similarity index 100%
rename from src/components/_base/navbar/components/task-center-modal/components/import-task/constants.ts
rename to src/layouts/components/navbar/components/task-center-modal/components/import-task/constants.ts
diff --git a/src/components/_base/navbar/components/task-center-modal/components/import-task/delete-task-modal.vue b/src/layouts/components/navbar/components/task-center-modal/components/import-task/delete-task-modal.vue
similarity index 100%
rename from src/components/_base/navbar/components/task-center-modal/components/import-task/delete-task-modal.vue
rename to src/layouts/components/navbar/components/task-center-modal/components/import-task/delete-task-modal.vue
diff --git a/src/components/_base/navbar/components/task-center-modal/components/import-task/index.vue b/src/layouts/components/navbar/components/task-center-modal/components/import-task/index.vue
similarity index 100%
rename from src/components/_base/navbar/components/task-center-modal/components/import-task/index.vue
rename to src/layouts/components/navbar/components/task-center-modal/components/import-task/index.vue
diff --git a/src/components/_base/navbar/components/task-center-modal/components/import-task/style.scss b/src/layouts/components/navbar/components/task-center-modal/components/import-task/style.scss
similarity index 100%
rename from src/components/_base/navbar/components/task-center-modal/components/import-task/style.scss
rename to src/layouts/components/navbar/components/task-center-modal/components/import-task/style.scss
diff --git a/src/components/_base/navbar/components/task-center-modal/constants.ts b/src/layouts/components/navbar/components/task-center-modal/constants.ts
similarity index 100%
rename from src/components/_base/navbar/components/task-center-modal/constants.ts
rename to src/layouts/components/navbar/components/task-center-modal/constants.ts
diff --git a/src/components/_base/navbar/components/task-center-modal/index.vue b/src/layouts/components/navbar/components/task-center-modal/index.vue
similarity index 100%
rename from src/components/_base/navbar/components/task-center-modal/index.vue
rename to src/layouts/components/navbar/components/task-center-modal/index.vue
diff --git a/src/components/_base/navbar/components/task-center-modal/style.scss b/src/layouts/components/navbar/components/task-center-modal/style.scss
similarity index 100%
rename from src/components/_base/navbar/components/task-center-modal/style.scss
rename to src/layouts/components/navbar/components/task-center-modal/style.scss
diff --git a/src/layouts/components/navbar/index.vue b/src/layouts/components/navbar/index.vue
new file mode 100644
index 0000000..ddc2144
--- /dev/null
+++ b/src/layouts/components/navbar/index.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="navbar-wrap px-24px">
+    <div class="w-full h-full relative flex justify-between">
+
+    <div class="left-wrap flex items-center cursor-pointer" @click="handleUserHome">
+      <img src="@/assets/img/icon-logo.png" alt="" width="96" height="24" />
+    </div>
+    <!-- <div class="flex-1"> -->
+      <MiddleSide v-if="!isHomeRoute" />
+    <!-- </div> -->
+    <RightSide :isAgentRoute="isAgentRoute" v-if="userStore.isLogin" />
+  </div>
+
+  </div>
+</template>
+
+<script setup>
+import MiddleSide from './components/middle-side';
+import RightSide from './components/right-side';
+
+import { useUserStore } from '@/stores';
+import { handleUserHome } from '@/utils/user.ts';
+import router from '@/router';
+
+const route = useRoute();
+const userStore = useUserStore();
+
+const isAgentRoute = computed(() => {
+  return route.meta?.isAgentRoute;
+});
+
+const isHomeRoute = computed(() => {
+  return route.name === 'Home';
+});
+</script>
+<style scoped lang="scss">
+.navbar-wrap {
+  position: relative;
+  height: 100%;
+  // &::before {
+  //   width: 100%;
+  //   height: 100%;
+  //   background: url('@/assets/img/icon-app-header-bg.png') center top no-repeat !important;
+  //   background-size: cover !important;
+  //   bottom: 0;
+  //   content: '';
+  //   display: block;
+  //   left: 0;
+  //   position: absolute;
+  //   right: 0;
+  //   top: 0;
+  //   z-index: -998;
+  // }
+
+  // background-color: var(--color-bg-2);
+  // border-bottom: 1px solid var(--color-border);
+  .left-wrap {
+    display: flex;
+    align-items: center;
+  }
+  .arco-dropdown-option-suffix {
+    display: none;
+  }
+  .enterprises-doption {
+    .arco-dropdown-option-content {
+      padding: 0 !important;
+      border-radius: 8px;
+    }
+    &:not(.arco-dropdown-option-disabled):hover {
+      background-color: transparent;
+      .arco-dropdown-option-content {
+        background: var(--BG-200, #f2f3f5);
+      }
+    }
+  }
+}
+</style>
diff --git a/src/layouts/components/siderBar/index.vue b/src/layouts/components/siderBar/index.vue
new file mode 100644
index 0000000..8a43904
--- /dev/null
+++ b/src/layouts/components/siderBar/index.vue
@@ -0,0 +1,238 @@
+<script lang="tsx">
+import { Dropdown, Menu, Layout } from 'ant-design-vue';
+import type { RouteMeta, RouteRecordRaw } from 'vue-router';
+import { useRoute } from 'vue-router';
+import SvgIcon from '@/components/svg-icon/index.vue';
+
+import { useAppStore } from '@/stores';
+import { useSidebarStore } from '@/stores/modules/side-bar';
+import { MENU_LIST } from './menu-list';
+import type { typeMenuItem } from './menu-list';
+import { handleUserHome } from '@/utils/user';
+
+import icon1 from '@/assets/img/agent/icon1.png';
+
+export default defineComponent({
+  emit: ['collapse'],
+  setup() {
+    // const appStore = useAppStore();
+    const router = useRouter();
+    const route = useRoute();
+
+    const sidebarStore = useSidebarStore();
+    const appStore = useAppStore();
+
+    const currentMenuList = ref<typeMenuItem[]>([]);
+    const currentMenuModInfo = ref<typeMenuItem>({});
+
+    const currentRouteName = computed(() => route.name as string);
+    const currentRouteGroup = computed(() => route.meta?.group ?? 'GroupMain');
+    const isHomeRoute = computed(() => currentRouteName.value === 'Home');
+    const showAiSearch = computed(() => !route.meta?.hideAiSearch);
+
+    const collapsed = computed(() => {
+      return sidebarStore.menuCollapse;
+    });
+
+    const setCollapsed = (val) => {
+      appStore.updateSettings({ menuCollapse: val });
+    };
+    const getCollapseMenuKey = (routeName: string): string => {
+      let _key: string;
+      for (let i = 0; i < currentMenuList.value.length; i++) {
+        const menuItem = currentMenuList.value[i];
+
+        // 检查是否有list子级
+        if (menuItem.children?.length > 0) {
+          for (let j = 0; j < menuItem.children.length; j++) {
+            const subMenuItem = menuItem.children[j];
+            if (subMenuItem.activeMatch?.includes(routeName)) {
+              currentMenuModInfo.value = menuItem;
+              _key = menuItem.key;
+              break;
+            }
+          }
+        } else {
+          // 没有list子级，直接检查当前项
+          if (menuItem.routeName === routeName) {
+            currentMenuModInfo.value = menuItem;
+            _key = menuItem.key;
+            break;
+          }
+        }
+      }
+      return _key;
+    };
+    const onClickItem = (item: typeMenuItem) => {
+      let targetRoute = item.routeName;
+      if (item.children?.length) {
+        targetRoute = item.children[0].routeName;
+      }
+      router.push({ name: targetRoute });
+    };
+    const renderMenuItem = (item: typeMenuItem, hideLabel = false) => {
+      const getMenuItemClass = () => {
+        const hasChildren = item.children?.length;
+        let target = !hasChildren ? 'sub-menu-item ' : '';
+        if (hasChildren) {
+          target += getCollapseMenuKey(currentRouteName.value) === item.key ? 'active' : '';
+        } else {
+          target += item.activeMatch?.includes(currentRouteName.value) ? 'active' : '';
+        }
+        return target;
+      };
+
+      return (
+        <Menu.Item class={`menu-item ${getMenuItemClass()}`} onClick={() => onClickItem(item)}>
+          {(() => {
+            const isActive = getMenuItemClass() === 'active';
+            const iconName = Array.isArray(item.icon)
+              ? isActive
+                ? item.icon[1] ?? item.icon[0]
+                : item.icon[0]
+              : item.icon;
+            return <SvgIcon size="18" name={iconName as any} alt="状态图标" class="color-#55585F flex-shrink-0" />;
+          })()}
+          {!hideLabel && <span class="cts label">{item.label}</span>}
+        </Menu.Item>
+      );
+    };
+    const renderMenuList = () => {
+      return currentMenuList.value.map((item) => {
+        if (!item.children) {
+          return renderMenuItem(item, collapsed.value);
+        }
+        return (
+          <Dropdown
+            overlayClassName="layout-sider-dropdown-xt"
+            placement="rightTop"
+            align={{ offset: [8, 0] }}
+            v-slots={{
+              overlay: () => {
+                return (
+                  <div class="p-8px bg-#fff container w-139px">
+                    {item.children.map((child) => {
+                      return renderMenuItem(child);
+                    })}
+                  </div>
+                );
+              },
+            }}
+          >
+            {renderMenuItem(item, collapsed.value)}
+          </Dropdown>
+        );
+      });
+    };
+
+    const initMenuList = () => {
+      const groupMenuList = MENU_LIST?.[currentRouteGroup.value as string] ?? [];
+      currentMenuList.value = cloneDeep(groupMenuList);
+      sidebarStore.setCurrentMenuList(groupMenuList);
+    };
+    const initCollapse = () => {
+      getCollapseMenuKey(currentRouteName.value);
+
+      if (currentMenuModInfo.value) {
+        sidebarStore.setActiveMenuKey(currentMenuModInfo.value?.key);
+      }
+    };
+    const init = () => {
+      // 初始化菜单数据
+      initMenuList();
+
+      // 初始化菜单展开项
+      initCollapse();
+    };
+
+    watch(
+      () => currentRouteGroup.value,
+      () => {
+        init();
+      },
+      { immediate: false, deep: true },
+    );
+
+    onMounted(() => {
+      init();
+    });
+
+    return () => (
+      <Layout.Sider
+        v-model={collapsed.value}
+        width={sidebarStore.sidebarWidth}
+        collapsible
+        trigger
+        onCollapse={setCollapsed}
+      >
+        <Menu class={`siderBar-wrap w-full flex flex-col px-16px pt-16px ${collapsed.value ? 'menu-fold' : ''}`}>
+          {showAiSearch.value && (
+            <>
+              <Menu.Item class={`menu-item !mb-0 ${isHomeRoute.value ? 'active' : ''}`} onClick={handleUserHome}>
+                <img src={icon1} width={18} height={18} />
+                {!collapsed.value && <span class="cts label">开始工作</span>}
+              </Menu.Item>
+              <div class="line w-full h-1px bg-#211F24 my-12px"></div>
+            </>
+          )}
+          <div class="flex flex-col flex-1">
+            <div class="menu-list flex-1">{renderMenuList()}</div>
+          </div>
+        </Menu>
+        <div
+          class={`bg-#F6F5FC flex items-center absolute bottom-0 w-full pt-8px px-16px pb-16px right-0 ${
+            collapsed.value ? 'justify-center' : 'justify-end'
+          }`}
+        >
+          <div
+            class="flex fold-btn items-center cursor-pointer h-22px "
+            onClick={() => {
+              sidebarStore.setMenuCollapse();
+            }}
+          >
+            {collapsed.value ? (
+              <icon-menu-unfold size={16} class="color-#55585F icon mr-4px" />
+            ) : (
+              <icon-menu-fold size={16} class="color-#55585F icon mr-4px" />
+            )}
+            {!collapsed.value && <span class="cts !color-#55585F flex-shrink-0">收起</span>}
+          </div>
+        </div>
+      </Layout.Sider>
+    );
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import './style.scss';
+</style>
+<style lang="scss">
+@import './style.scss';
+.layout-sider-dropdown-xt {
+  .container {
+    border-radius: 8px;
+    background: var(--BG-White, #fff);
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
+    .menu-item {
+      @include menu-item;
+      padding: 8px;
+      &:hover {
+        background-color: rgba(109, 76, 254, 0.08) !important;
+        color: #6d4cfe !important;
+        .svg-icon {
+          color: #6d4cfe !important;
+        }
+      }
+      // &.active {
+      //   background-color: rgba(109, 76, 254, 0.08);
+      //   color: #6d4cfe;
+      //   .label,
+      //   .svg-icon {
+      //     color: #6d4cfe;
+      //   }
+      // }
+    }
+  }
+}
+</style>
diff --git a/src/layouts/components/siderBar/menu-list.ts b/src/layouts/components/siderBar/menu-list.ts
new file mode 100644
index 0000000..a94e3ed
--- /dev/null
+++ b/src/layouts/components/siderBar/menu-list.ts
@@ -0,0 +1,177 @@
+export const GROUP_WRITER_NAME = 'GroupWriterMaterialCenter';
+export const GROUP_MANAGEMENT_NAME = 'GroupManagement';
+export const GROUP_MAIN_NAME = 'GroupMain';
+
+export interface typeMenuItem {
+  key?: string; // 菜单组key
+  label?: string; // 菜单组标题
+  icon?: string | [string, string]; // 菜单组图标
+  routeName?: string; // 路由名称
+  requireLogin?: boolean; // 是否需要登录
+  requireAuth?: boolean; // 是否需要权限验证
+  activeMatch?: string[]; // 菜单高亮路由组匹配
+  children?: typeMenuItem[]; // 子菜单列表
+}
+
+export const MENU_LIST = <Record<string, typeMenuItem[]>>{
+  [GROUP_MAIN_NAME]: [
+    {
+      key: 'ModAccountManage',
+      label: '账号管理',
+      icon: ['svg-accountManage', 'svg-accountManage-active'],
+      children: [
+        {
+          key: 'ModMediaAccountManage',
+          icon: 'svg-mediaAccountManage',
+          label: '账号管理',
+          routeName: 'MediaAccountAccountManagement',
+          requireLogin: true,
+          activeMatch: ['MediaAccountAccountManagement'],
+        },
+        {
+          key: 'ModMediaAccountData',
+          icon: 'svg-mediaAccountData',
+          label: '账号数据',
+          routeName: 'MediaAccountAccountDashboard',
+          requireLogin: true,
+          activeMatch: ['MediaAccountAccountDashboard', 'MediaAccountAccountDetails'],
+        },
+        // {
+        //   key: 'ModPutAccountManage',
+        //   icon: 'svg-putAccountManage',
+        //   label: '账户管理',
+        //   routeName: 'PutAccountAccountManagement',
+        //   requireLogin: true,
+        //   activeMatch: ['PutAccountAccountManagement'],
+        // },
+        // {
+        //   key: 'ModPutAccountData',
+        //   icon: 'svg-putAccountData',
+        //   label: '账户数据',
+        //   routeName: 'PutAccountAccountData',
+        //   requireLogin: true,
+        //   activeMatch: ['PutAccountAccountData'],
+        // },
+        // {
+        //   key: 'ModPutAccountAccountDashboard',
+        //   icon: 'svg-putAccountAccountDashboard',
+        //   label: '投放表现分析',
+        //   routeName: 'PutAccountAccountDashboard',
+        //   requireLogin: true,
+        //   activeMatch: ['PutAccountAccountDashboard'],
+        // },
+        // {
+        //   key: 'ModInvestmentGuidelines',
+        //   icon: 'svg-putAccountInvestmentGuidelines',
+        //   label: '投放指南',
+        //   routeName: 'PutAccountInvestmentGuidelines',
+        //   requireLogin: true,
+        //   activeMatch: ['PutAccountInvestmentGuidelines', 'PutAccountInvestmentGuidelinesDetail'],
+        // },
+      ],
+    },
+    {
+      key: 'ModMaterialCenter',
+      label: '素材中心',
+      icon: ['svg-materialCenter', 'svg-materialCenter-active'],
+      children: [
+        {
+          key: 'ModMaterialCenterFinishedProductsWareHouse',
+          icon: 'svg-finishProductsWareHouse',
+          label: '成品库',
+          routeName: 'MaterialCenterFinishedProducts',
+          requireLogin: true,
+          activeMatch: [
+            'MaterialCenterFinishedProducts',
+            'ManuscriptUpload',
+            'ManuscriptEdit',
+            'ManuscriptDetail',
+            'ManuscriptCheckListDetail',
+            'ManuscriptCheck',
+          ],
+        },
+        {
+          key: 'ModMaterialCenterRawMaterialStorage',
+          icon: 'svg-rawMaterialStorage',
+          label: '原料库',
+          routeName: 'MaterialCenterRawMaterial',
+          requireLogin: true,
+          activeMatch: ['MaterialCenterRawMaterial'],
+        },
+      ],
+    },
+    {
+      key: 'ModTaskManage',
+      label: '任务管理',
+      icon: ['svg-taskManage', 'svg-taskManage-active'],
+      routeName: 'TaskManagement',
+    },
+  ],
+  [GROUP_WRITER_NAME]: [
+    {
+      key: 'ModWriterMaterialCenter',
+      label: '素材中心',
+      icon: 'svg-materialCenter',
+      children: [
+        {
+          key: 'ModWriterMaterialCenterFinishedProductsWareHouse',
+          icon: 'svg-finishProductsWareHouse',
+          label: '成品库',
+          routeName: 'WriterMaterialCenterFinishedProducts',
+          requireLogin: true,
+          activeMatch: [
+            'WriterMaterialCenterFinishedProducts',
+            'WriterManuscriptUpload',
+            'WriterManuscriptEdit',
+            'WriterManuscriptDetail',
+            'WriterManuscriptCheckListDetail',
+            'WriterManuscriptCheck',
+          ],
+        },
+        // {
+        //   key: 'ModWriterMaterialCenterRawMaterialStorage',
+        //   icon: 'svg-rawMaterialStorage',
+        //   label: '原料库',
+        //   routeName: 'WriterMaterialCenterRawMaterial',
+        //   requireLogin: true,
+        //   activeMatch: ['WriterMaterialCenterRawMaterial'],
+        // },
+      ],
+    },
+  ],
+  [GROUP_MANAGEMENT_NAME]:[ 
+    {
+      key: 'ModManagement',
+      label: '管理中心',
+      icon: ['svg-management', 'svg-management-active'],
+      children: [
+        {
+          key: 'ModManagementPerson',
+          icon: 'svg-managementPerson',
+          label: '个人信息',
+          routeName: 'ManagementPerson',
+          requireLogin: true,
+          activeMatch: [
+            'ManagementPerson',
+          ],
+        },
+        {
+          key: 'ModManagementEnterprise',
+          icon: 'svg-managementEnterprise',
+          label: '企业信息',
+          routeName: 'ManagementEnterprise',
+          requireLogin: true,
+          activeMatch: ['ManagementEnterprise'],
+        },
+        {
+          key: 'ModManagementAccount',
+          icon: 'svg-managementAccount',
+          label: '账号管理',
+          routeName: 'ManagementAccount',
+          requireLogin: true,
+          activeMatch: ['ManagementAccount'],
+        },
+      ],
+    }
+  ]
+};
diff --git a/src/layouts/components/siderBar/style.scss b/src/layouts/components/siderBar/style.scss
new file mode 100644
index 0000000..0de0bb1
--- /dev/null
+++ b/src/layouts/components/siderBar/style.scss
@@ -0,0 +1,82 @@
+@mixin menu-item {
+  border-radius: 8px;
+  backdrop-filter: blur(100px);
+  display: flex;
+  align-items: center;
+  // justify-content: center;
+  padding: 8px 12px;
+  margin: 0;
+  cursor: pointer;
+  width: 100%;
+  .label {
+    transition: all 0.3s;
+    margin-left: 8px;
+    flex: auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .ant-menu-title-content {
+    display: flex;
+    align-items: center;
+  }
+  &:hover {
+    background-color: rgba(109, 76, 254, 0.08) !important;
+    color: #6d4cfe !important;
+    .label,
+    .svg-icon {
+      color: #6d4cfe !important;
+    }
+  }
+  &:not(.sub-menu-item) {
+    &.active {
+      background-color: #fff !important;
+      .label,
+      .svg-icon {
+        color: #6d4cfe !important;
+      }
+    }
+  }
+  &:not(:last-child) {
+    margin-bottom: 12px;
+  }
+  &.ant-menu-item-selected {
+    background-color: transparent;
+  }
+}
+.ant-layout-sider {
+  .ant-layout-sider-children {
+    position: relative;
+    // padding: 16px 0;
+    .siderBar-wrap {
+      background: transparent !important;
+      border: none !important;
+      color: inherit;
+      .cts {
+        color: #211f24;
+        font-family: $font-family-regular;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 22px;
+      }
+      .menu-item {
+        @include menu-item;
+      }
+      .line {
+        opacity: 0.06;
+      }
+      
+    }
+    .fold-btn {
+      &:hover {
+        .cts,
+        .icon {
+          color: #6d4cfe !important;
+        }
+      }
+    }
+  }
+}
+
+
diff --git a/src/layouts/components/siderBar/use-menu-tree.ts b/src/layouts/components/siderBar/use-menu-tree.ts
new file mode 100644
index 0000000..b6d44a5
--- /dev/null
+++ b/src/layouts/components/siderBar/use-menu-tree.ts
@@ -0,0 +1,62 @@
+// /*
+//  * @Author: RenXiaoDong
+//  * @Date: 2025-06-19 01:45:53
+//  */
+// import type { RouteRecordRaw, RouteRecordNormalized } from 'vue-router';
+// import { useRouter } from 'vue-router';
+// import { useSidebarStore } from '@/stores/modules/side-bar';
+
+// export default function useMenuTree() {
+//   const router  = useRouter();
+//   const appRoutes = router.options?.routes ?? [];
+//   const sidebarStore = useSidebarStore();
+//   const appRoute = computed(() => {
+//     const _filterRoutes = appRoutes.filter((v) => v.meta?.id === sidebarStore.activeMenuKey);
+//     return _filterRoutes;
+//   });
+//   const menuTree = computed(() => {
+//     const copyRouter = cloneDeep(appRoute.value) as RouteRecordNormalized[];
+//     copyRouter.sort((a: RouteRecordNormalized, b: RouteRecordNormalized) => {
+//       return (a.meta.order || 0) - (b.meta.order || 0);
+//     });
+//     function travel(_routes: RouteRecordRaw[], layer: number) {
+//       if (!_routes) return null;
+
+//       const collector: any = _routes.map((element) => {
+//         // leaf node
+//         if (element.meta?.hideChildrenInMenu || !element.children) {
+//           element.children = [];
+//           return element;
+//         }
+
+//         // route filter hideInMenu true
+//         element.children = element.children.filter((x) => x.meta?.hideInMenu !== true);
+
+//         // Associated child node
+//         const subItem = travel(element.children, layer + 1);
+
+//         if (subItem.length) {
+//           element.children = subItem;
+//           return element;
+//         }
+//         // the else logic
+//         if (layer > 1) {
+//           element.children = subItem;
+//           return element;
+//         }
+
+//         if (element.meta?.hideInMenu === false) {
+//           return element;
+//         }
+
+//         return null;
+//       });
+//       return collector.filter(Boolean);
+//     }
+//     return travel(copyRouter, 0);
+//   });
+
+//   return {
+//     menuTree,
+//   };
+// }
diff --git a/src/main.ts b/src/main.ts
index a34ec51..a34a1d7 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -32,4 +32,7 @@ Object.values(directives).forEach((directive) => {
   app.use(directive);
 }); // 注册指令
 
-app.mount('#app');
+// 解决mounted中获取不到route信息
+router.isReady().then(() => {
+  app.mount('#app');
+});
diff --git a/src/permission/permission.ts b/src/permission/permission.ts
index 27ddd3d..9fe2112 100644
--- a/src/permission/permission.ts
+++ b/src/permission/permission.ts
@@ -1,9 +1,9 @@
-import { useUserStore } from '@/stores/modules/user';
+// import { useUserStore } from '@/stores/modules/user';
 
-export function checkRoutePermission(routeName: string) {
-  const userStore = useUserStore();
-  const allowAccessRoutes = userStore.allowAccessRoutes;
+// export function checkRoutePermission(routeName: string) {
+//   // const userStore = useUserStore();
+//   // const allowAccessRoutes = userStore.allowAccessRoutes;
 
-  if (!routeName) return false;
-  return allowAccessRoutes.includes(routeName);
-}
+//   // if (!routeName) return false;
+//   // return allowAccessRoutes.includes(routeName);
+// }
diff --git a/src/router/guard/userLoginInfo.ts b/src/router/guard/userLoginInfo.ts
index cc3f891..729750c 100644
--- a/src/router/guard/userLoginInfo.ts
+++ b/src/router/guard/userLoginInfo.ts
@@ -6,7 +6,7 @@ import type { Router } from 'vue-router';
 import NProgress from 'nprogress';
 import { goUserLogin } from '@/utils/user';
 // import router from '@/router';
-import { checkRoutePermission } from '@/permission/permission';
+// import { checkRoutePermission } from '@/permission/permission';
 
 import { useUserStore } from '@/stores/modules/user';
 
@@ -26,16 +26,16 @@ export default function setupUserLoginInfoGuard(router: Router) {
       return;
     }
 
-    if (requiresAuth) {
-      const hasPermission = checkRoutePermission(routeName);
-      if (!hasPermission) {
-        AMessage.error('您没有权限访问该页面');
-        next('/');
-        return;
-      }
-      next();
-      return;
-    }
+    // if (requiresAuth) {
+    //   const hasPermission = checkRoutePermission(routeName);
+    //   if (!hasPermission) {
+    //     AMessage.error('您没有权限访问该页面');
+    //     next('/');
+    //     return;
+    //   }
+    //   next();
+    //   return;
+    // }
 
     next();
   });
diff --git a/src/router/index.ts b/src/router/index.ts
index c041c60..2c9f39e 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -8,6 +8,7 @@ import NProgress from 'nprogress';
 import 'nprogress/nprogress.css';
 import { MENU_GROUP_IDS } from './constants';
 import createRouteGuard from './guard';
+import { GROUP_MAIN_NAME } from '@/layouts/components/siderBar/menu-list';
 
 NProgress.configure({ showSpinner: false }); // NProgress Configuration
 
@@ -25,16 +26,24 @@ export const router = createRouter({
     },
     {
       path: '/',
-      name: 'Home',
-      component: () => import('@/views/components/workplace/index.vue'),
+      name: 'Index',
+      redirect: '/chat',
+      meta: {
+        requiresAuth: false,
+        requireLogin: true,
+        group: GROUP_MAIN_NAME,
+      }
+    },
+    {
+      path: '/chat/:conversationId?',
+      name: 'Home',
+      component: () => import('@/views/home/index.vue'),
       meta: {
-        hideSidebar: true,
         requiresAuth: false,
         requireLogin: true,
-        id: MENU_GROUP_IDS.WORK_BENCH_ID,
       },
     },
-    
+
     ...appRoutes,
     {
       path: '/:pathMatch(.*)*',
diff --git a/src/router/routes/modules/agent.ts b/src/router/routes/modules/agent.ts
index 3617ce0..6aba4ee 100644
--- a/src/router/routes/modules/agent.ts
+++ b/src/router/routes/modules/agent.ts
@@ -15,6 +15,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
       requireLogin: true,
       roles: ['*'],
       id: MENU_GROUP_IDS.AGENT,
+      group: 'agent'
     },
     children: [
       {
@@ -26,7 +27,9 @@ const COMPONENTS: AppRouteRecordRaw[] = [
           requiresAuth: false,
           requireLogin: true,
           hideFooter: true,
-          isAgentRoute: true
+          isAgentRoute: true,
+          group: 'agent',
+          hideAiSearch: true,
         },
       },
       {
@@ -41,6 +44,8 @@ const COMPONENTS: AppRouteRecordRaw[] = [
           id: MENU_GROUP_IDS.AGENT,
           isAgentRoute: true,
           hideInMenu: true,
+          group: 'agent',
+          hideAiSearch: true,
         },
       },
           
@@ -55,7 +60,9 @@ const COMPONENTS: AppRouteRecordRaw[] = [
         hideFooter: true,
         id: MENU_GROUP_IDS.AGENT,
         isAgentRoute: true,
-                  hideInMenu: true,
+        hideInMenu: true,
+        group: 'agent',
+        hideAiSearch: true,
       },
     },
     ],
diff --git a/src/router/routes/modules/dataEngine.ts b/src/router/routes/modules/dataEngine.ts
index 60828fc..3a2b8bc 100644
--- a/src/router/routes/modules/dataEngine.ts
+++ b/src/router/routes/modules/dataEngine.ts
@@ -1,89 +1,89 @@
-import { IconBookmark } from '@arco-design/web-vue/es/icon';
-import type { AppRouteRecordRaw } from '../types';
-import { MENU_GROUP_IDS } from '@/router/constants';
+// import { IconBookmark } from '@arco-design/web-vue/es/icon';
+// import type { AppRouteRecordRaw } from '../types';
+// import { MENU_GROUP_IDS } from '@/router/constants';
 
-const COMPONENTS: AppRouteRecordRaw[] = [
-  {
-    path: '/dataEngine',
-    name: 'DataEngine',
-    redirect: 'dataEngine/hotTranslation',
-    meta: {
-      locale: '全域数据引擎',
-      icon: IconBookmark,
-      requiresAuth: true,
-      requireLogin: true,
-      roles: ['*'],
-      id: MENU_GROUP_IDS.DATA_ENGINE_ID,
-    },
-    children: [
-      {
-        path: 'hotTranslation',
-        name: 'DataEngineHotTranslation',
-        meta: {
-          locale: '行业热门话题洞察',
-          requiresAuth: true,
-          requireLogin: true,
-          roles: ['*'],
-        },
-        component: () => import('@/views/components/dataEngine/hotTranslation.vue'),
-      },
-      {
-        path: 'hotCloud',
-        name: 'DataEngineHotCloud',
-        meta: {
-          locale: '行业词云',
-          requiresAuth: true,
-          requireLogin: true,
-          roles: ['*'],
-        },
-        component: () => import('@/views/components/dataEngine/hotCloud.vue'),
-      },
-      {
-        path: 'keyWord',
-        name: 'DataEngineKeyWord',
-        meta: {
-          locale: '行业关键词动向',
-          requiresAuth: true,
-          requireLogin: true,
-          roles: ['*'],
-        },
-        component: () => import('@/views/components/dataEngine/keyWord.vue'),
-      },
-      {
-        path: 'userPainPoints',
-        name: 'DataEngineUserPainPoints',
-        meta: {
-          locale: '用户痛点观察',
-          requiresAuth: true,
-          requireLogin: true,
-          roles: ['*'],
-        },
-        component: () => import('@/views/components/dataEngine/userPainPoints.vue'),
-      },
-      {
-        path: 'keyBrandMovement',
-        name: 'DataEngineKeyBrandMovement',
-        meta: {
-          locale: '重点品牌动向',
-          requiresAuth: true,
-          requireLogin: true,
-          roles: ['*'],
-        },
-        component: () => import('@/views/components/dataEngine/keyBrandMovement.vue'),
-      },
-      {
-        path: 'userPersona',
-        name: 'DataEngineUserPersona',
-        meta: {
-          locale: '用户画像',
-          requiresAuth: true,
-          requireLogin: true,
-          roles: ['*'],
-        },
-        component: () => import('@/views/components/dataEngine/userPersona.vue'),
-      },
-    ],
-  },
-];
+// const COMPONENTS: AppRouteRecordRaw[] = [
+//   {
+//     path: '/dataEngine',
+//     name: 'DataEngine',
+//     redirect: 'dataEngine/hotTranslation',
+//     meta: {
+//       locale: '全域数据引擎',
+//       icon: IconBookmark,
+//       requiresAuth: true,
+//       requireLogin: true,
+//       roles: ['*'],
+//       id: MENU_GROUP_IDS.DATA_ENGINE_ID,
+//     },
+//     children: [
+//       {
+//         path: 'hotTranslation',
+//         name: 'DataEngineHotTranslation',
+//         meta: {
+//           locale: '行业热门话题洞察',
+//           requiresAuth: true,
+//           requireLogin: true,
+//           roles: ['*'],
+//         },
+//         component: () => import('@/views/components/dataEngine/hotTranslation.vue'),
+//       },
+//       {
+//         path: 'hotCloud',
+//         name: 'DataEngineHotCloud',
+//         meta: {
+//           locale: '行业词云',
+//           requiresAuth: true,
+//           requireLogin: true,
+//           roles: ['*'],
+//         },
+//         component: () => import('@/views/components/dataEngine/hotCloud.vue'),
+//       },
+//       {
+//         path: 'keyWord',
+//         name: 'DataEngineKeyWord',
+//         meta: {
+//           locale: '行业关键词动向',
+//           requiresAuth: true,
+//           requireLogin: true,
+//           roles: ['*'],
+//         },
+//         component: () => import('@/views/components/dataEngine/keyWord.vue'),
+//       },
+//       {
+//         path: 'userPainPoints',
+//         name: 'DataEngineUserPainPoints',
+//         meta: {
+//           locale: '用户痛点观察',
+//           requiresAuth: true,
+//           requireLogin: true,
+//           roles: ['*'],
+//         },
+//         component: () => import('@/views/components/dataEngine/userPainPoints.vue'),
+//       },
+//       {
+//         path: 'keyBrandMovement',
+//         name: 'DataEngineKeyBrandMovement',
+//         meta: {
+//           locale: '重点品牌动向',
+//           requiresAuth: true,
+//           requireLogin: true,
+//           roles: ['*'],
+//         },
+//         component: () => import('@/views/components/dataEngine/keyBrandMovement.vue'),
+//       },
+//       {
+//         path: 'userPersona',
+//         name: 'DataEngineUserPersona',
+//         meta: {
+//           locale: '用户画像',
+//           requiresAuth: true,
+//           requireLogin: true,
+//           roles: ['*'],
+//         },
+//         component: () => import('@/views/components/dataEngine/userPersona.vue'),
+//       },
+//     ],
+//   },
+// ];
 
-export default COMPONENTS;
+// export default COMPONENTS;
diff --git a/src/router/routes/modules/management.ts b/src/router/routes/modules/management.ts
index 4726314..150feed 100644
--- a/src/router/routes/modules/management.ts
+++ b/src/router/routes/modules/management.ts
@@ -1,6 +1,9 @@
 import { IconBookmark } from '@arco-design/web-vue/es/icon';
 import type { AppRouteRecordRaw } from '../types';
 import { MENU_GROUP_IDS } from '@/router/constants';
+import { GROUP_MANAGEMENT_NAME, GROUP_WRITER_NAME } from '@/layouts/components/siderBar/menu-list';
+
+
 
 const COMPONENTS: AppRouteRecordRaw[] = [
   {
@@ -14,6 +17,9 @@ const COMPONENTS: AppRouteRecordRaw[] = [
       requireLogin: true,
       roles: ['*'],
       id: MENU_GROUP_IDS.MANAGEMENT_ID,
+      group: GROUP_MANAGEMENT_NAME,
+      hideAiSearch: true,
+
     },
     children: [
       {
@@ -25,6 +31,8 @@ const COMPONENTS: AppRouteRecordRaw[] = [
           requiresAuth: false,
           requireLogin: true,
           roles: ['*'],
+          group: GROUP_MANAGEMENT_NAME,
+          hideAiSearch: true,
         },
       },
       {
@@ -36,6 +44,8 @@ const COMPONENTS: AppRouteRecordRaw[] = [
           requiresAuth: false,
           requireLogin: true,
           roles: ['*'],
+          group: GROUP_MANAGEMENT_NAME,
+          hideAiSearch: true,
         },
       },
       {
@@ -47,6 +57,8 @@ const COMPONENTS: AppRouteRecordRaw[] = [
           requiresAuth: false,
           requireLogin: true,
           roles: ['*'],
+          group: GROUP_MANAGEMENT_NAME,
+          hideAiSearch: true,
         },
       },
     ],
diff --git a/src/router/routes/modules/manuscript-writer.ts b/src/router/routes/modules/manuscript-writer.ts
deleted file mode 100644
index db30cf7..0000000
--- a/src/router/routes/modules/manuscript-writer.ts
+++ /dev/null
@@ -1,115 +0,0 @@
-import type { AppRouteRecordRaw } from '../types';
-import IconContentManuscript from '@/assets/svg/svg-contentManuscript.svg';
-import { MENU_GROUP_IDS } from '@/router/constants';
-
-// 内容稿件-写手端
-const COMPONENTS: AppRouteRecordRaw[] = [
-  {
-    path: '/writer/manuscript',
-    name: 'WriterManuscript',
-    redirect: 'writer/manuscript/list',
-    meta: {
-      locale: '内容稿件',
-      icon: IconContentManuscript,
-      requiresAuth: false,
-      requireLogin: false,
-      roles: ['*'],
-      id: MENU_GROUP_IDS.WRITER_CREATIVE_GENERATION_WORKSHOP_ID,
-    },
-    children: [
-      {
-        path: 'list/:writerCode',
-        name: 'WriterManuscriptList',
-        meta: {
-          locale: '内容稿件列表',
-          requiresAuth: false,
-          requireLogin: false,
-          roles: ['*'],
-        },
-        component: () => import('@/views/creative-generation-workshop/manuscript-writer/list/index.vue'),
-      },
-      {
-        path: 'upload/:writerCode',
-        name: 'WriterManuscriptUpload',
-        meta: {
-          locale: '稿件上传',
-          requiresAuth: false,
-          requireLogin: false,
-          hideFooter: true,
-          roles: ['*'],
-          hideInMenu: true,
-          activeMenu: 'WriterManuscriptList',
-        },
-        component: () => import('@/views/creative-generation-workshop/manuscript-writer/upload/index.vue'),
-      },
-      {
-        path: 'edit/:writerCode/:id',
-        name: 'WriterManuscriptEdit',
-        meta: {
-          locale: '账号详情',
-          requiresAuth: false,
-          requireLogin: false,
-          hideFooter: true,
-          roles: ['*'],
-          hideInMenu: true,
-          activeMenu: 'WriterManuscriptList',
-        },
-        component: () => import('@/views/creative-generation-workshop/manuscript-writer/edit/index.vue'),
-      },
-      {
-        path: 'detail/:writerCode/:id',
-        name: 'WriterManuscriptDetail',
-        meta: {
-          locale: '稿件详情',
-          requiresAuth: false,
-          requireLogin: false,
-          hideFooter: true,
-          roles: ['*'],
-          hideInMenu: true,
-          activeMenu: 'ManuscriptList',
-        },
-        component: () => import('@/views/creative-generation-workshop/manuscript-writer/detail/index.vue'),
-      },
-      {
-        path: 'check-list/:writerCode',
-        name: 'WriterManuscriptCheckList',
-        meta: {
-          locale: '内容稿件审核',
-          requiresAuth: false,
-          requireLogin: false,
-          roles: ['*'],
-        },
-        component: () => import('@/views/creative-generation-workshop/manuscript-writer/check-list/index.vue'),
-      },
-      {
-        path: 'check-list/detail/:id/:writerCode',
-        name: 'WriterManuscriptCheckListDetail',
-        meta: {
-          locale: '内容稿件审核详情',
-          requiresAuth: false,
-          requireLogin: false,
-          hideFooter: true,
-          hideInMenu: true,
-          roles: ['*'],
-          activeMenu: 'WriterManuscriptCheckList',
-        },
-        component: () => import('@/views/creative-generation-workshop/manuscript-writer/detail/index.vue'),
-      },
-      {
-        path: 'check/:writerCode',
-        name: 'WriterManuscriptCheck',
-        meta: {
-          locale: '稿件审核',
-          requiresAuth: false,
-          requireLogin: false,
-          hideFooter: true,
-          roles: ['*'],
-          hideInMenu: true,
-          activeMenu: 'WriterManuscriptCheckList',
-        },
-        component: () => import('@/views/creative-generation-workshop/manuscript-writer/check/index.vue'),
-      },
-    ],
-  },
-];
-export default COMPONENTS;
diff --git a/src/router/routes/modules/materialCenter-writer.ts b/src/router/routes/modules/materialCenter-writer.ts
new file mode 100644
index 0000000..0fc887a
--- /dev/null
+++ b/src/router/routes/modules/materialCenter-writer.ts
@@ -0,0 +1,125 @@
+import type { AppRouteRecordRaw } from '../types';
+import { MENU_GROUP_IDS } from '@/router/constants';
+
+import IconContentManuscript from '@/assets/svg/svg-contentManuscript.svg';
+import { GROUP_WRITER_NAME } from '@/layouts/components/siderBar/menu-list';
+
+const COMPONENTS: AppRouteRecordRaw[] = [
+  {
+    path: '/writer/material-center',
+    name: 'WriterMaterialCenter',
+    redirect: '/writer/material-center/finished-products',
+    meta: {
+      locale: '素材中心',
+      icon: IconContentManuscript,
+      requiresAuth: true,
+      requireLogin: true,
+      roles: ['*'],
+      group: GROUP_WRITER_NAME,
+      id: MENU_GROUP_IDS.CREATIVE_GENERATION_WORKSHOP_ID,
+    },
+    children: [
+      {
+        path: 'finished-products/:writerCode',
+        name: 'WriterMaterialCenterFinishedProducts',
+        meta: {
+          locale: '成品库',
+          requiresAuth: true,
+          requireLogin: true,
+          roles: ['*'],
+          group: GROUP_WRITER_NAME,
+        },
+        component: () => import('@/views/writer-material-center/index.vue'),
+      },
+      {
+        path: 'raw-material/:writerCode',
+        name: 'WriterMaterialCenterRawMaterial',
+        meta: {
+          locale: '原料库',
+          requiresAuth: true,
+          requireLogin: true,
+          roles: ['*'],
+          group: GROUP_WRITER_NAME,
+        },
+        component: () => import('@/views/writer-material-center/index.vue'),
+      },
+      {
+        path: 'upload/:writerCode',
+        name: 'WriterManuscriptUpload',
+        meta: {
+          locale: '稿件上传',
+          requiresAuth: false,
+          requireLogin: false,
+          hideFooter: true,
+          roles: ['*'],
+          hideInMenu: true,
+          activeMenu: 'WriterMaterialCenterFinishedProducts',
+        },
+        component: () =>
+          import('@/views/writer-material-center/components/finished-products/manuscript/upload/index.vue'),
+      },
+      {
+        path: 'edit/:writerCode/:id',
+        name: 'WriterManuscriptEdit',
+        meta: {
+          locale: '稿件编辑',
+          requiresAuth: false,
+          requireLogin: false,
+          hideFooter: true,
+          roles: ['*'],
+          hideInMenu: true,
+          activeMenu: 'WriterMaterialCenterFinishedProducts',
+        },
+        component: () =>
+          import('@/views/writer-material-center/components/finished-products/manuscript/edit/index.vue'),
+      },
+      {
+        path: 'detail/:writerCode/:id',
+        name: 'WriterManuscriptDetail',
+        meta: {
+          locale: '稿件详情',
+          requiresAuth: false,
+          requireLogin: false,
+          hideFooter: true,
+          roles: ['*'],
+          hideInMenu: true,
+          activeMenu: 'WriterMaterialCenterFinishedProducts',
+        },
+        component: () =>
+          import('@/views/writer-material-center/components/finished-products/manuscript/detail/index.vue'),
+      },
+      {
+        path: 'check-list/detail/:id/:writerCode',
+        name: 'WriterManuscriptCheckListDetail',
+        meta: {
+          locale: '内容稿件审核详情',
+          requiresAuth: false,
+          requireLogin: false,
+          hideFooter: true,
+          hideInMenu: true,
+          roles: ['*'],
+          activeMenu: 'WriterMaterialCenterFinishedProducts',
+        },
+        component: () =>
+          import('@/views/writer-material-center/components/finished-products/manuscript/detail/index.vue'),
+      },
+      {
+        path: 'check/:writerCode',
+        name: 'WriterManuscriptCheck',
+        meta: {
+          locale: '稿件审核',
+          requiresAuth: false,
+          requireLogin: false,
+          hideFooter: true,
+          roles: ['*'],
+          hideInMenu: true,
+          activeMenu: 'WriterMaterialCenterFinishedProducts',
+        },
+        component: () =>
+          import('@/views/writer-material-center/components/finished-products/manuscript/check/index.vue'),
+      },
+    ],
+  },
+];
+
+export default COMPONENTS;
diff --git a/src/router/routes/modules/creativeGenerationWorkshop.ts b/src/router/routes/modules/materialCenter.ts
similarity index 61%
rename from src/router/routes/modules/creativeGenerationWorkshop.ts
rename to src/router/routes/modules/materialCenter.ts
index 6c60759..0f91eb1 100644
--- a/src/router/routes/modules/creativeGenerationWorkshop.ts
+++ b/src/router/routes/modules/materialCenter.ts
@@ -5,11 +5,11 @@ import IconContentManuscript from '@/assets/svg/svg-contentManuscript.svg';
 
 const COMPONENTS: AppRouteRecordRaw[] = [
   {
-    path: '/manuscript',
-    name: 'Manuscript',
-    redirect: 'manuscript/list',
+    path: '/material-center',
+    name: 'MaterialCenter',
+    redirect: 'material-center/finished-products',
     meta: {
-      locale: '内容稿件',
+      locale: '素材中心',
       icon: IconContentManuscript,
       requiresAuth: true,
       requireLogin: true,
@@ -18,15 +18,26 @@ const COMPONENTS: AppRouteRecordRaw[] = [
     },
     children: [
       {
-        path: 'list',
-        name: 'ManuscriptList',
+        path: 'finished-products',
+        name: 'MaterialCenterFinishedProducts',
         meta: {
-          locale: '内容稿件列表',
+          locale: '成品库',
           requiresAuth: true,
           requireLogin: true,
           roles: ['*'],
         },
-        component: () => import('@/views/creative-generation-workshop/manuscript/list/index.vue'),
+        component: () => import('@/views/material-center/index.vue'),
+      },
+      {
+        path: 'raw-material',
+        name: 'MaterialCenterRawMaterial',
+        meta: {
+          locale: '原料库',
+          requiresAuth: true,
+          requireLogin: true,
+          roles: ['*'],
+        },
+        component: () => import('@/views/material-center/index.vue'),
       },
       {
         path: 'upload',
@@ -38,23 +49,23 @@ const COMPONENTS: AppRouteRecordRaw[] = [
           hideFooter: true,
           roles: ['*'],
           hideInMenu: true,
-          activeMenu: 'ManuscriptList',
+          activeMenu: 'MaterialCenterFinishedProducts',
         },
-        component: () => import('@/views/creative-generation-workshop/manuscript/upload/index.vue'),
+        component: () => import('@/views/material-center/components/finished-products/manuscript/upload/index.vue'),
       },
       {
         path: 'edit/:id',
         name: 'ManuscriptEdit',
         meta: {
-          locale: '账号详情',
+          locale: '稿件编辑',
           requiresAuth: true,
           requireLogin: true,
           hideFooter: true,
           roles: ['*'],
           hideInMenu: true,
-          activeMenu: 'ManuscriptList',
+          activeMenu: 'MaterialCenterFinishedProducts',
         },
-        component: () => import('@/views/creative-generation-workshop/manuscript/edit/index.vue'),
+        component: () => import('@/views/material-center/components/finished-products/manuscript/edit/index.vue'),
       },
       {
         path: 'detail/:id',
@@ -66,20 +77,9 @@ const COMPONENTS: AppRouteRecordRaw[] = [
           hideFooter: true,
           roles: ['*'],
           hideInMenu: true,
-          activeMenu: 'ManuscriptList',
+          activeMenu: 'MaterialCenterFinishedProducts',
         },
-        component: () => import('@/views/creative-generation-workshop/manuscript/detail/index.vue'),
-      },
-      {
-        path: 'check-list',
-        name: 'ManuscriptCheckList',
-        meta: {
-          locale: '内容稿件审核',
-          requiresAuth: true,
-          requireLogin: true,
-          roles: ['*'],
-        },
-        component: () => import('@/views/creative-generation-workshop/manuscript/check-list/index.vue'),
+        component: () => import('@/views/material-center/components/finished-products/manuscript/detail/index.vue'),
       },
       {
         path: 'check-list/detail/:id',
@@ -91,9 +91,9 @@ const COMPONENTS: AppRouteRecordRaw[] = [
           hideFooter: true,
           hideInMenu: true,
           roles: ['*'],
-          activeMenu: 'ManuscriptCheckList',
+          activeMenu: 'MaterialCenterFinishedProducts',
         },
-        component: () => import('@/views/creative-generation-workshop/manuscript/detail/index.vue'),
+        component: () => import('@/views/material-center/components/finished-products/manuscript/detail/index.vue'),
       },
       {
         path: 'check',
@@ -105,9 +105,9 @@ const COMPONENTS: AppRouteRecordRaw[] = [
           hideFooter: true,
           roles: ['*'],
           hideInMenu: true,
-          activeMenu: 'ManuscriptCheckList',
+          activeMenu: 'MaterialCenterFinishedProducts',
         },
-        component: () => import('@/views/creative-generation-workshop/manuscript/check/index.vue'),
+        component: () => import('@/views/material-center/components/finished-products/manuscript/check/index.vue'),
       },
     ],
   },
@@ -122,7 +122,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
       hideSidebar: true,
       roles: ['*'],
     },
-    component: () => import('@/views/creative-generation-workshop/explore/list/index.vue'),
+    component: () => import('@/views/material-center/components/finished-products/explore/list/index.vue'),
   },
   {
     path: '/explore/detail/:shareCode/:id',
@@ -135,7 +135,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
       hideSidebar: true,
       roles: ['*'],
     },
-    component: () => import('@/views/creative-generation-workshop/explore/detail/index.vue'),
+    component: () => import('@/views/material-center/components/finished-products/explore/detail/index.vue'),
   },
 ];
 
diff --git a/src/router/routes/modules/propertyMarketing.ts b/src/router/routes/modules/propertyMarketing.ts
index ba8af63..fcfbaa1 100644
--- a/src/router/routes/modules/propertyMarketing.ts
+++ b/src/router/routes/modules/propertyMarketing.ts
@@ -88,77 +88,77 @@ const COMPONENTS: AppRouteRecordRaw[] = [
       },
     ],
   },
-  {
-    path: '/put-account',
-    name: 'PutAccount',
-    redirect: 'put-account/accountManagement',
-    meta: {
-      locale: '投放资源中心',
-      icon: IconPutAccount,
-      requiresAuth: true,
-      requireLogin: true,
-      roles: ['*'],
-      id: MENU_GROUP_IDS.PROPERTY_ID,
-    },
-    children: [
-      {
-        path: 'manage',
-        name: 'PutAccountAccountManagement',
-        meta: {
-          locale: '账户管理',
-          requiresAuth: true,
-          requireLogin: true,
-          roles: ['*'],
-        },
-        component: () => import('@/views/property-marketing/put-account/account-manage/index.vue'),
-      },
-      {
-        path: 'data',
-        name: 'PutAccountAccountData',
-        meta: {
-          locale: '账户数据',
-          requiresAuth: true,
-          requireLogin: true,
-          roles: ['*'],
-        },
-        component: () => import('@/views/property-marketing/put-account/account-data/index.vue'), 
-      },
-      {
-        path: 'account-dashboard',
-        name: 'PutAccountAccountDashboard',
-        meta: {
-          locale: '投放表现分析',
-          requiresAuth: true,
-          requireLogin: true,
-          roles: ['*'],
-        },
-        component: () => import('@/views/property-marketing/put-account/account-dashboard/index.vue'),
-      },
-      {
-        path: 'investmentGuidelines',
-        name: 'PutAccountInvestmentGuidelines',
-        meta: {
-          locale: '投放指南',
-          requiresAuth: true,
-          requireLogin: true,
-          roles: ['*'],
-        },
-        component: () => import('@/views/property-marketing/put-account/investment-guidelines/index.vue'),
-      },
-      {
-        path: 'detail/:id',
-        name: 'guideDetail',
-        meta: {
-          locale: '投放指南详情',
-          requiresAuth: true,
-          hideInMenu: true,
-          roles: ['*'],
-          activeMenu: 'PutAccountInvestmentGuidelines',
-        },
-        component: () => import('@/views/property-marketing/put-account/investment-guidelines/detail.vue'),
-      },
-    ],
-  },
+  // {
+  //   path: '/put-account',
+  //   name: 'PutAccount',
+  //   redirect: 'put-account/accountManagement',
+  //   meta: {
+  //     locale: '投放资源中心',
+  //     icon: IconPutAccount,
+  //     requiresAuth: true,
+  //     requireLogin: true,
+  //     roles: ['*'],
+  //     id: MENU_GROUP_IDS.PROPERTY_ID,
+  //   },
+  //   children: [
+  //     {
+  //       path: 'manage',
+  //       name: 'PutAccountAccountManagement',
+  //       meta: {
+  //         locale: '账户管理',
+  //         requiresAuth: true,
+  //         requireLogin: true,
+  //         roles: ['*'],
+  //       },
+  //       component: () => import('@/views/property-marketing/put-account/account-manage/index.vue'),
+  //     },
+  //     {
+  //       path: 'data',
+  //       name: 'PutAccountAccountData',
+  //       meta: {
+  //         locale: '账户数据',
+  //         requiresAuth: true,
+  //         requireLogin: true,
+  //         roles: ['*'],
+  //       },
+  //       component: () => import('@/views/property-marketing/put-account/account-data/index.vue'), 
+  //     },
+  //     {
+  //       path: 'account-dashboard',
+  //       name: 'PutAccountAccountDashboard',
+  //       meta: {
+  //         locale: '投放表现分析',
+  //         requiresAuth: true,
+  //         requireLogin: true,
+  //         roles: ['*'],
+  //       },
+  //       component: () => import('@/views/property-marketing/put-account/account-dashboard/index.vue'),
+  //     },
+  //     {
+  //       path: 'investmentGuidelines',
+  //       name: 'PutAccountInvestmentGuidelines',
+  //       meta: {
+  //         locale: '投放指南',
+  //         requiresAuth: true,
+  //         requireLogin: true,
+  //         roles: ['*'],
+  //       },
+  //       component: () => import('@/views/property-marketing/put-account/investment-guidelines/index.vue'),
+  //     },
+  //     {
+  //       path: 'detail/:id',
+  //       name: 'PutAccountInvestmentGuidelinesDetail',
+  //       meta: {
+  //         locale: '投放指南详情',
+  //         requiresAuth: true,
+  //         hideInMenu: true,
+  //         roles: ['*'],
+  //         activeMenu: 'PutAccountInvestmentGuidelines',
+  //       },
+  //       component: () => import('@/views/property-marketing/put-account/investment-guidelines/detail.vue'),
+  //     },
+  //   ],
+  // },
   // {
   //   path: '/intelligent-solution',
   //   name: 'IntelligentSolution',
diff --git a/src/router/routes/types.ts b/src/router/routes/types.ts
index ab069b8..49e6f6b 100644
--- a/src/router/routes/types.ts
+++ b/src/router/routes/types.ts
@@ -16,4 +16,5 @@ export interface AppRouteRecordRaw {
   props?: Record<string, any>;
   beforeEnter?: NavigationGuard | NavigationGuard[];
   fullPath?: string;
+  hideAiSearch?: boolean;
 }
diff --git a/src/router/typeings.d.ts b/src/router/typeings.d.ts
index 5c0f6ff..f64b2f6 100644
--- a/src/router/typeings.d.ts
+++ b/src/router/typeings.d.ts
@@ -15,7 +15,9 @@ declare module 'vue-router' {
     ignoreCache?: boolean; // if set true, the page will not be cached
     hideSidebar?: boolean;
     hideFooter?: boolean;
-    isAgentRoute?:boolean;
+    isAgentRoute?: boolean;
     requireLogin?: boolean; // 是否需要登陆才能访问
+    independent?: boolean; // 独立于layout的路由
+    group?: string; // 路由分组
   }
 }
diff --git a/src/stores/modules/chat/index.ts b/src/stores/modules/chat/index.ts
new file mode 100644
index 0000000..47da668
--- /dev/null
+++ b/src/stores/modules/chat/index.ts
@@ -0,0 +1,52 @@
+import { defineStore } from 'pinia';
+import { createSession, getAgentData } from '@/api/all/chat';
+
+import { handleUserHome } from '@/utils/user';
+import { glsWithCatch, slsWithCatch, rlsWithCatch } from '@/utils/stroage';
+
+interface ChatState {
+  searchValue?: string;
+  agentInfo?: agentInfo;
+}
+type agentInfo = {
+  agent_id?: string;
+  name?: string;
+  description?: string;
+};
+
+export const useChatStore = defineStore('chat', {
+  state: (): ChatState => ({
+    searchValue: '',
+    agentInfo: (glsWithCatch('agentInfo') && JSON.parse(glsWithCatch('agentInfo') as string)) || {},
+  }),
+  actions: {
+    setSearchValue(searchValue: string) {
+      this.searchValue = searchValue;
+    },
+    clearSearchValue() {
+      this.searchValue = '';
+    },
+    async getAgentInfo() {
+      const { code, data } = await getAgentData();
+      if (code === 200) {
+        this.setAgentInfo(data);
+      }
+    },
+    setAgentInfo(agentInfo: agentInfo) {
+      this.agentInfo = agentInfo;
+      slsWithCatch('agentInfo', JSON.stringify(agentInfo));
+    },
+    clearAgentInfo() {
+      this.agentInfo = {};
+      this.searchValue = '';
+    },
+    async onCreateSession() {
+      const { code, data } = await createSession();
+      if (code === 200) {
+        handleUserHome({
+          conversationId: data.session_id,
+        });
+      }
+    },
+  },
+});
diff --git a/src/stores/modules/enterprise/index.ts b/src/stores/modules/enterprise/index.ts
index b245cb8..1517998 100644
--- a/src/stores/modules/enterprise/index.ts
+++ b/src/stores/modules/enterprise/index.ts
@@ -4,7 +4,7 @@ import { useUserStore } from '@/stores/modules/user';
 import { glsWithCatch, slsWithCatch, rlsWithCatch } from '@/utils/stroage';
 
 interface EnterpriseInfo {
-  id: number;
+  id: number | string;
   name: string;
   update_name_quota: number;
   used_update_name_count: number;
diff --git a/src/stores/modules/index.ts b/src/stores/modules/index.ts
index 60ee22a..2792f37 100644
--- a/src/stores/modules/index.ts
+++ b/src/stores/modules/index.ts
@@ -8,3 +8,4 @@
 export * from './app';
 export * from './tab-bar';
 export * from './user';
+export * from './chat';
diff --git a/src/stores/modules/side-bar/constants.ts b/src/stores/modules/side-bar/constants.ts
index 3c458e8..2769953 100644
--- a/src/stores/modules/side-bar/constants.ts
+++ b/src/stores/modules/side-bar/constants.ts
@@ -1,116 +1,116 @@
-import { MENU_GROUP_IDS } from '@/router/constants';
-export const MENU_LIST = [
-  {
-    id: MENU_GROUP_IDS.WORK_BENCH_ID,
-    name: '工作台',
-    routeName: 'Home',
-    includeRouteNames: ['Home'],
-    requiresAuth: false,
-    permissionKey: '', // 权限key，如果为空，则表示该菜单不需要权限，与后端约定
-  },
-  {
-    id: MENU_GROUP_IDS.DATA_ENGINE_ID,
-    name: '全域数据分析',
-    permissionKey: 'data_analysis',
-    requiresAuth: true,
-    children: [
-      {
-        name: '行业热门话题洞察',
-        routeName: 'DataEngineHotTranslation',
-        includeRouteNames: ['DataEngineHotTranslation'],
-      },
-      {
-        name: '行业词云',
-        routeName: 'DataEngineHotCloud',
-        includeRouteNames: ['DataEngineHotCloud'],
-      },
-      {
-        name: '行业关键词动向',
-        routeName: 'DataEngineKeyWord',
-        includeRouteNames: ['DataEngineKeyWord'],
-      },
-      {
-        name: '用户痛点观察',
-        routeName: 'DataEngineUserPainPoints',
-        includeRouteNames: ['DataEngineUserPainPoints'],
-      },
-      {
-        name: '重点品牌动向',
-        routeName: 'DataEngineKeyBrandMovement',
-        includeRouteNames: ['DataEngineKeyBrandMovement'],
-      },
-      {
-        name: '用户画像',
-        routeName: 'DataEngineUserPersona',
-        includeRouteNames: ['DataEngineUserPersona'],
-      },
-    ],
-  },
-  {
-    id: MENU_GROUP_IDS.CREATIVE_GENERATION_WORKSHOP_ID,
-    name: '创意生成工坊',
-    permissionKey: '',
-    requiresAuth: true,
-    children: [
-      {
-        name: '内容稿件',
-        routeName: 'ManuscriptList',
-        includeRouteNames: [
-          'ManuscriptList',
-          'ManuscriptUpload',
-          'ManuscriptEdit',
-          'ManuscriptDetail',
-          'ManuscriptCheckList',
-          'ManuscriptCheckListDetail',
-          'ManuscriptCheck',
-        ],
-      },
-    ],
-  },
-  {
-    id: MENU_GROUP_IDS.PROPERTY_ID,
-    name: '营销资产中台',
-    permissionKey: 'marketing_asset',
-    requiresAuth: true,
-    children: [
-      {
-        name: '品牌资产管理',
-        routeName: 'RepositoryBrandMaterials',
-        includeRouteNames: ['RepositoryBrandMaterials'],
-      },
-      {
-        name: '账号资源中心',
-        routeName: 'MediaAccountAccountManagement',
-        includeRouteNames: [
-          'MediaAccountAccountManagement',
-          'MediaAccountAccountDashboard',
-          'MediaAccountAccountDetails',
-        ],
-      },
-      {
-        name: '投放资源中心',
-        routeName: 'PutAccountAccountManagement',
-        includeRouteNames: [
-          'PutAccountAccountManagement',
-          'PutAccountAccountData',
-          'PutAccountAccountDashboard',
-          'PutAccountInvestmentGuidelines',
-          'guideDetail',
-        ],
-      },
-      // {
-      //   name: '智能方案管理',
-      //   routeName: 'IntelligentSolutionBusinessAnalysisReport',
-      //   includeRouteNames: [
-      //     'IntelligentSolutionBusinessAnalysisReport',
-      //     'IntelligentSolutionCompetitiveProductAnalysisReport',
-      //   ],
-      // },
-      {
-        name: '项目管理',
-        routeName: 'ProjectList',
-        includeRouteNames: ['ProjectList'],
-      },
-    ],
-  },
-];
+// import { MENU_GROUP_IDS } from '@/router/constants';
+// export const MENU_LIST = [
+//   {
+//     id: MENU_GROUP_IDS.WORK_BENCH_ID,
+//     name: '工作台',
+//     routeName: 'Home',
+//     includeRouteNames: ['Home'],
+//     requiresAuth: false,
+//     permissionKey: '', // 权限key，如果为空，则表示该菜单不需要权限，与后端约定
+//   },
+//   {
+//     id: MENU_GROUP_IDS.DATA_ENGINE_ID,
+//     name: '全域数据分析',
+//     permissionKey: 'data_analysis',
+//     requiresAuth: true,
+//     children: [
+//       {
+//         name: '行业热门话题洞察',
+//         routeName: 'DataEngineHotTranslation',
+//         includeRouteNames: ['DataEngineHotTranslation'],
+//       },
+//       {
+//         name: '行业词云',
+//         routeName: 'DataEngineHotCloud',
+//         includeRouteNames: ['DataEngineHotCloud'],
+//       },
+//       {
+//         name: '行业关键词动向',
+//         routeName: 'DataEngineKeyWord',
+//         includeRouteNames: ['DataEngineKeyWord'],
+//       },
+//       {
+//         name: '用户痛点观察',
+//         routeName: 'DataEngineUserPainPoints',
+//         includeRouteNames: ['DataEngineUserPainPoints'],
+//       },
+//       {
+//         name: '重点品牌动向',
+//         routeName: 'DataEngineKeyBrandMovement',
+//         includeRouteNames: ['DataEngineKeyBrandMovement'],
+//       },
+//       {
+//         name: '用户画像',
+//         routeName: 'DataEngineUserPersona',
+//         includeRouteNames: ['DataEngineUserPersona'],
+//       },
+//     ],
+//   },
+//   {
+//     id: MENU_GROUP_IDS.CREATIVE_GENERATION_WORKSHOP_ID,
+//     name: '创意生成工坊',
+//     permissionKey: '',
+//     requiresAuth: true,
+//     children: [
+//       {
+//         name: '内容稿件',
+//         routeName: 'ManuscriptList',
+//         includeRouteNames: [
+//           'ManuscriptList',
+//           'ManuscriptUpload',
+//           'ManuscriptEdit',
+//           'ManuscriptDetail',
+//           'ManuscriptCheckList',
+//           'ManuscriptCheckListDetail',
+//           'ManuscriptCheck',
+//         ],
+//       },
+//     ],
+//   },
+//   {
+//     id: MENU_GROUP_IDS.PROPERTY_ID,
+//     name: '营销资产中台',
+//     permissionKey: 'marketing_asset',
+//     requiresAuth: true,
+//     children: [
+//       {
+//         name: '品牌资产管理',
+//         routeName: 'RepositoryBrandMaterials',
+//         includeRouteNames: ['RepositoryBrandMaterials'],
+//       },
+//       {
+//         name: '账号资源中心',
+//         routeName: 'MediaAccountAccountManagement',
+//         includeRouteNames: [
+//           'MediaAccountAccountManagement',
+//           'MediaAccountAccountDashboard',
+//           'MediaAccountAccountDetails',
+//         ],
+//       },
+//       {
+//         name: '投放资源中心',
+//         routeName: 'PutAccountAccountManagement',
+//         includeRouteNames: [
+//           'PutAccountAccountManagement',
+//           'PutAccountAccountData',
+//           'PutAccountAccountDashboard',
+//           'PutAccountInvestmentGuidelines',
+//           'PutAccountInvestmentGuidelinesDetail',
+//         ],
+//       },
+//       // {
+//       //   name: '智能方案管理',
+//       //   routeName: 'IntelligentSolutionBusinessAnalysisReport',
+//       //   includeRouteNames: [
+//       //     'IntelligentSolutionBusinessAnalysisReport',
+//       //     'IntelligentSolutionCompetitiveProductAnalysisReport',
+//       //   ],
+//       // },
+//       {
+//         name: '项目管理',
+//         routeName: 'ProjectList',
+//         includeRouteNames: ['ProjectList'],
+//       },
+//     ],
+//   },
+// ];
diff --git a/src/stores/modules/side-bar/index.ts b/src/stores/modules/side-bar/index.ts
index f12c136..75dca17 100644
--- a/src/stores/modules/side-bar/index.ts
+++ b/src/stores/modules/side-bar/index.ts
@@ -2,48 +2,68 @@
  * @Author: RenXiaoDong
  * @Date: 2025-06-23 22:13:30
  */
+// import { useRoute } from 'vue-router';
 import { defineStore } from 'pinia';
 import router from '@/router';
 import type { RouteLocationNormalized } from 'vue-router';
-import { MENU_LIST } from './constants';
+// import { MENU_LIST } from './constants';
 import { useEnterpriseStore } from '@/stores/modules/enterprise';
 import { getTaskUnread, patchTaskRead } from '@/api/all/common';
 
 interface sidebarState {
-  activeMenuId: number | null;
-  menuList: any[];
-  allowAccessRoutes: any[];
+  activeMenuKey: string | number | null;
+  currentMenuList: any[];
   unreadInfo: number[];
+  menuCollapse: boolean;
+  hasMenuList: boolean;
 }
 
 let unreadInfoTimer: number | null = null;
 
 export const useSidebarStore = defineStore('sidebar', {
   state: (): sidebarState => ({
-    activeMenuId: null, // 
-    menuList: [], // 菜单信息 
+    activeMenuKey: null, // 激活的菜单id
+    currentMenuList: [], // 菜单信息 
     unreadInfo: [], // 未读消息
-    allowAccessRoutes: [], // 允许访问的路由列表
+    menuCollapse: false, // 菜单是否折叠
+    hasMenuList: true, // 是否有菜单
   }),
+  getters: {
+    showSider(): boolean {
+      const route = router.currentRoute.value;
+      return !route.meta?.hideSidebar && this.hasMenuList;
+    },
+    sidebarWidth(): number {
+      if (!this.showSider) return 0;
+      return this.menuCollapse ? 74 : 138;
+    },
+  },
   actions: {
-    clearActiveMenuId() {
-      this.activeMenuId = null;
+    clearActiveMenuKey() {
+      this.activeMenuKey = null;
     },
-    setActiveMenuId(id: number) {
-      this.activeMenuId = id;
+    setActiveMenuKey(key: string | number) {
+      this.activeMenuKey = key;
     },
-    clearUserNavbarMenuList() {
-      this.menuList = [];
+    setMenuCollapse() {
+      this.menuCollapse = !this.menuCollapse;
+    },
+    clearMenuCollapse() {
+      this.menuCollapse = false;
+    },
+    setCurrentMenuList(newMenuList: any[]) {
+      this.currentMenuList = newMenuList;
+      this.hasMenuList = newMenuList.length > 0;
     },
     // navbar菜单列表由企业对应权限决定
-    getUserNavbarMenuList() {
-      const enterpriseStore = useEnterpriseStore();
-      this.menuList = MENU_LIST.filter(
-        (item) => !item.permissionKey || enterpriseStore.enterpriseInfo?.permissions?.includes(item.permissionKey),
-      );
-    },
-    // 根据当前路由自动设置 activeMenuId
-    setActiveMenuIdByRoute(route: RouteLocationNormalized) {
+    // getUserNavbarMenuList() {
+    //   const enterpriseStore = useEnterpriseStore();
+    //   this.menuList = MENU_LIST.filter(
+    //     (item) => !item.permissionKey || enterpriseStore.enterpriseInfo?.permissions?.includes(item.permissionKey),
+    //   );
+    // },
+    // 根据当前路由自动设置 activeMenuKey
+    setActiveMenuKeyByRoute(route: RouteLocationNormalized) {
       const appRoutes = router.options?.routes ?? [];
 
       const findMenuGroup = (routes: any[]): number | null => {
@@ -68,7 +88,7 @@ export const useSidebarStore = defineStore('sidebar', {
 
       const menuId = findMenuGroup(appRoutes as any);
       if (menuId !== null) {
-        this.activeMenuId = menuId;
+        this.activeMenuKey = menuId;
       }
     },
     async getTaskUnreadInfo() {
diff --git a/src/stores/modules/tab-bar/index.ts b/src/stores/modules/tab-bar/index.ts
index ee6b24c..97226d2 100644
--- a/src/stores/modules/tab-bar/index.ts
+++ b/src/stores/modules/tab-bar/index.ts
@@ -1,7 +1,3 @@
-/*
- * @Author: RenXiaoDong
- * @Date: 2025-06-19 01:45:53
- */
 import { defineStore } from 'pinia';
 import type { TabBarState, TagProps, RouteLocationNormalized } from './types';
 
diff --git a/src/stores/modules/user/index.ts b/src/stores/modules/user/index.ts
index 972eda7..fb2ed6a 100644
--- a/src/stores/modules/user/index.ts
+++ b/src/stores/modules/user/index.ts
@@ -16,7 +16,7 @@ interface UserInfo {
 interface UserState {
   token: string;
   userInfo: UserInfo | null;
-  allowAccessRoutes: string[];
+  // allowAccessRoutes: string[];
   // isLogin: boolean;
 }
 
@@ -30,8 +30,8 @@ export const useUserStore = defineStore('user', {
   state: (): UserState => ({
     token: glsWithCatch('accessToken') || '',
     userInfo: (glsWithCatch('userInfo') && JSON.parse(glsWithCatch('userInfo') as string)) || null,
-    allowAccessRoutes:
-      (glsWithCatch('allowAccessRoutes') && JSON.parse(glsWithCatch('allowAccessRoutes') as string)) || [], // 允许访问的路由列表
+    // allowAccessRoutes:
+    //   (glsWithCatch('allowAccessRoutes') && JSON.parse(glsWithCatch('allowAccessRoutes') as string)) || [], // 允许访问的路由列表
   }),
   getters: {
     isLogin(): boolean {
@@ -72,40 +72,40 @@ export const useUserStore = defineStore('user', {
         this.setUserInfo(data);
       }
     },
-    clearUserAllowAccessRoutes() {
-      this.allowAccessRoutes = [];
-      rlsWithCatch('allowAccessRoutes');
-    },
-    getUserAllowAccessRoutes() {
-      const sidebarStore = useSidebarStore();
-      const menuList = sidebarStore.menuList;
-      const appRoutes = router.getRoutes();
+    // clearUserAllowAccessRoutes() {
+    //   this.allowAccessRoutes = [];
+    //   rlsWithCatch('allowAccessRoutes');
+    // },
+    // getUserAllowAccessRoutes() {
+    //   const sidebarStore = useSidebarStore();
+    //   const menuList = sidebarStore.menuList;
+    //   const appRoutes = router.getRoutes();
 
-      appRoutes.forEach((route: any) => {
-        if (!route.meta?.requiresAuth) {
-          this.allowAccessRoutes.push(route.name);
-        }
-      });
+    //   appRoutes.forEach((route: any) => {
+    //     if (!route.meta?.requiresAuth) {
+    //       this.allowAccessRoutes.push(route.name);
+    //     }
+    //   });
 
-      const pushAllowAccessRoutes = (includeRouteNames: string[]) => {
-        const matchedRoute = appRoutes
-          .filter((route: any) => includeRouteNames.includes(route.name))
-          .map((route: any) => route.name);
-        this.allowAccessRoutes.push(...matchedRoute);
-      };
+    //   const pushAllowAccessRoutes = (includeRouteNames: string[]) => {
+    //     const matchedRoute = appRoutes
+    //       .filter((route: any) => includeRouteNames.includes(route.name))
+    //       .map((route: any) => route.name);
+    //     this.allowAccessRoutes.push(...matchedRoute);
+    //   };
 
-      menuList.forEach((item) => {
-        if (item.children && item.children.length > 0) {
-          item.children.forEach((child: any) => {
-            pushAllowAccessRoutes(child.includeRouteNames);
-          });
-        } else {
-          pushAllowAccessRoutes(item.includeRouteNames);
-        }
-      });
+    //   menuList.forEach((item) => {
+    //     if (item.children && item.children.length > 0) {
+    //       item.children.forEach((child: any) => {
+    //         pushAllowAccessRoutes(child.includeRouteNames);
+    //       });
+    //     } else {
+    //       pushAllowAccessRoutes(item.includeRouteNames);
+    //     }
+    //   });
 
-      this.allowAccessRoutes = uniq(this.allowAccessRoutes);
-      slsWithCatch('allowAccessRoutes', JSON.stringify(this.allowAccessRoutes));
-    },
+    //   this.allowAccessRoutes = uniq(this.allowAccessRoutes);
+    //   slsWithCatch('allowAccessRoutes', JSON.stringify(this.allowAccessRoutes));
+    // },
   },
 });
diff --git a/src/styles/components/chat-sender.scss b/src/styles/components/chat-sender.scss
new file mode 100644
index 0000000..789054d
--- /dev/null
+++ b/src/styles/components/chat-sender.scss
@@ -0,0 +1,37 @@
+.ant-sender {
+  border-radius: 8px;
+  border: 1px solid var(--Border-2, #e6e6e8);
+  background: var(--BG-White, #fff);
+  box-shadow: none;
+  transition: all 0.3s;
+  &::after {
+    display: none;
+  }
+  .ant-sender-content {
+    height: 100%;
+    padding: 14px 8px 8px 16px;
+    .ant-input {
+      font-family: $font-family-regular;
+      color: #211f24;
+      height: 100% !important;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 22px;
+      &::placeholder {
+        color: #939499;
+      }
+    }
+  }
+  &:hover {
+    border: 1px solid var(--Brand-6, #6d4cfe);
+    box-shadow: 0 8px 16px 0 rgba(109, 76, 254, 0.15);
+  }
+  &:focus-within {
+    border-color: #6d4cfe;
+    box-shadow: 0 8px 16px 0 rgba(109, 76, 254, 0.15);
+    .ant-input {
+      caret-color: #6d4cfe;
+    }
+  }
+}
diff --git a/src/styles/components/index.scss b/src/styles/components/index.scss
index 33c8e54..3f39bdf 100644
--- a/src/styles/components/index.scss
+++ b/src/styles/components/index.scss
@@ -9,4 +9,5 @@
 @import "./date-picker.scss";
 @import "./button.scss";
 @import "./steps.scss";
-@import "./form.scss";
\ No newline at end of file
+@import "./form.scss";
+@import "./chat-sender.scss";
\ No newline at end of file
diff --git a/src/styles/components/pagination.scss b/src/styles/components/pagination.scss
index 6d37a2b..44ecf3d 100644
--- a/src/styles/components/pagination.scss
+++ b/src/styles/components/pagination.scss
@@ -16,7 +16,7 @@
   }
   .arco-pagination-options {
     .arco-select {
-      background-color: transparent;
+      background-color: transparent !important;
       border-radius: 4px;
       border: 1px solid var(--BG-300, #e6e6e8);
     }
@@ -36,7 +36,7 @@
       line-height: 22px;
     }
     .arco-input-wrapper {
-      background-color: transparent;
+      background-color: transparent !important;
     }
   }
   .arco-pagination-total {
@@ -48,3 +48,10 @@
     line-height: 22px;
   }
 }
+.pagination-row {
+  display: flex;
+  width: 100%;
+  padding: 12px 24px 0;
+  justify-content: flex-end;
+  align-items: center;
+}
diff --git a/src/styles/font.scss b/src/styles/font.scss
index e6195d3..3b1ea9a 100644
--- a/src/styles/font.scss
+++ b/src/styles/font.scss
@@ -16,3 +16,29 @@
   font-family: 'Manrope-SemiBold';
   src: url('@/assets/fonts/Manrope-SemiBold.ttf');
 }
+
+.font-family-regular {
+  font-family: $font-family-regular;
+}
+.font-family-medium {
+  font-family: $font-family-medium;
+}
+.font-family-light {
+  font-family: $font-family-light;
+}
+.font-family-bold {
+  font-family: $font-family-bold;
+}
+
+.font-family-manrope-regular {
+  font-family: $font-family-manrope-regular;
+}
+.font-family-manrope-medium {
+  font-family: $font-family-manrope-medium;
+}
+.font-family-manrope-bold {
+  font-family: $font-family-manrope-bold;
+}
+.font-family-manrope-semiBold {
+  font-family: $font-family-manrope-semiBold;
+}
diff --git a/src/styles/lib/reset.scss b/src/styles/lib/reset.scss
index 6b94da8..4278a84 100644
--- a/src/styles/lib/reset.scss
+++ b/src/styles/lib/reset.scss
@@ -1,26 +1,29 @@
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  font-family: PingFangSC-Regular, PingFang SC;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
 html,
 body {
+  width: 100%;
   height: 100%;
-  background: $color-background;
+}
+#app {
+  height: 100%;
+  width: 100%;
+}
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+html {
   font-family: $font-family-regular;
   font-size: 14px;
   -webkit-print-color-adjust: exact;
 }
-
+body {
+  margin: 0;
+}
 p {
   margin: 0;
   padding: 0;
 }
-
 a {
   text-decoration: none;
 }
@@ -37,7 +40,7 @@ a {
 
 ::-webkit-scrollbar-thumb {
   height: 10px;
-  background-color: #C9CDD4;
+  background-color: #c9cdd4;
   border-radius: 99px;
   outline-offset: -2px;
 }
diff --git a/src/styles/lib/variable.scss b/src/styles/lib/variable.scss
index bdbef8f..b36a904 100644
--- a/src/styles/lib/variable.scss
+++ b/src/styles/lib/variable.scss
@@ -1,6 +1,9 @@
-
-$navbar-height: 72px; // 头部高度
-$sidebar-width: 220px; // 侧边栏菜单宽度
+$layout-min-width: 1200px;
+$navbar-height: 52px; // 头部高度
+$sidebar-width: 138px; // 侧边栏菜单宽度
+$sidebar-width-collapse: 74px; // 折叠侧边栏菜单宽度
+$layout-padding-bottom: 24px;
+$layout-padding-right: 24px;
 
 // 汉字字体
 $font-family-regular: 'PingFangSC-Regular', 'Microsoft Yahei', Arial, sans-serif;
@@ -14,46 +17,44 @@ $font-family-manrope-medium: 'Manrope-Medium';
 $font-family-manrope-bold: 'Manrope-Bold';
 $font-family-manrope-semiBold: 'Manrope-SemiBold';
 
-$color-background: #F7F8FA;
+$color-primary: #6d4cfe; // 常规
+$color-primary-5: #8a70fe; // hover
+$color-primary-7: #573dcb; // click
+$color-primary-3: #a794fe; // disabled
+$color-primary-2: #c5b7ff; // text disabled
+$color-primary-1: #f0edff; // 浅色
 
-$color-primary: #6d4cfe;   // 常规
-$color-primary-5: #8A70FE; // hover
-$color-primary-7: #573DCB; // click
-$color-primary-3: #A794FE; // disabled
-$color-primary-2: #C5B7FF; // text disabled
-$color-primary-1: #F0EDFF; // 浅色
+$color-success: #25c883;
+$color-success-5: #57cf9c;
+$color-success-7: #1bae71;
+$color-success-3: #81dbb5;
+$color-success-2: #abe7ce;
+$color-success-1: #ebf7f2;
 
-$color-success: #25C883;      
-$color-success-5: #57CF9C;
-$color-success-7: #1BAE71;
-$color-success-3: #81DBB5;
-$color-success-2: #ABE7CE;
-$color-success-1: #EBF7F2;  
+$color-warning: #ffae00;
+$color-warning-5: #ffbe33;
+$color-warning-7: #cc8b00;
+$color-warning-3: #ffcf66;
+$color-warning-2: #ffdf99;
+$color-warning-1: #fff7e5;
 
-$color-warning: #FFAE00;
-$color-warning-5: #FFBE33;
-$color-warning-7: #CC8B00;
-$color-warning-3: #FFCF66;
-$color-warning-2: #FFDF99;  
-$color-warning-1: #FFF7E5;  
+$color-error: #f64b31;
+$color-error-5: #f86f5a;
+$color-error-7: #c53c27;
+$color-error-3: #fa9383;
+$color-error-2: #fbb7ad;
+$color-error-1: #ffe9e7;
 
-$color-error: #F64B31;
-$color-error-5: #F86F5A;
-$color-error-7: #C53C27;
-$color-error-3: #FA9383;
-$color-error-2: #FBB7AD;
-$color-error-1: #FFE9E7;
+$color-blue: #2a59f3;
+$color-blue-5: #557af6;
+$color-blue-7: #2247c2;
+$color-blue-3: #7f9cf8;
+$color-blue-2: #aabdfa;
+$color-blue-1: #e5ecff;
 
-$color-blue: #2A59F3;
-$color-blue-5: #557AF6;
-$color-blue-7: #2247C2;
-$color-blue-3: #7F9CF8;
-$color-blue-2: #AABDFA;
-$color-blue-1: #E5ECFF;
-
-$color-teal: #39C6E9;
-$color-teal-5: #60D2ED;
-$color-teal-7: #2E9EBA;
-$color-teal-3: #88DDF2;
-$color-teal-2: #B0E8F6;
-$color-teal-1: #E1F9FF;
\ No newline at end of file
+$color-teal: #39c6e9;
+$color-teal-5: #60d2ed;
+$color-teal-7: #2e9eba;
+$color-teal-3: #88ddf2;
+$color-teal-2: #b0e8f6;
+$color-teal-1: #e1f9ff;
diff --git a/src/styles/vars.scss b/src/styles/vars.scss
index 8741cbe..536ee42 100644
--- a/src/styles/vars.scss
+++ b/src/styles/vars.scss
@@ -13,6 +13,21 @@
   /* 修改文字/背景色 */
   --arco-text-1: #ed0707 !important; /* 主要文字 */
   --arco-bg-1: #f7f8fa !important; /* 页面背景 */
+  
+  &::before {
+    width: 100%;
+    height: 100vh;
+    background: url('@/assets/img/icon-app-bg.png') center top no-repeat !important;
+    background-size: cover !important;
+    bottom: 0;
+    content: "";
+    display: block;
+    left: 0;
+    position: fixed;
+    right: 0;
+    top: 0;
+    z-index: -999;
+  }
 }
 
 /* 强制所有组件使用主色 */
diff --git a/src/types/chat.ts b/src/types/chat.ts
new file mode 100644
index 0000000..5e25cc6
--- /dev/null
+++ b/src/types/chat.ts
@@ -0,0 +1,9 @@
+declare global {
+  namespace CHAT {
+    type TInputInfo = {
+      message: string;
+    };
+  }
+}
+
+export default {};
diff --git a/src/types/message.ts b/src/types/message.ts
new file mode 100644
index 0000000..b10a012
--- /dev/null
+++ b/src/types/message.ts
@@ -0,0 +1,28 @@
+declare global {
+  namespace MESSAGE {
+    type RUN_TASK_STATUS = 'RunStarted' | 'RunResponseContent' | 'RunCompleted';
+    type TEAM_RUN_TASK_STATUS = 'TeamRunStarted' | 'TeamRunResponseContent' | 'TeamRunCompleted';
+
+    interface Answer {
+      message?: string;
+      role?: string;
+      node?: string;
+      output?: string;
+      run_id?: string;
+      step_run_id?: string;
+      teamRunTaskId?: string;
+      isCollapse?: boolean;
+      status?: RUN_TASK_STATUS | TEAM_RUN_TASK_STATUS;
+      runStatus?: RUN_TASK_STATUS;
+      teamRunStatus?: TEAM_RUN_TASK_STATUS;
+      fileInfo?: Record<string, any>;
+      customRender?: () => Node;
+      extra_data?: {
+        type: string;
+        data: Record<string, any>;
+      };
+      [key: string]: any;
+    }
+  }
+}
+export default {};
diff --git a/src/utils/pick-attrs.ts b/src/utils/pick-attrs.ts
new file mode 100644
index 0000000..bf87de6
--- /dev/null
+++ b/src/utils/pick-attrs.ts
@@ -0,0 +1,80 @@
+/*
+ * @Author: RenXiaoDong
+ * @Date: 2025-08-20 23:43:17
+ */
+const attributes = `accept acceptcharset accesskey action allowfullscreen allowtransparency
+alt async autocomplete autofocus autoplay capture cellpadding cellspacing challenge
+charset checked classid class colspan cols content contenteditable contextmenu
+controls coords crossorigin data datetime default defer dir disabled download draggable
+enctype form formaction formenctype formmethod formnovalidate formtarget frameborder
+headers height hidden high href hreflang htmlfor for httpequiv icon id inputmode integrity
+is keyparams keytype kind label lang list loop low manifest marginheight marginwidth max maxlength media
+mediagroup method min minlength multiple muted name novalidate nonce open
+optimum pattern placeholder poster preload radiogroup readonly rel required
+reversed role rowspan rows sandbox scope scoped scrolling seamless selected
+shape size sizes span spellcheck src srcdoc srclang srcset start step style
+summary tabindex target title type usemap value width wmode wrap`;
+
+const eventsName = `onCopy onCut onPaste onCompositionend onCompositionstart onCompositionupdate onKeydown
+    onKeypress onKeyup onFocus onBlur onChange onInput onSubmit onClick onContextmenu onDoubleclick onDblclick
+    onDrag onDragend onDragenter onDragexit onDragleave onDragover onDragstart onDrop onMousedown
+    onMouseenter onMouseleave onMousemove onMouseout onMouseover onMouseup onSelect onTouchcancel
+    onTouchend onTouchmove onTouchstart onTouchstartPassive onTouchmovePassive onScroll onWheel onAbort onCanplay onCanplaythrough
+    onDurationchange onEmptied onEncrypted onEnded onError onLoadeddata onLoadedmetadata
+    onLoadstart onPause onPlay onPlaying onProgress onRatechange onSeeked onSeeking onStalled onSuspend onTimeupdate onVolumechange onWaiting onLoad onError`;
+
+const propList = `${attributes} ${eventsName}`.split(/[\s\n]+/);
+
+/* eslint-enable max-len */
+const ariaPrefix = 'aria-';
+const dataPrefix = 'data-';
+
+function match(key: string, prefix: string) {
+  return key.indexOf(prefix) === 0;
+}
+
+export interface PickConfig {
+  aria?: boolean;
+  data?: boolean;
+  attr?: boolean;
+}
+
+/**
+ * Picker props from exist props with filter
+ * @param props Passed props
+ * @param ariaOnly boolean | { aria?: boolean; data?: boolean; attr?: boolean; } filter config
+ */
+export default function pickAttrs(props: object, ariaOnly: boolean | PickConfig = false) {
+  let mergedConfig;
+  if (ariaOnly === false) {
+    mergedConfig = {
+      aria: true,
+      data: true,
+      attr: true,
+    };
+  } else if (ariaOnly === true) {
+    mergedConfig = {
+      aria: true,
+    };
+  } else {
+    mergedConfig = {
+      ...ariaOnly,
+    };
+  }
+
+  const attrs = {};
+  Object.keys(props).forEach((key) => {
+    if (
+      // Aria
+      (mergedConfig.aria && (key === 'role' || match(key, ariaPrefix))) ||
+      // Data
+      (mergedConfig.data && match(key, dataPrefix)) ||
+      // Attr
+      (mergedConfig.attr && (propList.includes(key) || propList.includes(key.toLowerCase())))
+    ) {
+      // @ts-ignore
+      attrs[key] = props[key];
+    }
+  });
+  return attrs;
+}
diff --git a/src/utils/querySSE.ts b/src/utils/querySSE.ts
new file mode 100644
index 0000000..1ea53d6
--- /dev/null
+++ b/src/utils/querySSE.ts
@@ -0,0 +1,90 @@
+import { fetchEventSource } from '@microsoft/fetch-event-source';
+import type { EventSourceMessage } from '@microsoft/fetch-event-source';
+import { useEnterpriseStore } from '@/stores/modules/enterprise';
+import { glsWithCatch } from '@/utils/stroage';
+import { BASE_PYTHON_URL } from '@/api/all/chat';
+import { genRandomId } from '@/utils/tools';
+
+const DEFAULT_SSE_URL = `${BASE_PYTHON_URL}/api/agent/runs`;
+
+const SSE_HEADERS = {
+  'Content-Type': 'application/json',
+  'Cache-Control': 'no-cache',
+  Connection: 'keep-alive',
+  Accept: 'text/event-stream',
+};
+
+interface SSEConfig {
+  headers?: Record<string, string | number>;
+  method?: string;
+  body?: any;
+  handleMessage?: (data: any) => void;
+  handleError?: (err: any) => number | null | undefined | void;
+  handleClose?: () => void;
+  handleOpen?: (response: Response) => void;
+}
+
+/**
+ * 创建服务器发送事件（SSE）连接
+ * @param config SSE 配置
+ * @param url 可选的自定义 URL
+ * @returns 包含abort方法的对象，用于中断SSE连接
+ */
+export default async (config: SSEConfig, url: string = DEFAULT_SSE_URL): Promise<{ abort: () => void }> => {
+  const {
+    body = undefined,
+    headers = {},
+    method = 'post',
+    handleMessage,
+    handleError,
+    handleOpen,
+    handleClose,
+  } = config;
+  const store = useEnterpriseStore();
+
+  // 创建AbortController实例用于中断请求
+  const abortController = new AbortController();
+
+  fetchEventSource(url, {
+    method,
+    // credentials: 'include',
+    headers: {
+      ...SSE_HEADERS,
+      Authorization: glsWithCatch('accessToken'),
+      'enterprise-id': store.enterpriseInfo?.id?.toString(),
+      requestid: genRandomId(),
+      ...headers,
+    },
+    body,
+    signal: abortController.signal, // 传递signal给fetchEventSource
+    openWhenHidden: true, // 用户切换到另一个页面后仍能保持SSE连接
+    onmessage(event: EventSourceMessage) {
+      if (event.data) {
+        try {
+          const parsedData = JSON.parse(event.data);
+          handleMessage?.({ ...event, data: parsedData });
+        } catch (error) {
+          console.error('Error parsing SSE message:', error);
+          handleError(new Error('Failed to parse SSE message'));
+        }
+      }
+    },
+    onerror(error: Error) {
+      //   console.error('SSE error:', error);
+      handleError?.(error);
+    },
+    onclose() {
+      //   console.log('SSE connection closed');
+      handleClose?.();
+    },
+    async onopen(response: Response) {
+      //   console.log('onopen', response);
+      handleOpen?.(response);
+    },
+  });
+
+  // 返回abort方法供外部调用
+  return {
+    abort: () => abortController.abort(),
+  };
+};
diff --git a/src/utils/tools.ts b/src/utils/tools.ts
index bf1c356..da345bb 100644
--- a/src/utils/tools.ts
+++ b/src/utils/tools.ts
@@ -108,14 +108,14 @@ export function downloadByUrl(url: string, filename?: string) {
 }
 
 export function genRandomId() {
-  return `id_${Date.now()}_${Math.floor(Math.random() * 10000)}`;
+  return `id_${dayjs().unix()}_${Math.floor(Math.random() * 10000)}`;
 }
 
 export function formatFileSize(bytes: number): string {
   if (bytes === 0) return '0 Bytes';
 
   const k = 1024;
-  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+  const sizes = ['Bytes', '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];
@@ -397,7 +397,7 @@ export function getImageMainColor(imageUrl: string): Promise<string> {
       const avgColor = {
         r: Math.round(maxGroup.sumR / maxGroup.count),
         g: Math.round(maxGroup.sumG / maxGroup.count),
-        b: Math.round(maxGroup.sumB / maxGroup.count)
+        b: Math.round(maxGroup.sumB / maxGroup.count),
       };
 
       resolve(`rgb(${avgColor.r},${avgColor.g},${avgColor.b})`);
@@ -427,28 +427,38 @@ function medianCut(data: Uint8ClampedArray, levels: number): any[] {
     if (a < 128) continue;
 
     colors.push({
-      r, g, b,
+      r,
+      g,
+      b,
       count: 1,
-      sumR: r, sumG: g, sumB: b
+      sumR: r,
+      sumG: g,
+      sumB: b,
     });
   }
 
   // 如果没有颜色数据，返回默认白色
   if (colors.length === 0) {
-    return [{
-      count: 1,
-      sumR: 255, sumG: 255, sumB: 255
-    }];
+    return [
+      {
+        count: 1,
+        sumR: 255,
+        sumG: 255,
+        sumB: 255,
+      },
+    ];
   }
 
   // 开始中位数切分
-  let colorGroups = [{
-    colors,
-    count: colors.length,
-    sumR: colors.reduce((sum, c) => sum + c.r, 0),
-    sumG: colors.reduce((sum, c) => sum + c.g, 0),
-    sumB: colors.reduce((sum, c) => sum + c.b, 0)
-  }];
+  let colorGroups = [
+    {
+      colors,
+      count: colors.length,
+      sumR: colors.reduce((sum, c) => sum + c.r, 0),
+      sumG: colors.reduce((sum, c) => sum + c.g, 0),
+      sumB: colors.reduce((sum, c) => sum + c.b, 0),
+    },
+  ];
 
   for (let i = 0; i < levels; i++) {
     const newGroups = [];
@@ -460,12 +470,12 @@ function medianCut(data: Uint8ClampedArray, levels: number): any[] {
       }
 
       // 找出颜色范围最大的通道
-      const rMin = Math.min(...group.colors.map(c => c.r));
-      const rMax = Math.max(...group.colors.map(c => c.r));
-      const gMin = Math.min(...group.colors.map(c => c.g));
-      const gMax = Math.max(...group.colors.map(c => c.g));
-      const bMin = Math.min(...group.colors.map(c => c.b));
-      const bMax = Math.max(...group.colors.map(c => c.b));
+      const rMin = Math.min(...group.colors.map((c) => c.r));
+      const rMax = Math.max(...group.colors.map((c) => c.r));
+      const gMin = Math.min(...group.colors.map((c) => c.g));
+      const gMax = Math.max(...group.colors.map((c) => c.g));
+      const bMin = Math.min(...group.colors.map((c) => c.b));
+      const bMax = Math.max(...group.colors.map((c) => c.b));
 
       const rRange = rMax - rMin;
       const gRange = gMax - gMin;
@@ -500,7 +510,7 @@ function medianCut(data: Uint8ClampedArray, levels: number): any[] {
         count: group1.length,
         sumR: group1.reduce((sum, c) => sum + c.r, 0),
         sumG: group1.reduce((sum, c) => sum + c.g, 0),
-        sumB: group1.reduce((sum, c) => sum + c.b, 0)
+        sumB: group1.reduce((sum, c) => sum + c.b, 0),
       });
 
       newGroups.push({
@@ -508,7 +518,7 @@ function medianCut(data: Uint8ClampedArray, levels: number): any[] {
         count: group2.length,
         sumR: group2.reduce((sum, c) => sum + c.r, 0),
         sumG: group2.reduce((sum, c) => sum + c.g, 0),
-        sumB: group2.reduce((sum, c) => sum + c.b, 0)
+        sumB: group2.reduce((sum, c) => sum + c.b, 0),
       });
     }
 
@@ -516,4 +526,4 @@ function medianCut(data: Uint8ClampedArray, levels: number): any[] {
   }
 
   return colorGroups;
-}
\ No newline at end of file
+}
diff --git a/src/utils/type.ts b/src/utils/type.ts
new file mode 100644
index 0000000..3dc49dd
--- /dev/null
+++ b/src/utils/type.ts
@@ -0,0 +1,13 @@
+/*
+ * @Author: RenXiaoDong
+ * @Date: 2025-08-20 23:18:36
+ */
+import type { PropType, VNode } from 'vue';
+
+declare type VNodeChildAtom = VNode | string | number | boolean | null | undefined | void;
+
+export type VueNode = VNodeChildAtom | VNodeChildAtom[] | VNode;
+
+export function objectType<T = {}>(defaultVal?: T) {
+  return { type: Object as PropType<T>, default: defaultVal as T };
+}
diff --git a/src/utils/user.ts b/src/utils/user.ts
index 599f788..99fcf29 100644
--- a/src/utils/user.ts
+++ b/src/utils/user.ts
@@ -7,6 +7,7 @@ import router from '@/router';
 import { useUserStore } from '@/stores';
 import { useEnterpriseStore } from '@/stores/modules/enterprise';
 import { useSidebarStore } from '@/stores/modules/side-bar';
+import { useChatStore } from '@/stores/modules/chat';
 
 // 登录
 export function goUserLogin(query?: any) {
@@ -15,29 +16,37 @@ export function goUserLogin(query?: any) {
 
 export const getUserEnterpriseInfo = async () => {
   const enterpriseStore = useEnterpriseStore();
-  const sidebarStore = useSidebarStore();
-  const userStore = useUserStore();
+  // const sidebarStore = useSidebarStore();
+  // const userStore = useUserStore();
 
   await enterpriseStore.getEnterpriseInfo(); // 初始化企业信息
-  sidebarStore.getUserNavbarMenuList(); // 初始化navbar菜单
-  userStore.getUserAllowAccessRoutes(); // 初始化允许访问的路由
+  // sidebarStore.getUserNavbarMenuList(); // 初始化navbar菜单
+  // userStore.getUserAllowAccessRoutes(); // 初始化允许访问的路由
 };
 
+export async function initApp() {
+  const userStore = useUserStore();
+  const chatStore = useChatStore();
+
+  await chatStore.getAgentInfo(); // 初始化智能体信息
+  await userStore.getUserInfo(); // 初始化用户信息
+  await getUserEnterpriseInfo(); // 初始化企业信息、navbar菜单、允许访问的路由
+}
+
 // 登录处理
 export async function handleUserLogin() {
-  const userStore = useUserStore();
   const sidebarStore = useSidebarStore();
 
-  await userStore.getUserInfo(); // 初始化用户信息
-  await getUserEnterpriseInfo(); // 初始化企业信息、navbar菜单、允许访问的路由
+  await initApp();
+
   sidebarStore.startUnreadInfoPolling(); // 初始化未读信息
 
   handleUserHome();
 }
 
 // 首页
-export function handleUserHome() {
-  router.push({ name: 'Home' });
+export function handleUserHome(params?: any) {
+  router.push({ name: 'Home', params });
 }
 
 // 登出处理
@@ -45,14 +54,16 @@ export function handleUserLogout() {
   const userStore = useUserStore();
   const enterpriseStore = useEnterpriseStore();
   const sidebarStore = useSidebarStore();
+  const chatStore = useChatStore();
 
+  chatStore.clearAgentInfo(); // 清除智能体信息
   userStore.clearUserInfo(); // 清除用户信息
   userStore.clearToken(); // 清除token
   enterpriseStore.clearUserEnterpriseInfo(); // 清除企业信息
-  sidebarStore.clearUserNavbarMenuList(); // 清除navbar菜单信息
-  userStore.clearUserAllowAccessRoutes(); // 清除权限路由列表
+  // userStore.clearUserAllowAccessRoutes(); // 清除权限路由列表
   sidebarStore.stopUnreadInfoPolling(); // 清除未读消息
-  sidebarStore.clearActiveMenuId(); // 清除active菜单id
+  sidebarStore.clearActiveMenuKey(); // 清除active菜单id
+  sidebarStore.clearMenuCollapse(); // 清除active菜单id
 
   goUserLogin();
 }
diff --git a/src/views/agent/chat/index.vue b/src/views/agent/chat/index.vue
index a1cfd59..205cd93 100644
--- a/src/views/agent/chat/index.vue
+++ b/src/views/agent/chat/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="px-4px h-full flex flex-col overflow-y-auto">
+  <div class="pl-16px h-full flex flex-col overflow-y-auto">
     <div class="back-wap cursor-pointer mb-17px mt--3px !w-fit" @click="goChatIndex">
       <icon-left size="16" class="color-#737478 mr-4px" />
       <span class="cs">返回空间</span>
diff --git a/src/views/agent/index/index.vue b/src/views/agent/index/index.vue
index 75efe6b..5a09ef0 100644
--- a/src/views/agent/index/index.vue
+++ b/src/views/agent/index/index.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="agent-wrap relative h-full">
+  <div class="agent-wrap relative h-full pl-16px">
     <a-input
       v-model="query.name"
       @press-enter="getData()"
       placeholder="搜索智能体"
       size="large"
       allow-clear
-      class="absolute right-0 top--10px  !w-400px"
+      class="absolute right-0 top-4px  !w-400px"
     >
       <template #prefix>
         <icon-search @click="getData()" />
diff --git a/src/views/agent/work-flow/components/DynamicForm.vue b/src/views/agent/work-flow/components/DynamicForm.vue
index f1fd9fe..ae298f3 100644
--- a/src/views/agent/work-flow/components/DynamicForm.vue
+++ b/src/views/agent/work-flow/components/DynamicForm.vue
@@ -21,9 +21,9 @@
           v-model="formData[field.props.name]"
           :placeholder="field?.props?.placeholder"
         />
-        <a-color-picker    v-if="field.type === 'color_picker'"
+        <!-- <a-color-picker    v-if="field.type === 'color_picker'"
                               style="width: 500px; height: 200px"
-                              v-model="formData[field.props.name]" />
+                              v-model="formData[field.props.name]" /> -->
         <ImageUpload
           v-if="field.type == 'upload_image'"
           v-model="formData[field.props.name]"
diff --git a/src/views/components/dataEngine/hotCloud.vue b/src/views/components/dataEngine/hotCloud.vue
index 1536621..5b9a08c 100644
--- a/src/views/components/dataEngine/hotCloud.vue
+++ b/src/views/components/dataEngine/hotCloud.vue
@@ -1,10 +1,7 @@
 <template>
   <view>
     <topHeader ref="topHeaderRef" @search="search"></topHeader>
-    <a-space
-      direction="vertical"
-      class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px mb-24px"
-    >
+    <a-space direction="vertical" class="bg-#fff rounded-8px w-100% py-0 px-20px mb-24px">
       <div class="title-row">
         <span class="title mr-4px">行业词云</span>
         <a-tooltip>
diff --git a/src/views/components/dataEngine/hotTranslation.vue b/src/views/components/dataEngine/hotTranslation.vue
index 1e3be9f..8b7b6aa 100644
--- a/src/views/components/dataEngine/hotTranslation.vue
+++ b/src/views/components/dataEngine/hotTranslation.vue
@@ -4,7 +4,7 @@
     <!-- tabel -->
     <a-space
       direction="vertical"
-      class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px mb-24px"
+      class="bg-#fff rounded-8px w-100% py-0 px-20px mb-24px"
     >
       <div class="title-row">
         <span class="title mr-4px">行业热门话题洞察</span>
diff --git a/src/views/components/dataEngine/keyBrandMovement.vue b/src/views/components/dataEngine/keyBrandMovement.vue
index 3e67d96..adc742b 100644
--- a/src/views/components/dataEngine/keyBrandMovement.vue
+++ b/src/views/components/dataEngine/keyBrandMovement.vue
@@ -5,7 +5,7 @@
     <!-- 重点品牌列表 -->
     <a-space
       direction="vertical"
-      class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px mb-24px"
+      class="bg-#fff rounded-8px  w-100% py-0 px-20px mb-24px"
     >
       <div class="title-row">
         <span class="title mr-4px">重点品牌列表</span>
@@ -76,7 +76,7 @@
     <!--  舆情 & 敏感动态-->
     <a-space
       direction="vertical"
-      class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px mb-24px"
+      class="bg-#fff rounded-8px  w-100% py-0 px-20px mb-24px"
     >
       <div class="title-row">
         <span class="title mr-4px">舆情 & 敏感动态</span>
diff --git a/src/views/components/dataEngine/keyWord.vue b/src/views/components/dataEngine/keyWord.vue
index c462718..77d15b6 100644
--- a/src/views/components/dataEngine/keyWord.vue
+++ b/src/views/components/dataEngine/keyWord.vue
@@ -5,7 +5,7 @@
     <!-- 关键词热度榜 -->
     <a-space
       direction="vertical"
-      class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px mb-20px"
+      class="bg-#fff rounded-8px  w-100% py-0 px-20px mb-20px"
     >
       <div class="title-row">
         <span class="title mr-4px">关键词热度榜</span>
@@ -74,7 +74,7 @@
     <!-- 行业情绪 -->
     <a-space
       direction="vertical"
-      class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px mb-24px"
+      class="bg-#fff rounded-8px  w-100% py-0 px-20px mb-24px"
     >
       <div class="title-row">
         <span class="title mr-4px">行业情绪</span>
@@ -128,7 +128,7 @@
     <!-- 新兴关键词 -->
     <a-space
       direction="vertical"
-      class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px"
+      class="bg-#fff rounded-8px  w-100% py-0 px-20px"
     >
       <div class="title-row">
         <span class="title mr-4px">新兴关键词</span>
diff --git a/src/views/components/dataEngine/topHeader.vue b/src/views/components/dataEngine/topHeader.vue
index 60367cc..83b17d5 100644
--- a/src/views/components/dataEngine/topHeader.vue
+++ b/src/views/components/dataEngine/topHeader.vue
@@ -3,7 +3,7 @@
     <!-- 头部 -->
     <a-space
       direction="vertical"
-      class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid mb-20px"
+      class="bg-#fff rounded-8px mb-20px"
       style="background-color: #fff; width: 100%; padding: 24px; color: #737478; font-size: 14px"
     >
       <a-space align="start" style="width: 100%; align-items: flex-start" class="mb-12px">
diff --git a/src/views/components/dataEngine/userPainPoints.vue b/src/views/components/dataEngine/userPainPoints.vue
index e8cd5ca..fb88eb5 100644
--- a/src/views/components/dataEngine/userPainPoints.vue
+++ b/src/views/components/dataEngine/userPainPoints.vue
@@ -6,7 +6,7 @@
     <a-space
       direction="vertical"
       style="background-color: #fff; width: 100%; padding: 0 20px"
-      class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid mb-24px"
+      class="bg-#fff rounded-8px  mb-24px"
     >
       <div class="title-row">
         <span class="title mr-4px">用户痛点观察</span>
diff --git a/src/views/components/dataEngine/userPersona.vue b/src/views/components/dataEngine/userPersona.vue
index 53a053a..2689513 100644
--- a/src/views/components/dataEngine/userPersona.vue
+++ b/src/views/components/dataEngine/userPersona.vue
@@ -3,7 +3,7 @@
     <topHeader ref="topHeaderRef" @search="search"></topHeader>
     <div class="h-360px w-100% flex mb-24px">
       <!-- 1. 性别分布 -->
-      <div class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px w-600px mr-24px">
+      <div class="bg-#fff rounded-8px  w-100% py-0 px-20px w-600px mr-24px">
         <div class="title-row">
           <span class="title mr-4px">性别分布</span>
           <a-tooltip>
@@ -36,7 +36,7 @@
         </div>
       </div>
       <!-- 2. 年龄分布 -->
-      <div class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px flex-1 flex flex-col">
+      <div class="bg-#fff rounded-8px  w-100% py-0 px-20px flex-1 flex flex-col">
         <a-space style="display: flex; justify-content: space-between; width: 100%; font-size: 12px">
           <div class="title-row">
             <span class="title mr-4px">年龄分布</span>
@@ -58,7 +58,7 @@
         <div v-else id="age-container" class="w-100% flex-1"></div>
       </div>
     </div>
-    <div class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px flex-1 pb-20px">
+    <div class="bg-#fff rounded-8px  w-100% py-0 px-20px flex-1 pb-20px">
       <div class="title-row">
         <span class="title mr-4px">地域分布</span>
         <a-tooltip>
diff --git a/src/views/components/login/index.vue b/src/views/components/login/index.vue
index 238c240..d3f1270 100644
--- a/src/views/components/login/index.vue
+++ b/src/views/components/login/index.vue
@@ -15,7 +15,7 @@
           align="center"
           class="w-400 bg-#fff rounded-8px shadow-[0_4px_10px_0_#6D4CFE33] px-40px py-48px"
         >
-          <img src="@/assets/img/LOGO.svg" alt="" class="w-155 h-37 mb-8px" />
+          <img src="@/assets/img/icon-logo.png" alt="" width="96" height="24" class="mb-8px" />
           <span class="text-4 color-#737478">AI营销工具</span>
           <a-form ref="formRef" :model="loginForm" :rules="formRules" auto-label-width class="w-320 mt-48px form-wrap">
             <a-form-item field="mobile" hide-label>
diff --git a/src/views/components/management/account/index.vue b/src/views/components/management/account/index.vue
index d688822..de43f76 100644
--- a/src/views/components/management/account/index.vue
+++ b/src/views/components/management/account/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px mt-24px pb-24px">
+  <div class="bg-#fff rounded-8px w-100% py-0 px-20px pb-24px">
     <div class="title-row">
       <span class="title">账号管理</span>
       <a-button type="outline" class="add-account-button" @click="handleAddAccount">添加子账号</a-button>
@@ -8,7 +8,7 @@
       :columns="columns"
       :data="dataSource"
       :pagination="pagination"
-      class="mt-8px h-540px"
+      class="mt-8px"
       @page-change="handlePageChange"
       @page-size-change="handlePageSizeChange"
     >
diff --git a/src/views/components/management/enterprise/index.vue b/src/views/components/management/enterprise/index.vue
index 95f3b8b..7329b1d 100644
--- a/src/views/components/management/enterprise/index.vue
+++ b/src/views/components/management/enterprise/index.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px mt-24px pb-24px">
+  <div class="bg-#fff rounded-8px w-100% py-0 px-20px pb-24px">
     <div class="title-row">
       <span class="title">企业信息</span>
     </div>
-    <a-table :columns="columns" :data="dataSource" :pagination="false" class="mt-8px h-540px">
+    <a-table :columns="columns" :data="dataSource" :pagination="false" class="mt-8px">
       <template #empty>
         <NoData />
       </template>
diff --git a/src/views/components/management/person/index.vue b/src/views/components/management/person/index.vue
index 373d4f4..293e3b5 100644
--- a/src/views/components/management/person/index.vue
+++ b/src/views/components/management/person/index.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px mt-24px pb-24px">
+  <div class="bg-#fff rounded-8px w-100% py-0 px-20px pb-24px">
     <div class="title-row">
       <span class="title">个人信息</span>
     </div>
-    <a-table :columns="columns" :data="dataSource" :pagination="false" class="mt-8px h-540px">
+    <a-table :columns="columns" :data="dataSource" :pagination="false" class="mt-8px">
       <template #empty>
         <NoData />
       </template>
diff --git a/src/views/creative-generation-workshop/manuscript-analysis/index.vue b/src/views/creative-generation-workshop/manuscript-analysis/index.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/src/views/creative-generation-workshop/manuscript-writer/list/style.scss b/src/views/creative-generation-workshop/manuscript-writer/list/style.scss
deleted file mode 100644
index fbb2fb8..0000000
--- a/src/views/creative-generation-workshop/manuscript-writer/list/style.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-.manuscript-list-wrap {
-  // height: 100%;
-  display: flex;
-  flex-direction: column;
-  .filter-wrap {
-    .top {
-      .title {
-        font-family: $font-family-medium;
-        font-style: normal;
-      }
-      :deep(.arco-btn) {
-        .arco-btn-icon {
-          line-height: 16px;
-        }
-      }
-    }
-  }
-  .table-wrap {
-    display: flex;
-    flex-direction: column;
-    .pagination-box {
-      display: flex;
-      width: 100%;
-      padding: 16px 24px 0;
-      justify-content: flex-end;
-      align-items: center;
-    }
-  }
-}
diff --git a/src/views/home/components/created/index.vue b/src/views/home/components/created/index.vue
new file mode 100644
index 0000000..dd88f6a
--- /dev/null
+++ b/src/views/home/components/created/index.vue
@@ -0,0 +1,60 @@
+<script lang="tsx">
+import { message } from 'ant-design-vue';
+import ExpandableTags from '@/components/expandable-tags/index.vue';
+import SenderInput from '../sender-input/index.vue';
+
+import { useChatStore } from '@/stores/modules/chat';
+
+export default {
+  setup(props, { emit, expose }) {
+    const senderRef = ref(null);
+    const searchValue = ref('');
+    const chatStore = useChatStore();
+
+    const handleSubmit = () => {
+      handleSearch();
+    };
+
+    const handleSearch = async () => {
+      chatStore.setSearchValue(searchValue.value);
+      chatStore.onCreateSession();
+    };
+
+    const tagList = [
+      '汇总账号昨天的运营情况',
+      '查账号本月点赞量 Top3 的笔记详情',
+      '统计投流账户上周的消耗金额 + 点击率',
+      '把昨天漏采数据的账号重新抓取一次数据',
+      '规划账号未来 2 周的内容发布排期和选题',
+      '根据账号的已有选题生成具体内容稿件',
+      '根据热点生成账号的选题及内容',
+    ];
+
+    const handleTagClick = (tag: string) => {
+      searchValue.value = tag;
+      senderRef.value?.focus();
+    };
+
+
+    return () => (
+      <div class="create-conversation-wrap w-full h-full flex justify-center">
+        <div class="main w-600px pt-120px">
+          <p class="title mb-16px">
+            <span>营小智，7x24小时</span>
+            <span class="s1">AI营销</span>
+            <span>团队</span>
+          </p>
+          <p class="cts  text-center mb-104px">AI 辅助账号托管账号 ｜ 自动生成爆款内容 ｜ 定时任务发布</p>
+          <SenderInput ref={senderRef} v-model={searchValue.value} onSubmit={handleSubmit} class="mb-24px" />
+          <p class="cts mb-6px">可以试试这样下发任务：</p>
+          <ExpandableTags tags={tagList} clickable onTagClick={handleTagClick} />
+        </div>
+      </div>
+    );
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import './style.scss';
+</style>
diff --git a/src/views/home/components/created/style.scss b/src/views/home/components/created/style.scss
new file mode 100644
index 0000000..c5fd26c
--- /dev/null
+++ b/src/views/home/components/created/style.scss
@@ -0,0 +1,32 @@
+.create-conversation-wrap {
+  .cts {
+    color: var(--Text-1, #737478);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+  }
+  .main {
+    .title {
+      color: var(--Text-1, #211f24);
+      text-align: center;
+      font-family: $font-family-medium;
+      font-size: 32px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 48px;
+      .s1 {
+        background: linear-gradient(90deg, #6d4cfe 38.12%, #b93bf0 100%);
+        background-clip: text;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+    }
+    :deep(.expandable-tags-container) {
+      .tag-list {
+        row-gap: 6px;
+        column-gap: 12px;
+      }
+    }
+  }
+}
diff --git a/src/views/home/components/history-conversation-drawer/delete-chat-modal.vue b/src/views/home/components/history-conversation-drawer/delete-chat-modal.vue
new file mode 100644
index 0000000..bccba35
--- /dev/null
+++ b/src/views/home/components/history-conversation-drawer/delete-chat-modal.vue
@@ -0,0 +1,51 @@
+<template>
+  <a-modal v-model:visible="visible" title="删除对话" width="400px" @close="onClose">
+    <div class="flex items-center">
+      <img :src="icon1" width="20" height="20" class="mr-12px" />
+      <span>确认删除对话吗？删除后，聊天记录将不可恢复。</span>
+    </div>
+    <template #footer>
+      <a-button size="large" @click="onClose">取消</a-button>
+      <a-button type="primary" class="ml-16px !bg-#f64b31 !border-none" status="danger" size="large" @click="onDelete"
+        >确定</a-button
+      >
+    </template>
+  </a-modal>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { deleteHistoryItem } from '@/api/all/chat';
+import icon1 from '@/assets/img/media-account/icon-warn-1.png';
+
+const emits = defineEmits(['update', 'close', 'batchUpdate']);
+
+const visible = ref(false);
+const conversationId = ref(null);
+
+// const isBatch = computed(() => Array.isArray(taskId.value));
+
+function onClose() {
+  visible.value = false;
+  conversationId.value = null;
+  emits('close');
+}
+
+const open = (record) => {
+  const { id = null } = record;
+  conversationId.value = id;
+
+  visible.value = true;
+};
+
+async function onDelete() {
+  const { code } = await deleteHistoryItem(conversationId.value);
+  if (code === 200) {
+    AMessage.success('删除成功');
+    emits('delete', conversationId.value);
+    onClose();
+  }
+}
+
+defineExpose({ open });
+</script>
diff --git a/src/views/home/components/history-conversation-drawer/index.vue b/src/views/home/components/history-conversation-drawer/index.vue
new file mode 100644
index 0000000..46c2f97
--- /dev/null
+++ b/src/views/home/components/history-conversation-drawer/index.vue
@@ -0,0 +1,125 @@
+<script lang="jsx">
+import { Drawer, message } from 'ant-design-vue';
+import TextoverTips from '@/components/text-over-tips';
+import Conversations from '@/components/xt-chat/xt-conversations';
+import SvgIcon from '@/components/svg-icon';
+import { Button, Flex, Input } from 'ant-design-vue';
+import DeleteChatModal from './delete-chat-modal.vue';
+import NoData from '@/components/no-data/index.vue';
+
+import { handleUserHome } from '@/utils/user';
+import { useRouter } from 'vue-router';
+import { getAgentHistory, postUpdateSessionTitle, postUpdateSessionSort } from '@/api/all/chat';
+import { useChatStore } from '@/stores/modules/chat';
+
+export default {
+  setup(props, { emit, expose }) {
+    const router = useRouter();
+    const chatStore = useChatStore();
+
+    const open = ref(false);
+    const dataSource = ref([]);
+    const activeKey = ref('');
+    const deleteChatModalRef = ref(null);
+
+    const showDrawer = (id) => {
+      getData();
+      open.value = true;
+    };
+    const getData = async () => {
+      const { code, data } = await getAgentHistory(chatStore.agentInfo.agent_id);
+      if (code === 200) {
+        dataSource.value = data.map((item) => ({
+          ...item,
+          key: item.id,
+          label: item.title,
+        }));
+      }
+    };
+    const onPin = async (item) => {
+      const { id, sort } = item;
+      // sort大于0就是已置顶
+      const is_top = sort > 0 ? 0 : 1;
+      const { code } = await postUpdateSessionSort({
+        id,
+        is_top,
+        agent_id: chatStore.agentInfo.agent_id,
+      });
+      if (code === 200) {
+        message.success(is_top === 0 ? '取消置顶成功' : '置顶成功');
+        getData();
+      }
+    };
+    const onClose = () => {
+      activeKey.value = '';
+      dataSource.value = [];
+      open.value = false;
+    };
+    const handleMenuClick = async ({ menuInfo, item }) => {
+      switch (menuInfo.key) {
+        case 'pin':
+          onPin(item);
+          break;
+        case 'rename':
+          item.editing = true;
+          break;
+        case 'delete':
+          deleteChatModalRef.value.open(item);
+          break;
+      }
+    };
+    const handleRename = async (item) => {
+      const { id, label } = item;
+      const { code } = await postUpdateSessionTitle({
+        id,
+        title: label,
+      });
+      if (code === 200) {
+        message.success('重命名成功');
+      }
+    };
+    const handleActiveChange = (item) => {
+      const { id } = item;
+      handleUserHome({ conversationId: id });
+    };
+    const onDeleteConversation =  (id) => {
+      const index = dataSource.value.findIndex((item) => item.id === id);
+      if (index === -1) return;
+
+      dataSource.value.splice(index, 1);
+    }
+
+    expose({
+      showDrawer,
+    });
+
+    return () => (
+      <Drawer width={240} rootClassName="ct-history-conversation-drawer" v-model:open={open.value} onClose={onClose}>
+        <header class="header h-40px px-12px flex justify-between items-center">
+          <span class="text-12px font-400 color-#211F24 font-family-medium">历史对话</span>
+          <icon-close size={16} class="color-#211F24 cursor-pointer" onClick={onClose} />
+        </header>
+        {dataSource.value.length === 0 ? (
+          <NoData text="暂无历史对话" />
+        ) : (
+          <section class="flex-1 overflow-y-auto content p-12px">
+            <Conversations
+              v-model={activeKey.value}
+              dataSource={dataSource.value}
+              onMenuClick={handleMenuClick}
+              onRename={handleRename}
+              onActiveChange={handleActiveChange}
+            />
+          </section>
+        )}
+
+        <DeleteChatModal ref={deleteChatModalRef} onDelete={onDeleteConversation}/>
+      </Drawer>
+    );
+  },
+};
+</script>
+
+<style lang="scss">
+@import './style.scss';
+</style>
diff --git a/src/views/home/components/history-conversation-drawer/style.scss b/src/views/home/components/history-conversation-drawer/style.scss
new file mode 100644
index 0000000..50dbb16
--- /dev/null
+++ b/src/views/home/components/history-conversation-drawer/style.scss
@@ -0,0 +1,36 @@
+.ct-history-conversation-drawer {
+  border-radius: 8px;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
+  .ant-drawer-content {
+    .ant-drawer-header {
+      display: none;
+    }
+    .ant-drawer-body {
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      .header {
+        position: relative;
+        &::after {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 100%;
+          height: 1px;
+          background: #f2f3f5;
+        }
+      }
+      .content {
+        .ant-conversations {
+          gap: 0;
+          padding: 0;
+          .ant-conversations-item {
+            gap: 0;
+            padding: 8px;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/views/home/components/sender-input/index.vue b/src/views/home/components/sender-input/index.vue
new file mode 100644
index 0000000..67915a2
--- /dev/null
+++ b/src/views/home/components/sender-input/index.vue
@@ -0,0 +1,109 @@
+<script lang="tsx">
+import { ref } from 'vue';
+import { Sender } from 'ant-design-x-vue';
+import { Tooltip } from 'ant-design-vue';
+
+interface SenderInputProps {
+  modelValue?: string;
+  loading?: boolean;
+  placeholder?: string;
+}
+
+export default {
+  name: 'SenderInput',
+  props: {
+    modelValue: {
+      type: String,
+      default: '',
+    },
+    placeholder: {
+      type: String,
+      default: '随时告诉我你想做什么，比如查数据、发任务、写内容，我会立刻帮你完成。',
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['update:modelValue', 'submit', 'cancel'],
+  setup(props: SenderInputProps, { emit, expose }) {
+    const senderRef = ref(null);
+    const localSearchValue = ref(props.modelValue);
+
+    const isEmptyValue = computed(() => !localSearchValue.value.trim());
+    
+    watch(
+      () => props.modelValue,
+      (newValue) => {
+        localSearchValue.value = newValue || '';
+      },
+    );
+
+    const handleSubmit = () => {
+      if (isEmptyValue.value) {
+        return;
+      }
+      emit('submit', localSearchValue.value);
+    };
+    const handleCancel = () => {
+      emit('cancel');
+    };
+
+    const focus = () => {
+      senderRef.value?.focus?.();
+    };
+
+    const renderActions = () => {
+      if (props.loading) {
+        return (
+          <Tooltip title="停止生成" onClick={handleCancel}>
+            <div class="w-32px h-32px p-6px flex justify-center items-center rounded-50% bg-#6D4CFE cursor-pointer">
+              <div class="w-12px h-12px rounded-2px bg-#FFF"></div>
+            </div>
+          </Tooltip>
+        );
+      }
+
+      return (
+        <div
+          onClick={handleSubmit}
+          class={`submit-btn  w-32px h-32px p-6px flex justify-center items-center rounded-50% cursor-pointer ${
+            isEmptyValue.value ? 'opacity-50' : ''
+          }`}
+        >
+          <icon-arrow-right size={20} class="color-#FFFFFF" />
+        </div>
+      );
+    };
+
+    expose({
+      focus,
+    });
+
+    return () => (
+      <div class="sender-input-wrap full h-120px">
+        <Sender
+          v-model:value={localSearchValue.value}
+          ref={senderRef}
+          onChange={(value: string) => emit('update:modelValue', value.trim())}
+          onSubmit={handleSubmit}
+          class="h-full w-full mb-24px"
+          placeholder={props.placeholder}
+          actions={() => renderActions()}
+        />
+      </div>
+    );
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.sender-input-wrap {
+  :deep(.ant-sender) {
+    .submit-btn {
+      background: linear-gradient(125deg, #6d4cfe 32.25%, #3ba1f0 72.31%),
+        linear-gradient(113deg, #6d4cfe 0%, #b93bf0 100%);
+    }
+  }
+}
+</style>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
new file mode 100644
index 0000000..452769a
--- /dev/null
+++ b/src/views/home/index.vue
@@ -0,0 +1,50 @@
+<script lang="tsx">
+import { useRoute } from 'vue-router';
+import { ref, computed } from 'vue';
+import { useChatStore } from '@/stores/modules/chat';
+
+import HistoryConversationDrawer from './components/history-conversation-drawer/index.vue';
+import ConversationDetail from '@/components/xt-chat/chat-view/index.vue';
+import ConversationCreate from './components/created/index.vue';
+
+export default {
+  setup(props, { emit, expose }) {
+    const route = useRoute();
+    const historyConversationDrawerRef = ref(null);
+    const chatStore = useChatStore();
+    const searchValue = ref('');
+
+    const conversationId = computed(() => {
+      return route.params.conversationId;
+    });
+
+    onMounted(() => {
+      searchValue.value = chatStore.searchValue;
+      chatStore.clearSearchValue();
+    });
+
+    return () => (
+      <div class="chat-wrap rounded-12px w-full h-full">
+        {conversationId.value ? (
+          <ConversationDetail inputInfo={{ message: searchValue.value }} conversationId={conversationId.value} />
+        ) : (
+          <ConversationCreate />
+        )}
+
+        {/**历史对话入口 */}
+        <div
+          class="history-conversation-btn cursor-pointer bg-#fff flex flex-col justify-center w-28px px-10px py-8px"
+          onClick={() => historyConversationDrawerRef.value.showDrawer()}
+        >
+          <span class="s1">历史对话</span>
+        </div>
+        <HistoryConversationDrawer ref={historyConversationDrawerRef} />
+      </div>
+    );
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import './style.scss';
+</style>
diff --git a/src/views/home/style.scss b/src/views/home/style.scss
new file mode 100644
index 0000000..c4bd732
--- /dev/null
+++ b/src/views/home/style.scss
@@ -0,0 +1,26 @@
+.chat-wrap {
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(20px);
+  background: rgba(255, 255, 255, 0.9);
+  .history-conversation-btn {
+    background: url('@/assets/img/agent/icon-history.png') center center no-repeat;
+    background-size: cover;
+    // border-radius: 8px 0 0 8px;
+    // border-top: 1px solid #eabaff;
+    // border-bottom: 1px solid #88DDFF;
+    // border-left: 1px solid #AC8EFF;
+    position: absolute;
+    top: 50%;
+    right: 0;
+    transform: translateY(-50%);
+    .s1 {
+      color: var(--Text-1, #211f24);
+
+      font-family: $font-family-regular;
+      font-size: 10px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 18px; /* 180% */
+    }
+  }
+}
diff --git a/src/views/material-center/components/finished-products/constants.ts b/src/views/material-center/components/finished-products/constants.ts
new file mode 100644
index 0000000..c874ffd
--- /dev/null
+++ b/src/views/material-center/components/finished-products/constants.ts
@@ -0,0 +1,26 @@
+export enum AuditStatus {
+  All = '0',
+  Pending = '1',
+  Auditing = '2',
+  Passed = '3',
+}
+
+export const TABS_LIST = [
+  {
+    label: '全部',
+    value: AuditStatus.All,
+  },
+  {
+    label: '待审核',
+    value: AuditStatus.Pending,
+  },
+  {
+    label: '审核中',
+    value: AuditStatus.Auditing,
+  },
+  {
+    label: '已通过',
+    value: AuditStatus.Passed,
+  },
+];
+
diff --git a/src/views/creative-generation-workshop/explore/detail/components/ai-suggest/delete-comment-modal.vue b/src/views/material-center/components/finished-products/explore/detail/components/ai-suggest/delete-comment-modal.vue
similarity index 100%
rename from src/views/creative-generation-workshop/explore/detail/components/ai-suggest/delete-comment-modal.vue
rename to src/views/material-center/components/finished-products/explore/detail/components/ai-suggest/delete-comment-modal.vue
diff --git a/src/views/creative-generation-workshop/explore/detail/components/ai-suggest/index.vue b/src/views/material-center/components/finished-products/explore/detail/components/ai-suggest/index.vue
similarity index 98%
rename from src/views/creative-generation-workshop/explore/detail/components/ai-suggest/index.vue
rename to src/views/material-center/components/finished-products/explore/detail/components/ai-suggest/index.vue
index 4ad7cbb..2a60bd5 100644
--- a/src/views/creative-generation-workshop/explore/detail/components/ai-suggest/index.vue
+++ b/src/views/material-center/components/finished-products/explore/detail/components/ai-suggest/index.vue
@@ -4,7 +4,7 @@ import TextOverTips from '@/components/text-over-tips';
 import SvgIcon from '@/components/svg-icon/index.vue';
 import DeleteCommentModal from './delete-comment-modal.vue';
 
-import { RESULT_LIST } from '@/views/creative-generation-workshop/manuscript/check/components/content-card/constants.ts';
+import { RESULT_LIST } from '@/views/material-center/components/finished-products/manuscript/check/components/content-card/constants.ts';
 import { ENUM_OPINION, formatRelativeTime } from '../../constants';
 import { postShareWorksComments, deleteShareWorksComments } from '@/api/all/generationWorkshop.ts';
 import { exactFormatTime } from '@/utils/tools.ts';
diff --git a/src/views/creative-generation-workshop/explore/detail/components/ai-suggest/style.scss b/src/views/material-center/components/finished-products/explore/detail/components/ai-suggest/style.scss
similarity index 100%
rename from src/views/creative-generation-workshop/explore/detail/components/ai-suggest/style.scss
rename to src/views/material-center/components/finished-products/explore/detail/components/ai-suggest/style.scss
diff --git a/src/views/creative-generation-workshop/explore/detail/constants.ts b/src/views/material-center/components/finished-products/explore/detail/constants.ts
similarity index 100%
rename from src/views/creative-generation-workshop/explore/detail/constants.ts
rename to src/views/material-center/components/finished-products/explore/detail/constants.ts
diff --git a/src/views/creative-generation-workshop/explore/detail/index.vue b/src/views/material-center/components/finished-products/explore/detail/index.vue
similarity index 97%
rename from src/views/creative-generation-workshop/explore/detail/index.vue
rename to src/views/material-center/components/finished-products/explore/detail/index.vue
index 917c464..c398547 100644
--- a/src/views/creative-generation-workshop/explore/detail/index.vue
+++ b/src/views/material-center/components/finished-products/explore/detail/index.vue
@@ -4,12 +4,12 @@ import AiSuggest from './components/ai-suggest/';
 
 import { getShareWorksList, getShareWorksDetail, patchShareWorksConfirm } from '@/api/all/generationWorkshop.ts';
 import { convertVideoUrlToCoverUrl, exactFormatTime } from '@/utils/tools.ts';
-import { EnumManuscriptType } from '@/views/creative-generation-workshop/manuscript/list/constants.ts';
+import { EnumManuscriptType } from '@/views/material-center/components/finished-products/manuscript/list/constants.ts';
 import { ENUM_OPINION } from './constants';
 import { handleUserHome } from '@/utils/user.ts';
 import { useUserStore } from '@/stores';
 
-import icon1 from '@/assets/LOGO.svg';
+import icon1 from '@/assets/img/icon-logo.png';
 import icon2 from '@/assets/img/creative-generation-workshop/icon-confirm.png';
 import icon3 from '@/assets/img/creative-generation-workshop/icon-line.png';
 
@@ -212,9 +212,9 @@ export default {
       return (
         <div class='explore-page'>
           <header class="page-header">
-            <div class="content w-full px-24px flex items-center bg-#fff justify-between">
+            <div class="content w-full px-24px flex items-center justify-between">
               <div class="h-full flex items-center">
-                <img src={icon1} alt="" width={130} />
+                <img src={icon1} alt="" width="96" height="24"/>
               </div>
               <div class="flex items-center">{renderActionRow()}</div>
             </div>
diff --git a/src/views/creative-generation-workshop/explore/detail/style.scss b/src/views/material-center/components/finished-products/explore/detail/style.scss
similarity index 78%
rename from src/views/creative-generation-workshop/explore/detail/style.scss
rename to src/views/material-center/components/finished-products/explore/detail/style.scss
index 2d41eee..8148bb2 100644
--- a/src/views/creative-generation-workshop/explore/detail/style.scss
+++ b/src/views/material-center/components/finished-products/explore/detail/style.scss
@@ -1,20 +1,20 @@
 .explore-page {
   position: relative;
-  min-width: 1200px;
+  min-width: $layout-min-width;
   min-height: 100vh;
   background: #fff;
   display: flex;
   flex-direction: column;
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: #fff;
-    z-index: -1;
-  }
+  // &::before {
+  //   content: '';
+  //   position: absolute;
+  //   top: 0;
+  //   left: 0;
+  //   width: 100%;
+  //   height: 100%;
+  //   background: #fff;
+  //   z-index: -1;
+  // }
   .fold-box {
     width: 40px;
     height: 40px;
@@ -35,11 +35,25 @@
     right: 0;
     top: 0;
     z-index: 1000;
-    min-width: 1200px;
+    min-width: $layout-min-width;
     .content {
       height: $navbar-height;
       border-bottom: 1px solid var(--Border-1, #d7d7d9);
     }
+    // &::before {
+    //   width: 100%;
+    //   height: 100%;
+    //   background: url('@/assets/img/icon-app-header-bg.png') center top no-repeat !important;
+    //   background-size: cover !important;
+    //   bottom: 0;
+    //   content: '';
+    //   display: block;
+    //   left: 0;
+    //   position: absolute;
+    //   right: 0;
+    //   top: 0;
+    //   z-index: -998;
+    // }
   }
   .cts {
     color: #939499;
@@ -58,7 +72,7 @@
     flex: 1;
     display: flex;
     justify-content: center;
-    background: #fff;
+    // background: #fff;
     &.expand {
       width: calc(100% - 456px);
     }
diff --git a/src/views/creative-generation-workshop/explore/list/index.vue b/src/views/material-center/components/finished-products/explore/list/index.vue
similarity index 97%
rename from src/views/creative-generation-workshop/explore/list/index.vue
rename to src/views/material-center/components/finished-products/explore/list/index.vue
index 1a92417..dc6713f 100644
--- a/src/views/creative-generation-workshop/explore/list/index.vue
+++ b/src/views/material-center/components/finished-products/explore/list/index.vue
@@ -8,7 +8,7 @@ import { getShareWorksList } from '@/api/all/generationWorkshop';
 import { ENUM_OPINION } from '../detail/constants';
 
 import icon1 from '@/assets/img/error-img.png';
-import icon2 from '@/assets/LOGO.svg';
+import icon2 from '@/assets/img/icon-logo.png';
 
 export default {
   setup(props, { emit, expose }) {
@@ -44,9 +44,9 @@ export default {
       return (
         <div class="explore-page">
           <header class="page-header">
-            <div class="content w-full px-24px flex items-center bg-#fff">
+            <div class="content w-full px-24px flex items-center">
               <div class="h-full flex items-center">
-                <img src={icon2} alt="" />
+                <img src={icon2} alt="" width="96" height="24" />
               </div>
             </div>
           </header>
diff --git a/src/views/creative-generation-workshop/explore/list/style.scss b/src/views/material-center/components/finished-products/explore/list/style.scss
similarity index 72%
rename from src/views/creative-generation-workshop/explore/list/style.scss
rename to src/views/material-center/components/finished-products/explore/list/style.scss
index b315e92..2e15612 100644
--- a/src/views/creative-generation-workshop/explore/list/style.scss
+++ b/src/views/material-center/components/finished-products/explore/list/style.scss
@@ -1,8 +1,8 @@
 .explore-page {
   position: relative;
   padding-top: $navbar-height;
-  min-width: 1200px;
-  background: #fff;
+  min-width: $layout-min-width;
+  background-color: #fff;
   .cts {
     font-family: $font-family-regular;
     font-size: 14px;
@@ -19,17 +19,31 @@
     right: 0;
     top: 0;
     z-index: 1000;
-    min-width: 1200px;
+    min-width: $layout-min-width;
+    background-color: #fff;
     .content {
       height: $navbar-height;
       border-bottom: 1px solid var(--Border-1, #d7d7d9);
     }
+    // &::before {
+    //   width: 100%;
+    //   height: 100%;
+    //   background: url('@/assets/img/icon-app-header-bg.png') center top no-repeat !important;
+    //   background-size: cover !important;
+    //   bottom: 0;
+    //   content: '';
+    //   display: block;
+    //   left: 0;
+    //   position: absolute;
+    //   right: 0;
+    //   top: 0;
+    //   z-index: -998;
+    // }
   }
   .page-wrapper {
-    background: #fff;
     min-height: calc(100vh - $navbar-height);
     .explore-container {
-      width: 1200px;
+      width: $layout-min-width;
       .explore-list-wrap {
         :deep(.overflow-text) {
           color: var(--Text-1, #211f24);
diff --git a/src/views/material-center/components/finished-products/index.vue b/src/views/material-center/components/finished-products/index.vue
new file mode 100644
index 0000000..1ba262a
--- /dev/null
+++ b/src/views/material-center/components/finished-products/index.vue
@@ -0,0 +1,74 @@
+<script lang="tsx">
+import { Tabs, TabPane } from 'ant-design-vue';
+import ManuscriptList from './manuscript/list/index.vue';
+import ManuscriptCheckList from './manuscript/check-list/index.vue';
+import ShareManuscriptModal from '@/views/material-center/components/finished-products/manuscript/components/share-manuscript-modal/index.vue';
+import UploadManuscriptModal from '@/views/material-center/components/finished-products/manuscript/components/upload-manuscript-modal/index.vue';
+
+import { TABS_LIST, AuditStatus } from './constants';
+
+export default defineComponent({
+  setup(_, { attrs, slots, expose }) {
+    const shareManuscriptModalRef = ref(null);
+    const uploadManuscriptModalRef = ref(null);
+
+    const audit_status = ref(AuditStatus.All);
+
+    const showManuscriptList = computed(() => {
+      return audit_status.value === AuditStatus.All;
+    });
+
+    const handleShareModal = () => {
+      shareManuscriptModalRef.value?.open();
+    };
+    const openUploadModal = () => {
+      uploadManuscriptModalRef.value?.open();
+    };
+
+    return () => (
+      <div class="finished-products-wrap h-full flex flex-col">
+        <div class="bg-white rounded-t-8px">
+          <Tabs
+            v-model:activeKey={audit_status.value}
+            v-slots={{
+              rightExtra: () => (
+                <div class="flex items-center">
+                  <a-button type="outline" size="medium" onClick={handleShareModal}>
+                    分享内容稿件
+                  </a-button>
+                  {showManuscriptList.value && (
+                    <a-button
+                      type="primary"
+                      size="medium"
+                      class="ml-12px"
+                      onClick={openUploadModal}
+                      v-slots={{
+                        icon: () => <icon-plus size="16" />,
+                        default: () => '上传内容稿件',
+                      }}
+                    />
+                  )}
+                </div>
+              ),
+            }}
+          >
+            {TABS_LIST.map((item) => (
+              <TabPane key={item.value} tab={item.label}>
+                {item.label}
+              </TabPane>
+            ))}
+          </Tabs>
+        </div>
+        {showManuscriptList.value ? <ManuscriptList /> : <ManuscriptCheckList audit_status={audit_status.value} />}
+
+        <ShareManuscriptModal ref={shareManuscriptModalRef} />
+        <UploadManuscriptModal ref={uploadManuscriptModalRef} />
+      </div>
+    );
+  },
+});
+</script>
+
+<style scoped lang="scss">
+@import './style.scss';
+</style>
diff --git a/src/views/creative-generation-workshop/manuscript-writer/check-list/components/filter-block/index.vue b/src/views/material-center/components/finished-products/manuscript/check-list/components/filter-block/index.vue
similarity index 94%
rename from src/views/creative-generation-workshop/manuscript-writer/check-list/components/filter-block/index.vue
rename to src/views/material-center/components/finished-products/manuscript/check-list/components/filter-block/index.vue
index 5a2f9a3..a60a125 100644
--- a/src/views/creative-generation-workshop/manuscript-writer/check-list/components/filter-block/index.vue
+++ b/src/views/material-center/components/finished-products/manuscript/check-list/components/filter-block/index.vue
@@ -100,7 +100,8 @@
 
 <script setup>
 import { defineEmits, defineProps } from 'vue';
-import { PLATFORMS, AuditStatus } from '@/views/creative-generation-workshop/manuscript-writer/check-list/constants';
+import { PLATFORMS } from '@/views/material-center/components/finished-products/manuscript/check-list/constants';
+import { AuditStatus } from '@/views/material-center/components/finished-products/constants';
 
 const props = defineProps({
   query: {
diff --git a/src/views/creative-generation-workshop/manuscript/check-list/components/manuscript-check-table/delete-manuscript-modal.vue b/src/views/material-center/components/finished-products/manuscript/check-list/components/manuscript-check-table/delete-manuscript-modal.vue
similarity index 100%
rename from src/views/creative-generation-workshop/manuscript/check-list/components/manuscript-check-table/delete-manuscript-modal.vue
rename to src/views/material-center/components/finished-products/manuscript/check-list/components/manuscript-check-table/delete-manuscript-modal.vue
diff --git a/src/views/creative-generation-workshop/manuscript/check-list/components/manuscript-check-table/index.vue b/src/views/material-center/components/finished-products/manuscript/check-list/components/manuscript-check-table/index.vue
similarity index 88%
rename from src/views/creative-generation-workshop/manuscript/check-list/components/manuscript-check-table/index.vue
rename to src/views/material-center/components/finished-products/manuscript/check-list/components/manuscript-check-table/index.vue
index 045b299..2f9467e 100644
--- a/src/views/creative-generation-workshop/manuscript/check-list/components/manuscript-check-table/index.vue
+++ b/src/views/material-center/components/finished-products/manuscript/check-list/components/manuscript-check-table/index.vue
@@ -51,7 +51,13 @@
         </template>
         <template v-else-if="column.dataIndex === 'platform'" #cell="{ record }">
           <template v-if="!PLATFORMS.find((item) => item.value === record.platform)"> - </template>
-          <img v-else width="24" height="24" class="rounded-4px" :src="PLATFORMS.find((item) => item.value === record.platform)?.icon" />
+          <img
+            v-else
+            width="24"
+            height="24"
+            class="rounded-4px"
+            :src="PLATFORMS.find((item) => item.value === record.platform)?.icon"
+          />
         </template>
         <template v-else-if="column.dataIndex === 'compliance_level'" #cell="{ record }">
           <span class="cts num !color-#6D4CFE">{{
@@ -123,17 +129,18 @@
 <script setup>
 import { ref } from 'vue';
 import { formatTableField, exactFormatTime } from '@/utils/tools';
-import { EnumManuscriptType } from '@/views/creative-generation-workshop/manuscript/list/constants';
+import { EnumManuscriptType } from '@/views/material-center/components/finished-products/manuscript/list/constants';
 import { patchWorkAuditsAudit } from '@/api/all/generationWorkshop';
 import {
-  AuditStatus,
   CUSTOMER_OPINION,
   PLATFORMS,
-} from '@/views/creative-generation-workshop/manuscript/check-list/constants';
+} from '@/views/material-center/components/finished-products/manuscript/check-list/constants';
+import { AuditStatus } from '@/views/material-center/components/finished-products/constants';
+
 import { slsWithCatch } from '@/utils/stroage.ts';
 
 import TextOverTips from '@/components/text-over-tips';
-import ShareModal from '@/views/creative-generation-workshop/manuscript/components/share-manuscript-modal/share-modal.vue';
+import ShareModal from '@/views/material-center/components/finished-products/manuscript/components/share-manuscript-modal/share-modal.vue';
 import HoverImagePreview from '@/components/hover-image-preview';
 
 import icon1 from '@/assets/img/media-account/icon-delete.png';
@@ -141,7 +148,7 @@ import icon2 from '@/assets/img/creative-generation-workshop/icon-photo.png';
 import icon3 from '@/assets/img/creative-generation-workshop/icon-video.png';
 import icon4 from '@/assets/img/error-img.png';
 
-const emits = defineEmits(['edit', 'sorterChange', 'delete', 'select', 'selectAll']);
+const emits = defineEmits([ 'sorterChange', 'delete', 'select', 'selectAll']);
 const router = useRouter();
 
 const props = defineProps({
@@ -188,7 +195,7 @@ const onScan = (item) => {
   router.push({ name: 'ManuscriptCheck' });
 };
 const onDetail = (item) => {
-  router.push(`/manuscript/check-list/detail/${item.id}?source=check&audit_status=${props.audit_status}`);
+  router.push(`/material-center/check-list/detail/${item.id}?source=check&audit_status=${props.audit_status}`);
 };
 const getCustomerOpinionInfo = (value) => {
   return CUSTOMER_OPINION.find((item) => item.value === value);
diff --git a/src/views/creative-generation-workshop/manuscript-writer/check-list/components/manuscript-check-table/style.scss b/src/views/material-center/components/finished-products/manuscript/check-list/components/manuscript-check-table/style.scss
similarity index 100%
rename from src/views/creative-generation-workshop/manuscript-writer/check-list/components/manuscript-check-table/style.scss
rename to src/views/material-center/components/finished-products/manuscript/check-list/components/manuscript-check-table/style.scss
diff --git a/src/views/creative-generation-workshop/manuscript/check-list/constants.ts b/src/views/material-center/components/finished-products/manuscript/check-list/constants.ts
similarity index 97%
rename from src/views/creative-generation-workshop/manuscript/check-list/constants.ts
rename to src/views/material-center/components/finished-products/manuscript/check-list/constants.ts
index 429ebd6..28ab2b0 100644
--- a/src/views/creative-generation-workshop/manuscript/check-list/constants.ts
+++ b/src/views/material-center/components/finished-products/manuscript/check-list/constants.ts
@@ -1,3 +1,5 @@
+import { AuditStatus } from '@/views/material-center/components/finished-products/constants';
+
 export const TABLE_COLUMNS1 = [
   {
     title: '序号',
@@ -193,11 +195,6 @@ export const TABLE_COLUMNS3 = [
     fixed: 'right',
   },
 ];
-export enum AuditStatus {
-  Pending = '1',
-  Auditing = '2',
-  Passed = '3',
-}
 
 export const AUDIT_STATUS_LIST = [
   {
diff --git a/src/views/creative-generation-workshop/manuscript/check-list/index.vue b/src/views/material-center/components/finished-products/manuscript/check-list/index.vue
similarity index 78%
rename from src/views/creative-generation-workshop/manuscript/check-list/index.vue
rename to src/views/material-center/components/finished-products/manuscript/check-list/index.vue
index 1a5d1f8..6762d17 100644
--- a/src/views/creative-generation-workshop/manuscript/check-list/index.vue
+++ b/src/views/material-center/components/finished-products/manuscript/check-list/index.vue
@@ -1,12 +1,6 @@
 <template>
   <div class="manuscript-check-wrap">
-    <div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid mb-16px">
-      <a-tabs v-model="query.audit_status" @tab-click="handleTabClick">
-        <a-tab-pane :title="item.label" v-for="item in AUDIT_STATUS_LIST" :key="item.value"></a-tab-pane>
-        <template #extra>
-          <a-button type="outline" size="medium" @click="handleShareModal">分享内容稿件</a-button>
-        </template>
-      </a-tabs>
+    <div class="filter-wrap bg-#fff rounded-b-8px mb-16px">
       <FilterBlock
         v-model:query="query"
         :audit_status="query.audit_status"
@@ -14,9 +8,7 @@
         @reset="handleReset"
       />
     </div>
-    <div
-      class="table-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px py-24px  flex flex-col"
-    >
+    <div class="table-wrap bg-#fff rounded-8px px-24px py-24px flex flex-col">
       <div
         class="flex justify-end mb-12px"
         v-if="[AuditStatus.Pending, AuditStatus.Auditing].includes(query.audit_status)"
@@ -48,11 +40,10 @@
         :audit_status="query.audit_status"
         @sorterChange="handleSorterChange"
         @delete="handleDelete"
-        @edit="handleEdit"
         @select="handleSelect"
         @selectAll="handleSelectAll"
       />
-      <div v-if="pageInfo.total > 0" class="pagination-box">
+      <div v-if="pageInfo.total > 0" class="pagination-row">
         <a-pagination
           :total="pageInfo.total"
           size="mini"
@@ -68,7 +59,6 @@
     </div>
 
     <DeleteManuscriptModal ref="deleteManuscriptModalRef" />
-    <ShareManuscriptModal ref="shareManuscriptModalRef" />
   </div>
 </template>
 <script lang="jsx" setup>
@@ -76,17 +66,19 @@ import { Button, Message as AMessage } from '@arco-design/web-vue';
 import FilterBlock from './components/filter-block';
 import ManuscriptCheckTable from './components/manuscript-check-table';
 import DeleteManuscriptModal from './components/manuscript-check-table/delete-manuscript-modal.vue';
-import ShareManuscriptModal from '@/views/creative-generation-workshop/manuscript/components/share-manuscript-modal';
 
 import { getWorkAuditsPage, patchWorkAuditsBatchAudit } from '@/api/all/generationWorkshop.ts';
 import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
 import { slsWithCatch } from '@/utils/stroage.ts';
-import {
-  AuditStatus,
-  INITIAL_QUERY,
-  AUDIT_STATUS_LIST,
-  TABLE_COLUMNS1,
-} from '@/views/creative-generation-workshop/manuscript/check-list/constants';
+import { AuditStatus } from '@/views/material-center/components/finished-products/constants';
+import { INITIAL_QUERY, TABLE_COLUMNS1, AUDIT_STATUS_LIST } from './constants';
+
+const props = defineProps({
+  audit_status: {
+    type: String,
+    default: AuditStatus.All,
+  },
+});
 
 const {
   dataSource,
@@ -114,7 +106,6 @@ const query = ref(cloneDeep(INITIAL_QUERY));
 
 const addManuscriptModalRef = ref(null);
 const deleteManuscriptModalRef = ref(null);
-const shareManuscriptModalRef = ref(null);
 
 const getData = async () => {
   const { page, page_size } = pageInfo.value;
@@ -179,22 +170,19 @@ const handleTabClick = (key) => {
   getData();
 };
 
-const handleShareModal = () => {
-  shareManuscriptModalRef.value.open();
-};
-
 const handleDelete = (item) => {
   const { id, title } = item;
   deleteManuscriptModalRef.value?.open({ id, name: `“${title}”` });
 };
-const handleEdit = (item) => {
-  // addManuscriptModalRef.value?.open(item.id);
-};
 
-onMounted(() => {
-  tableColumns.value = TABLE_COLUMNS1;
-  getData();
-});
+
+watch(
+  () => props.audit_status,
+  (newVal) => {
+    handleTabClick(newVal);
+  },
+  { immediate: true, deep: true },
+);
 provide('update', getData);
 </script>
 
diff --git a/src/views/creative-generation-workshop/manuscript-writer/check-list/style.scss b/src/views/material-center/components/finished-products/manuscript/check-list/style.scss
similarity index 79%
rename from src/views/creative-generation-workshop/manuscript-writer/check-list/style.scss
rename to src/views/material-center/components/finished-products/manuscript/check-list/style.scss
index 026b0ab..a3a41fc 100644
--- a/src/views/creative-generation-workshop/manuscript-writer/check-list/style.scss
+++ b/src/views/material-center/components/finished-products/manuscript/check-list/style.scss
@@ -31,12 +31,5 @@
   .table-wrap {
     display: flex;
     flex-direction: column;
-    .pagination-box {
-      display: flex;
-      width: 100%;
-      padding: 16px 24px 0;
-      justify-content: flex-end;
-      align-items: center;
-    }
   }
 }
diff --git a/src/views/creative-generation-workshop/manuscript/check/cancel-check-modal.vue b/src/views/material-center/components/finished-products/manuscript/check/cancel-check-modal.vue
similarity index 96%
rename from src/views/creative-generation-workshop/manuscript/check/cancel-check-modal.vue
rename to src/views/material-center/components/finished-products/manuscript/check/cancel-check-modal.vue
index 235f796..beedea2 100644
--- a/src/views/creative-generation-workshop/manuscript/check/cancel-check-modal.vue
+++ b/src/views/material-center/components/finished-products/manuscript/check/cancel-check-modal.vue
@@ -40,7 +40,7 @@ const onClose = () => {
 };
 const onConfirm = () => {
   if (action.value === 'exit') {
-    router.push({ name: 'ManuscriptCheckList' });
+    router.push({ name: 'MaterialCenterFinishedProducts' });
   } else {
     emit('selectCard', cardInfo.value);
   }
diff --git a/src/views/creative-generation-workshop/manuscript/check/check-success-modal.vue b/src/views/material-center/components/finished-products/manuscript/check/check-success-modal.vue
similarity index 96%
rename from src/views/creative-generation-workshop/manuscript/check/check-success-modal.vue
rename to src/views/material-center/components/finished-products/manuscript/check/check-success-modal.vue
index f1b0bf8..9ca3ead 100644
--- a/src/views/creative-generation-workshop/manuscript/check/check-success-modal.vue
+++ b/src/views/material-center/components/finished-products/manuscript/check/check-success-modal.vue
@@ -29,7 +29,7 @@ const workIds = ref([]);
 
 const onClose = () => {
   if (workIds.value.length === 1) {
-    router.push({ name: 'ManuscriptCheckList' });
+    router.push({ name: 'MaterialCenterFinishedProducts' });
   }
   workIds.value = [];
   visible.value = false;
diff --git a/src/views/creative-generation-workshop/manuscript/check/components/check-list-drawer/index.vue b/src/views/material-center/components/finished-products/manuscript/check/components/check-list-drawer/index.vue
similarity index 100%
rename from src/views/creative-generation-workshop/manuscript/check/components/check-list-drawer/index.vue
rename to src/views/material-center/components/finished-products/manuscript/check/components/check-list-drawer/index.vue
diff --git a/src/views/creative-generation-workshop/manuscript-writer/check/components/check-list-drawer/style.scss b/src/views/material-center/components/finished-products/manuscript/check/components/check-list-drawer/style.scss
similarity index 100%
rename from src/views/creative-generation-workshop/manuscript-writer/check/components/check-list-drawer/style.scss
rename to src/views/material-center/components/finished-products/manuscript/check/components/check-list-drawer/style.scss
diff --git a/src/views/creative-generation-workshop/manuscript-writer/check/components/content-card/constants.ts b/src/views/material-center/components/finished-products/manuscript/check/components/content-card/constants.ts
similarity index 100%
rename from src/views/creative-generation-workshop/manuscript-writer/check/components/content-card/constants.ts
rename to src/views/material-center/components/finished-products/manuscript/check/components/content-card/constants.ts
diff --git a/src/views/creative-generation-workshop/manuscript/check/components/content-card/highlight-textarea.vue b/src/views/material-center/components/finished-products/manuscript/check/components/content-card/highlight-textarea.vue
similarity index 100%
rename from src/views/creative-generation-workshop/manuscript/check/components/content-card/highlight-textarea.vue
rename to src/views/material-center/components/finished-products/manuscript/check/components/content-card/highlight-textarea.vue
diff --git a/src/views/creative-generation-workshop/manuscript/check/components/content-card/index.vue b/src/views/material-center/components/finished-products/manuscript/check/components/content-card/index.vue
similarity index 99%
rename from src/views/creative-generation-workshop/manuscript/check/components/content-card/index.vue
rename to src/views/material-center/components/finished-products/manuscript/check/components/content-card/index.vue
index aaa3564..863e004 100644
--- a/src/views/creative-generation-workshop/manuscript/check/components/content-card/index.vue
+++ b/src/views/material-center/components/finished-products/manuscript/check/components/content-card/index.vue
@@ -23,7 +23,7 @@ import 'swiper/css/navigation';
 import { Navigation } from 'swiper/modules';
 import { FORM_RULES, enumTab, TAB_LIST, RESULT_LIST, LEVEL_MAP, escapeRegExp } from './constants';
 import { getImagePreSignedUrl } from '@/api/all/common';
-import { EnumManuscriptType } from '@/views/creative-generation-workshop/manuscript/list/constants';
+import { EnumManuscriptType } from '@/views/material-center/components/finished-products/manuscript/list/constants';
 
 import icon1 from '@/assets/img/creative-generation-workshop/icon-magic.png';
 import icon2 from '@/assets/img/creative-generation-workshop/icon-line.png';
diff --git a/src/views/creative-generation-workshop/manuscript/check/components/content-card/style.scss b/src/views/material-center/components/finished-products/manuscript/check/components/content-card/style.scss
similarity index 97%
rename from src/views/creative-generation-workshop/manuscript/check/components/content-card/style.scss
rename to src/views/material-center/components/finished-products/manuscript/check/components/content-card/style.scss
index 3ee72d6..39160fe 100644
--- a/src/views/creative-generation-workshop/manuscript/check/components/content-card/style.scss
+++ b/src/views/material-center/components/finished-products/manuscript/check/components/content-card/style.scss
@@ -180,6 +180,12 @@
         line-height: 24px;
       }
     }
+    :deep(.arco-spin) {
+      .arco-spin-icon,
+      .arco-spin-tip {
+        color: #6d4cfe;
+      }
+    }
     :deep(.overflow-text) {
       color: #211f24;
       font-family: $font-family-regular;
diff --git a/src/views/creative-generation-workshop/manuscript/check/components/header-card/index.vue b/src/views/material-center/components/finished-products/manuscript/check/components/header-card/index.vue
similarity index 97%
rename from src/views/creative-generation-workshop/manuscript/check/components/header-card/index.vue
rename to src/views/material-center/components/finished-products/manuscript/check/components/header-card/index.vue
index c6d5883..f9539a0 100644
--- a/src/views/creative-generation-workshop/manuscript/check/components/header-card/index.vue
+++ b/src/views/material-center/components/finished-products/manuscript/check/components/header-card/index.vue
@@ -6,7 +6,7 @@ import TextOverTips from '@/components/text-over-tips';
 import 'swiper/css';
 import 'swiper/css/navigation';
 import { Navigation } from 'swiper/modules';
-import { PLATFORMS } from '@/views/creative-generation-workshop/manuscript/check-list/constants';
+import { PLATFORMS } from '@/views/material-center/components/finished-products/manuscript/check-list/constants';
 
 import icon1 from '@/assets/img/error-img.png';
 import icon2 from '@/assets/img/creative-generation-workshop/icon-lf.png';
diff --git a/src/views/creative-generation-workshop/manuscript-writer/check/components/header-card/style.scss b/src/views/material-center/components/finished-products/manuscript/check/components/header-card/style.scss
similarity index 100%
rename from src/views/creative-generation-workshop/manuscript-writer/check/components/header-card/style.scss
rename to src/views/material-center/components/finished-products/manuscript/check/components/header-card/style.scss
diff --git a/src/views/creative-generation-workshop/manuscript/check/index.vue b/src/views/material-center/components/finished-products/manuscript/check/index.vue
similarity index 94%
rename from src/views/creative-generation-workshop/manuscript/check/index.vue
rename to src/views/material-center/components/finished-products/manuscript/check/index.vue
index 6ce6529..f733456 100644
--- a/src/views/creative-generation-workshop/manuscript/check/index.vue
+++ b/src/views/material-center/components/finished-products/manuscript/check/index.vue
@@ -8,6 +8,7 @@ import CheckListDrawer from './components/check-list-drawer';
 
 import { slsWithCatch, rlsWithCatch, glsWithCatch } from '@/utils/stroage.ts';
 import useGetAiReviewResult from '@/hooks/useGetAiReviewResult.ts';
+import { useSidebarStore } from '@/stores/modules/side-bar';
 import {
   patchWorkAuditsAudit,
   patchWorkAuditsBatchAudit,
@@ -23,6 +24,7 @@ export default {
   setup(props, { emit, expose }) {
     const router = useRouter();
     const route = useRoute();
+    const sidebarStore = useSidebarStore();
 
     const workIds = ref([]);
     const isSaved = ref(false);
@@ -38,6 +40,10 @@ export default {
     const selectCardInfo = ref({});
     const selectedImageInfo = ref(null);
 
+    const collapsed = computed(() => {
+      return sidebarStore.menuCollapse;
+    });
+
     const { handleStartCheck, handleAgainCheck, ticket, checkLoading, resetAiReviewInfo } = useGetAiReviewResult({
       cardInfo: selectCardInfo,
       startAiReviewFn: postWorkAuditsAiReview,
@@ -48,7 +54,7 @@ export default {
     });
 
     const onBack = () => {
-      router.push({ name: 'ManuscriptCheckList' });
+      router.push({ name: 'MaterialCenterFinishedProducts' });
     };
 
     const onChangeCard = (item) => {
@@ -200,7 +206,7 @@ export default {
         <div class="manuscript-check-wrap flex flex-col">
           <div class="flex items-center mb-10px">
             <span class="cts color-#4E5969 cursor-pointer" onClick={onExit}>
-              内容稿件审核
+              成品库
             </span>
             <icon-oblique-line size="12" class="color-#C9CDD4 mx-4px" />
             <span class="cts bold !color-#1D2129">{`${workIds.value.length > 0 ? '批量' : ''}审核内容稿件`}</span>
@@ -215,7 +221,7 @@ export default {
             </div>
           )}
 
-          <div class="flex-1 flex flex-col overflow-hidden bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid">
+          <div class="flex-1 flex flex-col overflow-hidden bg-#fff rounded-8px ">
             <HeaderCard
               dataSource={dataSource.value}
               selectCardInfo={selectCardInfo.value}
@@ -238,7 +244,11 @@ export default {
             </section>
           </div>
         </div>
-        <footer class="flex justify-end items-center px-16px py-20px w-full bg-#fff footer-row">
+        <footer
+          class={`flex justify-end items-center px-16px py-16px w-full bg-#F6F5FC footer-row ${
+            collapsed.value ? 'collapsed' : ''
+          }`}
+        >
           {renderFooterRow()}
         </footer>
 
diff --git a/src/views/creative-generation-workshop/manuscript/check/style.scss b/src/views/material-center/components/finished-products/manuscript/check/style.scss
similarity index 83%
rename from src/views/creative-generation-workshop/manuscript/check/style.scss
rename to src/views/material-center/components/finished-products/manuscript/check/style.scss
index 8bebfe0..9bd24ba 100644
--- a/src/views/creative-generation-workshop/manuscript/check/style.scss
+++ b/src/views/material-center/components/finished-products/manuscript/check/style.scss
@@ -1,7 +1,7 @@
 $footer-height: 68px;
 .manuscript-check-wrap {
   width: 100%;
-  height: calc(100% - 72px);
+  height: calc(100% - ($footer-height - $layout-padding-bottom));
   .cts {
     color: #939499;
     font-family: $font-family-regular;
@@ -40,6 +40,9 @@ $footer-height: 68px;
   bottom: 0;
   left: $sidebar-width;
   width: calc(100% - $sidebar-width);
-  border-top: 1px solid #e6e6e8;
   height: $footer-height;
+  &.collapsed {
+    left: $sidebar-width-collapse;
+    width: calc(100% - $sidebar-width-collapse);
+  }
 }
diff --git a/src/views/creative-generation-workshop/manuscript-writer/components/edit-form/img-box.vue b/src/views/material-center/components/finished-products/manuscript/components/edit-form/img-box.vue
similarity index 100%
rename from src/views/creative-generation-workshop/manuscript-writer/components/edit-form/img-box.vue
rename to src/views/material-center/components/finished-products/manuscript/components/edit-form/img-box.vue
diff --git a/src/views/creative-generation-workshop/manuscript/components/edit-form/index.vue b/src/views/material-center/components/finished-products/manuscript/components/edit-form/index.vue
similarity index 99%
rename from src/views/creative-generation-workshop/manuscript/components/edit-form/index.vue
rename to src/views/material-center/components/finished-products/manuscript/components/edit-form/index.vue
index 0f1b3c4..273cda1 100644
--- a/src/views/creative-generation-workshop/manuscript/components/edit-form/index.vue
+++ b/src/views/material-center/components/finished-products/manuscript/components/edit-form/index.vue
@@ -8,7 +8,7 @@ import ImgBox from './img-box';
 
 import { formatFileSize, getVideoInfo, formatDuration, formatUploadSpeed } from '@/utils/tools';
 // import { getProjectList } from '@/api/all/propertyMarketing';
-import { EnumManuscriptType } from '@/views/creative-generation-workshop/manuscript/list/constants.ts';
+import { EnumManuscriptType } from '@/views/material-center/components/finished-products/manuscript/list/constants.ts';
 import { getImagePreSignedUrl, getVideoPreSignedUrl } from '@/api/all/common';
 
 // import icon1 from '@/assets/img/creative-generation-workshop/icon-close.png';
diff --git a/src/views/creative-generation-workshop/manuscript/components/edit-form/style.scss b/src/views/material-center/components/finished-products/manuscript/components/edit-form/style.scss
similarity index 100%
rename from src/views/creative-generation-workshop/manuscript/components/edit-form/style.scss
rename to src/views/material-center/components/finished-products/manuscript/components/edit-form/style.scss
diff --git a/src/views/creative-generation-workshop/manuscript/components/share-manuscript-modal/constants.ts b/src/views/material-center/components/finished-products/manuscript/components/share-manuscript-modal/constants.ts
similarity index 100%
rename from src/views/creative-generation-workshop/manuscript/components/share-manuscript-modal/constants.ts
rename to src/views/material-center/components/finished-products/manuscript/components/share-manuscript-modal/constants.ts
diff --git a/src/views/creative-generation-workshop/manuscript/components/share-manuscript-modal/index.vue b/src/views/material-center/components/finished-products/manuscript/components/share-manuscript-modal/index.vue
similarity index 97%
rename from src/views/creative-generation-workshop/manuscript/components/share-manuscript-modal/index.vue
rename to src/views/material-center/components/finished-products/manuscript/components/share-manuscript-modal/index.vue
index 8046ee2..86ea333 100644
--- a/src/views/creative-generation-workshop/manuscript/components/share-manuscript-modal/index.vue
+++ b/src/views/material-center/components/finished-products/manuscript/components/share-manuscript-modal/index.vue
@@ -12,11 +12,11 @@ import {
 } from '@arco-design/web-vue';
 import CommonSelect from '@/components/common-select';
 import TextOverTips from '@/components/text-over-tips';
-import ShareModal from '@/views/creative-generation-workshop/manuscript/components/share-manuscript-modal/share-modal';
+import ShareModal from '@/views/material-center/components/finished-products/manuscript/components/share-manuscript-modal/share-modal';
 
 import { INITIAL_FORM, TABLE_COLUMNS } from './constants';
 import { formatTableField, exactFormatTime } from '@/utils/tools';
-import { CHECK_STATUS, EnumManuscriptType } from '@/views/creative-generation-workshop/manuscript/list/constants';
+import { CHECK_STATUS, EnumManuscriptType } from '@/views/material-center/components/finished-products/manuscript/list/constants';
 import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
 import { getWorksPage, getWriterLinksGenerate } from '@/api/all/generationWorkshop.ts';
 
diff --git a/src/views/creative-generation-workshop/manuscript/components/share-manuscript-modal/share-modal.vue b/src/views/material-center/components/finished-products/manuscript/components/share-manuscript-modal/share-modal.vue
similarity index 100%
rename from src/views/creative-generation-workshop/manuscript/components/share-manuscript-modal/share-modal.vue
rename to src/views/material-center/components/finished-products/manuscript/components/share-manuscript-modal/share-modal.vue
diff --git a/src/views/creative-generation-workshop/manuscript/components/share-manuscript-modal/style.scss b/src/views/material-center/components/finished-products/manuscript/components/share-manuscript-modal/style.scss
similarity index 100%
rename from src/views/creative-generation-workshop/manuscript/components/share-manuscript-modal/style.scss
rename to src/views/material-center/components/finished-products/manuscript/components/share-manuscript-modal/style.scss
diff --git a/src/views/creative-generation-workshop/manuscript/list/components/upload-manuscript-modal/index.vue b/src/views/material-center/components/finished-products/manuscript/components/upload-manuscript-modal/index.vue
similarity index 98%
rename from src/views/creative-generation-workshop/manuscript/list/components/upload-manuscript-modal/index.vue
rename to src/views/material-center/components/finished-products/manuscript/components/upload-manuscript-modal/index.vue
index 3a975cb..523449d 100644
--- a/src/views/creative-generation-workshop/manuscript/list/components/upload-manuscript-modal/index.vue
+++ b/src/views/material-center/components/finished-products/manuscript/components/upload-manuscript-modal/index.vue
@@ -97,7 +97,7 @@ export default {
       const { code, data } = await getWriterLinksGenerate();
       if (code === 200) {
         const url = router.resolve({
-          path: `/writer/manuscript/list/${data.code}`,
+          path: `/writer/material-center/finished-products/${data.code}`,
         }).href;
         form.value.writerLink = generateFullUrl(url);
       }
@@ -189,7 +189,9 @@ export default {
     // 跳转上传页面
     const goUpload = () => {
       slsWithCatch('waitUploadWorks', JSON.stringify(works.value));
-      router.push(`/manuscript/upload`);
+      router.push({
+        name: 'ManuscriptUpload',
+      });
       onClose();
     };
 
diff --git a/src/views/creative-generation-workshop/manuscript-writer/list/components/upload-manuscript-modal/style.scss b/src/views/material-center/components/finished-products/manuscript/components/upload-manuscript-modal/style.scss
similarity index 100%
rename from src/views/creative-generation-workshop/manuscript-writer/list/components/upload-manuscript-modal/style.scss
rename to src/views/material-center/components/finished-products/manuscript/components/upload-manuscript-modal/style.scss
diff --git a/src/views/creative-generation-workshop/manuscript/detail/index.vue b/src/views/material-center/components/finished-products/manuscript/detail/index.vue
similarity index 82%
rename from src/views/creative-generation-workshop/manuscript/detail/index.vue
rename to src/views/material-center/components/finished-products/manuscript/detail/index.vue
index 1beaee5..f2c042e 100644
--- a/src/views/creative-generation-workshop/manuscript/detail/index.vue
+++ b/src/views/material-center/components/finished-products/manuscript/detail/index.vue
@@ -2,22 +2,24 @@
 import { Button, Message as AMessage, Spin } from '@arco-design/web-vue';
 
 import { useRouter, useRoute } from 'vue-router';
-import { AuditStatus } from '@/views/creative-generation-workshop/manuscript/check-list/constants';
+import { AuditStatus } from '@/views/material-center/components/finished-products/constants';
 import { getWorksDetail } from '@/api/all/generationWorkshop';
-import { EnumManuscriptType } from '@/views/creative-generation-workshop/manuscript/list/constants.ts';
+import { EnumManuscriptType } from '@/views/material-center/components/finished-products/manuscript/list/constants.ts';
 import { convertVideoUrlToCoverUrl, exactFormatTime } from '@/utils/tools.ts';
 import { slsWithCatch } from '@/utils/stroage.ts';
+import { useSidebarStore } from '@/stores/modules/side-bar';
 
 const DEFAULT_SOURCE_INFO = {
-  title: '内容稿件列表',
-  routeName: 'ManuscriptList',
+  title: '成品库',
+  routeName: 'MaterialCenterFinishedProducts',
 };
-const SOURCE_MAP = new Map([['check', { title: '内容稿件审核', routeName: 'ManuscriptCheckList' }]]);
+const SOURCE_MAP = new Map([['check', { title: '成品库', routeName: 'MaterialCenterFinishedProducts' }]]);
 
 export default {
   setup(props, { emit, expose }) {
     const router = useRouter();
     const route = useRoute();
+    const sidebarStore = useSidebarStore();
     const workId = ref(route.params.id);
     const { source, audit_status } = route.query;
 
@@ -32,7 +34,11 @@ export default {
     const loading = ref(false);
 
     const isVideo = computed(() => dataSource.value.type === EnumManuscriptType.Video);
+    const showImages = computed(() => !isVideo.value && images.value.length);
     const sourceInfo = computed(() => SOURCE_MAP.get(source) ?? DEFAULT_SOURCE_INFO);
+    const collapsed = computed(() => {
+      return sidebarStore.menuCollapse;
+    });
 
     const onBack = () => {
       router.push({ name: sourceInfo.value.routeName });
@@ -120,7 +126,14 @@ export default {
             size="medium"
             type="outline"
             class="mr-12px"
-            onClick={() => router.push(`/manuscript/edit/${workId.value}`)}
+            onClick={() =>
+              router.push({
+                name: 'ManuscriptEdit',
+                params: {
+                  id: workId.value,
+                },
+              })
+            }
           >
             编辑
           </Button>
@@ -153,7 +166,7 @@ export default {
             <icon-oblique-line size="12" class="color-#C9CDD4 mx-4px" />
             <span class="cts bold !color-#1D2129">内容稿件详情</span>
           </div>
-          <div class="flex-1 bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid py-32px">
+          <div class="flex-1 bg-#fff rounded-8px content">
             <div class="w-684px mx-auto flex flex-col items-center">
               <div class="flex justify-start flex-col w-full">
                 <p class="mb-8px cts bold !text-28px !lh-40px !color-#211F24">{dataSource.value.title}</p>
@@ -168,7 +181,7 @@ export default {
               </div>
 
               {/* 仅图片类型显示图片列表 */}
-              {!isVideo.value && (
+              {showImages.value ? (
                 <div class="desc-img-wrap mt-40px">
                   {images.value.map((item, index) => (
                     <div class="desc-img-box" key={index}>
@@ -176,11 +189,17 @@ export default {
                     </div>
                   ))}
                 </div>
-              )}
+              ) : null}
             </div>
           </div>
         </div>
-        <div class="flex justify-end items-center px-16px py-20px w-full bg-#fff footer-row">{renderFooterRow()}</div>
+        <footer
+          class={`flex justify-end items-center px-16px py-16px w-full bg-#F6F5FC footer-row ${
+            collapsed.value ? 'collapsed' : ''
+          }`}
+        >
+          {renderFooterRow()}
+        </footer>
       </Spin>
     );
   },
diff --git a/src/views/creative-generation-workshop/manuscript/detail/style.scss b/src/views/material-center/components/finished-products/manuscript/detail/style.scss
similarity index 80%
rename from src/views/creative-generation-workshop/manuscript/detail/style.scss
rename to src/views/material-center/components/finished-products/manuscript/detail/style.scss
index b640e93..0835025 100644
--- a/src/views/creative-generation-workshop/manuscript/detail/style.scss
+++ b/src/views/material-center/components/finished-products/manuscript/detail/style.scss
@@ -1,8 +1,12 @@
 $footer-height: 68px;
+$content-padding-y: 32px;
 .manuscript-detail-wrap {
   width: 100%;
-  height: calc(100% - 72px);
-  margin-bottom: 72px;
+  height: calc(100% - ($footer-height - $layout-padding-bottom));
+  .content {
+    padding-top: $content-padding-y;
+    padding-bottom: calc($footer-height - $layout-padding-bottom + $content-padding-y);
+  }
   .cts {
     color: #939499;
     font-family: $font-family-regular;
@@ -63,6 +67,9 @@ $footer-height: 68px;
   bottom: 0;
   left: $sidebar-width;
   width: calc(100% - $sidebar-width);
-  border-top: 1px solid #e6e6e8;
   height: $footer-height;
+  &.collapsed {
+    left: $sidebar-width-collapse;
+    width: calc(100% - $sidebar-width-collapse);
+  }
 }
diff --git a/src/views/creative-generation-workshop/manuscript/edit/cancel-edit-modal.vue b/src/views/material-center/components/finished-products/manuscript/edit/cancel-edit-modal.vue
similarity index 93%
rename from src/views/creative-generation-workshop/manuscript/edit/cancel-edit-modal.vue
rename to src/views/material-center/components/finished-products/manuscript/edit/cancel-edit-modal.vue
index 7aff674..a68f732 100644
--- a/src/views/creative-generation-workshop/manuscript/edit/cancel-edit-modal.vue
+++ b/src/views/material-center/components/finished-products/manuscript/edit/cancel-edit-modal.vue
@@ -23,7 +23,7 @@ const onClose = () => {
 };
 const onConfirm = () => {
   onClose();
-  router.push({ name: 'ManuscriptList' });
+  router.push({ name: 'MaterialCenterFinishedProducts' });
 };
 
 const open = () => {
diff --git a/src/views/creative-generation-workshop/manuscript/edit/index.vue b/src/views/material-center/components/finished-products/manuscript/edit/index.vue
similarity index 87%
rename from src/views/creative-generation-workshop/manuscript/edit/index.vue
rename to src/views/material-center/components/finished-products/manuscript/edit/index.vue
index 11c1768..96d6d68 100644
--- a/src/views/creative-generation-workshop/manuscript/edit/index.vue
+++ b/src/views/material-center/components/finished-products/manuscript/edit/index.vue
@@ -2,8 +2,10 @@
 import { Button, Message as AMessage } from '@arco-design/web-vue';
 import EditForm, { ENUM_UPLOAD_STATUS, INITIAL_VIDEO_INFO } from '../components/edit-form';
 import CancelEditModal from './cancel-edit-modal.vue';
+
+import { useSidebarStore } from '@/stores/modules/side-bar';
 import { getWorksDetail, putWorksUpdate } from '@/api/all/generationWorkshop';
-import { EnumManuscriptType } from '@/views/creative-generation-workshop/manuscript/list/constants.ts';
+import { EnumManuscriptType } from '@/views/material-center/components/finished-products/manuscript/list/constants.ts';
 import { formatDuration, formatFileSize, convertVideoUrlToCoverUrl } from '@/utils/tools';
 import { slsWithCatch } from '@/utils/stroage.ts';
 
@@ -14,6 +16,8 @@ export default {
   setup(props, { emit, expose }) {
     const router = useRouter();
     const route = useRoute();
+    const sidebarStore = useSidebarStore();
+
     const formRef = ref(null);
     const cancelEditModal = ref(null);
     const dataSource = ref({});
@@ -23,6 +27,10 @@ export default {
 
     const workId = ref(route.params.id);
 
+    const collapsed = computed(() => {
+      return sidebarStore.menuCollapse;
+    });
+
     const onCancel = () => {
       const isModified = !isEqual(dataSource.value, remoteDataSource.value);
       if (isModified && !isSaved.value) {
@@ -81,7 +89,7 @@ export default {
       dataSource.value.videoInfo = { ...dataSource.value.videoInfo, ...newVideoInfo };
     };
     const onBack = () => {
-      router.push({ name: 'ManuscriptList' });
+      router.push({ name: 'MaterialCenterFinishedProducts' });
     };
     onMounted(() => {
       workId && getData();
@@ -92,12 +100,12 @@ export default {
         <div class="manuscript-edit-wrap">
           <div class="flex items-center mb-8px">
             <span class="cts color-#4E5969 cursor-pointer" onClick={onCancel}>
-              内容稿件列表
+              成品库
             </span>
             <icon-oblique-line size="12" class="color-#C9CDD4 mx-4px" />
             <span class="cts bold !color-#1D2129">编辑内容稿件</span>
           </div>
-          <div class="flex-1 overflow-y-auto p-24px bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid">
+          <div class="flex-1 overflow-y-auto p-24px bg-#fff rounded-8px ">
             <EditForm
               ref={formRef}
               formData={dataSource.value}
@@ -106,7 +114,11 @@ export default {
             />
           </div>
         </div>
-        <div class="flex justify-end items-center px-16px py-20px w-full bg-#fff footer-row">
+        <footer
+          class={`flex justify-end items-center px-16px py-16px w-full bg-#F6F5FC footer-row ${
+            collapsed.value ? 'collapsed' : ''
+          }`}
+        >
           <Button size="medium" type="outline" onClick={onCancel} class="mr-12px">
             退出
           </Button>
@@ -116,7 +128,7 @@ export default {
           <Button type="primary" size="medium" onClick={() => onSave(true)} loading={uploadLoading.value}>
             保存并审核
           </Button>
-        </div>
+        </footer>
 
         <CancelEditModal ref={cancelEditModal} />
       </>
diff --git a/src/views/creative-generation-workshop/manuscript/edit/style.scss b/src/views/material-center/components/finished-products/manuscript/edit/style.scss
similarity index 72%
rename from src/views/creative-generation-workshop/manuscript/edit/style.scss
rename to src/views/material-center/components/finished-products/manuscript/edit/style.scss
index b574f60..0509c0a 100644
--- a/src/views/creative-generation-workshop/manuscript/edit/style.scss
+++ b/src/views/material-center/components/finished-products/manuscript/edit/style.scss
@@ -1,6 +1,6 @@
 $footer-height: 68px;
 .manuscript-edit-wrap {
-  height: calc(100% - 72px);
+  height: calc(100% - ($footer-height - $layout-padding-bottom));
   display: flex;
   flex-direction: column;
   .cts {
@@ -20,6 +20,9 @@ $footer-height: 68px;
   bottom: 0;
   left: $sidebar-width;
   width: calc(100% - $sidebar-width);
-  border-top: 1px solid #e6e6e8;
   height: $footer-height;
+  &.collapsed {
+    left: $sidebar-width-collapse;
+    width: calc(100% - $sidebar-width-collapse);
+  }
 }
diff --git a/src/views/creative-generation-workshop/manuscript/list/components/filter-block/index.vue b/src/views/material-center/components/finished-products/manuscript/list/components/filter-block/index.vue
similarity index 97%
rename from src/views/creative-generation-workshop/manuscript/list/components/filter-block/index.vue
rename to src/views/material-center/components/finished-products/manuscript/list/components/filter-block/index.vue
index 9e411aa..f68d0b5 100644
--- a/src/views/creative-generation-workshop/manuscript/list/components/filter-block/index.vue
+++ b/src/views/material-center/components/finished-products/manuscript/list/components/filter-block/index.vue
@@ -85,7 +85,7 @@
 
 <script setup>
 import { defineEmits, defineProps } from 'vue';
-import { CHECK_STATUS } from '@/views/creative-generation-workshop/manuscript/list/constants';
+import { CHECK_STATUS } from '@/views/material-center/components/finished-products/manuscript/list/constants';
 import CommonSelect from '@/components/common-select';
 // import { getProjectList } from '@/api/all/propertyMarketing';
 
diff --git a/src/views/creative-generation-workshop/manuscript/list/components/manuscript-table/constants.ts b/src/views/material-center/components/finished-products/manuscript/list/components/manuscript-table/constants.ts
similarity index 100%
rename from src/views/creative-generation-workshop/manuscript/list/components/manuscript-table/constants.ts
rename to src/views/material-center/components/finished-products/manuscript/list/components/manuscript-table/constants.ts
diff --git a/src/views/creative-generation-workshop/manuscript/list/components/manuscript-table/delete-manuscript-modal.vue b/src/views/material-center/components/finished-products/manuscript/list/components/manuscript-table/delete-manuscript-modal.vue
similarity index 100%
rename from src/views/creative-generation-workshop/manuscript/list/components/manuscript-table/delete-manuscript-modal.vue
rename to src/views/material-center/components/finished-products/manuscript/list/components/manuscript-table/delete-manuscript-modal.vue
diff --git a/src/views/creative-generation-workshop/manuscript/list/components/manuscript-table/index.vue b/src/views/material-center/components/finished-products/manuscript/list/components/manuscript-table/index.vue
similarity index 75%
rename from src/views/creative-generation-workshop/manuscript/list/components/manuscript-table/index.vue
rename to src/views/material-center/components/finished-products/manuscript/list/components/manuscript-table/index.vue
index 22ecc9c..834f749 100644
--- a/src/views/creative-generation-workshop/manuscript/list/components/manuscript-table/index.vue
+++ b/src/views/material-center/components/finished-products/manuscript/list/components/manuscript-table/index.vue
@@ -1,13 +1,31 @@
 <template>
-  <a-table ref="tableRef" :data="dataSource" row-key="id" column-resizable :pagination="false" :scroll="{ x: '100%' }"
-    class="manuscript-table w-100% flex-1" bordered @sorter-change="handleSorterChange">
+  <a-table
+    ref="tableRef"
+    :data="dataSource"
+    row-key="id"
+    column-resizable
+    :pagination="false"
+    :scroll="{ x: '100%' }"
+    class="manuscript-table w-100% flex-1"
+    bordered
+    @sorter-change="handleSorterChange"
+  >
     <template #empty>
       <NoData text="暂无稿件" />
     </template>
     <template #columns>
-      <a-table-column v-for="column in TABLE_COLUMNS" :key="column.dataIndex" :data-index="column.dataIndex"
-        :fixed="column.fixed" :width="column.width" :min-width="column.minWidth" :sortable="column.sortable"
-        :align="column.align" ellipsis tooltip>
+      <a-table-column
+        v-for="column in TABLE_COLUMNS"
+        :key="column.dataIndex"
+        :data-index="column.dataIndex"
+        :fixed="column.fixed"
+        :width="column.width"
+        :min-width="column.minWidth"
+        :sortable="column.sortable"
+        :align="column.align"
+        ellipsis
+        tooltip
+      >
         <template #title>
           <div class="flex items-center">
             <span class="cts mr-4px">{{ column.title }}</span>
@@ -21,31 +39,39 @@
           {{ exactFormatTime(record.create_at) }}
         </template>
         <template v-else-if="column.dataIndex === 'customer_opinion'" #cell="{ record }">
-          <p class="h-28px px-8px flex items-center rounded-2px w-fit"
-            :style="{ background: getCustomerOpinionInfo(record.customer_opinion)?.bg }">
+          <p
+            class="h-28px px-8px flex items-center rounded-2px w-fit"
+            :style="{ background: getCustomerOpinionInfo(record.customer_opinion)?.bg }"
+          >
             <span class="cts" :class="getCustomerOpinionInfo(record.customer_opinion)?.color">{{
               getCustomerOpinionInfo(record.customer_opinion)?.label ?? '-'
-              }}</span>
+            }}</span>
           </p>
         </template>
         <template v-else-if="column.dataIndex === 'title'" #cell="{ record }">
           <TextOverTips :context="record.title" :line="3" class="title" @click="onDetail(record)" />
         </template>
         <template v-else-if="column.dataIndex === 'audit_status'" #cell="{ record }">
-          <div class="flex items-center w-fit h-28px px-8px rounded-2px"
-            :style="{ backgroundColor: getStatusInfo(record.audit_status).backgroundColor }">
+          <div
+            class="flex items-center w-fit h-28px px-8px rounded-2px"
+            :style="{ backgroundColor: getStatusInfo(record.audit_status).backgroundColor }"
+          >
             <span class="cts s1" :style="{ color: getStatusInfo(record.audit_status).color }">{{
               getStatusInfo(record.audit_status).name
-              }}</span>
+            }}</span>
           </div>
         </template>
         <template v-else-if="column.dataIndex === 'type'" #cell="{ record }">
           <div class="flex items-center">
-            <img :src="record.type === EnumManuscriptType.Image ? icon2 : icon3" width="16" height="16"
-              class="mr-4px" />
+            <img
+              :src="record.type === EnumManuscriptType.Image ? icon2 : icon3"
+              width="16"
+              height="16"
+              class="mr-4px"
+            />
             <span class="cts" :class="record.type === EnumManuscriptType.Image ? '!color-#25C883' : '!color-#6D4CFE'">{{
               record.type === EnumManuscriptType.Image ? '图文' : '视频'
-              }}</span>
+            }}</span>
           </div>
         </template>
         <template v-else-if="['uploader', 'last_modifier'].includes(column.dataIndex)" #cell="{ record }">
@@ -82,10 +108,8 @@
 import { ref } from 'vue';
 import { formatTableField, exactFormatTime } from '@/utils/tools';
 import { TABLE_COLUMNS } from './constants';
-import { CHECK_STATUS, EnumManuscriptType } from '@/views/creative-generation-workshop/manuscript/list/constants';
-import {
-  CUSTOMER_OPINION,
-} from '@/views/creative-generation-workshop/manuscript/check-list/constants';
+import { CHECK_STATUS, EnumManuscriptType } from '@/views/material-center/components/finished-products/manuscript/list/constants';
+import { CUSTOMER_OPINION } from '@/views/material-center/components/finished-products/manuscript/check-list/constants';
 
 import TextOverTips from '@/components/text-over-tips';
 import HoverImagePreview from '@/components/hover-image-preview';
@@ -114,10 +138,20 @@ const onDelete = (item) => {
   emits('delete', item);
 };
 const onEdit = (item) => {
-  router.push(`/manuscript/edit/${item.id}`);
+  router.push({
+    name: 'ManuscriptEdit',
+    params: {
+      id: item.id,
+    },
+  });
 };
 const onDetail = (item) => {
-  router.push(`/manuscript/detail/${item.id}`);
+  router.push({
+    name: 'ManuscriptDetail',
+    params: {
+      id: item.id,
+    },
+  });
 };
 
 const getStatusInfo = (audit_status) => {
diff --git a/src/views/creative-generation-workshop/manuscript-writer/list/components/manuscript-table/style.scss b/src/views/material-center/components/finished-products/manuscript/list/components/manuscript-table/style.scss
similarity index 100%
rename from src/views/creative-generation-workshop/manuscript-writer/list/components/manuscript-table/style.scss
rename to src/views/material-center/components/finished-products/manuscript/list/components/manuscript-table/style.scss
diff --git a/src/views/creative-generation-workshop/manuscript-writer/list/constants.ts b/src/views/material-center/components/finished-products/manuscript/list/constants.ts
similarity index 100%
rename from src/views/creative-generation-workshop/manuscript-writer/list/constants.ts
rename to src/views/material-center/components/finished-products/manuscript/list/constants.ts
diff --git a/src/views/creative-generation-workshop/manuscript/list/index.vue b/src/views/material-center/components/finished-products/manuscript/list/index.vue
similarity index 60%
rename from src/views/creative-generation-workshop/manuscript/list/index.vue
rename to src/views/material-center/components/finished-products/manuscript/list/index.vue
index d98afb9..516883e 100644
--- a/src/views/creative-generation-workshop/manuscript/list/index.vue
+++ b/src/views/material-center/components/finished-products/manuscript/list/index.vue
@@ -1,27 +1,13 @@
 <template>
   <div class="manuscript-list-wrap">
-    <div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid mb-16px">
-      <div class="top flex h-64px px-24px py-10px justify-between items-center">
-        <p class="text-18px font-400 lh-26px color-#211F24 title">内容稿件列表</p>
-        <div class="flex items-center">
-          <a-button type="outline" size="medium" class="mr-12px" @click="handleShareModal">
-            分享内容稿件
-          </a-button>
-          <a-button type="primary" size="medium" @click="openUploadModal">
-            <template #icon>
-              <icon-plus size="16" />
-            </template>
-            <template #default>上传内容稿件</template>
-          </a-button>
-        </div>
-      </div>
+    <div class="filter-wrap bg-#fff rounded-b-8px  mb-16px">
       <FilterBlock v-model:query="query" @search="handleSearch" @reset="handleReset" />
     </div>
     <div
-      class="table-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px py-24px flex flex-col"
+      class="table-wrap bg-#fff rounded-8px px-24px py-24px flex flex-col"
     >
       <ManuscriptTable :dataSource="dataSource" @sorterChange="handleSorterChange" @delete="handleDelete" />
-      <div v-if="pageInfo.total > 0" class="pagination-box">
+      <div v-if="pageInfo.total > 0" class="pagination-row">
         <a-pagination
           :total="pageInfo.total"
           size="mini"
@@ -37,8 +23,6 @@
     </div>
 
     <DeleteManuscriptModal ref="deleteManuscriptModalRef" />
-    <UploadManuscriptModal ref="uploadManuscriptModalRef" />
-    <ShareManuscriptModal ref="shareManuscriptModalRef" />
   </div>
 </template>
 <script lang="jsx" setup>
@@ -47,12 +31,10 @@ import { Button } from '@arco-design/web-vue';
 import FilterBlock from './components/filter-block';
 import ManuscriptTable from './components/manuscript-table';
 import DeleteManuscriptModal from './components/manuscript-table/delete-manuscript-modal.vue';
-import UploadManuscriptModal from './components/upload-manuscript-modal';
-import ShareManuscriptModal from '@/views/creative-generation-workshop/manuscript/components/share-manuscript-modal';
 
 import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
 import { getWorksPage } from '@/api/all/generationWorkshop.ts';
-import { INITIAL_QUERY, EnumCheckStatus } from '@/views/creative-generation-workshop/manuscript/list/constants.ts';
+import { INITIAL_QUERY, EnumCheckStatus } from '@/views/material-center/components/finished-products/manuscript/list/constants.ts';
 
 const { dataSource, pageInfo, onPageChange, onPageSizeChange, resetPageInfo } = useTableSelectionWithPagination({
   onPageChange: () => {
@@ -65,8 +47,6 @@ const { dataSource, pageInfo, onPageChange, onPageSizeChange, resetPageInfo } =
 const query = ref(cloneDeep(INITIAL_QUERY));
 const addManuscriptModalRef = ref(null);
 const deleteManuscriptModalRef = ref(null);
-const uploadManuscriptModalRef = ref(null);
-const shareManuscriptModalRef = ref(null);
 
 const getData = async () => {
   const { page, page_size } = pageInfo.value;
@@ -98,13 +78,6 @@ const handleSorterChange = (column, order) => {
   reload();
 };
 
-const handleShareModal = () => {
-  shareManuscriptModalRef.value.open()
-};
-const openUploadModal = () => {
-  uploadManuscriptModalRef.value?.open();
-};
-
 const handleDelete = (item) => {
   const { id, title } = item;
   deleteManuscriptModalRef.value?.open({ id, name: `“${title}”` });
diff --git a/src/views/material-center/components/finished-products/manuscript/list/style.scss b/src/views/material-center/components/finished-products/manuscript/list/style.scss
new file mode 100644
index 0000000..abbedf0
--- /dev/null
+++ b/src/views/material-center/components/finished-products/manuscript/list/style.scss
@@ -0,0 +1,11 @@
+.manuscript-list-wrap {
+  // height: 100%;
+  display: flex;
+  flex-direction: column;
+  .filter-wrap {
+  }
+  .table-wrap {
+    display: flex;
+    flex-direction: column;
+  }
+}
diff --git a/src/views/creative-generation-workshop/manuscript/upload/cancel-upload-modal.vue b/src/views/material-center/components/finished-products/manuscript/upload/cancel-upload-modal.vue
similarity index 94%
rename from src/views/creative-generation-workshop/manuscript/upload/cancel-upload-modal.vue
rename to src/views/material-center/components/finished-products/manuscript/upload/cancel-upload-modal.vue
index 358e4c4..afbe71a 100644
--- a/src/views/creative-generation-workshop/manuscript/upload/cancel-upload-modal.vue
+++ b/src/views/material-center/components/finished-products/manuscript/upload/cancel-upload-modal.vue
@@ -25,7 +25,7 @@ const onClose = () => {
 };
 const onConfirm = () => {
   onClose();
-  router.push({ name: 'ManuscriptList' });
+  router.push({ name: 'MaterialCenterFinishedProducts' });
 };
 
 const open = (manusNum) => {
diff --git a/src/views/creative-generation-workshop/manuscript/upload/index.vue b/src/views/material-center/components/finished-products/manuscript/upload/index.vue
similarity index 92%
rename from src/views/creative-generation-workshop/manuscript/upload/index.vue
rename to src/views/material-center/components/finished-products/manuscript/upload/index.vue
index a8de73c..429ce2e 100644
--- a/src/views/creative-generation-workshop/manuscript/upload/index.vue
+++ b/src/views/material-center/components/finished-products/manuscript/upload/index.vue
@@ -5,24 +5,15 @@ import EditForm, { ENUM_UPLOAD_STATUS, INITIAL_VIDEO_INFO } from '../components/
 import CancelUploadModal from './cancel-upload-modal.vue';
 import UploadSuccessModal from './upload-success-modal.vue';
 
-import { EnumManuscriptType } from '@/views/creative-generation-workshop/manuscript/list/constants';
+import { EnumManuscriptType } from '@/views/material-center/components/finished-products/manuscript/list/constants';
 import { postWorksBatch } from '@/api/all/generationWorkshop.ts';
 import { glsWithCatch, rlsWithCatch, slsWithCatch } from '@/utils/stroage.ts';
 import { formatDuration, formatFileSize, convertVideoUrlToCoverUrl } from '@/utils/tools';
+import { useSidebarStore } from '@/stores/modules/side-bar';
 
 import icon1 from '@/assets/img/creative-generation-workshop/icon-photo.png';
 import icon2 from '@/assets/img/creative-generation-workshop/icon-video.png';
 
-// const generateMockData = (count = 4) =>
-//   Array.from({ length: count }, (_, i) => ({
-//     id: `${i + 1}`,
-//     title: `标题${i + 1}`,
-//     content: '挖到宝了！这个平价好物让我素颜出门都自信✨挖到宝了！这个平价好物让我素颜出门都自信✨',
-//     type: i % 2 === 0 ? EnumManuscriptType.Image : EnumManuscriptType.Video,
-//     files: [],
-//     videoInfo: cloneDeep(INITIAL_VIDEO_INFO),
-//   }));
-
 export default {
   components: {
     EditForm,
@@ -31,6 +22,8 @@ export default {
     const formRef = ref(null);
     const route = useRoute();
     const router = useRouter();
+    const sidebarStore = useSidebarStore();
+
     const cancelUploadModal = ref(null);
     const uploadSuccessModal = ref(null);
     const works = ref([]);
@@ -38,6 +31,10 @@ export default {
     const errorDataCards = ref([]);
     const uploadLoading = ref(false);
 
+    const collapsed = computed(() => {
+      return sidebarStore.menuCollapse;
+    });
+
     const onCancel = () => {
       cancelUploadModal.value?.open(works.value.length);
     };
@@ -87,7 +84,7 @@ export default {
             slsWithCatch('manuscriptCheckIds', data);
             router.push({ name: 'ManuscriptCheck' });
           } else {
-            router.push({ name: 'ManuscriptList' });
+            router.push({ name: 'MaterialCenterFinishedProducts' });
           }
         }
       }
@@ -244,7 +241,7 @@ export default {
 
     return () => (
       <>
-        <div class="manuscript-upload-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid flex">
+        <div class="manuscript-upload-wrap bg-#fff rounded-8px  flex">
           <div class="left flex-1 overflow-y-auto p-24px">
             <EditForm
               ref={formRef}
@@ -307,8 +304,14 @@ export default {
             </div>
           )}
         </div>
-        <div class="flex justify-end items-center px-16px py-20px w-full bg-#fff footer-row">{renderFooterRow()}</div>
-
+        <footer
+          class={`flex justify-end items-center px-16px py-16px w-full bg-#F6F5FC footer-row ${
+            collapsed.value ? 'collapsed' : ''
+          }`}
+        >
+          {renderFooterRow()}
+        </footer>
+        
         <CancelUploadModal ref={cancelUploadModal} />
         <UploadSuccessModal ref={uploadSuccessModal} />
       </>
diff --git a/src/views/creative-generation-workshop/manuscript/upload/style.scss b/src/views/material-center/components/finished-products/manuscript/upload/style.scss
similarity index 75%
rename from src/views/creative-generation-workshop/manuscript/upload/style.scss
rename to src/views/material-center/components/finished-products/manuscript/upload/style.scss
index c3df4ae..d3c3f70 100644
--- a/src/views/creative-generation-workshop/manuscript/upload/style.scss
+++ b/src/views/material-center/components/finished-products/manuscript/upload/style.scss
@@ -1,6 +1,6 @@
 $footer-height: 68px;
 .manuscript-upload-wrap {
-  height: calc(100% - 72px);
+  height: calc(100% - ($footer-height - $layout-padding-bottom));
   .cts,
   :deep(.overflow-text) {
     color: #939499;
@@ -24,6 +24,9 @@ $footer-height: 68px;
   bottom: 0;
   left: $sidebar-width;
   width: calc(100% - $sidebar-width);
-  border-top: 1px solid #e6e6e8;
   height: $footer-height;
+  &.collapsed {
+    left: $sidebar-width-collapse;
+    width: calc(100% - $sidebar-width-collapse);
+  }
 }
diff --git a/src/views/creative-generation-workshop/manuscript/upload/upload-success-modal.vue b/src/views/material-center/components/finished-products/manuscript/upload/upload-success-modal.vue
similarity index 96%
rename from src/views/creative-generation-workshop/manuscript/upload/upload-success-modal.vue
rename to src/views/material-center/components/finished-products/manuscript/upload/upload-success-modal.vue
index 5ced374..d0a9706 100644
--- a/src/views/creative-generation-workshop/manuscript/upload/upload-success-modal.vue
+++ b/src/views/material-center/components/finished-products/manuscript/upload/upload-success-modal.vue
@@ -29,7 +29,7 @@ const onClose = () => {
 
 const onBack = () => {
   onClose();
-  router.push({ name: 'ManuscriptList' });
+  router.push({ name: 'MaterialCenterFinishedProducts' });
 };
 const onConfirm = () => {
   visible.value = false;
diff --git a/src/views/material-center/components/finished-products/style.scss b/src/views/material-center/components/finished-products/style.scss
new file mode 100644
index 0000000..d93b8c2
--- /dev/null
+++ b/src/views/material-center/components/finished-products/style.scss
@@ -0,0 +1,37 @@
+.finished-products-wrap {
+  :deep(.ant-tabs) {
+    .ant-tabs-nav {
+      margin-bottom: 0;
+      padding: 0 24px;
+      .ant-tabs-nav-wrap {
+        height: 56px;
+        .ant-tabs-nav-list {
+          .ant-tabs-tab {
+            .ant-tabs-tab-btn {
+              color: var(--Text-2, #55585f);
+              font-family: $font-family-regular;
+              font-size: 16px;
+              font-style: normal;
+              font-weight: 400;
+              line-height: 24px;
+            }
+            &.ant-tabs-tab-active {
+              .ant-tabs-tab-btn {
+                color: var(--Brand-6, #6d4cfe);
+                font-weight: 500;
+                font-family: $font-family-medium;
+                text-shadow: none;
+              }
+            }
+          }
+          .ant-tabs-ink-bar {
+            background: #6D4CFE;
+          }
+        }
+      }
+    }
+    .ant-tabs-content-holder {
+      display: none;
+    }
+  }
+}
diff --git a/src/views/material-center/components/raw-material/components/filter-block/index.vue b/src/views/material-center/components/raw-material/components/filter-block/index.vue
new file mode 100644
index 0000000..00525a5
--- /dev/null
+++ b/src/views/material-center/components/raw-material/components/filter-block/index.vue
@@ -0,0 +1,121 @@
+<template>
+  <div class="common-filter-wrap">
+    <div class="filter-row">
+      <div class="filter-row-item">
+        <span class="label">文件名称</span>
+        <a-input
+          v-model="query.name"
+          class="!w-240px"
+          placeholder="请输入文件名称"
+          size="medium"
+          allow-clear
+          @change="handleSearch"
+        >
+          <template #prefix>
+            <icon-search />
+          </template>
+        </a-input>
+      </div>
+      <div class="filter-row-item">
+        <span class="label">序号</span>
+        <a-space size="medium">
+          <a-input
+            v-model="query.uid"
+            class="!w-160px"
+            placeholder="请输入序号"
+            size="medium"
+            allow-clear
+            @change="handleSearch"
+          >
+            <template #prefix>
+              <icon-search />
+            </template>
+          </a-input>
+        </a-space>
+      </div>
+      <!-- <div class="filter-row-item">
+        <span class="label">来源</span>
+        <CommonSelect
+          placeholder="请选择所属项目"
+          :options="CHECK_STATUS"
+          v-model="query.audit_status"
+          class="!w-160px"
+          :multiple="false"
+          @change="handleSearch"
+        />
+      </div> -->
+      <div class="filter-row-item">
+        <span class="label">上传时间</span>
+        <a-range-picker
+          v-model="created_at"
+          size="medium"
+          allow-clear
+          format="YYYY-MM-DD"
+          class="w-280px"
+          @change="onDateChange"
+        />
+      </div>
+      <div class="filter-row-item">
+        <a-button type="outline" class="mr-12px" size="medium" @click="handleSearch">
+          <template #icon>
+            <icon-search />
+          </template>
+          <template #default>搜索</template>
+        </a-button>
+        <a-button size="medium" @click="handleReset">
+          <template #icon>
+            <icon-refresh />
+          </template>
+          <template #default>重置</template>
+        </a-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineEmits, defineProps } from 'vue';
+// import CommonSelect from '@/components/common-select';
+
+const props = defineProps({
+  query: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emits = defineEmits('search', 'reset', 'update:query');
+
+const created_at = ref([]);
+
+const handleSearch = () => {
+  emits('update:query', props.query);
+  nextTick(() => {
+    emits('search');
+  });
+};
+
+const onDateChange = (value) => {
+  if (!value) {
+    props.query.created_at = [];
+    handleSearch();
+    return;
+  }
+
+  const [start, end] = value;
+  const FORMAT_DATE = 'YYYY-MM-DD HH:mm:ss';
+  props.query.created_at = [
+    dayjs(start).startOf('day').format(FORMAT_DATE),
+    dayjs(end).endOf('day').format(FORMAT_DATE),
+  ];
+
+  handleSearch();
+};
+
+
+const handleReset = () => {
+  created_at.value = [];
+  emits('reset');
+};
+
+</script>
diff --git a/src/views/material-center/components/raw-material/components/table/delete-file-modal.vue b/src/views/material-center/components/raw-material/components/table/delete-file-modal.vue
new file mode 100644
index 0000000..fe55b31
--- /dev/null
+++ b/src/views/material-center/components/raw-material/components/table/delete-file-modal.vue
@@ -0,0 +1,54 @@
+<template>
+  <a-modal v-model:visible="visible" title="删除文件" width="480px" @close="onClose">
+    <div class="flex items-center">
+      <img :src="icon1" width="20" height="20" class="mr-12px" />
+      <span>确认删除 {{ fileName }} 文件吗？</span>
+    </div>
+    <template #footer>
+      <a-button size="medium" @click="onClose">取消</a-button>
+      <a-button type="primary" class="ml-16px" status="danger" size="medium" @click="onDelete">确认删除</a-button>
+    </template>
+  </a-modal>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { deleteRawMaterial, batchDeleteRawMaterials } from '@/api/all/generationWorkshop';
+import icon1 from '@/assets/img/media-account/icon-warn-1.png';
+
+const update = inject('update');
+
+const visible = ref(false);
+const fileId = ref(null);
+const fileName = ref('');
+
+const isBatch = computed(() => Array.isArray(fileId.value));
+
+function onClose() {
+  visible.value = false;
+  fileId.value = null;
+  fileName.value = '';
+}
+
+const open = (record) => {
+  const { id = null, name = '' } = record;
+  fileId.value = id;
+  fileName.value = name;
+
+  visible.value = true;
+};
+
+async function onDelete() {
+  const _fn = isBatch.value ? batchDeleteRawMaterials : deleteRawMaterial;
+  const _params = isBatch.value ? { ids: fileId.value } : fileId.value;
+  const { code } = await _fn(_params);
+  if (code === 200) {
+    AMessage.success('删除成功');
+    isBatch.value ? emits('batchUpdate') : emits('update');
+
+    onClose();
+  }
+}
+
+defineExpose({ open });
+</script>
diff --git a/src/views/material-center/components/raw-material/components/table/index.vue b/src/views/material-center/components/raw-material/components/table/index.vue
new file mode 100644
index 0000000..5fb0e2c
--- /dev/null
+++ b/src/views/material-center/components/raw-material/components/table/index.vue
@@ -0,0 +1,137 @@
+<template>
+  <a-table
+    ref="tableRef"
+    :data="dataSource"
+    row-key="id"
+    column-resizable
+    :pagination="false"
+    :scroll="{ x: '100%' }"
+    class="flex-1 manuscript-table w-100%"
+    bordered
+    :row-selection="rowSelection"
+    :selected-row-keys="selectedRowKeys"
+    @sorter-change="handleSorterChange"
+    @select="(selectedKeys, rowKeyValue, record) => emits('select', selectedKeys, rowKeyValue, record)"
+    @select-all="(check) => emits('selectAll', check)"
+  >
+    <template #empty>
+      <NoData text="暂无文件" />
+    </template>
+    <template #columns>
+      <a-table-column
+        v-for="column in tableColumns"
+        :key="column.dataIndex"
+        :data-index="column.dataIndex"
+        :fixed="column.fixed"
+        :width="column.width"
+        :min-width="column.minWidth"
+        :sortable="column.sortable"
+        :align="column.align"
+        ellipsis
+        tooltip
+      >
+        <template #title>
+          <div class="flex items-center">
+            <span class="cts mr-4px">{{ column.title }}</span>
+            <a-tooltip v-if="column.tooltip" :content="column.tooltip" position="top">
+              <icon-question-circle class="tooltip-icon color-#737478" size="16" />
+            </a-tooltip>
+          </div>
+        </template>
+        <template v-if="column.dataIndex === 'name'" #cell="{ record }">
+          <div class="flex items-center">
+            <HoverImagePreview :src="record.cover">
+              <a-image :width="64" :height="64" :src="record.cover" class="!rounded-8px mr-16px" fit="cover">
+                <template #error>
+                  <img :src="icon4" class="w-full h-full" />
+                </template>
+              </a-image>
+            </HoverImagePreview>
+            <div class="flex-1 flex flex-col overflow-hidden">
+              <TextOverTips :context="record.name" :line="1" class="cts mb-4px regular" />
+              <TextOverTips :context="`序号：${record.uid}`" :line="1" class="cts !color-#737478 regular" />
+            </div>
+          </div>
+        </template>
+        <template v-else-if="column.dataIndex === 'type'" #cell="{ record }">
+          {{ TABS_LIST.find((item) => item.value === record.type)?.label ?? '-' }}
+        </template>
+        <template v-else-if="column.dataIndex === 'size'" #cell="{ record }">
+          <span class="cts num">{{ formatFileSize(record.size) }}</span>
+        </template>
+        <template v-else-if="column.dataIndex === 'origin'" #cell="{ record }">
+          {{ ORIGIN_LIST.find((item) => item.value === record.origin)?.label ?? '-' }}
+        </template>
+        <template v-else-if="['uploader', 'last_modifier'].includes(column.dataIndex)" #cell="{ record }">
+          {{ record[column.dataIndex].name || record[column.dataIndex].mobile }}
+        </template>
+        <template #cell="{ record }" v-else-if="['created_at'].includes(column.dataIndex)">
+          <span class="cts num">{{ exactFormatTime(record[column.dataIndex]) }}</span>
+        </template>
+        <template v-else-if="column.dataIndex === 'operation'" #cell="{ record }">
+          <div class="flex items-center">
+            <img class="mr-8px cursor-pointer" :src="icon1" width="14" height="14" @click="onDelete(record)" />
+            <a-button type="outline" size="mini" @click="onDownload(record)">下载</a-button>
+          </div>
+        </template>
+        <template v-else #cell="{ record }">
+          {{ formatTableField(column, record, true) }}
+        </template>
+      </a-table-column>
+    </template>
+  </a-table>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { formatTableField, exactFormatTime, formatFileSize, downloadByUrl } from '@/utils/tools';
+import { slsWithCatch } from '@/utils/stroage.ts';
+import { TABS_LIST, ORIGIN_LIST } from '../../constants';
+
+import TextOverTips from '@/components/text-over-tips';
+import ShareModal from '@/views/material-center/components/finished-products/manuscript/components/share-manuscript-modal/share-modal.vue';
+import HoverImagePreview from '@/components/hover-image-preview';
+
+import icon1 from '@/assets/img/media-account/icon-delete.png';
+import icon2 from '@/assets/img/creative-generation-workshop/icon-photo.png';
+import icon3 from '@/assets/img/creative-generation-workshop/icon-video.png';
+import icon4 from '@/assets/img/error-img.png';
+
+const emits = defineEmits(['sorterChange', 'delete', 'select', 'selectAll']);
+const router = useRouter();
+
+const props = defineProps({
+  dataSource: {
+    type: Array,
+    default: () => [],
+  },
+  tableColumns: {
+    type: Array,
+    default: () => [],
+  },
+  rowSelection: {
+    type: Object,
+    default: () => {},
+  },
+  selectedRowKeys: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const tableRef = ref(null);
+
+const handleSorterChange = (column, order) => {
+  emits('sorterChange', column, order === 'ascend' ? 'asc' : 'desc');
+};
+const onDelete = (item) => {
+  emits('delete', item);
+};
+const onDownload = (item) => {
+  downloadByUrl(item.file);
+};
+</script>
+
+<style scoped lang="scss">
+@import './style.scss';
+</style>
diff --git a/src/views/material-center/components/raw-material/components/table/style.scss b/src/views/material-center/components/raw-material/components/table/style.scss
new file mode 100644
index 0000000..d03c8da
--- /dev/null
+++ b/src/views/material-center/components/raw-material/components/table/style.scss
@@ -0,0 +1,16 @@
+.manuscript-table {
+  .cts {
+    color: var(--Text-1, #211f24);
+    font-family: $font-family-medium;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+    &.num {
+      font-family: $font-family-manrope-regular;
+    }
+    &.regular {
+      font-family: $font-family-regular;
+    }
+  }
+}
diff --git a/src/views/material-center/components/raw-material/constants.ts b/src/views/material-center/components/raw-material/constants.ts
new file mode 100644
index 0000000..436dd01
--- /dev/null
+++ b/src/views/material-center/components/raw-material/constants.ts
@@ -0,0 +1,87 @@
+export enum RawMaterialType {
+  All = '',
+  Image = 0,
+  Video = 1,
+  Text = 2,
+}
+
+export const TABS_LIST = [
+  {
+    label: '全部',
+    value: RawMaterialType.All,
+  },
+  {
+    label: '图片',
+    value: RawMaterialType.Image,
+  },
+  {
+    label: '视频',
+    value: RawMaterialType.Video,
+  },
+  {
+    label: '文本',
+    value: RawMaterialType.Text,
+  },
+];
+
+export const ORIGIN_LIST = [
+  {
+    label: '本地上传',
+    value: 0,
+  },
+  {
+    label: 'AI生成',
+    value: 1,
+  },
+]
+
+export const INITIAL_QUERY = {
+  name: '',
+  uid: '',
+  type: RawMaterialType.All,
+  created_at: [],
+  sort_column: undefined,
+  sort_order: undefined,
+};
+
+export const TABLE_COLUMNS = [
+  {
+    title: '文件名称',
+    dataIndex: 'name',
+    width: 400,
+  },
+  {
+    title: '类型',
+    dataIndex: 'type',
+    width: 80,
+  },
+  {
+    title: '来源',
+    dataIndex: 'origin',
+    width: 120,
+  },
+  {
+    title: '大小',
+    dataIndex: 'size',
+    width: 120,
+  },
+  {
+    title: '上传时间',
+    dataIndex: 'created_at',
+    width: 180,
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    title: '上传人员',
+    dataIndex: 'uploader',
+    width: 180,
+  },
+  {
+    title: '操作',
+    dataIndex: 'operation',
+    width: 100,
+    fixed: 'right',
+  }
+]
\ No newline at end of file
diff --git a/src/views/material-center/components/raw-material/index.vue b/src/views/material-center/components/raw-material/index.vue
new file mode 100644
index 0000000..3dd1de8
--- /dev/null
+++ b/src/views/material-center/components/raw-material/index.vue
@@ -0,0 +1,149 @@
+<script lang="tsx">
+import { provide } from 'vue';
+import { Tabs, TabPane } from 'ant-design-vue';
+import { TABS_LIST, RawMaterialType, INITIAL_QUERY, TABLE_COLUMNS } from './constants';
+import FilterBlock from './components/filter-block/index.vue';
+import RawMaterialTable from './components/table/index.vue';
+import DeleteRawMaterialModal from './components/table/delete-file-modal.vue';
+
+import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
+import { getRawMaterialsPage } from '@/api/all/generationWorkshop';
+
+export default defineComponent({
+  setup(_, { attrs, slots, expose }) {
+    const {
+      dataSource,
+      pageInfo,
+      rowSelection,
+      onPageChange,
+      onPageSizeChange,
+      selectedRowKeys,
+      selectedRows,
+      handleSelect,
+      handleSelectAll,
+      resetPageInfo,
+    } = useTableSelectionWithPagination({
+      onPageChange: () => {
+        getData();
+      },
+      onPageSizeChange: () => {
+        getData();
+      },
+    });
+
+    const deleteRawMaterialModalRef = ref(null);
+    const query = ref(cloneDeep(INITIAL_QUERY));
+    const handleSearch = () => {
+      getData();
+    };
+    const getData = async () => {
+      const { page, page_size } = pageInfo.value;
+      const { code, data } = await getRawMaterialsPage({
+        ...query.value,
+        page,
+        page_size,
+      });
+      if (code === 200) {
+        dataSource.value = data?.data ?? [];
+        pageInfo.value.total = data.total;
+      }
+    };
+    const reload = () => {
+      pageInfo.value.page = 1;
+      getData();
+    };
+    const handleReset = () => {
+      resetPageInfo();
+      query.value = cloneDeep(INITIAL_QUERY);
+      reload();
+    };
+    const handleSorterChange = (column, order) => {
+      query.value.sort_column = column;
+      query.value.sort_order = order;
+      reload();
+    };
+
+    const handleBatchDelete = () => {
+      const ids = selectedRows.value.map((item) => item.id);
+      const names = selectedRows.value.map((item) => `"${item.name || '-'}` + '"').join('，');
+
+      deleteRawMaterialModalRef.value?.open({ id: ids, name: names });
+    };
+
+    const handleDelete = (item) => {
+      const { id, name } = item;
+      deleteRawMaterialModalRef.value?.open({ id, name: `“${name}”` });
+    };
+
+    const handleTabClick = (key) => {
+      query.value.type = key;
+      reload();
+    };
+
+    const onBatchSuccess = () => {
+      selectedRows.value = [];
+      selectedRowKeys.value = [];
+      getData();
+    };
+
+    onMounted(() => {
+      getData();
+    });
+
+    return () => (
+      <div class="raw-material-wrap h-full flex flex-col">
+        <div class="bg-white rounded-t-8px">
+          <Tabs v-model:activeKey={query.value.type} onTabClick={handleTabClick}>
+            {TABS_LIST.map((item) => (
+              <TabPane key={item.value} tab={item.label}>
+                {item.label}
+              </TabPane>
+            ))}
+          </Tabs>
+        </div>
+        <div class="filter-wrap bg-#fff rounded-b-8px  mb-16px">
+          <FilterBlock v-model:query={query.value} onSearch={handleSearch} onReset={handleReset} />
+        </div>
+        <div class="table-wrap bg-#fff rounded-8px px-24px py-24px flex flex-col">
+          <div class="flex justify-end mb-12px">
+            <a-button type="outline" class="w-fit" size="medium" onClick={handleBatchDelete}>
+              批量删除
+            </a-button>
+          </div>
+
+          <RawMaterialTable
+            tableColumns={TABLE_COLUMNS}
+            rowSelection={rowSelection}
+            selectedRowKeys={selectedRowKeys.value}
+            dataSource={dataSource.value}
+            onSorterChange={handleSorterChange}
+            onDelete={handleDelete}
+            onSelect={handleSelect}
+            onSelectAll={handleSelectAll}
+          />
+          {pageInfo.value.total > 0 && (
+            <div class="pagination-row">
+              <a-pagination
+                total={pageInfo.value.total}
+                size="mini"
+                show-total
+                show-jumper
+                show-page-size
+                current={pageInfo.value.page}
+                pageSize={pageInfo.value.page_size}
+                onChange={onPageChange}
+                onPageSizeChange={onPageSizeChange}
+              />
+            </div>
+          )}
+        </div>
+        <DeleteRawMaterialModal ref={deleteRawMaterialModalRef} onBatchUpdate={onBatchSuccess} onUpdate={getData} />
+      </div>
+    );
+  },
+});
+</script>
+
+<style scoped lang="scss">
+@import './style.scss';
+</style>
diff --git a/src/views/material-center/components/raw-material/style.scss b/src/views/material-center/components/raw-material/style.scss
new file mode 100644
index 0000000..2bf2d92
--- /dev/null
+++ b/src/views/material-center/components/raw-material/style.scss
@@ -0,0 +1,37 @@
+.raw-material-wrap {
+  :deep(.ant-tabs) {
+    .ant-tabs-nav {
+      margin-bottom: 0;
+      padding: 0 24px;
+      .ant-tabs-nav-wrap {
+        height: 56px;
+        .ant-tabs-nav-list {
+          .ant-tabs-tab {
+            .ant-tabs-tab-btn {
+              color: var(--Text-2, #55585f);
+              font-family: $font-family-regular;
+              font-size: 16px;
+              font-style: normal;
+              font-weight: 400;
+              line-height: 24px;
+            }
+            &.ant-tabs-tab-active {
+              .ant-tabs-tab-btn {
+                color: var(--Brand-6, #6d4cfe);
+                font-weight: 500;
+                font-family: $font-family-medium;
+                text-shadow: none;
+              }
+            }
+          }
+          .ant-tabs-ink-bar {
+            background: #6D4CFE;
+          }
+        }
+      }
+    }
+    .ant-tabs-content-holder {
+      display: none;
+    }
+  }
+}
diff --git a/src/views/material-center/index.vue b/src/views/material-center/index.vue
new file mode 100644
index 0000000..e6a303e
--- /dev/null
+++ b/src/views/material-center/index.vue
@@ -0,0 +1,58 @@
+<script lang="tsx">
+import FinishedProducts from './components/finished-products/index.vue';
+import RawMaterial from './components/raw-material/index.vue';
+
+const TABS = [
+  {
+    label: '成品库',
+    key: '1',
+    routeName: 'MaterialCenterFinishedProducts',
+  },
+  {
+    label: '原料库',
+    key: '2',
+    routeName: 'MaterialCenterRawMaterial',
+  },
+];
+export default defineComponent({
+  setup(_, { attrs, slots, expose }) {
+    const route = useRoute();
+    const router = useRouter();
+
+    const activeKey = ref('');
+
+    onMounted(() => {
+      activeKey.value = TABS.find((item) => item.routeName === route.name)?.key;
+    });
+    return () => (
+      <div class="material-center-wrap h-full flex flex-col">
+        <header class="py-16px px-24px rounded-8px bg-#fff flex items-center mb-16px">
+          {TABS.map((item) => (
+            <p
+              key={item.key}
+              class={`font-family-medium color-#737478 font-400 text-16px lh-24px cursor-pointer mr-32px ${
+                item.key === activeKey.value ? '!color-#6D4CFE font-500' : ''
+              }`}
+              onClick={() => {
+                activeKey.value = '';
+                router.push({ name: item.routeName });
+              }}
+            >
+              {item.label}
+            </p>
+          ))}
+        </header>
+        {activeKey.value === '1' ? (
+          <FinishedProducts />
+        ) : activeKey.value === '2' ? (
+          <RawMaterial />
+        ) : null}
+      </div>
+    );
+  },
+});
+</script>
+
+<style scoped lang="scss">
+@import './style.scss';
+</style>
diff --git a/src/views/material-center/style.scss b/src/views/material-center/style.scss
new file mode 100644
index 0000000..0d3706c
--- /dev/null
+++ b/src/views/material-center/style.scss
@@ -0,0 +1,2 @@
+.material-center-wrap {
+}
diff --git a/src/views/property-marketing/brands/brand-materials/index.vue b/src/views/property-marketing/brands/brand-materials/index.vue
index 3e9edaa..10caacb 100644
--- a/src/views/property-marketing/brands/brand-materials/index.vue
+++ b/src/views/property-marketing/brands/brand-materials/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="brand-wrap">
-    <div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid">
+    <div class="filter-wrap bg-#fff rounded-8px ">
       <div class="top flex h-64px px-24px py-10px justify-between items-center">
         <p class="text-18px font-400 lh-26px color-#211F24 title">品牌物料</p>
         <div class="flex items-center">
@@ -72,7 +72,7 @@
       </div>
     </div>
     <div
-      class="table-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px py-24px flex-1 flex flex-col"
+      class="table-wrap bg-#fff rounded-8px  px-24px py-24px  flex flex-col"
     >
       <a-table :data="tableData" ref="tableRef" :pagination="false">
         <template #columns>
@@ -106,7 +106,7 @@
         </template>
       </a-table>
 
-      <div class="pagination-box">
+      <div class="pagination-row">
         <a-pagination
           :total="pageInfo.total"
           size="mini"
diff --git a/src/views/property-marketing/brands/brand-materials/style.scss b/src/views/property-marketing/brands/brand-materials/style.scss
index 86e618c..6e8e882 100644
--- a/src/views/property-marketing/brands/brand-materials/style.scss
+++ b/src/views/property-marketing/brands/brand-materials/style.scss
@@ -1,5 +1,4 @@
 .brand-wrap {
-  height: 100%;
   display: flex;
   flex-direction: column;
 
@@ -11,14 +10,6 @@
   .table-wrap {
     width: 100%;
 
-    .pagination-box {
-      display: flex;
-      width: 100%;
-      padding: 16px 24px;
-      justify-content: flex-end;
-      align-items: center;
-    }
-
     margin-top: 20px;
   }
 
diff --git a/src/views/property-marketing/intelligent-solution/businessAnalysisReport.vue b/src/views/property-marketing/intelligent-solution/businessAnalysisReport.vue
index 2fe0259..1635a60 100644
--- a/src/views/property-marketing/intelligent-solution/businessAnalysisReport.vue
+++ b/src/views/property-marketing/intelligent-solution/businessAnalysisReport.vue
@@ -46,7 +46,7 @@
     >
       <a-table :columns="columns" :data="tableData" @change="handleChange"  :pagination="false">
       </a-table>
-      <div class="pagination-box">
+      <div class="pagination-row">
         <a-pagination
           :total="pageInfo.total"
           size="mini"
@@ -177,14 +177,6 @@ const columns = [
   .table-wrap {
     width: 100%;
 
-    .pagination-box {
-      display: flex;
-      width: 100%;
-      padding: 16px 24px;
-      justify-content: flex-end;
-      align-items: center;
-    }
-
     margin-top: 20px;
   }
 
diff --git a/src/views/property-marketing/intelligent-solution/competitiveProductAnalysisReport.vue b/src/views/property-marketing/intelligent-solution/competitiveProductAnalysisReport.vue
index 0c7a42f..8b06cd2 100644
--- a/src/views/property-marketing/intelligent-solution/competitiveProductAnalysisReport.vue
+++ b/src/views/property-marketing/intelligent-solution/competitiveProductAnalysisReport.vue
@@ -46,7 +46,7 @@
     >
       <a-table :columns="columns" :data="tableData" @change="handleChange"  :pagination="false">
       </a-table>
-      <div class="pagination-box">
+      <div class="pagination-row">
         <a-pagination
           :total="pageInfo.total"
           size="mini"
@@ -169,7 +169,7 @@ const columns = [
   .table-wrap {
     width: 100%;
 
-    .pagination-box {
+    .pagination-row {
       display: flex;
       width: 100%;
       padding: 16px 24px;
diff --git a/src/views/property-marketing/media-account/account-dashboard/components/account-table/index.vue b/src/views/property-marketing/media-account/account-dashboard/components/account-table/index.vue
index c71c05e..716690d 100644
--- a/src/views/property-marketing/media-account/account-dashboard/components/account-table/index.vue
+++ b/src/views/property-marketing/media-account/account-dashboard/components/account-table/index.vue
@@ -41,7 +41,7 @@
     :selected-keys="selectedItems"
     :pagination="false"
     :scroll="{ x: '100%' }"
-    class="account-table w-100%"
+    class="account-table w-100% flex-1"
     bordered
     @sorter-change="handleSorterChange"
     @select="handleSelect"
diff --git a/src/views/property-marketing/media-account/account-dashboard/components/account-table/style.scss b/src/views/property-marketing/media-account/account-dashboard/components/account-table/style.scss
index 1184e99..8715f74 100644
--- a/src/views/property-marketing/media-account/account-dashboard/components/account-table/style.scss
+++ b/src/views/property-marketing/media-account/account-dashboard/components/account-table/style.scss
@@ -18,8 +18,6 @@
   :deep(.status-box) {
     .label {
       font-family: $font-family-medium;
-      font-size: 14px;
-      line-height: 22px;
     }
   }
   .ai-evaluation-row {
diff --git a/src/views/property-marketing/media-account/account-dashboard/components/filter-block/index.vue b/src/views/property-marketing/media-account/account-dashboard/components/filter-block/index.vue
index 8e1ce39..3a969b3 100644
--- a/src/views/property-marketing/media-account/account-dashboard/components/filter-block/index.vue
+++ b/src/views/property-marketing/media-account/account-dashboard/components/filter-block/index.vue
@@ -4,61 +4,66 @@
  * @Date: 2025-06-25 14:02:40
 -->
 <template>
-  <div class="container">
-    <div class="filter-row flex mb-20px">
+  <div class="common-filter-wrap">
+    <div class="filter-row flex">
       <div class="filter-row-item flex items-center">
         <span class="label">账号名称</span>
-        <a-space size="medium" class="w-240px">
-          <a-input v-model="query.name" placeholder="请搜索..." size="medium" allow-clear @change="handleSearch">
-            <template #prefix>
-              <icon-search />
-            </template>
-          </a-input>
-        </a-space>
+        <a-input
+          v-model="query.name"
+          placeholder="请搜索..."
+          size="medium"
+          class="!w-240px"
+          allow-clear
+          @change="handleSearch"
+        >
+          <template #prefix>
+            <icon-search />
+          </template>
+        </a-input>
       </div>
       <div class="filter-row-item flex items-center">
         <span class="label">分组</span>
-        <a-space class="w-200px">
-          <CommonSelect v-model="query.group_ids" :options="groups" @change="handleSearch" />
-        </a-space>
+        <CommonSelect class="!w-200px" v-model="query.group_ids" :options="groups" @change="handleSearch" />
       </div>
       <div class="filter-row-item flex items-center">
         <span class="label">状态</span>
-        <a-space class="w-180px">
-          <StatusSelect v-model="query.status" @change="handleSearch" />
-        </a-space>
+        <StatusSelect v-model="query.status" @change="handleSearch" class="!w-180px" />
       </div>
       <div class="filter-row-item flex items-center">
         <span class="label">运营人员</span>
-        <a-space class="w-160px">
-          <CommonSelect v-model="query.operator_id" :multiple="false" :options="operators" @change="handleSearch" />
-        </a-space>
+        <CommonSelect
+          v-model="query.operator_id"
+          :multiple="false"
+          :options="operators"
+          @change="handleSearch"
+          class="!w-160px"
+        />
       </div>
     </div>
     <div class="filter-row flex">
       <div class="filter-row-item flex items-center">
         <span class="label">时间筛选</span>
-        <a-space class="w-240px">
-          <a-select v-model="query.type" size="medium" placeholder="全部" class="w-120px" @change="handleSearch">
-            <template #arrow-icon> <icon-calendar size="16" /> </template>
-            <a-option :value="7" label="近7天">近7天</a-option>
-            <!-- <a-option :value="14" label="近14天">近14天</a-option> -->
-            <a-option :value="30" label="近30天">近30天</a-option>
-          </a-select>
-        </a-space>
+        <a-select v-model="query.type" size="medium" placeholder="全部" class="!w-240px" @change="handleSearch">
+          <template #arrow-icon> <icon-calendar size="16" /> </template>
+          <a-option :value="7" label="近7天">近7天</a-option>
+          <!-- <a-option :value="14" label="近14天">近14天</a-option> -->
+          <a-option :value="30" label="近30天">近30天</a-option>
+        </a-select>
+      </div>
+      <div class="filter-row-item flex items-center">
+        <a-button type="outline" class="w-84px mr-12px" size="medium" @click="handleSearch">
+          <template #icon>
+            <icon-search />
+          </template>
+          <template #default>搜索</template>
+        </a-button>
+        <a-button class="w-84px" size="medium" @click="handleReset">
+          <template #icon>
+            <icon-refresh />
+          </template>
+          <template #default>重置</template>
+        </a-button>
       </div>
-      <a-button type="outline" class="w-84px mr-12px" size="medium" @click="handleSearch">
-        <template #icon>
-          <icon-search />
-        </template>
-        <template #default>搜索</template>
-      </a-button>
-      <a-button class="w-84px" size="medium" @click="handleReset">
-        <template #icon>
-          <icon-refresh />
-        </template>
-        <template #default>重置</template>
-      </a-button>
     </div>
   </div>
 </template>
diff --git a/src/views/property-marketing/media-account/account-dashboard/index.vue b/src/views/property-marketing/media-account/account-dashboard/index.vue
index ced1f9e..374dd47 100644
--- a/src/views/property-marketing/media-account/account-dashboard/index.vue
+++ b/src/views/property-marketing/media-account/account-dashboard/index.vue
@@ -5,7 +5,7 @@
 
 <template>
   <div class="account-dashboard-wrap">
-    <div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px pb-20px mb-16px">
+    <div class="filter-wrap bg-#fff rounded-8px px-24px pb-20px mb-16px">
       <div class="top flex h-64px py-10px justify-between items-center">
         <div class="flex items-center">
           <p class="text-18px font-400 lh-26px color-#211F24 mr-4px title">数据总览</p>
@@ -27,12 +27,10 @@
         </div>
       </div>
     </div>
-    <div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px py-24px mb-16px">
+    <div class=" bg-#fff rounded-8px mb-16px">
       <FilterBlock v-model:query="query" @onSearch="handleSearch" @onReset="handleReset" />
     </div>
-    <div
-      class="table-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px py-24px flex-1 flex flex-col"
-    >
+    <div class="table-wrap bg-#fff rounded-8px px-24px py-24px flex flex-col">
       <AccountTable
         ref="accountTableRef"
         :dataSource="dataSource"
@@ -41,7 +39,7 @@
         @export="handleExport"
         @sorterChange="handleSorterChange"
       />
-      <div v-if="pageInfo.total > 0" class="pagination-box">
+      <div v-if="pageInfo.total > 0" class="pagination-row">
         <a-pagination
           :total="pageInfo.total"
           size="mini"
diff --git a/src/views/property-marketing/media-account/account-dashboard/style.scss b/src/views/property-marketing/media-account/account-dashboard/style.scss
index 16fd193..20af56f 100644
--- a/src/views/property-marketing/media-account/account-dashboard/style.scss
+++ b/src/views/property-marketing/media-account/account-dashboard/style.scss
@@ -1,10 +1,9 @@
 .account-dashboard-wrap {
-  height: 100%;
   display: flex;
   flex-direction: column;
   .filter-wrap {
     border-radius: 8px;
-    border: 1px solid #e6e6e8;
+    // border: 1px solid #e6e6e8;
     .top {
       .title {
         font-family: $font-family-medium;
@@ -47,12 +46,5 @@
 
   .table-wrap {
     width: 100%;
-    .pagination-box {
-      display: flex;
-      width: 100%;
-      padding: 16px 24px;
-      justify-content: flex-end;
-      align-items: center;
-    }
   }
 }
diff --git a/src/views/property-marketing/media-account/account-detail/components/account-info/index.vue b/src/views/property-marketing/media-account/account-detail/components/account-info/index.vue
index 4ebb270..5a3e87c 100644
--- a/src/views/property-marketing/media-account/account-detail/components/account-info/index.vue
+++ b/src/views/property-marketing/media-account/account-detail/components/account-info/index.vue
@@ -3,7 +3,7 @@
  * @Date: 2025-06-28 12:58:25
 -->
 <template>
-  <div class="account-info-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px mb-16px">
+  <div class="account-info-wrap bg-#fff rounded-8px  px-24px mb-16px">
     <div class="title-row">
       <span class="cts !text-18px !lh-26px title">账号信息</span>
     </div>
diff --git a/src/views/property-marketing/media-account/account-detail/components/note-table/index.vue b/src/views/property-marketing/media-account/account-detail/components/note-table/index.vue
index 3ee11e6..3abfa13 100644
--- a/src/views/property-marketing/media-account/account-detail/components/note-table/index.vue
+++ b/src/views/property-marketing/media-account/account-detail/components/note-table/index.vue
@@ -3,7 +3,7 @@
  * @Date: 2025-06-28 12:58:09
 -->
 <template>
-  <div class="note-table-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px flex-1 flex flex-col">
+  <div class="note-table-wrap bg-#fff rounded-8px  px-24px flex-1 flex flex-col">
     <div class="title-row">
       <div class="flex items-center">
         <span class="cts !text-18px !lh-26px mr-4px title">笔记详情</span>
@@ -97,7 +97,7 @@
         </a-table-column>
       </template>
     </a-table>
-    <div v-if="pageInfo.total > 0" class="pagination-box">
+    <div v-if="pageInfo.total > 0" class="pagination-row mb-24px">
       <a-pagination
         :total="pageInfo.total"
         size="mini"
diff --git a/src/views/property-marketing/media-account/account-detail/components/note-table/style.scss b/src/views/property-marketing/media-account/account-detail/components/note-table/style.scss
index e772b23..9f52329 100644
--- a/src/views/property-marketing/media-account/account-detail/components/note-table/style.scss
+++ b/src/views/property-marketing/media-account/account-detail/components/note-table/style.scss
@@ -19,12 +19,4 @@
       }
     }
   }
-
-  .pagination-box {
-    display: flex;
-    width: 100%;
-    padding: 16px 24px;
-    justify-content: flex-end;
-    align-items: center;
-  }
 }
diff --git a/src/views/property-marketing/media-account/account-detail/style.scss b/src/views/property-marketing/media-account/account-detail/style.scss
index 40d5a29..10ec5ef 100644
--- a/src/views/property-marketing/media-account/account-detail/style.scss
+++ b/src/views/property-marketing/media-account/account-detail/style.scss
@@ -22,12 +22,5 @@
 
   .table-wrap {
     width: 100%;
-    .pagination-box {
-      display: flex;
-      width: 100%;
-      padding: 16px 24px;
-      justify-content: flex-end;
-      align-items: center;
-    }
   }
 }
diff --git a/src/views/property-marketing/media-account/account-manage/components/account-table/style.scss b/src/views/property-marketing/media-account/account-manage/components/account-table/style.scss
index 15882e1..d96c224 100644
--- a/src/views/property-marketing/media-account/account-manage/components/account-table/style.scss
+++ b/src/views/property-marketing/media-account/account-manage/components/account-table/style.scss
@@ -6,7 +6,7 @@
   gap: 20px;
   .card-item {
     border-radius: 8px;
-    border: 1px solid var(--BG-300, #e6e6e8);
+    // border: 1px solid var(--BG-300, #e6e6e8);
     background: var(--BG-white, #fff);
     padding: 12px 16px 16px;
     display: flex;
diff --git a/src/views/property-marketing/media-account/account-manage/components/filter-block/index.vue b/src/views/property-marketing/media-account/account-manage/components/filter-block/index.vue
index 479e9e5..ed4e42e 100644
--- a/src/views/property-marketing/media-account/account-manage/components/filter-block/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/filter-block/index.vue
@@ -4,9 +4,9 @@
  * @Date: 2025-06-25 14:02:40
 -->
 <template>
-  <div class="container px-24px pt-12px pb-24px">
-    <div class="filter-row flex mb-20px">
-      <div class="filter-row-item flex items-center">
+  <div class="common-filter-wrap">
+    <div class="filter-row flex">
+      <div class="filter-row-item">
         <span class="label">账号名称/ID/手机号</span>
         <a-space size="medium">
           <a-input
@@ -23,13 +23,13 @@
           </a-input>
         </a-space>
       </div>
-      <div class="filter-row-item flex items-center">
+      <div class="filter-row-item">
         <span class="label">状态</span>
         <a-space class="w-180px">
           <StatusSelect v-model="query.status" @change="handleSearch" />
         </a-space>
       </div>
-      <div class="filter-row-item flex items-center">
+      <div class="filter-row-item">
         <span class="label">平台</span>
         <a-space class="w-160px">
           <a-select v-model="query.platform" size="medium" placeholder="全部" allow-clear @change="handleSearch">
@@ -43,44 +43,52 @@
           </a-select>
         </a-space>
       </div>
-      <div class="filter-row-item flex items-center">
+      <div class="filter-row-item">
         <span class="label">运营人员</span>
         <a-space class="w-160px">
-          <CommonSelect v-model="query.operator_id" :multiple="false" :options="operators" @change="handleSearch" />
+          <CommonSelect
+            v-model="query.operator_id"
+            allowSearch
+            :multiple="false"
+            :options="operators"
+            @change="handleSearch"
+          />
         </a-space>
       </div>
     </div>
-    <div class="filter-row flex">
-      <div class="filter-row-item flex items-center">
+    <div class="filter-row">
+      <div class="filter-row-item">
         <span class="label">分组</span>
         <a-space class="w-200px">
           <CommonSelect v-model="query.group_ids" multiple :options="groups" @change="handleSearch" />
         </a-space>
       </div>
-      <div class="filter-row-item flex items-center">
+      <div class="filter-row-item">
         <span class="label">所属项目</span>
         <a-space class="w-200px">
           <CommonSelect v-model="query.project_ids" :options="projects" @change="handleSearch" />
         </a-space>
       </div>
-      <div class="filter-row-item flex items-center">
+      <div class="filter-row-item">
         <span class="label">标签</span>
         <a-space class="w-320px">
           <CommonSelect v-model="query.tag_ids" :options="tags" @change="handleSearch" />
         </a-space>
       </div>
-      <a-button type="outline" class="w-84px mr-12px" size="medium" @click="handleSearch">
-        <template #icon>
-          <icon-search />
-        </template>
-        <template #default>搜索</template>
-      </a-button>
-      <a-button class="w-84px" size="medium" @click="handleReset">
-        <template #icon>
-          <icon-refresh />
-        </template>
-        <template #default>重置</template>
-      </a-button>
+      <div class="filter-row-item">
+        <a-button type="outline" class="w-84px mr-12px" size="medium" @click="handleSearch">
+          <template #icon>
+            <icon-search />
+          </template>
+          <template #default>搜索</template>
+        </a-button>
+        <a-button class="w-84px" size="medium" @click="handleReset">
+          <template #icon>
+            <icon-refresh />
+          </template>
+          <template #default>重置</template>
+        </a-button>
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/views/property-marketing/media-account/account-manage/components/filter-block/style.scss b/src/views/property-marketing/media-account/account-manage/components/filter-block/style.scss
index 48e2115..dd08cb3 100644
--- a/src/views/property-marketing/media-account/account-manage/components/filter-block/style.scss
+++ b/src/views/property-marketing/media-account/account-manage/components/filter-block/style.scss
@@ -1,4 +1,4 @@
-.container {
+.filter-wrap {
   .filter-row {
     .filter-row-item {
       &:not(:last-child) {
diff --git a/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/index.vue b/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/index.vue
index 90730b9..675e3b1 100644
--- a/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/index.vue
@@ -60,7 +60,7 @@
         </div>
       </template>
     </a-table>
-    <div v-if="pageInfo.total > 0" class="pagination-box flex justify-end">
+    <div v-if="pageInfo.total > 0" class="pagination-row flex justify-end">
       <a-pagination
         :total="pageInfo.total"
         size="mini"
diff --git a/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/style.scss b/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/style.scss
index 59c92e2..f2e8984 100644
--- a/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/style.scss
+++ b/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/style.scss
@@ -16,12 +16,7 @@
       font-weight: 400;
       line-height: 22px; /* 157.143% */
     }
-    .pagination-box {
-      display: flex;
-      width: 100%;
-      padding: 16px 24px;
-      justify-content: flex-end;
-      align-items: center;
+    .pagination-row {
       .arco-pagination {
         .arco-pagination-list {
           .arco-pagination-item {
diff --git a/src/views/property-marketing/media-account/account-manage/index.vue b/src/views/property-marketing/media-account/account-manage/index.vue
index ae128f4..998e913 100644
--- a/src/views/property-marketing/media-account/account-manage/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/index.vue
@@ -4,7 +4,7 @@
 -->
 <template>
   <div class="account-manage-wrap">
-    <div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid">
+    <div class="filter-wrap bg-#fff rounded-8px ">
       <div class="top flex h-64px px-24px py-10px justify-between items-center">
         <p class="text-18px font-400 lh-26px color-#211F24 title">账号管理</p>
         <div class="flex items-center">
@@ -91,7 +91,7 @@
       />
       <NoData v-else />
 
-      <div v-if="pageInfo.total > 0" class="pagination-box">
+      <div v-if="pageInfo.total > 0" class="pagination-row">
         <a-pagination
           :total="pageInfo.total"
           size="mini"
diff --git a/src/views/property-marketing/media-account/account-manage/style.scss b/src/views/property-marketing/media-account/account-manage/style.scss
index 5e6419a..09fd9e5 100644
--- a/src/views/property-marketing/media-account/account-manage/style.scss
+++ b/src/views/property-marketing/media-account/account-manage/style.scss
@@ -50,10 +50,10 @@
         margin-right: 16px;
       }
       &.red {
-        color: #F64B31;
+        color: #f64b31;
       }
       &.disabled {
-        color: #C5B7FF;
+        color: #c5b7ff;
         cursor: not-allowed;
       }
     }
@@ -61,13 +61,5 @@
   .card-wrap {
     display: flex;
     flex-direction: column;
-    .pagination-box {
-      display: flex;
-      width: 100%;
-      padding: 16px 24px;
-      justify-content: flex-end;
-      align-items: center;
-
-    }
   }
 }
diff --git a/src/views/property-marketing/media-account/components/status-select/status-box.tsx b/src/views/property-marketing/media-account/components/status-select/status-box.tsx
index 3b6c5e8..3557ace 100644
--- a/src/views/property-marketing/media-account/components/status-select/status-box.tsx
+++ b/src/views/property-marketing/media-account/components/status-select/status-box.tsx
@@ -115,14 +115,14 @@ export default defineComponent({
             {to_be_expire_for_cookie === EnumExpireForCookie.EXPIRE && (
               <div class="flex items-center rounded-2px px-8px mr-8px" style={{ background, color }}>
                 <img src={icon1} width="12" height="12" class="mr-4px" />
-                <span class="text-12px lh-20px font-400 label">{label}</span>
+                <span class="text-14px lh-22px font-400 label">{label}</span>
               </div>
             )}
             <div
               class="flex items-center rounded-2px px-8px"
               style={{ background: normalStyle.background, color: normalStyle.color }}
             >
-              <span class="text-12px lh-20px font-400">正常</span>
+              <span class="text-14px lh-22px font-400 label">正常</span>
             </div>
           </div>
         );
@@ -130,7 +130,7 @@ export default defineComponent({
 
       return (
         <div class="flex items-center rounded-2px px-8px status-box" style={{ background, color }}>
-          <span class="text-12px lh-20px font-400 label">{label}</span>
+          <span class="text-14px lh-22px font-400 label">{label}</span>
           {status === EnumStatus.PAUSE ? (
             <img src={iconWarn1} width="12" height="12" class="ml-4px" />
           ) : (
diff --git a/src/views/property-marketing/project-manage/project-list/index.vue b/src/views/property-marketing/project-manage/project-list/index.vue
index 51d8643..05aa2d3 100644
--- a/src/views/property-marketing/project-manage/project-list/index.vue
+++ b/src/views/property-marketing/project-manage/project-list/index.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="project-list-wrap">
-    <div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid mb-16px">
+    <div class="filter-wrap bg-#fff rounded-8px mb-16px">
       <div class="top flex h-64px px-24px py-10px justify-between items-center">
         <p class="text-18px font-400 lh-26px color-#211F24 title">项目列表</p>
         <div class="flex items-center">
           <a-button type="primary" class="w-112px search-btn" size="medium" @click="handleOpenAddProjectModal">
             <template #icon>
-              <icon-plus size="16"/>
+              <icon-plus size="16" />
             </template>
             <template #default>添加项目</template>
           </a-button>
@@ -14,16 +14,14 @@
       </div>
       <FilterBlock v-model:query="query" @onSearch="handleSearch" @onReset="handleReset" />
     </div>
-    <div
-      class="table-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px py-24px flex-1 flex flex-col"
-    >
+    <div class="table-wrap bg-#fff rounded-8px px-24px py-24px flex flex-col">
       <ProjectTable
         :dataSource="dataSource"
         @sorterChange="handleSorterChange"
         @delete="handleDelete"
         @edit="handleEdit"
       />
-      <div v-if="pageInfo.total > 0" class="pagination-box">
+      <div v-if="pageInfo.total > 0" class="pagination-row">
         <a-pagination
           :total="pageInfo.total"
           size="mini"
diff --git a/src/views/property-marketing/project-manage/project-list/style.scss b/src/views/property-marketing/project-manage/project-list/style.scss
index 09ee598..988c23f 100644
--- a/src/views/property-marketing/project-manage/project-list/style.scss
+++ b/src/views/property-marketing/project-manage/project-list/style.scss
@@ -1,5 +1,4 @@
 .project-list-wrap {
-  height: 100%;
   display: flex;
   flex-direction: column;
   .filter-wrap {
@@ -18,12 +17,5 @@
   .table-wrap {
     display: flex;
     flex-direction: column;
-    .pagination-box {
-      display: flex;
-      width: 100%;
-      padding: 16px 24px;
-      justify-content: flex-end;
-      align-items: center;
-    }
   }
 }
diff --git a/src/views/property-marketing/put-account/account-dashboard/index.vue b/src/views/property-marketing/put-account/account-dashboard/index.vue
index 7caeee8..107d2a7 100644
--- a/src/views/property-marketing/put-account/account-dashboard/index.vue
+++ b/src/views/property-marketing/put-account/account-dashboard/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="account-dashboard-wrap">
-    <div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid pb-24px mb-16px">
+    <div class="filter-wrap bg-#fff rounded-8px  pb-24px mb-16px">
       <a-tabs v-model:activeKey="accountType" @tab-click="handleTabClick">
         <a-tab-pane key="1" title="账户"></a-tab-pane>
         <a-tab-pane key="2" title="计划"></a-tab-pane>
diff --git a/src/views/property-marketing/put-account/account-dashboard/style.scss b/src/views/property-marketing/put-account/account-dashboard/style.scss
index 9e6a32a..f2e75e9 100644
--- a/src/views/property-marketing/put-account/account-dashboard/style.scss
+++ b/src/views/property-marketing/put-account/account-dashboard/style.scss
@@ -17,7 +17,7 @@
 
   .filter-wrap {
     border-radius: 8px;
-    border: 1px solid #e6e6e8;
+    // border: 1px solid #e6e6e8;
 
     :deep(.arco-tabs) {
       .arco-tabs-tab {
diff --git a/src/views/property-marketing/put-account/account-data/components/group-manage-modal/index.vue b/src/views/property-marketing/put-account/account-data/components/group-manage-modal/index.vue
index 49d4357..f26bb79 100644
--- a/src/views/property-marketing/put-account/account-data/components/group-manage-modal/index.vue
+++ b/src/views/property-marketing/put-account/account-data/components/group-manage-modal/index.vue
@@ -59,7 +59,7 @@
         </div>
       </template>
     </a-table>
-    <div v-if="pageInfo.total > 0" class="pagination-box flex justify-end">
+    <div v-if="pageInfo.total > 0" class="pagination-row flex justify-end">
       <a-pagination
         :total="pageInfo.total"
         size="mini"
diff --git a/src/views/property-marketing/put-account/account-data/components/group-manage-modal/style.scss b/src/views/property-marketing/put-account/account-data/components/group-manage-modal/style.scss
index 3c19b01..fd526b5 100644
--- a/src/views/property-marketing/put-account/account-data/components/group-manage-modal/style.scss
+++ b/src/views/property-marketing/put-account/account-data/components/group-manage-modal/style.scss
@@ -16,12 +16,7 @@
       font-weight: 400;
       line-height: 22px; /* 157.143% */
     }
-    .pagination-box {
-      display: flex;
-      width: 100%;
-      padding: 16px 24px;
-      justify-content: flex-end;
-      align-items: center;
+    .pagination-row {
       .arco-pagination {
         .arco-pagination-list {
           .arco-pagination-item {
diff --git a/src/views/property-marketing/put-account/account-data/index.vue b/src/views/property-marketing/put-account/account-data/index.vue
index 4a9875e..caad23d 100644
--- a/src/views/property-marketing/put-account/account-data/index.vue
+++ b/src/views/property-marketing/put-account/account-data/index.vue
@@ -4,7 +4,7 @@
 -->
 <template>
   <div class="account-data-wrap">
-    <div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid pb-24px mb-16px">
+    <div class="filter-wrap bg-#fff rounded-8px pb-24px mb-16px">
       <a-tabs v-model="activeTab" @tab-click="handleTabClick">
         <a-tab-pane key="1" title="账户"></a-tab-pane>
         <a-tab-pane key="2" title="计划"></a-tab-pane>
@@ -25,9 +25,7 @@
         @onReset="init"
       />
     </div>
-    <div
-      class="table-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px py-24px flex-1 flex flex-col"
-    >
+    <div class="table-wrap bg-#fff rounded-8px px-24px py-24px flex flex-col">
       <component
         :is="isAccountTab ? BoardTable : PlanTable"
         ref="accountTableRef"
@@ -36,7 +34,7 @@
         @sorterChange="handleSorterChange"
         @selectionChange="handleSelectionChange"
       />
-      <div v-if="pageInfo.total > 0" class="pagination-box">
+      <div v-if="pageInfo.total > 0" class="pagination-row">
         <a-pagination
           :total="pageInfo.total"
           size="mini"
diff --git a/src/views/property-marketing/put-account/account-data/style.scss b/src/views/property-marketing/put-account/account-data/style.scss
index 9fcc279..6df3528 100644
--- a/src/views/property-marketing/put-account/account-data/style.scss
+++ b/src/views/property-marketing/put-account/account-data/style.scss
@@ -1,10 +1,9 @@
 .account-data-wrap {
-    height: 100%;
   display: flex;
   flex-direction: column;
   .filter-wrap {
     border-radius: 8px;
-    border: 1px solid #e6e6e8;
+    // border: 1px solid #e6e6e8;
     :deep(.arco-tabs) {
       .arco-tabs-tab {
         height: 56px;
@@ -21,7 +20,6 @@
         font-family: $font-family-medium;
         font-style: normal;
       }
-      
     }
     .overview-row {
       .overview-item {
@@ -38,12 +36,5 @@
 
   .table-wrap {
     width: 100%;
-    .pagination-box {
-      display: flex;
-      width: 100%;
-      padding: 16px 24px;
-      justify-content: flex-end;
-      align-items: center;
-    }
   }
-}
\ No newline at end of file
+}
diff --git a/src/views/property-marketing/put-account/account-manage/components/account-table/style.scss b/src/views/property-marketing/put-account/account-manage/components/account-table/style.scss
index 3ddc4d9..36eb90f 100644
--- a/src/views/property-marketing/put-account/account-manage/components/account-table/style.scss
+++ b/src/views/property-marketing/put-account/account-manage/components/account-table/style.scss
@@ -6,7 +6,7 @@
     gap: 20px;
   .card-item {
     border-radius: 8px;
-    border: 1px solid var(--BG-300, #e6e6e8);
+    // border: 1px solid var(--BG-300, #e6e6e8);s
     background: var(--BG-white, #fff);
     padding: 12px 16px 16px;
     display: flex;
diff --git a/src/views/property-marketing/put-account/account-manage/components/filter-block/index.vue b/src/views/property-marketing/put-account/account-manage/components/filter-block/index.vue
index a052d91..c99249d 100644
--- a/src/views/property-marketing/put-account/account-manage/components/filter-block/index.vue
+++ b/src/views/property-marketing/put-account/account-manage/components/filter-block/index.vue
@@ -4,67 +4,72 @@
  * @Date: 2025-06-25 14:02:40
 -->
 <template>
-  <div class="container px-24px pt-12px pb-24px">
-    <div class="filter-row flex mb-20px">
-      <div class="filter-row-item flex items-center">
+  <div class="common-filter-wrap">
+    <div class="filter-row">
+      <div class="filter-row-item">
         <span class="label">账号名称/ID/手机号</span>
-        <a-space size="medium">
-          <a-input
-            v-model="query.search"
-            class="w-240px"
-            placeholder="请搜索..."
-            size="medium"
-            allow-clear
-            @change="handleSearch"
-          >
-            <template #prefix>
-              <icon-search />
-            </template>
-          </a-input>
-        </a-space>
+        <a-input
+          v-model="query.search"
+          class="w-240px"
+          placeholder="请搜索..."
+          size="medium"
+          allow-clear
+          @change="handleSearch"
+        >
+          <template #prefix>
+            <icon-search />
+          </template>
+        </a-input>
       </div>
-      <div class="filter-row-item flex items-center">
+      <div class="filter-row-item">
         <span class="label">状态</span>
-        <a-space class="w-180px">
-          <StatusSelect v-model="query.status" @change="handleSearch" />
-        </a-space>
+        <StatusSelect v-model="query.status" class="w-180px" @change="handleSearch" />
       </div>
-      <div class="filter-row-item flex items-center">
+      <div class="filter-row-item">
         <span class="label">平台</span>
-        <a-space class="w-160px">
-          <a-select v-model="query.platform" size="medium" placeholder="全部" allow-clear @change="handleSearch">
-            <a-option v-for="(item, index) in PLATFORM_LIST" :key="index" :value="item.value" :label="item.label">{{
-              item.label
-            }}</a-option>
-          </a-select>
-        </a-space>
+        <a-select
+          class="!w-160px"
+          v-model="query.platform"
+          size="medium"
+          placeholder="全部"
+          allow-clear
+          @change="handleSearch"
+        >
+          <a-option v-for="(item, index) in PLATFORM_LIST" :key="index" :value="item.value" :label="item.label">{{
+            item.label
+          }}</a-option>
+        </a-select>
       </div>
-      <div class="filter-row-item flex items-center">
+      <div class="filter-row-item">
         <span class="label">运营人员</span>
-        <a-space class="w-160px">
-          <CommonSelect v-model="query.operator_id" :multiple="false" :options="operators" @change="handleSearch" />
-        </a-space>
+        <CommonSelect
+          class="!w-160px"
+          v-model="query.operator_id"
+          :multiple="false"
+          :options="operators"
+          @change="handleSearch"
+        />
       </div>
     </div>
-    <div class="filter-row flex">
-      <div class="filter-row-item flex items-center">
+    <div class="filter-row">
+      <div class="filter-row-item">
         <span class="label">所属项目</span>
-        <a-space class="w-200px">
-          <CommonSelect v-model="query.project_ids" :options="projects" @change="handleSearch" />
-        </a-space>
+        <CommonSelect class="!w-200px" v-model="query.project_ids" :options="projects" @change="handleSearch" />
+      </div>
+      <div class="filter-row-item">
+        <a-button type="outline" class="mr-12px" size="medium" @click="handleSearch">
+          <template #icon>
+            <icon-search />
+          </template>
+          <template #default>搜索</template>
+        </a-button>
+        <a-button size="medium" @click="handleReset">
+          <template #icon>
+            <icon-refresh />
+          </template>
+          <template #default>重置</template>
+        </a-button>
       </div>
-      <a-button type="outline" class="mr-12px" size="medium" @click="handleSearch">
-        <template #icon>
-          <icon-search />
-        </template>
-        <template #default>搜索</template>
-      </a-button>
-      <a-button size="medium" @click="handleReset">
-        <template #icon>
-          <icon-refresh />
-        </template>
-        <template #default>重置</template>
-      </a-button>
     </div>
   </div>
 </template>
diff --git a/src/views/property-marketing/put-account/account-manage/index.vue b/src/views/property-marketing/put-account/account-manage/index.vue
index 16fc6ba..f6aa21a 100644
--- a/src/views/property-marketing/put-account/account-manage/index.vue
+++ b/src/views/property-marketing/put-account/account-manage/index.vue
@@ -4,7 +4,7 @@
 -->
 <template>
   <div class="account-manage-wrap">
-    <div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid">
+    <div class="filter-wrap bg-#fff rounded-8px ">
       <div class="top flex h-64px px-24px py-10px justify-between items-center">
         <p class="text-18px font-400 lh-26px color-#211F24 title">账户管理</p>
         <div class="flex items-center">
@@ -70,7 +70,7 @@
       />
       <NoData v-else />
 
-      <div v-if="pageInfo.total > 0" class="pagination-box">
+      <div v-if="pageInfo.total > 0" class="pagination-row">
         <a-pagination
           :total="pageInfo.total"
           size="mini"
diff --git a/src/views/property-marketing/put-account/account-manage/style.scss b/src/views/property-marketing/put-account/account-manage/style.scss
index 8245f2b..f11868d 100644
--- a/src/views/property-marketing/put-account/account-manage/style.scss
+++ b/src/views/property-marketing/put-account/account-manage/style.scss
@@ -51,12 +51,5 @@
   .card-wrap {
     display: flex;
     flex-direction: column;
-    .pagination-box {
-      display: flex;
-      width: 100%;
-      padding: 16px 24px;
-      justify-content: flex-end;
-      align-items: center;
-    }
   }
 }
diff --git a/src/views/property-marketing/put-account/investment-guidelines/detail.vue b/src/views/property-marketing/put-account/investment-guidelines/detail.vue
index df47f0d..0502e51 100644
--- a/src/views/property-marketing/put-account/investment-guidelines/detail.vue
+++ b/src/views/property-marketing/put-account/investment-guidelines/detail.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="guidelines-data-wrap">
-    <div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid">
+    <div class="filter-wrap bg-#fff rounded-8px ">
       <div class="top flex h-64px px-24px py-10px justify-between items-center">
         <p class="text-18px font-400 lh-26px color-#211F24 title">投放信息</p>
       </div>
diff --git a/src/views/property-marketing/put-account/investment-guidelines/style.scss b/src/views/property-marketing/put-account/investment-guidelines/style.scss
index 5d26e95..06776d7 100644
--- a/src/views/property-marketing/put-account/investment-guidelines/style.scss
+++ b/src/views/property-marketing/put-account/investment-guidelines/style.scss
@@ -6,7 +6,7 @@
   .pagination-box {
     display: flex;
     width: 100%;
-    padding: 16px 24px;
+      padding:  4px 24px 24px;
     justify-content: flex-end;
     align-items: center;
   }
@@ -32,7 +32,7 @@
 
   .filter-wrap {
     border-radius: 8px;
-    border: 1px solid #e6e6e8;
+    // border: 1px solid #e6e6e8;
 
     :deep(.arco-tabs) {
       .arco-tabs-tab {
@@ -75,7 +75,7 @@
     .pagination-box {
       display: flex;
       width: 100%;
-      padding: 16px 24px;
+      padding:  4px 24px 24px;
       justify-content: flex-end;
       align-items: center;
     }
@@ -84,7 +84,7 @@
   .pagination-box {
     display: flex;
     width: 100%;
-    padding: 16px 24px;
+      padding:  4px 24px 24px;
     justify-content: flex-end;
     align-items: center;
 
@@ -129,7 +129,7 @@
     background: var(--BG-white, white);
     overflow: hidden;
     border-radius: 8px;
-    outline: 1px var(--BG-300, #E6E6E8) solid;
+    // outline: 1px var(--BG-300, #E6E6E8) solid;
     outline-offset: -1px;
     flex-direction: column;
     justify-content: flex-start;
diff --git a/src/views/writer-material-center/components/finished-products/constants.ts b/src/views/writer-material-center/components/finished-products/constants.ts
new file mode 100644
index 0000000..c874ffd
--- /dev/null
+++ b/src/views/writer-material-center/components/finished-products/constants.ts
@@ -0,0 +1,26 @@
+export enum AuditStatus {
+  All = '0',
+  Pending = '1',
+  Auditing = '2',
+  Passed = '3',
+}
+
+export const TABS_LIST = [
+  {
+    label: '全部',
+    value: AuditStatus.All,
+  },
+  {
+    label: '待审核',
+    value: AuditStatus.Pending,
+  },
+  {
+    label: '审核中',
+    value: AuditStatus.Auditing,
+  },
+  {
+    label: '已通过',
+    value: AuditStatus.Passed,
+  },
+];
+
diff --git a/src/views/writer-material-center/components/finished-products/index.vue b/src/views/writer-material-center/components/finished-products/index.vue
new file mode 100644
index 0000000..abaafca
--- /dev/null
+++ b/src/views/writer-material-center/components/finished-products/index.vue
@@ -0,0 +1,65 @@
+<script lang="tsx">
+import { Tabs, TabPane } from 'ant-design-vue';
+import ManuscriptList from './manuscript/list/index.vue';
+import ManuscriptCheckList from './manuscript/check-list/index.vue';
+import UploadManuscriptModal from '@/views/writer-material-center/components/finished-products/manuscript/components/upload-manuscript-modal/index.vue';
+
+import { TABS_LIST, AuditStatus } from './constants';
+
+export default defineComponent({
+  setup(_, { attrs, slots, expose }) {
+    const uploadManuscriptModalRef = ref(null);
+
+    const audit_status = ref(AuditStatus.All);
+
+    const showManuscriptList = computed(() => {
+      return audit_status.value === AuditStatus.All;
+    });
+
+    const openUploadModal = () => {
+      uploadManuscriptModalRef.value?.open();
+    };
+
+    return () => (
+      <div class="finished-products-wrap h-full flex flex-col">
+        <div class="bg-white rounded-t-8px">
+          <Tabs
+            v-model:activeKey={audit_status.value}
+            v-slots={{
+              rightExtra: () => (
+                <div class="flex items-center">
+                  {showManuscriptList.value && (
+                    <a-button
+                      type="primary"
+                      size="medium"
+                      class="ml-12px"
+                      onClick={openUploadModal}
+                      v-slots={{
+                        icon: () => <icon-plus size="16" />,
+                        default: () => '上传内容稿件',
+                      }}
+                    />
+                  )}
+                </div>
+              ),
+            }}
+          >
+            {TABS_LIST.map((item) => (
+              <TabPane key={item.value} tab={item.label}>
+                {item.label}
+              </TabPane>
+            ))}
+          </Tabs>
+        </div>
+        {showManuscriptList.value ? <ManuscriptList /> : <ManuscriptCheckList audit_status={audit_status.value} />}
+
+        <UploadManuscriptModal ref={uploadManuscriptModalRef} />
+      </div>
+    );
+  },
+});
+</script>
+
+<style scoped lang="scss">
+@import './style.scss';
+</style>
diff --git a/src/views/creative-generation-workshop/manuscript/check-list/components/filter-block/index.vue b/src/views/writer-material-center/components/finished-products/manuscript/check-list/components/filter-block/index.vue
similarity index 94%
rename from src/views/creative-generation-workshop/manuscript/check-list/components/filter-block/index.vue
rename to src/views/writer-material-center/components/finished-products/manuscript/check-list/components/filter-block/index.vue
index 2cfc05a..8442599 100644
--- a/src/views/creative-generation-workshop/manuscript/check-list/components/filter-block/index.vue
+++ b/src/views/writer-material-center/components/finished-products/manuscript/check-list/components/filter-block/index.vue
@@ -100,7 +100,8 @@
 
 <script setup>
 import { defineEmits, defineProps } from 'vue';
-import { PLATFORMS, AuditStatus } from '@/views/creative-generation-workshop/manuscript/check-list/constants';
+import { PLATFORMS } from '@/views/writer-material-center/components/finished-products/manuscript/check-list/constants';
+import { AuditStatus } from '@/views/writer-material-center/components/finished-products/constants';
 
 const props = defineProps({
   query: {
diff --git a/src/views/creative-generation-workshop/manuscript-writer/check-list/components/manuscript-check-table/delete-manuscript-modal.vue b/src/views/writer-material-center/components/finished-products/manuscript/check-list/components/manuscript-check-table/delete-manuscript-modal.vue
similarity index 100%
rename from src/views/creative-generation-workshop/manuscript-writer/check-list/components/manuscript-check-table/delete-manuscript-modal.vue
rename to src/views/writer-material-center/components/finished-products/manuscript/check-list/components/manuscript-check-table/delete-manuscript-modal.vue
diff --git a/src/views/creative-generation-workshop/manuscript-writer/check-list/components/manuscript-check-table/index.vue b/src/views/writer-material-center/components/finished-products/manuscript/check-list/components/manuscript-check-table/index.vue
similarity index 87%
rename from src/views/creative-generation-workshop/manuscript-writer/check-list/components/manuscript-check-table/index.vue
rename to src/views/writer-material-center/components/finished-products/manuscript/check-list/components/manuscript-check-table/index.vue
index a2be8ca..6a1eb0b 100644
--- a/src/views/creative-generation-workshop/manuscript-writer/check-list/components/manuscript-check-table/index.vue
+++ b/src/views/writer-material-center/components/finished-products/manuscript/check-list/components/manuscript-check-table/index.vue
@@ -51,7 +51,13 @@
         </template>
         <template v-else-if="column.dataIndex === 'platform'" #cell="{ record }">
           <template v-if="!PLATFORMS.find((item) => item.value === record.platform)"> - </template>
-          <img v-else width="24" height="24" class="rounded-4px" :src="PLATFORMS.find((item) => item.value === record.platform)?.icon" />
+          <img
+            v-else
+            width="24"
+            height="24"
+            class="rounded-4px"
+            :src="PLATFORMS.find((item) => item.value === record.platform)?.icon"
+          />
         </template>
         <template v-else-if="column.dataIndex === 'compliance_level'" #cell="{ record }">
           <span class="cts num !color-#6D4CFE">{{
@@ -118,13 +124,14 @@
 <script setup>
 import { ref } from 'vue';
 import { formatTableField, exactFormatTime } from '@/utils/tools';
-import { EnumManuscriptType } from '@/views/creative-generation-workshop/manuscript-writer/list/constants';
+import { EnumManuscriptType } from '@/views/writer-material-center/components/finished-products/manuscript/list/constants';
 import { patchWorkAuditsAuditWriter } from '@/api/all/generationWorkshop-writer.ts';
 import {
-  AuditStatus,
   CUSTOMER_OPINION,
   PLATFORMS,
-} from '@/views/creative-generation-workshop/manuscript-writer/check-list/constants';
+} from '@/views/writer-material-center/components/finished-products/manuscript/check-list/constants';
+import { AuditStatus } from '@/views/writer-material-center/components/finished-products/constants';
+
 import { slsWithCatch } from '@/utils/stroage.ts';
 
 import TextOverTips from '@/components/text-over-tips';
@@ -135,7 +142,7 @@ import icon2 from '@/assets/img/creative-generation-workshop/icon-photo.png';
 import icon3 from '@/assets/img/creative-generation-workshop/icon-video.png';
 import icon4 from '@/assets/img/error-img.png';
 
-const emits = defineEmits(['edit', 'sorterChange', 'delete', 'select', 'selectAll']);
+const emits = defineEmits(['sorterChange', 'delete', 'select', 'selectAll']);
 const router = useRouter();
 
 const props = defineProps({
@@ -174,15 +181,15 @@ const onDelete = (item) => {
 const onCheck = (item) => {
   patchWorkAuditsAuditWriter(item.id, writerCode.value);
   slsWithCatch('writerManuscriptCheckIds', [item.id]);
-  router.push({ path: `/writer/manuscript/check/${writerCode.value}` });
+  router.push({ name: 'WriterManuscriptCheck', params: { writerCode: writerCode.value } });
 };
 const onScan = (item) => {
   slsWithCatch('writerManuscriptCheckIds', [item.id]);
-  router.push({ path: `/writer/manuscript/check/${writerCode.value}` });
+  router.push({ name: 'WriterManuscriptCheck', params: { writerCode: writerCode.value } });
 };
 const onDetail = (item) => {
   router.push(
-    `/writer/manuscript/check-list/detail/${item.id}/${writerCode.value}?source=check&audit_status=${props.audit_status}`,
+    `/writer/material-center/check-list/detail/${item.id}/${writerCode.value}?source=check&audit_status=${props.audit_status}`,
   );
 };
 const getCustomerOpinionInfo = (value) => {
diff --git a/src/views/creative-generation-workshop/manuscript/check-list/components/manuscript-check-table/style.scss b/src/views/writer-material-center/components/finished-products/manuscript/check-list/components/manuscript-check-table/style.scss
similarity index 100%
rename from src/views/creative-generation-workshop/manuscript/check-list/components/manuscript-check-table/style.scss
rename to src/views/writer-material-center/components/finished-products/manuscript/check-list/components/manuscript-check-table/style.scss
diff --git a/src/views/creative-generation-workshop/manuscript-writer/check-list/constants.ts b/src/views/writer-material-center/components/finished-products/manuscript/check-list/constants.ts
similarity index 97%
rename from src/views/creative-generation-workshop/manuscript-writer/check-list/constants.ts
rename to src/views/writer-material-center/components/finished-products/manuscript/check-list/constants.ts
index 76b6b00..30bd2a1 100644
--- a/src/views/creative-generation-workshop/manuscript-writer/check-list/constants.ts
+++ b/src/views/writer-material-center/components/finished-products/manuscript/check-list/constants.ts
@@ -1,3 +1,5 @@
+import { AuditStatus } from '@/views/writer-material-center/components/finished-products/constants';
+
 export const TABLE_COLUMNS1 = [
   {
     title: '序号',
@@ -183,11 +185,6 @@ export const TABLE_COLUMNS3 = [
     fixed: 'right',
   },
 ];
-export enum AuditStatus {
-  Pending = '1',
-  Auditing = '2',
-  Passed = '3',
-}
 
 export const AUDIT_STATUS_LIST = [
   {
diff --git a/src/views/creative-generation-workshop/manuscript-writer/check-list/index.vue b/src/views/writer-material-center/components/finished-products/manuscript/check-list/index.vue
similarity index 79%
rename from src/views/creative-generation-workshop/manuscript-writer/check-list/index.vue
rename to src/views/writer-material-center/components/finished-products/manuscript/check-list/index.vue
index 9bfcf69..5b30ad5 100644
--- a/src/views/creative-generation-workshop/manuscript-writer/check-list/index.vue
+++ b/src/views/writer-material-center/components/finished-products/manuscript/check-list/index.vue
@@ -1,12 +1,6 @@
 <template>
   <div class="manuscript-check-wrap">
-    <div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid mb-16px">
-      <a-tabs v-model="query.audit_status" @tab-click="handleTabClick">
-        <a-tab-pane :title="item.label" v-for="item in AUDIT_STATUS_LIST" :key="item.value"></a-tab-pane>
-        <!-- <template #extra>
-          <a-button type="outline" size="medium" @click="handleShareModal">分享内容稿件</a-button>
-        </template> -->
-      </a-tabs>
+    <div class="filter-wrap bg-#fff rounded-b-8px mb-16px">
       <FilterBlock
         v-model:query="query"
         :audit_status="query.audit_status"
@@ -14,9 +8,7 @@
         @reset="handleReset"
       />
     </div>
-    <div
-      class="table-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px py-24px flex flex-col"
-    >
+    <div class="table-wrap bg-#fff rounded-8px px-24px py-24px flex flex-col">
       <div
         class="flex justify-end mb-12px"
         v-if="[AuditStatus.Pending, AuditStatus.Auditing].includes(query.audit_status)"
@@ -48,11 +40,10 @@
         :audit_status="query.audit_status"
         @sorterChange="handleSorterChange"
         @delete="handleDelete"
-        @edit="handleEdit"
         @select="handleSelect"
         @selectAll="handleSelectAll"
       />
-      <div v-if="pageInfo.total > 0" class="pagination-box">
+      <div v-if="pageInfo.total > 0" class="pagination-row">
         <a-pagination
           :total="pageInfo.total"
           size="mini"
@@ -71,7 +62,7 @@
   </div>
 </template>
 <script lang="jsx" setup>
-import { defineComponent } from 'vue';
+import { provide } from 'vue';
 import { Button, Message as AMessage } from '@arco-design/web-vue';
 import FilterBlock from './components/filter-block';
 import ManuscriptCheckTable from './components/manuscript-check-table';
@@ -81,12 +72,15 @@ import { getWorkAuditsPageWriter, patchWorkAuditsBatchAuditWriter } from '@/api/
 import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
 import { slsWithCatch } from '@/utils/stroage.ts';
 // import { getProjects } from '@/api/all/propertyMarketing';
-import {
-  AuditStatus,
-  INITIAL_QUERY,
-  AUDIT_STATUS_LIST,
-  TABLE_COLUMNS1,
-} from '@/views/creative-generation-workshop/manuscript-writer/check-list/constants';
+import { AuditStatus } from '@/views/writer-material-center/components/finished-products/constants';
+import { INITIAL_QUERY, AUDIT_STATUS_LIST, TABLE_COLUMNS1 } from './constants';
+
+const props = defineProps({
+  audit_status: {
+    type: String,
+    default: AuditStatus.All,
+  },
+});
 
 const {
   dataSource,
@@ -159,7 +153,7 @@ const handleBatchCheck = () => {
   patchWorkAuditsBatchAuditWriter(writerCode.value, { ids: selectedRowKeys.value });
 
   slsWithCatch('writerManuscriptCheckIds', selectedRowKeys.value);
-  router.push({ path: `/writer/manuscript/check/${writerCode.value}` });
+  router.push({ name: 'WriterManuscriptCheck', params: { writerCode: writerCode.value } });
 };
 const handleBatchView = () => {
   if (!selectedRows.value.length) {
@@ -168,7 +162,7 @@ const handleBatchView = () => {
   }
 
   slsWithCatch('writerManuscriptCheckIds', selectedRowKeys.value);
-  router.push({ path: `/writer/manuscript/check/${writerCode.value}` });
+  router.push({ name: 'WriterManuscriptCheck', params: { writerCode: writerCode.value } });
 };
 
 const handleTabClick = (key) => {
@@ -182,22 +176,18 @@ const handleTabClick = (key) => {
   getData();
 };
 
-// const handleShareModal = () => {
-//   shareManuscriptModalRef.value.open();
-// };
-
 const handleDelete = (item) => {
   const { id, title } = item;
   deleteManuscriptModalRef.value?.open({ id, name: `“${title}”` });
 };
-const handleEdit = (item) => {
-  // addManuscriptModalRef.value?.open(item.id);
-};
 
-onMounted(() => {
-  tableColumns.value = TABLE_COLUMNS1;
-  getData();
-});
+watch(
+  () => props.audit_status,
+  (newVal) => {
+    handleTabClick(newVal);
+  },
+  { immediate: true, deep: true },
+);
 provide('update', getData);
 </script>
 
diff --git a/src/views/creative-generation-workshop/manuscript/check-list/style.scss b/src/views/writer-material-center/components/finished-products/manuscript/check-list/style.scss
similarity index 79%
rename from src/views/creative-generation-workshop/manuscript/check-list/style.scss
rename to src/views/writer-material-center/components/finished-products/manuscript/check-list/style.scss
index 026b0ab..a3a41fc 100644
--- a/src/views/creative-generation-workshop/manuscript/check-list/style.scss
+++ b/src/views/writer-material-center/components/finished-products/manuscript/check-list/style.scss
@@ -31,12 +31,5 @@
   .table-wrap {
     display: flex;
     flex-direction: column;
-    .pagination-box {
-      display: flex;
-      width: 100%;
-      padding: 16px 24px 0;
-      justify-content: flex-end;
-      align-items: center;
-    }
   }
 }
diff --git a/src/views/creative-generation-workshop/manuscript-writer/check/cancel-check-modal.vue b/src/views/writer-material-center/components/finished-products/manuscript/check/cancel-check-modal.vue
similarity index 91%
rename from src/views/creative-generation-workshop/manuscript-writer/check/cancel-check-modal.vue
rename to src/views/writer-material-center/components/finished-products/manuscript/check/cancel-check-modal.vue
index a54389f..0dc2606 100644
--- a/src/views/creative-generation-workshop/manuscript-writer/check/cancel-check-modal.vue
+++ b/src/views/writer-material-center/components/finished-products/manuscript/check/cancel-check-modal.vue
@@ -41,7 +41,12 @@ const onClose = () => {
 };
 const onConfirm = () => {
   if (action.value === 'exit') {
-    router.push({ path: `/writer/manuscript/check-list/${route.params.writerCode}` });
+    router.push({
+      name: 'WriterMaterialCenterFinishedProducts',
+      params: {
+        writerCode: route.params.writerCode,
+      },
+    });
   } else {
     emit('selectCard', cardInfo.value);
   }
diff --git a/src/views/creative-generation-workshop/manuscript-writer/check/check-success-modal.vue b/src/views/writer-material-center/components/finished-products/manuscript/check/check-success-modal.vue
similarity index 93%
rename from src/views/creative-generation-workshop/manuscript-writer/check/check-success-modal.vue
rename to src/views/writer-material-center/components/finished-products/manuscript/check/check-success-modal.vue
index e2a4fef..d7e437b 100644
--- a/src/views/creative-generation-workshop/manuscript-writer/check/check-success-modal.vue
+++ b/src/views/writer-material-center/components/finished-products/manuscript/check/check-success-modal.vue
@@ -35,7 +35,12 @@ const onClose = () => {
     autoCloseTimer = null;
   }
   if (workIds.value.length === 1) {
-    router.push({ path: `/writer/manuscript/check-list/${route.params.writerCode}` });
+    router.push({
+      name: 'WriterMaterialCenterFinishedProducts',
+      params: {
+        writerCode: route.params.writerCode,
+      },
+    });
   }
   workIds.value = [];
   visible.value = false;
diff --git a/src/views/creative-generation-workshop/manuscript-writer/check/components/check-list-drawer/index.vue b/src/views/writer-material-center/components/finished-products/manuscript/check/components/check-list-drawer/index.vue
similarity index 100%
rename from src/views/creative-generation-workshop/manuscript-writer/check/components/check-list-drawer/index.vue
rename to src/views/writer-material-center/components/finished-products/manuscript/check/components/check-list-drawer/index.vue
diff --git a/src/views/creative-generation-workshop/manuscript/check/components/check-list-drawer/style.scss b/src/views/writer-material-center/components/finished-products/manuscript/check/components/check-list-drawer/style.scss
similarity index 100%
rename from src/views/creative-generation-workshop/manuscript/check/components/check-list-drawer/style.scss
rename to src/views/writer-material-center/components/finished-products/manuscript/check/components/check-list-drawer/style.scss
diff --git a/src/views/creative-generation-workshop/manuscript/check/components/content-card/constants.ts b/src/views/writer-material-center/components/finished-products/manuscript/check/components/content-card/constants.ts
similarity index 100%
rename from src/views/creative-generation-workshop/manuscript/check/components/content-card/constants.ts
rename to src/views/writer-material-center/components/finished-products/manuscript/check/components/content-card/constants.ts
diff --git a/src/views/creative-generation-workshop/manuscript-writer/check/components/content-card/highlight-textarea.vue b/src/views/writer-material-center/components/finished-products/manuscript/check/components/content-card/highlight-textarea.vue
similarity index 100%
rename from src/views/creative-generation-workshop/manuscript-writer/check/components/content-card/highlight-textarea.vue
rename to src/views/writer-material-center/components/finished-products/manuscript/check/components/content-card/highlight-textarea.vue
diff --git a/src/views/creative-generation-workshop/manuscript-writer/check/components/content-card/index.vue b/src/views/writer-material-center/components/finished-products/manuscript/check/components/content-card/index.vue
similarity index 99%
rename from src/views/creative-generation-workshop/manuscript-writer/check/components/content-card/index.vue
rename to src/views/writer-material-center/components/finished-products/manuscript/check/components/content-card/index.vue
index ec85c4a..b1ccdbf 100644
--- a/src/views/creative-generation-workshop/manuscript-writer/check/components/content-card/index.vue
+++ b/src/views/writer-material-center/components/finished-products/manuscript/check/components/content-card/index.vue
@@ -22,7 +22,7 @@ import 'swiper/css/navigation';
 import { Navigation } from 'swiper/modules';
 import { FORM_RULES, enumTab, TAB_LIST, RESULT_LIST, LEVEL_MAP, escapeRegExp } from './constants';
 import { getImagePreSignedUrl } from '@/api/all/common';
-import { EnumManuscriptType } from '@/views/creative-generation-workshop/manuscript-writer/list/constants';
+import { EnumManuscriptType } from '@/views/writer-material-center/components/finished-products/manuscript/list/constants';
 
 import icon1 from '@/assets/img/creative-generation-workshop/icon-magic.png';
 import icon2 from '@/assets/img/creative-generation-workshop/icon-line.png';
@@ -411,7 +411,7 @@ export default {
               loading={true}
               tip={`${isTextTab.value ? '文本' : '图片'}检测中`}
               size={72}
-              class="h-298px !flex flex-col justify-center items-center"
+              class="h-298px !flex flex-col justify-center items-center color-#6d4cfe"
             />
           </div>
         );
diff --git a/src/views/creative-generation-workshop/manuscript-writer/check/components/content-card/style.scss b/src/views/writer-material-center/components/finished-products/manuscript/check/components/content-card/style.scss
similarity index 95%
rename from src/views/creative-generation-workshop/manuscript-writer/check/components/content-card/style.scss
rename to src/views/writer-material-center/components/finished-products/manuscript/check/components/content-card/style.scss
index 1cbfb8b..ab5f489 100644
--- a/src/views/creative-generation-workshop/manuscript-writer/check/components/content-card/style.scss
+++ b/src/views/writer-material-center/components/finished-products/manuscript/check/components/content-card/style.scss
@@ -135,9 +135,11 @@
     }
   }
   .right-box {
-    border: 1px solid #E6E6E8;
+    border: 1px solid #e6e6e8;
     flex: 1;
-    border-radius: 8px; padding: 16px; display: flex;
+    border-radius: 8px;
+    padding: 16px;
+    display: flex;
     flex-direction: column;
     overflow-y: auto;
     height: fit-content;
@@ -185,6 +187,12 @@
       font-weight: 400;
       line-height: 22px;
     }
+    :deep(.arco-spin) {
+      .arco-spin-icon,
+      .arco-spin-tip {
+        color: #6d4cfe;
+      }
+    }
     .forbid-word-box {
       :deep(.overflow-text) {
         &.level0 {
diff --git a/src/views/creative-generation-workshop/manuscript-writer/check/components/header-card/index.vue b/src/views/writer-material-center/components/finished-products/manuscript/check/components/header-card/index.vue
similarity index 97%
rename from src/views/creative-generation-workshop/manuscript-writer/check/components/header-card/index.vue
rename to src/views/writer-material-center/components/finished-products/manuscript/check/components/header-card/index.vue
index a360bb9..0abf2f7 100644
--- a/src/views/creative-generation-workshop/manuscript-writer/check/components/header-card/index.vue
+++ b/src/views/writer-material-center/components/finished-products/manuscript/check/components/header-card/index.vue
@@ -6,7 +6,7 @@ import TextOverTips from '@/components/text-over-tips';
 import 'swiper/css';
 import 'swiper/css/navigation';
 import { Navigation } from 'swiper/modules';
-import { PLATFORMS } from '@/views/creative-generation-workshop/manuscript-writer/check-list/constants';
+import { PLATFORMS } from '@/views/writer-material-center/components/finished-products/manuscript/check-list/constants';
 
 import icon1 from '@/assets/img/error-img.png';
 import icon2 from '@/assets/img/creative-generation-workshop/icon-lf.png';
diff --git a/src/views/creative-generation-workshop/manuscript/check/components/header-card/style.scss b/src/views/writer-material-center/components/finished-products/manuscript/check/components/header-card/style.scss
similarity index 100%
rename from src/views/creative-generation-workshop/manuscript/check/components/header-card/style.scss
rename to src/views/writer-material-center/components/finished-products/manuscript/check/components/header-card/style.scss
diff --git a/src/views/creative-generation-workshop/manuscript-writer/check/index.vue b/src/views/writer-material-center/components/finished-products/manuscript/check/index.vue
similarity index 93%
rename from src/views/creative-generation-workshop/manuscript-writer/check/index.vue
rename to src/views/writer-material-center/components/finished-products/manuscript/check/index.vue
index 7c5121e..198ad99 100644
--- a/src/views/creative-generation-workshop/manuscript-writer/check/index.vue
+++ b/src/views/writer-material-center/components/finished-products/manuscript/check/index.vue
@@ -8,6 +8,7 @@ import CheckListDrawer from './components/check-list-drawer';
 
 import { slsWithCatch, rlsWithCatch, glsWithCatch } from '@/utils/stroage.ts';
 import useGetAiReviewResult from '@/hooks/useGetAiReviewResult.ts';
+import { useSidebarStore } from '@/stores/modules/side-bar';
 import {
   getWorkAuditsBatchDetailWriter,
   putWorkAuditsUpdateWriter,
@@ -20,6 +21,7 @@ export default {
   setup(props, { emit, expose }) {
     const router = useRouter();
     const route = useRoute();
+    const sidebarStore = useSidebarStore();
 
     const workIds = ref([]);
     const isSaved = ref(false);
@@ -36,6 +38,9 @@ export default {
     const selectedImageInfo = ref(null);
 
     const writerCode = computed(() => route.params.writerCode);
+    const collapsed = computed(() => {
+      return sidebarStore.menuCollapse;
+    });
 
     const { handleStartCheck, handleAgainCheck, ticket, checkLoading, resetAiReviewInfo } = useGetAiReviewResult({
       cardInfo: selectCardInfo,
@@ -47,7 +52,12 @@ export default {
     });
 
     const onBack = () => {
-      router.push({ path: `/writer/manuscript/check-list/${writerCode.value}` });
+      router.push({
+        name: 'WriterMaterialCenterFinishedProducts',
+        params: {
+          writerCode: route.params.writerCode,
+        },
+      });
     };
 
     const onChangeCard = (item) => {
@@ -199,7 +209,7 @@ export default {
         <div class="manuscript-check-wrap flex flex-col">
           <div class="flex items-center mb-10px">
             <span class="cts color-#4E5969 cursor-pointer" onClick={onExit}>
-              内容稿件审核
+              成品库
             </span>
             <icon-oblique-line size="12" class="color-#C9CDD4 mx-4px" />
             <span class="cts bold !color-#1D2129">{`${workIds.value.length > 0 ? '批量' : ''}审核内容稿件`}</span>
@@ -214,7 +224,7 @@ export default {
             </div>
           )}
 
-          <div class="flex-1 flex flex-col overflow-hidden bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid">
+          <div class="flex-1 flex flex-col overflow-hidden bg-#fff rounded-8px ">
             <HeaderCard
               dataSource={dataSource.value}
               selectCardInfo={selectCardInfo.value}
@@ -237,7 +247,11 @@ export default {
             </section>
           </div>
         </div>
-        <footer class="flex justify-end items-center px-16px py-20px w-full bg-#fff footer-row">
+        <footer
+          class={`flex justify-end items-center px-16px py-16px w-full bg-#F6F5FC footer-row ${
+            collapsed.value ? 'collapsed' : ''
+          }`}
+        >
           {renderFooterRow()}
         </footer>
 
diff --git a/src/views/creative-generation-workshop/manuscript-writer/check/style.scss b/src/views/writer-material-center/components/finished-products/manuscript/check/style.scss
similarity index 83%
rename from src/views/creative-generation-workshop/manuscript-writer/check/style.scss
rename to src/views/writer-material-center/components/finished-products/manuscript/check/style.scss
index 8bebfe0..9bd24ba 100644
--- a/src/views/creative-generation-workshop/manuscript-writer/check/style.scss
+++ b/src/views/writer-material-center/components/finished-products/manuscript/check/style.scss
@@ -1,7 +1,7 @@
 $footer-height: 68px;
 .manuscript-check-wrap {
   width: 100%;
-  height: calc(100% - 72px);
+  height: calc(100% - ($footer-height - $layout-padding-bottom));
   .cts {
     color: #939499;
     font-family: $font-family-regular;
@@ -40,6 +40,9 @@ $footer-height: 68px;
   bottom: 0;
   left: $sidebar-width;
   width: calc(100% - $sidebar-width);
-  border-top: 1px solid #e6e6e8;
   height: $footer-height;
+  &.collapsed {
+    left: $sidebar-width-collapse;
+    width: calc(100% - $sidebar-width-collapse);
+  }
 }
diff --git a/src/views/creative-generation-workshop/manuscript/components/edit-form/img-box.vue b/src/views/writer-material-center/components/finished-products/manuscript/components/edit-form/img-box.vue
similarity index 100%
rename from src/views/creative-generation-workshop/manuscript/components/edit-form/img-box.vue
rename to src/views/writer-material-center/components/finished-products/manuscript/components/edit-form/img-box.vue
diff --git a/src/views/creative-generation-workshop/manuscript-writer/components/edit-form/index.vue b/src/views/writer-material-center/components/finished-products/manuscript/components/edit-form/index.vue
similarity index 98%
rename from src/views/creative-generation-workshop/manuscript-writer/components/edit-form/index.vue
rename to src/views/writer-material-center/components/finished-products/manuscript/components/edit-form/index.vue
index 0319044..f346adc 100644
--- a/src/views/creative-generation-workshop/manuscript-writer/components/edit-form/index.vue
+++ b/src/views/writer-material-center/components/finished-products/manuscript/components/edit-form/index.vue
@@ -7,7 +7,7 @@ import TextOverTips from '@/components/text-over-tips';
 import ImgBox from './img-box';
 
 import { formatFileSize, getVideoInfo, formatDuration, formatUploadSpeed } from '@/utils/tools';
-import { EnumManuscriptType } from '@/views/creative-generation-workshop/manuscript-writer/list/constants.ts';
+import { EnumManuscriptType } from '@/views/writer-material-center/components/finished-products/manuscript/list/constants.ts';
 import { getVideoPreSignedUrlWriter, getImagePreSignedUrlWriter } from '@/api/all/generationWorkshop-writer';
 
 // import icon1 from '@/assets/img/creative-generation-workshop/icon-close.png';
diff --git a/src/views/creative-generation-workshop/manuscript-writer/components/edit-form/style.scss b/src/views/writer-material-center/components/finished-products/manuscript/components/edit-form/style.scss
similarity index 100%
rename from src/views/creative-generation-workshop/manuscript-writer/components/edit-form/style.scss
rename to src/views/writer-material-center/components/finished-products/manuscript/components/edit-form/style.scss
diff --git a/src/views/creative-generation-workshop/manuscript-writer/list/components/upload-manuscript-modal/index.vue b/src/views/writer-material-center/components/finished-products/manuscript/components/upload-manuscript-modal/index.vue
similarity index 98%
rename from src/views/creative-generation-workshop/manuscript-writer/list/components/upload-manuscript-modal/index.vue
rename to src/views/writer-material-center/components/finished-products/manuscript/components/upload-manuscript-modal/index.vue
index 676ee58..cb001ba 100644
--- a/src/views/creative-generation-workshop/manuscript-writer/list/components/upload-manuscript-modal/index.vue
+++ b/src/views/writer-material-center/components/finished-products/manuscript/components/upload-manuscript-modal/index.vue
@@ -165,7 +165,12 @@ export default {
     // 跳转编辑
     const goUpload = () => {
       slsWithCatch('writerWaitUploadWorks', JSON.stringify(works.value));
-      router.push(`/writer/manuscript/upload/${writerCode.value}`);
+      router.push({
+        name: 'WriterManuscriptUpload',
+        params: {
+          writerCode: writerCode.value,
+        },
+      });
       onClose();
     };
 
diff --git a/src/views/creative-generation-workshop/manuscript/list/components/upload-manuscript-modal/style.scss b/src/views/writer-material-center/components/finished-products/manuscript/components/upload-manuscript-modal/style.scss
similarity index 100%
rename from src/views/creative-generation-workshop/manuscript/list/components/upload-manuscript-modal/style.scss
rename to src/views/writer-material-center/components/finished-products/manuscript/components/upload-manuscript-modal/style.scss
diff --git a/src/views/creative-generation-workshop/manuscript-writer/detail/index.vue b/src/views/writer-material-center/components/finished-products/manuscript/detail/index.vue
similarity index 77%
rename from src/views/creative-generation-workshop/manuscript-writer/detail/index.vue
rename to src/views/writer-material-center/components/finished-products/manuscript/detail/index.vue
index 3252379..ed7dc94 100644
--- a/src/views/creative-generation-workshop/manuscript-writer/detail/index.vue
+++ b/src/views/writer-material-center/components/finished-products/manuscript/detail/index.vue
@@ -2,22 +2,24 @@
 import { Button, Message as AMessage, Spin } from '@arco-design/web-vue';
 
 import { useRouter, useRoute } from 'vue-router';
-import { AuditStatus } from '@/views/creative-generation-workshop/manuscript-writer/check-list/constants';
+import { AuditStatus } from '@/views/writer-material-center/components/finished-products/constants';
 import { getWorksDetailWriter } from '@/api/all/generationWorkshop-writer.ts';
-import { EnumManuscriptType } from '@/views/creative-generation-workshop/manuscript-writer/list/constants.ts';
+import { EnumManuscriptType } from '@/views/writer-material-center/components/finished-products/manuscript/list/constants.ts';
 import { convertVideoUrlToCoverUrl, exactFormatTime } from '@/utils/tools.ts';
 import { slsWithCatch } from '@/utils/stroage.ts';
+import { useSidebarStore } from '@/stores/modules/side-bar';
 
 const DEFAULT_SOURCE_INFO = {
-  title: '内容稿件列表',
-  routePath: '/writer/manuscript/list',
+  title: '成品库',
+  routeName: 'WriterMaterialCenterFinishedProducts',
 };
-const SOURCE_MAP = new Map([['check', { title: '内容稿件审核', routePath: '/writer/manuscript/check-list' }]]);
+const SOURCE_MAP = new Map([['check', { title: '成品库', routeName: 'WriterMaterialCenterFinishedProducts' }]]);
 
 export default {
   setup(props, { emit, expose }) {
     const router = useRouter();
     const route = useRoute();
+    const sidebarStore = useSidebarStore();
     const workId = ref(route.params.id);
     const { source, audit_status } = route.query;
 
@@ -32,11 +34,20 @@ export default {
     const loading = ref(false);
 
     const isVideo = computed(() => dataSource.value.type === EnumManuscriptType.Video);
+    const showImages = computed(() => !isVideo.value && images.value.length);
     const sourceInfo = computed(() => SOURCE_MAP.get(source) ?? DEFAULT_SOURCE_INFO);
     const writerCode = computed(() => route.params.writerCode);
+    const collapsed = computed(() => {
+      return sidebarStore.menuCollapse;
+    });
 
     const onBack = () => {
-      router.push({ path: `${sourceInfo.value.routePath}/${writerCode.value}` });
+      router.push({
+        name: sourceInfo.value.routeName,
+        params: {
+          writerCode: writerCode.value,
+        },
+      });
     };
 
     const initData = () => {
@@ -109,7 +120,12 @@ export default {
     const renderFooterRow = () => {
       const _fn = () => {
         slsWithCatch('writerManuscriptCheckIds', [workId.value]);
-        router.push({ path: `/writer/manuscript/check/${writerCode.value}` });
+        router.push({
+          name: 'WriterManuscriptCheck',
+          params: {
+            writerCode: writerCode.value,
+          },
+        });
       };
 
       return (
@@ -121,7 +137,15 @@ export default {
             size="medium"
             type="outline"
             class="mr-12px"
-            onClick={() => router.push(`/writer/manuscript/edit/${writerCode.value}/${workId.value}`)}
+            onClick={() => {
+              router.push({
+                name: 'WriterManuscriptEdit',
+                params: {
+                  writerCode: writerCode.value,
+                  id: workId.value,
+                },
+              });
+            }}
           >
             编辑
           </Button>
@@ -154,7 +178,7 @@ export default {
             <icon-oblique-line size="12" class="color-#C9CDD4 mx-4px" />
             <span class="cts bold !color-#1D2129">内容稿件详情</span>
           </div>
-          <div class="flex-1 bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid py-32px">
+          <div class="flex-1 bg-#fff rounded-8px content">
             <div class="w-684px mx-auto flex flex-col items-center">
               <div class="flex justify-start flex-col w-full">
                 <p class="mb-8px cts bold !text-28px !lh-40px !color-#211F24">{dataSource.value.title}</p>
@@ -169,7 +193,7 @@ export default {
               </div>
 
               {/* 仅图片类型显示图片列表 */}
-              {!isVideo.value && (
+              {showImages.value ? (
                 <div class="desc-img-wrap mt-40px">
                   {images.value.map((item, index) => (
                     <div class="desc-img-box" key={index}>
@@ -177,11 +201,17 @@ export default {
                     </div>
                   ))}
                 </div>
-              )}
+              ) : null}
             </div>
           </div>
         </div>
-        <div class="flex justify-end items-center px-16px py-20px w-full bg-#fff footer-row">{renderFooterRow()}</div>
+        <footer
+          class={`flex justify-end items-center px-16px py-16px w-full bg-#F6F5FC footer-row ${
+            collapsed.value ? 'collapsed' : ''
+          }`}
+        >
+          {renderFooterRow()}
+        </footer>
       </Spin>
     );
   },
diff --git a/src/views/creative-generation-workshop/manuscript-writer/detail/style.scss b/src/views/writer-material-center/components/finished-products/manuscript/detail/style.scss
similarity index 80%
rename from src/views/creative-generation-workshop/manuscript-writer/detail/style.scss
rename to src/views/writer-material-center/components/finished-products/manuscript/detail/style.scss
index 4bab00a..8c82811 100644
--- a/src/views/creative-generation-workshop/manuscript-writer/detail/style.scss
+++ b/src/views/writer-material-center/components/finished-products/manuscript/detail/style.scss
@@ -1,8 +1,12 @@
 $footer-height: 68px;
+$content-padding-y: 32px;
 .manuscript-detail-wrap {
   width: 100%;
-  height: calc(100% - 72px);
-  margin-bottom: 72px;
+  height: calc(100% - ($footer-height - $layout-padding-bottom));
+  .content {
+    padding-top: $content-padding-y;
+    padding-bottom: calc($footer-height - $layout-padding-bottom + $content-padding-y);
+  }
   .cts {
     color: #939499;
     font-family: $font-family-regular;
@@ -62,6 +66,9 @@ $footer-height: 68px;
   bottom: 0;
   left: $sidebar-width;
   width: calc(100% - $sidebar-width);
-  border-top: 1px solid #e6e6e8;
   height: $footer-height;
+  &.collapsed {
+    left: $sidebar-width-collapse;
+    width: calc(100% - $sidebar-width-collapse);
+  }
 }
diff --git a/src/views/creative-generation-workshop/manuscript-writer/edit/cancel-edit-modal.vue b/src/views/writer-material-center/components/finished-products/manuscript/edit/cancel-edit-modal.vue
similarity index 88%
rename from src/views/creative-generation-workshop/manuscript-writer/edit/cancel-edit-modal.vue
rename to src/views/writer-material-center/components/finished-products/manuscript/edit/cancel-edit-modal.vue
index 754b24c..b5d2020 100644
--- a/src/views/creative-generation-workshop/manuscript-writer/edit/cancel-edit-modal.vue
+++ b/src/views/writer-material-center/components/finished-products/manuscript/edit/cancel-edit-modal.vue
@@ -24,7 +24,7 @@ const onClose = () => {
 };
 const onConfirm = () => {
   onClose();
-  router.push({ path: `/writer/manuscript/list/${route.params.writerCode}` });
+  router.push({ name: 'WriterMaterialCenterFinishedProducts', params: { writerCode: route.params.writerCode } });
 };
 
 const open = () => {
diff --git a/src/views/creative-generation-workshop/manuscript-writer/edit/index.vue b/src/views/writer-material-center/components/finished-products/manuscript/edit/index.vue
similarity index 84%
rename from src/views/creative-generation-workshop/manuscript-writer/edit/index.vue
rename to src/views/writer-material-center/components/finished-products/manuscript/edit/index.vue
index 7ce2f5d..4a124e1 100644
--- a/src/views/creative-generation-workshop/manuscript-writer/edit/index.vue
+++ b/src/views/writer-material-center/components/finished-products/manuscript/edit/index.vue
@@ -2,9 +2,10 @@
 import { Button, Message as AMessage } from '@arco-design/web-vue';
 import EditForm, { ENUM_UPLOAD_STATUS, INITIAL_VIDEO_INFO } from '../components/edit-form';
 import CancelEditModal from './cancel-edit-modal.vue';
-import { getWorksDetailWriter, putWorksUpdateWriter } from '@/api/all/generationWorkshop-writer.ts';
 
-import { EnumManuscriptType } from '@/views/creative-generation-workshop/manuscript-writer/list/constants.ts';
+import { getWorksDetailWriter, putWorksUpdateWriter } from '@/api/all/generationWorkshop-writer.ts';
+import { useSidebarStore } from '@/stores/modules/side-bar';
+import { EnumManuscriptType } from '@/views/writer-material-center/components/finished-products/manuscript/list/constants.ts';
 import { formatDuration, formatFileSize, convertVideoUrlToCoverUrl } from '@/utils/tools';
 import { slsWithCatch } from '@/utils/stroage.ts';
 
@@ -15,6 +16,8 @@ export default {
   setup(props, { emit, expose }) {
     const router = useRouter();
     const route = useRoute();
+    const sidebarStore = useSidebarStore();
+
     const formRef = ref(null);
     const cancelEditModal = ref(null);
     const dataSource = ref({});
@@ -24,6 +27,9 @@ export default {
 
     const workId = ref(route.params.id);
     const writerCode = computed(() => route.params.writerCode);
+    const collapsed = computed(() => {
+      return sidebarStore.menuCollapse;
+    });
 
     const onCancel = () => {
       const isModified = !isEqual(dataSource.value, remoteDataSource.value);
@@ -49,7 +55,7 @@ export default {
 
           if (check) {
             slsWithCatch('writerManuscriptCheckIds', [workId.value]);
-            router.push({ path: `/writer/manuscript/check/${writerCode.value}` });
+            router.push({ name: 'WriterManuscriptCheck', params: { writerCode: writerCode.value } });
           } else {
             onBack();
           }
@@ -83,7 +89,7 @@ export default {
       dataSource.value.videoInfo = { ...dataSource.value.videoInfo, ...newVideoInfo };
     };
     const onBack = () => {
-      router.push({ path: `/writer/manuscript/list/${writerCode.value}` });
+      router.push({ name: 'WriterMaterialCenterFinishedProducts', params: { writerCode: writerCode.value } });
     };
     onMounted(() => {
       workId && getData();
@@ -94,12 +100,12 @@ export default {
         <div class="manuscript-edit-wrap">
           <div class="flex items-center mb-8px">
             <span class="cts color-#4E5969 cursor-pointer" onClick={onCancel}>
-              内容稿件列表
+              成品库
             </span>
             <icon-oblique-line size="12" class="color-#C9CDD4 mx-4px" />
             <span class="cts bold !color-#1D2129">编辑内容稿件</span>
           </div>
-          <div class="flex-1 overflow-y-auto p-24px bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid">
+          <div class="flex-1 overflow-y-auto p-24px bg-#fff rounded-8px ">
             <EditForm
               ref={formRef}
               formData={dataSource.value}
@@ -108,7 +114,12 @@ export default {
             />
           </div>
         </div>
-        <div class="flex justify-end items-center px-16px py-20px w-full bg-#fff footer-row">
+        <footer
+          class={`flex justify-end items-center px-16px py-16px w-full bg-#F6F5FC footer-row ${
+            collapsed.value ? 'collapsed' : ''
+          }`}
+        >
+          {' '}
           <Button size="medium" type="outline" onClick={onCancel} class="mr-12px">
             退出
           </Button>
@@ -118,7 +129,7 @@ export default {
           <Button type="primary" size="medium" onClick={() => onSave(true)} loading={uploadLoading.value}>
             保存并审核
           </Button>
-        </div>
+        </footer>
 
         <CancelEditModal ref={cancelEditModal} />
       </>
diff --git a/src/views/creative-generation-workshop/manuscript-writer/edit/style.scss b/src/views/writer-material-center/components/finished-products/manuscript/edit/style.scss
similarity index 72%
rename from src/views/creative-generation-workshop/manuscript-writer/edit/style.scss
rename to src/views/writer-material-center/components/finished-products/manuscript/edit/style.scss
index b574f60..0509c0a 100644
--- a/src/views/creative-generation-workshop/manuscript-writer/edit/style.scss
+++ b/src/views/writer-material-center/components/finished-products/manuscript/edit/style.scss
@@ -1,6 +1,6 @@
 $footer-height: 68px;
 .manuscript-edit-wrap {
-  height: calc(100% - 72px);
+  height: calc(100% - ($footer-height - $layout-padding-bottom));
   display: flex;
   flex-direction: column;
   .cts {
@@ -20,6 +20,9 @@ $footer-height: 68px;
   bottom: 0;
   left: $sidebar-width;
   width: calc(100% - $sidebar-width);
-  border-top: 1px solid #e6e6e8;
   height: $footer-height;
+  &.collapsed {
+    left: $sidebar-width-collapse;
+    width: calc(100% - $sidebar-width-collapse);
+  }
 }
diff --git a/src/views/creative-generation-workshop/manuscript-writer/list/components/filter-block/index.vue b/src/views/writer-material-center/components/finished-products/manuscript/list/components/filter-block/index.vue
similarity index 96%
rename from src/views/creative-generation-workshop/manuscript-writer/list/components/filter-block/index.vue
rename to src/views/writer-material-center/components/finished-products/manuscript/list/components/filter-block/index.vue
index 4826fe8..0270933 100644
--- a/src/views/creative-generation-workshop/manuscript-writer/list/components/filter-block/index.vue
+++ b/src/views/writer-material-center/components/finished-products/manuscript/list/components/filter-block/index.vue
@@ -85,7 +85,7 @@
 
 <script setup>
 import { defineEmits, defineProps } from 'vue';
-import { CHECK_STATUS } from '@/views/creative-generation-workshop/manuscript/list/constants';
+import { CHECK_STATUS } from '@/views/writer-material-center/components/finished-products/manuscript/list/constants';
 import CommonSelect from '@/components/common-select';
 // import { getProjectList } from '@/api/all/propertyMarketing';
 
diff --git a/src/views/creative-generation-workshop/manuscript-writer/list/components/manuscript-table/constants.ts b/src/views/writer-material-center/components/finished-products/manuscript/list/components/manuscript-table/constants.ts
similarity index 100%
rename from src/views/creative-generation-workshop/manuscript-writer/list/components/manuscript-table/constants.ts
rename to src/views/writer-material-center/components/finished-products/manuscript/list/components/manuscript-table/constants.ts
diff --git a/src/views/creative-generation-workshop/manuscript-writer/list/components/manuscript-table/delete-manuscript-modal.vue b/src/views/writer-material-center/components/finished-products/manuscript/list/components/manuscript-table/delete-manuscript-modal.vue
similarity index 100%
rename from src/views/creative-generation-workshop/manuscript-writer/list/components/manuscript-table/delete-manuscript-modal.vue
rename to src/views/writer-material-center/components/finished-products/manuscript/list/components/manuscript-table/delete-manuscript-modal.vue
diff --git a/src/views/creative-generation-workshop/manuscript-writer/list/components/manuscript-table/index.vue b/src/views/writer-material-center/components/finished-products/manuscript/list/components/manuscript-table/index.vue
similarity index 92%
rename from src/views/creative-generation-workshop/manuscript-writer/list/components/manuscript-table/index.vue
rename to src/views/writer-material-center/components/finished-products/manuscript/list/components/manuscript-table/index.vue
index d9a932c..2304137 100644
--- a/src/views/creative-generation-workshop/manuscript-writer/list/components/manuscript-table/index.vue
+++ b/src/views/writer-material-center/components/finished-products/manuscript/list/components/manuscript-table/index.vue
@@ -98,7 +98,7 @@
 import { ref } from 'vue';
 import { formatTableField, exactFormatTime } from '@/utils/tools';
 import { TABLE_COLUMNS } from './constants';
-import { CHECK_STATUS, EnumManuscriptType } from '@/views/creative-generation-workshop/manuscript-writer/list/constants';
+import { CHECK_STATUS, EnumManuscriptType } from '@/views/writer-material-center/components/finished-products/manuscript/list/constants';
 
 import TextOverTips from '@/components/text-over-tips';
 import HoverImagePreview from '@/components/hover-image-preview';
@@ -128,10 +128,22 @@ const onDelete = (item) => {
   emits('delete', item);
 };
 const onEdit = (item) => {
-  router.push(`/writer/manuscript/edit/${route.params.writerCode}/${item.id}`);
+  router.push({
+    name: 'WriterManuscriptEdit',
+    params: {
+      writerCode: route.params.writerCode,
+      id: item.id,
+    },
+  });
 };
 const onDetail = (item) => {
-  router.push(`/writer/manuscript/detail/${route.params.writerCode}/${item.id}`);
+  router.push({
+    name: 'WriterManuscriptDetail',
+    params: {
+      writerCode: route.params.writerCode,
+      id: item.id,
+    },
+  });
 };
 
 const getStatusInfo = (audit_status) => {
diff --git a/src/views/creative-generation-workshop/manuscript/list/components/manuscript-table/style.scss b/src/views/writer-material-center/components/finished-products/manuscript/list/components/manuscript-table/style.scss
similarity index 100%
rename from src/views/creative-generation-workshop/manuscript/list/components/manuscript-table/style.scss
rename to src/views/writer-material-center/components/finished-products/manuscript/list/components/manuscript-table/style.scss
diff --git a/src/views/creative-generation-workshop/manuscript/list/constants.ts b/src/views/writer-material-center/components/finished-products/manuscript/list/constants.ts
similarity index 100%
rename from src/views/creative-generation-workshop/manuscript/list/constants.ts
rename to src/views/writer-material-center/components/finished-products/manuscript/list/constants.ts
diff --git a/src/views/creative-generation-workshop/manuscript-writer/list/index.vue b/src/views/writer-material-center/components/finished-products/manuscript/list/index.vue
similarity index 68%
rename from src/views/creative-generation-workshop/manuscript-writer/list/index.vue
rename to src/views/writer-material-center/components/finished-products/manuscript/list/index.vue
index 5a42f2a..7d46355 100644
--- a/src/views/creative-generation-workshop/manuscript-writer/list/index.vue
+++ b/src/views/writer-material-center/components/finished-products/manuscript/list/index.vue
@@ -1,24 +1,11 @@
 <template>
   <div class="manuscript-list-wrap">
-    <div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid mb-16px">
-      <div class="top flex h-64px px-24px py-10px justify-between items-center">
-        <p class="text-18px font-400 lh-26px color-#211F24 title">内容稿件列表</p>
-        <div class="flex items-center">
-          <a-button type="primary" size="medium" @click="openUploadModal">
-            <template #icon>
-              <icon-plus size="16" />
-            </template>
-            <template #default>上传内容稿件</template>
-          </a-button>
-        </div>
-      </div>
+    <div class="filter-wrap bg-#fff rounded-b-8px  mb-16px">
       <FilterBlock v-model:query="query" @search="handleSearch" @reset="handleReset" />
     </div>
-    <div
-      class="table-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px py-24px flex flex-col"
-    >
+    <div class="table-wrap bg-#fff rounded-8px px-24px py-24px flex flex-col">
       <ManuscriptTable :dataSource="dataSource" @sorterChange="handleSorterChange" @delete="handleDelete" />
-      <div v-if="pageInfo.total > 0" class="pagination-box">
+      <div v-if="pageInfo.total > 0" class="pagination-row">
         <a-pagination
           :total="pageInfo.total"
           size="mini"
@@ -34,7 +21,6 @@
     </div>
 
     <DeleteManuscriptModal ref="deleteManuscriptModalRef" />
-    <UploadManuscriptModal ref="uploadManuscriptModalRef" />
   </div>
 </template>
 <script lang="jsx" setup>
@@ -43,11 +29,13 @@ import { Button } from '@arco-design/web-vue';
 import FilterBlock from './components/filter-block';
 import ManuscriptTable from './components/manuscript-table';
 import DeleteManuscriptModal from './components/manuscript-table/delete-manuscript-modal.vue';
-import UploadManuscriptModal from './components/upload-manuscript-modal';
 
 import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
 import { getWorksPageWriter } from '@/api/all/generationWorkshop-writer.ts';
-import { INITIAL_QUERY, EnumCheckStatus } from '@/views/creative-generation-workshop/manuscript-writer/list/constants.ts';
+import {
+  INITIAL_QUERY,
+  EnumCheckStatus,
+} from '@/views/writer-material-center/components/finished-products/manuscript/list/constants.ts';
 
 const { dataSource, pageInfo, onPageChange, onPageSizeChange, resetPageInfo } = useTableSelectionWithPagination({
   onPageChange: () => {
@@ -61,7 +49,6 @@ const route = useRoute();
 const query = ref(cloneDeep(INITIAL_QUERY));
 const addManuscriptModalRef = ref(null);
 const deleteManuscriptModalRef = ref(null);
-const uploadManuscriptModalRef = ref(null);
 
 const getData = async () => {
   const { page, page_size } = pageInfo.value;
@@ -93,10 +80,6 @@ const handleSorterChange = (column, order) => {
   reload();
 };
 
-const openUploadModal = () => {
-  uploadManuscriptModalRef.value?.open();
-};
-
 const handleDelete = (item) => {
   const { id, title } = item;
   deleteManuscriptModalRef.value?.open({ id, name: `“${title}”` });
diff --git a/src/views/creative-generation-workshop/manuscript/list/style.scss b/src/views/writer-material-center/components/finished-products/manuscript/list/style.scss
similarity index 71%
rename from src/views/creative-generation-workshop/manuscript/list/style.scss
rename to src/views/writer-material-center/components/finished-products/manuscript/list/style.scss
index fbb2fb8..8570520 100644
--- a/src/views/creative-generation-workshop/manuscript/list/style.scss
+++ b/src/views/writer-material-center/components/finished-products/manuscript/list/style.scss
@@ -18,12 +18,5 @@
   .table-wrap {
     display: flex;
     flex-direction: column;
-    .pagination-box {
-      display: flex;
-      width: 100%;
-      padding: 16px 24px 0;
-      justify-content: flex-end;
-      align-items: center;
-    }
   }
 }
diff --git a/src/views/creative-generation-workshop/manuscript-writer/upload/cancel-upload-modal.vue b/src/views/writer-material-center/components/finished-products/manuscript/upload/cancel-upload-modal.vue
similarity index 89%
rename from src/views/creative-generation-workshop/manuscript-writer/upload/cancel-upload-modal.vue
rename to src/views/writer-material-center/components/finished-products/manuscript/upload/cancel-upload-modal.vue
index 3f847d9..dffaa65 100644
--- a/src/views/creative-generation-workshop/manuscript-writer/upload/cancel-upload-modal.vue
+++ b/src/views/writer-material-center/components/finished-products/manuscript/upload/cancel-upload-modal.vue
@@ -26,7 +26,7 @@ const onClose = () => {
 };
 const onConfirm = () => {
   onClose();
-  router.push({ path: `/writer/manuscript/list/${route.params.writerCode}` });
+  router.push({ name: 'WriterMaterialCenterFinishedProducts', params: { writerCode: route.params.writerCode } });
 };
 
 const open = (manusNum) => {
diff --git a/src/views/creative-generation-workshop/manuscript-writer/upload/index.vue b/src/views/writer-material-center/components/finished-products/manuscript/upload/index.vue
similarity index 91%
rename from src/views/creative-generation-workshop/manuscript-writer/upload/index.vue
rename to src/views/writer-material-center/components/finished-products/manuscript/upload/index.vue
index 87c2db6..65be72d 100644
--- a/src/views/creative-generation-workshop/manuscript-writer/upload/index.vue
+++ b/src/views/writer-material-center/components/finished-products/manuscript/upload/index.vue
@@ -5,24 +5,15 @@ import EditForm, { ENUM_UPLOAD_STATUS, INITIAL_VIDEO_INFO } from '../components/
 import CancelUploadModal from './cancel-upload-modal.vue';
 import UploadSuccessModal from './upload-success-modal.vue';
 
-import { EnumManuscriptType } from '@/views/creative-generation-workshop/manuscript-writer/list/constants';
+import { EnumManuscriptType } from '@/views/writer-material-center/components/finished-products/manuscript/list/constants';
 import { postWorksBatchWriter } from '@/api/all/generationWorkshop-writer.ts';
 import { glsWithCatch, rlsWithCatch, slsWithCatch } from '@/utils/stroage.ts';
 import { formatDuration, formatFileSize, convertVideoUrlToCoverUrl } from '@/utils/tools';
+import { useSidebarStore } from '@/stores/modules/side-bar';
 
 import icon1 from '@/assets/img/creative-generation-workshop/icon-photo.png';
 import icon2 from '@/assets/img/creative-generation-workshop/icon-video.png';
 
-// const generateMockData = (count = 4) =>
-//   Array.from({ length: count }, (_, i) => ({
-//     id: `${i + 1}`,
-//     title: `标题${i + 1}`,
-//     content: '挖到宝了！这个平价好物让我素颜出门都自信✨挖到宝了！这个平价好物让我素颜出门都自信✨',
-//     type: i % 2 === 0 ? EnumManuscriptType.Image : EnumManuscriptType.Video,
-//     files: [],
-//     videoInfo: cloneDeep(INITIAL_VIDEO_INFO),
-//   }));
-
 export default {
   components: {
     EditForm,
@@ -31,6 +22,8 @@ export default {
     const formRef = ref(null);
     const route = useRoute();
     const router = useRouter();
+    const sidebarStore = useSidebarStore();
+
     const cancelUploadModal = ref(null);
     const uploadSuccessModal = ref(null);
     const works = ref([]);
@@ -39,6 +32,10 @@ export default {
     const uploadLoading = ref(false);
 
     const writerCode = computed(() => route.params.writerCode);
+    const collapsed = computed(() => {
+      return sidebarStore.menuCollapse;
+    });
+
     const onCancel = () => {
       cancelUploadModal.value?.open(works.value.length);
     };
@@ -85,9 +82,20 @@ export default {
         } else {
           if (action === 'uploadAndCheck') {
             slsWithCatch('writerManuscriptCheckIds', [data]);
-            router.push({ path: `/writer/manuscript/check/${writerCode.value}` });
+            router.push({
+              name: 'WriterManuscriptCheck',
+              params: {
+                writerCode: writerCode.value,
+              },
+            });
+
           } else {
-            router.push({ path: `/writer/manuscript/list/${writerCode.value}` });
+            router.push({
+              name: 'WriterMaterialCenterFinishedProducts',
+              params: {
+                writerCode: writerCode.value,
+              },
+            });
           }
         }
       }
@@ -243,7 +251,7 @@ export default {
 
     return () => (
       <>
-        <div class="manuscript-upload-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid flex">
+        <div class="manuscript-upload-wrap bg-#fff rounded-8px  flex">
           <div class="left flex-1 overflow-y-auto p-24px">
             <EditForm
               ref={formRef}
@@ -306,8 +314,13 @@ export default {
             </div>
           )}
         </div>
-        <div class="flex justify-end items-center px-16px py-20px w-full bg-#fff footer-row">{renderFooterRow()}</div>
-
+        <footer
+          class={`flex justify-end items-center px-16px py-16px w-full bg-#F6F5FC footer-row ${
+            collapsed.value ? 'collapsed' : ''
+          }`}
+        >
+          {renderFooterRow()}
+        </footer>
         <CancelUploadModal ref={cancelUploadModal} />
         <UploadSuccessModal ref={uploadSuccessModal} />
       </>
diff --git a/src/views/creative-generation-workshop/manuscript-writer/upload/style.scss b/src/views/writer-material-center/components/finished-products/manuscript/upload/style.scss
similarity index 75%
rename from src/views/creative-generation-workshop/manuscript-writer/upload/style.scss
rename to src/views/writer-material-center/components/finished-products/manuscript/upload/style.scss
index c3df4ae..d3c3f70 100644
--- a/src/views/creative-generation-workshop/manuscript-writer/upload/style.scss
+++ b/src/views/writer-material-center/components/finished-products/manuscript/upload/style.scss
@@ -1,6 +1,6 @@
 $footer-height: 68px;
 .manuscript-upload-wrap {
-  height: calc(100% - 72px);
+  height: calc(100% - ($footer-height - $layout-padding-bottom));
   .cts,
   :deep(.overflow-text) {
     color: #939499;
@@ -24,6 +24,9 @@ $footer-height: 68px;
   bottom: 0;
   left: $sidebar-width;
   width: calc(100% - $sidebar-width);
-  border-top: 1px solid #e6e6e8;
   height: $footer-height;
+  &.collapsed {
+    left: $sidebar-width-collapse;
+    width: calc(100% - $sidebar-width-collapse);
+  }
 }
diff --git a/src/views/creative-generation-workshop/manuscript-writer/upload/upload-success-modal.vue b/src/views/writer-material-center/components/finished-products/manuscript/upload/upload-success-modal.vue
similarity index 88%
rename from src/views/creative-generation-workshop/manuscript-writer/upload/upload-success-modal.vue
rename to src/views/writer-material-center/components/finished-products/manuscript/upload/upload-success-modal.vue
index 8b9e1e9..82b5db2 100644
--- a/src/views/creative-generation-workshop/manuscript-writer/upload/upload-success-modal.vue
+++ b/src/views/writer-material-center/components/finished-products/manuscript/upload/upload-success-modal.vue
@@ -30,12 +30,12 @@ const onClose = () => {
 
 const onBack = () => {
   onClose();
-  router.push({ path: `/writer/manuscript/list/${route.params.writerCode}` });
+  router.push({ name: 'WriterMaterialCenterFinishedProducts', params: { writerCode: route.params.writerCode } });
 };
 const onConfirm = () => {
   visible.value = false;
   slsWithCatch('writerManuscriptCheckIds', workIds.value);
-  router.push({ path: `/writer/manuscript/check/${route.params.writerCode}` });
+  router.push({ name: 'WriterManuscriptCheck', params: { writerCode: route.params.writerCode } });
 };
 
 const open = (_workIds) => {
diff --git a/src/views/writer-material-center/components/finished-products/style.scss b/src/views/writer-material-center/components/finished-products/style.scss
new file mode 100644
index 0000000..d93b8c2
--- /dev/null
+++ b/src/views/writer-material-center/components/finished-products/style.scss
@@ -0,0 +1,37 @@
+.finished-products-wrap {
+  :deep(.ant-tabs) {
+    .ant-tabs-nav {
+      margin-bottom: 0;
+      padding: 0 24px;
+      .ant-tabs-nav-wrap {
+        height: 56px;
+        .ant-tabs-nav-list {
+          .ant-tabs-tab {
+            .ant-tabs-tab-btn {
+              color: var(--Text-2, #55585f);
+              font-family: $font-family-regular;
+              font-size: 16px;
+              font-style: normal;
+              font-weight: 400;
+              line-height: 24px;
+            }
+            &.ant-tabs-tab-active {
+              .ant-tabs-tab-btn {
+                color: var(--Brand-6, #6d4cfe);
+                font-weight: 500;
+                font-family: $font-family-medium;
+                text-shadow: none;
+              }
+            }
+          }
+          .ant-tabs-ink-bar {
+            background: #6D4CFE;
+          }
+        }
+      }
+    }
+    .ant-tabs-content-holder {
+      display: none;
+    }
+  }
+}
diff --git a/src/views/writer-material-center/components/raw-material/constants.ts b/src/views/writer-material-center/components/raw-material/constants.ts
new file mode 100644
index 0000000..0cf95ab
--- /dev/null
+++ b/src/views/writer-material-center/components/raw-material/constants.ts
@@ -0,0 +1,26 @@
+export enum RawMaterialType {
+  All = '0',
+  Image = '0',
+  Video = '1',
+  Text = '2',
+}
+
+export const TABS_LIST = [
+  {
+    label: '全部',
+    value: RawMaterialType.All,
+  },
+  {
+    label: '图片',
+    value: RawMaterialType.Image,
+  },
+  {
+    label: '视频',
+    value: RawMaterialType.Video,
+  },
+  {
+    label: '文本',
+    value: RawMaterialType.Text,
+  },
+];
+
diff --git a/src/views/writer-material-center/components/raw-material/index.vue b/src/views/writer-material-center/components/raw-material/index.vue
new file mode 100644
index 0000000..f87c20c
--- /dev/null
+++ b/src/views/writer-material-center/components/raw-material/index.vue
@@ -0,0 +1,29 @@
+<script lang="tsx">
+import { Tabs, TabPane } from 'ant-design-vue';
+import { TABS_LIST, RawMaterialType } from './constants';
+
+export default defineComponent({
+  setup(_, { attrs, slots, expose }) {
+    const rawMaterialType = ref(RawMaterialType.All);
+    return () => (
+      <div class="raw-material-wrap h-full flex flex-col">
+        <div class="bg-white rounded-t-8px">
+          <Tabs
+            v-model:activeKey={rawMaterialType.value}
+          >
+            {TABS_LIST.map((item) => (
+              <TabPane key={item.value} tab={item.label}>
+                {item.label}
+              </TabPane>
+            ))}
+          </Tabs>
+        </div>
+      </div>
+    );
+  },
+});
+</script>
+
+<style scoped lang="scss">
+@import './style.scss';
+</style>
diff --git a/src/views/writer-material-center/components/raw-material/style.scss b/src/views/writer-material-center/components/raw-material/style.scss
new file mode 100644
index 0000000..3486458
--- /dev/null
+++ b/src/views/writer-material-center/components/raw-material/style.scss
@@ -0,0 +1,3 @@
+.raw-material-wrap {
+    
+}
\ No newline at end of file
diff --git a/src/views/writer-material-center/index.vue b/src/views/writer-material-center/index.vue
new file mode 100644
index 0000000..2ec06b1
--- /dev/null
+++ b/src/views/writer-material-center/index.vue
@@ -0,0 +1,55 @@
+<script lang="tsx">
+import FinishedProducts from './components/finished-products/index.vue';
+import RawMaterial from './components/raw-material/index.vue';
+
+const TABS = [
+  {
+    label: '成品库',
+    key: '1',
+    routeName: 'WriterMaterialCenterFinishedProducts',
+  },
+  // {
+  //   label: '原料库',
+  //   key: '2',
+  //   routeName: 'WriterMaterialCenterRawMaterial',
+  // },
+];
+export default defineComponent({
+  setup(_, { attrs, slots, expose }) {
+    const route = useRoute();
+    const router = useRouter();
+
+    const activeKey = ref('');
+
+    onMounted(() => {
+      activeKey.value = TABS.find((item) => item.routeName === route.name)?.key;
+    });
+
+    return () => (
+      <div class="material-center-wrap h-full flex flex-col">
+        <header class="py-16px px-24px rounded-8px bg-#fff flex items-center mb-16px">
+          {TABS.map((item) => (
+            <p
+              key={item.key}
+              class={`font-family-medium color-#737478 font-400 text-16px lh-24px cursor-pointer mr-32px ${
+                item.key === activeKey.value ? '!color-#6D4CFE font-500' : ''
+              }`}
+              onClick={() => {
+                activeKey.value = '';
+                router.push({ name: item.routeName });
+              }}
+            >
+              {item.label}
+            </p>
+          ))}
+        </header>
+        {activeKey.value === '1' ? <FinishedProducts /> : activeKey.value === '2' ? <RawMaterial /> : null}{' '}
+      </div>
+    );
+  },
+});
+</script>
+
+<style scoped lang="scss">
+@import './style.scss';
+</style>
diff --git a/src/views/writer-material-center/style.scss b/src/views/writer-material-center/style.scss
new file mode 100644
index 0000000..0d3706c
--- /dev/null
+++ b/src/views/writer-material-center/style.scss
@@ -0,0 +1,2 @@
+.material-center-wrap {
+}
diff --git a/tsconfig.json b/tsconfig.json
index 8d7756e..62b4db7 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -5,7 +5,7 @@
     "target": "esnext",
     "module": "esnext",
     "moduleResolution": "node",
-    "strict": true,
+    "strict": false,
     "jsx": "preserve",
     "sourceMap": true,
     "resolveJsonModule": true,
@@ -16,7 +16,7 @@
     "paths": {
       "@/*": ["src/*"]
     },
-    "types": ["unplugin-vue-define-options/macros-global"]
+    "types": ["unplugin-vue-define-options/macros-global",]
   },
 
   "references": [
diff --git a/vite.config.ts b/vite.config.ts
index 3ff6cce..3c96a9c 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -17,6 +17,10 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
   const setServer = setServerConfig({ env });
 
   return {
+    define: {
+      __VUE_PROD_DEVTOOLS__: false,
+      __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false,
+    },
     css: {
       preprocessorOptions: {
         scss: {
@@ -39,7 +43,6 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
         '/api': {
           changeOrigin: true,
           rewrite: (path) => path.replace(/^\/api/, ''),
-          // 目标地址
           target: 'https://lingjiapi.lvfunai.com/api',
         },
       },