@arronqzy/vue-view 0.1.0

package/src/panel/components/config/PanelConfigStyleSections.vue

@@ -0,0 +1,208 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { Input, Select } from "ant-design-vue";
+import type { PanelElement, PanelElementStyle } from "../../types";
+import {
+  PANEL_MESSAGES,
+  readFileAsDataUrl,
+  uploadFileToRemote,
+} from "./shared";
+import ConfigColorField from "./ConfigColorField.vue";
+import ConfigFieldGroup from "./ConfigFieldGroup.vue";
+import ConfigSection from "./ConfigSection.vue";
+
+const props = defineProps<{
+  element: PanelElement;
+  isEditable: boolean;
+  backgroundOpen: boolean;
+  borderOpen: boolean;
+  showBackground?: boolean;
+  showBorder?: boolean;
+  forceOpen?: boolean;
+  updateElement: (
+    id: string,
+    patch: Partial<PanelElement>,
+    options?: { batchId?: string; meta?: Record<string, unknown> }
+  ) => void;
+}>();
+
+const emit = defineEmits<{
+  "update:backgroundOpen": [value: boolean];
+  "update:borderOpen": [value: boolean];
+}>();
+
+const uploadStatus = ref("");
+
+function patchStyle(patch: Partial<PanelElementStyle>) {
+  props.updateElement(props.element.id, {
+    style: { ...(props.element.style ?? {}), ...patch },
+  });
+}
+
+async function handleUploadBackgroundImage(file: File) {
+  const base64 = await readFileAsDataUrl(file, PANEL_MESSAGES.readImageFailed);
+  patchStyle({ backgroundImage: `url("${base64}")` });
+  uploadStatus.value = "已写入 base64";
+  const url = await uploadFileToRemote(file);
+  if (url) {
+    patchStyle({ backgroundImageRemoteUrl: url });
+    uploadStatus.value = "已上传服务器并写入 base64";
+  } else {
+    uploadStatus.value = "服务器上传失败，仅保留 base64";
+  }
+}
+
+function onFileChange(e: Event) {
+  const input = e.target as HTMLInputElement;
+  const file = input.files?.[0];
+  input.value = "";
+  if (file) void handleUploadBackgroundImage(file);
+}
+</script>
+
+<template>
+  <ConfigSection
+    v-if="showBackground !== false"
+    title="通用样式 / 背景"
+    :open="backgroundOpen"
+    :force-open="forceOpen"
+    @update:open="emit('update:backgroundOpen', $event)"
+  >
+    <ConfigFieldGroup title="背景填充">
+      <ConfigColorField
+        label="背景色"
+        :value="element.style?.backgroundColor ?? ''"
+        :disabled="!isEditable"
+        @update:value="(v) => patchStyle({ backgroundColor: v || undefined })"
+      />
+      <label class="block space-y-1">
+        <div>背景图</div>
+        <Input
+          size="small"
+          :value="element.style?.backgroundImage ?? ''"
+          :disabled="!isEditable"
+          placeholder='url("https://...") / linear-gradient(...)'
+          @update:value="(v: string) => patchStyle({ backgroundImage: v || undefined })"
+        />
+      </label>
+      <div class="flex items-center gap-2">
+        <label
+          class="inline-flex cursor-pointer items-center rounded border border-gray-200 px-2 py-1 text-[11px] hover:bg-gray-50"
+          :class="{ 'pointer-events-none opacity-50': !isEditable }"
+        >
+          上传图片
+          <input
+            type="file"
+            accept="image/*"
+            class="hidden"
+            :disabled="!isEditable"
+            @change="onFileChange"
+          />
+        </label>
+        <span v-if="uploadStatus" class="text-[11px] text-gray-500">{{ uploadStatus }}</span>
+      </div>
+    </ConfigFieldGroup>
+    <ConfigFieldGroup title="背景布局">
+      <div class="grid grid-cols-2 gap-2">
+        <label class="block space-y-1">
+          <div>背景尺寸</div>
+          <Select
+            size="small"
+            class="w-full"
+            :value="element.style?.backgroundSize ?? '__none__'"
+            :disabled="!isEditable"
+            @update:value="(v) => patchStyle({ backgroundSize: v === '__none__' ? undefined : String(v) })"
+          >
+            <Select.Option value="__none__">默认</Select.Option>
+            <Select.Option value="cover">cover</Select.Option>
+            <Select.Option value="contain">contain</Select.Option>
+            <Select.Option value="100% 100%">100% 100%</Select.Option>
+            <Select.Option value="auto">auto</Select.Option>
+          </Select>
+        </label>
+        <label class="block space-y-1">
+          <div>背景位置</div>
+          <Select
+            size="small"
+            class="w-full"
+            :value="element.style?.backgroundPosition ?? '__none__'"
+            :disabled="!isEditable"
+            @update:value="(v) => patchStyle({ backgroundPosition: v === '__none__' ? undefined : String(v) })"
+          >
+            <Select.Option value="__none__">默认</Select.Option>
+            <Select.Option value="center">center</Select.Option>
+            <Select.Option value="top">top</Select.Option>
+            <Select.Option value="bottom">bottom</Select.Option>
+            <Select.Option value="left">left</Select.Option>
+            <Select.Option value="right">right</Select.Option>
+            <Select.Option value="top left">top left</Select.Option>
+            <Select.Option value="top right">top right</Select.Option>
+            <Select.Option value="bottom left">bottom left</Select.Option>
+            <Select.Option value="bottom right">bottom right</Select.Option>
+          </Select>
+        </label>
+      </div>
+    </ConfigFieldGroup>
+  </ConfigSection>
+
+  <ConfigSection
+    v-if="showBorder !== false"
+    title="通用样式 / 边框"
+    :open="borderOpen"
+    :force-open="forceOpen"
+    @update:open="emit('update:borderOpen', $event)"
+  >
+    <ConfigFieldGroup title="边框几何">
+      <div class="grid grid-cols-2 gap-2">
+        <label class="block space-y-1">
+          <div>边框宽度（px）</div>
+          <Input
+            size="small"
+            type="number"
+            :min="0"
+            :value="String(element.style?.borderWidth ?? 0)"
+            :disabled="!isEditable"
+            @update:value="(v) => patchStyle({ borderWidth: Math.max(0, Number(v) || 0) })"
+          />
+        </label>
+        <label class="block space-y-1">
+          <div>边框圆角（px）</div>
+          <Input
+            size="small"
+            type="number"
+            :min="0"
+            :value="String(element.style?.borderRadius ?? 0)"
+            :disabled="!isEditable"
+            @update:value="(v) => patchStyle({ borderRadius: Math.max(0, Number(v) || 0) })"
+          />
+        </label>
+      </div>
+    </ConfigFieldGroup>
+    <ConfigFieldGroup title="边框视觉">
+      <div class="grid grid-cols-2 gap-2">
+        <label class="block space-y-1">
+          <div>边框样式</div>
+          <Select
+            size="small"
+            class="w-full"
+            :value="element.style?.borderStyle ?? 'solid'"
+            :disabled="!isEditable"
+            @update:value="(v) => patchStyle({ borderStyle: v as PanelElementStyle['borderStyle'] })"
+          >
+            <Select.Option value="none">none</Select.Option>
+            <Select.Option value="solid">solid</Select.Option>
+            <Select.Option value="dashed">dashed</Select.Option>
+            <Select.Option value="dotted">dotted</Select.Option>
+            <Select.Option value="double">double</Select.Option>
+          </Select>
+        </label>
+        <ConfigColorField
+          label="边框颜色"
+          :value="element.style?.borderColor ?? ''"
+          :disabled="!isEditable"
+          @update:value="(v) => patchStyle({ borderColor: v || undefined })"
+        />
+      </div>
+    </ConfigFieldGroup>
+  </ConfigSection>
+</template>

