From 917feb1c8cf6a7123ab71c6898434c911153895a Mon Sep 17 00:00:00 2001 From: ViperEkura <3081035982@qq.com> Date: Fri, 27 Mar 2026 00:42:38 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96UI=E5=B9=B6=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0=E4=BB=A3=E7=A0=81=E7=BC=96=E8=BE=91=E5=99=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 3 +- backend/routes/messages.py | 2 + frontend/package-lock.json | 471 ++++++++++++++++++++++ frontend/package.json | 15 + frontend/src/App.vue | 144 +------ frontend/src/components/ChatView.vue | 12 +- frontend/src/components/CodeEditor.vue | 168 ++++++++ frontend/src/components/FileExplorer.vue | 152 ++----- frontend/src/components/FileTreeItem.vue | 4 - frontend/src/components/MessageBubble.vue | 6 +- frontend/src/components/MessageInput.vue | 14 +- frontend/src/components/ProcessBlock.vue | 6 +- frontend/src/components/StatsPanel.vue | 7 +- frontend/src/styles/global.css | 37 +- 14 files changed, 752 insertions(+), 289 deletions(-) create mode 100644 frontend/src/components/CodeEditor.vue diff --git a/README.md b/README.md index 163c2df..7fe42f7 100644 --- a/README.md +++ b/README.md @@ -10,6 +10,7 @@ - 📁 **工作目录** - 项目级文件隔离，安全操作 - 📊 **Token 统计** - 按日/周/月统计使用量 - 🔄 **流式响应** - 实时 SSE 流式输出 +- 📝 **代码编辑器** - 基于 CodeMirror 6，支持 15+ 语言语法高亮和暗色主题 - 💾 **多数据库** - 支持 MySQL、SQLite、PostgreSQL ## 快速开始 @@ -157,5 +158,5 @@ frontend/ ## 技术栈 - **后端**: Python 3.11+, Flask, SQLAlchemy -- **前端**: Vue 3, Vite +- **前端**: Vue 3, Vite, CodeMirror 6 - **LLM**: 支持 GLM 等大语言模型 diff --git a/backend/routes/messages.py b/backend/routes/messages.py index ff43b4c..fc60d46 100644 --- a/backend/routes/messages.py +++ b/backend/routes/messages.py @@ -85,6 +85,8 @@ def delete_message(conv_id, msg_id): conv = _get_conv(conv_id) if not conv: return err(404, "conversation not found") + if msg_id.startswith("temp_"): + return ok(message="deleted") msg = db.session.get(Message, msg_id) if not msg or msg.conversation_id != conv_id: return err(404, "message not found") diff --git a/frontend/package-lock.json b/frontend/package-lock.json index ea5c58d..1e07102 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -8,6 +8,21 @@ "name": "nano-claw", "version": "0.1.0", "dependencies": { + "@codemirror/lang-cpp": "^6.0.2", + "@codemirror/lang-css": "^6.3.1", + "@codemirror/lang-go": "^6.0.1", + "@codemirror/lang-html": "^6.4.9", + "@codemirror/lang-java": "^6.0.1", + "@codemirror/lang-javascript": "^6.2.3", + "@codemirror/lang-json": "^6.0.1", + "@codemirror/lang-markdown": "^6.3.2", + "@codemirror/lang-python": "^6.1.7", + "@codemirror/lang-rust": "^6.0.1", + "@codemirror/lang-sql": "^6.8.0", + "@codemirror/lang-xml": "^6.1.0", + "@codemirror/lang-yaml": "^6.1.2", + "@codemirror/theme-one-dark": "^6.1.2", + "codemirror": "^6.0.1", "highlight.js": "^11.11.1", "katex": "^0.16.40", "marked": "^15.0.12", @@ -66,6 +81,268 @@ "node": ">=6.9.0" } }, + "node_modules/@codemirror/autocomplete": { + "version": "6.20.1", + "resolved": "https://registry.npmmirror.com/@codemirror/autocomplete/-/autocomplete-6.20.1.tgz", + "integrity": "sha512-1cvg3Vz1dSSToCNlJfRA2WSI4ht3K+WplO0UMOgmUYPivCyy2oueZY6Lx7M9wThm7SDUBViRmuT+OG/i8+ON9A==", + "license": "MIT", + "dependencies": { + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.17.0", + "@lezer/common": "^1.0.0" + } + }, + "node_modules/@codemirror/commands": { + "version": "6.10.3", + "resolved": "https://registry.npmmirror.com/@codemirror/commands/-/commands-6.10.3.tgz", + "integrity": "sha512-JFRiqhKu+bvSkDLI+rUhJwSxQxYb759W5GBezE8Uc8mHLqC9aV/9aTC7yJSqCtB3F00pylrLCwnyS91Ap5ej4Q==", + "license": "MIT", + "dependencies": { + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.6.0", + "@codemirror/view": "^6.27.0", + "@lezer/common": "^1.1.0" + } + }, + "node_modules/@codemirror/lang-cpp": { + "version": "6.0.3", + "resolved": "https://registry.npmmirror.com/@codemirror/lang-cpp/-/lang-cpp-6.0.3.tgz", + "integrity": "sha512-URM26M3vunFFn9/sm6rzqrBzDgfWuDixp85uTY49wKudToc2jTHUrKIGGKs+QWND+YLofNNZpxcNGRynFJfvgA==", + "license": "MIT", + "dependencies": { + "@codemirror/language": "^6.0.0", + "@lezer/cpp": "^1.0.0" + } + }, + "node_modules/@codemirror/lang-css": { + "version": "6.3.1", + "resolved": "https://registry.npmmirror.com/@codemirror/lang-css/-/lang-css-6.3.1.tgz", + "integrity": "sha512-kr5fwBGiGtmz6l0LSJIbno9QrifNMUusivHbnA1H6Dmqy4HZFte3UAICix1VuKo0lMPKQr2rqB+0BkKi/S3Ejg==", + "license": "MIT", + "dependencies": { + "@codemirror/autocomplete": "^6.0.0", + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@lezer/common": "^1.0.2", + "@lezer/css": "^1.1.7" + } + }, + "node_modules/@codemirror/lang-go": { + "version": "6.0.1", + "resolved": "https://registry.npmmirror.com/@codemirror/lang-go/-/lang-go-6.0.1.tgz", + "integrity": "sha512-7fNvbyNylvqCphW9HD6WFnRpcDjr+KXX/FgqXy5H5ZS0eC5edDljukm/yNgYkwTsgp2busdod50AOTIy6Jikfg==", + "license": "MIT", + "dependencies": { + "@codemirror/autocomplete": "^6.0.0", + "@codemirror/language": "^6.6.0", + "@codemirror/state": "^6.0.0", + "@lezer/common": "^1.0.0", + "@lezer/go": "^1.0.0" + } + }, + "node_modules/@codemirror/lang-html": { + "version": "6.4.11", + "resolved": "https://registry.npmmirror.com/@codemirror/lang-html/-/lang-html-6.4.11.tgz", + "integrity": "sha512-9NsXp7Nwp891pQchI7gPdTwBuSuT3K65NGTHWHNJ55HjYcHLllr0rbIZNdOzas9ztc1EUVBlHou85FFZS4BNnw==", + "license": "MIT", + "dependencies": { + "@codemirror/autocomplete": "^6.0.0", + "@codemirror/lang-css": "^6.0.0", + "@codemirror/lang-javascript": "^6.0.0", + "@codemirror/language": "^6.4.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.17.0", + "@lezer/common": "^1.0.0", + "@lezer/css": "^1.1.0", + "@lezer/html": "^1.3.12" + } + }, + "node_modules/@codemirror/lang-java": { + "version": "6.0.2", + "resolved": "https://registry.npmmirror.com/@codemirror/lang-java/-/lang-java-6.0.2.tgz", + "integrity": "sha512-m5Nt1mQ/cznJY7tMfQTJchmrjdjQ71IDs+55d1GAa8DGaB8JXWsVCkVT284C3RTASaY43YknrK2X3hPO/J3MOQ==", + "license": "MIT", + "dependencies": { + "@codemirror/language": "^6.0.0", + "@lezer/java": "^1.0.0" + } + }, + "node_modules/@codemirror/lang-javascript": { + "version": "6.2.5", + "resolved": "https://registry.npmmirror.com/@codemirror/lang-javascript/-/lang-javascript-6.2.5.tgz", + "integrity": "sha512-zD4e5mS+50htS7F+TYjBPsiIFGanfVqg4HyUz6WNFikgOPf2BgKlx+TQedI1w6n/IqRBVBbBWmGFdLB/7uxO4A==", + "license": "MIT", + "dependencies": { + "@codemirror/autocomplete": "^6.0.0", + "@codemirror/language": "^6.6.0", + "@codemirror/lint": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.17.0", + "@lezer/common": "^1.0.0", + "@lezer/javascript": "^1.0.0" + } + }, + "node_modules/@codemirror/lang-json": { + "version": "6.0.2", + "resolved": "https://registry.npmmirror.com/@codemirror/lang-json/-/lang-json-6.0.2.tgz", + "integrity": "sha512-x2OtO+AvwEHrEwR0FyyPtfDUiloG3rnVTSZV1W8UteaLL8/MajQd8DpvUb2YVzC+/T18aSDv0H9mu+xw0EStoQ==", + "license": "MIT", + "dependencies": { + "@codemirror/language": "^6.0.0", + "@lezer/json": "^1.0.0" + } + }, + "node_modules/@codemirror/lang-markdown": { + "version": "6.5.0", + "resolved": "https://registry.npmmirror.com/@codemirror/lang-markdown/-/lang-markdown-6.5.0.tgz", + "integrity": "sha512-0K40bZ35jpHya6FriukbgaleaqzBLZfOh7HuzqbMxBXkbYMJDxfF39c23xOgxFezR+3G+tR2/Mup+Xk865OMvw==", + "license": "MIT", + "dependencies": { + "@codemirror/autocomplete": "^6.7.1", + "@codemirror/lang-html": "^6.0.0", + "@codemirror/language": "^6.3.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "@lezer/common": "^1.2.1", + "@lezer/markdown": "^1.0.0" + } + }, + "node_modules/@codemirror/lang-python": { + "version": "6.2.1", + "resolved": "https://registry.npmmirror.com/@codemirror/lang-python/-/lang-python-6.2.1.tgz", + "integrity": "sha512-IRjC8RUBhn9mGR9ywecNhB51yePWCGgvHfY1lWN/Mrp3cKuHr0isDKia+9HnvhiWNnMpbGhWrkhuWOc09exRyw==", + "license": "MIT", + "dependencies": { + "@codemirror/autocomplete": "^6.3.2", + "@codemirror/language": "^6.8.0", + "@codemirror/state": "^6.0.0", + "@lezer/common": "^1.2.1", + "@lezer/python": "^1.1.4" + } + }, + "node_modules/@codemirror/lang-rust": { + "version": "6.0.2", + "resolved": "https://registry.npmmirror.com/@codemirror/lang-rust/-/lang-rust-6.0.2.tgz", + "integrity": "sha512-EZaGjCUegtiU7kSMvOfEZpaCReowEf3yNidYu7+vfuGTm9ow4mthAparY5hisJqOHmJowVH3Upu+eJlUji6qqA==", + "license": "MIT", + "dependencies": { + "@codemirror/language": "^6.0.0", + "@lezer/rust": "^1.0.0" + } + }, + "node_modules/@codemirror/lang-sql": { + "version": "6.10.0", + "resolved": "https://registry.npmmirror.com/@codemirror/lang-sql/-/lang-sql-6.10.0.tgz", + "integrity": "sha512-6ayPkEd/yRw0XKBx5uAiToSgGECo/GY2NoJIHXIIQh1EVwLuKoU8BP/qK0qH5NLXAbtJRLuT73hx7P9X34iO4w==", + "license": "MIT", + "dependencies": { + "@codemirror/autocomplete": "^6.0.0", + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@lezer/common": "^1.2.0", + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "node_modules/@codemirror/lang-xml": { + "version": "6.1.0", + "resolved": "https://registry.npmmirror.com/@codemirror/lang-xml/-/lang-xml-6.1.0.tgz", + "integrity": "sha512-3z0blhicHLfwi2UgkZYRPioSgVTo9PV5GP5ducFH6FaHy0IAJRg+ixj5gTR1gnT/glAIC8xv4w2VL1LoZfs+Jg==", + "license": "MIT", + "dependencies": { + "@codemirror/autocomplete": "^6.0.0", + "@codemirror/language": "^6.4.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "@lezer/common": "^1.0.0", + "@lezer/xml": "^1.0.0" + } + }, + "node_modules/@codemirror/lang-yaml": { + "version": "6.1.3", + "resolved": "https://registry.npmmirror.com/@codemirror/lang-yaml/-/lang-yaml-6.1.3.tgz", + "integrity": "sha512-AZ8DJBuXGVHybpBQhmZtgew5//4hv3tdkXnr3vDmOUMJRuB6vn/uuwtmTOTlqEaQFg3hQSVeA90NmvIQyUV6FQ==", + "license": "MIT", + "dependencies": { + "@codemirror/autocomplete": "^6.0.0", + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@lezer/common": "^1.2.0", + "@lezer/highlight": "^1.2.0", + "@lezer/lr": "^1.0.0", + "@lezer/yaml": "^1.0.0" + } + }, + "node_modules/@codemirror/language": { + "version": "6.12.3", + "resolved": "https://registry.npmmirror.com/@codemirror/language/-/language-6.12.3.tgz", + "integrity": "sha512-QwCZW6Tt1siP37Jet9Tb02Zs81TQt6qQrZR2H+eGMcFsL1zMrk2/b9CLC7/9ieP1fjIUMgviLWMmgiHoJrj+ZA==", + "license": "MIT", + "dependencies": { + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.23.0", + "@lezer/common": "^1.5.0", + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0", + "style-mod": "^4.0.0" + } + }, + "node_modules/@codemirror/lint": { + "version": "6.9.5", + "resolved": "https://registry.npmmirror.com/@codemirror/lint/-/lint-6.9.5.tgz", + "integrity": "sha512-GElsbU9G7QT9xXhpUg1zWGmftA/7jamh+7+ydKRuT0ORpWS3wOSP0yT1FOlIZa7mIJjpVPipErsyvVqB9cfTFA==", + "license": "MIT", + "dependencies": { + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.35.0", + "crelt": "^1.0.5" + } + }, + "node_modules/@codemirror/search": { + "version": "6.6.0", + "resolved": "https://registry.npmmirror.com/@codemirror/search/-/search-6.6.0.tgz", + "integrity": "sha512-koFuNXcDvyyotWcgOnZGmY7LZqEOXZaaxD/j6n18TCLx2/9HieZJ5H6hs1g8FiRxBD0DNfs0nXn17g872RmYdw==", + "license": "MIT", + "dependencies": { + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.37.0", + "crelt": "^1.0.5" + } + }, + "node_modules/@codemirror/state": { + "version": "6.6.0", + "resolved": "https://registry.npmmirror.com/@codemirror/state/-/state-6.6.0.tgz", + "integrity": "sha512-4nbvra5R5EtiCzr9BTHiTLc+MLXK2QGiAVYMyi8PkQd3SR+6ixar/Q/01Fa21TBIDOZXgeWV4WppsQolSreAPQ==", + "license": "MIT", + "dependencies": { + "@marijn/find-cluster-break": "^1.0.0" + } + }, + "node_modules/@codemirror/theme-one-dark": { + "version": "6.1.3", + "resolved": "https://registry.npmmirror.com/@codemirror/theme-one-dark/-/theme-one-dark-6.1.3.tgz", + "integrity": "sha512-NzBdIvEJmx6fjeremiGp3t/okrLPYT0d9orIc7AFun8oZcRk58aejkqhv6spnz4MLAevrKNPMQYXEWMg4s+sKA==", + "license": "MIT", + "dependencies": { + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "@lezer/highlight": "^1.0.0" + } + }, + "node_modules/@codemirror/view": { + "version": "6.40.0", + "resolved": "https://registry.npmmirror.com/@codemirror/view/-/view-6.40.0.tgz", + "integrity": "sha512-WA0zdU7xfF10+5I3HhUUq3kqOx3KjqmtQ9lqZjfK7jtYk4G72YW9rezcSywpaUMCWOMlq+6E0pO1IWg1TNIhtg==", + "license": "MIT", + "dependencies": { + "@codemirror/state": "^6.6.0", + "crelt": "^1.0.6", + "style-mod": "^4.1.0", + "w3c-keyname": "^2.2.4" + } + }, "node_modules/@esbuild/aix-ppc64": { "version": "0.25.12", "resolved": "https://registry.npmmirror.com/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz", @@ -514,6 +791,167 @@ "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==", "license": "MIT" }, + "node_modules/@lezer/common": { + "version": "1.5.1", + "resolved": "https://registry.npmmirror.com/@lezer/common/-/common-1.5.1.tgz", + "integrity": "sha512-6YRVG9vBkaY7p1IVxL4s44n5nUnaNnGM2/AckNgYOnxTG2kWh1vR8BMxPseWPjRNpb5VtXnMpeYAEAADoRV1Iw==", + "license": "MIT" + }, + "node_modules/@lezer/cpp": { + "version": "1.1.5", + "resolved": "https://registry.npmmirror.com/@lezer/cpp/-/cpp-1.1.5.tgz", + "integrity": "sha512-DIhSXmYtJKLehrjzDFN+2cPt547ySQ41nA8yqcDf/GxMc+YM736xqltFkvADL2M0VebU5I+3+4ks2Vv+Kyq3Aw==", + "license": "MIT", + "dependencies": { + "@lezer/common": "^1.2.0", + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "node_modules/@lezer/css": { + "version": "1.3.3", + "resolved": "https://registry.npmmirror.com/@lezer/css/-/css-1.3.3.tgz", + "integrity": "sha512-RzBo8r+/6QJeow7aPHIpGVIH59xTcJXp399820gZoMo9noQDRVpJLheIBUicYwKcsbOYoBRoLZlf2720dG/4Tg==", + "license": "MIT", + "dependencies": { + "@lezer/common": "^1.2.0", + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.3.0" + } + }, + "node_modules/@lezer/go": { + "version": "1.0.1", + "resolved": "https://registry.npmmirror.com/@lezer/go/-/go-1.0.1.tgz", + "integrity": "sha512-xToRsYxwsgJNHTgNdStpcvmbVuKxTapV0dM0wey1geMMRc9aggoVyKgzYp41D2/vVOx+Ii4hmE206kvxIXBVXQ==", + "license": "MIT", + "dependencies": { + "@lezer/common": "^1.2.0", + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.3.0" + } + }, + "node_modules/@lezer/highlight": { + "version": "1.2.3", + "resolved": "https://registry.npmmirror.com/@lezer/highlight/-/highlight-1.2.3.tgz", + "integrity": "sha512-qXdH7UqTvGfdVBINrgKhDsVTJTxactNNxLk7+UMwZhU13lMHaOBlJe9Vqp907ya56Y3+ed2tlqzys7jDkTmW0g==", + "license": "MIT", + "dependencies": { + "@lezer/common": "^1.3.0" + } + }, + "node_modules/@lezer/html": { + "version": "1.3.13", + "resolved": "https://registry.npmmirror.com/@lezer/html/-/html-1.3.13.tgz", + "integrity": "sha512-oI7n6NJml729m7pjm9lvLvmXbdoMoi2f+1pwSDJkl9d68zGr7a9Btz8NdHTGQZtW2DA25ybeuv/SyDb9D5tseg==", + "license": "MIT", + "dependencies": { + "@lezer/common": "^1.2.0", + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "node_modules/@lezer/java": { + "version": "1.1.3", + "resolved": "https://registry.npmmirror.com/@lezer/java/-/java-1.1.3.tgz", + "integrity": "sha512-yHquUfujwg6Yu4Fd1GNHCvidIvJwi/1Xu2DaKl/pfWIA2c1oXkVvawH3NyXhCaFx4OdlYBVX5wvz2f7Aoa/4Xw==", + "license": "MIT", + "dependencies": { + "@lezer/common": "^1.2.0", + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "node_modules/@lezer/javascript": { + "version": "1.5.4", + "resolved": "https://registry.npmmirror.com/@lezer/javascript/-/javascript-1.5.4.tgz", + "integrity": "sha512-vvYx3MhWqeZtGPwDStM2dwgljd5smolYD2lR2UyFcHfxbBQebqx8yjmFmxtJ/E6nN6u1D9srOiVWm3Rb4tmcUA==", + "license": "MIT", + "dependencies": { + "@lezer/common": "^1.2.0", + "@lezer/highlight": "^1.1.3", + "@lezer/lr": "^1.3.0" + } + }, + "node_modules/@lezer/json": { + "version": "1.0.3", + "resolved": "https://registry.npmmirror.com/@lezer/json/-/json-1.0.3.tgz", + "integrity": "sha512-BP9KzdF9Y35PDpv04r0VeSTKDeox5vVr3efE7eBbx3r4s3oNLfunchejZhjArmeieBH+nVOpgIiBJpEAv8ilqQ==", + "license": "MIT", + "dependencies": { + "@lezer/common": "^1.2.0", + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "node_modules/@lezer/lr": { + "version": "1.4.8", + "resolved": "https://registry.npmmirror.com/@lezer/lr/-/lr-1.4.8.tgz", + "integrity": "sha512-bPWa0Pgx69ylNlMlPvBPryqeLYQjyJjqPx+Aupm5zydLIF3NE+6MMLT8Yi23Bd9cif9VS00aUebn+6fDIGBcDA==", + "license": "MIT", + "dependencies": { + "@lezer/common": "^1.0.0" + } + }, + "node_modules/@lezer/markdown": { + "version": "1.6.3", + "resolved": "https://registry.npmmirror.com/@lezer/markdown/-/markdown-1.6.3.tgz", + "integrity": "sha512-jpGm5Ps+XErS+xA4urw7ogEGkeZOahVQF21Z6oECF0sj+2liwZopd2+I8uH5I/vZsRuuze3OxBREIANLf6KKUw==", + "license": "MIT", + "dependencies": { + "@lezer/common": "^1.5.0", + "@lezer/highlight": "^1.0.0" + } + }, + "node_modules/@lezer/python": { + "version": "1.1.18", + "resolved": "https://registry.npmmirror.com/@lezer/python/-/python-1.1.18.tgz", + "integrity": "sha512-31FiUrU7z9+d/ElGQLJFXl+dKOdx0jALlP3KEOsGTex8mvj+SoE1FgItcHWK/axkxCHGUSpqIHt6JAWfWu9Rhg==", + "license": "MIT", + "dependencies": { + "@lezer/common": "^1.2.0", + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "node_modules/@lezer/rust": { + "version": "1.0.2", + "resolved": "https://registry.npmmirror.com/@lezer/rust/-/rust-1.0.2.tgz", + "integrity": "sha512-Lz5sIPBdF2FUXcWeCu1//ojFAZqzTQNRga0aYv6dYXqJqPfMdCAI0NzajWUd4Xijj1IKJLtjoXRPMvTKWBcqKg==", + "license": "MIT", + "dependencies": { + "@lezer/common": "^1.2.0", + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "node_modules/@lezer/xml": { + "version": "1.0.6", + "resolved": "https://registry.npmmirror.com/@lezer/xml/-/xml-1.0.6.tgz", + "integrity": "sha512-CdDwirL0OEaStFue/66ZmFSeppuL6Dwjlk8qk153mSQwiSH/Dlri4GNymrNWnUmPl2Um7QfV1FO9KFUyX3Twww==", + "license": "MIT", + "dependencies": { + "@lezer/common": "^1.2.0", + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "node_modules/@lezer/yaml": { + "version": "1.0.4", + "resolved": "https://registry.npmmirror.com/@lezer/yaml/-/yaml-1.0.4.tgz", + "integrity": "sha512-2lrrHqxalACEbxIbsjhqGpSW8kWpUKuY6RHgnSAFZa6qK62wvnPxA8hGOwOoDbwHcOFs5M4o27mjGu+P7TvBmw==", + "license": "MIT", + "dependencies": { + "@lezer/common": "^1.2.0", + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.4.0" + } + }, + "node_modules/@marijn/find-cluster-break": { + "version": "1.0.2", + "resolved": "https://registry.npmmirror.com/@marijn/find-cluster-break/-/find-cluster-break-1.0.2.tgz", + "integrity": "sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==", + "license": "MIT" + }, "node_modules/@rollup/rollup-android-arm-eabi": { "version": "4.60.0", "resolved": "https://registry.npmmirror.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.60.0.tgz", @@ -992,6 +1430,21 @@ "dev": true, "license": "Python-2.0" }, + "node_modules/codemirror": { + "version": "6.0.2", + "resolved": "https://registry.npmmirror.com/codemirror/-/codemirror-6.0.2.tgz", + "integrity": "sha512-VhydHotNW5w1UGK0Qj96BwSk/Zqbp9WbnyK2W/eVMv4QyF41INRGpjUhFJY7/uDNuudSc33a/PKr4iDqRduvHw==", + "license": "MIT", + "dependencies": { + "@codemirror/autocomplete": "^6.0.0", + "@codemirror/commands": "^6.0.0", + "@codemirror/language": "^6.0.0", + "@codemirror/lint": "^6.0.0", + "@codemirror/search": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0" + } + }, "node_modules/commander": { "version": "8.3.0", "resolved": "https://registry.npmmirror.com/commander/-/commander-8.3.0.tgz", @@ -1001,6 +1454,12 @@ "node": ">= 12" } }, + "node_modules/crelt": { + "version": "1.0.6", + "resolved": "https://registry.npmmirror.com/crelt/-/crelt-1.0.6.tgz", + "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==", + "license": "MIT" + }, "node_modules/csstype": { "version": "3.2.3", "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.2.3.tgz", @@ -1287,6 +1746,12 @@ "node": ">=0.10.0" } }, + "node_modules/style-mod": { + "version": "4.1.3", + "resolved": "https://registry.npmmirror.com/style-mod/-/style-mod-4.1.3.tgz", + "integrity": "sha512-i/n8VsZydrugj3Iuzll8+x/00GH2vnYsk1eomD8QiRrSAeW6ItbCQDtfXCeJHd0iwiNagqjQkvpvREEPtW3IoQ==", + "license": "MIT" + }, "node_modules/tinyglobby": { "version": "0.2.15", "resolved": "https://registry.npmmirror.com/tinyglobby/-/tinyglobby-0.2.15.tgz", @@ -1399,6 +1864,12 @@ "optional": true } } + }, + "node_modules/w3c-keyname": { + "version": "2.2.8", + "resolved": "https://registry.npmmirror.com/w3c-keyname/-/w3c-keyname-2.2.8.tgz", + "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==", + "license": "MIT" } } } diff --git a/frontend/package.json b/frontend/package.json index 9a369db..8c93b8e 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -9,6 +9,21 @@ "preview": "vite preview" }, "dependencies": { + "codemirror": "^6.0.1", + "@codemirror/theme-one-dark": "^6.1.2", + "@codemirror/lang-markdown": "^6.3.2", + "@codemirror/lang-javascript": "^6.2.3", + "@codemirror/lang-python": "^6.1.7", + "@codemirror/lang-html": "^6.4.9", + "@codemirror/lang-css": "^6.3.1", + "@codemirror/lang-json": "^6.0.1", + "@codemirror/lang-yaml": "^6.1.2", + "@codemirror/lang-java": "^6.0.1", + "@codemirror/lang-cpp": "^6.0.2", + "@codemirror/lang-rust": "^6.0.1", + "@codemirror/lang-go": "^6.0.1", + "@codemirror/lang-sql": "^6.8.0", + "@codemirror/lang-xml": "^6.1.0", "highlight.js": "^11.11.1", "katex": "^0.16.40", "marked": "^15.0.12", diff --git a/frontend/src/App.vue b/frontend/src/App.vue index f316a9d..4d8da0a 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -83,12 +83,7 @@

