aios-management-web 0.1.0

package/server/test/usage-refresh-audit-route.test.js

@@ -0,0 +1,82 @@
+import express from "express";
+
+import { createRoutes } from "../src/api/routes/index.js";
+
+function listen(app) {
+  return new Promise((resolve) => {
+    const server = app.listen(0, "127.0.0.1", () => resolve(server));
+  });
+}
+
+function close(server) {
+  return new Promise((resolve, reject) => {
+    server.close((error) => {
+      if (error) {
+        reject(error);
+        return;
+      }
+      resolve();
+    });
+  });
+}
+
+it("writes audit logs when manually refreshing agent usage", async () => {
+  const auditWrites = [];
+  const app = express();
+  app.use(express.json());
+  app.use("/api", createRoutes({
+    authService: {
+      getLocalApiUser() {
+        return {
+          id: 1,
+          username: "aios",
+          role: "aios-admin"
+        };
+      },
+      assertAdmin() {}
+    },
+    auditLogService: {
+      write(entry) {
+        auditWrites.push(entry);
+      }
+    },
+    catalogSyncService: {
+      async refreshAgentUsage({ trigger }) {
+        return {
+          status: "success",
+          trigger_source: trigger,
+          summary: {
+            refreshed_agents: 1
+          }
+        };
+      }
+    },
+    portalService: {},
+    env: {}
+  }));
+
+  const server = await listen(app);
+  try {
+    const address = server.address();
+    const response = await fetch(`http://127.0.0.1:${address.port}/api/settings/usage-refresh`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: "{}"
+    });
+    const body = await response.json();
+
+    expect(response.status).toBe(200);
+    expect(body.status).toBe("success");
+    expect(body.trigger_source).toBe("manual");
+    expect(auditWrites).toEqual([{
+      userId: 1,
+      username: "aios",
+      action: "同步员工用量",
+      detail: "手动触发数字员工用量同步"
+    }]);
+  } finally {
+    await close(server);
+  }
+});

package/src/App.jsx

@@ -0,0 +1 @@
+export { default } from "./app/App.jsx";

package/src/api.js

@@ -0,0 +1 @@
+export { api, authTokenStore } from "./app/api-client.js";

package/src/app/App.jsx

