@peng_kai/kit 0.1.0 → 0.1.2

package/admin/components/filter/src/FilterDrawer.vue

@@ -1,32 +1,77 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
-import { Button as AButton, Drawer as ADrawer } from 'ant-design-vue';
+import { computed, ref } from 'vue';
+import { Button as AButton, Drawer as ADrawer, Dropdown as ADropdown } from 'ant-design-vue';
 
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<{
+  loading?: boolean
+  filterQuery?: any
+  filterParams?: any
+  filterForm?: any
+}>(), {
+  loading: undefined,
+});
 const emits = defineEmits<{
   (e: 'filter'): void
   (e: 'reset', value: number): void
 }>();
+
 const filterVisible = ref(false);
+const loading = computed(() => {
+  const _loading1 = props.loading;
+  const _loading2: boolean = props.filterQuery?.isFetching.value;
+
+  if (_loading1 === undefined && _loading2 === undefined)
+    return false;
+
+  if (_loading1 !== undefined)
+    return _loading1;
+
+  return _loading2;
+});
 
 function filter() {
+  props.filterParams?.update?.();
   emits('filter');
   filterVisible.value = false;
 }
 
 function reset() {
+  props.filterForm?.$form.resetFields?.();
+  props.filterParams?.update?.();
   emits('reset', 1);
   filterVisible.value = false;
 }
 </script>
 
 <template>
-  <div class="p-3 mb-2 bg-white text-14px" @click="filterVisible = true">
+  <div class="p-3 bg-$antd-colorBgContainer text-14px rounded-2" v-bind="$attrs">
     <!-- .filter-params 为空时显示 .filter-params-tips -->
-    <div class="filter-params">
-      <slot name="params" />
+
+    <div class="m--3 p-3" @click="filterVisible = true">
+      <div class="filter-params">
+        <slot name="params" />
+      </div>
+      <div class="filter-params-tips">
+        条件筛选，点击打开
+      </div>
     </div>
-    <div class="filter-params-tips">
-      条件筛选，点击打开
+
+    <!-- 操作区 -->
+    <div v-if="$slots.actions || $slots.moreActions" class="actions">
+      <slot name="actions" />
+
+      <ADropdown v-if="$slots.moreActions" trigger="click" destroyPopupOnHide>
+        <AButton type="link" size="small">
+          更多
+        </AButton>
+        <template #overlay>
+          <slot name="moreActions" />
+        </template>
+      </ADropdown>
     </div>
   </div>
 
@@ -35,10 +80,10 @@ function reset() {
     height="50vh"
   >
     <template #extra>
-      <AButton class="mr-3 my--3" @click="reset()">
+      <AButton class="mr-3 my--3" :disabled="loading" @click="reset()">
         重置
       </AButton>
-      <AButton class="my--3" type="primary" @click="filter()">
+      <AButton class="my--3" type="primary" :loading="loading" @click="filter()">
         筛选
       </AButton>
     </template>
@@ -69,6 +114,15 @@ function reset() {
 .filter-params:empty + .filter-params-tips {
   display: block;
 }
+
+.actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  border-top: 1px solid var(--antd-colorBorderSecondary);
+  margin-top: 0.75rem;
+  padding-top: 0.75rem;
+}
 </style>
 
 <style lang="scss">

package/admin/components/filter/src/FilterReset.vue

@@ -1,24 +1,51 @@
 <script setup lang="ts">
 import { Button as AButton } from 'ant-design-vue';
+import { computed } from 'vue';
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   loading?: boolean
-}>();
+  filterQuery?: any
+  filterParams?: any
+  filterForm?: any
+}>(), {
+  loading: undefined,
+});
 const emits = defineEmits<{
   (e: 'filter'): void
   (e: 'reset'): void
 }>();
+
+const loading = computed(() => {
+  const _loading1 = props.loading;
+  const _loading2: boolean = props.filterQuery?.isFetching.value;
+
+  if (_loading1 === undefined && _loading2 === undefined)
+    return false;
+
+  if (_loading1 !== undefined)
+    return _loading1;
+
+  return _loading2;
+});
+
+function filter() {
+  props.filterParams?.update?.();
+  emits('filter');
+}
+
+function reset() {
+  props.filterForm?.$form.resetFields?.();
+  props.filterParams?.update?.({ page: 1 });
+  emits('reset');
+}
 </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="loading" @click="filter()">
       查询
     </AButton>
-    <AButton :disabled="props.loading" @click="emits('reset')">
+    <AButton :disabled="loading" @click="reset()">
       重置
     </AButton>
   </div>

package/admin/components/record/index.ts

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

