diff --git a/front/src-tauri/tauri.conf.json b/front/src-tauri/tauri.conf.json
index 24783aa..36e8031 100644
--- a/front/src-tauri/tauri.conf.json
+++ b/front/src-tauri/tauri.conf.json
@@ -13,11 +13,13 @@
     "windows": [
       {
         "title": "DeEarthX V3",
-        "width": 1280,
-        "height": 720,
+        "width": 1024,
+        "height": 600,
+        "minWidth": 800,
+        "minHeight": 500,
         "dragDropEnabled": false,
         "fullscreen": false,
-        "resizable": false,
+        "resizable": true,
         "center": true
       }
     ],
diff --git a/front/src/App.vue b/front/src/App.vue
index 3bf807f..581b736 100644
--- a/front/src/App.vue
+++ b/front/src/App.vue
@@ -86,17 +86,17 @@ const theme = ref({
 
 <template>
     <a-config-provider :theme="theme">
-        <div class="tw:h-screen tw:w-screen">
-            <a-page-header class="tw:fixed tw:h-16" style="border: 1px solid rgb(235, 237, 240)" title="DeEarthX"
+        <div class="tw:h-screen tw:w-screen tw:flex tw:flex-col">
+            <a-page-header class="tw:h-16" style="border: 1px solid rgb(235, 237, 240)" title="DeEarthX"
                 sub-title="V3" :avatar="{ src: './public/dex.png' }">
                 <template #extra>
                     <a-button @click="openAuthorBilibili">作者B站</a-button>
                 </template>
             </a-page-header>
-            <div class="tw:flex tw:full tw:h-89/100">
-                <a-menu id="menu" style="width: 144px;" :selectedKeys="selectedKeys" mode="inline" :items="menuItems"
+            <div class="tw:flex tw:flex-1 tw:overflow-hidden">
+                <a-menu id="menu" style="width: 144px; flex-shrink: 0;" :selectedKeys="selectedKeys" mode="inline" :items="menuItems"
                     @click="handleMenuClick" />
-                <RouterView />
+                <RouterView class="tw:flex-1 tw:overflow-auto" />
             </div>
         </div>
     </a-config-provider>
diff --git a/front/src/component/About.vue b/front/src/component/About.vue
index 87de879..d69a294 100644
--- a/front/src/component/About.vue
+++ b/front/src/component/About.vue
@@ -1,32 +1,44 @@
 <script lang="ts" setup>
 import { invoke } from "@tauri-apps/api/core";
-async function contant(idc:string){
-    let url:string = "";
-    switch (idc){
-        case "elfidc":
-            url = "https://www.elfidc.com";
-            break;
-        default:
-            break;
-    }
-    await invoke("open_url",{url})
+
+// 赞助商数据数组
+const sponsors = [
+  {
+    id: "elfidc",
+    name: "亿讯云",
+    imageUrl: "../src/assets/elfidc.svg",
+    type: "金牌赞助",
+    url: "https://www.elfidc.com"
+  }
+];
+
+async function contant(sponsor: any){
+    await invoke("open_url",{url: sponsor.url})
 }
 </script>
 
 <template>
-    <div class="tw:h-full tw:w-full">
-        <div class="tw:w-full tw:h-64"> <!-- 广告位 -->
-            <h1 class="tw:text-2xl tw:text-center tw:bg-gradient-to-r tw:from-emerald-500 tw:to-cyan-500 tw:bg-clip-text tw:text-transparent">赞助商广告位</h1>
-            <div class="tw:flex tw:flex-col tw:w-30 tw:h-30 tw:ml-5 tw:mt-2" @click="contant('elfidc')"> <!-- 亿讯云 -->
-                <img class="tw:w-24 tw:h-24" src="../assets/elfidc.svg"></img>
-                <h1 class="tw:text-sm tw:text-center tw:text-yellow-400">亿讯云（金牌赞助）</h1>
+    <div class="tw:h-full tw:w-full tw:p-6 tw:bg-gradient-to-br tw:from-gray-50 tw:to-gray-100">
+        <div class="tw:w-full tw:h-full tw:max-w-4xl tw:mx-auto"> <!-- 广告位 -->
+            <h1 class="tw:text-2xl tw:text-center tw:font-bold tw:bg-gradient-to-r tw:from-emerald-500 tw:to-cyan-500 tw:bg-clip-text tw:text-transparent tw:mb-6 tw:mt-2">
+                赞助商广告位
+            </h1>
+            <div class="tw:flex tw:flex-wrap tw:justify-center tw:gap-6 tw:mt-2">
+                <div 
+                    v-for="sponsor in sponsors" 
+                    :key="sponsor.id" 
+                    class="tw:flex tw:flex-col tw:items-center tw:w-40 tw:p-3 tw:bg-white tw:rounded-xl tw:shadow-lg tw:cursor-pointer tw:hover:shadow-xl tw:hover:-translate-y-1 transition-all duration-300"
+                    @click="contant(sponsor)"
+                >
+                    <div class="tw:w-24 tw:h-24 tw:flex tw:items-center tw:justify-center tw:bg-gradient-to-br tw:from-gray-50 tw:to-gray-100 tw:rounded-full tw:p-3 tw:mb-2">
+                        <img class="tw:max-w-full tw:max-h-full tw:object-contain" :src="sponsor.imageUrl" :alt="sponsor.name">
+                    </div>
+                    <h2 class="tw:text-base tw:font-semibold tw:text-gray-800">{{ sponsor.name }}</h2>
+                    <span class="tw:text-xs tw:text-yellow-500 tw:bg-yellow-50 tw:px-2 tw:py-1 tw:rounded-full mt-1">
+                        {{ sponsor.type }}
+                    </span>
+                </div>
             </div>
         </div>
-        <!-- <div class="tw:w-full tw:h-64 flex">
-            <div class="tw:flex tw:flex-col tw:w-30 tw:h-30 tw:ml-5 tw:mt-2">
-                <a-avatar src="../assets/tianpao.jpg" :size="48" style="background-color: #1e90ff"/>
-                <h1 class="tw:text-sm tw:text-center tw:text-yellow-400">天泡</h1>
-            </div>
-        </div> -->
     </div>
 </template>
\ No newline at end of file
diff --git a/front/src/component/Main.vue b/front/src/component/Main.vue
index 228cc3a..a6af307 100644
--- a/front/src/component/Main.vue
+++ b/front/src/component/Main.vue
@@ -210,49 +210,47 @@ function handleStartProcess() {
 }
 </script>
 <template>
-    <div class="tw:h-full tw:w-full tw:relative">
-        <div class="tw:h-full tw:w-full tw:flex tw:flex-col tw:justify-center tw:items-center">
-            <div>
-                <h1 class="tw:text-4xl tw:text-center tw:animate-pulse">DeEarthX</h1>
-                <h1 class="tw:text-sm tw:text-gray-500 tw:text-center">让开服变成随时随地的事情！</h1>
+    <div class="tw:h-full tw:w-full tw:relative tw:flex tw:flex-col">
+        <div class="tw:flex-1 tw:w-full tw:flex tw:flex-col tw:justify-center tw:items-center tw:p-4">
+            <div class="tw:w-full tw:max-w-2xl tw:flex tw:flex-col tw:items-center">
+                <div>
+                    <h1 class="tw:text-4xl tw:text-center tw:animate-pulse">DeEarthX</h1>
+                    <h1 class="tw:text-sm tw:text-gray-500 tw:text-center">让开服变成随时随地的事情！</h1>
+                </div>
+                <a-upload-dragger :disabled="uploadDisabled" class="tw:w-full tw:max-w-md tw:h-48" name="file" action="/" :multiple="false"
+            :before-upload="beforeUpload" @change="handleFileChange" @drop="handleFileDrop" v-model:fileList="uploadedFiles"
+            accept=".zip,.mrpack">
+                    <p class="ant-upload-drag-icon">
+                        <inbox-outlined></inbox-outlined>
+                    </p>
+                    <p class="ant-upload-text">拖拽或点击以上传文件</p>
+                    <p class="ant-upload-hint">
+                        请使用.zip（CurseForge、MCBBS）和.mrpack（Modrinth）文件
+                    </p>
+                </a-upload-dragger>
+                   <a-select
+          ref="select"
+          :options="modeOptions"
+          :value="selectedMode"
+          style="width: 120px;margin-top: 32px"
+          @select="handleModeSelect"
+        ></a-select>
+                <a-button :disabled="startButtonDisabled" type="primary" @click="handleStartProcess" style="margin-top: 6px">
+                    开始
+                </a-button>
             </div>
-            <a-upload-dragger :disabled="uploadDisabled" class="tw:w-144 tw:h-48" name="file" action="/" :multiple="false"
-        :before-upload="beforeUpload" @change="handleFileChange" @drop="handleFileDrop" v-model:fileList="uploadedFiles"
-        accept=".zip,.mrpack">
-                <p class="ant-upload-drag-icon">
-                    <inbox-outlined></inbox-outlined>
-                </p>
-                <p class="ant-upload-text">拖拽或点击以上传文件</p>
-                <p class="ant-upload-hint">
-                    请使用.zip（CurseForge、MCBBS）和.mrpck（Modrinth）文件
-                </p>
-            </a-upload-dragger>
-               <a-select
-      ref="select"
-      :options="modeOptions"
-      :value="selectedMode"
-      style="width: 120px;margin-top: 32px"
-      @select="handleModeSelect"
-    ></a-select>
-            <a-button :disabled="startButtonDisabled" type="primary" @click="handleStartProcess" style="margin-top: 6px">
-                开始
-            </a-button>
         </div>
-        <div v-if="showSteps"
-            class="tw:fixed tw:bottom-2 tw:ml-4 tw:w-272 tw:h-16 tw:flex tw:justify-center tw:items-center tw:text-sm">
+        <div v-if="showSteps" class="tw:fixed tw:bottom-2 tw:left-1/2 tw:-translate-x-1/2 tw:w-full tw:max-w-3xl tw:h-16 tw:flex tw:justify-center tw:items-center tw:text-sm">
             <a-steps :current="currentStep" :items="stepItems" />
         </div>
-        <!-- <div class="tw:absolute tw:bottom-20 tw:right-2 tw:h-16 tw:w-16">
-       
-        </div> -->
-        <div v-if="showSteps" ref="logContainer" class="tw:absolute tw:right-2 tw:bottom-20 tw:h-80 tw:w-56 tw:rounded-xl tw:container tw:overflow-y-auto">
-                <a-card title="制作进度" :bordered="true">
+        <div v-if="showSteps" ref="logContainer" class="tw:absolute tw:right-2 tw:bottom-20 tw:h-80 tw:w-64 tw:rounded-xl tw:overflow-y-auto">
+                <a-card title="制作进度" :bordered="true" class="tw:h-full">
                     <div v-if="unzipProgress.display">
-                  <h1>解压进度</h1>
+                  <h1 class="tw:text-sm">解压进度</h1>
                   <a-progress :percent="unzipProgress.percent" :status="unzipProgress.status" size="small" />
                   </div>
                   <div v-if="downloadProgress.display">
-                  <h1>下载进度</h1>
+                  <h1 class="tw:text-sm">下载进度</h1>
                   <a-progress :percent="downloadProgress.percent" :status="downloadProgress.status" size="small" />
                   </div>
             </a-card>
diff --git a/front/src/component/Setting.vue b/front/src/component/Setting.vue
index 36975e9..d1cb7fa 100644
--- a/front/src/component/Setting.vue
+++ b/front/src/component/Setting.vue
@@ -16,6 +16,25 @@ interface AppConfig {
   oaf: boolean; // 操作完成后打开目录
 }
 
+// 设置项接口
+interface SettingItem {
+  key: string;
+  name: string;
+  description: string;
+  path: string;
+  defaultValue: boolean;
+}
+
+// 设置分类接口
+interface SettingCategory {
+  id: string;
+  title: string;
+  icon: string;
+  bgColor: string;
+  textColor: string;
+  items: SettingItem[];
+}
+
 // 配置状态
 const config = ref<AppConfig>({
   mirror: { bmclapi: false, mcimirror: false },
@@ -23,6 +42,115 @@ const config = ref<AppConfig>({
   oaf: false
 });
 
+// 设置分类和选项数组
+const settings: SettingCategory[] = [
+  {
+    id: 'filter',
+    title: '模组筛选设置',
+    icon: '🧩',
+    bgColor: 'bg-emerald-100',
+    textColor: 'text-emerald-800',
+    items: [
+      {
+        key: 'hashes',
+        name: '哈希过滤',
+        description: '过滤不必要的哈希文件',
+        path: 'filter.hashes',
+        defaultValue: false
+      },
+      {
+        key: 'dexpub',
+        name: 'DeP过滤',
+        description: '过滤 DeP 相关文件',
+        path: 'filter.dexpub',
+        defaultValue: false
+      },
+      {
+        key: 'mixins',
+        name: 'Mixin过滤',
+        description: '过滤 Mixin 文件',
+        path: 'filter.mixins',
+        defaultValue: false
+      }
+    ]
+  },
+  {
+    id: 'mirror',
+    title: '下载源设置',
+    icon: '⬇️',
+    bgColor: 'bg-cyan-100',
+    textColor: 'text-cyan-800',
+    items: [
+      {
+        key: 'mcimirror',
+        name: 'MCIM镜像源',
+        description: '使用 MCIM 镜像源加速下载',
+        path: 'mirror.mcimirror',
+        defaultValue: false
+      },
+      {
+        key: 'bmclapi',
+        name: 'BMCLAPI镜像源',
+        description: '使用 BMCLAPI 镜像源加速下载',
+        path: 'mirror.bmclapi',
+        defaultValue: false
+      }
+    ]
+  },
+  {
+    id: 'system',
+    title: '系统管理设置',
+    icon: '🛠️',
+    bgColor: 'bg-purple-100',
+    textColor: 'text-purple-800',
+    items: [
+      {
+        key: 'oaf',
+        name: '操作完成后打开目录',
+        description: '服务端制作完成后自动打开目录',
+        path: 'oaf',
+        defaultValue: false
+      }
+    ]
+  }
+];
+
+// 获取配置值
+function getConfigValue(path: string): boolean {
+  const keys = path.split('.');
+  let value = config.value;
+  
+  for (const key of keys) {
+    // @ts-expect-error - 动态访问对象属性
+    value = value[key];
+  }
+  
+  // 确保返回值是boolean类型
+  if (typeof value === 'boolean') {
+    return value;
+  }
+  
+  // 如果类型不是boolean，返回默认值false
+  console.warn(`Config value at path "${path}" is not a boolean:`, value);
+  return false;
+}
+
+// 设置配置值
+function setConfigValue(path: string, value: boolean): void {
+  const keys = path.split('.');
+  let obj = config.value;
+  
+  // 遍历到倒数第二个key
+  for (let i = 0; i < keys.length - 1; i++) {
+    // @ts-expect-error - 动态访问对象属性
+    obj = obj[keys[i]];
+  }
+  
+  // 设置最后一个key的值
+  // @ts-expect-error - 动态访问对象属性
+  obj[keys[keys.length - 1]] = value;
+}
+
 // 从后端加载配置
 async function loadConfig() {
   try {
@@ -71,46 +199,49 @@ watch(config, (newValue) => {
 </script>
 
 <template>
-  <div class="tw:h-full tw:w-full">
-    <h1 class="tw:text-3xl tw:font-black tw:tracking-tight tw:text-center">
-      <span class="tw:bg-gradient-to-r tw:from-emerald-500 tw:to-cyan-500 tw:bg-clip-text tw:text-transparent">
-        DeEarth X
-      </span>
-      <span>设置</span>
-    </h1>
-    <div class="tw:border-t-2 tw:border-gray-400 tw:mt-6 tw:mb-2"></div>
-    <!-- DeEarth设置 -->
-    <h1 class="tw:text-xl tw:font-black tw:tracking-tight tw:text-center">模组筛选设置</h1>
-    <div class="tw:flex">
-      <div class="tw:flex tw:ml-5 tw:mt-2">
-        <p class="tw:text-gray-600">哈希过滤</p>
-        <a-switch class="tw:left-2" v-model:checked="config.filter.hashes" />
+  <div class="tw:h-full tw:w-full tw:p-4 tw:overflow-auto tw:bg-gray-50">
+    <div class="tw:max-w-2xl tw:mx-auto">
+      <!-- 标题区域 -->
+      <div class="tw:text-center tw:mb-8">
+        <h1 class="tw:text-4xl tw:font-bold tw:tracking-tight">
+          <span class="tw:bg-gradient-to-r tw:from-emerald-500 tw:to-cyan-500 tw:bg-clip-text tw:text-transparent">
+            DeEarth X
+          </span>
+          <span class="tw:text-gray-800">设置</span>
+        </h1>
+        <p class="tw:text-gray-500 tw:mt-2">让你的 DeEarthX V3 更加适合你自己!</p>
       </div>
-      <div class="tw:flex tw:ml-5 tw:mt-2">
-        <p class="tw:text-gray-600">DeP过滤</p>
-        <a-switch class="tw:left-2" v-model:checked="config.filter.dexpub" />
-      </div>
-      <div class="tw:flex tw:ml-5 tw:mt-2">
-        <p class="tw:text-gray-600">Mixin过滤</p>
-        <a-switch class="tw:left-2" v-model:checked="config.filter.mixins" />
-      </div>
-    </div>
-    <!-- DeEarth设置 -->
-    <div class="tw:border-t-2 tw:border-gray-400 tw:mt-6 tw:mb-2"></div>
-    <!-- 下载源设置 -->
-    <h1 class="tw:text-xl tw:font-black tw:tracking-tight tw:text-center">下载源设置</h1>
-    <div class="tw:flex">
-      <div class="tw:flex tw:ml-5 tw:mt-2">
-        <p class="tw:text-gray-600">MCIM镜像源</p>
-        <a-switch class="tw:left-2" v-model:checked="config.mirror.mcimirror" />
-      </div>
-    </div>
-    <div class="tw:border-t-2 tw:border-gray-400 tw:mt-6 tw:mb-2"></div>
-    <!-- DeEarthX管理 -->
-         <div class="tw:flex">
-      <div class="tw:flex tw:ml-5 tw:mt-2">
-        <p class="tw:text-gray-600">完毕后打开目录</p>
-        <a-switch class="tw:left-2" v-model:checked="config.oaf" />
+
+      <!-- 动态渲染设置卡片 -->
+      <div 
+        v-for="category in settings" 
+        :key="category.id"
+        class="tw:bg-white tw:rounded-lg tw:shadow-md tw:p-6 tw:mb-6"
+      >
+        <h2 class="tw:text-xl tw:font-semibold tw:text-gray-800 tw:mb-4 tw:flex tw:items-center">
+          <span :class="[category.bgColor, category.textColor, 'tw:w-8 tw:h-8 tw:rounded-full tw:flex tw:items-center tw:justify-center tw:mr-3']">
+            {{ category.icon }}
+          </span>
+          {{ category.title }}
+        </h2>
+        <div class="tw:grid tw:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 tw:gap-4">
+          <div 
+            v-for="item in category.items" 
+            :key="item.key"
+            class="tw:flex tw:items-center tw:justify-between tw:p-3 tw:border tw:border-gray-100 tw:rounded-md tw:hover:bg-gray-50"
+          >
+            <div>
+              <p class="tw:text-gray-700 tw:font-medium">{{ item.name }}</p>
+              <p class="tw:text-xs tw:text-gray-500">{{ item.description }}</p>
+            </div>
+            <a-switch 
+              :checked="getConfigValue(item.path)" 
+              @change="setConfigValue(item.path, $event)"
+              :checked-children="'开'" 
+              :un-checked-children="'关'" 
+            />
+          </div>
+        </div>
       </div>
     </div>
   </div>
diff --git a/front/tsconfig.json b/front/tsconfig.json
index 75abdef..8187e43 100644
--- a/front/tsconfig.json
+++ b/front/tsconfig.json
@@ -13,6 +13,12 @@
     "isolatedModules": true,
     "noEmit": true,
 
+    /* Path mapping */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+
     /* Linting */
     "strict": true,
     "noUnusedLocals": true,
diff --git a/front/vite.config.ts b/front/vite.config.ts
index 47b7853..13293c8 100644
--- a/front/vite.config.ts
+++ b/front/vite.config.ts
@@ -1,6 +1,7 @@
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 import tailwindcss from "@tailwindcss/vite";
+import { resolve } from "path";
 
 // @ts-expect-error process is a nodejs global
 const host = process.env.TAURI_DEV_HOST;
@@ -11,6 +12,13 @@ export default defineConfig(async () => ({
     tailwindcss()
   ],
 
+  // 路径别名配置
+  resolve: {
+    alias: {
+      "@": resolve(__dirname, "src")
+    }
+  },
+
   // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
   //
   // 1. prevent Vite from obscuring rust errors