aios-management-web 0.1.0

package/src/pages/AiosUsersPage.jsx

@@ -0,0 +1,151 @@
+import React, { useEffect, useState } from "react";
+import { Button, Card, Form, Input, Modal, Space, Table, Tag, message } from "antd";
+
+import { api } from "../app/api-client.js";
+import { CardTitleWithReload } from "../components/CardTitleWithReload.jsx";
+import { DeleteActionButton } from "../components/DeleteActionButton.jsx";
+
+export function AiosUsersPage() {
+  const [items, setItems] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [page, setPage] = useState(1);
+  const [pageSize] = useState(50);
+  const [total, setTotal] = useState(0);
+  const [importForm] = Form.useForm();
+  const [importing, setImporting] = useState(false);
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const [messageApi, contextHolder] = message.useMessage();
+
+  const load = async (nextPage = page) => {
+    setLoading(true);
+    try {
+      const result = await api.get(`/api/aios-users?page=${nextPage}&limit=${pageSize}`);
+      setItems(result.items || []);
+      setTotal(result.total || 0);
+      setPage(result.page || nextPage);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    void load(1);
+  }, []);
+
+  return (
+    <>
+      {contextHolder}
+      <Card
+        className="page-card"
+        title={<CardTitleWithReload title="AIOS 用户" loading={loading} onReload={() => load()} />}
+        extra={(
+          <Button
+            type="primary"
+            onClick={() => {
+              setDrawerOpen(true);
+            }}
+          >
+            新增用户
+          </Button>
+        )}
+      >
+        <Table
+          rowKey="id"
+          loading={loading}
+          pagination={{
+            current: page,
+            pageSize,
+            total,
+            showSizeChanger: false,
+            onChange: (nextPage) => {
+              void load(nextPage);
+            }
+          }}
+          dataSource={items}
+          columns={[
+            { title: "用户名", dataIndex: "username" },
+            {
+              title: "已分配的数字员工",
+              dataIndex: "assigned_agent_items",
+              render: (value = []) => value.length > 0 ? (
+                <Space wrap>
+                  {value.map((item) => (
+                    <Tag key={item.id || item.slug}>{item.agent_name || item.slug}</Tag>
+                  ))}
+                </Space>
+              ) : "-"
+            },
+            {
+              title: "操作",
+              render: (_, row) => (
+                <DeleteActionButton
+                  hidden={Number(row.assigned_agents || 0) > 0}
+                  title={`确认删除用户名 ${row.username} 吗？`}
+                  description="删除后，该 AIOS 用户会被移除。若仍被数字员工引用，则不允许删除。"
+                  onConfirm={async () => {
+                    try {
+                      await api.delete(`/api/aios-users/${row.id}`);
+                      messageApi.success(`已删除用户名 ${row.username}`);
+                      const nextPage = items.length === 1 && page > 1 ? page - 1 : page;
+                      await load(nextPage);
+                    } catch (error) {
+                      messageApi.error(error.message || "删除AIOS用户失败");
+                    }
+                  }}
+                />
+              )
+            }
+          ]}
+        />
+      </Card>
+      <Modal
+        open={drawerOpen}
+        title="添加AIOS用户"
+        width={520}
+        okText="完成"
+        cancelText="取消"
+        confirmLoading={importing}
+        onCancel={() => {
+          if (importing) {
+            return;
+          }
+          setDrawerOpen(false);
+          importForm.resetFields();
+        }}
+        onOk={() => {
+          void importForm.submit();
+        }}
+      >
+        <Form
+          form={importForm}
+          layout="vertical"
+          onFinish={async (values) => {
+            setImporting(true);
+            try {
+              const result = await api.post("/api/aios-users/import", {
+                content: values.content
+              });
+              importForm.resetFields();
+              setDrawerOpen(false);
+              messageApi.success(`导入完成，共 ${result.total} 条，新增 ${result.created} 条`);
+              await load(1);
+            } catch (error) {
+              messageApi.error(error.message || "添加AIOS用户失败");
+            } finally {
+              setImporting(false);
+            }
+          }}
+        >
+          <Form.Item
+            name="content"
+            label="用户列表"
+            extra="每行一个用户名，空行会自动忽略。"
+            rules={[{ required: true, message: "请输入待添加的用户名列表" }]}
+          >
+            <Input.TextArea rows={10} placeholder={"zhangsan\nlisi\nwangwu"} />
+          </Form.Item>
+        </Form>
+      </Modal>
+    </>
+  );
+}

