fate:ai-clothing-design

dome/ai-clothing-design.html

@@ -39,7 +39,7 @@
             color: var(--dark);
             line-height: 1.6;
             min-height: 100vh;
-            padding: 20px 0;
+            padding: 20px 0 80px;
             overflow-x: hidden;
         }
         
@@ -160,6 +160,12 @@
             background-color: rgba(52, 152, 219, 0.1);
         }
         
+        h3 {
+            font-size: 1.2rem;
+            margin: 20px 0 15px;
+            color: var(--dark);
+        }
+        
         .section-desc {
             color: var(--gray);
             margin-bottom: 25px;
@@ -237,6 +243,16 @@
             border-radius: 20px;
         }
         
+        .jacket-lining {
+            top: 120px;
+            left: 45px;
+            width: 210px;
+            height: 210px;
+            background: linear-gradient(135deg, #e74c3c, #c0392b);
+            border-radius: 15px;
+            z-index: 1;
+        }
+        
         .jacket-sleeve {
             top: 110px;
             width: 80px;
@@ -258,14 +274,14 @@
         .color-palette {
             display: flex;
             flex-wrap: wrap;
-            gap: 15px;
+            gap: 12px;
             justify-content: center;
             margin-top: 20px;
         }
         
         .color-option {
-            width: 44px;
-            height: 44px;
+            width: 36px;
+            height: 36px;
             border-radius: 50%;
             cursor: pointer;
             border: 3px solid white;
@@ -292,7 +308,7 @@
             left: 50%;
             transform: translate(-50%, -50%);
             color: white;
-            font-size: 14px;
+            font-size: 12px;
             text-shadow: 0 1px 2px rgba(0,0,0,0.3);
         }
         
@@ -366,6 +382,7 @@
             margin-bottom: 10px;
             position: relative;
             z-index: 2;
+            color: white;
         }
         
         .share-link {
@@ -532,6 +549,38 @@
             transform: translateY(-3px);
         }
         
+        /* 底部导航 */
+        .bottom-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: white;
+            display: flex;
+            padding: 10px 0;
+            box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.08);
+            z-index: 100;
+        }
+        
+        .nav-item {
+            flex: 1;
+            text-align: center;
+            padding: 8px 0;
+            color: var(--gray);
+            font-size: 0.85rem;
+            transition: var(--transition);
+        }
+        
+        .nav-item.active {
+            color: var(--primary);
+        }
+        
+        .nav-item i {
+            display: block;
+            font-size: 1.4rem;
+            margin-bottom: 5px;
+        }
+        
         /* 图表容器 */
         .chart-container {
             background: white;
@@ -550,6 +599,57 @@
             font-size: 0.9rem;
         }
         
