TRAE AI 智能体构建 Vue 3 + Node.js + MySQL 全栈应用实战

② @Builder 智能体：你的'原型加速器'

典型场景：

• 项目冷启动： '创建一个 React + TypeScript + Ant Design 的管理后台。'
• 功能模块生成： '在我的 Vue 项目中，为一个电商产品生成完整的商品详情页。'
• 从设计到代码： （上传一张 Figma 设计稿） '请参考这个设计稿，搭建出对应的 Vue 页面组件。'

③ @Builder with MCP：你的'全栈交付引擎'

典型场景：

• 全栈应用开发： '构建一个任务管理系统，前端用 Vue，后端用 Node.js(Express)，数据库用 MySQL。'
• 数据库设计与集成： '为我的博客系统设计数据库 Schema，创建表，并建立关联，然后提供相应的 RESTful API。'
• 外部服务集成： '在我的项目中集成 GitHub API，实现一个可以显示我的仓库列表和最新提交的功能。'

（3）实战场景流程示例：构建一个'用户管理中心'

协同使用三大智能体：

1. 阶段一：项目初始化 (使用 @Builder with MCP)：构建用户管理中心，前端 Vue 3 + Element Plus，后端 Express，MySQL 数据库。实现用户的增删改查 (CRUD) 和分页查询 API。
2. 阶段二：功能增强 (使用 @Chat 智能体)：为这个用户表格添加一个'导出为 CSV'的功能按钮；在后端的用户创建 API 里，添加对邮箱格式的验证逻辑。
3. 阶段三：新增模块 (使用 @Builder 智能体)：增加一个'操作日志'模块，记录用户的关键操作。请先在前端创建一个日志查看页面，用表格展示，数据暂时用 Mock。
4. 阶段四：数据持久化 (使用 @Builder with MCP)：将'操作日志'模块落地。在数据库中创建 logs 表，创建对应的后端 API，并将前端页面连接到真实 API。

二、@Builder with MCP 智能体（全栈应用）

@Builder with MCP 智能体核心价值：让 @Builder 能够连接和操作外部工具与数据源，如数据库、API、GitHub 等。将我们的"企业任务管理系统"升级为连接真实 MySQL 数据库的全栈应用。

（1）核心能力

@Builder with MCP 的核心能力可以概括为：通过标准化协议，将 AI 的规划与构建能力，与真实世界的数据、工具和服务相连接，实现从'虚拟代码生成'到'物理系统构建'的跨越。

① 外部系统连接与操作

• 数据库操作：直接连接并操作 MySQL、PostgreSQL、MongoDB 等数据库。它能执行 DDL 语句设计 Schema，DML 语句管理数据，执行复杂查询和事务。
• API 集成：调用外部 RESTful API、GraphQL 端点。例如，集成 GitHub API 获取仓库信息，调用云服务商的 API。
• 服务器管理：通过 SSH 连接服务器，执行命令、部署应用、查看日志。
• 版本控制：与 Git 交互，完成提交代码、创建分支、解决冲突等操作。

② 全栈应用架构设计

• 前后端分离架构：自动规划并生成前端（Vue/React）和后端（Node.js/Express，Python/FastAPI）项目结构。
• 数据流设计：设计从数据库 -> 后端 API -> 前端状态管理（Pinia/Redux）-> 视图组件的完整数据流。
• API 设计与实现：自动创建符合 REST 规范的 API 端点，并生成对应的 Swagger/OpenAPI 文档。
• 环境配置：区分开发、测试、生产环境，配置数据库连接、环境变量等。

③ 真实数据生命周期管理

• 数据库迁移：生成并执行数据库迁移脚本，优雅地管理 Schema 变更。
• 种子数据：创建初始数据和测试数据，确保应用启动时即有可用数据。
• 数据关联与查询：处理复杂的多表关联查询，优化 N+1 查询问题。

④ 生产就绪配置与部署

• 容器化：生成 Dockerfile 和 docker-compose.yml 文件，实现应用容器化。
• CI/CD 流水线：创建 GitHub Actions、GitLab CI 等配置文件，实现自动化测试和部署。
• 监控与日志：集成应用性能监控和结构化日志记录。