创建项目

- +
@@ -116,6 +111,7 @@ import { ref, shallowRef, computed, onMounted, defineAsyncComponent } from 'vue' import Sidebar from './components/Sidebar.vue' import ChatView from './components/ChatView.vue' import FileExplorer from './components/FileExplorer.vue' +import CloseButton from './components/CloseButton.vue' const SettingsPanel = defineAsyncComponent(() => import('./components/SettingsPanel.vue')) const StatsPanel = defineAsyncComponent(() => import('./components/StatsPanel.vue')) @@ -181,13 +177,10 @@ const newProjectDesc = ref('') const creatingProject = ref(false) function togglePanel(panel) { - if (panel === 'settings') { - showSettings.value = !showSettings.value - if (showSettings.value) showStats.value = false - } else { - showStats.value = !showStats.value - if (showStats.value) showSettings.value = false - } + const ref = panel === 'settings' ? showSettings : showStats + const other = panel === 'settings' ? showStats : showSettings + ref.value = !ref.value + if (ref.value) other.value = false } const currentConv = computed(() => @@ -629,31 +622,8 @@ onMounted(() => { font-size: 14px; } -.modal-overlay { - position: fixed; - inset: 0; - background: rgba(0, 0, 0, 0.5); - display: flex; - align-items: center; - justify-content: center; - z-index: 100; -} +/* modal-overlay, modal-content, btn-icon, form-group, modal-footer, btn-secondary, btn-primary now in global.css */ -.modal-content { - border-radius: 16px; - width: 90%; - max-width: 520px; - max-height: 80vh; - overflow-y: auto; - padding: 24px; - background: color-mix(in srgb, var(--bg-primary) 75%, transparent); - backdrop-filter: blur(40px); - -webkit-backdrop-filter: blur(40px); - border: 1px solid var(--border-medium); - box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2); -} - -/* -- Create project modal -- */ .create-modal { background: var(--bg-primary); border: 1px solid var(--border-medium); @@ -662,104 +632,4 @@ onMounted(() => { max-width: 440px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); } - -.btn-icon { - display: flex; - align-items: center; - justify-content: center; - width: 28px; - height: 28px; - border: none; - background: none; - color: var(--text-tertiary); - cursor: pointer; - border-radius: 6px; - transition: all 0.15s; -} - -.btn-icon:hover { - background: var(--bg-hover); - color: var(--text-primary); -} - -.form-group { - margin-bottom: 16px; -} - -.form-group label { - display: block; - font-size: 13px; - font-weight: 500; - color: var(--text-secondary); - margin-bottom: 6px; -} - -.form-group input, -.form-group textarea { - width: 100%; - padding: 8px 12px; - background: var(--bg-secondary); - border: 1px solid var(--border-light); - border-radius: 8px; - color: var(--text-primary); - font-size: 14px; - outline: none; - box-sizing: border-box; - transition: border-color 0.2s; -} - -.form-group input:focus, -.form-group textarea:focus { - border-color: var(--accent-primary); -} - -.form-group textarea { - resize: vertical; - min-height: 60px; - font-family: inherit; -} - -.modal-footer { - display: flex; - justify-content: flex-end; - gap: 8px; - padding: 12px 20px; - border-top: 1px solid var(--border-light); -} - -.btn-secondary { - padding: 8px 16px; - background: var(--bg-secondary); - border: 1px solid var(--border-light); - border-radius: 8px; - color: var(--text-secondary); - font-size: 13px; - cursor: pointer; - transition: all 0.2s; -} - -.btn-secondary:hover { - background: var(--bg-hover); - color: var(--text-primary); -} - -.btn-primary { - padding: 8px 16px; - background: var(--accent-primary); - border: none; - border-radius: 8px; - color: #fff; - font-size: 13px; - cursor: pointer; - transition: all 0.2s; -} - -.btn-primary:hover { - opacity: 0.9; -} - -.btn-primary:disabled { - opacity: 0.5; - cursor: not-allowed; -} diff --git a/frontend/src/components/ChatView.vue b/frontend/src/components/ChatView.vue index c8f4818..04c32c3 100644 --- a/frontend/src/components/ChatView.vue +++ b/frontend/src/components/ChatView.vue @@ -260,12 +260,14 @@ watch(() => props.conversation?.id, () => { } .thinking-badge { - background: var(--success-bg); - color: var(--success-color); + background: rgba(245, 158, 11, 0.12); + color: #d97706; } - - +[data-theme="dark"] .thinking-badge { + background: rgba(245, 158, 11, 0.18); + color: #fbbf24; +} .messages-container { flex: 1 1 auto; @@ -309,7 +311,7 @@ watch(() => props.conversation?.id, () => { padding: 0 16px; } -/* .message-bubble, .avatar, .message-body now in global.css */ + diff --git a/frontend/src/components/CodeEditor.vue b/frontend/src/components/CodeEditor.vue new file mode 100644 index 0000000..80ca75c --- /dev/null +++ b/frontend/src/components/CodeEditor.vue @@ -0,0 +1,168 @@ + + + + + diff --git a/frontend/src/components/FileExplorer.vue b/frontend/src/components/FileExplorer.vue index acb1e27..6af512b 100644 --- a/frontend/src/components/FileExplorer.vue +++ b/frontend/src/components/FileExplorer.vue @@ -54,9 +54,9 @@
- + {{ seg }} - / + /
@@ -93,17 +93,14 @@ {{ fileError }}
- -
- - + :filename="activeFile" + :dark="isDark" + @save="saveFile" + />
@@ -130,19 +127,19 @@ import { ref, computed, watch, onMounted, onUnmounted } from 'vue' import { projectApi } from '../api' import FileTreeItem from './FileTreeItem.vue' -import { renderMarkdown } from '../utils/markdown' +import CodeEditor from './CodeEditor.vue' import { normalizeFileTree } from '../utils/fileTree' +import { useTheme } from '../composables/useTheme' const IMAGE_EXTS = new Set(['png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp', 'svg', 'ico']) -// Treat all text/code files as markdown (code blocks in ``` get auto-highlighted) -// For pure code files without markdown, wrap in code fence - const props = defineProps({ projectId: { type: String, required: true }, projectName: { type: String, default: '' }, }) +const { isDark } = useTheme() + // -- Tree state -- const treeItems = ref([]) const loadingTree = ref(false) @@ -153,13 +150,14 @@ const fileError = ref('') const loadingFile = ref(false) const editContent = ref('') const saving = ref(false) -const editorRef = ref(null) const imageUrl = ref('') -// -- File type detection -- -const isMarkdownFile = computed(() => { - return ['md', 'markdown', 'mdx'].includes(fileExt.value) -}) +function releaseImageUrl() { + if (imageUrl.value) { + URL.revokeObjectURL(imageUrl.value) + imageUrl.value = '' + } +} const fileExt = computed(() => { if (!activeFile.value) return '' @@ -167,28 +165,16 @@ const fileExt = computed(() => { return parts.length > 1 ? parts.pop().toLowerCase() : '' }) +const breadcrumbSegments = computed(() => { + if (!activeFile.value) return [] + return activeFile.value.split('/') +}) + const fileType = computed(() => { if (IMAGE_EXTS.has(fileExt.value)) return 'image' return 'text' }) -// -- Content rendering -- -const editorHighlighted = computed(() => { - if (!editContent.value) return '' - if (isMarkdownFile.value) return renderMarkdown(editContent.value) - const lang = fileExt.value || '' - return renderMarkdown('```' + lang + '\n' + editContent.value + '\n```') -}) - -function syncScroll() { - const ta = editorRef.value - const pre = ta?.previousElementSibling - if (pre) { - pre.scrollTop = ta.scrollTop - pre.scrollLeft = ta.scrollLeft - } -} - async function loadTree(path = '') { loadingTree.value = true try { @@ -205,7 +191,7 @@ async function openFile(filepath) { activeFile.value = filepath fileError.value = '' editContent.value = '' - imageUrl.value = '' + releaseImageUrl() loadingFile.value = true const ext = filepath.split('.').pop().toLowerCase() @@ -281,13 +267,6 @@ async function createNewFolder() { } } -function onEditorKeydown(e) { - if (e.key === 's' && (e.ctrlKey || e.metaKey)) { - e.preventDefault() - saveFile() - } -} - // Ctrl+S global shortcut function onGlobalKeydown(e) { if (e.key === 's' && (e.ctrlKey || e.metaKey) && activeFile.value) { @@ -299,7 +278,7 @@ function onGlobalKeydown(e) { watch(() => props.projectId, () => { activeFile.value = null editContent.value = '' - imageUrl.value = '' + releaseImageUrl() loadTree() }) @@ -310,6 +289,7 @@ onMounted(() => { onUnmounted(() => { document.removeEventListener('keydown', onGlobalKeydown) + releaseImageUrl() }) @@ -459,6 +439,7 @@ onUnmounted(() => { display: flex; gap: 2px; flex-shrink: 0; + align-items: center; } .viewer-loading { @@ -480,31 +461,6 @@ onUnmounted(() => { font-size: 13px; } - - - -.file-editor { - flex: 1; - resize: none; - border: none; - outline: none; - color: var(--text-primary); - background: var(--bg-code); - tab-size: 4; - white-space: pre; - overflow: auto; -} - -.file-editor::-webkit-scrollbar { - width: 6px; - height: 6px; -} - -.file-editor::-webkit-scrollbar-thumb { - background: var(--scrollbar-thumb); - border-radius: 3px; -} - .viewer-placeholder { flex: 1; display: flex; @@ -516,60 +472,12 @@ onUnmounted(() => { font-size: 13px; } -/* -- Editor (highlighted textarea overlay) -- */ -.editor-container { +/* -- Code pane -- */ +.code-pane { flex: 1; - display: flex; - position: relative; overflow: hidden; } -.editor-highlight { - position: absolute; - inset: 0; - margin: 0; - padding: 20px 24px; - overflow: auto; - pointer-events: none; - color: var(--text-primary); - background: transparent; - font-family: 'JetBrains Mono', 'Fira Code', monospace; - font-size: 14px; - line-height: 1.7; - white-space: pre; - tab-size: 4; -} - -/* Strip wrapper styles from markdown-rendered 
 so text aligns with textarea */
-.editor-highlight :deep(pre),
-.editor-highlight :deep(code) {
-  margin: 0;
-  padding: 0;
-  background: transparent !important;
-  border: none;
-  border-radius: 0;
-  font-size: inherit;
-  font-family: inherit;
-  line-height: inherit;
-  white-space: inherit;
-  tab-size: inherit;
-  word-wrap: normal;
-}
-
-.editor-container .file-editor {
-  position: relative;
-  z-index: 1;
-  flex: 1;
-  border: none;
-  font-family: 'JetBrains Mono', 'Fira Code', monospace;
-  font-size: 14px;
-  line-height: 1.7;
-  padding: 20px 24px;
-  color: transparent;
-  caret-color: var(--text-primary);
-  background: transparent;
-}
-
 /* -- Image viewer -- */
 .image-viewer {
   flex: 1;
diff --git a/frontend/src/components/FileTreeItem.vue b/frontend/src/components/FileTreeItem.vue
index 2f1da23..d33ffff 100644
--- a/frontend/src/components/FileTreeItem.vue
+++ b/frontend/src/components/FileTreeItem.vue
@@ -161,10 +161,6 @@ async function onClick() {
   text-overflow: ellipsis;
 }
 
-.tree-children {
-  /* no extra indent, tree-item handles it via tree-indent */
-}
-
 .tree-loading {
   padding: 4px 0 4px 40px;
   color: var(--text-tertiary);
diff --git a/frontend/src/components/MessageBubble.vue b/frontend/src/components/MessageBubble.vue
index 28aa71f..b7647c8 100644
--- a/frontend/src/components/MessageBubble.vue
+++ b/frontend/src/components/MessageBubble.vue
@@ -92,8 +92,6 @@ function copyContent() {