@peng_kai/kit 0.3.0-beta.4 → 0.3.0-beta.41

package/admin/components/text/src/Amount.v2.vue

@@ -0,0 +1,131 @@
+<!-- eslint-disable jsdoc/no-multi-asterisks -->
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import bignumber from 'bignumber.js';
+import CurrencyIcon, {textIcons} from '../../currency/src/CurrencyIcon.vue';
+import Num from './Num.vue';
+
+// 由于 Vue 目前不支持 Props `interface AmountProps extends CurrencyIconProps, NumProps{}` 多继承写法，所以暂时这样写
+interface AmountProps {
+  /** ****************** 与 Num 组件 Props 同步 ********************/
+  /**
+   * 数值
+   */
+  value: BigNumber.Value | undefined | null
+  /**
+   * 小数位数
+   */
+  decimals?: number | [number, number]
+  /**
+   * 舍入方式
+   *
+   * - up: 向上取整
+   * - down: 向下取整
+   * - half-up: 四舍五入
+   * - half-even: 银行家算法
+   */
+  round?: 'up' | 'down' | 'half-up' | 'half-even'
+  /**
+   * 格式化方式
+   *
+   * - original: 原始
+   * - pad-dec: 自适应补零，即整数位多1位，小数位就少1位
+   * - fixed-dec: 固定小数位数
+   * - max-dec: 最大小数位数
+   * - min-dec: 最小小数位数
+   * - clamp-dec: 限制小数位数
+   */
+  format?: 'original' | 'pad-dec' | 'fixed-dec' | 'max-dec' | 'min-dec' | 'clamp-dec'
+  /**
+   * 着色
+   *
+   * - inherit: 继承
+   * - neg: 负数
+   * - pos: 正数
+   * - full: 全部
+   */
+  colored?: 'inherit' | 'neg' | 'pos' | 'full'
+  /**
+   * 是否显示正数符号
+   */
+  showPos?: boolean
+  /**
+   * 是否使用分组分隔符（千分符）
+   */
+  grouping?: boolean
+  /**
+   * 是否弱化无价值的零值
+   */
+  weakPad?: boolean
+
+  /** ****************** 与 CurrencyIcon 组件 Props 同步 ********************/
+  symbol?: string
+  size?: string
+  cdn?: string
+  iconType?: 'img' | 'text'
+
+  /** ****************** 本组件的 Props ********************/
+  /** 图标显示位置 */
+  iconPos?: 'left' | 'right' | 'hidden'
+  /** 字符图标是否使用数字的颜色 */
+  useNumColor?: boolean
+  /** 值的精度（整数 value 除以 precision） */
+  precision?: number
+}
+
+const props = withDefaults(defineProps<AmountProps>(), {
+  // Num 组件 Props
+  value: () => bignumber(0),
+  decimals: 8,
+  round: 'down',
+  weakPad: true,
+  showPos: false,
+  colored: 'inherit',
+  format: 'original',
+  grouping: true,
+
+  // CurrencyIcon 组件 Props
+  size: '1.1em',
+  // symbol: '',
+  iconType: 'img',
+
+  // 本组件 Props
+  iconPos: 'left',
+  useNumColor: false,
+  precision: 0,
+});
+
+const isTextIcon = computed(() => {
+  return props.iconType === 'text' || textIcons.value.includes(String(props.symbol));
+});
+</script>
+
+<template>
+  <span class="amount flex-inline" :class="[isTextIcon ? 'items-baseline' : 'items-center']">
+    <CurrencyIcon v-if="props.iconPos === 'left' && props.symbol && !props.useNumColor" v-bind="props" class="currency-icon" />
+    <Num v-bind="props" :value="bignumber(props.value ?? 0).dividedBy(10 ** props.precision)">
+      <template #signLeft>
+        <CurrencyIcon v-if="props.iconPos === 'left' && props.symbol && props.useNumColor" v-bind="props" class="currency-icon" />
+      </template>
+    </Num>
+    <CurrencyIcon v-if="props.iconPos === 'right'" v-bind="props" class="currency-icon" />
+  </span>
+</template>
+
+<style lang="scss" scoped>
+.amount {
+  line-height: 1em;
+}
+.symbol-icon {
+  line-height: inherit;
+  font-size: inherit;
+}
+.amount .currency-icon:first-child {
+  margin-right: 0.15em;
+}
+
+.amount .currency-icon:last-child {
+  margin-left: 0.15em;
+}
+</style>

