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

<template>
  <div class="ehr-page">
    <Header />

    <div class="banner max-w-[1400px] mx-auto rounded-2xl pt-2">
      <section class="hero max-w-[1400px] mx-auto">
        <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 max-w-[1400px] mx-auto">
        <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 flex items-center justify-center gap-4 flex-col md:flex-row"
              >
                <!-- ... 图标和内容 ... -->
                <div class="">
                  <img
                    v-if="item.title === '我的待办'"
                    src="../../assets//images/todo.png"
                    alt=""
                    class="h-15 w-15"
                  />
                  <img
                    v-if="item.title === '已办事项'"
                    src="../../assets//images/done.png"
                    alt=""
                    class="h-15 w-15"
                  />
                </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;
                          background: #0a193d;
                        "
                      />
                    </template>
                    <p class="card-number">{{ item.number }}</p>
                  </el-skeleton>
                  <p
                    v-if="item.title === '我的待办'"
                    class="text-[#6b6f99] !text-sm"
                  >
                    待处理的流程
                  </p>
                  <p v-else class="text-[#6b6f99] !text-sm">已完成的流程</p>
                </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>

    <div class="content max-w-[1500px] mx-auto mt-5">
      <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-wrapper">
        <!-- 左侧箭头 -->
        <button
          class="scroll-arrow left"
          @click="scrollTabs('left')"
          :disabled="isLeftDisabled"
        >
          <Icon icon="mdi:chevron-left" />
        </button>

        <!-- Tab 列表容器 -->
        <div
          class="tabs-container"
          ref="tabsContainerRef"
          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>

        <!-- 右侧箭头 -->
        <button
          class="scroll-arrow right"
          @click="scrollTabs('right')"
          :disabled="!isLeftDisabled"
        >
          <Icon icon="mdi:chevron-right" />
        </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-type-badge">
              <span>{{ item.type }}</span>
            </div>
            <div class="item-top">
              <div
                class="item-icon"
                :style="{
                  // 将主题色作为渐变的主色调传入，或者直接在这里写死渐变逻辑
                  '--theme-color': getIconTheme(item).color,
                  '--theme-soft': getIconTheme(item).softColor,
                }"
              >
                <Icon
                  :icon="item.icon || 'mdi:file-document-outline'"
                  :color="getIconTheme(item).color"
                />
              </div>
            </div>
            <div class="item-body">
              <h3 class="item-name text-white/90">
                {{ item.flowName }}
              </h3>
            </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;

// 1. 定义 Ref
const tabsContainerRef = ref(null);
const isLeftDisabled = ref(true);
const isRightDisabled = ref(true);

// 2. 滚动逻辑
const scrollTabs = (direction) => {
  const container = tabsContainerRef.value;
  if (!container) return;

  // 每次滚动的距离，可以根据需求调整，例如 200px 或 container.clientWidth / 2
  const scrollAmount = 200;

  if (direction === "left") {
    container.scrollBy({ left: -scrollAmount, behavior: "smooth" });
  } else {
    container.scrollBy({ left: scrollAmount, behavior: "smooth" });
  }
};

// 3. 更新箭头禁用状态
const updateArrowState = () => {
  const container = tabsContainerRef.value;
  if (!container) return;

  const { scrollLeft, scrollWidth, clientWidth } = container;

  // 如果滚动条在最左边（容差1px），禁用左箭头
  isLeftDisabled.value = scrollLeft <= 1;

  // 如果滚动条在最右边（容差1px），禁用右箭头
  // Math.ceil 处理小数像素问题
  isRightDisabled.value =
    Math.ceil(scrollLeft + clientWidth) >= scrollWidth - 1;
};

