页面基本框架

src/App.vue

@@ -5,8 +5,8 @@
   <el-config-provider namespace="ep">
     <BaseHeader />
     <div class="main-container flex">
-      <BaseSide />
+      <!-- <BaseSide /> -->
-      <div w="full" py="4">
+      <div w="full" py="0">
         <RouterView />
       </div>
     </div>

src/components.d.ts

@@ -10,18 +10,31 @@ declare module 'vue' {
   export interface GlobalComponents {
     BaseHeader: typeof import('./components/layouts/BaseHeader.vue')['default']
     BaseSide: typeof import('./components/layouts/BaseSide.vue')['default']
+    BaseSide_bak: typeof import('./components/layouts/BaseSide_bak.vue')['default']
+    copy: typeof import('./components/layouts/BaseSide copy.vue')['default']
+    ElAside: typeof import('element-plus/es')['ElAside']
+    ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
+    ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCard: typeof import('element-plus/es')['ElCard']
+    ElCol: typeof import('element-plus/es')['ElCol']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
+    ElContainer: typeof import('element-plus/es')['ElContainer']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
+    ElForItem: typeof import('element-plus/es')['ElForItem']
+    ElHeader: typeof import('element-plus/es')['ElHeader']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElInput: typeof import('element-plus/es')['ElInput']
+    ElMain: typeof import('element-plus/es')['ElMain']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup']
+    ElRow: typeof import('element-plus/es')['ElRow']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTag: typeof import('element-plus/es')['ElTag']
     HelloWorld: typeof import('./components/HelloWorld.vue')['default']
+    Left_bar: typeof import('./components/hazard_inspect/left_bar.vue')['default']
     Logos: typeof import('./components/Logos.vue')['default']
     MessageBoxDemo: typeof import('./components/MessageBoxDemo.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

src/components/layouts/BaseHeader.vue

@@ -9,10 +9,10 @@ import { toggleDark } from '~/composables'
     <el-menu-item index="/">
       <div class="flex items-center justify-center gap-2">
         <div class="text-xl" i-ep-element-plus />
-        <span>Element Plus</span>
+        <span>安责险隐患检查</span>
       </div>
     </el-menu-item>
-    <el-sub-menu index="2">
+    <!-- <el-sub-menu index="2">
       <template #title>
         Workspace
       </template>
@@ -45,7 +45,7 @@ import { toggleDark } from '~/composables'
     </el-menu-item>
     <el-menu-item index="4">
       Orders
-    </el-menu-item>
+    </el-menu-item> -->
 
     <el-menu-item h="full" @click="toggleDark()">
       <button
@@ -56,11 +56,11 @@ import { toggleDark } from '~/composables'
       </button>
     </el-menu-item>
 
-    <el-menu-item h="full">
+    <!-- <el-menu-item h="full">
       <a class="size-full flex items-center justify-center" :href="repository.url" target="_blank">
         <div i-ri-github-fill />
       </a>
-    </el-menu-item>
+    </el-menu-item> -->
   </el-menu>
 </template>
 

src/components/layouts/BaseSide.vue

@@ -25,60 +25,12 @@ function handleClose(key: string, keyPath: string[]) {
     @open="handleOpen"
     @close="handleClose"
   >
-    <el-sub-menu index="1">
+    <el-menu-item index="/nav/1_隐患检查">
-      <template #title>
-        <el-icon>
-          <Location />
-        </el-icon>
-        <span>Navigator One</span>
-      </template>
-      <el-menu-item-group>
-        <template #title>
-          <span>Group One</span>
-        </template>
-        <el-menu-item index="/nav/1/item-1">
-          item one
-        </el-menu-item>
-        <el-menu-item index="1-2">
-          item two
-        </el-menu-item>
-      </el-menu-item-group>
-      <el-menu-item-group title="Group Two">
-        <el-menu-item index="1-3">
-          item three
-        </el-menu-item>
-      </el-menu-item-group>
-      <el-sub-menu index="1-4">
-        <template #title>
-          <span>item four</span>
-        </template>
-        <el-menu-item index="1-4-1">
-          item one
-        </el-menu-item>
-      </el-sub-menu>
-    </el-sub-menu>
-    <el-menu-item index="/nav/2">
       <el-icon>
         <IconMenu />
       </el-icon>
       <template #title>
-        Navigator Two
+        隐患检查
-      </template>
-    </el-menu-item>
-    <el-menu-item index="3" disabled>
-      <el-icon>
-        <Document />
-      </el-icon>
-      <template #title>
-        Navigator Three
-      </template>
-    </el-menu-item>
-    <el-menu-item index="/nav/4">
-      <el-icon>
-        <Setting />
-      </el-icon>
-      <template #title>
-        Navigator Four
       </template>
     </el-menu-item>
   </el-menu>

src/components/layouts/BaseSide_bak.vue

@@ -0,0 +1,85 @@
+<script lang="ts" setup>
+import {
+  Document,
+  Menu as IconMenu,
+  Location,
+  Setting,
+} from '@element-plus/icons-vue'
+
+// const isCollapse = ref(true)
+function handleOpen(key: string, keyPath: string[]) {
+  // eslint-disable-next-line no-console
+  console.log(key, keyPath)
+}
+function handleClose(key: string, keyPath: string[]) {
+  // eslint-disable-next-line no-console
+  console.log(key, keyPath)
+}
+</script>
+
+<template>
+  <el-menu
+    router
+    default-active="1"
+    class="el-menu-vertical-demo"
+    @open="handleOpen"
+    @close="handleClose"
+  >
+    <el-sub-menu index="1">
+      <template #title>
+        <el-icon>
+          <Location />
+        </el-icon>
+        <span>Navigator One</span>
+      </template>
+      <el-menu-item-group>
+        <template #title>
+          <span>Group One</span>
+        </template>
+        <el-menu-item index="/nav/1/item-1">
+          item one
+        </el-menu-item>
+        <el-menu-item index="1-2">
+          item two
+        </el-menu-item>
+      </el-menu-item-group>
+      <el-menu-item-group title="Group Two">
+        <el-menu-item index="1-3">
+          item three
+        </el-menu-item>
+      </el-menu-item-group>
+      <el-sub-menu index="1-4">
+        <template #title>
+          <span>item four</span>
+        </template>
+        <el-menu-item index="1-4-1">
+          item one
+        </el-menu-item>
+      </el-sub-menu>
+    </el-sub-menu>
+    <el-menu-item index="/nav/2">
+      <el-icon>
+        <IconMenu />
+      </el-icon>
+      <template #title>
+        Navigator Two
+      </template>
+    </el-menu-item>
+    <el-menu-item index="3" disabled>
+      <el-icon>
+        <Document />
+      </el-icon>
+      <template #title>
+        Navigator Three
+      </template>
+    </el-menu-item>
+    <el-menu-item index="/nav/4">
+      <el-icon>
+        <Setting />
+      </el-icon>
+      <template #title>
+        Navigator Four
+      </template>
+    </el-menu-item>
+  </el-menu>
+</template>

src/pages/index.vue

@@ -1,4 +1,14 @@
 <template>
-  <Logos my="4" />
+  <!-- <Logos my="4" />
-  <HelloWorld msg="Hello Vue 3 + Element Plus + Vite" />
+  <HelloWorld msg="Hello Vue 3 + Element Plus + Vite" /> -->
+  <div class="container mx-auto">
+    <div class="py-8 text-center text-4xl font-bold">
+      安责险隐患检查
+    </div>
+    <div class="grid grid-cols-3 gap-4">
+      <el-button class="bg-gray-200 p-4" @click="$router.push('/nav/1_隐患检查')">
+        隐患检查
+      </el-button>
+    </div>
+  </div>
 </template>

src/pages/nav/1/item-1.vue

@@ -1,5 +0,0 @@
-<template>
-  <div>
-    Item One
-  </div>
-</template>

src/pages/nav/1_隐患检查.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { dividerProps } from 'element-plus/lib'
+import { ref } from 'vue'
+
+const 隐患列表 = ref(['隐患1', '隐患2', '隐患3', '隐患4', '隐患5'])
+const 物体列表 = ref(['物体1', '物体2', '物体3', '物体4', '物体5'])
+</script>
+
+<template>
+  <!-- 最外层容器：占满整个视口 -->
+  <el-container style="margin: 0; height: 100%; flex-direction: column;">
+    <el-header style="height: 60px; display: flex; align-items: center;">
+      <el-breadcrumb separator="/">
+        <el-breadcrumb-item :to="{ path: '/' }">
+          主页
+        </el-breadcrumb-item>
+        <el-breadcrumb-item>隐患检查</el-breadcrumb-item>
+      </el-breadcrumb>
+    </el-header>
+    <div class="line" />
+
+    <!-- 内层容器：自动填充剩余高度 -->
+    <el-container style="flex: 1; min-height: 0;">
+      <el-aside width="200px" style="border-right: 1px solid var(--ep-border-color);">
+        <el-row class="flex flex-col">
+          <el-row style="min-height: 20px;">
+            隐患列表
+          </el-row>
+          <el-row style="flex: 1; overflow-y: auto;">
+            <el-row v-for="item in 隐患列表" :key="item">
+              <el-button>
+                {{ item }}
+              </el-button>
+            </el-row>
+          </el-row>
+        </el-row>
+        <div class="line" />
+        <el-row>物体列表</el-row>
+        <el-row style="flex: 1; overflow-y: auto;">
+          <el-row v-for="item in 物体列表" :key="item">
+            <el-button>
+              {{ item }}
+            </el-button>
+          </el-row>
+        </el-row>
+      </el-aside>
+      <el-main style="border-right: 1px solid var(--ep-border-color); padding: 0;">
+        <div class="vid_box">
+          视频区
+        </div>
+        <div class="line" />
+        <div class="vid_track">
+          轨道
+        </div>
+      </el-main>
+      <el-aside width="300px">
+        <div class="text-left">
+          隐患描述
+        </div>
+        <div class="text-left">
+          依据
+        </div>
+        <div class="text-left">
+          整改建议
+        </div>
+      </el-aside>
+    </el-container>
+  </el-container>
+</template>
+
+<style scoped lang="scss">
+.line {
+  width: 100%;
+  height: 1px;
+  border-top: 1px solid var(--ep-border-color);
+}
+
+.left {
+}
+</style>

src/pages/nav/2.vue

@@ -1,5 +0,0 @@
-<template>
-  <div>
-    Navigation 2
-  </div>
-</template>

src/pages/nav/4.vue

@@ -1,5 +0,0 @@
-<template>
-  <div>
-    Navigation 4
-  </div>
-</template>

src/styles/element/index.scss

@@ -1,6 +1,6 @@
 $--colors: (
   'primary': (
-    'base': green,
+    'base': #409eff,
   ),
   'success': (
     'base': #21ba45,

src/typed-router.d.ts

@@ -19,8 +19,6 @@ declare module 'vue-router/auto-routes' {
    */
   export interface RouteNamedMap {
     '/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>,
-    '/nav/1/item-1': RouteRecordInfo<'/nav/1/item-1', '/nav/1/item-1', Record<never, never>, Record<never, never>>,
+    '/nav/1_隐患检查': RouteRecordInfo<'/nav/1_隐患检查', '/nav/1_隐患检查', Record<never, never>, Record<never, never>>,
-    '/nav/2': RouteRecordInfo<'/nav/2', '/nav/2', Record<never, never>, Record<never, never>>,
-    '/nav/4': RouteRecordInfo<'/nav/4', '/nav/4', Record<never, never>, Record<never, never>>,
   }
 }