@peng_kai/kit 0.0.1 → 0.0.2

package/admin/components/text/index.ts

@@ -0,0 +1,13 @@
+import Hash from './src/Hash.vue'
+import Amount from './src/Amount.vue'
+import Datetime from './src/Datetime.vue'
+import Duration from './src/Duration.vue'
+
+export { createTagGetter } from './src/createTagGetter'
+
+export const Text = {
+  Hash,
+  Amount,
+  Datetime,
+  Duration,
+}

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

@@ -0,0 +1,114 @@
+<script lang="ts">
+import { computed } from "vue";
+import bigNumber from 'bignumber.js'
+import isNil from 'lodash-es/isNil'
+
+/**
+ * 当 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 ? '#52c41a' : (num < 0 ? '#ff4d4f' : '#000')
+})
+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" :alt="props.unit"> <!-- 图片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/Datetime.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { Tooltip as ATooltip } from "ant-design-vue";
+import { computed } from "vue";
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import 'dayjs/locale/zh'
+
+dayjs.extend(relativeTime)
+dayjs.locale('zh')
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<{
+    timestamp?: number | string
+    template?: string
+  }>(),
+  {
+    template: 'MM-DD HH:mm:ss',
+  },
+)
+
+const timestamp = computed(() => {
+  let tsStr = String(props.timestamp)
+
+  if (tsStr.length === 10)
+    tsStr += '000'
+  if (tsStr.length !== 13)
+    return
+
+  const tsNum = Number.parseInt(tsStr)
+
+  return Number.isNaN(tsNum) ? undefined : tsNum
+})
+</script>
+
+<template>
+  <ATooltip destroyTooltipOnHide>
+    <template v-if="timestamp" #title>
+      <div>{{ dayjs(timestamp).fromNow() }}</div>
+      <div>{{ dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss') }}</div>
+    </template>
+    <span v-bind="$attrs">{{ timestamp ? dayjs(timestamp).format(props.template) : '-' }}</span>
+  </ATooltip>
+</template>
+
+<style scoped lang="scss"></style>

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

@@ -0,0 +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>

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

@@ -0,0 +1,40 @@
+<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
+  }>(),
+  {
+    hide: true,
+  },
+)
+
+const href = computed(() => {
+  const { hash, chain, type } = props
+
+  if (!hash || !chain || !type)
+    return
+  return getScanBrowser(chain, hash, type)
+})
+</script>
+
+<template>
+  <ATypographyLink :href="href" :copyable="{ text: props.hash, tooltip: false }" target="_blank">
+    <ATooltip>
+      <template v-if="props.hide" #title>{{ props.hash }}</template>
+      <span v-bind="$attrs">{{ props.hide ? desensitize(props.hash) : props.hash }}</span>
+    </ATooltip>
+  </ATypographyLink>
+</template>

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

@@ -0,0 +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]: [ text: string, color: TagProps['color'] ] }) {
+  const typeMap = computed(typeMapFn)
+
+  return (type: number) => {
+    const [text, color] = typeMap.value[type] ?? []
+
+    return text ? h(ATag, { color }, () => text) : h('span', null, '-')
+  }
+}

package/admin/defines/definePage.ts

@@ -0,0 +1,14 @@
+import  { defineComponent, defineAsyncComponent, h } from 'vue'
+import type { AsyncComponentLoader } from 'vue'
+
+export { definePage }
+
+function definePage(loader: AsyncComponentLoader) {
+  return defineComponent({
+    setup() {
+      const Page = defineAsyncComponent(loader)
+
+      return () => h(Page, null)
+    },
+  })
+}

package/admin/defines/defineRoute.ts

@@ -0,0 +1,161 @@
+import type { RouteRecordRaw } from 'vue-router'
+import merge from 'lodash-es/merge'
+import type { VNode } from 'vue'
+import { definePage } from './definePage'
+import { ENV } from "../../utils";
+
+export { defineRoute, getRoutes }
+
+const RouteSymbol = Symbol('app-route')
+
+/** 定义路由 */
+function defineRoute(route: (params: { definePage: typeof definePage }) => RouteRecordRaw[]) {
+  const routeFn: any = () => route({ definePage })
+  routeFn[RouteSymbol] = true
+
+  return routeFn
+}
+
+/** 获取路由 */
+async function getRoutes() {
+  const routeFileRE = /\/([A-Za-z0-9-]+.)?route\.ts$/
+  const routeFiles = Object.fromEntries(
+    Object.entries(getRoutes.modules).filter(([n]) => routeFileRE.test(n)),
+  ) as Record<string, Function>
+  let routes: RouteRecordRaw[] = []
+
+  for (const name in routeFiles) {
+    const module: any = await routeFiles[name]()
+
+    if (Object.hasOwn(module?.default ?? {}, RouteSymbol))
+      Array.prototype.push.apply(routes, module.default())
+  }
+
+  // 处理路由
+  routes = meregeDefaultRouteParams(routes)
+  routes = sortRoute(routes)
+
+  // 输出路由
+  if (!ENV.isProd) {
+    console.groupCollapsed('一级路由')
+
+    console.table(
+      routes.map(route => ({ order: route.meta?.order, ...route })),
+      ['order', 'name', 'path'],
+    )
+
+    console.groupEnd()
+  }
+
+  return routes
+}
+getRoutes.modules = {} as any
+
+/** 给路由填充默认参数 */
+const defaultRouteParams: Partial<RouteRecordRaw> = {
+  meta: {
+    title: '标题',
+    icon: undefined,
+    order: 10,
+    requireAuth: true,
+    keepAlive: false,
+    hiddenTab: false,
+    pageKeyFn: route => route.path,
+  },
+}
+
+function meregeDefaultRouteParams(routes: RouteRecordRaw[], parentRoute?: RouteRecordRaw) {
+  const _routes: typeof routes = []
+
+  for (const route of routes) {
+    if (route.children?.length)
+      route.children = meregeDefaultRouteParams(route.children, route)
+
+    const newRoute = merge({}, defaultRouteParams, route)
+    const { menuOrder } = newRoute.meta!
+
+    // 处理 menuOrder
+    if (typeof menuOrder === 'string')
+      newRoute.meta!.menuOrder = menuOrder.replace('..', (parentRoute?.name ?? '') as string)
+
+    _routes.push(newRoute)
+  }
+
+  return _routes
+}
+
+/** 给路由排序 */
+function sortRoute(routes: RouteRecordRaw[]) {
+  const _routes = routes.sort((r1, r2) => r1!.meta!.order! - r2!.meta!.order!)
+
+  for (const route of _routes) {
+    if (route.children?.length)
+      route.children = sortRoute(route.children)
+  }
+
+  return _routes
+}
+
+declare module 'vue-router' {
+  interface RouteMeta {
+    /**
+     * 路由标题
+     *
+     * @description 可用来作 document.title 和菜单的名称
+     *
+     * 默认：APP 名称
+     */
+    title?: string | (() => string)
+    /**
+     * 菜单和面包屑对应的图标
+     *
+     * 默认：`''`
+     */
+    icon?: (() => VNode)
+    /**
+     * 路由添加顺序，仅作用于一级路由
+     *
+     * 默认：`10`
+     */
+    order?: number
+    /**
+     * 是否需要登录
+     *
+     * 默认：`false`
+     */
+    requireAuth?: boolean
+    /**
+     * 缓存页面
+     *
+     * 默认：`true`
+     */
+    keepAlive?: boolean
+    /**
+     * 菜单排序（升序）
+     *
+     * 格式：[parent]@[order]
+     * - `parent`：可选。不填则默认取路由的 name 值，并在作为一级菜单显示
+     * - `order`：必选。路由排序，值越小排越前
+     *
+     * 例子：
+     * - `@10`：一级菜单
+     * - `..@10`：所在的路由层级的父级菜单，例如父级菜单是 admin，那么`..`就是`admin`
+     * - `admin@10`：指定菜单的父级为 `admin`
+     *
+     * 默认：undefined。不在菜单中显示
+     */
+    menuOrder?: string
+    /**
+     * 是否隐藏标签页
+     *
+     * 默认：`false`
+     */
+    hiddenTab?: boolean
+    /**
+     * 用于生成页面运行时的 key
+     *
+     * 默认：取 route 对象中 path 值
+     */
+    pageKeyFn?: (route: RouteLocationNormalizedLoaded) => string
+  }
+}

