@huanban/rulego-editor-react 1.1.5 → 1.2.0

package/README.md

@@ -13,6 +13,8 @@
 2. React Hooks 封装（方便在函数组件中使用）
 3. Props → Options 的桥接
 
+同时，React 包导出 `WorkflowList`、`WorkflowInfoPanel` 等独立管理组件。它们可以和 `RuleGoEditor` 组合成完整工作台，但不把业务套壳写进 core，也不改变编辑器本体职责。
+
 ## 📦 安装
 
 ```bash
@@ -41,7 +43,7 @@ import '@huanban/rulego-editor-react/style.css'
 | 组件 | 用途 | 说明 |
 |------|------|------|
 | `RuleGoEditor` | 规则链编辑器 | 完整的可视化编辑器（内置工具栏、侧边栏、属性面板等全部 UI）|
-| `WorkflowList` | 工作流列表 | 展示所有规则链，支持搜索、创建、删除 |
+| `WorkflowList` | 工作流列表 | 卡片/列表两种布局，支持搜索、创建、上线/下线、复制、删除、详情联动和设计跳转 |
 | `WorkflowInfoPanel` | 工作流信息面板 | 展示单条链的详细信息和配置 |
 
 ---
@@ -60,7 +62,7 @@ function EditorPage({ chainId }: { chainId: string }) {
   const [chainData, setChainData] = useState(null)
 
   useEffect(() => {
-    fetch(`http://localhost:9090/api/v1/rule-chains/${chainId}`)
+    fetch(`http://localhost:9090/api/v1/rules/${encodeURIComponent(chainId)}`)
       .then(res => res.json())
       .then(data => setChainData(data))
   }, [chainId])