（2）高效使用 @Builder with MCP 的黄金法则

要驾驭这个强大的工具，必须遵循以下法则，其核心思维是从'程序员'转变为'系统架构师与产品经理'。

① 法则一：始于终——蓝图描绘法则

在发出第一条指令前，必须清晰地构想出最终系统的完整蓝图。 黄金指令： '构建一个全栈任务管理系统：前端 Vue 3 + Composition API + Element Plus，后端 Node.js + Express，数据库 MySQL，需要 users、tasks、teams 表，并描述清楚字段和关联关系。核心功能：用户认证、任务 CRUD、任务分配、状态流转。部署：提供 Docker 化配置。'

② 法则二：契约先行——接口驱动法则

在开发具体功能前，先定义好前后端、内外系统之间的'契约'。 黄金指令： '在开始编码前，请先：设计数据库 Schema，给出完整的建表 SQL。基于 Schema，定义出所有后端 API 端点的路径、方法、请求体和响应体格式。根据 API 定义，创建前端的 API Service 层接口文件。'

③ 法则三：分层构建——垂直切片法则

不要水平地一次做完所有功能。而应按功能模块垂直拆分，逐个完成。 黄金指令： '我们分阶段构建：阶段一：用户系统（后端创建 users 表，实现注册、登录 API；前端创建用户登录页面）。阶段二：任务核心（后端创建 tasks 表，实现任务的 CRUD API；前端创建任务列表页面）。'

④ 法则四：环境隔离——配置分离法则

从一开始就严格区分不同环境的配置。 黄金指令： '请为项目配置多环境：development 使用本地 MySQL，日志级别为 debug。production 使用环境变量读取数据库连接字符串，日志级别为 warn。创建 .env.example 文件，并确保敏感信息不被提交到代码库。'

⑤ 法则五：善用其'手'——MCP 工具调用法则

明确指示 @Builder with MCP 去调用具体的 MCP 工具来完成特定任务。 黄金指令： '请使用 MCP 服务器管理工具，通过 SSH 登录到服务器 192.168.1.100，部署刚才构建的后端应用。'

（3）添加 MCP Servers

（4）实战使用流程（以 Vue 项目为例）

① 第一阶段：项目架构升级 - 从前端到全栈

目标： 将纯前端的 Vue 应用升级为包含 Node.js 后端和 MySQL 数据库的全栈应用。

指令（启动 @Builder with MCP 智能体）： "请使用 MCP 能力，为现有的'企业任务管理系统' Vue 项目创建完整的后端架构：后端要求：使用 Node.js + Express 框架连接 MySQL 数据库，创建以下表：users (id, name, email, position, avatar), tasks (id, title, description, status, priority, assignee_id, due_date, created_at), task_status (id, name, color)。提供完整的 RESTful API。数据库配置：数据库名 task_management，使用 Sequelize ORM，包含数据迁移和种子数据。请同时更新前端 Vue 项目，将所有 Pinia store 改为调用真实 API。"

@Builder with MCP 的行动：

• 通过 MCP 连接 MySQL：创建数据库连接配置，执行 SQL 脚本创建数据库和表结构。
• 生成数据库模型：

// backend/models/Task.js
module.exports = (sequelize, DataTypes) => {
  const Task = sequelize.define('Task', {
    id: { type: DataTypes.INTEGER, autoIncrement: true, primaryKey: true },
    title: { type: DataTypes.STRING, allowNull: false },
    description: { type: DataTypes.TEXT, allowNull: true },
    status: { type: DataTypes.INTEGER, allowNull: false, defaultValue: 1 },
    priority: { type: DataTypes.ENUM('low', 'medium', 'high', 'urgent'), allowNull: false, defaultValue: 'medium' },
    assignee_id: { type: DataTypes.INTEGER, allowNull: true },
    due_date: { type: DataTypes.DATE, allowNull: true },
    created_at: { type: DataTypes.DATE, allowNull: false, defaultValue: DataTypes.NOW }
  }, { tableName: 'tasks', timestamps: false });
  return Task;
};

• 生成后端项目结构：

② 第二阶段：API 集成与前端改造

