weifuwu 0.33.2 → 0.33.3

package/dist/client/app.d.ts

@@ -2,10 +2,13 @@
  * weifuwu/client 应用 — 创建 ctx + 中间件链 + 挂载组件
  *
  * ```tsx
- * import { createApp, router } from 'weifuwu/client'
+ * import { createApp, api, auth, ws, router } from 'weifuwu/client'
  *
  * const app = createApp()
- * app.use(router({ routes: [...] }))
+ * app.use(api())
+ * app.use(auth())
+ * app.use(ws())
+ * app.use(router({ routes }))
  * app.mount('#root', AppShell)
  * ```
  */
@@ -17,5 +20,5 @@ import type { Component } from './jsx-runtime.ts';
 export declare function createApp(): {
     ctx: WfuiContext;
     use: (mw: AppMiddleware) => any;
-    mount: (rootSelector: string, RootComponent: Component) => void;
+    mount: (rootSelector: string, RootComponent: Component) => Promise<void>;
 };

package/dist/client/components/Chat.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Chat — 消息聊天组件
+ *
+ * 与 weifuwu 后端 messager + agent 模块对接。
+ *
+ * ```ts
+ * import { Chat } from 'weifuwu/client'
+ *
+ * function ChatPage(_, ctx) {
+ *   return Chat({ conversationId: '123' }, ctx)
+ * }
+ * ```
+ */
+import type { WfuiContext } from '../types.ts';
+export declare function Chat({ conversationId }: {
+    conversationId: string;
+}, ctx: WfuiContext): Node;

package/dist/client/components/LoginForm.d.ts

@@ -0,0 +1,14 @@
+/**
+ * LoginForm — 登录/注册组件
+ *
+ * ```ts
+ * import { LoginForm } from 'weifuwu/client'
+ *
+ * function LoginPage(_, ctx) {
+ *   if (ctx.isAuthenticated) return ctx.app.navigate('/')
+ *   return LoginForm({}, ctx)
+ * }
+ * ```
+ */
+import type { WfuiContext } from '../types.ts';
+export declare function LoginForm(_props: {}, ctx: WfuiContext): Node;

package/dist/client/index.d.ts

@@ -2,13 +2,14 @@
  * weifuwu/client — 响应式前端框架，TSX + Signal
  *
  * ```tsx
- * import { signal, computed, Show, For, createApp, router, RouteView } from 'weifuwu/client'
+ * import { signal, createdApp, api, auth, ws, router, RouteView, Show, For } from 'weifuwu/client'
  * import type { WfuiContext } from 'weifuwu/client'
  *
  * const app = createApp()
- * app.use(router({ routes: [
- *   { path: '/', component: HomePage },
- * ]}))
+ * app.use(api())
+ * app.use(auth())
+ * app.use(ws())
+ * app.use(router({ routes }))
  * app.mount('#root', AppShell)
  * ```
  */
@@ -19,3 +20,9 @@ export type { Component } from './jsx-runtime.ts';
 export type { WfuiContext, AppMiddleware, RouteDef } from './types.ts';
 export { createApp } from './app.ts';
 export { router, RouteView } from './router.ts';
+export { api, ApiClient, ApiError } from './middleware/api.ts';
+export { auth } from './middleware/auth.ts';
+export type { UserRecord } from './middleware/auth.ts';
+export { ws } from './middleware/ws.ts';
+export { LoginForm } from './components/LoginForm.ts';
+export { Chat } from './components/Chat.ts';

package/dist/client/index.js

@@ -189,6 +189,17 @@ function createApp() {
         window.dispatchEvent(new CustomEvent("wefu:navigate", { detail: { path } }));
       }
     },
+    user: null,
+    token: null,
+    isAuthenticated: false,
+    login: async () => {
+    },
+    logout: () => {
+    },
+    register: async () => {
+    },
+    api: null,
+    ws: null,
     provide(key, value) {
       provides.set(key, value);
     },
@@ -204,9 +215,9 @@ function createApp() {
       middlewares.push(mw);
       return this;
     },