// 4. 监听滚动事件
const handleTabScroll = () => {
  updateArrowState();
};

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("打开链接失败，请重试");
          //   },
          // });
          if (window.dd) {
            const targetUrl = item.appUrl;
            if (targetUrl) {
              dd.biz.util.openLink({
                url: targetUrl,
                onSuccess: () => {},
                onFail: (err) => {
                  // loading.close();
                  ElMessage.error("打开链接失败，请重试");
                },
              });
            } else {
              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: () => {},
                      onFail: (err) => {
                        ElMessage.error("跳转失败，请重试");
                      },
                    });
                  }, 2000);
                },
                onFail: (err) => {
                  ElMessage.error("打开链接失败，请重试");
                },
              });
            }
          } else if (window.DingTalkPC) {
            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);
          } else {
            console.log("❌ 非钉钉环境");
          }
        } 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();
  updateArrowState();
  // 添加滚动监听
  if (tabsContainerRef.value) {
    tabsContainerRef.value.addEventListener("scroll", handleTabScroll);
  }
  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();

  if (tabsContainerRef.value) {
    tabsContainerRef.value.removeEventListener("scroll", handleTabScroll);
  }
});
</script>

<style scoped>
:global(body) {
  background-color: #f8fafc;
}

.banner {
  position: relative;
  margin-top: 20px; /* 使用 margin 代替 top 以避免脱离文档流导致的重叠 */
  height: auto; /* 允许高度自适应，或者设置一个最小高度 */
  min-height: 300px;
  /* 设置背景图 */
  background: url("../../assets//images/flwoBanner.png"); /* 或者使用变量 if defined in script */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border: 2px solid #061338;
}

.hero {
  position: relative;
  padding: 20px 6vw 48px;
  overflow: hidden;

  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: #fff;
  font-weight: bold;
}

.hero-desc {
  font-size: 16px;
  color: #a7a0b1;
  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: 36px;
  border-radius: 20px;
  background: #08132e;
  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;
}

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

.el-tab-item.is-active {
  color: #fff !important;
  /* background: linear-gradient(
    180deg,
    rgba(92, 103, 238, 0.32),
    rgba(36, 53, 118, 0.3)
  ) !important; */

  background: linear-gradient(
    360deg,
    #003be0 0%,
    rgba(10, 65, 227, 0.6) 10%,
    #001c71 40%,
    #000c33 80%
  ) !important;

  padding-bottom: 22px;
  padding-top: 22px;
  border-radius: 0;

  position: relative;
}

.el-tab-item.is-active::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 100%;
  height: 2px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(
    to right,
    #5887f8 0%,
    #69b5f8 30%,
    #fff 50%,
    #69b5f8 70%,
    #5887f8 100%
  );
  box-shadow: 0 0 12px rgba(112, 120, 255, 0.95);
}

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

.tab-label {
  line-height: 1;
}

.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 {
  position: relative;
  --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; */
  align-items: center;
  gap: 18px;
  padding: 18px 22px 18px;
  border-radius: 10px;
  background: rgb(11, 15, 46);
  border: 1px solid #262360;
  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;
}

.item-type-badge {
  position: absolute;
  top: 12px; /* 距离顶部的距离 */
  right: 12px; /* 距离右侧的距离 */
  z-index: 10; /* 确保在最上层 */
}

.item-type-badge span {
  font-size: 10px;
  color: #869ac2; /* 原有颜色 */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: color 0.2s ease;
}

.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: 42px;
  height: 42px;
  border-radius: 16px;

  display: grid;
  place-items: center;
  font-size: 20px;

  /* --- 新增：毛玻璃渐变效果 --- */
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.02) 100%
  );

  /* 2. 边框：增加一个极细的半透明白色边框，增强玻璃边缘感 */
  border: 1px solid rgba(255, 255, 255, 0.1);

  /* 3. 毛玻璃核心属性：模糊背景元素 */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* 4. 阴影：增加一点内阴影和外阴影，提升立体感 */
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 0 12px var(--theme-soft); /* 这里用主题色做外发光 */

  /* 原有过渡效果 */
  transition:
    transform 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

/* 保持原有的 Hover 效果，但需要适配新的玻璃风格 */
.item-card:hover .item-icon {
  /* Hover 时：背景变为实心主题色，或者更亮的玻璃效果 */
  background: var(--theme-color);
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -12px var(--theme-color);
}

