aios-management-web 0.1.0

package/src/pages/SkillsPage.jsx

@@ -0,0 +1,175 @@
+import React, { useEffect, useState } from "react";
+import { Alert, Button, Card, Form, Input, Modal, 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";
+
+const skillIdPattern = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
+
+function getRemoteStatusLabel(status) {
+  switch (status) {
+    case "installed":
+      return "已安装";
+    case "cataloged":
+      return "已归档";
+    case "ready":
+      return "就绪";
+    default:
+      return status || "-";
+  }
+}
+
+export function SkillsPage() {
+  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 skills = await api.get("/api/skills");
+      setItems(skills);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    void load();
+  }, []);
+
+  const handleSubmit = async () => {
+    try {
+      const values = await form.validateFields();
+      const formData = new FormData();
+      formData.set("slug", String(values.slug || "").trim());
+      formData.set("description", String(values.description || ""));
+      if (values.artifact?.[0]?.originFileObj) {
+        formData.set("artifact", values.artifact[0].originFileObj);
+      }
+
+      setSubmitLoading(true);
+      setSubmitMaskText("正在上传并安装全局技能，请稍候...");
+      setSubmitMaskOpen(true);
+
+      await api.multipart("/api/skills", formData);
+      setOpen(false);
+      form.resetFields();
+      await load();
+      messageApi.success(`全局技能 ${values.slug} 处理完成`);
+    } catch (error) {
+      if (error?.errorFields) {
+        return;
+      }
+      messageApi.error(error.message || "全局技能处理失败");
+    } 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="id"
+          loading={loading}
+          dataSource={items}
+          pagination={{
+            pageSize: 50,
+            showSizeChanger: false
+          }}
+          columns={[
+            { title: "技能 ID", dataIndex: "slug" },
+            {
+              title: "类型",
+              render: (_, row) => (row.is_builtin ? <Tag color="blue">内置</Tag> : <Tag>自定义</Tag>)
+            },
+            { title: "远程状态", dataIndex: "remote_status", render: getRemoteStatusLabel },
+            {
+              title: "操作",
+              render: (_, row) => (
+                <DeleteActionButton
+                  hidden={row.is_builtin}
+                  title={`确认删除全局技能 ${row.slug} 吗？`}
+                  description="删除后会移除管理记录；如果该技能已完成全局安装，也会触发远程卸载。"
+                  onConfirm={async () => {
+                    await api.delete(`/api/skills/${row.id}`);
+                    await load();
+                  }}
+                />
+              )
+            }
+          ]}
+        />
+        <Modal
+          open={open}
+          title="新增全局技能"
+          okText="确认"
+          cancelText="取消"
+          confirmLoading={submitLoading}
+          onCancel={() => setOpen(false)}
+          onOk={async () => {
+            await handleSubmit();
+          }}
+        >
+          <Form form={form} layout="vertical">
+           
+            <Form.Item
+              name="slug"
+              label="技能 ID"
+              rules={[
+                { required: true, message: "请输入技能 ID" },
+                {
+                  pattern: skillIdPattern,
+                  message: "技能 ID 需符合 slug 规则：仅允许小写字母、数字和中划线"
+                }
+              ]}
+            >
+              <Input />
+            </Form.Item>
+            <Form.Item name="description" label="描述">
+              <Input.TextArea rows={3} />
+            </Form.Item>
+            <Form.Item
+              name="artifact"
+              label="技能 zip"
+              valuePropName="fileList"
+              getValueFromEvent={(event) => event?.fileList || []}
+              rules={[{ required: true, message: "必须上传技能 zip" }]}
+              extra="zip 第一层必须包含 SKILL.md。安装过程将会跳过内建的安全检查机制，请自行确保该技能的安全性。"
+            >
+              <Upload beforeUpload={() => false} maxCount={1}>
+                <Button>选择文件</Button>
+              </Upload>
+            </Form.Item>
+          </Form>
+        </Modal>
+      </Card>
+    </>
+  );
+}

package/src/pages/SystemLogsPage.jsx

