config.yaml

# MCP极简代码规范引导器配置文件
version: "2.2.0"
name: "MCP极简代码规范引导器"
description: "基于MCP协议的极简代码规范引导工具"

# 上下文关键词到规范提示词的直接映射
standards_mapping:
  # ===== 命名规范 =====

  # 目录命名
  "目录命名": "目录全部采用小写方式，以中划线分隔，有复数结构时采用复数命名法，例如：styles、scripts、components、images、utils、layouts、docs、demo-styles"
  "directory naming": "目录全部采用小写方式，以中划线分隔，有复数结构时采用复数命名法，例如：styles、scripts、components、images、utils、layouts、docs、demo-styles"
  "pages目录": "React项目中pages内的模块目录命名使用大驼峰式命名，例如：Login、Register"

  # 文件命名
  "文件命名": "文件全部采用小写方式，名称为多个单词时以中划线分割，例如：index.tsx、index.less、test.ts、test.js、test-demo.html、icon-upload.png"
  "file naming": "文件全部采用小写方式，名称为多个单词时以中划线分割，例如：index.tsx、index.less、test.ts、test.js、test-demo.html、icon-upload.png"

  # 组件命名
  "组件命名": "组件使用大驼峰命名，例如：SearchHead、Title，可使用文件夹嵌套"
  "component naming": "组件使用大驼峰命名，例如：SearchHead、Title，可使用文件夹嵌套"

  # 变量/函数命名
  "变量命名": "变量使用小驼峰命名，例如：const name = 'xxx'、let cacheParams = {}，布尔类型需要标识前缀如has、is、can、whether、should等"
  "函数命名": "函数使用小驼峰命名，使用动词或动词+名词形式，例如：handleClick、getTitle，增删改查使用addXXX、deleteXXX、updateXXX、getXXX"
  "variable naming": "变量使用小驼峰命名，例如：const name = 'xxx'、let cacheParams = {}，布尔类型需要标识前缀如has、is、can、whether、should等"
  "function naming": "函数使用小驼峰命名，使用动词或动词+名词形式，例如：handleClick、getTitle，增删改查使用addXXX、deleteXXX、updateXXX、getXXX"
  "数组命名": "数组/集合等复数形式最好以s或list等能够标识复数形式的后缀结尾，例如：const menus = []、const permissionList = []"

  # 常量命名
  "常量命名": "常量全部大写，使用下划线组合命名，例如：const DEFAULT_PAGE_SIZE = 10"
  "constant naming": "常量全部大写，使用下划线组合命名，例如：const DEFAULT_PAGE_SIZE = 10"

  # 枚举/字典命名
  "枚举命名": "枚举使用大驼峰命名，例如：const StatusEnum = { 0: { label: '待处理', color: 'yellow' }, 1: { label: '已处理', color: 'green' } }"
  "字典命名": "字典使用大驼峰命名，例如：const DataType = { 0: '个人数据', 1: '企业数据', 2: '公共数据', 3: '其它' }"

  # 命名严谨性
  "命名规范": "不使用拼音与英文混合方式，不使用无明确含义的命名，更不允许直接使用中文，正确的英文拼写和语法让阅读者易于理解"

  # ===== React相关 =====
  "react": "React组件用PascalCase命名，使用函数式组件和Hooks，JSX使用双引号，其他属性使用单引号"
  "react+component": "React组件用PascalCase命名，保持组件单一职责，使用TypeScript类型安全，多属性换行展示，自闭合标签前留一个空格"
  "react+typescript": "React组件用PascalCase命名，使用TypeScript类型安全，定义Props接口，JSX使用双引号，其他属性使用单引号"
  "react+hooks": "使用React Hooks管理状态，遵循Hooks规则，自定义Hook以use开头，组件跨行时用括号包裹JSX标签"
  "react+jsx": "JSX使用双引号，其他属性使用单引号，不要在JSX {}引用括号里两边加空格，没有子组件的父组件使用自闭合标签"

  # ===== Vue相关 =====
  "vue": "Vue组件用PascalCase命名，使用Composition API，文件使用.vue扩展名，script使用setup lang='ts'"
  "vue+component": "Vue组件用PascalCase命名，使用Composition API，保持组件单一职责，文件使用.vue扩展名"
  "vue+typescript": "Vue组件用PascalCase命名，使用TypeScript和Composition API，定义Props类型，script使用setup lang='ts'"

  # ===== JavaScript/TypeScript =====
  "javascript": "使用camelCase命名变量和函数，const优于let，避免var，使用ES6+语法，箭头函数优先"
  "typescript": "使用TypeScript类型安全，定义接口和类型，避免any类型，严格类型检查，接口用I前缀，类型用T前缀"
  "js": "使用camelCase命名变量和函数，const优于let，避免var，使用ES6+语法，箭头函数优先"
  "ts": "使用TypeScript类型安全，定义接口和类型，避免any类型，严格类型检查，接口用I前缀，类型用T前缀"

  # ===== CSS/LESS/SCSS规范 =====
  "css": "类名使用小写字母，以中划线分割，例如class='base-item'，id采用小驼峰命名，例如id='menuItem'"
  "less": "类名使用小写字母，以中划线分割，scss/less中的变量、函数、混合采用小驼峰命名，根据HTML结构组织样式代码嵌套"
  "scss": "类名使用小写字母，以中划线分割，scss/less中的变量、函数、混合采用小驼峰命名，根据HTML结构组织样式代码嵌套"
  "css+模块化": "通过引入样式文件调用styles的属性，可以直接通过小驼峰命名类名"
  "css+属性顺序": "CSS属性顺序：位置属性 -> 大小 -> 文字系列 -> 背景-> 其他(animation transition等)"
  "css+颜色值": "建议使用小写的十六进制数字，带透明度样式除外，例如：background: #0052d9; background: rgba(0, 82, 217, 0.6)"
  "css+嵌套": "规则之间，嵌套选择器与CSS属性之间空一行，使用模块-功能块前缀防止样式污染"
  "tailwind": "使用Tailwind工具类，避免自定义CSS，保持响应式设计，使用utility classes进行样式设计"

  # ===== HTML规范 =====
  "html": "使用语义化HTML标签，保持良好的可访问性，结构、表现、行为三者分离，确保HTML结构清晰"
  "html+语义化": "使用语义化标签：header、nav、main、article、section、footer、h1-h6、p、ul/ol/li、table相关标签"
  "html+结构": "在文档和模板中只包含结构性的HTML，必要时分块添加注释，将所有表现代码移入样式表中，将所有动作行为移入脚本中"

  # ===== 格式规范 =====
  "格式规范": "格式规范主要参照ESLint规范、Prettier格式化，使用默认配置，在VS Code中使用ESLint与Prettier插件"
  "eslint": "使用ESLint进行代码检查，遵循默认配置规范，配置VS Code保存时自动格式化代码"
  "prettier": "使用Prettier进行文件格式化，配置VS Code保存时自动格式化代码，保持代码风格一致"

  # ===== 注释规范 =====
  "注释": "要有良好的注释习惯，便于理解、回顾代码。单行注释：// (双斜线)与注释文字之间保留一个空格。多行注释：/** xxxxxx */"
  "单行注释": "单行注释：// (双斜线)与注释文字之间保留一个空格，例如：// 数据类型、const pageNum = 10; // 页码"
  "多行注释": "多行注释使用：/** xxxxxx xxxxxx */格式"

  # ===== Node.js/后端 =====
  "node": "使用camelCase命名，模块化设计，错误处理完善，使用ES6+语法"
  "express": "RESTful API设计，中间件合理使用，错误处理中间件，统一响应格式"
  "api": "RESTful API设计，统一响应格式，完善错误处理，请求参数验证"

  # ===== 数据库 =====
  "sql": "使用snake_case命名表和字段，合理使用索引"
  "mongodb": "使用camelCase命名字段，合理设计文档结构"

  # ===== 测试 =====
  "test": "测试用例命名清晰，覆盖主要功能，使用describe和it结构"
  "jest": "使用Jest测试框架，合理使用mock，测试覆盖率要求"

  # ===== 通用编程 =====
  "function": "函数名使用camelCase，保持函数单一职责，参数不超过3个，使用动词或动词+名词形式"
  "class": "类名使用PascalCase，遵循单一职责原则"
  "variable": "变量名使用camelCase，语义化命名，避免缩写，布尔类型需要标识前缀"
  "constant": "常量使用UPPER_SNAKE_CASE，集中管理配置常量"

  # ===== 组合场景 =====
  "登录+component": "登录组件使用表单验证，密码加密传输，错误提示友好，组件用PascalCase命名"
  "用户+管理": "用户管理遵循RBAC权限模型，数据验证完善，使用RESTful API设计"
  "页面+组件": "页面组件保持单一职责，合理拆分子组件，使用懒加载，组件用PascalCase命名"
  "表单+验证": "表单验证前后端双重验证，错误提示清晰，用户体验友好，字段验证、提交防重、错误提示"
  "react+表单": "React表单组件用PascalCase命名，使用react-hook-form进行表单验证，TypeScript类型安全，JSX使用双引号"
  "vue+表单": "Vue表单组件用PascalCase命名，使用Composition API，表单验证，TypeScript类型安全"
  "css+响应式": "CSS响应式设计，使用媒体查询，移动端优先，合理使用flexbox和grid布局"

  # ===== 项目结构相关 =====
  "项目结构": "目录结构清晰，src/components(组件)、src/pages(页面)、src/utils(工具函数)、src/hooks(React hooks)、src/composables(Vue composables)"
  "文件组织": "按功能模块组织文件，相关文件放在同一目录下，index文件作为模块入口"

  # ===== 默认规范 =====
  "default": "代码风格一致，注释清晰，遵循项目规范，使用语义化命名，保持代码可读性和可维护性，组件开发的时候通过引入样式文件调用styles的属性"

