@arronqzy/vue-view 0.1.0

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

@@ -0,0 +1,20 @@
+<template>
+  <div class="space-y-2">
+    <p>
+      表单中可使用模版字符串引用 scope，例如
+      <code class="rounded bg-muted px-1">{`{scope?.a||0}`}</code>
+      、
+      <code class="rounded bg-muted px-1">{`{scope?.name||''}`}</code>
+      。支持 <code class="rounded bg-muted px-1">?.</code> 与
+      <code class="rounded bg-muted px-1">||</code> 占位。
+    </p>
+    <p>
+      数组展开模版
+      <code class="rounded bg-muted px-1">{`[...{scope?.a?.b}]`}</code>
+      、
+      <code class="rounded bg-muted px-1">{`[...{scope?.data?.data?.statusName}]`}</code>
+      ：在文本字段输出逗号分隔字符串；在图表「类目」等数组字段会展开为 n
+      个独立项（如 3 条数据对应 3 个类目）。
+    </p>
+  </div>
+</template>

package/src/panel/components/scope-config/ScopeTemplateWarningsPanel.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useScopeConfig } from "./useScopeConfig";
+
+const WARNINGS_COLLAPSE_STORAGE_KEY = "panel:config-scope-warnings-collapsed";
+
+const ctx = useScopeConfig();
+const isCollapsed = ref(false);
+
+onMounted(() => {
+  const stored = window.localStorage.getItem(WARNINGS_COLLAPSE_STORAGE_KEY);
+  if (stored === "1") isCollapsed.value = true;
+});
+
+watch(isCollapsed, (next) => {
+  window.localStorage.setItem(
+    WARNINGS_COLLAPSE_STORAGE_KEY,
+    next ? "1" : "0"
+  );
+});
+</script>
+
+<template>
+  <div
+    v-if="ctx && ctx.warnings.length > 0"
+    class="mt-2 border-t border-border/50 pt-2"
+  >
+    <div class="flex items-center justify-between gap-2">
+      <div class="text-[11px] font-medium text-amber-700 dark:text-amber-300">
+        异常调用警告
+        <span
+          class="ml-1.5 rounded bg-amber-500/15 px-1.5 py-0.5 text-[10px] font-semibold"
+        >
+          {{ ctx.warnings.length }}
+        </span>
+      </div>
+      <button
+        type="button"
+        class="rounded border border-border px-1.5 py-0.5 text-[11px] text-muted-foreground hover:bg-accent"
+        @click="isCollapsed = !isCollapsed"
+      >
+        {{ isCollapsed ? "展开警告" : "收起警告" }}
+      </button>
+    </div>
+    <ul
+      v-if="!isCollapsed"
+      class="mt-2 max-h-[200px] space-y-1 overflow-auto text-[10px] leading-relaxed"
+    >
+      <li
+        v-for="warning in ctx.warnings"
+        :key="`${warning.fieldId}-${warning.kind}-${warning.missingPath}-${warning.expression}`"
+      >
+        <button
+          type="button"
+          class="w-full rounded border border-amber-500/30 bg-amber-500/10 px-2 py-1.5 text-left text-amber-800 hover:bg-amber-500/15 dark:text-amber-200"
+          @click="ctx.scrollToField(warning.fieldId)"
+        >
+          {{ warning.message }}
+        </button>
+      </li>
+    </ul>
+  </div>
+</template>

package/src/panel/components/scope-config/scopeConfigContext.ts

@@ -0,0 +1,17 @@
+import type { InjectionKey, Ref } from "vue";
+import type { ScopeTemplateWarning } from "../../utils/scope-template-warnings";
+
+export type ScopeConfigContextValue = {
+  warnings: ScopeTemplateWarning[];
+  warningsByField: Map<string, ScopeTemplateWarning[]>;
+  scrollToField: (fieldId: string) => void;
+};
+
+export const scopeConfigKey: InjectionKey<ScopeConfigContextValue> =
+  Symbol("scopeConfig");
+
+export type ScopeConfigProviderProps = {
+  scope?: unknown;
+  warnings: ScopeTemplateWarning[];
+  scrollContainerRef?: Ref<HTMLElement | null | undefined>;
+};

package/src/panel/components/scope-config/useScopeConfig.ts

@@ -0,0 +1,11 @@
+import { inject } from "vue";
+import { scopeConfigKey } from "./scopeConfigContext";
+
+export function useScopeConfig() {
+  return inject(scopeConfigKey, null);
+}
+
+export function useScopeFieldWarnings(fieldId: string) {
+  const ctx = useScopeConfig();
+  return ctx?.warningsByField.get(fieldId) ?? [];
+}

package/src/panel/constants/messages.ts

@@ -0,0 +1,34 @@
+export const PANEL_MESSAGES = {
+  nodeNotFound: "未找到节点，可能已被删除",
+  sourceNodeNotFound: "未找到源节点，可能已被删除",
+  targetLayerNotFound: "目标图层不存在",
+  nodeMoveSameLayer: "已在当前图层",
+  nodeDeleteLocked: "锁定节点不可删除，请在右侧【节点信息】中取消锁定后重试",
+  nodeDeleteLayerLocked: "当前节点所在图层已锁定，无法删除。请先在图层栏取消锁定",
+  nodeBatchDeleteContainsLocked:
+    "选中节点包含锁定节点，无法批量删除。请先在右侧【节点信息】中取消锁定",
+  nodeMoveLocked: "锁定节点不允许更换图层，请先在右侧【节点信息】中取消锁定",
+  nodeMoveSourceLayerLocked: "节点所在图层已锁定，无法更换图层。请先在图层栏取消锁定",
+  nodeMoveTargetLayerLocked: "目标图层已锁定，无法移入。请先在图层栏取消锁定",
+  activeLayerLockedCannotAdd: "当前图层已锁定，无法新增节点",
+  nodeLayerLockedCannotCopy: "当前节点所在图层已锁定，无法复制",
+  selectionContainsLockedLayerNode: "选中节点包含锁定图层内容，无法批量删除",
+  sourceLayerLockedCannotPaste: "复制源节点所在图层已锁定，无法粘贴",
+  nodeConfigLocked: "当前节点已锁定，配置项不可编辑。",
+  nodeConfigLayerLocked: "当前节点所在图层已锁定，配置项不可编辑。",
+  readImageFailed: "读取图片失败",
+  readAudioFailed: "读取音频失败",
+  readVideoFailed: "读取视频失败",
+  readRecordAudioFailed: "录音读取失败",
+  audioLocalSaved: "已写入本地音频（base64）",
+  audioRemoteUploaded: "已上传服务器并更新远程链接",
+  audioServerUploadFailed: "服务器上传失败，仅保留本地音频",
+  audioPosterSet: "已设置音频占位图",
+  audioRecordUnsupported: "当前环境不支持录音",
+  audioRecordSaved: "录音已保存，可直接播放",
+  audioRecording: "录音中...",
+  audioRecordStartFailed: "无法开始录音，请检查麦克风权限",
+  videoLocalSaved: "已写入本地视频（base64）",
+  videoRemoteUploaded: "已上传服务器并更新远程链接",
+  videoServerUploadFailed: "服务器上传失败，仅保留本地视频",
+} as const;

package/src/panel/constants/zIndex.ts

@@ -0,0 +1,6 @@
+export const PANEL_Z_INDEX = {
+  /** 仅高于画布内容层，低于弹窗蒙层 */
+  ruler: 100,
+  toolbar: 1200,
+  historyPopover: 1210,
+} as const;