plain-design 1.0.0-beta.11 → 1.0.0-beta.110

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

@@ -2,10 +2,26 @@
   position: relative;
 
   @include sizeMixin(table, (font-size)) {
+    .plt-cell {
+      padding: 0 plv(input-padding-x-#{$name});
+
+      &.plt-cell-editing {
+        &:not(.plt-cell-add-edit-padding) {
+          padding-left: 2px;
+          @include comp(input) {
+            & > div, & > span, & > input, & > textarea {
+              &:first-child {
+                padding-left: calc(#{plv(input-padding-x-#{$name})} - 3px);
+              }
+            }
+          }
+        }
+      }
+    }
   }
   .virtual-table-head-table {
     td {
-      font-weight: 600;
+      font-weight: 500;
       letter-spacing: 1px;
 
       .plt-head-cell-indicator {
@@ -84,22 +100,10 @@
       padding: 0;
     }
 
-    &.plt-cell-editing {
-      &:not(.plt-cell-add-edit-padding) {
-        padding-left: 2px;
-        @include comp(input) {
-          & > div, & > span, & > input, & > textarea {
-            &:first-child {
-              padding-left: calc(#{plv(input-padding-x)} - 3px);
-            }
-          }
-        }
-      }
-    }
-
     &.plt-cell-link {
       color: plv(primary-6);
       cursor: pointer;
+      text-decoration: underline;
 
       &:hover {
         text-decoration: underline;
@@ -109,7 +113,7 @@
     @include comp(input) {
       &:not(.input-multiple) {
         .input-box {
-          padding-bottom: 4px;
+          padding-bottom: 3px;
         }
       }
     }
@@ -216,7 +220,7 @@
   .plt-expand-row {
     &, &:hover {
       td {
-        padding: 0;
+        padding: 0 !important;
         background-color: plv(background-color) !important;
         overflow: unset !important;
       }

package/src/packages/components/Table/table/use/useFixedShadow.ts

@@ -1,5 +1,5 @@
-import {computed, reactive, SimpleFunction} from "plain-design-composition";
-import {delay} from "plain-utils/utils/delay";
+import {computed, reactive, SimpleFunction} from "@peryl/react-compose";
+import {delay} from "@peryl/utils/delay";
 import {iTableScrollRefer} from "./useTableScroll";
 import {PlainScroll} from "../../../Scroll";
 

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

@@ -1,17 +1,17 @@
-import {createEffects} from "plain-utils/utils/createEffects";
+import {createEffects} from "@peryl/utils/createEffects";
 import {useAutoScroll} from "../../../Scroll/useAutoScroll";
 import {PlainScroll} from "../../../Scroll";
 import {TablePlcFixedType, tPlc, tPlcType} from "../../plc/utils/plc.utils";
-import {disabledUserSelect} from "plain-utils/dom/disabledUserSelect";
-import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
+import {disabledUserSelect} from "@peryl/utils/disabledUserSelect";
+import {enableUserSelect} from "@peryl/utils/enableUserSelect";
 import {IteratePlcHandleType, iteratePlcList} from "../../plc/utils/iteratePlcList";
 import VirtualTable from "../../../VirtualTable";
 import {customDeepClone} from "../../../../utils/customDeepClone";
-import {addClass} from "plain-utils/dom/addClass";
-import {getComponentCls, iMouseEvent, nextIndex, StyleProperties} from "plain-design-composition";
+import {addClass} from "@peryl/utils/addClass";
+import {getComponentCls, iMouseEvent, nextIndex, StyleProperties} from "@peryl/react-compose";
 import {iTableHooks} from "../utils/createTableHooks";
 import {iElementRect} from "../../../../utils/getRowEl";
-import {createEnum} from "plain-utils/utils/createEnum";
+import {createEnum} from "@peryl/utils/createEnum";
 import {ClientZoom} from "../../../ClientZoom";
 
 export function useTableDraggierCol(

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 {getComponentCls, iMouseEvent, reactive} from "@peryl/react-compose";
+import {createEffects} from "@peryl/utils/createEffects";
 import VirtualTable from "../../../VirtualTable";
 import {iTableHooks} from "../utils/createTableHooks";
 import {iTableNode} from "../utils/table.utils";
-import {findParentElement} from "../../../../utils/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 {findParentElement} from "@peryl/utils/findParentElement";
+import {hasClass} from "@peryl/utils/hasClass";
+import {addClass} from "@peryl/utils/addClass";
+import {disabledUserSelect} from "@peryl/utils/disabledUserSelect";
+import {enableUserSelect} from "@peryl/utils/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,8 +1,8 @@
 import {iTableHooks} from "../utils/createTableHooks";
 import {iTableEventType, iTableNode, iTablePropsType} from "../utils/table.utils";
-import {findParentElement} from "../../../../utils/findParentElement";
-import {hasClass} from "plain-utils/dom/hasClass";
-import {designComponent, getComponentCls, iHTMLDivElement, iMouseEvent} from "plain-design-composition";
+import {findParentElement} from "@peryl/utils/findParentElement";
+import {hasClass} from "@peryl/utils/hasClass";
+import {designComponent, getComponentCls, iHTMLDivElement, iMouseEvent} from "@peryl/react-compose";
 import {Icon} from "../../../Icon";
 import {tPlcType} from "../../plc/utils/plc.utils";
 import {useTableDraggierRow} from "./useTableDraggier.row";

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

@@ -1,16 +1,16 @@
 import {iTableHooks} from "../utils/createTableHooks";
-import {computed, onBeforeUnmount, reactive, useRefs} from "plain-design-composition";
-import {createEffects} from "plain-utils/utils/createEffects";
+import {computed, onBeforeUnmount, reactive, useRefs} from "@peryl/react-compose";
+import {createEffects} from "@peryl/utils/createEffects";
 import {Dialog} from "../../../Dialog";
 import {Form} from "../../../Form";
 import {FormItem} from "../../../FormItem";
 import {iTableNode, iTablePropsType} from "../utils/table.utils";
-import {deepcopy} from "plain-utils/object/deepcopy";
+import {deepcopy} from "@peryl/utils/deepcopy";
 import {useCellValue} from "../body/useCellValue";
 import {PlcValidatePropsOption, tPlc} from "../../plc/utils/plc.utils";
-import {delay} from "plain-utils/utils/delay";
+import {delay} from "@peryl/utils/delay";
 import {iTableMethods} from "./useTableMethods";
-import {pick} from "../../../../utils/pick";
+import {pick} from "@peryl/utils/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/useTableLoading.tsx

@@ -1,5 +1,5 @@
-import {reactive} from "plain-design-composition";
-import {createCounter} from "plain-utils/utils/createCounter";
+import {reactive} from "@peryl/react-compose";
+import {createCounter} from "@peryl/utils/createCounter";
 import {iTableHooks} from "../utils/createTableHooks";
 import {LoadingMask} from "../../../LoadingMask";
 import {iTablePropsType} from "../utils/table.utils";

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, 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";
 
 /**
@@ -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/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 {createHooks, createRenderHook, createSyncHooks, iMouseEvent, RenderNode, StyleProperties} from "@peryl/react-compose";
 import {tPlcType} from "../../plc/utils/plc.utils";
-import {iTableNode} from "./table.utils";
-import {PlainObject} from "plain-utils/utils/event";
+import {iTableMessyData, iTableNode} from "./table.utils";
+import {PlainObject} from "@peryl/utils/event";
 import {VirtualTable} from "../../../VirtualTable";
 
 export const createTableHooks = () => {
@@ -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,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,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/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, useStyles} from "@peryl/react-compose";
 import {ThemeSize, ThemeStatus, useStyle} from "../../uses/useStyle";
 import {iTagColor, TagColor} from "./tag.utils";
 import Icon from "../Icon";

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>
+    );
+  },
+});