mta-mcp 2.12.0 → 2.14.0

package/troubleshooting/flutter/withopacity-/345/274/203/347/224/250.md

@@ -0,0 +1,81 @@
+# withOpacity 弃用警告
+
+> **问题标签**: `deprecation`, `color`, `opacity`, `flutter3`  
+> **框架**: Flutter  
+> **严重程度**: 低（警告）
+
+---
+
+## 🔍 问题识别
+
+### IDE 提示
+```
+'withOpacity' is deprecated and shouldn't be used.
+Use withValues to avoid precision loss.
+```
+
+### 问题特征
+- [ ] 使用了 `Color.withOpacity()`
+- [ ] IDE 显示删除线警告
+- [ ] Flutter 3.x 版本
+
+---
+
+## 🎯 核心原理
+
+**原因**：Flutter 3.x 弃用了 `withOpacity()` 方法，因为浮点数精度问题。推荐使用精度更高的 `withValues()`。
+
+---
+
+## ✅ 正确解决方案
+
+### 替换语法
+
+```dart
+// ❌ 弃用写法
+color: Colors.white.withOpacity(0.7)
+color: const Color(0xFF1C2B45).withOpacity(0.15)
+
+// ✅ 新写法
+color: Colors.white.withValues(alpha: 0.7)
+color: const Color(0xFF1C2B45).withValues(alpha: 0.15)
+```
+
+### 批量替换命令
+
+```bash
+# 查找所有使用
+grep -r "\.withOpacity(" lib/
+
+# macOS/Linux sed 替换
+find lib -name "*.dart" -exec sed -i '' 's/\.withOpacity(\([^)]*\))/.withValues(alpha: \1)/g' {} \;
+```
+
+### IDE 全局替换
+- 搜索：`.withOpacity(`
+- 替换：`.withValues(alpha: `
+- 注意：需要手动调整括号
+
+---
+
+## 📝 注意事项
+
+1. **const 表达式**：`withValues` 同样不能在 const 中使用
+   ```dart
+   // 两种都不行用于 const
+   const color = Colors.white.withOpacity(0.5); // ❌
+   const color = Colors.white.withValues(alpha: 0.5); // ❌
+   
+   // const 颜色需要直接指定 alpha
+   const color = Color(0x80FFFFFF); // ✅ 0x80 = 50% alpha
+   ```
+
+2. **alpha 范围**：0.0 - 1.0（与 withOpacity 相同）
+
+---
+
+## 📁 适用场景
+
+- ✅ Flutter 3.x 项目升级
+- ✅ 消除 IDE 警告
+- ✅ 代码规范化

package/troubleshooting/vue3/cascader-/350/257/257/346/233/277/346/215/242.md

