feat:new-02

src/app/pages/admin/system-settings/system-settings.html

@@ -1,89 +1,6 @@
+<!-- System Settings Page -->
 <div class="system-settings">
-  <style>
-    /* 全局样式 */
-    :host {
-      display: block;
-      padding: 20px;
-      background-color: #f5f7fa;
-      min-height: 100vh;
-    }
-    
-    /* 统计卡片样式 */
-    .stats-cards {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-      gap: 20px;
-      margin-bottom: 24px;
-    }
-    
-    .stat-card {
-      background: white;
-      padding: 20px;
-      border-radius: 8px;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-      transition: transform 0.3s, box-shadow 0.3s;
-    }
-    
-    .stat-card:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-    }
-    
-    .stat-card .label {
-      font-size: 14px;
-      color: #666;
-      margin-bottom: 8px;
-    }
-    
-    .stat-card .value {
-      font-size: 24px;
-      font-weight: 600;
-      color: #333;
-      margin-bottom: 4px;
-    }
-    
-    .stat-card .unit {
-      font-size: 14px;
-      color: #999;
-    }
-    
-    /* 图表容器样式 */
-    .charts-container {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 24px;
-      margin-bottom: 24px;
-    }
-    
-    .chart-wrapper {
-      background: white;
-      padding: 20px;
-      border-radius: 8px;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-    }
-    
-    .chart-container {
-      height: 300px;
-      margin-top: 16px;
-    }
-    
-    /* 响应式设计 */
-    @media (max-width: 1024px) {
-      .charts-container {
-        grid-template-columns: 1fr;
-      }
-      
-      .stats-cards {
-        grid-template-columns: repeat(2, 1fr);
-      }
-    }
-    
-    @media (max-width: 768px) {
-      .stats-cards {
-        grid-template-columns: 1fr;
-      }
-    }
-  </style>
+
   <!-- 页面标题 -->
   <div class="page-header">
     <h2 class="page-title">系统设置</h2>

src/app/pages/admin/system-settings/system-settings.scss

