yf-portal-vue/src/views/flow/index.vue

<template>
  <div class="ehr-page">
    <Header />
    <section class="hero">
      <div class="hero-inner">
        <!-- 判断上下午 -->
        <h1 class="hero-title">
          {{ getGreeting() }}，{{ userStore.getUser.nickname }}
        </h1>
        <p class="hero-desc">
          今天是 {{ new Date().toLocaleDateString() }}。您有
          {{ stats[0].number }}条流程待处理。
        </p>
      </div>
    </section>

    <!-- 任务统计 -->
    <section class="total">
      <div class="total-card" v-for="(item, index) in stats" :key="index">
        <el-popover
          placement="top"
          :width="100"
          trigger="hover"
          popper-class="glass-popover"
          :disabled="getDetailList(index).length === 0"
          transition="el-zoom-in-left"
        >
          <template #reference>
            <div class="card-wrapper">
              <!-- ... 图标和内容 ... -->
              <div class="card-icon" :style="{ backgroundColor: item.bgcolor }">
                <Icon :icon="item.icon" :color="item.color" />
              </div>
              <div class="card-content">
                <p class="card-title">{{ item.title }}</p>
                <el-skeleton :rows="1" :animated="true" :loading="statsLoading">
                  <template #template>
                    <el-skeleton-item
                      variant="text"
                      style="width: 60%; height: 32px; border-radius: 50px"
                    />
                  </template>
                  <p class="card-number">{{ item.number }}</p>
                </el-skeleton>
              </div>
            </div>
          </template>

          <div class="detail-list">
            <div
              v-for="(task, idx) in getDetailList(index)"
              :key="idx"
              class="detail-item"
              @click="handleDetailClick(task, item.title)"
            >
              <span class="detail-name">{{ task.name }}</span>
              <span class="detail-val">{{ task.value }}</span>
            </div>
            <div v-if="getDetailList(index).length === 0" class="empty-tip">
              暂无详细数据
            </div>
          </div>
        </el-popover>
      </div>
    </section>

    <div class="content">
      <div class="search-bar">
        <div class="search-input">
          <Icon icon="mdi:magnify" class="search-icon" />
          <input
            v-model.trim="searchKeyword"
            type="text"
            class="search-field"
            placeholder="搜索流程名称"
          />
        </div>
        <span v-if="searchKeyword" class="search-meta">
          共找到 {{ displayedFlows.length }} 条结果
        </span>
      </div>

      <div class="tabs-container" role="tablist" aria-label="EHR模块">
        <button
          class="el-tab-item"
          type="button"
          role="tab"
          :class="{ 'is-active': activeKey === 'all' }"
          :aria-selected="activeKey === 'all'"
          @click="setAll"
        >
          <span class="tab-label">全部</span>
        </button>
        <button
          v-for="tab in tabs"
          :key="tab.groupName"
          class="el-tab-item"
          :class="{ 'is-active': tab.groupName === activeKey }"
          type="button"
          role="tab"
          :aria-selected="tab.groupName === activeKey"
          @click="getById(tab)"
        >
          <span class="tab-label">{{ tab.groupName }}</span>
        </button>
      </div>

      <div role="tabpanel">
        <div v-if="displayedFlows.length" class="items-grid">
          <div
            v-for="item in displayedFlows"
            :key="item.id"
            class="item-card"
            :style="{
              '--item-accent': getIconTheme(item).color,
              '--item-accent-soft': getIconTheme(item).softColor,
              '--item-accent-hover': getIconTheme(item).hoverColor,
            }"
            @click="go(item)"
          >
            <div class="item-top">
              <div
                class="item-icon"
                :style="{ backgroundColor: getIconTheme(item).softColor }"
              >
                <Icon
                  :icon="item.icon || 'mdi:file-document-outline'"
                  :color="getIconTheme(item).color"
                />
              </div>

              <div>
                <span
                  class="text-[10px] font-bold text-slate-300 uppercase tracking-widest group-hover:text-blue-200"
                  >{{ item.type }}</span
                >
              </div>
            </div>
            <div class="item-body">
              <h3 class="item-name font-bold text-slate-900">
                {{ item.flowName }}
              </h3>
              <p class="item-desc">{{ item.remark || "暂无描述" }}</p>
            </div>

            <!-- <div class="flex justify-between">
              <div class="item-time flex items-center gap-2">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="1em"
                  height="1em"
                  viewBox="0 0 24 24"
                >
                  <g
                    fill="none"
                    stroke="#f97316"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="1.5"
                  >
                    <path
                      d="M15.362 5.214A8.252 8.252 0 0 1 12 21A8.25 8.25 0 0 1 6.038 7.047A8.3 8.3 0 0 0 9 9.601a8.98 8.98 0 0 1 3.361-6.867a8.2 8.2 0 0 0 3 2.48"
                    ></path>
                    <path
                      d="M12 18a3.75 3.75 0 0 0 .495-7.468a6 6 0 0 0-1.925 3.547a6 6 0 0 1-2.133-1.001A3.75 3.75 0 0 0 12 18"
                    ></path>
                  </g>
                </svg>
                <span class="text-[12px] text-[#babdd1]">提交流程</span>
              </div>
              <Icon icon="mdi-light:chevron-right" class="item-arrow w-6 h-6" />
            </div> -->
          </div>
        </div>
        <div v-else class="empty-state">
          <Icon icon="mdi:file-search-outline" class="empty-icon" />
          <p class="empty-title">没有找到相关流程</p>
          <p class="empty-desc">试试换个名称关键词搜索</p>
        </div>
      </div>
    </div>

    <Footer />
  </div>
