feat:实现文件格式转化页面

upload-file-frontend/src/components/Toolbox/tools/FormatConvert.vue

@@ -1,57 +1,725 @@
+<!-- FileConverter.vue -->
 <template>
-  <div class="format-convert">
+  <div class="container">
-    <el-upload
+    <!-- Main Conversion Area -->
-      drag
+    <div class="conversion-box">
-      :auto-upload="false"
+      <div class="inner-box">
-      :on-change="handleFileChange"
+        <div class="flex-container">
-    >
+          <!-- File Upload Area -->
-      <i class="el-icon-upload"></i>
+          <div class="flex-item">
-      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+            <el-upload
-    </el-upload>
+              ref="upload"
-    <el-select v-model="targetFormat" placeholder="选择目标格式" class="format-select">
+              class="upload-demo"
-      <el-option
+              drag
-        v-for="format in formatOptions"
+              :auto-upload="false"
-        :key="format.value"
+              :on-change="handleFileSelect"
-        :label="format.label"
+              :on-remove="handleRemove"
-        :value="format.value"
+              :limit="1"
-      ></el-option>
+              :show-file-list="false"
-    </el-select>
+            >
-    <el-button type="primary" @click="convert" class="action-btn">转换</el-button>
+              <div class="upload-icon" style="margin-top: 20px;"></div>
+              <div class="el-upload__text">
+                <h3 class="upload-title">拖放文件到这里</h3>
+                <p>或点击选择文件</p>
+              </div>
+              <template #tip>
+                <div class="support-text">支持PDF, DOCX, PPTX, XLSX, JPG, PNG, MP4等格式</div>
+              </template>
+            </el-upload>
+            <div v-if="selectedFile" class="file-info">
+              <div class="file-details">
+                <div class="file-icon"></div>
+                <div class="file-content">
+                  <div class="file-header">
+                    <span class="file-name">{{ selectedFile.name }}</span>
+                    <span class="file-size">{{ formatFileSize(selectedFile.size) }}</span>
+                  </div>
+                  <div class="progress-container">
+                    <div class="progress-bar" :style="{ width: `${uploadProgress}%` }"></div>
+                  </div>
+                </div>
+                <button class="remove-button" @click="resetFileInput">×</button>
+              </div>
+            </div>
+          </div>
+
+          <!-- Conversion Options -->
+          <div class="flex-item">
+            <div class="options-container">
+              <div>
+                <label class="label">原始格式</label>
+                <select v-model="fromFormat" class="select-box" disabled>
+                  <option value="">自动检测</option>
+                  <option v-if="detectedFormat" :value="detectedFormat.value">{{ detectedFormat.text }}</option>
+                </select>
+              </div>
+
+              <div class="swap-container">
+                <button @click="swapFormats" class="swap-button">⇅</button>
+              </div>
+
+              <div>
+                <label class="label">目标格式</label>
+                <select v-model="toFormat" class="select-box">
+                  <option value="">选择目标格式</option>
+                  <optgroup label="文档">
+                    <option value="pdf">PDF</option>
+                    <option value="docx">Word (DOCX)</option>
+                    <option value="pptx">PowerPoint (PPTX)</option>
+                    <option value="xlsx">Excel (XLSX)</option>
+                    <option value="txt">纯文本 (TXT)</option>
+                  </optgroup>
+                  <optgroup label="图像">
+                    <option value="jpg">JPG</option>
+                    <option value="png">PNG</option>
+                    <option value="gif">GIF</option>
+                    <option value="webp">WebP</option>
+                  </optgroup>
+                  <optgroup label="音频">
+                    <option value="mp3">MP3</option>
+                    <option value="wav">WAV</option>
+                    <option value="flac">FLAC</option>
+                  </optgroup>
+                  <optgroup label="视频">
+                    <option value="mp4">MP4</option>
+                    <option value="mov">MOV</option>
+                    <option value="avi">AVI</option>
+                  </optgroup>
+                </select>
+              </div>
+
+              <div class="convert-button-container">
+                <button
+                  @click="startConversion"
+                  :disabled="!selectedFile || !toFormat || isConverting"
+                  class="convert-button"
+                >
+                  <span>开始转换</span>
+                  <span v-show="isConverting" class="spinner"></span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Result Modal -->
+    <div v-if="showResultModal" class="modal-overlay">
+      <div class="modal-content">
+        <div class="modal-inner">
+          <div class="modal-header">
+            <h3 class="modal-title">转换完成!</h3>
+            <button @click="showResultModal = false" class="close-button">×</button>
+          </div>
+          <div class="modal-body">
+            <div class="success-icon"></div>
+            <p class="modal-text">文件已成功转换</p>
+            <div class="modal-buttons">
+              <a :href="downloadLink" :download="downloadFileName" class="download-button">
+                下载文件
+              </a>
+              <button @click="newConversion" class="new-convert-button">
+                新转换
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
+
 <script>
 export default {
-  name: 'FormatConvert',
+  name: 'FileConverter',
   data() {
     return {
-      targetFormat: '',
+      selectedFile: null,
-      formatOptions: [
+      fileList: [],
-        { value: 'pdf', label: 'PDF' },
+      uploadProgress: 0,
-        { value: 'docx', label: 'Word' },
+      fromFormat: '',
-        { value: 'txt', label: 'TXT' }
+      toFormat: '',
+      isConverting: false,
+      showResultModal: false,
+      downloadLink: '',
+      downloadFileName: '',
+      conversionHistory: [
+        { id: 1, name: 'document.pdf', from: 'pdf', to: 'docx', date: '2023-05-15', size: '2.4 MB' },
+        { id: 2, name: 'presentation.pptx', from: 'pptx', to: 'pdf', date: '2023-05-10', size: '5.1 MB' },
+        { id: 3, name: 'image.jpg', from: 'jpg', to: 'png', date: '2023-05-05', size: '1.2 MB' }
       ]
     }
   },
+  computed: {
+    detectedFormat() {
+      if (!this.selectedFile) return null
+      const extension = this.selectedFile.name.split('.').pop().toLowerCase()
+      const formatMap = {
+        'pdf': 'PDF',
+        'doc': 'Word (DOC)',
+        'docx': 'Word (DOCX)',
+        'ppt': 'PowerPoint (PPT)',
+        'pptx': 'PowerPoint (PPTX)',
+        'xls': 'Excel (XLS)',
+        'xlsx': 'Excel (XLSX)',
+        'jpg': 'JPG',
+        'jpeg': 'JPEG',
+        'png': 'PNG',
+        'gif': 'GIF',
+        'mp3': 'MP3',
+        'wav': 'WAV',
+        'mp4': 'MP4',
+        'mov': 'MOV',
+        'avi': 'AVI',
+        'txt': 'Text'
+      }
+      return formatMap[extension] ? { value: extension, text: formatMap[extension] } : { value: extension, text: extension.toUpperCase() }
+    }
+  },
   methods: {
-    handleFileChange(file) {
+    handleFileSelect(file, fileList) {
-      console.log('待转换文件:', file)
+      this.selectedFile = file.raw // 获取原始文件对象
+      this.fileList = fileList
+      if (this.selectedFile) {
+        this.simulateUploadProgress()
+        this.fromFormat = this.detectedFormat ? this.detectedFormat.value : ''
+      }
     },
-    convert() {
+    handleRemove() {
-      this.$message.success('格式转换功能待实现')
+      this.resetFileInput()
+    },
+    simulateUploadProgress() {
+      this.uploadProgress = 0
+      const interval = setInterval(() => {
+        this.uploadProgress += Math.random() * 10
+        if (this.uploadProgress >= 100) {
+          this.uploadProgress = 100
+          clearInterval(interval)
+        }
+      }, 200)
+    },
+    formatFileSize(bytes) {
+      if (bytes === 0) return '0 Bytes'
+      const k = 1024
+      const sizes = ['Bytes', 'KB', 'MB', 'GB']
+      const i = Math.floor(Math.log(bytes) / Math.log(k))
+      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
+    },
+    resetFileInput() {
+      this.selectedFile = null
+      this.fileList = []
+      this.uploadProgress = 0
+      this.fromFormat = ''
+      this.toFormat = ''
+      this.$refs.upload.clearFiles() // 清空上传组件的文件列表
+    },
+    swapFormats() {
+      if (!this.selectedFile) return
+      const temp = this.fromFormat
+      this.fromFormat = this.toFormat
+      this.toFormat = temp
+    },
+    startConversion() {
+      if (!this.selectedFile || !this.toFormat) return
+
+      this.isConverting = true
+      setTimeout(() => {
+        this.isConverting = false
+        
+        const newHistoryItem = {
+          id: Date.now(),
+          name: this.selectedFile.name,
+          from: this.fromFormat || this.selectedFile.name.split('.').pop(),
+          to: this.toFormat,
+          date: new Date().toISOString().split('T')[0],
+          size: this.formatFileSize(this.selectedFile.size)
+        }
+        
+        this.conversionHistory.unshift(newHistoryItem)
+        this.downloadLink = `data:application/octet-stream,${encodeURIComponent(this.selectedFile.name)}`
+        this.downloadFileName = `${this.selectedFile.name.split('.')[0]}.${this.toFormat}`
+        this.showResultModal = true
+      }, 2000)
+    },
+    newConversion() {
+      this.showResultModal = false
+      this.resetFileInput()
     }
   }
 }
 </script>
 
 <style scoped>
-.format-convert {
+.container {
-  padding: 10px;
+  margin: 0 auto;
+  padding: 20px;
+  max-width: 1200px;
 }
-.format-select {
+
-  margin: 15px 0;
+.conversion-box {
-  width: 200px;
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin-bottom: 20px;
 }
-.action-btn {
+
+.inner-box {
+  padding: 20px;
+}
+
+.flex-container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+@media (min-width: 768px) {
+  .flex-container {
+    flex-direction: row;
+  }
+}
+
+.flex-item {
+  flex: 1;
+}
+
+.upload-demo .el-upload-dragger {
+  width: 100%;
+  border: 2px dashed #ccc;
+  border-radius: 8px;
+  padding: 20px;
+  text-align: center;
+  transition: all 0.3s ease;
+}
+
+.upload-demo .el-upload-dragger:hover,
+.upload-demo .el-upload-dragger.is-dragover {
+  border-color: #4a90e2;
+  background-color: #f0f7ff;
+}
+
+.upload-icon {
+  width: 60px;
+  height: 60px;
+  background: #e6f0fa;
+  border-radius: 50%;
+  margin: 0 auto 10px;
+  position: relative;
+}
+
+.upload-icon::before {
+  content: "↑";
+  font-size: 24px;
+  color: #4a90e2;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.upload-title {
+  font-size: 18px;
+  font-weight: 500;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.el-upload__text p {
+  color: #666;
+  margin-bottom: 10px;
+}
+
+.support-text {
+  font-size: 12px;
+  color: #999;
   margin-top: 10px;
 }
+
+.file-info {
+  margin-top: 10px;
+  padding: 10px;
+  background: #f5f5f5;
+  border-radius: 8px;
+}
+
+.file-details {
+  display: flex;
+  align-items: center;
+}
+
+.file-icon {
+  width: 20px;
+  height: 20px;
+  background: #4a90e2;
+  margin-right: 10px;
+  border-radius: 4px;
+}
+
+.file-content {
+  flex: 1;
+}
+
+.file-header {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 4px;
+}
+
+.file-name {
+  font-weight: 500;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.file-size {
+  font-size: 12px;
+  color: #666;
+}
+
+.progress-container {
+  width: 100%;
+  background: #ddd;
+  border-radius: 4px;
+  height: 6px;
+}
+
+.progress-bar {
+  height: 6px;
+  background: #4a90e2;
+  border-radius: 4px;
+  transition: width 0.3s ease;
+}
+
+.remove-button {
+  margin-left: 10px;
+  background: none;
+  border: none;
+  font-size: 18px;
+  color: #999;
+  cursor: pointer;
+}
+
+.remove-button:hover {
+  color: #e74c3c;
+}
+
+.options-container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.label {
+  display: block;
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+  margin-bottom: 4px;
+}
+
+.select-box {
+  width: 100%;
+  padding: 8px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.select-box:focus {
+  outline: none;
+  border-color: #4a90e2;
+  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
+}
+
+.swap-container {
+  text-align: center;
+}
+
+.swap-button {
+  background: #f0f0f0;
+  border: none;
+  padding: 6px;
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 16px;
+  transition: background 0.3s;
+}
+
+.swap-button:hover {
+  background: #e0e0e0;
+}
+
+.convert-button-container {
+  padding-top: 10px;
+}
+
+.convert-button {
+  width: 100%;
+  background: #4a90e2;
+  color: #fff;
+  padding: 12px;
+  border: none;
+  border-radius: 4px;
+  font-weight: 500;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.3s;
+}
+
+.convert-button:disabled {
+  background: #999;
+  cursor: not-allowed;
+}
+
+.convert-button:hover:not(:disabled) {
+  background: #357abd;
+}
+
+.spinner {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  margin-left: 8px;
+  border: 2px solid #fff;
+  border-top: 2px solid transparent;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.history-box {
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.history-header {
+  padding: 15px 20px;
+  border-bottom: 1px solid #eee;
+}
+
+.history-title {
+  font-size: 18px;
+  font-weight: 500;
+  color: #333;
+}
+
+.history-content {
+  border-top: 1px solid #eee;
+}
+
+.empty-history {
+  padding: 20px;
+  text-align: center;
+  color: #666;
+}
+
+.empty-icon {
+  width: 40px;
+  height: 40px;
+  background: #ddd;
+  border-radius: 50%;
+  margin: 0 auto 10px;
+}
+
+.history-item {
+  padding: 15px 20px;
+  transition: all 0.3s;
+}
+
+.history-item:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  background: #fafafa;
+}
+
+.history-item-content {
+  display: flex;
+  align-items: center;
+}
+
+.history-icon {
+  width: 40px;
+  height: 40px;
+  background: #e6f0fa;
+  border-radius: 50%;
+  margin-right: 10px;
+}
+
+.history-details {
+  flex: 1;
+}
+
+.history-name-container {
+  display: flex;
+  justify-content: space-between;
+}
+
+.history-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.history-size {
+  font-size: 12px;
+  color: #666;
+}
+
+.history-format-container {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 4px;
+}
+
+.history-format {
+  font-size: 12px;
+  color: #666;
+}
+
+.format-tag {
+  padding: 2px 6px;
+  background: #f0f0f0;
+  border-radius: 4px;
+}
+
+.arrow {
+  margin: 0 4px;
+}
+
+.history-date {
+  font-size: 12px;
+  color: #999;
+}
+
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 50;
+}
+
+.modal-content {
+  background: #fff;
+  border-radius: 10px;
+  max-width: 400px;
+  width: 100%;
+  margin: 20px;
+}
+
+.modal-inner {
+  padding: 20px;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.modal-title {
+  font-size: 20px;
+  font-weight: bold;
+  color: #333;
+}
+
+.close-button {
+  background: none;
+  border: none;
+  font-size: 18px;
+  color: #999;
+  cursor: pointer;
+}
+
+.close-button:hover {
+  color: #666;
+}
+
+.modal-body {
+  text-align: center;
+  padding: 20px 0;
+}
+
+.success-icon {
+  width: 60px;
+  height: 60px;
+  background: #e6ffe6;
+  border-radius: 50%;
+  margin: 0 auto 10px;
+  position: relative;
+}
+
+.success-icon::before {
+  content: "✓";
+  font-size: 30px;
+  color: #2ecc71;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.modal-text {
+  color: #666;
+  margin-bottom: 20px;
+}
+
+.modal-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+@media (min-width: 640px) {
+  .modal-buttons {
+    flex-direction: row;
+  }
+}
+
+.download-button {
+  flex: 1;
+  background: #4a90e2;
+  color: #fff;
+  padding: 10px;
+  border-radius: 4px;
+  text-decoration: none;
+  text-align: center;
+  transition: background 0.3s;
+}
+
+.download-button:hover {
+  background: #357abd;
+}
+
+.new-convert-button {
+  flex: 1;
+  background: #f0f0f0;
+  color: #333;
+  padding: 10px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background 0.3s;
+}
+
+.new-convert-button:hover {
+  background: #e0e0e0;
+}
 </style>