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

package/admin/components/settings/src/Settings.vue

@@ -0,0 +1,333 @@
+<script lang="ts">
+import { reactiveComputed } from '@vueuse/core';
+import { cloneDeep, mapKeys, mapValues } from 'lodash-es';
+import dayjs from 'dayjs';
+import { Button, Card, CheckboxGroup, DatePicker, type DatePickerProps, Form, FormItem, Input, InputNumber, RadioGroup, RangePicker, Select, Textarea } from 'ant-design-vue';
+import { computed, ref, toRef } from 'vue';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query';
+import { type ItemSchema, useAntdForm } from '../../../../antd';
+
+interface IConfigDetail {
+  category_id: number
+  data_type: string
+  form_type: number
+  key: string
+  label: string
+  options: any
+  required: number
+  sort: number
+  status: number
+  summary: string
+  value: any
+}
+
+enum FormTypes {
+  /** 数字输入框 */
+  NUMBER_INPUT = 0,
+  /** 文本输入框 */
+  TEXT_INPUT = 1,
+  /** 多行文本输入框 */
+  TEXTAREA = 2,
+  /** 开关 */
+  SWITCH = 3,
+  /** 单选框 */
+  RADIO = 4,
+  /** 多选框 */
+  CHECKBOX = 5,
+  /** 单选下拉选择器 */
+  SINGLE_SELECT = 6,
+  /** 多选下拉选择器 */
+  MULTIPLE_SELECT = 7,
+  /** 单一日期选择器 */
+  SINGLE_DATE_PICKER = 13,
+  /** 日期范围选择器 */
+  RANGE_DATE_PICKER = 14,
+}
+
+const antdPropsResolvers: Record<number, (config: IConfigDetail) => IConfigDetail> = {
+  [FormTypes.SWITCH](config) {
+    const props: any = {};
+
+    if (config.options) {
+      props.options = config.options.split(',').map((item: any) => {
+        const [label, value] = item.split(':');
+        return { value, label };
+      });
+    }
+    else {
+      props.options = [{ value: '1', label: '是' }, { value: '0', label: '否' }];
+    }
+
+    config.options = props;
+
+    return config;
+  },
+  [FormTypes.RADIO](config) {
+    return this[FormTypes.SWITCH](config);
+  },
+  [FormTypes.CHECKBOX](config) {
+    const props: any = {};
+    props.options = config.options.split(',').map((item: any) => {
+      const [label, value] = item.split(':');
+      return { value, label };
+    });
+
+    config.value = config.value.split(',');
+    config.options = props;
+
+    return config;
+  },
+  [FormTypes.SINGLE_SELECT](config) {
+    return this[FormTypes.SWITCH](config);
+  },
+  [FormTypes.MULTIPLE_SELECT](config) {
+    return this[FormTypes.CHECKBOX](config);
+  },
+  [FormTypes.SINGLE_DATE_PICKER](config) {
+    const props: DatePickerProps = {};
+
+    if (config.options) {
+      const [minDate, maxDate] = (config.options || '/').split('/').map(dayjs);
+      props.disabledDate = (current) => {
+        return current.isBefore(minDate) || current.isAfter(maxDate);
+      };
+    }
+
+    config.value = config.value === '' ? undefined : dayjs(config.value);
+    config.options = props;
+
+    return config;
+  },
+  [FormTypes.RANGE_DATE_PICKER](config) {
+    const props: DatePickerProps = {};
+
+    if (config.options) {
+      const [minDate, maxDate] = (config.options || '/').split('/').map(dayjs);
+      props.disabledDate = (current) => {
+        return current.isBefore(minDate) || current.isAfter(maxDate);
+      };
+    }
+
+    if (config.value === '')
+      config.value = [undefined, undefined];
+    else
+      config.value = (config.value || '/').split('/').map(dayjs);
+
+    config.options = props;
+
+    return config;
+  },
+};
+const antdValueResolvers: Record<number, (value: any) => any> = {
+  [FormTypes.NUMBER_INPUT](value) {
+    return String(value);
+  },
+  [FormTypes.CHECKBOX](value) {
+    if (Array.isArray(value))
+      return value.join(',');
+
+    return value;
+  },
+  [FormTypes.MULTIPLE_SELECT](value) {
+    if (Array.isArray(value))
+      return value.join(',');
+
+    return value;
+  },
+  [FormTypes.SINGLE_DATE_PICKER](value) {
+    if (dayjs.isDayjs(value))
+      return value.format('YYYY-MM-DD');
+
+    return value;
+  },
+  [FormTypes.RANGE_DATE_PICKER](value) {
+    if (dayjs.isDayjs(value[0]) && dayjs.isDayjs(value[1]))
+      return [value[0].format('YYYY-MM-DD'), value[1].format('YYYY-MM-DD')].join('/');
+
+    return value;
+  },
+};
+</script>
+
+<script setup lang="ts">
+const props = defineProps<{
+  categoryApi: Api.Request
+  configApi: Api.Request
+  updateApi: Api.Request
+}>();
+
+const queryClient = useQueryClient();
+
+/* 配置分类 */
+const categoryId = ref(1);
+const categoryQuerier = useQuery({
+  queryKey: [props.categoryApi.id],
+  queryFn: () => props.categoryApi(undefined),
+});
+const categoryList = computed(() => categoryQuerier.data.value?.map((item: any) => ({ key: String(item.type), tab: item.label })));
+
+/* 当前分类下的配置 */
+const configQuerier = useQuery<IConfigDetail[] | undefined>({
+  enabled: computed(() => !!categoryQuerier.data.value),
+  queryKey: [props.configApi.id, categoryId],
+  queryFn: () => props.configApi({ category_id: categoryId.value }),
+});
+const configList = computed(() => {
+  const list = cloneDeep(configQuerier.data.value);
+
+  if (!list?.length)
+    return;
+
+  for (let i = 0; i < list.length; i++) {
+    const config = { ...list[i] };
+    list[i] = antdPropsResolvers[config.form_type]?.(config) ?? config;
+  }
+
+  return list;
+});
+const configMap = computed(() => mapKeys(cloneDeep(configQuerier.data.value ?? []), 'key'));
+
+/* 配置表单 */
+const settingMutator = useMutation({
+  mutationKey: [props.updateApi.id],
+  mutationFn: props.updateApi.setDefaultConfig({ successMessage: '更新成功' }),
+  onSuccess() {
+    configQuerier.refetch();
+    queryClient.invalidateQueries({ queryKey: [props.configApi.id], exact: false });
+  },
+});
+const formSchema = reactiveComputed(() => {
+  const _configList = configList.value ?? [];
+  const entries = _configList.map(config => [
+    config.key,
+    {
+      value: cloneDeep(config.value),
+      rules: config.required ? [{ required: true }] : undefined,
+    },
+  ] as [string, ItemSchema]);
+  const schema = Object.fromEntries(entries);
+
+  return schema;
+});
+const settingForm = useAntdForm(formSchema, {
+  transform(state) {
+    return mapValues(state, (v, k) => {
+      const formType = configMap.value[k].form_type;
+      const resolver = antdValueResolvers[formType];
+
+      return resolver ? resolver(v) : v;
+    });
+  },
+});
+
+/** 提交表单内容 */
+async function submitSetting() {
+  const body = await settingForm.$form.validate?.().catch(() => {});
+
+  if (body)
+    await settingMutator.mutateAsync({ requestBody: settingForm.stateTF });
+}
+
+/** 重置表单内容 */
+function resetSetting() {
+  configList.value?.forEach(config => settingForm.state[config.key] = cloneDeep(config.value));
+  settingForm.$form.clearValidate?.();
+}
+</script>
+
+<template>
+  <Card
+    class="antd-cover__actions-right-align"
+    :activeTabKey="String(categoryId)"
+    :tabList="categoryList"
+    :loading="configQuerier.isPending.value"
+    @tabChange="key => categoryId = Number(key)"
+  >
+    <Form
+      v-bind="settingForm.props"
+      class="ant-cover__col2-form"
+      layout="vertical"
+      :disabled="settingMutator.isPending.value"
+    >
+      <template v-for="item of configList" :key="item.key">
+        <FormItem v-bind="settingForm.itemProps[item.key]" :label="item.label" :extra="item.summary">
+          <slot
+            v-if="$slots[item.key]"
+            :name="item.key"
+            :state="toRef(settingForm.state, item.key)"
+            :config="item"
+            :orginConfig="configMap[item.key]"
+          />
+          <template v-else>
+            <slot v-if="item.form_type === FormTypes.NUMBER_INPUT" :name="FormTypes.NUMBER_INPUT">
+              <InputNumber v-model:value="settingForm.state[item.key]" class="w-full" />
+            </slot>
+
+            <slot v-else-if="item.form_type === FormTypes.TEXT_INPUT" :name="FormTypes.TEXT_INPUT">
+              <Input v-model:value="settingForm.state[item.key]" allowClear />
+            </slot>
+
+            <slot v-else-if="item.form_type === FormTypes.TEXTAREA" :name="FormTypes.TEXTAREA">
+              <Textarea v-model:value="settingForm.state[item.key]" :rows="4" />
+            </slot>
+
+            <slot v-else-if="item.form_type === FormTypes.SWITCH" :name="FormTypes.SWITCH">
+              <RadioGroup
+                v-model:value="settingForm.state[item.key]"
+                v-bind="item.options"
+                buttonStyle="solid"
+                optionType="button"
+              />
+            </slot>
+
+            <slot v-else-if="item.form_type === FormTypes.RADIO" :name="FormTypes.RADIO">
+              <RadioGroup
+                v-model:value="settingForm.state[item.key]"
+                buttonStyle="solid"
+                v-bind="item.options"
+              />
+            </slot>
+
+            <slot v-else-if="item.form_type === FormTypes.CHECKBOX" :name="FormTypes.CHECKBOX">
+              <CheckboxGroup v-model:value="settingForm.state[item.key]" v-bind="item.options" />
+            </slot>
+
+            <slot v-else-if="item.form_type === FormTypes.SINGLE_SELECT" :name="FormTypes.SINGLE_SELECT">
+              <Select v-model:value="settingForm.state[item.key]" v-bind="item.options" />
+            </slot>
+
+            <slot v-else-if="item.form_type === FormTypes.MULTIPLE_SELECT" :name="FormTypes.MULTIPLE_SELECT">
+              <Select v-model:value="settingForm.state[item.key]" v-bind="item.options" mode="multiple" />
+            </slot>
+
+            <slot v-else-if="item.form_type === FormTypes.SINGLE_DATE_PICKER" :name="FormTypes.SINGLE_DATE_PICKER">
+              <DatePicker v-model:value="settingForm.state[item.key]" v-bind="item.options" />
+            </slot>
+
+            <slot v-else-if="item.form_type === FormTypes.RANGE_DATE_PICKER" :name="FormTypes.RANGE_DATE_PICKER">
+              <RangePicker v-model:value="settingForm.state[item.key]" v-bind="item.options" />
+            </slot>
+
+            <span v-else class="text-red">没有找到预设 form_type:{{ item.form_type }}，可以通过 {{ item.key }} 插槽自定义</span>
+          </template>
+        </FormItem>
+      </template>
+    </Form>
+
+    <template #actions>
+      <Button :disabled="settingMutator.isPending.value" @click="resetSetting()">
+        重置
+      </Button>
+      <Button type="primary" :loading="settingMutator.isPending.value" @click="submitSetting()">
+        提交
+      </Button>
+    </template>
+  </Card>
+</template>
+
+<style lang="scss" scoped>
+.ant-cover__col2-form :deep(.ant-form-item-label > label) {
+  // padding-left: 0.5em;
+  // border-left: 2px solid #2361d0;
+}
+</style>

