@jiangood/open-admin 3.1.2 → 3.1.3

package/package.json

@@ -40,8 +40,7 @@
   "type": "module",
   "files": [
     "src/*",
-    "vite-plugin/*",
-    "!src/pages/test/*"
+    "vite-plugin/*"
   ],
   "main": "src/index.ts",
   "exports": {
@@ -59,7 +58,7 @@
     "test:e2e": "playwright test",
     "test:e2e:ui": "playwright test --ui"
   },
-  "version": "3.1.2",
+  "version": "3.1.3",
   "overrides": {
     "zod-validation-error": "^4.0.2"
   }

package/src/framework/biz/index.tsx

@@ -27,14 +27,9 @@ class InnerFieldDeptTreeSelect extends React.Component<ComponentProps<typeof Fie
         return <FieldRemoteTreeSelect url="admin/sysOrg/dept-tree" {...this.props} />;
     }
 }
-class InnerFieldOrgTreeSelect extends React.Component<ComponentProps<typeof FieldRemoteTreeSelect>> {
-    render() {
-        return <FieldRemoteTreeSelect url="admin/sysOrg/dept-tree" {...this.props} />;
-    }
-}
 class InnerFieldOrgTreeMultipleSelect extends React.Component<ComponentProps<typeof FieldRemoteTreeSelect>> {
     render() {
-        return <FieldRemoteTreeSelect url="admin/sysOrg/dept-tree" multiple {...this.props} />;
+        return <InnerFieldDeptTreeSelect multiple {...this.props} />;
     }
 }
 
@@ -42,6 +37,7 @@ export const FieldUserSelect = InnerFieldUserSelect;
 export const FieldUserSelectMultiple = InnerFieldUserSelectMultiple;
 export const FieldUnitTreeSelect = InnerFieldUnitTreeSelect;
 export const FieldDeptTreeSelect = InnerFieldDeptTreeSelect;
-export const FieldOrgTreeSelect = InnerFieldOrgTreeSelect;
+/** FieldDeptTreeSelect 的别名 */
+export const FieldOrgTreeSelect = InnerFieldDeptTreeSelect;
 export const FieldOrgTreeMultipleSelect = InnerFieldOrgTreeMultipleSelect;
 

package/src/framework/components/ProTable/index.less

@@ -59,7 +59,25 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
+        gap: 8px;
         margin: 8px;
+
+        .pro-table-toolbar-left {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            flex: 1;
+            min-width: 0;
+        }
+
+        .pro-table-toolbar-right {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            flex-shrink: 0;
+            /* 只提供右侧插槽时，space-between 退化为 flex-start，靠 auto 兜住右对齐 */
+            margin-left: auto;
+        }
     }
 }
 

package/src/framework/components/ProTable/index.tsx

@@ -23,6 +23,15 @@ export interface ProTableRequestResult<T = unknown> {
     };
 }
 
