@arronqzy/react-view 1.0.32 → 1.0.35

package/dist/styles.css

@@ -637,6 +637,10 @@ video {
   bottom: 0.375rem;
 }
 
+.bottom-3 {
+  bottom: 0.75rem;
+}
+
 .bottom-\[var\(--rv-ruler-size\)\] {
   bottom: var(--rv-ruler-size);
 }
@@ -673,6 +677,10 @@ video {
   right: 0px;
 }
 
+.right-1\.5 {
+  right: 0.375rem;
+}
+
 .right-2 {
   right: 0.5rem;
 }
@@ -693,6 +701,10 @@ video {
   top: 0.25rem;
 }
 
+.top-1\.5 {
+  top: 0.375rem;
+}
+
 .top-2 {
   top: 0.5rem;
 }
@@ -701,6 +713,10 @@ video {
   top: 1rem;
 }
 
+.top-\[calc\(100\%\+4px\)\] {
+  top: calc(100% + 4px);
+}
+
 .top-\[calc\(100\%\+6px\)\] {
   top: calc(100% + 6px);
 }
@@ -713,6 +729,10 @@ video {
   isolation: isolate;
 }
 
+.z-10 {
+  z-index: 10;
+}
+
 .z-20 {
   z-index: 20;
 }
@@ -725,6 +745,10 @@ video {
   z-index: 10000;
 }
 
+.z-\[10090\] {
+  z-index: 10090;
+}
+
 .z-\[10100\] {
   z-index: 10100;
 }
@@ -737,6 +761,14 @@ video {
   z-index: 10150;
 }
 
+.z-\[10200\] {
+  z-index: 10200;
+}
+
+.z-\[10300\] {
+  z-index: 10300;
+}
+
 .z-\[70\] {
   z-index: 70;
 }
@@ -978,10 +1010,26 @@ video {
   height: 100%;
 }
 
+.h-px {
+  height: 1px;
+}
+
+.max-h-24 {
+  max-height: 6rem;
+}
+
 .max-h-28 {
   max-height: 7rem;
 }
 
+.max-h-32 {
+  max-height: 8rem;
+}
+
+.max-h-40 {
+  max-height: 10rem;
+}
+
 .max-h-44 {
   max-height: 11rem;
 }
@@ -990,10 +1038,18 @@ video {
   max-height: 13rem;
 }
 
+.max-h-56 {
+  max-height: 14rem;
+}
+
 .max-h-\[160px\] {
   max-height: 160px;
 }
 
+.max-h-\[180px\] {
+  max-height: 180px;
+}
+
 .max-h-\[200px\] {
   max-height: 200px;
 }
@@ -1002,6 +1058,10 @@ video {
   max-height: 78vh;
 }
 
+.max-h-\[90vh\] {
+  max-height: 90vh;
+}
+
 .max-h-\[min\(78vh\2c 560px\)\] {
   max-height: min(78vh, 560px);
 }
@@ -1034,6 +1094,10 @@ video {
   min-height: 68px;
 }
 
+.min-h-\[min\(62vh\2c 640px\)\] {
+  min-height: min(62vh, 640px);
+}
+
 .min-h-full {
   min-height: 100%;
 }
@@ -1122,10 +1186,22 @@ video {
   width: 108px;
 }
 
+.w-\[148px\] {
+  width: 148px;
+}
+
+.w-\[168px\] {
+  width: 168px;
+}
+
 .w-\[220px\] {
   width: 220px;
 }
 
+.w-\[240px\] {
+  width: 240px;
+}
+
 .w-\[280px\] {
   width: 280px;
 }
@@ -1138,6 +1214,18 @@ video {
   width: min(94vw, 680px);
 }
 
+.w-\[min\(96vw\2c 1100px\)\] {
+  width: min(96vw, 1100px);
+}
+
+.w-\[min\(96vw\2c 960px\)\] {
+  width: min(96vw, 960px);
+}
+
+.w-\[var\(--radix-popover-trigger-width\)\] {
+  width: var(--radix-popover-trigger-width);
+}
+
 .w-\[var\(--rv-ruler-size\)\] {
   width: var(--rv-ruler-size);
 }
@@ -1174,10 +1262,18 @@ video {
   max-width: 140px;
 }
 
+.max-w-\[180px\] {
+  max-width: 180px;
+}
+
 .max-w-\[200px\] {
   max-width: 200px;
 }
 
+.max-w-\[260px\] {
+  max-width: 260px;
+}
+
 .max-w-\[360px\] {
   max-width: 360px;
 }
@@ -1210,6 +1306,10 @@ video {
   max-width: 90%;
 }
 
+.max-w-full {
+  max-width: 100%;
+}
+
 .max-w-lg {
   max-width: 32rem;
 }