package/admin/defines/defineRouteGuard.ts

@@ -0,0 +1,56 @@
+import type { Router } from 'vue-router'
+import { ENV } from "../../utils";
+
+export { defineRouteGuard, getRouteGuards }
+
+interface IGuardConfig {
+  /** 路由守卫添加顺序（升序加载） */
+  order?: number
+  setup: (router: Router) => void
+}
+
+// 路由守卫标识
+const RouteGuardSymbol = Symbol('app-route-guard')
+
+// 定义路由守卫
+function defineRouteGuard(guard: IGuardConfig) {
+  (guard as any)[RouteGuardSymbol] = true
+  guard.order ??= 10
+
+  return guard
+}
+
+// 获取路由守卫
+async function getRouteGuards() {
+  const routeGuardFileRE = /\/([A-Za-z0-9-]+.)?route-guard\.ts$/
+  const routeGuardFiles = Object.fromEntries(
+    Object.entries(getRouteGuards.modules).filter(([n]) => routeGuardFileRE.test(n)),
+  ) as Record<string, Function>
+  let routeGuards: Array<IGuardConfig> = []
+  let routeGuardRecord: { file: string; order: number }[] = []
+
+  for (const name in routeGuardFiles) {
+    const module: any = await routeGuardFiles[name]()
+
+    if (Object.hasOwn(module?.default ?? {}, RouteGuardSymbol)) {
+      const guard = module.default
+
+      routeGuards.push(guard)
+      routeGuardRecord.push({ file: name, order: guard.order })
+    }
+  }
+
+  // 处理路由守卫
+  routeGuards = routeGuards.sort()
+  routeGuardRecord = routeGuardRecord.sort()
+
+  // 输出路由守卫
+  if (!ENV.isProd) {
+    console.groupCollapsed('路由守卫')
+    console.table(routeGuardRecord, ['order', 'file'])
+    console.groupEnd()
+  }
+
+  return routeGuards
+}
+getRouteGuards.modules = {} as any