-    mount(rootSelector, RootComponent) {
+    async mount(rootSelector, RootComponent) {
       for (const mw of middlewares) {
-        ctx = mw(ctx);
+        ctx = await mw(ctx);
       }
       setCtx(ctx);
       const app = jsx(RootComponent, {});
@@ -302,11 +313,373 @@ function RouteView(_props, ctx) {
   window.addEventListener("wefu:route", render);
   return el;
 }
+
+// src/client/middleware/api.ts
+var _getToken = () => null;
+function setTokenGetter(fn) {
+  _getToken = fn;
+}
+function getToken() {
+  return _getToken();
+}
+var ApiError = class extends Error {
+  status;
+  constructor(status, message) {
+    super(`[${status}] ${message}`);
+    this.name = "ApiError";
+    this.status = status;
+  }
+};
+var ApiClient = class {
+  #baseUrl;
+  constructor(baseUrl = "/api") {
+    this.#baseUrl = baseUrl;
+  }
+  async request(method, path, body) {
+    const headers = {};
+    const token = getToken();
+    if (token) headers["Authorization"] = `Bearer ${token}`;
+    if (body != null) headers["Content-Type"] = "application/json";
+    const res = await fetch(`${this.#baseUrl}${path}`, {
+      method,
+      headers,
+      body: body != null ? JSON.stringify(body) : void 0
+    });
+    if (!res.ok) {
+      throw new ApiError(res.status, await res.text().catch(() => res.statusText));
+    }
+    if (res.status === 204) return void 0;
+    return res.json();
+  }
+  get(path) {
+    return this.request("GET", path);
+  }
+  post(path, body) {
+    return this.request("POST", path, body);
+  }
+  put(path, body) {
+    return this.request("PUT", path, body);
+  }
+  patch(path, body) {
+    return this.request("PATCH", path, body);
+  }
+  delete(path) {
+    return this.request("DELETE", path);
+  }
+};
+function api(opts = {}) {
+  return (ctx) => {
+    ctx.api = new ApiClient(opts.baseUrl ?? "/api");
+    return ctx;
+  };
+}
+
+// src/client/middleware/auth.ts
+function auth(opts = {}) {
+  const storageKey = opts.storageKey ?? "wefu:auth";
+  const loginPath = opts.loginPath ?? "/api/login";
+  const registerPath = opts.registerPath ?? "/api/register";
+  const mePath = opts.mePath ?? "/api/me";
+  return async (ctx) => {
+    const userSignal = signal(null);
+    const tokenSignal = signal(null);
+    setTokenGetter(() => tokenSignal.value);
+    function persist(user, token) {
+      userSignal.value = user;
+      tokenSignal.value = token;
+      if (token && user) {
+        localStorage.setItem(storageKey, JSON.stringify({ user, token }));
+      } else {
+        localStorage.removeItem(storageKey);
+      }
+    }
+    try {
+      const saved = localStorage.getItem(storageKey);
+      if (saved) {
+        const { user, token } = JSON.parse(saved);
+        userSignal.value = user;
+        tokenSignal.value = token;
+        setTokenGetter(() => token);
+      }
+    } catch {
+    }
+    if (tokenSignal.value) {
+      try {
+        const api2 = new ApiClient();
+        const user = await api2.get(mePath);
+        persist(user, tokenSignal.value);
+      } catch {
+        persist(null, null);
+      }
+    }
+    return {
+      ...ctx,
+      get user() {
+        return userSignal.value;
+      },
+      get token() {
+        return tokenSignal.value;
+      },
+      get isAuthenticated() {
+        return !!tokenSignal.value && !!userSignal.value;
+      },
+      async login(email, password) {
+        const api2 = new ApiClient();
+        const res = await api2.post(loginPath, { email, password });
+        persist(res.user, res.token);
+      },
+      logout() {
+        persist(null, null);
+      },
+      async register(input) {
+        const api2 = new ApiClient();
+        const res = await api2.post(registerPath, input);
+        persist(res.user, res.token);
+      }
+    };
+  };
+}
+
+// src/client/middleware/ws.ts
+function ws(opts = {}) {
+  const wsUrl = opts.url ?? "/ws";
+  const reconnectInterval = opts.reconnectInterval ?? 3e3;
+  const maxReconnect = opts.maxReconnect ?? 10;
+  return (ctx) => {
+    const isConnected = signal(false);
+    const messageHandlers = /* @__PURE__ */ new Set();
+    let socket = null;
+    let reconnectCount = 0;
+    let reconnectTimer = null;
+    function connect() {
+      if (socket?.readyState === WebSocket.OPEN || socket?.readyState === WebSocket.CONNECTING) return;
+      const token = getToken();
+      const url = token ? `${wsUrl}?token=${token}` : wsUrl;
+      try {
+        socket = new WebSocket(url);
+      } catch {
+        scheduleReconnect();
+        return;
+      }
+      socket.onopen = () => {
+        isConnected.value = true;
+        reconnectCount = 0;
+      };
+      socket.onmessage = (event) => {
+        try {
+          const data = JSON.parse(event.data);
+          for (const h3 of messageHandlers) h3(data);
+        } catch {
+          for (const h3 of messageHandlers) h3(event.data);
+        }
+      };
+      socket.onclose = () => {
+        isConnected.value = false;
+        socket = null;
+        scheduleReconnect();
+      };
+      socket.onerror = () => {
+        socket?.close();
+      };
+    }
+    function scheduleReconnect() {
+      if (reconnectCount >= maxReconnect) return;
+      reconnectCount++;
+      reconnectTimer = setTimeout(connect, reconnectInterval * reconnectCount);
+    }
+    function send(data) {
+      if (socket?.readyState === WebSocket.OPEN) {
+        socket.send(typeof data === "string" ? data : JSON.stringify(data));
+      }
+    }
+    function join(room) {
+      send({ type: "join", room });
+    }
+    function leave(room) {
+      send({ type: "leave", room });
+    }
+    connect();
+    return {
+      ...ctx,
+      ws: {
+        send,
+        onMessage: (handler) => {
+          messageHandlers.add(handler);
+          return () => messageHandlers.delete(handler);
+        },
+        join,
+        leave,
+        get isConnected() {
+          return isConnected;
+        }
+      }
+    };
+  };
+}
+
+// src/client/components/LoginForm.ts
+var h = (tag, props, ...children) => jsx(tag, props ?? {}, ...children);
+function LoginForm(_props, ctx) {
+  const mode = signal("login");
+  const email = signal("");
+  const name = signal("");
+  const password = signal("");
+  const error = signal(null);
+  const loading = signal(false);
+  const isRegister = computed(() => mode.value === "register");
+  const hasError = computed(() => error.value != null);
+  const submit = async () => {
+    error.value = null;
+    loading.value = true;
+    try {
+      if (mode.value === "login") {
+        await ctx.login(email.value, password.value);
+      } else {
+        await ctx.register({ email: email.value, name: name.value, password: password.value });
+      }
+    } catch (e) {
+      error.value = e.message ?? "\u64CD\u4F5C\u5931\u8D25";
+    } finally {
+      loading.value = false;
+    }
+  };
+  return h(
+    "div",
+    { class: "wefu-login" },
+    h(
+      "div",
+      { class: "wefu-login-card" },
+      h("h2", null, mode.value === "login" ? "\u767B\u5F55" : "\u6CE8\u518C"),
+      h(
+        "div",
+        { class: "wefu-login-tabs" },
+        h("button", { class: mode.value === "login" ? "active" : "", onClick: () => mode.value = "login" }, "\u767B\u5F55"),
+        h("button", { class: mode.value === "register" ? "active" : "", onClick: () => mode.value = "register" }, "\u6CE8\u518C")
+      ),
+      h(
+        "form",
+        { onSubmit: (e) => {
+          e.preventDefault();
+          submit();
+        } },
+        Show({
+          when: isRegister,
+          children: h(
+            "div",
+            { class: "wefu-field" },
+            h("label", null, "\u6635\u79F0"),
+            h("input", { value: name, onInput: (e) => name.value = e.target.value, placeholder: "\u4F60\u7684\u6635\u79F0" })
+          )
+        }),
+        h(
+          "div",
+          { class: "wefu-field" },
+          h("label", null, "\u90AE\u7BB1"),
+          h("input", { type: "email", value: email, onInput: (e) => email.value = e.target.value, placeholder: "\u90AE\u7BB1" })
+        ),
+        h(
+          "div",
+          { class: "wefu-field" },
+          h("label", null, "\u5BC6\u7801"),
+          h("input", { type: "password", value: password, onInput: (e) => password.value = e.target.value, placeholder: "\u5BC6\u7801" })
+        ),
+        Show({
+          when: hasError,
+          children: h("div", { class: "wefu-error" }, error)
+        }),
+        h(
+          "button",
+          { type: "submit", class: "wefu-btn wefu-btn-primary", disabled: loading },
+          loading ? "\u5904\u7406\u4E2D..." : mode.value === "login" ? "\u767B\u5F55" : "\u6CE8\u518C"
+        )
+      )
+    )
+  );
+}
+
+// src/client/components/Chat.ts
+var h2 = (tag, props, ...children) => jsx(tag, props ?? {}, ...children);
+function Chat({ conversationId }, ctx) {
+  const messages = signal([]);
+  const input = signal("");
+  const loading = signal(true);
+  const isEmpty = signal(false);
+  ctx.api.get(`/api/conversations/${conversationId}/messages`).then((msgs) => {
+    messages.value = Array.isArray(msgs) ? msgs.reverse() : [];
+    loading.value = false;
+    isEmpty.value = messages.value.length === 0;
+  }).catch(() => {
+    loading.value = false;
+    isEmpty.value = true;
+  });
+  const unsub = ctx.ws.onMessage((data) => {
+    if (data.conversation_id === conversationId) {
+      messages.value = [...messages.value, data];
+      isEmpty.value = false;
+    }
+  });
+  const send = () => {
+    const text = input.value.trim();
+    if (!text) return;
+    input.value = "";
+    ctx.api.post("/api/messages", { conversationId, body: text }).catch(() => {
+    });
+  };
+  return h2(
+    "div",
+    { class: "wefu-chat" },
+    // 消息列表
+    h2(
+      "div",
+      { class: "wefu-chat-messages" },
+      Show({ when: loading, children: h2("div", { class: "wefu-chat-loading" }, "\u52A0\u8F7D\u4E2D...") }),
+      Show({ when: isEmpty, children: h2("div", { class: "wefu-chat-empty" }, "\u6682\u65E0\u6D88\u606F") }),
+      h2(
+        "div",
+        { class: "wefu-chat-list" },
+        For({
+          each: messages.value,
+          children: (msg) => h2(
+            "div",
+            { class: `wefu-chat-msg ${msg.sender_id === ctx.user?.id ? "mine" : ""}` },
+            h2(
+              "div",
+              { class: "wefu-chat-msg-header" },
+              h2("span", { class: "wefu-chat-msg-sender" }, msg.sender_name ?? ""),
+              h2("span", { class: "wefu-chat-msg-time" }, new Date(msg.created_at).toLocaleTimeString())
+            ),
+            h2("div", { class: "wefu-chat-msg-body" }, msg.body)
+          )
+        })
+      )
+    ),
+    // 输入区
+    h2(
+      "div",
+      { class: "wefu-chat-input" },
+      h2("input", {
+        value: input,
+        onInput: (e) => input.value = e.target.value,
+        onKeyDown: (e) => {
+          if (e.key === "Enter") send();
+        },
+        placeholder: "\u8F93\u5165\u6D88\u606F..."
+      }),
+      h2("button", { class: "wefu-btn", onClick: send }, "\u53D1\u9001")
+    )
+  );
+}
 export {
+  ApiClient,
+  ApiError,
+  Chat,
   For,
   Fragment,
+  LoginForm,
   RouteView,
   Show,
+  api,
+  auth,
   computed,
   createApp,
   domMount,
@@ -316,5 +689,6 @@ export {
   jsxDEV,
   jsxs,
   router,
-  signal
+  signal,
+  ws
 };

package/dist/client/jsx-runtime.js

@@ -189,6 +189,17 @@ function createApp() {
         window.dispatchEvent(new CustomEvent("wefu:navigate", { detail: { path } }));
       }
     },
+    user: null,
+    token: null,
+    isAuthenticated: false,
+    login: async () => {
+    },
+    logout: () => {
+    },
+    register: async () => {
+    },
+    api: null,
+    ws: null,
     provide(key, value) {
       provides.set(key, value);
     },
@@ -204,9 +215,9 @@ function createApp() {
       middlewares.push(mw);
       return this;
     },
-    mount(rootSelector, RootComponent) {
+    async mount(rootSelector, RootComponent) {
       for (const mw of middlewares) {
-        ctx = mw(ctx);
+        ctx = await mw(ctx);
       }
       setCtx(ctx);
       const app = jsx(RootComponent, {});
@@ -302,11 +313,373 @@ function RouteView(_props, ctx) {
   window.addEventListener("wefu:route", render);
   return el;
 }
+
+// src/client/middleware/api.ts
+var _getToken = () => null;
+function setTokenGetter(fn) {
+  _getToken = fn;
+}
+function getToken() {
+  return _getToken();
+}
+var ApiError = class extends Error {
+  status;
+  constructor(status, message) {
+    super(`[${status}] ${message}`);
+    this.name = "ApiError";
+    this.status = status;
+  }
+};
+var ApiClient = class {
+  #baseUrl;
+  constructor(baseUrl = "/api") {
+    this.#baseUrl = baseUrl;
+  }
+  async request(method, path, body) {
+    const headers = {};
+    const token = getToken();
+    if (token) headers["Authorization"] = `Bearer ${token}`;
+    if (body != null) headers["Content-Type"] = "application/json";
+    const res = await fetch(`${this.#baseUrl}${path}`, {
+      method,
+      headers,
+      body: body != null ? JSON.stringify(body) : void 0
+    });
+    if (!res.ok) {
+      throw new ApiError(res.status, await res.text().catch(() => res.statusText));
+    }
+    if (res.status === 204) return void 0;
+    return res.json();
+  }
+  get(path) {
+    return this.request("GET", path);
+  }
+  post(path, body) {
+    return this.request("POST", path, body);
+  }
+  put(path, body) {
+    return this.request("PUT", path, body);
+  }
+  patch(path, body) {
+    return this.request("PATCH", path, body);
+  }
+  delete(path) {
+    return this.request("DELETE", path);
+  }
+};
+function api(opts = {}) {
+  return (ctx) => {
+    ctx.api = new ApiClient(opts.baseUrl ?? "/api");
+    return ctx;
+  };
+}
+
+// src/client/middleware/auth.ts
+function auth(opts = {}) {
+  const storageKey = opts.storageKey ?? "wefu:auth";
+  const loginPath = opts.loginPath ?? "/api/login";
+  const registerPath = opts.registerPath ?? "/api/register";
+  const mePath = opts.mePath ?? "/api/me";
+  return async (ctx) => {
+    const userSignal = signal(null);
+    const tokenSignal = signal(null);
+    setTokenGetter(() => tokenSignal.value);
+    function persist(user, token) {
+      userSignal.value = user;
+      tokenSignal.value = token;
+      if (token && user) {
+        localStorage.setItem(storageKey, JSON.stringify({ user, token }));
+      } else {
+        localStorage.removeItem(storageKey);
+      }
+    }
+    try {
+      const saved = localStorage.getItem(storageKey);
+      if (saved) {
+        const { user, token } = JSON.parse(saved);
+        userSignal.value = user;
+        tokenSignal.value = token;
+        setTokenGetter(() => token);
+      }
+    } catch {
+    }
+    if (tokenSignal.value) {
+      try {
+        const api2 = new ApiClient();
+        const user = await api2.get(mePath);
+        persist(user, tokenSignal.value);
+      } catch {
+        persist(null, null);
+      }
+    }
+    return {
+      ...ctx,
+      get user() {
+        return userSignal.value;
+      },
+      get token() {
+        return tokenSignal.value;
+      },
+      get isAuthenticated() {
+        return !!tokenSignal.value && !!userSignal.value;
+      },
+      async login(email, password) {
+        const api2 = new ApiClient();
+        const res = await api2.post(loginPath, { email, password });
+        persist(res.user, res.token);
+      },
+      logout() {
+        persist(null, null);
+      },
+      async register(input) {
+        const api2 = new ApiClient();
+        const res = await api2.post(registerPath, input);
+        persist(res.user, res.token);
+      }
+    };
+  };
+}
+
+// src/client/middleware/ws.ts
+function ws(opts = {}) {
+  const wsUrl = opts.url ?? "/ws";
+  const reconnectInterval = opts.reconnectInterval ?? 3e3;
+  const maxReconnect = opts.maxReconnect ?? 10;
+  return (ctx) => {
+    const isConnected = signal(false);
+    const messageHandlers = /* @__PURE__ */ new Set();
+    let socket = null;
+    let reconnectCount = 0;
+    let reconnectTimer = null;
+    function connect() {
+      if (socket?.readyState === WebSocket.OPEN || socket?.readyState === WebSocket.CONNECTING) return;
+      const token = getToken();
+      const url = token ? `${wsUrl}?token=${token}` : wsUrl;
+      try {
+        socket = new WebSocket(url);
+      } catch {
+        scheduleReconnect();
+        return;
+      }
+      socket.onopen = () => {
+        isConnected.value = true;
+        reconnectCount = 0;
+      };
+      socket.onmessage = (event) => {
+        try {
+          const data = JSON.parse(event.data);
+          for (const h3 of messageHandlers) h3(data);
+        } catch {
+          for (const h3 of messageHandlers) h3(event.data);
+        }
+      };
+      socket.onclose = () => {
+        isConnected.value = false;
+        socket = null;
+        scheduleReconnect();
+      };
+      socket.onerror = () => {
+        socket?.close();
+      };
+    }
+    function scheduleReconnect() {
+      if (reconnectCount >= maxReconnect) return;
+      reconnectCount++;
+      reconnectTimer = setTimeout(connect, reconnectInterval * reconnectCount);
+    }
+    function send(data) {
+      if (socket?.readyState === WebSocket.OPEN) {
+        socket.send(typeof data === "string" ? data : JSON.stringify(data));
+      }
+    }
+    function join(room) {
+      send({ type: "join", room });
+    }
+    function leave(room) {
+      send({ type: "leave", room });
+    }
+    connect();
+    return {
+      ...ctx,
+      ws: {
+        send,
+        onMessage: (handler) => {
+          messageHandlers.add(handler);
+          return () => messageHandlers.delete(handler);
+        },
+        join,
+        leave,
+        get isConnected() {
+          return isConnected;
+        }
+      }
+    };
+  };
+}
+
+// src/client/components/LoginForm.ts
+var h = (tag, props, ...children) => jsx(tag, props ?? {}, ...children);
+function LoginForm(_props, ctx) {
+  const mode = signal("login");
+  const email = signal("");
+  const name = signal("");
+  const password = signal("");
+  const error = signal(null);
+  const loading = signal(false);
+  const isRegister = computed(() => mode.value === "register");
+  const hasError = computed(() => error.value != null);
+  const submit = async () => {
+    error.value = null;
+    loading.value = true;
+    try {
+      if (mode.value === "login") {
+        await ctx.login(email.value, password.value);
+      } else {
+        await ctx.register({ email: email.value, name: name.value, password: password.value });
+      }
+    } catch (e) {
+      error.value = e.message ?? "\u64CD\u4F5C\u5931\u8D25";
+    } finally {
+      loading.value = false;
+    }
+  };
+  return h(
+    "div",
+    { class: "wefu-login" },
+    h(
+      "div",
+      { class: "wefu-login-card" },
+      h("h2", null, mode.value === "login" ? "\u767B\u5F55" : "\u6CE8\u518C"),
+      h(
+        "div",
+        { class: "wefu-login-tabs" },
+        h("button", { class: mode.value === "login" ? "active" : "", onClick: () => mode.value = "login" }, "\u767B\u5F55"),
+        h("button", { class: mode.value === "register" ? "active" : "", onClick: () => mode.value = "register" }, "\u6CE8\u518C")
+      ),
+      h(
+        "form",
+        { onSubmit: (e) => {
+          e.preventDefault();
+          submit();
+        } },
+        Show({
+          when: isRegister,
+          children: h(
+            "div",
+            { class: "wefu-field" },
+            h("label", null, "\u6635\u79F0"),
+            h("input", { value: name, onInput: (e) => name.value = e.target.value, placeholder: "\u4F60\u7684\u6635\u79F0" })
+          )
+        }),
+        h(
+          "div",
+          { class: "wefu-field" },
+          h("label", null, "\u90AE\u7BB1"),
+          h("input", { type: "email", value: email, onInput: (e) => email.value = e.target.value, placeholder: "\u90AE\u7BB1" })
+        ),
+        h(
+          "div",
+          { class: "wefu-field" },
+          h("label", null, "\u5BC6\u7801"),
+          h("input", { type: "password", value: password, onInput: (e) => password.value = e.target.value, placeholder: "\u5BC6\u7801" })
+        ),
+        Show({
+          when: hasError,
+          children: h("div", { class: "wefu-error" }, error)
+        }),
+        h(
+          "button",
+          { type: "submit", class: "wefu-btn wefu-btn-primary", disabled: loading },
+          loading ? "\u5904\u7406\u4E2D..." : mode.value === "login" ? "\u767B\u5F55" : "\u6CE8\u518C"
+        )
+      )
+    )
+  );
+}
+
+// src/client/components/Chat.ts
+var h2 = (tag, props, ...children) => jsx(tag, props ?? {}, ...children);
+function Chat({ conversationId }, ctx) {
+  const messages = signal([]);
+  const input = signal("");
+  const loading = signal(true);
+  const isEmpty = signal(false);
+  ctx.api.get(`/api/conversations/${conversationId}/messages`).then((msgs) => {
+    messages.value = Array.isArray(msgs) ? msgs.reverse() : [];
+    loading.value = false;
+    isEmpty.value = messages.value.length === 0;
+  }).catch(() => {
+    loading.value = false;
+    isEmpty.value = true;
+  });
+  const unsub = ctx.ws.onMessage((data) => {
+    if (data.conversation_id === conversationId) {
+      messages.value = [...messages.value, data];
+      isEmpty.value = false;
+    }
+  });
+  const send = () => {
+    const text = input.value.trim();
+    if (!text) return;
+    input.value = "";
+    ctx.api.post("/api/messages", { conversationId, body: text }).catch(() => {
+    });
+  };
+  return h2(
+    "div",
+    { class: "wefu-chat" },
+    // 消息列表
+    h2(
+      "div",
+      { class: "wefu-chat-messages" },
+      Show({ when: loading, children: h2("div", { class: "wefu-chat-loading" }, "\u52A0\u8F7D\u4E2D...") }),
+      Show({ when: isEmpty, children: h2("div", { class: "wefu-chat-empty" }, "\u6682\u65E0\u6D88\u606F") }),
+      h2(
+        "div",
+        { class: "wefu-chat-list" },
+        For({
+          each: messages.value,
+          children: (msg) => h2(
+            "div",
+            { class: `wefu-chat-msg ${msg.sender_id === ctx.user?.id ? "mine" : ""}` },
+            h2(
+              "div",
+              { class: "wefu-chat-msg-header" },
+              h2("span", { class: "wefu-chat-msg-sender" }, msg.sender_name ?? ""),
+              h2("span", { class: "wefu-chat-msg-time" }, new Date(msg.created_at).toLocaleTimeString())
+            ),
+            h2("div", { class: "wefu-chat-msg-body" }, msg.body)
+          )
+        })
+      )
+    ),
+    // 输入区
+    h2(
+      "div",
+      { class: "wefu-chat-input" },
+      h2("input", {
+        value: input,
+        onInput: (e) => input.value = e.target.value,
+        onKeyDown: (e) => {
+          if (e.key === "Enter") send();
+        },
+        placeholder: "\u8F93\u5165\u6D88\u606F..."
+      }),
+      h2("button", { class: "wefu-btn", onClick: send }, "\u53D1\u9001")
+    )
+  );
+}
 export {
+  ApiClient,
+  ApiError,
+  Chat,
   For,
   Fragment,
+  LoginForm,
   RouteView,
   Show,
+  api,
+  auth,
   computed,
   createApp,
   domMount,
@@ -316,5 +689,6 @@ export {
   jsxDEV,
   jsxs,
   router,
-  signal
+  signal,
+  ws
 };

package/dist/client/middleware/api.d.ts

@@ -0,0 +1,32 @@
+/**
+ * api middleware — 注入 ctx.api
+ *
+ * ```tsx
+ * app.use(api({ baseUrl: '/api' }))
+ * app.use(auth({ api: ctx.api }))
+ *
+ * // In component:
+ * const users = await ctx.api.get('/api/users')
+ * const msg = await ctx.api.post('/api/messages', { body: 'hello' })
+ * ```
+ */
+import type { AppMiddleware } from '../types.ts';
+export declare function setTokenGetter(fn: () => string | null): void;
+export declare function getToken(): string | null;
+export declare class ApiError extends Error {
+    status: number;
+    constructor(status: number, message: string);
+}
+export declare class ApiClient {
+    #private;
+    constructor(baseUrl?: string);
+    request<T = unknown>(method: string, path: string, body?: unknown): Promise<T>;
+    get<T = unknown>(path: string): Promise<T>;
+    post<T = unknown>(path: string, body?: unknown): Promise<T>;
+    put<T = unknown>(path: string, body?: unknown): Promise<T>;
+    patch<T = unknown>(path: string, body?: unknown): Promise<T>;
+    delete<T = unknown>(path: string): Promise<T>;
+}
+export declare function api(opts?: {
+    baseUrl?: string;
+}): AppMiddleware;

package/dist/client/middleware/auth.d.ts

@@ -0,0 +1,32 @@
+/**
+ * auth middleware — 注入 ctx.user / ctx.login / ctx.logout / ctx.register
+ *
+ * ```tsx
+ * app.use(api())
+ * app.use(auth())
+ *
+ * // In component:
+ * if (!ctx.user) return <LoginPage />
+ * ctx.login(email, password)
+ * ctx.logout()
+ * ```
+ */
+import type { AppMiddleware } from '../types.ts';
+export interface UserRecord {
+    id: string;
+    email: string;
+    name: string;
+    role: string;
+    avatar?: string;
+}
+export interface AuthOptions {
+    /** localStorage key，默认 'wefu:auth' */
+    storageKey?: string;
+    /** 登录 API 路径，默认 '/api/login' */
+    loginPath?: string;
+    /** 注册 API 路径，默认 '/api/register' */
+    registerPath?: string;
+    /** 获取当前用户 API 路径，默认 '/api/me' */
+    mePath?: string;
+}
+export declare function auth(opts?: AuthOptions): AppMiddleware;

package/dist/client/middleware/ws.d.ts

@@ -0,0 +1,21 @@
+/**
+ * ws middleware — 注入 ctx.ws
+ *
+ * WebSocket 客户端，自动重连，支持房间。
+ *
+ * ```tsx
+ * app.use(ws({ url: '/ws' }))
+ *
+ * // In component:
+ * ctx.ws.onMessage((data) => ...)
+ * ctx.ws.join('conversation:123')
+ * ctx.ws.send({ type: 'ping' })
+ * ```
+ */
+import type { AppMiddleware } from '../types.ts';
+export interface WsOptions {
+    url?: string;
+    reconnectInterval?: number;
+    maxReconnect?: number;
+}
+export declare function ws(opts?: WsOptions): AppMiddleware;

package/dist/client/types.d.ts

@@ -1,15 +1,17 @@
 /**
  * wefu 类型定义
  */
+import type { Signal } from './signal.ts';
 import type { Component } from './jsx-runtime.ts';
 /**
  * wefu 上下文 — 组件通过第二个参数访问
  *
  * ```tsx
  * function MyPage(props, ctx: WfuiContext) {
- *   ctx.app.navigate('/chat')
- *   ctx.provide('key', value)
- *   const val = ctx.inject('key')
+ *   ctx.user              // 当前登录用户
+ *   ctx.login(email, pw)  // 登录
+ *   ctx.api.get('/users') // API 请求
+ *   ctx.ws.send(data)     // WebSocket
  * }
  * ```
  */
@@ -19,16 +21,44 @@ export interface WfuiContext {
         params: Record<string, string>;
         query: Record<string, string>;
         hash: string;
-        /** 当前匹配的路由组件（由 router 中间件注入） */
         component: Component | null;
-        /** 当前匹配的路由配置 */
         title?: string;
         auth?: boolean;
     };
     app: {
         navigate: (path: string) => void;
     };
-    /** 跨组件共享数据（类似 React Context / Vue provide/inject） */
+    user: {
+        id: string;
+        email: string;
+        name: string;
+        role: string;
+        avatar?: string;
+    } | null;
+    token: string | null;
+    isAuthenticated: boolean;
+    login: (email: string, password: string) => Promise<void>;
+    logout: () => void;
+    register: (input: {
+        email: string;
+        name: string;
+        password: string;
+    }) => Promise<void>;
+    api: {
+        get<T>(path: string): Promise<T>;
+        post<T>(path: string, body?: unknown): Promise<T>;
+        put<T>(path: string, body?: unknown): Promise<T>;
+        patch<T>(path: string, body?: unknown): Promise<T>;
+        delete<T>(path: string): Promise<T>;
+    };
+    ws: {
+        send: (data: unknown) => void;
+        onMessage: (handler: (data: unknown) => void) => () => void;
+        join: (room: string) => void;
+        leave: (room: string) => void;
+        isConnected: Signal<boolean>;
+    };
+    /** 跨组件共享数据 */
     provide: <T>(key: string, value: T) => void;
     inject: <T>(key: string) => T | null;
     /** 中间件注入扩展 */

package/dist/index.d.ts

@@ -47,4 +47,6 @@ export type { CMSAPI, CMSOptions, Content, ContentStatus, ContentType, Tag, TagW
 export { kb, KB } from './kb/index.ts';
 export type { KBAPI, KBOptions, Document, Chunk, SearchResult, ImportOptions, SearchOptions, } from './kb/types.ts';
 export type { BaseAPI, BaseDef, BaseOptions, TableSchema, FieldSchema, FieldType, ColumnMap, CreateBaseInput, UpdateBaseInput, QueryOptions, } from './base/types.ts';
+export { ui } from './ui/index.ts';
+export type { UiOptions, UiRenderOptions } from './ui/index.ts';
 export { requireRole } from './user/types.ts';

package/dist/index.js

@@ -4316,6 +4316,51 @@ function kb(opts) {
   mw.__meta = { injects: ["kb"], depends: ["sql"] };
   return mw;
 }
+
+// src/ui/index.ts
+function defaultTemplate(title, script, propsJson) {
+  return `<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${escapeHtml(title)}</title>
+</head>
+<body>
+  <div id="root"></div>
+  ${propsJson ? `<script>window.__WFUI_PROPS__=${propsJson}</script>` : ""}
+  <script src="${escapeHtml(script)}"></script>
+</body>
+</html>`;
+}
+function escapeHtml(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function ui(opts = {}) {
+  const defaultTitle = opts.title ?? "weifuwu";
+  const defaultScript = opts.script ?? "/static/app.js";
+  const template = opts.template;
+  return async (req, ctx, next) => {
+    ctx.ui = {
+      html(renderOpts = {}) {
+        const title = renderOpts.title ?? defaultTitle;
+        const script = renderOpts.script ?? defaultScript;
+        let propsJson = "";
+        if (renderOpts.props) {
+          try {
+            propsJson = JSON.stringify(renderOpts.props);
+          } catch {
+          }
+        }
+        const body = template ? template.replace(/\{\{title\}\}/g, escapeHtml(title)).replace(/\{\{script\}\}/g, escapeHtml(script)).replace(/\{\{props\}\}/g, propsJson) : defaultTemplate(title, script, propsJson);
+        return new Response(body, {
+          headers: { "Content-Type": "text/html; charset=utf-8" }
+        });
+      }
+    };
+    return next(req, ctx);
+  };
+}
 export {
   Base,
   CMS,
@@ -4351,6 +4396,7 @@ export {
   serveStatic,
   trace,
   traceElapsed,
+  ui,
   upload,
   user
 };

package/dist/ui/index.d.ts

@@ -0,0 +1,37 @@
+/**
+ * ui 中间件 — 注入 ctx.ui.html()
+ *
+ * 返回 SPA HTML shell，加载前端 client bundle。
+ *
+ * ```ts
+ * import { ui, serveStatic } from 'weifuwu'
+ *
+ * app.use(ui({ title: 'My App', script: '/static/app.js' }))
+ * app.get('/static/*', serveStatic('./dist/client'))
+ * app.get('*', async (req, ctx) => ctx.ui.html())
+ * ```
+ */
+import type { Middleware } from '../types.ts';
+declare module '../types.ts' {
+    interface Context {
+        ui: {
+            /** 返回 SPA HTML 页面 */
+            html: (opts?: UiRenderOptions) => Response;
+        };
+    }
+}
+export interface UiOptions {
+    /** 页面标题，默认 'weifuwu' */
+    title?: string;
+    /** Client bundle JS 路径，默认 '/static/app.js' */
+    script?: string;
+    /** 自定义 HTML 模板，覆盖默认 */
+    template?: string;
+}
+export interface UiRenderOptions {
+    title?: string;
+    script?: string;
+    /** 内嵌到页面的初始数据（通过 window.__WFUI_PROPS__ 访问） */
+    props?: Record<string, unknown>;
+}
+export declare function ui(opts?: UiOptions): Middleware;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "weifuwu",
   "type": "module",
-  "version": "0.33.2",
+  "version": "0.33.3",
   "description": "AI SaaS framework — (req, ctx) => Response",
   "exports": {
     ".": {