@@ -1253,6 +1353,11 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.rotate-180 {
+  --tw-rotate: 180deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -1320,6 +1425,10 @@ video {
   resize: none;
 }
 
+.resize-y {
+  resize: vertical;
+}
+
 .resize {
   resize: both;
 }
@@ -1436,6 +1545,11 @@ video {
   gap: 1.25rem;
 }
 
+.gap-x-2 {
+  -moz-column-gap: 0.5rem;
+       column-gap: 0.5rem;
+}
+
 .gap-x-4 {
   -moz-column-gap: 1rem;
        column-gap: 1rem;
@@ -1672,10 +1786,18 @@ video {
   border-color: hsl(var(--border) / 0.8);
 }
 
+.border-destructive {
+  border-color: hsl(var(--destructive));
+}
+
 .border-destructive\/20 {
   border-color: hsl(var(--destructive) / 0.2);
 }
 
+.border-destructive\/30 {
+  border-color: hsl(var(--destructive) / 0.3);
+}
+
 .border-destructive\/40 {
   border-color: hsl(var(--destructive) / 0.4);
 }
@@ -1684,6 +1806,10 @@ video {
   border-color: hsl(var(--destructive) / 0.5);
 }
 
+.border-destructive\/60 {
+  border-color: hsl(var(--destructive) / 0.6);
+}
+
 .border-emerald-500\/30 {
   border-color: rgb(16 185 129 / 0.3);
 }
@@ -1701,10 +1827,18 @@ video {
   border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
 }
 
+.border-input {
+  border-color: hsl(var(--input));
+}
+
 .border-primary\/25 {
   border-color: hsl(var(--primary) / 0.25);
 }
 
+.border-primary\/30 {
+  border-color: hsl(var(--primary) / 0.3);
+}
+
 .border-primary\/40 {
   border-color: hsl(var(--primary) / 0.4);
 }
@@ -1725,6 +1859,10 @@ video {
   border-color: hsl(var(--primary) / 0.8);
 }
 
+.border-rose-500\/50 {
+  border-color: rgb(244 63 94 / 0.5);
+}
+
 .border-sky-500\/40 {
   border-color: rgb(14 165 233 / 0.4);
 }
@@ -1872,6 +2010,10 @@ video {
   background-color: hsl(var(--destructive) / 0.15);
 }
 
+.bg-destructive\/5 {
+  background-color: hsl(var(--destructive) / 0.05);
+}
+
 .bg-emerald-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
@@ -1881,6 +2023,10 @@ video {
   background-color: rgb(16 185 129 / 0.1);
 }
 
+.bg-emerald-500\/15 {
+  background-color: rgb(16 185 129 / 0.15);
+}
+
 .bg-muted {
   background-color: hsl(var(--muted));
 }
@@ -1993,6 +2139,10 @@ video {
   background-color: hsl(var(--primary) / 0.9);
 }
 
+.bg-rose-500\/15 {
+  background-color: rgb(244 63 94 / 0.15);
+}
+
 .bg-secondary {
   background-color: hsl(var(--secondary));
 }
@@ -2139,6 +2289,10 @@ video {
   padding: 0px;
 }
 
+.p-0\.5 {
+  padding: 0.125rem;
+}
+
 .p-1 {
   padding: 0.25rem;
 }
@@ -2259,6 +2413,11 @@ video {
   padding-bottom: 1.75rem;
 }
 
+.py-8 {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
 .py-px {
   padding-top: 1px;
   padding-bottom: 1px;
@@ -2308,6 +2467,10 @@ video {
   padding-left: 1.25rem;
 }
 
+.pr-0\.5 {
+  padding-right: 0.125rem;
+}
+
 .pr-1 {
   padding-right: 0.25rem;
 }
@@ -2478,6 +2641,11 @@ video {
   color: rgb(4 120 87 / var(--tw-text-opacity, 1));
 }
 
+.text-emerald-800 {
+  --tw-text-opacity: 1;
+  color: rgb(6 95 70 / var(--tw-text-opacity, 1));
+}
+
 .text-foreground {
   color: hsl(var(--foreground));
 }
@@ -2533,6 +2701,11 @@ video {
   color: hsl(var(--primary) / 0.8);
 }
 
+.text-rose-600 {
+  --tw-text-opacity: 1;
+  color: rgb(225 29 72 / var(--tw-text-opacity, 1));
+}
+
 .text-secondary-foreground {
   color: hsl(var(--secondary-foreground));
 }
@@ -2617,6 +2790,10 @@ video {
   opacity: 0.6;
 }
 
+.opacity-90 {
+  opacity: 0.9;
+}
+
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -2962,6 +3139,10 @@ video {
   background-color: rgb(245 158 11 / 0.15);
 }
 
+.hover\:bg-destructive\/10:hover {
+  background-color: hsl(var(--destructive) / 0.1);
+}
+
 .hover\:bg-destructive\/90:hover {
   background-color: hsl(var(--destructive) / 0.9);
 }
@@ -2986,6 +3167,10 @@ video {
   background-color: hsl(var(--primary) / 0.9);
 }
 
+.hover\:bg-rose-500\/25:hover {
+  background-color: rgb(244 63 94 / 0.25);
+}
+
 .hover\:bg-secondary\/80:hover {
   background-color: hsl(var(--secondary) / 0.8);
 }
@@ -3146,11 +3331,21 @@ video {
   color: rgb(252 211 77 / var(--tw-text-opacity, 1));
 }
 
+.dark\:text-emerald-200:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(167 243 208 / var(--tw-text-opacity, 1));
+}
+
 .dark\:text-emerald-300:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(110 231 183 / var(--tw-text-opacity, 1));
 }
 
+.dark\:text-rose-300:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(253 164 175 / var(--tw-text-opacity, 1));
+}
+
 .dark\:text-sky-300:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(125 211 252 / var(--tw-text-opacity, 1));
@@ -3184,6 +3379,10 @@ video {
     display: flex;
   }
 
+  .sm\:max-w-\[1100px\] {
+    max-width: 1100px;
+  }
+
   .sm\:max-w-\[520px\] {
     max-width: 520px;
   }
@@ -3192,6 +3391,18 @@ video {
     max-width: 860px;
   }
 
+  .sm\:max-w-\[960px\] {
+    max-width: 960px;
+  }
+
+  .sm\:max-w-md {
+    max-width: 28rem;
+  }
+
+  .sm\:max-w-sm {
+    max-width: 24rem;
+  }
+
   .sm\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -3200,6 +3411,10 @@ video {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
+  .sm\:gap-0 {
+    gap: 0px;
+  }
+
   .sm\:space-x-0 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-x-reverse: 0;
     margin-right: calc(0px * var(--tw-space-x-reverse));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arronqzy/react-view",
-  "version": "1.0.32",
+  "version": "1.0.35",
   "files": [
     "src",
     "dist",
@@ -31,13 +31,13 @@
     "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.36.2",
     "@arronqzy/ui": "1.0.9",
-    "@arronqzy/i18n": "0.1.14",
-    "@arronqzy/blueprint-dsl": "1.0.15",
-    "@arronqzy/react-blueprint": "1.0.18",
+    "@arronqzy/i18n": "0.1.16",
+    "@arronqzy/react-blueprint": "1.0.21",
+    "@arronqzy/blueprint-dsl": "1.0.16",
     "@arronqzy/view-scene3d": "0.1.5",
     "@arronqzy/rx-store": "1.0.8",
-    "@arronqzy/webllm-assistant": "0.1.16",
-    "@arronqzy/view-table": "0.1.8"
+    "@arronqzy/view-table": "0.1.8",
+    "@arronqzy/webllm-assistant": "0.1.16"
   },
   "devDependencies": {
     "@types/react": "^19.0.1",
@@ -46,8 +46,8 @@
     "eslint": "^8.57.0",
     "typescript": "^5.5.4",
     "@arronqzy/eslint-config": "0.0.0",
-    "@arronqzy/typescript-config": "1.0.0",
-    "@arronqzy/tailwind": "1.0.2"
+    "@arronqzy/tailwind": "1.0.2",
+    "@arronqzy/typescript-config": "1.0.0"
   },
   "scripts": {
     "lint": "eslint \"src/**/*.{ts,tsx}\"",

package/readme.md

@@ -1,16 +1,27 @@
 # @arronqzy/react-view
 
-Abuilder 的**视图编辑器** React 包，提供可视化画布、图层、物料、在线预览与工作区管理能力。
+视图编辑器。物料、无限画布、图层、配置侧栏、工作区和在线预览都在这个包。蓝图分屏通过依赖的 `@arronqzy/react-blueprint` 嵌进来。
 
-## 功能概览
+大多数 React 宿主应直接用 [`@arronqzy/abuilder`](../abuilder/README.md) 的 `<App />`。只有要把面板拆进已有布局时才引本包。
 
-- **无限画布**：平移、缩放、标尺、框选与 Moveable 拖拽/缩放/旋转
-- **图层系统**：多图层、映射图层、主图层、锁定与合并
-- **物料节点**：图表（ECharts）、文本、图片、音视频、几何、网格、引用节点等
-- **Scope 模版**：节点属性支持 `{scope.xxx}` 表达式与解析预览
-- **工作区**：IndexedDB 持久化、多项目切换、同步与在线预览
-- **蓝图联动**：与 `@arronqzy/react-blueprint` 分屏编辑，运行时 Scope 回写视图
-- **宿主集成**：工作区事件订阅、预览快照、外部工作区数据加载
+![左侧物料、中间画布、右侧配置、底部图层](https://github.com/qianzhuoyao/APanel5/raw/v5/docs/guide-assets/live-zh/01-overview.png)
+
+## 画布上有什么
+
+- **无限画布**：平移、缩放、标尺、框选，Moveable 拖拽 / 缩放 / 旋转
+- **物料**：ECharts 图表、可视化表格、文本、图片、音视频、几何、网格、视口、三维、引用节点
+- **图层**：多图层、映射图层、主图层、锁定、显示、合并
+- **配置**：按类型展开；可搜字段；展开状态按节点记住
+- **Scope**：属性可写 `{scope.xxx}`，蓝图执行后展开
+- **工作区**：IndexedDB 多项目、导入导出、跨标签同步
+
+表格是物料里配置最多的一类，列、条件样式和外观都在右侧：
+
+![表格节点与配置侧栏](https://github.com/qianzhuoyao/APanel5/raw/v5/docs/guide-assets/live-zh/09-table-full.png)
+
+打开蓝图后，本包把画布拆成上下两块，下面交给蓝图编辑器：
+
+![视图与蓝图分屏](https://github.com/qianzhuoyao/APanel5/raw/v5/docs/guide-assets/live-zh/17-blueprint.png)
 
 ## 安装
 
@@ -18,15 +29,13 @@ Abuilder 的**视图编辑器** React 包，提供可视化画布、图层、物
 pnpm add @arronqzy/react-view
 ```
 
-依赖 React 19，并需引入样式：
-
 ```ts
 import "@arronqzy/react-view/styles.css";
 ```
 
-## 使用
+Vite 宿主还要加 `@arronqzy/abuilder/vite` 的 `webllmAssistant()`，见 abuilder 的 README。否则打包 WebLLM 会失败。
 
-### 完整编辑器面板
+## 编辑面板
 
 ```tsx
 import { ReactViewPanel } from "@arronqzy/react-view";
@@ -44,15 +53,15 @@ export function Editor({ workspace }: { workspace?: WorkspaceProjectRecord | nul
 }
 ```
 
-| `ReactViewPanel` 参数 | 说明 | 默认值 |
-|----------------------|------|--------|
+| 参数 | 说明 | 默认 |
+|------|------|------|
 | `className` | 根节点 class | — |
 | `initialZoom` | 初始缩放 | `1` |
-| `initialWorkspace` | 外部传入的完整工作区，挂载后自动加载 | — |
+| `initialWorkspace` | 挂载后加载的完整工作区。空则空白画布 | — |
 
-### 在线预览
+## 在线预览
 
-按工作区 ID 从 IndexedDB / 缓存加载：
+按 ID 从 IndexedDB / 缓存加载：
 
 ```tsx
 import { ReactViewOnlinePreview } from "@arronqzy/react-view";
@@ -60,65 +69,62 @@ import { ReactViewOnlinePreview } from "@arronqzy/react-view";
 <ReactViewOnlinePreview projectId="your-project-id" />
 ```
 
-直接传入工作区数据（无需 IndexedDB）：
+直接给数据（优先于 `projectId`）：
 
 ```tsx
 <ReactViewOnlinePreview workspace={savedWorkspace} />
 ```
 
-URL 参数解析：
-
 ```ts
 import { parseOnlinePreviewSearchParams } from "@arronqzy/react-view";
 
-const params = parseOnlinePreviewSearchParams("?preview=online&projectId=xxx");
+parseOnlinePreviewSearchParams("?preview=online&projectId=xxx");
 ```
 
-| `ReactViewOnlinePreview` 参数 | 说明 |
-|------------------------------|------|
-| `projectId` | 从 IndexedDB 加载的工作区 ID |
-| `workspace` | 直接传入的完整工作区数据（优先于 `projectId`） |
+| 参数 | 说明 |
+|------|------|
+| `projectId` | 从 IndexedDB 加载 |
+| `workspace` | 宿主传入的完整工作区，优先 |
 | `previewInstanceId` | 预览实例 ID（可选） |
 
-### 工作区事件订阅
+## 工作区事件
 
-监听工作区创建与同步，回调携带**完整工作区数据**（面板 + 蓝图），便于持久化到自有后端：
+回调带完整工作区，用来写自己的后端。IndexedDB 的增删改查不导出。
 
 ```ts
 import {
   addEventSubscription,
   AbuilderEvents,
+  parseWorkspaceData,
   type WorkspaceData,
 } from "@arronqzy/react-view";
 
-const addSub = addEventSubscription(
-  AbuilderEvents.workspaceAdd,
-  async (workspace: WorkspaceData) => {
-    await saveToServer(workspace);
-  }
-);
-
 const syncSub = addEventSubscription(
   AbuilderEvents.workspaceSync,
-  async (workspace) => {
+  async (workspace: WorkspaceData) => {
     await saveToServer(workspace);
   }
 );
-
-addSub.unsubscribe();
 syncSub.unsubscribe();
 ```
 
-| 事件 | 常量 | 触发时机 |
+| 事件 | 常量 | 何时触发 |
 |------|------|----------|
-| `workspace:add` | `AbuilderEvents.workspaceAdd` | 创建工作区成功 |
-| `workspace:sync` | `AbuilderEvents.workspaceSync` | 同步工作区成功 |
+| `workspace:add` | `AbuilderEvents.workspaceAdd` | 创建成功 |
+| `workspace:sync` | `AbuilderEvents.workspaceSync` | 同步成功 |
+
+字段：`id`、`name`、`createdAt`、`updatedAt`、`panelState`、`blueprintDocument`、`blueprintMeta`、`productName`、`titleIconDataUrl`。
+
+校验：
 
-回调参数类型为 `WorkspaceData`（即 `WorkspaceProjectRecord`），字段包括：`id`、`name`、`createdAt`、`updatedAt`、`panelState`、`blueprintDocument`、`blueprintMeta`、`productName`、`titleIconDataUrl`。
+- `validateViewData` / `parseViewData` — 视图 `panelState`
+- `validateBlueprintData` / `parseBlueprintData` — 蓝图文档
+- `validateWorkspaceData` / `parseWorkspaceData` — 两边都要合法；`parse` 的 `value` 可作 `initialWorkspace`
+- `createEmptyWorkspace` / `createWorkspaceProjectId` — 空白记录和 ID
 
-### 获取预览快照
+## 预览缩略图
 
-在编辑器或在线预览页已挂载时，截取当前预览画面为 base64（data URL），可用于缩略图：
+编辑器或预览页已挂载且画布有内容时：
 
 ```ts
 import { getPreviewSnapshot } from "@arronqzy/react-view";
@@ -131,56 +137,38 @@ const dataUrl = await getPreviewSnapshot({
 });
 ```
 
-| 参数 | 说明 | 默认值 |
-|------|------|--------|
-| `maxWidth` / `maxHeight` | 等比缩放上限 | 不限制 |
-| `mimeType` | `"image/png"` 或 `"image/jpeg"` | `"image/png"` |
-| `quality` | JPEG 质量 0–1 | `0.92` |
+| 参数 | 说明 | 默认 |
+|------|------|------|
+| `maxWidth` / `maxHeight` | 等比上限 | 不限制 |
+| `mimeType` | png 或 jpeg | `"image/png"` |
+| `quality` | JPEG 0–1 | `0.92` |
 | `backgroundColor` | 背景色 | `"#ffffff"` |
 
-## 核心导出
+## 主要导出
 
 | 导出 | 说明 |
 |------|------|
-| `ReactViewPanel` | 主编辑面板（画布 + 配置侧栏 + 蓝图分屏） |
-| `ReactViewOnlinePreview` | 只读在线预览页 |
-| `parseOnlinePreviewSearchParams` | 解析预览 URL 参数 |
-| `addEventSubscription` | 订阅工作区事件，返回 `{ unsubscribe }` |
-| `AbuilderEvents` | 工作区事件名常量 |
-| `getPreviewSnapshot` | 获取预览画面 base64 缩略图（仅本包 / `@arronqzy/abuilder`） |
-| `parseWorkspaceData` / `validateWorkspaceData` | 解析或校验完整工作区；`parse` 的 `value` 可作 `initialWorkspace` |
-| `parseViewData` / `validateViewData` | 解析或校验视图 `panelState` |
-| `parseBlueprintData` / `validateBlueprintData` | 解析或校验蓝图文档 |
-| `createEmptyWorkspace` | 构造空工作区记录 |
-| `createWorkspaceProjectId` | 生成工作区 ID |
-| `WorkspaceData` / `WorkspaceProjectRecord` | 完整工作区数据类型 |
-| `createView` / `createAction` 等 | 视图 DSL 与指令扩展（`src/core`） |
-
-相关类型：`AbuilderEventName`、`AbuilderEventPayloadMap`、`WorkspaceAddEventPayload`、`WorkspaceSyncEventPayload`、`GetPreviewSnapshotOptions`。
-
-## 样式与 Tailwind
-
-本包内置 Tailwind 配置，构建产物为 `dist/styles.css`：
+| `ReactViewPanel` | 主面板（画布 + 配置 + 蓝图分屏） |
+| `ReactViewOnlinePreview` | 只读预览 |
+| `parseOnlinePreviewSearchParams` | 解析预览 URL |
+| `addEventSubscription` / `AbuilderEvents` | 工作区事件 |
+| `getPreviewSnapshot` | 预览截图 data URL |
+| `parseWorkspaceData` 等 | 校验 / 解析 / 空工作区 |
+| `createView` / `createAction` | 视图 DSL 扩展点（`src/core`） |
+
+## 样式
+
+产物是 `dist/styles.css`。本仓库构建：
 
 ```bash
 pnpm -C packages/react-view build:css
 ```
 
-若由应用侧 Tailwind 扫描源码，请将本包加入 `content`：
-
-```ts
-content: [
-  "./src/**/*.{ts,tsx}",
-  "./node_modules/@arronqzy/react-view/src/**/*.{ts,tsx}",
-]
-```
+若应用自己的 Tailwind 要扫描本包源码，把 `node_modules/@arronqzy/react-view/src/**/*.{ts,tsx}` 加进 `content`。
 
-## 依赖关系
+## 依赖
 
-- `@arronqzy/ui` — 基础 UI 组件
-- `@arronqzy/rx-store` — 画布状态与历史
-- `@arronqzy/react-blueprint` — 蓝图编辑与执行
-- `@arronqzy/blueprint-dsl` — 蓝图运行时
+`@arronqzy/ui`、`@arronqzy/rx-store`、`@arronqzy/react-blueprint`、`@arronqzy/blueprint-dsl`、`@arronqzy/view-table`、`@arronqzy/view-scene3d`。
 
 ## 许可证
 

package/src/index.ts

@@ -14,6 +14,8 @@ export type {
   AbuilderEventPayloadMap,
   WorkspaceAddEventPayload,
   WorkspaceSyncEventPayload,
+  ApiCollectionUploadStartEventPayload,
+  ApiCollectionUploadSuccessEventPayload,
   WorkspaceData,
 } from "./panel/library/event-subscription";
 export type { WorkspaceProjectRecord } from "./panel/library/workspace-project-db";

package/src/panel/ReactViewPanel.tsx

@@ -46,6 +46,7 @@ import { revealPanelConfigFromPatch } from "./ai/revealConfigField";
 import {
   BlueprintGraph,
   BlueprintMetaDialog,
+  ApiCollectionManagerDialog,
   BlueprintNodeSwitchTaskDialog,
   blueprintDocumentsEqual,
   buildBlueprintExportPayload,
@@ -55,6 +56,7 @@ import {
   downloadBlueprintExport,
   documentToRunnableGraph,
   getBlueprintLibraryRecord,
+  hydrateApiCollections,
   libraryRecordFromImport,
   listBlueprintLibrary,
   parseBlueprintImportFile,
@@ -72,12 +74,16 @@ import {
   type BlueprintMetaDraft,
 } from "@arronqzy/react-blueprint";
 import type { LibraryBlueprintResolver } from "@arronqzy/blueprint-dsl";
-import { abortClockNode, appStorageKey, collectArmedViewEventBindings, EVENT_NODE_TYPE, LIFECYCLE_NODE_TYPE } from "@arronqzy/blueprint-dsl";
+import { abortClockNode, appStorageKey, buildApiCollectionSyncPatches, toApiCollectionSyncResult, collectArmedViewEventBindings, EVENT_NODE_TYPE, LIFECYCLE_NODE_TYPE } from "@arronqzy/blueprint-dsl";
 import { WorkspaceStageSplit } from "./components/WorkspaceStageSplit";
 import {
   WorkspaceConfigSidebar,
   type WorkspaceConfigFocus,
 } from "./components/WorkspaceConfigSidebar";
+import {
+  AbuilderEvents,
+  emitAbuilderEvent,
+} from "./library/event-subscription";
 import {
   getViewElementScope,
   setViewElementScopes,
@@ -295,6 +301,7 @@ function ReactViewPanelInner({
   const [blueprintMetaDialogMode, setBlueprintMetaDialogMode] = useState<
     "export" | "save"
   >("save");
+  const [apiCollectionManagerOpen, setApiCollectionManagerOpen] = useState(false);
   const [selectedBlueprintNodeId, setSelectedBlueprintNodeId] = useState<string | null>(
     null
   );
@@ -655,6 +662,12 @@ function ReactViewPanelInner({
     [nameSpace]
   );
 
+  useEffect(() => {
+    void hydrateApiCollections(nameSpace).catch((error) => {
+      console.error("[abuilder] hydrate api collections failed", error);
+    });
+  }, [nameSpace]);
+
   const handleBlueprintExecutionBlocked = useCallback((message: string) => {
     toast({ title: message });
   }, []);
@@ -1904,6 +1917,7 @@ function ReactViewPanelInner({
           applyTheme={applyTheme}
           isDark={isDark}
           openBlueprintExportDialog={openBlueprintExportDialog}
+          openApiCollectionManager={() => setApiCollectionManagerOpen(true)}
           panelFontSize={panelFontSize}
           setPanelFontSize={setPanelFontSize}
           locale={locale}
@@ -2768,6 +2782,43 @@ function ReactViewPanelInner({
           void handleBlueprintMetaConfirm(meta);
         }}
       />
+      <ApiCollectionManagerDialog
+        open={apiCollectionManagerOpen}
+        onOpenChange={setApiCollectionManagerOpen}
+        onUploadStart={(info) => {
+          emitAbuilderEvent(AbuilderEvents.apiCollectionUploadStart, info);
+        }}
+        onUploadSuccess={(info) => {
+          emitAbuilderEvent(AbuilderEvents.apiCollectionUploadSuccess, info);
+        }}
+        onSyncCollection={(record) => {
+          const patches = buildApiCollectionSyncPatches({
+            collectionId: record.id,
+            document: record.document,
+            nodes: blueprintGraph.document.nodes
+              .filter((node) => node.role === "fetch" || Boolean(node.fetchConfig))
+              .map((node) => ({
+                id: node.id,
+                label: node.label,
+                fetchConfig: node.fetchConfig,
+              })),
+          });
+          if (patches.length === 0) {
+            return toApiCollectionSyncResult([]);
+          }
+          setBlueprintGraph((graph) => {
+            let next = graph;
+            for (const patch of patches) {
+              next = next.updateNode(patch.nodeId, {
+                fetchConfig:
+                  patch.fetchConfigPatch as import("@arronqzy/blueprint-dsl").FetchRequestConfig,
+              });
+            }
+            return next;
+          });
+          return toApiCollectionSyncResult(patches);
+        }}
+      />
       {pendingBlueprintNodeSwitch ? (
         <BlueprintNodeSwitchTaskDialog
           open

package/src/panel/components/PanelMenubar.tsx

@@ -34,6 +34,7 @@ export type PanelMenubarProps = {
   applyTheme: (dark: boolean) => void;
   isDark: boolean;
   openBlueprintExportDialog: () => void;
+  openApiCollectionManager: () => void;
   panelFontSize: "sm" | "md" | "lg";
   setPanelFontSize: (value: "sm" | "md" | "lg") => void;
   locale: Locale;
@@ -65,6 +66,7 @@ export function PanelMenubar({
   applyTheme,
   isDark,
   openBlueprintExportDialog,
+  openApiCollectionManager,
   panelFontSize,
   setPanelFontSize,
   locale,
@@ -121,6 +123,10 @@ export function PanelMenubar({
               <MenubarItem onClick={() => blueprintImportInputRef.current?.click()}>
                 {t("panel.menubar.import")}
               </MenubarItem>
+              <MenubarSeparator />
+              <MenubarItem onClick={openApiCollectionManager}>
+                {t("panel.menubar.apiCollections")}
+              </MenubarItem>
             </MenubarContent>
           </MenubarMenu>
           <MenubarMenu>

package/src/panel/components/scope-config/ScopeTemplateAutocompleteHost.tsx

@@ -73,17 +73,13 @@ export function ScopeTemplateAutocompleteHost({
 
   const refreshForInput = useCallback(
     (input: HTMLInputElement | HTMLTextAreaElement) => {
-      if (scope === undefined) {
-        closeDropdown();
-        return;
-      }
       const cursor = input.selectionStart ?? input.value.length;
-      const parsed = parseScopeAutocomplete(input.value, cursor, scope);
+      const parsed = parseScopeAutocomplete(input.value, cursor, scope ?? {});
       if (!parsed) {
         closeDropdown();
         return;
       }
-      const suggestions = getScopeAutocompleteSuggestions(scope, parsed);
+      const suggestions = getScopeAutocompleteSuggestions(scope ?? {}, parsed);
       if (suggestions.length === 0) {
         closeDropdown();
         return;
@@ -124,7 +120,7 @@ export function ScopeTemplateAutocompleteHost({
 
   useEffect(() => {
     const container = containerRef?.current;
-    if (!container || scope === undefined) return;
+    if (!container) return;
 
     const onFocusIn = (event: FocusEvent) => {
       if (!isAutocompleteTarget(event.target)) return;
@@ -213,7 +209,7 @@ export function ScopeTemplateAutocompleteHost({
     scope,
   ]);
 
-  if (!dropdown || scope === undefined) return null;
+  if (!dropdown) return null;
 
   return createPortal(
     <div

package/src/panel/components/scope-config/ScopeTemplateUsageHint.tsx

@@ -7,6 +7,7 @@ export function ScopeTemplateUsageHint() {
     <div className="space-y-2">
       <p>{t("panel.scope.usageHint1")}</p>
       <p>{t("panel.scope.usageHint2")}</p>
+      <p>{t("panel.scope.usageHintSystem")}</p>
     </div>
   );
 }

package/src/panel/library/event-subscription.ts

@@ -5,6 +5,10 @@ export const AbuilderEvents = {
   workspaceAdd: "workspace:add",
   /** 同步工作区 */
   workspaceSync: "workspace:sync",
+  /** 开始上传接口集合 */
+  apiCollectionUploadStart: "api-collection:upload-start",
+  /** 上传接口集合成功 */
+  apiCollectionUploadSuccess: "api-collection:upload-success",
 } as const;
 
 export type AbuilderEventName = (typeof AbuilderEvents)[keyof typeof AbuilderEvents];
@@ -15,9 +19,25 @@ export type WorkspaceData = WorkspaceProjectRecord;
 export type WorkspaceAddEventPayload = WorkspaceData;
 export type WorkspaceSyncEventPayload = WorkspaceData;
 
+export type ApiCollectionUploadStartEventPayload = {
+  fileNames: string[];
+  count: number;
+};
+
+export type ApiCollectionUploadSuccessEventPayload = {
+  collections: Array<{
+    id: string;
+    name: string;
+    apiCount: number;
+    persistLocal: boolean;
+  }>;
+};
+
 export type AbuilderEventPayloadMap = {
   [AbuilderEvents.workspaceAdd]: WorkspaceAddEventPayload;
   [AbuilderEvents.workspaceSync]: WorkspaceSyncEventPayload;
+  [AbuilderEvents.apiCollectionUploadStart]: ApiCollectionUploadStartEventPayload;
+  [AbuilderEvents.apiCollectionUploadSuccess]: ApiCollectionUploadSuccessEventPayload;
 };
 
 type EventCallback = (payload: unknown) => void;

package/src/panel/utils/scope-template.ts

@@ -1,6 +1,10 @@
 import type { PanelElement } from "../types";
 import type { PanelTableConfig } from "@arronqzy/view-table";
 import { isUsableTableRawData } from "@arronqzy/view-table";
+import {
+  createSystemRoot,
+  isDayjsValue,
+} from "@arronqzy/blueprint-dsl";
 import { materializeChartLabelsFromScope, materializeChartValuesFromScope } from "./scope-template-chart";
 import {
   SCOPE_SPREAD_TEMPLATE_RE,
@@ -11,12 +15,12 @@ import {
   resolveSpreadScopePath,
 } from "./scope-template-spread";
 
-const SCOPE_TOKEN_RE = /\{(scope[^}]*)\}/g;
+const TEMPLATE_TOKEN_RE = /\{((?:scope|system)[^}]*)\}/g;
 
 export function hasScopeTemplate(value: string): boolean {
-  SCOPE_TOKEN_RE.lastIndex = 0;
+  TEMPLATE_TOKEN_RE.lastIndex = 0;
   SCOPE_SPREAD_TEMPLATE_RE.lastIndex = 0;
-  return SCOPE_TOKEN_RE.test(value) || SCOPE_SPREAD_TEMPLATE_RE.test(value);
+  return TEMPLATE_TOKEN_RE.test(value) || SCOPE_SPREAD_TEMPLATE_RE.test(value);
 }
 
 export function evaluateScopeExpression(
@@ -26,8 +30,13 @@ export function evaluateScopeExpression(
   const trimmed = expression.trim();
   if (!trimmed) return undefined;
   try {
-    const fn = new Function("scope", `"use strict"; return (${trimmed});`);
-    return fn(scope);
+    const system = createSystemRoot();
+    const fn = new Function(
+      "scope",
+      "system",
+      `"use strict"; return (${trimmed});`
+    );
+    return fn(scope, system);
   } catch {
     return undefined;
   }
@@ -39,6 +48,9 @@ function stringifyScopeValue(value: unknown): string {
   if (typeof value === "number" || typeof value === "boolean") {
     return String(value);
   }
+  if (isDayjsValue(value)) {
+    return value.toISOString();
+  }
   try {
     return JSON.stringify(value);
   } catch {
@@ -60,8 +72,8 @@ export function evaluateScopeTemplate(
     }
   );
 
-  // Only `{scope...}` tokens — keep ECharts / CSS braces like `{b}` intact.
-  return withSpread.replace(SCOPE_TOKEN_RE, (_: string, rawExpr: string) =>
+  // Only `{scope...}` / `{system...}` — keep ECharts / CSS braces like `{b}` intact.
+  return withSpread.replace(TEMPLATE_TOKEN_RE, (_: string, rawExpr: string) =>
     stringifyScopeValue(evaluateScopeExpression(rawExpr, scope))
   );
 }
@@ -91,7 +103,7 @@ function materializeTemplateValue(template: string, scope: unknown): unknown {
     );
   }
 
-  const singleMatch = /^\{(scope[^}]*)\}$/.exec(trimmed);
+  const singleMatch = /^\{((?:scope|system)[^}]*)\}$/.exec(trimmed);
   if (singleMatch) {
     return evaluateScopeExpression(singleMatch[1]!, scope);
   }