@yuku123/z-frontend-common 0.2.9 → 1.1.0

package/src/components/LowCode/LowCodePage.jsx

@@ -1,31 +0,0 @@
-import React from 'react'
-import {useParams} from 'react-router-dom'
-import LowCodeModel from './LowCodeModel'
-import LowCodeRuntime from './LowCodeRuntime'
-
-/**
- * LowCodePage 派发器 (z-lc Phase 1)
- * <p>
- * 单一入口 /form/:entity 拆分为两个真实页面:
- * <ul>
- *   <li>/form/_model?appCode=xxx   → LowCodeModel (实体/字段编辑器)</li>
- *   <li>/form/{entityCode}?appCode=xxx → LowCodeRuntime (通用 CRUD)</li>
- * </ul>
- */
-const LowCodePage = () => {
-    const {entity: entityCode} = useParams()
-    if (!entityCode) {
-        return (
-            <div style={{padding: 24}}>
-                缺少实体编码. 请访问 <code>/form/_model</code> 编辑模型,
-                或 <code>/form/&#123;entityCode&#125;</code> 运行时 CRUD.
-            </div>
-        )
-    }
-    if (entityCode === '_model') {
-        return <LowCodeModel/>
-    }
-    return <LowCodeRuntime/>
-}
-
-export default LowCodePage

package/src/components/LowCode/LowCodeRuntime.jsx