目标： 将前端的数据源从模拟数据切换到真实 API。

指令（启动 @Builder with MCP 智能体）： "现在请更新前端 Vue 项目：创建 src/services/api.js 封装所有 API 调用，改造 taskStore 和 teamStore，移除模拟数据，改为调用后端 API，添加加载状态和错误处理，在 main.js 中配置 axios 基础 URL"

@Builder with MCP 的行动：

• 改造 Pinia Store：

// src/stores/taskStore.js
import { defineStore } from 'pinia'
import { taskApi } from '@/services/api'

export const useTaskStore = defineStore('task', {
  state: () => ({
    tasks: [],
    loading: false,
    error: null,
    filter: { status: '', priority: '', assignee: '' },
    pagination: { currentPage: 1, pageSize: 10, total: 0 }
  }),
  getters: {
    filteredTasks: (state) => {
      return state.tasks.filter(task => {
        let match = true
        if (state.filter.status && task.status !== state.filter.status) match = false
        if (state.filter.priority && task.priority !== state.filter.priority) match = false
        if (state.filter.assignee && (!task.assignee || task.assignee.id !== parseInt(state.filter.assignee))) match = false
        return match
      })
    },
    taskStats: (state) => {
      const statusMap = { 1: 'pending', 2: 'in_progress', 3: 'completed' }
      const stats = { pending: 0, inProgress: 0, completed: 0, total: state.tasks.length }
      state.tasks.forEach(task => {
        const frontEndStatus = statusMap[task.status] || 'pending'
        if (frontEndStatus === 'pending') stats.pending++
        else if (frontEndStatus === 'in_progress') stats.inProgress++
        else if (frontEndStatus === 'completed') stats.completed++
      })
      return stats
    }
  },
  actions: {
    setFilter(filter) {
      this.filter = { ...this.filter, ...filter }
      this.fetchTasks()
    },
    async fetchTasks() {
      this.loading = true
      this.error = null
      try {
        const params = { ...this.filter, page: this.pagination.currentPage, pageSize: this.pagination.pageSize }
        const response = await taskApi.getTasks(params)
        this.tasks = response.tasks || response
        this.pagination.total = response.total || this.tasks.length
      } catch (error) {
        this.error = error.message
        console.error('获取任务列表失败:', error)
      } finally {
        this.loading = false
      }
    },
    async addTask(taskData) {
      this.loading = true
      this.error = null
      try {
        const newTask = await taskApi.createTask(taskData)
        this.tasks.unshift(newTask)
        this.pagination.total++
        return newTask
      } catch (error) {
        this.error = error.message
        throw error
      } finally {
        this.loading = false
      }
    },
    async updateTask(id, updates) {
      this.loading = true
      this.error = null
      try {
        const updatedTask = await taskApi.updateTask(id, updates)
        const index = this.tasks.findIndex(task => task.id === id)
        if (index !== -1) this.tasks[index] = { ...this.tasks[index], ...updatedTask }
        return updatedTask
      } catch (error) {
        this.error = error.message
        throw error
      } finally {
        this.loading = false
      }
    },
    async deleteTask(id) {
      this.loading = true
      this.error = null
      try {
        await taskApi.deleteTask(id)
        const index = this.tasks.findIndex(task => task.id === id)
        if (index !== -1) {
          this.tasks.splice(index, 1)
          this.pagination.total--
        }
        return true
      } catch (error) {
        this.error = error.message
        throw error
      } finally {
        this.loading = false
      }
    }
  }
})

• 创建 API 服务层：

// src/services/api.js
import axios from 'axios';

const api = axios.create({ timeout: 10000, headers: { 'Content-Type': 'application/json' } });

api.interceptors.request.use(config => config, error => Promise.reject(error));
api.interceptors.response.use(response => response.data, error => {
  console.error('API Error:', error);
  let errorMessage = '请求失败';
  if (error.response) {
    switch (error.response.status) {
      case 401: errorMessage = '未授权，请重新登录'; break;
      case 403: errorMessage = '拒绝访问'; break;
      case 404: errorMessage = '请求的资源不存在'; break;
      case 500: errorMessage = '服务器错误'; break;
      default: errorMessage = error.response.data?.message || '请求失败';
    }
  } else if (error.request) {
    errorMessage = '网络错误，请检查您的网络连接';
  }
  return Promise.reject(new Error(errorMessage));
});

