@peng_kai/kit 0.0.14 → 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,96 +1,99 @@
-<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
-  (e: 'reset', value: number): void
-}>()
-const filterVisible = ref(false)
-
-function filter() {
-  emits('filter')
-  filterVisible.value = false
-}
-
-function reset() {
-  emits('reset', 1)
-  filterVisible.value = false
-}
-</script>
-
-<template>
-  <div class="p-3 mb-2 bg-white text-14px" @click="filterVisible = true">
-    <!-- .filter-params 为空时显示 .filter-params-tips -->
-    <div class="filter-params">
-      <slot name="params" />
-    </div>
-    <div class="filter-params-tips">
-      条件筛选，点击打开
-    </div>
-  </div>
-
-  <ADrawer v-model:open="filterVisible" class="filter-drawer" placement="bottom" height="50vh">
-    <template #extra>
-      <AButton class="mr-3 my--3" @click="reset()">
-        重置
-      </AButton>
-      <AButton class="my--3" type="primary" @click="filter()">
-        筛选
-      </AButton>
-    </template>
-    <template #default>
-      <slot />
-    </template>
-  </ADrawer>
-</template>
-
-<style scoped lang="scss">
-.filter-params {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  gap: 5px 15px;
-}
-
-// .filter-params 为空时显示 .filter-params-tips
-.filter-params-tips {
-  display: none;
-  color: theme('colors.gray.DEFAULT');
-}
-
-.filter-params:empty {
-  display: none;
-}
-
-.filter-params:empty + .filter-params-tips {
-  display: block;
-}
-</style>
-
-<style lang="scss">
-.filter-drawer {
-  .ant-drawer-header {
-    padding: 16px;
-
-    .ant-drawer-close {
-      --expand: 5px;
-
-      padding: var(--expand);
-      margin: calc(var(--expand) * -1) var(--expand) calc(var(--expand) * -1) 0;
-    }
-  }
-
-  .ant-drawer-body {
-    padding: 16px;
-  }
-
-  .ant-form-item {
-    margin-bottom: 0;
-
-    .ant-form-item-label {
-      padding-bottom: 0;
-    }
-  }
-}
-</style>
+<script lang="ts" setup>
+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);
+
+function filter() {
+  emits('filter');
+  filterVisible.value = false;
+}
+
+function reset() {
+  emits('reset', 1);
+  filterVisible.value = false;
+}
+</script>
+
+<template>
+  <div class="p-3 mb-2 bg-white text-14px" @click="filterVisible = true">
+    <!-- .filter-params 为空时显示 .filter-params-tips -->
+    <div class="filter-params">
+      <slot name="params" />
+    </div>
+    <div class="filter-params-tips">
+      条件筛选，点击打开
+    </div>
+  </div>
+
+  <ADrawer
+    v-model:open="filterVisible" class="filter-drawer" placement="bottom"
+    height="50vh"
+  >
+    <template #extra>
+      <AButton class="mr-3 my--3" @click="reset()">
+        重置
+      </AButton>
+      <AButton class="my--3" type="primary" @click="filter()">
+        筛选
+      </AButton>
+    </template>
+    <template #default>
+      <slot />
+    </template>
+  </ADrawer>
+</template>
+
+<style scoped lang="scss">
+.filter-params {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  gap: 5px 15px;
+}
+
+// .filter-params 为空时显示 .filter-params-tips
+.filter-params-tips {
+  display: none;
+  color: theme('colors.gray.DEFAULT');
+}
+
+.filter-params:empty {
+  display: none;
+}
+
+.filter-params:empty + .filter-params-tips {
+  display: block;
+}
+</style>
+
+<style lang="scss">
+.filter-drawer {
+  .ant-drawer-header {
+    padding: 16px;
+
+    .ant-drawer-close {
+      --expand: 5px;
+
+      padding: var(--expand);
+      margin: calc(var(--expand) * -1) var(--expand) calc(var(--expand) * -1) 0;
+    }
+  }
+
+  .ant-drawer-body {
+    padding: 16px;
+  }
+
+  .ant-form-item {
+    margin-bottom: 0;
+
+    .ant-form-item-label {
+      padding-bottom: 0;
+    }
+  }
+}
+</style>

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

