@peng_kai/kit 0.0.15 → 0.0.16

package/.vscode/settings.json

@@ -0,0 +1,41 @@
+{
+  // Enable the ESlint flat config support
+  "eslint.experimental.useFlatConfig": true,
+
+  // Disable the default formatter, use eslint instead
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+
+  // Auto fix
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
+  },
+
+  // Silent the stylistic rules in you IDE, but still auto fix them
+  "eslint.rules.customizations": [
+    { "rule": "style/*", "severity": "off" },
+    { "rule": "*-indent", "severity": "off" },
+    { "rule": "*-spacing", "severity": "off" },
+    { "rule": "*-spaces", "severity": "off" },
+    { "rule": "*-order", "severity": "off" },
+    { "rule": "*-dangle", "severity": "off" },
+    { "rule": "*-newline", "severity": "off" },
+    { "rule": "*quotes", "severity": "off" },
+    { "rule": "*semi", "severity": "off" }
+  ],
+
+  // Enable eslint for all supported languages
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml"
+  ]
+}

package/admin/components/filter/index.ts

@@ -0,0 +1,5 @@
+export { default as FilterDrawer } from './src/FilterDrawer.vue';
+export { default as FilterReset } from './src/FilterReset.vue';
+export { default as FilterParam, paramTypes } from './src/FilterParam.vue';
+export { useFilterParams } from './src/useFilterParams';
+export { useFilterInfiniteQuery, useFilterPaginationQuery } from './src/useFilterQuery';

package/admin/{filter → components/filter/src}/FilterDrawer.vue

@@ -1,21 +1,21 @@
 <script lang="ts" setup>
-import { ref } from "vue";
-import { Drawer as ADrawer, Button as AButton } from "ant-design-vue";
+import { ref } from 'vue';
+import { Button as AButton, Drawer as ADrawer } from 'ant-design-vue';
 
 const emits = defineEmits<{
   (e: 'filter'): void
   (e: 'reset', value: number): void
-}>()
-const filterVisible = ref(false)
+}>();
+const filterVisible = ref(false);
 
 function filter() {
-  emits('filter')
-  filterVisible.value = false
+  emits('filter');
+  filterVisible.value = false;
 }
 
 function reset() {
-  emits('reset', 1)
-  filterVisible.value = false
+  emits('reset', 1);
+  filterVisible.value = false;
 }
 </script>
 
@@ -30,7 +30,10 @@ function reset() {
     </div>
   </div>
 
-  <ADrawer v-model:open="filterVisible" class="filter-drawer" placement="bottom" height="50vh">
+  <ADrawer
+    v-model:open="filterVisible" class="filter-drawer" placement="bottom"
+    height="50vh"
+  >
     <template #extra>
       <AButton class="mr-3 my--3" @click="reset()">
         重置

package/admin/{filter → components/filter/src}/FilterParam.vue

@@ -1,10 +1,10 @@
 <script lang="ts">
-import isNil from 'lodash-es/isNil'
-import isFinite from 'lodash-es/isFinite'
-import dayjs from 'dayjs'
-import bignumber from 'bignumber.js'
+import isNil from 'lodash-es/isNil';
+import isFinite from 'lodash-es/isFinite';
+import dayjs from 'dayjs';
+import bignumber from 'bignumber.js';
 
-export const paramTypes = { numberRange, datetimeRange, options }
+export const paramTypes = { numberRange, datetimeRange, options };
 
 /**
  * 时间范围格式化
@@ -13,9 +13,9 @@ export const paramTypes = { numberRange, datetimeRange, options }
  */
 function numberRange(range?: [number, number], unit?: string) {
   if (!range?.every(isFinite))
-    return ''
+    return '';
 
-  return `${bignumber(range[0]).toFormat()}~${bignumber(range[1]).toFormat()}${unit}`
+  return `${bignumber(range[0]).toFormat()}~${bignumber(range[1]).toFormat()}${unit}`;
 }
 
 /**
@@ -25,26 +25,26 @@ function numberRange(range?: [number, number], unit?: string) {
  */
 function datetimeRange(range?: [string | dayjs.Dayjs, string | dayjs.Dayjs], template = 'YYYY-MM-DD') {
   if (!range?.every(v => dayjs(v).isValid()))
-    return ''
+    return '';
 
-  return `${dayjs(range[0]).format(template)} ~ ${dayjs(range[1]).format(template)}`
+  return `${dayjs(range[0]).format(template)} ~ ${dayjs(range[1]).format(template)}`;
 }
 
 function options(
   value?: string | number | Array<string | number>,
-  options?: Array<{ value: string | number; label: any }>,
+  options?: Array<{ value: string | number, label: any }>,
 ) {
   if (isNil(value) || isNil(options))
-    return
+    return;
   if (value === '')
-    return
+    return;
 
-  const _value = Array.isArray(value) ? value : [value]
+  const _value = Array.isArray(value) ? value : [value];
 
   return options
     .filter(o => _value.includes(o.value))
     .map(o => o.label)
-    .join(', ')
+    .join(', ');
 }
 </script>
 
@@ -52,7 +52,7 @@ function options(
 const props = defineProps<{
   label: string
   content?: any
-}>()
+}>();
 </script>
 
 <template>

package/admin/{filter → components/filter/src}/FilterReset.vue

@@ -1,18 +1,21 @@
 <script setup lang="ts">
-import { Button as AButton } from "ant-design-vue";
+import { Button as AButton } from 'ant-design-vue';
 
 const props = defineProps<{
   loading?: boolean
-}>()
+}>();
 const emits = defineEmits<{
   (e: 'filter'): void
   (e: 'reset'): void
-}>()
+}>();
 </script>
 
 <template>
   <div class="flex-none flex w-min ml-auto">