@@ -95,25 +97,65 @@ function EditorPage({ chainId }: { chainId: string }) {
 | `data` | `RuleChainData \| null` | `null` | 规则链数据 |
 | `apiBase` | `string` | - | 后端 API 地址（如 `http://localhost:9090/api/v1`）|
 | `theme` | `string` | `'modern'` | 主题：`classic` / `dark` / `nature` / `elegant` / `tech` / `modern` |
-| `lang` | `string` | `'zh-CN'` | 语言：`zh-CN` / `en-US` |
+| `locale` | `string` | `'zh-CN'` | 语言：`zh-CN` / `en-US` |
 | `toolbarTitle` | `string` | - | 工具栏标题 |
 | `showChainInfo` | `boolean` | `true` | 是否显示链信息头部 |
 | `height` | `string \| number` | `'100%'` | 编辑器高度 |
 | `width` | `string \| number` | `'100%'` | 编辑器宽度 |
 | `className` | `string` | `''` | 自定义 className |
 | `style` | `CSSProperties` | `{}` | 自定义样式 |
+| `fetchHeaders` | `Record<string,string> \| () => Record<string,string>` | - | 给编辑器内部请求注入认证 headers |
+| `customFetch` | `(url, init) => Promise<Response>` | - | 完全替换请求逻辑 |
+| `showSettingsButton` | `boolean` | `true` | 是否显示设置入口 |
+| `showAiChatButton` | `boolean` | `true` | 是否显示 AI 助理入口 |
+| `showRunButton` | `boolean` | `true` | 是否显示运行调试入口 |
+| `options` | `Partial<HuanbanRulegoEditorOptions>` | - | 透传 core 扩展配置，如 `onSettingsSubmit/onLoginClick/allowedApiOrigins` |
 | `onReady` | `({ core, lf }) => void` | - | 编辑器就绪回调 |
 | `onNodeClick` | `(node) => void` | - | 节点点击回调 |
 | `onNodeDbClick` | `(node) => void` | - | 节点双击回调 |
 | `onEdgeClick` | `(edge) => void` | - | 边点击回调 |
-| `onSaveSuccess` | `(data) => void` | - | 保存成功回调 |
-| `onDeploySuccess` | `() => void` | - | 部署成功回调 |
+| `onSave` | `(data) => void \| Promise<void>` | - | 保存回调 |
+| `onDeploy` | `(chainId, action) => void \| Promise<void>` | - | 部署/下线/重载回调 |
+
+---
+
+### 服务地址、设置和登录
+
+完整编辑器内置设置入口。客户项目通常需要把后台地址和登录态交给宿主管理：
+
+```tsx
+<RuleGoEditor
+  apiBase={apiBase}
+  data={chainData}
+  fetchHeaders={() => {
+    const token = localStorage.getItem('token') || localStorage.getItem('access_token')
+    return token ? { Authorization: `Bearer ${token}` } : {}
+  }}
+  showSettingsButton
+  options={{
+    allowedApiOrigins: [new URL(apiBase, window.location.origin).origin],
+    onSettingsSubmit: ({ apiBase }) => {
+      localStorage.setItem('huanban_rulego_api_base', apiBase)
+      setApiBase(apiBase)
+    },
+    onLoginClick: () => window.dispatchEvent(new CustomEvent('open-login')),
+    onAuthExpired: () => window.dispatchEvent(new CustomEvent('open-login')),
+    clearToken: () => {
+      localStorage.removeItem('token')
+      localStorage.removeItem('access_token')
+      localStorage.removeItem('username')
+    },
+  }}
+/>
+```
+
+如果不传 `onLoginClick`，内置设置页会打开默认登录弹窗，并请求 `POST {apiBase}/login`。完整新项目接入说明见根目录 [docs/CLIENT_INTEGRATION.md](../../docs/CLIENT_INTEGRATION.md)。
 
 ---
 
 ## 二、WorkflowList — 工作流列表
 
-展示所有规则链，支持搜索、分页、创建、删除、编辑跳转。
+展示所有规则链，支持搜索、分页、创建、上线/下线、复制、删除、详情联动和编辑跳转。它是独立管理组件，不是编辑器；进入画布编辑需要在 `onDesign` 中切换到 `RuleGoEditor`。
 
 ### 基本用法
 
@@ -125,8 +167,9 @@ function WorkflowPage() {
   return (
     <WorkflowList
       apiBase="http://localhost:9090/api/v1"
-      onEdit={(item) => {
-        window.location.href = `/editor/${item.id}`
+      layout="grid"
+      onDesign={(id) => {
+        window.location.href = `/editor/${id}`
       }}
     />
   )
@@ -138,11 +181,19 @@ function WorkflowPage() {
 | 属性 | 类型 | 必填 | 说明 |
 |------|------|------|------|
 | `apiBase` | `string` | ✅ | 后端 API 地址 |
-| `onEdit` | `(item: WorkflowItem) => void` | ❌ | 点击"编辑"按钮的回调 |
-| `customRoutes` | `RuleChainRoutes` | ❌ | 自定义 API 路由映射 |
-| `customIcons` | `WorkflowListIcons` | ❌ | 自定义图标 |
+| `apiOptions` | `Partial<RuleChainAPIOptions>` | ❌ | 传给内置 `RuleChainAPI` 的请求配置 |
+| `fetcher` | `WorkflowFetcher` | ❌ | 自定义请求适配器，传入后忽略 `apiBase` |
+| `layout` | `'grid' \| 'list'` | ❌ | 默认 `grid`，卡片管理页；传 `list` 使用紧凑列表 |
+| `autoOpenAfterCreate` | `boolean` | ❌ | 传了 `onDesign` 时默认开启；新建成功后自动进入编辑器 |
+| `onDesign` | `(chainId: string) => void` | ❌ | 点击“设计”按钮的回调，宿主在这里进入编辑器 |
+| `onInfo` | `(workflow: WorkflowItem) => void` | ❌ | 单击卡片或点击“信息”后的回调 |
+| `onViewLogs` | `(chainId: string) => void` | ❌ | 点击“日志”按钮的回调 |
+| `onCreateSuccess` | `(chainId: string) => void` | ❌ | 创建成功后的通知回调；进入编辑器建议交给 `onDesign` |
+| `icons` | `WorkflowListIcons` | ❌ | 自定义图标 |
 | `theme` | `WorkflowTheme` | ❌ | 自定义主题色 |
 
+默认新建弹窗包含 ID、名称、主链/子链、初始状态、调试模式、分类、描述。ID 自动生成，也可手动输入；为兼容后台路由，ID 不能包含 `/`、`\` 或 `.`。卡片单击会调用 `onInfo`，双击或菜单“设计”会调用 `onDesign`。
+
 ---
 
 ## 三、WorkflowInfoPanel — 工作流信息面板
@@ -155,11 +206,11 @@ function WorkflowPage() {
 import { WorkflowInfoPanel } from '@huanban/rulego-editor-react'
 import '@huanban/rulego-editor-react/style.css'
 
-function InfoPage({ workflowItem }) {
+function InfoPage({ workflow }) {
   return (
     <WorkflowInfoPanel
       apiBase="http://localhost:9090/api/v1"
-      workflowItem={workflowItem}
+      workflow={workflow}
       onRefresh={() => { /* 重新加载数据 */ }}
     />
   )
@@ -171,11 +222,11 @@ function InfoPage({ workflowItem }) {
 | 属性 | 类型 | 必填 | 说明 |
 |------|------|------|------|
 | `apiBase` | `string` | ✅ | 后端 API 地址 |
-| `workflowItem` | `WorkflowItem` | ✅ | 工作流数据 |
+| `workflow` | `WorkflowItem \| null` | ✅ | 工作流数据 |
 | `onRefresh` | `() => void` | ❌ | 刷新回调 |
 | `extraTabs` | `ExtraTab[]` | ❌ | 自定义扩展 Tab |
-| `customRoutes` | `RuleChainRoutes` | ❌ | 自定义 API 路由 |
-| `customIcons` | `WorkflowInfoIcons` | ❌ | 自定义图标 |
+| `fetcher` | `WorkflowFetcher` | ❌ | 自定义请求适配器，传入后忽略 `apiBase` |
+| `icons` | `WorkflowInfoIcons` | ❌ | 自定义图标 |
 | `theme` | `WorkflowTheme` | ❌ | 自定义主题色 |
 
 ---
@@ -198,7 +249,7 @@ function App() {
 
   useEffect(() => {
     if (!chainId) return
-    fetch(`${API_BASE}/rule-chains/${chainId}`)
+    fetch(`${API_BASE}/rules/${encodeURIComponent(chainId)}`)
       .then(res => res.json())
       .then(data => setChainData(data))
   }, [chainId])
@@ -207,8 +258,9 @@ function App() {
     return (
       <WorkflowList
         apiBase={API_BASE}
-        onEdit={(item) => {
-          setChainId(item.id)
+        layout="grid"
+        onDesign={(id) => {
+          setChainId(id)
           setView('editor')
         }}
       />

package/dist/components/WorkflowInfoPanel.d.ts

@@ -11,8 +11,9 @@
  *   6. 事件回调: onSave / onError / onRefresh
  *
  * Tab 页:
- *   - 基础信息（名称/描述/状态）
- *   - 变量与秘钥（key-value 编辑）
+ *   - 基础信息（ID/名称/根规则链/调试模式/分类/描述/状态）
+ *   - 输入定义（可视化/JSON Schema 编辑）
+ *   - 变量（变量与秘钥 key-value 编辑）
  *   - 应用集成（API/MCP 地址展示）
  *   - 自定义 Tab（通过 renderExtraTabs 扩展）
  *
@@ -63,6 +64,9 @@ export interface WorkflowInfoPanelProps {
 export interface WorkflowIntegrationUrls {
     executeUrl: string;
     notifyUrl: string;
+    openaiUrl: string;
+    mcpStreamableUrl: string;
+    mcpGroupUrl: string;
     mcpSseUrl: string;
     debugWsUrl: string;
     runtimeWsUrl: string;

package/dist/components/WorkflowList.d.ts

@@ -42,6 +42,10 @@ export interface WorkflowListProps {
     fetcher?: WorkflowFetcher;
     /** 每页条数，默认 10 */
     pageSize?: number;
+    /** 列表布局。grid 更适合作为管理页卡片墙，list 保留旧列表风格。 */
+    layout?: 'grid' | 'list';
+    /** 新建成功后是否自动调用 onDesign 进入编辑器。默认在传入 onDesign 时开启。 */
+    autoOpenAfterCreate?: boolean;
     /** 主题 */
     theme?: WorkflowTheme;
     /** 额外 CSS 类名 */