package/admin/defines/defineStartup.ts

@@ -0,0 +1,41 @@
+import type { App } from 'vue'
+import { ENV } from "../../utils";
+
+export { defineStartup, getStartups }
+
+type StartupFn = (app: App) => void | Promise<void>
+
+const StartupSymbol = Symbol('app-startup')
+
+function defineStartup(startup: StartupFn) {
+  (startup as any)[StartupSymbol] = true
+
+  return startup
+}
+
+async function getStartups() {
+  const moduleLoaders = getStartups.modules as Record<string, Function>
+  const startupPaths: string[] = []
+  const startups: Array<StartupFn> = []
+
+  for (const [path, moduleLoader] of Object.entries(moduleLoaders)) {
+    const module: any = await moduleLoader()
+    const plugin: StartupFn = module?.default ?? {}
+
+    if (!Object.hasOwn(plugin, StartupSymbol))
+      continue
+
+    startupPaths.push(path)
+    startups.push(plugin)
+  }
+
+  // 输出 App 插件
+  if (!ENV.isProd) {
+    console.groupCollapsed('启动时')
+    console.table(startupPaths.map(path => ({ path })), ['path'])
+    console.groupEnd()
+  }
+
+  return startups
+}
+getStartups.modules = {} as any

package/admin/defines/index.ts

@@ -0,0 +1,4 @@
+export { definePage } from './definePage'
+export { defineRoute, getRoutes } from './defineRoute'
+export { defineRouteGuard, getRouteGuards } from './defineRouteGuard'
+export { defineStartup, getStartups } from './defineStartup'