export const taskApi = {
  getTasks: (params = {}) => api.get('/api/tasks', { params }),
  getTaskById: (id) => api.get(`/api/tasks/${id}`),
  createTask: (taskData) => api.post('/api/tasks', taskData),
  updateTask: (id, taskData) => api.put(`/api/tasks/${id}`, taskData),
  deleteTask: (id) => api.delete(`/api/tasks/${id}`),
  getTaskStats: () => api.get('/api/tasks/stats')
};

export const userApi = {
  getUsers: () => api.get('/api/users'),
  getUserById: (id) => api.get(`/api/users/${id}`)
};

export default api;

③ 第三阶段：高级数据库功能实现

目标： 实现复杂的数据库查询和业务逻辑。

指令（启动 @Builder with MCP 智能体）： "请为任务系统添加以下高级功能：任务统计 API (GET /api/dashboard/stats)，任务评论功能 (创建 comments 表)，文件附件 (创建 attachments 表)，数据库事务。"

@Builder with MCP 的行动：

④ 第四阶段：数据库优化与监控

目标： 优化数据库性能和添加监控功能。

指令（启动 @Builder with MCP 智能体）： "请为系统添加数据库优化措施：为常用查询字段添加数据库索引，实现数据库查询性能监控，添加数据备份机制，实现数据库连接池配置。"

@Builder with MCP 的行动：

• 配置数据库连接池：

// backend/config/config.js
{
  "development": {
    "username": "root",
    "password": "password",
    "database": "task_management",
    "host": "127.0.0.1",
    "dialect": "mysql",
    "pool": { "max": 10, "min": 0, "acquire": 30000, "idle": 10000 },
    "logging": true
  },
  "test": {
    "username": "root",
    "password": "password",
    "database": "task_management_test",
    "host": "127.0.0.1",
    "dialect": "mysql",
    "pool": { "max": 10, "min": 0, "acquire": 30000, "idle": 10000 },
    "logging": false
  },
  "production": {
    "username": "root",
    "password": "password",
    "database": "task_management",
    "host": "127.0.0.1",
    "dialect": "mysql",
    "pool": { "max": 20, "min": 2, "acquire": 60000, "idle": 20000 },
    "logging": false
  }
}

• 通过 MCP 执行索引优化：

-- backend\migrations\20230101000005-add-indexes.js
-- 为表的常用查询字段添加索引
module.exports = {
  up: async (queryInterface, Sequelize) => {
    await queryInterface.addIndex('tasks', ['status'], { name: 'idx_tasks_status' });
    await queryInterface.addIndex('tasks', ['priority'], { name: 'idx_tasks_priority' });
    await queryInterface.addIndex('tasks', ['assignee_id'], { name: 'idx_tasks_assignee_id' });
    await queryInterface.addIndex('tasks', ['due_date'], { name: 'idx_tasks_due_date' });
    await queryInterface.addIndex('tasks', ['created_at'], { name: 'idx_tasks_created_at' });
    await queryInterface.addIndex('comments', ['task_id'], { name: 'idx_comments_task_id' });
    await queryInterface.addIndex('comments', ['user_id'], { name: 'idx_comments_user_id' });
    await queryInterface.addIndex('comments', ['created_at'], { name: 'idx_comments_created_at' });
    await queryInterface.addIndex('attachments', ['task_id'], { name: 'idx_attachments_task_id' });
    await queryInterface.addIndex('attachments', ['user_id'], { name: 'idx_attachments_user_id' });
    await queryInterface.addIndex('users', ['email'], { name: 'idx_users_email', unique: true });
    await queryInterface.addIndex('users', ['name'], { name: 'idx_users_name' });
  },
  down: async (queryInterface) => {
    await queryInterface.removeIndex('tasks', 'idx_tasks_status');
    await queryInterface.removeIndex('tasks', 'idx_tasks_priority');
    await queryInterface.removeIndex('tasks', 'idx_tasks_assignee_id');
    await queryInterface.removeIndex('tasks', 'idx_tasks_due_date');
    await queryInterface.removeIndex('tasks', 'idx_tasks_created_at');
    await queryInterface.removeIndex('comments', 'idx_comments_task_id');
    await queryInterface.removeIndex('comments', 'idx_comments_user_id');
    await queryInterface.removeIndex('comments', 'idx_comments_created_at');
    await queryInterface.removeIndex('attachments', 'idx_attachments_task_id');
    await queryInterface.removeIndex('attachments', 'idx_attachments_user_id');
    await queryInterface.removeIndex('users', 'idx_users_email');
    await queryInterface.removeIndex('users', 'idx_users_name');
  }
};

