@peng_kai/kit 0.2.0-beta.22 → 0.2.0-beta.24

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

@@ -1,121 +1,121 @@
-<script lang="ts">
-import { computed } from 'vue';
-import bigNumber from 'bignumber.js';
-import isNil from 'lodash-es/isNil';
-
-export const config = {
-  aboveColor: '#52c41a',
-  belowColor: '#ff4d4f',
-};
-
-/**
- * 当 symbol 为以下值时，使用预设的 Logo
- */
-const presetSymbols: Record<string, string> = {
-  USDT: 'https://api.iconify.design/cryptocurrency-color:usdt.svg',
-  TRX: 'https://api.iconify.design/cryptocurrency-color:trx.svg',
-  USDC: 'https://api.iconify.design/cryptocurrency-color:usdc.svg',
-  ETH: 'https://api.iconify.design/cryptocurrency-color:eth.svg',
-  BNB: 'https://api.iconify.design/cryptocurrency-color:bnb.svg',
-  BUSD: 'https://assets.coingecko.com/coins/images/9576/large/BUSD.png',
-  MATIC: 'https://api.iconify.design/cryptocurrency-color:matic.svg',
-  SOL: 'https://api.iconify.design/cryptocurrency-color:sol.svg',
-};
-</script>
-
-<script setup lang="ts">
-const props = withDefaults(
-  defineProps<{
-    /** 金额 */
-    amount?: string | number
-    /** 符号Logo, 可以是币种Logo的URL、法定货币符号($) */
-    symbol?: string
-    /** 精度 */
-    precision?: number
-    /** 单位，如币种名称 */
-    unit?: string
-    /** 保留小数的位数 */
-    fractionDigits?: number
-    /** 是否填充 0 */
-    padZero?: boolean
-    /** 金额是否红/绿显示 */
-    colorful?: boolean
-    /** 是否是大约数 */
-    approx?: boolean
-  }>(),
-  {
-    padZero: false,
-    fractionDigits: 18,
-    colorful: false,
-  },
-);
-
-const amountText = computed(() => {
-  const _amount = props.amount;
-
-  if (isNil(_amount))
-    return '-';
-
-  let bn = bigNumber(_amount);
-  bn = !isNil(props.precision) ? bn.dividedBy(10 ** props.precision) : bn;
-  let bnt = bn.toFormat(props.fractionDigits);
-  bnt = props.padZero ? bnt : bnt.replace(/\.?0+$/, '');
-
-  return bnt;
-});
-const amountColor = computed(() => {
-  const num = Number.parseFloat(props.amount as string);
-
-  if (!props.colorful || (Number.isNaN(num) ? true : num === 0))
-    return '';
-
-  return num > 0 ? config.aboveColor : (num < 0 ? config.belowColor : '');
-});
-const symbol = computed(() => presetSymbols[props.symbol!] ?? props.symbol ?? '');
-</script>
-
-<template>
-  <div class="amount-wrapper" :style="{ '--amount-color': amountColor }">
-    <!-- 约等于 -->
-    <span v-if="props.approx" class="color-$amount-color">≈</span>
-
-    <!-- 符号 -->
-    <img v-if="symbol.startsWith('http')" class="symbol-logo" :src="symbol">
-
-    <!-- 图片Logo -->
-    <span v-else class="color-$amount-color">{{ symbol }}</span> <!-- 文本Logo，如法定币种符号(￥、$) -->
-
-    <!-- 金额 -->
-    <span class="color-$amount-color amount">{{ amountText }}</span>
-
-    <!-- 单位 -->
-    <span v-if="props.unit" class="unit">{{ props.unit }}</span>
-  </div>
-</template>
-
-<style lang="scss">
-.amount-wrapper {
-  display: flex;
-  align-items: center;
-
-  .symbol-logo {
-    display: block;
-    width: 1.1em;
-    height: 1.1em;
-    margin-right: 0.2em;
-  }
-
-  .amount {
-    font-family: 'dinm';
-  }
-
-  .currency-name {
-    margin-left: 0.2em;
-  }
-
-  .unit {
-    display: inline-block;
-    margin-left: 0.2em;
-  }
-}
-</style>
+<script lang="ts">
+import { computed } from 'vue';
+import bigNumber from 'bignumber.js';
+import isNil from 'lodash-es/isNil';
+
+export const config = {
+  aboveColor: '#52c41a',
+  belowColor: '#ff4d4f',
+};
+
+/**
+ * 当 symbol 为以下值时，使用预设的 Logo
+ */
+const presetSymbols: Record<string, string> = {
+  USDT: 'https://api.iconify.design/cryptocurrency-color:usdt.svg',
+  TRX: 'https://api.iconify.design/cryptocurrency-color:trx.svg',
+  USDC: 'https://api.iconify.design/cryptocurrency-color:usdc.svg',
+  ETH: 'https://api.iconify.design/cryptocurrency-color:eth.svg',
+  BNB: 'https://api.iconify.design/cryptocurrency-color:bnb.svg',
+  BUSD: 'https://assets.coingecko.com/coins/images/9576/large/BUSD.png',
+  MATIC: 'https://api.iconify.design/cryptocurrency-color:matic.svg',
+  SOL: 'https://api.iconify.design/cryptocurrency-color:sol.svg',
+};
+</script>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    /** 金额 */
+    amount?: string | number
+    /** 符号Logo, 可以是币种Logo的URL、法定货币符号($) */
+    symbol?: string
+    /** 精度 */
+    precision?: number
+    /** 单位，如币种名称 */
+    unit?: string
+    /** 保留小数的位数 */
+    fractionDigits?: number
+    /** 是否填充 0 */
+    padZero?: boolean
+    /** 金额是否红/绿显示 */
+    colorful?: boolean
+    /** 是否是大约数 */
+    approx?: boolean
+  }>(),
+  {
+    padZero: false,
+    fractionDigits: 18,
+    colorful: false,
+  },
+);
+
+const amountText = computed(() => {
+  const _amount = props.amount;
+
+  if (isNil(_amount))
+    return '-';
+
+  let bn = bigNumber(_amount);
+  bn = !isNil(props.precision) ? bn.dividedBy(10 ** props.precision) : bn;
+  let bnt = bn.toFormat(props.fractionDigits);
+  bnt = props.padZero ? bnt : bnt.replace(/\.?0+$/, '');
+
+  return bnt;
+});
+const amountColor = computed(() => {
+  const num = Number.parseFloat(props.amount as string);
+
+  if (!props.colorful || (Number.isNaN(num) ? true : num === 0))
+    return '';
+
+  return num > 0 ? config.aboveColor : (num < 0 ? config.belowColor : '');
+});
+const symbol = computed(() => presetSymbols[props.symbol!] ?? props.symbol ?? '');
+</script>
+
+<template>
+  <div class="amount-wrapper" :style="{ '--amount-color': amountColor }">
+    <!-- 约等于 -->
+    <span v-if="props.approx" class="color-$amount-color">≈</span>
+
+    <!-- 符号 -->
+    <img v-if="symbol.startsWith('http')" class="symbol-logo" :src="symbol">
+
+    <!-- 图片Logo -->
+    <span v-else class="color-$amount-color">{{ symbol }}</span> <!-- 文本Logo，如法定币种符号(￥、$) -->
+
+    <!-- 金额 -->
+    <span class="color-$amount-color amount">{{ amountText }}</span>
+
+    <!-- 单位 -->
+    <span v-if="props.unit" class="unit">{{ props.unit }}</span>
+  </div>
+</template>
+
+<style lang="scss">
+.amount-wrapper {
+  display: flex;
+  align-items: center;
+
+  .symbol-logo {
+    display: block;
+    width: 1.1em;
+    height: 1.1em;
+    margin-right: 0.2em;
+  }
+
+  .amount {
+    font-family: 'dinm';
+  }
+
+  .currency-name {
+    margin-left: 0.2em;
+  }
+
+  .unit {
+    display: inline-block;
+    margin-left: 0.2em;
+  }
+}
+</style>

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

