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

<template>
  <div class="portal-home min-h-screen" :style="homeBackgroundStyle">
    <div v-if="showDingTalkLoginMask" class="portal-login-mask">
      <div class="portal-login-mask__content">
        <div class="portal-login-mask__spinner"></div>
        <p class="portal-login-mask__text">正在登录，请稍候...</p>
      </div>
    </div>
    <Header />

    <main class="px-5 md:px-20 pb-8 pt-20">
      <section class="hero-banner overflow-hidden rounded-[6px] relative">
        <div class="">
          <!-- 轮播容器 -->
          <div class="carousel-container relative h-[50%]">
            <!-- 轮播项 -->
            <div
              class="carousel-slide absolute inset-0 transition-opacity duration-500 ease-in-out"
              v-for="(slide, index) in slides"
              :key="index"
              v-show="currentIndex === index"
              :class="{
                'opacity-100': currentIndex === index,
                'opacity-0': currentIndex !== index,
                'z-10': currentIndex === index,
                'z-0 pointer-events-none': currentIndex !== index,
              }"
            >
              <div class="hero-copy carousel-caption">
                <p class="hero-text mt-6 text-[30px]!">
                  {{ slide.text }}
                </p>
              </div>

              <!-- 轮播背景图 -->
              <div class="hero-visual absolute inset-0">
                <img
                  :src="slide.image"
                  alt="Banner"
                  class="w-full h-full object-cover"
                />
              </div>
            </div>

            <!-- 指示器 -->
            <div
              class="carousel-indicators absolute bottom-4 left-1/2 z-30 flex transform -translate-x-1/2 space-x-2"
            >
              <span
                v-for="(_, i) in slides"
                :key="i"
                @click="currentIndex = i"
                :class="{
                  'bg-[#0c4eb5]': currentIndex === i,
                  'bg-[#2f333c]/50': currentIndex !== i,
                }"
                class="w-3 h-3 rounded-full transition-colors"
              ></span>
            </div>
          </div>
        </div>
      </section>

      <section class="portal-mobile-shortcuts mt-3 md:hidden!">
        <button
          type="button"
          class="portal-mobile-shortcut flex flex-col items-center justify-center cursor-pointer"
          @click="router.push('/flow')"
        >
          <img src="../assets//images/flow.png" alt="" class="w-10 h-10" />
          {{ $t("nav.flow") }}
        </button>
        <button
          v-hasPermi="['portal:dashboard:view']"
          type="button"
          class="portal-mobile-shortcut flex flex-col items-center justify-center cursor-pointer"
          @click="router.push('/drive')"
        >
          <img src="../assets//images/driveicon.png" alt="" class="w-10 h-10" />
          {{ $t("nav.drive") }}
        </button>
        <button
          type="button"
          class="portal-mobile-shortcut flex flex-col items-center justify-center cursor-pointer"
        >
          <img src="../assets//images/report.png" alt="" class="w-10 h-10" />
          {{ $t("nav.report") }}
        </button>
      </section>

      <section class="mt-3 grid gap-4 xl:grid-cols-[1.74fr_0.74fr] grid-cols-1">
        <div class="space-y-4">
          <div class="top-nav-bar">
            <!-- 中间搜索框 -->
            <div class="search-container hidden! md:flex!">
              <Icon icon="mdi:magnify" class="search-icon" />
              <input
                v-model="searchKeyword"
                type="text"
                :placeholder="$t('flow.palceholder')"
                class="search-input"
                @keyup.enter="handleSearch"
              />
              <!-- <span class="shortcut-key">⌘K</span> -->
            </div>

            <!-- 右侧快捷入口 -->
            <div class="quick-access">
              <el-dropdown
                trigger="click"
                popper-class="quick-access-dropdown"
                @command="handleQuickAccessCommand"
              >
                <button type="button" class="quick-btn quick-btn--dropdown">
                  <img src="../assets//images//td.png" class="w-5 h-5" alt="" />
                  <span class="btn-label quick-btn__meta">{{
                    $t("flow.todo")
                  }}</span>
                  <span class="quick-btn__count quick-btn__count--todo">{{
                    todo
                  }}</span>
                  <!-- <Icon icon="mdi:chevron-down" class="quick-btn__arrow" /> -->
                </button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="todo-oa">
                      <div class="p-2 flex items-center gap-3 text-[#e26669]!">
                        <span>OA</span>
                        <span>{{ oatodo }}</span>
                      </div>
                    </el-dropdown-item>
                    <el-dropdown-item command="todo-crm">
                      <div class="p-2 flex items-center gap-3 text-[#e26669]!">
                        <span>CRM</span>
                        <span>{{ crmtodo }}</span>
                      </div>
                    </el-dropdown-item>
                    <el-dropdown-item command="todo-srm">
                      <div class="p-2 flex items-center gap-3 text-[#e26669]!">
                        <span>SRM</span>
                        <span>{{ srmtodo }}</span>
                      </div>
                    </el-dropdown-item>

                    <el-dropdown-item command="todo-ehr">
                      <div class="p-2 flex items-center gap-3 text-[#e26669]!">
                        <span>EHR</span>
                        <span>{{ ehrtodo }}</span>
                      </div>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
              <el-dropdown
                trigger="click"
                popper-class="quick-access-dropdown"
                @command="handleQuickAccessCommand"
              >
                <button type="button" class="quick-btn quick-btn--dropdown">
                  <Icon icon="mdi:check" class="btn-icon" />
                  <span class="btn-label quick-btn__meta">{{
                    $t("flow.done")
                  }}</span>
                  <span
                    class="p-2 inline-block quick-btn__count quick-btn__count--done"
                    >{{ done }}</span
                  >
                  <!-- <Icon icon="mdi:chevron-down" class="quick-btn__arrow" /> -->
                </button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="done-oa">
                      <div class="p-2 flex items-center gap-3 text-[#2da04d]!">
                        <span>OA</span>
                        <span>{{ oadone }}</span>
                      </div>
                    </el-dropdown-item>
                    <el-dropdown-item command="done-crm">
                      <div class="p-2 flex items-center gap-3 text-[#2da04d]!">
                        <span>CRM</span>
                        <span>{{ crmdone }}</span>
                      </div></el-dropdown-item
                    >

                    <el-dropdown-item command="done-srm">
                      <div class="p-2 flex items-center gap-3 text-[#2da04d]!">
                        <span>SRM</span>
                        <span>{{ srmdone }}</span>
                      </div></el-dropdown-item
                    >
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
          <article
            v-for="section in filteredSections"
            :key="section.code"
            class="platform-block rounded-sm md:flex"
            :style="{ minHeight: section.height }"
          >
            <div class="platform-block__header">
              <img
                v-if="section.code === '数'"
                src="../assets//images/icon.png"
                alt=""
                class="w-20 h-20"
              />
              <img
                v-if="section.code === '智'"
                src="../assets//images/icon2.png"
                alt=""
                class="w-18 h-18"
              />
              <img
                v-if="section.code === 'AI'"
                src="../assets//images/icon3.png"
                alt=""
                class="w-20 h-20"
              />
              <div class="platform-block__title-wrap">
                <p class="platform-block__title">{{ section.title }}</p>
                <span class="platform-block__subtitle">{{
                  section.subtitle
                }}</span>
              </div>
            </div>

            <div
              v-if="section.apps?.length"
              class="grid grid-cols-[repeat(2,minmax(0,1fr))] gap-2 p-6 px-3 md:px-4 md:grid-cols-[repeat(3,minmax(0,1fr))] xl:grid-cols-[repeat(3,minmax(0,1fr))]"
            >
              <template
                v-for="(app, appIndex) in section.apps"
                :key="`${section.code}-${appIndex}-${app.label}`"
              >
                <button
                  v-if="app.key === 'fm'"
                  v-hasPermi="['portal:financial:view']"
                  type="button"
                  :class="[
                    'platform-app',
                    boldLabes.includes(app.label)
                      ? 'platform-app--active'
                      : 'platform-app--ghost',
                  ]"
                  @click="handlePortalAppClick(app)"
                >
                  <span class="platform-app__icon">
                    <img
                      v-if="app.image"
                      :src="app.image"
                      :alt="app.label"
                      class="h-7 w-7 object-contain rounded-md"
                    />
                    <Icon
                      v-else
                      :icon="app.icon || 'mdi:dots-grid'"
                      class="text-[24px]"
                    />
                  </span>
                  <span
                    class="platform-app__label md:text-sm text-[12px] text-left"
                    >{{ app.label }}</span
                  >
                </button>
                <button
                  v-else
                  type="button"
                  :class="[
                    'platform-app',
                    boldLabes.includes(app.label)
                      ? 'platform-app--active'
                      : 'platform-app--ghost',
                  ]"
                  @click="handlePortalAppClick(app)"
                >
                  <span class="platform-app__icon">
                    <img
                      v-if="app.image"
                      :src="app.image"
                      :alt="app.label"
                      class="h-7 w-7 object-contain rounded-md"
                    />
                    <Icon
                      v-else
                      :icon="app.icon || 'mdi:dots-grid'"
                      class="text-[24px]"
                    />
                  </span>
                  <span
                    class="platform-app__label md:text-sm text-[12px] text-left"
                    >{{ app.label }}</span
                  >
                </button>
              </template>
            </div>
          </article>
        </div>

        <aside class="space-y-4">
          <section
            class="side-card side-card--notice side-card--documents rounded-md p-2"
          >
            <div class="side-card__header w-[95%] ml-[8px]">
              <div class="notice-tabs">
                <button
                  v-for="tab in noticeTabs"
                  :key="tab.key"
                  type="button"
                  :class="[
                    'notice-tab',
                    activeNoticeTab === tab.key ? 'notice-tab--active' : '',
                  ]"
                  @click="handleNoticeTabChange(tab.key)"
                >
                  {{ tab.label }}
                </button>
              </div>
              <button
                type="button"
                class="side-card__more side-card__more--documents"
                @click="handleNoticeMoreClick"
              >
                {{ $t("common.more") }}
                <span class="side-card__more-arrows">&gt;&gt;&gt;</span>
              </button>
            </div>

            <div class="space-y-2 p-2 pt-3">
              <div
                v-if="!userStore.getUser.username"
                class="flex h-full items-center justify-center"
              >
                <div class="text-[#8a9ab0] pt-5">
                  {{ $t("common.loginRequired") }}
                </div>
              </div>

              <div
                v-if="!currentNoticeList.length && userStore.getUser.username"
                class="flex h-[120px] items-center justify-center text-[#8a9ab0]"
              >
                {{ $t("common.noMsg") }}
              </div>
              <article
                v-if="userStore.getUser.username"
                v-for="notice in currentNoticeList"
                :key="notice.id"
                class="notice-item cursor-pointer"
                @click="handleNoticeItemClick(notice)"
              >
                <div class="notice-item__desc">{{ notice.docsubject }}</div>
                <div class="date text-[12px] text-[#9cadc0]">
                  {{ notice.docvaliddate }}
                </div>
              </article>
            </div>
          </section>

          <section
            class="side-card side-card--notice side-card--todo-panel rounded-md p-2"
            :style="{ minHeight: '190px' }"
          >
            <div class="side-card__header w-[91%] ml-[15px]">
              <div class="notice-badge px-2 pb-2">{{ todoPanelTitle }}</div>
              <button
                type="button"
                class="side-card__more side-card__more--todo-panel"
                @click="router.push('/todo-list')"
              >
                {{ $t("common.all") }}
                <span class="side-card__more-arrows">&gt;&gt;&gt;</span>
              </button>
            </div>
            <div class="space-y-2 pt-2">
              <div
                v-if="!userStore.getUser.username"
                class="flex h-full items-center justify-center"
              >
                <div class="text-[#8a9ab0] pt-10">
                  {{ $t("common.loginRequired") }}
                </div>
              </div>

              <div
                v-if="!oaTasks.length && userStore.getUser.username"
                class="flex h-full items-center justify-center"
              >
                <div class="text-[#8a9ab0] pt-10">{{ $t("common.noMsg") }}</div>
              </div>

              <article
                v-if="userStore.getUser.username"
                v-for="task in oaTasks"
                :key="task.requestId"
                @click="handleTask(task)"
                class="todo-item rounded-md cursor-pointer"
              >
                <div class="flex min-w-0 items-start justify-between gap-3">
                  <div class="min-w-0">
                    <div class="truncate text-[14px] font-semibold">
                      {{ task.requestName }}
                    </div>
                    <div class="mt-1 text-[12px] text-[#8a9ab0]">
                      {{ $t("flow.createPerson") }}：{{ task.creatorName }} ·
                      {{ task.createTime }}
                    </div>
                  </div>
                  <span
                    :class="['todo-item__tag', getTagClass(task.requesLevel)]"
                    >{{ getTagName(task.requesLevel) }}</span
                  >
                </div>
              </article>

              <div class="quick-todo-bar">
                <el-dropdown
                  trigger="click"
                  popper-class="quick-access-dropdown"
                  @command="handleQuickAccessCommand"
                >
                  <button type="button" class="quick-todo-btn">
                    <div class="number">{{ todo }}</div>
                    <div class="flex gap-2 items-center">
                      <div class="!text-[10px] aside-btn">
                        {{ $t("flow.todo") }}
                      </div>
                      <Icon
                        icon="mdi:clipboard-text-outline"
                        color="#7f2c33"
                        class="icon"
                      />
                    </div>
                  </button>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item command="todo-oa">
                        <div
                          class="p-2 flex items-center gap-3 text-[#f56c6c]!"
                        >
                          <span>OA</span>
                          <span>{{ oatodo }}</span>
                        </div>
                      </el-dropdown-item>
                      <el-dropdown-item command="todo-crm">
                        <div
                          class="p-2 flex items-center gap-3 text-[#f56c6c]!"
                        >
                          <span>CRM</span>
                          <span>{{ crmtodo }}</span>
                        </div>
                      </el-dropdown-item>

                      <el-dropdown-item command="todo-srm">
                        <div
                          class="p-2 flex items-center gap-3 text-[#e43c2f]!"
                        >
                          <span>SRM</span>
                          <span>{{ srmtodo }}</span>
                        </div>
                      </el-dropdown-item>

                      <el-dropdown-item command="todo-ehr">
                        <div
                          class="p-2 flex items-center gap-3 text-[#e26669]!"
                        >
                          <span>EHR</span>
                          <span>{{ ehrtodo }}</span>
                        </div>
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>

                <el-dropdown
                  trigger="click"
                  popper-class="quick-access-dropdown"
                  @command="handleQuickAccessCommand"
                >
                  <button
                    type="button"
                    class="quick-todo-btn quick-todo-btn--center"
                  >
                    <div class="number text-[#2d8767]!">{{ done }}</div>
                    <div class="flex gap-2 items-center pl-2">
                      <div class="!text-[10px] aside-btn">
                        {{ $t("flow.done") }}
                      </div>
                      <Icon
                        icon="mdi:check-circle-outline"
                        color="#2d8767"
                        class="icon"
                      />
                    </div>
                  </button>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item command="done-oa">
                        <div
                          class="p-2 flex items-center gap-3 text-[#2d8767]!"
                        >
                          <span>OA</span>
                          <span>{{ oadone }}</span>
                        </div>
                      </el-dropdown-item>
                      <el-dropdown-item command="done-crm">
                        <div
                          class="p-2 flex items-center gap-3 text-[#2d8767]!"
                        >
                          <span>CRM</span>
                          <span>{{ crmdone }}</span>
                        </div>
                      </el-dropdown-item>

                      <el-dropdown-item command="done-srm">
                        <div
                          class="p-2 flex items-center gap-3 text-[#2d8767]!"
                        >
                          <span>SRM</span>
                          <span>{{ srmdone }}</span>
                        </div>
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </div>
          </section>

          <section
            class="side-card side-card--content p-2 rounded-md"
            :style="{ minHeight: '180px' }"
          >
            <div class="side-card__header w-[90%] ml-[15px]">
              <div class="news notice-badge pb-2">{{ newsPanelTitle }}</div>
              <button type="button" class="side-card__more" @click="goNews">
                {{ $t("common.more") }}
                <Icon icon="mingcute:right-line" class="text-[18px]" />
              </button>
            </div>
            <div class="space-y-2 p-4 pt-2">
              <div
                v-if="!userStore.getUser.username"
                class="flex h-full items-center justify-center"
              >
                <div class="text-[#8a9ab0] pt-10">
                  {{ $t("common.loginRequired") }}
                </div>
              </div>

              <div
                v-if="!newsList.length && userStore.getUser.username"
                class="flex h-full items-center justify-center"
              >
                <div class="text-[#8a9ab0] pt-10">
                  {{ $t("common.noNews") }}
                </div>
              </div>
              <article
                v-for="news in newsList"
                :key="news.id"
                class="news-mini cursor-pointer rounded-md"
                @click="handleNoticeItemClick(news)"
              >
                <div class="min-w-0 flex-1">
                  <div
                    class="line-clamp-1 text-[13px] font-semibold leading-[1.45]"
                  >
                    {{ news.docsubject }}
                  </div>
                  <div class="mt-2 text-[12px] text-[#9cadc0]">
                    {{ news.docvaliddate }}
                  </div>
                </div>
              </article>
            </div>
          </section>

          <section
            v-if="userStore.getUser.username"
            class="side-card side-card--placeholder rounded-md"
            :style="{ minHeight: '78px', backgroundColor: '#3575e4' }"
          >
            <div class="placeholder-panel flex flex-col text-left">
              <!-- <div class="text-sm">需要帮助？</div> -->
              <div class="text-[10px]">{{ t("home.consultTip") }}</div>
              <div
                class="bg-[#79ebfa] text-sm text-center text-[#004098] py-1 px-2 rounded-full mt-2 w-[30%] cursor-pointer"
                @click="openConsult"
              >
                {{ t("home.consult") }}
              </div>
            </div>
          </section>
        </aside>
      </section>
    </main>

    <el-dialog v-model="dialogVisible" title="提示" width="500">
      <template #header="{ close, titleId, titleClass }">
        <div class="my-header">
          <h4 :id="titleId" class="flex gap-2 items-center">
            <Icon
              :icon="'si:warning-line'"
              color="#ef6c1a"
              size="16"
              class="text-[20px]"
            /><span class="text-black">提示</span>
          </h4>
        </div>
      </template>
      <span class="text-black">账号未授权</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">确定</el-button>
          <!-- <el-button type="primary" color="#063e8d" @click="confirmSrm">
            继续访问
          </el-button> -->
        </div>
      </template>
    </el-dialog>

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

