diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..433ceb8
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,2 @@
+OPENAI_API_KEY=sk-your-key
+OPENAI_BASE_URL=https://api.kkrich.ltd/v1
diff --git a/data/imagegen.sqlite-shm b/data/imagegen.sqlite-shm
index e4a96c2..bcb9cb2 100644
Binary files a/data/imagegen.sqlite-shm and b/data/imagegen.sqlite-shm differ
diff --git a/data/imagegen.sqlite-wal b/data/imagegen.sqlite-wal
index a0cfc12..9b10692 100644
Binary files a/data/imagegen.sqlite-wal and b/data/imagegen.sqlite-wal differ
diff --git a/package.json b/package.json
index 75afecc..a6c029e 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@aws-sdk/client-s3": "^3.1075.0",
+    "@radix-ui/react-alert-dialog": "^1.1.17",
     "@radix-ui/react-label": "^2.1.10",
     "@radix-ui/react-select": "^2.3.1",
     "@radix-ui/react-separator": "^1.1.10",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e7496d2..edfe09f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,9 @@ importers:
       '@aws-sdk/client-s3':
         specifier: ^3.1075.0
         version: 3.1075.0
+      '@radix-ui/react-alert-dialog':
+        specifier: ^1.1.17
+        version: 1.1.17(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       '@radix-ui/react-label':
         specifier: ^2.1.10
         version: 2.1.10(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -617,6 +620,19 @@ packages:
   '@radix-ui/primitive@1.1.4':
     resolution: {integrity: sha512-7AdCK9PQyiljKoBDbN8OuctCbd/esdwZPQ8RtOE3SsyQtUpiPb+ND75q0jEhC1m1ecBI0MFNeLJvwIh9iKHRcQ==}
 
+  '@radix-ui/react-alert-dialog@1.1.17':
+    resolution: {integrity: sha512-563ygGeyWPrxyVCNp7OV4rE2aIXhFPknpFyo4wbDlcyMMPZ6ySh+zC5WTvY0ZFLgPTg/QB6tA8PyDQyJ2b4cPg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-arrow@1.1.10':
     resolution: {integrity: sha512-j2VTDz1vgCsmuG0k5lBfOcM8n5JPFqZBcMryasFjHYMhwxYL5SRUV5lMSUpRdNtw3D/Sv8pzJtrlAgkssYSsQQ==}
     peerDependencies:
@@ -661,6 +677,19 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-dialog@1.1.17':
+    resolution: {integrity: sha512-TDTYmpdq8dI2+Xgvgj9AJ8Ghqq+Eph/TRVEdaFQPDItIY+6QSkU7MJMeevw1568Yw/2Ijz8BTphPSP2XejKphw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-direction@1.1.2':
     resolution: {integrity: sha512-C3vFhbyi4SW3PmbAi6Awpu4OzJtd0MxGurvSsYtr7p7nM8RNB3VAF3CUmnp2j50knpkrRcB7+ycVXzgLgF6yNA==}
     peerDependencies:
@@ -957,40 +986,40 @@ packages:
   '@rtsao/scc@1.1.0':
     resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==}
 
-  '@smithy/core@3.26.0':
-    resolution: {integrity: sha512-mLUktFAn+Pa2agl1J7VgtYNFWCX8/b4GMJSK1hCu4YCvtBfM6F8Os3EP4ry+DFFlXOf3wyvlgXhuUdFoy52D3g==}
+  '@smithy/core@3.25.1':
+    resolution: {integrity: sha512-zpDbpXBCBsxfLtG2GEUyfgvHvSFrw5CwDZSNzL0v52gx/c3oPlPbm+7W7num8xs6vyiUBn+bvYPHcQDOXZynCQ==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/credential-provider-imds@4.4.2':
-    resolution: {integrity: sha512-18UMDMyrAbDcpmL1gLUA7ww0fRTcdCrSjSJOi2Sbld+tVjwD/pW+OAwjlScFLR7vvBnhZrIPQ7kVuTf1mnJLug==}
+  '@smithy/credential-provider-imds@4.4.1':
+    resolution: {integrity: sha512-TSAF5NHgxEsllbErYWbK8aLnl5L601NGc5VYJlSPsKnf3YlkhdoBN+geGcaU00oiw2OK3QO5LA3QNXiiWhCidQ==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/fetch-http-handler@5.5.2':
-    resolution: {integrity: sha512-Ei/UK/QMhq0rKaMqGPlOAkE2yS9DZeYmZdk1RAKc3vp3zxgleZHZyBLlZv8yLsxljX4svCRuMTD6u3LLIcU4Bg==}
+  '@smithy/fetch-http-handler@5.5.1':
+    resolution: {integrity: sha512-96JrD1q71anokymx9Iblb+zKmNQYNstlV/25A9ZYIJ2A0rp1r7/GZAIm0bDWSmVvz3DpNOCZuabzsiL+w0UHhw==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/is-array-buffer@2.2.0':
-    resolution: {integrity: sha512-GGP3O9QFD24uGeAXYUjwSTXARoqpZykHadOmA8G5vfJPK0/DC67qa//0qvqrJzL1xc8WQWX7/yc7fwudjPHPhA==}
+  '@smithy/is-array-buffer@2.0.0':
+    resolution: {integrity: sha512-z3PjFjMyZNI98JFRJi/U0nGoLWMSJlDjAW4QUX2WNZLas5C0CmVV6LJ01JI0k90l7FvpmixjWxPFmENSClQ7ug==}
     engines: {node: '>=14.0.0'}
 
-  '@smithy/node-http-handler@4.8.2':
-    resolution: {integrity: sha512-wfl1uwrAqMH9/pi4kqBo5LBcFwrJLxuDLqL7p7qNcJIFcyZDUc6pzhYk4CYv+DP7fIUpQCZumwNnkhPKS52osQ==}
+  '@smithy/node-http-handler@4.8.1':
+    resolution: {integrity: sha512-emtXvoky671puri18ETf64AFIQUGIEA093F2drXpBgB0OGnBLjcwNR3CA2mYu62IAqNsS56xa5lnTxAgPq7cjw==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/signature-v4@5.5.2':
-    resolution: {integrity: sha512-7xHpmPY4rt0IOmeAA8EfjgEH8isT+587TCdy9H6a7d4OMi5CQ0oEHhWllunvPu4j4Cq0vTFwdxXN/kABWPjdyA==}
+  '@smithy/signature-v4@5.5.1':
+    resolution: {integrity: sha512-X9rVls3En0z3NtrmguTmpRM0/NqtWUxBjal6fcAkwtsub+gOdLZ6kD+V7xhUgFMGdG14bHbZ7M5QjaRI1+DatQ==}
     engines: {node: '>=18.0.0'}
 
   '@smithy/types@4.15.0':
     resolution: {integrity: sha512-Z5TAOxygoFvybJV3igo5SloFflSokHx2hu1eFA+DxDTcn+FtKxUSui+rbTRG1pAafMA888Z3MVvCWUuvCrTXjg==}
     engines: {node: '>=18.0.0'}
 
-  '@smithy/util-buffer-from@2.2.0':
-    resolution: {integrity: sha512-IJdWBbTcMQ6DA0gdNhh/BwrLkDR+ADW5Kr1aZmd4k3DIF6ezMV4R2NIAmT08wQJ3yUK82thHWmC/TnK/wpMMIA==}
+  '@smithy/util-buffer-from@2.0.0':
+    resolution: {integrity: sha512-/YNnLoHsR+4W4Vf2wL5lGv0ksg8Bmk3GEGxn2vEQt52AQaPSCuaO5PM5VM7lP1K9qHRKHwrPGktqVoAHKWHxzw==}
     engines: {node: '>=14.0.0'}
 
-  '@smithy/util-utf8@2.3.0':
-    resolution: {integrity: sha512-R8Rdn8Hy72KKcebgLiv8jQcQkXoLMOGGv5uI1/k0l+snqkOzQ1R0ChUBCxWMlBsFMekWjq0wRudIweFs7sKT5A==}
+  '@smithy/util-utf8@2.0.0':
+    resolution: {integrity: sha512-rctU1VkziY84n5OXe3bPNpKR001ZCME2JCaBBFgtiM2hfKbHFudc/BkMuPab8hRbLd0j3vbnBTTZ1igBf0wgiQ==}
     engines: {node: '>=14.0.0'}
 
   '@swc/helpers@0.5.15':
@@ -1300,8 +1329,8 @@ packages:
     resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
     engines: {node: '>=8'}
 
-  browserslist@4.28.2:
-    resolution: {integrity: sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg==}
+  browserslist@4.28.4:
+    resolution: {integrity: sha512-MTc8i/x9jBQd1iMw2CFGS+rwMa07eYjLR0CCTLDACl9xhxy+nIs3KeML/biicXtk9JrZ6dnnTatmc7ErPXIxqw==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
 
@@ -2160,8 +2189,8 @@ packages:
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
-  nanoid@3.3.14:
-    resolution: {integrity: sha512-U9kYi5bpVMEI31yC8iw4bJJp0avcHXA0W8/wNfLfnvJYzihQo2ZRPYPvpAAd570HAcCBjCTN7vnr+v4StKl1IQ==}
+  nanoid@3.3.15:
+    resolution: {integrity: sha512-y7Wygv/7mEOvxTuEQDB8StXdMRBWf1kR/tlhAzBRUFkB2jfcLOAxO/SHmOO2zgz1pVgK29/kyupn059/bCHdjA==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
@@ -2797,7 +2826,7 @@ snapshots:
       '@aws-crypto/util': 5.2.0
       '@aws-sdk/types': 3.973.13
       '@aws-sdk/util-locate-window': 3.965.8
-      '@smithy/util-utf8': 2.3.0
+      '@smithy/util-utf8': 2.0.0
       tslib: 2.8.1
 
   '@aws-crypto/sha256-browser@5.2.0':
@@ -2807,7 +2836,7 @@ snapshots:
       '@aws-crypto/util': 5.2.0
       '@aws-sdk/types': 3.973.13
       '@aws-sdk/util-locate-window': 3.965.8
-      '@smithy/util-utf8': 2.3.0
+      '@smithy/util-utf8': 2.0.0
       tslib: 2.8.1
 
   '@aws-crypto/sha256-js@5.2.0':
@@ -2823,7 +2852,7 @@ snapshots:
   '@aws-crypto/util@5.2.0':
     dependencies:
       '@aws-sdk/types': 3.973.13
-      '@smithy/util-utf8': 2.3.0
+      '@smithy/util-utf8': 2.0.0
       tslib: 2.8.1
 
   '@aws-sdk/checksums@3.1000.8':
@@ -2833,7 +2862,7 @@ snapshots:
       '@aws-crypto/util': 5.2.0
       '@aws-sdk/core': 3.974.23
       '@aws-sdk/types': 3.973.13
-      '@smithy/core': 3.26.0
+      '@smithy/core': 3.25.1
       '@smithy/types': 4.15.0
       tslib: 2.8.1
 
@@ -2848,9 +2877,9 @@ snapshots:
       '@aws-sdk/middleware-sdk-s3': 3.972.54
       '@aws-sdk/signature-v4-multi-region': 3.996.35
       '@aws-sdk/types': 3.973.13
-      '@smithy/core': 3.26.0
-      '@smithy/fetch-http-handler': 5.5.2
-      '@smithy/node-http-handler': 4.8.2
+      '@smithy/core': 3.25.1
+      '@smithy/fetch-http-handler': 5.5.1
+      '@smithy/node-http-handler': 4.8.1
       '@smithy/types': 4.15.0
       tslib: 2.8.1
 
@@ -2859,8 +2888,8 @@ snapshots:
       '@aws-sdk/types': 3.973.13
       '@aws-sdk/xml-builder': 3.972.31
       '@aws/lambda-invoke-store': 0.2.4
-      '@smithy/core': 3.26.0
-      '@smithy/signature-v4': 5.5.2
+      '@smithy/core': 3.25.1
+      '@smithy/signature-v4': 5.5.1
       '@smithy/types': 4.15.0
       bowser: 2.14.1
       tslib: 2.8.1
@@ -2869,7 +2898,7 @@ snapshots:
     dependencies:
       '@aws-sdk/core': 3.974.23
       '@aws-sdk/types': 3.973.13
-      '@smithy/core': 3.26.0
+      '@smithy/core': 3.25.1
       '@smithy/types': 4.15.0
       tslib: 2.8.1
 
@@ -2877,9 +2906,9 @@ snapshots:
     dependencies:
       '@aws-sdk/core': 3.974.23
       '@aws-sdk/types': 3.973.13
-      '@smithy/core': 3.26.0
-      '@smithy/fetch-http-handler': 5.5.2
-      '@smithy/node-http-handler': 4.8.2
+      '@smithy/core': 3.25.1
+      '@smithy/fetch-http-handler': 5.5.1
+      '@smithy/node-http-handler': 4.8.1
       '@smithy/types': 4.15.0
       tslib: 2.8.1
 
@@ -2894,8 +2923,8 @@ snapshots:
       '@aws-sdk/credential-provider-web-identity': 3.972.55
       '@aws-sdk/nested-clients': 3.997.23
       '@aws-sdk/types': 3.973.13
-      '@smithy/core': 3.26.0
-      '@smithy/credential-provider-imds': 4.4.2
+      '@smithy/core': 3.25.1
+      '@smithy/credential-provider-imds': 4.4.1
       '@smithy/types': 4.15.0
       tslib: 2.8.1
 
@@ -2904,7 +2933,7 @@ snapshots:
       '@aws-sdk/core': 3.974.23
       '@aws-sdk/nested-clients': 3.997.23
       '@aws-sdk/types': 3.973.13
-      '@smithy/core': 3.26.0
+      '@smithy/core': 3.25.1
       '@smithy/types': 4.15.0
       tslib: 2.8.1
 
@@ -2917,8 +2946,8 @@ snapshots:
       '@aws-sdk/credential-provider-sso': 3.972.55
       '@aws-sdk/credential-provider-web-identity': 3.972.55
       '@aws-sdk/types': 3.973.13
-      '@smithy/core': 3.26.0
-      '@smithy/credential-provider-imds': 4.4.2
+      '@smithy/core': 3.25.1
+      '@smithy/credential-provider-imds': 4.4.1
       '@smithy/types': 4.15.0
       tslib: 2.8.1
 
@@ -2926,7 +2955,7 @@ snapshots:
     dependencies:
       '@aws-sdk/core': 3.974.23
       '@aws-sdk/types': 3.973.13
-      '@smithy/core': 3.26.0
+      '@smithy/core': 3.25.1
       '@smithy/types': 4.15.0
       tslib: 2.8.1
 
@@ -2936,7 +2965,7 @@ snapshots:
       '@aws-sdk/nested-clients': 3.997.23
       '@aws-sdk/token-providers': 3.1074.0
       '@aws-sdk/types': 3.973.13
-      '@smithy/core': 3.26.0
+      '@smithy/core': 3.25.1
       '@smithy/types': 4.15.0
       tslib: 2.8.1
 
@@ -2945,7 +2974,7 @@ snapshots:
       '@aws-sdk/core': 3.974.23
       '@aws-sdk/nested-clients': 3.997.23
       '@aws-sdk/types': 3.973.13
-      '@smithy/core': 3.26.0
+      '@smithy/core': 3.25.1
       '@smithy/types': 4.15.0
       tslib: 2.8.1
 
@@ -2959,7 +2988,7 @@ snapshots:
       '@aws-sdk/core': 3.974.23
       '@aws-sdk/signature-v4-multi-region': 3.996.35
       '@aws-sdk/types': 3.973.13
-      '@smithy/core': 3.26.0
+      '@smithy/core': 3.25.1
       '@smithy/types': 4.15.0
       tslib: 2.8.1
 
@@ -2970,16 +2999,16 @@ snapshots:
       '@aws-sdk/core': 3.974.23
       '@aws-sdk/signature-v4-multi-region': 3.996.35
       '@aws-sdk/types': 3.973.13
-      '@smithy/core': 3.26.0
-      '@smithy/fetch-http-handler': 5.5.2
-      '@smithy/node-http-handler': 4.8.2
+      '@smithy/core': 3.25.1
+      '@smithy/fetch-http-handler': 5.5.1
+      '@smithy/node-http-handler': 4.8.1
       '@smithy/types': 4.15.0
       tslib: 2.8.1
 
   '@aws-sdk/signature-v4-multi-region@3.996.35':
     dependencies:
       '@aws-sdk/types': 3.973.13
-      '@smithy/signature-v4': 5.5.2
+      '@smithy/signature-v4': 5.5.1
       '@smithy/types': 4.15.0
       tslib: 2.8.1
 
@@ -2988,7 +3017,7 @@ snapshots:
       '@aws-sdk/core': 3.974.23
       '@aws-sdk/nested-clients': 3.997.23
       '@aws-sdk/types': 3.973.13
-      '@smithy/core': 3.26.0
+      '@smithy/core': 3.25.1
       '@smithy/types': 4.15.0
       tslib: 2.8.1
 
@@ -3048,7 +3077,7 @@ snapshots:
     dependencies:
       '@babel/compat-data': 7.29.7
       '@babel/helper-validator-option': 7.29.7
-      browserslist: 4.28.2
+      browserslist: 4.28.4
       lru-cache: 5.1.1
       semver: 6.3.1
 
@@ -3389,6 +3418,19 @@ snapshots:
 
   '@radix-ui/primitive@1.1.4': {}
 
+  '@radix-ui/react-alert-dialog@1.1.17(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.4
+      '@radix-ui/react-compose-refs': 1.1.3(@types/react@19.2.17)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.4(@types/react@19.2.17)(react@19.2.4)
+      '@radix-ui/react-dialog': 1.1.17(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.6(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
   '@radix-ui/react-arrow@1.1.10(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
     dependencies:
       '@radix-ui/react-primitive': 2.1.6(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -3422,6 +3464,28 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.17
 
+  '@radix-ui/react-dialog@1.1.17(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.4
+      '@radix-ui/react-compose-refs': 1.1.3(@types/react@19.2.17)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.4(@types/react@19.2.17)(react@19.2.4)
+      '@radix-ui/react-dismissable-layer': 1.1.13(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-focus-guards': 1.1.4(@types/react@19.2.17)(react@19.2.4)
+      '@radix-ui/react-focus-scope': 1.1.10(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-id': 1.1.2(@types/react@19.2.17)(react@19.2.4)
+      '@radix-ui/react-portal': 1.1.12(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-presence': 1.1.6(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.6(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-slot': 1.3.0(@types/react@19.2.17)(react@19.2.4)
+      '@radix-ui/react-use-controllable-state': 1.2.3(@types/react@19.2.17)(react@19.2.4)
+      aria-hidden: 1.2.6
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      react-remove-scroll: 2.7.2(@types/react@19.2.17)(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
   '@radix-ui/react-direction@1.1.2(@types/react@19.2.17)(react@19.2.4)':
     dependencies:
       react: 19.2.4
@@ -3701,37 +3765,37 @@ snapshots:
 
   '@rtsao/scc@1.1.0': {}
 
-  '@smithy/core@3.26.0':
+  '@smithy/core@3.25.1':
     dependencies:
       '@aws-crypto/crc32': 5.2.0
       '@smithy/types': 4.15.0
       tslib: 2.8.1
 
-  '@smithy/credential-provider-imds@4.4.2':
+  '@smithy/credential-provider-imds@4.4.1':
     dependencies:
-      '@smithy/core': 3.26.0
+      '@smithy/core': 3.25.1
       '@smithy/types': 4.15.0
       tslib: 2.8.1
 
-  '@smithy/fetch-http-handler@5.5.2':
+  '@smithy/fetch-http-handler@5.5.1':
     dependencies:
-      '@smithy/core': 3.26.0
+      '@smithy/core': 3.25.1
       '@smithy/types': 4.15.0
       tslib: 2.8.1
 
-  '@smithy/is-array-buffer@2.2.0':
+  '@smithy/is-array-buffer@2.0.0':
     dependencies:
       tslib: 2.8.1
 
-  '@smithy/node-http-handler@4.8.2':
+  '@smithy/node-http-handler@4.8.1':
     dependencies:
-      '@smithy/core': 3.26.0
+      '@smithy/core': 3.25.1
       '@smithy/types': 4.15.0
       tslib: 2.8.1
 
-  '@smithy/signature-v4@5.5.2':
+  '@smithy/signature-v4@5.5.1':
     dependencies:
-      '@smithy/core': 3.26.0
+      '@smithy/core': 3.25.1
       '@smithy/types': 4.15.0
       tslib: 2.8.1
 
@@ -3739,14 +3803,14 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
-  '@smithy/util-buffer-from@2.2.0':
+  '@smithy/util-buffer-from@2.0.0':
     dependencies:
-      '@smithy/is-array-buffer': 2.2.0
+      '@smithy/is-array-buffer': 2.0.0
       tslib: 2.8.1
 
-  '@smithy/util-utf8@2.3.0':
+  '@smithy/util-utf8@2.0.0':
     dependencies:
-      '@smithy/util-buffer-from': 2.2.0
+      '@smithy/util-buffer-from': 2.0.0
       tslib: 2.8.1
 
   '@swc/helpers@0.5.15':
@@ -4084,13 +4148,13 @@ snapshots:
     dependencies:
       fill-range: 7.1.1
 
-  browserslist@4.28.2:
+  browserslist@4.28.4:
     dependencies:
       baseline-browser-mapping: 2.10.38
       caniuse-lite: 1.0.30001799
       electron-to-chromium: 1.5.376
       node-releases: 2.0.48
-      update-browserslist-db: 1.2.3(browserslist@4.28.2)
+      update-browserslist-db: 1.2.3(browserslist@4.28.4)
 
   call-bind-apply-helpers@1.0.2:
     dependencies:
@@ -5059,7 +5123,7 @@ snapshots:
 
   ms@2.1.3: {}
 
-  nanoid@3.3.14: {}
+  nanoid@3.3.15: {}
 
   napi-build-utils@2.0.0: {}
 
@@ -5212,13 +5276,13 @@ snapshots:
 
   postcss@8.4.31:
     dependencies:
-      nanoid: 3.3.14
+      nanoid: 3.3.15
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
   postcss@8.5.15:
     dependencies:
-      nanoid: 3.3.14
+      nanoid: 3.3.15
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
@@ -5713,9 +5777,9 @@ snapshots:
 
   undici-types@6.21.0: {}
 
-  update-browserslist-db@1.2.3(browserslist@4.28.2):
+  update-browserslist-db@1.2.3(browserslist@4.28.4):
     dependencies:
-      browserslist: 4.28.2
+      browserslist: 4.28.4
       escalade: 3.2.0
       picocolors: 1.1.1
 
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 84b784b..de7c592 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -2,6 +2,24 @@ allowBuilds:
   better-sqlite3: true
   sharp: true
 
+minimumReleaseAgeExclude:
+  - '@aws-sdk/checksums@3.1000.8'
+  - '@aws-sdk/client-s3@3.1075.0'
+  - '@aws-sdk/core@3.974.23'
+  - '@aws-sdk/credential-provider-env@3.972.49'
+  - '@aws-sdk/credential-provider-http@3.972.51'
+  - '@aws-sdk/credential-provider-ini@3.972.56'
+  - '@aws-sdk/credential-provider-login@3.972.55'
+  - '@aws-sdk/credential-provider-node@3.972.58'
+  - '@aws-sdk/credential-provider-process@3.972.49'
+  - '@aws-sdk/credential-provider-sso@3.972.55'
+  - '@aws-sdk/credential-provider-web-identity@3.972.55'
+  - '@aws-sdk/middleware-flexible-checksums@3.974.33'
+  - '@aws-sdk/middleware-sdk-s3@3.972.54'
+  - '@aws-sdk/nested-clients@3.997.23'
+  - '@aws-sdk/token-providers@3.1074.0'
+  - '@aws-sdk/xml-builder@3.972.31'
+
 onlyBuiltDependencies:
   - better-sqlite3
   - sharp
diff --git a/src/app/api/canvas/image-file/route.ts b/src/app/api/canvas/image-file/route.ts
deleted file mode 100644
index a4014a1..0000000
--- a/src/app/api/canvas/image-file/route.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-import { NextResponse } from "next/server";
-import {
-  getGeneratedImagePathFromUrl,
-  readPersistedImageFile,
-} from "@/lib/server/storage/image-file-storage";
-
-export const runtime = "nodejs";
-
-export async function POST(request: Request) {
-  const payload = (await request.json().catch(() => ({}))) as {
-    filePath?: string;
-    imageUrl?: string;
-  };
-  const imageUrl = payload.imageUrl?.trim();
-  const filePath = resolveReadableImagePath(imageUrl, payload.filePath?.trim());
-
-  if (filePath) {
-    const buffer = await readPersistedImageFile(filePath);
-    if (!buffer) {
-      return NextResponse.json({ error: "图片文件不存在" }, { status: 404 });
-    }
-
-    return createImageResponse(buffer, getImageContentType(filePath));
-  }
-
-  if (!imageUrl) {
-    return NextResponse.json({ error: "图片地址不可读取" }, { status: 400 });
-  }
-
-  const remoteImage = await readRemoteImage(imageUrl);
-  if (!remoteImage) {
-    return NextResponse.json({ error: "远程图片不可访问" }, { status: 502 });
-  }
-
-  return createImageResponse(remoteImage.buffer, remoteImage.contentType);
-}
-
-function createImageResponse(buffer: Buffer, contentType: string) {
-  return new Response(buffer, {
-    headers: {
-      "Cache-Control": "no-store",
-      "Content-Type": contentType,
-    },
-  });
-}
-
-function resolveReadableImagePath(imageUrl?: string, filePath?: string) {
-  if (filePath?.startsWith("s3://")) return filePath;
-  if (imageUrl) return getGeneratedImagePathFromUrl(imageUrl);
-  return null;
-}
-
-async function readRemoteImage(imageUrl: string) {
-  if (!isAllowedRemoteImageUrl(imageUrl)) return null;
-
-  const response = await fetch(imageUrl, { cache: "no-store" });
-  if (!response.ok) return null;
-
-  const contentType = response.headers.get("content-type") || "image/png";
-  if (!contentType.startsWith("image/")) return null;
-
-  return {
-    buffer: Buffer.from(await response.arrayBuffer()),
-    contentType,
-  };
-}
-
-function isAllowedRemoteImageUrl(imageUrl: string) {
-  try {
-    const url = new URL(imageUrl);
-    return (
-      url.protocol === "https:" &&
-      url.hostname === "file.hanhan.ltd" &&
-      url.pathname.startsWith("/imagegen-tools/generated/")
-    );
-  } catch {
-    return false;
-  }
-}
-
-function getImageContentType(filePath: string) {
-  const extension = filePath.split(".").pop()?.toLowerCase();
-  if (extension === "jpg" || extension === "jpeg") return "image/jpeg";
-  if (extension === "webp") return "image/webp";
-  return "image/png";
-}
diff --git a/src/app/api/canvas/models/route.ts b/src/app/api/canvas/models/route.ts
new file mode 100644
index 0000000..d3a9a33
--- /dev/null
+++ b/src/app/api/canvas/models/route.ts
@@ -0,0 +1,99 @@
+import { NextResponse } from "next/server";
+
+export const runtime = "nodejs";
+
+export async function POST(request: Request) {
+  const payload = (await request.json().catch(() => ({}))) as {
+    baseUrl?: string;
+    apiKey?: string;
+  };
+  const baseUrl = normalizeBaseUrl(payload.baseUrl);
+  const apiKey = payload.apiKey?.trim();
+
+  if (!baseUrl || !apiKey) {
+    return NextResponse.json(
+      { error: "请填写 Base URL 和 API Key" },
+      { status: 400 },
+    );
+  }
+
+  const response = await fetch(`${baseUrl}/v1/models`, {
+    headers: {
+      Authorization: `Bearer ${apiKey}`,
+    },
+    cache: "no-store",
+  }).catch((error) => {
+    throw Object.assign(new Error("模型列表拉取失败"), {
+      cause: error,
+      status: 502,
+    });
+  });
+
+  const payloadText = await response.text();
+  const body = parseJson(payloadText);
+  if (!response.ok) {
+    return NextResponse.json(
+      {
+        error:
+          getStringField(body, "error") ||
+          getNestedStringField(body, ["error", "message"]) ||
+          `模型列表拉取失败：HTTP ${response.status}`,
+      },
+      { status: response.status },
+    );
+  }
+
+  const models = extractModelIds(body);
+  return NextResponse.json({ models });
+}
+
+function normalizeBaseUrl(value: string | undefined) {
+  if (!value) return "";
+  return value.trim().replace(/\/+$/, "");
+}
+
+function parseJson(value: string) {
+  try {
+    return JSON.parse(value) as unknown;
+  } catch {
+    return {};
+  }
+}
+
+function extractModelIds(payload: unknown) {
+  const candidate = payload as { data?: unknown };
+  const list = Array.isArray(candidate.data)
+    ? candidate.data
+    : Array.isArray(payload)
+      ? payload
+      : [];
+
+  return Array.from(
+    new Set(
+      list
+        .map((item) =>
+          typeof item === "string"
+            ? item
+            : typeof item === "object" && item !== null && "id" in item
+              ? String((item as { id: unknown }).id)
+              : "",
+        )
+        .filter(Boolean),
+    ),
+  ).sort((a, b) => a.localeCompare(b));
+}
+
+function getStringField(payload: unknown, key: string) {
+  if (!payload || typeof payload !== "object" || !(key in payload)) return "";
+  const value = (payload as Record<string, unknown>)[key];
+  return typeof value === "string" ? value : "";
+}
+
+function getNestedStringField(payload: unknown, keys: string[]) {
+  let current = payload;
+  for (const key of keys) {
+    if (!current || typeof current !== "object" || !(key in current)) return "";
+    current = (current as Record<string, unknown>)[key];
+  }
+  return typeof current === "string" ? current : "";
+}
diff --git a/src/app/api/canvas/settings/route.ts b/src/app/api/canvas/settings/route.ts
new file mode 100644
index 0000000..7121bbf
--- /dev/null
+++ b/src/app/api/canvas/settings/route.ts
@@ -0,0 +1,25 @@
+import { NextResponse } from "next/server";
+import {
+  defaultCanvasSettings,
+  normalizeCanvasSettings,
+} from "@/lib/canvas/settings";
+import {
+  getJsonSetting,
+  setJsonSetting,
+} from "@/lib/server/repositories/app-settings-repository";
+
+export const runtime = "nodejs";
+
+const canvasSettingsKey = "canvasSettings";
+
+export async function GET() {
+  const settings = getJsonSetting(canvasSettingsKey, defaultCanvasSettings);
+  return NextResponse.json({ item: normalizeCanvasSettings(settings) });
+}
+
+export async function PUT(request: Request) {
+  const payload = await request.json().catch(() => ({}));
+  const settings = normalizeCanvasSettings(payload);
+  setJsonSetting(canvasSettingsKey, settings);
+  return NextResponse.json({ item: settings });
+}
diff --git a/src/app/api/history/[id]/route.ts b/src/app/api/history/[id]/route.ts
new file mode 100644
index 0000000..9fe220e
--- /dev/null
+++ b/src/app/api/history/[id]/route.ts
@@ -0,0 +1,41 @@
+import { NextResponse } from "next/server";
+import {
+  deleteHistoryItem,
+  updateHistoryNote,
+} from "@/lib/server/repositories/history-repository";
+
+export const runtime = "nodejs";
+
+type RouteContext = {
+  params: Promise<{ id: string }>;
+};
+
+export async function DELETE(_request: Request, context: RouteContext) {
+  const { id } = await context.params;
+  if (!id) {
+    return NextResponse.json({ error: "Missing history id" }, { status: 400 });
+  }
+
+  const deleted = deleteHistoryItem(id);
+  if (!deleted) {
+    return NextResponse.json({ error: "素材不存在或已删除" }, { status: 404 });
+  }
+
+  return NextResponse.json({ ok: true });
+}
+
+export async function PATCH(request: Request, context: RouteContext) {
+  const { id } = await context.params;
+  if (!id) {
+    return NextResponse.json({ error: "Missing history id" }, { status: 400 });
+  }
+
+  const payload = await request.json().catch(() => ({}));
+  const note = typeof payload.note === "string" ? payload.note.slice(0, 1000) : "";
+  const updated = updateHistoryNote(id, note);
+  if (!updated) {
+    return NextResponse.json({ error: "素材不存在或已删除" }, { status: 404 });
+  }
+
+  return NextResponse.json({ ok: true, note });
+}
diff --git a/src/app/api/history/route.ts b/src/app/api/history/route.ts
index f52f32b..05e6a8e 100644
--- a/src/app/api/history/route.ts
+++ b/src/app/api/history/route.ts
@@ -1,8 +1,19 @@
 import { NextResponse } from "next/server";
-import { listHistory } from "@/lib/server/repositories/history-repository";
+import {
+  listHistory,
+  type HistorySource,
+} from "@/lib/server/repositories/history-repository";
 
 export const runtime = "nodejs";
 
-export async function GET() {
-  return NextResponse.json({ items: listHistory() });
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const source = normalizeSource(searchParams.get("source"));
+  const limit = Number(searchParams.get("limit") ?? "100");
+  return NextResponse.json({ items: listHistory({ source, limit }) });
+}
+
+function normalizeSource(value: string | null): HistorySource | "all" | undefined {
+  if (value === "direct" || value === "canvas" || value === "all") return value;
+  return undefined;
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 22895c1..8ba7785 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,7 +2,12 @@ import { HomeShell, type ActiveView } from "@/components/direct/home-shell";
 
 function normalizeView(value: string | string[] | undefined): ActiveView {
   const candidate = Array.isArray(value) ? value[0] : value;
-  if (candidate === "history" || candidate === "settings" || candidate === "canvas") {
+  if (
+    candidate === "history" ||
+    candidate === "assets" ||
+    candidate === "settings" ||
+    candidate === "canvas"
+  ) {
     return candidate;
   }
   return "studio";
diff --git a/src/components/canvas/canvas-editor-client.tsx b/src/components/canvas/canvas-editor-client.tsx
index eff08ca..2953d24 100644
--- a/src/components/canvas/canvas-editor-client.tsx
+++ b/src/components/canvas/canvas-editor-client.tsx
@@ -6,17 +6,34 @@ import type {
   DragEvent as ReactDragEvent,
   MouseEvent as ReactMouseEvent,
 } from "react";
-import { FileText, ImageIcon, X } from "lucide-react";
+import { Eye, EyeOff, FileText, ImageIcon, Loader2, Plus, RefreshCw, Trash2, X } from "lucide-react";
 import { toast, Toaster } from "sonner";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
 import { CanvasConnections } from "@/components/canvas/canvas-connections";
-import { CanvasNode } from "@/components/canvas/canvas-node";
+import { CanvasNode, type LocalImageEditPayload } from "@/components/canvas/canvas-node";
 import { CanvasNodeInspector } from "@/components/canvas/canvas-node-inspector";
 import { CanvasToolbar } from "@/components/canvas/canvas-toolbar";
 import { InfiniteCanvas } from "@/components/canvas/infinite-canvas";
+import {
+  defaultCanvasSettings,
+  normalizeCanvasSettings,
+  type CanvasModelChannel,
+  type CanvasModelKind,
+  type CanvasSettings,
+} from "@/lib/canvas/settings";
 import {
   clampScale,
   placeResultNode,
@@ -29,6 +46,7 @@ import {
 } from "@/lib/canvas/prompt-mentions";
 import {
   createCanvasNode,
+  defaultCanvasConfig,
   createImageLoadingNode,
   createImageNodeFromHistory,
   createImageNodeFromUpload,
@@ -99,24 +117,19 @@ type StoredCanvasJob = {
   loadingNodeId: string;
   clientRequestId: string;
   requestStartedAt: number;
+  targetMode?: "new-node" | "replace-node";
 };
 
-type CanvasSettingsTab = "model" | "interface";
+type CanvasSettingsTab = "channels" | "model" | "interface";
 
-type CanvasSettings = {
-  hideToolbarText: boolean;
-  modelName: string;
-  baseUrl: string;
-  apiKeySource: string;
+type ConfirmDialogState = {
+  title: string;
+  description: string;
+  actionLabel: string;
+  onConfirm: () => void | Promise<void>;
 };
 
 const canvasSettingsStorageKey = "imagegen:canvas:settings";
-const defaultCanvasSettings: CanvasSettings = {
-  hideToolbarText: false,
-  modelName: "gpt-image-2-2k",
-  baseUrl: "OPENAI_BASE_URL",
-  apiKeySource: "OPENAI_API_KEY",
-};
 
 function getInitialCanvasSettings() {
   if (typeof window === "undefined") return defaultCanvasSettings;
@@ -124,12 +137,7 @@ function getInitialCanvasSettings() {
   try {
     const raw = window.localStorage.getItem(canvasSettingsStorageKey);
     if (!raw) return defaultCanvasSettings;
-    const stored = JSON.parse(raw) as Partial<CanvasSettings>;
-    return {
-      ...defaultCanvasSettings,
-      ...stored,
-      hideToolbarText: Boolean(stored.hideToolbarText),
-    };
+    return normalizeCanvasSettings(JSON.parse(raw));
   } catch {
     return defaultCanvasSettings;
   }
@@ -140,16 +148,23 @@ export function CanvasEditorClient({ projectId }: { projectId: string }) {
   const containerRef = useRef<HTMLDivElement | null>(null);
   const uploadInputRef = useRef<HTMLInputElement | null>(null);
   const saveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const settingsSaveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const settingsLoadedRef = useRef(false);
   const projectRef = useRef<CanvasProjectRecord | null>(null);
   const undoStackRef = useRef<CanvasProjectData[]>([]);
   const redoStackRef = useRef<CanvasProjectData[]>([]);
   const jobWatcherCleanupRef = useRef<(() => void) | null>(null);
   const nodeClipboardRef = useRef<CanvasNodeClipboard | null>(null);
   const pasteCountRef = useRef(0);
+  const dragUndoSnapshotRef = useRef<CanvasProjectData | null>(null);
+  const dragMovedRef = useRef(false);
+  const dragFrameRef = useRef<number | null>(null);
+  const pendingDragPointRef = useRef<CanvasPosition | null>(null);
 
   const [isLoading, setIsLoading] = useState(true);
   const [isSaving, setIsSaving] = useState(false);
   const [isGenerating, setIsGenerating] = useState(false);
+  const [lastSavedAt, setLastSavedAt] = useState<Date | null>(null);
   const [isHistoryLoading, setIsHistoryLoading] = useState(true);
   const [project, setProject] = useState<CanvasProjectRecord | null>(null);
   const [history, setHistory] = useState<HistoryItem[]>([]);
@@ -176,20 +191,48 @@ export function CanvasEditorClient({ projectId }: { projectId: string }) {
     canUndo: false,
     canRedo: false,
   });
+  const [confirmDialog, setConfirmDialog] = useState<ConfirmDialogState | null>(null);
 
   useEffect(() => {
     projectRef.current = project;
   }, [project]);
 
   useEffect(() => {
-    try {
-      window.localStorage.setItem(
-        canvasSettingsStorageKey,
-        JSON.stringify(canvasSettings),
-      );
-    } catch {
-      // Local persistence is a convenience; the canvas should keep working.
+    let cancelled = false;
+
+    async function loadCanvasSettings() {
+      try {
+        const response = await fetch("/api/canvas/settings", { cache: "no-store" });
+        const payload = await response.json().catch(() => ({}));
+        if (!cancelled && response.ok) {
+          setCanvasSettings(normalizeCanvasSettings(payload.item));
+        }
+      } catch {
+        // 设置读取失败时沿用默认值或旧 localStorage 迁移值，画布主流程不能被配置面板阻断。
+      } finally {
+        if (!cancelled) settingsLoadedRef.current = true;
+      }
     }
+
+    void loadCanvasSettings();
+    return () => {
+      cancelled = true;
+      if (settingsSaveTimerRef.current) clearTimeout(settingsSaveTimerRef.current);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!settingsLoadedRef.current) return;
+    if (settingsSaveTimerRef.current) clearTimeout(settingsSaveTimerRef.current);
+    settingsSaveTimerRef.current = setTimeout(() => {
+      void fetch("/api/canvas/settings", {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(canvasSettings),
+      }).catch(() => {
+        toast.error("保存画布设置失败");
+      });
+    }, 300);
   }, [canvasSettings]);
 
   useEffect(() => {
@@ -202,7 +245,11 @@ export function CanvasEditorClient({ projectId }: { projectId: string }) {
         });
         if (!response.ok) throw new Error("画布不存在");
         const payload = await response.json();
-        if (!cancelled) setProject(payload.item as CanvasProjectRecord);
+        if (!cancelled) {
+          const loadedProject = payload.item as CanvasProjectRecord;
+          setProject(loadedProject);
+          setLastSavedAt(new Date(loadedProject.updatedAt));
+        }
       } catch (err) {
         if (!cancelled) {
           toast.error(err instanceof Error ? err.message : "加载画布失败");
@@ -217,6 +264,9 @@ export function CanvasEditorClient({ projectId }: { projectId: string }) {
     return () => {
       cancelled = true;
       if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
+      if (dragFrameRef.current !== null) cancelAnimationFrame(dragFrameRef.current);
+      dragFrameRef.current = null;
+      pendingDragPointRef.current = null;
       jobWatcherCleanupRef.current?.();
       jobWatcherCleanupRef.current = null;
     };
@@ -300,7 +350,7 @@ export function CanvasEditorClient({ projectId }: { projectId: string }) {
       if (!nextProject) return;
       setIsSaving(true);
       try {
-        await fetch(`/api/canvas/projects/${projectId}`, {
+        const response = await fetch(`/api/canvas/projects/${projectId}`, {
           method: "PATCH",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({
@@ -308,6 +358,12 @@ export function CanvasEditorClient({ projectId }: { projectId: string }) {
             data: nextProject.data,
           }),
         });
+        const payload = await response.json().catch(() => ({}));
+        if (!response.ok) {
+          throw new Error(payload.error || "保存画布失败");
+        }
+        const savedProject = payload.item as CanvasProjectRecord | undefined;
+        setLastSavedAt(new Date(savedProject?.updatedAt ?? Date.now()));
       } finally {
         setIsSaving(false);
       }
@@ -320,30 +376,88 @@ export function CanvasEditorClient({ projectId }: { projectId: string }) {
     projectRef.current = nextProject;
     if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
     saveTimerRef.current = setTimeout(() => {
-      void saveProject(nextProject);
+      void saveProject(nextProject).catch((err) => {
+        toast.error(err instanceof Error ? err.message : "保存画布失败");
+      });
     }, SAVE_DEBOUNCE_MS);
   }, [saveProject]);
 
+  const saveProjectNow = useCallback(() => {
+    if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
+    saveTimerRef.current = null;
+    void saveProject().catch((err) => {
+      toast.error(err instanceof Error ? err.message : "保存画布失败");
+    });
+  }, [saveProject]);
+
   const patchProjectData = useCallback(
-    (updater: (project: CanvasProjectRecord) => CanvasProjectRecord) => {
+    (
+      updater: (project: CanvasProjectRecord) => CanvasProjectRecord,
+      options?: { recordHistory?: boolean },
+    ) => {
       const current = projectRef.current;
       if (!current) return;
       const nextProject = updater(current);
       if (nextProject === current) return;
-      undoStackRef.current = [...undoStackRef.current.slice(-49), cloneCanvasData(current.data)];
-      redoStackRef.current = [];
-      setHistoryAvailability(getHistoryAvailability(undoStackRef.current, redoStackRef.current));
+      if (options?.recordHistory !== false) {
+        undoStackRef.current = [
+          ...undoStackRef.current.slice(-49),
+          cloneCanvasData(current.data),
+        ];
+        redoStackRef.current = [];
+        setHistoryAvailability(
+          getHistoryAvailability(undoStackRef.current, redoStackRef.current),
+        );
+      }
       scheduleSave(nextProject);
     },
     [scheduleSave],
   );
 
+  const pushHistorySnapshot = useCallback((snapshot: CanvasProjectData | null) => {
+    if (!snapshot) return;
+    undoStackRef.current = [...undoStackRef.current.slice(-49), cloneCanvasData(snapshot)];
+    redoStackRef.current = [];
+    setHistoryAvailability(getHistoryAvailability(undoStackRef.current, redoStackRef.current));
+  }, []);
+
+  const applyDragPosition = useCallback((point: CanvasPosition) => {
+    const state = dragState;
+    const current = projectRef.current;
+    if (!state || !current) return;
+
+    const dx = point.x - state.startPointerWorld.x;
+    const dy = point.y - state.startPointerWorld.y;
+    dragMovedRef.current = dragMovedRef.current || dx !== 0 || dy !== 0;
+
+    const nextProject = {
+      ...current,
+      data: {
+        ...current.data,
+        nodes: current.data.nodes.map((node) => {
+          if (!state.nodeIds.includes(node.id)) return node;
+          const startPosition = state.startPositions[node.id] ?? node.position;
+          return {
+            ...node,
+            position: {
+              x: startPosition.x + dx,
+              y: startPosition.y + dy,
+            },
+          };
+        }),
+      },
+    };
+
+    setProject(nextProject);
+    projectRef.current = nextProject;
+  }, [dragState]);
+
   const updateViewport = useCallback(
     (nextViewport: CanvasViewport) => {
       patchProjectData((current) => ({
         ...current,
         data: { ...current.data, viewport: nextViewport },
-      }));
+      }), { recordHistory: false });
     },
     [patchProjectData],
   );
@@ -433,8 +547,15 @@ export function CanvasEditorClient({ projectId }: { projectId: string }) {
 
   function clearCanvas() {
     if (!nodes.length && !connections.length) return;
-    const confirmed = window.confirm("清空画布上的所有节点和连接？");
-    if (!confirmed) return;
+    setConfirmDialog({
+      title: "清空当前画布？",
+      description: "这会删除画布上的所有节点和连接。此操作可以通过撤回恢复。",
+      actionLabel: "清空画布",
+      onConfirm: performClearCanvas,
+    });
+  }
+
+  function performClearCanvas() {
     patchProjectData((current) => ({
       ...current,
       data: {
@@ -615,6 +736,8 @@ export function CanvasEditorClient({ projectId }: { projectId: string }) {
     setSelectedNodeId(node.id);
     setSelectedNodeIds(nextNodeIds);
     setSelectedConnectionId(null);
+    dragUndoSnapshotRef.current = projectRef.current ? cloneCanvasData(projectRef.current.data) : null;
+    dragMovedRef.current = false;
     const rect = containerRef.current?.getBoundingClientRect();
     const startPointerWorld = rect
       ? screenToWorld(
@@ -645,27 +768,14 @@ export function CanvasEditorClient({ projectId }: { projectId: string }) {
     }
     if (!dragState) return;
 
-    const dx = point.x - dragState.startPointerWorld.x;
-    const dy = point.y - dragState.startPointerWorld.y;
-    patchProjectData((current) => ({
-      ...current,
-      data: {
-        ...current.data,
-        nodes: current.data.nodes.map((node) => {
-          if (!dragState.nodeIds.includes(node.id)) {
-            return node;
-          }
-          const startPosition = dragState.startPositions[node.id] ?? node.position;
-          return {
-            ...node,
-            position: {
-              x: startPosition.x + dx,
-              y: startPosition.y + dy,
-            },
-          };
-        }),
-      },
-    }));
+    pendingDragPointRef.current = point;
+    if (dragFrameRef.current !== null) return;
+    dragFrameRef.current = requestAnimationFrame(() => {
+      dragFrameRef.current = null;
+      const pendingPoint = pendingDragPointRef.current;
+      pendingDragPointRef.current = null;
+      if (pendingPoint) applyDragPosition(pendingPoint);
+    });
   }
 
   function startConnection(fromNodeId: string) {
@@ -794,6 +904,22 @@ export function CanvasEditorClient({ projectId }: { projectId: string }) {
     insertLibraryImageNode(node);
   }
 
+  async function deleteHistoryImage(item: HistoryItem) {
+    try {
+      const response = await fetch(`/api/history/${encodeURIComponent(item.id)}`, {
+        method: "DELETE",
+      });
+      const payload = await response.json().catch(() => ({}));
+      if (!response.ok) {
+        throw new Error(payload.error || "删除素材失败");
+      }
+      setHistory((items) => items.filter((historyItem) => historyItem.id !== item.id));
+      toast.success("素材已删除");
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "删除素材失败");
+    }
+  }
+
   async function uploadImage(file: File) {
     return uploadImageAt(file, mouseWorld);
   }
@@ -820,6 +946,7 @@ export function CanvasEditorClient({ projectId }: { projectId: string }) {
           filePath: payload.item.filePath,
           naturalWidth: naturalSize.width,
           naturalHeight: naturalSize.height,
+          fileSize: file.size,
         },
       };
       insertLibraryImageNode(node);
@@ -897,6 +1024,48 @@ export function CanvasEditorClient({ projectId }: { projectId: string }) {
     }
   }
 
+  async function createNewCanvas() {
+    try {
+      const response = await fetch("/api/canvas/projects", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ title: "未命名画布" }),
+      });
+      const payload = await response.json().catch(() => ({}));
+      if (!response.ok || !payload.item?.id) {
+        throw new Error(payload.error || "新建画布失败");
+      }
+      router.push(`/canvas/${payload.item.id}`);
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "新建画布失败");
+    }
+  }
+
+  async function deleteCurrentCanvas(currentProjectId: string) {
+    setConfirmDialog({
+      title: "删除当前画布？",
+      description: "此操作不可撤销，画布项目和其中的节点数据都会被删除。",
+      actionLabel: "删除画布",
+      onConfirm: () => performDeleteCurrentCanvas(currentProjectId),
+    });
+  }
+
+  async function performDeleteCurrentCanvas(currentProjectId: string) {
+    try {
+      const response = await fetch(`/api/canvas/projects/${currentProjectId}`, {
+        method: "DELETE",
+      });
+      const payload = await response.json().catch(() => ({}));
+      if (!response.ok) {
+        throw new Error(payload.error || "删除画布失败");
+      }
+      toast.success("画布已删除");
+      router.push("/canvas", { scroll: false });
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "删除画布失败");
+    }
+  }
+
   async function replaceNodeImage(nodeId: string, file: File) {
     try {
       const formData = new FormData();
@@ -927,6 +1096,7 @@ export function CanvasEditorClient({ projectId }: { projectId: string }) {
           status: "success",
           naturalWidth: naturalSize.width,
           naturalHeight: naturalSize.height,
+          fileSize: file.size,
         } as CanvasNodeType["metadata"],
       });
       toast.success("图片已替换");
@@ -953,8 +1123,21 @@ export function CanvasEditorClient({ projectId }: { projectId: string }) {
       current.data.nodes.find((node) => node.id === anchorNodeId) ??
       resolved.imageNode ??
       resolved.promptNode;
+    const requestRoute = resolveCanvasRequestRoute(
+      canvasSettings,
+      resolved.config.channelId,
+      resolved.config.model,
+    );
     const loadingPosition = placeResultNode(anchor, current.data.nodes, mouseWorld);
     const loadingNode = createImageLoadingNode(loadingPosition);
+    loadingNode.metadata = {
+      ...loadingNode.metadata,
+      channelId: requestRoute.channel?.id,
+      model: requestRoute.model,
+      size: resolved.config.size,
+      quality: resolved.config.quality,
+      outputFormat: resolved.config.outputFormat,
+    } satisfies CanvasImageNodeMetadata;
     const loadingConnection: CanvasConnection = {
       id: crypto.randomUUID(),
       type: "generated",
@@ -982,13 +1165,18 @@ export function CanvasEditorClient({ projectId }: { projectId: string }) {
     setJob(null);
     try {
       const formData = new FormData();
+      formData.append("source", "canvas");
       formData.append("mode", resolved.imageNodes.length ? "edit" : "generate");
       formData.append("prompt", resolved.prompt);
-      formData.append("model", resolved.config.model);
+      if (resolved.negativePrompt) {
+        formData.append("negativePrompt", resolved.negativePrompt);
+      }
+      formData.append("model", requestRoute.model);
       formData.append("size", resolved.config.size);
       formData.append("quality", resolved.config.quality);
       formData.append("outputFormat", resolved.config.outputFormat);
       formData.append("preserveIdentity", String(resolved.config.preserveIdentity));
+      appendChannelConfig(formData, requestRoute.channel);
 
       for (const [index, imageNode] of resolved.imageNodes.entries()) {
         const imageMeta = imageNode.metadata as {
@@ -996,12 +1184,11 @@ export function CanvasEditorClient({ projectId }: { projectId: string }) {
           imageUrl?: string;
         };
         if (imageMeta.imageUrl) {
-          const file = await imageUrlToFile(
-            imageMeta.imageUrl,
-            `canvas-reference-${index + 1}.png`,
-            imageMeta.filePath,
-          );
-          formData.append("image", file);
+          appendImageReference(formData, {
+            imageUrl: imageMeta.imageUrl,
+            filePath: imageMeta.filePath,
+            filename: `canvas-reference-${index + 1}.png`,
+          });
         }
       }
 
@@ -1074,6 +1261,151 @@ export function CanvasEditorClient({ projectId }: { projectId: string }) {
     }
   }
 
+  async function editImageWithMask({
+    nodeId,
+    prompt,
+    mask,
+  }: LocalImageEditPayload) {
+    const current = projectRef.current;
+    if (!current || isGenerating) return;
+
+    const sourceNode = current.data.nodes.find(
+      (node) => node.id === nodeId && node.type === "image",
+    );
+    const sourceMetadata = sourceNode?.metadata as CanvasImageNodeMetadata | undefined;
+    if (!sourceNode || !sourceMetadata?.imageUrl) {
+      toast.error("请先选择一张图片");
+      return;
+    }
+
+    const projectWithEditingNode = {
+      ...current,
+      data: {
+        ...current.data,
+        nodes: current.data.nodes.map((node) =>
+          node.id === sourceNode.id
+            ? {
+                ...node,
+                title: "局部修改中",
+                metadata: {
+                  ...sourceMetadata,
+                  status: "loading",
+                  errorMessage: undefined,
+                } satisfies CanvasImageNodeMetadata,
+              }
+            : node,
+        ),
+      },
+    };
+
+    setProject(projectWithEditingNode);
+    projectRef.current = projectWithEditingNode;
+    setSelectedNodeId(sourceNode.id);
+    setSelectedNodeIds([sourceNode.id]);
+    setIsGenerating(true);
+    await saveProject(projectWithEditingNode);
+
+    const clientRequestId = createClientRequestId();
+    const requestStartedAt = getNowMs();
+    const requestRoute = resolveCanvasRequestRoute(
+      canvasSettings,
+      sourceMetadata.channelId,
+      sourceMetadata.model || defaultCanvasConfig.model,
+    );
+    setJob(null);
+
+    try {
+      const formData = new FormData();
+      formData.append("mode", "edit");
+      formData.append("prompt", prompt);
+      formData.append(
+        "model",
+        requestRoute.model,
+      );
+      formData.append("size", sourceMetadata.size || defaultCanvasConfig.size);
+      formData.append("quality", sourceMetadata.quality || defaultCanvasConfig.quality);
+      formData.append(
+        "outputFormat",
+        sourceMetadata.outputFormat || defaultCanvasConfig.outputFormat,
+      );
+      formData.append("preserveIdentity", "true");
+      appendChannelConfig(formData, requestRoute.channel);
+      appendImageReference(formData, {
+        imageUrl: sourceMetadata.imageUrl,
+        filePath: sourceMetadata.filePath,
+        filename: "local-edit-source.png",
+      });
+      formData.append("mask", mask);
+
+      const response = await fetch("/api/images", {
+        method: "POST",
+        headers: { "x-client-request-id": clientRequestId },
+        body: formData,
+      });
+      const payload = await parseJsonResponse(response);
+      if (!response.ok) {
+        throw buildGenerationError(response, payload, requestStartedAt);
+      }
+
+      const submittedJob = normalizeImageJobPayload(payload);
+      setJob(submittedJob);
+      toast.success("局部修改任务已提交", {
+        description: submittedJob.jobId
+          ? `任务 ID：${submittedJob.jobId}`
+          : undefined,
+      });
+      if (!submittedJob.jobId) {
+        throw buildGenerationError(
+          response,
+          { ...payload, error: "服务端没有返回 jobId" },
+          requestStartedAt,
+        );
+      }
+      writeStoredCanvasJob(projectId, {
+        jobId: submittedJob.jobId,
+        loadingNodeId: sourceNode.id,
+        clientRequestId,
+        requestStartedAt,
+        targetMode: "replace-node",
+      });
+
+      const completedJob = await watchCanvasJob(
+        submittedJob.jobId,
+        requestStartedAt,
+        clientRequestId,
+      );
+      if (completedJob.status === "failed") {
+        throw buildGenerationErrorFromJob(completedJob, requestStartedAt);
+      }
+      if (completedJob.result) {
+        await replaceCanvasNodeWithCompletedJob(completedJob, sourceNode.id);
+      }
+    } catch (err) {
+      const normalizedError = normalizeGenerationError(
+        err,
+        requestStartedAt,
+        clientRequestId,
+      );
+      const latest = projectRef.current;
+      if (latest) {
+        const nextProject = markCanvasJobFailed(
+          latest,
+          sourceNode.id,
+          normalizedError.message,
+        );
+        setProject(nextProject);
+        projectRef.current = nextProject;
+        void saveProject(nextProject);
+      }
+      toast.error(normalizedError.title, {
+        description: normalizedError.message,
+      });
+    } finally {
+      setIsGenerating(false);
+      clearStoredCanvasJob(projectId);
+    }
+  }
+
   function watchCanvasJob(
     jobId: string,
     requestStartedAt: number,
@@ -1111,10 +1443,15 @@ export function CanvasEditorClient({ projectId }: { projectId: string }) {
       setHistory((items) => [completedJob.result!, ...items]);
       return;
     }
+    const loadingMetadata = loadingNode.metadata as CanvasImageNodeMetadata;
     const resultNode = {
       ...createImageResultNode(completedJob.result, loadingNode.position),
       id: loadingNodeId,
     };
+    resultNode.metadata = {
+      ...(resultNode.metadata as CanvasImageNodeMetadata),
+      ...(loadingMetadata.channelId ? { channelId: loadingMetadata.channelId } : {}),
+    } satisfies CanvasImageNodeMetadata;
     const nextProject = {
       ...latest,
       data: {
@@ -1132,6 +1469,69 @@ export function CanvasEditorClient({ projectId }: { projectId: string }) {
     await saveProject(nextProject);
   }
 
+  async function replaceCanvasNodeWithCompletedJob(
+    completedJob: ImageJobPayload,
+    nodeId: string,
+  ) {
+    if (!completedJob.result) return;
+    const latest = projectRef.current;
+    if (!latest) return;
+    const targetNode = latest.data.nodes.find(
+      (node) => node.id === nodeId && node.type === "image",
+    );
+    if (!targetNode) {
+      setHistory((items) => [completedJob.result!, ...items]);
+      return;
+    }
+
+    const previousMetadata = targetNode.metadata as CanvasImageNodeMetadata;
+    const naturalSize = await readImageNaturalSize(completedJob.result.imageUrl);
+    const dimensions = getImageNodeDimensions(naturalSize.width, naturalSize.height);
+    const nextProject = {
+      ...latest,
+      data: {
+        ...latest.data,
+        nodes: latest.data.nodes.map((node) =>
+          node.id === nodeId
+            ? {
+                ...node,
+                title:
+                  targetNode.title === "局部修改中"
+                    ? "局部修改结果"
+                    : targetNode.title,
+                width: dimensions.width,
+                height: dimensions.height,
+                metadata: {
+                  ...previousMetadata,
+                  imageUrl: completedJob.result!.imageUrl,
+                  filePath: undefined,
+                  mode: "result",
+                  historyId: completedJob.result!.id,
+                  prompt: completedJob.result!.prompt,
+                  channelId: previousMetadata.channelId,
+                  model: completedJob.result!.model,
+                  size: completedJob.result!.size,
+                  quality: completedJob.result!.quality,
+                  outputFormat: completedJob.result!.outputFormat,
+                  status: "success",
+                  errorMessage: undefined,
+                  naturalWidth: naturalSize.width,
+                  naturalHeight: naturalSize.height,
+                  fileSize: completedJob.result!.fileSize,
+                } satisfies CanvasImageNodeMetadata,
+              }
+            : node,
+        ),
+      },
+    };
+    setProject(nextProject);
+    projectRef.current = nextProject;
+    setSelectedNodeId(nodeId);
+    setSelectedNodeIds([nodeId]);
+    setHistory((items) => [completedJob.result!, ...items]);
+    await saveProject(nextProject);
+  }
+
   function resumeCanvasJob(storedJob: StoredCanvasJob) {
     setIsGenerating(true);
     void watchCanvasJob(
@@ -1146,7 +1546,11 @@ export function CanvasEditorClient({ projectId }: { projectId: string }) {
             storedJob.requestStartedAt,
           );
         }
-        await applyCompletedCanvasJob(completedJob, storedJob.loadingNodeId);
+        if (storedJob.targetMode === "replace-node") {
+          await replaceCanvasNodeWithCompletedJob(completedJob, storedJob.loadingNodeId);
+        } else {
+          await applyCompletedCanvasJob(completedJob, storedJob.loadingNodeId);
+        }
       })
       .catch((err) => {
         const normalizedError = normalizeGenerationError(
@@ -1336,12 +1740,15 @@ export function CanvasEditorClient({ projectId }: { projectId: string }) {
         hideDockLabels={canvasSettings.hideToolbarText}
         isGenerating={isGenerating}
         isSaving={isSaving}
+        lastSavedAt={lastSavedAt}
         scale={viewport.k}
         selectionMode={selectionMode}
         showLibrary={showLibrary}
         title={project.title}
         onAddNode={addNode}
-        onBack={() => router.push("/canvas")}
+        onSave={saveProjectNow}
+        onGoHome={() => router.push("/", { scroll: false })}
+        onGoCanvasList={() => router.push("/canvas", { scroll: false })}
         onBackgroundModeChange={(backgroundMode) =>
           patchProjectData((current) => ({
             ...current,
@@ -1353,6 +1760,8 @@ export function CanvasEditorClient({ projectId }: { projectId: string }) {
         onGenerate={() => void generateFromCanvas()}
         onRedo={redoCanvasChange}
         onResetView={() => updateViewport({ x: 0, y: 0, k: 1 })}
+        onCreateCanvas={() => void createNewCanvas()}
+        onDeleteCurrentCanvas={() => void deleteCurrentCanvas(projectId)}
         onToggleLibrary={() => setShowLibrary((current) => !current)}
         onToggleSelectionMode={() => setSelectionMode((current) => !current)}
         onOpenSettings={() => setShowSettingsDialog(true)}
@@ -1383,6 +1792,20 @@ export function CanvasEditorClient({ projectId }: { projectId: string }) {
         }}
         onCanvasPointerMove={handleCanvasPointerMove}
         onCanvasPointerUp={() => {
+          if (dragFrameRef.current !== null) {
+            cancelAnimationFrame(dragFrameRef.current);
+            dragFrameRef.current = null;
+          }
+          if (pendingDragPointRef.current) {
+            applyDragPosition(pendingDragPointRef.current);
+            pendingDragPointRef.current = null;
+          }
+          if (dragState && dragMovedRef.current) {
+            pushHistorySnapshot(dragUndoSnapshotRef.current);
+            void saveProject(projectRef.current);
+          }
+          dragUndoSnapshotRef.current = null;
+          dragMovedRef.current = false;
           setDragState(null);
           setActiveConnection((current) => {
             if (!current) return current;
@@ -1443,11 +1866,13 @@ export function CanvasEditorClient({ projectId }: { projectId: string }) {
             related={relatedNodeIds.has(node.id)}
             scale={viewport.k}
             selected={selectedNodeIds.includes(node.id)}
+            showImageInfoBadge={canvasSettings.showImageInfoBadge}
             onConnectEnd={finishConnection}
             onConnectStart={startConnection}
             onDelete={deleteNode}
             onDragStart={handleNodeDragStart}
             onGenerate={(id) => void generateFromCanvas(id)}
+            onLocalEdit={(payload) => void editImageWithMask(payload)}
             onReplaceImage={(id, file) => void replaceNodeImage(id, file)}
             onResize={(id, width, height) => patchNode(id, { width, height })}
             onSelect={(id, additive) => {
@@ -1486,6 +1911,7 @@ export function CanvasEditorClient({ projectId }: { projectId: string }) {
       </InfiniteCanvas>
 
       <CanvasNodeInspector
+        canvasSettings={canvasSettings}
         history={history}
         isHistoryLoading={isHistoryLoading}
         job={job}
@@ -1494,6 +1920,7 @@ export function CanvasEditorClient({ projectId }: { projectId: string }) {
         showLibrary={showLibrary}
         onCloseLibrary={() => setShowLibrary(false)}
         onDeleteNode={deleteNode}
+        onDeleteHistory={(item) => void deleteHistoryImage(item)}
         onGenerateNode={(id) => void generateFromCanvas(id)}
         onInsertHistory={insertHistoryImage}
         onPatchNode={patchNode}
@@ -1523,10 +1950,45 @@ export function CanvasEditorClient({ projectId }: { projectId: string }) {
         onClose={() => setShowSettingsDialog(false)}
         onTabChange={setSettingsTab}
       />
+      <ConfirmActionDialog
+        state={confirmDialog}
+        onClose={() => setConfirmDialog(null)}
+      />
     </main>
   );
 }
 
+function ConfirmActionDialog({
+  state,
+  onClose,
+}: {
+  state: ConfirmDialogState | null;
+  onClose: () => void;
+}) {
+  return (
+    <AlertDialog open={Boolean(state)} onOpenChange={(open) => !open && onClose()}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{state?.title}</AlertDialogTitle>
+          <AlertDialogDescription>{state?.description}</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>取消</AlertDialogCancel>
+          <AlertDialogAction
+            onClick={() => {
+              const action = state?.onConfirm;
+              onClose();
+              void action?.();
+            }}
+          >
+            {state?.actionLabel || "确认"}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
+
 function cloneCanvasData(data: CanvasProjectData): CanvasProjectData {
   return structuredClone(data);
 }
@@ -1799,10 +2261,15 @@ function ShortcutDialog({
 }
 
 const SETTINGS_TABS = [
+  {
+    id: "channels",
+    title: "渠道配置",
+    description: "Base URL、密钥和模型",
+  },
   {
     id: "model",
-    title: "大模型配置",
-    description: "模型、接口和密钥来源",
+    title: "模型选择",
+    description: "当前生图模型",
   },
   {
     id: "interface",
@@ -1833,8 +2300,23 @@ function CanvasSettingsDialog({
   if (!open) return null;
 
   const patchSettings = (patch: Partial<CanvasSettings>) => {
-    onChange({ ...settings, ...patch });
+    onChange(normalizeCanvasSettings({ ...settings, ...patch }));
   };
+  const activeChannel =
+    settings.channels.find((channel) => channel.id === settings.selectedChannelId) ??
+    settings.channels[0];
+  const title =
+    activeTab === "channels"
+      ? "渠道配置"
+      : activeTab === "model"
+        ? "模型选择"
+        : "界面设置";
+  const description =
+    activeTab === "channels"
+      ? "渠道配置会以 JSON 存入数据库 settings 表，可直接拉取 OpenAI 兼容模型列表。"
+      : activeTab === "model"
+        ? "选择当前画布提交任务时使用的渠道和模型。"
+        : "调整画布工具栏在不同窗口尺寸下的展示方式。";
 
   return (
     <div
@@ -1844,8 +2326,8 @@ function CanvasSettingsDialog({
         if (event.target === event.currentTarget) onClose();
       }}
     >
-      <div className="grid max-h-[86vh] w-full max-w-3xl grid-cols-[210px_minmax(0,1fr)] overflow-hidden rounded-lg bg-white shadow-[0_24px_80px_rgba(24,24,27,.24)] ring-1 ring-zinc-200 max-md:grid-cols-1">
-        <aside className="border-r border-zinc-200 bg-zinc-50 p-3 max-md:border-b max-md:border-r-0">
+      <div className="grid h-[min(680px,calc(100vh-32px))] w-[min(960px,calc(100vw-32px))] grid-cols-[210px_minmax(0,1fr)] overflow-hidden rounded-lg bg-white shadow-[0_24px_80px_rgba(24,24,27,.24)] ring-1 ring-zinc-200 max-md:grid-cols-1 max-md:grid-rows-[auto_minmax(0,1fr)]">
+        <aside className="min-h-0 overflow-y-auto border-r border-zinc-200 bg-zinc-50 p-3 max-md:border-b max-md:border-r-0">
           <div className="flex items-center justify-between px-2 py-2">
             <div>
               <h2 className="text-base font-semibold text-zinc-950">设置</h2>
@@ -1884,12 +2366,10 @@ function CanvasSettingsDialog({
           <div className="mb-6 flex items-center justify-between gap-4">
             <div>
               <h3 className="text-base font-semibold text-zinc-950">
-                {activeTab === "model" ? "大模型配置" : "界面设置"}
+                {title}
               </h3>
               <p className="mt-1 text-sm text-zinc-500">
-                {activeTab === "model"
-                  ? "当前为本地界面配置记录，实际请求仍读取服务端环境变量。"
-                  : "调整画布工具栏在不同窗口尺寸下的展示方式。"}
+                {description}
               </p>
             </div>
             <button
@@ -1902,43 +2382,14 @@ function CanvasSettingsDialog({
             </button>
           </div>
 
-          {activeTab === "model" ? (
-            <div className="grid gap-5">
-              <div className="grid gap-2">
-                <Label htmlFor="canvas-model-name">默认模型</Label>
-                <Input
-                  id="canvas-model-name"
-                  value={settings.modelName}
-                  onChange={(event) =>
-                    patchSettings({ modelName: event.target.value })
-                  }
-                />
-              </div>
-              <div className="grid gap-2">
-                <Label htmlFor="canvas-base-url">接口地址来源</Label>
-                <Input
-                  id="canvas-base-url"
-                  value={settings.baseUrl}
-                  onChange={(event) =>
-                    patchSettings({ baseUrl: event.target.value })
-                  }
-                />
-              </div>
-              <div className="grid gap-2">
-                <Label htmlFor="canvas-api-key-source">密钥来源</Label>
-                <Input
-                  id="canvas-api-key-source"
-                  value={settings.apiKeySource}
-                  onChange={(event) =>
-                    patchSettings({ apiKeySource: event.target.value })
-                  }
-                />
-              </div>
-              <div className="rounded-md border border-zinc-200 bg-zinc-50 px-3 py-2 text-xs leading-5 text-zinc-500">
-                服务端生成接口目前使用 .env 中的 OPENAI_API_KEY 和
-                OPENAI_BASE_URL；这里先作为配置面板入口保留。
-              </div>
-            </div>
+          {activeTab === "channels" ? (
+            <ChannelSettingsPanel settings={settings} onChange={onChange} />
+          ) : activeTab === "model" ? (
+            <ModelSettingsPanel
+              activeChannel={activeChannel}
+              settings={settings}
+              onChange={onChange}
+            />
           ) : (
             <div className="grid gap-4">
               <div className="flex items-center justify-between gap-5 rounded-md border border-zinc-200 bg-white px-4 py-3">
@@ -1957,6 +2408,22 @@ function CanvasSettingsDialog({
                   }
                 />
               </div>
+              <div className="flex items-center justify-between gap-5 rounded-md border border-zinc-200 bg-white px-4 py-3">
+                <div className="min-w-0">
+                  <div className="text-sm font-medium text-zinc-950">
+                    显示图片信息
+                  </div>
+                  <div className="mt-1 text-xs leading-5 text-zinc-500">
+                    开启后会在图片节点右下角显示分辨率和文件大小角标。
+                  </div>
+                </div>
+                <Switch
+                  checked={settings.showImageInfoBadge}
+                  onCheckedChange={(checked) =>
+                    patchSettings({ showImageInfoBadge: checked })
+                  }
+                />
+              </div>
             </div>
           )}
         </section>
@@ -1965,40 +2432,554 @@ function CanvasSettingsDialog({
   );
 }
 
+function ChannelSettingsPanel({
+  settings,
+  onChange,
+}: {
+  settings: CanvasSettings;
+  onChange: (settings: CanvasSettings) => void;
+}) {
+  const [loadingChannelIds, setLoadingChannelIds] = useState<string[]>([]);
+  const [visibleKeyIds, setVisibleKeyIds] = useState<string[]>([]);
+
+  const patchChannel = (id: string, patch: Partial<CanvasModelChannel>) => {
+    onChange(
+      normalizeCanvasSettings({
+        ...settings,
+        channels: settings.channels.map((channel) =>
+          channel.id === id ? { ...channel, ...patch } : channel,
+        ),
+      }),
+    );
+  };
+
+  const addChannel = () => {
+    const channel: CanvasModelChannel = {
+      id: crypto.randomUUID(),
+      name: `渠道 ${settings.channels.length + 1}`,
+      baseUrl: "https://api.openai.com",
+      apiKey: "",
+      models: [],
+    };
+    onChange(
+      normalizeCanvasSettings({
+        ...settings,
+        selectedChannelId: channel.id,
+        channels: [...settings.channels, channel],
+      }),
+    );
+  };
+
+  const deleteChannel = (id: string) => {
+    if (settings.channels.length <= 1) {
+      toast.error("至少保留一个渠道");
+      return;
+    }
+    const channels = settings.channels.filter((channel) => channel.id !== id);
+    onChange(
+      normalizeCanvasSettings({
+        ...settings,
+        channels,
+        selectedChannelId:
+          settings.selectedChannelId === id
+            ? channels[0]?.id
+            : settings.selectedChannelId,
+      }),
+    );
+  };
+
+  const pullModels = async (channel: CanvasModelChannel) => {
+    setLoadingChannelIds((current) => [...new Set([...current, channel.id])]);
+    try {
+      const response = await fetch("/api/canvas/models", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          baseUrl: channel.baseUrl,
+          apiKey: channel.apiKey,
+        }),
+      });
+      const payload = await response.json().catch(() => ({}));
+      if (!response.ok) {
+        throw new Error(payload.error || "模型拉取失败");
+      }
+      const models = Array.isArray(payload.models)
+        ? payload.models.filter((model: unknown): model is string => typeof model === "string")
+        : [];
+      patchChannel(channel.id, { models });
+      if (
+        settings.selectedChannelId === channel.id &&
+        models.length &&
+        !models.includes(getDefaultModel(settings, "image"))
+      ) {
+        onChange(
+          normalizeCanvasSettings({
+            ...settings,
+            selectedModel: models[0],
+            modelPreferences: {
+              ...settings.modelPreferences,
+              image: models,
+            },
+            defaultModels: {
+              ...settings.defaultModels,
+              image: models[0],
+            },
+            channels: settings.channels.map((item) =>
+              item.id === channel.id ? { ...item, models } : item,
+            ),
+          }),
+        );
+      }
+      toast.success(`已拉取 ${models.length} 个模型`);
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "模型拉取失败");
+    } finally {
+      setLoadingChannelIds((current) =>
+        current.filter((channelId) => channelId !== channel.id),
+      );
+    }
+  };
+
+  const pullAllModels = async () => {
+    for (const channel of settings.channels) {
+      await pullModels(channel);
+    }
+  };
+
+  const deleteChannelModel = (channel: CanvasModelChannel, model: string) => {
+    const models = channel.models.filter((item) => item !== model);
+    onChange(
+      normalizeCanvasSettings({
+        ...settings,
+        channels: settings.channels.map((item) =>
+          item.id === channel.id ? { ...item, models } : item,
+        ),
+        modelPreferences: {
+          ...settings.modelPreferences,
+          image: settings.modelPreferences.image.filter((item) => item !== model),
+          video: settings.modelPreferences.video.filter((item) => item !== model),
+          text: settings.modelPreferences.text.filter((item) => item !== model),
+          audio: settings.modelPreferences.audio.filter((item) => item !== model),
+        },
+        defaultModels: {
+          ...settings.defaultModels,
+          image:
+            settings.defaultModels.image === model
+              ? settings.modelPreferences.image.find((item) => item !== model) ?? ""
+              : settings.defaultModels.image,
+          video:
+            settings.defaultModels.video === model
+              ? settings.modelPreferences.video.find((item) => item !== model) ?? ""
+              : settings.defaultModels.video,
+          text:
+            settings.defaultModels.text === model
+              ? settings.modelPreferences.text.find((item) => item !== model) ?? ""
+              : settings.defaultModels.text,
+          audio:
+            settings.defaultModels.audio === model
+              ? settings.modelPreferences.audio.find((item) => item !== model) ?? ""
+              : settings.defaultModels.audio,
+        },
+      }),
+    );
+  };
+
+  return (
+    <div className="grid gap-4">
+      <div className="flex items-center justify-between gap-4 rounded-md border border-zinc-200 bg-zinc-50 px-4 py-3">
+        <div>
+          <div className="text-sm font-semibold text-zinc-950">多渠道聚合</div>
+          <div className="mt-1 text-xs leading-5 text-zinc-500">
+            每个渠道保存自己的 Base URL、API Key 和模型列表；提交任务时使用当前选择的渠道。
+          </div>
+        </div>
+        <div className="flex shrink-0 items-center gap-2">
+          <Button variant="outline" onClick={() => void pullAllModels()}>
+            <RefreshCw className="size-4" />
+            拉取全部
+          </Button>
+          <Button onClick={addChannel}>
+            <Plus className="size-4" />
+            新增渠道
+          </Button>
+        </div>
+      </div>
+
+      {settings.channels.map((channel) => {
+        const isLoading = loadingChannelIds.includes(channel.id);
+        const keyVisible = visibleKeyIds.includes(channel.id);
+        return (
+          <div
+            key={channel.id}
+            className="rounded-md border border-zinc-200 bg-white p-4"
+          >
+            <div className="mb-4 flex items-start justify-between gap-4">
+              <div>
+                <div className="text-sm font-semibold text-zinc-950">
+                  {channel.name || "未命名渠道"}
+                </div>
+                <div className="mt-1 text-xs text-zinc-500">
+                  已保存 {channel.models.length} 个模型
+                </div>
+              </div>
+              <div className="flex items-center gap-2">
+                <Button
+                  size="sm"
+                  variant="outline"
+                  disabled={isLoading}
+                  onClick={() => void pullModels(channel)}
+                >
+                  {isLoading ? <Loader2 className="size-4 animate-spin" /> : <RefreshCw className="size-4" />}
+                  拉取模型
+                </Button>
+                <Button
+                  size="icon"
+                  variant="outline"
+                  onClick={() => deleteChannel(channel.id)}
+                  title="删除渠道"
+                >
+                  <Trash2 className="size-4 text-red-500" />
+                </Button>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-4 max-md:grid-cols-1">
+              <div className="grid gap-2">
+                <Label>渠道名称</Label>
+                <Input
+                  value={channel.name}
+                  onChange={(event) =>
+                    patchChannel(channel.id, { name: event.target.value })
+                  }
+                />
+              </div>
+              <div className="grid gap-2">
+                <Label>Base URL</Label>
+                <Input
+                  value={channel.baseUrl}
+                  placeholder="https://api.openai.com"
+                  onChange={(event) =>
+                    patchChannel(channel.id, { baseUrl: event.target.value })
+                  }
+                />
+              </div>
+              <div className="grid gap-2 md:col-span-2">
+                <Label>API Key</Label>
+                <div className="relative">
+                  <Input
+                    className="pr-10"
+                    type={keyVisible ? "text" : "password"}
+                    value={channel.apiKey}
+                    onChange={(event) =>
+                      patchChannel(channel.id, { apiKey: event.target.value })
+                    }
+                  />
+                  <button
+                    type="button"
+                    className="absolute right-2 top-1/2 flex size-6 -translate-y-1/2 items-center justify-center rounded text-zinc-400 transition hover:bg-zinc-100 hover:text-zinc-700"
+                    onClick={() =>
+                      setVisibleKeyIds((current) =>
+                        current.includes(channel.id)
+                          ? current.filter((id) => id !== channel.id)
+                          : [...current, channel.id],
+                      )
+                    }
+                    title={keyVisible ? "隐藏 Key" : "显示 Key"}
+                  >
+                    {keyVisible ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            <div className="mt-5 grid gap-2">
+              <Label>模型列表</Label>
+              <div className="thin-scrollbar flex min-h-36 max-h-44 flex-wrap content-start gap-2 overflow-y-auto rounded-md border border-zinc-200 bg-zinc-50 p-3">
+                {channel.models.length ? (
+                  channel.models.map((model) => (
+                    <div
+                      key={model}
+                      className="flex max-w-full items-center overflow-hidden rounded-md border border-zinc-200 bg-white text-sm text-zinc-700 shadow-sm"
+                    >
+                      <span className="min-w-0 truncate px-2.5 py-1.5" title={model}>
+                        {model}
+                      </span>
+                      <button
+                        type="button"
+                        className="flex size-7 shrink-0 items-center justify-center border-l border-zinc-200 text-zinc-400 transition hover:bg-red-50 hover:text-red-500"
+                        onClick={() => deleteChannelModel(channel, model)}
+                        title="删除模型"
+                      >
+                        <X className="size-3.5" />
+                      </button>
+                    </div>
+                  ))
+                ) : (
+                  <div className="flex h-full min-h-28 w-full items-center justify-center rounded-md border border-dashed border-zinc-300 bg-white text-sm text-zinc-400">
+                    暂无模型
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+function ModelSettingsPanel({
+  activeChannel,
+  settings,
+  onChange,
+}: {
+  activeChannel: CanvasModelChannel | undefined;
+  settings: CanvasSettings;
+  onChange: (settings: CanvasSettings) => void;
+}) {
+  const allModels = activeChannel?.models.length
+    ? activeChannel.models
+    : [getDefaultModel(settings, "image")].filter(Boolean);
+
+  const patchPreferences = (
+    kind: CanvasModelKind,
+    models: string[],
+    defaultModel?: string,
+  ) => {
+    onChange(
+      normalizeCanvasSettings({
+        ...settings,
+        selectedModel:
+          kind === "image"
+            ? defaultModel ?? settings.defaultModels.image
+            : settings.selectedModel,
+        modelPreferences: {
+          ...settings.modelPreferences,
+          [kind]: models,
+        },
+        defaultModels: {
+          ...settings.defaultModels,
+          [kind]: defaultModel ?? settings.defaultModels[kind],
+        },
+      }),
+    );
+  };
+
+  const togglePreferredModel = (kind: CanvasModelKind, model: string) => {
+    const current = settings.modelPreferences[kind];
+    const nextModels = current.includes(model)
+      ? current.filter((item) => item !== model)
+      : [...current, model];
+    const fallback = nextModels[0] ?? "";
+    const nextDefault = nextModels.includes(settings.defaultModels[kind])
+      ? settings.defaultModels[kind]
+      : fallback;
+    patchPreferences(kind, nextModels, nextDefault);
+  };
+
+  const setDefaultModel = (kind: CanvasModelKind, model: string) => {
+    onChange(
+      normalizeCanvasSettings({
+        ...settings,
+        selectedModel: kind === "image" ? model : settings.selectedModel,
+        defaultModels: {
+          ...settings.defaultModels,
+          [kind]: model,
+        },
+      }),
+    );
+  };
+
+  const groups = [
+    { kind: "image", label: "生图模型可选项", defaultLabel: "默认生图模型" },
+    { kind: "video", label: "视频模型可选项", defaultLabel: "默认视频模型" },
+    { kind: "text", label: "文本模型可选项", defaultLabel: "默认文本模型" },
+    { kind: "audio", label: "音频模型可选项", defaultLabel: "默认音频模型" },
+  ] satisfies Array<{
+    kind: CanvasModelKind;
+    label: string;
+    defaultLabel: string;
+  }>;
+
+  return (
+    <div className="grid gap-6">
+      <div className="rounded-md border border-zinc-200 bg-white p-4">
+        <div className="text-sm font-semibold text-zinc-950">
+          默认模型和可选项
+        </div>
+        <div className="mt-1 text-xs leading-5 text-zinc-500">
+          可选项决定各处下拉框展示哪些模型；同名模型会以括号里的渠道名区分。
+        </div>
+      </div>
+
+      <div className="grid gap-2">
+        <Label>渠道</Label>
+        <select
+          className="flex h-9 w-full rounded-md border border-zinc-200 bg-white px-3 py-1 text-sm text-zinc-950 shadow-xs outline-none transition-colors focus:border-zinc-400"
+          value={settings.selectedChannelId}
+          onChange={(event) => {
+            const channel =
+              settings.channels.find((item) => item.id === event.target.value) ??
+              settings.channels[0];
+            onChange(
+              normalizeCanvasSettings({
+                ...settings,
+                selectedChannelId: channel.id,
+                selectedModel: channel.models[0] ?? settings.selectedModel,
+              }),
+            );
+          }}
+        >
+          {settings.channels.map((channel) => (
+            <option key={channel.id} value={channel.id}>
+              {channel.name}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      <div className="grid grid-cols-2 gap-6 max-md:grid-cols-1">
+        {groups.map((group) => (
+          <ModelKindPicker
+            key={group.kind}
+            allModels={allModels}
+            defaultLabel={group.defaultLabel}
+            defaultModel={settings.defaultModels[group.kind]}
+            label={group.label}
+            selectedModels={settings.modelPreferences[group.kind]}
+            onDefaultChange={(model) => setDefaultModel(group.kind, model)}
+            onToggleModel={(model) => togglePreferredModel(group.kind, model)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function ModelKindPicker({
+  allModels,
+  defaultLabel,
+  defaultModel,
+  label,
+  selectedModels,
+  onDefaultChange,
+  onToggleModel,
+}: {
+  allModels: string[];
+  defaultLabel: string;
+  defaultModel: string;
+  label: string;
+  selectedModels: string[];
+  onDefaultChange: (model: string) => void;
+  onToggleModel: (model: string) => void;
+}) {
+  const defaultValue = selectedModels.includes(defaultModel)
+    ? defaultModel
+    : selectedModels[0] ?? "";
+
+  return (
+    <div className="grid gap-3">
+      <Label>{label}</Label>
+      <div className="thin-scrollbar flex min-h-24 max-h-32 flex-wrap content-start gap-2 overflow-y-auto rounded-md border border-zinc-200 bg-zinc-50 p-2">
+        {allModels.length ? (
+          allModels.map((model) => {
+            const selected = selectedModels.includes(model);
+            return (
+              <button
+                key={model}
+                type="button"
+                className={`max-w-full truncate rounded-md border px-2.5 py-1.5 text-left text-sm transition ${
+                  selected
+                    ? "border-zinc-950 bg-white text-zinc-950 shadow-sm"
+                    : "border-zinc-200 bg-white text-zinc-500 hover:border-zinc-300 hover:text-zinc-950"
+                }`}
+                onClick={() => onToggleModel(model)}
+                title={model}
+              >
+                {model}
+              </button>
+            );
+          })
+        ) : (
+          <span className="px-1 py-1.5 text-sm text-zinc-400">暂无模型</span>
+        )}
+      </div>
+      <div className="grid gap-2">
+        <Label>{defaultLabel}</Label>
+        <select
+          className="flex h-9 w-full rounded-md border border-zinc-200 bg-white px-3 py-1 text-sm text-zinc-950 shadow-xs outline-none transition-colors focus:border-zinc-400"
+          disabled={!selectedModels.length}
+          value={defaultValue}
+          onChange={(event) => onDefaultChange(event.target.value)}
+        >
+          {selectedModels.map((model) => (
+            <option key={model} value={model}>
+              {model}
+            </option>
+          ))}
+        </select>
+      </div>
+    </div>
+  );
+}
+
+function getDefaultModel(settings: CanvasSettings, kind: CanvasModelKind) {
+  return settings.defaultModels[kind] || settings.modelPreferences[kind][0] || "";
+}
+
+function resolveCanvasRequestRoute(
+  settings: CanvasSettings,
+  channelId: string | undefined,
+  model: string | undefined,
+) {
+  const channel =
+    (channelId
+      ? settings.channels.find((candidate) => candidate.id === channelId)
+      : undefined) ??
+    settings.channels.find(
+      (candidate) => candidate.id === settings.selectedChannelId,
+    ) ??
+    settings.channels[0];
+  const resolvedModel =
+    model?.trim() ||
+    getDefaultModel(settings, "image") ||
+    channel?.models[0] ||
+    defaultCanvasConfig.model;
+
+  return {
+    channel,
+    model: resolvedModel,
+  };
+}
+
 function isShortcutSeparator(key: string) {
   return key === "+" || key === "/";
 }
 
-async function imageUrlToFile(url: string, filename: string, filePath?: string) {
-  const serverResponse = await fetch("/api/canvas/image-file", {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ filePath, imageUrl: url }),
-  });
-  if (serverResponse.ok) {
-    const blob = await serverResponse.blob();
-    return new File([blob], filename, {
-      type: blob.type || "image/png",
-    });
+function appendImageReference(
+  formData: FormData,
+  reference: { imageUrl: string; filePath?: string; filename: string },
+) {
+  // 画布里的图片通常已经持久化到了本地 public/generated 或对象存储。
+  // 这里不再让浏览器先把图片下载成 Blob 再上传回服务端，避免对象存储 CORS
+  // 以及“对象存储 -> 后端 -> 前端 -> 后端”的重复大文件传输。
+  // /api/images 会在服务端根据 filePath/imageUrl 直读图片，再提交给图片模型。
+  formData.append("imageRef", JSON.stringify(reference));
+}
+
+function appendChannelConfig(
+  formData: FormData,
+  channel: CanvasModelChannel | undefined,
+) {
+  if (!channel) return;
+  formData.append("channelId", channel.id);
+  formData.append("channelName", channel.name);
+  if (channel.baseUrl.trim()) {
+    formData.append("channelBaseUrl", channel.baseUrl.trim());
   }
-
-  const resolvedUrl = new URL(url, window.location.origin).toString();
-  let response: Response;
-
-  try {
-    response = await fetch(resolvedUrl, { cache: "no-store" });
-  } catch {
-    throw new Error(`读取参考图片失败：无法访问 ${url}`);
+  if (channel.apiKey.trim()) {
+    formData.append("channelApiKey", channel.apiKey.trim());
   }
-
-  if (!response.ok) {
-    throw new Error(`读取参考图片失败：HTTP ${response.status} ${url}`);
-  }
-
-  const blob = await response.blob();
-  return new File([blob], filename, {
-    type: blob.type || "image/png",
-  });
 }
 
 async function readImageNaturalSize(url: string) {
@@ -2105,6 +3086,8 @@ function readStoredCanvasJob(projectId: string) {
         typeof payload.requestStartedAt === "number"
           ? payload.requestStartedAt
           : getNowMs(),
+      targetMode:
+        payload.targetMode === "replace-node" ? "replace-node" : "new-node",
     } satisfies StoredCanvasJob;
   } catch {
     return null;
diff --git a/src/components/canvas/canvas-node-inspector.tsx b/src/components/canvas/canvas-node-inspector.tsx
index 9110db5..3f43f33 100644
--- a/src/components/canvas/canvas-node-inspector.tsx
+++ b/src/components/canvas/canvas-node-inspector.tsx
@@ -8,10 +8,21 @@ import {
   type FormEvent,
   type KeyboardEvent,
 } from "react";
-import { FileText, ImageIcon, Plus, Sparkles, Trash2, Upload, X } from "lucide-react";
+import { Archive, FileText, ImageIcon, Search, Sparkles, Trash2, Upload, X } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
 import {
   Select,
   SelectContent,
@@ -23,6 +34,7 @@ import { Switch } from "@/components/ui/switch";
 import { splitPromptSegments } from "@/components/canvas/prompt-mention-preview";
 import type { PromptMentionSource } from "@/lib/canvas/prompt-mentions";
 import { cn } from "@/lib/utils";
+import type { CanvasSettings } from "@/lib/canvas/settings";
 import type {
   CanvasConfigNodeMetadata,
   CanvasImageNodeMetadata,
@@ -45,11 +57,13 @@ type CanvasNodeInspectorProps = {
   isHistoryLoading: boolean;
   job: ImageJobPayload | null;
   showLibrary: boolean;
+  canvasSettings: CanvasSettings;
   promptMentionSources: PromptMentionSource[];
   onPatchNode: (id: string, patch: Partial<CanvasNode>) => void;
   onDeleteNode: (id: string) => void;
   onGenerateNode: (id: string) => void;
   onInsertHistory: (item: HistoryItem) => void;
+  onDeleteHistory: (item: HistoryItem) => void;
   onUploadImage: (file: File) => void;
   onReplaceNodeImage: (nodeId: string, file: File) => void;
   onCloseLibrary: () => void;
@@ -61,21 +75,26 @@ export function CanvasNodeInspector({
   isHistoryLoading,
   job,
   showLibrary,
+  canvasSettings,
   promptMentionSources,
   onPatchNode,
   onDeleteNode,
   onGenerateNode,
   onInsertHistory,
+  onDeleteHistory,
   onUploadImage,
   onReplaceNodeImage,
   onCloseLibrary,
 }: CanvasNodeInspectorProps) {
   const [historyFilter, setHistoryFilter] = useState("");
+  const [libraryKind, setLibraryKind] = useState<"all" | "text" | "image" | "video">("all");
   const filteredHistory = history.filter((item) =>
     `${item.prompt} ${item.model} ${item.size}`
       .toLowerCase()
       .includes(historyFilter.toLowerCase()),
   );
+  const visibleHistory =
+    libraryKind === "all" || libraryKind === "image" ? filteredHistory : [];
 
   if (!node && !showLibrary && !job?.progressMessage) {
     return null;
@@ -91,6 +110,7 @@ export function CanvasNodeInspector({
           <FloatingCard className="pointer-events-auto flex min-h-0 flex-1 flex-col overflow-hidden border border-zinc-200">
             <div className="thin-scrollbar min-h-0 flex-1 overflow-auto pr-1">
               <SelectedNodeForm
+                canvasSettings={canvasSettings}
                 node={node}
                 promptMentionSources={promptMentionSources}
               onDeleteNode={onDeleteNode}
@@ -102,92 +122,27 @@ export function CanvasNodeInspector({
           </FloatingCard>
         ) : null}
 
-        {showLibrary ? (
-          <FloatingCard className="pointer-events-auto max-h-[calc(100vh-150px)] overflow-auto">
-            <div className="flex items-center justify-between gap-3">
-              <div>
-                <div className="text-sm font-semibold text-zinc-950">素材库</div>
-                <div className="mt-1 text-xs text-zinc-500">
-                  从历史或本地图片插入参考节点
-                </div>
-              </div>
-              <button
-                type="button"
-                className="flex size-8 items-center justify-center rounded-full text-zinc-500 transition hover:bg-zinc-100 hover:text-zinc-950"
-                onClick={onCloseLibrary}
-              >
-                <X className="size-4" />
-              </button>
-            </div>
-
-            <div className="mt-4 flex items-center justify-between gap-3">
-              <Input
-                className="h-10 rounded-xl border-zinc-200 bg-white"
-                placeholder="搜索提示词、模型或尺寸..."
-                value={historyFilter}
-                onChange={(event) => setHistoryFilter(event.target.value)}
-              />
-              <label className="inline-flex h-10 shrink-0 cursor-pointer items-center gap-2 rounded-xl bg-zinc-950 px-3 text-sm font-medium text-white hover:bg-zinc-800">
-                <Upload className="size-4" />
-                上传
-                <input
-                  className="hidden"
-                  type="file"
-                  accept="image/*"
-                  onChange={(event) => {
-                    const file = event.target.files?.[0];
-                    if (file) onUploadImage(file);
-                    event.currentTarget.value = "";
-                  }}
-                />
-              </label>
-            </div>
-
-            <div className="mt-4 grid gap-2">
-              {isHistoryLoading ? (
-                <LibraryPlaceholder>正在加载历史...</LibraryPlaceholder>
-              ) : null}
-              {!isHistoryLoading && filteredHistory.length === 0 ? (
-                <LibraryPlaceholder>暂无可插入的历史图片。</LibraryPlaceholder>
-              ) : null}
-              {filteredHistory.slice(0, 10).map((item) => (
-                <button
-                  key={item.id}
-                  type="button"
-                  className="flex items-center gap-3 rounded-2xl border border-zinc-200 bg-white p-2.5 text-left transition hover:border-zinc-950 hover:shadow-[0_10px_24px_rgba(24,24,27,.08)]"
-                  onClick={() => onInsertHistory(item)}
-                >
-                  <div className="flex size-16 shrink-0 items-center justify-center overflow-hidden rounded-xl bg-zinc-900">
-                    {item.imageUrl ? (
-                      <img
-                        alt={item.prompt}
-                        className="h-full w-full object-cover"
-                        src={item.imageUrl}
-                      />
-                    ) : (
-                      <ImageIcon className="size-5 text-white/60" />
-                    )}
-                  </div>
-                  <div className="min-w-0 flex-1">
-                    <div className="line-clamp-2 text-sm leading-5 text-zinc-700">
-                      {item.prompt || "无提示词"}
-                    </div>
-                    <div className="mt-1 text-[11px] text-zinc-500">
-                      {item.model} · {item.size}
-                    </div>
-                  </div>
-                  <Plus className="size-4 shrink-0 text-zinc-500" />
-                </button>
-              ))}
-            </div>
-          </FloatingCard>
-        ) : null}
       </div>
+      {showLibrary ? (
+        <MaterialLibraryDialog
+          filter={historyFilter}
+          isLoading={isHistoryLoading}
+          items={visibleHistory}
+          kind={libraryKind}
+          onClose={onCloseLibrary}
+          onDelete={onDeleteHistory}
+          onFilterChange={setHistoryFilter}
+          onInsert={onInsertHistory}
+          onKindChange={setLibraryKind}
+          onUpload={onUploadImage}
+        />
+      ) : null}
     </div>
   );
 }
 
 function SelectedNodeForm({
+  canvasSettings,
   node,
   promptMentionSources,
   onPatchNode,
@@ -195,6 +150,7 @@ function SelectedNodeForm({
   onGenerateNode,
   onReplaceNodeImage,
 }: {
+  canvasSettings: CanvasSettings;
   node: CanvasNode;
   promptMentionSources: PromptMentionSource[];
   onPatchNode: (id: string, patch: Partial<CanvasNode>) => void;
@@ -218,12 +174,12 @@ function SelectedNodeForm({
           </div>
         </div>
         <div className="flex items-center gap-1">
-          {node.type === "image" ? (
+          {node.type === "image" || node.type === "prompt" ? (
             <Button
               className="rounded-full bg-zinc-950 text-white shadow-none hover:bg-zinc-800"
               size="icon"
               onClick={() => onGenerateNode(node.id)}
-              title="从当前图像节点生成"
+              title={node.type === "prompt" ? "从当前提示词生成" : "从当前图像节点生成"}
             >
               <Sparkles />
             </Button>
@@ -253,11 +209,13 @@ function SelectedNodeForm({
           <PromptFields
             mentionSources={promptMentionSources}
             node={node}
+            onGenerateNode={onGenerateNode}
             onPatchNode={onPatchNode}
           />
         ) : null}
         {node.type === "config" ? (
           <ConfigFields
+            canvasSettings={canvasSettings}
             node={node}
             onGenerateNode={onGenerateNode}
             onPatchNode={onPatchNode}
@@ -265,6 +223,7 @@ function SelectedNodeForm({
         ) : null}
         {node.type === "image" ? (
           <ImageFields
+            canvasSettings={canvasSettings}
             mentionSources={promptMentionSources}
             node={node}
             onPatchNode={onPatchNode}
@@ -279,28 +238,266 @@ function SelectedNodeForm({
 function PromptFields({
   mentionSources,
   node,
+  onGenerateNode,
   onPatchNode,
 }: {
   mentionSources: PromptMentionSource[];
   node: CanvasNode;
+  onGenerateNode: (id: string) => void;
   onPatchNode: (id: string, patch: Partial<CanvasNode>) => void;
 }) {
   const metadata = node.metadata as CanvasPromptNodeMetadata;
-  function patchPrompt(nextPrompt: string) {
+  function patch(next: Partial<CanvasPromptNodeMetadata>) {
     onPatchNode(node.id, {
-      metadata: { ...metadata, prompt: nextPrompt },
+      metadata: { ...metadata, ...next },
     });
   }
 
   return (
-    <MentionPromptEditor
-      emptyState="当前提示词节点还没有上游图片素材或文本，连接节点后即可使用 `@` 引用。"
-      mentionHelp="只允许引用已连接到当前提示词节点的图片素材或文本。"
-      mentionSources={mentionSources}
-      placeholder={mentionSources.length ? "输入提示词，键入 @ 引用已连接素材" : "输入提示词"}
-      value={metadata.prompt || ""}
-      onChange={patchPrompt}
-    />
+    <>
+      <Field label="正向提示词">
+        <MentionPromptEditor
+          emptyState="当前提示词节点还没有上游图片素材或文本，连接节点后即可使用 `@` 引用。"
+          mentionHelp="只允许引用已连接到当前提示词节点的图片素材或文本。"
+          mentionSources={mentionSources}
+          placeholder={mentionSources.length ? "输入提示词，键入 @ 引用已连接素材" : "输入提示词"}
+          value={metadata.prompt || ""}
+          onChange={(prompt) => patch({ prompt })}
+        />
+      </Field>
+      <div className="flex items-center justify-between rounded-2xl bg-zinc-100 p-3">
+        <div>
+          <Label className="text-xs text-zinc-800">输入反向提示词</Label>
+          <div className="mt-1 text-[11px] text-zinc-500">
+            开启后会作为排除内容随生成请求发送
+          </div>
+        </div>
+        <Switch
+          checked={Boolean(metadata.enableNegativePrompt)}
+          onCheckedChange={(enableNegativePrompt) =>
+            patch({ enableNegativePrompt })
+          }
+        />
+      </div>
+      {metadata.enableNegativePrompt ? (
+        <Field label="反向提示词">
+          <MentionPromptEditor
+            emptyState="反向提示词也可以引用已连接素材或文本，例如排除某个风格、元素或构图。"
+            mentionHelp="反向提示词开启后才会参与生成；关闭开关会保留文本但不发送。"
+            mentionSources={mentionSources}
+            placeholder="例如：不要文字、水印、畸形手指、低清晰度"
+            value={metadata.negativePrompt || ""}
+            onChange={(negativePrompt) => patch({ negativePrompt })}
+          />
+        </Field>
+      ) : null}
+      <button
+        type="button"
+        className="flex h-12 w-full items-center justify-center rounded-2xl bg-zinc-950 text-sm font-medium text-white transition hover:bg-zinc-800"
+        onClick={() => onGenerateNode(node.id)}
+      >
+        从提示词生成图片
+      </button>
+    </>
+  );
+}
+
+type MaterialKind = "all" | "text" | "image" | "video";
+
+const materialTabs: Array<{ id: MaterialKind; label: string }> = [
+  { id: "all", label: "全部" },
+  { id: "text", label: "文本" },
+  { id: "image", label: "图片" },
+  { id: "video", label: "视频" },
+];
+
+function MaterialLibraryDialog({
+  filter,
+  isLoading,
+  items,
+  kind,
+  onClose,
+  onDelete,
+  onFilterChange,
+  onInsert,
+  onKindChange,
+  onUpload,
+}: {
+  filter: string;
+  isLoading: boolean;
+  items: HistoryItem[];
+  kind: MaterialKind;
+  onClose: () => void;
+  onDelete: (item: HistoryItem) => void;
+  onFilterChange: (value: string) => void;
+  onInsert: (item: HistoryItem) => void;
+  onKindChange: (kind: MaterialKind) => void;
+  onUpload: (file: File) => void;
+}) {
+  return (
+    <div
+      className="pointer-events-auto absolute inset-0 z-[95] flex items-center justify-center bg-black/10 p-6 backdrop-blur-[1px]"
+      onMouseDown={(event) => {
+        if (event.target === event.currentTarget) onClose();
+      }}
+    >
+      <div
+        className="flex h-[min(620px,calc(100vh-48px))] w-[min(860px,calc(100vw-48px))] flex-col rounded-xl bg-white shadow-[0_24px_80px_rgba(24,24,27,.18)] ring-1 ring-zinc-200"
+        onMouseDown={(event) => event.stopPropagation()}
+      >
+        <div className="flex shrink-0 items-center justify-between border-b border-zinc-200 px-6 py-4">
+          <h2 className="text-base font-semibold text-zinc-950">选择素材</h2>
+          <button
+            type="button"
+            className="flex size-8 items-center justify-center rounded-full text-zinc-500 transition hover:bg-zinc-100 hover:text-zinc-950"
+            onClick={onClose}
+            title="关闭"
+          >
+            <X className="size-5" />
+          </button>
+        </div>
+        <div className="shrink-0 px-12 pt-3">
+          <div className="relative">
+            <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-zinc-400" />
+            <Input
+              className="h-9 rounded border-zinc-300 bg-white pl-9"
+              placeholder="搜索素材"
+              value={filter}
+              onChange={(event) => onFilterChange(event.target.value)}
+            />
+          </div>
+          <div className="mt-3 flex items-center justify-between gap-4">
+            <div className="flex items-center gap-5">
+              {materialTabs.map((tab) => (
+                <button
+                  key={tab.id}
+                  type="button"
+                  className={cn(
+                    "rounded-md px-2.5 py-1 text-sm transition",
+                    kind === tab.id
+                      ? "bg-zinc-950 font-semibold text-white"
+                      : "text-zinc-700 hover:bg-zinc-100 hover:text-zinc-950",
+                  )}
+                  onClick={() => onKindChange(tab.id)}
+                >
+                  {tab.label}
+                </button>
+              ))}
+            </div>
+            <label className="inline-flex h-8 cursor-pointer items-center gap-2 rounded-md border border-zinc-200 bg-white px-3 text-sm font-medium text-zinc-700 transition hover:border-zinc-400 hover:text-zinc-950">
+              <Upload className="size-4" />
+              上传图片
+              <input
+                className="hidden"
+                type="file"
+                accept="image/*"
+                onChange={(event) => {
+                  const file = event.target.files?.[0];
+                  if (file) onUpload(file);
+                  event.currentTarget.value = "";
+                }}
+              />
+            </label>
+          </div>
+        </div>
+        <div className="thin-scrollbar min-h-0 flex-1 overflow-auto px-12 py-5">
+          {isLoading ? (
+            <MaterialEmptyState>正在加载素材...</MaterialEmptyState>
+          ) : items.length ? (
+            <div className="grid grid-cols-[repeat(auto-fill,minmax(128px,1fr))] gap-4">
+              {items.map((item) => (
+                <MaterialImageCard
+                  key={item.id}
+                  item={item}
+                  onDelete={onDelete}
+                  onInsert={onInsert}
+                />
+              ))}
+            </div>
+          ) : (
+            <MaterialEmptyState>没有素材</MaterialEmptyState>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function MaterialImageCard({
+  item,
+  onDelete,
+  onInsert,
+}: {
+  item: HistoryItem;
+  onDelete: (item: HistoryItem) => void;
+  onInsert: (item: HistoryItem) => void;
+}) {
+  return (
+    <div className="group relative">
+      <button
+        type="button"
+        className="block w-full overflow-hidden rounded-xl border border-zinc-200 bg-zinc-100 text-left shadow-sm transition hover:border-zinc-950 hover:shadow-[0_14px_34px_rgba(24,24,27,.12)]"
+        onClick={() => onInsert(item)}
+        title="插入画布"
+      >
+        <div className="aspect-square overflow-hidden bg-zinc-900">
+          {item.imageUrl ? (
+            <img
+              alt={item.prompt || "素材图片"}
+              className="h-full w-full object-cover transition duration-300 group-hover:scale-105"
+              src={item.imageUrl}
+            />
+          ) : (
+            <div className="flex h-full items-center justify-center">
+              <ImageIcon className="size-7 text-white/60" />
+            </div>
+          )}
+        </div>
+        <div className="space-y-1 bg-white p-2.5">
+          <div className="line-clamp-1 text-xs font-medium text-zinc-900">
+            {item.prompt || "无提示词"}
+          </div>
+          <div className="truncate text-[11px] text-zinc-500">
+            {item.model} · {item.size}
+          </div>
+        </div>
+      </button>
+      <AlertDialog>
+        <AlertDialogTrigger asChild>
+          <button
+            type="button"
+            className="absolute right-2 top-2 flex size-7 items-center justify-center rounded-full bg-white/90 text-zinc-500 opacity-0 shadow-sm ring-1 ring-zinc-200 backdrop-blur transition hover:bg-red-50 hover:text-red-600 group-hover:opacity-100"
+            onClick={(event) => event.stopPropagation()}
+            title="删除素材"
+          >
+            <Trash2 className="size-3.5" />
+          </button>
+        </AlertDialogTrigger>
+        <AlertDialogContent onClick={(event) => event.stopPropagation()}>
+          <AlertDialogHeader>
+            <AlertDialogTitle>删除这个素材？</AlertDialogTitle>
+            <AlertDialogDescription>
+              删除后它会从素材库移除。如果画布中仍在使用图片文件，文件会被保留。
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>取消</AlertDialogCancel>
+            <AlertDialogAction onClick={() => onDelete(item)}>
+              删除素材
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}
+
+function MaterialEmptyState({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex h-full min-h-[300px] flex-col items-center justify-center text-zinc-400">
+      <Archive className="mb-3 size-12 stroke-[1.4]" />
+      <div className="text-sm">{children}</div>
+    </div>
   );
 }
 
@@ -740,10 +937,12 @@ function placeCaretAfter(node: Node) {
 }
 
 function ConfigFields({
+  canvasSettings,
   node,
   onGenerateNode,
   onPatchNode,
 }: {
+  canvasSettings: CanvasSettings;
   node: CanvasNode;
   onGenerateNode: (id: string) => void;
   onPatchNode: (id: string, patch: Partial<CanvasNode>) => void;
@@ -751,6 +950,7 @@ function ConfigFields({
   const metadata = node.metadata as CanvasConfigNodeMetadata;
   const patch = (next: Partial<CanvasConfigNodeMetadata>) =>
     onPatchNode(node.id, { metadata: { ...metadata, ...next } });
+  const selectedChannelId = metadata.channelId || canvasSettings.selectedChannelId;
 
   return (
     <>
@@ -766,13 +966,12 @@ function ConfigFields({
         <InfoChip>参考视频 0 个</InfoChip>
         <InfoChip>参考音频 0 个</InfoChip>
       </div>
-      <Field label="模型">
-        <Input
-          className="h-10 rounded-xl border-zinc-200 bg-white"
-          value={metadata.model}
-          onChange={(event) => patch({ model: event.target.value })}
-        />
-      </Field>
+      <ModelChannelFields
+        channelId={selectedChannelId}
+        model={metadata.model}
+        settings={canvasSettings}
+        onChange={(next) => patch(next)}
+      />
       <SizeSelector
         size={metadata.size}
         onSizeChange={(size) => patch({ size })}
@@ -827,12 +1026,115 @@ function ConfigFields({
   );
 }
 
+type ModelChannelPatch = {
+  channelId?: string;
+  model?: string;
+};
+
+function ModelChannelFields({
+  channelId,
+  model,
+  settings,
+  onChange,
+}: {
+  channelId: string;
+  model: string;
+  settings: CanvasSettings;
+  onChange: (next: ModelChannelPatch) => void;
+}) {
+  const selectedChannel =
+    settings.channels.find((channel) => channel.id === channelId) ??
+    settings.channels[0];
+  const channelModels = selectedChannel?.models ?? [];
+  const resolvedModel =
+    model ||
+    settings.defaultModels.image ||
+    settings.modelPreferences.image[0] ||
+    channelModels[0] ||
+    "";
+  const modelOptions = resolvedModel && !channelModels.includes(resolvedModel)
+    ? [resolvedModel, ...channelModels]
+    : channelModels;
+
+  return (
+    <div className="rounded-2xl border border-zinc-200 bg-white p-3">
+      <div className="mb-3 flex items-center justify-between gap-3">
+        <div>
+          <div className="text-xs font-semibold text-zinc-900">模型路由</div>
+          <div className="mt-1 text-[11px] text-zinc-500">
+            生成时会随节点配置发送到后端
+          </div>
+        </div>
+        <span className="rounded-full bg-zinc-100 px-2 py-1 text-[11px] text-zinc-600">
+          节点级
+        </span>
+      </div>
+      <div className="grid gap-3">
+        <Field label="渠道配置">
+          <Select
+            value={selectedChannel?.id ?? ""}
+            onValueChange={(nextChannelId) => {
+              const nextChannel =
+                settings.channels.find((channel) => channel.id === nextChannelId) ??
+                settings.channels[0];
+              const nextModels = nextChannel?.models ?? [];
+              const nextModel = nextModels.includes(resolvedModel)
+                ? resolvedModel
+                : nextModels[0] || resolvedModel;
+              onChange({ channelId: nextChannelId, model: nextModel });
+            }}
+          >
+            <SelectTrigger className="h-10 rounded-xl border-zinc-200 bg-white">
+              <SelectValue placeholder="选择渠道" />
+            </SelectTrigger>
+            <SelectContent>
+              {settings.channels.map((channel) => (
+                <SelectItem key={channel.id} value={channel.id}>
+                  {channel.name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </Field>
+        <Field label="模型名称">
+          {modelOptions.length ? (
+            <Select
+              value={resolvedModel}
+              onValueChange={(nextModel) => onChange({ model: nextModel })}
+            >
+              <SelectTrigger className="h-10 rounded-xl border-zinc-200 bg-white">
+                <SelectValue placeholder="选择模型" />
+              </SelectTrigger>
+              <SelectContent>
+                {modelOptions.map((modelName) => (
+                  <SelectItem key={modelName} value={modelName}>
+                    {modelName}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          ) : (
+            <Input
+              className="h-10 rounded-xl border-zinc-200 bg-white"
+              placeholder="先在渠道配置中添加模型"
+              value={resolvedModel}
+              onChange={(event) => onChange({ model: event.target.value })}
+            />
+          )}
+        </Field>
+      </div>
+    </div>
+  );
+}
+
 function ImageFields({
+  canvasSettings,
   mentionSources,
   node,
   onPatchNode,
   onReplaceNodeImage,
 }: {
+  canvasSettings: CanvasSettings;
   mentionSources: PromptMentionSource[];
   node: CanvasNode;
   onPatchNode: (id: string, patch: Partial<CanvasNode>) => void;
@@ -841,6 +1143,7 @@ function ImageFields({
   const metadata = node.metadata as CanvasImageNodeMetadata;
   const patch = (next: Partial<CanvasImageNodeMetadata>) =>
     onPatchNode(node.id, { metadata: { ...metadata, ...next } });
+  const selectedChannelId = metadata.channelId || canvasSettings.selectedChannelId;
 
   return (
     <>
@@ -890,14 +1193,12 @@ function ImageFields({
           ) : null}
         </div>
       </Field>
-      <Field label="模型">
-        <Input
-          className="h-10 rounded-xl border-zinc-200 bg-white"
-          placeholder="gpt-image-2"
-          value={metadata.model || ""}
-          onChange={(event) => patch({ model: event.target.value })}
-        />
-      </Field>
+      <ModelChannelFields
+        channelId={selectedChannelId}
+        model={metadata.model || ""}
+        settings={canvasSettings}
+        onChange={(next) => patch(next)}
+      />
       <Field label="模式">
         <Select
           value={metadata.mode}
@@ -1079,11 +1380,3 @@ function MiniBadge({
     </span>
   );
 }
-
-function LibraryPlaceholder({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="rounded-2xl bg-zinc-100 p-3 text-sm text-zinc-500">
-      {children}
-    </div>
-  );
-}
diff --git a/src/components/canvas/canvas-node.tsx b/src/components/canvas/canvas-node.tsx
index a5ba924..95a5dac 100644
--- a/src/components/canvas/canvas-node.tsx
+++ b/src/components/canvas/canvas-node.tsx
@@ -10,8 +10,10 @@ import {
 } from "react";
 import { createPortal } from "react-dom";
 import {
+  Brush,
   Code2,
   Download,
+  Eraser,
   FileText,
   ImageIcon,
   Info,
@@ -24,6 +26,7 @@ import {
   Sparkles,
   Trash2,
   Upload,
+  WandSparkles,
   X,
 } from "lucide-react";
 import { PromptMentionPreview } from "@/components/canvas/prompt-mention-preview";
@@ -49,6 +52,7 @@ type CanvasNodeProps = {
   activeConnecting: boolean;
   connectionTarget: boolean;
   promptMentionSources?: PromptMentionSource[];
+  showImageInfoBadge?: boolean;
   onSelect: (id: string, additive?: boolean) => void;
   onDragStart: (event: ReactMouseEvent, node: CanvasNodeType) => void;
   onConnectStart: (id: string) => void;
@@ -56,9 +60,16 @@ type CanvasNodeProps = {
   onResize: (id: string, width: number, height: number) => void;
   onDelete: (id: string) => void;
   onGenerate: (id: string) => void;
+  onLocalEdit: (payload: LocalImageEditPayload) => void;
   onReplaceImage: (id: string, file: File) => void;
 };
 
+export type LocalImageEditPayload = {
+  nodeId: string;
+  prompt: string;
+  mask: File;
+};
+
 export function CanvasNode({
   node,
   scale,
@@ -69,6 +80,7 @@ export function CanvasNode({
   activeConnecting,
   connectionTarget,
   promptMentionSources = [],
+  showImageInfoBadge = false,
   onSelect,
   onDragStart,
   onConnectStart,
@@ -76,6 +88,7 @@ export function CanvasNode({
   onResize,
   onDelete,
   onGenerate,
+  onLocalEdit,
   onReplaceImage,
 }: CanvasNodeProps) {
   const [previewImage, setPreviewImage] = useState<{
@@ -143,9 +156,9 @@ export function CanvasNode({
             imageReferenceLabel={imageReferenceLabel}
             node={node}
             onOpenImagePreview={(image) => setPreviewImage(image)}
-            onGenerate={onGenerate}
             onSelect={onSelect}
             promptMentionSources={promptMentionSources}
+            showImageInfoBadge={showImageInfoBadge}
           />
         </div>
 
@@ -156,6 +169,7 @@ export function CanvasNode({
             visible={selected}
             onDelete={onDelete}
             onGenerate={onGenerate}
+            onLocalEdit={onLocalEdit}
             onOpenImagePreview={(image) => setPreviewImage(image)}
             onReplaceImage={onReplaceImage}
             onSelect={onSelect}
@@ -280,16 +294,16 @@ function NodeBody({
   imageReferenceLabel,
   node,
   onOpenImagePreview,
-  onGenerate,
   onSelect,
   promptMentionSources,
+  showImageInfoBadge,
 }: {
   imageReferenceLabel?: string;
   node: CanvasNodeType;
   onOpenImagePreview: (image: { title: string; url: string }) => void;
-  onGenerate: (id: string) => void;
   onSelect: (id: string) => void;
   promptMentionSources: PromptMentionSource[];
+  showImageInfoBadge: boolean;
 }) {
   if (node.type === "prompt") {
     const metadata = node.metadata as CanvasPromptNodeMetadata;
@@ -303,6 +317,11 @@ function NodeBody({
           prompt={metadata.prompt || ""}
           textClassName="text-zinc-700"
         />
+        {metadata.enableNegativePrompt && metadata.negativePrompt?.trim() ? (
+          <div className="mt-3 rounded-2xl border border-zinc-200 bg-zinc-50 px-3 py-2 text-xs text-zinc-500">
+            反向已启用：{metadata.negativePrompt.trim()}
+          </div>
+        ) : null}
       </div>
     );
   }
@@ -322,13 +341,14 @@ function NodeBody({
   }
 
   return (
-    <ImageNodeBody
-      imageReferenceLabel={imageReferenceLabel}
-      metadata={node.metadata as CanvasImageNodeMetadata}
-      node={node}
-      onOpenImagePreview={onOpenImagePreview}
-      onSelect={onSelect}
-    />
+      <ImageNodeBody
+        imageReferenceLabel={imageReferenceLabel}
+        metadata={node.metadata as CanvasImageNodeMetadata}
+        node={node}
+        onOpenImagePreview={onOpenImagePreview}
+        onSelect={onSelect}
+        showImageInfoBadge={showImageInfoBadge}
+      />
   );
 }
 
@@ -338,12 +358,14 @@ function ImageNodeBody({
   node,
   onOpenImagePreview,
   onSelect,
+  showImageInfoBadge,
 }: {
   imageReferenceLabel?: string;
   metadata: CanvasImageNodeMetadata;
   node: CanvasNodeType;
   onOpenImagePreview: (image: { title: string; url: string }) => void;
   onSelect: (id: string) => void;
+  showImageInfoBadge: boolean;
 }) {
   if (metadata.status === "loading") {
     return (
@@ -398,10 +420,49 @@ function ImageNodeBody({
           src={metadata.imageUrl}
         />
       </div>
+      {showImageInfoBadge ? (
+        <ImageInfoBadge metadata={metadata} />
+      ) : null}
     </div>
   );
 }
 
+function ImageInfoBadge({ metadata }: { metadata: CanvasImageNodeMetadata }) {
+  const label = formatImageInfo(metadata);
+  if (!label) return null;
+
+  return (
+    <div className="pointer-events-none absolute bottom-3 right-3 z-10 rounded-full bg-zinc-900/72 px-2.5 py-1.5 text-[11px] font-semibold leading-none text-white shadow-[0_10px_24px_rgba(24,24,27,.22)] ring-1 ring-white/20 backdrop-blur-md">
+      {label}
+    </div>
+  );
+}
+
+function formatImageInfo(metadata: CanvasImageNodeMetadata) {
+  const width = metadata.naturalWidth;
+  const height = metadata.naturalHeight;
+  const dimensions =
+    width && height ? `${Math.round(width)} x ${Math.round(height)}` : "";
+  const fileSize = formatFileSize(metadata.fileSize);
+
+  return [dimensions, fileSize].filter(Boolean).join(" · ");
+}
+
+function formatFileSize(value: number | undefined) {
+  if (!value || value <= 0) return "";
+  if (value < 1024) return `${value} B`;
+  const units = ["KB", "MB", "GB"];
+  let size = value / 1024;
+  let unitIndex = 0;
+
+  while (size >= 1024 && unitIndex < units.length - 1) {
+    size /= 1024;
+    unitIndex += 1;
+  }
+
+  return `${size >= 10 ? size.toFixed(0) : size.toFixed(1)} ${units[unitIndex]}`;
+}
+
 function ImageNodeTitle({ node }: { node: CanvasNodeType }) {
   return (
     <div className="flex min-w-0 items-center gap-2">
@@ -516,7 +577,7 @@ function ImageZoomDialog({
         <div
           ref={scrollRef}
           className={cn(
-            "thin-scrollbar flex min-h-0 flex-1 overflow-auto bg-white",
+            "flex min-h-0 flex-1 overflow-auto bg-white [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
             dragState ? "cursor-grabbing" : "cursor-grab",
           )}
           onMouseDown={(event) => {
@@ -583,6 +644,306 @@ function ImageZoomDialog({
   );
 }
 
+type LocalEditTool = "brush" | "erase";
+type LocalEditPoint = {
+  displayX: number;
+  displayY: number;
+  maskX: number;
+  maskY: number;
+};
+
+function LocalImageEditDialog({
+  image,
+  onClose,
+  onSubmit,
+}: {
+  image: { title: string; url: string };
+  onClose: () => void;
+  onSubmit: (payload: { prompt: string; mask: File }) => void;
+}) {
+  const imageRef = useRef<HTMLImageElement | null>(null);
+  const overlayRef = useRef<HTMLCanvasElement | null>(null);
+  const maskRef = useRef<HTMLCanvasElement | null>(null);
+  const [tool, setTool] = useState<LocalEditTool>("brush");
+  const [brushSize, setBrushSize] = useState(100);
+  const [prompt, setPrompt] = useState("");
+  const [naturalSize, setNaturalSize] = useState({ width: 0, height: 0 });
+  const [isDrawing, setIsDrawing] = useState(false);
+  const [hasMask, setHasMask] = useState(false);
+  const lastPointRef = useRef<LocalEditPoint | null>(null);
+
+  const syncCanvases = () => {
+    const imageElement = imageRef.current;
+    const overlay = overlayRef.current;
+    const mask = maskRef.current;
+    if (!imageElement || !overlay || !mask || !naturalSize.width || !naturalSize.height) {
+      return;
+    }
+
+    const rect = imageElement.getBoundingClientRect();
+    overlay.width = Math.max(1, Math.round(rect.width));
+    overlay.height = Math.max(1, Math.round(rect.height));
+    mask.width = naturalSize.width;
+    mask.height = naturalSize.height;
+  };
+
+  useEffect(() => {
+    syncCanvases();
+    window.addEventListener("resize", syncCanvases);
+    return () => window.removeEventListener("resize", syncCanvases);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [naturalSize.width, naturalSize.height]);
+
+  const getCanvasPoint = (event: ReactMouseEvent<HTMLCanvasElement>) => {
+    const canvas = overlayRef.current;
+    if (!canvas || !naturalSize.width || !naturalSize.height) return null;
+    const rect = canvas.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;
+    return {
+      displayX: x,
+      displayY: y,
+      maskX: (x / Math.max(1, rect.width)) * naturalSize.width,
+      maskY: (y / Math.max(1, rect.height)) * naturalSize.height,
+    };
+  };
+
+  const drawStroke = (from: LocalEditPoint, to: LocalEditPoint) => {
+    const overlay = overlayRef.current;
+    const mask = maskRef.current;
+    if (!overlay || !mask || !naturalSize.width) return;
+    const overlayContext = overlay.getContext("2d");
+    const maskContext = mask.getContext("2d");
+    if (!overlayContext || !maskContext) return;
+
+    const displayScale = overlay.width / naturalSize.width;
+    const displayBrushSize = brushSize * displayScale;
+    overlayContext.save();
+    overlayContext.globalCompositeOperation = tool === "erase" ? "destination-out" : "source-over";
+    overlayContext.strokeStyle = "rgba(92, 120, 255, 0.38)";
+    overlayContext.lineWidth = displayBrushSize;
+    overlayContext.lineCap = "round";
+    overlayContext.lineJoin = "round";
+    overlayContext.beginPath();
+    overlayContext.moveTo(from.displayX, from.displayY);
+    overlayContext.lineTo(to.displayX, to.displayY);
+    overlayContext.stroke();
+    overlayContext.restore();
+
+    maskContext.save();
+    maskContext.globalCompositeOperation = tool === "erase" ? "destination-out" : "source-over";
+    maskContext.strokeStyle = "rgba(255, 255, 255, 1)";
+    maskContext.lineWidth = brushSize;
+    maskContext.lineCap = "round";
+    maskContext.lineJoin = "round";
+    maskContext.beginPath();
+    maskContext.moveTo(from.maskX, from.maskY);
+    maskContext.lineTo(to.maskX, to.maskY);
+    maskContext.stroke();
+    maskContext.restore();
+    setHasMask(true);
+  };
+
+  const resetMask = () => {
+    const overlay = overlayRef.current;
+    const mask = maskRef.current;
+    overlay?.getContext("2d")?.clearRect(0, 0, overlay.width, overlay.height);
+    mask?.getContext("2d")?.clearRect(0, 0, mask.width, mask.height);
+    setHasMask(false);
+  };
+
+  const submitEdit = () => {
+    if (!prompt.trim()) return;
+    if (!hasMask) return;
+    const mask = maskRef.current;
+    if (!mask) return;
+    const apiMask = document.createElement("canvas");
+    apiMask.width = mask.width;
+    apiMask.height = mask.height;
+    const apiMaskContext = apiMask.getContext("2d");
+    if (!apiMaskContext) return;
+    apiMaskContext.fillStyle = "rgba(255, 255, 255, 1)";
+    apiMaskContext.fillRect(0, 0, apiMask.width, apiMask.height);
+    apiMaskContext.globalCompositeOperation = "destination-out";
+    apiMaskContext.drawImage(mask, 0, 0);
+    apiMask.toBlob((blob) => {
+      if (!blob) return;
+      onSubmit({
+        prompt: prompt.trim(),
+        mask: new File([blob], "local-edit-mask.png", { type: "image/png" }),
+      });
+    }, "image/png");
+  };
+
+  return createPortal(
+    <div
+      className="fixed inset-0 z-[210] flex items-center justify-center bg-black/42 p-4 backdrop-blur-[1px]"
+      data-canvas-ui
+      onMouseDown={(event) => {
+        event.stopPropagation();
+        if (event.target === event.currentTarget) onClose();
+      }}
+    >
+      <div
+        className="grid h-[632px] max-h-[calc(100vh-32px)] w-[980px] max-w-[calc(100vw-32px)] grid-cols-[minmax(0,1fr)_320px] gap-5 overflow-hidden rounded-lg bg-white p-5 shadow-2xl ring-1 ring-zinc-200 max-lg:grid-cols-1"
+        onMouseDown={(event) => event.stopPropagation()}
+      >
+        <div className="flex min-h-0 items-center justify-center overflow-hidden rounded-lg bg-zinc-100">
+          <div className="relative inline-block max-h-full max-w-full">
+            <img
+              ref={imageRef}
+              alt={image.title}
+              className="block max-h-full max-w-full select-none object-contain"
+              draggable={false}
+              src={image.url}
+              onLoad={(event) => {
+                const element = event.currentTarget;
+                setNaturalSize({
+                  width: element.naturalWidth || 1,
+                  height: element.naturalHeight || 1,
+                });
+                requestAnimationFrame(syncCanvases);
+              }}
+            />
+            <canvas
+              ref={overlayRef}
+              className="absolute inset-0 touch-none"
+              onMouseDown={(event) => {
+                const point = getCanvasPoint(event);
+                if (!point) return;
+                setIsDrawing(true);
+                lastPointRef.current = point;
+                drawStroke(point, point);
+              }}
+              onMouseMove={(event) => {
+                if (!isDrawing) return;
+                const point = getCanvasPoint(event);
+                const lastPoint = lastPointRef.current;
+                if (!point || !lastPoint) return;
+                drawStroke(lastPoint, point);
+                lastPointRef.current = point;
+              }}
+              onMouseLeave={() => {
+                setIsDrawing(false);
+                lastPointRef.current = null;
+              }}
+              onMouseUp={() => {
+                setIsDrawing(false);
+                lastPointRef.current = null;
+              }}
+            />
+            <canvas ref={maskRef} className="hidden" />
+          </div>
+        </div>
+
+        <aside className="flex min-h-0 flex-col">
+          <div className="mb-4 flex items-start justify-between gap-4">
+            <div>
+              <h2 className="text-xl font-semibold text-zinc-950">局部遮罩编辑</h2>
+              <p className="mt-2 text-sm text-zinc-500">
+                {naturalSize.width && naturalSize.height
+                  ? `${naturalSize.width} x ${naturalSize.height}px`
+                  : "读取图片尺寸中"}
+              </p>
+            </div>
+            <button
+              type="button"
+              className="flex size-8 items-center justify-center rounded-full text-zinc-500 transition hover:bg-zinc-100 hover:text-zinc-950"
+              onClick={onClose}
+              title="关闭"
+            >
+              <X className="size-5" />
+            </button>
+          </div>
+
+          <div className="grid grid-cols-2 gap-2">
+            <button
+              type="button"
+              className={cn(
+                "flex h-9 items-center justify-center gap-2 rounded-md border text-sm font-medium transition",
+                tool === "brush"
+                  ? "border-zinc-950 bg-zinc-950 text-white"
+                  : "border-zinc-200 bg-white text-zinc-700 hover:bg-zinc-50",
+              )}
+              onClick={() => setTool("brush")}
+            >
+              <Brush className="size-4" />
+              画笔
+            </button>
+            <button
+              type="button"
+              className={cn(
+                "flex h-9 items-center justify-center gap-2 rounded-md border text-sm font-medium transition",
+                tool === "erase"
+                  ? "border-zinc-950 bg-zinc-950 text-white"
+                  : "border-zinc-200 bg-white text-zinc-700 hover:bg-zinc-50",
+              )}
+              onClick={() => setTool("erase")}
+            >
+              <Eraser className="size-4" />
+              擦除
+            </button>
+          </div>
+
+          <label className="mt-5 block text-sm font-medium text-zinc-700">
+            <span className="flex items-center justify-between">
+              <span>笔刷大小</span>
+              <span>{brushSize}px</span>
+            </span>
+            <input
+              className="mt-3 w-full accent-zinc-950"
+              max={220}
+              min={12}
+              onChange={(event) => setBrushSize(Number(event.target.value))}
+              type="range"
+              value={brushSize}
+            />
+          </label>
+
+          <label className="mt-6 flex min-h-0 flex-1 flex-col text-sm font-medium text-zinc-700">
+            修改要求
+            <textarea
+              className="mt-2 min-h-[140px] flex-1 resize-none rounded-md border border-zinc-200 px-3 py-2 text-sm font-normal leading-6 text-zinc-950 outline-none transition focus:border-zinc-400"
+              onChange={(event) => setPrompt(event.target.value)}
+              placeholder="例如：把选中区域改成金属材质，保持原图光影"
+              value={prompt}
+            />
+          </label>
+
+          <div className="mt-5 flex items-center justify-between gap-3">
+            <button
+              type="button"
+              className="flex h-9 items-center justify-center rounded-md border border-zinc-200 bg-white px-4 text-sm font-medium text-zinc-700 transition hover:bg-zinc-50"
+              onClick={resetMask}
+            >
+              重置
+            </button>
+            <div className="flex items-center gap-2">
+              <button
+                type="button"
+                className="flex h-9 items-center justify-center rounded-md border border-zinc-200 bg-white px-4 text-sm font-medium text-zinc-700 transition hover:bg-zinc-50"
+                onClick={onClose}
+              >
+                取消
+              </button>
+              <button
+                type="button"
+                className="flex h-9 items-center justify-center gap-2 rounded-md bg-zinc-950 px-4 text-sm font-medium text-white transition hover:bg-zinc-800 disabled:cursor-not-allowed disabled:opacity-40"
+                disabled={!prompt.trim() || !hasMask}
+                onClick={submitEdit}
+              >
+                <WandSparkles className="size-4" />
+                AI 修改
+              </button>
+            </div>
+          </div>
+        </aside>
+      </div>
+    </div>,
+    document.body,
+  );
+}
+
 function NodeIcon({ type }: { type: CanvasNodeType["type"] }) {
   const className = "size-4";
   if (type === "prompt") return <FileText className={className} />;
@@ -596,6 +957,7 @@ function ImageNodeToolbar({
   visible,
   onDelete,
   onGenerate,
+  onLocalEdit,
   onOpenImagePreview,
   onReplaceImage,
   onSelect,
@@ -605,11 +967,13 @@ function ImageNodeToolbar({
   visible: boolean;
   onDelete: (id: string) => void;
   onGenerate: (id: string) => void;
+  onLocalEdit: (payload: LocalImageEditPayload) => void;
   onOpenImagePreview: (image: { title: string; url: string }) => void;
   onReplaceImage: (id: string, file: File) => void;
   onSelect: (id: string) => void;
 }) {
   const replaceInputRef = useRef<HTMLInputElement | null>(null);
+  const [showLocalEdit, setShowLocalEdit] = useState(false);
 
   return (
     <>
@@ -656,6 +1020,14 @@ function ImageNodeToolbar({
           label="替换图片"
           onClick={() => replaceInputRef.current?.click()}
         />
+        <ImageToolbarButton
+          icon={<Brush className="size-4" />}
+          label="局部编辑"
+          onClick={() => {
+            onSelect(node.id);
+            setShowLocalEdit(true);
+          }}
+        />
         <ImageToolbarButton
           icon={<Sparkles className="size-4" />}
           label="生成"
@@ -665,6 +1037,16 @@ function ImageNodeToolbar({
           }}
         />
       </div>
+      {showLocalEdit ? (
+        <LocalImageEditDialog
+          image={{ title: node.title, url: imageUrl }}
+          onClose={() => setShowLocalEdit(false)}
+          onSubmit={(payload) => {
+            setShowLocalEdit(false);
+            onLocalEdit({ ...payload, nodeId: node.id });
+          }}
+        />
+      ) : null}
     </>
   );
 }
diff --git a/src/components/canvas/canvas-projects-client.tsx b/src/components/canvas/canvas-projects-client.tsx
index 2253f05..bf4ee99 100644
--- a/src/components/canvas/canvas-projects-client.tsx
+++ b/src/components/canvas/canvas-projects-client.tsx
@@ -5,6 +5,17 @@ import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import { Pencil, Plus, RefreshCcw, Trash2, X } from "lucide-react";
 import { toast, Toaster } from "sonner";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import type { CanvasProjectListItem } from "@/lib/canvas/types";
 
@@ -105,9 +116,6 @@ export function CanvasProjectsClient() {
   }
 
   async function deleteProject(project: CanvasProjectListItem) {
-    const confirmed = window.confirm(`删除画布「${project.title}」？此操作不可撤销。`);
-    if (!confirmed) return;
-
     setDeletingProjectId(project.id);
     try {
       const response = await fetch(`/api/canvas/projects/${project.id}`, {
@@ -187,15 +195,32 @@ export function CanvasProjectsClient() {
                     >
                       <Pencil className="size-4" />
                     </button>
-                    <button
-                      type="button"
-                      className="flex size-8 items-center justify-center rounded-full text-zinc-500 transition hover:bg-red-50 hover:text-red-600 disabled:pointer-events-none disabled:opacity-40"
-                      disabled={deletingProjectId === project.id}
-                      onClick={() => void deleteProject(project)}
-                      title="删除画布"
-                    >
-                      <Trash2 className="size-4" />
-                    </button>
+                    <AlertDialog>
+                      <AlertDialogTrigger asChild>
+                        <button
+                          type="button"
+                          className="flex size-8 items-center justify-center rounded-full text-zinc-500 transition hover:bg-red-50 hover:text-red-600 disabled:pointer-events-none disabled:opacity-40"
+                          disabled={deletingProjectId === project.id}
+                          title="删除画布"
+                        >
+                          <Trash2 className="size-4" />
+                        </button>
+                      </AlertDialogTrigger>
+                      <AlertDialogContent>
+                        <AlertDialogHeader>
+                          <AlertDialogTitle>删除画布「{project.title}」？</AlertDialogTitle>
+                          <AlertDialogDescription>
+                            此操作不可撤销，画布项目和其中的节点数据都会被永久删除。
+                          </AlertDialogDescription>
+                        </AlertDialogHeader>
+                        <AlertDialogFooter>
+                          <AlertDialogCancel>取消</AlertDialogCancel>
+                          <AlertDialogAction onClick={() => void deleteProject(project)}>
+                            删除画布
+                          </AlertDialogAction>
+                        </AlertDialogFooter>
+                      </AlertDialogContent>
+                    </AlertDialog>
                   </div>
                 </div>
               </div>
diff --git a/src/components/canvas/canvas-toolbar.tsx b/src/components/canvas/canvas-toolbar.tsx
index ad685a0..05849d1 100644
--- a/src/components/canvas/canvas-toolbar.tsx
+++ b/src/components/canvas/canvas-toolbar.tsx
@@ -1,379 +1,516 @@
 "use client";
 
+import {useEffect, useRef, useState} from "react";
 import {
-  ClipboardPaste,
-  Copy,
-  Eraser,
-  FolderOpen,
-  Grid2X2,
-  Hand,
-  ImageIcon,
-  Keyboard,
-  Loader2,
-  Menu,
-  Minus,
-  Plus,
-  Redo2,
-  Settings,
-  Sparkles,
-  SquareDashedMousePointer,
-  Trash2,
-  Type,
-  Undo2,
-  Upload,
-  WandSparkles,
+    ClipboardPaste,
+    Copy,
+    Eraser,
+    FolderOpen,
+    Grid2X2,
+    Hand,
+    Home,
+    ImageIcon,
+    Keyboard,
+    Loader2,
+    Menu,
+    Minus,
+    Plus,
+    Redo2,
+    BookOpenText,
+    Save,
+    Settings,
+    Sparkles,
+    SquareDashedMousePointer,
+    LayoutGrid,
+    Trash2,
+    Type,
+    Undo2,
+    Upload,
+    WandSparkles,
 } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import type { CanvasBackgroundMode, CanvasNodeType } from "@/lib/canvas/types";
+import {Button} from "@/components/ui/button";
+import type {CanvasBackgroundMode, CanvasNodeType} from "@/lib/canvas/types";
 
 type CanvasToolbarProps = {
-  title: string;
-  isSaving: boolean;
-  isGenerating: boolean;
-  backgroundMode: CanvasBackgroundMode;
-  scale: number;
-  showLibrary: boolean;
-  selectionMode: boolean;
-  canUndo: boolean;
-  canRedo: boolean;
-  canDeleteSelection: boolean;
-  hideDockLabels: boolean;
-  onBack: () => void;
-  onAddNode: (type: CanvasNodeType) => void;
-  onUndo: () => void;
-  onRedo: () => void;
-  onGenerate: () => void;
-  onUploadMaterial: () => void;
-  onCopyJson: () => void;
-  onImportJson: () => void;
-  onDeleteSelection: () => void;
-  onClearCanvas: () => void;
-  onBackgroundModeChange: (mode: CanvasBackgroundMode) => void;
-  onZoomIn: () => void;
-  onZoomOut: () => void;
-  onResetView: () => void;
-  onToggleLibrary: () => void;
-  onToggleSelectionMode: () => void;
-  onShowShortcuts: () => void;
-  onOpenSettings: () => void;
+    title: string;
+    isSaving: boolean;
+    isGenerating: boolean;
+    lastSavedAt: Date | null;
+    backgroundMode: CanvasBackgroundMode;
+    scale: number;
+    showLibrary: boolean;
+    selectionMode: boolean;
+    canUndo: boolean;
+    canRedo: boolean;
+    canDeleteSelection: boolean;
+    hideDockLabels: boolean;
+    onAddNode: (type: CanvasNodeType) => void;
+    onUndo: () => void;
+    onRedo: () => void;
+    onGenerate: () => void;
+    onSave: () => void;
+    onUploadMaterial: () => void;
+    onCopyJson: () => void;
+    onImportJson: () => void;
+    onDeleteSelection: () => void;
+    onClearCanvas: () => void;
+    onGoHome: () => void;
+    onGoCanvasList: () => void;
+    onCreateCanvas: () => void;
+    onDeleteCurrentCanvas: () => void;
+    onBackgroundModeChange: (mode: CanvasBackgroundMode) => void;
+    onZoomIn: () => void;
+    onZoomOut: () => void;
+    onResetView: () => void;
+    onToggleLibrary: () => void;
+    onToggleSelectionMode: () => void;
+    onShowShortcuts: () => void;
+    onOpenSettings: () => void;
 };
 
 export function CanvasToolbar({
-  title,
-  isSaving,
-  isGenerating,
-  backgroundMode,
-  scale,
-  showLibrary,
-  selectionMode,
-  canUndo,
-  canRedo,
-  canDeleteSelection,
-  hideDockLabels,
-  onBack,
-  onAddNode,
-  onUndo,
-  onRedo,
-  onGenerate,
-  onUploadMaterial,
-  onCopyJson,
-  onImportJson,
-  onDeleteSelection,
-  onClearCanvas,
-  onBackgroundModeChange,
-  onZoomIn,
-  onZoomOut,
-  onResetView,
-  onToggleLibrary,
-  onToggleSelectionMode,
-  onShowShortcuts,
-  onOpenSettings,
-}: CanvasToolbarProps) {
-  return (
-    <>
-      <div
-        className="pointer-events-none absolute inset-x-0 top-0 z-[90] flex items-start justify-between p-4"
-        data-canvas-ui
-      >
-        <div className="pointer-events-auto flex items-center gap-2.5 rounded-[13px] bg-white/92 px-3 py-2 shadow-[0_12px_40px_rgba(24,24,27,.08)] ring-1 ring-zinc-200 backdrop-blur-xl">
-          <button
-            type="button"
-            className="flex size-8 items-center justify-center rounded-full text-zinc-700 transition hover:bg-zinc-100 hover:text-zinc-950"
-            onClick={onBack}
-            title="返回画布列表"
-          >
-            <Menu className="size-4" />
-          </button>
-          <div className="min-w-0">
-            <div className="truncate text-[13px] font-semibold text-zinc-950">{title}</div>
-            <div className="mt-0.5 text-[10px] tracking-[0.16em] text-zinc-400 uppercase">
-              无限画布
+                                  title,
+                                  isSaving,
+                                  isGenerating,
+                                  lastSavedAt,
+                                  backgroundMode,
+                                  scale,
+                                  showLibrary,
+                                  selectionMode,
+                                  canUndo,
+                                  canRedo,
+                                  canDeleteSelection,
+                                  hideDockLabels,
+                                  onAddNode,
+                                  onUndo,
+                                  onRedo,
+                                  onGenerate,
+                                  onSave,
+                                  onUploadMaterial,
+                                  onCopyJson,
+                                  onImportJson,
+                                  onDeleteSelection,
+                                  onClearCanvas,
+                                  onGoHome,
+                                  onGoCanvasList,
+                                  onCreateCanvas,
+                                  onDeleteCurrentCanvas,
+                                  onBackgroundModeChange,
+                                  onZoomIn,
+                                  onZoomOut,
+                                  onResetView,
+                                  onToggleLibrary,
+                                  onToggleSelectionMode,
+                                  onShowShortcuts,
+                                  onOpenSettings,
+                              }: CanvasToolbarProps) {
+    const [menuOpen, setMenuOpen] = useState(false);
+    const menuRef = useRef<HTMLDivElement | null>(null);
+
+    useEffect(() => {
+        if (!menuOpen) return;
+
+        const handlePointerDown = (event: PointerEvent) => {
+            const target = event.target as Node | null;
+            if (menuRef.current?.contains(target)) return;
+            setMenuOpen(false);
+        };
+
+        const handleKeyDown = (event: KeyboardEvent) => {
+            if (event.key === "Escape") setMenuOpen(false);
+        };
+
+        window.addEventListener("pointerdown", handlePointerDown);
+        window.addEventListener("keydown", handleKeyDown);
+        return () => {
+            window.removeEventListener("pointerdown", handlePointerDown);
+            window.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [menuOpen]);
+
+    return (
+        <>
+            <div
+                className="pointer-events-none absolute inset-x-0 top-0 z-[90] flex items-start justify-between p-4"
+                data-canvas-ui
+            >
+                <div ref={menuRef}
+                     className="pointer-events-auto flex items-center gap-1.5 rounded-[13px] bg-white/92 px-3 py-2 shadow-[0_12px_40px_rgba(24,24,27,.08)] ring-1 ring-zinc-200 backdrop-blur-xl relative">
+                    <div className="flex items-center gap-3">
+                        <button
+                            type="button"
+                            className="flex size-8 items-center justify-center rounded-md text-zinc-600 transition hover:bg-zinc-100 hover:text-zinc-950"
+                            onClick={() => setMenuOpen((current) => !current)}
+                            title="打开菜单"
+                            aria-expanded={menuOpen}
+                            aria-haspopup="menu"
+                        >
+                            <Menu className="size-5"/>
+                        </button>
+                        <div className="truncate text-[15px] font-semibold text-zinc-950">{title}</div>
+                    </div>
+
+                    {menuOpen ? (
+                        <div
+                            className="absolute left-0 top-[52px] w-[244px] overflow-hidden rounded-[14px] bg-white p-2 shadow-[0_24px_60px_rgba(24,24,27,.14)] ring-1 ring-black/5">
+                            <MenuItem icon={<Home className="size-4"/>} label="主页" onClick={onGoHome}/>
+                            <MenuItem icon={<BookOpenText className="size-4"/>} label="文档" disabled/>
+                            <MenuItem icon={<LayoutGrid className="size-4"/>} label="我的画布"
+                                      onClick={onGoCanvasList}/>
+                            <MenuDivider/>
+                            <MenuItem icon={<Plus className="size-4"/>} label="新建画布" onClick={onCreateCanvas}/>
+                            <MenuItem
+                                danger
+                                icon={<Trash2 className="size-4"/>}
+                                label="删除当前画布"
+                                onClick={onDeleteCurrentCanvas}
+                            />
+                            <MenuDivider/>
+                            <MenuItem icon={<Upload className="size-4"/>} label="导入素材" onClick={onUploadMaterial}/>
+                            <MenuDivider/>
+                            <MenuItem
+                                icon={<Undo2 className="size-4"/>}
+                                label="撤销"
+                                onClick={onUndo}
+                                shortcut="⌘ Z"
+                                disabled={!canUndo}
+                            />
+                            <MenuItem
+                                icon={<Redo2 className="size-4"/>}
+                                label="重做"
+                                onClick={onRedo}
+                                shortcut="⌘ ⇧ Z / ⌘ Y"
+                                disabled={!canRedo}
+                            />
+                        </div>
+                    ) : null}
+                </div>
+
+                <div
+                    className="pointer-events-auto flex items-center gap-1.5 rounded-[13px] bg-white/92 px-2.5 py-2 shadow-[0_12px_40px_rgba(24,24,27,.08)] ring-1 ring-zinc-200 backdrop-blur-xl">
+                    <SaveStatusButton
+                        isGenerating={isGenerating}
+                        isSaving={isSaving}
+                        lastSavedAt={lastSavedAt}
+                        onSave={onSave}
+                    />
+                    <button
+                        type="button"
+                        className="flex size-8 items-center justify-center rounded-full text-zinc-600 transition hover:bg-zinc-100 hover:text-zinc-950"
+                        onClick={onOpenSettings}
+                        title="设置"
+                    >
+                        <Settings className="size-4"/>
+                    </button>
+                    <button
+                        type="button"
+                        className="flex size-8 items-center justify-center rounded-full text-zinc-600 transition hover:bg-zinc-100 hover:text-zinc-950"
+                        onClick={onShowShortcuts}
+                        title="快捷键"
+                    >
+                        <Keyboard className="size-4"/>
+                    </button>
+                    <button
+                        type="button"
+                        className={`flex size-8 items-center justify-center rounded-full transition ${
+                            backgroundMode === "lines"
+                                ? "bg-zinc-100 text-zinc-950"
+                                : "text-zinc-600 hover:bg-zinc-100"
+                        }`}
+                        onClick={() => onBackgroundModeChange("lines")}
+                        title="线框背景"
+                    >
+                        <Grid2X2 className="size-4"/>
+                    </button>
+                    <button
+                        type="button"
+                        className={`flex size-8 items-center justify-center rounded-full transition ${
+                            backgroundMode === "dots"
+                                ? "bg-zinc-100 text-zinc-950"
+                                : "text-zinc-600 hover:bg-zinc-100"
+                        }`}
+                        onClick={() => onBackgroundModeChange("dots")}
+                        title="点阵背景"
+                    >
+                        <SquareDashedMousePointer className="size-4"/>
+                    </button>
+                    <Button
+                        className="h-8 rounded-full bg-zinc-950 px-3 text-xs shadow-none hover:bg-zinc-800"
+                        disabled={isGenerating}
+                        onClick={onGenerate}
+                    >
+                        {isGenerating ? <Loader2 className="animate-spin"/> : <WandSparkles/>}
+                        生成
+                    </Button>
+                </div>
             </div>
-          </div>
-        </div>
 
-        <div className="pointer-events-auto flex items-center gap-1.5 rounded-[13px] bg-white/92 px-2.5 py-2 shadow-[0_12px_40px_rgba(24,24,27,.08)] ring-1 ring-zinc-200 backdrop-blur-xl">
-          <StatusPill isGenerating={isGenerating} isSaving={isSaving} />
-          <button
-            type="button"
-            className="flex size-8 items-center justify-center rounded-full text-zinc-600 transition hover:bg-zinc-100 hover:text-zinc-950"
-            onClick={onOpenSettings}
-            title="设置"
-          >
-            <Settings className="size-4" />
-          </button>
-          <button
-            type="button"
-            className="flex size-8 items-center justify-center rounded-full text-zinc-600 transition hover:bg-zinc-100 hover:text-zinc-950"
-            onClick={onShowShortcuts}
-            title="快捷键"
-          >
-            <Keyboard className="size-4" />
-          </button>
-          <button
-            type="button"
-            className={`flex size-8 items-center justify-center rounded-full transition ${
-              backgroundMode === "lines"
-                ? "bg-zinc-100 text-zinc-950"
-                : "text-zinc-600 hover:bg-zinc-100"
-            }`}
-            onClick={() => onBackgroundModeChange("lines")}
-            title="线框背景"
-          >
-            <Grid2X2 className="size-4" />
-          </button>
-          <button
-            type="button"
-            className={`flex size-8 items-center justify-center rounded-full transition ${
-              backgroundMode === "dots"
-                ? "bg-zinc-100 text-zinc-950"
-                : "text-zinc-600 hover:bg-zinc-100"
-            }`}
-            onClick={() => onBackgroundModeChange("dots")}
-            title="点阵背景"
-          >
-            <SquareDashedMousePointer className="size-4" />
-          </button>
-          <Button
-            className="h-8 rounded-full bg-zinc-950 px-3 text-xs shadow-none hover:bg-zinc-800"
-            disabled={isGenerating}
-            onClick={onGenerate}
-          >
-            {isGenerating ? <Loader2 className="animate-spin" /> : <WandSparkles />}
-            生成
-          </Button>
-        </div>
-      </div>
+            <div
+                className="pointer-events-none absolute bottom-4 left-4 z-[90]"
+                data-canvas-ui
+            >
+                <div
+                    className="pointer-events-auto flex items-center gap-1.5 rounded-[13px] bg-white/92 px-2.5 py-1.5 shadow-[0_14px_42px_rgba(24,24,27,.08)] ring-1 ring-zinc-200 backdrop-blur-xl">
+                    <button
+                        type="button"
+                        className="flex size-7 items-center justify-center rounded-full text-zinc-600 transition hover:bg-zinc-100 hover:text-zinc-950"
+                        onClick={onResetView}
+                        title="重置视图"
+                    >
+                        <SquareDashedMousePointer className="size-4"/>
+                    </button>
+                    <button
+                        type="button"
+                        className="flex size-7 items-center justify-center rounded-full text-zinc-600 transition hover:bg-zinc-100 hover:text-zinc-950"
+                        onClick={onZoomOut}
+                        title="缩小"
+                    >
+                        <Minus className="size-4"/>
+                    </button>
+                    <div className="min-w-12 text-center text-xs font-medium text-zinc-700">
+                        {Math.round(scale * 100)}%
+                    </div>
+                    <button
+                        type="button"
+                        className="flex size-7 items-center justify-center rounded-full text-zinc-600 transition hover:bg-zinc-100 hover:text-zinc-950"
+                        onClick={onZoomIn}
+                        title="放大"
+                    >
+                        <Plus className="size-4"/>
+                    </button>
+                </div>
+            </div>
 
-      <div
-        className="pointer-events-none absolute bottom-4 left-4 z-[90]"
-        data-canvas-ui
-      >
-        <div className="pointer-events-auto flex items-center gap-1.5 rounded-[13px] bg-white/92 px-2.5 py-1.5 shadow-[0_14px_42px_rgba(24,24,27,.08)] ring-1 ring-zinc-200 backdrop-blur-xl">
-          <button
-            type="button"
-            className="flex size-7 items-center justify-center rounded-full text-zinc-600 transition hover:bg-zinc-100 hover:text-zinc-950"
-            onClick={onResetView}
-            title="重置视图"
-          >
-            <SquareDashedMousePointer className="size-4" />
-          </button>
-          <button
-            type="button"
-            className="flex size-7 items-center justify-center rounded-full text-zinc-600 transition hover:bg-zinc-100 hover:text-zinc-950"
-            onClick={onZoomOut}
-            title="缩小"
-          >
-            <Minus className="size-4" />
-          </button>
-          <div className="min-w-12 text-center text-xs font-medium text-zinc-700">
-            {Math.round(scale * 100)}%
-          </div>
-          <button
-            type="button"
-            className="flex size-7 items-center justify-center rounded-full text-zinc-600 transition hover:bg-zinc-100 hover:text-zinc-950"
-            onClick={onZoomIn}
-            title="放大"
-          >
-            <Plus className="size-4" />
-          </button>
-        </div>
-      </div>
-
-      <div
-        className="pointer-events-none absolute bottom-4 left-1/2 z-[90] -translate-x-1/2"
-        data-canvas-ui
-      >
-        <div className="pointer-events-auto flex items-center gap-1 rounded-[13px] bg-white/92 px-2.5 py-1.5 shadow-[0_16px_44px_rgba(24,24,27,.08)] ring-1 ring-zinc-200 backdrop-blur-xl">
-          <DockButton
-            active={selectionMode}
-            hideLabel={hideDockLabels}
-            icon={
-              selectionMode ? (
-                <SquareDashedMousePointer className="size-4" />
-              ) : (
-                <Hand className="size-4" />
-              )
-            }
-            label={selectionMode ? "框选" : "拖拽"}
-            onClick={onToggleSelectionMode}
-          />
-          <DockButton
-            disabled={!canUndo}
-            hideLabel={hideDockLabels}
-            icon={<Undo2 className="size-4" />}
-            label="撤回"
-            onClick={onUndo}
-          />
-          <DockButton
-            disabled={!canRedo}
-            hideLabel={hideDockLabels}
-            icon={<Redo2 className="size-4" />}
-            label="重做"
-            onClick={onRedo}
-          />
-          <DockDivider />
-          <DockButton
-            hideLabel={hideDockLabels}
-            icon={<Type className="size-4" />}
-            label="文本"
-            onClick={() => onAddNode("prompt")}
-          />
-          <DockButton
-            hideLabel={hideDockLabels}
-            icon={<ImageIcon className="size-4" />}
-            label="图片"
-            onClick={() => onAddNode("image")}
-          />
-          <DockButton
-            hideLabel={hideDockLabels}
-            icon={<Sparkles className="size-4" />}
-            label="配置"
-            onClick={() => onAddNode("config")}
-          />
-          <DockButton
-            hideLabel={hideDockLabels}
-            icon={<Upload className="size-4" />}
-            label="上传"
-            onClick={onUploadMaterial}
-          />
-          <DockButton
-            active={showLibrary}
-            hideLabel={hideDockLabels}
-            icon={<FolderOpen className="size-4" />}
-            label="素材库"
-            onClick={onToggleLibrary}
-          />
-          <DockDivider />
-          <DockButton
-            hideLabel={hideDockLabels}
-            icon={<Copy className="size-4" />}
-            label="复制JSON"
-            onClick={onCopyJson}
-          />
-          <DockButton
-            hideLabel={hideDockLabels}
-            icon={<ClipboardPaste className="size-4" />}
-            label="导入JSON"
-            onClick={onImportJson}
-          />
-          {canDeleteSelection ? (
-            <>
-              <DockDivider />
-              <DockButton
-                danger
-                hideLabel={hideDockLabels}
-                icon={<Trash2 className="size-4" />}
-                label="删除"
-                onClick={onDeleteSelection}
-              />
-            </>
-          ) : null}
-          <DockDivider />
-          <DockButton
-            danger
-            hideLabel={hideDockLabels}
-            icon={<Eraser className="size-4" />}
-            label="清空"
-            onClick={onClearCanvas}
-          />
-        </div>
-      </div>
-    </>
-  );
+            <div
+                className="pointer-events-none absolute bottom-4 left-1/2 z-[90] -translate-x-1/2"
+                data-canvas-ui
+            >
+                <div
+                    className="pointer-events-auto flex items-center gap-1 rounded-[13px] bg-white/92 px-2.5 py-1.5 shadow-[0_16px_44px_rgba(24,24,27,.08)] ring-1 ring-zinc-200 backdrop-blur-xl">
+                    <DockButton
+                        active={selectionMode}
+                        hideLabel={hideDockLabels}
+                        icon={
+                            selectionMode ? (
+                                <SquareDashedMousePointer className="size-4"/>
+                            ) : (
+                                <Hand className="size-4"/>
+                            )
+                        }
+                        label={selectionMode ? "框选" : "拖拽"}
+                        onClick={onToggleSelectionMode}
+                    />
+                    <DockButton
+                        disabled={!canUndo}
+                        hideLabel={hideDockLabels}
+                        icon={<Undo2 className="size-4"/>}
+                        label="撤回"
+                        onClick={onUndo}
+                    />
+                    <DockButton
+                        disabled={!canRedo}
+                        hideLabel={hideDockLabels}
+                        icon={<Redo2 className="size-4"/>}
+                        label="重做"
+                        onClick={onRedo}
+                    />
+                    <DockDivider/>
+                    <DockButton
+                        hideLabel={hideDockLabels}
+                        icon={<Type className="size-4"/>}
+                        label="文本"
+                        onClick={() => onAddNode("prompt")}
+                    />
+                    <DockButton
+                        hideLabel={hideDockLabels}
+                        icon={<ImageIcon className="size-4"/>}
+                        label="图片"
+                        onClick={() => onAddNode("image")}
+                    />
+                    <DockButton
+                        hideLabel={hideDockLabels}
+                        icon={<Sparkles className="size-4"/>}
+                        label="配置"
+                        onClick={() => onAddNode("config")}
+                    />
+                    <DockButton
+                        hideLabel={hideDockLabels}
+                        icon={<Upload className="size-4"/>}
+                        label="上传"
+                        onClick={onUploadMaterial}
+                    />
+                    <DockButton
+                        active={showLibrary}
+                        hideLabel={hideDockLabels}
+                        icon={<FolderOpen className="size-4"/>}
+                        label="素材库"
+                        onClick={onToggleLibrary}
+                    />
+                    <DockDivider/>
+                    <DockButton
+                        hideLabel={hideDockLabels}
+                        icon={<Copy className="size-4"/>}
+                        label="复制JSON"
+                        onClick={onCopyJson}
+                    />
+                    <DockButton
+                        hideLabel={hideDockLabels}
+                        icon={<ClipboardPaste className="size-4"/>}
+                        label="导入JSON"
+                        onClick={onImportJson}
+                    />
+                    {canDeleteSelection ? (
+                        <>
+                            <DockDivider/>
+                            <DockButton
+                                danger
+                                hideLabel={hideDockLabels}
+                                icon={<Trash2 className="size-4"/>}
+                                label="删除"
+                                onClick={onDeleteSelection}
+                            />
+                        </>
+                    ) : null}
+                    <DockDivider/>
+                    <DockButton
+                        danger
+                        hideLabel={hideDockLabels}
+                        icon={<Eraser className="size-4"/>}
+                        label="清空"
+                        onClick={onClearCanvas}
+                    />
+                </div>
+            </div>
+        </>
+    );
 }
 
-function StatusPill({
-  isSaving,
-  isGenerating,
-}: {
-  isSaving: boolean;
-  isGenerating: boolean;
+function MenuItem({
+                      icon,
+                      label,
+                      shortcut,
+                      danger = false,
+                      disabled = false,
+                      onClick,
+                  }: {
+    icon: React.ReactNode;
+    label: string;
+    shortcut?: string;
+    danger?: boolean;
+    disabled?: boolean;
+    onClick?: () => void;
 }) {
-  const label = isGenerating ? "生成中" : isSaving ? "保存中" : "已同步";
-  const tone = isGenerating
-    ? "bg-amber-100 text-amber-800"
-    : isSaving
-      ? "bg-sky-100 text-sky-800"
-      : "bg-emerald-100 text-emerald-800";
+    return (
+        <button
+            type="button"
+            disabled={disabled}
+            className={`flex w-full items-center gap-3 rounded-[11px] px-3 py-2.5 text-left text-[14px] transition disabled:cursor-not-allowed disabled:opacity-40 ${
+                danger
+                    ? "text-red-500 hover:bg-red-50"
+                    : "text-zinc-800 hover:bg-zinc-100 hover:text-zinc-950"
+            }`}
+            onClick={onClick}
+        >
+      <span className={`flex size-5 items-center justify-center ${danger ? "text-red-500" : "text-zinc-700"}`}>
+        {icon}
+      </span>
+            <span className="flex min-w-0 flex-1 items-center justify-between gap-3">
+        <span className="truncate">{label}</span>
+                {shortcut ? <span className="shrink-0 text-[12px] text-zinc-400">{shortcut}</span> : null}
+      </span>
+        </button>
+    );
+}
 
-  return (
-    <div
-      className={`rounded-full px-2.5 py-1 text-xs font-medium ${tone}`}
-      title={label}
-    >
-      {label}
-    </div>
-  );
+function MenuDivider() {
+    return <div className="my-2 h-px bg-zinc-200"/>;
+}
+
+function SaveStatusButton({
+                        isSaving,
+                        isGenerating,
+                        lastSavedAt,
+                        onSave,
+                    }: {
+    isSaving: boolean;
+    isGenerating: boolean;
+    lastSavedAt: Date | null;
+    onSave: () => void;
+}) {
+    const label = isGenerating ? "生成中" : isSaving ? "保存中" : "保存";
+    const savedTime = lastSavedAt
+        ? lastSavedAt.toLocaleTimeString("zh-CN", {
+            hour: "2-digit",
+            minute: "2-digit",
+            hour12: false,
+        })
+        : "--:--";
+    const title = isSaving ? "正在保存画布" : `保存画布，上次保存 ${savedTime}`;
+
+    return (
+        <button
+            type="button"
+            className="flex h-8 items-center gap-1.5 rounded-full px-2 text-zinc-600 transition hover:bg-zinc-100 hover:text-zinc-950 disabled:cursor-wait disabled:opacity-70"
+            disabled={isSaving}
+            onClick={onSave}
+            title={title}
+        >
+            {isSaving ? <Loader2 className="size-4 animate-spin"/> : <Save className="size-4"/>}
+            <span className="flex flex-col items-start leading-none">
+                <span className="text-[11px] font-medium">{label}</span>
+                <span className="mt-0.5 text-[9px] font-medium text-zinc-400">{savedTime}</span>
+            </span>
+        </button>
+    );
 }
 
 function DockButton({
-  icon,
-  label,
-  active = false,
-  danger = false,
-  disabled = false,
-  hideLabel = false,
-  onClick,
-}: {
-  icon: React.ReactNode;
-  label: string;
-  active?: boolean;
-  danger?: boolean;
-  disabled?: boolean;
-  hideLabel?: boolean;
-  onClick: () => void;
+                        icon,
+                        label,
+                        active = false,
+                        danger = false,
+                        disabled = false,
+                        hideLabel = false,
+                        onClick,
+                    }: {
+    icon: React.ReactNode;
+    label: string;
+    active?: boolean;
+    danger?: boolean;
+    disabled?: boolean;
+    hideLabel?: boolean;
+    onClick: () => void;
 }) {
-  return (
-    <button
-      type="button"
-      className={`group relative flex h-9 items-center justify-center gap-2 rounded-[10px] text-xs font-medium transition disabled:pointer-events-none disabled:opacity-40 ${hideLabel ? "w-9 px-0" : "px-2.5 max-[1100px]:w-9 max-[1100px]:px-0"} ${
-        danger
-          ? active
-            ? "bg-red-50 text-red-600"
-            : "text-red-500 hover:bg-red-50 hover:text-red-600"
-          : active
-            ? "bg-zinc-100 text-zinc-950"
-            : "text-zinc-700 hover:bg-zinc-100 hover:text-zinc-950"
-      }`}
-      disabled={disabled}
-      onClick={onClick}
-      title={label}
-    >
-      {icon}
-      <span className={hideLabel ? "sr-only" : "hidden min-[1101px]:inline"}>
+    return (
+        <button
+            type="button"
+            className={`group relative flex h-9 items-center justify-center gap-2 rounded-[10px] text-xs font-medium transition disabled:pointer-events-none disabled:opacity-40 ${hideLabel ? "w-9 px-0" : "px-2.5 max-[1100px]:w-9 max-[1100px]:px-0"} ${
+                danger
+                    ? active
+                        ? "bg-red-50 text-red-600"
+                        : "text-red-500 hover:bg-red-50 hover:text-red-600"
+                    : active
+                        ? "bg-zinc-100 text-zinc-950"
+                        : "text-zinc-700 hover:bg-zinc-100 hover:text-zinc-950"
+            }`}
+            disabled={disabled}
+            onClick={onClick}
+            title={label}
+        >
+            {icon}
+            <span className={hideLabel ? "sr-only" : "hidden min-[1101px]:inline"}>
         {label}
       </span>
-      <span
-        aria-hidden="true"
-        className={`pointer-events-none absolute bottom-full left-1/2 mb-2 -translate-x-1/2 whitespace-nowrap rounded-md bg-zinc-950 px-2 py-1 text-xs font-medium text-white opacity-0 shadow-lg transition group-hover:opacity-100 group-focus-visible:opacity-100 ${hideLabel ? "" : "min-[1101px]:hidden"}`}
-      >
+            <span
+                aria-hidden="true"
+                className={`pointer-events-none absolute bottom-full left-1/2 mb-2 -translate-x-1/2 whitespace-nowrap rounded-md bg-zinc-950 px-2 py-1 text-xs font-medium text-white opacity-0 shadow-lg transition group-hover:opacity-100 group-focus-visible:opacity-100 ${hideLabel ? "" : "min-[1101px]:hidden"}`}
+            >
         {label}
       </span>
-    </button>
-  );
+        </button>
+    );
 }
 
 function DockDivider() {
-  return <div className="mx-1 h-6 w-px bg-zinc-200" />;
+    return <div className="mx-1 h-6 w-px bg-zinc-200"/>;
 }
diff --git a/src/components/direct/asset-manager.tsx b/src/components/direct/asset-manager.tsx
new file mode 100644
index 0000000..da2f26f
--- /dev/null
+++ b/src/components/direct/asset-manager.tsx
@@ -0,0 +1,623 @@
+"use client";
+
+import {
+  Download,
+  ImageIcon,
+  Info,
+  Loader2,
+  Minimize2,
+  Minus,
+  Pencil,
+  Plus,
+  Save,
+  Trash2,
+  X,
+} from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { toast } from "sonner";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import type { HistoryItem } from "@/lib/image-workflow";
+
+type AssetFilter = "all" | "direct" | "canvas" | "generate" | "edit";
+
+const filters: Array<{ id: AssetFilter; label: string }> = [
+  { id: "all", label: "全部" },
+  { id: "direct", label: "直接模式" },
+  { id: "canvas", label: "无限画布" },
+  { id: "generate", label: "文生图" },
+  { id: "edit", label: "图像编辑" },
+];
+
+export function AssetManager() {
+  const [items, setItems] = useState<HistoryItem[]>([]);
+  const [filter, setFilter] = useState<AssetFilter>("all");
+  const [loading, setLoading] = useState(false);
+  const [savingIds, setSavingIds] = useState<string[]>([]);
+  const [deletingIds, setDeletingIds] = useState<string[]>([]);
+  const [draftNotes, setDraftNotes] = useState<Record<string, string>>({});
+  const [selectedItemId, setSelectedItemId] = useState<string | null>(null);
+  const [previewItem, setPreviewItem] = useState<HistoryItem | null>(null);
+
+  useEffect(() => {
+    void loadAssets();
+  }, []);
+
+  const visibleItems = useMemo(
+    () =>
+      items.filter((item) => {
+        if (filter === "all") return true;
+        if (filter === "direct" || filter === "canvas") {
+          return (item.source ?? "direct") === filter;
+        }
+        return item.mode === filter;
+      }),
+    [filter, items],
+  );
+  const selectedItem =
+    items.find((item) => item.id === selectedItemId) ?? null;
+
+  async function loadAssets() {
+    setLoading(true);
+    try {
+      const response = await fetch("/api/history?source=all&limit=500", {
+        cache: "no-store",
+      });
+      const payload = await response.json();
+      if (!response.ok) {
+        throw new Error(payload.error || "读取资产失败");
+      }
+      const nextItems = Array.isArray(payload.items) ? payload.items : [];
+      setItems(nextItems);
+      setDraftNotes(
+        Object.fromEntries(
+          nextItems.map((item: HistoryItem) => [item.id, item.note ?? ""]),
+        ),
+      );
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "读取资产失败");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function saveNote(item: HistoryItem) {
+    setSavingIds((current) => [...current, item.id]);
+    try {
+      const response = await fetch(`/api/history/${encodeURIComponent(item.id)}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ note: draftNotes[item.id] ?? "" }),
+      });
+      const payload = await response.json();
+      if (!response.ok) {
+        throw new Error(payload.error || "保存备注失败");
+      }
+      setItems((current) =>
+        current.map((entry) =>
+          entry.id === item.id ? { ...entry, note: payload.note ?? "" } : entry,
+        ),
+      );
+      toast.success("备注已保存");
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "保存备注失败");
+    } finally {
+      setSavingIds((current) => current.filter((id) => id !== item.id));
+    }
+  }
+
+  async function deleteAsset(item: HistoryItem) {
+    setDeletingIds((current) => [...current, item.id]);
+    try {
+      const response = await fetch(`/api/history/${encodeURIComponent(item.id)}`, {
+        method: "DELETE",
+      });
+      const payload = await response.json().catch(() => ({}));
+      if (!response.ok) {
+        throw new Error(payload.error || "删除素材失败");
+      }
+      setItems((current) => current.filter((entry) => entry.id !== item.id));
+      setSelectedItemId((current) => (current === item.id ? null : current));
+      toast.success("素材已删除");
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "删除素材失败");
+    } finally {
+      setDeletingIds((current) => current.filter((id) => id !== item.id));
+    }
+  }
+
+  return (
+    <div
+      className={
+        selectedItem
+          ? "grid h-full min-h-0 overflow-hidden lg:grid-cols-[minmax(0,1fr)_360px]"
+          : "grid h-full min-h-0 overflow-hidden"
+      }
+    >
+      <div className="min-h-0 overflow-auto p-4 lg:p-6">
+        <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
+          <div className="flex flex-wrap gap-2">
+            {filters.map((item) => (
+              <Button
+                key={item.id}
+                size="sm"
+                type="button"
+                variant={filter === item.id ? "default" : "outline"}
+                onClick={() => setFilter(item.id)}
+              >
+                {item.label}
+              </Button>
+            ))}
+          </div>
+          <Button size="sm" variant="outline" onClick={() => void loadAssets()}>
+            {loading ? <Loader2 className="animate-spin" /> : <ImageIcon />}
+            刷新资产
+          </Button>
+        </div>
+
+        {loading ? (
+          <div className="flex min-h-80 items-center justify-center rounded-md border border-dashed border-zinc-300 bg-white text-sm text-zinc-500">
+            正在加载资产...
+          </div>
+        ) : visibleItems.length ? (
+          <div className="columns-1 gap-4 sm:columns-2 xl:columns-3 2xl:columns-4">
+            {visibleItems.map((item) => {
+              const isDeleting = deletingIds.includes(item.id);
+              return (
+                <article
+                  key={item.id}
+                  className="group mb-4 break-inside-avoid overflow-visible rounded-md border border-zinc-200 bg-white shadow-xs"
+                >
+                  <div className="relative bg-zinc-100">
+                    <AssetToolbar
+                      item={item}
+                      onDelete={() => void deleteAsset(item)}
+                      onEdit={() => setSelectedItemId(item.id)}
+                      onInfo={() => setSelectedItemId(item.id)}
+                    />
+                    <div className="overflow-hidden rounded-t-md">
+                      <img
+                        alt={item.prompt || "生成图片"}
+                        className="w-full cursor-zoom-in object-cover transition-transform duration-300 ease-out group-hover:scale-[1.035]"
+                        src={item.imageUrl}
+                        onClick={() => setPreviewItem(item)}
+                      />
+                    </div>
+                    {isDeleting ? (
+                      <div className="absolute inset-0 flex items-center justify-center rounded-t-md bg-white/70">
+                        <Loader2 className="animate-spin" />
+                      </div>
+                    ) : null}
+                    <div className="absolute inset-x-0 bottom-0 bg-linear-to-t from-zinc-950/45 via-zinc-950/18 to-transparent px-3 pb-3 pt-14 text-white opacity-0 transition-opacity duration-200 group-hover:opacity-100">
+                      <div className="line-clamp-3 text-sm font-medium leading-5 drop-shadow">
+                        {item.prompt || "无提示词"}
+                      </div>
+                    </div>
+                  </div>
+                </article>
+              );
+            })}
+          </div>
+        ) : (
+          <div className="flex min-h-80 items-center justify-center rounded-md border border-dashed border-zinc-300 bg-white text-sm text-zinc-500">
+            当前分类没有资产
+          </div>
+        )}
+      </div>
+      {selectedItem ? (
+        <AssetInfoPanel
+          draftNote={draftNotes[selectedItem.id] ?? ""}
+          item={selectedItem}
+          isSaving={savingIds.includes(selectedItem.id)}
+          onClose={() => setSelectedItemId(null)}
+          onDelete={(item) => void deleteAsset(item)}
+          onNoteChange={(item, note) =>
+            setDraftNotes((current) => ({
+              ...current,
+              [item.id]: note,
+            }))
+          }
+          onSaveNote={(item) => void saveNote(item)}
+        />
+      ) : null}
+      {previewItem ? (
+        <ImageZoomDialog
+          image={{
+            title: previewItem.prompt || "生成图片",
+            url: previewItem.imageUrl,
+          }}
+          onClose={() => setPreviewItem(null)}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+function AssetToolbar({
+  item,
+  onDelete,
+  onEdit,
+  onInfo,
+}: {
+  item: HistoryItem;
+  onDelete: () => void;
+  onEdit: () => void;
+  onInfo: () => void;
+}) {
+  return (
+    <div className="absolute left-1/2 top-0 z-20 flex -translate-x-1/2 -translate-y-[calc(100%+10px)] items-center gap-1 rounded-full border border-zinc-200 bg-white/95 px-3 py-2 opacity-0 shadow-[0_14px_38px_rgba(24,24,27,.16)] backdrop-blur-xl transition-opacity group-hover:opacity-100">
+      <AssetToolbarButton
+        icon={<Info className="size-4" />}
+        label="信息"
+        onClick={onInfo}
+      />
+      <AssetToolbarButton
+        danger
+        icon={<Trash2 className="size-4" />}
+        label="删除"
+        onClick={onDelete}
+      />
+      <AssetToolbarButton
+        icon={<Pencil className="size-4" />}
+        label="编辑"
+        onClick={onEdit}
+      />
+      <AssetToolbarButton
+        icon={<Download className="size-4" />}
+        label="下载"
+        onClick={() => downloadImage(item.imageUrl, getAssetDownloadName(item))}
+      />
+    </div>
+  );
+}
+
+function AssetToolbarButton({
+  danger = false,
+  icon,
+  label,
+  onClick,
+}: {
+  danger?: boolean;
+  icon: React.ReactNode;
+  label: string;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      className={
+        danger
+          ? "flex h-9 shrink-0 items-center gap-2 rounded-full px-2.5 text-sm font-medium text-zinc-700 transition hover:bg-red-50 hover:text-red-600"
+          : "flex h-9 shrink-0 items-center gap-2 rounded-full px-2.5 text-sm font-medium text-zinc-700 transition hover:bg-zinc-100 hover:text-zinc-950"
+      }
+      title={label}
+      onClick={(event) => {
+        event.stopPropagation();
+        onClick();
+      }}
+    >
+      {icon}
+      <span className="whitespace-nowrap">{label}</span>
+    </button>
+  );
+}
+
+function AssetInfoPanel({
+  draftNote,
+  isSaving,
+  item,
+  onClose,
+  onDelete,
+  onNoteChange,
+  onSaveNote,
+}: {
+  draftNote: string;
+  isSaving: boolean;
+  item: HistoryItem | null;
+  onClose: () => void;
+  onDelete: (item: HistoryItem) => void;
+  onNoteChange: (item: HistoryItem, note: string) => void;
+  onSaveNote: (item: HistoryItem) => void;
+}) {
+  return (
+    <aside className="hidden min-h-0 border-l border-zinc-200 bg-white lg:block">
+      {item ? (
+        <div className="flex h-full min-h-0 flex-col">
+          <div className="flex h-14 shrink-0 items-center justify-between border-b border-zinc-200 px-4">
+            <div>
+              <div className="text-sm font-semibold text-zinc-950">图片信息</div>
+              <div className="text-xs text-zinc-500">{formatDate(item.createdAt)}</div>
+            </div>
+            <Button size="icon" type="button" variant="ghost" onClick={onClose}>
+              <X />
+            </Button>
+          </div>
+          <div className="thin-scrollbar min-h-0 flex-1 overflow-auto p-4">
+            <div className="overflow-hidden rounded-md bg-zinc-100">
+              <img
+                alt={item.prompt || "生成图片"}
+                className="max-h-[520px] w-full object-contain"
+                src={item.imageUrl}
+              />
+            </div>
+            <div className="mt-4 flex flex-wrap gap-2">
+              <Badge>{(item.source ?? "direct") === "canvas" ? "无限画布" : "直接模式"}</Badge>
+              <Badge>{item.mode === "edit" ? "图像编辑" : "文生图"}</Badge>
+              <Badge>{item.outputFormat.toUpperCase()}</Badge>
+            </div>
+            <div className="mt-4 space-y-4">
+              <InfoBlock label="提示词">
+                <p className="text-sm leading-6 text-zinc-950">
+                  {item.prompt || "无提示词"}
+                </p>
+              </InfoBlock>
+              <div className="grid grid-cols-2 gap-2 text-sm">
+                <InfoCell label="模型" value={item.model} />
+                <InfoCell label="尺寸" value={item.size} />
+                <InfoCell label="质量" value={item.quality} />
+                <InfoCell label="格式" value={item.outputFormat} />
+              </div>
+              <InfoBlock label="备注">
+                <Textarea
+                  className="min-h-28"
+                  placeholder="添加备注"
+                  value={draftNote}
+                  onChange={(event) => onNoteChange(item, event.target.value)}
+                />
+                <div className="mt-2 flex gap-2">
+                  <Button
+                    className="flex-1"
+                    disabled={isSaving}
+                    size="sm"
+                    type="button"
+                    variant="outline"
+                    onClick={() => onSaveNote(item)}
+                  >
+                    {isSaving ? <Loader2 className="animate-spin" /> : <Save />}
+                    保存备注
+                  </Button>
+                  <Button
+                    size="sm"
+                    type="button"
+                    variant="ghost"
+                    onClick={() => onDelete(item)}
+                  >
+                    <Trash2 />
+                    删除
+                  </Button>
+                </div>
+              </InfoBlock>
+              <Button
+                className="w-full"
+                type="button"
+                variant="outline"
+                onClick={() => downloadImage(item.imageUrl, getAssetDownloadName(item))}
+              >
+                <Download />
+                下载图片
+              </Button>
+            </div>
+          </div>
+        </div>
+      ) : null}
+    </aside>
+  );
+}
+
+function ImageZoomDialog({
+  image,
+  onClose,
+}: {
+  image: { title: string; url: string };
+  onClose: () => void;
+}) {
+  const [zoom, setZoom] = useState(1);
+  const [naturalSize, setNaturalSize] = useState<{
+    url: string;
+    width: number;
+    height: number;
+  } | null>(null);
+  const [dragState, setDragState] = useState<{
+    startX: number;
+    startY: number;
+    scrollLeft: number;
+    scrollTop: number;
+  } | null>(null);
+  const scrollRef = useRef<HTMLDivElement | null>(null);
+  const zoomIn = () => setZoom((current) => current * 1.25);
+  const zoomOut = () => setZoom((current) => Math.max(0.05, current / 1.25));
+  const dialogSize = useMemo(() => {
+    if (!naturalSize || naturalSize.url !== image.url) {
+      return { width: "min(92vw, 880px)", height: "min(92vh, 680px)" };
+    }
+    return {
+      width: `min(92vw, ${naturalSize.width}px)`,
+      height: `min(92vh, ${naturalSize.height + 112}px)`,
+    };
+  }, [image.url, naturalSize]);
+
+  useEffect(() => {
+    const img = new Image();
+    img.onload = () => {
+      setNaturalSize({
+        url: image.url,
+        width: img.naturalWidth,
+        height: img.naturalHeight,
+      });
+    };
+    img.src = image.url;
+  }, [image.url]);
+
+  useEffect(() => {
+    if (!dragState) return;
+
+    const handleMove = (event: MouseEvent) => {
+      const scroller = scrollRef.current;
+      if (!scroller) return;
+      scroller.scrollLeft = dragState.scrollLeft - (event.clientX - dragState.startX);
+      scroller.scrollTop = dragState.scrollTop - (event.clientY - dragState.startY);
+    };
+    const handleUp = () => setDragState(null);
+
+    window.addEventListener("mousemove", handleMove);
+    window.addEventListener("mouseup", handleUp);
+    return () => {
+      window.removeEventListener("mousemove", handleMove);
+      window.removeEventListener("mouseup", handleUp);
+    };
+  }, [dragState]);
+
+  return createPortal(
+    <div
+      className="fixed inset-0 z-[200] flex items-center justify-center bg-black/42 p-6 backdrop-blur-[1px]"
+      onMouseDown={(event) => {
+        event.stopPropagation();
+        if (event.target === event.currentTarget) onClose();
+      }}
+      onWheel={(event) => {
+        event.preventDefault();
+        setZoom((current) =>
+          event.deltaY < 0
+            ? current * 1.18
+            : Math.max(0.05, current / 1.18),
+        );
+      }}
+    >
+      <div
+        className="relative flex flex-col overflow-hidden rounded-lg bg-white p-4 shadow-2xl ring-1 ring-zinc-200"
+        style={dialogSize}
+        onDoubleClick={(event) => event.stopPropagation()}
+        onMouseDown={(event) => event.stopPropagation()}
+      >
+        <div className="mb-3 flex shrink-0 items-center justify-between gap-4">
+          <h2 className="truncate text-base font-semibold text-zinc-950">图片详情</h2>
+          <button
+            type="button"
+            className="flex size-8 items-center justify-center rounded-full text-zinc-500 transition hover:bg-zinc-100 hover:text-zinc-950"
+            onClick={onClose}
+            title="关闭"
+          >
+            <X className="size-5" />
+          </button>
+        </div>
+        <div
+          ref={scrollRef}
+          className={
+            dragState
+              ? "flex min-h-0 flex-1 cursor-grabbing overflow-auto bg-white [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+              : "flex min-h-0 flex-1 cursor-grab overflow-auto bg-white [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+          }
+          onMouseDown={(event) => {
+            event.stopPropagation();
+            const scroller = scrollRef.current;
+            if (!scroller) return;
+            setDragState({
+              startX: event.clientX,
+              startY: event.clientY,
+              scrollLeft: scroller.scrollLeft,
+              scrollTop: scroller.scrollTop,
+            });
+          }}
+        >
+          <div className="m-auto">
+            <img
+              alt={image.title}
+              className="block max-w-none select-none"
+              draggable={false}
+              src={image.url}
+              style={{
+                height: "auto",
+                width: `${Math.max(
+                  80,
+                  zoom *
+                    (naturalSize?.url === image.url ? naturalSize.width : 960),
+                )}px`,
+              }}
+            />
+          </div>
+        </div>
+        <div className="absolute bottom-4 right-4 flex items-center gap-2 rounded-2xl border border-zinc-200 bg-white/92 px-3 py-2 shadow-[0_14px_42px_rgba(24,24,27,.14)] backdrop-blur-xl">
+          <button
+            type="button"
+            className="flex size-8 items-center justify-center rounded-full text-zinc-600 transition hover:bg-zinc-100 hover:text-zinc-950"
+            onClick={() => setZoom(1)}
+            title="适配视图"
+          >
+            <Minimize2 className="size-4" />
+          </button>
+          <button
+            type="button"
+            className="flex size-8 items-center justify-center rounded-full text-zinc-600 transition hover:bg-zinc-100 hover:text-zinc-950"
+            onClick={zoomOut}
+            title="缩小"
+          >
+            <Minus className="size-4" />
+          </button>
+          <div className="min-w-12 text-center text-sm font-medium text-zinc-700">
+            {Math.round(zoom * 100)}%
+          </div>
+          <button
+            type="button"
+            className="flex size-8 items-center justify-center rounded-full text-zinc-600 transition hover:bg-zinc-100 hover:text-zinc-950"
+            onClick={zoomIn}
+            title="放大"
+          >
+            <Plus className="size-4" />
+          </button>
+        </div>
+      </div>
+    </div>,
+    document.body,
+  );
+}
+
+function InfoBlock({
+  children,
+  label,
+}: {
+  children: React.ReactNode;
+  label: string;
+}) {
+  return (
+    <div>
+      <div className="mb-2 text-xs font-medium text-zinc-500">{label}</div>
+      {children}
+    </div>
+  );
+}
+
+function InfoCell({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="min-w-0 rounded-md bg-zinc-100 px-3 py-2">
+      <div className="text-xs text-zinc-500">{label}</div>
+      <div className="mt-1 truncate font-medium text-zinc-900" title={value}>
+        {value}
+      </div>
+    </div>
+  );
+}
+
+function downloadImage(url: string, filename: string) {
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  link.remove();
+}
+
+function getAssetDownloadName(item: HistoryItem) {
+  const safePrompt = (item.prompt || "asset-image")
+    .slice(0, 32)
+    .replace(/[\\/:*?"<>|]+/g, "-");
+  return `${safePrompt || "asset-image"}.${item.outputFormat || "png"}`;
+}
+
+function formatDate(value: string) {
+  return new Intl.DateTimeFormat("zh-CN", {
+    dateStyle: "medium",
+    timeStyle: "short",
+  }).format(new Date(value));
+}
diff --git a/src/components/direct/direct-studio.tsx b/src/components/direct/direct-studio.tsx
index c39bbf0..a278c3f 100644
--- a/src/components/direct/direct-studio.tsx
+++ b/src/components/direct/direct-studio.tsx
@@ -52,6 +52,12 @@ import {
   resolutionOptions,
   sizeOptions,
 } from "@/lib/image-workflow";
+import {
+  defaultCanvasSettings,
+  normalizeCanvasSettings,
+  type CanvasModelChannel,
+  type CanvasSettings,
+} from "@/lib/canvas/settings";
 
 type ActiveView = "studio" | "history" | "settings";
 type PreviewImage = { title: string; subtitle?: string; url: string };
@@ -77,6 +83,7 @@ const promptPresets = [
 
 const defaultPrompt =
   "温馨治愈的幼儿园毕业纪实写真，画面干净明亮通透，柔和室内自然光，人物边缘清晰，色彩低饱和且高级，真实摄影质感，无文字水印。";
+const defaultDirectModel = "gpt-image-2-2k";
 const activeDirectJobStorageKey = "imagegen:direct:active-job";
 
 type StoredDirectJob = {
@@ -88,7 +95,14 @@ type StoredDirectJob = {
 export function DirectStudio({ activeView }: { activeView: ActiveView }) {
   const [mode, setMode] = useState<ImageMode>("generate");
   const [prompt, setPrompt] = useState(defaultPrompt);
-  const [model, setModel] = useState("gpt-image-2-2k");
+  const [enableNegativePrompt, setEnableNegativePrompt] = useState(false);
+  const [negativePrompt, setNegativePrompt] = useState("");
+  const [model, setModel] = useState(defaultDirectModel);
+  const [selectedChannelId, setSelectedChannelId] = useState(
+    defaultCanvasSettings.selectedChannelId,
+  );
+  const [canvasSettings, setCanvasSettings] =
+    useState<CanvasSettings>(defaultCanvasSettings);
   const [ratio, setRatio] = useState("1:1");
   const [resolution, setResolution] = useState<Resolution>("1K");
   const [quality, setQuality] = useState("high");
@@ -133,10 +147,25 @@ export function DirectStudio({ activeView }: { activeView: ActiveView }) {
       : size;
   const promptLength = useMemo(() => prompt.trim().length, [prompt]);
   const activeImage = history[0];
+  const activeChannel = useMemo(
+    () =>
+      canvasSettings.channels.find((channel) => channel.id === selectedChannelId) ??
+      canvasSettings.channels[0],
+    [canvasSettings.channels, selectedChannelId],
+  );
+  const modelOptions = useMemo(() => {
+    const channelModels = activeChannel?.models ?? [];
+    return model && !channelModels.includes(model)
+      ? [model, ...channelModels]
+      : channelModels;
+  }, [activeChannel, model]);
 
   useEffect(() => {
     void loadHistory();
     void loadSettings();
+    queueMicrotask(() => {
+      void loadCanvasSettings();
+    });
 
     const storedJob = readStoredDirectJob();
     if (storedJob) {
@@ -189,7 +218,7 @@ export function DirectStudio({ activeView }: { activeView: ActiveView }) {
   async function loadHistory() {
     setIsHistoryLoading(true);
     try {
-      const response = await fetch("/api/history", { cache: "no-store" });
+      const response = await fetch("/api/history?source=direct", { cache: "no-store" });
       const payload = await response.json();
       if (!response.ok) {
         throw new Error(payload.error || "读取历史失败");
@@ -215,6 +244,31 @@ export function DirectStudio({ activeView }: { activeView: ActiveView }) {
     }
   }
 
+  async function loadCanvasSettings() {
+    try {
+      const response = await fetch("/api/canvas/settings", { cache: "no-store" });
+      const payload = await response.json();
+      if (!response.ok) {
+        throw new Error(payload.error || "读取渠道设置失败");
+      }
+      const settings = normalizeCanvasSettings(payload.item);
+      const channel =
+        settings.channels.find((item) => item.id === settings.selectedChannelId) ??
+        settings.channels[0];
+      const nextModel =
+        settings.defaultModels.image ||
+        settings.modelPreferences.image[0] ||
+        channel?.models[0] ||
+        defaultDirectModel;
+
+      setCanvasSettings(settings);
+      setSelectedChannelId(channel?.id ?? settings.selectedChannelId);
+      setModel(nextModel);
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "读取渠道设置失败");
+    }
+  }
+
   async function saveSettings() {
     setIsSavingSettings(true);
     try {
@@ -249,13 +303,18 @@ export function DirectStudio({ activeView }: { activeView: ActiveView }) {
     }
 
     const formData = new FormData();
+    formData.append("source", "direct");
     formData.append("mode", mode);
     formData.append("prompt", prompt);
+    if (enableNegativePrompt && negativePrompt.trim()) {
+      formData.append("negativePrompt", negativePrompt.trim());
+    }
     formData.append("model", model);
     formData.append("size", effectiveSize);
     formData.append("quality", quality);
     formData.append("outputFormat", outputFormat);
     formData.append("preserveIdentity", String(preserveIdentity));
+    appendChannelConfig(formData, activeChannel);
     if (file) {
       formData.append("image", file);
     }
@@ -428,27 +487,117 @@ export function DirectStudio({ activeView }: { activeView: ActiveView }) {
                 </TabsList>
                 <TabsContent className="space-y-4" value="generate">
                   <PromptEditor
+                    enableNegativePrompt={enableNegativePrompt}
+                    negativePrompt={negativePrompt}
                     prompt={prompt}
                     setPrompt={setPrompt}
+                    setEnableNegativePrompt={setEnableNegativePrompt}
+                    setNegativePrompt={setNegativePrompt}
                     promptLength={promptLength}
                   />
                 </TabsContent>
                 <TabsContent className="space-y-4" value="edit">
                   <PromptEditor
+                    enableNegativePrompt={enableNegativePrompt}
+                    negativePrompt={negativePrompt}
                     prompt={prompt}
                     setPrompt={setPrompt}
+                    setEnableNegativePrompt={setEnableNegativePrompt}
+                    setNegativePrompt={setNegativePrompt}
                     promptLength={promptLength}
                     selectedImage={uploadedImageReference}
                     onSelectUploadedImage={setReferencedImage}
                     onClearSelectedImage={() => setReferencedImage(null)}
                   />
+                  <ImageUploader
+                    file={file}
+                    maskFile={maskFile}
+                    previewUrl={filePreviewUrl}
+                    maskPreviewUrl={maskPreviewUrl}
+                    setFile={setFile}
+                    setMaskFile={setMaskFile}
+                    onPreview={() =>
+                      filePreviewUrl
+                        ? setPreviewImage({
+                            title: file?.name || "上传图片",
+                            subtitle: originalImageSize
+                              ? `${originalImageSize.width}x${originalImageSize.height}`
+                              : undefined,
+                            url: filePreviewUrl,
+                          })
+                        : undefined
+                    }
+                    onUseHistoryImage={placeImageUrlForEdit}
+                  />
                 </TabsContent>
               </Tabs>
 
               <div className="mt-4 space-y-4">
-                <Field label="模型">
-                  <Input value={model} onChange={(event) => setModel(event.target.value)} />
-                </Field>
+                <div className="rounded-md border border-zinc-200 bg-white p-3">
+                  <div className="mb-3 flex items-center justify-between gap-3">
+                    <div>
+                      <div className="text-xs font-semibold text-zinc-900">模型路由</div>
+                      <div className="mt-1 text-[11px] text-zinc-500">
+                        生成时会随直接模式请求发送到后端
+                      </div>
+                    </div>
+                    <span className="rounded-full bg-zinc-100 px-2 py-1 text-[11px] text-zinc-600">
+                      直接模式
+                    </span>
+                  </div>
+                  <div className="grid gap-3">
+                    <Field label="渠道配置">
+                      <Select
+                        value={activeChannel?.id ?? ""}
+                        onValueChange={(nextChannelId) => {
+                          const nextChannel =
+                            canvasSettings.channels.find(
+                              (channel) => channel.id === nextChannelId,
+                            ) ?? canvasSettings.channels[0];
+                          const nextModels = nextChannel?.models ?? [];
+                          const nextModel = nextModels.includes(model)
+                            ? model
+                            : nextModels[0] || model;
+                          setSelectedChannelId(nextChannel?.id ?? nextChannelId);
+                          setModel(nextModel);
+                        }}
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="选择渠道" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {canvasSettings.channels.map((channel) => (
+                            <SelectItem key={channel.id} value={channel.id}>
+                              {channel.name}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </Field>
+                    <Field label="模型名称">
+                      {modelOptions.length ? (
+                        <Select value={model} onValueChange={setModel}>
+                          <SelectTrigger>
+                            <SelectValue placeholder="选择模型" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {modelOptions.map((modelName) => (
+                              <SelectItem key={modelName} value={modelName}>
+                                {modelName}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      ) : (
+                        <Input
+                          placeholder="先在渠道配置中添加模型"
+                          value={model}
+                          onChange={(event) => setModel(event.target.value)}
+                        />
+                      )}
+                    </Field>
+                  </div>
+                </div>
                 <div className="grid gap-4 sm:grid-cols-2">
                   <Field label="输出格式">
                     <Select value={outputFormat} onValueChange={setOutputFormat}>
@@ -507,27 +656,6 @@ export function DirectStudio({ activeView }: { activeView: ActiveView }) {
                   </Field>
                 </div>
 
-                <ImageUploader
-                  file={file}
-                  maskFile={maskFile}
-                  previewUrl={filePreviewUrl}
-                  maskPreviewUrl={maskPreviewUrl}
-                  setFile={setFile}
-                  setMaskFile={setMaskFile}
-                  onPreview={() =>
-                    filePreviewUrl
-                      ? setPreviewImage({
-                          title: file?.name || "上传图片",
-                          subtitle: originalImageSize
-                            ? `${originalImageSize.width}x${originalImageSize.height}`
-                            : undefined,
-                          url: filePreviewUrl,
-                        })
-                      : undefined
-                  }
-                  onUseHistoryImage={placeImageUrlForEdit}
-                />
-
                 <div className="flex items-center justify-between rounded-md border border-zinc-200 bg-zinc-50 px-3 py-2">
                   <div>
                     <div className="text-sm font-medium">保持原始尺寸</div>
@@ -707,6 +835,21 @@ function Field({ label, children }: { label: string; children: React.ReactNode }
   );
 }
 
+function appendChannelConfig(
+  formData: FormData,
+  channel: CanvasModelChannel | undefined,
+) {
+  if (!channel) return;
+  formData.append("channelId", channel.id);
+  formData.append("channelName", channel.name);
+  if (channel.baseUrl.trim()) {
+    formData.append("channelBaseUrl", channel.baseUrl.trim());
+  }
+  if (channel.apiKey.trim()) {
+    formData.append("channelApiKey", channel.apiKey.trim());
+  }
+}
+
 function ImageUploader({
   file,
   maskFile,
@@ -835,15 +978,23 @@ function ImageUploader({
 }
 
 function PromptEditor({
+  enableNegativePrompt,
+  negativePrompt,
   prompt,
   setPrompt,
+  setEnableNegativePrompt,
+  setNegativePrompt,
   promptLength,
   selectedImage,
   onSelectUploadedImage,
   onClearSelectedImage,
 }: {
+  enableNegativePrompt: boolean;
+  negativePrompt: string;
   prompt: string;
   setPrompt: (value: string) => void;
+  setEnableNegativePrompt: (value: boolean) => void;
+  setNegativePrompt: (value: string) => void;
   promptLength: number;
   selectedImage?: UploadedImageReference | null;
   onSelectUploadedImage?: (value: UploadedImageReference | null) => void;
@@ -872,6 +1023,29 @@ function PromptEditor({
           }}
         />
       </div>
+      <div className="flex items-center justify-between rounded-md border border-zinc-200 bg-zinc-50 px-3 py-2">
+        <div>
+          <div className="text-sm font-medium">添加反向提示词</div>
+          <div className="text-xs text-zinc-500">
+            开启后会作为排除内容随生成请求发送
+          </div>
+        </div>
+        <Switch
+          checked={enableNegativePrompt}
+          onCheckedChange={setEnableNegativePrompt}
+        />
+      </div>
+      {enableNegativePrompt ? (
+        <div className="space-y-2">
+          <Label htmlFor="negative-prompt">反向提示词</Label>
+          <Textarea
+            id="negative-prompt"
+            placeholder="例如：不要文字、水印、畸形手指、低清晰度"
+            value={negativePrompt}
+            onChange={(event) => setNegativePrompt(event.target.value)}
+          />
+        </div>
+      ) : null}
       {selectedImage ? (
         <div className="flex items-center gap-3 rounded-md border border-zinc-200 bg-zinc-50 p-2">
           <div className="flex size-14 shrink-0 items-center justify-center overflow-hidden rounded bg-white">
diff --git a/src/components/direct/home-shell.tsx b/src/components/direct/home-shell.tsx
index 2473f1e..e06f813 100644
--- a/src/components/direct/home-shell.tsx
+++ b/src/components/direct/home-shell.tsx
@@ -4,6 +4,7 @@ import { useState } from "react";
 import { usePathname, useRouter } from "next/navigation";
 import {
   Aperture,
+  Images,
   ImageIcon,
   PanelLeft,
   PanelLeftClose,
@@ -15,10 +16,11 @@ import {
 } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { AssetManager } from "@/components/direct/asset-manager";
 import { CanvasProjectsClient } from "@/components/canvas/canvas-projects-client";
 import { DirectStudio } from "@/components/direct/direct-studio";
 
-export type ActiveView = "studio" | "history" | "settings" | "canvas";
+export type ActiveView = "studio" | "history" | "assets" | "settings" | "canvas";
 
 export function HomeShell({
   initialView = "studio",
@@ -49,7 +51,11 @@ export function HomeShell({
     },
     history: {
       title: "作品记录",
-      description: "查看本次会话生成的图片与任务参数",
+      description: "查看直接模式生成的图片与任务参数",
+    },
+    assets: {
+      title: "资产管理",
+      description: "按分类管理所有生成内容、备注和删除",
     },
     settings: {
       title: "模型设置",
@@ -106,6 +112,15 @@ export function HomeShell({
                 <ImageIcon />
                 <span className={sidebarCollapsed ? "sr-only" : ""}>作品记录</span>
               </Button>
+              <Button
+                className={sidebarCollapsed ? "w-full px-0" : "w-full justify-start"}
+                variant={routeView === "assets" ? "secondary" : "ghost"}
+                title="资产管理"
+                onClick={() => handleViewChange("assets")}
+              >
+                <Images />
+                <span className={sidebarCollapsed ? "sr-only" : ""}>资产管理</span>
+              </Button>
               <Button
                 className={sidebarCollapsed ? "w-full px-0" : "w-full justify-start"}
                 variant={routeView === "settings" ? "secondary" : "ghost"}
@@ -163,6 +178,8 @@ export function HomeShell({
           <div className="min-h-0 flex-1 overflow-hidden">
             {routeView === "canvas" ? (
               <CanvasProjectsClient />
+            ) : routeView === "assets" ? (
+              <AssetManager />
             ) : (
               <DirectStudio activeView={routeView} />
             )}
diff --git a/src/components/ui/alert-dialog.tsx b/src/components/ui/alert-dialog.tsx
new file mode 100644
index 0000000..f88101e
--- /dev/null
+++ b/src/components/ui/alert-dialog.tsx
@@ -0,0 +1,130 @@
+"use client";
+
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
+
+const AlertDialog = AlertDialogPrimitive.Root;
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      className={cn(
+        "fixed inset-0 z-[240] bg-black/45 backdrop-blur-[2px]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        className={cn(
+          "fixed left-1/2 top-1/2 z-[250] grid w-[min(420px,calc(100vw-32px))] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-2xl border border-zinc-200 bg-white p-5 shadow-[0_28px_90px_rgba(24,24,27,.24)] outline-none",
+          className,
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  );
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("flex flex-col gap-2 text-left", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      className={cn("text-base font-semibold text-zinc-950", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      className={cn("text-sm leading-6 text-zinc-500", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return (
+    <AlertDialogPrimitive.Action
+      className={cn(
+        buttonVariants({ className: "bg-red-600 text-white hover:bg-red-700" }),
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({ variant: "outline" }), className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+};
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 443a539..b668458 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -3,7 +3,7 @@ import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
-const buttonVariants = cva(
+export const buttonVariants = cva(
   "inline-flex h-9 shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md px-3 text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4",
   {
     variants: {
diff --git a/src/lib/canvas/generation.ts b/src/lib/canvas/generation.ts
index ff8cc9e..880db2f 100644
--- a/src/lib/canvas/generation.ts
+++ b/src/lib/canvas/generation.ts
@@ -18,6 +18,7 @@ export type CanvasGenerationInput = {
   imageNode?: CanvasNode;
   imageNodes: CanvasNode[];
   prompt: string;
+  negativePrompt: string;
   config: CanvasConfigNodeMetadata;
 };
 
@@ -71,6 +72,11 @@ export function resolveCanvasGenerationInput(
     : connectedPrompts.length
       ? formatConnectedPrompts(connectedPrompts)
       : (resolvedMentions?.prompt ?? "");
+  const negativePrompt = resolveNegativePrompt(
+    promptNode,
+    resolvedMentions?.referencedNodeIds ? scopedNodes : nodes,
+    scopedConnections,
+  );
 
   if (!promptNode || !prompt) {
     return { error: "请先添加并填写提示词节点或当前图像节点提示词" };
@@ -90,6 +96,7 @@ export function resolveCanvasGenerationInput(
     imageNode: imageNodes[0],
     imageNodes: imageNodes.slice(0, 16),
     prompt,
+    negativePrompt,
     config: {
       ...defaultCanvasConfig,
       ...((configNode?.metadata as Partial<CanvasConfigNodeMetadata>) || {}),
@@ -98,10 +105,30 @@ export function resolveCanvasGenerationInput(
   };
 }
 
+function resolveNegativePrompt(
+  promptNode: CanvasNode | undefined,
+  nodes: CanvasNode[],
+  connections: CanvasConnection[],
+) {
+  if (promptNode?.type !== "prompt") return "";
+  const metadata = promptNode.metadata as CanvasPromptNodeMetadata;
+  if (!metadata.enableNegativePrompt) return "";
+  const rawNegativePrompt = metadata.negativePrompt?.trim() || "";
+  if (!rawNegativePrompt) return "";
+
+  return (
+    resolvePromptMentions(
+      rawNegativePrompt,
+      getPromptMentionSources(nodes, connections, promptNode.id),
+    )?.prompt ?? rawNegativePrompt
+  ).trim();
+}
+
 function getImageGenerationConfig(node: CanvasNode | undefined) {
   if (node?.type !== "image") return {};
   const metadata = node.metadata as CanvasImageNodeMetadata;
   return {
+    ...(metadata.channelId ? { channelId: metadata.channelId } : {}),
     ...(metadata.model ? { model: metadata.model } : {}),
     ...(metadata.size ? { size: metadata.size } : {}),
     ...(metadata.quality ? { quality: metadata.quality } : {}),
diff --git a/src/lib/canvas/node-factory.ts b/src/lib/canvas/node-factory.ts
index d3533a1..7b8cf4d 100644
--- a/src/lib/canvas/node-factory.ts
+++ b/src/lib/canvas/node-factory.ts
@@ -13,6 +13,7 @@ export const DEFAULT_IMAGE_WIDTH = 320;
 export const DEFAULT_IMAGE_HEIGHT = 240;
 
 export const defaultCanvasConfig: CanvasConfigNodeMetadata = {
+  channelId: "",
   model: "gpt-image-2-2k",
   size: "1024x1024",
   quality: "high",
@@ -89,6 +90,7 @@ export function createImageNodeFromHistory(
       size: item.size,
       quality: item.quality,
       outputFormat: item.outputFormat,
+      fileSize: item.fileSize,
       status: "success",
     },
   };
@@ -128,6 +130,7 @@ export function createImageResultNode(
     size: result.size,
     quality: result.quality,
     outputFormat: result.outputFormat,
+    fileSize: result.fileSize,
     status: "success",
   };
 
diff --git a/src/lib/canvas/settings.ts b/src/lib/canvas/settings.ts
new file mode 100644
index 0000000..c9888c5
--- /dev/null
+++ b/src/lib/canvas/settings.ts
@@ -0,0 +1,215 @@
+export type CanvasModelChannel = {
+  id: string;
+  name: string;
+  baseUrl: string;
+  apiKey: string;
+  models: string[];
+};
+
+export type CanvasModelKind = "image" | "video" | "text" | "audio";
+
+export type CanvasModelPreferences = Record<CanvasModelKind, string[]>;
+
+export type CanvasDefaultModels = Record<CanvasModelKind, string>;
+
+export type CanvasSettings = {
+  hideToolbarText: boolean;
+  showImageInfoBadge: boolean;
+  selectedChannelId: string;
+  selectedModel: string;
+  modelPreferences: CanvasModelPreferences;
+  defaultModels: CanvasDefaultModels;
+  channels: CanvasModelChannel[];
+};
+
+export const defaultCanvasChannel: CanvasModelChannel = {
+  id: "default",
+  name: "默认渠道",
+  baseUrl: "https://api.openai.com",
+  apiKey: "",
+  models: ["gpt-image-2"],
+};
+
+export const defaultCanvasSettings: CanvasSettings = {
+  hideToolbarText: false,
+  showImageInfoBadge: false,
+  selectedChannelId: defaultCanvasChannel.id,
+  selectedModel: defaultCanvasChannel.models[0],
+  modelPreferences: {
+    image: [defaultCanvasChannel.models[0]],
+    video: [],
+    text: [],
+    audio: [],
+  },
+  defaultModels: {
+    image: defaultCanvasChannel.models[0],
+    video: "",
+    text: "",
+    audio: "",
+  },
+  channels: [defaultCanvasChannel],
+};
+
+export function normalizeCanvasSettings(value: unknown): CanvasSettings {
+  if (!value || typeof value !== "object") return defaultCanvasSettings;
+  const candidate = value as Partial<CanvasSettings> & {
+    modelName?: string;
+    baseUrl?: string;
+    apiKeySource?: string;
+  };
+
+  // 兼容旧版 localStorage 设置：旧结构只有 modelName/baseUrl/apiKeySource，
+  // 新结构统一用 channels JSON 存储，便于未来继续扩展渠道参数。
+  if (!Array.isArray(candidate.channels)) {
+    const legacyModel = typeof candidate.modelName === "string"
+      ? candidate.modelName
+      : defaultCanvasSettings.selectedModel;
+    const legacyChannel = {
+      ...defaultCanvasChannel,
+      baseUrl:
+        typeof candidate.baseUrl === "string" && candidate.baseUrl.startsWith("http")
+          ? candidate.baseUrl
+          : defaultCanvasChannel.baseUrl,
+      models: [legacyModel],
+    };
+    return {
+      hideToolbarText: Boolean(candidate.hideToolbarText),
+      showImageInfoBadge: Boolean(candidate.showImageInfoBadge),
+      selectedChannelId: legacyChannel.id,
+      selectedModel: legacyModel,
+      modelPreferences: {
+        image: [legacyModel],
+        video: [],
+        text: [],
+        audio: [],
+      },
+      defaultModels: {
+        image: legacyModel,
+        video: "",
+        text: "",
+        audio: "",
+      },
+      channels: [legacyChannel],
+    };
+  }
+
+  const channels = candidate.channels
+    .map((channel) => normalizeCanvasChannel(channel))
+    .filter((channel): channel is CanvasModelChannel => Boolean(channel));
+  const normalizedChannels = channels.length ? channels : [defaultCanvasChannel];
+  const selectedChannelId =
+    typeof candidate.selectedChannelId === "string" &&
+    normalizedChannels.some((channel) => channel.id === candidate.selectedChannelId)
+      ? candidate.selectedChannelId
+      : normalizedChannels[0].id;
+  const selectedChannel =
+    normalizedChannels.find((channel) => channel.id === selectedChannelId) ??
+    normalizedChannels[0];
+  const selectedModel =
+    typeof candidate.selectedModel === "string" &&
+    candidate.selectedModel.trim() &&
+    selectedChannel.models.includes(candidate.selectedModel)
+      ? candidate.selectedModel
+      : selectedChannel.models[0] ?? defaultCanvasSettings.selectedModel;
+  const modelPreferences = normalizeModelPreferences(
+    candidate.modelPreferences,
+    selectedModel,
+  );
+  const defaultModels = normalizeDefaultModels(
+    candidate.defaultModels,
+    modelPreferences,
+    selectedModel,
+  );
+
+  return {
+    hideToolbarText: Boolean(candidate.hideToolbarText),
+    showImageInfoBadge: Boolean(candidate.showImageInfoBadge),
+    selectedChannelId,
+    selectedModel: defaultModels.image || selectedModel,
+    modelPreferences,
+    defaultModels,
+    channels: normalizedChannels,
+  };
+}
+
+function normalizeModelPreferences(
+  value: unknown,
+  selectedModel: string,
+): CanvasModelPreferences {
+  const candidate =
+    value && typeof value === "object"
+      ? (value as Partial<CanvasModelPreferences>)
+      : {};
+
+  return {
+    image: normalizeModelList(candidate.image, selectedModel ? [selectedModel] : []),
+    video: normalizeModelList(candidate.video, []),
+    text: normalizeModelList(candidate.text, []),
+    audio: normalizeModelList(candidate.audio, []),
+  };
+}
+
+function normalizeDefaultModels(
+  value: unknown,
+  preferences: CanvasModelPreferences,
+  selectedModel: string,
+): CanvasDefaultModels {
+  const candidate =
+    value && typeof value === "object"
+      ? (value as Partial<CanvasDefaultModels>)
+      : {};
+
+  return {
+    image: normalizeDefaultModel(candidate.image, preferences.image, selectedModel),
+    video: normalizeDefaultModel(candidate.video, preferences.video, ""),
+    text: normalizeDefaultModel(candidate.text, preferences.text, ""),
+    audio: normalizeDefaultModel(candidate.audio, preferences.audio, ""),
+  };
+}
+
+function normalizeDefaultModel(
+  value: unknown,
+  models: string[],
+  fallback: string,
+) {
+  return typeof value === "string" && models.includes(value)
+    ? value
+    : models[0] ?? fallback;
+}
+
+function normalizeModelList(value: unknown, fallback: string[]) {
+  const list = Array.isArray(value) ? value : fallback;
+  return Array.from(
+    new Set(
+      list.filter((model): model is string =>
+        typeof model === "string" && Boolean(model.trim()),
+      ),
+    ),
+  );
+}
+
+function normalizeCanvasChannel(value: unknown): CanvasModelChannel | null {
+  if (!value || typeof value !== "object") return null;
+  const candidate = value as Partial<CanvasModelChannel>;
+  const id = typeof candidate.id === "string" && candidate.id.trim()
+    ? candidate.id
+    : crypto.randomUUID();
+  const name = typeof candidate.name === "string" && candidate.name.trim()
+    ? candidate.name.trim()
+    : "未命名渠道";
+  const baseUrl = typeof candidate.baseUrl === "string"
+    ? candidate.baseUrl.trim()
+    : "";
+  const apiKey = typeof candidate.apiKey === "string" ? candidate.apiKey : "";
+  const models = Array.isArray(candidate.models)
+    ? candidate.models.filter((model): model is string => typeof model === "string" && Boolean(model.trim()))
+    : [];
+
+  return {
+    id,
+    name,
+    baseUrl,
+    apiKey,
+    models,
+  };
+}
diff --git a/src/lib/canvas/types.ts b/src/lib/canvas/types.ts
index 006ed42..8fb3159 100644
--- a/src/lib/canvas/types.ts
+++ b/src/lib/canvas/types.ts
@@ -17,9 +17,12 @@ export const CANVAS_PROJECT_DATA_VERSION = 1;
 
 export type CanvasPromptNodeMetadata = {
   prompt: string;
+  negativePrompt?: string;
+  enableNegativePrompt?: boolean;
 };
 
 export type CanvasConfigNodeMetadata = {
+  channelId?: string;
   model: string;
   size: string;
   quality: string;
@@ -33,6 +36,7 @@ export type CanvasImageNodeMetadata = {
   filePath?: string;
   mode: "reference" | "result";
   prompt?: string;
+  channelId?: string;
   model?: string;
   size?: string;
   quality?: string;
@@ -41,6 +45,7 @@ export type CanvasImageNodeMetadata = {
   errorMessage?: string;
   naturalWidth?: number;
   naturalHeight?: number;
+  fileSize?: number;
 };
 
 export type CanvasNodeMetadata =
@@ -232,7 +237,15 @@ function normalizePromptMetadata(value: unknown): CanvasPromptNodeMetadata | nul
   if (!value || typeof value !== "object") return null;
   const candidate = value as Record<string, unknown>;
   if (typeof candidate.prompt !== "string") return null;
-  return { prompt: candidate.prompt };
+  return {
+    prompt: candidate.prompt,
+    ...(typeof candidate.negativePrompt === "string"
+      ? { negativePrompt: candidate.negativePrompt }
+      : {}),
+    ...(typeof candidate.enableNegativePrompt === "boolean"
+      ? { enableNegativePrompt: candidate.enableNegativePrompt }
+      : {}),
+  };
 }
 
 function normalizeConfigMetadata(value: unknown): CanvasConfigNodeMetadata | null {
@@ -248,6 +261,7 @@ function normalizeConfigMetadata(value: unknown): CanvasConfigNodeMetadata | nul
   }
 
   return {
+    ...(typeof candidate.channelId === "string" ? { channelId: candidate.channelId } : {}),
     model: candidate.model,
     size: candidate.size,
     quality: candidate.quality,
@@ -275,6 +289,7 @@ function normalizeImageMetadata(value: unknown): CanvasImageNodeMetadata | null
     ...(typeof candidate.filePath === "string" ? { filePath: candidate.filePath } : {}),
     mode: candidate.mode,
     ...(typeof candidate.prompt === "string" ? { prompt: candidate.prompt } : {}),
+    ...(typeof candidate.channelId === "string" ? { channelId: candidate.channelId } : {}),
     ...(typeof candidate.model === "string" ? { model: candidate.model } : {}),
     ...(typeof candidate.size === "string" ? { size: candidate.size } : {}),
     ...(typeof candidate.quality === "string" ? { quality: candidate.quality } : {}),
@@ -291,6 +306,7 @@ function normalizeImageMetadata(value: unknown): CanvasImageNodeMetadata | null
     ...(typeof candidate.naturalHeight === "number"
       ? { naturalHeight: candidate.naturalHeight }
       : {}),
+    ...(typeof candidate.fileSize === "number" ? { fileSize: candidate.fileSize } : {}),
   };
 }
 
diff --git a/src/lib/image-workflow.ts b/src/lib/image-workflow.ts
index 3ac0dff..a5619dc 100644
--- a/src/lib/image-workflow.ts
+++ b/src/lib/image-workflow.ts
@@ -4,6 +4,7 @@ export type ImageJobStatus = "queued" | "running" | "succeeded" | "failed";
 
 export type HistoryItem = {
   id: string;
+  source?: "direct" | "canvas";
   mode: ImageMode;
   prompt: string;
   model: string;
@@ -11,6 +12,8 @@ export type HistoryItem = {
   quality: string;
   outputFormat: string;
   imageUrl: string;
+  fileSize?: number;
+  note?: string;
   createdAt: string;
 };
 
diff --git a/src/lib/server/db.ts b/src/lib/server/db.ts
index 278d8e6..979fa1b 100644
--- a/src/lib/server/db.ts
+++ b/src/lib/server/db.ts
@@ -57,6 +57,16 @@ export function getDb() {
       db.exec("ALTER TABLE canvas_projects ADD COLUMN description TEXT NOT NULL DEFAULT ''");
     }
 
+    const historyColumns = db
+      .prepare("PRAGMA table_info(history)")
+      .all() as Array<{ name: string }>;
+    if (!historyColumns.some((column) => column.name === "source")) {
+      db.exec("ALTER TABLE history ADD COLUMN source TEXT NOT NULL DEFAULT 'direct'");
+    }
+    if (!historyColumns.some((column) => column.name === "note")) {
+      db.exec("ALTER TABLE history ADD COLUMN note TEXT NOT NULL DEFAULT ''");
+    }
+
     db.prepare(
       "INSERT OR IGNORE INTO settings (key, value) VALUES ('retentionDays', '7')",
     ).run();
diff --git a/src/lib/server/repositories/app-settings-repository.ts b/src/lib/server/repositories/app-settings-repository.ts
new file mode 100644
index 0000000..e890686
--- /dev/null
+++ b/src/lib/server/repositories/app-settings-repository.ts
@@ -0,0 +1,23 @@
+import { getDb } from "@/lib/server/db";
+
+export function getJsonSetting<T>(key: string, fallback: T): T {
+  const row = getDb()
+    .prepare("SELECT value FROM settings WHERE key = ?")
+    .get(key) as { value?: string } | undefined;
+  if (!row?.value) return fallback;
+
+  try {
+    return JSON.parse(row.value) as T;
+  } catch {
+    return fallback;
+  }
+}
+
+export function setJsonSetting<T>(key: string, value: T) {
+  getDb()
+    .prepare(
+      "INSERT INTO settings (key, value) VALUES (?, ?) ON CONFLICT(key) DO UPDATE SET value = excluded.value",
+    )
+    .run(key, JSON.stringify(value));
+  return value;
+}
diff --git a/src/lib/server/repositories/history-repository.ts b/src/lib/server/repositories/history-repository.ts
index e742800..862d246 100644
--- a/src/lib/server/repositories/history-repository.ts
+++ b/src/lib/server/repositories/history-repository.ts
@@ -8,6 +8,7 @@ import { getImageDir } from "@/lib/server/storage/image-file-storage";
 
 export type StoredImage = {
   id: string;
+  source: HistorySource;
   mode: string;
   prompt: string;
   model: string;
@@ -16,9 +17,17 @@ export type StoredImage = {
   outputFormat: string;
   imageUrl: string;
   filePath: string;
+  note: string;
   createdAt: string;
 };
 
+export type HistorySource = "direct" | "canvas";
+
+export type ListHistoryOptions = {
+  source?: HistorySource | "all";
+  limit?: number;
+};
+
 let cleanupTimerStarted = false;
 
 export function startHistoryCleanupTimer() {
@@ -57,27 +66,64 @@ export function insertHistory(record: StoredImage) {
   getDb()
     .prepare(
       `INSERT INTO history
-        (id, mode, prompt, model, size, quality, output_format, image_url, file_path, created_at)
+        (id, source, mode, prompt, model, size, quality, output_format, image_url, file_path, note, created_at)
        VALUES
-        (@id, @mode, @prompt, @model, @size, @quality, @outputFormat, @imageUrl, @filePath, @createdAt)`,
+        (@id, @source, @mode, @prompt, @model, @size, @quality, @outputFormat, @imageUrl, @filePath, @note, @createdAt)`,
     )
     .run(record);
 }
 
-export function listHistory() {
+export function listHistory(options: ListHistoryOptions = {}) {
   cleanupExpiredHistory();
+  const limit = normalizeLimit(options.limit);
+  if (options.source && options.source !== "all") {
+    return getDb()
+      .prepare(
+        `SELECT id, source, mode, prompt, model, size, quality,
+          output_format AS outputFormat,
+          image_url AS imageUrl,
+          file_path AS filePath,
+          note,
+          created_at AS createdAt
+         FROM history
+         WHERE source = @source
+         ORDER BY created_at DESC
+         LIMIT @limit`,
+      )
+      .all({ source: options.source, limit }) as StoredImage[];
+  }
+
   return getDb()
     .prepare(
-      `SELECT id, mode, prompt, model, size, quality,
+      `SELECT id, source, mode, prompt, model, size, quality,
         output_format AS outputFormat,
         image_url AS imageUrl,
         file_path AS filePath,
+        note,
         created_at AS createdAt
        FROM history
        ORDER BY created_at DESC
-       LIMIT 100`,
+       LIMIT @limit`,
     )
-    .all() as StoredImage[];
+    .all({ limit }) as StoredImage[];
+}
+
+export function deleteHistoryItem(id: string) {
+  const row = getDb()
+    .prepare("SELECT file_path AS filePath FROM history WHERE id = ?")
+    .get(id) as Pick<StoredImage, "filePath"> | undefined;
+  if (!row) return false;
+
+  getDb().prepare("DELETE FROM history WHERE id = ?").run(id);
+  cleanupOrphanedImages();
+  return true;
+}
+
+export function updateHistoryNote(id: string, note: string) {
+  const result = getDb()
+    .prepare("UPDATE history SET note = ? WHERE id = ?")
+    .run(note, id);
+  return result.changes > 0;
 }
 
 export function cleanupExpiredHistory() {
@@ -168,3 +214,8 @@ function removeFile(filePath: string) {
     // Ignore deletion errors so history cleanup cannot break generation.
   }
 }
+
+function normalizeLimit(limit: number | undefined) {
+  if (!Number.isFinite(limit)) return 100;
+  return Math.max(1, Math.min(500, Math.floor(limit!)));
+}
diff --git a/src/lib/server/services/image-job-service.ts b/src/lib/server/services/image-job-service.ts
index 62ca4fa..6bf826d 100644
--- a/src/lib/server/services/image-job-service.ts
+++ b/src/lib/server/services/image-job-service.ts
@@ -6,7 +6,11 @@ import {
   insertHistory,
   type StoredImage,
 } from "@/lib/server/repositories/history-repository";
-import { persistBase64Image } from "@/lib/server/storage/image-file-storage";
+import {
+  getGeneratedImagePathFromUrl,
+  persistBase64Image,
+  readPersistedImageFile,
+} from "@/lib/server/storage/image-file-storage";
 
 const identityGuard =
   "When editing a person or group photo, strictly preserve all original identities, facial features, expressions, pose, clothing layout, body proportions, and composition. Do not add, remove, crop, replace, redraw, or distort any person. Change only the requested lighting, color, background polish, clarity, and photographic finish.";
@@ -15,6 +19,7 @@ const openAIMaxRetries = 0;
 const jobRetentionMs = 60 * 60 * 1000;
 
 type ImageMode = "generate" | "edit";
+type ImageSource = "direct" | "canvas";
 type OutputFormat = "png" | "jpeg" | "webp";
 type Quality = "low" | "medium" | "high" | "auto";
 type LogLevel = "info" | "error";
@@ -28,20 +33,31 @@ export type UploadedFile = {
 };
 
 type ImageJobInput = {
+  source: ImageSource;
   mode: ImageMode;
   prompt: string;
+  negativePrompt?: string;
   model: string;
   size: string;
   quality: Quality;
   outputFormat: OutputFormat;
   preserveIdentity: boolean;
+  channelBaseUrl?: string;
+  channelApiKey?: string;
   images: UploadedFile[];
   mask?: UploadedFile;
 };
 
+type ImageReference = {
+  imageUrl?: string;
+  filePath?: string;
+  filename?: string;
+};
+
 type ImageJobResult = {
   id: string;
   imageUrl: string;
+  fileSize?: number;
   model: string;
   size: string;
   quality: Quality;
@@ -101,15 +117,18 @@ export async function submitImageJobRequest(request: Request) {
     phase = "cleanup";
     cleanupExpiredHistory();
 
-    const apiKey = process.env.OPENAI_API_KEY;
-    const baseURL = process.env.OPENAI_BASE_URL;
+    phase = "parse-form";
+    const formData = await request.formData();
+    const input = await parseImageJobInput(formData);
+    const apiKey = input.channelApiKey || process.env.OPENAI_API_KEY;
+    const baseURL = input.channelBaseUrl || process.env.OPENAI_BASE_URL;
 
     if (!apiKey) {
       phase = "validate-env";
-      log("error", "missing OPENAI_API_KEY");
+      log("error", "missing API key");
       return jsonWithRequestId(
         {
-          error: "Missing OPENAI_API_KEY in .env.local",
+          error: "请在渠道配置中填写 API Key，或在 .env.local 中配置 OPENAI_API_KEY",
           requestId,
           phase,
           durationMs: elapsedMs(startedAt),
@@ -119,10 +138,6 @@ export async function submitImageJobRequest(request: Request) {
       );
     }
 
-    phase = "parse-form";
-    const formData = await request.formData();
-    const input = await parseImageJobInput(formData);
-
     log("info", "form parsed", {
       mode: input.mode,
       model: input.model,
@@ -132,6 +147,10 @@ export async function submitImageJobRequest(request: Request) {
       preserveIdentity: input.preserveIdentity,
       promptChars: input.prompt.length,
       promptPreview: preview(input.prompt),
+      negativePromptChars: input.negativePrompt?.length ?? 0,
+      negativePromptPreview: input.negativePrompt
+        ? preview(input.negativePrompt)
+        : undefined,
       imageCount: input.images.length,
       imageNames: input.images.map((image) => image.name),
       imageTypes: input.images.map((image) => image.type),
@@ -141,6 +160,7 @@ export async function submitImageJobRequest(request: Request) {
       maskType: input.mask?.type,
       maskBytes: input.mask?.size,
       baseURL: baseURL ? redactUrl(baseURL) : "default",
+      channelConfigured: Boolean(input.channelApiKey || input.channelBaseUrl),
     });
 
     phase = "validate-input";
@@ -391,10 +411,7 @@ async function runImageJob(
       maxRetries: openAIMaxRetries,
     });
 
-    const finalPrompt =
-      input.preserveIdentity && input.mode === "edit"
-        ? `${input.prompt.trim()}\n\nConstraints: ${identityGuard}`
-        : input.prompt.trim();
+    const finalPrompt = buildFinalPrompt(input);
 
     const common = {
       model: input.model,
@@ -460,6 +477,7 @@ async function runImageJob(
     const resultPayload = {
       id,
       imageUrl: persisted.imageUrl,
+      fileSize: persisted.fileSize,
       model: input.model,
       size: input.size,
       quality: input.quality,
@@ -475,9 +493,11 @@ async function runImageJob(
 
     const historyRecord: StoredImage = {
       ...resultPayload,
+      source: input.source,
       mode: input.mode,
       prompt: input.prompt,
       filePath: persisted.filePath,
+      note: "",
     };
     insertHistory(historyRecord);
 
@@ -558,11 +578,29 @@ function serializeSseEvent(event: string, data: unknown) {
 
 async function parseImageJobInput(formData: FormData): Promise<ImageJobInput> {
   const images = formData.getAll("image");
+  const imageRefs = formData.getAll("imageRef");
   const mask = formData.get("mask");
 
+  // 兼容两种图片来源：
+  // 1. image：前端直接上传的 File，例如用户本地上传、遮罩工具生成的新文件。
+  // 2. imageRef：画布里已经持久化过的图片引用。后端根据 filePath/imageUrl 直读，
+  //    避免浏览器因对象存储 CORS 无法 fetch，也避免大图在前后端之间重复传输。
+  const uploadedImages = await Promise.all(
+    images
+      .filter((image): image is File => image instanceof File)
+      .map((image) => readUploadedFile(image)),
+  );
+  const referencedImages = await Promise.all(
+    imageRefs
+      .filter((imageRef): imageRef is string => typeof imageRef === "string")
+      .map((imageRef, index) => readReferencedImageFile(imageRef, index)),
+  );
+
   return {
+    source: normalizeSource(getString(formData, "source", "direct")),
     mode: getString(formData, "mode", "generate") as ImageMode,
     prompt: getString(formData, "prompt"),
+    negativePrompt: getString(formData, "negativePrompt").trim() || undefined,
     model: getString(formData, "model", "gpt-image-2-2k"),
     size: getString(formData, "size", "auto"),
     quality: normalizeQuality(getString(formData, "quality", "high")),
@@ -570,15 +608,17 @@ async function parseImageJobInput(formData: FormData): Promise<ImageJobInput> {
       getString(formData, "outputFormat", "png"),
     ),
     preserveIdentity: getString(formData, "preserveIdentity", "true") === "true",
-    images: await Promise.all(
-      images
-        .filter((image): image is File => image instanceof File)
-        .map((image) => readUploadedFile(image)),
-    ),
+    channelBaseUrl: normalizeOptionalBaseUrl(getString(formData, "channelBaseUrl")),
+    channelApiKey: getString(formData, "channelApiKey"),
+    images: [...uploadedImages, ...referencedImages],
     mask: mask instanceof File ? await readUploadedFile(mask) : undefined,
   };
 }
 
+function normalizeSource(value: string): ImageSource {
+  return value === "canvas" ? "canvas" : "direct";
+}
+
 function validateImageJobInput(input: ImageJobInput) {
   if (!input.prompt.trim()) {
     return "Prompt is required";
@@ -591,6 +631,21 @@ function validateImageJobInput(input: ImageJobInput) {
   return null;
 }
 
+function buildFinalPrompt(input: ImageJobInput) {
+  const sections = [input.prompt.trim()];
+  const negativePrompt = input.negativePrompt?.trim();
+
+  if (negativePrompt) {
+    sections.push(`Negative prompt: ${negativePrompt}`);
+  }
+
+  if (input.preserveIdentity && input.mode === "edit") {
+    sections.push(`Constraints: ${identityGuard}`);
+  }
+
+  return sections.join("\n\n");
+}
+
 async function readUploadedFile(file: File): Promise<UploadedFile> {
   return {
     buffer: Buffer.from(await file.arrayBuffer()),
@@ -600,6 +655,114 @@ async function readUploadedFile(file: File): Promise<UploadedFile> {
   };
 }
 
+async function readReferencedImageFile(rawReference: string, index: number) {
+  const reference = parseImageReference(rawReference);
+  if (!reference) {
+    throw Object.assign(new Error("图片引用格式无效"), { status: 400 });
+  }
+
+  const filePath = resolveReadableImagePath(reference.imageUrl, reference.filePath);
+  if (filePath) {
+    // 优先使用服务端可信路径读取图片：
+    // - s3://... 由服务端 SDK 走对象存储私有读，不依赖浏览器 CORS。
+    // - /generated/... 反解到本地 public/generated 文件，省掉一次 HTTP 下载。
+    const buffer = await readPersistedImageFile(filePath);
+    if (!buffer) {
+      throw Object.assign(new Error("图片文件不存在或无法读取"), { status: 404 });
+    }
+
+    return {
+      buffer,
+      name: reference.filename || getFallbackImageName(filePath, index),
+      type: getImageContentType(filePath),
+      size: buffer.length,
+    } satisfies UploadedFile;
+  }
+
+  if (!reference.imageUrl) {
+    throw Object.assign(new Error("图片引用缺少 imageUrl 或 filePath"), { status: 400 });
+  }
+
+  // 有些历史数据可能没有 filePath，只保留了公开 imageUrl。
+  // 这种情况才回退到服务端 fetch，并且下面会做严格域名白名单限制。
+  const remoteImage = await readAllowedRemoteImage(reference.imageUrl);
+  if (!remoteImage) {
+    throw Object.assign(new Error("远程图片不可访问"), { status: 502 });
+  }
+
+  return {
+    buffer: remoteImage.buffer,
+    name: reference.filename || getFallbackImageName(reference.imageUrl, index),
+    type: remoteImage.contentType,
+    size: remoteImage.buffer.length,
+  } satisfies UploadedFile;
+}
+
+function parseImageReference(rawReference: string): ImageReference | null {
+  try {
+    const parsed = JSON.parse(rawReference) as Partial<ImageReference>;
+    return {
+      imageUrl: typeof parsed.imageUrl === "string" ? parsed.imageUrl.trim() : undefined,
+      filePath: typeof parsed.filePath === "string" ? parsed.filePath.trim() : undefined,
+      filename: typeof parsed.filename === "string" ? parsed.filename.trim() : undefined,
+    };
+  } catch {
+    return null;
+  }
+}
+
+function resolveReadableImagePath(imageUrl?: string, filePath?: string) {
+  // 画布节点里保存的 filePath 是服务端可信路径。对象存储图片会是 s3://...，
+  // 本地生成图片则可以从 /generated/... 反推出 public/generated 下的实际文件。
+  if (filePath?.startsWith("s3://")) return filePath;
+  if (imageUrl) return getGeneratedImagePathFromUrl(imageUrl);
+  return null;
+}
+
+async function readAllowedRemoteImage(imageUrl: string) {
+  // 只有当节点没有可读 filePath 时才回退到远程 URL，并且只允许读取当前对象存储公开域名。
+  // 这样既避开浏览器 CORS，也避免 /api/images 变成任意 URL 的服务端代理。
+  if (!isAllowedRemoteImageUrl(imageUrl)) return null;
+
+  const response = await fetch(imageUrl, { cache: "no-store" });
+  if (!response.ok) return null;
+
+  const contentType = response.headers.get("content-type") || "image/png";
+  if (!contentType.startsWith("image/")) return null;
+
+  return {
+    buffer: Buffer.from(await response.arrayBuffer()),
+    contentType,
+  };
+}
+
+function isAllowedRemoteImageUrl(imageUrl: string) {
+  try {
+    const url = new URL(imageUrl);
+    return (
+      url.protocol === "https:" &&
+      url.hostname === "file.hanhan.ltd" &&
+      url.pathname.startsWith("/imagegen-tools/generated/")
+    );
+  } catch {
+    return false;
+  }
+}
+
+function getFallbackImageName(value: string, index: number) {
+  const cleanName = value.split(/[\\/]/).at(-1)?.split("?")[0];
+  return cleanName && cleanName.includes(".")
+    ? cleanName
+    : `canvas-reference-${index + 1}.png`;
+}
+
+function getImageContentType(filePath: string) {
+  const extension = filePath.split(".").pop()?.toLowerCase();
+  if (extension === "jpg" || extension === "jpeg") return "image/jpeg";
+  if (extension === "webp") return "image/webp";
+  return "image/png";
+}
+
 function cleanupOldJobs() {
   const cutoff = Date.now() - jobRetentionMs;
   for (const [jobId, job] of imageJobs.entries()) {
@@ -654,6 +817,11 @@ function getString(formData: FormData, key: string, fallback = "") {
   return typeof value === "string" && value.length > 0 ? value : fallback;
 }
 
+function normalizeOptionalBaseUrl(value: string) {
+  const trimmed = value.trim();
+  return trimmed ? trimmed.replace(/\/+$/, "") : undefined;
+}
+
 function normalizeQuality(value: string): Quality {
   return ["low", "medium", "high", "auto"].includes(value)
     ? (value as Quality)
diff --git a/src/lib/server/storage/image-file-storage.ts b/src/lib/server/storage/image-file-storage.ts
index 190b4fe..6f7ce29 100644
--- a/src/lib/server/storage/image-file-storage.ts
+++ b/src/lib/server/storage/image-file-storage.ts
@@ -13,6 +13,7 @@ export type PersistedImageFile = {
   fileName: string;
   filePath: string;
   imageUrl: string;
+  fileSize: number;
 };
 
 type S3StorageConfig = {
@@ -92,7 +93,7 @@ function persistImageBufferLocally(
   const imageUrl = `/generated/${fileName}`;
   writeFileSync(filePath, buffer);
 
-  return { fileName, filePath, imageUrl };
+  return { fileName, filePath, imageUrl, fileSize: buffer.length };
 }
 
 async function persistImageBufferWithFileName(
@@ -121,6 +122,7 @@ async function persistImageBufferWithFileName(
     fileName,
     filePath: `s3://${config.bucket}/${key}`,
     imageUrl: createPublicImageUrl(config, key),
+    fileSize: buffer.length,
   };
 }