package/src/pages/DashboardPage.jsx

@@ -0,0 +1,72 @@
+import React, { useEffect, useState } from "react";
+import { Card, Space, Spin, Table, Tag } from "antd";
+
+import { api } from "../app/api-client.js";
+import { formatDateTime, formatTokenCount } from "../utils/format.js";
+
+const metricLabels = {
+  agents: "数字员工数",
+  templates: "模板数",
+  skills: "技能数",
+  systems: "业务系统数",
+  today_tokens: "今日 Token 总用量"
+};
+
+function formatMetricValue(key, value) {
+  if (value === null || value === undefined) {
+    return "-";
+  }
+
+  if (key === "today_tokens") {
+    return formatTokenCount(value);
+  }
+
+  return value;
+}
+
+export function DashboardPage() {
+  const [data, setData] = useState(null);
+
+  useEffect(() => {
+    api.get("/api/dashboard").then(setData);
+  }, []);
+
+  if (!data) {
+    return <Spin />;
+  }
+
+  return (
+    <Space direction="vertical" size="large" style={{ width: "100%" }}>
+      <div className="metric-grid">
+        {Object.entries(data.stats).map(([key, value]) => (
+          <div key={key} className="metric-card">
+            <div className="metric-label">{metricLabels[key] || key}</div>
+            <div className="metric-value">{formatMetricValue(key, value)}</div>
+          </div>
+        ))}
+      </div>
+      <Card className="page-card" title="最近业务系统调用">
+        <Table
+          rowKey="trace_id"
+          pagination={{
+            pageSize: 50,
+            showSizeChanger: false
+          }}
+          dataSource={data.recentInvocations}
+          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) => `${value} ms` },
+            {
+              title: "结果",
+              dataIndex: "success",
+              render: (value) => (value ? <Tag color="green">成功</Tag> : <Tag color="red">失败</Tag>)
+            }
+          ]}
+        />
+      </Card>
+    </Space>
+  );
+}

package/src/pages/LoginPage.jsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { Button, Card, Form, Input, Space, Typography } from "antd";
+
+const { Paragraph, Title } = Typography;
+
+export function LoginPage({ onLogin }) {
+  const [form] = Form.useForm();
+
+  return (
+    <div className="login-shell">
+      <Card className="login-card">
+        <Space direction="vertical" size="large" style={{ width: "100%" }}>
+          <div>
+            <Title level={3} style={{ marginBottom: 8 }}>
+              AIOS 管理控制台
+            </Title>
+            <Paragraph type="secondary" style={{ marginBottom: 0 }}>
+              默认管理员账号为 `aios`，初始密码为 `123456`。首次登录后系统会要求修改密码。
+            </Paragraph>
+          </div>
+          <Form
+            form={form}
+            layout="vertical"
+            initialValues={{ username: "aios", password: "123456" }}
+            onFinish={onLogin}
+          >
+            <Form.Item name="username" label="用户名" rules={[{ required: true, message: "请输入用户名" }]}>
+              <Input />
+            </Form.Item>
+            <Form.Item name="password" label="密码" rules={[{ required: true, message: "请输入密码" }]}>
+              <Input.Password />
+            </Form.Item>
+            <Button type="primary" htmlType="submit" block>
+              登录
+            </Button>
+          </Form>
+        </Space>
+      </Card>
+    </div>
+  );
+}

package/src/pages/SettingsPage.jsx

