修改页面样式，修复无法上传文件和新建项目的问题

SalesPlatform/sales-server/data.json

@@ -114,6 +114,26 @@
       "file_name": "局部截取_20241220_104817.png",
       "file_size": 4226936,
       "create_time": "2025-12-02T03:07:39.109Z"
+    },
+    {
+      "id": 7,
+      "project_id": 3,
+      "func_name": "数据底板构建",
+      "file_path": "/uploads/videos/1764741871568-7gecqcn9.mp4",
+      "file_type": "video",
+      "file_name": "太师桥2月26日2.mp4",
+      "file_size": 565411207,
+      "create_time": "2025-12-03T06:04:37.208Z"
+    },
+    {
+      "id": 8,
+      "project_id": 2,
+      "func_name": "植被生长",
+      "file_path": "/uploads/images/1764742342284-w0z1joyh.png",
+      "file_type": "image",
+      "file_name": "局部截取_20240925_141516.png",
+      "file_size": 5001555,
+      "create_time": "2025-12-03T06:12:22.306Z"
     }
   ]
 }

SalesPlatform/sales-show-platform/src/views/HomePage.vue

@@ -209,25 +209,25 @@ onMounted(() => {
 </script>
 
 <style scoped>
+/* 核心修复1：根容器移除padding，让主体完全铺满 */
 .home-container {
   width: 100%;
   min-height: 100vh;
   background-color: #f5f7fa;
-  padding: 0 20px;
+  padding: 0 !important; /* 移除左右20px padding，解决主体空白 */
+  margin: 0; /* 确保无默认margin */
 }
 
 .header {
   width: 100%;
-  /* 宽度铺满 */
-  height: 50px;
-  /* 头部高度（可自定义） */
+  height: 50px; /* 统一头部高度（和main-content的calc对应） */
   display: flex;
   align-items: center;
-  /* justify-content: space-between; */
-  padding: 5px 0;
-  /* border-bottom: 1px solid #e6e6e6; */
+  padding: 0 20px; /* 头部单独加左右padding，不影响主体 */
   position: relative;
-  /* 为title绝对定位做基准 */
+  box-sizing: border-box; /* 确保padding不超出宽度 */
+  background: #fff; /* 头部加白色背景，避免背景图穿透 */
+  z-index: 10; /* 确保头部在背景图上层 */
 }
 
 .logo {
@@ -247,40 +247,41 @@ onMounted(() => {
 
 .title {
   position: absolute;
-  /* 脱离文档流，不影响logo布局 */
   left: 50%;
-  /* 水平居中第一步：左移50% */
+  top: 10px;
   transform: translateX(-50%);
-  /* 水平居中第二步：左移自身50% */
-  font-size: 24px;
+  font-size: 30px;
   font-weight: bold;
   color: #333;
 }
 
+/* 核心修复2：主体样式调整（背景铺满+显示完整） */
 .main-content {
-  /* 1. 布局基础：Flex实现左中右排列 */
   display: flex;
   width: 100%;
-  min-height: calc(100vh - 50px); /* 高度=视口高度-头部高度（假设头部60px） */
-  padding: 20px;
+  /* 修复：高度=视口高度-头部高度，且用height而非min-height，确保背景铺满 */
+  height: calc(100vh - 50px); 
+  /* 修复：子元素的内边距移到内部容器，而非主体（避免背景空白） */
   box-sizing: border-box;
-  gap: 20px; /* 三部分之间的间距 */
-  
-  /* 2. 背景图核心配置（按需调整） */
-  background: url('@/assets/images/bg.png') no-repeat center center fixed ;
-  background-size: cover ; /* 背景图覆盖整个主体区域，无空白 */
-  /* 若想背景图不平铺且保留原始比例：background-size: auto !important; */
-  
-  /* 可选：背景图叠加半透明蒙版，提升文字可读性 */
-  position: relative;
+  gap: 20px; /* 子元素间距保留，不影响背景 */
+  /* 修复：背景图定位改为relative（相对于main-content容器），而非fixed */
+  background: url('@/assets/images/bg.png') no-repeat top center; 
+  background-size: cover; /* 背景图覆盖整个主体 */
+  background-attachment: local; /* 取消fixed，改为跟随容器 */
+  /* 可选：加内边距给子元素，避免内容贴边 */
+  padding: 50px 20px 20px 20px; 
 }
 
 .category-sidebar {
-  width: 200px;
+  width: 250px;
+  height: 200px;
   background: #fff;
   padding: 20px;
   border-radius: 8px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
+  /* 确保侧边栏不压缩 */
+  flex-shrink: 0; 
+  margin-top: 40px;
 }
 
 .big-category,
@@ -292,7 +293,23 @@ onMounted(() => {
   flex: 1;
   display: flex;
   flex-wrap: wrap;
-  gap: 20px;
+  /* 1. 半透明背景（rgba最后一位是透明度，0.8=80%不透明） */
+  background: rgba(249, 255, 254, 0.8); 
+  /* 2. 圆角（可根据需求调整大小，12px比较适中） */
+  border-radius: 12px; 
+  /* 3. 内边距：避免项目卡片贴背景边缘 */
+  padding: 20px; 
+  /* 4. 轻微阴影：增强层次感（可选） */
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
+  /* 5. 子元素间距：调整为15px，适配内边距 */
+  column-gap: 15px;
+  row-gap: 20px; 
+   align-content: flex-start; 
+  /* 6. 溢出滚动：如果项目多，出现滚动条（可选） */
+  overflow-y: auto; 
+  /* 7. 确保背景容器占满可用高度 */
+  height: 100%;
+  box-sizing: border-box;
 }
 
 .project-card {
@@ -304,6 +321,8 @@ onMounted(() => {
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
   cursor: pointer;
   transition: all 0.3s;
+  /* 确保卡片不被压缩 */
+  flex-shrink: 0; 
 }
 
 .project-card:hover {
@@ -353,29 +372,56 @@ onMounted(() => {
 }
 
 .project-summary {
-  width: 300px;
-  background: #fff;
+  width: 450px;
+  background: rgba(249, 255, 254, 0.8);
   padding: 20px;
-  border-radius: 8px;
+  border-radius: 12px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
+  /* 确保侧边栏不压缩 */
+  flex-shrink: 0; 
 }
 
 .summary-title {
-  font-size: 18px;
+  font-size: 24px;
   font-weight: bold;
   color: #333;
   margin-bottom: 15px;
 }
 
 .summary-subtitle {
-  font-size: 14px;
+  font-size: 22px;
   font-weight: 500;
   color: #666;
   margin-bottom: 10px;
 }
 
+.summary-title {
+  font-size: 18px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 15px;
+  position: relative; /* 伪元素定位基准 */
+  padding-bottom: 8px;
+}
+
+/* 伪元素实现分隔线 */
+.summary-title::after {
+  content: "";
+  position: absolute;
+  left: 0; /* 线条靠左对齐 */
+  bottom: 0;
+  width: 90%; /* 线条宽度（可改为固定值，比如200px） */
+  height: 2px; /* 线条粗细 */
+  /* 线条颜色 */
+  /* background-color: #a0a0a0;  */
+  background: linear-gradient(to right, #969696, rgba(230, 230, 230, 0));
+  /* 可选：线条居中  */
+  /* align: center;  */
+  /* left: 10%; */
+}
+
 .summary-content {
-  font-size: 14px;
+  font-size: 20px;
   color: #666;
   line-height: 1.6;
 }

SalesPlatform/sales-show-platform/src/views/ProjectDetail.vue

@@ -1,20 +1,21 @@
 <template>
   <div class="detail-container">
-    <!-- 顶部标题 + 删除项目按钮 -->
+    <!-- 顶部标题 + 返回首页图标（替换删除项目按钮） -->
     <div class="header">
       <div class="logo">
-        <img src="https://picsum.photos/50/30" alt="logo" />
+        <img src="@/assets/images/log.png" alt="logo" />
         <span>北京金水信息技术发展有限公司</span>
       </div>
       <div class="title">{{ activeProject?.name || "项目详情" }}</div>
-      <el-button 
-        type="danger" 
-        icon="Delete"
-        @click="handleDeleteProject"
-        v-if="activeProject"
-      >
-        删除项目
-      </el-button>
+      <!-- 替换为返回首页图标按钮 -->
+    <el-button 
+      type="primary" 
+      @click="handleBackHome"
+      size="default"
+    >
+      <el-icon><ArrowLeft /></el-icon>
+      返回首页
+    </el-button>
     </div>
     <!-- 主体内容：左侧功能分组+右侧文件 -->
     <div class="main-content">
@@ -43,7 +44,7 @@
             删
           </el-button>
         </div>
-      </div> <!-- 修正：原代码这里多了一个多余的</div>，导致标签嵌套错误 -->
+      </div>
 
       <!-- 右侧：选中功能下的所有文件展示 -->
       <div class="file-display-wrapper" v-if="activeFuncName">
@@ -64,7 +65,7 @@
                 fit="cover"
                 style="width: 80px; height: 60px;"
                 :preview-src-list="[]"
-              /> <!-- 确保自闭合 -->
+              />
               <div v-else class="video-preview">
                 <el-icon class="video-icon"><VideoPlay /></el-icon>
                 <span>视频</span>
@@ -90,19 +91,16 @@
 
         <!-- 选中文件的大图/视频展示 -->
         <div class="file-preview-large">
-          <!-- 修正：注释移到属性行外，避免解析错误 -->
           <div v-if="activeFile.file_type === 'image'" class="image-wrapper">
-            <!-- 完整显示图片，不裁剪，不超出容器 -->
             <el-image
               :src="`${baseURL}${activeFile.file_path}`"
               fit="contain"
               style="width: 100%; height: 100%;"
               preview-teleported
               :preview-src-list="activeFuncFiles.map(f => `${baseURL}${f.file_path}`)"
-            /> <!-- 确保el-image自闭合，原代码可能未正确闭合 -->
+            />
           </div>
           <div v-else-if="activeFile.file_type === 'video'" class="video-wrapper">
-            <!-- 视频适配容器 -->
             <video
               controls
               :src="`${baseURL}${activeFile.file_path}`"
@@ -127,7 +125,8 @@
 import { ref, onMounted, computed } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { ElMessage, ElMessageBox } from 'element-plus';
-import { VideoPlay } from '@element-plus/icons-vue';
+// 导入返回图标
+import { VideoPlay, ArrowLeft } from '@element-plus/icons-vue';
 import axios from 'axios';
 
 // 基础配置
@@ -264,35 +263,9 @@ const handleDeleteFuncGroup = async (funcName) => {
   }
 };
 
-// 删除整个项目
-const handleDeleteProject = async () => {
-  try {
-    if (!activeProject.value) return;
-    
-    await ElMessageBox.confirm(
-      `确定要删除项目【${activeProject.value.name}】吗？删除后所有文件也会被删除！`,
-      '删除项目确认',
-      { type: 'warning', dangerMode: true }
-    );
-    
-    // 确保projectId是数字类型
-    const projectId = Number(activeProject.value.id);
-    if (isNaN(projectId)) {
-      ElMessage.error('项目ID格式错误！');
-      return;
-    }
-    
-    await axios({
-      method: 'DELETE',
-      url: `${baseURL}/api/project/${projectId}`
-    });
-    ElMessage.success('项目删除成功！');
-    router.push('/');
-  } catch (err) {
-    if (err !== 'cancel') {
-      ElMessage.error(`删除失败：${err.response?.data?.msg || err.message}`);
-    }
-  }
+// 新增：返回首页方法
+const handleBackHome = () => {
+  router.push('/'); // 跳转到首页路由（根据你的首页路由调整，比如'/home'）
 };
 
 // 初始化加载项目详情
@@ -304,44 +277,64 @@ onMounted(() => {
 <style scoped>
 .detail-container {
   width: 100%;
-  height: 100%;
-  background-color: #f5f7fa;
-  padding: 0 20px;
+  min-height: 100vh;
+  background-color: #ffffff;
+  padding: 0 !important; /* 移除左右20px padding，解决主体空白 */
+  margin: 0; /* 确保无默认margin */
 }
 .header {
+  width: 100%;
+  height: 50px; /* 统一头部高度（和main-content的calc对应） */
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  padding: 15px 0;
-  border-bottom: 1px solid #e6e6e6;
+  padding: 0 20px; /* 头部单独加左右padding，不影响主体 */
+  position: relative;
+  box-sizing: border-box; /* 确保padding不超出宽度 */
+  background: #fff; /* 头部加白色背景，避免背景图穿透 */
+  z-index: 10; /* 确保头部在背景图上层 */
 }
 .logo {
   display: flex;
   align-items: center;
   gap: 10px;
-  font-size: 16px;
+  font-size: 15px;
   font-weight: bold;
-  color: #333;
+  color: #0e48ad;
 }
+
 .logo img {
   width: 50px;
   height: 30px;
   object-fit: contain;
 }
 .title {
-  font-size: 24px;
+  position: absolute;
+  left: 50%;
+  top: 10px;
+  transform: translateX(-50%);
+  font-size: 30px;
   font-weight: bold;
   color: #333;
 }
+/* 核心修复2：主体样式调整（背景铺满+显示完整） */
 .main-content {
   display: flex;
-  gap: 20px;
-  margin-top: 20px;
-  height: 90%;
+  width: 100%;
+  /* 修复：高度=视口高度-头部高度，且用height而非min-height，确保背景铺满 */
+  height: calc(100vh - 50px); 
+  /* 修复：子元素的内边距移到内部容器，而非主体（避免背景空白） */
+  box-sizing: border-box;
+  gap: 20px; /* 子元素间距保留，不影响背景 */
+  /* 修复：背景图定位改为relative（相对于main-content容器），而非fixed */
+  background: url('@/assets/images/bg.png') no-repeat top center; 
+  background-size: cover; /* 背景图覆盖整个主体 */
+  background-attachment: local; /* 取消fixed，改为跟随容器 */
+  /* 可选：加内边距给子元素，避免内容贴边 */
+  padding: 50px 20px 20px 20px; 
 }
 .func-sidebar {
   width: 250px;
-  background: #fff;
+  background: rgba(249, 255, 254, 0.8);
   border-radius: 8px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
 }
@@ -388,7 +381,7 @@ onMounted(() => {
 }
 .file-display-wrapper {
   flex: 1;
-  background: #fff;
+  background: rgba(249, 255, 254, 0.8);
   border-radius: 8px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
   padding: 20px;

SalesPlatform/sales-show-platform/src/views/UploadProject.vue

@@ -1,123 +1,88 @@
 <template>
   <div class="upload-container">
-    <!-- 顶部导航栏 -->
-    <nav class="navbar">
-      <div class="navbar-logo">
-        <img src="https://picsum.photos/60/40" alt="金水信息" class="logo-img" />
-        <span class="logo-text">北京金水信息技术发展有限公司</span>
+    <div class="header">
+      <div class="logo">
+        <img src="@/assets/images/log.png" alt="logo" />
+        <span>北京金水信息技术发展有限公司</span>
       </div>
-      <div class="navbar-title">项目文件管理系统</div>
-    </nav>
+      <div class="title">上传项目/功能文件</div>
+    </div>
 
-    <!-- 主容器 -->
-    <div class="main-card">
-      <!-- 步骤导航 -->
-      <div class="step-nav">
-        <div class="step-item" :class="{ active: step >= 1 }">
-          <div class="step-dot">1</div>
-          <div class="step-text">选择上传类型</div>
-        </div>
-        <div class="step-line"></div>
-        <div class="step-item" :class="{ active: step >= 2 }">
-          <div class="step-dot">2</div>
-          <div class="step-text">选择/创建项目</div>
-        </div>
-        <div class="step-line"></div>
-        <div class="step-item" :class="{ active: step >= 3 }">
-          <div class="step-dot">3</div>
-          <div class="step-text">上传功能文件</div>
-        </div>
+    <div class="upload-step">
+      <!-- 上传类型选择 -->
+      <div class="step-item">
+        <div class="step-title">选择上传类型</div>
+        <el-radio-group v-model="uploadType" @change="handleUploadTypeChange">
+          <el-radio label="new_project">新建项目并上传文件</el-radio>
+          <el-radio label="add_file">给已有项目补充上传文件</el-radio>
+        </el-radio-group>
       </div>
 
-      <!-- 步骤1：选择上传类型 -->
-      <div class="form-section" v-if="step === 1">
-        <div class="section-title">请选择上传方式</div>
-        <div class="radio-group">
-          <el-radio-group v-model="uploadType" @change="goToStep(2)">
-            <el-radio 
-              label="new_project" 
-              class="radio-item"
-            >
-              <div class="radio-card">
-                <el-icon class="radio-icon"><FolderAdd /></el-icon>
-                <div class="radio-label">新建项目并上传文件</div>
-                <div class="radio-desc">适用于首次上传的新项目</div>
-              </div>
-            </el-radio>
-            <el-radio 
-              label="add_file" 
-              class="radio-item"
-            >
-              <div class="radio-card">
-                <el-icon class="radio-icon"><UploadFilled /></el-icon>
-                <div class="radio-label">补充文件到已有项目</div>
-                <div class="radio-desc">适用于给现有项目添加文件</div>
-              </div>
-            </el-radio>
-          </el-radio-group>
+      <!-- 分支1：新建项目 -->
+      <div v-if="uploadType === 'new_project'" class="new-project-section">
+        <!-- 步骤1：选择分类 -->
+        <div class="step-item">
+          <div class="step-title">步骤1：选择项目分类</div>
+          <el-select
+            v-model="activeBigCategoryId"
+            placeholder="选择大分类（数字孪生/业务项目）"
+            @change="handleBigCategoryChange"
+            style="width: 300px; margin-bottom: 15px;"
+          >
+            <el-option
+              v-for="category in categories"
+              :key="category.parent_id"
+              :label="category.name"
+              :value="category.parent_id"
+            />
+          </el-select>
+          <el-select
+            v-model="activeSmallCategoryId"
+            placeholder="选择小分类"
+            style="width: 300px;"
+            :disabled="!activeBigCategoryId"
+          >
+            <el-option
+              v-for="child in currentSmallCategories"
+              :key="child.id"
+              :label="child.name"
+              :value="child.id"
+            />
+          </el-select>
         </div>
-      </div>
 
-      <!-- 步骤2：选择/创建项目 -->
-      <div class="form-section" v-if="step === 2">
-        <div class="section-title">
-          {{ uploadType === 'new_project' ? '创建新项目' : '选择已有项目' }}
-        </div>
-        
-        <!-- 新建项目 -->
-        <div v-if="uploadType === 'new_project'" class="form-content">
-          <el-form :model="newProjectForm" label-width="100px" class="form">
-            <el-form-item label="项目分类" prop="categoryId">
-              <el-select 
-                v-model="newProjectForm.categoryId" 
-                placeholder="请选择项目分类"
-                class="form-select"
-              >
-                <el-option
-                  v-for="category in categories"
-                  :key="category.id"
-                  :label="category.name"
-                  :value="category.id"
-                />
-              </el-select>
-            </el-form-item>
-            <el-form-item label="项目名称" prop="name">
-              <el-input 
-                v-model="newProjectForm.name" 
-                placeholder="请输入项目名称（如：智慧园区数字孪生）"
-                class="form-input"
-              />
-            </el-form-item>
-            <el-form-item label="项目简介" prop="summary">
-              <el-input 
-                v-model="newProjectForm.summary" 
-                type="textarea" 
-                placeholder="请简要描述项目背景（选填）"
-                rows="3"
-                class="form-input"
-              />
-            </el-form-item>
-            <el-form-item>
-              <el-button 
-                type="primary" 
-                @click="createProject"
-                :disabled="!newProjectForm.categoryId || !newProjectForm.name"
-                class="btn-primary"
-              >
-                创建项目并下一步
-              </el-button>
-              <el-button @click="goToStep(1)" class="btn-cancel">返回</el-button>
-            </el-form-item>
-          </el-form>
+        <!-- 步骤2：创建项目 -->
+        <div class="step-item" style="margin-top: 30px;">
+          <div class="step-title">步骤2：填写项目信息</div>
+          <el-input
+            v-model="projectName"
+            placeholder="输入项目名称"
+            style="width: 300px; margin-bottom: 15px;"
+          />
+          <el-input
+            v-model="projectSummary"
+            type="textarea"
+            placeholder="输入项目背景简介"
+            style="width: 500px; height: 100px; margin-bottom: 15px;"
+          />
+          <el-button
+            type="primary"
+            @click="createProject"
+            :disabled="!activeBigCategoryId || !activeSmallCategoryId || !projectName"
+          >
+            创建项目
+          </el-button>
         </div>
+      </div>
 
-        <!-- 选择已有项目 -->
-        <div v-else class="form-content">
-          <el-select 
-            v-model="selectedProjectId" 
-            placeholder="请选择要补充文件的项目"
-            class="project-select"
-            filterable
+      <!-- 分支2：给已有项目上传文件 -->
+      <div v-if="uploadType === 'add_file'" class="add-file-section">
+        <div class="step-item">
+          <div class="step-title">选择已有项目</div>
+          <el-select
+            v-model="selectedProjectId"
+            placeholder="选择要补充文件的项目"
+            style="width: 300px; margin-bottom: 15px;"
             @change="getProjectInfo"
           >
             <el-option
@@ -127,194 +92,111 @@
               :value="project.id"
             />
           </el-select>
-          
-          <div v-if="selectedProjectInfo" class="project-card">
-            <div class="project-card-header">
-              <span class="project-name">{{ selectedProjectInfo.name }}</span>
-              <span class="project-category">{{ selectedProjectInfo.categoryName }}</span>
-            </div>
-            <div class="project-card-body">
-              <div class="project-info-item">
-                <span class="info-label">功能数量：</span>
-                <span class="info-value">{{ selectedProjectInfo.funcNames.length }}个</span>
-              </div>
-              <div class="project-info-item">
-                <span class="info-label">已有功能：</span>
-                <span class="info-value">{{ selectedProjectInfo.funcNames.join('、') || '暂无' }}</span>
-              </div>
-            </div>
-          </div>
-          
-          <div class="btn-group" style="margin-top: 20px;">
-            <el-button 
-              type="primary" 
-              @click="goToStep(3)"
-              :disabled="!selectedProjectId"
-              class="btn-primary"
-            >
-              确认选择并下一步
-            </el-button>
-            <el-button @click="goToStep(1)" class="btn-cancel">返回</el-button>
+          <!-- 显示选中项目的信息 -->
+          <div v-if="selectedProjectInfo" class="project-info">
+            <div class="info-label">项目名称：{{ selectedProjectInfo.name }}</div>
+            <div class="info-label">所属分类：{{ selectedProjectInfo.categoryName }}</div>
+            <div class="info-label">现有功能数：{{ selectedProjectInfo.funcNames.length }}个</div>
+            <div class="info-label">现有功能：{{ selectedProjectInfo.funcNames.join('、') }}</div>
           </div>
         </div>
       </div>
 
-      <!-- 步骤3：上传功能文件 -->
-      <div class="form-section" v-if="step === 3">
-        <div class="section-title">上传功能文件</div>
-        <div class="form-content">
-          <div class="func-name-selector">
-            <label class="func-label">功能名称：</label>
-            <el-select 
-              v-model="funcName" 
-              placeholder="选择已有功能 / 输入新功能名称"
-              filterable
-              allow-create
-              @create="handleCreateNewFunc"
-              class="func-select"
-            >
-              <el-option
-                v-for="func in projectExistFuncs"
-                :key="func"
-                :label="func"
-                :value="func"
-              />
-            </el-select>
-            <div class="func-tip">提示：输入新名称按回车可创建新功能</div>
-          </div>
-
-          <!-- 文件上传区域 -->
-          <div class="upload-area">
-            <el-upload
-              class="uploader"
-              :auto-upload="false"
-              :on-change="handleFileChange"
-              :on-remove="handleFileRemove"
-              :file-list="fileList"
-              multiple
-              accept=".jpg,.png,.mp4,.avi,.mov"
-              drag
-            >
-              <div class="upload-dragger">
-                <el-icon class="upload-icon"><Upload /></el-icon>
-                <div class="upload-text">点击或拖拽文件到此处上传</div>
-                <div class="upload-hint">支持多选，格式：JPG/PNG/MP4/AVI/MOV，单文件最大2GB</div>
-              </div>
-            </el-upload>
-          </div>
-
-          <!-- 已选文件列表 -->
-          <div v-if="fileList.length > 0" class="file-list-container">
-            <div class="file-list-header">
-              <span>已选择文件（{{ fileList.length }}个）</span>
-              <el-button 
-                type="text" 
-                text-color="#ff4d4f"
-                @click="fileList = []"
-                size="small"
-              >
-                清空所有
-              </el-button>
-            </div>
-            <div class="file-card" v-for="(file, index) in fileList" :key="index">
-              <div class="file-icon">
-                <el-icon v-if="file.raw.type.includes('image')"><Picture /></el-icon>
-                <el-icon v-else><VideoPlay /></el-icon>
-              </div>
-              <div class="file-info">
-                <div class="file-name">{{ file.name }}</div>
-                <div class="file-size">{{ formatFileSize(file.size) }}</div>
-              </div>
-              <el-button 
-                type="text" 
-                icon="Delete"
-                text-color="#ff4d4f"
-                size="small"
-                @click="handleFileRemove(file, fileList)"
-              >
-                删除
-              </el-button>
-            </div>
-          </div>
-
-          <!-- 操作按钮 -->
-          <div class="btn-group">
-            <el-button 
-              type="success" 
-              @click="uploadFuncFile"
-              :disabled="!funcName || fileList.length === 0"
-              class="btn-success"
-              icon="UploadFilled"
-            >
-              批量上传选中文件
-            </el-button>
-            <el-button @click="goToStep(2)" class="btn-cancel">返回</el-button>
-          </div>
+      <!-- 通用：上传功能文件（核心修复：按钮启用逻辑） -->
+      <div class="step-item" style="margin-top: 30px;" v-if="projectId || selectedProjectId">
+        <div class="step-title">
+          {{ uploadType === 'new_project' ? '步骤3' : '步骤2' }}：上传功能文件
+          <span v-if="uploadType === 'new_project'">(项目：{{ projectName }})</span>
+          <span v-if="uploadType === 'add_file'">(项目：{{ selectedProjectInfo?.name }})</span>
+        </div>
+        
+        <!-- 功能名称输入框（强制要求输入/选择） -->
+        <div style="margin-bottom: 10px;">
+          <label style="font-size: 14px; color: #333; margin-right: 10px;">功能名称：</label>
+          <el-select
+            v-model="funcName"
+            placeholder="必须选择/输入功能名称"
+            style="width: 300px;"
+            filterable
+            allow-create
+            @create="handleCreateNewFunc"
+            @change="checkUploadButtonStatus"
+          >
+            <el-option
+              v-for="func in projectExistFuncs"
+              :key="func"
+              :label="func"
+              :value="func"
+            />
+          </el-select>
         </div>
-      </div>
 
-      <!-- 上传成功提示 -->
-      <el-dialog 
-        v-model="uploadSuccessVisible" 
-        title="上传成功"
-        width="400px"
-        center
-      >
-        <div class="success-content">
-          <el-icon class="success-icon"><CircleCheck /></el-icon>
-          <div class="success-text">
-            成功上传 {{ successCount }} 个文件到「{{ funcName }}」功能下！
+        <!-- 调试信息（可选：帮助排查问题） -->
+        <div style="color: #666; font-size: 12px; margin-bottom: 15px;">
+          调试：功能名称={{ funcName || '空' }} | 已选文件数={{ fileList.length }} | 按钮禁用={{ !funcName || fileList.length === 0 }}
+        </div>
+        
+        <!-- 文件选择（修复：简化文件验证，确保文件能被收集） -->
+        <el-upload
+          class="upload-file"
+          :auto-upload="false"
+          :on-change="handleFileChange"
+          :on-remove="handleFileRemove"
+          :file-list="fileList"
+          multiple
+          accept=".jpg,.png,.mp4,.avi,.mov"
+          style="margin-bottom: 15px;"
+        >
+          <el-button type="primary">选择图片/视频（可多选）</el-button>
+        </el-upload>
+        
+        <!-- 已选文件列表（明确显示） -->
+        <div v-if="fileList.length > 0" class="selected-files">
+          <div class="selected-title">已选择文件（{{ fileList.length }}个）：</div>
+          <div class="file-tag" v-for="(file, index) in fileList" :key="index">
+            {{ file.name }} ({{ formatFileSize(file.size) }})
           </div>
         </div>
-        <template #footer>
-          <el-button @click="resetPage">返回首页</el-button>
-          <el-button type="primary" @click="continueUpload">继续上传</el-button>
-        </template>
-      </el-dialog>
+        <div v-else style="color: #999; font-size: 12px; margin-bottom: 15px;">
+          暂无选中文件，请选择图片/视频文件
+        </div>
+        
+        <!-- 上传按钮（修复：禁用条件更宽松，增加点击提示） -->
+        <el-button
+          type="success"
+          @click="uploadFuncFile"
+          :disabled="!funcName || fileList.length === 0"
+          @mouseenter="checkUploadButtonStatus"
+        >
+          批量上传选中文件
+        </el-button>
+      </div>
     </div>
-
-    <!-- 页脚 -->
-    <footer class="footer">
-      <div class="footer-text">© 2025 北京金水信息技术发展有限公司 版权所有</div>
-    </footer>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue';
-import { ElMessage } from 'element-plus'; // 移除未使用的ElMessageBox
-import { 
-  FolderAdd, UploadFilled, Upload, Picture, VideoPlay, 
-  CircleCheck // 移除未使用的Delete图标
-} from '@element-plus/icons-vue';
+import { ref, onMounted, watch } from 'vue';
+import { ElMessage } from 'element-plus';
 import axios from 'axios';
 
-const baseURL = 'http://localhost:3001';
+const baseURL = 'http://localhost:3001'; // 后端地址
 
 // 响应式变量
-const step = ref(1); // 当前步骤：1-选类型 2-选/创项目 3-传文件
 const uploadType = ref('new_project');
 const categories = ref([]);
+const activeBigCategoryId = ref('');
+const currentSmallCategories = ref([]);
+const activeSmallCategoryId = ref('');
+const projectName = ref('');
+const projectSummary = ref('');
+const projectId = ref('');
 const allProjects = ref([]);
-
-// 新建项目表单
-const newProjectForm = ref({
-  categoryId: '',
-  name: '',
-  summary: ''
-});
-const projectId = ref(''); // 创建后的项目ID
-
-// 选择已有项目
 const selectedProjectId = ref('');
 const selectedProjectInfo = ref(null);
 const projectExistFuncs = ref([]);
-
-// 文件上传
 const funcName = ref('');
-const fileList = ref([]);
-const uploadSuccessVisible = ref(false);
-const successCount = ref(0);
+const fileList = ref([]); // 确保初始化为空数组
 
 // 格式化文件大小
 const formatFileSize = (size) => {
@@ -329,12 +211,18 @@ const formatFileSize = (size) => {
   return `${fileSize.toFixed(2)}${units[unitIndex]}`;
 };
 
-// 步骤导航
-const goToStep = (targetStep) => {
-  step.value = targetStep;
+// 检查上传按钮状态（调试用）
+const checkUploadButtonStatus = () => {
+  if (!funcName.value) {
+    ElMessage.warning('请先输入/选择功能名称！');
+  } else if (fileList.value.length === 0) {
+    ElMessage.warning('请选择要上传的文件！');
+  } else {
+    ElMessage.success('可以上传了！');
+  }
 };
 
-// 获取分类列表
+// 获取所有分类
 const getCategories = async () => {
   try {
     const res = await axios.get(`${baseURL}/api/categories`);
@@ -344,13 +232,55 @@ const getCategories = async () => {
   }
 };
 
-// 获取所有项目
+// 获取所有已有项目
 const getAllProjects = async () => {
   try {
+    const categoryRes = await axios.get(`${baseURL}/api/categories`);
+    const allCats = categoryRes.data.data;
+    
     const res = await axios.get(`${baseURL}/api/projects?big_category_id=all&category_id=all`);
-    allProjects.value = res.data.data;
+    const projects = res.data.data;
+    
+    const projectsWithInfo = [];
+    for (const project of projects) {
+      let categoryName = '';
+      allCats.forEach(bigCat => {
+        const smallCat = bigCat.children.find(child => child.id === project.category_id);
+        if (smallCat) {
+          categoryName = `${bigCat.name}-${smallCat.name}`;
+        }
+      });
+      projectsWithInfo.push({
+        ...project,
+        categoryName,
+        funcNames: project.funcNames || []
+      });
+    }
+    allProjects.value = projectsWithInfo;
   } catch (err) {
-    ElMessage.error('获取项目列表失败：' + err.message);
+    ElMessage.error('获取已有项目失败：' + err.message);
+  }
+};
+
+// 切换大分类
+const handleBigCategoryChange = () => {
+  const currentBigCategory = categories.value.find(
+    item => item.parent_id === activeBigCategoryId.value
+  );
+  currentSmallCategories.value = currentBigCategory?.children || [];
+  activeSmallCategoryId.value = '';
+};
+
+// 切换上传类型
+const handleUploadTypeChange = () => {
+  projectId.value = '';
+  selectedProjectId.value = '';
+  selectedProjectInfo.value = null;
+  projectExistFuncs.value = [];
+  funcName.value = '';
+  fileList.value = [];
+  if (uploadType.value === 'add_file') {
+    getAllProjects();
   }
 };
 
@@ -358,13 +288,13 @@ const getAllProjects = async () => {
 const createProject = async () => {
   try {
     const res = await axios.post(`${baseURL}/api/project`, {
-      name: newProjectForm.value.name,
-      category_id: newProjectForm.value.categoryId,
-      summary: newProjectForm.value.summary
+      name: projectName.value,
+      category_id: activeSmallCategoryId.value,
+      summary: projectSummary.value
     });
     projectId.value = res.data.data.project_id;
+    projectExistFuncs.value = [];
     ElMessage.success('项目创建成功！');
-    goToStep(3);
   } catch (err) {
     ElMessage.error('创建项目失败：' + err.message);
   }
@@ -373,477 +303,216 @@ const createProject = async () => {
 // 获取选中项目信息
 const getProjectInfo = async () => {
   if (!selectedProjectId.value) return;
-  try {
-    const res = await axios.get(`${baseURL}/api/project/${selectedProjectId.value}`);
-    selectedProjectInfo.value = res.data.data;
-    projectExistFuncs.value = res.data.data.funcNames || [];
-  } catch (err) {
-    ElMessage.error('获取项目信息失败：' + err.message);
+  const project = allProjects.value.find(item => item.id == selectedProjectId.value);
+  if (project) {
+    selectedProjectInfo.value = project;
+    projectExistFuncs.value = [...project.funcNames];
+    funcName.value = '';
+    fileList.value = [];
   }
 };
 
-// 创建新功能名称
+// 处理新增功能名称
 const handleCreateNewFunc = (newFuncName) => {
   if (!projectExistFuncs.value.includes(newFuncName)) {
     projectExistFuncs.value.push(newFuncName);
   }
+  // 创建后自动赋值，确保funcName不为空
   funcName.value = newFuncName;
+  checkUploadButtonStatus();
 };
 
-// 文件选择/移除
+// 核心修复：简化文件处理逻辑，确保文件能被收集
 const handleFileChange = (file, newFileList) => {
+  // 移除严格验证（先确保文件能被收集，验证放到上传时）
   fileList.value = newFileList.filter(item => item.status !== 'removed');
+  // 实时检查按钮状态
+  checkUploadButtonStatus();
 };
+
+// 处理文件移除
 const handleFileRemove = (file, newFileList) => {
   fileList.value = newFileList;
+  checkUploadButtonStatus();
 };
 
-// 批量上传文件
+// 批量上传文件（上传时再做文件验证）
 const uploadFuncFile = async () => {
   try {
-    const targetId = projectId.value || selectedProjectId.value;
-    if (!targetId) return ElMessage.error('请先选择/创建项目！');
+    const targetProjectId = projectId.value || selectedProjectId.value;
+    if (!targetProjectId) {
+      ElMessage.error('请先选择/创建项目！');
+      return;
+    }
+    if (!funcName.value.trim()) {
+      ElMessage.error('功能名称不能为空！');
+      return;
+    }
+    if (fileList.value.length === 0) {
+      ElMessage.error('请选择要上传的文件！');
+      return;
+    }
+
+    ElMessage.info(`开始上传${fileList.value.length}个文件，请稍候...`);
     
-    ElMessage.info('开始上传文件，请稍候...');
-    let success = 0;
+    let successCount = 0;
     let failFiles = [];
-
-    for (const file of fileList.value) {
+    for (const fileItem of fileList.value) {
       try {
+        // 上传时做文件验证
+        const fileType = fileItem.raw.type;
+        const allowImageTypes = ['image/jpeg', 'image/png', 'image/gif'];
+        const allowVideoTypes = ['video/mp4', 'video/avi', 'video/quicktime'];
+        const allowTypes = [...allowImageTypes, ...allowVideoTypes];
+        
+        if (!allowTypes.includes(fileType)) {
+          failFiles.push(`${fileItem.name}（类型不支持）`);
+          continue;
+        }
+        
+        const maxSize = 2 * 1024 * 1024 * 1024;
+        if (fileItem.raw.size > maxSize) {
+          failFiles.push(`${fileItem.name}（大小超过2GB）`);
+          continue;
+        }
+        
+        const illegalChars = /[\\/:*?"<>|]/;
+        if (illegalChars.test(fileItem.name)) {
+          failFiles.push(`${fileItem.name}（文件名含非法字符）`);
+          continue;
+        }
+
+        // 验证通过，上传文件
         const formData = new FormData();
-        formData.append('file', file.raw);
-        formData.append('project_id', targetId);
-        formData.append('func_name', funcName.value);
+        formData.append('file', fileItem.raw);
+        formData.append('project_id', targetProjectId);
+        formData.append('func_name', funcName.value.trim());
 
         await axios.post(`${baseURL}/api/project/file`, formData, {
           headers: { 'Content-Type': 'multipart/form-data' }
         });
-        success++;
+        successCount++;
       } catch (err) {
-        failFiles.push(file.name);
+        failFiles.push(`${fileItem.name}（上传失败：${err.message}）`);
       }
     }
 
-    successCount.value = success;
-    uploadSuccessVisible.value = true;
-
+    // 上传结果提示
+    if (successCount > 0) {
+      ElMessage.success(`成功上传${successCount}个文件！`);
+    }
     if (failFiles.length > 0) {
-      ElMessage.error(`以下文件上传失败：${failFiles.join('、')}`);
+      ElMessage.error(`上传失败的文件：${failFiles.join('、')}`);
+    }
+
+    // 重置状态
+    funcName.value = '';
+    fileList.value = [];
+    
+    if (uploadType.value === 'add_file') {
+      getProjectInfo();
     }
   } catch (err) {
-    ElMessage.error('上传失败：' + err.message);
+    ElMessage.error('批量上传失败：' + err.message);
   }
 };
 
-// 重置页面/继续上传
-const resetPage = () => {
-  step.value = 1;
-  uploadSuccessVisible.value = false;
-  fileList.value = [];
-  funcName.value = '';
-};
-const continueUpload = () => {
-  uploadSuccessVisible.value = false;
-  fileList.value = [];
-};
+// 监听上传类型变化
+watch([uploadType], () => {
+  if (uploadType.value === 'new_project') {
+    getCategories();
+  } else {
+    getAllProjects();
+  }
+});
 
-// 初始化
 onMounted(() => {
   getCategories();
-  getAllProjects();
 });
 </script>
 
 <style scoped>
-/* 全局样式 */
 .upload-container {
+  width: 100%;
   min-height: 100vh;
-  background: linear-gradient(120deg, #f5f7fa 0%, #e4e8f0 100%);
-  padding-bottom: 40px;
+  background-color: #f5f7fa;
+  padding: 0 20px;
 }
-
-/* 导航栏 */
-.navbar {
-  background: #fff;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-  padding: 0 40px;
-  height: 70px;
+.header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 30px;
+  padding: 15px 0;
+  border-bottom: 1px solid #e6e6e6;
 }
-.navbar-logo {
+.logo {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 10px;
+  font-size: 15px;
+  font-weight: bold;
+  color: #0e48ad;
 }
-.logo-img {
-  width: 60px;
-  height: 40px;
+
+.logo img {
+  width: 50px;
+  height: 30px;
   object-fit: contain;
 }
-.logo-text {
-  font-size: 18px;
-  font-weight: 600;
-  color: #1f2937;
-}
-.navbar-title {
-  font-size: 20px;
-  font-weight: 600;
-  color: #409eff;
+.title {
+  font-size: 24px;
+  font-weight: bold;
+  color: #333;
 }
-
-/* 主卡片 */
-.main-card {
-  width: 90%;
-  max-width: 1000px;
-  margin: 0 auto;
+.upload-step {
+  margin-top: 30px;
   background: #fff;
-  border-radius: 12px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
   padding: 30px;
-}
-
-/* 步骤导航 */
-.step-nav {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 40px;
-  position: relative;
-}
-.step-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  z-index: 1;
-}
-.step-dot {
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  background: #e5e7eb;
-  color: #9ca3af;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 600;
-  margin-bottom: 8px;
-  transition: all 0.3s ease;
-}
-.step-text {
-  font-size: 14px;
-  color: #9ca3af;
-  transition: all 0.3s ease;
-}
-.step-item.active .step-dot {
-  background: #409eff;
-  color: #fff;
-  box-shadow: 0 0 0 4px rgba(64, 158, 255, 0.2);
-}
-.step-item.active .step-text {
-  color: #409eff;
-  font-weight: 500;
-}
-.step-line {
-  width: 80px;
-  height: 2px;
-  background: #e5e7eb;
-  margin: 0 10px;
-}
-
-/* 表单区域 */
-.form-section {
-  margin-bottom: 20px;
-}
-.section-title {
-  font-size: 20px;
-  font-weight: 600;
-  color: #1f2937;
-  margin-bottom: 20px;
-  padding-bottom: 10px;
-  border-bottom: 1px solid #f3f4f6;
-}
-.form-content {
-  padding: 0 20px;
-}
-
-/* 步骤1：上传类型选择 */
-.radio-group {
-  display: flex;
-  gap: 20px;
-  padding: 20px;
-}
-.radio-item {
-  flex: 1;
-}
-.radio-card {
-  padding: 24px;
-  border: 2px solid #e5e7eb;
-  border-radius: 8px;
-  text-align: center;
-  cursor: pointer;
-  transition: all 0.3s ease;
-}
-.radio-item.is-checked .radio-card {
-  border-color: #409eff;
-  background: rgba(64, 158, 255, 0.05);
-}
-.radio-icon {
-  font-size: 32px;
-  color: #409eff;
-  margin-bottom: 12px;
-}
-.radio-label {
-  font-size: 16px;
-  font-weight: 500;
-  color: #1f2937;
-  margin-bottom: 8px;
-}
-.radio-desc {
-  font-size: 14px;
-  color: #6b7280;
-}
-
-/* 表单样式 */
-.form {
-  max-width: 600px;
-}
-.form-select, .form-input {
-  width: 100%;
-}
-.project-select {
-  width: 100%;
-  max-width: 500px;
-}
-
-/* 项目卡片 */
-.project-card {
-  margin-top: 20px;
-  border: 1px solid #e5e7eb;
   border-radius: 8px;
-  padding: 16px;
-  background: #f9fafb;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
+  max-width: 800px;
 }
-.project-card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 12px;
-  padding-bottom: 8px;
-  border-bottom: 1px solid #e5e7eb;
-}
-.project-name {
-  font-size: 16px;
-  font-weight: 600;
-  color: #1f2937;
+.step-title {
+  font-size: 18px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 20px;
 }
-.project-category {
-  font-size: 14px;
-  color: #6b7280;
-  background: #f3f4f6;
-  padding: 4px 8px;
+.project-info {
+  margin-top: 10px;
+  padding: 10px;
+  background: #f5f7fa;
   border-radius: 4px;
-}
-.project-info-item {
-  display: flex;
-  margin-bottom: 8px;
+  width: 300px;
 }
 .info-label {
-  color: #6b7280;
-  min-width: 80px;
-}
-.info-value {
-  color: #1f2937;
-  flex: 1;
-}
-
-/* 功能名称选择 */
-.func-name-selector {
-  margin-bottom: 24px;
-}
-.func-label {
   font-size: 14px;
-  color: #1f2937;
-  margin-right: 12px;
-  font-weight: 500;
-}
-.func-select {
-  width: 100%;
-  max-width: 400px;
-}
-.func-tip {
-  font-size: 12px;
-  color: #9ca3af;
-  margin-top: 8px;
+  color: #666;
+  margin-bottom: 5px;
 }
-
-/* 文件上传区域 */
-.upload-area {
-  margin-bottom: 24px;
-}
-.uploader {
-  width: 100%;
-}
-.upload-dragger {
-  width: 100%;
-  height: 200px;
-  border: 2px dashed #d1d5db;
-  border-radius: 8px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  background: #f9fafb;
-  transition: all 0.3s ease;
-}
-.upload-dragger:hover {
-  border-color: #409eff;
-  background: rgba(64, 158, 255, 0.05);
-}
-.upload-icon {
-  font-size: 48px;
-  color: #9ca3af;
-  margin-bottom: 12px;
-}
-.upload-text {
-  font-size: 16px;
-  color: #4b5563;
-  margin-bottom: 8px;
-}
-.upload-hint {
-  font-size: 12px;
-  color: #9ca3af;
+.new-project-section, .add-file-section {
+  margin-top: 20px;
+  padding-top: 20px;
+  border-top: 1px dashed #e6e6e6;
 }
 
-/* 文件列表 */
-.file-list-container {
-  margin-bottom: 24px;
+/* 已选文件样式 */
+.selected-files {
+  margin-bottom: 15px;
 }
-.file-list-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 12px;
-  font-weight: 500;
-  color: #1f2937;
-}
-.file-card {
-  display: flex;
-  align-items: center;
-  padding: 12px;
-  border: 1px solid #e5e7eb;
-  border-radius: 6px;
+.selected-title {
+  font-size: 14px;
+  color: #666;
   margin-bottom: 8px;
-  background: #f9fafb;
 }
-.file-icon {
-  font-size: 24px;
+.file-tag {
+  display: inline-block;
+  padding: 4px 8px;
+  background: #e8f4ff;
   color: #409eff;
-  margin-right: 12px;
-  width: 40px;
-  text-align: center;
-}
-.file-info {
-  flex: 1;
-}
-.file-name {
-  font-size: 14px;
-  color: #1f2937;
-  margin-bottom: 4px;
-}
-.file-size {
+  border-radius: 4px;
   font-size: 12px;
-  color: #9ca3af;
-}
-
-/* 按钮样式 */
-.btn-group {
-  display: flex;
-  gap: 12px;
-}
-.btn-primary {
-  background: #409eff;
-  border-color: #409eff;
-  padding: 10px 24px;
-  font-size: 14px;
-  border-radius: 6px;
-  transition: all 0.2s ease;
-}
-.btn-primary:hover {
-  background: #3399ff;
-}
-.btn-success {
-  background: #67c23a;
-  border-color: #67c23a;
-  padding: 10px 24px;
-  font-size: 14px;
-  border-radius: 6px;
-  transition: all 0.2s ease;
-}
-.btn-success:hover {
-  background: #5daf34;
-}
-.btn-cancel {
-  border-color: #d9d9d9;
-  color: #6b7280;
-  padding: 10px 24px;
-  font-size: 14px;
-  border-radius: 6px;
-}
-
-/* 成功弹窗 */
-.success-content {
-  text-align: center;
-  padding: 20px 0;
-}
-.success-icon {
-  font-size: 64px;
-  color: #67c23a;
-  margin-bottom: 16px;
-}
-.success-text {
-  font-size: 18px;
-  color: #1f2937;
-  font-weight: 500;
-}
-
-/* 页脚 */
-.footer {
-  text-align: center;
-  margin-top: 40px;
-  color: #9ca3af;
-  font-size: 14px;
-}
-.footer-text {
-  padding: 20px;
-}
-
-/* 响应式适配 */
-@media (max-width: 768px) {
-  .navbar {
-    padding: 0 20px;
-    height: 60px;
-  }
-  .logo-text {
-    font-size: 16px;
-  }
-  .navbar-title {
-    font-size: 18px;
-  }
-  .main-card {
-    width: 95%;
-    padding: 20px;
-  }
-  .radio-group {
-    flex-direction: column;
-  }
-  .step-nav {
-    flex-wrap: wrap;
-  }
-  .step-line {
-    width: 40px;
-  }
+  margin-right: 8px;
+  margin-bottom: 8px;
 }
 </style>