@zhin.js/console 1.0.5 → 1.0.7

package/app/index.ts

@@ -0,0 +1,419 @@
+import { register, useContext, useApp } from "@zhin.js/core";
+import react from "@vitejs/plugin-react";
+import WebSocket, { WebSocketServer } from "ws";
+import { createServer, ViteDevServer, searchForWorkspaceRoot } from "vite";
+import connect from "koa-connect";
+import * as fs from "fs";
+import * as path from "path";
+import { fileURLToPath } from "node:url";
+import tailwindcss from "@tailwindcss/vite";
+
+declare module "@zhin.js/types" {
+  interface GlobalContext {
+    web: WebServer;
+  }
+}
+export type WebEntry =
+  | string
+  | {
+      production: string;
+      development: string;
+    };
+export type WebServer = {
+  vite: ViteDevServer;
+  addEntry(entry: WebEntry): () => void;
+  entries: Record<string, string>;
+  ws: WebSocketServer;
+};
+const createSyncMsg = (key: string, value: any) => {
+  return {
+    type: "sync",
+    data: {
+      key,
+      value,
+    },
+  };
+};
+const createAddMsg = (key: string, value: any) => {
+  return {
+    type: "add",
+    data: {
+      key,
+      value,
+    },
+  };
+};
+const createDeleteMsg = (key: string, value: any) => {
+  return {
+    type: "delete",
+    data: {
+      key,
+      value,
+    },
+  };
+};
+useContext("router", async (router) => {
+  const root = path.join(import.meta.dirname, "../client");
+  const base = "/vite/";
+
+  const vite = await createServer({
+    root,
+    base,
+    plugins: [react(), tailwindcss()],
+    server: {
+      middlewareMode: true,
+      fs: {
+        strict: false,
+      },
+    },
+    resolve: {
+      dedupe: [
+        "react",
+        "react-dom",
+        "clsx",
+        "tailwind-merge",
+        "@reduxjs/toolkit",
+        "react-router",
+        "react-redux",
+        "redux-persist",
+      ],
+      alias: {
+        "@zhin.js/client": path.resolve(root, "../../client/client"),
+        "@": path.resolve(root, "../client/src"),
+      },
+    },
+    optimizeDeps: {
+      include: ["react", "react-dom"],
+    },
+    build: {
+      rollupOptions: {
+        input: root + "/index.html",
+      },
+    },
+  });
+
+  // Vite 中间件 - 必须在其他路由之前
+  router.use((ctx: any, next: any) => {
+    if (ctx.request.originalUrl.startsWith("/api")) return next();
+    return connect(vite.middlewares)(ctx, next);
+  });
+
+  // SPA 回退路由 - 处理所有未匹配的路由
+  router.all("*all", async (ctx, next) => {
+    const url = ctx.request.originalUrl.replace(base, "");
+    const name = ctx.path.slice(1);
+
+    const sendFile = (filename: string) => {
+      ctx.type = path.extname(filename);
+      if (filename.endsWith(".ts")) ctx.type = "text/javascript";
+      return (ctx.body = fs.createReadStream(filename));
+    };
+
+    // 1. 检查是否是动态入口
+    if (Object.keys(webServer.entries).includes(name)) {
+      return sendFile(path.resolve(process.cwd(), webServer.entries[name]));
+    }
+
+    // 2. 检查是否是静态文件
+    const filename = path.resolve(root, name);
+    if (filename.startsWith(root) || filename.includes("node_modules")) {
+      if (fs.existsSync(filename)) {
+        const fileState = fs.statSync(filename);
+        if (fileState.isFile()) {
+          return sendFile(filename);
+        }
+      }
+    } else {
+      // 安全检查：路径不在允许范围内
+      return (ctx.status = 403);
+    }
+
+    // 3. 所有其他路径（包括 SPA 路由）都返回 index.html
+    // 这样前端路由可以正确处理
+    const template = fs.readFileSync(path.resolve(root, "index.html"), "utf8");
+    ctx.type = "html";
+    ctx.body = await vite.transformIndexHtml(url, template);
+  });
+
+  const webServer: WebServer = {
+    vite,
+    entries: {},
+    addEntry(entry) {
+      const hash =
+        Date.now().toString(16) + Math.random().toString(16).slice(2, 8);
+      const entryFile =
+        typeof entry === "string"
+          ? entry
+          : entry[
+              (process.env.NODE_ENV as "development" | "production") ||
+                "development"
+            ];
+      this.entries[hash] = `/vite/@fs/${entryFile}`;
+      for (const ws of this.ws.clients || []) {
+        ws.send(JSON.stringify(createAddMsg("entries", this.entries[hash])));
+      }
+      return () => {
+        for (const ws of this.ws.clients || []) {
+          ws.send(
+            JSON.stringify(createDeleteMsg("entries", this.entries[hash]))
+          );
+        }
+        delete this.entries[hash];
+      };
+    },
+    ws: router.ws("/server"),
+  };
+  // 数据推送函数
+  const broadcastToAll = (message: any) => {
+    for (const ws of webServer.ws.clients || []) {
+      if (ws.readyState === WebSocket.OPEN) {
+        ws.send(JSON.stringify(message));
+      }
+    }
+  };
+
+  // 推送数据更新通知
+  const notifyDataUpdate = () => {
+    broadcastToAll({
+      type: "data-update",
+      timestamp: Date.now(),
+    });
+  };
+
+  // WebSocket 连接处理
+  webServer.ws.on("connection", (ws: WebSocket) => {
+    // 发送初始数据
+    ws.send(
+      JSON.stringify(
+        createSyncMsg(
+          "entries",
+          Array.from(new Set(Object.values(webServer.entries)))
+        )
+      )
+    );
+
+    // 通知客户端进行数据初始化
+    ws.send(
+      JSON.stringify({
+        type: "init-data",
+        timestamp: Date.now(),
+      })
+    );
+
+    // 处理 WebSocket 消息
+    ws.on("message", async (data) => {
+      try {
+        const message = JSON.parse(data.toString());
+        const { type, pluginName, requestId } = message;
+
+        // 获取应用实例
+        const app = useApp();
+
+        switch (type) {
+          case "config:get":
+            try {
+              let config;
+              if (pluginName === "app") {
+                config = app.getConfig();
+              } else {
+                const plugin = app.findPluginByName(pluginName);
+                if (!plugin) {
+                  throw new Error(`Plugin ${pluginName} not found`);
+                }
+                config = plugin.config;
+              }
+
+              ws.send(
+                JSON.stringify({
+                  requestId,
+                  data: config,
+                })
+              );
+            } catch (error) {
+              ws.send(
+                JSON.stringify({
+                  requestId,
+                  error: (error as Error).message,
+                })
+              );
+            }
+            break;
+
+          case "config:set":
+            try {
+              const { data: newConfig } = message;
+
+              if (pluginName === "app") {
+                app.config = newConfig;
+              } else {
+                const plugin = app.findPluginByName(pluginName);
+                if (!plugin) {
+                  throw new Error(`Plugin ${pluginName} not found`);
+                }
+                plugin.config = newConfig;
+              }
+
+              // 响应成功
+              ws.send(
+                JSON.stringify({
+                  requestId,
+                  data: "success",
+                })
+              );
+
+              // 广播配置更新
+              webServer.ws.clients.forEach((client) => {
+                if (client.readyState === 1) {
+                  // WebSocket.OPEN
+                  client.send(
+                    JSON.stringify({
+                      type: "config:updated",
+                      pluginName,
+                      data: newConfig,
+                    })
+                  );
+                }
+              });
+            } catch (error) {
+              ws.send(
+                JSON.stringify({
+                  requestId,
+                  error: (error as Error).message,
+                })
+              );
+            }
+            break;
+
+          case "schema:get":
+            try {
+              let schema;
+              if (pluginName === "app") {
+                schema = app.schema?.toJSON();
+              } else {
+                const plugin = app.findPluginByName(pluginName);
+                if (!plugin) {
+                  throw new Error(`Plugin ${pluginName} not found`);
+                }
+                schema = plugin.schema?.toJSON();
+              }
+
+              ws.send(
+                JSON.stringify({
+                  requestId,
+                  data: schema,
+                })
+              );
+            } catch (error) {
+              ws.send(
+                JSON.stringify({
+                  requestId,
+                  error: (error as Error).message,
+                })
+              );
+            }
+            break;
+
+          case "config:get-all":
+            try {
+              const configs: Record<string, any> = {};
+
+              // 获取 App 配置
+              configs["app"] = app.getConfig();
+
+              // 获取所有插件配置
+              for (const plugin of app.dependencyList) {
+                if (plugin.config && Object.keys(plugin.config).length > 0) {
+                  configs[plugin.name] = plugin.config;
+                }
+              }
+
+              ws.send(
+                JSON.stringify({
+                  requestId,
+                  data: configs,
+                })
+              );
+            } catch (error) {
+              ws.send(
+                JSON.stringify({
+                  requestId,
+                  error: (error as Error).message,
+                })
+              );
+            }
+            break;
+
+          case "schema:get-all":
+            try {
+              const schemas: Record<string, any> = {};
+
+              // 获取 App Schema
+              const appSchema = app.schema?.toJSON();
+              if (appSchema) {
+                schemas["app"] = appSchema;
+              }
+
+              // 获取所有插件 Schema
+              for (const plugin of app.dependencyList) {
+                const schema = plugin.schema?.toJSON();
+                if (schema) {
+                  schemas[plugin.name] = schema;
+                }
+              }
+
+              ws.send(
+                JSON.stringify({
+                  requestId,
+                  data: schemas,
+                })
+              );
+            } catch (error) {
+              ws.send(
+                JSON.stringify({
+                  requestId,
+                  error: (error as Error).message,
+                })
+              );
+            }
+            break;
+
+          // 其他消息类型保持不变，让 console 插件自己处理
+        }
+      } catch (error) {
+        console.error("WebSocket 消息处理错误:", error);
+        ws.send(
+          JSON.stringify({
+            error: "Invalid message format",
+          })
+        );
+      }
+    });
+
+    ws.on("close", () => {});
+
+    ws.on("error", (error) => {
+      // console.error 已替换为注释
+    });
+  });
+
+  // 定时通知客户端更新数据
+  const dataUpdateInterval = setInterval(() => {
+    notifyDataUpdate();
+  }, 5000); // 每5秒通知一次更新
+
+  // 插件卸载时清理定时器
+  process.on("exit", () => {
+    clearInterval(dataUpdateInterval);
+  });
+  register({
+    name: "web",
+    description: "web服务",
+    async mounted() {
+      return webServer;
+    },
+    async dispose(server) {
+      await server.vite.close();
+      server.ws.close();
+    },
+  });
+});

