refactor: 重构路由模块

package.json

@@ -18,7 +18,7 @@
   },
   "dependencies": {
     "@vueuse/core": "^7.4.1",
-    "ant-design-vue": "3.0.0-beta.3",
+    "ant-design-vue": "3.0.0-beta.4",
     "axios": "^0.24.0",
     "core-js": "^3.20.1",
     "dayjs": "^1.10.7",
@@ -109,7 +109,7 @@
       "stylelint --fix"
     ],
     "*.{scss,less,styl,html}": [
-      "stylelint  --allow-empty-input",
+      "stylelint --fix",
       "prettier --write"
     ],
     "*.md": [

src/api/demos/hero.ts

@@ -1,9 +1,46 @@
 import { request, BaseResponse } from '@/utils/request';
 
-export function getHeroList(query: API.PageParams) {
+/**
+ * @description 获取王者荣耀英雄列表
+ */
+export function getWzryHeroList(query: API.PageParams) {
   return request<BaseResponse<API.TableListResult>>(
     {
-      url: '/demos/hero/list',
+      url: '/demos/wzry/hero_list',
+      method: 'get',
+      params: query,
+    },
+    {
+      isMock: true,
+      isGetDataDirectly: false,
+    },
+  );
+}
+
+/**
+ * @description 获取英雄联盟英雄列表
+ */
+export function getLolHeroList(query: API.PageParams) {
+  return request<BaseResponse<API.TableListResult>>(
+    {
+      url: '/demos/lol/hero_list',
+      method: 'get',
+      params: query,
+    },
+    {
+      isMock: true,
+      isGetDataDirectly: false,
+    },
+  );
+}
+
+/**
+ * @description 获取英雄联盟英雄列表
+ */
+export function getLolHeroInfo(query: { id: number | string }) {
+  return request<BaseResponse>(
+    {
+      url: '/demos/lol/hero_info',
       method: 'get',
       params: query,
     },

src/components/JSON-schema-form/schema-form.vue

@@ -83,10 +83,10 @@
 
       watchEffect(() => {
         if (Object.is(props.formSchema, oldFormSchema)) {
-          console.log('相同');
+          // console.log('相同');
           merge(formSchemaRef.value, cloneDeep(props.formSchema));
         } else {
-          console.log('不相同');
+          // console.log('不相同');
           formSchemaRef.value = cloneDeep(props.formSchema);
         }
         oldFormSchema = props.formSchema;

src/components/SuspenseWithError.vue

@@ -16,7 +16,7 @@
   import { ref, onErrorCaptured } from 'vue';
   const error = ref<any>(null);
   onErrorCaptured((e) => {
-    // error.value = '(⊙o⊙)…出了点问题。'
+    error.value = '(⊙o⊙)…出了点问题。';
     console.error(e);
     return true;
   });

src/components/dynamic-table/hooks/index.ts

@@ -1,2 +1 @@
-export { useDragCol } from './useDragCol';
 export { useExpandLoading } from './useExpandLoading';

src/components/image-preview/index.tsx

@@ -0,0 +1,77 @@
+import { type PropType, defineComponent, ref, computed, watchEffect } from 'vue';
+import { Image, type ImageProps } from 'ant-design-vue';
+import { imageProps } from 'ant-design-vue/lib/image';
+import { type ImagePreviewType } from 'ant-design-vue/lib/vc-image/src/Image';
+import { omit } from 'lodash';
+
+interface PreviewType extends ImagePreviewType {
+  src?: string; // V4.10.0
+}
+
+export default defineComponent({
+  props: {
+    ...imageProps,
+    preview: {
+      type: Object as PropType<PreviewType | boolean>,
+    },
+  },
+  setup(props) {
+    const previewRef = ref<PreviewType>({
+      visible: false,
+      onVisibleChange: (visible: boolean) => {
+        previewRef.value.visible = visible;
+      },
+    });
+
+    watchEffect(() => {
+      if (typeof props.preview == 'object' && props.preview.src) {
+        previewRef.value.src = props.preview.src;
+      }
+    });
+
+    const showPreviewImage = () => {
+      if (typeof props.preview == 'object' && props.preview.src) {
+        previewRef.value.src = props.preview.src;
+        previewRef.value.visible = true;
+      }
+    };
+
+    const previewIsObj = computed(() => {
+      return typeof props.preview == 'object' && Reflect.has(props.preview, 'src');
+    });
+
+    const preview = computed(() => {
+      if (typeof props.preview == 'object' && Reflect.has(props.preview, 'src')) {
+        console.log('props.preview a', props.preview);
+        return omit(props.preview, 'src') as ImageProps['preview'];
+      }
+      return props.preview as ImageProps['preview'];
+    });
+
+    return () => (
+      <div class="relative">
+        <Image {...props} preview={previewIsObj.value ? false : preview.value} />
+        {previewIsObj.value && (
+          <div
+            class="absolute inset-0 z-10 overflow-hidden cursor-zoom-in opacity-0"
+            onClick={showPreviewImage}
+          >
+            {Array.isArray(previewRef.value.src) ? (
+              <Image.PreviewGroup preview={omit(previewRef.value, 'src') as ImageProps['preview']}>
+                {previewRef.value.src.map((n) => (
+                  <Image key={n} src={n} />
+                ))}
+              </Image.PreviewGroup>
+            ) : (
+              <Image
+                {...props}
+                preview={omit(previewRef.value, 'src') as ImageProps['preview']}
+                src={previewRef.value.src}
+              />
+            )}
+          </div>
+        )}
+      </div>
+    );
+  },
+});

src/layout/header/index.vue

@@ -108,6 +108,7 @@
     Modal.confirm({
       title: '您确定要退出登录吗？',
       icon: <QuestionCircleOutlined />,
+      centered: true,
       onOk: async () => {
         // 如果不是rootadmin，则退出登录
         if (userStore.userInfo.phone !== '13553550634') {

src/layout/menu/menu-item.vue

@@ -1,5 +1,6 @@
 <template>
   <template v-if="!props.menuInfo?.meta?.hideInMenu">
+    <!-- 目录 -->
     <Menu.SubMenu
       v-if="props.menuInfo?.children?.length"
       :key="props.menuInfo?.name"
@@ -12,17 +13,11 @@
         </span>
       </template>
       <template v-for="item in props.menuInfo?.children" :key="item.name">
-        <template v-if="!item.children">
-          <a-menu-item :key="item.name">
-            <icon-font :type="item.meta?.icon" />
-            <span>{{ getTitle(item.meta?.title) }}</span>
-          </a-menu-item>
-        </template>
-        <template v-else>
-          <menu-item :key="item.name" :menu-info="item" />
-        </template>
+        <!-- 递归生成菜单 -->
+        <MyMenuItem :menuInfo="item" />
       </template>
     </Menu.SubMenu>
+    <!-- 菜单 -->
     <template v-else>
       <Menu.Item :key="props.menuInfo?.name">
         <icon-font :type="props.menuInfo?.meta?.icon" />
@@ -32,6 +27,12 @@
   </template>
 </template>
 
+<script lang="ts">
+  export default {
+    name: 'MyMenuItem',
+  };
+</script>
+
 <script setup lang="ts">
   import { PropType } from 'vue';
   import { Menu } from 'ant-design-vue';