@@ -1,335 +0,0 @@
-import React, {useCallback, useEffect, useState} from 'react'
-import {useParams, useSearchParams} from 'react-router-dom'
-import {
-    Alert,
-    Button,
-    Card,
-    DatePicker,
-    Empty,
-    Form,
-    Input,
-    InputNumber,
-    message,
-    Modal,
-    Select,
-    Space,
-    Spin,
-    Switch,
-    Table,
-    Tag
-} from 'antd'
-import {DatabaseOutlined, DeleteOutlined, EditOutlined, PlusOutlined, ReloadOutlined} from '@ant-design/icons'
-import request from '../../utils/request'
-
-const {Option} = Select
-
-const FIELD_TYPE_INPUT = {
-    STRING: {component: Input, props: {}},
-    TEXT: {component: Input.TextArea, props: {rows: 3}},
-    INT: {component: InputNumber, props: {}},
-    LONG: {component: InputNumber, props: {}},
-    DECIMAL: {component: InputNumber, props: {step: 0.01}},
-    BOOLEAN: {component: Switch, props: {}},
-    DATE: {component: DatePicker, props: {format: 'YYYY-MM-DD'}},
-    DATETIME: {component: DatePicker, props: {format: 'YYYY-MM-DD HH:mm:ss', showTime: true}},
-    JSON: {component: Input.TextArea, props: {rows: 3, placeholder: 'JSON 字符串'}},
-    REF: {component: InputNumber, props: {}}
-}
-
-/**
- * LowCodeRuntime: 通用 CRUD 页面
- * <p>
- * 通过 GET  /api/lc/app/{appCode}/schema 取 entity 定义
- * 通过 POST /api/lc/runtime/{entityCode}/{list|get|create|update|delete} 走 CRUD
- */
-export default function LowCodeRuntime() {
-    const {entity: entityCodeParam} = useParams()
-    const [searchParams] = useSearchParams()
-    const appCode = searchParams.get('appCode') || 'demo'
-    const tenantCode = searchParams.get('tenant') || localStorage.getItem('z_tenant') || 'default'
-
-    const [schema, setSchema] = useState([])
-    const [entity, setEntity] = useState(null)
-    const [rows, setRows] = useState([])
-    const [total, setTotal] = useState(0)
-    const [page, setPage] = useState(1)
-    const [size, setSize] = useState(10)
-    const [loading, setLoading] = useState(false)
-    const [modalOpen, setModalOpen] = useState(false)
-    const [editing, setEditing] = useState(null) // null = create, { id } = update
-    const [form] = Form.useForm()
-    const [dictCache, setDictCache] = useState({}) // { dictCode: [{ value, label }] }
-
-    const fetchSchema = useCallback(async () => {
-        try {
-            const list = await request.get(`/lc/app/${appCode}/schema`, {params: {tenantCode}})
-            setSchema(Array.isArray(list) ? list : [])
-            const e = (list || []).find(x => x.entityCode === entityCodeParam)
-            setEntity(e || null)
-        } catch (err) {
-            message.error('加载 schema 失败: ' + (err?.message || '未知错误'))
-            setSchema([])
-            setEntity(null)
-        }
-    }, [appCode, tenantCode, entityCodeParam])
-
-    const fetchDict = useCallback(async (dictCode) => {
-        if (!dictCode || dictCache[dictCode]) return dictCache[dictCode] || []
-        try {
-            // 走 z-meta 字典接口: /dict/items/get?dictCode=xxx
-            const arr = await request.get(`/dict/items/get`, {params: {dictCode}})
-            const list = Array.isArray(arr) ? arr : []
-            const normalized = list.map(it => ({
-                value: it.itemValue ?? it.itemCode,
-                label: it.itemName ?? it.itemLabel ?? it.itemCode
-            }))
-            setDictCache(prev => ({...prev, [dictCode]: normalized}))
-            return normalized
-        } catch (e) {
-            // 字典不存在也不报错 — 业务表允许 dict 字段没值
-            return []
-        }
-    }, [dictCache])
-
-    const fetchList = useCallback(async () => {
-        if (!entity) return
-        setLoading(true)
-        try {
-            const res = await request.post(`/lc/runtime/${entity.entityCode}/list`, {
-                tenantCode,
-                appCode,
-                entityCode: entity.entityCode,
-                page, size
-            })
-            setRows(res?.records || [])
-            setTotal(res?.total || 0)
-        } catch (err) {
-            message.error('查询失败: ' + (err?.message || '未知错误'))
-            setRows([])
-            setTotal(0)
-        } finally {
-            setLoading(false)
-        }
-    }, [entity, tenantCode, appCode, page, size])
-
-    useEffect(() => {
-        fetchSchema()
-    }, [fetchSchema])
-    useEffect(() => {
-        fetchList()
-    }, [fetchList])
-
-    // 预取字典
-    useEffect(() => {
-        if (!entity || !entity.fields) return
-        entity.fields.forEach(f => {
-            if (f.dictCode) fetchDict(f.dictCode)
-        })
-    }, [entity, fetchDict])
-
-    if (!entityCodeParam) {
-        return <Empty description="缺少实体编码 (路径变量 :entity)"/>
-    }
-
-    if (!entity) {
-        return (
-            <Card title={<><DatabaseOutlined/> z-lc 运行时</>}>
-                <Alert
-                    type="warning"
-                    showIcon
-                    title={`实体 ${entityCodeParam} 未定义`}
-                    description={`请先在 模型编辑器 (路径 /form/_model?appCode=${appCode}) 中定义实体, 然后刷新此页.`}
-                />
-            </Card>
-        )
-    }
-
-    const fields = entity.fields || []
-
-    const openCreate = () => {
-        setEditing(null)
-        form.resetFields()
-        setModalOpen(true)
-    }
-
-    const openEdit = async (row) => {
-        setEditing(row)
-        try {
-            const full = await request.post(`/lc/runtime/${entity.entityCode}/get`, {
-                tenantCode, appCode, entityCode: entity.entityCode, id: row.id
-            })
-            form.resetFields()
-            form.setFieldsValue(full || row)
-        } catch (e) {
-            // 回退到当前行
-            form.resetFields()
-            form.setFieldsValue(row)
-        }
-        setModalOpen(true)
-    }
-
-    const handleDelete = (row) => {
-        Modal.confirm({
-            title: '确定删除?',
-            content: `id=${row.id}`,
-            okType: 'danger',
-            onOk: async () => {
-                try {
-                    await request.post(`/lc/runtime/${entity.entityCode}/delete`, {
-                        tenantCode, appCode, entityCode: entity.entityCode, id: row.id
-                    })
-                    message.success('删除成功')
-                    fetchList()
-                } catch (e) {
-                    message.error('删除失败: ' + (e?.message || '未知错误'))
-                }
-            }
-        })
-    }
-
-    const handleSubmit = async () => {
-        try {
-            const values = await form.validateFields()
-            const body = {
-                tenantCode, appCode, entityCode: entity.entityCode, fieldValues: {...values}
-            }
-            if (editing) {
-                body.fieldValues.id = editing.id
-                await request.post(`/lc/runtime/${entity.entityCode}/update`, body)
-                message.success('更新成功')
-            } else {
-                await request.post(`/lc/runtime/${entity.entityCode}/create`, body)
-                message.success('创建成功')
-            }
-            setModalOpen(false)
-            fetchList()
-        } catch (e) {
-            if (e?.errorFields) {
-                message.error('请补全必填字段')
-            } else {
-                message.error('提交失败: ' + (e?.message || '未知错误'))
-            }
-        }
-    }
-
-    const renderCell = (f, row) => {
-        const v = row[f.fieldCode]
-        const labelKey = f.fieldCode + '_label'
-        if (row[labelKey] != null) {
-            return <Tag>{row[labelKey]}</Tag>
-        }
-        if (v == null) return '-'
-        if (f.fieldType === 'BOOLEAN') return v ? '是' : '否'
-        if (f.fieldType === 'DATETIME' || f.fieldType === 'DATE') {
-            // JdbcTemplate 返回 java.sql.Timestamp / Date
-            try {
-                return new Date(v).toLocaleString()
-            } catch {
-                return String(v)
-            }
-        }
-        return String(v)
-    }
-
-    const columns = [
-        {title: 'ID', dataIndex: 'id', key: 'id', width: 80},
-        ...fields.map(f => ({
-            title: f.fieldName || f.fieldCode,
-            dataIndex: f.fieldCode,
-            key: f.fieldCode,
-            render: (_, row) => renderCell(f, row)
-        })),
-        {
-            title: '操作',
-            key: 'action',
-            width: 180,
-            fixed: 'right',
-            render: (_, row) => (
-                <Space>
-                    <Button type="link" icon={<EditOutlined/>} onClick={() => openEdit(row)}>编辑</Button>
-                    <Button type="link" danger icon={<DeleteOutlined/>} onClick={() => handleDelete(row)}>删除</Button>
-                </Space>
-            )
-        }
-    ]
-
-    const renderFormItem = (f) => {
-        const type = (f.fieldType || 'STRING').toUpperCase()
-        if (f.dictCode) {
-            const opts = dictCache[f.dictCode] || []
-            return (
-                <Select placeholder={`选择 ${f.fieldName || f.fieldCode}`} allowClear showSearch
-                        optionFilterProp="label">
-                    {opts.map(o => <Option key={o.value} value={o.value} label={o.label}>{o.label}</Option>)}
-                </Select>
-            )
-        }
-        const conf = FIELD_TYPE_INPUT[type] || FIELD_TYPE_INPUT.STRING
-        const Cmp = conf.component
-        return <Cmp {...conf.props} placeholder={f.fieldName || f.fieldCode}/>
-    }
-
-    return (
-        <Card
-            title={<><DatabaseOutlined/> {entity.entityName || entity.entityCode} (运行时 CRUD)</>}
-            extra={
-                <Space>
-                    <Button icon={<ReloadOutlined/>} onClick={fetchList}>刷新</Button>
-                    <Button type="primary" icon={<PlusOutlined/>} onClick={openCreate}>新增</Button>
-                </Space>
-            }
-        >
-            <Alert
-                type="info"
-                showIcon
-                title={`App=${appCode} · Tenant=${tenantCode} · 字段数=${fields.length}`}
-                style={{marginBottom: 16}}
-            />
-            <Spin spinning={loading}>
-                <Table
-                    rowKey="id"
-                    columns={columns}
-                    dataSource={rows}
-                    pagination={{
-                        current: page, pageSize: size, total,
-                        showSizeChanger: true, showTotal: t => `共 ${t} 条`,
-                        onChange: (p, s) => {
-                            setPage(p);
-                            setSize(s)
-                        }
-                    }}
-                    scroll={{x: 'max-content'}}
-                    size="small"
-                />
-            </Spin>
-
-            <Modal
-                title={editing ? `编辑 #${editing.id}` : '新增记录'}
-                open={modalOpen}
-                onCancel={() => setModalOpen(false)}
-                onOk={handleSubmit}
-                width={680}
-                destroyOnHidden
-            >
-                <Form form={form} layout="vertical">
-                    {fields.map(f => (
-                        <Form.Item
-                            key={f.fieldCode}
-                            name={f.fieldCode}
-                            label={
-                                <span>
-                  {f.fieldName || f.fieldCode}
-                                    {f.required && <span style={{color: 'red'}}> *</span>}
-                                    <Tag style={{marginLeft: 8}}>{f.fieldType}</Tag>
-                </span>
-                            }
-                            rules={f.required ? [{required: true, message: '必填'}] : []}
-                        >
-                            {renderFormItem(f)}
-                        </Form.Item>
-                    ))}
-                </Form>
-            </Modal>
-        </Card>
-    )
-}