package/src/panel/components/config/PanelConfigTextSection.vue

@@ -0,0 +1,195 @@
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { Checkbox, Input, InputNumber, Select } from "ant-design-vue";
+import type { PanelElement } from "../../types";
+import ConfigColorField from "./ConfigColorField.vue";
+import ConfigFieldGroup from "./ConfigFieldGroup.vue";
+import ConfigSection from "./ConfigSection.vue";
+
+const props = defineProps<{
+  element: PanelElement;
+  isEditable: boolean;
+  open: boolean;
+  forceOpen?: boolean;
+  updateElement: (
+    id: string,
+    patch: Partial<PanelElement>,
+    options?: { batchId?: string; meta?: Record<string, unknown> }
+  ) => void;
+}>();
+
+const emit = defineEmits<{
+  "update:open": [value: boolean];
+}>();
+
+const textEditorRef = ref<HTMLDivElement | null>(null);
+
+function patch(patch: Partial<PanelElement>) {
+  if (props.element.materialType !== "text") return;
+  props.updateElement(props.element.id, patch);
+}
+
+function execTextCommand(cmd: "bold" | "italic" | "underline") {
+  textEditorRef.value?.focus();
+  document.execCommand(cmd);
+  const next = textEditorRef.value?.innerHTML ?? "";
+  patch({ textHtml: next || "<p><br/></p>" });
+}
+
+function syncEditorHtml() {
+  if (props.element.materialType !== "text") return;
+  const nextHtml = props.element.textHtml ?? "<p>双击输入文本</p>";
+  if (textEditorRef.value && textEditorRef.value.innerHTML !== nextHtml) {
+    textEditorRef.value.innerHTML = nextHtml;
+  }
+}
+
+onMounted(syncEditorHtml);
+watch(() => [props.element.id, props.element.textHtml], syncEditorHtml);
+</script>
+
+<template>
+  <ConfigSection
+    title="文本配置"
+    :open="open"
+    :force-open="forceOpen"
+    @update:open="emit('update:open', $event)"
+  >
+    <ConfigFieldGroup title="文本内容">
+      <div class="flex items-center gap-1">
+        <button
+          type="button"
+          class="rounded border border-gray-200 px-2 py-1 text-[11px] hover:bg-gray-50 disabled:opacity-50"
+          :disabled="!isEditable"
+          @click="execTextCommand('bold')"
+        >
+          B
+        </button>
+        <button
+          type="button"
+          class="rounded border border-gray-200 px-2 py-1 text-[11px] italic hover:bg-gray-50 disabled:opacity-50"
+          :disabled="!isEditable"
+          @click="execTextCommand('italic')"
+        >
+          I
+        </button>
+        <button
+          type="button"
+          class="rounded border border-gray-200 px-2 py-1 text-[11px] underline hover:bg-gray-50 disabled:opacity-50"
+          :disabled="!isEditable"
+          @click="execTextCommand('underline')"
+        >
+          U
+        </button>
+      </div>
+      <div
+        ref="textEditorRef"
+        class="min-h-[120px] rounded border border-gray-200 bg-white px-2 py-1.5 text-xs leading-6 outline-none"
+        :contenteditable="isEditable"
+        :style="{
+          fontFamily: element.textFontFamily || undefined,
+          fontSize: element.textFontSize ? `${element.textFontSize}px` : undefined,
+          fontWeight: element.textFontWeight || undefined,
+          color: element.textColor || undefined,
+          lineHeight: element.textLineHeight ? String(element.textLineHeight) : undefined,
+          textAlign: element.textAlign ?? 'left',
+        }"
+        @input="(e) => {
+          const nextHtml = (e.target as HTMLDivElement).innerHTML;
+          patch({ textHtml: nextHtml || '<p><br/></p>' });
+        }"
+      />
+    </ConfigFieldGroup>
+    <ConfigFieldGroup title="文字样式">
+      <label class="block space-y-1">
+        <div>字体</div>
+        <Input
+          size="small"
+          :value="element.textFontFamily ?? ''"
+          :disabled="!isEditable"
+          placeholder="如：Inter, PingFang SC, Microsoft YaHei"
+          @update:value="(v: string) => patch({ textFontFamily: v || undefined })"
+        />
+      </label>
+      <div class="grid grid-cols-2 gap-2">
+        <label class="block space-y-1">
+          <div>字号（px）</div>
+          <InputNumber
+            size="small"
+            class="w-full"
+            :min="8"
+            :max="200"
+            :value="element.textFontSize ?? 14"
+            :disabled="!isEditable"
+            @update:value="(v) => { const n = Number(v); if (!Number.isNaN(n)) patch({ textFontSize: Math.max(8, n) }); }"
+          />
+        </label>
+        <label class="block space-y-1">
+          <div>字重</div>
+          <Select
+            size="small"
+            class="w-full"
+            :value="element.textFontWeight ?? '400'"
+            :disabled="!isEditable"
+            @update:value="(v) => patch({ textFontWeight: String(v) })"
+          >
+            <Select.Option value="300">300</Select.Option>
+            <Select.Option value="400">400</Select.Option>
+            <Select.Option value="500">500</Select.Option>
+            <Select.Option value="600">600</Select.Option>
+            <Select.Option value="700">700</Select.Option>
+          </Select>
+        </label>
+      </div>
+      <div class="grid grid-cols-2 gap-2">
+        <label class="block space-y-1">
+          <div>对齐</div>
+          <Select
+            size="small"
+            class="w-full"
+            :value="element.textAlign ?? 'left'"
+            :disabled="!isEditable"
+            @update:value="(v) => patch({ textAlign: v as PanelElement['textAlign'] })"
+          >
+            <Select.Option value="left">左对齐</Select.Option>
+            <Select.Option value="center">居中</Select.Option>
+            <Select.Option value="right">右对齐</Select.Option>
+            <Select.Option value="justify">两端对齐</Select.Option>
+          </Select>
+        </label>
+        <label class="block space-y-1">
+          <div>行高</div>
+          <InputNumber
+            size="small"
+            class="w-full"
+            :min="1"
+            :max="3"
+            :step="0.1"
+            :value="element.textLineHeight ?? 1.6"
+            :disabled="!isEditable"
+            @update:value="(v) => {
+              const n = Number(v);
+              if (!Number.isNaN(n)) patch({ textLineHeight: Math.min(3, Math.max(1, n)) });
+            }"
+          />
+        </label>
+      </div>
+      <ConfigColorField
+        label="文字颜色"
+        :value="element.textColor ?? ''"
+        :disabled="!isEditable"
+        @update:value="(v) => patch({ textColor: v || undefined })"
+      />
+    </ConfigFieldGroup>
+    <ConfigFieldGroup title="输入能力">
+      <label class="flex items-center gap-2">
+        <Checkbox
+          :checked="element.textAllowInput ?? true"
+          :disabled="!isEditable"
+          @update:checked="(v) => patch({ textAllowInput: v !== false })"
+        />
+        <span>允许在画布内直接输入（默认开启）</span>
+      </label>
+    </ConfigFieldGroup>
+  </ConfigSection>
+</template>