</template>

<script setup>
import Header from "@components/home/header.vue";
import Footer from "@components/home/Footer.vue";
import { computed, ref, onMounted, onBeforeUnmount, nextTick } from "vue";
import { Icon } from "@iconify/vue";
import { getFlows, ssoLogin, getOATasks, getCRMTasks } from "@/api/user";
import { useUserStore } from "@/stores/useUserStore";
import { getAccessToken } from "@/utils/auth";
import * as echarts from "echarts";
import { useRouter } from "vue-router";
import dd from "dingtalk-jsapi";
const router = useRouter();
import { ElLoading, ElMessage } from "element-plus";
const userStore = useUserStore();

const lineChartInstance = ref(null);
let lineChartRef = ref(null);
let pieChartRef = ref(null);
const pieChartInstance = ref(null);
let chartResizeObserver = null;
let chartInitTimer = null;

const initChartsSafe = (attempt = 0) => {
  const lineDom = lineChartRef.value;
  const pieDom = pieChartRef.value;

  if (!lineDom || !pieDom) return;

  const lineRect = lineDom.getBoundingClientRect();
  const pieRect = pieDom.getBoundingClientRect();
  const isLineReady = lineRect.width > 0 && lineRect.height > 0;
  const isPieReady = pieRect.width > 0 && pieRect.height > 0;

  if (isLineReady && isPieReady) {
    initLineChart();
    initPieChart();
    handleResize();
    return;
  }

  if (attempt < 8) {
    chartInitTimer = window.setTimeout(() => {
      initChartsSafe(attempt + 1);
    }, 120);
  }
};

const getGreeting = () => {
  const hour = new Date().getHours();
  if (hour < 12) return "早上好";
  if (hour < 18) return "下午好";
  return "晚上好";
};

// 模拟数据 - 请根据实际 API 返回的数据调整
const lineChartData = {
  title: "流程处理趋势 (30天)",
  xAxis: ["03-27", "03-28", "03-29", "03-30", "03-31", "04-01", "04-02"],
  yAxis: [12, 18, 15, 20, 27, 24, 31],
};

const pieChartData = {
  title: "流程类型占比",
  seriesData: [
    { name: "财务报销", value: 35, itemStyle: { color: "#409eff" } },
    { name: "行政办公", value: 25, itemStyle: { color: "#f56c6c" } },
    { name: "IT技术", value: 20, itemStyle: { color: "#9a66ff" } },
    { name: "人力资源", value: 15, itemStyle: { color: "#e6a23c" } },
    { name: "业务申请", value: 5, itemStyle: { color: "#50c878" } },
  ],
};

