plain-design 1.0.0-beta.10 → 1.0.0-beta.100

package/src/packages/components/Table/table/use/useTableDraggier.row.tsx

@@ -1,15 +1,15 @@
 import {getComponentCls, iMouseEvent, reactive} from "plain-design-composition";
-import {useAutoScroll} from "../../../Scroll/useAutoScroll";
 import {createEffects} from "plain-utils/utils/createEffects";
 import VirtualTable from "../../../VirtualTable";
 import {iTableHooks} from "../utils/createTableHooks";
 import {iTableNode} from "../utils/table.utils";
-import {findParentElement} from "../../../../utils/findParentElement";
+import {findParentElement} from "plain-utils/dom/findParentElement";
 import {hasClass} from "plain-utils/dom/hasClass";
 import {addClass} from "plain-utils/dom/addClass";
 import {disabledUserSelect} from "plain-utils/dom/disabledUserSelect";
 import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
 import {ClientZoom} from "../../../ClientZoom";
+import {createAutoScrollManager} from "../../../createAutoScrollManager";
 
 export function useTableDraggierRow(
   {
@@ -29,8 +29,11 @@ export function useTableDraggierRow(
     model: { value: any[] | null | undefined }
   }
 ) {
+
   /*自动滚动*/
-  const autoScroll = useAutoScroll({ getScroll: () => refs.virtual?.refs.scroll, vertical: true, });
+  /*const autoScroll = useAutoScroll({ getScroll: () => refs.virtual?.refs.scroll, vertical: true, });*/
+
+  const autoScrollManager = createAutoScrollManager(() => refs.virtual?.refs.scroll);
 
   /*拖拽结束之后要清除的副作用*/
   const { effects: draggierEffects } = createEffects();
@@ -180,18 +183,18 @@ export function useTableDraggierRow(
 
       /*---------------------------------------初始化auto scroll-------------------------------------------*/
       /*自动滚动*/
-      if (refs.virtual?.refs.scroll?.refs.wrapper) {
+      /*if (refs.virtual?.refs.scroll?.refs.wrapper) {
         const { scrollHeight, offsetHeight } = refs.virtual.refs.scroll.refs.wrapper;
         if (scrollHeight > offsetHeight) {
           autoScroll.showHover();
           draggierEffects.push(() => {autoScroll.hideHover();});
         }
-      }
+      }*/
     };
 
     const start = (e: iMouseEvent, node: iTableNode) => {
       const { clientY } = !e ? { clientY: prevClientY } : ClientZoom.getClientPosition(e);
-      const rowEl = (Array.from(refs.el!.querySelectorAll(`.plt-row`)) as HTMLTableRowElement[]).find(i => i.dataset.vid == node.state.index.toString())!;
+      const rowEl = (Array.from(refs.el!.querySelectorAll(`.plt-row`)) as HTMLTableRowElement[]).find(i => i.dataset.idx == node.state.index.toString())!;
       const rowRect = rowEl.getBoundingClientRect();
       staticState = { startY: clientY, startTop: rowRect.top, node, rowEl, data: null, };
       /*清理状态*/
@@ -222,16 +225,25 @@ export function useTableDraggierRow(
       const durY = clientY - staticState.startY;
       let top = staticState.startTop + durY;
       const minTop = move.staticState!.bodyHostEl.getBoundingClientRect().top + (move.staticState!.headTableEl?.clientHeight || 0);
+      const hostRect = move.staticState!.bodyHostEl.getBoundingClientRect();
+      const maxTop = hostRect.top + hostRect.height - numberState.bodyRowHeight - (staticState.data!.summaryTable?.clientHeight || 0);
+
       if (top < minTop) {
         top = minTop;
       } else {
-        const hostRect = move.staticState!.bodyHostEl.getBoundingClientRect();
-        const maxTop = hostRect.top + hostRect.height - numberState.bodyRowHeight - (staticState.data!.summaryTable?.clientHeight || 0);
         if (top > maxTop) {
           top = maxTop;
         }
       }
 
+      if (top == minTop) {
+        autoScrollManager.set('top');
+      } else if (top == maxTop) {
+        autoScrollManager.set('bottom');
+      } else {
+        autoScrollManager.set(null);
+      }
+
       staticState.data!.cloneRowEl.style.top = `${top}px`;
       if (!!e) {
         prevClientY = clientY;

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

@@ -1,6 +1,6 @@
 import {iTableHooks} from "../utils/createTableHooks";
 import {iTableEventType, iTableNode, iTablePropsType} from "../utils/table.utils";
-import {findParentElement} from "../../../../utils/findParentElement";
+import {findParentElement} from "plain-utils/dom/findParentElement";
 import {hasClass} from "plain-utils/dom/hasClass";
 import {designComponent, getComponentCls, iHTMLDivElement, iMouseEvent} from "plain-design-composition";
 import {Icon} from "../../../Icon";

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

@@ -10,7 +10,7 @@ import {useCellValue} from "../body/useCellValue";
 import {PlcValidatePropsOption, tPlc} from "../../plc/utils/plc.utils";
 import {delay} from "plain-utils/utils/delay";
 import {iTableMethods} from "./useTableMethods";
-import {pick} from "../../../../utils/pick";
+import {pick} from "plain-utils/object/pick";
 import i18n from "../../../i18n";
 
 export function useTableFormEditor(
@@ -104,10 +104,10 @@ export function useTableFormEditor(
             return (
               <Dialog
                 v-model={state.show}
-                title={title || i18n('base.edit.edit').d('编辑')}
+                title={title || i18n.$it('base.edit.edit').d('编辑')}
                 confirmButton
                 cancelButton
-                confirmButtonText={i18n('base.edit.save').d('保存')}
+                confirmButtonText={i18n.$it('base.edit.save').d('保存')}
                 handleConfirm={handler.handleConfirm}
                 handleCancel={handler.handleCancel}
                 position="right"
@@ -118,6 +118,8 @@ export function useTableFormEditor(
                   ref={onRef.form}
                   column={1}
                   modelValue={node.state.editRow}
+                  labelAlign="right"
+                  validateMessagePosition="bottom-left"
                 >
                   {showPlcArray.value.map((plc, index) => {
                     if (plc.props.editColSpan === 0) {
@@ -128,12 +130,12 @@ export function useTableFormEditor(
                     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}
                         disabled={!editable}
                         {...validateAttrs}
                       >

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

@@ -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 "plain-utils/object/pick";
 import i18n from "../../../i18n";
 
 /**
@@ -74,7 +74,7 @@ export function useTableModifyEditor(
   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 +92,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 +118,12 @@ 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}
                   disabled={!editable}
                   {...validateAttrs}
                 >
@@ -133,8 +133,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>
         </>
       );
@@ -150,7 +150,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 (

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

@@ -1,6 +1,6 @@
 import {createHooks, createRenderHook, createSyncHooks, iMouseEvent, RenderNode, StyleProperties} from "plain-design-composition";
 import {tPlcType} from "../../plc/utils/plc.utils";
-import {iTableNode} from "./table.utils";
+import {iTableMessyData, iTableNode} from "./table.utils";
 import {PlainObject} from "plain-utils/utils/event";
 import {VirtualTable} from "../../../VirtualTable";
 
@@ -19,7 +19,7 @@ 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>(),
     /*双击行动作*/
@@ -52,6 +52,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,5 +1,5 @@
 import {StyleProps, ThemeSize} from "../../../../uses/useStyle";
-import {ComponentEvent, ExtractPropTypes, iMouseEvent, MultipleClass, PropType, reactive, StyleProperties, tSlotsType} from "plain-design-composition";
+import {ComponentEvent, ExtractPropTypes, iMouseEvent, MultipleClass, PropType, reactive, RenderNode, StyleProperties, tSlotsType} from "plain-design-composition";
 import {PlainObject} from "plain-utils/utils/event";
 import {eFormValidateTrigger, iFormValidatePropsType, iValidateResult} from "../../../Form/validate/validate.utils";
 import {tPlc, tPlcType} from "../../plc/utils/plc.utils";
@@ -28,11 +28,14 @@ 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 },                                           // 开启加载状态
@@ -130,6 +133,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/ThemeColor/index.tsx

@@ -0,0 +1,22 @@
+import {computed, designComponent, getComponentCls, useClasses, useStyles} from "plain-design-composition";
+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 "plain-design-composition";
+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,38 @@
+import {designComponent, getComponentCls, useClassCache} from "plain-design-composition";
+import i18n from "../i18n";
+import Tooltip from "../Tooltip";
+import PageThemeUtils from "../PageThemeUtils";
+import Icon from "../Icon";
+import './theme-dark-selector.scss';
+
+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/ThemeDarkSelector/theme-dark-selector.scss

@@ -0,0 +1,5 @@
+@include comp(theme-dark-selector) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}

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 "plain-design-composition";
+import Icon from "../Icon";
+import ApplicationConfigurationProvider from "../ApplicationConfigurationProvider";
+import {unit} from "plain-utils/string/unit";
+import {Select} from '../Select';
+import {SelectOption} from "../SelectOption";
+import PageThemeUtils, {ThemePrimaryColors} from "../PageThemeUtils";
+import ClientZoom from "../ClientZoom";
+import {addWindowListener} from 'plain-utils/dom/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>
+    );
+  },
+});