From a6efb59543a1f714d184fe6935ba0814cbe030ad Mon Sep 17 00:00:00 2001
From: hailin <hailin@gdzx.xyz>
Date: Tue, 29 Jul 2025 13:25:19 +0800
Subject: [PATCH] .

---
 php_pc/src/pages/index copy.vue | 481 --------------------------------
 php_pc/src/pages/index.vue      | 480 ++++++++++++++++++++++++++++++-
 2 files changed, 479 insertions(+), 482 deletions(-)
 delete mode 100644 php_pc/src/pages/index copy.vue

diff --git a/php_pc/src/pages/index copy.vue b/php_pc/src/pages/index copy.vue
deleted file mode 100644
index e9b8803..0000000
--- a/php_pc/src/pages/index copy.vue	
+++ /dev/null
@@ -1,481 +0,0 @@
-<template>
-    <div class="w-full h-full">
-        <ElScrollbar>
-            <div class="w-[720px] mx-auto py-[60px]">
-                <div>
-                    <div class="flex">
-                        <div
-                            class="border border-token-primary rounded-full px-3 flex items-center justify-center gap-x-[6px] h-[28px]">
-                            <Icon name="local-icon-beautify"></Icon>
-                            <span>热门工具</span>
-                        </div>
-                    </div>
-                    <div class="font-bold text-[32px] mt-[10px]">打造智能化新体验</div>
-                    <div class="mt-[10px] text-xs text-[rgba(0,0,0,0.5)]">
-                        智能（AI）工具结合先进算法与智能学习，覆盖内容生成、客户服务、图像设计、语音处理等多元场景，帮助企业降本增效、提升生产力。让复杂问题，变得简单可控。
-                    </div>
-                </div>
-                <div class="mt-6">
-                    <div class="search-bar border-token-primary" :class="{ 'is-active': isSearchActive }">
-                        <div class="bg-black text-[rgba(255,255,255,0.8)] px-[25px] py-[8px] rounded-md">全部</div>
-                        <div class="mx-4 text-[rgba(0,0,0,0.5)]">精选推荐</div>
-                        <ElDivider direction="vertical" class="!mx-0" />
-                        <div class="flex-1" v-click-outside="onClickOutside">
-                            <ElInput
-                                ref="searchInputRef"
-                                class="w-full search-input"
-                                v-model="searchValue"
-                                placeholder="您需要什么帮助"
-                                @input="handleSearch"
-                                @focus="
-                                    isSearchActive = true;
-                                    showSearchPop = true;
-                                "
-                                @blur="
-                                    isSearchActive = false;
-                                    showSearchPop = false;
-                                " />
-                        </div>
-                        <ElPopover
-                            :visible="showSearchPop"
-                            trigger="click"
-                            ref="searchPopRef"
-                            virtual-triggering
-                            popper-class="!w-[720px] !border-none !rounded-xl !p-0"
-                            :trigger-keys="[]"
-                            :show-arrow="false"
-                            :popper-options="{
-                                modifiers: [
-                                    {
-                                        name: 'offset',
-                                        options: {
-                                            offset: [-80, 20],
-                                        },
-                                    },
-                                ],
-                            }"
-                            :virtual-ref="searchInputRef">
-                            <div class="p-2">
-                                <div
-                                    class="max-h-[500px] overflow-y-auto overflow-x-hidden dynamic-scroller"
-                                    v-if="getSearchApp.length">
-                                    <app-more
-                                        :list="getSearchApp"
-                                        :count="searchCount"
-                                        :page-size="4"
-                                        :page="searchPage"
-                                        @handle="toDetail"
-                                        @load-more="loadSearchMore" />
-                                </div>
-                                <ElEmpty v-else description="暂无搜索结果" :image-size="100" />
-                            </div>
-                        </ElPopover>
-                    </div>
-                    <div class="mt-3 flex items-center gap-2">
-                        <div
-                            class="tag-style"
-                            v-for="item in tagList"
-                            :key="item.key"
-                            @click="handleTagClick(item.key)">
-                            {{ item.name }}·{{ item.name_en }}
-                        </div>
-                    </div>
-                </div>
-                <div class="mt-8 flex flex-col">
-                    <div>
-                        <div class="text-xl font-bold">精选推荐</div>
-                        <div class="text-xs text-[rgba(0,0,0,0.5)] mt-[10px]">让智能为你赋能，驱动无限可能！</div>
-                        <div class="mt-6 grid gap-3">
-                            <template v-for="item in recommendApp" :key="item.key">
-                                <div
-                                    class="bg-black rounded-2xl p-6 bg-cover bg-center cursor-pointer"
-                                    :style="{
-                                        backgroundImage: `url(${appImageData[`${item.key}_bg`].src})`,
-                                    }"
-                                    @click="toDetail(item)">
-                                    <div class="flex items-center gap-x-2 mt-[73px]">
-                                        <span class="text-[rgba(255,255,255,0.8)] text-[20px] font-bold">{{
-                                            item.name
-                                        }}</span>
-                                        <span
-                                            v-if="item.is_hot"
-                                            class="text-xs text-white px-2 py-1 rounded-md bg-primary"
-                                            >热门工具</span
-                                        >
-                                        <span
-                                            v-else-if="item.is_new"
-                                            class="text-xs text-white px-2 py-1 rounded-md bg-[#FF4906]"
-                                            >最新上线</span
-                                        >
-                                    </div>
-                                    <div class="mt-3 text-xs text-[rgba(255,255,255,0.5)]">
-                                        {{ item.desc }}
-                                    </div>
-                                    <div class="app-more-btn text-[rgba(255,255,255,0.8)] mt-5" @click="toDetail(item)">
-                                        了解更多<Icon name="local-icon-arrow_right" :size="12"></Icon>
-                                    </div>
-                                </div>
-                            </template>
-                        </div>
-                    </div>
-                    <div class="mt-8">
-                        <div class="text-xl font-bold">热门内容</div>
-                        <div class="text-xs text-[rgba(0,0,0,0.5)] mt-[10px]">
-                            挖掘深层价值，精准洞察需求，快速实现业务增长
-                        </div>
-                        <div class="mt-6 bg-white rounded-xl p-3">
-                            <template v-for="(item, index) in hotApp">
-                                <div
-                                    v-if="item.key == AppKeyEnum.PERSON_WECHAT"
-                                    class="bg-black rounded-2xl p-6 mb-[14px] bg-cover bg-center cursor-pointer"
-                                    :style="{
-                                        backgroundImage: `url(${appImageData[`${item.key}_bg`].src})`,
-                                    }"
-                                    @click="toDetail(item)">
-                                    <img :src="item.src" class="w-12 h-12 mt-4" />
-                                    <div class="mt-4 text-[rgba(255,255,255,0.8)] text-[20px] font-bold">
-                                        {{ item.name }}
-                                    </div>
-                                    <div class="mt-3 text-xs text-[rgba(255,255,255,0.5)] w-[306px]">
-                                        {{ item.desc }}
-                                    </div>
-                                    <div class="app-more-btn text-[rgba(255,255,255,0.8)] mt-9" @click="toDetail(item)">
-                                        了解更多<Icon name="local-icon-arrow_right" :size="12"></Icon>
-                                    </div>
-                                </div>
-                                <app-card v-else :item="item" @click="toDetail(item)" />
-                            </template>
-                        </div>
-                    </div>
-                    <div class="mt-8">
-                        <div class="text-xl font-bold">更多工具</div>
-                        <div class="text-xs text-[rgba(0,0,0,0.5)] mt-[10px]">
-                            通过持续开发与迭代更新，我们让功能更强大、体验更流畅、场景适应性更全面，助力企业在竞争中始终保持技术领先
-                        </div>
-                        <div class="mt-6 bg-white rounded-xl p-3">
-                            <app-more
-                                :list="getMoreApp"
-                                :count="moreApp.length"
-                                :page-size="morePageSize"
-                                :page="morePage"
-                                @handle="toDetail"
-                                @load-more="loadMore" />
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </ElScrollbar>
-    </div>
-    <app-intro v-if="showAppIntro" ref="appIntroRef" :name="appName" @close="showAppIntro = false" />
-    <popup ref="followPopRef" width="412" confirm-button-text="" cancel-button-text="" :show-close="false">
-        <div class="-mb-10">
-            <div
-                class="absolute right-4 top-4 w-6 h-6 rounded-full bg-[#F2F2F2] flex items-center justify-center cursor-pointer"
-                @click="closeFollowPop">
-                <Icon name="el-icon-Close"></Icon>
-            </div>
-            <div class="text-[24px] font-bold">
-                {{ currTag.name }}
-            </div>
-            <div class="text-xs mt-[15px] text-[rgba(0,0,0,0.5)]">
-                {{ currTag.desc }}
-            </div>
-            <div class="mt-[26px] flex flex-col gap-y-1">
-                <div
-                    v-for="(item, index) in getFollowList(currTag.key)"
-                    :key="index"
-                    class="app-item-card"
-                    @click="toDetail(item)">
-                    <div class="h-full hover:bg-[rgba(0,0,0,0.03)] flex items-center px-[10px] rounded-[10px] gap-x-3">
-                        <img :src="item.src" class="w-12 h-12" />
-                        <div class="flex-1">
-                            <div class="flex items-center gap-x-2">
-                                <div class="font-bold">{{ item.name }}</div>
-                                <div
-                                    v-if="!item.is_online"
-                                    class="text-[11px] bg-[rgba(0,0,0,0.05)] rounded px-2 py-[2px] text-[rgba(0,0,0,0.5)]">
-                                    开发进行中
-                                </div>
-                            </div>
-                            <div class="mt-1 flex items-center">
-                                <span class="text-[#00000080] text-xs">
-                                    {{ item.desc }}
-                                </span>
-                                <span class="app-more-btn ml-2" @click="toDetail(item)"> 了解更多 </span>
-                            </div>
-                        </div>
-                        <div class="flex-shrink-0">
-                            <ElButton
-                                type="primary"
-                                round
-                                class="!w-[100px] !h-[36px] !text-xs"
-                                @click="toggleFollow(item.key)"
-                                >{{ isFollow(item.key) ? "取消关注" : "关注" }}
-                            </ElButton>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="flex justify-center mt-5">
-                <div class="text-xs flex justify-center mb-8 gap-2 items-center p-1 bg-[#00000008] rounded-full">
-                    <Icon name="local-icon-tips2" :size="16"></Icon>
-                    <span class="text-[#0000004d] text-xs"
-                        >我们正不断拓展智能（AI）工具的边界及解决方案，敬请期待。</span
-                    >
-                </div>
-            </div>
-        </div>
-    </popup>
-    <app-live-popup v-if="showLivePop" ref="livePopRef" @close="showLivePop = false" />
-</template>
-
-<script setup lang="ts">
-import { getBaseUrl } from "@/utils/env";
-import { useFollowStore } from "@/stores/follow";
-import { ClickOutside as vClickOutside } from "element-plus";
-import { applications } from "@/config/common";
-import { AppKeyEnum, appKeyNameMap, FollowTypeEnum } from "@/enums/appEnums";
-import { cloneDeep } from "lodash-es";
-import AppIntro from "./app/_components/app-intro.vue";
-import AppMore from "./app/_components/app-more.vue";
-import AppCard from "./app/_components/app-card.vue";
-import AppLivePopup from "./app/_components/app-live-popup.vue";
-
-const followStore = useFollowStore();
-
-const { toggleFollow, isFollow } = followStore;
-
-const appImages = {
-    ...import.meta.glob("./app/_assets/images/*.png", { eager: true }),
-};
-
-const appImageData = Object.keys(appImages).reduce((acc, key) => {
-    const name = key.split("/").pop()?.split(".")[0];
-    if (name) {
-        acc[name] = {
-            name,
-            src: (appImages[key] as any).default,
-        };
-    }
-    return acc;
-}, {} as Record<string, { name: string; src: string }>);
-
-const tagList = [
-    {
-        key: FollowTypeEnum.INTERNAL,
-        name: "内务工具",
-        name_en: "Internal Affairs",
-        desc: "智能提醒、任务分配、自动归档，一站式提升团队效率与组织力，让时间与精力专注于真正重要的事。",
-    },
-    {
-        key: FollowTypeEnum.SMART_MARKETING,
-        name: "智能拓客",
-        name_en: "Smart Prospecting",
-        desc: "快速锁定潜在客户，数据驱动、智能推荐，让拓客更高效，成交更简单，助力企业业绩稳步增长！",
-    },
-    {
-        key: FollowTypeEnum.CUSTOMER_MANAGEMENT,
-        name: "客户管理",
-        name_en: "Engagement Hub",
-        desc: "精准洞察客户需求，自动跟进潜在商机，提升转化效率。帮你打造更贴心、更高效的客户体验。",
-    },
-    {
-        key: FollowTypeEnum.CONTENT_MARKETING,
-        name: "内容营销",
-        name_en: "Content Marketing",
-        desc: "快速锁定潜在客户，数据驱动、智能推荐，让拓客更高效，成交更简单，助力企业业绩稳步增长！",
-    },
-];
-const currTag = ref<any>(null);
-
-// 应用配置
-const APP_CONFIG = {
-    // 精选推荐
-    RECOMMEND: [AppKeyEnum.REDBOOK, AppKeyEnum.MEETING_MINUTES, AppKeyEnum.INTERVIEW],
-    // 热门内容
-    HOT: [AppKeyEnum.PERSON_WECHAT, AppKeyEnum.LIVE, AppKeyEnum.SERVICE, AppKeyEnum.TELEMARKETING],
-
-    // 更多工具
-    MORE: [
-        AppKeyEnum.PERSON_WECHAT,
-        AppKeyEnum.REDBOOK,
-        AppKeyEnum.LADDER_PLAYER,
-        AppKeyEnum.INTERVIEW,
-        AppKeyEnum.MEETING_MINUTES,
-        AppKeyEnum.DRAWING,
-        AppKeyEnum.SERVICE,
-        AppKeyEnum.MIND_MAP,
-        AppKeyEnum.DOUBYIN,
-        AppKeyEnum.KUAISHOU,
-        AppKeyEnum.SPH,
-        AppKeyEnum.TELEMARKETING,
-        AppKeyEnum.TAX,
-        AppKeyEnum.LAW,
-        AppKeyEnum.WORD,
-        AppKeyEnum.PPT,
-        AppKeyEnum.COMPANY_WECHAT,
-        AppKeyEnum.STATEMENT,
-        AppKeyEnum.POSTER,
-        AppKeyEnum.CONTRACT,
-        AppKeyEnum.LIVE,
-    ],
-} as const;
-
-const followPopRef = shallowRef();
-const handleTagClick = (key: FollowTypeEnum) => {
-    currTag.value = tagList.find((item) => item.key === key);
-    followPopRef.value.open();
-};
-
-const closeFollowPop = () => {
-    followPopRef.value.close();
-};
-
-const getTagAppList = (key: FollowTypeEnum) => {
-    const list: any = Object.keys(applications).map((key) => ({
-        ...applications[key],
-        key,
-    }));
-    return list.filter((item: any) => item.followType === key);
-};
-
-const getFollowList = computed(() => {
-    return (key: FollowTypeEnum) => getTagAppList(key);
-});
-
-// 精选推荐
-const recommendApp = computed(() => {
-    return APP_CONFIG.RECOMMEND.map((key) => ({
-        key,
-        ...applications[key],
-        desc: applications[key].desc2,
-        name: appKeyNameMap[key],
-        is_new: key == AppKeyEnum.REDBOOK,
-        is_hot: [AppKeyEnum.MEETING_MINUTES, AppKeyEnum.INTERVIEW].includes(key),
-    }));
-});
-
-// 热门内容
-const hotApp = computed(() => {
-    return APP_CONFIG.HOT.map((key) => ({
-        key,
-        ...applications[key],
-        desc: applications[key].desc2,
-        name: appKeyNameMap[key],
-    }));
-});
-
-// 更多工具
-const morePageSize = ref(6);
-const morePage = ref(1);
-const moreApp = computed(() => {
-    return APP_CONFIG.MORE.map((key) => ({
-        key,
-        ...applications[key],
-        desc: applications[key].desc2,
-        name: appKeyNameMap[key],
-    }));
-});
-
-const getMoreApp = computed(() => {
-    return moreApp.value.slice(0, morePage.value * morePageSize.value);
-});
-
-const loadMore = () => {
-    morePage.value++;
-};
-
-const searchInputRef = shallowRef();
-const searchPopRef = shallowRef();
-const showSearchPop = ref(false);
-const onClickOutside = () => {
-    unref(searchPopRef).popperRef?.delayHide?.();
-};
-
-const searchValue = ref("");
-const searchApp = ref<any[]>(cloneDeep(moreApp.value));
-const searchPage = ref(1);
-const searchCount = ref(searchApp.value.length);
-const isSearchActive = ref(false);
-const getSearchApp = computed(() => {
-    const lists = cloneDeep(searchApp.value).slice(0, !searchValue.value ? searchPage.value * 4 : moreApp.value.length);
-    return lists.filter((item) => item.name.toLowerCase().indexOf(searchValue.value.trim().toLowerCase()) > -1);
-});
-
-const loadSearchMore = () => {
-    searchPage.value++;
-};
-
-const handleSearch = (value: string) => {
-    if (!value.trim()) {
-        searchCount.value = moreApp.value.length;
-        return;
-    }
-    searchCount.value = getSearchApp.value.length;
-};
-
-const appIntroRef = ref<InstanceType<typeof AppIntro> | null>(null);
-const showAppIntro = ref(false);
-
-const livePopRef = shallowRef();
-const showLivePop = ref(false);
-
-const appName = ref("");
-
-const toDetail = async (item: any) => {
-    const { key, name } = item;
-    switch (key) {
-        case AppKeyEnum.DRAWING:
-        case AppKeyEnum.MEETING_MINUTES:
-        case AppKeyEnum.MIND_MAP:
-        case AppKeyEnum.INTERVIEW:
-        case AppKeyEnum.REDBOOK:
-        case AppKeyEnum.SERVICE:
-            window.open(`${getBaseUrl()}/app/${key}`, "_blank");
-            break;
-        case AppKeyEnum.LADDER_PLAYER:
-            appName.value = name;
-            showAppIntro.value = true;
-            await nextTick();
-            appIntroRef.value?.open("ladder_player");
-            break;
-        case AppKeyEnum.PERSON_WECHAT:
-            window.open(`${getBaseUrl()}/app/person_wechat/chat`, "_blank");
-            break;
-        case AppKeyEnum.LIVE:
-            showLivePop.value = true;
-            await nextTick();
-            livePopRef.value?.open();
-            break;
-        default:
-            feedback.notifyWarning("功能正在开发中，敬请期待!");
-            break;
-    }
-};
-</script>
-
-<style scoped lang="scss">
-.search-bar {
-    @apply rounded-xl border bg-white p-2 flex items-center;
-    &.is-active {
-        box-shadow: 0px 0px 0px 2px rgba(0, 101, 251, 0.2);
-        border-color: var(--color-primary);
-        background: rgba(0, 101, 251, 0.03);
-    }
-}
-:deep(.search-input) {
-    .el-input__wrapper {
-        box-shadow: none;
-        background-color: transparent;
-        .el-input__inner {
-            &::placeholder {
-                @apply text-[rgba(0,0,0,0.5)] text-base;
-            }
-        }
-    }
-}
-
-.tag-style {
-    @apply cursor-pointer rounded-full px-3 py-1 text-[11px] text-[rgba(0,0,0,0.5)] bg-[rgba(0,0,0,0.03)] hover:bg-[rgba(0,0,0,0.05)];
-}
-</style>
diff --git a/php_pc/src/pages/index.vue b/php_pc/src/pages/index.vue
index 62d6891..e9b8803 100644
--- a/php_pc/src/pages/index.vue
+++ b/php_pc/src/pages/index.vue
@@ -1,3 +1,481 @@
 <template>
