@peng_kai/kit 0.1.1 → 0.1.2

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

@@ -1,36 +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-$antd-colorBgContainer text-14px" v-bind="$attrs" @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>
 
@@ -39,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>
@@ -73,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/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

@@ -43,9 +43,9 @@ const text = computed(() => {
   <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"><slot>{{ text }}</slot></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/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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@peng_kai/kit",
   "type": "module",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "",
   "author": "",
   "license": "ISC",

package/utils/index.ts

@@ -30,6 +30,11 @@ export function hasToken() {
   return document.cookie.includes('has_token=1');
 }
 
+export function fixed() {
+
+  // return (12).toFixed
+}
+
 /**
  * 字符串脱敏，省略中间字符串
  * @param str 字符串

package/vue/hooks/useIsDark.ts

@@ -0,0 +1,21 @@
+import { ref } from 'vue';
+import { createSharedComposable, useMutationObserver } from '@vueuse/core';
+
+export { useIsDark };
+
+function _useIsDark() {
+  const isDarkFn = () => document.documentElement.classList.contains('dark');
+  const isDark = ref(isDarkFn());
+
+  useMutationObserver(
+    document.documentElement,
+    () => {
+      isDark.value = isDarkFn();
+    },
+    { attributeFilter: ['class'] },
+  );
+
+  return isDark;
+}
+
+const useIsDark = createSharedComposable(_useIsDark);

package/vue/index.ts

@@ -1,4 +1,5 @@
 export { useComponentRef } from './hooks/useComponentRef';
 export { useTeleportTarget } from './hooks/useTeleportTarget';
 export { useIsMounted } from './hooks/useIsMounted';
+export { useIsDark } from './hooks/useIsDark';
 export { InfiniteQuery } from './components/infinite-query';