fix: build error

apps/admin/src/api/tools/email.ts

@@ -0,0 +1,13 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  EmailConfig = '/tools/email/config',
+  SendEmail = '/tools/email',
+}
+
+export const getEmailConfig = () => defHttp.get({ url: Api.EmailConfig });
+
+export const saveEmailConfig = (params) => defHttp.post({ url: Api.EmailConfig, params });
+
+export const sendEmail = (params) =>
+  defHttp.post({ url: Api.SendEmail, params }, { successMessageMode: 'message' });

apps/admin/src/api/tools/storage.ts

@@ -0,0 +1,30 @@
+import { BasicPageParams, BasicPaginationResult } from '../model/baseModel';
+import { defHttp } from '/@/utils/http/axios';
+import qs from 'qs';
+
+enum Api {
+  Base = '/tools/storage',
+}
+
+export interface Storage {
+  id: number;
+  name: string;
+  fileName: string;
+  extName: string;
+  path: string;
+  type: string;
+  size: string;
+  username: string;
+}
+
+export type StorageListResult = BasicPaginationResult<Storage>;
+
+export const getStorageList = (params?: BasicPageParams) =>
+  defHttp.get<StorageListResult>({
+    url: Api.Base,
+    params,
+    paramsSerializer: (params) => qs.stringify(params, { arrayFormat: 'repeat' }),
+  });
+
+export const deleteStorage = (params: { ids: number[] }) =>
+  defHttp.post({ url: `${Api.Base}/delete`, params }, { successMessageMode: 'message' });

apps/admin/src/router/routes/modules/demo/feat.ts

@@ -31,15 +31,6 @@ const feat: AppRouteModule = {
         title: t('routes.demo.feat.ws'),
       },
     },
-    {
-      path: 'request',
-      name: 'RequestDemo',
-      // @ts-ignore
-      component: () => import('/@/views/demo/feat/request-demo/index.vue'),
-      meta: {
-        title: t('routes.demo.feat.requestDemo'),
-      },
-    },
     {
       path: 'session-timeout',
       name: 'SessionTimeout',

apps/admin/src/views/demo/feat/breadcrumb/ChildrenListDetail.vue

@@ -6,5 +6,6 @@
 <script lang="ts">
   import { defineComponent } from 'vue';
   import { PageWrapper } from '/@/components/Page';
+
   export default defineComponent({ components: { PageWrapper } });
 </script>

apps/admin/src/views/demo/feat/full-screen/index.vue

@@ -29,6 +29,7 @@
   import { useFullscreen } from '@vueuse/core';
 
   import { PageWrapper } from '/@/components/Page';
+  import { type Nullable } from '@vben/types';
 
   export default defineComponent({
     components: { CollapseContainer, PageWrapper },

apps/admin/src/views/demo/feat/watermark/index.vue

@@ -16,6 +16,7 @@
   import { CollapseContainer } from '/@/components/Container/index';
   import { useWatermark } from '/@/hooks/web/useWatermark';
   import { PageWrapper } from '/@/components/Page';
+  import { type Nullable } from '@vben/types';
 
   export default defineComponent({
     components: { CollapseContainer, PageWrapper },

apps/admin/src/views/demo/system/account/AccountDetail.vue

@@ -0,0 +1,61 @@
+<template>
+  <PageWrapper
+    :title="`用户` + userId + `的资料`"
+    content="这是用户资料详情页面。本页面仅用于演示相同路由在tab中打开多个页面并且显示不同的数据"
+    contentBackground
+    @back="goBack"
+  >
+    <template #extra>
+      <a-button type="primary" danger> 禁用账号 </a-button>
+      <a-button type="primary"> 修改密码 </a-button>
+    </template>
+    <template #footer>
+      <a-tabs default-active-key="detail" v-model:activeKey="currentKey">
+        <a-tab-pane key="detail" tab="用户资料" />
+        <a-tab-pane key="logs" tab="操作日志" />
+      </a-tabs>
+    </template>
+    <div class="pt-4 m-4 desc-wrap">
+      <template v-if="currentKey == 'detail'">
+        <div v-for="i in 10" :key="i">这是用户{{ userId }}资料Tab</div>
+      </template>
+      <template v-if="currentKey == 'logs'">
+        <div v-for="i in 10" :key="i">这是用户{{ userId }}操作日志Tab</div>
+      </template>
+    </div>
+  </PageWrapper>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { useRoute } from 'vue-router';
+  import { PageWrapper } from '/@/components/Page';
+  import { useGo } from '/@/hooks/web/usePage';
+  import { useTabs } from '/@/hooks/web/useTabs';
+  import { Tabs } from 'ant-design-vue';
+
+  defineOptions({ name: 'AccountDetail' });
+
+  const ATabs = Tabs;
+  const ATabPane = Tabs.TabPane;
+
+  const route = useRoute();
+  const go = useGo();
+  // 此处可以得到用户ID
+  const userId = ref(route.params?.id);
+  const currentKey = ref('detail');
+  const { setTitle } = useTabs();
+  // TODO
+  // 本页代码仅作演示，实际应当通过userId从接口获得用户的相关资料
+
+  // 设置Tab的标题（不会影响页面标题）
+  setTitle('详情：用户' + userId.value);
+
+  // 页面左侧点击返回链接时的操作
+  function goBack() {
+    // 本例的效果时点击返回始终跳转到账号列表页，实际应用时可返回上一页
+    go('/system/account');
+  }
+</script>
+
+<style></style>

apps/admin/src/views/demo/system/account/AccountModal.vue

@@ -0,0 +1,74 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, computed, unref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { accountFormSchema } from './account.data';
+  import { getDeptList } from '/@/api/demo/system';
+
+  export default defineComponent({
+    name: 'AccountModal',
+    components: { BasicModal, BasicForm },
+    emits: ['success', 'register'],
+    setup(_, { emit }) {
+      const isUpdate = ref(true);
+      const rowId = ref('');
+
+      const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
+        labelWidth: 100,
+        baseColProps: { span: 24 },
+        schemas: accountFormSchema,
+        showActionButtonGroup: false,
+        actionColOptions: {
+          span: 23,
+        },
+      });
+
+      const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+        resetFields();
+        setModalProps({ confirmLoading: false });
+        isUpdate.value = !!data?.isUpdate;
+
+        if (unref(isUpdate)) {
+          rowId.value = data.record.id;
+          setFieldsValue({
+            ...data.record,
+          });
+        }
+
+        const treeData = await getDeptList();
+        updateSchema([
+          {
+            field: 'pwd',
+            show: !unref(isUpdate),
+          },
+          {
+            field: 'dept',
+            componentProps: { treeData },
+          },
+        ]);
+      });
+
+      const getTitle = computed(() => (!unref(isUpdate) ? '新增账号' : '编辑账号'));
+
+      async function handleSubmit() {
+        try {
+          const values = await validate();
+          setModalProps({ confirmLoading: true });
+          // TODO custom api
+          console.log(values);
+          closeModal();
+          emit('success', { isUpdate: unref(isUpdate), values: { ...values, id: rowId.value } });
+        } finally {
+          setModalProps({ confirmLoading: false });
+        }
+      }
+
+      return { registerModal, registerForm, getTitle, handleSubmit };
+    },
+  });
+</script>

apps/admin/src/views/demo/system/account/DeptTree.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="m-4 mr-0 overflow-hidden bg-white">
+    <BasicTree
+      title="部门列表"
+      toolbar
+      search
+      treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
+      :clickRowToExpand="false"
+      :treeData="treeData"
+      :fieldNames="{ key: 'id', title: 'deptName' }"
+      @select="handleSelect"
+    />
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, onMounted, ref } from 'vue';
+
+  import { BasicTree, TreeItem } from '/@/components/Tree';
+  import { getDeptList } from '/@/api/demo/system';
+
+  export default defineComponent({
+    name: 'DeptTree',
+    components: { BasicTree },
+
+    emits: ['select'],
+    setup(_, { emit }) {
+      const treeData = ref<TreeItem[]>([]);
+
+      async function fetch() {
+        treeData.value = (await getDeptList()) as unknown as TreeItem[];
+      }
+
+      function handleSelect(keys) {
+        emit('select', keys[0]);
+      }
+
+      onMounted(() => {
+        fetch();
+      });
+      return { treeData, handleSelect };
+    },
+  });
+</script>

