yg-yygl 0.0.1

package/dist/views/sys/seal/seal-manage/components/seal-form.vue

@@ -0,0 +1,1203 @@
+<script setup lang="ts">
+import type { FormItemConfig } from '@udp/component-ui';
+
+import type {
+  SealCreateRequest,
+  SealDimensions,
+  SealUpdateRequest,
+} from '../../../../../api/seal/types';
+
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
+
+import { Form } from '@udp/component-ui';
+
+import { ElButton, ElMessage } from 'element-plus';
+
+import { createSeal, getSeal, updateSeal } from '../../../../../api/seal';
+import { SEAL_TYPE_OPTIONS } from '../../../../../api/seal/types';
+
+const props = withDefaults(
+  defineProps<{
+    editData?: any;
+    type?: 'add' | 'edit' | 'view';
+  }>(),
+  {
+    editData: () => ({}),
+    type: 'add',
+  },
+);
+
+const _emit = defineEmits<{
+  cancel: [];
+  success: [];
+}>();
+
+// 组件状态
+const isEdit = computed(() => !!props.editData?.id && props.type === 'edit');
+const isView = computed(() => props.type === 'view');
+const loading = ref(false);
+const formRef = ref();
+
+// 印章预览相关
+const canvasRef = ref<HTMLCanvasElement>();
+const sealPreviewImage = ref<string>('');
+
+// 表单初始数据
+const initialFormData = {
+  sealName: '',
+  sealType: 1,
+  status: 1,
+  isDefault: 0,
+  description: '',
+  recordSort: 1,
+  sealConfig: {
+    width: 120,
+    height: 120,
+    shape: 'circle',
+    borderWidth: 3,
+    borderColor: '#ff0000',
+    backgroundColor: 'transparent',
+    text: '',
+    topText: '', // 顶部环绕文字
+    bottomText: '', // 底部横列文字
+    showStar: true, // 是否显示五角星
+    starSize: 15, // 五角星大小
+    fontSize: 18,
+    fontColor: '#ff0000',
+    fontFamily: '宋体',
+
+    // 新增高级配置默认值
+    borderStyle: 'single' as const, // 边框样式
+    borderGap: 2, // 双线边框间距
+    topTextArc: 160, // 顶部文字弧度 (度)
+    bottomTextArc: 80, // 底部文字弧度 (度)
+    starInnerRatio: 0.382, // 五角星内外半径比（黄金比例）
+    starRotation: 0, // 五角星旋转角度
+    renderScale: 2, // 渲染倍数
+
+    // 文字间距配置
+    topTextSpacing: 1, // 顶部文字间距倍数
+    bottomTextSpacing: 1, // 底部文字间距倍数
+  },
+};
+
+// 表单配置
+const formItems = computed<FormItemConfig[]>(() => [
+  // === 基础信息 ===
+  {
+    prop: 'sealName',
+    label: '印章名称',
+    type: 'input',
+    required: true,
+    placeholder: '请输入印章名称',
+    rules: [
+      { required: true, message: '请输入印章名称', trigger: ['blur', 'input'] },
+      {
+        max: 100,
+        message: '印章名称长度不能超过100个字符',
+        trigger: ['blur', 'input'],
+      },
+    ],
+  },
+  {
+    prop: 'recordSort',
+    label: '排序',
+    type: 'number',
+    props: {
+      min: 1,
+      max: 999_999,
+    },
+  },
+
+  // === 状态配置 ===
+  {
+    prop: 'status',
+    label: '状态',
+    type: 'switch',
+    props: {
+      activeValue: 1,
+      inactiveValue: 0,
+      inlinePrompt: true,
+      activeText: '启用',
+      inactiveText: '禁用',
+    },
+    gridCols: 1,
+  },
+
+  // === 印章形状与尺寸 ===
+  {
+    prop: 'sealType',
+    label: '印章类型',
+    type: 'select',
+    required: true,
+    placeholder: '请选择印章类型',
+    options: SEAL_TYPE_OPTIONS,
+    rules: [{ required: true, message: '请选择印章类型', trigger: ['change'] }],
+  },
+  {
+    prop: 'sealConfig.shape',
+    label: '印章形状',
+    type: 'select',
+    options: [
+      { label: '圆形', value: 'circle' },
+      { label: '椭圆形', value: 'ellipse' },
+    ],
+  },
+  {
+    prop: 'sealConfig.width',
+    label: '印章宽度',
+    type: 'number',
+    props: { min: 60, max: 200, step: 5 },
+  },
+
+  // === 边框样式 ===
+  {
+    prop: 'sealConfig.height',
+    label: '印章高度',
+    type: 'number',
+    props: { min: 60, max: 200, step: 5 },
+  },
+  {
+    prop: 'sealConfig.borderWidth',
+    label: '边框粗细',
+    type: 'number',
+    props: { min: 1, max: 10, step: 1 },
+  },
+
+  // === 边框设置 ===
+  {
+    prop: 'sealConfig.borderStyle',
+    label: '边框类型',
+    type: 'select',
+    options: [
+      { label: '单线边框', value: 'single' },
+      { label: '双线边框', value: 'double' },
+    ],
+  },
+  {
+    prop: 'sealConfig.borderGap',
+    label: '双线间距',
+    type: 'number',
+    props: { min: 1, max: 5, step: 1 },
+    show: (values: any) => values?.['sealConfig.borderStyle'] === 'double',
+    gridCols: 1,
+  },
+
+  // === 颜色配置 ===
+  {
+    prop: 'sealConfig.borderColor',
+    label: '边框颜色',
+    type: 'input',
+    props: { type: 'color' },
+  },
+  {
+    prop: 'sealConfig.fontColor',
+    label: '文字颜色',
+    type: 'input',
+    props: { type: 'color' },
+  },
+
+  // === 文字设置 ===
+  {
+    prop: 'sealConfig.fontSize',
+    label: '文字大小',
+    type: 'number',
+    props: { min: 12, max: 36, step: 2 },
+  },
+  {
+    prop: 'sealConfig.topTextArc',
+    label: '环绕弧度',
+    type: 'number',
+    props: { min: 120, max: 200, step: 5 },
+  },
+
+  // === 五角星配置 ===
+  {
+    prop: 'sealConfig.starSize',
+    label: '★ 星形大小',
+    type: 'number',
+    props: { min: 8, max: 30, step: 1 },
+  },
+  {
+    prop: 'sealConfig.starInnerRatio',
+    label: '★ 星形比例',
+    type: 'number',
+    props: { min: 0.3, max: 0.5, step: 0.01 },
+  },
+
+  // === 高级设置 ===
+  {
+    prop: 'sealConfig.starRotation',
+    label: '★ 旋转角度',
+    type: 'number',
+    props: { min: 0, max: 360, step: 5 },
+    gridCols: 1,
+  },
+  {
+    prop: 'sealConfig.topText',
+    label: '顶部文字',
+    type: 'input',
+    placeholder: '印章顶部环绕文字',
+    rules: [
+      { max: 30, message: '长度不能超过30个字符', trigger: ['blur', 'input'] },
+    ],
+  },
+  {
+    prop: 'sealConfig.topTextSpacing',
+    label: '顶部文字间距',
+    type: 'number',
+    props: { min: 1, max: 2, step: 0.1 },
+  },
+
+  // === 文字内容 ===
+  {
+    prop: 'sealConfig.bottomText',
+    label: '底部文字',
+    type: 'input',
+    placeholder: '印章底部横列文字',
+    rules: [
+      { max: 30, message: '长度不能超过30个字符', trigger: ['blur', 'input'] },
+    ],
+  },
+  {
+    prop: 'sealConfig.bottomTextSpacing',
+    label: '底部文字间距',
+    type: 'number',
+    props: { min: 1, max: 2, step: 0.1 },
+  },
+  {
+    prop: 'description',
+    label: '描述信息',
+    type: 'textarea',
+    placeholder: '请输入印章描述信息',
+    gridCols: 1,
+    rules: [
+      {
+        max: 500,
+        message: '描述长度不能超过500个字符',
+        trigger: ['blur', 'input'],
+      },
+    ],
+    props: {
+      rows: 3,
+      maxlength: 500,
+      showWordLimit: true,
+    },
+  },
+]);
+
+// 精确布局计算函数
+const calculateSealDimensions = (config: any): SealDimensions => {
+  const centerX = config.width / 2;
+  const centerY = config.height / 2;
+
+  // 椭圆和圆形使用不同的半径计算
+  let baseRadius, outerRadius, textRadius;
+
+  if (config.shape === 'ellipse') {
+    // 椭圆形：使用平均半径作为基准，确保文字和五角星正确显示
+    baseRadius = (config.width + config.height) / 4;
+    outerRadius = baseRadius - config.borderWidth / 2;
+    textRadius = (Math.min(config.width, config.height) / 2) * 0.65; // 椭圆文字半径基于短边
+  } else {
+    // 圆形：使用标准计算
+    baseRadius = Math.min(config.width, config.height) / 2;
+    outerRadius = baseRadius - config.borderWidth / 2;
+    textRadius = outerRadius * 0.75;
+  }
+
+  return {
+    outerRadius,
+    innerRadius: outerRadius * 0.85,
+    textRadius,
+    starRadius: (config.starSize || 15) * (config.starInnerRatio || 0.382),
+    borderWidth: config.borderWidth,
+    center: { x: centerX, y: centerY },
+  };
+};
+
+// 高质量Canvas设置
+const setupHighQualityCanvas = (canvas: HTMLCanvasElement, config: any) => {
+  const ctx = canvas.getContext('2d')!;
+  const scale = (config.renderScale || 2) * (window.devicePixelRatio || 1);
+
+  // 设置高分辨率画布
+  canvas.width = config.width * scale;
+  canvas.height = config.height * scale;
+  canvas.style.width = `${config.width}px`;
+  canvas.style.height = `${config.height}px`;
+
+  // 缩放上下文以匹配设备像素比
+  ctx.scale(scale, scale);
+
+  // 开启高质量渲染
+  ctx.imageSmoothingEnabled = true;
+  ctx.imageSmoothingQuality = 'high';
+  // ctx.textRenderingOptimization = 'optimizeQuality'; // 移除不支持的属性
+
+  return ctx;
+};
+
+// 专业五角星绘制函数
+const drawProfessionalStar = (
+  ctx: CanvasRenderingContext2D,
+  centerX: number,
+  centerY: number,
+  outerRadius: number,
+  innerRatio: number = 0.382,
+  rotation: number = 0,
+  style: 'filled' | 'outlined' = 'filled',
+) => {
+  const innerRadius = outerRadius * innerRatio;
+  const spikes = 5;
+
+  ctx.save();
+  ctx.translate(centerX, centerY);
+  ctx.rotate((rotation * Math.PI) / 180);
+
+  ctx.beginPath();
+  for (let i = 0; i < spikes * 2; i++) {
+    const angle = (i * Math.PI) / spikes - Math.PI / 2;
+    const radius = i % 2 === 0 ? outerRadius : innerRadius;
+    const x = Math.cos(angle) * radius;
+    const y = Math.sin(angle) * radius;
+
+    if (i === 0) ctx.moveTo(x, y);
+    else ctx.lineTo(x, y);
+  }
+  ctx.closePath();
+
+  if (style === 'filled') {
+    ctx.fill();
+  } else {
+    ctx.stroke();
+  }
+
+  ctx.restore();
+};
+
+// 精确环绕文字绘制函数 - 支持椭圆适配和间距控制
+const drawArcText = (
+  ctx: CanvasRenderingContext2D,
+  text: string,
+  centerX: number,
+  centerY: number,
+  radius: number,
+  startAngle: number,
+  endAngle: number,
+  fontSize: number,
+  fontFamily: string = '宋体',
+  isEllipse: boolean = false,
+  ellipseRadiusX?: number,
+  ellipseRadiusY?: number,
+  spacingMultiplier: number = 1,
+) => {
+  if (!text) return;
+
+  const chars = [...text]; // 使用扩展运算符代替split
+  if (chars.length === 0) return;
+
+  // 计算文字间距 - 重新设计更直观的间距算法
+  const totalAngle = endAngle - startAngle;
+  let actualTotalAngle = totalAngle;
+  let angleStep = 0;
+
+  if (chars.length > 1) {
+    // 使用间距倍数直接调整角度分布
+    // spacingMultiplier = 1.0: 正常分布
+    // spacingMultiplier > 1.0: 扩大间距
+    // spacingMultiplier < 1.0: 压缩间距
+    actualTotalAngle = totalAngle * spacingMultiplier;
+
+    // 限制最大和最小角度范围
+    const maxAngle = Math.PI * 1.2; // 最大约 216 度
+    const minAngle = totalAngle * 0.3; // 最小为原角度的30%
+    actualTotalAngle = Math.max(minAngle, Math.min(maxAngle, actualTotalAngle));
+
+    angleStep = actualTotalAngle / (chars.length - 1);
+  }
+
+  ctx.save();
+  ctx.font = `${fontSize}px ${fontFamily}`;
+  ctx.textAlign = 'center';
+  ctx.textBaseline = 'middle';
+
+  chars.forEach((char, index) => {
+    // 计算居中起始角度
+    const centerStartAngle = startAngle + (totalAngle - actualTotalAngle) / 2;
+    const angle = centerStartAngle + angleStep * index;
+
+    let x: number, y: number;
+
+    if (isEllipse && ellipseRadiusX && ellipseRadiusY) {
+      // 椭圆形文字布局：修正椭圆文字位置计算
+      // 对于椭圆，需要根据参数方程正确计算位置
+      const t = angle; // 使用原始角度参数
+      x = centerX + ellipseRadiusX * Math.cos(t);
+      y = centerY + ellipseRadiusY * Math.sin(t);
+    } else {
+      // 圆形文字布局
+      x = centerX + Math.cos(angle) * radius;
+      y = centerY + Math.sin(angle) * radius;
+    }
+
+    ctx.save();
+    ctx.translate(x, y);
+
+    // 调整文字旋转角度
+    if (isEllipse && ellipseRadiusX && ellipseRadiusY) {
+      // 椭圆形的切线角度计算 - 使用椭圆切线公式
+      const dx = -ellipseRadiusX * Math.sin(angle);
+      const dy = ellipseRadiusY * Math.cos(angle);
+      const tangentAngle = Math.atan2(dy, dx);
+      ctx.rotate(tangentAngle);
+    } else {
+      // 圆形的标准旋转
+      ctx.rotate(angle + Math.PI / 2);
+    }
+
+    ctx.fillText(char, 0, 0);
+    ctx.restore();
+  });
+
+  ctx.restore();
+};
+
+// 双线边框绘制函数
+const drawDoubleBorder = (
+  ctx: CanvasRenderingContext2D,
+  centerX: number,
+  centerY: number,
+  config: any,
+) => {
+  if (config.shape === 'ellipse') {
+    // 椭圆双线边框
+    const radiusX = config.width / 2 - config.borderWidth / 2;
+    const radiusY = config.height / 2 - config.borderWidth / 2;
+
+    // 外边框
+    ctx.beginPath();
+    ctx.ellipse(centerX, centerY, radiusX, radiusY, 0, 0, 2 * Math.PI);
+    ctx.lineWidth = config.borderWidth;
+    ctx.stroke();
+
+    // 内边框
+    const innerRadiusX = radiusX - config.borderWidth - config.borderGap;
+    const innerRadiusY = radiusY - config.borderWidth - config.borderGap;
+    if (innerRadiusX > 0 && innerRadiusY > 0) {
+      ctx.beginPath();
+      ctx.ellipse(
+        centerX,
+        centerY,
+        innerRadiusX,
+        innerRadiusY,
+        0,
+        0,
+        2 * Math.PI,
+      );
+      ctx.stroke();
+    }
+  } else {
+    // 圆形双线边框
+    const outerRadius =
+      Math.min(config.width, config.height) / 2 - config.borderWidth / 2;
+
+    // 外边框
+    ctx.beginPath();
+    ctx.arc(centerX, centerY, outerRadius, 0, 2 * Math.PI);
+    ctx.lineWidth = config.borderWidth;
+    ctx.stroke();
+
+    // 内边框
+    const innerRadius = outerRadius - config.borderWidth - config.borderGap;
+    if (innerRadius > 0) {
+      ctx.beginPath();
+      ctx.arc(centerX, centerY, innerRadius, 0, 2 * Math.PI);
+      ctx.stroke();
+    }
+  }
+};
+
+// 从扁平化表单字段构建sealConfig对象
+const buildSealConfig = (currentData: any) => {
+  if (!currentData) return initialFormData.sealConfig;
+  const defaults = initialFormData.sealConfig;
+  const get = (key: string) =>
+    currentData[`sealConfig.${key}`] || defaults[key as keyof typeof defaults];
+  return {
+    width: get('width'),
+    height: get('height'),
+    shape: get('shape'),
+    borderWidth: get('borderWidth'),
+    borderColor: get('borderColor'),
+    backgroundColor: get('backgroundColor'),
+    text: get('text'),
+    topText: get('topText'),
+    bottomText: get('bottomText'),
+    starSize: get('starSize'),
+    fontSize: get('fontSize'),
+    fontColor: get('fontColor'),
+    fontFamily: get('fontFamily'),
+    borderStyle: get('borderStyle'),
+    borderGap: get('borderGap'),
+    topTextArc: get('topTextArc'),
+    bottomTextArc: get('bottomTextArc'),
+    starInnerRatio: get('starInnerRatio'),
+    starRotation: get('starRotation'),
+    topTextSpacing: get('topTextSpacing'),
+    bottomTextSpacing: get('bottomTextSpacing'),
+    renderScale: get('renderScale'),
+  };
+};
+
+// 绘制边框
+const drawSealBorder = (
+  ctx: CanvasRenderingContext2D,
+  config: any,
+  center: { x: number; y: number },
+  outerRadius: number,
+) => {
+  ctx.strokeStyle = config.borderColor;
+  ctx.lineWidth = config.borderWidth;
+
+  if (config.borderStyle === 'double') {
+    drawDoubleBorder(ctx, center.x, center.y, config);
+    return;
+  }
+
+  ctx.beginPath();
+  if (config.shape === 'ellipse') {
+    const radiusX = config.width / 2 - config.borderWidth / 2;
+    const radiusY = config.height / 2 - config.borderWidth / 2;
+    ctx.ellipse(center.x, center.y, radiusX, radiusY, 0, 0, 2 * Math.PI);
+  } else {
+    ctx.arc(center.x, center.y, outerRadius, 0, 2 * Math.PI);
+  }
+  ctx.stroke();
+};
+
+// 绘制顶部环绕文字
+const drawTopArcText = (
+  ctx: CanvasRenderingContext2D,
+  config: any,
+  center: { x: number; y: number },
+  textRadius: number,
+) => {
+  if (!config.topText || (config.shape !== 'circle' && config.shape !== 'ellipse')) return;
+
+  const topTextArcRad = (config.topTextArc * Math.PI) / 180;
+  const startAngle = -Math.PI / 2 - topTextArcRad / 2;
+  const endAngle = -Math.PI / 2 + topTextArcRad / 2;
+  const isEllipse = config.shape === 'ellipse';
+  const finalTextRadius = isEllipse
+    ? (Math.min(config.width, config.height) / 2) * 0.7
+    : textRadius;
+
+  const ellipseTextRadiusX = (config.width / 2) * 0.75;
+  const ellipseTextRadiusY = (config.height / 2) * 0.75;
+
+  drawArcText(
+    ctx,
+    config.topText,
+    center.x,
+    center.y,
+    finalTextRadius,
+    startAngle,
+    endAngle,
+    config.fontSize,
+    config.fontFamily || '宋体',
+    isEllipse,
+    isEllipse ? ellipseTextRadiusX : undefined,
+    isEllipse ? ellipseTextRadiusY : undefined,
+    config.topTextSpacing || 1,
+  );
+};
+
+// 绘制底部横列文字
+const drawBottomText = (
+  ctx: CanvasRenderingContext2D,
+  config: any,
+  center: { x: number; y: number },
+) => {
+  if (!config.bottomText) return;
+
+  ctx.save();
+  let fontSize = Math.max(12, config.fontSize - 4);
+  const text = config.bottomText;
+  const spacingMultiplier = config.bottomTextSpacing || 1;
+  const starSize = config.starSize || 15;
+  const bottomY = center.y + Math.max(25, starSize + 8);
+
+  if (text.length > 6) {
+    fontSize = Math.max(10, config.fontSize - 6);
+  }
+  ctx.font = `${fontSize}px ${config.fontFamily || '宋体'}`;
+  ctx.textAlign = 'center';
+  ctx.textBaseline = 'middle';
+
+  if (spacingMultiplier > 1 && text.length > 1) {
+    const chars = [...text];
+    const charWidth = ctx.measureText('字').width;
+    const totalWidth = charWidth * chars.length * spacingMultiplier;
+    const startX = center.x - totalWidth / 2 + charWidth / 2;
+    chars.forEach((char, index) => {
+      ctx.fillText(
+        char,
+        startX + index * charWidth * spacingMultiplier,
+        bottomY,
+      );
+    });
+  } else {
+    ctx.fillText(text, center.x, bottomY);
+  }
+  ctx.restore();
+};
+
+// 绘制印章预览
+const drawSeal = async () => {
+  const canvas = canvasRef.value;
+  if (!canvas) return;
+
+  const currentData = formRef.value?.getValues();
+  const config = buildSealConfig(currentData);
+
+  const ctx = setupHighQualityCanvas(canvas, config);
+  const dimensions = calculateSealDimensions(config);
+  const { center, outerRadius, textRadius } = dimensions;
+
+  ctx.clearRect(0, 0, config.width, config.height);
+  ctx.strokeStyle = config.borderColor;
+  ctx.fillStyle = config.fontColor;
+  ctx.font = `${config.fontSize}px ${config.fontFamily || '宋体'}`;
+
+  drawSealBorder(ctx, config, center, outerRadius);
+  drawTopArcText(ctx, config, center, textRadius);
+  drawBottomText(ctx, config, center);
+
+  // 绘制中心五角星（总是显示）
+  ctx.fillStyle = config.fontColor;
+  drawProfessionalStar(
+    ctx,
+    center.x,
+    center.y - 5,
+    config.starSize || 15,
+    config.starInnerRatio,
+    config.starRotation,
+    'filled',
+  );
+
+  sealPreviewImage.value = canvas.toDataURL('image/png');
+};
+
+// 使用定时器来确保表单变化时能够触发重绘
+let drawTimer: NodeJS.Timeout | null = null;
+
+const triggerDraw = () => {
+  if (drawTimer) {
+    clearTimeout(drawTimer);
+  }
+  drawTimer = setTimeout(() => {
+    drawSeal();
+  }, 100);
+};
+
+// 监听表单数据变化，实时更新预览
+watch(
+  () => {
+    const formData = formRef.value?.getValues();
+    return formData ? JSON.stringify(formData) : null;
+  },
+  async (newValue) => {
+    if (newValue) {
+      triggerDraw();
+    }
+  },
+  { immediate: false },
+);
+
+// 额外监听sealConfig相关字段的变化
+watch(
+  () => {
+    const formData = formRef.value?.getValues();
+    if (!formData) return null;
+    return {
+      shape: formData['sealConfig.shape'],
+      width: formData['sealConfig.width'],
+      height: formData['sealConfig.height'],
+      borderWidth: formData['sealConfig.borderWidth'],
+      borderColor: formData['sealConfig.borderColor'],
+      text: formData['sealConfig.text'],
+      topText: formData['sealConfig.topText'],
+      bottomText: formData['sealConfig.bottomText'],
+      starSize: formData['sealConfig.starSize'],
+      fontSize: formData['sealConfig.fontSize'],
+      fontColor: formData['sealConfig.fontColor'],
+      topTextSpacing: formData['sealConfig.topTextSpacing'], // 添加间距监听
+      bottomTextSpacing: formData['sealConfig.bottomTextSpacing'], // 添加间距监听
+      topTextArc: formData['sealConfig.topTextArc'], // 添加弧度监听
+    };
+  },
+  () => {
+    triggerDraw();
+  },
+  { deep: true, immediate: false },
+);
+
+// 监听印章名称变化，同步到印章文字
+watch(
+  () => formRef.value?.getValues()?.sealName,
+  async (newName) => {
+    const currentData = formRef.value?.getValues();
+    if (newName && currentData?.sealConfig && !currentData.sealConfig.text) {
+      currentData.sealConfig.text = newName;
+      formRef.value?.setValues(currentData);
+      triggerDraw();
+    }
+  },
+);
+
+// 确保圆形印章宽高一致的辅助函数
+const ensureCircleSync = (data: any) => {
+  if (data?.['sealConfig.shape'] === 'circle') {
+    const width = data['sealConfig.width'] || initialFormData.sealConfig.width;
+    const height =
+      data['sealConfig.height'] || initialFormData.sealConfig.height;
+
+    // 如果宽高不一致，使用宽度作为标准
+    if (width !== height) {
+      data['sealConfig.height'] = width;
+    }
+  }
+  return data;
+};
+
+// 圆形宽高同步：返回需要更新的字段
+const computeCircleSyncUpdates = (
+  newVal: { height?: number; width?: number },
+  oldVal: { height?: number; width?: number },
+  shapeChanged: boolean,
+): Record<string, any> => {
+  const updates: Record<string, any> = {};
+  if (shapeChanged) {
+    const size = Math.max(newVal.width ?? 0, newVal.height ?? 0);
+    if (size && (newVal.width !== size || newVal.height !== size)) {
+      updates['sealConfig.width'] = size;
+      updates['sealConfig.height'] = size;
+    }
+  } else if (newVal.width !== oldVal.width && newVal.width !== newVal.height) {
+    updates['sealConfig.height'] = newVal.width;
+  } else if (
+    newVal.height !== oldVal.height &&
+    newVal.height !== newVal.width
+  ) {
+    updates['sealConfig.width'] = newVal.height;
+  }
+  return updates;
+};
+
+// 椭圆形宽高联动：切换时若宽高相等，给一个默认纵横比
+const computeEllipseSyncUpdates = (
+  newVal: { height?: number; width?: number },
+  shapeChanged: boolean,
+): Record<string, any> => {
+  if (!shapeChanged || newVal.width !== newVal.height) return {};
+  const width = newVal.width ?? initialFormData.sealConfig.width;
+  const autoHeight = Math.round(width * 0.8);
+  return autoHeight > 0 && autoHeight !== newVal.height
+    ? { 'sealConfig.height': autoHeight }
+    : {};
+};
+
+// 计算形状与宽高联动的更新
+const computeShapeSyncUpdates = (
+  newVal: { height?: number; shape?: string; width?: number },
+  oldVal: { height?: number; shape?: string; width?: number },
+): null | Record<string, any> => {
+  const shapeChanged = newVal.shape !== oldVal.shape;
+  let updates: Record<string, any> = {};
+
+  if (newVal.shape === 'circle') {
+    updates = computeCircleSyncUpdates(newVal, oldVal, shapeChanged);
+  } else if (newVal.shape === 'ellipse') {
+    updates = computeEllipseSyncUpdates(newVal, shapeChanged);
+  }
+
+  return Object.keys(updates).length > 0 ? updates : null;
+};
+
+// 监听形状与宽高联动
+watch(
+  () => {
+    const formData = formRef.value?.getValues();
+    return {
+      shape: formData?.['sealConfig.shape'],
+      width: formData?.['sealConfig.width'],
+      height: formData?.['sealConfig.height'],
+    };
+  },
+  (newVal, oldVal) => {
+    if (!newVal || !oldVal) return;
+
+    const currentData = formRef.value?.getValues();
+    if (!currentData) return;
+
+    const updates = computeShapeSyncUpdates(newVal, oldVal);
+    if (updates) {
+      formRef.value?.setValues({ ...currentData, ...updates });
+      triggerDraw();
+    }
+  },
+  { deep: true },
+);
+
+const handleSubmit = async () => {
+  try {
+    loading.value = true;
+
+    // 表单验证
+    const valid = await formRef.value?.validate();
+    if (!valid) {
+      return false;
+    }
+
+    // 生成印章图片
+    await drawSeal();
+
+    const currentFormData = formRef.value?.getValues();
+
+    // 从扁平化字段构建完整的sealConfig对象
+    const sealConfig = {
+      width:
+        currentFormData['sealConfig.width'] || initialFormData.sealConfig.width,
+      height:
+        currentFormData['sealConfig.height'] ||
+        initialFormData.sealConfig.height,
+      shape:
+        currentFormData['sealConfig.shape'] || initialFormData.sealConfig.shape,
+      borderWidth:
+        currentFormData['sealConfig.borderWidth'] ||
+        initialFormData.sealConfig.borderWidth,
+      borderColor:
+        currentFormData['sealConfig.borderColor'] ||
+        initialFormData.sealConfig.borderColor,
+      backgroundColor:
+        currentFormData['sealConfig.backgroundColor'] ||
+        initialFormData.sealConfig.backgroundColor,
+      text:
+        currentFormData['sealConfig.text'] || initialFormData.sealConfig.text,
+      topText:
+        currentFormData['sealConfig.topText'] ||
+        initialFormData.sealConfig.topText,
+      bottomText:
+        currentFormData['sealConfig.bottomText'] ||
+        initialFormData.sealConfig.bottomText,
+      showStar: true, // 总是显示五角星
+      starSize:
+        currentFormData['sealConfig.starSize'] ||
+        initialFormData.sealConfig.starSize,
+      starInnerRatio:
+        currentFormData['sealConfig.starInnerRatio'] ||
+        initialFormData.sealConfig.starInnerRatio,
+      starRotation:
+        currentFormData['sealConfig.starRotation'] ||
+        initialFormData.sealConfig.starRotation,
+      fontSize:
+        currentFormData['sealConfig.fontSize'] ||
+        initialFormData.sealConfig.fontSize,
+      fontColor:
+        currentFormData['sealConfig.fontColor'] ||
+        initialFormData.sealConfig.fontColor,
+      fontFamily:
+        currentFormData['sealConfig.fontFamily'] ||
+        initialFormData.sealConfig.fontFamily,
+
+      // 高级配置
+      borderStyle:
+        currentFormData['sealConfig.borderStyle'] ||
+        initialFormData.sealConfig.borderStyle,
+      borderGap:
+        currentFormData['sealConfig.borderGap'] ||
+        initialFormData.sealConfig.borderGap,
+      topTextArc:
+        currentFormData['sealConfig.topTextArc'] ||
+        initialFormData.sealConfig.topTextArc,
+      bottomTextArc:
+        currentFormData['sealConfig.bottomTextArc'] ||
+        initialFormData.sealConfig.bottomTextArc,
+      topTextSpacing:
+        currentFormData['sealConfig.topTextSpacing'] ||
+        initialFormData.sealConfig.topTextSpacing,
+      bottomTextSpacing:
+        currentFormData['sealConfig.bottomTextSpacing'] ||
+        initialFormData.sealConfig.bottomTextSpacing,
+      renderScale:
+        currentFormData['sealConfig.renderScale'] ||
+        initialFormData.sealConfig.renderScale,
+    };
+
+    // 过滤掉 sealConfig.* 扁平化字段，只保留基础字段
+    const baseData: any = {};
+    for (const [key, value] of Object.entries(currentFormData)) {
+      if (!key.startsWith('sealConfig.')) {
+        baseData[key] = value;
+      }
+    }
+
+    const submitData = {
+      ...baseData,
+      sealImage: sealPreviewImage.value,
+      sealConfig: JSON.stringify(sealConfig),
+      ...(isEdit.value ? { id: props.editData.id } : {}),
+    };
+
+    // 调用API
+    await (isEdit.value
+      ? updateSeal(submitData as SealUpdateRequest)
+      : createSeal(submitData as SealCreateRequest));
+
+    ElMessage.success(isEdit.value ? '更新成功!' : '创建成功!');
+    return true;
+  } catch (error) {
+    console.error('提交失败:', error);
+    ElMessage.error('操作失败，请重试');
+    return false;
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 初始化表单数据
+const initFormData = async (data?: any) => {
+  await nextTick(); // 确保组件完全挂载
+
+  if (data?.id) {
+    try {
+      const res = await getSeal({ id: data.id });
+
+      // 解析sealConfig JSON
+      let sealConfig = initialFormData.sealConfig;
+      if (res.sealConfig) {
+        try {
+          sealConfig = {
+            ...initialFormData.sealConfig,
+            ...JSON.parse(res.sealConfig),
+          };
+        } catch (error) {
+          console.error('解析sealConfig失败:', error);
+        }
+      }
+
+      // 构建包含扁平化字段的表单数据
+      const formValues = {
+        // 基础字段
+        sealName: res.sealName,
+        sealType: res.sealType,
+        status: res.status,
+        isDefault: res.isDefault,
+        description: res.description,
+        recordSort: res.recordSort,
+
+        // sealConfig扁平化字段
+        'sealConfig.width': sealConfig.width,
+        'sealConfig.height': sealConfig.height,
+        'sealConfig.shape': sealConfig.shape,
+        'sealConfig.borderWidth': sealConfig.borderWidth,
+        'sealConfig.borderColor': sealConfig.borderColor,
+        'sealConfig.backgroundColor': sealConfig.backgroundColor,
+        'sealConfig.text': sealConfig.text,
+        'sealConfig.topText': sealConfig.topText,
+        'sealConfig.bottomText': sealConfig.bottomText,
+        'sealConfig.starSize': sealConfig.starSize,
+        'sealConfig.starInnerRatio': sealConfig.starInnerRatio,
+        'sealConfig.starRotation': sealConfig.starRotation,
+        'sealConfig.fontSize': sealConfig.fontSize,
+        'sealConfig.fontColor': sealConfig.fontColor,
+        'sealConfig.fontFamily': sealConfig.fontFamily,
+        'sealConfig.borderStyle': sealConfig.borderStyle,
+        'sealConfig.borderGap': sealConfig.borderGap,
+        'sealConfig.topTextArc': sealConfig.topTextArc,
+        'sealConfig.bottomTextArc': sealConfig.bottomTextArc,
+        'sealConfig.topTextSpacing': sealConfig.topTextSpacing,
+        'sealConfig.bottomTextSpacing': sealConfig.bottomTextSpacing,
+        'sealConfig.renderScale': sealConfig.renderScale,
+
+        // 保持原有的sealConfig对象用于向后兼容
+        sealConfig,
+      };
+
+      // 确保圆形印章宽高同步
+      const syncedFormValues = ensureCircleSync(formValues);
+      formRef.value?.setValues(syncedFormValues);
+
+      await nextTick();
+      drawSeal();
+    } catch (error) {
+      console.error('获取印章详情失败:', error);
+    }
+  } else {
+    // 新增时设置默认值
+    const defaultValues = {
+      ...initialFormData,
+      // 添加扁平化的默认值
+      'sealConfig.width': initialFormData.sealConfig.width,
+      'sealConfig.height': initialFormData.sealConfig.height,
+      'sealConfig.shape': initialFormData.sealConfig.shape,
+      'sealConfig.borderWidth': initialFormData.sealConfig.borderWidth,
+      'sealConfig.borderColor': initialFormData.sealConfig.borderColor,
+      'sealConfig.backgroundColor': initialFormData.sealConfig.backgroundColor,
+      'sealConfig.text': initialFormData.sealConfig.text,
+      'sealConfig.topText': initialFormData.sealConfig.topText,
+      'sealConfig.bottomText': initialFormData.sealConfig.bottomText,
+      'sealConfig.starSize': initialFormData.sealConfig.starSize,
+      'sealConfig.starInnerRatio': initialFormData.sealConfig.starInnerRatio,
+      'sealConfig.starRotation': initialFormData.sealConfig.starRotation,
+      'sealConfig.fontSize': initialFormData.sealConfig.fontSize,
+      'sealConfig.fontColor': initialFormData.sealConfig.fontColor,
+      'sealConfig.fontFamily': initialFormData.sealConfig.fontFamily,
+      'sealConfig.borderStyle': initialFormData.sealConfig.borderStyle,
+      'sealConfig.borderGap': initialFormData.sealConfig.borderGap,
+      'sealConfig.topTextArc': initialFormData.sealConfig.topTextArc,
+      'sealConfig.bottomTextArc': initialFormData.sealConfig.bottomTextArc,
+      'sealConfig.topTextSpacing': initialFormData.sealConfig.topTextSpacing,
+      'sealConfig.bottomTextSpacing':
+        initialFormData.sealConfig.bottomTextSpacing,
+      'sealConfig.renderScale': initialFormData.sealConfig.renderScale,
+    };
+
+    // 确保圆形印章宽高同步
+    const syncedDefaultValues = ensureCircleSync(defaultValues);
+    formRef.value?.setValues(syncedDefaultValues);
+
+    await nextTick();
+    drawSeal();
+  }
+};
+
+onMounted(async () => {
+  await nextTick();
+  // 如果没有编辑数据，设置默认值
+  if (!props.editData?.id) {
+    const defaultValues = {
+      ...initialFormData,
+      // 添加扁平化的默认值
+      'sealConfig.width': initialFormData.sealConfig.width,
+      'sealConfig.height': initialFormData.sealConfig.height,
+      'sealConfig.shape': initialFormData.sealConfig.shape,
+      'sealConfig.borderWidth': initialFormData.sealConfig.borderWidth,
+      'sealConfig.borderColor': initialFormData.sealConfig.borderColor,
+      'sealConfig.backgroundColor': initialFormData.sealConfig.backgroundColor,
+      'sealConfig.text': initialFormData.sealConfig.text,
+      'sealConfig.topText': initialFormData.sealConfig.topText,
+      'sealConfig.bottomText': initialFormData.sealConfig.bottomText,
+      'sealConfig.starSize': initialFormData.sealConfig.starSize,
+      'sealConfig.fontSize': initialFormData.sealConfig.fontSize,
+      'sealConfig.fontColor': initialFormData.sealConfig.fontColor,
+      'sealConfig.fontFamily': initialFormData.sealConfig.fontFamily,
+    };
+
+    // 确保圆形印章宽高同步
+    const syncedDefaultValues = ensureCircleSync(defaultValues);
+    formRef.value?.setValues(syncedDefaultValues);
+    await nextTick();
+    drawSeal();
+  }
+});
+
+// 监听编辑数据变化
+watch(
+  () => props.editData,
+  (newData) => {
+    initFormData(newData);
+  },
+  { immediate: true, deep: true },
+);
+
+// 重置表单
+const resetForm = () => {
+  formRef.value?.reset();
+  const defaultValues = {
+    ...initialFormData,
+    // 添加扁平化的默认值
+    'sealConfig.width': initialFormData.sealConfig.width,
+    'sealConfig.height': initialFormData.sealConfig.height,
+    'sealConfig.shape': initialFormData.sealConfig.shape,
+    'sealConfig.borderWidth': initialFormData.sealConfig.borderWidth,
+    'sealConfig.borderColor': initialFormData.sealConfig.borderColor,
+    'sealConfig.backgroundColor': initialFormData.sealConfig.backgroundColor,
+    'sealConfig.text': initialFormData.sealConfig.text,
+    'sealConfig.topText': initialFormData.sealConfig.topText,
+    'sealConfig.bottomText': initialFormData.sealConfig.bottomText,
+    'sealConfig.starSize': initialFormData.sealConfig.starSize,
+    'sealConfig.fontSize': initialFormData.sealConfig.fontSize,
+    'sealConfig.fontColor': initialFormData.sealConfig.fontColor,
+    'sealConfig.fontFamily': initialFormData.sealConfig.fontFamily,
+  };
+
+  // 确保圆形印章宽高同步
+  const syncedDefaultValues = ensureCircleSync(defaultValues);
+  formRef.value?.setValues(syncedDefaultValues);
+  nextTick(() => {
+    formRef.value?.clearValidate();
+    drawSeal();
+  });
+};
+defineExpose({
+  handleSubmit,
+  resetForm,
+  initFormData,
+});
+</script>
+
+<template>
+  <div class="flex h-full w-full gap-6">
+    <!-- 左侧表单区域 -->
+    <div class="flex-1">
+      <Form
+        ref="formRef"
+        :items="formItems"
+        :initial-values="initialFormData"
+        :show-actions="false"
+        label-width="auto"
+        :use-grid="true"
+        :grid-cols="2"
+        :grid-gutter="20"
+        :disabled="isView"
+      />
+    </div>
+
+    <!-- 右侧预览区域 -->
+    <div class="w-80 flex-shrink-0">
+      <div class="rounded-lg border bg-gray-50 p-4">
+        <h3 class="mb-4 text-lg font-medium">印章预览</h3>
+        <div
+          class="flex min-h-[300px] items-center justify-center overflow-auto rounded-lg border-2 border-dashed border-gray-300 bg-white p-4"
+        >
+          <canvas
+            ref="canvasRef"
+            class="drop-shadow-sm"
+            style="max-width: 100%; height: auto"
+          ></canvas>
+        </div>
+
+        <div class="mt-4 space-y-4">
+          <ElButton
+            type="primary"
+            @click="triggerDraw"
+            :loading="loading"
+            class="w-full"
+            size="small"
+          >
+            刷新预览
+          </ElButton>
+
+          <div class="rounded border border-blue-200 bg-blue-50 p-2 text-xs">
+            <div class="font-medium text-blue-800">提示</div>
+            <p class="mt-1 text-gray-600">修改配置后可实时预览效果</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>