refactor(canvas): 替换自定义ID生成函数为nanoid并优化配置逻辑

- 移除自定义createId函数，统一使用nanoid库生成唯一标识符
- 将useEffectiveAiConfig Hook替换为resolveEffectiveConfig工具函数
- 直接从config store获取publicSettings避免额外的Hook依赖
- 更新所有组件中的ID生成调用以使用nanoid
- 简化buildApiUrl函数中的基础URL规范化逻辑

web/src/app/(user)/canvas/[id]/canvas-client-page.tsx

@@ -6,9 +6,9 @@ import { useParams, useRouter } from "next/navigation";
 import { Home, ImageIcon, Images, Keyboard, List, LogOut, Menu, MessageSquare, Plus, Redo2, Settings2, Trash2, Undo2, Upload } from "lucide-react";
 
 import { requestEdit, requestGeneration, requestImageQuestion } from "@/services/api/image";
-import { defaultConfig, isAiConfigReady, type AiConfig, useConfigStore, useEffectiveAiConfig } from "@/stores/use-config-store";
+import { defaultConfig, isAiConfigReady, resolveEffectiveConfig, type AiConfig, useConfigStore } from "@/stores/use-config-store";
 import { resolveImageUrl, uploadImage, type UploadedImage } from "@/services/image-storage";
-import { createId } from "@/lib/id";
+import { nanoid } from "nanoid";
 import { getDataUrlByteSize, readImageMeta } from "@/lib/image-utils";
 import { canvasThemes, type CanvasBackgroundMode } from "@/lib/canvas-theme";
 import { useThemeStore } from "@/stores/use-theme-store";
@@ -231,7 +231,7 @@ function InfiniteCanvasPage() {
   });
 
   const config = useConfigStore((state) => state.config);
-  const effectiveConfig = useEffectiveAiConfig(config);
+  const effectiveConfig = useConfigStore((state) => resolveEffectiveConfig(state.config, state.publicSettings?.modelChannel || null));
   const openConfigDialog = useConfigStore((state) => state.openConfigDialog);
   const addAsset = useAssetStore((state) => state.addAsset);
   const cleanupAssetImages = useAssetStore((state) => state.cleanupImages);
@@ -486,7 +486,7 @@ function InfiniteCanvasPage() {
       return;
     }
     setNodes((prev) => [...prev, newNode]);
-    setConnections((prev) => [...prev, { id: createId(), ...connection }]);
+    setConnections((prev) => [...prev, { id: nanoid(), ...connection }]);
     setSelectedNodeIds(new Set([newNode.id]));
     setSelectedConnectionId(null);
     setDialogNodeId(newNode.id);
@@ -1287,7 +1287,7 @@ function InfiniteCanvasPage() {
     const cropped = await cropDataUrl(node.metadata.content, crop);
     const image = await uploadImage(cropped);
     const width = Math.min(node.width, Math.max(220, image.width));
-    const childId = createId();
+    const childId = nanoid();
     const child: CanvasNodeData = {
       id: childId,
       type: CanvasNodeType.Image,
@@ -1301,7 +1301,7 @@ function InfiniteCanvasPage() {
       },
     };
     setNodes((prev) => [...prev, child]);
-    setConnections((prev) => [...prev, { id: createId(), fromNodeId: node.id, toNodeId: childId }]);
+    setConnections((prev) => [...prev, { id: nanoid(), fromNodeId: node.id, toNodeId: childId }]);
     setSelectedNodeIds(new Set([childId]));
     setDialogNodeId(childId);
     setCropNodeId(null);
@@ -1314,7 +1314,7 @@ function InfiniteCanvasPage() {
       openConfigDialog(true);
       return;
     }
-    const childId = createId();
+    const childId = nanoid();
     const imageConfig = NODE_DEFAULT_SIZE[CanvasNodeType.Image];
     const title = buildAngleLabel(params);
     const prompt = buildAnglePrompt(params);
@@ -1329,7 +1329,7 @@ function InfiniteCanvasPage() {
       height: imageConfig.height,
       metadata: { prompt, status: NODE_STATUS_LOADING },
     }]);