⑤ 第五阶段：数据迁移与生产部署

目标： 准备生产环境的数据和部署配置。

指令（启动 @Builder with MCP 智能体）： "请准备生产环境部署：创建数据库迁移脚本，生成生产环境的数据种子，创建 Docker 配置文件，设置环境变量配置。"

@Builder with MCP 的行动：

• 创建 Docker 配置：

# backend/Dockerfile
FROM node:16-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN mkdir -p logs backups
ENV NODE_ENV=production
ENV PORT=3000
EXPOSE 3000
CMD ["npm", "start"]

• 创建数据库迁移：

// backend\migrations\20230101000006-production-migration.js
module.exports = {
  up: async (queryInterface, Sequelize) => {
    const transaction = await queryInterface.sequelize.transaction();
    try {
      await queryInterface.createTable('task_statuses', {
        id: { allowNull: false, autoIncrement: true, primaryKey: true, type: Sequelize.INTEGER },
        name: { type: Sequelize.STRING, allowNull: false, unique: true },
        created_at: { allowNull: false, type: Sequelize.DATE },
        updated_at: { allowNull: false, type: Sequelize.DATE }
      }, { transaction });
      await queryInterface.createTable('users', {
        id: { allowNull: false, autoIncrement: true, primaryKey: true, type: Sequelize.INTEGER },
        name: { type: Sequelize.STRING, allowNull: false },
        email: { type: Sequelize.STRING, allowNull: false, unique: true },
        role: { type: Sequelize.STRING, allowNull: false, defaultValue: 'user' },
        created_at: { allowNull: false, type: Sequelize.DATE },
        updated_at: { allowNull: false, type: Sequelize.DATE }
      }, { transaction });
      await queryInterface.createTable('tasks', {
        id: { allowNull: false, autoIncrement: true, primaryKey: true, type: Sequelize.INTEGER },
        title: { type: Sequelize.STRING, allowNull: false },
        description: { type: Sequelize.TEXT },
        status: { type: Sequelize.INTEGER, allowNull: false, references: { model: 'task_statuses', key: 'id' } },
        priority: { type: Sequelize.ENUM('low', 'medium', 'high', 'urgent'), allowNull: false, defaultValue: 'medium' },
        assignee_id: { type: Sequelize.INTEGER, references: { model: 'users', key: 'id' } },
        due_date: { type: Sequelize.DATE },
        created_at: { allowNull: false, type: Sequelize.DATE },
        updated_at: { allowNull: false, type: Sequelize.DATE }
      }, { transaction });
      await queryInterface.createTable('comments', {
        id: { allowNull: false, autoIncrement: true, primaryKey: true, type: Sequelize.INTEGER },
        content: { type: Sequelize.TEXT, allowNull: false },
        task_id: { type: Sequelize.INTEGER, allowNull: false, references: { model: 'tasks', key: 'id', onDelete: 'CASCADE' } },
        user_id: { type: Sequelize.INTEGER, allowNull: false, references: { model: 'users', key: 'id' } },
        created_at: { allowNull: false, type: Sequelize.DATE }
      }, { transaction });
      await queryInterface.createTable('attachments', {
        id: { allowNull: false, autoIncrement: true, primaryKey: true, type: Sequelize.INTEGER },
        filename: { type: Sequelize.STRING, allowNull: false },
        filepath: { type: Sequelize.STRING, allowNull: false },
        filesize: { type: Sequelize.INTEGER, allowNull: false },
        filetype: { type: Sequelize.STRING, allowNull: false },
        task_id: { type: Sequelize.INTEGER, allowNull: false, references: { model: 'tasks', key: 'id', onDelete: 'CASCADE' } },
        user_id: { type: Sequelize.INTEGER, allowNull: false, references: { model: 'users', key: 'id' } },
        created_at: { allowNull: false, type: Sequelize.DATE }
      }, { transaction });
      await queryInterface.addIndex('tasks', ['status'], { name: 'idx_tasks_status', transaction });
      await queryInterface.addIndex('tasks', ['priority'], { name: 'idx_tasks_priority', transaction });
      await queryInterface.addIndex('tasks', ['assignee_id'], { name: 'idx_tasks_assignee_id', transaction });
      await queryInterface.addIndex('tasks', ['due_date'], { name: 'idx_tasks_due_date', transaction });
      await queryInterface.addIndex('tasks', ['created_at'], { name: 'idx_tasks_created_at', transaction });
      await queryInterface.addIndex('comments', ['task_id'], { name: 'idx_comments_task_id', transaction });
      await queryInterface.addIndex('comments', ['user_id'], { name: 'idx_comments_user_id', transaction });
      await queryInterface.addIndex('comments', ['created_at'], { name: 'idx_comments_created_at', transaction });
      await queryInterface.addIndex('attachments', ['task_id'], { name: 'idx_attachments_task_id', transaction });
      await queryInterface.addIndex('attachments', ['user_id'], { name: 'idx_attachments_user_id', transaction });
      await queryInterface.addIndex('users', ['email'], { name: 'idx_users_email', unique: true, transaction });
      await queryInterface.addIndex('users', ['name'], { name: 'idx_users_name', transaction });
      await transaction.commit();
    } catch (error) {
      await transaction.rollback();
      throw error;
    }
  },
  down: async (queryInterface) => {
    await queryInterface.dropTable('attachments');
    await queryInterface.dropTable('comments');
    await queryInterface.dropTable('tasks');
    await queryInterface.dropTable('users');
    await queryInterface.dropTable('task_statuses');
  }
};