package/admin/components/record/src/Record.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Card as ACard, Dropdown as ADropdown } from 'ant-design-vue';
+
+const collapsed = ref(false);
+const $actions = ref<HTMLDivElement>();
+</script>
+
+<template>
+  <ACard :bordered="false" size="small" class="my-3 relative">
+    <template #title>
+      <div class="flex items-center min-h-10">
+        <div class="title">
+          <slot name="title" />
+        </div>
+        <div class="flex gap-2 ml-auto">
+          <ADropdown v-if="$slots.moreActions" trigger="click" destroyPopupOnHide>
+            <div ref="$actions" class="action-btn" tabindex="-1">
+              <i class="i-ri:more-fill" />
+            </div>
+            <template #overlay>
+              <slot name="moreActions" />
+            </template>
+          </ADropdown>
+        </div>
+      </div>
+    </template>
+
+    <template #default>
+      <slot name="default" />
+
+      <div v-auto-animate>
+        <slot v-if="collapsed" name="collapsible" />
+      </div>
+
+      <div v-if="$slots.collapsible" class="more-btn" :class="{ collapsed }" tabindex="-1" @click="collapsed = !collapsed">
+        <i class="i-mingcute:down-line arrow" />
+      </div>
+    </template>
+  </ACard>
+</template>
+
+<style scoped lang="scss">
+.action-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  margin: 0;
+  font-size: 1.4em;
+  line-height: 1em;
+}
+
+.more-btn {
+  position: absolute;
+  right: 12px;
+  bottom: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  line-height: 1em;
+  background-color: rgb(133 133 133 / 30%);
+  border-radius: 5px;
+  opacity: 0.5;
+
+  &:active {
+    transform: scale(0.9);
+  }
+
+  .arrow {
+    display: block;
+    font-size: 1.4em;
+    transition: 200ms;
+  }
+
+  &.collapsed .arrow {
+    transform: rotate(180deg);
+  }
+}
+</style>

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

