mta-mcp 2.13.0 → 2.14.0

package/agents/vue3.agent.md

@@ -1,339 +1,128 @@
-````chatagent
----
-description: 'Vue 3 + TypeScript 通用开发代理'
-tags: ['vue', 'vue3', 'typescript', 'vite', 'element-plus', 'state-management', 'routing', 'i18n']
-tools: ['edit', 'runNotebooks', 'search', 'new', 'runCommands', 'runTasks', 'usages', 'vscodeAPI', 'problems', 'changes', 'testFailure', 'githubRepo', 'extensions', 'todos', 'runSubagent']
----
-
 # Vue 3 + TypeScript 通用代理
 
-**规范来源**: `prompts/vue/vue3-typescript.md`
+> Vue 3 + TypeScript + Element Plus 开发专家配置
+
+## 🔴 问题诊断优先（最高优先级）
+
+**遇到任何问题时，必须首先调用 `troubleshoot` 工具！**
 
-## 🔴 零容忍规则（最高优先级）
+```
+⚠️ AI 请注意：当用户描述了问题（错误、样式不对、效果不符预期等），
+在尝试任何解决方案前，必须先调用：
+
+mcp_mta_troubleshoot({ problem: "用户描述的问题" })
 
-**这些规则在任何情况下都不能违反，违反即为严重错误：**
+案例库包含经过验证的解决方案，可避免 6-10 轮无效尝试。
+```
 
-### 1. Element Plus 组件单行书写（紧凑风格）
+### 已收录的问题类型
 
-**检测方式**：
-- `.github/copilot-instructions.md` 明确要求使用单行书写风格
-- 或现有代码中 90% 以上组件使用单行书写
-- 或用户明确要求紧凑代码风格
+| 问题类型 | 案例ID | 关键词 |
+|----------|--------|--------|
+| 表格边框异常 | table-边框问题 | table, border, 边框 |
+| 表单验证不生效 | form-验证问题 | form, validate, rules |
+| 样式不生效 | style-优先级问题 | style, scoped, deep |
+| Pinia 状态丢失 | pinia-状态丢失 | pinia, persist, state |
+
+---
+
+## 🚨 零容忍规则（最高优先级）
+
+**这些规则在任何情况下都不能违反：**
+
+### 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>  <!-- 缺少结束标签 -->
-❌ </div>...</div>  <!-- 多余的结束标签 -->
 ```
 
-### 3. 国际化强制使用（严格规范）
+### 3. 国际化强制使用
 
-所有用户可见文本必须使用 `$t()`：
 ```vue
 ✅ <el-button>{{ $t('提交') }}</el-button>
 ✅ :label="$t('名称')"
