Gaia Agent K Portal

一个精美的 AI 智能体入口门户组件，可在其他 Vue 3 项目中直接使用。

特性

• 🎨 精美的 UI 设计，白色主题
• ⚡ 流畅的动画效果
• 📱 响应式设计，支持移动端
• 🎯 易于集成和使用
• 🔧 高度可定制
• ✨ 样式内置，无需 Tailwind CSS

安装

npm install gaia-portal
# 或
yarn add gaia-portal
# 或
pnpm add gaia-portal

快速开始

基本使用

<template>
  <GaiaAgentKPortal
    title="AGENT K"
    subtitle="下一代AI智能体入口"
    button-text="立即进入"
    :nav-items="navItems"
    @button-click="handleButtonClick"
    @item-click="handleItemClick"
  />
</template>

<script setup>
// 导入组件和样式
import GaiaAgentKPortal from "gaia-portal";
import "gaia-portal/style.css";
import { MapPin, Map, Cpu } from "lucide-vue-next";

const navItems = [
  {
    id: "gtm2",
    label: "GTM2.0",
    icon: MapPin,
    color: "#a855f7",
  },
  {
    id: "gtm3",
    label: "GTM3.0",
    icon: Map,
    color: "#60a5fa",
  },
];

const handleButtonClick = () => {
  console.log("按钮被点击");
};

const handleItemClick = (item) => {
  console.log("导航项被点击:", item);
};
</script>

Props

| 属性名 | 类型 | 默认值 | 说明 | | ---------- | ------ | ---------------------- | -------------- | | title | String | "AGENT K" | 主标题 | | subtitle | String | "下一代 AI 智能体入口" | 副标题 | | buttonText | String | "立即进入" | 按钮文本 | | navItems | Array | 默认导航项 | 导航项配置数组 |

Events

| 事件名 | 参数 | 说明 | | ------------ | ---- | ------------------ | | button-click | - | 按钮被点击时触发 | | item-click | item | 导航项被点击时触发 |

样式说明

✅ 样式已内置：组件已包含所有必要的样式，无需安装或配置 Tailwind CSS。

组件会自动导入样式，开箱即用。如果你需要自定义样式，可以通过 CSS 变量进行覆盖。详细说明请参考 USAGE.md。

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建库
npm run build:lib

项目结构

.
├── src/
│   ├── components/          # 子组件
│   │   ├── Background.vue   # 背景组件
│   │   ├── MainHub.vue      # 主中心组件
│   │   └── FooterNav.vue    # 底部导航组件
│   ├── constants.js         # 常量配置
│   ├── GaiaAgentKPortal.vue # 主组件
│   └── index.js             # 入口文件
├── example/                 # 使用示例
└── USAGE.md                 # 详细使用文档

许可证

MIT

更多信息

详细的使用文档和示例请查看 USAGE.md。