@@ -0,0 +1,346 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import {
+  ApiOutlined,
+  DashboardOutlined,
+  FileTextOutlined,
+  LockOutlined,
+  RobotOutlined,
+  SettingOutlined,
+  TeamOutlined,
+  ToolOutlined
+} from "@ant-design/icons";
+import { ConfigProvider, Form, Input, Modal, message } from "antd";
+import zhCN from "antd/locale/zh_CN";
+
+import { api, authTokenStore } from "./api-client.js";
+import { AppShell } from "../components/AppShell.jsx";
+import { AgentsPage } from "../pages/AgentsPage.jsx";
+import { DashboardPage } from "../pages/DashboardPage.jsx";
+import { LoginPage } from "../pages/LoginPage.jsx";
+import { SettingsPage } from "../pages/SettingsPage.jsx";
+import { SkillsPage } from "../pages/SkillsPage.jsx";
+import { SystemLogsPage } from "../pages/SystemLogsPage.jsx";
+import { SystemsPage } from "../pages/SystemsPage.jsx";
+import { TemplatesPage } from "../pages/TemplatesPage.jsx";
+import { UserManagementPage } from "../pages/UserManagementPage.jsx";
+
+const menuItems = [
+  { key: "dashboard", label: "仪表盘", icon: <DashboardOutlined /> },
+  { key: "agents", label: "数字员工", icon: <RobotOutlined /> },
+  { key: "templates", label: "数字员工模板", icon: <FileTextOutlined /> },
+  { key: "skills", label: "全局技能", icon: <ToolOutlined /> },
+  { key: "systems", label: "业务系统", icon: <ApiOutlined /> },
+  { key: "systemLogs", label: "系统日志", icon: <FileTextOutlined /> },
+  { key: "userManagement", label: "用户管理", icon: <TeamOutlined /> },
+  { key: "settings", label: "系统设置", icon: <SettingOutlined /> }
+];
+
+function getPasswordPromptKey() {
+  const token = authTokenStore.get();
+  return token ? `aios-password-prompted:${token}` : "";
+}
+
+function hasPromptedPasswordChange() {
+  const key = getPasswordPromptKey();
+  return key ? sessionStorage.getItem(key) === "1" : false;
+}
+
+function markPasswordPrompted() {
+  const key = getPasswordPromptKey();
+  if (key) {
+    sessionStorage.setItem(key, "1");
+  }
+}
+
+function hasRunningSyncTask(boot) {
+  return [
+    boot?.agent_sync,
+    boot?.usage_refresh,
+    boot?.skill_sync,
+    boot?.template_sync,
+    boot?.system_sync
+  ].some((taskStatus) => taskStatus?.status === "running");
+}
+
+export default function App() {
+  const [boot, setBoot] = useState(null);
+  const [selectedKey, setSelectedKey] = useState("dashboard");
+  const [messageApi, contextHolder] = message.useMessage();
+  const [passwordOpen, setPasswordOpen] = useState(false);
+  const [passwordForm] = Form.useForm();
+  const messageApiRef = useRef(messageApi);
+
+  messageApiRef.current = messageApi;
+
+  useEffect(() => {
+    const notifyUnhandledError = (error, fallbackMessage) => {
+      const normalized = api.normalizeError(error, fallbackMessage);
+      const prefix = normalized.context ? `${normalized.context}: ` : "";
+      messageApiRef.current.error(`${prefix}${normalized.message || fallbackMessage}`);
+    };
+
+    const onWindowError = (event) => {
+      notifyUnhandledError(event.error || event.message, "页面发生异常");
+    };
+
+    const onUnhandledRejection = (event) => {
+      notifyUnhandledError(event.reason, "请求处理失败");
+    };
+
+    window.addEventListener("error", onWindowError);
+    window.addEventListener("unhandledrejection", onUnhandledRejection);
+
+    return () => {
+      window.removeEventListener("error", onWindowError);
+      window.removeEventListener("unhandledrejection", onUnhandledRejection);
+    };
+  }, []);
+
+  const loadBootstrap = async () => {
+    try {
+      const data = await api.get("/api/bootstrap");
+      setBoot(data);
+      if (data.current_user?.must_change_password && !hasPromptedPasswordChange()) {
+        markPasswordPrompted();
+        setPasswordOpen(true);
+      }
+    } catch {
+      authTokenStore.set("");
+      setBoot(null);
+    }
+  };
+
+  useEffect(() => {
+    if (authTokenStore.get()) {
+      void loadBootstrap();
+    }
+  }, []);
+
+  const currentUser = boot?.current_user;
+  const settings = boot?.settings;
+  const accessTokens = boot?.access_tokens || [];
+  const agentSync = boot?.agent_sync;
+  const skillSync = boot?.skill_sync;
+  const templateSync = boot?.template_sync;
+  const systemSync = boot?.system_sync;
+  const usageRefresh = boot?.usage_refresh;
+
+  useEffect(() => {
+    if (!currentUser || !hasRunningSyncTask(boot)) {
+      return undefined;
+    }
+
+    const timer = window.setInterval(async () => {
+      try {
+        const data = await api.get("/api/bootstrap");
+        setBoot(data);
+      } catch {
+        // 后台状态刷新失败时保留当前页面状态，下一轮继续尝试。
+      }
+    }, 3000);
+
+    return () => window.clearInterval(timer);
+  }, [boot, currentUser]);
+
+  const page = useMemo(() => {
+    switch (selectedKey) {
+      case "dashboard":
+        return <DashboardPage />;
+      case "userManagement":
+        return <UserManagementPage currentUser={currentUser} />;
+      case "templates":
+        return <TemplatesPage />;
+      case "skills":
+        return <SkillsPage />;
+      case "agents":
+        return <AgentsPage />;
+      case "systems":
+        return <SystemsPage />;
+      case "systemLogs":
+        return <SystemLogsPage />;
+      case "settings":
+        return (
+          <SettingsPage
+            settings={settings}
+            accessTokens={accessTokens}
+            agentSyncStatus={agentSync}
+            skillSyncStatus={skillSync}
+            templateSyncStatus={templateSync}
+            systemSyncStatus={systemSync}
+            usageRefreshStatus={usageRefresh}
+            onSave={async (values) => {
+              const next = await api.put("/api/settings", values);
+              setBoot((current) => ({ ...current, settings: next }));
+              messageApi.success("设置已保存");
+            }}
+            onCreateAccessToken={async () => {
+              const next = await api.post("/api/settings/access-tokens", {});
+              setBoot((current) => ({
+                ...current,
+                access_tokens: [next, ...(current?.access_tokens || [])]
+              }));
+              messageApi.success("访问令牌已生成");
+            }}
+            onDeleteAccessToken={async (token) => {
+              await api.delete(`/api/settings/access-tokens/${encodeURIComponent(token)}`);
+              setBoot((current) => ({
+                ...current,
+                access_tokens: (current?.access_tokens || []).filter((item) => item.token !== token)
+              }));
+              messageApi.success("访问令牌已删除");
+            }}
+            onUsageRefresh={async () => {
+              try {
+                const next = await api.post("/api/settings/usage-refresh", {});
+                setBoot((current) => ({ ...current, usage_refresh: next }));
+                if (next.status === "success") {
+                  messageApi.success("数字员工用量同步完成");
+                  return;
+                }
+                messageApi.error(next.error_message || "数字员工用量同步失败");
+              } catch (error) {
+                const normalized = api.normalizeError(error, "数字员工用量同步失败");
+                messageApi.error(normalized.message || "数字员工用量同步失败");
+              }
+            }}
+            onServerStatus={async () => {
+              try {
+                const next = await api.post("/api/settings/server-status", {});
+                return next?.result;
+              } catch (error) {
+                const normalized = api.normalizeError(error, "查询服务器状态失败");
+                messageApi.error(normalized.message || "查询服务器状态失败");
+                throw error;
+              }
+            }}
+            onAgentSync={async () => {
+              const next = await api.post("/api/settings/agent-sync", {});
+              setBoot((current) => ({ ...current, agent_sync: next }));
+              return next;
+            }}
+            onSkillSync={async () => {
+              const next = await api.post("/api/settings/skill-sync", {});
+              setBoot((current) => ({ ...current, skill_sync: next }));
+              return next;
+            }}
+            onTemplateSync={async () => {
+              const next = await api.post("/api/settings/template-sync", {});
+              setBoot((current) => ({ ...current, template_sync: next }));
+              return next;
+            }}
+            onSystemSync={async () => {
+              const next = await api.post("/api/settings/system-sync", {});
+              setBoot((current) => ({ ...current, system_sync: next }));
+              return next;
+            }}
+            onServerRestart={async () => {
+              try {
+                const next = await api.post("/api/settings/server-restart", {});
+                const output = typeof next?.result === "string"
+                  ? next.result
+                  : JSON.stringify(next?.result ?? {}, null, 2);
+                messageApi.success(output || "重启指令已发送");
+              } catch (error) {
+                const normalized = api.normalizeError(error, "重启服务失败");
+                messageApi.error(normalized.message || "重启服务失败");
+                throw error;
+              }
+            }}
+            onServerDiagnostics={async () => {
+              try {
+                const next = await api.post("/api/settings/server-diagnostics", {});
+                return next?.result;
+              } catch (error) {
+                const normalized = api.normalizeError(error, "服务器诊断失败");
+                messageApi.error(normalized.message || "服务器诊断失败");
+                throw error;
+              }
+            }}
+          />
+        );
+      default:
+        return null;
+    }
+  }, [accessTokens, agentSync, currentUser, messageApi, selectedKey, settings, skillSync, systemSync, templateSync, usageRefresh]);
+
+  if (!currentUser || !settings) {
+    return (
+      <>
+        {contextHolder}
+        <LoginPage
+          onLogin={async (values) => {
+            try {
+              const result = await api.post("/api/auth/login", values);
+              authTokenStore.set(result.token);
+              await loadBootstrap();
+            } catch (error) {
+              messageApi.error(error.message || "登录失败");
+            }
+          }}
+        />
+      </>
+    );
+  }
+
+  return (
+    <ConfigProvider
+      locale={zhCN}
+      theme={{
+        token: {
+          colorPrimary: settings.theme_color || "#07c160"
+        }
+      }}
+    >
+      {contextHolder}
+      <AppShell
+        settings={settings}
+        selectedKey={selectedKey}
+        menuItems={menuItems}
+        onSelect={setSelectedKey}
+        onLogout={async () => {
+          await api.post("/api/auth/logout", {});
+          authTokenStore.set("");
+          setBoot(null);
+        }}
+        onChangePassword={() => setPasswordOpen(true)}
+      >
+        {page}
+      </AppShell>
+      <Modal
+        open={passwordOpen}
+        title={<><LockOutlined /> 修改密码</>}
+        okText="确认"
+        cancelText="取消"
+        onCancel={() => setPasswordOpen(false)}
+        onOk={async () => {
+          const values = await passwordForm.validateFields();
+          await api.post("/api/auth/change-password", values);
+          messageApi.success("密码已更新");
+          setPasswordOpen(false);
+          passwordForm.resetFields();
+          await loadBootstrap();
+        }}
+      >
+        <Form form={passwordForm} layout="vertical">
+          <Form.Item
+            name="currentPassword"
+            label="当前密码"
+            rules={[{ required: true, message: "请输入当前密码" }]}
+          >
+            <Input.Password />
+          </Form.Item>
+          <Form.Item
+            name="nextPassword"
+            label="新密码"
+            rules={[
+              { required: true, message: "请输入新密码" },
+              { min: 8, message: "新密码长度至少 8 位" }
+            ]}
+          >
+            <Input.Password />
+          </Form.Item>
+        </Form>
+      </Modal>
+    </ConfigProvider>
+  );
+}

