From 7288b949967a4ce03835fb0192b8678b1b75dffc Mon Sep 17 00:00:00 2001
From: zoujing <zoujing@gogpay.cn>
Date: Mon, 5 Jan 2026 18:14:45 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A6=96=E9=A1=B5=E6=B6=88=E6=81=AF?=
 =?UTF-8?q?=E7=9A=84=E7=95=8C=E9=9D=A2=E6=90=AD=E5=BB=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                       | 596 +++++++++++++++++++++++-
 src/renderer/views/home/ChatGuide.vue   | 121 +++++
 src/renderer/views/home/HomeTab.vue     |  33 +-
 src/renderer/views/home/MessageList.vue | 198 ++++++++
 4 files changed, 943 insertions(+), 5 deletions(-)
 create mode 100644 src/renderer/views/home/ChatGuide.vue
 create mode 100644 src/renderer/views/home/MessageList.vue

diff --git a/package-lock.json b/package-lock.json
index 92f8598..d9b8037 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1501,6 +1501,99 @@
         "node": ">=18"
       }
     },
+    "node_modules/@eslint-community/eslint-utils": {
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.1.tgz",
+      "integrity": "sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "eslint-visitor-keys": "^3.4.3"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+      }
+    },
+    "node_modules/@eslint-community/regexpp": {
+      "version": "4.12.2",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.2.tgz",
+      "integrity": "sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@eslint/eslintrc": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
+      "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "ajv": "^6.12.4",
+        "debug": "^4.3.2",
+        "espree": "^9.6.0",
+        "globals": "^13.19.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.0",
+        "minimatch": "^3.1.2",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@eslint/js": {
+      "version": "8.57.1",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.1.tgz",
+      "integrity": "sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
     "node_modules/@exodus/schemasafe": {
       "version": "1.3.0",
       "resolved": "https://registry.npmmirror.com/@exodus/schemasafe/-/schemasafe-1.3.0.tgz",
@@ -1540,6 +1633,47 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@humanwhocodes/config-array": {
+      "version": "0.13.0",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
+      "integrity": "sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==",
+      "deprecated": "Use @eslint/config-array instead",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "dependencies": {
+        "@humanwhocodes/object-schema": "^2.0.3",
+        "debug": "^4.3.1",
+        "minimatch": "^3.0.5"
+      },
+      "engines": {
+        "node": ">=10.10.0"
+      }
+    },
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "engines": {
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/object-schema": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz",
+      "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
+      "deprecated": "Use @eslint/object-schema instead",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "peer": true
+    },
     "node_modules/@iconify-json/material-symbols": {
       "version": "1.2.50",
       "resolved": "https://registry.npmmirror.com/@iconify-json/material-symbols/-/material-symbols-1.2.50.tgz",
@@ -3136,6 +3270,14 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
+    "node_modules/@ungap/structured-clone": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.0.tgz",
+      "integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==",
+      "dev": true,
+      "license": "ISC",
+      "peer": true
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-6.0.3.tgz",
@@ -3541,6 +3683,17 @@
         "acorn": "^8.14.0"
       }
     },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
     "node_modules/agent-base": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
@@ -4585,6 +4738,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/defaults": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.4.tgz",
@@ -4703,6 +4864,20 @@
         "node": ">=8"
       }
     },
+    "node_modules/doctrine": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
+      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/dotenv": {
       "version": "17.2.3",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.2.3.tgz",
@@ -5726,7 +5901,6 @@
       "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
       "engines": {
         "node": ">=10"
       },
@@ -5734,6 +5908,64 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/eslint": {
+      "version": "8.57.1",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.1.tgz",
+      "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==",
+      "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.2.0",
+        "@eslint-community/regexpp": "^4.6.1",
+        "@eslint/eslintrc": "^2.1.4",
+        "@eslint/js": "8.57.1",
+        "@humanwhocodes/config-array": "^0.13.0",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@nodelib/fs.walk": "^1.2.8",
+        "@ungap/structured-clone": "^1.2.0",
+        "ajv": "^6.12.4",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.2",
+        "debug": "^4.3.2",
+        "doctrine": "^3.0.0",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^7.2.2",
+        "eslint-visitor-keys": "^3.4.3",
+        "espree": "^9.6.1",
+        "esquery": "^1.4.2",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^6.0.1",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "globals": "^13.19.0",
+        "graphemer": "^1.4.0",
+        "ignore": "^5.2.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "is-path-inside": "^3.0.3",
+        "js-yaml": "^4.1.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "levn": "^0.4.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.2",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.3",
+        "strip-ansi": "^6.0.1",
+        "text-table": "^0.2.0"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
     "node_modules/eslint-scope": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