package/antd/admin/FilterDrawer.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { ref } from "vue";
+import { Drawer as ADrawer, Button as AButton } from "ant-design-vue";
 
 const emits = defineEmits<{
   (e: 'filter'): void

package/antd/admin/FilterReset.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { Button as AButton } from "ant-design-vue";
+
 const props = defineProps<{
   loading?: boolean
 }>()

package/antd/admin/index.ts

@@ -1,3 +1,4 @@
 export { default as FilterDrawer } from './FilterDrawer.vue'
 export { default as FilterReset } from './FilterReset.vue'
-export { default as FilterParam, paramTypes} from './FilterParam.vue'
+export { default as FilterParam, paramTypes} from './FilterParam.vue'
+export { useFilterParams } from './useFilterParams'

package/antd/admin/useFilterParams.ts

@@ -0,0 +1,17 @@
+import { extendRef } from '@vueuse/core'
+import { reactive } from "vue";
+
+const defaultPageParams: any = { page: 1, page_size: 10 }
+
+export function useFilterParams<R extends Api.Request, AP extends Api.GetParam<R>, BP extends AP>(
+  _api: R,
+  buildParams: () => BP,
+  pageParams: Pick<AP, 'page' | 'page_size'> = defaultPageParams,
+) {
+  const params = reactive({ ...pageParams, ...buildParams() } as AP & BP)
+  const update = (newParams?: Partial<AP>) => {
+    Object.assign(params, { ...buildParams(), ...newParams })
+  }
+
+  return extendRef(params, { update })
+}

package/antd/components/InputNumberRange.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { Form, InputNumber as AInputNumber } from 'ant-design-vue'
+
+const props = withDefaults(
+  defineProps<{
+    value: [number, number]
+    min?: number
+    max?: number
+  }>(),
+  {
+    min: Number.NEGATIVE_INFINITY,
+    max: Number.POSITIVE_INFINITY,
+  },
+)
+const emits = defineEmits<{
+  (e: 'update:value', value: [number, number]): void
+}>()
+
+const formItemContext = Form.useInjectFormItemContext()
+const minValue = computed({
+  get() {
+    return props.value[0]
+  },
+  set(value) {
+    emits('update:value', [value, props.value[1]])
+    formItemContext.onFieldChange()
+  },
+})
+const maxValue = computed({
+  get() {
+    return props.value[1]
+  },
+  set(value) {
+    emits('update:value', [props.value[0], value])
+    formItemContext.onFieldChange()
+  },
+})
+</script>
+
+<template>
+  <div class="flex items-center">
+    <AInputNumber v-model:value="minValue" class="w-full" :min="props.min" :max="props.max" />
+    <span>&nbsp;~&nbsp;</span>
+    <AInputNumber v-model:value="maxValue" class="w-full" :min="props.min" :max="props.max" />
+  </div>
+</template>

package/antd/index.ts

@@ -2,4 +2,6 @@ export { useAntdModal } from './hooks/useAntdModal'
 export { useAntdDrawer } from './hooks/useAntdDrawer'
 export { useAntdTable } from './hooks/useAntdTable'
 export { useAntdForm } from './hooks/useAntdForm'
-export { createAntdModal } from './hooks/createAntdModal'
+export { createAntdModal } from './hooks/createAntdModal'
+export { default as InputNumberRange } from './components/InputNumberRange.vue'
+export type { TField } from './hooks/useAntdForm.ts'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peng_kai/kit",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -17,7 +17,8 @@
     "bignumber.js": "^9.1.2",
     "dayjs": "^1.11.10",
     "lodash-es": "^4.17.21",
-    "vue": "^3.3.7"
+    "vue": "^3.3.7",
+    "vue-router": "^4.2.5"
   },
   "devDependencies": {
     "@types/lodash-es": "^4.17.10",
@@ -33,6 +34,7 @@
     "bignumber.js": "9.x",
     "dayjs": "1.x",
     "lodash-es": "4.x",
-    "vue": "3.3.x"
+    "vue": "3.3.x",
+    "vue-router": "4.2.x"
   }
 }

package/pnpm-lock.yaml

@@ -29,6 +29,9 @@ dependencies:
   vue:
     specifier: ^3.3.7
     version: 3.3.7
+  vue-router:
+    specifier: ^4.2.5
+    version: 4.2.5(vue@3.3.7)
 
 devDependencies:
   '@types/lodash-es':