+        /* 设计展示区 */
+        .design-gallery {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 15px;
+            margin-top: 20px;
+        }
+        
+        .design-item {
+            background: white;
+            border-radius: 15px;
+            overflow: hidden;
+            box-shadow: var(--card-shadow);
+            transition: var(--transition);
+        }
+        
+        .design-item:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
+        }
+        
+        .design-image {
+            height: 160px;
+            background: var(--light);
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .design-image img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+        
+        .design-info {
+            padding: 15px;
+        }
+        
+        .design-title {
+            font-weight: 600;
+            margin-bottom: 5px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        
+        .design-author {
+            color: var(--gray);
+            font-size: 0.85rem;
+        }
+        
         /* 动画 */
         @keyframes fadeIn {
             from { opacity: 0; transform: translateY(20px); }
@@ -597,6 +697,15 @@
             .panel {
                 padding: 25px 20px;
             }
+            
+            .color-option {
+                width: 32px;
+                height: 32px;
+            }
+            
+            .design-gallery {
+                grid-template-columns: 1fr;
+            }
         }
     </style>
 </head>
@@ -611,28 +720,155 @@
         </header>
         
         <div class="tabs">
-            <div class="tab active" data-tab="customize">
-                <i class="fas fa-palette"></i> 定制
+            <div class="tab active" data-tab="home">
+                <i class="fas fa-home"></i> 首页
             </div>
             <div class="tab" data-tab="ip">
-                <i class="fas fa-crown"></i> IP
+                <i class="fas fa-crown"></i> IP定制
+            </div>
+            <div class="tab" data-tab="design">
+                <i class="fas fa-palette"></i> 设计
+            </div>
+            <div class="tab" data-tab="my">
+                <i class="fas fa-user"></i> 我的
+            </div>
+        </div>
+        
+        <!-- 首页面板 -->
+        <div class="panel active" id="home-panel">
+            <h2><i class="fas fa-home"></i> 热门设计</h2>
+            <p class="section-desc">浏览最受欢迎的羽绒服设计，获取灵感</p>
+            
+            <div class="design-gallery">
+                <div class="design-item">
+                    <div class="design-image">
+                        <img src="https://i.ibb.co/0QrZb0C/jacket-base.png" alt="设计1">
+                    </div>
+                    <div class="design-info">
+                        <div class="design-title">星空主题羽绒服</div>
+                        <div class="design-author">by 设计师小王</div>
+                    </div>
+                </div>
+                
+                <div class="design-item">
+                    <div class="design-image">
+                        <img src="https://i.ibb.co/0QrZb0C/jacket-base.png" alt="设计2">
+                    </div>
+                    <div class="design-info">
+                        <div class="design-title">火焰纹路设计</div>
+                        <div class="design-author">by 创意达人</div>
+                    </div>
+                </div>
+                
+                <div class="design-item">
+                    <div class="design-image">
+                        <img src="https://i.ibb.co/0QrZb0C/jacket-base.png" alt="设计3">
+                    </div>
+                    <div class="design-info">
+                        <div class="design-title">极简主义风格</div>
+                        <div class="design-author">by 极简生活</div>
+                    </div>
+                </div>
+                
+                <div class="design-item">
+                    <div class="design-image">
+                        <img src="https://i.ibb.co/0QrZb0C/jacket-base.png" alt="设计4">
+                    </div>
+                    <div class="design-info">
+                        <div class="design-title">复古拼接设计</div>
+                        <div class="design-author">by 复古爱好者</div>
+                    </div>
+                </div>
+            </div>
+            
+            <h3>本周流行趋势</h3>
+            <div class="color-stats">
+                <div class="color-stat">
+                    <div class="color-box" style="background: linear-gradient(135deg, #3498db, #2c3e50);">
+                        <i class="fas fa-water"></i>
+                    </div>
+                    <div class="stat-name">深海蓝黑</div>
+                    <div class="stat-count">5,678 次使用</div>
+                </div>
+                <div class="color-stat">
+                    <div class="color-box" style="background: linear-gradient(135deg, #e74c3c, #f1c40f);">
+                        <i class="fas fa-sun"></i>
+                    </div>
+                    <div class="stat-name">日落橙黄</div>
+                    <div class="stat-count">4,987 次使用</div>
+                </div>
             </div>
-            <div class="tab" data-tab="share">
-                <i class="fas fa-share-alt"></i> 分享
+        </div>
+        
+        <!-- IP定制面板 -->
+        <div class="panel" id="ip-panel">
+            <h2><i class="fas fa-crown"></i> IP联名定制</h2>
+            <p class="section-desc">从热门IP图片中提取颜色，应用到你的羽绒服设计</p>
+            
+            <div class="ip-upload">
+                <div class="upload-area" id="uploadArea">
+                    <i class="fas fa-cloud-upload-alt"></i>
+                    <p>点击上传图片或拖放文件到这里</p>
+                    <small>支持JPG、PNG格式，最大5MB</small>
+                </div>
+                <button class="btn btn-primary">
+                    <i class="fas fa-magic"></i> 识别图片颜色
+                </button>
             </div>
-            <div class="tab" data-tab="trends">
-                <i class="fas fa-chart-line"></i> 趋势
+            
+            <h3>热门IP推荐</h3>
+            <div class="design-gallery">
+                <div class="design-item">
+                    <div class="design-image">
+                        <img src="https://i.ibb.co/0QrZb0C/jacket-base.png" alt="漫威设计">
+                    </div>
+                    <div class="design-info">
+                        <div class="design-title">漫威英雄系列</div>
+                        <div class="design-author">官方授权</div>
+                    </div>
+                </div>
+                
+                <div class="design-item">
+                    <div class="design-image">
+                        <img src="https://i.ibb.co/0QrZb0C/jacket-base.png" alt="迪士尼设计">
+                    </div>
+                    <div class="design-info">
+                        <div class="design-title">迪士尼公主</div>
+                        <div class="design-author">官方授权</div>
+                    </div>
+                </div>
+                
+                <div class="design-item">
+                    <div class="design-image">
+                        <img src="https://i.ibb.co/0QrZb0C/jacket-base.png" alt="国潮设计">
+                    </div>
+                    <div class="design-info">
+                        <div class="design-title">国潮故宫联名</div>
+                        <div class="design-author">官方授权</div>
+                    </div>
+                </div>
+                
+                <div class="design-item">
+                    <div class="design-image">
+                        <img src="https://i.ibb.co/0QrZb0C/jacket-base.png" alt="动漫设计">
+                    </div>
+                    <div class="design-info">
+                        <div class="design-title">热门动漫IP</div>
+                        <div class="design-author">官方授权</div>
+                    </div>
+                </div>
             </div>
         </div>
         
-        <!-- 个性定制面板 -->
-        <div class="panel active" id="customize-panel">
-            <h2><i class="fas fa-palette"></i> 个性定制</h2>
+        <!-- 设计面板 -->
+        <div class="panel" id="design-panel">
+            <h2><i class="fas fa-palette"></i> 个性设计</h2>
             <p class="section-desc">选择羽绒服的不同部位并自定义颜色，打造属于你的独特设计</p>
             
             <div class="jacket-display-container">
                 <div class="jacket-display">
                     <div class="jacket-base"></div>
+                    <div class="jacket-part jacket-lining" data-part="lining"></div>
                     <div class="jacket-part jacket-hood active-part" data-part="hood"></div>
                     <div class="jacket-part jacket-body" data-part="body"></div>
                     <div class="jacket-part jacket-sleeve left" data-part="sleeve-left"></div>
@@ -652,128 +888,120 @@
                 <div class="color-option" style="background-color: #2c3e50;" data-color="#2c3e50"></div>
                 <div class="color-option" style="background-color: #ecf0f1;" data-color="#ecf0f1"></div>
                 <div class="color-option" style="background-color: #e84393;" data-color="#e84393"></div>
+                <div class="color-option" style="background-color: #00cec9;" data-color="#00cec9"></div>
+                <div class="color-option" style="background-color: #fd79a8;" data-color="#fd79a8"></div>
+                <div class="color-option" style="background-color: #6c5ce7;" data-color="#6c5ce7"></div>
+                <div class="color-option" style="background-color: #00b894;" data-color="#00b894"></div>
+                <div class="color-option" style="background-color: #fdcb6e;" data-color="#fdcb6e"></div>
+                <div class="color-option" style="background-color: #e17055;" data-color="#e17055"></div>
+                <div class="color-option" style="background-color: #0984e3;" data-color="#0984e3"></div>
+                <div class="color-option" style="background-color: #d63031;" data-color="#d63031"></div>
+                <div class="color-option" style="background-color: #636e72;" data-color="#636e72"></div>
+                <div class="color-option" style="background-color: #ffeaa7;" data-color="#ffeaa7"></div>
             </div>
             
             <div class="action-buttons">
-                <button class="btn btn-secondary">
+                <button class="btn btn-secondary" id="resetBtn">
                     <i class="fas fa-redo"></i> 重置
                 </button>
-                <button class="btn btn-primary pulse">
+                <button class="btn btn-primary pulse" id="saveBtn">
                     <i class="fas fa-save"></i> 保存设计
                 </button>
             </div>
-        </div>
-        
-        <!-- 热门IP面板 -->
-        <div class="panel" id="ip-panel">
-            <h2><i class="fas fa-crown"></i> 热门IP配色</h2>
-            <p class="section-desc">从热门IP图片中提取颜色，应用到你的羽绒服设计</p>
-            
-            <div class="ip-upload">
-                <div class="upload-area" id="uploadArea">
-                    <i class="fas fa-cloud-upload-alt"></i>
-                    <p>点击上传图片或拖放文件到这里</p>
-                    <small>支持JPG、PNG格式，最大5MB</small>
-                </div>
-                <button class="btn btn-primary">
-                    <i class="fas fa-magic"></i> 识别图片颜色
-                </button>
-            </div>
             
-            <h3>热门IP推荐</h3>
-            <div class="color-stats">
-                <div class="color-stat">
-                    <div class="color-box" style="background: linear-gradient(135deg, #FFD700, #C0C0C0);">
-                        <i class="fas fa-bolt"></i>
+            <h3>我的设计</h3>
+            <div class="design-gallery">
+                <div class="design-item">
+                    <div class="design-image">
+                        <img src="https://i.ibb.co/0QrZb0C/jacket-base.png" alt="我的设计1">
+                    </div>
+                    <div class="design-info">
+                        <div class="design-title">蓝色风暴</div>
+                        <div class="design-author">刚刚保存</div>
                     </div>
-                    <div class="stat-name">漫威英雄</div>
-                    <div class="stat-count">12,450 次使用</div>
                 </div>
-                <div class="color-stat">
-                    <div class="color-box" style="background: linear-gradient(135deg, #FF69B4, #00FFFF);">
-                        <i class="fas fa-vest"></i>
+                
+                <div class="design-item">
+                    <div class="design-image">
+                        <img src="https://i.ibb.co/0QrZb0C/jacket-base.png" alt="我的设计2">
+                    </div>
+                    <div class="design-info">
+                        <div class="design-title">红黑经典</div>
+                        <div class="design-author">昨天</div>
                     </div>
-                    <div class="stat-name">芭比娃娃</div>
-                    <div class="stat-count">9,870 次使用</div>
                 </div>
             </div>
         </div>
         
-        <!-- 分享面板 -->
-        <div class="panel" id="share-panel">
-            <h2><i class="fas fa-share-alt"></i> 分享你的设计</h2>
-            <p class="section-desc">将你的个性羽绒服设计分享给朋友或社交平台</p>
+        <!-- 我的面板 -->
+        <div class="panel" id="my-panel">
+            <h2><i class="fas fa-user"></i> 我的账户</h2>
+            <p class="section-desc">管理你的设计、收藏和个人信息</p>
             
-            <div class="share-section">
-                <h3>我的个性羽绒服设计</h3>
-                <p>扫描二维码或复制链接分享给好友</p>
-                
-                <div class="share-link">
-                    <input type="text" id="shareLink" value="https://diy.jacket.com/design/abc123" readonly>
-                    <button id="copyBtn">
-                        <i class="fas fa-copy"></i> 复制链接
-                    </button>
+            <div class="color-stat" style="max-width: 100%; text-align: left; display: flex; align-items: center; gap: 20px;">
+                <div class="color-box" style="background: linear-gradient(135deg, var(--primary), var(--accent)); width: 80px; height: 80px;">
+                    <i class="fas fa-user" style="font-size: 2rem;"></i>
                 </div>
-                
-                <div class="share-icons">
-                    <div class="share-icon wechat">
-                        <i class="fab fa-weixin"></i>
-                    </div>
-                    <div class="share-icon weibo">
-                        <i class="fab fa-weibo"></i>
-                    </div>
-                    <div class="share-icon qq">
-                        <i class="fab fa-qq"></i>
-                    </div>
+                <div>
+                    <div class="stat-name">用户昵称</div>
+                    <div class="stat-count">会员等级: 黄金会员</div>
                 </div>
             </div>
             
-            <h3>热门分享设计</h3>
-            <div class="color-stats">
-                <div class="color-stat">
-                    <div class="color-box" style="background: linear-gradient(135deg, #3498db, #9b59b6);">
-                        <i class="fas fa-star"></i>
+            <h3>我的设计 (2)</h3>
+            <div class="design-gallery">
+                <div class="design-item">
+                    <div class="design-image">
+                        <img src="https://i.ibb.co/0QrZb0C/jacket-base.png" alt="我的设计1">
+                    </div>
+                    <div class="design-info">
+                        <div class="design-title">蓝色风暴</div>
+                        <div class="design-author">3天前</div>
                     </div>
-                    <div class="stat-name">星空主题</div>
-                    <div class="stat-count">8,456 次分享</div>
                 </div>
-                <div class="color-stat">
-                    <div class="color-box" style="background: linear-gradient(135deg, #e74c3c, #f1c40f);">
-                        <i class="fas fa-fire"></i>
+                
+                <div class="design-item">
+                    <div class="design-image">
+                        <img src="https://i.ibb.co/0QrZb0C/jacket-base.png" alt="我的设计2">
+                    </div>
+                    <div class="design-info">
+                        <div class="design-title">红黑经典</div>
+                        <div class="design-author">1周前</div>
                     </div>
-                    <div class="stat-name">火焰主题</div>
-                    <div class="stat-count">7,231 次分享</div>
                 </div>
             </div>
-        </div>
-        
-        <!-- 流行趋势面板 -->
-        <div class="panel" id="trends-panel">
-            <h2><i class="fas fa-chart-line"></i> 颜色流行趋势</h2>
-            <p class="section-desc">查看最受欢迎的颜色搭配和当前流行趋势</p>
-            
-            <h3>本周最受欢迎颜色</h3>
-            <div class="chart-container">
-                <canvas id="colorChart"></canvas>
-            </div>
             
-            <h3>热门搭配方案</h3>
-            <div class="color-stats">
-                <div class="color-stat">
-                    <div class="color-box" style="background: linear-gradient(135deg, #3498db, #2c3e50);">
-                        <i class="fas fa-water"></i>
+            <h3>我的收藏 (4)</h3>
+            <div class="design-gallery">
+                <div class="design-item">
+                    <div class="design-image">
+                        <img src="https://i.ibb.co/0QrZb0C/jacket-base.png" alt="收藏设计1">
+                    </div>
+                    <div class="design-info">
+                        <div class="design-title">星空主题</div>
+                        <div class="design-author">by 设计师小王</div>
                     </div>
-                    <div class="stat-name">深海蓝黑</div>
-                    <div class="stat-count">5,678 次使用</div>
                 </div>
-                <div class="color-stat">
-                    <div class="color-box" style="background: linear-gradient(135deg, #e74c3c, #f1c40f);">
-                        <i class="fas fa-sun"></i>
+                
+                <div class="design-item">
+                    <div class="design-image">
+                        <img src="https://i.ibb.co/0QrZb0C/jacket-base.png" alt="收藏设计2">
+                    </div>
+                    <div class="design-info">
+                        <div class="design-title">火焰纹路</div>
+                        <div class="design-author">by 创意达人</div>
                     </div>
-                    <div class="stat-name">日落橙黄</div>
-                    <div class="stat-count">4,987 次使用</div>
                 </div>
             </div>
+            
+            <div class="action-buttons" style="margin-top: 30px;">
+                <button class="btn btn-secondary">
+                    <i class="fas fa-cog"></i> 设置
+                </button>
+                <button class="btn btn-primary">
+                    <i class="fas fa-sign-out-alt"></i> 退出登录
+                </button>
+            </div>
         </div>
         
         <footer>
@@ -782,22 +1010,46 @@
         </footer>
     </div>
     
+    <!-- 底部导航 -->
+    <div class="bottom-nav">
+        <div class="nav-item active" data-tab="home">
+            <i class="fas fa-home"></i>
+            <span>首页</span>
+        </div>
+        <div class="nav-item" data-tab="ip">
+            <i class="fas fa-crown"></i>
+            <span>IP定制</span>
+        </div>
+        <div class="nav-item" data-tab="design">
+            <i class="fas fa-palette"></i>
+            <span>设计</span>
+        </div>
+        <div class="nav-item" data-tab="my">
+            <i class="fas fa-user"></i>
+            <span>我的</span>
+        </div>
+    </div>
+    
     <script>
         // 页面加载完成后执行
         document.addEventListener('DOMContentLoaded', function() {
             // 标签切换功能
-            document.querySelectorAll('.tab').forEach(tab => {
+            function switchTab(tabName) {
+                // 移除所有活动标签
+                document.querySelectorAll('.tab, .nav-item').forEach(t => t.classList.remove('active'));
+                // 添加当前活动标签
+                document.querySelectorAll(`[data-tab="${tabName}"]`).forEach(t => t.classList.add('active'));
+                
+                // 隐藏所有面板
+                document.querySelectorAll('.panel').forEach(panel => panel.classList.remove('active'));
+                // 显示对应面板
+                document.getElementById(`${tabName}-panel`).classList.add('active');
+            }
+            
+            document.querySelectorAll('.tab, .nav-item').forEach(tab => {
                 tab.addEventListener('click', () => {
-                    // 移除所有活动标签
-                    document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
-                    // 添加当前活动标签
-                    tab.classList.add('active');
-                    
-                    // 隐藏所有面板
-                    document.querySelectorAll('.panel').forEach(panel => panel.classList.remove('active'));
-                    // 显示对应面板
-                    const panelId = tab.getAttribute('data-tab') + '-panel';
-                    document.getElementById(panelId).classList.add('active');
+                    const tabName = tab.getAttribute('data-tab');
+                    switchTab(tabName);
                 });
             });
             
@@ -831,100 +1083,43 @@
             }
             
             // 复制链接功能
-            document.getElementById('copyBtn').addEventListener('click', () => {
+            document.getElementById('copyBtn')?.addEventListener('click', () => {
                 const linkInput = document.getElementById('shareLink');
-                linkInput.select();
-                document.execCommand('copy');
-                
-                // 显示复制成功提示
-                const originalText = linkInput.value;
-                const btnText = document.getElementById('copyBtn');
-                btnText.innerHTML = '<i class="fas fa-check"></i> 已复制';
-                
-                setTimeout(() => {
-                    btnText.innerHTML = '<i class="fas fa-copy"></i> 复制链接';
-                }, 2000);
+                if (linkInput) {
+                    linkInput.select();
+                    document.execCommand('copy');
+                    
+                    // 显示复制成功提示
+                    const btnText = document.getElementById('copyBtn');
+                    btnText.innerHTML = '<i class="fas fa-check"></i> 已复制';
+                    
+                    setTimeout(() => {
+                        btnText.innerHTML = '<i class="fas fa-copy"></i> 复制链接';
+                    }, 2000);
+                }
             });
             
             // 上传区域交互
             const uploadArea = document.getElementById('uploadArea');
-            uploadArea.addEventListener('dragover', (e) => {
-                e.preventDefault();
-                uploadArea.style.borderColor = 'var(--primary)';
-                uploadArea.style.backgroundColor = 'rgba(52, 152, 219, 0.1)';
-            });
-            
-            uploadArea.addEventListener('dragleave', () => {
-                uploadArea.style.borderColor = 'var(--light-gray)';
-                uploadArea.style.backgroundColor = 'var(--lighter)';
-            });
-            
-            uploadArea.addEventListener('click', () => {
-                alert('图片上传功能需要后端支持，此处为前端演示');
-            });
-            
-            // 初始化图表
-            const ctx = document.getElementById('colorChart').getContext('2d');
-            const colorChart = new Chart(ctx, {
-                type: 'bar',
-                data: {
-                    labels: ['海洋蓝', '活力红', '森林绿', '阳光黄', '梦幻紫', '珊瑚橙'],
-                    datasets: [{
-                        label: '使用次数',
-                        data: [1850, 1620, 1540, 1420, 1360, 1280],
-                        backgroundColor: [
-                            '#3498db',
-                            '#e74c3c',
-                            '#2ecc71',
-                            '#f1c40f',
-                            '#9b59b6',
-                            '#ff7f50'
-                        ],
-                        borderColor: [
-                            '#2980b9',
-                            '#c0392b',
-                            '#27ae60',
-                            '#f39c12',
-                            '#8e44ad',
-                            '#ff6347'
-                        ],
-                        borderWidth: 1,
-                        borderRadius: 10
-                    }]
-                },
-                options: {
-                    responsive: true,
-                    maintainAspectRatio: false,
-                    plugins: {
-                        legend: {
-                            display: false
-                        },
-                        title: {
-                            display: true,
-                            text: '颜色使用频率统计',
-                            font: {
-                                size: 16
-                            }
-                        }
-                    },
-                    scales: {
-                        y: {
-                            beginAtZero: true,
-                            grid: {
-                                color: 'rgba(0, 0, 0, 0.05)'
-                            }
-                        },
-                        x: {
-                            grid: {
-                                display: false
-                            }
-                        }
-                    }
-                }
-            });
+            if (uploadArea) {
+                uploadArea.addEventListener('dragover', (e) => {
+                    e.preventDefault();
+                    uploadArea.style.borderColor = 'var(--primary)';
+                    uploadArea.style.backgroundColor = 'rgba(52, 152, 219, 0.1)';
+                });
+                
+                uploadArea.addEventListener('dragleave', () => {
+                    uploadArea.style.borderColor = 'var(--light-gray)';
+                    uploadArea.style.backgroundColor = 'var(--lighter)';
+                });
+                
+                uploadArea.addEventListener('click', () => {
+                    alert('图片上传功能需要后端支持，此处为前端演示');
+                });
+            }
             
             // 重置按钮功能
-            document.querySelector('.btn-secondary').addEventListener('click', () => {
+            document.getElementById('resetBtn')?.addEventListener('click', () => {
                 document.querySelectorAll('.jacket-part').forEach(part => {
                     part.style.background = '';
                 });
@@ -941,6 +1136,74 @@
                 document.querySelectorAll('.jacket-part').forEach(p => p.classList.remove('active-part'));
                 document.querySelector('.jacket-hood').classList.add('active-part');
             });
+            
+            // 保存按钮功能
+            document.getElementById('saveBtn')?.addEventListener('click', () => {
+                alert('设计已保存！您可以在"我的"页面查看保存的设计。');
+                switchTab('my');
+            });
+            
+            // 初始化图表
+            const ctx = document.getElementById('colorChart')?.getContext('2d');
+            if (ctx) {
+                new Chart(ctx, {
+                    type: 'bar',
+                    data: {
+                        labels: ['海洋蓝', '活力红', '森林绿', '阳光黄', '梦幻紫', '珊瑚橙'],
+                        datasets: [{
+                            label: '使用次数',
+                            data: [1850, 1620, 1540, 1420, 1360, 1280],
+                            backgroundColor: [
+                                '#3498db',
+                                '#e74c3c',
+                                '#2ecc71',
+                                '#f1c40f',
+                                '#9b59b6',
+                                '#ff7f50'
+                            ],
+                            borderColor: [
+                                '#2980b9',
+                                '#c0392b',
+                                '#27ae60',
+                                '#f39c12',
+                                '#8e44ad',
+                                '#ff6347'
+                            ],
+                            borderWidth: 1,
+                            borderRadius: 10
+                        }]
+                    },
+                    options: {
+                        responsive: true,
+                        maintainAspectRatio: false,
+                        plugins: {
+                            legend: {
+                                display: false
+                            },
+                            title: {
+                                display: true,
+                                text: '颜色使用频率统计',
+                                font: {
+                                    size: 16
+                                }
+                            }
+                        },
+                        scales: {
+                            y: {
+                                beginAtZero: true,
+                                grid: {
+                                    color: 'rgba(0, 0, 0, 0.05)'
+                                }
+                            },
+                            x: {
+                                grid: {
+                                    display: false
+                                }
+                            }
+                        }
+                    }
+                });
+            }
         });
     </script>
 </body>