aios-management-web 0.1.0

package/src/pages/SystemsPage.jsx

@@ -0,0 +1,498 @@
+import React, { useEffect, useState } from "react";
+import {
+  Button,
+  Card,
+  Col,
+  Descriptions,
+  Form,
+  Input,
+  InputNumber,
+  Modal,
+  Row,
+  Select,
+  Space,
+  Spin,
+  Table,
+  Tabs,
+  Tag,
+  Upload,
+  message
+} from "antd";
+
+import { api } from "../app/api-client.js";
+import { CardTitleWithReload } from "../components/CardTitleWithReload.jsx";
+import { DeleteActionButton } from "../components/DeleteActionButton.jsx";
+import { formatDateTime } from "../utils/format.js";
+
+const applicationNamePattern = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
+
+const jsonBlockStyle = {
+  margin: 0,
+  padding: 12,
+  borderRadius: 8,
+  background: "#fafafa",
+  border: "1px solid #f0f0f0",
+  overflowX: "auto",
+  whiteSpace: "pre-wrap",
+  wordBreak: "break-word",
+  fontSize: 12,
+  lineHeight: 1.6
+};
+
+function getSystemStatusLabel(status) {
+  return status === "active" ? "启用" : "停用";
+}
+
+function getInitialValues() {
+  return {
+    provider: "hzg",
+    scheme: "https",
+    port: 443,
+    status: "active"
+  };
+}
+
+function formatJson(value) {
+  if (value === undefined || value === null) {
+    return "-";
+  }
+
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+}
+
+export function SystemsPage() {
+  const [systems, setSystems] = useState([]);
+  const [stats, setStats] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [editing, setEditing] = useState(null);
+  const [open, setOpen] = useState(false);
+  const [testResult, setTestResult] = useState(null);
+  const [testResultOpen, setTestResultOpen] = useState(false);
+  const [submitLoading, setSubmitLoading] = useState(false);
+  const [submitMaskOpen, setSubmitMaskOpen] = useState(false);
+  const [submitMaskText, setSubmitMaskText] = useState("正在处理，请稍候...");
+  const [form] = Form.useForm();
+  const [messageApi, contextHolder] = message.useMessage();
+
+  const load = async () => {
+    setLoading(true);
+    try {
+      const [systemRows, statRows] = await Promise.all([
+        api.get("/api/systems"),
+        api.get("/api/systems/stats")
+      ]);
+      setSystems(systemRows);
+      setStats(statRows);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    void load();
+  }, []);
+
+  const handleSubmit = async () => {
+    try {
+      const values = await form.validateFields();
+      const formData = new FormData();
+
+      Object.entries(values).forEach(([key, value]) => {
+        if (key === "ontology" || value === undefined) {
+          return;
+        }
+        formData.set(key, String(value));
+      });
+
+      if (values.ontology?.[0]?.originFileObj) {
+        formData.set("ontology", values.ontology[0].originFileObj);
+      }
+
+      setSubmitLoading(true);
+      setSubmitMaskText(editing ? "正在保存业务系统..." : "正在创建业务系统，请稍候...");
+      setSubmitMaskOpen(true);
+
+      if (editing) {
+        await api.multipart(`/api/systems/${editing.id}`, formData, "PUT");
+        messageApi.success(`业务系统 ${editing.application_name} 已更新`);
+      } else {
+        await api.multipart("/api/systems", formData);
+        messageApi.success(`业务系统 ${values.application_name} 创建成功`);
+      }
+
+      setOpen(false);
+      setEditing(null);
+      form.resetFields();
+      await load();
+    } catch (error) {
+      if (error?.errorFields) {
+        return;
+      }
+      messageApi.error(error.message || "保存业务系统失败");
+    } finally {
+      setSubmitLoading(false);
+      setSubmitMaskOpen(false);
+    }
+  };
+
+  const handleDeleteSystem = async (row) => {
+    try {
+      setSubmitLoading(true);
+      setSubmitMaskText(`正在删除业务系统 ${row.application_name}，请稍候...`);
+      setSubmitMaskOpen(true);
+      await api.delete(`/api/systems/${row.id}`);
+      await load();
+      messageApi.success(`业务系统 ${row.application_name} 已删除`);
+    } catch (error) {
+      messageApi.error(error.message || `删除业务系统 ${row.application_name} 失败`);
+    } finally {
+      setSubmitLoading(false);
+      setSubmitMaskOpen(false);
+    }
+  };
+
+  const handleConnectivityTest = async (row) => {
+    try {
+      setSubmitLoading(true);
+      setSubmitMaskText(`正在测试业务系统 ${row.application_name} 连通性，请稍候...`);
+      setSubmitMaskOpen(true);
+      const result = await api.post(`/api/systems/${row.id}/test`, {});
+      setTestResult({
+        applicationName: row.application_name,
+        ok: Boolean(result?.ok),
+        data: result,
+        errorMessage: ""
+      });
+      setTestResultOpen(true);
+    } catch (error) {
+      setTestResult({
+        applicationName: row.application_name,
+        ok: false,
+        data: null,
+        errorMessage: error.message || "连通性测试失败"
+      });
+      setTestResultOpen(true);
+    } finally {
+      setSubmitLoading(false);
+      setSubmitMaskOpen(false);
+    }
+  };
+
+  return (
+    <>
+      {contextHolder}
+      <Modal
+        open={submitMaskOpen}
+        footer={null}
+        closable={false}
+        maskClosable={false}
+        centered
+        width={320}
+      >
+        <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 12, padding: "16px 0" }}>
+          <Spin size="large" />
+          <div>{submitMaskText}</div>
+        </div>
+      </Modal>
+      <Tabs
+        defaultActiveKey="catalog"
+        items={[
+          {
+            key: "catalog",
+            label: "系统接入",
+            children: (
+              <Card
+                className="page-card"
+                title={<CardTitleWithReload title="业务系统" loading={loading} onReload={() => load()} />}
+                extra={(
+                  <Button
+                    type="primary"
+                    onClick={() => {
+                      setEditing(null);
+                      form.resetFields();
+                      form.setFieldsValue(getInitialValues());
+                      setOpen(true);
+                    }}
+                  >
+                    新增业务系统
+                  </Button>
+                )}
+              >
+                <Table
+                  rowKey="id"
+                  loading={loading}
+                  dataSource={systems}
+                  pagination={{
+                    pageSize: 50,
+                    showSizeChanger: false
+                  }}
+                  columns={[
+                    { title: "提供方", dataIndex: "provider" },
+                    { title: "应用名", dataIndex: "application_name" },
+                    {
+                      title: "类型",
+                      render: (_, row) => (row.is_builtin ? <Tag color="blue">内置</Tag> : <Tag>自定义</Tag>)
+                    },
+                    {
+                      title: "状态",
+                      render: (_, row) => (
+                        <Tag color={row.status === "active" ? "green" : "default"}>
+                          {getSystemStatusLabel(row.status)}
+                        </Tag>
+                      )
+                    },
+                    {
+                      title: "操作",
+                      render: (_, row) => (
+                        <Space wrap>
+                          <Button
+                            size="small"
+                            onClick={() => {
+                              setEditing(row);
+                              form.setFieldsValue({
+                                provider: row.provider,
+                                application_name: row.application_name,
+                                description: row.description,
+                                scheme: row.scheme,
+                                host: row.host,
+                                port: row.port,
+                                status: row.status
+                              });
+                              setOpen(true);
+                            }}
+                          >
+                            编辑
+                          </Button>
+                          <Button
+                            size="small"
+                            onClick={async () => {
+                              await handleConnectivityTest(row);
+                            }}
+                          >
+                            连通性测试
+                          </Button>
+                          <Button
+                            size="small"
+                            onClick={async () => {
+                              await api.post(`/api/systems/${row.id}/status`, {
+                                status: row.status === "active" ? "disabled" : "active"
+                              });
+                              await load();
+                            }}
+                          >
+                            {row.status === "active" ? "停用" : "启用"}
+                          </Button>
+                          <DeleteActionButton
+                            hidden={row.is_builtin}
+                            title={`确认删除业务系统 ${row.application_name} 吗？`}
+                            description="删除后该业务系统及其管理记录会被移除。"
+                            onConfirm={async () => {
+                              await handleDeleteSystem(row);
+                            }}
+                          />
+                        </Space>
+                      )
+                    }
+                  ]}
+                />
+              </Card>
+            )
+          },
+          {
+            key: "stats",
+            label: "调用统计",
+            children: (
+              <Card
+                className="page-card"
+                title={<CardTitleWithReload title="调用统计" loading={loading} onReload={() => load()} />}
+              >
+                <Table
+                  rowKey={(row) => `${row.application_name}-${row.command_name}`}
+                  loading={loading}
+                  dataSource={stats}
+                  pagination={{
+                    pageSize: 50,
+                    showSizeChanger: false
+                  }}
+                  columns={[
+                    { title: "提供方", dataIndex: "provider" },
+                    { title: "应用名", dataIndex: "application_name" },
+                    { title: "指令", dataIndex: "command_name" },
+                    { title: "次数", dataIndex: "call_count" },
+                    { title: "成功率", dataIndex: "success_rate", render: (value) => `${value}%` },
+                    { title: "平均耗时", dataIndex: "avg_response_ms", render: (value) => `${value} ms` }
+                  ]}
+                />
+              </Card>
+            )
+          }
+        ]}
+      />
+      <Modal
+        open={testResultOpen}
+        title="连通性测试结果"
+        width={640}
+        footer={(
+          <Button
+            type="primary"
+            onClick={() => {
+              setTestResultOpen(false);
+              setTestResult(null);
+            }}
+          >
+            确定
+          </Button>
+        )}
+        onCancel={() => {
+          setTestResultOpen(false);
+          setTestResult(null);
+        }}
+      >
+        <Space direction="vertical" size={16} style={{ width: "100%" }}>
+          <Descriptions
+            bordered
+            size="small"
+            column={1}
+            items={[
+              {
+                key: "application_name",
+                label: "应用名",
+                children: testResult?.applicationName || "-"
+              },
+              {
+                key: "result",
+                label: "测试结果",
+                children: <Tag color={testResult?.ok ? "green" : "red"}>{testResult?.ok ? "成功" : "失败"}</Tag>
+              },
+              {
+                key: "base_url",
+                label: "地址",
+                children: testResult?.data?.baseUrl || "-"
+              },
+              {
+                key: "status",
+                label: "HTTP 状态",
+                children: testResult?.data?.service?.status ?? "-"
+              },
+              {
+                key: "tested_at",
+                label: "测试时间",
+                children: testResult?.data?.tested_at ? formatDateTime(testResult.data.tested_at) : "-"
+              },
+              {
+                key: "error_message",
+                label: "错误信息",
+                children: testResult?.errorMessage || "-"
+              }
+            ]}
+          />
+          <Card className="page-card" title="返回内容">
+            <pre style={jsonBlockStyle}>{formatJson(testResult?.data || testResult?.errorMessage || "-")}</pre>
+          </Card>
+        </Space>
+      </Modal>
+      <Modal
+        open={open}
+        title={editing ? "编辑业务系统" : "新增业务系统"}
+        width={720}
+        okText="确认"
+        cancelText="取消"
+        confirmLoading={submitLoading}
+        onCancel={() => {
+          setOpen(false);
+          setEditing(null);
+        }}
+        onOk={() => {
+          void handleSubmit();
+        }}
+      >
+        <Form form={form} layout="vertical" initialValues={getInitialValues()}>
+          <Row gutter={12}>
+            <Col span={12}>
+              <Form.Item
+                name="provider"
+                label="提供方"
+                rules={[{ required: true, message: "请选择提供方" }]}
+              >
+                <Select options={[{ value: "hzg", label: "hzg" }, { value: "phx", label: "phx" }]} />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item
+                name="application_name"
+                label="应用名"
+                rules={[
+                  { required: true, message: "请输入应用名" },
+                  {
+                    pattern: applicationNamePattern,
+                    message: "应用名需符合 Ubuntu 目录名规则：仅允许小写字母、数字和中划线"
+                  }
+                ]}
+              >
+                <Input placeholder="例如 demo-app" disabled={Boolean(editing)} />
+              </Form.Item>
+            </Col>
+            <Col span={8}>
+              <Form.Item
+                name="scheme"
+                label="协议"
+                rules={[{ required: true, message: "请选择协议" }]}
+              >
+                <Select options={[{ value: "http", label: "http" }, { value: "https", label: "https" }]} />
+              </Form.Item>
+            </Col>
+            <Col span={10}>
+              <Form.Item
+                name="host"
+                label="主机名"
+                rules={[{ required: true, message: "请输入主机名" }]}
+              >
+                <Input placeholder="例如 example.com" />
+              </Form.Item>
+            </Col>
+            <Col span={6}>
+              <Form.Item
+                name="port"
+                label="端口号"
+                rules={[{ required: true, message: "请输入端口号" }]}
+              >
+                <InputNumber style={{ width: "100%" }} min={1} max={65535} precision={0} />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item
+                name="status"
+                label="状态"
+                rules={[{ required: true, message: "请选择状态" }]}
+              >
+                <Select
+                  options={[
+                    { value: "active", label: "启用" },
+                    { value: "disabled", label: "停用" }
+                  ]}
+                />
+              </Form.Item>
+            </Col>
+          </Row>
+          <Form.Item name="description" label="描述">
+            <Input.TextArea rows={3} />
+          </Form.Item>
+          <Form.Item
+            name="ontology"
+            label="本体压缩包"
+            valuePropName="fileList"
+            getValueFromEvent={(event) => event?.fileList || []}
+          >
+            <Upload beforeUpload={() => false} maxCount={1}>
+              <Button>选择文件</Button>
+            </Upload>
+          </Form.Item>
+        </Form>
+      </Modal>
+    </>
+  );
+}

