feat(filelib-web): 文件编辑改为模态框并集成 CodeMirror 语法高亮

hub/filelib-web/package-lock.json

@@ -7,6 +7,15 @@
     "": {
       "name": "filelib-web",
       "version": "0.1.0",
+      "dependencies": {
+        "@codemirror/lang-css": "^6.3.1",
+        "@codemirror/lang-html": "^6.4.11",
+        "@codemirror/lang-javascript": "^6.2.5",
+        "@codemirror/lang-json": "^6.0.2",
+        "@codemirror/lang-markdown": "^6.5.1",
+        "@codemirror/language": "^6.12.4",
+        "codemirror": "^6.0.2"
+      },
       "devDependencies": {
         "@sveltejs/adapter-static": "^3.0.10",
         "@sveltejs/kit": "^2.63.0",
@@ -19,6 +28,157 @@
         "vite": "^8.0.16"
       }
     },
+    "node_modules/@codemirror/autocomplete": {
+      "version": "6.20.3",
+      "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.20.3.tgz",
+      "integrity": "sha512-tlosUqb+3BbxCxZdu4tKeRghPFC+QM7q4X5YhKV2eCmPG+1r2F3f4AaSz5sCrFqUtX4Jh20VFTKecl16MgiV9g==",
+      "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.4",
+      "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.10.4.tgz",
+      "integrity": "sha512-Ryk9y9T0FFVF0cUGhAknveAyUOl/A1qReTFi+qPKtOh2Z9F4AUBz3XOrYD4ZEgZirdugVzHvd/2/Wcwy5OliTg==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.7.0",
+        "@codemirror/view": "^6.27.0",
+        "@lezer/common": "^1.1.0"
+      }
+    },
+    "node_modules/@codemirror/lang-css": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@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-html": {
+      "version": "6.4.11",
+      "resolved": "https://registry.npmjs.org/@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-javascript": {
+      "version": "6.2.5",
+      "resolved": "https://registry.npmjs.org/@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.npmjs.org/@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.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-markdown/-/lang-markdown-6.5.1.tgz",
+      "integrity": "sha512-6re5avCNfyRMIoi3XNjbEfQM1vTeVD3JS3g/Fyegyso/eoANFM71Cyvbb66LDyYtQLMEcRFlzioywCqDo9SlLA==",
+      "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/language": {
+      "version": "6.12.4",
+      "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.12.4.tgz",
+      "integrity": "sha512-1q4PaT+o6PbgpkJt4Q8Fv5XJxTy4FUZ4MWETtyiDw3J0Pyr9E2vqcKL+k9wcvjNTIsauxvE7OfmWj3FRPHQ76A==",
+      "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.7",
+      "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.9.7.tgz",
+      "integrity": "sha512-28/+iWLYxKxsvGYhSYL7zaCZqLz5+FFFDq9tVsvGv9kv8RY4fFAchJ5WX9M3YrrRlTIsECjsXPqeNgnSmNP2dg==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.42.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "node_modules/@codemirror/search": {
+      "version": "6.7.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.7.1.tgz",
+      "integrity": "sha512-uMe5UO6PamJtSHrXhhHOzSX3ReWtiJrva6GnPMwSOrZtiExb5X5eExhr2OUZQVvdxPsKpY3Ro2mFbQadpPWmHA==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.37.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "node_modules/@codemirror/state": {
+      "version": "6.7.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.7.1.tgz",
+      "integrity": "sha512-9QzNDgE4EYDnAHfrTlR2lwiPciiOymLtwKK+8yHQzCc7GXhAP9xdEbEJFy2IWB1j9UGUl9BsgMmTo/ImA02T7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@marijn/find-cluster-break": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/view": {
+      "version": "6.43.6",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.43.6.tgz",
+      "integrity": "sha512-EVunGSYN1wz1p75WY1s3Xg7t3i8Yol0kGZGizNdX9BUFgMFILYVe8/u6EVpo7Ff5PwbZuILb4QAq7IZoKzIEQA==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.7.0",
+        "crelt": "^1.0.6",
+        "style-mod": "^4.1.0",
+        "w3c-keyname": "^2.2.4"
+      }
+    },
     "node_modules/@emnapi/core": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.11.1.tgz",
