|
|
@@ -1,9761 +0,0 @@
|
|
|
-<!DOCTYPE html>
|
|
|
-<html lang="zh-CN">
|
|
|
-<head>
|
|
|
- <meta charset="UTF-8">
|
|
|
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
- <title>FashionCraft - 服装DIY设计</title>
|
|
|
- <style>
|
|
|
- * {
|
|
|
- box-sizing: border-box;
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
- }
|
|
|
-
|
|
|
- body {
|
|
|
- font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
|
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
- min-height: 100vh;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
-
|
|
|
- /* 登录注册欢迎页面样式 */
|
|
|
- .auth-screen {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100vh;
|
|
|
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
- z-index: 9999;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- transition: all 0.5s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .auth-container {
|
|
|
- max-width: 414px;
|
|
|
- width: 90%;
|
|
|
- background: rgba(255, 255, 255, 0.95);
|
|
|
- backdrop-filter: blur(20px);
|
|
|
- border-radius: 25px;
|
|
|
- box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
|
|
|
- overflow: hidden;
|
|
|
- animation: slideUp 0.8s ease-out;
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes slideUp {
|
|
|
- from {
|
|
|
- opacity: 0;
|
|
|
- transform: translateY(50px);
|
|
|
- }
|
|
|
- to {
|
|
|
- opacity: 1;
|
|
|
- transform: translateY(0);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .auth-header {
|
|
|
- background: linear-gradient(45deg, #ff6b6b, #ffa726);
|
|
|
- padding: 40px 30px 30px;
|
|
|
- text-align: center;
|
|
|
- color: white;
|
|
|
- position: relative;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- .auth-header::before {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- top: -50%;
|
|
|
- left: -50%;
|
|
|
- width: 200%;
|
|
|
- height: 200%;
|
|
|
- background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="authGrain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="20" cy="20" r="1" fill="white" opacity="0.1"/><circle cx="80" cy="80" r="1" fill="white" opacity="0.1"/><circle cx="40" cy="60" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23authGrain)"/></svg>');
|
|
|
- animation: float 20s infinite linear;
|
|
|
- }
|
|
|
-
|
|
|
- .brand-logo {
|
|
|
- position: relative;
|
|
|
- z-index: 2;
|
|
|
- }
|
|
|
-
|
|
|
- .logo-icon {
|
|
|
- font-size: 48px;
|
|
|
- margin-bottom: 10px;
|
|
|
- animation: sparkle 2s infinite ease-in-out;
|
|
|
- }
|
|
|
-
|
|
|
- .brand-logo h1 {
|
|
|
- font-size: 32px;
|
|
|
- font-weight: 700;
|
|
|
- margin-bottom: 5px;
|
|
|
- text-shadow: 0 2px 4px rgba(0,0,0,0.3);
|
|
|
- }
|
|
|
-
|
|
|
- .brand-logo p {
|
|
|
- opacity: 0.9;
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
-
|
|
|
- .auth-content {
|
|
|
- padding: 30px;
|
|
|
- }
|
|
|
-
|
|
|
- .welcome-message {
|
|
|
- text-align: center;
|
|
|
- margin-bottom: 30px;
|
|
|
- }
|
|
|
-
|
|
|
- .welcome-message h2 {
|
|
|
- font-size: 24px;
|
|
|
- font-weight: 600;
|
|
|
- color: #333;
|
|
|
- margin-bottom: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .welcome-message p {
|
|
|
- color: #666;
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
-
|
|
|
- .auth-actions {
|
|
|
- margin-bottom: 30px;
|
|
|
- }
|
|
|
-
|
|
|
- .auth-btn {
|
|
|
- width: 100%;
|
|
|
- padding: 16px;
|
|
|
- border: none;
|
|
|
- border-radius: 12px;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 600;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- margin-bottom: 12px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- gap: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .auth-btn.primary {
|
|
|
- background: linear-gradient(45deg, #ff6b6b, #ffa726);
|
|
|
- color: white;
|
|
|
- box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
|
|
|
- }
|
|
|
-
|
|
|
- .auth-btn.primary:hover {
|
|
|
- transform: translateY(-2px);
|
|
|
- box-shadow: 0 8px 25px rgba(255, 107, 107, 0.6);
|
|
|
- }
|
|
|
-
|
|
|
- .auth-btn.secondary {
|
|
|
- background: #f8f9fa;
|
|
|
- color: #333;
|
|
|
- border: 2px solid #e9ecef;
|
|
|
- }
|
|
|
-
|
|
|
- .auth-btn.secondary:hover {
|
|
|
- background: #e9ecef;
|
|
|
- transform: translateY(-1px);
|
|
|
- }
|
|
|
-
|
|
|
- .btn-icon {
|
|
|
- font-size: 18px;
|
|
|
- }
|
|
|
-
|
|
|
- .auth-features {
|
|
|
- margin-bottom: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .feature-item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 15px;
|
|
|
- padding: 15px 0;
|
|
|
- border-bottom: 1px solid #f0f0f0;
|
|
|
- }
|
|
|
-
|
|
|
- .feature-item:last-child {
|
|
|
- border-bottom: none;
|
|
|
- }
|
|
|
-
|
|
|
- .feature-icon {
|
|
|
- width: 45px;
|
|
|
- height: 45px;
|
|
|
- background: linear-gradient(45deg, #667eea, #764ba2);
|
|
|
- border-radius: 12px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 20px;
|
|
|
- color: white;
|
|
|
- }
|
|
|
-
|
|
|
- .feature-text {
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
-
|
|
|
- .feature-title {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 600;
|
|
|
- color: #333;
|
|
|
- margin-bottom: 2px;
|
|
|
- }
|
|
|
-
|
|
|
- .feature-desc {
|
|
|
- font-size: 14px;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
-
|
|
|
- .auth-footer {
|
|
|
- background: #f8f9fa;
|
|
|
- padding: 20px 30px;
|
|
|
- text-align: center;
|
|
|
- border-top: 1px solid #e9ecef;
|
|
|
- }
|
|
|
-
|
|
|
- .version-info {
|
|
|
- font-size: 14px;
|
|
|
- color: #666;
|
|
|
- margin-bottom: 5px;
|
|
|
- }
|
|
|
-
|
|
|
- .copyright {
|
|
|
- font-size: 12px;
|
|
|
- color: #999;
|
|
|
- }
|
|
|
-
|
|
|
- /* 容器样式 */
|
|
|
- .app-container {
|
|
|
- max-width: 414px;
|
|
|
- margin: 0 auto;
|
|
|
- background: #fff;
|
|
|
- min-height: 100vh;
|
|
|
- box-shadow: 0 0 30px rgba(0,0,0,0.3);
|
|
|
- overflow: hidden;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
-
|
|
|
- /* 头部导航 */
|
|
|
- .header {
|
|
|
- background: linear-gradient(45deg, #ff6b6b, #ffa726);
|
|
|
- padding: 20px 20px 15px;
|
|
|
- color: white;
|
|
|
- position: relative;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- .header::before {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- top: -50%;
|
|
|
- left: -50%;
|
|
|
- width: 200%;
|
|
|
- height: 200%;
|
|
|
- background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="20" cy="20" r="1" fill="white" opacity="0.1"/><circle cx="80" cy="80" r="1" fill="white" opacity="0.1"/><circle cx="40" cy="60" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
|
|
|
- animation: float 20s infinite linear;
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes float {
|
|
|
- 0% { transform: translate(-50%, -50%) rotate(0deg); }
|
|
|
- 100% { transform: translate(-50%, -50%) rotate(360deg); }
|
|
|
- }
|
|
|
-
|
|
|
- .header-content {
|
|
|
- position: relative;
|
|
|
- z-index: 2;
|
|
|
- }
|
|
|
-
|
|
|
- .header h1 {
|
|
|
- font-size: 28px;
|
|
|
- font-weight: 700;
|
|
|
- margin-bottom: 5px;
|
|
|
- text-shadow: 0 2px 4px rgba(0,0,0,0.3);
|
|
|
- }
|
|
|
-
|
|
|
- .header p {
|
|
|
- opacity: 0.9;
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
-
|
|
|
- /* 主要内容区域 */
|
|
|
- .main-content {
|
|
|
- flex: 1;
|
|
|
- overflow-y: auto;
|
|
|
- padding-bottom: 80px;
|
|
|
- }
|
|
|
-
|
|
|
- /* 轮播区域 */
|
|
|
- .banner-section {
|
|
|
- position: relative;
|
|
|
- height: 200px;
|
|
|
- overflow: hidden;
|
|
|
- margin: 20px;
|
|
|
- border-radius: 20px;
|
|
|
- box-shadow: 0 10px 30px rgba(0,0,0,0.2);
|
|
|
- }
|
|
|
-
|
|
|
- .banner-slider {
|
|
|
- display: flex;
|
|
|
- transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .banner-slide {
|
|
|
- min-width: 100%;
|
|
|
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- color: white;
|
|
|
- font-size: 18px;
|
|
|
- font-weight: 600;
|
|
|
- position: relative;
|
|
|
- overflow: hidden;
|
|
|
- cursor: pointer;
|
|
|
- transition: transform 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .banner-slide:hover {
|
|
|
- transform: scale(0.98);
|
|
|
- }
|
|
|
-
|
|
|
- .banner-slide::before {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><defs><linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:rgba(255,255,255,0.1)"/><stop offset="100%" style="stop-color:rgba(255,255,255,0)"/></linearGradient></defs><polygon points="0,0 100,0 0,100" fill="url(%23grad)"/></svg>');
|
|
|
- pointer-events: none;
|
|
|
- }
|
|
|
-
|
|
|
- .banner-indicators {
|
|
|
- position: absolute;
|
|
|
- bottom: 15px;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- display: flex;
|
|
|
- gap: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .indicator {
|
|
|
- width: 8px;
|
|
|
- height: 8px;
|
|
|
- border-radius: 50%;
|
|
|
- background: rgba(255,255,255,0.5);
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .indicator.active {
|
|
|
- background: white;
|
|
|
- transform: scale(1.2);
|
|
|
- }
|
|
|
-
|
|
|
- /* 快速设计入口 */
|
|
|
- .quick-design {
|
|
|
- margin: 20px;
|
|
|
- padding: 25px;
|
|
|
- background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
|
|
|
- border-radius: 20px;
|
|
|
- text-align: center;
|
|
|
- box-shadow: 0 8px 25px rgba(255, 154, 158, 0.4);
|
|
|
- position: relative;
|
|
|
- overflow: hidden;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
- }
|
|
|
-
|
|
|
- .quick-design:hover {
|
|
|
- transform: translateY(-5px);
|
|
|
- box-shadow: 0 15px 35px rgba(255, 154, 158, 0.6);
|
|
|
- }
|
|
|
-
|
|
|
- .quick-design::before {
|
|
|
- content: '✨';
|
|
|
- position: absolute;
|
|
|
- top: 15px;
|
|
|
- right: 20px;
|
|
|
- font-size: 24px;
|
|
|
- animation: sparkle 2s infinite;
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes sparkle {
|
|
|
- 0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
|
|
|
- 50% { transform: scale(1.2) rotate(180deg); opacity: 0.8; }
|
|
|
- }
|
|
|
-
|
|
|
- .quick-design h2 {
|
|
|
- font-size: 22px;
|
|
|
- color: #fff;
|
|
|
- margin-bottom: 8px;
|
|
|
- text-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
|
|
- }
|
|
|
-
|
|
|
- .quick-design p {
|
|
|
- color: rgba(255,255,255,0.9);
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
-
|
|
|
- /* 热门作品区 */
|
|
|
- .popular-works {
|
|
|
- margin: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .section-title {
|
|
|
- font-size: 20px;
|
|
|
- font-weight: 700;
|
|
|
- margin-bottom: 15px;
|
|
|
- color: #333;
|
|
|
- position: relative;
|
|
|
- padding-left: 15px;
|
|
|
- }
|
|
|
-
|
|
|
- .section-title::before {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 50%;
|
|
|
- transform: translateY(-50%);
|
|
|
- width: 4px;
|
|
|
- height: 20px;
|
|
|
- background: linear-gradient(45deg, #ff6b6b, #ffa726);
|
|
|
- border-radius: 2px;
|
|
|
- }
|
|
|
-
|
|
|
- .works-grid {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: repeat(2, 1fr);
|
|
|
- gap: 15px;
|
|
|
- }
|
|
|
-
|
|
|
- .work-item {
|
|
|
- background: #fff;
|
|
|
- border-radius: 15px;
|
|
|
- overflow: hidden;
|
|
|
- box-shadow: 0 5px 20px rgba(0,0,0,0.1);
|
|
|
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
-
|
|
|
- .work-item:hover {
|
|
|
- transform: translateY(-8px);
|
|
|
- box-shadow: 0 15px 40px rgba(0,0,0,0.2);
|
|
|
- }
|
|
|
-
|
|
|
- .work-image {
|
|
|
- height: 120px;
|
|
|
- background: linear-gradient(45deg, #a8edea 0%, #fed6e3 100%);
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 36px;
|
|
|
- }
|
|
|
-
|
|
|
- .work-info {
|
|
|
- padding: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .work-title {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 600;
|
|
|
- margin-bottom: 4px;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
-
|
|
|
- .work-stats {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- font-size: 12px;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
-
|
|
|
- /* AI推荐引擎样式 */
|
|
|
- .ai-recommend-engine {
|
|
|
- margin: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-engine-card {
|
|
|
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
- border-radius: 20px;
|
|
|
- padding: 25px;
|
|
|
- color: white;
|
|
|
- box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
|
|
|
- }
|
|
|
-
|
|
|
- .ai-engine-header {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-brand {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-logo {
|
|
|
- font-size: 32px;
|
|
|
- animation: pulse 2s infinite;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-brand-text h3 {
|
|
|
- font-size: 20px;
|
|
|
- margin: 0 0 4px 0;
|
|
|
- font-weight: 700;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-brand-text p {
|
|
|
- font-size: 14px;
|
|
|
- opacity: 0.9;
|
|
|
- margin: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-status {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 6px;
|
|
|
- font-size: 12px;
|
|
|
- opacity: 0.9;
|
|
|
- }
|
|
|
-
|
|
|
- .status-dot {
|
|
|
- width: 8px;
|
|
|
- height: 8px;
|
|
|
- background: #4ade80;
|
|
|
- border-radius: 50%;
|
|
|
- animation: pulse 2s infinite;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-quick-actions {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: repeat(2, 1fr);
|
|
|
- gap: 12px;
|
|
|
- margin-bottom: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .quick-action {
|
|
|
- background: rgba(255,255,255,0.15);
|
|
|
- border-radius: 15px;
|
|
|
- padding: 15px 12px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 10px;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- backdrop-filter: blur(10px);
|
|
|
- min-height: 50px;
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
-
|
|
|
- .quick-action:hover {
|
|
|
- background: rgba(255,255,255,0.25);
|
|
|
- transform: translateY(-2px);
|
|
|
- box-shadow: 0 5px 15px rgba(255,255,255,0.1);
|
|
|
- }
|
|
|
-
|
|
|
- .action-icon {
|
|
|
- font-size: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .action-text {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 500;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- /* AI悬浮球样式 */
|
|
|
- .ai-floating-ball {
|
|
|
- position: fixed;
|
|
|
- bottom: 90px;
|
|
|
- right: 20px;
|
|
|
- width: 60px;
|
|
|
- height: 60px;
|
|
|
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
- border-radius: 50%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- cursor: pointer;
|
|
|
- z-index: 999;
|
|
|
- box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-floating-ball:hover {
|
|
|
- transform: scale(1.1);
|
|
|
- box-shadow: 0 12px 35px rgba(102, 126, 234, 0.6);
|
|
|
- }
|
|
|
-
|
|
|
- .floating-ball-icon {
|
|
|
- font-size: 24px;
|
|
|
- color: white;
|
|
|
- z-index: 2;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
-
|
|
|
- .breathing-ring {
|
|
|
- position: absolute;
|
|
|
- top: -3px;
|
|
|
- left: -3px;
|
|
|
- right: -3px;
|
|
|
- bottom: -3px;
|
|
|
- border: 2px solid rgba(102, 126, 234, 0.6);
|
|
|
- border-radius: 50%;
|
|
|
- animation: breathing 2s ease-in-out infinite;
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes breathing {
|
|
|
- 0%, 100% {
|
|
|
- transform: scale(1);
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
- 50% {
|
|
|
- transform: scale(1.1);
|
|
|
- opacity: 0.7;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- /* AI全屏对话界面样式 */
|
|
|
- .ai-chat-modal {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background: rgba(0,0,0,0.95);
|
|
|
- backdrop-filter: blur(10px);
|
|
|
- z-index: 2000;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- animation: fadeIn 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-chat-container {
|
|
|
- width: 100%;
|
|
|
- max-width: 414px;
|
|
|
- height: 100%;
|
|
|
- background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-chat-header {
|
|
|
- padding: 20px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 15px;
|
|
|
- border-bottom: 1px solid rgba(255,255,255,0.2);
|
|
|
- background: rgba(255,255,255,0.1);
|
|
|
- backdrop-filter: blur(10px);
|
|
|
- }
|
|
|
-
|
|
|
- .ai-chat-avatar {
|
|
|
- position: relative;
|
|
|
- width: 50px;
|
|
|
- height: 50px;
|
|
|
- background: rgba(255,255,255,0.2);
|
|
|
- border-radius: 50%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
-
|
|
|
- .avatar-icon {
|
|
|
- font-size: 24px;
|
|
|
- color: white;
|
|
|
- }
|
|
|
-
|
|
|
- .avatar-status {
|
|
|
- position: absolute;
|
|
|
- bottom: 2px;
|
|
|
- right: 2px;
|
|
|
- width: 12px;
|
|
|
- height: 12px;
|
|
|
- background: #4ade80;
|
|
|
- border: 2px solid white;
|
|
|
- border-radius: 50%;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-chat-info {
|
|
|
- flex: 1;
|
|
|
- color: white;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-chat-info h3 {
|
|
|
- font-size: 18px;
|
|
|
- margin: 0 0 4px 0;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-chat-info p {
|
|
|
- font-size: 14px;
|
|
|
- margin: 0;
|
|
|
- opacity: 0.9;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-chat-close {
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- background: rgba(255,255,255,0.2);
|
|
|
- border: none;
|
|
|
- border-radius: 50%;
|
|
|
- color: white;
|
|
|
- font-size: 18px;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-chat-close:hover {
|
|
|
- background: rgba(255,255,255,0.3);
|
|
|
- }
|
|
|
-
|
|
|
- .ai-chat-messages {
|
|
|
- flex: 1;
|
|
|
- overflow-y: auto;
|
|
|
- padding: 20px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 15px;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-message {
|
|
|
- display: flex;
|
|
|
- align-items: flex-start;
|
|
|
- gap: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .user-message {
|
|
|
- display: flex;
|
|
|
- align-items: flex-start;
|
|
|
- gap: 12px;
|
|
|
- flex-direction: row-reverse;
|
|
|
- }
|
|
|
-
|
|
|
- .message-avatar {
|
|
|
- width: 35px;
|
|
|
- height: 35px;
|
|
|
- background: rgba(255,255,255,0.2);
|
|
|
- border-radius: 50%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 16px;
|
|
|
- flex-shrink: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .user-message .message-avatar {
|
|
|
- background: rgba(255,255,255,0.9);
|
|
|
- }
|
|
|
-
|
|
|
- .message-content {
|
|
|
- flex: 1;
|
|
|
- max-width: 80%;
|
|
|
- }
|
|
|
-
|
|
|
- .message-text {
|
|
|
- background: rgba(255,255,255,0.15);
|
|
|
- padding: 14px 18px;
|
|
|
- border-radius: 20px;
|
|
|
- color: white;
|
|
|
- font-size: 14px;
|
|
|
- line-height: 1.5;
|
|
|
- backdrop-filter: blur(10px);
|
|
|
- box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
|
|
- border: 1px solid rgba(255,255,255,0.1);
|
|
|
- }
|
|
|
-
|
|
|
- .user-message .message-text {
|
|
|
- background: rgba(255,255,255,0.95);
|
|
|
- color: #333;
|
|
|
- box-shadow: 0 3px 10px rgba(0,0,0,0.1);
|
|
|
- border: 1px solid rgba(255,255,255,0.3);
|
|
|
- }
|
|
|
-
|
|
|
- /* AI消息特殊样式增强 */
|
|
|
- .ai-message .message-text.ai-formatted {
|
|
|
- background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.12));
|
|
|
- border: 1px solid rgba(255,255,255,0.15);
|
|
|
- }
|
|
|
-
|
|
|
- .message-time {
|
|
|
- font-size: 11px;
|
|
|
- color: rgba(255,255,255,0.7);
|
|
|
- margin-top: 4px;
|
|
|
- padding-left: 16px;
|
|
|
- }
|
|
|
-
|
|
|
- .user-message .message-time {
|
|
|
- color: rgba(0,0,0,0.5);
|
|
|
- text-align: right;
|
|
|
- padding-left: 0;
|
|
|
- padding-right: 16px;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-quick-commands {
|
|
|
- padding: 15px 20px;
|
|
|
- display: flex;
|
|
|
- gap: 10px;
|
|
|
- overflow-x: auto;
|
|
|
- background: rgba(255,255,255,0.05);
|
|
|
- }
|
|
|
-
|
|
|
- .quick-command {
|
|
|
- min-width: 120px;
|
|
|
- background: rgba(255,255,255,0.1);
|
|
|
- border-radius: 20px;
|
|
|
- padding: 10px 15px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 8px;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- color: white;
|
|
|
- font-size: 13px;
|
|
|
- }
|
|
|
-
|
|
|
- .quick-command:hover {
|
|
|
- background: rgba(255,255,255,0.2);
|
|
|
- transform: translateY(-2px);
|
|
|
- }
|
|
|
-
|
|
|
- .command-icon {
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-chat-input-area {
|
|
|
- padding: 20px;
|
|
|
- background: rgba(255,255,255,0.1);
|
|
|
- backdrop-filter: blur(10px);
|
|
|
- }
|
|
|
-
|
|
|
- .input-toolbar {
|
|
|
- display: flex;
|
|
|
- gap: 10px;
|
|
|
- margin-bottom: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .input-tool {
|
|
|
- color: white;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- padding: 2px;
|
|
|
- outline: none;
|
|
|
- background: none;
|
|
|
- border: none;
|
|
|
- }
|
|
|
-
|
|
|
- .input-tool:hover {
|
|
|
- transform: scale(1.1);
|
|
|
- }
|
|
|
-
|
|
|
- .input-tool:focus {
|
|
|
- outline: none;
|
|
|
- }
|
|
|
-
|
|
|
- .tool-icon {
|
|
|
- font-size: 14px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- border: none;
|
|
|
- }
|
|
|
-
|
|
|
- .input-container {
|
|
|
- display: flex;
|
|
|
- gap: 10px;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- .input-container input {
|
|
|
- flex: 1;
|
|
|
- background: rgba(255,255,255,0.9);
|
|
|
- border: none;
|
|
|
- border-radius: 25px;
|
|
|
- padding: 12px 20px;
|
|
|
- font-size: 14px;
|
|
|
- outline: none;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
-
|
|
|
- .input-container input::placeholder {
|
|
|
- color: #999;
|
|
|
- }
|
|
|
-
|
|
|
- .send-button {
|
|
|
- width: 45px;
|
|
|
- height: 45px;
|
|
|
- background: linear-gradient(135deg, #ff6b6b, #ffa726);
|
|
|
- border: none;
|
|
|
- border-radius: 50%;
|
|
|
- color: white;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
-
|
|
|
- .send-button:hover {
|
|
|
- transform: scale(1.05);
|
|
|
- box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
|
|
|
- }
|
|
|
-
|
|
|
- .send-icon {
|
|
|
- font-size: 18px;
|
|
|
- }
|
|
|
-
|
|
|
- /* 加载消息样式 */
|
|
|
- .loading-message .message-text {
|
|
|
- background: rgba(255,255,255,0.25);
|
|
|
- color: rgba(255,255,255,0.9);
|
|
|
- font-style: italic;
|
|
|
- }
|
|
|
-
|
|
|
- .loading-dots {
|
|
|
- opacity: 0.8;
|
|
|
- }
|
|
|
-
|
|
|
- .dots {
|
|
|
- color: #ffa726;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
-
|
|
|
- /* AI消息格式化样式 */
|
|
|
- .ai-formatted {
|
|
|
- line-height: 1.6;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-bold {
|
|
|
- font-weight: 600;
|
|
|
- color: #ffffff;
|
|
|
- text-shadow: 0 1px 2px rgba(0,0,0,0.3);
|
|
|
- }
|
|
|
-
|
|
|
- .ai-italic {
|
|
|
- font-style: italic;
|
|
|
- color: rgba(255,255,255,0.9);
|
|
|
- }
|
|
|
-
|
|
|
- .ai-list-item {
|
|
|
- margin: 8px 0;
|
|
|
- padding: 6px 12px;
|
|
|
- display: flex;
|
|
|
- align-items: flex-start;
|
|
|
- gap: 8px;
|
|
|
- background: rgba(255,255,255,0.05);
|
|
|
- border-radius: 8px;
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-list-item:hover {
|
|
|
- background: rgba(255,255,255,0.1);
|
|
|
- transform: translateX(5px);
|
|
|
- }
|
|
|
-
|
|
|
- .ai-list-number {
|
|
|
- color: #ffa726;
|
|
|
- font-weight: 600;
|
|
|
- min-width: 20px;
|
|
|
- text-align: right;
|
|
|
- text-shadow: 0 1px 2px rgba(0,0,0,0.3);
|
|
|
- }
|
|
|
-
|
|
|
- .ai-bullet {
|
|
|
- color: #ff6b6b;
|
|
|
- font-weight: bold;
|
|
|
- min-width: 16px;
|
|
|
- text-shadow: 0 1px 2px rgba(0,0,0,0.3);
|
|
|
- }
|
|
|
-
|
|
|
- .ai-list-content {
|
|
|
- flex: 1;
|
|
|
- line-height: 1.4;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-quote {
|
|
|
- background: rgba(255,255,255,0.1);
|
|
|
- border-left: 3px solid #ffa726;
|
|
|
- padding: 12px 16px;
|
|
|
- margin: 12px 0;
|
|
|
- border-radius: 0 8px 8px 0;
|
|
|
- font-style: italic;
|
|
|
- position: relative;
|
|
|
- box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
|
- }
|
|
|
-
|
|
|
- .ai-quote-icon {
|
|
|
- margin-right: 8px;
|
|
|
- animation: ideaPulse 2s ease-in-out infinite;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-divider {
|
|
|
- width: 100%;
|
|
|
- height: 2px;
|
|
|
- background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
|
|
|
- margin: 16px 0;
|
|
|
- border-radius: 1px;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-color-tag {
|
|
|
- display: inline-block;
|
|
|
- margin: 0 2px;
|
|
|
- box-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
|
|
- vertical-align: middle;
|
|
|
- transition: transform 0.2s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-color-tag:hover {
|
|
|
- transform: scale(1.1);
|
|
|
- }
|
|
|
-
|
|
|
- /* 特殊标签样式 */
|
|
|
- .ai-tag {
|
|
|
- display: inline-block;
|
|
|
- padding: 2px 8px;
|
|
|
- border-radius: 12px;
|
|
|
- font-size: 11px;
|
|
|
- font-weight: 600;
|
|
|
- margin: 0 4px;
|
|
|
- text-transform: uppercase;
|
|
|
- letter-spacing: 0.5px;
|
|
|
- box-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
|
|
- }
|
|
|
-
|
|
|
- .ai-tag-important {
|
|
|
- background: linear-gradient(45deg, #ff6b6b, #ff5252);
|
|
|
- color: white;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-tag-suggestion {
|
|
|
- background: linear-gradient(45deg, #4ecdc4, #44a08d);
|
|
|
- color: white;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-tag-tip {
|
|
|
- background: linear-gradient(45deg, #ffa726, #ff9800);
|
|
|
- color: white;
|
|
|
- }
|
|
|
-
|
|
|
- /* 段落间距 */
|
|
|
- .ai-paragraph-break {
|
|
|
- height: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- /* 表情增强效果 */
|
|
|
- .ai-sparkle, .ai-idea, .ai-art, .ai-suit, .ai-dress, .ai-heels, .ai-makeup, .ai-bag {
|
|
|
- display: inline-block;
|
|
|
- cursor: pointer;
|
|
|
- transition: transform 0.2s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-sparkle:hover, .ai-idea:hover, .ai-art:hover, .ai-suit:hover,
|
|
|
- .ai-dress:hover, .ai-heels:hover, .ai-makeup:hover, .ai-bag:hover {
|
|
|
- transform: scale(1.3);
|
|
|
- }
|
|
|
-
|
|
|
- .ai-sparkle {
|
|
|
- animation: sparkleGlow 2s ease-in-out infinite;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-idea {
|
|
|
- animation: ideaPulse 1.5s ease-in-out infinite;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-art {
|
|
|
- animation: artSway 3s ease-in-out infinite;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-suit {
|
|
|
- animation: suitBounce 2s ease-in-out infinite;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-dress {
|
|
|
- animation: dressFloat 3s ease-in-out infinite;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-heels {
|
|
|
- animation: heelsStep 1.8s ease-in-out infinite;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-makeup {
|
|
|
- animation: makeupShine 2.5s ease-in-out infinite;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-bag {
|
|
|
- animation: bagSwing 2.2s ease-in-out infinite;
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes sparkleGlow {
|
|
|
- 0%, 100% {
|
|
|
- transform: scale(1) rotate(0deg);
|
|
|
- filter: brightness(1);
|
|
|
- }
|
|
|
- 50% {
|
|
|
- transform: scale(1.1) rotate(10deg);
|
|
|
- filter: brightness(1.3);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes ideaPulse {
|
|
|
- 0%, 100% {
|
|
|
- transform: scale(1);
|
|
|
- filter: brightness(1);
|
|
|
- }
|
|
|
- 50% {
|
|
|
- transform: scale(1.2);
|
|
|
- filter: brightness(1.5);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes artSway {
|
|
|
- 0%, 100% { transform: rotate(-5deg); }
|
|
|
- 50% { transform: rotate(5deg); }
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes suitBounce {
|
|
|
- 0%, 100% { transform: translateY(0); }
|
|
|
- 50% { transform: translateY(-3px); }
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes dressFloat {
|
|
|
- 0%, 100% { transform: translateY(0) rotate(-2deg); }
|
|
|
- 50% { transform: translateY(-2px) rotate(2deg); }
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes heelsStep {
|
|
|
- 0%, 100% { transform: rotate(0deg); }
|
|
|
- 25% { transform: rotate(-10deg); }
|
|
|
- 75% { transform: rotate(10deg); }
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes makeupShine {
|
|
|
- 0%, 100% {
|
|
|
- transform: scale(1);
|
|
|
- filter: brightness(1) hue-rotate(0deg);
|
|
|
- }
|
|
|
- 50% {
|
|
|
- transform: scale(1.1);
|
|
|
- filter: brightness(1.2) hue-rotate(20deg);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes bagSwing {
|
|
|
- 0%, 100% { transform: rotate(-8deg); }
|
|
|
- 50% { transform: rotate(8deg); }
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes avatarPulse {
|
|
|
- 0% { transform: scale(1); }
|
|
|
- 50% { transform: scale(1.15); }
|
|
|
- 100% { transform: scale(1); }
|
|
|
- }
|
|
|
-
|
|
|
- /* 消息文本增强 */
|
|
|
- .ai-message .message-text {
|
|
|
- position: relative;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-message .message-text::before {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: -100%;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
|
|
|
- transition: left 0.6s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-message:hover .message-text::before {
|
|
|
- left: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- /* AI推荐结果页面样式 */
|
|
|
- .ai-recommendation-modal {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background: rgba(0,0,0,0.95);
|
|
|
- backdrop-filter: blur(10px);
|
|
|
- z-index: 2000;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- animation: fadeIn 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .recommendation-container {
|
|
|
- width: 100%;
|
|
|
- max-width: 414px;
|
|
|
- height: 100%;
|
|
|
- background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- overflow-y: auto;
|
|
|
- }
|
|
|
-
|
|
|
- .recommendation-header {
|
|
|
- padding: 20px;
|
|
|
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
- color: white;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- .recommendation-header h2 {
|
|
|
- font-size: 20px;
|
|
|
- margin: 0;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
-
|
|
|
- .close-recommendation {
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- background: rgba(255,255,255,0.2);
|
|
|
- border: none;
|
|
|
- border-radius: 50%;
|
|
|
- color: white;
|
|
|
- font-size: 18px;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .close-recommendation:hover {
|
|
|
- background: rgba(255,255,255,0.3);
|
|
|
- }
|
|
|
-
|
|
|
- .recommendation-content {
|
|
|
- flex: 1;
|
|
|
- padding: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .recommendation-3d-section {
|
|
|
- background: white;
|
|
|
- border-radius: 20px;
|
|
|
- padding: 20px;
|
|
|
- margin-bottom: 20px;
|
|
|
- box-shadow: 0 5px 20px rgba(0,0,0,0.1);
|
|
|
- }
|
|
|
-
|
|
|
- .recommendation-3d-viewer {
|
|
|
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
- border-radius: 15px;
|
|
|
- height: 250px;
|
|
|
- margin-bottom: 20px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- position: relative;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- .model-3d-container {
|
|
|
- text-align: center;
|
|
|
- color: white;
|
|
|
- }
|
|
|
-
|
|
|
- .model-3d-display {
|
|
|
- font-size: 80px;
|
|
|
- margin-bottom: 15px;
|
|
|
- animation: float 3s ease-in-out infinite;
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes float {
|
|
|
- 0%, 100% { transform: translateY(0px); }
|
|
|
- 50% { transform: translateY(-10px); }
|
|
|
- }
|
|
|
-
|
|
|
- .model-controls {
|
|
|
- display: flex;
|
|
|
- gap: 10px;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
-
|
|
|
- .model-control {
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- background: rgba(255,255,255,0.2);
|
|
|
- border: none;
|
|
|
- border-radius: 50%;
|
|
|
- color: white;
|
|
|
- font-size: 16px;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .model-control:hover {
|
|
|
- background: rgba(255,255,255,0.3);
|
|
|
- transform: scale(1.05);
|
|
|
- }
|
|
|
-
|
|
|
- .scheme-selector h4 {
|
|
|
- font-size: 16px;
|
|
|
- margin-bottom: 15px;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
-
|
|
|
- .scheme-tabs {
|
|
|
- display: flex;
|
|
|
- gap: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .scheme-tab {
|
|
|
- flex: 1;
|
|
|
- padding: 10px;
|
|
|
- background: #f8f9fa;
|
|
|
- border-radius: 10px;
|
|
|
- text-align: center;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 500;
|
|
|
- }
|
|
|
-
|
|
|
- .scheme-tab.active {
|
|
|
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
- color: white;
|
|
|
- }
|
|
|
-
|
|
|
- .color-theory-section {
|
|
|
- background: white;
|
|
|
- border-radius: 20px;
|
|
|
- padding: 20px;
|
|
|
- margin-bottom: 20px;
|
|
|
- box-shadow: 0 5px 20px rgba(0,0,0,0.1);
|
|
|
- }
|
|
|
-
|
|
|
- .color-theory-section h4 {
|
|
|
- font-size: 18px;
|
|
|
- margin-bottom: 20px;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
-
|
|
|
- .theory-content {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 15px;
|
|
|
- }
|
|
|
-
|
|
|
- .theory-card {
|
|
|
- display: flex;
|
|
|
- align-items: flex-start;
|
|
|
- gap: 15px;
|
|
|
- padding: 15px;
|
|
|
- background: #f8f9fa;
|
|
|
- border-radius: 15px;
|
|
|
- }
|
|
|
-
|
|
|
- .theory-icon {
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
- border-radius: 50%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 18px;
|
|
|
- flex-shrink: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .theory-text h5 {
|
|
|
- font-size: 16px;
|
|
|
- margin: 0 0 8px 0;
|
|
|
- color: #333;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
-
|
|
|
- .theory-text p {
|
|
|
- font-size: 14px;
|
|
|
- color: #666;
|
|
|
- margin: 0;
|
|
|
- line-height: 1.5;
|
|
|
- }
|
|
|
-
|
|
|
- .recommendation-actions {
|
|
|
- display: flex;
|
|
|
- gap: 12px;
|
|
|
- margin-top: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .action-btn {
|
|
|
- flex: 1;
|
|
|
- padding: 15px;
|
|
|
- border: none;
|
|
|
- border-radius: 15px;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 600;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- gap: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .action-btn.primary {
|
|
|
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
- color: white;
|
|
|
- }
|
|
|
-
|
|
|
- .action-btn.secondary {
|
|
|
- background: #f8f9fa;
|
|
|
- color: #666;
|
|
|
- border: 1px solid #e9ecef;
|
|
|
- }
|
|
|
-
|
|
|
- .action-btn:hover {
|
|
|
- transform: translateY(-2px);
|
|
|
- box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
|
|
- }
|
|
|
-
|
|
|
- .btn-icon {
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
-
|
|
|
- /* 底部导航 */
|
|
|
- .bottom-nav {
|
|
|
- position: fixed;
|
|
|
- bottom: 0;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- width: 414px;
|
|
|
- max-width: 100%;
|
|
|
- background: rgba(255,255,255,0.95);
|
|
|
- backdrop-filter: blur(20px);
|
|
|
- border-top: 1px solid rgba(0,0,0,0.1);
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- padding: 12px 0;
|
|
|
- z-index: 100;
|
|
|
- }
|
|
|
-
|
|
|
- .nav-item {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- gap: 4px;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- padding: 8px;
|
|
|
- border-radius: 12px;
|
|
|
- min-width: 60px;
|
|
|
- }
|
|
|
-
|
|
|
- .nav-item.active {
|
|
|
- background: linear-gradient(135deg, #ff6b6b, #ffa726);
|
|
|
- color: white;
|
|
|
- }
|
|
|
-
|
|
|
- .nav-item:not(.active):hover {
|
|
|
- background: rgba(0,0,0,0.05);
|
|
|
- }
|
|
|
-
|
|
|
- .nav-icon {
|
|
|
- font-size: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .nav-text {
|
|
|
- font-size: 10px;
|
|
|
- font-weight: 500;
|
|
|
- }
|
|
|
-
|
|
|
- /* 上传按钮特殊样式 */
|
|
|
- .upload-btn {
|
|
|
- position: relative;
|
|
|
- background: linear-gradient(135deg, #ff6b6b, #ffa726) !important;
|
|
|
- color: white !important;
|
|
|
- border-radius: 50%;
|
|
|
- width: 56px;
|
|
|
- height: 56px;
|
|
|
- margin-top: -20px;
|
|
|
- box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4);
|
|
|
- }
|
|
|
-
|
|
|
- .upload-btn:hover {
|
|
|
- transform: translateY(-2px);
|
|
|
- box-shadow: 0 12px 35px rgba(255, 107, 107, 0.6);
|
|
|
- }
|
|
|
-
|
|
|
- .upload-icon {
|
|
|
- font-size: 28px;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
-
|
|
|
- /* 模态框样式 */
|
|
|
- .modal {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background: rgba(0,0,0,0.8);
|
|
|
- backdrop-filter: blur(10px);
|
|
|
- display: none;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- z-index: 1000;
|
|
|
- animation: fadeIn 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes fadeIn {
|
|
|
- from { opacity: 0; }
|
|
|
- to { opacity: 1; }
|
|
|
- }
|
|
|
-
|
|
|
- .modal-content {
|
|
|
- background: white;
|
|
|
- border-radius: 25px;
|
|
|
- padding: 30px;
|
|
|
- margin: 20px;
|
|
|
- max-width: 350px;
|
|
|
- width: 100%;
|
|
|
- text-align: center;
|
|
|
- transform: scale(0.9);
|
|
|
- animation: modalPop 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes modalPop {
|
|
|
- to { transform: scale(1); }
|
|
|
- }
|
|
|
-
|
|
|
- .modal h3 {
|
|
|
- font-size: 24px;
|
|
|
- margin-bottom: 15px;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
-
|
|
|
- .modal p {
|
|
|
- color: #666;
|
|
|
- margin-bottom: 25px;
|
|
|
- line-height: 1.5;
|
|
|
- }
|
|
|
-
|
|
|
- .modal-actions {
|
|
|
- display: flex;
|
|
|
- gap: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .btn {
|
|
|
- flex: 1;
|
|
|
- padding: 12px;
|
|
|
- border: none;
|
|
|
- border-radius: 12px;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 600;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .btn-primary {
|
|
|
- background: linear-gradient(45deg, #ff6b6b, #ffa726);
|
|
|
- color: white;
|
|
|
- }
|
|
|
-
|
|
|
- .btn-primary:hover {
|
|
|
- transform: translateY(-2px);
|
|
|
- box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4);
|
|
|
- }
|
|
|
-
|
|
|
- .btn-secondary {
|
|
|
- background: #f8f9fa;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
-
|
|
|
- .btn-secondary:hover {
|
|
|
- background: #e9ecef;
|
|
|
- }
|
|
|
-
|
|
|
- /* 设置模态框样式 */
|
|
|
- .settings-modal {
|
|
|
- display: none;
|
|
|
- position: fixed;
|
|
|
- z-index: 2000;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background: rgba(0,0,0,0.6);
|
|
|
- backdrop-filter: blur(5px);
|
|
|
- animation: fadeIn 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .settings-modal-content {
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 50%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- width: 90%;
|
|
|
- max-width: 480px;
|
|
|
- max-height: 85vh;
|
|
|
- background: white;
|
|
|
- border-radius: 20px;
|
|
|
- box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
|
|
- overflow: hidden;
|
|
|
- animation: slideIn 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes slideIn {
|
|
|
- from { transform: translate(-50%, -50%) scale(0.9); opacity: 0; }
|
|
|
- to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
|
|
|
- }
|
|
|
-
|
|
|
- .settings-header {
|
|
|
- background: linear-gradient(45deg, #ff6b6b, #ffa726);
|
|
|
- color: white;
|
|
|
- padding: 20px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- .settings-header h2 {
|
|
|
- font-size: 20px;
|
|
|
- font-weight: 600;
|
|
|
- margin: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .close-btn {
|
|
|
- background: none;
|
|
|
- border: none;
|
|
|
- color: white;
|
|
|
- font-size: 24px;
|
|
|
- cursor: pointer;
|
|
|
- padding: 5px;
|
|
|
- border-radius: 50%;
|
|
|
- width: 35px;
|
|
|
- height: 35px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- transition: background 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .close-btn:hover {
|
|
|
- background: rgba(255,255,255,0.2);
|
|
|
- }
|
|
|
-
|
|
|
- .settings-body {
|
|
|
- padding: 0;
|
|
|
- max-height: 60vh;
|
|
|
- overflow-y: auto;
|
|
|
- }
|
|
|
-
|
|
|
- .settings-section {
|
|
|
- padding: 20px;
|
|
|
- border-bottom: 1px solid #f0f0f0;
|
|
|
- }
|
|
|
-
|
|
|
- .settings-section:last-child {
|
|
|
- border-bottom: none;
|
|
|
- }
|
|
|
-
|
|
|
- .settings-section h3 {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 600;
|
|
|
- color: #333;
|
|
|
- margin: 0 0 15px 0;
|
|
|
- }
|
|
|
-
|
|
|
- /* 个人资料样式 */
|
|
|
- .profile-info {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .profile-avatar {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
-
|
|
|
- .avatar-circle {
|
|
|
- position: relative;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
-
|
|
|
- .avatar-circle img {
|
|
|
- width: 80px;
|
|
|
- height: 80px;
|
|
|
- border-radius: 50%;
|
|
|
- border: 3px solid #ff6b6b;
|
|
|
- }
|
|
|
-
|
|
|
- .avatar-edit {
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- right: 0;
|
|
|
- background: #ff6b6b;
|
|
|
- color: white;
|
|
|
- width: 25px;
|
|
|
- height: 25px;
|
|
|
- border-radius: 50%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 12px;
|
|
|
- border: 2px solid white;
|
|
|
- }
|
|
|
-
|
|
|
- .profile-details .form-group {
|
|
|
- margin-bottom: 15px;
|
|
|
- }
|
|
|
-
|
|
|
- .profile-details label {
|
|
|
- display: block;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 500;
|
|
|
- color: #555;
|
|
|
- margin-bottom: 5px;
|
|
|
- }
|
|
|
-
|
|
|
- .profile-details input,
|
|
|
- .profile-details textarea {
|
|
|
- width: 100%;
|
|
|
- padding: 10px;
|
|
|
- border: 1px solid #ddd;
|
|
|
- border-radius: 8px;
|
|
|
- font-size: 14px;
|
|
|
- font-family: inherit;
|
|
|
- transition: border-color 0.3s ease;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
-
|
|
|
- .profile-details input:focus,
|
|
|
- .profile-details textarea:focus {
|
|
|
- outline: none;
|
|
|
- border-color: #ff6b6b;
|
|
|
- }
|
|
|
-
|
|
|
- .profile-details textarea {
|
|
|
- resize: vertical;
|
|
|
- min-height: 60px;
|
|
|
- }
|
|
|
-
|
|
|
- /* 安全设置样式 */
|
|
|
- .security-items {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .security-item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 12px;
|
|
|
- background: #f8f9fa;
|
|
|
- border-radius: 10px;
|
|
|
- cursor: pointer;
|
|
|
- transition: background 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .security-item:hover {
|
|
|
- background: #e9ecef;
|
|
|
- }
|
|
|
-
|
|
|
- .security-left {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .security-icon {
|
|
|
- font-size: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .security-title {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 500;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
-
|
|
|
- .security-desc {
|
|
|
- font-size: 12px;
|
|
|
- color: #666;
|
|
|
- margin-top: 2px;
|
|
|
- }
|
|
|
-
|
|
|
- .arrow {
|
|
|
- color: #999;
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
-
|
|
|
- /* 隐私设置样式 */
|
|
|
- .privacy-items {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 15px;
|
|
|
- }
|
|
|
-
|
|
|
- .privacy-item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- }
|
|
|
-
|
|
|
- .privacy-left {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 12px;
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
-
|
|
|
- .privacy-icon {
|
|
|
- font-size: 18px;
|
|
|
- }
|
|
|
-
|
|
|
- .privacy-title {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 500;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
-
|
|
|
- .privacy-desc {
|
|
|
- font-size: 12px;
|
|
|
- color: #666;
|
|
|
- margin-top: 2px;
|
|
|
- }
|
|
|
-
|
|
|
- .privacy-select {
|
|
|
- padding: 6px 10px;
|
|
|
- border: 1px solid #ddd;
|
|
|
- border-radius: 6px;
|
|
|
- font-size: 12px;
|
|
|
- background: white;
|
|
|
- }
|
|
|
-
|
|
|
- /* 开关样式 */
|
|
|
- .switch {
|
|
|
- position: relative;
|
|
|
- display: inline-block;
|
|
|
- width: 44px;
|
|
|
- height: 24px;
|
|
|
- }
|
|
|
-
|
|
|
- .switch input {
|
|
|
- opacity: 0;
|
|
|
- width: 0;
|
|
|
- height: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .slider {
|
|
|
- position: absolute;
|
|
|
- cursor: pointer;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- background-color: #ccc;
|
|
|
- transition: 0.3s;
|
|
|
- border-radius: 24px;
|
|
|
- }
|
|
|
-
|
|
|
- .slider:before {
|
|
|
- position: absolute;
|
|
|
- content: "";
|
|
|
- height: 18px;
|
|
|
- width: 18px;
|
|
|
- left: 3px;
|
|
|
- bottom: 3px;
|
|
|
- background-color: white;
|
|
|
- transition: 0.3s;
|
|
|
- border-radius: 50%;
|
|
|
- }
|
|
|
-
|
|
|
- input:checked + .slider {
|
|
|
- background-color: #ff6b6b;
|
|
|
- }
|
|
|
-
|
|
|
- input:checked + .slider:before {
|
|
|
- transform: translateX(20px);
|
|
|
- }
|
|
|
-
|
|
|
- /* 应用设置样式 */
|
|
|
- .app-items {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .app-item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 12px;
|
|
|
- background: #f8f9fa;
|
|
|
- border-radius: 10px;
|
|
|
- cursor: pointer;
|
|
|
- transition: background 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .app-item:hover {
|
|
|
- background: #e9ecef;
|
|
|
- }
|
|
|
-
|
|
|
- .app-left {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .app-icon {
|
|
|
- font-size: 18px;
|
|
|
- }
|
|
|
-
|
|
|
- .app-title {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 500;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
-
|
|
|
- .app-right {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .version,
|
|
|
- .cache-size {
|
|
|
- font-size: 12px;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
-
|
|
|
- /* 设置底部 */
|
|
|
- .settings-footer {
|
|
|
- padding: 20px;
|
|
|
- background: #f8f9fa;
|
|
|
- display: flex;
|
|
|
- gap: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .save-btn {
|
|
|
- flex: 1;
|
|
|
- padding: 12px;
|
|
|
- background: linear-gradient(45deg, #ff6b6b, #ffa726);
|
|
|
- color: white;
|
|
|
- border: none;
|
|
|
- border-radius: 8px;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 500;
|
|
|
- cursor: pointer;
|
|
|
- transition: transform 0.2s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .save-btn:hover {
|
|
|
- transform: translateY(-1px);
|
|
|
- }
|
|
|
-
|
|
|
- .logout-btn {
|
|
|
- flex: 1;
|
|
|
- padding: 12px;
|
|
|
- background: #dc3545;
|
|
|
- color: white;
|
|
|
- border: none;
|
|
|
- border-radius: 8px;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 500;
|
|
|
- cursor: pointer;
|
|
|
- transition: background 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .logout-btn:hover {
|
|
|
- background: #c82333;
|
|
|
- }
|
|
|
-
|
|
|
- /* 新版设计中心样式 */
|
|
|
- .design-preview-system {
|
|
|
- margin: 20px;
|
|
|
- margin-bottom: 25px;
|
|
|
- }
|
|
|
-
|
|
|
- .preview-container {
|
|
|
- background: white;
|
|
|
- border-radius: 20px;
|
|
|
- padding: 20px;
|
|
|
- box-shadow: 0 8px 30px rgba(0,0,0,0.1);
|
|
|
- position: relative;
|
|
|
- }
|
|
|
-
|
|
|
- .preview-3d-enhanced {
|
|
|
- position: relative;
|
|
|
- height: 280px;
|
|
|
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
- border-radius: 15px;
|
|
|
- overflow: hidden;
|
|
|
- margin-bottom: 15px;
|
|
|
- }
|
|
|
-
|
|
|
- .model-3d-wrapper {
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
-
|
|
|
- #main3DModel {
|
|
|
- font-size: 100px;
|
|
|
- color: white;
|
|
|
- z-index: 2;
|
|
|
- position: relative;
|
|
|
- animation: float 6s ease-in-out infinite;
|
|
|
- transition: all 0.5s ease;
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes float {
|
|
|
- 0%, 100% { transform: translateY(0px) rotate(0deg); }
|
|
|
- 50% { transform: translateY(-10px) rotate(5deg); }
|
|
|
- }
|
|
|
-
|
|
|
- .model-highlights {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- pointer-events: none;
|
|
|
- z-index: 3;
|
|
|
- }
|
|
|
-
|
|
|
- .preview-controls {
|
|
|
- position: absolute;
|
|
|
- bottom: 15px;
|
|
|
- right: 15px;
|
|
|
- z-index: 4;
|
|
|
- }
|
|
|
-
|
|
|
- .control-group {
|
|
|
- display: flex;
|
|
|
- gap: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .control-btn {
|
|
|
- width: 35px;
|
|
|
- height: 35px;
|
|
|
- border-radius: 50%;
|
|
|
- background: rgba(255, 255, 255, 0.9);
|
|
|
- border: none;
|
|
|
- cursor: pointer;
|
|
|
- font-size: 16px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- transition: all 0.3s ease;
|
|
|
- backdrop-filter: blur(10px);
|
|
|
- }
|
|
|
-
|
|
|
- .control-btn:hover {
|
|
|
- background: white;
|
|
|
- transform: scale(1.1);
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- /* 3D分区控制面板样式 */
|
|
|
- .zone-control-panel {
|
|
|
- margin: 20px;
|
|
|
- background: white;
|
|
|
- border-radius: 20px;
|
|
|
- box-shadow: 0 8px 30px rgba(0,0,0,0.1);
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- .panel-header {
|
|
|
- background: linear-gradient(45deg, #ff6b6b, #ffa726);
|
|
|
- color: white;
|
|
|
- padding: 15px 20px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- .panel-header h3 {
|
|
|
- margin: 0;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
-
|
|
|
- .expand-btn {
|
|
|
- background: none;
|
|
|
- border: none;
|
|
|
- color: white;
|
|
|
- font-size: 18px;
|
|
|
- cursor: pointer;
|
|
|
- transition: transform 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .expand-btn:hover {
|
|
|
- transform: scale(1.1);
|
|
|
- }
|
|
|
-
|
|
|
- .panel-content {
|
|
|
- padding: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- /* 部位选择器（胶囊式Tab）样式 */
|
|
|
- .body-part-selector {
|
|
|
- margin-bottom: 25px;
|
|
|
- }
|
|
|
-
|
|
|
- .part-tabs {
|
|
|
- display: flex;
|
|
|
- gap: 8px;
|
|
|
- flex-wrap: wrap;
|
|
|
- }
|
|
|
-
|
|
|
- .part-tab {
|
|
|
- background: #f8f9fa;
|
|
|
- border: 2px solid transparent;
|
|
|
- border-radius: 25px;
|
|
|
- padding: 10px 15px;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 6px;
|
|
|
- flex: 1;
|
|
|
- min-width: 70px;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
-
|
|
|
- .part-tab:hover {
|
|
|
- background: rgba(255, 107, 107, 0.1);
|
|
|
- border-color: rgba(255, 107, 107, 0.3);
|
|
|
- }
|
|
|
-
|
|
|
- .part-tab.active {
|
|
|
- background: linear-gradient(45deg, #ff6b6b, #ffa726);
|
|
|
- color: white;
|
|
|
- border-color: #ff6b6b;
|
|
|
- transform: translateY(-2px);
|
|
|
- box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
|
|
|
- }
|
|
|
-
|
|
|
- .tab-icon {
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
-
|
|
|
- .tab-text {
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 500;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- /* 色盘管理系统样式 */
|
|
|
- .color-management-system {
|
|
|
- margin: 20px;
|
|
|
- background: white;
|
|
|
- border-radius: 20px;
|
|
|
- box-shadow: 0 8px 30px rgba(0,0,0,0.1);
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- .color-system-header {
|
|
|
- background: linear-gradient(45deg, #667eea, #764ba2);
|
|
|
- color: white;
|
|
|
- padding: 15px 20px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- .color-system-header h3 {
|
|
|
- margin: 0;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
-
|
|
|
- .color-actions {
|
|
|
- display: flex;
|
|
|
- gap: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .action-btn {
|
|
|
- width: 32px;
|
|
|
- height: 32px;
|
|
|
- border-radius: 50%;
|
|
|
- background: rgba(255, 255, 255, 0.2);
|
|
|
- border: none;
|
|
|
- color: white;
|
|
|
- font-size: 14px;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
-
|
|
|
- .action-btn:hover {
|
|
|
- background: rgba(255, 255, 255, 0.3);
|
|
|
- transform: scale(1.1);
|
|
|
- }
|
|
|
-
|
|
|
- .zone-color-memory {
|
|
|
- padding: 15px 20px;
|
|
|
- background: #f8f9fa;
|
|
|
- border-bottom: 1px solid #e9ecef;
|
|
|
- }
|
|
|
-
|
|
|
- .current-part-info {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .part-label {
|
|
|
- font-size: 12px;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
-
|
|
|
- .part-name {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 600;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
-
|
|
|
- .color-indicator {
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- border-radius: 50%;
|
|
|
- border: 2px solid white;
|
|
|
- box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
|
- }
|
|
|
-
|
|
|
- .master-color-picker {
|
|
|
- padding: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .color-picker-section {
|
|
|
- margin-bottom: 25px;
|
|
|
- }
|
|
|
-
|
|
|
- .color-picker-section:last-child {
|
|
|
- margin-bottom: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .color-picker-section h4 {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 600;
|
|
|
- color: #333;
|
|
|
- margin-bottom: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .enhanced-palette {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: repeat(8, 1fr);
|
|
|
- gap: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .color-swatch {
|
|
|
- width: 35px;
|
|
|
- height: 35px;
|
|
|
- border-radius: 8px;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- border: 2px solid transparent;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
-
|
|
|
- .color-swatch:hover {
|
|
|
- transform: scale(1.1);
|
|
|
- border-color: #333;
|
|
|
- }
|
|
|
-
|
|
|
- .color-swatch.active {
|
|
|
- transform: scale(1.15);
|
|
|
- border-color: #333;
|
|
|
- box-shadow: 0 4px 12px rgba(0,0,0,0.3);
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- .custom-color-controls {
|
|
|
- display: flex;
|
|
|
- gap: 12px;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- #customColorPicker {
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- border: none;
|
|
|
- border-radius: 8px;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
-
|
|
|
- .add-custom-btn {
|
|
|
- flex: 1;
|
|
|
- padding: 8px 12px;
|
|
|
- background: linear-gradient(45deg, #ff6b6b, #ffa726);
|
|
|
- color: white;
|
|
|
- border: none;
|
|
|
- border-radius: 6px;
|
|
|
- font-size: 12px;
|
|
|
- cursor: pointer;
|
|
|
- transition: transform 0.2s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .add-custom-btn:hover {
|
|
|
- transform: translateY(-1px);
|
|
|
- }
|
|
|
-
|
|
|
- /* 历史配色库样式 */
|
|
|
- .color-history-section {
|
|
|
- padding: 20px;
|
|
|
- border-top: 1px solid #e9ecef;
|
|
|
- }
|
|
|
-
|
|
|
- .color-history-section h4 {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 600;
|
|
|
- color: #333;
|
|
|
- margin-bottom: 15px;
|
|
|
- }
|
|
|
-
|
|
|
- .history-schemes {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .scheme-item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 12px;
|
|
|
- padding: 10px;
|
|
|
- background: #f8f9fa;
|
|
|
- border-radius: 8px;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .scheme-item:hover {
|
|
|
- background: rgba(255, 107, 107, 0.1);
|
|
|
- }
|
|
|
-
|
|
|
- .scheme-preview {
|
|
|
- display: flex;
|
|
|
- gap: 2px;
|
|
|
- }
|
|
|
-
|
|
|
- .scheme-color {
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- border-radius: 50%;
|
|
|
- }
|
|
|
-
|
|
|
- .scheme-name {
|
|
|
- font-size: 12px;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
-
|
|
|
- /* 高级定制工具样式 */
|
|
|
- .advanced-tools {
|
|
|
- margin: 20px;
|
|
|
- background: white;
|
|
|
- border-radius: 20px;
|
|
|
- box-shadow: 0 8px 30px rgba(0,0,0,0.1);
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- .tools-header {
|
|
|
- background: linear-gradient(45deg, #43e97b, #38f9d7);
|
|
|
- color: white;
|
|
|
- padding: 15px 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .tools-header h3 {
|
|
|
- margin: 0;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
-
|
|
|
- .advanced-tool-grid {
|
|
|
- padding: 20px;
|
|
|
- display: grid;
|
|
|
- grid-template-columns: repeat(2, 1fr);
|
|
|
- gap: 15px;
|
|
|
- }
|
|
|
-
|
|
|
- .advanced-tool-card {
|
|
|
- background: #f8f9fa;
|
|
|
- border-radius: 12px;
|
|
|
- padding: 15px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 12px;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- border: 2px solid transparent;
|
|
|
- }
|
|
|
-
|
|
|
- .advanced-tool-card:hover {
|
|
|
- background: white;
|
|
|
- border-color: rgba(67, 233, 123, 0.3);
|
|
|
- transform: translateY(-2px);
|
|
|
- box-shadow: 0 8px 25px rgba(67, 233, 123, 0.2);
|
|
|
- }
|
|
|
-
|
|
|
- .advanced-tool-card .tool-icon {
|
|
|
- font-size: 24px;
|
|
|
- }
|
|
|
-
|
|
|
- .tool-content {
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
-
|
|
|
- .advanced-tool-card .tool-title {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 600;
|
|
|
- color: #333;
|
|
|
- margin-bottom: 2px;
|
|
|
- }
|
|
|
-
|
|
|
- .tool-desc {
|
|
|
- font-size: 11px;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
-
|
|
|
- /* 设计工具区域 */
|
|
|
- .design-tools {
|
|
|
- margin: 20px;
|
|
|
- display: none;
|
|
|
- }
|
|
|
-
|
|
|
- .tool-grid {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: repeat(2, 1fr);
|
|
|
- gap: 15px;
|
|
|
- margin-bottom: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .tool-card {
|
|
|
- background: white;
|
|
|
- border-radius: 15px;
|
|
|
- padding: 20px;
|
|
|
- text-align: center;
|
|
|
- box-shadow: 0 5px 20px rgba(0,0,0,0.1);
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
- }
|
|
|
-
|
|
|
- .tool-card:hover {
|
|
|
- transform: translateY(-5px);
|
|
|
- box-shadow: 0 15px 40px rgba(0,0,0,0.2);
|
|
|
- }
|
|
|
-
|
|
|
- .tool-icon {
|
|
|
- font-size: 40px;
|
|
|
- margin-bottom: 10px;
|
|
|
- display: block;
|
|
|
- }
|
|
|
-
|
|
|
- .tool-title {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 600;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
-
|
|
|
- /* 颜色选择器 */
|
|
|
- .color-picker {
|
|
|
- background: white;
|
|
|
- border-radius: 15px;
|
|
|
- padding: 20px;
|
|
|
- margin-bottom: 20px;
|
|
|
- box-shadow: 0 5px 20px rgba(0,0,0,0.1);
|
|
|
- }
|
|
|
-
|
|
|
- .color-palette {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: repeat(7, 1fr);
|
|
|
- gap: 8px;
|
|
|
- margin-top: 15px;
|
|
|
- }
|
|
|
-
|
|
|
- @media (max-width: 380px) {
|
|
|
- .color-palette {
|
|
|
- grid-template-columns: repeat(5, 1fr);
|
|
|
- gap: 6px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .color-swatch {
|
|
|
- width: 30px;
|
|
|
- height: 30px;
|
|
|
- border-radius: 50%;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- border: 2px solid transparent;
|
|
|
- }
|
|
|
-
|
|
|
- .color-swatch:hover,
|
|
|
- .color-swatch.active {
|
|
|
- transform: scale(1.2);
|
|
|
- border-color: #333;
|
|
|
- box-shadow: 0 0 15px rgba(0,0,0,0.3);
|
|
|
- }
|
|
|
-
|
|
|
- .color-swatch[data-color="白色"]:hover,
|
|
|
- .color-swatch[data-color="白色"].active {
|
|
|
- border-color: #ff6b6b;
|
|
|
- box-shadow: 0 0 15px rgba(255,107,107,0.5);
|
|
|
- }
|
|
|
-
|
|
|
- .color-swatch[title*="白色"] {
|
|
|
- border: 2px solid #ddd !important;
|
|
|
- }
|
|
|
-
|
|
|
- .color-swatch[title*="白色"]:hover {
|
|
|
- border-color: #ff6b6b !important;
|
|
|
- }
|
|
|
-
|
|
|
- /* 3D预览区 */
|
|
|
- .preview-3d {
|
|
|
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
- border-radius: 15px;
|
|
|
- height: 300px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- color: white;
|
|
|
- font-size: 18px;
|
|
|
- margin-bottom: 20px;
|
|
|
- box-shadow: 0 10px 30px rgba(0,0,0,0.2);
|
|
|
- position: relative;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- .preview-3d::before {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>');
|
|
|
- }
|
|
|
-
|
|
|
- .model-3d {
|
|
|
- font-size: 80px;
|
|
|
- z-index: 2;
|
|
|
- position: relative;
|
|
|
- animation: rotate3d 10s infinite linear;
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes rotate3d {
|
|
|
- 0% { transform: rotateY(0deg); }
|
|
|
- 100% { transform: rotateY(360deg); }
|
|
|
- }
|
|
|
-
|
|
|
- /* 服装预览样式 */
|
|
|
- .clothing-preview {
|
|
|
- position: relative;
|
|
|
- width: 280px;
|
|
|
- height: 280px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- z-index: 2;
|
|
|
- }
|
|
|
-
|
|
|
- .clothing-layer {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
-
|
|
|
- .part-image {
|
|
|
- max-width: 100%;
|
|
|
- max-height: 100%;
|
|
|
- object-fit: contain;
|
|
|
- transition: all 0.3s ease;
|
|
|
- filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
|
|
|
- }
|
|
|
-
|
|
|
- .part-image.highlighted {
|
|
|
- filter: drop-shadow(0 0 20px #ffa726) drop-shadow(0 4px 8px rgba(0,0,0,0.3));
|
|
|
- transform: scale(1.05);
|
|
|
- }
|
|
|
-
|
|
|
- .part-image.selected {
|
|
|
- filter: drop-shadow(0 0 15px #ff6b6b) drop-shadow(0 4px 8px rgba(0,0,0,0.3));
|
|
|
- }
|
|
|
-
|
|
|
- /* 社区页面 */
|
|
|
- .community-page {
|
|
|
- display: none;
|
|
|
- }
|
|
|
-
|
|
|
- .community-header {
|
|
|
- background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
|
|
|
- padding: 20px;
|
|
|
- color: white;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .community-header-top {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- /* 发布按钮样式 */
|
|
|
- .publish-btn {
|
|
|
- background: rgba(255, 255, 255, 0.2);
|
|
|
- border: 1px solid rgba(255, 255, 255, 0.3);
|
|
|
- color: white;
|
|
|
- padding: 8px 16px;
|
|
|
- border-radius: 20px;
|
|
|
- font-size: 14px;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 6px;
|
|
|
- }
|
|
|
-
|
|
|
- .publish-btn:hover {
|
|
|
- background: rgba(255, 255, 255, 0.3);
|
|
|
- transform: translateY(-2px);
|
|
|
- }
|
|
|
-
|
|
|
- .publish-icon {
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
-
|
|
|
- /* 上传模态框样式 */
|
|
|
- .upload-modal {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background: rgba(0, 0, 0, 0.8);
|
|
|
- backdrop-filter: blur(10px);
|
|
|
- display: none;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- z-index: 1000;
|
|
|
- animation: fadeIn 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .upload-modal-content {
|
|
|
- background: white;
|
|
|
- border-radius: 25px;
|
|
|
- padding: 0;
|
|
|
- margin: 20px;
|
|
|
- max-width: 380px;
|
|
|
- width: 100%;
|
|
|
- max-height: 90vh;
|
|
|
- overflow-y: auto;
|
|
|
- transform: scale(0.9);
|
|
|
- animation: modalPop 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
|
|
- }
|
|
|
-
|
|
|
- /* 步骤指示器 */
|
|
|
- .upload-steps {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 20px 30px 0;
|
|
|
- margin-bottom: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .step {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- flex: 1;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
-
|
|
|
- .step:not(:last-child)::after {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- top: 15px;
|
|
|
- left: 60%;
|
|
|
- width: 40px;
|
|
|
- height: 2px;
|
|
|
- background: #e9ecef;
|
|
|
- z-index: 1;
|
|
|
- }
|
|
|
-
|
|
|
- .step.active:not(:last-child)::after {
|
|
|
- background: linear-gradient(45deg, #ff6b6b, #ffa726);
|
|
|
- }
|
|
|
-
|
|
|
- .step-number {
|
|
|
- width: 30px;
|
|
|
- height: 30px;
|
|
|
- border-radius: 50%;
|
|
|
- background: #e9ecef;
|
|
|
- color: #666;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 600;
|
|
|
- margin-bottom: 8px;
|
|
|
- position: relative;
|
|
|
- z-index: 2;
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .step.active .step-number {
|
|
|
- background: linear-gradient(45deg, #ff6b6b, #ffa726);
|
|
|
- color: white;
|
|
|
- }
|
|
|
-
|
|
|
- .step-label {
|
|
|
- font-size: 12px;
|
|
|
- color: #666;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .step.active .step-label {
|
|
|
- color: #333;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
-
|
|
|
- /* 上传步骤内容 */
|
|
|
- .upload-step {
|
|
|
- display: none;
|
|
|
- padding: 0 30px 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .upload-step.active {
|
|
|
- display: block;
|
|
|
- }
|
|
|
-
|
|
|
- .upload-step h3 {
|
|
|
- font-size: 20px;
|
|
|
- margin-bottom: 20px;
|
|
|
- color: #333;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- /* 作品类型选择 */
|
|
|
- .work-types {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .work-type {
|
|
|
- border: 2px solid #e9ecef;
|
|
|
- border-radius: 15px;
|
|
|
- padding: 20px;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .work-type:hover {
|
|
|
- border-color: #ff6b6b;
|
|
|
- background: rgba(255, 107, 107, 0.05);
|
|
|
- }
|
|
|
-
|
|
|
- .work-type.selected {
|
|
|
- border-color: #ff6b6b;
|
|
|
- background: linear-gradient(135deg, rgba(255, 107, 107, 0.1), rgba(255, 167, 38, 0.1));
|
|
|
- }
|
|
|
-
|
|
|
- .type-icon {
|
|
|
- font-size: 32px;
|
|
|
- margin-bottom: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .type-name {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 600;
|
|
|
- color: #333;
|
|
|
- margin-bottom: 5px;
|
|
|
- }
|
|
|
-
|
|
|
- .type-desc {
|
|
|
- font-size: 12px;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
-
|
|
|
- /* 上传选项 */
|
|
|
- .upload-options {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .upload-section {
|
|
|
- border: 1px solid #e9ecef;
|
|
|
- border-radius: 15px;
|
|
|
- padding: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .upload-section h4 {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 600;
|
|
|
- color: #333;
|
|
|
- margin-bottom: 15px;
|
|
|
- }
|
|
|
-
|
|
|
- /* 文件上传区域 */
|
|
|
- .file-upload-area {
|
|
|
- border: 2px dashed #ddd;
|
|
|
- border-radius: 12px;
|
|
|
- padding: 30px 20px;
|
|
|
- text-align: center;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- background: #fafafa;
|
|
|
- }
|
|
|
-
|
|
|
- .file-upload-area:hover {
|
|
|
- border-color: #ff6b6b;
|
|
|
- background: rgba(255, 107, 107, 0.05);
|
|
|
- }
|
|
|
-
|
|
|
- .upload-placeholder {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- gap: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .upload-icon {
|
|
|
- font-size: 32px;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
-
|
|
|
- .upload-text {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 600;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
-
|
|
|
- .upload-hint {
|
|
|
- font-size: 12px;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
-
|
|
|
- /* 上传预览 */
|
|
|
- .upload-preview {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: repeat(3, 1fr);
|
|
|
- gap: 10px;
|
|
|
- margin-top: 15px;
|
|
|
- }
|
|
|
-
|
|
|
- .preview-item {
|
|
|
- position: relative;
|
|
|
- aspect-ratio: 1;
|
|
|
- border-radius: 8px;
|
|
|
- overflow: hidden;
|
|
|
- background: #f8f9fa;
|
|
|
- }
|
|
|
-
|
|
|
- .preview-item img {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- object-fit: cover;
|
|
|
- }
|
|
|
-
|
|
|
- .preview-remove {
|
|
|
- position: absolute;
|
|
|
- top: 5px;
|
|
|
- right: 5px;
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- border-radius: 50%;
|
|
|
- background: rgba(0, 0, 0, 0.7);
|
|
|
- color: white;
|
|
|
- border: none;
|
|
|
- cursor: pointer;
|
|
|
- font-size: 12px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
-
|
|
|
- /* 我的设计网格 */
|
|
|
- .my-designs-grid {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: repeat(3, 1fr);
|
|
|
- gap: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .design-item {
|
|
|
- text-align: center;
|
|
|
- cursor: pointer;
|
|
|
- padding: 10px;
|
|
|
- border-radius: 8px;
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .design-item:hover {
|
|
|
- background: rgba(255, 107, 107, 0.05);
|
|
|
- }
|
|
|
-
|
|
|
- .design-item.selected {
|
|
|
- background: rgba(255, 107, 107, 0.1);
|
|
|
- border: 2px solid #ff6b6b;
|
|
|
- }
|
|
|
-
|
|
|
- .design-preview {
|
|
|
- width: 60px;
|
|
|
- height: 60px;
|
|
|
- border-radius: 8px;
|
|
|
- background: linear-gradient(45deg, #a8edea 0%, #fed6e3 100%);
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 24px;
|
|
|
- margin: 0 auto 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .design-name {
|
|
|
- font-size: 12px;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
-
|
|
|
- /* 描述表单 */
|
|
|
- .description-form {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .form-group {
|
|
|
- position: relative;
|
|
|
- }
|
|
|
-
|
|
|
- .form-group label {
|
|
|
- display: block;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 600;
|
|
|
- color: #333;
|
|
|
- margin-bottom: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .form-group input,
|
|
|
- .form-group textarea,
|
|
|
- .form-group select {
|
|
|
- width: 100%;
|
|
|
- padding: 12px;
|
|
|
- border: 2px solid #e9ecef;
|
|
|
- border-radius: 8px;
|
|
|
- font-size: 14px;
|
|
|
- transition: all 0.3s ease;
|
|
|
- resize: none;
|
|
|
- }
|
|
|
-
|
|
|
- .form-group input:focus,
|
|
|
- .form-group textarea:focus,
|
|
|
- .form-group select:focus {
|
|
|
- outline: none;
|
|
|
- border-color: #ff6b6b;
|
|
|
- box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.1);
|
|
|
- }
|
|
|
-
|
|
|
- .form-group textarea {
|
|
|
- height: 80px;
|
|
|
- }
|
|
|
-
|
|
|
- .char-count {
|
|
|
- position: absolute;
|
|
|
- bottom: -20px;
|
|
|
- right: 0;
|
|
|
- font-size: 12px;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
-
|
|
|
- /* 标签容器 */
|
|
|
- .tags-container {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .popular-tags {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- gap: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .tag {
|
|
|
- background: #f8f9fa;
|
|
|
- color: #666;
|
|
|
- padding: 6px 12px;
|
|
|
- border-radius: 20px;
|
|
|
- font-size: 12px;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- border: 1px solid transparent;
|
|
|
- }
|
|
|
-
|
|
|
- .tag:hover {
|
|
|
- background: rgba(255, 107, 107, 0.1);
|
|
|
- color: #ff6b6b;
|
|
|
- }
|
|
|
-
|
|
|
- .tag.selected {
|
|
|
- background: #ff6b6b;
|
|
|
- color: white;
|
|
|
- }
|
|
|
-
|
|
|
- /* 发布设置 */
|
|
|
- .publish-settings {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 25px;
|
|
|
- }
|
|
|
-
|
|
|
- .setting-group {
|
|
|
- border: 1px solid #e9ecef;
|
|
|
- border-radius: 12px;
|
|
|
- padding: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .setting-group > label {
|
|
|
- display: block;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 600;
|
|
|
- color: #333;
|
|
|
- margin-bottom: 15px;
|
|
|
- }
|
|
|
-
|
|
|
- .radio-group {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .radio-option,
|
|
|
- .checkbox-option {
|
|
|
- display: flex;
|
|
|
- align-items: flex-start;
|
|
|
- gap: 12px;
|
|
|
- cursor: pointer;
|
|
|
- padding: 12px;
|
|
|
- border-radius: 8px;
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .radio-option:hover,
|
|
|
- .checkbox-option:hover {
|
|
|
- background: rgba(255, 107, 107, 0.05);
|
|
|
- }
|
|
|
-
|
|
|
- .radio-option input,
|
|
|
- .checkbox-option input {
|
|
|
- display: none;
|
|
|
- }
|
|
|
-
|
|
|
- .radio-custom,
|
|
|
- .checkbox-custom {
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- border: 2px solid #ddd;
|
|
|
- border-radius: 50%;
|
|
|
- position: relative;
|
|
|
- transition: all 0.3s ease;
|
|
|
- flex-shrink: 0;
|
|
|
- margin-top: 2px;
|
|
|
- }
|
|
|
-
|
|
|
- .checkbox-custom {
|
|
|
- border-radius: 4px;
|
|
|
- }
|
|
|
-
|
|
|
- .radio-option input:checked + .radio-custom,
|
|
|
- .checkbox-option input:checked + .checkbox-custom {
|
|
|
- border-color: #ff6b6b;
|
|
|
- background: #ff6b6b;
|
|
|
- }
|
|
|
-
|
|
|
- .radio-option input:checked + .radio-custom::after {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- width: 8px;
|
|
|
- height: 8px;
|
|
|
- border-radius: 50%;
|
|
|
- background: white;
|
|
|
- }
|
|
|
-
|
|
|
- .checkbox-option input:checked + .checkbox-custom::after {
|
|
|
- content: '✓';
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- color: white;
|
|
|
- font-size: 12px;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
-
|
|
|
- .option-content {
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
-
|
|
|
- .option-title {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 600;
|
|
|
- color: #333;
|
|
|
- margin-bottom: 4px;
|
|
|
- }
|
|
|
-
|
|
|
- .option-desc {
|
|
|
- font-size: 12px;
|
|
|
- color: #666;
|
|
|
- line-height: 1.4;
|
|
|
- }
|
|
|
-
|
|
|
- /* 模态框底部 */
|
|
|
- .upload-modal-footer {
|
|
|
- padding: 20px 30px;
|
|
|
- border-top: 1px solid #e9ecef;
|
|
|
- display: flex;
|
|
|
- gap: 12px;
|
|
|
- justify-content: flex-end;
|
|
|
- }
|
|
|
-
|
|
|
- .btn-outline {
|
|
|
- background: transparent;
|
|
|
- border: 2px solid #ff6b6b;
|
|
|
- color: #ff6b6b;
|
|
|
- }
|
|
|
-
|
|
|
- .btn-outline:hover {
|
|
|
- background: #ff6b6b;
|
|
|
- color: white;
|
|
|
- }
|
|
|
-
|
|
|
- /* 草稿箱和我的作品样式 */
|
|
|
- .drafts-content,
|
|
|
- .my-works-content {
|
|
|
- max-width: 400px;
|
|
|
- max-height: 80vh;
|
|
|
- overflow-y: auto;
|
|
|
- }
|
|
|
-
|
|
|
- .drafts-list,
|
|
|
- .works-content {
|
|
|
- max-height: 400px;
|
|
|
- overflow-y: auto;
|
|
|
- margin-bottom: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .draft-item,
|
|
|
- .work-item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 15px;
|
|
|
- padding: 15px;
|
|
|
- border: 1px solid #e9ecef;
|
|
|
- border-radius: 12px;
|
|
|
- margin-bottom: 12px;
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .draft-item:hover,
|
|
|
- .work-item:hover {
|
|
|
- border-color: #ff6b6b;
|
|
|
- background: rgba(255, 107, 107, 0.05);
|
|
|
- }
|
|
|
-
|
|
|
- .draft-preview,
|
|
|
- .work-preview {
|
|
|
- width: 50px;
|
|
|
- height: 50px;
|
|
|
- border-radius: 8px;
|
|
|
- background: linear-gradient(45deg, #a8edea 0%, #fed6e3 100%);
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 20px;
|
|
|
- flex-shrink: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .draft-info,
|
|
|
- .work-info {
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
-
|
|
|
- .draft-title,
|
|
|
- .work-title {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 600;
|
|
|
- color: #333;
|
|
|
- margin-bottom: 4px;
|
|
|
- }
|
|
|
-
|
|
|
- .draft-time {
|
|
|
- font-size: 12px;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
-
|
|
|
- .work-stats {
|
|
|
- display: flex;
|
|
|
- gap: 12px;
|
|
|
- font-size: 12px;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
-
|
|
|
- .draft-actions,
|
|
|
- .work-actions {
|
|
|
- display: flex;
|
|
|
- gap: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .draft-actions button,
|
|
|
- .work-actions button {
|
|
|
- padding: 6px 12px;
|
|
|
- border: 1px solid #ddd;
|
|
|
- border-radius: 6px;
|
|
|
- background: white;
|
|
|
- color: #666;
|
|
|
- font-size: 12px;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .draft-actions button:hover,
|
|
|
- .work-actions button:hover {
|
|
|
- border-color: #ff6b6b;
|
|
|
- color: #ff6b6b;
|
|
|
- }
|
|
|
-
|
|
|
- /* 作品标签页 */
|
|
|
- .works-tabs {
|
|
|
- display: flex;
|
|
|
- border-bottom: 1px solid #e9ecef;
|
|
|
- margin-bottom: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .tab {
|
|
|
- flex: 1;
|
|
|
- padding: 12px;
|
|
|
- text-align: center;
|
|
|
- cursor: pointer;
|
|
|
- border-bottom: 2px solid transparent;
|
|
|
- transition: all 0.3s ease;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 500;
|
|
|
- }
|
|
|
-
|
|
|
- .tab.active {
|
|
|
- color: #ff6b6b;
|
|
|
- border-bottom-color: #ff6b6b;
|
|
|
- }
|
|
|
-
|
|
|
- .tab:hover {
|
|
|
- background: rgba(255, 107, 107, 0.05);
|
|
|
- }
|
|
|
-
|
|
|
- /* 数据分析 */
|
|
|
- .analytics-summary {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: repeat(3, 1fr);
|
|
|
- gap: 15px;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .analytics-item {
|
|
|
- padding: 20px;
|
|
|
- border: 1px solid #e9ecef;
|
|
|
- border-radius: 12px;
|
|
|
- background: linear-gradient(135deg, rgba(255, 107, 107, 0.05), rgba(255, 167, 38, 0.05));
|
|
|
- }
|
|
|
-
|
|
|
- .analytics-number {
|
|
|
- font-size: 24px;
|
|
|
- font-weight: 700;
|
|
|
- color: #ff6b6b;
|
|
|
- margin-bottom: 5px;
|
|
|
- }
|
|
|
-
|
|
|
- .analytics-label {
|
|
|
- font-size: 12px;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
-
|
|
|
- /* 响应式调整 */
|
|
|
- @media (max-width: 380px) {
|
|
|
- .upload-modal-content {
|
|
|
- margin: 10px;
|
|
|
- max-width: calc(100% - 20px);
|
|
|
- }
|
|
|
-
|
|
|
- .upload-steps {
|
|
|
- padding: 15px 20px 0;
|
|
|
- }
|
|
|
-
|
|
|
- .upload-step {
|
|
|
- padding: 0 20px 15px;
|
|
|
- }
|
|
|
-
|
|
|
- .upload-modal-footer {
|
|
|
- padding: 15px 20px;
|
|
|
- }
|
|
|
-
|
|
|
- /* AI推荐引擎小屏幕优化 */
|
|
|
- .ai-engine-card {
|
|
|
- margin: 15px;
|
|
|
- padding: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-quick-actions {
|
|
|
- gap: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .quick-action {
|
|
|
- padding: 12px 10px;
|
|
|
- min-height: 45px;
|
|
|
- }
|
|
|
-
|
|
|
- .action-text {
|
|
|
- font-size: 13px;
|
|
|
- }
|
|
|
-
|
|
|
- .preview-items {
|
|
|
- gap: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .preview-item {
|
|
|
- padding: 12px 10px;
|
|
|
- min-height: 65px;
|
|
|
- gap: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .preview-image {
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- font-size: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .preview-title {
|
|
|
- font-size: 13px;
|
|
|
- }
|
|
|
-
|
|
|
- .preview-tags {
|
|
|
- font-size: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .ai-preview-results h4 {
|
|
|
- font-size: 15px;
|
|
|
- margin-bottom: 12px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- @media (max-width: 320px) {
|
|
|
- /* 极小屏幕优化 */
|
|
|
- .ai-quick-actions {
|
|
|
- grid-template-columns: 1fr;
|
|
|
- gap: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .quick-action {
|
|
|
- justify-content: center;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .preview-items {
|
|
|
- grid-template-columns: 1fr;
|
|
|
- gap: 8px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .community-stats {
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- margin: 20px 0;
|
|
|
- }
|
|
|
-
|
|
|
- .stat-item {
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .stat-number {
|
|
|
- font-size: 24px;
|
|
|
- font-weight: 700;
|
|
|
- }
|
|
|
-
|
|
|
- .stat-label {
|
|
|
- font-size: 12px;
|
|
|
- opacity: 0.8;
|
|
|
- }
|
|
|
-
|
|
|
- /* 个人中心 */
|
|
|
- .profile-page {
|
|
|
- display: none;
|
|
|
- }
|
|
|
-
|
|
|
- .profile-header {
|
|
|
- background: linear-gradient(45deg, #ff9a9e 0%, #fecfef 100%);
|
|
|
- padding: 30px 20px;
|
|
|
- text-align: center;
|
|
|
- color: white;
|
|
|
- }
|
|
|
-
|
|
|
- .avatar {
|
|
|
- width: 80px;
|
|
|
- height: 80px;
|
|
|
- border-radius: 50%;
|
|
|
- background: rgba(255,255,255,0.3);
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 36px;
|
|
|
- margin: 0 auto 15px;
|
|
|
- border: 3px solid rgba(255,255,255,0.5);
|
|
|
- }
|
|
|
-
|
|
|
- .profile-menu {
|
|
|
- padding: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .menu-item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 15px;
|
|
|
- background: white;
|
|
|
- border-radius: 12px;
|
|
|
- margin-bottom: 10px;
|
|
|
- box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .menu-item:hover {
|
|
|
- transform: translateX(5px);
|
|
|
- box-shadow: 0 5px 20px rgba(0,0,0,0.15);
|
|
|
- }
|
|
|
-
|
|
|
- .menu-left {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .menu-icon {
|
|
|
- font-size: 18px;
|
|
|
- color: #667eea;
|
|
|
- }
|
|
|
-
|
|
|
- /* 响应式设计 */
|
|
|
- @media (max-width: 480px) {
|
|
|
- .app-container {
|
|
|
- max-width: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .bottom-nav {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- /* 滚动条样式 */
|
|
|
- ::-webkit-scrollbar {
|
|
|
- width: 4px;
|
|
|
- }
|
|
|
-
|
|
|
- ::-webkit-scrollbar-track {
|
|
|
- background: transparent;
|
|
|
- }
|
|
|
-
|
|
|
- ::-webkit-scrollbar-thumb {
|
|
|
- background: rgba(0,0,0,0.2);
|
|
|
- border-radius: 2px;
|
|
|
- }
|
|
|
-
|
|
|
- /* 页面切换动画 */
|
|
|
- .page {
|
|
|
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
- }
|
|
|
-
|
|
|
- .page.fade-out {
|
|
|
- opacity: 0;
|
|
|
- transform: translateX(-20px);
|
|
|
- }
|
|
|
-
|
|
|
- .page.fade-in {
|
|
|
- opacity: 1;
|
|
|
- transform: translateX(0);
|
|
|
- }
|
|
|
-
|
|
|
- /* 3D试衣间样式 */
|
|
|
- .fitting-flow-nav {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- margin: 20px 0;
|
|
|
- padding: 0 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .flow-step {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- padding: 15px 20px;
|
|
|
- margin: 0 10px;
|
|
|
- border-radius: 12px;
|
|
|
- background: #f8f9fa;
|
|
|
- border: 2px solid transparent;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- min-width: 80px;
|
|
|
- }
|
|
|
-
|
|
|
- .flow-step.active {
|
|
|
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
- color: white;
|
|
|
- border-color: #667eea;
|
|
|
- }
|
|
|
-
|
|
|
- .step-icon {
|
|
|
- font-size: 20px;
|
|
|
- margin-bottom: 5px;
|
|
|
- }
|
|
|
-
|
|
|
- .step-text {
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 600;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .fitting-step {
|
|
|
- margin: 0 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .step-container {
|
|
|
- background: white;
|
|
|
- border-radius: 15px;
|
|
|
- padding: 25px;
|
|
|
- box-shadow: 0 5px 20px rgba(0,0,0,0.1);
|
|
|
- }
|
|
|
-
|
|
|
- .step-title {
|
|
|
- font-size: 18px;
|
|
|
- font-weight: 700;
|
|
|
- margin-bottom: 20px;
|
|
|
- color: #333;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- /* 照片上传样式 */
|
|
|
- .upload-methods {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: repeat(2, 1fr);
|
|
|
- gap: 15px;
|
|
|
- margin-bottom: 25px;
|
|
|
- }
|
|
|
-
|
|
|
- .upload-method {
|
|
|
- padding: 20px;
|
|
|
- border: 2px solid #e9ecef;
|
|
|
- border-radius: 12px;
|
|
|
- text-align: center;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .upload-method.active {
|
|
|
- border-color: #667eea;
|
|
|
- background: #f8f9ff;
|
|
|
- }
|
|
|
-
|
|
|
- .method-icon {
|
|
|
- font-size: 24px;
|
|
|
- margin-bottom: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .method-title {
|
|
|
- font-weight: 600;
|
|
|
- font-size: 14px;
|
|
|
- margin-bottom: 5px;
|
|
|
- }
|
|
|
-
|
|
|
- .method-desc {
|
|
|
- font-size: 12px;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
-
|
|
|
- .camera-interface, .gallery-interface {
|
|
|
- margin: 20px 0;
|
|
|
- }
|
|
|
-
|
|
|
- .camera-preview {
|
|
|
- height: 300px;
|
|
|
- background: #f8f9fa;
|
|
|
- border-radius: 12px;
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- margin-bottom: 15px;
|
|
|
- border: 2px dashed #dee2e6;
|
|
|
- }
|
|
|
-
|
|
|
- .camera-placeholder {
|
|
|
- text-align: center;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
-
|
|
|
- .camera-icon {
|
|
|
- font-size: 48px;
|
|
|
- margin-bottom: 15px;
|
|
|
- }
|
|
|
-
|
|
|
- .camera-text {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 600;
|
|
|
- margin-bottom: 5px;
|
|
|
- }
|
|
|
-
|
|
|
- .camera-hint {
|
|
|
- font-size: 12px;
|
|
|
- opacity: 0.7;
|
|
|
- }
|
|
|
-
|
|
|
- .pose-guide {
|
|
|
- position: absolute;
|
|
|
- top: 20px;
|
|
|
- right: 20px;
|
|
|
- background: rgba(0,0,0,0.7);
|
|
|
- color: white;
|
|
|
- padding: 10px;
|
|
|
- border-radius: 8px;
|
|
|
- text-align: center;
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .guide-silhouette {
|
|
|
- font-size: 24px;
|
|
|
- margin-bottom: 5px;
|
|
|
- }
|
|
|
-
|
|
|
- .camera-controls {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- gap: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .camera-btn {
|
|
|
- padding: 10px 20px;
|
|
|
- border: none;
|
|
|
- border-radius: 8px;
|
|
|
- background: #667eea;
|
|
|
- color: white;
|
|
|
- font-size: 14px;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .camera-btn:hover {
|
|
|
- background: #5a6fd8;
|
|
|
- transform: translateY(-2px);
|
|
|
- }
|
|
|
-
|
|
|
- .camera-btn.capture {
|
|
|
- background: #ff6b6b;
|
|
|
- }
|
|
|
-
|
|
|
- .camera-btn.switch {
|
|
|
- background: #4ecdc4;
|
|
|
- }
|
|
|
-
|
|
|
- .upload-zone {
|
|
|
- height: 200px;
|
|
|
- border: 2px dashed #dee2e6;
|
|
|
- border-radius: 12px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .upload-zone:hover {
|
|
|
- border-color: #667eea;
|
|
|
- background: #f8f9ff;
|
|
|
- }
|
|
|
-
|
|
|
- .upload-icon {
|
|
|
- font-size: 36px;
|
|
|
- margin-bottom: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .upload-text {
|
|
|
- font-weight: 600;
|
|
|
- margin-bottom: 5px;
|
|
|
- }
|
|
|
-
|
|
|
- .upload-hint {
|
|
|
- font-size: 12px;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
-
|
|
|
- .crop-area {
|
|
|
- margin-top: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .crop-container {
|
|
|
- position: relative;
|
|
|
- height: 300px;
|
|
|
- background: #f8f9fa;
|
|
|
- border-radius: 12px;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- .crop-controls {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- gap: 10px;
|
|
|
- margin-top: 15px;
|
|
|
- }
|
|
|
-
|
|
|
- .crop-btn {
|
|
|
- padding: 8px 16px;
|
|
|
- border: 1px solid #dee2e6;
|
|
|
- border-radius: 6px;
|
|
|
- background: white;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .crop-btn.confirm {
|
|
|
- background: #28a745;
|
|
|
- color: white;
|
|
|
- border-color: #28a745;
|
|
|
- }
|
|
|
-
|
|
|
- /* 姿势校准样式 */
|
|
|
- .pose-calibration {
|
|
|
- margin-top: 25px;
|
|
|
- padding: 20px;
|
|
|
- background: #f8f9fa;
|
|
|
- border-radius: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .calibration-display {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: 1fr 1fr;
|
|
|
- gap: 20px;
|
|
|
- margin: 20px 0;
|
|
|
- }
|
|
|
-
|
|
|
- .body-keypoints {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .keypoint {
|
|
|
- padding: 10px;
|
|
|
- background: white;
|
|
|
- border-radius: 8px;
|
|
|
- border-left: 4px solid #28a745;
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
-
|
|
|
- .calibration-status {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .status-item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 10px;
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
-
|
|
|
- .status-icon {
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
-
|
|
|
- .calibration-actions {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- gap: 15px;
|
|
|
- margin-top: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .calib-btn {
|
|
|
- padding: 10px 20px;
|
|
|
- border: 1px solid #dee2e6;
|
|
|
- border-radius: 8px;
|
|
|
- background: white;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .calib-btn.next {
|
|
|
- background: #28a745;
|
|
|
- color: white;
|
|
|
- border-color: #28a745;
|
|
|
- }
|
|
|
-
|
|
|
- /* 服装选择器样式 */
|
|
|
- .clothing-tabs {
|
|
|
- display: flex;
|
|
|
- margin-bottom: 25px;
|
|
|
- border-bottom: 1px solid #e9ecef;
|
|
|
- }
|
|
|
-
|
|
|
- .clothing-tab {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- gap: 8px;
|
|
|
- padding: 15px 10px;
|
|
|
- cursor: pointer;
|
|
|
- border-bottom: 2px solid transparent;
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .clothing-tab.active {
|
|
|
- border-bottom-color: #667eea;
|
|
|
- color: #667eea;
|
|
|
- }
|
|
|
-
|
|
|
- .tab-icon {
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
-
|
|
|
- .tab-text {
|
|
|
- font-weight: 600;
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
-
|
|
|
- .tab-count {
|
|
|
- background: #e9ecef;
|
|
|
- color: #666;
|
|
|
- padding: 2px 6px;
|
|
|
- border-radius: 10px;
|
|
|
- font-size: 11px;
|
|
|
- }
|
|
|
-
|
|
|
- .clothing-tab.active .tab-count {
|
|
|
- background: #667eea;
|
|
|
- color: white;
|
|
|
- }
|
|
|
-
|
|
|
- .design-grid, .trending-grid, .brand-grid {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
|
|
- gap: 15px;
|
|
|
- }
|
|
|
-
|
|
|
- .design-item, .trending-item, .brand-item {
|
|
|
- background: white;
|
|
|
- border-radius: 12px;
|
|
|
- overflow: hidden;
|
|
|
- box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .design-item:hover, .trending-item:hover, .brand-item:hover {
|
|
|
- transform: translateY(-5px);
|
|
|
- box-shadow: 0 5px 20px rgba(0,0,0,0.15);
|
|
|
- }
|
|
|
-
|
|
|
- .design-preview, .trending-preview, .brand-preview {
|
|
|
- position: relative;
|
|
|
- height: 120px;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- .design-image, .trending-image, .brand-image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- object-fit: cover;
|
|
|
- }
|
|
|
-
|
|
|
- .design-overlay {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- background: rgba(0,0,0,0.7);
|
|
|
- color: white;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- opacity: 0;
|
|
|
- transition: opacity 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .design-item:hover .design-overlay {
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
-
|
|
|
- .preview-btn {
|
|
|
- padding: 6px 12px;
|
|
|
- background: #667eea;
|
|
|
- border-radius: 6px;
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
-
|
|
|
- .design-info, .trending-info, .brand-item-info {
|
|
|
- padding: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .design-name, .trending-name, .item-name {
|
|
|
- font-weight: 600;
|
|
|
- font-size: 13px;
|
|
|
- margin-bottom: 4px;
|
|
|
- }
|
|
|
-
|
|
|
- .design-meta, .trending-author {
|
|
|
- font-size: 11px;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
-
|
|
|
- .trending-stats {
|
|
|
- position: absolute;
|
|
|
- top: 8px;
|
|
|
- right: 8px;
|
|
|
- display: flex;
|
|
|
- gap: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .stat {
|
|
|
- background: rgba(0,0,0,0.7);
|
|
|
- color: white;
|
|
|
- padding: 4px 6px;
|
|
|
- border-radius: 4px;
|
|
|
- font-size: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .brand-tag {
|
|
|
- position: absolute;
|
|
|
- top: 8px;
|
|
|
- left: 8px;
|
|
|
- background: #ff6b6b;
|
|
|
- color: white;
|
|
|
- padding: 4px 8px;
|
|
|
- border-radius: 4px;
|
|
|
- font-size: 10px;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
-
|
|
|
- .item-price {
|
|
|
- color: #ff6b6b;
|
|
|
- font-weight: 700;
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .trending-filter {
|
|
|
- margin-bottom: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .filter-select {
|
|
|
- padding: 8px 12px;
|
|
|
- border: 1px solid #dee2e6;
|
|
|
- border-radius: 6px;
|
|
|
- background: white;
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
-
|
|
|
- .brand-collection {
|
|
|
- margin-bottom: 25px;
|
|
|
- }
|
|
|
-
|
|
|
- .brand-header {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 15px;
|
|
|
- margin-bottom: 20px;
|
|
|
- padding: 15px;
|
|
|
- background: #f8f9fa;
|
|
|
- border-radius: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .brand-logo {
|
|
|
- font-size: 32px;
|
|
|
- }
|
|
|
-
|
|
|
- .brand-name {
|
|
|
- font-weight: 700;
|
|
|
- font-size: 16px;
|
|
|
- margin-bottom: 4px;
|
|
|
- }
|
|
|
-
|
|
|
- .brand-desc {
|
|
|
- font-size: 12px;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
-
|
|
|
- .clothing-actions, .fitting-actions {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- margin-top: 25px;
|
|
|
- }
|
|
|
-
|
|
|
- .clothing-btn, .fitting-btn {
|
|
|
- padding: 12px 24px;
|
|
|
- border: 1px solid #dee2e6;
|
|
|
- border-radius: 8px;
|
|
|
- background: white;
|
|
|
- cursor: pointer;
|
|
|
- font-weight: 600;
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .clothing-btn.next, .fitting-btn.next {
|
|
|
- background: #28a745;
|
|
|
- color: white;
|
|
|
- border-color: #28a745;
|
|
|
- }
|
|
|
-
|
|
|
- .clothing-btn.back, .fitting-btn.back {
|
|
|
- background: #6c757d;
|
|
|
- color: white;
|
|
|
- border-color: #6c757d;
|
|
|
- }
|
|
|
-
|
|
|
- /* 试衣展示系统样式 */
|
|
|
- .fitting-display {
|
|
|
- margin-bottom: 30px;
|
|
|
- }
|
|
|
-
|
|
|
- .fitting-viewport {
|
|
|
- height: 400px;
|
|
|
- background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
|
|
- border-radius: 15px;
|
|
|
- position: relative;
|
|
|
- overflow: hidden;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
-
|
|
|
- .user-photo-layer, .clothing-layer {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
-
|
|
|
- .photo-placeholder, .clothing-placeholder {
|
|
|
- font-size: 16px;
|
|
|
- color: #666;
|
|
|
- background: rgba(255,255,255,0.8);
|
|
|
- padding: 20px;
|
|
|
- border-radius: 12px;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .fitting-indicators {
|
|
|
- position: absolute;
|
|
|
- bottom: 20px;
|
|
|
- left: 20px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .fit-indicator {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 8px;
|
|
|
- background: rgba(255,255,255,0.9);
|
|
|
- padding: 8px 12px;
|
|
|
- border-radius: 8px;
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .fit-indicator.active {
|
|
|
- background: rgba(102, 126, 234, 0.9);
|
|
|
- color: white;
|
|
|
- }
|
|
|
-
|
|
|
- .indicator-icon {
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
-
|
|
|
- /* 交互控制面板样式 */
|
|
|
- .interaction-panel {
|
|
|
- background: #f8f9fa;
|
|
|
- border-radius: 15px;
|
|
|
- padding: 20px;
|
|
|
- margin-bottom: 25px;
|
|
|
- }
|
|
|
-
|
|
|
- .control-sections {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: 1fr;
|
|
|
- gap: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .control-section {
|
|
|
- background: white;
|
|
|
- padding: 15px;
|
|
|
- border-radius: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .section-title {
|
|
|
- font-weight: 600;
|
|
|
- font-size: 14px;
|
|
|
- margin-bottom: 15px;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
-
|
|
|
- .rotation-controls, .lighting-controls, .compare-controls {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- gap: 10px;
|
|
|
- flex-wrap: wrap;
|
|
|
- }
|
|
|
-
|
|
|
- .rotation-btn, .lighting-btn, .compare-btn {
|
|
|
- padding: 8px 16px;
|
|
|
- border: 1px solid #dee2e6;
|
|
|
- border-radius: 8px;
|
|
|
- background: white;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- font-size: 12px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 6px;
|
|
|
- }
|
|
|
-
|
|
|
- .rotation-btn:hover, .lighting-btn:hover, .compare-btn:hover {
|
|
|
- background: #f8f9fa;
|
|
|
- transform: translateY(-2px);
|
|
|
- }
|
|
|
-
|
|
|
- .lighting-btn.active, .compare-btn.active {
|
|
|
- background: #667eea;
|
|
|
- color: white;
|
|
|
- border-color: #667eea;
|
|
|
- }
|
|
|
-
|
|
|
- .gesture-hint {
|
|
|
- text-align: center;
|
|
|
- font-size: 11px;
|
|
|
- color: #666;
|
|
|
- margin-top: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .light-icon, .compare-icon {
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
-
|
|
|
- /* 输出功能样式 */
|
|
|
- .output-panel {
|
|
|
- background: white;
|
|
|
- border-radius: 15px;
|
|
|
- padding: 20px;
|
|
|
- border: 2px solid #e9ecef;
|
|
|
- margin-bottom: 25px;
|
|
|
- }
|
|
|
-
|
|
|
- .output-actions {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: 1fr;
|
|
|
- gap: 15px;
|
|
|
- }
|
|
|
-
|
|
|
- .output-btn {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 15px;
|
|
|
- padding: 15px;
|
|
|
- border: 2px solid #e9ecef;
|
|
|
- border-radius: 12px;
|
|
|
- background: white;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .output-btn:hover {
|
|
|
- border-color: #667eea;
|
|
|
- background: #f8f9ff;
|
|
|
- transform: translateY(-2px);
|
|
|
- }
|
|
|
-
|
|
|
- .output-btn.save {
|
|
|
- border-color: #28a745;
|
|
|
- }
|
|
|
-
|
|
|
- .output-btn.share {
|
|
|
- border-color: #17a2b8;
|
|
|
- }
|
|
|
-
|
|
|
- .output-btn.purchase {
|
|
|
- border-color: #ff6b6b;
|
|
|
- }
|
|
|
-
|
|
|
- .output-icon {
|
|
|
- font-size: 24px;
|
|
|
- flex-shrink: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .output-text {
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
-
|
|
|
- .output-title {
|
|
|
- font-weight: 600;
|
|
|
- font-size: 14px;
|
|
|
- margin-bottom: 4px;
|
|
|
- }
|
|
|
-
|
|
|
- .output-desc {
|
|
|
- font-size: 12px;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
-
|
|
|
- .fitting-btn.retry {
|
|
|
- background: #ffc107;
|
|
|
- color: #212529;
|
|
|
- border-color: #ffc107;
|
|
|
- }
|
|
|
-
|
|
|
- /* 移动端适配 */
|
|
|
- @media (max-width: 768px) {
|
|
|
- .fitting-flow-nav {
|
|
|
- padding: 0 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .flow-step {
|
|
|
- margin: 0 5px;
|
|
|
- padding: 10px 15px;
|
|
|
- min-width: 60px;
|
|
|
- }
|
|
|
-
|
|
|
- .step-icon {
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
-
|
|
|
- .step-text {
|
|
|
- font-size: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .upload-methods {
|
|
|
- grid-template-columns: 1fr;
|
|
|
- }
|
|
|
-
|
|
|
- .design-grid, .trending-grid, .brand-grid {
|
|
|
- grid-template-columns: repeat(2, 1fr);
|
|
|
- }
|
|
|
-
|
|
|
- .control-sections {
|
|
|
- grid-template-columns: 1fr;
|
|
|
- }
|
|
|
-
|
|
|
- .rotation-controls, .lighting-controls, .compare-controls {
|
|
|
- justify-content: space-around;
|
|
|
- }
|
|
|
-
|
|
|
- .clothing-actions, .fitting-actions {
|
|
|
- flex-direction: column;
|
|
|
- gap: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .clothing-btn, .fitting-btn {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
- </style>
|
|
|
-</head>
|
|
|
-<body>
|
|
|
- <!-- 登录注册欢迎页面 -->
|
|
|
- <div id="auth-screen" class="auth-screen">
|
|
|
- <div class="auth-container">
|
|
|
- <div class="auth-header">
|
|
|
- <div class="brand-logo">
|
|
|
- <div class="logo-icon">✨</div>
|
|
|
- <h1>FashionCraft</h1>
|
|
|
- <p>让创意穿在身上</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="auth-content">
|
|
|
- <div class="welcome-message">
|
|
|
- <h2>欢迎来到时尚设计世界</h2>
|
|
|
- <p>登录开启您的专属设计之旅</p>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="auth-actions">
|
|
|
- <button class="auth-btn primary" onclick="showLoginForm()">
|
|
|
- <span class="btn-icon">🔑</span>
|
|
|
- <span>立即登录</span>
|
|
|
- </button>
|
|
|
- <button class="auth-btn secondary" onclick="showRegisterForm()">
|
|
|
- <span class="btn-icon">✍️</span>
|
|
|
- <span>注册账户</span>
|
|
|
- </button>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="auth-features">
|
|
|
- <div class="feature-item">
|
|
|
- <div class="feature-icon">🎨</div>
|
|
|
- <div class="feature-text">
|
|
|
- <div class="feature-title">3D设计中心</div>
|
|
|
- <div class="feature-desc">专业级颜色DIY设计器</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="feature-item">
|
|
|
- <div class="feature-icon">🤖</div>
|
|
|
- <div class="feature-text">
|
|
|
- <div class="feature-title">AI智能推荐</div>
|
|
|
- <div class="feature-desc">个性化搭配建议</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="feature-item">
|
|
|
- <div class="feature-icon">👕</div>
|
|
|
- <div class="feature-text">
|
|
|
- <div class="feature-title">3D试衣间</div>
|
|
|
- <div class="feature-desc">虚拟试穿体验</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="auth-footer">
|
|
|
- <div class="version-info">v1.0.0</div>
|
|
|
- <div class="copyright">© 2025 FashionCraft</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 主要应用容器 -->
|
|
|
- <div class="app-container" id="main-app" style="display: none;">
|
|
|
- <!-- 首页 -->
|
|
|
- <div id="home-page" class="page">
|
|
|
- <header class="header">
|
|
|
- <div class="header-content">
|
|
|
- <h1>FashionCraft</h1>
|
|
|
- <p>让创意穿在身上</p>
|
|
|
- </div>
|
|
|
- </header>
|
|
|
-
|
|
|
- <main class="main-content">
|
|
|
- <!-- 轮播区域 -->
|
|
|
- <section class="banner-section">
|
|
|
- <div class="banner-slider" id="bannerSlider">
|
|
|
- <div class="banner-slide">
|
|
|
- <div>
|
|
|
- <div style="font-size: 24px; margin-bottom: 10px;">🎨</div>
|
|
|
- <div>春季新品发布</div>
|
|
|
- <div style="font-size: 14px; opacity: 0.8;">个性化设计，独一无二</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="banner-slide" style="background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);">
|
|
|
- <div>
|
|
|
- <div style="font-size: 24px; margin-bottom: 10px;">✨</div>
|
|
|
- <div>AI智能搭配</div>
|
|
|
- <div style="font-size: 14px; opacity: 0.8;">科技赋能时尚创意</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="banner-slide" style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);">
|
|
|
- <div>
|
|
|
- <div style="font-size: 24px; margin-bottom: 10px;">🏆</div>
|
|
|
- <div>设计大赛进行中</div>
|
|
|
- <div style="font-size: 14px; opacity: 0.8;">万元奖金等你来拿</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="banner-indicators">
|
|
|
- <div class="indicator active" data-slide="0"></div>
|
|
|
- <div class="indicator" data-slide="1"></div>
|
|
|
- <div class="indicator" data-slide="2"></div>
|
|
|
- </div>
|
|
|
- </section>
|
|
|
-
|
|
|
- <!-- 快速设计入口 -->
|
|
|
- <section class="quick-design" onclick="showDesignModal()">
|
|
|
- <h2>开始设计</h2>
|
|
|
- <p>点击开启你的创意之旅</p>
|
|
|
- </section>
|
|
|
-
|
|
|
- <!-- 热门作品 -->
|
|
|
- <section class="popular-works">
|
|
|
- <h3 class="section-title">热门作品</h3>
|
|
|
- <div class="works-grid">
|
|
|
- <div class="work-item" onclick="showWorkDetail('森系小清新')">
|
|
|
- <div class="work-image">🌿</div>
|
|
|
- <div class="work-info">
|
|
|
- <div class="work-title">森系小清新</div>
|
|
|
- <div class="work-stats">
|
|
|
- <span>❤️ 2.3k</span>
|
|
|
- <span>💬 186</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="work-item" onclick="showWorkDetail('复古摩登')">
|
|
|
- <div class="work-image" style="background: linear-gradient(45deg, #ffd89b 0%, #19547b 100%);">🎭</div>
|
|
|
- <div class="work-info">
|
|
|
- <div class="work-title">复古摩登</div>
|
|
|
- <div class="work-stats">
|
|
|
- <span>❤️ 1.8k</span>
|
|
|
- <span>💬 142</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="work-item" onclick="showWorkDetail('未来科技')">
|
|
|
- <div class="work-image" style="background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);">🚀</div>
|
|
|
- <div class="work-info">
|
|
|
- <div class="work-title">未来科技</div>
|
|
|
- <div class="work-stats">
|
|
|
- <span>❤️ 3.1k</span>
|
|
|
- <span>💬 256</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="work-item" onclick="showWorkDetail('简约现代')">
|
|
|
- <div class="work-image" style="background: linear-gradient(45deg, #ff9a9e 0%, #fecfef 100%);">🏛️</div>
|
|
|
- <div class="work-info">
|
|
|
- <div class="work-title">简约现代</div>
|
|
|
- <div class="work-stats">
|
|
|
- <span>❤️ 1.5k</span>
|
|
|
- <span>💬 98</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </section>
|
|
|
-
|
|
|
- <!-- AI推荐引擎入口 -->
|
|
|
- <section class="ai-recommend-engine">
|
|
|
- <div class="ai-engine-card">
|
|
|
- <div class="ai-engine-header">
|
|
|
- <div class="ai-brand">
|
|
|
- <span class="ai-logo">🤖</span>
|
|
|
- <div class="ai-brand-text">
|
|
|
- <h3>AI时尚顾问 <span style="font-size: 10px; background: linear-gradient(45deg, #667eea, #764ba2); padding: 1px 4px; border-radius: 6px; color: white;">DeepSeek</span></h3>
|
|
|
- <p>专业搭配 · 智能推荐</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="ai-status">
|
|
|
- <span class="status-dot"></span>
|
|
|
- <span class="status-text">在线</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="ai-quick-actions">
|
|
|
- <div class="quick-action" onclick="openAIChat('occasion')">
|
|
|
- <span class="action-icon">🎯</span>
|
|
|
- <span class="action-text">场合搭配</span>
|
|
|
- </div>
|
|
|
- <div class="quick-action" onclick="openAIChat('color')">
|
|
|
- <span class="action-icon">🎨</span>
|
|
|
- <span class="action-text">配色建议</span>
|
|
|
- </div>
|
|
|
- <div class="quick-action" onclick="openAIChat('style')">
|
|
|
- <span class="action-icon">✨</span>
|
|
|
- <span class="action-text">风格分析</span>
|
|
|
- </div>
|
|
|
- <div class="quick-action" onclick="openAIChat('free')">
|
|
|
- <span class="action-icon">💬</span>
|
|
|
- <span class="action-text">自由对话</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
-
|
|
|
- </div>
|
|
|
- </section>
|
|
|
- </main>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 设计中心页面 -->
|
|
|
- <div id="design-page" class="page design-tools">
|
|
|
- <header class="header">
|
|
|
- <div class="header-content">
|
|
|
- <h1>3D设计中心</h1>
|
|
|
- <p>专业级颜色DIY设计器</p>
|
|
|
- </div>
|
|
|
- </header>
|
|
|
-
|
|
|
- <main class="main-content">
|
|
|
- <!-- 实时3D预览系统 -->
|
|
|
- <div class="design-preview-system">
|
|
|
- <div class="preview-container">
|
|
|
- <div class="preview-3d-enhanced">
|
|
|
- <div class="model-3d-wrapper">
|
|
|
- <div class="clothing-preview" id="main3DModel">
|
|
|
- <div class="clothing-layer" id="layer-s1">
|
|
|
- <img src="切片图共7个/切片图共7个/蓝色/S1.png" alt="S1部位" class="part-image" data-part="s1">
|
|
|
- </div>
|
|
|
- <div class="clothing-layer" id="layer-t1">
|
|
|
- <img src="切片图共7个/切片图共7个/蓝色/T1.png" alt="T1部位" class="part-image" data-part="t1">
|
|
|
- </div>
|
|
|
- <div class="clothing-layer" id="layer-y1">
|
|
|
- <img src="切片图共7个/切片图共7个/蓝色/Y1.png" alt="Y1部位" class="part-image" data-part="y1">
|
|
|
- </div>
|
|
|
- <div class="clothing-layer" id="layer-z1">
|
|
|
- <img src="切片图共7个/切片图共7个/蓝色/Z1.png" alt="Z1部位" class="part-image" data-part="z1">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="model-highlights" id="modelHighlights"></div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 3D控制面板 -->
|
|
|
- <div class="preview-controls">
|
|
|
- <div class="control-group">
|
|
|
- <button class="control-btn" onclick="rotateModel('left')" title="向左旋转">↻</button>
|
|
|
- <button class="control-btn" onclick="rotateModel('right')" title="向右旋转">↺</button>
|
|
|
- <button class="control-btn" onclick="resetModelView()" title="重置视角">⌂</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
-
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 3D分区控制面板 -->
|
|
|
- <div class="zone-control-panel">
|
|
|
- <div class="panel-header">
|
|
|
- <h3>分区控制面板</h3>
|
|
|
- <button class="expand-btn" onclick="toggleZonePanel()">⌄</button>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="panel-content">
|
|
|
- <!-- 部位选择器（胶囊式Tab） -->
|
|
|
- <div class="body-part-selector">
|
|
|
- <div class="part-tabs">
|
|
|
- <button class="part-tab active" data-part="overall" onclick="selectBodyPart('overall')">
|
|
|
- <span class="tab-icon">🎯</span>
|
|
|
- <span class="tab-text">整体</span>
|
|
|
- </button>
|
|
|
- <button class="part-tab" data-part="s1" onclick="selectBodyPart('s1')">
|
|
|
- <span class="tab-icon">👔</span>
|
|
|
- <span class="tab-text">S1部位</span>
|
|
|
- </button>
|
|
|
- <button class="part-tab" data-part="t1" onclick="selectBodyPart('t1')">
|
|
|
- <span class="tab-icon">👕</span>
|
|
|
- <span class="tab-text">T1部位</span>
|
|
|
- </button>
|
|
|
- <button class="part-tab" data-part="y1" onclick="selectBodyPart('y1')">
|
|
|
- <span class="tab-icon">🎽</span>
|
|
|
- <span class="tab-text">Y1部位</span>
|
|
|
- </button>
|
|
|
- <button class="part-tab" data-part="z1" onclick="selectBodyPart('z1')">
|
|
|
- <span class="tab-icon">🧥</span>
|
|
|
- <span class="tab-text">Z1部位</span>
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
-
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 色盘管理系统 -->
|
|
|
- <div class="color-management-system">
|
|
|
- <div class="color-system-header">
|
|
|
- <h3>智能色盘系统</h3>
|
|
|
- <div class="color-actions">
|
|
|
- <button class="action-btn" onclick="syncColorToAll()" title="同步当前色到所有部位">🔄</button>
|
|
|
- <button class="action-btn" onclick="showColorHistory()" title="查看配色历史">📚</button>
|
|
|
- <button class="action-btn" onclick="saveColorScheme()" title="保存配色方案">💾</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 分区色盘记忆 -->
|
|
|
- <div class="zone-color-memory">
|
|
|
- <div class="current-part-info">
|
|
|
- <span class="part-label">当前部位：</span>
|
|
|
- <span class="part-name" id="currentPartName">整体</span>
|
|
|
- <span class="color-indicator" id="currentPartColor" style="background: #ff6b6b;"></span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 主色盘 -->
|
|
|
- <div class="master-color-picker">
|
|
|
- <div class="color-picker-section">
|
|
|
- <h4>基础色盘</h4>
|
|
|
- <div class="color-palette enhanced-palette">
|
|
|
- <!-- 原有颜色 -->
|
|
|
- <div class="color-swatch" style="background: #3498db" onclick="selectClothingColor('蓝色')" data-color="蓝色" title="蓝色"></div>
|
|
|
- <div class="color-swatch" style="background: #e91e63" onclick="selectClothingColor('粉色')" data-color="粉色" title="粉色"></div>
|
|
|
- <div class="color-swatch" style="background: #8bc34a" onclick="selectClothingColor('牛油果绿')" data-color="牛油果绿" title="牛油果绿"></div>
|
|
|
- <div class="color-swatch" style="background: #ffffff; border: 2px solid #ddd" onclick="selectClothingColor('白色')" data-color="白色" title="白色"></div>
|
|
|
- <div class="color-swatch" style="background: #2c3e50" onclick="selectClothingColor('黑色')" data-color="黑色" title="黑色"></div>
|
|
|
- <div class="color-swatch" style="background: #ff9800" onclick="selectClothingColor('橘色')" data-color="橘色" title="橘色"></div>
|
|
|
- <div class="color-swatch" style="background: #9e9e9e" onclick="selectClothingColor('利灰')" data-color="利灰" title="利灰"></div>
|
|
|
-
|
|
|
- <!-- 新增颜色 -->
|
|
|
- <div class="color-swatch" style="background: #1e40af" onclick="selectClothingColor('宝蓝色')" data-color="宝蓝色" title="宝蓝色"></div>
|
|
|
- <div class="color-swatch" style="background: #d2b48c" onclick="selectClothingColor('浅驼色')" data-color="浅驼色" title="浅驼色"></div>
|
|
|
- <div class="color-swatch" style="background: #9ca3af" onclick="selectClothingColor('测试色')" data-color="测试色" title="测试色"></div>
|
|
|
- <div class="color-swatch" style="background: #374151" onclick="selectClothingColor('深灰绿')" data-color="深灰绿" title="深灰绿"></div>
|
|
|
- <div class="color-swatch" style="background: #581c87" onclick="selectClothingColor('深紫色')" data-color="深紫色" title="深紫色"></div>
|
|
|
- <div class="color-swatch" style="background: #14532d" onclick="selectClothingColor('深绿色')" data-color="深绿色" title="深绿色"></div>
|
|
|
- <div class="color-swatch" style="background: #dc2626" onclick="selectClothingColor('真朱')" data-color="真朱" title="真朱"></div>
|
|
|
- <div class="color-swatch" style="background: #fbbf24" onclick="selectClothingColor('睿智金')" data-color="睿智金" title="睿智金"></div>
|
|
|
- <div class="color-swatch" style="background: #ef4444" onclick="selectClothingColor('红色')" data-color="红色" title="红色"></div>
|
|
|
- <div class="color-swatch" style="background: #84cc16" onclick="selectClothingColor('萌萌绿')" data-color="萌萌绿" title="萌萌绿"></div>
|
|
|
- <div class="color-swatch" style="background: #0891b2" onclick="selectClothingColor('蒂芙尼蓝')" data-color="蒂芙尼蓝" title="蒂芙尼蓝"></div>
|
|
|
- <div class="color-swatch" style="background: #3b82f6" onclick="selectClothingColor('长春花蓝')" data-color="长春花蓝" title="长春花蓝"></div>
|
|
|
- <div class="color-swatch" style="background: #6b46c1" onclick="selectClothingColor('青紫')" data-color="青紫" title="青紫"></div>
|
|
|
- <div class="color-swatch" style="background: #eab308" onclick="selectClothingColor('靓丽黄')" data-color="靓丽黄" title="靓丽黄"></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- <!-- 自定义颜色 -->
|
|
|
- <div class="color-picker-section">
|
|
|
- <h4>自定义颜色</h4>
|
|
|
- <div class="custom-color-controls">
|
|
|
- <input type="color" id="customColorPicker" value="#ff6b6b" onchange="selectCustomColor(this.value)">
|
|
|
- <button class="add-custom-btn" onclick="addCustomColor()">添加到色盘</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 历史配色库 -->
|
|
|
- <div class="color-history-section" id="colorHistorySection" style="display: none;">
|
|
|
- <h4>配色历史</h4>
|
|
|
- <div class="history-schemes">
|
|
|
- <div class="scheme-item" onclick="loadColorScheme('scheme1')">
|
|
|
- <div class="scheme-preview">
|
|
|
- <div class="scheme-color" style="background: #ff6b6b;"></div>
|
|
|
- <div class="scheme-color" style="background: #4ecdc4;"></div>
|
|
|
- <div class="scheme-color" style="background: #ffeaa7;"></div>
|
|
|
- </div>
|
|
|
- <span class="scheme-name">夏日活力</span>
|
|
|
- </div>
|
|
|
- <div class="scheme-item" onclick="loadColorScheme('scheme2')">
|
|
|
- <div class="scheme-preview">
|
|
|
- <div class="scheme-color" style="background: #667eea;"></div>
|
|
|
- <div class="scheme-color" style="background: #764ba2;"></div>
|
|
|
- <div class="scheme-color" style="background: #a29bfe;"></div>
|
|
|
- </div>
|
|
|
- <span class="scheme-name">深海紫韵</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 高级定制工具 -->
|
|
|
- <div class="advanced-tools">
|
|
|
- <div class="tools-header">
|
|
|
- <h3>高级定制</h3>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="advanced-tool-grid">
|
|
|
- <div class="advanced-tool-card" onclick="openAdvancedEmbroidery()">
|
|
|
- <span class="tool-icon">🧵</span>
|
|
|
- <div class="tool-content">
|
|
|
- <div class="tool-title">刺绣编辑器</div>
|
|
|
- <div class="tool-desc">支持按部位精确定位</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="advanced-tool-card" onclick="openTextureSystem()">
|
|
|
- <span class="tool-icon">🎨</span>
|
|
|
- <div class="tool-content">
|
|
|
- <div class="tool-title">贴图系统</div>
|
|
|
- <div class="tool-desc">可指定应用区域</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="advanced-tool-card" onclick="openPatternLibrary()">
|
|
|
- <span class="tool-icon">✨</span>
|
|
|
- <div class="tool-content">
|
|
|
- <div class="tool-title">图案库</div>
|
|
|
- <div class="tool-desc">海量设计素材</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="advanced-tool-card" onclick="openAIDesigner()">
|
|
|
- <span class="tool-icon">🤖</span>
|
|
|
- <div class="tool-content">
|
|
|
- <div class="tool-title">AI设计师</div>
|
|
|
- <div class="tool-desc">智能配色建议</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </main>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 3D试衣间页面 -->
|
|
|
- <div id="ar-page" class="page" style="display: none;">
|
|
|
- <header class="header">
|
|
|
- <div class="header-content">
|
|
|
- <h1>3D试衣间</h1>
|
|
|
- <p>智能试穿，完美贴合</p>
|
|
|
- </div>
|
|
|
- </header>
|
|
|
-
|
|
|
- <main class="main-content">
|
|
|
- <!-- 核心流程导航 -->
|
|
|
- <div class="fitting-flow-nav">
|
|
|
- <div class="flow-step active" data-step="upload">
|
|
|
- <div class="step-icon">📷</div>
|
|
|
- <div class="step-text">照片上传</div>
|
|
|
- </div>
|
|
|
- <div class="flow-step" data-step="clothing">
|
|
|
- <div class="step-icon">👕</div>
|
|
|
- <div class="step-text">服装选择</div>
|
|
|
- </div>
|
|
|
- <div class="flow-step" data-step="fitting">
|
|
|
- <div class="step-icon">✨</div>
|
|
|
- <div class="step-text">试衣展示</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 步骤1: 照片上传入口 -->
|
|
|
- <div class="fitting-step" id="upload-step">
|
|
|
- <div class="step-container">
|
|
|
- <h3 class="step-title">📷 照片上传入口</h3>
|
|
|
-
|
|
|
- <!-- 上传方式选择 -->
|
|
|
- <div class="upload-methods">
|
|
|
- <div class="upload-method active" data-method="camera" onclick="selectUploadMethod('camera')">
|
|
|
- <div class="method-icon">📹</div>
|
|
|
- <div class="method-title">拍照模式</div>
|
|
|
- <div class="method-desc">实时摄像头拍摄</div>
|
|
|
- </div>
|
|
|
- <div class="upload-method" data-method="gallery" onclick="selectUploadMethod('gallery')">
|
|
|
- <div class="method-icon">🖼️</div>
|
|
|
- <div class="method-title">相册选择</div>
|
|
|
- <div class="method-desc">支持裁剪调整</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 拍照模式界面 -->
|
|
|
- <div class="camera-interface" id="camera-mode">
|
|
|
- <div class="camera-preview">
|
|
|
- <div class="camera-placeholder">
|
|
|
- <div class="camera-icon">📷</div>
|
|
|
- <div class="camera-text">点击启动摄像头</div>
|
|
|
- <div class="camera-hint">请确保良好的光线条件</div>
|
|
|
- </div>
|
|
|
- <!-- 姿势引导框 -->
|
|
|
- <div class="pose-guide">
|
|
|
- <div class="guide-silhouette">🧑🦱</div>
|
|
|
- <div class="guide-text">请保持正面站立姿势</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="camera-controls">
|
|
|
- <button class="camera-btn" onclick="startCamera()">启动摄像头</button>
|
|
|
- <button class="camera-btn capture" onclick="capturePhoto()">拍摄照片</button>
|
|
|
- <button class="camera-btn switch" onclick="switchCamera()">切换摄像头</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 相册选择界面 -->
|
|
|
- <div class="gallery-interface" id="gallery-mode" style="display: none;">
|
|
|
- <div class="gallery-upload">
|
|
|
- <input type="file" id="photo-upload" accept="image/*" style="display: none;" onchange="handlePhotoUpload(this)">
|
|
|
- <div class="upload-zone" onclick="document.getElementById('photo-upload').click()">
|
|
|
- <div class="upload-icon">📁</div>
|
|
|
- <div class="upload-text">选择照片</div>
|
|
|
- <div class="upload-hint">支持JPG、PNG格式</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 图片裁剪区域 -->
|
|
|
- <div class="crop-area" id="crop-area" style="display: none;">
|
|
|
- <div class="crop-container">
|
|
|
- <canvas id="crop-canvas"></canvas>
|
|
|
- <div class="crop-overlay"></div>
|
|
|
- </div>
|
|
|
- <div class="crop-controls">
|
|
|
- <button class="crop-btn" onclick="resetCrop()">重置</button>
|
|
|
- <button class="crop-btn confirm" onclick="confirmCrop()">确认裁剪</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 姿势校准系统 -->
|
|
|
- <div class="pose-calibration" id="pose-calibration" style="display: none;">
|
|
|
- <h4>🎯 姿势校准</h4>
|
|
|
- <div class="calibration-display">
|
|
|
- <div class="body-keypoints">
|
|
|
- <div class="keypoint head" data-point="head">头部</div>
|
|
|
- <div class="keypoint shoulder-left" data-point="shoulder-left">左肩</div>
|
|
|
- <div class="keypoint shoulder-right" data-point="shoulder-right">右肩</div>
|
|
|
- <div class="keypoint waist" data-point="waist">腰部</div>
|
|
|
- <div class="keypoint hip" data-point="hip">臀部</div>
|
|
|
- </div>
|
|
|
- <div class="calibration-status">
|
|
|
- <div class="status-item">
|
|
|
- <span class="status-icon">✅</span>
|
|
|
- <span>人体识别成功</span>
|
|
|
- </div>
|
|
|
- <div class="status-item">
|
|
|
- <span class="status-icon">✅</span>
|
|
|
- <span>关键点定位完成</span>
|
|
|
- </div>
|
|
|
- <div class="status-item">
|
|
|
- <span class="status-icon">⏳</span>
|
|
|
- <span>身形分析中...</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="calibration-actions">
|
|
|
- <button class="calib-btn" onclick="recalibrate()">重新校准</button>
|
|
|
- <button class="calib-btn next" onclick="nextStep('clothing')">下一步：选择服装</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 步骤2: 服装选择器 -->
|
|
|
- <div class="fitting-step" id="clothing-step" style="display: none;">
|
|
|
- <div class="step-container">
|
|
|
- <h3 class="step-title">👕 服装选择器</h3>
|
|
|
-
|
|
|
- <!-- 服装分类标签 -->
|
|
|
- <div class="clothing-tabs">
|
|
|
- <div class="clothing-tab active" data-tab="my-designs" onclick="switchClothingTab('my-designs')">
|
|
|
- <span class="tab-icon">🎨</span>
|
|
|
- <span class="tab-text">我的设计</span>
|
|
|
- <span class="tab-count">12</span>
|
|
|
- </div>
|
|
|
- <div class="clothing-tab" data-tab="community" onclick="switchClothingTab('community')">
|
|
|
- <span class="tab-icon">🔥</span>
|
|
|
- <span class="tab-text">社区热门</span>
|
|
|
- <span class="tab-count">156</span>
|
|
|
- </div>
|
|
|
- <div class="clothing-tab" data-tab="brands" onclick="switchClothingTab('brands')">
|
|
|
- <span class="tab-icon">🏷️</span>
|
|
|
- <span class="tab-text">品牌合作</span>
|
|
|
- <span class="tab-count">89</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 我的设计列表 -->
|
|
|
- <div class="clothing-content" id="my-designs-content">
|
|
|
- <div class="design-grid">
|
|
|
- <div class="design-item" onclick="selectClothing('my-design-1')">
|
|
|
- <div class="design-preview">
|
|
|
- <img src="切片图/切片图/宝蓝色/宝蓝色.png" alt="我的设计1" class="design-image">
|
|
|
- <div class="design-overlay">
|
|
|
- <div class="preview-btn">预览效果</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="design-info">
|
|
|
- <div class="design-name">经典商务款</div>
|
|
|
- <div class="design-meta">创建于 2024-01-15</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="design-item" onclick="selectClothing('my-design-2')">
|
|
|
- <div class="design-preview">
|
|
|
- <img src="切片图/切片图/靓丽黄/靓丽黄.png" alt="我的设计2" class="design-image">
|
|
|
- <div class="design-overlay">
|
|
|
- <div class="preview-btn">预览效果</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="design-info">
|
|
|
- <div class="design-name">活力运动款</div>
|
|
|
- <div class="design-meta">创建于 2024-01-12</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="design-item" onclick="selectClothing('my-design-3')">
|
|
|
- <div class="design-preview">
|
|
|
- <img src="切片图/切片图/蒂芙尼蓝/蒂芙尼蓝.png" alt="我的设计3" class="design-image">
|
|
|
- <div class="design-overlay">
|
|
|
- <div class="preview-btn">预览效果</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="design-info">
|
|
|
- <div class="design-name">优雅晚装</div>
|
|
|
- <div class="design-meta">创建于 2024-01-10</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 社区热门列表 -->
|
|
|
- <div class="clothing-content" id="community-content" style="display: none;">
|
|
|
- <div class="trending-filter">
|
|
|
- <select class="filter-select">
|
|
|
- <option>今日热门</option>
|
|
|
- <option>本周热门</option>
|
|
|
- <option>本月热门</option>
|
|
|
- </select>
|
|
|
- </div>
|
|
|
- <div class="trending-grid">
|
|
|
- <div class="trending-item" onclick="selectClothing('trending-1')">
|
|
|
- <div class="trending-preview">
|
|
|
- <img src="切片图/切片图/深紫色/深紫色.png" alt="热门设计1" class="trending-image">
|
|
|
- <div class="trending-stats">
|
|
|
- <span class="stat">❤️ 2.3k</span>
|
|
|
- <span class="stat">💬 156</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="trending-info">
|
|
|
- <div class="trending-name">神秘紫韵</div>
|
|
|
- <div class="trending-author">by 设计师Anna</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="trending-item" onclick="selectClothing('trending-2')">
|
|
|
- <div class="trending-preview">
|
|
|
- <img src="切片图/切片图/萌萌绿/萌萌绿.png" alt="热门设计2" class="trending-image">
|
|
|
- <div class="trending-stats">
|
|
|
- <span class="stat">❤️ 1.8k</span>
|
|
|
- <span class="stat">💬 89</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="trending-info">
|
|
|
- <div class="trending-name">春日萌动</div>
|
|
|
- <div class="trending-author">by 创意大师Leo</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 品牌合作列表 -->
|
|
|
- <div class="clothing-content" id="brands-content" style="display: none;">
|
|
|
- <div class="brand-collection">
|
|
|
- <div class="brand-header">
|
|
|
- <div class="brand-logo">🏷️</div>
|
|
|
- <div class="brand-info">
|
|
|
- <div class="brand-name">时尚前线</div>
|
|
|
- <div class="brand-desc">2024春季新品系列</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="brand-grid">
|
|
|
- <div class="brand-item" onclick="selectClothing('brand-1')">
|
|
|
- <div class="brand-preview">
|
|
|
- <img src="切片图/切片图/真朱/真朱.png" alt="品牌设计1" class="brand-image">
|
|
|
- <div class="brand-tag">限量款</div>
|
|
|
- </div>
|
|
|
- <div class="brand-item-info">
|
|
|
- <div class="item-name">经典红韵</div>
|
|
|
- <div class="item-price">¥899</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="brand-item" onclick="selectClothing('brand-2')">
|
|
|
- <div class="brand-preview">
|
|
|
- <img src="切片图/切片图/睿智金/睿智金.png" alt="品牌设计2" class="brand-image">
|
|
|
- <div class="brand-tag">新品</div>
|
|
|
- </div>
|
|
|
- <div class="brand-item-info">
|
|
|
- <div class="item-name">智慧金辉</div>
|
|
|
- <div class="item-price">¥1299</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="clothing-actions">
|
|
|
- <button class="clothing-btn back" onclick="previousStep('upload')">上一步</button>
|
|
|
- <button class="clothing-btn next" onclick="nextStep('fitting')">开始试穿</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 步骤3: 试衣展示系统 -->
|
|
|
- <div class="fitting-step" id="fitting-step" style="display: none;">
|
|
|
- <div class="step-container">
|
|
|
- <h3 class="step-title">✨ 试衣展示系统</h3>
|
|
|
-
|
|
|
- <!-- 试穿预览区域 -->
|
|
|
- <div class="fitting-display">
|
|
|
- <div class="fitting-viewport">
|
|
|
- <div class="user-photo-layer">
|
|
|
- <div class="photo-placeholder">用户照片将显示在这里</div>
|
|
|
- </div>
|
|
|
- <div class="clothing-layer">
|
|
|
- <div class="clothing-placeholder">选中的服装将叠加在这里</div>
|
|
|
- </div>
|
|
|
- <!-- 智能贴合引擎指示器 -->
|
|
|
- <div class="fitting-indicators">
|
|
|
- <div class="fit-indicator active" data-status="processing">
|
|
|
- <span class="indicator-icon">🔄</span>
|
|
|
- <span class="indicator-text">布料物理模拟</span>
|
|
|
- </div>
|
|
|
- <div class="fit-indicator" data-status="completed">
|
|
|
- <span class="indicator-icon">✅</span>
|
|
|
- <span class="indicator-text">身形适配完成</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 交互控制面板 -->
|
|
|
- <div class="interaction-panel">
|
|
|
- <h4>🎮 交互控制面板</h4>
|
|
|
- <div class="control-sections">
|
|
|
- <!-- 旋转查看 -->
|
|
|
- <div class="control-section">
|
|
|
- <div class="section-title">旋转查看</div>
|
|
|
- <div class="rotation-controls">
|
|
|
- <button class="rotation-btn" onclick="rotateFitting('left')">⬅️ 左转</button>
|
|
|
- <button class="rotation-btn" onclick="rotateFitting('reset')">🎯 正面</button>
|
|
|
- <button class="rotation-btn" onclick="rotateFitting('right')">右转 ➡️</button>
|
|
|
- </div>
|
|
|
- <div class="gesture-hint">💡 支持手势滑动控制</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 光照调节 -->
|
|
|
- <div class="control-section">
|
|
|
- <div class="section-title">光照调节</div>
|
|
|
- <div class="lighting-controls">
|
|
|
- <button class="lighting-btn active" onclick="setFittingLight('natural')">
|
|
|
- <span class="light-icon">☀️</span>
|
|
|
- <span>自然光</span>
|
|
|
- </button>
|
|
|
- <button class="lighting-btn" onclick="setFittingLight('indoor')">
|
|
|
- <span class="light-icon">💡</span>
|
|
|
- <span>室内光</span>
|
|
|
- </button>
|
|
|
- <button class="lighting-btn" onclick="setFittingLight('studio')">
|
|
|
- <span class="light-icon">🎬</span>
|
|
|
- <span>摄影光</span>
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 对比模式 -->
|
|
|
- <div class="control-section">
|
|
|
- <div class="section-title">对比模式</div>
|
|
|
- <div class="compare-controls">
|
|
|
- <button class="compare-btn active" onclick="toggleCompare('split')">
|
|
|
- <span class="compare-icon">⚖️</span>
|
|
|
- <span>左右对比</span>
|
|
|
- </button>
|
|
|
- <button class="compare-btn" onclick="toggleCompare('overlay')">
|
|
|
- <span class="compare-icon">🔄</span>
|
|
|
- <span>叠加对比</span>
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 输出功能 -->
|
|
|
- <div class="output-panel">
|
|
|
- <h4>💾 输出功能</h4>
|
|
|
- <div class="output-actions">
|
|
|
- <button class="output-btn save" onclick="saveImageCard()">
|
|
|
- <span class="output-icon">💳</span>
|
|
|
- <div class="output-text">
|
|
|
- <div class="output-title">保存形象卡</div>
|
|
|
- <div class="output-desc">含服装信息和试穿效果</div>
|
|
|
- </div>
|
|
|
- </button>
|
|
|
- <button class="output-btn share" onclick="shareToCommunity()">
|
|
|
- <span class="output-icon">🌐</span>
|
|
|
- <div class="output-text">
|
|
|
- <div class="output-title">分享到社区</div>
|
|
|
- <div class="output-desc">让好友看到你的搭配</div>
|
|
|
- </div>
|
|
|
- </button>
|
|
|
- <button class="output-btn purchase" onclick="buyNow()">
|
|
|
- <span class="output-icon">🛒</span>
|
|
|
- <div class="output-text">
|
|
|
- <div class="output-title">一键购买</div>
|
|
|
- <div class="output-desc">立即下单同款服装</div>
|
|
|
- </div>
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="fitting-actions">
|
|
|
- <button class="fitting-btn back" onclick="previousStep('clothing')">重新选择</button>
|
|
|
- <button class="fitting-btn retry" onclick="retryFitting()">重新试穿</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </main>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 社区页面 -->
|
|
|
- <div id="community-page" class="page community-page">
|
|
|
- <div class="community-header">
|
|
|
- <div class="community-header-top">
|
|
|
- <h1>设计社区</h1>
|
|
|
- <!-- 新增：社区页面发布按钮 -->
|
|
|
- <button class="publish-btn" onclick="openUploadModal()">
|
|
|
- <span class="publish-icon">📝</span>
|
|
|
- 发布作品
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- <p>与全球设计师交流创意</p>
|
|
|
- <div class="community-stats">
|
|
|
- <div class="stat-item">
|
|
|
- <div class="stat-number">12.8k</div>
|
|
|
- <div class="stat-label">活跃用户</div>
|
|
|
- </div>
|
|
|
- <div class="stat-item">
|
|
|
- <div class="stat-number">3.2k</div>
|
|
|
- <div class="stat-label">今日作品</div>
|
|
|
- </div>
|
|
|
- <div class="stat-item">
|
|
|
- <div class="stat-number">156</div>
|
|
|
- <div class="stat-label">在线设计师</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <main class="main-content">
|
|
|
- <div style="margin: 20px;">
|
|
|
- <!-- 热门话题 -->
|
|
|
- <div style="background: white; border-radius: 15px; padding: 20px; margin-bottom: 20px; box-shadow: 0 5px 20px rgba(0,0,0,0.1);">
|
|
|
- <h4 style="margin-bottom: 15px; font-size: 16px;">🔥 热门话题</h4>
|
|
|
- <div style="display: flex; flex-wrap: wrap; gap: 8px;">
|
|
|
- <span style="background: #ff6b6b; color: white; padding: 6px 12px; border-radius: 20px; font-size: 12px; cursor: pointer;">#春季时尚</span>
|
|
|
- <span style="background: #4ecdc4; color: white; padding: 6px 12px; border-radius: 20px; font-size: 12px; cursor: pointer;">#环保设计</span>
|
|
|
- <span style="background: #45b7d1; color: white; padding: 6px 12px; border-radius: 20px; font-size: 12px; cursor: pointer;">#极简主义</span>
|
|
|
- <span style="background: #96ceb4; color: white; padding: 6px 12px; border-radius: 20px; font-size: 12px; cursor: pointer;">#复古回潮</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 设计师排行榜 -->
|
|
|
- <div style="background: white; border-radius: 15px; padding: 20px; margin-bottom: 20px; box-shadow: 0 5px 20px rgba(0,0,0,0.1);">
|
|
|
- <h4 style="margin-bottom: 15px; font-size: 16px;">🏆 本周设计师排行</h4>
|
|
|
- <div style="display: flex; flex-direction: column; gap: 12px;">
|
|
|
- <div style="display: flex; align-items: center; justify-content: space-between; padding: 10px; background: #f8f9fa; border-radius: 10px;">
|
|
|
- <div style="display: flex; align-items: center; gap: 12px;">
|
|
|
- <div style="width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(45deg, #ff6b6b, #ffa726); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold;">1</div>
|
|
|
- <div>
|
|
|
- <div style="font-weight: 600; font-size: 14px;">设计大师Alex</div>
|
|
|
- <div style="font-size: 12px; color: #666;">点赞数: 8.9k</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div style="font-size: 20px;">👑</div>
|
|
|
- </div>
|
|
|
- <div style="display: flex; align-items: center; justify-content: space-between; padding: 10px; background: #f8f9fa; border-radius: 10px;">
|
|
|
- <div style="display: flex; align-items: center; gap: 12px;">
|
|
|
- <div style="width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(45deg, #4ecdc4, #44a08d); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold;">2</div>
|
|
|
- <div>
|
|
|
- <div style="font-weight: 600; font-size: 14px;">时尚达人Lisa</div>
|
|
|
- <div style="font-size: 12px; color: #666;">点赞数: 7.2k</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div style="font-size: 20px;">🥈</div>
|
|
|
- </div>
|
|
|
- <div style="display: flex; align-items: center; justify-content: space-between; padding: 10px; background: #f8f9fa; border-radius: 10px;">
|
|
|
- <div style="display: flex; align-items: center; gap: 12px;">
|
|
|
- <div style="width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(45deg, #667eea, #764ba2); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold;">3</div>
|
|
|
- <div>
|
|
|
- <div style="font-weight: 600; font-size: 14px;">创意师Mike</div>
|
|
|
- <div style="font-size: 12px; color: #666;">点赞数: 5.8k</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div style="font-size: 20px;">🥉</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 最新作品 -->
|
|
|
- <div style="background: white; border-radius: 15px; padding: 20px; box-shadow: 0 5px 20px rgba(0,0,0,0.1);">
|
|
|
- <h4 style="margin-bottom: 15px; font-size: 16px;">✨ 最新作品</h4>
|
|
|
- <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;">
|
|
|
- <div style="background: linear-gradient(45deg, #a8edea 0%, #fed6e3 100%); border-radius: 12px; height: 120px; display: flex; align-items: center; justify-content: center; font-size: 36px; cursor: pointer; transition: all 0.3s ease;" onclick="likeWork(this)">🌸</div>
|
|
|
- <div style="background: linear-gradient(45deg, #667eea 0%, #764ba2 100%); border-radius: 12px; height: 120px; display: flex; align-items: center; justify-content: center; font-size: 36px; cursor: pointer; transition: all 0.3s ease;" onclick="likeWork(this)">⚡</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </main>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 个人中心页面 -->
|
|
|
- <div id="profile-page" class="page profile-page">
|
|
|
- <div class="profile-header">
|
|
|
- <div class="avatar">👤</div>
|
|
|
- <h2>时尚设计师</h2>
|
|
|
- <p>让创意成为生活的一部分</p>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="profile-menu">
|
|
|
- <div class="menu-item" onclick="showDrafts()">
|
|
|
- <div class="menu-left">
|
|
|
- <span class="menu-icon">🎨</span>
|
|
|
- <span>我的设计稿</span>
|
|
|
- </div>
|
|
|
- <span>></span>
|
|
|
- </div>
|
|
|
- <div class="menu-item" onclick="showMyWorks()">
|
|
|
- <div class="menu-left">
|
|
|
- <span class="menu-icon">📋</span>
|
|
|
- <span>我的作品</span>
|
|
|
- </div>
|
|
|
- <span>></span>
|
|
|
- </div>
|
|
|
- <div class="menu-item" onclick="showTryOnHistory()">
|
|
|
- <div class="menu-left">
|
|
|
- <span class="menu-icon">👕</span>
|
|
|
- <span>试穿历史</span>
|
|
|
- </div>
|
|
|
- <span>></span>
|
|
|
- </div>
|
|
|
- <div class="menu-item" onclick="showOrders()">
|
|
|
- <div class="menu-left">
|
|
|
- <span class="menu-icon">📦</span>
|
|
|
- <span>订单管理</span>
|
|
|
- </div>
|
|
|
- <span>></span>
|
|
|
- </div>
|
|
|
- <div class="menu-item" onclick="showCollections()">
|
|
|
- <div class="menu-left">
|
|
|
- <span class="menu-icon">❤️</span>
|
|
|
- <span>收藏夹</span>
|
|
|
- </div>
|
|
|
- <span>></span>
|
|
|
- </div>
|
|
|
- <div class="menu-item" onclick="showFollowers()">
|
|
|
- <div class="menu-left">
|
|
|
- <span class="menu-icon">👥</span>
|
|
|
- <span>粉丝管理</span>
|
|
|
- </div>
|
|
|
- <span>></span>
|
|
|
- </div>
|
|
|
- <div class="menu-item" onclick="showSettings()">
|
|
|
- <div class="menu-left">
|
|
|
- <span class="menu-icon">⚙️</span>
|
|
|
- <span>设置</span>
|
|
|
- </div>
|
|
|
- <span>></span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 底部导航 -->
|
|
|
- <nav class="bottom-nav">
|
|
|
- <div class="nav-item active" data-page="home">
|
|
|
- <div class="nav-icon">🏠</div>
|
|
|
- <div class="nav-text">首页</div>
|
|
|
- </div>
|
|
|
- <div class="nav-item" data-page="design">
|
|
|
- <div class="nav-icon">🎨</div>
|
|
|
- <div class="nav-text">设计</div>
|
|
|
- </div>
|
|
|
- <div class="nav-item" data-page="ar">
|
|
|
- <div class="nav-icon">📱</div>
|
|
|
- <div class="nav-text">试衣</div>
|
|
|
- </div>
|
|
|
- <div class="nav-item" data-page="community">
|
|
|
- <div class="nav-icon">👥</div>
|
|
|
- <div class="nav-text">社区</div>
|
|
|
- </div>
|
|
|
- <div class="nav-item" data-page="profile">
|
|
|
- <div class="nav-icon">👤</div>
|
|
|
- <div class="nav-text">我的</div>
|
|
|
- </div>
|
|
|
- </nav>
|
|
|
-
|
|
|
- <!-- AI对话悬浮球 -->
|
|
|
- <div id="aiFloatingBall" class="ai-floating-ball">
|
|
|
- <div class="floating-ball-icon">🤖</div>
|
|
|
- <div class="breathing-ring"></div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- AI全屏对话界面 -->
|
|
|
- <div id="aiChatModal" class="ai-chat-modal" style="display: none;">
|
|
|
- <div class="ai-chat-container">
|
|
|
- <!-- 对话头部 -->
|
|
|
- <div class="ai-chat-header">
|
|
|
- <div class="ai-chat-avatar">
|
|
|
- <span class="avatar-icon">🤖</span>
|
|
|
- <div class="avatar-status"></div>
|
|
|
- </div>
|
|
|
- <div class="ai-chat-info">
|
|
|
- <h3>AI时尚顾问 <span style="font-size: 12px; background: linear-gradient(45deg, #ff6b6b, #ffa726); padding: 2px 6px; border-radius: 8px; color: white;">DeepSeek驱动</span></h3>
|
|
|
- <p id="aiChatSubtitle">智能搭配助手在线中...</p>
|
|
|
- </div>
|
|
|
- <button class="ai-chat-close" onclick="closeAIChat()">✕</button>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 对话消息区 -->
|
|
|
- <div class="ai-chat-messages" id="aiChatMessages">
|
|
|
- <div class="ai-message">
|
|
|
- <div class="message-avatar">🤖</div>
|
|
|
- <div class="message-content">
|
|
|
- <div class="message-text ai-formatted">
|
|
|
- **你好！我是由DeepSeek AI驱动的专属时尚顾问** ✨<br><br>
|
|
|
- 我可以帮您：<br>
|
|
|
- • **服装搭配** - 根据场合推荐最佳组合<br>
|
|
|
- • **配色建议** - 打造和谐视觉效果<br>
|
|
|
- • **风格分析** - 找到最适合您的穿衣风格<br><br>
|
|
|
- > 💡 想聊什么时尚话题呢？我会为您提供专业的建议！
|
|
|
- </div>
|
|
|
- <div class="message-time">刚刚</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 快捷指令 -->
|
|
|
- <div class="ai-quick-commands" id="aiQuickCommands">
|
|
|
- <div class="quick-command" onclick="sendQuickCommand('帮我搭配一套商务装')">
|
|
|
- <span class="command-icon">👔</span>
|
|
|
- <span>商务装搭配</span>
|
|
|
- </div>
|
|
|
- <div class="quick-command" onclick="sendQuickCommand('推荐春季流行色')">
|
|
|
- <span class="command-icon">🌸</span>
|
|
|
- <span>春季流行色</span>
|
|
|
- </div>
|
|
|
- <div class="quick-command" onclick="sendQuickCommand('分析我的穿衣风格')">
|
|
|
- <span class="command-icon">✨</span>
|
|
|
- <span>风格分析</span>
|
|
|
- </div>
|
|
|
- <div class="quick-command" onclick="sendQuickCommand('约会穿什么好看')">
|
|
|
- <span class="command-icon">💕</span>
|
|
|
- <span>约会搭配</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 输入工具栏 -->
|
|
|
- <div class="ai-chat-input-area">
|
|
|
- <div class="input-toolbar">
|
|
|
- <button class="input-tool" onclick="startVoiceInput()" title="语音输入">
|
|
|
- <span class="tool-icon">🎤</span>
|
|
|
- </button>
|
|
|
- <button class="input-tool" onclick="uploadImage()" title="图片识别">
|
|
|
- <span class="tool-icon">📷</span>
|
|
|
- </button>
|
|
|
- <button class="input-tool" onclick="showEmoji()" title="表情">
|
|
|
- <span class="tool-icon">😊</span>
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- <div class="input-container">
|
|
|
- <input
|
|
|
- type="text"
|
|
|
- id="aiChatInput"
|
|
|
- placeholder="说说你的搭配需求..."
|
|
|
- onkeypress="handleChatInputKeypress(event)"
|
|
|
- >
|
|
|
- <button class="send-button" onclick="sendMessage()">
|
|
|
- <span class="send-icon">➤</span>
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- AI推荐结果页面 -->
|
|
|
- <div id="aiRecommendationModal" class="ai-recommendation-modal" style="display: none;">
|
|
|
- <div class="recommendation-container">
|
|
|
- <div class="recommendation-header">
|
|
|
- <h2>🎯 专属推荐方案</h2>
|
|
|
- <button class="close-recommendation" onclick="closeRecommendation()">✕</button>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="recommendation-content">
|
|
|
- <!-- 3D穿搭展示 -->
|
|
|
- <div class="recommendation-3d-section">
|
|
|
- <div class="recommendation-3d-viewer">
|
|
|
- <div class="model-3d-container">
|
|
|
- <div class="model-3d-display">👤</div>
|
|
|
- <div class="model-controls">
|
|
|
- <button class="model-control" onclick="rotateModel('left')">↶</button>
|
|
|
- <button class="model-control" onclick="rotateModel('right')">↷</button>
|
|
|
- <button class="model-control" onclick="resetModel()">⌂</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 方案选择器 -->
|
|
|
- <div class="scheme-selector">
|
|
|
- <h4>推荐方案</h4>
|
|
|
- <div class="scheme-tabs">
|
|
|
- <div class="scheme-tab active" onclick="selectScheme('scheme1')">方案1</div>
|
|
|
- <div class="scheme-tab" onclick="selectScheme('scheme2')">方案2</div>
|
|
|
- <div class="scheme-tab" onclick="selectScheme('scheme3')">方案3</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 配色原理说明 -->
|
|
|
- <div class="color-theory-section">
|
|
|
- <h4>🎨 配色原理解析</h4>
|
|
|
- <div class="theory-content" id="colorTheoryContent">
|
|
|
- <div class="theory-card">
|
|
|
- <div class="theory-icon">🎯</div>
|
|
|
- <div class="theory-text">
|
|
|
- <h5>主色调选择</h5>
|
|
|
- <p>基于您的肤色和喜好，选择了温暖的蓝色作为主色调，既显稳重又不失活力。</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="theory-card">
|
|
|
- <div class="theory-icon">🌈</div>
|
|
|
- <div class="theory-text">
|
|
|
- <h5>色彩搭配</h5>
|
|
|
- <p>采用邻近色搭配法，蓝色与紫色的组合营造出和谐优雅的视觉效果。</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="theory-card">
|
|
|
- <div class="theory-icon">✨</div>
|
|
|
- <div class="theory-text">
|
|
|
- <h5>层次感营造</h5>
|
|
|
- <p>通过深浅不同的蓝色系形成层次，增加整体造型的丰富度和立体感。</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 操作按钮 -->
|
|
|
- <div class="recommendation-actions">
|
|
|
- <button class="action-btn secondary" onclick="shareRecommendation()">
|
|
|
- <span class="btn-icon">📤</span>
|
|
|
- <span>分享方案</span>
|
|
|
- </button>
|
|
|
- <button class="action-btn secondary" onclick="saveRecommendation()">
|
|
|
- <span class="btn-icon">💾</span>
|
|
|
- <span>收藏方案</span>
|
|
|
- </button>
|
|
|
- <button class="action-btn primary" onclick="importToDesignCenter()">
|
|
|
- <span class="btn-icon">🎨</span>
|
|
|
- <span>导入设计中心</span>
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 模态框 -->
|
|
|
- <div id="modal" class="modal">
|
|
|
- <div class="modal-content">
|
|
|
- <h3 id="modalTitle">开始设计</h3>
|
|
|
- <p id="modalText">选择你想要设计的服装类型</p>
|
|
|
- <div class="modal-actions">
|
|
|
- <button class="btn btn-secondary" onclick="closeModal()">取消</button>
|
|
|
- <button class="btn btn-primary" onclick="startDesign()">开始</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 设置模态框 -->
|
|
|
- <div id="settingsModal" class="settings-modal">
|
|
|
- <div class="settings-modal-content">
|
|
|
- <div class="settings-header">
|
|
|
- <h2>设置</h2>
|
|
|
- <button class="close-btn" onclick="closeSettingsModal()">×</button>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="settings-body">
|
|
|
- <!-- 个人资料部分 -->
|
|
|
- <div class="settings-section">
|
|
|
- <h3>个人资料</h3>
|
|
|
- <div class="profile-info">
|
|
|
- <div class="profile-avatar">
|
|
|
- <div class="avatar-circle" onclick="changeAvatar()">
|
|
|
- <img id="userAvatar" src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'><circle cx='30' cy='30' r='30' fill='%23ff6b6b'/><circle cx='30' cy='22' r='8' fill='white'/><ellipse cx='30' cy='45' rx='15' ry='10' fill='white'/></svg>" alt="头像">
|
|
|
- <div class="avatar-edit">📷</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="profile-details">
|
|
|
- <div class="form-group">
|
|
|
- <label for="userName">用户名</label>
|
|
|
- <input type="text" id="userName" value="时尚设计师" placeholder="输入您的用户名">
|
|
|
- </div>
|
|
|
- <div class="form-group">
|
|
|
- <label for="userBio">个人简介</label>
|
|
|
- <textarea id="userBio" placeholder="介绍一下您自己...">热爱时尚设计，专注于创新与美学的完美结合</textarea>
|
|
|
- </div>
|
|
|
- <div class="form-group">
|
|
|
- <label for="userLocation">所在地</label>
|
|
|
- <input type="text" id="userLocation" value="上海" placeholder="您的所在城市">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 账户安全 -->
|
|
|
- <div class="settings-section">
|
|
|
- <h3>账户安全</h3>
|
|
|
- <div class="security-items">
|
|
|
- <div class="security-item" onclick="changePassword()">
|
|
|
- <div class="security-left">
|
|
|
- <span class="security-icon">🔒</span>
|
|
|
- <div>
|
|
|
- <div class="security-title">修改密码</div>
|
|
|
- <div class="security-desc">定期更新密码保护账户安全</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <span class="arrow">></span>
|
|
|
- </div>
|
|
|
- <div class="security-item" onclick="bindPhone()">
|
|
|
- <div class="security-left">
|
|
|
- <span class="security-icon">📱</span>
|
|
|
- <div>
|
|
|
- <div class="security-title">手机号绑定</div>
|
|
|
- <div class="security-desc">已绑定：138****8888</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <span class="arrow">></span>
|
|
|
- </div>
|
|
|
- <div class="security-item" onclick="bindEmail()">
|
|
|
- <div class="security-left">
|
|
|
- <span class="security-icon">📧</span>
|
|
|
- <div>
|
|
|
- <div class="security-title">邮箱绑定</div>
|
|
|
- <div class="security-desc">user@example.com</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <span class="arrow">></span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 隐私设置 -->
|
|
|
- <div class="settings-section">
|
|
|
- <h3>隐私设置</h3>
|
|
|
- <div class="privacy-items">
|
|
|
- <div class="privacy-item">
|
|
|
- <div class="privacy-left">
|
|
|
- <span class="privacy-icon">👁️</span>
|
|
|
- <div>
|
|
|
- <div class="privacy-title">作品可见性</div>
|
|
|
- <div class="privacy-desc">设置谁可以查看您的作品</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <select class="privacy-select">
|
|
|
- <option value="public">公开</option>
|
|
|
- <option value="followers">仅粉丝</option>
|
|
|
- <option value="private">私人</option>
|
|
|
- </select>
|
|
|
- </div>
|
|
|
- <div class="privacy-item">
|
|
|
- <div class="privacy-left">
|
|
|
- <span class="privacy-icon">🔔</span>
|
|
|
- <div>
|
|
|
- <div class="privacy-title">消息通知</div>
|
|
|
- <div class="privacy-desc">接收点赞、评论等通知</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <label class="switch">
|
|
|
- <input type="checkbox" checked>
|
|
|
- <span class="slider"></span>
|
|
|
- </label>
|
|
|
- </div>
|
|
|
- <div class="privacy-item">
|
|
|
- <div class="privacy-left">
|
|
|
- <span class="privacy-icon">📊</span>
|
|
|
- <div>
|
|
|
- <div class="privacy-title">数据分析</div>
|
|
|
- <div class="privacy-desc">允许匿名数据分析</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <label class="switch">
|
|
|
- <input type="checkbox" checked>
|
|
|
- <span class="slider"></span>
|
|
|
- </label>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 应用设置 -->
|
|
|
- <div class="settings-section">
|
|
|
- <h3>应用设置</h3>
|
|
|
- <div class="app-items">
|
|
|
- <div class="app-item" onclick="showAbout()">
|
|
|
- <div class="app-left">
|
|
|
- <span class="app-icon">ℹ️</span>
|
|
|
- <span class="app-title">关于应用</span>
|
|
|
- </div>
|
|
|
- <div class="app-right">
|
|
|
- <span class="version">v1.0.0</span>
|
|
|
- <span class="arrow">></span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="app-item" onclick="clearCache()">
|
|
|
- <div class="app-left">
|
|
|
- <span class="app-icon">🗑️</span>
|
|
|
- <span class="app-title">清除缓存</span>
|
|
|
- </div>
|
|
|
- <div class="app-right">
|
|
|
- <span class="cache-size">23.5MB</span>
|
|
|
- <span class="arrow">></span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="app-item" onclick="feedback()">
|
|
|
- <div class="app-left">
|
|
|
- <span class="app-icon">💬</span>
|
|
|
- <span class="app-title">意见反馈</span>
|
|
|
- </div>
|
|
|
- <span class="arrow">></span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="settings-footer">
|
|
|
- <button class="save-btn" onclick="saveSettings()">保存设置</button>
|
|
|
- <button class="logout-btn" onclick="confirmLogout()">退出登录</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 上传作品模态框 -->
|
|
|
- <div id="uploadModal" class="upload-modal">
|
|
|
- <div class="upload-modal-content">
|
|
|
- <!-- 步骤指示器 -->
|
|
|
- <div class="upload-steps">
|
|
|
- <div class="step active">
|
|
|
- <div class="step-number">1</div>
|
|
|
- <div class="step-label">选择类型</div>
|
|
|
- </div>
|
|
|
- <div class="step">
|
|
|
- <div class="step-number">2</div>
|
|
|
- <div class="step-label">上传内容</div>
|
|
|
- </div>
|
|
|
- <div class="step">
|
|
|
- <div class="step-number">3</div>
|
|
|
- <div class="step-label">作品信息</div>
|
|
|
- </div>
|
|
|
- <div class="step">
|
|
|
- <div class="step-number">4</div>
|
|
|
- <div class="step-label">发布设置</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 步骤1: 选择作品类型 -->
|
|
|
- <div class="upload-step active">
|
|
|
- <h3>选择作品类型</h3>
|
|
|
- <div class="work-types">
|
|
|
- <div class="work-type" data-type="design" onclick="selectWorkType('design')">
|
|
|
- <div class="type-icon">🎨</div>
|
|
|
- <div class="type-name">设计稿</div>
|
|
|
- <div class="type-desc">分享你的原创设计图稿</div>
|
|
|
- </div>
|
|
|
- <div class="work-type" data-type="photo" onclick="selectWorkType('photo')">
|
|
|
- <div class="type-icon">📸</div>
|
|
|
- <div class="type-name">实物照片</div>
|
|
|
- <div class="type-desc">展示制作完成的服装作品</div>
|
|
|
- </div>
|
|
|
- <div class="work-type" data-type="video" onclick="selectWorkType('video')">
|
|
|
- <div class="type-icon">🎬</div>
|
|
|
- <div class="type-name">视频展示</div>
|
|
|
- <div class="type-desc">动态展示服装效果</div>
|
|
|
- </div>
|
|
|
- <div class="work-type" data-type="3d" onclick="selectWorkType('3d')">
|
|
|
- <div class="type-icon">🎭</div>
|
|
|
- <div class="type-name">3D模型</div>
|
|
|
- <div class="type-desc">上传3D服装模型文件</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 步骤2: 上传内容 -->
|
|
|
- <div class="upload-step">
|
|
|
- <h3>上传内容</h3>
|
|
|
- <div class="upload-options">
|
|
|
- <!-- 文件上传区域 -->
|
|
|
- <div class="upload-section">
|
|
|
- <h4>📁 上传文件</h4>
|
|
|
- <div class="file-upload-area" onclick="triggerFileUpload()">
|
|
|
- <div class="upload-placeholder">
|
|
|
- <div class="upload-icon">📤</div>
|
|
|
- <div class="upload-text">点击上传文件</div>
|
|
|
- <div class="upload-hint">支持图片、视频格式，最多9个文件</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <input type="file" id="fileInput" multiple accept="image/*,video/*" style="display: none;" onchange="handleFileUpload(event)">
|
|
|
- <div id="uploadPreview" class="upload-preview"></div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 3D文件上传 -->
|
|
|
- <div class="upload-section" id="3dUploadSection" style="display: none;">
|
|
|
- <h4>🎭 上传3D模型</h4>
|
|
|
- <div class="file-upload-area" onclick="trigger3DUpload()">
|
|
|
- <div class="upload-placeholder">
|
|
|
- <div class="upload-icon">🎯</div>
|
|
|
- <div class="upload-text">上传3D模型文件</div>
|
|
|
- <div class="upload-hint">支持 .obj, .fbx, .gltf 格式</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <input type="file" id="file3DInput" accept=".obj,.fbx,.gltf" style="display: none;" onchange="handle3DUpload(event)">
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 从我的设计选择 -->
|
|
|
- <div class="upload-section">
|
|
|
- <h4>🎨 从我的设计选择</h4>
|
|
|
- <div class="my-designs-grid">
|
|
|
- <div class="design-item" onclick="selectFromMyDesigns(1)">
|
|
|
- <div class="design-preview">👕</div>
|
|
|
- <div class="design-name">春季T恤</div>
|
|
|
- </div>
|
|
|
- <div class="design-item" onclick="selectFromMyDesigns(2)">
|
|
|
- <div class="design-preview">👗</div>
|
|
|
- <div class="design-name">夏日连衣裙</div>
|
|
|
- </div>
|
|
|
- <div class="design-item" onclick="selectFromMyDesigns(3)">
|
|
|
- <div class="design-preview">🧥</div>
|
|
|
- <div class="design-name">秋季外套</div>
|
|
|
- </div>
|
|
|
- <div class="design-item" onclick="selectFromMyDesigns(4)">
|
|
|
- <div class="design-preview">👖</div>
|
|
|
- <div class="design-name">休闲裤</div>
|
|
|
- </div>
|
|
|
- <div class="design-item" onclick="selectFromMyDesigns(5)">
|
|
|
- <div class="design-preview">🧣</div>
|
|
|
- <div class="design-name">围巾设计</div>
|
|
|
- </div>
|
|
|
- <div class="design-item" onclick="selectFromMyDesigns(6)">
|
|
|
- <div class="design-preview">👒</div>
|
|
|
- <div class="design-name">帽子系列</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 步骤3: 作品信息 -->
|
|
|
- <div class="upload-step">
|
|
|
- <h3>作品信息</h3>
|
|
|
- <div class="description-form">
|
|
|
- <div class="form-group">
|
|
|
- <label for="workTitle">作品标题 *</label>
|
|
|
- <input type="text" id="workTitle" placeholder="给你的作品起个好听的名字" maxlength="50">
|
|
|
- <div class="char-count"><span id="titleCount">0</span>/50</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="form-group">
|
|
|
- <label for="workDescription">作品描述</label>
|
|
|
- <textarea id="workDescription" placeholder="介绍一下你的设计理念和创作过程..." maxlength="500"></textarea>
|
|
|
- <div class="char-count"><span id="descCount">0</span>/500</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="form-group">
|
|
|
- <label>选择分类</label>
|
|
|
- <select>
|
|
|
- <option value="">请选择分类</option>
|
|
|
- <option value="casual">休闲装</option>
|
|
|
- <option value="formal">正装</option>
|
|
|
- <option value="sport">运动装</option>
|
|
|
- <option value="evening">晚装</option>
|
|
|
- <option value="accessories">配饰</option>
|
|
|
- </select>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="tags-container">
|
|
|
- <label>添加标签</label>
|
|
|
- <div class="popular-tags">
|
|
|
- <span class="tag" onclick="toggleTag(this)">#时尚</span>
|
|
|
- <span class="tag" onclick="toggleTag(this)">#原创</span>
|
|
|
- <span class="tag" onclick="toggleTag(this)">#简约</span>
|
|
|
- <span class="tag" onclick="toggleTag(this)">#复古</span>
|
|
|
- <span class="tag" onclick="toggleTag(this)">#街头</span>
|
|
|
- <span class="tag" onclick="toggleTag(this)">#优雅</span>
|
|
|
- <span class="tag" onclick="toggleTag(this)">#运动</span>
|
|
|
- <span class="tag" onclick="toggleTag(this)">#环保</span>
|
|
|
- </div>
|
|
|
- <input type="text" id="customTag" placeholder="输入自定义标签后按回车" onkeypress="addCustomTag(event)">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 步骤4: 发布设置 -->
|
|
|
- <div class="upload-step">
|
|
|
- <h3>发布设置</h3>
|
|
|
- <div class="publish-settings">
|
|
|
- <div class="setting-group">
|
|
|
- <label>作品可见性</label>
|
|
|
- <div class="radio-group">
|
|
|
- <label class="radio-option">
|
|
|
- <input type="radio" name="visibility" value="public" checked>
|
|
|
- <div class="radio-custom"></div>
|
|
|
- <div class="option-content">
|
|
|
- <div class="option-title">公开</div>
|
|
|
- <div class="option-desc">所有人都可以查看你的作品</div>
|
|
|
- </div>
|
|
|
- </label>
|
|
|
- <label class="radio-option">
|
|
|
- <input type="radio" name="visibility" value="followers">
|
|
|
- <div class="radio-custom"></div>
|
|
|
- <div class="option-content">
|
|
|
- <div class="option-title">仅粉丝可见</div>
|
|
|
- <div class="option-desc">只有关注你的用户可以查看</div>
|
|
|
- </div>
|
|
|
- </label>
|
|
|
- <label class="radio-option">
|
|
|
- <input type="radio" name="visibility" value="private">
|
|
|
- <div class="radio-custom"></div>
|
|
|
- <div class="option-content">
|
|
|
- <div class="option-title">私密</div>
|
|
|
- <div class="option-desc">只有你自己可以查看</div>
|
|
|
- </div>
|
|
|
- </label>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="setting-group">
|
|
|
- <label>下载权限</label>
|
|
|
- <div class="radio-group">
|
|
|
- <label class="radio-option">
|
|
|
- <input type="radio" name="download" value="allow" checked>
|
|
|
- <div class="radio-custom"></div>
|
|
|
- <div class="option-content">
|
|
|
- <div class="option-title">允许下载</div>
|
|
|
- <div class="option-desc">其他用户可以下载你的作品</div>
|
|
|
- </div>
|
|
|
- </label>
|
|
|
- <label class="radio-option">
|
|
|
- <input type="radio" name="download" value="forbid">
|
|
|
- <div class="radio-custom"></div>
|
|
|
- <div class="option-content">
|
|
|
- <div class="option-title">禁止下载</div>
|
|
|
- <div class="option-desc">保护你的原创作品</div>
|
|
|
- </div>
|
|
|
- </label>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="setting-group">
|
|
|
- <label>其他设置</label>
|
|
|
- <label class="checkbox-option">
|
|
|
- <input type="checkbox" id="allowComments" checked>
|
|
|
- <div class="checkbox-custom"></div>
|
|
|
- <div class="option-content">
|
|
|
- <div class="option-title">允许评论</div>
|
|
|
- <div class="option-desc">其他用户可以对你的作品进行评论</div>
|
|
|
- </div>
|
|
|
- </label>
|
|
|
- <label class="checkbox-option">
|
|
|
- <input type="checkbox" id="copyrightAgree">
|
|
|
- <div class="checkbox-custom"></div>
|
|
|
- <div class="option-content">
|
|
|
- <div class="option-title">版权声明 *</div>
|
|
|
- <div class="option-desc">我确认拥有此作品的版权，并同意平台使用条款</div>
|
|
|
- </div>
|
|
|
- </label>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 模态框底部按钮 -->
|
|
|
- <div class="upload-modal-footer">
|
|
|
- <button class="btn btn-outline" onclick="closeUploadModal()">取消</button>
|
|
|
- <button class="btn btn-outline" id="prevBtn" onclick="prevStep()" style="display: none;">上一步</button>
|
|
|
- <button class="btn btn-primary" id="nextBtn" onclick="nextUploadStep()">下一步</button>
|
|
|
- <button class="btn btn-primary" id="publishBtn" onclick="publishWork()" style="display: none;">发布作品</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 草稿箱模态框 -->
|
|
|
- <div id="draftsModal" class="upload-modal">
|
|
|
- <div class="upload-modal-content drafts-content">
|
|
|
- <div style="padding: 20px 30px; border-bottom: 1px solid #e9ecef;">
|
|
|
- <h3>草稿箱</h3>
|
|
|
- <p style="color: #666; font-size: 14px; margin-top: 5px;">管理你的草稿作品</p>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="drafts-list">
|
|
|
- <div class="draft-item">
|
|
|
- <div class="draft-preview">👕</div>
|
|
|
- <div class="draft-info">
|
|
|
- <div class="draft-title">春季T恤设计</div>
|
|
|
- <div class="draft-time">保存于 2024-03-15</div>
|
|
|
- </div>
|
|
|
- <div class="draft-actions">
|
|
|
- <button onclick="editDraft(1)">编辑</button>
|
|
|
- <button onclick="deleteDraft(1)">删除</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="draft-item">
|
|
|
- <div class="draft-preview">👗</div>
|
|
|
- <div class="draft-info">
|
|
|
- <div class="draft-title">夏日连衣裙</div>
|
|
|
- <div class="draft-time">保存于 2024-03-14</div>
|
|
|
- </div>
|
|
|
- <div class="draft-actions">
|
|
|
- <button onclick="editDraft(2)">编辑</button>
|
|
|
- <button onclick="deleteDraft(2)">删除</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="draft-item">
|
|
|
- <div class="draft-preview">🧥</div>
|
|
|
- <div class="draft-info">
|
|
|
- <div class="draft-title">秋季外套概念</div>
|
|
|
- <div class="draft-time">保存于 2024-03-12</div>
|
|
|
- </div>
|
|
|
- <div class="draft-actions">
|
|
|
- <button onclick="editDraft(3)">编辑</button>
|
|
|
- <button onclick="deleteDraft(3)">删除</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="upload-modal-footer">
|
|
|
- <button class="btn btn-outline" onclick="closeDraftsModal()">关闭</button>
|
|
|
- <button class="btn btn-primary" onclick="openUploadModal(); closeDraftsModal();">新建作品</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 我的作品模态框 -->
|
|
|
- <div id="myWorksModal" class="upload-modal">
|
|
|
- <div class="upload-modal-content">
|
|
|
- <div style="padding: 20px 30px; border-bottom: 1px solid #e9ecef;">
|
|
|
- <h3>我的作品</h3>
|
|
|
- <p style="color: #666; font-size: 14px; margin-top: 5px;">管理你发布的作品</p>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 标签页 -->
|
|
|
- <div class="works-tabs">
|
|
|
- <div class="tab active" onclick="switchWorksTab('published')">已发布</div>
|
|
|
- <div class="tab" onclick="switchWorksTab('analytics')">数据分析</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 已发布作品 -->
|
|
|
- <div id="publishedWorks" class="works-content">
|
|
|
- <div class="work-item">
|
|
|
- <div class="work-preview">🌸</div>
|
|
|
- <div class="work-info">
|
|
|
- <div class="work-title">春季花朵印花T恤</div>
|
|
|
- <div class="work-stats">
|
|
|
- <span>❤️ 1.2k</span>
|
|
|
- <span>💬 89</span>
|
|
|
- <span>👁️ 5.6k</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="work-actions">
|
|
|
- <button onclick="editWork(1)">编辑</button>
|
|
|
- <button onclick="deleteWork(1)">删除</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="work-item">
|
|
|
- <div class="work-preview">⚡</div>
|
|
|
- <div class="work-info">
|
|
|
- <div class="work-title">未来科技风外套</div>
|
|
|
- <div class="work-stats">
|
|
|
- <span>❤️ 2.1k</span>
|
|
|
- <span>💬 156</span>
|
|
|
- <span>👁️ 8.9k</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="work-actions">
|
|
|
- <button onclick="editWork(2)">编辑</button>
|
|
|
- <button onclick="deleteWork(2)">删除</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="work-item">
|
|
|
- <div class="work-preview">🌿</div>
|
|
|
- <div class="work-info">
|
|
|
- <div class="work-title">环保材质连衣裙</div>
|
|
|
- <div class="work-stats">
|
|
|
- <span>❤️ 856</span>
|
|
|
- <span>💬 67</span>
|
|
|
- <span>👁️ 3.2k</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="work-actions">
|
|
|
- <button onclick="editWork(3)">编辑</button>
|
|
|
- <button onclick="deleteWork(3)">删除</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 数据分析 -->
|
|
|
- <div id="analyticsWorks" class="works-content" style="display: none;">
|
|
|
- <div class="analytics-summary">
|
|
|
- <div class="analytics-item">
|
|
|
- <div class="analytics-number">12</div>
|
|
|
- <div class="analytics-label">总作品数</div>
|
|
|
- </div>
|
|
|
- <div class="analytics-item">
|
|
|
- <div class="analytics-number">8.9k</div>
|
|
|
- <div class="analytics-label">总点赞数</div>
|
|
|
- </div>
|
|
|
- <div class="analytics-item">
|
|
|
- <div class="analytics-number">2.3k</div>
|
|
|
- <div class="analytics-label">总浏览量</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div style="padding: 20px; text-align: center; color: #666;">
|
|
|
- <div style="font-size: 48px; margin-bottom: 15px;">📊</div>
|
|
|
- <div>详细数据分析功能</div>
|
|
|
- <div style="font-size: 14px; margin-top: 8px;">即将上线，敬请期待</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="upload-modal-footer">
|
|
|
- <button class="btn btn-outline" onclick="closeMyWorksModal()">关闭</button>
|
|
|
- <button class="btn btn-outline" onclick="showDrafts(); closeMyWorksModal();">草稿箱</button>
|
|
|
- <button class="btn btn-primary" onclick="openUploadModal(); closeMyWorksModal();">发布新作品</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <script>
|
|
|
- // =========================== API 服务层 ===========================
|
|
|
-
|
|
|
- // API 配置
|
|
|
- const API_CONFIG = {
|
|
|
- baseURL: 'https://ghiuoimfghor.sealoshzh.site',
|
|
|
- timeout: 10000,
|
|
|
- retryCount: 3,
|
|
|
- retryDelay: 1000
|
|
|
- };
|
|
|
-
|
|
|
- // 认证状态管理
|
|
|
- class AuthManager {
|
|
|
- constructor() {
|
|
|
- this.token = localStorage.getItem('fashioncraft_token');
|
|
|
- this.user = JSON.parse(localStorage.getItem('fashioncraft_user') || 'null');
|
|
|
- this.refreshToken = localStorage.getItem('fashioncraft_refresh_token');
|
|
|
- }
|
|
|
-
|
|
|
- setAuth(data) {
|
|
|
- this.token = data.token;
|
|
|
- this.user = data.user_info || data;
|
|
|
- if (data.refresh_token) {
|
|
|
- this.refreshToken = data.refresh_token;
|
|
|
- localStorage.setItem('fashioncraft_refresh_token', data.refresh_token);
|
|
|
- }
|
|
|
-
|
|
|
- localStorage.setItem('fashioncraft_token', this.token);
|
|
|
- localStorage.setItem('fashioncraft_user', JSON.stringify(this.user));
|
|
|
- }
|
|
|
-
|
|
|
- clearAuth() {
|
|
|
- this.token = null;
|
|
|
- this.user = null;
|
|
|
- this.refreshToken = null;
|
|
|
-
|
|
|
- localStorage.removeItem('fashioncraft_token');
|
|
|
- localStorage.removeItem('fashioncraft_user');
|
|
|
- localStorage.removeItem('fashioncraft_refresh_token');
|
|
|
- }
|
|
|
-
|
|
|
- isAuthenticated() {
|
|
|
- return !!this.token;
|
|
|
- }
|
|
|
-
|
|
|
- getAuthHeaders() {
|
|
|
- return this.token ? { 'Authorization': `Bearer ${this.token}` } : {};
|
|
|
- }
|
|
|
-
|
|
|
- async refreshAuthToken() {
|
|
|
- if (!this.refreshToken) {
|
|
|
- throw new Error('No refresh token available');
|
|
|
- }
|
|
|
-
|
|
|
- try {
|
|
|
- const response = await fetch(`${API_CONFIG.baseURL}/api/auth/refresh-token`, {
|
|
|
- method: 'POST',
|
|
|
- headers: {
|
|
|
- 'Content-Type': 'application/json'
|
|
|
- },
|
|
|
- body: JSON.stringify({ refresh_token: this.refreshToken })
|
|
|
- });
|
|
|
-
|
|
|
- const data = await response.json();
|
|
|
- if (data.code === 200) {
|
|
|
- this.setAuth({ token: data.data.token, user_info: this.user });
|
|
|
- return data.data.token;
|
|
|
- } else {
|
|
|
- throw new Error(data.message);
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- this.clearAuth();
|
|
|
- throw error;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 创建认证管理实例
|
|
|
- const authManager = new AuthManager();
|
|
|
-
|
|
|
- // HTTP 请求工具类
|
|
|
- class ApiClient {
|
|
|
- constructor() {
|
|
|
- this.requestQueue = new Map();
|
|
|
- }
|
|
|
-
|
|
|
- async request(url, options = {}) {
|
|
|
- const config = {
|
|
|
- method: 'GET',
|
|
|
- headers: {
|
|
|
- 'Content-Type': 'application/json',
|
|
|
- ...authManager.getAuthHeaders(),
|
|
|
- ...options.headers
|
|
|
- },
|
|
|
- timeout: API_CONFIG.timeout,
|
|
|
- ...options
|
|
|
- };
|
|
|
-
|
|
|
- // 添加重试机制
|
|
|
- for (let i = 0; i < API_CONFIG.retryCount; i++) {
|
|
|
- try {
|
|
|
- const response = await this.fetchWithTimeout(`${API_CONFIG.baseURL}${url}`, config);
|
|
|
-
|
|
|
- // 处理401错误 - Token过期
|
|
|
- if (response.status === 401 && authManager.isAuthenticated()) {
|
|
|
- try {
|
|
|
- await authManager.refreshAuthToken();
|
|
|
- // 更新请求头并重试
|
|
|
- config.headers = {
|
|
|
- ...config.headers,
|
|
|
- ...authManager.getAuthHeaders()
|
|
|
- };
|
|
|
- return await this.fetchWithTimeout(`${API_CONFIG.baseURL}${url}`, config);
|
|
|
- } catch (refreshError) {
|
|
|
- // 刷新失败，跳转到登录
|
|
|
- this.handleAuthError();
|
|
|
- throw new Error('认证失败，请重新登录');
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- const data = await response.json();
|
|
|
-
|
|
|
- if (data.code && data.code !== 200) {
|
|
|
- throw new Error(data.message || '请求失败');
|
|
|
- }
|
|
|
-
|
|
|
- return data;
|
|
|
- } catch (error) {
|
|
|
- if (i === API_CONFIG.retryCount - 1) {
|
|
|
- throw error;
|
|
|
- }
|
|
|
- await new Promise(resolve => setTimeout(resolve, API_CONFIG.retryDelay));
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- async fetchWithTimeout(url, config) {
|
|
|
- const controller = new AbortController();
|
|
|
- const timeout = setTimeout(() => controller.abort(), config.timeout);
|
|
|
-
|
|
|
- try {
|
|
|
- const response = await fetch(url, {
|
|
|
- ...config,
|
|
|
- signal: controller.signal
|
|
|
- });
|
|
|
- clearTimeout(timeout);
|
|
|
- return response;
|
|
|
- } catch (error) {
|
|
|
- clearTimeout(timeout);
|
|
|
- throw error;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- handleAuthError() {
|
|
|
- authManager.clearAuth();
|
|
|
- showNotification('认证失效', '请重新登录');
|
|
|
- // 可以在这里添加跳转到登录页面的逻辑
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 创建API客户端实例
|
|
|
- const apiClient = new ApiClient();
|
|
|
-
|
|
|
- // =========================== API 接口定义 ===========================
|
|
|
-
|
|
|
- // 系统接口
|
|
|
- const SystemAPI = {
|
|
|
- // 健康检查
|
|
|
- async checkHealth() {
|
|
|
- return await apiClient.request('/health');
|
|
|
- },
|
|
|
-
|
|
|
- // 获取系统配置
|
|
|
- async getConfig() {
|
|
|
- return await apiClient.request('/api/system/config');
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- // 用户认证接口
|
|
|
- const AuthAPI = {
|
|
|
- // 用户注册
|
|
|
- async register(userData) {
|
|
|
- return await apiClient.request('/api/auth/register', {
|
|
|
- method: 'POST',
|
|
|
- body: JSON.stringify(userData)
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- // 用户登录
|
|
|
- async login(credentials) {
|
|
|
- return await apiClient.request('/api/auth/login', {
|
|
|
- method: 'POST',
|
|
|
- body: JSON.stringify(credentials)
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- // 用户登出
|
|
|
- async logout() {
|
|
|
- return await apiClient.request('/api/auth/logout', {
|
|
|
- method: 'POST'
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- // 刷新令牌
|
|
|
- async refreshToken(refreshToken) {
|
|
|
- return await apiClient.request('/api/auth/refresh-token', {
|
|
|
- method: 'POST',
|
|
|
- body: JSON.stringify({ refresh_token: refreshToken })
|
|
|
- });
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- // 用户信息管理接口
|
|
|
- const UserAPI = {
|
|
|
- // 获取用户个人信息
|
|
|
- async getProfile() {
|
|
|
- return await apiClient.request('/api/user/profile');
|
|
|
- },
|
|
|
-
|
|
|
- // 更新用户个人信息
|
|
|
- async updateProfile(profileData) {
|
|
|
- return await apiClient.request('/api/user/profile', {
|
|
|
- method: 'PUT',
|
|
|
- body: JSON.stringify(profileData)
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- // 修改密码
|
|
|
- async changePassword(passwordData) {
|
|
|
- return await apiClient.request('/api/user/change-password', {
|
|
|
- method: 'POST',
|
|
|
- body: JSON.stringify(passwordData)
|
|
|
- });
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- // 设计模块接口
|
|
|
- const DesignAPI = {
|
|
|
- // 创建设计项目
|
|
|
- async createDesign(designData) {
|
|
|
- return await apiClient.request('/api/design/create', {
|
|
|
- method: 'POST',
|
|
|
- body: JSON.stringify(designData)
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- // 获取设计列表
|
|
|
- async getDesignList(params = {}) {
|
|
|
- const queryString = new URLSearchParams(params).toString();
|
|
|
- return await apiClient.request(`/api/design/list?${queryString}`);
|
|
|
- },
|
|
|
-
|
|
|
- // 获取设计详情
|
|
|
- async getDesignDetail(designId) {
|
|
|
- return await apiClient.request(`/api/design/${designId}`);
|
|
|
- },
|
|
|
-
|
|
|
- // 更新设计
|
|
|
- async updateDesign(designId, designData) {
|
|
|
- return await apiClient.request(`/api/design/${designId}`, {
|
|
|
- method: 'PUT',
|
|
|
- body: JSON.stringify(designData)
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- // 删除设计
|
|
|
- async deleteDesign(designId) {
|
|
|
- return await apiClient.request(`/api/design/${designId}`, {
|
|
|
- method: 'DELETE'
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- // 获取可用颜色列表
|
|
|
- async getColors() {
|
|
|
- return await apiClient.request('/api/design/colors');
|
|
|
- },
|
|
|
-
|
|
|
- // 获取可用材质列表
|
|
|
- async getMaterials() {
|
|
|
- return await apiClient.request('/api/design/materials');
|
|
|
- },
|
|
|
-
|
|
|
- // 保存配色方案
|
|
|
- async saveColorScheme(schemeData) {
|
|
|
- return await apiClient.request('/api/design/color-scheme', {
|
|
|
- method: 'POST',
|
|
|
- body: JSON.stringify(schemeData)
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- // 获取用户配色方案列表
|
|
|
- async getColorSchemes() {
|
|
|
- return await apiClient.request('/api/design/color-schemes');
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- // AI推荐模块接口
|
|
|
- const AIAPI = {
|
|
|
- // AI配色推荐
|
|
|
- async getColorRecommendations(params) {
|
|
|
- return await apiClient.request('/api/ai/recommend/colors', {
|
|
|
- method: 'POST',
|
|
|
- body: JSON.stringify(params)
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- // AI风格推荐
|
|
|
- async getStyleRecommendations(params) {
|
|
|
- return await apiClient.request('/api/ai/recommend/style', {
|
|
|
- method: 'POST',
|
|
|
- body: JSON.stringify(params)
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- // AI设计助手对话
|
|
|
- async chat(message, context = {}) {
|
|
|
- return await apiClient.request('/api/ai/chat', {
|
|
|
- method: 'POST',
|
|
|
- body: JSON.stringify({
|
|
|
- message,
|
|
|
- context
|
|
|
- })
|
|
|
- });
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- // 社区模块接口
|
|
|
- const CommunityAPI = {
|
|
|
- // 发布作品到社区
|
|
|
- async publishWork(workData) {
|
|
|
- return await apiClient.request('/api/community/publish', {
|
|
|
- method: 'POST',
|
|
|
- body: JSON.stringify(workData)
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- // 获取社区作品列表
|
|
|
- async getWorks(params = {}) {
|
|
|
- const queryString = new URLSearchParams(params).toString();
|
|
|
- return await apiClient.request(`/api/community/works?${queryString}`);
|
|
|
- },
|
|
|
-
|
|
|
- // 获取作品详情
|
|
|
- async getWorkDetail(workId) {
|
|
|
- return await apiClient.request(`/api/community/works/${workId}`);
|
|
|
- },
|
|
|
-
|
|
|
- // 更新作品信息
|
|
|
- async updateWork(workId, workData) {
|
|
|
- return await apiClient.request(`/api/community/works/${workId}`, {
|
|
|
- method: 'PUT',
|
|
|
- body: JSON.stringify(workData)
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- // 删除作品
|
|
|
- async deleteWork(workId) {
|
|
|
- return await apiClient.request(`/api/community/works/${workId}`, {
|
|
|
- method: 'DELETE'
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- // 点赞作品
|
|
|
- async likeWork(workId) {
|
|
|
- return await apiClient.request(`/api/community/works/${workId}/like`, {
|
|
|
- method: 'POST'
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- // 评论作品
|
|
|
- async commentWork(workId, content, replyTo = null) {
|
|
|
- return await apiClient.request(`/api/community/works/${workId}/comment`, {
|
|
|
- method: 'POST',
|
|
|
- body: JSON.stringify({
|
|
|
- content,
|
|
|
- reply_to: replyTo
|
|
|
- })
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- // 获取作品评论列表
|
|
|
- async getWorkComments(workId, params = {}) {
|
|
|
- const queryString = new URLSearchParams(params).toString();
|
|
|
- return await apiClient.request(`/api/community/works/${workId}/comments?${queryString}`);
|
|
|
- },
|
|
|
-
|
|
|
- // 收藏作品
|
|
|
- async collectWork(workId) {
|
|
|
- return await apiClient.request(`/api/community/works/${workId}/collect`, {
|
|
|
- method: 'POST'
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- // 下载作品设计文件
|
|
|
- async downloadWork(workId) {
|
|
|
- return await apiClient.request(`/api/community/works/${workId}/download`, {
|
|
|
- method: 'POST'
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- // 关注用户
|
|
|
- async followUser(userId) {
|
|
|
- return await apiClient.request(`/api/community/follow/${userId}`, {
|
|
|
- method: 'POST'
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- // 获取粉丝列表
|
|
|
- async getFollowers(params = {}) {
|
|
|
- const queryString = new URLSearchParams(params).toString();
|
|
|
- return await apiClient.request(`/api/community/followers?${queryString}`);
|
|
|
- },
|
|
|
-
|
|
|
- // 获取关注列表
|
|
|
- async getFollowing(params = {}) {
|
|
|
- const queryString = new URLSearchParams(params).toString();
|
|
|
- return await apiClient.request(`/api/community/following?${queryString}`);
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- // 文件上传接口
|
|
|
- const UploadAPI = {
|
|
|
- // 上传图片
|
|
|
- async uploadImage(file, category = 'general', compress = true) {
|
|
|
- const formData = new FormData();
|
|
|
- formData.append('file', file);
|
|
|
- formData.append('category', category);
|
|
|
- formData.append('compress', compress);
|
|
|
-
|
|
|
- return await apiClient.request('/api/upload/image', {
|
|
|
- method: 'POST',
|
|
|
- headers: {
|
|
|
- // 不设置Content-Type，让浏览器自动设置multipart/form-data
|
|
|
- ...authManager.getAuthHeaders()
|
|
|
- },
|
|
|
- body: formData
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- // 上传3D模型
|
|
|
- async upload3DModel(file) {
|
|
|
- const formData = new FormData();
|
|
|
- formData.append('file', file);
|
|
|
-
|
|
|
- return await apiClient.request('/api/upload/3d-model', {
|
|
|
- method: 'POST',
|
|
|
- headers: {
|
|
|
- ...authManager.getAuthHeaders()
|
|
|
- },
|
|
|
- body: formData
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- // 批量上传文件
|
|
|
- async uploadBatch(files) {
|
|
|
- const formData = new FormData();
|
|
|
- files.forEach((file, index) => {
|
|
|
- formData.append('files', file);
|
|
|
- });
|
|
|
-
|
|
|
- return await apiClient.request('/api/upload/batch', {
|
|
|
- method: 'POST',
|
|
|
- headers: {
|
|
|
- ...authManager.getAuthHeaders()
|
|
|
- },
|
|
|
- body: formData
|
|
|
- });
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- // =========================== 业务逻辑层 ===========================
|
|
|
-
|
|
|
- // 认证相关业务逻辑
|
|
|
- const AuthService = {
|
|
|
- // 用户注册
|
|
|
- async register(userData) {
|
|
|
- try {
|
|
|
- showNotification('注册中', '正在创建您的账户...');
|
|
|
- const response = await AuthAPI.register(userData);
|
|
|
-
|
|
|
- if (response.code === 200) {
|
|
|
- authManager.setAuth(response.data);
|
|
|
- showNotification('注册成功', '欢迎加入FashionCraft！');
|
|
|
- return response.data;
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- showNotification('注册失败', error.message || '注册过程中出现错误');
|
|
|
- throw error;
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 用户登录
|
|
|
- async login(credentials) {
|
|
|
- try {
|
|
|
- showNotification('登录中', '正在验证您的账户...');
|
|
|
- const response = await AuthAPI.login(credentials);
|
|
|
-
|
|
|
- if (response.code === 200) {
|
|
|
- authManager.setAuth(response.data);
|
|
|
- showNotification('登录成功', `欢迎回来，${response.data.username}！`);
|
|
|
-
|
|
|
- // 登录成功后初始化用户数据
|
|
|
- await this.initializeUserData();
|
|
|
- return response.data;
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- showNotification('登录失败', error.message || '登录过程中出现错误');
|
|
|
- throw error;
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 用户登出
|
|
|
- async logout() {
|
|
|
- try {
|
|
|
- if (authManager.isAuthenticated()) {
|
|
|
- await AuthAPI.logout();
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- console.warn('登出请求失败:', error);
|
|
|
- } finally {
|
|
|
- authManager.clearAuth();
|
|
|
- showNotification('退出成功', '您已成功退出登录');
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 初始化用户数据
|
|
|
- async initializeUserData() {
|
|
|
- try {
|
|
|
- // 并行获取用户相关数据
|
|
|
- const [profile, designs] = await Promise.allSettled([
|
|
|
- UserAPI.getProfile(),
|
|
|
- DesignAPI.getDesignList({ page: 1, page_size: 10 })
|
|
|
- ]);
|
|
|
-
|
|
|
- if (profile.status === 'fulfilled' && profile.value.code === 200) {
|
|
|
- authManager.user = profile.value.data;
|
|
|
- localStorage.setItem('fashioncraft_user', JSON.stringify(profile.value.data));
|
|
|
- }
|
|
|
-
|
|
|
- if (designs.status === 'fulfilled' && designs.value.code === 200) {
|
|
|
- // 可以在这里更新设计列表的UI
|
|
|
- console.log('用户设计列表:', designs.value.data);
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- console.warn('初始化用户数据失败:', error);
|
|
|
- }
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- // 设计相关业务逻辑
|
|
|
- const DesignService = {
|
|
|
- // 创建新设计
|
|
|
- async createDesign(designData) {
|
|
|
- try {
|
|
|
- showNotification('创建设计', '正在创建新的设计项目...');
|
|
|
- const response = await DesignAPI.createDesign(designData);
|
|
|
-
|
|
|
- if (response.code === 200) {
|
|
|
- showNotification('创建成功', '新设计项目已创建！');
|
|
|
- return response.data;
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- showNotification('创建失败', error.message || '创建设计时出现错误');
|
|
|
- throw error;
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 保存设计
|
|
|
- async saveDesign(designId, designData) {
|
|
|
- try {
|
|
|
- showNotification('保存中', '正在保存您的设计...');
|
|
|
- const response = await DesignAPI.updateDesign(designId, designData);
|
|
|
-
|
|
|
- if (response.code === 200) {
|
|
|
- showNotification('保存成功', '设计已保存');
|
|
|
- return response.data;
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- showNotification('保存失败', error.message || '保存设计时出现错误');
|
|
|
- throw error;
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 保存配色方案
|
|
|
- async saveColorScheme(schemeData) {
|
|
|
- try {
|
|
|
- const response = await DesignAPI.saveColorScheme(schemeData);
|
|
|
-
|
|
|
- if (response.code === 200) {
|
|
|
- showNotification('保存成功', `配色方案 "${schemeData.scheme_name}" 已保存`);
|
|
|
- return response.data;
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- showNotification('保存失败', error.message || '保存配色方案时出现错误');
|
|
|
- throw error;
|
|
|
- }
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- // AI推荐相关业务逻辑
|
|
|
- const AIService = {
|
|
|
- // 获取AI配色推荐
|
|
|
- async getColorRecommendations(params) {
|
|
|
- try {
|
|
|
- showNotification('AI分析中', '正在为您生成配色建议...');
|
|
|
- const response = await AIAPI.getColorRecommendations(params);
|
|
|
-
|
|
|
- if (response.code === 200) {
|
|
|
- showNotification('推荐完成', 'AI配色方案已生成！');
|
|
|
- return response.data;
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- showNotification('推荐失败', error.message || 'AI服务暂时不可用');
|
|
|
- throw error;
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // DeepSeek AI聊天
|
|
|
- async chat(message, context = {}) {
|
|
|
- try {
|
|
|
- // 构建对话历史
|
|
|
- const messages = [
|
|
|
- {
|
|
|
- role: "system",
|
|
|
- content: `你是一个专业的AI时尚顾问，专门为用户提供服装搭配、配色建议、风格分析等时尚相关的专业建议。
|
|
|
-
|
|
|
-请用专业但友好的语气回答用户问题，并尽可能提供具体实用的建议。
|
|
|
-
|
|
|
-为了让回答更美观易读，请在回答中使用以下格式：
|
|
|
-- 使用 **粗体** 来突出重点
|
|
|
-- 使用 *斜体* 来表示强调
|
|
|
-- 使用数字列表（1. 2. 3.）来组织步骤
|
|
|
-- 使用项目符号（- 或 •）来列举要点
|
|
|
-- 使用 > 引用格式来提供重要提示
|
|
|
-- 使用 [重要] [建议] [提示] 标签来标记不同类型信息
|
|
|
-- 适当使用时尚表情符号：✨💡🎨👔👗👠💄👜
|
|
|
-- 涉及颜色时可以使用十六进制代码如 #FF6B6B #Navy #Black
|
|
|
-
|
|
|
-示例格式：
|
|
|
-**时尚搭配建议** ✨
|
|
|
-
|
|
|
-[重要] 根据您的需求，我为您准备了专业建议：
|
|
|
-
|
|
|
-1. **上装选择**：推荐 #1E3A8A 海军蓝西装 👔
|
|
|
-2. **配饰搭配**：选择经典皮包 👜 和舒适高跟鞋 👠
|
|
|
-
|
|
|
-> 💡 配色小贴士：颜色搭配要和谐统一，不超过3个主色调
|
|
|
-
|
|
|
-• 春季推荐：清新淡雅色调 🌸
|
|
|
-• 商务场合：沉稳大气配色
|
|
|
-• 约会装扮：温柔浪漫风格 💄
|
|
|
-
|
|
|
-[建议] 根据场合选择合适的风格最重要！
|
|
|
-
|
|
|
-希望这些专业建议对您有帮助！`
|
|
|
- }
|
|
|
- ];
|
|
|
-
|
|
|
- // 添加对话历史上下文
|
|
|
- if (context.conversation_history && context.conversation_history.length > 0) {
|
|
|
- context.conversation_history.forEach(chat => {
|
|
|
- if (chat.type === 'user') {
|
|
|
- messages.push({
|
|
|
- role: "user",
|
|
|
- content: chat.text
|
|
|
- });
|
|
|
- } else if (chat.type === 'ai') {
|
|
|
- messages.push({
|
|
|
- role: "assistant",
|
|
|
- content: chat.text
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- // 添加当前设计上下文
|
|
|
- let contextMessage = message;
|
|
|
- if (context.current_design) {
|
|
|
- contextMessage += `\n\n当前设计信息：选中部位：${context.current_design.selected_part}，颜色配置：${JSON.stringify(context.current_design.colors)}`;
|
|
|
- }
|
|
|
-
|
|
|
- // 添加当前用户消息
|
|
|
- messages.push({
|
|
|
- role: "user",
|
|
|
- content: contextMessage
|
|
|
- });
|
|
|
-
|
|
|
- // 调用DeepSeek API
|
|
|
- const response = await fetch('https://api.deepseek.com/chat/completions', {
|
|
|
- method: 'POST',
|
|
|
- headers: {
|
|
|
- 'Content-Type': 'application/json',
|
|
|
- 'Authorization': 'Bearer sk-dc7294eb7e274967afa7ca6c4c1cc367'
|
|
|
- },
|
|
|
- body: JSON.stringify({
|
|
|
- model: "deepseek-chat",
|
|
|
- messages: messages,
|
|
|
- stream: false,
|
|
|
- temperature: 0.7,
|
|
|
- max_tokens: 1000
|
|
|
- })
|
|
|
- });
|
|
|
-
|
|
|
- if (!response.ok) {
|
|
|
- throw new Error(`DeepSeek API请求失败: ${response.status}`);
|
|
|
- }
|
|
|
-
|
|
|
- const data = await response.json();
|
|
|
-
|
|
|
- if (data.choices && data.choices.length > 0) {
|
|
|
- const aiResponse = data.choices[0].message.content;
|
|
|
-
|
|
|
- // 返回格式化的响应
|
|
|
- return {
|
|
|
- response: aiResponse,
|
|
|
- suggestions: this.extractSuggestions(aiResponse),
|
|
|
- conversation_id: `deepseek_${Date.now()}`
|
|
|
- };
|
|
|
- } else {
|
|
|
- throw new Error('DeepSeek API返回格式异常');
|
|
|
- }
|
|
|
-
|
|
|
- } catch (error) {
|
|
|
- console.error('DeepSeek API调用失败:', error);
|
|
|
-
|
|
|
- // 回退到本地生成的回复
|
|
|
- const fallbackResponse = this.generateFallbackResponse(message);
|
|
|
- return {
|
|
|
- response: fallbackResponse,
|
|
|
- suggestions: [],
|
|
|
- conversation_id: `fallback_${Date.now()}`
|
|
|
- };
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 从AI回复中提取建议
|
|
|
- extractSuggestions(response) {
|
|
|
- const suggestions = [];
|
|
|
-
|
|
|
- // 简单的关键词检测来提取建议
|
|
|
- if (response.includes('颜色') || response.includes('配色')) {
|
|
|
- suggestions.push({
|
|
|
- type: 'color',
|
|
|
- content: {
|
|
|
- colors: ['#1E3A8A', '#FFFFFF', '#EF4444'] // 示例颜色
|
|
|
- },
|
|
|
- reason: '基于AI分析推荐的配色方案'
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- return suggestions;
|
|
|
- },
|
|
|
-
|
|
|
- // 生成回退回复
|
|
|
- generateFallbackResponse(message) {
|
|
|
- const fallbackResponses = [
|
|
|
- '作为您的时尚顾问，我建议您考虑颜色搭配的和谐性，选择适合您肤色和身材的款式。',
|
|
|
- '时尚搭配的关键在于平衡，建议您从基础款开始，逐步添加个性化元素。',
|
|
|
- '根据您的需求，我推荐选择经典而不失时尚感的单品，这样既实用又有品味。',
|
|
|
- '搭配建议：注重色彩层次和材质对比，这能让整体造型更加出彩。'
|
|
|
- ];
|
|
|
-
|
|
|
- return fallbackResponses[Math.floor(Math.random() * fallbackResponses.length)];
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- // 文件上传相关业务逻辑
|
|
|
- const UploadService = {
|
|
|
- // 上传图片
|
|
|
- async uploadImage(file, category = 'general') {
|
|
|
- try {
|
|
|
- // 检查文件大小
|
|
|
- if (file.size > 50 * 1024 * 1024) { // 50MB
|
|
|
- throw new Error('文件大小不能超过50MB');
|
|
|
- }
|
|
|
-
|
|
|
- // 检查文件类型
|
|
|
- const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp'];
|
|
|
- if (!allowedTypes.includes(file.type)) {
|
|
|
- throw new Error('不支持的文件格式，请选择JPG、PNG、GIF或WebP格式的图片');
|
|
|
- }
|
|
|
-
|
|
|
- showNotification('上传中', `正在上传 ${file.name}...`);
|
|
|
- const response = await UploadAPI.uploadImage(file, category);
|
|
|
-
|
|
|
- if (response.code === 200) {
|
|
|
- showNotification('上传成功', '图片已成功上传！');
|
|
|
- return response.data;
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- showNotification('上传失败', error.message || '上传图片时出现错误');
|
|
|
- throw error;
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 批量上传文件
|
|
|
- async uploadBatch(files) {
|
|
|
- try {
|
|
|
- if (files.length > 10) {
|
|
|
- throw new Error('一次最多只能上传10个文件');
|
|
|
- }
|
|
|
-
|
|
|
- showNotification('批量上传', `正在上传 ${files.length} 个文件...`);
|
|
|
- const response = await UploadAPI.uploadBatch(files);
|
|
|
-
|
|
|
- if (response.code === 200) {
|
|
|
- showNotification('上传完成', `成功上传 ${response.data.total} 个文件！`);
|
|
|
- return response.data;
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- showNotification('上传失败', error.message || '批量上传时出现错误');
|
|
|
- throw error;
|
|
|
- }
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- // =========================== 初始化 ===========================
|
|
|
-
|
|
|
- // 应用初始化
|
|
|
- async function initializeApp() {
|
|
|
- try {
|
|
|
- // 获取系统配置
|
|
|
- const configResponse = await SystemAPI.getConfig();
|
|
|
- if (configResponse.code === 200) {
|
|
|
- console.log('系统配置:', configResponse.data);
|
|
|
- }
|
|
|
-
|
|
|
- // 如果用户已登录，初始化用户数据
|
|
|
- if (authManager.isAuthenticated()) {
|
|
|
- await AuthService.initializeUserData();
|
|
|
- console.log('用户已登录:', authManager.user);
|
|
|
- }
|
|
|
-
|
|
|
- console.log('应用初始化完成');
|
|
|
- } catch (error) {
|
|
|
- console.warn('应用初始化部分失败:', error);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // =========================== 原有功能代码 ===========================
|
|
|
-
|
|
|
- // 全局变量
|
|
|
- let currentSlide = 0;
|
|
|
- let slideInterval;
|
|
|
- let selectedColor = '#ff6b6b';
|
|
|
-
|
|
|
- // 页面初始化
|
|
|
- document.addEventListener('DOMContentLoaded', function() {
|
|
|
- // 检查用户登录状态
|
|
|
- checkAuthStatus();
|
|
|
-
|
|
|
- // 初始化AI消息格式化
|
|
|
- initializeAIMessageFormatting();
|
|
|
- });
|
|
|
-
|
|
|
- // 初始化AI消息格式化
|
|
|
- function initializeAIMessageFormatting() {
|
|
|
- // 格式化所有现有的AI消息
|
|
|
- setTimeout(() => {
|
|
|
- const aiMessages = document.querySelectorAll('.ai-message .message-text.ai-formatted');
|
|
|
- aiMessages.forEach(messageElement => {
|
|
|
- const originalText = messageElement.innerHTML;
|
|
|
- messageElement.innerHTML = formatAIText(originalText);
|
|
|
- });
|
|
|
- }, 100);
|
|
|
- }
|
|
|
-
|
|
|
- // 检查登录状态
|
|
|
- function checkAuthStatus() {
|
|
|
- const isLoggedIn = authManager.isAuthenticated();
|
|
|
-
|
|
|
- if (isLoggedIn) {
|
|
|
- // 用户已登录，显示主应用
|
|
|
- showMainApp();
|
|
|
- } else {
|
|
|
- // 用户未登录，显示登录页面
|
|
|
- showAuthScreen();
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 显示主应用
|
|
|
- function showMainApp() {
|
|
|
- document.getElementById('auth-screen').style.display = 'none';
|
|
|
- document.getElementById('main-app').style.display = 'block';
|
|
|
-
|
|
|
- // 初始化主应用功能
|
|
|
- initBannerSlider();
|
|
|
- initNavigation();
|
|
|
- initInteractions();
|
|
|
- // 初始化API服务
|
|
|
- initializeApp();
|
|
|
- }
|
|
|
-
|
|
|
- // 显示登录页面
|
|
|
- function showAuthScreen() {
|
|
|
- document.getElementById('auth-screen').style.display = 'flex';
|
|
|
- document.getElementById('main-app').style.display = 'none';
|
|
|
- }
|
|
|
-
|
|
|
- // 轮播图功能
|
|
|
- function initBannerSlider() {
|
|
|
- const slider = document.getElementById('bannerSlider');
|
|
|
- const indicators = document.querySelectorAll('.indicator');
|
|
|
- const slides = document.querySelectorAll('.banner-slide');
|
|
|
-
|
|
|
- // 自动播放
|
|
|
- slideInterval = setInterval(nextSlide, 4000);
|
|
|
-
|
|
|
- // 指示器点击事件
|
|
|
- indicators.forEach((indicator, index) => {
|
|
|
- indicator.addEventListener('click', () => {
|
|
|
- goToSlide(index);
|
|
|
- });
|
|
|
- });
|
|
|
-
|
|
|
- // 轮播图点击跳转事件
|
|
|
- slides.forEach((slide, index) => {
|
|
|
- slide.addEventListener('click', () => {
|
|
|
- bannerClick(index);
|
|
|
- });
|
|
|
- });
|
|
|
-
|
|
|
- // 鼠标悬停暂停
|
|
|
- slider.addEventListener('mouseenter', () => {
|
|
|
- clearInterval(slideInterval);
|
|
|
- });
|
|
|
-
|
|
|
- slider.addEventListener('mouseleave', () => {
|
|
|
- slideInterval = setInterval(nextSlide, 4000);
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- function nextSlide() {
|
|
|
- currentSlide = (currentSlide + 1) % 3;
|
|
|
- updateSlider();
|
|
|
- }
|
|
|
-
|
|
|
- function goToSlide(index) {
|
|
|
- currentSlide = index;
|
|
|
- updateSlider();
|
|
|
- }
|
|
|
-
|
|
|
- function updateSlider() {
|
|
|
- const slider = document.getElementById('bannerSlider');
|
|
|
- const indicators = document.querySelectorAll('.indicator');
|
|
|
-
|
|
|
- slider.style.transform = `translateX(-${currentSlide * 100}%)`;
|
|
|
-
|
|
|
- indicators.forEach((indicator, index) => {
|
|
|
- indicator.classList.toggle('active', index === currentSlide);
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- // 轮播图点击跳转功能
|
|
|
- function bannerClick(index) {
|
|
|
- // 根据轮播图索引跳转到不同页面
|
|
|
- switch(index) {
|
|
|
- case 0: // 春季新品发布
|
|
|
- switchPage('design');
|
|
|
- // 更新导航状态
|
|
|
- updateNavigation('design');
|
|
|
- showNotification('春季新品', '欢迎查看春季新品系列！');
|
|
|
- break;
|
|
|
- case 1: // AI智能搭配
|
|
|
- showModal('AI智能搭配', '基于您的喜好，我们为您推荐了以下服装', '查看推荐', () => {
|
|
|
- closeModal(); // 关闭模态框
|
|
|
- switchPage('ar');
|
|
|
- updateNavigation('ar');
|
|
|
- });
|
|
|
- break;
|
|
|
- case 2: // 设计大赛进行中
|
|
|
- showModal('设计大赛', '设计大赛正在进行中，立即参与！', '查看详情', () => {
|
|
|
- closeModal(); // 关闭模态框
|
|
|
- switchPage('community');
|
|
|
- updateNavigation('community');
|
|
|
- });
|
|
|
- break;
|
|
|
- default:
|
|
|
- break;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 更新导航状态的辅助函数
|
|
|
- function updateNavigation(page) {
|
|
|
- const navItems = document.querySelectorAll('.nav-item');
|
|
|
- navItems.forEach(nav => nav.classList.remove('active'));
|
|
|
- document.querySelector(`.nav-item[data-page="${page}"]`).classList.add('active');
|
|
|
- }
|
|
|
-
|
|
|
- // 导航功能
|
|
|
- function initNavigation() {
|
|
|
- const navItems = document.querySelectorAll('.nav-item');
|
|
|
-
|
|
|
- navItems.forEach(item => {
|
|
|
- item.addEventListener('click', () => {
|
|
|
- const page = item.dataset.page;
|
|
|
- switchPage(page);
|
|
|
-
|
|
|
- // 更新导航状态
|
|
|
- navItems.forEach(nav => nav.classList.remove('active'));
|
|
|
- item.classList.add('active');
|
|
|
- });
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- function switchPage(pageId) {
|
|
|
- const pages = document.querySelectorAll('.page');
|
|
|
-
|
|
|
- pages.forEach(page => {
|
|
|
- page.style.display = 'none';
|
|
|
- });
|
|
|
-
|
|
|
- const targetPage = document.getElementById(pageId + '-page');
|
|
|
- if (targetPage) {
|
|
|
- targetPage.style.display = 'block';
|
|
|
- targetPage.classList.add('fade-in');
|
|
|
-
|
|
|
- setTimeout(() => {
|
|
|
- targetPage.classList.remove('fade-in');
|
|
|
- }, 300);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 交互功能
|
|
|
- function initInteractions() {
|
|
|
- // 添加脉搏动画
|
|
|
- const style = document.createElement('style');
|
|
|
- style.textContent = `
|
|
|
- @keyframes pulse {
|
|
|
- 0%, 100% { transform: scale(1); }
|
|
|
- 50% { transform: scale(1.1); }
|
|
|
- }
|
|
|
- `;
|
|
|
- document.head.appendChild(style);
|
|
|
- }
|
|
|
-
|
|
|
- // 模态框功能
|
|
|
- function showDesignModal() {
|
|
|
- showModal('开始设计', '选择你想要设计的服装类型', '开始', startDesign);
|
|
|
- }
|
|
|
-
|
|
|
- function showModal(title, text, actionText = '开始', actionCallback = startDesign) {
|
|
|
- const modal = document.getElementById('modal');
|
|
|
- const modalTitle = document.getElementById('modalTitle');
|
|
|
- const modalText = document.getElementById('modalText');
|
|
|
- const primaryBtn = document.querySelector('.modal-actions .btn-primary');
|
|
|
-
|
|
|
- modalTitle.textContent = title;
|
|
|
- modalText.textContent = text;
|
|
|
- primaryBtn.textContent = actionText;
|
|
|
- primaryBtn.onclick = actionCallback;
|
|
|
-
|
|
|
- modal.style.display = 'flex';
|
|
|
- document.body.style.overflow = 'hidden';
|
|
|
- }
|
|
|
-
|
|
|
- function closeModal() {
|
|
|
- const modal = document.getElementById('modal');
|
|
|
- modal.style.display = 'none';
|
|
|
- document.body.style.overflow = 'auto';
|
|
|
- }
|
|
|
-
|
|
|
- function startDesign() {
|
|
|
- closeModal();
|
|
|
- switchPage('design');
|
|
|
- // 更新导航状态
|
|
|
- const navItems = document.querySelectorAll('.nav-item');
|
|
|
- navItems.forEach(nav => nav.classList.remove('active'));
|
|
|
- document.querySelector('.nav-item[data-page="design"]').classList.add('active');
|
|
|
-
|
|
|
- showNotification('开始设计', '欢迎来到设计中心！');
|
|
|
- }
|
|
|
-
|
|
|
- // 作品详情
|
|
|
- function showWorkDetail(title) {
|
|
|
- showNotification('作品详情', `正在查看《${title}》的详细信息`);
|
|
|
- }
|
|
|
-
|
|
|
- // AI推荐引擎相关全局变量
|
|
|
- let aiChatHistory = [];
|
|
|
- let isVoiceRecording = false;
|
|
|
- let currentRecommendationScheme = 'scheme1';
|
|
|
-
|
|
|
- // AI推荐引擎功能
|
|
|
- function openAIChat(type) {
|
|
|
- const modal = document.getElementById('aiChatModal');
|
|
|
- const subtitle = document.getElementById('aiChatSubtitle');
|
|
|
- const quickCommands = document.getElementById('aiQuickCommands');
|
|
|
-
|
|
|
- modal.style.display = 'flex';
|
|
|
- document.body.style.overflow = 'hidden';
|
|
|
-
|
|
|
- // 根据类型设置不同的对话主题
|
|
|
- switch(type) {
|
|
|
- case 'occasion':
|
|
|
- subtitle.textContent = '场合搭配专家为您服务...';
|
|
|
- showAIMessage('我来帮您根据不同场合设计完美搭配！请告诉我您要参加什么场合？');
|
|
|
- break;
|
|
|
- case 'color':
|
|
|
- subtitle.textContent = '配色大师为您分析...';
|
|
|
- showAIMessage('专业配色分析师为您服务！我可以根据您的喜好和肤色，推荐最适合的颜色组合。');
|
|
|
- break;
|
|
|
- case 'style':
|
|
|
- subtitle.textContent = '风格顾问在线中...';
|
|
|
- showAIMessage('让我来分析您的个人风格！请描述一下您喜欢的穿衣风格，或者上传一张照片。');
|
|
|
- break;
|
|
|
- case 'free':
|
|
|
- subtitle.textContent = '自由对话模式中...';
|
|
|
- showAIMessage('有任何时尚相关的问题都可以问我哦！无论是搭配建议、流行趋势还是设计灵感。');
|
|
|
- break;
|
|
|
- }
|
|
|
-
|
|
|
- // 隐藏快捷指令（进入对话状态）
|
|
|
- quickCommands.style.display = 'none';
|
|
|
- }
|
|
|
-
|
|
|
- function closeAIChat() {
|
|
|
- const modal = document.getElementById('aiChatModal');
|
|
|
- modal.style.display = 'none';
|
|
|
- document.body.style.overflow = 'auto';
|
|
|
-
|
|
|
- // 重置快捷指令显示
|
|
|
- const quickCommands = document.getElementById('aiQuickCommands');
|
|
|
- quickCommands.style.display = 'flex';
|
|
|
- }
|
|
|
-
|
|
|
- // 文本格式化函数
|
|
|
- function formatAIText(text) {
|
|
|
- // 处理换行
|
|
|
- text = text.replace(/\n/g, '<br>');
|
|
|
-
|
|
|
- // 处理粗体 **text**
|
|
|
- text = text.replace(/\*\*(.*?)\*\*/g, '<strong class="ai-bold">$1</strong>');
|
|
|
-
|
|
|
- // 处理斜体 *text*
|
|
|
- text = text.replace(/\*(.*?)\*/g, '<em class="ai-italic">$1</em>');
|
|
|
-
|
|
|
- // 处理数字列表 1. 2. 3.
|
|
|
- text = text.replace(/^(\d+)\.\s(.+)$/gm, '<div class="ai-list-item"><span class="ai-list-number">$1.</span> <span class="ai-list-content">$2</span></div>');
|
|
|
-
|
|
|
- // 处理项目符号列表 - •
|
|
|
- text = text.replace(/^[-•]\s(.+)$/gm, '<div class="ai-list-item"><span class="ai-bullet">•</span> <span class="ai-list-content">$1</span></div>');
|
|
|
-
|
|
|
- // 处理引用 > text
|
|
|
- text = text.replace(/^>\s(.+)$/gm, '<div class="ai-quote"><span class="ai-quote-icon">💡</span> $1</div>');
|
|
|
-
|
|
|
- // 处理分隔线
|
|
|
- text = text.replace(/^---$/gm, '<div class="ai-divider"></div>');
|
|
|
-
|
|
|
- // 处理特殊标签
|
|
|
- text = text.replace(/\[重要\]/g, '<span class="ai-tag ai-tag-important">重要</span>');
|
|
|
- text = text.replace(/\[建议\]/g, '<span class="ai-tag ai-tag-suggestion">建议</span>');
|
|
|
- text = text.replace(/\[提示\]/g, '<span class="ai-tag ai-tag-tip">提示</span>');
|
|
|
-
|
|
|
- // 处理颜色标签 #颜色
|
|
|
- text = text.replace(/#([0-9A-Fa-f]{6}|[0-9A-Fa-f]{3})/g, '<span class="ai-color-tag" style="background-color: #$1; color: white; padding: 2px 6px; border-radius: 4px; font-size: 12px; box-shadow: 0 2px 4px rgba(0,0,0,0.2);">#$1</span>');
|
|
|
-
|
|
|
- // 处理表情包增强
|
|
|
- text = text.replace(/✨/g, '<span class="ai-sparkle">✨</span>');
|
|
|
- text = text.replace(/💡/g, '<span class="ai-idea">💡</span>');
|
|
|
- text = text.replace(/🎨/g, '<span class="ai-art">🎨</span>');
|
|
|
- text = text.replace(/👔/g, '<span class="ai-suit">👔</span>');
|
|
|
- text = text.replace(/👗/g, '<span class="ai-dress">👗</span>');
|
|
|
- text = text.replace(/👠/g, '<span class="ai-heels">👠</span>');
|
|
|
- text = text.replace(/💄/g, '<span class="ai-makeup">💄</span>');
|
|
|
- text = text.replace(/👜/g, '<span class="ai-bag">👜</span>');
|
|
|
-
|
|
|
- // 添加段落间距
|
|
|
- text = text.replace(/(<br>\s*){2,}/g, '<div class="ai-paragraph-break"></div>');
|
|
|
-
|
|
|
- return text;
|
|
|
- }
|
|
|
-
|
|
|
- function showAIMessage(text) {
|
|
|
- const messagesContainer = document.getElementById('aiChatMessages');
|
|
|
- const messageDiv = document.createElement('div');
|
|
|
- messageDiv.className = 'ai-message';
|
|
|
-
|
|
|
- const currentTime = new Date().toLocaleTimeString('zh-CN', {
|
|
|
- hour: '2-digit',
|
|
|
- minute: '2-digit'
|
|
|
- });
|
|
|
-
|
|
|
- // 格式化文本
|
|
|
- const formattedText = formatAIText(text);
|
|
|
-
|
|
|
- messageDiv.innerHTML = `
|
|
|
- <div class="message-avatar">🤖</div>
|
|
|
- <div class="message-content">
|
|
|
- <div class="message-text ai-formatted">${formattedText}</div>
|
|
|
- <div class="message-time">${currentTime}</div>
|
|
|
- </div>
|
|
|
- `;
|
|
|
-
|
|
|
- messagesContainer.appendChild(messageDiv);
|
|
|
- messagesContainer.scrollTop = messagesContainer.scrollHeight;
|
|
|
-
|
|
|
- // 添加打字机效果和渐入动画
|
|
|
- const messageText = messageDiv.querySelector('.message-text');
|
|
|
- const messageAvatar = messageDiv.querySelector('.message-avatar');
|
|
|
-
|
|
|
- messageDiv.style.opacity = '0';
|
|
|
- messageDiv.style.transform = 'translateY(20px) scale(0.95)';
|
|
|
-
|
|
|
- setTimeout(() => {
|
|
|
- messageDiv.style.transition = 'all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)';
|
|
|
- messageDiv.style.opacity = '1';
|
|
|
- messageDiv.style.transform = 'translateY(0) scale(1)';
|
|
|
-
|
|
|
- // 头像呼吸效果
|
|
|
- messageAvatar.style.animation = 'avatarPulse 0.6s ease-out';
|
|
|
- }, 150);
|
|
|
-
|
|
|
- // 为列表项和引用块添加延迟动画
|
|
|
- setTimeout(() => {
|
|
|
- const animatedElements = messageDiv.querySelectorAll('.ai-list-item, .ai-quote');
|
|
|
- animatedElements.forEach((element, index) => {
|
|
|
- element.style.opacity = '0';
|
|
|
- element.style.transform = 'translateX(-20px)';
|
|
|
- element.style.transition = 'all 0.3s ease';
|
|
|
-
|
|
|
- setTimeout(() => {
|
|
|
- element.style.opacity = '1';
|
|
|
- element.style.transform = 'translateX(0)';
|
|
|
- }, index * 100);
|
|
|
- });
|
|
|
- }, 200);
|
|
|
-
|
|
|
- // 添加到对话历史
|
|
|
- aiChatHistory.push({
|
|
|
- type: 'ai',
|
|
|
- text: text,
|
|
|
- time: currentTime
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- function showUserMessage(text) {
|
|
|
- const messagesContainer = document.getElementById('aiChatMessages');
|
|
|
- const messageDiv = document.createElement('div');
|
|
|
- messageDiv.className = 'user-message';
|
|
|
-
|
|
|
- const currentTime = new Date().toLocaleTimeString('zh-CN', {
|
|
|
- hour: '2-digit',
|
|
|
- minute: '2-digit'
|
|
|
- });
|
|
|
-
|
|
|
- messageDiv.innerHTML = `
|
|
|
- <div class="message-avatar">👤</div>
|
|
|
- <div class="message-content">
|
|
|
- <div class="message-text">${text}</div>
|
|
|
- <div class="message-time">${currentTime}</div>
|
|
|
- </div>
|
|
|
- `;
|
|
|
-
|
|
|
- messagesContainer.appendChild(messageDiv);
|
|
|
- messagesContainer.scrollTop = messagesContainer.scrollHeight;
|
|
|
-
|
|
|
- // 添加简洁的入场动画
|
|
|
- messageDiv.style.opacity = '0';
|
|
|
- messageDiv.style.transform = 'translateY(15px) scale(0.98)';
|
|
|
-
|
|
|
- setTimeout(() => {
|
|
|
- messageDiv.style.transition = 'all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
|
|
|
- messageDiv.style.opacity = '1';
|
|
|
- messageDiv.style.transform = 'translateY(0) scale(1)';
|
|
|
- }, 50);
|
|
|
-
|
|
|
- // 添加到对话历史
|
|
|
- aiChatHistory.push({
|
|
|
- type: 'user',
|
|
|
- text: text,
|
|
|
- time: currentTime
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- function showAILoadingMessage() {
|
|
|
- const messagesContainer = document.getElementById('aiChatMessages');
|
|
|
- const messageDiv = document.createElement('div');
|
|
|
- messageDiv.className = 'ai-message loading-message';
|
|
|
- messageDiv.id = 'ai-loading-message';
|
|
|
-
|
|
|
- messageDiv.innerHTML = `
|
|
|
- <div class="message-avatar">🤖</div>
|
|
|
- <div class="message-content">
|
|
|
- <div class="message-text">
|
|
|
- <span class="loading-dots">DeepSeek AI正在思考中</span>
|
|
|
- <span class="dots">...</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- `;
|
|
|
-
|
|
|
- messagesContainer.appendChild(messageDiv);
|
|
|
- messagesContainer.scrollTop = messagesContainer.scrollHeight;
|
|
|
-
|
|
|
- // 添加动画效果
|
|
|
- const dots = messageDiv.querySelector('.dots');
|
|
|
- let dotCount = 0;
|
|
|
- const loadingInterval = setInterval(() => {
|
|
|
- dotCount = (dotCount + 1) % 4;
|
|
|
- dots.textContent = '.'.repeat(dotCount);
|
|
|
- }, 500);
|
|
|
-
|
|
|
- messageDiv.loadingInterval = loadingInterval;
|
|
|
- }
|
|
|
-
|
|
|
- function removeAILoadingMessage() {
|
|
|
- const loadingMessage = document.getElementById('ai-loading-message');
|
|
|
- if (loadingMessage) {
|
|
|
- if (loadingMessage.loadingInterval) {
|
|
|
- clearInterval(loadingMessage.loadingInterval);
|
|
|
- }
|
|
|
- loadingMessage.remove();
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- async function sendMessage() {
|
|
|
- const input = document.getElementById('aiChatInput');
|
|
|
- const message = input.value.trim();
|
|
|
-
|
|
|
- if (!message) return;
|
|
|
-
|
|
|
- // 显示用户消息
|
|
|
- showUserMessage(message);
|
|
|
- input.value = '';
|
|
|
-
|
|
|
- // 显示加载指示器
|
|
|
- showAILoadingMessage();
|
|
|
-
|
|
|
- try {
|
|
|
- // 构建上下文信息
|
|
|
- const context = {
|
|
|
- current_design: currentBodyPart && partColors ? {
|
|
|
- selected_part: currentBodyPart,
|
|
|
- colors: partColors
|
|
|
- } : null,
|
|
|
- conversation_history: aiChatHistory.slice(-5) // 保留最近5轮对话
|
|
|
- };
|
|
|
-
|
|
|
- // 调用真实的AI API
|
|
|
- const aiResponse = await AIService.chat(message, context);
|
|
|
-
|
|
|
- // 移除加载指示器
|
|
|
- removeAILoadingMessage();
|
|
|
-
|
|
|
- // 显示AI回复
|
|
|
- showAIMessage(aiResponse.response);
|
|
|
-
|
|
|
- // 处理AI建议
|
|
|
- if (aiResponse.suggestions && aiResponse.suggestions.length > 0) {
|
|
|
- setTimeout(() => {
|
|
|
- aiResponse.suggestions.forEach(suggestion => {
|
|
|
- if (suggestion.type === 'color') {
|
|
|
- showAIMessage(`💡 配色建议：${suggestion.reason}`);
|
|
|
- }
|
|
|
- });
|
|
|
- }, 1000);
|
|
|
- }
|
|
|
-
|
|
|
- // 保存对话历史
|
|
|
- aiChatHistory.push({
|
|
|
- user: message,
|
|
|
- assistant: aiResponse.response,
|
|
|
- timestamp: Date.now()
|
|
|
- });
|
|
|
-
|
|
|
- // 已移除自动跳转到推荐结果页面的功能
|
|
|
- // 用户可以通过手动方式访问推荐功能
|
|
|
-
|
|
|
- } catch (error) {
|
|
|
- // 移除加载指示器
|
|
|
- removeAILoadingMessage();
|
|
|
-
|
|
|
- // 如果API调用失败，回退到模拟回复
|
|
|
- setTimeout(() => {
|
|
|
- const fallbackResponse = generateAIResponse(message);
|
|
|
- showAIMessage(fallbackResponse);
|
|
|
-
|
|
|
- if (shouldShowRecommendation(message)) {
|
|
|
- setTimeout(() => {
|
|
|
- showAIMessage('我已经为您准备了专属的搭配方案，点击查看详细推荐！');
|
|
|
- setTimeout(() => {
|
|
|
- openRecommendationResult();
|
|
|
- }, 1000);
|
|
|
- }, 2000);
|
|
|
- }
|
|
|
- }, 1000 + Math.random() * 2000);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- async function sendQuickCommand(command) {
|
|
|
- // 隐藏快捷指令
|
|
|
- const quickCommands = document.getElementById('aiQuickCommands');
|
|
|
- quickCommands.style.display = 'none';
|
|
|
-
|
|
|
- // 发送快捷指令
|
|
|
- showUserMessage(command);
|
|
|
-
|
|
|
- // 显示加载指示器
|
|
|
- showAILoadingMessage();
|
|
|
-
|
|
|
- try {
|
|
|
- // 构建上下文信息
|
|
|
- const context = {
|
|
|
- current_design: currentBodyPart && partColors ? {
|
|
|
- selected_part: currentBodyPart,
|
|
|
- colors: partColors
|
|
|
- } : null,
|
|
|
- conversation_history: aiChatHistory.slice(-5) // 保留最近5轮对话
|
|
|
- };
|
|
|
-
|
|
|
- // 调用DeepSeek AI API
|
|
|
- const aiResponse = await AIService.chat(command, context);
|
|
|
-
|
|
|
- // 移除加载指示器
|
|
|
- removeAILoadingMessage();
|
|
|
-
|
|
|
- // 显示AI回复
|
|
|
- showAIMessage(aiResponse.response);
|
|
|
-
|
|
|
- // 处理AI建议
|
|
|
- if (aiResponse.suggestions && aiResponse.suggestions.length > 0) {
|
|
|
- setTimeout(() => {
|
|
|
- aiResponse.suggestions.forEach(suggestion => {
|
|
|
- if (suggestion.type === 'color') {
|
|
|
- showAIMessage(`💡 配色建议：${suggestion.reason}`);
|
|
|
- }
|
|
|
- });
|
|
|
- }, 1000);
|
|
|
- }
|
|
|
-
|
|
|
- // 保存对话历史
|
|
|
- aiChatHistory.push({
|
|
|
- user: command,
|
|
|
- assistant: aiResponse.response,
|
|
|
- timestamp: Date.now()
|
|
|
- });
|
|
|
-
|
|
|
- // 检查是否需要显示推荐结果
|
|
|
- if (shouldShowRecommendation(command)) {
|
|
|
- setTimeout(() => {
|
|
|
- showAIMessage('我为您精心准备了搭配方案，让我们来看看推荐结果！');
|
|
|
- setTimeout(() => {
|
|
|
- openRecommendationResult();
|
|
|
- }, 1000);
|
|
|
- }, 2000);
|
|
|
- }
|
|
|
-
|
|
|
- } catch (error) {
|
|
|
- // 移除加载指示器
|
|
|
- removeAILoadingMessage();
|
|
|
-
|
|
|
- // 如果API调用失败，回退到模拟回复
|
|
|
- setTimeout(() => {
|
|
|
- const fallbackResponse = generateAIResponse(command);
|
|
|
- showAIMessage(fallbackResponse);
|
|
|
-
|
|
|
- if (shouldShowRecommendation(command)) {
|
|
|
- setTimeout(() => {
|
|
|
- showAIMessage('我为您精心准备了搭配方案，让我们来看看推荐结果！');
|
|
|
- setTimeout(() => {
|
|
|
- openRecommendationResult();
|
|
|
- }, 1000);
|
|
|
- }, 2000);
|
|
|
- }
|
|
|
- }, 1500);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- function generateAIResponse(userMessage) {
|
|
|
- const responses = {
|
|
|
- '商务': [
|
|
|
- '商务装搭配需要注重专业感和权威性。推荐选择深色西装，搭配白色或浅蓝色衬衫，以及经典的领带。',
|
|
|
- '对于商务场合，建议选择海军蓝或深灰色作为主色调，这样既显稳重又不失现代感。'
|
|
|
- ],
|
|
|
- '休闲': [
|
|
|
- '休闲装的核心是舒适与时尚的平衡。可以尝试牛仔裤搭配舒适的T恤或针织衫。',
|
|
|
- '休闲风格可以更多地运用色彩层次，比如浅色系的组合会让人看起来更加放松自然。'
|
|
|
- ],
|
|
|
- '春季': [
|
|
|
- '春季流行色彩偏向清新自然，推荐薄荷绿、樱花粉、天空蓝等颜色。',
|
|
|
- '春天是万物复苏的季节，服装色彩也应该充满生机，浅色调和柔和的渐变色都是不错的选择。'
|
|
|
- ],
|
|
|
- '约会': [
|
|
|
- '约会装要在优雅与个性之间找到平衡。推荐选择有设计感但不过分夸张的单品。',
|
|
|
- '约会时的配色可以选择温暖的色调，比如粉色、桃色或者优雅的紫色系。'
|
|
|
- ]
|
|
|
- };
|
|
|
-
|
|
|
- // 简单的关键词匹配
|
|
|
- for (let keyword in responses) {
|
|
|
- if (userMessage.includes(keyword)) {
|
|
|
- const keywordResponses = responses[keyword];
|
|
|
- return keywordResponses[Math.floor(Math.random() * keywordResponses.length)];
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 默认回复
|
|
|
- const defaultResponses = [
|
|
|
- '这是一个很有趣的想法！让我为您分析一下最适合的搭配方案。',
|
|
|
- '根据您的需求，我建议从色彩搭配入手，创造出和谐统一的视觉效果。',
|
|
|
- '很好的问题！时尚搭配的关键在于了解自己的风格定位和场合需求。',
|
|
|
- '我理解您的想法，让我为您推荐一些专业的搭配建议。'
|
|
|
- ];
|
|
|
-
|
|
|
- return defaultResponses[Math.floor(Math.random() * defaultResponses.length)];
|
|
|
- }
|
|
|
-
|
|
|
- function shouldShowRecommendation(message) {
|
|
|
- const triggerWords = ['搭配', '推荐', '建议', '方案', '帮我', '想要', '设计'];
|
|
|
- return triggerWords.some(word => message.includes(word));
|
|
|
- }
|
|
|
-
|
|
|
- function handleChatInputKeypress(event) {
|
|
|
- if (event.key === 'Enter') {
|
|
|
- sendMessage();
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 多模态输入功能
|
|
|
- function startVoiceInput() {
|
|
|
- if (isVoiceRecording) {
|
|
|
- stopVoiceInput();
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- isVoiceRecording = true;
|
|
|
- const button = event.target.closest('.input-tool');
|
|
|
- button.style.background = 'rgba(255, 107, 107, 0.3)';
|
|
|
- button.innerHTML = '<span class="tool-icon">⏸️</span>';
|
|
|
-
|
|
|
- showNotification('语音输入', '正在录音中...');
|
|
|
-
|
|
|
- // 模拟语音识别
|
|
|
- setTimeout(() => {
|
|
|
- stopVoiceInput();
|
|
|
- const input = document.getElementById('aiChatInput');
|
|
|
- input.value = '帮我搭配一套适合春天的休闲装';
|
|
|
- showNotification('语音识别', '语音转换完成');
|
|
|
- }, 3000);
|
|
|
- }
|
|
|
-
|
|
|
- function stopVoiceInput() {
|
|
|
- isVoiceRecording = false;
|
|
|
- const button = document.querySelector('.input-tool');
|
|
|
- button.style.background = 'rgba(255,255,255,0.15)';
|
|
|
- button.innerHTML = '<span class="tool-icon">🎤</span>';
|
|
|
- }
|
|
|
-
|
|
|
- function uploadImage() {
|
|
|
- // 创建文件输入
|
|
|
- const fileInput = document.createElement('input');
|
|
|
- fileInput.type = 'file';
|
|
|
- fileInput.accept = 'image/*';
|
|
|
-
|
|
|
- fileInput.onchange = function(e) {
|
|
|
- const file = e.target.files[0];
|
|
|
- if (file) {
|
|
|
- showNotification('图片识别', '正在分析您的穿搭照片...');
|
|
|
-
|
|
|
- // 模拟图片识别
|
|
|
- setTimeout(() => {
|
|
|
- showUserMessage('📷 [已上传穿搭照片]');
|
|
|
- setTimeout(() => {
|
|
|
- showAIMessage('我看到您穿的是一套休闲风格的搭配！主要颜色是蓝色系，整体很清新。我可以为您推荐一些类似风格但更加时尚的搭配方案。');
|
|
|
- }, 1500);
|
|
|
- }, 2000);
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- fileInput.click();
|
|
|
- }
|
|
|
-
|
|
|
- function showEmoji() {
|
|
|
- const emojis = ['😊', '👍', '❤️', '✨', '🎨', '👔', '👕', '👗', '💫', '🌟'];
|
|
|
- const input = document.getElementById('aiChatInput');
|
|
|
- const randomEmoji = emojis[Math.floor(Math.random() * emojis.length)];
|
|
|
- input.value += randomEmoji;
|
|
|
- input.focus();
|
|
|
- }
|
|
|
-
|
|
|
- // 悬浮球点击事件
|
|
|
- document.addEventListener('DOMContentLoaded', function() {
|
|
|
- const floatingBall = document.getElementById('aiFloatingBall');
|
|
|
- if (floatingBall) {
|
|
|
- floatingBall.addEventListener('click', function() {
|
|
|
- openAIChat('free');
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 推荐结果页面功能
|
|
|
- function openRecommendationResult() {
|
|
|
- closeAIChat();
|
|
|
- const modal = document.getElementById('aiRecommendationModal');
|
|
|
- modal.style.display = 'flex';
|
|
|
- document.body.style.overflow = 'hidden';
|
|
|
-
|
|
|
- // 初始化推荐内容
|
|
|
- updateRecommendationContent();
|
|
|
- }
|
|
|
-
|
|
|
- function closeRecommendation() {
|
|
|
- const modal = document.getElementById('aiRecommendationModal');
|
|
|
- modal.style.display = 'none';
|
|
|
- document.body.style.overflow = 'auto';
|
|
|
- }
|
|
|
-
|
|
|
- function updateRecommendationContent() {
|
|
|
- const schemes = {
|
|
|
- 'scheme1': {
|
|
|
- name: '经典商务风',
|
|
|
- colors: ['#2c3e50', '#34495e', '#95a5a6'],
|
|
|
- theory: [
|
|
|
- {
|
|
|
- icon: '🎯',
|
|
|
- title: '主色调选择',
|
|
|
- desc: '基于您的需求，选择了沉稳的深蓝色作为主色调，既显专业又不失现代感。'
|
|
|
- },
|
|
|
- {
|
|
|
- icon: '🌈',
|
|
|
- title: '色彩搭配',
|
|
|
- desc: '采用单色调搭配法，深浅不同的蓝色系营造层次感和稳重感。'
|
|
|
- },
|
|
|
- {
|
|
|
- icon: '✨',
|
|
|
- title: '视觉效果',
|
|
|
- desc: '整体造型简洁大方，适合商务场合，彰显专业形象。'
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- 'scheme2': {
|
|
|
- name: '春日清新风',
|
|
|
- colors: ['#f39c12', '#e67e22', '#d35400'],
|
|
|
- theory: [
|
|
|
- {
|
|
|
- icon: '🎯',
|
|
|
- title: '季节特色',
|
|
|
- desc: '春季专属的温暖色调，充满生机与活力，让人眼前一亮。'
|
|
|
- },
|
|
|
- {
|
|
|
- icon: '🌈',
|
|
|
- title: '暖色搭配',
|
|
|
- desc: '橙色系的渐变搭配，营造温暖阳光的感觉，适合春日出行。'
|
|
|
- },
|
|
|
- {
|
|
|
- icon: '✨',
|
|
|
- title: '心理效应',
|
|
|
- desc: '暖色调能够提升心情，增加亲和力和活力感。'
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- 'scheme3': {
|
|
|
- name: '优雅紫罗兰',
|
|
|
- colors: ['#9b59b6', '#8e44ad', '#663399'],
|
|
|
- theory: [
|
|
|
- {
|
|
|
- icon: '🎯',
|
|
|
- title: '色彩心理',
|
|
|
- desc: '紫色代表优雅与神秘，是富有创造力和艺术感的颜色选择。'
|
|
|
- },
|
|
|
- {
|
|
|
- icon: '🌈',
|
|
|
- title: '渐变层次',
|
|
|
- desc: '紫色系的深浅渐变，创造出丰富的视觉层次和高级感。'
|
|
|
- },
|
|
|
- {
|
|
|
- icon: '✨',
|
|
|
- title: '独特气质',
|
|
|
- desc: '紫色搭配能够突出个人品味，展现独特的时尚态度。'
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- const currentScheme = schemes[currentRecommendationScheme];
|
|
|
- const theoryContent = document.getElementById('colorTheoryContent');
|
|
|
-
|
|
|
- theoryContent.innerHTML = currentScheme.theory.map(item => `
|
|
|
- <div class="theory-card">
|
|
|
- <div class="theory-icon">${item.icon}</div>
|
|
|
- <div class="theory-text">
|
|
|
- <h5>${item.title}</h5>
|
|
|
- <p>${item.desc}</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- `).join('');
|
|
|
- }
|
|
|
-
|
|
|
- function selectScheme(schemeId) {
|
|
|
- currentRecommendationScheme = schemeId;
|
|
|
-
|
|
|
- // 更新方案选择状态
|
|
|
- const tabs = document.querySelectorAll('.scheme-tab');
|
|
|
- tabs.forEach(tab => tab.classList.remove('active'));
|
|
|
- event.target.classList.add('active');
|
|
|
-
|
|
|
- // 更新推荐内容
|
|
|
- updateRecommendationContent();
|
|
|
-
|
|
|
- const schemeNames = {
|
|
|
- 'scheme1': '经典商务风',
|
|
|
- 'scheme2': '春日清新风',
|
|
|
- 'scheme3': '优雅紫罗兰'
|
|
|
- };
|
|
|
-
|
|
|
- showNotification('方案切换', `已切换到${schemeNames[schemeId]}`);
|
|
|
- }
|
|
|
-
|
|
|
- function rotateModel(direction) {
|
|
|
- const model = document.querySelector('.model-3d-display');
|
|
|
- let currentRotation = parseInt(model.dataset.rotation || '0');
|
|
|
-
|
|
|
- if (direction === 'left') {
|
|
|
- currentRotation -= 90;
|
|
|
- } else if (direction === 'right') {
|
|
|
- currentRotation += 90;
|
|
|
- }
|
|
|
-
|
|
|
- model.style.transform = `rotateY(${currentRotation}deg)`;
|
|
|
- model.dataset.rotation = currentRotation;
|
|
|
-
|
|
|
- showNotification('3D旋转', `模型已旋转 ${direction === 'left' ? '向左' : '向右'} 90°`);
|
|
|
- }
|
|
|
-
|
|
|
- function resetModel() {
|
|
|
- const model = document.querySelector('.model-3d-display');
|
|
|
- model.style.transform = 'rotateY(0deg)';
|
|
|
- model.dataset.rotation = '0';
|
|
|
- showNotification('视角重置', '已重置到正面视角');
|
|
|
- }
|
|
|
-
|
|
|
- function shareRecommendation() {
|
|
|
- showNotification('分享成功', '推荐方案已复制到剪贴板');
|
|
|
- }
|
|
|
-
|
|
|
- function saveRecommendation() {
|
|
|
- showNotification('收藏成功', '推荐方案已保存到我的收藏');
|
|
|
- }
|
|
|
-
|
|
|
- function importToDesignCenter() {
|
|
|
- closeRecommendation();
|
|
|
- switchPage('design');
|
|
|
- updateNavigation('design');
|
|
|
- showNotification('导入成功', 'AI推荐方案已导入到设计中心');
|
|
|
- }
|
|
|
-
|
|
|
- function viewAIRecommendation(type) {
|
|
|
- const recommendationTypes = {
|
|
|
- 'business': '商务精英装',
|
|
|
- 'casual': '休闲度假风'
|
|
|
- };
|
|
|
-
|
|
|
- showNotification('查看推荐', `正在查看${recommendationTypes[type]}推荐`);
|
|
|
- setTimeout(() => {
|
|
|
- openRecommendationResult();
|
|
|
- }, 1000);
|
|
|
- }
|
|
|
-
|
|
|
- // 保持向后兼容
|
|
|
- function showAIRecommend(style) {
|
|
|
- openAIChat('free');
|
|
|
- setTimeout(() => {
|
|
|
- sendQuickCommand(`帮我搭配一套${style}风格的服装`);
|
|
|
- }, 1000);
|
|
|
- }
|
|
|
-
|
|
|
- // 新版设计中心全局变量
|
|
|
- let currentBodyPart = 'overall';
|
|
|
- let currentMaterial = 'cotton';
|
|
|
- let modelRotation = 0;
|
|
|
- let partColors = {
|
|
|
- 'overall': '#ff6b6b',
|
|
|
- 'left-sleeve': '#ff6b6b',
|
|
|
- 'right-sleeve': '#ff6b6b',
|
|
|
- 'hood': '#ff6b6b',
|
|
|
- 'body': '#ff6b6b'
|
|
|
- };
|
|
|
- let colorHistory = [];
|
|
|
-
|
|
|
- // 3D模型控制函数
|
|
|
- function rotateModel(direction) {
|
|
|
- const model = document.getElementById('main3DModel');
|
|
|
- if (direction === 'left') {
|
|
|
- modelRotation -= 90;
|
|
|
- } else if (direction === 'right') {
|
|
|
- modelRotation += 90;
|
|
|
- }
|
|
|
-
|
|
|
- model.style.transform = `rotateY(${modelRotation}deg)`;
|
|
|
- showNotification('3D旋转', `模型已旋转到 ${modelRotation}°`);
|
|
|
- }
|
|
|
-
|
|
|
- function resetModelView() {
|
|
|
- modelRotation = 0;
|
|
|
- const model = document.getElementById('main3DModel');
|
|
|
- model.style.transform = 'rotateY(0deg)';
|
|
|
- showNotification('视角重置', '已重置为正面视角');
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- // 分区控制面板
|
|
|
- function toggleZonePanel() {
|
|
|
- const content = document.querySelector('.zone-control-panel .panel-content');
|
|
|
- const btn = document.querySelector('.expand-btn');
|
|
|
-
|
|
|
- if (content.style.display === 'none') {
|
|
|
- content.style.display = 'block';
|
|
|
- btn.textContent = '⌄';
|
|
|
- } else {
|
|
|
- content.style.display = 'none';
|
|
|
- btn.textContent = '⌃';
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 部位选择功能
|
|
|
- function selectBodyPart(part) {
|
|
|
- currentBodyPart = part;
|
|
|
-
|
|
|
- // 更新Tab状态
|
|
|
- const partTabs = document.querySelectorAll('.part-tab');
|
|
|
- partTabs.forEach(tab => tab.classList.remove('active'));
|
|
|
- document.querySelector(`[data-part="${part}"]`).classList.add('active');
|
|
|
-
|
|
|
- // 更新当前部位显示
|
|
|
- const partNames = {
|
|
|
- 'overall': '整体',
|
|
|
- 'left-sleeve': '左袖',
|
|
|
- 'right-sleeve': '右袖',
|
|
|
- 'hood': '帽子',
|
|
|
- 'body': '身体'
|
|
|
- };
|
|
|
-
|
|
|
- document.getElementById('currentPartName').textContent = partNames[part];
|
|
|
- document.getElementById('currentPartColor').style.background = partColors[part];
|
|
|
-
|
|
|
- // 更新3D模型高亮效果
|
|
|
- highlightBodyPart(part);
|
|
|
-
|
|
|
- showNotification('部位选择', `已选择 ${partNames[part]} 部位`);
|
|
|
- }
|
|
|
-
|
|
|
- function highlightBodyPart(part) {
|
|
|
- // 这里可以添加3D模型部位高亮的逻辑
|
|
|
- const model = document.getElementById('main3DModel');
|
|
|
-
|
|
|
- // 根据选择的部位显示不同的模型或高亮效果
|
|
|
- switch(part) {
|
|
|
- case 'overall':
|
|
|
- model.textContent = '👕';
|
|
|
- break;
|
|
|
- case 'left-sleeve':
|
|
|
- model.textContent = '👈👕';
|
|
|
- break;
|
|
|
- case 'right-sleeve':
|
|
|
- model.textContent = '👕👉';
|
|
|
- break;
|
|
|
- case 'hood':
|
|
|
- model.textContent = '🎩👕';
|
|
|
- break;
|
|
|
- case 'body':
|
|
|
- model.textContent = '👕';
|
|
|
- break;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- // 颜色选择功能（增强版）
|
|
|
- function selectColor(color) {
|
|
|
- selectedColor = color;
|
|
|
- partColors[currentBodyPart] = color;
|
|
|
-
|
|
|
- // 更新颜色选择状态
|
|
|
- const swatches = document.querySelectorAll('.color-swatch');
|
|
|
- swatches.forEach(swatch => {
|
|
|
- swatch.classList.remove('active');
|
|
|
- if (swatch.getAttribute('data-color') === color) {
|
|
|
- swatch.classList.add('active');
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 更新当前部位颜色指示器
|
|
|
- document.getElementById('currentPartColor').style.background = color;
|
|
|
-
|
|
|
- // 保存到历史记录
|
|
|
- if (!colorHistory.includes(color)) {
|
|
|
- colorHistory.push(color);
|
|
|
- if (colorHistory.length > 10) {
|
|
|
- colorHistory.shift();
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 更新3D模型颜色
|
|
|
- const model = document.getElementById('main3DModel');
|
|
|
- model.style.color = color;
|
|
|
-
|
|
|
- showNotification('颜色应用', `${currentBodyPart} 部位已应用颜色 ${color}`);
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- // 自定义颜色选择
|
|
|
- function selectCustomColor(color) {
|
|
|
- selectColor(color);
|
|
|
- }
|
|
|
-
|
|
|
- function addCustomColor() {
|
|
|
- const customColor = document.getElementById('customColorPicker').value;
|
|
|
- selectColor(customColor);
|
|
|
- showNotification('自定义颜色', '已添加自定义颜色到色盘');
|
|
|
- }
|
|
|
-
|
|
|
- // 色盘管理功能
|
|
|
- function syncColorToAll() {
|
|
|
- const currentColor = partColors[currentBodyPart];
|
|
|
- Object.keys(partColors).forEach(part => {
|
|
|
- partColors[part] = currentColor;
|
|
|
- });
|
|
|
-
|
|
|
- showNotification('颜色同步', '已将当前颜色同步到所有部位');
|
|
|
- }
|
|
|
-
|
|
|
- function showColorHistory() {
|
|
|
- const historySection = document.getElementById('colorHistorySection');
|
|
|
- if (historySection.style.display === 'none') {
|
|
|
- historySection.style.display = 'block';
|
|
|
- } else {
|
|
|
- historySection.style.display = 'none';
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // AI智能配色推荐
|
|
|
- async function getAIColorRecommendation() {
|
|
|
- try {
|
|
|
- // 获取当前设计上下文
|
|
|
- const params = {
|
|
|
- style: 'casual', // 可以根据用户选择的风格来设置
|
|
|
- base_color: partColors['overall'] || '#ff6b6b',
|
|
|
- season: getCurrentSeason(),
|
|
|
- occasion: 'daily'
|
|
|
- };
|
|
|
-
|
|
|
- const recommendations = await AIService.getColorRecommendations(params);
|
|
|
-
|
|
|
- if (recommendations && recommendations.recommendations) {
|
|
|
- showAIColorRecommendations(recommendations.recommendations);
|
|
|
- }
|
|
|
-
|
|
|
- } catch (error) {
|
|
|
- // 如果API失败，显示预设的配色方案
|
|
|
- showNotification('AI推荐', '正在为您准备智能配色方案...');
|
|
|
- setTimeout(() => {
|
|
|
- showPresetColorRecommendations();
|
|
|
- }, 1500);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- function getCurrentSeason() {
|
|
|
- const month = new Date().getMonth() + 1;
|
|
|
- if (month >= 3 && month <= 5) return 'spring';
|
|
|
- if (month >= 6 && month <= 8) return 'summer';
|
|
|
- if (month >= 9 && month <= 11) return 'autumn';
|
|
|
- return 'winter';
|
|
|
- }
|
|
|
-
|
|
|
- function showAIColorRecommendations(recommendations) {
|
|
|
- const recommendationHtml = `
|
|
|
- <div id="aiColorModal" style="
|
|
|
- position: fixed;
|
|
|
- top: 0; left: 0;
|
|
|
- width: 100%; height: 100%;
|
|
|
- background: rgba(0,0,0,0.8);
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- z-index: 10000;
|
|
|
- ">
|
|
|
- <div style="
|
|
|
- background: white;
|
|
|
- padding: 30px;
|
|
|
- border-radius: 15px;
|
|
|
- width: 90%;
|
|
|
- max-width: 500px;
|
|
|
- box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
|
|
- max-height: 80vh;
|
|
|
- overflow-y: auto;
|
|
|
- ">
|
|
|
- <h2 style="text-align: center; margin-bottom: 20px; color: #333;">🎨 AI智能配色推荐</h2>
|
|
|
- <div id="recommendationsList">
|
|
|
- ${recommendations.map((rec, index) => `
|
|
|
- <div style="
|
|
|
- border: 2px solid #eee;
|
|
|
- border-radius: 10px;
|
|
|
- padding: 15px;
|
|
|
- margin-bottom: 15px;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.3s;
|
|
|
- " onclick="applyAIColorScheme(${JSON.stringify(rec.colors).replace(/"/g, '"')}, '${rec.scheme_name}')">
|
|
|
- <h3 style="margin: 0 0 10px 0; color: #333;">${rec.scheme_name}</h3>
|
|
|
- <div style="display: flex; gap: 10px; margin-bottom: 10px;">
|
|
|
- ${Object.values(rec.colors).map(color => `
|
|
|
- <div style="
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- background: ${color};
|
|
|
- border-radius: 50%;
|
|
|
- border: 2px solid #fff;
|
|
|
- box-shadow: 0 2px 5px rgba(0,0,0,0.2);
|
|
|
- "></div>
|
|
|
- `).join('')}
|
|
|
- </div>
|
|
|
- <p style="margin: 0; font-size: 14px; color: #666;">${rec.theory ? rec.theory.description : '经典配色方案'}</p>
|
|
|
- <div style="
|
|
|
- background: linear-gradient(45deg, #4ecdc4, #44a08d);
|
|
|
- color: white;
|
|
|
- padding: 8px 15px;
|
|
|
- border-radius: 5px;
|
|
|
- text-align: center;
|
|
|
- margin-top: 10px;
|
|
|
- font-size: 14px;
|
|
|
- ">点击应用此配色方案</div>
|
|
|
- </div>
|
|
|
- `).join('')}
|
|
|
- </div>
|
|
|
- <button onclick="closeAIColorModal()" style="
|
|
|
- width: 100%;
|
|
|
- padding: 12px;
|
|
|
- background: #f0f0f0;
|
|
|
- color: #333;
|
|
|
- border: none;
|
|
|
- border-radius: 8px;
|
|
|
- font-size: 16px;
|
|
|
- cursor: pointer;
|
|
|
- margin-top: 10px;
|
|
|
- ">关闭</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- `;
|
|
|
- document.body.insertAdjacentHTML('beforeend', recommendationHtml);
|
|
|
- }
|
|
|
-
|
|
|
- function showPresetColorRecommendations() {
|
|
|
- const presetRecommendations = [
|
|
|
- {
|
|
|
- scheme_name: '商务精英',
|
|
|
- colors: { s1: '#1E3A8A', t1: '#FFFFFF', y1: '#000000', z1: '#C0C0C0' },
|
|
|
- theory: { description: '专业稳重，适合商务场合' }
|
|
|
- },
|
|
|
- {
|
|
|
- scheme_name: '春日暖阳',
|
|
|
- colors: { s1: '#FFA726', t1: '#FFE0B2', y1: '#FF8A65', z1: '#FFCC80' },
|
|
|
- theory: { description: '温暖明亮，充满活力' }
|
|
|
- },
|
|
|
- {
|
|
|
- scheme_name: '海洋清新',
|
|
|
- colors: { s1: '#26C6DA', t1: '#B2EBF2', y1: '#4DD0E1', z1: '#80DEEA' },
|
|
|
- theory: { description: '清新自然，如海风般舒适' }
|
|
|
- }
|
|
|
- ];
|
|
|
- showAIColorRecommendations(presetRecommendations);
|
|
|
- }
|
|
|
-
|
|
|
- function applyAIColorScheme(colors, schemeName) {
|
|
|
- // 应用AI推荐的配色方案
|
|
|
- partColors = {
|
|
|
- 'overall': colors.s1,
|
|
|
- 's1': colors.s1,
|
|
|
- 't1': colors.t1,
|
|
|
- 'y1': colors.y1,
|
|
|
- 'z1': colors.z1,
|
|
|
- 'left-sleeve': colors.s1,
|
|
|
- 'right-sleeve': colors.s1,
|
|
|
- 'hood': colors.y1,
|
|
|
- 'body': colors.t1
|
|
|
- };
|
|
|
-
|
|
|
- // 更新所有部位的颜色
|
|
|
- Object.keys(partColors).forEach(part => {
|
|
|
- if (part !== 'overall') {
|
|
|
- updatePartImage(part, getCurrentColorName(partColors[part]));
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 刷新当前选中部位的显示
|
|
|
- selectBodyPart(currentBodyPart);
|
|
|
-
|
|
|
- closeAIColorModal();
|
|
|
- showNotification('配色应用', `已应用"${schemeName}"配色方案`);
|
|
|
- }
|
|
|
-
|
|
|
- function getCurrentColorName(colorCode) {
|
|
|
- // 将颜色代码转换为颜色名称（这里简化处理）
|
|
|
- const colorMap = {
|
|
|
- '#ff6b6b': '红色',
|
|
|
- '#4ecdc4': '蒂芙尼蓝',
|
|
|
- '#ffeaa7': '靓丽黄',
|
|
|
- '#667eea': '长春花蓝',
|
|
|
- '#1E3A8A': '深蓝色',
|
|
|
- '#FFFFFF': '白色',
|
|
|
- '#000000': '黑色',
|
|
|
- '#C0C0C0': '银色',
|
|
|
- '#FFA726': '橘色',
|
|
|
- '#26C6DA': '蒂芙尼蓝'
|
|
|
- };
|
|
|
- return colorMap[colorCode] || '宝蓝色'; // 默认返回宝蓝色
|
|
|
- }
|
|
|
-
|
|
|
- function closeAIColorModal() {
|
|
|
- const modal = document.getElementById('aiColorModal');
|
|
|
- if (modal) modal.remove();
|
|
|
- }
|
|
|
-
|
|
|
- async function saveColorScheme() {
|
|
|
- const schemeName = prompt('请输入配色方案名称：');
|
|
|
- if (schemeName) {
|
|
|
- try {
|
|
|
- const schemeData = {
|
|
|
- scheme_name: schemeName,
|
|
|
- colors: {
|
|
|
- s1: partColors['s1'] || partColors['overall'],
|
|
|
- t1: partColors['t1'] || partColors['overall'],
|
|
|
- y1: partColors['y1'] || partColors['overall'],
|
|
|
- z1: partColors['z1'] || partColors['overall']
|
|
|
- },
|
|
|
- description: `用户自定义配色方案 - ${new Date().toLocaleDateString()}`
|
|
|
- };
|
|
|
-
|
|
|
- await DesignService.saveColorScheme(schemeData);
|
|
|
- } catch (error) {
|
|
|
- // 如果API调用失败，回退到本地存储
|
|
|
- localStorage.setItem(`colorScheme_${Date.now()}`, JSON.stringify({
|
|
|
- name: schemeName,
|
|
|
- colors: partColors,
|
|
|
- timestamp: Date.now()
|
|
|
- }));
|
|
|
-
|
|
|
- showNotification('方案保存', `配色方案 "${schemeName}" 已保存到本地`);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- function loadColorScheme(schemeId) {
|
|
|
- // 预设的配色方案
|
|
|
- const schemes = {
|
|
|
- 'scheme1': {
|
|
|
- 'overall': '#ff6b6b',
|
|
|
- 'left-sleeve': '#4ecdc4',
|
|
|
- 'right-sleeve': '#4ecdc4',
|
|
|
- 'hood': '#ffeaa7',
|
|
|
- 'body': '#ff6b6b'
|
|
|
- },
|
|
|
- 'scheme2': {
|
|
|
- 'overall': '#667eea',
|
|
|
- 'left-sleeve': '#764ba2',
|
|
|
- 'right-sleeve': '#764ba2',
|
|
|
- 'hood': '#a29bfe',
|
|
|
- 'body': '#667eea'
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- const scheme = schemes[schemeId];
|
|
|
- if (scheme) {
|
|
|
- partColors = {...scheme};
|
|
|
- selectBodyPart(currentBodyPart); // 刷新显示
|
|
|
- showNotification('方案加载', '配色方案已加载');
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 高级定制工具函数
|
|
|
- function openAdvancedEmbroidery() {
|
|
|
- showNotification('刺绣编辑器', `正在为 ${currentBodyPart} 部位开启高级刺绣编辑器`);
|
|
|
- }
|
|
|
-
|
|
|
- function openTextureSystem() {
|
|
|
- showNotification('贴图系统', `正在为 ${currentBodyPart} 部位开启贴图编辑系统`);
|
|
|
- }
|
|
|
-
|
|
|
- function openPatternLibrary() {
|
|
|
- showNotification('图案库', '正在打开海量设计素材库');
|
|
|
- }
|
|
|
-
|
|
|
- function openAIDesigner() {
|
|
|
- getAIColorRecommendation();
|
|
|
- }
|
|
|
-
|
|
|
- // 服装切片图颜色切换功能
|
|
|
- let currentSelectedPart = 'overall';
|
|
|
- let availableColors = [
|
|
|
- // 原有颜色
|
|
|
- '蓝色', '粉色', '牛油果绿', '白色', '黑色', '橘色', '利灰',
|
|
|
- // 新增颜色
|
|
|
- '宝蓝色', '浅驼色', '测试色', '深灰绿', '深紫色', '深绿色',
|
|
|
- '真朱', '睿智金', '红色', '萌萌绿', '蒂芙尼蓝', '长春花蓝',
|
|
|
- '青紫', '靓丽黄'
|
|
|
- ];
|
|
|
-
|
|
|
- function selectClothingColor(colorName) {
|
|
|
- console.log('选择颜色:', colorName, '当前部位:', currentSelectedPart);
|
|
|
-
|
|
|
- if (currentSelectedPart === 'overall') {
|
|
|
- // 整体颜色切换 - 所有部位
|
|
|
- updateAllParts(colorName);
|
|
|
- } else {
|
|
|
- // 单独部位颜色切换
|
|
|
- updateSinglePart(currentSelectedPart, colorName);
|
|
|
- }
|
|
|
-
|
|
|
- // 更新颜色选择状态
|
|
|
- updateColorSwatchState(colorName);
|
|
|
-
|
|
|
- showNotification('颜色切换', `已切换到${colorName}`);
|
|
|
- }
|
|
|
-
|
|
|
- function updateAllParts(colorName) {
|
|
|
- const parts = ['s1', 't1', 'y1', 'z1'];
|
|
|
- parts.forEach(part => {
|
|
|
- updatePartImage(part, colorName);
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- function updateSinglePart(partName, colorName) {
|
|
|
- updatePartImage(partName, colorName);
|
|
|
- }
|
|
|
-
|
|
|
- function updatePartImage(partName, colorName) {
|
|
|
- const imgElement = document.querySelector(`#layer-${partName} img`);
|
|
|
- if (imgElement) {
|
|
|
- const imagePath = getImagePath(partName, colorName);
|
|
|
- imgElement.src = imagePath;
|
|
|
- console.log('更新图片:', partName, '→', imagePath);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- function getImagePath(partName, colorName) {
|
|
|
- // 路径映射：优先查找新切片图，再查找原切片图
|
|
|
- function tryPath(basePath, partName, colorName) {
|
|
|
- const partMap = {
|
|
|
- 's1': 'S1.png',
|
|
|
- 't1': 'T1.png',
|
|
|
- 'y1': 'Y1.png',
|
|
|
- 'z1': 'Z1.png'
|
|
|
- };
|
|
|
-
|
|
|
- const filename = partMap[partName];
|
|
|
- if (!filename) return '';
|
|
|
-
|
|
|
- // 检查是否在新切片图中
|
|
|
- const newPath = `切片图/切片图/${colorName}/${filename}`;
|
|
|
-
|
|
|
- // 特殊处理：浅驼色的文件名是小写的
|
|
|
- if (colorName === '浅驼色') {
|
|
|
- const lowercaseFilename = filename.toLowerCase();
|
|
|
- return `切片图/切片图/${colorName}/${lowercaseFilename}`;
|
|
|
- }
|
|
|
-
|
|
|
- // 检查新切片图路径是否存在（这里我们假设新路径优先）
|
|
|
- if (['宝蓝色', '浅驼色', '测试色', '深灰绿', '深紫色', '深绿色',
|
|
|
- '真朱', '睿智金', '红色', '萌萌绿', '蒂芙尼蓝', '长春花蓝',
|
|
|
- '青紫', '靓丽黄'].includes(colorName)) {
|
|
|
- return newPath;
|
|
|
- }
|
|
|
-
|
|
|
- // 特殊处理：橘色和利灰只有T1和Y1
|
|
|
- if ((colorName === '橘色' || colorName === '利灰') && (partName === 's1' || partName === 'z1')) {
|
|
|
- // 如果橘色或利灰没有该部位，使用蓝色替代
|
|
|
- return `切片图共7个/切片图共7个/蓝色/${filename}`;
|
|
|
- }
|
|
|
-
|
|
|
- // 返回原切片图路径
|
|
|
- return `切片图共7个/切片图共7个/${colorName}/${filename}`;
|
|
|
- }
|
|
|
-
|
|
|
- return tryPath('', partName, colorName);
|
|
|
- }
|
|
|
-
|
|
|
- function selectBodyPart(partName) {
|
|
|
- console.log('选择部位:', partName);
|
|
|
- currentSelectedPart = partName;
|
|
|
-
|
|
|
- // 更新按钮状态
|
|
|
- document.querySelectorAll('.part-tab').forEach(tab => {
|
|
|
- tab.classList.remove('active');
|
|
|
- });
|
|
|
- document.querySelector(`[data-part="${partName}"]`).classList.add('active');
|
|
|
-
|
|
|
- // 更新当前部位名称显示
|
|
|
- const partNames = {
|
|
|
- 'overall': '整体',
|
|
|
- 's1': 'S1部位',
|
|
|
- 't1': 'T1部位',
|
|
|
- 'y1': 'Y1部位',
|
|
|
- 'z1': 'Z1部位'
|
|
|
- };
|
|
|
-
|
|
|
- document.getElementById('currentPartName').textContent = partNames[partName] || partName;
|
|
|
-
|
|
|
- // 高亮显示选中部位
|
|
|
- highlightSelectedPart(partName);
|
|
|
-
|
|
|
- showNotification('部位选择', `已选择${partNames[partName]}`);
|
|
|
- }
|
|
|
-
|
|
|
- function highlightSelectedPart(partName) {
|
|
|
- // 清除所有高亮
|
|
|
- document.querySelectorAll('.part-image').forEach(img => {
|
|
|
- img.classList.remove('highlighted', 'selected');
|
|
|
- });
|
|
|
-
|
|
|
- // 高亮选中部位
|
|
|
- if (partName !== 'overall') {
|
|
|
- const selectedImg = document.querySelector(`#layer-${partName} img`);
|
|
|
- if (selectedImg) {
|
|
|
- selectedImg.classList.add('selected');
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- function updateColorSwatchState(colorName) {
|
|
|
- document.querySelectorAll('.color-swatch').forEach(swatch => {
|
|
|
- swatch.classList.remove('active');
|
|
|
- if (swatch.getAttribute('data-color') === colorName) {
|
|
|
- swatch.classList.add('active');
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- // 兼容性函数（保持向后兼容）
|
|
|
- function openColorPicker() {
|
|
|
- showNotification('颜色设计器', '请使用下方的智能色盘系统');
|
|
|
- }
|
|
|
-
|
|
|
- function openPatternEditor() {
|
|
|
- openPatternLibrary();
|
|
|
- }
|
|
|
-
|
|
|
- function openEmbroidery() {
|
|
|
- openAdvancedEmbroidery();
|
|
|
- }
|
|
|
-
|
|
|
- function openAccessories() {
|
|
|
- showNotification('配饰搭配', '配饰功能将在高级定制中提供');
|
|
|
- }
|
|
|
-
|
|
|
- // AR试穿功能
|
|
|
- function selectScene(scene) {
|
|
|
- const sceneNames = {
|
|
|
- 'office': '办公场景',
|
|
|
- 'date': '约会场景',
|
|
|
- 'party': '派对场景',
|
|
|
- 'casual': '休闲场景'
|
|
|
- };
|
|
|
-
|
|
|
- showNotification('场景切换', `已切换到${sceneNames[scene]}`);
|
|
|
- }
|
|
|
-
|
|
|
- // 社区功能
|
|
|
- function likeWork(element) {
|
|
|
- element.style.transform = 'scale(0.95)';
|
|
|
- setTimeout(() => {
|
|
|
- element.style.transform = 'scale(1)';
|
|
|
- }, 150);
|
|
|
-
|
|
|
- showNotification('点赞成功', '感谢你的支持！');
|
|
|
- }
|
|
|
-
|
|
|
- // 个人中心功能
|
|
|
- function showMyDesigns() {
|
|
|
- showNotification('我的设计稿', '查看你的所有设计作品');
|
|
|
- }
|
|
|
-
|
|
|
- function showTryOnHistory() {
|
|
|
- showNotification('试穿历史', '查看你的试穿记录');
|
|
|
- }
|
|
|
-
|
|
|
- function showOrders() {
|
|
|
- showNotification('订单管理', '查看你的订单状态');
|
|
|
- }
|
|
|
-
|
|
|
- function showCollections() {
|
|
|
- showNotification('收藏夹', '查看你收藏的作品');
|
|
|
- }
|
|
|
-
|
|
|
- function showFollowers() {
|
|
|
- showNotification('粉丝管理', '管理你的粉丝关系');
|
|
|
- }
|
|
|
-
|
|
|
- function showSettings() {
|
|
|
- // 检查用户是否已登录
|
|
|
- if (!authManager.isAuthenticated()) {
|
|
|
- showLoginModal();
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- // 加载用户信息到表单
|
|
|
- const user = authManager.user;
|
|
|
- if (user) {
|
|
|
- document.getElementById('userName').value = user.nickname || user.username || '';
|
|
|
- document.getElementById('userBio').value = user.bio || '';
|
|
|
- document.getElementById('userLocation').value = user.location || '';
|
|
|
- }
|
|
|
-
|
|
|
- document.getElementById('settingsModal').style.display = 'block';
|
|
|
- }
|
|
|
-
|
|
|
- function closeSettingsModal() {
|
|
|
- document.getElementById('settingsModal').style.display = 'none';
|
|
|
- }
|
|
|
-
|
|
|
- // 登录注册功能
|
|
|
- function showLoginModal() {
|
|
|
- showModal('用户登录', '请登录以使用完整功能', '立即登录', openLoginForm);
|
|
|
- }
|
|
|
-
|
|
|
- function openLoginForm() {
|
|
|
- closeModal();
|
|
|
- }
|
|
|
-
|
|
|
- function showLoginForm() {
|
|
|
- // 隐藏欢迎页面
|
|
|
- document.getElementById('auth-screen').style.display = 'none';
|
|
|
- const loginHtml = `
|
|
|
- <div id="loginModal" style="
|
|
|
- position: fixed;
|
|
|
- top: 0; left: 0;
|
|
|
- width: 100%; height: 100%;
|
|
|
- background: rgba(0,0,0,0.8);
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- z-index: 10000;
|
|
|
- ">
|
|
|
- <div style="
|
|
|
- background: white;
|
|
|
- padding: 30px;
|
|
|
- border-radius: 15px;
|
|
|
- width: 90%;
|
|
|
- max-width: 400px;
|
|
|
- box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
|
|
- ">
|
|
|
- <h2 style="text-align: center; margin-bottom: 20px; color: #333;">登录账户</h2>
|
|
|
- <form id="loginForm" onsubmit="handleLogin(event)">
|
|
|
- <div style="margin-bottom: 15px;">
|
|
|
- <label style="display: block; margin-bottom: 5px; font-weight: 600;">用户名/邮箱</label>
|
|
|
- <input type="text" id="loginUsername" required style="
|
|
|
- width: 100%;
|
|
|
- padding: 12px;
|
|
|
- border: 2px solid #ddd;
|
|
|
- border-radius: 8px;
|
|
|
- font-size: 16px;
|
|
|
- box-sizing: border-box;
|
|
|
- ">
|
|
|
- </div>
|
|
|
- <div style="margin-bottom: 20px;">
|
|
|
- <label style="display: block; margin-bottom: 5px; font-weight: 600;">密码</label>
|
|
|
- <input type="password" id="loginPassword" required style="
|
|
|
- width: 100%;
|
|
|
- padding: 12px;
|
|
|
- border: 2px solid #ddd;
|
|
|
- border-radius: 8px;
|
|
|
- font-size: 16px;
|
|
|
- box-sizing: border-box;
|
|
|
- ">
|
|
|
- </div>
|
|
|
- <div style="display: flex; gap: 10px;">
|
|
|
- <button type="submit" style="
|
|
|
- flex: 1;
|
|
|
- padding: 12px;
|
|
|
- background: linear-gradient(45deg, #ff6b6b, #ffa726);
|
|
|
- color: white;
|
|
|
- border: none;
|
|
|
- border-radius: 8px;
|
|
|
- font-size: 16px;
|
|
|
- cursor: pointer;
|
|
|
- ">登录</button>
|
|
|
- <button type="button" onclick="showRegisterForm()" style="
|
|
|
- flex: 1;
|
|
|
- padding: 12px;
|
|
|
- background: #f0f0f0;
|
|
|
- color: #333;
|
|
|
- border: none;
|
|
|
- border-radius: 8px;
|
|
|
- font-size: 16px;
|
|
|
- cursor: pointer;
|
|
|
- ">注册</button>
|
|
|
- </div>
|
|
|
- <button type="button" onclick="closeLoginModal()" style="
|
|
|
- width: 100%;
|
|
|
- margin-top: 10px;
|
|
|
- padding: 8px;
|
|
|
- background: transparent;
|
|
|
- color: #666;
|
|
|
- border: 1px solid #ddd;
|
|
|
- border-radius: 8px;
|
|
|
- cursor: pointer;
|
|
|
- ">取消</button>
|
|
|
- </form>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- `;
|
|
|
- document.body.insertAdjacentHTML('beforeend', loginHtml);
|
|
|
- }
|
|
|
-
|
|
|
- function showRegisterForm() {
|
|
|
- // 如果是从登录表单切换过来的，删除登录模态框
|
|
|
- const loginModal = document.getElementById('loginModal');
|
|
|
- if (loginModal) {
|
|
|
- loginModal.remove();
|
|
|
- } else {
|
|
|
- // 如果是从欢迎页面直接过来的，隐藏欢迎页面
|
|
|
- document.getElementById('auth-screen').style.display = 'none';
|
|
|
- }
|
|
|
- const registerHtml = `
|
|
|
- <div id="registerModal" style="
|
|
|
- position: fixed;
|
|
|
- top: 0; left: 0;
|
|
|
- width: 100%; height: 100%;
|
|
|
- background: rgba(0,0,0,0.8);
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- z-index: 10000;
|
|
|
- ">
|
|
|
- <div style="
|
|
|
- background: white;
|
|
|
- padding: 30px;
|
|
|
- border-radius: 15px;
|
|
|
- width: 90%;
|
|
|
- max-width: 400px;
|
|
|
- box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
|
|
- ">
|
|
|
- <h2 style="text-align: center; margin-bottom: 20px; color: #333;">注册账户</h2>
|
|
|
- <form id="registerForm" onsubmit="handleRegister(event)">
|
|
|
- <div style="margin-bottom: 15px;">
|
|
|
- <label style="display: block; margin-bottom: 5px; font-weight: 600;">用户名</label>
|
|
|
- <input type="text" id="registerUsername" required style="
|
|
|
- width: 100%;
|
|
|
- padding: 12px;
|
|
|
- border: 2px solid #ddd;
|
|
|
- border-radius: 8px;
|
|
|
- font-size: 16px;
|
|
|
- box-sizing: border-box;
|
|
|
- ">
|
|
|
- </div>
|
|
|
- <div style="margin-bottom: 15px;">
|
|
|
- <label style="display: block; margin-bottom: 5px; font-weight: 600;">邮箱</label>
|
|
|
- <input type="email" id="registerEmail" required style="
|
|
|
- width: 100%;
|
|
|
- padding: 12px;
|
|
|
- border: 2px solid #ddd;
|
|
|
- border-radius: 8px;
|
|
|
- font-size: 16px;
|
|
|
- box-sizing: border-box;
|
|
|
- ">
|
|
|
- </div>
|
|
|
- <div style="margin-bottom: 20px;">
|
|
|
- <label style="display: block; margin-bottom: 5px; font-weight: 600;">密码</label>
|
|
|
- <input type="password" id="registerPassword" required style="
|
|
|
- width: 100%;
|
|
|
- padding: 12px;
|
|
|
- border: 2px solid #ddd;
|
|
|
- border-radius: 8px;
|
|
|
- font-size: 16px;
|
|
|
- box-sizing: border-box;
|
|
|
- ">
|
|
|
- </div>
|
|
|
- <div style="display: flex; gap: 10px;">
|
|
|
- <button type="submit" style="
|
|
|
- flex: 1;
|
|
|
- padding: 12px;
|
|
|
- background: linear-gradient(45deg, #4ecdc4, #44a08d);
|
|
|
- color: white;
|
|
|
- border: none;
|
|
|
- border-radius: 8px;
|
|
|
- font-size: 16px;
|
|
|
- cursor: pointer;
|
|
|
- ">注册</button>
|
|
|
- <button type="button" onclick="showLoginFromRegister()" style="
|
|
|
- flex: 1;
|
|
|
- padding: 12px;
|
|
|
- background: #f0f0f0;
|
|
|
- color: #333;
|
|
|
- border: none;
|
|
|
- border-radius: 8px;
|
|
|
- font-size: 16px;
|
|
|
- cursor: pointer;
|
|
|
- ">登录</button>
|
|
|
- </div>
|
|
|
- <button type="button" onclick="closeRegisterModal()" style="
|
|
|
- width: 100%;
|
|
|
- margin-top: 10px;
|
|
|
- padding: 8px;
|
|
|
- background: transparent;
|
|
|
- color: #666;
|
|
|
- border: 1px solid #ddd;
|
|
|
- border-radius: 8px;
|
|
|
- cursor: pointer;
|
|
|
- ">取消</button>
|
|
|
- </form>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- `;
|
|
|
- document.body.insertAdjacentHTML('beforeend', registerHtml);
|
|
|
- }
|
|
|
-
|
|
|
- function showLoginFromRegister() {
|
|
|
- document.getElementById('registerModal').remove();
|
|
|
- showLoginForm();
|
|
|
- }
|
|
|
-
|
|
|
- async function handleLogin(event) {
|
|
|
- event.preventDefault();
|
|
|
-
|
|
|
- const username = document.getElementById('loginUsername').value;
|
|
|
- const password = document.getElementById('loginPassword').value;
|
|
|
-
|
|
|
- try {
|
|
|
- const result = await AuthService.login({ username, password });
|
|
|
- closeLoginModal();
|
|
|
-
|
|
|
- // 登录成功后刷新相关UI
|
|
|
- updateUserStatusUI();
|
|
|
-
|
|
|
- } catch (error) {
|
|
|
- // 错误信息已经在AuthService.login中显示
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- async function handleRegister(event) {
|
|
|
- event.preventDefault();
|
|
|
-
|
|
|
- const username = document.getElementById('registerUsername').value;
|
|
|
- const email = document.getElementById('registerEmail').value;
|
|
|
- const password = document.getElementById('registerPassword').value;
|
|
|
-
|
|
|
- try {
|
|
|
- const result = await AuthService.register({ username, email, password });
|
|
|
- closeRegisterModal();
|
|
|
-
|
|
|
- // 注册成功后刷新相关UI
|
|
|
- updateUserStatusUI();
|
|
|
-
|
|
|
- } catch (error) {
|
|
|
- // 错误信息已经在AuthService.register中显示
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- function closeLoginModal() {
|
|
|
- const modal = document.getElementById('loginModal');
|
|
|
- if (modal) {
|
|
|
- modal.remove();
|
|
|
- // 如果用户未登录，显示欢迎页面
|
|
|
- if (!authManager.isAuthenticated()) {
|
|
|
- showAuthScreen();
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- function closeRegisterModal() {
|
|
|
- const modal = document.getElementById('registerModal');
|
|
|
- if (modal) {
|
|
|
- modal.remove();
|
|
|
- // 如果用户未登录，显示欢迎页面
|
|
|
- if (!authManager.isAuthenticated()) {
|
|
|
- showAuthScreen();
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 更新用户状态UI
|
|
|
- function updateUserStatusUI() {
|
|
|
- // 这里可以添加更新用户状态相关的UI逻辑
|
|
|
- // 比如显示用户头像、用户名等
|
|
|
- if (authManager.isAuthenticated()) {
|
|
|
- console.log('用户已登录:', authManager.user);
|
|
|
- // 登录成功后显示主应用
|
|
|
- showMainApp();
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 头像更换功能
|
|
|
- function changeAvatar() {
|
|
|
- const avatarOptions = [
|
|
|
- "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'><circle cx='30' cy='30' r='30' fill='%23ff6b6b'/><circle cx='30' cy='22' r='8' fill='white'/><ellipse cx='30' cy='45' rx='15' ry='10' fill='white'/></svg>",
|
|
|
- "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'><circle cx='30' cy='30' r='30' fill='%2364b5f6'/><circle cx='30' cy='22' r='8' fill='white'/><ellipse cx='30' cy='45' rx='15' ry='10' fill='white'/></svg>",
|
|
|
- "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'><circle cx='30' cy='30' r='30' fill='%2381c784'/><circle cx='30' cy='22' r='8' fill='white'/><ellipse cx='30' cy='45' rx='15' ry='10' fill='white'/></svg>",
|
|
|
- "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'><circle cx='30' cy='30' r='30' fill='%23ffb74d'/><circle cx='30' cy='22' r='8' fill='white'/><ellipse cx='30' cy='45' rx='15' ry='10' fill='white'/></svg>"
|
|
|
- ];
|
|
|
-
|
|
|
- const currentAvatar = document.getElementById('userAvatar').src;
|
|
|
- let currentIndex = avatarOptions.indexOf(currentAvatar);
|
|
|
- const nextIndex = (currentIndex + 1) % avatarOptions.length;
|
|
|
-
|
|
|
- document.getElementById('userAvatar').src = avatarOptions[nextIndex];
|
|
|
- showNotification('头像已更新', '您的头像已成功更换！');
|
|
|
- }
|
|
|
-
|
|
|
- // 修改密码功能
|
|
|
- function changePassword() {
|
|
|
- showNotification('修改密码', '密码修改功能将在后续版本中提供');
|
|
|
- }
|
|
|
-
|
|
|
- // 绑定手机号功能
|
|
|
- function bindPhone() {
|
|
|
- showNotification('手机号绑定', '手机号绑定功能将在后续版本中提供');
|
|
|
- }
|
|
|
-
|
|
|
- // 绑定邮箱功能
|
|
|
- function bindEmail() {
|
|
|
- showNotification('邮箱绑定', '邮箱绑定功能将在后续版本中提供');
|
|
|
- }
|
|
|
-
|
|
|
- // 关于应用功能
|
|
|
- function showAbout() {
|
|
|
- showNotification('关于应用', 'FashionCraft v1.0.0 - 专业的服装DIY设计平台');
|
|
|
- }
|
|
|
-
|
|
|
- // 清除缓存功能
|
|
|
- function clearCache() {
|
|
|
- if (confirm('确定要清除缓存吗？这将删除临时文件和设计草稿。')) {
|
|
|
- showNotification('缓存已清除', '成功清除 23.5MB 缓存数据');
|
|
|
- // 更新缓存大小显示
|
|
|
- document.querySelector('.cache-size').textContent = '0MB';
|
|
|
- setTimeout(() => {
|
|
|
- document.querySelector('.cache-size').textContent = '1.2MB';
|
|
|
- }, 2000);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 意见反馈功能
|
|
|
- function feedback() {
|
|
|
- showNotification('意见反馈', '感谢您的反馈！我们会认真对待每一条建议');
|
|
|
- }
|
|
|
-
|
|
|
- // 保存设置功能
|
|
|
- async function saveSettings() {
|
|
|
- const userName = document.getElementById('userName').value;
|
|
|
- const userBio = document.getElementById('userBio').value;
|
|
|
- const userLocation = document.getElementById('userLocation').value;
|
|
|
-
|
|
|
- if (!userName.trim()) {
|
|
|
- showNotification('保存失败', '用户名不能为空');
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- try {
|
|
|
- const profileData = {
|
|
|
- nickname: userName,
|
|
|
- bio: userBio,
|
|
|
- location: userLocation
|
|
|
- };
|
|
|
-
|
|
|
- const response = await UserAPI.updateProfile(profileData);
|
|
|
-
|
|
|
- if (response.code === 200) {
|
|
|
- // 更新本地用户信息
|
|
|
- authManager.user = { ...authManager.user, ...response.data };
|
|
|
- localStorage.setItem('fashioncraft_user', JSON.stringify(authManager.user));
|
|
|
-
|
|
|
- showNotification('设置已保存', '您的个人设置已成功保存！');
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- showNotification('保存失败', error.message || '保存设置时出现错误');
|
|
|
- console.error('保存设置失败:', error);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 退出登录确认
|
|
|
- function confirmLogout() {
|
|
|
- if (confirm('确定要退出登录吗？未保存的设计将会丢失。')) {
|
|
|
- logout();
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 退出登录功能
|
|
|
- async function logout() {
|
|
|
- try {
|
|
|
- await AuthService.logout();
|
|
|
-
|
|
|
- // 关闭设置模态框
|
|
|
- closeSettingsModal();
|
|
|
-
|
|
|
- // 返回到登录页面
|
|
|
- showAuthScreen();
|
|
|
-
|
|
|
- // 清除相关的全局状态
|
|
|
- currentBodyPart = 'overall';
|
|
|
- partColors = {
|
|
|
- 'overall': '#ff6b6b',
|
|
|
- 'left-sleeve': '#ff6b6b',
|
|
|
- 'right-sleeve': '#ff6b6b',
|
|
|
- 'hood': '#ff6b6b',
|
|
|
- 'body': '#ff6b6b'
|
|
|
- };
|
|
|
- colorHistory = [];
|
|
|
- aiChatHistory = [];
|
|
|
-
|
|
|
- } catch (error) {
|
|
|
- console.error('退出登录失败:', error);
|
|
|
- showNotification('退出失败', '退出登录时出现错误，请稍后再试');
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 上传功能相关变量
|
|
|
- let currentUploadStep = 1;
|
|
|
- let selectedWorkType = '';
|
|
|
- let uploadedFiles = [];
|
|
|
- let selectedTags = [];
|
|
|
- let selectedDesigns = [];
|
|
|
-
|
|
|
- // 打开上传模态框
|
|
|
- function openUploadModal() {
|
|
|
- document.getElementById('uploadModal').style.display = 'flex';
|
|
|
- resetUploadModal();
|
|
|
- }
|
|
|
-
|
|
|
- // 关闭上传模态框
|
|
|
- function closeUploadModal() {
|
|
|
- document.getElementById('uploadModal').style.display = 'none';
|
|
|
- }
|
|
|
-
|
|
|
- // 重置上传模态框
|
|
|
- function resetUploadModal() {
|
|
|
- currentUploadStep = 1;
|
|
|
- selectedWorkType = '';
|
|
|
- uploadedFiles = [];
|
|
|
- selectedTags = [];
|
|
|
- selectedDesigns = [];
|
|
|
- updateUploadStep();
|
|
|
- clearFormData();
|
|
|
- }
|
|
|
-
|
|
|
- // 更新上传步骤
|
|
|
- function updateUploadStep() {
|
|
|
- // 更新步骤指示器
|
|
|
- document.querySelectorAll('.step').forEach((step, index) => {
|
|
|
- if (index + 1 <= currentUploadStep) {
|
|
|
- step.classList.add('active');
|
|
|
- } else {
|
|
|
- step.classList.remove('active');
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 显示对应步骤内容
|
|
|
- document.querySelectorAll('.upload-step').forEach((step, index) => {
|
|
|
- if (index + 1 === currentUploadStep) {
|
|
|
- step.classList.add('active');
|
|
|
- } else {
|
|
|
- step.classList.remove('active');
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 更新按钮状态
|
|
|
- const prevBtn = document.getElementById('prevBtn');
|
|
|
- const nextBtn = document.getElementById('nextBtn');
|
|
|
- const publishBtn = document.getElementById('publishBtn');
|
|
|
-
|
|
|
- prevBtn.style.display = currentUploadStep > 1 ? 'block' : 'none';
|
|
|
-
|
|
|
- if (currentUploadStep < 4) {
|
|
|
- nextBtn.style.display = 'block';
|
|
|
- publishBtn.style.display = 'none';
|
|
|
- } else {
|
|
|
- nextBtn.style.display = 'none';
|
|
|
- publishBtn.style.display = 'block';
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 下一步（社区上传流程）
|
|
|
- function nextUploadStep() {
|
|
|
- if (validateCurrentStep()) {
|
|
|
- currentUploadStep++;
|
|
|
- updateUploadStep();
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 上一步
|
|
|
- function prevStep() {
|
|
|
- currentUploadStep--;
|
|
|
- updateUploadStep();
|
|
|
- }
|
|
|
-
|
|
|
- // 验证当前步骤
|
|
|
- function validateCurrentStep() {
|
|
|
- switch (currentUploadStep) {
|
|
|
- case 1:
|
|
|
- if (!selectedWorkType) {
|
|
|
- showNotification('请选择作品类型');
|
|
|
- return false;
|
|
|
- }
|
|
|
- break;
|
|
|
- case 2:
|
|
|
- if (uploadedFiles.length === 0 && selectedDesigns.length === 0) {
|
|
|
- showNotification('请上传内容或选择设计');
|
|
|
- return false;
|
|
|
- }
|
|
|
- break;
|
|
|
- case 3:
|
|
|
- const title = document.getElementById('workTitle').value.trim();
|
|
|
- if (!title) {
|
|
|
- showNotification('请输入作品标题');
|
|
|
- return false;
|
|
|
- }
|
|
|
- break;
|
|
|
- case 4:
|
|
|
- const copyrightAgree = document.getElementById('copyrightAgree').checked;
|
|
|
- if (!copyrightAgree) {
|
|
|
- showNotification('请同意版权声明');
|
|
|
- return false;
|
|
|
- }
|
|
|
- break;
|
|
|
- }
|
|
|
- return true;
|
|
|
- }
|
|
|
-
|
|
|
- // 选择作品类型
|
|
|
- function selectWorkType(type) {
|
|
|
- selectedWorkType = type;
|
|
|
- document.querySelectorAll('.work-type').forEach(item => {
|
|
|
- item.classList.remove('selected');
|
|
|
- });
|
|
|
- document.querySelector(`[data-type="${type}"]`).classList.add('selected');
|
|
|
- }
|
|
|
-
|
|
|
- // 触发文件上传
|
|
|
- function triggerFileUpload() {
|
|
|
- document.getElementById('fileInput').click();
|
|
|
- }
|
|
|
-
|
|
|
- // 触发3D文件上传
|
|
|
- function trigger3DUpload() {
|
|
|
- document.getElementById('file3DInput').click();
|
|
|
- }
|
|
|
-
|
|
|
- // 处理文件上传
|
|
|
- async function handleFileUpload(event) {
|
|
|
- const files = Array.from(event.target.files);
|
|
|
-
|
|
|
- for (const file of files) {
|
|
|
- if (uploadedFiles.length >= 9) {
|
|
|
- showNotification('上传限制', '最多只能上传9个文件');
|
|
|
- break;
|
|
|
- }
|
|
|
-
|
|
|
- try {
|
|
|
- // 先上传到服务器
|
|
|
- const uploadResult = await UploadService.uploadImage(file, 'design');
|
|
|
-
|
|
|
- // 将上传结果添加到文件列表
|
|
|
- const fileData = {
|
|
|
- file: file,
|
|
|
- uploadResult: uploadResult,
|
|
|
- url: uploadResult.file_url
|
|
|
- };
|
|
|
-
|
|
|
- uploadedFiles.push(fileData);
|
|
|
- addFilePreview(file, uploadResult);
|
|
|
-
|
|
|
- } catch (error) {
|
|
|
- // 如果上传失败，仍然添加到本地列表（稍后重试）
|
|
|
- uploadedFiles.push({ file: file, uploadResult: null });
|
|
|
- addFilePreview(file);
|
|
|
- console.warn('文件上传失败，将在发布时重试:', file.name, error);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 处理3D文件上传
|
|
|
- function handle3DUpload(event) {
|
|
|
- const file = event.target.files[0];
|
|
|
- if (file) {
|
|
|
- showNotification('3D文件上传成功: ' + file.name);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 添加文件预览
|
|
|
- function addFilePreview(file) {
|
|
|
- const preview = document.getElementById('uploadPreview');
|
|
|
- const previewItem = document.createElement('div');
|
|
|
- previewItem.className = 'preview-item';
|
|
|
-
|
|
|
- if (file.type.startsWith('image/')) {
|
|
|
- const img = document.createElement('img');
|
|
|
- img.src = URL.createObjectURL(file);
|
|
|
- previewItem.appendChild(img);
|
|
|
- } else {
|
|
|
- previewItem.innerHTML = '<div style="display: flex; align-items: center; justify-content: center; height: 100%; font-size: 24px;">🎬</div>';
|
|
|
- }
|
|
|
-
|
|
|
- const removeBtn = document.createElement('button');
|
|
|
- removeBtn.className = 'preview-remove';
|
|
|
- removeBtn.innerHTML = '×';
|
|
|
- removeBtn.onclick = () => removeFilePreview(file, previewItem);
|
|
|
- previewItem.appendChild(removeBtn);
|
|
|
-
|
|
|
- preview.appendChild(previewItem);
|
|
|
- }
|
|
|
-
|
|
|
- // 移除文件预览
|
|
|
- function removeFilePreview(file, previewItem) {
|
|
|
- const index = uploadedFiles.indexOf(file);
|
|
|
- if (index > -1) {
|
|
|
- uploadedFiles.splice(index, 1);
|
|
|
- }
|
|
|
- previewItem.remove();
|
|
|
- }
|
|
|
-
|
|
|
- // 从我的设计选择
|
|
|
- function selectFromMyDesigns(designId) {
|
|
|
- const designItem = document.querySelector(`[onclick="selectFromMyDesigns(${designId})"]`);
|
|
|
- if (selectedDesigns.includes(designId)) {
|
|
|
- selectedDesigns = selectedDesigns.filter(id => id !== designId);
|
|
|
- designItem.classList.remove('selected');
|
|
|
- } else {
|
|
|
- selectedDesigns.push(designId);
|
|
|
- designItem.classList.add('selected');
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 切换标签
|
|
|
- function toggleTag(tagElement) {
|
|
|
- const tagText = tagElement.textContent;
|
|
|
- if (selectedTags.includes(tagText)) {
|
|
|
- selectedTags = selectedTags.filter(tag => tag !== tagText);
|
|
|
- tagElement.classList.remove('selected');
|
|
|
- } else {
|
|
|
- selectedTags.push(tagText);
|
|
|
- tagElement.classList.add('selected');
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 添加自定义标签
|
|
|
- function addCustomTag(event) {
|
|
|
- if (event.key === 'Enter') {
|
|
|
- const input = event.target;
|
|
|
- const tagText = '#' + input.value.trim();
|
|
|
- if (tagText.length > 1 && !selectedTags.includes(tagText)) {
|
|
|
- selectedTags.push(tagText);
|
|
|
-
|
|
|
- const tagElement = document.createElement('span');
|
|
|
- tagElement.className = 'tag selected';
|
|
|
- tagElement.textContent = tagText;
|
|
|
- tagElement.onclick = () => toggleTag(tagElement);
|
|
|
-
|
|
|
- document.querySelector('.popular-tags').appendChild(tagElement);
|
|
|
- input.value = '';
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 发布作品
|
|
|
- async function publishWork() {
|
|
|
- if (!validateCurrentStep()) {
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- try {
|
|
|
- // 验证必填字段
|
|
|
- const titleElement = document.getElementById('workTitle');
|
|
|
- const descElement = document.getElementById('workDescription');
|
|
|
-
|
|
|
- if (!titleElement || !titleElement.value.trim()) {
|
|
|
- showNotification('发布失败', '请输入作品标题');
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- if (!selectedWorkType) {
|
|
|
- showNotification('发布失败', '请选择作品类型');
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- // 获取表单值并提供默认值
|
|
|
- const visibilityElement = document.querySelector('input[name="visibility"]:checked');
|
|
|
- const downloadElement = document.querySelector('input[name="download"]:checked');
|
|
|
-
|
|
|
- // 映射前端工作类型到后端期望的格式
|
|
|
- const workTypeMapping = {
|
|
|
- 'design': 'design',
|
|
|
- 'photo': 'fitting', // 照片试衣功能
|
|
|
- 'video': 'tutorial', // 视频教程
|
|
|
- '3d': 'design' // 3D设计也归类为设计
|
|
|
- };
|
|
|
-
|
|
|
- const mappedWorkType = workTypeMapping[selectedWorkType] || 'design';
|
|
|
-
|
|
|
- // 准备发布数据
|
|
|
- const workData = {
|
|
|
- work_type: mappedWorkType,
|
|
|
- title: titleElement.value.trim(),
|
|
|
- description: descElement ? descElement.value.trim() : '',
|
|
|
- tags: selectedTags || [],
|
|
|
- visibility: visibilityElement ? visibilityElement.value : 'public',
|
|
|
- allow_download: downloadElement ? downloadElement.value === 'allow' : true,
|
|
|
- allow_comments: true
|
|
|
- };
|
|
|
-
|
|
|
- // 处理上传的文件
|
|
|
- const imageUrls = [];
|
|
|
- for (const fileData of uploadedFiles) {
|
|
|
- if (fileData.uploadResult) {
|
|
|
- // 文件已上传
|
|
|
- imageUrls.push(fileData.uploadResult.file_url);
|
|
|
- } else {
|
|
|
- // 文件未上传，现在上传
|
|
|
- try {
|
|
|
- const uploadResult = await UploadService.uploadImage(fileData.file, 'community');
|
|
|
- imageUrls.push(uploadResult.file_url);
|
|
|
- } catch (uploadError) {
|
|
|
- console.warn('文件上传失败:', fileData.file.name, uploadError);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- workData.images = imageUrls;
|
|
|
-
|
|
|
- // 处理选中的设计
|
|
|
- if (selectedDesigns.length > 0) {
|
|
|
- // 假设只选择一个设计
|
|
|
- workData.design_id = selectedDesigns[0];
|
|
|
- }
|
|
|
-
|
|
|
- // 记录发送的数据以便调试
|
|
|
- console.log('发布作品数据:', workData);
|
|
|
-
|
|
|
- // 调用发布API
|
|
|
- const result = await CommunityAPI.publishWork(workData);
|
|
|
-
|
|
|
- if (result.code === 200) {
|
|
|
- showNotification('发布成功', '你的作品已成功发布到社区！');
|
|
|
- closeUploadModal();
|
|
|
-
|
|
|
- // 清空表单数据
|
|
|
- clearFormData();
|
|
|
- resetUploadModal();
|
|
|
-
|
|
|
- // 可以跳转到社区页面查看刚发布的作品
|
|
|
- setTimeout(() => {
|
|
|
- switchPage('community');
|
|
|
- updateNavigation('community');
|
|
|
- }, 1500);
|
|
|
- } else {
|
|
|
- throw new Error(result.message || '发布失败');
|
|
|
- }
|
|
|
-
|
|
|
- } catch (error) {
|
|
|
- console.error('发布作品失败:', error);
|
|
|
- console.error('发送的数据:', workData);
|
|
|
-
|
|
|
- let errorMessage = '发布作品时出现错误，请稍后再试';
|
|
|
-
|
|
|
- // 根据错误类型提供更具体的提示
|
|
|
- if (error.message) {
|
|
|
- if (error.message.includes('500')) {
|
|
|
- errorMessage = '服务器暂时无法处理请求，请稍后再试';
|
|
|
- // 500错误时进行健康检查
|
|
|
- checkServerHealth();
|
|
|
- } else if (error.message.includes('400')) {
|
|
|
- errorMessage = '提交的数据格式有误，请检查后重试';
|
|
|
- } else if (error.message.includes('401')) {
|
|
|
- errorMessage = '登录已过期，请重新登录';
|
|
|
- } else if (error.message.includes('403')) {
|
|
|
- errorMessage = '没有权限执行此操作';
|
|
|
- } else {
|
|
|
- errorMessage = error.message;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- showNotification('发布失败', errorMessage);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 服务器健康检查
|
|
|
- async function checkServerHealth() {
|
|
|
- try {
|
|
|
- console.log('开始检查服务器健康状态...');
|
|
|
- const response = await fetch(`${API_CONFIG.baseURL}/health`, {
|
|
|
- method: 'GET',
|
|
|
- timeout: 5000
|
|
|
- });
|
|
|
-
|
|
|
- if (response.ok) {
|
|
|
- console.log('服务器健康检查：正常');
|
|
|
- setTimeout(() => {
|
|
|
- showNotification('服务器状态', '服务器连接正常，但社区功能暂时不可用');
|
|
|
- }, 2000);
|
|
|
- } else {
|
|
|
- console.log('服务器健康检查：异常', response.status);
|
|
|
- setTimeout(() => {
|
|
|
- showNotification('服务器状态', '服务器响应异常，请稍后再试');
|
|
|
- }, 2000);
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- console.log('服务器健康检查：连接失败', error);
|
|
|
- setTimeout(() => {
|
|
|
- showNotification('服务器状态', '服务器连接失败，请检查网络连接');
|
|
|
- }, 2000);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 清空表单数据
|
|
|
- function clearFormData() {
|
|
|
- document.getElementById('workTitle').value = '';
|
|
|
- document.getElementById('workDescription').value = '';
|
|
|
- document.getElementById('customTag').value = '';
|
|
|
- document.getElementById('uploadPreview').innerHTML = '';
|
|
|
- document.querySelectorAll('.work-type').forEach(item => item.classList.remove('selected'));
|
|
|
- document.querySelectorAll('.design-item').forEach(item => item.classList.remove('selected'));
|
|
|
- document.querySelectorAll('.tag').forEach(item => item.classList.remove('selected'));
|
|
|
- }
|
|
|
-
|
|
|
- // 字符计数
|
|
|
- document.addEventListener('DOMContentLoaded', function() {
|
|
|
- const titleInput = document.getElementById('workTitle');
|
|
|
- const descInput = document.getElementById('workDescription');
|
|
|
- const titleCount = document.getElementById('titleCount');
|
|
|
- const descCount = document.getElementById('descCount');
|
|
|
-
|
|
|
- if (titleInput && titleCount) {
|
|
|
- titleInput.addEventListener('input', function() {
|
|
|
- titleCount.textContent = this.value.length;
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- if (descInput && descCount) {
|
|
|
- descInput.addEventListener('input', function() {
|
|
|
- descCount.textContent = this.value.length;
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 草稿箱功能
|
|
|
- function showDrafts() {
|
|
|
- document.getElementById('draftsModal').style.display = 'flex';
|
|
|
- }
|
|
|
-
|
|
|
- function closeDraftsModal() {
|
|
|
- document.getElementById('draftsModal').style.display = 'none';
|
|
|
- }
|
|
|
-
|
|
|
- function editDraft(draftId) {
|
|
|
- showNotification('编辑草稿: ' + draftId);
|
|
|
- closeDraftsModal();
|
|
|
- openUploadModal();
|
|
|
- }
|
|
|
-
|
|
|
- function deleteDraft(draftId) {
|
|
|
- if (confirm('确定要删除这个草稿吗？')) {
|
|
|
- showNotification('草稿已删除');
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 我的作品功能
|
|
|
- function showMyWorks() {
|
|
|
- document.getElementById('myWorksModal').style.display = 'flex';
|
|
|
- }
|
|
|
-
|
|
|
- function closeMyWorksModal() {
|
|
|
- document.getElementById('myWorksModal').style.display = 'none';
|
|
|
- }
|
|
|
-
|
|
|
- function switchWorksTab(tab) {
|
|
|
- document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
|
|
|
- event.target.classList.add('active');
|
|
|
-
|
|
|
- if (tab === 'published') {
|
|
|
- document.getElementById('publishedWorks').style.display = 'block';
|
|
|
- document.getElementById('analyticsWorks').style.display = 'none';
|
|
|
- } else {
|
|
|
- document.getElementById('publishedWorks').style.display = 'none';
|
|
|
- document.getElementById('analyticsWorks').style.display = 'block';
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- function editWork(workId) {
|
|
|
- showNotification('编辑作品: ' + workId);
|
|
|
- closeMyWorksModal();
|
|
|
- }
|
|
|
-
|
|
|
- function deleteWork(workId) {
|
|
|
- if (confirm('确定要删除这个作品吗？')) {
|
|
|
- showNotification('作品已删除');
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 通知系统
|
|
|
- function showNotification(title, message) {
|
|
|
- // 创建通知元素
|
|
|
- const notification = document.createElement('div');
|
|
|
- notification.style.cssText = `
|
|
|
- position: fixed;
|
|
|
- top: 20px;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- background: linear-gradient(45deg, #ff6b6b, #ffa726);
|
|
|
- color: white;
|
|
|
- padding: 15px 20px;
|
|
|
- border-radius: 25px;
|
|
|
- box-shadow: 0 10px 30px rgba(0,0,0,0.3);
|
|
|
- z-index: 10000;
|
|
|
- max-width: 300px;
|
|
|
- text-align: center;
|
|
|
- animation: slideDown 0.3s ease;
|
|
|
- `;
|
|
|
-
|
|
|
- notification.innerHTML = `
|
|
|
- <div style="font-weight: 600; margin-bottom: 5px;">${title}</div>
|
|
|
- <div style="font-size: 14px; opacity: 0.9;">${message}</div>
|
|
|
- `;
|
|
|
-
|
|
|
- // 添加滑入动画
|
|
|
- const style = document.createElement('style');
|
|
|
- style.textContent = `
|
|
|
- @keyframes slideDown {
|
|
|
- from { transform: translateX(-50%) translateY(-100%); opacity: 0; }
|
|
|
- to { transform: translateX(-50%) translateY(0); opacity: 1; }
|
|
|
- }
|
|
|
- `;
|
|
|
- document.head.appendChild(style);
|
|
|
-
|
|
|
- document.body.appendChild(notification);
|
|
|
-
|
|
|
- // 3秒后自动移除
|
|
|
- setTimeout(() => {
|
|
|
- notification.style.animation = 'slideDown 0.3s ease reverse';
|
|
|
- setTimeout(() => {
|
|
|
- document.body.removeChild(notification);
|
|
|
- }, 300);
|
|
|
- }, 3000);
|
|
|
- }
|
|
|
-
|
|
|
- // 触摸手势支持
|
|
|
- let startX, startY;
|
|
|
-
|
|
|
- document.addEventListener('touchstart', function(e) {
|
|
|
- startX = e.touches[0].clientX;
|
|
|
- startY = e.touches[0].clientY;
|
|
|
- });
|
|
|
-
|
|
|
- document.addEventListener('touchend', function(e) {
|
|
|
- if (!startX || !startY) return;
|
|
|
-
|
|
|
- let endX = e.changedTouches[0].clientX;
|
|
|
- let endY = e.changedTouches[0].clientY;
|
|
|
-
|
|
|
- let diffX = startX - endX;
|
|
|
- let diffY = startY - endY;
|
|
|
-
|
|
|
- // 横向滑动切换轮播图
|
|
|
- if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > 50) {
|
|
|
- if (diffX > 0) {
|
|
|
- nextSlide();
|
|
|
- } else {
|
|
|
- currentSlide = currentSlide > 0 ? currentSlide - 1 : 2;
|
|
|
- updateSlider();
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- startX = startY = null;
|
|
|
- });
|
|
|
-
|
|
|
- // 页面可见性API - 当页面不可见时暂停动画
|
|
|
- document.addEventListener('visibilitychange', function() {
|
|
|
- if (document.hidden) {
|
|
|
- clearInterval(slideInterval);
|
|
|
- } else {
|
|
|
- slideInterval = setInterval(nextSlide, 4000);
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 防止点击穿透
|
|
|
- document.addEventListener('click', function(e) {
|
|
|
- if (e.target.closest('.modal')) {
|
|
|
- e.stopPropagation();
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 模态框外部点击关闭
|
|
|
- document.getElementById('modal').addEventListener('click', function(e) {
|
|
|
- if (e.target === this) {
|
|
|
- closeModal();
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 设置模态框外部点击关闭
|
|
|
- document.getElementById('settingsModal').addEventListener('click', function(e) {
|
|
|
- if (e.target === this) {
|
|
|
- closeSettingsModal();
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 初始化服装设计器
|
|
|
- function initializeClothingDesigner() {
|
|
|
- // 设置默认宝蓝色
|
|
|
- selectClothingColor('宝蓝色');
|
|
|
-
|
|
|
- // 设置默认选中整体
|
|
|
- selectBodyPart('overall');
|
|
|
-
|
|
|
- console.log('服装设计器已初始化，已加载', availableColors.length, '种颜色');
|
|
|
- }
|
|
|
-
|
|
|
- // 页面加载完成后初始化设计器
|
|
|
- window.addEventListener('load', function() {
|
|
|
- setTimeout(initializeClothingDesigner, 500);
|
|
|
- });
|
|
|
-
|
|
|
- // ============ 3D试衣间功能函数 ============
|
|
|
-
|
|
|
- // 流程控制
|
|
|
- let currentFittingStep = 'upload';
|
|
|
- let selectedClothing = null;
|
|
|
- let userPhoto = null;
|
|
|
-
|
|
|
- function nextStep(stepName) {
|
|
|
- // 检查参数是否有效
|
|
|
- if (!stepName) {
|
|
|
- console.error('nextStep: stepName is required');
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- // 检查当前步骤元素是否存在
|
|
|
- const currentStepElement = document.getElementById(`${currentFittingStep}-step`);
|
|
|
- if (currentStepElement) {
|
|
|
- currentStepElement.style.display = 'none';
|
|
|
- }
|
|
|
-
|
|
|
- // 检查目标步骤元素是否存在
|
|
|
- const targetStepElement = document.getElementById(`${stepName}-step`);
|
|
|
- if (targetStepElement) {
|
|
|
- targetStepElement.style.display = 'block';
|
|
|
- }
|
|
|
-
|
|
|
- // 更新流程导航状态
|
|
|
- updateStepNavigation(stepName);
|
|
|
-
|
|
|
- currentFittingStep = stepName;
|
|
|
-
|
|
|
- showNotification('流程进度', `已进入${getStepTitle(stepName)}阶段`);
|
|
|
- }
|
|
|
-
|
|
|
- function previousStep(stepName) {
|
|
|
- // 检查参数是否有效
|
|
|
- if (!stepName) {
|
|
|
- console.error('previousStep: stepName is required');
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- // 检查当前步骤元素是否存在
|
|
|
- const currentStepElement = document.getElementById(`${currentFittingStep}-step`);
|
|
|
- if (currentStepElement) {
|
|
|
- currentStepElement.style.display = 'none';
|
|
|
- }
|
|
|
-
|
|
|
- // 检查目标步骤元素是否存在
|
|
|
- const targetStepElement = document.getElementById(`${stepName}-step`);
|
|
|
- if (targetStepElement) {
|
|
|
- targetStepElement.style.display = 'block';
|
|
|
- }
|
|
|
-
|
|
|
- // 更新流程导航状态
|
|
|
- updateStepNavigation(stepName);
|
|
|
-
|
|
|
- currentFittingStep = stepName;
|
|
|
- }
|
|
|
-
|
|
|
- function updateStepNavigation(activeStep) {
|
|
|
- document.querySelectorAll('.flow-step').forEach(step => {
|
|
|
- step.classList.remove('active');
|
|
|
- if (step.getAttribute('data-step') === activeStep) {
|
|
|
- step.classList.add('active');
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- function getStepTitle(stepName) {
|
|
|
- const titles = {
|
|
|
- 'upload': '照片上传',
|
|
|
- 'clothing': '服装选择',
|
|
|
- 'fitting': '试衣展示'
|
|
|
- };
|
|
|
- return titles[stepName] || stepName;
|
|
|
- }
|
|
|
-
|
|
|
- // ============ 照片上传功能 ============
|
|
|
-
|
|
|
- function selectUploadMethod(method) {
|
|
|
- // 更新选择状态
|
|
|
- document.querySelectorAll('.upload-method').forEach(m => m.classList.remove('active'));
|
|
|
- document.querySelector(`[data-method="${method}"]`).classList.add('active');
|
|
|
-
|
|
|
- // 显示对应界面
|
|
|
- if (method === 'camera') {
|
|
|
- document.getElementById('camera-mode').style.display = 'block';
|
|
|
- document.getElementById('gallery-mode').style.display = 'none';
|
|
|
- } else {
|
|
|
- document.getElementById('camera-mode').style.display = 'none';
|
|
|
- document.getElementById('gallery-mode').style.display = 'block';
|
|
|
- }
|
|
|
-
|
|
|
- showNotification('上传方式', `已选择${method === 'camera' ? '拍照模式' : '相册选择'}`);
|
|
|
- }
|
|
|
-
|
|
|
- function startCamera() {
|
|
|
- showNotification('启动摄像头', '正在访问摄像头权限...');
|
|
|
-
|
|
|
- // 模拟摄像头启动
|
|
|
- setTimeout(() => {
|
|
|
- document.querySelector('.camera-placeholder').innerHTML = `
|
|
|
- <div class="camera-icon">📹</div>
|
|
|
- <div class="camera-text">摄像头已启动</div>
|
|
|
- <div class="camera-hint">请对准镜头保持正面站立</div>
|
|
|
- `;
|
|
|
- showNotification('摄像头就绪', '可以开始拍摄了！');
|
|
|
- }, 1500);
|
|
|
- }
|
|
|
-
|
|
|
- function capturePhoto() {
|
|
|
- showNotification('拍摄照片', '正在拍摄...');
|
|
|
-
|
|
|
- // 模拟拍照效果
|
|
|
- setTimeout(() => {
|
|
|
- document.getElementById('pose-calibration').style.display = 'block';
|
|
|
- simulatePoseDetection();
|
|
|
- showNotification('拍摄成功', '正在进行姿势校准...');
|
|
|
- }, 1000);
|
|
|
- }
|
|
|
-
|
|
|
- function switchCamera() {
|
|
|
- showNotification('切换摄像头', '已切换到前置/后置摄像头');
|
|
|
- }
|
|
|
-
|
|
|
- function handlePhotoUpload(input) {
|
|
|
- const file = input.files[0];
|
|
|
- if (file) {
|
|
|
- const reader = new FileReader();
|
|
|
- reader.onload = function(e) {
|
|
|
- userPhoto = e.target.result;
|
|
|
- document.getElementById('crop-area').style.display = 'block';
|
|
|
- showNotification('照片上传', '请调整裁剪区域');
|
|
|
- };
|
|
|
- reader.readAsDataURL(file);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- function resetCrop() {
|
|
|
- showNotification('重置裁剪', '已重置到原始尺寸');
|
|
|
- }
|
|
|
-
|
|
|
- function confirmCrop() {
|
|
|
- document.getElementById('pose-calibration').style.display = 'block';
|
|
|
- simulatePoseDetection();
|
|
|
- showNotification('裁剪完成', '正在进行姿势校准...');
|
|
|
- }
|
|
|
-
|
|
|
- function simulatePoseDetection() {
|
|
|
- const statuses = document.querySelectorAll('.status-item');
|
|
|
- let currentIndex = 2; // 从身形分析开始
|
|
|
-
|
|
|
- const updateStatus = () => {
|
|
|
- if (currentIndex < statuses.length) {
|
|
|
- const item = statuses[currentIndex];
|
|
|
- const icon = item.querySelector('.status-icon');
|
|
|
- icon.textContent = '✅';
|
|
|
- currentIndex++;
|
|
|
-
|
|
|
- if (currentIndex < statuses.length) {
|
|
|
- setTimeout(updateStatus, 1000);
|
|
|
- } else {
|
|
|
- showNotification('校准完成', '人体姿势识别成功！');
|
|
|
- }
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- setTimeout(updateStatus, 1000);
|
|
|
- }
|
|
|
-
|
|
|
- function recalibrate() {
|
|
|
- // 重置状态
|
|
|
- const statuses = document.querySelectorAll('.status-item');
|
|
|
- statuses.forEach((item, index) => {
|
|
|
- const icon = item.querySelector('.status-icon');
|
|
|
- if (index >= 2) {
|
|
|
- icon.textContent = '⏳';
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- simulatePoseDetection();
|
|
|
- showNotification('重新校准', '正在重新分析姿势...');
|
|
|
- }
|
|
|
-
|
|
|
- // ============ 服装选择功能 ============
|
|
|
-
|
|
|
- function switchClothingTab(tabName) {
|
|
|
- // 更新标签状态
|
|
|
- document.querySelectorAll('.clothing-tab').forEach(tab => tab.classList.remove('active'));
|
|
|
- document.querySelector(`[data-tab="${tabName}"]`).classList.add('active');
|
|
|
-
|
|
|
- // 显示对应内容
|
|
|
- document.querySelectorAll('.clothing-content').forEach(content => {
|
|
|
- content.style.display = 'none';
|
|
|
- });
|
|
|
- document.getElementById(`${tabName}-content`).style.display = 'block';
|
|
|
-
|
|
|
- const tabNames = {
|
|
|
- 'my-designs': '我的设计',
|
|
|
- 'community': '社区热门',
|
|
|
- 'brands': '品牌合作'
|
|
|
- };
|
|
|
-
|
|
|
- showNotification('切换分类', `已切换到${tabNames[tabName]}`);
|
|
|
- }
|
|
|
-
|
|
|
- function selectClothing(clothingId) {
|
|
|
- selectedClothing = clothingId;
|
|
|
-
|
|
|
- // 视觉反馈
|
|
|
- document.querySelectorAll('.design-item, .trending-item, .brand-item').forEach(item => {
|
|
|
- item.classList.remove('selected');
|
|
|
- });
|
|
|
- event.currentTarget.classList.add('selected');
|
|
|
-
|
|
|
- showNotification('选择服装', '已选择该款设计，可以进行试穿了！');
|
|
|
- }
|
|
|
-
|
|
|
- // ============ 试衣展示功能 ============
|
|
|
-
|
|
|
- let currentRotation = 0;
|
|
|
- let currentLighting = 'natural';
|
|
|
- let compareMode = 'split';
|
|
|
-
|
|
|
- function rotateFitting(direction) {
|
|
|
- if (direction === 'left') {
|
|
|
- currentRotation -= 30;
|
|
|
- } else if (direction === 'right') {
|
|
|
- currentRotation += 30;
|
|
|
- } else {
|
|
|
- currentRotation = 0;
|
|
|
- }
|
|
|
-
|
|
|
- const viewport = document.querySelector('.fitting-viewport');
|
|
|
- if (viewport) {
|
|
|
- viewport.style.transform = `rotateY(${currentRotation}deg)`;
|
|
|
- }
|
|
|
-
|
|
|
- showNotification('旋转视角', `视角：${currentRotation}°`);
|
|
|
- }
|
|
|
-
|
|
|
- function setFittingLight(lightType) {
|
|
|
- // 更新按钮状态
|
|
|
- document.querySelectorAll('.lighting-btn').forEach(btn => btn.classList.remove('active'));
|
|
|
- event.currentTarget.classList.add('active');
|
|
|
-
|
|
|
- currentLighting = lightType;
|
|
|
-
|
|
|
- const lightFilters = {
|
|
|
- 'natural': 'brightness(1.1) contrast(1.05)',
|
|
|
- 'indoor': 'brightness(0.9) sepia(0.1)',
|
|
|
- 'studio': 'brightness(1.2) contrast(1.1) saturate(1.1)'
|
|
|
- };
|
|
|
-
|
|
|
- const viewport = document.querySelector('.fitting-viewport');
|
|
|
- if (viewport) {
|
|
|
- viewport.style.filter = lightFilters[lightType];
|
|
|
- }
|
|
|
-
|
|
|
- const lightNames = {
|
|
|
- 'natural': '自然光',
|
|
|
- 'indoor': '室内光',
|
|
|
- 'studio': '摄影光'
|
|
|
- };
|
|
|
-
|
|
|
- showNotification('光照调节', `已切换到${lightNames[lightType]}`);
|
|
|
- }
|
|
|
-
|
|
|
- function toggleCompare(mode) {
|
|
|
- // 更新按钮状态
|
|
|
- document.querySelectorAll('.compare-btn').forEach(btn => btn.classList.remove('active'));
|
|
|
- event.currentTarget.classList.add('active');
|
|
|
-
|
|
|
- compareMode = mode;
|
|
|
-
|
|
|
- const modeNames = {
|
|
|
- 'split': '左右对比',
|
|
|
- 'overlay': '叠加对比'
|
|
|
- };
|
|
|
-
|
|
|
- showNotification('对比模式', `已切换到${modeNames[mode]}`);
|
|
|
- }
|
|
|
-
|
|
|
- function retryFitting() {
|
|
|
- showNotification('重新试穿', '正在重新进行智能贴合...');
|
|
|
-
|
|
|
- // 模拟重新试穿过程
|
|
|
- setTimeout(() => {
|
|
|
- showNotification('试穿完成', '新的试穿效果已生成！');
|
|
|
- }, 2000);
|
|
|
- }
|
|
|
-
|
|
|
- // ============ 输出功能 ============
|
|
|
-
|
|
|
- function saveImageCard() {
|
|
|
- showNotification('保存形象卡', '正在生成专属形象卡...');
|
|
|
-
|
|
|
- setTimeout(() => {
|
|
|
- showNotification('保存成功', '形象卡已保存到相册！');
|
|
|
- }, 1500);
|
|
|
- }
|
|
|
-
|
|
|
- function shareToCommunity() {
|
|
|
- showNotification('分享到社区', '正在上传到设计社区...');
|
|
|
-
|
|
|
- setTimeout(() => {
|
|
|
- showNotification('分享成功', '已分享到社区，快去看看大家的反应吧！');
|
|
|
- }, 2000);
|
|
|
- }
|
|
|
-
|
|
|
- function buyNow() {
|
|
|
- if (!selectedClothing) {
|
|
|
- showNotification('购买提醒', '请先选择要购买的服装');
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- showNotification('跳转购买', '正在跳转到购买页面...');
|
|
|
-
|
|
|
- setTimeout(() => {
|
|
|
- showNotification('购买页面', '已为您打开购买链接！');
|
|
|
- }, 1000);
|
|
|
- }
|
|
|
-
|
|
|
- // ============ 试衣间初始化 ============
|
|
|
-
|
|
|
- function initializeFittingRoom() {
|
|
|
- // 设置默认状态
|
|
|
- currentFittingStep = 'upload';
|
|
|
- selectUploadMethod('camera');
|
|
|
- switchClothingTab('my-designs');
|
|
|
-
|
|
|
- console.log('3D试衣间已初始化');
|
|
|
- }
|
|
|
-
|
|
|
- // 页面加载时初始化试衣间
|
|
|
- document.addEventListener('DOMContentLoaded', function() {
|
|
|
- if (document.getElementById('ar-page')) {
|
|
|
- initializeFittingRoom();
|
|
|
- }
|
|
|
- });
|
|
|
- </script>
|
|
|
-</body>
|
|
|
-</html>
|