const getDetailList = (index) => {
  switch (index) {
    case 0: // 我的待办
      return todoCount.value;
    case 1: // 已办事项
      return doneCount.value;
    case 2: // 发起流程
      return startCount.value;
    case 3: // 草稿箱
      return drafts.value;
    default:
      return [];
  }
};
// 初始化图表
const initLineChart = () => {
  const chartDom = lineChartRef.value;
  if (!chartDom) return;

  const chart = echarts.init(chartDom);
  lineChartInstance.value = chart; // 保存实例

  chart.setOption({
    title: {
      text: lineChartData.title,
      left: "10",
      top: 20,

      textStyle: {
        fontSize: 16,
        fontWeight: "bold",
        color: "#333",
      },
    },
    // ... 原有的 option 配置保持不变 ...
    tooltip: {
      trigger: "axis",
      axisPointer: { type: "shadow" },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "10%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: lineChartData.xAxis,
      axisLabel: { formatter: (value) => value },
    },
    yAxis: {
      type: "value",
      splitLine: { show: true, lineStyle: { color: "#eee" } },
    },
    series: [
      {
        name: "处理数量",
        type: "line",
        smooth: true,
        areaStyle: {
          opacity: 0.3,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#409eff" },
            { offset: 1, color: "#b3d8ff" },
          ]),
        },
        lineStyle: { width: 3, color: "#2563eb" },
        symbol: "circle",
        symbolSize: 8,
        data: lineChartData.yAxis,
      },
    ],
  });
};

const initPieChart = () => {
  const chartDom = pieChartRef.value;
  if (!chartDom) return;

  const chart = echarts.init(chartDom);
  pieChartInstance.value = chart; // 保存实例

  chart.setOption({
    title: {
      text: pieChartData.title,
      left: "10",
      top: 20,

      textStyle: {
        fontSize: 16,
        fontWeight: "bold",
        color: "#333",
      },
    },
    // ... 原有的 option 配置保持不变 ...
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c} ({d}%)",
    },
    legend: { show: false },
    series: [
      {
        name: "流程类型",
        type: "pie",
        radius: ["50%", "70%"],
        avoidLabelOverlap: false,
        label: { show: false, position: "center" },
        emphasis: {
          label: { show: true, fontSize: "14", fontWeight: "bold" },
        },
        labelLine: { show: false },
        data: pieChartData.seriesData,
      },
    ],
  });
};

const handleResize = () => {
  lineChartInstance.value?.resize();
  pieChartInstance.value?.resize();
};

const tabs = ref([]);

const activeKey = ref("all");
const searchKeyword = ref("");

const iconPalette = [
  {
    color: "#2563eb",
    softColor: "rgba(37, 99, 235, 0.12)",
    hoverColor: "rgba(37, 99, 235, 0.18)",
  },
  {
    color: "#db2777",
    softColor: "rgba(219, 39, 119, 0.12)",
    hoverColor: "rgba(219, 39, 119, 0.18)",
  },
  {
    color: "#ea580c",
    softColor: "rgba(234, 88, 12, 0.12)",
    hoverColor: "rgba(234, 88, 12, 0.18)",
  },
  {
    color: "#059669",
    softColor: "rgba(5, 150, 105, 0.12)",
    hoverColor: "rgba(5, 150, 105, 0.18)",
  },
  {
    color: "#7c3aed",
    softColor: "rgba(124, 58, 237, 0.12)",
    hoverColor: "rgba(124, 58, 237, 0.18)",
  },
  {
    color: "#0f766e",
    softColor: "rgba(15, 118, 110, 0.12)",
    hoverColor: "rgba(15, 118, 110, 0.18)",
  },
  {
    color: "#dc2626",
    softColor: "rgba(220, 38, 38, 0.12)",
    hoverColor: "rgba(220, 38, 38, 0.18)",
  },
  {
    color: "#ca8a04",
    softColor: "rgba(202, 138, 4, 0.12)",
    hoverColor: "rgba(202, 138, 4, 0.18)",
  },
];

const hashText = (text = "") =>
  String(text)
    .split("")
    .reduce((hash, char) => hash * 31 + char.charCodeAt(0), 0);

const getIconTheme = (item) => {
  const seed = item?.id ?? item?.flowName ?? item?.type ?? "";
  const index = Math.abs(hashText(seed)) % iconPalette.length;
  return iconPalette[index];
};

const allTab = computed(() => {
  const flowRespVOS = tabs.value.flatMap((tab) => tab.flowRespVOS || []);
  return {
    groupName: "全部",
    remark: "全部流程",
    flowRespVOS,
  };
});

const activeTab = computed(() => {
  if (activeKey.value === "all") {
    return allTab.value;
  }

  return (
    tabs.value.find((tab) => tab.groupName === activeKey.value) || allTab.value
  );
});

