173 lines
12 KiB
Vue
173 lines
12 KiB
Vue
<template>
|
||
<div class="agent-store-page">
|
||
<div class="grid-bg min-h-screen">
|
||
<main>
|
||
<div class="page-shell relative">
|
||
<div class="decor-circle decor-circle--blue"></div>
|
||
<div class="decor-circle decor-circle--purple"></div>
|
||
<div class="decor-circle decor-circle--green"></div>
|
||
|
||
<section class="hero-section hero-section--compact">
|
||
<div class="hero-content">
|
||
<div class="hero-eyebrow">
|
||
<svg class="icon-svg--xs" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||
</svg>
|
||
即开即用
|
||
</div>
|
||
<h1 class="hero-title">
|
||
<span class="gradient-text">智能体商店</span>
|
||
</h1>
|
||
<p class="hero-description">
|
||
覆盖招投标、合同审查、能源监控、工业质检等多行业场景，即开即用的AI智能体服务
|
||
</p>
|
||
</div>
|
||
<div class="hero-blur hero-blur--blue floating"></div>
|
||
<div class="hero-blur hero-blur--indigo hero-blur--indigo-delay floating"></div>
|
||
</section>
|
||
|
||
<section class="page-section page-section--apps">
|
||
<div class="section-inner">
|
||
<div class="tabs-primary">
|
||
<button type="button" class="tab-button" :class="{ 'is-main-active': activeMainTab === 'general' }" @click="setMainTab('general')">
|
||
通用应用
|
||
</button>
|
||
<button type="button" class="tab-button" :class="{ 'is-main-active': activeMainTab === 'industry' }" @click="setMainTab('industry')">
|
||
行业应用
|
||
</button>
|
||
</div>
|
||
|
||
<div class="tabs-secondary">
|
||
<button
|
||
v-for="tab in visibleSubTabs"
|
||
:key="tab.id"
|
||
type="button"
|
||
class="tab-button"
|
||
:class="{ 'is-sub-active': activeSubTab === tab.id }"
|
||
@click="activeSubTab = tab.id"
|
||
>
|
||
{{ tab.label }}
|
||
</button>
|
||
</div>
|
||
|
||
<div class="app-grid">
|
||
<div v-for="app in filteredApps" :key="app.id" class="app-card card-hover">
|
||
<div class="app-card__decor" :class="app.decorClass"></div>
|
||
<div class="app-card__body">
|
||
<div class="app-card__header">
|
||
<div class="app-icon" :class="app.iconClass">
|
||
<svg class="icon-svg" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="app.iconPath" />
|
||
</svg>
|
||
</div>
|
||
<h3>{{ app.name }}</h3>
|
||
</div>
|
||
<p>{{ app.description }}</p>
|
||
<div class="tag-list">
|
||
<span v-for="tag in app.tags" :key="tag" class="feature-tag">{{ tag }}</span>
|
||
<button type="button" class="use-btn use-btn--sm" @click="handleUse(app)">
|
||
{{ app.casePath ? '查看案例' : '立即使用' }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="page-section">
|
||
<div class="section-inner">
|
||
<div class="cta-panel">
|
||
<h2 class="cta-panel__title">需要定制智能体？</h2>
|
||
<p class="cta-panel__desc">告诉我们您的业务场景，我们将为您打造专属的AI智能体解决方案</p>
|
||
<button type="button" class="use-btn btn-primary" @click="handleContact">
|
||
联系我们
|
||
<svg class="icon-svg--sm" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'AgentStore',
|
||
data() {
|
||
return {
|
||
activeMainTab: 'general',
|
||
activeSubTab: 'all',
|
||
generalSubTabs: [
|
||
{ id: 'all', label: '全部' },
|
||
{ id: 'bidding', label: '招投标' },
|
||
{ id: 'office', label: '办公' }
|
||
],
|
||
industrySubTabs: [
|
||
{ id: 'all', label: '全部' },
|
||
{ id: 'forestry', label: '林业' },
|
||
{ id: 'energy', label: '能源' },
|
||
{ id: 'industry', label: '工业' },
|
||
{ id: 'crossBorder', label: '跨境贸易' },
|
||
{ id: 'internet', label: '互联网' }
|
||
],
|
||
apps: [
|
||
{ id: 1, name: 'E招标', description: '全流程电子化招标交易核心工具，支持多品类招标业务线上开展，实现招投标全过程无纸化运行。搭载多CA互认、在线清标、电子保函等实用功能，保障招标合规高效。', tags: ['多CA互认', '在线清标', '电子保函'], category: 'general', subCategory: 'bidding', iconPath: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z', decorClass: 'decor-gradient-blue', iconClass: 'icon-gradient-blue' },
|
||
{ id: 2, name: 'E投标', description: '适配全品类电子招投标场景的线上投标工具，支持在线完成信息注册、标书获取、文件编制、加密提交全流程操作。实时同步招标变更与澄清信息，保障投标过程安全可追溯。', tags: ['在线签章', '加密提交', '变更同步'], category: 'general', subCategory: 'bidding', iconPath: 'M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12', decorClass: 'decor-gradient-green', iconClass: 'icon-gradient-green', externalUrl: 'https://bid-ocai-v2.jinan.opencomputing.cn/' },
|
||
{ id: 3, name: 'E评标', description: '智能化线上评审系统，覆盖专家签到、清标比对、符合性评审、打分汇总、报告生成全流程。支持标书交叉比对、废标在线操作与澄清收发，提升评标效率与规范性。', tags: ['专家云签', '交叉比对', '智能打分'], category: 'general', subCategory: 'bidding', iconPath: '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-6 9l2 2 4-4', decorClass: 'decor-gradient-indigo', iconClass: 'icon-gradient-indigo' },
|
||
{ id: 4, name: '合同智能审查', description: 'AI驱动的办公智能体，可快速识别合同中的风险条款、表述歧义、合规漏洞，自动标注问题位置并给出修改建议。支持多类型合同模板适配，大幅缩短人工审查时长。', tags: ['风险识别', '批量审查', '审查报告'], category: 'general', subCategory: 'office', iconPath: 'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z', decorClass: 'decor-gradient-amber', iconClass: 'icon-gradient-amber', casePath: '/homePage/agentStore/contractCase' },
|
||
{ id: 5, name: '投策智能体', description: '面向企业投资决策的辅助智能体，整合多维度市场数据、行业趋势与政策信息，通过算法模拟不同决策场景的收益与风险，自动生成可视化分析报告，提升投资方案科学性。', tags: ['场景模拟', '可视化报告', '风险预判'], category: 'general', subCategory: 'office', iconPath: 'M13 7h8m0 0v8m0-8l-8 8-4-4-6 6', decorClass: 'decor-gradient-purple', iconClass: 'icon-gradient-purple', casePath: '/homePage/agentStore/decisionCase' },
|
||
{ id: 6, name: '采伐智审', description: '面向林业管理的行业智能体，可在线完成采伐申请材料的智能核验，自动比对采伐范围、树种、蓄积量等核心指标与合规要求，快速识别违规申请，助力林业资源可持续利用。', tags: ['智能核验', '合规比对', '违规识别'], category: 'industry', subCategory: 'forestry', iconPath: 'M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L22 12l-6.714 3.143L13 22l-2.286-6.857L4 12l6.714-3.143L13 2z', decorClass: 'decor-gradient-emerald', iconClass: 'icon-gradient-emerald' },
|
||
{ id: 7, name: '燃机智慧监盘', description: '能源领域工业智能体，实时采集燃机运行的温度、压力、振动等多维度数据，通过AI算法识别异常运行征兆，提前预判潜在故障，保障燃机稳定运行，降低运维成本。', tags: ['实时监测', '故障预判', '智能告警'], category: 'industry', subCategory: 'energy', iconPath: 'M13 10V3L4 14h7v7l9-11h-7z', decorClass: 'decor-gradient-red', iconClass: 'icon-gradient-red' },
|
||
{ id: 8, name: '电价预测', description: '面向能源行业的预测智能体，结合历史电价数据、供需变化、政策调整、天气影响等多维度变量，通过机器学习模型实现不同周期的电价精准预测，帮助电力企业优化收益管理。', tags: ['电价预测', '策略优化', '风险规避'], category: 'industry', subCategory: 'energy', iconPath: 'M13 7h8m0 0v8m0-8l-8 8-4-4-6 6', decorClass: 'decor-gradient-cyan', iconClass: 'icon-gradient-cyan' },
|
||
{ id: 9, name: 'AI质检', description: '工业领域质量检测智能体，依托计算机视觉与深度学习技术，可高清识别产品表面划痕、尺寸偏差、形态缺陷等多种问题，实现高速生产线实时检测，帮助企业提升良品率。', tags: ['视觉检测', '缺陷识别', '实时检测'], category: 'industry', subCategory: 'industry', iconPath: 'M15 12a3 3 0 11-6 0 3 3 0 016 0zm7 0s-3.5 7-10 7-10-7-10-7 3.5-7 10-7 10 7 10 7z', decorClass: 'decor-gradient-orange', iconClass: 'icon-gradient-orange' },
|
||
{ id: 10, name: '智能报关', description: '跨境贸易领域智能服务体，可自动识别报关单据信息，比对海关监管要求，智能校验申报数据准确性，自动生成规范报关单，提升申报通过率，降低合规风险。', tags: ['单据识别', '智能校验', '风险预判'], category: 'industry', subCategory: 'crossBorder', iconPath: 'M3 6l9-4 9 4-9 4-9-4zm0 6l9 4 9-4m-18 0l9-4 9 4m-9 4v6', decorClass: 'decor-gradient-teal', iconClass: 'icon-gradient-teal' },
|
||
{ id: 11, name: 'AI漫画制作', description: '互联网内容创作智能体，覆盖从剧本生成、分镜拆解、素材生成到视频合成的全流程制作。支持工业化批量生产，帮助中小团队低成本快速产出AI漫画作品，大幅降低创作门槛。', tags: ['剧本生成', '批量生产', '视频合成'], category: 'industry', subCategory: 'internet', iconPath: 'M4 5a2 2 0 012-2h12a2 2 0 012 2v14a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm4 0v14m8-14v14M4 9h16M4 15h16', decorClass: 'decor-gradient-pink', iconClass: 'icon-gradient-pink' }
|
||
]
|
||
}
|
||
},
|
||
computed: {
|
||
visibleSubTabs() {
|
||
return this.activeMainTab === 'general' ? this.generalSubTabs : this.industrySubTabs
|
||
},
|
||
filteredApps() {
|
||
let result = this.apps
|
||
result = result.filter(app => app.category === this.activeMainTab)
|
||
if (this.activeSubTab !== 'all') {
|
||
result = result.filter(app => app.subCategory === this.activeSubTab)
|
||
}
|
||
return result
|
||
}
|
||
},
|
||
methods: {
|
||
setMainTab(tab) {
|
||
this.activeMainTab = tab
|
||
this.activeSubTab = 'all'
|
||
},
|
||
handleUse(app) {
|
||
if (app.externalUrl) {
|
||
window.open(app.externalUrl, '_blank')
|
||
return
|
||
}
|
||
if (app.casePath) {
|
||
this.$router.push(app.casePath)
|
||
return
|
||
}
|
||
this.$message.info(`即将使用智能体：${app.name}`)
|
||
},
|
||
handleContact() {
|
||
this.$message.info('感谢您的关注，我们将尽快与您联系')
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
@import './agent.css';
|
||
</style>
|