// ❌ 绝对禁止
{"rules": [{type: "email", "message": "邮箱"}]}
{"danger": true}

// ✅ 必须这样写
{"rules": [{"type": "email", "message": "邮箱"}]}
{"danger": true}

// ❌ 绝对禁止
{"tag": "col", "children": {"tag": "div"}}
{"tag": "form-item", "children": {"tag": "input"}}
{"tag": "dropdown", "children": {"tag": "button"}}

// ✅ 必须这样写
{"tag": "col", "children": [{"tag": "div"}]}
{"tag": "form-item", "children": [{"tag": "input"}]}
{"tag": "dropdown", "children": [{"tag": "button"}]}

// ❌ 绝对禁止
{"children": "当前页: ${page}, 共 ${total} 条"}

// ✅ 必须这样写
{"children": "${'当前页: '+page+', 共: '+total+' 条'}"}

在编写任何 JSON 之前，必须确认：
1. 所有键都有双引号吗？
2. children 是数组吗？（除了纯文本）
3. 混合文本在 ${...} 内吗？

# 生成后必须立即运行
npx jsonlint demo/data/test/xxx-demo.json

# 验证不通过不能提交

// ❌
{"rules": [{type: "email"}]}
{"children": {"tag": "button"}}

// ✅
{"rules": [{"type": "email"}]}
{"children": [{"tag": "button"}]}

// ❌
{"tag": "form-item", "children": {"tag": "input"}}

// ✅
{"tag": "form-item", "children": [{"tag": "input"}]}

// ❌
{"children": "当前页: ${page}"}

// ✅
{"children": "${'当前页: '+page}"}

