升级功能，添加示例和文档

doc/api.md

@@ -0,0 +1,61 @@
+### ExampleDriver
+用于展示和编辑 React 组件示例的主组件，支持 LiveCode 和 MiniCode 两种展示模式。
+
+#### 属性说明
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+|--------|------|------|--------|------|
+| list | array | 是 | - | 示例列表数组，每个元素代表一个示例 |
+| isFull | boolean | 否 | false | 是否全宽显示，true 时单列显示，false 时双列显示 |
+| contextComponent | React Component | 否 | - | 自定义上下文组件，用于包裹渲染的代码内容 |
+| className | string | 否 | - | 自定义 CSS 类名 |
+| ...props | object | 否 | - | 其他 HTML div 元素的属性 |
+
+#### list 数组项属性说明
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+|--------|------|------|--------|------|
+| code | string | 是 | - | 示例代码字符串 |
+| scope | array | 是 | - | 作用域数组，包含组件和包信息 |
+| title | string | 是 | - | 示例标题 |
+| description | string | 是 | - | 示例描述，支持 HTML 格式 |
+| qrcodeUrl | string | 否 | - | 二维码图片 URL，传入此项则使用 MiniCode 模式 |
+| contextComponent | React Component | 否 | - | 单个示例的自定义上下文组件 |
+
+#### scope 数组项属性说明
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+|--------|------|------|--------|------|
+| component | React Component | 是 | - | 要暴露给示例代码的组件 |
+| name | string | 是 | - | 组件名称，在代码中使用 |
+| packageName | string | 否 | - | 包名，用于生成导入语句 |
+| importStatement | string | 否 | - | 自定义导入语句，覆盖自动生成的导入 |
+
+### LiveCode
+提供实时代码编辑和预览功能的子组件（通过 ExampleDriver 自动使用）。
+
+#### 属性说明
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+|--------|------|------|--------|------|
+| code | string | 是 | - | 要展示的代码 |
+| scope | array | 是 | - | 作用域数组 |
+| title | string | 是 | - | 标题 |
+| description | string | 是 | - | 描述 |
+| contextComponent | React Component | 否 | - | 上下文组件 |
+
+### MiniCode
+显示二维码预览的只读模式子组件（通过 ExampleDriver 自动使用）。
+
+#### 属性说明
+| 属性名 | 类型 | 必填 | 默认值 | 说明 |
+|--------|------|------|--------|------|
+| code | string | 是 | - | 示例代码 |
+| qrcodeUrl | string | 是 | - | 二维码图片地址 |
+| scope | array | 是 | - | 作用域数组 |
+| title | string | 是 | - | 标题 |
+| description | string | 是 | - | 描述 |
+
+### config
+Monaco Editor 的配置对象，用于自定义编辑器行为。
+
+#### 方法说明
+| 方法名 | 参数 | 返回值 | 说明 |
+|--------|------|--------|------|
+| config | options: object | void | 配置 Monaco Editor 的加载选项，如模块路径等 |

doc/base.js

@@ -0,0 +1,32 @@
+const {default: ExampleDriver} = _ExampleDriver;
+
+// 示例代码字符串
+const code = `
+const { Button, Card, Space } = antd;
+const { useState } = React;
+
+const Component = () => {
+  const [count, setCount] = useState(0);
+  return (
+    <div style={{ padding: '12px' }}>
+      <Card>
+        <h4 style={{ marginBottom: '12px' }}>计数器示例</h4>
+        <Space>
+          <Button onClick={() => setCount(count - 1)}>-</Button>
+          <span style={{ fontSize: '18px' }}>{count}</span>
+          <Button onClick={() => setCount(count + 1)}>+</Button>
+          <Button onClick={() => setCount(0)} danger>重置</Button>
+        </Space>
+      </Card>
+    </div>
+  );
+};
+
+render(<Component />);
+`;
+
+render(<ExampleDriver list={[{
+    title: '基本使用', description: 'ExampleDriver 的基础用法，展示简单的计数器示例', code, scope: [{
+        name: 'antd', packageName: 'antd', component: antd
+    }]
+}]}/>);

