@peng_kai/kit 0.0.9 → 0.0.10

package/admin/filter/FilterDrawer.vue

@@ -1,96 +1,96 @@
-<script lang="ts" setup>
-import { ref } from "vue";
-import { Drawer as ADrawer, Button as AButton } from "ant-design-vue";
-
-const emits = defineEmits<{
-  (e: 'filter'): void
-  (e: 'reset', value: number): void
-}>()
-const filterVisible = ref(false)
-
-function filter() {
-  emits('filter')
-  filterVisible.value = false
-}
-
-function reset() {
-  emits('reset', 1)
-  filterVisible.value = false
-}
-</script>
-
-<template>
-  <div class="p-3 mb-2 bg-white text-14px" @click="filterVisible = true">
-    <!-- .filter-params 为空时显示 .filter-params-tips -->
-    <div class="filter-params">
-      <slot name="params" />
-    </div>
-    <div class="filter-params-tips">
-      条件筛选，点击打开
-    </div>
-  </div>
-
-  <ADrawer v-model:open="filterVisible" class="filter-drawer" placement="bottom" height="50vh">
-    <template #extra>
-      <AButton class="mr-3 my--3" @click="reset()">
-        重置
-      </AButton>
-      <AButton class="my--3" type="primary" @click="filter()">
-        筛选
-      </AButton>
-    </template>
-    <template #default>
-      <slot />
-    </template>
-  </ADrawer>
-</template>
-
-<style scoped lang="scss">
-.filter-params {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  gap: 5px 15px;
-}
-
-// .filter-params 为空时显示 .filter-params-tips
-.filter-params-tips {
-  display: none;
-  color: theme('colors.gray.DEFAULT');
-}
-
-.filter-params:empty {
-  display: none;
-}
-
-.filter-params:empty + .filter-params-tips {
-  display: block;
-}
-</style>
-
-<style lang="scss">
-.filter-drawer {
-  .ant-drawer-header {
-    padding: 16px;
-
-    .ant-drawer-close {
-      --expand: 5px;
-
-      padding: var(--expand);
-      margin: calc(var(--expand) * -1) var(--expand) calc(var(--expand) * -1) 0;
-    }
-  }
-
-  .ant-drawer-body {
-    padding: 16px;
-  }
-
-  .ant-form-item {
-    margin-bottom: 0;
-
-    .ant-form-item-label {
-      padding-bottom: 0;
-    }
-  }
-}
-</style>
+<script lang="ts" setup>
+import { ref } from "vue";
+import { Drawer as ADrawer, Button as AButton } from "ant-design-vue";
+
+const emits = defineEmits<{
+  (e: 'filter'): void
+  (e: 'reset', value: number): void
+}>()
+const filterVisible = ref(false)
+
+function filter() {
+  emits('filter')
+  filterVisible.value = false
+}
+
+function reset() {
+  emits('reset', 1)
+  filterVisible.value = false
+}
+</script>
+
+<template>
+  <div class="p-3 mb-2 bg-white text-14px" @click="filterVisible = true">
+    <!-- .filter-params 为空时显示 .filter-params-tips -->
+    <div class="filter-params">
+      <slot name="params" />
+    </div>
+    <div class="filter-params-tips">
+      条件筛选，点击打开
+    </div>
+  </div>
+
+  <ADrawer v-model:open="filterVisible" class="filter-drawer" placement="bottom" height="50vh">
+    <template #extra>
+      <AButton class="mr-3 my--3" @click="reset()">
+        重置
+      </AButton>
+      <AButton class="my--3" type="primary" @click="filter()">
+        筛选
+      </AButton>
+    </template>
+    <template #default>
+      <slot />
+    </template>
+  </ADrawer>
+</template>
+
+<style scoped lang="scss">
+.filter-params {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  gap: 5px 15px;
+}
+
+// .filter-params 为空时显示 .filter-params-tips
+.filter-params-tips {
+  display: none;
+  color: theme('colors.gray.DEFAULT');
+}
+
+.filter-params:empty {
+  display: none;
+}
+
+.filter-params:empty + .filter-params-tips {
+  display: block;
+}
+</style>
+
+<style lang="scss">
+.filter-drawer {
+  .ant-drawer-header {
+    padding: 16px;
+
+    .ant-drawer-close {
+      --expand: 5px;
+
+      padding: var(--expand);
+      margin: calc(var(--expand) * -1) var(--expand) calc(var(--expand) * -1) 0;
+    }
+  }
+
+  .ant-drawer-body {
+    padding: 16px;
+  }
+
+  .ant-form-item {
+    margin-bottom: 0;
+
+    .ant-form-item-label {
+      padding-bottom: 0;
+    }
+  }
+}
+</style>

