@arronqzy/react-view 1.0.13 → 1.0.15

package/src/panel/components/PanelConfigSidebar.tsx

@@ -37,10 +37,10 @@ import { collectElementScopeWarnings } from "../utils/scope-template-warnings";
 import { ScopeConfigProvider } from "./scope-config/ScopeConfigContext";
 import { ScopeTemplateWarningsPanel } from "./scope-config/ScopeTemplateWarningsPanel";
 import { PanelConfigTableSection } from "./table/PanelConfigTableSection";
-import {
-  highlightConfigField,
-  subscribeRevealPanelConfig,
-} from "../ai/revealConfigField";
+import { cssTextLineHeight, cssTextAlignStyle } from "../utils/panelElementDefaults";
+import { highlightConfigField, subscribeRevealPanelConfig } from "../ai/revealConfigField";
+import { PanelConfigScene3dSection } from "./config/PanelConfigScene3dSection";
+import { readFileAsDataUrl, runBusyTask } from "../utils/async-work";
 
 type UpdateElement = (
   id: string,
@@ -262,31 +262,34 @@ export function PanelConfigSidebar({
   const handleUploadBackgroundImage = useCallback(
     async (file: File) => {
       if (!selectedElement) return;
-      const base64 = await new Promise<string>((resolve, reject) => {
-        const reader = new FileReader();
-        reader.onload = () => resolve(String(reader.result ?? ""));
-        reader.onerror = () => reject(new Error(messages.readImageFailed));
-        reader.readAsDataURL(file);
-      });
-      updateSelectedStyle({
-        backgroundImage: `url("${base64}")`,
-      });
-      setUploadStatus(t("panel.config.uploadWrittenBase64"));
       try {
-        const form = new FormData();
-        form.append("file", file);
-        const resp = await fetch("/api/upload", { method: "POST", body: form });
-        if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
-        const data = (await resp.json()) as { url?: string };
-        if (data.url) {
-          updateSelectedStyle({ backgroundImageRemoteUrl: data.url });
-          setUploadStatus(t("panel.config.uploadServerAndBase64"));
-        }
-      } catch {
-        setUploadStatus(t("panel.config.uploadServerFailedKeepBase64"));
+        await runBusyTask(t("common.uploadingFile"), async () => {
+          const base64 = await readFileAsDataUrl(file, messages.readImageFailed, "image");
+          updateSelectedStyle({
+            backgroundImage: `url("${base64}")`,
+          });
+          setUploadStatus(t("panel.config.uploadWrittenBase64"));
+          try {
+            const form = new FormData();
+            form.append("file", file);
+            const resp = await fetch("/api/upload", { method: "POST", body: form });
+            if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
+            const data = (await resp.json()) as { url?: string };
+            if (data.url) {
+              updateSelectedStyle({ backgroundImageRemoteUrl: data.url });
+              setUploadStatus(t("panel.config.uploadServerAndBase64"));
+            }
+          } catch {
+            setUploadStatus(t("panel.config.uploadServerFailedKeepBase64"));
+          }
+        });
+      } catch (error) {
+        setUploadStatus(
+          error instanceof Error ? error.message : messages.readImageFailed
+        );
       }
     },
-    [selectedElement, updateSelectedStyle]
+    [messages.readImageFailed, selectedElement, t, updateSelectedStyle]
   );
   const updateSelectedAudio = useCallback(
     (patch: Partial<PanelElement>) => {
@@ -298,43 +301,47 @@ export function PanelConfigSidebar({
   const handleUploadAudioFile = useCallback(
     async (file: File) => {
       if (!selectedElement || selectedElement.materialType !== "audio") return;
-      const base64 = await new Promise<string>((resolve, reject) => {
-        const reader = new FileReader();
-        reader.onload = () => resolve(String(reader.result ?? ""));
-        reader.onerror = () => reject(new Error(messages.readAudioFailed));
-        reader.readAsDataURL(file);
-      });
-      updateSelectedAudio({ audioSrc: base64 });
-      setAudioStatus(messages.audioLocalSaved);
       try {
-        const form = new FormData();
-        form.append("file", file);
-        const resp = await fetch("/api/upload", { method: "POST", body: form });
-        if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
-        const data = (await resp.json()) as { url?: string };
-        if (data.url) {
-          updateSelectedAudio({ audioRemoteUrl: data.url });
-          setAudioStatus(messages.audioRemoteUploaded);
-        }
-      } catch {
-        setAudioStatus(messages.audioServerUploadFailed);
+        await runBusyTask(t("common.uploadingFile"), async () => {
+          const base64 = await readFileAsDataUrl(file, messages.readAudioFailed, "audio");
+          updateSelectedAudio({ audioSrc: base64 });
+          setAudioStatus(messages.audioLocalSaved);
+          try {
+            const form = new FormData();
+            form.append("file", file);
+            const resp = await fetch("/api/upload", { method: "POST", body: form });
+            if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
+            const data = (await resp.json()) as { url?: string };
+            if (data.url) {
+              updateSelectedAudio({ audioRemoteUrl: data.url });
+              setAudioStatus(messages.audioRemoteUploaded);
+            }
+          } catch {
+            setAudioStatus(messages.audioServerUploadFailed);
+          }
+        });
+      } catch (error) {
+        setAudioStatus(
+          error instanceof Error ? error.message : messages.readAudioFailed
+        );
       }
     },
-    [selectedElement, updateSelectedAudio]
+    [messages, selectedElement, t, updateSelectedAudio]
   );
   const handleUploadAudioPoster = useCallback(
     async (file: File) => {
       if (!selectedElement || selectedElement.materialType !== "audio") return;
-      const base64 = await new Promise<string>((resolve, reject) => {
-        const reader = new FileReader();
-        reader.onload = () => resolve(String(reader.result ?? ""));
-        reader.onerror = () => reject(new Error(messages.readImageFailed));
-        reader.readAsDataURL(file);
-      });
-      updateSelectedAudio({ audioPosterImage: base64 });
-      setAudioStatus(messages.audioPosterSet);
+      try {
+        const base64 = await readFileAsDataUrl(file, messages.readImageFailed, "image");
+        updateSelectedAudio({ audioPosterImage: base64 });
+        setAudioStatus(messages.audioPosterSet);
+      } catch (error) {
+        setAudioStatus(
+          error instanceof Error ? error.message : messages.readImageFailed
+        );
+      }
     },
-    [selectedElement, updateSelectedAudio]
+    [messages, selectedElement, updateSelectedAudio]
   );
   const stopRecordingAudio = useCallback(() => {
     recorderRef.current?.stop();
@@ -356,14 +363,15 @@ export function PanelConfigSidebar({
       };
       recorder.onstop = async () => {
         const blob = new Blob(audioChunksRef.current, { type: recorder.mimeType || "audio/webm" });
-        const dataUrl = await new Promise<string>((resolve, reject) => {
-          const reader = new FileReader();
-          reader.onload = () => resolve(String(reader.result ?? ""));
-          reader.onerror = () => reject(new Error(messages.readRecordAudioFailed));
-          reader.readAsDataURL(blob);
-        });
-        updateSelectedAudio({ audioSrc: dataUrl });
-        setAudioStatus(messages.audioRecordSaved);
+        try {
+          const dataUrl = await readFileAsDataUrl(blob, messages.readRecordAudioFailed, "audio");
+          updateSelectedAudio({ audioSrc: dataUrl });
+          setAudioStatus(messages.audioRecordSaved);
+        } catch (error) {
+          setAudioStatus(
+            error instanceof Error ? error.message : messages.readRecordAudioFailed
+          );
+        }
         recordStreamRef.current?.getTracks().forEach((track) => track.stop());
         recordStreamRef.current = null;
         recorderRef.current = null;
@@ -387,29 +395,32 @@ export function PanelConfigSidebar({
   const handleUploadVideoFile = useCallback(
     async (file: File) => {
       if (!selectedElement || selectedElement.materialType !== "video") return;
-      const base64 = await new Promise<string>((resolve, reject) => {
-        const reader = new FileReader();
-        reader.onload = () => resolve(String(reader.result ?? ""));
-        reader.onerror = () => reject(new Error(messages.readVideoFailed));
-        reader.readAsDataURL(file);
-      });
-      updateSelectedVideo({ videoSrc: base64 });
-      setVideoStatus(messages.videoLocalSaved);
       try {
-        const form = new FormData();
-        form.append("file", file);
-        const resp = await fetch("/api/upload", { method: "POST", body: form });
-        if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
-        const data = (await resp.json()) as { url?: string };
-        if (data.url) {
-          updateSelectedVideo({ videoRemoteUrl: data.url });
-          setVideoStatus(messages.videoRemoteUploaded);
-        }
-      } catch {
-        setVideoStatus(messages.videoServerUploadFailed);
+        await runBusyTask(t("common.uploadingFile"), async () => {
+          const base64 = await readFileAsDataUrl(file, messages.readVideoFailed, "video");
+          updateSelectedVideo({ videoSrc: base64 });
+          setVideoStatus(messages.videoLocalSaved);
+          try {
+            const form = new FormData();
+            form.append("file", file);
+            const resp = await fetch("/api/upload", { method: "POST", body: form });
+            if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
+            const data = (await resp.json()) as { url?: string };
+            if (data.url) {
+              updateSelectedVideo({ videoRemoteUrl: data.url });
+              setVideoStatus(messages.videoRemoteUploaded);
+            }
+          } catch {
+            setVideoStatus(messages.videoServerUploadFailed);
+          }
+        });
+      } catch (error) {
+        setVideoStatus(
+          error instanceof Error ? error.message : messages.readVideoFailed
+        );
       }
     },
-    [selectedElement, updateSelectedVideo]
+    [messages, selectedElement, t, updateSelectedVideo]
   );
 
   const isSectionExpanded = (key: string, defaultValue = true) =>
@@ -2848,7 +2859,8 @@ export function PanelConfigSidebar({
                     <div
                       ref={textEditorRef}
                       data-config-field="textHtml"
-                      className="min-h-[120px] rounded border border-border bg-background px-2 py-1.5 text-xs leading-6 outline-none"
+                      data-panel-user-text=""
+                      className="min-h-[120px] rounded border border-border bg-background px-2 py-1.5 leading-6 outline-none"
                       style={{
                         fontFamily: selectedElement.textFontFamily || undefined,
                         fontSize: selectedElement.textFontSize
@@ -2856,10 +2868,8 @@ export function PanelConfigSidebar({
                           : undefined,
                         fontWeight: selectedElement.textFontWeight || undefined,
                         color: selectedElement.textColor || undefined,
-                        lineHeight: selectedElement.textLineHeight
-                          ? String(selectedElement.textLineHeight)
-                          : undefined,
-                        textAlign: selectedElement.textAlign ?? "left",
+                        lineHeight: cssTextLineHeight(selectedElement.textLineHeight),
+                        ...cssTextAlignStyle(selectedElement.textAlign),
                       }}
                       contentEditable
                       suppressContentEditableWarning
@@ -2935,7 +2945,7 @@ export function PanelConfigSidebar({
                           value={selectedElement.textAlign ?? "left"}
                           onValueChange={(value) =>
                             updateSelectedText({
-                              textAlign: value as "left" | "center" | "right" | "justify",
+                              textAlign: value as PanelElement["textAlign"],
                             })
                           }
                         >
@@ -2945,19 +2955,40 @@ export function PanelConfigSidebar({
                           <SelectContent>
                             <SelectItem value="left">{t("panel.config.alignLeft")}</SelectItem>
                             <SelectItem value="center">{t("panel.config.alignCenter")}</SelectItem>
+                            <SelectItem value="middle">{t("panel.config.alignMiddle")}</SelectItem>
                             <SelectItem value="right">{t("panel.config.alignRight")}</SelectItem>
                             <SelectItem value="justify">{t("panel.config.alignJustify")}</SelectItem>
                           </SelectContent>
                         </Select>
                       </label>
                       <label className="block space-y-1">
-                        <div>{t("panel.config.lineHeight")}</div>
+                        <div className="flex items-center justify-between gap-2">
+                          <span>{t("panel.config.lineHeight")}</span>
+                          <label className="flex items-center gap-1 font-normal">
+                            <Checkbox
+                              checked={selectedElement.textLineHeight === "auto"}
+                              className="h-3.5 w-3.5 border-2 border-foreground/80 bg-background ring-1 ring-foreground/40 data-[state=checked]:border-primary data-[state=checked]:ring-primary/40"
+                              onCheckedChange={(checked) =>
+                                updateSelectedText({
+                                  textLineHeight: checked === true ? "auto" : 1.6,
+                                })
+                              }
+                            />
+                            <span>{t("panel.config.lineHeightAuto")}</span>
+                          </label>
+                        </div>
                         <Input
                           type="number"
                           min={1}
                           max={3}
                           step={0.1}
-                          value={selectedElement.textLineHeight ?? 1.6}
+                          disabled={selectedElement.textLineHeight === "auto"}
+                          placeholder={t("panel.config.lineHeightAuto")}
+                          value={
+                            selectedElement.textLineHeight === "auto"
+                              ? ""
+                              : (selectedElement.textLineHeight ?? 1.6)
+                          }
                           onChange={(e) =>
                             updateSelectedText({
                               textLineHeight: Math.min(
@@ -3459,6 +3490,24 @@ export function PanelConfigSidebar({
               true,
               [t("panel.material.geometry"), "geometry", t("panel.config.shape"), "canvas", t("panel.config.searchKwScript"), t("panel.config.searchKwSketch")]
             )
+          ) : selectedElement.materialType === "scene3d" ? (
+            renderSection(
+              "scene3dConfig",
+              t("panel.config.sectionScene3d"),
+              <PanelConfigScene3dSection
+                element={selectedElement}
+                updateElement={updateElement}
+              />,
+              true,
+              [
+                t("panel.material.scene3d"),
+                "3d",
+                "glb",
+                t("panel.config.scene3dUploadModels"),
+                t("panel.config.groupScene3dCamera"),
+                t("panel.config.groupScene3dModelAnim"),
+              ]
+            )
           ) : selectedElement.materialType === "grid" ? (
             renderSection(
               "gridConfig",

package/src/panel/components/SelectLayer.tsx

@@ -67,6 +67,7 @@ export function SelectLayer({
         // 只允许左键触发框选，右键不参与选区变更
         if (input && input.button !== 0) return false;
         const target = (input?.target as HTMLElement | null) ?? null;
+        if (target?.closest("[data-scene3d-orbit-active='true']")) return false;
         const isShift = !!input?.shiftKey;
         if (isShift) return true;
 
@@ -95,6 +96,10 @@ export function SelectLayer({
         }
         // 已有多选时，默认应该是拖动移动；只有按住 shift 才继续框选/追加
         const target = e.inputEvent.target as HTMLElement | null;
+        if (target?.closest("[data-scene3d-orbit-active='true']")) {
+          e.stop();
+          return;
+        }
         const selectable = target?.closest(".rv-selectable") as HTMLElement | null;
         const id = selectable?.dataset.elementId;
         const isShift = (e.inputEvent as MouseEvent | undefined)?.shiftKey ?? false;

package/src/panel/components/WorkspaceConfigSidebar.tsx

@@ -64,6 +64,7 @@ export type WorkspaceConfigSidebarProps = Omit<
         | "jsonConfig"
         | "logicConfig"
         | "clockConfig"
+        | "eventConfig"
       >
     >
   ) => void;

package/src/panel/components/WorkspaceProjectNav.tsx

@@ -35,6 +35,7 @@ export type WorkspaceProjectNavProps = {
   activeProjectId: string | null;
   activeProjectName: string | null;
   dirty: boolean;
+  previewingProjectIds?: string[];
   onCreateProject: () => Promise<{ name: string; id: string } | void>;
   onOpenProject: (id: string) => Promise<void>;
   onSyncProject: () => Promise<string | void>;
@@ -47,6 +48,7 @@ export function WorkspaceProjectNav({
   activeProjectId,
   activeProjectName,
   dirty,
+  previewingProjectIds = [],
   onCreateProject,
   onOpenProject,
   onSyncProject,
@@ -136,14 +138,22 @@ export function WorkspaceProjectNav({
               {projects.length === 0 ? (
                 <DropdownMenuItem disabled>{t("panel.workspace.noSavedWorkspaces")}</DropdownMenuItem>
               ) : (
-                projects.map((project) => (
+                projects.map((project) => {
+                  const isCurrent = activeProjectId === project.id;
+                  const isPreviewing = previewingProjectIds.includes(project.id);
+                  return (
                   <div key={project.id} className="px-1 py-0.5">
                     <div className="flex items-center gap-1">
                       <button
                         type="button"
                         className={[
                           "min-w-0 flex-1 rounded px-2 py-1.5 text-left text-xs hover:bg-accent",
-                          activeProjectId === project.id ? "bg-accent/60 font-medium" : "",
+                          isCurrent
+                            ? "bg-primary/15 font-medium text-primary ring-1 ring-inset ring-primary/40"
+                            : "",
+                          !isCurrent && isPreviewing
+                            ? "bg-sky-500/10 ring-1 ring-inset ring-sky-400/50"
+                            : "",
                         ].join(" ")}
                         onClick={() =>
                           void runAction(async () => {
@@ -151,7 +161,19 @@ export function WorkspaceProjectNav({
                           })
                         }
                       >
-                        <div className="truncate">{project.name}</div>
+                        <div className="flex items-center gap-1">
+                          <div className="min-w-0 flex-1 truncate">{project.name}</div>
+                          {isCurrent ? (
+                            <span className="shrink-0 rounded bg-primary px-1 py-px text-[9px] leading-none text-primary-foreground">
+                              {t("panel.workspace.currentBadge")}
+                            </span>
+                          ) : null}
+                          {isPreviewing ? (
+                            <span className="shrink-0 rounded bg-sky-600 px-1 py-px text-[9px] leading-none text-white">
+                              {t("panel.workspace.previewingBadge")}
+                            </span>
+                          ) : null}
+                        </div>
                         <div className="truncate text-[10px] text-muted-foreground">
                           {formatUpdatedAt(project.updatedAt)}
                         </div>
@@ -182,7 +204,8 @@ export function WorkspaceProjectNav({
                       </Button>
                     </div>
                   </div>
-                ))
+                  );
+                })
               )}
               {/* <DropdownMenuSeparator />
               <DropdownMenuItem onClick={() => void runAction(onCreateProject)}>