一些东西

h5/src/components/role/codes.vue

@@ -16,7 +16,6 @@
 import { update, codes as getCodes } from '/@/api/role'
 import type { Role } from '/@/api/role'
 import { ref, onMounted } from 'vue'
-import type { ElTreeV2 } from 'element-plus'
 import { ElMessage } from 'element-plus'
 import { throttle } from 'lodash';
 

h5/src/components/role/edit.vue

@@ -1,8 +1,8 @@
 <template>
     <el-dialog :modelValue="modelValue" @close="$emit('update:modelValue', false)" :title="type === 'create' ? '新增角色' : '编辑角色'">
         <el-form :model="role" lable-width="100px">
-            <el-form-item label="名字">
-                <el-input v-model="role.name" />
+            <el-form-item label="角色名" prop="name" :rules="{ required: true, message: '请填写角色名', trigger: 'blur' }">
+                <el-input v-model="role.name" placeholder="请填写角色名" />
             </el-form-item>
             <el-form-item label="是否启用">
                 <el-switch v-model="role.valid" :active-value="1" :inactive-value="0" />

h5/src/layout/component/main.vue

@@ -9,7 +9,7 @@
 			<LayoutParentView />
 			<LayoutFooter v-if="isFooter" />
 		</el-scrollbar>
-		<el-backtop :target="setBacktopClass" />
+		<el-backtop />
 	</el-main>
 </template>
 