@@ -5761,6 +5993,75 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/eslint/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/eslint/node_modules/eslint-scope": {
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
+      "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "peer": true,
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint/node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "peer": true,
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/eslint/node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "license": "ISC",
+      "peer": true,
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/eslint/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/esniff": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/esniff/-/esniff-2.0.1.tgz",
@@ -5777,6 +6078,50 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/espree": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
+      "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "peer": true,
+      "dependencies": {
+        "acorn": "^8.9.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^3.4.1"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/esquery": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.7.0.tgz",
+      "integrity": "sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "peer": true,
+      "dependencies": {
+        "estraverse": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/esquery/node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "peer": true,
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
     "node_modules/esrecurse": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
@@ -5820,6 +6165,17 @@
         "@types/estree": "^1.0.0"
       }
     },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/event-emitter": {
       "version": "0.3.5",
       "resolved": "https://registry.npmmirror.com/event-emitter/-/event-emitter-0.3.5.tgz",
@@ -6050,6 +6406,14 @@
       "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
       "license": "MIT"
     },
+    "node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/fast-safe-stringify": {
       "version": "2.1.1",
       "resolved": "https://registry.npmmirror.com/fast-safe-stringify/-/fast-safe-stringify-2.1.1.tgz",
@@ -6112,6 +6476,20 @@
         }
       }
     },
+    "node_modules/file-entry-cache": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
+      "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "flat-cache": "^3.0.4"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      }
+    },
     "node_modules/filename-reserved-regex": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-2.0.0.tgz",
@@ -6170,6 +6548,22 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/flat-cache": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
+      "integrity": "sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "flatted": "^3.2.9",
+        "keyv": "^4.5.3",
+        "rimraf": "^3.0.2"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      }
+    },
     "node_modules/flatted": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
@@ -6514,6 +6908,37 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/globals": {
+      "version": "13.24.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
+      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "type-fest": "^0.20.2"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/globals/node_modules/type-fest": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+      "dev": true,
+      "license": "(MIT OR CC0-1.0)",
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/globalthis": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.4.tgz",
@@ -6597,6 +7022,14 @@
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
       "license": "ISC"
     },
+    "node_modules/graphemer": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
+      "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -6957,6 +7390,17 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/is-path-inside": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
+      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-promise": {
       "version": "2.2.2",
       "resolved": "https://registry.npmmirror.com/is-promise/-/is-promise-2.2.2.tgz",
@@ -7139,6 +7583,14 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/json-stringify-safe": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
@@ -7180,6 +7632,21 @@
         "json-buffer": "3.0.1"
       }
     },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/lightningcss": {
       "version": "1.30.2",
       "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.2.tgz",
@@ -7630,6 +8097,14 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/log-symbols": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
@@ -8244,6 +8719,14 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/negotiator": {
       "version": "0.6.4",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.4.tgz",
@@ -8759,6 +9242,25 @@
       "dev": true,
       "license": "0BSD"
     },
+    "node_modules/optionator": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
+      "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/ora": {
       "version": "5.4.1",
       "resolved": "https://registry.npmjs.org/ora/-/ora-5.4.1.tgz",
@@ -9233,6 +9735,17 @@
         "node": "^12.20.0 || >=14"
       }
     },
+    "node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/prettier": {
       "version": "3.7.4",
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.7.4.tgz",
@@ -9307,6 +9820,17 @@
         "once": "^1.3.1"
       }
     },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/punycode.js": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
@@ -9377,6 +9901,16 @@
         "safe-buffer": "^5.1.0"
       }
     },
