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

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

@@ -1,8 +1,11 @@
-import {computed, getComponentCls, reactive} from "plain-design-composition";
+import {getComponentCls, globalComputed, reactive} from "@peryl/react-compose";
 import {createCache} from "../../utils/createCache";
-import {ThemeShape, ThemeSize} from "../../uses/useStyle";
+import {InputMode, ThemeMode, ThemeShape, ThemeSize} from "../../uses/useStyle";
 import {DeepPartial} from "../../utils/type";
 import {iApplicationConfiguration} from "../Application/utils/application.utils";
+import {BaseColors, iThemeConfiguration} from "../Application/theme/theme";
+import {deepmerge} from "./deepmerge";
+import {PlainObject} from "@peryl/utils/event";
 
 export const PageThemeUtils = (() => {
 
@@ -10,7 +13,8 @@ export const PageThemeUtils = (() => {
   const primaryCache = createCache<string>(getComponentCls('@@PAGE_THEME_PRIMARY'));
   const sizeCache = createCache<typeof ThemeSize.TYPE>(getComponentCls('@@PAGE_THEME_SIZE'));
   const shapeCache = createCache<typeof ThemeShape.TYPE>(getComponentCls('@@PAGE_THEME_SHAPE'));
-  const inputModeCache = createCache<'flat' | 'stroke'>(getComponentCls('@@PAGE_THEME_INPUT_MODE'));
+  const inputModeCache = createCache<typeof InputMode.TYPE>(getComponentCls('@@PAGE_THEME_INPUT_MODE'));
+  const buttonModeCache = createCache<typeof ThemeMode.TYPE>(getComponentCls('@@PAGE_THEME_BUTTON_MODE'));
   const zoomCache = createCache<number | undefined>(getComponentCls('@@PAGE_THEME_ZOOM'));
 
   const state = reactive({
@@ -19,40 +23,55 @@ export const PageThemeUtils = (() => {
     size: sizeCache.get(),
     shape: shapeCache.get(),
     inputMode: inputModeCache.get(),
+    buttonMode: buttonModeCache.get(),
     zoom: zoomCache.get(),
   });
 
-  const configuration = computed((): DeepPartial<iApplicationConfiguration> => {
+  const configuration = globalComputed((): DeepPartial<iApplicationConfiguration> => {
     const config: DeepPartial<iApplicationConfiguration> = {};
-    if (!config.theme) {
-      config.theme = {};
-    }
-    if (!config.theme.base) {
-      config.theme.base = {};
-    }
-    config.theme.dark = !!state.dark;
-    config.theme.base.primary = !state.primaryKey ? undefined : ThemePrimaryColors[state.primaryKey]?.primary;
+    if (!config.theme) {config.theme = {};}
+    if (!config.theme.base) {config.theme.base = {};}
+    if (!config.theme.vars) {config.theme.vars = {};}
+
+    let { dark, primaryKey, size, shape, inputMode, buttonMode, zoom } = state;
+
+    config.theme.dark = !!dark;
+
+    const themeConfig = !primaryKey ? undefined : ((): DeepPartial<Omit<iThemeConfiguration, 'dark'>> | undefined => {
+      let themeConfig = ThemePrimaryColors[primaryKey]?.themeConfig;
+      if (themeConfig == undefined) {return undefined;}
+      if (typeof themeConfig === "string") {
+        return {
+          base: { primary: themeConfig }
+        };
+      } else {
+        return themeConfig[dark ? 'dark' : 'light'];
+      }
+    })();
+
+    config.theme = deepmerge(config.theme, themeConfig) as PlainObject;
+
     if (!config.default) {
       config.default = {};
     }
-    if (!!state.size) {
-      config.default.size = state.size;
+    if (!!size) {
+      config.default.size = size;
     }
-    if (!!state.shape) {
-      config.default.shape = state.shape;
-      if (!config.theme.vars) {
-        config.theme.vars = {};
+    if (!!shape) {
+      config.default.shape = shape;
+      if (!config.theme!.vars) {
+        config.theme!.vars = {};
       }
-      if (state.shape === 'square') {
-        Object.assign(config.theme.vars, {
+      if (shape === 'square') {
+        Object.assign(config.theme!.vars, {
           'box-size-mini-border-radius': '2px',
           'box-size-small-border-radius': '2px',
           'box-size-normal-border-radius': '4px',
           'box-size-large-border-radius': '4px',
         });
       }
-      if (state.shape === 'none') {
-        Object.assign(config.theme.vars, {
+      if (shape === 'none') {
+        Object.assign(config.theme!.vars, {
           'box-size-mini-border-radius': '0',
           'box-size-small-border-radius': '0',
           'box-size-normal-border-radius': '0',
@@ -60,42 +79,58 @@ export const PageThemeUtils = (() => {
         });
       }
     }
-    if (!!state.inputMode) {
-      config.default.inputMode = state.inputMode;
+    if (!!inputMode) {
+      config.default.inputMode = inputMode;
+    }
+    if (!!buttonMode) {
+      config.default.buttonMode = buttonMode;
     }
     return config;
   });
 
-  const toggle = (isDark?: boolean) => {
-    state.dark = isDark == null ? !state.dark : isDark;
-    darkCache.set(state.dark);
+  const toggle = (isDark?: boolean, onlyCache?: boolean) => {
+    const dark: boolean = isDark == null ? !isDark : isDark;
+    !onlyCache && (state.dark = dark);
+    darkCache.set(dark);
   };
 
-  const primary = (val: string | null) => {
-    state.primaryKey = val;
+  const primary = (val: string | null, onlyCache?: boolean) => {
+    !onlyCache && (state.primaryKey = val);
     primaryCache.set(val);
   };
 
-  const size = (val: typeof ThemeSize.TYPE | null) => {
-    state.size = val;
+  const size = (val: typeof ThemeSize.TYPE | null, onlyCache?: boolean) => {
+    !onlyCache && (state.size = val);
     sizeCache.set(val);
   };
 
-  const shape = (val: typeof ThemeShape.TYPE | null) => {
-    state.shape = val;
+  const shape = (val: typeof ThemeShape.TYPE | null, onlyCache?: boolean) => {
+    !onlyCache && (state.shape = val);
     shapeCache.set(val);
   };
 
-  const inputMode = (val: 'flat' | 'stroke' | null) => {
-    state.inputMode = val;
+  const inputMode = (val: typeof InputMode.TYPE | null, onlyCache?: boolean) => {
+    !onlyCache && (state.inputMode = val);
     inputModeCache.set(val);
   };
 
-  const zoom = (val: number | null) => {
-    state.zoom = val;
+  const buttonMode = (val: typeof ThemeMode.TYPE | null, onlyCache?: boolean) => {
+    !onlyCache && (state.buttonMode = val);
+    buttonModeCache.set(val);
+  };
+
+  const zoom = (val: number | null, onlyCache?: boolean) => {
+    !onlyCache && (state.zoom = val);
     zoomCache.set(val);
   };
 
+  const clear = () => {
+    window.localStorage.clear();
+    window.location.reload();
+  };
+
+  const variable = (varName: string) => `var(--${getComponentCls(varName)})`;
+
   return {
     configuration,
     toggle,
@@ -104,24 +139,124 @@ export const PageThemeUtils = (() => {
     size,
     shape,
     inputMode,
+    buttonMode,
     zoom,
+    clear,
+    variable,
   };
 })();
 
-export const ThemePrimaryColors: Record<string, { label: string, primary: string | undefined } | undefined> = {
-  default: { label: '默认主题', primary: undefined, },
-  dustRed: { label: '薄暮', primary: '#f5222d', },
-  volcano: { label: '火山', primary: '#fa541c', },
-  subset: { label: '日暮', primary: '#fa8c16', },
-  gold: { label: '金盏花', primary: '#faad14', },
-  sunrise: { label: '日出', primary: '#fadb14', },
-  lime: { label: '青柠', primary: '#a0d911', },
-  polar: { label: '极光绿', primary: '#52c41a', },
-  cyan: { label: '明青', primary: '#13c2c2', },
-  daybreak: { label: '拂晓蓝', primary: '#1677ff', },
-  geek: { label: '极客蓝', primary: '#2f54eb', },
-  purple: { label: '酱紫', primary: '#722ed1', },
-  magenta: { label: '洋红', primary: '#eb2f96', },
+export const ThemePrimaryColors: Record<string, {
+  label: string,
+  themeConfig: {
+    dark: DeepPartial<Omit<iThemeConfiguration, 'dark'>>,
+    light: DeepPartial<Omit<iThemeConfiguration, 'dark'>>
+  } | undefined | string
+} | undefined> = {
+  default: { label: '默认主题', themeConfig: undefined, },
+  dustRed: {
+    label: '薄暮', themeConfig: '#f5222d'
+  },
+  volcano: {
+    label: '火山', themeConfig: '#fa541c'
+  },
+  subset: {
+    label: '日暮', themeConfig: '#fa8c16'
+  },
+  gold: {
+    label: '金盏花', themeConfig: '#faad14'
+  },
+  sunrise: {
+    label: '日出', themeConfig: '#fadb14'
+  },
+  lime: {
+    label: '青柠', themeConfig: '#a0d911'
+  },
+  polar: {
+    label: '极光绿', themeConfig: '#42b883'
+  },
+  cyan: {
+    label: '明青', themeConfig: '#13c2c2'
+  },
+  daybreak: {
+    label: '拂晓蓝', themeConfig: '#1677ff'
+  },
+  geek: {
+    label: '极客蓝', themeConfig: '#2f54eb'
+  },
+  purple: {
+    label: '酱紫', themeConfig: {
+      dark: {
+        base: { primary: '#7643ff', }
+      },
+      light: {
+        base: { primary: '#6a00ff', }
+      },
+    }
+  },
+  magenta: {
+    label: '洋红', themeConfig: {
+      dark: {
+        base: { primary: '#eb2f96', }
+      },
+      light: {
+        base: { primary: '#d90178', }
+      },
+    }
+  },
+  dark: {
+    label: '极夜', themeConfig: {
+      dark: {
+        base: { primary: '#FFFFFF', },
+      },
+      light: {
+        base: { primary: '#000000', },
+        vars: {
+          'primary-light-1': '#f2f3f5',
+          'primary-1': '#f2f3f5',
+          'primary-light-2': '#e1e2e7',
+          'primary-2': '#e1e2e7',
+          'primary-light-3': '#c9cdd4',
+          'primary-3': '#c9cdd4',
+          'primary-light-4': '#a9aeb8',
+          'primary-4': '#a9aeb8',
+          'primary-light-5': '#86909c',
+          'primary-5': '#86909c',
+          'primary-light-6': '#0c0e10',
+          'primary-6': '#0b0b0b',
+          'primary-light-7': '#464f5e',
+          'primary-7': '#464f5e',
+          'primary-light-8': '#272e3b',
+          'primary-8': '#272e3b',
+          'primary-light-9': '#1d2129',
+          'primary-9': '#111318',
+          'primary-light-10': '#0c0e10',
+          'primary-10': '#0b0b0b',
+        }
+      },
+    }
+  },
 };
 
 export default PageThemeUtils;
+
+export function getPrimaryColor(primaryKey?: string | undefined): { light: string, dark: string } {
+  const baseColor = {
+    light: BaseColors.light.primary,
+    dark: BaseColors.dark.primary,
+  };
+  if (!primaryKey) {
+    return baseColor;
+  }
+  const themeConfig = ThemePrimaryColors[primaryKey]?.themeConfig;
+
+  if (!themeConfig) {return baseColor;}
+
+  return typeof themeConfig === "string" ? {
+    dark: themeConfig,
+    light: themeConfig,
+  } : {
+    dark: themeConfig.dark.base!.primary!,
+    light: themeConfig.light.base!.primary!
+  };
+}

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

@@ -1,8 +1,8 @@
-import {computed, designComponent, getComponentCls, PropType, ref, useClasses, useNumber, watch} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, PropType, ref, useClasses, useNumber, watch} from "@peryl/react-compose";
 import {StyleProps, useStyle} from "../../uses/useStyle";
 import {EditProps, useEdit} from "../../uses/useEdit";
-import {classnames} from "plain-utils/dom/classnames";
-import {delay} from "plain-utils/utils/delay";
+import {classnames} from "@peryl/utils/classnames";
+import {delay} from "@peryl/utils/delay";
 import {Select} from "../Select";
 import {SelectOption} from "../SelectOption";
 import {Icon} from "../Icon";
@@ -67,9 +67,9 @@ export const Pagination = designComponent({
         return props.jumperNumberWidth;
       } else {
         return {
-          large: 140,
-          normal: 130,
-          small: 120,
+          large: 150,
+          normal: 140,
+          small: 130,
           mini: 120,
         }[styleComputed.value.size];
       }
@@ -252,7 +252,7 @@ export const Pagination = designComponent({
             onChange={emit.onSizeChange as any}
           >
             {(props.pageSizes || []).map((item) => (
-              <SelectOption label={i18n('table.rowPerPage', { num: item }).d(`${item} 条/页`)} val={item} key={item}/>
+              <SelectOption label={i18n.$it('table.rowPerPage', { num: item }).d(`${item} 条/页`)} val={item} key={item}/>
             ))}
           </Select>
         );
@@ -270,8 +270,8 @@ export const Pagination = designComponent({
               onEnter={handler.onJumperChange}
             >
               {{
-                prefix: () => <span style={{ whiteSpace: 'nowrap' }}>{i18n('base.go').d('前往')}</span>,
-                suffix: () => <span>{i18n('base.page').d('页')}</span>,
+                prefix: () => <span style={{ whiteSpace: 'nowrap' }}>{i18n.$it('base.go').d('前往')}</span>,
+                suffix: () => <span>{i18n.$it('base.page').d('页')}</span>,
               }}
             </InputNumber>
           </div>
@@ -303,7 +303,7 @@ export const Pagination = designComponent({
         );
 
         const blank = (<div className="pagination-blank" key="blank"/>);
-        const total = props.total == null ? null : (<div className="pagination-total" key="total"><span>{i18n('base.totalPage', { total: props.total }).d(`总共${props.total}条数据`)}</span></div>);
+        const total = props.total == null ? null : (<div className="pagination-total" key="total"><span>{i18n.$it('base.totalPage', { total: props.total }).d(`总共${props.total}条数据`)}</span></div>);
         const slot = !slots.default.isExist() ? null : (<div className="pagination-slot" key="slot">{slots.default()}</div>);
         const loading = !editComputed.value.loading ? null : (
           <div className="pagination-loading" key="loading">

package/src/packages/components/Pagination/pagination.scss

@@ -41,13 +41,14 @@
     box-sizing: border-box;
 
     &:hover {
-      background-color: plv(primary-2)
+      border-color: plv(primary-6);
+      color: plv(primary-6);
     }
 
     &:active, &.pagination-pager-button-active {
       background-color: plv(primary-6);
       border-color: plv(primary-6);
-      color: white;
+      color: plv(pbfc);
     }
   }
 
@@ -118,7 +119,7 @@
       &.pagination-pager-button-active {
         background-color: plv(gray-light-6);
         border-color: plv(gray-light-6);
-        color: white;
+        color: plv(pbfc);
       }
     }
   }

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

@@ -0,0 +1,46 @@
+import {designComponent, getComponentCls, PropType, useClasses} from "@peryl/react-compose";
+import './paragraph.scss';
+import {ParagraphItem} from "../ParagraphItem";
+import {i18n} from "../i18n";
+
+export const Paragraph = designComponent({
+  name: 'paragraph',
+  props: {
+    order: { type: Boolean },
+    list: { type: [String, Array] as PropType<string | string[]> },
+  },
+  slots: ['default'],
+  setup({ props, slots }) {
+
+    const classes = useClasses(() => [
+      getComponentCls('paragraph')
+    ]);
+
+    return () => {
+      const Type = props.order ? 'ol' : 'ul';
+      return (
+        <Type className={classes.value}>
+          {slots.default()}
+          {!!props.list?.length && (() => {
+            let arr: string[] = [];
+            if (typeof props.list === "string") {
+              const i18nResult = i18n.$intl(props.list).d(props.list);
+              if (Array.isArray(i18nResult)) {
+                arr.push(...i18nResult);
+              } else {
+                arr.push(i18nResult);
+              }
+            } else {
+              arr.push(...props.list);
+            }
+            return arr.map((item, index) => (
+              <ParagraphItem key={index}>{item}</ParagraphItem>
+            ));
+          })()}
+        </Type>
+      );
+    };
+  },
+});
+
+export default Paragraph;

package/src/packages/components/Paragraph/paragraph.scss

@@ -0,0 +1,12 @@
+@include comp(paragraph) {
+
+  margin: 0;
+  padding-inline-start: 2em;
+
+  @include comp(paragraph-item) {
+
+    & + .#{componentName(paragraph-item)} {
+      margin-top: 1em;
+    }
+  }
+}

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

@@ -0,0 +1,21 @@
+import {designComponent, getComponentCls, useClasses} from "@peryl/react-compose";
+
+export const ParagraphItem = designComponent({
+  name: 'paragraph-item',
+  props: {},
+  slots: ['default'],
+  setup({ props, slots }) {
+
+    const classes = useClasses(() => [
+      getComponentCls('paragraph-item')
+    ]);
+
+    return () => (
+      <li className={classes.value}>
+        {slots.default()}
+      </li>
+    );
+  },
+});
+
+export default ParagraphItem

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

@@ -1,13 +1,13 @@
-import {computed, designComponent, PropType} from "plain-design-composition";
+import {computed, designComponent, iMouseEvent, PropType} from "@peryl/react-compose";
 import {createPlcPropOptions, PlcEmitsOptions} from "../Table/plc/utils/plc.utils";
 import {PlcScopeSlotsOptions} from "../Table/plc/utils/plc.scope-slots";
 import {injectPlainTable} from "../Table/table/Table";
-import {$image} from "../$image";
 import {FileServiceUploadConfig} from "../$file";
 import $configuration from "../$configuration";
 import {formatImagePath, Image} from "../Image";
 import {usePlc} from "../Table/plc/use/usePlc";
 import ImageUploader from "../ImageUploader";
+import {$previewer} from "../$previewer";
 
 export const PlcImage = designComponent({
   name: 'plc-image',
@@ -29,14 +29,14 @@ export const PlcImage = designComponent({
     const upload = $configuration.use('upload');
 
     const size = computed(() => {
-      const bodyRowHeight = table.props.bodyRowHeight;
-      return Math.ceil((bodyRowHeight as number) - 20);
+      const bodyRowHeight = table.numberState.bodyRowHeight;
+      return Math.ceil((bodyRowHeight as number) - 8);
     });
 
     const urlPrefix = computed(() => props.urlPrefix || upload?.config.prefix);
 
-    const preview = (index: number) => {
-      $image.preview((table.dataRef.value.data || []).map(i => formatImagePath(i[props.field!], urlPrefix.value)), index);
+    const preview = (index: number, e: iMouseEvent) => {
+      $previewer.preview({ current: index, urls: (table.dataRef.value.data || []).map(i => formatImagePath(i[props.field!], urlPrefix.value)) }, e.currentTarget as any);
     };
 
     return usePlc({
@@ -52,8 +52,11 @@ export const PlcImage = designComponent({
             src={row[plc.props.field]}
             height={size.value}
             width={size.value}
+            minWidth={size.value}
+            minHeight={size.value}
+            hideTips
             fit="cover"
-            onClick={() => preview(node.state.index)}
+            onClick={(e) => preview(node.state.index, e)}
           />
         ),
         edit: ({ row, plc }) => !plc.props.field ? null :
@@ -64,12 +67,15 @@ export const PlcImage = designComponent({
             uploadConfig={props.uploadConfig}
             height={size.value}
             width={size.value}
+            minWidth={size.value}
+            minHeight={size.value}
+            hideTips
             handleDelete={() => {
               row[plc.props.field!] = null;
               row[props.imgKeyField!] = null;
             }}
             onUploadSuccess={(resp: any) => {
-              row[props.imgKeyField!] = resp.data.id;
+              row[props.imgKeyField!] = resp.result.id;
             }}
           />
       }

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

@@ -1,9 +1,9 @@
-import {computed, designComponent} from "plain-design-composition";
+import {computed, designComponent} from "@peryl/react-compose";
 import {createPlcPropOptions, PlcEmitsOptions} from "../Table/plc/utils/plc.utils";
 import {PlcScopeSlotsOptions} from "../Table/plc/utils/plc.scope-slots";
 import {usePlc} from "../Table/plc/use/usePlc";
 import _Object from "../Object";
-import {pick} from "../../utils/pick";
+import {pick} from "@peryl/utils/pick";
 import {ObjectPropsOption} from "../Object/object.utils";
 import {iFilterConfigObject} from "../FilterService/filter/fitler.object";
 

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

@@ -1,19 +1,29 @@
-import {designComponent} from "plain-design-composition";
+import {designComponent} from "@peryl/react-compose";
 import {OvPropsOption} from "../Ov/ov.utils";
 import {usePublicOv} from "../Ov/usePublicOv";
 import {PlcSelect} from "../Table/editor/PlcSelect";
 import {SelectOption} from "../SelectOption";
+import {PlcScopeSlotsOptions} from "../Table/plc/utils/plc.scope-slots";
+import {inheritSlots} from "../../utils/inheritSlots";
 
 export const PlcOv = designComponent({
   name: 'plc-ov',
   inheritPropsType: PlcSelect,
   props: OvPropsOption,
-  setup({ props }) {
+  scopeSlots: PlcScopeSlotsOptions,
+  slots: ['default'],
+  setup({ props, slots, scopeSlots }) {
     const { state } = usePublicOv({ props });
     return () => (
-      <PlcSelect>
-        {state.ovMetas.map(meta => (<SelectOption label={meta.name} val={meta.code} key={meta.code}/>))}
-      </PlcSelect>
+      <PlcSelect
+        v-slots={inheritSlots({
+          slots,
+          scopeSlots,
+          defaultSlots: {
+            default: () => state.ovMetas.map(meta => (<SelectOption label={meta.name} val={meta.code} key={meta.code}/>))
+          }
+        })}
+      />
     );
   },
 });

package/src/packages/components/Popup/PopupProvider.tsx

@@ -1,5 +1,4 @@
-import {createProvider} from "../../utils/createProvider";
-import {getComponentCls} from "plain-design-composition";
+import {createProvider, getComponentCls} from "@peryl/react-compose";
 import {iPopupAnimation, iPopupTrigger, iPopupUseOption} from "../usePopup/utils/popup.utils";
 
 /**

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

@@ -1,4 +1,4 @@
-import {ComponentPropsType, Fragment, computed, designComponent, getComponentCls, onBeforeUnmount, PropType, reactive, RenderNode, useClassCache, useModel, useStyleCache, watch, watchEffect} from "plain-design-composition";
+import {ComponentPropsType, computed, designComponent, Fragment, getComponentCls, onBeforeUnmount, PropType, reactive, RenderNode, useClassCache, useModel, useStyleCache, watch, watchEffect} from "@peryl/react-compose";
 import {iPopupAnimation, iPopupCustomOption, iPopupDefaultOption, iPopupPlacement, iPopupTrigger, iPopupUseOption, PopupItemProvide} from "../usePopup/utils/popup.utils";
 import {Reference} from "../Reference";
 import {usePopup} from "../usePopup";
@@ -6,7 +6,7 @@ import {useReferenceTrigger} from "../usePopup/trigger/useReferenceTrigger";
 import {ThemeSize, ThemeStatus} from "../../uses/useStyle";
 import {Scroll} from "../Scroll";
 import {decodePlacement} from "../usePopup/utils/decodePlacement";
-import {unit} from "plain-utils/string/unit";
+import {unit} from "@peryl/utils/unit";
 import './popup.scss';
 import {EditProps} from "../../uses/useEdit";
 import {iPopupProviderMeta, PopupProvider} from "./PopupProvider";
@@ -34,7 +34,8 @@ export const Popup = designComponent({
     beforeHide: { type: Function as PropType<iPopupCustomOption['beforeHide']> },         // 隐藏之前处理动作，返回false则阻止隐藏
     destroyOnClose: { type: Boolean, default: true, },                                                    // 是否在关闭的时候销毁内容
     type: { type: String as PropType<iPopupDefaultOption['type']> },                      // 类型，在打开一个popup的时候，会将同类型的popup自动关闭
-    to: { type: String as PropType<iPopupDefaultOption['to']> },                          // 挂载到某个dom节点下
+    appendToBody: { type: Boolean as PropType<iPopupDefaultOption['appendToBody']>, default: true },  // 挂载到某个dom节点下
+    transformRefreshOnScroll: { type: Boolean as PropType<iPopupDefaultOption['transformRefreshOnScroll']>, default: true },// scroll的时候refresh使用transform来优化
     offset: { type: Number as PropType<iPopupDefaultOption['offset']> },                  // 在direction方向上的距离
     autoSwitchDirection: { type: Boolean as PropType<iPopupDefaultOption['autoSwitchDirection']>, default: true },// 当空间不够时，是否自动切换direction
     size: { type: String as PropType<iPopupDefaultOption['size']> },                      // popup内容尺寸
@@ -50,6 +51,10 @@ export const Popup = designComponent({
     noArrow: { type: Boolean, default: null },                                            // 是否去掉箭头
     minWidth: { type: [Number, String] },                                                 // 最小宽度
     minHeight: { type: [Number, String] },                                                // 最小高度
+    maxTop: { type: [Number, Function] as PropType<iPopupUseOption['maxTop']> },          // 最大top
+    minTop: { type: [Number, Function] as PropType<iPopupUseOption['minTop']> },          // 最小top
+    maxLeft: { type: [Number, Function] as PropType<iPopupUseOption['maxLeft']> },        // 最大left
+    minLeft: { type: [Number, Function] as PropType<iPopupUseOption['minLeft']> },        // 最小left
     noBackground: { type: Boolean },                                                      // 透明背景色
     cover: { type: Boolean },                                                             // 覆盖reference
     noBorder: { type: Boolean },                                                          // 无边框
@@ -230,7 +235,8 @@ export const Popup = designComponent({
         noPadding: props.noPadding,
         destroyOnClose: props.destroyOnClose,
         type: props.type,
-        to: props.to,
+        appendToBody: props.appendToBody,
+        transformRefreshOnScroll: props.transformRefreshOnScroll,
         offset: props.offset,
         autoSwitchDirection: props.autoSwitchDirection,
         refreshOnScroll: props.refreshOnScroll,
@@ -245,6 +251,10 @@ export const Popup = designComponent({
         noArrow: props.noArrow,
         minHeight: props.minHeight,
         minWidth: props.minWidth,
+        maxTop: props.maxTop,
+        minTop: props.minTop,
+        maxLeft: props.maxLeft,
+        minLeft: props.minLeft,
         noBackground: props.noBackground,
         cover: props.cover,
         noBorder: props.noBorder,

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

@@ -1,5 +1,5 @@
 import './progress-bar.scss';
-import {computed, designComponent, getComponentCls, useRefs} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, useRefs} from "@peryl/react-compose";
 import {PROGRESS_DEFAULT_PROPS, ProgressStatus, useProgressColor} from "./progress.utils";
 import Icon from "../Icon";