<script lang="ts" setup>
interface ToolCategory {
  category: string
  icon: string
  links: ToolLink[]
}

interface ToolLink {
  id: string
  label: string
  description: string
  url: string
  logo?: string
  tags?: string[]
}

const toolCats = ref<ToolCategory[]>([
  {
    category: 'LLM 对话',
    icon: 'tabler:message-circle',
    links: [
      {
        id: 'doubao',
        label: '豆包',
        description:
          '豆包网页版是一款抖音集团推出的在线 AI 助手，基于云雀模型构建的在线使用的多功能人工智能工具和免费 AI 聊天机器人。',
        url: 'https://www.doubao.com/chat/',
      },
      {
        id: 'kimi',
        label: 'Kimi',
        description:
          'Kimi 是由月之暗面科技有限公司开发的智能聊天助手，旨在为用户提供高效、智能和友好的交流体验。作为一款先进的人工智能产品，Kimi 集成了多种功能和特点，使其能够满足用户在多种场景下的沟通需求。',
        url: 'https://kimi.ai/',
      },
      {
        id: 'chatglm',
        label: '智谱清言',
        description:
          '智谱清言是一款基于人工智能技术的千亿参数对话模型，遵循中国政府的立场和社会主义价值观，提供多领域知识问答、信息检索、文本生成等服务。',
        url: 'https://chatglm.cn/',
      },
      {
        id: 'xiezuocat',
        label: '秘塔写作猫',
        description:
          '一代 AI 写作伴侣，旨在帮助用户推敲用语、斟酌文法、改写文风，并提供实时同步翻译功能。它为用户创造了一个简洁的写作环境，并支持账号数据同步，使用户能够随时随地进行写作。',
        url: 'https://xiezuocat.com/',
      },
      {
        id: 'xinghuo',
        label: '讯飞星火',
        description:
          '讯飞星火 AI 助手，高性能 AI 语言模型，具备多模态理解和生成能力，服务于企业服务、智能硬件、智慧政务、智慧金融、智慧生活和智慧医疗等多个领域。',
        url: 'https://xinghuo.xfyun.cn/desk',
      },
    ],
  },
  {
    category: 'AI 绘画',
    icon: 'tabler:photo-edit',
    links: [
      {
        id: 'jimeng',
        label: '即梦 Dreamina',
        description:
          '即梦是一个功能丰富的 AI 创作工具，即梦 AI 通过理解和应用用户的创意输入，提供了从视频生成到 AI 绘画的一站式解决方案。',
        url: 'https://jimeng.jianying.com/ai-tool/home',
      },
      {
        id: 'doubao',
        label: '豆包',
        description:
          '豆包网页版是一款抖音集团推出的在线 AI 助手，基于云雀模型构建的在线使用的多功能人工智能工具和免费 AI 聊天机器人。',
        url: 'https://www.doubao.com/chat/',
      },
      {
        id: 'huiwa',
        label: '绘蛙',
        description:
          '帮助用户快速生成商业摄影图片和吸引人的文案。它专为满足小红书、电商和跨境电商等不同平台的内容创作需求而设计。',
        url: 'https://www.ihuiwa.com/workspace/ai-image',
        tags: ['需登录'],
      },
      {
        id: 'abei',
        label: '阿贝 AI 绘画',
        description:
          '用 AI 创作绘本，让孩子的创意有更多表现形式，让天马行空的想法更快实现；家长也可以把想讲的话在10分钟之内创作出一个绘本故事，讲给孩子听，让亲子间的互动更加紧密，更为和谐。',
        url: 'https://abeiai.com/',
        tags: ['需登录'],
      },
      {
        id: 'hunyuan',
        label: '腾讯混元生图',
        description:
          '为创新性的设计、故事讲述以及更多场景提供一种强大而灵活的解决方案。',
        url: 'https://image.hunyuan.tencent.com/',
        tags: ['需登录'],
      },
    ],
  },
  {
    category: 'PPT 生成处理',
    icon: 'tabler:file-text',
    links: [
      {
        id: 'chatglm',
        label: '清言 PPT',
        description:
          '智谱清言是一款基于人工智能技术的千亿参数对话模型，遵循中国政府的立场和社会主义价值观，提供多领域知识问答、信息检索、文本生成等服务。',
        url: 'https://chatglm.cn/',
        tags: ['需登录'],
      },
      {
        id: 'aippt',
        label: '博思 AIPPT',
        description:
          '博思 AIPPT 是一个强大的在线PPT辅助工具，它通过 AI 技术简化了 PPT 的创建过程，提高了制作效率，同时保证了演示文稿的专业性和吸引力。',
        url: 'https://pptgo.cn/',
        tags: ['需登录'],
      },
      {
        id: 'gezhe',
        label: '歌者 PPT',
        description:
          '一键智能生成，内置海量模板，支持在线编辑美化，轻松做出令人惊艳的 PPT',
        url: 'https://gezhe.com/',
        tags: ['需登录'],
      },
      {
        id: 'wenku',
        label: '百度文库助手',
        description:
          '智能PPT、智能创作、智能编辑、智能总结四大AI能力，全面提升文档生产力',
        url: 'https://wenku.baidu.com/ndlaunch/browse/chat',
      },
      {
        id: 'chatppt',
        label: 'ChatPPT',
        description:
          'ChatPPT 是一个创新的 AI 驱动的 PPT 生成工具，它通过对话式交互和全流程 AI 创作，大幅简化了 PPT 的制作过程。',
        url: 'https://www.chat-ppt.com/',
        tags: ['需登录'],
      },
    ],
  },
  {
    category: 'AI 视频生成',
    icon: 'tabler:video',
    links: [
      {
        id: 'keling',
        label: '可灵',
        description:
          '可灵AI大模型是快手推出的一款创新的视频生成工具，它通过先进的AI技术，为用户提供了一个能够将创意快速转化为视频内容的平台。',
        url: 'https://klingai.kuaishou.com/',
      },
      {
        id: 'hailuo',
        label: '海螺 AI 视频',
        description:
          '多功能的AI助手，通过提供视频创作、音乐创作、图像识别和文本写作等功能，帮助用户提升工作和学习的效率。它的智能化和高效率的特点，使其成为提升生产力的有力工具。',
        url: 'https://hailuoai.com/video',
      },
      {
        id: 'huiwa',
        label: '绘蛙',
        description:
          '帮助用户快速生成商业摄影图片和吸引人的文案。它专为满足小红书、电商和跨境电商等不同平台的内容创作需求而设计。',
        url: 'https://www.ihuiwa.com/workspace/ai-image',
        tags: ['需登录'],
      },
      {
        id: 'daydream',
        label: '白日梦',
        description:
          '多功能AIGC视频内容创作平台，提供丰富的活动、角色库、创作支持和社区交流功能。它旨在为用户提供一个综合性的在线体验和创作空间，适合喜欢在线互动和创作的用户。',
        url: 'https://aibrm.com/',
      },
    ],
  },
])

