sard-uniapp 1.13.3 → 1.14.1

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## [1.14.1](https://github.com/sutras/sard-uniapp/compare/v1.14.0...v1.14.1) (2025-05-13)
+
+
+### Bug Fixes
+
+* 修复 popup 组件 transform+fixed 渲染问题 ([5d0bf10](https://github.com/sutras/sard-uniapp/commit/5d0bf106df39e9c48c84bd7f76c71bb9306070c9))
+
+
+
+# [1.14.0](https://github.com/sutras/sard-uniapp/compare/v1.13.3...v1.14.0) (2025-05-12)
+
+
+### Features
+
+* cascader 新增 change-on-select 属性 ([71c1329](https://github.com/sutras/sard-uniapp/commit/71c13291780eea13ac7c198ae31a39e0dc49d531))
+
+
+
 ## [1.13.3](https://github.com/sutras/sard-uniapp/compare/v1.13.2...v1.13.3) (2025-05-12)
 
 

package/components/accordion/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-accordion-bg: var(--sar-emphasis-bg);
   --sar-accordion-active-bg: var(--sar-active-bg);
   --sar-accordion-border-color: var(--sar-border-color);

package/components/action-sheet/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-action-sheet-border-radius: var(--sar-rounded-xl);
   --sar-action-sheet-border-color: var(--sar-border-color);
   --sar-action-sheet-bg: var(--sar-emphasis-bg);

package/components/alert/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-alert-paddding-x: 32rpx;
   --sar-alert-paddding-y: 16rpx;
   --sar-alert-font-size: var(--sar-text-base);

package/components/avatar/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-avatar-width: 128rpx;
   --sar-avatar-height: 128rpx;
   --sar-avatar-font-size: 64rpx;

package/components/back-top/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-back-top-right: 48rpx;
   --sar-back-top-bottom: 96rpx;
   --sar-back-top-z-index: 1000;

package/components/badge/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-badge-height: 36rpx;
   --sar-badge-padding-x: 8rpx;
   --sar-badge-font-size: var(--sar-text-sm);

package/components/button/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-button-height-mini: 56rpx;
   --sar-button-padding-y-mini: 0;
   --sar-button-padding-x-mini: 12rpx;

package/components/calendar/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-calendar-current-month-font-size: var(--sar-text-lg);
 
   --sar-calendar-week-item-height: 64rpx;

package/components/card/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-card-border-radius: var(--sar-rounded-lg);
   --sar-card-border-color: var(--sar-border-color);
   --sar-card-bg: var(--sar-emphasis-bg);

package/components/cascader/cascader.vue

@@ -112,7 +112,8 @@ export default  _defineComponent({
     options: { type: Array, required: false },
     fieldKeys: { type: Object, required: false },
     hintText: { type: String, required: false },
-    labelRender: { type: Function, required: false }
+    labelRender: { type: Function, required: false },
+    changeOnSelect: { type: Boolean, required: false }
   }, defaultCascaderProps),
   emits: ["update:model-value", "change", "select"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -177,31 +178,25 @@ export default  _defineComponent({
       if (selectBack) {
         nextTabs = nextTabs.slice(0, tabIndex + 1);
       }
-      if (!isLastOption(option)) {
+      const isLast = isLastOption(option);
+      if (!isLast) {
         const nextTab = {
           options: option[mergedFieldKeys.value.children],
           selected: null
         };
         nextTabs.push(nextTab);
-        tabsCurrent.value = nextTabs.length - 1;
-      } else {
-        tabsCurrent.value = tabIndex;
-        const nextValue = option[mergedFieldKeys.value.value];
-        innerValue.value = nextValue;
-        emit(
-          "update:model-value",
-          nextValue,
-          nextTabs.map((tab) => tab.selected)
-        );
-        emit(
-          "change",
-          nextValue,
-          nextTabs.map((tab) => tab.selected)
-        );
       }
+      tabsCurrent.value = isLast ? tabIndex : nextTabs.length - 1;
       tempValue = option[mergedFieldKeys.value.value];
       tabs.value = nextTabs;
       emit("select", option, tabIndex);
+      if (isLast || props.changeOnSelect) {
+        const nextValue = option[mergedFieldKeys.value.value];
+        innerValue.value = nextValue;
+        const selectedOptions = nextTabs.map((tab) => tab.selected).filter(Boolean);
+        emit("update:model-value", nextValue, selectedOptions);
+        emit("change", nextValue, selectedOptions);
+      }
     };
     const innerPaceholder = computed(() => {
       return props.hintText || t("pleaseSelect");

package/components/cascader/common.d.ts

@@ -20,6 +20,7 @@ export interface CascaderProps {
     fieldKeys?: CascaderFieldKeys;
     hintText?: string;
     labelRender?: (option: CascaderOption) => string;
+    changeOnSelect?: boolean;
 }
 export declare const defaultCascaderProps: {
     options: () => never[];

package/components/cascader/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-cascader-wrapper-duration: var(--sar-duration);
   --sar-cascader-loading-wrapper-duration: var(--sar-duration);
 

package/components/cascader-input/cascader-input.vue

@@ -23,11 +23,13 @@
       <sar-cascader
         v-if="already"
         :model-value="popoutValue"
-        @change="onChange"
         :options="options"
         :field-keys="fieldKeys"
-        :placeholder="hintText"
+        :hint-text="hintText"
+        :change-on-select="changeOnSelect"
+        :label-render="labelRender"
         @select="(option, tabIndex) => $emit('select', option, tabIndex)"
+        @change="onChange"
       >
         <template #top="{ tabIndex }">
           <slot name="top" :tab-index="tabIndex"></slot>
@@ -77,6 +79,7 @@ export default  _defineComponent({
     fieldKeys: { type: Object, required: false },
     hintText: { type: String, required: false },
     labelRender: { type: Function, required: false },
+    changeOnSelect: { type: Boolean, required: false },
     placeholder: { type: String, required: false },
     readonly: { type: Boolean, required: false },
     disabled: { type: Boolean, required: false },
@@ -114,10 +117,12 @@ export default  _defineComponent({
       }
     };
     const onConfirm = () => {
-      innerValue.value = popoutValue.value;
-      emit("update:model-value", popoutValue.value, popoutOptions.value);
-      emit("change", popoutValue.value, popoutOptions.value);
-      inputValue.value = getInputValue();
+      if (popoutValue.value !== innerValue.value) {
+        innerValue.value = popoutValue.value;
+        inputValue.value = getInputValue();
+        emit("update:model-value", innerValue.value, popoutOptions.value);
+        emit("change", innerValue.value, popoutOptions.value);
+      }
     };
     const inputValue = ref("");
     const fieldkeys = computed(() => {

package/components/check-icon/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-check-icon-size: 1em;
   --sar-check-icon-square-border-radius: 0.15em;
   --sar-check-icon-border-color: var(--sar-quaternary-color);

package/components/checkbox/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-checkbox-group-column-gap: 24rpx;
   --sar-checkbox-group-row-gap: 16rpx;
 

package/components/checkbox-input/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-checkbox-input-max-height: 640rpx;
 }
 // #endvariables

package/components/collapse/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-collapse-transition-duration: var(--sar-duration);
 }
 // #endvariables

package/components/datetime-range-picker/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-datetime-range-picker-wrapper-duration: var(--sar-duration);
 }
 // #endvariables

package/components/dialog/common.d.ts

@@ -4,6 +4,8 @@ import { type TransitionHookEmits } from '../popup/common';
 export interface DialogProps {
     rootStyle?: StyleValue;
     rootClass?: string;
+    popupStyle?: StyleValue;
+    popupClass?: string;
     visible?: boolean;
     title?: string;
     message?: string;

package/components/dialog/dialog.vue

@@ -3,7 +3,8 @@
     effect="zoom"
     :visible="visible"
     :duration="duration"
-    :root-style="{ maxWidth: 'var(--sar-dialog-max-width)' }"
+    :root-class="popupClass"
+    :root-style="mergedPopupStyle"
     @overlay-click="onOverlayClick"
     @visible-hook="onVisibleHook"
   >
@@ -107,6 +108,8 @@ export default  _defineComponent({
   props:  _mergeDefaults({
     rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
     rootClass: { type: String, required: false },
+    popupStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
+    popupClass: { type: String, required: false },
     visible: { type: Boolean, required: false },
     title: { type: String, required: false },
     message: { type: String, required: false },
@@ -219,7 +222,13 @@ export default  _defineComponent({
     const dialogStyle = computed(() => {
       return stringifyStyle(props.rootStyle);
     });
-    const __returned__ = { props, emit, bem, t, innerVisible, loading, perhapsClose, onOverlayClick, onClose, onConfirm, onCancel, buttonProps, onVisibleHook, dialogClass, dialogStyle, SarPopup, SarButton, SarIcon };
+    const mergedPopupStyle = computed(() => {
+      return stringifyStyle(
+        { maxWidth: "var(--sar-dialog-max-width)" },
+        props.popupStyle
+      );
+    });
+    const __returned__ = { props, emit, bem, t, innerVisible, loading, perhapsClose, onOverlayClick, onClose, onConfirm, onCancel, buttonProps, onVisibleHook, dialogClass, dialogStyle, mergedPopupStyle, SarPopup, SarButton, SarIcon };
     return __returned__;
   }
 });

package/components/dialog/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-dialog-width: 640rpx;
   --sar-dialog-max-width: 90%;
   --sar-dialog-border-color: var(--sar-border-color);

package/components/dialog-agent/dialog-agent.vue

@@ -26,6 +26,8 @@ export default  _defineComponent({
     id: { type: String, required: false },
     rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
     rootClass: { type: String, required: false },
+    popupStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
+    popupClass: { type: String, required: false },
     visible: { type: Boolean, required: false },
     title: { type: String, required: false },
     message: { type: String, required: false },

package/components/divider/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-divider-margin-y: 32rpx;
   --sar-divider-margin-x: 16rpx;
   --sar-divider-gap: 32rpx;

package/components/dropdown/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-dropdown-height: 88rpx;
   --sar-dropdown-bg: var(--sar-emphasis-bg);
   --sar-dropdown-box-shadow: var(--sar-shadow-lg);

package/components/empty/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-empty-icon-font-size: 96rpx;
   --sar-empty-icon-color: var(--sar-gray-300);
   --sar-empty-icon-line-height: var(--sar-leading-none);

package/components/fab/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-fab-z-index: 1000;
   --sar-fab-right: 48rpx;
   --sar-fab-bottom: 96rpx;

package/components/floating-bubble/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-floating-bubble-z-index: 1000;
   --sar-floating-bubble-size: 96rpx;
   --sar-floating-bubble-color: var(--sar-white);

package/components/floating-panel/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-floating-panel-z-index: 1000;
   --sar-floating-panel-bg: var(--sar-emphasis-bg);
   --sar-floating-panel-border-radius: var(--sar-rounded-xl);

package/components/form/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-form-bg: var(--sar-emphasis-bg);
   --sar-form-card-border-radius: var(--sar-rounded-lg);
 

package/components/grid/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-grid-bg: var(--sar-emphasis-bg);
   --sar-grid-border-color: var(--sar-border-color);
   --sar-grid-active-bg: var(--sar-active-bg);

package/components/indexes/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-indexes-anchor-padding: 0 32rpx;
   --sar-indexes-anchor-font-size: var(--sar-text-base);
   --sar-indexes-anchor-line-height: 64rpx;

package/components/input/index.scss

@@ -69,6 +69,7 @@
 
   @include e(placeholder) {
     color: var(--sar-input-placeholder-color);
+    font-size: var(--sar-input-control-font-size);
     line-height: var(--sar-input-control-line-height);
 
     @include m(textarea) {

package/components/input/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-input-padding-y: 10rpx;
   --sar-input-padding-borderless-y: 12rpx;
   --sar-input-padding-x: 24rpx;

package/components/keyboard/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-keyboard-bg: var(--sar-gray-200);
   --sar-keyboard-padding: 12rpx;
 

package/components/list/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   // list
   --sar-list-border-color: var(--sar-border-color);
 

package/components/load-more/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-load-more-height: 100rpx;
   --sar-load-more-font-size: var(--sar-text-sm);
   --sar-load-more-color: var(--sar-tertiary-color);

package/components/loading/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-loading-icon-animation-duration: 0.8s;
 
   --sar-loading-scale-width: 9.38%;

package/components/menu/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-menu-item-border-radius: var(--sar-rounded);
   --sar-menu-item-height: 88rpx;
   --sar-menu-item-padding-x: 32rpx;

package/components/navbar/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-navbar-height: 88rpx;
   --sar-navbar-bg: var(--sar-emphasis-bg);
   --sar-navbar-z-index: 999;

package/components/notice-bar/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-notice-bar-min-height: 80rpx;
   --sar-notice-bar-padding-x: 32rpx;
   --sar-notice-bar-padding-y: 20rpx;

package/components/notify/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-notify-paddding-x: 32rpx;
   --sar-notify-paddding-y: 16rpx;
   --sar-notify-font-size: var(--sar-text-base);

package/components/overlay/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-overlay-bg: var(--sar-mask);
   --sar-overlay-z-index: 1000;
   --sar-overlay-duration: var(--sar-duration);

package/components/pagination/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-pagination-border-radius: var(--sar-rounded);
   --sar-pagination-border-color: var(--sar-border-color);
 

package/components/password-input/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-password-input-gap: 20rpx;
   --sar-password-input-border-color: var(--sar-border-color);
   --sar-password-input-active-border-color: var(--sar-primary);

package/components/picker/variables.scss

@@ -1,7 +1,8 @@
 @use '../style/base' as *;
 
 // #variables
-page {
+page,
+.sar-portal {
   --sar-picker-height: 480rpx;
 
   --sar-picker-item-height: 96rpx;

package/components/popout/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-popout-border-top-radius: var(--sar-rounded-xl);
   --sar-popout-bg: var(--sar-emphasis-bg);
 

package/components/popout-input/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-popout-input-arrow-font-size: var(--sar-text-base);
   --sar-popout-input-arrow-color: var(--sar-border-color);
   --sar-popout-input-active-opacity: var(--sar-active-opacity);

package/components/popover/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-popover-duration: var(--sar-duration-fast);
   --sar-popover-bg: var(--sar-emphasis-bg);
   --sar-popover-box-shadow: var(--sar-shadow-xl);

package/components/popup/popup.vue

@@ -1,22 +1,36 @@
 <template>
-  <sar-overlay
-    v-if="overlay"
-    :visible="visible"
-    :duration="duration"
-    :z-index="zIndex"
-    :background="background"
-    :transparent="transparent"
-    :root-style="overlayStyle"
-    :root-class="overlayClass"
-    @click="onOverlayClick"
-  />
-  <view
-    :class="popupClass"
-    :style="popupStyle"
-    @transitionend="onTransitionEnd"
-  >
-    <slot></slot>
-  </view>
+  <!-- #ifdef WEB -->
+  <teleport to="body">
+    <!-- #endif -->
+    <!-- #ifdef MP -->
+    <root-portal>
+      <!-- #endif -->
+      <view class="sar-portal">
+        <sar-overlay
+          v-if="overlay"
+          :visible="visible"
+          :duration="duration"
+          :z-index="zIndex"
+          :background="background"
+          :transparent="transparent"
+          :root-style="overlayStyle"
+          :root-class="overlayClass"
+          @click="onOverlayClick"
+        />
+        <view
+          :class="popupClass"
+          :style="popupStyle"
+          @transitionend="onTransitionEnd"
+        >
+          <slot></slot>
+        </view>
+      </view>
+      <!-- #ifdef MP -->
+    </root-portal>
+    <!-- #endif -->
+    <!-- #ifdef WEB -->
+  </teleport>
+  <!-- #endif -->
 </template>
 
 <script>

package/components/popup/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-popup-z-index: 1000;
   --sar-popup-duration: var(--sar-duration);
 }

package/components/progress-bar/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-progress-bar-height: 8rpx;
   --sar-progress-bar-border-radius: var(--sar-rounded-full);
 

package/components/progress-circle/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-progress-circle-size: 200rpx;
   --sar-progress-circle-track-color: var(--sar-secondary-bg);
   --sar-progress-circle-piece-color: var(--sar-primary);

package/components/pull-down-refresh/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-pull-down-refresh-header-font-size: var(--sar-text-sm);
   --sar-pull-down-refresh-header-color: var(--sar-tertiary-color);
 

package/components/qrcode/variables.scss

@@ -1,4 +1,4 @@
 // #variables
-// page {
+// page, .sar-portal {
 // }
 // #endvariables

package/components/radio/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-radio-group-column-gap: 24rpx;
   --sar-radio-group-row-gap: 16rpx;
 

package/components/radio-input/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-radio-input-max-height: 640rpx;
 }
 // #endvariables

package/components/rate/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-rate-gap: 20rpx;
   --sar-rate-star-font-size: 40rpx;
   --sar-rate-star-void-color: var(--sar-quaternary-color);

package/components/result/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-result-icon-font-size: 96rpx;
   --sar-result-icon-line-height: var(--sar-leading-none);
 

package/components/search/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-search-padding-x: 24rpx;
   --sar-search-padding-y: 16rpx;
   --sar-search-bg: var(--sar-emphasis-bg);

package/components/share-sheet/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-share-sheet-border-radius: var(--sar-rounded-xl);
   --sar-share-sheet-border-color: var(--sar-border-color);
   --sar-share-sheet-bg: var(--sar-emphasis-bg);

package/components/sidebar/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-sidebar-bg: var(--sar-body-bg);
   --sar-sidebar-width: 184rpx;
 

package/components/signature/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-signature-canvas-height: 400rpx;
   --sar-signature-canvas-bg: var(--sar-white);
   --sar-signature-full-bg: var(--sar-body-bg);

package/components/skeleton/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-skeleton-bg: var(--sar-secondary-bg);
   --sar-skeleton-border-radius: var(--sar-rounded-sm);
   --sar-skeleton-highlight-color: rgba(0, 0, 0, 0.08);

package/components/slider/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-slider-vertical-height: 300rpx;
   --sar-slider-padding: calc(var(--sar-slider-thumb-size) / 2);
 

package/components/space/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-space-small-gap: 8rpx;
   --sar-space-middle-gap: 16rpx;
   --sar-space-large-gap: 24rpx;

package/components/stepper/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-stepper-height: 64rpx;
   --sar-stepper-gap: 8rpx;
   --sar-stepper-bg: var(--sar-secondary-bg);

package/components/steps/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-steps-step-font-size: var(--sar-text-base);
   --sar-steps-step-active-opacity: var(--sar-active-opacity);
   --sar-steps-step-min-height: 72rpx;

package/components/style/mixins/theme-dark.scss

@@ -1,12 +1,14 @@
 @mixin theme-dark {
   @media (prefers-color-scheme: dark) {
-    page {
+    page,
+    .sar-portal {
       @content;
     }
   }
 
   /* #ifdef WEB */
-  :root[data-sard-theme='dark'] page {
+  :root[data-sard-theme='dark'] page,
+  :root[data-sard-theme='dark'] .sar-portal {
     @content;
   }
   /* #endif */

package/components/style/variables.scss

@@ -3,7 +3,8 @@
 @use './functions' as *;
 
 // #variables
-page {
+page,
+.sar-portal {
   // # 灰度值
   --sar-white: #{$sar-white};
   --sar-gray-100: #{$sar-gray-100};

package/components/swiper-dot/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-swiper-dot-bottom: 20rpx;
   --sar-swiper-dot-gap: 12rpx;
   --sar-swiper-dot-size: 12rpx;

package/components/switch/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-switch-font-size: 60rpx;
   --sar-switch-width: calc(1em / 6 * 10);
   --sar-switch-height: 1em;

package/components/tabbar/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-tabbar-height: 100rpx;
   --sar-tabbar-border-color: var(--sar-border-color);
   --sar-tabbar-bg: var(--sar-emphasis-bg);

package/components/table/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-table-border-color: var(--sar-border-color);
   --sar-table-bg: var(--sar-emphasis-bg);
 

package/components/tabs/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-tabs-tab-height: 88rpx;
   --sar-tabs-tab-font-size: var(--sar-text-base);
   --sar-tabs-tab-line-height: var(--sar-leading-snug);

package/components/tag/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-tag-line-height: var(--sar-leading-tight);
   --sar-tag-color: var(--sar-white);
 

package/components/timeline/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-timeline-item-header-width: 96rpx;
 
   --sar-timeline-item-line-width: 1px;

package/components/toast/variables.scss

@@ -1,7 +1,8 @@
 @use '../style/base' as *;
 
 // #variables
-page {
+page,
+.sar-portal {
   --sar-toast-top: 10%;
   --sar-toast-bottom: 10%;
 

package/components/tree/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-tree-border-color: var(--sar-border-color);
   --sar-tree-bg: var(--sar-emphasis-bg);
   --sar-tree-duration: var(--sar-duration);

package/components/upload/variables.scss

@@ -1,5 +1,6 @@
 // #variables
-page {
+page,
+.sar-portal {
   --sar-upload-preview-width: 176rpx;
   --sar-upload-preview-height: 176rpx;
   --sar-upload-preview-gap: 16rpx;

package/package.json

@@ -2,7 +2,7 @@
   "id": "sard-uniapp",
   "name": "sard-uniapp",
   "displayName": "sard-uniapp",
-  "version": "1.13.3",
+  "version": "1.14.1",
   "description": "sard-uniapp 是一套基于 Uniapp + Vue3 框架开发的兼容多端的 UI 组件库",
   "main": "index.js",
   "scripts": {