@huyooo/file-explorer-frontend-vue 0.4.2

package/src/components/CompressDialog.vue

@@ -0,0 +1,478 @@
+<template>
+  <Teleport to="body">
+    <div v-if="visible" class="compress-dialog-overlay" @click="emit('cancel')">
+      <div class="compress-dialog" @click.stop>
+        <!-- 头部 -->
+        <div class="compress-dialog-header">
+          <div class="compress-dialog-title">
+            <Archive :size="20" />
+            <span>压缩文件</span>
+          </div>
+          <button class="compress-dialog-close" @click="emit('cancel')">
+            <X :size="18" />
+          </button>
+        </div>
+
+        <!-- 内容 -->
+        <div class="compress-dialog-content">
+          <!-- 文件信息 -->
+          <div class="compress-dialog-info">
+            <FileArchive :size="16" />
+            <span>{{ fileDisplayName }}</span>
+          </div>
+
+          <!-- 输出文件名 -->
+          <div class="compress-dialog-field">
+            <label>文件名</label>
+            <div class="compress-dialog-input-group">
+              <input
+                type="text"
+                v-model="outputName"
+                placeholder="输入文件名"
+              />
+              <span class="compress-dialog-ext">{{ currentExt }}</span>
+            </div>
+          </div>
+
+          <!-- 压缩格式 -->
+          <div class="compress-dialog-field">
+            <label>压缩格式</label>
+            <select v-model="format">
+              <option v-for="opt in FORMAT_OPTIONS" :key="opt.value" :value="opt.value">
+                {{ opt.label }}
+              </option>
+            </select>
+          </div>
+
+          <!-- 压缩级别 -->
+          <div class="compress-dialog-field">
+            <label>压缩级别</label>
+            <div class="compress-dialog-levels">
+              <label v-for="opt in LEVEL_OPTIONS" :key="opt.value" class="compress-dialog-level">
+                <input
+                  type="radio"
+                  name="level"
+                  :value="opt.value"
+                  v-model="level"
+                />
+                <span class="compress-dialog-level-label">{{ opt.label }}</span>
+                <span class="compress-dialog-level-desc">{{ opt.desc }}</span>
+              </label>
+            </div>
+          </div>
+
+          <!-- 密码保护（仅 zip/7z） -->
+          <div v-if="supportsPassword" class="compress-dialog-field">
+            <label>密码保护（可选）</label>
+            <div class="compress-dialog-input-group">
+              <input
+                :type="showPassword ? 'text' : 'password'"
+                v-model="password"
+                placeholder="设置密码"
+              />
+              <button
+                type="button"
+                class="compress-dialog-toggle-password"
+                @click="showPassword = !showPassword"
+              >
+                {{ showPassword ? '隐藏' : '显示' }}
+              </button>
+            </div>
+          </div>
+
+          <!-- 删除源文件选项 -->
+          <div class="compress-dialog-field compress-dialog-checkbox">
+            <label>
+              <input type="checkbox" v-model="deleteSource" />
+              <span>压缩后删除源文件</span>
+            </label>
+          </div>
+
+          <!-- 输出路径预览 -->
+          <div class="compress-dialog-preview">
+            <span class="compress-dialog-preview-label">输出位置:</span>
+            <span class="compress-dialog-preview-path">{{ fullOutputPath }}</span>
+          </div>
+        </div>
+
+        <!-- 底部按钮 -->
+        <div class="compress-dialog-footer">
+          <button class="compress-dialog-btn compress-dialog-btn-cancel" @click="emit('cancel')">
+            取消
+          </button>
+          <button 
+            class="compress-dialog-btn compress-dialog-btn-confirm" 
+            @click="handleConfirm"
+            :disabled="!outputName.trim()"
+          >
+            压缩
+          </button>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import { Archive, FileArchive, X } from 'lucide-vue-next';
+import type { CompressFormat, CompressLevel, CompressOptions } from '../types';
+
+type CompressDialogOptions = Omit<CompressOptions, 'outputDir'>;
+
+interface Props {
+  visible: boolean;
+  filePaths: string[];
+  outputDir: string;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  confirm: [options: CompressDialogOptions];
+  cancel: [];
+}>();
+
+/** 格式选项配置 */
+const FORMAT_OPTIONS: { value: CompressFormat; label: string; ext: string }[] = [
+  { value: 'zip', label: 'ZIP', ext: '.zip' },
+  { value: 'tgz', label: 'TAR.GZ (gzip)', ext: '.tar.gz' },
+  { value: 'tarbz2', label: 'TAR.BZ2 (bzip2)', ext: '.tar.bz2' },
+  { value: 'tar', label: 'TAR (无压缩)', ext: '.tar' },
+];
+
+/** 压缩级别选项 */
+const LEVEL_OPTIONS = [
+  { value: 'fast', label: '快速', desc: '压缩速度快，文件较大' },
+  { value: 'normal', label: '标准', desc: '平衡速度和大小' },
+  { value: 'best', label: '最佳', desc: '文件最小，速度较慢' },
+] as const;
+
+const format = ref<CompressFormat>('zip');
+const level = ref<CompressLevel>('normal');
+const outputName = ref('');
+const deleteSource = ref(false);
+const password = ref('');
+const showPassword = ref(false);
+
+// 根据选中文件生成默认输出名称
+const defaultOutputName = computed(() => {
+  if (props.filePaths.length === 0) return 'archive';
+  if (props.filePaths.length === 1) {
+    const name = props.filePaths[0].split('/').pop() || 'archive';
+    return name.replace(/\.[^.]+$/, '');
+  }
+  return '压缩文件';
+});
+
+// 文件显示名称
+const fileDisplayName = computed(() => {
+  if (props.filePaths.length === 1) {
+    return props.filePaths[0].split('/').pop();
+  }
+  return `${props.filePaths.length} 个项目`;
+});
+
+// 当前格式的扩展名
+const currentExt = computed(() => {
+  return FORMAT_OPTIONS.find(f => f.value === format.value)?.ext || '.zip';
+});
+
+// 完整输出路径预览
+const fullOutputPath = computed(() => {
+  return `${props.outputDir}/${outputName.value}${currentExt.value}`;
+});
+
+// 是否支持密码
+const supportsPassword = computed(() => {
+  // 当前后端未实现密码压缩，避免 UI 误导：直接关闭密码选项
+  return false;
+});
+
+// 初始化
+watch(() => props.visible, (visible) => {
+  if (visible) {
+    outputName.value = defaultOutputName.value;
+    format.value = 'zip';
+    level.value = 'normal';
+    deleteSource.value = false;
+    password.value = '';
+  }
+});
+
+const handleConfirm = () => {
+  emit('confirm', {
+    format: format.value,
+    level: level.value,
+    outputName: outputName.value + currentExt.value,
+    deleteSource: deleteSource.value,
+  });
+};
+</script>
+
+<style scoped>
+.compress-dialog-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10000;
+}
+
+.compress-dialog {
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+  width: 420px;
+  max-width: 90vw;
+  max-height: 90vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.compress-dialog-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid rgb(229, 231, 233);
+}
+
+.compress-dialog-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 600;
+  font-size: 16px;
+  color: rgb(17, 24, 39);
+}
+
+.compress-dialog-close {
+  background: none;
+  border: none;
+  padding: 4px;
+  cursor: pointer;
+  color: rgb(107, 114, 128);
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.compress-dialog-close:hover {
+  background: rgb(243, 244, 246);
+  color: rgb(55, 65, 81);
+}
+
+.compress-dialog-content {
+  padding: 20px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.compress-dialog-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px;
+  background: rgb(249, 250, 251);
+  border-radius: 8px;
+  color: rgb(55, 65, 81);
+  font-size: 14px;
+}
+
+.compress-dialog-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.compress-dialog-field > label {
+  font-size: 13px;
+  font-weight: 500;
+  color: rgb(55, 65, 81);
+}
+
+.compress-dialog-input-group {
+  display: flex;
+  align-items: stretch;
+}
+
+.compress-dialog-input-group input {
+  flex: 1;
+  padding: 8px 12px;
+  border: 1px solid rgb(209, 213, 219);
+  border-radius: 6px 0 0 6px;
+  font-size: 14px;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.compress-dialog-input-group input:focus {
+  border-color: rgb(59, 130, 246);
+}
+
+.compress-dialog-ext {
+  padding: 8px 12px;
+  background: rgb(243, 244, 246);
+  border: 1px solid rgb(209, 213, 219);
+  border-left: none;
+  border-radius: 0 6px 6px 0;
+  font-size: 14px;
+  color: rgb(107, 114, 128);
+}
+
+.compress-dialog-toggle-password {
+  padding: 8px 12px;
+  background: rgb(243, 244, 246);
+  border: 1px solid rgb(209, 213, 219);
+  border-left: none;
+  border-radius: 0 6px 6px 0;
+  font-size: 12px;
+  color: rgb(59, 130, 246);
+  cursor: pointer;
+}
+
+.compress-dialog-toggle-password:hover {
+  background: rgb(229, 231, 235);
+}
+
+.compress-dialog-field select {
+  padding: 8px 12px;
+  border: 1px solid rgb(209, 213, 219);
+  border-radius: 6px;
+  font-size: 14px;
+  outline: none;
+  background: white;
+  cursor: pointer;
+}
+
+.compress-dialog-field select:focus {
+  border-color: rgb(59, 130, 246);
+}
+
+.compress-dialog-levels {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.compress-dialog-level {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border: 1px solid rgb(229, 231, 233);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.compress-dialog-level:hover {
+  background: rgb(249, 250, 251);
+}
+
+.compress-dialog-level:has(input:checked) {
+  border-color: rgb(59, 130, 246);
+  background: rgb(239, 246, 255);
+}
+
+.compress-dialog-level input {
+  margin: 0;
+}
+
+.compress-dialog-level-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: rgb(17, 24, 39);
+}
+
+.compress-dialog-level-desc {
+  font-size: 12px;
+  color: rgb(107, 114, 128);
+  margin-left: auto;
+}
+
+.compress-dialog-checkbox label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  font-size: 14px;
+  color: rgb(55, 65, 81);
+}
+
+.compress-dialog-checkbox input {
+  margin: 0;
+  width: 16px;
+  height: 16px;
+}
+
+.compress-dialog-preview {
+  padding: 10px 12px;
+  background: rgb(249, 250, 251);
+  border-radius: 6px;
+  font-size: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.compress-dialog-preview-label {
+  color: rgb(107, 114, 128);
+}
+
+.compress-dialog-preview-path {
+  color: rgb(55, 65, 81);
+  word-break: break-all;
+}
+
+.compress-dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  padding: 16px 20px;
+  border-top: 1px solid rgb(229, 231, 233);
+}
+
+.compress-dialog-btn {
+  padding: 8px 20px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.compress-dialog-btn-cancel {
+  background: white;
+  border: 1px solid rgb(209, 213, 219);
+  color: rgb(55, 65, 81);
+}
+
+.compress-dialog-btn-cancel:hover {
+  background: rgb(249, 250, 251);
+}
+
+.compress-dialog-btn-confirm {
+  background: rgb(59, 130, 246);
+  border: 1px solid rgb(59, 130, 246);
+  color: white;
+}
+
+.compress-dialog-btn-confirm:hover {
+  background: rgb(37, 99, 235);
+}
+
+.compress-dialog-btn-confirm:disabled {
+  background: rgb(156, 163, 175);
+  border-color: rgb(156, 163, 175);
+  cursor: not-allowed;
+}
+</style>
+