-✅ :placeholder="$t('请输入')"
-❌ <el-button>提交</el-button>
-❌ label="名称"
+❌ <el-button>提交</el-button>  <!-- 硬编码 -->
 ```
 
-## ⚠️ 强制工作流
-
-**编写任何 Vue 3 代码前，必须按顺序执行以下步骤：**
-
-1. **加载规范** (强制) - 根据文件类型调用 MCP 工具：
-   - Vue 文件: `get_relevant_standards({ fileType: "vue" })`
-   - TypeScript 文件: `get_relevant_standards({ fileType: "ts" })`
-   - Element Plus: `get_relevant_standards({ imports: ["element-plus"] })`
-   - Pinia: `get_relevant_standards({ imports: ["pinia"] })`
-   - Vue Router: `get_relevant_standards({ imports: ["vue-router"] })`
-   - API 调用: `get_relevant_standards({ scenario: "API 调用" })`
-
-2. **检查项目规范** - 确认是否有项目特定规范（如单行书写、严格国际化）
-3. **理解需求** - 确认要实现的功能
-4. **编写代码** - 严格遵循加载的规范
-5. **验证代码** - 完成后必须检查语法完整性
-6. **最终确认** - 确保代码符合所有规范要求，特别是单行书写规则
-
-## 核心原则
-
-1. **Composition API 优先** - `<script setup lang="ts">`
-2. **类型安全** - 禁用 \`any\`，所有参数有类型
-3. **响应式最佳实践** - 合理使用 ref/reactive
-4. **组件解耦** - Props/Emits 类型明确
-5. **代码完整性** - 每次编辑后验证标签配对和语法正确性
-6. **最小改动** - 只修改必要代码，避免无关重构
-7. **注释简洁专业** - 只在必要时添加注释（复杂逻辑、业务规则），禁用表情符号
-
-## 🚨 代码编辑检查清单
-
-**在完成任何文件编辑后，必须执行以下检查：**
-
-### Vue 文件检查
-- [ ] \`<template>\` 标签完整配对
-- [ ] \`<script>\` 标签完整配对
-- [ ] \`<style>\` 标签完整配对（**只能有一个**）
-- [ ] 没有重复的标签定义
-- [ ] 所有 HTML 标签正确闭合（每个\`<div>\`都有对应\`</div>\`）
-- [ ] 没有遗留的旧代码片段
-
-### Element Plus 组件属性格式规范
-
-**🔴 绝对强制：检测到单行书写项目时，必须使用单行书写**
-
-**检测方法**：
-1. 项目存在 `.github/copilot-instructions.md` 且明确要求单行书写
-2. 当前代码库中 90% 以上的 Element Plus 组件使用单行书写
-3. 用户明确表示使用紧凑代码风格
-
-**🚨 强制执行规则：**
-
-**当检测到单行书写习惯时：**
-
-1. **所有 Element Plus 组件的开始标签和属性必须在一行**
-2. **绝对禁止属性换行** - 无论属性多少都不能换行
-3. **仅结构性标签（如 `<template #suffix>`）可以多行**
-
-**✅ 正确示例（强制）：**
-```vue
-<!-- 所有属性和开始标签在一行，无论多长 -->
-<el-table v-loading="listLoading" :data="list" border highlight-current-row @current-change="handleRowClick">
-
-<el-table-column prop="name" :label="$t('名称')" width="200" min-width="120" fixed="left" sortable>
+---
 
-<el-cascader v-if="scope.row.val_from === 4" v-model="scope.row.enumCascaderVal" :placeholder="$t('请选择枚举类型')" :disabled="editR" :props="enumCascaderProps" clearable @change="handleChange" />
+## ⚠️ 强制工作流
 
-<!-- 有插槽内容时：开始标签仍然单行 -->
-<el-input v-else-if="scope.row.val_from === 3" v-model="scope.row.val" :disabled="editR" :placeholder="$t('表达式')">
-  <template #suffix>
-    <el-icon :class="['icon', { 'disabled': editR }]" @click="openDialog">
-      <Edit />
-    </el-icon>
-  </template>
-</el-input>
+### Step 0: 问题诊断（遇到问题时）
 
-<el-button type="primary" size="small" :loading="btnLoading" :disabled="btnLoading" @click="handleSubmit">{{ $t('提交') }}</el-button>
 ```
+# 用户描述了问题？立即调用：
+troubleshoot({ problem: "表格边框显示异常，左边粗右边细" })
 
-**❌ 严重错误（绝对禁止）：**
-```vue
-<!-- ❌ 错误：属性换行 - 这会导致代码审查不通过 -->
-<el-table 
-  v-loading="listLoading" 
-  :data="list" 
-  border>
-
-<!-- ❌ 错误：每个属性一行 -->
-<el-cascader
-  v-model="value"
-  :options="options"
-  clearable
-/>
-
-<!-- ❌ 错误：开始标签换行 -->
-<el-button 
-  type="primary" 
-  @click="handleClick">
+# 返回匹配的案例后，获取完整方案：
+get_troubleshooting_case({ framework: "vue3", caseId: "table-边框问题" })
 ```
 
-**📋 代码编辑后检查清单（单行书写项目）：**
-
-每次生成或修改代码后，必须检查：
-- [ ] 所有 `<el-` 开头的组件，开始标签和属性在同一行
-- [ ] 没有属性换行的情况（除 `<template>`、`<div>`、`<span>` 等结构标签）
-- [ ] 代码行数没有不必要增加
-- [ ] 代码紧凑，易于阅读
+### Step 1: 加载规范（编写代码时）
 
