293 lines
13 KiB
Vue
293 lines
13 KiB
Vue
<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: 'deepseek',
|
||
label: 'DeepSeek',
|
||
description:
|
||
'深度求索人工智能基础技术研究有限公司(简称“深度求索”或“DeepSeek”)，成立于2023年，是一家专注于实现AGI的中国公司。',
|
||
url: 'https://chat.deepseek.com/',
|
||
},
|
||
{
|
||
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>
|