package/client/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang='en'>
+<head>
+  <meta charset='UTF-8'>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Zhin</title>
+</head>
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <script src='/src/main.tsx' type='module'></script>
+</body>
+</html>

package/client/postcss.config.js

@@ -0,0 +1,5 @@
+export default {
+    plugins: {
+      "@tailwindcss/postcss": {},
+    },
+  };

package/client/src/components/PluginConfigForm/BasicFieldRenderers.tsx

@@ -0,0 +1,253 @@
+/**
+ * 基础类型字段渲染器
+ * 处理: string, number, boolean, percent, date, regexp, const
+ */
+
+import { Flex, Box, Text, TextField, TextArea, Switch, Select, Badge, Callout } from '@radix-ui/themes'
+import { Icons } from '@zhin.js/client'
+import type { FieldRendererProps } from './types.js'
+
+export function StringFieldRenderer({ field, value, onChange }: FieldRendererProps) {
+  // 枚举类型 - 下拉选择 - 优化样式
+  if (field.enum) {
+    return (
+      <Select.Root
+        size="2"
+        value={value?.toString() || ''}
+        onValueChange={onChange}
+      >
+        <Select.Trigger className="w-full hover:border-blue-500 dark:hover:border-blue-400 transition-colors" />
+        <Select.Content className="shadow-lg">
+          {field.enum.map((option) => (
+            <Select.Item 
+              key={option} 
+              value={option.toString()}
+              className="hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-colors"
+            >
+              {option.toString()}
+            </Select.Item>
+          ))}
+        </Select.Content>
+      </Select.Root>
+    )
+  }
+  
+  // 多行文本 - 优化样式
+  if (field.description?.includes('多行') || field.key?.includes('description')) {
+    return (
+      <TextArea
+        size="2"
+        value={value || ''}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={field.description || `请输入`}
+        rows={3}
+        className="font-sans resize-y hover:border-blue-500 dark:hover:border-blue-400 transition-colors focus:ring-2 focus:ring-blue-500/20"
+      />
+    )
+  }
+  
+  // 单行文本 - 优化样式
+  return (
+    <TextField.Root
+      size="2"
+      value={value || ''}
+      onChange={(e) => onChange(e.target.value)}
+      placeholder={field.description || `请输入`}
+      className="hover:border-blue-500 dark:hover:border-blue-400 transition-colors focus-within:ring-2 focus-within:ring-blue-500/20"
+    />
+  )
+}
+
+export function NumberFieldRenderer({ field, value, onChange }: FieldRendererProps) {
+  return (
+    <TextField.Root
+      size="2"
+      type="number"
+      value={value?.toString() || ''}
+      onChange={(e) => onChange(parseFloat(e.target.value) || 0)}
+      placeholder={field.description || `请输入数字`}
+      min={field.min}
+      max={field.max}
+      className="hover:border-blue-500 dark:hover:border-blue-400 transition-colors focus-within:ring-2 focus-within:ring-blue-500/20"
+    />
+  )
+}
+
+export function BooleanFieldRenderer({ value, onChange }: FieldRendererProps) {
+  return (
+    <Flex align="center" gap="3" className="p-3 rounded-lg bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-800">
+      <Switch
+        size="2"
+        checked={value === true}
+        onCheckedChange={onChange}
+        className="cursor-pointer"
+      />
+      <Flex direction="column" gap="1">
+        <Text size="2" weight="bold" color={value ? 'green' : 'gray'}>
+          {value ? '已启用' : '已禁用'}
+        </Text>
+        <Text size="1" color="gray">
+          {value ? '功能当前处于开启状态' : '功能当前处于关闭状态'}
+        </Text>
+      </Flex>
+    </Flex>
+  )
+}
+
+export function PercentFieldRenderer({ field, value, onChange }: FieldRendererProps) {
+  const percentValue = typeof value === 'number' ? value : (field.default || 0)
+  
+  return (
+    <div className="p-4 rounded-lg bg-gradient-to-br from-blue-50 to-cyan-50 dark:from-blue-900/20 dark:to-cyan-900/20 border border-blue-200 dark:border-blue-800">
+      <Flex direction="column" gap="3">
+        <Flex align="center" gap="3">
+          <input
+            type="range"
+            min={field.min || 0}
+            max={field.max || 1}
+            step={field.step || 0.01}
+            value={percentValue}
+            onChange={(e) => onChange(parseFloat(e.target.value))}
+            className="flex-1 h-2 rounded-lg appearance-none cursor-pointer bg-blue-200 dark:bg-blue-800 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-blue-600 dark:[&::-webkit-slider-thumb]:bg-blue-400 [&::-webkit-slider-thumb]:cursor-pointer hover:[&::-webkit-slider-thumb]:bg-blue-700 dark:hover:[&::-webkit-slider-thumb]:bg-blue-300 transition-all"
+          />
+          <TextField.Root
+            size="2"
+            type="number"
+            value={(percentValue * 100).toFixed(0)}
+            onChange={(e) => onChange(parseFloat(e.target.value) / 100)}
+            min={(field.min || 0) * 100}
+            max={(field.max || 1) * 100}
+            className="w-24"
+          >
+            <TextField.Slot side="right">
+              <Text size="1" weight="bold" className="text-blue-600 dark:text-blue-400">%</Text>
+            </TextField.Slot>
+          </TextField.Root>
+        </Flex>
+        <Flex align="center" justify="between">
+          <Text size="1" color="gray">
+            当前值
+          </Text>
+          <Badge color="blue" size="2" variant="soft" className="font-mono">
+            {(percentValue * 100).toFixed(1)}%
+          </Badge>
+        </Flex>
+      </Flex>
+    </div>
+  )
+}
+
+export function DateFieldRenderer({ field, value, onChange }: FieldRendererProps) {
+  const dateValue = value instanceof Date 
+    ? value.toISOString().split('T')[0]
+    : value || ''
+    
+  return (
+    <div className="relative">
+      <TextField.Root
+        size="2"
+        type="date"
+        value={dateValue}
+        onChange={(e) => onChange(new Date(e.target.value))}
+        placeholder={field.description || '选择日期'}
+        className="hover:border-blue-500 dark:hover:border-blue-400 transition-colors focus-within:ring-2 focus-within:ring-blue-500/20"
+      >
+        <TextField.Slot side="left">
+          <Icons.Calendar className="w-4 h-4 text-gray-500" />
+        </TextField.Slot>
+      </TextField.Root>
+    </div>
+  )
+}
+
+export function RegexpFieldRenderer({ field, value, onChange }: FieldRendererProps) {
+  const regexpValue = value instanceof RegExp 
+    ? value.source 
+    : (typeof value === 'string' ? value : '')
+    
+  return (
+    <div className="p-3 rounded-lg bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800">
+      <Flex direction="column" gap="2">
+        <TextField.Root
+          size="2"
+          value={regexpValue}
+          onChange={(e) => {
+            try {
+              onChange(new RegExp(e.target.value))
+            } catch {
+              onChange(e.target.value)
+            }
+          }}
+          placeholder={field.description || '请输入正则表达式'}
+          className="font-mono text-sm hover:border-amber-500 dark:hover:border-amber-400 transition-colors"
+        >
+          <TextField.Slot side="left">
+            <Text size="1" className="text-amber-600 dark:text-amber-400 font-bold">/</Text>
+          </TextField.Slot>
+          <TextField.Slot side="right">
+            <Text size="1" className="text-amber-600 dark:text-amber-400 font-bold">/</Text>
+          </TextField.Slot>
+        </TextField.Root>
+        <Flex align="center" gap="2">
+          <Icons.Info className="w-3 h-3 text-amber-600 dark:text-amber-400" />
+          <Text size="1" className="text-amber-700 dark:text-amber-300">
+            输入正则表达式模式 (省略斜杠)
+          </Text>
+        </Flex>
+      </Flex>
+    </div>
+  )
+}
+
+export function ConstFieldRenderer({ field, value }: FieldRendererProps) {
+  const constValue = field.default || value
+  
+  return (
+    <div className="p-3 rounded-lg bg-gray-100 dark:bg-gray-900 border border-gray-300 dark:border-gray-700">
+      <Flex align="center" gap="3">
+        <Icons.Lock className="w-4 h-4 text-gray-500 dark:text-gray-400" />
+        <Badge variant="soft" size="2" className="font-mono">
+          {String(constValue)}
+        </Badge>
+        <Text size="1" color="gray" className="ml-auto">
+          (常量，不可修改)
+        </Text>
+      </Flex>
+    </div>
+  )
+}
+
+export function AnyFieldRenderer({ field, value, onChange }: FieldRendererProps) {
+  return (
+    <div className="p-3 rounded-lg bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800">
+      <Flex direction="column" gap="3">
+        <Flex align="center" gap="2">
+          <Icons.Code className="w-4 h-4 text-purple-600 dark:text-purple-400" />
+          <Text size="1" weight="bold" className="text-purple-700 dark:text-purple-300">
+            JSON 格式输入
+          </Text>
+        </Flex>
+        <TextArea
+          size="2"
+          value={typeof value === 'object' ? JSON.stringify(value, null, 2) : String(value || '')}
+          onChange={(e) => {
+            try {
+              onChange(JSON.parse(e.target.value))
+            } catch {
+              onChange(e.target.value)
+            }
+          }}
+          placeholder={field.description || '支持任意类型 (JSON 格式)'}
+          rows={4}
+          className="font-mono text-sm bg-white dark:bg-gray-950 hover:border-purple-500 dark:hover:border-purple-400 transition-colors"
+        />
+        <Flex align="center" gap="2">
+          <Icons.Info className="w-3 h-3 text-purple-600 dark:text-purple-400" />
+          <Text size="1" className="text-purple-700 dark:text-purple-300">
+            支持: 字符串、数字、布尔值、对象、数组
+          </Text>
+        </Flex>
+      </Flex>
+    </div>
+  )
+}