diff --git a/docs/changelog/index.md b/docs/changelog/index.md index 51f439f8..866bc940 100644 --- a/docs/changelog/index.md +++ b/docs/changelog/index.md @@ -29,6 +29,7 @@ sidebar: false ### 变更 +- WAF 规则编辑器缩小编排区高度和首次适配缩放比例,默认显示更多画布上下文。 - 移除 WAF 规则旧固定黑白名单、地域名单与 PoW 数据库字段;升级后需在发布前重新编排规则。 - Agent 现同时内嵌 Country 与 City MMDB,首次启动仅从程序内初始化缺失文件,网络下载只用于后续周期更新。 diff --git a/docs/design/waf-orchestration-design.md b/docs/design/waf-orchestration-design.md index 4020b770..586ebf8a 100644 --- a/docs/design/waf-orchestration-design.md +++ b/docs/design/waf-orchestration-design.md @@ -85,7 +85,7 @@ Agent 必须先原子替换 IP 组 JSON,最后原子更新 checksum,使 Work React Flow 编辑页采用全宽画布和固定右侧属性栏: * 顶部提供返回、规则名称、启用状态、校验状态和保存操作。 -* 画布支持缩放、平移、框选、删除、自动布局和 MiniMap/Controls 等必要导航能力;节点拖动由 React Flow 本地受控状态实时处理,拖动结束后才把坐标写回编辑图。 +* 画布使用紧凑高度和较小的首次适配缩放,支持缩放、平移、框选、删除、自动布局和 MiniMap/Controls 等必要导航能力;节点拖动由 React Flow 本地受控状态实时处理,拖动结束后才把坐标写回编辑图。 * “添加处理单元”提供 IP 匹配、地域匹配、PoW 和阻止;开始与通过由默认图提供且不可删除或重复添加。 * 选中普通节点或连线后可使用画布删除按钮或 Delete/Backspace 删除;删除节点时同步移除关联连线。 * 右侧属性栏默认隐藏,选中节点后才显示并用于编辑配置;点击连线或画布空白处时收起。 diff --git a/docs/guide/waf-usage.md b/docs/guide/waf-usage.md index 1378ecc6..557c786a 100644 --- a/docs/guide/waf-usage.md +++ b/docs/guide/waf-usage.md @@ -17,6 +17,8 @@ OpenFlare WAF 使用可视化有向无环图编排规则。新建规则时只填 右侧节点属性栏默认隐藏,点击节点后显示;点击连线或画布空白区域后自动收起。 +编排区默认使用较紧凑的高度和较小的首次缩放比例,仍可通过滚轮或画布 Controls 自由缩放。 + ## 绑定与生效 启用的全局规则固定最先执行;路由绑定的自定义规则严格按列表顺序执行。调整顺序后需要发布配置版本,规则拓扑才会随 OpenResty reload 生效。 diff --git a/frontend/app/(main)/waf/rules/editor/components/rule-flow-canvas.tsx b/frontend/app/(main)/waf/rules/editor/components/rule-flow-canvas.tsx index f04ca21f..0f74db54 100644 --- a/frontend/app/(main)/waf/rules/editor/components/rule-flow-canvas.tsx +++ b/frontend/app/(main)/waf/rules/editor/components/rule-flow-canvas.tsx @@ -13,6 +13,7 @@ import { type Connection, type Edge, type EdgeChange, + type FitViewOptions, type Node, type NodeChange, type ReactFlowInstance, @@ -43,6 +44,10 @@ import { NodeLibrary } from './node-library'; import { RuleNode, type RuleFlowNodeData } from './rule-node'; const nodeTypes = { rule: RuleNode }; +const initialFitViewOptions = { + padding: 0.3, + maxZoom: 0.85, +} satisfies FitViewOptions; type FlowNode = Node; type FlowEdge = Edge; @@ -323,6 +328,7 @@ export function RuleFlowCanvas({ onSelectEdge(undefined); }} fitView + fitViewOptions={initialFitViewOptions} deleteKeyCode={['Backspace', 'Delete']} > diff --git a/frontend/app/(main)/waf/rules/editor/page.tsx b/frontend/app/(main)/waf/rules/editor/page.tsx index 0f7a05f5..7cb6e953 100644 --- a/frontend/app/(main)/waf/rules/editor/page.tsx +++ b/frontend/app/(main)/waf/rules/editor/page.tsx @@ -184,7 +184,7 @@ function EditorContent() { return ; return ( -
+
diff --git a/frontend/lib/theme/themes.json b/frontend/lib/theme/themes.json index 40c4d4ba..9818de0f 100644 --- a/frontend/lib/theme/themes.json +++ b/frontend/lib/theme/themes.json @@ -4559,4 +4559,4 @@ } } } -] +] \ No newline at end of file