doc/context.js

@@ -0,0 +1,60 @@
+const {default: ExampleDriver} = _ExampleDriver;
+
+const code = `
+const { Button, Card, Space, Switch, Tag } = antd;
+const { useState } = React;
+
+// 自定义上下文组件
+const CustomContext = ({ children }) => {
+  const [theme, setTheme] = useState('light');
+  const colors = {
+    light: { bg: '#fff', color: '#000', border: '#d9d9d9' },
+    dark: { bg: '#1a1a1a', color: '#fff', border: '#434343' }
+  };
+  const style = {
+    padding: '12px',
+    background: colors[theme].bg,
+    color: colors[theme].color,
+    borderRadius: '4px'
+  };
+
+  return (
+    <div style={style}>
+      <Space style={{ marginBottom: '12px' }}>
+        <Switch
+          checked={theme === 'dark'}
+          onChange={(checked) => setTheme(checked ? 'dark' : 'light')}
+          checkedChildren="🌙"
+          unCheckedChildren="☀️"
+        />
+        <Tag color={theme === 'dark' ? 'blue' : 'orange'}>
+          {theme === 'dark' ? '暗色主题' : '亮色主题'}
+        </Tag>
+      </Space>
+      {children}
+    </div>
+  );
+};
+
+const Component = () => {
+  return (
+    <CustomContext>
+      <p>这是上下文包裹的内容，会根据主题自动改变颜色。</p>
+    </CustomContext>
+  );
+};
+
+render(<Component />);
+`;
+
+render(<ExampleDriver list={[{
+    title: '自定义上下文',
+    description: '通过 contextComponent 属性可以为示例代码提供自定义的上下文组件',
+    code,
+    contextComponent: ({children}) => (<div style={{padding: '12px', background: '#f5f5f5', borderRadius: '4px'}}>
+        {children}
+    </div>),
+    scope: [{
+        name: 'antd', packageName: 'antd', component: antd
+    }]
+}]}/>);

doc/example.json

@@ -0,0 +1,120 @@
+{
+  "isFull": true,
+  "list": [
+    {
+      "title": "基础使用",
+      "description": "展示 ExampleDriver 组件的基本用法，包含简单的计数器示例",
+      "code": "./base.js",
+      "scope": [
+        {
+          "name": "_ExampleDriver",
+          "packageName": "@kne/current-lib_example-driver",
+          "importStatement": "import * as _ExampleDriver from \"@kne/example-driver\""
+        },
+        {
+          "packageName": "@kne/current-lib_example-driver/dist/index.css"
+        },
+        {
+          "name": "antd",
+          "packageName": "antd"
+        },
+        {
+          "name": "remoteLoader",
+          "packageName": "@kne/remote-loader"
+        }
+      ]
+    },
+    {
+      "title": "LiveCode 模式",
+      "description": "实时代码编辑和预览模式，可以直接在浏览器中修改代码并查看效果",
+      "code": "./livecode.js",
+      "scope": [
+        {
+          "name": "_ExampleDriver",
+          "packageName": "@kne/current-lib_example-driver",
+          "importStatement": "import * as _ExampleDriver from \"@kne/example-driver\""
+        },
+        {
+          "packageName": "@kne/current-lib_example-driver/dist/index.css"
+        },
+        {
+          "name": "antd",
+          "packageName": "antd"
+        },
+        {
+          "name": "remoteLoader",
+          "packageName": "@kne/remote-loader"
+        }
+      ]
+    },
+    {
+      "title": "MiniCode 模式",
+      "description": "二维码预览模式，适用于移动端场景，通过二维码引导用户查看示例",
+      "code": "./minicode.js",
+      "scope": [
+        {
+          "name": "_ExampleDriver",
+          "packageName": "@kne/current-lib_example-driver",
+          "importStatement": "import * as _ExampleDriver from \"@kne/example-driver\""
+        },
+        {
+          "packageName": "@kne/current-lib_example-driver/dist/index.css"
+        },
+        {
+          "name": "antd",
+          "packageName": "antd"
+        },
+        {
+          "name": "remoteLoader",
+          "packageName": "@kne/remote-loader"
+        }
+      ]
+    },
+    {
+      "title": "自定义上下文",
+      "description": "使用 contextComponent 属性自定义示例的上下文组件",
+      "code": "./context.js",
+      "scope": [
+        {
+          "name": "_ExampleDriver",
+          "packageName": "@kne/current-lib_example-driver",
+          "importStatement": "import * as _ExampleDriver from \"@kne/example-driver\""
+        },
+        {
+          "packageName": "@kne/current-lib_example-driver/dist/index.css"
+        },
+        {
+          "name": "antd",
+          "packageName": "antd"
+        },
+        {
+          "name": "remoteLoader",
+          "packageName": "@kne/remote-loader"
+        }
+      ]
+    },
+    {
+      "title": "双列布局",
+      "description": "使用 isFull 属性控制布局，默认双列展示多个示例",
+      "code": "./layout.js",
+      "scope": [
+        {
+          "name": "_ExampleDriver",
+          "packageName": "@kne/current-lib_example-driver",
+          "importStatement": "import * as _ExampleDriver from \"@kne/example-driver\""
+        },
+        {
+          "packageName": "@kne/current-lib_example-driver/dist/index.css"
+        },
+        {
+          "name": "antd",
+          "packageName": "antd"
+        },
+        {
+          "name": "remoteLoader",
+          "packageName": "@kne/remote-loader"
+        }
+      ]
+    }
+  ]
+}

