@arronqzy/vue-view 0.1.0

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

@@ -0,0 +1,209 @@
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { Input, InputNumber, Select, Textarea } 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 geometryDrawPenColor = ref("#111827");
+const geometryDrawPenWidth = ref(3);
+const isGeometryDrawing = ref(false);
+const geometryDrawCanvasRef = ref<HTMLCanvasElement | null>(null);
+const geometryLastPointRef = ref<{ x: number; y: number } | null>(null);
+
+function patch(patch: Partial<PanelElement>) {
+  if (props.element.materialType !== "geometry") return;
+  props.updateElement(props.element.id, patch);
+}
+
+function redrawGeometryPadFromElement() {
+  const canvas = geometryDrawCanvasRef.value;
+  if (!canvas) return;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return;
+  const width = canvas.width;
+  const height = canvas.height;
+  ctx.clearRect(0, 0, width, height);
+  ctx.fillStyle = "#ffffff";
+  ctx.fillRect(0, 0, width, height);
+  const sketch = props.element.geometrySketchDataUrl;
+  if (!sketch) return;
+  const img = new Image();
+  img.onload = () => ctx.drawImage(img, 0, 0, width, height);
+  img.src = sketch;
+}
+
+onMounted(redrawGeometryPadFromElement);
+watch(() => [props.element.id, props.element.geometrySketchDataUrl], redrawGeometryPadFromElement);
+
+function onPointerDown(e: PointerEvent) {
+  const canvas = geometryDrawCanvasRef.value;
+  if (!canvas || !props.isEditable) return;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return;
+  const rect = canvas.getBoundingClientRect();
+  const x = ((e.clientX - rect.left) / rect.width) * canvas.width;
+  const y = ((e.clientY - rect.top) / rect.height) * canvas.height;
+  geometryLastPointRef.value = { x, y };
+  isGeometryDrawing.value = true;
+  ctx.lineCap = "round";
+  ctx.lineJoin = "round";
+  ctx.strokeStyle = geometryDrawPenColor.value;
+  ctx.lineWidth = geometryDrawPenWidth.value;
+  ctx.beginPath();
+  ctx.moveTo(x, y);
+}
+
+function onPointerMove(e: PointerEvent) {
+  if (!isGeometryDrawing.value) return;
+  const canvas = geometryDrawCanvasRef.value;
+  const last = geometryLastPointRef.value;
+  if (!canvas || !last) return;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return;
+  const rect = canvas.getBoundingClientRect();
+  const x = ((e.clientX - rect.left) / rect.width) * canvas.width;
+  const y = ((e.clientY - rect.top) / rect.height) * canvas.height;
+  ctx.lineTo(x, y);
+  ctx.stroke();
+  geometryLastPointRef.value = { x, y };
+}
+
+function endDrawing() {
+  isGeometryDrawing.value = false;
+  geometryLastPointRef.value = null;
+}
+
+function applySketch() {
+  const canvas = geometryDrawCanvasRef.value;
+  if (!canvas) return;
+  patch({ geometrySketchDataUrl: canvas.toDataURL("image/png") });
+}
+
+function clearSketch() {
+  patch({ geometrySketchDataUrl: undefined });
+  redrawGeometryPadFromElement();
+}
+</script>
+
+<template>
+  <ConfigSection
+    title="几何配置"
+    :open="open"
+    :force-open="forceOpen"
+    @update:open="emit('update:open', $event)"
+  >
+    <ConfigFieldGroup title="基础形状">
+      <label class="block space-y-1">
+        <div>形状</div>
+        <Select
+          size="small"
+          class="w-full"
+          :value="element.geometryShape ?? 'rect'"
+          :disabled="!isEditable"
+          @update:value="(v) => patch({ geometryShape: v as PanelElement['geometryShape'] })"
+        >
+          <Select.Option value="rect">矩形</Select.Option>
+          <Select.Option value="circle">圆形</Select.Option>
+          <Select.Option value="triangle">三角形</Select.Option>
+          <Select.Option value="diamond">菱形</Select.Option>
+          <Select.Option value="hexagon">六边形</Select.Option>
+          <Select.Option value="star">星形</Select.Option>
+          <Select.Option value="heart">爱心</Select.Option>
+        </Select>
+      </label>
+      <ConfigColorField
+        label="几何颜色"
+        :value="element.geometryColor ?? '#3b82f6'"
+        :disabled="!isEditable"
+        @update:value="(v) => patch({ geometryColor: v || '#3b82f6' })"
+      />
+    </ConfigFieldGroup>
+    <ConfigFieldGroup title="高级（Canvas 脚本）">
+      <template #hint>
+        可输入 Canvas 绘制逻辑，变量：ctx、width、height、element。脚本异常会被安全忽略。
+      </template>
+      <Textarea
+        :value="element.geometryScript ?? ''"
+        :disabled="!isEditable"
+        :rows="6"
+        spellcheck="false"
+        class="font-mono text-[11px]"
+        placeholder="// 例: ctx.fillStyle = 'rgba(255,255,255,0.25)'; ctx.fillRect(8,8,width-16,height-16);"
+        @update:value="(v: string) => patch({ geometryScript: v || undefined })"
+      />
+    </ConfigFieldGroup>
+    <ConfigFieldGroup title="手绘叠加">
+      <div class="flex items-center gap-2">
+        <label class="block space-y-1">
+          <div class="text-[11px]">画笔颜色</div>
+          <input
+            v-model="geometryDrawPenColor"
+            type="color"
+            class="h-7 w-10 cursor-pointer rounded border border-gray-200 p-0.5"
+            :disabled="!isEditable"
+          />
+        </label>
+        <label class="block space-y-1">
+          <div class="text-[11px]">画笔粗细</div>
+          <InputNumber
+            size="small"
+            class="w-20"
+            :min="1"
+            :max="24"
+            :value="geometryDrawPenWidth"
+            :disabled="!isEditable"
+            @update:value="(v) => { const n = Number(v); if (!Number.isNaN(n)) geometryDrawPenWidth = Math.max(1, Math.min(24, n)); }"
+          />
+        </label>
+      </div>
+      <div class="rounded border border-gray-200/60 bg-white p-2">
+        <canvas
+          ref="geometryDrawCanvasRef"
+          width="320"
+          height="180"
+          class="h-[180px] w-full cursor-crosshair rounded border border-gray-200/60"
+          @pointerdown="onPointerDown"
+          @pointermove="onPointerMove"
+          @pointerup="endDrawing"
+          @pointerleave="endDrawing"
+        />
+      </div>
+      <div class="flex items-center gap-2">
+        <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="applySketch"
+        >
+          应用手绘到节点
+        </button>
+        <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="clearSketch"
+        >
+          清空手绘
+        </button>
+      </div>
+    </ConfigFieldGroup>
+  </ConfigSection>
+</template>

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

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { InputNumber } from "ant-design-vue";
+import type { PanelElement } from "../../types";
+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];
+}>();
+
+function patch(patch: Partial<PanelElement>) {
+  props.updateElement(props.element.id, patch);
+}
+</script>
+
+<template>
+  <ConfigSection
+    v-if="element.parentGridId"
+    title="网格子节点占位"
+    :open="open"
+    :force-open="forceOpen"
+    @update:open="emit('update:open', $event)"
+  >
+    <template #hint>
+      网格子节点可跨越多格，占据更大区域，便于复杂布局。
+    </template>
+    <ConfigFieldGroup title="跨槽位">
+      <div class="grid grid-cols-2 gap-2">
+        <label class="block space-y-1">
+          <div>跨列（colSpan）</div>
+          <InputNumber
+            size="small"
+            class="w-full"
+            :min="1"
+            :max="12"
+            :value="element.gridColSpan ?? 1"
+            :disabled="!isEditable"
+            @update:value="(v) => { const n = Number(v); if (!Number.isNaN(n)) patch({ gridColSpan: Math.max(1, Math.min(12, n)) }); }"
+          />
+        </label>
+        <label class="block space-y-1">
+          <div>跨行（rowSpan）</div>
+          <InputNumber
+            size="small"
+            class="w-full"
+            :min="1"
+            :max="12"
+            :value="element.gridRowSpan ?? 1"
+            :disabled="!isEditable"
+            @update:value="(v) => { const n = Number(v); if (!Number.isNaN(n)) patch({ gridRowSpan: Math.max(1, Math.min(12, n)) }); }"
+          />
+        </label>
+      </div>
+    </ConfigFieldGroup>
+  </ConfigSection>
+</template>

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

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { InputNumber } from "ant-design-vue";
+import type { PanelElement } from "../../types";
+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];
+}>();
+
+function patch(patch: Partial<PanelElement>) {
+  props.updateElement(props.element.id, patch);
+}
+</script>
+
+<template>
+  <ConfigSection
+    title="网格布局配置"
+    :open="open"
+    :force-open="forceOpen"
+    @update:open="emit('update:open', $event)"
+  >
+    <template #hint>
+      其他节点拖拽靠近该网格槽位中心时会自动吸附，并在节点树显示为该网格子节点。
+    </template>
+    <ConfigFieldGroup title="网格参数">
+      <div class="grid grid-cols-2 gap-2">
+        <label class="block space-y-1">
+          <div>行数</div>
+          <InputNumber
+            size="small"
+            class="w-full"
+            :min="1"
+            :max="12"
+            :value="element.gridRows ?? 2"
+            :disabled="!isEditable"
+            @update:value="(v) => { const n = Number(v); if (!Number.isNaN(n)) patch({ gridRows: Math.max(1, Math.min(12, n)) }); }"
+          />
+        </label>
+        <label class="block space-y-1">
+          <div>列数</div>
+          <InputNumber
+            size="small"
+            class="w-full"
+            :min="1"
+            :max="12"
+            :value="element.gridCols ?? 3"
+            :disabled="!isEditable"
+            @update:value="(v) => { const n = Number(v); if (!Number.isNaN(n)) patch({ gridCols: Math.max(1, Math.min(12, n)) }); }"
+          />
+        </label>
+        <label class="block space-y-1">
+          <div>间距（px）</div>
+          <InputNumber
+            size="small"
+            class="w-full"
+            :min="0"
+            :max="80"
+            :value="element.gridGap ?? 8"
+            :disabled="!isEditable"
+            @update:value="(v) => { const n = Number(v); if (!Number.isNaN(n)) patch({ gridGap: Math.max(0, Math.min(80, n)) }); }"
+          />
+        </label>
+        <label class="block space-y-1">
+          <div>内边距（px）</div>
+          <InputNumber
+            size="small"
+            class="w-full"
+            :min="0"
+            :max="100"
+            :value="element.gridPadding ?? 10"
+            :disabled="!isEditable"
+            @update:value="(v) => { const n = Number(v); if (!Number.isNaN(n)) patch({ gridPadding: Math.max(0, Math.min(100, n)) }); }"
+          />
+        </label>
+        <label class="block space-y-1">
+          <div>吸附阈值（px）</div>
+          <InputNumber
+            size="small"
+            class="w-full"
+            :min="8"
+            :max="120"
+            :value="element.gridSnapThreshold ?? 36"
+            :disabled="!isEditable"
+            @update:value="(v) => { const n = Number(v); if (!Number.isNaN(n)) patch({ gridSnapThreshold: Math.max(8, Math.min(120, n)) }); }"
+          />
+        </label>
+      </div>
+    </ConfigFieldGroup>
+  </ConfigSection>
+</template>

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