@@ -965,4 +965,81 @@ $shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.
 
 .workflow-timeline .timeline-step .label {
   letter-spacing: 0.5px;
+}
+
+// 统计卡片区域（系统配置页）
+.stats-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 20px;
+  margin-bottom: 24px;
+}
+
+.stat-card {
+  background: $bg-white;
+  padding: 20px;
+  border-radius: 12px;
+  box-shadow: $shadow-sm;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  border: 1px solid $border-color;
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: $shadow-md;
+  }
+
+  .label {
+    font-size: 13px;
+    color: $text-tertiary;
+    margin-bottom: 8px;
+  }
+
+  .value {
+    font-size: 24px;
+    font-weight: 600;
+    color: $text-primary;
+    margin-bottom: 4px;
+  }
+
+  .unit {
+    font-size: 12px;
+    color: $text-tertiary;
+  }
+}
+
+// 图表区域
+.charts-container {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 24px;
+  margin-bottom: 24px;
+}
+
+.chart-wrapper {
+  background: $bg-white;
+  padding: 20px;
+  border-radius: 12px;
+  box-shadow: $shadow-sm;
+  border: 1px solid $border-color;
+}
+
+.chart-container {
+  height: 300px;
+  margin-top: 12px;
+}
+
+// 响应式优化
+@media (max-width: 1024px) {
+  .charts-container {
+    grid-template-columns: 1fr;
+  }
+  .stats-cards {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .stats-cards {
+    grid-template-columns: 1fr;
+  }
 }

src/app/pages/admin/system-settings/system-settings.ts

@@ -74,7 +74,8 @@ interface PerformanceRule {
     MatMenuModule,
     MatCheckboxModule
   ],
-  templateUrl: './system-settings.html'
+  templateUrl: './system-settings.html',
+  styleUrls: ['./system-settings.scss']
 })
 export class SystemSettings implements OnInit {
   // 当前激活的标签页

src/app/pages/customer-service/project-detail/project-detail.html

@@ -93,7 +93,7 @@
               <div class="feedback-date">{{ formatDate(feedback.date) }}</div>
               <div class="feedback-rating">
                 <span *ngFor="let star of [1,2,3,4,5]">
-                  <i class="fa" [ngClass]="{ 'fa-star': star <= feedback.rating, 'fa-star-o': star > feedback.rating }" style="color: #FFD700;"></i>
+                  <i class="fa" [ngClass]="{ 'fa-star': star <= feedback.rating, 'fa-star-o': star > feedback.rating }"></i>
                 </span>
               </div>
               <div class="feedback-content">{{ feedback.content }}</div>
@@ -267,7 +267,7 @@
               <h4 class="card-title">项目团队</h4>
               <div class="team-info">
                 <div class="team-member">
-                  <div style="width: 64px; height: 48px; background-color: #DCDCDC; color: #555555; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: bold;" class="member-avatar" title="客服小李">IMG</div>
+                  <div class="member-avatar" title="客服小李">IMG</div>
                   <div class="member-details">
                     <div class="member-name">客服小李</div>
                     <div class="member-role">客户经理</div>
@@ -279,7 +279,7 @@
                   </button>
                 </div>
                 <div class="team-member">
-                  <div style="width: 91px; height: 48px; background-color: #DCDCDC; color: #555555; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: bold;" class="member-avatar" title="张设计师">IMG</div>
+                  <div class="member-avatar" title="张设计师">IMG</div>
                   <div class="member-details">
                     <div class="member-name">张设计师</div>
                     <div class="member-role">主设计师</div>
@@ -431,90 +431,6 @@
                 </div>
               </div>
             </div>
-            <!-- 修复消息输入区域，避免重复定义 -->
-            <div class="message-input-area">
-            <!-- 只使用单向绑定 + input事件 -->
-            <textarea 
-              [value]="newMessage()"
-              (input)="onMessageInput($event)"
-              placeholder="输入消息内容..."
-              rows="3"
-              (keydown.enter.shift)="$event.preventDefault()"
-              (keydown.enter)="sendMessage()"
-            ></textarea>
-            <div class="message-actions">
-              <button class="secondary-btn">
-                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-                  <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path>
-                  <polyline points="14 2 14 8 20 8"></polyline>
-                </svg>
-                <span>上传文件</span>
-              </button>
-              <button class="primary-btn" (click)="sendMessage()" [disabled]="!newMessage().trim()">
-                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-                  <line x1="22" y1="2" x2="11" y2="13"></line>
-                  <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
-                </svg>
-                <span>发送</span>
-              </button>
-            </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- 文件标签内容 -->
-        <div *ngIf="activeTab() === 'files'" class="tab-content">
-          <div class="files-filter">
-            <div class="filter-options">
-              <button class="filter-btn active">全部文件</button>
-              <button class="filter-btn">文档</button>
-              <button class="filter-btn">图片</button>
-              <button class="filter-btn">表格</button>
-            </div>
-            <div class="search-box">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-                <circle cx="11" cy="11" r="8"></circle>
-                <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
-              </svg>
-              <input type="text" placeholder="搜索文件...">
-            </div>
-          </div>
-          <div class="files-list">
-            <div *ngFor="let file of files()" class="file-item">
-              <div class="file-icon" [class.type-document]="file.type === 'document'" [class.type-image]="file.type === 'image'" [class.type-spreadsheet]="file.type === 'spreadsheet'">
-                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-                  <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
-                  <polyline points="14 2 14 8 20 8"></polyline>
-                  <line x1="16" y1="13" x2="8" y2="13"></line>
-                  <line x1="16" y1="17" x2="8" y2="17"></line>
-                  <polyline points="10 9 9 9 8 9"></polyline>
-                </svg>
-              </div>
-              <div class="file-info">
-                <h4 class="file-name">{{ file.name }}</h4>
-                <div class="file-meta">
-                  <span class="file-uploader">上传者：{{ file.uploadedBy }}</span>
-                  <span class="file-date">{{ formatDate(file.uploadedAt) }}</span>
-                  <span class="file-size">{{ file.size }}</span>
-                </div>
-              </div>
-              <div class="file-actions">
-                <button class="action-btn btn-hover-effect" (click)="previewFile(file)" title="预览">
-                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-                    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
-                  </svg>
-                </button>
-                <button class="action-btn btn-hover-effect" (click)="downloadFile(file)" title="下载">
-                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
-                    <polyline points="7 10 12 15 17 10"></polyline>
-                    <line x1="12" y1="15" x2="12" y2="3"></line>
-                  </svg>
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
       </div>
     </div>
 

src/app/pages/customer-service/project-detail/project-detail.scss

@@ -1,3 +1,5 @@
+@use "sass:color";
+
 // iOS风格全局变量
 $primary-color: #007AFF;
 $primary-dark: #0047AB;
@@ -1227,6 +1229,15 @@ $text-light: $text-tertiary;
             height: 48px;
             border-radius: 50%;
             object-fit: cover;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: linear-gradient(180deg, #f5f7fa, #e9edf3);
+            color: $text-secondary;
+            font-weight: 600;
+            font-size: 14px;
+            border: 1px solid $border-color;
+            box-shadow: 0 1px 2px rgba(0,0,0,0.04);
           }
 
           .member-details {
@@ -1262,6 +1273,13 @@ $text-light: $text-tertiary;
             &:hover {
               background-color: $primary-color;
               color: white;
+              box-shadow: 0 8px 16px rgba(0,0,0,0.12);
+              transform: translateY(-1px);
+            }
+
+            &:active {
+              transform: translateY(0);
+              box-shadow: 0 4px 10px rgba(0,0,0,0.08);
             }
           }
         }