@@ -1,26 +1,26 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-
-const props = defineProps<{
-  seconds: number
-}>();
-
-const formattedDuration = computed(() => {
-  const days = Math.floor(props.seconds / (3600 * 24));
-  const hours = Math.floor((props.seconds % (3600 * 24)) / 3600);
-  const minutes = Math.floor((props.seconds % 3600) / 60);
-  const seconds = props.seconds % 60;
-  let formattedDuration = '';
-
-  days >= 1 && (formattedDuration += `${Math.floor(days)}天 `);
-  hours >= 1 && (formattedDuration += `${Math.floor(hours)}小时 `);
-  minutes >= 1 && (formattedDuration += `${Math.floor(minutes)}分钟 `);
-  seconds >= 1 && (formattedDuration += `${Math.floor(seconds)}秒`);
-
-  return formattedDuration;
-});
-</script>
-
-<template>
-  <span>{{ formattedDuration }}</span>
-</template>
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{
+  seconds: number
+}>();
+
+const formattedDuration = computed(() => {
+  const days = Math.floor(props.seconds / (3600 * 24));
+  const hours = Math.floor((props.seconds % (3600 * 24)) / 3600);
+  const minutes = Math.floor((props.seconds % 3600) / 60);
+  const seconds = props.seconds % 60;
+  let formattedDuration = '';
+
+  days >= 1 && (formattedDuration += `${Math.floor(days)}天 `);
+  hours >= 1 && (formattedDuration += `${Math.floor(hours)}小时 `);
+  minutes >= 1 && (formattedDuration += `${Math.floor(minutes)}分钟 `);
+  seconds >= 1 && (formattedDuration += `${Math.floor(seconds)}秒`);
+
+  return formattedDuration;
+});
+</script>
+
+<template>
+  <span>{{ formattedDuration }}</span>
+</template>

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

