AnzezxianxHazardInspectAI
/
HazardInspectUI
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

页面基本框架

This commit is contained in:
yueliuli 2026-04-15 11:16:04 +08:00
parent 1c5168f8a1
commit ad1ad1354c
13 changed files with 201 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.vue
View File

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

13
src/components.d.ts vendored
View File

@ -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']

0
src/components/hazard_inspect/left_bar.vue Normal file
View File

10
src/components/layouts/BaseHeader.vue
View File

@ -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>

52
src/components/layouts/BaseSide.vue
View File

@ -25,60 +25,12 @@ function handleClose(key: string, keyPath: string[]) {
@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-menu-item index="/nav/1_隐患检查">
<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>

85
src/components/layouts/BaseSide_bak.vue Normal file
View File

@ -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>

14
src/pages/index.vue
View File

@ -1,4 +1,14 @@
<template>
<Logos my="4" />
<HelloWorld msg="Hello Vue 3 + Element Plus + Vite" />
<!-- <Logos my="4" />
<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>

5
src/pages/nav/1/item-1.vue
View File

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

80
src/pages/nav/1_隐患检查.vue Normal file
View File

@ -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>

5
src/pages/nav/2.vue
View File

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

5
src/pages/nav/4.vue
View File

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

2
src/styles/element/index.scss
View File

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

4
src/typed-router.d.ts vendored
View File

@ -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/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>>,
'/nav/1_隐患检查': RouteRecordInfo<'/nav/1_隐患检查', '/nav/1_隐患检查', Record<never, never>, Record<never, never>>,
}
}