@@ -0,0 +1,130 @@
+# Vue3 组件类型误替换问题
+
+> **问题标签**: `vue3`, `component`, `requirement`, `cascader`, `select`, `理解偏差`  
+> **框架**: Vue3  
+> **严重程度**: 中等（导致返工）
+
+---
+
+## 🔍 问题识别
+
+### 用户描述关键词
+- "让级联选择器支持选中第一级"
+- "一级菜单也要能选"
+- "可以只选父级"
+- "checkStrictly"
+
+### 问题特征
+- [ ] AI 将"修改组件行为"误解为"替换组件类型"
+- [ ] 用户要求修改 el-cascader，AI 换成了 el-select
+- [ ] 用户要求添加功能，AI 删除了原有组件
+
+---
+
+## 🎯 核心原理
+
+**根本原因**：需求理解偏差，未区分"组件行为修改"与"组件类型替换"。
+
+### 术语准确性
+
+| 用户说法 | 正确理解 | 错误理解 |
+|----------|----------|----------|
+| "让级联选择器支持选中第一级" | 修改 el-cascader 的 props | ❌ 换成 el-select |
+| "一级/二级菜单" | 级联选择器的层级概念 | ❌ 菜单组件 |
+| "选中第一级" | `checkStrictly: true` | ❌ 换成单选 |
+
+---
+
+## ✅ 正确解决方案
+
+### el-cascader 支持选中任意级别
+
+```vue
+<template>
+  <el-cascader 
+    v-model="selectedValue" 
+    :options="options" 
+    :props="cascaderProps" 
+    :placeholder="$t('请选择')"
+    clearable
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+
+const selectedValue = ref([])
+
+// 关键配置：checkStrictly
+const cascaderProps = reactive({
+  lazy: true,
+  checkStrictly: true,  // ✅ 允许选中任意级别（包括父级）
+  lazyLoad: async (node, resolve) => {
+    // 异步加载子级数据
+    const { level, value } = node
+    const children = await fetchChildren(value, level)
+    resolve(children)
+  }
+})
+
+const options = ref([
+  { value: 1, label: '一级菜单 A', children: [] },
+  { value: 2, label: '一级菜单 B', children: [] }
+])
+</script>
+```
+
+### 与 el-select 的区别
+
+```vue
+<!-- ❌ 错误：换成 el-select 丢失了层级关系 -->
+<el-select v-model="selected">
+  <el-option label="一级菜单 A" value="1" />
+  <el-option label="二级菜单 A1" value="1-1" />
+  <el-option label="二级菜单 A2" value="1-2" />
+</el-select>
+
+<!-- ✅ 正确：保留 el-cascader，添加 checkStrictly -->
+<el-cascader 
+  v-model="selected"
+  :options="options"
+  :props="{ checkStrictly: true }"
+/>
+```
+
+---
+
+## ❌ 常见错误排查路线（避免重复）
+
+| 尝试方向 | 为什么无效 | 浪费时间 |
+|----------|-----------|---------|
+| 将 el-cascader 换成 el-select | 丢失层级关系和结构 | 3-5 轮返工 |
+| 用 el-tree-select 代替 | 组件不同，交互方式不符合需求 | 2-4 轮 |
+| 自己实现多级选择逻辑 | 重复造轮子，复杂且易出错 | 5-10 轮 |
+
+---
+
+## 📋 需求理解检查清单
+
+**遇到组件修改需求时，必须先确认：**
+
+- [ ] 用户是要"修改组件行为"还是"替换组件类型"？
+- [ ] 如果是修改行为，先查阅组件文档，看是否有对应配置项
+- [ ] 如果用户说"一级菜单"，确认是指级联选择器的层级还是导航菜单
+- [ ] 如果不确定，先询问用户确认，列出理解让用户选择
+
+---
+
+## 📁 适用场景
+
+- ✅ el-cascader 需要支持选中任意级别
+- ✅ 需要在层级数据中选择父级节点
+- ✅ 异步加载的级联选择器
+- ✅ 区分"修改组件行为"与"替换组件"
+
+---
+
+## 🔗 相关案例
+
+- [form-验证问题.md](./form-验证问题.md) - 表单配置相关
+- [table-编辑取消.md](./table-编辑取消.md) - 编辑模式切换

package/troubleshooting/vue3/drawer-input-/346/240/267/345/274/217.md

