hrp-ui-base 1.1.0 → 1.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hrp-ui-base",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "description": "HRP 前端公共组件、工具方法和基础样式包",
   "type": "module",
   "sideEffects": [
@@ -81,8 +81,10 @@
     "lodash": "^4.17.21",
     "mathjs": "^13.1.1",
     "moment": "^2.29.4",
+    "qrcode.vue": "^3.6.0",
     "qs": "^6.11.0",
     "sm-crypto": "^0.3.11",
+    "vue-cropper": "^1.1.4",
     "vuedraggable": "^4.1.0"
   },
   "devDependencies": {

package/src/components/layout/LayoutContainer.vue

@@ -77,6 +77,8 @@
   <ExportCenterDrawer v-model:visible="exportDrawerVisible" />
   <!-- 审批中心抽屉 -->
   <ApprovalCenterDrawer v-model:visible="approvalDrawerVisible" />
+  <!-- 个人签名弹窗 -->
+  <PersonalSignDialog ref="personalSignDialogRef" />
 </template>
 
 <script lang="ts" setup>
@@ -97,6 +99,7 @@ import SideMenu from "./sideMenu.vue";
 import PersonalizationGuideDialog from "./personalization-guide-dialog.vue";
 import ExportCenterDrawer from "./ExportCenterDrawer.vue";
 import ApprovalCenterDrawer from "./ApprovalCenterDrawer.vue";
+import PersonalSignDialog from "./personal-sign/PersonalSignDialog.vue";
 import { useLayoutConfigStore } from "./stores/useLayoutConfigStore";
 import { useLayoutMenuStore } from "./stores/useLayoutMenuStore";
 import { useLayoutTabsStore } from "./stores/useLayoutTabsStore";
@@ -273,8 +276,9 @@ const handleMessageUpdateCount = async () => {
   updateNum.value += 1;
 };
 
+const personalSignDialogRef = ref<InstanceType<typeof PersonalSignDialog>>();
 const handlePersonalSign = () => {
-  // TODO: 打开签名弹窗
+  personalSignDialogRef.value?.open();
 };
 
 const handleCleanCache = () => {

package/src/components/layout/personal-sign/ImageCropper.vue

@@ -0,0 +1,187 @@
+<template>
+  <el-dialog v-model="dialogVisible" title="裁剪签名图片" width="560px" @close="closeDialog">
+    <div class="cropper-content">
+      <div class="cropper-container">
+        <vue-cropper 
+          v-if="showCropper" 
+          class="crop" 
+          ref="cropperRef" 
+          :autoCrop="option.autoCrop"
+          :autoCropHeight="option.autoCropHeight" 
+          :autoCropWidth="option.autoCropWidth" 
+          :canMove="option.canMove"
+          :canScale="option.canScale" 
+          :centerBox="option.centerBox" 
+          :fixed="option.fixed" 
+          :fixedBox="option.fixedBox"
+          :fixedNumber="option.fixedNumber" 
+          :img="currentFile" 
+          :info-true="option.infoTrue" 
+          :mode="option.mode"
+          :origin="option.origin" 
+          :outputSize="option.outputSize" 
+          :outputType="option.outputType"
+        ></vue-cropper>
+      </div>
+      
+      <!-- 旋转控制按钮 -->
+      <div class="rotate-controls">
+        <el-button-group>
+          <el-button size="small" @click="rotateLeft" :icon="RefreshLeft">
+            左旋转90°
+          </el-button>
+          <el-button size="small" @click="rotateRight" :icon="RefreshRight">
+            右旋转90°
+          </el-button>
+        </el-button-group>
+      </div>
+    </div>
+    
+    <template #footer>
+      <el-button @click="dialogVisible = false">取消</el-button>
+      <el-button type="primary" @click="confirmCrop" :loading="submitLoading">确定</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, nextTick } from "vue";
+import { ElMessage } from "element-plus";
+import { RefreshLeft, RefreshRight } from '@element-plus/icons-vue';
+
+const emits = defineEmits(["success"]);
+
+const submitLoading = ref<boolean>(false)
+
+const option = ref({
+  autoCrop: true,
+  autoCropHeight: 100,
+  autoCropWidth: 133,
+  canMove: true,
+  canScale: true,
+  centerBox: true,
+  fixed: true,
+  fixedBox: false,
+  fixedNumber: [133, 100],
+  infoTrue: true,
+  mode: "contain",
+  origin: false,
+  outputSize: 1,
+  outputType: "png",
+});
+
+const showCropper = ref(false);
+const dialogVisible = ref(false);
+const cropperRef = ref<any>();
+const currentFile = ref<any>();
+
+// 打开裁剪弹框
+const open = async (file: File | Blob) => {
+  try {
+    dialogVisible.value = true;
+    currentFile.value = await fileToBase64(file);
+    await nextTick();
+    setTimeout(() => {
+      showCropper.value = true;
+    }, 10);
+  } catch (error) {
+    console.error('打开裁剪器失败:', error);
+    ElMessage.error("打开裁剪器失败，请重试!");
+  }
+};
+
+// 文件转 Base64
+const fileToBase64 = (file: File | Blob): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result as string);
+    reader.onerror = (error) => reject(error);
+  });
+};
+
+// Base64 转 Blob
+function base64ToBlob(base64String: string, mimeType: string): Blob {
+  const byteString = atob(base64String.split(',')[1]);
+  const ab = new ArrayBuffer(byteString.length);
+  const ia = new Uint8Array(ab);
+
+  for (let i = 0; i < byteString.length; i++) {
+    ia[i] = byteString.charCodeAt(i);
+  }
+
+  return new Blob([ab], { type: mimeType });
+}
+
+// 确认裁剪
+const confirmCrop = async () => {
+  submitLoading.value = true;
+  try {
+    cropperRef.value?.getCropData((data: string) => {
+      if (data) {
+        const croppedBlob = base64ToBlob(data, 'image/png');
+        emits("success", croppedBlob);
+        dialogVisible.value = false;
+        showCropper.value = false;
+      }
+      submitLoading.value = false;
+    });
+  } catch (error) {
+    ElMessage.error("裁剪图片失败!");
+    submitLoading.value = false;
+  }
+};
+
+// 左旋转90度
+const rotateLeft = () => {
+  cropperRef.value?.rotateLeft();
+};
+
+// 右旋转90度
+const rotateRight = () => {
+  cropperRef.value?.rotateRight();
+};
+
+// 关闭弹框
+const closeDialog = () => {
+  showCropper.value = false;
+  currentFile.value = null;
+};
+
+defineExpose({
+  open,
+});
+</script>
+
+<style scoped lang="scss">
+.cropper-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  width: 100%;
+}
+
+.cropper-container {
+  width: 500px;
+  height: 400px;
+  position: relative;
+}
+
+.crop {
+  width: 100%;
+  height: 100%;
+}
+
+.rotate-controls {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 8px 0;
+  
+  .el-button-group {
+    display: flex;
+    gap: 0;
+  }
+}
+</style>