yg-yygl 0.0.1

package/dist/components/seal/seal-designer.vue

@@ -0,0 +1,289 @@
+<script setup lang="ts">
+import type { SealConfig } from '../api/seal/types';
+import { ref, reactive, watch, onMounted, nextTick } from 'vue';
+import { ElColorPicker, ElInputNumber, ElInput, ElSelect, ElOption } from 'element-plus';
+
+interface Props {
+  modelValue?: SealConfig;
+  readonly?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: () => ({
+    width: 120,
+    height: 120,
+    borderWidth: 3,
+    borderColor: '#ff0000',
+    backgroundColor: 'transparent',
+    fontSize: 16,
+    fontFamily: '宋体',
+    fontColor: '#ff0000',
+    text: '印章文字',
+    shape: 'circle',
+  }),
+  readonly: false,
+});
+
+const emits = defineEmits<{
+  'update:modelValue': [value: SealConfig];
+  'change': [value: SealConfig];
+}>();
+
+const canvasRef = ref<HTMLCanvasElement>();
+const config = reactive<SealConfig>({ ...props.modelValue });
+
+const fontFamilyOptions = [
+  { label: '宋体', value: '宋体' },
+  { label: '黑体', value: '黑体' },
+  { label: '楷体', value: '楷体' },
+  { label: '微软雅黑', value: '微软雅黑' },
+];
+
+const shapeOptions = [
+  { label: '圆形', value: 'circle' },
+  { label: '椭圆', value: 'oval' },
+  { label: '方形', value: 'square' },
+];
+
+// 绘制印章
+const drawSeal = async () => {
+  await nextTick();
+  if (!canvasRef.value) return;
+  
+  const canvas = canvasRef.value;
+  const ctx = canvas.getContext('2d')!;
+  
+  // 设置画布尺寸
+  canvas.width = config.width;
+  canvas.height = config.height;
+  
+  // 清空画布
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  
+  const centerX = config.width / 2;
+  const centerY = config.height / 2;
+  
+  // 绘制背景
+  if (config.backgroundColor !== 'transparent') {
+    ctx.fillStyle = config.backgroundColor;
+    if (config.shape === 'circle') {
+      ctx.beginPath();
+      ctx.arc(centerX, centerY, Math.min(centerX, centerY) - config.borderWidth / 2, 0, 2 * Math.PI);
+      ctx.fill();
+    } else if (config.shape === 'square') {
+      ctx.fillRect(0, 0, config.width, config.height);
+    } else if (config.shape === 'oval') {
+      ctx.beginPath();
+      ctx.ellipse(centerX, centerY, centerX - config.borderWidth / 2, centerY - config.borderWidth / 2, 0, 0, 2 * Math.PI);
+      ctx.fill();
+    }
+  }
+  
+  // 绘制边框
+  ctx.strokeStyle = config.borderColor;
+  ctx.lineWidth = config.borderWidth;
+  
+  if (config.shape === 'circle') {
+    ctx.beginPath();
+    ctx.arc(centerX, centerY, Math.min(centerX, centerY) - config.borderWidth / 2, 0, 2 * Math.PI);
+    ctx.stroke();
+  } else if (config.shape === 'square') {
+    ctx.strokeRect(config.borderWidth / 2, config.borderWidth / 2, 
+                   config.width - config.borderWidth, config.height - config.borderWidth);
+  } else if (config.shape === 'oval') {
+    ctx.beginPath();
+    ctx.ellipse(centerX, centerY, centerX - config.borderWidth / 2, centerY - config.borderWidth / 2, 0, 0, 2 * Math.PI);
+    ctx.stroke();
+  }
+  
+  // 绘制文字
+  ctx.fillStyle = config.fontColor;
+  ctx.font = `${config.fontSize}px ${config.fontFamily}`;
+  ctx.textAlign = 'center';
+  ctx.textBaseline = 'middle';
+  
+  // 处理多行文字
+  const lines = config.text.split('\n');
+  const lineHeight = config.fontSize * 1.2;
+  const startY = centerY - ((lines.length - 1) * lineHeight) / 2;
+  
+  lines.forEach((line, index) => {
+    ctx.fillText(line, centerX, startY + index * lineHeight);
+  });
+};
+
+// 获取印章Base64数据
+const getSealImage = (): string => {
+  if (!canvasRef.value) return '';
+  return canvasRef.value.toDataURL('image/png');
+};
+
+// 监听配置变化
+watch(config, (newConfig) => {
+  emits('update:modelValue', { ...newConfig });
+  emits('change', { ...newConfig });
+  drawSeal();
+}, { deep: true });
+
+// 监听props变化
+watch(() => props.modelValue, (newValue) => {
+  Object.assign(config, newValue);
+  drawSeal();
+}, { deep: true, immediate: true });
+
+onMounted(() => {
+  drawSeal();
+});
+
+// 暴露方法
+defineExpose({
+  getSealImage,
+  drawSeal,
+});
+</script>
+
+<template>
+  <div class="seal-designer">
+    <div class="design-panel" v-if="!readonly">
+      <div class="config-section">
+        <h4>基础设置</h4>
+        <div class="config-item">
+          <label>印章名称:</label>
+          <ElInput v-model="config.text" placeholder="请输入印章名称" />
+        </div>
+        <div class="config-item">
+          <label>印章形状:</label>
+          <ElSelect v-model="config.shape" placeholder="请选择形状">
+            <ElOption 
+              v-for="option in shapeOptions" 
+              :key="option.value" 
+              :label="option.label" 
+              :value="option.value" 
+            />
+          </ElSelect>
+        </div>
+        <div class="config-item">
+          <label>宽度:</label>
+          <ElInputNumber v-model="config.width" :min="50" :max="200" />
+        </div>
+        <div class="config-item">
+          <label>高度:</label>
+          <ElInputNumber v-model="config.height" :min="50" :max="200" />
+        </div>
+      </div>
+      
+      <div class="config-section">
+        <h4>边框设置</h4>
+        <div class="config-item">
+          <label>边框颜色:</label>
+          <ElColorPicker v-model="config.borderColor" />
+        </div>
+        <div class="config-item">
+          <label>边框宽度:</label>
+          <ElInputNumber v-model="config.borderWidth" :min="1" :max="10" />
+        </div>
+      </div>
+      
+      <div class="config-section">
+        <h4>文字设置</h4>
+        <div class="config-item">
+          <label>文字颜色:</label>
+          <ElColorPicker v-model="config.fontColor" />
+        </div>
+        <div class="config-item">
+          <label>字体大小:</label>
+          <ElInputNumber v-model="config.fontSize" :min="8" :max="48" />
+        </div>
+        <div class="config-item">
+          <label>字体:</label>
+          <ElSelect v-model="config.fontFamily" placeholder="请选择字体">
+            <ElOption 
+              v-for="option in fontFamilyOptions" 
+              :key="option.value" 
+              :label="option.label" 
+              :value="option.value" 
+            />
+          </ElSelect>
+        </div>
+      </div>
+    </div>
+    
+    <div class="preview-panel">
+      <h4>预览效果</h4>
+      <div class="canvas-container">
+        <canvas ref="canvasRef" class="seal-canvas"></canvas>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.seal-designer {
+  display: flex;
+  gap: 20px;
+  height: 100%;
+}
+
+.design-panel {
+  flex: 1;
+  max-width: 300px;
+  overflow-y: auto;
+}
+
+.preview-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.config-section {
+  margin-bottom: 20px;
+  padding: 15px;
+  border: 1px solid #eee;
+  border-radius: 4px;
+}
+
+.config-section h4 {
+  margin: 0 0 15px 0;
+  color: #333;
+  font-weight: 600;
+}
+
+.config-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.config-item label {
+  width: 80px;
+  text-align: right;
+  margin-right: 10px;
+  font-size: 14px;
+  flex-shrink: 0;
+}
+
+.config-item :deep(.el-input),
+.config-item :deep(.el-select),
+.config-item :deep(.el-input-number),
+.config-item :deep(.el-color-picker) {
+  flex: 1;
+}
+
+.canvas-container {
+  padding: 20px;
+  border: 1px dashed #ccc;
+  border-radius: 4px;
+  background: #f9f9f9;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.seal-canvas {
+  max-width: 100%;
+  border: 1px solid #ddd;
+  background: white;
+}
+</style>