@@ -0,0 +1,181 @@
+# Vue3 el-drawer 表格输入框样式问题
+
+> **问题标签**: `vue3`, `element-plus`, `drawer`, `table`, `input`, `style`, `background`  
+> **框架**: Vue3  
+> **严重程度**: 中等（UI 不符合预期）
+
+---
+
+## 🔍 问题识别
+
+### 用户描述关键词
+- "drawer 里的输入框背景色不对"
+- "输入框在抽屉中样式异常"
+- "禁用状态和启用状态背景一样"
+- "表格中的输入框透明"
+
+### 问题特征
+- [ ] el-drawer 中的 el-table 内，el-input/el-select 样式异常
+- [ ] 禁用和启用状态背景色一样
+- [ ] 输入框边框丢失或显示异常
+- [ ] 使用了硬编码颜色（如 `#fff`）
+
+---
+
+## 🎯 核心原理
+
+**根本原因**：el-drawer 中的表格输入控件需要特殊处理，区分禁用/启用状态，并使用 CSS 变量适配主题。
+
+### 问题代码模式
+
+```scss
+// ❌ 错误：硬编码颜色，不区分状态
+.el-input__wrapper {
+  background-color: #fff !important;  // 导致所有状态都是白色
+}
+
+// ❌ 错误：全局覆盖
+.el-input__wrapper {
+  background-color: transparent !important;  // 导致所有输入框透明
+}
+```
+
+---
+
+## ✅ 正确解决方案
+
+### 使用 CSS 变量 + 状态选择器
+
+```vue
+<style scoped lang="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).is-focus .el-input__wrapper,
+    .el-select:not(.is-disabled).is-focus .el-input__wrapper {
+      box-shadow: 0 0 0 1px var(--el-color-primary) inset !important;
+    }
+  }
+}
+</style>
+```
+
+### CSS 变量说明
+
+| CSS 变量 | 说明 | 默认值（浅色主题） |
+|----------|------|--------------------|
+| `--el-fill-color-blank` | 空白填充色 | `#ffffff` |
+| `--el-border-color` | 边框颜色 | `#dcdfe6` |
+| `--el-color-primary` | 主题色 | `#409eff` |
+| `--el-text-color-disabled` | 禁用文字色 | `#a8abb2` |
+
+### 完整示例
+
+```vue
+<template>
+  <el-drawer v-model="visible" :title="$t('编辑数据')" size="60%">
+    <el-table :data="list" border>
+      <el-table-column :label="$t('名称')" prop="name">
+        <template #default="{ row }">
+          <el-input v-model="row.name" :disabled="editR" :placeholder="$t('请输入')" />
+        </template>
+      </el-table-column>
+      
+      <el-table-column :label="$t('类型')" prop="type">
+        <template #default="{ row }">
+          <el-select v-model="row.type" :disabled="editR" :placeholder="$t('请选择')">
+            <el-option :label="$t('类型A')" value="A" />
+            <el-option :label="$t('类型B')" value="B" />
+          </el-select>
+        </template>
+      </el-table-column>
+    </el-table>
+  </el-drawer>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const visible = ref(false)
+const editR = ref(false)  // false=编辑模式, true=查看模式
+const list = ref([
+  { name: '测试1', type: 'A' },
+  { name: '测试2', type: 'B' }
+])
+</script>
+
+<style scoped lang="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;
+    }
+  }
+}
+</style>
+```
+
+---
+
+## ❌ 常见错误排查路线（避免重复）
+
+| 尝试方向 | 为什么无效 | 浪费时间 |
+|----------|-----------|---------|
+| 硬编码 `#fff` | 不适配暗色主题，所有状态一样 | 2-3 轮 |
+| 全局覆盖 `.el-input__wrapper` | 影响其他页面的输入框 | 3-5 轮 |
+| 不区分 `.is-disabled` | 禁用和启用状态样式一样 | 2-4 轮 |
+| 使用 `style="..."` 内联样式 | 无法适配主题，优先级问题 | 1-2 轮 |
+
+---
+
+## 📋 样式检查清单
+
+**在 el-drawer 中使用表格输入框时，必须确认：**
+
+- [ ] 使用 CSS 变量（`var(--el-xxx)`）而非硬编码颜色
+- [ ] 区分禁用状态（`.is-disabled`）和启用状态
+- [ ] 使用 `:deep()` 穿透 scoped 样式
+- [ ] 限定作用域（`.el-drawer .el-table__body`）不影响其他组件
+- [ ] 禁用状态：透明背景 + 无边框
+- [ ] 启用状态：白色背景 + 边框
+
+---
+
+## 📁 适用场景
+
+- ✅ el-drawer 中的表格编辑功能
+- ✅ 需要区分禁用/启用状态的输入框
+- ✅ 需要适配浅色/暗色主题
+- ✅ 表格内嵌 el-input、el-select、el-date-picker 等
+
+---
+
+## 🔗 相关案例
+
+- [table-编辑取消.md](./table-编辑取消.md) - 表格编辑取消逻辑
+- [table-边框问题.md](./table-边框问题.md) - 表格边框样式
+- [style-优先级问题.md](./style-优先级问题.md) - 样式优先级问题

package/troubleshooting/vue3/table-/347/274/226/350/276/221/345/217/226/346/266/210.md