-**原因说明**：
-1. 保持代码紧凑，单个文件不超过 2000 行
-2. 保持团队代码风格一致性
-3. 便于快速浏览和定位代码
-4. 避免格式化工具造成的样式不一致
-
-### 常见错误模式（禁止出现）
-
-\`\`\`vue
-<!-- ❌ 错误：多个 style 标签 -->
-<style>
-.old-class { }
-<style>
-.new-class { }
-</style>
-
-<!-- ❌ 错误：标签未关闭 -->
-<style>
-.some-class {
-  color: red;
-<!-- 缺少 </style> -->
-
-<!-- ❌ 错误：div 标签配对错误 -->
-<div class="wrapper">
-  <div class="content">
-    <el-table></el-table>
-  <!-- 缺少 </div> 闭合 content -->
-</div>
-
-<!-- ❌ 错误：删除不完整，残留旧代码 -->
-<template>
-  <div class="new-layout">
-  <!-- 下面是旧代码，应该删除但被遗留 -->
-  <div class="old-menu">
-</template>
-
-<!-- ✅ 正确：清晰完整的单个 style 标签 -->
-<style scoped lang="stylus">
-.form-title {
-  font-weight: bold;
-}
-</style>
-
-<!-- ✅ 正确：所有 div 标签配对 -->
-<div class="wrapper">
-  <div class="content">
-    <el-table></el-table>
-  </div>
-</div>
-\`\`\`
-
-### replace_string_in_file 使用规范
-
-**执行文件替换时必须：**
-1. **包含足够上下文** - oldString 包含替换位置前后 3-5 行代码
-2. **验证唯一性** - 确保 oldString 在文件中只匹配一处
-3. **完整性检查** - newString 必须包含完整的代码块（所有标签配对）
-4. **删除旧代码** - 删除时要彻底，不要遗留半截
-5. **重复验证** - 替换后使用 get_errors 工具验证无编译错误
-6. **精确匹配** - oldString 必须与源代码完全一致（包括空格、缩进）
-
-**错误案例：**
-\`\`\`typescript
-// ❌ 错误：删除不完整，导致第一个 <style> 没有关闭
-oldString: \`<style>
-  .old { }
-\`
-newString: \`<style>
-  .new { }
-</style>\`
-// 问题：如果原文有两个 <style>，会导致第一个没有 </style>
-\`\`\`
-
-**正确案例：**
-\`\`\`typescript
-// ✅ 正确：完整删除整个旧 style 块
-oldString: \`</script>
-
-<style lang="stylus" scoped>
-.old-menu { }
-/* ... 所有旧样式 ... */
-
-<style scoped lang="stylus">
-.new { }
-</style>\`
-
-newString: \`</script>
-
-<style scoped lang="stylus">
-.new { }
-</style>\`
-\`\`\`
-
-### 公共样式系统规范（项目级）
-
-**如果项目中已定义公共布局样式，必须优先使用这些样式，避免重复定义。**
-
-#### 常用布局类
-
-\`\`\`css
-/* 左右分栏容器 */
-.vs-container {
-  display: flex;
-  gap: 20px;
-}
-
-/* 左侧区域（50%宽度）*/
-.vs-left {
-  width: 50%;
-  flex: 1;
-}
+**按文件类型加载**：
+```
+# Vue 文件
+get_relevant_standards({ fileType: "vue" })
+→ 加载: standards/frameworks/vue3-composition.md
 
-/* 右侧区域（50%宽度）*/
-.vs-right {
-  width: 50%;
-  flex: 1;
-}
+# TypeScript 文件
+get_relevant_standards({ fileType: "ts" })
+→ 加载: standards/core/typescript-base.md
+```
 
-/* 左右分栏（6.5:3.5）*/
-.vs-left-65 { width: 64%; flex: 1; }
-.vs-right-35 { width: 34%; }
-\`\`\`
+**按库/框架加载**：
+```
+# Element Plus 组件
+get_relevant_standards({ imports: ["element-plus"] })
+→ 加载: standards/libraries/element-plus.md
 