-  <div>Hello, Nuxt is working.</div>
+    <div class="w-full h-full">
+        <ElScrollbar>
+            <div class="w-[720px] mx-auto py-[60px]">
+                <div>
+                    <div class="flex">
+                        <div
+                            class="border border-token-primary rounded-full px-3 flex items-center justify-center gap-x-[6px] h-[28px]">
+                            <Icon name="local-icon-beautify"></Icon>
+                            <span>热门工具</span>
+                        </div>
+                    </div>
+                    <div class="font-bold text-[32px] mt-[10px]">打造智能化新体验</div>
+                    <div class="mt-[10px] text-xs text-[rgba(0,0,0,0.5)]">
+                        智能（AI）工具结合先进算法与智能学习，覆盖内容生成、客户服务、图像设计、语音处理等多元场景，帮助企业降本增效、提升生产力。让复杂问题，变得简单可控。
+                    </div>
+                </div>
+                <div class="mt-6">
+                    <div class="search-bar border-token-primary" :class="{ 'is-active': isSearchActive }">
+                        <div class="bg-black text-[rgba(255,255,255,0.8)] px-[25px] py-[8px] rounded-md">全部</div>
+                        <div class="mx-4 text-[rgba(0,0,0,0.5)]">精选推荐</div>
+                        <ElDivider direction="vertical" class="!mx-0" />
+                        <div class="flex-1" v-click-outside="onClickOutside">
+                            <ElInput
+                                ref="searchInputRef"
+                                class="w-full search-input"
+                                v-model="searchValue"
+                                placeholder="您需要什么帮助"
+                                @input="handleSearch"
+                                @focus="
+                                    isSearchActive = true;
+                                    showSearchPop = true;
+                                "
+                                @blur="
+                                    isSearchActive = false;
+                                    showSearchPop = false;
+                                " />
+                        </div>
+                        <ElPopover
+                            :visible="showSearchPop"
+                            trigger="click"
+                            ref="searchPopRef"
+                            virtual-triggering
+                            popper-class="!w-[720px] !border-none !rounded-xl !p-0"
+                            :trigger-keys="[]"
+                            :show-arrow="false"
+                            :popper-options="{
+                                modifiers: [
+                                    {
+                                        name: 'offset',
+                                        options: {
+                                            offset: [-80, 20],
+                                        },
+                                    },
+                                ],
+                            }"
+                            :virtual-ref="searchInputRef">
+                            <div class="p-2">
+                                <div
+                                    class="max-h-[500px] overflow-y-auto overflow-x-hidden dynamic-scroller"
+                                    v-if="getSearchApp.length">
+                                    <app-more
+                                        :list="getSearchApp"
+                                        :count="searchCount"
+                                        :page-size="4"
+                                        :page="searchPage"
+                                        @handle="toDetail"
+                                        @load-more="loadSearchMore" />
+                                </div>
+                                <ElEmpty v-else description="暂无搜索结果" :image-size="100" />
+                            </div>
+                        </ElPopover>
+                    </div>
+                    <div class="mt-3 flex items-center gap-2">
+                        <div
+                            class="tag-style"
+                            v-for="item in tagList"
+                            :key="item.key"
+                            @click="handleTagClick(item.key)">
+                            {{ item.name }}·{{ item.name_en }}
+                        </div>
+                    </div>
+                </div>
+                <div class="mt-8 flex flex-col">
+                    <div>
+                        <div class="text-xl font-bold">精选推荐</div>
+                        <div class="text-xs text-[rgba(0,0,0,0.5)] mt-[10px]">让智能为你赋能，驱动无限可能！</div>
+                        <div class="mt-6 grid gap-3">
+                            <template v-for="item in recommendApp" :key="item.key">
+                                <div
+                                    class="bg-black rounded-2xl p-6 bg-cover bg-center cursor-pointer"
+                                    :style="{
+                                        backgroundImage: `url(${appImageData[`${item.key}_bg`].src})`,
+                                    }"
+                                    @click="toDetail(item)">
+                                    <div class="flex items-center gap-x-2 mt-[73px]">
+                                        <span class="text-[rgba(255,255,255,0.8)] text-[20px] font-bold">{{
+                                            item.name
+                                        }}</span>
+                                        <span
+                                            v-if="item.is_hot"
+                                            class="text-xs text-white px-2 py-1 rounded-md bg-primary"
+                                            >热门工具</span
+                                        >
+                                        <span
+                                            v-else-if="item.is_new"
+                                            class="text-xs text-white px-2 py-1 rounded-md bg-[#FF4906]"
+                                            >最新上线</span
+                                        >
+                                    </div>
+                                    <div class="mt-3 text-xs text-[rgba(255,255,255,0.5)]">
+                                        {{ item.desc }}
+                                    </div>
+                                    <div class="app-more-btn text-[rgba(255,255,255,0.8)] mt-5" @click="toDetail(item)">
+                                        了解更多<Icon name="local-icon-arrow_right" :size="12"></Icon>
+                                    </div>
+                                </div>
+                            </template>
+                        </div>
+                    </div>
+                    <div class="mt-8">
+                        <div class="text-xl font-bold">热门内容</div>
+                        <div class="text-xs text-[rgba(0,0,0,0.5)] mt-[10px]">
+                            挖掘深层价值，精准洞察需求，快速实现业务增长
+                        </div>
+                        <div class="mt-6 bg-white rounded-xl p-3">
+                            <template v-for="(item, index) in hotApp">
+                                <div
+                                    v-if="item.key == AppKeyEnum.PERSON_WECHAT"
+                                    class="bg-black rounded-2xl p-6 mb-[14px] bg-cover bg-center cursor-pointer"
+                                    :style="{
+                                        backgroundImage: `url(${appImageData[`${item.key}_bg`].src})`,
+                                    }"
+                                    @click="toDetail(item)">
+                                    <img :src="item.src" class="w-12 h-12 mt-4" />
+                                    <div class="mt-4 text-[rgba(255,255,255,0.8)] text-[20px] font-bold">
+                                        {{ item.name }}
+                                    </div>
+                                    <div class="mt-3 text-xs text-[rgba(255,255,255,0.5)] w-[306px]">
+                                        {{ item.desc }}
+                                    </div>
+                                    <div class="app-more-btn text-[rgba(255,255,255,0.8)] mt-9" @click="toDetail(item)">
+                                        了解更多<Icon name="local-icon-arrow_right" :size="12"></Icon>
+                                    </div>
+                                </div>
+                                <app-card v-else :item="item" @click="toDetail(item)" />
+                            </template>
+                        </div>
+                    </div>
+                    <div class="mt-8">
+                        <div class="text-xl font-bold">更多工具</div>
+                        <div class="text-xs text-[rgba(0,0,0,0.5)] mt-[10px]">
+                            通过持续开发与迭代更新，我们让功能更强大、体验更流畅、场景适应性更全面，助力企业在竞争中始终保持技术领先
+                        </div>
+                        <div class="mt-6 bg-white rounded-xl p-3">
+                            <app-more
+                                :list="getMoreApp"
+                                :count="moreApp.length"
+                                :page-size="morePageSize"
+                                :page="morePage"
+                                @handle="toDetail"
+                                @load-more="loadMore" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </ElScrollbar>
+    </div>
+    <app-intro v-if="showAppIntro" ref="appIntroRef" :name="appName" @close="showAppIntro = false" />
+    <popup ref="followPopRef" width="412" confirm-button-text="" cancel-button-text="" :show-close="false">
+        <div class="-mb-10">
+            <div
+                class="absolute right-4 top-4 w-6 h-6 rounded-full bg-[#F2F2F2] flex items-center justify-center cursor-pointer"
+                @click="closeFollowPop">
+                <Icon name="el-icon-Close"></Icon>
+            </div>
+            <div class="text-[24px] font-bold">
+                {{ currTag.name }}
+            </div>
+            <div class="text-xs mt-[15px] text-[rgba(0,0,0,0.5)]">
+                {{ currTag.desc }}
+            </div>
+            <div class="mt-[26px] flex flex-col gap-y-1">
+                <div
+                    v-for="(item, index) in getFollowList(currTag.key)"
+                    :key="index"
+                    class="app-item-card"
+                    @click="toDetail(item)">
+                    <div class="h-full hover:bg-[rgba(0,0,0,0.03)] flex items-center px-[10px] rounded-[10px] gap-x-3">
+                        <img :src="item.src" class="w-12 h-12" />
+                        <div class="flex-1">
+                            <div class="flex items-center gap-x-2">
+                                <div class="font-bold">{{ item.name }}</div>
+                                <div
+                                    v-if="!item.is_online"
+                                    class="text-[11px] bg-[rgba(0,0,0,0.05)] rounded px-2 py-[2px] text-[rgba(0,0,0,0.5)]">
+                                    开发进行中
+                                </div>
+                            </div>
+                            <div class="mt-1 flex items-center">
+                                <span class="text-[#00000080] text-xs">
+                                    {{ item.desc }}
+                                </span>
+                                <span class="app-more-btn ml-2" @click="toDetail(item)"> 了解更多 </span>
+                            </div>
+                        </div>
+                        <div class="flex-shrink-0">
+                            <ElButton
+                                type="primary"
+                                round
+                                class="!w-[100px] !h-[36px] !text-xs"
+                                @click="toggleFollow(item.key)"
+                                >{{ isFollow(item.key) ? "取消关注" : "关注" }}
+                            </ElButton>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="flex justify-center mt-5">
+                <div class="text-xs flex justify-center mb-8 gap-2 items-center p-1 bg-[#00000008] rounded-full">
+                    <Icon name="local-icon-tips2" :size="16"></Icon>
+                    <span class="text-[#0000004d] text-xs"
+                        >我们正不断拓展智能（AI）工具的边界及解决方案，敬请期待。</span
+                    >
+                </div>
+            </div>
+        </div>
+    </popup>
+    <app-live-popup v-if="showLivePop" ref="livePopRef" @close="showLivePop = false" />
 </template>
