fix: 🧩 修改路由页面

src/api/service/types.d.ts

@@ -1,47 +1,35 @@
-import type {
+import type { AxiosError, AxiosRequestConfig, AxiosResponse, Method } from 'axios';
-  Method,
+
-  AxiosError,
+// 基础后端返回内容
-  AxiosResponse,
+export interface BaseResult<T> {
-  AxiosRequestConfig
+	code: number;
-} from "axios";
+	data: T;
+	message: string;
+}
 
 export type resultType = {
-  accessToken?: string;
+	accessToken?: string;
 };
 
-export type RequestMethods = Extract<
+export type RequestMethods = Extract<Method, 'get' | 'post' | 'put' | 'delete' | 'patch' | 'option' | 'head'>;
-  Method,
-  "get" | "post" | "put" | "delete" | "patch" | "option" | "head"
->;
 
 export interface PureHttpError extends AxiosError {
-  isCancelRequest?: boolean;
+	isCancelRequest?: boolean;
 }
 
 export interface PureHttpResponse extends AxiosResponse {
-  config: PureHttpRequestConfig;
+	config: PureHttpRequestConfig;
 }
 
 export interface PureHttpRequestConfig extends AxiosRequestConfig {
-  beforeRequestCallback?: (request: PureHttpRequestConfig) => void;
+	beforeRequestCallback?: (request: PureHttpRequestConfig) => void;
-  beforeResponseCallback?: (response: PureHttpResponse) => void;
+	beforeResponseCallback?: (response: PureHttpResponse) => void;
 }
 
 export default class PureHttp {
-  request<T>(
+	request<T>(method: RequestMethods, url: string, param?: AxiosRequestConfig, axiosConfig?: PureHttpRequestConfig): Promise<T>;
-    method: RequestMethods,
+
-    url: string,
+	post<T, P>(url: string, params?: P, config?: PureHttpRequestConfig): Promise<T>;
-    param?: AxiosRequestConfig,
+
-    axiosConfig?: PureHttpRequestConfig
+	get<T, P>(url: string, params?: P, config?: PureHttpRequestConfig): Promise<T>;
-  ): Promise<T>;
-  post<T, P>(
-    url: string,
-    params?: P,
-    config?: PureHttpRequestConfig
-  ): Promise<T>;
-  get<T, P>(
-    url: string,
-    params?: P,
-    config?: PureHttpRequestConfig
-  ): Promise<T>;
 }

src/api/v1/routes.ts

@@ -1,5 +1,5 @@
 import { http } from '@/api/service/request';