package/src/panel/components/config/PanelConfigVideoSection.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { Checkbox, Input } from "ant-design-vue";
+import type { PanelElement } from "../../types";
+import {
+  PANEL_MESSAGES,
+  readFileAsDataUrl,
+  uploadFileToRemote,
+} from "./shared";
+import ConfigFieldGroup from "./ConfigFieldGroup.vue";
+import ConfigSection from "./ConfigSection.vue";
+
+const props = defineProps<{
+  element: PanelElement;
+  isEditable: boolean;
+  open: boolean;
+  forceOpen?: boolean;
+  updateElement: (
+    id: string,
+    patch: Partial<PanelElement>,
+    options?: { batchId?: string; meta?: Record<string, unknown> }
+  ) => void;
+}>();
+
+const emit = defineEmits<{
+  "update:open": [value: boolean];
+}>();
+
+const videoStatus = ref("");
+
+function patch(patch: Partial<PanelElement>) {
+  if (props.element.materialType !== "video") return;
+  props.updateElement(props.element.id, patch);
+}
+
+async function handleUploadVideoFile(file: File) {
+  const base64 = await readFileAsDataUrl(file, PANEL_MESSAGES.readVideoFailed);
+  patch({ videoSrc: base64 });
+  videoStatus.value = PANEL_MESSAGES.videoLocalSaved;
+  const url = await uploadFileToRemote(file);
+  if (url) {
+    patch({ videoRemoteUrl: url });
+    videoStatus.value = PANEL_MESSAGES.videoRemoteUploaded;
+  } else {
+    videoStatus.value = PANEL_MESSAGES.videoServerUploadFailed;
+  }
+}
+
+function onVideoFileChange(e: Event) {
+  const file = (e.target as HTMLInputElement).files?.[0];
+  (e.target as HTMLInputElement).value = "";
+  if (file) void handleUploadVideoFile(file);
+}
+</script>
+
+<template>
+  <ConfigSection
+    title="视频配置"
+    :open="open"
+    :force-open="forceOpen"
+    @update:open="emit('update:open', $event)"
+  >
+    <ConfigFieldGroup title="视频来源">
+      <label class="block space-y-1">
+        <div>视频 URL</div>
+        <Input
+          size="small"
+          :value="element.videoRemoteUrl ?? ''"
+          :disabled="!isEditable"
+          placeholder="https://example.com/video.mp4"
+          @update:value="(v: string) => patch({
+            videoRemoteUrl: v || undefined,
+            videoSrc: v || element.videoSrc,
+          })"
+        />
+      </label>
+      <div class="flex items-center gap-2">
+        <label
+          class="inline-flex cursor-pointer items-center rounded border border-gray-200 px-2 py-1 text-[11px] hover:bg-gray-50"
+          :class="{ 'pointer-events-none opacity-50': !isEditable }"
+        >
+          上传视频
+          <input type="file" accept="video/*" class="hidden" :disabled="!isEditable" @change="onVideoFileChange" />
+        </label>
+      </div>
+      <div
+        v-if="videoStatus"
+        class="rounded border border-gray-200/60 bg-white px-2 py-1.5 text-[11px] text-gray-500"
+      >
+        {{ videoStatus }}
+      </div>
+      <video
+        controls
+        class="h-36 w-full rounded border border-gray-200/60 bg-black/80 object-contain"
+        :src="element.videoSrc || element.videoRemoteUrl || ''"
+      />
+      <label class="flex items-center gap-2">
+        <Checkbox
+          :checked="element.mediaAutoPauseOnEdit !== false"
+          :disabled="!isEditable"
+          @update:checked="(v) => patch({ mediaAutoPauseOnEdit: v !== false })"
+        />
+        <span>编辑时自动暂停媒体</span>
+      </label>
+    </ConfigFieldGroup>
+  </ConfigSection>
+</template>

