refactor(web): 前端目录重构 — consoles/pages → layouts/features + shared

- consoles/admin/ → layouts/admin-layout/ - consoles/workbench/ → layouts/workbench-layout/ + features/chat/ - pages/ → features/ (dashboard, models, projects, not-found) - components/ → shared/components/ - hooks/ → shared/hooks/ - utils/ → shared/utils/ - 更新所有 import 路径 (src/web/ + tests/web/) - 更新开发文档 (README.md, frontend.md, architecture.md)
2026-06-02 23:17:28 +08:00
parent 1f05f259d0
commit b1dec691e9
76 changed files with 249 additions and 111 deletions
--- a/src/web/features/projects/components/ProjectFormModal.tsx
+++ b/src/web/features/projects/components/ProjectFormModal.tsx
@@ -0,0 +1,87 @@
+import { App as AntApp, Form, Input, Modal } from "antd";
+import { useEffect } from "react";
+
+import type { CreateProjectRequest, Project, UpdateProjectRequest } from "../../../../shared/api";
+
+interface FormValues {
+  description?: string;
+  name: string;
+}
+
+interface ProjectFormModalProps {
+  editingProject: null | Project;
+  onCancel: () => void;
+  onCreate: (data: CreateProjectRequest) => Promise<unknown>;
+  onOpenChange: (open: boolean) => void;
+  onUpdate: (args: { data: UpdateProjectRequest; id: string }) => Promise<unknown>;
+  open: boolean;
+  submitting: boolean;
+}
+
+export function ProjectFormModal({
+  editingProject,
+  onCancel,
+  onCreate,
+  onOpenChange,
+  onUpdate,
+  open,
+  submitting,
+}: ProjectFormModalProps) {
+  const { message } = AntApp.useApp();
+  const [form] = Form.useForm<FormValues>();
+
+  useEffect(() => {
+    if (!open) return;
+    if (editingProject) {
+      form.setFieldsValue({ description: editingProject.description, name: editingProject.name });
+    } else {
+      form.resetFields();
+    }
+  }, [editingProject, form, open]);
+
+  const handleFinish = async (values: FormValues) => {
+    try {
+      if (editingProject) {
+        const reqData: UpdateProjectRequest = {};
+        if (values.name !== editingProject.name) reqData.name = values.name;
+        if ((values.description ?? "") !== (editingProject.description ?? "")) reqData.description = values.description;
+        await onUpdate({ data: reqData, id: editingProject.id });
+        message.success("项目已更新");
+      } else {
+        const reqData: CreateProjectRequest = { description: values.description, name: values.name };
+        await onCreate(reqData);
+        message.success("项目已创建");
+      }
+      onOpenChange(false);
+    } catch (err: unknown) {
+      if (err instanceof Error) {
+        message.error(err.message);
+      }
+    }
+  };
+
+  return (
+    <Modal
+      confirmLoading={submitting}
+      destroyOnHidden
+      okText="确定"
+      onCancel={onCancel}
+      onOk={() => void form.submit()}
+      open={open}
+      title={editingProject ? "编辑项目" : "新建项目"}
+    >
+      <Form form={form} layout="vertical" onFinish={(values) => void handleFinish(values)}>
+        <Form.Item
+          label="项目名称"
+          name="name"
+          rules={[{ max: 10, message: "项目名称不能超过 10 个字符", required: true, whitespace: true }]}
+        >
+          <Input maxLength={10} placeholder="请输入项目名称" />
+        </Form.Item>
+        <Form.Item label="项目描述" name="description">
+          <Input.TextArea autoSize={{ minRows: 5 }} maxLength={500} placeholder="请输入项目描述" />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+}
--- a/src/web/features/projects/components/ProjectTable.tsx
+++ b/src/web/features/projects/components/ProjectTable.tsx
@@ -0,0 +1,169 @@
+import type { ColumnsType } from "antd/es/table";
+
+import { DeleteOutlined, EditOutlined, InboxOutlined, LoginOutlined, RedoOutlined } from "@ant-design/icons";
+import { App as AntApp, Button, Popconfirm, Space, Table, Tag } from "antd";
+import { useNavigate } from "react-router";
+
+import type { Project, ProjectListResponse, ProjectStatus } from "../../../../shared/api";
+
+interface ProjectTableProps {
+  data: ProjectListResponse | undefined;
+  loading: boolean;
+  onArchive: (id: string) => Promise<unknown>;
+  onDelete: (id: string) => Promise<unknown>;
+  onEdit: (project: Project) => void;
+  onPageChange: (page: number, pageSize: number) => void;
+  onRestore: (id: string) => Promise<unknown>;
+  page: number;
+  pageSize: number;
+  status: ProjectStatus;
+}
+
+const COLUMNS: ColumnsType<Project> = [
+  { dataIndex: "name", ellipsis: true, title: "名称", width: 140 },
+  { dataIndex: "description", ellipsis: true, title: "描述" },
+  {
+    align: "center",
+    dataIndex: "status",
+    render: (_value, record: Project) => {
+      if (record.status === "archived") {
+        return <Tag>已归档</Tag>;
+      }
+      return <Tag color="blue">进行中</Tag>;
+    },
+    title: "状态",
+    width: 90,
+  },
+  {
+    align: "center",
+    dataIndex: "createdAt",
+    render: (_value, record: Project) => formatDatetime(record.createdAt),
+    title: "创建时间",
+    width: 180,
+  },
+  {
+    align: "center",
+    dataIndex: "updatedAt",
+    render: (_value, record: Project) => formatDatetime(record.updatedAt),
+    title: "更新时间",
+    width: 180,
+  },
+];
+
+export function ProjectTable({
+  data,
+  loading,
+  onArchive,
+  onDelete,
+  onEdit,
+  onPageChange,
+  onRestore,
+  page,
+  pageSize,
+  status,
+}: ProjectTableProps) {
+  const { message } = AntApp.useApp();
+  const navigate = useNavigate();
+
+  const handleArchive = async (id: string) => {
+    try {
+      await onArchive(id);
+      message.success("项目已归档");
+    } catch (err: unknown) {
+      message.error((err as Error).message);
+    }
+  };
+
+  const handleRestore = async (id: string) => {
+    try {
+      await onRestore(id);
+      message.success("项目已恢复");
+    } catch (err: unknown) {
+      message.error((err as Error).message);
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    try {
+      await onDelete(id);
+      message.success("项目已永久删除");
+    } catch (err: unknown) {
+      message.error((err as Error).message);
+    }
+  };
+
+  const operationColumn: ColumnsType<Project>[number] = {
+    dataIndex: "op",
+    render: (_value, record: Project) => {
+      if (record.status === "active") {
+        return (
+          <Space size="small">
+            <Button
+              icon={<LoginOutlined />}
+              onClick={() => void navigate(`/workbench/${record.id}`)}
+              size="small"
+              type="link"
+            >
+              工作台
+            </Button>
+            <Button icon={<EditOutlined />} onClick={() => onEdit(record)} size="small" type="link">
+              编辑
+            </Button>
+            <Popconfirm
+              description="归档后项目将变为只读。"
+              onConfirm={() => void handleArchive(record.id)}
+              title="确认归档此项目？"
+            >
+              <Button color="orange" icon={<InboxOutlined />} size="small" variant="link">
+                归档
+              </Button>
+            </Popconfirm>
+          </Space>
+        );
+      }
+      return (
+        <Space size="small">
+          <Popconfirm onConfirm={() => void handleRestore(record.id)} title="确认恢复此项目？">
+            <Button icon={<RedoOutlined />} size="small" type="link">
+              恢复
+            </Button>
+          </Popconfirm>
+          <Popconfirm
+            description="此操作不可恢复。"
+            onConfirm={() => void handleDelete(record.id)}
+            title="确认永久删除此项目？"
+          >
+            <Button danger icon={<DeleteOutlined />} size="small" type="link">
+              删除
+            </Button>
+          </Popconfirm>
+        </Space>
+      );
+    },
+    title: "操作",
+    width: status === "active" ? 260 : 160,
+  };
+
+  return (
+    <Table
+      columns={[...COLUMNS, operationColumn]}
+      dataSource={data?.items ?? []}
+      loading={loading}
+      pagination={{
+        current: page,
+        hideOnSinglePage: false,
+        onChange: onPageChange,
+        pageSize,
+        showSizeChanger: true,
+        total: data?.total ?? 0,
+      }}
+      rowKey="id"
+    />
+  );
+}
+
+function formatDatetime(dateStr: string): string {
+  const d = new Date(dateStr);
+  const pad = (n: number) => String(n).padStart(2, "0");
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
+}
--- a/src/web/features/projects/components/ProjectToolbar.tsx
+++ b/src/web/features/projects/components/ProjectToolbar.tsx
@@ -0,0 +1,55 @@
+import { PlusOutlined } from "@ant-design/icons";
+import { Button, Flex, Input, Space, Tabs } from "antd";
+import { useState } from "react";
+
+import type { ProjectStatus } from "../../../../shared/api";
+
+interface ProjectToolbarProps {
+  activeTab: ProjectStatus;
+  keyword: string;
+  onSearch: (value: string) => void;
+  onSearchClear: () => void;
+  onTabChange: (key: string) => void;
+  openCreateDialog: () => void;
+}
+
+const STATUS_TAB_ITEMS = [
+  { key: "active", label: "进行中" },
+  { key: "archived", label: "已归档" },
+];
+
+export function ProjectToolbar({
+  activeTab,
+  keyword,
+  onSearch,
+  onSearchClear,
+  onTabChange,
+  openCreateDialog,
+}: ProjectToolbarProps) {
+  const [draftKeyword, setDraftKeyword] = useState(keyword);
+
+  return (
+    <Flex align="center" gap="large" justify="space-between" wrap="wrap">
+      <Tabs activeKey={activeTab} items={STATUS_TAB_ITEMS} onChange={onTabChange} />
+      <Space size="small">
+        <Input.Search
+          allowClear
+          enterButton="搜索"
+          onChange={(event) => setDraftKeyword(event.target.value)}
+          onClear={() => {
+            setDraftKeyword("");
+            onSearchClear();
+          }}
+          onSearch={(value) => onSearch(value)}
+          placeholder="搜索名称或描述"
+          value={draftKeyword}
+        />
+        {activeTab === "active" && (
+          <Button icon={<PlusOutlined />} onClick={openCreateDialog} type="primary">
+            新建项目
+          </Button>
+        )}
+      </Space>
+    </Flex>
+  );
+}
--- a/src/web/features/projects/index.tsx
+++ b/src/web/features/projects/index.tsx
@@ -0,0 +1,90 @@
+import { Space } from "antd";
+import { useState } from "react";
+
+import type { Project, ProjectStatus } from "../../../shared/api";
+
+import {
+  useArchiveProject,
+  useCreateProject,
+  useDeleteProject,
+  useProjectList,
+  useRestoreProject,
+  useUpdateProject,
+} from "../../shared/hooks/use-projects";
+import { ProjectFormModal } from "./components/ProjectFormModal";
+import { ProjectTable } from "./components/ProjectTable";
+import { ProjectToolbar } from "./components/ProjectToolbar";
+
+export function ProjectsPage() {
+  const [tabValue, setTabValue] = useState<ProjectStatus>("active");
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(20);
+  const [keyword, setKeyword] = useState("");
+
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [editingProject, setEditingProject] = useState<null | Project>(null);
+
+  const { data, isLoading } = useProjectList({ keyword: keyword || undefined, page, pageSize, status: tabValue });
+  const createMutation = useCreateProject();
+  const updateMutation = useUpdateProject();
+  const archiveMutation = useArchiveProject();
+  const restoreMutation = useRestoreProject();
+  const deleteMutation = useDeleteProject();
+
+  const isSubmitting = createMutation.isPending || updateMutation.isPending;
+  const isRowActionPending = archiveMutation.isPending || restoreMutation.isPending || deleteMutation.isPending;
+
+  return (
+    <Space className="app-page-flex" orientation="vertical" size="large">
+      <ProjectToolbar
+        activeTab={tabValue}
+        keyword={keyword}
+        onSearch={(value) => {
+          setKeyword(value);
+          setPage(1);
+        }}
+        onSearchClear={() => {
+          setKeyword("");
+          setPage(1);
+        }}
+        onTabChange={(key) => {
+          setTabValue(key as ProjectStatus);
+          setPage(1);
+        }}
+        openCreateDialog={() => {
+          setEditingProject(null);
+          setDialogOpen(true);
+        }}
+      />
+
+      <ProjectTable
+        data={data}
+        loading={isLoading || isRowActionPending}
+        onArchive={(id) => archiveMutation.mutateAsync(id)}
+        onDelete={(id) => deleteMutation.mutateAsync(id)}
+        onEdit={(project) => {
+          setEditingProject(project);
+          setDialogOpen(true);
+        }}
+        onPageChange={(p, ps) => {
+          setPage(p);
+          setPageSize(ps);
+        }}
+        onRestore={(id) => restoreMutation.mutateAsync(id)}
+        page={page}
+        pageSize={pageSize}
+        status={tabValue}
+      />
+
+      <ProjectFormModal
+        editingProject={editingProject}
+        onCancel={() => setDialogOpen(false)}
+        onCreate={(data) => createMutation.mutateAsync(data)}
+        onOpenChange={setDialogOpen}
+        onUpdate={(args) => updateMutation.mutateAsync(args)}
+        open={dialogOpen}
+        submitting={isSubmitting}
+      />
+    </Space>
+  );
+}