-#### ✅ 正确使用示例
+# Pinia 状态管理
+get_relevant_standards({ imports: ["pinia"] })
+→ 加载: standards/frameworks/pinia.md
 
-\`\`\`vue
-<template>
-  <el-tabs v-model="activeName" type="border-card">
-    <el-tab-pane label="管理" name="manage">
-      <!-- 使用公共布局类 -->
-      <div class="vs-container">
-        <div class="vs-left">
-          <el-form><!-- 表单 --></el-form>
-        </div>
-        <div class="vs-right">
-          <el-table><!-- 表格 --></el-table>
-        </div>
-      </div>
-    </el-tab-pane>
-  </el-tabs>
-</template>
-
-<style scoped lang="stylus">
-/* 只写必要的自定义样式，不要重复定义布局 */
-.form-title {
-  font-weight: bold;
-}
-</style>
-\`\`\`
+# 国际化
+get_relevant_standards({ imports: ["vue-i18n"] })
+→ 加载: standards/libraries/i18n.md
+```
 
-#### ❌ 禁止模式
+**按场景加载**：
+```
+# API 调用
+get_relevant_standards({ scenario: "API 调用" })
+→ 加载: standards/patterns/api-layer.md
 
-\`\`\`vue
-<style scoped lang="stylus">
-/* ❌ 禁止：重复定义已存在的布局样式 */
-.split-container { display: flex; gap: 20px; }
-.split-left { flex: 1; width: 50%; }
-.split-right { flex: 1; width: 50%; }
-</style>
-\`\`\`
+# CSS 样式
+get_relevant_standards({ scenario: "CSS 样式" })
+→ 加载: standards/patterns/vue-css-nesting.md
+```
 
-#### 样式使用规范
+---
 
-1. **优先使用公共样式** - 检查项目中是否已有对应样式
-2. **使用 Element Plus 组件** - 不要自己实现已有的 UI 组件
-3. **最小化自定义样式** - 仅在必要时添加少量特殊样式（通常不超过 20 行）
+## 🎯 核心原则
 
-## 标准组件结构
+### 1. Composition API 优先
 
-\`\`\`vue
+```vue
 <script setup lang="ts">