<script setup lang="ts">
import { computed, onMounted, onUnmounted, watch, ref } from "vue";
import * as authUtil from "@/utils/auth";
import * as dd from "dingtalk-jsapi";
import Header from "@components/home/header.vue";
import Footer from "@components/home/Footer.vue";
import { useRouter } from "vue-router";
import axios from "axios";
import { Icon } from "@iconify/vue";
import { useI18n } from "@/i18n";
const { t } = useI18n();
import {
  getMCSsoToken,
  ssoLogin,
  zentaoSsoLogin,
  getOATasks,
  getCRMTasks,
  getSRMTasks,
  getEHRTasks,
  getNotices,
  getRedHeadFiles,
  getNews,
  srmLogin,
  ehrLogin,
} from "@/api/user";
import { useUserStore } from "@/stores/useUserStore";
import { useThemeStore } from "@/stores/useThemeStore";
import { getAccessToken } from "@/utils/auth";
import { deleteUserCache } from "@hooks/useCache";
import { manualLogoutKey, reloginCancelKey } from "@/config/axios/service";
import banner1 from "@/assets/images/banner1.png";
import banner2 from "@/assets/images/banner2.png";
import oaimage from "@/assets/images/oa.png";
import crmimage from "@/assets/images/crm.png";
import ehrimage from "@/assets/images/ehr.png";
import scmimage from "@/assets/images/scm.png";
import erpimage from "@/assets/images/fm.png";
import driveimage from "@/assets/images/drive.png";
import pmsimage from "@/assets/images/pms.jpeg";
import zhonghangimage from "@/assets/images/中航.png";
import lianyouimage from "@/assets/images/lianyou.png";
import qhseimage from "@/assets/images/qhse.png";
import zuanjingimage from "@/assets/images/zuanjing.jpeg";
import yalieimage from "@/assets/images/yalie.png";
import zhuqiimage from "@/assets/images/zhuqi.png";
import pmimage from "@/assets/images/pm.png";
import okrimage from "@/assets/images/okr.png";
import dataimage from "@/assets/images/data2.png";
import thinkimage from "@/assets/images/think.png";
import aiimage from "@/assets/images/ai.png";
import agentimage from "@/assets/images/icon2.png";
import videoimage from "@/assets/images/video.png";
import fileagent from "@/assets/images/fileagent.png";
import zhiduagent from "@/assets/images/zhiduagent.png";
import jishuimage2 from "@/assets/images/jishuimage.png";
import zhanlueimage from "@/assets/images/zhanlue.png"; // 战略解码
import safeimage from "@/assets/images/safe.png"; // 安全合规管理
import zuzhiimage from "@/assets/images/zuzhi.png";
import youimage from "@/assets/images/youcnag.png"; // ai智能体
import hongpan from "@/assets/images/pan.png"; // ai智能体
import ask from "@/assets/images/ask.png";
import degitial from "@/assets/images/degitial.png";
import wms from "@/assets/images/wms.png";