apps/admin/src/views/demo/system/account/account.data.ts

@@ -0,0 +1,126 @@
+import { getAllRoleList, isAccountExist } from '/@/api/demo/system';
+import { BasicColumn, FormSchema } from '/@/components/Table';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '用户名',
+    dataIndex: 'account',
+    width: 120,
+  },
+  {
+    title: '昵称',
+    dataIndex: 'nickname',
+    width: 120,
+  },
+  {
+    title: '邮箱',
+    dataIndex: 'email',
+    width: 120,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    width: 180,
+  },
+  {
+    title: '角色',
+    dataIndex: 'role',
+    width: 200,
+  },
+  {
+    title: '备注',
+    dataIndex: 'remark',
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'account',
+    label: '用户名',
+    component: 'Input',
+    colProps: { span: 8 },
+  },
+  {
+    field: 'nickname',
+    label: '昵称',
+    component: 'Input',
+    colProps: { span: 8 },
+  },
+];
+
+export const accountFormSchema: FormSchema[] = [
+  {
+    field: 'account',
+    label: '用户名',
+    component: 'Input',
+    helpMessage: ['本字段演示异步验证', '不能输入带有admin的用户名'],
+    rules: [
+      {
+        required: true,
+        message: '请输入用户名',
+      },
+      {
+        validator(_, value) {
+          return new Promise((resolve, reject) => {
+            isAccountExist(value)
+              .then(() => resolve())
+              .catch((err) => {
+                reject(err.message || '验证失败');
+              });
+          });
+        },
+      },
+    ],
+  },
+  {
+    field: 'pwd',
+    label: '密码',
+    component: 'InputPassword',
+    required: true,
+    ifShow: false,
+  },
+  {
+    label: '角色',
+    field: 'role',
+    component: 'ApiSelect',
+    componentProps: {
+      api: getAllRoleList,
+      labelField: 'roleName',
+      valueField: 'roleValue',
+    },
+    required: true,
+  },
+  {
+    field: 'dept',
+    label: '所属部门',
+    component: 'TreeSelect',
+    componentProps: {
+      fieldNames: {
+        label: 'deptName',
+        key: 'id',
+        value: 'id',
+      },
+      getPopupContainer: () => document.body,
+    },
+    required: true,
+  },
+  {
+    field: 'nickname',
+    label: '昵称',
+    component: 'Input',
+    required: true,
+  },
+
+  {
+    label: '邮箱',
+    field: 'email',
+    component: 'Input',
+    required: true,
+  },
+
+  {
+    label: '备注',
+    field: 'remark',
+    component: 'InputTextArea',
+  },
+];