@@ -103,6 +263,90 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@lezer/common": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.5.2.tgz",
+      "integrity": "sha512-sxQE460fPZyU3sdc8lafxiPwJHBzZRy/udNFynGQky1SePYBdhkBl1kOagA9uT3pxR8K09bOrmTUqA9wb/PjSQ==",
+      "license": "MIT"
+    },
+    "node_modules/@lezer/css": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/@lezer/css/-/css-1.3.4.tgz",
+      "integrity": "sha512-N+tn9tej2hPvyKgHEApMOQfHczDJCwxrRFS3SPn9QjYN+uwHvEDnCgKRrb3mxDYxRS8sKMM8fhC3+lc04Abz5Q==",
+      "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.npmjs.org/@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.npmjs.org/@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/javascript": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/@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.npmjs.org/@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.10",
+      "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.10.tgz",
+      "integrity": "sha512-rnCpTIBafOx4mRp43xOxDJbFipJm/c0cia/V5TiGlhmMa+wsSdoGmUN3w5Bqrks/09Q/D4tNAmWaT8p6NRi77A==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/markdown": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/@lezer/markdown/-/markdown-1.7.2.tgz",
+      "integrity": "sha512-iTkYvoVcKt3WkeL7qUDyXHONZEwLio4wj8KTNi2dnjQEXBZKMV63BpQrPqfsM+OkvuRbiSTAcycYAsQzLhRNoQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.5.0",
+        "@lezer/highlight": "^1.0.0"
+      }
+    },
+    "node_modules/@marijn/find-cluster-break": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@marijn/find-cluster-break/-/find-cluster-break-1.0.3.tgz",
+      "integrity": "sha512-FY+MKLBoTsLNJF/eLWaOsXGdz6uh3Iu1axjPf6TUq92IYumcTcXWHoS747JARLkcdlJ/Waiaxc5wQfFO8jC6NA==",
+      "license": "MIT"
+    },
     "node_modules/@napi-rs/wasm-runtime": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.6.tgz",
@@ -895,6 +1139,21 @@
         "node": ">=6"
       }
     },
+    "node_modules/codemirror": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/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/cookie": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
@@ -905,6 +1164,12 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/crelt": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.7.tgz",
+      "integrity": "sha512-aK6BbWfhf4U/wCcLHKPJl/xa6VkVstRaPywWtMKGwuOLc/wZTyQYuoxgvZnNsBvv7Kg3YTBQYYBCggcviQczuA==",
+      "license": "MIT"
+    },
     "node_modules/deepmerge": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
@@ -1526,6 +1791,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/style-mod": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.3.tgz",
+      "integrity": "sha512-i/n8VsZydrugj3Iuzll8+x/00GH2vnYsk1eomD8QiRrSAeW6ItbCQDtfXCeJHd0iwiNagqjQkvpvREEPtW3IoQ==",
+      "license": "MIT"
+    },
     "node_modules/svelte": {
       "version": "5.56.7",
       "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.56.7.tgz",
@@ -1747,6 +2018,12 @@
         }
       }
     },
+    "node_modules/w3c-keyname": {
+      "version": "2.2.8",
+      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
+      "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==",
+      "license": "MIT"
+    },
     "node_modules/zimmerframe": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.4.tgz",

hub/filelib-web/package.json

@@ -20,5 +20,14 @@
     "tailwindcss": "^4.3.2",
     "typescript": "^5.7.0",
     "vite": "^8.0.16"
+  },
+  "dependencies": {
+    "@codemirror/lang-css": "^6.3.1",
+    "@codemirror/lang-html": "^6.4.11",
+    "@codemirror/lang-javascript": "^6.2.5",
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/lang-markdown": "^6.5.1",
+    "@codemirror/language": "^6.12.4",
+    "codemirror": "^6.0.2"
   }
 }

