plain-design 1.0.0-beta.16 → 1.0.0-beta.160

package/src/packages/components/Table/table/use/useTableMethods.tsx

@@ -1,7 +1,7 @@
 import {getPlcDisplayValue, tPlc} from "../../plc/utils/plc.utils";
 import {createTableNode, iTableNode} from "../utils/table.utils";
-import {toRaw} from "plain-design-composition";
-import {PlainObject} from "plain-utils/utils/event";
+import {toRaw} from "@peryl/react-compose";
+import {PlainObject} from "@peryl/utils/event";
 import {iFormValidator} from "../../../Form/validate/createValidation";
 
 export function useTableMethods(

package/src/packages/components/Table/table/use/useTableModifyEditor.tsx

@@ -1,11 +1,11 @@
 import {iTableNode, iTablePropsType} from "../utils/table.utils";
 import {iTableHooks} from "../utils/createTableHooks";
 import {PlcValidatePropsOption, tPlc} from "../../plc/utils/plc.utils";
-import {createEffects} from "plain-utils/utils/createEffects";
-import {PlainObject} from "plain-utils/utils/event";
-import {computed, reactive, RenderNode, useRefs} from "plain-design-composition";
+import {createEffects} from "@peryl/utils/createEffects";
+import {PlainObject} from "@peryl/utils/event";
+import {computed, onBeforeUnmount, reactive, RenderNode, useRefs} from "@peryl/react-compose";
 import {Dialog} from "../../../Dialog";
-import {delay} from "plain-utils/utils/delay";
+import {delay} from "@peryl/utils/delay";
 import {Table} from "../Table";
 import {Plc} from "../../../Plc";
 import {Form} from "../../../Form";
@@ -15,7 +15,7 @@ import {useCellValue} from "../body/useCellValue";
 import {iTableMethods} from "./useTableMethods";
 import {PlcCheck} from "../../standard/PlcCheck/PlcCheck";
 import $message from "../../../$message";
-import {pick} from "../../../../utils/pick";
+import {pick} from "@peryl/utils/pick";
 import i18n from "../../../i18n";
 
 /**
@@ -64,17 +64,19 @@ export function useTableModifyEditor(
    * @author  韦胜健
    * @date    2022/12/5 20:45
    */
+  const { effects: cellBodyArrayEffects } = createEffects();
+  effects.push(() => cellBodyArrayEffects.clear());
   const cellBodyArray = computed(() => {
     if (!state.optionGetter) {return [];}
     const { node } = state;
     if (!node) {return [];}
-    return availablePlcList.value.map(i => useCellValue({ optionGetter: () => ({ plc: i.getPlc(), node }), formEdit: true }));
+    return availablePlcList.value.map(i => useCellValue({ optionGetter: () => ({ plc: i.getPlc(), node }), formEdit: true, effects: cellBodyArrayEffects }));
   });
 
   const handler = {
     handleConfirm: async () => {
       if (!state.node) {
-        $message.warn(i18n('table.pleaseClickNext').d('请点击下一步'));
+        $message.warn(i18n.$it('table.pleaseClickNext').d('请点击下一步'));
         return Promise.reject('next step');
       }
       await refs.form?.validate();
@@ -92,10 +94,10 @@ export function useTableModifyEditor(
         <>
           <Table data={availablePlcList.value}>
             <PlcCheck field="index" v-model={state.modifyPlcIndexList} toggleOnClickRow/>
-            <Plc title={i18n('table.columnTitle').d('列标题')} field="title"/>
+            <Plc title={i18n.$it('table.columnTitle').d('列标题')} field="title"/>
           </Table>
           <div className="table-modify-dialog-operations">
-            <Button label={i18n('base.nextStep').d('下一步')} onClick={utils.renderModifyForm}/>
+            <Button label={i18n.$it('base.nextStep').d('下一步')} onClick={utils.renderModifyForm}/>
           </div>
         </>
       );
@@ -118,12 +120,13 @@ export function useTableModifyEditor(
               const validateAttrs = pick(plc.props, Object.keys(PlcValidatePropsOption) as (keyof typeof PlcValidatePropsOption)[]);
               return (
                 <FormItem
+                  key={index}
                   label={plc.props.formLabel || plc.props.title}
                   field={plc.props.field}
                   required={plc.props.required}
                   rules={plc.props.rules}
                   validator={plc.props.validator}
-                  key={index}
+                  tip={plc.props.tip}
                   disabled={!editable}
                   {...validateAttrs}
                 >
@@ -133,8 +136,8 @@ export function useTableModifyEditor(
             })}
           </Form>
           <div className="table-modify-dialog-operations">
-            <Button label={i18n('base.prevStep').d('上一步')} onClick={utils.renderSelectPlcList}/>
-            <Button label={i18n('base.edit.done').d('完成')} mode="fill" onClick={handler.handleConfirm}/>
+            <Button label={i18n.$it('base.prevStep').d('上一步')} onClick={utils.renderSelectPlcList}/>
+            <Button label={i18n.$it('base.edit.done').d('完成')} mode="fill" onClick={handler.handleConfirm}/>
           </div>
         </>
       );
@@ -142,6 +145,7 @@ export function useTableModifyEditor(
     initialize: (() => {
       let hasInitialized = false;
       return () => {
+        /*已经初始化过就不用再初始化了*/
         if (hasInitialized) {return;}
         hasInitialized = true;
         effects.push(hooks.onRender.use(
@@ -150,7 +154,7 @@ export function useTableModifyEditor(
             render: () => {
               const option = state.optionGetter?.();
               if (!option) {return null;}
-              const title = option.title || i18n('table.batchModify').d('批量修改');
+              const title = option.title || i18n.$it('table.batchModify').d('批量修改');
               const plcList = option.plcList || getFlatPlcList();
               if (!plcList) {return null;}
               return (
@@ -187,6 +191,8 @@ export function useTableModifyEditor(
     },
   };
 
+  onBeforeUnmount(() => effects.clear());
+
   return { methods, state };
 }
 

package/src/packages/components/Table/table/use/useTableScroll.tsx

@@ -1,6 +1,6 @@
 import {PlainScroll} from "../../../Scroll";
 import VirtualTable from "../../../VirtualTable";
-import {reactive, watch} from "plain-design-composition";
+import {reactive, watch} from "@peryl/react-compose";
 
 export function useTableScroll(
   {

package/src/packages/components/Table/table/utils/createTableHooks.ts

@@ -1,7 +1,7 @@
-import {createHooks, createRenderHook, createSyncHooks, iMouseEvent, RenderNode, StyleProperties} from "plain-design-composition";
-import {tPlcType} from "../../plc/utils/plc.utils";
-import {iTableNode} from "./table.utils";
-import {PlainObject} from "plain-utils/utils/event";
+import {createHooks, createRenderHook, createSyncHooks, iMouseEvent, RenderNode, StyleProperties} from "@peryl/react-compose";
+import {tPlc, tPlcType} from "../../plc/utils/plc.utils";
+import {iTableMessyData, iTableNode} from "./table.utils";
+import {PlainObject} from "@peryl/utils/event";
 import {VirtualTable} from "../../../VirtualTable";
 
 export const createTableHooks = () => {
@@ -19,15 +19,17 @@ export const createTableHooks = () => {
     /*是否可以开启虚拟滚动*/
     onEnableVirtual: createSyncHooks<(data: boolean) => void>(),
     /*当虚拟滚动的pageIndex变化的时候触发动作*/
-    onVirtualPageIndexChange: createHooks<(data: { pageIndex: number, start: number }) => void>(),
+    onVirtualPageIndexChange: createHooks<(data: { pageIndex: number, startIndex: number }) => void>(),
     /*点击行动作*/
     onClickRow: createHooks<(data: { e: iMouseEvent, node: iTableNode }) => void>(),
     /*双击行动作*/
     onDblclickRow: createHooks<(data: { e: iMouseEvent, node: iTableNode }) => void>(),
     /*单击单元格动作*/
-    onClickCell: createHooks<(data: { e: iMouseEvent, node: iTableNode, plc: tPlcType }) => void>(),
+    onClickCell: createHooks<(data: { e: iMouseEvent, node: iTableNode, plc: tPlc }) => void>(),
     /*双击单元格动作*/
-    onDblclickCell: createHooks<(data: { e: iMouseEvent, node: iTableNode, plc: tPlcType }) => void>(),
+    onDblclickCell: createHooks<(data: { e: iMouseEvent, node: iTableNode, plc: tPlc }) => void>(),
+    /*右击单元格动作*/
+    onContextmenuCell: createHooks<(data: { e: iMouseEvent, node: iTableNode, plc: tPlc }) => void>(),
     /*鼠标进入单元格*/
     onEnterCell: createHooks<(data: { e: iMouseEvent, node: iTableNode, plc: tPlcType }) => void>(),
     /*鼠标离开单元格*/
@@ -52,6 +54,8 @@ export const createTableHooks = () => {
     onRenderRow: createSyncHooks<(scope: { node: iTableNode, row: any, content: RenderNode }) => void>(),
     /*表格数据*/
     onData: createSyncHooks<(scope: { data: PlainObject[] | undefined }) => void>(true),
+    /*表格渲染行数据（其中的行数据不一定是tableNode）*/
+    onTableMessyData: createSyncHooks<(scope: { data: iTableMessyData[] }) => void>(true),
     /*处理行样式*/
     onRowClass: createSyncHooks<(data: { node: iTableNode, classList: any[] }) => void>(true),
     /*鼠标移动经过row时*/

package/src/packages/components/Table/table/utils/table.utils.ts

@@ -1,12 +1,12 @@
 import {StyleProps, ThemeSize} from "../../../../uses/useStyle";
-import {ComponentEvent, ExtractPropTypes, iMouseEvent, MultipleClass, PropType, reactive, StyleProperties, tSlotsType} from "plain-design-composition";
-import {PlainObject} from "plain-utils/utils/event";
+import {ComponentEvent, ExtractPropTypes, iMouseEvent, MultipleClass, PropType, reactive, RenderNode, StyleProperties, tSlotsType} from "@peryl/react-compose";
+import {PlainObject} from "@peryl/utils/event";
 import {eFormValidateTrigger, iFormValidatePropsType, iValidateResult} from "../../../Form/validate/validate.utils";
 import {tPlc, tPlcType} from "../../plc/utils/plc.utils";
 import {PlainScroll} from "../../../Scroll";
 import {tPlcCacheStateData} from "../../plc/use/usePlcPropsState";
 import {tPlcData} from "../../plc/formatPlcList";
-import {deepcopy} from "plain-utils/object/deepcopy";
+import {deepcopy} from "@peryl/utils/deepcopy";
 import {iFormValidator} from "../../../Form/validate/createValidation";
 
 /**
@@ -28,14 +28,18 @@ export const TablePropsOptions = {
   headRowHeight: { type: [String, Number] },                            // 表头行高
   bodyRowHeight: { type: [String, Number] },                            // 表体行高
   virtual: { type: Boolean },                                           // 开启虚拟行滚动
+  virtualRowType: { type: String as PropType<'virtualIndex' | 'realIndex'>, }, // 虚拟滚动的行渲染类型，virtualIndex意思为使用虚拟的行索引作为key渲染行，好处是虚拟滚动时完全复用行组件实例；realIndex意味着虚拟滚动时新的行会重新初始化
   virtualColumn: { type: Boolean },                                     // 开启虚拟列滚动
+  dynamicSize: { type: Boolean },                                       // 行虚拟滚动时启用动态高度
   colDraggable: { type: Boolean },                                      // 列是否可拖拽移动
   rowDraggable: { type: Boolean },                                      // 行是否可以拖拽移动
   sort: { type: [Object, Array] as PropType<TablePropsSort> },          // 当前排序字段
   rules: { type: Object as PropType<iFormValidatePropsType["rules"]> }, // 校验规则
+  anotherRules: { type: Object as PropType<iFormValidatePropsType["anotherRules"]> }, // 校验规则
   spanMethod: { type: Function as PropType<TablePropsSpanMethod> },     // 合并表体单元格的方法
   size: { ...StyleProps["size"] },                                      // 表格尺寸
   loading: { type: Boolean },                                           // 开启加载状态
+  formEditorFootRender: { type: Function as PropType<(formData: PlainObject) => any> },// 表单编辑器的foot渲染内容
 
   rowClassFunc: { type: Function as PropType<TablePropsRowClassFunc> },// 行 className 的计算函数
   cellClassFunc: { type: Function as PropType<TablePropsCellClassFunc> },// 单元格 className 的计算函数
@@ -90,8 +94,9 @@ export const TableEmitsOptions = {
 
   onClickRow: (node: iTableNode, e: iMouseEvent) => true,
   onDblclickRow: (node: iTableNode, e: iMouseEvent) => true,
-  onClickCell: (node: iTableNode, e: iMouseEvent) => true,
-  onDblclickCell: (node: iTableNode, e: iMouseEvent) => true,
+  onClickCell: (node: iTableNode, e: iMouseEvent, plc: tPlc) => true,
+  onDblclickCell: (node: iTableNode, e: iMouseEvent, plc: tPlc) => true,
+  onContextmenuCell: (node: iTableNode, e: iMouseEvent, plc: tPlc) => true,
   onClickHead: (plc: tPlcType, e: iMouseEvent) => true,
 
   onConfigPlc: (data: { plcList: tPlcType[], stateData: tPlcCacheStateData }) => true,
@@ -130,6 +135,9 @@ export interface iTableNode {
   saveEdit: (newRow?: PlainObject) => Promise<void>,  // 保存编辑，将editRow以及newRow（请求得到的新对象）覆盖data
 }
 
+export type iTableMessyRender = (data: { vIndex: number, vid: string }) => RenderNode
+export type iTableMessyData = iTableNode | iTableMessyRender
+
 /**
  * 创建table node节点数据
  * @author  韦胜健

package/src/packages/components/Tag/index.tsx

@@ -1,4 +1,4 @@
-import {computed, designComponent, getComponentCls, iHTMLElement, iMouseEvent, PropType, useClasses, useStyles} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, iHTMLElement, iMouseEvent, PropType, useClasses, useRefs, useStyles} from "@peryl/react-compose";
 import {ThemeSize, ThemeStatus, useStyle} from "../../uses/useStyle";
 import {iTagColor, TagColor} from "./tag.utils";
 import Icon from "../Icon";
@@ -24,6 +24,8 @@ export const Tag = designComponent({
   },
   setup({ props, event: { emit }, slots }) {
 
+    const { refs, onRef } = useRefs({ closeWrapper: {} as typeof HTMLSpanElement });
+
     const status = Object.keys(ThemeStatus);
 
     const colors = computed((): iTagColor => {
@@ -60,7 +62,10 @@ export const Tag = designComponent({
 
     const handler = {
       onClick: (e: iMouseEvent) => {
-        if (e.currentTarget === e.target) {emit.onClick(e);}
+        if (refs.closeWrapper == e.target || (!!refs.closeWrapper && refs.closeWrapper.contains(e.target as HTMLElement))) {
+          return;
+        }
+        emit.onClick(e);
       },
       onClose: (e: iMouseEvent) => emit.onClose(e),
     };
@@ -70,7 +75,7 @@ export const Tag = designComponent({
         {!!props.icon && <Icon icon={props.icon}/>}
         {!!props.loading && <Loading type="beta"/>}
         <span>{slots.default(props.label as any)}</span>
-        {!!props.closeable && <Icon icon="pi-close" onClick={handler.onClose}/>}
+        {!!props.closeable && <span ref={onRef.closeWrapper} className="tag-close-wrapper"><Icon icon="pi-close" onClick={handler.onClose}/></span>}
       </span>
     );
   },

package/src/packages/components/Tag/tag.scss

@@ -14,7 +14,7 @@
     padding: 0 4px;
   }
 
-  .#{componentName(loading)}, .#{componentName(icon)} {
+  & > .#{componentName(loading)}, & > .#{componentName(icon)}, & > .tag-close-wrapper {
     &:last-child {
       cursor: pointer;
       margin-left: 4px;
@@ -24,4 +24,13 @@
       margin-right: 4px !important;
     }
   }
+
+  .tag-close-wrapper {
+    vertical-align: middle;
+    height: 1em;
+    width: 1em;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
 }

package/src/packages/components/ThemeColor/index.tsx

@@ -0,0 +1,22 @@
+import {computed, designComponent, getComponentCls, useClasses, useStyles} from "@peryl/react-compose";
+import {getPrimaryColor} from "../PageThemeUtils";
+import './theme-color.scss';
+
+export const ThemeColor = designComponent({
+  name: 'theme-color',
+  props: {
+    primaryKey: { type: String }
+  },
+  setup({ props }) {
+    const classes = useClasses(() => [getComponentCls('theme-color')]);
+    const primaryColor = computed(() => getPrimaryColor(props.primaryKey));
+    const style1 = useStyles(styles => {styles.backgroundColor = primaryColor.value.light;});
+    const style2 = useStyles(styles => {styles.backgroundColor = primaryColor.value.dark;});
+    return () => (
+      <div className={classes.value}>
+        <div style={style1.value}/>
+        <div style={style2.value}/>
+      </div>
+    );
+  },
+});

package/src/packages/components/ThemeColor/theme-color.scss

@@ -0,0 +1,36 @@
+@include comp(theme-color) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  background-color: plv(secondary-2);
+  transform: rotate(45deg);
+  transform-origin: center;
+
+  $size: 24px;
+  $inset: 4px;
+
+  border-radius: $size;
+  height: $size;
+  width: $size;
+
+  & > div:first-child {
+    border-top-left-radius: $size;
+    border-bottom-left-radius: $size;
+    position: absolute;
+    top: $inset;
+    left: $inset;
+    height: calc(100% - #{$inset} * 2);
+    width: calc((100% - #{$inset} * 2) / 2 + 1px);
+  }
+  & > div:last-child {
+    border-top-right-radius: $size;
+    border-bottom-right-radius: $size;
+    position: absolute;
+    top: $inset;
+    right: $inset;
+    height: calc(100% - #{$inset} * 2);
+    width: calc((100% - #{$inset} * 2) / 2);
+
+  }
+}

package/src/packages/components/ThemeColorSelector/index.tsx

@@ -0,0 +1,53 @@
+import {designComponent, getComponentCls, useClassCache} from "@peryl/react-compose";
+import Dropdown from "../Dropdown";
+import {ThemeColor} from "../ThemeColor";
+import PageThemeUtils from "../PageThemeUtils";
+import ThemePrimaryColors from "../ThemePrimaryColors";
+import DropdownOption from "../DropdownOption";
+
+export const ThemeColorSelector = designComponent({
+  name: 'theme-color-selector',
+  inheritPropsType: Dropdown,
+  props: {
+    reloadOnChange: { type: Boolean },
+    onlyCache: { type: Boolean },
+  },
+  emits: {
+    onChange: (primaryKey: string) => true,
+  },
+  setup({ props, event: { emit } }) {
+
+    const classes = useClassCache(() => [
+      getComponentCls('theme-selector'),
+      getComponentCls('theme-color-selector'),
+    ]);
+
+    const change = (key: string) => {
+      PageThemeUtils.primary(key, props.onlyCache || props.reloadOnChange);
+      emit.onChange(key);
+      props.reloadOnChange && window.location.reload();
+    };
+
+    return () => (
+      <Dropdown
+        trigger="hover"
+        align="center"
+        placement="bottom"
+        v-slots={{
+          default: () => (
+            <div className={classes.value}>
+              <ThemeColor primaryKey={PageThemeUtils.state.primaryKey!}/>
+            </div>
+          ),
+          popper: () => Object.entries(ThemePrimaryColors).map(([key]) => (
+            <DropdownOption key={key} onClick={() => change(key)}>
+              <ThemeColor className="dropdown-theme-color" primaryKey={key}/>
+            </DropdownOption>
+          ))
+        }}
+      />
+    );
+  },
+});
+
+export default ThemeColorSelector;

package/src/packages/components/ThemeDarkSelector/index.tsx

@@ -0,0 +1,37 @@
+import {designComponent, getComponentCls, useClassCache} from "@peryl/react-compose";
+import i18n from "../i18n";
+import Tooltip from "../Tooltip";
+import PageThemeUtils from "../PageThemeUtils";
+import Icon from "../Icon";
+
+export const ThemeDarkSelector = designComponent({
+  name: 'theme-dark-selector',
+  props: {
+    reloadOnChange: { type: Boolean },
+    onlyCache: { type: Boolean },
+  },
+  emits: {
+    onChange: (dark: boolean) => true,
+  },
+  setup({ props, event: { emit } }) {
+
+    const classes = useClassCache(() => [
+      getComponentCls('theme-selector'),
+      getComponentCls('theme-dark-selector'),
+    ]);
+
+    const change = () => {
+      const dark = !(PageThemeUtils.state.dark == null ? false : PageThemeUtils.state.dark);
+      PageThemeUtils.toggle(dark, props.onlyCache || props.reloadOnChange);
+      emit.onChange(dark);
+      props.reloadOnChange && window.location.reload();
+    };
+    return () => (
+      <Tooltip message={i18n.$it('theme.darkOrLight').d("深浅主题")}>
+        <div className={classes.value} onClick={change}>
+          <Icon icon={PageThemeUtils.state.dark ? 'pi-sun' : 'pi-moon'}/>
+        </div>
+      </Tooltip>
+    );
+  },
+});

package/src/packages/components/ThemeEditor/index.tsx

@@ -0,0 +1,199 @@
+import './theme-editor.scss';
+import {designComponent, getComponentCls, iHTMLDivElement, onBeforeUnmount, reactive, useClasses, useRefs, useStyles} from "@peryl/react-compose";
+import Icon from "../Icon";
+import ApplicationConfigurationProvider from "../ApplicationConfigurationProvider";
+import {unit} from "@peryl/utils/unit";
+import {Select} from '../Select';
+import {SelectOption} from "../SelectOption";
+import PageThemeUtils, {ThemePrimaryColors} from "../PageThemeUtils";
+import ClientZoom from "../ClientZoom";
+import {addWindowListener} from '@peryl/utils/addWindowListener';
+import i18n from "../i18n";
+import Button from "../Button";
+
+export const ThemeEditor = designComponent({
+  name: 'theme-editor',
+  props: {
+    bottom: { type: Number, default: 55 }
+  },
+  setup({ props }) {
+
+    const { refs, onRef } = useRefs({ el: iHTMLDivElement });
+
+    const state = reactive({
+      isExpand: false,
+
+      size: PageThemeUtils.state.size || 'normal',
+      dark: PageThemeUtils.state.dark ? 'dark' : 'light',
+      shape: PageThemeUtils.state.shape || 'square',
+      zoom: PageThemeUtils.state.zoom || null,
+      primaryKey: PageThemeUtils.state.primaryKey as string || 'default',
+      inputMode: PageThemeUtils.state.inputMode || 'flat',
+      buttonMode: PageThemeUtils.state.buttonMode || 'flat',
+    });
+
+    const applicationConfiguration = ApplicationConfigurationProvider.inject();
+
+    const classes = useClasses(() => [
+      getComponentCls('theme-editor'),
+      {
+        'is-expand': state.isExpand
+      }
+    ]);
+
+    const styles = useStyles((style) => {
+      style.bottom = unit(props.bottom);
+    });
+
+    const handler = {
+      handleClickInner: () => {state.isExpand = !state.isExpand;},
+      onSizeChange: () => {PageThemeUtils.size(state.size);},
+      onShapeChange: () => {PageThemeUtils.shape(state.shape);},
+      onZoomChange: () => {
+        PageThemeUtils.zoom(state.zoom);
+        ClientZoom.set(state.zoom);
+      },
+      onDarkChange: () => {
+        PageThemeUtils.toggle(state.dark == 'dark');
+      },
+      onPrimaryChange: () => {PageThemeUtils.primary(state.primaryKey);},
+      onInputModeChange: () => {PageThemeUtils.inputMode(state.inputMode);},
+      onButtonModeChange: () => {PageThemeUtils.buttonMode(state.buttonMode);},
+    };
+
+    const publicPopperAttrs = {};
+
+    onBeforeUnmount(
+      addWindowListener('click', (e) => {
+        if (!refs.el?.contains(e.target as HTMLElement) && !!state.isExpand) {
+          state.isExpand = false;
+        }
+      })
+    );
+
+    const publicBlockStyles = { height: '1em', width: '1em', display: 'inline-block', marginRight: '4px', border: `solid 1px var(--${getComponentCls('secondary-3')})` };
+
+    return () => (
+      <div className={classes.value} style={styles.value} ref={onRef.el}>
+        <div className="theme-editor-inner" onClick={handler.handleClickInner}>
+          <div className="theme-editor-inner-cover"/>
+          <Icon icon={state.isExpand ? 'pi-close' : applicationConfiguration.value.theme.dark ? 'pi-moon-fill' : 'pi-sun-fill'}/>
+        </div>
+        {state.isExpand && (
+          <div className="theme-editor-form">
+            <div>
+              <div>{i18n.$it('theme.inputMode').d('输入框类型')}</div>
+              <div>
+                <Select v-model={state.inputMode} onChange={handler.onInputModeChange} size="mini" popperAttrs={publicPopperAttrs}>
+                  <SelectOption label={i18n.$it('theme.inputModeFlat').d('输入框:填充')} val="flat"/>
+                  <SelectOption label={i18n.$it('theme.inputModelStroke').d('输入框:描边')} val="stroke"/>
+                </Select>
+              </div>
+            </div>
+
+            <div>
+              <div>{i18n.$it('theme.buttonMode').d('按钮类型')}</div>
+              <div>
+                <Select v-model={state.buttonMode} onChange={handler.onButtonModeChange} size="mini" popperAttrs={publicPopperAttrs}>
+                  <SelectOption label={i18n.$it('theme.buttonModeFlat').d('扁平')} val="flat"/>
+                  <SelectOption label={i18n.$it('theme.buttonModeFill').d('填充')} val="fill"/>
+                  <SelectOption label={i18n.$it('theme.buttonModeOutline').d('线框')} val="outline"/>
+                  <SelectOption label={i18n.$it('theme.buttonModeStroke').d('描边')} val="stroke"/>
+                  <SelectOption label={i18n.$it('theme.buttonModeText').d('文字')} val="text"/>
+                </Select>
+              </div>
+            </div>
+
+            <div>
+              <div>{i18n.$it('theme.primaryColor').d('主题颜色')}</div>
+              <div>
+                <Select v-model={state.primaryKey} onChange={handler.onPrimaryChange} size="mini" popperAttrs={publicPopperAttrs}>
+                  {Object.entries(ThemePrimaryColors).map(([key, value]) => (
+                    <SelectOption label={i18n.$it('colorName.' + value!.label as any).d(value!.label)} val={key} key={key}>
+                      <div className={getComponentCls('theme-editor-block-item')}>
+                        {(() => {
+                          let themeConfig = value!.themeConfig;
+                          if (!themeConfig) {return null;}
+                          let primary = typeof themeConfig === "string" ? themeConfig : themeConfig[PageThemeUtils.state.dark ? 'dark' : 'light'].base?.primary;
+                          return !!primary && <span style={{ ...publicBlockStyles, background: primary }}/>;
+                        })()}
+                        <span>{i18n.$it('colorName.' + value!.label as any).d(value!.label)}</span>
+                      </div>
+                    </SelectOption>
+                  ))}
+                </Select>
+              </div>
+            </div>
+
+            <div>
+              <div>{i18n.$it('theme.size').d('大小尺寸')}</div>
+              <div>
+                <Select v-model={state.size} onChange={handler.onSizeChange} size="mini" popperAttrs={publicPopperAttrs}>
+                  <SelectOption label={i18n.$it('theme.sizeLarge').d('大尺寸')} val="large"/>
+                  <SelectOption label={i18n.$it('theme.sizeNormal').d('中等尺寸')} val="normal"/>
+                  <SelectOption label={i18n.$it('theme.sizeSmall').d('小尺寸')} val="small"/>
+                  <SelectOption label={i18n.$it('theme.sizeMini').d('极小尺寸')} val="mini"/>
+                </Select>
+              </div>
+            </div>
+
+            <div>
+              <div>{i18n.$it('theme.darkMode').d('黑白主题')}</div>
+              <div>
+                <Select v-model={state.dark} onChange={handler.onDarkChange} size="mini" popperAttrs={publicPopperAttrs}>
+                  <SelectOption label={i18n.$it('theme.darkModeOn').d('黑色主题')} val="dark"/>
+                  <SelectOption label={i18n.$it('theme.darkModeOff').d('白色主题')} val="light"/>
+                </Select>
+              </div>
+            </div>
+
+            <div>
+              <div>{i18n.$it('theme.radiusMode').d('圆角类型')}</div>
+              <div>
+                <Select v-model={state.shape} onChange={handler.onShapeChange} size="mini" popperAttrs={publicPopperAttrs}>
+                  <SelectOption label={i18n.$it('theme.radiusModeRound').d('圆角')} val="round"/>
+                  <SelectOption label={i18n.$it('theme.radiusModeNormal').d('小圆角')} val="square"/>
+                  <SelectOption label={i18n.$it('theme.radiusModeNone').d('无圆角')} val="none"/>
+                </Select>
+              </div>
+            </div>
+
+            <div>
+              <div>{i18n.$it('theme.scale').d('大小缩放')}</div>
+              <Select
+                v-model={state.zoom}
+                onChange={handler.onZoomChange}
+                size="mini"
+                placeholder={i18n.$it('theme.pageScale').d('页面缩放')}
+                popperAttrs={publicPopperAttrs}
+              >
+                <SelectOption label="0.6" val={0.6}/>
+                <SelectOption label="0.7" val={0.7}/>
+                <SelectOption label="0.8" val={0.8}/>
+                <SelectOption label="0.9" val={0.9}/>
+                <SelectOption label="1.0" val={null}/>
+                <SelectOption label="1.1" val={1.1}/>
+                <SelectOption label="1.2" val={1.2}/>
+                <SelectOption label="1.3" val={1.3}/>
+                <SelectOption label="1.4" val={1.4}/>
+                <SelectOption label="1.5" val={1.5}/>
+                <SelectOption label="1.6" val={1.6}/>
+                <SelectOption label="1.7" val={1.7}/>
+                <SelectOption label="1.8" val={1.8}/>
+                <SelectOption label="1.9" val={1.9}/>
+                <SelectOption label="2.0" val={2.0}/>
+              </Select>
+            </div>
+
+            <div>
+              <div>&nbsp;</div>
+              <Button block size="mini" label={i18n.$it('theme.resetThem').d('重置主题')} onClick={() => {
+                PageThemeUtils.clear();
+              }}/>
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  },
+});