package/admin/filter/FilterParam.vue

@@ -1,76 +1,76 @@
-<script lang="ts">
-import isNil from 'lodash-es/isNil'
-import isFinite from 'lodash-es/isFinite'
-import dayjs from 'dayjs'
-import bignumber from 'bignumber.js'
-
-export const paramTypes = { numberRange, datetimeRange, options }
-
-/**
- * 时间范围格式化
- * @param range 数字范围
- * @param unit 单位
- */
-function numberRange(range?: [number, number], unit?: string) {
-  if (!range?.every(isFinite))
-    return ''
-
-  return `${bignumber(range[0]).toFormat()}~${bignumber(range[1]).toFormat()}${unit}`
-}
-
-/**
- * 时间范围格式化
- * @param range 时间范围
- * @param template 格式化模板（文档：https://dayjs.gitee.io/docs/zh-CN/display/format ）
- */
-function datetimeRange(range?: [string | dayjs.Dayjs, string | dayjs.Dayjs], template = 'YYYY-MM-DD') {
-  if (!range?.every(v => dayjs(v).isValid()))
-    return ''
-
-  return `${dayjs(range[0]).format(template)} ~ ${dayjs(range[1]).format(template)}`
-}
-
-function options(
-  value?: string | number | Array<string | number>,
-  options?: Array<{ value: string | number; label: any }>,
-) {
-  if (isNil(value) || isNil(options))
-    return
-  if (value === '')
-    return
-
-  const _value = Array.isArray(value) ? value : [value]
-
-  return options
-    .filter(o => _value.includes(o.value))
-    .map(o => o.label)
-    .join(', ')
-}
-</script>
-
-<script setup lang="ts">
-const props = defineProps<{
-  label: string
-  content?: any
-}>()
-</script>
-
-<template>
-  <div v-if="props.content" class="item-param">
-    <span class="label">{{ props.label }}</span>
-    <span class="content">{{ props.content }}</span>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.label {
-  display: inline-block;
-  margin-right: 0.3em;
-  color: theme('colors.gray.DEFAULT');
-}
-
-.content {
-  color: theme('colors.primary.DEFAULT');
-  word-break: break-all;
-}
-</style>
+<script lang="ts">
+import isNil from 'lodash-es/isNil'
+import isFinite from 'lodash-es/isFinite'
+import dayjs from 'dayjs'
+import bignumber from 'bignumber.js'
+
+export const paramTypes = { numberRange, datetimeRange, options }
+
+/**
+ * 时间范围格式化
+ * @param range 数字范围
+ * @param unit 单位
+ */
+function numberRange(range?: [number, number], unit?: string) {
+  if (!range?.every(isFinite))
+    return ''
+
+  return `${bignumber(range[0]).toFormat()}~${bignumber(range[1]).toFormat()}${unit}`
+}
+
+/**
+ * 时间范围格式化
+ * @param range 时间范围
+ * @param template 格式化模板（文档：https://dayjs.gitee.io/docs/zh-CN/display/format ）
+ */
+function datetimeRange(range?: [string | dayjs.Dayjs, string | dayjs.Dayjs], template = 'YYYY-MM-DD') {
+  if (!range?.every(v => dayjs(v).isValid()))
+    return ''
+
+  return `${dayjs(range[0]).format(template)} ~ ${dayjs(range[1]).format(template)}`
+}
+
+function options(
+  value?: string | number | Array<string | number>,
+  options?: Array<{ value: string | number; label: any }>,
+) {
+  if (isNil(value) || isNil(options))
+    return
+  if (value === '')
+    return
+
+  const _value = Array.isArray(value) ? value : [value]
+
+  return options
+    .filter(o => _value.includes(o.value))
+    .map(o => o.label)
+    .join(', ')
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<{
+  label: string
+  content?: any
+}>()
+</script>
+
+<template>
+  <div v-if="props.content" class="item-param">
+    <span class="label">{{ props.label }}</span>
+    <span class="content">{{ props.content }}</span>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.label {
+  display: inline-block;
+  margin-right: 0.3em;
+  color: theme('colors.gray.DEFAULT');
+}
+
+.content {
+  color: theme('colors.primary.DEFAULT');
+  word-break: break-all;
+}
+</style>

package/admin/hooks/useMenu.ts

@@ -1,132 +1,128 @@
-import { createGlobalState } from '@vueuse/core'
-import { reactive, ref, computed, watch } from 'vue'
-import type { UnwrapNestedRefs, VNode, Ref } from 'vue'
-
-export { useMenu }
-export type { TMenu }
-
-interface IMenuConfig {
-  key: string
-  label: string | (() => string)
-  icon?: () => VNode
-  order: number
-  trigger: () => void
-  children?: IMenuConfig[]
-}
-
-interface IMenuReactive {
-  key: string
-  label: Ref<string>
-  icon: Ref<VNode | null>
-  order: number
-  trigger: () => void
-  children?: IMenuReactive[]
-}
-
-type TMenu = UnwrapNestedRefs<IMenuReactive>
-
-const useMenu = createGlobalState(() => {
-  const menus = reactive<TMenu[]>([])
-  const collapsed = ref(false)
-
-  watch(menus, (menus) => {
-    console.log('menus', menus);
-  })
-
-  const findMenu = (menus: TMenu[], key: string) => {
-    const queue = [...menus]
-
-    while (queue.length > 0) {
-      const menu = queue.shift()!
-
-      if (menu.key === key)
-        return menu
-
-      if (menu.children)
-        queue.push(...menu.children)
-    }
-
-    return undefined
-  }
-
-  /**
-   * 获取目标路由的路径
-   * @param key 目标路由
-   */
-  const getMenuPath = (key: string) => {
-    const path: TMenu[] = []
-
-    const _getMenuPath = (menus: TMenu[], key: string) => {
-      for (const menu of menus) {
-        if (menu.key === key) {
-          path.push(menu)
-          return true
-        }
-
-        if (menu.children) {
-          path.push(menu)
-          if (_getMenuPath(menu.children, key))
-            return true
-          path.pop()
-        }
-      }
-
-      return false
-    }
-
-    _getMenuPath(menus, key)
-
-    return path
-  }
-
-  const addMenu = (menuConfig: IMenuConfig, parentKey?: string) => {
-    const labelGetter = typeof menuConfig.label === 'function' ? menuConfig.label : (() => menuConfig.label) as (() => string)
-    const iconGetter = typeof menuConfig.icon === 'function' ? menuConfig.icon : () => null
-
-    const _menu = reactive<IMenuReactive>({
-      key: menuConfig.key,
-      label: computed(labelGetter),
-      icon: computed(iconGetter),
-      trigger: menuConfig.trigger,
-      order: menuConfig.order,
-    })
-
-    if (parentKey) {
-      const parentMenu = findMenu(menus, parentKey)
-
-      if (!parentMenu)
-        return
-
-      const children = reactive(parentMenu.children ?? [])
-      children.push(_menu)
-      children.sort((a, b) => a.order - b.order)
-      parentMenu.children = children
-    }
-    else {
-      menus.push(_menu)
-      menus.sort((a, b) => a.order - b.order)
-    }
-  }
-
-  const removeMenu = (key: string) => {
-    const _remove = (menus: TMenu[], key: string) => {
-      for (let i = 0; i < menus.length; i++) {
-        const menu = menus[i]
-        if (menu.key === key) {
-          menus.splice(i, 1)
-          return
-        }
-        if (menu.children)
-          _remove(menu.children, key)
-      }
-    }
-
-    return _remove(menus, key)
-  }
-
-  const getMenu = (key: string) => {
-    return findMenu(menus, key)
-  }
-
-  return { menus, collapsed, getMenuPath, addMenu, removeMenu, getMenu }
-})
+import { createGlobalState } from '@vueuse/core'
+import { reactive, ref, computed, watch } from 'vue'
+import type { UnwrapNestedRefs, VNode, Ref } from 'vue'
+
+export { useMenu }
+export type { TMenu }
+
+interface IMenuConfig {
+  key: string
+  label: string | (() => string)
+  icon?: () => VNode
+  order: number
+  trigger: () => void
+  children?: IMenuConfig[]
+}
+
+interface IMenuReactive {
+  key: string
+  label: Ref<string>
+  icon: Ref<VNode | null>
+  order: number
+  trigger: () => void
+  children?: IMenuReactive[]
+}
+
+type TMenu = UnwrapNestedRefs<IMenuReactive>
+
+const useMenu = createGlobalState(() => {
+  const menus = reactive<TMenu[]>([])
+  const collapsed = ref(false)
+
+  const findMenu = (menus: TMenu[], key: string) => {
+    const queue = [...menus]
+
+    while (queue.length > 0) {
+      const menu = queue.shift()!
+
+      if (menu.key === key)
+        return menu
+
+      if (menu.children)
+        queue.push(...menu.children)
+    }
+
+    return undefined
+  }
+
+  /**
+   * 获取目标路由的路径
+   * @param key 目标路由
+   */
+  const getMenuPath = (key: string) => {
+    const path: TMenu[] = []
+
+    const _getMenuPath = (menus: TMenu[], key: string) => {
+      for (const menu of menus) {
+        if (menu.key === key) {
+          path.push(menu)
+          return true
+        }
+
+        if (menu.children) {
+          path.push(menu)
+          if (_getMenuPath(menu.children, key))
+            return true
+          path.pop()
+        }
+      }
+
+      return false
+    }
+
+    _getMenuPath(menus, key)
+
+    return path
+  }
+
+  const addMenu = (menuConfig: IMenuConfig, parentKey?: string) => {
+    const labelGetter = typeof menuConfig.label === 'function' ? menuConfig.label : (() => menuConfig.label) as (() => string)
+    const iconGetter = typeof menuConfig.icon === 'function' ? menuConfig.icon : () => null
+
+    const _menu = reactive<IMenuReactive>({
+      key: menuConfig.key,
+      label: computed(labelGetter),
+      icon: computed(iconGetter),
+      trigger: menuConfig.trigger,
+      order: menuConfig.order,
+    })
+
+    if (parentKey) {
+      const parentMenu = findMenu(menus, parentKey)
+
+      if (!parentMenu)
+        return
+
+      const children = reactive(parentMenu.children ?? [])
+      children.push(_menu)
+      children.sort((a, b) => a.order - b.order)
+      parentMenu.children = children
+    }
+    else {
+      menus.push(_menu)
+      menus.sort((a, b) => a.order - b.order)
+    }
+  }
+
+  const removeMenu = (key: string) => {
+    const _remove = (menus: TMenu[], key: string) => {
+      for (let i = 0; i < menus.length; i++) {
+        const menu = menus[i]
+        if (menu.key === key) {
+          menus.splice(i, 1)
+          return
+        }
+        if (menu.children)
+          _remove(menu.children, key)
+      }
+    }
+
+    return _remove(menus, key)
+  }
+
+  const getMenu = (key: string) => {
+    return findMenu(menus, key)
+  }
+
+  return { menus, collapsed, getMenuPath, addMenu, removeMenu, getMenu }
+})