import banner2_white from "@/assets/images/banner2_white.png";
import banner1_white from "@/assets/images/banner1_white.png";
import banner3_white from "@/assets/images/banner3_white.png";
import huabanBg from "@/assets/images/huaban.jpg";

type PortalApp = {
  key: string;
  label: string;
  icon?: string;
  image?: string;
  active?: boolean;
};

type PortalSection = {
  code: string;
  title: string;
  subtitle: string;
  height: string;
  apps?: PortalApp[];
};

type NoticeItem = {
  id?: string | number;
  title?: string;
  desc?: string;
  docsubject?: string;
};

const router = useRouter();
const userStore = useUserStore();
const themeStore = useThemeStore();

const isDingTalkClient = () => {
  const ua = window.navigator.userAgent.toLowerCase();
  return ua.includes("dingtalk") || ua.includes("dingtalkwork");
};

const showDingTalkLoginMask = ref(
  isDingTalkClient() && !userStore.getUser.username && !getAccessToken(),
);

const todoPanelTitle = computed(() => t("home.todoCenter"));
const newsPanelTitle = computed(() => t("home.news"));
type NoticeTabKey = "redHead" | "notice";
const noticeTabs = computed<{ key: NoticeTabKey; label: string }[]>(() => [
  { key: "redHead", label: t("home.red") },
  { key: "notice", label: t("home.notice") },
]);

const portalSections = computed<PortalSection[]>(() => [
  {
    code: "数",
    title: t("DigitalOperationPlatform.title"),
    subtitle: t("DigitalOperationPlatform.subTitle"),
    height: "220px",
    apps: [
      {
        key: "oa",
        label: t("DigitalOperationPlatform.oa"),
        image: oaimage,
        active: true,
      },
      { key: "crm", label: t("DigitalOperationPlatform.crm"), image: crmimage },
      { key: "ehr", label: t("DigitalOperationPlatform.ehr"), image: ehrimage },
      { key: "srm", label: t("DigitalOperationPlatform.srm"), image: scmimage },
      { key: "mc", label: t("DigitalOperationPlatform.mc"), image: driveimage },
      { key: "pm", label: t("DigitalOperationPlatform.pm"), image: pmimage },
      {
        key: "zhanlue",
        label: t("DigitalOperationPlatform.zhanlue"),
        image: zhanlueimage,
      },
      { key: "fm", label: t("DigitalOperationPlatform.fm"), image: erpimage },
      {
        key: "rd",
        label: t("DigitalOperationPlatform.rd"),
        image: jishuimage2,
      },
      {
        key: "zuzhi",
        label: t("DigitalOperationPlatform.zuzhi"),
        image: zuzhiimage,
      },
      {
        key: "fengxian",
        label: t("DigitalOperationPlatform.fengxian"),
        image: safeimage,
      },
      {
        key: "kaifa",
        label: t("DigitalOperationPlatform.kaifa"),
        image: jishuimage2,
      },
      {
        key: "hongpan",
        label: t("DigitalOperationPlatform.hongpan"),
        image: hongpan,
      },
    ],
  },
  {
    code: "智",
    title: t("command.title"),
    subtitle: t("command.subTitle"),
    height: "210px",
    apps: [
      { key: "pms", label: t("command.pms"), image: pmsimage, active: true },
      { key: "qhse", label: t("command.qhse"), image: qhseimage },
      {
        key: "zhonghang",
        label: t("command.zhonghang"),
        image: zhonghangimage,
      },
      { key: "lianyou", label: t("command.lianyou"), image: lianyouimage },
      { key: "zhuqi", label: t("command.zhuqi"), image: zhuqiimage },
      { key: "video", label: t("command.video"), image: videoimage },
      { key: "zuanjing", label: t("command.zuanjing"), image: zuanjingimage },
      { key: "wms", label: t("command.wms"), image: wms },
      { key: "yalie", label: t("command.yalie"), image: yalieimage },
      { key: "youcang", label: t("command.youcang"), image: youimage },
    ],
  },
  {
    code: "AI",
    title: t("ai.title"),
    subtitle: t("ai.subTitle"),
    height: "160px",
    apps: [
      {
        key: "dataCenter",
        label: t("ai.dataCenter"),
        image: dataimage,
        active: true,
      },
      { key: "juece", label: t("ai.juece"), image: thinkimage },
      { key: "aimodel", label: t("ai.aimodel"), image: aiimage },
      { key: "agent", label: t("ai.agent"), image: agentimage },
      { key: "file", label: t("ai.file"), image: fileagent },
      { key: "rule", label: t("ai.rule"), image: zhiduagent },
      { key: "ask", label: t("ai.ask"), image: ask },
      { key: "person", label: t("ai.person"), image: degitial },
    ],
  },
]);

const boldLabes = computed(() => [
  t("DigitalOperationPlatform.oa"),
  t("DigitalOperationPlatform.crm"),
  t("command.pms"),
  t("command.zhonghang"),
  t("command.lianyou"),
  t("command.qhse"),
  t("command.zhuqi"),
  t("command.video"),
  t("DigitalOperationPlatform.kaifa"),
  t("DigitalOperationPlatform.mc"),
  t("DigitalOperationPlatform.pm"),
  t("DigitalOperationPlatform.hongpan"),
  t("command.zuanjing"),
  t("DigitalOperationPlatform.srm"),
  t("DigitalOperationPlatform.ehr"),
  t("DigitalOperationPlatform.zhanlue"),
  t("DigitalOperationPlatform.fm"),
]);

const searchKeyword = ref("");
// 2. 实现搜索处理函数
const handleSearch = () => {
  if (!searchKeyword.value.trim()) return;
  console.log("执行搜索:", searchKeyword.value);
  // 如果需要跳转到独立搜索页，可以在这里添加 router.push
};

const handleQuickAccessCommand = (command: string) => {
  const ua = window.navigator.userAgent; // const ua = navigator.userAgent;
  const isDesktop =
    ua.includes("DingTalk") &&
    (ua.includes("Windows") || ua.includes("Macintosh"));

  let ua2 = navigator.userAgent.toLowerCase();
  let isMobile = ua2.indexOf("dingtalk") > -1;

  const routeMap: Record<string, string> = {
    "todo-oa": "/todo-list?type=oa",
    "done-oa": "/oa-done-list?type=oa",
    "todo-crm": "/crm-todo-list?type=crm",
    "done-crm": "/crm-done-list?type=crm",
    "todo-srm": "/srm-todo-list?type=srm",
    "done-srm": "/srm-done-list?type=srm",
    "todo-ehr": "/ehr-todo-list?type=ehr",
  };

  const routeMap2: Record<string, string> = {
    "todo-oa": "/mobile-todo-list?type=oa",
    "done-oa": "/oa-done-list?type=oa",
    "todo-crm": "/mobile-crm-todo-list?type=crm",
    "done-crm": "/crm-done-list?type=crm",
    "todo-srm": "/mobile-srm-todo-list?type=srm",
    "done-srm": "/srm-done-list?type=srm",
    "todo-ehr": "/ehr-todo-list?type=ehr",
  };

  let target = null;

  if (ua2.includes("dingtalk") || ua2.includes("dingtalkwork")) {
    if (isMobile && !isDesktop) {
      if (command === "todo-oa" || command === "done-oa") {
        dd.biz.util.openLink({
          url: `https://yfding.keruioil.com:9443/wxapi/wxclientmenu/61c40c87c45346ce9695f223ea823278`,

          onSuccess: () => {},
        });
        return;
      } else {
        target = routeMap2[command];
      }
    } else if (isDesktop) {
      target = routeMap[command];
    }
  } else {
    // 浏览器环境
    target = routeMap[command];
  }

  console.log(
    "🚀 ~ file: index.vue ~ line 91 ~ handleQuickAccessCommand ~ target",
    target,
  );

  // 跳转
  if (target) {
    router.push(target);
  }
};

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

  // 如果没有关键词，返回原始数据
  if (!keyword) {
    return portalSections.value;
  }

  // 过滤逻辑：遍历每个板块，保留匹配的应用
  return portalSections.value
    .map((section) => {
      if (!section.apps) return { ...section, apps: [] };

      const matchedApps = section.apps.filter((app) =>
        app.label.toLowerCase().includes(keyword),
      );

      return {
        ...section,
        apps: matchedApps,
      };
    })
    .filter((section) => section.apps && section.apps.length > 0); // 移除没有匹配应用的空板块
});

