save code

frontend/css/style.css

@@ -121,46 +121,29 @@ body {
     object-fit: cover;
 }
 
-/* 发型分类入口 */
-.category-section {
+/* 下一步按钮 */
+.next-section {
     text-align: center;
+    margin-top: 3rem;
 }
 
-.category-section h2 {
-    margin-bottom: 2rem;
-    color: #333;
-}
-
-.category-buttons {
-    display: flex;
-    justify-content: center;
-    gap: 2rem;
-    flex-wrap: wrap;
-}
-
-.category-btn {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 2rem;
-    border: 2px solid #4A90E2;
-    border-radius: 12px;
-    background-color: white;
-    cursor: pointer;
-    transition: all 0.3s;
-    min-width: 150px;
-}
-
-.category-btn:hover {
+.next-btn {
+    padding: 1.5rem 3rem;
     background-color: #4A90E2;
     color: white;
-    transform: translateY(-5px);
-    box-shadow: 0 5px 15px rgba(74, 144, 226, 0.3);
+    border: none;
+    border-radius: 12px;
+    font-size: 1.2rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s;
+    min-width: 200px;
 }
 
-.gender-icon {
-    font-size: 3rem;
-    margin-bottom: 1rem;
+.next-btn:hover {
+    background-color: #357ABD;
+    transform: translateY(-5px);
+    box-shadow: 0 5px 15px rgba(74, 144, 226, 0.3);
 }
 
 /* 分类导航 */

frontend/index.html

@@ -30,29 +30,17 @@
                     </div>
                 </div>
 
-                <!-- 发型分类入口 -->
-                <div class="category-section">
-                    <h2>选择发型分类</h2>
-                    <div class="category-buttons">
-                        <button id="maleBtn" class="category-btn">
-                            <span class="gender-icon">👨</span>
-                            <span>男士发型</span>
-                        </button>
-                        <button id="femaleBtn" class="category-btn">
-                            <span class="gender-icon">👩</span>
-                            <span>女士发型</span>
-                        </button>
-                    </div>
+                <!-- 下一步按钮 -->
+                <div class="next-section">
+                    <button id="nextBtn" class="next-btn">
+                        <span>下一步选择发型</span>
+                    </button>
                 </div>
             </section>
 
             <!-- 发型选择页 -->
             <section id="hairstylePage" class="page">
-                <!-- 分类导航 -->
-                <div class="category-nav">
-                    <button id="navMaleBtn" class="nav-category-btn active">男士</button>
-                    <button id="navFemaleBtn" class="nav-category-btn">女士</button>
-                </div>
+
 
                 <!-- 发型列表 -->
                 <div class="hairstyle-list">

frontend/js/main.js

@@ -30,11 +30,7 @@ async function changeHair(imageFile, hairstyleId) {
 // 全局变量
 let uploadedImage = null;
 let selectedHairstyle = null;
-let currentGender = 'male';
-let hairstylesData = {
-    male: [],
-    female: []
-};
+let hairstylesData = [];
 
 // DOM元素
 const elements = {
@@ -42,13 +38,10 @@ const elements = {
     homePage: document.getElementById('homePage'),
     imagePreview: document.getElementById('imagePreview'),
     imageUpload: document.getElementById('imageUpload'),
-    maleBtn: document.getElementById('maleBtn'),
-    femaleBtn: document.getElementById('femaleBtn'),
+    nextBtn: document.getElementById('nextBtn'),
     
     // 发型选择页元素
     hairstylePage: document.getElementById('hairstylePage'),
-    navMaleBtn: document.getElementById('navMaleBtn'),
-    navFemaleBtn: document.getElementById('navFemaleBtn'),
     hairstyleGrid: document.getElementById('hairstyleGrid'),
     confirmBtn: document.getElementById('confirmBtn'),
     
@@ -78,13 +71,8 @@ function bindEventListeners() {
     // 图片上传
     elements.imageUpload.addEventListener('change', handleImageUpload);
     
-    // 性别分类按钮
-    elements.maleBtn.addEventListener('click', () => navigateToHairstylePage('male'));
-    elements.femaleBtn.addEventListener('click', () => navigateToHairstylePage('female'));
-    
-    // 导航栏性别切换
-    elements.navMaleBtn.addEventListener('click', () => switchGender('male'));
-    elements.navFemaleBtn.addEventListener('click', () => switchGender('female'));
+    // 下一步按钮
+    elements.nextBtn.addEventListener('click', navigateToHairstylePage);
     
     // 确认按钮
     elements.confirmBtn.addEventListener('click', handleConfirmHairstyle);
@@ -104,9 +92,8 @@ async function loadHairstyles() {
         showLoading();
         const response = await getHairstyles();
         if (response.success) {
-            hairstylesData.male = response.data.male;
-            hairstylesData.female = response.data.female;
-            renderHairstyles(currentGender);
+            hairstylesData = response.data.hairstyles;
+            renderHairstyles();
         }
     } catch (error) {
         alert('加载发型数据失败，请刷新页面重试');
@@ -134,36 +121,22 @@ function handleImageUpload(e) {
 }
 
 // 导航到发型选择页
-function navigateToHairstylePage(gender) {
+function navigateToHairstylePage() {
     if (!uploadedImage) {
         alert('请先上传图片');
         return;
     }
     
-    currentGender = gender;
-    switchGender(gender);
+    renderHairstyles();
     showPage(elements.hairstylePage);
     showBackBtn();
 }
 
-// 切换性别
-function switchGender(gender) {
-    currentGender = gender;
-    
-    // 更新导航按钮状态
-    elements.navMaleBtn.classList.toggle('active', gender === 'male');
-    elements.navFemaleBtn.classList.toggle('active', gender === 'female');
-    
-    // 重新渲染发型列表
-    renderHairstyles(gender);
-}
-
 // 渲染发型列表
-function renderHairstyles(gender) {
-    const hairstyles = hairstylesData[gender];
+function renderHairstyles() {
     elements.hairstyleGrid.innerHTML = '';
     
-    hairstyles.forEach(hairstyle => {
+    hairstylesData.forEach(hairstyle => {
         const hairstyleItem = document.createElement('div');
         hairstyleItem.className = 'hairstyle-item';
         hairstyleItem.dataset.id = hairstyle.id;