@peng_kai/kit 0.0.9 → 0.0.11

package/admin/layout/large/Menu.vue

@@ -1,73 +1,68 @@
-<script lang="ts">
-import { computed, ref, watch } from "vue";
-import { Menu as AMenu } from "ant-design-vue";
-import type { ItemType } from 'ant-design-vue'
-import { useMenu } from '../../hooks'
-import type { TMenu } from '../../hooks'
-import { kitDependencies } from "../../../kitDependencies";
-
-function formatMenu(menu: TMenu): ItemType {
-  return {
-    key: menu.key,
-    title: menu.label,
-    label: menu.label,
-    icon: menu.icon ?? undefined,
-    onClick: (e) => {
-      (e as any).stopPropagation()
-      menu.trigger()
-    },
-    children: menu.children?.map(formatMenu),
-  }
-}
-</script>
-
-<script setup lang="ts">
-const router = kitDependencies.useRouter()
-const { menus, getMenuPath } = useMenu()
-const items = computed(() => menus.map(formatMenu))
-const openKeys = ref<string[]>([])
-const selectedKeys = ref<string[]>([])
-console.log('获取 kitDependencies');
-
-setTimeout(() => {
-}, 3000)
-console.log('菜单对象对比', kitDependencies, kitDependencies.menus === menus);
-
-watch(
-  () => router?.currentRoute.value,
-  (route) => {
-    if (!route) return;
-
-    const menuPath = getMenuPath(route.name as string)
-    openKeys.value = menuPath.map(menu => menu.key)
-    selectedKeys.value = [openKeys.value.pop()!]
-  },
-  { immediate: true },
-)
-</script>
-
-<template>
-  <AMenu
-    class="menu"
-    :items="items"
-    :openKeys="openKeys"
-    :selectedKeys="selectedKeys"
-    mode="inline"
-    :inlineIndent="14"
-  />
-</template>
-
-<style lang="scss" scoped>
-.menu {
-  border-inline-end: none !important;
-
-  &.ant-menu-inline-collapsed {
-    width: var(--app-siderbar-width);
-  }
-
-  &,
-  .ant-menu {
-    background-color: transparent;
-  }
-}
-</style>
+<script lang="ts">
+import { computed, ref, watch } from "vue";
+import { Menu as AMenu } from "ant-design-vue";
+import type { ItemType } from 'ant-design-vue'
+import type { TMenu } from '../../hooks'
+import { getDependencies } from "../../../kitDependencies";
+
+function formatMenu(menu: TMenu): ItemType {
+  return {
+    key: menu.key,
+    title: menu.label,
+    label: menu.label,
+    icon: menu.icon ?? undefined,
+    onClick: (e) => {
+      (e as any).stopPropagation()
+      menu.trigger()
+    },
+    children: menu.children?.map(formatMenu),
+  }
+}
+</script>
+
+<script setup lang="ts">
+const{ useRouter, useMenu } = getDependencies()
+const router = useRouter()
+const { menus, getMenuPath } = useMenu()
+const items = computed(() => menus.map(formatMenu))
+const openKeys = ref<string[]>([])
+const selectedKeys = ref<string[]>([])
+
+watch(
+  () => router?.currentRoute.value,
+  (route) => {
+    if (!route) return;
+
+    const menuPath = getMenuPath(route.name as string)
+    openKeys.value = menuPath.map(menu => menu.key)
+    selectedKeys.value = [openKeys.value.pop()!]
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <AMenu
+    class="menu"
+    :items="items"
+    :openKeys="openKeys"
+    :selectedKeys="selectedKeys"
+    mode="inline"
+    :inlineIndent="14"
+  />
+</template>
+
+<style lang="scss" scoped>
+.menu {
+  border-inline-end: none !important;
+
+  &.ant-menu-inline-collapsed {
+    width: var(--app-siderbar-width);
+  }
+
+  &,
+  .ant-menu {
+    background-color: transparent;
+  }
+}
+</style>

package/admin/layout/large/PageTab.vue

@@ -1,70 +1,71 @@
-<script setup lang="ts">
-import { Tabs as ATabs, TabPane as ATabPane } from "ant-design-vue";
-import { usePageTab } from '../../hooks'
-
-const { activeTab, tabList, openTab, closeTab } = usePageTab()
-</script>
-
-<template>
-  <ATabs
-    class="app-page-tabs"
-    :activeKey="activeTab"
-    type="editable-card"
-    size="small"
-    :animated="false"
-    :hideAdd="true"
-    :tabBarGutter="4"
-    @tabClick="(openTab as any)"
-    @edit="(closeTab as any)"
-  >
-    <ATabPane v-for="tab of tabList" :key="tab.key" :tab="tab.title">
-      <template #closeIcon>
-        <i class="i-icon-park-outline:close" />
-      </template>
-    </ATabPane>
-  </ATabs>
-</template>
-
-<style scoped lang="scss">
-.app-page-tabs {
-  :deep(.ant-tabs-nav) {
-    margin: 0;
-  }
-
-  :deep(.ant-tabs-nav::before) {
-    display: none;
-  }
-
-  :deep(.ant-tabs-tab) {
-    --uno: 'border-rd-3px! text-14px p-[3px_1px_3px_8px]! select-none';
-  }
-
-  :deep(.ant-tabs-tab .ant-tabs-tab-btn) {
-    transform: translateX(8px);
-  }
-
-  :deep(.ant-tabs-tab-active) {
-    --uno: 'border-[currentColor]!';
-  }
-
-  :deep(.ant-tabs-tab-remove) {
-    display: flex;
-    height: 100%;
-    align-items: center;
-    margin: 0;
-    opacity: 0;
-    transition: all 150ms;
-  }
-
-  :deep(.ant-tabs-tab:hover .ant-tabs-tab-btn),
-  :deep(.ant-tabs-tab-active .ant-tabs-tab-btn) {
-    transform: translateX(0);
-  }
-
-  :deep(.ant-tabs-tab:hover .ant-tabs-tab-remove),
-  :deep(.ant-tabs-tab-active .ant-tabs-tab-remove) {
-    margin-left: 0;
-    opacity: 1;
-  }
-}
-</style>
+<script setup lang="ts">
+import { Tabs as ATabs, TabPane as ATabPane } from "ant-design-vue";
+import { getDependencies } from "../../../kitDependencies";
+
+const { usePageTab } = getDependencies()
+const { activeTab, tabList, openTab, closeTab } = usePageTab()
+</script>
+
+<template>
+  <ATabs
+    class="app-page-tabs"
+    :activeKey="activeTab"
+    type="editable-card"
+    size="small"
+    :animated="false"
+    :hideAdd="true"
+    :tabBarGutter="4"
+    @tabClick="(openTab as any)"
+    @edit="(closeTab as any)"
+  >
+    <ATabPane v-for="tab of tabList" :key="tab.key" :tab="tab.title">
+      <template #closeIcon>
+        <i class="i-icon-park-outline:close" />
+      </template>
+    </ATabPane>
+  </ATabs>
+</template>
+
+<style scoped lang="scss">
+.app-page-tabs {
+  :deep(.ant-tabs-nav) {
+    margin: 0;
+  }
+
+  :deep(.ant-tabs-nav::before) {
+    display: none;
+  }
+
+  :deep(.ant-tabs-tab) {
+    --uno: 'border-rd-3px! text-14px p-[3px_1px_3px_8px]! select-none';
+  }
+
+  :deep(.ant-tabs-tab .ant-tabs-tab-btn) {
+    transform: translateX(8px);
+  }
+
+  :deep(.ant-tabs-tab-active) {
+    --uno: 'border-[currentColor]!';
+  }
+
+  :deep(.ant-tabs-tab-remove) {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    margin: 0;
+    opacity: 0;
+    transition: all 150ms;
+  }
+
+  :deep(.ant-tabs-tab:hover .ant-tabs-tab-btn),
+  :deep(.ant-tabs-tab-active .ant-tabs-tab-btn) {
+    transform: translateX(0);
+  }
+
+  :deep(.ant-tabs-tab:hover .ant-tabs-tab-remove),
+  :deep(.ant-tabs-tab-active .ant-tabs-tab-remove) {
+    margin-left: 0;
+    opacity: 1;
+  }
+}
+</style>

package/admin/styles/classCover.scss

@@ -0,0 +1,108 @@
+/*
+  通过为 antd 组件添加 class 的方式覆盖其默认样式
+  格式：antd-cover__xxx
+ */
+
+// 表单气泡 help 提示
+.ant-form.antd-cover__bubble-help-form {
+  .ant-form-show-help {
+    position: relative;
+
+    + div {
+      display: none;
+    }
+
+    > div {
+      position: absolute;
+      z-index: 2;
+      top: 7px;
+      left: -10px;
+      max-width: 70%;
+      box-sizing: border-box;
+      padding: 6px 8px;
+      border-radius: 5px;
+      background-color: rgb(0 0 0 / 75%);
+
+      // box-shadow: 0 0 5px 0 rgb(0 0 0 / 50%);
+      color: #fff !important;
+      filter: drop-shadow(0 0 5px rgb(0 0 0 / 50%));
+      line-height: 1.4em;
+      pointer-events: none;
+
+      // 气泡箭头
+      &::after {
+        position: absolute;
+        top: -7.7px;
+        left: 10px;
+        width: 16px;
+        height: 16px;
+        background-color: rgb(0 0 0 / 75%);
+        clip-path: path('M 0 8 A 4 4 0 0 0 2.82842712474619 6.82842712474619 L 6.585786437626905 3.0710678118654755 A 2 2 0 0 1 9.414213562373096 3.0710678118654755 L 13.17157287525381 6.82842712474619 A 4 4 0 0 0 16 8 Z');
+        content: "";
+      }
+    }
+  }
+
+  .ant-form-margin-offset {
+    display: none;
+  }
+}
+
+// 弹窗的基本款样式
+.ant-modal-wrap.antd-cover__basic-modal {
+  --padding-size: 22px;
+
+  // --min-body-height: ;
+  // --max-body-height: ;
+  // --body-height: ;
+
+  .ant-modal-content {
+    padding: 0;
+  }
+
+  .ant-modal-header {
+    display: flex;
+    min-height: 56px;
+    align-items: center;
+    padding: 0 var(--padding-size);
+    border-bottom: 1px solid var(--antd-colorBorderSecondary);
+    margin: 0;
+  }
+
+  .ant-modal-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-modal-footer {
+    display: flex;
+    min-height: 56px;
+    align-items: center;
+    justify-content: center;
+    padding: 0 var(--padding-size);
+    border-top: 1px solid var(--antd-colorBorderSecondary);
+    margin: 0;
+  }
+}
+
+// 查询器基本样式
+.ant-form.ant-form__filter {
+  display: flex;
+  flex-wrap: wrap;
+  --uno: 'gap-4 mb-4';
+
+  .ant-form-item {
+    margin-bottom: 0;
+    min-width: 220px;
+    width: 250px;
+    max-width: 280px;
+    flex: 1 1 auto;
+  }
+}

package/admin/styles/globalCover.scss

@@ -0,0 +1,43 @@
+: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;
+    }
+  }
+}

package/admin/styles/index.scss

@@ -0,0 +1,30 @@
+@import './classCover.scss';
+@import './globalCover.scss';
+
+@media (pointer: fine) {
+  * {
+    scrollbar-color: rgb(0 0 0 / 50%) transparent;
+    scrollbar-width: thin;
+
+    /* overflow-y: overlay; */
+  }
+
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+    background-color: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background-color: rgb(0 0 0 / 20%);
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: rgb(0 0 0 / 60%);
+  }
+}
+
+:root {
+  font-family: var(--antd-fontFamily);
+}

package/admin/unocss/index.ts

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

package/antd/components/InputNumberRange.vue

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