plain-design 1.0.0-beta.4 → 1.0.0-beta.41

package/src/packages/components/Table/standard/PlcOperation/PlcOperation.tsx

@@ -281,7 +281,7 @@ export const PlcOperation = designComponent({
      * @author  韦胜健
      * @date    2022.11.25 19:20
      */
-    effects.push(table.hooks.onVirtualPageIndexChange.use(({ start }) => {state.virtualRowStart = start;}));
+    effects.push(table.hooks.onVirtualPageIndexChange.use(({ startIndex }) => {state.virtualRowStart = startIndex;}));
 
     onBeforeUnmount(() => effects.clear());
 

package/src/packages/components/Table/standard/PlcOperation/outer-operation.scss

@@ -19,6 +19,8 @@
       margin-bottom: $margin;
 
       .table-operation-bar-right {
+        margin-left: 12px;
+
         & > * + * {
           margin-left: calc(#{$margin} - 8px);
         }

package/src/packages/components/Table/standard/PlcTree/RenderPlcTreeNode.tsx

@@ -80,6 +80,7 @@ export const RenderPlcTreeNode = designComponent({
             {props.treeCore.props.multiple && (
               <div className={`tree-node-checker plc-tree-button`}>
                 <Checkbox
+                  key={props.treeNode.id}
                   checkStatus={checkStatus.value}
                   disabled={!props.treeNode.isCheckAble()}
                   onClick={handler.onClickCheckbox}
@@ -89,7 +90,7 @@ export const RenderPlcTreeNode = designComponent({
             {props.treeCore.props.draggable && (
               <div
                 className={classnames(['tree-node-draggier', 'plc-tree-button', { 'tree-node-draggier-disable': !props.treeCore.utils.isAllowDraggable(props.treeNode) }])}
-                onMouseDown={handler.onMousedownDraggier.value}
+                onMouseDown={props.treeNode.empty ? undefined : handler.onMousedownDraggier.value}
               >
                 <Icon icon="pi-menu"/>
               </div>

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

@@ -108,6 +108,8 @@ export const Table = designComponent({
      */
     const { bodyNodes, summaryNodes } = useTableNode({ props, formValidator, dataRef });
 
+    const tableBodyNodes = computed(() => hooks.onTableMessyData.exec({ data: [...bodyNodes.value] }).data);
+
     const showRows = computed((): number => {
       const bodyRows = bodyNodes.value.length;
       if (props.showRows === 'auto') {
@@ -323,9 +325,10 @@ export const Table = designComponent({
               <VirtualTable
                 ref={onRefVirtual}
                 height={tableHeight.value || undefined}
-                data={bodyNodes.value}
+                data={tableBodyNodes.value}
                 headData={plcData.value?.headPlcListArray}
                 size={numberState.bodyRowHeight}
+                dynamicSize={props.dynamicSize}
                 headSize={numberState.headRowHeight}
                 width={plcData.value!.targetTableWidth!}
                 summaryData={summaryNodes.value}
@@ -351,8 +354,12 @@ export const Table = designComponent({
                       </tr>
                     ))
                   ),
-                  default: ({ item, index, virtualIndex }) => (
-                    <PltRow table={refer} node={item} vid={index} key={virtualIndex}/>
+                  default: ({ item, vid, vIndex, index }) => (
+                    typeof item !== "function" ? (
+                      <PltRow table={refer} node={item} vid={vid} key={props.virtualRowType === 'virtualIndex' ? vIndex : index}/>
+                    ) : (
+                      item({ vid, vIndex, index })
+                    )
                   ),
                 }}
               />

package/src/packages/components/Table/table/body/row.tsx

@@ -34,7 +34,7 @@ export const PltRow = designComponent({
       render: () => {
         return props.table.hooks.onRenderRow.exec({
           content: (
-            <tr className={classes.value} style={{ height: `${props.table.numberState.bodyRowHeight}px` }} data-vid={props.vid} {...handler}>
+            <tr className={classes.value} style={{ height: `${props.table.numberState.bodyRowHeight}px` }} data-vid={props.vid} data-idx={String(props.node.state.index == null ? "" : props.node.state.index)} {...handler}>
               {(props.table.bodyPlcList.value?.map((plc) => <PltCell key={plc.plcKey} table={props.table} node={props.node} plc={plc}/>))}
             </tr>
           ),

package/src/packages/components/Table/table/body/useCellValue.tsx

@@ -84,13 +84,17 @@ export function useCellValue(
           };
           (async () => {
             try {
+              const sv = sourceValue.value;
+              const sr = row.value;
               const value = await asyncFormatterFunction(sourceValue.value, { ...cellRenderScope, ...formatterOptions });
-              asyncState.asyncValue = {
-                sourceValue: sourceValue.value,
-                row: row.value,
-                targetValue: value,
-                loading: false,
-              };
+              if (sv === sourceValue.value && sr === row.value) {
+                asyncState.asyncValue = {
+                  sourceValue: sourceValue.value,
+                  row: row.value,
+                  targetValue: value,
+                  loading: false,
+                };
+              }
             } catch (e) {
               /*异步格式化失败*/
               console.error(e);

package/src/packages/components/Table/table/head/useHeadCellResize.ts

@@ -4,6 +4,7 @@ import {Table} from "../../index";
 import {tPlcType} from "../../plc/utils/plc.utils";
 import {addClass} from "plain-utils/dom/addClass";
 import {getComponentCls, iMouseEvent} from "plain-design-composition";
+import {ClientZoom} from "../../../ClientZoom";
 
 /**
  * 处理表头拖拽调整宽度的功能
@@ -21,6 +22,8 @@ export function useHeadCellResize(table: typeof Table.use.class, getPlc: () => t
   const handler = {
     mousedown: (e: iMouseEvent) => {
 
+      const { clientX } = ClientZoom.getClientPosition(e);
+
       const tableEl = table.refs.el!;
 
       e.preventDefault();
@@ -29,7 +32,7 @@ export function useHeadCellResize(table: typeof Table.use.class, getPlc: () => t
       window.addEventListener('mousemove', handler.mousemove);
       window.addEventListener('mouseup', handler.mouseup);
       disabledUserSelect();
-      state.startX = e.clientX;
+      state.startX = clientX;
 
       state.indicatorEl = document.createElement('div');
 
@@ -55,14 +58,16 @@ export function useHeadCellResize(table: typeof Table.use.class, getPlc: () => t
       document.body.appendChild(state.indicatorEl);
     },
     mousemove: (e: MouseEvent) => {
-      state.indicatorEl!.style.transform = `translate3d(${e.clientX}px,0,0)`;
+      const { clientX } = ClientZoom.getClientPosition(e);
+      state.indicatorEl!.style.transform = `translate3d(${clientX}px,0,0)`;
     },
     mouseup: (e: MouseEvent) => {
+      const { clientX } = ClientZoom.getClientPosition(e);
       window.removeEventListener('mousemove', handler.mousemove);
       window.removeEventListener('mouseup', handler.mouseup);
       enableUserSelect();
       document.body.removeChild(state.indicatorEl!);
-      state.endX = e.clientX;
+      state.endX = clientX;
       let durWidth = state.endX - state.startX!;
       getPlc().setDurWidth(durWidth);
     }

package/src/packages/components/Table/table/table.scss

@@ -100,6 +100,7 @@
     &.plt-cell-link {
       color: plv(primary-6);
       cursor: pointer;
+      text-decoration: underline;
 
       &:hover {
         text-decoration: underline;
@@ -109,7 +110,7 @@
     @include comp(input) {
       &:not(.input-multiple) {
         .input-box {
-          padding-bottom: 4px;
+          padding-bottom: 3px;
         }
       }
     }

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

@@ -12,6 +12,7 @@ import {getComponentCls, iMouseEvent, nextIndex, StyleProperties} from "plain-de
 import {iTableHooks} from "../utils/createTableHooks";
 import {iElementRect} from "../../../../utils/getRowEl";
 import {createEnum} from "plain-utils/utils/createEnum";
+import {ClientZoom} from "../../../ClientZoom";
 
 export function useTableDraggierCol(
   {
@@ -223,11 +224,12 @@ export function useTableDraggierCol(
     };
 
     const start = (e: iMouseEvent, plc: tPlcType) => {
+      const { clientX, clientY } = ClientZoom.getClientPosition(e);
       staticState = {
         plc,
         start: {
-          x: e.clientX,
-          y: e.clientY,
+          x: clientX,
+          y: clientY,
         },
         data: null
       };
@@ -237,11 +239,13 @@ export function useTableDraggierCol(
     const update = (e?: MouseEvent) => {
       if (!staticState) {return;}
 
+      const { clientX, clientY } = !e ? { clientX: 0, clientY: 0 } : ClientZoom.getClientPosition(e);
+
       let isDragging = !!staticState.data;
 
       if (!isDragging) {
         /*拖拽超过一定距离的时候才开始拖拽，避免与点击事件冲突*/
-        if (!!e && Math.abs(e.clientX - staticState.start.x) > 5) {
+        if (!!e && Math.abs(clientX - staticState.start.x) > 5) {
           isDragging = true;
           initDraggierState();
         }
@@ -253,7 +257,7 @@ export function useTableDraggierCol(
       }
 
       if (!!e) {
-        staticState.data.move = { x: e.clientX, y: e.clientY };
+        staticState.data.move = { x: clientX, y: clientY };
       }
       const { data: { cloneTable, move, table, left }, start } = staticState;
       cloneTable.style.top = table.getBoundingClientRect().top + 'px';
@@ -470,7 +474,8 @@ export function useTableDraggierCol(
     };
     const update = (e?: MouseEvent) => {
       if (!!e) {
-        staticState!.moveClientX = e.clientX;
+        const { clientX } = ClientZoom.getClientPosition(e);
+        staticState!.moveClientX = clientX;
       } else {
         staticState!.moveScrollLeft = staticState!.scrollParent!.scrollLeft;
       }

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

@@ -9,6 +9,7 @@ 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";
 
 export function useTableDraggierRow(
   {
@@ -85,9 +86,10 @@ export function useTableDraggierRow(
     };
     let prevClientY = 0;
     const update = (e?: MouseEvent) => {
+      const { clientY } = !e ? { clientY: prevClientY } : ClientZoom.getClientPosition(e);
       const moveIndex = (() => {
         const hostRect = staticState!.bodyHostEl.getBoundingClientRect();
-        let index = Math.floor((((e?.clientY || prevClientY) - hostRect.top + refs.virtual!.refs.scroll!.freezeState.wrapperScrollTop - (staticState!.headTableEl?.clientHeight || 0)) / numberState.bodyRowHeight));
+        let index = Math.floor(((clientY - hostRect.top + refs.virtual!.refs.scroll!.freezeState.wrapperScrollTop - (staticState!.headTableEl?.clientHeight || 0)) / numberState.bodyRowHeight));
         if (index < 0) {index = 0;}
         if (index > bodyNodes.value.length - 1) {
           index = bodyNodes.value.length - 1;
@@ -95,7 +97,7 @@ export function useTableDraggierRow(
         return index;
       })();
       if (moveIndex !== move.state.index) {move.state.index = moveIndex;}
-      if (!!e) {prevClientY = e.clientY;}
+      if (!!e) {prevClientY = clientY;}
     };
     return { state, update, start, get staticState() {return staticState;} };
   })();
@@ -188,9 +190,10 @@ export function useTableDraggierRow(
     };
 
     const start = (e: iMouseEvent, node: iTableNode) => {
-      const rowEl = (Array.from(refs.el!.querySelectorAll(`.plt-row`)) as HTMLTableRowElement[]).find(i => i.dataset.vid == node.state.index.toString())!;
+      const { clientY } = !e ? { clientY: prevClientY } : ClientZoom.getClientPosition(e);
+      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: e.clientY, startTop: rowRect.top, node, rowEl, data: null, };
+      staticState = { startY: clientY, startTop: rowRect.top, node, rowEl, data: null, };
       /*清理状态*/
       draggierEffects.push(() => {staticState = null;});
     };
@@ -199,11 +202,13 @@ export function useTableDraggierRow(
     const update = (e?: MouseEvent) => {
       if (!staticState) {return;}
 
+      const { clientY } = !e ? { clientY: prevClientY } : ClientZoom.getClientPosition(e);
+
       let isDragging = !!staticState.data;
 
       if (!isDragging) {
         /*拖拽超过一定距离的时候才开始拖拽，避免与点击事件冲突*/
-        if (!!e && Math.abs(e.clientY - staticState.startY) > 5) {
+        if (!!e && Math.abs(clientY - staticState.startY) > 5) {
           isDragging = true;
           initDraggierState();
         }
@@ -214,7 +219,7 @@ export function useTableDraggierRow(
         return;
       }
 
-      const durY = (e?.clientY || prevClientY) - staticState.startY;
+      const durY = clientY - staticState.startY;
       let top = staticState.startTop + durY;
       const minTop = move.staticState!.bodyHostEl.getBoundingClientRect().top + (move.staticState!.headTableEl?.clientHeight || 0);
       if (top < minTop) {
@@ -229,7 +234,7 @@ export function useTableDraggierRow(
 
       staticState.data!.cloneRowEl.style.top = `${top}px`;
       if (!!e) {
-        prevClientY = e.clientY;
+        prevClientY = clientY;
       }
 
       /*更细move index信息*/

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

@@ -128,12 +128,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

@@ -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}
                 >

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,7 +28,9 @@ 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> },          // 当前排序字段
@@ -130,6 +132,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/ThemeEditor/index.tsx

@@ -0,0 +1,173 @@
+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";
+
+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',
+    });
+
+    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: () => {
+        const val = !state.dark ? false : state.dark === 'dark';
+        PageThemeUtils.toggle(val);
+        if (val && state.primaryKey === 'dark') {
+          state.primaryKey = 'light';
+          handler.onPrimaryChange();
+        } else if (!val && state.primaryKey === 'light') {
+          state.primaryKey = 'dark';
+          handler.onPrimaryChange();
+        }
+      },
+      onPrimaryChange: () => {PageThemeUtils.primary(state.primaryKey);},
+      onInputModeChange: () => {PageThemeUtils.inputMode(state.inputMode);},
+    };
+
+    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('theme.inputMode').d('输入框类型')}</div>
+              <div>
+                <Select v-model={state.inputMode} onChange={handler.onInputModeChange} size="mini" popperAttrs={publicPopperAttrs}>
+                  <SelectOption label={i18n('theme.inputModeFlat').d('输入框:填充')} val="flat"/>
+                  <SelectOption label={i18n('theme.inputModelStroke').d('输入框:描边')} val="stroke"/>
+                </Select>
+              </div>
+            </div>
+
+            <div>
+              <div>{i18n('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('colorName.' + value!.label as any).d(value!.label)} val={key} key={key}>
+                      <div className={getComponentCls('theme-editor-block-item')}>
+                        {!!value!.primary && <span style={{ ...publicBlockStyles, background: value!.primary }}/>}
+                        <span>{i18n('colorName.' + value!.label as any).d(value!.label)}</span>
+                      </div>
+                    </SelectOption>
+                  ))}
+                </Select>
+              </div>
+            </div>
+
+            <div>
+              <div>{i18n('theme.size').d('大小尺寸')}</div>
+              <div>
+                <Select v-model={state.size} onChange={handler.onSizeChange} size="mini" popperAttrs={publicPopperAttrs}>
+                  <SelectOption label={i18n('theme.sizeLarge').d('大尺寸')} val="large"/>
+                  <SelectOption label={i18n('theme.sizeNormal').d('中等尺寸')} val="normal"/>
+                  <SelectOption label={i18n('theme.sizeSmall').d('小尺寸')} val="small"/>
+                  <SelectOption label={i18n('theme.sizeMini').d('极小尺寸')} val="mini"/>
+                </Select>
+              </div>
+            </div>
+
+            <div>
+              <div>{i18n('theme.darkMode').d('黑白主题')}</div>
+              <div>
+                <Select v-model={state.dark} onChange={handler.onDarkChange} size="mini" popperAttrs={publicPopperAttrs}>
+                  <SelectOption label={i18n('theme.darkModeOn').d('黑色主题')} val="dark"/>
+                  <SelectOption label={i18n('theme.darkModeOff').d('白色主题')} val="light"/>
+                </Select>
+              </div>
+            </div>
+
+            <div>
+              <div>{i18n('theme.radiusMode').d('圆角类型')}</div>
+              <div>
+                <Select v-model={state.shape} onChange={handler.onShapeChange} size="mini" popperAttrs={publicPopperAttrs}>
+                  <SelectOption label={i18n('theme.radiusModeRound').d('圆角')} val="round"/>
+                  <SelectOption label={i18n('theme.radiusModeNormal').d('小圆角')} val="square"/>
+                  <SelectOption label={i18n('theme.radiusModeNone').d('无圆角')} val="none"/>
+                </Select>
+              </div>
+            </div>
+
+            <div>
+              <div>{i18n('theme.scale').d('大小缩放')}</div>
+              <Select v-model={state.zoom} onChange={handler.onZoomChange} size="mini" placeholder="页面缩放" 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>
+    );
+  },
+});

package/src/packages/components/ThemeEditor/theme-editor.scss

@@ -0,0 +1,105 @@
+@include comp(theme-editor) {
+  position: fixed;
+  right: 0;
+  border-right: none;
+  padding: 5px 10px 5px 5px;
+  border-top-left-radius: 999px;
+  border-bottom-left-radius: 999px;
+  box-sizing: border-box;
+  transition: all ease 300ms;
+  overflow-y: hidden;
+  z-index: 99999;
+
+  &:before {
+    content: '';
+    background-color: plv(primary-light-2);
+    border-radius: inherit;
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  .theme-editor-inner {
+    position: absolute;
+    z-index: 1;
+    bottom: 5px;
+    right: 10px;
+    cursor: pointer;
+    height: calc(#{plv(box-size-normal-height)} * 1.5);
+    width: calc(#{plv(box-size-normal-height)} * 1.5);
+    border-radius: calc(#{plv(box-size-normal-height)} * 1.5);
+    background-color: plv(primary-6);
+    color: plv(pbfc);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+    transition: all ease 300ms;
+
+    .theme-editor-inner-cover {
+      position: absolute;
+      inset: 0;
+      user-select: none;
+    }
+  }
+
+  &.is-expand {
+    width: 300px;
+    height: 260px;
+    border-top-left-radius: plv(box-size-normal-border-radius);
+    border-bottom-left-radius: plv(box-size-normal-border-radius);
+
+    &:before {
+      background-color: plv(background-color);
+      border: solid 1px plv(border-color);
+    }
+
+    .theme-editor-inner {
+      border-radius: plv(box-size-normal-border-radius);
+      background-color: transparent;
+      color: plv(text-2);
+
+      &:hover {
+        background-color: plv(secondary-2);
+      }
+    }
+  }
+
+  &:not(.is-expand) {
+    width: calc(#{plv(box-size-normal-height)} * 1.5 + 15px);
+    height: calc(#{plv(box-size-normal-height)} * 1.5 + 10px);
+  }
+
+  .theme-editor-form {
+    padding: 8px;
+    box-sizing: border-box;
+    position: relative;
+    z-index: 2;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+
+    & > div {
+      width: calc(50% - 4px);
+      font-size: 12px;
+      color: plv(text-2);
+      margin-bottom: 20px;
+
+      &:nth-child(2n) {
+        margin-left: 8px;
+      }
+
+      & > div {
+        &:first-child {
+          margin-left: 10px;
+          margin-bottom: 4px;
+        }
+      }
+    }
+  }
+}
+
+@include comp(theme-editor-block-item){
+  display: flex;
+  align-items: center;
+}