@@ -46,7 +46,7 @@ function scrollTo(top: number) {
   background: #bcbcbc;
   color: #000;
   cursor: pointer;
-  opacity: 0.7;
+  opacity: 0.5;
 
   &:active {
     transform: scale(0.9);

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

@@ -82,7 +82,7 @@ const symbol = computed(() => presetSymbols[props.symbol!] ?? props.symbol ?? ''
     <span v-else class="color-$amount-color">{{ symbol }}</span> <!-- 文本Logo，如法定币种符号(￥、$) -->
 
     <!-- 金额 -->
-    <span class="color-$amount-color  amount">{{ amountText }}</span>
+    <span class="color-$amount-color amount">{{ amountText }}</span>
 
     <!-- 单位 -->
     <span v-if="props.unit" class="unit">{{ props.unit }}</span>

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

@@ -37,8 +37,12 @@ const timestamp = computed(() => {
       <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>
+    <span v-bind="$attrs" class="text">{{ timestamp ? dayjs(timestamp).format(props.template) : '-' }}</span>
   </ATooltip>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.text {
+  font-variant-numeric: tabular-nums;
+}
+</style>

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

@@ -15,9 +15,12 @@ const props = withDefaults(
     hide?: boolean
     chain?: string
     type?: HashType
+    empty?: string
   }>(),
   {
     hide: true,
+    type: 'transaction',
+    empty: '-',
   },
 );
 
@@ -28,15 +31,21 @@ const href = computed(() => {
     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>
-        {{ props.hash }}
+        <span class="font-mono">{{ props.hash }}</span>
       </template>
-      <span v-bind="$attrs">{{ props.hide ? desensitize(props.hash) : props.hash }}</span>
+      <span v-bind="$attrs"><slot><span class="font-mono">{{ text }}</span></slot></span>
     </ATooltip>
   </ATypographyLink>
 </template>

package/admin/layout/large/Menu.vue

@@ -48,8 +48,8 @@ watch(
     :items="items"
     :openKeys="openKeys"
     :selectedKeys="selectedKeys"
+    :inlineIndent="16"
     mode="inline"
-    :inlineIndent="14"
   />
 </template>
 

package/admin/route-guards/collapseMenu.ts

@@ -0,0 +1,11 @@
+import type { Router } from 'vue-router';
+import { getDependencies } from '../../kitDependencies';
+
+export function setupCollapseMenu(router: Router) {
+  const deps = getDependencies();
+
+  router.beforeEach(() => {
+    deps.useMenu().collapsed.value = false;
+    return true;
+  });
+}

package/admin/route-guards/index.ts

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

package/admin/route-guards/pageProgress.ts

@@ -1,16 +1,27 @@
 import type { Router } from 'vue-router';
-import { getDependencies } from '../../kitDependencies';
+import { useStyleTag } from '@vueuse/core';
+import NProgress from 'nprogress';
+import 'nprogress/nprogress.css';
 
+/**
+ * 用于显示页面跳转时，页面顶部进度条
+ */
 export function setupPageProgress(router: Router) {
-  const deps = getDependencies();
-
-  router.afterEach((to, _, err) => {
-    const title = to.meta.title;
-
-    if (!err) {
-      document.title = typeof title === 'function'
-        ? title()
-        : title ?? deps.appName;
+  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/route-guards/pageTitle.ts

@@ -1,24 +1,19 @@
 import type { Router } from 'vue-router';
-import { useStyleTag } from '@vueuse/core';
-import NProgress from 'nprogress';
-import 'nprogress/nprogress.css';
+import { getDependencies } from '../../kitDependencies';
 
+/**
+ * 用于在路由跳转后，同步修改 title
+ */
 export function setupPageTitle(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);
-    }
-  `);
+  const deps = getDependencies();
 
-  router.beforeEach(() => {
-    NProgress.start();
-  });
-  router.afterEach(() => {
-    setTimeout(() => NProgress.done(), 200);
+  router.afterEach((to, _, err) => {
+    const title = to.meta.title;
+
+    if (!err) {
+      document.title = typeof title === 'function'
+        ? title()
+        : title ?? deps.appName;
+    }
   });
 }

package/admin/styles/globalCover.scss

@@ -40,4 +40,15 @@
       width: 1.5px;
     }
   }
+
+  .ant-drawer {
+    &:focus {
+      outline: none;
+    }
+
+    &.ant-drawer-bottom .ant-drawer-content {
+      border-top-left-radius: 8px;
+      border-top-right-radius: 8px;
+    }
+  }
 }

package/admin/styles/index.scss

@@ -17,11 +17,11 @@
 
   ::-webkit-scrollbar-thumb {
     border-radius: 10px;
-    background-color: rgb(0 0 0 / 20%);
+    background-color: rgb(133 133 133 / 20%);
   }
 
   ::-webkit-scrollbar-thumb:hover {
-    background-color: rgb(0 0 0 / 60%);
+    background-color: rgb(133 133 133 / 60%);
   }
 }
 

package/admin/unocss/index.ts

@@ -1,6 +1,6 @@
 export const shortcuts = [
   // 页面板块
-  ['page-section', 'p-4 bg-$antd-colorBgContainer'],
+  ['page-section', 'mb-4 p-4 bg-$antd-colorBgContainer'],
   // 用于 FormItem 在 flex布局下的自适应
   [/^fiw-(.*?)_(.*?)_(.*?)$/, ([, w1, w2, w3]) => `min-w-${w1} w-${w2} max-w-${w3} flex-auto`],
-];
+];

package/antd/hooks/useAntdTable.ts

@@ -30,6 +30,7 @@ export function useAntdTable<
         current: Number(queryParams.page ?? 1),
         pageSize: Number(queryParams.page_size ?? 10),
         total: pagination?.total ?? 0,
+        showTotal: total => `共 ${total} 条`,
       },
       loading: isLoading.value,
       scroll: { x: 'max-content' },

package/antd/hooks/useAntdTheme.ts

@@ -19,7 +19,7 @@ export function useAntdTheme(mode: Ref<string>, config: Ref<Record<string, any>>
     const screenXXXL = Number.parseFloat(_config.breakpoints.desktop1k);
     const token: ThemeConfig['token'] = {
       ...algorithm({ ...theme.defaultSeed, colorPrimary: _config.colors.primary.DEFAULT }),
-      borderRadius: 2,
+      borderRadius: 4,
       screenXS,
       screenXSMin: screenXS,
       screenXSMax: screenSM - 0.1,
@@ -83,4 +83,4 @@ function useGlobalCssVariable(prefix: string, vars: Ref<Record<string, any>>) {
   });
 
   return useStyleTag(cssVariable);
-}
+}

package/eslint.config.js

@@ -1,50 +1,3 @@
-import antfu from '@antfu/eslint-config';
+import { config } from '@peng_kai/lint/antfu.mjs';
 
-export default antfu(
-  {
-    stylistic: {
-      indent: 2,
-      quotes: 'single',
-      semi: true,
-      jsx: true,
-    },
-  },
-  {
-    files: ['**/*.ts', '**/*.vue'],
-    rules: {
-      'no-console': ['off'],
-      'ts/no-use-before-define': ['off'],
-    },
-  },
-  {
-    files: ['**/*.vue'],
-    rules: {
-      'vue/attribute-hyphenation': ['error', 'never'],
-      'vue/v-on-event-hyphenation': ['error', 'never', { autofix: true }],
-      'vue/custom-event-name-casing': ['error', 'camelCase'],
-      'vue/prop-name-casing': ['error', 'camelCase'],
-      'vue/component-definition-name-casing': ['error', 'PascalCase'],
-      'vue/component-name-in-template-casing': ['error', 'PascalCase', { registeredComponentsOnly: false }],
-      'vue/max-attributes-per-line': ['error', {
-        singleline: { max: 3 },
-        multiline: { max: 3 },
-      }],
-      'vue/v-slot-style': ['error', {
-        atComponent: 'shorthand',
-        default: 'shorthand',
-        named: 'shorthand',
-      }],
-      'vue/block-lang': ['error', {
-        script: { lang: 'ts' },
-      }],
-      'vue/block-order': ['error', {
-        order: ['script:not([setup])', 'script[setup]', 'template', 'style[scoped]', 'style:not([scoped])'],
-      }],
-    },
-  },
-  {
-    rules: {
-      'eslint-comments/no-unlimited-disable': ['off'],
-    },
-  },
-);
+export default config;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@peng_kai/kit",
   "type": "module",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "",
   "author": "",
   "license": "ISC",
@@ -36,6 +36,7 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^1.2.1",
+    "@peng_kai/lint": "^0.0.13",
     "@types/lodash-es": "^4.17.11",
     "@types/node": "18",
     "@types/nprogress": "^0.2.3",