+
+<script setup lang="ts">
+import { getBaseUrl } from "@/utils/env";
+import { useFollowStore } from "@/stores/follow";
+import { ClickOutside as vClickOutside } from "element-plus";
+import { applications } from "@/config/common";
+import { AppKeyEnum, appKeyNameMap, FollowTypeEnum } from "@/enums/appEnums";
+import { cloneDeep } from "lodash-es";
+import AppIntro from "./app/_components/app-intro.vue";
+import AppMore from "./app/_components/app-more.vue";
+import AppCard from "./app/_components/app-card.vue";
+import AppLivePopup from "./app/_components/app-live-popup.vue";
+
+const followStore = useFollowStore();
+
+const { toggleFollow, isFollow } = followStore;
+
+const appImages = {
+    ...import.meta.glob("./app/_assets/images/*.png", { eager: true }),
+};
+
+const appImageData = Object.keys(appImages).reduce((acc, key) => {
+    const name = key.split("/").pop()?.split(".")[0];
+    if (name) {
+        acc[name] = {
+            name,
+            src: (appImages[key] as any).default,
+        };
+    }
+    return acc;
+}, {} as Record<string, { name: string; src: string }>);
+
+const tagList = [
+    {
+        key: FollowTypeEnum.INTERNAL,
+        name: "内务工具",
+        name_en: "Internal Affairs",
+        desc: "智能提醒、任务分配、自动归档，一站式提升团队效率与组织力，让时间与精力专注于真正重要的事。",
+    },
+    {
+        key: FollowTypeEnum.SMART_MARKETING,
+        name: "智能拓客",
+        name_en: "Smart Prospecting",
+        desc: "快速锁定潜在客户，数据驱动、智能推荐，让拓客更高效，成交更简单，助力企业业绩稳步增长！",
+    },
+    {
+        key: FollowTypeEnum.CUSTOMER_MANAGEMENT,
+        name: "客户管理",
+        name_en: "Engagement Hub",
+        desc: "精准洞察客户需求，自动跟进潜在商机，提升转化效率。帮你打造更贴心、更高效的客户体验。",
+    },
+    {
+        key: FollowTypeEnum.CONTENT_MARKETING,
+        name: "内容营销",
+        name_en: "Content Marketing",
+        desc: "快速锁定潜在客户，数据驱动、智能推荐，让拓客更高效，成交更简单，助力企业业绩稳步增长！",
+    },
+];
+const currTag = ref<any>(null);
+
+// 应用配置
+const APP_CONFIG = {
+    // 精选推荐
+    RECOMMEND: [AppKeyEnum.REDBOOK, AppKeyEnum.MEETING_MINUTES, AppKeyEnum.INTERVIEW],
+    // 热门内容
+    HOT: [AppKeyEnum.PERSON_WECHAT, AppKeyEnum.LIVE, AppKeyEnum.SERVICE, AppKeyEnum.TELEMARKETING],
+
+    // 更多工具
+    MORE: [
+        AppKeyEnum.PERSON_WECHAT,
+        AppKeyEnum.REDBOOK,
+        AppKeyEnum.LADDER_PLAYER,
+        AppKeyEnum.INTERVIEW,
+        AppKeyEnum.MEETING_MINUTES,
+        AppKeyEnum.DRAWING,
+        AppKeyEnum.SERVICE,
+        AppKeyEnum.MIND_MAP,
+        AppKeyEnum.DOUBYIN,
+        AppKeyEnum.KUAISHOU,
+        AppKeyEnum.SPH,
+        AppKeyEnum.TELEMARKETING,
+        AppKeyEnum.TAX,
+        AppKeyEnum.LAW,
+        AppKeyEnum.WORD,
+        AppKeyEnum.PPT,
+        AppKeyEnum.COMPANY_WECHAT,
+        AppKeyEnum.STATEMENT,
+        AppKeyEnum.POSTER,
+        AppKeyEnum.CONTRACT,
+        AppKeyEnum.LIVE,
+    ],
+} as const;
+
+const followPopRef = shallowRef();
+const handleTagClick = (key: FollowTypeEnum) => {
+    currTag.value = tagList.find((item) => item.key === key);
+    followPopRef.value.open();
+};
+
+const closeFollowPop = () => {
+    followPopRef.value.close();
+};
+
+const getTagAppList = (key: FollowTypeEnum) => {
+    const list: any = Object.keys(applications).map((key) => ({
+        ...applications[key],
+        key,
+    }));
+    return list.filter((item: any) => item.followType === key);
+};
+
+const getFollowList = computed(() => {
+    return (key: FollowTypeEnum) => getTagAppList(key);
+});
+
+// 精选推荐
+const recommendApp = computed(() => {
+    return APP_CONFIG.RECOMMEND.map((key) => ({
+        key,
+        ...applications[key],
+        desc: applications[key].desc2,
+        name: appKeyNameMap[key],
+        is_new: key == AppKeyEnum.REDBOOK,
+        is_hot: [AppKeyEnum.MEETING_MINUTES, AppKeyEnum.INTERVIEW].includes(key),
+    }));
+});
+
+// 热门内容
+const hotApp = computed(() => {
+    return APP_CONFIG.HOT.map((key) => ({
+        key,
+        ...applications[key],
+        desc: applications[key].desc2,
+        name: appKeyNameMap[key],
+    }));
+});
+
+// 更多工具
+const morePageSize = ref(6);
+const morePage = ref(1);
+const moreApp = computed(() => {
+    return APP_CONFIG.MORE.map((key) => ({
+        key,
+        ...applications[key],
+        desc: applications[key].desc2,
+        name: appKeyNameMap[key],
+    }));
+});
+
+const getMoreApp = computed(() => {
+    return moreApp.value.slice(0, morePage.value * morePageSize.value);
+});
+
+const loadMore = () => {
+    morePage.value++;
+};
+
+const searchInputRef = shallowRef();
+const searchPopRef = shallowRef();
+const showSearchPop = ref(false);
+const onClickOutside = () => {
+    unref(searchPopRef).popperRef?.delayHide?.();
+};
+
+const searchValue = ref("");
+const searchApp = ref<any[]>(cloneDeep(moreApp.value));
+const searchPage = ref(1);
+const searchCount = ref(searchApp.value.length);
+const isSearchActive = ref(false);
+const getSearchApp = computed(() => {
+    const lists = cloneDeep(searchApp.value).slice(0, !searchValue.value ? searchPage.value * 4 : moreApp.value.length);
+    return lists.filter((item) => item.name.toLowerCase().indexOf(searchValue.value.trim().toLowerCase()) > -1);
+});
+
+const loadSearchMore = () => {
+    searchPage.value++;
+};
+
+const handleSearch = (value: string) => {
+    if (!value.trim()) {
+        searchCount.value = moreApp.value.length;
+        return;
+    }
+    searchCount.value = getSearchApp.value.length;
+};
+
+const appIntroRef = ref<InstanceType<typeof AppIntro> | null>(null);
+const showAppIntro = ref(false);
+
+const livePopRef = shallowRef();
+const showLivePop = ref(false);
+
+const appName = ref("");
+
+const toDetail = async (item: any) => {
+    const { key, name } = item;
+    switch (key) {
+        case AppKeyEnum.DRAWING:
+        case AppKeyEnum.MEETING_MINUTES:
+        case AppKeyEnum.MIND_MAP:
+        case AppKeyEnum.INTERVIEW:
+        case AppKeyEnum.REDBOOK:
+        case AppKeyEnum.SERVICE:
+            window.open(`${getBaseUrl()}/app/${key}`, "_blank");
+            break;
+        case AppKeyEnum.LADDER_PLAYER:
+            appName.value = name;
+            showAppIntro.value = true;
+            await nextTick();
+            appIntroRef.value?.open("ladder_player");
+            break;
+        case AppKeyEnum.PERSON_WECHAT:
+            window.open(`${getBaseUrl()}/app/person_wechat/chat`, "_blank");
+            break;
+        case AppKeyEnum.LIVE:
+            showLivePop.value = true;
+            await nextTick();
+            livePopRef.value?.open();
+            break;
+        default:
+            feedback.notifyWarning("功能正在开发中，敬请期待!");
+            break;
+    }
+};
+</script>
+
+<style scoped lang="scss">
+.search-bar {
+    @apply rounded-xl border bg-white p-2 flex items-center;
+    &.is-active {
+        box-shadow: 0px 0px 0px 2px rgba(0, 101, 251, 0.2);
+        border-color: var(--color-primary);
+        background: rgba(0, 101, 251, 0.03);
+    }
+}
+:deep(.search-input) {
+    .el-input__wrapper {
+        box-shadow: none;
+        background-color: transparent;
+        .el-input__inner {
+            &::placeholder {
+                @apply text-[rgba(0,0,0,0.5)] text-base;
+            }
+        }
+    }
+}
+
+.tag-style {
+    @apply cursor-pointer rounded-full px-3 py-1 text-[11px] text-[rgba(0,0,0,0.5)] bg-[rgba(0,0,0,0.03)] hover:bg-[rgba(0,0,0,0.05)];
+}
+</style>