-    setConnections((prev) => [...prev, { id: createId(), fromNodeId: node.id, toNodeId: childId }]);
+    setConnections((prev) => [...prev, { id: nanoid(), fromNodeId: node.id, toNodeId: childId }]);
     setSelectedNodeIds(new Set([childId]));
     setDialogNodeId(childId);
     try {
@@ -1466,8 +1466,8 @@ function InfiniteCanvasPage() {
           const parentPosition = sourceNode?.position || { x: 0, y: 0 };
           const gap = 96;
           const rowGap = 36;
-          const rootId = createId();
+          const rootId = nanoid();
-          const childIds = count > 1 ? Array.from({ length: count }, () => createId()) : [];
+          const childIds = count > 1 ? Array.from({ length: count }, () => nanoid()) : [];
           const targetIds = count > 1 ? childIds : [rootId];
           pendingChildIds = [rootId, ...childIds];
           const rootNode: CanvasNodeData = {
@@ -1494,7 +1494,7 @@ function InfiniteCanvasPage() {
             height: imageConfig.height,
             metadata: { prompt: effectivePrompt, status: NODE_STATUS_LOADING, batchRootId: count > 1 ? rootId : undefined },
           }));
-          const batchConnections = [{ id: createId(), fromNodeId: nodeId, toNodeId: rootId }, ...childIds.map((childId) => ({ id: createId(), fromNodeId: rootId, toNodeId: childId }))];
+          const batchConnections = [{ id: nanoid(), fromNodeId: nodeId, toNodeId: rootId }, ...childIds.map((childId) => ({ id: nanoid(), fromNodeId: rootId, toNodeId: childId }))];
 
           setNodes((prev) => [
             ...prev.map((node) =>
@@ -1564,7 +1564,7 @@ function InfiniteCanvasPage() {
         const parentConfig = NODE_DEFAULT_SIZE[isConfigNode ? CanvasNodeType.Config : CanvasNodeType.Text];
         const textConfig = NODE_DEFAULT_SIZE[CanvasNodeType.Text];
         const parentPosition = sourceNode?.position || { x: 0, y: 0 };
-        const childIds = isConfigNode || editingTextNode ? Array.from({ length: textCount }, () => createId()) : [];
+        const childIds = isConfigNode || editingTextNode ? Array.from({ length: textCount }, () => nanoid()) : [];
         pendingChildIds = childIds;
         if (isConfigNode || editingTextNode) {
           const childNodes: CanvasNodeData[] = childIds.map((id, index) => ({
@@ -1580,7 +1580,7 @@ function InfiniteCanvasPage() {
             metadata: { prompt, status: NODE_STATUS_LOADING, fontSize: 14 },
           }));
           setNodes((prev) => [...prev.map((node) => node.id === nodeId && isConfigNode ? { ...node, metadata: { ...node.metadata, prompt, status: NODE_STATUS_LOADING, errorDetails: undefined } } : node), ...childNodes]);
-          setConnections((prev) => [...prev, ...childIds.map((childId) => ({ id: createId(), fromNodeId: nodeId, toNodeId: childId }))]);
+          setConnections((prev) => [...prev, ...childIds.map((childId) => ({ id: nanoid(), fromNodeId: nodeId, toNodeId: childId }))]);
         }
 
         const answers = await Promise.all(
@@ -1690,7 +1690,7 @@ function InfiniteCanvasPage() {
       size: effectiveConfig.size,
       count: 3,
     });
-    const connection = { id: createId(), fromNodeId: sourceNode.id, toNodeId: configNode.id };
+    const connection = { id: nanoid(), fromNodeId: sourceNode.id, toNodeId: configNode.id };
     const nextNodes = nodesRef.current.map((item) => item.id === sourceNode.id ? { ...item, metadata: { ...item.metadata, content: prompt, prompt, status: NODE_STATUS_SUCCESS } } : item).concat(configNode);
     const nextConnections = [...connectionsRef.current, connection];
     nodesRef.current = nextNodes;

web/src/app/(user)/canvas/components/canvas-assistant-panel.tsx

@@ -7,9 +7,9 @@ import { motion } from "motion/react";
 
 import { ImageGenerationPending } from "@/components/image-generation-pending";
 import { ModelPicker } from "@/components/model-picker";
-import { isAiConfigReady, useConfigStore, useEffectiveAiConfig, type AiConfig } from "@/stores/use-config-store";
+import { isAiConfigReady, resolveEffectiveConfig, useConfigStore, type AiConfig } from "@/stores/use-config-store";
 import { canvasThemes } from "@/lib/canvas-theme";
-import { createId } from "@/lib/id";
+import { nanoid } from "nanoid";
 import { cn } from "@/lib/utils";
 import { requestEdit, requestGeneration, requestImageQuestion, type ChatCompletionMessage } from "@/services/api/image";
 import { imageToDataUrl, uploadImage } from "@/services/image-storage";
@@ -41,7 +41,7 @@ type CanvasAssistantPanelProps = {
 export function CanvasAssistantPanel({ nodes, selectedNodeIds, sessions, activeSessionId, onSelectNodeIds, onSessionsChange, onInsertImage, onInsertText, onPasteImage, onCollapseStart, onCollapse }: CanvasAssistantPanelProps) {
   const theme = canvasThemes[useThemeStore((state) => state.theme)];
   const config = useConfigStore((state) => state.config);
-  const effectiveConfig = useEffectiveAiConfig(config);
+  const effectiveConfig = useConfigStore((state) => resolveEffectiveConfig(state.config, state.publicSettings?.modelChannel || null));
   const cleanupImages = useAssetStore((state) => state.cleanupImages);
   const updateConfig = useConfigStore((state) => state.updateConfig);
   const openConfigDialog = useConfigStore((state) => state.openConfigDialog);
@@ -149,8 +149,8 @@ export function CanvasAssistantPanel({ nodes, selectedNodeIds, sessions, activeS
     }
 
     const refs = savedReferences || selectedReferences;
-    const userMessage: CanvasAssistantMessage = { id: createId(), role: "user", mode: nextMode, text, references: refs };
+    const userMessage: CanvasAssistantMessage = { id: nanoid(), role: "user", mode: nextMode, text, references: refs };
-    const assistantId = createId();
+    const assistantId = nanoid();
     appendMessage(session.id, userMessage);
     appendMessage(session.id, { id: assistantId, role: "assistant", mode: nextMode, text: nextMode === "image" ? "正在生成图片" : "正在回答", isLoading: true });
     setPrompt("");
@@ -616,5 +616,5 @@ async function buildChatMessages(messages: CanvasAssistantMessage[]): Promise<Ch
 
 function createSession(): CanvasAssistantSession {
   const now = new Date().toISOString();
-  return { id: createId(), title: "新对话", messages: [], createdAt: now, updatedAt: now };
+  return { id: nanoid(), title: "新对话", messages: [], createdAt: now, updatedAt: now };
 }

web/src/app/(user)/canvas/stores/use-canvas-store.ts

@@ -1,7 +1,7 @@
 import { create } from "zustand";
 import { persist, type PersistStorage, type StorageValue } from "zustand/middleware";
 
-import { createId } from "@/lib/id";
+import { nanoid } from "nanoid";
 import { localForageStorage } from "@/lib/localforage-storage";
 import type { CanvasBackgroundMode } from "@/lib/canvas-theme";
 import type { CanvasAssistantSession, CanvasConnection, CanvasNodeData, ViewportTransform } from "../types";
@@ -64,7 +64,7 @@ export const useCanvasStore = create<CanvasStore>()(
       projects: [],
       createProject: (title = "未命名画布") => {
         const now = new Date().toISOString();
-        const id = createId();
+        const id = nanoid();
         const project: CanvasProject = {
           id,
           title,
@@ -83,7 +83,7 @@ export const useCanvasStore = create<CanvasStore>()(
       importProject: (source) => {
         const now = new Date().toISOString();
         const project: CanvasProject = {
-          id: createId(),
+          id: nanoid(),
           title: source.title || "导入画布",
           createdAt: source.createdAt || now,
           updatedAt: now,

web/src/app/(user)/image/page.tsx

@@ -8,8 +8,8 @@ import localforage from "localforage";
 import { ModelPicker } from "@/components/model-picker";
 import { PromptSelectDialog } from "@/components/prompts/prompt-select-dialog";
 import { AssetPickerModal, type InsertAssetPayload } from "@/app/(user)/canvas/components/asset-picker-modal";
-import { isAiConfigReady, useConfigStore, useEffectiveAiConfig, type AiConfig } from "@/stores/use-config-store";
+import { isAiConfigReady, resolveEffectiveConfig, useConfigStore, type AiConfig } from "@/stores/use-config-store";
-import { createId } from "@/lib/id";
+import { nanoid } from "nanoid";
 import { formatBytes, formatDuration, getDataUrlByteSize, readImageMeta } from "@/lib/image-utils";
 import { requestEdit, requestGeneration } from "@/services/api/image";
 import { uploadImage } from "@/services/image-storage";
@@ -60,7 +60,7 @@ export default function ImagePage() {
   const { message } = App.useApp();
   const fileInputRef = useRef<HTMLInputElement>(null);
   const config = useConfigStore((state) => state.config);
-  const effectiveConfig = useEffectiveAiConfig(config);
+  const effectiveConfig = useConfigStore((state) => resolveEffectiveConfig(state.config, state.publicSettings?.modelChannel || null));
   const updateConfig = useConfigStore((state) => state.updateConfig);
   const openConfigDialog = useConfigStore((state) => state.openConfigDialog);
   const addAsset = useAssetStore((state) => state.addAsset);
@@ -97,7 +97,7 @@ export default function ImagePage() {
     const imageFiles = Array.from(files || []).filter((file) => file.type.startsWith("image/"));
     const nextReferences = await Promise.all(imageFiles.map(async (file) => {
       const image = await uploadImage(file);
-      return { id: createId(), name: file.name, type: image.mimeType, dataUrl: image.url, storageKey: image.storageKey };
+      return { id: nanoid(), name: file.name, type: image.mimeType, dataUrl: image.url, storageKey: image.storageKey };
     }));
     setReferences((value) => [...value, ...nextReferences]);
   };
@@ -112,7 +112,7 @@ export default function ImagePage() {
       }
       const nextReferences = await Promise.all(blobs.map(async (blob, index) => {
         const image = await uploadImage(blob);
-        return { id: createId(), name: `clipboard-${index + 1}.png`, type: image.mimeType, dataUrl: image.url, storageKey: image.storageKey };
+        return { id: nanoid(), name: `clipboard-${index + 1}.png`, type: image.mimeType, dataUrl: image.url, storageKey: image.storageKey };
       }));
       setReferences((value) => [...value, ...nextReferences]);
       message.success(`已读取 ${nextReferences.length} 张参考图`);
@@ -139,7 +139,7 @@ export default function ImagePage() {
     setElapsedMs(0);
     setRunning(true);
     setPreviewLog(null);
-    setResults(Array.from({ length: generationCount }, () => ({ id: createId(), status: "pending" })));
+    setResults(Array.from({ length: generationCount }, () => ({ id: nanoid(), status: "pending" })));
     const batchStartedAt = performance.now();
     setStartedAt(batchStartedAt);
 
@@ -170,7 +170,7 @@ export default function ImagePage() {
 
   const addResultToReferences = async (image: GeneratedImage, index: number) => {
     const stored = await uploadImage(image.dataUrl);
-    setReferences((value) => [...value, { id: createId(), name: `result-${index + 1}.png`, type: stored.mimeType, dataUrl: stored.url, storageKey: stored.storageKey }]);
+    setReferences((value) => [...value, { id: nanoid(), name: `result-${index + 1}.png`, type: stored.mimeType, dataUrl: stored.url, storageKey: stored.storageKey }]);
     message.success("已加入参考图");
   };
 
@@ -193,7 +193,7 @@ export default function ImagePage() {
       setPrompt(payload.content);
     } else {
       const stored = await uploadImage(payload.dataUrl);
-      setReferences((value) => [...value, { id: createId(), name: payload.title, type: stored.mimeType, dataUrl: stored.url, storageKey: stored.storageKey }]);
+      setReferences((value) => [...value, { id: nanoid(), name: payload.title, type: stored.mimeType, dataUrl: stored.url, storageKey: stored.storageKey }]);
     }
     setAssetPickerOpen(false);
   };
@@ -583,7 +583,7 @@ async function readStoredLogs() {
 
 function normalizeLog(log: Partial<GenerationLog>): GenerationLog {
   return {
-    id: log.id || createId(),
+    id: log.id || nanoid(),
     createdAt: log.createdAt || Date.now(),
     title: log.title || log.model || "未命名",
     time: log.time || new Date().toLocaleString("zh-CN", { hour12: false }),
@@ -601,7 +601,7 @@ function normalizeLog(log: Partial<GenerationLog>): GenerationLog {
 
 function buildLog({ prompt, model, config, durationMs, successCount, failCount, status, thumbnails }: { prompt: string; model: string; config: { size: string; quality: string; count?: string }; durationMs: number; successCount: number; failCount: number; status: GenerationLog["status"]; thumbnails: string[] }): GenerationLog {
   return {
-    id: createId(),
+    id: nanoid(),
     createdAt: Date.now(),
     title: prompt.slice(0, 12) || "未命名",
     time: new Date().toLocaleString("zh-CN", { hour12: false }),

web/src/lib/id.ts

@@ -1,5 +0,0 @@
-import { nanoid } from "nanoid";
-
-export function createId() {
-  return nanoid();
-}

web/src/services/api/image.ts

@@ -1,7 +1,7 @@
 import axios from "axios";
 
 import { buildApiUrl, type AiConfig } from "@/stores/use-config-store";
-import { createId } from "@/lib/id";
+import { nanoid } from "nanoid";
 import { dataUrlToFile } from "@/lib/image-utils";
 import { imageToDataUrl } from "@/services/image-storage";
 import type { ReferenceImage } from "@/types/image";
@@ -31,7 +31,7 @@ function parseImagePayload(payload: ImageApiResponse) {
     payload.data
       ?.map(resolveImageDataUrl)
       .filter((value): value is string => Boolean(value))
-      .map((dataUrl) => ({ id: createId(), dataUrl })) || [];
+      .map((dataUrl) => ({ id: nanoid(), dataUrl })) || [];
 
   if (images.length === 0) {
     throw new Error("接口没有返回图片");

web/src/services/image-storage.ts

@@ -2,7 +2,7 @@
 
 import localforage from "localforage";
 
-import { createId } from "@/lib/id";
+import { nanoid } from "nanoid";
 import { readImageMeta } from "@/lib/image-utils";
 
 export type UploadedImage = {
@@ -19,7 +19,7 @@ const objectUrls = new Map<string, string>();
 
 export async function uploadImage(input: string | Blob): Promise<UploadedImage> {
   const blob = typeof input === "string" ? await (await fetch(input)).blob() : input;
-  const storageKey = `image:${createId()}`;
+  const storageKey = `image:${nanoid()}`;
   await store.setItem(storageKey, blob);
   const url = URL.createObjectURL(blob);
   objectUrls.set(storageKey, url);

web/src/stores/use-asset-store.ts

@@ -3,7 +3,7 @@
 import { create } from "zustand";
 import { persist, type PersistStorage, type StorageValue } from "zustand/middleware";
 
-import { createId } from "@/lib/id";
+import { nanoid } from "nanoid";
 import { localForageStorage } from "@/lib/localforage-storage";
 import { cleanupUnusedImages, resolveImageUrl, uploadImage } from "@/services/image-storage";
 
@@ -63,7 +63,7 @@ export const useAssetStore = create<AssetStore>()(
       assets: [],
       addAsset: (asset) => {
         const now = new Date().toISOString();
-        const id = createId();
+        const id = nanoid();
         set((state) => ({ assets: [{ ...asset, id, createdAt: now, updatedAt: now } as Asset, ...state.assets] }));
         return id;
       },

web/src/stores/use-config-store.ts

@@ -1,6 +1,5 @@
 "use client";
 
-import { useMemo } from "react";
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
 
@@ -89,10 +88,7 @@ export const useConfigStore = create<ConfigStore>()(
   ),
 );
 
-export function useEffectiveAiConfig(config: AiConfig) {
+export function resolveEffectiveConfig(config: AiConfig, modelChannel: AdminPublicSettings["modelChannel"] | null) {
-  const modelChannel = useConfigStore((state) => state.publicSettings?.modelChannel);
-
-  return useMemo(() => {
   const channelMode = modelChannel?.allowCustomChannel ? config.channelMode : "remote";
   if (channelMode === "local" || !modelChannel) return { ...config, channelMode };
   const models = modelChannel.availableModels;
@@ -105,15 +101,10 @@ export function useEffectiveAiConfig(config: AiConfig) {
     textModel: models.includes(config.textModel) ? config.textModel : modelChannel.defaultTextModel || modelChannel.defaultModel,
     systemPrompt: modelChannel.systemPrompt,
   };
-  }, [config, modelChannel]);
-}
-
-export function normalizeBaseUrl(value: string) {
-  return value.trim().replace(/\/+$/, "");
 }
 
 export function buildApiUrl(baseUrl: string, path: string) {
-  const normalizedBaseUrl = normalizeBaseUrl(baseUrl);
+  const normalizedBaseUrl = baseUrl.trim().replace(/\/+$/, "");
   const apiBaseUrl = normalizedBaseUrl.endsWith("/v1") ? normalizedBaseUrl : `${normalizedBaseUrl}/v1`;
   return `${apiBaseUrl}${path}`;
 }