hub/filelib-web/src/lib/CodeEditor.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+  /**
+   * CodeMirror 6 编辑器封装。自动根据文件扩展名选择语法高亮。
+   * 只在浏览器 mount 后创建 EditorView(CodeMirror 依赖 DOM)。
+   */
+  import { onMount, onDestroy } from "svelte";
+  import { EditorView, basicSetup } from "codemirror";
+  import { EditorState } from "@codemirror/state";
+  import { markdown } from "@codemirror/lang-markdown";
+  import { javascript } from "@codemirror/lang-javascript";
+  import { json } from "@codemirror/lang-json";
+  import { html } from "@codemirror/lang-html";
+  import { css } from "@codemirror/lang-css";
+  import type { Extension } from "@codemirror/state";
+
+  let { value = "", readonly = false, filename = "", onchange }: {
+    value?: string;
+    readonly?: boolean;
+    filename?: string;
+    onchange?: (value: string) => void;
+  } = $props();
+
+  let container = $state<HTMLDivElement | null>(null);
+  let view: EditorView | null = null;
+
+  /** 根据文件名后缀选语言扩展 */
+  function langExtension(name: string): Extension[] {
+    const ext = name.split(".").pop()?.toLowerCase() ?? "";
+    switch (ext) {
+      case "md":
+      case "markdown":
+        return [markdown()];
+      case "js":
+      case "mjs":
+      case "cjs":
+        return [javascript()];
+      case "ts":
+      case "mts":
+      case "cts":
+        return [javascript({ typescript: true })];
+      case "jsx":
+        return [javascript({ jsx: true })];
+      case "tsx":
+        return [javascript({ jsx: true, typescript: true })];
+      case "json":
+      case "jsonc":
+        return [json()];
+      case "html":
+      case "htm":
+      case "svelte":
+      case "vue":
+        return [html()];
+      case "css":
+      case "scss":
+        return [css()];
+      default:
+        return [];
+    }
+  }
+
+  onMount(() => {
+    if (!container) return;
+    const extensions: Extension[] = [
+      basicSetup,
+      ...langExtension(filename),
+      EditorView.lineWrapping,
+      EditorView.updateListener.of((update) => {
+        if (update.docChanged) {
+          onchange?.(update.state.doc.toString());
+        }
+      }),
+    ];
+    if (readonly) extensions.push(EditorState.readOnly.of(true));
+
+    view = new EditorView({
+      state: EditorState.create({ doc: value, extensions }),
+      parent: container,
+    });
+  });
+
+  onDestroy(() => {
+    view?.destroy();
+    view = null;
+  });
+
+  // 外部 value 变化时(如冲突载入最新),替换编辑器内容。
+  $effect(() => {
+    if (view && view.state.doc.toString() !== value) {
+      view.dispatch({
+        changes: { from: 0, to: view.state.doc.length, insert: value },
+      });
+    }
+  });
+</script>
+
+<div bind:this={container} class="code-editor-wrapper"></div>
+
+<style>
+  .code-editor-wrapper {
+    border: 1px solid var(--color-line);
+    border-radius: 8px;
+    overflow: hidden;
+    font-size: 13px;
+    line-height: 1.65;
+  }
+  .code-editor-wrapper :global(.cm-editor) {
+    height: 100%;
+    max-height: 60vh;
+    overflow: auto;
+  }
+  .code-editor-wrapper :global(.cm-editor.cm-focused) {
+    outline: none;
+  }
+  .code-editor-wrapper :global(.cm-scroller) {
+    overflow: auto;
+  }
+</style>

hub/filelib-web/src/lib/FileEditor.svelte

@@ -1,11 +1,22 @@
 <script lang="ts">
+  /**
+   * 文件编辑器(模态框形式)。打开后加载文件内容并使用 CodeMirror 编辑,
+   * 支持语法高亮、版本冲突处理、历史查看与删除。
+   */
   import { api, ApiError } from "./api.js";
   import { toastOk, toastErr, toast } from "./stores.js";
   import type { FileContent, VersionInfo, Role } from "./types.js";
   import Modal from "./Modal.svelte";
   import Icon from "./Icon.svelte";
+  import CodeEditor from "./CodeEditor.svelte";
 
-  let { projectId, path, role, onchanged, onclose }: { projectId: string; path: string; role: Role; onchanged: () => void; onclose?: () => void } = $props();
+  let { projectId, path, role, onchanged, onclose }: {
+    projectId: string;
+    path: string;
+    role: Role;
+    onchanged: () => void;
+    onclose: () => void;
+  } = $props();
 
   let file = $state<FileContent | null>(null);
   let draft = $state("");
@@ -15,6 +26,7 @@
   let history = $state<VersionInfo[]>([]);
 
   const canEdit = $derived(role !== "VIEW");
+  const filename = $derived(path.split("/").pop() ?? "");
 
   async function load(): Promise<void> {
     try {
@@ -81,6 +93,7 @@
       toastOk("已删除");
       file = null;
       onchanged();
+      onclose();
     } catch (e) {
       toastErr(e instanceof Error ? e.message : String(e));
     }
@@ -104,50 +117,67 @@
   }
 </script>
 