@@ -1,51 +1,51 @@
-<script setup lang="ts">
-import { Tooltip as ATooltip, TypographyLink as ATypographyLink } from 'ant-design-vue';
-import { computed } from 'vue';
-import { desensitize, getScanBrowser } from '../../../../utils';
-
-type HashType = Parameters<typeof getScanBrowser>[2];
-
-defineOptions({
-  inheritAttrs: false,
-});
-
-const props = withDefaults(
-  defineProps<{
-    hash: string
-    hide?: boolean
-    chain?: string
-    type?: HashType
-    empty?: string
-  }>(),
-  {
-    hide: true,
-    type: 'transaction',
-    empty: '-',
-  },
-);
-
-const href = computed(() => {
-  const { hash, chain, type } = props;
-
-  if (!hash || !chain || !type)
-    return;
-  return getScanBrowser(chain, hash, type);
-});
-const text = computed(() => {
-  if (props.hash)
-    return props.hide ? desensitize(props.hash) : props.hash;
-  else
-    return props.empty;
-});
-</script>
-
-<template>
-  <ATypographyLink :href="href" :copyable="{ text: props.hash, tooltip: false }" target="_blank">
-    <ATooltip>
-      <template v-if="props.hide" #title>
-        <span class="font-mono">{{ props.hash }}</span>
-      </template>
-      <span v-bind="$attrs"><slot><span class="font-mono">{{ text }}</span></slot></span>
-    </ATooltip>
-  </ATypographyLink>
-</template>
+<script setup lang="ts">
+import { Tooltip as ATooltip, TypographyLink as ATypographyLink } from 'ant-design-vue';
+import { computed } from 'vue';
+import { desensitize, getScanBrowser } from '../../../../utils';
+
+type HashType = Parameters<typeof getScanBrowser>[2];
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(
+  defineProps<{
+    hash: string
+    hide?: boolean
+    chain?: string
+    type?: HashType
+    empty?: string
+  }>(),
+  {
+    hide: true,
+    type: 'transaction',
+    empty: '-',
+  },
+);
+
+const href = computed(() => {
+  const { hash, chain, type } = props;
+
+  if (!hash || !chain || !type)
+    return;
+  return getScanBrowser(chain, hash, type);
+});
+const text = computed(() => {
+  if (props.hash)
+    return props.hide ? desensitize(props.hash) : props.hash;
+  else
+    return props.empty;
+});
+</script>
+
+<template>
+  <ATypographyLink :href="href" :copyable="{ text: props.hash, tooltip: false }" target="_blank">
+    <ATooltip>
+      <template v-if="props.hide" #title>
+        <span class="font-mono">{{ props.hash }}</span>
+      </template>
+      <span v-bind="$attrs"><slot><span class="font-mono">{{ text }}</span></slot></span>
+    </ATooltip>
+  </ATypographyLink>
+</template>

package/admin/components/text/src/createTagGetter.ts

@@ -1,13 +1,13 @@
-import { computed, h } from 'vue';
-import { Tag as ATag } from 'ant-design-vue';
-import type { TagProps } from 'ant-design-vue';
-
-export function createTagGetter(typeMapFn: () => { [code: number | string]: [ text: string, color: TagProps['color'] ] }) {
-  const typeMap = computed(typeMapFn);
-
-  return (type: number | string) => {
-    const [text, color] = typeMap.value[type] ?? [];
-
-    return text ? h(ATag, { color }, () => text) : h('span', null, '-');
-  };
-}
+import { computed, h } from 'vue';
+import { Tag as ATag } from 'ant-design-vue';
+import type { TagProps } from 'ant-design-vue';
+
+export function createTagGetter(typeMapFn: () => { [code: number | string]: [ text: string, color: TagProps['color'] ] }) {
+  const typeMap = computed(typeMapFn);
+
+  return (type: number | string) => {
+    const [text, color] = typeMap.value[type] ?? [];
+
+    return text ? h(ATag, { color }, () => text) : h('span', null, '-');
+  };
+}

package/admin/components/upload/index.ts

@@ -1,2 +1,3 @@
 export { default as PictureCardUpload } from './src/PictureCardUpload.vue';
 export { createAwsS3Request } from './src/customRequests';
+export { getFileNameByUrl, isFilesDoneFn, urlToUploadFile } from './src/helpers';

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { message } from 'ant-design-vue';
+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';

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

