feat(canvas): 绘图工具支持自定义 tldraw License Key (#100)

* feat(canvas): 绘图工具 - 支持自定义 tldraw License Key

* docs(canvas): 绘图工具 - 添加 License Key 页面截图

web/src/pages/admin/settings/drawing-engine-settings-page.tsx

@@ -1,4 +1,4 @@
-import { App, Button, Segmented, Tag } from "antd";
+import { App, Button, Input, Segmented, Tag } from "antd";
 import { Brush, Save } from "lucide-react";
 import { useEffect, useState } from "react";
 
@@ -13,6 +13,7 @@ export default function DrawingEngineSettingsPage() {
     const current = useUserStore((state) => state.drawingEngine);
     const setDrawingEngine = useUserStore((state) => state.setDrawingEngine);
     const [engine, setEngine] = useState<CanvasDrawingEngine>(current.defaultEngine);
+    const [tldrawLicenseKey, setTldrawLicenseKey] = useState(current.tldrawLicenseKey || "");
     const [loading, setLoading] = useState(true);
     const [saving, setSaving] = useState(false);
 
@@ -22,6 +23,7 @@ export default function DrawingEngineSettingsPage() {
             if (cancelled) return;
             setDrawingEngine(setting);
             setEngine(setting.defaultEngine);
+            setTldrawLicenseKey(setting.tldrawLicenseKey || "");
         }).catch((error) => {
             if (!cancelled) message.error(error instanceof Error ? error.message : "读取绘图工具配置失败");
         }).finally(() => {
@@ -30,17 +32,19 @@ export default function DrawingEngineSettingsPage() {
         return () => { cancelled = true; };
     }, [message, setDrawingEngine]);
 
+    const tldrawAvailable = isDrawingEngineAvailable("tldraw", tldrawLicenseKey);
     const save = async () => {
-        if (!isDrawingEngineAvailable(engine)) {
-            message.error("当前生产构建未配置 tldraw License Key");
+        if (!isDrawingEngineAvailable(engine, tldrawLicenseKey)) {
+            message.error("请先配置有效的 tldraw License Key");
             return;
         }
         setSaving(true);
         try {
-            const { setting } = await updateAdminDrawingEngineSetting(engine);
+            const { setting } = await updateAdminDrawingEngineSetting({ defaultEngine: engine, tldrawLicenseKey });
             setDrawingEngine(setting);
             setEngine(setting.defaultEngine);
-            message.success("默认绘图工具已更新");
+            setTldrawLicenseKey(setting.tldrawLicenseKey || "");
+            message.success("绘图工具配置已更新");
         } catch (error) {
             message.error(error instanceof Error ? error.message : "保存绘图工具配置失败");
         } finally {
@@ -48,28 +52,35 @@ export default function DrawingEngineSettingsPage() {
         }
     };
 
-    const dirty = engine !== current.defaultEngine;
+    const dirty = engine !== current.defaultEngine || tldrawLicenseKey !== (current.tldrawLicenseKey || "");
     return (
         <AdminPageFrame title="绘图工具" description="设置新建绘图节点使用的默认编辑器">
             <div className="mx-auto max-w-4xl space-y-5">
                 <SettingsSectionCard icon={<Brush className="size-4" />} title="默认绘图引擎" description="已有绘图保持原引擎，仅新建绘图使用这里的选择。" status={<Tag variant="filled" color="blue">{drawingEngineLabel(current.defaultEngine)}</Tag>}>
-                    <div className="flex flex-col gap-4 px-5 py-5 sm:flex-row sm:items-center sm:justify-between">
-                        <Segmented<CanvasDrawingEngine>
-                            block
-                            className="w-full sm:max-w-md"
-                            disabled={loading || saving}
-                            value={engine}
-                            onChange={setEngine}
-                            options={[
-                                { label: "Excalidraw", value: "excalidraw" },
-                                { label: "tldraw", value: "tldraw", disabled: !isDrawingEngineAvailable("tldraw") },
-                            ]}
-                        />
-                        <Button type="primary" icon={<Save className="size-4" />} loading={saving} disabled={loading || !dirty} onClick={() => void save()}>保存配置</Button>
+                    <div className="flex flex-col gap-5 px-5 py-5">
+                        <div className="w-full sm:max-w-md">
+                            <label className="mb-2 block text-sm font-medium">tldraw License Key</label>
+                            <Input.Password value={tldrawLicenseKey} onChange={(event) => setTldrawLicenseKey(event.target.value)} placeholder="输入 tldraw License Key" disabled={loading || saving} autoComplete="off" />
+                            <p className="mt-2 text-xs text-foreground/55">填入有效的 License Key 后保存，即可解锁 tldraw 选项。</p>
+                        </div>
+                        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+                            <Segmented<CanvasDrawingEngine>
+                                block
+                                className="w-full sm:max-w-md"
+                                disabled={loading || saving}
+                                value={engine}
+                                onChange={setEngine}
+                                options={[
+                                    { label: "Excalidraw", value: "excalidraw" },
+                                    { label: "tldraw", value: "tldraw", disabled: !tldrawAvailable },
+                                ]}
+                            />
+                            <Button type="primary" icon={<Save className="size-4" />} loading={saving} disabled={loading || !dirty} onClick={() => void save()}>保存配置</Button>
+                        </div>
                     </div>
-                    {!isDrawingEngineAvailable("tldraw") ? <div className="border-t border-border px-5 py-3 text-xs text-amber-600 dark:text-amber-400">当前生产构建没有 tldraw License Key，不能将其设为新建默认值。</div> : null}
+                    {!tldrawAvailable ? <div className="border-t border-border px-5 py-3 text-xs text-amber-600 dark:text-amber-400">当前未配置 tldraw License Key，不能将其设为新建默认值。</div> : null}
                 </SettingsSectionCard>
             </div>
         </AdminPageFrame>
     );
-}
+}