@rxdrag/website-studio 0.0.18 → 0.0.20

package/dist/index.mjs

@@ -6,10 +6,10 @@ var __publicField = (obj, key, value) => {
 };
 import * as React from "react";
 import React__default, { createContext, useContext, useMemo, memo, useEffect, useCallback, useState, useRef, forwardRef as forwardRef$2, useImperativeHandle, isValidElement, cloneElement } from "react";
-import { ThemeFields, PageQueryOptions, PageFields, FrontComponentQueryOptions, FrontComponentFields, ComponentCategoryFields, SectionTemplateQueryOptions, SectionTemplateFields, ComponentCategoryQueryOptions, TemplateCategoryQueryOptions, TemplateCategoryFields, ThemeQueryOptions, StyleConfigFields, LangFields, PageAssciations, ProductCategoryEntityName, ProductCategoryQueryOptions, ProductCategoryFields, ProductQueryOptions, ProductFields, PublishableStatus, PageType, ExtendFieldType, ThemeConfigQueryOptions, ThemeConfigFields, ThemeConfigAssciations, MediaQueryOptions, themeConfigToInputCascade, ThemeConfigEntityName, MediaType, themeConfigToInput, websiteToInput, LangQueryOptions, WebsiteAssciations, PageEntityName, ThemeEntityName, themeToInputCascade, ThemeCategoryFields, FrontComponentEntityName, pageToInputCascade, sectionTemplateToInput, PageMetaFields, pageToInput, frontComponentToInput, ComponentCategoryEntityName, componentCategoryToInput, themeToInput, SectionTemplateEntityName, TemplateCategoryEntityName, templateCategoryToInput } from "@rxdrag/rxcms-models";
+import { ThemeFields, PageQueryOptions, PageFields, FrontComponentQueryOptions, FrontComponentFields, ComponentCategoryFields, SectionTemplateQueryOptions, SectionTemplateFields, ComponentCategoryQueryOptions, TemplateCategoryQueryOptions, TemplateCategoryFields, ThemeQueryOptions, StyleConfigFields, LangFields, ThemeConfigFields, PageAssciations, ProductCategoryEntityName, ProductCategoryQueryOptions, ProductCategoryFields, ProductQueryOptions, ProductFields, PublishableStatus, PageType, websiteToInput, LangQueryOptions, WebsiteAssciations, ExtendFieldType, ThemeConfigQueryOptions, ThemeConfigAssciations, MediaQueryOptions, themeConfigToInputCascade, ThemeConfigEntityName, MediaType, themeConfigToInput, PageEntityName, ThemeEntityName, themeToInputCascade, ThemeCategoryFields, FrontComponentEntityName, pageToInputCascade, sectionTemplateToInput, PageMetaFields, pageToInput, PageMetaAssciations, frontComponentToInput, ComponentCategoryEntityName, componentCategoryToInput, themeToInput, SectionTemplateEntityName, TemplateCategoryEntityName, templateCategoryToInput } from "@rxdrag/rxcms-models";
 import { GlobalLoading, EntityForm, SubmitButton, useListData, SearchInput, EntityPagination, useIsLoading, QueryListScope, useRemoveRow, useEditRow, EntityEditModal, useSelectionsState, EntityTable, EntityListScope, NewButton, EntityRowScope, EntitySelectField, useNewRow } from "@rxdrag/rxcms-models-ui";
-import { useOneTheme, usePageList, useTemplateCategoryList, useSectionTemplateList, useComponentCategoryList, useFrontComponentList, useOneThemeById, useUpsertOneTheme, useOneThemeConfig, useUpsertOneThemeConfig, useUpsertOneWebsite, useDeleteThemeById, useLangList, useUpsertOnePage, useUpsertOneSectionTemplate, useDeletePageById, useUpsertOneFrontComponent } from "@rxdrag/rxcms-model-hooks";
-import { newPageMetaOptions, useWebsite, useCurrentLang, ComponentType, MediaSingleSelectField, currentLangState, TitleAndSlug, TitleViewField, DescriptionViewField, SiteRoot } from "@rxdrag/biz-components";
+import { useOneTheme, usePageList, useTemplateCategoryList, useSectionTemplateList, useComponentCategoryList, useFrontComponentList, useOneThemeById, useUpsertOneWebsite, useDeleteThemeById, useUpsertOneTheme, useLangList, useOneThemeConfig, useUpsertOneThemeConfig, useUpsertOnePage, useUpsertOneSectionTemplate, useDeletePageById, useUpsertOneFrontComponent } from "@rxdrag/rxcms-model-hooks";
+import { newPageMetaOptions, useWebsite, useCurrentLang, ComponentType, currentLangState, MediaSingleSelectField, FullImageSelectField, TitleAndSlug, TitleViewField, DescriptionViewField, SiteRoot } from "@rxdrag/biz-components";
 import { parseExpressionValue, isExpression, extractVariables, compileCode, AsyncFunction, transformCodeToSchema, transformSchemaToCode } from "@rxdrag/astro-compiler";
 import { CommentNodeName, TextNodeName, CharNodeName } from "@rxdrag/schema-pro";
 import { useDesignerEngine, useComponentManager, useTreeNode, useComponentDesigner, usePlaceHolder, DefaultPlaceHolder, useBehavior, NodeContext, DocumentContext, useNode, Designer, useUndo, useRedo, useCurrentNode, useNodeMeta, useChangeNodeMeta, useSetters, useDocument, useDocumentChangedState, useActiveIdState, useSelect, useGetNode, useActions, useCurrentTree, useSelectedNodeIds, useResourceNode, DocumentRoot } from "@rxdrag/react-core-pro";
@@ -19,19 +19,19 @@ import { isHTMLElement, isStr } from "@rxdrag/shared";
 import { isFunction, debounce, keys, uniqueId } from "lodash-es";
 import { useEntifyEndpoint, useEntifyToken, useLazyQueryEntityList, useLazyQueryOneEntity, useCreateEntityClient, emitEntityChange } from "@rxdrag/entify-hooks";
 import dayjs from "dayjs";
-import { ErrorBoundary, ColorPicker, saveFile, SettingsIcon, AddIcon, ModalBody, ModalFooter, CheckCircleIcon, CloseIcon, TaskStopIcon, AiStarIcon, ConfirmDialog, Drawer, ModalHeader, ModalClose, SearchIcon, ModalContent, Modal, ModalOverlay, ChevronDownIcon, MonacoEditor, DarkIcon, LightIcon, MoreIcon, LanguageIcon, StyledTooltip, PlayIcon, Logo, WarningIcon, PinIcon, PredefinedColorPicker, PagesIcon, WidgetIcon, SeoIcon, LeafNode, GroupNode, TreeView, DesignIcon, EditIcon, RemoveIcon, ResetIcon, ImportIcon, AstroIcon, AddFolderIcon, TemplateIcon, getTheFile, AddTemplateIcon } from "@rxdrag/rxcms-common";
+import { ErrorBoundary, ColorPicker, useSave, CheckCircleIcon, CloseIcon, ModalBody, AddIcon, TaskStopIcon, AiStarIcon, ConfirmDialog, SettingsIcon, ModalFooter, FavouriteIcon, LightIcon, DarkIcon, Drawer, ModalHeader, ModalClose, SearchIcon, ModalContent, Modal, ModalOverlay, ChevronDownIcon, MonacoEditor, MoreIcon, LanguageIcon, StyledTooltip, PlayIcon, Logo, GlobalIcon, SnsIcon, LightBoltIcon, WarningIcon, PinIcon, PredefinedColorPicker, PagesIcon, WidgetIcon, SeoIcon, LeafNode, GroupNode, TreeView, DesignIcon, EditIcon, RemoveIcon, ResetIcon, ImportIcon, AstroIcon, AddFolderIcon, TemplateIcon, getTheFile, AddTemplateIcon } from "@rxdrag/rxcms-common";
 import { PageLoader, PopoverController, ModalController, AnimateController, TabsController, NumberController, FlipController, CollapseController, AosController } from "@rxdrag/website-lib-core";
 import gsap from "gsap";
 import { Input, Textarea, StringArrayInput, ImageSelect, TargetSetter, propSetters, DeviceBreakpoints, DeviceContext } from "@rxdrag/schema-setters";
-import { Switch, Accordion, AccordionItem, Input as Input$1, Select, SelectItem, Button as Button$1, Tabs, Tab, Divider, Card, CardHeader, CardBody, CircularProgress, Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Skeleton, CardFooter, Image, Chip, Checkbox, useDisclosure, cn, Popover, PopoverTrigger, PopoverContent } from "@heroui/react";
+import { Switch, Card, CardBody, Button as Button$1, CircularProgress, CardHeader, Select, SelectItem, Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Accordion, AccordionItem, Input as Input$1, Tabs, Tab, Divider, Skeleton, CardFooter, Image, Chip, Checkbox, useDisclosure, cn, Popover, PopoverTrigger, PopoverContent } from "@heroui/react";
+import { useSetRecoilState, atom, useRecoilState, useRecoilValue, selector } from "recoil";
 import { globalErrorState, useUpsertEntityWithIndicator, globalSuccessState } from "@rxdrag/rxcms-entify-wrapper";
-import { atom, useSetRecoilState, useRecoilValue, useRecoilState, selector } from "recoil";
 import JSZip from "jszip";
-import { InputField, TextareaField, Form } from "@rxdrag/fieldy-heroui";
-import { ObjectField, VirtualForm } from "@rxdrag/react-fieldy-pro";
 import { Icon } from "@iconify/react";
 import { useInprogressTaskByKey, useUpdateTask, taskPool, TranslateThemeTask, TaskManager, ResetPageTask, ImportPagesTask, ImportComponentsTask } from "@rxdrag/ai-tasks";
 import { useAiUrl, useAiAgent, AiWidget, AiAgentRoot } from "@rxdrag/ai-agent";
+import { InputField, TextareaField, toField, ColorField, Form } from "@rxdrag/fieldy-heroui";
+import { ObjectField, useFormValue, useForm, VirtualForm } from "@rxdrag/react-fieldy-pro";
 import { useParams } from "react-router-dom";
 import { LazyMotion, AnimatePresence, m } from "framer-motion";
 import { ComponentRender } from "@rxdrag/react-runner-pro";
@@ -1167,6 +1167,10 @@ function newThemeQueryOptions(websiteId, langId) {
     LangFields.cnName,
     LangFields.localName,
     LangFields.enName
+  ]).config([
+    ThemeConfigFields.id,
+    ThemeConfigFields.domain,
+    ThemeConfigFields.websiteTitle
   ]).setNoQuery(!websiteId || !langId);
 }
 function fullThemeQueryOptions() {
@@ -1177,6 +1181,15 @@ function fullThemeQueryOptions() {
     StyleConfigFields.cssVariants,
     StyleConfigFields.tailwindConfig,
     StyleConfigFields.description
+  ]).config([
+    ThemeConfigFields.id,
+    ThemeConfigFields.domain,
+    ThemeConfigFields.websiteTitle,
+    ThemeConfigFields.svgIcon,
+    ThemeConfigFields.themeColor,
+    ThemeConfigFields.pngIcon,
+    ThemeConfigFields.icoIcon,
+    ThemeConfigFields.appleTouchIcon
   ]).lang([LangFields.id, LangFields.abbr]);
 }
 function newThemeByIdQueryOptions() {
@@ -2129,6 +2142,13 @@ Ideal for **manufacturing, logistics, automation, and more**, our **[Product Nam
     };
   }
 );