package/admin/components/text/src/Datetime.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { Tooltip as ATooltip } from 'ant-design-vue';
 import { computed } from 'vue';
-import { dayjs } from '../../../../utils/date';
+import dayjs from '../../../../libs/dayjs';
 
 defineOptions({
   inheritAttrs: false,

package/admin/components/upload/index.ts

@@ -1,2 +1,3 @@
 export { default as PictureCardUpload } from './src/PictureCardUpload.vue';
 export { createAwsS3Request } from './src/customRequests';
+export { getFileNameByUrl, isFilesDoneFn, urlToUploadFile } from './src/helpers';

package/admin/components/upload/src/PictureCardUpload.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { message } from 'ant-design-vue';
+import { Image as AImage, ImagePreviewGroup as AImagePreviewGroup, Upload as AUpload, message } from 'ant-design-vue';
 import type { UploadProps } from 'ant-design-vue';
 import type { PreviewGroupPreview } from 'ant-design-vue/es/vc-image/src/PreviewGroup';
 import { useVModel } from '@vueuse/core';

package/admin/components/upload/src/helpers.ts

@@ -0,0 +1,37 @@
+import type { UploadFile } from 'ant-design-vue/es/upload';
+import { type Ref, computed } from 'vue';
+
+/**
+ * 获取URL中的文件名
+ * @param url - 文件的URL
+ * @returns 文件名
+ */
+export function getFileNameByUrl(url: string) {
+  return url.split('/').pop();
+}
+
+/**
+ * 判断文件是否全部上传完成
+ * @param files - 上传文件的引用
+ * @returns 如果所有文件都已完成上传，则返回 true；否则返回 false
+ */
+export function isFilesDoneFn(files: Ref<UploadFile[] | undefined>) {
+  return computed(() => files.value ? files.value.every(file => file.status === 'done') : true);
+}
+
+/**
+ * 将URL转换为上传文件对象数组
+ * @param urls 要转换的URL数组或URL字符串
+ * @returns 上传文件对象数组
+ */
+export function urlToUploadFile(urls?: string[] | string) {
+  const _urls = urls ? Array.isArray(urls) ? urls : [urls] : [];
+  const files = _urls.filter(url => !!url).map(url => ({
+    uid: getFileNameByUrl(url),
+    name: getFileNameByUrl(url),
+    status: 'done',
+    url,
+  }));
+
+  return files;
+}

package/admin/defines/route/defineRoute.ts

@@ -1,14 +1,12 @@
 import type { RouteRecordRaw } from 'vue-router';
 import { definePage } from '../page';
 
-export { defineRoute, RouteSymbol };
-
-const RouteSymbol = Symbol('app-route');
+export { defineRoute };
 
 /** 定义路由 */
 function defineRoute(route: (params: { definePage: typeof definePage }) => RouteRecordRaw[]) {
   const routeFn: any = () => route({ definePage });
-  routeFn[RouteSymbol] = true;
+  routeFn.isRoute = true;
 
   return routeFn;
 }

package/admin/defines/route/getRoutes.ts

@@ -1,7 +1,6 @@
 import type { RouteRecordRaw } from 'vue-router';
 import merge from 'lodash-es/merge';
 import { ENV } from '../../../utils';
-import { RouteSymbol } from './defineRoute';
 
 export { getRoutes };
 
@@ -14,10 +13,11 @@ async function getRoutes() {
   let routes: RouteRecordRaw[] = [];
 
   for (const name in routeFiles) {
-    const module: any = await routeFiles[name]();
+    const moduleLoader: any = routeFiles[name];
+    const routeDefineFn = (typeof moduleLoader === 'function' ? await moduleLoader() : moduleLoader)?.default;
 
-    if (module?.default?.[RouteSymbol])
-      Array.prototype.push.apply(routes, module.default());
+    if (routeDefineFn?.isRoute)
+      routes.push(...routeDefineFn());
   }
 
   // 处理路由

package/admin/defines/route/index.ts

@@ -29,7 +29,7 @@ declare module 'vue-router' {
     /**
      * 是否需要登录
      *
-     * 默认：`false`
+     * 默认：`true`
      */
     requireAuth?: boolean
     /**

package/admin/defines/route-guard/defineRouteGuard.ts

@@ -6,12 +6,9 @@ export interface IGuardConfig {
   setup: (router: Router) => void
 }
 
-// 路由守卫标识
-export const RouteGuardSymbol = Symbol('app-route-guard');
-
 // 定义路由守卫
 export function defineRouteGuard(guard: IGuardConfig) {
-  (guard as any)[RouteGuardSymbol] = true;
+  (guard as any).isRouteGuard = true;
   guard.order ??= 10;
 
   return guard;

package/admin/defines/route-guard/getRouteGuards.ts

@@ -1,5 +1,4 @@
 import { ENV } from '../../../utils';
-import { RouteGuardSymbol } from './defineRouteGuard';
 import type { IGuardConfig } from './defineRouteGuard';
 
 /**
@@ -14,13 +13,12 @@ export async function getRouteGuards() {
   const routeGuardRecord: { file: string, order: number }[] = [];
 
   for (const name in routeGuardFiles) {
-    const module: any = await routeGuardFiles[name]();
+    const moduleLoader: any = routeGuardFiles[name];
+    const routeGuard = (typeof moduleLoader === 'function' ? await moduleLoader() : moduleLoader)?.default;
 
-    if (module?.default?.[RouteGuardSymbol]) {
-      const guard = module.default;
-
-      routeGuards.push(guard);
-      routeGuardRecord.push({ file: name, order: guard.order });
+    if (routeGuard?.isRouteGuard) {
+      routeGuards.push(routeGuard);
+      routeGuardRecord.push({ file: name, order: routeGuard.order });
     }
   }
 

package/admin/defines/startup/defineStartup.ts

@@ -9,10 +9,8 @@ export type StartupFn = (
   hooks: IHooks
 ) => (void | Promise<void>);
 
-export const StartupSymbol = Symbol('app-startup');
-
 export function defineStartup(startup: StartupFn) {
-  (startup as any)[StartupSymbol] = true;
+  (startup as any).isAppStartup = true;
 
   return startup;
 }

package/admin/defines/startup/runStartup.ts

@@ -1,19 +1,17 @@
 import type { App } from 'vue';
 import { ENV } from '../../../utils';
-import { StartupSymbol } from './defineStartup';
 import type { StartupFn } from './defineStartup';
 
 export async function runStartup(app: App) {
-  const moduleLoaders = runStartup.modules as Record<string, Function>;
+  const moduleLoaders = runStartup.modules as Record<string, any>;
   const startupPaths: string[] = [];
   const onMountCallbacks: Function[] = [];
   (app as any).deps = {};
 
-  for (const [path, moduleLoader] of Object.entries(moduleLoaders)) {
-    const module: any = await moduleLoader();
-    const plugin: StartupFn = module?.default ?? {};
+  for (const [path, loader] of Object.entries(moduleLoaders)) {
+    const plugin: StartupFn = (typeof loader === 'function' ? await loader() : loader)?.default;
 
-    if (!plugin?.[StartupSymbol])
+    if (!(plugin as any)?.isAppStartup)
       continue;
 
     startupPaths.push(path);

package/admin/layout/large/Breadcrumb.vue

@@ -3,7 +3,7 @@ import { computed } from 'vue';
 import type { VNode } from 'vue';
 import { Breadcrumb as ABreadcrumb } from 'ant-design-vue';
 import type { Route as AntdBreadcrumbRoute } from 'ant-design-vue/es/breadcrumb/Breadcrumb';
-import { adminPlugin } from '../../adminPlugin';
+import { injectTTAdmin } from '../../adminPlugin';
 import type { IBreadcrumb } from '../../stores/createUsePageStore';
 
 interface IBreadcrumbRoute extends AntdBreadcrumbRoute {
@@ -23,7 +23,7 @@ function _buildRoute(breadcrumb: IBreadcrumb): IBreadcrumbRoute {
 </script>
 
 <script setup lang="ts">
-const pageStore = adminPlugin.deps.usePageStore();
+const pageStore = injectTTAdmin()!.deps.usePageStore();
 const routes = computed(() => {
   let breadcrumbs: IBreadcrumbRoute[] = [];
 

package/admin/layout/large/Content.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { adminPlugin } from '../../adminPlugin';
+import { injectTTAdmin } from '../../adminPlugin';
 
-const pageStore = adminPlugin.deps.usePageStore();
+const pageStore = injectTTAdmin()!.deps.usePageStore();
 </script>
 
 <template>

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

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