@morya-ui/mcp 0.4.5 → 0.5.0

package/dist/decisions.js

@@ -545,8 +545,10 @@ export const componentDecisions = [
                 avoidWhen: ['整个页面区块的 padding 和垂直 rhythm'],
                 avoidWhenEn: ['Padding and vertical rhythm for whole page sections'],
                 recipe: recipe([
-                    ['gap / align / justify 按需（或等价 class/prop）', 'gap / align / justify as needed'],
-                    ['筛选行、工具栏内组优先 Flex', 'Prefer Flex for filter rows and toolbar groups'],
+                    ['size / gap 控制间距（gap 是 size 的别名，优先用 size）', 'size / gap for spacing (gap is an alias of size; prefer size)'],
+                    ['align 控制交叉轴对齐（start / center / end / baseline / stretch）', 'align controls cross-axis (start / center / end / baseline / stretch)'],
+                    ['justify 控制主轴分布（start / center / end / between / around / evenly）', 'justify controls main-axis distribution'],
+                    ['wrap 允许折行；筛选行、工具栏内组优先 Flex', 'wrap allows wrapping; prefer Flex for filter rows and toolbar groups'],
                     ['不要用 Flex 代替 PageContent 的页面 padding', 'Do not replace PageContent page padding with Flex'],
                 ]),
                 ...anti([['整页垂直节奏用 Flex → PageContent', 'Whole-page vertical rhythm via Flex → PageContent']]),
@@ -561,11 +563,16 @@ export const componentDecisions = [
                 avoidWhen: ['页面级标题与主操作两端对齐'],
                 avoidWhenEn: ['Page-level title and primary action need space-between alignment'],
                 recipe: recipe([
-                    ['包裹 MButton 组', 'Wrap MButton groups'],
-                    ['行内操作常用 size="small" text 按钮', 'Row actions often size="small" text buttons'],
-                    ['Dialog #footer 内可用 Space + justify-content:flex-end', 'In Dialog #footer: Space + justify-content:flex-end'],
+                    ['size 控制间距；默认 wrap 折行', 'size for spacing; wraps by default'],
+                    ['align 交叉轴对齐（同 Flex）；没有 justify 语义', 'align for cross-axis (same as Flex); no justify semantics'],
+                    ['vertical 垂直堆叠控件组', 'vertical stacks the group vertically'],
+                    ['包裹 MButton 组；行内操作常用 size="small" text 按钮', 'Wrap MButton groups; row actions often size="small" text buttons'],
+                    ['Dialog #footer 内可用 Space + style justify-content:flex-end', 'In Dialog #footer: Space + style justify-content:flex-end'],
+                ]),
+                ...anti([
+                    ['标题与主按钮两端对齐只用 Space → PageToolbar / Flex justify', 'Title/actions space-between via Space alone → PageToolbar / Flex'],
+                    ['需要精确对齐控制仍用 Space → Flex', 'Need precise alignment control but using Space → Flex'],
                 ]),
-                ...anti([['标题与主按钮两端对齐只用 Space → PageToolbar / Flex justify', 'Title/actions space-between via Space alone → PageToolbar / Flex']]),
             },
             {
                 component: 'Grid',
@@ -1369,6 +1376,1292 @@ export const componentDecisions = [
             },
         ],
     },