+const mockWebsite = {
+  id: "website",
+  name: "TestWebsite",
+  title: "测试网站",
+  baseLang: mockLangs[0],
+  langs: mockLangs
+};
 class MockEntify {
   queryEntityList(options, staticKey) {
     if ((options == null ? void 0 : options.entityName) === ProductCategoryEntityName) {
@@ -2181,6 +2201,9 @@ class MockEntify {
     }
     return Promise.resolve({ items: [] });
   }
+  getWebsite() {
+    return Promise.resolve(mockWebsite);
+  }
   getTheme() {
     return Promise.resolve(mockTheme);
   }
@@ -2466,9 +2489,7 @@ function useImportVariables() {
       websiteId: (website == null ? void 0 : website.id) || "",
       entifyServerUrl: endpoint || "",
       entifyGuestToken: token || "",
-      language: (lang == null ? void 0 : lang.abbr) || "",
-      formSalt: "yizhanfei"
-      //实际无效
+      language: (lang == null ? void 0 : lang.abbr) || ""
     };
     return {
       rx: new MockEntify(),
@@ -2479,7 +2500,8 @@ function useImportVariables() {
       PublishableStatus,
       getEnvVariables: () => envs,
       dayjs,
-      rxPage: mockRxPage
+      rxPage: mockRxPage,
+      FORM_SALT: "form_salt"
     };
   }, [endpoint, lang == null ? void 0 : lang.abbr, token, website == null ? void 0 : website.id]);
   return variables;
@@ -3091,8 +3113,6 @@ const createEnv = (theme) => {
   #nodejs服务地址
   #PUBLIC_WEBSITE_ID = 4299262263296
   PUBLIC_ENTIFY_GUEST_TOKEN = "17bD#4!fG8^2wS*0z"
-  #表单加密盐
-  PUBLIC_FORM_SALT = "yizhanfeinb"
   `;
 };
 const gitignoreCode = `# build output
@@ -3132,11 +3152,12 @@ const faviconCode = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox
 </defs>
 </svg>`;
 const createBaseCssCode = (theme) => {
+  var _a;
   return `@tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-${theme.css || ""}
+${((_a = theme.styleConfig) == null ? void 0 : _a.css) || ""}
 
 `;
 };
@@ -3178,14 +3199,13 @@ const libCode = `import {
       entifyServerUrl: ({}).PUBLIC_ENTIFY_SERVER_URL,
       entifyGuestToken: ({}).PUBLIC_ENTIFY_GUEST_TOKEN,
       language: ({}).PUBLIC_LANGUAGE,
-      formSalt: ({}).PUBLIC_FORM_SALT || "yizhanfei",
     };
   }
   
   export const rx = Entify.getInstance(getEnvVariables()) as IEntify;
   `;
 const layoutCode = `---
-import "../base.css";
+import "../style.css";
 import { ClientRouter } from "astro:transitions";
 ---
 
@@ -3306,7 +3326,7 @@ const askForQuoteCode = `import type { APIRoute } from "astro";
       // 验证加密字段
       const isValid = verifyEncryption(
         //加密盐
-        envVariables.formSalt,
+        "yizhanfeinb",
         encryptedField,
         phone || "",
         30 // 30分钟有效期
@@ -3478,34 +3498,6 @@ const askForQuoteCode = `import type { APIRoute } from "astro";
     }
   };
   `;
-const settingsCode = `{
-  "css.validate": true,
-  "less.validate": true,
-  "scss.validate": true,
-  "stylelint.validate": ["css", "scss"],
-  "editor.quickSuggestions": {
-    "strings": true
-  },
-  "css.lint.unknownAtRules": "ignore"
-}
-`;
-const extensionsCode = `{
-  "recommendations": ["astro-build.astro-vscode"],
-  "unwantedRecommendations": []
-}
-`;
-const launchCode = `{
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "command": "./node_modules/.bin/astro dev",
-      "name": "Development server",
-      "request": "launch",
-      "type": "node-terminal"
-    }
-  ]
-}
-`;
 const createBaseFiles = (theme) => {
   return {
     "package.json": {
@@ -3538,25 +3530,6 @@ const createBaseFiles = (theme) => {
         contents: tailwindConfigCode
       }
     },
-    ".vscode": {
-      directory: {
-        "settings.json": {
-          file: {
-            contents: settingsCode
-          }
-        },
-        "extensions.json": {
-          file: {
-            contents: extensionsCode
-          }
-        },
-        "launch.json": {
-          file: {
-            contents: launchCode
-          }
-        }
-      }
-    },
     src: {
       directory: {
         layouts: {
@@ -3593,7 +3566,7 @@ const createBaseFiles = (theme) => {
             }
           }
         },
-        "base.css": {
+        "style.css": {
           file: {
             contents: createBaseCssCode(theme)
           }
@@ -3775,20 +3748,57 @@ function useGetFiles() {
   );
   return getFiles;
 }
-function useSave(onSaved) {
-  const save = useCallback(
-    (name, content) => {
-      saveFile(name, content).then(
-        (savedName) => {
-          if (savedName) {
-            onSaved && onSaved();
+function useExportWebsite() {
+  const [isExporting, setIsExporting] = useState(false);
+  const setError = useSetRecoilState(globalErrorState);
+  const theme = useStudioTheme();
+  const save = useSave();
+  const getFiles = useGetFiles();
+  const addFilesToZip = useCallback(
+    (zip, files, currentPath = "") => {
+      for (const [name, content] of Object.entries(files)) {
+        const path = currentPath ? `${currentPath}/${name}` : name;
+        if (content.file && content.file.contents) {
+          zip.file(path, content.file.contents);
+        } else if (content.directory) {
+          const folder = zip.folder(path);
+          if (folder) {
+            addFilesToZip(folder, content.directory, "");
+          }
+        } else if (typeof content === "object" && content !== null) {
+          if (name === "src" || name === "public" || name === "components" || name === "pages") {
+            const folder = zip.folder(path);
+            if (folder) {
+              addFilesToZip(folder, content, "");
+            }
+          } else {
+            addFilesToZip(zip, content, path);
           }
         }
-      );
+      }
     },
-    [onSaved]
+    []
   );
-  return save;
+  const exportWebsite = useCallback(async () => {
+    try {
+      if (theme == null ? void 0 : theme.id) {
+        setIsExporting(true);
+        const files = await getFiles(theme);
+        const zip = new JSZip();
+        console.log("开始导出文件...");
+        addFilesToZip(zip, files);
+        const content = await zip.generateAsync({ type: "blob" });
+        const fileName = `website-${theme.name || theme.id}-${(/* @__PURE__ */ new Date()).toISOString().slice(0, 10)}`;
+        save(fileName, content);
+      }
+    } catch (e) {
+      console.error(e);
+      setError(e == null ? void 0 : e.message);
+    } finally {
+      setIsExporting(false);
+    }
+  }, [getFiles, save, setError, theme, addFilesToZip]);
+  return { exportWebsite, isExporting };
 }
 var ContentType = /* @__PURE__ */ ((ContentType2) => {
   ContentType2["Page"] = "page";
@@ -3819,78 +3829,6 @@ var ViewMode = /* @__PURE__ */ ((ViewMode2) => {
   ViewMode2["Code"] = "code";
   return ViewMode2;
 })(ViewMode || {});
-const defaultSchema = {
-  componentName: "Root"
-};
-const emptyValue = { schema: void 0, config: void 0 };
-function useSchema(selectedContent) {
-  const [schema, setSchema] = useState(emptyValue);
-  const components = useFrontComponents();
-  const pages = usePages();
-  const componentsRef = useRef(components);
-  const pagesRef = useRef(pages);
-  componentsRef.current = components;
-  pagesRef.current = pages;
-  const templates = useTemplates();
-  const templatesRef = useRef(templates);
-  templatesRef.current = templates;
-  useEffect(() => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
-    let code;
-    let hasContent = false;
-    let defaultConfig;
-    if ((selectedContent == null ? void 0 : selectedContent.type) === ContentType.Component) {
-      const component = (_a = componentsRef.current) == null ? void 0 : _a.find(
-        (component2) => component2.id === selectedContent.id
-      );
-      if (component) {
-        code = component.code;
-        hasContent = true;
-      }
-    } else if ((selectedContent == null ? void 0 : selectedContent.type) === ContentType.PredefinedPage || (selectedContent == null ? void 0 : selectedContent.type) === ContentType.Page) {
-      const page = (_b = pagesRef.current) == null ? void 0 : _b.find(
-        (item) => item.id === selectedContent.id
-      );
-      defaultConfig = {
-        pageMeta: {
-          seoTitle: (_c = page == null ? void 0 : page.meta) == null ? void 0 : _c.seoTitle,
-          seoDescription: (_d = page == null ? void 0 : page.meta) == null ? void 0 : _d.seoDescription,
-          seoKeywords: (_e = page == null ? void 0 : page.meta) == null ? void 0 : _e.seoKeywords,
-          ogTitle: (_f = page == null ? void 0 : page.meta) == null ? void 0 : _f.ogTitle,
-          ogDescription: (_g = page == null ? void 0 : page.meta) == null ? void 0 : _g.ogDescription,
-          ogType: (_h = page == null ? void 0 : page.meta) == null ? void 0 : _h.ogType,
-          ogImage: (_i = page == null ? void 0 : page.meta) == null ? void 0 : _i.ogImage
-        }
-      };
-      if (page) {
-        code = page.code;
-        hasContent = true;
-      }
-    } else if ((selectedContent == null ? void 0 : selectedContent.type) === ContentType.Template) {
-      const template = (_j = templatesRef.current) == null ? void 0 : _j.find(
-        (template2) => template2.id === selectedContent.id
-      );
-      if (template) {
-        code = template.code;
-        hasContent = true;
-      }
-    }
-    if (code) {
-      transformCodeToSchema(code).then((value) => {
-        setSchema({
-          schema: { ...defaultSchema, children: (value == null ? void 0 : value.template) || [] },
-          config: { ...defaultConfig, ...value.resources }
-        });
-      });
-    } else if (hasContent) {
-      setSchema({
-        schema: { ...defaultSchema, children: [] }
-      });
-    }
-  }, [selectedContent == null ? void 0 : selectedContent.id, selectedContent == null ? void 0 : selectedContent.type]);
-  console.log("===>schema", schema);
-  return schema;
-}
 const defaultDesktopWidth = 1280;
 const defaultTabletWidth = 800;
 const defaultMobileWidth = 480;
@@ -3966,74 +3904,6 @@ const bgColorState = atom({
   key: "studio.bgColor",
   default: "#ffffff"
 });
-function useCloseDrawer() {
-  const setDrawerType = useSetRecoilState(drawerTypeState);
-  const drawerDocked = useRecoilValue(drawerDockedState);
-  const close = useCallback(() => {
-    if (!drawerDocked) {
-      setDrawerType(void 0);
-    }
-  }, [drawerDocked, setDrawerType]);
-  return close;
-}
-function useIsBaseLangTheme() {
-  var _a, _b;
-  const theme = useStudioTheme();
-  const website = useWebsite();
-  return ((_a = theme == null ? void 0 : theme.lang) == null ? void 0 : _a.id) === ((_b = website == null ? void 0 : website.baseLang) == null ? void 0 : _b.id);
-}
-function useExportWebsite() {
-  const [isExporting, setIsExporting] = useState(false);
-  const setError = useSetRecoilState(globalErrorState);
-  const theme = useStudioTheme();
-  const save = useSave();
-  const getFiles = useGetFiles();
-  const addFilesToZip = useCallback(
-    (zip, files, currentPath = "") => {
-      for (const [name, content] of Object.entries(files)) {
-        const path = currentPath ? `${currentPath}/${name}` : name;
-        if (content.file && content.file.contents) {
-          zip.file(path, content.file.contents);
-        } else if (content.directory) {
-          const folder = zip.folder(path);
-          if (folder) {
-            addFilesToZip(folder, content.directory, "");
-          }
-        } else if (typeof content === "object" && content !== null) {
-          if (name === "src" || name === "public" || name === "components" || name === "pages") {
-            const folder = zip.folder(path);
-            if (folder) {
-              addFilesToZip(folder, content, "");
-            }
-          } else {
-            addFilesToZip(zip, content, path);
-          }
-        }
-      }
-    },
-    []
-  );
-  const exportWebsite = useCallback(async () => {
-    try {
-      if (theme == null ? void 0 : theme.id) {
-        setIsExporting(true);
-        const files = await getFiles(theme);
-        const zip = new JSZip();
-        console.log("开始导出文件...");
-        addFilesToZip(zip, files);
-        const content = await zip.generateAsync({ type: "blob" });
-        const fileName = `website-${theme.name || theme.id}-${(/* @__PURE__ */ new Date()).toISOString().slice(0, 10)}`;
-        save(fileName, content);
-      }
-    } catch (e) {
-      console.error(e);
-      setError(e == null ? void 0 : e.message);
-    } finally {
-      setIsExporting(false);
-    }
-  }, [getFiles, save, setError, theme, addFilesToZip]);
-  return { exportWebsite, isExporting };
-}
 var ThemeConfigType = /* @__PURE__ */ ((ThemeConfigType2) => {
   ThemeConfigType2["MultiLang"] = "multi-Lang";
   ThemeConfigType2["Tailwind"] = "tailwind";
@@ -4043,1045 +3913,1349 @@ var ThemeConfigType = /* @__PURE__ */ ((ThemeConfigType2) => {
   ThemeConfigType2["WebsiteInfo"] = "websiteInfo";
   ThemeConfigType2["EmailTemplates"] = "emailTemplates";
   ThemeConfigType2["Fonts"] = "fonts";
+  ThemeConfigType2["Favicon"] = "favicon";
   return ThemeConfigType2;
 })(ThemeConfigType || {});
-const inputClassNames$1 = {
-  label: "w-16 flex items-center ps-0 pe-0 shrink-0 justify-end pr-2 text-default-500",
-  base: "flex items-center px-0",
-  wrapper: "flex-1",
-  mainWrapper: "flex-1 pr-4"
-};
-function ExtendsTable(props) {
-  const { fields: fields2, onChange } = props;
-  const handleAddField = useCallback(() => {
-    onChange == null ? void 0 : onChange([...fields2 || [], {
-      name: "newField",
-      title: "新建字段",
-      type: ExtendFieldType.String,
-      component: ComponentType.Input
-    }]);
-  }, [fields2, onChange]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Accordion,
-      {
-        isCompact: true,
-        children: (fields2 == null ? void 0 : fields2.map((field, index) => {
-          return /* @__PURE__ */ jsxRuntimeExports.jsx(
-            AccordionItem,
-            {
-              classNames: {
-                title: "text-sm"
-              },
-              title: `#${index + 1} ${field.title || field.name}`,
-              children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2 px-3", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  Input$1,
-                  {
-                    variant: "flat",
-                    value: field.name,
-                    size: "sm",
-                    label: "名称",
-                    labelPlacement: "outside-left",
-                    classNames: inputClassNames$1,
-                    onChange: (e) => {
-                      const newName = e.target.value;
-                      onChange == null ? void 0 : onChange(fields2.map((field2, i2) => {
-                        if (i2 === index) {
-                          return {
-                            ...field2,
-                            name: newName
-                          };
-                        }
-                        return field2;
-                      }));
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  Input$1,
-                  {
-                    label: "标题",
-                    size: "sm",
-                    variant: "flat",
-                    value: field.title,
-                    labelPlacement: "outside-left",
-                    classNames: inputClassNames$1,
-                    onChange: (e) => {
-                      const newTitle = e.target.value;
-                      onChange == null ? void 0 : onChange(fields2.map((field2, i2) => {
-                        if (i2 === index) {
-                          return {
-                            ...field2,
-                            title: newTitle
-                          };
-                        }
-                        return field2;
-                      }));
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                  Select,
-                  {
-                    label: "类型",
-                    size: "sm",
-                    variant: "flat",
-                    selectedKeys: field.type ? [field.type] : [],
-                    labelPlacement: "outside-left",
-                    classNames: inputClassNames$1,
-                    onChange: (e) => {
-                      onChange == null ? void 0 : onChange(fields2.map((field2, i2) => {
-                        if (i2 === index) {
-                          return {
-                            ...field2,
-                            type: e.target.value || void 0
-                          };
-                        }
-                        return field2;
-                      }));
-                    },
-                    children: [
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { children: "文本" }, ExtendFieldType.String),
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { children: "数字" }, ExtendFieldType.Number),
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { children: "布尔" }, ExtendFieldType.Boolean),
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { children: "JSON" }, ExtendFieldType.Json),
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { children: "日期" }, ExtendFieldType.Date)
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                  Select,
-                  {
-                    label: "编辑组件",
-                    size: "sm",
-                    variant: "flat",
-                    selectedKeys: field.component ? [field.component] : [],
-                    labelPlacement: "outside-left",
-                    classNames: inputClassNames$1,
-                    onChange: (e) => {
-                      onChange == null ? void 0 : onChange(fields2.map((field2, i2) => {
-                        if (i2 === index) {
-                          return {
-                            ...field2,
-                            component: e.target.value || void 0
-                          };
-                        }
-                        return field2;
-                      }));
-                    },
-                    endContent: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      Button$1,
-                      {
-                        as: "div",
-                        size: "sm",
-                        variant: "light",
-                        isIconOnly: true,
-                        className: "flex items-center justify-center",
-                        children: /* @__PURE__ */ jsxRuntimeExports.jsx(SettingsIcon, { className: "size-4" })
-                      }
-                    ),
-                    children: [
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { children: "单行输入框" }, ComponentType.Input),
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { children: "数字入框" }, ComponentType.NumberInput),
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { children: "多行输入框" }, ComponentType.Textarea),
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { children: "开关" }, ComponentType.Switch),
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { children: "图片选择" }, ComponentType.ImageSelect),
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { children: "链接目标" }, ComponentType.LinkTarget)
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  Button$1,
-                  {
-                    size: "sm",
-                    variant: "light",
-                    color: "danger",
-                    onPress: () => {
-                      onChange == null ? void 0 : onChange(fields2.filter((_2, i2) => i2 !== index));
-                    },
-                    children: "删除字段"
-                  }
-                )
-              ] })
-            },
-            index
-          );
-        })) || []
+function LangCard(props) {
+  var _a;
+  const { isSelected, isBaseLang, lang, onSelect } = props;
+  const website = useWebsite();
+  const [removing, setRemoving] = useState(false);
+  const [upsertWebsite, { isMutating }] = useUpsertOneWebsite();
+  const [currentLang, setCurrentLang] = useRecoilState(currentLangState);
+  const setSelectedContent = useSetRecoilState(selectedContentState);
+  const queryTheme = useLazyQueryOneEntity();
+  const [removeTheme] = useDeleteThemeById();
+  const handleDelete = useCallback(async () => {
+    var _a2, _b, _c;
+    try {
+      setRemoving(true);
+      if (((_a2 = website == null ? void 0 : website.baseLang) == null ? void 0 : _a2.id) === lang.id) {
+        return;
       }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Button$1,
-      {
-        variant: "flat",
-        size: "sm",
-        className: "mt-2",
-        startContent: /* @__PURE__ */ jsxRuntimeExports.jsx(AddIcon, { className: "size-5" }),
-        onPress: handleAddField,
-        children: "添加"
+      await upsertWebsite(
+        websiteToInput({
+          id: website == null ? void 0 : website.id,
+          langs: (_b = website == null ? void 0 : website.langs) == null ? void 0 : _b.filter((l2) => l2.id !== lang.id)
+        })
+      );
+      if (currentLang === lang.id) {
+        setCurrentLang((_c = website == null ? void 0 : website.baseLang) == null ? void 0 : _c.id);
+        setSelectedContent(void 0);
       }
-    )
-  ] });
-}
-function PostPanel(props) {
-  const { settings, onChange } = props;
+      const langTheme = await queryTheme(
+        new ThemeQueryOptions([ThemeFields.id], {
+          where: {
+            website: {
+              id: {
+                _eq: website == null ? void 0 : website.id
+              }
+            },
+            lang: {
+              id: {
+                _eq: lang.id
+              }
+            }
+          }
+        }).toGqlOptions()
+      );
+      if (langTheme.id) {
+        removeTheme(langTheme.id);
+      }
+    } finally {
+      setRemoving(false);
+    }
+  }, [
+    currentLang,
+    lang.id,
+    queryTheme,
+    removeTheme,
+    setCurrentLang,
+    setSelectedContent,
+    upsertWebsite,
+    (_a = website == null ? void 0 : website.baseLang) == null ? void 0 : _a.id,
+    website == null ? void 0 : website.id,
+    website == null ? void 0 : website.langs
+  ]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "div",
+    Card,
     {
-      className: "flex flex-col gap-4 overflow-x-hidden py-2",
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        ExtendsTable,
-        {
-          fields: settings == null ? void 0 : settings.fields,
-          onChange: (fields2) => {
-            onChange == null ? void 0 : onChange({
-              ...settings,
-              fields: fields2
-            });
-          }
-        }
-      ) })
+      shadow: "sm",
+      className: "bg-background cursor-pointer transition-colors group relative",
+      classNames: {
+        base: isSelected ? "outline-2 outline-primary" : "hover:bg-default-100"
+      },
+      isPressable: !removing,
+      as: "div",
+      isDisabled: removing,
+      onPress: () => onSelect(lang.id),
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardBody, { className: "p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
+          lang.icon && /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: lang.icon, className: "text-2xl shrink-0" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "font-medium truncate", children: lang.cnName }),
+              isBaseLang && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "shrink-0 inline-flex items-center px-1.5 py-0.5 rounded-full bg-success/10 border border-primary/20", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[10px] text-primary font-medium leading-none", children: "基准语言" }) })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-default-500 truncate", children: lang.abbr })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
+          isSelected && /* @__PURE__ */ jsxRuntimeExports.jsx(CheckCircleIcon, { className: "text-primary size-5 shrink-0" }),
+          !isBaseLang && !isMutating && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Button$1,
+            {
+              isIconOnly: true,
+              size: "sm",
+              variant: "light",
+              className: "absolute top-1 right-1 w-6 h-6 min-w-6 min-h-6 rounded-full text-default-400 hover:text-default-500 group-hover:opacity-100 opacity-0 transition-opacity duration-300",
+              onPress: handleDelete,
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(CloseIcon, { className: "size-4" })
+            }
+          ),
+          isMutating && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            CircularProgress,
+            {
+              "aria-label": "Loading...",
+              size: "sm",
+              className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+            }
+          )
+        ] })
+      ] }) })
     }
   );
 }
-function ProductPanel(props) {
-  const { settings, onChange } = props;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "div",
-    {
-      className: "flex flex-col gap-4 overflow-x-hidden py-2",
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        ExtendsTable,
-        {
-          fields: settings == null ? void 0 : settings.fields,
-          onChange: (fields2) => {
-            onChange == null ? void 0 : onChange({
-              ...settings,
-              fields: fields2
-            });
-          }
-        }
-      ) })
-    }
+const TRANSLATE_THEME_KEY = "translate-theme";
+function useTranslateThemeTask() {
+  const theme = useStudioTheme();
+  const lang = useCurrentLang();
+  const baseThemeId = useBaseLangThemeId();
+  const appKey = (theme == null ? void 0 : theme.id) || "";
+  const taskState = useInprogressTaskByKey(TRANSLATE_THEME_KEY, appKey);
+  const setTask = useUpdateTask(appKey);
+  const entifyClient = useCreateEntityClient();
+  const task = taskState && taskState.status !== "done" ? taskPool[taskState.taskId] : void 0;
+  const aiUrl = useAiUrl();
+  const handleTaskChange = useCallback(
+    (data) => {
+      setTask(data);
+    },
+    [setTask]
   );
-}
-function ExtendsPanel() {
-  const [themeSettings, setThemeSettings] = useState();
-  const initialSettings = useThemeSettings();
-  const webTheme = useStudioTheme();
-  const [save, { isMutating }] = useUpsertOneTheme();
-  const changed = useMemo(() => {
-    return JSON.stringify(themeSettings || {}) !== JSON.stringify(initialSettings || {});
-  }, [themeSettings, initialSettings]);
-  const handleReset = useCallback(() => {
-    setThemeSettings(initialSettings);
-  }, [initialSettings]);
-  const handleSave = useCallback(() => {
-    save({
-      id: webTheme == null ? void 0 : webTheme.id,
-      settings: themeSettings || void 0
+  const translateAndReset = useCallback(() => {
+    if (!(theme == null ? void 0 : theme.id)) {
+      console.error("没设置Theme");
+      return;
+    }
+    if (!entifyClient) {
+      console.error("entifyClient 创建失败");
+      return;
+    }
+    if (!aiUrl) {
+      console.error("没设置aiUrl");
+      return;
+    }
+    if (!baseThemeId) {
+      console.error("没设置baseThemeId");
+      return;
+    }
+    const task2 = new TranslateThemeTask({
+      key: TRANSLATE_THEME_KEY,
+      entifyClient,
+      baseThemeId,
+      themeId: theme == null ? void 0 : theme.id,
+      lang,
+      aiUrl
     });
-  }, [save, themeSettings, webTheme == null ? void 0 : webTheme.id]);
-  useEffect(() => {
-    setThemeSettings(initialSettings);
-  }, [initialSettings]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(ModalBody, { className: "flex-1 min-h-0 overflow-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      Tabs,
+    taskPool[task2.id] = task2;
+    task2.onDataChange(handleTaskChange);
+    task2.start();
+  }, [aiUrl, baseThemeId, entifyClient, handleTaskChange, lang, theme == null ? void 0 : theme.id]);
+  return { taskState, translateAndReset, task };
+}
+const linkTypes = [
+  {
+    key: "path",
+    label: "子网址",
+    description: "例如：example.com/en",
+    icon: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "svg",
       {
-        "aria-label": "extends",
-        className: "mt-2",
-        size: "sm",
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Tab, { title: "产品", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            ProductPanel,
+        xmlns: "http://www.w3.org/2000/svg",
+        className: "size-5 text-default-500",
+        viewBox: "0 0 24 24",
+        children: /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { fill: "none", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "path",
             {
-              settings: themeSettings == null ? void 0 : themeSettings.product,
-              onChange: (settings) => {
-                setThemeSettings({
-                  ...themeSettings,
-                  product: settings
-                });
-              }
+              stroke: "currentColor",
+              strokeWidth: 1.5,
+              d: "M2 12c0-4.714 0-7.071 1.464-8.536C4.93 2 7.286 2 12 2s7.071 0 8.535 1.464C22 4.93 22 7.286 22 12s0 7.071-1.465 8.535C19.072 22 16.714 22 12 22s-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12Z"
             }
-          ) }, "product"),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Tab, { title: "文章", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            PostPanel,
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "path",
             {
-              settings: themeSettings == null ? void 0 : themeSettings.post,
-              onChange: (settings) => {
-                setThemeSettings({
-                  ...themeSettings,
-                  post: settings
-                });
-              }
+              fill: "currentColor",
+              d: "M11.25 18a.75.75 0 0 0 1.5 0zM18 8l.53.53a.75.75 0 0 0 0-1.06zm-.97-2.03a.75.75 0 1 0-1.06 1.06zm-1.06 3a.75.75 0 1 0 1.06 1.06zM12.75 18v-6h-1.5v6zM16 8.75h2v-1.5h-2zm2.53-1.28l-1.5-1.5l-1.06 1.06l1.5 1.5zm-1.06 0l-1.5 1.5l1.06 1.06l1.5-1.5zM12.75 12A3.25 3.25 0 0 1 16 8.75v-1.5A4.75 4.75 0 0 0 11.25 12z"
             }
-          ) }, "post")
-        ]
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "path",
+            {
+              fill: "currentColor",
+              d: "M11.25 18a.75.75 0 0 0 1.5 0zM6 8l-.53-.53a.75.75 0 0 0 0 1.06zm2.03-.97a.75.75 0 0 0-1.06-1.06zm-1.06 3a.75.75 0 1 0 1.06-1.06zM12.75 18v-6h-1.5v6zM8 7.25H6v1.5h2zM6.53 8.53l1.5-1.5l-1.06-1.06l-1.5 1.5zm-1.06 0l1.5 1.5l1.06-1.06l-1.5-1.5zM12.75 12A4.75 4.75 0 0 0 8 7.25v1.5A3.25 3.25 0 0 1 11.25 12z"
+            }
+          )
+        ] })
       }