const slides = computed(() => {
  if (themeStore.theme === "light") {
    return [
      {
        image: banner2_white,
        text: t("banner.banner1"),
      },
      {
        image: banner3_white,
        text: t("banner.banner2"),
      },
      {
        image: banner1_white,
        text: t("banner.banner3"),
      },
    ];
  }

  return [
    {
      image: banner2,
      text: t("banner.banner1"),
    },
    {
      image: banner1,
      text: t("banner.banner2"),
    },
    {
      image: banner1,
      text: t("banner.banner3"),
    },
  ];
});

const homeBackgroundStyle = computed(() =>
  themeStore.theme === "light"
    ? { backgroundImage: `url(${huabanBg})` }
    : undefined,
);

// 当前索引
const currentIndex = ref(0);
let slideTimer: ReturnType<typeof setInterval> | null = null;

// 下一页
const nextSlide = () => {
  currentIndex.value = (currentIndex.value + 1) % slides.value.length;
};

const activeNoticeTab = ref<NoticeTabKey>("redHead");
const noticeListMap = ref<Record<NoticeTabKey, NoticeItem[]>>({
  notice: [],
  redHead: [],
});

const newsList = ref([]);

const currentNoticeList = computed(
  () => noticeListMap.value[activeNoticeTab.value] ?? [],
);

let todo = ref(0);
let done = ref(0);
let oatodo = ref(0);
let oadone = ref(0);
let crmtodo = ref(0);
let crmdone = ref(0);
let srmtodo = ref(0);
let srmdone = ref(0);

let ehrtodo = ref(0);
const loadHomeData = async () => {
  try {
    await loadNoticeList(activeNoticeTab.value);
  } catch (error) {
    console.error("loadNoticeList failed:", error);
  }

  if (!userStore.getUser.username) return;

  const withFallback = async <T,>(
    request: Promise<T>,
    fallback: T,
    requestName: string,
  ): Promise<T> => {
    try {
      return await request;
    } catch (error) {
      console.error(`${requestName} failed:`, error);
      return fallback;
    }
  };

  const [oaRes, crmRes, crmDoneRes, srmRes, ehrRes, newsRes] =
    await Promise.all([
      withFallback(
        getOATasks({
          id: userStore.getUser.username,
          pageNum: 1,
          pageSize: 10,
        }),
        { todoList: [], todoCount: 0, doneCount: 0 },
        "getOATasks",
      ),
      withFallback(
        getCRMTasks({
          id: userStore.getUser.username,
          type: "pending",
          pageNum: 1,
          pageSize: 10,
        }),
        { todoCount: 0 },
        "getCRMTasks(pending)",
      ),
      withFallback(
        getCRMTasks({
          id: userStore.getUser.username,
          type: "approved",
          pageNum: 1,
          pageSize: 10,
        }),
        { todoCount: 0 },
        "getCRMTasks(approved)",
      ),
      withFallback(
        getSRMTasks({
          id: userStore.getUser.username,
          pageNum: 1,
          pageSize: 10,
        }),
        { todoCount: 0, doneCount: 0 },
        "getSRMTasks",
      ),
      withFallback(
        getEHRTasks({
          id: userStore.getUser.username,
          pageNum: 1,
          pageSize: 10,
        }),
        { todoCount: 0 },
        "getEHRTasks",
      ),
      withFallback(
        getNews({
          pageNum: 1,
          pageSize: 10,
        }),
        { list: [] },
        "getNews",
      ),
    ]);

  oaTasks.value = oaRes.todoList.slice(0, 3);
  todo.value =
    Number(oaRes.todoCount) +
    crmRes.todoCount +
    srmRes.todoCount +
    ehrRes.todoCount;
  done.value =
    Number(oaRes.doneCount) + crmDoneRes.todoCount + srmRes.doneCount;

  oatodo.value = oaRes.todoCount;
  oadone.value = oaRes.doneCount;
  crmtodo.value = crmRes.todoCount;
  crmdone.value = crmDoneRes.todoCount;
  srmtodo.value = srmRes.todoCount;
  srmdone.value = srmRes.doneCount;
  ehrtodo.value = ehrRes.todoCount;
  newsList.value = newsRes.list.slice(0, 3);
};

const loadNoticeList = async (tabKey: NoticeTabKey) => {
  const requestApi = tabKey === "notice" ? getNotices : getRedHeadFiles;
  const res = await requestApi({
    pageNum: 1,
    pageSize: 10,
  });

  noticeListMap.value[tabKey] = (res?.list || []).slice(0, 3);
};

let currentTabKey = ref<NoticeTabKey>("redHead");
const handleNoticeTabChange = async (tabKey: NoticeTabKey) => {
  activeNoticeTab.value = tabKey;
  currentTabKey.value = tabKey;

  // if (noticeListMap.value[tabKey].length) return;

  if (userStore.getUser.username) {
    await loadNoticeList(tabKey);
  }
};

const handleNoticeMoreClick = () => {
  router.push({
    path: "/notice-redhead",
    query: {
      tabKey: currentTabKey.value,
    },
  });
};

const protectedOpen = (url: string) => {
  if (userStore.getUser.username && getAccessToken()) {
    window.open(url, "_blank");
  } else {
    router.push({ path: "/login" });
  }
};

let dialogVisible = ref(false);

let ua2 = navigator.userAgent.toLowerCase();
let isDing = ua2.includes("dingtalk") || ua2.includes("dingtalkwork");