-{#if loadError}
+<!-- 主编辑器模态框:宽屏 overlay -->
-  <div class="panel text-xs text-danger">{loadError}</div>
+<div
-{:else if file}
+  class="fixed inset-0 z-40 flex items-center justify-center bg-black/30 p-4"
-  <div class="panel">
+  role="presentation"
-    <div class="mb-2.5 flex items-center justify-between">
+  onclick={(e) => { if (e.target === e.currentTarget) onclose(); }}
-      <span class="file-meta">{file.path} @ {file.version}</span>
+>
+  <div class="flex h-[85vh] w-full max-w-[900px] flex-col rounded-2xl border border-line-soft bg-panel shadow-[0_4px_20px_rgba(26,26,24,.07)]">
+    <!-- 顶栏 -->
+    <div class="flex shrink-0 items-center justify-between border-b border-line-soft px-6 py-4">
+      <div class="flex min-w-0 items-center gap-3">
+        <span class="text-[15px] font-semibold text-ink truncate">{filename}</span>
+        {#if file}
+          <span class="file-meta">@ {file.version}</span>
+        {/if}
+      </div>
       <div class="flex items-center gap-1.5">
-        <a class="btn" href="/database/api/projects/{projectId}/file/raw?path={encodeURIComponent(file.path)}" download>下载</a>
+        {#if file}
+          <a class="btn" href="/database/api/projects/{projectId}/file/raw?path={encodeURIComponent(file.path)}" download>
+            <Icon name="download" size={13} /> 下载
+          </a>
           <button class="btn" onclick={openHistory}><Icon name="clock" size={13} /> 历史</button>
           {#if canEdit}
-          <button class="btn btn-danger" onclick={remove}><Icon name="trash" size={13} /> 删除文件</button>
+            <button class="btn btn-danger" onclick={remove}><Icon name="trash" size={13} /> 删除</button>
           {/if}
-        {#if onclose}
-          <button class="btn !px-2.5" onclick={onclose} title="关闭预览" aria-label="关闭预览">✕</button>
         {/if}
+        <button class="btn !px-2.5" onclick={onclose} title="关闭" aria-label="关闭编辑器">✕</button>
       </div>
     </div>
 
-    {#if file.encoding === "base64"}
+    <!-- 编辑器主体 -->
+    <div class="flex-1 overflow-y-auto px-6 py-4">
+      {#if loadError}
+        <div class="text-xs text-danger">{loadError}</div>
+      {:else if file === null}
+        <div class="quiet">加载中…</div>
+      {:else if file.encoding === "base64"}
         <div class="quiet">二进制文件({file.size} B),不支持在线编辑</div>
       {:else}
-      <textarea rows="14" class="textarea !leading-7" bind:value={draft} readonly={!canEdit}></textarea>
+        <CodeEditor value={draft} filename={path} readonly={!canEdit} onchange={(v) => (draft = v)} />
-    {/if}
-
-    {#if canEdit && file.encoding !== "base64"}
-      <div class="mt-3 flex justify-end">
-        <button class="btn btn-primary" onclick={save}>提交修改</button>
-      </div>
       {/if}
 
       {#if conflict}
-      <div class="mt-3.5 rounded-xl border border-[#E8E2C8] bg-[#FCFBF4] p-4">
+        <div class="mt-4 rounded-xl border border-[#E8E2C8] bg-[#FCFBF4] p-4">
-        <div class="mb-2 text-[13px] font-semibold text-[#6E6329]">冲突:他人已提交 {conflict.currentVersion},差异如下(你的基版 → 最新版)</div>
+          <div class="mb-2 text-[13px] font-semibold text-[#6E6329]">冲突:他人已提交 {conflict.currentVersion},差异如下</div>
           <pre class="diff rounded-lg border border-line-soft bg-panel p-3">{@html renderDiff(conflict.diff)}</pre>
-        <div class="mt-2 text-[11.5px] text-[#8A8059]">请人工合并后,以最新内容为全文重新提交(基版将更新为 {conflict.currentVersion})</div>
+          <div class="mt-2 text-[11.5px] text-[#8A8059]">请人工合并后重新提交(基版已更新为 {conflict.currentVersion})</div>
           <div class="mt-2 flex justify-end">
             <button class="btn" onclick={acceptLatest}>载入最新内容</button>
           </div>
         </div>
       {/if}
     </div>
-{:else}
+
-  <div class="panel quiet">加载中…</div>
+    <!-- 底栏 -->
+    {#if canEdit && file && file.encoding !== "base64"}
+      <div class="flex shrink-0 justify-end border-t border-line-soft px-6 py-3">
+        <button class="btn btn-primary" onclick={save}>提交修改</button>
+      </div>
     {/if}
+  </div>
+</div>
 
 {#if showHistory}
   <Modal title="版本历史" onclose={() => (showHistory = false)}>

hub/filelib-web/src/lib/LibraryView.svelte

@@ -109,9 +109,8 @@
     <NodeDetailPanel />
   </main>
 
-  <!-- 右侧:文件预览/编辑栏(选中文件时出现) -->
+  <!-- 文件编辑器(模态框) -->
   {#if $selectedFilePath && $currentNode?.kind === "PROJECT"}
-    <section class="flex w-[46%] min-w-[420px] shrink-0 flex-col overflow-y-auto border-l border-line-soft bg-bg p-4">
     <FileEditor
       projectId={$currentNode.id}
       path={$selectedFilePath}
@@ -119,7 +118,6 @@
       onchanged={bumpFiles}
       onclose={clearSelectedFile}
     />
-    </section>
   {/if}
 </div>