+    "node_modules/react": {
+      "version": "19.2.3",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz",
+      "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/read-binary-file-arch": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/read-binary-file-arch/-/read-binary-file-arch-1.0.6.tgz",
@@ -10351,6 +10885,20 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/strip-literal": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-3.1.0.tgz",
@@ -10618,6 +11166,14 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/text-table": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
+      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/timers-ext": {
       "version": "0.1.8",
       "resolved": "https://registry.npmmirror.com/timers-ext/-/timers-ext-0.1.8.tgz",
@@ -10783,6 +11339,20 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "prelude-ls": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/type-fest": {
       "version": "0.21.3",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
@@ -10800,7 +11370,7 @@
       "version": "5.9.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
@@ -11002,6 +11572,17 @@
         "browserslist": ">= 4.21.0"
       }
     },
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "peer": true,
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
     "node_modules/username": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/username/-/username-5.1.0.tgz",
@@ -11332,7 +11913,6 @@
       "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -11566,6 +12146,16 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zod": {
+      "version": "4.3.5",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.3.5.tgz",
+      "integrity": "sha512-k7Nwx6vuWx1IJ9Bjuf4Zt1PEllcwe7cls3VNzm4CQ1/hgtFUK2bRNG3rvnpPUhFjmqJKAKtjV576KnUkHocg/g==",
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
     }
   }
 }
