@arronqzy/vue-view 0.1.6 → 0.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/package.json +8 -7
  2. package/src/panel/VueViewOnlinePreview.vue +28 -2
  3. package/src/panel/VueViewPanel.vue +120 -66
  4. package/src/panel/components/BusyOverlay.vue +24 -0
  5. package/src/panel/components/ConfigHintIcon.vue +10 -10
  6. package/src/panel/components/ElementsLayer.vue +51 -8
  7. package/src/panel/components/MaterialPreview.vue +8 -0
  8. package/src/panel/components/PanelConfigSidebar.vue +11 -0
  9. package/src/panel/components/WorkspaceConfigSidebar.vue +1 -0
  10. package/src/panel/components/WorkspaceProjectNav.vue +36 -8
  11. package/src/panel/components/config/ConfigColorField.vue +33 -9
  12. package/src/panel/components/config/PanelConfigAudioSection.vue +32 -18
  13. package/src/panel/components/config/PanelConfigImageSection.vue +13 -9
  14. package/src/panel/components/config/PanelConfigScene3dSection.vue +505 -0
  15. package/src/panel/components/config/PanelConfigStyleSections.vue +13 -9
  16. package/src/panel/components/config/PanelConfigTextSection.vue +20 -6
  17. package/src/panel/components/config/PanelConfigVideoSection.vue +13 -9
  18. package/src/panel/components/config/shared.ts +16 -21
  19. package/src/panel/components/elementsLayerNodes.ts +64 -59
  20. package/src/panel/components/materialSidebarData.ts +2 -0
  21. package/src/panel/components/scope-config/ScopeTemplateAutocompleteHost.vue +1 -1
  22. package/src/panel/components/table/PanelConfigTableSection.vue +39 -25
  23. package/src/panel/components/table/TableNodeContent.vue +36 -15
  24. package/src/panel/hooks/usePanelElements.ts +13 -1
  25. package/src/panel/hooks/useWorkspaceProjects.ts +128 -57
  26. package/src/panel/library/workspace-project-cache.ts +7 -2
  27. package/src/panel/library/workspace-project-db.ts +29 -11
  28. package/src/panel/library/workspace-snapshot.ts +21 -4
  29. package/src/panel/scope/view-scope-store.ts +8 -0
  30. package/src/panel/types.ts +4 -2
  31. package/src/panel/utils/async-work.ts +153 -0
  32. package/src/panel/utils/gridPlacement.ts +29 -0
  33. package/src/panel/utils/panelElementDefaults.ts +37 -1
  34. package/src/panel/utils/scope-autocomplete.ts +0 -114
@@ -187,3 +187,32 @@ export function computeSnapPatchForNewElementOnLayer(
187
187
  height: nearest.height,
188
188
  };
189
189
  }
190
+
191
+ function isGridAncestorOf(
192
+ ancestorId: string,
193
+ el: PanelElement,
194
+ byId: Map<string, PanelElement>
195
+ ): boolean {
196
+ let current: PanelElement | undefined = el;
197
+ const seen = new Set<string>();
198
+ while (current?.parentGridId && !seen.has(current.id)) {
199
+ if (current.parentGridId === ancestorId) return true;
200
+ seen.add(current.id);
201
+ current = byId.get(current.parentGridId);
202
+ }
203
+ return false;
204
+ }
205
+
206
+ /** 父网格先于格子内子节点绘制,避免网格占位层盖住内容 */
207
+ export function comparePanelElementsPaintOrder(
208
+ a: PanelElement,
209
+ b: PanelElement,
210
+ byId: Map<string, PanelElement>
211
+ ): number {
212
+ if (isGridAncestorOf(a.id, b, byId)) return -1;
213
+ if (isGridAncestorOf(b.id, a, byId)) return 1;
214
+ const za = a.zIndex ?? 1;
215
+ const zb = b.zIndex ?? 1;
216
+ if (za !== zb) return za - zb;
217
+ return a.id.localeCompare(b.id);
218
+ }
@@ -1,7 +1,8 @@
1
1
  import type { TranslateFn } from "@arronqzy/i18n";
2
2
  import { tForLocale } from "@arronqzy/i18n";
3
3
  import { createDefaultTableConfig, type PanelTableConfig } from "@arronqzy/view-table";
4
- import type { PanelChartConfig, PanelLayer } from "../types";
4
+ import { createDefaultScene3dConfig } from "@arronqzy/view-scene3d";
5
+ import type { PanelChartConfig, PanelLayer, PanelElement } from "../types";
5
6
 