+/** 工具栏（含右侧插槽）渲染函数签名 */
+export type ProTableToolBarRender<T = unknown> = (
+    params: Record<string, unknown>,
+    selection: {
+        selectedRows: T[];
+        selectedRowKeys: React.Key[];
+    }
+) => React.ReactNode;
+
 export interface ProTableProps<T = unknown> {
     /**
      * 数据请求（Promise 式），框架自动注入 page/size/sort 参数。
@@ -37,11 +46,10 @@ export interface ProTableProps<T = unknown> {
     actionRef?: React.RefObject<ProTableActionRef | undefined>;
     /** 获取搜索表单实例 */
     formRef?: React.RefObject<FormInstance | undefined>;
-    /** 工具栏渲染，参数为当前搜索值与行选择状态 */
-    toolBarRender?: (params: Record<string, unknown>, selection: {
-        selectedRows: T[];
-        selectedRowKeys: React.Key[];
-    }) => React.ReactNode;
+    /** 工具栏渲染（左侧），参数为当前搜索值与行选择状态 */
+    toolBarRender?: ProTableToolBarRender<T>;
+    /** 工具栏右侧渲染，参数同 toolBarRender；用于导出/清理/刷新等右侧操作 */
+    toolBarRightRender?: ProTableToolBarRender<T>;
     rowKey?: string;
     /** 行选择：true 为默认 checkbox，对象可覆盖 type/onChange */
     rowSelection?: boolean | {
@@ -185,6 +193,7 @@ this.setState({loading: true})
     render() {
         const {
             toolBarRender,
+            toolBarRightRender,
             columns,
             rowSelection,
             rowKey = "id",
@@ -194,10 +203,13 @@ this.setState({loading: true})
         return <div className={'oa-pro-table '} id={this.id}>
             {this.renderForm()}
             <div className="pro-table-wrapper">
-                {toolBarRender && <div className="pro-table-toolbar">
-                    <div className="pro-table-toolbar-left">
+                {(toolBarRender || toolBarRightRender) && <div className="pro-table-toolbar">
+                    {toolBarRender && <div className="pro-table-toolbar-left">
                         {this.getToolBarRenderNode(toolBarRender)}
-                    </div>
+                    </div>}
+                    {toolBarRightRender && <div className="pro-table-toolbar-right">
+                        {this.getToolBarRenderNode(toolBarRightRender)}
+                    </div>}
                 </div>}
 
 
@@ -268,7 +280,7 @@ this.setState({loading: true})
         )
     };
 
-    getToolBarRenderNode(toolBarRender: NonNullable<ProTableProps<T>['toolBarRender']>) {
+    getToolBarRenderNode(toolBarRender: ProTableToolBarRender<T>) {
         if (!toolBarRender) {
             return
         }

package/src/framework/fields/FieldDate/index.tsx

@@ -5,6 +5,7 @@ import React from "react";
 import dayjs from "dayjs";
 import {DatePicker, TimePicker} from "antd";
 import {DateUtils} from "../../utils";
+import {DATE_PICKER_SPECS} from '../datePickerSpecs';
 import type {FieldProps} from '../types';
 
 export interface FieldDateProps extends FieldProps<string> {
@@ -28,67 +29,20 @@ export class FieldDate extends React.Component<FieldDateProps> {
     render() {
         const {type, value, onChange, ...rest} = this.props;
         const formattedType = DateUtils.convertTypeToFormat(type as string);
+        const spec = DATE_PICKER_SPECS[formattedType];
 
-        switch (formattedType) {
-            case 'YYYY':
-                return <DatePicker
-                    value={this.strToDate(value, formattedType)}
-                    onChange={v => onChange?.(this.dateToStr(v, 'YYYY'))}
-                    picker="year"
-                    {...rest}
-                />;
-            case 'YYYY-MM':
-                return <DatePicker
-                    value={this.strToDate(value, 'YYYY-MM')}
-                    onChange={v => onChange?.(this.dateToStr(v, 'YYYY-MM'))}
-                    picker="month"
-                    {...rest}
-                />;
-            case 'YYYY-QQ':
-                return <DatePicker
-                    value={this.strToDate(value, 'YYYY-QQ')}
-                    onChange={v => onChange?.(this.dateToStr(v, 'YYYY-QQ'))}
-                    picker="quarter"
-                    {...rest}
-                />;
-            case 'YYYY-MM-DD':
-                return <DatePicker
-                    value={this.strToDate(value, 'YYYY-MM-DD')}
-                    onChange={v => onChange?.(this.dateToStr(v, 'YYYY-MM-DD'))}
-                    {...rest}
-                ></DatePicker>;
-            case 'YYYY-MM-DD HH:mm':
-                return <DatePicker
-                    value={this.strToDate(value, 'YYYY-MM-DD HH:mm')}
-                    onChange={v => onChange?.(this.dateToStr(v, 'YYYY-MM-DD HH:mm'))}
-                    format='YYYY-MM-DD HH:mm'
-                    showTime
-                    {...rest}
-                ></DatePicker>;
-            case 'YYYY-MM-DD HH:mm:ss':
-                return <DatePicker
-                    value={this.strToDate(value, 'YYYY-MM-DD HH:mm:ss')}
-                    onChange={v => onChange?.(this.dateToStr(v, 'YYYY-MM-DD HH:mm:ss'))}
-                    showTime
-                    {...rest}
-                ></DatePicker>;
-            case 'HH:mm':
-                return <TimePicker
-                    format='HH:mm'
-                    value={this.strToDate(value, 'HH:mm')}
-                    onChange={v => onChange?.(this.dateToStr(v, 'HH:mm'))}
-                    {...rest}
-                ></TimePicker>;
-            case 'HH:mm:ss':
-                return <TimePicker
-                    value={this.strToDate(value, 'HH:mm:ss')}
-                    onChange={v => onChange?.(this.dateToStr(v, 'HH:mm:ss'))}
-                    {...rest}
-                ></TimePicker>;
-            default:
-                return <div>未知组件 {formattedType}</div>;
+        if (!spec) {
+            return <div>未知组件 {formattedType}</div>;
         }
 
+        const Picker = spec.time ? TimePicker : DatePicker;
+        return <Picker
+            value={this.strToDate(value, formattedType)}
+            onChange={v => onChange?.(this.dateToStr(v, formattedType))}
+            {...spec}
+            {...rest}
+        />;
+
     }
 
     strToDate(value: string | number | dayjs.Dayjs | null | undefined, fmt: string): dayjs.Dayjs | null | undefined {

package/src/framework/fields/FieldDateRange/index.tsx

@@ -5,6 +5,7 @@ import React from "react";
 import dayjs from "dayjs";
 import {DatePicker, TimePicker} from "antd";
 import {DateUtils, StringUtils} from "../../utils";
+import {DATE_PICKER_SPECS} from '../datePickerSpecs';
 import type {FieldProps} from '../types';
 
 const SP = StringUtils.ISO_SPLITTER;
@@ -33,67 +34,20 @@ export class FieldDateRange extends React.Component<FieldDateRangeProps> {
     render() {
         const {type, value, onChange, ...rest} = this.props;
         const formattedType = DateUtils.convertTypeToFormat(type as string);
+        const spec = DATE_PICKER_SPECS[formattedType];
 
-        switch (formattedType) {
-            case 'YYYY':
-                return <DatePicker.RangePicker
-                    value={this.strToDate(value)}
-                    onChange={v => onChange?.(this.dateToStr(v, 'YYYY'))}
-                    picker="year"
-                    {...rest}
-                />;
-            case 'YYYY-MM':
-                return <DatePicker.RangePicker
-                    value={this.strToDate(value)}
-                    onChange={v => onChange?.(this.dateToStr(v, 'YYYY-MM'))}
-                    picker="month"
-                    {...rest}
-                />;
-            case 'YYYY-QQ':
-                return <DatePicker.RangePicker
-                    value={this.strToDate(value)}
-                    onChange={v => onChange?.(this.dateToStr(v, 'YYYY-QQ'))}
-                    picker="quarter"
-                    {...rest}
-                />;
-            case 'YYYY-MM-DD':
-                return <DatePicker.RangePicker
-                    value={this.strToDate(value)}
-                    onChange={v => onChange?.(this.dateToStr(v, 'YYYY-MM-DD'))}
-                    {...rest}
-                />;
-            case 'YYYY-MM-DD HH:mm':
-                return <DatePicker.RangePicker
-                    value={this.strToDate(value)}
-                    onChange={v => onChange?.(this.dateToStr(v, 'YYYY-MM-DD HH:mm'))}
-                    format='YYYY-MM-DD HH:mm'
-                    showTime
-                    {...rest}
-                />;
-            case 'YYYY-MM-DD HH:mm:ss':
-                return <DatePicker.RangePicker
-                    value={this.strToDate(value)}
-                    onChange={v => onChange?.(this.dateToStr(v, 'YYYY-MM-DD HH:mm:ss'))}
-                    showTime
-                    {...rest}
-                />;
-            case 'HH:mm':
-                return <TimePicker.RangePicker
-                    format='HH:mm'
-                    value={this.strToDate(value)}
-                    onChange={v => onChange?.(this.dateToStr(v, 'HH:mm'))}
-                    {...rest}
-                />;
-            case 'HH:mm:ss':
-                return <TimePicker.RangePicker
-                    value={this.strToDate(value)}
-                    onChange={v => onChange?.(this.dateToStr(v, 'HH:mm:ss'))}
-                    {...rest}
-                />;
-            default:
-                return <div>未知组件 {formattedType}</div>;
+        if (!spec) {
+            return <div>未知组件 {formattedType}</div>;
         }
 
+        const Picker = spec.time ? TimePicker.RangePicker : DatePicker.RangePicker;
+        return <Picker
+            value={this.strToDate(value)}
+            onChange={v => onChange?.(this.dateToStr(v, formattedType))}
+            {...spec}
+            {...rest}
+        />;
+
     }
 
     strToDate(v: string | null | undefined): [dayjs.Dayjs, dayjs.Dayjs] | null {

package/src/framework/fields/FieldEditor/index.tsx

@@ -62,7 +62,7 @@ export class FieldEditor extends React.Component<FieldEditorProps, {loading: boo
                     plugins: [
                         'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
                         'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
-                        'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount',
+                        'insertdatetime', 'media', 'table', 'help', 'wordcount',
                         'emoticons'
                     ],
                     image_description: false,

package/src/framework/fields/FieldSysOrgTree/index.tsx

@@ -3,6 +3,7 @@
  */
 import React from "react";
 import {FieldRemoteTree} from "../FieldRemoteTree";
+import {orgTreeUrl} from '../orgTree';
 import type {FieldProps} from '../types';
 
 interface FieldSysOrgTreeProps extends FieldProps<string[]> {
@@ -16,10 +17,7 @@ export class FieldSysOrgTree extends React.Component<FieldSysOrgTreeProps> {
 
   render() {
     const {type, ...rest} = this.props;
-    const url = type === 'dept'?
-        '/admin/sysOrg/dept-tree':
-        '/admin/sysOrg/unit-tree';
-    return <FieldRemoteTree url={url} {...rest} />;
+    return <FieldRemoteTree url={orgTreeUrl(type)} {...rest} />;
   }
 
-}
+}

package/src/framework/fields/FieldSysOrgTreeSelect/index.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import {FieldRemoteTreeSelect} from "../FieldRemoteTreeSelect";
+import {orgTreeUrl} from '../orgTree';
 import type {FieldProps} from '../types';
 
 interface FieldSysOrgTreeSelectProps extends FieldProps<string | string[]> {
@@ -14,13 +15,6 @@ export class FieldSysOrgTreeSelect extends React.Component<FieldSysOrgTreeSelect
 
     render() {
         const {type, ...rest} = this.props;
-        let url = '/admin/sysOrg/dept-tree';
-        if (type === 'unit') {
-            url = '/admin/sysOrg/unit-tree';
-        } else if (type === 'shop') {
-            url = '/admin/sysOrg/tree?type=3';
-        }
-
-        return <FieldRemoteTreeSelect url={url} {...rest}/>;
+        return <FieldRemoteTreeSelect url={orgTreeUrl(type)} {...rest}/>;
     }
 }

package/src/framework/fields/datePickerSpecs.ts

@@ -0,0 +1,22 @@
+export interface DatePickerSpec {
+    /** antd picker 属性 */
+    picker?: 'year' | 'month' | 'quarter';
+    /** antd showTime 属性 */
+    showTime?: boolean;
+    /** antd format 属性 */
+    format?: string;
+    /** 使用 TimePicker 而非 DatePicker */
+    time?: boolean;
+}
+
+/** 日期类型 → antd 选择器属性映射（FieldDate / FieldDateRange 共用） */
+export const DATE_PICKER_SPECS: Record<string, DatePickerSpec> = {
+    'YYYY': {picker: 'year'},
+    'YYYY-MM': {picker: 'month'},
+    'YYYY-QQ': {picker: 'quarter'},
+    'YYYY-MM-DD': {},
+    'YYYY-MM-DD HH:mm': {showTime: true, format: 'YYYY-MM-DD HH:mm'},
+    'YYYY-MM-DD HH:mm:ss': {showTime: true},
+    'HH:mm': {time: true, format: 'HH:mm'},
+    'HH:mm:ss': {time: true},
+}

package/src/framework/fields/orgTree.ts

@@ -0,0 +1,3 @@
+export function orgTreeUrl(type: string): string {
+    return type === 'dept' ? '/admin/sysOrg/dept-tree' : '/admin/sysOrg/unit-tree';
+}

package/src/pages/system/codegen/index.jsx

@@ -0,0 +1,205 @@
+import {Button, Collapse, Drawer, Form, Input, message, Modal, Select, Space, Switch, Tag, Typography} from 'antd'
+import React from 'react'
+import {HttpClient, Page, Perm} from '../../../framework'
+
+/**
+ * 代码生成：动态扫描实体，按实体生成常见 CRUD 代码并写入项目源码目录。
+ */
+export default class CodegenPage extends React.Component {
+
+    state = {
+        entities: [],
+        className: undefined,
+        module: '',
+        label: '',
+        parentMenu: 'sys',
+        overwrite: false,
+
+        files: [],
+        previewOpen: false,
+        confirmOpen: false,
+
+        result: null,
+        resultOpen: false,
+
+        loading: false,
+    }
+
+    componentDidMount() {
+        this.loadEntities()
+    }
+
+    loadEntities = () => {
+        HttpClient.get('admin/codegen/entity-options', null, {toastError: false}).then(rs => {
+            this.setState({entities: rs.data || []})
+        }).catch(e => {
+            console.error('[Codegen] 加载实体列表失败:', e)
+        })
+    }
+
+    handleEntityChange = (value, option) => {
+        const data = option?.data || {}
+        this.setState({className: value, module: data.module || '', label: data.label || ''})
+    }
+
+    buildReq = () => ({
+        className: this.state.className,
+        module: this.state.module,
+        label: this.state.label,
+        parentMenu: this.state.parentMenu,
+        overwrite: this.state.overwrite,
+    })
+
+    handlePreview = () => {
+        if (!this.state.className) {
+            message.warning('请先选择实体')
+            return
+        }
+        this.setState({loading: true})
+        HttpClient.post('admin/codegen/preview', this.buildReq(), null, {toastError: false}).then(rs => {
+            this.setState({files: rs.data || [], previewOpen: true})
+        }).catch(e => {
+            console.error('[Codegen] 预览失败:', e)
+            message.error(e?.message || '预览失败')
+        }).finally(() => this.setState({loading: false}))
+    }
+
+    handleGenerate = () => {
+        if (!this.state.className) {
+            message.warning('请先选择实体')
+            return
+        }
+        this.setState({confirmOpen: true})
+    }
+
+    doGenerate = () => {
+        this.setState({confirmOpen: false, loading: true})
+        HttpClient.post('admin/codegen/generate', this.buildReq(), null, {toastError: false}).then(rs => {
+            this.setState({result: rs.data, resultOpen: true, previewOpen: false})
+        }).catch(e => {
+            console.error('[Codegen] 生成失败:', e)
+            message.error(e?.message || '生成失败')
+        }).finally(() => this.setState({loading: false}))
+    }
+
+    copy = (text) => {
+        if (navigator.clipboard) {
+            navigator.clipboard.writeText(text)
+                .then(() => message.success('已复制'))
+                .catch(() => message.error('复制失败'))
+        } else {
+            message.warning('当前浏览器不支持剪贴板')
+        }
+    }
+
+    selectedOption = () => this.state.entities.find(e => e.value === this.state.className)
+
+    render() {
+        const selected = this.selectedOption()
+        return <Page title='代码生成' description='扫描实体，生成 Repository / Service / Controller / 前端页面 / 菜单 代码并写入项目源码目录'>
+            <Form layout='vertical' style={{maxWidth: 720}}>
+                <Form.Item label='实体' required>
+                    <Select
+                        showSearch
+                        optionFilterProp='label'
+                        placeholder='请选择实体'
+                        options={this.state.entities}
+                        value={this.state.className}
+                        onChange={this.handleEntityChange}
+                    />
+                </Form.Item>
+                {selected?.data?.frameworkEntity &&
+                    <Typography.Text type='warning'>
+                        该实体属于框架内置包（{selected.data.packageName}），生成的文件会写入同一包路径，请确认输出位置后再生成。
+                    </Typography.Text>
+                }
+                <Form.Item label='模块名（请求前缀 / 前端目录）'>
+                    <Input placeholder='如 customer'
+                           value={this.state.module}
+                           onChange={e => this.setState({module: e.target.value})}/>
+                </Form.Item>
+                <Form.Item label='中文名'>
+                    <Input value={this.state.label}
+                           onChange={e => this.setState({label: e.target.value})}/>
+                </Form.Item>
+                <Form.Item label='父菜单 id' tooltip='默认挂在系统管理（sys）下'>
+                    <Input value={this.state.parentMenu}
+                           onChange={e => this.setState({parentMenu: e.target.value})}/>
+                </Form.Item>
+                <Form.Item label='覆盖已存在文件'>
+                    <Switch checked={this.state.overwrite}
+                            onChange={checked => this.setState({overwrite: checked})}/>
+                </Form.Item>
+                <Space>
+                    <Perm code='sys-codegen:generate'>
+                        <Button type='primary' loading={this.state.loading} onClick={this.handlePreview}>预览</Button>
+                    </Perm>
+                    <Button onClick={this.loadEntities}>刷新实体</Button>
+                </Space>
+            </Form>
+
+            <Drawer title='生成预览' width={960}
+                    open={this.state.previewOpen}
+                    onClose={() => this.setState({previewOpen: false})}
+                    extra={
+                        <Perm code='sys-codegen:generate'>
+                            <Button type='primary' loading={this.state.loading} onClick={this.handleGenerate}>生成并写入</Button>
+                        </Perm>
+                    }>
+                <Collapse
+                    items={this.state.files.map((file, index) => ({
+                        key: String(index),
+                        label: (
+                            <Space>
+                                <span>{file.path}</span>
+                                {file.exists
+                                    ? <Tag color='orange'>已存在</Tag>
+                                    : <Tag color='green'>新增</Tag>}
+                            </Space>
+                        ),
+                        children: (
+                            <>
+                                <Button size='small' style={{marginBottom: 8}}
+                                        onClick={() => this.copy(file.content)}>复制</Button>
+                                <pre style={{
+                                    maxHeight: 420,
+                                    overflow: 'auto',
+                                    background: '#f6f8fa',
+                                    padding: 12,
+                                    borderRadius: 4,
+                                }}>{file.content}</pre>
+                            </>
+                        ),
+                    }))}
+                />
+            </Drawer>
+
+            <Modal title='确认生成'
+                   open={this.state.confirmOpen}
+                   confirmLoading={this.state.loading}
+                   onOk={this.doGenerate}
+                   onCancel={() => this.setState({confirmOpen: false})}>
+                <p>将按以下配置生成代码到项目源码目录：</p>
+                <p>模块名：{this.state.module}</p>
+                <p>覆盖已存在文件：{this.state.overwrite ? '是' : '否'}</p>
+            </Modal>
+
+            <Modal title='生成结果'
+                   open={this.state.resultOpen}
+                   footer={null}
+                   onCancel={() => this.setState({resultOpen: false})}>
+                <p>已写入 {this.state.result?.written?.length || 0} 个文件，跳过 {this.state.result?.skipped?.length || 0} 个。</p>
+                {this.state.result?.skipped?.length > 0 &&
+                    <>
+                        <Typography.Text type='warning'>以下文件已存在已跳过（可勾选“覆盖已存在文件”后重新生成）：</Typography.Text>
+                        <ul>
+                            {this.state.result.skipped.map(path => <li key={path}>{path}</li>)}
+                        </ul>
+                    </>}
+                <ul>
+                    {(this.state.result?.written || []).map(path => <li key={path}>{path}</li>)}
+                </ul>
+            </Modal>
+        </Page>
+    }
+}

package/src/pages/public/test.jsx

@@ -1,30 +0,0 @@
-import React from "react";
-import {Page} from "../../framework";
-import {Button, message, Modal, Space} from "antd";
-
-export default class TestPage extends React.Component {
-
-    state = {
-        modalOpen:false
-    }
-
-    render() {
-        return <Page title="测试组件">
-
-            <Space>
-           <Button type={"primary"} onClick={()=>{message.info('你好，李白！')}} >message.info</Button>
-
-            <Button danger onClick={()=>{Modal.info({content:'你好，李白！'})}} >modal.info</Button>
-
-                <Button  onClick={()=>{this.setState({modalOpen:true})}} >modal.组件</Button>
-
-            </Space>
-
-            <Modal title='modal组件' open={this.state.modalOpen} onCancel={()=>this.setState({modalOpen:false})}>
-                内容内容
-            </Modal>
-
-
-        </Page>
-    }
-}