详情页统一添加返回

auto-imports.d.ts

@@ -1,5 +1,5 @@
 // Generated by 'unplugin-auto-import'
 export {}
 declare global {
-  const ElMessage: typeof import('element-plus/es')['ElMessage']
+
 }

components.d.ts

@@ -21,6 +21,7 @@ declare module '@vue/runtime-core' {
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
+    ElPageHeader: typeof import('element-plus/es')['ElPageHeader']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElPopover: typeof import('element-plus/es')['ElPopover']
     ElProgress: typeof import('element-plus/es')['ElProgress']

src/layout/app/index.vue

@@ -1,13 +1,28 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import AppHeader from './components/AppHeader/index.vue';
 import AppSider from './components/AppSider/index.vue';
+import { useRouter, useRoute } from 'vue-router';
 
 // import Breadcrumb from '~/components/Breadcrumb/index.vue';
 // import AppMain from './components/AppMain/index.vue';
+
+const router = useRouter();
+function goBack() {
+  router.go(-1);
+}
+
+const route = useRoute();
+const isShowHeader = computed(() => {
+  return (!route?.meta?.hidden) && (route?.meta?.back || route?.name?.endsWith('DETAIL') || route?.meta?.title?.includes('详情'))
+});
+
+const headerContent = computed(() => {
+  return route?.query?.header ?? '详情页面';
+});
 </script>
 
 <template>
-
   <div class="flex flex-col w-screen h-screen">
     <header class="w-full flex-none bg-hex-265CD4">
       <AppHeader></AppHeader>
@@ -22,7 +37,9 @@ import AppSider from './components/AppSider/index.vue';
       <main class="flex-auto flex flex-col overflow-hidden">
         <div class="w-full h-full">
           <!-- <Breadcrumb class="flex-none mb-4"></Breadcrumb> -->
-
+          <div class="py-3 mx-10px mt-10px border-b" v-if="isShowHeader">
+            <el-page-header @back="goBack" :content="headerContent" class="text-base" />
+          </div>
           <el-scrollbar always wrap-class="w-full h-full box-border" view-class="relative h-full flex flex-col p-4">
             <router-view></router-view>
           </el-scrollbar>
@@ -30,6 +47,5 @@ import AppSider from './components/AppSider/index.vue';
       </main>
     </div>
   </div>
-
 </template>
 

src/router/index.ts

@@ -2,8 +2,8 @@ import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
 import { app_ready, app_routes } from '~/store/app';
 import { RouteRecordDetailRaw } from './routes.d';
 
-// import localRoutes, { title } from './routes/xdjx';
-import localRoutes, { title } from './routes/xdjy';
+import localRoutes, { title } from './routes/xdjx';
+// import localRoutes, { title } from './routes/xdjy';
 // import localRoutes, { title } from './routes/xdhq';
 
 document.title = title

src/styles/element/index.scss

@@ -12,4 +12,10 @@
   .cell{
     font-weight: normal;
   }
+}
+
+.el-page-header {
+  .el-page-header__title {
+    font-size: 16px;
+  }
 }