mta-mcp 2.14.0 → 2.16.0

package/agents/vue3.agent.md

@@ -1,303 +1,139 @@
-# Vue 3 + TypeScript 通用代理
+# Vue 3 + TypeScript 开发代理
 
-> Vue 3 + TypeScript + Element Plus 开发专家配置
-
-## 🔴 问题诊断优先（最高优先级）
-
-**遇到任何问题时，必须首先调用 `troubleshoot` 工具！**
-
-```
-⚠️ AI 请注意：当用户描述了问题（错误、样式不对、效果不符预期等），
-在尝试任何解决方案前，必须先调用：
-
-mcp_mta_troubleshoot({ problem: "用户描述的问题" })
-
-案例库包含经过验证的解决方案，可避免 6-10 轮无效尝试。
-```
-
-### 已收录的问题类型
-
-| 问题类型 | 案例ID | 关键词 |
-|----------|--------|--------|
-| 表格边框异常 | table-边框问题 | table, border, 边框 |
-| 表单验证不生效 | form-验证问题 | form, validate, rules |
-| 样式不生效 | style-优先级问题 | style, scoped, deep |
-| Pinia 状态丢失 | pinia-状态丢失 | pinia, persist, state |
+> 此 Agent 引导 AI 通过 MCP 工具获取 npm 包中的详细规范
+> 版本: v3.0.0 | 最后更新: 2026-01-16
 
 ---
 
-## 🚨 零容忍规则（最高优先级）
-
-**这些规则在任何情况下都不能违反：**
-
-### 1. Element Plus 组件单行书写
-
-**检测到项目使用紧凑风格时（如 `.github/copilot-instructions.md` 要求），强制执行：**
+## 🔴 问题诊断优先（最高优先级）
 
-```vue
-<!-- ✅ 正确：开始标签和所有属性必须在一行 -->
-<el-table v-loading="loading" :data="list" border highlight-current-row>
-<el-button type="primary" :loading="btnLoading" @click="submit">{{ $t('提交') }}</el-button>
+**当用户描述任何问题时，必须首先调用：**
 
-<!-- ❌ 严重错误：属性换行 -->
-<el-table 
-  v-loading="loading" 
-  :data="list">
 ```
-
-### 2. 完整的 HTML 标签配对
-
-```vue
-✅ <div>...</div>
-✅ <el-table>...</el-table>
-❌ <div>...<div>  <!-- 缺少结束标签 -->
+troubleshoot({ problem: "用户描述的问题" })
 ```
 
-### 3. 国际化强制使用
-
-```vue
-✅ <el-button>{{ $t('提交') }}</el-button>
-✅ :label="$t('名称')"
-❌ <el-button>提交</el-button>  <!-- 硬编码 -->
-```
+案例库包含经过验证的解决方案，可避免无效尝试。
 
 ---
 
-## ⚠️ 强制工作流
+## 📚 规范获取指引
 
-### Step 0: 问题诊断（遇到问题时）
+**⚠️ 核心原则：写代码前，必须先通过 MCP 工具获取规范！**
 
-```
-# 用户描述了问题？立即调用：
-troubleshoot({ problem: "表格边框显示异常，左边粗右边细" })
+### 按文件类型获取
 
-# 返回匹配的案例后，获取完整方案：
-get_troubleshooting_case({ framework: "vue3", caseId: "table-边框问题" })
-```
-
-### Step 1: 加载规范（编写代码时）
+| 场景 | MCP 调用 |
+|------|----------|
+| Vue 组件 | `get_standard_by_id({ id: 'vue3-composition' })` |
+| TypeScript | `get_standard_by_id({ id: 'typescript-base' })` |
+| Dart/Flutter | `get_standard_by_id({ id: 'flutter' })` |
 
-**按文件类型加载**：
-```
-# Vue 文件
-get_relevant_standards({ fileType: "vue" })
-→ 加载: standards/frameworks/vue3-composition.md
+### 按使用的库获取
 
-# TypeScript 文件
-get_relevant_standards({ fileType: "ts" })
-→ 加载: standards/core/typescript-base.md
-```
+| 库 | MCP 调用 |
+|----|----------|
+| Element Plus | `get_standard_by_id({ id: 'element-plus' })` |
+| Pinia | `get_standard_by_id({ id: 'pinia' })` |
+| Vue Router | `get_standard_by_id({ id: 'vue-router' })` |
+| vue-i18n | `get_standard_by_id({ id: 'i18n' })` |
+| LogicFlow | `get_standard_by_id({ id: 'logicflow' })` |
 