-    ) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(ModalFooter, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Button$1,
-        {
-          size: "sm",
-          isDisabled: !changed,
-          onPress: handleReset,
-          children: "重置"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Button$1,
-        {
-          size: "sm",
-          isDisabled: !changed,
-          isLoading: isMutating,
-          color: "primary",
-          onPress: handleSave,
-          children: "保存"
-        }
-      )
-    ] })
-  ] });
-}
-function newThemeConfigOptions(theme) {
-  return new ThemeConfigQueryOptions(
-    [
-      ThemeConfigFields.id,
-      ThemeConfigFields.emailTemplates,
-      ThemeConfigFields.address,
-      ThemeConfigFields.contact,
-      ThemeConfigFields.email,
-      ThemeConfigFields.tel,
-      ThemeConfigFields.fax,
-      ThemeConfigFields.mobile,
-      ThemeConfigFields.wechat,
-      ThemeConfigFields.websiteTitle
-    ],
-    {
-      where: {
-        [ThemeConfigAssciations.theme]: {
-          id: {
-            _eq: theme == null ? void 0 : theme.id
+    )
+  },
+  {
+    key: "subdomain",
+    label: "二级域名",
+    description: "例如：en.example.com",
+    icon: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        className: "size-5 text-default-500",
+        viewBox: "0 0 24 24",
+        children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "g",
+          {
+            fill: "none",
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeWidth: 1.5,
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M14 12a6 6 0 1 1-6-6" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M10 12a6 6 0 1 1 6 6" })
+            ]
           }
-        }
+        )
       }
-    }
-  ).contactAvatar(new MediaQueryOptions().file(["thumbnail", "url"])).setNoQuery(!(theme == null ? void 0 : theme.id));
-}
-function WebsiteInfoPanel(props) {
-  const { onSuccess } = props;
-  const theme = useStudioTheme();
+    )
+  }
+];
+function MultiLangPanel() {
+  var _a, _b, _c, _d, _e, _f;
+  const [linkType, setLinkType] = useState("subdomain");
+  const [confirmOpen, setConfirmOpen] = useState(false);
+  const [currentLang, setCurrentLang] = useRecoilState(currentLangState);
+  const [selectedContent, setSelectedContent] = useRecoilState(selectedContentState);
   const website = useWebsite();
-  const websiteId = website == null ? void 0 : website.id;
-  const { data: themeConfig2 } = useOneThemeConfig(newThemeConfigOptions(theme));
-  const [save, { isMutating }] = useUpsertOneThemeConfig({
-    onSuccess
-  });
-  const handleSave = useCallback(
-    (value) => {
-      if (!value)
-        return;
-      save(themeConfigToInputCascade(value));
-    },
-    [save]
+  const isChanginBaseLangRef = useRef(false);
+  const [upsertTheme, { isMutating: isCreating }] = useUpsertOneTheme();
+  const { taskState, task, translateAndReset } = useTranslateThemeTask();
+  useEffect(() => {
+    var _a2;
+    if (website && !currentLang) {
+      setCurrentLang((_a2 = website.baseLang) == null ? void 0 : _a2.id);
+    }
+  }, [currentLang, setCurrentLang, website]);
+  const { data: allLangs, isLoading: allLangsLoading } = useLangList(
+    new LangQueryOptions([
+      LangFields.id,
+      LangFields.abbr,
+      LangFields.enName,
+      LangFields.cnName,
+      LangFields.localName,
+      LangFields.description,
+      LangFields.circleIcon,
+      LangFields.icon
+    ])
   );
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(ModalBody, { className: "flex-1 min-h-0 overflow-auto p-4 px-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    EntityForm,
-    {
-      entityName: ThemeConfigEntityName,
-      initialValue: themeConfig2 || {
-        [ThemeConfigAssciations.theme]: {
-          id: theme == null ? void 0 : theme.id
-        }
-      },
-      globalValidationErrorMessage: "部分输入项有错误，请检查",
-      isMutating,
-      onSubmit: handleSave,
-      children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-4", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-4", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              InputField,
+  const [upsertWebsite, { isMutating }] = useUpsertOneWebsite();
+  useEffect(() => {
+    if (!isMutating) {
+      isChanginBaseLangRef.current = false;
+    }
+  }, [isMutating]);
+  const handleBaseLangChange = useCallback(
+    (selection) => {
+      isChanginBaseLangRef.current = true;
+      upsertWebsite(
+        websiteToInput({
+          id: website == null ? void 0 : website.id,
+          [WebsiteAssciations.baseLang]: { id: selection.currentKey }
+        })
+      );
+    },
+    [upsertWebsite, website == null ? void 0 : website.id]
+  );
+  const handleLangSelect = useCallback(
+    (langId) => {
+      setCurrentLang(langId);
+      if ((selectedContent == null ? void 0 : selectedContent.id) && langId !== currentLang) {
+        setSelectedContent(void 0);
+      }
+    },
+    [selectedContent == null ? void 0 : selectedContent.id, setCurrentLang, setSelectedContent, currentLang]
+  );
+  const leftLangs = useMemo(() => {
+    var _a2;
+    return (_a2 = allLangs == null ? void 0 : allLangs.items) == null ? void 0 : _a2.filter(
+      (lang) => {
+        var _a3;
+        return !((_a3 = website == null ? void 0 : website.langs) == null ? void 0 : _a3.some((l2) => l2.id === lang.id));
+      }
+    );
+  }, [allLangs, website]);
+  const handleAddLanguage = useCallback(
+    async (langId) => {
+      var _a2;
+      await upsertWebsite(
+        websiteToInput({
+          id: website == null ? void 0 : website.id,
+          [WebsiteAssciations.langs]: [
+            ...((_a2 = website == null ? void 0 : website.langs) == null ? void 0 : _a2.map((lang) => ({
+              id: lang.id
+            }))) || [],
+            { id: langId }
+          ]
+        })
+      );
+      if ((website == null ? void 0 : website.id) && langId) {
+        console.log("create theme");
+        await upsertTheme({
+          name: (website.name || "") + (langId || "") + "主题",
+          lang: {
+            sync: { id: langId }
+          },
+          website: {
+            sync: { id: website.id }
+          }
+        });
+      }
+    },
+    [upsertTheme, upsertWebsite, website == null ? void 0 : website.id, website == null ? void 0 : website.langs, website == null ? void 0 : website.name]
+  );
+  const handleTranslate = useCallback(() => {
+    setConfirmOpen(true);
+  }, []);
+  const handleStop = useCallback(() => {
+    task == null ? void 0 : task.stop();
+  }, [task]);
+  const handleCloseConfirm = useCallback(() => {
+    setConfirmOpen(false);
+  }, []);
+  const handleConfirm = useCallback(() => {
+    translateAndReset();
+  }, [translateAndReset]);
+  const isRunning = (taskState == null ? void 0 : taskState.status) === "in-progress";
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(ModalBody, { className: "flex-1 p-4 min-h-0 overflow-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { className: "bg-default-50", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "flex gap-3 px-6 pt-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col flex-grow", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-lg font-semibold", children: "基准语言" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-small text-default-500", children: "从已启用的语言中选择网站的基准语言，作为翻译的原稿，默认为英文" })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(CardBody, { className: "px-6 pb-6", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Select,
+          {
+            label: "基准语言",
+            labelPlacement: "outside",
+            placeholder: "请选择网站基准的语言",
+            className: "max-w-sm",
+            selectedKeys: [((_a = website == null ? void 0 : website.baseLang) == null ? void 0 : _a.id) || ""],
+            isDisabled: (isMutating || isCreating) && isChanginBaseLangRef.current,
+            isLoading: (isMutating || isCreating) && isChanginBaseLangRef.current,
+            renderValue: (langValues) => {
+              return (langValues == null ? void 0 : langValues.map((langValue) => {
+                var _a2, _b2;
+                return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                  "div",
+                  {
+                    className: "flex items-center gap-2",
+                    children: [
+                      (_a2 = langValue == null ? void 0 : langValue.props) == null ? void 0 : _a2.startContent,
+                      (_b2 = langValue == null ? void 0 : langValue.props) == null ? void 0 : _b2.children
+                    ]
+                  },
+                  langValue == null ? void 0 : langValue.key
+                );
+              })) || [];
+            },
+            onSelectionChange: handleBaseLangChange,
+            children: ((_b = website == null ? void 0 : website.langs) == null ? void 0 : _b.map((lang) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+              SelectItem,
               {
-                name: ThemeConfigFields.websiteTitle,
-                label: "网站标题",
-                labelPlacement: "outside",
-                placeholder: "请输入网站标题"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2 mt-2", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-default-600", children: "联系人头像" }),
+                startContent: lang.icon ? /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: lang.icon, className: "text-xl" }) : null,
+                textValue: lang.abbr,
+                children: lang.cnName || lang.enName
+              },
+              lang.id
+            ))) || []
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { className: "bg-default-50", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "flex gap-3 px-6 pt-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col flex-grow", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-lg font-semibold", children: "已启用的语言" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-small text-default-500", children: "管理网站支持的语言" })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(CardBody, { className: "px-6 pb-6", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid gap-4 md:grid-cols-2 ", children: [
+            (_c = website == null ? void 0 : website.langs) == null ? void 0 : _c.map((lang) => {
+              var _a2;
+              return /* @__PURE__ */ jsxRuntimeExports.jsx(
+                LangCard,
+                {
+                  lang,
+                  isSelected: currentLang === lang.id,
+                  isBaseLang: ((_a2 = website == null ? void 0 : website.baseLang) == null ? void 0 : _a2.id) === lang.id,
+                  onSelect: handleLangSelect
+                },
+                lang.id
+              );
+            }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(Dropdown, { placement: "bottom-end", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownTrigger, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Button$1,
+                {
+                  variant: "flat",
+                  className: "h-[88px] bg-default-100 hover:bg-default-200 w-full",
+                  startContent: /* @__PURE__ */ jsxRuntimeExports.jsx(AddIcon, { className: "size-6 shrink-0" }),
+                  isLoading: allLangsLoading || isMutating && !isChanginBaseLangRef.current,
+                  children: "添加语言"
+                }
+              ) }),
               /* @__PURE__ */ jsxRuntimeExports.jsx(
-                MediaSingleSelectField,
+                DropdownMenu,
                 {
-                  name: ThemeConfigAssciations.contactAvatar,
-                  websiteId,
-                  mediaTypes: [MediaType.image],
-                  width: 120
+                  "aria-label": "全部语言列表",
+                  items: leftLangs,
+                  className: "max-h-[300px] overflow-y-auto",
+                  disallowEmptySelection: true,
+                  selectionMode: "single",
+                  onAction: handleAddLanguage,
+                  children: (item) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    DropdownItem,
+                    {
+                      className: "gap-2",
+                      startContent: item.icon ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        Icon,
+                        {
+                          icon: item.icon,
+                          className: "text-xl shrink-0"
+                        }
+                      ) : null,
+                      textValue: item.cnName || item.enName,
+                      children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate", children: item.cnName || item.enName })
+                    },
+                    item.id
+                  )
                 }
               )
-            ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                InputField,
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-6 flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-default-500", children: taskState == null ? void 0 : taskState.infoMessage }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-end gap-2", children: [
+              isRunning && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Button$1,
                 {
-                  name: ThemeConfigFields.contact,
-                  label: "联系人",
-                  labelPlacement: "outside",
-                  placeholder: "请输入联系人姓名"
+                  variant: "flat",
+                  startContent: /* @__PURE__ */ jsxRuntimeExports.jsx(TaskStopIcon, { className: "size-5" }),
+                  onPress: handleStop,
+                  children: "停止"
                 }
               ),
               /* @__PURE__ */ jsxRuntimeExports.jsx(
-                InputField,
+                Button$1,
                 {
-                  name: ThemeConfigFields.tel,
-                  label: "电话",
-                  labelPlacement: "outside",
-                  placeholder: "请输入联系电话"
+                  color: "primary",
+                  startContent: /* @__PURE__ */ jsxRuntimeExports.jsx(AiStarIcon, { className: "size-5" }),
+                  isDisabled: currentLang === ((_d = website == null ? void 0 : website.baseLang) == null ? void 0 : _d.id),
+                  isLoading: isRunning,
+                  onPress: handleTranslate,
+                  children: "翻译 & 重置"
                 }
               )
             ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              InputField,
-              {
-                name: ThemeConfigFields.email,
-                label: "邮箱",
-                labelPlacement: "outside",
-                placeholder: "请输入联系邮箱"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              InputField,
-              {
-                name: ThemeConfigFields.mobile,
-                label: "手机",
-                labelPlacement: "outside",
-                placeholder: "请输入手机号码"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              InputField,
-              {
-                name: ThemeConfigFields.fax,
-                label: "传真",
-                labelPlacement: "outside",
-                placeholder: "请输入传真号码"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            TextareaField,
+          ] })
+        ] })
+      ] }),
+      !!((_e = website == null ? void 0 : website.langs) == null ? void 0 : _e.length) && ((_f = website == null ? void 0 : website.langs) == null ? void 0 : _f.length) > 1 && /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { className: "bg-default-50", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "flex gap-3 px-6 pt-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col flex-grow", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-lg font-semibold", children: "链接方式" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-small text-default-500", children: "选择多语言网站的访问方式" })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(CardBody, { className: "px-6 pb-6", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid gap-4 md:grid-cols-2", children: linkTypes.map((type) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Card,
             {
-              name: ThemeConfigFields.address,
-              label: "地址",
-              labelPlacement: "outside",
-              placeholder: "请输入详细地址"
-            }
-          ) })
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Divider, { className: "mt-4" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-end mt-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SubmitButton, { size: "sm", variant: "solid", color: "primary", children: "保存" }) })
-      ]
-    }
-  ) });
-}
-function EmialTemplatesPanel(props) {
-  const { onSuccess } = props;
-  const theme = useStudioTheme();
-  const { data: themeConfig2 } = useOneThemeConfig(newThemeConfigOptions(theme));
-  const [save, { isMutating }] = useUpsertOneThemeConfig({
-    onSuccess
-  });
-  const handleSave = useCallback(
-    (value) => {
-      if (!value)
-        return;
-      save(themeConfigToInput(value));
-    },
-    [save]
-  );
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(ModalBody, { className: "flex-1 min-h-0 overflow-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    EntityForm,
-    {
-      entityName: ThemeConfigEntityName,
-      initialValue: themeConfig2 || {
-        [ThemeConfigAssciations.theme]: {
-          id: theme == null ? void 0 : theme.id
-        }
-      },
-      globalValidationErrorMessage: "部分输入项有错误，请检查",
-      isMutating,
-      onSubmit: handleSave,
-      children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(ObjectField, { name: ThemeConfigFields.emailTemplates, children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(ObjectField, { name: "customerEmail", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { className: "mt-2", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs(CardHeader, { className: "flex gap-2", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { children: "客户通知邮件" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-default-500", children: "变量:$name" })
-            ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Divider, {}),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs(CardBody, { className: "gap-4", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                InputField,
-                {
-                  name: "subject",
-                  label: "标题",
-                  labelPlacement: "outside",
-                  placeholder: "请输入标题"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                TextareaField,
-                {
-                  name: "content",
-                  label: "内容",
-                  minRows: 5,
-                  labelPlacement: "outside",
-                  placeholder: "请输入内容"
-                }
-              )
-            ] })
-          ] }) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(ObjectField, { name: "employeeEmail", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { className: "mt-4", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs(CardHeader, { className: "flex gap-2", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { children: "业务员通知邮件" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-default-500", children: "变量:$content" })
-            ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Divider, {}),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs(CardBody, { className: "gap-4", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                InputField,
-                {
-                  name: "subject",
-                  label: "标题",
-                  labelPlacement: "outside",
-                  placeholder: "请输入标题"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                TextareaField,
-                {
-                  name: "content",
-                  label: "内容",
-                  minRows: 5,
-                  labelPlacement: "outside",
-                  placeholder: "请输入内容"
-                }
-              )
-            ] })
-          ] }) })
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Divider, { className: "mt-4" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-end mt-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SubmitButton, { size: "sm", variant: "solid", color: "primary", children: "保存" }) })
-      ]
-    }
-  ) });
+              shadow: "sm",
+              className: `bg-background cursor-pointer transition-colors ${linkType === type.key ? "border-2 border-primary" : "hover:bg-default-100"}`,
+              isPressable: type.key !== "path",
+              as: "div",
+              isDisabled: type.key === "path",
+              onPress: () => type.key !== "path" && setLinkType(type.key),
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardBody, { className: "p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center size-10 rounded-lg bg-default-100", children: type.icon }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "font-medium", children: type.label }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-default-500", children: type.description })
+                ] }),
+                linkType === type.key && /* @__PURE__ */ jsxRuntimeExports.jsx(CheckCircleIcon, { className: "text-primary size-5" })
+              ] }) })
+            },
+            type.key
+          )) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-default-400", children: linkType === "subdomain" ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: "使用二级域名方式需要正确配置DNS解析，将所有二级域名指向网站服务器。 同时需要配置服务器支持泛域名解析。" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: "使用子网址方式无需额外的DNS配置，但URL会相对较长。 建议在无法使用二级域名时选择此方式。" }) }) })
+        ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ConfirmDialog,
+      {
+        open: confirmOpen,
+        onClose: handleCloseConfirm,
+        onConfirm: handleConfirm,
+        confirm: "翻译会重置并覆盖当前网站内容，不可撤销，您确定要翻译吗？"
+      }
+    )
+  ] });
 }