@@ -0,0 +1,349 @@
+import React, { useEffect, useState } from "react";
+import { Button, Card, Descriptions, Drawer, Space, Table, Tabs, Tag } from "antd";
+
+import { api } from "../app/api-client.js";
+import { CardTitleWithReload } from "../components/CardTitleWithReload.jsx";
+import { formatDateTime } from "../utils/format.js";
+
+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 formatJson(value) {
+  if (value === undefined || value === null) {
+    return "-";
+  }
+
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+}
+
+function renderResultTag(value) {
+  if (value === null || value === undefined) {
+    return <Tag>处理中</Tag>;
+  }
+
+  return <Tag color={value ? "green" : "red"}>{value ? "成功" : "失败"}</Tag>;
+}
+
+function getSystemInvocationDetailItems(log) {
+  if (!log) {
+    return [];
+  }
+
+  return [
+    { key: "created_at", label: "时间", children: formatDateTime(log.created_at) },
+    { key: "provider", label: "提供方", children: log.provider || "-" },
+    { key: "application_name", label: "应用名", children: log.application_name || "-" },
+    { key: "command_name", label: "指令", children: log.command_name || "-" },
+    { key: "agent_slug", label: "数字员工", children: log.agent_slug || "-" },
+    { key: "session_id", label: "会话ID", children: log.session_id || "-" },
+    { key: "trace_id", label: "请求追踪ID", children: log.trace_id || "-" },
+    {
+      key: "response_time_ms",
+      label: "耗时",
+      children: typeof log.response_time_ms === "number" ? `${log.response_time_ms} ms` : "-"
+    },
+    {
+      key: "success",
+      label: "执行结果",
+      children: renderResultTag(log.success)
+    },
+    { key: "error_message", label: "错误", children: log.error_message || "-" }
+  ];
+}
+
+function getKernelInvocationDetailItems(log) {
+  if (!log) {
+    return [];
+  }
+
+  return [
+    { key: "request_id", label: "请求ID", children: log.request_id || "-" },
+    { key: "created_at", label: "发送时间", children: formatDateTime(log.created_at) },
+    { key: "completed_at", label: "完成时间", children: formatDateTime(log.completed_at) },
+    { key: "action", label: "指令", children: log.action || "-" },
+    {
+      key: "ok",
+      label: "执行结果",
+      children: renderResultTag(log.ok)
+    },
+    {
+      key: "response_time_ms",
+      label: "耗时",
+      children: typeof log.response_time_ms === "number" ? `${log.response_time_ms} ms` : "-"
+    }
+  ];
+}
+
+export function SystemLogsPage() {
+  const [auditItems, setAuditItems] = useState([]);
+  const [auditPage, setAuditPage] = useState(1);
+  const [auditPageSize] = useState(50);
+  const [auditTotal, setAuditTotal] = useState(0);
+  const [auditLoading, setAuditLoading] = useState(false);
+
+  const [systemLogs, setSystemLogs] = useState([]);
+  const [systemLogsLoading, setSystemLogsLoading] = useState(false);
+  const [systemLogDetail, setSystemLogDetail] = useState(null);
+  const [systemLogDetailOpen, setSystemLogDetailOpen] = useState(false);
+
+  const [kernelItems, setKernelItems] = useState([]);
+  const [kernelPage, setKernelPage] = useState(1);
+  const [kernelPageSize] = useState(50);
+  const [kernelTotal, setKernelTotal] = useState(0);
+  const [kernelLoading, setKernelLoading] = useState(false);
+  const [kernelDetail, setKernelDetail] = useState(null);
+  const [kernelDetailOpen, setKernelDetailOpen] = useState(false);
+
+  const loadAuditLogs = async (nextPage = auditPage) => {
+    setAuditLoading(true);
+    try {
+      const result = await api.get(`/api/audit-logs?page=${nextPage}&pageSize=${auditPageSize}`);
+      setAuditItems(result.items || []);
+      setAuditTotal(result.total || 0);
+      setAuditPage(result.page || nextPage);
+    } finally {
+      setAuditLoading(false);
+    }
+  };
+
+  const loadSystemInvocationLogs = async () => {
+    setSystemLogsLoading(true);
+    try {
+      const result = await api.get("/api/systems/logs");
+      setSystemLogs(Array.isArray(result) ? result : []);
+    } finally {
+      setSystemLogsLoading(false);
+    }
+  };
+
+  const loadKernelLogs = async (nextPage = kernelPage) => {
+    setKernelLoading(true);
+    try {
+      const result = await api.get(`/api/kernel/logs?page=${nextPage}&pageSize=${kernelPageSize}`);
+      setKernelItems(result.items || []);
+      setKernelTotal(result.total || 0);
+      setKernelPage(result.page || nextPage);
+    } finally {
+      setKernelLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    void Promise.all([
+      loadAuditLogs(1),
+      loadSystemInvocationLogs(),
+      loadKernelLogs(1)
+    ]);
+  }, []);
+
+  return (
+    <>
+      <Tabs
+        defaultActiveKey="audit"
+        items={[
+          {
+            key: "audit",
+            label: "审计日志",
+            children: (
+              <Card
+                className="page-card"
+                title={<CardTitleWithReload title="审计日志" loading={auditLoading} onReload={() => loadAuditLogs()} />}
+              >
+                <Table
+                  rowKey="id"
+                  loading={auditLoading}
+                  dataSource={auditItems}
+                  pagination={{
+                    current: auditPage,
+                    pageSize: auditPageSize,
+                    total: auditTotal,
+                    showSizeChanger: false,
+                    onChange: (nextPage) => {
+                      void loadAuditLogs(nextPage);
+                    }
+                  }}
+                  columns={[
+                    { title: "时间", dataIndex: "created_at", render: formatDateTime, width: 180 },
+                    { title: "操作人", dataIndex: "username", width: 160 },
+                    { title: "操作", dataIndex: "action", width: 220 },
+                    { title: "详情", dataIndex: "detail" }
+                  ]}
+                />
+              </Card>
+            )
+          },
+          {
+            key: "system",
+            label: "业务系统调用日志",
+            children: (
+              <Card
+                className="page-card"
+                title={<CardTitleWithReload title="业务系统调用日志" loading={systemLogsLoading} onReload={() => loadSystemInvocationLogs()} />}
+              >
+                <Table
+                  rowKey="trace_id"
+                  loading={systemLogsLoading}
+                  dataSource={systemLogs}
+                  pagination={{
+                    pageSize: 50,
+                    showSizeChanger: false
+                  }}
+                  columns={[
+                    { title: "时间", dataIndex: "created_at", render: formatDateTime },
+                    { title: "应用名", dataIndex: "application_name" },
+                    { title: "数字员工", dataIndex: "agent_slug", render: (value) => value || "-" },
+                    { title: "接口", render: (_, row) => `${row.provider}/${row.application_name}/${row.command_name}` },
+                    {
+                      title: "耗时",
+                      dataIndex: "response_time_ms",
+                      render: (value) => (typeof value === "number" ? `${value} ms` : "-")
+                    },
+                    {
+                      title: "执行结果",
+                      dataIndex: "success",
+                      render: renderResultTag
+                    },
+                    {
+                      title: "操作",
+                      render: (_, row) => (
+                        <Button
+                          size="small"
+                          onClick={() => {
+                            setSystemLogDetail(row);
+                            setSystemLogDetailOpen(true);
+                          }}
+                        >
+                          详情
+                        </Button>
+                      )
+                    }
+                  ]}
+                />
+              </Card>
+            )
+          },
+          {
+            key: "kernel",
+            label: "内核调用日志",
+            children: (
+              <Card
+                className="page-card"
+                title={<CardTitleWithReload title="内核调用日志" loading={kernelLoading} onReload={() => loadKernelLogs()} />}
+              >
+                <Table
+                  rowKey="request_id"
+                  loading={kernelLoading}
+                  dataSource={kernelItems}
+                  pagination={{
+                    current: kernelPage,
+                    pageSize: kernelPageSize,
+                    total: kernelTotal,
+                    showSizeChanger: false,
+                    onChange: (nextPage) => {
+                      void loadKernelLogs(nextPage);
+                    }
+                  }}
+                  columns={[
+                    { title: "请求ID", dataIndex: "request_id" },
+                    { title: "发送时间", dataIndex: "created_at", render: formatDateTime, width: 180 },
+                    { title: "指令", dataIndex: "action" },
+                    {
+                      title: "执行结果",
+                      dataIndex: "ok",
+                      width: 120,
+                      render: renderResultTag
+                    },
+                    {
+                      title: "操作",
+                      width: 100,
+                      render: (_, row) => (
+                        <Button
+                          size="small"
+                          onClick={() => {
+                            setKernelDetail(row);
+                            setKernelDetailOpen(true);
+                          }}
+                        >
+                          详情
+                        </Button>
+                      )
+                    }
+                  ]}
+                />
+              </Card>
+            )
+          }
+        ]}
+      />
+      <Drawer
+        open={systemLogDetailOpen}
+        title="业务系统调用详情"
+        width={860}
+        onClose={() => {
+          setSystemLogDetailOpen(false);
+          setSystemLogDetail(null);
+        }}
+      >
+        <Space direction="vertical" size={16} style={{ width: "100%" }}>
+          <Card className="page-card" title="基本信息">
+            <Descriptions
+              bordered
+              size="small"
+              column={1}
+              items={getSystemInvocationDetailItems(systemLogDetail)}
+            />
+          </Card>
+          <Card className="page-card" title="请求参数">
+            <pre style={jsonBlockStyle}>{formatJson(systemLogDetail?.request_payload)}</pre>
+          </Card>
+          <Card className="page-card" title="返回结果">
+            <pre style={jsonBlockStyle}>{formatJson(systemLogDetail?.response_payload)}</pre>
+          </Card>
+        </Space>
+      </Drawer>
+      <Drawer
+        open={kernelDetailOpen}
+        title="内核调用详情"
+        width={860}
+        onClose={() => {
+          setKernelDetailOpen(false);
+          setKernelDetail(null);
+        }}
+      >
+        <Space direction="vertical" size={16} style={{ width: "100%" }}>
+          <Card className="page-card" title="基本信息">
+            <Descriptions
+              bordered
+              size="small"
+              column={1}
+              items={getKernelInvocationDetailItems(kernelDetail)}
+            />
+          </Card>
+          <Card className="page-card" title="参数">
+            <pre style={jsonBlockStyle}>{formatJson(kernelDetail?.params)}</pre>
+          </Card>
+          <Card className="page-card" title="返回结果">
+            <pre style={jsonBlockStyle}>{formatJson(kernelDetail?.result)}</pre>
+          </Card>
+          <Card className="page-card" title="错误">
+            <pre style={jsonBlockStyle}>{formatJson(kernelDetail?.error)}</pre>
+          </Card>
+        </Space>
+      </Drawer>
+    </>
+  );
+}