@@ -41,11 +41,6 @@ const isFooter = computed(() => {
 const isFixedHeader = computed(() => {
 	return themeConfig.value.isFixedHeader;
 });
-// 设置 Backtop 回到顶部
-const setBacktopClass = computed(() => {
-	if (themeConfig.value.isFixedHeader) return `.layout-backtop-header-fixed .el-scrollbar__wrap`;
-	else return `.layout-backtop .el-scrollbar__wrap`;
-});
 // 设置主内容区的高度
 const setMainHeight = computed(() => {
 	if (isTagsViewCurrenFull.value) return '0px';

h5/src/layout/routerView/parent.vue

@@ -1,108 +1,116 @@
 <template>
-	<div class="layout-parent">
-		<router-view v-slot="{ Component }">
-			<transition :name="setTransitionName" mode="out-in">
-				<keep-alive :include="getKeepAliveNames">
-					<component :is="Component" :key="state.refreshRouterViewKey" class="w100" v-show="!isIframePage" />
-				</keep-alive>
-			</transition>
-		</router-view>
-		<transition :name="setTransitionName" mode="out-in">
-			<Iframes class="w100" v-show="isIframePage" :refreshKey="state.iframeRefreshKey" :name="setTransitionName" :list="state.iframeList" />
-		</transition>
-	</div>
+    <div class="layout-parent">
+        <router-view v-slot="{ Component }">
+            <transition :name="setTransitionName" mode="out-in">
+                <keep-alive :include="getKeepAliveNames">
+                    <Suspense>
+                        <!-- 主要内容 -->
+                        <component :is="Component" :key="state.refreshRouterViewKey" class="w100" v-show="!isIframePage" />
+                        <!-- 加载中状态 -->
+                        <template #fallback>
+                            正在加载...
+                        </template>
+                    </Suspense>
+                </keep-alive>
+            </transition>
+        </router-view>
+        <transition :name="setTransitionName" mode="out-in">
+            <Iframes class="w100" v-show="isIframePage" :refreshKey="state.iframeRefreshKey" :name="setTransitionName"
+                :list="state.iframeList" />
+        </transition>
+    </div>
 </template>
 
 <script setup lang="ts" name="layoutParentView">
-import { defineAsyncComponent, computed, reactive, onBeforeMount, onUnmounted, nextTick, watch, onMounted } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { storeToRefs } from 'pinia';
-import { useKeepALiveNames } from '/@/stores/keepAliveNames';
-import { useThemeConfig } from '/@/stores/themeConfig';
-import { Session } from '/@/utils/storage';
-import mittBus from '/@/utils/mitt';
+import { defineAsyncComponent, computed, reactive, onBeforeMount, onUnmounted, nextTick, watch, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { storeToRefs } from 'pinia'
+import { useKeepALiveNames } from '/@/stores/keepAliveNames'
+import { useThemeConfig } from '/@/stores/themeConfig'
+import { Session } from '/@/utils/storage'
+import mittBus from '/@/utils/mitt'
 
 // 引入组件
-const Iframes = defineAsyncComponent(() => import('/@/layout/routerView/iframes.vue'));
+const Iframes = defineAsyncComponent(() => import('/@/layout/routerView/iframes.vue'))
 
 // 定义变量内容
-const route = useRoute();
-const router = useRouter();
-const storesKeepAliveNames = useKeepALiveNames();
-const storesThemeConfig = useThemeConfig();
-const { keepAliveNames, cachedViews } = storeToRefs(storesKeepAliveNames);
-const { themeConfig } = storeToRefs(storesThemeConfig);
+const route = useRoute()
+const router = useRouter()
+const storesKeepAliveNames = useKeepALiveNames()
+const storesThemeConfig = useThemeConfig()
+const { keepAliveNames, cachedViews } = storeToRefs(storesKeepAliveNames)
+const { themeConfig } = storeToRefs(storesThemeConfig)
 const state = reactive<ParentViewState>({
-	refreshRouterViewKey: '', // 非 iframe tagsview 右键菜单刷新时
-	iframeRefreshKey: '', // iframe tagsview 右键菜单刷新时
-	keepAliveNameList: [],
-	iframeList: [],
-});
+    refreshRouterViewKey: '', // 非 iframe tagsview 右键菜单刷新时
+    iframeRefreshKey: '', // iframe tagsview 右键菜单刷新时
+    keepAliveNameList: [],
+    iframeList: [],
+})
 
 // 设置主界面切换动画
 const setTransitionName = computed(() => {
-	return themeConfig.value.animation;
-});
+    return themeConfig.value.animation
+})
 // 获取组件缓存列表(name值)
 const getKeepAliveNames = computed(() => {
-	return themeConfig.value.isTagsview ? cachedViews.value : state.keepAliveNameList;
-});
+    return themeConfig.value.isTagsview ? cachedViews.value : state.keepAliveNameList
+})
 // 设置 iframe 显示/隐藏
 const isIframePage = computed(() => {
-	return route.meta.isIframe;
-});
+    return route.meta.isIframe
+})
 // 获取 iframe 组件列表(未进行渲染)
 const getIframeListRoutes = async () => {
-	router.getRoutes().forEach((v) => {
-		if (v.meta.isIframe) {
-			v.meta.isIframeOpen = false;
-			v.meta.loading = true;
-			state.iframeList.push({ ...v });
-		}
-	});
-};
+    router.getRoutes().forEach((v) => {
+        if (v.meta.isIframe) {
+            v.meta.isIframeOpen = false
+            v.meta.loading = true
+            state.iframeList.push({ ...v })
+        }
+    })
+}
 // 页面加载前，处理缓存，页面刷新时路由缓存处理
 onBeforeMount(() => {
-	state.keepAliveNameList = keepAliveNames.value;
-	mittBus.on('onTagsViewRefreshRouterView', (fullPath: string) => {
-		state.keepAliveNameList = keepAliveNames.value.filter((name: string) => route.name !== name);
-		state.refreshRouterViewKey = '';
-		state.iframeRefreshKey = '';
-		nextTick(() => {
-			state.refreshRouterViewKey = fullPath;
-			state.iframeRefreshKey = fullPath;
-			state.keepAliveNameList = keepAliveNames.value;
-		});
-	});
-});
+    state.keepAliveNameList = keepAliveNames.value
+    mittBus.on('onTagsViewRefreshRouterView', (fullPath: string) => {
+        state.keepAliveNameList = keepAliveNames.value.filter((name: string) => route.name !== name)
+        state.refreshRouterViewKey = ''
+        state.iframeRefreshKey = ''
+        nextTick(() => {
+            state.refreshRouterViewKey = fullPath
+            state.iframeRefreshKey = fullPath
+            state.keepAliveNameList = keepAliveNames.value
+        })
+    })
+})
 // 页面加载时
 onMounted(() => {
-	getIframeListRoutes();
-	// https://gitee.com/lyt-top/vue-next-admin/issues/I58U75
-	// https://gitee.com/lyt-top/vue-next-admin/issues/I59RXK
-	// https://gitee.com/lyt-top/vue-next-admin/pulls/40
-	nextTick(() => {
-		setTimeout(() => {
-			if (themeConfig.value.isCacheTagsView) {
-				let tagsViewArr: RouteItem[] = Session.get('tagsViewList') || [];
-				cachedViews.value = tagsViewArr.filter((item) => item.meta?.isKeepAlive).map((item) => item.name as string);
-			}
-		}, 0);
-	});
-});
+    getIframeListRoutes()
+    // https://gitee.com/lyt-top/vue-next-admin/issues/I58U75
+    // https://gitee.com/lyt-top/vue-next-admin/issues/I59RXK
+    // https://gitee.com/lyt-top/vue-next-admin/pulls/40
+    nextTick(() => {
+        setTimeout(() => {
+            if (themeConfig.value.isCacheTagsView) {
+                let tagsViewArr: RouteItem[] = Session.get('tagsViewList') || []
+                cachedViews.value = tagsViewArr.filter((item) => item.meta?.isKeepAlive).map((item) => item.name as string)
+            }
+        }, 0)
+    })
+})
 // 页面卸载时
 onUnmounted(() => {
-	mittBus.off('onTagsViewRefreshRouterView', () => {});
-});
+    mittBus.off('onTagsViewRefreshRouterView', () => { })
+})
 // 监听路由变化，防止 tagsView 多标签时，切换动画消失
 // https://toscode.gitee.com/lyt-top/vue-next-admin/pulls/38/files
 watch(
-	() => route.fullPath,
-	() => {
-		state.refreshRouterViewKey = decodeURI(route.fullPath);
-	},
-	{
-		immediate: true,
-	}
-);
+    () => route.fullPath,
+    () => {
+        state.refreshRouterViewKey = decodeURI(route.fullPath)
+    },
+    {
+        immediate: true,
+    }
+)
 </script>