-function LangCard(props) {
-  var _a;
-  const { isSelected, isBaseLang, lang, onSelect } = props;
-  const website = useWebsite();
-  const [removing, setRemoving] = useState(false);
-  const [upsertWebsite, { isMutating }] = useUpsertOneWebsite();
-  const [currentLang, setCurrentLang] = useRecoilState(currentLangState);
-  const setSelectedContent = useSetRecoilState(selectedContentState);
-  const queryTheme = useLazyQueryOneEntity();
-  const [removeTheme] = useDeleteThemeById();
-  const handleDelete = useCallback(async () => {
-    var _a2, _b, _c;
-    try {
-      setRemoving(true);
-      if (((_a2 = website == null ? void 0 : website.baseLang) == null ? void 0 : _a2.id) === lang.id) {
-        return;
+const inputClassNames$1 = {
+  label: "w-16 flex items-center ps-0 pe-0 shrink-0 justify-end pr-2 text-default-500",
+  base: "flex items-center px-0",
+  wrapper: "flex-1",
+  mainWrapper: "flex-1 pr-4"
+};
+function ExtendsTable(props) {
+  const { fields: fields2, onChange } = props;
+  const handleAddField = useCallback(() => {
+    onChange == null ? void 0 : onChange([...fields2 || [], {
+      name: "newField",
+      title: "新建字段",
+      type: ExtendFieldType.String,
+      component: ComponentType.Input
+    }]);
+  }, [fields2, onChange]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Accordion,
+      {
+        isCompact: true,
+        children: (fields2 == null ? void 0 : fields2.map((field, index) => {
+          return /* @__PURE__ */ jsxRuntimeExports.jsx(
+            AccordionItem,
+            {
+              classNames: {
+                title: "text-sm"
+              },
+              title: `#${index + 1} ${field.title || field.name}`,
+              children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2 px-3", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  Input$1,
+                  {
+                    variant: "flat",
+                    value: field.name,
+                    size: "sm",
+                    label: "名称",
+                    labelPlacement: "outside-left",
+                    classNames: inputClassNames$1,
+                    onChange: (e) => {
+                      const newName = e.target.value;
+                      onChange == null ? void 0 : onChange(fields2.map((field2, i2) => {
+                        if (i2 === index) {
+                          return {
+                            ...field2,
+                            name: newName
+                          };
+                        }
+                        return field2;
+                      }));
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  Input$1,
+                  {
+                    label: "标题",
+                    size: "sm",
+                    variant: "flat",
+                    value: field.title,
+                    labelPlacement: "outside-left",
+                    classNames: inputClassNames$1,
+                    onChange: (e) => {
+                      const newTitle = e.target.value;
+                      onChange == null ? void 0 : onChange(fields2.map((field2, i2) => {
+                        if (i2 === index) {
+                          return {
+                            ...field2,
+                            title: newTitle
+                          };
+                        }
+                        return field2;
+                      }));
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                  Select,
+                  {
+                    label: "类型",
+                    size: "sm",
+                    variant: "flat",
+                    selectedKeys: field.type ? [field.type] : [],
+                    labelPlacement: "outside-left",
+                    classNames: inputClassNames$1,
+                    onChange: (e) => {
+                      onChange == null ? void 0 : onChange(fields2.map((field2, i2) => {
+                        if (i2 === index) {
+                          return {
+                            ...field2,
+                            type: e.target.value || void 0
+                          };
+                        }
+                        return field2;
+                      }));
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { children: "文本" }, ExtendFieldType.String),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { children: "数字" }, ExtendFieldType.Number),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { children: "布尔" }, ExtendFieldType.Boolean),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { children: "JSON" }, ExtendFieldType.Json),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { children: "日期" }, ExtendFieldType.Date)
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                  Select,
+                  {
+                    label: "编辑组件",
+                    size: "sm",
+                    variant: "flat",
+                    selectedKeys: field.component ? [field.component] : [],
+                    labelPlacement: "outside-left",
+                    classNames: inputClassNames$1,
+                    onChange: (e) => {
+                      onChange == null ? void 0 : onChange(fields2.map((field2, i2) => {
+                        if (i2 === index) {
+                          return {
+                            ...field2,
+                            component: e.target.value || void 0
+                          };
+                        }
+                        return field2;
+                      }));
+                    },
+                    endContent: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      Button$1,
+                      {
+                        as: "div",
+                        size: "sm",
+                        variant: "light",
+                        isIconOnly: true,
+                        className: "flex items-center justify-center",
+                        children: /* @__PURE__ */ jsxRuntimeExports.jsx(SettingsIcon, { className: "size-4" })
+                      }
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { children: "单行输入框" }, ComponentType.Input),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { children: "数字入框" }, ComponentType.NumberInput),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { children: "多行输入框" }, ComponentType.Textarea),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { children: "开关" }, ComponentType.Switch),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { children: "图片选择" }, ComponentType.ImageSelect),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { children: "链接目标" }, ComponentType.LinkTarget)
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  Button$1,
+                  {
+                    size: "sm",
+                    variant: "light",
+                    color: "danger",
+                    onPress: () => {
+                      onChange == null ? void 0 : onChange(fields2.filter((_2, i2) => i2 !== index));
+                    },
+                    children: "删除字段"
+                  }
+                )
+              ] })
+            },
+            index
+          );
+        })) || []
       }
-      await upsertWebsite(
-        websiteToInput({
-          id: website == null ? void 0 : website.id,
-          langs: (_b = website == null ? void 0 : website.langs) == null ? void 0 : _b.filter((l2) => l2.id !== lang.id)
-        })
-      );
-      if (currentLang === lang.id) {
-        setCurrentLang((_c = website == null ? void 0 : website.baseLang) == null ? void 0 : _c.id);
-        setSelectedContent(void 0);
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Button$1,
+      {
+        variant: "flat",
+        size: "sm",
+        className: "mt-2",
+        startContent: /* @__PURE__ */ jsxRuntimeExports.jsx(AddIcon, { className: "size-5" }),
+        onPress: handleAddField,
+        children: "添加"
       }
-      const langTheme = await queryTheme(
-        new ThemeQueryOptions([ThemeFields.id], {
-          where: {
-            website: {
-              id: {
-                _eq: website == null ? void 0 : website.id
-              }
-            },
-            lang: {
-              id: {
-                _eq: lang.id
-              }
-            }
+    )
+  ] });
+}
+function PostPanel(props) {
+  const { settings, onChange } = props;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      className: "flex flex-col gap-4 overflow-x-hidden py-2",
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        ExtendsTable,
+        {
+          fields: settings == null ? void 0 : settings.fields,
+          onChange: (fields2) => {
+            onChange == null ? void 0 : onChange({
+              ...settings,
+              fields: fields2
+            });
           }
-        }).toGqlOptions()
-      );
-      if (langTheme.id) {
-        removeTheme(langTheme.id);
-      }
-    } finally {
-      setRemoving(false);
+        }
+      ) })
     }
-  }, [
-    currentLang,
-    lang.id,
-    queryTheme,
-    removeTheme,
-    setCurrentLang,
-    setSelectedContent,
-    upsertWebsite,
-    (_a = website == null ? void 0 : website.baseLang) == null ? void 0 : _a.id,
-    website == null ? void 0 : website.id,
-    website == null ? void 0 : website.langs
-  ]);
+  );
+}
+function ProductPanel(props) {
+  const { settings, onChange } = props;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    Card,
+    "div",
     {
-      shadow: "sm",
-      className: "bg-background cursor-pointer transition-colors group relative",
-      classNames: {
-        base: isSelected ? "outline-2 outline-primary" : "hover:bg-default-100"
-      },
-      isPressable: !removing,
-      as: "div",
-      isDisabled: removing,
-      onPress: () => onSelect(lang.id),
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardBody, { className: "p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
-          lang.icon && /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: lang.icon, className: "text-2xl shrink-0" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "font-medium truncate", children: lang.cnName }),
-              isBaseLang && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "shrink-0 inline-flex items-center px-1.5 py-0.5 rounded-full bg-success/10 border border-primary/20", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[10px] text-primary font-medium leading-none", children: "基准语言" }) })
-            ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-default-500 truncate", children: lang.abbr })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
-          isSelected && /* @__PURE__ */ jsxRuntimeExports.jsx(CheckCircleIcon, { className: "text-primary size-5 shrink-0" }),
-          !isBaseLang && !isMutating && /* @__PURE__ */ jsxRuntimeExports.jsx(
-            Button$1,
-            {
-              isIconOnly: true,
-              size: "sm",
-              variant: "light",
-              className: "absolute top-1 right-1 w-6 h-6 min-w-6 min-h-6 rounded-full text-default-400 hover:text-default-500 group-hover:opacity-100 opacity-0 transition-opacity duration-300",
-              onPress: handleDelete,
-              children: /* @__PURE__ */ jsxRuntimeExports.jsx(CloseIcon, { className: "size-4" })
-            }
-          ),
-          isMutating && /* @__PURE__ */ jsxRuntimeExports.jsx(
-            CircularProgress,
-            {
-              "aria-label": "Loading...",
-              size: "sm",
-              className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
-            }
-          )
-        ] })
-      ] }) })
+      className: "flex flex-col gap-4 overflow-x-hidden py-2",
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        ExtendsTable,
+        {
+          fields: settings == null ? void 0 : settings.fields,
+          onChange: (fields2) => {
+            onChange == null ? void 0 : onChange({
+              ...settings,
+              fields: fields2
+            });
+          }
+        }
+      ) })
     }
   );
 }
-const TRANSLATE_THEME_KEY = "translate-theme";
-function useTranslateThemeTask() {
-  const theme = useStudioTheme();
-  const lang = useCurrentLang();
-  const baseThemeId = useBaseLangThemeId();
-  const appKey = (theme == null ? void 0 : theme.id) || "";
-  const taskState = useInprogressTaskByKey(TRANSLATE_THEME_KEY, appKey);
-  const setTask = useUpdateTask(appKey);
-  const entifyClient = useCreateEntityClient();
-  const task = taskState && taskState.status !== "done" ? taskPool[taskState.taskId] : void 0;
-  const aiUrl = useAiUrl();
-  const handleTaskChange = useCallback(
-    (data) => {
-      setTask(data);
-    },
-    [setTask]
-  );
-  const translateAndReset = useCallback(() => {
-    if (!(theme == null ? void 0 : theme.id)) {
-      console.error("没设置Theme");
-      return;
-    }
-    if (!entifyClient) {
-      console.error("entifyClient 创建失败");
-      return;
-    }
-    if (!aiUrl) {
-      console.error("没设置aiUrl");
-      return;
-    }
-    if (!baseThemeId) {
-      console.error("没设置baseThemeId");
-      return;
-    }
-    const task2 = new TranslateThemeTask({
-      key: TRANSLATE_THEME_KEY,
-      entifyClient,
-      baseThemeId,
-      themeId: theme == null ? void 0 : theme.id,
-      lang,
-      aiUrl
+function ExtendsPanel() {
+  const [themeSettings, setThemeSettings] = useState();
+  const initialSettings = useThemeSettings();
+  const webTheme = useStudioTheme();
+  const [save, { isMutating }] = useUpsertOneTheme();
+  const changed = useMemo(() => {
+    return JSON.stringify(themeSettings || {}) !== JSON.stringify(initialSettings || {});
+  }, [themeSettings, initialSettings]);
+  const handleReset = useCallback(() => {
+    setThemeSettings(initialSettings);
+  }, [initialSettings]);
+  const handleSave = useCallback(() => {
+    save({
+      id: webTheme == null ? void 0 : webTheme.id,
+      settings: themeSettings || void 0
     });
-    taskPool[task2.id] = task2;
-    task2.onDataChange(handleTaskChange);
-    task2.start();
-  }, [aiUrl, baseThemeId, entifyClient, handleTaskChange, lang, theme == null ? void 0 : theme.id]);
-  return { taskState, translateAndReset, task };
-}
-const linkTypes = [
-  {
-    key: "path",
-    label: "子网址",
-    description: "例如：example.com/en",
-    icon: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "svg",
+  }, [save, themeSettings, webTheme == null ? void 0 : webTheme.id]);
+  useEffect(() => {
+    setThemeSettings(initialSettings);
+  }, [initialSettings]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(ModalBody, { className: "flex-1 min-h-0 overflow-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      Tabs,
       {
-        xmlns: "http://www.w3.org/2000/svg",
-        className: "size-5 text-default-500",
-        viewBox: "0 0 24 24",
-        children: /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { fill: "none", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "path",
-            {
-              stroke: "currentColor",
-              strokeWidth: 1.5,
-              d: "M2 12c0-4.714 0-7.071 1.464-8.536C4.93 2 7.286 2 12 2s7.071 0 8.535 1.464C22 4.93 22 7.286 22 12s0 7.071-1.465 8.535C19.072 22 16.714 22 12 22s-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12Z"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "path",
+        "aria-label": "extends",
+        className: "mt-2",
+        size: "sm",
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Tab, { title: "产品", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            ProductPanel,
             {
-              fill: "currentColor",
-              d: "M11.25 18a.75.75 0 0 0 1.5 0zM18 8l.53.53a.75.75 0 0 0 0-1.06zm-.97-2.03a.75.75 0 1 0-1.06 1.06zm-1.06 3a.75.75 0 1 0 1.06 1.06zM12.75 18v-6h-1.5v6zM16 8.75h2v-1.5h-2zm2.53-1.28l-1.5-1.5l-1.06 1.06l1.5 1.5zm-1.06 0l-1.5 1.5l1.06 1.06l1.5-1.5zM12.75 12A3.25 3.25 0 0 1 16 8.75v-1.5A4.75 4.75 0 0 0 11.25 12z"
+              settings: themeSettings == null ? void 0 : themeSettings.product,
+              onChange: (settings) => {
+                setThemeSettings({
+                  ...themeSettings,
+                  product: settings
+                });
+              }
             }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "path",
+          ) }, "product"),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Tab, { title: "文章", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            PostPanel,
             {
-              fill: "currentColor",
-              d: "M11.25 18a.75.75 0 0 0 1.5 0zM6 8l-.53-.53a.75.75 0 0 0 0 1.06zm2.03-.97a.75.75 0 0 0-1.06-1.06zm-1.06 3a.75.75 0 1 0 1.06-1.06zM12.75 18v-6h-1.5v6zM8 7.25H6v1.5h2zM6.53 8.53l1.5-1.5l-1.06-1.06l-1.5 1.5zm-1.06 0l1.5 1.5l1.06-1.06l-1.5-1.5zM12.75 12A4.75 4.75 0 0 0 8 7.25v1.5A3.25 3.25 0 0 1 11.25 12z"
+              settings: themeSettings == null ? void 0 : themeSettings.post,
+              onChange: (settings) => {
+                setThemeSettings({
+                  ...themeSettings,
+                  post: settings
+                });
+              }
             }
-          )
-        ] })
-      }
-    )
-  },
-  {
-    key: "subdomain",
-    label: "二级域名",
-    description: "例如：en.example.com",
-    icon: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "svg",
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        className: "size-5 text-default-500",
-        viewBox: "0 0 24 24",
-        children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          "g",
-          {
-            fill: "none",
-            stroke: "currentColor",
-            strokeLinecap: "round",
-            strokeWidth: 1.5,
-            children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M14 12a6 6 0 1 1-6-6" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M10 12a6 6 0 1 1 6 6" })
-            ]
-          }
-        )
-      }
-    )
-  }
-];
-function MultiLangPanel() {
-  var _a, _b, _c, _d, _e, _f;
-  const [linkType, setLinkType] = useState("subdomain");
-  const [confirmOpen, setConfirmOpen] = useState(false);
-  const [currentLang, setCurrentLang] = useRecoilState(currentLangState);
-  const [selectedContent, setSelectedContent] = useRecoilState(selectedContentState);
-  const website = useWebsite();
-  const isChanginBaseLangRef = useRef(false);
-  const [upsertTheme, { isMutating: isCreating }] = useUpsertOneTheme();
-  const { taskState, task, translateAndReset } = useTranslateThemeTask();
-  useEffect(() => {
-    var _a2;
-    if (website && !currentLang) {
-      setCurrentLang((_a2 = website.baseLang) == null ? void 0 : _a2.id);
-    }
-  }, [currentLang, setCurrentLang, website]);
-  const { data: allLangs, isLoading: allLangsLoading } = useLangList(
-    new LangQueryOptions([
-      LangFields.id,
-      LangFields.abbr,
-      LangFields.enName,
-      LangFields.cnName,
-      LangFields.localName,
-      LangFields.description,
-      LangFields.circleIcon,
-      LangFields.icon
-    ])
-  );
-  const [upsertWebsite, { isMutating }] = useUpsertOneWebsite();
-  useEffect(() => {
-    if (!isMutating) {
-      isChanginBaseLangRef.current = false;
-    }
-  }, [isMutating]);
-  const handleBaseLangChange = useCallback(
-    (selection) => {
-      isChanginBaseLangRef.current = true;
-      upsertWebsite(
-        websiteToInput({
-          id: website == null ? void 0 : website.id,
-          [WebsiteAssciations.baseLang]: { id: selection.currentKey }
-        })
-      );
-    },
-    [upsertWebsite, website == null ? void 0 : website.id]
-  );
-  const handleLangSelect = useCallback(
-    (langId) => {
-      setCurrentLang(langId);
-      if ((selectedContent == null ? void 0 : selectedContent.id) && langId !== currentLang) {
-        setSelectedContent(void 0);
+          ) }, "post")
+        ]
       }
