@yuku123/z-frontend-common 0.2.9 → 1.0.0

package/src/components/MockPlatform/EnvironmentsTab.jsx

@@ -1,212 +0,0 @@
-import {useEffect, useState} from 'react'
-import {
-    Alert,
-    Button,
-    Col,
-    Form,
-    Input,
-    InputNumber,
-    message,
-    Modal,
-    Popconfirm,
-    Row,
-    Select,
-    Space,
-    Switch,
-    Table,
-    Tag,
-    Typography
-} from 'antd'
-import {DeleteOutlined, EditOutlined, GlobalOutlined, PlusOutlined, ReloadOutlined} from '@ant-design/icons'
-import {mockPlatformApi} from '@/services/api'
-
-const {Text} = Typography
-
-const ENV_TYPES = [
-    {value: 'MOCK', label: 'MOCK (纯 Mock 拦截)', color: 'green'},
-    {value: 'REAL', label: 'REAL (全部代理到真实)', color: 'blue'},
-    {value: 'MIXED', label: 'MIXED (匹配失败时转发)', color: 'orange'},
-]
-
-const ENV_TYPE_COLORS = {MOCK: 'green', REAL: 'blue', MIXED: 'orange'}
-
-export default function EnvironmentsTab({onEnvChange}) {
-    const [envs, setEnvs] = useState([])
-    const [loading, setLoading] = useState(false)
-    const [modalOpen, setModalOpen] = useState(false)
-    const [editing, setEditing] = useState(null)
-    const [form] = Form.useForm()
-
-    useEffect(() => {
-        loadEnvs()
-    }, [])
-
-    const loadEnvs = async () => {
-        setLoading(true)
-        try {
-            const res = await mockPlatformApi.environments.list()
-            setEnvs(Array.isArray(res) ? res : [])
-        } catch (e) {
-            message.warning('加载环境列表失败: ' + e?.message)
-        } finally {
-            setLoading(false)
-        }
-    }
-
-    const handleCreate = () => {
-        setEditing(null)
-        form.resetFields()
-        form.setFieldsValue({envType: 'MOCK', isDefault: 0, mockPriority: 1})
-        setModalOpen(true)
-    }
-
-    const handleEdit = (record) => {
-        setEditing(record)
-        form.setFieldsValue(record)
-        setModalOpen(true)
-    }
-
-    const handleSave = async () => {
-        try {
-            const values = await form.validateFields()
-            if (editing) {
-                await mockPlatformApi.environments.update(editing.envCode, values)
-                message.success('更新成功')
-            } else {
-                await mockPlatformApi.environments.create(values)
-                message.success('创建成功')
-            }
-            setModalOpen(false)
-            loadEnvs()
-        } catch (e) {
-            if (e?.errorFields) return
-            message.error('保存失败')
-        }
-    }
-
-    const handleDelete = async (envCode) => {
-        try {
-            await mockPlatformApi.environments.delete(envCode)
-            message.success('删除成功')
-            loadEnvs()
-        } catch (e) {
-            message.error('删除失败: ' + (e?.message || ''))
-        }
-    }
-
-    const columns = [
-        {
-            title: '环境编码', dataIndex: 'envCode', key: 'envCode', width: 140,
-            render: (v) => <Text code>{v}</Text>
-        },
-        {title: '环境名称', dataIndex: 'envName', key: 'envName', width: 160},
-        {
-            title: '类型', dataIndex: 'envType', key: 'envType', width: 240,
-            render: (v) => <Tag color={ENV_TYPE_COLORS[v] || 'default'}>{v}</Tag>
-        },
-        {
-            title: '真实服务地址', dataIndex: 'baseUrl', key: 'baseUrl',
-            render: (v) => v ? <Text copyable>{v}</Text> : <Text type="secondary">-</Text>
-        },
-        {
-            title: '默认', dataIndex: 'isDefault', key: 'isDefault', width: 90, align: 'center',
-            render: (v) => v === 1 ? <Tag color="gold">默认</Tag> : '-'
-        },
-        {
-            title: '描述', dataIndex: 'description', key: 'description', width: 220,
-            render: (v) => v || '-'
-        },
-        {
-            title: '操作', key: 'action', width: 180,
-            render: (_, record) => (
-                <Space size="small">
-                    <Button size="small" type="link" icon={<GlobalOutlined/>}
-                            onClick={() => {
-                                if (onEnvChange) onEnvChange(record.envCode)
-                            }}>切换</Button>
-                    <Button size="small" type="link" icon={<EditOutlined/>} onClick={() => handleEdit(record)}/>
-                    {record.isDefault !== 1 && (
-                        <Popconfirm title={`确认删除环境 ${record.envCode}?`}
-                                    onConfirm={() => handleDelete(record.envCode)}>
-                            <Button size="small" type="link" danger icon={<DeleteOutlined/>}/>
-                        </Popconfirm>
-                    )}
-                </Space>
-            )
-        },
-    ]
-
-    return (
-        <div>
-            <Alert type="info" showIcon style={{marginBottom: 16}}
-                   title="环境隔离 - 控制 Mock 与真实服务的切换"
-                   description={
-                       <div>
-                           <div><Tag color="green">MOCK</Tag> 完全拦截，仅返回 Mock 数据</div>
-                           <div><Tag color="blue">REAL</Tag> 全部代理到 baseUrl（适合压测、回归测试）</div>
-                           <div><Tag color="orange">MIXED</Tag> Mock 优先，未匹配时转发到 baseUrl（开发联调）</div>
-                       </div>
-                   }
-            />
-
-            <Space style={{marginBottom: 16}}>
-                <Button icon={<ReloadOutlined/>} onClick={loadEnvs}>刷新</Button>
-                <Button type="primary" icon={<PlusOutlined/>} onClick={handleCreate}>新建环境</Button>
-            </Space>
-
-            <Table
-                dataSource={envs}
-                columns={columns}
-                rowKey="id"
-                loading={loading}
-                pagination={{pageSize: 10}}
-                size="small"
-            />
-
-            <Modal
-                title={editing ? `编辑环境: ${editing.envCode}` : '新建环境'}
-                open={modalOpen}
-                onCancel={() => setModalOpen(false)}
-                onOk={handleSave}
-                width={650}
-            >
-                <Form form={form} layout="vertical" style={{marginTop: 16}}>
-                    <Row gutter={16}>
-                        <Col span={12}>
-                            <Form.Item name="envCode" label="环境编码" rules={[{required: true}]}>
-                                <Input placeholder="dev / staging / prod" disabled={!!editing}/>
-                            </Form.Item>
-                        </Col>
-                        <Col span={12}>
-                            <Form.Item name="envName" label="环境名称" rules={[{required: true}]}>
-                                <Input placeholder="开发环境"/>
-                            </Form.Item>
-                        </Col>
-                    </Row>
-                    <Form.Item name="envType" label="环境类型" rules={[{required: true}]}>
-                        <Select options={ENV_TYPES}/>
-                    </Form.Item>
-                    <Form.Item name="baseUrl" label="真实服务地址"
-                               extra="REAL/MIXED 时使用。MIXED 时未匹配的请求会转发到这里">
-                        <Input placeholder="https://api.staging.example.com"/>
-                    </Form.Item>
-                    <Row gutter={16}>
-                        <Col span={12}>
-                            <Form.Item name="mockPriority" label="Mock 优先级">
-                                <InputNumber min={0} max={10} style={{width: '100%'}}/>
-                            </Form.Item>
-                        </Col>
-                        <Col span={12}>
-                            <Form.Item name="isDefault" label="是否默认" valuePropName="checked">
-                                <Switch checkedChildren="是" unCheckedChildren="否"/>
-                            </Form.Item>
-                        </Col>
-                    </Row>
-                    <Form.Item name="description" label="描述">
-                        <Input.TextArea rows={3} placeholder="环境的用途说明"/>
-                    </Form.Item>
-                </Form>
-            </Modal>
-        </div>
-    )
-}