-    <AButton class="mr-2 filter-btn" type="primary" htmlType="submit" :loading="props.loading" @click="emits('filter')">
+    <AButton
+      class="mr-2 filter-btn" type="primary" htmlType="submit"
+      :loading="props.loading" @click="emits('filter')"
+    >
       查询
     </AButton>
     <AButton :disabled="props.loading" @click="emits('reset')">

package/admin/{filter → components/filter/src}/useFilterParams.ts

@@ -1,19 +1,19 @@
-import { extendRef } from '@vueuse/core'
-import { reactive } from "vue";
+import { extendRef } from '@vueuse/core';
+import { reactive } from 'vue';
 
-type PageParams = { page?: string | number; page_size?: string | number }
-const defaultPageParams: PageParams = { page: 1, page_size: 10 }
+interface PageParams { page?: string | number, page_size?: string | number };
+const defaultPageParams: PageParams = { 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 = defaultPageParams,
 ) {
-  type FinalParams = AP & BP & PageParams
-  const params = reactive({ ...pageParams, ...buildParams() } as FinalParams)
+  type FinalParams = AP & BP & PageParams;
+  const params = reactive({ ...pageParams, ...buildParams() } as FinalParams);
   const update = (newParams?: Partial<FinalParams>) => {
-    Object.assign(params, { ...buildParams(), ...newParams })
-  }
+    Object.assign(params, { ...buildParams(), ...newParams, __t: Date.now() });
+  };
 
-  return extendRef(params, { update })
+  return extendRef(params, { update });
 }

package/admin/{filter → components/filter/src}/useFilterQuery.ts

@@ -1,31 +1,31 @@
-import { useFilterParams } from './useFilterParams'
-import { useInfiniteQuery, useQuery } from '@tanstack/vue-query'
+import { useInfiniteQuery, useQuery } from '@tanstack/vue-query';
+import { useFilterParams } from './useFilterParams';
 
 /**
- 
+
  */
 export function useFilterPaginationQuery<Api extends Api.Request, P extends Api.GetParam<Api>>(apiFn: Api, paramsFn: () => P) {
-  type Data = Api.GetData<Api>
+  type Data = Api.GetData<Api>;
 
-  const filterParams = useFilterParams(apiFn, paramsFn)
+  const filterParams = useFilterParams(apiFn, paramsFn);
   const filterQuery = useQuery({
     keepPreviousData: true,
     queryKey: [apiFn.id, 'pagination', filterParams],
     queryFn: () => (apiFn(filterParams) as Promise<Data>),
-  })
+  });
 