-**按库/框架加载**：
-```
-# Element Plus 组件
-get_relevant_standards({ imports: ["element-plus"] })
-→ 加载: standards/libraries/element-plus.md
+### 按场景获取
 
-# Pinia 状态管理
-get_relevant_standards({ imports: ["pinia"] })
-→ 加载: standards/frameworks/pinia.md
+| 场景 | MCP 调用 |
+|------|----------|
+| CSS 样式 | `get_standard_by_id({ id: 'vue-css-nesting' })` |
+| API 调用 | `get_standard_by_id({ id: 'api-layer' })` |
+| 代码风格 | `get_standard_by_id({ id: 'code-style' })` |
 
-# 国际化
-get_relevant_standards({ imports: ["vue-i18n"] })
-→ 加载: standards/libraries/i18n.md
-```
+### 智能获取（推荐）
 
-**按场景加载**：
 ```
-# API 调用
-get_relevant_standards({ scenario: "API 调用" })
-→ 加载: standards/patterns/api-layer.md
+// 根据当前文件自动匹配规范
+get_compact_standards({ currentFile: "当前文件路径" })
 
-# CSS 样式
-get_relevant_standards({ scenario: "CSS 样式" })
-→ 加载: standards/patterns/vue-css-nesting.md
+// 获取多个规范
+get_standard_by_id({ ids: ['vue3-composition', 'element-plus', 'i18n'] })
 ```
 
 ---
 
-## 🎯 核心原则
+## 🎯 Vue 3 快速提示
 
-### 1. Composition API 优先
+> 以下是简要提示，**详细规范请通过上述 MCP 工具获取**
 
-```vue
-<script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
-
-// Props 定义
-interface Props {
-  modelValue: string
-  disabled?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  disabled: false
-})
-
-// Emits 定义
-interface Emits {
-  (e: 'update:modelValue', value: string): void
-}
-
-const emit = defineEmits<Emits>()
-</script>
-```
+### 必须遵守
 
-### 2. 类型安全
+- ✅ 使用 Composition API (`<script setup lang="ts">`)
+- ✅ Props/Emits 必须定义 TypeScript 类型
+- ✅ 所有用户可见文本必须国际化 `$t('...')`
+- ✅ 单文件组件只能有一个 `<style>` 标签
 
-- ❌ 禁止 `any` 类型
-- ✅ 所有参数都有类型定义
-- ✅ 使用 interface 定义 Props/Emits
+### 禁止
 
-### 3. 最小改动原则
-
-| 判断项 | 是 | 否 |
-|--------|---|---|
-| 修改只影响当前文件？ | 继续修改 | **停止，重新评估** |
-| 存在类似模式？ | **复用现有模式** | 可新建 |
-| 需要改组件类型？ | **先确认用户意图** | 继续 |
-
----
+- ❌ 使用 `any` 类型
+- ❌ 使用 Options API
+- ❌ 硬编码文本（必须用 `$t()`）
+- ❌ 多个 `<style>` 标签
 
-## 📝 标准组件结构
+### Element Plus 单行书写（如项目要求）
 
 ```vue
-<script setup lang="ts">
-// 1. 导入
-import { ref, computed, onMounted } from 'vue'
-
-// 2. Props/Emits
-interface Props { ... }
-interface Emits { ... }
-const props = defineProps<Props>()
-const emit = defineEmits<Emits>()
-
-// 3. 状态
-const loading = ref(false)
-const data = ref<DataType[]>([])
-
-// 4. 计算属性
-const displayData = computed(() => ...)
-
-// 5. 方法
-const handleSubmit = async () => { ... }
-
-// 6. 生命周期
-onMounted(() => { ... })
-</script>
-
-<template>
-  <!-- 模板内容 -->
-</template>
+<!-- ✅ 正确 -->
+<el-table v-loading="loading" :data="list" border highlight-current-row>
 
-<style scoped lang="stylus">
-/* 样式 - 只能有一个 style 标签 */
-</style>
+<!-- ❌ 错误 -->
+<el-table 
+  v-loading="loading" 
+  :data="list">
 ```
 
 ---
 
