ShopTRAINING/UI/src/App.vue

<template>
  <div class="app-container">
    <div class="background-effects">
      <div class="glow-circle circle-1"></div>
      <div class="glow-circle circle-2"></div>
      <div class="glow-circle circle-3"></div>
    </div>
    
    <el-container class="layout-container">
      <el-aside width="220px" class="sidebar">
        <div class="logo-container">
          <div class="logo-icon">
            <el-icon size="24"><DataAnalysis /></el-icon>
          </div>
          <h2 class="logo-text">药品销售预测</h2>
        </div>
        
        <el-scrollbar>
          <el-menu 
            :default-active="activeMenu"
            :default-openeds="['1']"
            router
            class="futuristic-menu"
            background-color="transparent"
            text-color="#e0e6ff"
            active-text-color="#5d9cff">
            <el-sub-menu index="1">
              <template #title>
                <el-icon><DataLine /></el-icon>
                <span>功能导航</span>
              </template>
              <el-menu-item index="/">
                <el-icon><House /></el-icon>首页概览
              </el-menu-item>
              <el-menu-item index="/store-management">
                <el-icon><Shop /></el-icon>店铺管理
              </el-menu-item>
              <el-sub-menu index="training-submenu">
                <template #title>
                  <el-icon><Cpu /></el-icon>
                  <span>模型训练</span>
                </template>
                <el-menu-item index="/training/product">
                  <el-icon><Coin /></el-icon>按药品训练
                </el-menu-item>
                <el-menu-item index="/training/store">
                  <el-icon><Shop /></el-icon>按店铺训练
                </el-menu-item>
                <el-menu-item index="/training/global">
                  <el-icon><Operation /></el-icon>全局模型训练
                </el-menu-item>
              </el-sub-menu>
              <el-sub-menu index="prediction-submenu">
                <template #title>
                  <el-icon><MagicStick /></el-icon>
                  <span>预测分析</span>
                </template>
                <el-menu-item index="/prediction/product">
                  <el-icon><Coin /></el-icon>按药品预测
                </el-menu-item>
                <el-menu-item index="/prediction/store">
                  <el-icon><Shop /></el-icon>按店铺预测
                </el-menu-item>
                <el-menu-item index="/prediction/global">
                  <el-icon><Operation /></el-icon>全局模型预测
                </el-menu-item>
              </el-sub-menu>
              <el-menu-item index="/history">
                <el-icon><Histogram /></el-icon>历史预测
              </el-menu-item>
              <el-menu-item index="/management">
                <el-icon><Files /></el-icon>模型管理
              </el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-scrollbar>
        
        <div class="sidebar-footer">
          <el-tooltip content="系统版本: v1.0.0">
            <div class="version-badge">v1.0.0</div>
          </el-tooltip>
        </div>
      </el-aside>

      <el-container>
        <el-header class="header">
          <div class="header-title">
            <span class="glowing-text">智能药品销售预测系统</span>
          </div>
          <div class="header-controls">
            <el-tooltip content="数据刷新">
              <el-button circle size="small">
                <el-icon><Refresh /></el-icon>
              </el-button>
            </el-tooltip>
            <el-avatar size="small" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
          </div>
        </el-header>

        <el-main class="main-content">
          <router-view v-slot="{ Component }">
            <transition name="fade" mode="out-in">
              <component :is="Component" />
            </transition>
          </router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { DataAnalysis, Refresh, DataLine, House, FolderOpened, Cpu, MagicStick, Files, Histogram, Coin, Shop, Operation } from '@element-plus/icons-vue'

const route = useRoute()
const activeMenu = computed(() => route.path)
</script>

<style>
/* 全局样式 */
:root {
  --primary-dark: #0c1e35;
  --primary-light: #1c3a64;
  --accent-color: #5d9cff;
  --accent-glow: #43a5f5;
  --accent-purple: #ad7bee;
  --text-light: #e0e6ff;
  --card-bg: rgba(18, 36, 65, 0.6);
  --card-border: rgba(93, 156, 255, 0.2);
  --neon-glow: 0 0 10px rgba(93, 156, 255, 0.5), 0 0 20px rgba(93, 156, 255, 0.3);
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  background-color: var(--primary-dark);
  color: var(--text-light);
  overflow: hidden;
}

/* 页面过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 提高文本可读性 */
* {
  text-shadow: 0 0 0.5px rgba(0, 0, 0, 0.1);
}

.main-content {
  background-color: transparent !important;
  padding: 20px;
}
</style>

<style scoped>
.app-container {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.background-effects {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}

.glow-circle {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
}

.circle-1 {
  top: -100px;
  right: -100px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(93, 156, 255, 0.3) 0%, rgba(18, 36, 65, 0) 70%);
  animation: pulse 15s infinite alternate;
}

.circle-2 {
  bottom: -150px;
  left: -100px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(173, 123, 238, 0.2) 0%, rgba(18, 36, 65, 0) 70%);
  animation: pulse 20s infinite alternate-reverse;
}

.circle-3 {
  top: 40%;
  left: 50%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(67, 165, 245, 0.15) 0%, rgba(18, 36, 65, 0) 70%);
  animation: pulse 12s infinite alternate;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.5);
    opacity: 0.8;
  }
}

.layout-container {
  height: 100vh;
  background-color: transparent;
}

.sidebar {
  background: linear-gradient(180deg, var(--primary-dark) 0%, var(--primary-light) 100%);
  border-right: 1px solid var(--card-border);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
}

.logo-container {
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--card-border);
}

.logo-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent-color), var(--accent-purple));
  box-shadow: var(--neon-glow);
  color: white;
}

.logo-text {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-light);
  letter-spacing: 0.5px;
}

.futuristic-menu {
  border-right: none !important;
  margin-top: 10px;
}

.futuristic-menu :deep(.el-menu-item) {
  height: 50px;
  line-height: 50px;
  margin: 5px 15px;
  border-radius: 6px;
  transition: all 0.3s;
}

.futuristic-menu :deep(.el-menu-item.is-active) {
  background: linear-gradient(90deg, rgba(93, 156, 255, 0.2) 0%, rgba(93, 156, 255, 0) 100%);
  box-shadow: -2px 0 0 var(--accent-color);
}

.futuristic-menu :deep(.el-menu-item:hover) {
  background-color: rgba(255, 255, 255, 0.05);
}

.sidebar-footer {
  margin-top: auto;
  padding: 15px;
  border-top: 1px solid var(--card-border);
  text-align: center;
}

.version-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  background-color: rgba(93, 156, 255, 0.1);
  border: 1px solid var(--accent-color);
  color: var(--accent-color);
  font-size: 12px;
}

.header {
  background: rgba(18, 36, 65, 0.4);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--card-border);
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}

.header-title {
  display: flex;
  align-items: center;
}

.glowing-text {
  font-size: 20px;
  font-weight: 500;
  color: var(--text-light);
  text-shadow: 0 0 5px rgba(93, 156, 255, 0.5);
  position: relative;
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb {
  background: rgba(93, 156, 255, 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(93, 156, 255, 0.5);
}
</style>