const displayedFlows = computed(() => {
  const keyword = searchKeyword.value.trim().toLowerCase();

  if (!keyword) {
    return activeTab.value.flowRespVOS || [];
  }

  return (allTab.value.flowRespVOS || []).filter((item) =>
    String(item?.flowName || "")
      .toLowerCase()
      .includes(keyword),
  );
});

const getAll = async () => {
  const res = await getFlows({
    pageNo: 1,
    pageSize: 99,
  });

  tabs.value = res;
};

const setAll = () => {
  activeKey.value = "all";
};

const getById = (tab) => {
  activeKey.value = tab.groupName;
};

const go = async (item) => {
  if (userStore.getUser.username && getAccessToken()) {
    if (item.type === "OA") {
      const res = await ssoLogin({
        username: userStore.getUser.username,
      });
      if (res) {
        const ua = window.navigator.userAgent.toLowerCase();

        if (ua.includes("dingtalk") || ua.includes("dingtalkwork")) {
          // 钉钉环境
          const loading = ElLoading.service({
            lock: true,
            text: "正在跳转，请稍候...",
            background: "rgba(0, 0, 0, 0.7)",
          });

          const targetUrl1 = item.indexUrl + "?ssoToken=" + res + "#/main";
          const targetUrl2 = item.flowUrl;

          dd.biz.util.openLink({
            url: targetUrl1,
            onSuccess: () => {
              setTimeout(() => {
                dd.biz.util.openLink({
                  url: targetUrl2,
                  onSuccess: () => {
                    loading.close();
                  },
                  onFail: (err) => {
                    loading.close();
                    ElMessage.error("跳转失败，请重试");
                  },
                });
              }, 2000);
            },
            onFail: (err) => {
              loading.close();
              ElMessage.error("打开链接失败，请重试");
            },
          });
        } else {
          // 浏览器环境
          const loading = ElLoading.service({
            lock: true,
            text: "正在跳转，请稍候...",
            background: "rgba(0, 0, 0, 0.7)",
          });

          const newTab = window.open("", "_blank");
          newTab.location.href = item.indexUrl + "?ssoToken=" + res + "#/main";

          setTimeout(() => {
            newTab.location.href = item.flowUrl;
            setTimeout(() => {
              loading.close();
            }, 500);
          }, 100);
        }
      }
    }

    if (item.type === "CRM") {
      const ua = window.navigator.userAgent.toLowerCase();
      if (ua.includes("dingtalk") || ua.includes("dingtalkwork")) {
        dd.biz.util.openLink({
          url:
            item.indexUrl +
            "/global/sso/callback/00APEB9EEEA9B2E338B686B7ECFA8585808C.action?token=" +
            getAccessToken(), // 先跳你的 SSO 链接
          onSuccess: () => {
            // 延迟跳目标业务地址（和你原来 setTimeout 逻辑一致）
            setTimeout(() => {
              dd.biz.util.openLink({ url: item.flowUrl });
            }, 100);
          },
        });
      } else {
        const newTab = window.open("", "_blank");
        newTab.location.href =
          item.indexUrl +
          "/global/sso/callback/00APEB9EEEA9B2E338B686B7ECFA8585808C.action?token=" +
          getAccessToken();

        setTimeout(function () {
          newTab.location.href = item.flowUrl;
        }, 100);
      }
    }
  } else {
    router.push({ path: "/login" });
  }
};

const handleDetailClick = (task, categoryTitle) => {
  console.log(`点击了 ${categoryTitle} 中的 ${task.name}: ${task.value}`);
  // 示例：根据类型跳转
  if (task.name === "OA" && categoryTitle === "我的待办") {
    router.push({
      path: "/todo-list",
      query: { type: task.name.toLowerCase() },
    });
  }

  if (task.name === "OA" && categoryTitle === "已办事项") {
    router.push({
      path: "/oa-done-list",
      query: { type: task.name.toLowerCase() },
    });
  }

  if (task.name === "CRM" && categoryTitle === "我的待办") {
    router.push({
      path: "/crm-todo-list",
      query: { type: task.name.toLowerCase() },
    });
  }

  if (task.name === "CRM" && categoryTitle === "已办事项") {
    router.push({
      path: "/crm-done-list",
      query: { type: task.name.toLowerCase() },
    });
  }
};