package/admin/components/text/src/Datetime.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { Tooltip as ATooltip } from 'ant-design-vue';
+import { Tooltip } from 'ant-design-vue';
 import { computed } from 'vue';
 import dayjs from '../../../../libs/dayjs';
+import { getTtaTimeZone } from '../../date'
 
 defineOptions({
   inheritAttrs: false,
@@ -10,16 +11,18 @@ defineOptions({
 const props = withDefaults(
   defineProps<{
     timestamp?: number | string
+    ts?: number | string
     template?: string
-    utc?: boolean
   }>(),
   {
-    template: 'MM-DD HH:mm:ss',
-    utc: false,
+    template: 'YY-MM-DD HH:mm:ss',
   },
 );
+
+const tz = getTtaTimeZone();
+const localTz = dayjs.tz.guess();
 const timestamp = computed(() => {
-  let tsStr = String(props.timestamp);
+  let tsStr = String(props.ts || props.timestamp);
 
   if (tsStr.length === 10)
     tsStr += '000';
@@ -33,19 +36,21 @@ const timestamp = computed(() => {
 const text = computed(() => {
   if (!timestamp.value)
     return '-';
-
   const ts = dayjs(timestamp.value);
-
-  return props.utc ? ts.utc().format(props.template) : ts.format(props.template);
+  return ts.tz(tz.value).format(props.template);
 });
 </script>
 
 <template>
-  <ATooltip destroyTooltipOnHide>
+  <Tooltip destroyTooltipOnHide :align="{ offset: [0, 8] }">
     <template v-if="timestamp" #title>
-      <div>{{ dayjs(timestamp).fromNow?.() }}</div>
-      <div>
+      <div>{{ dayjs(timestamp).tz(tz).fromNow?.() }}</div>
+      <div v-if="dayjs.tz.guess() !== tz && tz !== 'UTC' ">
         {{ dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss') }}
+        <span class="op-50">指定</span>
+      </div>
+      <div>
+        {{ dayjs(timestamp).tz(localTz).format('YYYY-MM-DD HH:mm:ss') }}
         <span class="op-50">本地</span>
       </div>
       <div v-if="dayjs().utc">
@@ -54,7 +59,7 @@ const text = computed(() => {
       </div>
     </template>
     <span v-bind="$attrs" class="text">{{ text }}</span>
-  </ATooltip>
+  </Tooltip>
 </template>
 
 <style scoped lang="scss">

package/admin/components/text/src/IP.vue

@@ -1,21 +1,35 @@
 <script setup lang="ts">
 import { TypographyLink as ATypographyLink } from 'ant-design-vue';
+import { computed } from 'vue';
 
-withDefaults(defineProps<{
+const props = withDefaults(defineProps<{
   ip?: string
   empty?: string
+  fullV6?: boolean
 }>(), {
   empty: '-',
+  fullV6: false,
 });
-</script>
 
+const ip = computed(() => {
+  const ip = props.ip;
+  if (!ip)
+    return;
+  const isV6 = ip.includes(':');
+  if (isV6 && !props.fullV6) {
+    const parts = ip.split(':');
+    return `${parts[0]}:...:${parts[parts.length - 1]}`
+  }
+  return ip;
+});
+</script>
 <template>
   <ATypographyLink
-    v-if="$props.ip"
+    v-if="ip"
     :href="`https://www.ip138.com/iplookup.php?ip=${$props.ip}&action=2`"
     :copyable="{ text: $props.ip, tooltip: false }" target="_blank"
   >
-    <span v-bind="$attrs" class="font-mono">{{ $props.ip }}</span>
+    <span v-bind="$attrs" class="font-mono">{{ ip }}</span>
   </ATypographyLink>
   <span v-else v-bind="$attrs" class="font-mono">{{ $props.empty }}</span>
 </template>

package/admin/components/text/src/Num.vue

@@ -0,0 +1,192 @@
+<script lang="ts">
+import bignumber, { type BigNumber } from 'bignumber.js';
+import { computed } from 'vue';
+
+export interface NumProps {
+  /**
+   * 数值
+   */
+  value: BigNumber.Value
+  /**
+   * 小数位数
+   */
+  decimals?: number | [number, number]
+  /**
+   * 舍入方式
+   *
+   * - up: 向上取整
+   * - down: 向下取整
+   * - half-up: 四舍五入
+   * - half-even: 银行家算法
+   */
+  round?: 'up' | 'down' | 'half-up' | 'half-even'
+  /**
+   * 格式化方式
+   *
+   * - original: 原始
+   * - pad-dec: 自适应补零，即整数位多1位，小数位就少1位
+   * - fixed-dec: 固定小数位数
+   * - max-dec: 最大小数位数
+   * - min-dec: 最小小数位数
+   * - clamp-dec: 限制小数位数
+   */
+  format?: 'original' | 'pad-dec' | 'fixed-dec' | 'max-dec' | 'min-dec' | 'clamp-dec'
+  /**
+   * 着色
+   *
+   * - inherit: 继承
+   * - neg: 负数
+   * - pos: 正数
+   * - full: 全部
+   */
+  colored?: 'inherit' | 'neg' | 'pos' | 'full'
+  /**
+   * 是否显示正数符号
+   */
+  showPos?: boolean
+  /**
+   * 是否使用分组分隔符（千分符）
+   */
+  grouping?: boolean
+  /**
+   * 是否弱化无价值填充
+   */
+  weakPad?: boolean
+}
+
+// 匹配数字中无价值的填充(仅支持有小数的), 如 1.2000 => 1.2, 1.000 => 1
+const insignRE = /\.?0+$/;
+
+function formatPadDecimals(num: BigNumber.Instance, decimals: number, round: BigNumber.RoundingMode, grouping: boolean) {
+  const integerLen = num.integerValue().toString().length;
+  const showDecimalLen = Math.max(decimals - integerLen + 1, 1);
+  return grouping ? num.toFormat(showDecimalLen, round) : num.toFixed(showDecimalLen, round);
+}
+
+function formatFixedDecimals(num: BigNumber.Instance, decimals: number, round: BigNumber.RoundingMode, grouping: boolean) {
+  return grouping ? num.toFormat(decimals, round) : num.toFixed(decimals, round);
+}
+
+function formatMaxDecimals(num: BigNumber.Instance, decimals: number, round: BigNumber.RoundingMode, grouping: boolean) {
+  const showDecimalLen = Math.min(num.decimalPlaces() ?? 0, decimals);
+  return grouping ? num.toFormat(showDecimalLen, round) : num.toFixed(showDecimalLen, round);
+}
+
+function formatMinDecimals(num: BigNumber.Instance, decimals: number, round: BigNumber.RoundingMode, grouping: boolean) {
+  const showDecimalLen = Math.max(num.decimalPlaces() ?? 0, decimals);
+  return grouping ? num.toFormat(showDecimalLen, round) : num.toFixed(showDecimalLen, round);
+}
+
+function formatClampDecimals(num: BigNumber.Instance, decimals: [number, number], round: BigNumber.RoundingMode, grouping: boolean) {
+  const decimalLen = num.decimalPlaces() ?? 0;
+  const showDecimalLen = Math.min(Math.max(decimalLen, decimals[0]), decimals[1]);
+  return grouping ? num.toFormat(showDecimalLen, round) : num.toFixed(showDecimalLen, round);
+}
+
+function formatOriginal(num: BigNumber.Instance, decimals: number, round: BigNumber.RoundingMode, grouping: boolean) {
+  const decimalLen = num.decimalPlaces() ?? decimals;
+  return grouping ? num.toFormat(decimalLen, round) : num.toString();
+}
+</script>
+
+<script setup lang="ts">
+const props = withDefaults(defineProps<NumProps>(), {
+  value: () => bignumber(0),
+  showPos: false,
+  decimals: 2,
+  colored: 'inherit',
+  round: 'half-up',
+  format: 'original',
+  grouping: true,
+  weakPad: false,
+});
+
+const numParts = computed(() => {
+  const num = bignumber(props.value).abs();
+  const roundMode = ({
+    'up': bignumber.ROUND_UP,
+    'down': bignumber.ROUND_DOWN,
+    'half-up': bignumber.ROUND_HALF_UP,
+    'half-even': bignumber.ROUND_HALF_EVEN,
+  })[props.round];
+  const isRangeDecimals = ['clamp-dec'].includes(props.format);
+  const parts = { full: '', sign: '', value: '', pad: '' };
+  let text = '';
+
+  if (isRangeDecimals) {
+    const decLen = Array.isArray(props.decimals)
+      ? props.decimals
+      : [props.decimals, props.decimals] as [number, number];
+    const format = ({
+      'clamp-dec': formatClampDecimals,
+    } as Record<string, typeof formatClampDecimals>)[props.format];
+
+    text = format(num, decLen, roundMode, props.grouping);
+  }
+  else {
+    const decLen = Array.isArray(props.decimals) ? props.decimals[0] : props.decimals;
+    const format = ({
+      'pad-dec': formatPadDecimals,
+      'fixed-dec': formatFixedDecimals,
+      'max-dec': formatMaxDecimals,
+      'min-dec': formatMinDecimals,
+    } as Record<string, typeof formatPadDecimals>)[props.format] ?? formatOriginal;
+
+    text = format(num, decLen, roundMode, props.grouping);
+  }
+
+  if (text) {
+    const originalNum = bignumber(props.value);
+
+    parts.sign = originalNum.lt(0) ? '-' : (originalNum.gt(0) && props.showPos) ? '+' : '';
+    parts.full = parts.sign + text;
+    parts.pad = text.match(insignRE)?.[0] ?? '';
+    parts.pad = originalNum.decimalPlaces() || parts.pad[0] === '.' ? parts.pad : '';
+    parts.value = text.slice(0, text.length - parts.pad.length);
+  }
+
+  return parts;
+});
+const classList = computed(() => {
+  const num = bignumber(props.value);
+  const classes = [`colored-${props.colored}`];
+
+  if (num.lt(0))
+    classes.push('sign-neg');
+  else if (num.gt(0))
+    classes.push('sign-pos');
+  else
+    classes.push('sign-zero');
+
+  if (props.weakPad)
+    classes.push('weak-pad');
+
+  return classes;
+});
+</script>
+
+<template>
+  <span class="num" :class="classList">
+    <slot name="signLeft" />{{ numParts.sign }}<slot name="signRight" /><slot name="numLeft" />{{ numParts.value }}<span class="pad">{{ numParts.pad }}</span><slot name="numRight" />
+  </span>
+</template>
+
+<style lang="scss" scoped>
+.num {
+  font-variant-numeric: tabular-nums;
+
+  &.sign-neg.colored-neg,
+  &.sign-neg.colored-full {
+    color: var(--neg-color, #ef4444);
+  }
+
+  &.sign-pos.colored-pos,
+  &.sign-pos.colored-full {
+    color: var(--pos-color, #22c55e);
+  }
+
+  &.weak-pad .pad {
+    opacity: 0.5;
+  }
+}
+</style>

package/admin/components/upload/src/PictureCardUpload.vue

@@ -2,10 +2,10 @@
 import { Image as AImage, ImagePreviewGroup as AImagePreviewGroup, Upload as AUpload, message } from 'ant-design-vue';
 import type { UploadProps } from 'ant-design-vue';
 import type { PreviewGroupPreview } from 'ant-design-vue/es/vc-image/src/PreviewGroup';
-import { useVModel } from '@vueuse/core';
-import { ref } from 'vue';
+import { ref, customRef, nextTick, triggerRef } from 'vue';
 import type { AwsS3 } from '../../../../utils/upload';
 import { createAwsS3Request } from './customRequests';
+import { urlToUploadFile } from './helpers';
 
 type UploadFile = Parameters<NonNullable<UploadProps['onPreview']>>['0'];
 </script>
@@ -13,8 +13,12 @@ type UploadFile = Parameters<NonNullable<UploadProps['onPreview']>>['0'];
 <script lang="ts" setup>
 const props = withDefaults(
   defineProps<{
-    /** 上传文件的数组 */
+    /** 上传图片的数组 */
     modelValue?: UploadFile[]
+    /** 上传图片的 url 数组 */
+    urls?: string[]
+    /** 是否使用 url 数组 */
+    useUrl?: boolean
     /** awsS3 实例对象 */
     awsS3: AwsS3
     /** 根目录 */
@@ -27,6 +31,8 @@ const props = withDefaults(
     cardSize?: string
     /** 允许的图片后缀 */
     allowExts?: string[]
+    /** 允许的图片大小，单位为字节 */
+    maxSize?: number
     /** 禁用 */
     disabled?: boolean
   }>(),
@@ -36,14 +42,47 @@ const props = withDefaults(
     rowCount: 'auto-fill',
     cardSize: '90px',
     allowExts: () => ['jpg', 'jpeg', 'png', 'gif', 'apng', 'webp', 'svg'],
+    maxSize: 1024 * 1024 * 2,
     disabled: false,
+    useUrl: false,
   },
 );
 const emits = defineEmits<{
   (e: 'update:modelValue', value: UploadFile[]): void
+  (e: 'update:urls', value: string[]): void
 }>();
 
-const fileList = useVModel(props, 'modelValue', emits);
+const fileList = customRef<any>((track, trigger) => {
+  let tempValue: any[] = [];
+  let isAllDone = true;
+  return {
+    get() {
+      track();
+      if (props.useUrl) {
+        return isAllDone ? urlToUploadFile(props.urls || []) : tempValue;
+      }
+      return props.modelValue || [];
+    },
+    set(v: any) {
+      if (props.useUrl) {
+        isAllDone = (v || []).every((x: any) => typeof x === 'string' ||  x.status === 'done');
+        if (isAllDone) {
+          const urls = (v || []).map((x: any) => typeof x === 'string' ? x : x.response?.url);
+          emits('update:urls', urls);
+          tempValue = [];
+        }
+        else {
+          tempValue = v;
+        }
+      }
+      else {
+        emits('update:modelValue', v);
+      }
+      trigger();
+    }
+  }
+})
+
 const preview = ref<PreviewGroupPreview>({
   visible: false,
   onVisibleChange(value) {
@@ -54,36 +93,33 @@ const preview = ref<PreviewGroupPreview>({
 function handlePreview(file: UploadFile) {
   preview.value.src = file.url || file.thumbUrl;
   preview.value.visible = true;
-  preview.value.current = fileList.value?.findIndex(item => preview.value.src === (item.url || item.thumbUrl)) ?? 0;
+  preview.value.current = fileList.value?.findIndex((x: any) => preview.value.src === (x.url || x.thumbUrl)) ?? 0;
 }
 
 function beforeUpload(file: UploadFile) {
   const isImg = props.allowExts.some(item => String(file.type).toLowerCase().includes(item));
-
+  const isSizeValid = !!(props.maxSize && file.size && file.size <= props.maxSize);
   if (!isImg)
     message.error(`${file.name} 不是图片 (${props.allowExts.join(',')})`);
-
-  return isImg;
+  if (!isSizeValid)
+    message.error(`${file.name} 大小不能超过 ${props.maxSize / 1024 / 1024}MB`);
+  
+  return isImg && isSizeValid;
 }
 </script>
 
 <template>
   <div :class="{ 'w-fit': typeof props.rowCount === 'number' }">
-    <AUpload
-      v-model:fileList="fileList" class="pic-card-upload" listType="picture-card" multiple :maxCount="$props.maxCount"
-      :disabled="props.disabled" :beforeUpload="beforeUpload" :customRequest="createAwsS3Request($props.awsS3, $props.rootDir)"
-      @preview="handlePreview"
-    >
-      <i v-if="fileList.length < props.maxCount" class="i-ant-design:plus-outlined text-26px text-$antd-colorTextTertiary" />
+    <AUpload v-model:fileList="fileList" class="pic-card-upload" listType="picture-card" multiple
+      :maxCount="$props.maxCount" :disabled="props.disabled" :beforeUpload="beforeUpload"
+      :customRequest="createAwsS3Request($props.awsS3, $props.rootDir)" @preview="handlePreview">
+      <i v-if="fileList.length < props.maxCount"
+        class="i-ant-design:plus-outlined text-[26px] text-$antd-colorTextTertiary" />
     </AUpload>
 
     <div style="display: none">
       <AImagePreviewGroup :preview="preview">
-        <AImage
-          v-for="item of fileList"
-          :key="item.uid"
-          :src="item.url || item.thumbUrl"
-        />
+        <AImage v-for="item of fileList" :key="item.uid" :src="item.url || item.thumbUrl" />
       </AImagePreviewGroup>
     </div>
   </div>
@@ -117,7 +153,7 @@ function beforeUpload(file: UploadFile) {
     margin: 0;
   }
 
-  :deep(.ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item::before ) {
+  :deep(.ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item::before) {
     width: 100%;
     height: 100%;
   }

package/admin/layout/large/Breadcrumb.vue

@@ -3,15 +3,14 @@ import { computed } from 'vue';
 import type { VNode } from 'vue';
 import { Breadcrumb as ABreadcrumb } from 'ant-design-vue';
 import type { Route as AntdBreadcrumbRoute } from 'ant-design-vue/es/breadcrumb/Breadcrumb';
-import { injectTTAdmin } from '../../adminPlugin';
-import type { IBreadcrumb } from '../../stores/createUsePageStore';
+import type { TBreadcrumb } from '../../components/provider/admin-router';
 
-interface IBreadcrumbRoute extends AntdBreadcrumbRoute {
+interface TBreadcrumbRoute extends AntdBreadcrumbRoute {
   icon?: VNode | null
   trigger?: () => void
 }
 
-function _buildRoute(breadcrumb: IBreadcrumb): IBreadcrumbRoute {
+function _buildRoute(breadcrumb: TBreadcrumb): TBreadcrumbRoute {
   return {
     breadcrumbName: breadcrumb.title,
     path: breadcrumb.title,
@@ -23,28 +22,15 @@ function _buildRoute(breadcrumb: IBreadcrumb): IBreadcrumbRoute {
 </script>
 
 <script setup lang="ts">
-const pageStore = injectTTAdmin()!.deps.usePageStore();
-const routes = computed(() => {
-  let breadcrumbs: IBreadcrumbRoute[] = [];
-
-  if (!pageStore.currentPageState)
-    return breadcrumbs;
-
-  breadcrumbs = pageStore.currentPageState.breadcrumbs.map(breadcrumb => _buildRoute(breadcrumb));
-
-  breadcrumbs.push({
-    path: pageStore.currentPageState.title,
-    breadcrumbName: pageStore.currentPageState.title,
-    icon: pageStore.currentPageState.icon,
-  });
-
-  return breadcrumbs;
-});
+const props = defineProps<{
+  breadcrumbs: TBreadcrumb[]
+}>();
+const routes = computed(() => props.breadcrumbs.map(breadcrumb => _buildRoute(breadcrumb)));
 </script>
 
 <template>
   <ABreadcrumb class="breadcrumb" :routes="routes">
-    <template #itemRender="{ route }: {route: IBreadcrumbRoute}">
+    <template #itemRender="{ route }: {route: TBreadcrumbRoute}">
       <div @click="route.trigger?.()">
         <component :is="route.icon" v-if="route.icon" class="mb-0.2em mr-0.2em" />
         <span>{{ route.breadcrumbName }}</span>
@@ -55,10 +41,11 @@ const routes = computed(() => {
 
 <style lang="scss" scoped>
 .breadcrumb {
-  font-size: 1rem;
+  font-size: 14px;
 
   :deep(.ant-dropdown-trigger) {
     height: 1.6em;
+    cursor: pointer;
   }
 
   :deep(.anticon-down) {

package/admin/layout/large/Content.vue

@@ -1,16 +1,19 @@
 <script setup lang="ts">
-import { injectTTAdmin } from '../../adminPlugin';
+import { RouterView } from 'vue-router';
+import { KeepAlive, type KeepAliveProps } from 'vue';
 
-const pageStore = injectTTAdmin()!.deps.usePageStore();
+const props = defineProps<{
+  cached: KeepAliveProps['include']
+}>();
 </script>
 
 <template>
-  <RouterView #default="{ Component, route }">
-    <KeepAlive :include="pageStore.pageCacheList">
+  <RouterView #default="{ Component }">
+    <KeepAlive :include="props.cached">
       <Suspense>
-        <component :is="pageStore.setPage(Component, route)" :key="(Component.type as any).name" />
+        <component :is="Component" :key="(Component as any).type?.__name" />
         <template #fallback>
-          <div class="flex justify-center items-center h-70">
+          <div class="flex justify-center items-center h-full">
             <div class="flex items-center">
               <i class="i-svg-spinners:180-ring-with-bg block color-primary scale-125 mr-2" />
               <span class="text-gray">正在加载...</span>