初始化：静态菜单版 数据大屏管理系统，对接KLPL3数据库

src/layout/components/Breadcrumb/index.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="breadcrumb-wrapper">
+    <el-breadcrumb separator="/">
+      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+      <template v-for="item in levelList" :key="item.path">
+        <el-breadcrumb-item v-if="item.meta?.title && (item.meta.breadcrumb === undefined || item.meta.breadcrumb === true)" :to="item.path !== route.path ? { path: item.path } : ''">
+          {{ item.meta.title }}
+        </el-breadcrumb-item>
+      </template>
+    </el-breadcrumb>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+
+const levelList = computed(() => {
+  const matched = route.matched.filter(item => item.meta?.title)
+  return matched
+})
+</script>
+
+<style lang="scss" scoped>
+.breadcrumb-wrapper {
+  background: #ffffff;
+  padding: 10px 20px;
+  border-bottom: 1px solid #e4e4e4;
+  margin-top: 48px;
+}
+
+:deep(.el-breadcrumb) {
+  font-size: 13px;
+}
+
+:deep(.el-breadcrumb__item) {
+  color: #666666;
+
+  &:hover {
+    color: #4a90d9;
+  }
+}
+
+:deep(.el-breadcrumb__item:last-child) {
+  color: #333333;
+  font-weight: 500;
+}
+
+:deep(.el-breadcrumb__separator) {
+  color: #cccccc;
+  margin: 0 8px;
+}
+</style>

src/layout/components/Navbar/Hamburger.vue

@@ -0,0 +1,59 @@
+<template>
+  <button class="hamburger" @click="toggleClick">
+    <span class="hamburger-inner"></span>
+  </button>
+</template>
+
+<script setup>
+const emit = defineEmits(['toggle-click'])
+
+const toggleClick = () => {
+  emit('toggle-click')
+}
+</script>
+
+<style lang="scss" scoped>
+.hamburger {
+  display: inline-block;
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+  padding: 0;
+  margin: 0;
+  outline: none;
+
+  &:hover {
+    opacity: 0.7;
+  }
+}
+
+.hamburger-inner {
+  display: block;
+  width: 20px;
+  height: 2px;
+  background-color: #606266;
+  border-radius: 1px;
+  position: relative;
+  transition: all 0.3s ease;
+
+  &::before,
+  &::after {
+    content: '';
+    display: block;
+    width: 20px;
+    height: 2px;
+    background-color: #606266;
+    border-radius: 1px;
+    position: absolute;
+    transition: all 0.3s ease;
+  }
+
+  &::before {
+    top: -6px;
+  }
+
+  &::after {
+    bottom: -6px;
+  }
+}
+</style>

src/layout/components/Navbar/index.vue

@@ -0,0 +1,116 @@
+<template>
+  <nav class="navbar">
+    <div class="navbar-left">
+      <hamburger @toggle-click="toggleSideBar" />
+      <span class="navbar-title">{{ title }}</span>
+    </div>
+    <div class="navbar-right">
+      <el-button link icon="Search" class="nav-btn">搜索</el-button>
+      <el-button link icon="Refresh" class="nav-btn">刷新</el-button>
+      <el-button link icon="FullScreen" class="nav-btn">全屏</el-button>
+      <el-button link icon="Bell" class="nav-btn">
+        <span class="badge">3</span>
+      </el-button>
+      <div class="user-info">
+        <el-icon><User /></el-icon>
+        <span>管理员</span>
+      </div>
+    </div>
+  </nav>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useStore } from 'vuex'
+import { User } from '@element-plus/icons-vue'
+import Hamburger from './Hamburger.vue'
+
+const store = useStore()
+
+const title = computed(() => store.state.settings.title)
+
+const toggleSideBar = () => {
+  store.dispatch('app/toggleSideBar')
+}
+</script>
+
+<style lang="scss" scoped>
+.navbar {
+  height: 50px;
+  background: linear-gradient(90deg, #20b6f9, #2178f1);
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 200px;
+  z-index: 100;
+  transition: left 0.28s ease;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px;
+
+  .app-wrapper.sidebar-close & {
+    left: 54px;
+  }
+}
+
+.navbar-left {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.navbar-title {
+  font-size: 18px;
+  font-weight: bold;
+  color: #ffffff;
+}
+
+.navbar-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.nav-btn {
+  width: 36px;
+  height: 36px;
+  border-radius: 4px;
+  color: #ffffff;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.2);
+  }
+
+  .badge {
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    min-width: 16px;
+    height: 16px;
+    line-height: 16px;
+    font-size: 12px;
+    background: #f56c6c;
+    color: #fff;
+    border-radius: 8px;
+    text-align: center;
+  }
+}
+
+.user-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 12px;
+  height: 36px;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 4px;
+  font-size: 14px;
+  color: #ffffff;
+  margin-left: 8px;
+
+  :deep(.el-icon) {
+    color: #ffffff;
+  }
+}
+</style>