6
7
  const DEFAULT_NODE_NAME_KEYS: Record<string, string> = {
7
8
  bar: "panel.defaults.bar",
@@ -19,6 +20,7 @@ const DEFAULT_NODE_NAME_KEYS: Record<string, string> = {
19
20
  audio: "panel.defaults.audio",
20
21
  reference: "panel.defaults.reference",
21
22
  geometry: "panel.defaults.geometry",
23
+ scene3d: "panel.defaults.scene3d",
22
24
  table: "panel.defaults.table",
23
25
  };
24
26
 
@@ -81,6 +83,8 @@ export function getDefaultSizeByMaterial(materialType: string) {
81
83
  return { width: 280, height: 180 };
82
84
  case "geometry":
83
85
  return { width: 220, height: 220 };
86
+ case "scene3d":
87
+ return { width: 480, height: 320 };
84
88
  case "table":
85
89
  return { width: 480, height: 280 };
86
90
  default:
@@ -88,6 +92,33 @@ export function getDefaultSizeByMaterial(materialType: string) {
88
92
  }
89
93
  }
90
94
 
95
+ export function cssTextLineHeight(
96
+ value: number | "auto" | undefined
97
+ ): string | undefined {
98
+ if (value === "auto") return "normal";
99
+ if (typeof value === "number" && Number.isFinite(value) && value > 0) {
100
+ return String(value);
101
+ }
102
+ return undefined;
103
+ }
104
+
105
+ export function cssTextAlignStyle(align: PanelElement["textAlign"]): {
106
+ textAlign: "left" | "center" | "right" | "justify";
107
+ display?: "flex";
108
+ flexDirection?: "column";
109
+ justifyContent?: "center";
110
+ } {
111
+ if (align === "middle") {
112
+ return {
113
+ textAlign: "center",
114
+ display: "flex",
115
+ flexDirection: "column",
116
+ justifyContent: "center",
117
+ };
118
+ }
119
+ return { textAlign: align ?? "left" };
120
+ }
121
+
91
122
  export function getDefaultTextContent(
92
123
  materialType: string,
93
124
  t: TranslateFn = tForLocale("zh-CN")
@@ -192,3 +223,8 @@ export function getDefaultTableConfig(
192
223
  if (cfg.columns?.[2]) cfg.columns[2].title = t("panel.config.tableColScore");
193
224
  return cfg;
194
225
  }
226
+
227
+ export function getDefaultScene3dConfigForMaterial(materialType: string) {
228
+ if (materialType !== "scene3d") return {};
229
+ return { scene3d: createDefaultScene3dConfig() };
230
+ }
@@ -1,114 +0,0 @@
1
- export type ScopeAutocompleteState = {
2
- templateStart: number;
3
- cursor: number;
4
- path: string[];
5
- partialKey: string;
6
- };
7
-
8
- function getValueAtPath(scope: unknown, path: string[]): unknown {
9
- let current: unknown = scope;
10
- for (const part of path) {
11
- if (current === null || typeof current !== "object") return undefined;
12
- current = (current as Record<string, unknown>)[part];
13
- }
14
- return current;
15
- }
16
-
17
- function listObjectKeys(value: unknown): string[] {
18
- if (value === null || typeof value !== "object" || Array.isArray(value)) {
19
- return [];
20
- }
21
- return Object.keys(value as Record<string, unknown>);
22
- }
23
-
24
- /** 解析光标处未闭合的 scope 模版表达式 */
25
- export function parseScopeAutocomplete(
26
- text: string,
27
- cursor: number,
28
- scope: unknown
29
- ): ScopeAutocompleteState | null {
30
- const before = text.slice(0, cursor);
31
- const templateStart = before.lastIndexOf("{");
32
- if (templateStart < 0) return null;
33
-
34
- const inner = before.slice(templateStart + 1);
35
- if (inner.includes("}")) return null;
36
- if (!inner.startsWith("scope")) return null;
37
-
38
- let body = inner.slice("scope".length);
39
- if (body === "" || body === "?") {
40
- return { templateStart, cursor, path: [], partialKey: "" };
41
- }
42
- if (!body.startsWith("?.")) return null;
43
-
44
- body = body.slice(2);
45
- if (body === "") {
46
- return { templateStart, cursor, path: [], partialKey: "" };
47
- }
48
-
49
- const segments = body.split("?.");
50
- const endsWithSeparator = inner.endsWith("?.");
51
-
52
- if (endsWithSeparator) {
53
- const path = segments.filter((segment) => segment.length > 0);
54
- return { templateStart, cursor, path, partialKey: "" };
55
- }
56
-
57
- const lastSegment = segments[segments.length - 1] ?? "";
58
- const prefixSegments = segments.slice(0, -1).filter((segment) => segment.length > 0);
59
- const parent = getValueAtPath(scope, prefixSegments);
60
- const keys = listObjectKeys(parent);
61
-
62
- if (lastSegment.length === 0) {
63
- return { templateStart, cursor, path: prefixSegments, partialKey: "" };
64
- }
65
-
66
- if (keys.includes(lastSegment)) {
67
- return {
68
- templateStart,
69
- cursor,
70
- path: [...prefixSegments, lastSegment],
71
- partialKey: "",
72
- };
73
- }
74
-
75
- return {
76
- templateStart,
77
- cursor,
78
- path: prefixSegments,
79
- partialKey: lastSegment,
80
- };
81
- }
82
-
83
- export function getScopeAutocompleteSuggestions(
84
- scope: unknown,
85
- state: ScopeAutocompleteState
86
- ): string[] {
87
- const parent =
88
- state.partialKey.length > 0
89
- ? getValueAtPath(scope, state.path)
90
- : state.path.length > 0
91
- ? getValueAtPath(scope, state.path)
92
- : scope;
93
-
94
- const keys = listObjectKeys(parent);
95
- if (state.partialKey.length === 0) return keys;
96
- return keys.filter((key) => key.startsWith(state.partialKey));
97
- }
98
-
99
- export function buildScopeExpression(path: string[], selectedKey: string): string {
100
- return `scope?.${[...path, selectedKey].join("?.")}`;
101
- }
102
-
103
- export function applyScopeAutocompleteSelection(
104
- text: string,
105
- state: ScopeAutocompleteState,
106
- selectedKey: string
107
- ): { value: string; cursor: number } {
108
- const expr = buildScopeExpression(state.path, selectedKey);
109
- const before = text.slice(0, state.templateStart + 1);
110
- const after = text.slice(state.cursor);
111
- const value = `${before}${expr}${after}`;
112
- const cursor = before.length + expr.length;
113
- return { value, cursor };
114
- }