-## 🚫 禁止模式
-
-- ❌ `any` 类型
-- ❌ Options API
-- ❌ 不定义 Props/Emits 类型
-- ❌ 直接修改 Props
-- ❌ `<script>` 中使用 `this`
-- ❌ 擅自更换组件类型（el-cascader → el-select）
-- ❌ 多个 `<style>` 标签
+## 🔧 标准工作流
 
----
-
-## 🔧 常用模式
-
-### 表单处理
-
-```typescript
-const form = reactive({
-  name: '',
-  email: ''
-})
-
-const rules = {
-  name: [{ required: true, message: $t('请输入名称') }]
-}
-```
-
-### 表格编辑取消
-
-```typescript
-// 备份数据用于取消恢复
-const list = ref<any[]>([])
-const subList = ref<any[]>([])  // 备份
-
-// 取消方法
-const cancelEdit = () => {
-  list.value = JSON.parse(JSON.stringify(subList.value))
-}
 ```
-
-### 异步数据加载
-
-```typescript
-const loading = ref(false)
-const data = ref<DataType[]>([])
-
-const fetchData = async () => {
-  try {
-    loading.value = true
-    const res = await api.getData()
-    data.value = res.data
-  } finally {
-    loading.value = false
-  }
-}
+1. 用户提出需求
+   ↓
+2. 检查是否是问题描述 → 是 → 调用 troubleshoot()
+   ↓ 否
+3. 识别需要的规范类型（Vue/Element Plus/Pinia 等）
+   ↓
+4. 调用对应的 get_standard_by_id() 获取详细规范
+   ↓
+5. 根据获取的规范编写代码
+   ↓
+6. 验证代码符合规范
 ```
 
 ---
 
-## 🔍 代码审查清单
-
-**每次编辑后必检：**
-
-- [ ] 所有 HTML 标签正确闭合
-- [ ] 只有一个 `<style>` 标签
-- [ ] 所有文本已国际化
-- [ ] 单行书写（如项目要求）
-- [ ] 无 `any` 类型
-- [ ] Props/Emits 有类型定义
-
----
+## 📋 可用规范列表
 
-## 📚 样式规范
+通过 `get_standard_by_id({ id: 'xxx' })` 获取：
 
-### 使用公共样式类
+**核心规范**
+- `mandatory-rules` - 底层必须规则（自动注入）
+- `code-style` - 代码风格规范
+- `typescript-base` - TypeScript 基础规范
+- `code-generation` - 代码生成规范
 
-```vue
-<!-- ✅ 正确：使用项目已有的布局类 -->
-<div class="vs-container">
-  <div class="vs-left">...</div>
-  <div class="vs-right">...</div>
-</div>
-
-<!-- ❌ 禁止：重复定义已存在的样式 -->
-<style>
-.split-container { display: flex; }  /* 已存在于公共样式 */
-</style>
-```
+**框架规范**
+- `vue3-composition` - Vue 3 Composition API
+- `pinia` - Pinia 状态管理
+- `flutter` - Flutter 开发规范
 
-### el-drawer 表格样式
+**库规范**
+- `element-plus` - Element Plus 组件库
+- `i18n` - 国际化规范
+- `logicflow` - LogicFlow 流程图
 
-```scss
-:deep(.el-drawer) {
-  .el-input:not(.is-disabled) .el-input__wrapper {
-    background-color: var(--el-fill-color-blank) !important;
-    box-shadow: 0 0 0 1px var(--el-border-color) inset !important;
-  }
-}
-```
+**模式规范**
+- `vue-css-nesting` - Vue CSS 嵌套写法
+- `api-layer` - API 层封装模式
 
 ---
 
 **维护团队**: MTA工作室  
-**版本**: v2.0.0（精简版，详细方案请查询 troubleshooting）
+**设计理念**: Agent 只提供获取指引，详细规范由 MCP 工具从 npm 包动态获取