package/src/pages/TemplatesPage.jsx

@@ -0,0 +1,207 @@
+import React, { useEffect, useState } from "react";
+import { Button, Card, Form, Input, Modal, Space, Spin, Table, Tag, Upload, message } from "antd";
+
+import { api } from "../app/api-client.js";
+import { CardTitleWithReload } from "../components/CardTitleWithReload.jsx";
+import { DeleteActionButton } from "../components/DeleteActionButton.jsx";
+import { formatDateTime } from "../utils/format.js";
+
+const templateNamePattern = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
+
+function getTemplateRemoteStatusLabel(status) {
+  switch (status) {
+    case "ready":
+      return "已就绪";
+    case "installed":
+      return "已安装";
+    case "cataloged":
+      return "已归档";
+    default:
+      return status || "-";
+  }
+}
+
+export function TemplatesPage() {
+  const [items, setItems] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [submitLoading, setSubmitLoading] = useState(false);
+  const [submitMaskOpen, setSubmitMaskOpen] = useState(false);
+  const [submitMaskText, setSubmitMaskText] = useState("正在处理中，请稍候...");
+  const [form] = Form.useForm();
+  const [messageApi, contextHolder] = message.useMessage();
+
+  const load = async () => {
+    setLoading(true);
+    try {
+      const templates = await api.get("/api/templates");
+      setItems(templates);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    void load();
+  }, []);
+
+  const handleSubmit = async () => {
+    try {
+      const values = await form.validateFields();
+      const artifact = values.artifact?.[0]?.originFileObj;
+      if (!artifact) {
+        messageApi.error("请上传模板 zip 文件");
+        return;
+      }
+
+      const formData = new FormData();
+      formData.set("template_name", String(values.template_name || "").trim());
+      formData.set("description", String(values.description || ""));
+      formData.set("artifact", artifact);
+
+      setSubmitLoading(true);
+      setSubmitMaskText("正在上传并安装全局模板，请稍候...");
+      setSubmitMaskOpen(true);
+
+      await api.multipart("/api/templates", formData);
+      setOpen(false);
+      form.resetFields();
+      await load();
+      messageApi.success(`模板 ${values.template_name} 处理完成`);
+    } catch (error) {
+      if (error?.errorFields) {
+        return;
+      }
+      messageApi.error(error.message || "模板处理失败");
+    } finally {
+      setSubmitLoading(false);
+      setSubmitMaskOpen(false);
+    }
+  };
+
+  const handleDelete = async (row) => {
+    try {
+      setSubmitLoading(true);
+      setSubmitMaskText(`正在删除模板 ${row.template_name}，请稍候...`);
+      setSubmitMaskOpen(true);
+      await api.delete(`/api/templates/${row.template_name}`);
+      await load();
+      messageApi.success(`模板 ${row.template_name} 已删除`);
+    } catch (error) {
+      messageApi.error(error.message || `删除模板 ${row.template_name} 失败`);
+    } finally {
+      setSubmitLoading(false);
+      setSubmitMaskOpen(false);
+    }
+  };
+
+  return (
+    <>
+      {contextHolder}
+      <Modal
+        open={submitMaskOpen}
+        footer={null}
+        closable={false}
+        maskClosable={false}
+        centered
+        width={320}
+      >
+        <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 12, padding: "16px 0" }}>
+          <Spin size="large" />
+          <div>{submitMaskText}</div>
+        </div>
+      </Modal>
+
+      <Card
+        className="page-card"
+        title={<CardTitleWithReload title="数字员工模板" loading={loading} onReload={() => load()} />}
+        extra={<Button type="primary" onClick={() => setOpen(true)}>上传模板</Button>}
+      >
+        <Table
+          rowKey="template_name"
+          loading={loading}
+          dataSource={items}
+          pagination={{
+            pageSize: 50,
+            showSizeChanger: false
+          }}
+          columns={[
+            { title: "模板名称", dataIndex: "template_name" },
+            {
+              title: "类型",
+              render: (_, row) => (row.is_builtin ? <Tag color="blue">内置</Tag> : <Tag>自定义</Tag>)
+            },
+            { title: "描述", dataIndex: "description", render: (value) => value || "-" },
+            {
+              title: "使用中的数字员工",
+              dataIndex: "agent_slugs",
+              render: (value = []) => (
+                <Space wrap>
+                  {value.length > 0 ? value.map((item) => <Tag key={item}>{item}</Tag>) : "-"}
+                </Space>
+              )
+            },
+            { title: "远端状态", dataIndex: "remote_status", render: getTemplateRemoteStatusLabel },
+            { title: "更新时间", dataIndex: "updated_at", render: formatDateTime },
+            {
+              title: "操作",
+              render: (_, row) => (
+                <DeleteActionButton
+                  hidden={row.is_builtin}
+                  title={`确认删除模板 ${row.template_name} 吗？`}
+                  description="删除后会移除模板管理记录；如果模板仍被数字员工使用，系统会拒绝删除。"
+                  onConfirm={async () => {
+                    await handleDelete(row);
+                  }}
+                />
+              )
+            }
+          ]}
+        />
+      </Card>
+
+      <Modal
+        open={open}
+        title="上传模板"
+        okText="确认"
+        cancelText="取消"
+        confirmLoading={submitLoading}
+        onCancel={() => setOpen(false)}
+        onOk={async () => {
+          await handleSubmit();
+        }}
+      >
+        <Form form={form} layout="vertical">
+          <Form.Item
+            name="template_name"
+            label="模板名称"
+            rules={[
+              { required: true, message: "请输入模板名称" },
+              {
+                pattern: templateNamePattern,
+                message: "模板名称需符合 Ubuntu 目录名规则：仅允许小写字母、数字和中划线"
+              }
+            ]}
+          >
+            <Input />
+          </Form.Item>
+          <Form.Item name="description" label="描述">
+            <Input.TextArea rows={3} />
+          </Form.Item>
+          <Form.Item
+            name="artifact"
+            label="模板 zip"
+            rules={[{ required: true, message: "请上传模板 zip 文件" }]}
+            valuePropName="fileList"
+            getValueFromEvent={(event) => event?.fileList || []}
+            extra="zip 第一层必须包含 AGENTS.md。"
+          >
+            <Upload beforeUpload={() => false} maxCount={1}>
+              <Button>选择文件</Button>
+            </Upload>
+          </Form.Item>
+        </Form>
+      </Modal>
+    </>
+  );
+}