-  return [filterQuery, filterParams] as const
+  return [filterQuery, filterParams] as const;
 }
 
 export function useFilterInfiniteQuery<Api extends Api.Request, P extends Api.GetParam<Api>>(apiFn: Api, paramsFn: () => P) {
-  type Data = Api.GetData<Api>
+  type Data = Api.GetData<Api>;
 
-  const filterParams = useFilterParams(apiFn, paramsFn)
+  const filterParams = useFilterParams(apiFn, paramsFn);
   const filterQuery = useInfiniteQuery({
     keepPreviousData: true,
     queryKey: [apiFn.id, 'infinite', filterParams],
     queryFn: ctx => (apiFn({ ...filterParams, ...ctx.pageParam }) as Promise<Data>),
-  })
+  });
 
-  return [filterQuery, filterParams] as const
+  return [filterQuery, filterParams] as const;
 }

package/admin/components/scroll-nav/index.ts

@@ -1 +1 @@
-export { default as ScrollNav } from './src/ScrollNav.vue'
+export { default as ScrollNav } from './src/ScrollNav.vue';

package/admin/components/scroll-nav/src/ScrollNav.vue

@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import { computed } from "vue";
-import { useElementSize } from '@vueuse/core'
+import { computed } from 'vue';
+import { useElementSize } from '@vueuse/core';
 
 const props = defineProps<{
   selector: string
-}>()
+}>();
 
-const $content = document.querySelector(props.selector) as HTMLElement
-const $contentParent = $content.parentElement
-const { height: contentParentH } = useElementSize($contentParent)
-const { height: contentH } = useElementSize($content)
-const visible = computed(() => contentParentH.value * 2 < contentH.value)
+const $content = document.querySelector(props.selector) as HTMLElement;
+const $contentParent = $content.parentElement;
+const { height: contentParentH } = useElementSize($contentParent);
+const { height: contentH } = useElementSize($content);
+const visible = computed(() => contentParentH.value * 2 < contentH.value);
 
 function scrollTo(top: number) {
-  $contentParent?.scrollTo({ top })
+  $contentParent?.scrollTo({ top });
 }
 </script>
 

package/admin/components/text/index.ts

@@ -1,13 +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'
+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 { createTagGetter } from './src/createTagGetter';
 
 export const Text = {
   Hash,
   Amount,
   Datetime,
   Duration,
-}
+};

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

@@ -1,7 +1,7 @@
 <script lang="ts">