const handlePortalAppClick = async (app: PortalApp) => {
  if (!app.key) return;

  if (app.key === "pm") {
    protectedOpen(
      `${import.meta.env.VITE_PMS_URL}/portalLogin?username=${userStore.getUser.username}&source=yyhy`,
    );
  }

  if (app.key === "oa") {
    if (userStore.getUser.username && getAccessToken()) {
      const ua = window.navigator.userAgent; // const ua = navigator.userAgent;
      const isDesktop =
        ua.includes("DingTalk") &&
        (ua.includes("Windows") || ua.includes("Macintosh"));

      let ua2 = navigator.userAgent.toLowerCase();
      let isMobile = ua2.indexOf("dingtalk") > -1;
      if (ua2.includes("dingtalk") || ua2.includes("dingtalkwork")) {
        if (isMobile && !isDesktop) {
          dd.biz.util.openLink({
            url: `https://yfding.keruioil.com:9443/wxapi/wxclientmenu/d5605d17b3cd4c1987e333ab0d945070`,

            onSuccess: () => {},
          });
        } else if (isDesktop) {
          const res = await ssoLogin({
            workcode: userStore.getUser.username,
            uri: `https://yfoa.keruioil.com/wui/index.html`,
          });
          dd.biz.util.openLink({
            url: JSON.parse(res).ssoUrl, // 先跳你的 SSO 链接
            onSuccess: () => {},
          });
        }
      } else {
        const res = await ssoLogin({
          workcode: userStore.getUser.username,
          uri: `https://yfoa.keruioil.com/wui/index.html`,
        });

        window.open(JSON.parse(res).ssoUrl, "_blank");
      }
    } else {
      router.push({ path: "/login" });
    }
  }

  if (app.key === "crm") {
    if (userStore.getUser.username && getAccessToken()) {
      const ua = window.navigator.userAgent; // const ua = navigator.userAgent;
      const isDesktop =
        ua.includes("DingTalk") &&
        (ua.includes("Windows") || ua.includes("Macintosh"));

      let ua2 = navigator.userAgent.toLowerCase();
      var isMobile = ua2.indexOf("dingtalk") > -1;
      if (ua2.includes("dingtalk") || ua2.includes("dingtalkwork")) {
        if (isMobile && !isDesktop) {
          const originPath =
            "/bff/spa/crmh5/index.html#/home?platform=H5&deviceType=0";
          // 连续三次encodeURIComponent
          let e1 = encodeURIComponent(originPath);
          let e2 = encodeURIComponent(e1);
          let e3 = encodeURIComponent(e2);

          dd.biz.util.openLink({
            url: `https://crm-tencent.xiaoshouyi.com/global/sso/callback/00APEB9EEEA9B2E338B686B7ECFA8585808C.action?token=${getAccessToken()}&returnUri=${e3}`,

            onSuccess: () => {},
          });
        } else if (isDesktop) {
          window.open(
            `https://crm-tencent.xiaoshouyi.com/global/sso/callback/00APEB9EEEA9B2E338B686B7ECFA8585808C.action?token=${getAccessToken()}`,
            "_blank",
          );
        }
      } else {
        window.open(
          `https://crm-tencent.xiaoshouyi.com/global/sso/callback/00APEB9EEEA9B2E338B686B7ECFA8585808C.action?token=${getAccessToken()}`,
          "_blank",
        );
      }
    } else {
      router.push({ path: "/login" });
    }
  }

  if (app.key === "pms") {
    protectedOpen(
      `${import.meta.env.VITE_PMS_URL}/portalLogin?username=${userStore.getUser.username}`,
    );
  }

  if (app.key === "zhonghang") {
    protectedOpen("https://zhbdgps.cn");
  }

  if (app.key === "lianyou") {
    protectedOpen(
      `${import.meta.env.VITE_PMS_URL}/portalLogin?username=${userStore.getUser.username}&source=zhly`,
    );
  }

  if (app.key === "zhuqi") {
    protectedOpen(
      `${import.meta.env.VITE_PMS_URL}/portalLogin?username=${userStore.getUser.username}&source=zhzq`,
    );
  }

  if (app.key === "video") {
    protectedOpen(
      `${import.meta.env.VITE_PMS_URL}/portalLogin?username=${userStore.getUser.username}&source=spzx`,
    );
  }

  if (app.key === "qhse") {
    protectedOpen(
      `${import.meta.env.VITE_PMS_URL}/portalLogin?username=${userStore.getUser.username}&source=qhse_nav`,
    );
  }

  if (app.key === "mc") {
    if (userStore.getUser.username && getAccessToken()) {
      const res = await getMCSsoToken();
      if (res) {
        window.open(
          `https://report.deepoil.cc/webroot/decision/v10/entry/access/9fb42908-894a-4373-a6be-ce046a42851d?preview=true&page_number=1&ssoToken=${res}`,
          "_blank",
        );
      }
    } else {
      router.push({ path: "/login" });
    }
  }

  if (app.key === "kaifa") {
    if (userStore.getUser.username && getAccessToken()) {
      const res = await zentaoSsoLogin({
        username: userStore.getUser.username,
      });
      if (res) {
        window.open(
          `http://project.deepoil.cc/zentao/api.php?m=user&f=apilogin&account=${res.jobNumber}&code=${res.code}&time=${res.timestamp}&token=${res.token}`,
          "_blank",
        );
      }
    } else {
      router.push({ path: "/login" });
    }
  }

  if (app.key === "ehr") {
    if (userStore.getUser.username && getAccessToken()) {
      const res = await ehrLogin({
        username: userStore.getUser.username,
      });
      const ua = window.navigator.userAgent;
      const isDesktop =
        ua.includes("DingTalk") &&
        (ua.includes("Windows") || ua.includes("Macintosh"));

      let ua2 = navigator.userAgent.toLowerCase();
      var isMobile = ua2.indexOf("dingtalk") > -1;

      if (ua2.includes("dingtalk") || ua2.includes("dingtalkwork")) {
        if (isMobile && !isDesktop) {
          dd.biz.util.openLink({
            url: `${res.ehrUrl}/gateway/login/free?loginfree_licence=${res.licence}&signature=${res.sign}&redirect_url=/proxy/h5/home`,

            onSuccess: () => {},
          });
        } else if (isDesktop) {
          window.open(
            `${res.ehrUrl}/gateway/login/free?loginfree_licence=${res.licence}&signature=${res.sign}&redirect_url=${res.redirect}`,
            "_blank",
          );
        }
      } else {
        // 浏览器环境
        window.open(
          `${res.ehrUrl}/gateway/login/free?loginfree_licence=${res.licence}&signature=${res.sign}&redirect_url=${res.redirect}`,
          "_blank",
        );
      }
    } else {
      router.push({ path: "/login" });
    }
  }

  if (app.key === "srm") {
    if (userStore.getUser.username && getAccessToken()) {
      const ua = window.navigator.userAgent;
      const isDesktop =
        ua.includes("DingTalk") &&
        (ua.includes("Windows") || ua.includes("Macintosh"));

      let ua2 = navigator.userAgent.toLowerCase();
      let isMobile = ua2.indexOf("dingtalk") > -1;

      const res = await srmLogin({
        username: userStore.getUser.username,
      });

      if (JSON.parse(res).msg === "账号未授权") {
        dialogVisible.value = true;
        return;
      }

      if (ua2.includes("dingtalk") || ua2.includes("dingtalkwork")) {
        if (isMobile && !isDesktop) {
          // alert("SRM判断是钉钉手机端登录");
          dd.biz.util.openLink({
            url: `https://srm-m.deepoil.cc:7777/#/mixed-page/view/MXP00048?Authorization=${JSON.parse(res).msg}`,

            onSuccess: () => {},
          });
        } else if (isDesktop) {
          window.open(
            `https://srm.deepoil.cc/#/mixed-page/view/MXP00048?Authorization=${JSON.parse(res).msg}`,
            "_blank",
          );
        }
      } else {
        // 浏览器环境
        window.open(
          `https://srm.deepoil.cc/#/mixed-page/view/MXP00048?Authorization=${JSON.parse(res).msg}`,
          "_blank",
        );
      }
    } else {
      router.push({ path: "/login" });
    }
  }

  if (app.key === "zuanjing") {
    if (userStore.getUser.username && getAccessToken()) {
      window.open(`http://172.21.0.224:8001/#/login`, "_blank");
    } else {
      router.push({ path: "/login" });
    }
  }

  if (app.key === "hongpan") {
    if (userStore.getUser.username && getAccessToken()) {
      window.open(`https://pan.keruioil.com:52180`, "_blank");
    } else {
      router.push({ path: "/login" });
    }
  }

  if (app.key === "zhanlue") {
    if (userStore.getUser.username && getAccessToken()) {
      if (isDing) {
        dd.biz.util.openLink({
          url: `https://dingokr.eapps.dingtalkcloud.com/web/index.html?corpId=dingbe7f9a7e8cffa2bd35c2f4657eb6378f`,

          onSuccess: () => {},
        });
      } else {
        window.open(
          `https://dingokr.eapps.dingtalkcloud.com/web/index.html?corpId=dingbe7f9a7e8cffa2bd35c2f4657eb6378f`,
          "_blank",
        );
      }
    } else {
      router.push({ path: "/login" });
    }
  }

  if (app.key === "fm") {
    const ua = window.navigator.userAgent;
    const isDesktop =
      ua.includes("DingTalk") &&
      (ua.includes("Windows") || ua.includes("Macintosh"));

    let ua2 = navigator.userAgent.toLowerCase();
    let isMobile = ua2.indexOf("dingtalk") > -1;
    const res = await getMCSsoToken();
    if (ua2.includes("dingtalk") || ua2.includes("dingtalkwork")) {
      if (isMobile && !isDesktop) {
        dd.biz.util.openLink({
          url: `${"https://report.deepoil.cc/webroot/decision/v10/entry/access/e836fb5b-092c-4d64-a324-3beeb4fac0cc?preview=true&page_number=1"}&ssoToken=${res}`,
          onSuccess: () => {},
        });
      } else if (isDesktop) {
        window.open(
          `${"https://report.deepoil.cc/webroot/decision/v10/entry/access/e836fb5b-092c-4d64-a324-3beeb4fac0cc?preview=true&page_number=1"}&ssoToken=${res}`,
          "_blank",
        );
      }
    } else {
      // 浏览器环境
      window.open(
        `${"https://report.deepoil.cc/webroot/decision/v10/entry/access/e836fb5b-092c-4d64-a324-3beeb4fac0cc?preview=true&page_number=1"}&ssoToken=${res}`,
        "_blank",
      );
    }
  }
};

async function loginWithDingTalk() {
  const ddCorpId = import.meta.env.VITE_DD_CORPID;
  const ddClientId = import.meta.env.VITE_DD_CLIENTID;

  if (!ddCorpId || !ddClientId) return false;

  return await new Promise<boolean>((resolve) => {
    dd.requestAuthCode({
      corpId: ddCorpId,
      clientId: ddClientId,
      success: async (res: any) => {
        try {
          const { code } = res;
          const response = await axios.post(
            import.meta.env.BASE_URL + "/admin-api/system/auth/h5SocialLogin",
            {
              code,
              type: 20,
              state: new Date().getTime(),
            },
            {
              headers: {
                "Content-Type": "application/json",
                "tenant-id": 1,
              },
            },
          );

          deleteUserCache();
          userStore.resetState();
          authUtil.setToken(response.data.data);
          sessionStorage.removeItem(manualLogoutKey);
          sessionStorage.removeItem(reloginCancelKey);
          await userStore.setUserInfoAction();
          resolve(true);
        } catch (error) {
          console.log("dingTalk login error :>> ", error);
          resolve(false);
        }
      },
      fail: (err: any) => {
        console.log("err :>> ", err);
        resolve(false);
      },
    });
  });
}

async function dingTalkAutoLogin() {
  const ua = window.navigator.userAgent.toLowerCase();

  if (
    (ua.includes("dingtalk") || ua.includes("dingtalkwork")) &&
    !userStore.getUser.username &&
    !getAccessToken()
  ) {
    return await loginWithDingTalk();
  }

  return false;
}

const getTagClass = (tag: string) => {
  return tag === "0"
    ? "bg-[#2e1e6d] text-white/90"
    : tag === "1"
      ? "bg-[#2e1e6d] text-white/90"
      : tag === "2"
        ? "bg-[#2e1e6d] text-white/90"
        : "bg-[#2e1e6d] text-white/90";
};

const getTagName = (tag: string) => {
  return tag === "0"
    ? t("common.normal")
    : tag === "1"
      ? "重要"
      : tag === "2"
        ? "紧急"
        : t("common.normal");
};

let oaTasks = ref([]);

onMounted(async () => {
  slideTimer = setInterval(nextSlide, 5000);

  if (showDingTalkLoginMask.value) {
    try {
      await dingTalkAutoLogin();
    } finally {
      showDingTalkLoginMask.value = false;
    }
  }

  await loadHomeData();
});

const handleNoticeItemClick = async (notice: any) => {
  const res = await ssoLogin({
    workcode: userStore.getUser.username,
    uri: `https://yfoa.keruioil.com/spa/document/index.jsp?openAttachment=0&id=${notice.id}`,
  });

  window.open(JSON.parse(res).ssoUrl, "_blank");
};

const handleTask = async (row: any) => {
  const res = await ssoLogin({
    workcode: userStore.getUser.username,
    uri: `https://yfoa.keruioil.com/spa/workflow/static4form/index.html?_rdm=1776063595284#/main/workflow/req?requestid=${row.requestId}`,
  });

  if (JSON.parse(res).ssoUrl) {
    const ua = window.navigator.userAgent.toLowerCase();
    if (ua.includes("dingtalk") || ua.includes("dingtalkwork")) {
      dd.biz.util.openLink({
        url: JSON.parse(res).ssoUrl, // 先跳你的 SSO 链接
        onSuccess: () => {},
      });
    } else {
      window.open(JSON.parse(res).ssoUrl, "_blank");
    }
  }
};

