@peng_kai/kit 0.3.0-beta.3 → 0.3.0-beta.30

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/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/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>

package/admin/layout/large/Layout.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useScroll, useMutationObserver } from '@vueuse/core'
+
+const hiddenSiderbar = ref(false);
+const $content = ref<HTMLElement>();
+const { arrivedState, measure } = useScroll($content);
+const contentCssVars = computed(() => {
+  const {top: arrivedTop, bottom: arrivedBtm} = arrivedState;
+  return {
+    '--top-e': arrivedTop ? '0%' : '5px',
+    '--btm-s': arrivedBtm ? '100%' : '99.5%',
+    // 'margin-top': arrivedTop ? '0' : '-5px',
+  };
+})
+
+useMutationObserver($content, () => {
+  setTimeout(measure, 100)
+}, { childList: true });
+</script>
+
+<template>
+  <div class="app-layout" :class="{ 'hidden-siderbar': hiddenSiderbar }">
+    <div class="app-logo select-none [grid-area:logo] ">
+      <slot name="logo" />
+    </div>
+
+    <div class="app-header select-none [grid-area:header]">
+      <!-- <div
+        class="text-6 flex items-center h-7 -mr-5 cursor-pointer"
+        @click="hiddenSiderbar = !hiddenSiderbar"
+      >
+        <i class="i-material-symbols:menu-open-rounded" :class="{ 'rotate-180': hiddenSiderbar }" />
+      </div> -->
+      <slot name="header" />
+    </div>
+
+    <div v-show="!hiddenSiderbar" class="app-siderbar select-none [grid-area:siderbar]">
+      <slot name="siderbar" />
+    </div>
+
+    <div ref="$content" class="app-content [grid-area:content]" :style="contentCssVars">
+      <slot name="content" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.app-layout {
+  box-sizing: border-box;
+  display: grid;
+  grid-template:
+    "logo     header"   56px
+    "siderbar content"  1fr
+    / 180px   1fr;
+  column-gap: 8px;
+  width: 100vw;
+  height: 100vh;
+  padding: 0 8px 8px;
+  background-color: var(--antd-colorBgLayout);
+
+  &.hidden-siderbar {
+    grid-template:
+    "logo     header"   56px
+    "content content"  1fr
+    / 130px   1fr;
+
+    .app-logo {
+      justify-content: start;
+    }
+  }
+}
+
+.app-logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 2rem;
+  font-weight: 700;
+  line-height: 1;
+  color: var(--antd-colorPrimary)
+}
+
+.app-siderbar {
+  position: relative;
+  display: flex;
+  min-height: 100%;
+  flex-direction: column;
+  margin-right: -6px;
+  overflow-y: auto;
+  scrollbar-gutter: stable;
+}
+
+// @property --top-e {
+//   syntax: "<percentage>";
+//   initial-value: 0%;
+//   inherits: false;
+// }
+// @property --btm-s {
+//   syntax: "<percentage>";
+//   initial-value: 100%;
+//   inherits: false;
+// }
+
+.app-content {
+  --top-s: 0%;
+  --top-e: 0%;
+  --btm-s: 99%;
+  --btm-e: 100%;
+
+  margin-right: -6px;
+  overflow-y: auto;
+  scrollbar-gutter: stable;
+  mask-image: linear-gradient(
+    to bottom, 
+    #0000 var(--top-s),
+    #000 var(--top-e), 
+    #000 var(--btm-s), 
+    #0000 var(--btm-e)
+  );
+  transition: --top-e 0.05s, --btm-s 0.05s;
+}
+
+.app-header {
+  display: flex;
+  align-items: center;
+  gap: 36px;
+}
+</style>

package/admin/layout/large/Menu.vue

@@ -2,8 +2,7 @@
 import { computed, ref, watch } from 'vue';
 import { Menu as AMenu } from 'ant-design-vue';
 import type { ItemType } from 'ant-design-vue';
-import { injectTTAdmin } from '../../adminPlugin';
-import type { TMenu } from '../../stores/createUseMenuStore';
+import type { TMenu } from '../../components/provider/admin-router';
 
 function formatMenu(menu: TMenu): ItemType {
   return {
@@ -21,24 +20,19 @@ function formatMenu(menu: TMenu): ItemType {
 </script>
 
 <script setup lang="ts">
-const { router, useMenuStore } = injectTTAdmin()!.deps;
-const menuStore = useMenuStore();
-const items = computed(() => menuStore.menus.map(formatMenu));
+const props = defineProps<{
+  path: TMenu[]
+  menus: TMenu[]
+}>();
+
+const items = computed(() => props.menus.map(formatMenu));
 const openKeys = ref<string[]>([]);
 const selectedKeys = ref<string[]>([]);
 
-watch(
-  () => router?.currentRoute.value,
-  (route) => {
-    if (!route)
-      return;
-
-    const menuPath = menuStore.getMenuPath(route.name as string);
-    openKeys.value = menuPath.map(menu => menu.key);
-    selectedKeys.value = [openKeys.value.pop()!];
-  },
-  { immediate: true },
-);
+watch(() => props.path, (menuPath) => {
+  openKeys.value = menuPath.map(menu => menu.key);
+  selectedKeys.value = [openKeys.value.pop()!];
+}, { immediate: true });
 </script>
 
 <template>
@@ -64,5 +58,18 @@ watch(
   .ant-menu {
     background-color: transparent;
   }
+
+  :deep(.ant-menu-submenu-arrow){
+    top: 52%;
+    inset-inline-end: 8px;
+  }
+
+  :deep(.ant-menu-item-only-child) {
+    padding-left: 43px !important;
+  }
+
+  :deep(.ant-menu-sub.ant-menu-inline) {
+    background-color: transparent;
+  }
 }
 </style>