@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { Input, Select } 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";
+import ConfigHintIcon from "../ConfigHintIcon.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 uploadStatus = ref("");
+
+function patchStyle(patch: Record<string, string | undefined>) {
+  props.updateElement(props.element.id, {
+    style: { ...(props.element.style ?? {}), ...patch },
+  });
+}
+
+async function handleUploadImage(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 handleUploadImage(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 class="flex items-center gap-1">
+          <span>图片 URL / CSS</span>
+          <ConfigHintIcon label="图片地址">
+            可填写远程 URL 或 url("data:...") 形式；上传后会自动写入 base64。
+          </ConfigHintIcon>
+        </div>
+        <Input
+          size="small"
+          :value="element.style?.backgroundImageRemoteUrl ?? element.style?.backgroundImage ?? ''"
+          :disabled="!isEditable"
+          placeholder="https://example.com/image.png"
+          @update:value="(v: string) => {
+            if (v.startsWith('url(')) {
+              patchStyle({ backgroundImage: v, backgroundImageRemoteUrl: undefined });
+            } else {
+              patchStyle({
+                backgroundImage: v ? `url('${v}')` : undefined,
+                backgroundImageRemoteUrl: 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="显示方式">
+      <label class="block space-y-1">
+        <div>适应方式（object-fit / background-size）</div>
+        <Select
+          size="small"
+          class="w-full"
+          :value="element.style?.backgroundSize ?? 'cover'"
+          :disabled="!isEditable"
+          @update:value="(v) => patchStyle({ backgroundSize: String(v) })"
+        >
+          <Select.Option value="cover">cover（裁剪铺满）</Select.Option>
+          <Select.Option value="contain">contain（完整显示）</Select.Option>
+          <Select.Option value="100% 100%">fill（拉伸填满）</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 ?? 'center'"
+          :disabled="!isEditable"
+          @update:value="(v) => patchStyle({ backgroundPosition: String(v) })"
+        >
+          <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>
+      </label>
+    </ConfigFieldGroup>
+  </ConfigSection>
+</template>