package/src/components/LowCode/MaterializePage.jsx

@@ -1,235 +0,0 @@
-import {useEffect, useState} from 'react'
-import {Alert, Badge, Button, Card, Col, Form, Input, message, Modal, Popconfirm, Row, Select, Space, Table, Tabs, Tag, Tooltip, Typography} from 'antd'
-import {
-    CheckCircleOutlined,
-    CodeOutlined,
-    CopyOutlined,
-    DeleteOutlined,
-    DownloadOutlined,
-    ExportOutlined,
-    FileTextOutlined,
-    HistoryOutlined,
-    ReloadOutlined
-} from '@ant-design/icons'
-import request from '../../utils/request'
-
-const {Text, Paragraph} = Typography
-const {TextArea} = Input
-
-const STATUS_COLORS = {
-    PENDING: 'default', GENERATING: 'processing', READY: 'success', FAILED: 'error',
-}
-const TYPE_COLORS = {
-    Entity: 'blue', Mapper: 'cyan', Service: 'green', ServiceImpl: 'lime',
-    Controller: 'orange', ReactPage: 'purple', File: 'default',
-}
-
-/**
- * z-lc 代码物化页面 (FEATURE006 T1).
- * <p>
- * 路径: /form/_materialize?appCode=xxx
- * <p>
- * 功能:
- * 1. 选择导出路径 + entity 范围 → 触发物化 (异步)
- * 2. 列出该 app 的历史物化批次 + 状态
- * 3. 选中某个 READY 批次 → 查看 diff (生成的文件清单)
- * 4. 单个文件 → 代码预览 + 复制到剪贴板
- */
-export default function MaterializePage() {
-    const params = new URLSearchParams(window.location.search)
-    const initialAppCode = params.get('appCode') || 'demo'
-
-    const [appCode] = useState(initialAppCode)
-    const [batches, setBatches] = useState([])
-    const [loading, setLoading] = useState(false)
-    const [triggerOpen, setTriggerOpen] = useState(false)
-    const [diffOpen, setDiffOpen] = useState(false)
-    const [diffFiles, setDiffFiles] = useState([])
-    const [selectedFile, setSelectedFile] = useState(null)
-    const [entities, setEntities] = useState([])
-    const [form] = Form.useForm()
-
-    useEffect(() => {
-        loadBatches()
-        loadEntities()
-    }, [appCode])
-
-    const loadBatches = async () => {
-        setLoading(true)
-        try {
-            const r = await request.get(`/lc/app/${appCode}/materialize/list`, {params: {limit: 50}})
-            setBatches(r?.data || [])
-        } catch (e) {
-            message.warning('加载批次列表失败')
-        } finally {
-            setLoading(false)
-        }
-    }
-
-    const loadEntities = async () => {
-        try {
-            const r = await request.get(`/lc/app/${appCode}/schema`)
-            const list = r?.data?.entities || r?.data || []
-            setEntities(list)
-        } catch (e) {
-            // ignore
-        }
-    }
-
-    const handleTrigger = async () => {
-        try {
-            const values = await form.validateFields()
-            const payload = {
-                appCode,
-                materializationPath: values.materializationPath,
-                entityCodes: values.entityCodes?.length ? values.entityCodes : null,
-                description: values.description,
-                triggerSource: 'USER',
-            }
-            await request.post(`/lc/app/${appCode}/materialize`, payload)
-            message.success('物化已触发，请稍后查看状态')
-            setTriggerOpen(false)
-            form.resetFields()
-            loadBatches()
-        } catch (e) {
-            if (!e?.errorFields) message.error('触发失败：' + (e?.message || '未知错误'))
-        }
-    }
-
-    const handleShowDiff = async (batch) => {
-        try {
-            const r = await request.get(`/lc/app/${appCode}/materialize/diff`, {params: {id: batch.id}})
-            const files = r?.data || []
-            setDiffFiles(files)
-            setDiffOpen(true)
-            setSelectedFile(null)
-        } catch (e) {
-            message.error('加载文件清单失败')
-        }
-    }
-
-    const handleCopy = (text) => {
-        try {
-            navigator.clipboard?.writeText(text)
-            message.success('已复制到剪贴板')
-        } catch {
-            message.warning('复制失败')
-        }
-    }
-
-    const handleDownload = (file) => {
-        const blob = new Blob([file.content], {type: 'text/plain;charset=utf-8'})
-        const url = URL.createObjectURL(blob)
-        const a = document.createElement('a')
-        a.href = url
-        a.download = file.relativePath.split('/').pop()
-        a.click()
-        URL.revokeObjectURL(url)
-    }
-
-    const batchColumns = [
-        {title: '批次号', dataIndex: 'exportVersion', width: 180, render: v => <Text code>{v}</Text>},
-        {
-            title: '状态', dataIndex: 'status', width: 100,
-            render: v => <Badge status={STATUS_COLORS[v] === 'success' ? 'success' : STATUS_COLORS[v] === 'error' ? 'error' : 'processing'} text={v}/>
-        },
-        {title: '文件数', dataIndex: 'fileCount', width: 80, align: 'center', render: v => v || 0},
-        {title: '来源', dataIndex: 'triggerSource', width: 80, render: v => <Tag>{v}</Tag>},
-        {title: '路径', dataIndex: 'materializationPath', ellipsis: true, render: v => <Text type="secondary" style={{fontSize: 12}}>{v}</Text>},
-        {title: '创建时间', dataIndex: 'createTime', width: 170},
-        {
-            title: '操作', key: 'action', width: 200, fixed: 'right',
-            render: (_, r) => (
-                <Space size="small">
-                    <Button size="small" type="link" icon={<FileTextOutlined/>}
-                            onClick={() => handleShowDiff(r)}
-                            disabled={r.status !== 'READY' && r.status !== 'GENERATING'}>
-                        查看文件
-                    </Button>
-                </Space>
-            )
-        },
-    ]
-
-    const fileColumns = [
-        {title: '类型', dataIndex: 'type', width: 100, render: v => <Tag color={TYPE_COLORS[v] || 'default'}>{v}</Tag>},
-        {title: 'Entity', dataIndex: 'entityCode', width: 120, render: v => v ? <Text code>{v}</Text> : '-'},
-        {title: '相对路径', dataIndex: 'relativePath', ellipsis: true, render: v => <Text code style={{fontSize: 12}}>{v}</Text>},
-        {title: '大小', dataIndex: 'sizeBytes', width: 90, render: v => `${(v/1024).toFixed(1)}KB`},
-        {
-            title: '操作', key: 'action', width: 200, fixed: 'right',
-            render: (_, r) => (
-                <Space size="small">
-                    <Button size="small" type="link" onClick={() => setSelectedFile(r)}>预览</Button>
-                    <Button size="small" type="link" icon={<CopyOutlined/>} onClick={() => handleCopy(r.content)}>复制</Button>
-                    <Button size="small" type="link" icon={<DownloadOutlined/>} onClick={() => handleDownload(r)}>下载</Button>
-                </Space>
-            )
-        },
-    ]
-
-    return (
-        <div style={{padding: 16}}>
-            <Card>
-                <Alert type="info" showIcon icon={<CodeOutlined/>} style={{marginBottom: 16}}
-                       message={`z-lc 代码物化 (FEATURE006 T1) — App: ${appCode}`}
-                       description="将低代码定义的 entity/field 渲染为可编译的 Java (Entity/Mapper/Service/Controller) + React 页面代码。导出是异步的, 完成后可在此查看文件清单。"/>
-
-                <Space style={{marginBottom: 16}}>
-                    <Button icon={<ReloadOutlined/>} onClick={loadBatches}>刷新</Button>
-                    <Button type="primary" icon={<ExportOutlined/>} onClick={() => setTriggerOpen(true)}>导出代码</Button>
-                    <Button icon={<HistoryOutlined/>} onClick={() => message.info(`共 ${batches.length} 个历史批次`)}>历史</Button>
-                </Space>
-
-                <Table dataSource={batches} columns={batchColumns} rowKey="id" loading={loading}
-                       pagination={{pageSize: 10}} size="small" scroll={{x: 1000}}/>
-            </Card>
-
-            <Modal title="触发代码物化" open={triggerOpen} onCancel={() => setTriggerOpen(false)} onOk={handleTrigger}
-                   okText="开始导出" width={600}>
-                <Form form={form} layout="vertical" style={{marginTop: 16}}
-                      initialValues={{materializationPath: `app-${appCode}/v1`}}>
-                    <Form.Item name="materializationPath" label="导出根路径 (相对沙箱默认根)"
-                               rules={[{required: true, message: '请输入路径'}]}
-                               extra="默认根: ${user.home}/z-lc-materialized. 如需写入绝对路径, 服务端需配置 z-lc.materialize.allow-absolute-path=true">
-                        <Input placeholder={`app-${appCode}/v1`}/>
-                    </Form.Item>
-                    <Form.Item name="entityCodes" label="导出的 entity (留空 = 全量)">
-                        <Select mode="multiple" placeholder="选择 entity" allowClear
-                                options={entities.map(e => ({value: e.entityCode, label: `${e.entityCode} (${e.tableName})`}))}/>
-                    </Form.Item>
-                    <Form.Item name="description" label="备注">
-                        <TextArea rows={2} placeholder="本次导出的业务说明"/>
-                    </Form.Item>
-                </Form>
-            </Modal>
-
-            <Modal title={`物化文件清单 (${diffFiles.length} 个)`} open={diffOpen}
-                   onCancel={() => { setDiffOpen(false); setSelectedFile(null) }}
-                   footer={<Button onClick={() => { setDiffOpen(false); setSelectedFile(null) }}>关闭</Button>}
-                   width={selectedFile ? 1100 : 800}>
-                {selectedFile ? (
-                    <div>
-                        <Space style={{marginBottom: 8}}>
-                            <Button onClick={() => setSelectedFile(null)}>← 返回清单</Button>
-                            <Text strong>{selectedFile.relativePath}</Text>
-                            <Tag color={TYPE_COLORS[selectedFile.type] || 'default'}>{selectedFile.type}</Tag>
-                            <Button size="small" icon={<CopyOutlined/>} onClick={() => handleCopy(selectedFile.content)}>复制</Button>
-                            <Button size="small" icon={<DownloadOutlined/>} onClick={() => handleDownload(selectedFile)}>下载</Button>
-                        </Space>
-                        <pre style={{
-                            background: '#1e1e1e', color: '#d4d4d4', padding: 16,
-                            borderRadius: 8, maxHeight: 500, overflow: 'auto',
-                            fontSize: 12, fontFamily: 'Menlo, Monaco, monospace',
-                        }}>
-                            {selectedFile.content}
-                        </pre>
-                    </div>
-                ) : (
-                    <Table dataSource={diffFiles} columns={fileColumns} rowKey="relativePath"
-                           pagination={{pageSize: 20}} size="small" scroll={{x: 700}}/>
-                )}
-            </Modal>
-        </div>
-    )
-}

package/src/components/LowCode/index.js

@@ -1 +0,0 @@
-export {default} from './LowCodePage'