-    },
-    [selectedContent == null ? void 0 : selectedContent.id, setCurrentLang, setSelectedContent, currentLang]
-  );
-  const leftLangs = useMemo(() => {
-    var _a2;
-    return (_a2 = allLangs == null ? void 0 : allLangs.items) == null ? void 0 : _a2.filter(
-      (lang) => {
-        var _a3;
-        return !((_a3 = website == null ? void 0 : website.langs) == null ? void 0 : _a3.some((l2) => l2.id === lang.id));
+    ) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(ModalFooter, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Button$1,
+        {
+          size: "sm",
+          isDisabled: !changed,
+          onPress: handleReset,
+          children: "重置"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Button$1,
+        {
+          size: "sm",
+          isDisabled: !changed,
+          isLoading: isMutating,
+          color: "primary",
+          onPress: handleSave,
+          children: "保存"
+        }
+      )
+    ] })
+  ] });
+}
+function newThemeConfigOptions(theme) {
+  return new ThemeConfigQueryOptions(
+    [
+      ThemeConfigFields.id,
+      ThemeConfigFields.emailTemplates,
+      ThemeConfigFields.address,
+      ThemeConfigFields.contact,
+      ThemeConfigFields.email,
+      ThemeConfigFields.tel,
+      ThemeConfigFields.fax,
+      ThemeConfigFields.mobile,
+      ThemeConfigFields.wechat,
+      ThemeConfigFields.websiteTitle,
+      ThemeConfigFields.domain
+    ],
+    {
+      where: {
+        [ThemeConfigAssciations.theme]: {
+          id: {
+            _eq: theme == null ? void 0 : theme.id
+          }
+        }
       }
-    );
-  }, [allLangs, website]);
-  const handleAddLanguage = useCallback(
-    async (langId) => {
-      var _a2;
-      await upsertWebsite(
-        websiteToInput({
-          id: website == null ? void 0 : website.id,
-          [WebsiteAssciations.langs]: [
-            ...((_a2 = website == null ? void 0 : website.langs) == null ? void 0 : _a2.map((lang) => ({
-              id: lang.id
-            }))) || [],
-            { id: langId }
-          ]
-        })
-      );
-      if ((website == null ? void 0 : website.id) && langId) {
-        console.log("create theme");
-        await upsertTheme({
-          name: (website.name || "") + (langId || "") + "主题",
-          lang: {
-            sync: { id: langId }
-          },
-          website: {
-            sync: { id: website.id }
+    }
+  ).contactAvatar(new MediaQueryOptions().file(["thumbnail", "url"])).setNoQuery(!(theme == null ? void 0 : theme.id));
+}
+function newThemeIconConfigOptions(theme) {
+  return new ThemeConfigQueryOptions(
+    [
+      ThemeConfigFields.id,
+      ThemeConfigFields.svgIcon,
+      ThemeConfigFields.themeColor,
+      ThemeConfigFields.pngIcon,
+      ThemeConfigFields.appleTouchIcon,
+      ThemeConfigFields.icoIcon
+    ],
+    {
+      where: {
+        [ThemeConfigAssciations.theme]: {
+          id: {
+            _eq: theme == null ? void 0 : theme.id
           }
-        });
+        }
       }
+    }
+  ).setNoQuery(!(theme == null ? void 0 : theme.id));
+}
+function WebsiteInfoPanel(props) {
+  const { onSuccess } = props;
+  const theme = useStudioTheme();
+  const website = useWebsite();
+  const websiteId = website == null ? void 0 : website.id;
+  const { data: themeConfig2 } = useOneThemeConfig(newThemeConfigOptions(theme));
+  const [save, { isMutating }] = useUpsertOneThemeConfig({
+    onSuccess
+  });
+  const handleSave = useCallback(
+    (value) => {
+      if (!value)
+        return;
+      save(themeConfigToInputCascade(value));
     },
-    [upsertTheme, upsertWebsite, website == null ? void 0 : website.id, website == null ? void 0 : website.langs, website == null ? void 0 : website.name]
+    [save]
   );
-  const handleTranslate = useCallback(() => {
-    setConfirmOpen(true);
-  }, []);
-  const handleStop = useCallback(() => {
-    task == null ? void 0 : task.stop();
-  }, [task]);
-  const handleCloseConfirm = useCallback(() => {
-    setConfirmOpen(false);
-  }, []);
-  const handleConfirm = useCallback(() => {
-    translateAndReset();
-  }, [translateAndReset]);
-  const isRunning = (taskState == null ? void 0 : taskState.status) === "in-progress";
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(ModalBody, { className: "flex-1 p-4 min-h-0 overflow-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-4", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { className: "bg-default-50", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "flex gap-3 px-6 pt-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col flex-grow", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-lg font-semibold", children: "基准语言" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-small text-default-500", children: "从已启用的语言中选择网站的基准语言，作为翻译的原稿，默认为英文" })
-        ] }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(CardBody, { className: "px-6 pb-6", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Select,
-          {
-            label: "基准语言",
-            labelPlacement: "outside",
-            placeholder: "请选择网站基准的语言",
-            className: "max-w-sm",
-            selectedKeys: [((_a = website == null ? void 0 : website.baseLang) == null ? void 0 : _a.id) || ""],
-            isDisabled: (isMutating || isCreating) && isChanginBaseLangRef.current,
-            isLoading: (isMutating || isCreating) && isChanginBaseLangRef.current,
-            renderValue: (langValues) => {
-              return (langValues == null ? void 0 : langValues.map((langValue) => {
-                var _a2, _b2;
-                return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                  "div",
-                  {
-                    className: "flex items-center gap-2",
-                    children: [
-                      (_a2 = langValue == null ? void 0 : langValue.props) == null ? void 0 : _a2.startContent,
-                      (_b2 = langValue == null ? void 0 : langValue.props) == null ? void 0 : _b2.children
-                    ]
-                  },
-                  langValue == null ? void 0 : langValue.key
-                );
-              })) || [];
-            },
-            onSelectionChange: handleBaseLangChange,
-            children: ((_b = website == null ? void 0 : website.langs) == null ? void 0 : _b.map((lang) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-              SelectItem,
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(ModalBody, { className: "flex-1 min-h-0 flex flex-col p-0", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    EntityForm,
+    {
+      className: "flex-1 min-h-0 flex flex-col ",
+      entityName: ThemeConfigEntityName,
+      initialValue: themeConfig2 || {
+        [ThemeConfigAssciations.theme]: {
+          id: theme == null ? void 0 : theme.id
+        }
+      },
+      globalValidationErrorMessage: "部分输入项有错误，请检查",
+      isMutating,
+      onSubmit: handleSave,
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 flex flex-col gap-4 min-h-0 overflow-auto p-4 px-6", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-4", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              InputField,
               {
-                startContent: lang.icon ? /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: lang.icon, className: "text-xl" }) : null,
-                textValue: lang.abbr,
-                children: lang.cnName || lang.enName
-              },
-              lang.id
-            ))) || []
-          }
-        ) })
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { className: "bg-default-50", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "flex gap-3 px-6 pt-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col flex-grow", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-lg font-semibold", children: "已启用的语言" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-small text-default-500", children: "管理网站支持的语言" })
-        ] }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(CardBody, { className: "px-6 pb-6", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid gap-4 md:grid-cols-2 ", children: [
-            (_c = website == null ? void 0 : website.langs) == null ? void 0 : _c.map((lang) => {
-              var _a2;
-              return /* @__PURE__ */ jsxRuntimeExports.jsx(
-                LangCard,
+                name: ThemeConfigFields.domain,
+                label: "网站域名",
+                labelPlacement: "outside",
+                placeholder: "请输入网站域名",
+                description: "包含二级域名，不含http(s)://"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              InputField,
+              {
+                name: ThemeConfigFields.websiteTitle,
+                label: "网站标题",
+                labelPlacement: "outside",
+                placeholder: "请输入网站标题",
+                description: "社媒分享用"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2 mt-2", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-default-600", children: "联系人头像" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                MediaSingleSelectField,
                 {
-                  lang,
-                  isSelected: currentLang === lang.id,
-                  isBaseLang: ((_a2 = website == null ? void 0 : website.baseLang) == null ? void 0 : _a2.id) === lang.id,
-                  onSelect: handleLangSelect
-                },
-                lang.id
-              );
-            }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs(Dropdown, { placement: "bottom-end", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownTrigger, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                Button$1,
+                  name: ThemeConfigAssciations.contactAvatar,
+                  websiteId,
+                  mediaTypes: [MediaType.image],
+                  width: 120
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                InputField,
+                {
+                  name: ThemeConfigFields.contact,
+                  label: "联系人",
+                  labelPlacement: "outside",
+                  placeholder: "请输入联系人姓名"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                InputField,
+                {
+                  name: ThemeConfigFields.tel,
+                  label: "电话",
+                  labelPlacement: "outside",
+                  placeholder: "请输入联系电话"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              InputField,
+              {
+                name: ThemeConfigFields.email,
+                label: "邮箱",
+                labelPlacement: "outside",
+                placeholder: "请输入联系邮箱"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              InputField,
+              {
+                name: ThemeConfigFields.mobile,
+                label: "手机",
+                labelPlacement: "outside",
+                placeholder: "请输入手机号码"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              InputField,
+              {
+                name: ThemeConfigFields.fax,
+                label: "传真",
+                labelPlacement: "outside",
+                placeholder: "请输入传真号码"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            TextareaField,
+            {
+              name: ThemeConfigFields.address,
+              label: "地址",
+              labelPlacement: "outside",
+              placeholder: "请输入详细地址"
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Divider, { className: "mt-4" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-end p-4 px-6", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SubmitButton, { size: "sm", variant: "solid", color: "primary", children: "保存" }) })
+      ]
+    }
+  ) });
+}
+function EmialTemplatesPanel(props) {
+  const { onSuccess } = props;
+  const theme = useStudioTheme();
+  const { data: themeConfig2 } = useOneThemeConfig(newThemeConfigOptions(theme));
+  const [save, { isMutating }] = useUpsertOneThemeConfig({
+    onSuccess
+  });
+  const handleSave = useCallback(
+    (value) => {
+      if (!value)
+        return;
+      save(themeConfigToInput(value));
+    },
+    [save]
+  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(ModalBody, { className: "flex-1 min-h-0 overflow-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    EntityForm,
+    {
+      entityName: ThemeConfigEntityName,
+      initialValue: themeConfig2 || {
+        [ThemeConfigAssciations.theme]: {
+          id: theme == null ? void 0 : theme.id
+        }
+      },
+      globalValidationErrorMessage: "部分输入项有错误，请检查",
+      isMutating,
+      onSubmit: handleSave,
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(ObjectField, { name: ThemeConfigFields.emailTemplates, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(ObjectField, { name: "customerEmail", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { className: "mt-2", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(CardHeader, { className: "flex gap-2", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { children: "客户通知邮件" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-default-500", children: "变量:$name" })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Divider, {}),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(CardBody, { className: "gap-4", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                InputField,
                 {
-                  variant: "flat",
-                  className: "h-[88px] bg-default-100 hover:bg-default-200 w-full",
-                  startContent: /* @__PURE__ */ jsxRuntimeExports.jsx(AddIcon, { className: "size-6 shrink-0" }),
-                  isLoading: allLangsLoading || isMutating && !isChanginBaseLangRef.current,
-                  children: "添加语言"
+                  name: "subject",
+                  label: "标题",
+                  labelPlacement: "outside",
+                  placeholder: "请输入标题"
                 }
-              ) }),
+              ),
               /* @__PURE__ */ jsxRuntimeExports.jsx(
-                DropdownMenu,
+                TextareaField,
                 {
-                  "aria-label": "全部语言列表",
-                  items: leftLangs,
-                  className: "max-h-[300px] overflow-y-auto",
-                  disallowEmptySelection: true,
-                  selectionMode: "single",
-                  onAction: handleAddLanguage,
-                  children: (item) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    DropdownItem,
-                    {
-                      className: "gap-2",
-                      startContent: item.icon ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-                        Icon,
-                        {
-                          icon: item.icon,
-                          className: "text-xl shrink-0"
-                        }
-                      ) : null,
-                      textValue: item.cnName || item.enName,
-                      children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate", children: item.cnName || item.enName })
-                    },
-                    item.id
-                  )
+                  name: "content",
+                  label: "内容",
+                  minRows: 5,
+                  labelPlacement: "outside",
+                  placeholder: "请输入内容"
                 }
               )
             ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-6 flex items-center justify-between", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-default-500", children: taskState == null ? void 0 : taskState.infoMessage }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-end gap-2", children: [
-              isRunning && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                Button$1,
+          ] }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(ObjectField, { name: "employeeEmail", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { className: "mt-4", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(CardHeader, { className: "flex gap-2", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { children: "业务员通知邮件" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-default-500", children: "变量:$content" })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Divider, {}),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(CardBody, { className: "gap-4", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                InputField,
                 {
-                  variant: "flat",
-                  startContent: /* @__PURE__ */ jsxRuntimeExports.jsx(TaskStopIcon, { className: "size-5" }),
-                  onPress: handleStop,
-                  children: "停止"
+                  name: "subject",
+                  label: "标题",
+                  labelPlacement: "outside",
+                  placeholder: "请输入标题"
                 }
               ),
               /* @__PURE__ */ jsxRuntimeExports.jsx(
-                Button$1,
+                TextareaField,
                 {
-                  color: "primary",
-                  startContent: /* @__PURE__ */ jsxRuntimeExports.jsx(AiStarIcon, { className: "size-5" }),
-                  isDisabled: currentLang === ((_d = website == null ? void 0 : website.baseLang) == null ? void 0 : _d.id),
-                  isLoading: isRunning,
-                  onPress: handleTranslate,
-                  children: "翻译 & 重置"
+                  name: "content",
+                  label: "内容",
+                  minRows: 5,
+                  labelPlacement: "outside",
+                  placeholder: "请输入内容"
                 }
               )
             ] })
-          ] })
-        ] })
-      ] }),
-      !!((_e = website == null ? void 0 : website.langs) == null ? void 0 : _e.length) && ((_f = website == null ? void 0 : website.langs) == null ? void 0 : _f.length) > 1 && /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { className: "bg-default-50", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "flex gap-3 px-6 pt-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col flex-grow", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-lg font-semibold", children: "链接方式" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-small text-default-500", children: "选择多语言网站的访问方式" })
-        ] }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(CardBody, { className: "px-6 pb-6", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid gap-4 md:grid-cols-2", children: linkTypes.map((type) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-            Card,
-            {
-              shadow: "sm",
-              className: `bg-background cursor-pointer transition-colors ${linkType === type.key ? "border-2 border-primary" : "hover:bg-default-100"}`,
-              isPressable: type.key !== "path",
-              as: "div",
-              isDisabled: type.key === "path",
-              onPress: () => type.key !== "path" && setLinkType(type.key),
-              children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardBody, { className: "p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center size-10 rounded-lg bg-default-100", children: type.icon }),
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "font-medium", children: type.label }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-default-500", children: type.description })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Divider, { className: "mt-4" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-end mt-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SubmitButton, { size: "sm", variant: "solid", color: "primary", children: "保存" }) })
+      ]
+    }
+  ) });
+}
+function FaviconCell({
+  type,
+  svgIcon,
+  themeColor,
+  isDark
+}) {
+  const getBgColor = () => {
+    if (type === "tab")
+      return themeColor;
+    if (type === "browser")
+      return isDark ? "#333" : "#f3f4f6";
+    return isDark ? "#222" : "white";
+  };
+  const getIconColor = () => {
+    if (type === "tab")
+      return "white";
+    return isDark ? "white" : "black";
+  };
+  const getBorderColor = () => {
+    if (type === "bookmark")
+      return isDark ? "#555" : "#e5e7eb";
+    return "transparent";
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        className: `w-10 h-10 flex items-center justify-center rounded-md border`,
+        style: {
+          backgroundColor: getBgColor(),
+          borderColor: getBorderColor()
+        },
+        children: svgIcon ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: "w-6 h-6",
+            dangerouslySetInnerHTML: {
+              __html: svgIcon.replace(/currentColor/g, getIconColor()).replace(
+                /fill="([^"]*)"/g,
+                (match, color) => color === "currentColor" ? `fill="${getIconColor()}"` : match
+              )
+            }
+          }
+        ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+          FavouriteIcon,
+          {
+            className: "w-6 h-6",
+            style: { color: getIconColor() }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-xs mt-1", children: [
+      type === "browser" && "浏览器",
+      type === "tab" && "标签页",
+      type === "bookmark" && "书签"
+    ] })
+  ] });
+}
+function FaviconPreview(props) {
+  const { isDark } = props;
+  const formValue = useFormValue();
+  const themeColor = formValue == null ? void 0 : formValue.themeColor;
+  const svgIcon = formValue == null ? void 0 : formValue.svgIcon;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      className: "flex items-center gap-8 justify-center p-4",
+      style: { borderRadius: "0.375rem" },
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          FaviconCell,
+          {
+            type: "browser",
+            svgIcon,
+            themeColor,
+            isDark
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          FaviconCell,
+          {
+            type: "tab",
+            svgIcon,
+            themeColor,
+            isDark
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          FaviconCell,
+          {
+            type: "bookmark",
+            svgIcon,
+            themeColor,
+            isDark
+          }
+        )
+      ]
+    }
+  );
+}
+const FaviconPreviewField = toField(
+  FaviconPreview,
+  {
+    defaultValue: ""
+  }
+);
+function ResetButton() {
+  const parentTheme = useParentTheme();
+  const form = useForm();
+  const handleReset = useCallback(() => {
+    var _a, _b, _c, _d, _e;
+    const formValue = form == null ? void 0 : form.getValue();
+    form == null ? void 0 : form.setValue({
+      ...formValue,
+      [ThemeConfigFields.svgIcon]: (_a = parentTheme == null ? void 0 : parentTheme.config) == null ? void 0 : _a.svgIcon,
+      [ThemeConfigFields.themeColor]: (_b = parentTheme == null ? void 0 : parentTheme.config) == null ? void 0 : _b.themeColor,
+      [ThemeConfigFields.pngIcon]: (_c = parentTheme == null ? void 0 : parentTheme.config) == null ? void 0 : _c.pngIcon,
+      [ThemeConfigFields.icoIcon]: (_d = parentTheme == null ? void 0 : parentTheme.config) == null ? void 0 : _d.icoIcon,
+      [ThemeConfigFields.appleTouchIcon]: (_e = parentTheme == null ? void 0 : parentTheme.config) == null ? void 0 : _e.appleTouchIcon
+    });
+  }, [form, parentTheme == null ? void 0 : parentTheme.config]);
+  return parentTheme ? /* @__PURE__ */ jsxRuntimeExports.jsx(Button$1, { variant: "flat", size: "sm", onPress: handleReset, children: "重置" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {});
+}
+function FaviconPanel(props) {
+  const { onSuccess } = props;
+  const [isDarkPreview, setIsDarkPreview] = useState(false);
+  const theme = useStudioTheme();
+  const { data: themeConfig2 } = useOneThemeConfig(
+    newThemeIconConfigOptions(theme)
+  );
+  const [save, { isMutating }] = useUpsertOneThemeConfig({
+    onSuccess
+  });
+  const handleSave = useCallback(
+    (value) => {
+      if (!value)
+        return;
+      save(themeConfigToInput(value));
+    },
+    [save]
+  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(ModalBody, { className: "flex-1 p-0 min-h-0 flex flex-col", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    EntityForm,
+    {
+      className: "flex-1 min-h-0 flex flex-col ",
+      entityName: ThemeConfigEntityName,
+      initialValue: themeConfig2 || {
+        [ThemeConfigAssciations.theme]: {
+          id: theme == null ? void 0 : theme.id
+        }
+      },
+      globalValidationErrorMessage: "部分输入项有错误，请检查",
+      isMutating,
+      onSubmit: handleSave,
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 flex flex-col gap-4 min-h-0 overflow-auto p-4", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { className: "bg-default-50 overflow-visible", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "flex gap-3 px-6 pt-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col flex-grow", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-lg font-semibold", children: "首选图标设置" }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-small text-default-500", children: "SVG图标与浏览器主题色(Theme color)" })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(CardBody, { className: "px-6 pb-6 overflow-visible", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-6", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                TextareaField,
+                {
+                  name: ThemeConfigFields.svgIcon,
+                  label: "SVG 图标",
+                  labelPlacement: "outside",
+                  placeholder: "请输入 SVG 图标代码",
+                  description: "推荐使用 SVG 格式，支持缩放且文件小"
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-6", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "block text-sm font-medium mb-1.5", children: "浏览器主题色" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(ColorField, { name: ThemeConfigFields.themeColor }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-default-400 mt-1", children: "用于浏览器标签栏等显示" })
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-4 border border-dashed border-default-200 rounded-lg bg-default-50", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between items-center mb-2", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-sm font-medium", children: "预览效果" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    Button$1,
+                    {
+                      size: "sm",
+                      variant: "light",
+                      isIconOnly: true,
+                      className: "text-default-600",
+                      onPress: () => setIsDarkPreview(!isDarkPreview),
+                      children: isDarkPreview ? /* @__PURE__ */ jsxRuntimeExports.jsx(LightIcon, { className: "size-4" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(DarkIcon, { className: "size-4" })
+                    }
+                  )
                 ] }),
-                linkType === type.key && /* @__PURE__ */ jsxRuntimeExports.jsx(CheckCircleIcon, { className: "text-primary size-5" })
-              ] }) })
-            },
-            type.key
-          )) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-default-400", children: linkType === "subdomain" ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: "使用二级域名方式需要正确配置DNS解析，将所有二级域名指向网站服务器。 同时需要配置服务器支持泛域名解析。" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: "使用子网址方式无需额外的DNS配置，但URL会相对较长。 建议在无法使用二级域名时选择此方式。" }) }) })
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  FaviconPreviewField,
+                  {
+                    name: ThemeConfigFields.themeColor,
+                    isDark: isDarkPreview
+                  }
+                )
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { className: "bg-default-50 overflow-visible", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { className: "flex gap-3 px-6 pt-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col flex-grow", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-lg font-semibold", children: "备选图标格式" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-small text-default-500", children: "为不同设备和浏览器提供多种图标格式，提高兼容性" })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(CardBody, { className: "px-6 pb-6 space-y-5 overflow-visible", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  FullImageSelectField,
+                  {
+                    name: ThemeConfigFields.pngIcon,
+                    label: "PNG 图标",
+                    classNames: {
+                      base: "flex-col",
+                      label: "text-sm"
+                    },
+                    width: 80,
+                    height: 80
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-default-400 mt-1", children: "建议尺寸 512×512 像素，用于不支持 SVG 的场景" })
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  FullImageSelectField,
+                  {
+                    name: ThemeConfigFields.icoIcon,
+                    label: "ICO 图标",
+                    classNames: {
+                      base: "flex-col",
+                      label: "text-sm"
+                    },
+                    width: 80,
+                    height: 80
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-default-400 mt-1", children: "传统格式，确保最大兼容性" })
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  FullImageSelectField,
+                  {
+                    name: ThemeConfigFields.appleTouchIcon,
+                    label: "Apple Touch 图标",
+                    classNames: {
+                      base: "flex-col",
+                      label: "text-sm"
+                    },
+                    width: 80,
+                    height: 80
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-default-400 mt-1", children: "用于 iOS 设备，建议尺寸 180×180 像素的png图片" })
+              ] })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Divider, {}),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-end p-4 px-6 gap-2", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(ResetButton, {}),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(SubmitButton, { size: "sm", variant: "solid", color: "primary", children: "保存" })
         ] })
