From a867376581471f9237eb8c505e29fa6dc92c90ab Mon Sep 17 00:00:00 2001
From: czhqwer <c262222zh@163.com>
Date: Thu, 27 Mar 2025 21:59:13 +0800
Subject: [PATCH] =?UTF-8?q?refactor=EF=BC=9A=E5=B0=86FileUpload=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E6=A8=A1=E5=9D=97=E5=8C=96=E6=88=90=E5=8D=95=E7=8B=AC?=
 =?UTF-8?q?=E7=9A=84=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 upload-file-frontend/jsconfig.json            |    7 +-
 .../src/components/AboutModal/AboutModal.vue  |   59 +
 .../components/FileGallery/FileGallery.vue    |  488 ++++++
 .../src/components/HelloWorld.vue             |   60 -
 .../SettingsModal/SettingsModal.vue           |  133 ++
 .../StorageConfigModal/StorageConfigModal.vue |  174 +++
 upload-file-frontend/src/router/index.js      |    5 +-
 upload-file-frontend/src/views/AboutView.vue  |    5 -
 upload-file-frontend/src/views/FileUpload.vue | 1367 -----------------
 upload-file-frontend/src/views/HomeView.vue   |   18 -
 upload-file-frontend/src/views/MainPage.vue   |  263 ++++
 11 files changed, 1125 insertions(+), 1454 deletions(-)
 create mode 100644 upload-file-frontend/src/components/AboutModal/AboutModal.vue
 create mode 100644 upload-file-frontend/src/components/FileGallery/FileGallery.vue
 delete mode 100644 upload-file-frontend/src/components/HelloWorld.vue
 create mode 100644 upload-file-frontend/src/components/SettingsModal/SettingsModal.vue
 create mode 100644 upload-file-frontend/src/components/StorageConfigModal/StorageConfigModal.vue
 delete mode 100644 upload-file-frontend/src/views/AboutView.vue
 delete mode 100644 upload-file-frontend/src/views/FileUpload.vue
 delete mode 100644 upload-file-frontend/src/views/HomeView.vue
 create mode 100644 upload-file-frontend/src/views/MainPage.vue

diff --git a/upload-file-frontend/jsconfig.json b/upload-file-frontend/jsconfig.json
index 4aafc5f..5a4c3d5 100644
--- a/upload-file-frontend/jsconfig.json
+++ b/upload-file-frontend/jsconfig.json
@@ -15,5 +15,8 @@
       "dom.iterable",
       "scripthost"
     ]