# 默认通用规范集合 - 当无法匹配具体规范时返回
default_standards:
  - "文件命名：文件全部采用小写方式，名称为多个单词时以中划线分割，例如：index.tsx、index.less、test.ts、test.js、test-demo.html、icon-upload.png"
  - "组件命名：组件使用大驼峰命名，例如：SearchHead、Title，可使用文件夹嵌套"
  - "变量命名：变量使用小驼峰命名，例如：const name = 'xxx'、let cacheParams = {}，布尔类型需要标识前缀如has、is、can、whether、should等"
  - "函数命名：函数使用小驼峰命名，使用动词或动词+名词形式，例如：handleClick、getTitle，增删改查使用addXXX、deleteXXX、updateXXX、getXXX"
  - "常量命名：常量全部大写，使用下划线组合命名，例如：const DEFAULT_PAGE_SIZE = 10"
  - "CSS类名：类名使用小写字母，以中划线分割，例如class='base-item'，id采用小驼峰命名，例如id='menuItem'"
  - "注释规范：要有良好的注释习惯，便于理解、回顾代码。单行注释：// (双斜线)与注释文字之间保留一个空格。多行注释：/** xxxxxx */"

# ===== 组件信息库配置（暂停开发中） =====
components_library:
  # 组件库基本信息
  name: "通用组件库"
  version: "1.0.0"
  description: "提供常用前端组件的信息查询和使用指导"

  # 组件分类定义
  categories:
    - name: "基础组件"
      description: "基础UI组件，如按钮、输入框等"
      keywords: ["button", "input", "基础", "ui"]
    - name: "表单组件"
      description: "表单相关组件"
      keywords: ["form", "表单", "验证", "输入"]
    - name: "数据展示"
      description: "数据展示相关组件"
      keywords: ["table", "list", "card", "数据", "展示"]
    - name: "导航组件"
      description: "导航相关组件"
      keywords: ["nav", "menu", "导航", "菜单"]
    - name: "反馈组件"
      description: "用户反馈相关组件"
      keywords: ["modal", "toast", "alert", "反馈", "提示"]
    - name: "布局组件"
      description: "页面布局相关组件"
      keywords: ["layout", "grid", "flex", "布局"]

  # 支持的框架
  frameworks:
    - name: "react"
      display_name: "React"
      description: "React框架组件"
    - name: "vue"
      display_name: "Vue"
      description: "Vue框架组件"
    - name: "angular"
      display_name: "Angular"
      description: "Angular框架组件"
    - name: "vanilla"
      display_name: "原生JS"
      description: "原生JavaScript组件"

  # 组件信息配置
  components:
    # React Button组件示例
    - name: "Button"
      display_name: "按钮组件"
      description: "通用按钮组件，支持多种样式和状态"
      category: "基础组件"
      tags: ["button", "按钮", "基础"]
      framework: "react"
      version: "1.0.0"
      author: "UI团队"
      keywords: ["button", "btn", "按钮", "点击", "提交"]
      dependencies: ["react", "@types/react"]
      api_docs:
        props:
          - name: "type"
            type: "'primary' | 'secondary' | 'danger'"
            required: false
            default: "'primary'"
            description: "按钮类型"
          - name: "size"
            type: "'small' | 'medium' | 'large'"
            required: false
            default: "'medium'"
            description: "按钮尺寸"
          - name: "disabled"
            type: "boolean"
            required: false
            default: "false"
            description: "是否禁用"
          - name: "loading"
            type: "boolean"
            required: false
            default: "false"
            description: "是否显示加载状态"
          - name: "children"
            type: "React.ReactNode"
            required: true
            description: "按钮内容"
        events:
          - name: "onClick"
            description: "点击事件"
            params:
              - name: "event"
                type: "React.MouseEvent"
                required: true
                description: "鼠标点击事件对象"
      usage_examples:
        - title: "基础用法"
          description: "最简单的按钮使用方式"
          language: "tsx"
          code: |
            import { Button } from '@/components';

            function App() {
              return (
                <Button onClick={() => console.log('clicked')}>
                  点击我
                </Button>
              );
            }
        - title: "不同类型"
          description: "展示不同类型的按钮"
          language: "tsx"
          code: |
            <div>
              <Button type="primary">主要按钮</Button>
              <Button type="secondary">次要按钮</Button>
              <Button type="danger">危险按钮</Button>
            </div>

    # Vue Button组件示例
    - name: "VButton"
      display_name: "Vue按钮组件"
      description: "Vue版本的通用按钮组件"
      category: "基础组件"
      tags: ["button", "按钮", "基础"]
      framework: "vue"
      version: "1.0.0"
      keywords: ["button", "btn", "按钮", "点击", "提交"]
      dependencies: ["vue"]
      api_docs:
        props:
          - name: "type"
            type: "'primary' | 'secondary' | 'danger'"
            required: false
            default: "'primary'"
            description: "按钮类型"
          - name: "size"
            type: "'small' | 'medium' | 'large'"
            required: false
            default: "'medium'"
            description: "按钮尺寸"
          - name: "disabled"
            type: "boolean"
            required: false
            default: "false"
            description: "是否禁用"
        events:
          - name: "click"
            description: "点击事件"
            params:
              - name: "event"
                type: "MouseEvent"
                required: true
                description: "鼠标点击事件对象"
        slots:
          - "default"
      usage_examples:
        - title: "基础用法"
          description: "Vue按钮的基础使用"
          language: "vue"
          code: |
            <template>
              <VButton @click="handleClick">点击我</VButton>
            </template>

            <script setup>
            const handleClick = () => {
              console.log('clicked');
            };
            </script>