package/dist/components/seal/seal-designer.vue.d.ts

@@ -0,0 +1,19 @@
+import type { SealConfig } from '../api/seal/types';
+interface Props {
+    modelValue?: SealConfig;
+    readonly?: boolean;
+}
+declare const _default: import("vue").DefineComponent<Props, {
+    getSealImage: () => string;
+    drawSeal: () => Promise<void>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: SealConfig) => any;
+    change: (value: SealConfig) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: SealConfig) => any) | undefined;
+    onChange?: ((value: SealConfig) => any) | undefined;
+}>, {
+    modelValue: SealConfig;
+    readonly: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/seal/seal-selector.d.vue.ts

@@ -0,0 +1,25 @@
+interface Props {
+    modelValue?: number[];
+    multiple?: boolean;
+    disabled?: boolean;
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number[]) => any;
+    change: (value: number[]) => any;
+    sign: (sealId: number, position: {
+        x: number;
+        y: number;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number[]) => any) | undefined;
+    onChange?: ((value: number[]) => any) | undefined;
+    onSign?: ((sealId: number, position: {
+        x: number;
+        y: number;
+    }) => any) | undefined;
+}>, {
+    modelValue: number[];
+    disabled: boolean;
+    multiple: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/seal/seal-selector.vue

@@ -0,0 +1,272 @@
+<script setup lang="ts">
+import type { Seal } from '../api/seal/types';
+import { ref, computed, onMounted } from 'vue';
+import { getSealList } from '../api/seal';
+import { ElMessage } from 'element-plus';
+
+interface Props {
+  modelValue?: number[];
+  multiple?: boolean;
+  disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: () => [],
+  multiple: false,
+  disabled: false,
+});
+
+const emits = defineEmits<{
+  'update:modelValue': [value: number[]];
+  'change': [value: number[]];
+  'sign': [sealId: number, position: { x: number; y: number }];
+}>();
+
+const sealList = ref<Seal[]>([]);
+const selectedSeals = ref<number[]>([...props.modelValue]);
+const draggedSeal = ref<Seal>();
+const isDragging = ref(false);
+const loading = ref(false);
+
+// 计算属性
+const availableSeals = computed(() => 
+  sealList.value.filter(seal => seal.status === 1)
+);
+
+// 获取印章列表
+const fetchSeals = async () => {
+  try {
+    loading.value = true;
+    const result = await getSealList({ 
+      current: 1, 
+      size: 100, 
+      model: { status: 1 } 
+    });
+    sealList.value = result.records;
+  } catch (error) {
+    console.error('获取印章列表失败:', error);
+    ElMessage.error('获取印章列表失败');
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 选择印章
+const handleSealSelect = (seal: Seal) => {
+  if (props.disabled) return;
+  
+  const sealId = seal.id;
+  let newSelected = [...selectedSeals.value];
+  
+  if (props.multiple) {
+    const index = newSelected.indexOf(sealId);
+    if (index > -1) {
+      newSelected.splice(index, 1);
+    } else {
+      newSelected.push(sealId);
+    }
+  } else {
+    newSelected = newSelected.includes(sealId) ? [] : [sealId];
+  }
+  
+  selectedSeals.value = newSelected;
+  emits('update:modelValue', newSelected);
+  emits('change', newSelected);
+};
+
+// 开始拖拽印章
+const handleDragStart = (event: DragEvent, seal: Seal) => {
+  if (props.disabled) return;
+  
+  draggedSeal.value = seal;
+  isDragging.value = true;
+  
+  // 设置拖拽数据
+  if (event.dataTransfer) {
+    event.dataTransfer.setData('application/json', JSON.stringify(seal));
+    event.dataTransfer.effectAllowed = 'copy';
+  }
+};
+
+// 拖拽结束
+const handleDragEnd = () => {
+  draggedSeal.value = undefined;
+  isDragging.value = false;
+};
+
+onMounted(() => {
+  fetchSeals();
+});
+</script>
+
+<template>
+  <div class="seal-signature" v-loading="loading">
+    <div class="seal-list">
+      <h4>可用印章</h4>
+      <div class="seal-grid" v-if="availableSeals.length > 0">
+        <div
+          v-for="seal in availableSeals"
+          :key="seal.id"
+          class="seal-item"
+          :class="{ 
+            'selected': selectedSeals.includes(seal.id),
+            'disabled': disabled,
+            'dragging': draggedSeal?.id === seal.id
+          }"
+          draggable="true"
+          @click="handleSealSelect(seal)"
+          @dragstart="handleDragStart($event, seal)"
+          @dragend="handleDragEnd"
+        >
+          <div class="seal-preview">
+            <img 
+              v-if="seal.sealImage" 
+              :src="seal.sealImage" 
+              :alt="seal.sealName"
+              class="seal-image"
+            />
+            <div v-else class="seal-placeholder">
+              {{ seal.sealName }}
+            </div>
+          </div>
+          <div class="seal-name">{{ seal.sealName }}</div>
+          <div class="seal-type">{{ seal.sealTypeName }}</div>
+        </div>
+      </div>
+      <div v-else class="empty-state">
+        <p>暂无可用印章</p>
+      </div>
+    </div>
+    
+    <div class="selected-seals" v-if="selectedSeals.length > 0">
+      <h4>已选择的印章</h4>
+      <div class="selected-list">
+        <div
+          v-for="sealId in selectedSeals"
+          :key="sealId"
+          class="selected-item"
+        >
+          {{ sealList.find(s => s.id === sealId)?.sealName }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.seal-signature {
+  padding: 20px;
+}
+
+.seal-list h4,
+.selected-seals h4 {
+  margin: 0 0 15px 0;
+  color: #333;
+  font-weight: 600;
+}
+
+.seal-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 15px;
+}
+
+.seal-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 10px;
+  border: 2px solid #eee;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s;
+  user-select: none;
+}
+
+.seal-item:hover:not(.disabled) {
+  border-color: #409eff;
+  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
+}
+
+.seal-item.selected {
+  border-color: #409eff;
+  background-color: #f0f9ff;
+}
+
+.seal-item.disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.seal-item.dragging {
+  opacity: 0.5;
+}
+
+.seal-preview {
+  width: 60px;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 8px;
+}
+
+.seal-image {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.seal-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f5f5f5;
+  border-radius: 50%;
+  font-size: 12px;
+  color: #666;
+  text-align: center;
+}
+
+.seal-name {
+  font-size: 14px;
+  color: #333;
+  text-align: center;
+  word-break: break-all;
+  margin-bottom: 4px;
+}
+
+.seal-type {
+  font-size: 12px;
+  color: #666;
+  text-align: center;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 40px 20px;
+  color: #999;
+}
+
+.selected-seals {
+  margin-top: 20px;
+  padding-top: 20px;
+  border-top: 1px solid #eee;
+}
+
+.selected-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.selected-item {
+  padding: 4px 12px;
+  background: #409eff;
+  color: white;
+  border-radius: 14px;
+  font-size: 14px;
+}
+</style>