@@ -1,76 +1,76 @@
-<script lang="ts">
-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 }
-
-/**
- * 时间范围格式化
- * @param range 数字范围
- * @param unit 单位
- */
-function numberRange(range?: [number, number], unit?: string) {
-  if (!range?.every(isFinite))
-    return ''
-
-  return `${bignumber(range[0]).toFormat()}~${bignumber(range[1]).toFormat()}${unit}`
-}
-
-/**
- * 时间范围格式化
- * @param range 时间范围
- * @param template 格式化模板（文档：https://dayjs.gitee.io/docs/zh-CN/display/format ）
- */
-function datetimeRange(range?: [string | dayjs.Dayjs, string | dayjs.Dayjs], template = 'YYYY-MM-DD') {
-  if (!range?.every(v => dayjs(v).isValid()))
-    return ''
-
-  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 }>,
-) {
-  if (isNil(value) || isNil(options))
-    return
-  if (value === '')
-    return
-
-  const _value = Array.isArray(value) ? value : [value]
-
-  return options
-    .filter(o => _value.includes(o.value))
-    .map(o => o.label)
-    .join(', ')
-}
-</script>
-
-<script setup lang="ts">
-const props = defineProps<{
-  label: string
-  content?: any
-}>()
-</script>
-
-<template>
-  <div v-if="props.content" class="item-param">
-    <span class="label">{{ props.label }}</span>
-    <span class="content">{{ props.content }}</span>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.label {
-  display: inline-block;
-  margin-right: 0.3em;
-  color: theme('colors.gray.DEFAULT');
-}
-
-.content {
-  color: theme('colors.primary.DEFAULT');
-  word-break: break-all;
-}
-</style>
+<script lang="ts">
+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 };
+
+/**
+ * 时间范围格式化
+ * @param range 数字范围
+ * @param unit 单位
+ */
+function numberRange(range?: [number, number], unit?: string) {
+  if (!range?.every(isFinite))
+    return '';
+
+  return `${bignumber(range[0]).toFormat()}~${bignumber(range[1]).toFormat()}${unit}`;
+}
+
+/**
+ * 时间范围格式化
+ * @param range 时间范围
+ * @param template 格式化模板（文档：https://dayjs.gitee.io/docs/zh-CN/display/format ）
+ */
+function datetimeRange(range?: [string | dayjs.Dayjs, string | dayjs.Dayjs], template = 'YYYY-MM-DD') {
+  if (!range?.every(v => dayjs(v).isValid()))
+    return '';
+
+  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 }>,
+) {
+  if (isNil(value) || isNil(options))
+    return;
+  if (value === '')
+    return;
+
+  const _value = Array.isArray(value) ? value : [value];
+
+  return options
+    .filter(o => _value.includes(o.value))
+    .map(o => o.label)
+    .join(', ');
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<{
+  label: string
+  content?: any
+}>();
+</script>
+
+<template>
+  <div v-if="props.content" class="item-param">
+    <span class="label">{{ props.label }}</span>
+    <span class="content">{{ props.content }}</span>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.label {
+  display: inline-block;
+  margin-right: 0.3em;
+  color: theme('colors.gray.DEFAULT');
+}
+
+.content {
+  color: theme('colors.primary.DEFAULT');
+  word-break: break-all;
+}
+</style>

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,59 +1,59 @@
-<script setup lang="ts">
-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)
-
-function scrollTo(top: number) {
-  $contentParent?.scrollTo({ top })
-}
-</script>
-
-<template>
-  <div v-if="visible" class="wrapper">
-    <div class="btn" @click="scrollTo(0)">
-      <i class="i-fluent:arrow-previous-24-filled rotate-90" />
-    </div>
-    <div class="btn" @click="scrollTo($contentParent?.scrollHeight ?? Infinity)">
-      <i class="i-fluent:arrow-previous-24-filled rotate-270" />
-    </div>
-    <!-- <div v-if="showReturn" class="btn" @click="toLastY()">
-      <i class="i-fluent:arrow-hook-down-left-24-filled rotate-270" />
-    </div> -->
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.wrapper {
-  font-size: 18px;
-}
-
-.btn {
-  display: flex;
-  width: 2em;
-  height: 2em;
-  align-items: center;
-  justify-content: center;
-  border-radius: 2px;
-  background: #bcbcbc;
-  color: #000;
-  cursor: pointer;
-  opacity: 0.7;
-
-  &:active {
-    transform: scale(0.9);
-  }
-
-  & + & {
-    margin-top: 1px;
-  }
-}
-</style>
+<script setup lang="ts">
+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);
+
+function scrollTo(top: number) {
+  $contentParent?.scrollTo({ top });
+}
+</script>
+
+<template>
+  <div v-if="visible" class="wrapper">
+    <div class="btn" @click="scrollTo(0)">
+      <i class="i-fluent:arrow-previous-24-filled rotate-90" />
+    </div>
+    <div class="btn" @click="scrollTo($contentParent?.scrollHeight ?? Infinity)">
+      <i class="i-fluent:arrow-previous-24-filled rotate-270" />
+    </div>
+    <!-- <div v-if="showReturn" class="btn" @click="toLastY()">
+      <i class="i-fluent:arrow-hook-down-left-24-filled rotate-270" />
+    </div> -->
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.wrapper {
+  font-size: 18px;
+}
+
+.btn {
+  display: flex;
+  width: 2em;
+  height: 2em;
+  align-items: center;
+  justify-content: center;
+  border-radius: 2px;
+  background: #bcbcbc;
+  color: #000;
+  cursor: pointer;
+  opacity: 0.7;
+
+  &:active {
+    transform: scale(0.9);
+  }
+
+  & + & {
+    margin-top: 1px;
+  }
+}
+</style>

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