doc/layout.js

@@ -0,0 +1,85 @@
+const {default: ExampleDriver} = _ExampleDriver;
+
+const example1 = `
+const { Button, Card } = antd;
+
+const Component = () => {
+  return (
+    <Card size="small" title="示例 1">
+      <Button type="primary">按钮 A</Button>
+      <Button style={{ marginLeft: '8px' }}>按钮 B</Button>
+    </Card>
+  );
+};
+
+render(<Component />);
+`;
+
+const example2 = `
+const { Input, Card } = antd;
+
+const Component = () => {
+  return (
+    <Card size="small" title="示例 2">
+      <Input placeholder="输入内容..." />
+    </Card>
+  );
+};
+
+render(<Component />);
+`;
+
+const example3 = `
+const { Select, Card } = antd;
+const { Option } = Select;
+
+const Component = () => {
+  return (
+    <Card size="small" title="示例 3">
+      <Select placeholder="请选择" style={{ width: '100%' }}>
+        <Option value="1">选项 1</Option>
+        <Option value="2">选项 2</Option>
+      </Select>
+    </Card>
+  );
+};
+
+render(<Component />);
+`;
+
+const example4 = `
+const { Switch, Card } = antd;
+
+const Component = () => {
+  return (
+    <Card size="small" title="示例 4">
+      <Switch />
+    </Card>
+  );
+};
+
+render(<Component />);
+`;
+
+// 默认双列布局
+render(<ExampleDriver list={[{
+    title: '按钮示例',
+    description: '展示按钮组件',
+    code: example1,
+    scope: [{name: 'antd', packageName: 'antd', component: antd}]
+}, {
+    title: '输入框示例',
+    description: '展示输入框组件',
+    code: example2,
+    scope: [{name: 'antd', packageName: 'antd', component: antd}]
+}, {
+    title: '下拉框示例',
+    description: '展示下拉选择组件',
+    code: example3,
+    scope: [{name: 'antd', packageName: 'antd', component: antd}]
+}, {
+    title: '开关示例',
+    description: '展示开关组件',
+    code: example4,
+    scope: [{name: 'antd', packageName: 'antd', component: antd}]
+}]}/>);