feat(文件预览): 添加对PDF、Word和Excel文件的预览支持

添加新的文件预览组件，支持PDF、Word(docx)、Excel(xlsx/xls)文件类型预览
重构图片预览为独立组件，并添加相关依赖包

klp-ui/src/components/FilePreview/preview/image/index.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="preview-image">
+    <div class="image-controls">
+      <el-button type="primary" size="small" @click="zoomIn">放大</el-button>
+      <el-button type="primary" size="small" @click="zoomOut">缩小</el-button>
+      <el-button type="primary" size="small" @click="resetZoom">重置</el-button>
+    </div>
+    <div class="image-container" ref="imageContainer">
+      <img
+        :src="src"
+        :style="{ transform: `scale(${scale})` }"
+        class="preview-image-content"
+        @wheel="handleWheel"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ImagePreview",
+  props: {
+    src: {
+      type: String,
+      required: true,
+      description: "图片文件的URL或路径"
+    }
+  },
+  data() {
+    return {
+      scale: 1
+    };
+  },
+  methods: {
+    // 放大图片
+    zoomIn() {
+      if (this.scale < 3) {
+        this.scale += 0.1;
+      }
+    },
+    // 缩小图片
+    zoomOut() {
+      if (this.scale > 0.1) {
+        this.scale -= 0.1;
+      }
+    },
+    // 重置缩放
+    resetZoom() {
+      this.scale = 1;
+    },
+    // 鼠标滚轮缩放
+    handleWheel(event) {
+      event.preventDefault();
+      const delta = event.deltaY > 0 ? -0.1 : 0.1;
+      if ((this.scale > 0.1 || delta > 0) && (this.scale < 3 || delta < 0)) {
+        this.scale += delta;
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+.preview-image {
+  width: 100%;
+  height: 70vh;
+  background-color: #f5f7fa;
+  display: flex;
+  flex-direction: column;
+}
+
+.image-controls {
+  padding: 10px;
+  display: flex;
+  gap: 10px;
+  border-bottom: 1px solid #e4e7ed;
+  background-color: #ffffff;
+}
+
+.image-container {
+  flex: 1;
+  overflow: auto;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  padding: 20px;
+}
+
+.preview-image-content {
+  transition: transform 0.3s ease;
+  cursor: zoom-in;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.preview-image-content:hover {
+  cursor: zoom-in;
+}
+</style>