package/src/app/api-client.js

@@ -0,0 +1,112 @@
+const TOKEN_KEY = "aios-web-auth-token";
+
+export const authTokenStore = {
+  get() {
+    return localStorage.getItem(TOKEN_KEY) || "";
+  },
+  set(token) {
+    if (token) {
+      localStorage.setItem(TOKEN_KEY, token);
+      return;
+    }
+    localStorage.removeItem(TOKEN_KEY);
+  }
+};
+
+function normalizeError(error, fallbackMessage = "请求失败", context = "") {
+  if (error instanceof Error) {
+    if (context && !error.context) {
+      error.context = context;
+    }
+    return error;
+  }
+
+  const message = typeof error === "string" && error ? error : fallbackMessage;
+  const nextError = new Error(message);
+  if (context) {
+    nextError.context = context;
+  }
+  return nextError;
+}
+
+async function request(path, options = {}) {
+  const headers = new Headers(options.headers || {});
+  const token = authTokenStore.get();
+  const method = options.method || "GET";
+  const context = `${method} ${path}`;
+
+  if (token && !headers.has("Authorization")) {
+    headers.set("Authorization", `Bearer ${token}`);
+  }
+
+  const body = options.formData ? options.formData : options.body ? JSON.stringify(options.body) : undefined;
+  if (!options.formData && body !== undefined) {
+    headers.set("Content-Type", "application/json");
+  }
+
+  let response;
+  try {
+    response = await fetch(path, {
+      method,
+      headers,
+      body
+    });
+  } catch (error) {
+    throw normalizeError(error, "网络请求失败", context);
+  }
+
+  if (response.status === 204) {
+    return null;
+  }
+
+  let payload = null;
+  try {
+    payload = await response.json();
+  } catch {
+    payload = null;
+  }
+
+  if (!response.ok) {
+    throw normalizeError(
+      payload?.message || payload?.code || `请求失败 (${response.status})`,
+      "请求失败",
+      context
+    );
+  }
+
+  return payload;
+}
+
+export const api = {
+  get: (path) => request(path),
+  post: (path, body) => request(path, { method: "POST", body }),
+  put: (path, body) => request(path, { method: "PUT", body }),
+  delete: (path) => request(path, { method: "DELETE" }),
+  multipart: (path, formData, method = "POST") => request(path, { method, formData }),
+  download: async (path) => {
+    const headers = new Headers();
+    const token = authTokenStore.get();
+    const context = `GET ${path}`;
+    if (token) {
+      headers.set("Authorization", `Bearer ${token}`);
+    }
+
+    let response;
+    try {
+      response = await fetch(path, { headers });
+    } catch (error) {
+      throw normalizeError(error, "下载失败", context);
+    }
+    if (!response.ok) {
+      let message = "请求失败";
+      try {
+        const payload = await response.json();
+        message = payload.message || payload.code || message;
+      } catch {}
+      throw normalizeError(message, "下载失败", context);
+    }
+
+    return await response.blob();
+  },
+  normalizeError
+};