+    {
+        id: 'button-icon-choice',
+        title: '按钮图标放在哪里',
+        titleEn: 'Where to put a button icon',
+        question: '按钮需要带图标时，是用 icon prop、#icon 插槽，还是纯图标按钮？',
+        questionEn: 'When a button needs an icon, should it use the icon prop, the #icon slot, or be an icon-only button?',
+        keywords: [
+            '按钮图标',
+            '图标按钮',
+            '纯图标',
+            'button icon',
+            'icon button',
+            'icon-only',
+            'iconPlacement',
+            'loading icon',
+        ],
+        options: [
+            {
+                component: 'icon prop',
+                when: ['标准图标与文字按钮', '图标来自 morya-ui 内置图标名'],
+                whenEn: ['Standard icon + label buttons', 'The icon is a built-in MIcon name'],
+                avoidWhen: ['需要自定义 SVG / 组件图标', 'loading 时要换不同图标'],
+                avoidWhenEn: ['Custom SVG / component icons are needed', 'The loading state needs a different icon'],
+                recipe: recipe([
+                    ['icon="plus" 传内置图标名', 'icon="plus" passes a built-in icon name'],
+                    ['iconPlacement="end" 图标放文字右侧', 'iconPlacement="end" places icon after the label'],
+                    ['图标随按钮 size 自动缩放', 'Icon size follows button size automatically'],
+                    ['loading 时自动替换为转圈', 'Loading swaps the icon to a spinner automatically'],
+                ]),
+                ...anti([
+                    ['手动 <MIcon /> 放默认插槽 → icon prop', 'Hand-placed <MIcon /> in default slot → icon prop'],
+                    ['图标和文字间距手写 margin → 交给组件', 'Hand-written margin between icon and label → let the component handle it'],
+                ]),
+            },
+            {
+                component: '#icon slot',
+                when: ['自定义 SVG / 组件图标', 'loading 时要用 #loadingicon 换不同图标'],
+                whenEn: ['Custom SVG / component icons', 'Loading state needs #loadingicon with a different icon'],
+                avoidWhen: ['标准内置图标名即可满足'],
+                avoidWhenEn: ['A built-in icon name is enough'],
+                recipe: recipe([
+                    ['#icon 放任意 VNode（自定义 SVG / 组件）', '#icon accepts any VNode (custom SVG / component)'],
+                    ['#loadingicon 自定义 loading 态图标', '#loadingicon customizes the loading icon'],
+                    ['图标仍随按钮 size 缩放，对齐由组件保证', 'Icon still scales with button size; alignment is handled'],
+                ]),
+                ...anti([
+                    ['#icon 和默认插槽混放导致间距错乱 → 只用一个', 'Mixing #icon and default slot breaks spacing → use one'],
+                ]),
+            },
+            {
+                component: 'iconOnly',
+                when: ['工具栏 / 卡片头部等空间紧张处', '图标含义对用户足够明确（如 删除/编辑/关闭）'],
+                whenEn: ['Space-constrained areas like toolbars or card headers', 'The icon meaning is unambiguous to users (delete / edit / close)'],
+                avoidWhen: ['用户可能不认识图标含义', '表单提交等需要明确文字的操作'],
+                avoidWhenEn: ['Users may not recognize the icon', 'Actions that need an explicit label like form submit'],
+                recipe: recipe([
+                    ['iconOnly + icon="…" 或 #icon', 'iconOnly + icon="…" or #icon'],
+                    ['必须配 ariaLabel（无视觉文字，屏幕阅读器依赖）', 'ariaLabel is required (no visible label for screen readers)'],
+                    ['shape="circle" 圆形图标按钮', 'shape="circle" for a round icon button'],
+                    ['仍可用 loading 切换转圈', 'loading still swaps to spinner'],
+                ]),
+                ...anti([
+                    ['iconOnly 把图标放默认插槽 → icon prop 或 #icon', 'Icon in default slot with iconOnly → icon prop or #icon'],
+                    ['iconOnly 不写 ariaLabel → 必填', 'iconOnly without ariaLabel → required'],
+                    ['含义不明确的图标硬用 iconOnly → 加文字', 'Ambiguous icon with iconOnly → add a label'],
+                ]),
+            },
+        ],
+    },
+    {
+        id: 'input-addon-choice',
+        title: '输入框前后缀如何选择',
+        titleEn: 'Choosing input prefix / suffix',
+        question: '输入框需要带图标、文字前缀或多个控件合并时，用 MIconField 还是 MInputGroup？',
+        questionEn: 'When an input needs an icon, a text prefix, or merged controls, should it use MIconField or MInputGroup?',
+        keywords: [
+            '输入框图标',
+            '前缀',
+            '后缀',
+            'input icon',
+            'prefix',
+            'suffix',
+            'addon',
+            'input group',
+            'iconfield',
+        ],
+        options: [
+            {
+                component: 'MIconField',
+                when: ['输入框内左/右侧放一个图标（搜索、清除提示等）'],
+                whenEn: ['A single icon inside the input on the left or right (search, clear hint, etc.)'],
+                avoidWhen: ['需要文字前缀 / 后缀', '需要合并多个控件（输入框 + 按钮）'],
+                avoidWhenEn: ['A text prefix / suffix is needed', 'Multiple controls need to merge (input + button)'],
+                recipe: recipe([
+                    ['iconPosition="left"（默认）或 "right"', 'iconPosition="left" (default) or "right"'],
+                    ['#icon 插槽放 MIcon 或任意图标', '#icon slot holds MIcon or any icon'],
+                    ['默认插槽放 MInput / MTextarea 等控件', 'Default slot holds MInput / MTextarea etc.'],
+                    ['图标随控件主题对齐，无需手写定位', 'Icon aligns with control theme; no manual positioning'],
+                ], [
+                    ['#icon 图标内容', '#icon for the icon'],
+                    ['默认插槽：输入控件', 'Default: the input control'],
+                ]),
+                ...anti([
+                    ['手写 absolute 定位图标 → MIconField', 'Hand-written absolute icon → MIconField'],
+                    ['文字前缀用 MIconField → MInputGroup + MInputGroupAddon', 'Text prefix via MIconField → MInputGroup + MInputGroupAddon'],
+                ]),
+            },
+            {
+                component: 'MInputGroup',
+                when: ['输入框需要文字前缀 / 后缀（如 https://、$、单位）', '输入框 + 按钮 / 下拉合并成一个整体'],
+                whenEn: ['Input needs a text prefix / suffix (https://, $, units)', 'Input merged with a button or select into one control'],
+                avoidWhen: ['只是输入框内放一个图标'],
+                avoidWhenEn: ['Only a single icon inside the input'],
+                recipe: recipe([
+                    ['MInputGroup 包裹 MInput + MInputGroupAddon', 'MInputGroup wraps MInput + MInputGroupAddon'],
+                    ['MInputGroupAddon 放文字前缀 / 后缀', 'MInputGroupAddon holds the text prefix / suffix'],
+                    ['可混合 MButton 作为后置操作', 'MButton can mix in as a trailing action'],
+                ]),
+                ...anti([
+                    ['输入框内单图标用 MInputGroup → MIconField', 'Single in-input icon via MInputGroup → MIconField'],
+                    ['手写 flex 拼输入框和按钮 → MInputGroup', 'Hand-flexed input + button → MInputGroup'],
+                ]),
+            },
+        ],
+    },
+    {
+        id: 'toggle-input-choice',
+        title: '开关、复选框、滑块、标签输入如何选择',
+        titleEn: 'Choosing switch, checkbox, slider, or tag input',
+        question: '这个输入是立即生效的设置、表单提交时的勾选、范围调节，还是自由标签输入？',
+        questionEn: 'Is this an instant setting toggle, a form-submitted checkbox, a range adjustment, or free-form tag entry?',
+        keywords: [
+            '开关',
+            '复选框',
+            '滑块',
+            '标签输入',
+            '多选',
+            'switch',
+            'checkbox',
+            'slider',
+            'inputtags',
+            'tags',
+            'toggle',
+            'range',
+        ],
+        options: [
+            {
+                component: 'MSwitch',
+                when: ['设置项立即生效，不需要点保存', '只有开 / 关两种状态'],
+                whenEn: ['A setting takes effect immediately without saving', 'Only on / off states'],
+                avoidWhen: ['表单提交时才确认的勾选协议', '需要从多个选项中选'],
+                avoidWhenEn: ['A terms checkbox confirmed on form submit', 'Selection from multiple options'],
+                recipe: recipe([
+                    ['v-model 布尔值', 'v-model boolean'],
+                    ['loading 显示转圈并阻止切换', 'loading shows a spinner and blocks toggles'],
+                    ['checkedText / uncheckedText 自定义状态文案', 'checkedText / uncheckedText for state copy'],
+                    ['label 或外部 MFormItem 提供可访问名称', 'label or wrapping MFormItem provides the accessible name'],
+                ]),
+                ...anti([
+                    ['协议确认用 MSwitch → MCheckbox', 'Terms confirmation via MSwitch → MCheckbox'],
+                    ['多选需求用多个 MSwitch → MCheckboxGroup / MSelect', 'Multi-select via stacked MSwitch → MCheckboxGroup / MSelect'],
+                ]),
+            },
+            {
+                component: 'MCheckbox',
+                when: ['表单提交时才生效的勾选（协议、批量选择）', '需要从固定选项中选多个'],
+                whenEn: ['A checkbox that takes effect on form submit (terms, bulk select)', 'Selecting multiple from fixed options'],
+                avoidWhen: ['设置项需要立即生效'],
+                avoidWhenEn: ['A setting must take effect immediately'],
+                recipe: recipe([
+                    ['MCheckboxGroup v-model 数组包多个 MCheckbox', 'MCheckboxGroup v-model array wraps multiple MCheckbox'],
+                    ['单个勾选用 MCheckbox v-model 布尔值', 'Single checkbox: MCheckbox v-model boolean'],
+                    ['与 MFormItem 一起用，提交时校验', 'Use with MFormItem for submit-time validation'],
+                ]),
+                ...anti([['立即生效设置用 MCheckbox → MSwitch', 'Instant setting via MCheckbox → MSwitch']]),
+            },
+            {
+                component: 'MSlider',
+                when: ['范围调节（音量、价格区间、阈值）', '视觉化比例比精确数值更重要'],
+                whenEn: ['Range adjustment (volume, price range, threshold)', 'Visual proportion matters more than exact value'],
+                avoidWhen: ['需要精确输入数值', '选项是离散枚举'],
+                avoidWhenEn: ['Exact numeric input is required', 'Options are discrete enums'],
+                recipe: recipe([
+                    ['v-model 数值或 range 数值数组', 'v-model number or range number array'],
+                    ['min / max / step 控制范围', 'min / max / step for the range'],
+                    ['marks 显示刻度标签', 'marks for tick labels'],
+                    ['tooltip 拖拽时显示当前值', 'tooltip shows current value while dragging'],
+                ]),
+                ...anti([
+                    ['精确数值输入用 MSlider → MInputNumber', 'Exact numeric input via MSlider → MInputNumber'],
+                    ['离散枚举选择用 MSlider → MSelect / MSelectButton', 'Discrete enum via MSlider → MSelect / MSelectButton'],
+                ]),
+            },
+            {
+                component: 'MInputTags',
+                when: ['自由输入并回车生成标签（关键词、邮箱列表）', '标签内容不受固定选项约束'],
+                whenEn: ['Free-form entry generating tags on Enter (keywords, email lists)', 'Tag content is not constrained to fixed options'],
+                avoidWhen: ['只能从预定义选项中选', '单个值输入'],
+                avoidWhenEn: ['Selection must be from predefined options', 'Single value input'],
+                recipe: recipe([
+                    ['v-model 字符串数组', 'v-model string array'],
+                    ['separator 支持逗号等额外分隔符', 'separator supports extra delimiters like comma'],
+                    ['max 限制标签数量', 'max caps the tag count'],
+                    ['addOnBlur 失焦时自动添加', 'addOnBlur adds on blur'],
+                ]),
+                ...anti([
+                    ['固定选项多选用 MInputTags → MSelect mode="multiple"', 'Fixed multi-select via MInputTags → MSelect mode="multiple"'],
+                    ['允许创建新选项但要从建议中选 → MSelect mode="tags"', 'Create new options from suggestions → MSelect mode="tags"'],
+                ]),
+            },
+        ],
+    },
+    {
+        id: 'status-display-choice',
+        title: '头像、图片、标签、状态如何选择',
+        titleEn: 'Choosing avatar, image, tag, or status display',
+        question: '这是用户头像、可预览图片、分类标签、可移除实体，还是行内业务状态？',
+        questionEn: 'Is this a user avatar, a previewable image, a category tag, a removable entity, or an inline business status?',
+        keywords: [
+            '头像',
+            '图片',
+            '标签',
+            '状态',
+            'avatar',
+            'image',
+            'tag',
+            'chip',
+            'status',
+            'badge',
+            '预览',
+            '角标',
+        ],
+        options: [
+            {
+                component: 'MAvatar',
+                when: ['展示单个用户 / 实体头像', '图片加载失败需要回退到首字母或图标'],
+                whenEn: ['Displaying a single user / entity avatar', 'Fallback to initials or an icon when the image fails'],
+                avoidWhen: ['需要展示多个用户堆叠', '需要点击预览大图'],
+                avoidWhenEn: ['Multiple users need to stack', 'Click-to-preview a larger image is needed'],
+                recipe: recipe([
+                    ['image 头像图片 URL，优先于 icon 和 label', 'image URL takes priority over icon and label'],
+                    ['label 回退首字母；icon 回退内置图标', 'label falls back to initials; icon falls back to a built-in icon'],
+                    ['shape="circle"（默认）或 "square"', 'shape="circle" (default) or "square"'],
+                    ['size 可选 xlarge 用于个人资料页', 'size up to xlarge for profile pages'],
+                ]),
+                ...anti([
+                    ['多用户堆叠用多个 MAvatar → MAvatarGroup', 'Multiple users via stacked MAvatar → MAvatarGroup'],
+                    ['手写 img 圆形头像 → MAvatar', 'Hand-written circular img → MAvatar'],
+                ]),
+            },
+            {
+                component: 'MAvatarGroup',
+                when: ['多个用户头像堆叠展示', '超出数量需要 +N 计数'],
+                whenEn: ['Stacking multiple user avatars', 'Overflow needs a +N count'],
+                avoidWhen: ['单个用户头像'],
+                avoidWhenEn: ['A single user avatar'],
+                recipe: recipe([
+                    ['包裹多个 MAvatar', 'Wraps multiple MAvatar'],
+                    ['max 控制最多显示几个，超出显示 +N', 'max caps visible avatars; overflow shows +N'],
+                    ['size 统一控制组内头像尺寸', 'size applies a uniform avatar size'],
+                ]),
+                ...anti([['单个头像用 MAvatarGroup → MAvatar', 'Single avatar via MAvatarGroup → MAvatar']]),
+            },
+            {
+                component: 'MImage',
+                when: ['需要点击预览大图', '需要懒加载或 fit 控制'],
+                whenEn: ['Click-to-preview a larger image', 'Lazy loading or fit control is needed'],
+                avoidWhen: ['纯装饰背景图', '不需要预览的普通图片'],
+                avoidWhenEn: ['Purely decorative background images', 'Plain images that do not need preview'],
+                recipe: recipe([
+                    ['preview 默认开启，点击放大', 'preview is on by default; click to enlarge'],
+                    ['previewSrc 可指定不同于 src 的大图', 'previewSrc can differ from src'],
+                    ['fit 控制 object-fit（cover / contain / fill…）', 'fit controls object-fit (cover / contain / fill…)'],
+                    ['width / height 显式设置避免布局抖动', 'width / height avoids layout shift'],
+                ]),
+                ...anti([
+                    ['需要预览却手写 img → MImage', 'Need preview but hand-written img → MImage'],
+                    ['用户头像用 MImage → MAvatar', 'User avatar via MImage → MAvatar'],
+                ]),
+            },
+            {
+                component: 'MTag',
+                when: ['分类、筛选结果或可关闭标签', '需要比 Status 更像芯片的表面'],
+                whenEn: ['A category, filter result, or closable label', 'A chip-like surface rather than an inline status'],
+                avoidWhen: ['只是一行里的轻量状态', '带图片且代表一个可移除实体'],
+                avoidWhenEn: ['A lightweight inline status', 'An entity with an image that can be removed'],
+                recipe: recipe([
+                    ['value 或默认插槽文案', 'value or default-slot copy'],
+                    ['type 语义色；closable + @close', 'type semantic color; closable + @close'],
+                    ['checkable + v-model:checked 可选中切换', 'checkable + v-model:checked for toggleable tags'],
+                    ['icon 加内置图标；rounded 圆角', 'icon for a built-in icon; rounded for pill shape'],
+                ], undefined, [['@close 关闭标签', '@close when the tag is closed']]),
+                ...anti([
+                    ['行内启用/停用状态用 MTag → MStatus', 'Enabled/disabled inline via MTag → MStatus'],
+                    ['可移除实体（带头像）用 MTag → MChip', 'Removable entity with avatar via MTag → MChip'],
+                ]),
+            },
+        ],
+    },
+    {
+        id: 'nav-pattern-choice',
+        title: '页面内导航模式如何选择',
+        titleEn: 'Choosing in-page navigation patterns',
+        question: '这是长页面锚点跳转、滚动固定、内容切换、分步流程，还是层级路径？',
+        questionEn: 'Is this anchor jump in a long page, scroll pinning, content switching, a step flow, or a hierarchy path?',
+        keywords: [
+            '锚点',
+            '固钉',
+            '标签页',
+            '步骤条',
+            '面包屑',
+            'anchor',
+            'affix',
+            'tabs',
+            'stepper',
+            'breadcrumb',
+            '分步',
+            '向导',
+        ],
+        options: [
+            {
+                component: 'MAnchor',
+                when: ['长页面右侧锚点导航', '内容区块有明确标题层级'],
+                whenEn: ['Anchor navigation on the right of a long page', 'Content sections have clear heading hierarchy'],
+                avoidWhen: ['页面很短不需要跳转', '需要切换显示不同内容面板'],
+                avoidWhenEn: ['The page is too short to need jumps', 'Different content panels need to switch'],
+                recipe: recipe([
+                    ['items 手动指定，或根据标题自动生成', 'items set manually, or auto-generated from headings'],
+                    ['与 MLayoutContent 长页面配合', 'Pairs with long MLayoutContent pages'],
+                    ['点击平滑滚动到对应区块', 'Click smooth-scrolls to the section'],
+                ]),
+                ...anti([['内容切换用 MAnchor → MTabs', 'Content switching via MAnchor → MTabs']]),
+            },
+            {
+                component: 'MAffix',
+                when: ['元素滚动到某位置后固定（操作栏吸顶、侧栏跟随）'],
+                whenEn: ['An element pins after scrolling to a position (sticky action bar, following sider)'],
+                avoidWhen: ['页面顶部固定导航（那是 MLayoutHeader）', '元素不需要随滚动变化'],
+                avoidWhenEn: ['Top-fixed navigation (that is MLayoutHeader)', 'The element does not change with scroll'],
+                recipe: recipe([
+                    ['offsetTop 距离顶部多少时固定', 'offsetTop pins at a distance from the top'],
+                    ['target 指定滚动容器（默认 window）', 'target sets the scroll container (window by default)'],
+                    ['z-index 按需调整避免被遮挡', 'Adjust z-index to avoid occlusion'],
+                ]),
+                ...anti([['页面顶部导航用 MAffix → MLayoutHeader', 'Top page nav via MAffix → MLayoutHeader']]),
+            },
+            {
+                component: 'MTabs',
+                when: ['多个内容面板切换显示', '标签数量适中且需要全部可见'],
+                whenEn: ['Switching between multiple content panels', 'A moderate number of tabs all visible'],
+                avoidWhen: ['选项是表单值（用 MSelectButton）', '需要手风琴折叠展开'],
+                avoidWhenEn: ['Options are form values (use MSelectButton)', 'Accordion expand/collapse is needed'],
+                recipe: recipe([
+                    ['v-model:value 控制当前标签', 'v-model:value controls the active tab'],
+                    ['closable 可关闭标签（配合 @tab-close）', 'closable for dismissible tabs (with @tab-close)'],
+                    ['与路由结合时用 to 或 @tab-click 导航', 'Use to or @tab-click for route navigation'],
+                ]),
+                ...anti([
+                    ['表单选项用 MTabs → MSelectButton', 'Form options via MTabs → MSelectButton'],
+                    ['折叠面板用 MTabs → MAccordion', 'Collapse panels via MTabs → MAccordion'],
+                ]),
+            },
+            {
+                component: 'MStepper',
+                when: ['多步表单 / 流程向导', '步骤有前后依赖关系'],
+                whenEn: ['Multi-step forms / process wizards', 'Steps have sequential dependencies'],
+                avoidWhen: ['内容无顺序关系的切换', '步骤极少（2 步用对话框即可）'],
+                avoidWhenEn: ['Content switching without order', 'Very few steps (a dialog works for 2)'],
+                recipe: recipe([
+                    ['v-model 当前步骤索引', 'v-model for the current step index'],
+                    ['steps 配置每步标题 / 描述 / 图标', 'steps configures title / description / icon per step'],
+                    ['线性模式禁止跳步；非线性允许点击跳转', 'Linear mode blocks skipping; non-linear allows click jumps'],
+                    ['与 MForm 分步校验配合', 'Pair with MForm for per-step validation'],
+                ]),
+                ...anti([
+                    ['无顺序内容切换用 MStepper → MTabs', 'Unordered content via MStepper → MTabs'],
+                    ['两步确认也用 MStepper → 对话框', 'Two-step confirm via MStepper → dialog'],
+                ]),
+            },
+            {
+                component: 'MBreadcrumb',
+                when: ['展示当前页面在层级中的路径', '层级较深（≥3 层）的后台系统'],
+                whenEn: ['Showing the current page path in a hierarchy', 'Deep hierarchies (≥3 levels) in admin systems'],
+                avoidWhen: ['层级很浅（首页 → 列表页）', '移动端空间紧张'],
+                avoidWhenEn: ['Shallow hierarchy (home → list)', 'Tight mobile space'],
+                recipe: recipe([
+                    ['model 数组配置路径项（label + to / icon）', 'model array configures path items (label + to / icon)'],
+                    ['首页项常用 home 图标', 'The home item often uses a home icon'],
+                    ['与 MPageHeader #breadcrumb 插槽配合', 'Pairs with MPageHeader #breadcrumb slot'],
+                ]),
+                ...anti([
+                    ['层级浅硬套 MBreadcrumb → 去掉', 'Shallow hierarchy with MBreadcrumb → remove it'],
+                    ['用 MBreadcrumb 代替 Tabs 切换 → MTabs', 'Using MBreadcrumb as tab switching → MTabs'],
+                ]),
+            },
+        ],
+    },
+    {
+        id: 'date-input-choice',
+        title: '日期时间输入如何选择',
+        titleEn: 'Choosing date and time inputs',
+        question: '这是表单内选择日期 / 时间，还是整月视图展示与选择？',
+        questionEn: 'Is this picking a date / time in a form, or displaying and selecting on a full calendar?',
+        keywords: [
+            '日期',
+            '时间',
+            '日历',
+            '范围',
+            'date',
+            'time',
+            'calendar',
+            'datepicker',
+            'timepicker',
+            'range',
+            '月份',
+            '年份',
+        ],
+        options: [
+            {
+                component: 'MDatePicker',
+                when: ['表单内选择日期 / 日期时间 / 月份 / 年份', '需要范围选择或快捷选项'],
+                whenEn: ['Picking date / datetime / month / year in a form', 'Range selection or shortcuts are needed'],
+                avoidWhen: ['需要整月视图展示事件', '只需要选时间'],
+                avoidWhenEn: ['A full calendar view is needed for events', 'Only time selection is needed'],
+                recipe: recipe([
+                    ['type="date"（默认）/ daterange / datetime / datetimerange / month / year', 'type="date" (default) / daterange / datetime / datetimerange / month / year'],
+                    ['shortcuts 预设快捷选项（今天 / 最近 7 天…）', 'shortcuts for presets (today / last 7 days…)'],
+                    ['needConfirm 用于 datetime / time，避免误触提交', 'needConfirm for datetime / time to avoid accidental commits'],
+                    ['mask 允许手动输入并自动补分隔符', 'mask allows manual entry with auto separators'],
+                    ['fluid 表单内占满宽度', 'fluid for full width in forms'],
+                ], undefined, [['@change 提交选择（含 clear 以外的所有变更）', '@change commits the selection (all changes except clear)']]),
+                ...anti([
+                    ['整月事件展示用 MDatePicker → MCalendar', 'Full-month event display via MDatePicker → MCalendar'],
+                    ['只需要时间用 MDatePicker type="time" → MTimePicker', 'Time-only via MDatePicker type="time" → MTimePicker'],
+                ]),
+            },
+            {
+                component: 'MTimePicker',
+                when: ['只需要选择时间（小时 / 分钟 / 秒）'],
+                whenEn: ['Only time selection is needed (hour / minute / second)'],
+                avoidWhen: ['需要同时选日期', '需要整月视图'],
+                avoidWhenEn: ['Date selection is also needed', 'A full calendar view is needed'],
+                recipe: recipe([
+                    ['复用 MDatePicker props，type 固定为 time', 'Reuses MDatePicker props with type fixed to time'],
+                    ['showSeconds 显示秒', 'showSeconds for seconds'],
+                    ['needConfirm 推荐开启，避免滚动误触', 'needConfirm recommended to avoid scroll accidents'],
+                ]),
+                ...anti([['日期时间混合用 MTimePicker → MDatePicker type="datetime"', 'Date+time via MTimePicker → MDatePicker type="datetime"']]),
+            },
+            {
+                component: 'MCalendar',
+                when: ['整月视图展示事件 / 排班 / 标记日期', '需要自定义日期单元格内容'],
+                whenEn: ['Full-month view for events / schedules / date marking', 'Custom date cell content is needed'],
+                avoidWhen: ['表单内紧凑选择日期', '空间紧张'],
+                avoidWhenEn: ['Compact date picking in a form', 'Space is tight'],
+                recipe: recipe([
+                    ['v-model 选中日期；mode="month"（默认）或 "year"', 'v-model for the selected date; mode="month" (default) or "year"'],
+                    ['fullscreen 占满容器；false 为紧凑卡片', 'fullscreen fills the container; false for a compact card'],
+                    ['#dateCell 自定义日期内容（事件标记）', '#dateCell customizes cell content (event markers)'],
+                    ['disabledDate / validRange 限制可选范围', 'disabledDate / validRange constrains selectable dates'],
+                ], [
+                    ['#dateCell 自定义日期单元格', '#dateCell for custom date cells'],
+                    ['#header 自定义头部（含年月切换）', '#header for a custom header (with year/month switch)'],
+                ], [['@panelChange 面板切换（年月 / 模式）', '@panelChange on panel switch (year/month / mode)']]),
+                ...anti([
+                    ['表单内紧凑日期选择用 MCalendar → MDatePicker', 'Compact form date via MCalendar → MDatePicker'],
+                    ['简单日期选择也写 #dateCell → 先用默认', 'Custom #dateCell for simple picking → use default first'],
+                ]),
+            },
+        ],
+    },
+    {
+        id: 'media-display-choice',
+        title: '轮播、画廊、时间线、评分如何选择',
+        titleEn: 'Choosing carousel, gallery, timeline, or rating',
+        question: '这是内容轮播、图片画廊、事件流，还是用户评分？',
+        questionEn: 'Is this a content carousel, an image gallery, an event stream, or a user rating?',
+        keywords: [
+            '轮播',
+            '画廊',
+            '时间线',
+            '评分',
+            'carousel',
+            'gallery',
+            'timeline',
+            'rating',
+            '图片展示',
+            '事件流',
+        ],
+        options: [
+            {
+                component: 'MCarousel',
+                when: ['内容轮播（不限图片，卡片 / 图文混排）', '需要箭头 / 指示点 / 自动播放'],
+                whenEn: ['Content carousel (not just images; cards / mixed content)', 'Arrows / dots / autoplay are needed'],
+                avoidWhen: ['纯图片展示且需要缩略图', '垂直滚动列表'],
+                avoidWhenEn: ['Pure image display with thumbnails', 'A vertical scrolling list'],
+                recipe: recipe([
+                    ['MCarouselItem 包每页内容', 'MCarouselItem wraps each slide'],
+                    ['effect="slide"（默认）/ fade / card', 'effect="slide" (default) / fade / card'],
+                    ['autoplay + interval 自动播放；loop 循环', 'autoplay + interval for auto-play; loop for infinite'],
+                    ['slidesPerView 一次显示多页', 'slidesPerView for multiple visible slides'],
+                ], undefined, [['@update:currentIndex 切换页码', '@update:currentIndex on slide change']]),
+                ...anti([
+                    ['纯图片展示用 MCarousel → MGallery', 'Pure image display via MCarousel → MGallery'],
+                    ['垂直滚动列表用 MCarousel direction="vertical" → 普通滚动', 'Vertical list via MCarousel → normal scroll'],
+                ]),
+            },
+            {
+                component: 'MGallery',
+                when: ['纯图片展示（产品图 / 相册）', '需要缩略图 + 点击预览'],
+                whenEn: ['Pure image display (product photos / albums)', 'Thumbnails + click-to-preview are needed'],
+                avoidWhen: ['内容不限于图片', '需要自动播放'],
+                avoidWhenEn: ['Content is not only images', 'Autoplay is needed'],
+                recipe: recipe([
+                    ['images 传 URL 数组或 { src, alt, caption } 对象', 'images takes URLs or { src, alt, caption } objects'],
+                    ['点击主图进入预览模式', 'Click the main image to enter preview'],
+                    ['缩略图条自动同步', 'The thumbnail strip syncs automatically'],
+                ]),
+                ...anti([
+                    ['图文混排轮播用 MGallery → MCarousel', 'Mixed content carousel via MGallery → MCarousel'],
+                    ['单张图片预览用 MGallery → MImage', 'Single image preview via MGallery → MImage'],
+                ]),
+            },
+            {
+                component: 'MTimeline',
+                when: ['事件流 / 物流跟踪 / 操作记录', '需要按时间顺序展示状态变化'],
+                whenEn: ['Event streams / logistics tracking / activity logs', 'Status changes shown in time order'],
+                avoidWhen: ['静态步骤流程（用 MStepper）', '无时间属性的普通列表'],
+                avoidWhenEn: ['Static step flows (use MStepper)', 'Plain lists without time attributes'],
+                recipe: recipe([
+                    ['value 数组配置事件（status / content / date / icon / type）', 'value array configures events (status / content / date / icon / type)'],
+                    ['layout="vertical"（默认）或 "horizontal"', 'layout="vertical" (default) or "horizontal"'],
+                    ['align="alternate" 左右交错', 'align="alternate" for alternating sides'],
+                    ['pending 显示待续节点', 'pending shows a trailing pending node'],
+                ], [['#content 自定义事件内容', '#content for custom event content']]),
+                ...anti([
+                    ['静态步骤流程用 MTimeline → MStepper', 'Static step flow via MTimeline → MStepper'],
+                    ['普通列表用 MTimeline → MList', 'Plain list via MTimeline → MList'],
+                ]),
+            },
+            {
+                component: 'MRating',
+                when: ['用户评分（商品 / 服务 / 内容）', '需要半星或只读展示'],
+                whenEn: ['User ratings (products / services / content)', 'Half-star or read-only display is needed'],
+                avoidWhen: ['需要输入精确数值', '需要调节设置'],
+                avoidWhenEn: ['Exact numeric input is required', 'A setting needs adjustment'],
+                recipe: recipe([
+                    ['v-model 数值；stars 总星数', 'v-model number; stars for total count'],
+                    ['allowHalf 允许 0.5 步进', 'allowHalf for 0.5 increments'],
+                    ['readonly 只读展示（评价列表）', 'readonly for display-only (review lists)'],
+                    ['allowClear 允许清除评分', 'allowClear to reset the rating'],
+                ]),
+                ...anti([
+                    ['精确数值输入用 MRating → MInputNumber', 'Exact numeric input via MRating → MInputNumber'],
+                    ['设置调节用 MRating → MSlider / MKnob', 'Setting adjustment via MRating → MSlider / MKnob'],
+                ]),
+            },
+        ],
+    },
+    {
+        id: 'specialized-display-choice',
+        title: '水印、二维码、引导、终端如何选择',
+        titleEn: 'Choosing watermark, QR code, tour, or terminal',
+        question: '这是防泄露水印、扫码链接、新功能引导，还是日志终端？',
+        questionEn: 'Is this a leak-prevention watermark, a scannable link, a feature tour, or a log terminal?',
+        keywords: [
+            '水印',
+            '二维码',
+            '引导',
+            '终端',
+            'watermark',
+            'qrcode',
+            'tour',
+            'terminal',
+            '防泄露',
+            '扫码',
+            '新功能',
+        ],
+        options: [
+            {
+                component: 'MWatermark',
+                when: ['页面或区域需要防泄露水印', '内部系统敏感信息保护'],
+                whenEn: ['A page or region needs a leak-prevention watermark', 'Sensitive info protection in internal systems'],
+                avoidWhen: ['公开营销页面', '水印会遮挡核心内容'],
+                avoidWhenEn: ['Public marketing pages', 'The watermark would obscure core content'],
+                recipe: recipe([
+                    ['content 单行或多行文字水印', 'content for single or multi-line text'],
+                    ['image 图片水印（logo）', 'image for a logo watermark'],
+                    ['rotate / gap / offset 控制布局', 'rotate / gap / offset for layout'],
+                    ['inherit 子元素继承水印', 'inherit lets children inherit the watermark'],
+                ]),
+                ...anti([
+                    ['公开页面加水印 → 去掉', 'Watermark on a public page → remove it'],
+                    ['核心内容被水印遮挡 → 调低透明度或局部使用', 'Core content obscured → lower opacity or scope it'],
+                ]),
+            },
+            {
+                component: 'MQRCode',
+                when: ['生成扫码链接 / 分享码', '需要展示二维码状态（过期 / 加载）'],
+                whenEn: ['Generating scannable links / share codes', 'QR code status display is needed (expired / loading)'],
+                avoidWhen: ['需要扫码识别（那是摄像头功能）', '需要条形码'],
+                avoidWhenEn: ['Scanning recognition is needed (that is camera work)', 'A barcode is needed'],
+                recipe: recipe([
+                    ['value 二维码内容（URL / 文本）', 'value for the QR content (URL / text)'],
+                    ['errorLevel="H" 高容错（允许 logo 覆盖）', 'errorLevel="H" for high fault tolerance (allows logo overlay)'],
+                    ['icon 中心 logo', 'icon for a center logo'],
+                    ['status="expired" 过期遮罩 + @refresh 刷新', 'status="expired" for an expired mask + @refresh'],
+                ]),
+                ...anti([
+                    ['需要条形码用 MQRCode → 专用条形码库', 'Barcode via MQRCode → use a dedicated barcode library'],
+                ]),
+            },
+            {
+                component: 'MTour',
+                when: ['新功能引导 / 首次使用教学', '需要高亮页面元素并解释'],
+                whenEn: ['New feature onboarding / first-use tutorials', 'Highlighting page elements with explanations'],
+                avoidWhen: ['常规帮助文档', '用户已熟悉的功能'],
+                avoidWhenEn: ['Regular help documentation', 'Features the user already knows'],
+                recipe: recipe([
+                    ['steps 配置每步标题 / 描述 / target 元素', 'steps configures title / description / target per step'],
+                    ['v-model:open 控制显示；v-model:current 当前步骤', 'v-model:open for visibility; v-model:current for the step'],
+                    ['mask 遮罩背景突出聚焦元素', 'mask dims the background to spotlight the target'],
+                    ['@finish 完成引导；@close 提前关闭', '@finish on completion; @close on early exit'],
+                ], undefined, [['@change 步骤切换', '@change on step switch']]),
+                ...anti([
+                    ['常规帮助用 MTour → 文档 / Tooltip', 'Regular help via MTour → docs / Tooltip'],
+                    ['步骤过多（>5）→ 拆分或改为文档', 'Too many steps (>5) → split or use docs'],
+                ]),
+            },
+            {
+                component: 'MTerminal',
+                when: ['实时日志展示 / 命令执行回显', '需要模拟终端外观'],
+                whenEn: ['Real-time log display / command echo', 'A terminal look is needed'],
+                avoidWhen: ['普通代码展示（用 CodePreview / pre）', '需要复杂文本编辑'],
+                avoidWhenEn: ['Plain code display (use CodePreview / pre)', 'Complex text editing is needed'],
+                recipe: recipe([
+                    ['content 日志文本；支持 ANSI 颜色', 'content for log text; ANSI colors supported'],
+                    ['readonly 纯展示；非 readonly 可输入命令', 'readonly for display-only; otherwise commands can be entered'],
+                    ['@command 执行自定义命令处理', '@command for custom command handling'],
+                ]),
+                ...anti([
+                    ['普通代码块用 MTerminal → pre / code', 'Plain code block via MTerminal → pre / code'],
+                    ['复杂编辑用 MTerminal → Monaco / CodeMirror', 'Complex editing via MTerminal → Monaco / CodeMirror'],
+                ]),
+            },
+        ],
+    },
+    {
+        id: 'form-label-choice',
+        title: '表单标签样式如何选择',
+        titleEn: 'Choosing form label styles',
+        question: '这是传统上方标签、紧凑浮动标签，还是无边框内嵌标签？',
+        questionEn: 'Is this a traditional top label, a compact floating label, or a borderless inline label?',
+        keywords: [
+            '标签',
+            '浮动标签',
+            'floatlabel',
+            'label',
+            '表单布局',
+            '紧凑',
+            'inplace',
+        ],
+        options: [
+            {
+                component: 'MFloatLabel',
+                when: ['空间紧张的现代表单', '需要输入框 label 浮动效果'],
+                whenEn: ['Space-constrained modern forms', 'A floating label effect on inputs is needed'],
+                avoidWhen: ['传统后台表单（label 在上更清晰）', '需要帮助文本或错误提示常驻'],
+                avoidWhenEn: ['Traditional admin forms (top label is clearer)', 'Help text or error messages need to persist'],
+                recipe: recipe([
+                    ['label 属性设置浮动标签文案', 'label prop sets the floating label copy'],
+                    ['包裹 MInput / MSelect 等控件', 'Wraps MInput / MSelect etc.'],
+                    ['与 variant="filled" / "outlined" 控件配合', 'Pairs with variant="filled" / "outlined" controls'],
+                ]),
+                ...anti([
+                    ['传统后台表单硬套 MFloatLabel → 默认 label', 'Traditional admin form with MFloatLabel → default label'],
+                    ['需要常驻帮助文本仍用 MFloatLabel → 传统 label + helpText', 'Persistent help text with MFloatLabel → traditional label + helpText'],
+                ]),
+            },
+            {
+                component: 'MInplace',
+                when: ['详情页点击编辑单字段', '浏览模式为主，编辑是例外'],
+                whenEn: ['Click-to-edit single fields on detail pages', 'Read mode is primary; edit is the exception'],
+                avoidWhen: ['表单页批量编辑', '需要校验的必填字段'],
+                avoidWhenEn: ['Batch editing on a form page', 'Required fields needing validation'],
+                recipe: recipe([
+                    ['display 插槽展示态；content 插槽编辑态', 'display slot for read mode; content slot for edit mode'],
+                    ['closable 编辑态显示关闭按钮', 'closable shows a close button in edit mode'],
+                    ['@open / @close 控制编辑态切换', '@open / @close for edit mode toggle'],
+                ]),
+                ...anti([
+                    ['表单页批量编辑用 MInplace → MForm', 'Batch editing via MInplace → MForm'],
+                    ['必填校验字段用 MInplace → MFormItem + errorMessage', 'Required validated field via MInplace → MFormItem + errorMessage'],
+                ]),
+            },
+        ],
+    },
+    {
+        id: 'specialized-input-choice',
+        title: '旋钮、进度输入如何选择',
+        titleEn: 'Choosing knob, meter, or progress inputs',
+        question: '这是仪表盘式调节、多段进度展示，还是确定进度条？',
+        questionEn: 'Is this a dial-style adjustment, a multi-segment progress display, or a determinate progress bar?',
+        keywords: [
+            '旋钮',
+            '仪表盘',
+            '进度',
+            'knob',
+            'meter',
+            'progress',
+            '调节',
+            '阈值',
+        ],
+        options: [
+            {
+                component: 'MKnob',
+                when: ['仪表盘式数值调节（阈值 / 音量 / 参数）', '视觉化调节比精确输入更重要'],
+                whenEn: ['Dial-style value adjustment (threshold / volume / params)', 'Visual adjustment matters more than exact input'],
+                avoidWhen: ['需要精确数值输入', '范围选择'],
+                avoidWhenEn: ['Exact numeric input is required', 'A range selection is needed'],
+                recipe: recipe([
+                    ['v-model 数值；min / max / step 控制范围', 'v-model number; min / max / step for the range'],
+                    ['diameter 控制表盘大小', 'diameter for the dial size'],
+                    ['valueTemplate="{value}%" 自定义显示格式', 'valueTemplate="{value}%" for custom display'],
+                    ['ariaLabel 提供可访问名称', 'ariaLabel for the accessible name'],
+                ]),
+                ...anti([
+                    ['精确数值输入用 MKnob → MInputNumber', 'Exact numeric input via MKnob → MInputNumber'],
+                    ['范围选择用 MKnob → MSlider', 'Range selection via MKnob → MSlider'],
+                ]),
+            },
+            {
+                component: 'MMeterGroup',
+                when: ['多段进度展示（磁盘分区 / 预算分配）', '需要图例 + 百分比标签'],
+                whenEn: ['Multi-segment progress display (disk partitions / budget allocation)', 'Legend + percentage labels are needed'],
+                avoidWhen: ['单段进度', '需要交互调节'],
+                avoidWhenEn: ['Single-segment progress', 'Interactive adjustment is needed'],
+                recipe: recipe([
+                    ['value 数组配置各段（label / value / color）', 'value array configures segments (label / value / color)'],
+                    ['labelTemplate 自定义标签格式', 'labelTemplate for custom label format'],
+                    ['max 总量（默认 100）', 'max for the total (default 100)'],
+                ]),
+                ...anti([
+                    ['单段进度用 MMeterGroup → MProgressBar', 'Single-segment progress via MMeterGroup → MProgressBar'],
+                    ['交互调节用 MMeterGroup → MSlider / MKnob', 'Interactive adjustment via MMeterGroup → MSlider / MKnob'],
+                ]),
+            },
+        ],
+    },
+    {
+        id: 'segmented-tabs-choice',
+        title: '选项切换控件如何选择',
+        titleEn: 'Choosing segmented, tabs, or select button',
+        question: '这是视图/状态切换、内容面板切换，还是表单内选择？',
+        questionEn: 'Is this a view/state switch, a content panel switch, or a form selection?',
+        keywords: [
+            '切换',
+            '选项',
+            'segmented',
+            'tabs',
+            'selectbutton',
+            '视图切换',
+            '状态切换',
+        ],
+        options: [
+            {
+                component: 'MSegmented',
+                when: ['选项少（≤5）且需要全部露出', '切换视图 / 状态 / 密度等即时生效'],
+                whenEn: ['Few options (≤5) that should all stay visible', 'Switching views / states / density with instant effect'],
+                avoidWhen: ['选项很多需要滚动', '需要表单提交值'],
+                avoidWhenEn: ['Many options need scrolling', 'A form-submitted value is needed'],
+                recipe: recipe([
+                    ['v-model 绑定当前值', 'v-model for the current value'],
+                    ['options 传字符串数组或 { label, value, icon }', 'options as strings or { label, value, icon } objects'],
+                    ['block 占满容器宽度', 'block for full container width'],
+                    ['shape="round" 圆角药丸外观', 'shape="round" for pill corners'],
+                ]),
+                ...anti([
+                    ['内容面板切换用 MSegmented → MTabs', 'Content panel switch via MSegmented → MTabs'],
+                    ['表单提交值用 MSegmented → MSelectButton', 'Form value via MSegmented → MSelectButton'],
+                ]),
+            },
+            {
+                component: 'MTabs',
+                when: ['多个内容面板切换显示', '标签数量多时可滚动'],
+                whenEn: ['Switching between multiple content panels', 'Many tabs with scrolling support'],
+                avoidWhen: ['选项是表单值', '需要手风琴折叠'],
+                avoidWhenEn: ['Options are form values', 'Accordion expand/collapse is needed'],
+                recipe: recipe([
+                    ['v-model:value 控制当前标签', 'v-model:value for the active tab'],
+                    ['closable 可关闭标签', 'closable for dismissible tabs'],
+                    ['与路由结合用 to 或 @tab-click', 'Use to or @tab-click for routes'],
+                ]),
+                ...anti([
+                    ['表单选项用 MTabs → MSelectButton', 'Form options via MTabs → MSelectButton'],
+                    ['视图状态切换用 MTabs → MSegmented', 'View state switch via MTabs → MSegmented'],
+                ]),
+            },
+            {
+                component: 'MSelectButton',
+                when: ['表单内选择（需要提交值）', '选项少且需要全部露出'],
+                whenEn: ['Form selection (value to be submitted)', 'Few options all visible'],
+                avoidWhen: ['选项超过约 5 个', '切换视图状态'],
+                avoidWhenEn: ['More than about 5 options', 'Switching view states'],
+                recipe: recipe([
+                    ['v-model 绑定选中值', 'v-model for the selected value'],
+                    [':options 选项数组', ':options array'],
+                    ['与 MFormItem 一起用，参与表单校验', 'Use with MFormItem for form validation'],
+                ]),
+                ...anti([
+                    ['>5 个选项仍用 MSelectButton → MSelect', '>5 options still MSelectButton → MSelect'],
+                    ['视图切换用 MSelectButton → MSegmented', 'View switch via MSelectButton → MSegmented'],
+                ]),
+            },
+        ],
+    },
+    {
+        id: 'split-action-choice',
+        title: '主操作+更多操作如何选择',
+        titleEn: 'Choosing split button or button + dropdown',
+        question: '这是一个主操作配更多操作，还是完全自定义的按钮组？',
+        questionEn: 'Is this one primary action with more options, or a fully custom button group?',
+        keywords: [
+            '主操作',
+            '更多操作',
+            'splitbutton',
+            'dropdown',
+            'button group',
+            '保存并继续',
+        ],
+        options: [
+            {
+                component: 'MSplitButton',
+                when: ['一个高频主操作 + 低频相关操作', '如 保存 / 保存并继续 / 另存为'],
+                whenEn: ['One frequent primary action + related低频 actions', 'e.g. Save / Save and continue / Save as'],
+                avoidWhen: ['操作之间无主次关系', '需要完全自定义触发器'],
+                avoidWhenEn: ['Actions have no clear hierarchy', 'A fully custom trigger is needed'],
+                recipe: recipe([
+                    ['label 主操作文案；model 下拉操作项', 'label for primary action; model for dropdown items'],
+                    ['主按钮 @click 执行主操作', 'Primary button @click for the main action'],
+                    ['@command 执行下拉操作', '@command for dropdown actions'],
+                    ['color / variant / size 与 MButton 一致', 'color / variant / size same as MButton'],
+                ], undefined, [['@command(item) 下拉操作回调', '@command(item) for dropdown action']]),
+                ...anti([
+                    ['无主次关系操作用 MSplitButton → MButtonGroup / MSpace', 'No hierarchy via MSplitButton → MButtonGroup / MSpace'],
+                    ['完全自定义触发器用 MSplitButton → MButton + MDropdown', 'Fully custom trigger via MSplitButton → MButton + MDropdown'],
+                ]),
+            },
+            {
+                component: 'MButton + MDropdown',
+                when: ['需要完全自定义按钮组布局', '触发器不是标准按钮（图标 / 头像）'],
+                whenEn: ['Fully custom button group layout is needed', 'The trigger is not a standard button (icon / avatar)'],
+                avoidWhen: ['标准主操作+更多操作模式'],
+                avoidWhenEn: ['Standard primary + more actions pattern'],
+                recipe: recipe([
+                    ['MButton 放主操作；MDropdown 放更多操作', 'MButton for primary; MDropdown for more actions'],
+                    ['MDropdown 触发器放默认插槽', 'MDropdown trigger in default slot'],
+                    ['危险操作走 MConfirmDialog 确认', 'Destructive actions via MConfirmDialog'],
+                ]),
+                ...anti([
+                    ['标准主操作+更多用 MButton + MDropdown → MSplitButton', 'Standard primary+more via MButton + MDropdown → MSplitButton'],
+                ]),
+            },
+        ],
+    },
+    {
+        id: 'detail-display-choice',
+        title: '详情数据展示如何选择',
+        titleEn: 'Choosing descriptions, table, or list for detail display',
+        question: '这是键值对字段展示、行列数据比较，还是自由布局列表？',
+        questionEn: 'Is this key-value field display, row-column data comparison, or a free-layout list?',
+        keywords: [
+            '详情',
+            '键值对',
+            'descriptions',
+            'table',
+            'list',
+            '字段展示',
+            '数据展示',
+        ],
+        options: [
+            {
+                component: 'MDescriptions',
+                when: ['详情页字段展示（label: value 键值对）', '需要 bordered / column 控制布局'],
+                whenEn: ['Detail page field display (label: value pairs)', 'Need bordered / column layout control'],
+                avoidWhen: ['需要排序 / 筛选 / 行操作', '需要自由布局列表项'],
+                avoidWhenEn: ['Sorting / filtering / row actions are needed', 'Free-layout list items are needed'],
+                recipe: recipe([
+                    ['MDescriptions 包裹 MDescriptionsItem', 'MDescriptions wraps MDescriptionsItem'],
+                    ['column 每行列数；bordered 显示边框', 'column for items per row; bordered for borders'],
+                    ['layout="horizontal"（默认）或 "vertical"', 'layout="horizontal" (default) or "vertical"'],
+                    ['#label 自定义标签内容', '#label for custom label content'],
+                ], [['MDescriptionsItem label 字段名；span 跨列', 'MDescriptionsItem label for field name; span for colspan']]),
+                ...anti([
+                    ['需要排序筛选用 MDescriptions → MTable', 'Sorting/filtering via MDescriptions → MTable'],
+                    ['自由布局列表用 MDescriptions → MList', 'Free-layout list via MDescriptions → MList'],
+                ]),
+            },
+            {
+                component: 'MTable',
+                when: ['行列数据比较多条记录', '需要排序 / 筛选 / 行操作'],
+                whenEn: ['Comparing multiple records in rows and columns', 'Sorting / filtering / row actions are needed'],
+                avoidWhen: ['单条记录的字段展示', '自由布局列表项'],
+                avoidWhenEn: ['Single record field display', 'Free-layout list items'],
+                recipe: recipe([
+                    ['columns + rows 定义数据结构', 'columns + rows for data structure'],
+                    ['#cell-{key} 自定义单元格', '#cell-{key} for custom cells'],
+                    ['paginator 分页；selectionMode 行选择', 'paginator for paging; selectionMode for selection'],
+                ]),
+                ...anti([
+                    ['单条记录字段展示用 MTable → MDescriptions', 'Single record fields via MTable → MDescriptions'],
+                ]),
+            },
+            {
+                component: 'MList',
+                when: ['自由布局列表项（头像+标题+描述+操作）', '需要分页或 grid 布局'],
+                whenEn: ['Free-layout list items (avatar + title + description + actions)', 'Pagination or grid layout is needed'],
+                avoidWhen: ['键值对字段展示', '需要排序筛选'],
+                avoidWhenEn: ['Key-value field display', 'Sorting/filtering is needed'],
+                recipe: recipe([
+                    ['MList 包裹 MListItem；MListItemMeta 带头像标题描述', 'MList wraps MListItem; MListItemMeta for avatar/title/description'],
+                    ['pagination 配置分页；grid 配置网格布局', 'pagination for paging; grid for grid layout'],
+                    ['#actions 列表项操作按钮', '#actions for item action buttons'],
+                ], [['MListItem #actions 操作区', 'MListItem #actions for action area']]),
+                ...anti([
+                    ['键值对字段展示用 MList → MDescriptions', 'Key-value fields via MList → MDescriptions'],
+                ]),
+            },
+        ],
+    },
+    {
+        id: 'collapse-container-choice',
+        title: '折叠容器如何选择',
+        titleEn: 'Choosing accordion, panel, or card',
+        question: '这是多面板手风琴、单个可折叠区块，还是独立视觉表面？',
+        questionEn: 'Is this a multi-panel accordion, a single collapsible section, or an independent visual surface?',
+        keywords: [
+            '折叠',
+            '手风琴',
+            'accordion',
+            'panel',
+            'card',
+            '容器',
+        ],
+        options: [
+            {
+                component: 'MAccordion',
+                when: ['多面板手风琴展开/收起', 'FAQ / 设置分组 / 多段内容'],
+                whenEn: ['Multi-panel accordion expand/collapse', 'FAQ / settings groups / multi-section content'],
+                avoidWhen: ['单个可折叠区块', '不需要折叠的独立表面'],
+                avoidWhenEn: ['A single collapsible section', 'An independent surface without collapse'],
+                recipe: recipe([
+                    ['tabs 配置每面板（value / header / disabled）', 'tabs configures each panel (value / header / disabled)'],
+                    ['v-model 控制展开的面板 key（数组 multiple）', 'v-model for expanded panel keys (array for multiple)'],
+                    ['multiple 允许多面板同时展开', 'multiple for multiple open panels'],
+                ], undefined, [['@update:modelValue 展开状态变化', '@update:modelValue on expand change']]),
+                ...anti([
+                    ['单个折叠区块用 MAccordion → MPanel', 'Single collapsible section via MAccordion → MPanel'],
+                    ['不需要折叠用 MAccordion → MCard', 'No collapse needed via MAccordion → MCard'],
+                ]),
+            },
+            {
+                component: 'MPanel',
+                when: ['单个可折叠区块', '需要标题 + 展开/收起'],
+                whenEn: ['A single collapsible section', 'Need header + expand/collapse'],
+                avoidWhen: ['多面板手风琴', '独立视觉表面'],
+                avoidWhenEn: ['Multi-panel accordion', 'Independent visual surface'],
+                recipe: recipe([
+                    ['header 面板标题', 'header for the panel title'],
+                    ['toggleable 开启折叠功能', 'toggleable to enable collapse'],
+                    ['v-model:collapsed 控制折叠状态', 'v-model:collapsed for collapse state'],
+                ], undefined, [['@update:collapsed 折叠状态变化', '@update:collapsed on collapse change']]),
+                ...anti([
+                    ['多面板手风琴用 MPanel → MAccordion', 'Multi-panel via MPanel → MAccordion'],
+                    ['独立表面用 MPanel → MCard', 'Independent surface via MPanel → MCard'],
+                ]),
+            },
+            {
+                component: 'MCard',
+                when: ['独立视觉表面（标题 / 内容 / 页脚）', '不一定需要折叠'],
+                whenEn: ['Independent visual surface (title / content / footer)', 'Collapse is not necessarily needed'],
+                avoidWhen: ['多面板手风琴', '单个可折叠区块'],
+                avoidWhenEn: ['Multi-panel accordion', 'A single collapsible section'],
+                recipe: recipe([
+                    ['title / subtitle 头部信息', 'title / subtitle for header info'],
+                    ['shadow="always" / "hover" / "never" 控制阴影', 'shadow="always" / "hover" / "never" for shadow'],
+                    ['#header / #footer / #title 自定义区域', '#header / #footer / #title for custom areas'],
+                ]),
+                ...anti([
+                    ['需要折叠用 MCard → MPanel / MAccordion', 'Need collapse via MCard → MPanel / MAccordion'],
+                ]),
+            },
+        ],
+    },
+    {
+        id: 'sort-transfer-choice',
+        title: '排序和穿梭选择如何实现',
+        titleEn: 'Choosing order list, pick list, or plain list',
+        question: '这是单列表拖拽排序、左右穿梭选择，还是纯展示列表？',
+        questionEn: 'Is this drag-to-reorder in one list, left-right transfer selection, or a plain display list?',
+        keywords: [
+            '排序',
+            '穿梭',
+            'orderlist',
+            'picklist',
+            'list',
+            '拖拽',
+            '选择',
+        ],
+        options: [
+            {
+                component: 'MOrderList',
+                when: ['单列表拖拽排序', '需要上下移动 / 置顶 / 置底'],
+                whenEn: ['Drag-to-reorder in a single list', 'Move up/down / top/bottom actions are needed'],
+                avoidWhen: ['左右穿梭选择', '纯展示列表'],
+                avoidWhenEn: ['Left-right transfer selection', 'Plain display list'],
+                recipe: recipe([
+                    ['v-model 绑定排序后的数组', 'v-model for the reordered array'],
+                    ['dragdrop 开启拖拽（默认 true）', 'dragdrop to enable drag (default true)'],
+                    ['v-model:selection 控制选中项', 'v-model:selection for the selected item'],
+                    ['@reorder 排序后回调（含 from / to / item）', '@reorder after reorder (with from / to / item)'],
+                ], undefined, [['@reorder 排序完成回调', '@reorder after reorder']]),
+                ...anti([
+                    ['左右穿梭用 MOrderList → MPickList', 'Left-right transfer via MOrderList → MPickList'],
+                    ['纯展示用 MOrderList → MList', 'Plain display via MOrderList → MList'],
+                ]),
+            },
+            {
+                component: 'MPickList',
+                when: ['左右穿梭选择（从源到目标）', '如 权限分配 / 字段选择'],
+                whenEn: ['Left-right transfer selection (source to target)', 'e.g. permission assignment / field selection'],
+                avoidWhen: ['单列表排序', '纯展示列表'],
+                avoidWhenEn: ['Single list reorder', 'Plain display list'],
+                recipe: recipe([
+                    ['v-model:source 源列表；v-model:target 目标列表', 'v-model:source for source; v-model:target for target'],
+                    ['sourceHeader / targetHeader 列表标题', 'sourceHeader / targetHeader for list titles'],
+                    ['dataKey 唯一标识字段', 'dataKey for the unique key field'],
+                ]),
+                ...anti([
+                    ['单列表排序用 MPickList → MOrderList', 'Single list reorder via MPickList → MOrderList'],
+                    ['纯展示用 MPickList → MList', 'Plain display via MPickList → MList'],
+                ]),
+            },
+            {
+                component: 'MList',
+                when: ['纯展示列表（不支持排序 / 穿梭）', '需要分页或 grid 布局'],
+                whenEn: ['Plain display list (no reorder / transfer)', 'Pagination or grid layout is needed'],
+                avoidWhen: ['需要排序', '需要穿梭选择'],
+                avoidWhenEn: ['Reorder is needed', 'Transfer selection is needed'],
+                recipe: recipe([
+                    ['items / dataSource 数据数组', 'items / dataSource for the data array'],
+                    ['MListItem + MListItemMeta 自定义布局', 'MListItem + MListItemMeta for custom layout'],
+                    ['pagination 分页；grid 网格布局', 'pagination for paging; grid for grid layout'],
+                ]),
+                ...anti([
+                    ['需要排序用 MList → MOrderList', 'Need reorder via MList → MOrderList'],
+                    ['需要穿梭用 MList → MPickList', 'Need transfer via MList → MPickList'],
+                ]),
+            },
+        ],
+    },
+    {
+        id: 'upload-mode-choice',
+        title: '文件上传模式如何选择',
+        titleEn: 'Choosing file upload mode',
+        question: '这是选择即上传、拖拽+预览+进度，还是完全自定义上传？',
+        questionEn: 'Is this select-and-upload, drag+preview+progress, or fully custom upload?',
+        keywords: [
+            '上传',
+            '文件',
+            'fileupload',
+            '拖拽',
+            '预览',
+            '进度',
+            'basic',
+            'advanced',
+        ],
+        options: [
+            {
+                component: 'MFileUpload mode="basic"',
+                when: ['选择文件后立即上传', '不需要预览和进度展示'],
+                whenEn: ['Upload immediately after file selection', 'No preview or progress display needed'],
+                avoidWhen: ['需要拖拽上传', '需要图片预览'],
+                avoidWhenEn: ['Drag-and-drop upload is needed', 'Image preview is needed'],
+                recipe: recipe([
+                    ['action 上传地址；autoUpload 自动上传', 'action for upload URL; autoUpload for auto upload'],
+                    ['accept 限制文件类型；maxSize 限制大小', 'accept for file types; maxSize for size limit'],
+                    ['@success / @error 上传结果回调', '@success / @error for upload result'],
+                ], undefined, [['@success 上传成功', '@success on upload success']]),
+                ...anti([
+                    ['需要拖拽预览用 basic → mode="advanced"', 'Need drag/preview via basic → mode="advanced"'],
+                ]),
+            },
+            {
+                component: 'MFileUpload mode="advanced"',
+                when: ['拖拽上传 + 文件预览 + 进度展示', '图片上传需要缩略图'],
+                whenEn: ['Drag-and-drop upload + file preview + progress', 'Image upload needs thumbnails'],
+                avoidWhen: ['选择即上传的简单场景'],
+                avoidWhenEn: ['Simple select-and-upload scenarios'],
+                recipe: recipe([
+                    ['drag 开启拖拽区域', 'drag to enable the drop zone'],
+                    ['listType="picture-card" 图片缩略图卡片', 'listType="picture-card" for image thumbnails'],
+                    ['v-model:file-list 绑定文件列表', 'v-model:file-list for the file list'],
+                    ['autoUpload=false 手动控制；submit() 触发上传', 'autoUpload=false for manual control; submit() to upload'],
+                ], undefined, [
+                    ['@progress 上传进度', '@progress for upload progress'],
+                    ['@remove 移除文件', '@remove on file removal'],
+                ]),
+                ...anti([
+                    ['简单选择即上传用 advanced → mode="basic"', 'Simple select-upload via advanced → mode="basic"'],
+                    ['完全自定义上传 UI 用 advanced → httpRequest 自定义', 'Fully custom upload UI via advanced → httpRequest'],
+                ]),
+            },
+        ],
+    },
+    {
+        id: 'suggestion-input-choice',
+        title: '带建议的输入如何选择',
+        titleEn: 'Choosing autocomplete, mentions, or plain input',
+        question: '这是自由输入+下拉建议、@人/#话题提及，还是纯文本输入？',
+        questionEn: 'Is this free input with dropdown suggestions, @mention/#topic tagging, or plain text input?',
+        keywords: [
+            '自动完成',
+            '提及',
+            'autocomplete',
+            'mentions',
+            'input',
+            '建议',
+            '@人',
+        ],
+        options: [
+            {
+                component: 'MAutoComplete',
+                when: ['自由输入 + 下拉建议（搜索历史 / 邮箱后缀）', '输入值本身也有意义'],
+                whenEn: ['Free input with dropdown suggestions (search history / email suffixes)', 'The entered value is meaningful itself'],
+                avoidWhen: ['只能从固定选项选', '需要 @人 / #话题'],
+                avoidWhenEn: ['Selection must be from fixed options', '@mention / #topic is needed'],
+                recipe: recipe([
+                    ['v-model 绑定输入值', 'v-model for the input value'],
+                    ['suggestions 建议数组（字符串或 { label, value }）', 'suggestions array (strings or { label, value })'],
+                    ['@complete 输入时拉取建议（支持远程）', '@complete to fetch suggestions on input (supports remote)'],
+                    ['loading 建议加载中状态', 'loading for suggestion loading state'],
+                ], undefined, [['@complete 输入变化时拉取建议', '@complete to fetch suggestions on input']]),
+                ...anti([
+                    ['固定选项用 MAutoComplete → MSelect', 'Fixed options via MAutoComplete → MSelect'],
+                    ['@人 / #话题用 MAutoComplete → MMentions', '@mention/#topic via MAutoComplete → MMentions'],
+                ]),
+            },
+            {
+                component: 'MMentions',
+                when: ['@人 / #话题触发下拉选择', '社交 / 协作场景'],
+                whenEn: ['@mention / #topic triggers dropdown selection', 'Social / collaboration scenarios'],
+                avoidWhen: ['自由输入建议', '纯文本输入'],
+                avoidWhenEn: ['Free input suggestions', 'Plain text input'],
+                recipe: recipe([
+                    ['v-model 绑定输入值', 'v-model for the input value'],
+                    ['options 提及选项数组', 'options for mention candidates'],
+                    ['prefix="@" 触发字符（可数组多个）', 'prefix="@" trigger character (array for multiple)'],
+                    ['split 插入后追加字符（默认空格）', 'split for appended character after selection'],
+                ], undefined, [['@select 选中提及项', '@select on mention selection']]),
+                ...anti([
+                    ['自由输入建议用 MMentions → MAutoComplete', 'Free suggestions via MMentions → MAutoComplete'],
+                    ['纯文本输入用 MMentions → MInput', 'Plain text via MMentions → MInput'],
+                ]),
+            },
+        ],
+    },
+    {
+        id: 'number-input-choice',
+        title: '数值输入方式如何选择',
+        titleEn: 'Choosing number input, slider, or knob',
+        question: '这是精确数值输入、范围调节，还是仪表盘式调节？',
+        questionEn: 'Is this exact numeric input, range adjustment, or dial-style adjustment?',
+        keywords: [
+            '数值',
+            '数字',
+            'inputnumber',
+            'slider',
+            'knob',
+            '精确',
+            '范围',
+            '调节',
+        ],
+        options: [
+            {
+                component: 'MInputNumber',
+                when: ['需要精确数值输入', '需要 min/max/step 约束'],
+                whenEn: ['Exact numeric input is required', 'min/max/step constraints are needed'],
+                avoidWhen: ['范围调节', '仪表盘式调节'],
+                avoidWhenEn: ['Range adjustment', 'Dial-style adjustment'],
+                recipe: recipe([
+                    ['v-model 绑定数值', 'v-model for the number'],
+                    ['min / max / step 控制范围步进', 'min / max / step for range and step'],
+                    ['showButtons 显示加减按钮', 'showButtons for increment/decrement buttons'],
+                    ['precision 小数位数', 'precision for decimal places'],
+                ]),
+                ...anti([
+                    ['范围调节用 MInputNumber → MSlider', 'Range adjustment via MInputNumber → MSlider'],
+                    ['仪表盘调节用 MInputNumber → MKnob', 'Dial adjustment via MInputNumber → MKnob'],
+                ]),
+            },
+            {
+                component: 'MSlider',
+                when: ['范围调节（音量 / 价格区间 / 阈值）', '视觉化比例比精确数值更重要'],
+                whenEn: ['Range adjustment (volume / price range / threshold)', 'Visual proportion matters more than exact value'],
+                avoidWhen: ['需要精确输入', '单点精确值'],
+                avoidWhenEn: ['Exact input is required', 'A single exact value is needed'],
+                recipe: recipe([
+                    ['v-model 数值或 range 数组', 'v-model number or range array'],
+                    ['min / max / step 控制范围', 'min / max / step for the range'],
+                    ['marks 显示刻度标签', 'marks for tick labels'],
+                    ['tooltip 拖拽时显示当前值', 'tooltip shows value while dragging'],
+                ]),
+                ...anti([
+                    ['精确输入用 MSlider → MInputNumber', 'Exact input via MSlider → MInputNumber'],
+                    ['仪表盘调节用 MSlider → MKnob', 'Dial adjustment via MSlider → MKnob'],
+                ]),
+            },
+            {
+                component: 'MKnob',
+                when: ['仪表盘式数值调节（阈值 / 参数）', '视觉化调节比精确输入更重要'],
+                whenEn: ['Dial-style value adjustment (threshold / params)', 'Visual adjustment matters more than exact input'],
+                avoidWhen: ['需要精确输入', '范围选择'],
+                avoidWhenEn: ['Exact input is required', 'Range selection is needed'],
+                recipe: recipe([
+                    ['v-model 绑定数值', 'v-model for the number'],
+                    ['min / max / step 控制范围', 'min / max / step for the range'],
+                    ['diameter 控制表盘大小', 'diameter for the dial size'],
+                    ['valueTemplate="{value}%" 自定义显示', 'valueTemplate="{value}%" for custom display'],
+                ]),
+                ...anti([
+                    ['精确输入用 MKnob → MInputNumber', 'Exact input via MKnob → MInputNumber'],
+                    ['范围选择用 MKnob → MSlider', 'Range selection via MKnob → MSlider'],
+                ]),
+            },
+        ],
+    },
+    {
+        id: 'large-data-choice',
+        title: '大数据量列表渲染策略',
+        titleEn: 'Choosing large data rendering strategy',
+        question: '这是万级数据虚拟滚动，还是普通数据量的直接渲染？',
+        questionEn: 'Is this virtual scrolling for 10k+ items, or direct rendering for normal data volume?',
+        keywords: [
+            '大数据',
+            '虚拟滚动',
+            'virtualscroller',
+            '性能',
+            '万级',
+            '渲染优化',
+        ],
+        options: [
+            {
+                component: 'MVirtualScroller',
+                when: ['万级以上数据列表', '需要固定 itemSize 优化渲染'],
+                whenEn: ['Lists with 10k+ items', 'Fixed itemSize for render optimization'],
+                avoidWhen: ['数据量小（<1000）', '需要复杂动态高度'],
+                avoidWhenEn: ['Small data volume (<1000)', 'Complex dynamic heights are needed'],
+                recipe: recipe([
+                    ['items 数据数组；itemSize 固定高度（px）', 'items for data; itemSize for fixed height (px)'],
+                    ['height 可视区域高度', 'height for the viewport height'],
+                    ['buffer 上下缓冲数量（减少白屏）', 'buffer for overscan items (reduces blank areas)'],
+                    ['scrollToIndex 编程滚动到指定项', 'scrollToIndex for programmatic scrolling'],
+                ], [['#item 自定义列表项内容', '#item for custom item content']]),
+                ...anti([
+                    ['小数据量用 MVirtualScroller → 普通 v-for / MList', 'Small data via MVirtualScroller → plain v-for / MList'],
+                    ['动态高度列表用 MVirtualScroller → 需要固定 itemSize', 'Dynamic heights via MVirtualScroller → fixed itemSize required'],
+                ]),
+            },
+            {
+                component: '普通 v-for / MList',
+                when: ['数据量小（<1000）', '需要复杂动态高度布局'],
+                whenEn: ['Small data volume (<1000)', 'Complex dynamic height layouts are needed'],
+                avoidWhen: ['万级以上数据', '性能敏感场景'],
+                avoidWhenEn: ['10k+ items', 'Performance-sensitive scenarios'],
+                recipe: recipe([
+                    ['MList items / dataSource 直接渲染', 'MList items / dataSource for direct rendering'],
+                    ['v-for 自定义模板渲染', 'v-for for custom template rendering'],
+                    ['无需 itemSize 约束', 'No itemSize constraint needed'],
+                ]),
+                ...anti([
+                    ['万级数据用普通 v-for → MVirtualScroller', '10k+ items via plain v-for → MVirtualScroller'],
+                ]),
+            },
+        ],
+    },
 ];
 export function findDecision(name) {
     const key = name.trim().toLowerCase().replace(/[-_\s]/g, '');