@arronqzy/react-view 1.0.3 → 1.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arronqzy/react-view",
-  "version": "1.0.3",
+  "version": "1.0.7",
   "files": [
     "src",
     "dist",
@@ -15,8 +15,8 @@
   },
   "dependencies": {
     "@scena/react-ruler": "^0.19.0",
+    "@tanstack/react-virtual": "^3.13.2",
     "react-infinite-viewer": "^0.28.1",
-    "react-zoom-pan-pinch": "^4.0.3",
     "react-moveable": "^0.56.0",
     "react-selecto": "^1.26.3",
     "rxjs": "^7.8.2",
@@ -26,10 +26,17 @@
     "infinite-viewer": "^0.29.1",
     "echarts": "^6.0.0",
     "uuid": "^13.0.0",
-    "@arronqzy/ui": "1.0.0",
-    "@arronqzy/blueprint-dsl": "1.0.1",
-    "@arronqzy/react-blueprint": "1.0.1",
-    "@arronqzy/rx-store": "1.0.1"
+    "@uiw/react-codemirror": "^4.23.8",
+    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/theme-one-dark": "^6.1.2",
+    "@codemirror/view": "^6.36.2",
+    "@arronqzy/ui": "1.0.3",
+    "@arronqzy/blueprint-dsl": "1.0.3",
+    "@arronqzy/i18n": "0.1.1",
+    "@arronqzy/rx-store": "1.0.2",
+    "@arronqzy/webllm-assistant": "0.1.1",
+    "@arronqzy/react-blueprint": "1.0.4",
+    "@arronqzy/view-table": "0.1.1"
   },
   "devDependencies": {
     "@types/react": "^19.0.1",
@@ -39,7 +46,7 @@
     "typescript": "^5.5.4",
     "@arronqzy/eslint-config": "0.0.0",
     "@arronqzy/typescript-config": "1.0.0",
-    "@arronqzy/tailwind": "1.0.1"
+    "@arronqzy/tailwind": "1.0.2"
   },
   "scripts": {
     "lint": "eslint \"src/**/*.{ts,tsx}\"",

package/readme.md

@@ -1,17 +1,75 @@
 # @arronqzy/react-view
 
-## Tailwind 使用方式
+Abuilder 的**视图编辑器** React 包，提供可视化画布、图层、物料、在线预览与工作区管理能力。
 
-本包内已内置 Tailwind 配置，并提供可直接引入的样式产物：
+## 功能概览
 
-- 生成样式：`pnpm -C packages/react-view build:css`
-- 使用样式：在你的应用入口中引入
+- **无限画布**：平移、缩放、标尺、框选与 Moveable 拖拽/缩放/旋转
+- **图层系统**：多图层、映射图层、主图层、锁定与合并
+- **物料节点**：图表（ECharts）、文本、图片、音视频、几何、网格、引用节点等
+- **Scope 模版**：节点属性支持 `{scope.xxx}` 表达式与解析预览
+- **工作区**：IndexedDB 持久化、多项目切换、同步与在线预览
+- **蓝图联动**：与 `@arronqzy/react-blueprint` 分屏编辑，运行时 Scope 回写视图
+
+## 安装
+
+```bash
+pnpm add @arronqzy/react-view
+```
+
+依赖 React 19，并需引入样式：
 
 ```ts
 import "@arronqzy/react-view/styles.css";
 ```
 
-如果你希望由应用侧的 Tailwind 来扫描本包源码（不引入上面的 `styles.css`），请把本包路径加入应用的 `content` 配置，例如：
+## 使用
+
+### 完整编辑器面板
+
+```tsx
+import { ReactViewPanel } from "@arronqzy/react-view";
+import "@arronqzy/react-view/styles.css";
+
+export function Editor() {
+  return <ReactViewPanel className="h-screen" initialZoom={1} />;
+}
+```
+
+### 在线预览
+
+```tsx
+import { ReactViewOnlinePreview } from "@arronqzy/react-view";
+
+<ReactViewOnlinePreview projectId="your-project-id" />
+```
+
+URL 参数解析：
+
+```ts
+import { parseOnlinePreviewSearchParams } from "@arronqzy/react-view";
+
+const params = parseOnlinePreviewSearchParams("?preview=online&projectId=xxx");
+```
+
+## 核心导出
+
+| 导出 | 说明 |
+|------|------|
+| `ReactViewPanel` | 主编辑面板（画布 + 配置侧栏 + 蓝图分屏） |
+| `ReactViewOnlinePreview` | 只读在线预览页 |
+| `parseOnlinePreviewSearchParams` | 解析预览 URL 参数 |
+| `createView` / `createAction` 等 | 视图 DSL 与指令扩展（`src/core`） |
+
+## 样式与 Tailwind
+
+本包内置 Tailwind 配置，构建产物为 `dist/styles.css`：
+
+```bash
+pnpm -C packages/react-view build:css
+```
+
+若由应用侧 Tailwind 扫描源码，请将本包加入 `content`：
 
 ```ts
 content: [
@@ -19,3 +77,14 @@ content: [
   "./node_modules/@arronqzy/react-view/src/**/*.{ts,tsx}",
 ]
 ```
+
+## 依赖关系
+
+- `@arronqzy/ui` — 基础 UI 组件
+- `@arronqzy/rx-store` — 画布状态与历史
+- `@arronqzy/react-blueprint` — 蓝图编辑与执行
+- `@arronqzy/blueprint-dsl` — 蓝图运行时
+
+## 许可证
+
+MIT

package/src/core/template.tsx

@@ -1,6 +1,16 @@
-import { JSX, useRef } from "react";
+import { JSX } from "react";
 import { instructions } from "./instructions";
 
+function isDevMode(): boolean {
+  try {
+    return Boolean(
+      (import.meta as { env?: { DEV?: boolean } }).env?.DEV
+    );
+  } catch {
+    return false;
+  }
+}
+
 /**
  * 事件需要补齐
  * @param props
@@ -15,7 +25,7 @@ export const Template = (
     if (props?.id) {
       instructions.execute(props.id + "click", { e });
     } else {
-      if (import.meta.env.DEV) {
+      if (isDevMode()) {
         console.warn("Template 缺少 id,无法触发事件");
       }
     }

package/src/panel/ReactViewOnlinePreview.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { useI18n } from "@arronqzy/i18n/react";
 import {
   BlueprintGraph,
   documentToRunnableGraph,
@@ -10,6 +11,7 @@ import {
 import type { LibraryBlueprintResolver, PageLifecyclePhase } from "@arronqzy/blueprint-dsl";
 import type { State } from "@arronqzy/rx-store";
 import { ElementsLayer } from "./components/ElementsLayer";
+import type { TableCellActionHandler } from "./components/table/TableNodeContent";
 import type { PanelElement } from "./types";
 import {
   clearViewElementScopes,
@@ -63,6 +65,8 @@ export function ReactViewOnlinePreview({
   projectId,
   previewInstanceId,
 }: ReactViewOnlinePreviewProps) {
+  const { t } = useI18n();
+
   const [loadError, setLoadError] = useState<string | null>(null);
   const [panelState, setPanelState] = useState<State | null>(null);
   const [projectRevision, setProjectRevision] = useState(0);
@@ -91,14 +95,14 @@ export function ReactViewOnlinePreview({
   const loadProject = useCallback(async () => {
     const record = await loadWorkspaceRecord(projectId);
     if (!record) {
-      setLoadError("工作区不存在或已被删除");
+      setLoadError(t("panel.messages.workspaceNotFound"));
       setPanelState(null);
       return;
     }
 
     const normalized = normalizeImportedPanelState(record.panelState);
     if (!normalized) {
-      setLoadError("工作区数据格式无效");
+      setLoadError(t("panel.messages.workspaceDataInvalid"));
       setPanelState(null);
       return;
     }
@@ -107,7 +111,7 @@ export function ReactViewOnlinePreview({
     clearViewElementScopes();
     setPanelState(normalized);
     setBlueprintGraph(BlueprintGraph.fromDocument(record.blueprintDocument));
-    document.title = record.productName.trim() || record.name || "预览";
+    document.title = record.productName.trim() || record.name || t("panel.workspace.previewDocTitle");
     applyTitleIcon(record.titleIconDataUrl);
     setProjectRevision((v) => v + 1);
   }, [projectId]);
@@ -228,7 +232,7 @@ export function ReactViewOnlinePreview({
   const lifecycleReady =
     !!panelState && layerElements.length > 0 && layoutReady;
 
-  useBlueprintPageLifecycle({
+  const { triggerBlueprintNode } = useBlueprintPageLifecycle({
     graph: blueprintGraph,
     active: true,
     enabled: lifecycleReady,
@@ -249,7 +253,12 @@ export function ReactViewOnlinePreview({
 
   const noopUpdate = useCallback((_id: string, _patch: Partial<PanelElement>) => {}, []);
   const noopSelect = useCallback((_ids: string[]) => {}, []);
-
+  const onTableCellAction = useCallback<TableCellActionHandler>(
+    (payload) => {
+      void triggerBlueprintNode(payload.blueprintNodeId, payload);
+    },
+    [triggerBlueprintNode]
+  );
   if (loadError) {
     return (
       <div className="flex min-h-[100vh] w-full items-center justify-center bg-white px-6 text-center text-sm text-gray-600">
@@ -261,7 +270,7 @@ export function ReactViewOnlinePreview({
   if (!panelState) {
     return (
       <div className="flex min-h-[100vh] w-full items-center justify-center bg-white text-sm text-gray-600">
-        加载预览中…
+        {t("panel.workspace.previewLoading")}
       </div>
     );
   }
@@ -269,9 +278,9 @@ export function ReactViewOnlinePreview({
   if (layerElements.length === 0) {
     return (
       <div className="flex min-h-[100vh] w-full flex-col items-center justify-center gap-2 bg-white px-6 text-center text-sm text-gray-600">
-        <div>当前工作区没有可预览的视图节点</div>
+        <div>{t("panel.workspace.previewNoNodes")}</div>
         <div className="text-xs text-gray-400">
-          请先在编辑器中点击「同步」或「创建工作区」后再预览
+          {t("panel.workspace.previewHint")}
         </div>
       </div>
     );
@@ -309,6 +318,7 @@ export function ReactViewOnlinePreview({
             layerLocked
             previewMode
             previewLayoutKey={layoutRevision}
+            onTableCellAction={onTableCellAction}
           />
         </div>
       </div>