let oaTasks = ref([]);
let crmTasks = ref([]);
const statsLoading = ref(true);

const stats = ref([
  {
    icon: "mdi:clock-outline",
    title: "我的待办",
    number: 0,
    extra: "+2 今日",
    bgcolor: "#fff7ed",
    color: "#f59e0b",
  },
  {
    icon: "mdi:check-circle-outline",
    title: "已办事项",
    number: 0,
    bgcolor: "#eff6ff",
    color: "#2563eb",
  },
]);

const todoCount = ref([
  { name: "OA", value: 0 },
  { name: "CRM", value: 0 },
]);

// 已办事项
const doneCount = ref([
  { name: "OA", value: 0 },
  { name: "CRM", value: 0 },
]);

onMounted(async () => {
  getAll();
  // 等待 DOM 与样式生效，避免移动端首屏尺寸为 0
  await nextTick();
  requestAnimationFrame(() => {
    initChartsSafe();
    // 添加监听
    window.addEventListener("resize", handleResize);
    // 使用 ResizeObserver 监听容器尺寸变化（移动端更稳定）
    if (typeof ResizeObserver !== "undefined") {
      chartResizeObserver = new ResizeObserver(() => {
        handleResize();
      });
      if (lineChartRef.value) chartResizeObserver.observe(lineChartRef.value);
      if (pieChartRef.value) chartResizeObserver.observe(pieChartRef.value);
    }
  });

  if (userStore.getUser.username) {
    try {
      const res = await getOATasks({
        id: userStore.getUser.username,
        pageNum: 1,
        pageSize: 99,
      });
      oaTasks.value = res;

      const crmRes = await getCRMTasks({
        id: userStore.getUser.username,
        type: "pending",
        pageNum: 1,
        pageSize: 10,
      });
      crmTasks.value = crmRes;

      stats.value[0].number =
        Number(oaTasks.value.todoCount) + Number(crmTasks.value.todoCount);

      todoCount.value = [
        { name: "OA", value: oaTasks.value.todoCount ?? 0 },
        { name: "CRM", value: crmTasks.value.todoCount ?? 0 },
      ];

      // *****************已办事项统计*************************

      const crmDoneRes = await getCRMTasks({
        id: userStore.getUser.username,
        type: "approved",
        pageNum: 1,
        pageSize: 10,
      });

      stats.value[1].number =
        Number(oaTasks.value.doneCount) + Number(crmDoneRes.todoCount);

      doneCount.value = [
        { name: "OA", value: oaTasks.value.doneCount ?? 0 },
        { name: "CRM", value: crmDoneRes.todoCount ?? 0 },
      ];
    } finally {
      statsLoading.value = false;
    }

    setInterval(
      async () => {
        const res = await getOATasks({
          id: userStore.getUser.username,
          pageNum: 1,
          pageSize: 10,
        });
        oaTasks.value = res;

        const crmRes = await getCRMTasks({
          id: userStore.getUser.username,
          type: "pending",
          pageNum: 1,
          pageSize: 10,
        });
        crmTasks.value = crmRes;

        stats.value[0].number =
          Number(oaTasks.value.todoCount) + Number(crmTasks.value.todoCount);

        todoCount.value = [
          { name: "OA", value: oaTasks.value.todoCount ?? 0 },
          { name: "CRM", value: crmTasks.value.todoCount ?? 0 },
        ];

        const crmDoneRes = await getCRMTasks({
          id: userStore.getUser.username,
          type: "approved",
          pageNum: 1,
          pageSize: 10,
        });

        stats.value[1].number =
          Number(oaTasks.value.doneCount) + Number(crmDoneRes.todoCount);

        doneCount.value = [
          { name: "OA", value: oaTasks.value.doneCount ?? 0 },
          { name: "CRM", value: crmDoneRes.todoCount ?? 0 },
        ];
      },
      10 * 60 * 1000,
    ); // 每5分钟刷新一次
  } else {
    statsLoading.value = false;
  }
});

// 组件卸载时移除监听，防止内存泄漏
onBeforeUnmount(() => {
  window.removeEventListener("resize", handleResize);
  chartResizeObserver?.disconnect();
  if (chartInitTimer) window.clearTimeout(chartInitTimer);
  // 可选：销毁 echarts 实例
  lineChartInstance.value?.dispose();
  pieChartInstance.value?.dispose();
});
</script>