@@ -1292,6 +1310,11 @@ $text-light: $text-tertiary;
               align-items: center;
               gap: 8px;
 
+              .fa {
+                color: $warning-color;
+                margin-right: 2px;
+              }
+
               .rating-stars {
                 font-size: 12px;
                 color: $warning-color;
@@ -1961,4 +1984,65 @@ $text-light: $text-tertiary;
   .message-content {
     max-width: 85% !important;
   }
+}
+
+// Project Detail iOS tweaks
+.project-detail-container {
+  // 统一卡片间距（仅作用于本页）
+  .card {
+    padding: 20px;
+    margin-bottom: 24px;
+  }
+
+  // 标签页激活态（底部指示条 + 主色高亮）
+  .project-tabs {
+    .tab-header {
+      position: relative;
+    }
+    .tab-btn {
+      position: relative;
+    }
+    .tab-btn.active {
+      color: $primary-color;
+    }
+    .tab-btn.active::after {
+      content: '';
+      position: absolute;
+      left: 16px;
+      right: 16px;
+      bottom: -1px;
+      height: 2px;
+      background: $primary-color;
+      border-radius: 2px;
+    }
+  }
+
+  // 进度条填充质感（渐变 + 轻微内阴影）
+  .progress-bar {
+    .progress-fill {
+      background: linear-gradient(90deg, color.adjust($primary-color, $lightness: 8%), $primary-color);
+      border-radius: 4px;
+      box-shadow: inset 0 0 2px rgba(0,0,0,0.08);
+    }
+  }
+
+  // 输入框聚焦的环形高亮
+  .wechat-input-area {
+    .wechat-input:focus {
+      box-shadow: 0 0 0 3px color-mix(in srgb, $primary-color 15%, transparent);
+    }
+  }
+}
+
+// 响应式优化：侧栏在中等屏略窄，小屏隐藏
+@media (max-width: 1200px) {
+  .project-detail-container {
+    .wechat-sidebar { width: 300px; }
+  }
+}
+@media (max-width: 992px) {
+  .project-detail-container {
+    .wechat-sidebar { display: none; }
+    .project-content-main { width: 100%; }
+  }
 }