{
  "tag": "app",
  "children": [
    {
      "tag": "layout-fit",
      "initStore": {},
      "children": [
        {
          "tag": "div",
          "style": {"padding": "20px"},
          "children": [
            {"tag": "h3", "children": "表单测试"},
            {
              "tag": "form",
              "name": "testForm",
              "children": [
                {
                  "tag": "form-item",
                  "name": "username",
                  "label": "用户名",
                  "rules": [{"required": true, "message": "请输入用户名"}],
                  "children": [{"tag": "input", "placeholder": "请输入用户名"}]
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

{
  "tag": "layout-fit",
  "initStore": {},
  "children": [
    {
      "tag": "div",
      "style": {"padding": "20px"},
      "children": [
        {
          "tag": "row",
          "gutter": 16,
          "children": [
            {"tag": "col", "span": 12, "children": [{"tag": "div", "style": {"background": "#0092ff", "padding": "24px", "color": "#fff"}, "children": "col-12"}]},
            {"tag": "col", "span": 12, "children": [{"tag": "div", "style": {"background": "#0092ff", "padding": "24px", "color": "#fff"}, "children": "col-12"}]}
          ]
        }
      ]
    }
  ]
}

生成 JSON 时快速检查：

1. 看所有键 → 有双引号吗？
2. 看所有 children → 是数组或字符串吗？
3. 看所有模板变量 → 混合文本在 ${...} 内吗？

完成后 → 运行 npx jsonlint 验证

{
  "tag": "tabs",
  "activeKey": "${activeTab}",
  "type": "line",
  "size": "large",
  "style": {
    "flex": 1,
    "display": "flex", 
    "flexDirection": "column",
    "background": "#fff",
    "padding": "20px",
    "borderRadius": "8px",
    "margin": "20px"
  },
  "items": [
    {
      "key": "tab1",
      "label": "标签页 1",
      "children": [
        {
          "tag": "div",
          "children": "内容",
          "style": {
            "padding": "20px",
            "background": "#fff",
            "borderRadius": "6px",
            "color": "#333",
            "height": "100%"
          }
        }
      ]
    }
  ]
}

{
  "tag": "listview",
  "keyField": "id",
  "itemData": "${dataList}",
  "itemAttr": {...}
}

// ❌ 错误：键名缺少引号
{
  "rules": [
    {type: "email", "message": "请输入邮箱"},
    {len: 11, "message": "手机号必须是11位"},
    {min: 6, "message": "密码至少6个字符"}
  ]
}

// ✅ 正确：所有键都有引号
{
  "rules": [
    {"type": "email", "message": "请输入邮箱"},
    {"len": 11, "message": "手机号必须是11位"},
    {"min": 6, "message": "密码至少6个字符"}
  ]
}

// ❌ 错误：children 是对象
{
  "tag": "col",
  "span": 6,
  "children": {"tag": "div", "style": {...}, "children": "内容"}
}

// ✅ 正确：children 是数组
{
  "tag": "col",
  "span": 6,
  "children": [{"tag": "div", "style": {...}, "children": "内容"}]
}

// ❌ 错误：多余嵌套
{
  "initStore": {
    "tableData": {
      "list": [...]
    }
  },
  "rowData": "${tableData.list}"
}

// ✅ 正确：扁平结构
{
  "initStore": {
    "dataList": [...]
  },
  "rowData": "${dataList}"
}

// ❌ 错误：使用 renderItem
{
  "tag": "listview",
  "renderItem": {...}
}

// ✅ 正确：使用 itemAttr
{
  "tag": "listview",
  "keyField": "id",
  "itemData": "${dataList}",
  "itemAttr": {...}
}

// ❌ 错误：使用 item
{
  "itemAttr": {
    "children": "${item.title}"
  }
}

// ✅ 正确：使用 row
{
  "itemAttr": {
    "children": "${row.title}"
  }
}

// 添加空值检查
if (gridRef.current && gridRef.current.api) {
  gridRef.current.api.resetColumnState();
  gridRef.current.api.sizeColumnsToFit();
}

{
  "tag": "tabs",
  "type": "line",
  "style": {
    "flex": 1,
    "display": "flex",
    "flexDirection": "column"
  }
}

// ❌ 过度嵌套
{
  "tag": "card",
  "children": [{
    "tag": "listview",
    ...
  }]
}

// ✅ 简洁结构
{
  "tag": "listview",
  "className": "padding10",
  ...
}

1. 读取 dev.log 获取错误信息
2. 定位错误文件和位置
3. 修复 JSON 语法错误
4. 运行 npx jsonlint <file> 验证

#!/bin/bash
# validate-all-tests.sh - 验证所有测试 JSON 文件

cd /data/react/collect-ui/demo/data/test

for file in *.json; do
  echo "Checking $file..."
  if npx jsonlint "$file" > /dev/null 2>&1; then
    echo "  ✅ $file - 验证通过"
  else
    echo "  ❌ $file - 验证失败"
    npx jsonlint "$file" 2>&1 | head -5
  fi
done

# 1. 查看 dev.log 中的错误
tail -50 /data/react/collect-ui/dev.log | grep "Failed to parse"

# 2. 定位错误文件
# 错误信息格式: File: /path/to/file.json:行:列

# 3. 修复后验证
npx jsonlint /path/to/file.json

# .github/workflows/validate-json.yml
name: Validate JSON
on: [push, pull_request]
jobs:
  validate:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Install jsonlint
        run: npm install -g jsonlint
      - name: Validate all test files
        run: |
          for f in demo/data/test/*.json; do
            jsonlint "$f" || exit 1
          done

1. 在 demo/data/test/ 创建 [组件名]-demo.json
2. 使用 app 标签包装（需要 message 等功能时）
3. 使用 layout-fit 管理布局
4. 添加 initStore 定义测试数据
5. 验证 JSON 格式：npx jsonlint <file>
6. 在 App.tsx 注册测试用例

{
  "tag": "app",
  "children": [
    {
      "tag": "layout-fit",
      "initStore": {
        "testData": []
      },
      "children": [
        {
          "tag": "div",
          "style": {"padding": "20px"},
          "children": [
            {"tag": "h3", "style": {"marginBottom": "16px"}, "children": "组件名称"},
            {"tag": "div", "style": {"marginBottom": "24px", "color": "#666"}, "children": "组件功能描述"},
            {
              "tag": "组件名",
              "属性": "值",
              "children": [...]
            }
          ]
        }
      ]
    }
  ]
}

// 1. 在 demo/App.tsx 添加 import
import testXxxConfig from "./data/test/xxx-demo.json"

// 2. 在 testCases 数组注册
{ 
  key: 'test/xxx-demo', 
  name: '组件名称', 
  description: '测试描述', 
  category: 'basic', 
  tags: ['组件', '标签'] 
}

// 3. 在 testConfigs 对象添加映射
'test/xxx-demo': testXxxConfig,

# 验证单个文件
npx jsonlint demo/data/test/xxx-demo.json

# 批量验证所有测试文件
cd demo/data/test
for f in *.json; do npx jsonlint "$f"; done

# 检查 dev.log 中的错误
tail -100 /data/react/collect-ui/dev.log | grep "Failed to parse"

{
  "tag": "input",
  "placeholder": "请输入...",
  "allowClear": true,
  "disabled": false,
  "maxLength": 100
}

{
  "tag": "select",
  "value": "${selectedValue}",
  "options": [
    {"value": "A", "label": "选项 A"},
    {"value": "B", "label": "选项 B"}
  ],
  "mode": "multiple"
}

{
  "tag": "table",
  "rowData": "${tableData}",
  "columnDefs": [
    {"field": "name", "headerName": "姓名"},
    {"field": "age", "headerName": "年龄"}
  ],
  "pagination": {"pageSize": 10}
}

{
  "tag": "listview",
  "keyField": "id",
  "itemData": "${listData}",
  "itemAttr": {
    "tag": "div",
    "children": "${row.name}"
  }
}

{
  "tag": "button",
  "children": "显示消息",
  "action": [
    {"tag": "message", "type": "success", "content": "操作成功"}
  ]
}

{
  "tag": "button",
  "danger": true,
  "children": "删除",
  "action": [
    {
      "tag": "confirm",
      "title": "确认删除",
      "content": "确定要删除吗？",
      "onOk": [{"tag": "message", "type": "success", "content": "已删除"}]
    }
  ]
}

demo/data/test/
├── hello-world.json              # 入门示例
├── button-demo.json              # 按钮
├── input-demo.json               # 输入框
├── select-demo.json              # 选择器
├── table-demo.json               # 表格
├── listview-demo.json            # 列表
├── tabs-demo.json                # 标签页
├── card-demo.json                # 卡片
├── form-validation-demo.json     # 表单验证
├── actions-demo.json             # Actions
└── ...                           # 更多测试

# .github/workflows/test-validation.yml
name: Test Case Validation
on: [push, pull_request]

jobs:
  validate:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      - name: Install jsonlint
        run: npm install -g jsonlint
      - name: Validate all test files
        run: |
          for f in demo/data/test/*.json; do
            echo "Validating $f..."
            jsonlint "$f" || { echo "Error in $f"; exit 1; }
          done
      - name: Check dev.log for errors
        run: |
          if grep -q "Failed to parse" dev.log 2>/dev/null; then
            echo "JSON parse errors found in dev.log"
            grep "Failed to parse" dev.log | head -5
            exit 1
          fi
          echo "No JSON parse errors in dev.log"

// 在组件入口添加
console.log('[DatePicker] props.value:', props.value)
console.log('[DatePicker] props.valueType:', typeof props.value)

// 在解析函数添加
function parseToDayjs(dateInput: any, format: string | undefined) {
  console.log('[DatePicker] parseToDayjs input:', dateInput, 'type:', typeof dateInput)
  // ...
}

[DatePicker] props.value: ${dateValue}      ← 模板变量未被解析
[DatePicker] After transferProp, newProps.value: undefined  ← transferProp 返回 undefined

// 问题代码：value 被解构，没有传给 transferProp
const { value, valueFormat, action, ...rest } = props
let newProps = transferProp(rest, "date")  // value 不在 rest 中！

// 修复：手动解析 value 模板变量
const { value, valueFormat, action, store, namespace, ...rest } = props
const _target = genTarget(props)

let parsedValue = value
if (typeof value === 'string' && value.includes('${')) {
  parsedValue = varValue(value, store, _target)
}

{
  "tag": "date",
  "range": true  // ✓ 属性已设置
}

// 问题代码：始终使用 DatePicker
return (
  <DatePicker
    {...newProps}
    value={dayjsValue}
  />
)

// 根据 range 属性选择组件
const Component = range ? DatePicker.RangePicker : DatePicker

return (
  <Component
    locale={zhCN}
    {...newProps}
    value={dayjsValue}
  />
)

// 问题代码
<div onKeyDown={handleKeyDown} className="h100">
  <Form {...rest}>
    {props.children}
  </Form>
</div>

// 移除 h100 class
<div onKeyDown={handleKeyDown}>
  <Form {...rest}>
    {props.children}
  </Form>
</div>

# 1. 查看 dev.log 错误
tail -100 /data/react/collect-ui/dev.log | grep "Failed to parse"

# 2. 验证 JSON 格式
npx jsonlint demo/data/test/xxx.json

# 3. 批量验证所有测试文件
cd demo/data/test
for f in *.json; do npx jsonlint "$f"; done

# 4. 查找特定错误
grep -r "Objects are not valid as a React child" .
grep -r "Invalid Date" .

// 组件入口日志
console.log('[ComponentName] ============ Render ============')
console.log('[ComponentName] props:', props)

// 解析函数日志
function parseValue(input: any) {
  console.log('[ComponentName] parseValue input:', input, 'type:', typeof input)
  // ... 处理逻辑
  console.log('[ComponentName] parseValue result:', result)
  return result
}

// 事件处理日志
const onChange = useCallback((value: any) => {
  console.log('[ComponentName] onChange:', value)
  // ... 处理逻辑
}, [])

src/components/checkbox/checkbox.tsx  ← 存在
src/components/radio/radio.tsx        ← 存在

// ❌ 错误：使用了不存在的标签
{"tag": "checkbox-group", ...}
{"tag": "radio-group", ...}

// ✅ 正确：使用组件名 + group 属性
{"tag": "checkbox", "group": true, ...}
{"tag": "radio", "group": true, ...}

{
  "tag": "radio",
  "group": true,
  "options": [
    {"label": "男", "value": "male"},
    {"label": "女", "value": "female"}
  ]
}

// 问题代码：直接传递 options 给 Group
if(isGroup){
  return (
    <Radio.Group {...newProps}>
      {/* options 没有被渲染！ */}
    </Radio.Group>
  )
}

// 正确：遍历 options 渲染 Radio 组件
if(isGroup){
  return (
    <Radio.Group {...newProps}>
      {options && options.map((opt: any, index: number) => (
        <Radio key={index} value={opt.value}>{opt.label}</Radio>
      ))}
    </Radio.Group>
  )
}

[Outlet] useOutlet(): null
outlet.tsx:71 [Outlet] current location: /collect-ui/simple-router.html

{
  "tag": "app",
  "children": [
    {
      "tag": "layout-fit",
      "children": [
        {
          "tag": "menu",
          "changeRouter": true,
          "items": "${router}"
        },
        {
          "tag": "router-tab"
        },
        {
          "tag": "outlet"
        },
        {
          "tag": "router",
          "hash": true,
          "data_home": "",
          "router": "${router}"
        }
      ]
    }
  ]
}

simple-router-framework.json (根配置)
    └── layout-fit
        ├── router (单独一级，提供路由上下文)
        └── children (页面配置，通过 data 加载)
            └── menu + router-tab + outlet (在路由上下文中)

{
  "tag": "app",
  "children": [
    {
      "tag": "layout-fit",
      "initStore": {
        "router": [
          {
            "path": "/",
            "key": "first",
            "label": "首页",
            "name": "首页",
            "redirect": "/base/a"
          },
          {
            "path": "/base",
            "key": "base",
            "data": "demo/data/test/simple-page-base.json",
            "label": "基础页面",
            "children": [
              {
                "path": "/base/a",
                "data": "demo/data/test/simple-page-a.json",
                "key": "page-a",
                "label": "页面 A"
              },
              {
                "path": "/base/b",
                "data": "demo/data/test/simple-page-b.json",
                "key": "page-b",
                "label": "页面 B"
              }
            ]
          }
        ]
      },
      "children": [
        {
          "tag": "router",
          "hash": true,
          "data_home": "",
          "router": "${router}"
        }
      ]
    }
  ]
}

{
  "tag": "layout",
  "style": {"minHeight": "100vh"},
  "children": [
    {
      "tag": "sider",
      "width": 200,
      "theme": "dark",
      "children": [
        {
          "tag": "div",
          "style": {"padding": "16px", "color": "#fff", "fontWeight": "bold", "textAlign": "center"},
          "children": "简单路由测试"
        },
        {
          "tag": "menu",
          "theme": "dark",
          "mode": "inline",
          "defaultOpenKeys": ["base"],
          "changeRouter": true,
          "rule": {
            "key_field": "key",
            "label_field": "label",
            "to_field": "path"
          },
          "items": "${router}"
        }
      ]
    },
    {
      "tag": "layout",
      "style": {"flex": 1, "display": "flex", "flexDirection": "column"},
      "children": [
        {
          "tag": "router-tab"
        },
        {
          "tag": "outlet"
        }
      ]
    }
  ]
}

{
  "tag": "div",
  "style": {"padding": "20px"},
  "children": "这是页面 A"
}

┌─────────────────────────────────────────────────────────────┐
│  第一层：framework 配置 (simple-router-framework.json)       │
│  ├── initStore.router: 路由树结构（基础配置）                 │
│  └── data: 加载第二层配置                                     │
│       ↓                                                      │
│  ┌─────────────────────────────────────────────────────────┐ │
│  │  第二层：页面布局配置 (simple-page-base.json)             │ │
│  │  ├── menu + router-tab + outlet                          │ │
│  │  └── data: 加载第三层配置                                  │ │
│  │       ↓                                                   │ │
│  │  ┌─────────────────────────────────────────────────────┐  │ │
│  │  │  第三层：具体页面内容 (simple-page-a.json)            │  │ │
│  │  │  ├── tag: "div"                                     │  │ │
│  │  │  └── children: "这是页面 A"                          │  │ │
│  │  └─────────────────────────────────────────────────────┘  │ │
│  └─────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘

"我在 simple-page-base.json 里写的 menu，items 用 ${router}，
但是这个 router 变量是从哪里来的？"

{
  "tag": "layout-fit",
  "initStore": {
    "router": [...]  // 基础路由树
  },
  "children": [
    {
      "tag": "router",
      "router": "${router}"  // 使用 initStore.router
    },
    {
      "tag": "页面组件",
      "data": "第二层配置.json"  // 加载第二层
    }
  ]
}

{
  "tag": "layout",
  "children": [
    {
      "tag": "menu",
      "items": "${router}"  // 引用 initStore.router
    },
    {
      "tag": "outlet"  // 渲染当前路由页面
    }
  ],
  "data": "第三层配置.json"  // 加载第三层（子页面）
}

{
  "tag": "div",
  "children": "页面内容"
}

{
  "tag": "layout-fit",
  "initStore": {
    "router": []  // 初始为空
  },
  "initAction": [
    {
      "tag": "ajax",
      "api": "get:/api/menu/routes",
      "adapt": {
        "router": "${data}"
      }
    }
  ],
  "children": [
    {
      "tag": "router",
      "router": "${router}"  // 从后台加载后才有值
    },
    {
      "tag": "页面组件",
      "data": "第二层配置.json"
    }
  ]
}

┌─────────────────────────────────────────────────────────────────┐
│  第一层：根配置加载                                                │
│  1. 加载 simple-router-framework.json                            │
│  2. 解析 initStore.router (路由树)                               │
│  3. 创建 router 组件，建立路由上下文                               │
└─────────────────────────────────────────────────────────────────┘
                              ↓
┌─────────────────────────────────────────────────────────────────┐
│  第二层：框架页面加载                                              │
│  4. 访问 /base/a → router 匹配路由                                │
│  5. 加载 simple-page-base.json (data 字段)                       │
│  6. 渲染 menu + router-tab + outlet (在路由上下文中)              │
└─────────────────────────────────────────────────────────────────┘
                              ↓
┌─────────────────────────────────────────────────────────────────┐
│  第三层：具体页面内容渲染                                          │
│  7. outlet 根据当前路由匹配                                        │
│  8. 加载 simple-page-a.json (子路由的 data 字段)                  │
│  9. 渲染页面内容                                                   │
└─────────────────────────────────────────────────────────────────┘

1. 加载根配置 simple-router-framework.json
   ├── initStore.router: 定义路由树结构
   └── children.router: 创建路由上下文
   ↓
2. 访问 /base/a
   ├── 路由匹配：/base → 加载 simple-page-base.json
   └── 路由匹配：/base/a → 加载 simple-page-a.json
   ↓
3. 渲染第二层 (simple-page-base.json)
   ├── menu 显示 ${router} (引用 initStore.router)
   ├── router-tab 显示标签页
   └── outlet 准备渲染
   ↓
4. 渲染第三层 (simple-page-a.json)
   └── outlet 渲染具体页面内容

simple-router.tsx
    │
    └── Render 组件加载
        │
        ├── simple-router-framework.json (第一层)
        │   │
        │   ├── "tag": "app"
        │   ├── initStore.router → 路由树定义 [1]
        │   └── children[0].tag: "router" → 建立上下文 [2]
        │       │
        │       └── children[1].tag: "页面组件" (data 加载第二层)
        │           │
        │           └── simple-page-base.json (第二层)
        │               │
        │               ├── "tag": "layout"
        │               ├── menu.items → ${router} [3]
        │               ├── router-tab
        │               ├── outlet → 渲染子页面 [4]
        │               └── data → 加载第三层
        │                   │
        │                   └── simple-page-a.json (第三层)
        │                       │
        │                       └── "tag": "div", "children": "页面 A"
        │
        └── 组合渲染
            ├── router 上下文：覆盖整个应用
            ├── menu：从 initStore.router 读取路由树
            ├── outlet：渲染当前路由的 data 配置
            └── router-tab：显示已打开的标签页

initStore.router (第一层)
    │
    ├── menu.items=${router} (第二层)
    │       └── 显示菜单项
    │
    └── router 组件配置
            └── outlet 根据路由匹配加载第三层

import React from 'react';
import ReactDOM from 'react-dom/client';
import {Render} from '../src/index';

import config from "./data/test/simple-router-framework.json"

ReactDOM.createRoot(document.getElementById('root')!).render(
    <React.StrictMode>
        <Render {...config} />
    </React.StrictMode>
);