From 0bf155bd97193bed1187ee01e997cf0134d9ad9e Mon Sep 17 00:00:00 2001
From: asp_ly <dengqichen@iscmtech.com>
Date: Sat, 28 Dec 2024 18:46:23 +0800
Subject: [PATCH] 1

---
 frontend/scripts/generate-page.ts             | 896 ++++++++++++++----
 frontend/scripts/tsconfig.json                |  21 +
 .../pages/Deploy/Application/List/index.tsx   |   8 -
 3 files changed, 721 insertions(+), 204 deletions(-)
 create mode 100644 frontend/scripts/tsconfig.json

diff --git a/frontend/scripts/generate-page.ts b/frontend/scripts/generate-page.ts
index db42691b..f2424a60 100644
--- a/frontend/scripts/generate-page.ts
+++ b/frontend/scripts/generate-page.ts
@@ -1,10 +1,17 @@
-import fs from 'fs';
-import path from 'path';
+import { promises as fs } from 'fs';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+import { createInterface } from 'readline';
+
+// 获取当前文件的目录
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
 
 interface GenerateOptions {
   name: string;          // 模块名称，如 user, role 等
   description: string;   // 中文描述，如 "用户管理"
   baseUrl: string;       // API基础路径，如 "/api/v1/users"
+  pageType?: 'list' | 'detail' | 'form';  // 页面类型，预留扩展
 }
 
 // 生成 types.ts
@@ -12,261 +19,758 @@ function generateTypes(options: GenerateOptions): string {
   const { name } = options;
   const typeName = name.charAt(0).toUpperCase() + name.slice(1);
   
-  return `import { BaseResponse, BaseQuery } from '@/types/base';
+  return `import type { BaseResponse, BaseQuery } from '@/types/base';
 
 export interface ${typeName}Response extends BaseResponse {
   name: string;
+  description?: string;
+  enabled: boolean;
+  sort: number;
   // TODO: 添加其他字段
 }
 
 export interface ${typeName}Query extends BaseQuery {
   name?: string;
+  enabled?: boolean;
   // TODO: 添加其他查询字段
 }
 
 export interface ${typeName}Request {
   name: string;
+  description?: string;
+  enabled: boolean;
+  sort: number;
   // TODO: 添加其他请求字段
 }
 `;
 }
 
+// 生成 schema.ts
+function generateSchema(options: GenerateOptions): string {
+  const { name } = options;
+  const typeName = name.charAt(0).toUpperCase() + name.slice(1);
+
+  return `import * as z from "zod";
+
+export const searchFormSchema = z.object({
+  name: z.string().optional(),
+  enabled: z.boolean().optional(),
+});
+
+export const ${typeName.toLowerCase()}FormSchema = z.object({
+  name: z.string().min(1, "请输入名称").max(50, "名称不能超过50个字符"),
+  description: z.string().max(200, "描述不能超过200个字符").optional(),
+  enabled: z.boolean().default(true),
+  sort: z.number().min(0).default(0),
+});
+
+export type SearchFormValues = z.infer<typeof searchFormSchema>;
+export type ${typeName}FormValues = z.infer<typeof ${typeName.toLowerCase()}FormSchema>;
+`;
+}
+
 // 生成 service.ts
 function generateService(options: GenerateOptions): string {
   const { name, baseUrl } = options;
   const typeName = name.charAt(0).toUpperCase() + name.slice(1);
   
-  return `import { http } from '@/utils/http';
+  return `import request from '@/utils/request';
+import type { Page } from '@/types/base';
 import type { ${typeName}Response, ${typeName}Query, ${typeName}Request } from './types';
 
-// 获取列表
-export const getList = (params?: ${typeName}Query) => 
-  http.get<${typeName}Response[]>('${baseUrl}', { params });
-
-// 获取详情
-export const getDetail = (id: number) => 
-  http.get<${typeName}Response>(\`${baseUrl}/\${id}\`);
+const BASE_URL = '${baseUrl}';
 
 // 创建
-export const create = (data: ${typeName}Request) => 
-  http.post<${typeName}Response>('${baseUrl}', data);
+export const create${typeName} = (data: ${typeName}Request) => 
+  request.post<void>(BASE_URL, data);
 
 // 更新
-export const update = (id: number, data: ${typeName}Request) => 
-  http.put<${typeName}Response>(\`${baseUrl}/\${id}\`, data);
+export const update${typeName} = (id: number, data: ${typeName}Request) => 
+  request.put<void>(\`\${BASE_URL}/\${id}\`, data);
 
 // 删除
-export const remove = (id: number) => 
-  http.delete(\`${baseUrl}/\${id}\`);
+export const delete${typeName} = (id: number) => 
+  request.delete<void>(\`\${BASE_URL}/\${id}\`);
 
-// 批量删除
-export const batchRemove = (ids: number[]) => 
-  http.post('${baseUrl}/batch-delete', { ids });
+// 获取详情
+export const get${typeName} = (id: number) => 
+  request.get<${typeName}Response>(\`\${BASE_URL}/\${id}\`);
+
+// 分页查询列表
+export const get${typeName}Page = (params?: ${typeName}Query) =>
+  request.get<Page<${typeName}Response>>(\`\${BASE_URL}/page\`, { params });
+
+// 获取所有列表
+export const get${typeName}List = () => 
+  request.get<${typeName}Response[]>(BASE_URL);
+
+// 条件查询列表
+export const get${typeName}ListByCondition = (params?: ${typeName}Query) =>
+  request.get<${typeName}Response[]>(\`\${BASE_URL}/list\`, { params });
 `;
 }
 
