aios-management-web 0.1.0

package/src/components/DeleteActionButton.jsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { Button, Popconfirm } from "antd";
+
+export function DeleteActionButton({
+  hidden = false,
+  title = "确认删除这条记录吗？",
+  description = "删除后不可恢复。",
+  okText = "删除",
+  cancelText = "取消",
+  onConfirm,
+  children = "删除"
+}) {
+  if (hidden) {
+    return null;
+  }
+
+  return (
+    <Popconfirm
+      title={title}
+      description={description}
+      okText={okText}
+      cancelText={cancelText}
+      okButtonProps={{ danger: true }}
+      onConfirm={onConfirm}
+    >
+      <Button size="small" danger>
+        {children}
+      </Button>
+    </Popconfirm>
+  );
+}

package/src/main.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { App as AntdApp } from "antd";
+
+import App from "./App.jsx";
+import "./styles.css";
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
+    <AntdApp>
+      <App />
+    </AntdApp>
+  </React.StrictMode>
+);

package/src/pages/AgentsPage.jsx

@@ -0,0 +1,647 @@
+import React, { useEffect, useState } from "react";
+import {
+  Button,
+  Card,
+  Col,
+  Descriptions,
+  Drawer,
+  Form,
+  Input,
+  InputNumber,
+  Modal,
+  Progress,
+  Row,
+  Select,
+  Spin,
+  Space,
+  Tag,
+  Table,
+  Typography,
+  message
+} from "antd";
+
+import { api } from "../app/api-client.js";
+import { CardTitleWithReload } from "../components/CardTitleWithReload.jsx";
+import { DeleteActionButton } from "../components/DeleteActionButton.jsx";
+import { formatDateTime, formatTokenCount } from "../utils/format.js";
+
+const { Link, Text } = Typography;
+
+const quotaFields = [
+  { limitKey: "daily_limit", usageKey: "daily", label: "每日限额" }
+];
+
+const agentIdPattern = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
+const quotaRules = [
+  { required: true, message: "请输入每日限额" },
+  {
+    validator: (_, value) => (
+      Number.isInteger(value) && value >= -1
+        ? Promise.resolve()
+        : Promise.reject(new Error("请输入 -1 或不小于 0 的整数"))
+    )
+  }
+];
+
+function getInitialValues() {
+  return {
+    id: "",
+    agent_name: "",
+    status: "normal",
+    daily_limit: -1
+  };
+}
+
+function formatQuota(value) {
+  return Number(value) < 0 ? "不限" : formatTokenCount(value);
+}
+
+function buildUsageQuotaRows(agent) {
+  return quotaFields.map((field) => {
+    const current = Number(agent?.usage?.[field.usageKey] ?? 0);
+    const limit = Number(agent?.[field.limitKey] ?? -1);
+    const hasLimit = limit >= 0;
+    const percent = hasLimit && limit > 0
+      ? Math.min(100, Math.round((current / limit) * 100))
+      : 0;
+    const exceeded = hasLimit && current >= limit;
+    const remaining = hasLimit ? Math.max(0, limit - current) : null;
+
+    return {
+      key: field.usageKey,
+      label: field.label,
+      current,
+      limit,
+      hasLimit,
+      percent,
+      exceeded,
+      remaining
+    };
+  });
+}
+
+function normalizeUsernames(values) {
+  return [...new Set((values || []).map((item) => String(item || "").trim()).filter(Boolean))];
+}
+
+function buildAgentPayload(values, editing) {
+  const payload = {
+    agent_name: String(values.agent_name || "").trim(),
+    daily_limit: Number(values.daily_limit ?? -1)
+  };
+
+  if (!editing) {
+    payload.id = String(values.id || "").trim();
+  } else {
+    payload.status = values.status || "normal";
+  }
+
+  return payload;
+}
+
+function getStatusColor(status) {
+  if (status === "normal") {
+    return "green";
+  }
+  if (status === "overlimit") {
+    return "red";
+  }
+  return "default";
+}
+
+function getStatusLabel(status) {
+  switch (status) {
+    case "normal":
+      return "正常";
+    case "overlimit":
+      return "超限";
+    case "disabled":
+      return "停用";
+    default:
+      return status || "-";
+  }
+}
+
+function getAgentDetailItems(agent) {
+  if (!agent) {
+    return [];
+  }
+
+  return [
+    { key: "id", label: "ID", children: agent.slug || "-" },
+    { key: "name", label: "名称", children: agent.agent_name || "-" },
+    {
+      key: "status",
+      label: "状态",
+      children: <Tag color={getStatusColor(agent.status)}>{getStatusLabel(agent.status)}</Tag>
+    },
+    { key: "created_at", label: "创建时间", children: formatDateTime(agent.created_at) },
+    { key: "updated_at", label: "更新时间", children: formatDateTime(agent.updated_at) },
+    {
+      key: "inbound",
+      label: "入站主题",
+      children: agent.remote_state?.inboundTopic || "-"
+    },
+    { key: "outbound", label: "出站主题", children: agent.remote_state?.outboundTopic || "-" }
+  ];
+}
+
+export function AgentsPage() {
+  const [items, setItems] = useState([]);
+  const [aiosUserOptions, setAiosUserOptions] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [aiosUserLoading, setAiosUserLoading] = useState(false);
+  const [editing, setEditing] = useState(null);
+  const [open, setOpen] = useState(false);
+  const [permissionAgent, setPermissionAgent] = useState(null);
+  const [permissionOpen, setPermissionOpen] = useState(false);
+  const [permissionSaving, setPermissionSaving] = useState(false);
+  const [detailAgent, setDetailAgent] = useState(null);
+  const [detailOpen, setDetailOpen] = useState(false);
+  const [submitLoading, setSubmitLoading] = useState(false);
+  const [submitMaskOpen, setSubmitMaskOpen] = useState(false);
+  const [submitMaskText, setSubmitMaskText] = useState("正在处理，请稍候...");
+  const [form] = Form.useForm();
+  const [permissionForm] = Form.useForm();
+  const [messageApi, contextHolder] = message.useMessage();
+
+  const load = async () => {
+    setLoading(true);
+    try {
+      const [agents, aiosUsers] = await Promise.all([
+        api.get("/api/agents"),
+        api.get("/api/aios-users")
+      ]);
+      setItems(agents);
+      setAiosUserOptions((aiosUsers.items || []).map((item) => ({
+        value: item.username,
+        label: item.username
+      })));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const refreshAgentReferences = (agents, agentId) => {
+    const nextAgent = agents.find((item) => Number(item.id) === Number(agentId)) || null;
+    if (nextAgent && detailOpen && Number(detailAgent?.id) === Number(agentId)) {
+      setDetailAgent(nextAgent);
+    }
+    return nextAgent;
+  };
+
+  const reloadAll = async (focusAgentId = null) => {
+    const [agents, aiosUsers] = await Promise.all([
+      api.get("/api/agents"),
+      api.get("/api/aios-users")
+    ]);
+    setItems(agents);
+    setAiosUserOptions((aiosUsers.items || []).map((item) => ({
+      value: item.username,
+      label: item.username
+    })));
+    if (focusAgentId !== null && focusAgentId !== undefined) {
+      return refreshAgentReferences(agents, focusAgentId);
+    }
+    return null;
+  };
+
+  useEffect(() => {
+    void load();
+  }, []);
+
+  const searchAiosUsers = async (keyword) => {
+    setAiosUserLoading(true);
+    try {
+      const result = await api.get(`/api/aios-users?q=${encodeURIComponent(keyword || "")}`);
+      setAiosUserOptions((result.items || []).map((item) => ({
+        value: item.username,
+        label: item.username
+      })));
+    } finally {
+      setAiosUserLoading(false);
+    }
+  };
+
+  const openPermissionDrawer = (agent) => {
+    setPermissionAgent(agent);
+    permissionForm.setFieldsValue({
+      permission_usernames: (agent.permissions || []).map((item) => item.username)
+    });
+    setPermissionOpen(true);
+  };
+
+  const openDetailDrawer = (agent) => {
+    setDetailAgent(agent);
+    setDetailOpen(true);
+  };
+
+  const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+
+  const pollDeletedAgent = async (slug, timeoutMs = 90000, intervalMs = 2000) => {
+    const startedAt = Date.now();
+
+    while (Date.now() - startedAt < timeoutMs) {
+      try {
+        await api.get(`/api/agents/by-slug/${encodeURIComponent(slug)}`);
+      } catch (error) {
+        if (String(error?.message || "").includes("数字员工不存在")) {
+          return;
+        }
+        throw error;
+      }
+      await sleep(intervalMs);
+    }
+
+    throw new Error(`数字员工 ${slug} 删除状态确认超时，请稍后刷新列表确认结果`);
+  };
+
+  const handleSubmit = async () => {
+    try {
+      const values = await form.validateFields();
+      const payload = buildAgentPayload(values, editing);
+      setSubmitLoading(true);
+      setSubmitMaskText(editing ? "正在保存数字员工..." : "正在创建数字员工，请稍候...");
+      setSubmitMaskOpen(true);
+
+      if (editing) {
+        await api.put(`/api/agents/${editing.id}`, payload);
+        setOpen(false);
+        form.resetFields();
+        await load();
+        messageApi.success(`已更新数字员工 ${editing.slug}`);
+        return;
+      }
+
+      const createdAgent = await api.post("/api/agents", payload);
+      setOpen(false);
+      form.resetFields();
+      await load();
+      messageApi.success(`数字员工 ${createdAgent.slug} 创建成功`);
+    } catch (error) {
+      if (error?.errorFields) {
+        return;
+      }
+      messageApi.error(error.message || "保存数字员工失败");
+    } finally {
+      setSubmitLoading(false);
+      setSubmitMaskOpen(false);
+    }
+  };
+
+  const handleDeleteAgent = async (row) => {
+    try {
+      setSubmitLoading(true);
+      setSubmitMaskText(`正在删除数字员工 ${row.slug}，请稍候...`);
+      setSubmitMaskOpen(true);
+      await api.delete(`/api/agents/${row.id}`);
+      await pollDeletedAgent(row.slug);
+      await load();
+      messageApi.success(`数字员工 ${row.slug} 已删除`);
+    } catch (error) {
+      messageApi.error(error.message || `删除数字员工 ${row.slug} 失败`);
+    } 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="数字员工（Agent）" loading={loading} onReload={() => load()} />}
+        extra={(
+          <Button
+            type="primary"
+            onClick={() => {
+              setEditing(null);
+              form.setFieldsValue(getInitialValues());
+              setOpen(true);
+            }}
+          >
+            新增数字员工
+          </Button>
+        )}
+      >
+        <Table
+          rowKey="id"
+          loading={loading}
+          dataSource={items}
+          pagination={{
+            pageSize: 50,
+            showSizeChanger: false
+          }}
+          columns={[
+            {
+              title: "ID",
+              dataIndex: "slug",
+              render: (value, row) => (
+                <Link
+                  onClick={() => {
+                    openDetailDrawer(row);
+                  }}
+                >
+                  {value}
+                </Link>
+              )
+            },
+            { title: "名称", dataIndex: "agent_name", render: (value) => value || "-" },
+            {
+              title: "每日限额",
+              dataIndex: "daily_limit",
+              render: formatQuota
+            },
+            {
+              title: "今日用量",
+              render: (_, row) => formatTokenCount(row.usage?.daily ?? 0)
+            },
+            {
+              title: "状态",
+              render: (_, row) => <Tag color={getStatusColor(row.status)}>{getStatusLabel(row.status)}</Tag>
+            },
+            {
+              title: "操作",
+              render: (_, row) => (
+                <Space wrap>
+                  <Button
+                    size="small"
+                    onClick={() => {
+                      setEditing(row);
+                      form.setFieldsValue({
+                        agent_name: row.agent_name,
+                        status: row.status,
+                        daily_limit: row.daily_limit
+                      });
+                      setOpen(true);
+                    }}
+                  >
+                    编辑
+                  </Button>
+                  <Button
+                    size="small"
+                    onClick={() => {
+                      openPermissionDrawer(row);
+                    }}
+                  >
+                    管理用户
+                  </Button>
+                  <DeleteActionButton
+                    title={`确认删除数字员工 ${row.slug} 吗？`}
+                    description="删除后该数字员工的管理记录会被移除。"
+                    onConfirm={async () => {
+                      await handleDeleteAgent(row);
+                    }}
+                  />
+                </Space>
+              )
+            }
+          ]}
+        />
+      </Card>
+
+      <Modal
+        open={open}
+        title={editing ? "编辑数字员工" : "新增数字员工"}
+        width={720}
+        okText="完成"
+        cancelText="取消"
+        confirmLoading={submitLoading}
+        onCancel={() => {
+          setOpen(false);
+          setEditing(null);
+          form.resetFields();
+        }}
+        onOk={() => {
+          void handleSubmit();
+        }}
+      >
+        <Form form={form} layout="vertical" initialValues={getInitialValues()}>
+          {editing ? (
+            <>
+              <Form.Item label="ID">
+                <Input value={editing.slug} disabled />
+              </Form.Item>
+            </>
+          ) : (
+            <Form.Item
+              name="id"
+              label="ID"
+              rules={[
+                { required: true, message: "请输入数字员工 ID" },
+                {
+                  pattern: agentIdPattern,
+                  message: "ID 需使用 slug 格式：小写字母、数字和中划线"
+                }
+              ]}
+            >
+              <Input placeholder="例如 finance-agent" />
+            </Form.Item>
+          )}
+
+          <Form.Item
+            name="agent_name"
+            label="数字员工名称"
+            rules={[{ required: true, message: "请输入数字员工名称" }]}
+          >
+            <Input placeholder="例如 财务助手" />
+          </Form.Item>
+
+          {editing ? (
+            <Form.Item
+              name="status"
+              label="状态"
+              rules={[{ required: true, message: "请选择状态" }]}
+            >
+              <Select
+                options={[
+                  { value: "normal", label: "正常" },
+                  { value: "disabled", label: "停用" },
+                  { value: "overlimit", label: "超限" }
+                ]}
+              />
+            </Form.Item>
+          ) : null}
+
+          <Row gutter={12}>
+            {quotaFields.map((field) => (
+              <Col span={12} key={field.limitKey}>
+                <Form.Item name={field.limitKey} label={`${field.label}限制`} rules={quotaRules}>
+                  <InputNumber style={{ width: "100%" }} min={-1} precision={0} />
+                </Form.Item>
+              </Col>
+            ))}
+          </Row>
+        </Form>
+      </Modal>
+
+      <Modal
+        open={permissionOpen}
+        title={permissionAgent ? `管理 ${permissionAgent.slug} 的用户` : "管理数字员工用户"}
+        width={640}
+        okText="保存分配"
+        cancelText="取消"
+        confirmLoading={permissionSaving}
+        onCancel={() => {
+          setPermissionOpen(false);
+          setPermissionAgent(null);
+          permissionForm.resetFields();
+        }}
+        onOk={async () => {
+          const values = await permissionForm.validateFields();
+          setPermissionSaving(true);
+          try {
+            await api.put(`/api/agents/${permissionAgent.id}`, {
+              permission_usernames: normalizeUsernames(values.permission_usernames)
+            });
+            const nextAgent = await reloadAll(permissionAgent.id);
+            if (nextAgent) {
+              setPermissionAgent(nextAgent);
+            }
+            setPermissionOpen(false);
+            setPermissionAgent(null);
+            permissionForm.resetFields();
+          } finally {
+            setPermissionSaving(false);
+          }
+        }}
+      >
+        <Space direction="vertical" size={16} style={{ width: "100%" }}>
+          <Card size="small" className="page-card">
+            <Space direction="vertical" size={8} style={{ width: "100%" }}>
+              <Text strong>{permissionAgent?.slug || "-"}</Text>
+              <Text type="secondary">
+                直接输入用户名后回车即可新增并分配，输入时会优先联想已有 AIOS 用户。
+              </Text>
+            </Space>
+          </Card>
+          <Form form={permissionForm} layout="vertical">
+            <Form.Item
+              name="permission_usernames"
+              label="授权用户列表"
+              extra="支持搜索、粘贴多个用户名并按回车确认。"
+            >
+              <Select
+                mode="tags"
+                placeholder="请输入用户名并回车，或从联想结果中选择"
+                options={aiosUserOptions}
+                loading={aiosUserLoading}
+                onSearch={(value) => {
+                  void searchAiosUsers(value);
+                }}
+                onDropdownVisibleChange={(openDropdown) => {
+                  if (openDropdown) {
+                    void searchAiosUsers("");
+                  }
+                }}
+                tokenSeparators={[",", " "]}
+                filterOption={false}
+              />
+            </Form.Item>
+          </Form>
+        </Space>
+      </Modal>
+
+      <Drawer
+        open={detailOpen}
+        title={detailAgent ? `${detailAgent.slug} 的数字员工详情` : "数字员工详情"}
+        placement="right"
+        width="100vw"
+        onClose={() => {
+          setDetailOpen(false);
+          setDetailAgent(null);
+        }}
+      >
+        <Space direction="vertical" size={16} style={{ width: "100%" }}>
+          <Card className="page-card" title="基础信息">
+            <Descriptions
+              bordered
+              size="small"
+              column={2}
+              items={getAgentDetailItems(detailAgent)}
+            />
+          </Card>
+          <Row gutter={[16, 16]}>
+            <Col xs={24} md={12} xl={8}>
+              <Card className="page-card" title="员工分配">
+                <Space wrap>
+                  {(detailAgent?.permissions || []).length > 0
+                    ? detailAgent.permissions.map((item) => (
+                      <Tag key={item.id || item.username} color="blue">
+                        {item.username}
+                      </Tag>
+                    ))
+                    : <Text type="secondary">暂无分配用户</Text>}
+                </Space>
+              </Card>
+            </Col>
+            <Col xs={24} md={12} xl={16}>
+              <Card className="page-card" title="用量与限额">
+                <Table
+                  rowKey="key"
+                  size="small"
+                  pagination={false}
+                  dataSource={buildUsageQuotaRows(detailAgent)}
+                  columns={[
+                    {
+                      title: "周期",
+                      dataIndex: "label",
+                      width: 96
+                    },
+                    {
+                      title: "用量",
+                      render: (_, row) => formatTokenCount(row.current)
+                    },
+                    {
+                      title: "限额",
+                      render: (_, row) => formatQuota(row.limit)
+                    },
+                    {
+                      title: "占比",
+                      render: (_, row) => (
+                        row.hasLimit ? (
+                          <Progress
+                            percent={row.percent}
+                            status={row.exceeded ? "exception" : "active"}
+                            size="small"
+                          />
+                        ) : <Text type="secondary">不限额</Text>
+                      )
+                    },
+                    {
+                      title: "剩余",
+                      render: (_, row) => (
+                        row.hasLimit
+                          ? (
+                            <Text type={row.exceeded ? "danger" : undefined}>
+                              {row.exceeded ? "已超限" : formatTokenCount(row.remaining)}
+                            </Text>
+                          )
+                          : <Text type="secondary">不限额</Text>
+                      )
+                    }
+                  ]}
+                />
+              </Card>
+            </Col>
+          </Row>
+        </Space>
+      </Drawer>
+    </>
+  );
+}