plain-design 1.0.0-beta.3 → 1.0.0-beta.31

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

@@ -29,7 +29,7 @@ export const VirtualTable = designComponent({
   },
   slots: ['colgroup', 'head', 'headColgroup'],
   scopeSlots: {
-    default: (scope: { item: any, index: number, virtualIndex: number }) => {},
+    default: (scope: { item: any, index: number, vIndex: number, vid: string }) => {},
   },
   setup({ props, slots, scopeSlots, event: { emit } }) {
 
@@ -70,7 +70,7 @@ export const VirtualTable = designComponent({
     const strutStyles = useStyles(style => {
       Object.assign(style, virtual.strutStyles.value);
       !!props.width && (style.width = unit(props.width));
-      style.minHeight = bodyTableWrapperStyles.value.minHeight
+      style.minHeight = bodyTableWrapperStyles.value.minHeight;
     });
 
     const contentStyles = useStyles(style => {
@@ -157,7 +157,7 @@ export const VirtualTable = designComponent({
                   <>
                     {!!headHeight.value && (
                       <div className="virtual-table-head-table-wrapper" ref={onRef.head}>
-                        <table className="virtual-table-head-table" style={headTableStyles.value} {...PublicTableAttrs}>
+                        <table className="virtual-table-head-table" style={headTableStyles.value} {...PublicTableAttrs} data-virtual-head>
                           {slots.headColgroup()}
                           <thead>{slots.head()}</thead>
                         </table>
@@ -168,16 +168,16 @@ export const VirtualTable = designComponent({
                         <div className="virtual-table-body-table-wrapper" ref={onRef.body} style={bodyTableWrapperStyles.value}>
                           <table className="virtual-table-body-table" {...{ ...PublicTableAttrs, style: tableStyles.value }}>
                             {slots.colgroup()}
-                            <tbody>{list.map((node, virtualIndex) => scopeSlots.default({ ...node, virtualIndex }))}</tbody>
+                            <tbody>{list.map((item, vIndex) => scopeSlots.default({ ...item, vIndex, vid: item.id }))}</tbody>
                           </table>
                         </div>
                       </div>
                     </div>
                     {!!props.summaryData?.length && (
                       <div className="virtual-table-summary-table-wrapper" ref={onRef.summary}>
-                        <table className="virtual-table-summary-table" style={summaryTableStyles.value}{...PublicTableAttrs}>
+                        <table className="virtual-table-summary-table" style={summaryTableStyles.value}{...PublicTableAttrs} data-virtual-foot>
                           {slots.colgroup()}
-                          <tbody>{!props.summaryData ? null : props.summaryData.map((item, index) => scopeSlots.default({ item, index, virtualIndex: index }))}</tbody>
+                          <tbody>{!props.summaryData ? null : props.summaryData.map((item, index) => scopeSlots.default({ item, index, vIndex: index, vid: `__smy__${index}` }))}</tbody>
                         </table>
                       </div>
                     )}

package/src/packages/components/createProvider/index.ts

@@ -0,0 +1,5 @@
+import {createProvider} from "../../utils/createProvider";
+
+export {createProvider};
+
+export default createProvider;

package/src/packages/components/nextPopupId/index.ts

@@ -0,0 +1,5 @@
+import {nextPopupId} from "../usePopup/utils/popup.utils";
+
+export default nextPopupId;
+
+export {nextPopupId};

package/src/packages/components/useDialog/DialogService.tsx

@@ -10,6 +10,7 @@ import Icon from "../Icon";
 import {ThemeStatusIcons} from "../Application/theme/theme.utils";
 import Input from "../Input";
 import InputNumber from "../InputNumber";
+import $message from "../$message";
 
 /**
  * 弹框服务单个组件
@@ -133,7 +134,15 @@ export const DialogService = createApplicationServiceComponent<iDialogServiceOpt
         const dialogProps = { ...targetOption.value.dialogProps };
 
         /*wrap handleConfirm*/
-        dialogProps.handleConfirm = async (close: () => void) => targetOption.value.customOption.handleConfirm?.({ close, editValue: state.editValue });
+        dialogProps.handleConfirm = async (close: () => void) => {
+          if (!!targetOption.value.customOption.editRequired) {
+            if (state.editValue == null || !state.editValue.trim().length) {
+              $message.warn('不能为空！');
+              return false;
+            }
+          }
+          return targetOption.value.customOption.handleConfirm?.({ close, editValue: state.editValue });
+        };
 
         /*wrap onClose*/
         dialogProps.onClose = () => onClose.exec(undefined);
@@ -165,6 +174,7 @@ export const DialogService = createApplicationServiceComponent<iDialogServiceOpt
                 v-model={state.editValue}
                 readonly={option.editReadonly}
                 onEnter={onEnter}
+                status={option.editRequired ? 'warn' : undefined}
               />
             );
             break;
@@ -176,6 +186,7 @@ export const DialogService = createApplicationServiceComponent<iDialogServiceOpt
                 v-model={state.editValue}
                 readonly={option.editReadonly}
                 onEnter={onEnter}
+                status={option.editRequired ? 'warn' : undefined}
               />
             );
             break;
@@ -189,6 +200,7 @@ export const DialogService = createApplicationServiceComponent<iDialogServiceOpt
                 v-model={state.editValue}
                 readonly={option.editReadonly}
                 onEnter={onEnter}
+                status={option.editRequired ? 'warn' : undefined}
               />
             );
             break;

package/src/packages/components/useImage/ImageService.tsx

@@ -8,6 +8,7 @@ import {Icon} from "../Icon";
 import i18n from "../i18n";
 import Transition from "../Transition";
 import {APPLICATION_SERVICE_CONTAINER_CLASS} from "../Application/utils/application.utils";
+import {ClientZoom} from "../ClientZoom";
 
 const nextCount = createCounter("image_preview");
 
@@ -167,18 +168,20 @@ export const ImageService = createApplicationServiceComponent<ImageServicePrevie
         startY: 0,
       };
       const mousedown = (e: MouseEvent) => {
+        const { clientX, clientY } = ClientZoom.getClientPosition(e);
         freezeState = {
           startTop: state.adjust.top || 0,
           startLeft: state.adjust.left || 0,
-          startX: e.clientX,
-          startY: e.clientY,
+          startX: clientX,
+          startY: clientY,
         };
         document.addEventListener('mousemove', mousemove);
         document.addEventListener('mouseup', mouseup);
       };
       const mousemove = (e: MouseEvent) => {
-        state.adjust.left = e.clientX - freezeState.startX + freezeState.startLeft;
-        state.adjust.top = e.clientY - freezeState.startY + freezeState.startTop;
+        const { clientX, clientY } = ClientZoom.getClientPosition(e);
+        state.adjust.left = clientX - freezeState.startX + freezeState.startLeft;
+        state.adjust.top = clientY - freezeState.startY + freezeState.startTop;
       };
       const mouseup = (e: MouseEvent) => {
         document.removeEventListener('mousemove', mousemove);

package/src/packages/components/useMessage/Message.tsx

@@ -2,6 +2,7 @@ import {designComponent, getComponentCls, iMouseEvent, nextIndex, onMounted, Pro
 import {closeMessageServiceHook, iMessageServiceOption} from "./message.service.utils";
 import Icon from "../Icon";
 import './message.scss';
+import {useStyle} from "../../uses/useStyle";
 
 export const Message = designComponent({
   name: 'message-service',
@@ -16,9 +17,12 @@ export const Message = designComponent({
 
     onMounted(() => emit.onReady());
 
+    const { styleComputed } = useStyle();
+
     const classes = useClasses(() => [
       getComponentCls('message'),
-      `message-status-${props.option.status}`
+      `message-status-${props.option.status}`,
+      `message-size-${styleComputed.value.size}`
     ]);
     const styles = { zIndex: nextIndex() };
 

package/src/packages/components/useMessage/message.scss

@@ -128,7 +128,7 @@
     }
     .message-close {
       @include prefix(icon) {
-        color: white;
+       color: plv(pbfc);
       }
 
       &:after {
@@ -142,4 +142,8 @@
       }
     }
   }
+
+  @include sizeMixin(message, (font-size)) {
+    padding: calc(#{plv(dropdown-size-#{$name}-padding-y)} * 2);
+  }
 }

package/src/packages/components/useNotice/notice.scss

@@ -65,7 +65,7 @@
     cursor: pointer;
 
     @include prefix(icon) {
-      color: white;
+      color: plv(pbfc);
       position: relative;
       z-index: 1;
 

package/src/packages/components/usePopup/PopupItem.tsx

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls, iHTMLDivElement, iHTMLElement, iTransitionEvent, nextIndex, onBeforeUnmount, onMounted, Portal, PropType, reactive, SimpleFunction, useClassCache, useRefs, useStyleCache} from "plain-design-composition";
+import {designComponent, getComponentCls, iHTMLDivElement, iHTMLElement, iMouseEvent, iTransitionEvent, nextIndex, onBeforeUnmount, onMounted, Portal, PropType, reactive, SimpleFunction, useClassCache, useRefs, useStyleCache} from "plain-design-composition";
 import {ePopupAnimation, iPopupOption, iPopupRefs, PopupItemProvide} from "./utils/popup.utils";
 import {createEffects} from "plain-utils/utils/createEffects";
 import {delay} from "plain-utils/utils/delay";
@@ -82,6 +82,7 @@ export const PopupItem = designComponent({
         'popup-item-is-dark': !application.value.theme.dark && !state.option.status && !!state.option.dark,
         [`popup-item-status-${state.option.status}`]: !!state.option.status,
         'popup-item-dark-app': application.value.theme.dark,
+        'popup-item-no-interactive': !state.option.interactive,
       }
     ]);
 
@@ -193,7 +194,7 @@ export const PopupItem = designComponent({
             clearTimeout(timer);
             timer = null;
           }
-          methods.refresh(true);
+          methods.refresh(state.option.transformRefreshOnScroll);
           timer = setTimeout(() => {
             methods.refresh();
           }, 100);
@@ -262,6 +263,14 @@ export const PopupItem = designComponent({
         };
         return check;
       })(),
+      /**
+       * 阻止点击popup的事件冒泡，如果有div包裹popup几点，在react中即使popup不是这个div的子节点也会导致事件冒泡到div上
+       * @author  韦胜健
+       * @date    2023/8/10 11:27
+       */
+      onClickPopup: (e: iMouseEvent) => {
+        e.stopPropagation();
+      },
     };
 
     onMounted(async () => {
@@ -361,34 +370,44 @@ export const PopupItem = designComponent({
     PopupItemProvide.provide(state);
 
     return () => (
-      !!state.option.reference && <Portal to={`.${getComponentCls(APPLICATION_SERVICE_CONTAINER_CLASS)}`}>
-        <div
-          data-id={state.option.id}
-          ref={onRef.popup}
-          className={classes.value}
-          data-popup-show={String(state.isShow)}
-          onTransitionEnd={handler.onTransitionend}
-          style={styles.value}
-        >
-          {/*slide的情况下，arrow得放body外面，避免被overflow:hidden*/}
-          {!!state.option.arrowSize && !state.option.noArrow && state.option.animation !== ePopupAnimation.scale && (<div className="popup-item-arrow" ref={onRef.arrow}/>)}
-          <div
-            ref={onRef.body}
-            className="popup-item-body"
-          >
-            {/*scale的情况下，arrow得放body里边，一遍能够继承body的transform:scale*/}
-            {!!state.option.arrowSize && !state.option.noArrow && state.option.animation === ePopupAnimation.scale && (<div className="popup-item-arrow" ref={onRef.arrow}/>)}
+      !!state.option.reference && (
+        (() => {
+          const content = (
             <div
-              ref={onRef.content}
-              style={contentStyles.value}
-              className="popup-item-content"
+              data-id={state.option.id}
+              ref={onRef.popup}
+              className={classes.value}
+              data-popup-show={String(state.isShow)}
               onTransitionEnd={handler.onTransitionend}
+              style={styles.value}
+              onClick={handler.onClickPopup}
             >
-              {slots.default.isExist() ? slots.default() : state.option.render()}
+              {/*slide的情况下，arrow得放body外面，避免被overflow:hidden*/}
+              {!!state.option.arrowSize && !state.option.noArrow && state.option.animation !== ePopupAnimation.scale && (<div className="popup-item-arrow" ref={onRef.arrow}/>)}
+              <div
+                ref={onRef.body}
+                className="popup-item-body"
+              >
+                {/*scale的情况下，arrow得放body里边，一遍能够继承body的transform:scale*/}
+                {!!state.option.arrowSize && !state.option.noArrow && state.option.animation === ePopupAnimation.scale && (<div className="popup-item-arrow" ref={onRef.arrow}/>)}
+                <div
+                  ref={onRef.content}
+                  style={contentStyles.value}
+                  className="popup-item-content"
+                  onTransitionEnd={handler.onTransitionend}
+                >
+                  {slots.default.isExist() ? slots.default() : state.option.render()}
+                </div>
+              </div>
             </div>
-          </div>
-        </div>
-      </Portal>
+          );
+          return state.option.appendToBody ? (
+            <Portal to={`.${getComponentCls(APPLICATION_SERVICE_CONTAINER_CLASS)}`}>
+              {content}
+            </Portal>
+          ) : content;
+        })()
+      )
     );
   },
 });

package/src/packages/components/usePopup/popup-item.scss

@@ -97,7 +97,7 @@
 
   &.popup-item-is-dark {
     --#{componentName('popup-item-background')}: rgba(0, 0, 0, 0.88);
-    color: white;
+    color: plv(pbfc);
     filter: none;
   }
 
@@ -112,6 +112,10 @@
   &.popup-item-no-border {
     filter: none !important;
   }
+
+  &.popup-item-no-interactive {
+    pointer-events: none;
+  }
   /*---------------------------------------animation-------------------------------------------*/
 
   &.popup-item-animation-fade {

package/src/packages/components/usePopup/usePopupManager.tsx

@@ -62,7 +62,8 @@ export function usePopupManager({ getSize }: { getSize: () => typeof ThemeSize.T
         trigger: ePopupTrigger.hover,
         animation: ePopupAnimation.fade,
         destroyOnClose: true,
-        to: 'body',
+        appendToBody: true,
+        transformRefreshOnScroll: true,
         offset: 0,
         offsetAlign: 0,
         autoSwitchDirection: true,

package/src/packages/components/usePopup/utils/popup.utils.ts

@@ -62,7 +62,8 @@ export interface iPopupDefaultOption {
   trigger: iPopupTrigger,                     // 触发类型
   animation: iPopupAnimation,                 // 动画类型
   destroyOnClose: boolean,                    // 关闭的时候销毁popup
-  to: string,                                 // 挂载到某个dom节点下
+  appendToBody: boolean,                      // 挂载到某个dom节点下
+  transformRefreshOnScroll: boolean,          // scroll的时候refresh使用transform来优化
   offset: number,                             // 在direction方向上的距离
   offsetAlign: number,                        // 在align方向上的偏移距离
   autoSwitchDirection: boolean,               // 当空间不够时，是否自动切换direction

package/src/packages/components/usePopupManager/index.ts

@@ -0,0 +1,5 @@
+import {usePopupManager} from "../usePopup/usePopupManager";
+
+export default usePopupManager;
+
+export {usePopupManager};

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

@@ -0,0 +1,5 @@
+import {usePopupTrigger} from '../usePopup/trigger/usePopupTrigger';
+
+export default usePopupTrigger;
+
+export {usePopupTrigger};

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

@@ -0,0 +1,5 @@
+import {useReferenceTrigger} from '../usePopup/trigger/useReferenceTrigger';
+
+export default useReferenceTrigger;
+
+export {useReferenceTrigger};

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

@@ -46,6 +46,8 @@ export function createTooltip(option: iTooltipServiceOption, popup: iPopupServic
         if (option.overflow) {
           if (staticState.reference!.scrollWidth > staticState.reference!.offsetWidth) {
             state.isOverflow = true;
+          } else {
+            state.isOverflow = false;
           }
         }
       },

package/src/packages/components/useWatchAutoClear/index.ts

@@ -0,0 +1,5 @@
+import {useWatchAutoClear} from "../../utils/watchEffectAutoClear";
+
+export {useWatchAutoClear};
+
+export default useWatchAutoClear;

package/src/packages/entry.tsx

@@ -54,6 +54,7 @@ export {TabGroup} from './components/TabGroup';
 export {Tab} from './components/Tab';
 export {Tag} from './components/Tag';
 export {Tree} from './components/Tree';
+export {TreeNodeWithMenu} from './components/TreeNodeWithMenu';
 export {ColorPicker} from './components/ColorPicker';
 export {TimePicker} from './components/TimePicker';
 export {DatePicker} from './components/DatePicker';
@@ -85,9 +86,28 @@ export {CascadePanel} from './components/CascadePanel';
 export {usePopup} from './components/usePopup';
 export {Popup} from './components/Popup';
 export {createPopup} from './components/createPopup';
+export type {
+  iPopupAlign,
+  iPopupAnimation,
+  iPopupBoundary,
+  iPopupCustomOption,
+  iPopupDefaultOption,
+  iPopupDirection,
+  iPopupManager,
+  iPopupOption,
+  iPopupPlacement,
+  iPopupRects,
+  iPopupRefreshBuildParams,
+  iPopupRefreshParams,
+  iPopupRefs,
+  iPopupTrigger,
+  iPopupUseOption,
+} from './components/usePopup/utils/popup.utils';
 export {createScrollUtils} from './components/createScrollUtils';
 export {useAutoScrollUtils} from './components/useAutoScrollUtils';
 export {ClientZoom} from './components/ClientZoom';
+export {Layout} from './components/Layout';
+export {LayoutSection} from './components/LayoutSection';
 
 export {VirtualTable} from './components/VirtualTable';
 export {Table} from './components/Table';
@@ -127,12 +147,18 @@ export type {iOvMeta} from './components/$ov/ov.utils';
 export {$configuration} from './components/$configuration';
 export {createAddressService} from './components/createAddressService';
 export {createHttp} from './components/createHttp';
+export type {
+  iHttpRequestConfig,
+  iPlainResponseDataType,
+  iHttpResponseDataType
+} from './components/createHttp/http.utils';
 
 export {Address} from './components/Address';
 export {AddressCascade} from './components/AddressCascade';
 export {eAddressTypeEnum} from './components/$address/address.utils';
 export type {iAddressSyncMeta, iAddressLazyMeta} from './components/$address/address.utils';
 export type {iPlainAddressData} from './components/createPlainAddressService';
+export {Empty} from './components/Empty';
 
 export {FormInput} from './components/FormInput';
 export {FormSelect} from './components/FormSelect';
@@ -162,5 +188,18 @@ export type {
   iTableOptionCacheRegistryConfig,
   iTableOptionGetCacheParam
 } from './components/AutoTable/use/useTableOption.cache.utils';
+export {PageThemeUtils} from './components/PageThemeUtils';
+export {ThemePrimaryColors} from './components/ThemePrimaryColors';
+export {ThemeEditor} from './components/ThemeEditor';
+export {useReferenceTrigger} from './components/useReferenceTrigger';
+export {usePopupTrigger} from './components/usePopupTrigger';
+export {useWatchAutoClear} from './components/useWatchAutoClear';
+export {nextPopupId} from './components/nextPopupId';
+export {createProvider} from './components/createProvider';
+export {usePopupManager} from './components/usePopupManager';
+export {useEdit, EditProps, EDIT_PROVIDER} from './uses/useEdit';
+export type {tEditComputed, tEditControl, EditProvideData} from './uses/useEdit';
+export {useStyle, StyleProps, ThemeShape, ThemeSize, ThemeStatus} from './uses/useStyle';
+export type {tStyleComputed, UseStyleProvideData} from './uses/useStyle';
 
 setComponentPrefix(globalComponentPrefix);

package/src/packages/uses/useEdit.ts

@@ -14,7 +14,7 @@ export const EditProps = {
   multiple: { type: Boolean },                                            // 是否多选
 } as const;
 
-interface EditProvideData {
+export interface EditProvideData {
   disabled: boolean | null,
   readonly: boolean | null,
   loading: boolean | null,
@@ -74,6 +74,10 @@ export const useEdit = useFunctionWrapper(
       }
     }
 
+    onBeforeUnmount(() => {
+      editComputed.effect.stop();
+    });
+
     return {
       editState,
       editComputed,

package/src/packages/uses/useStyle.tsx

@@ -1,4 +1,4 @@
-import {computed, inject, PropType, provide} from "plain-design-composition";
+import {computed, inject, onBeforeUnmount, PropType, provide} from "plain-design-composition";
 import {useFunctionWrapper} from "./useFunctionWrapper";
 import {createEnum} from "plain-utils/utils/createEnum";
 import {ApplicationConfigurationProvider} from "../components/Application/utils/application.utils";
@@ -19,7 +19,7 @@ export const StyleProps = {
   status: { type: String as PropType<typeof ThemeStatus.TYPE> },                    //  'secondary', 'primary', 'success', 'warn', 'error'
 } as const;
 
-interface UseStyleProvideData {
+export interface UseStyleProvideData {
   shape: typeof ThemeShape.TYPE,
   size: typeof ThemeSize.TYPE,
   status?: typeof ThemeStatus.TYPE,
@@ -62,6 +62,14 @@ export const useStyle = useFunctionWrapper('style', (ctx, option: UseStyleOption
 
   provide(USE_STYLE_PROVIDER, styleComputed);
 
+  onBeforeUnmount(() => {
+    setTimeout(() => {
+      (styleComputed.value as any).ctx = null;
+      (styleComputed.value as any).parent = null;
+      styleComputed.effect.stop();
+    });
+  });
+
   return { styleComputed };
 });
 

package/src/packages/utils/ClientZoom.ts

@@ -1,8 +1,10 @@
+import {iMouseEvent} from 'plain-design-composition';
+
 export const ClientZoom = (() => {
   let zoom: '' | number = '';
   return {
-    get: () => {
-      return zoom;
+    get: (): number => {
+      return zoom === '' ? 1 : zoom;
     },
     set: (_zoom: number | null) => {
       const __zoom = _zoom == null ? '' : _zoom;
@@ -24,5 +26,25 @@ export const ClientZoom = (() => {
         };
       }
     },
+    getClientPosition: (e: iMouseEvent | MouseEvent): { clientX: number, clientY: number, offsetX: number, offsetY: number, } => {
+      const { clientX, clientY, offsetX, offsetY } = 'nativeEvent' in e ? e.nativeEvent : e;
+      return {
+        clientX: ClientZoom.formatClientValue(clientX),
+        clientY: ClientZoom.formatClientValue(clientY),
+        offsetX: ClientZoom.formatClientValue(offsetX),
+        offsetY: ClientZoom.formatClientValue(offsetY),
+      };
+    },
+    formatClientValue: (val: number) => {
+      return ClientZoom.zoomPosition(val);
+    },
+    zoomPosition(val: number) {
+      const zoom = ClientZoom.get();
+      return Number((val / zoom).toFixed(2));
+    },
+    zoomSize(val: number) {
+      const zoom = ClientZoom.get();
+      return Number((val * zoom).toFixed(2));
+    },
   };
 })();

package/src/packages/utils/useMove.tsx

@@ -1,6 +1,7 @@
 import {createEffects} from "plain-utils/utils/createEffects";
 import {watch} from "plain-design-composition";
 import {removeUnit} from "plain-utils/string/removeUnit";
+import {ClientZoom} from "../components/ClientZoom";
 
 export function useMove(
   {
@@ -26,6 +27,8 @@ export function useMove(
 
   const onMousedown = (e: MouseEvent) => {
 
+    const { clientX, clientY } = ClientZoom.getClientPosition(e);
+
     const { effects: draggierEffects } = createEffects();
 
     const el = e.currentTarget as HTMLElement;
@@ -35,16 +38,19 @@ export function useMove(
     const dragState = {
       isDragging: false,
       start: {
-        x: e.clientX,
-        y: e.clientY,
+        x: clientX,
+        y: clientY,
         left: Number(removeUnit(style.left) || 0),
         top: Number(removeUnit(style.top) || 0),
       }
     };
 
     const onMousemove = (e: MouseEvent) => {
-      const durX = e.clientX - dragState.start.x;
-      const durY = e.clientY - dragState.start.y;
+
+      const { clientX, clientY } = ClientZoom.getClientPosition(e);
+
+      const durX = clientX - dragState.start.x;
+      const durY = clientY - dragState.start.y;
 
       if (!dragState.isDragging) {
         if (durX >= 5 || durY >= 5) {

package/src/pages/index/App.tsx

@@ -2,8 +2,9 @@ import {designPage} from 'plain-design-composition';
 import './app.scss';
 import {AppHome} from "./home/AppHome";
 import {DemoRowController} from "./Demo/DemoRowController";
-import {Application} from "../../packages";
-import {PageThemeUtils} from "./PageThemeUtils";
+import {Application, ClientZoom, PageThemeUtils} from "../../packages";
+
+PageThemeUtils.state.zoom != null && ClientZoom.set(PageThemeUtils.state.zoom);
 
 export const App = designPage(() => {
   return () => (

package/src/pages/index/Demo/DemoRow.scss

@@ -93,8 +93,8 @@
 
 .demo-row-collector-operator {
   position: fixed;
-  bottom: 20px;
-  right: 20px;
+  bottom: 8px;
+  right: 0;
   display: flex;
   align-items: center;
 
@@ -105,16 +105,19 @@
     font-size: 12px;
     cursor: pointer;
     color: plv(text-2);
+    display: flex;
+    align-items: center;
 
     &:first-child {
       border-right: none;
-      border-bottom-left-radius: 2px;
-      border-top-left-radius: 2px;
+      border-bottom-left-radius: plv(box-size-normal-border-radius);
+      border-top-left-radius: plv(box-size-normal-border-radius);
     }
 
     &:last-child {
-      border-bottom-right-radius: 2px;
-      border-top-right-radius: 2px;
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+      border-right: none;
     }
 
     & > span {

package/src/pages/index/Demo/DemoRowController.tsx

@@ -26,11 +26,11 @@ export const DemoRowController = designComponent({
           <div className="demo-row-collector-operator">
             <div onClick={() => methods.changeAll(false)}>
               <span>全部收起</span>
-              <Icon icon="pi-left" style={{ transform: 'rotate(-90deg)' }}/>
+              <Icon icon="pi-fullscreen-exit"/>
             </div>
             <div onClick={() => methods.changeAll(true)}>
               <span>全部展开</span>
-              <Icon icon="pi-left" style={{ transform: 'rotate(90deg)' }}/>
+              <Icon icon="pi-fullscreen"/>
             </div>
           </div>
         </>