package/src/panel/components/config/shared.ts

@@ -0,0 +1,74 @@
+import type { PanelChartConfig } from "../../types";
+import { PANEL_MESSAGES } from "../../constants/messages";
+
+export function mergeOptionPatch(
+  base: Record<string, unknown> | undefined,
+  patch: Record<string, unknown>
+): Record<string, unknown> {
+  const output: Record<string, unknown> = { ...(base ?? {}) };
+  for (const [key, value] of Object.entries(patch)) {
+    const prev = output[key];
+    if (
+      value &&
+      typeof value === "object" &&
+      !Array.isArray(value) &&
+      prev &&
+      typeof prev === "object" &&
+      !Array.isArray(prev)
+    ) {
+      output[key] = mergeOptionPatch(
+        prev as Record<string, unknown>,
+        value as Record<string, unknown>
+      );
+    } else {
+      output[key] = value;
+    }
+  }
+  return output;
+}
+
+export function sectionMatchesSearch(
+  title: string,
+  searchTerms: string[],
+  normalizedSearch: string,
+  hasSearch: boolean
+): boolean {
+  if (!hasSearch) return true;
+  return [title, ...searchTerms].some((term) =>
+    term.toLowerCase().includes(normalizedSearch)
+  );
+}
+
+export function readFileAsDataUrl(
+  file: File,
+  errorMessage: string
+): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(String(reader.result ?? ""));
+    reader.onerror = () => reject(new Error(errorMessage));
+    reader.readAsDataURL(file);
+  });
+}
+
+export async function uploadFileToRemote(file: File): Promise<string | undefined> {
+  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 };
+    return data.url;
+  } catch {
+    return undefined;
+  }
+}
+
+export function patchChart(
+  chart: PanelChartConfig | undefined,
+  patch: Partial<PanelChartConfig>
+): PanelChartConfig {
+  return { ...(chart ?? {}), ...patch };
+}
+
+export { PANEL_MESSAGES };