src/layout/components/Sidebar/Logo.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="sidebar-logo-container">
+    <router-link class="sidebar-logo-link" to="/">
+      <div class="sidebar-logo">📊</div>
+      <h1 v-show="!collapse" class="sidebar-title">{{ title }}</h1>
+    </router-link>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  collapse: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const title = '数据大屏管理系统'
+</script>
+
+<style lang="scss" scoped>
+.sidebar-logo-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  background: #2b3848;
+  border-bottom: 1px solid #233040;
+}
+
+.sidebar-logo-link {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+}
+
+.sidebar-logo {
+  font-size: 24px;
+  margin-right: 8px;
+}
+
+.sidebar-title {
+  font-size: 14px;
+  font-weight: bold;
+  color: #fff;
+  white-space: nowrap;
+  margin: 0;
+}
+</style>

src/layout/components/Sidebar/SidebarItem.vue

@@ -0,0 +1,31 @@
+<template>
+  <div v-if="item.children?.length">
+    <el-sub-menu :index="item.path">
+      <template #title>
+        <component :is="item.icon" class="svg-icon" />
+        <span>{{ item.meta?.title || item.title }}</span>
+      </template>
+      <sidebar-item v-for="child in item.children" :key="child.path" :item="child" />
+    </el-sub-menu>
+  </div>
+  <el-menu-item v-else :index="item.path">
+    <component :is="item.icon" class="svg-icon" />
+    <span>{{ item.meta?.title || item.title }}</span>
+  </el-menu-item>
+</template>
+
+<script setup>
+defineProps({
+  item: {
+    type: Object,
+    required: true
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.svg-icon {
+  font-size: 18px;
+  margin-right: 8px;
+}
+</style>

src/layout/components/Sidebar/index.vue

@@ -0,0 +1,276 @@
+<template>
+  <div :class="['sidebar-container', { 'is-collapse': !sidebar.opened }]">
+    <div class="sidebar-header">
+      <div class="logo-wrapper">
+        <span class="logo-icon">📊</span>
+        <span v-show="sidebar.opened" class="logo-text">数据管理平台</span>
+      </div>
+    </div>
+    <el-scrollbar class="sidebar-scroll">
+      <el-menu
+        :default-active="activeMenu"
+        :collapse="!sidebar.opened"
+        mode="vertical"
+        class="sidebar-menu"
+        router
+        unique-opened
+      >
+        <template v-for="item in menuItems" :key="item.path">
+          <el-menu-item v-if="!item.children || item.children.length === 0" :index="item.path">
+            <el-icon :size="14"><component :is="getIcon(item.meta?.icon)" /></el-icon>
+            <span>{{ item.meta?.title }}</span>
+          </el-menu-item>
+          <el-sub-menu v-else :index="item.path">
+            <template #title>
+              <el-icon :size="14"><component :is="getIcon(item.meta?.icon)" /></el-icon>
+              <span>{{ item.meta?.title }}</span>
+            </template>
+            <template v-for="child in item.children" :key="child.path">
+              <el-menu-item v-if="!child.children || child.children.length === 0" :index="child.path">
+                <el-icon :size="12"><component :is="getIcon(child.meta?.icon)" /></el-icon>
+                <span>{{ child.meta?.title }}</span>
+              </el-menu-item>
+            </template>
+          </el-sub-menu>
+        </template>
+      </el-menu>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { useStore } from 'vuex'
+import { Refresh, FullScreen, User, Search } from '@element-plus/icons-vue'
+
+const route = useRoute()
+const store = useStore()
+
+const sidebar = computed(() => store.state.app.sidebar)
+const activeMenu = computed(() => route.path)
+
+const menuItems = [
+  {
+    path: '/index',
+    meta: { title: '工作台', icon: 'home' }
+  },
+  {
+    path: '/dashboard',
+    meta: { title: '数据大屏', icon: 'monitor' },
+    children: [
+      { path: '/dashboard/demo', meta: { title: '示例大屏', icon: 'chart' } },
+      { path: '/dashboard/order', meta: { title: '订单大屏', icon: 'chart' } },
+      { path: '/dashboard/cost', meta: { title: '成本大屏', icon: 'chart' } },
+      { path: '/dashboard/energy', meta: { title: '能源大屏', icon: 'monitor' } }
+    ]
+  },
+  {
+    path: '/screens',
+    meta: { title: '大屏管理', icon: 'layout' },
+    children: [
+      { path: '/screens', meta: { title: '大屏列表', icon: 'list' } },
+      { path: '/screens/acid-rolling', meta: { title: '酸轧数据大屏', icon: 'chart' } }
+    ]
+  },
+  {
+    path: '/reports',
+    meta: { title: '报表管理', icon: 'document' },
+    children: [
+      { path: '/reports', meta: { title: '报表列表', icon: 'list' } },
+      { path: '/reports/acid-rolling', meta: { title: '酸轧产出报表', icon: 'chart' } },
+      { path: '/reports/acid-stop', meta: { title: '酸轧停机报表', icon: 'settings' } }
+    ]
+  },
+  {
+    path: '/system',
+    meta: { title: '系统管理', icon: 'settings' },
+    children: [
+      { path: '/system/user', meta: { title: '用户管理', icon: 'user' } },
+      { path: '/system/role', meta: { title: '角色管理', icon: 'user' } },
+      { path: '/system/menu', meta: { title: '菜单管理', icon: 'user' } },
+      { path: '/system/config', meta: { title: '系统配置', icon: 'settings' } }
+    ]
+  },
+  {
+    path: '/data-source',
+    meta: { title: '数据源配置', icon: 'database' }
+  }
+]
+
+const iconMap = {
+  'home': Refresh,
+  'monitor': FullScreen,
+  'chart': Refresh,
+  'document': Search,
+  'settings': Refresh,
+  'database': FullScreen,
+  'user': User,
+  'lock': User,
+  'menu': Refresh,
+  'layout': FullScreen,
+  'list': Search
+}
+
+const getIcon = (iconName) => {
+  if (!iconName) return Refresh
+  return iconMap[iconName] || Refresh
+}
+</script>
+
+<style lang="scss" scoped>
+.sidebar-container {
+  width: 200px;
+  background: #333333;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1001;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  transition: width 0.28s ease;
+  border-right: 1px solid #444444;
+
+  &.is-collapse {
+    width: 54px;
+  }
+}
+
+.sidebar-header {
+  background: #2d2d2d;
+  padding: 12px 14px;
+  border-bottom: 1px solid #444444;
+
+  .logo-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+
+    .logo-icon {
+      font-size: 18px;
+    }
+
+    .logo-text {
+      font-size: 14px;
+      font-weight: 500;
+      color: #ffffff;
+      white-space: nowrap;
+    }
+  }
+}
+
+.sidebar-scroll {
+  flex: 1;
+  overflow-y: auto;
+
+  :deep(.el-scrollbar__wrap) {
+    overflow-x: hidden;
+  }
+}
+
+.sidebar-menu {
+  border: none;
+  background: transparent;
+  height: 100%;
+  padding: 4px 0;
+
+  :deep(.el-menu-item) {
+    color: #999999;
+    padding: 0 16px;
+    font-size: 13px;
+    height: 40px;
+    line-height: 40px;
+    margin: 0 6px;
+    border-radius: 4px;
+    margin-bottom: 2px;
+    transition: all 0.2s ease;
+    background: transparent;
+    position: relative;
+    border-left: 3px solid transparent;
+
+    &:hover {
+      background: #444444 !important;
+      color: #ffffff;
+    }
+
+    &.is-active {
+      background: #4a90d9 !important;
+      color: #ffffff;
+      font-weight: 600;
+      border-left: 3px solid #5F7BA0;
+    }
+  }
+
+  :deep(.el-sub-menu__title) {
+    color: #999999;
+    padding: 0 16px;
+    font-size: 13px;
+    height: 40px;
+    line-height: 40px;
+    margin: 0 6px;
+    border-radius: 4px;
+    margin-bottom: 2px;
+    transition: all 0.2s ease;
+    background: transparent;
+    position: relative;
+    border-left: 3px solid transparent;
+
+    &:hover {
+      background: #444444 !important;
+      color: #ffffff;
+    }
+
+    &.is-active {
+      background: #4a90d9 !important;
+      color: #ffffff;
+      font-weight: 600;
+      border-left: 3px solid #5F7BA0;
+    }
+  }
+
+  :deep(.el-sub-menu .el-menu-item) {
+    padding-left: 40px !important;
+    margin: 0;
+    border-radius: 0;
+    background: transparent;
+    border-left: none;
+
+    &:hover {
+      background: #3a3a3a !important;
+    }
+
+    &.is-active {
+      background: #3d5a7a !important;
+      border-left: 3px solid #5F7BA0;
+    }
+  }
+
+  :deep(.el-menu--popup) {
+    background: #3a3a3a !important;
+    border: 1px solid #444444;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
+    border-radius: 4px;
+
+    .el-menu-item {
+      color: #999999;
+      padding: 0 20px;
+      font-size: 13px;
+      height: 36px;
+      line-height: 36px;
+      border-left: none;
+
+      &:hover {
+        background: #444444 !important;
+        color: #ffffff;
+      }
+
+      &.is-active {
+        background: #4a90d9 !important;
+        color: #ffffff;
+      }
+    }
+  }
+}
+</style>

src/layout/components/TagsView/index.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="tags-view-wrapper">
+    <el-scrollbar class="tags-view-scroll">
+      <el-tabs
+        v-model="activeTag"
+        type="card"
+        closable
+        @tab-remove="removeTag"
+        @tab-click="handleTabClick"
+        class="tags-view"
+      >
+        <el-tab-pane
+          v-for="tag in visitedViews"
+          :key="tag.path"
+          :label="tag.title"
+          :name="tag.path"
+        >
+        </el-tab-pane>
+      </el-tabs>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+
+const router = useRouter()
+const route = useRoute()
+
+const visitedViews = ref([{ path: '/index', title: '工作台' }])
+
+const activeTag = computed({
+  get: () => route.path,
+  set: (val) => {
+    router.push(val)
+  }
+})
+
+const removeTag = (path) => {
+  const index = visitedViews.value.findIndex(v => v.path === path)
+  if (index > 0) {
+    visitedViews.value.splice(index, 1)
+    if (activeTag.value === path) {
+      router.push(visitedViews.value[index - 1]?.path || '/index')
+    }
+  }
+}
+
+const handleTabClick = (tab) => {
+  router.push(tab.props.name)
+}
+
+watch(() => route.path, (newPath) => {
+  const exists = visitedViews.value.some(v => v.path === newPath)
+  if (!exists) {
+    visitedViews.value.push({ path: newPath, title: route.meta?.title || '页面' })
+  }
+}, { immediate: true })
+</script>
+
+<style lang="scss" scoped>
+.tags-view-wrapper {
+  position: fixed;
+  top: 50px;
+  left: 200px;
+  right: 0;
+  height: 40px;
+  background: #fff;
+  border-bottom: 1px solid #e4e7ed;
+  z-index: 99;
+  transition: left 0.28s ease;
+
+  .app-wrapper.sidebar-close & {
+    left: 64px;
+  }
+}
+
+.tags-view-scroll {
+  width: 100%;
+  height: 100%;
+}
+
+.tags-view {
+  :deep(.el-tabs__header) {
+    margin: 0;
+    padding: 0 20px;
+    border-bottom: none;
+  }
+
+  :deep(.el-tabs__nav) {
+    margin: 0;
+  }
+
+  :deep(.el-tabs__item) {
+    padding: 0 20px;
+    height: 40px;
+    line-height: 40px;
+    font-size: 14px;
+    color: #606266;
+    margin-right: 8px;
+
+    &.is-active {
+      color: #409eff;
+      font-weight: 500;
+    }
+  }
+
+  :deep(.el-tabs__active-bar) {
+    background: #409eff;
+  }
+}
+</style>

src/layout/index.vue

@@ -0,0 +1,121 @@
+<template>
+  <div :class="['app-wrapper', { 'sidebar-close': !sidebar.opened }]">
+    <Sidebar />
+    <div class="main-container">
+      <Navbar />
+      <TagsView />
+      <Breadcrumb />
+      <main class="app-main">
+        <transition name="fade-transform" mode="out-in">
+          <router-view v-slot="{ Component }">
+            <keep-alive :include="cachedViews">
+              <component :is="Component" :key="route.fullPath" />
+            </keep-alive>
+          </router-view>
+        </transition>
+      </main>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { useStore } from 'vuex'
+import Sidebar from './components/Sidebar/index.vue'
+import Navbar from './components/Navbar/index.vue'
+import Breadcrumb from './components/Breadcrumb/index.vue'
+import TagsView from './components/TagsView/index.vue'
+
+const route = useRoute()
+const store = useStore()
+
+const sidebar = computed(() => store.state.app.sidebar)
+const cachedViews = computed(() => store.state.tagsView?.cachedViews || [])
+</script>
+
+<style lang="scss" scoped>
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html, body, #app {
+  height: 100%;
+  font-family: 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.app-wrapper {
+  min-height: 100vh;
+  position: relative;
+  overflow: hidden;
+  background: #f5f7fa;
+}
+
+.main-container {
+  min-height: 100vh;
+  transition: padding-left 0.28s ease;
+  padding-left: 200px;
+  display: flex;
+  flex-direction: column;
+}
+
+.app-wrapper.sidebar-close {
+  .main-container {
+    padding-left: 54px;
+  }
+}
+
+.app-main {
+  flex: 1;
+  padding: 20px;
+  min-height: calc(100vh - 180px);
+  background: #f5f7fa;
+}
+
+.app-container {
+  padding: 20px;
+  min-height: calc(100vh - 230px);
+}
+
+.components-container {
+  margin: 30px 50px;
+}
+
+.pagination-container {
+  margin-top: 30px;
+  text-align: right;
+}
+
+.fade-transform-enter-active,
+.fade-transform-leave-active {
+  transition: all 0.3s ease;
+}
+
+.fade-transform-enter-from {
+  opacity: 0;
+  transform: translateX(-20px);
+}
+
+.fade-transform-leave-to {
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+@media screen and (max-width: 768px) {
+  .main-container {
+    padding-left: 0;
+  }
+
+  .app-wrapper.sidebar-close .main-container {
+    padding-left: 0;
+  }
+
+  .app-wrapper.sidebar-opened .main-container {
+    padding-left: 200px;
+  }
+}
+</style>