-import { ref, computed, onMounted, getCurrentInstance } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 
 // Props 定义
 interface Props {
@@ -348,243 +137,167 @@ const props = withDefaults(defineProps<Props>(), {
 // Emits 定义
 interface Emits {
   (e: 'update:modelValue', value: string): void
-  (e: 'change', value: string): void
 }
 
 const emit = defineEmits<Emits>()
+</script>
+```
 
-// 状态
-const localValue = ref('')
+### 2. 类型安全
 
-// 计算属性
-const displayValue = computed(() => 
-  localValue.value.toUpperCase()
-)
+- ❌ 禁止 `any` 类型
+- ✅ 所有参数都有类型定义
+- ✅ 使用 interface 定义 Props/Emits
 
-// 方法
-const handleChange = () => {
-  emit('update:modelValue', localValue.value)
-  emit('change', localValue.value)
-}
+### 3. 最小改动原则
 
-// 生命周期
-onMounted(() => {
-  localValue.value = props.modelValue
-})
+| 判断项 | 是 | 否 |
+|--------|---|---|
+| 修改只影响当前文件？ | 继续修改 | **停止，重新评估** |
+| 存在类似模式？ | **复用现有模式** | 可新建 |
+| 需要改组件类型？ | **先确认用户意图** | 继续 |
+
+---
+
+## 📝 标准组件结构
+
+```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>
-  <div class="component">
-    <input 
-      v-model="localValue" 
-      :disabled="disabled"
-      @change="handleChange"
-    />
-  </div>
+  <!-- 模板内容 -->
 </template>
 
-<style scoped>
-.component {
-  /* scoped 样式 */
-}
+<style scoped lang="stylus">
+/* 样式 - 只能有一个 style 标签 */
 </style>
-\`\`\`
+```
 
-## 禁止模式
+---
+
+## 🚫 禁止模式
 
-- ❌ \`any\` 类型
+- ❌ `any` 类型
 - ❌ Options API
 - ❌ 不定义 Props/Emits 类型
 - ❌ 直接修改 Props
-- ❌ \`<script>\` 中使用 \`this\`
-- ❌ **擅自更换组件类型**（如将 el-cascader 换成 el-select，除非用户明确要求）
+- ❌ `<script>` 中使用 `this`
+- ❌ 擅自更换组件类型（el-cascader → el-select）
+- ❌ 多个 `<style>` 标签
 
-## 常用模式
+---
+
+## 🔧 常用模式
 
 ### 表单处理
-\`\`\`typescript
+
+```typescript
 const form = reactive({
   name: '',
   email: ''
 })
 
-const validate = () => {
-  if (!form.name.trim()) return false
-  return true
+const rules = {
+  name: [{ required: true, message: $t('请输入名称') }]
 }
-\`\`\`
-
-### 表格编辑取消逻辑（通用模式）
+```
 
-表格编辑采用"编辑-取消-提交"三按钮模式，需维护备份数据用于取消恢复：
+### 表格编辑取消
 
-\`\`\`typescript
-// 1. 数据获取时同时创建备份
+```typescript
+// 备份数据用于取消恢复
 const list = ref<any[]>([])
 const subList = ref<any[]>([])  // 备份
 
-const getList = async () => {
-  const agin = await api.$getList(params)
-  if (agin.success) {
-    list.value = agin.Data
-    subList.value = JSON.parse(JSON.stringify(agin.Data))  // 深拷贝备份
-  }
-}
-
-// 2. 取消方法（推荐使用独立方法）
-const cancelListEdit = () => {
+// 取消方法
+const cancelEdit = () => {
   list.value = JSON.parse(JSON.stringify(subList.value))
-  editMode.value = true  // 切回查看模式
-}
-
-// 3. 模板中调用
-<el-button @click="cancelListEdit" class="cancel_btn">{{ $t('取消') }}</el-button>
-
-// 4. 提交成功后更新备份
-const submitList = async () => {
-  const agin = await api.$updateList({ list: list.value })
-  if (agin.success) {
-    subList.value = JSON.parse(JSON.stringify(list.value))  // 更新备份
-    editMode.value = true
-  }
-}
-\`\`\`
-
-**检查清单：**
-- [ ] 每个可编辑表格都有对应的备份变量（\`xxxSubList\`）
-- [ ] 取消按钮调用独立方法，而非模板内联逻辑
-- [ ] 取消方法恢复的数据源与表格 \`:data\` 绑定一致
-- [ ] 使用 \`JSON.parse(JSON.stringify())\` 确保深拷贝
-
-## 需求理解规范
-
-### 核心原则：确认理解后再行动
-
-1. **区分"组件行为修改"与"组件类型替换"**
-   - "让级联选择器支持选中第一级" ≠ "把级联选择器换成普通选择器"
-   - 前者是修改组件行为，后者是替换组件类型
-
-2. **术语准确性**
-   - "一级/二级菜单" → 级联选择器的层级概念
-   - "选中第一级" → 在级联选择器中 \`checkStrictly: true\` 允许选中非叶子节点
-
-3. **遇到模糊需求时**
-   - 先询问确认，而非假设
-   - 列出你的理解让用户确认
-
-**示例：el-cascader 支持选中一级**
-\`\`\`typescript
-// ✅ 正确理解：修改级联选择器行为
-const enumCascaderProps = {
-  lazy: true,
-  checkStrictly: true,  // 允许选中任意级别
-  // ...
 }
+```
 
-// ❌ 错误理解：替换为普通选择器
-// 把 el-cascader 换成 el-select
-\`\`\`
+### 异步数据加载
 
-### 异步数据
-\`\`\`typescript
+```typescript
 const loading = ref(false)
 const data = ref<DataType[]>([])
 
 const fetchData = async () => {
   try {
     loading.value = true
-    const response = await api.getData()
-    data.value = response.data
-  } catch (err) {
-    console.error(err)
+    const res = await api.getData()
+    data.value = res.data
   } finally {
     loading.value = false
   }
 }
-\`\`\`
+```
 
-### 表格编辑取消逻辑
+---
 
-表格编辑采用"编辑-取消-提交"三按钮模式，需维护备份数据用于取消恢复：
+## 🔍 代码审查清单
 
-\`\`\`typescript
-// 1. 数据获取时同时创建备份
-const list = ref<any[]>([])
-const subList = ref<any[]>([])  // 备份
+**每次编辑后必检：**
 
-const getList = async () => {
-  const agin = await api.\$getList(params)
-  if (agin.success) {
-    list.value = agin.Data
-    subList.value = JSON.parse(JSON.stringify(agin.Data))  // 深拷贝备份
-  }
-}
+- [ ] 所有 HTML 标签正确闭合
+- [ ] 只有一个 `<style>` 标签
+- [ ] 所有文本已国际化
+- [ ] 单行书写（如项目要求）
+- [ ] 无 `any` 类型
+- [ ] Props/Emits 有类型定义
 
-// 2. 取消方法（推荐使用独立方法，避免模板内联）
-const cancelListEdit = () => {
-  list.value = JSON.parse(JSON.stringify(subList.value))
-  editMode.value = true  // 切回查看模式
-}
+---
 
-// 3. 模板中调用
-<el-button @click="cancelListEdit">{{ \$t('取消') }}</el-button>
+## 📚 样式规范
 
-// 4. 提交成功后更新备份
-const submitList = async () => {
-  const agin = await api.\$updateList({ list: list.value })
-  if (agin.success) {
-    subList.value = JSON.parse(JSON.stringify(list.value))  // 更新备份
-    editMode.value = true
-  }
-}
-\`\`\`
+### 使用公共样式类
 
-**检查清单**
-- [ ] 每个可编辑表格都有对应的备份变量（\`xxxSubList\`）
-- [ ] 取消按钮调用独立方法，而非模板内联逻辑
-- [ ] 方法中使用 \`.value\` 访问 ref
-- [ ] 取消方法恢复的数据源与表格 \`:data\` 绑定一致
-- [ ] 提交成功后更新备份数据
-- [ ] 使用 \`JSON.parse(JSON.stringify())\` 确保深拷贝
+```vue
+<!-- ✅ 正确：使用项目已有的布局类 -->
+<div class="vs-container">
+  <div class="vs-left">...</div>
+  <div class="vs-right">...</div>
+</div>
 
-## 🎨 el-drawer 表格样式规范
+<!-- ❌ 禁止：重复定义已存在的样式 -->
+<style>
+.split-container { display: flex; }  /* 已存在于公共样式 */
+</style>
+```
 
-在 el-drawer 中使用表格时，需注意输入控件的样式适配：
+### el-drawer 表格样式
 
-\`\`\`scss
+```scss
 :deep(.el-drawer) {
-  .el-table__body {
-    /* 禁用状态：透明背景，无边框 */
-    .el-input__wrapper,
-    .el-select .el-input__wrapper {
-      background-color: transparent !important;
-      box-shadow: none !important;
-    }
-    
-    /* 启用状态：使用 CSS 变量适配主题 */
-    .el-input:not(.is-disabled) .el-input__wrapper,
-    .el-select: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;
-    }
+  .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;
   }
 }
-\`\`\`
-
-**⚠️ 避免的问题**
-
-\`\`\`scss
-// ❌ 错误：硬编码颜色，不区分禁用/启用状态
-.el-input__wrapper {
-  background-color: #fff !important;  // 导致所有状态都是白色
-}
-
-// ✅ 正确：使用 CSS 变量 + 状态选择器
-.el-input:not(.is-disabled) .el-input__wrapper {
-  background-color: var(--el-fill-color-blank) !important;
-}
-\`\`\`
+```
 
-**完整规范**: \`prompts/vue/vue3-typescript.md\`
+---
 
-````
+**维护团队**: MTA工作室  
+**版本**: v2.0.0（精简版，详细方案请查询 troubleshooting）