@@ -0,0 +1,431 @@
+import React, { useEffect, useState } from "react";
+import { Button, Card, Descriptions, Form, Input, Modal, Space, Spin, Table, Tag, Tabs, Typography } from "antd";
+
+import { DeleteActionButton } from "../components/DeleteActionButton.jsx";
+
+const { Text } = Typography;
+
+function renderTaskStatus(taskStatus) {
+  switch (taskStatus?.status) {
+    case "success":
+      return <Tag color="green">成功</Tag>;
+    case "running":
+      return <Tag color="blue">进行中</Tag>;
+    case "failed":
+      return <Tag color="red">失败</Tag>;
+    case "skipped":
+      return <Tag>跳过</Tag>;
+    default:
+      return <Tag>空闲</Tag>;
+  }
+}
+
+function renderSummary(summary, fields) {
+  if (!summary || Object.keys(summary).length === 0) {
+    return "-";
+  }
+
+  const items = fields
+    .filter(({ key }) => summary[key] !== undefined && summary[key] !== null)
+    .map(({ key, label }) => `${label} ${summary[key]}`);
+
+  return items.length > 0 ? items.join("，") : "-";
+}
+
+function normalizeOutputText(value) {
+  return String(value ?? "")
+    .replace(/\r\n/g, "\n")
+    .replace(/\\r\\n/g, "\n")
+    .replace(/\\n/g, "\n");
+}
+
+function stringifyResult(value) {
+  if (value === undefined || value === null) {
+    return "";
+  }
+
+  if (typeof value === "object" && value !== null && "output" in value && value.output !== undefined && value.output !== null) {
+    return normalizeOutputText(value.output);
+  }
+
+  if (typeof value === "string") {
+    return normalizeOutputText(value);
+  }
+
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+}
+
+function SyncStatusCard({ title, taskStatus, buttonLabel, loading, onTrigger, summaryFields }) {
+  return (
+    <Card
+      title={title}
+      extra={(
+        <Button onClick={onTrigger} loading={loading || taskStatus?.status === "running"}>
+          {buttonLabel}
+        </Button>
+      )}
+    >
+      <Descriptions bordered column={1} size="small" className="sync-status-descriptions">
+        <Descriptions.Item label="当前状态">
+          <Space wrap>
+            {renderTaskStatus(taskStatus)}
+            <Text type="secondary">
+              {taskStatus?.trigger_source ? `触发来源：${taskStatus.trigger_source}` : "尚未触发"}
+            </Text>
+          </Space>
+        </Descriptions.Item>
+        <Descriptions.Item label="开始时间">
+          {taskStatus?.started_at || "-"}
+        </Descriptions.Item>
+        <Descriptions.Item label="结束时间">
+          {taskStatus?.finished_at || "-"}
+        </Descriptions.Item>
+        <Descriptions.Item label="上次成功时间">
+          {taskStatus?.last_success_at || "-"}
+        </Descriptions.Item>
+        <Descriptions.Item label="同步摘要">
+          {renderSummary(taskStatus?.summary, summaryFields)}
+        </Descriptions.Item>
+        <Descriptions.Item label="最近错误">
+          {taskStatus?.error_message || "-"}
+        </Descriptions.Item>
+      </Descriptions>
+    </Card>
+  );
+}
+
+export function SettingsPage({
+  settings,
+  accessTokens,
+  agentSyncStatus,
+  skillSyncStatus,
+  templateSyncStatus,
+  systemSyncStatus,
+  usageRefreshStatus,
+  onSave,
+  onCreateAccessToken,
+  onDeleteAccessToken,
+  onAgentSync,
+  onSkillSync,
+  onTemplateSync,
+  onSystemSync,
+  onUsageRefresh,
+  onServerStatus,
+  onServerRestart,
+  onServerDiagnostics
+}) {
+  const [form] = Form.useForm();
+  const [agentSyncing, setAgentSyncing] = useState(false);
+  const [skillSyncing, setSkillSyncing] = useState(false);
+  const [templateSyncing, setTemplateSyncing] = useState(false);
+  const [systemSyncing, setSystemSyncing] = useState(false);
+  const [usageRefreshing, setUsageRefreshing] = useState(false);
+  const [creatingToken, setCreatingToken] = useState(false);
+  const [deletingToken, setDeletingToken] = useState("");
+  const [serverCommandLoading, setServerCommandLoading] = useState(false);
+  const [serverOutput, setServerOutput] = useState("");
+
+  useEffect(() => {
+    form.setFieldsValue(settings);
+  }, [form, settings]);
+
+  return (
+    <>
+      <Tabs
+        defaultActiveKey="general"
+        items={[
+          {
+            key: "general",
+            label: "基础设置",
+            children: (
+              <Card
+                className="page-card"
+                title="基础设置"
+                extra={(
+                  <Button type="primary" onClick={() => form.submit()}>
+                    保存
+                  </Button>
+                )}
+              >
+                <Form form={form} layout="vertical" onFinish={onSave}>
+                  <Form.Item
+                    name="portal_name"
+                    label="门户名称"
+                    rules={[{ required: true, message: "请输入门户名称" }]}
+                  >
+                    <Input />
+                  </Form.Item>
+                  <Form.Item
+                    name="brand_subtitle"
+                    label="副标题"
+                    rules={[{ required: true, message: "请输入副标题" }]}
+                  >
+                    <Input />
+                  </Form.Item>
+                  <Form.Item
+                    name="theme_color"
+                    label="主题色"
+                    rules={[{ required: true, message: "请输入主题色" }]}
+                  >
+                    <Input />
+                  </Form.Item>
+                </Form>
+                <Descriptions bordered column={1} size="small">
+                  <Descriptions.Item label="管理员密码重置">
+                    <Text code>npm run reset-password -- aios NewPassword123!</Text>
+                  </Descriptions.Item>
+                  <Descriptions.Item label="AIOS内核重置">
+                    <Text code>npm run reset-kernel -- --confirm-reset --dry-run</Text>
+                  </Descriptions.Item>
+                </Descriptions>
+              </Card>
+            )
+          },
+          {
+            key: "accessTokens",
+            label: "访问凭证",
+            children: (
+              <Card
+                className="page-card"
+                title="访问凭证"
+                extra={(
+                  <Button
+                    type="primary"
+                    loading={creatingToken}
+                    onClick={async () => {
+                      setCreatingToken(true);
+                      try {
+                        await onCreateAccessToken();
+                      } finally {
+                        setCreatingToken(false);
+                      }
+                    }}
+                  >
+                    新增随机 Token
+                  </Button>
+                )}
+              >
+                <Table
+                  rowKey="token"
+                  dataSource={accessTokens}
+                  pagination={false}
+                  columns={[
+                    {
+                      title: "Token",
+                      dataIndex: "token",
+                      render: (value) => <Text code>{value}</Text>
+                    },
+                    {
+                      title: "创建时间",
+                      dataIndex: "created_at",
+                      render: (value) => value || "-"
+                    },
+                    {
+                      title: "操作",
+                      render: (_, row) => (
+                        <DeleteActionButton
+                          title="确认删除这个 Access Token 吗？"
+                          description="删除后依赖该 Token 的调用会立即失效。"
+                          onConfirm={async () => {
+                            setDeletingToken(row.token);
+                            try {
+                              await onDeleteAccessToken(row.token);
+                            } finally {
+                              setDeletingToken("");
+                            }
+                          }}
+                        >
+                          {deletingToken === row.token ? "删除中..." : "删除"}
+                        </DeleteActionButton>
+                      )
+                    }
+                  ]}
+                />
+              </Card>
+            )
+          },
+          {
+            key: "syncStatus",
+            label: "定时任务",
+            children: (
+              <Space direction="vertical" size={16} style={{ width: "100%" }}>
+                <Card className="page-card" title="定时任务">
+                  <Space direction="vertical" size={16} style={{ width: "100%" }}>
+                    <SyncStatusCard
+                      title="同步员工用量"
+                      taskStatus={usageRefreshStatus}
+                      buttonLabel="立即同步"
+                      loading={usageRefreshing}
+                      onTrigger={async () => {
+                        setUsageRefreshing(true);
+                        try {
+                          await onUsageRefresh();
+                        } finally {
+                          setUsageRefreshing(false);
+                        }
+                      }}
+                      summaryFields={[
+                        { key: "refreshed_agents", label: "刷新数字员工" },
+                        { key: "captured_at", label: "采集时间" }
+                      ]}
+                    />
+                    <SyncStatusCard
+                      title="同步数字员工"
+                      taskStatus={agentSyncStatus}
+                      buttonLabel="立即同步"
+                      loading={agentSyncing}
+                      onTrigger={async () => {
+                        setAgentSyncing(true);
+                        try {
+                          await onAgentSync();
+                        } finally {
+                          setAgentSyncing(false);
+                        }
+                      }}
+                      summaryFields={[
+                        { key: "agents", label: "数字员工" }
+                      ]}
+                    />
+                    <SyncStatusCard
+                      title="同步技能"
+                      taskStatus={skillSyncStatus}
+                      buttonLabel="立即同步"
+                      loading={skillSyncing}
+                      onTrigger={async () => {
+                        setSkillSyncing(true);
+                        try {
+                          await onSkillSync();
+                        } finally {
+                          setSkillSyncing(false);
+                        }
+                      }}
+                      summaryFields={[
+                        { key: "skills", label: "技能" }
+                      ]}
+                    />
+                    <SyncStatusCard
+                      title="同步模板"
+                      taskStatus={templateSyncStatus}
+                      buttonLabel="立即同步"
+                      loading={templateSyncing}
+                      onTrigger={async () => {
+                        setTemplateSyncing(true);
+                        try {
+                          await onTemplateSync();
+                        } finally {
+                          setTemplateSyncing(false);
+                        }
+                      }}
+                      summaryFields={[
+                        { key: "templates", label: "模板" }
+                      ]}
+                    />
+                    <SyncStatusCard
+                      title="同步业务系统"
+                      taskStatus={systemSyncStatus}
+                      buttonLabel="立即同步"
+                      loading={systemSyncing}
+                      onTrigger={async () => {
+                        setSystemSyncing(true);
+                        try {
+                          await onSystemSync();
+                        } finally {
+                          setSystemSyncing(false);
+                        }
+                      }}
+                      summaryFields={[
+                        { key: "systems", label: "业务系统" }
+                      ]}
+                    />
+                  </Space>
+                </Card>
+              </Space>
+            )
+          },
+          {
+            key: "serverStatus",
+            label: "服务器状态",
+            children: (
+              <Card
+                className="page-card"
+                title="服务器状态"
+                extra={(
+                  <Space wrap>
+                    <Button
+                      onClick={async () => {
+                        setServerCommandLoading(true);
+                        try {
+                          const result = await onServerStatus();
+                          setServerOutput(stringifyResult(result));
+                        } finally {
+                          setServerCommandLoading(false);
+                        }
+                      }}
+                    >
+                      查询状态
+                    </Button>
+                    <Button
+                      onClick={async () => {
+                        setServerCommandLoading(true);
+                        try {
+                          const result = await onServerDiagnostics();
+                          setServerOutput(stringifyResult(result));
+                        } finally {
+                          setServerCommandLoading(false);
+                        }
+                      }}
+                    >
+                      执行诊断
+                    </Button>
+                    <Button
+                      danger
+                      onClick={() => {
+                        Modal.confirm({
+                          title: "确认重启服务吗？",
+                          content: "重启期间可能短时无法访问，请确认后继续。",
+                          okText: "确认重启",
+                          cancelText: "取消",
+                          okButtonProps: { danger: true },
+                          onOk: async () => {
+                            setServerCommandLoading(true);
+                            try {
+                              await onServerRestart();
+                            } finally {
+                              setServerCommandLoading(false);
+                            }
+                          }
+                        });
+                      }}
+                    >
+                      重启服务
+                    </Button>
+                  </Space>
+                )}
+              >
+                <div className="server-command-output">
+                  <Input.TextArea
+                    readOnly
+                    autoSize={{ minRows: 12 }}
+                    value={serverOutput}
+                    placeholder="执行结果会显示在这里"
+                    className="server-command-output-textarea"
+                  />
+                </div>
+              </Card>
+            )
+          }
+        ]}
+      />
+      <Modal open={serverCommandLoading} footer={null} closable={false} centered maskClosable={false}>
+        <div className="server-command-loading">
+          <Spin size="large" />
+          <Text>命令执行中，请稍候...</Text>
+        </div>
+      </Modal>
+    </>
+  );
+}