jc
e856d8f4fd
- 引入 CSS 变量定义统一设计系统色彩、边框、圆角和阴影等 - 新增全局基础样式，使用暗色背景和统一字体颜色 - 优化滚动条样式和焦点环，提高交互体验 - 添加全局过渡动画类 - 统一输入框和按钮样式，实现一致外观和交互反馈 - 优化 Markdown 渲染样式，增强代码块和表格视觉效果 - 调整思考过程折叠样式，提升可读性和样式一致性 - 添加多种通用组件样式，如按钮、徽章等 - 服务器代理端口由8000改为7964，更新 vite 配置文件
94 lines
7.4 KiB
Vue
94 lines
7.4 KiB
Vue
<template>
|
||
<div class="h-full overflow-y-auto">
|
||
<div class="max-w-4xl mx-auto px-6 py-8 animate-fade-in">
|
||
<!-- 欢迎 Banner -->
|
||
<div class="relative mb-8 p-6 rounded-2xl bg-gradient-to-br from-indigo-600/10 via-gray-900 to-purple-600/10 border border-gray-800/40 overflow-hidden">
|
||
<div class="absolute top-0 right-0 w-64 h-64 bg-indigo-500/5 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2"></div>
|
||
<h1 class="text-xl font-bold text-gray-100 mb-1.5 relative">AI 工具库</h1>
|
||
<p class="text-sm text-gray-400 relative">智能工具助力编程，提升开发效率</p>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<!-- 需求助手 -->
|
||
<div
|
||
@click="$router.push('/tools/requirement')"
|
||
class="tool-card group relative bg-gray-900/80 border border-gray-800/60 rounded-2xl p-6 cursor-pointer hover:border-indigo-500/40 transition-all duration-300 overflow-hidden"
|
||
>
|
||
<div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-indigo-500 to-indigo-400 opacity-0 group-hover:opacity-100 transition-opacity rounded-t-2xl"></div>
|
||
<div class="w-12 h-12 rounded-xl bg-indigo-500/15 flex items-center justify-center mb-4 group-hover:shadow-lg group-hover:shadow-indigo-500/10 transition-all duration-300">
|
||
<svg class="w-6 h-6 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"/></svg>
|
||
</div>
|
||
<h3 class="text-base font-semibold text-gray-200 mb-2 group-hover:text-indigo-400 transition-colors">需求理解助手</h3>
|
||
<p class="text-sm text-gray-500 leading-relaxed mb-4">把甲方发来的内容粘贴进来，AI帮你整理成清晰的功能清单、用户故事和验收标准</p>
|
||
<div class="flex items-center gap-2">
|
||
<span class="px-2.5 py-1 bg-indigo-500/10 text-indigo-400 text-[11px] rounded-lg border border-indigo-500/10">产品经理视角</span>
|
||
<span class="px-2.5 py-1 bg-indigo-500/10 text-indigo-400 text-[11px] rounded-lg border border-indigo-500/10">程序员视角</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 架构助手 -->
|
||
<div
|
||
@click="$router.push('/tools/architecture')"
|
||
class="tool-card group relative bg-gray-900/80 border border-gray-800/60 rounded-2xl p-6 cursor-pointer hover:border-emerald-500/40 transition-all duration-300 overflow-hidden"
|
||
>
|
||
<div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-emerald-500 to-emerald-400 opacity-0 group-hover:opacity-100 transition-opacity rounded-t-2xl"></div>
|
||
<div class="w-12 h-12 rounded-xl bg-emerald-500/15 flex items-center justify-center mb-4 group-hover:shadow-lg group-hover:shadow-emerald-500/10 transition-all duration-300">
|
||
<svg class="w-6 h-6 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>
|
||
</div>
|
||
<h3 class="text-base font-semibold text-gray-200 mb-2 group-hover:text-emerald-400 transition-colors">架构选型助手</h3>
|
||
<p class="text-sm text-gray-500 leading-relaxed mb-4">输入项目需求，AI给出技术选型建议、数据库设计、API接口清单和系统架构图</p>
|
||
<div class="flex items-center gap-2">
|
||
<span class="px-2.5 py-1 bg-emerald-500/10 text-emerald-400 text-[11px] rounded-lg border border-emerald-500/10">技术选型</span>
|
||
<span class="px-2.5 py-1 bg-emerald-500/10 text-emerald-400 text-[11px] rounded-lg border border-emerald-500/10">架构设计</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- API Hub -->
|
||
<div
|
||
@click="$router.push('/tools/api-hub')"
|
||
class="tool-card group relative bg-gray-900/80 border border-gray-800/60 rounded-2xl p-6 cursor-pointer hover:border-amber-500/40 transition-all duration-300 overflow-hidden"
|
||
>
|
||
<div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-amber-500 to-amber-400 opacity-0 group-hover:opacity-100 transition-opacity rounded-t-2xl"></div>
|
||
<div class="w-12 h-12 rounded-xl bg-amber-500/15 flex items-center justify-center mb-4 group-hover:shadow-lg group-hover:shadow-amber-500/10 transition-all duration-300">
|
||
<svg class="w-6 h-6 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
|
||
</div>
|
||
<h3 class="text-base font-semibold text-gray-200 mb-2 group-hover:text-amber-400 transition-colors">API Hub</h3>
|
||
<p class="text-sm text-gray-500 leading-relaxed mb-4">团队共享API资源管理，集中管理、测试和监控各类公用API服务</p>
|
||
<div class="flex items-center gap-2">
|
||
<span class="px-2.5 py-1 bg-amber-500/10 text-amber-400 text-[11px] rounded-lg border border-amber-500/10">密码保护</span>
|
||
<span class="px-2.5 py-1 bg-amber-500/10 text-amber-400 text-[11px] rounded-lg border border-amber-500/10">在线测试</span>
|
||
<span class="px-2.5 py-1 bg-amber-500/10 text-amber-400 text-[11px] rounded-lg border border-amber-500/10">健康监控</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 联网搜索 -->
|
||
<div
|
||
@click="$router.push('/tools/web-search')"
|
||
class="tool-card group relative bg-gray-900/80 border border-gray-800/60 rounded-2xl p-6 cursor-pointer hover:border-blue-500/40 transition-all duration-300 overflow-hidden"
|
||
>
|
||
<div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-blue-500 to-blue-400 opacity-0 group-hover:opacity-100 transition-opacity rounded-t-2xl"></div>
|
||
<div class="w-12 h-12 rounded-xl bg-blue-500/15 flex items-center justify-center mb-4 group-hover:shadow-lg group-hover:shadow-blue-500/10 transition-all duration-300">
|
||
<svg class="w-6 h-6 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
|
||
</div>
|
||
<h3 class="text-base font-semibold text-gray-200 mb-2 group-hover:text-blue-400 transition-colors">联网搜索助手</h3>
|
||
<p class="text-sm text-gray-500 leading-relaxed mb-4">基于豆包大模型的联网搜索，实时获取最新信息并智能整合回答</p>
|
||
<div class="flex items-center gap-2">
|
||
<span class="px-2.5 py-1 bg-blue-500/10 text-blue-400 text-[11px] rounded-lg border border-blue-500/10">实时搜索</span>
|
||
<span class="px-2.5 py-1 bg-blue-500/10 text-blue-400 text-[11px] rounded-lg border border-blue-500/10">智能整合</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.tool-card {
|
||
transform: translateY(0);
|
||
}
|
||
.tool-card:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
|
||
}
|
||
</style>
|