const openConsult = async () => {
  const res = await ssoLogin({
    workcode: userStore.getUser.username,
    uri: `https://yfoa.keruioil.com/spa/workflow/static4form/index.html?_rdm=1778289187850#/main/workflow/req?iscreate=1&workflowid=488`,
  });

  if (JSON.parse(res).ssoUrl) {
    const ua = window.navigator.userAgent.toLowerCase();
    if (ua.includes("dingtalk") || ua.includes("dingtalkwork")) {
      dd.biz.util.openLink({
        url: JSON.parse(res).ssoUrl, // 先跳你的 SSO 链接
        onSuccess: () => {},
      });
    } else {
      window.open(JSON.parse(res).ssoUrl, "_blank");
    }
  }
};

const goNews = () => {
  router.push("/news");
};

onUnmounted(() => {
  if (slideTimer) {
    clearInterval(slideTimer);
    slideTimer = null;
  }
});
</script>

<style scoped>
.portal-home {
  --portal-text: #17345f;
  --portal-text-muted: #5f6f83;
  --portal-text-soft: #7f8fa6;
  --portal-text-secondary: #184dd3;
  --portal-title: #163867;
  --portal-subtitle: rgba(61, 92, 135, 0.86);
  --portal-line: rgba(126, 156, 201, 0.24);
  --portal-card: rgba(255, 255, 255, 0.82);
  --portal-card-2: rgba(248, 251, 255, 0.94);
  --portal-card-3: rgba(240, 246, 255, 0.88);
  --portal-card-4: rgba(231, 239, 251, 0.92);
  --portal-nav-bg: rgba(255, 255, 255, 0.72);
  --portal-nav-hover: rgba(219, 232, 252, 0.8);
  --portal-input-bg: rgba(255, 255, 255, 0.7);
  --portal-input-hover: rgba(255, 255, 255, 0.92);
  --portal-shadow: 0 18px 40px rgba(23, 52, 95, 0.12);
  --portal-shadow-strong: 0 24px 60px rgba(23, 52, 95, 0.16);
  --portal-accent: #245edb;
  --portal-accent-2: #4e8cff;
  --portal-accent-soft: rgba(36, 94, 219, 0.14);
  --portal-todo-bg: rgba(242, 247, 255, 0.94);
  --portal-todo-hover: rgba(228, 238, 252, 0.95);
  --portal-number-todo: #e15a5a;
  --portal-number-done: #2da04d;
  color: var(--portal-text);
  background-color: #eef3f9;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

.portal-login-mask {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(9, 16, 32, 0.52);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.portal-login-mask__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 28px 36px;
  /* border: 1px solid rgba(255, 255, 255, 0.12); */
  border-radius: 18px;
}

.portal-login-mask__spinner {
  width: 34px;
  height: 34px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: #ffffff;
  border-radius: 999px;
  animation: portal-login-spin 0.9s linear infinite;
}

.portal-login-mask__text {
  margin: 0;
  color: #ffffff;
  font-size: 14px;
  letter-spacing: 0.04em;
}

@keyframes portal-login-spin {
  to {
    transform: rotate(360deg);
  }
}

:global([data-theme="dark"] .portal-home) {
  --portal-text: #eaf1ff;
  --portal-text-muted: rgba(234, 241, 255, 0.95);
  --portal-text-soft: #8a9ab0;
  --portal-text-secondary: #eaf1ff;
  --portal-title: #f4f7ff;
  --portal-subtitle: rgba(188, 205, 255, 0.82);
  --portal-line: rgba(97, 129, 206, 0.28);
  --portal-card: rgba(10, 19, 43, 0.8);
  --portal-card-2: rgba(12, 24, 52, 0.92);
  --portal-card-3: rgba(17, 25, 48, 0.8);
  --portal-card-4: rgba(15, 24, 45, 0.82);
  --portal-nav-bg: rgba(10, 19, 43, 0.8);
  --portal-nav-hover: rgba(28, 40, 72, 0.8);
  --portal-input-bg: rgba(255, 255, 255, 0.08);
  --portal-input-hover: rgba(255, 255, 255, 0.12);
  --portal-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
  --portal-shadow-strong: 0 24px 60px rgba(0, 0, 0, 0.38);
  --portal-accent: #6e7dff;
  --portal-accent-2: #8d4dff;
  --portal-accent-soft: rgba(110, 125, 255, 0.16);
  --portal-todo-bg: #070e20;
  --portal-todo-hover: rgba(28, 40, 72, 0.8);
  --portal-number-todo: #f56c6c;
  --portal-number-done: #ffffff;
  color: var(--portal-text);
  background:
    radial-gradient(
      circle at 18% 12%,
      rgba(79, 82, 221, 0.34),
      transparent 22%
    ),
    radial-gradient(circle at 82% 20%, rgba(28, 95, 255, 0.2), transparent 20%),
    radial-gradient(
      circle at 50% 100%,
      rgba(103, 46, 255, 0.16),
      transparent 28%
    ),
    linear-gradient(180deg, #040814 0%, #060d1d 46%, #040814 100%);
}

.hero-banner {
  position: relative;
  min-height: 310px;
  border: 1px solid var(--portal-line);
  border-radius: 10px;
  background:
    linear-gradient(135deg, var(--portal-accent-soft), transparent 32%),
    linear-gradient(180deg, var(--portal-card), var(--portal-card-2));
  box-shadow:
    var(--portal-shadow-strong),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.hero-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(128, 77, 255, 0.14) 0%, transparent 26%),
    radial-gradient(
      circle at 20% 36%,
      rgba(123, 84, 255, 0.22),
      transparent 22%
    ),
    radial-gradient(
      circle at 74% 52%,
      rgba(54, 170, 255, 0.18),
      transparent 24%
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.04),
      transparent 40%,
      rgba(255, 255, 255, 0.02)
    );
  pointer-events: none;
}

.hero-copy {
  position: relative;
  z-index: 2;
}

.hero-script {
  display: none;
}

.hero-text {
  margin-top: 0;
  color: var(--portal-text-secondary);
  font-size: 46px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.02em;

  max-width: 540px;
}

.hero-visual {
  position: absolute;
  inset: 0;
  min-height: 310px;
}

.carousel-container {
  position: relative;
  height: 310px;
  overflow: hidden;
}

.platform-block {
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(to right, #e4f1ff 0%, #e4f1ff 50%, #f6fbfe 100%);
}

:global([data-theme="dark"] .platform-block) {
  background: linear-gradient(180deg, var(--portal-card), var(--portal-card-2));
}

.platform-block__header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 190px;
  width: 190px;
  min-width: 190px;
  min-height: 48px;
  padding: 0 20px 0 0px;
  box-sizing: border-box;
  background: linear-gradient(90deg, var(--portal-accent-soft), transparent);
}

.platform-block__title-wrap {
  display: flex;
  flex-direction: column;
  align-items: baseline;
  gap: 18px;
  min-width: 0;
  flex: 1;
}

.platform-block__title {
  color: var(--portal-title);
  font-size: 15px;
  font-weight: 800;
  min-width: 0;
  flex: 0 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.02em;
}

.platform-block__subtitle {
  color: var(--portal-subtitle);
  font-size: 13px;
  font-weight: 500;
  flex: 0 0 auto;
  white-space: nowrap;
}

.platform-block__watermark {
  color: rgba(119, 145, 214, 0.24);
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.08em;
}

.platform-app {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 40px;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  border: 1px solid var(--portal-line);
  border-radius: 10px;
  padding: 0 8px;
  background: var(--portal-card-3);

  font-size: 14px;
  cursor: pointer;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.platform-app:hover {
  transform: translateY(-2px);
  border-color: rgba(133, 163, 255, 0.45);
  box-shadow: 0 10px 26px rgba(34, 54, 110, 0.18);
}

.platform-app--active {
  background: linear-gradient(
    90deg,
    rgba(76, 103, 224, 0.5),
    var(--portal-card)
  );
  color: var(--portal-title);
  border-color: rgba(129, 145, 255, 0.44);
  box-shadow: inset 0 0 0 1px rgba(159, 173, 255, 0.08);
}

.platform-app--ghost {
  background: var(--portal-card-4);
  color: var(--portal-text);
}

.platform-app__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  color: var(--portal-accent-2);
  filter: drop-shadow(0 0 8px rgba(90, 122, 255, 0.24));
}

.platform-app__label {
  min-width: auto;
  flex: 1;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  font-size: 13px;
  line-height: 1;
  color: var(--portal-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.platform-block > .grid {
  flex: 1;
  align-content: start;
}

.portal-mobile-shortcuts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.portal-mobile-shortcut {
  min-width: 0;
  border: 1px solid var(--portal-line);
  border-radius: 12px;
  padding: 10px 8px;
  background: linear-gradient(180deg, var(--portal-card), var(--portal-card-2));
  color: var(--portal-text);
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--portal-shadow);
}

.side-card {
  overflow: hidden;
  border: 1px solid var(--portal-line);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--portal-card), var(--portal-card-2));
  box-shadow:
    var(--portal-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.side-card--documents {
  min-height: 310px;
  padding: 16px 36px 18px !important;
  border: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 14px 32px rgba(72, 126, 190, 0.1);
}

.side-card--documents .side-card__header {
  width: 100% !important;
  min-height: 34px;
  margin-left: 0 !important;
  padding: 0;
  border-bottom: 2px solid #b8ccef;
}

.side-card--documents .notice-tabs {
  height: 34px;
  gap: 24px;
}

.side-card--documents .notice-tab {
  min-width: 72px;
  height: 34px;
  padding: 0;
  border-radius: 0;
  color: #4b6e9b;
  font-size: 14px;
  font-weight: 800;
}

.side-card--documents .notice-tab--active {
  color: #0c5aee;
}

.side-card--documents .notice-tab--active::before {
  left: 0;
  bottom: -2px;
  width: 72px;
  height: 3px;
  transform: none;
  background: #0c5aee;
  box-shadow: none;
}

.side-card--documents .side-card__more--documents {
  gap: 6px;
  color: #0c5aee;
  font-size: 14px;
  font-weight: 800;
}

.side-card--documents .side-card__more-arrows {
  font-size: 13px;
  letter-spacing: 0;
}

.side-card--documents > .space-y-2 {
  padding: 4px 0 0 !important;
}

.side-card--documents .notice-item {
  padding: 16px 18px 15px;
  border-bottom: 2px dashed #bfd0e9;
  border-radius: 0;
  box-shadow: none;
}

.side-card--documents .notice-item:hover {
  background: rgba(228, 240, 255, 0.44);
  box-shadow: none;
  transform: none;
}

.side-card--documents .notice-item__desc {
  color: #3f6291;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
}

.side-card--documents .date {
  margin-top: 4px;
  color: #9aa9bb !important;
  font-size: 12px;
  font-weight: 700;
}

:global([data-theme="dark"] .side-card--documents) {
  min-height: auto;
  padding: 8px !important;
  border: 1px solid var(--portal-line);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--portal-card), var(--portal-card-2));
  box-shadow:
    var(--portal-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

:global([data-theme="dark"] .side-card--documents .side-card__header) {
  width: 95% !important;
  min-height: 20px;
  margin-left: 8px !important;
  padding-right: 10px;
  border-bottom: 1px solid var(--portal-line);
}

:global([data-theme="dark"] .side-card--documents .notice-tabs) {
  height: auto;
  gap: 8px;
}

:global([data-theme="dark"] .side-card--documents .notice-tab) {
  height: 25px;
  min-width: 68px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--portal-subtitle);
  font-weight: 400;
}