-import { computed } from "vue";
-import bigNumber from 'bignumber.js'
-import isNil from 'lodash-es/isNil'
+import { computed } from 'vue';
+import bigNumber from 'bignumber.js';
+import isNil from 'lodash-es/isNil';
 
 /**
  * 当 symbol 为以下值时，使用预设的 Logo
@@ -15,7 +15,7 @@ const presetSymbols: Record<string, string> = {
   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">
@@ -43,30 +43,30 @@ const props = withDefaults(
     fractionDigits: 18,
     colorful: false,
   },
-)
+);
 
 const amountText = computed(() => {
-  const _amount = props.amount
+  const _amount = props.amount;
 
   if (isNil(_amount))
-    return '-'
+    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+$/, '')
+  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
-})
+  return bnt;
+});
 const amountColor = computed(() => {
-  const num = Number.parseFloat(props.amount as string)
+  const num = Number.parseFloat(props.amount as string);
 
   if (!props.colorful || (Number.isNaN(num) ? true : num === 0))
-    return ''
+    return '';
 
-  return num > 0 ? '#52c41a' : (num < 0 ? '#ff4d4f' : '#000')
-})
-const symbol = computed(() => presetSymbols[props.symbol!] ?? props.symbol ?? '')
+  return num > 0 ? '#52c41a' : (num < 0 ? '#ff4d4f' : '#000');
+});
+const symbol = computed(() => presetSymbols[props.symbol!] ?? props.symbol ?? '');
 </script>
 
 <template>
@@ -75,7 +75,10 @@ const symbol = computed(() => presetSymbols[props.symbol!] ?? props.symbol ?? ''
     <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 -->
+    <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，如法定币种符号(￥、$) -->
 
     <!-- 金额 -->

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

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { Tooltip as ATooltip } from "ant-design-vue";
-import { computed } from "vue";
-import { getDependencies } from "../../../../kitDependencies";
+import { Tooltip as ATooltip } from 'ant-design-vue';
+import { computed } from 'vue';
+import { getDependencies } from '../../../../kitDependencies';
 
 defineOptions({
   inheritAttrs: false,
-})
+});
 
 const props = withDefaults(
   defineProps<{
@@ -15,20 +15,20 @@ const props = withDefaults(
   {
     template: 'MM-DD HH:mm:ss',
   },
-)
-const {dayjs} = getDependencies()!
+);
+const { dayjs } = getDependencies()!;
 const timestamp = computed(() => {
-  let tsStr = String(props.timestamp)
+  let tsStr = String(props.timestamp);
 
   if (tsStr.length === 10)
-    tsStr += '000'
+    tsStr += '000';
   if (tsStr.length !== 13)
-    return
+    return;
 
-  const tsNum = Number.parseInt(tsStr)
+  const tsNum = Number.parseInt(tsStr);
 
-  return Number.isNaN(tsNum) ? undefined : tsNum
-})
+  return Number.isNaN(tsNum) ? undefined : tsNum;
+});
 </script>
 
 <template>

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

@@ -1,24 +1,24 @@
 <script setup lang="ts">
-import { computed } from "vue";
+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 = ''
+  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)}秒`)
+  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
-})
+  return formattedDuration;
+});
 </script>
 
 <template>

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

@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { Tooltip as ATooltip, TypographyLink as ATypographyLink } from "ant-design-vue";
-import { computed } from "vue";
-import { desensitize, getScanBrowser } from '../../../../utils'
+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]
+type HashType = Parameters<typeof getScanBrowser>[2];
 
 defineOptions({
   inheritAttrs: false,
-})
+});
 
 const props = withDefaults(
   defineProps<{
@@ -19,21 +19,23 @@ const props = withDefaults(
   {
     hide: true,
   },
-)
+);
 
 const href = computed(() => {
-  const { hash, chain, type } = props
+  const { hash, chain, type } = props;
 
   if (!hash || !chain || !type)
-    return
-  return getScanBrowser(chain, hash, 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>
+      <template v-if="props.hide" #title>
+        {{ props.hash }}
+      </template>
       <span v-bind="$attrs">{{ props.hide ? desensitize(props.hash) : props.hash }}</span>
     </ATooltip>
   </ATypographyLink>

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

package/admin/defines/index.ts

@@ -1,5 +1,4 @@
-export { definePage } from './definePage'
-export { defineRoute, getRoutes } from './defineRoute'
-export { getMenusByRouter, getTitle as getRouteTitle } from './defineRoute.helpers'
-export { defineRouteGuard, getRouteGuards } from './defineRouteGuard'
-export { defineStartup, getStartups } from './defineStartup'
+export { definePage } from './page';
+export { defineRoute, getRoutes } from './route';
+export { defineRouteGuard, getRouteGuards } from './route-guard';
+export { defineStartup, getStartups } from './startup';

package/admin/defines/page/definePage.ts

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

package/admin/defines/page/index.ts

@@ -0,0 +1 @@
+export { definePage } from './definePage';

package/admin/defines/route/defineRoute.ts

@@ -0,0 +1,14 @@
+import type { RouteRecordRaw } from 'vue-router';
+import { definePage } from '../page';
+
+export { defineRoute, RouteSymbol };
+
+const RouteSymbol = Symbol('app-route');
+
+/** 定义路由 */
+function defineRoute(route: (params: { definePage: typeof definePage }) => RouteRecordRaw[]) {
+  const routeFn: any = () => route({ definePage });
+  routeFn[RouteSymbol] = true;
+
+  return routeFn;
+}