package/src/components/MockPlatform/MockTemplateHelper.jsx

@@ -1,200 +0,0 @@
-import {useState} from 'react'
-import {Button, Card, Col, Input, Row, Space, Tag, Tooltip, Typography} from 'antd'
-import {
-    CodeOutlined,
-    CopyOutlined,
-    FunctionOutlined,
-    InfoCircleOutlined,
-    ReloadOutlined,
-    SearchOutlined
-} from '@ant-design/icons'
-import {message} from 'antd'
-
-const {Text, Paragraph} = Typography
-
-/**
- * Mock 模板表达式目录
- * 同步自 MockTemplateEngine (z-mock) 实现的 @xxx 表达式
- */
-export const TEMPLATE_EXPRESSIONS = [
-    {
-        group: '基础数据', icon: <CodeOutlined/>,
-        items: [
-            {syntax: '@uuid', desc: '随机 UUID', example: 'a3f2e1b7-8c4d-4e6f-9a1b-2c3d4e5f6a7b'},
-            {syntax: '@int(1, 100)', desc: '随机整数（含边界）', example: '42'},
-            {syntax: '@int', desc: '随机整数（0-1000）', example: '731'},
-            {syntax: '@boolean', desc: '随机布尔', example: 'true'},
-            {syntax: '@pick("a","b","c")', desc: '从列表随机取一项', example: '"b"'},
-        ]
-    },
-    {
-        group: '时间相关', icon: <FunctionOutlined/>,
-        items: [
-            {syntax: '@datetime', desc: '当前时间 (yyyy-MM-dd HH:mm:ss)', example: '2026-06-17 22:30:15'},
-            {syntax: '@date', desc: '当前日期 (yyyy-MM-dd)', example: '2026-06-17'},
-            {syntax: '@time', desc: '当前时间戳 (毫秒)', example: '1718639415000'},
-            {syntax: '@timestamp', desc: 'Unix 秒级时间戳', example: '1718639415'},
-        ]
-    },
-    {
-        group: '文本生成', icon: <FunctionOutlined/>,
-        items: [
-            {syntax: '@name', desc: '随机中文姓名', example: '张伟'},
-            {syntax: '@firstName', desc: '随机名', example: '伟'},
-            {syntax: '@lastName', desc: '随机姓', example: '张'},
-            {syntax: '@email', desc: '随机邮箱', example: 'zhangwei@example.com'},
-            {syntax: '@phone', desc: '随机手机号（中国）', example: '13812345678'},
-            {syntax: '@idCard', desc: '随机身份证号', example: '110101199003078234'},
-            {syntax: '@word', desc: '随机英文单词', example: 'horizon'},
-            {syntax: '@sentence(5, 10)', desc: '随机句子 (5-10 词)', example: 'The quick brown fox jumps.'},
-            {syntax: '@paragraph(3, 5)', desc: '随机段落 (3-5 句)', example: '...'},
-        ]
-    },
-    {
-        group: '序列与状态', icon: <FunctionOutlined/>,
-        items: [
-            {syntax: '@sequence(1)', desc: '自增序号（每次调用 +1，1 起始）', example: '1, 2, 3, ...'},
-            {syntax: '@sequence(100, 5)', desc: '自增序号（100 起始，步长 5）', example: '100, 105, 110, ...'},
-        ]
-    },
-    {
-        group: '请求上下文', icon: <FunctionOutlined/>,
-        items: [
-            {syntax: '#path.id', desc: '从 URL 路径取值 /users/123 → 123', example: '123'},
-            {syntax: '#query.page', desc: '从 query string 取值 ?page=2', example: '2'},
-            {syntax: '#header.X-Token', desc: '从请求头取值', example: 'abc.def.ghi'},
-            {syntax: '#body.username', desc: '从请求体 JSON 取值', example: '"alice"'},
-        ]
-    },
-]
-
-/**
- * MockTemplateHelper — 模板表达式面板
- *
- * 用法：
- *   <MockTemplateHelper onInsert={(expr) => form.setFieldsValue({ responseTemplate: prev + expr })} />
- *
- * @param onInsert 选中表达式后回调（参数为 syntax 字符串）
- * @param formField 当前正在编辑的 Form.Item 字段名（用于 getFieldValue 读取当前内容）
- * @param form AntD form 实例（可选）
- */
-export default function MockTemplateHelper({onInsert, form, formField = 'responseTemplate'}) {
-    const [filter, setFilter] = useState('')
-
-    const handleInsert = (syntax) => {
-        // 复制到剪贴板
-        try {
-            navigator.clipboard?.writeText(syntax)
-        } catch {
-        }
-        if (onInsert) {
-            onInsert(syntax)
-        } else if (form) {
-            const prev = form.getFieldValue(formField) || ''
-            form.setFieldsValue({[formField]: prev + (prev.endsWith('\n') || !prev ? '' : ' ') + syntax})
-        }
-        message.success(`已插入: ${syntax}`)
-    }
-
-    const handleCopy = (text) => {
-        try {
-            navigator.clipboard?.writeText(text)
-            message.success('已复制到剪贴板')
-        } catch {
-            message.warning('复制失败，请手动选择')
-        }
-    }
-
-    const lowerFilter = filter.toLowerCase()
-    const filteredGroups = TEMPLATE_EXPRESSIONS.map(g => ({
-        ...g,
-        items: g.items.filter(it =>
-            !lowerFilter ||
-            it.syntax.toLowerCase().includes(lowerFilter) ||
-            it.desc.toLowerCase().includes(lowerFilter) ||
-            it.example.toLowerCase().includes(lowerFilter)
-        )
-    })).filter(g => g.items.length > 0)
-
-    const totalCount = TEMPLATE_EXPRESSIONS.reduce((s, g) => s + g.items.length, 0)
-    const filteredCount = filteredGroups.reduce((s, g) => s + g.items.length, 0)
-
-    return (
-        <Card
-            size="small"
-            title={
-                <Space>
-                    <CodeOutlined/>
-                    <Text strong>模板表达式</Text>
-                    <Tag color="blue">{filteredCount}/{totalCount}</Tag>
-                    <Tooltip title="点击按钮即可插入到上方响应模板；点击 syntax 文本可复制">
-                        <InfoCircleOutlined style={{color: '#999'}}/>
-                    </Tooltip>
-                </Space>
-            }
-            extra={
-                <Input
-                    size="small"
-                    placeholder="搜索 @ 表达式"
-                    prefix={<SearchOutlined/>}
-                    value={filter}
-                    onChange={e => setFilter(e.target.value)}
-                    style={{width: 180}}
-                    allowClear
-                />
-            }
-            style={{marginTop: 8, background: '#fafafa'}}
-            styles={{body: {padding: 12, maxHeight: 320, overflow: 'auto'}}}
-        >
-            {filteredGroups.length === 0 && (
-                <Text type="secondary" style={{display: 'block', textAlign: 'center', padding: 16}}>
-                    没有匹配的表达式
-                </Text>
-            )}
-            {filteredGroups.map(group => (
-                <div key={group.group} style={{marginBottom: 12}}>
-                    <Space size={4} style={{marginBottom: 6}}>
-                        {group.icon}
-                        <Text strong style={{fontSize: 13}}>{group.group}</Text>
-                        <Tag>{group.items.length}</Tag>
-                    </Space>
-                    <Row gutter={[8, 8]}>
-                        {group.items.map(item => (
-                            <Col span={24} key={item.syntax}>
-                                <div
-                                    style={{
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        padding: '6px 8px',
-                                        background: '#fff',
-                                        border: '1px solid #f0f0f0',
-                                        borderRadius: 4,
-                                        gap: 8,
-                                    }}
-                                >
-                                    <Tooltip title="点击复制">
-                                        <Text code
-                                              style={{cursor: 'pointer', minWidth: 140, fontSize: 12}}
-                                              onClick={() => handleCopy(item.syntax)}>
-                                            {item.syntax}
-                                        </Text>
-                                    </Tooltip>
-                                    <Text type="secondary" style={{fontSize: 12, flex: 1}}>
-                                        {item.desc}
-                                    </Text>
-                                    <Tag color="default" style={{margin: 0, fontFamily: 'monospace'}}>
-                                        {item.example}
-                                    </Tag>
-                                    <Tooltip title="插入到响应模板">
-                                        <Button size="small" type="text" icon={<CopyOutlined/>}
-                                                onClick={() => handleInsert(item.syntax)}/>
-                                    </Tooltip>
-                                </div>
-                            </Col>
-                        ))}
-                    </Row>
-                </div>
-            ))}
-        </Card>
-    )
-}