-import type { BaseResult } from '@/types/BaseResult';
+import type { BaseResult } from '@/api/service/types';
 
 export const getRouterAsync = () => {
 	return http.request<BaseResult<any>>('get', 'router/getRouterAsync');

src/api/v1/system.ts

@@ -1,5 +1,5 @@
 import { http } from '@/api/service/request';
-import type { BaseResult } from '@/types/BaseResult';
+import type { BaseResult } from '@/api/service/types';
 
 type ResultTable = {
 	/** 列表数据 */

src/api/v1/user.ts

@@ -1,5 +1,5 @@
 import { http } from '@/api/service/request';
-import type { BaseResult } from '@/types/BaseResult';
+import type { BaseResult } from '@/api/service/types';
 
 export interface UserResult {
 	/** 头像 */

src/enums/enums.ts

@@ -4,7 +4,6 @@ const menuTypeOptions: Array<OptionsType> = [
 	{ label: '菜单', value: 0 },
 	{ label: 'iframe', value: 1 },
 	{ label: '外链', value: 2 },
-	{ label: '按钮', value: 3 },
 ];
 
 const showLinkOptions: Array<OptionsType> = [

src/types/BaseResult.ts

@@ -1,6 +0,0 @@
-// 基础后端返回内容
-export interface BaseResult<T> {
-	code: number;
-	data: T;
-	message: string;
-}

src/views/menu/README.md

@@ -1,26 +0,0 @@
-## 字段含义
-
-| 字段                | 说明                                                                                                                                                                                                                                                                                                                                                                                                                                          |
-|:------------------|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `menuType`        | 菜单类型（`0`代表菜单、`1`代表`iframe`、`2`代表外链、`3`代表按钮）                                                                                                                                                                                                                                                                                                                                                                                                 |
-| `parentId`        |                                                                                                                                                                                                                                                                                                                                                                                                                                             |
-| `title`           | 菜单名称（兼容国际化、非国际化，如果用国际化的写法就必须在根目录的`locales`文件夹下对应添加）                                                                                                                                                                                                                                                                                                                                                                                         |
-| `name`            | 路由名称（必须唯一并且和当前路由`component`字段对应的页面里用`defineOptions`包起来的`name`保持一致）                                                                                                                                                                                                                                                                                                                                                                          |
-| `path`            | 路由路径                                                                                                                                                                                                                                                                                                                                                                                                                                        |
-| `component`       | 组件路径（传`component`组件路径，那么`path`可以随便写，如果不传，`component`组件路径会跟`path`保持一致）                                                                                                                                                                                                                                                                                                                                                                       |
-| `rank`            | 菜单排序（平台规定只有`home`路由的`rank`才能为`0`，所以后端在返回`rank`的时候需要从非`0`开始 [点击查看更多](https://pure-admin.github.io/pure-admin-doc/pages/routerMenu/#%E8%8F%9C%E5%8D%95%E6%8E%92%E5%BA%8F-rank)）                                                                                                                                                                                                                                                               |
-| `redirect`        | 路由重定向                                                                                                                                                                                                                                                                                                                                                                                                                                       |
-| `icon`            | 菜单图标                                                                                                                                                                                                                                                                                                                                                                                                                                        |
-| `extraIcon`       | 右侧图标                                                                                                                                                                                                                                                                                                                                                                                                                                        |
-| `enterTransition` | 进场动画（页面加载动画）                                                                                                                                                                                                                                                                                                                                                                                                                                | 
-| `leaveTransition` | 离场动画（页面加载动画）                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| `activePath`      | 菜单激活（将某个菜单激活，主要用于通过`query`或`params`传参的路由，当它们通过配置`showLink: false`后不在菜单中显示，就不会有任何菜单高亮，而通过设置`activePath`指定激活菜单即可获得高亮，`activePath`为指定激活菜单的`path`）                                                                                                                                                                                                                                                                                              |
-| `auths`           | 权限标识（按钮级别权限设置）                                                                                                                                                                                                                                                                                                                                                                                                                              |
-| `frameSrc`        | 链接地址（需要内嵌的`iframe`链接地址）                                                                                                                                                                                                                                                                                                                                                                                                                     |
-| `frameLoading`    | 加载动画（内嵌的`iframe`页面是否开启首次加载动画）                                                                                                                                                                                                                                                                                                                                                                                                               |
-| `keepAlive`       | 缓存页面（是否缓存该路由页面，开启后会保存该页面的整体状态，刷新后会清空状态）                                                                                                                                                                                                                                                                                                                                                                                                     |
-| `hiddenTag`       | 标签页（当前菜单名称或自定义信息禁止添加到标签页）                                                                                                                                                                                                                                                                                                                                                                                                                   |
-| `fixedTag`        | 固定标签页（当前菜单名称是否固定显示在标签页且不可关闭）                                                                                                                                                                                                                                                                                                                                                                                                                |
-| `showLink`        | 菜单（是否显示该菜单）                                                                                                                                                                                                                                                                                                                                                                                                                                 |
-| `showParent`      | 父级菜单（是否显示父级菜单 [点击查看更多](https://pure-admin.github.io/pure-admin-doc/pages/routerMenu/#%E7%AC%AC%E4%B8%80%E7%A7%8D-%E8%AF%A5%E6%A8%A1%E5%BC%8F%E9%92%88%E5%AF%B9%E7%88%B6%E7%BA%A7%E8%8F%9C%E5%8D%95%E4%B8%8B%E5%8F%AA%E6%9C%89%E4%B8%80%E4%B8%AA%E5%AD%90%E8%8F%9C%E5%8D%95%E7%9A%84%E6%83%85%E5%86%B5-%E5%9C%A8%E5%AD%90%E8%8F%9C%E5%8D%95%E7%9A%84-meta-%E5%B1%9E%E6%80%A7%E4%B8%AD%E5%8A%A0%E4%B8%8A-showparent-true-%E5%8D%B3%E5%8F%AF)） |
-

src/views/menu/form.vue

@@ -21,11 +21,8 @@ const props = withDefaults(defineProps<FormProps>(), {
 		rank: 99,
 		redirect: '',
 		icon: '',
-		extraIcon: '',
 		enterTransition: '',
 		leaveTransition: '',
-		activePath: '',
-		auths: '',
 		frameSrc: '',
 		frameLoading: true,
 		keepAlive: false,
@@ -39,11 +36,7 @@ const props = withDefaults(defineProps<FormProps>(), {
 const ruleFormRef = ref();
 const newFormInline = ref(props.formInline);
 
-function getRef() {
+defineExpose({ getRef: ruleFormRef.value });
-	return ruleFormRef.value;
-}
-
-defineExpose({ getRef });
 </script>
 
 <template>
@@ -60,12 +53,7 @@ defineExpose({ getRef });
 					<el-cascader
 						v-model="newFormInline.parentId"
 						:options="newFormInline.higherMenuOptions"
-						:props="{
+						:props="{ value: 'id', label: 'title', emitPath: false, checkStrictly: true }"
-							value: 'id',
-							label: 'title',
-							emitPath: false,
-							checkStrictly: true,
-						}"
 						class="w-full"
 						clearable
 						filterable
@@ -84,13 +72,13 @@ defineExpose({ getRef });
 					<el-input v-model="newFormInline.title" clearable placeholder="请输入菜单名称" />
 				</el-form-item>
 			</re-col>
-			<re-col v-if="newFormInline.menuType !== 3" :sm="24" :value="12" :xs="24">
+			<re-col :sm="24" :value="12" :xs="24">
 				<el-form-item label="路由名称" prop="name">
 					<el-input v-model="newFormInline.name" clearable placeholder="请输入路由名称" />
 				</el-form-item>
 			</re-col>
 
-			<re-col v-if="newFormInline.menuType !== 3" :sm="24" :value="12" :xs="24">
+			<re-col :sm="24" :value="12" :xs="24">
 				<el-form-item label="路由路径" prop="path">
 					<el-input v-model="newFormInline.path" clearable placeholder="请输入路由路径" />
 				</el-form-item>
@@ -112,16 +100,11 @@ defineExpose({ getRef });
 				</el-form-item>
 			</re-col>
 
-			<re-col v-show="newFormInline.menuType !== 3" :sm="24" :value="12" :xs="24">
+			<re-col :sm="24" :value="12" :xs="24">
 				<el-form-item label="菜单图标">
 					<IconSelect v-model="newFormInline.icon" class="w-full" />
 				</el-form-item>
 			</re-col>
-			<re-col v-show="newFormInline.menuType !== 3" :sm="24" :value="12" :xs="24">
-				<el-form-item label="右侧图标">
-					<el-input v-model="newFormInline.extraIcon" clearable placeholder="菜单名称右侧的额外图标" />
-				</el-form-item>
-			</re-col>
 
 			<re-col v-show="newFormInline.menuType < 2" :sm="24" :value="12" :xs="24">
 				<el-form-item label="进场动画">
@@ -134,18 +117,6 @@ defineExpose({ getRef });
 				</el-form-item>
 			</re-col>
 
-			<re-col v-show="newFormInline.menuType === 0" :sm="24" :value="12" :xs="24">
-				<el-form-item label="菜单激活">
-					<el-input v-model="newFormInline.activePath" clearable placeholder="请输入需要激活的菜单" />
-				</el-form-item>
-			</re-col>
-			<re-col v-if="newFormInline.menuType === 3" :sm="24" :value="12" :xs="24">
-				<!-- 按钮级别权限设置 -->
-				<el-form-item label="权限标识" prop="auths">
-					<el-input v-model="newFormInline.auths" clearable placeholder="请输入权限标识" />
-				</el-form-item>
-			</re-col>
-
 			<re-col v-show="newFormInline.menuType === 1" :sm="24" :value="12" :xs="24">
 				<!-- iframe -->
 				<el-form-item label="链接地址">
@@ -154,83 +125,35 @@ defineExpose({ getRef });
 			</re-col>
 			<re-col v-if="newFormInline.menuType === 1" :sm="24" :value="12" :xs="24">
 				<el-form-item label="加载动画">
-					<Segmented
+					<Segmented :modelValue="newFormInline.frameLoading ? 0 : 1" :options="frameLoadingOptions" @change="({ option: { value } }) => (newFormInline.frameLoading = value)" />
-						:modelValue="newFormInline.frameLoading ? 0 : 1"
-						:options="frameLoadingOptions"
-						@change="
-							({ option: { value } }) => {
-								newFormInline.frameLoading = value;
-							}
-						"
-					/>
 				</el-form-item>
 			</re-col>
 
-			<re-col v-show="newFormInline.menuType !== 3" :sm="24" :value="12" :xs="24">
+			<re-col :sm="24" :value="12" :xs="24">
 				<el-form-item label="菜单">
-					<Segmented
+					<Segmented :modelValue="newFormInline.showLink ? 0 : 1" :options="showLinkOptions" @change="({ option: { value } }) => (newFormInline.showLink = value)" />
-						:modelValue="newFormInline.showLink ? 0 : 1"
-						:options="showLinkOptions"
-						@change="
-							({ option: { value } }) => {
-								newFormInline.showLink = value;
-							}
-						"
-					/>
 				</el-form-item>
 			</re-col>
-			<re-col v-show="newFormInline.menuType !== 3" :sm="24" :value="12" :xs="24">
+			<re-col :sm="24" :value="12" :xs="24">
 				<el-form-item label="父级菜单">
-					<Segmented
+					<Segmented :modelValue="newFormInline.showParent ? 0 : 1" :options="showParentOptions" @change="({ option: { value } }) => (newFormInline.showParent = value)" />
-						:modelValue="newFormInline.showParent ? 0 : 1"
-						:options="showParentOptions"
-						@change="
-							({ option: { value } }) => {
-								newFormInline.showParent = value;
-							}
-						"
-					/>
 				</el-form-item>
 			</re-col>
 
 			<re-col v-show="newFormInline.menuType < 2" :sm="24" :value="12" :xs="24">
 				<el-form-item label="缓存页面">
-					<Segmented
+					<Segmented :modelValue="newFormInline.keepAlive ? 0 : 1" :options="keepAliveOptions" @change="({ option: { value } }) => (newFormInline.keepAlive = value)" />
-						:modelValue="newFormInline.keepAlive ? 0 : 1"
-						:options="keepAliveOptions"
-						@change="
-							({ option: { value } }) => {
-								newFormInline.keepAlive = value;
-							}
-						"
-					/>
 				</el-form-item>
 			</re-col>
 
 			<re-col v-show="newFormInline.menuType < 2" :sm="24" :value="12" :xs="24">
 				<el-form-item label="标签页">
-					<Segmented
+					<Segmented :modelValue="newFormInline.hiddenTag ? 1 : 0" :options="hiddenTagOptions" @change="({ option: { value } }) => (newFormInline.hiddenTag = value)" />
-						:modelValue="newFormInline.hiddenTag ? 1 : 0"
-						:options="hiddenTagOptions"
-						@change="
-							({ option: { value } }) => {
-								newFormInline.hiddenTag = value;
-							}
-						"
-					/>
 				</el-form-item>
 			</re-col>
 			<re-col v-show="newFormInline.menuType < 2" :sm="24" :value="12" :xs="24">
 				<el-form-item label="固定标签页">
-					<Segmented
+					<Segmented :modelValue="newFormInline.fixedTag ? 0 : 1" :options="fixedTagOptions" @change="({ option: { value } }) => (newFormInline.fixedTag = value)" />
-						:modelValue="newFormInline.fixedTag ? 0 : 1"
-						:options="fixedTagOptions"
-						@change="
-							({ option: { value } }) => {
-								newFormInline.fixedTag = value;
-							}
-						"
-					/>
 				</el-form-item>
 			</re-col>
 		</el-row>

src/views/menu/index.vue

@@ -3,14 +3,14 @@ import { onMounted, ref } from 'vue';
 import { $t } from '@/plugins/i18n';
 import { PureTableBar } from '@/components/TableBar';
 import { useRenderIcon } from '@/components/ReIcon/src/hooks';
-
 import Delete from '@iconify-icons/ep/delete';
 import EditPen from '@iconify-icons/ep/edit-pen';
 import Refresh from '@iconify-icons/ep/refresh';
 import AddFill from '@iconify-icons/ri/add-circle-line';
-import { columns, dataList, handleDelete, handleSelectionChange, loading, onSearch, openDialog, resetForm } from '@/views/menu/utils/hook';
+import { dataList, handleDelete, handleSelectionChange, loading, onSearch, openDialog, resetForm } from '@/views/menu/utils/hook';
 import form from '@/views/role/form.vue';
 import PureTable from '@pureadmin/table';
+import { columns } from '@/views/menu/utils/rule';
 
 defineOptions({
 	name: 'SystemMenu',
@@ -19,14 +19,6 @@ defineOptions({
 const formRef = ref();
 const tableRef = ref();
 
-/**
- * 全屏
- */
-const onFullscreen = () => {
-	// 重置表格高度
-	tableRef.value.setAdaptive();
-};
-
 onMounted(() => {
 	onSearch();
 });
@@ -44,7 +36,7 @@ onMounted(() => {
 			</el-form-item>
 		</el-form>
 
-		<PureTableBar :columns="columns" :isExpandAll="false" :tableRef="tableRef?.getTableRef()" title="菜单管理（仅演示，操作后不生效）" @fullscreen="onFullscreen" @refresh="onSearch">
+		<PureTableBar :columns="columns" :isExpandAll="false" :tableRef="tableRef?.getTableRef()" title="菜单管理（仅演示，操作后不生效）" @fullscreen="tableRef.value.setAdaptive()" @refresh="onSearch">
 			<template #buttons>
 				<el-button :icon="useRenderIcon(AddFill)" type="primary" @click="openDialog()"> 新增菜单</el-button>
 			</template>
@@ -54,10 +46,7 @@ onMounted(() => {
 					:adaptiveConfig="{ offsetBottom: 45 }"
 					:columns="dynamicColumns"
 					:data="dataList"
-					:header-cell-style="{
+					:header-cell-style="{ background: 'var(--el-fill-color-light)', color: 'var(--el-text-color-primary)' }"
-						background: 'var(--el-fill-color-light)',
-						color: 'var(--el-text-color-primary)',
-					}"
 					:loading="loading"
 					:size="size"
 					adaptive

src/views/menu/utils/hook.tsx

@@ -6,17 +6,15 @@ import { $t } from '@/plugins/i18n';
 import { addDialog } from '@/components/BaseDialog';
 import { h, reactive, ref } from 'vue';
 import type { FormItemProps } from '../utils/types';
-import { useRenderIcon } from '@/components/ReIcon/src/hooks';
+
 import { cloneDeep, deviceDetection, isAllEmpty } from '@pureadmin/utils';
 
 export const form = reactive({
 	title: '',
 });
-
 export const formRef = ref();
 export const dataList = ref([]);
 export const loading = ref(true);
-
 export const getMenuType = (type, text = false) => {
 	switch (type) {
 		case 0:
@@ -25,78 +23,18 @@ export const getMenuType = (type, text = false) => {
 			return text ? 'iframe' : 'warning';
 		case 2:
 			return text ? '外链' : 'danger';
-		case 3:
-			return text ? '按钮' : 'info';
 	}
 };
 
-export const columns: TableColumnList = [
+export const handleSelectionChange = val => {
-	{
-		label: '菜单名称',
-		prop: 'title',
-		align: 'left',
-		cellRenderer: ({ row }) => (
-			<>
-				<span class='inline-block mr-1'>
-					{h(useRenderIcon(row.icon), {
-						style: { paddingTop: '1px' },
-					})}
-				</span>
-				<span>{$t(row.title)}</span>
-			</>
-		),
-	},
-	{
-		label: '菜单类型',
-		prop: 'menuType',
-		width: 100,
-		cellRenderer: ({ row, props }) => (
-			<el-tag size={props.size} type={getMenuType(row.menuType)} effect='plain'>
-				{getMenuType(row.menuType, true)}
-			</el-tag>
-		),
-	},
-	{
-		label: '路由路径',
-		prop: 'path',
-	},
-	{
-		label: '组件路径',
-		prop: 'component',
-		formatter: ({ path, component }) => (isAllEmpty(component) ? path : component),
-	},
-	{
-		label: '权限标识',
-		prop: 'auths',
-	},
-	{
-		label: '排序',
-		prop: 'rank',
-		width: 100,
-	},
-	{
-		label: '隐藏',
-		prop: 'showLink',
-		formatter: ({ showLink }) => (showLink ? '否' : '是'),
-		width: 100,
-	},
-	{
-		label: '操作',
-		fixed: 'right',
-		width: 210,
-		slot: 'operation',
-	},
-];
-
-export function handleSelectionChange(val) {
 	console.log('handleSelectionChange', val);
-}
+};
 
-export function resetForm(formEl) {
+export const resetForm = async formEl => {
 	if (!formEl) return;
 	formEl.resetFields();
-	onSearch();
+	await onSearch();
-}
+};
 
 export async function onSearch() {
 	loading.value = true;
@@ -142,11 +80,8 @@ export function openDialog(title = '新增', row?: FormItemProps) {
 				rank: row?.rank ?? 99,
 				redirect: row?.redirect ?? '',
 				icon: row?.icon ?? '',
-				extraIcon: row?.extraIcon ?? '',
 				enterTransition: row?.enterTransition ?? '',
 				leaveTransition: row?.leaveTransition ?? '',
-				activePath: row?.activePath ?? '',
-				auths: row?.auths ?? '',
 				frameSrc: row?.frameSrc ?? '',
 				frameLoading: row?.frameLoading ?? true,
 				keepAlive: row?.keepAlive ?? false,
@@ -166,24 +101,25 @@ export function openDialog(title = '新增', row?: FormItemProps) {
 			const FormRef = formRef.value.getRef();
 			const curData = options.props.formInline as FormItemProps;
 
-			function chores() {
+			FormRef.validate(async valid => {
-				message(`您${title}了菜单名称为${$t(curData.title)}的这条数据`, {
-					type: 'success',
-				});
-				done(); // 关闭弹框
-				onSearch(); // 刷新表格数据
-			}
-
-			FormRef.validate(valid => {
 				if (valid) {
 					console.log('curData', curData);
+
 					// 表单规则校验通过
 					if (title === '新增') {
 						// 实际开发先调用新增接口，再进行下面操作
-						chores();
+						message(`您${title}了菜单名称为${$t(curData.title)}的这条数据`, {
+							type: 'success',
+						});
+						done(); // 关闭弹框
+						await onSearch(); // 刷新表格数据
 					} else {
 						// 实际开发先调用修改接口，再进行下面操作
-						chores();
+						message(`您${title}了菜单名称为${$t(curData.title)}的这条数据`, {
+							type: 'success',
+						});
+						done(); // 关闭弹框
+						await onSearch(); // 刷新表格数据
 					}
 				}
 			});
@@ -191,9 +127,9 @@ export function openDialog(title = '新增', row?: FormItemProps) {
 	});
 }
 
-export function handleDelete(row) {
+export const handleDelete = async row => {
 	message(`您删除了菜单名称为${$t(row.title)}的这条数据`, {
 		type: 'success',
 	});
-	onSearch();
+	await onSearch();
-}
+};

src/views/menu/utils/rule.ts

@@ -1,10 +0,0 @@
-import { reactive } from 'vue';
-import type { FormRules } from 'element-plus';
-
-/** 自定义表单规则校验 */
-export const formRules = reactive(<FormRules>{
-	title: [{ required: true, message: '菜单名称为必填项', trigger: 'blur' }],
-	name: [{ required: true, message: '路由名称为必填项', trigger: 'blur' }],
-	path: [{ required: true, message: '路由路径为必填项', trigger: 'blur' }],
-	auths: [{ required: true, message: '权限标识为必填项', trigger: 'blur' }],
-});

src/views/menu/utils/rule.tsx

@@ -0,0 +1,57 @@
+import { h, reactive } from 'vue';
+import type { FormRules } from 'element-plus';
+import { useRenderIcon } from '@/components/ReIcon/src/hooks';
+import { $t } from '@/plugins/i18n';
+import { isAllEmpty } from '@pureadmin/utils';
+import { getMenuType } from '@/views/menu/utils/hook';
+
+export const columns: TableColumnList = [
+	{
+		label: '菜单名称',
+		prop: 'title',
+		align: 'left',
+		cellRenderer: ({ row }) => (
+			<>
+				<span class='inline-block mr-1'>
+					{h(useRenderIcon(row.icon), {
+						style: { paddingTop: '1px' },
+					})}
+				</span>
+				<span>{$t(row.title)}</span>
+			</>
+		),
+	},
+	{
+		label: '菜单类型',
+		prop: 'menuType',
+		width: 100,
+		cellRenderer: ({ row, props }) => (
+			<el-tag size={props.size} type={getMenuType(row.menuType)} effect='plain'>
+				{getMenuType(row.menuType, true)}
+			</el-tag>
+		),
+	},
+	{ label: '路由路径', prop: 'path' },
+	{
+		label: '组件路径',
+		prop: 'component',
+		formatter: ({ path, component }) => (isAllEmpty(component) ? path : component),
+	},
+	{ label: '权限标识', prop: 'auths' },
+	{ label: '排序', prop: 'rank', width: 100 },
+	{
+		label: '隐藏',
+		prop: 'showLink',
+		formatter: ({ showLink }) => (showLink ? '否' : '是'),
+		width: 100,
+	},
+	{ label: '操作', fixed: 'right', width: 210, slot: 'operation' },
+];
+
+/** 自定义表单规则校验 */
+export const formRules = reactive<FormRules>({
+	title: [{ required: true, message: '菜单名称为必填项', trigger: 'blur' }],
+	name: [{ required: true, message: '路由名称为必填项', trigger: 'blur' }],
+	path: [{ required: true, message: '路由路径为必填项', trigger: 'blur' }],
+	auths: [{ required: true, message: '权限标识为必填项', trigger: 'blur' }],
+});

src/views/menu/utils/types.ts

@@ -10,11 +10,8 @@ interface FormItemProps {
 	rank: number;
 	redirect: string;
 	icon: string;
-	extraIcon: string;
 	enterTransition: string;
 	leaveTransition: string;
-	activePath: string;
-	auths: string;
 	frameSrc: string;
 	frameLoading: boolean;
 	keepAlive: boolean;