@@ -554,6 +557,15 @@ packages:
       vue: 3.3.7
     dev: false
 
+  /vue-router@4.2.5(vue@3.3.7):
+    resolution: {integrity: sha512-DIUpKcyg4+PTQKfFPX88UWhlagBEBEfJ5A8XDXRJLUnZOvcpMF8o/dnL90vpVkGaPbjvXazV/rC1qBKrZlFugw==}
+    peerDependencies:
+      vue: ^3.2.0
+    dependencies:
+      '@vue/devtools-api': 6.5.1
+      vue: 3.3.7
+    dev: false
+
   /vue-types@3.0.2(vue@3.3.7):
     resolution: {integrity: sha512-IwUC0Aq2zwaXqy74h4WCvFCUtoV0iSWr0snWnE9TnU18S66GAQyqQbRf2qfJtUuiFsBf6qp0MEwdonlwznlcrw==}
     engines: {node: '>=10.15.0'}

package/request/helpers.ts

@@ -1,5 +1,3 @@
-import type { AxiosInstance } from 'axios'
-
 export { isTimeout,  ApiCode, ApiError }
 
 enum ApiCode {
@@ -12,24 +10,6 @@ function isTimeout(error: any) {
   return error?.message?.toLowerCase().includes('timeout')
 }
 
-// function useInterceptor<Obj extends { use: (...args: any) => any }, Args extends Obj>(obj: Obj) {}
-
-/** 获取 services 目录下的所以接口服务 */
-// function getServices() {
-//   const serversModule = import.meta.glob('./services/**[!.].ts', { eager: true })
-//   const servers: Record<string, { server: AxiosInstance } | undefined> = {}
-
-//   for (const [key, module] of Object.entries(serversModule)) {
-//     const name = key.match(/\/([0-9a-zA-Z]+)\.ts$/)?.[1]
-
-//     if (name)
-//       servers[`${name}.api`] = module as any
-//   }
-
-//   return servers
-// }
-
-// 命名原因：避免由于自动导入造成的命名冲突
 class ApiError<TResp = any> extends Error {
   public static is<ErrorResp = any>(error: any): error is ApiError<ErrorResp> {
     return !!error?.isApiError

package/request/index.ts

@@ -0,0 +1,4 @@
+/// <reference path="./type.d.ts" />
+
+export { createRequest } from './request'
+export { ApiCode, ApiError } from './helpers'

package/request/interceptors/checkCode.ts

@@ -2,6 +2,9 @@ import axios from "axios";
 import type { AxiosInterceptorManager } from "axios";
 import {  ApiCode} from "../helpers";
 
+/**
+ * 【响应拦截器】检查 API 的 code 字段
+ */
 export function checkCode(): Parameters<AxiosInterceptorManager<any>['use']> {
   return [
     (resp) => {

package/request/interceptors/filterEmptyValue.ts

@@ -0,0 +1,17 @@
+import type { AxiosInterceptorManager } from "axios";
+import pickBy from 'lodash-es/pickBy'
+
+/**
+ * 【请求拦截器】过滤空值，如：null、undefined、''、NaN
+ */
+export function filterEmptyValue(): Parameters<AxiosInterceptorManager<any>['use']> {
+  return [
+    (req) => {
+      req.params = pickBy(req.params, (v) => {
+        return v !== null && v !== undefined && v !== '' && !Number.isNaN(v)
+      })
+    
+      return req
+    }
+  ]
+}

package/request/interceptors/formatPaging.ts

@@ -1,5 +1,8 @@
 import type { AxiosInterceptorManager } from "axios";
 
+/**
+ * 【响应拦截器】格式化分页数据
+ */
 export function formatPaging(): Parameters<AxiosInterceptorManager<any>['use']> {
   return [
     (resp) => {

package/request/interceptors/index.ts

@@ -2,4 +2,49 @@ export { popupMessage } from './popupMessage'
 export { returnResultType } from './returnResultType'
 export { unitizeAxiosError } from './unitizeAxiosError'
 export { checkCode } from './checkCode'
-export { formatPaging } from './formatPaging'
+export { formatPaging } from './formatPaging'
+export { filterEmptyValue } from './filterEmptyValue'
+
+declare module 'axios' {
+  interface AxiosRequestConfig {
+    /**
+     * 接口返回的数据类型
+     *
+     * - `axios`：Axios 的 Response
+     * - `api`：API 数据完整结构
+     * - `data`：API 数据中的 data 字段值，**默认**
+     */
+    resultType?: 'axios' | 'api' | 'data'
+    /**
+     * 是否加入查询参数时间戳
+     *
+     * - `true`：**默认**
+     */
+    joinTime?: boolean
+    /**
+     * 当接口报错时，是否弹出 message 提示。取值：
+     * - `false`：弹出 message 提示
+     * - `true`：弹出 message 提示，内容使用接口 msg 的值，**默认**
+     * - string：自定义 message 内容
+     */
+    errorMessage?: string | boolean
+    /**
+     * 当接口成功时，是否弹出 message 提示。取值：
+     * - `false`：弹出 message 提示，**默认**
+     * - `true`：弹出 message 提示，内容使用接口 msg 的值
+     * - string：自定义 message 内容
+     */
+    successMessage?: string | boolean
+    /**
+     * 是否检查 API 的 code 字段
+     *
+     * - `true`：当 code 非 0 时报错，**默认**
+     * - `false`：不检查
+     */
+    checkCode?: boolean
+    /**
+     * 需要忽略的 code，即数组中的 code 都视为请求成功
+     */
+    ignoreCode?: number[]
+  }
+}

package/request/interceptors/popupMessage.ts

@@ -2,6 +2,10 @@ import axios from 'axios'
 import type { AxiosInterceptorManager } from "axios";
 import { isTimeout } from "../helpers";
 
+/**
+ * 【响应拦截器】弹出 message 提示
+ * @param popup 弹出提示的函数
+ */
 export function popupMessage(popup: (type: 'error' | 'success', message: string) => void): Parameters<AxiosInterceptorManager<any>['use']> {
   return [
   (resp) => {

package/request/interceptors/returnResultType.ts

@@ -1,6 +1,9 @@
 import type { AxiosInterceptorManager } from "axios";
 import { ApiCode, isTimeout, ApiError } from "../helpers";
 
+/**
+ * 【响应拦截器】返回请求结果
+ */
 export function returnResultType(): Parameters<AxiosInterceptorManager<any>['use']> {
   return [
     (resp) => {

package/request/interceptors/unitizeAxiosError.ts

@@ -1,6 +1,9 @@
 import axios from "axios";
 import type { AxiosInterceptorManager } from "axios";
 
+/**
+ * 【响应拦截器】统一处理 AxiosError
+ */
 export function unitizeAxiosError(): Parameters<AxiosInterceptorManager<any>['use']> {
   return [
     resp => resp,

package/request/request.ts

@@ -8,6 +8,7 @@ function createRequest<Req, OResp, Resp = Api.TransformPageResult<OResp>>(
   paramBuilder: (params: any) => any,
 ) {
   type ReqConfig = Partial<AxiosRequestConfig>
+  let defaultConfig: ReqConfig | null = null
 
   // 返回 Axios 的 Response
   async function request<Rt extends 'axios'>(reqData: Req, options: ReqConfig & { resultType: Rt }): Promise<AxiosResponse<Resp>>
@@ -28,13 +29,17 @@ function createRequest<Req, OResp, Resp = Api.TransformPageResult<OResp>>(
     const res = await service.request({
       apiName: `${serviceName}/${id}`,
       ...params,
-      ...config,
+      ...Object.assign({}, defaultConfig, config),
     })
 
     return res as Api.GetDataField<Resp>
   }
 
   request.id = id
+  request.setDefaultConfig = (config: ReqConfig) => {
+    defaultConfig = config
+    return request
+  }
 
   return request
 }
@@ -43,47 +48,3 @@ function createRequest<Req, OResp, Resp = Api.TransformPageResult<OResp>>(
 createRequest.services = {} as Record<string, {
   server: AxiosInstance;
 } | undefined>
-
-declare module 'axios' {
-  interface AxiosRequestConfig {
-    /**
-     * 接口返回的数据类型
-     *
-     * - `axios`：Axios 的 Response
-     * - `api`：API 数据完整结构
-     * - `data`：API 数据中的 data 字段值，**默认**
-     */
-    resultType?: 'axios' | 'api' | 'data'
-    /**
-     * 是否加入查询参数时间戳
-     *
-     * - `true`：**默认**
-     */
-    joinTime?: boolean
-    /**
-     * 当接口报错时，是否弹出 message 提示。取值：
-     * - `false`：弹出 message 提示
-     * - `true`：弹出 message 提示，内容使用接口 msg 的值，**默认**
-     * - string：自定义 message 内容
-     */
-    errorMessage?: string | boolean
-    /**
-     * 当接口成功时，是否弹出 message 提示。取值：
-     * - `false`：弹出 message 提示，**默认**
-     * - `true`：弹出 message 提示，内容使用接口 msg 的值
-     * - string：自定义 message 内容
-     */
-    successMessage?: string | boolean
-    /**
-     * 是否检查 API 的 code 字段
-     *
-     * - `true`：当 code 非 0 时报错，**默认**
-     * - `false`：不检查
-     */
-    checkCode?: boolean
-    /**
-     * 需要忽略的 code，即数组中的 code 都视为请求成功
-     */
-    ignoreCode?: number[]
-  }
-}

package/utils/index.ts

@@ -0,0 +1,72 @@
+export const ENV = {
+  get isDev() {
+    return (import.meta as any).env.DEV
+  },
+  get isProd() {
+    return (import.meta as any).env.PROD
+  },
+  get isStaging() {
+    return (import.meta as any).env.MODE === 'staging'
+  },
+  get isTest() {
+    return this.isDev || this.isStaging
+  },
+}
+
+/**
+ * 睡眠
+ * @param dur 时长
+ */
+export function sleep(dur: number) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, dur)
+  })
+}
+
+/**
+ * 字符串脱敏，省略中间字符串
+ * @param str 字符串
+ * @param startChars 开头显示字符数量
+ * @param endChars 结尾显示字符数量
+ */
+export function desensitize(str: string | undefined | null, startChars = 4, endChars?: number) {
+  if (!str)
+    return ''
+
+  // eslint-disable-next-line no-param-reassign
+  endChars ??= startChars
+
+  if (startChars + endChars >= str.length)
+    return str
+
+  const truncatedStr = `${str.substring(0, startChars)}...${str.substring(str.length - endChars)}`
+
+  return truncatedStr
+}
+
+/**
+ * 对应链的浏览器地址
+ * @param chain 链名
+ * @param hash 哈希
+ * @param type 哈希类型
+ */
+export function getScanBrowser(chain: string, hash: string, type: 'block' | 'transaction' | 'address' = 'transaction') {
+  const _chain = chain.toUpperCase()
+  const evmType = type === 'transaction' ? 'tx' : type
+  const url
+      = {
+        TRON: `https://${ENV.isTest ? 'nile.' : ''}tronscan.org/#/${type}/${hash}`,
+        ETHEREUM: `https://${ENV.isTest ? 'sepolia.' : ''}etherscan.io/${evmType}/${hash}`,
+        BINANCE: `https://${ENV.isTest ? 'testnet.' : ''}bscscan.com/${evmType}/${hash}`,
+      }[_chain] ?? ''
+
+  return url
+}
+
+/**
+ * Telegram连接
+ * @param link 链接
+ */
+export function getTelegramBrowser(link: string) {
+  return `https://t.me/${link}`
+}

package/vue/hooks/useIsMounted.ts

@@ -0,0 +1,9 @@
+import { ref, onMounted } from "vue";
+
+export function useIsMounted() {
+  const mounted = ref(false)
+
+  onMounted(() => (mounted.value = true))
+
+  return mounted
+}

package/vue/index.ts

@@ -1,2 +1,3 @@
 export { useComponentRef } from './hooks/useComponentRef'
-export { useTeleportTarget } from './hooks/useTeleportTarget'
+export { useTeleportTarget } from './hooks/useTeleportTarget'
+export { useIsMounted } from './hooks/useIsMounted'