@peng_kai/kit 0.1.4 → 0.1.6

package/admin/permission/vuePlugin.ts

@@ -1,30 +1,30 @@
-import type { App } from 'vue';
-import { getDependencies } from '../../kitDependencies';
-
-export type THasPermissionsFn = ReturnType<ReturnType<typeof getDependencies>['usePermission']>['hasPermissions'];
-
-export function setupPermissionPlugin(app: App) {
-  const { usePermission } = getDependencies();
-  const { hasPermissions } = usePermission();
-
-  app.directive('has-permissions', {
-    mounted(el, binding) {
-      const codes = binding.value;
-
-      if (!hasPermissions(codes))
-        el.remove();
-    },
-    updated(el, binding) {
-      const codes = binding.value;
-
-      if (!hasPermissions(codes))
-        el.remove();
-    },
-  });
-
-  app.use({
-    install(app) {
-      app.config.globalProperties.$hasPermission = hasPermissions;
-    },
-  });
-}
+import type { App } from 'vue';
+import { getDependencies } from '../../kitDependencies';
+
+export type THasPermissionsFn = ReturnType<ReturnType<typeof getDependencies>['usePermission']>['hasPermissions'];
+
+export function setupPermissionPlugin(app: App) {
+  const { usePermission } = getDependencies();
+  const { hasPermissions } = usePermission();
+
+  app.directive('has-permissions', {
+    mounted(el, binding) {
+      const codes = binding.value;
+
+      if (!hasPermissions(codes))
+        el.remove();
+    },
+    updated(el, binding) {
+      const codes = binding.value;
+
+      if (!hasPermissions(codes))
+        el.remove();
+    },
+  });
+
+  app.use({
+    install(app) {
+      app.config.globalProperties.$hasPermission = hasPermissions;
+    },
+  });
+}

package/admin/route-guards/index.ts

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

package/admin/route-guards/pageProgress.ts

@@ -1,27 +1,27 @@
-import type { Router } from 'vue-router';
-import { useStyleTag } from '@vueuse/core';
-import NProgress from 'nprogress';
-import 'nprogress/nprogress.css';
-
-/**
- * 用于显示页面跳转时，页面顶部进度条
- */
-export function setupPageProgress(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);
-    }
-  `);
-
-  router.beforeEach(() => {
-    NProgress.start();
-  });
-  router.afterEach(() => {
-    setTimeout(() => NProgress.done(), 200);
-  });
-}
+import type { Router } from 'vue-router';
+import { useStyleTag } from '@vueuse/core';
+import NProgress from 'nprogress';
+import 'nprogress/nprogress.css';
+
+/**
+ * 用于显示页面跳转时，页面顶部进度条
+ */
+export function setupPageProgress(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);
+    }
+  `);
+
+  router.beforeEach(() => {
+    NProgress.start();
+  });
+  router.afterEach(() => {
+    setTimeout(() => NProgress.done(), 200);
+  });
+}

package/admin/route-guards/pageTitle.ts

@@ -1,19 +1,19 @@
-import type { Router } from 'vue-router';
-import { getDependencies } from '../../kitDependencies';
-
-/**
- * 用于在路由跳转后，同步修改 title
- */
-export function setupPageTitle(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;
-    }
-  });
-}
+import type { Router } from 'vue-router';
+import { getDependencies } from '../../kitDependencies';
+
+/**
+ * 用于在路由跳转后，同步修改 title
+ */
+export function setupPageTitle(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;
+    }
+  });
+}

package/admin/styles/classCover.scss

@@ -85,14 +85,71 @@
     display: flex;
     min-height: 56px;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-end;
     padding: 0 var(--padding-size);
     border-top: 1px solid var(--antd-colorBorderSecondary);
     margin: 0;
   }
 }
 