.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: 14px;

  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 {
  position: relative; /* 必须设置为 relative，作为伪元素的定位基准 */
  width: 300px;
  /* 内部背景保持深色半透明 */
  background: rgba(5, 15, 46, 0.85);
  border-radius: 16px;
  padding: 20px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  /* 移除原有的普通边框和阴影，由伪元素接管视觉效果 */
  border: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); /* 增加一点投影增强立体感 */

  transition: transform 0.3s ease;
  cursor: pointer;
  overflow: hidden; /* 关键：隐藏伪元素溢出的部分 */
  z-index: 1; /* 确保内容在发光边框之上 */
}

/* 霓虹发光边框层 */
.total-card::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  /* 彩色圆锥渐变：包含蓝、紫、粉、青等霓虹色 */
  background: conic-gradient(
    transparent,
    #02409b,
    #00d2ff,
    #7c3aed,
    #db2777,
    transparent 30%
  );
  animation: rotate-border 4s linear infinite; /* 旋转动画 */
  z-index: -2;
}

/* 内部遮罩层：用于覆盖中间区域，只露出边缘形成边框 */
.total-card::after {
  content: "";
  position: absolute;
  inset: 1px; /* 这里控制边框宽度，2px 即边框宽 */
  background: rgba(
    5,
    15,
    46,
    0.92
  ); /* 与卡片背景一致，稍微不透明一点以遮盖旋转背景 */
  border-radius: 14px; /* 比父容器小一点 */
  z-index: -1;
}

/* 悬停时增强发光效果 */
.total-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 20px rgba(2, 64, 155, 0.4); /* 整体外发光 */
}

/* 悬停时加速旋转或改变亮度（可选） */
.total-card:hover::before {
  filter: brightness(1.2); /* 悬停时更亮 */
}

/* 定义旋转动画 */
@keyframes rotate-border {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 保持原有内部文字样式不变，但确保它们在最上层 */
.card-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #f9f9f9;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  position: relative; /* 确保图标层级 */
  z-index: 2;
}

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

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

.card-title {
  font-size: 14px;
  color: #a7a0b1; /* 调整为浅色以适配深色背景 */
  margin-bottom: 4px;
}

.card-number {
  font-size: 28px;
  font-weight: 600;
  color: #ffffff; /* 数字改为白色 */
}

.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 */
}

.tabs-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

/* 修改：原有的 .tabs-container 去掉 margin-bottom，因为现在由 wrapper 控制间距 */
.tabs-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #192754;
  padding-left: 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
  flex: 1; /* 占据中间剩余空间 */
  mask-image: linear-gradient(
    to right,
    transparent,
    black 20px,
    black 98%,
    transparent
  ); /* 可选：添加两侧渐变遮罩效果 */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black 20px,
    black 98%,
    transparent
  );
}

.tabs-container::-webkit-scrollbar {
  display: none;
}

/* 新增：箭头按钮样式 */
.scroll-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  z-index: 10;
  width: 30px;
  height: 30px;
  border-radius: 50%;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #64748b;
  transition: all 0.2s ease;
  opacity: 0; /* 默认隐藏，鼠标悬停容器或需要时显示，或者始终显示但禁用时变灰 */
  visibility: hidden;
}

/* 当容器被悬停时显示箭头，或者你可以去掉这个限制让它始终显示 */
.tabs-wrapper:hover .scroll-arrow {
  opacity: 1;
  visibility: visible;
}

.scroll-arrow.left {
  left: 0;
}

.scroll-arrow.right {
  right: 0;
}

.scroll-arrow:hover:not(:disabled) {
  color: #02409b;
}

.scroll-arrow:disabled {
  /* background-color: #f8fafc; */
  color: #cbd5e1;
  cursor: not-allowed;
  box-shadow: none;
  border-color: #f1f5f9;
  opacity: 0.6;
  visibility: visible; /* 禁用时也要可见以展示状态 */
}

/* 确保 Tab 项不会被箭头遮挡太多，可以在容器两侧加一点 padding */
.tabs-container {
  /* 在原有样式基础上增加左右 padding，防止第一个和最后一个 Tab 被箭头完全遮住 */
  padding: 0 40px;
}
</style>