@peng_kai/kit 0.3.0-beta.1 → 0.3.0-beta.11

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/customRequests.ts

@@ -7,7 +7,7 @@ export function createAwsS3Request(awsS3: AwsS3, rootPath?: string) {
   return async (options: UploadRequestOption) => {
     if (!(options.file instanceof File))
       throw new Error('options.file 不是 File 对象');
-
+    
     const { uploader, fileURL } = await awsS3.upload(options.file, rootPath);
 
     uploader.on('httpUploadProgress', (progress) => {

package/admin/components/upload/src/helpers.ts

@@ -31,6 +31,7 @@ export function urlToUploadFile(urls?: string[] | string) {
     name: getFileNameByUrl(url),
     status: 'done',
     url,
+    thumbUrl: url,
   }));
 
   return files;

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

package/admin/layout/large/Notice.vue

@@ -0,0 +1,140 @@
+<script lang="ts">
+import { useIntervalFn } from '@vueuse/core';
+import { Empty, Dropdown, Badge, Menu, MenuItem } from 'ant-design-vue';
+import { type UseQueryReturnType } from '@tanstack/vue-query'
+import { watch, ref, computed } from 'vue'
+import dayjs from '../../../libs/dayjs';
+import { useRouter } from 'vue-router';
+import audioURL from './y682.mp3';
+
+const noticeAudio = new Audio(audioURL);
+noticeAudio.src = audioURL;
+noticeAudio.muted = true;
+document.body.append(noticeAudio);
+
+const logoFaviconEle = document.querySelector('link[rel="icon"]');
+const numFaviconEle = document.createElement('link');
+numFaviconEle.rel = 'icon';
+const numCanvas = document.createElement('canvas') as (HTMLCanvasElement & { num: number });
+numCanvas.width = 32;
+numCanvas.height = 32;
+
+interface TNotice {
+  title: string;
+  type: number;
+  url: string;
+  time: number;
+}
+</script>
+
+<script lang="ts" setup>
+const props = defineProps<{
+  noticesQry: UseQueryReturnType<TNotice[], Error>
+}>()
+
+const router = useRouter();
+const visible = ref(false);
+const noticeNum = computed(() => props.noticesQry.data.value?.length ?? 0);
+
+function operate(notice: TNotice) {
+  if (router.currentRoute.value.path !== notice.url) {
+    router.push(notice.url);
+  }
+}
+
+watch(noticeNum, (num = 0, oldNum = 0) => {
+  num > oldNum && noticeAudio.play();
+}, { immediate: true });
+
+useIntervalFn(() => {
+  const num = noticeNum.value;
+
+  if (!num || document.visibilityState === 'visible') {
+    if (numFaviconEle.parentNode) {
+      numFaviconEle.remove();
+      logoFaviconEle && document.head.appendChild(logoFaviconEle);
+    }
+    return;
+  }
+
+  if (logoFaviconEle?.parentNode) {
+    if (numCanvas.num !== num) {
+      numCanvas.num = num;
+      const ctx = numCanvas.getContext('2d')!;
+      ctx.fillStyle = '#f00';
+      ctx.beginPath();
+      ctx.arc(16, 16, 16, 0, Math.PI * 2, true);
+      ctx.fill();
+      ctx.fillStyle = '#fff';
+      ctx.font = 'bold 22px sans-serif';
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+      ctx.fillText(num.toString(), 16, 16);
+    }
+
+    numFaviconEle.href = numCanvas.toDataURL();
+    logoFaviconEle.parentNode.replaceChild(numFaviconEle, logoFaviconEle);
+  }
+  else {
+    numFaviconEle.parentNode?.replaceChild(logoFaviconEle!, numFaviconEle);
+  }
+}, 500);
+</script>
+
+<template>
+  <Badge :count="noticeNum" size="small">
+    <Dropdown v-model:open="visible" placement="bottomRight" trigger="click" arrow>
+      <div class="h-7 flex cursor-pointer items-center justify-center rounded-1 px-1">
+        <i class="i-ri:notification-4-line block text-5" :class="{ shake: !!noticeNum }" />
+      </div>
+      <template #overlay>
+        <Menu v-if="noticeNum" @click="visible = false">
+          <MenuItem v-for="(item, i) of noticesQry.data.value" :key="i" @click="operate(item)">
+          <div class="min-w-50">
+            <div>{{ item.title }}</div>
+            <div class="mt-1 text-xs text-$antd-colorTextSecondary">
+              {{ dayjs().format('MM-DD HH:mm:ss') }}
+            </div>
+          </div>
+          </MenuItem>
+        </Menu>
+        <div v-else class="h-40 min-w-50 flex items-center justify-center rounded-2 bg-$antd-colorBgElevated shadow"
+          @click="visible = false">
+          <Empty description="暂无通知" :image="Empty.PRESENTED_IMAGE_SIMPLE" />
+        </div>
+      </template>
+    </Dropdown>
+  </Badge>
+</template>
+
+<style lang="scss" scoped>
+@keyframes shake {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  25% {
+    transform: rotate(10deg);
+  }
+
+  50% {
+    transform: rotate(-10deg);
+  }
+
+  75% {
+    transform: rotate(10deg);
+  }
+
+  100% {
+    transform: rotate(-10deg);
+  }
+}
+
+.shake {
+  animation: shake 0.5s infinite;
+}
+
+.shadow {
+  box-shadow: 0 6px 16px 0 rgb(0 0 0 / 8%), 0 3px 6px -4px rgb(0 0 0 / 12%), 0 9px 28px 8px rgb(0 0 0 / 5%);
+}
+</style>