-      ] })
-    ] }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      ConfirmDialog,
-      {
-        open: confirmOpen,
-        onClose: handleCloseConfirm,
-        onConfirm: handleConfirm,
-        confirm: "翻译会重置并覆盖当前网站内容，不可撤销，您确定要翻译吗？"
-      }
-    )
-  ] });
+      ]
+    }
+  ) }) });
 }
 function ConfigDrawer() {
   const [openSettingsType, setOpenSettingsType] = useRecoilState(configTypeState);
@@ -5096,6 +5270,7 @@ function ConfigDrawer() {
       onClose: () => setOpenSettingsType(void 0),
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs(ModalHeader, { className: "pr-2 h-12", children: [
+          openSettingsType === ThemeConfigType.Favicon && "网站图标",
           openSettingsType === ThemeConfigType.MultiLang && "多语言配置",
           openSettingsType === ThemeConfigType.Tailwind && "Tailwind 配置",
           openSettingsType === ThemeConfigType.CSS && "自定义CSS",
@@ -5106,6 +5281,7 @@ function ConfigDrawer() {
           /* @__PURE__ */ jsxRuntimeExports.jsx(ModalClose, {})
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(Divider, {}),
+        openSettingsType === ThemeConfigType.Favicon && /* @__PURE__ */ jsxRuntimeExports.jsx(FaviconPanel, { onSuccess: () => setOpenSettingsType(void 0) }),
         openSettingsType === ThemeConfigType.MultiLang && /* @__PURE__ */ jsxRuntimeExports.jsx(MultiLangPanel, {}),
         openSettingsType === ThemeConfigType.Extends && /* @__PURE__ */ jsxRuntimeExports.jsx(ExtendsPanel, {}),
         openSettingsType === ThemeConfigType.WebsiteInfo && /* @__PURE__ */ jsxRuntimeExports.jsx(WebsiteInfoPanel, { onSuccess: () => setOpenSettingsType(void 0) }),
@@ -5213,7 +5389,7 @@ const ThemeSelectionStep = (props) => {
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm", children: "当前父主题:" }),
           parentTheme == null ? void 0 : parentTheme.name
         ] }),
-        (parentTheme == null ? void 0 : parentTheme.id) === selectedThemeId && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-warning", children: "选中的主题与父主题相同" })
+        (parentTheme == null ? void 0 : parentTheme.id) && (parentTheme == null ? void 0 : parentTheme.id) === selectedThemeId && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-warning", children: "选中的主题与父主题相同" })
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -6425,6 +6601,94 @@ const ThemeIcon = (props) => {
     }
   ) });
 };
+const defaultSchema = {
+  componentName: "Root"
+};
+const emptyValue = { schema: void 0, config: void 0 };
+function useSchema(selectedContent) {
+  const [schema, setSchema] = useState(emptyValue);
+  const components = useFrontComponents();
+  const pages = usePages();
+  const componentsRef = useRef(components);
+  const pagesRef = useRef(pages);
+  componentsRef.current = components;
+  pagesRef.current = pages;
+  const templates = useTemplates();
+  const templatesRef = useRef(templates);
+  templatesRef.current = templates;
+  useEffect(() => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+    let code;
+    let hasContent = false;
+    let defaultConfig;
+    if ((selectedContent == null ? void 0 : selectedContent.type) === ContentType.Component) {
+      const component = (_a = componentsRef.current) == null ? void 0 : _a.find(
+        (component2) => component2.id === selectedContent.id
+      );
+      if (component) {
+        code = component.code;
+        hasContent = true;
+      }
+    } else if ((selectedContent == null ? void 0 : selectedContent.type) === ContentType.PredefinedPage || (selectedContent == null ? void 0 : selectedContent.type) === ContentType.Page) {
+      const page = (_b = pagesRef.current) == null ? void 0 : _b.find(
+        (item) => item.id === selectedContent.id
+      );
+      defaultConfig = {
+        pageMeta: {
+          seoTitle: (_c = page == null ? void 0 : page.meta) == null ? void 0 : _c.seoTitle,
+          seoDescription: (_d = page == null ? void 0 : page.meta) == null ? void 0 : _d.seoDescription,
+          seoKeywords: (_e = page == null ? void 0 : page.meta) == null ? void 0 : _e.seoKeywords,
+          ogTitle: (_f = page == null ? void 0 : page.meta) == null ? void 0 : _f.ogTitle,
+          ogDescription: (_g = page == null ? void 0 : page.meta) == null ? void 0 : _g.ogDescription,
+          ogType: (_h = page == null ? void 0 : page.meta) == null ? void 0 : _h.ogType,
+          ogImage: (_i = page == null ? void 0 : page.meta) == null ? void 0 : _i.ogImage
+        }
+      };
+      if (page) {
+        code = page.code;
+        hasContent = true;
+      }
+    } else if ((selectedContent == null ? void 0 : selectedContent.type) === ContentType.Template) {
+      const template = (_j = templatesRef.current) == null ? void 0 : _j.find(
+        (template2) => template2.id === selectedContent.id
+      );
+      if (template) {
+        code = template.code;
+        hasContent = true;
+      }
+    }
+    if (code) {
+      transformCodeToSchema(code).then((value) => {
+        setSchema({
+          schema: { ...defaultSchema, children: (value == null ? void 0 : value.template) || [] },
+          config: { ...defaultConfig, ...value.resources }
+        });
+      });
+    } else if (hasContent) {
+      setSchema({
+        schema: { ...defaultSchema, children: [] }
+      });
+    }
+  }, [selectedContent == null ? void 0 : selectedContent.id, selectedContent == null ? void 0 : selectedContent.type]);
+  console.log("===>schema", schema);
+  return schema;
+}
+function useCloseDrawer() {
+  const setDrawerType = useSetRecoilState(drawerTypeState);
+  const drawerDocked = useRecoilValue(drawerDockedState);
+  const close = useCallback(() => {
+    if (!drawerDocked) {
+      setDrawerType(void 0);
+    }
+  }, [drawerDocked, setDrawerType]);
+  return close;
+}
+function useIsBaseLangTheme() {
+  var _a, _b;
+  const theme = useStudioTheme();
+  const website = useWebsite();
+  return ((_a = theme == null ? void 0 : theme.lang) == null ? void 0 : _a.id) === ((_b = website == null ? void 0 : website.baseLang) == null ? void 0 : _b.id);
+}
 function MoreActions$1() {
   const {
     isOpen: isParentThemeOpen,
@@ -6474,6 +6738,15 @@ function MoreActions$1() {
               },
               ThemeConfigType.WebsiteInfo
             ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              DropdownItem,
+              {
+                startContent: /* @__PURE__ */ jsxRuntimeExports.jsx(FavouriteIcon, { className: "size-5" }),
+                onPress: () => setConfigType(ThemeConfigType.Favicon),
+                children: "站点图标"
+              },
+              "favicon"
+            ),
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               DropdownItem,
               {
@@ -12555,7 +12828,7 @@ function ViewModeButtons() {
         select: viewMode === ViewMode.Preview,
         isDisabled: !selectedContent,
         onPress: () => handleSetViewMode(ViewMode.Preview),
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx(PlayIcon, { className: "size-5" })
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(PlayIcon, { className: "size-4" })
       }
     )
   ] });
@@ -12773,7 +13046,7 @@ const WebsiteToolbar = memo(() => {
     {
       className: `h-12 w-full flex px-0 justify-between items-center border-b border-divider`,
       children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center shrink-0 gap-2 pl-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Logo, { subtitle: "网站设计器 - " + (website == null ? void 0 : website.name) }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center shrink-0 gap-2 pl-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Logo, { subtitle: "网站设计器 - " + ((website == null ? void 0 : website.title) || (website == null ? void 0 : website.name)) }) }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(DeviceTabs, {}),
         /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "div",
@@ -12881,10 +13154,129 @@ const SettingsForm = memo(() => {
   );
 });
 function MetaInfo() {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-2 px-4 text-sm text-default-500", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "搜索引擎预览" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "社媒分享预览" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm", children: "SEO建议" })
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const theme = useStudioTheme();
+  const editingPage = useRecoilValue(editingPageState);
+  const doc = useDocument();
+  const pageConfig = doc == null ? void 0 : doc.getConfig();
+  const pageMeta = pageConfig == null ? void 0 : pageConfig.pageMeta;
+  const keywords = ((_a = pageMeta == null ? void 0 : pageMeta.seoKeywords) == null ? void 0 : _a.split(",")) || [];
+  const ogImageUrl = ((_c = (_b = pageMeta == null ? void 0 : pageMeta.ogImage) == null ? void 0 : _b.file) == null ? void 0 : _c.resize) || ((_e = (_d = pageMeta == null ? void 0 : pageMeta.ogImage) == null ? void 0 : _d.file) == null ? void 0 : _e.thumbnail);
+  const subUrl = useMemo(() => {
+    if ((editingPage == null ? void 0 : editingPage.pageType) === PageType.Customized) {
+      return "/" + (editingPage.slug || "");
+    }
+    if ((editingPage == null ? void 0 : editingPage.pageType) === PageType.Product) {
+      return "/products/product-slug";
+    }
+    if ((editingPage == null ? void 0 : editingPage.pageType) === PageType.ProductList) {
+      return "/products/page/1";
+    }
+    if ((editingPage == null ? void 0 : editingPage.pageType) === PageType.ProductCategory) {
+      return "/products/category/page/1";
+    }
+    if ((editingPage == null ? void 0 : editingPage.pageType) === PageType.Post) {
+      return "/posts/post-slug";
+    }
+    if ((editingPage == null ? void 0 : editingPage.pageType) === PageType.PostList) {
+      return "/posts/page/1";
+    }
+    if ((editingPage == null ? void 0 : editingPage.pageType) === PageType.PostCategory) {
+      return "/posts/category/page/1";
+    }
+    if ((editingPage == null ? void 0 : editingPage.pageType) === PageType.SearchList) {
+      return "/search";
+    }
+    if ((editingPage == null ? void 0 : editingPage.pageType) === PageType.Profile) {
+      return "/profile/userid";
+    }
+    if ((editingPage == null ? void 0 : editingPage.pageType) === PageType.Page404) {
+      return "/404";
+    }
+    if ((editingPage == null ? void 0 : editingPage.pageType) === PageType.Thanks) {
+      return "/thanks";
+    }
+    if ((editingPage == null ? void 0 : editingPage.pageType) === PageType.PageError) {
+      return "/error";
+    }
+    return "";
+  }, [editingPage == null ? void 0 : editingPage.pageType, editingPage == null ? void 0 : editingPage.slug]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-2 flex flex-col gap-4 h-full overflow-y-auto text-sm", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("h3", { className: "font-medium flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(GlobalIcon, { className: "text-primary-500 size-4" }),
+        "搜索引擎预览"
+      ] }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-zinc-200 dark:border-zinc-700 rounded p-3 bg-white dark:bg-zinc-900", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-blue-600 dark:text-blue-400 font-medium text-sm truncate", children: (pageMeta == null ? void 0 : pageMeta.seoTitle) || "未设置SEO标题" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-green-700 dark:text-green-500 text-xs mt-1 truncate", children: [
+          "https://",
+          ((_f = theme == null ? void 0 : theme.config) == null ? void 0 : _f.domain) || "未设置网站域名",
+          subUrl
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-zinc-600 dark:text-zinc-400 text-xs mt-1 line-clamp-2", children: (pageMeta == null ? void 0 : pageMeta.seoDescription) || "未设置SEO描述" })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap gap-1", children: [
+        (_g = pageMeta == null ? void 0 : pageMeta.seoKeywords) == null ? void 0 : _g.split(",").slice(0, 3).map((keyword, index) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Chip,
+          {
+            color: "primary",
+            variant: "flat",
+            size: "sm",
+            className: "text-xs",
+            children: keyword.trim()
+          },
+          index
+        )),
+        keywords.length > 3 && /* @__PURE__ */ jsxRuntimeExports.jsxs(Chip, { color: "primary", variant: "flat", size: "sm", className: "text-xs", children: [
+          "+",
+          keywords.length - 3
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3 mt-2", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("h3", { className: "font-medium flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(SnsIcon, { className: "text-primary-500 size-4" }),
+        "社媒预览"
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-zinc-200 dark:border-zinc-700 rounded overflow-hidden bg-white dark:bg-zinc-900", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "aspect-[1200/630] relative bg-zinc-100 dark:bg-zinc-800 overflow-hidden", children: ogImageUrl ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "img",
+          {
+            src: ogImageUrl,
+            alt: "Social preview image",
+            className: "w-full h-full object-cover"
+          }
+        ) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "p-2 text-xs text-default-500", children: "未设置社媒分享图片" }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-2", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1 mb-1", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-4 h-4 rounded-full bg-blue-500 flex items-center justify-center text-white", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: "mdi:facebook", className: "text-xs" }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs", children: ((_h = theme == null ? void 0 : theme.config) == null ? void 0 : _h.websiteTitle) || "没有设置网站标题" })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: "text-xs font-medium mb-1 line-clamp-1", children: (pageMeta == null ? void 0 : pageMeta.ogTitle) || "未设置社媒标题" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-zinc-600 dark:text-zinc-400 line-clamp-2", children: (pageMeta == null ? void 0 : pageMeta.ogDescription) || "未设置社媒描述" })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3 mt-2", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("h3", { className: "font-medium flex items-center gap-1", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(LightBoltIcon, { className: "text-primary-500 size-4" }),
+          "SEO优化建议"
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Button$1,
+          {
+            size: "sm",
+            variant: "solid",
+            color: "primary",
+            startContent: /* @__PURE__ */ jsxRuntimeExports.jsx(AiStarIcon, { className: "size-4" }),
+            children: "SEO评估"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border border-zinc-200 dark:border-zinc-700 rounded-lg bg-white dark:bg-zinc-900 p-3 overflow-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-default-500", children: "请点击“SEO评估”按钮，通过AI进行SEO评估并获取优化建议" }) })
+    ] })
   ] });
 }
 const rightPanelWidth = "w-[22rem]";
