vue3-admin-gpt 1.0.0

package/src/views/index/index.vue

@@ -0,0 +1,1489 @@
+<template>
+  <div class="index-container">
+    <el-row :gutter="20">
+      <el-col :lg="6" :md="12" :sm="24" :xl="6" :xs="24">
+        <el-card shadow="never">
+          <template #header>
+            <span>访问量</span>
+          </template>
+          <div class="chart-container">
+            <div class="chart-header">
+              <div class="chart-title">
+                <span>今日访问趋势</span>
+              </div>
+              <div class="chart-stats">
+                <div class="stat-item">
+                  <div class="stat-value">{{ config1.endVal }}</div>
+                  <div class="stat-label">总访问量</div>
+                </div>
+              </div>
+            </div>
+            <div class="chart-content">
+              <vab-chart autoresize :option="fwl" />
+            </div>
+            <div class="chart-footer">
+              <div class="trend-info">
+                <div class="trend-item">
+                  <el-icon class="trend-up"><ArrowUp /></el-icon>
+                  <span class="trend-text">较昨日增长 12.5%</span>
+                </div>
+                <div class="trend-item">
+                  <el-icon class="trend-icon"><User /></el-icon>
+                  <span class="trend-text">活跃用户 2.3K</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :lg="6" :md="12" :sm="24" :xl="6" :xs="24">
+        <el-card shadow="never">
+          <template #header>
+            <span>授权数</span>
+          </template>
+          <div class="chart-container">
+            <div class="chart-header">
+              <div class="chart-title">
+                <span>授权统计</span>
+              </div>
+              <div class="chart-stats">
+                <div class="stat-item">
+                  <div class="stat-value">{{ config2.endVal }}</div>
+                  <div class="stat-label">总授权数</div>
+                </div>
+              </div>
+            </div>
+            <div class="chart-content">
+              <vab-chart autoresize :option="sqs" />
+            </div>
+            <div class="chart-footer">
+              <div class="trend-info">
+                <div class="trend-item">
+                  <el-icon class="trend-up"><ArrowUp /></el-icon>
+                  <span class="trend-text">较昨日增长 8.3%</span>
+                </div>
+                <div class="trend-item">
+                  <el-icon class="trend-icon"><Clock /></el-icon>
+                  <span class="trend-text">今日新增 156</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :lg="6" :md="12" :sm="24" :xl="6" :xs="24">
+        <el-card shadow="never">
+          <template #header>
+            <span>用户活跃度</span>
+          </template>
+          <div class="chart-container">
+            <div class="chart-header">
+              <div class="chart-title">
+                <span>用户活跃统计</span>
+              </div>
+              <div class="chart-stats">
+                <div class="stat-item">
+                  <div class="stat-value">{{ config3.endVal }}</div>
+                  <div class="stat-label">活跃用户</div>
+                </div>
+              </div>
+            </div>
+            <div class="chart-content">
+              <vab-chart autoresize :option="userActivity" />
+            </div>
+            <div class="chart-footer">
+              <div class="trend-info">
+                <div class="trend-item">
+                  <el-icon class="trend-up"><ArrowUp /></el-icon>
+                  <span class="trend-text">较昨日增长 15.2%</span>
+                </div>
+                <div class="trend-item">
+                  <el-icon class="trend-icon"><Clock /></el-icon>
+                  <span class="trend-text">在线时长 2.5h</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :lg="6" :md="12" :sm="24" :xl="6" :xs="24">
+        <el-card shadow="never">
+          <template #header>
+            <span>系统性能</span>
+          </template>
+          <div class="chart-container">
+            <div class="chart-header">
+              <div class="chart-title">
+                <span>性能监控</span>
+              </div>
+              <div class="chart-stats">
+                <div class="stat-item">
+                  <div class="stat-value">98.5%</div>
+                  <div class="stat-label">系统可用性</div>
+                </div>
+              </div>
+            </div>
+            <div class="chart-content">
+              <vab-chart autoresize :option="systemPerformance" />
+            </div>
+            <div class="chart-footer">
+              <div class="trend-info">
+                <div class="trend-item">
+                  <el-icon class="trend-up"><CheckCircle /></el-icon>
+                  <span class="trend-text">运行正常</span>
+                </div>
+                <div class="trend-item">
+                  <el-icon class="trend-icon"><Monitor /></el-icon>
+                  <span class="trend-text">响应时间 120ms</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
+        <el-card class="card" shadow="never">
+          <div slot="header">
+            <span>依赖信息</span>
+            <!-- <div style="float: right">部署时间:{{ updateTime }}</div> -->
+          </div>
+          <!-- rspack -->
+          <div class="rspack-info">
+            <div class="rspack-item">
+              <div class="rspack-name">Rspack版本</div>
+              <div class="rspack-version">{{ devDependencies["rspack"] }}</div>
+            </div>
+          </div>
+
+          <div class="dependency-content">
+            <div class="dependency-grid">
+              <div class="dependency-item">
+                <div class="dependency-info">
+                  <div class="dependency-name">Vue版本</div>
+                  <div class="dependency-version">
+                    {{ dependencies["vue"] }}
+                  </div>
+                </div>
+              </div>
+
+              <div class="dependency-item">
+                <div class="dependency-info">
+                  <div class="dependency-name">Vuex版本</div>
+                  <div class="dependency-version">
+                    {{ dependencies["vuex"] }}
+                  </div>
+                </div>
+              </div>
+
+              <div class="dependency-item">
+                <div class="dependency-info">
+                  <div class="dependency-name">Vue Router</div>
+                  <div class="dependency-version">
+                    {{ dependencies["vue-router"] }}
+                  </div>
+                </div>
+              </div>
+
+              <div class="dependency-item">
+                <div class="dependency-info">
+                  <div class="dependency-name">Element Plus</div>
+                  <div class="dependency-version">
+                    {{ dependencies["element-plus"] }}
+                  </div>
+                </div>
+              </div>
+
+              <div class="dependency-item">
+                <div class="dependency-info">
+                  <div class="dependency-name">Axios版本</div>
+                  <div class="dependency-version">
+                    {{ dependencies["axios"] }}
+                  </div>
+                </div>
+              </div>
+
+              <div class="dependency-item">
+                <div class="dependency-info">
+                  <div class="dependency-name">Sass版本</div>
+                  <div class="dependency-version">
+                    {{ devDependencies["sass"] }}
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="system-info">
+              <div class="info-header">
+                <vab-icon :icon="['fas', 'info-circle']" />
+                <span>系统信息</span>
+              </div>
+              <div class="info-content">
+                <div class="info-item">
+                  <span class="info-label">构建时间:</span>
+                  <span class="info-value">{{ updateTime || "未知" }}</span>
+                </div>
+                <div class="info-item">
+                  <span class="info-label">运行环境:</span>
+                  <span class="info-value">{{ nodeEnv }}</span>
+                </div>
+                <div class="info-item">
+                  <span class="info-label">用户代理:</span>
+                  <span class="info-value">{{ userAgent }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import VabChart from "@/plugins/echarts";
+import { dependencies, devDependencies } from "../../../package.json";
+import { random } from "lodash-es";
+import {
+  View,
+  ArrowUp,
+  User,
+  Clock,
+  Monitor,
+  Bell,
+  Reading,
+  Present,
+  Mug,
+  Grid,
+  VideoPlay,
+  More,
+  Promotion,
+  Picture,
+} from "@element-plus/icons-vue";
+
+export default {
+  name: "Index",
+  components: {
+    VabChart,
+    View,
+    ArrowUp,
+    User,
+    Clock,
+    Monitor,
+    Bell,
+    Reading,
+    Present,
+    Mug,
+    Grid,
+    VideoPlay,
+    More,
+    Promotion,
+    Picture,
+  },
+  data() {
+    return {
+      timer: 0,
+      updateTime: process.env.VUE_APP_UPDATE_TIME,
+      nodeEnv: process.env.NODE_ENV,
+      dependencies: dependencies,
+      devDependencies: devDependencies,
+      config1: {
+        startVal: 0,
+        endVal: random(20000, 60000),
+        decimals: 0,
+        prefix: "",
+        suffix: "",
+        separator: ",",
+        duration: 8000,
+      },
+      config2: {
+        startVal: 0,
+        endVal: random(1000, 20000),
+        decimals: 0,
+        prefix: "",
+        suffix: "",
+        separator: ",",
+        duration: 8000,
+      },
+      config3: {
+        startVal: 0,
+        endVal: random(1000, 20000),
+        decimals: 0,
+        prefix: "",
+        suffix: "",
+        separator: ",",
+        duration: 8000,
+      },
+
+      //访问量
+      fwl: {
+        color: ["#409EFF", "#8B5CF6", "#A855F7", "#C084FC", "#E879F9"],
+        backgroundColor: "transparent",
+        grid: {
+          top: "15%",
+          left: "3%",
+          right: "4%",
+          bottom: "15%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: [],
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              lineStyle: {
+                color: "#E4E7ED",
+              },
+            },
+            axisLabel: {
+              color: "#909399",
+              fontSize: 11,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: "#909399",
+              fontSize: 11,
+            },
+            splitLine: {
+              lineStyle: {
+                color: "#F5F7FA",
+                type: "dashed",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "访问量",
+            type: "line",
+            data: [],
+            smooth: true,
+            symbol: "circle",
+            symbolSize: 6,
+            lineStyle: {
+              width: 3,
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  { offset: 0, color: "#409EFF" },
+                  { offset: 1, color: "#8B5CF6" },
+                ],
+              },
+            },
+            itemStyle: {
+              color: "#409EFF",
+              borderWidth: 2,
+              borderColor: "#fff",
+            },
+            areaStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  { offset: 0, color: "rgba(64, 158, 255, 0.3)" },
+                  { offset: 1, color: "rgba(139, 92, 246, 0.1)" },
+                ],
+              },
+            },
+          },
+        ],
+      },
+      //授权数
+      sqs: {
+        color: ["#409EFF", "#8B5CF6", "#A855F7", "#C084FC", "#E879F9"],
+        backgroundColor: "transparent",
+        grid: {
+          top: "15%",
+          left: "3%",
+          right: "4%",
+          bottom: "15%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: ["0时", "4时", "8时", "12时", "16时", "20时", "24时"],
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              lineStyle: {
+                color: "#E4E7ED",
+              },
+            },
+            axisLabel: {
+              color: "#909399",
+              fontSize: 11,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: "#909399",
+              fontSize: 11,
+            },
+            splitLine: {
+              lineStyle: {
+                color: "#F5F7FA",
+                type: "dashed",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "授权数",
+            type: "bar",
+            barWidth: "60%",
+            data: [10, 52, 20, 33, 39, 33, 22],
+            itemStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  { offset: 0, color: "#409EFF" },
+                  { offset: 1, color: "#8B5CF6" },
+                ],
+              },
+              borderRadius: [6, 6, 0, 0],
+              shadowColor: "rgba(64, 158, 255, 0.3)",
+              shadowBlur: 10,
+              shadowOffsetX: 0,
+              shadowOffsetY: 5,
+            },
+            emphasis: {
+              itemStyle: {
+                color: {
+                  type: "linear",
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [
+                  { offset: 0, color: "#409EFF" },
+                  { offset: 1, color: "#7C3AED" },
+                ],
+                },
+                shadowBlur: 15,
+                shadowColor: "rgba(64, 158, 255, 0.5)"
+              },
+            },
+          },
+        ],
+      },
+
+      //用户活跃度
+      userActivity: {
+        color: ["#409EFF", "#8B5CF6", "#A855F7", "#C084FC", "#E879F9"],
+        backgroundColor: "transparent",
+        grid: {
+          top: "15%",
+          left: "3%",
+          right: "4%",
+          bottom: "15%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              lineStyle: {
+                color: "#E4E7ED",
+              },
+            },
+            axisLabel: {
+              color: "#909399",
+              fontSize: 11,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: "#909399",
+              fontSize: 11,
+            },
+            splitLine: {
+              lineStyle: {
+                color: "#F5F7FA",
+                type: "dashed",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "活跃用户",
+            type: "line",
+            data: [1200, 1350, 1100, 1400, 1600, 1800, 1500],
+            smooth: true,
+            symbol: "circle",
+            symbolSize: 6,
+            lineStyle: {
+              width: 3,
+              color: "#409EFF",
+            },
+            itemStyle: {
+              color: "#409EFF",
+              borderWidth: 2,
+              borderColor: "#fff",
+            },
+            areaStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  { offset: 0, color: "rgba(103, 122, 228, 0.3)" },
+                  { offset: 1, color: "rgba(103, 122, 228, 0.1)" },
+                ],
+              },
+            },
+          },
+        ],
+      },
+
+      //系统性能
+      systemPerformance: {
+        color: ["#409EFF", "#8B5CF6", "#A855F7", "#C084FC"],
+        backgroundColor: "transparent",
+        grid: {
+          top: "15%",
+          left: "3%",
+          right: "4%",
+          bottom: "15%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: ["CPU", "内存", "磁盘", "网络"],
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              lineStyle: {
+                color: "#E4E7ED",
+              },
+            },
+            axisLabel: {
+              color: "#909399",
+              fontSize: 11,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            max: 100,
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: "#909399",
+              fontSize: 11,
+              formatter: "{value}%",
+            },
+            splitLine: {
+              lineStyle: {
+                color: "#F5F7FA",
+                type: "dashed",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "使用率",
+            type: "bar",
+            data: [45, 62, 38, 28],
+            barWidth: "50%",
+            itemStyle: {
+              color: function (params) {
+                const colors = ["#409EFF", "#8B5CF6", "#A855F7", "#C084FC"];
+                return colors[params.dataIndex];
+              },
+              borderRadius: [4, 4, 0, 0],
+            },
+            label: {
+              show: true,
+              position: "top",
+              formatter: "{c}%",
+              color: "#2c3e50",
+              fontSize: 12,
+            },
+          },
+        ],
+      },
+
+      //更新日志
+      reverse: true,
+      activities: [],
+      noticeList: [],
+      //其他信息
+      userAgent: navigator.userAgent,
+    };
+  },
+  created() {
+    this.fetchData();
+    const now = new Date();
+    const oneDay = 3600 * 1000 * 24;
+    const date = [];
+    const data = [];
+
+    const addData = (shift) => {
+      const dateStr = [
+        now.getFullYear(),
+        now.getMonth() + 1,
+        now.getDate(),
+      ].join("/");
+      date.push(dateStr);
+      data.push(random(20000, 60000));
+
+      if (shift) {
+        date.shift();
+        data.shift();
+      }
+
+      now.setTime(now.getTime() + oneDay);
+    };
+
+    for (let i = 1; i < 6; i++) {
+      addData();
+    }
+    addData(true);
+    this.fwl.xAxis[0].data = date;
+    this.fwl.series[0].data = data;
+    this.timer = setInterval(() => {
+      addData(true);
+      this.fwl.xAxis[0].data = date;
+      this.fwl.series[0].data = data;
+    }, 3000);
+  },
+  beforeDestroy() {
+    clearInterval(this.timer);
+  },
+  mounted() {
+    let base = +new Date(2020, 1, 1);
+    let oneDay = 24 * 3600 * 1000;
+    let date = [];
+
+    let data = [random(20000, 60000)];
+    let now = new Date(base);
+
+    const addData = (shift) => {
+      now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/");
+      date.push(now);
+      data.push(random(20000, 60000));
+
+      if (shift) {
+        date.shift();
+        data.shift();
+      }
+
+      now = new Date(+new Date(now) + oneDay);
+    };
+
+    for (let i = 1; i < 6; i++) {
+      addData();
+    }
+    addData(true);
+    this.fwl.xAxis[0].data = date;
+    this.fwl.series[0].data = data;
+    this.timer = setInterval(() => {
+      addData(true);
+      this.fwl.xAxis[0].data = date;
+      this.fwl.series[0].data = data;
+    }, 3000);
+  },
+  methods: {
+    handleClick(e) {
+      this.$baseMessage(`点击了${e.name},这里可以写跳转`);
+    },
+    handleZrClick() {},
+    handleChangeTheme() {
+      // 不再使用事件总线
+      // this.$baseEventBus.$emit('theme')
+      // 直接打开主题设置
+      this.drawerVisible = true;
+    },
+    async fetchData() {
+      // 使用 mock 数据替代 API 调用
+      this.noticeList = [
+        { id: 1, title: '欢迎使用 Vue3 Admin 脚手架', content: '这是一个基于 Vue 3 + Element Plus + Rspack 的后台管理系统模板', date: new Date().toLocaleDateString() },
+        { id: 2, title: '快速开始', content: '运行 npm run serve:rspack 即可启动开发服务器', date: new Date().toLocaleDateString() },
+        { id: 3, title: '功能特性', content: '支持多主题切换、响应式设计、完善的权限管理等功能', date: new Date().toLocaleDateString() },
+      ];
+    },
+    handleIconClick(item) {
+      if (item.link) {
+        window.open(item.link, "_blank");
+      }
+    },
+    getIconDescription(title) {
+      const descriptions = {
+        视频播放器: "支持多种格式的视频播放",
+        表格: "功能强大的数据表格组件",
+        源码: "开源项目源码下载",
+        书籍: "技术文档和教程",
+        公告: "系统公告和通知",
+        礼物: "免费资源和福利",
+        公平的世界: "开源社区贡献",
+        休息一下: "放松心情，享受生活",
+      };
+      return descriptions[title] || "功能模块";
+    },
+    getRandomViews() {
+      return `${random(100, 999)}K`;
+    },
+    getRandomLikes() {
+      return `${random(10, 99)}K`;
+    },
+    // 将FontAwesome图标名称转换为Element Plus图标组件
+    getIconComponent(iconName) {
+      // 映射FontAwesome图标名称到Element Plus图标
+      const iconMap = {
+        video: "VideoPlay",
+        table: "Grid",
+        code: "Promotion",
+        book: "Reading",
+        bullhorn: "Bell",
+        gift: "Present",
+        coffee: "Mug",
+        eye: "View",
+        heart: "Heart",
+        "arrow-up": "ArrowUp",
+        users: "User",
+        clock: "Clock",
+        "check-circle": "CheckCircle",
+        server: "Monitor",
+        // 添加更多映射...
+      };
+
+      // 获取映射的组件名或使用默认图标
+      return iconMap[iconName] || "More";
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.index-container {
+  padding: 0 !important;
+  margin: 0 !important;
+  background: #f5f7f8 !important;
+
+  :deep() {
+    .el-alert {
+      padding: $base-padding;
+
+      &--info.is-light {
+        min-height: 82px;
+        padding: $base-padding;
+        margin-bottom: 15px;
+        color: #909399;
+        background-color: $base-color-white;
+        border: 1px solid #ebeef5;
+        font-size: 14px !important;
+        * {
+          font-size: 14px !important;
+        }
+      }
+    }
+
+    .el-card__body {
+      .echarts {
+        width: 100%;
+        height: 115px;
+      }
+    }
+  }
+
+  .card {
+    height: 600px;
+    display: flex;
+    flex-direction: column;
+
+    :deep() {
+      .el-card__body {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+
+        .echarts {
+          width: 100%;
+          height: 305px;
+        }
+      }
+    }
+
+    .dependency-content {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      overflow-y: auto;
+
+      .dependency-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+        gap: 15px;
+        margin-bottom: 25px;
+        flex-shrink: 0;
+
+        .dependency-item {
+          display: flex;
+          align-items: center;
+          padding: 15px;
+          background: #f8f9fa;
+          border: 1px solid #e9ecef;
+          border-radius: 8px;
+          transition: all 0.3s ease;
+
+          &:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+            background: #ffffff;
+          }
+
+          .dependency-info {
+            flex: 1;
+            text-align: center;
+
+            .dependency-name {
+              font-size: 0.9rem;
+              color: #6c757d;
+              margin-bottom: 6px;
+              font-weight: 500;
+            }
+
+            .dependency-version {
+              font-size: 1.1rem;
+              color: #2c3e50;
+              font-weight: 600;
+            }
+          }
+        }
+      }
+
+      .system-info {
+        background: #f8f9fa;
+        border: 1px solid #e9ecef;
+        border-radius: 8px;
+        padding: 20px;
+        flex-shrink: 0;
+
+        .info-header {
+          display: flex;
+          align-items: center;
+          margin-bottom: 15px;
+          padding-bottom: 10px;
+          border-bottom: 2px solid #dee2e6;
+
+          .vab-icon {
+            color: #409EFF;
+            margin-right: 3px;
+            font-size: 1.1rem;
+          }
+
+          span {
+            font-size: 1.1rem;
+            font-weight: 600;
+            color: #2c3e50;
+          }
+        }
+
+        .info-content {
+          .info-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px 0;
+            border-bottom: 1px solid #f1f3f4;
+
+            &:last-child {
+              border-bottom: none;
+            }
+
+            .info-label {
+              color: #6c757d;
+              font-weight: 500;
+              font-size: 0.9rem;
+            }
+
+            .info-value {
+              color: #2c3e50;
+              font-weight: 600;
+              font-size: 0.9rem;
+              max-width: 60%;
+              text-align: right;
+              word-break: break-all;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .bottom {
+    padding-top: 20px;
+    margin-top: 5px;
+    color: #595959;
+    text-align: left;
+    border-top: 1px solid $base-border-color;
+  }
+
+  .table {
+    width: 100%;
+    color: #666;
+    border-collapse: collapse;
+    background-color: #fff;
+
+    td {
+      position: relative;
+      min-height: 20px;
+      padding: 9px 15px;
+      font-size: 14px;
+      line-height: 20px;
+      border: 1px solid #e6e6e6;
+
+      &:nth-child(odd) {
+        width: 20%;
+        text-align: right;
+        background-color: #f7f7f7;
+      }
+    }
+  }
+
+  .icon-panel {
+    height: 117px;
+    text-align: center;
+    cursor: pointer;
+
+    svg {
+      font-size: 40px;
+    }
+
+    p {
+      margin-top: 10px;
+    }
+  }
+
+  .bottom-btn {
+    button {
+      margin: 5px 10px 15px 0;
+    }
+  }
+
+  // 高级信息卡片样式
+  .advanced-info-card {
+    height: 600px;
+    overflow: hidden;
+
+    .advanced-content {
+      height: 100%;
+      padding: 30px 25px;
+      background: #ffffff;
+      display: flex;
+      flex-direction: column;
+      overflow-y: auto;
+
+      .logo-section {
+        text-align: center;
+        margin-bottom: 30px;
+        flex-shrink: 0;
+
+        .logo-container {
+          position: relative;
+          display: inline-block;
+          margin-bottom: 20px;
+
+          .advanced-logo {
+            font-size: 120px;
+            position: relative;
+            z-index: 2;
+          }
+
+          .logo-glow {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 140px;
+            height: 140px;
+            background: radial-gradient(
+              circle,
+              rgba(64, 158, 255, 0.1) 0%,
+              transparent 70%
+            );
+            border-radius: 50%;
+            animation: pulse 2s ease-in-out infinite;
+          }
+        }
+
+        .project-title {
+          font-size: 2rem;
+          font-weight: 700;
+          color: #2c3e50;
+          margin: 0 0 10px 0;
+        }
+
+        .project-description {
+          color: #7f8c8d;
+          font-size: 1rem;
+          margin: 0;
+        }
+      }
+
+      .stats-section {
+        display: flex;
+        justify-content: space-around;
+        margin-bottom: 30px;
+        padding: 20px;
+        background: #f8f9fa;
+        flex-shrink: 0;
+
+        .stat-card {
+          text-align: center;
+          padding: 15px;
+          transition: all 0.3s ease;
+
+          .stat-icon {
+            width: 50px;
+            height: 50px;
+            background: linear-gradient(45deg, #409EFF, #8b5cf6);
+            border-radius: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0 auto 10px;
+            color: white;
+            font-size: 1.2rem;
+          }
+
+          .stat-info {
+            .stat-number {
+              font-size: 1.5rem;
+              font-weight: 700;
+              color: #2c3e50;
+              margin-bottom: 5px;
+            }
+
+            .stat-label {
+              font-size: 0.9rem;
+              color: #7f8c8d;
+            }
+          }
+        }
+      }
+
+      .action-section {
+        flex: 1;
+        overflow-y: auto;
+
+        .action-group {
+          margin-bottom: 25px;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+
+          .action-title {
+            font-size: 1.1rem;
+            font-weight: 600;
+            color: #2c3e50;
+            margin: 0 0 15px 0;
+            padding-bottom: 8px;
+            border-bottom: 2px solid #ecf0f1;
+          }
+
+          .action-buttons {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 15px;
+
+            .action-btn {
+              flex: 1;
+              min-width: 200px;
+              height: 45px;
+              border-radius: 10px;
+              font-weight: 600;
+              transition: all 0.3s ease;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              gap: 8px;
+
+              &:hover {
+                transform: translateY(-2px);
+                box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+              }
+
+              &.primary-btn {
+                background: #409EFF;
+                border: none;
+                color: white;
+
+                &:hover {
+                  background: #5a67d8;
+                }
+              }
+
+              &.premium-btn {
+                background: linear-gradient(45deg, #f093fb, #f5576c);
+                border: none;
+                color: white;
+
+                &:hover {
+                  background: linear-gradient(45deg, #e085e7, #e54b5f);
+                }
+              }
+            }
+
+            .premium-card {
+              flex: 1;
+              min-width: 180px;
+              background: linear-gradient(135deg, #409EFF 0%, #8b5cf6 100%);
+              border-radius: 15px;
+              padding: 20px;
+              cursor: pointer;
+              transition: all 0.3s ease;
+              position: relative;
+              overflow: hidden;
+              color: white;
+              border: none;
+
+              &:hover {
+                transform: translateY(-5px);
+                box-shadow: 0 10px 25px rgba(103, 122, 228, 0.3);
+              }
+
+              &.featured {
+                background: linear-gradient(135deg, #e6a23c 0%, #f56c6c 100%);
+
+                &:hover {
+                  box-shadow: 0 10px 25px rgba(230, 162, 60, 0.3);
+                }
+
+                .premium-badge {
+                  background: rgba(255, 255, 255, 0.2);
+                  color: #fff;
+                }
+              }
+
+              .premium-header {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                margin-bottom: 15px;
+
+                .premium-icon {
+                  font-size: 1.5rem;
+                  color: rgba(255, 255, 255, 0.9);
+                }
+
+                .premium-badge {
+                  background: rgba(255, 255, 255, 0.2);
+                  color: rgba(255, 255, 255, 0.9);
+                  padding: 4px 8px;
+                  border-radius: 12px;
+                  font-size: 0.7rem;
+                  font-weight: 600;
+                  letter-spacing: 0.5px;
+                }
+              }
+
+              .premium-content {
+                .premium-title {
+                  font-size: 1.1rem;
+                  font-weight: 700;
+                  margin-bottom: 8px;
+                  color: white;
+                }
+
+                .premium-price {
+                  font-size: 1.3rem;
+                  font-weight: 800;
+                  margin-bottom: 5px;
+                  color: white;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // 图表容器高级样式
+  .chart-container {
+    height: 200px;
+    display: flex;
+    flex-direction: column;
+
+    .chart-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 15px;
+      padding-bottom: 10px;
+      border-bottom: 1px solid #f0f0f0;
+      flex-shrink: 0;
+
+      .chart-title {
+        display: flex;
+        align-items: center;
+        font-size: 1rem;
+        font-weight: 600;
+        color: #2c3e50;
+
+        .vab-icon {
+            color: #409EFF;
+            margin-right: 3px;
+            font-size: 1.1rem;
+          }
+      }
+
+      .chart-stats {
+        .stat-item {
+          text-align: right;
+
+          .stat-value {
+            font-size: 1.5rem;
+            font-weight: 700;
+            color: #2c3e50;
+            line-height: 1;
+          }
+
+          .stat-label {
+            font-size: 0.8rem;
+            color: #7f8c8d;
+            margin-top: 2px;
+          }
+        }
+      }
+    }
+
+    .chart-content {
+      flex: 1;
+      margin-bottom: 15px;
+      min-height: 0;
+
+      .echarts {
+        height: 100% !important;
+        min-height: 120px;
+      }
+    }
+
+    .chart-footer {
+      flex-shrink: 0;
+
+      .trend-info {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .trend-item {
+          display: flex;
+          align-items: center;
+          font-size: 0.85rem;
+
+          .trend-up {
+            color: #8b5cf6;
+            margin-right: 3px;
+            font-size: 0.8rem;
+          }
+
+          .trend-icon {
+            color: #409EFF;
+            margin-right: 3px;
+            font-size: 0.8rem;
+          }
+
+          .trend-text {
+            color: #7f8c8d;
+          }
+        }
+      }
+    }
+  }
+
+  // 图表卡片固定高度
+  .el-card {
+    height: 280px;
+    display: flex;
+    flex-direction: column;
+
+    :deep() {
+      .el-card__body {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+      }
+    }
+  }
+
+  // 高级信息卡片和依赖信息卡片不受影响
+  .advanced-info-card,
+  .card {
+    height: auto !important;
+  }
+
+  // 图标卡片高级样式
+  .icon-card {
+    height: 200px;
+    display: flex;
+    flex-direction: column;
+
+    .icon-container {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      cursor: pointer;
+      transition: all 0.3s ease;
+
+      &:hover {
+        transform: translateY(-3px);
+      }
+
+      .icon-header {
+        text-align: center;
+        margin-bottom: 15px;
+        flex-shrink: 0;
+
+        .icon-wrapper {
+          width: 60px;
+          height: 60px;
+          border-radius: 15px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin: 0 auto 12px;
+          color: white;
+          font-size: 1.5rem;
+          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+          transition: all 0.3s ease;
+
+          &:hover {
+            transform: scale(1.1);
+          }
+        }
+
+        .icon-title {
+          font-size: 1rem;
+          font-weight: 600;
+          color: #2c3e50;
+          margin: 0;
+        }
+      }
+
+      .icon-content {
+        flex: 1;
+        margin-bottom: 15px;
+        min-height: 0;
+
+        .icon-description {
+          font-size: 0.85rem;
+          color: #7f8c8d;
+          text-align: center;
+          line-height: 1.4;
+          padding: 0 10px;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+
+      .icon-footer {
+        flex-shrink: 0;
+
+        .icon-stats {
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+          padding: 10px 0;
+          border-top: 1px solid #f0f0f0;
+
+          .stat-item {
+            display: flex;
+            align-items: center;
+            font-size: 0.8rem;
+            color: #7f8c8d;
+
+            .vab-icon {
+              margin-right: 3px;
+              font-size: 0.7rem;
+            }
+
+            span {
+              font-weight: 500;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+// 动画
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 0.5;
+    transform: translate(-50%, -50%) scale(1);
+  }
+  50% {
+    opacity: 0.8;
+    transform: translate(-50%, -50%) scale(1.1);
+  }
+}
+</style>