diff --git a/src/renderer/views/home/ChatGuide.vue b/src/renderer/views/home/ChatGuide.vue
new file mode 100644
index 0000000..e1c7a14
--- /dev/null
+++ b/src/renderer/views/home/ChatGuide.vue
@@ -0,0 +1,121 @@
+<template>
+  <div class="chat-guide">
+    <div class="hero-area">
+      <h1 class="greet">你好，<br/>我今天能帮你什么？</h1>
+
+      <div class="input-wrap">
+        <div class="tag">智能问数</div>
+        <div class="fake-input">
+          <div class="placeholder">给我发布或者布置任务</div>
+          <div class="actions">
+            <button class="link">🔗</button>
+            <button class="send">✈</button>
+          </div>
+        </div>
+      </div>
+      <div class="task-header">
+        <h3>任务中心</h3>
+        <a class="edit">编辑</a>
+      </div>
+    </div>
+
+    <div class="task-area">
+      <div class="task-list">
+        <div class="task-card" v-for="n in 14" :key="n">
+          <div class="task-icon">销</div>
+          <div class="task-body">
+            <div class="task-title">每日销售数据</div>
+            <div class="task-desc">分析用于销售渠道每日数据汇总及简要展示</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style scoped>
+.chat-guide {
+  height: 100%;
+  overflow: visible;
+  background: #fff;
+  padding: 40px 48px;
+  box-sizing: border-box;
+}
+
+.hero-area {
+  position: sticky;
+  top: 0;
+  background: #ffffff;
+  padding-top: 24px;
+  padding-bottom: 24px;
+  z-index: 10;
+}
+
+.greet {
+  font-size: 28px;
+  font-weight: 700;
+  margin: 0 0 28px 0;
+}
+
+.input-wrap { display:flex; flex-direction:column; align-items:stretch; gap:12px }
+.tag {
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  width: 108px;
+  padding:6px 10px;
+  border-radius: 16px;
+  background: transparent;
+  color:#333;
+  font-size:13px;
+  border: 1px solid #E5E8EE;
+  box-sizing: border-box;
+}
+
+.fake-input {
+  height: 174px;
+  background: #fff;
+  border-radius: 8px;
+  padding: 18px;
+  border: 1px solid #eef2f6;
+  box-shadow: 0 1px 0 rgba(0,0,0,0.03);
+  display:flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.placeholder { color:#bfc9d4 }
+.actions { display:flex; justify-content: space-between; align-items: center; width:100% }
+.actions .link { background:transparent; border:none; color:#9fb0c4 }
+.actions .send { background:#f1f6fb; border:none; padding:6px 10px; border-radius:6px }
+
+.task-area { margin-top: 20px }
+.task-header { display:flex; justify-content:space-between; align-items:center; margin:16px 0 }
+.task-header h3 { margin:0; font-size:16px }
+.task-header .edit { color:#3b82f6; font-size:13px }
+
+.task-list { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px }
+.task-card {
+  display:flex;
+  gap:12px;
+  align-items:flex-start;
+  padding: 14px;
+  border-radius: 10px;
+  border: 1px solid #dfeaf6;
+  background:#fff;
+}
+.task-icon { width:44px;height:44px;background: #EFF6FF; border-radius:8px;border:1px dashed #9fc0e8;display:flex;align-items:center;justify-content:center;color:#3b82f6; font-size: 23px; }
+.task-title { font-weight:600 }
+.task-desc { color:#9aa5b1; font-size:13px; margin-top:6px }
+
+/* make content under hero scroll while hero stays sticky */
+.chat-guide::before{ content:''; display:block; height:8px }
+
+@media (max-width: 800px){
+  .chat-guide { padding:20px }
+  .task-list { grid-template-columns: 1fr }
+}
+
+</style>
diff --git a/src/renderer/views/home/HomeTab.vue b/src/renderer/views/home/HomeTab.vue
index a1a4f82..99e6a8c 100644
--- a/src/renderer/views/home/HomeTab.vue
+++ b/src/renderer/views/home/HomeTab.vue
@@ -1,8 +1,37 @@
 <template>
   <div class="bg-white h-full w-full p-[20px]">
-    <h1>首页 Dashboard</h1>
+    <div class="home-tab">
+      <message-list />
+      <div class="main-area">
+        <chat-guide />
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-</script>
\ No newline at end of file
+import MessageList from './MessageList.vue'
+import ChatGuide from './ChatGuide.vue'
+</script>
+
+<style scoped>
+.home-tab {
+  display: flex;
+  height: 100%;
+  width: 100%;
+}
+.home-tab > :first-child { flex: 0 0 260px }
+.main-area { flex: 1 1 auto; overflow: auto; padding: 20px }
+
+/* match MessageList scrollbar: 8px, subtle thumb */
+.main-area { scrollbar-width: auto }
+.main-area::-webkit-scrollbar { width: 8px }
+.main-area::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.05); border-radius: 8px }
+.main-area::-webkit-scrollbar-track { background: transparent }
+
+@media (max-width: 900px) {
+  .home-tab { flex-direction: column }
+  .home-tab > :first-child { flex: none; width: 100% }
+  .main-area { padding: 12px }
+}
+</style>
\ No newline at end of file
diff --git a/src/renderer/views/home/MessageList.vue b/src/renderer/views/home/MessageList.vue
new file mode 100644
index 0000000..c246314
--- /dev/null
+++ b/src/renderer/views/home/MessageList.vue
@@ -0,0 +1,198 @@
+<template>
+	<aside class="msg-list">
+		<header class="msg-list__header">
+			<div class="brand">
+        <img class="logo" src="@assets/images/login/white_logo.png"/>
+				<div class="title">YINIAN</div>
+			</div>
+		</header>
+		<div class="new-row">
+			<button class="new-btn">＋ 新对话</button>
+		</div>
+
+		<div class="sections">
+			<section v-for="group in groups" :key="group.title" class="group">
+				<div class="group__title">
+					<span>{{ group.title }}</span>
+					<span class="toggle">▾</span>
+				</div>
+
+				<ul class="items">
+					<li v-for="item in group.items" :key="item.id" :class="['item', { active: item.id === selectedId }]" @click="select(item.id)">
+						<span class="dot"></span>
+						<div class="content">
+							<div class="text">{{ item.title }}</div>
+						</div>
+						<button v-if="item.id === selectedId" class="more">…</button>
+					</li>
+				</ul>
+			</section>
+		</div>
+	</aside>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const selectedId = ref<number | null>(2)
+
+const groups = ref([
+	{
+		title: '近3天',
+		items: [
+			{ id: 1, title: '这是一段对话' },
+			{ id: 2, title: '这是一段对话' },
+			{ id: 3, title: '这是一段对话这是一段对话这是一段对话' },
+			{ id: 4, title: '这是一段对话这是一段对话' },
+			{ id: 5, title: '这是一段对话这是一段对话' }
+		]
+	},
+	{
+		title: '近7天',
+		items: [
+			{ id: 6, title: '这是一段对话' },
+			{ id: 7, title: '这是一段对话' },
+			{ id: 8, title: '这是一段对话这是一段对话' },
+			{ id: 9, title: '这是一段对话这是一段对话' }
+		]
+  },
+  {
+		title: '近15天',
+		items: [
+			{ id: 1, title: '这是一段对话' },
+			{ id: 2, title: '这是一段对话' },
+			{ id: 3, title: '这是一段对话这是一段对话这是一段对话' },
+			{ id: 4, title: '这是一段对话这是一段对话' },
+			{ id: 5, title: '这是一段对话这是一段对话' }
+		]
+	},
+	{
+		title: '近30天',
+		items: [
+			{ id: 6, title: '这是一段对话' },
+			{ id: 7, title: '这是一段对话' },
+			{ id: 8, title: '这是一段对话这是一段对话' },
+			{ id: 9, title: '这是一段对话这是一段对话' }
+		]
+  },
+  {
+		title: '近60天',
+		items: [
+			{ id: 1, title: '这是一段对话' },
+			{ id: 2, title: '这是一段对话' },
+			{ id: 3, title: '这是一段对话这是一段对话这是一段对话' },
+			{ id: 4, title: '这是一段对话这是一段对话' },
+			{ id: 5, title: '这是一段对话这是一段对话' }
+		]
+	},
+	{
+		title: '近90天',
+		items: [
+			{ id: 6, title: '这是一段对话' },
+			{ id: 7, title: '这是一段对话' },
+			{ id: 8, title: '这是一段对话这是一段对话' },
+			{ id: 9, title: '这是一段对话这是一段对话' }
+		]
+  },
+])
+
+function select(id: number) {
+	selectedId.value = id
+}
+</script>
+
+<style scoped>
+:root {
+	--bg: red;
+	--muted: #1c4b7d;
+	--dot: #BEDBFF;
+	--border: #E5E6EB;
+	--active-bg: #ffffff;
+	--accent: #4fc3f7;
+}
+.msg-list {
+	width: 260px;
+	height: 100vh;
+	background: var(--bg);
+	padding: 16px;
+	box-sizing: border-box;
+	display: flex;
+	flex-direction: column;
+}
+.msg-list__header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: 12px;
+}
+.brand {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+.logo {
+	width: 40px;
+	height: 40px;
+	border-radius: 8px;
+	object-fit:cover;
+}
+.title { font-weight:700; color:#2b2f33 }
+.chev { color:var(--muted); transform: rotate(180deg); font-size:14px }
+.new-btn {
+	background: white;
+	border-radius: 8px;
+	padding: 8px 12px;
+	border: none;
+	box-shadow: 0 1px 0 rgba(0,0,0,0.04);
+	cursor: pointer;
+}
+
+.new-row { margin: 12px }
+.new-row .new-btn { width: 100%; display: block; text-align: center; border: 1px solid #E5E6EB; }
+
+.sections { overflow-y: auto; padding-right: 6px }
+.group { margin-bottom: 12px }
+.group__title {
+	color: var(--muted);
+	font-size: 13px;
+	display:flex;
+	align-items:center;
+	justify-content: space-between;
+	padding: 8px 2px;
+}
+.items { list-style:none; padding: 4px 0; margin:0 }
+.item {
+	display:flex;
+	align-items:center;
+	gap:8px;
+	padding: 10px 8px;
+	color:#4a5560;
+	border-radius: 8px;
+	cursor: pointer;
+	transition: background .12s;
+}
+.item:not(.active):hover { background: rgba(0,0,0,0.02) }
+.item.active { background: var(--active-bg); box-shadow: 0 4px 8px rgba(17,24,39,0.06); border: 1px solid #E5E6EB; }
+.dot {
+	width:8px;
+	height:8px;
+	border-radius:50%;
+	background: #BEDBFF;
+	flex: 0 0 8px;
+}
+.content { flex:1; min-width:0 }
+.text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size:14px }
+.more {
+	background: transparent;
+	border: none;
+	color: var(--muted);
+	font-size: 18px;
+	padding: 4px 6px;
+	cursor: pointer;
+}
+
+/* scrollbar small */
+.sections::-webkit-scrollbar { width: 8px }
+.sections::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.05); border-radius: 8px }
+
+</style>