@@ -0,0 +1,37 @@
+import type { UploadFile } from 'ant-design-vue/es/upload';
+import { type Ref, computed } from 'vue';
+
+/**
+ * 获取URL中的文件名
+ * @param url - 文件的URL
+ * @returns 文件名
+ */
+export function getFileNameByUrl(url: string) {
+  return url.split('/').pop();
+}
+
+/**
+ * 判断文件是否全部上传完成
+ * @param files - 上传文件的引用
+ * @returns 如果所有文件都已完成上传，则返回 true；否则返回 false
+ */
+export function isFilesDoneFn(files: Ref<UploadFile[] | undefined>) {
+  return computed(() => files.value ? files.value.every(file => file.status === 'done') : true);
+}
+
+/**
+ * 将URL转换为上传文件对象数组
+ * @param urls 要转换的URL数组或URL字符串
+ * @returns 上传文件对象数组
+ */
+export function urlToUploadFile(urls?: string[] | string) {
+  const _urls = urls ? Array.isArray(urls) ? urls : [urls] : [];
+  const files = _urls.filter(url => !!url).map(url => ({
+    uid: getFileNameByUrl(url),
+    name: getFileNameByUrl(url),
+    status: 'done',
+    url,
+  }));
+
+  return files;
+}

package/admin/permission/vuePlugin.ts

@@ -10,6 +10,7 @@ const UNWATCH_NAME = `v-${PLUGIN_NAME}@unwatch`;
 export function setupPermissionPlugin(app: App) {
   app.directive<HTMLElement, TCodes>(PLUGIN_NAME, {
     mounted(el, binding) {
+      console.log('🤡 / el:', el);
       const permissionStore = adminPlugin.deps.usePermissionStore();
 
       function updateVisibility() {

package/admin/route-guards/index.ts

@@ -1,3 +1,3 @@
-export { setupPageProgress } from './pageProgress';
-export { setupPageTitle } from './pageTitle';
-export { setupCollapseMenu } from './collapseMenu';
+export { setupPageProgress } from './pageProgress';
+export { setupPageTitle } from './pageTitle';
+export { setupCollapseMenu } from './collapseMenu';

package/admin/route-guards/pageProgress.ts

@@ -1,27 +1,27 @@
-import type { Router } from 'vue-router';
-import { useStyleTag } from '@vueuse/core';
-import NProgress from 'nprogress';
-import 'nprogress/nprogress.css';
-
-/**
- * 用于显示页面跳转时，页面顶部进度条
- */
-export function setupPageProgress(router: Router) {
-  NProgress.configure({ showSpinner: false });
-  useStyleTag(`
-    #nprogress .bar {
-      height: 3px;
-      background: var(--antd-colorPrimary);
-    }
-    #nprogress .peg {
-      box-shadow: 0 0 10px var(--antd-colorPrimary), 0 0 5px var(--antd-colorPrimary);
-    }
-  `);
-
-  router.beforeEach(() => {
-    NProgress.start();
-  });
-  router.afterEach(() => {
-    setTimeout(() => NProgress.done(), 200);
-  });
-}
+import type { Router } from 'vue-router';
+import { useStyleTag } from '@vueuse/core';
+import NProgress from 'nprogress';
+import 'nprogress/nprogress.css';
+
+/**
+ * 用于显示页面跳转时，页面顶部进度条
+ */
+export function setupPageProgress(router: Router) {
+  NProgress.configure({ showSpinner: false });
+  useStyleTag(`
+    #nprogress .bar {
+      height: 3px;
+      background: var(--antd-colorPrimary);
+    }
+    #nprogress .peg {
+      box-shadow: 0 0 10px var(--antd-colorPrimary), 0 0 5px var(--antd-colorPrimary);
+    }
+  `);
+
+  router.beforeEach(() => {
+    NProgress.start();
+  });
+  router.afterEach(() => {
+    setTimeout(() => NProgress.done(), 200);
+  });
+}

package/admin/stores/createUsePageStore.ts

@@ -21,9 +21,7 @@ interface IBreadcrumb {
 }
 
 function createUsePageStore() {
-  return defineStore('appPage', () => {
-    return storeSetup();
-  });
+  return defineStore('appPage', () => storeSetup());
 }
 
 function storeSetup() {

package/admin/styles/classCover.scss

@@ -173,6 +173,23 @@
   }
 }
 
+// ACard 组件的 actions 右对齐
+.ant-card.antd-cover__actions-right-align {
+  .ant-card-actions {
+    justify-content: flex-end !important;
+    padding: 0 24px;
+  
+    > li {
+      width: auto !important;
+      border-inline-end: none !important;
+  
+      &:not(:last-child) {
+        margin-right: 8px;
+      }
+    }
+  }
+}
+
 // 查询器表单基本样式
 .ant-form.ant-form__filter {
   display: flex;