@neatui/vue 3.1.0 → 4.0.0

package/README.md

@@ -2,7 +2,7 @@
 
 NeatUI Vue component package for Vue 3 and Nuxt projects.
 
-`@neatui/vue` is the maintained component package. `@neatui/nuxt` has stopped maintenance as of 2026-05-26; Nuxt users should use `@neatui/vue` directly.
+Nuxt users should use `@neatui/vue` directly.
 
 ## Installation
 
@@ -71,15 +71,6 @@ const data = reactive({
 </script>
 ```
 
-## Migration From @neatui/nuxt
-
-```diff
-- import { Input, FormLoader, Pagination } from '@neatui/nuxt';
-+ import { Input, FormLoader, Pagination } from '@neatui/vue';
-```
-
-`@neatui/nuxt` should be removed from new Nuxt projects.
-
 ## Documentation
 
 [http://neatui.fekit.cn](http://neatui.fekit.cn)

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@neatui/vue",
-  "version": "3.1.0",
+  "version": "4.0.0",
   "description": "basic component ui",
   "main": "./src/index.ts",
   "license": "MIT",
   "author": "xiaojunbo",
   "peerDependencies": {
+    "pinia": "^3.0.3",
     "vue": "^3.2.0",
     "vue-router": "^4.0.0"
   },
@@ -15,9 +16,11 @@
   "devDependencies": {
     "@rollup/plugin-typescript": "^11.1.6",
     "@types/sortablejs": "^1.15.8",
+    "pinia": "^3.0.3",
     "postcss-scss": "^4.0.9",
     "rollup-plugin-scss": "^4.0.0",
     "rollup-plugin-terser": "^7.0.2",
+    "sass": "^1.80.7",
     "typescript": "^5.1.6",
     "vue": "^3.5.18",
     "vue-router": "^4.5.1"
@@ -31,7 +34,7 @@
     "@fekit/scrollto": "^3.0.3",
     "@fekit/toast": "^2.7.2",
     "@fekit/utils": "^6.0.0",
-    "@neatui/css": "^3.15.0",
+    "@neatui/css": "^4.0.0",
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@vue/compiler-sfc": "^3.4.30",

package/rollup.config.js

@@ -3,14 +3,40 @@ const commonjs = require('@rollup/plugin-commonjs');
 const vue = require('rollup-plugin-vue');
 const postcss = require('rollup-plugin-postcss');
 const typescript = require('@rollup/plugin-typescript');
+const ts = require('typescript');
+const path = require('path');
+const { pathToFileURL } = require('url');
 const { terser } = require('rollup-plugin-terser');
 const scss = require('postcss-scss');
 
+const vueTypeScript = () => ({
+  name: 'vue-typescript',
+  transform(code, id) {
+    if (!/\.vue\?.*type=script.*lang\.ts$/.test(id)) return null;
+
+    const result = ts.transpileModule(code, {
+      fileName: id,
+      compilerOptions: {
+        target: ts.ScriptTarget.ESNext,
+        module: ts.ModuleKind.ESNext,
+        sourceMap: true
+      }
+    });
+
+    return {
+      code: result.outputText,
+      map: result.sourceMapText ? JSON.parse(result.sourceMapText) : null
+    };
+  }
+});
+
 module.exports = {
   input: 'src/components/loader/index.ts',
   output: {
     file: 'dist/bundle.js',
-    format: 'es'
+    format: 'es',
+    inlineDynamicImports: true,
+    sourcemap: true
   },
   plugins: [
     resolve({
@@ -19,8 +45,22 @@ module.exports = {
     commonjs(),
     vue({
       css: false,
-      compileTemplate: true
+      compileTemplate: true,
+      preprocessStyles: true,
+      preprocessOptions: {
+        scss: {
+          importers: [
+            {
+              findFileUrl(url) {
+                if (url !== '@neatui/css') return null;
+                return pathToFileURL(path.resolve(__dirname, '../css/neatui.scss'));
+              }
+            }
+          ]
+        }
+      }
     }),
+    vueTypeScript(),
     postcss({
       extensions: ['.css', '.scss'],
       extract: true,

package/src/components/basic/IDraggable@b.vue

@@ -4,7 +4,7 @@
       v-for="(item, idx) in list || []"
       :key="idx"
       style="user-select: none"
-      class="drag-move-item b-solid bk-line b-xs n-sm"
+      class="drag-move-item b-solid b-line b-xs n-sm"
       :data-move-ing="state.__moveing"
       @mousedown="fMoveSta($event, list, idx)"
       @mousemove="fMoveIng($event, list, idx)"

package/src/components/basic/IFollowView.vue

@@ -18,11 +18,11 @@
       >
         <div ref="box" :ui-tips-box="state.pos" :class="tipBoxClass" :style="tipBoxStyle">
           <div ui-hide=">mob" class="mob-follow-tips w-full n-ss" ui-flex="row xm">
-            <div class="w-sm"></div>
+            <div class="w-xs*s"></div>
             <div>
               <h5 class="bold">{{ title }}</h5>
             </div>
-            <div class="w-sm" ui-flex="row rm">
+            <div class="w-xs*s" ui-flex="row rm">
               <button ui-btn="@a none s :square" @click="toggle">
                 <i class="icon icon-close"></i>
               </button>

package/src/components/basic/LayerView/Layer.vue

@@ -30,9 +30,195 @@
     return (window as any)._FEKIT_LAYER_TASKS;
   })();
 
-  // 获取活跃的弹层
-  const getActiveLayer = () => {
-    return Object.values(_tasks).filter((task: any) => task.view > 0);
+  type InlineStyleSnapshot = {
+    hadProperty: boolean;
+    priority: string;
+    value: string;
+  };
+
+  type InlineStyleMutation = {
+    appliedPriority: string;
+    appliedValue: string;
+    element: HTMLElement;
+    property: string;
+    snapshot: InlineStyleSnapshot;
+  };
+
+  type ScrollLockSnapshot = {
+    body: HTMLElement;
+    bodyHadStyleAttribute: boolean;
+    mutations: Array<InlineStyleMutation>;
+    scrollX: number;
+    scrollY: number;
+  };
+
+  type ScrollLockState = {
+    owners: Set<object>;
+    snapshot?: ScrollLockSnapshot;
+  };
+
+  const SCROLL_LOCK_STATE = Symbol.for('@neatui/vue.Layer.scrollLock');
+
+  const getScrollLockState = (): ScrollLockState => {
+    if (!_tasks[SCROLL_LOCK_STATE]) {
+      Object.defineProperty(_tasks, SCROLL_LOCK_STATE, {
+        configurable: true,
+        value: {
+          owners: new Set<object>(),
+        },
+      });
+    }
+    return _tasks[SCROLL_LOCK_STATE];
+  };
+
+  const hasInlineProperty = (style: CSSStyleDeclaration, property: string) => {
+    for (let index = 0; index < style.length; index += 1) {
+      if (style.item(index) === property) return true;
+    }
+    return false;
+  };
+
+  const captureInlineProperty = (element: HTMLElement, property: string): InlineStyleSnapshot => ({
+    hadProperty: hasInlineProperty(element.style, property),
+    priority: element.style.getPropertyPriority(property),
+    value: element.style.getPropertyValue(property),
+  });
+
+  const matchesAppliedStyle = (mutation: InlineStyleMutation) => {
+    return (
+      mutation.element.style.getPropertyValue(mutation.property) === mutation.appliedValue &&
+      mutation.element.style.getPropertyPriority(mutation.property) === mutation.appliedPriority
+    );
+  };
+
+  const restoreInlineStyle = (mutation: InlineStyleMutation, force = false) => {
+    if (!force && !matchesAppliedStyle(mutation)) return;
+    if (mutation.snapshot.hadProperty) {
+      mutation.element.style.setProperty(mutation.property, mutation.snapshot.value, mutation.snapshot.priority);
+    } else {
+      mutation.element.style.removeProperty(mutation.property);
+    }
+  };
+
+  const removeEmptyStyleAttribute = (element: HTMLElement, previouslyPresent: boolean) => {
+    const inlineStyle = element.getAttribute('style');
+    if (!previouslyPresent && (element.style.length === 0 || inlineStyle === null || inlineStyle.trim() === '')) {
+      element.removeAttribute('style');
+    }
+  };
+
+  const applyLockedStyle = (
+    mutations: Array<InlineStyleMutation>,
+    element: HTMLElement,
+    property: string,
+    value: string,
+  ) => {
+    const appliedPriority = 'important';
+    if (element.style.getPropertyValue(property) === value && element.style.getPropertyPriority(property) === appliedPriority) {
+      return;
+    }
+    const mutation: InlineStyleMutation = {
+      appliedPriority,
+      appliedValue: value,
+      element,
+      property,
+      snapshot: captureInlineProperty(element, property),
+    };
+    mutations.push(mutation);
+    element.style.setProperty(property, value, appliedPriority);
+    // CSSOM 会规范化 -0px、颜色等值；恢复时以浏览器实际写入值判断所有权。
+    mutation.appliedValue = element.style.getPropertyValue(property);
+    mutation.appliedPriority = element.style.getPropertyPriority(property);
+  };
+
+  const restoreScrollPosition = (scrollX: number, scrollY: number) => {
+    const root = document.documentElement;
+    const rootHadStyleAttribute = root.hasAttribute('style');
+    const mutation: InlineStyleMutation = {
+      appliedPriority: 'important',
+      appliedValue: 'auto',
+      element: root,
+      property: 'scroll-behavior',
+      snapshot: captureInlineProperty(root, 'scroll-behavior'),
+    };
+
+    try {
+      root.style.setProperty(mutation.property, mutation.appliedValue, mutation.appliedPriority);
+      window.scrollTo(scrollX, scrollY);
+    } catch {
+      // 浏览器拒绝滚动时仍必须恢复临时写入的 html 样式。
+    } finally {
+      restoreInlineStyle(mutation);
+      removeEmptyStyleAttribute(root, rootHadStyleAttribute);
+    }
+  };
+
+  const acquireScrollLock = (owner: object) => {
+    if (!env.client || !document.body || !document.documentElement) return;
+    const lock = getScrollLockState();
+    if (lock.owners.has(owner)) return;
+    if (lock.owners.size > 0) {
+      lock.owners.add(owner);
+      return;
+    }
+
+    const body = document.body;
+    const root = document.documentElement;
+    const scrollbarWidth = root.clientWidth > 0 ? Math.max(0, window.innerWidth - root.clientWidth) : 0;
+    const computedPaddingRight = Number.parseFloat(window.getComputedStyle(body).paddingRight) || 0;
+    const snapshot: ScrollLockSnapshot = {
+      body,
+      bodyHadStyleAttribute: body.hasAttribute('style'),
+      mutations: [],
+      scrollX: window.scrollX || root.scrollLeft || body.scrollLeft || 0,
+      scrollY: window.scrollY || root.scrollTop || body.scrollTop || 0,
+    };
+
+    try {
+      // CSSOM 会把 overflow 简写展开成长属性；逐项持有才能无损恢复原先不同的 x/y 值和 priority。
+      applyLockedStyle(snapshot.mutations, body, 'overflow-x', 'hidden');
+      applyLockedStyle(snapshot.mutations, body, 'overflow-y', 'hidden');
+      applyLockedStyle(snapshot.mutations, body, 'position', 'fixed');
+      applyLockedStyle(snapshot.mutations, body, 'top', `-${snapshot.scrollY}px`);
+      applyLockedStyle(snapshot.mutations, body, 'left', `-${snapshot.scrollX}px`);
+      applyLockedStyle(snapshot.mutations, body, 'width', '100%');
+      if (scrollbarWidth > 0) {
+        applyLockedStyle(snapshot.mutations, body, 'padding-right', `${computedPaddingRight + scrollbarWidth}px`);
+      }
+      lock.snapshot = snapshot;
+      lock.owners.add(owner);
+    } catch {
+      for (const mutation of [...snapshot.mutations].reverse()) {
+        try {
+          restoreInlineStyle(mutation, true);
+        } catch {
+          // 单个 CSSOM 写入失败不能阻止其余属性回滚。
+        }
+      }
+      removeEmptyStyleAttribute(body, snapshot.bodyHadStyleAttribute);
+      lock.snapshot = undefined;
+    }
+  };
+
+  const releaseScrollLock = (owner: object) => {
+    if (!env.client) return;
+    const lock = getScrollLockState();
+    if (!lock.owners.delete(owner) || lock.owners.size > 0) return;
+    const snapshot = lock.snapshot;
+    lock.snapshot = undefined;
+    if (!snapshot) return;
+
+    for (const mutation of [...snapshot.mutations].reverse()) {
+      try {
+        restoreInlineStyle(mutation);
+      } catch {
+        // 继续恢复其余由 Layer 持有的属性。
+      }
+    }
+    removeEmptyStyleAttribute(snapshot.body, snapshot.bodyHadStyleAttribute);
+    restoreScrollPosition(snapshot.scrollX, snapshot.scrollY);
+    // 某些浏览器在 scrollTo 后会把已访问过的 CSSStyleDeclaration 重新序列化为空 style 属性。
+    removeEmptyStyleAttribute(snapshot.body, snapshot.bodyHadStyleAttribute);
   };
 
   // 类型定义
@@ -73,33 +259,8 @@
   const state = reactive({
     view: 0,
     params: {},
-    top: 0,
-    sw: 0,
   });
-
-  function disableScroll() {
-    if (!env.client) return;
-    state.top = document.documentElement.scrollTop;
-    const sw = window.innerWidth - document.documentElement.clientWidth;
-    state.sw = sw;
-    document.body.style.overflow = 'hidden';
-    document.body.style.position = 'fixed';
-    document.body.style.top = `-${state.top}px`;
-    document.body.style.width = '100%';
-    document.body.style.paddingRight = `${sw}px`;
-  }
-
-  function enableScroll() {
-    if (!env.client) return;
-    document.body.style.removeProperty('overflow');
-    document.body.style.removeProperty('position');
-    document.body.style.removeProperty('top');
-    document.body.style.removeProperty('width');
-    document.body.style.removeProperty('padding-right');
-    if (state.top) {
-      window.scrollTo(0, state.top);
-    }
-  }
+  const scrollLockOwner = {};
 
   watch(
     () => state.view,
@@ -107,19 +268,8 @@
       if (_tasks[props.id]) {
         _tasks[props.id].view = view;
       }
-
-      const active = getActiveLayer() || [];
-
-      if (view === 2) {
-        if (active.length === 1) {
-          disableScroll();
-        }
-      }
-      if (view === 0) {
-        if (!active.length) {
-          enableScroll();
-        }
-      }
+      if (view > 0) acquireScrollLock(scrollLockOwner);
+      else releaseScrollLock(scrollLockOwner);
     },
     { deep: true, immediate: true },
   );
@@ -224,6 +374,7 @@
 
   // 卸载弹层
   onBeforeUnmount(() => {
+    releaseScrollLock(scrollLockOwner);
     delete _tasks[id];
   });
 </script>

package/src/components/display/Calendar.vue

@@ -1,6 +1,6 @@
 <template>
-  <div :class="`${frame ? 'b-solid bk-line b-xs r-sm' : ''}`" ui-flex="col xy">
-    <div ui-calendar-head="" class="nx-sl ny-sm b-solid bk-line bb-xs">
+  <div :class="`${frame ? 'b-solid b-line b-xs r-sm' : ''}`" ui-flex="col xy">
+    <div ui-calendar-head="" class="nx-sl ny-sm b-solid b-line bb-xs">
       <div ui-flex="row lm"></div>
       <div ui-flex="row cm" class="nx-ss-sub">
         <p class="mx-ss-sub">
@@ -11,15 +11,15 @@
       </div>
       <div ui-flex="row rm"></div>
     </div>
-    <div ui-flex="row am" class="fs-xs bold nx-sl nt-sm"><span>日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span></div>
+    <div ui-flex="row am" class="fs-ss bold nx-sl nt-sm"><span>日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span></div>
     <div>
       <ul ui-calendar-days="" ui-flex="row lm" class="flex-wrap nx-sm">
         <li class="ew7 n-sm ux-none" v-for="(item, idx) in curr.days" :key="idx">
           <div v-if="item.day" @click="change(item)" ui-cover="-xs">
             <div
               ui-flex="col cm"
-              class="r-ss b-solid bk-none b-xs"
-              :class="`${item.isToday ? 'bk-main-o-ls' : item.isLastMonth || item.isNextMonth ? 'co-note' : item.isHoliday ? 'co-risk' : ''} ${
+              class="r-ss b-solid b-none b-xs"
+              :class="`${item.isToday ? 'b-main-o-ls' : item.isLastMonth || item.isNextMonth ? 'co-note' : item.isHoliday ? 'co-risk' : ''} ${
                 state.selected && state.selected === item.date ? 'active bg-main-o-ls co-fore' : 'hover-bg-weak'
               }`"
             >
@@ -54,7 +54,7 @@
         </div>
       </div>
       <div ui-flex="row cm" class="nx-ss-sub">
-        <ul class="fs-xs n-sm-sub" ui-flex="row lm">
+        <ul class="fs-ss n-sm-sub" ui-flex="row lm">
           <li ui-btn="@a s none">年</li>
           <li ui-btn="@a s none">月</li>
           <li ui-btn="@a s none">日</li>

package/src/components/display/CalendarReg.vue

@@ -1,6 +1,6 @@
 <template>
-  <div :class="`${frame ? 'b-solid bk-line b-xs r-sm' : ''}`" ui-flex="col xy">
-    <div ui-calendar-head="" class="nx-sl ny-sm b-solid bk-line bb-xs">
+  <div :class="`${frame ? 'b-solid b-line b-xs r-sm' : ''}`" ui-flex="col xy">
+    <div ui-calendar-head="" class="nx-sl ny-sm b-solid b-line bb-xs">
       <div ui-flex="row lm"></div>
       <div ui-flex="row cm" class="nx-ss-sub">
         <p class="mx-ss-sub">
@@ -11,15 +11,15 @@
       </div>
       <div ui-flex="row rm"></div>
     </div>
-    <div ui-flex="row am" class="fs-xs bold nx-sl nt-sm"><span>日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span></div>
+    <div ui-flex="row am" class="fs-ss bold nx-sl nt-sm"><span>日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span></div>
     <div>
       <ul ui-calendar-days="" ui-flex="row lm" class="flex-wrap nx-sm">
         <li class="ew7 n-sm ux-none" v-for="(item, idx) in curr.days" :key="idx">
           <div v-if="item.day" @click="change(item)" ui-cover="-xs">
             <div
               ui-flex="col cm"
-              class="r-ss b-solid bk-none b-xs"
-              :class="`${item.isToday ? 'bk-main-o-ls' : item.isLastMonth || item.isNextMonth ? 'co-note' : item.isHoliday ? 'co-risk' : ''} ${
+              class="r-ss b-solid b-none b-xs"
+              :class="`${item.isToday ? 'b-main-o-ls' : item.isLastMonth || item.isNextMonth ? 'co-note' : item.isHoliday ? 'co-risk' : ''} ${
                 state.selected && state.selected === item.date ? 'active bg-main-o-ls co-fore' : 'hover-bg-weak'
               }`"
             >
@@ -54,7 +54,7 @@
         </div>
       </div>
       <div ui-flex="row cm" class="nx-ss-sub">
-        <ul class="fs-xs n-sm-sub" ui-flex="row lm">
+        <ul class="fs-ss n-sm-sub" ui-flex="row lm">
           <li ui-btn="@a s none">年</li>
           <li ui-btn="@a s none">月</li>
           <li ui-btn="@a s none">日</li>

package/src/components/display/PhotoEditor.vue

@@ -12,8 +12,8 @@
     <div v-else class="photo-editor-viewer bg-weak my-mm" ui-flex="row cm">
       <input type="file" class="input pa" @change="change" />
       <div class="ac input-icon">
-        <i class="icon icon-upload fs-ml"></i>
-        <div class="fs-sl">请先上传图片</div>
+        <i class="icon icon-upload fs-ll"></i>
+        <div class="fs-ms">请先上传图片</div>
       </div>
     </div>
     <div ui-flex="row cm" class="mr-ls-sub">

package/src/components/display/TreeView.vue

@@ -10,7 +10,7 @@
                 <div v-if="isObject(p)" v-bind="p.attrs" v-on="event(p, item)">
                   <div v-html="isFunction(p.value) ? p.value(item) : p.value"></div>
                 </div>
-                <div v-else v-html="isFunction(p) ? item(item) : p"></div>
+                <div v-else v-html="isFunction(p) ? p(item) : p"></div>
               </template>
               <slot name="prefix" :data="item"></slot>
             </div>
@@ -23,7 +23,7 @@
                 <div v-if="isObject(s)" v-bind="s.attrs" v-on="event(s, item)">
                   <div v-html="isFunction(s.value) ? s.value(item) : s.value"></div>
                 </div>
-                <div v-else v-html="isFunction(s) ? item(item) : s"></div>
+                <div v-else v-html="isFunction(s) ? s(item) : s"></div>
               </template>
             </div>
           </div>
@@ -40,6 +40,7 @@
         :line="line"
         :level="level + 1"
         :root="false"
+        @click="(data: any) => emits('click', data)"
         @select="(data: any) => emits('select', data)"
       >
         <template #prefix="{ data = {} }: any = {}">
@@ -131,7 +132,7 @@
           _event[key] = (...args: any) => {
             // 如果有click事件则把默认事件与配置事件合并执行
             if (key === 'click') {
-              console.log(107, data.child?.length);
+              emits('click', data);
               if (props.optional === 'end') {
                 if (!data?.child?.length) {
                   emits('update:modelValue', data.value);

package/src/components/form/Cascader.vue

@@ -12,7 +12,7 @@
       <template #tips v-if="!readonly && !disabled">
         <div v-if="state.flatOpts?.length && state.flatOpts[0]?.length > 0" ui-flex="row">
           <template v-for="(opt, optIndex) in state.flatOpts" :key="optIndex">
-            <ul v-if="opt?.length" class="min-h-ms max-h-ls" :class="`nx-sm lh-ml ${optIndex === 0 ? '' : 'bl-xs bk-back b-solid'}`" ui-scroll=":y s">
+            <ul v-if="opt?.length" class="min-h-ms*s max-h-xl*s" :class="`nx-sm lh-ml ${optIndex === 0 ? '' : 'bl-xs b-back b-solid'}`" ui-scroll=":y s">
               <!-- 多选 -->
               <template v-if="multiple">
                 <li v-for="(item, idx) of opt" :key="idx" class="ux-hover nx-sm r-ss nowrap" @click="multiSelect(item, optIndex)">
@@ -87,7 +87,7 @@
 
 <script lang="ts" setup>
   import { reactive, ref, watch, computed } from 'vue';
-  import { Input } from '.';
+  import Input from './Input.vue';
   import IFollowView from '../basic/IFollowView.vue';
   import { deepcopy } from '@fekit/utils';
 
@@ -163,7 +163,7 @@
   const bindProps: any = computed(() => {
     const result: any = { ...props };
     delete result.modelValue;
-    return bindProps;
+    return result;
   });
 
   const formName = new Date().getTime().toString();

package/src/components/form/DatePicker.vue

@@ -18,8 +18,8 @@
 </template>
 <script setup lang="ts">
   import { reactive, watch, ref } from 'vue';
-  import { Input } from '.';
-  import { DateView } from '.';
+  import Input from './Input.vue';
+  import DateView from './DateView.vue';
   import { IFollowView } from '../basic';
   const ifollow: any = ref(null);
   // 方法

package/src/components/form/{DateRangePicker@v3.vue → DateRangePicker.vue}

@@ -18,7 +18,8 @@
 </template>
 <script setup lang="ts">
   import { reactive, watch, ref } from 'vue';
-  import { InputRange, DateRangeView } from '.';
+  import InputRange from './InputRange.vue';
+  import DateRangeView from './DateRangeView.vue';
   import { IFollowView } from '../basic';
   const ifollow: any = ref(null);
   // 方法

package/src/components/form/{DateRangeView@v3.vue → DateRangeView.vue}

@@ -1,8 +1,8 @@
 <template>
-  <div :class="`${frame ? 'b-solid bk-line b-xs r-sm' : ''}`" ui-flex="col xy" style="width: 41em">
+  <div :class="`${frame ? 'b-solid b-line b-xs r-sm' : ''}`" ui-flex="col xy" style="width: 41em">
     <div class="flex-block" ui-flex="row xy">
-      <div class="w-ll flex-fixed" ui-flex="col xy">
-        <div ui-date-head="" class="nx-sl mt-ss ny-sm b-solid bk-back" ui-flex="row xm">
+      <div class="w-ss*m flex-fixed" ui-flex="col xy">
+        <div ui-date-head="" class="nx-sl mt-ss ny-sm b-solid b-back" ui-flex="row xm">
           <div ui-flex="row lm" class="o-lm">
             <div ui-btn="@a s none :square" @click="prev(1, { y: -1 })">
               <Icon name="double-arrow-left" />
@@ -36,7 +36,7 @@
         </div>
         <div ui-date-body="">
           <div class="nb-sm">
-            <ul ui-flex="row am" class="fs-xs nx-sm nt-sm">
+            <ul ui-flex="row am" class="fs-ss nx-sm nt-sm">
               <li class="flex-block ac"><span>日</span></li>
               <li class="flex-block ac"><span>一</span></li>
               <li class="flex-block ac"><span>二</span></li>
@@ -58,7 +58,7 @@
                   >
                     <div
                       ui-flex="col cm"
-                      class="r-sm b-solid bk-none b-xs my-ss ux-scale"
+                      class="r-sm b-solid b-none b-xs my-ss ux-scale"
                       style="width: 1.8em; height: 1.8em"
                       :class="`${item.isLastMonth || item.isNextMonth ? 'co-case' : item.holiday ? 'co-risk' : ''} ${
                         item.selected ? 'active bg-main-o-lm co-fore' : 'hover-bg-weak'
@@ -75,8 +75,8 @@
         </div>
       </div>
       <div class="flex-block"></div>
-      <div class="w-ll flex-fixed" ui-flex="col xy">
-        <div ui-date-head="" class="nx-sl mt-ss ny-sm b-solid bk-back" ui-flex="row xm">
+      <div class="w-ss*m flex-fixed" ui-flex="col xy">
+        <div ui-date-head="" class="nx-sl mt-ss ny-sm b-solid b-back" ui-flex="row xm">
           <div ui-flex="row lm">
             <div v-if="idate(sta.panel).time < idate(end.panel).update({ y: -1 }).time" ui-btn="@a s none :square" @click="prev(2, { y: -1 })">
               <Icon name="double-arrow-left" />
@@ -110,7 +110,7 @@
         </div>
         <div ui-date-body="">
           <div class="nb-sm">
-            <ul ui-flex="row am" class="fs-xs nx-sm nt-sm">
+            <ul ui-flex="row am" class="fs-ss nx-sm nt-sm">
               <li class="flex-block ac"><span>日</span></li>
               <li class="flex-block ac"><span>一</span></li>
               <li class="flex-block ac"><span>二</span></li>
@@ -132,7 +132,7 @@
                   >
                     <div
                       ui-flex="col cm"
-                      class="r-sm b-solid bk-none b-xs my-ss ux-scale"
+                      class="r-sm b-solid b-none b-xs my-ss ux-scale"
                       style="width: 1.8em; height: 1.8em"
                       :class="`${item.isLastMonth || item.isNextMonth ? 'co-case' : item.holiday ? 'co-risk' : ''} ${
                         item.selected ? 'active bg-main-o-lm co-fore' : 'hover-bg-weak'
@@ -149,7 +149,7 @@
         </div>
       </div>
     </div>
-    <div v-if="tools" ui-date-foot="" ui-flex="row xm" class="nx-sl ny-sl b-solid bk-line-o-ls bt-xs">
+    <div v-if="tools" ui-date-foot="" ui-flex="row xm" class="nx-sl ny-sl b-solid b-line-o-ls bt-xs">
       <div ui-flex="row lm" class="nl-ss">
         <p v-if="sta.value || end.value">
           <span class="nowrap">已选：</span>
@@ -157,7 +157,7 @@
         </p>
         <div v-else-if="com.shortcuts?.length" ui-flex="row lm">
           <span class="nowrap">推荐：</span>
-          <div class="mr-sm-sub nx-sl-sub ny-ss-sub lh-ss nowrap fs-ss dib-sub" ui-scroll=":x y:hidden">
+          <div class="mr-sm-sub nx-sl-sub ny-ss-sub lh-ss nowrap fs-sm dib-sub" ui-scroll=":x y:hidden">
             <p v-for="(item, idx) in com.shortcuts" :key="idx" class="bg-main-o-xs co-main r-xl" ui-btn="@a xs none :round" @click="item?.func">{{ item?.text }}</p>
             <p class="bg-main-o-xs co-main r-xl" ui-btn="@a xs none :round"><Icon class="co-main" name="more" /></p>
           </div>