-  }
-}
+  },
+  "include": [
+    "src/**/*"
+  ]
+}
\ No newline at end of file
diff --git a/upload-file-frontend/src/components/AboutModal/AboutModal.vue b/upload-file-frontend/src/components/AboutModal/AboutModal.vue
new file mode 100644
index 0000000..d27934f
--- /dev/null
+++ b/upload-file-frontend/src/components/AboutModal/AboutModal.vue
@@ -0,0 +1,59 @@
+<template>
+  <div v-if="show" class="about-modal" @click="closeOnOutside">
+    <div class="about-content" @click.stop>
+      <h2>关于</h2>
+      <p>这个人很懒，什么都没有留下，只说自己爱吃炸排骨。。。</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AboutModal',
+  props: { show: Boolean },
+  methods: {
+    close() {
+      this.$emit('close');
+    },
+    closeOnOutside(event) {
+      if (event.target.classList.contains('about-modal')) this.close();
+    }
+  }
+};
+</script>
+
+<style scoped>
+.about-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 100;
+}
+
+.about-content {
+  background: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  width: 400px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  text-align: center;
+}
+
+.about-content h2 {
+  margin-top: 0;
+  font-size: 1.2rem;
+  color: #1976d2;
+}
+
+.about-content p {
+  margin: 10px 0;
+  font-size: 14px;
+  color: #666;
+}
+</style>
\ No newline at end of file
diff --git a/upload-file-frontend/src/components/FileGallery/FileGallery.vue b/upload-file-frontend/src/components/FileGallery/FileGallery.vue
new file mode 100644
index 0000000..f09de79
--- /dev/null
+++ b/upload-file-frontend/src/components/FileGallery/FileGallery.vue
@@ -0,0 +1,488 @@
+<template>
+  <div class="gallery-container" @scroll="handleScroll">
+    <div class="gallery-header">
+      <label for="storage-select">存储类型:</label>
+      <select id="storage-select" v-model="selectedStorageType" @change="fetchFiles(true)">
+        <option v-for="option in storageOptions" :key="option.value" :value="option.value">
+          {{ option.label }}
+        </option>
+      </select>
+      <label for="file-name-input">&nbsp;&nbsp;&nbsp;&nbsp;文件名:</label>
+      <el-input v-model="selectedFileName" placeholder="请输入文件名" class="file-name-input" style="width: 150px;"
+        @change="fetchFiles(true)"></el-input>
+    </div>
+    <div v-if="filePage.length === 0 && !loading" class="empty-tips">
+      🖼️ 暂无已上传的文件
+    </div>
+    <div v-else-if="loading && filePage.length === 0" class="loading-tips">
+      加载中...
+    </div>
+    <div v-else class="file-grid">
+      <div v-for="file in filePage" :key="file.id" class="file-card">
+        <div class="preview-wrapper">
+          <img v-if="isImage(file)" :src="file.accessUrl" :alt="file.fileName" class="preview-image"
+            @click="openImagePreview(file)" loading="lazy" />
+          <div v-else-if="isVideo(file)" class="video-preview" @click="openVideoPreview(file)">
+            <div class="play-button">▶</div>
+          </div>
+          <div v-else-if="isPdf(file)" class="pdf-preview" @click="openPdfPreview(file)">
+            <div class="pdf-icon">📜</div>
+          </div>
+          <div v-else class="file-icon">📄</div>
+          <div class="copy-button" @click.stop="copyUrl(file.accessUrl)" title="复制文件URL">📋</div>
+        </div>
+        <div class="file-meta">
+          <div class="filename">{{ file.fileName }}</div>
+          <div class="file-size-status">
+            <div class="file-size">{{ formatSize(file.totalSize) }}</div>
+            <div class="status-indicator">{{ formattedDate(file.createTime) }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-if="loading && filePage.length > 0" class="loading-more">加载更多...</div>
+
+    <!-- 预览弹窗 -->
+    <div v-if="showImagePreview" class="image-preview-modal" @click="closeImagePreview">
+      <div class="image-preview-content" @click.stop>
+        <img :src="selectedImageUrl" alt="预览图片" class="full-image" />
+        <div class="close-button" @click="closeImagePreview">✖</div>
+      </div>
+    </div>
+    <div v-if="showVideoPreview" class="video-preview-modal" @click="closeVideoPreview">
+      <div class="video-preview-content" @click.stop>
+        <video :src="selectedVideoUrl" controls class="full-video" autoplay></video>
+        <div class="close-button" @click="closeVideoPreview">✖</div>
+      </div>
+    </div>
+    <div v-if="showPdfPreview" class="pdf-preview-modal" @click="closePdfPreview">
+      <div class="pdf-preview-content" @click.stop>
+        <div v-if="loadingPdf" class="loading-overlay">
+          <div class="loading-spinner"></div>
+          <p>加载 PDF 中...</p>
+        </div>
+        <iframe v-show="!loadingPdf" :src="selectedPdfUrl" class="full-pdf" frameborder="0" @load="onPdfLoad"></iframe>
+        <div class="close-button" @click="closePdfPreview">✖</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { pageFiles } from '@/utils/api';
+
+export default {
+  name: 'FileGallery',
+  props: {
+    storageOptions: {
+      type: Array,
+      default: () => [
+        { label: 'Local', value: 'local' },
+        { label: 'MinIO', value: 'minio' },
+        { label: 'OSS', value: 'oss' }
+      ]
+    }
+  },
+  data() {
+    return {
+      selectedStorageType: 'local',
+      selectedFileName: '',
+      currentPage: 1,
+      pageSize: 10,
+      loading: false,
+      hasMore: true,
+      filePage: [],
+      showImagePreview: false,
+      selectedImageUrl: '',
+      showVideoPreview: false,
+      selectedVideoUrl: '',
+      showPdfPreview: false,
+      selectedPdfUrl: '',
+      loadingPdf: false
+    };
+  },
+  methods: {
+    async fetchFiles(reset = false) {
+      if (this.loading || (!reset && !this.hasMore)) return;
+      this.loading = true;
+      if (reset) {
+        this.currentPage = 1;
+        this.filePage = [];
+        this.hasMore = true;
+      }
+      try {
+        const response = await pageFiles({
+          page: this.currentPage,
+          pageSize: this.pageSize,
+          storageType: this.selectedStorageType,
+          fileName: this.selectedFileName
+        });
+        const files = response.data.records || [];
+        this.filePage = reset ? files : this.filePage.concat(files);
+        this.hasMore = files.length === this.pageSize;
+        if (this.hasMore) this.currentPage++;
+      } catch (error) {
+        console.error('获取文件列表失败:', error);
+        this.$message.error('加载文件列表失败');
+      } finally {
+        this.loading = false;
+      }
+    },
+    handleScroll(event) {
+      const container = event.target;
+      const isBottom = container.scrollTop + container.clientHeight >= container.scrollHeight - 10;
+      if (isBottom && !this.loading && this.hasMore) this.fetchFiles();
+    },
+    isImage(file) {
+      return file.contentType.startsWith('image/');
+    },
+    isVideo(file) {
+      return file.contentType.startsWith('video/');
+    },
+    isPdf(file) {
+      return file.contentType === 'application/pdf';
+    },
+    formatSize(bytes) {
+      if (bytes === 0) return '0 B';
+      const k = 1024;
+      const sizes = ['B', 'KB', 'MB', 'GB'];
+      const i = Math.floor(Math.log(bytes) / Math.log(k));
+      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+    },
+    formattedDate(date) {
+      const d = new Date(date);
+      return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+    },
+    openImagePreview(file) {
+      this.selectedImageUrl = file.accessUrl;
+      this.showImagePreview = true;
+    },
+    closeImagePreview() {
+      this.showImagePreview = false;
+      this.selectedImageUrl = '';
+    },
+    openVideoPreview(file) {
+      this.selectedVideoUrl = file.accessUrl;
+      this.showVideoPreview = true;
+    },
+    closeVideoPreview() {
+      this.showVideoPreview = false;
+      this.selectedVideoUrl = '';
+    },
+    openPdfPreview(file) {
+      this.selectedPdfUrl = `${file.accessUrl}?response-content-disposition=inline`;
+      this.showPdfPreview = true;
+      this.loadingPdf = true;
+    },
+    onPdfLoad() {
+      this.loadingPdf = false;
+    },
+    closePdfPreview() {
+      this.showPdfPreview = false;
+      this.selectedPdfUrl = '';
+      this.loadingPdf = false;
+    },
+    async copyUrl(url) {
+      try {
+        await navigator.clipboard.writeText(url);
+        this.$message({ message: '文件URL已复制到剪贴板', type: 'success', duration: 2000 });
+      } catch (error) {
+        console.error('复制URL失败:', error);
+        this.$message.error('复制URL失败');
+      }
+    }
+  },
+  mounted() {
+    this.fetchFiles(true);
+  }
+};
+</script>
+
+<style scoped>
+/* eslint-disable */
+.gallery-container {
+  padding: 1rem 2rem 2rem;
+  height: 400px;
+  background: #fcfdff;
+  border-top: 1px solid #f0f7ff;
+  overflow-y: auto;
+}
+
+.gallery-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 1rem;
+}
+
+.gallery-header label {
+  font-size: 14px;
+  color: #333;
+}
+
+.gallery-header select {
+  padding: 6px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 14px;
+  background: #fff;
+  cursor: pointer;
+}
+
+.empty-tips,
+.loading-tips {
+  text-align: center;
+  color: #999;
+  font-size: 1.2rem;
+  padding: 4rem 0;
+}
+
+.file-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 1rem;
+}
+
+.loading-more {
+  text-align: center;
+  color: #666;
+  font-size: 14px;
+  padding: 1rem 0;
+}
+
+.file-card {
+  background: #fff;
+  border-radius: 6px;
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.file-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 3px 8px rgba(25, 118, 210, 0.2);
+}
+
+.copy-button {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  font-size: 14px;
+  opacity: 0;
+  transition: opacity 0.2s;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.file-card:hover .copy-button {
+  opacity: 1;
+}
+
+.preview-wrapper {
+  position: relative;
+  padding-top: 100%;
+  background: #f8fafd;
+}
+
+.preview-image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-bottom: 1px solid #eee;
+}
+
+.file-icon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 2rem;
+  opacity: 0.6;
+}
+
+.file-meta {
+  padding: 0.8rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.file-size-status {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.filename {
+  font-weight: 500;
+  color: #333;
+  font-size: 0.9rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.file-size {
+  font-size: 0.7rem;
+  color: #666;
+  margin: 0.2rem 0;
+}
+
+.status-indicator {
+  padding: 0.15rem 0.4rem;
+  border-radius: 3px;
+  font-size: 0.65rem;
+  background: #e8f5e9;
+  color: #2e7d32;
+}
+
+.image-preview-modal,
+.video-preview-modal,
+.pdf-preview-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.8);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 200;
+}
+
+.image-preview-content,
+.video-preview-content,
+.pdf-preview-content {
+  position: relative;
+  width: 90vw;
+  height: 90vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.full-image,
+.full-video {
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+.full-pdf {
+  width: 100%;
+  height: 100%;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  background: #fff;
+}
+
+.close-button {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 30px;
+  height: 30px;
+  background: rgba(255, 255, 255, 0.9);
+  color: #333;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  font-size: 18px;
+}
+
+.video-preview {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+}
+
+.play-button {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 40px;
+  height: 40px;
+  background: rgba(0, 0, 0, 0.5);
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 20px;
+  opacity: 0.8;
+  margin-top: -105px;
+}
+
+.pdf-preview {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+}
+
+.pdf-icon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 2rem;
+  opacity: 0.8;
+  margin-top: -105px;
+}
+
+.loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 201;
+}
+
+.loading-spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid #f0f7ff;
+  border-top: 4px solid #1976d2;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+.loading-overlay p {
+  margin-top: 10px;
+  color: #fff;
+  font-size: 14px;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>
\ No newline at end of file
diff --git a/upload-file-frontend/src/components/HelloWorld.vue b/upload-file-frontend/src/components/HelloWorld.vue
deleted file mode 100644
index 8c5434a..0000000
--- a/upload-file-frontend/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
diff --git a/upload-file-frontend/src/components/SettingsModal/SettingsModal.vue b/upload-file-frontend/src/components/SettingsModal/SettingsModal.vue
new file mode 100644
index 0000000..dd40284
--- /dev/null
+++ b/upload-file-frontend/src/components/SettingsModal/SettingsModal.vue
@@ -0,0 +1,133 @@
+<template>
+  <div v-if="show" class="settings-modal" @click="closeOnOutside">
+    <div class="settings-content" @click.stop>
+      <h2>上传设置</h2>
+      <form @submit.prevent="save">
+        <div class="form-group">
+          <label>允许上传的文件格式（用英文逗号分隔，例如 .jpg,.png）:</label>
+          <input v-model="tempAllowedFormats" type="text" placeholder=".jpg,.png,.mp4" />
+        </div>
+        <div class="form-group">
+          <label>最大上传大小（MB）:</label>
+          <input v-model.number="tempMaxSizeMB" type="number" min="1" step="1" />
+        </div>
+        <div class="form-actions">
+          <button type="submit">保存</button>
+          <button type="button" @click="close">取消</button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SettingsModal',
+  props: {
+    show: Boolean,
+    allowedFormats: String,
+    maxUploadSize: Number
+  },
+  data() {
+    return {
+      tempAllowedFormats: this.allowedFormats,
+      tempMaxSizeMB: this.maxUploadSize / (1024 * 1024)
+    };
+  },
+  watch: {
+    show(newVal) {
+      if (newVal) {
+        this.tempAllowedFormats = this.allowedFormats;
+        this.tempMaxSizeMB = this.maxUploadSize / (1024 * 1024);
+      }
+    }
+  },
+  methods: {
+    save() {
+      this.$emit('save', {
+        allowedFormats: this.tempAllowedFormats,
+        maxUploadSize: this.tempMaxSizeMB * 1024 * 1024
+      });
+      this.close();
+    },
+    close() {
+      this.$emit('close');
+    },
+    closeOnOutside(event) {
+      if (event.target.classList.contains('settings-modal')) this.close();
+    }
+  }
+};
+</script>
+
+<style scoped>
+.settings-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 100;
+}
+
+.settings-content {
+  background: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  width: 400px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.settings-content h2 {
+  margin-top: 0;
+  font-size: 1.2rem;
+  color: #1976d2;
+}
+
+.form-group {
+  margin-bottom: 15px;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 5px;
+  font-size: 14px;
+  color: #333;
+}
+
+.form-group input {
+  width: 100%;
+  padding: 8px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.form-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+.form-actions button {
+  padding: 8px 16px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.form-actions button[type="submit"] {
+  background: #1976d2;
+  color: white;
+}
+
+.form-actions button[type="button"] {
+  background: #eee;
+  color: #333;
+}
+</style>
\ No newline at end of file
diff --git a/upload-file-frontend/src/components/StorageConfigModal/StorageConfigModal.vue b/upload-file-frontend/src/components/StorageConfigModal/StorageConfigModal.vue
new file mode 100644
index 0000000..cb9d1bf
--- /dev/null
+++ b/upload-file-frontend/src/components/StorageConfigModal/StorageConfigModal.vue
@@ -0,0 +1,174 @@
+<template>
+  <div v-if="show" class="storage-config-modal" @click="closeOnOutside">
+    <div class="storage-config-content" @click.stop>
+      <h2>存储系统配置</h2>
+      <div class="form-group">
+        <label>存储类型:</label>
+        <select v-model="config.type" @change="fetchConfig">
+          <option v-for="option in storageOptions" :key="option.value" :value="option.value">
+            {{ option.label }}
+          </option>
+        </select>
+      </div>
+      <div class="form-group">
+        <label>Endpoint:</label>
+        <input v-model="config.endpoint" type="text" placeholder="请输入Endpoint" />
+      </div>
+      <div class="form-group" v-if="config.type !== 'local'">
+        <label>Access Key:</label>
+        <input v-model="config.accessKey" type="text" placeholder="请输入Access Key" />
+      </div>
+      <div class="form-group" v-if="config.type !== 'local'">
+        <label>Secret Key:</label>
+        <input v-model="config.secretKey" type="password" placeholder="请输入Secret Key" />
+      </div>
+      <div class="form-group">
+        <label>Bucket:</label>
+        <input v-model="config.bucket" type="text" placeholder="请输入Bucket" />
+      </div>
+      <div class="form-actions">
+        <button type="button" @click="saveConfig">保存</button>
+        <button type="button" @click="close">取消</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getStorageConfig, setStorageConfig } from '@/utils/api';
+
+export default {
+  name: 'StorageConfigModal',
+  props: {
+    show: Boolean,
+    storageOptions: Array
+  },
+  data() {
+    return {
+      config: {
+        type: 'local',
+        endpoint: '',
+        accessKey: '',
+        secretKey: '',
+        bucket: ''
+      }
+    };
+  },
+  methods: {
+    async fetchConfig() {
+      try {
+        const response = await getStorageConfig({ type: this.config.type });
+        const config = response.data;
+        this.config = config ? { ...config } : {
+          type: this.config.type,
+          endpoint: '',
+          accessKey: '',
+          secretKey: '',
+          bucket: ''
+        };
+      } catch (error) {
+        console.error('获取存储配置失败:', error);
+        this.$message.error('获取存储配置失败');
+      }
+    },
+    async saveConfig() {
+      try {
+        await setStorageConfig(this.config);
+        this.$message.success('存储配置保存成功');
+        this.close();
+      } catch (error) {
+        console.error('保存存储配置失败:', error);
+        this.$message.error('保存存储配置失败');
+      }
+    },
+    close() {
+      this.$emit('close');
+    },
+    closeOnOutside(event) {
+      if (event.target.classList.contains('storage-config-modal')) this.close();
+    }
+  },
+  mounted() {
+    this.fetchConfig();
+  }
+};
+</script>
+
+<style scoped>
+.storage-config-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(25, 118, 210, 0.2);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.storage-config-content {
+  background: #ffffff;
+  padding: 2rem;
+  border-radius: 12px;
+  width: 480px;
+  box-shadow: 0 8px 32px rgba(25, 118, 210, 0.15);
+}
+
+.storage-config-content h2 {
+  color: #1976d2;
+  font-size: 1.5rem;
+  margin: 0 0 2rem;
+  text-align: center;
+}
+
+.form-group {
+  margin-bottom: 1.5rem;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-size: 0.9rem;
+  color: #4a5568;
+  font-weight: 500;
+}
+
+.form-group input,
+.form-group select {
+  width: 93%;
+  padding: 0.75rem 1rem;
+  border: 1px solid #cbd5e0;
+  border-radius: 8px;
+  font-size: 0.95rem;
+  background: #f8fafc;
+}
+
+.form-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  margin-top: 24px;
+}
+
+.form-actions button {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.form-actions button:first-child {
+  background: #1976d2;
+  color: white;
+}
+
+.form-actions button:last-child {
+  background: #f0f7ff;
+  color: #1976d2;
+  border: 1px solid #d0e4fc;
+}
+</style>
\ No newline at end of file
diff --git a/upload-file-frontend/src/router/index.js b/upload-file-frontend/src/router/index.js
index 8bc1c94..a39b57f 100644
--- a/upload-file-frontend/src/router/index.js
+++ b/upload-file-frontend/src/router/index.js
@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import FileUpload from '@/views/FileUpload.vue';
+// import FileUpload from '@/views/FileUpload.vue';
+import MainPage from '@/views/MainPage.vue';
 
 Vue.use(VueRouter)
 
@@ -8,7 +9,7 @@ const routes = [
   {
     path: '/',
     name: 'home',
-    component: FileUpload
+    component: MainPage
   }
 ]
 
diff --git a/upload-file-frontend/src/views/AboutView.vue b/upload-file-frontend/src/views/AboutView.vue
deleted file mode 100644
index 3fa2807..0000000
--- a/upload-file-frontend/src/views/AboutView.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>
diff --git a/upload-file-frontend/src/views/FileUpload.vue b/upload-file-frontend/src/views/FileUpload.vue
deleted file mode 100644
index 1f00925..0000000
--- a/upload-file-frontend/src/views/FileUpload.vue
+++ /dev/null
@@ -1,1367 +0,0 @@
-<template>
-  <div class="upload-container">
-    <div class="upload-window">
-      <!-- 标题栏 -->
-      <div class="header-wrapper">
-        <h1 class="page-title">
-          <span class="cloud-icon">☁️</span>
-          文件上传中心
-        </h1>
-        <div class="menu-container" @mouseenter="showMenu = true" @mouseleave="showMenu = false">
-          <div class="menu-icon">☰</div>
-          <div v-show="showMenu" class="dropdown-menu">
-            <div class="menu-item" @click="openSettings">上传设置</div>
-            <div class="menu-item" @click="openStorageConfig">存储配置</div>
-            <div class="menu-item" @click="openAbout">关于</div>
-          </div>
-        </div>
-      </div>
-
-      <!-- 标签导航 -->
-      <div class="tab-bar">
-        <div v-for="tab in tabs" :key="tab.value" :class="['tab', { 'active': activeTab === tab.value }]"
-          @click="switchTab(tab.value)">
-          {{ tab.label }}
-          <div class="tab-underline"></div>
-        </div>
-      </div>
-
-      <!-- 上传区域 -->
-      <div v-if="activeTab !== 'gallery' && !isWipTab" class="upload-content">
-        <upload-file :file-list.sync="fileList" :accept="allowedFormats" :max-size="maxUploadSize" width="100%"
-          height="400px" :storage-type="activeTab" />
-      </div>
-
-      <!-- 未实现功能提示 -->
-      <div v-else-if="isWipTab" class="wip-container">
-        <div class="wip-message">
-          <span class="wip-icon">🚧</span>
-          <h2>功能建设中</h2>
-          <p v-if="activeTab === 'obs'">正在加班加点搬砖中，敬请期待！</p>
-          <p v-else-if="activeTab === 'qiniu'">七牛云功能正在被疯狂调教，马上就能和大家见面啦！</p>
-        </div>
-      </div>
-
-      <!-- 图片展示区域 -->
-      <div v-else class="gallery-container" @scroll="handleScroll">
-        <div class="gallery-header">
-          <label for="storage-select">存储类型:</label>
-          <select id="storage-select" v-model="selectedStorageType" @change="fetchFiles(true)">
-            <option v-for="option in storageOptions" :key="option.value" :value="option.value">
-              {{ option.label }}
-            </option>
-          </select>
-
-          <label for="storage-select">&nbsp;&nbsp;&nbsp;&nbsp;文件名:</label>
-          <el-input v-model="selectedFileName" placeholder="请输入文件名" class="file-name-input" style="width: 150px;"
-            @change="fetchFiles(true)"></el-input>
-        </div>
-        <div v-if="filePage.length === 0 && !loading" class="empty-tips">
-          🖼️ 暂无已上传的文件
-        </div>
-        <div v-else-if="loading && filePage.length === 0" class="loading-tips">
-          加载中...
-        </div>
-        <div v-else class="file-grid">
-          <div v-for="file in filePage" :key="file.id" class="file-card">
-            <div class="preview-wrapper">
-              <!-- 图片预览 -->
-              <img v-if="isImage(file)" :src="file.accessUrl" :alt="file.fileName" class="preview-image"
-                @click="openImagePreview(file)" loading="lazy" />
-              <!-- 视频预览 -->
-              <div v-else-if="isVideo(file)" class="video-preview" @click="openVideoPreview(file)">
-                <div class="play-button">▶</div>
-              </div>
-              <!-- PDF 预览 -->
-              <div v-else-if="isPdf(file)" class="pdf-preview" @click="openPdfPreview(file)">
-                <div class="pdf-icon">📜</div>
-              </div>
-              <!-- 其他文件类型 -->
-              <div v-else class="file-icon">
-                📄
-              </div>
-              <div class="copy-button" @click.stop="copyUrl(file.accessUrl)" title="复制文件URL" style="font-size: 20px;">
-                📋
-              </div>
-            </div>
-            <div class="file-meta">
-              <div class="filename">{{ file.fileName }}</div>
-              <div class="file-size-status">
-                <div class="file-size">{{ formatSize(file.totalSize) }}</div>
-                <div class="status-indicator">{{ formattedDate(file.createTime) }}</div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div v-if="loading && filePage.length > 0" class="loading-more">
-          加载更多...
-        </div>
-      </div>
-
-      <!-- 设置表单（弹窗形式） -->
-      <div v-if="showSettings" class="settings-modal" @click="closeSettingsOnOutside">
-        <div class="settings-content" @click.stop>
-          <h2>上传设置</h2>
-          <form @submit.prevent="saveSettings">
-            <div class="form-group">
-              <label>允许上传的文件格式（用英文逗号分隔，例如 .jpg,.png）:</label>
-              <input v-model="tempAllowedFormats" type="text" placeholder=".jpg,.png,.mp4" />
-            </div>
-            <div class="form-group">
-              <label>最大上传大小（MB）:</label>
-              <input v-model.number="tempMaxSizeMB" type="number" min="1" step="1" />
-            </div>
-            <div class="form-actions">
-              <button type="submit">保存</button>
-              <button type="button" @click="closeSettings">取消</button>
-            </div>
-          </form>
-        </div>
-      </div>
-
-      <!-- 关于弹窗 -->
-      <div v-if="showAbout" class="about-modal" @click="closeAboutOnOutside">
-        <div class="about-content" @click.stop>
-          <h2>关于</h2>
-          <p>这个人很懒，什么都没有留下，只说自己爱吃炸排骨。。。</p>
-        </div>
-      </div>
-
-      <!-- 图片预览模态框 -->
-      <div v-if="showImagePreview" class="image-preview-modal" @click="closeImagePreview">
-        <div class="image-preview-content" @click.stop>
-          <img :src="selectedImageUrl" alt="预览图片" class="full-image" />
-          <div class="close-button" @click="closeImagePreview">✖</div>
-        </div>
-      </div>
-
-      <!-- 视频预览模态框 -->
-      <div v-if="showVideoPreview" class="video-preview-modal" @click="closeVideoPreview">
-        <div class="video-preview-content" @click.stop>
-          <video :src="selectedVideoUrl" controls class="full-video" autoplay></video>
-          <div class="close-button" @click="closeVideoPreview">✖</div>
-        </div>
-      </div>
-
-      <!-- PDF 预览模态框 -->
-      <div v-if="showPdfPreview" class="pdf-preview-modal" @click="closePdfPreview">
-        <div class="pdf-preview-content" @click.stop>
-          <!-- 加载动画 -->
-          <div v-if="loadingPdf" class="loading-overlay">
-            <div class="loading-spinner"></div>
-            <p>加载 PDF 中...</p>
-          </div>
-          <!-- PDF 内容 -->
-          <iframe
-            v-show="!loadingPdf"
-            :src="selectedPdfUrl"
-            class="full-pdf"
-            frameborder="0"
-            @load="onPdfLoad"
-          ></iframe>
-          <div class="close-button" @click="closePdfPreview">✖</div>
-        </div>
-      </div>
-
-      <!-- 存储配置弹窗 -->
-      <div v-if="showStorageConfig" class="storage-config-modal" @click="closeStorageConfigOnOutside">
-        <div class="storage-config-content" @click.stop>
-          <h2>存储系统配置</h2>
-
-          <!-- 存储类型选择 -->
-          <div class="form-group">
-            <label>存储类型:</label>
-            <select v-model="newConfig.type" @change="switchStorageType">
-              <option v-for="option in storageOptions" :key="option.value" :value="option.value">
-                {{ option.label }}
-              </option>
-            </select>
-          </div>
-
-          <div class="form-group">
-            <label>Endpoint:</label>
-            <input v-model="newConfig.endpoint" type="text" placeholder="请输入Endpoint" />
-          </div>
-          <div class="form-group" v-if="newConfig.type !== 'local'">
-            <label>Access Key:</label>
-            <input v-model="newConfig.accessKey" type="text" placeholder="请输入Access Key" />
-          </div>
-          <div class="form-group" v-if="newConfig.type !== 'local'">
-            <label>Secret Key:</label>
-            <input v-model="newConfig.secretKey" type="password" placeholder="请输入Secret Key" />
-          </div>
-          <div class="form-group">
-            <label>Bucket:</label>
-            <input v-model="newConfig.bucket" type="text" placeholder="请输入Bucket" />
-          </div>
-
-          <!-- 操作按钮 -->
-          <div class="form-actions">
-            <button type="button" @click="saveStorageConfig">保存</button>
-            <button type="button" @click="closeStorageConfig">取消</button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import UploadFile from '@/components/UploadFile/UploadFile.vue';
-import { getStorageConfig, setStorageConfig, pageFiles } from '@/utils/api';
-
-export default {
-  name: 'FileUpload',
-  components: { UploadFile },
-  data() {
-    return {
-      fileList: [],
-      activeTab: 'local',
-      tabs: [
-        { label: 'Local', value: 'local' },
-        { label: 'MinIO', value: 'minio' },
-        { label: 'OSS', value: 'oss' },
-        { label: 'OBS', value: 'obs' },
-        { label: 'QiNiu', value: 'qiniu' },
-        { label: '已上传文件', value: 'gallery' }
-      ],
-      showMenu: false,
-      showSettings: false,
-      showAbout: false,
-      allowedFormats: '.jpg,.png,.mp4',
-      maxUploadSize: 100 * 1024 * 1024,
-      tempAllowedFormats: '',
-      tempMaxSizeMB: 100,
-      // 分页相关
-      selectedStorageType: 'local', // 默认存储类型
-      selectedFileName: '',
-      storageOptions: [
-        { label: 'Local', value: 'local' },
-        { label: 'MinIO', value: 'minio' },
-        { label: 'OSS', value: 'oss' }
-      ],
-      currentPage: 1,
-      pageSize: 10,
-      loading: false,
-      hasMore: true, // 是否还有更多数据
-      filePage: [],
-      showImagePreview: false,
-      selectedImageUrl: '',
-      showStorageConfig: false, // 控制存储配置弹窗显示
-      storageConfigs: [], // 存储配置列表
-      editingConfig: null, // 当前编辑的配置对象
-      newConfig: { // 新增配置时的默认值
-        id: null,
-        type: 'local',
-        endpoint: '',
-        accessKey: '',
-        secretKey: '',
-        bucket: ''
-      },
-      loadingConfig: false,
-      showVideoPreview: false,
-      selectedVideoUrl: '',
-      showPdfPreview: false,
-      selectedPdfUrl: '',
-      loadingPdf: false,
-    };
-  },
-  computed: {
-    formattedDate() {
-      return (date) => {
-        const d = new Date(date);
-        const year = d.getFullYear();
-        const month = String(d.getMonth() + 1).padStart(2, '0');
-        const day = String(d.getDate()).padStart(2, '0');
-        return `${year}-${month}-${day}`;
-      };
-    },
-    isWipTab() {
-      return this.activeTab === 'obs' || this.activeTab === 'qiniu';
-    }
-  },
-  methods: {
-    // 判断是否为 PDF
-    isPdf(file) {
-      return file.contentType === 'application/pdf';
-    },
-    // 打开 PDF 预览
-    openPdfPreview(file) {
-      this.selectedPdfUrl = `${file.accessUrl}?response-content-disposition=inline`;
-      this.showPdfPreview = true;
-      this.loadingPdf = true;
-    },
-    // PDF 加载完成
-    onPdfLoad() {
-      this.loadingPdf = false; // 加载完成隐藏动画
-    },
-    // 关闭 PDF 预览
-    closePdfPreview() {
-      this.showPdfPreview = false;
-      this.selectedPdfUrl = '';
-      this.loadingPdf = false;
-    },
-    // 判断是否为视频
-    isVideo(file) {
-      return file.contentType.startsWith('video/');
-    },
-    // 打开视频预览
-    openVideoPreview(file) {
-      this.selectedVideoUrl = file.accessUrl;
-      this.showVideoPreview = true;
-    },
-    // 关闭视频预览
-    closeVideoPreview() {
-      this.showVideoPreview = false;
-      this.selectedVideoUrl = '';
-    },
-    switchTab(tabValue) {
-      this.activeTab = tabValue;
-      if (tabValue === 'gallery') {
-        this.fetchFiles(true);
-      } else if (this.isWipTab) {
-        this.$message({
-          message: tabValue === 'obs'
-            ? 'OBS功能正在施工中，小哥哥们正在挥汗如雨！'
-            : '七牛云功能开发中，程序员正在和咖啡斗智斗勇！',
-          type: 'info',
-          duration: 2000
-        });
-      }
-    },
-    isImage(file) {
-      return file.contentType.startsWith('image/');
-    },
-    formatSize(bytes) {
-      if (bytes === 0) return '0 B';
-      const k = 1024;
-      const sizes = ['B', 'KB', 'MB', 'GB'];
-      const i = Math.floor(Math.log(bytes) / Math.log(k));
-      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
-    },
-    openSettings() {
-      this.tempAllowedFormats = this.allowedFormats;
-      this.tempMaxSizeMB = this.maxUploadSize / (1024 * 1024);
-      this.showSettings = true;
-      this.showMenu = false;
-    },
-    saveSettings() {
-      this.allowedFormats = this.tempAllowedFormats;
-      this.maxUploadSize = this.tempMaxSizeMB * 1024 * 1024;
-      this.showSettings = false;
-    },
-    closeSettings() {
-      this.showSettings = false;
-    },
-    closeSettingsOnOutside(event) {
-      if (event.target.classList.contains('settings-modal')) {
-        this.closeSettings();
-      }
-    },
-    openAbout() {
-      this.showAbout = true;
-      this.showMenu = false;
-    },
-    closeAboutOnOutside(event) {
-      if (event.target.classList.contains('about-modal')) {
-        this.showAbout = false;
-      }
-    },
-    // 获取文件列表
-    async fetchFiles(reset = false) {
-      if (this.loading || (!reset && !this.hasMore)) return;
-
-      this.loading = true;
-      if (reset) {
-        this.currentPage = 1;
-        this.filePage = [];
-        this.hasMore = true;
-      }
-
-      try {
-        const response = await pageFiles({
-          page: this.currentPage,
-          pageSize: this.pageSize,
-          storageType: this.selectedStorageType,
-          fileName: this.selectedFileName
-        });
-        const files = response.data.records || [];
-        this.filePage = reset ? files : this.filePage.concat(files);
-        this.hasMore = files.length === this.pageSize;
-        if (this.hasMore) this.currentPage++;
-      } catch (error) {
-        console.error('获取文件列表失败:', error);
-        this.$message.error('加载文件列表失败');
-      } finally {
-        this.loading = false;
-      }
-    },
-    // 滚动触底加载
-    handleScroll(event) {
-      const container = event.target;
-      const isBottom =
-        container.scrollTop + container.clientHeight >= container.scrollHeight - 10; // 提前 10px 触发
-      if (isBottom && !this.loading && this.hasMore) {
-        this.fetchFiles();
-      }
-    },
-    // 打开图片预览
-    openImagePreview(file) {
-      this.selectedImageUrl = file.accessUrl;
-      this.showImagePreview = true;
-    },
-    // 关闭图片预览
-    closeImagePreview() {
-      this.showImagePreview = false;
-      this.selectedImageUrl = '';
-    },
-    // 打开存储配置弹窗
-    async openStorageConfig() {
-      this.showStorageConfig = true;
-      this.showMenu = false;
-      await this.fetchStorageConfig(); // 加载配置
-    },
-    // 获取存储配置
-    async fetchStorageConfig() {
-      this.loadingConfig = true;
-      try {
-        const response = await getStorageConfig({ type: this.newConfig.type });
-        const config = response.data;
-        if (config) {
-          // 如果有配置，填充到 newConfig
-          this.newConfig = {
-            id: config.id || null,
-            type: config.type || this.newConfig.type,
-            endpoint: config.endpoint || '',
-            accessKey: config.accessKey || '',
-            secretKey: config.secretKey || '',
-            bucket: config.bucket || ''
-          };
-        } else {
-          // 如果没有配置，重置字段
-          this.resetConfigFields();
-        }
-      } catch (error) {
-        console.error('获取存储配置失败:', error);
-        this.$message.error('获取存储配置失败');
-        this.resetConfigFields(); // 出错时重置
-      } finally {
-        this.loadingConfig = false;
-      }
-    },
-    // 关闭存储配置弹窗
-    closeStorageConfig() {
-      this.showStorageConfig = false;
-    },
-    // 点击外部关闭弹窗
-    closeStorageConfigOnOutside(event) {
-      if (event.target.classList.contains('storage-config-modal')) {
-        this.closeStorageConfig();
-      }
-    },
-
-    // 切换存储类型时重新加载配置
-    async switchStorageType() {
-      await this.fetchStorageConfig(); // 类型变化时重新获取配置
-    },
-    // 重置配置字段
-    resetConfigFields() {
-      this.newConfig = {
-        id: null,
-        type: this.newConfig.type, // 保留当前类型
-        endpoint: '',
-        accessKey: '',
-        secretKey: '',
-        bucket: ''
-      };
-    },
-    // 保存存储配置
-    async saveStorageConfig() {
-      try {
-        const configToSave = { ...this.newConfig };
-        await setStorageConfig(configToSave); // 调用 API 保存配置
-        this.$message.success('存储配置保存成功');
-        this.closeStorageConfig();
-      } catch (error) {
-        console.error('保存存储配置失败:', error);
-        this.$message.error('保存存储配置失败');
-      }
-    },
-    // 复制URL
-    async copyUrl(url) {
-      try {
-        await navigator.clipboard.writeText(url);
-        this.$message({
-          message: '文件URL已复制到剪贴板',
-          type: 'success',
-          duration: 2000
-        });
-      } catch (error) {
-        console.error('复制URL失败:', error);
-        this.$message.error('复制URL失败');
-      }
-    }
-  }
-};
-</script>
-
-<style scoped>
-.image-preview-modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.8);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 200;
-}
-
-.image-preview-content {
-  position: relative;
-  width: 90vw;
-  /* 视口宽度的90% */
-  height: 90vh;
-  /* 视口高度的90% */
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.full-image {
-  max-width: 100%;
-  max-height: 100%;
-  width: auto;
-  height: auto;
-  object-fit: contain;
-  /* 保持图片比例，完整显示 */
-  border-radius: 8px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-}
-
-.close-button {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  width: 30px;
-  height: 30px;
-  background: rgba(255, 255, 255, 0.9);
-  color: #333;
-  border-radius: 50%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  font-size: 18px;
-  font-weight: bold;
-  transition: background 0.2s;
-  z-index: 9999;
-}
-
-.close-button:hover {
-  background: #fff;
-}
-
-.wip-container {
-  padding: 2rem;
-  height: 400px;
-  background: #fcfdff;
-  border-top: 1px solid #f0f7ff;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.wip-message {
-  text-align: center;
-  color: #666;
-}
-
-.wip-icon {
-  font-size: 3rem;
-  margin-bottom: 1rem;
-  display: block;
-}
-
-.wip-message h2 {
-  font-size: 1.5rem;
-  color: #1976d2;
-  margin: 0.5rem 0;
-}
-
-.wip-message p {
-  font-size: 1rem;
-  max-width: 400px;
-  margin: 0 auto;
-  line-height: 1.5;
-}
-
-.upload-container {
-  width: 100%;
-  background: #ffffff;
-  border-radius: 14px;
-  box-shadow: 0 12px 24px rgba(25, 118, 210, 0.1);
-  overflow: hidden;
-  border: 1px solid #e3f2fd;
-}
-
-/* 标题栏布局 */
-.header-wrapper {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 1.5rem 2rem;
-  background: #1976d2;
-}
-
-.page-title {
-  margin: 0;
-  color: white;
-  font-size: 1.5rem;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.cloud-icon {
-  font-size: 1.8rem;
-  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
-}
-
-/* 菜单图标和下拉样式 */
-.menu-container {
-  position: relative;
-}
-
-.menu-icon {
-  color: white;
-  font-size: 1.8rem;
-  cursor: pointer;
-  padding: 0 10px;
-}
-
-.dropdown-menu {
-  position: absolute;
-  top: 100%;
-  right: 0;
-  background: #fff;
-  border-radius: 6px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  min-width: 120px;
-  z-index: 10;
-}
-
-.menu-item {
-  padding: 8px 16px;
-  color: #333;
-  cursor: pointer;
-  font-size: 14px;
-  transition: background 0.2s;
-}
-
-.menu-item:hover {
-  background: #f0f7ff;
-}
-
-/* 标签导航样式 */
-.tab-bar {
-  display: flex;
-  padding: 0 2rem;
-  background: #f8fafd;
-  border-bottom: 1px solid #e0eefc;
-  gap: 8px;
-  position: relative;
-}
-
-.tab {
-  position: relative;
-  padding: 14px 32px;
-  font-size: 14px;
-  color: #607d9f;
-  cursor: pointer;
-  background: transparent;
-  border: none;
-  border-radius: 6px 6px 0 0;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.tab:hover {
-  color: #1565c0;
-  background: rgba(25, 118, 210, 0.05);
-}
-
-.tab.active {
-  color: #1976d2;
-  font-weight: 500;
-}
-
-.tab.active .tab-underline {
-  width: 100%;
-  background: #1976d2;
-}
-
-.tab-underline {
-  height: 2px;
-  width: 0;
-  background: transparent;
-  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-/* 上传和展示区域样式 */
-.upload-content {
-  padding: 2rem;
-  background: #fcfdff;
-  min-height: 400px;
-  border-top: 1px solid #f0f7ff;
-}
-
-.gallery-container {
-  padding: 1rem 2rem 2rem;
-  height: 400px;
-  background: #fcfdff;
-  border-top: 1px solid #f0f7ff;
-  overflow-y: auto;
-}
-
-.gallery-header {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-bottom: 1rem;
-}
-
-.gallery-header label {
-  font-size: 14px;
-  color: #333;
-}
-
-.gallery-header select {
-  padding: 6px 12px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  font-size: 14px;
-  background: #fff;
-  cursor: pointer;
-}
-
-.empty-tips,
-.loading-tips {
-  text-align: center;
-  color: #999;
-  font-size: 1.2rem;
-  padding: 4rem 0;
-}
-
-.file-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-  gap: 1rem;
-}
-
-.loading-more {
-  text-align: center;
-  color: #666;
-  font-size: 14px;
-  padding: 1rem 0;
-}
-
-.file-card {
-  position: relative;
-  background: #fff;
-  border-radius: 6px;
-  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
-  overflow: hidden;
-  transition: transform 0.2s, box-shadow 0.2s;
-}
-
-.file-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 3px 8px rgba(25, 118, 210, 0.2);
-}
-
-.copy-button {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  font-size: 14px;
-  opacity: 0;
-  transition: opacity 0.2s, transform 0.2s;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-
-.file-card:hover .copy-button {
-  opacity: 1;
-}
-
-.copy-button:hover {
-  transform: scale(1.2);
-  background: #fff;
-}
-
-@media (max-width: 768px) {
-  .copy-button {
-    width: 20px;
-    height: 20px;
-    font-size: 12px;
-  }
-}
-
-.preview-wrapper {
-  position: relative;
-  padding-top: 100%;
-  background: #f8fafd;
-}
-
-.preview-image {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  border-bottom: 1px solid #eee;
-}
-
-.file-icon {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  font-size: 2rem;
-  opacity: 0.6;
-}
-
-.file-meta {
-  padding: 0.8rem;
-  display: flex;
-  flex-direction: column;
-}
-
-.file-size-status {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.filename {
-  font-weight: 500;
-  color: #333;
-  font-size: 0.9rem;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.file-size {
-  font-size: 0.7rem;
-  color: #666;
-  margin: 0.2rem 0;
-}
-
-.status-indicator {
-  display: inline-block;
-  padding: 0.15rem 0.4rem;
-  border-radius: 3px;
-  font-size: 0.65rem;
-  background: #e8f5e9;
-  color: #2e7d32;
-}
-
-/* 设置弹窗样式 */
-.settings-modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 100;
-}
-
-.settings-content {
-  background: #fff;
-  padding: 20px;
-  border-radius: 8px;
-  width: 400px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-}
-
-.settings-content h2 {
-  margin-top: 0;
-  font-size: 1.2rem;
-  color: #1976d2;
-}
-
-.form-group {
-  margin-bottom: 15px;
-}
-
-.form-group label {
-  display: block;
-  margin-bottom: 5px;
-  font-size: 14px;
-  color: #333;
-}
-
-.form-group input {
-  width: 100%;
-  padding: 8px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  font-size: 14px;
-}
-
-.form-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 10px;
-}
-
-.form-actions button {
-  padding: 8px 16px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 14px;
-}
-
-.form-actions button[type="submit"] {
-  background: #1976d2;
-  color: white;
-}
-
-.form-actions button[type="button"] {
-  background: #eee;
-  color: #333;
-}
-
-
-/* 视频预览相关样式 */
-.video-preview {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  cursor: pointer;
-}
-
-.play-button {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 40px;
-  height: 40px;
-  background: rgba(0, 0, 0, 0.5);
-  color: white;
-  border-radius: 50%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 20px;
-  opacity: 0.8;
-  transition: opacity 0.2s;
-  margin-top: -105px;
-}
-
-.video-preview:hover .play-button {
-  opacity: 1;
-}
-
-/* 视频预览模态框 */
-.video-preview-modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.8);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 200;
-}
-
-.video-preview-content {
-  position: relative;
-  width: 90vw;
-  height: 90vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.full-video {
-  max-width: 100%;
-  max-height: 100%;
-  width: auto;
-  height: auto;
-  border-radius: 8px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-}
-
-/* 加载动画样式 */
-.loading-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  z-index: 201;
-}
-
-.loading-spinner {
-  width: 40px;
-  height: 40px;
-  border: 4px solid #f0f7ff;
-  border-top: 4px solid #1976d2;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-
-.loading-overlay p {
-  margin-top: 10px;
-  color: #fff;
-  font-size: 14px;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-/* PDF 预览相关样式 */
-.pdf-preview {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  cursor: pointer;
-}
-
-.pdf-icon {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 2rem;
-  opacity: 0.8;
-  transition: opacity 0.2s;
-  margin-top: -105px;
-}
-
-/* PDF 预览模态框 */
-.pdf-preview-modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.8);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 200;
-}
-
-.pdf-preview-content {
-  position: relative;
-  width: 90vw; /* 设置为视口的90%宽度 */
-  height: 90vh; /* 设置为视口的90%高度 */
-  background: #fff;
-  border-radius: 8px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.full-pdf {
-  width: 100%;
-  height: 100%;
-  border-radius: 8px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-  background: #fff;
-}
-
-/* 关于弹窗样式 */
-.about-modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 100;
-}
-
-.about-content {
-  background: #fff;
-  padding: 20px;
-  border-radius: 8px;
-  width: 400px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  text-align: center;
-}
-
-.about-content h2 {
-  margin-top: 0;
-  font-size: 1.2rem;
-  color: #1976d2;
-}
-
-.about-content p {
-  margin: 10px 0;
-  font-size: 14px;
-  color: #666;
-}
-
-/* 响应式调整 */
-@media (max-width: 768px) {
-  .file-grid {
-    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-  }
-
-  .gallery-container {
-    padding: 1rem;
-    height: 400px;
-  }
-
-  .upload-container {
-    width: 95%;
-    border-radius: 12px;
-  }
-
-  .header-wrapper {
-    padding: 1rem;
-  }
-
-  .page-title {
-    font-size: 1.2rem;
-  }
-
-  .tab-bar {
-    padding: 0 1rem;
-    overflow-x: auto;
-  }
-
-  .tab {
-    padding: 12px 20px;
-    font-size: 13px;
-    flex-shrink: 0;
-  }
-
-  .upload-content {
-    padding: 1.5rem;
-  }
-
-  .settings-content,
-  .about-content {
-    width: 90%;
-  }
-}
-
-@media (max-width: 480px) {
-  .tab {
-    padding: 10px 16px;
-  }
-}
-
-/* 存储配置弹窗样式优化 */
-.storage-config-modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(25, 118, 210, 0.2);
-  /* 使用主题色透明背景 */
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 1000;
-  backdrop-filter: blur(2px);
-  /* 背景模糊效果 */
-  animation: modal-fade 0.3s ease-out;
-}
-
-.storage-config-content {
-  background: #ffffff;
-  padding: 2rem;
-  border-radius: 12px;
-  width: 480px;
-  box-shadow: 0 8px 32px rgba(25, 118, 210, 0.15);
-  transform-origin: center;
-  animation: modal-scale 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-}
-
-.storage-config-content h2 {
-  color: #1976d2;
-  font-size: 1.5rem;
-  margin: 0 0 2rem;
-  text-align: center;
-  position: relative;
-  padding-bottom: 0.5rem;
-}
-
-.storage-config-content h2::after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 40px;
-  height: 3px;
-  background: rgba(25, 118, 210, 0.2);
-  border-radius: 2px;
-}
-
-/* 表单元素优化 */
-.form-group {
-  margin-bottom: 1.5rem;
-  position: relative;
-}
-
-.form-group label {
-  display: block;
-  margin-bottom: 0.5rem;
-  font-size: 0.9rem;
-  color: #4a5568;
-  font-weight: 500;
-}
-
-.form-group input,
-.form-group select {
-  width: 93%;
-  padding: 0.75rem 1rem;
-  border: 1px solid #cbd5e0;
-  border-radius: 8px;
-  font-size: 0.95rem;
-  transition: all 0.2s ease;
-  background: #f8fafc;
-}
-
-.form-group input:focus,
-.form-group select:focus {
-  border-color: #1976d2;
-  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
-  background: #ffffff;
-  outline: none;
-}
-
-.form-group select {
-  appearance: none;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-6 w-6' fill='none' viewBox='0 0 24 24' stroke='%234a5568'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 1rem center;
-  background-size: 1.2em;
-}
-
-/* 操作按钮区域 */
-.form-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-  margin-top: 24px;
-  /* 与表单内容分隔 */
-}
-
-/* 按钮样式 */
-.form-actions button {
-  padding: 10px 20px;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  font-size: 14px;
-  font-weight: 500;
-  transition: all 0.2s ease;
-}
-
-/* 保存按钮 */
-.form-actions button:first-child {
-  background: #1976d2;
-  color: white;
-  box-shadow: 0 2px 6px rgba(25, 118, 210, 0.3);
-}
-
-.form-actions button:first-child:hover {
-  background: #1565c0;
-  box-shadow: 0 4px 10px rgba(25, 118, 210, 0.4);
-}
-
-/* 取消按钮 */
-.form-actions button:last-child {
-  background: #f0f7ff;
-  color: #1976d2;
-  border: 1px solid #d0e4fc;
-}
-
-.form-actions button:last-child:hover {
-  background: #e3f2fd;
-  border-color: #1976d2;
-}
-
-/* 动画效果 */
-@keyframes modal-fade {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes modal-scale {
-  from {
-    transform: scale(0.95);
-  }
-
-  to {
-    transform: scale(1);
-  }
-}
-
-/* 响应式调整 */
-@media (max-width: 640px) {
-  .storage-config-content {
-    width: 90%;
-    padding: 1.5rem;
-  }
-
-  .form-actions {
-    flex-direction: column;
-  }
-}
-</style>
\ No newline at end of file
diff --git a/upload-file-frontend/src/views/HomeView.vue b/upload-file-frontend/src/views/HomeView.vue
deleted file mode 100644
index e8d96d7..0000000
--- a/upload-file-frontend/src/views/HomeView.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
-</template>
-
-<script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
-
-export default {
-  name: 'HomeView',
-  components: {
-    HelloWorld
-  }
-}
-</script>
diff --git a/upload-file-frontend/src/views/MainPage.vue b/upload-file-frontend/src/views/MainPage.vue
new file mode 100644
index 0000000..5d9c95a
--- /dev/null
+++ b/upload-file-frontend/src/views/MainPage.vue
@@ -0,0 +1,263 @@
+<template>
+  <div class="upload-container">
+    <div class="upload-window">
+      <div class="header-wrapper">
+        <h1 class="page-title">
+          <span class="cloud-icon">☁️</span>
+          文件上传中心
+        </h1>
+        <div class="menu-container" @mouseenter="showMenu = true" @mouseleave="showMenu = false">
+          <div class="menu-icon">☰</div>
+          <div v-show="showMenu" class="dropdown-menu">
+            <div class="menu-item" @click="openSettings">上传设置</div>
+            <div class="menu-item" @click="openStorageConfig">存储配置</div>
+            <div class="menu-item" @click="openAbout">关于</div>
+          </div>
+        </div>
+      </div>
+      <div class="tab-bar">
+        <div v-for="tab in tabs" :key="tab.value" :class="['tab', { 'active': activeTab === tab.value }]"
+          @click="switchTab(tab.value)">
+          {{ tab.label }}
+          <div class="tab-underline"></div>
+        </div>
+      </div>
+      <div v-if="activeTab !== 'gallery' && !isWipTab" class="upload-content">
+        <upload-file :file-list.sync="fileList" :accept="allowedFormats" :max-size="maxUploadSize" width="100%"
+          height="400px" :storage-type="activeTab" />
+      </div>
+      <div v-else-if="isWipTab" class="wip-container">
+        <div class="wip-message">
+          <span class="wip-icon">🚧</span>
+          <h2>功能建设中</h2>
+          <p v-if="activeTab === 'obs'">正在加班加点搬砖中，敬请期待！</p>
+          <p v-else-if="activeTab === 'qiniu'">七牛云功能正在被疯狂调教，马上就能和大家见面啦！</p>
+        </div>
+      </div>
+      <file-gallery v-else />
+      <settings-modal :show="showSettings" :allowed-formats="allowedFormats" :max-upload-size="maxUploadSize"
+        @save="saveSettings" @close="closeSettings" />
+      <storage-config-modal :show="showStorageConfig" :storage-options="storageOptions" @close="closeStorageConfig" />
+      <about-modal :show="showAbout" @close="closeAbout" />
+    </div>
+  </div>
+</template>
+
+<script>
+import UploadFile from '@/components/UploadFile/UploadFile.vue';
+import FileGallery from '@/components/FileGallery/FileGallery.vue';
+import SettingsModal from '@/components/SettingsModal/SettingsModal.vue';
+import StorageConfigModal from '@/components/StorageConfigModal/StorageConfigModal.vue';
+import AboutModal from '@/components/AboutModal/AboutModal.vue';
+
+export default {
+  name: 'MainPage',
+  components: { UploadFile, FileGallery, SettingsModal, StorageConfigModal, AboutModal },
+  data() {
+    return {
+      fileList: [],
+      activeTab: 'local',
+      tabs: [
+        { label: 'Local', value: 'local' },
+        { label: 'MinIO', value: 'minio' },
+        { label: 'OSS', value: 'oss' },
+        { label: 'OBS', value: 'obs' },
+        { label: 'QiNiu', value: 'qiniu' },
+        { label: '已上传文件', value: 'gallery' }
+      ],
+      showMenu: false,
+      showSettings: false,
+      showStorageConfig: false,
+      showAbout: false,
+      allowedFormats: '.jpg,.png,.mp4',
+      maxUploadSize: 100 * 1024 * 1024,
+      storageOptions: [
+        { label: 'Local', value: 'local' },
+        { label: 'MinIO', value: 'minio' },
+        { label: 'OSS', value: 'oss' }
+      ]
+    };
+  },
+  computed: {
+    isWipTab() {
+      return this.activeTab === 'obs' || this.activeTab === 'qiniu';
+    }
+  },
+  methods: {
+    switchTab(tabValue) {
+      this.activeTab = tabValue;
+      if (this.isWipTab) {
+        this.$message({
+          message: tabValue === 'obs' ? 'OBS功能施工中...' : '七牛云功能开发中...',
+          type: 'info',
+          duration: 2000
+        });
+      }
+    },
+    openSettings() {
+      this.showSettings = true;
+      this.showMenu = false;
+    },
+    saveSettings(settings) {
+      this.allowedFormats = settings.allowedFormats;
+      this.maxUploadSize = settings.maxUploadSize;
+      this.showSettings = false;
+    },
+    closeSettings() {
+      this.showSettings = false;
+    },
+    openStorageConfig() {
+      this.showStorageConfig = true;
+      this.showMenu = false;
+    },
+    closeStorageConfig() {
+      this.showStorageConfig = false;
+    },
+    openAbout() {
+      this.showAbout = true;
+      this.showMenu = false;
+    },
+    closeAbout() {
+      this.showAbout = false;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.upload-container {
+  width: 100%;
+  background: #ffffff;
+  border-radius: 14px;
+  box-shadow: 0 12px 24px rgba(25, 118, 210, 0.1);
+  overflow: hidden;
+  border: 1px solid #e3f2fd;
+}
+
+.header-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.5rem 2rem;
+  background: #1976d2;
+}
+
+.page-title {
+  margin: 0;
+  color: white;
+  font-size: 1.5rem;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.cloud-icon {
+  font-size: 1.8rem;
+}
+
+.menu-container {
+  position: relative;
+}
+
+.menu-icon {
+  color: white;
+  font-size: 1.8rem;
+  cursor: pointer;
+  padding: 0 10px;
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  background: #fff;
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  min-width: 120px;
+  z-index: 10;
+}
+
+.menu-item {
+  padding: 8px 16px;
+  color: #333;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.menu-item:hover {
+  background: #f0f7ff;
+}
+
+.tab-bar {
+  display: flex;
+  padding: 0 2rem;
+  background: #f8fafd;
+  border-bottom: 1px solid #e0eefc;
+  gap: 8px;
+}
+
+.tab {
+  padding: 14px 32px;
+  font-size: 14px;
+  color: #607d9f;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.tab.active {
+  color: #1976d2;
+  font-weight: 500;
+}
+
+.tab.active .tab-underline {
+  width: 100%;
+  background: #1976d2;
+}
+
+.tab-underline {
+  height: 2px;
+  width: 0;
+  transition: width 0.3s;
+}
+
+.upload-content {
+  padding: 2rem;
+  background: #fcfdff;
+  min-height: 400px;
+  border-top: 1px solid #f0f7ff;
+}
+
+.wip-container {
+  padding: 2rem;
+  height: 400px;
+  background: #fcfdff;
+  border-top: 1px solid #f0f7ff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.wip-message {
+  text-align: center;
+  color: #666;
+}
+
+.wip-icon {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+  display: block;
+}
+
+.wip-message h2 {
+  font-size: 1.5rem;
+  color: #1976d2;
+  margin: 0.5rem 0;
+}
+
+.wip-message p {
+  font-size: 1rem;
+  max-width: 400px;
+  margin: 0 auto;
+}
+</style>
\ No newline at end of file