-// 查询器基本样式
+// 抽屉的基本款样式
+.ant-drawer.antd-cover__basic-drawer {
+  --padding-size: 22px;
+
+  // --min-body-height: ;
+  // --max-body-height: ;
+  // --body-height: ;
+
+  .ant-drawer-content {
+    padding: 0;
+  }
+
+  .ant-drawer-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    padding: 0;
+  }
+
+  .ant-drawer-header {
+    display: flex;
+    align-items: center;
+    min-height: 56px;
+    padding: 0 var(--padding-size);
+    margin: 0;
+    border-bottom: 1px solid var(--antd-colorBorderSecondary);
+  }
+
+  .ant-drawer-body {
+    height: var(--body-height, auto);
+    min-height: var(--min-body-height, auto);
+    max-height: var(--max-body-height, auto);
+    padding: var(--padding-size);
+    overflow-y: auto;
+
+    &:empty {
+      height: var(--min-body-height, 150px);
+    }
+  }
+
+  .ant-drawer-footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    min-height: 56px;
+    padding: 0 var(--padding-size);
+    margin: 0;
+    border-top: 1px solid var(--antd-colorBorderSecondary);
+
+    & > *:not(:first-of-type) {
+      margin-left: 8px;
+    }
+  }
+}
+
+// 查询器表单基本样式
 .ant-form.ant-form__filter {
   display: flex;
   flex-wrap: wrap;

package/admin/styles/globalCover.scss

@@ -1,54 +1,54 @@
-:root {
-  // table 组件头部圆角设为 0
-  .ant-table-wrapper {
-    .ant-table .ant-table-header,
-    table,
-    .ant-table-container table > thead > tr:first-child > *:first-child,
-    .ant-table-container table > thead > tr:first-child > *:last-child {
-      border-radius: 0;
-    }
-
-    .ant-pagination {
-      margin-bottom: 0;
-    }
-  }
-
-
-  // 隐藏在 sticky 模式下的滚动条
-  .ant-table-sticky-scroll {
-    display: none;
-  }
-
-  // 卡片
-  .ant-card .ant-card-actions > li > span {
-    cursor: inherit;
-  }
-
-  // Tab 溢出出现下列框时
-  .ant-tabs-dropdown-menu-title-content {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  // 表格
-  .ant-table-wrapper {
-    .ant-table-row-expand-icon-collapsed::before {
-      height: 1.5px;
-    }
-    .ant-table-row-expand-icon-collapsed::after {
-      width: 1.5px;
-    }
-  }
-
-  .ant-drawer {
-    &:focus {
-      outline: none;
-    }
-
-    &.ant-drawer-bottom .ant-drawer-content {
-      border-top-left-radius: 8px;
-      border-top-right-radius: 8px;
-    }
-  }
-}
+:root {
+  // table 组件头部圆角设为 0
+  .ant-table-wrapper {
+    .ant-table .ant-table-header,
+    table,
+    .ant-table-container table > thead > tr:first-child > *:first-child,
+    .ant-table-container table > thead > tr:first-child > *:last-child {
+      border-radius: 0;
+    }
+
+    .ant-pagination {
+      margin-bottom: 0;
+    }
+  }
+
+
+  // 隐藏在 sticky 模式下的滚动条
+  .ant-table-sticky-scroll {
+    display: none;
+  }
+
+  // 卡片
+  .ant-card .ant-card-actions > li > span {
+    cursor: inherit;
+  }
+
+  // Tab 溢出出现下列框时
+  .ant-tabs-dropdown-menu-title-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  // 表格
+  .ant-table-wrapper {
+    .ant-table-row-expand-icon-collapsed::before {
+      height: 1.5px;
+    }
+    .ant-table-row-expand-icon-collapsed::after {
+      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/types/assist.ts

@@ -4,7 +4,7 @@ export declare interface AppPermissionCodes {}
 export declare interface AppRouteNames {}
 
 /** 权限 code 类型辅助（permission code） */
-export const pc_ = createSelfKeyProxy<{ [K in keyof AppPermissionCodes]: K }>();
+export const PC = createSelfKeyProxy<{ [K in keyof AppPermissionCodes]: K }>();
 
 /** 路由 name 类型辅助（route name） */
-export const rn_ = createSelfKeyProxy<{ [K in keyof AppRouteNames]: K }>();
+export const RN = createSelfKeyProxy<{ [K in keyof AppRouteNames]: K }>();

package/antd/components/InputNumberRange.vue

@@ -1,53 +1,53 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import { InputNumber as AInputNumber, Form } 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>
+<script setup lang="ts">
+import { computed } from 'vue';
+import { InputNumber as AInputNumber, Form } 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/directives/formLabelAlign.ts

@@ -1,36 +1,36 @@
-import type { App } from 'vue';
-
-export function formLabelAlign(app: App) {
-  const directiveName = 'antd-form-label-align';
-  const resizeObserverKey = `${directiveName}@resizeObserver`;
-
-  function init(el: HTMLElement) {
-    const labels = el.querySelectorAll('.ant-form-item .ant-form-item-label');
-    const resizeObserver = new ResizeObserver((entries) => {
-      const widths = entries.map(e => e.borderBoxSize?.[0]?.inlineSize ?? 0);
-      const maxWidth = Math.max(...widths);
-
-      if (maxWidth <= 0)
-        return;
-
-      el.style.setProperty('--max-label-width', `${maxWidth}px`);
-      entries.forEach((e) => {
-        const target = e.target as HTMLElement;
-        target.style.setProperty('width', 'var(--max-label-width)');
-      });
-    });
-
-    Array.from(labels).forEach(label => resizeObserver.observe(label));
-
-    return resizeObserver;
-  }
-
-  app.directive(directiveName, {
-    mounted(el: HTMLElement) {
-      (el as any)[resizeObserverKey] = init(el);
-    },
-    updated(el) {
-      (el as any)[resizeObserverKey] = init(el);
-    },
-  });
-}
+import type { App } from 'vue';
+
+export function formLabelAlign(app: App) {
+  const directiveName = 'antd-form-label-align';
+  const resizeObserverKey = `${directiveName}@resizeObserver`;
+
+  function init(el: HTMLElement) {
+    const labels = el.querySelectorAll('.ant-form-item .ant-form-item-label');
+    const resizeObserver = new ResizeObserver((entries) => {
+      const widths = entries.map(e => e.borderBoxSize?.[0]?.inlineSize ?? 0);
+      const maxWidth = Math.max(...widths);
+
+      if (maxWidth <= 0)
+        return;
+
+      el.style.setProperty('--max-label-width', `${maxWidth}px`);
+      entries.forEach((e) => {
+        const target = e.target as HTMLElement;
+        target.style.setProperty('width', 'var(--max-label-width)');
+      });
+    });
+
+    Array.from(labels).forEach(label => resizeObserver.observe(label));
+
+    return resizeObserver;
+  }
+
+  app.directive(directiveName, {
+    mounted(el: HTMLElement) {
+      (el as any)[resizeObserverKey] = init(el);
+    },
+    updated(el) {
+      (el as any)[resizeObserverKey] = init(el);
+    },
+  });
+}