<style scoped>
/* .ehr-page {
  color: #1f2a37;
  background: linear-gradient(180deg, #f4f4f2 0%, #f7f6f3 50%, #f2f1ef 100%);
  min-height: 100vh;
} */

:global(body) {
  background-color: #f8fafc;
}

.hero {
  position: relative;
  padding: 72px 6vw 48px;
  overflow: hidden;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hero-inner {
  max-width: 920px;
}

.hero-title {
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.2;
  margin: 16px 0 12px;
  color: #111827;
  font-weight: bold;
}

.hero-desc {
  font-size: 16px;
  color: #4b5563;
  max-width: 720px;
  line-height: 1.8;
}

.hero-accent {
  position: absolute;
  top: -120px;
  right: -140px;
  width: 360px;
  height: 360px;

  border-radius: 50%;
  opacity: 0.9;
  pointer-events: none;
}

.content {
  padding: 0 6vw 80px;
  /* height: 80vh; */
}

.search-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.search-input {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(420px, 100%);
  padding: 0 16px;
  height: 46px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.search-input:focus-within {
  border-color: rgba(2, 64, 155, 0.28);
  box-shadow: 0 12px 28px rgba(2, 64, 155, 0.1);
}

.search-icon {
  flex-shrink: 0;
  font-size: 18px;
  color: #94a3b8;
}

.search-field {
  width: 100%;
  border: none;
  background: transparent;
  outline: none;
  font-size: 14px;
  color: #0f172a;
}

.search-field::placeholder {
  color: #94a3b8;
}

.search-meta {
  flex-shrink: 0;
  font-size: 13px;
  color: #64748b;
}

.tabs-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e4e7ed; /* Element Plus 标准的分割线颜色 */
  margin-bottom: 20px;
  padding-left: 0;
  overflow-x: auto; /* 防止Tab过多时溢出 */
}

.el-tab-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  height: 40px; /* 标准高度 */
  font-size: 14px;
  color: #64748b; /* Element Plus 主要文字颜色 */
  background-color: transparent;
  border: none;
  border-bottom: 2px solid transparent; /* 用于激活态的下划线 */
  cursor: pointer;
  transition: all 0.3s;
  margin-right: 0;
  outline: none;
  flex-shrink: 0; /* 防止压缩 */
}

.el-tab-item:hover {
  color: #02409b; /* Element Plus 主题蓝 */
}

.el-tab-item.is-active {
  color: #02409b; /* 激活态文字颜色 */
  font-weight: 500;
  border-bottom-color: #02409b; /* 激活态下划线 */
}

.tab-label {
  line-height: 1;
  font-weight: bold;
}

.tab-sub {
  margin-left: 8px;
  font-size: 12px;
  color: #909399; /* 次要文字颜色 */
  transform: scale(0.9);
}

.panel {
  background: #ffffff;
  border-radius: 24px;
  padding: 28px 28px 32px;

  box-shadow: 0 26px 48px rgba(15, 23, 42, 0.08);
}

.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;

  padding-bottom: 20px;
  margin-bottom: 24px;
}

.panel-title {
  font-size: 22px;
  color: #111827;
  margin-bottom: 6px;
}

.panel-subtitle {
  color: #6b7280;
  font-size: 14px;
}

.panel-meta {
  text-align: right;
  color: #6b7280;
  font-size: 12px;
}

.panel-count {
  display: block;
  font-size: 20px;
  font-weight: 600;
  color: #111827;
}

.items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 240px);
  justify-content: flex-start;
  gap: 16px;
}

.item-card {
  --item-accent: #2563eb;
  --item-accent-soft: rgba(37, 99, 235, 0.12);
  --item-accent-hover: rgba(37, 99, 235, 0.18);
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px 22px 18px;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid rgb(241, 245, 249);
  box-shadow:
    rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
  cursor: pointer;
  border-bottom: 1px solid rgb(241, 245, 249);
}

.item-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
  color: #02409b !important;
}

.item-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.item-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.item-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;

  display: grid;
  place-items: center;
  font-size: 20px;
  transition:
    transform 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}

.item-icon :deep(svg) {
  width: 24px;
  height: 24px;
  transition: color 0.2s ease;
}

.item-card:hover .item-icon {
  background: var(--item-accent) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -12px var(--item-accent);
}

.item-card:hover .item-icon :deep(svg) {
  color: #ffffff !important;
}

