@peng_kai/kit 0.2.0-beta.3 → 0.2.0-beta.30

package/admin/layout/large/Menu.vue

@@ -2,7 +2,7 @@
 import { computed, ref, watch } from 'vue';
 import { Menu as AMenu } from 'ant-design-vue';
 import type { ItemType } from 'ant-design-vue';
-import { adminPlugin } from '../../adminPlugin';
+import { injectTTAdmin } from '../../adminPlugin';
 import type { TMenu } from '../../stores/createUseMenuStore';
 
 function formatMenu(menu: TMenu): ItemType {
@@ -21,7 +21,7 @@ function formatMenu(menu: TMenu): ItemType {
 </script>
 
 <script setup lang="ts">
-const { router, useMenuStore } = adminPlugin.deps;
+const { router, useMenuStore } = injectTTAdmin()!.deps;
 const menuStore = useMenuStore();
 const items = computed(() => menuStore.menus.map(formatMenu));
 const openKeys = ref<string[]>([]);

package/admin/layout/large/PageTab.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { TabPane as ATabPane, Tabs as ATabs } from 'ant-design-vue';
-import { adminPlugin } from '../../adminPlugin';
+import { injectTTAdmin } from '../../adminPlugin';
 
-const pageTabStore = adminPlugin.deps.usePageTabStore();
+const pageTabStore = injectTTAdmin()!.deps.usePageTabStore();
 </script>
 
 <template>

package/admin/permission/routerGuard.ts

@@ -26,7 +26,7 @@ export function setupPermissionRouterGuard(router: Router, rouneNames: { index:
 
     // 未登录状态进入需要登录权限的页面
     else if (!isLogin && needLogin)
-      return next({ name: rouneNames.login, replace: true });
+      return next({ name: rouneNames.login, replace: true, query: { redirect: to.fullPath } });
 
     // 登录状态进入需要登录权限的页面，有权限直接通行
     else if (isLogin && needLogin && hasPermission)

package/admin/permission/vuePlugin.ts

@@ -10,6 +10,7 @@ const UNWATCH_NAME = `v-${PLUGIN_NAME}@unwatch`;
 export function setupPermissionPlugin(app: App) {
   app.directive<HTMLElement, TCodes>(PLUGIN_NAME, {
     mounted(el, binding) {
+      console.log('🤡 / el:', el);
       const permissionStore = adminPlugin.deps.usePermissionStore();
 
       function updateVisibility() {

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/stores/createUsePageStore.ts

@@ -21,9 +21,7 @@ interface IBreadcrumb {
 }
 
 function createUsePageStore() {
-  return defineStore('appPage', () => {
-    return storeSetup();
-  });
+  return defineStore('appPage', () => storeSetup());
 }
 
 function storeSetup() {

package/admin/styles/classCover.scss

@@ -173,6 +173,23 @@
   }
 }
 
+// ACard 组件的 actions 右对齐
+.ant-card.antd-cover__actions-right-align {
+  .ant-card-actions {
+    justify-content: flex-end !important;
+    padding: 0 24px;
+  
+    > li {
+      width: auto !important;
+      border-inline-end: none !important;
+  
+      &:not(:last-child) {
+        margin-right: 8px;
+      }
+    }
+  }
+}
+
 // 查询器表单基本样式
 .ant-form.ant-form__filter {
   display: flex;
@@ -187,3 +204,93 @@
     flex: 1 1 auto;
   }
 }
+
+// Modal 组件中的 Card 组件样式（为了和原 Modal 组件一样）
+.ant-card.antd-cover__card-in-modal {
+  --padding-size: 22px;
+
+  pointer-events: all;
+
+  @media bp-lt-mobilel {
+    --padding-size: 16px;
+  }
+
+  .ant-card-head {
+    min-height: 56px;
+    padding: 0 var(--padding-size);
+
+    @media bp-lt-mobilel {
+      min-height: 51px;
+    }
+  }
+
+  .ant-card-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;
+  }
+
+  .ant-card-extra .close-btn {
+    --icon-color: var(--antd-colorTextTertiary);
+    --bg-color: transparent;
+
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    padding: 0;
+    font-size: 18px;
+    cursor: pointer;
+    background-color: var(--bg-color);
+    border: 0;
+    border-radius: 4px;
+    transition: all 100ms;
+
+    &::before,
+    &::after {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      display: block;
+      width: 70%;
+      height: 1.5px;
+      content: '';
+      background-color: var(--icon-color);
+    }
+
+    &::before {
+      transform: translate(-50%, -50%) rotateZ(45deg);
+    }
+
+    &::after {
+      transform: translate(-50%, -50%) rotateZ(-45deg);
+    }
+
+    &:hover {
+      --icon-color: var(--antd-colorText);
+      --bg-color: var(--antd-colorFillSecondary);
+    }
+  }
+
+  .ant-card-actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end !important;
+    min-height: 56px;
+    padding: 0 var(--padding-size);
+
+    > li {
+      width: auto !important;
+      margin: 0;
+      border-inline-end: none !important;
+
+      &:not(:last-child) {
+        margin-right: 8px;
+      }
+    }
+  }
+}

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/styles/index.scss

@@ -2,26 +2,28 @@
 @import './globalCover.scss';
 
 @media (pointer: fine) {
-  * {
-    scrollbar-color: rgb(0 0 0 / 50%) transparent;
-    scrollbar-width: thin;
 
-    /* overflow-y: overlay; */
+  *::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background-color: rgb(133 133 133 / 20%);
+  }
+
+  *::-webkit-scrollbar-thumb:hover {
+    background-color: rgb(133 133 133 / 60%);
   }
 
-  ::-webkit-scrollbar {
+  *::-webkit-scrollbar {
     width: 6px;
     height: 6px;
     background-color: transparent;
   }
 
-  ::-webkit-scrollbar-thumb {
-    border-radius: 10px;
-    background-color: rgb(133 133 133 / 20%);
-  }
-
-  ::-webkit-scrollbar-thumb:hover {
-    background-color: rgb(133 133 133 / 60%);
+  /* 不支持`::-webkit-scrollbar-*`的浏览器 */
+  @supports not selector(::-webkit-scrollbar) {
+    * {
+      scrollbar-color: rgb(0 0 0 / 50%) transparent;
+      scrollbar-width: thin;
+    }
   }
 }
 

package/antd/components/InputNumberRange.vue

@@ -1,59 +1,59 @@
-<script lang="ts">
-import { computed } from 'vue';
-import { InputNumber as AInputNumber, Form } from 'ant-design-vue';
-</script>
-
-<script setup lang="ts">
-const props = withDefaults(
-  defineProps<{
-    value: [number | undefined, number | undefined]
-    placeholder?: [string, string]
-    min?: number
-    max?: number
-  }>(),
-  {
-    min: Number.NEGATIVE_INFINITY,
-    max: Number.POSITIVE_INFINITY,
-  },
-);
-const emits = defineEmits<{
-  (e: 'update:value', value: typeof props.value): void
-}>();
-
-const formItemContext = Form.useInjectFormItemContext();
-const minValue = computed({
-  get() {
-    return props.value[0];
-  },
-  set(value) {
-    updateValue(value, maxValue.value);
-  },
-});
-const maxValue = computed({
-  get() {
-    return props.value[1];
-  },
-  set(value) {
-    updateValue(minValue.value, value);
-  },
-});
-
-function updateValue(...args: typeof props.value) {
-  emits('update:value', args.sort());
-  formItemContext.onFieldChange();
-}
-</script>
-
-<template>
-  <div class="flex items-center">
-    <AInputNumber
-      v-model:value="minValue" class="w-full" :min="props.min"
-      :max="props.max" :placeholder="props.placeholder?.[0]"
-    />
-    <span>&nbsp;-&nbsp;</span>
-    <AInputNumber
-      v-model:value="maxValue" class="w-full" :min="props.min"
-      :max="props.max" :placeholder="props.placeholder?.[1]"
-    />
-  </div>
-</template>
+<script lang="ts">
+import { computed } from 'vue';
+import { InputNumber as AInputNumber, Form } from 'ant-design-vue';
+</script>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    value: [number | undefined, number | undefined]
+    placeholder?: [string, string]
+    min?: number
+    max?: number
+  }>(),
+  {
+    min: Number.NEGATIVE_INFINITY,
+    max: Number.POSITIVE_INFINITY,
+  },
+);
+const emits = defineEmits<{
+  (e: 'update:value', value: typeof props.value): void
+}>();
+
+const formItemContext = Form.useInjectFormItemContext();
+const minValue = computed({
+  get() {
+    return props.value[0];
+  },
+  set(value) {
+    updateValue(value, maxValue.value);
+  },
+});
+const maxValue = computed({
+  get() {
+    return props.value[1];
+  },
+  set(value) {
+    updateValue(minValue.value, value);
+  },
+});
+
+function updateValue(...args: typeof props.value) {
+  emits('update:value', args.sort());
+  formItemContext.onFieldChange();
+}
+</script>
+
+<template>
+  <div class="flex items-center">
+    <AInputNumber
+      v-model:value="minValue" class="w-full" :min="props.min"
+      :max="props.max" :placeholder="props.placeholder?.[0]"
+    />
+    <span>&nbsp;-&nbsp;</span>
+    <AInputNumber
+      v-model:value="maxValue" class="w-full" :min="props.min"
+      :max="props.max" :placeholder="props.placeholder?.[1]"
+    />
+  </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);
+    },
+  });
+}