package/src/components/AppShell.jsx

@@ -0,0 +1,117 @@
+import React from "react";
+import { Button, Layout, List, Space, Typography } from "antd";
+
+const { Header, Sider, Content } = Layout;
+const { Text } = Typography;
+
+function normalizeHexColor(color, fallback = "#07c160") {
+  if (typeof color !== "string") {
+    return fallback;
+  }
+
+  const value = color.trim();
+  if (/^#[0-9a-fA-F]{6}$/.test(value)) {
+    return value.toLowerCase();
+  }
+
+  if (/^#[0-9a-fA-F]{3}$/.test(value)) {
+    return `#${value[1]}${value[1]}${value[2]}${value[2]}${value[3]}${value[3]}`.toLowerCase();
+  }
+
+  return fallback;
+}
+
+function hexToRgb(color) {
+  const normalized = normalizeHexColor(color);
+  return {
+    r: Number.parseInt(normalized.slice(1, 3), 16),
+    g: Number.parseInt(normalized.slice(3, 5), 16),
+    b: Number.parseInt(normalized.slice(5, 7), 16)
+  };
+}
+
+function rgbToHex({ r, g, b }) {
+  const clamp = (value) => Math.max(0, Math.min(255, Math.round(value)));
+  return `#${[clamp(r), clamp(g), clamp(b)].map((value) => value.toString(16).padStart(2, "0")).join("")}`;
+}
+
+function mixColors(colorA, colorB, ratio) {
+  const start = hexToRgb(colorA);
+  const end = hexToRgb(colorB);
+  const weight = Math.max(0, Math.min(1, ratio));
+
+  return rgbToHex({
+    r: start.r + (end.r - start.r) * weight,
+    g: start.g + (end.g - start.g) * weight,
+    b: start.b + (end.b - start.b) * weight
+  });
+}
+
+export function AppShell({
+  settings,
+  selectedKey,
+  menuItems,
+  onSelect,
+  onLogout,
+  onChangePassword,
+  children
+}) {
+  const themeColor = normalizeHexColor(settings.theme_color);
+  const siderStart = mixColors(themeColor, "#08110d", 0.8);
+  const siderEnd = mixColors(themeColor, "#050a07", 0.9);
+  const siderPanel = mixColors(themeColor, "#0c1711", 0.74);
+  const siderActive = mixColors(themeColor, "#ffffff", 0.22);
+  const siderActiveBorder = mixColors(themeColor, "#ffffff", 0.38);
+
+  return (
+    <Layout className="app-shell">
+      <Sider
+        theme="dark"
+        width={250}
+        style={{
+          background: `linear-gradient(180deg, ${siderStart} 0%, ${siderEnd} 100%)`,
+          "--portal-sider-panel": siderPanel
+        }}
+        className="portal-sider"
+      >
+        <div className="brand-block">
+          <div className="brand-title">{settings.portal_name}</div>
+          <Text className="brand-subtitle">{settings.brand_subtitle}</Text>
+        </div>
+        <div className="portal-sider-menu">
+          <List
+            dataSource={menuItems}
+            renderItem={(item) => (
+              <List.Item
+                onClick={() => onSelect(item.key)}
+                style={{
+                  cursor: "pointer",
+                  padding: "12px 18px",
+                  margin: "0 10px 8px",
+                  borderRadius: 6,
+                  color: "#fff",
+                  background: selectedKey === item.key ? siderActive : "transparent",
+                  border: selectedKey === item.key ? `1px solid ${siderActiveBorder}` : "1px solid transparent"
+                }}
+              >
+                <Space style={{ color: "#fff" }}>
+                  {item.icon}
+                  {item.label}
+                </Space>
+              </List.Item>
+            )}
+          />
+        </div>
+      </Sider>
+      <Layout>
+        <Header className="portal-header">
+          <Space className="portal-header-actions" size={12} wrap>
+            <Button onClick={onChangePassword}>修改密码</Button>
+            <Button onClick={onLogout}>退出登录</Button>
+          </Space>
+        </Header>
+        <Content className="portal-content">{children}</Content>
+      </Layout>
+    </Layout>
+  );
+}

package/src/components/CardTitleWithReload.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { ReloadOutlined } from "@ant-design/icons";
+import { Space } from "antd";
+
+export function CardTitleWithReload({ title, loading = false, onReload }) {
+  return (
+    <Space size={8}>
+      <span>{title}</span>
+      <ReloadOutlined
+        spin={loading}
+        onClick={() => {
+          if (!loading) {
+            void onReload?.();
+          }
+        }}
+        style={{ cursor: loading ? "default" : "pointer", color: "rgba(0, 0, 0, 0.45)" }}
+      />
+    </Space>
+  );
+}