-// 生成页面组件
-function generatePage(options: GenerateOptions): string {
-  const { name, description } = options;
+// 生成 Modal 组件
+function generateModal(options: GenerateOptions): string {
+  const { name } = options;
   const typeName = name.charAt(0).toUpperCase() + name.slice(1);
-  
-  return `import { useState } from 'react';
-import { Card, Table, Button, Space, Modal, message, Form, Input } from 'antd';
-import type { ${typeName}Response, ${typeName}Query, ${typeName}Request } from './types';
-import * as service from './service';
-import { useRequest } from 'ahooks';
 
-const ${typeName}Page = () => {
-  const [query, setQuery] = useState<${typeName}Query>({});
-  const [selectedRowKeys, setSelectedRowKeys] = useState<number[]>([]);
-  const [editModalVisible, setEditModalVisible] = useState(false);
-  const [editingRecord, setEditingRecord] = useState<${typeName}Response | null>(null);
-  const [form] = Form.useForm();
+  return `import React, { useEffect } from 'react';
+import type { ${typeName}Response } from '@/pages/${name}/List/types';
+import { create${typeName}, update${typeName} } from '@/pages/${name}/List/service';
+import {
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+    DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import { useToast } from "@/components/ui/use-toast";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ${typeName.toLowerCase()}FormSchema, type ${typeName}FormValues } from "@/pages/${name}/List/schema";
+import { Textarea } from "@/components/ui/textarea";
 
-  // 获取列表数据
-  const { data, loading, refresh } = useRequest(() => service.getList(query), {
-    refreshDeps: [query]
-  });
+interface ${typeName}ModalProps {
+    open: boolean;
+    onCancel: () => void;
+    onSuccess: () => void;
+    initialValues?: ${typeName}Response;
+}
 
-  // 删除操作
-  const handleDelete = async (id: number) => {
-    Modal.confirm({
-      title: '确认删除',
-      content: '确定要删除这条记录吗？',
-      onOk: async () => {
-        try {
-          await service.remove(id);
-          message.success('删除成功');
-          refresh();
-        } catch (error) {
-          message.error('删除失败');
-        }
-      }
+const ${typeName}Modal: React.FC<${typeName}ModalProps> = ({
+    open,
+    onCancel,
+    onSuccess,
+    initialValues,
+}) => {
+    const { toast } = useToast();
+    const isEdit = !!initialValues?.id;
+
+    const form = useForm<${typeName}FormValues>({
+        resolver: zodResolver(${typeName.toLowerCase()}FormSchema),
+        defaultValues: {
+            name: "",
+            description: "",
+            enabled: true,
+            sort: 0,
+        },
     });
-  };
 
-  // 批量删除
-  const handleBatchDelete = () => {
-    if (!selectedRowKeys.length) {
-      message.warning('请选择要删除的记录');
-      return;
-    }
-    Modal.confirm({
-      title: '确认删除',
-      content: \`确定要删除这\${selectedRowKeys.length}条记录吗？\`,
-      onOk: async () => {
-        try {
-          await service.batchRemove(selectedRowKeys);
-          message.success('删除成功');
-          setSelectedRowKeys([]);
-          refresh();
-        } catch (error) {
-          message.error('删除失败');
+    useEffect(() => {
+        if (initialValues) {
+            form.reset({
+                name: initialValues.name,
+                description: initialValues.description || "",
+                enabled: initialValues.enabled,
+                sort: initialValues.sort,
+            });
         }
-      }
-    });
-  };
+    }, [initialValues, form]);
 
-  // 打开编辑弹窗
-  const handleEdit = async (id: number) => {
-    try {
-      const detail = await service.getDetail(id);
-      setEditingRecord(detail);
-      form.setFieldsValue(detail);
-      setEditModalVisible(true);
-    } catch (error) {
-      message.error('获取详情失败');
-    }
-  };
+    const handleSubmit = async (values: ${typeName}FormValues) => {
+        try {
+            if (isEdit) {
+                await update${typeName}(initialValues.id, values);
+            } else {
+                await create${typeName}(values);
+            }
+            toast({
+                title: \`\${isEdit ? '更新' : '创建'}成功\`,
+                duration: 3000,
+            });
+            form.reset();
+            onSuccess();
+        } catch (error) {
+            toast({
+                variant: "destructive",
+                title: \`\${isEdit ? '更新' : '创建'}失败\`,
+                description: error instanceof Error ? error.message : undefined,
+                duration: 3000,
+            });
+        }
+    };
 
-  // 打开新增弹窗
-  const handleAdd = () => {
-    setEditingRecord(null);
-    form.resetFields();
-    setEditModalVisible(true);
-  };
+    return (
+        <Dialog open={open} onOpenChange={(open) => !open && onCancel()}>
+            <DialogContent className="sm:max-w-[600px]">
+                <DialogHeader>
+                    <DialogTitle>{isEdit ? '编辑' : '新建'}</DialogTitle>
+                </DialogHeader>
+                <Form {...form}>
+                    <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4">
+                        <FormField
+                            control={form.control}
+                            name="name"
+                            render={({field}) => (
+                                <FormItem>
+                                    <FormLabel>名称</FormLabel>
+                                    <FormControl>
+                                        <Input
+                                            {...field}
+                                            placeholder="请输入名称"
+                                        />
+                                    </FormControl>
+                                    <FormMessage/>
+                                </FormItem>
+                            )}
+                        />
 
-  // 保存表单
-  const handleSave = async () => {
-    try {
-      const values = await form.validateFields();
-      if (editingRecord) {
-        await service.update(editingRecord.id, values);
-        message.success('更新成功');
-      } else {
-        await service.create(values);
-        message.success('创建成功');
-      }
-      setEditModalVisible(false);
-      refresh();
-    } catch (error) {
-      message.error('操作失败');
-    }
-  };
+                        <FormField
+                            control={form.control}
+                            name="description"
+                            render={({field}) => (
+                                <FormItem>
+                                    <FormLabel>描述</FormLabel>
+                                    <FormControl>
+                                        <Textarea
+                                            {...field}
+                                            placeholder="请输入描述"
+                                            rows={4}
+                                        />
+                                    </FormControl>
+                                    <FormMessage/>
+                                </FormItem>
+                            )}
+                        />
 
-  const columns = [
-    {
-      title: '名称',
-      dataIndex: 'name',
-      key: 'name',
-    },
-    {
-      title: '创建时间',
-      dataIndex: 'createTime',
-      key: 'createTime',
-    },
-    {
-      title: '操作',
-      key: 'action',
-      render: (_, record: ${typeName}Response) => (
-        <Space>
-          <Button type="link" onClick={() => handleEdit(record.id)}>编辑</Button>
-          <Button type="link" danger onClick={() => handleDelete(record.id)}>删除</Button>
-        </Space>
-      ),
-    },
-  ];
+                        <FormField
+                            control={form.control}
+                            name="enabled"
+                            render={({field}) => (
+                                <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+                                    <div className="space-y-0.5">
+                                        <FormLabel>状态</FormLabel>
+                                    </div>
+                                    <FormControl>
+                                        <Switch
+                                            checked={field.value}
+                                            onCheckedChange={field.onChange}
+                                        />
+                                    </FormControl>
+                                </FormItem>
+                            )}
+                        />
 
-  return (
-    <>
-      <Card title="${description}" extra={
-        <Space>
-          <Button type="primary" onClick={handleAdd}>新增</Button>
-          <Button danger onClick={handleBatchDelete}>批量删除</Button>
-        </Space>
-      }>
-        <Form layout="inline" style={{ marginBottom: 16 }}>
-          <Form.Item label="名称" name="name">
-            <Input placeholder="请输入名称" 
-              onChange={e => setQuery(prev => ({ ...prev, name: e.target.value }))}
-            />
-          </Form.Item>
-        </Form>
-        <Table
-          rowKey="id"
-          columns={columns}
-          dataSource={data}
-          loading={loading}
-          rowSelection={{
-            selectedRowKeys,
-            onChange: (keys) => setSelectedRowKeys(keys as number[]),
-          }}
-        />
-      </Card>
+                        <FormField
+                            control={form.control}
+                            name="sort"
+                            render={({field}) => (
+                                <FormItem>
+                                    <FormLabel>排序</FormLabel>
+                                    <FormControl>
+                                        <Input
+                                            {...field}
+                                            type="number"
+                                            min={0}
+                                            onChange={(e) => field.onChange(Number(e.target.value))}
+                                        />
+                                    </FormControl>
+                                    <FormMessage/>
+                                </FormItem>
+                            )}
+                        />
 
-      <Modal
-        title={editingRecord ? '编辑' : '新增'}
-        open={editModalVisible}
-        onOk={handleSave}
-        onCancel={() => setEditModalVisible(false)}
-      >
-        <Form form={form} layout="vertical">
-          <Form.Item 
-            label="名称" 
-            name="name"
-            rules={[{ required: true, message: '请输入名称' }]}
-          >
-            <Input placeholder="请输入名称" />
-          </Form.Item>
-          {/* TODO: 添加其他表单项 */}
-        </Form>
-      </Modal>
-    </>
-  );
+                        <DialogFooter>
+                            <Button type="button" variant="outline" onClick={onCancel}>
+                                取消
+                            </Button>
+                            <Button type="submit">
+                                确定
+                            </Button>
+                        </DialogFooter>
+                    </form>
+                </Form>
+            </DialogContent>
+        </Dialog>
+    );
 };
 
-export default ${typeName}Page;
+export default ${typeName}Modal;
+`;
+}
+
+// 生成列表页面组件
+function generateListPage(options: GenerateOptions): string {
+  const { name, description } = options;
+  const typeName = name.charAt(0).toUpperCase() + name.slice(1);
+
+  return `import React, { useState, useEffect } from 'react';
+import { PageContainer } from '@/components/ui/page-container';
+import {
+    PlusOutlined,
+    EditOutlined,
+    DeleteOutlined,
+} from '@ant-design/icons';
+import {
+    Table,
+    TableHeader,
+    TableBody,
+    TableHead,
+    TableRow,
+    TableCell,
+} from "@/components/ui/table";
+import {
+    Card,
+    CardContent,
+    CardHeader,
+    CardTitle,
+} from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select";
+import { Badge } from "@/components/ui/badge";
+import { useToast } from "@/components/ui/use-toast";
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+    AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { searchFormSchema, type SearchFormValues } from "@/pages/${name}/List/schema";
+import { DataTablePagination } from "@/components/ui/pagination";
+import type { ${typeName}Response, ${typeName}Query } from '@/pages/${name}/List/types';
+import { get${typeName}Page, delete${typeName} } from '@/pages/${name}/List/service';
+import ${typeName}Modal from '@/pages/${name}/List/components/${typeName}Modal';
+
+interface Column {
+    accessorKey?: keyof ${typeName}Response;
+    id?: string;
+    header: string;
+    size: number;
+    cell?: (props: { row: { original: ${typeName}Response } }) => React.ReactNode;
+}
+
+const ${typeName}List: React.FC = () => {
+    const [modalVisible, setModalVisible] = useState(false);
+    const [currentRecord, setCurrentRecord] = useState<${typeName}Response>();
+    const [list, setList] = useState<${typeName}Response[]>([]);
+    const [loading, setLoading] = useState(false);
+    const [pagination, setPagination] = useState({
+        pageNum: 1,
+        pageSize: 10,
+        totalElements: 0,
+    });
+    const { toast } = useToast();
+
+    const form = useForm<SearchFormValues>({
+        resolver: zodResolver(searchFormSchema),
+        defaultValues: {
+            name: "",
+            enabled: undefined,
+        }
+    });
+
+    const loadData = async (params?: ${typeName}Query) => {
+        setLoading(true);
+        try {
+            const queryParams: ${typeName}Query = {
+                ...params,
+                pageNum: pagination.pageNum,
+                pageSize: pagination.pageSize,
+            };
+            const data = await get${typeName}Page(queryParams);
+            setList(data.content || []);
+            setPagination({
+                ...pagination,
+                totalElements: data.totalElements,
+            });
+        } catch (error) {
+            toast({
+                variant: "destructive",
+                title: "获取列表失败",
+                duration: 3000,
+            });
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handlePageChange = (page: number) => {
+        setPagination({
+            ...pagination,
+            pageNum: page,
+        });
+    };
+
+    useEffect(() => {
+        loadData(form.getValues());
+    }, [pagination.pageNum, pagination.pageSize]);
+
+    const handleDelete = async (id: number) => {
+        try {
+            await delete${typeName}(id);
+            toast({
+                title: "删除成功",
+                duration: 3000,
+            });
+            loadData(form.getValues());
+        } catch (error) {
+            toast({
+                variant: "destructive",
+                title: "删除失败",
+                duration: 3000,
+            });
+        }
+    };
+
+    const handleAdd = () => {
+        setCurrentRecord(undefined);
+        setModalVisible(true);
+    };
+
+    const handleEdit = (record: ${typeName}Response) => {
+        setCurrentRecord(record);
+        setModalVisible(true);
+    };
+
+    const handleModalClose = () => {
+        setModalVisible(false);
+        setCurrentRecord(undefined);
+    };
+
+    const handleSuccess = () => {
+        setModalVisible(false);
+        setCurrentRecord(undefined);
+        loadData(form.getValues());
+    };
+
+    const handleReset = () => {
+        form.reset({
+            name: "",
+            enabled: undefined,
+        });
+        loadData();
+    };
+
+    const columns: Column[] = [
+        {
+            accessorKey: 'name',
+            header: '名称',
+            size: 180,
+        },
+        {
+            accessorKey: 'description',
+            header: '描述',
+            size: 200,
+        },
+        {
+            accessorKey: 'enabled',
+            header: '状态',
+            size: 100,
+            cell: ({row}) => (
+                <Badge variant={row.original.enabled ? "outline" : "secondary"}>
+                    {row.original.enabled ? '启用' : '禁用'}
+                </Badge>
+            ),
+        },
+        {
+            accessorKey: 'sort',
+            header: '排序',
+            size: 80,
+        },
+        {
+            accessorKey: 'createTime',
+            header: '创建时间',
+            size: 180,
+        },
+        {
+            id: 'actions',
+            header: '操作',
+            size: 180,
+            cell: ({row}) => (
+                <div className="flex items-center gap-2">
+                    <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => handleEdit(row.original)}
+                    >
+                        <EditOutlined className="mr-1"/>
+                        编辑
+                    </Button>
+                    <AlertDialog>
+                        <AlertDialogTrigger asChild>
+                            <Button
+                                variant="ghost"
+                                size="sm"
+                                className="text-destructive"
+                            >
+                                <DeleteOutlined className="mr-1"/>
+                                删除
+                            </Button>
+                        </AlertDialogTrigger>
+                        <AlertDialogContent>
+                            <AlertDialogHeader>
+                                <AlertDialogTitle>确定要删除吗？</AlertDialogTitle>
+                                <AlertDialogDescription>
+                                    删除后将无法恢复，请谨慎操作
+                                </AlertDialogDescription>
+                            </AlertDialogHeader>
+                            <AlertDialogFooter>
+                                <AlertDialogCancel>取消</AlertDialogCancel>
+                                <AlertDialogAction
+                                    onClick={() => handleDelete(row.original.id)}
+                                >
+                                    确定
+                                </AlertDialogAction>
+                            </AlertDialogFooter>
+                        </AlertDialogContent>
+                    </AlertDialog>
+                </div>
+            ),
+        },
+    ];
+
+    return (
+        <PageContainer>
+            <div className="flex items-center justify-between">
+                <h2 className="text-3xl font-bold tracking-tight">${description}</h2>
+                <div className="flex items-center gap-4">
+                    <Button onClick={handleAdd}>
+                        <PlusOutlined className="mr-1"/>
+                        新建
+                    </Button>
+                </div>
+            </div>
+
+            <Card>
+                <div className="p-6">
+                    <div className="flex items-center gap-4">
+                        <Input
+                            placeholder="名称"
+                            {...form.register('name')}
+                            className="max-w-[200px]"
+                        />
+                        <Select
+                            value={form.getValues('enabled')?.toString()}
+                            onValueChange={(value) => form.setValue('enabled', value === 'true')}
+                        >
+                            <SelectTrigger className="max-w-[200px]">
+                                <SelectValue placeholder="状态"/>
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem value="true">启用</SelectItem>
+                                <SelectItem value="false">禁用</SelectItem>
+                            </SelectContent>
+                        </Select>
+                        <Button variant="outline" onClick={handleReset}>
+                            重置
+                        </Button>
+                        <Button onClick={() => loadData(form.getValues())}>
+                            搜索
+                        </Button>
+                    </div>
+                </div>
+            </Card>
+
+            <Card>
+                <CardHeader className="flex flex-row items-center justify-between">
+                    <CardTitle>列表</CardTitle>
+                </CardHeader>
+                <CardContent>
+                    <div className="rounded-md border">
+                        <Table>
+                            <TableHeader>
+                                <TableRow>
+                                    {columns.map((column) => (
+                                        <TableHead
+                                            key={column.accessorKey || column.id}
+                                            style={{width: column.size}}
+                                        >
+                                            {column.header}
+                                        </TableHead>
+                                    ))}
+                                </TableRow>
+                            </TableHeader>
+                            <TableBody>
+                                {list.map((item) => (
+                                    <TableRow key={item.id}>
+                                        {columns.map((column) => (
+                                            <TableCell
+                                                key={column.accessorKey || column.id}
+                                            >
+                                                {column.cell
+                                                    ? column.cell({row: {original: item}})
+                                                    : item[column.accessorKey!]}
+                                            </TableCell>
+                                        ))}
+                                    </TableRow>
+                                ))}
+                            </TableBody>
+                        </Table>
+                        <div className="flex justify-end border-t border-border bg-muted/40">
+                            <DataTablePagination
+                                pageIndex={pagination.pageNum}
+                                pageSize={pagination.pageSize}
+                                pageCount={Math.ceil(pagination.totalElements / pagination.pageSize)}
+                                onPageChange={handlePageChange}
+                            />
+                        </div>
+                    </div>
+                </CardContent>
+            </Card>
+
+            {modalVisible && (
+                <${typeName}Modal
+                    open={modalVisible}
+                    onCancel={handleModalClose}
+                    onSuccess={handleSuccess}
+                    initialValues={currentRecord}
+                />
+            )}
+        </PageContainer>
+    );
+};
+
+export default ${typeName}List;
 `;
 }
 
 // 生成文件
-function generateFiles(options: GenerateOptions) {
-  const { name } = options;
-  const basePath = path.join(process.cwd(), 'src/pages', name);
+async function generateFiles(options: GenerateOptions) {
+  const { name, pageType = 'list' } = options;
+  const basePath = join(process.cwd(), 'src/pages', name, pageType);
+  const componentsPath = join(basePath, 'components');
 
   // 创建目录
-  if (!fs.existsSync(basePath)) {
-    fs.mkdirSync(basePath, { recursive: true });
-  }
+  await fs.mkdir(basePath, { recursive: true });
+  await fs.mkdir(componentsPath, { recursive: true });
 
   // 生成文件
-  fs.writeFileSync(path.join(basePath, 'types.ts'), generateTypes(options));
-  fs.writeFileSync(path.join(basePath, 'service.ts'), generateService(options));
-  fs.writeFileSync(path.join(basePath, 'index.tsx'), generatePage(options));
-
-  console.log(`Successfully generated files for module "${name}" in ${basePath}`);
+  switch (pageType) {
+    case 'list':
+      await fs.writeFile(join(basePath, 'types.ts'), generateTypes(options));
+      await fs.writeFile(join(basePath, 'schema.ts'), generateSchema(options));
+      await fs.writeFile(join(basePath, 'service.ts'), generateService(options));
+      await fs.writeFile(join(basePath, 'index.tsx'), generateListPage(options));
+      await fs.writeFile(
+        join(componentsPath, `${options.name.charAt(0).toUpperCase() + options.name.slice(1)}Modal.tsx`),
+        generateModal(options)
+      );
+      break;
+    case 'detail':
+    case 'form':
+      // 未来实现
+      break;
+  }
 }
 
-// 使用示例
-const options: GenerateOptions = {
-  name: process.argv[2],
-  description: process.argv[3] || '管理',
-  baseUrl: process.argv[4] || `/api/v1/${process.argv[2]}`,
+// 主函数
+async function generate(options: GenerateOptions) {
+  try {
+    await generateFiles(options);
+    console.log('✨ 页面生成成功！');
+  } catch (error) {
+    console.error('❌ 页面生成失败：', error);
+  }
+}
+
+// 创建命令行交互界面
+const rl = createInterface({
+  input: process.stdin,
+  output: process.stdout
+});
+
+// 提示用户输入
+const prompt = (question: string): Promise<string> => {
+  return new Promise((resolve) => {
+    rl.question(question, (answer) => {
+      resolve(answer);
+    });
+  });
 };
 
-if (!options.name) {
-  console.error('Please provide a module name!');
-  process.exit(1);
+// 交互式生成页面
+async function generateInteractive() {
+  try {
+    console.log('👋 欢迎使用页面生成器！');
+    console.log('-------------------');
+
+    // 获取模块名称
+    const name = await prompt('请输入模块名称（如：user）: ');
+    if (!name) {
+      throw new Error('模块名称不能为空！');
+    }
+
+    // 获取模块描述
+    const description = await prompt('请输入模块描述（如：用户管理）: ');
+    if (!description) {
+      throw new Error('模块描述不能为空！');
+    }
+
+    // 获取API路径
+    const defaultBaseUrl = `/api/v1/${name.toLowerCase()}`;
+    const baseUrl = await prompt(`请输入API路径 (默认: ${defaultBaseUrl}): `) || defaultBaseUrl;
+
+    // 获取页面类型（预留）
+    const pageType = 'list'; // 目前固定为list
+
+    // 生成页面
+    generate({
+      name,
+      description,
+      baseUrl,
+      pageType,
+    });
+
+    console.log('');
+    console.log('✨ 页面生成成功！');
+    console.log('📁 生成的文件位置：');
+    console.log(`src/pages/${name}/list/`);
+    console.log('');
+    console.log('🎉 包含以下文件：');
+    console.log('- types.ts');
+    console.log('- schema.ts');
+    console.log('- service.ts');
+    console.log('- index.tsx');
+    console.log(`- components/${name.charAt(0).toUpperCase() + name.slice(1)}Modal.tsx`);
+    
+  } catch (error) {
+    console.error('❌ 页面生成失败：', error);
+  } finally {
+    rl.close();
+  }
 }
 
-generateFiles(options); 
\ No newline at end of file
+// 根据命令行参数判断是否使用交互模式
+if (process.argv[1] === fileURLToPath(import.meta.url)) {
+  const args = process.argv.slice(2);
+  if (args.length === 0) {
+    // 无参数时使用交互模式
+    generateInteractive();
+  } else {
+    // 有参数时使用命令行模式
+    generate({
+      name: args[0],
+      description: args[1] || '管理',
+      baseUrl: args[2] || `/api/v1/${args[0]}`,
+      pageType: 'list',
+    });
+  }
+}
+
+export { generate, type GenerateOptions }; 
\ No newline at end of file
diff --git a/frontend/scripts/tsconfig.json b/frontend/scripts/tsconfig.json
new file mode 100644
index 00000000..b123a1a6
--- /dev/null
+++ b/frontend/scripts/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "lib": ["ES2020"],
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "outDir": "../dist/scripts",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["../src/*"]
+    }
+  },
+  "include": ["./**/*"],
+  "exclude": ["node_modules"]
+} 
\ No newline at end of file
diff --git a/frontend/src/pages/Deploy/Application/List/index.tsx b/frontend/src/pages/Deploy/Application/List/index.tsx
index 283c7377..9cc141fa 100644
--- a/frontend/src/pages/Deploy/Application/List/index.tsx
+++ b/frontend/src/pages/Deploy/Application/List/index.tsx
@@ -15,7 +15,6 @@ import {getProjectGroupList} from '../../ProjectGroup/List/service';
 import type {Application, ApplicationQuery} from './types';
 import {DevelopmentLanguageTypeEnum} from './types';
 import type {ProjectGroup} from '../../ProjectGroup/List/types';
-import {ProjectGroupTypeEnum} from '../../ProjectGroup/List/types';
 import {getProjectTypeInfo} from '../../ProjectGroup/List/utils';
 import ApplicationModal from './components/ApplicationModal';
 import {
@@ -33,13 +32,6 @@ import {
     CardTitle,
 } from "@/components/ui/card";
 import {Button} from "@/components/ui/button";
-import {
-    Form,
-    FormControl,
-    FormField,
-    FormItem,
-    FormLabel,
-} from "@/components/ui/form";
 import {Input} from "@/components/ui/input";
 import {
     Select,