package/dist/components/seal/seal-selector.vue.d.ts

@@ -0,0 +1,25 @@
+interface Props {
+    modelValue?: number[];
+    multiple?: boolean;
+    disabled?: boolean;
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number[]) => any;
+    change: (value: number[]) => any;
+    sign: (sealId: number, position: {
+        x: number;
+        y: number;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number[]) => any) | undefined;
+    onChange?: ((value: number[]) => any) | undefined;
+    onSign?: ((sealId: number, position: {
+        x: number;
+        y: number;
+    }) => any) | undefined;
+}>, {
+    modelValue: number[];
+    disabled: boolean;
+    multiple: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/upload-img/index.d.ts

@@ -0,0 +1 @@
+export { default as UploadImg } from './src/upload-img.vue';

package/dist/components/upload-img/index.mjs

@@ -0,0 +1 @@
+export { default as UploadImg } from "./src/upload-img.vue";

package/dist/components/upload-img/src/upload-img.d.vue.ts

@@ -0,0 +1,35 @@
+import type { UploadProps, UploadUserFile } from 'element-plus';
+interface Props {
+    modelValue: string | undefined;
+    action?: string;
+    autoUpload?: boolean;
+    compress?: boolean;
+    limitSize?: number;
+    maxWidth?: number;
+    maxHeight?: number;
+    quality?: number;
+    valueType?: 'base64' | 'url';
+    onError?: UploadProps['onError'];
+    onExceed?: UploadProps['onExceed'];
+    accept?: string[];
+    clearable?: boolean;
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    action: string;
+    onError: (error: Error, uploadFile: import("element-plus").UploadFile, uploadFiles: import("element-plus").UploadFiles) => void;
+    clearable: boolean;
+    accept: string[];
+    autoUpload: boolean;
+    onExceed: (files: File[], uploadFiles: UploadUserFile[]) => void;
+    maxHeight: number;
+    maxWidth: number;
+    compress: boolean;
+    limitSize: number;
+    quality: number;
+    valueType: "base64" | "url";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;