整个前后端分离环境架构已部署好，后面就是优化细节了！

三、@Builder 智能体（'从 0 到 1'的创造）

TRAE @Builder 智能体：从想法到成品的项目构建引擎 @Builder 智能体，特别是其 SOLO 模式，核心价值在于处理更宏观、更复杂的项目初始化与构建任务。它能将你的自然语言描述或一张设计图，直接转化成一个可运行的项目骨架。

（1）核心能力：@Builder 与 @Chat 的本质区别

简单比喻：我想盖房子。找 @Builder：我给它一张房屋设计图，它直接给我打好地基、搭好框架、建好毛坯房。找 @Chat：我告诉它'这里砌一堵墙'、'那里装一扇窗'，它给我砖头和窗户，我来砌。

（2）高效使用 @Builder 智能体的黄金法则

@Builder 智能体彻底改变了项目启动的方式。我们的核心技能不再是编写每一行代码，而是精准地定义问题、描述需求和验收成果。

• 目标清晰，描述具体：不佳：'做个好看的网站。'优秀：'创建一个单页作品集，包含关于我、项目展示（网格布局）、博客文章列表（时间线布局）和联系方式，使用 Tailwind CSS 框架。'
• 分步构建，由粗到精：对于极其复杂的项目，不要试图一蹴而就。先用 @Builder 搭建'毛坯房'（项目骨架和基础功能），再用 @Chat 进行'精装修'（样式优化、复杂逻辑）。
• 善用视觉输入：一张设计图抵得上千言万语。@Builder 的多模态能力能极大提升还原度。
• 理解其局限性：@Builder 生成的通常是'毛坯房'（高质量的原型），复杂的业务逻辑、API 对接和极致的性能优化，仍需我们借助 @Chat 智能体或手动编码来完成。
• 技术栈声明前置：在给 @Builder 的初始指令中，必须明确 Vue 3, Composition API, <script setup>，状态管理库和 UI 组件库，这是生成高质量、符合你习惯代码的关键。
• 数据管理要明确：明确要求 @Builder 使用 Pinia 来管理模拟数据，这能保证项目结构清晰，数据流可控。
• 善用'组合智能体'工作流：这是最高效的工作流。@Builder 负责'从 0 到 1'的创造，@Chat 负责'从 1 到 N'的优化。