@@ -15673,137 +16065,137 @@ function PagesPanel(props) {
 }
 function SEOPanel(props) {
   const { hidden } = props;
-  const [page, setEditingPage] = useRecoilState(editingPageState);
-  const setChanged = useSetRecoilState(contentChangedState);
+  const doc = useDocument();
+  const pageConfig = doc == null ? void 0 : doc.getConfig();
+  const pageMeta = pageConfig == null ? void 0 : pageConfig.pageMeta;
   const handleValueChange = useCallback(
     (values) => {
-      setEditingPage((page2) => ({
-        ...page2,
-        meta: {
-          ...page2 == null ? void 0 : page2.meta,
-          ...values
-        }
-      }));
-      setChanged(true);
+      doc.setConfig({
+        ...pageConfig || {},
+        pageMeta: { ...pageConfig == null ? void 0 : pageConfig.pageMeta, ...values }
+      });
     },
-    [setChanged, setEditingPage]
+    [doc, pageConfig]
   );
   const initialValue = useMemo(
-    () => {
-      var _a, _b, _c;
-      return {
-        [PageMetaFields.seoTitle]: ((_a = page == null ? void 0 : page.meta) == null ? void 0 : _a.seoTitle) || "",
-        [PageMetaFields.seoKeywords]: ((_b = page == null ? void 0 : page.meta) == null ? void 0 : _b.seoKeywords) || "",
-        [PageMetaFields.seoDescription]: ((_c = page == null ? void 0 : page.meta) == null ? void 0 : _c.seoDescription) || ""
-      };
-    },
-    [page]
+    () => ({
+      [PageMetaFields.seoTitle]: (pageMeta == null ? void 0 : pageMeta.seoTitle) || "",
+      [PageMetaFields.seoKeywords]: (pageMeta == null ? void 0 : pageMeta.seoKeywords) || "",
+      [PageMetaFields.seoDescription]: (pageMeta == null ? void 0 : pageMeta.seoDescription) || ""
+    }),
+    [pageMeta == null ? void 0 : pageMeta.seoDescription, pageMeta == null ? void 0 : pageMeta.seoKeywords, pageMeta == null ? void 0 : pageMeta.seoTitle]
   );
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Form, { initialValue, onValueChange: handleValueChange, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(LeftPanel, { className: "p-4", hidden, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(TitleViewField, { name: PageMetaFields.seoTitle }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(DescriptionViewField, { name: PageMetaFields.seoDescription })
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      InputField,
-      {
-        name: PageMetaFields.seoTitle,
-        label: "标题",
-        labelPlacement: "outside",
-        placeholder: "请输入SEO标题"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      TextareaField,
-      {
-        name: PageMetaFields.seoKeywords,
-        label: "关键词",
-        minRows: 2,
-        labelPlacement: "outside",
-        placeholder: "请输入SEO关键词"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      TextareaField,
-      {
-        name: PageMetaFields.seoDescription,
-        label: "描述",
-        labelPlacement: "outside",
-        placeholder: "请输入SEO描述",
-        minRows: 3
-      }
-    )
-  ] }) });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(LeftPanel, { className: "px-4", hidden, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    Form,
+    {
+      className: "flex-1 flex flex-col gap-4",
+      initialValue,
+      onValueChange: handleValueChange,
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(TitleViewField, { name: PageMetaFields.seoTitle }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(DescriptionViewField, { name: PageMetaFields.seoDescription })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          InputField,
+          {
+            name: PageMetaFields.seoTitle,
+            label: "标题",
+            labelPlacement: "outside",
+            placeholder: "请输入SEO标题"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          TextareaField,
+          {
+            name: PageMetaFields.seoKeywords,
+            label: "关键词",
+            minRows: 2,
+            labelPlacement: "outside",
+            placeholder: "请输入SEO关键词"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          TextareaField,
+          {
+            name: PageMetaFields.seoDescription,
+            label: "描述",
+            labelPlacement: "outside",
+            placeholder: "请输入SEO描述",
+            minRows: 3
+          }
+        )
+      ]
+    }
+  ) });
 }
 function SNSPanel(props) {
   const { hidden } = props;
   const webSite = useWebsite();
-  const [page, setEditingPage] = useRecoilState(editingPageState);
-  const setChanged = useSetRecoilState(contentChangedState);
-  const handleValueChange = useCallback((values) => {
-    setEditingPage(
-      (page2) => ({
-        ...page2,
-        ...values
-      })
-    );
-    setChanged(true);
-  }, [setChanged, setEditingPage]);
-  const initialValue = useMemo(() => ({
-    [PageAssciations.ogImage]: page == null ? void 0 : page.ogImage,
-    [PageFields.ogTitle]: (page == null ? void 0 : page.ogTitle) || "",
-    [PageFields.ogDescription]: (page == null ? void 0 : page.ogDescription) || ""
-  }), [page]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+  const doc = useDocument();
+  const pageConfig = doc == null ? void 0 : doc.getConfig();
+  const pageMeta = pageConfig == null ? void 0 : pageConfig.pageMeta;
+  const handleValueChange = useCallback(
+    (values) => {
+      doc.setConfig({
+        ...pageConfig || {},
+        pageMeta: { ...pageConfig == null ? void 0 : pageConfig.pageMeta, ...values }
+      });
+    },
+    [doc, pageConfig]
+  );
+  const initialValue = useMemo(
+    () => ({
+      [PageMetaAssciations.ogImage]: pageMeta == null ? void 0 : pageMeta.ogImage,
+      [PageMetaFields.ogTitle]: (pageMeta == null ? void 0 : pageMeta.ogTitle) || "",
+      [PageMetaFields.ogDescription]: (pageMeta == null ? void 0 : pageMeta.ogDescription) || ""
+    }),
+    [pageMeta == null ? void 0 : pageMeta.ogDescription, pageMeta == null ? void 0 : pageMeta.ogImage, pageMeta == null ? void 0 : pageMeta.ogTitle]
+  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(LeftPanel, { className: "p-4", hidden, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
     Form,
     {
+      className: "flex-1 flex flex-col gap-4",
       initialValue,
       onValueChange: handleValueChange,
-      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        LeftPanel,
-        {
-          className: "p-4",
-          hidden,
-          children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              MediaSingleSelectField,
-              {
-                name: PageAssciations.ogImage,
-                label: "图片",
-                websiteId: webSite == null ? void 0 : webSite.id,
-                className: "aspect-[16/6]",
-                classNames: {
-                  base: "flex-col"
-                },
-                width: "1200",
-                height: "630",
-                mediaTypes: [MediaType.image]
-              }
-            ),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              InputField,
-              {
-                name: PageFields.ogTitle,
-                label: "标题",
-                labelPlacement: "outside",
-                placeholder: "请输入社媒标题"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              TextareaField,
-              {
-                name: PageFields.ogDescription,
-                label: "描述",
-                minRows: 3,
-                labelPlacement: "outside",
-                placeholder: "请输入社媒描述"
-              }
-            )
-          ]
-        }
-      )
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          MediaSingleSelectField,
+          {
+            name: PageMetaAssciations.ogImage,
+            label: "图片",
+            websiteId: webSite == null ? void 0 : webSite.id,
+            className: "aspect-[16/6]",
+            classNames: {
+              base: "flex-col"
+            },
+            width: "1200",
+            height: "630",
+            mediaTypes: [MediaType.image]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          InputField,
+          {
+            name: PageMetaFields.ogTitle,
+            label: "标题",
+            labelPlacement: "outside",
+            placeholder: "请输入社媒标题"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          TextareaField,
+          {
+            name: PageMetaFields.ogDescription,
+            label: "描述",
+            minRows: 3,
+            labelPlacement: "outside",
+            placeholder: "请输入社媒描述"
+          }
+        )
+      ]
     }
-  );
+  ) });
 }
 function LeftDrawerPannels() {
   const drawerType = useRecoilValue(drawerTypeState);
@@ -15925,436 +16317,172 @@ function ComponentModal(props) {
             labelPlacement: "outside",
             placeholder: "请输入顺序"
           }
-        )
-      ] })
-    }
-  );
-}
-function useRegisterComponent(component) {
-  const [rxProps, setRxProps] = React__default.useState();
-  const engine = useDesignerEngine();
-  const editingComponent = useRecoilValue(editingComponentState);
-  useEffect(() => {
-    var _a;
-    if (engine && (editingComponent == null ? void 0 : editingComponent.id) !== component.id && component.name) {
-      const newSlots = {};
-      const { children: childrenSlotNode, ...namedSlots } = component.slots || {};
-      for (const key in namedSlots) {
-        newSlots[key] = { ...namedSlots[key], componentName: slotContentName };
-      }
-      engine.getResourceManager().registerResources({
-        name: component.name,
-        title: component.title,
-        elements: [
-          {
-            componentName: component.name,
-            props: {
-              //默认属性配置
-              ...component.testConfig
-            },
-            //默认slots
-            slots: newSlots,
-            children: childrenSlotNode == null ? void 0 : childrenSlotNode.children
-          }
-        ]
-      });
-      const props = (_a = engine.getResourceManager().getResourceByName(component.name)) == null ? void 0 : _a.rxProps;
-      if (props) {
-        setRxProps(props);
-      }
-      return () => {
-        if (component.name) {
-          engine.getResourceManager().unregisterResources(component.name);
-        }
-      };
-    }
-  }, [component, editingComponent == null ? void 0 : editingComponent.id, engine]);
-  return rxProps;
-}
-function ComponentNode(props) {
-  const { component, readonly, selectedId, onSelect } = props;
-  const [open, setOpen] = React__default.useState(false);
-  const [remove, { isMutating }] = useRemoveRow();
-  const edit = useEditRow();
-  const rxProps = useRegisterComponent(component);
-  const handleOpenChange = React__default.useCallback((open2) => {
-    setOpen(open2);
-  }, []);
-  const handleDesign = React__default.useCallback(() => {
-    onSelect == null ? void 0 : onSelect(component.id || null);
-  }, [onSelect, component.id]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    LeafNode,
-    {
-      fiexdAction: open || isMutating,
-      hover: open || isMutating,
-      icon: /* @__PURE__ */ jsxRuntimeExports.jsx(AstroIcon, { className: "size-4 mt-1" }),
-      className: "text-sm",
-      selected: selectedId === component.id,
-      actions: !readonly && /* @__PURE__ */ jsxRuntimeExports.jsxs(Dropdown, { onOpenChange: handleOpenChange, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownTrigger, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Button$1,
-          {
-            isLoading: isMutating,
-            isIconOnly: true,
-            variant: "light",
-            size: "sm",
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-              Icon,
-              {
-                icon: "mdi:more-horiz",
-                className: "size-5 text-default-600"
-              }
-            )
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(DropdownMenu, { "aria-label": "Actions", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            DropdownItem,
-            {
-              onPress: handleDesign,
-              startContent: /* @__PURE__ */ jsxRuntimeExports.jsx(DesignIcon, { className: "size-4" }),
-              children: "设计"
-            },
-            "design"
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            DropdownItem,
-            {
-              startContent: /* @__PURE__ */ jsxRuntimeExports.jsx(EditIcon, { className: "size-4" }),
-              showDivider: true,
-              onPress: edit,
-              children: "编辑"
-            },
-            "edit"
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            DropdownItem,
-            {
-              color: "danger",
-              startContent: /* @__PURE__ */ jsxRuntimeExports.jsx(RemoveIcon, { className: "size-4" }),
-              onPress: () => remove(),
-              children: "删除"
-            },
-            "remove"
-          )
-        ] })
-      ] }),
-      ...rxProps,
-      children: component.title || component.name
-    }
-  );
-}
-function ComponentList(props) {
-  var _a;
-  const { themeId, readonly, list, category, newComponent, noCagegory, selectedId, onSelect, onClearNewComponent } = props;
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    EntityListScope,
-    {
-      entityName: FrontComponentEntityName,
-      data: list,
-      children: [
-        (_a = list == null ? void 0 : list.items) == null ? void 0 : _a.map((item) => {
-          return /* @__PURE__ */ jsxRuntimeExports.jsx(EntityRowScope, { row: item, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            ComponentNode,
-            {
-              component: item,
-              readonly,
-              selectedId,
-              categoryId: category == null ? void 0 : category.id,
-              onSelect
-            }
-          ) }, item.id);
-        }),
-        !readonly && /* @__PURE__ */ jsxRuntimeExports.jsx(
-          ComponentModal,
-          {
-            themeId,
-            value: newComponent,
-            noCagegory,
-            onClose: onClearNewComponent,
-            categoryId: category == null ? void 0 : category.id
-          }
-        )
-      ]
-    }
-  );
-}
-function ComponentsSkeletons() {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "space-y-4", children: Array.from({ length: 6 }).map((_2, index) => /* @__PURE__ */ jsxRuntimeExports.jsx("li", { className: "flex items-center py-0.5", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "w-full h-12 rounded-md" }) }, index)) }) });
-}
-const IMPORT_COMPONENTS_KEY = "import-components";
-function useComponentsImportTask(categoryId) {
-  const theme = useStudioTheme();
-  const lang = useCurrentLang();
-  const components = useFrontComponents();
-  const appKey = (theme == null ? void 0 : theme.id) || "";
-  const taskState = useInprogressTaskByKey(
-    IMPORT_COMPONENTS_KEY + (categoryId || ""),
-    appKey
-  );
-  const setTask = useUpdateTask(appKey);
-  const setTaskRef = useRef(setTask);
-  setTaskRef.current = setTask;
-  const entifyClient = useCreateEntityClient();
-  const task = taskState && taskState.status !== "done" ? taskPool[taskState.taskId] : void 0;
-  const aiUrl = useAiUrl();
-  const handleTaskChange = useCallback((data) => {
-    setTaskRef.current(data);
-  }, []);
-  const importComponents = useCallback(
-    (ids, categoryId2, needTranslate) => {
-      if (!(theme == null ? void 0 : theme.id)) {
-        console.error("没设置Theme");
-        return;
-      }
-      if (!entifyClient) {
-        console.error("entifyClient 创建失败");
-        return;
-      }
-      if (!aiUrl) {
-        console.error("没设置aiUrl");
-        return;
-      }
-      const task2 = new ImportComponentsTask(
-        {
-          key: IMPORT_COMPONENTS_KEY + (categoryId2 || ""),
-          ids,
-          entifyClient,
-          needTranslate,
-          themeId: theme == null ? void 0 : theme.id,
-          lang,
-          aiUrl,
-          categoryId: categoryId2
-        },
-        components || []
-      );
-      taskPool[task2.id] = task2;
-      task2.onDataChange(handleTaskChange);
-      task2.start();
-    },
-    [aiUrl, entifyClient, handleTaskChange, lang, components, theme == null ? void 0 : theme.id]
-  );
-  return { taskState, importComponents, task };
-}
-function ImportComponentModal({
-  categoryId,
-  open,
-  onClose
-}) {
-  const [selection, setSelections] = useState([]);
-  const [confirmTitle, setConfirmTitle] = useState(
-    void 0
-  );
-  const baseThemeId = useBaseLangThemeId();
-  const isBaseTheme = useIsBaseLangTheme();
-  const parentTheme = useParentTheme();
-  const themeComs = useFrontComponents();
-  const { taskState, importComponents, task } = useComponentsImportTask(
-    categoryId || ""
-  );
-  useEffect(() => {
-    var _a;
-    setSelections == null ? void 0 : setSelections(((_a = taskState == null ? void 0 : taskState.data) == null ? void 0 : _a.ids) || []);
-  }, [setSelections, taskState == null ? void 0 : taskState.data]);
-  useEffect(() => {
-    if ((taskState == null ? void 0 : taskState.status) === "done") {
-      setSelections == null ? void 0 : setSelections([]);
-    }
-  }, [setSelections, taskState]);
-  const confirmResolveRef = useRef();
-  const { data: baseTheme, isLoading } = useOneThemeById(
-    baseThemeId || void 0,
-    new ThemeQueryOptions([ThemeFields.id, ThemeFields.name]).componentCategories([
-      ComponentCategoryFields.id,
-      ComponentCategoryFields.name
-    ]).components(
-      new FrontComponentQueryOptions([
-        FrontComponentFields.id,
-        FrontComponentFields.name,
-        FrontComponentFields.title,
-        FrontComponentFields.code,
-        FrontComponentFields.props,
-        FrontComponentFields.testConfig
-      ]).category()
-    )
+        )
+      ] })
+    }
   );
-  const categories = useMemo(() => {
-    return !isBaseTheme ? (baseTheme == null ? void 0 : baseTheme.componentCategories) || [] : (parentTheme == null ? void 0 : parentTheme.componentCategories) || [];
-  }, [
-    baseTheme == null ? void 0 : baseTheme.componentCategories,
-    parentTheme == null ? void 0 : parentTheme.componentCategories,
-    isBaseTheme
-  ]);
-  const components = useMemo(() => {
-    return !isBaseTheme ? (baseTheme == null ? void 0 : baseTheme.components) || [] : (parentTheme == null ? void 0 : parentTheme.components) || [];
-  }, [baseTheme == null ? void 0 : baseTheme.components, parentTheme == null ? void 0 : parentTheme.components, isBaseTheme]);
-  const noCategoryComponents = useMemo(() => {
-    return components.filter((component) => {
-      var _a;
-      return !((_a = component.category) == null ? void 0 : _a.id);
-    });
-  }, [components]);
-  const handleToggleSelect = React__default.useCallback((id) => {
-    setSelections((prev) => {
-      if (prev.includes(id)) {
-        return prev.filter((item) => item !== id);
-      } else {
-        return [...prev, id];
+}
+function useRegisterComponent(component) {
+  const [rxProps, setRxProps] = React__default.useState();
+  const engine = useDesignerEngine();
+  const editingComponent = useRecoilValue(editingComponentState);
+  useEffect(() => {
+    var _a;
+    if (engine && (editingComponent == null ? void 0 : editingComponent.id) !== component.id && component.name) {
+      const newSlots = {};
+      const { children: childrenSlotNode, ...namedSlots } = component.slots || {};
+      for (const key in namedSlots) {
+        newSlots[key] = { ...namedSlots[key], componentName: slotContentName };
       }
-    });
-  }, []);
-  const handleConfirm = useCallback(() => {
-    setConfirmTitle(void 0);
-    if (confirmResolveRef.current) {
-      confirmResolveRef.current(true);
-      confirmResolveRef.current = void 0;
-    }
-  }, []);
-  const confirmOverride = useCallback(async (count) => {
-    setConfirmTitle(`${count} 个组件已存在，要全部覆盖吗？`);
-    return new Promise((resolve) => {
-      confirmResolveRef.current = resolve;
-    });
-  }, []);
-  const handleImport = useCallback(async () => {
-    const comsToImport = components.filter(
-      (c) => selection.includes(c.id || "")
-    );
-    const existings = themeComs == null ? void 0 : themeComs.filter(
-      (c) => comsToImport == null ? void 0 : comsToImport.find((com) => c.name === com.name)
-    );
-    if (existings == null ? void 0 : existings.length) {
-      const result = await confirmOverride(existings.length);
-      if (!result) {
-        return;
+      engine.getResourceManager().registerResources({
+        name: component.name,
+        title: component.title,
+        elements: [
+          {
+            componentName: component.name,
+            props: {
+              //默认属性配置
+              ...component.testConfig
+            },
+            //默认slots
+            slots: newSlots,
+            children: childrenSlotNode == null ? void 0 : childrenSlotNode.children
+          }
+        ]
+      });
+      const props = (_a = engine.getResourceManager().getResourceByName(component.name)) == null ? void 0 : _a.rxProps;
+      if (props) {
+        setRxProps(props);
       }
+      return () => {
+        if (component.name) {
+          engine.getResourceManager().unregisterResources(component.name);
+        }
+      };
     }
-    importComponents(selection, categoryId || void 0, !isBaseTheme);
-  }, [
-    categoryId,
-    components,
-    confirmOverride,
-    importComponents,
-    isBaseTheme,
-    selection,
-    themeComs
-  ]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Modal, { isOpen: open, onClose, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(ModalOverlay, { className: "z-10" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      ModalContent,
-      {
-        className: "h-[80vh] shadow-lg border border-divider z-10",
-        width: 600,
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(ModalHeader, { className: "pr-3", children: [
-            "转入组件",
-            /* @__PURE__ */ jsxRuntimeExports.jsx(ModalClose, {})
-          ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Divider, {}),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(ModalBody, { className: "flex-1 overflow-y-auto min-h-0 p-2", children: isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(ComponentsSkeletons, {}) : /* @__PURE__ */ jsxRuntimeExports.jsxs(TreeView, { children: [
-            categories == null ? void 0 : categories.map((category) => /* @__PURE__ */ jsxRuntimeExports.jsx(GroupNode, { title: category.name, icon: false, children: components.filter(
-              (component) => {
-                var _a;
-                return ((_a = component.category) == null ? void 0 : _a.id) === category.id;
-              }
-            ).map((component) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-              LeafNode,
-              {
-                icon: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  Checkbox,
-                  {
-                    isSelected: selection.includes(component.id || ""),
-                    onValueChange: () => handleToggleSelect(component.id || "")
-                  }
-                ),
-                onClick: () => handleToggleSelect(component.id || ""),
-                children: component.title || component.name
-              },
-              component.id
-            )) }, category.id)),
-            noCategoryComponents.map((component) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-              LeafNode,
+  }, [component, editingComponent == null ? void 0 : editingComponent.id, engine]);
+  return rxProps;
+}
+function ComponentNode(props) {
+  const { component, readonly, selectedId, onSelect } = props;
+  const [open, setOpen] = React__default.useState(false);
+  const [remove, { isMutating }] = useRemoveRow();
+  const edit = useEditRow();
+  const rxProps = useRegisterComponent(component);
+  const handleOpenChange = React__default.useCallback((open2) => {
+    setOpen(open2);
+  }, []);
+  const handleDesign = React__default.useCallback(() => {
+    onSelect == null ? void 0 : onSelect(component.id || null);
+  }, [onSelect, component.id]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    LeafNode,
+    {
+      fiexdAction: open || isMutating,
+      hover: open || isMutating,
+      icon: /* @__PURE__ */ jsxRuntimeExports.jsx(AstroIcon, { className: "size-4 mt-1" }),
+      className: "text-sm",
+      selected: selectedId === component.id,
+      actions: !readonly && /* @__PURE__ */ jsxRuntimeExports.jsxs(Dropdown, { onOpenChange: handleOpenChange, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownTrigger, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Button$1,
+          {
+            isLoading: isMutating,
+            isIconOnly: true,
+            variant: "light",
+            size: "sm",
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Icon,
               {
-                icon: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  Checkbox,
-                  {
-                    isSelected: selection.includes(component.id || ""),
-                    onValueChange: () => handleToggleSelect(component.id || "")
-                  }
-                ),
-                onClick: () => handleToggleSelect(component.id || ""),
-                children: component.title || component.name
-              },
-              component.id
-            ))
-          ] }) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Divider, {}),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(ModalFooter, { className: "justify-between", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs text-default-500 flex items-center gap-2", children: [
-              selection.length > 0 && (taskState == null ? void 0 : taskState.status) !== "in-progress" ? `${selection.length}个组件选中` : "",
-              taskState == null ? void 0 : taskState.infoMessage,
-              (taskState == null ? void 0 : taskState.status) === "in-progress" && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                Button$1,
-                {
-                  variant: "light",
-                  size: "sm",
-                  isIconOnly: true,
-                  onPress: () => {
-                    task == null ? void 0 : task.stop();
-                  },
-                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(TaskStopIcon, { className: "size-9 text-primary" })
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Button$1, { variant: "light", onPress: onClose, children: "关闭" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                Button$1,
-                {
-                  variant: "solid",
-                  color: "primary",
-                  onPress: handleImport,
-                  isLoading: (taskState == null ? void 0 : taskState.status) === "in-progress",
-                  children: "转入"
-                }
-              )
-            ] })
-          ] }),
+                icon: "mdi:more-horiz",
+                className: "size-5 text-default-600"
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(DropdownMenu, { "aria-label": "Actions", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
-            ConfirmDialog,
+            DropdownItem,
+            {
+              onPress: handleDesign,
+              startContent: /* @__PURE__ */ jsxRuntimeExports.jsx(DesignIcon, { className: "size-4" }),
+              children: "设计"
+            },
+            "design"
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            DropdownItem,
+            {
+              startContent: /* @__PURE__ */ jsxRuntimeExports.jsx(EditIcon, { className: "size-4" }),
+              showDivider: true,
+              onPress: edit,
+              children: "编辑"
+            },
+            "edit"
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            DropdownItem,
+            {
+              color: "danger",
+              startContent: /* @__PURE__ */ jsxRuntimeExports.jsx(RemoveIcon, { className: "size-4" }),
+              onPress: () => remove(),
+              children: "删除"
+            },
+            "remove"
+          )
+        ] })
+      ] }),
+      ...rxProps,
+      children: component.title || component.name
+    }
+  );
+}
+function ComponentList(props) {
+  var _a;
+  const { themeId, readonly, list, category, newComponent, noCagegory, selectedId, onSelect, onClearNewComponent } = props;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    EntityListScope,
+    {
+      entityName: FrontComponentEntityName,
+      data: list,
+      children: [
+        (_a = list == null ? void 0 : list.items) == null ? void 0 : _a.map((item) => {
+          return /* @__PURE__ */ jsxRuntimeExports.jsx(EntityRowScope, { row: item, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            ComponentNode,
             {
-              open: !!confirmTitle,
-              onClose: () => {
-                setConfirmTitle(void 0);
-                if (confirmResolveRef.current) {
-                  confirmResolveRef.current(false);
-                  confirmResolveRef.current = void 0;
-                }
-              },
-              onConfirm: handleConfirm,
-              confirm: confirmTitle
+              component: item,
+              readonly,
+              selectedId,
+              categoryId: category == null ? void 0 : category.id,
+              onSelect
             }
-          )
-        ]
-      }
-    )
-  ] });
+          ) }, item.id);
+        }),
+        !readonly && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ComponentModal,
+          {
+            themeId,
+            value: newComponent,
+            noCagegory,
+            onClose: onClearNewComponent,
+            categoryId: category == null ? void 0 : category.id
+          }
+        )
+      ]
+    }
+  );
 }
 const ComponentCategoryNode = memo(
   (props) => {
     var _a;
     const { category, themeId, readonly, selectedId, onSelect } = props;
     const [open, setOpen] = React__default.useState(false);
-    const [comModalOpen, setComModalOpen] = React__default.useState(false);
     const website = useWebsite();
     const [remove, { isMutating }] = useRemoveRow({
       onSuccess: () => {
         emitEntityChange(FrontComponentEntityName);
       }
     });
-    const { taskState } = useComponentsImportTask((category == null ? void 0 : category.id) || "");
     const [newComponent, setNewComponent] = React__default.useState();
     const edit = useEditRow();
     const components = useFrontComponents();
@@ -16384,107 +16512,87 @@ const ComponentCategoryNode = memo(
         items: componentsInCategory
       };
     }, [componentsInCategory]);