.item-role {
  font-size: 12px;
  letter-spacing: 0.2em;
  color: #c7ced9;
  font-weight: 600;
}

.item-name {
  font-size: 16px;

  line-height: 1.45;
  /* font-weight: 600; */
}

.item-desc {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.6;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 240px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px dashed #dbe3ee;
  color: #64748b;
}

.empty-icon {
  font-size: 42px;
  color: #94a3b8;
}

.empty-title {
  font-size: 16px;
  font-weight: 600;
  color: #334155;
}

.empty-desc {
  font-size: 13px;
  color: #94a3b8;
}

.item-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #94a3b8;
  font-size: 12px;
}

.item-usage {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.item-flame {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 108, 0, 0.12);
  color: #ff6c00;
  font-size: 12px;
}

.item-arrow {
  font-size: 22px;
  color: #cbd5e1;
}

@media (max-width: 720px) {
  .hero {
    padding: 56px 7vw 36px;
  }

  .search-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .search-input {
    width: 100%;
  }

  .panel-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .panel-meta {
    text-align: left;
  }

  .items-grid {
    grid-template-columns: 1fr;
  }
}

.total {
  display: flex;
  gap: 16px;
  padding: 0 6vw 50px;
  /* margin-bottom: 24px; */
}

.total-card {
  /* flex: 1; */
  width: 300px;
  background: #ffffff;
  border-radius: 16px;
  padding: 20px;
  box-shadow:
    rgba(0, 0, 0, 0.05) 0px 1px 3px 0px,
    rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0.05) 0px 1px 2px 0px,
    rgba(0, 0, 0, 0.05) 0px 2px 4px -1px,
    rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  cursor: pointer;
  /* border: 1px solid #e5e7eb; */
  /* border-top: solid 5px #02409b; */
  overflow: visible;
}

.total-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
  color: #02409b !important;
}

.card-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #f9f9f9;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.card-icon svg {
  width: 20px;
  height: 20px;
  color: var(--primary-color);
}

.card-content {
  flex: 1;
  text-align: left;
}

.card-title {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 4px;
}

.card-number {
  font-size: 28px;
  font-weight: 600;
  /* color: #111827; */
}

.card-extra {
  font-size: 12px;
  color: #10b981;
  margin-top: 8px;
  text-align: right;
}

.charts-container {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 0 6vw;
  margin-bottom: 80px;
  width: 100%;
  box-sizing: border-box;
}

.chart-item {
  flex: 1;
  /* 桌面端最小宽度，防止过度挤压 */
  min-width: 300px;
  /* 必须设置固定高度，ECharts 需要明确的高度才能渲染 */
  height: 350px;
  border-radius: 16px;
  background-color: #ffffff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  position: relative;
}

:global(.glass-popover) {
  background: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  height: 200px !important;
  width: 100px !important;
  overflow-y: hidden !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
  border-radius: 8px !important;
  padding: 10px !important;
  color: #fff !important;
  z-index: 2000 !important; /* 确保在最上层 */
  top: 15% !important; /* 根据需要调整位置 */
}

:global(.glass-popover .el-popper__arrow::before) {
  background: transparent !important;
  /* border: 1px solid rgba(255, 255, 255, 0.1); */
  border: none !important;
}

.detail-list {
  padding: 5px 0;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 14px;
  color: #e0e0e0; /* 浅色文字 */
  line-height: 1.5;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer; /* 鼠标变成手型 */
  transition: background-color 0.2s ease;
}

.detail-item:last-child {
  margin-bottom: 0;
}

/* 鼠标悬浮背景变灰 */
.detail-item:hover {
  background-color: rgba(
    255,
    255,
    255,
    0.15
  ); /* 半透明白色，视觉上为灰色高亮 */
}

.detail-name {
  color: #ccc;
}

.detail-val {
  font-weight: bold;
  color: #fff;
}

.empty-tip {
  text-align: center;
  color: #aaa;
  font-size: 12px;
  padding: 10px 0;
}

.item-arrow {
  transition: all 0.3s ease;
  color: #cbd5e1; /* 默认颜色 */
}

/* 2. 当卡片悬浮时，改变箭头的样式 */
.item-card:hover .item-arrow {
  color: #02409b; /* 变蓝 (使用你主题中的蓝色) */
  transform: translateX(4px); /* 向右平移 4px */
}
</style>