:global([data-theme="dark"] .side-card--documents .notice-tab--active) {
  color: var(--portal-title);
}

:global([data-theme="dark"] .side-card--documents .notice-tab--active::before) {
  left: 50%;
  bottom: -2px;
  width: 90%;
  height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(
    to right,
    #5f3abf 0%,
    #7044c5 30%,
    #7044c5 40%,
    rgba(255, 255, 255, 0.7) 50%,
    #7044c5 60%,
    #7044c5 70%,
    #5f3abf 100%
  );
  box-shadow: 0 0 12px rgba(112, 120, 255, 0.95);
}

:global([data-theme="dark"] .side-card--documents .side-card__more--documents) {
  color: var(--portal-subtitle);
  font-size: 12px;
  font-weight: 400;
}

:global([data-theme="dark"] .side-card--documents > .space-y-2) {
  padding: 8px !important;
  padding-top: 12px !important;
}

:global([data-theme="dark"] .side-card--documents .notice-item) {
  padding: 8px 14px;
  border-bottom: 0;
  border-radius: 12px;
  box-shadow: 0 10px 22px rgba(23, 52, 95, 0.08);
}

:global([data-theme="dark"] .side-card--documents .notice-item:hover) {
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.22);
  transform: translateY(-1px);
}

:global([data-theme="dark"] .side-card--documents .notice-item__desc) {
  color: var(--portal-text);
  font-size: 13px;
  font-weight: 400;
}

.side-card--content {
  padding-top: 10px;
}

.side-card--todo-panel {
  min-height: 320px !important;
  padding: 18px 38px 18px !important;
  border: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 14px 32px rgba(72, 126, 190, 0.1);
}

.side-card--todo-panel .side-card__header {
  width: 100% !important;
  min-height: 34px;
  margin-left: 0 !important;
  padding: 0;
  border-bottom: 2px solid #b8ccef;
}

.side-card--todo-panel .notice-badge {
  justify-content: flex-start;
  height: 34px;
  min-width: 76px;
  padding: 0 !important;
  color: #0c5aee;
  font-size: 14px;
  font-weight: 800;
}

.side-card--todo-panel .side-card__more--todo-panel {
  gap: 6px;
  color: #0c5aee;
  font-size: 13px;
  font-weight: 800;
}

.side-card--todo-panel > .space-y-2 {
  padding: 24px 0 0 !important;
}

.side-card--todo-panel .todo-item {
  min-height: 74px;
  padding: 16px 16px 16px 18px;
  border: 1px solid #a9c8f8;
  border-left: 0;
  border-radius: 14px;
  background: linear-gradient(90deg, #edf6ff 0%, #ffffff 100%);
  box-shadow: none;
}

.side-card--todo-panel .todo-item + .todo-item {
  margin-top: 14px;
}

.side-card--todo-panel .todo-item:hover {
  background: linear-gradient(90deg, #e5f2ff 0%, #ffffff 100%);
  border-color: #8db8f7;
  box-shadow: none;
  transform: none;
}

.side-card--todo-panel .todo-item .truncate {
  color: #155fc2;
  font-size: 14px;
  font-weight: 800;
}

.side-card--todo-panel .todo-item .text-\[\#8a9ab0\] {
  color: #4f6f96 !important;
  font-size: 13px;
  font-weight: 700;
}

.side-card--todo-panel .todo-item__tag {
  min-width: 56px;
  justify-content: center;
  border-radius: 999px;
  padding: 4px 8px;
  background: linear-gradient(90deg, #5aa7ff 0%, #0c5aee 100%) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 500;
}

.side-card--todo-panel .quick-todo-bar {
  width: fit-content;
  gap: 28px;
  margin-top: 18px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.side-card--todo-panel .quick-todo-btn {
  min-width: 154px;
  height: 26px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border-radius: 999px;
  background: #eef6ff;
}

.side-card--todo-panel .quick-todo-btn--center {
  align-items: center;
}

.side-card--todo-panel .quick-todo-btn .number {
  min-width: auto;
  color: #e00024;
  font-size: 22px;
  line-height: 1;
}

.side-card--todo-panel .quick-todo-btn--center .number {
  color: #00a650 !important;
}

.side-card--todo-panel .quick-todo-btn .aside-btn {
  color: #4f6f96;
  font-size: 13px !important;
  font-weight: 800;
}

.side-card--todo-panel .quick-todo-btn .icon {
  display: none;
}

:global([data-theme="dark"] .side-card--todo-panel) {
  min-height: 190px !important;
  padding: 8px !important;
  border: 1px solid var(--portal-line);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--portal-card), var(--portal-card-2));
  box-shadow:
    var(--portal-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

:global([data-theme="dark"] .side-card--todo-panel .side-card__header) {
  width: 91% !important;
  min-height: 20px;
  margin-left: 15px !important;
  padding-right: 10px;
  border-bottom: 1px solid var(--portal-line);
}

:global([data-theme="dark"] .side-card--todo-panel .notice-badge) {
  justify-content: center;
  height: 25px;
  min-width: 70px;
  padding: 0 8px 8px !important;
  color: var(--portal-title);
  font-size: 14px;
  font-weight: 400;
}

:global(
  [data-theme="dark"] .side-card--todo-panel .side-card__more--todo-panel
) {
  color: var(--portal-subtitle);
  font-size: 12px;
  font-weight: 400;
}

:global([data-theme="dark"] .side-card--todo-panel > .space-y-2) {
  padding: 16px !important;
  padding-top: 8px !important;
}

:global([data-theme="dark"] .side-card--todo-panel .todo-item) {
  min-height: 0;
  padding: 8px 12px;
  border: 1px solid var(--portal-line);
  border-radius: 8px;
  background: var(--portal-card-4);
  box-shadow: 0 10px 22px rgba(23, 52, 95, 0.08);
}

:global([data-theme="dark"] .side-card--todo-panel .todo-item:hover) {
  background: var(--portal-todo-hover);
  transform: translateY(-1px);
  border-color: rgba(109, 137, 213, 0.2);
}

:global([data-theme="dark"] .side-card--todo-panel .todo-item .truncate) {
  color: var(--portal-text);
  font-size: 14px;
  font-weight: 600;
}

:global(
  [data-theme="dark"] .side-card--todo-panel .todo-item .text-\[\#8a9ab0\]
) {
  color: #8a9ab0 !important;
  font-size: 12px;
  font-weight: 400;
}

:global([data-theme="dark"] .side-card--todo-panel .todo-item__tag) {
  min-width: 0;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 400;
}

:global([data-theme="dark"] .side-card--todo-panel .quick-todo-bar) {
  display: flex;
  width: auto;
  gap: 16px;
  margin-top: 0;
  padding: 8px 16px;
  border: 1px solid var(--portal-line);
  border-radius: 8px;
  background: var(--portal-todo-bg);
  box-shadow: var(--portal-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

:global([data-theme="dark"] .side-card--todo-panel .quick-todo-btn) {
  min-width: 0;
  height: auto;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  border-radius: 0;
  background: transparent;
}

:global([data-theme="dark"] .side-card--todo-panel .quick-todo-btn--center) {
  align-items: center;
}

:global([data-theme="dark"] .side-card--todo-panel .quick-todo-btn .number) {
  min-width: 24px;
  color: var(--portal-number-todo);
  font-size: 18px;
}

:global(
  [data-theme="dark"] .side-card--todo-panel .quick-todo-btn--center .number
) {
  color: #2d8767 !important;
}

:global([data-theme="dark"] .side-card--todo-panel .quick-todo-btn .aside-btn) {
  color: var(--portal-text-soft);
  font-size: 10px !important;
  font-weight: 400;
}

:global([data-theme="dark"] .side-card--todo-panel .quick-todo-btn .icon) {
  display: inline-flex;
}

.side-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 20px;
  padding-right: 10px;
  /* border-radius: 999px; */
  /* background: rgba(28, 39, 72, 0.86); */
  border-bottom: 1px solid var(--portal-line);
}

.notice-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 25px;
  min-width: 70px;

  color: var(--portal-title);
  font-size: 14px;
}

.news.notice-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 25px;
  min-width: 70px;

  color: var(--portal-title);
  font-size: 14px;
  border-bottom: 2px solid var(--portal-accent);
}

.notice-tabs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.notice-tab {
  height: 25px;
  min-width: 68px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--portal-subtitle);
  font-size: 14px;

  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.notice-tab--active {
  position: relative;
  color: var(--portal-title);
}

.notice-tab--active::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 90%;
  height: 2px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(
    to right,
    #5f3abf 0%,
    #7044c5 30%,
    #7044c5 40%,
    rgba(255, 255, 255, 0.7) 50%,
    #7044c5 60%,
    #7044c5 70%,
    #5f3abf 100%
  );
  box-shadow: 0 0 12px rgba(112, 120, 255, 0.95);
}

.notice-badge::after {
  content: "";
  position: absolute;
  top: 0;
  right: -15px;
}

.side-card__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--portal-subtitle);
  cursor: pointer;
  font-size: 12px;
}

.notice-item {
  /* background: rgba(14, 22, 42, 0.88); */
  padding: 8px 14px;
  box-shadow: 0 10px 22px rgba(23, 52, 95, 0.08);
  border-radius: 12px;
}

.notice-item:hover {
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.22);
  transition: all 0.2s ease;
  transform: translateY(-1px);
}