@@ -0,0 +1,148 @@
+# Vue3 表格编辑取消逻辑错误
+
+> **问题标签**: `vue3`, `table`, `edit`, `cancel`, `backup`, `深拷贝`  
+> **框架**: Vue3  
+> **严重程度**: 中等（影响数据一致性）
+
+---
+
+## 🔍 问题识别
+
+### 用户描述关键词
+- "取消按钮不生效"
+- "取消后数据没恢复"
+- "表格编辑取消功能"
+- "怎么实现取消编辑"
+
+### 问题特征
+- [ ] 点击取消按钮后，表格数据未恢复到编辑前状态
+- [ ] 没有维护备份数据
+- [ ] 使用浅拷贝导致数据引用问题
+- [ ] 取消逻辑直接写在模板中（内联）
+
+---
+
+## 🎯 核心原理
+
+**根本原因**：表格编辑采用"编辑-取消-提交"三按钮模式，需要维护备份数据用于取消恢复。
+
+**关键点**：
+1. 数据获取时同时创建备份
+2. 使用 `JSON.parse(JSON.stringify())` 深拷贝
+3. 取消时从备份恢复数据
+4. 提交成功后更新备份
+
+---
+
+## ✅ 正确解决方案
+
+### 完整实现模式
+
+```typescript
+// 1. 数据定义：表格数据 + 备份数据
+const list = ref<any[]>([])
+const subList = ref<any[]>([])  // 备份
+const editMode = ref(true)      // true=查看模式, false=编辑模式
+
+// 2. 数据获取时同时创建备份
+const getList = async () => {
+  const agin = await api.$getList(params)
+  if (agin.success) {
+    list.value = agin.Data
+    // 深拷贝创建备份
+    subList.value = JSON.parse(JSON.stringify(agin.Data))
+  }
+}
+
+// 3. 取消方法（推荐使用独立方法，而非模板内联）
+const cancelListEdit = () => {
+  // 从备份恢复数据
+  list.value = JSON.parse(JSON.stringify(subList.value))
+  editMode.value = true  // 切回查看模式
+}
+
+// 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
+    ElMessage.success($t('保存成功'))
+  }
+}
+
+// 5. 进入编辑模式
+const enterEditMode = () => {
+  editMode.value = false
+}
+```
+
+### 模板使用
+
+```vue
+<template>
+  <el-table v-loading="loading" :data="list" border highlight-current-row>
+    <el-table-column prop="name" :label="$t('名称')">
+      <template #default="{ row }">
+        <!-- 编辑模式：显示输入框 -->
+        <el-input v-if="!editMode" v-model="row.name" :placeholder="$t('请输入名称')"></el-input>
+        <!-- 查看模式：显示文本 -->
+        <span v-else>{{ row.name }}</span>
+      </template>
+    </el-table-column>
+  </el-table>
+
+  <!-- 按钮组 -->
+  <div class="btn-group">
+    <!-- 查看模式：显示编辑按钮 -->
+    <el-button v-if="editMode" type="primary" @click="enterEditMode">{{ $t('编辑') }}</el-button>
+    
+    <!-- 编辑模式：显示取消和提交按钮 -->
+    <template v-else>
+      <el-button @click="cancelListEdit" class="cancel_btn">{{ $t('取消') }}</el-button>
+      <el-button type="primary" :loading="btnLoading" @click="submitList">{{ $t('提交') }}</el-button>
+    </template>
+  </div>
+</template>
+```
+
+---
+
+## ❌ 常见错误排查路线（避免重复）
+
+| 尝试方向 | 为什么无效 | 浪费时间 |
+|----------|-----------|---------|
+| 不创建备份，直接重新请求数据 | 网络请求慢，用户体验差，且可能数据已变化 | 2-3 轮 |
+| 使用浅拷贝 `subList = list` | 引用同一对象，修改 list 会影响 subList | 3-5 轮 |
+| 模板内联逻辑 `@click="list = subList"` | 无法深拷贝，且难以维护 | 1-2 轮 |
+| 忘记提交成功后更新备份 | 下次取消会恢复到更早的数据 | 2-4 轮 |
+
+---
+
+## 📋 检查清单
+
+**实现表格编辑取消功能时，必须确认：**
+
+- [ ] 每个可编辑表格都有对应的备份变量（`xxxSubList`）
+- [ ] 使用 `JSON.parse(JSON.stringify())` 进行深拷贝
+- [ ] 取消按钮调用独立方法，而非模板内联逻辑
+- [ ] 取消方法中恢复的数据源与表格 `:data` 绑定一致
+- [ ] 提交成功后更新备份数据
+- [ ] 方法中使用 `.value` 访问 ref 变量
+
+---
+
+## 📁 适用场景
+
+- ✅ 表格内编辑功能
+- ✅ 需要支持取消恢复的表单
+- ✅ 多个编辑项的复杂表格
+- ✅ 编辑-取消-提交三按钮模式
+
+---
+
+## 🔗 相关案例
+
+- [form-验证问题.md](./form-验证问题.md) - 表单验证相关问题
+- [table-边框问题.md](./table-边框问题.md) - 表格样式问题