（3）实战使用流程（以 Vue 项目为例）

① 第一阶段：项目初始化与骨架搭建

指令（启动 @Builder 智能体）： '请使用 SOLO 模式，为我创建一个 Vue 3 企业任务管理系统的前端项目。核心要求：技术栈：Vue 3 + <script setup> + Vite + Vue Router + Pinia + Element Plus。页面结构：仪表盘 (/dashboard)、任务列表 (/tasks)、团队 (/team)。布局：使用经典的左侧导航栏 + 右侧主内容区的布局。数据：使用 Pinia 管理应用状态，并为每个页面生成模拟数据。样式：整体风格要求专业、简洁，符合企业管理系统的气质。'

@Builder 智能体的行动与输出：

• 项目规划：分析需求，生成一个详细的项目结构图。
• 初始化项目：创建 package.json，并安装指定的所有依赖。
• 生成核心文件：src/main.js, src/App.vue, src/layouts/DefaultLayout.vue, src/router/index.js, src/stores/app.js。 此时，@Builder 已经交付了一个可运行的项目骨架。

打开系统网址：http://127.0.0.1:5173/

② 第二阶段：页面内容生成与数据模拟

指令（启动 @Builder 智能体）： '很好，基础骨架已经完成。现在请为三个主要页面生成具体的 UI 内容和模拟数据：仪表盘页面 (/dashboard)：顶部放置三个统计卡片。下方展示一个'近期任务'列表。任务列表页面 (/tasks)：使用 ElTable 展示任务，列包括 ID、任务名称、状态、优先级、负责人、截止日期。顶部提供筛选栏。团队页面 (/team)：使用卡片网格展示团队成员。数据层：请在 Pinia 中创建一个 taskStore 和一个 teamStore 来集中管理这些模拟数据。'

@Builder 智能体的行动与输出：

• 创建 Store：src/stores/taskStore.js, src/stores/teamStore.js。
• 生成页面组件：src/views/DashboardView.vue, src/views/TasksView.vue, src/views/TeamView.vue。 此时，再次预览应用，会发现它已经是一个功能完整、数据充盈的原型了。

③ 第三阶段：预览、微调与组合使用智能体

**1. 预览与发现问题：**发现'仪表盘'的统计卡片样式比较普通，希望更突出。 2. 切换至 @Chat 智能体进行精细调整： 指令（启动 @Chat 智能体）：'请优化这个仪表盘页面中三个统计卡片的样式。让它们背景色采用渐变色，数字字体更大更粗，并添加一个对应的图标。' @Chat 智能体会直接修改该文件中的模板和样式代码。

**3. 使用 @Builder 添加新功能：**现在，需要一个'任务详情'页面。 指令（启动 @Builder 智能体）：'请在现有项目中增加一个'任务详情'页面。路由为 /task/:id。当在任务列表点击某个任务名时，应能跳转到该详情页。详情页需要展示该任务的所有信息，并提供一个'编辑'按钮（功能待实现）。请同时更新路由和任务列表的链接。' **@Builder 智能体的行动与输出：**创建 src/views/TaskDetailView.vue 组件，更新 src/router/index.js，修改 TasksView.vue。

四、@Chat 智能体（'从 1 到 N'的优化）

TRAE 中的 Chat 智能体是整个 IDE 的智能中枢，它超越了简单的聊天机器人，是一个能理解整个项目上下文、并执行具体操作的编程伙伴。

（1）核心能力

• 自然语言编程：用日常语言描述项目代码设计的需求，智能体会生成相应的代码。
• 代码解释与调试：选中不理解的代码或报错，让它解释或提供修复方案。
• 项目上下文感知：它能基于整个项目的代码库进行回答和操作，理解项目架构和风格。
• 自动化重构：提出代码优化建议，并直接帮忙完成重构。
• 文件与资源操作：根据问题指令创建新文件、安装依赖、甚至启动开发服务器。