-    const running = (taskState == null ? void 0 : taskState.status) === "in-progress";
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        GroupNode,
-        {
-          title: category.name,
-          fiexdAction: open || isMutating || running,
-          icon: null,
-          classNames: {
-            title: "text-sm"
-          },
-          defaultExpanded: !!((_a = data.items) == null ? void 0 : _a.find((item) => item.id === selectedId)),
-          action: !readonly && /* @__PURE__ */ jsxRuntimeExports.jsxs(Dropdown, { onOpenChange: handleOpenChange, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownTrigger, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-              Button$1,
-              {
-                isLoading: isMutating || running,
-                isIconOnly: true,
-                variant: "light",
-                size: "sm",
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  Icon,
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      GroupNode,
+      {
+        title: category.name,
+        fiexdAction: open || isMutating,
+        icon: null,
+        classNames: {
+          title: "text-sm"
+        },
+        defaultExpanded: !!((_a = data.items) == null ? void 0 : _a.find((item) => item.id === selectedId)),
+        action: !readonly && /* @__PURE__ */ jsxRuntimeExports.jsxs(Dropdown, { onOpenChange: handleOpenChange, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownTrigger, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Button$1,
+            {
+              isLoading: isMutating,
+              isIconOnly: true,
+              variant: "light",
+              size: "sm",
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Icon,
+                {
+                  icon: "mdi:more-horiz",
+                  className: "size-5 text-default-600"
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            DropdownMenu,
+            {
+              "aria-label": "Actions",
+              disabledKeys: (website == null ? void 0 : website.id) ? void 0 : ["import"],
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  DropdownItem,
                   {
-                    icon: "mdi:more-horiz",
-                    className: "size-5 text-default-600"
-                  }
+                    startContent: /* @__PURE__ */ jsxRuntimeExports.jsx(AddIcon, { className: "size-4" }),
+                    onPress: handleNewComponent,
+                    children: "添加组件"
+                  },
+                  "add"
+                ),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  DropdownItem,
+                  {
+                    startContent: /* @__PURE__ */ jsxRuntimeExports.jsx(EditIcon, { className: "size-4" }),
+                    showDivider: true,
+                    onPress: handleEdit,
+                    children: "编辑"
+                  },
+                  "edit"
+                ),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  DropdownItem,
+                  {
+                    color: "danger",
+                    startContent: /* @__PURE__ */ jsxRuntimeExports.jsx(RemoveIcon, { className: "size-4" }),
+                    onPress: () => remove(),
+                    children: "删除"
+                  },
+                  "remove"
                 )
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs(
-              DropdownMenu,
-              {
-                "aria-label": "Actions",
-                disabledKeys: (website == null ? void 0 : website.id) ? void 0 : ["import"],
-                children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    DropdownItem,
-                    {
-                      startContent: /* @__PURE__ */ jsxRuntimeExports.jsx(AddIcon, { className: "size-4" }),
-                      onPress: handleNewComponent,
-                      children: "添加组件"
-                    },
-                    "add"
-                  ),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    DropdownItem,
-                    {
-                      startContent: /* @__PURE__ */ jsxRuntimeExports.jsx(ImportIcon, { className: "size-4" }),
-                      onPress: () => setComModalOpen(true),
-                      children: "转入组件"
-                    },
-                    "import"
-                  ),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    DropdownItem,
-                    {
-                      startContent: /* @__PURE__ */ jsxRuntimeExports.jsx(EditIcon, { className: "size-4" }),
-                      showDivider: true,
-                      onPress: handleEdit,
-                      children: "编辑"
-                    },
-                    "edit"
-                  ),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    DropdownItem,
-                    {
-                      color: "danger",
-                      startContent: /* @__PURE__ */ jsxRuntimeExports.jsx(RemoveIcon, { className: "size-4" }),
-                      onPress: () => remove(),
-                      children: "删除"
-                    },
-                    "remove"
-                  )
-                ]
-              }
-            )
-          ] }),
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            ComponentList,
-            {
-              category,
-              themeId,
-              readonly,
-              list: data,
-              newComponent,
-              selectedId,
-              onSelect,
-              onClearNewComponent: () => setNewComponent(void 0)
+              ]
             }
           )
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        ImportComponentModal,
-        {
-          open: comModalOpen,
-          categoryId: category.id,
-          onClose: () => setComModalOpen(false)
-        }
-      )
-    ] });
+        ] }),
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ComponentList,
+          {
+            category,
+            themeId,
+            readonly,
+            list: data,
+            newComponent,
+            selectedId,
+            onSelect,
+            onClearNewComponent: () => setNewComponent(void 0)
+          }
+        )
+      }
+    ) });
   }
 );
 function ComponentCategoryList(props) {
@@ -16948,53 +17056,318 @@ function MaterialNodeView(props) {
     }
   );
 }
-function WebComponents() {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: resourceTreeNodes.map((node) => {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(MaterialNodeView, { node }, node.title);
-  }) });
-}
-function ComponentCategoryModal(props) {
-  const { themeId, onClose } = props;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    EntityEditModal,
-    {
-      entityName: ComponentCategoryEntityName,
-      entityLabel: "组件分类",
-      initialValue: {
-        theme: { id: themeId }
-      },
-      classNames: {
-        content: "max-w-sm"
-      },
-      entityToInput: componentCategoryToInput,
-      onClose,
-      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-4", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          InputField,
-          {
-            name: "name",
-            label: "名称",
-            validateSchema: {
-              type: "string",
-              required: true
-            },
-            labelPlacement: "outside",
-            placeholder: "请输入名称"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          InputField,
-          {
-            name: "seqValue",
-            label: "顺序",
-            type: "number",
-            labelPlacement: "outside",
-            placeholder: "请输入顺序"
-          }
-        )
-      ] })
+function WebComponents() {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: resourceTreeNodes.map((node) => {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(MaterialNodeView, { node }, node.title);
+  }) });
+}
+function ComponentCategoryModal(props) {
+  const { themeId, onClose } = props;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    EntityEditModal,
+    {
+      entityName: ComponentCategoryEntityName,
+      entityLabel: "组件分类",
+      initialValue: {
+        theme: { id: themeId }
+      },
+      classNames: {
+        content: "max-w-sm"
+      },
+      entityToInput: componentCategoryToInput,
+      onClose,
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          InputField,
+          {
+            name: "name",
+            label: "名称",
+            validateSchema: {
+              type: "string",
+              required: true
+            },
+            labelPlacement: "outside",
+            placeholder: "请输入名称"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          InputField,
+          {
+            name: "seqValue",
+            label: "顺序",
+            type: "number",
+            labelPlacement: "outside",
+            placeholder: "请输入顺序"
+          }
+        )
+      ] })
+    }
+  );
+}
+function ComponentsSkeletons() {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "space-y-4", children: Array.from({ length: 6 }).map((_2, index) => /* @__PURE__ */ jsxRuntimeExports.jsx("li", { className: "flex items-center py-0.5", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "w-full h-12 rounded-md" }) }, index)) }) });
+}
+const IMPORT_COMPONENTS_KEY = "import-components";
+function useComponentsImportTask() {
+  const theme = useStudioTheme();
+  const lang = useCurrentLang();
+  const components = useFrontComponents();
+  const appKey = (theme == null ? void 0 : theme.id) || "";
+  const taskState = useInprogressTaskByKey(IMPORT_COMPONENTS_KEY, appKey);
+  const setTask = useUpdateTask(appKey);
+  const setTaskRef = useRef(setTask);
+  setTaskRef.current = setTask;
+  const entifyClient = useCreateEntityClient();
+  const task = taskState && taskState.status !== "done" ? taskPool[taskState.taskId] : void 0;
+  const aiUrl = useAiUrl();
+  const componentCategories = useComponentCategories();
+  const handleTaskChange = useCallback((data) => {
+    setTaskRef.current(data);
+  }, []);
+  const importComponents = useCallback(
+    (ids, needTranslate) => {
+      if (!(theme == null ? void 0 : theme.id)) {
+        console.error("没设置Theme");
+        return;
+      }
+      if (!entifyClient) {
+        console.error("entifyClient 创建失败");
+        return;
+      }
+      if (!aiUrl) {
+        console.error("没设置aiUrl");
+        return;
+      }
+      const task2 = new ImportComponentsTask(
+        {
+          key: IMPORT_COMPONENTS_KEY,
+          ids,
+          entifyClient,
+          needTranslate,
+          themeId: theme == null ? void 0 : theme.id,
+          lang,
+          aiUrl
+          //categoryId,
+        },
+        components || [],
+        (componentCategories == null ? void 0 : componentCategories.items) || []
+      );
+      taskPool[task2.id] = task2;
+      task2.onDataChange(handleTaskChange);
+      task2.start();
+    },
+    [
+      theme == null ? void 0 : theme.id,
+      entifyClient,
+      aiUrl,
+      lang,
+      components,
+      componentCategories,
+      handleTaskChange
+    ]
+  );
+  return { taskState, importComponents, task };
+}
+function ImportComponentModal({
+  open,
+  onClose
+}) {
+  const [selection, setSelections] = useState([]);
+  const [confirmTitle, setConfirmTitle] = useState(
+    void 0
+  );
+  const baseThemeId = useBaseLangThemeId();
+  const isBaseTheme = useIsBaseLangTheme();
+  const parentTheme = useParentTheme();
+  const themeComs = useFrontComponents();
+  const { taskState, importComponents, task } = useComponentsImportTask();
+  useEffect(() => {
+    var _a;
+    setSelections == null ? void 0 : setSelections(((_a = taskState == null ? void 0 : taskState.data) == null ? void 0 : _a.ids) || []);
+  }, [setSelections, taskState == null ? void 0 : taskState.data]);
+  useEffect(() => {
+    if ((taskState == null ? void 0 : taskState.status) === "done") {
+      setSelections == null ? void 0 : setSelections([]);
     }
+  }, [setSelections, taskState]);
+  const confirmResolveRef = useRef();
+  const { data: baseTheme, isLoading } = useOneThemeById(
+    baseThemeId || void 0,
+    new ThemeQueryOptions([ThemeFields.id, ThemeFields.name]).componentCategories([
+      ComponentCategoryFields.id,
+      ComponentCategoryFields.name
+    ]).components(
+      new FrontComponentQueryOptions([
+        FrontComponentFields.id,
+        FrontComponentFields.name,
+        FrontComponentFields.title,
+        FrontComponentFields.code,
+        FrontComponentFields.props,
+        FrontComponentFields.testConfig
+      ]).category()
+    )
   );
+  const categories = useMemo(() => {
+    return !isBaseTheme ? (baseTheme == null ? void 0 : baseTheme.componentCategories) || [] : (parentTheme == null ? void 0 : parentTheme.componentCategories) || [];
+  }, [
+    baseTheme == null ? void 0 : baseTheme.componentCategories,
+    parentTheme == null ? void 0 : parentTheme.componentCategories,
+    isBaseTheme
+  ]);
+  const components = useMemo(() => {
+    return !isBaseTheme ? (baseTheme == null ? void 0 : baseTheme.components) || [] : (parentTheme == null ? void 0 : parentTheme.components) || [];
+  }, [baseTheme == null ? void 0 : baseTheme.components, parentTheme == null ? void 0 : parentTheme.components, isBaseTheme]);
+  const noCategoryComponents = useMemo(() => {
+    return components.filter((component) => {
+      var _a;
+      return !((_a = component.category) == null ? void 0 : _a.id);
+    });
+  }, [components]);
+  const handleToggleSelect = React__default.useCallback((id) => {
+    setSelections((prev) => {
+      if (prev.includes(id)) {
+        return prev.filter((item) => item !== id);
+      } else {
+        return [...prev, id];
+      }
+    });
+  }, []);
+  const handleConfirm = useCallback(() => {
+    setConfirmTitle(void 0);
+    if (confirmResolveRef.current) {
+      confirmResolveRef.current(true);
+      confirmResolveRef.current = void 0;
+    }
+  }, []);
+  const confirmOverride = useCallback(async (count) => {
+    setConfirmTitle(`${count} 个组件已存在，要全部覆盖吗？`);
+    return new Promise((resolve) => {
+      confirmResolveRef.current = resolve;
+    });
+  }, []);
+  const handleImport = useCallback(async () => {
+    const comsToImport = components.filter(
+      (c) => selection.includes(c.id || "")
+    );
+    const existings = themeComs == null ? void 0 : themeComs.filter(
+      (c) => comsToImport == null ? void 0 : comsToImport.find((com) => c.name === com.name)
+    );
+    if (existings == null ? void 0 : existings.length) {
+      const result = await confirmOverride(existings.length);
+      if (!result) {
+        return;
+      }
+    }
+    importComponents(selection, !isBaseTheme);
+  }, [
+    components,
+    confirmOverride,
+    importComponents,
+    isBaseTheme,
+    selection,
+    themeComs
+  ]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Modal, { isOpen: open, onClose, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(ModalOverlay, { className: "z-10" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      ModalContent,
+      {
+        className: "h-[80vh] shadow-lg border border-divider z-10",
+        width: 600,
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(ModalHeader, { className: "pr-3", children: [
+            "转入组件",
+            /* @__PURE__ */ jsxRuntimeExports.jsx(ModalClose, {})
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Divider, {}),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(ModalBody, { className: "flex-1 overflow-y-auto min-h-0 p-2", children: isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(ComponentsSkeletons, {}) : /* @__PURE__ */ jsxRuntimeExports.jsxs(TreeView, { children: [
+            categories == null ? void 0 : categories.map((category) => /* @__PURE__ */ jsxRuntimeExports.jsx(GroupNode, { title: category.name, icon: false, children: components.filter(
+              (component) => {
+                var _a;
+                return ((_a = component.category) == null ? void 0 : _a.id) === category.id;
+              }
+            ).map((component) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+              LeafNode,
+              {
+                icon: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  Checkbox,
+                  {
+                    isSelected: selection.includes(component.id || ""),
+                    onValueChange: () => handleToggleSelect(component.id || "")
+                  }
+                ),
+                onClick: () => handleToggleSelect(component.id || ""),
+                children: component.title || component.name
+              },
+              component.id
+            )) }, category.id)),
+            noCategoryComponents.map((component) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+              LeafNode,
+              {
+                icon: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  Checkbox,
+                  {
+                    isSelected: selection.includes(component.id || ""),
+                    onValueChange: () => handleToggleSelect(component.id || "")
+                  }
+                ),
+                onClick: () => handleToggleSelect(component.id || ""),
+                children: component.title || component.name
+              },
+              component.id
+            ))
+          ] }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Divider, {}),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(ModalFooter, { className: "justify-between", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-xs text-default-500 flex items-center gap-2", children: [
+              selection.length > 0 && (taskState == null ? void 0 : taskState.status) !== "in-progress" ? `${selection.length}个组件选中` : "",
+              taskState == null ? void 0 : taskState.infoMessage,
+              (taskState == null ? void 0 : taskState.status) === "in-progress" && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Button$1,
+                {
+                  variant: "light",
+                  size: "sm",
+                  isIconOnly: true,
+                  onPress: () => {
+                    task == null ? void 0 : task.stop();
+                  },
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(TaskStopIcon, { className: "size-9 text-primary" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Button$1, { variant: "light", onPress: onClose, children: "关闭" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Button$1,
+                {
+                  variant: "solid",
+                  color: "primary",
+                  onPress: handleImport,
+                  isLoading: (taskState == null ? void 0 : taskState.status) === "in-progress",
+                  children: "转入"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            ConfirmDialog,
+            {
+              open: !!confirmTitle,
+              onClose: () => {
+                setConfirmTitle(void 0);
+                if (confirmResolveRef.current) {
+                  confirmResolveRef.current(false);
+                  confirmResolveRef.current = void 0;
+                }
+              },
+              onConfirm: handleConfirm,
+              confirm: confirmTitle
+            }
+          )
+        ]
+      }
+    )
+  ] });
 }
 function ComponentsRootNode(props) {
   const { themeId, readonly, selectedContent, onSelectContent } = props;
@@ -17805,6 +18178,15 @@ function MoreActions() {
           },
           ThemeConfigType.WebsiteInfo
         ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          DropdownItem,
+          {
+            startContent: /* @__PURE__ */ jsxRuntimeExports.jsx(FavouriteIcon, { className: "size-5" }),
+            onPress: () => setConfigType(ThemeConfigType.Favicon),
+            children: "站点图标"
+          },
+          "favicon"
+        ),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           DropdownItem,
           {