.notice-item__title,
.notice-item__desc {
  color: var(--portal-text);
  font-size: 13px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.panel-title {
  padding: 0 16px;
  color: var(--portal-title);
  font-size: 15px;
  font-weight: 700;
}

.todo-item {
  border: 1px solid var(--portal-line);
  background: var(--portal-card-4);
  padding: 8px 14px;
  box-shadow: 0 10px 22px rgba(23, 52, 95, 0.08);
}

.todo-item__tag {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 8px;

  font-size: 11px;

  white-space: nowrap;
}

.news-mini {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--portal-line);
  background: var(--portal-card-4);
  padding: 5px 12px;
  box-shadow: 0 10px 22px rgba(23, 52, 95, 0.08);
  border-radius: 12px;
}

.news-mini:hover {
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.22);
  transition: all 0.2s ease;
  transform: translateY(-1px);
}

.placeholder-panel {
  display: flex;
  height: 100%;
  padding: 16px;
  justify-content: start;
  color: var(--portal-title);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

@media (max-width: 1279px) {
  .hero-text {
    font-size: 34px;
    max-width: 420px;
  }

  .hero-visual {
    min-height: 260px;
  }
}

@media (max-width: 767px) {
  .platform-block {
    display: block;
  }

  .platform-block__header {
    width: 100%;
    min-width: 0;
    padding: 0 16px 0 18px;
    flex: none;
    justify-content: flex-start;
  }

  .platform-block__title-wrap {
    gap: 12px;
    flex-wrap: wrap;
  }

  .platform-block__title {
    font-size: 16px;
  }

  .platform-block__subtitle {
    font-size: 12px;
  }

  .platform-block__watermark {
    font-size: 34px;
  }

  .hero-banner {
    min-height: 240px;
  }
  .carousel-container {
    height: 240px;
  }

  .carousel-caption {
    left: 22px;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
  }

  .hero-text {
    font-size: 24px;
    max-width: 100%;
  }
}

.carousel-indicators {
  display: flex;
  gap: 10px;
  z-index: 30;
}

.carousel-indicators span {
  width: 36px;
  height: 4px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 0 16px rgba(112, 103, 255, 0.35);
}

.carousel-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.12) contrast(1.06);
}

.carousel-caption {
  position: absolute;
  left: 80px;
  top: 44%;
  z-index: 2;
  transform: translateY(-50%);
  text-align: left;
}

.carousel-container::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 120px;
  /* background: linear-gradient(180deg, transparent, rgba(5, 11, 26, 0.2)); */
  z-index: 1;
  pointer-events: none;
}

:deep(.portal-home .el-dialog) {
  border-radius: 16px;
}

.top-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: 8px 24px;
  background: linear-gradient(90deg, #245edb 0%, #4fa2ff 100%);
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 8px;
  margin-bottom: 10px;
  box-shadow: 0 10px 26px rgba(36, 94, 219, 0.18);
}

.nav-title {
  color: var(--portal-title);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.search-container {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  width: min(380px, 45vw);
  height: 34px;
  border-radius: 999px;
  background: rgba(239, 247, 255, 0.96);
  border: 1px solid rgba(28, 92, 190, 0.16);
  overflow: hidden;
  box-shadow:
    inset 0 1px 2px rgba(36, 94, 219, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.45);
  transition: all 0.2s ease;
}

.search-container:hover {
  background: #ffffff;
  border-color: rgba(28, 92, 190, 0.26);
}

.search-icon {
  display: none;
}

.search-input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 14px;
  color: #1b4f8c;
  padding: 0 18px 0 52px;
  margin: 0;
}

.search-input::placeholder {
  color: #527194;
  opacity: 1;
}

.shortcut-key {
  display: none;
}

.quick-access {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  min-width: min(345px, 40vw);
  height: 30px;
  padding: 0 18px;
  border-radius: 999px;
  background: rgba(239, 247, 255, 0.96);
  border: 1px solid rgba(28, 92, 190, 0.12);
  box-shadow:
    inset 0 1px 2px rgba(36, 94, 219, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.45);
}

.quick-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 28px;
  padding: 0;
  /* border: 1px solid rgba(109, 137, 213, 0.16); */
  border-radius: 12px;
  /* background: rgba(17, 25, 48, 0.8); */
  color: #244d7a;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.quick-btn--dropdown {
  border: none;
  background: transparent;
  outline: none;
}

.quick-btn--dropdown:focus-visible {
  outline: none;
}

.quick-btn:hover {
  background: transparent;
  border-color: rgba(109, 137, 213, 0.4);
  transform: none;
}

.btn-icon {
  font-size: 16px;
  color: var(--portal-accent-2);
}

.btn-label {
  white-space: nowrap;
}

.quick-btn__arrow {
  font-size: 16px;
  color: var(--portal-text-soft);
}

.quick-btn__meta {
  color: #244d7a;
}

.quick-btn__count {
  font-weight: 700;
}

.quick-btn__count--todo {
  color: var(--portal-number-todo);
}

.quick-btn__count--done {
  color: var(--portal-number-done);
}

.top-nav-bar .quick-btn img,
.top-nav-bar .btn-icon {
  display: none;
}

:global([data-theme="dark"] .top-nav-bar) {
  padding: 5px 24px;
  background: var(--portal-nav-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--portal-line);
  box-shadow: var(--portal-shadow);
}

:global([data-theme="dark"] .top-nav-bar .search-container) {
  width: 380px;
  height: 36px;
  background: var(--portal-input-bg);
  border: 1px solid var(--portal-line);
  box-shadow: none;
}

:global([data-theme="dark"] .top-nav-bar .search-icon) {
  display: block;
  margin-left: 12px;
}

:global([data-theme="dark"] .top-nav-bar .search-input) {
  color: var(--portal-text);
  padding-left: 20px;
}

:global([data-theme="dark"] .top-nav-bar .shortcut-key) {
  display: block;
  /* padding-right: 12px; */
}

:global([data-theme="dark"] .top-nav-bar .quick-access) {
  gap: 16px;
  min-width: 0;
  height: auto;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  display: flex;
  justify-content: center;
}

:global([data-theme="dark"] .top-nav-bar .quick-btn) {
  justify-content: center;
  gap: 8px;
  height: auto;
  padding: 8px 12px;
  color: var(--portal-text);
  font-weight: 400;
}

:global([data-theme="dark"] .top-nav-bar .quick-btn:hover) {
  background: var(--portal-nav-hover);
  transform: translateY(-1px);
}

:global([data-theme="dark"] .top-nav-bar .quick-btn__meta) {
  color: var(--portal-text-soft);
}

:global([data-theme="dark"] .top-nav-bar .quick-btn img),
:global([data-theme="dark"] .top-nav-bar .btn-icon) {
  display: inline-flex;
}

.aside-btn {
  color: var(--portal-text-soft);
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f56c6c;
  color: white;
  font-size: 10px;
  font-weight: 600;
}

.quick-todo-bar {
  display: flex;
  gap: 16px;
  padding: 8px 16px;
  background: var(--portal-todo-bg);
  backdrop-filter: blur(10px);
  border: 1px solid var(--portal-line);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 8px;
  box-shadow: var(--portal-shadow);
  /* margin-bottom: 16px; */
}

.quick-todo-btn {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  border: none;
  background: transparent;
  padding: 0;
  color: inherit;
  cursor: pointer;
  outline: none;
}

.quick-todo-btn--center {
  align-items: center;
}

.quick-todo-btn:hover {
  transform: translateY(-1px);
}

.todo-item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  padding: 8px 12px;
  border-radius: 8px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.todo-item:hover {
  background: var(--portal-todo-hover);
  transform: translateY(-1px);
  border-color: rgba(109, 137, 213, 0.2);
}

.number {
  font-size: 18px;
  font-weight: 700;
  color: var(--portal-number-todo);
  min-width: 24px;
  text-align: center;
}

.label {
  font-size: 12px;
  color: var(--portal-text);
  white-space: nowrap;
}

.icon {
  font-size: 14px;
  color: var(--portal-accent-2);
}

:global(.quick-access-dropdown) {
  padding: 0 !important;
  border: 1px solid var(--portal-line) !important;
  border-radius: 10px !important;
  background: var(--dropdown-menu) !important;
  box-shadow: var(--portal-shadow) !important;
  overflow: hidden !important;
}

:global(.quick-access-dropdown .el-dropdown-menu) {
  padding: 0px !important;
  border: none !important;
  background: var(--dropdown-menu) !important;
}

:global(.quick-access-dropdown .el-dropdown-menu__item) {
  padding: 0px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  margin: 0 !important;
  border: none !important;
  background: var(--dropdown-menu) !important;
}

/* :global(.quick-access-dropdown .el-dropdown-menu__item):hover {
  background: var(--dropdown-menu-hover) !important;
} */

:global(.quick-access-dropdown .el-popper__arrow::before) {
  background: var(--dropdown-menu) !important;
  border-color: var(--portal-line) !important;
}

:deep(.el-dropdown-menu__item):hover {
  background: var(--dropdown-menu-hover) !important;
  color: #fff !important;
}
</style>