（2）高效使用 @Chat 智能体的黄金法则

将 TRAE 的 Chat 智能体当作一个能力超群、不知疲倦的编程伙伴。核心任务是从'写代码'转变为'提需求、做审查和定方向'。

• 上下文是关键：提供充足背景。在提问前，确保智能体已经加载了指定项目。在复杂问题上，可以在问题中说'参考一下 utils/api.js 文件里的格式'。
• 精准描述：与其说'这里出错了'，不如说'这个函数在用户登录时抛出了类型错误，请看 LoginForm.js 第 25 行附近的 handleSubmit 函数'。
• 迭代式精炼：从静态数据到动态交互，从基础功能到高级功能，一步步地向智能体提出需求。不要试图在一个指令中完成所有事情。
• 善用指令与快捷方式：TRAE 通常支持一些快捷指令，如 /test（为这段代码生成测试）、/explain（详细解释）、/fix（尝试自动修复）。
• 明确技术栈：在指令中开头就声明'使用 Vue 3 + Composition API + <script setup>'，让智能体生成最符合个人习惯的代码。
• 善用组件库：直接要求智能体使用 Element Plus、Ant Design Vue 等知名组件库来重构 UI，能极大提升开发效率和界面美观度。
• 让智能体调试：遇到任何错误或警告，直接将错误信息复制给智能体，并说明上下文，它不仅能修复，还能解释报错原因。
• 结合 SOLO 模式进行飞跃：对于更宏大的任务，直接使用 SOLO 模式。可以上传一张设计图或提供一个产品链接，然后说'参考这张设计图，在我的项目中搭建一个类似的主页 UI。'

（3）实战使用流程（以 Vue 项目为例）

① 第一阶段：优化任务列表页 - 增强交互功能

目标： 为任务列表添加编辑、状态快速更改和高级筛选功能。

1. 实现行内编辑功能

指令（启动 @Chat 智能体）：'在 Tasks.vue 的任务表格中，我希望可以点击'任务名称'直接进行编辑。请实现：当点击任务名称时，变为输入框，编辑完成后按回车或失去焦点保存到 store。' @Chat 智能体的行动：在 taskStore 中添加 updateTask action，修改表格列，为任务名称添加 el-input 和编辑状态控制，实现编辑逻辑和保存功能。

2. 添加快速状态更改按钮

指令（启动 @Chat 智能体）：'在任务表格的操作列中，添加'开始'、'完成'、'重新打开'的快速操作按钮。根据任务状态显示不同的按钮，点击后直接更新任务状态。' @Chat 智能体的行动：在 taskStore 中添加 changeTaskStatus action，在操作列中添加条件渲染的按钮，实现状态转换逻辑。

② 第二阶段：增强仪表盘 - 添加数据可视化

目标： 在仪表盘添加图表，直观展示任务数据。

添加任务状态分布饼图

指令（启动 @Chat 智能体）：'在仪表盘页面的统计卡片下方，添加一个 ECharts 饼图，展示任务状态分布（待处理、进行中、已完成）。请安装 ECharts 依赖并集成到 Vue 中。' @Chat 智能体的行动：安装 echarts 和 vue-echarts 依赖，在 DashboardView.vue 中集成饼图组件，从 store 中计算状态分布数据。

③ 第三阶段：优化用户体验 - 添加高级功能

1. 实现任务拖拽排序

指令（启动 @Chat 智能体）：'在任务列表页面，我希望可以通过拖拽来调整任务的显示顺序。请使用 Sortable.js 实现表格行的拖拽排序功能。' @Chat 智能体的行动：安装 sortablejs 依赖，在表格挂载后初始化 Sortable.js，实现拖拽结束后的数据更新逻辑。

2. 添加数据导出功能

指令（启动 @Chat 智能体）：'在任务列表页面顶部添加一个'导出 Excel'按钮，点击后可以将当前筛选的任务数据导出为 CSV 格式文件。' @Chat 智能体的行动：实现 CSV 格式转换函数，创建 Blob 对象并触发下载，添加导出按钮和点击事件。