const open = (url?: string | URL, target?: string, features?: string) => {
  return window.open(url, target, features)
}
</script>

<template>
  <div class="w-full h-full bg-white dark:bg-neutral-900 p-4 sm:p-0 overflow-y-scroll">
    <div class="container max-w-[1280px] mx-auto py-4 space-y-12">
      <div
        class="pattern w-full p-10 flex flex-col justify-center gap-3 items-center rounded-lg shadow-sm border border-gray-200 dark:border-neutral-700"
      >
        <h1 class="text-4xl font-bold text-center text-primary">AI 工具导航</h1>
        <p>常用 AI 工具，一网打尽</p>
      </div>
      <div class="w-full">
        <div class="space-y-10">
          <div
            v-for="(cat, i) in toolCats"
            class="space-y-4"
            :key="i"
          >
            <h2 class="text-2xl font-bold text-primary flex items-center gap-2">
              <UIcon
                :name="cat.icon"
                class="text-3xl"
              />
              <span>{{ cat.category }}</span>
            </h2>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
              <div
                v-for="link in cat.links"
                class="bg-white dark:bg-neutral-800 p-4 rounded-lg shadow-sm border border-gray-200 dark:border-neutral-700 space-y-2 cursor-pointer hover:shadow-md transition-all duration-300"
                :key="link.id"
                @click="open(link.url)"
              >
                <div class="flex items-start gap-3">
                  <img
                    :src="link.logo || `/logo/${link.id}.png`"
                    :alt="link.label"
                    class="w-10 h-10 rounded-lg"
                  />
                  <div class="flex flex-col gap-1">
                    <div class="flex items-center justify-between">
                      <h3 class="text-xl font-bold flex-1">{{ link.label }}</h3>
                      <div
                        v-if="link.tags"
                        class="flex items-center gap-2"
                      >
                        <UBadge
                          v-for="(tag, i) in link.tags"
                          color="teal"
                          variant="subtle"
                          size="xs"
                          :key="i"
                        >
                          {{ tag }}
                        </UBadge>
                      </div>
                    </div>

                    <UPopover
                      mode="hover"
                      :popper="{ offsetDistance: 24 }"
                    >
                      <p
                        class="text-sm text-gray-600 dark:text-gray-400 text-justify line-clamp-2"
                      >
                        {{ link.description }}
                      </p>

                      <template #panel>
                        <div class="p-2">
                          <p
                            class="text-xs text-gray-600 dark:text-gray-400 text-justify max-w-md"
                          >
                            {{ link.description }}
                          </p>
                        </div>
                      </template>
                    </UPopover>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3Cellipse fill='none' stroke-width='1.6' stroke-opacity='0.2' id='a' rx='600' ry='450'/%3E%3C/defs%3E%3Cg style='transform-origin:center'%3E%3Cg transform='' style='transform-origin:center'%3E%3Cg transform='rotate(-160 0 0)' style='transform-origin:center'%3E%3Cg transform='translate(1000 750)'%3E%3Cuse stroke='%23FF008A' href='%23a' transform='rotate(-60 0 0) scale(0.4)'/%3E%3Cuse stroke='%23f30a8f' href='%23a' transform='rotate(-50 0 0) scale(0.5)'/%3E%3Cuse stroke='%23e81495' href='%23a' transform='rotate(-40 0 0) scale(0.6)'/%3E%3Cuse stroke='%23dc1f9a' href='%23a' transform='rotate(-30 0 0) scale(0.7)'/%3E%3Cuse stroke='%23d1299f' href='%23a' transform='rotate(-20 0 0) scale(0.8)'/%3E%3Cuse stroke='%23c533a5' href='%23a' transform='rotate(-10 0 0) scale(0.9)'/%3E%3Cuse stroke='%23b93daa' href='%23a' transform=''/%3E%3Cuse stroke='%23ae47af' href='%23a' transform='rotate(10 0 0) scale(1.1)'/%3E%3Cuse stroke='%23a251b5' href='%23a' transform='rotate(20 0 0) scale(1.2)'/%3E%3Cuse stroke='%23975cba' href='%23a' transform='rotate(30 0 0) scale(1.3)'/%3E%3Cuse stroke='%238b66bf' href='%23a' transform='rotate(40 0 0) scale(1.4)'/%3E%3Cuse stroke='%238070c5' href='%23a' transform='rotate(50 0 0) scale(1.5)'/%3E%3Cuse stroke='%23747aca' href='%23a' transform='rotate(60 0 0) scale(1.6)'/%3E%3Cuse stroke='%236884cf' href='%23a' transform='rotate(70 0 0) scale(1.7)'/%3E%3Cuse stroke='%235d8fd4' href='%23a' transform='rotate(80 0 0) scale(1.8)'/%3E%3Cuse stroke='%235199da' href='%23a' transform='rotate(90 0 0) scale(1.9)'/%3E%3Cuse stroke='%2346a3df' href='%23a' transform='rotate(100 0 0) scale(2)'/%3E%3Cuse stroke='%233aade4' href='%23a' transform='rotate(110 0 0) scale(2.1)'/%3E%3Cuse stroke='%232eb7ea' href='%23a' transform='rotate(120 0 0) scale(2.2)'/%3E%3Cuse stroke='%2323c1ef' href='%23a' transform='rotate(130 0 0) scale(2.3)'/%3E%3Cuse stroke='%2317ccf4' href='%23a' transform='rotate(140 0 0) scale(2.4)'/%3E%3Cuse stroke='%230cd6fa' href='%23a' transform='rotate(150 0 0) scale(2.5)'/%3E%3Cuse stroke='%2300E0FF' href='%23a' transform='rotate(160 0 0) scale(2.6)'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}
</style>