h5/src/stores/themeConfig.ts

@@ -87,11 +87,11 @@ export const useThemeConfig = defineStore('themeConfig', {
 			// 是否开启 Tagsview
 			isTagsview: true,
 			// 是否开启 Breadcrumb 图标
-			isBreadcrumbIcon: false,
+			isBreadcrumbIcon: true,
 			// 是否开启 Tagsview 图标
-			isTagsviewIcon: false,
+            isTagsviewIcon: true,
 			// 是否开启 TagsView 缓存
-			isCacheTagsView: false,
+            isCacheTagsView: true,
 			// 是否开启 TagsView 拖拽
 			isSortableTagsView: true,
 			// 是否开启 TagsView 共用

h5/src/views/admin/role/index.vue

@@ -1,29 +1,31 @@
 <template>
-    <Codes v-if="isShowCodesEditForm" v-model="isShowCodesEditForm" :role="editRole" @submit="() => reflush(false)" />
-    <Edit v-model="isShowRoleEditForm" :role="editRole" :type="editType" @submit="() => reflush(false)" />
     <div>
-        <el-card class="box-card" v-loading="wholeLoading" element-loading-text="Loading..." style="height: 600px">
-            <template #header>
-                <div class="card-header">
-                    <span>权限管理</span>
-                    <div>
-                        <el-button type="default" @click="reflush()" v-loading="reflushLoading">刷新列表</el-button>
-                        <el-button type="primary" @click="showEditDialog('create')">新增角色</el-button>
+        <Codes v-if="isShowCodesEditForm" v-model="isShowCodesEditForm" :role="editRole" @submit="() => reflush(false)" />
+        <Edit v-if="isShowRoleEditForm" v-model="isShowRoleEditForm" :role="editRole" :type="editType"
+            @submit="() => reflush(false)" />
+        <div>
+            <el-card class="box-card" v-loading="wholeLoading" element-loading-text="Loading..." style="height: 600px">
+                <template #header>
+                    <div class="card-header">
+                        <span>权限管理</span>
+                        <div>
+                            <el-button type="default" @click="reflush()" v-loading="reflushLoading">刷新列表</el-button>
+                            <el-button type="primary" @click="showEditDialog('create')">新增角色</el-button>
+                        </div>
                     </div>
-                </div>
-            </template>
-            <el-auto-resizer>
-                <template #default="{ height, width }">
-                    <el-table-v2 :data="data" :columns="columns" :width="width" :height="600" fixed />
                 </template>
-            </el-auto-resizer>
-        </el-card>
-        <el-alert class="box-card" title="目前该页面切换到其他页面会发生页面丢失的现象，正在排查原因，如遇到该问题，请刷新后再使用" type="warning" effect="light" />
+                <el-auto-resizer>
+                    <template #default="{ height, width }">
+                        <el-table-v2 :data="data" :columns="columns" :width="width" :height="600" fixed />
+                    </template>
+                </el-auto-resizer>
+            </el-card>
+        </div>
     </div>
 </template>
 
 <script lang="tsx" setup>
-import { ref} from 'vue'
+import { ref } from 'vue'
 import { ElTag, ElMessage, ElButton, TableV2FixedDir } from 'element-plus'
 import type { Column } from 'element-plus'
 import { clone, throttle } from 'lodash'
@@ -160,7 +162,7 @@ const reflush = async (msg = true) => {
     reflushLoading.value = false
 
     if (result.code != 0) return
-    if (msg) ElMessage({message: '刷新成功'})
+    if (msg) ElMessage({ message: '刷新成功' })
     data.value = result.data
 }