feat:home 001

manager-web/src/modules/manager/mobile/page-home/page-home.html

@@ -1,17 +1,16 @@
-<!-- page-home.component.html -->
 <div class="container">
   <header>
     <div class="logo">
       <div class="logo-icon">
-        <i class="fas fa-crown"></i>
+        <i class="fas fa-brain"></i>
       </div>
       <div class="logo-text">
-        <h1>九州管理</h1>
-        <p>智能AI权限管理系统</p>
+        <h1>AI智能权限管理系统</h1>
+        <p>基于深度学习的智能行为分析</p>
       </div>
     </div>
     <div class="user-actions">
-      <button class="btn btn-outline">
+      <button class="btn btn-outline" (click)="refreshData()">
         <i class="fas fa-sync-alt"></i> 刷新数据
       </button>
       <button class="btn btn-primary" (click)="addSales()">
@@ -22,211 +21,245 @@
   
   <div class="dashboard">
     <div class="sidebar">
-      <div class="section-title">
-        <i class="fas fa-filter"></i>
-        <span>智能筛选</span>
-      </div>
-      <div class="filters">
-        <div class="filter-group">
-          <label>销售等级</label>
-          <div class="tag-filters">
-            <div class="tag tag-rookie active">实习销售</div>
-            <div class="tag tag-silver">白银销售</div>
-            <div class="tag tag-gold">黄金销售</div>
-            <div class="tag tag-platinum">铂金销售</div>
-            <div class="tag tag-diamond">钻石销售</div>
-          </div>
-        </div>
-        
-        <div class="filter-group">
-          <label>业绩范围</label>
-          <input type="range" min="0" max="100" value="50" class="slider">
-        </div>
-        
-        <div class="filter-group">
-          <label>权限级别</label>
-          <select class="select">
-            <option>全部权限</option>
-            <option>基础权限</option>
-            <option>高级权限</option>
-            <option>管理员权限</option>
-          </select>
-        </div>
-        
-        <button class="btn btn-primary" style="margin-top: 15px;" (click)="aiRecommend()">
-          <i class="fas fa-robot"></i> AI智能推荐
-        </button>
-      </div>
-      
       <div class="stats-card">
         <div class="section-title">
-          <i class="fas fa-chart-line"></i>
-          <span>团队统计</span>
+          <i class="fas fa-chart-pie"></i>
+          <span>团队概览</span>
         </div>
         
         <div class="stat-item">
-          <div>团队成员</div>
+          <div class="stat-info">
+            <i class="fas fa-users"></i>
+            <span>团队成员</span>
+          </div>
           <div class="stat-value">24人</div>
         </div>
         <div class="stat-item">
-          <div>平均业绩</div>
+          <div class="stat-info">
+            <i class="fas fa-yen-sign"></i>
+            <span>平均业绩</span>
+          </div>
           <div class="stat-value">¥86,540</div>
         </div>
         <div class="stat-item">
-          <div>本月成交率</div>
+          <div class="stat-info">
+            <i class="fas fa-percentage"></i>
+            <span>成交率</span>
+          </div>
           <div class="stat-value">72.5%</div>
         </div>
         <div class="stat-item">
-          <div>AI标签准确率</div>
+          <div class="stat-info">
+            <i class="fas fa-robot"></i>
+            <span>AI准确率</span>
+          </div>
           <div class="stat-value">94.8%</div>
         </div>
       </div>
+      
+      <div class="filters-section">
+        <div class="section-title">
+          <i class="fas fa-sliders-h"></i>
+          <span>智能筛选</span>
+        </div>
+        
+        <div class="filter-group">
+          <label><i class="fas fa-tag"></i> 销售等级</label>
+          <div class="tag-filters">
+            <div class="tag tag-rookie" [class.active]="activeFilter === 'rookie'" (click)="setFilter('rookie')">实习销售</div>
+            <div class="tag tag-silver" [class.active]="activeFilter === 'silver'" (click)="setFilter('silver')">白银销售</div>
+            <div class="tag tag-gold" [class.active]="activeFilter === 'gold'" (click)="setFilter('gold')">黄金销售</div>
+            <div class="tag tag-platinum" [class.active]="activeFilter === 'platinum'" (click)="setFilter('platinum')">铂金销售</div>
+            <div class="tag tag-diamond" [class.active]="activeFilter === 'diamond'" (click)="setFilter('diamond')">钻石销售</div>
+          </div>
+        </div>
+        
+        <div class="filter-group">
+          <label><i class="fas fa-yen-sign"></i> 业绩范围</label>
+          <div class="range-slider">
+            <input type="range" min="0" max="100" [(ngModel)]="performanceRange" class="slider">
+            <span class="range-value">{{performanceRange}}%</span>
+          </div>
+        </div>
+        
+        <button class="btn btn-primary btn-ai" (click)="aiRecommend()">
+          <i class="fas fa-magic"></i> AI智能优化
+        </button>
+      </div>
     </div>
     
     <div class="main-content">
       <div class="ai-header">
-        <div>
-          <div class="ai-title">AI智能权限管理系统</div>
-          <div class="ai-subtitle">基于深度学习的销售行为分析，<span class="ai-highlight">自动生成销售标签</span>，智能分配权限级别，动态优化团队结构，提升整体销售业绩</div>
+        <div class="ai-content">
+          <div class="ai-title">AI智能权限管理</div>
+          <div class="ai-subtitle">基于深度学习的销售行为分析，<span class="ai-highlight">自动生成销售标签</span>，智能分配权限级别，动态优化团队结构</div>
+          <div class="ai-stats">
+            <div class="ai-stat">
+              <div class="stat-value">+24.7%</div>
+              <div class="stat-label">团队效率提升</div>
+            </div>
+            <div class="ai-stat">
+              <div class="stat-value">94.8%</div>
+              <div class="stat-label">AI准确率</div>
+            </div>
+          </div>
         </div>
-        <div class="ai-power">
-          <i class="fas fa-brain"></i>
+        <div class="ai-visual">
+          <div class="ai-pulse">
+            <div class="pulse-circle"></div>
+            <div class="pulse-circle"></div>
+            <div class="pulse-circle"></div>
+            <i class="fas fa-brain"></i>
+          </div>
         </div>
       </div>
       
       <div class="cards-container">
-        <!-- 使用 *ngFor 循环生成销售卡片 -->
-        <div class="card {{sales.level}}" *ngFor="let sales of sales" (click)="openPermissionModal(sales)">
+        <div class="card {{sales.level}}" *ngFor="let sales of filteredSales" (click)="openPermissionModal(sales)">
           <div class="card-header">
-            <div class="avatar">
-              <img [src]="sales.avatar" alt="销售头像">
+            <div class="user-badge">
+              <div class="avatar">
+                <img [src]="sales.avatar" alt="销售头像">
+              </div>
+              <div class="level-badge">{{sales.levelName}}</div>
             </div>
             <div class="user-info">
               <h3>{{sales.name}}</h3>
-              <p>入职时间: {{sales.joinDate}}</p>
-              <span class="user-tag tag-{{sales.level}}">{{sales.levelName}}</span>
+              <p class="join-date">入职时间: {{sales.joinDate}}</p>
+              <div class="performance-badge">
+                <i class="fas fa-trophy"></i>
+                <span>本月业绩: {{sales.performance}}</span>
+              </div>
             </div>
           </div>
+          
           <div class="card-body">
-            <div class="stats">
-              <div class="stat">
-                <div class="stat-value">{{sales.performance}}</div>
-                <div class="stat-label">本月业绩</div>
-              </div>
-              <div class="stat">
+            <div class="stats-grid">
+              <div class="stat-item">
                 <div class="stat-value">{{sales.successRate}}</div>
                 <div class="stat-label">成交率</div>
               </div>
-              <div class="stat">
+              <div class="stat-item">
                 <div class="stat-value">{{sales.clients}}</div>
                 <div class="stat-label">客户数</div>
               </div>
             </div>
             
-            <div class="progress-container" *ngIf="sales.trainingProgress !== undefined">
-              <div class="progress-label">
-                <span>培训进度</span>
-                <span>{{sales.trainingProgress}}%</span>
-              </div>
-              <div class="progress-bar">
-                <div class="progress" [style.width.%]="sales.trainingProgress" [style.background]="getProgressColor(sales.level)"></div>
-              </div>
-            </div>
-            
-            <div class="progress-container" *ngIf="sales.satisfaction !== undefined">
-              <div class="progress-label">
-                <span>客户满意度</span>
-                <span>{{sales.satisfaction}}%</span>
-              </div>
-              <div class="progress-bar">
-                <div class="progress" [style.width.%]="sales.satisfaction" [style.background]="getProgressColor(sales.level)"></div>
-              </div>
-            </div>
-            
-            <div class="progress-container" *ngIf="sales.vipClients !== undefined">
-              <div class="progress-label">
-                <span>大客户占比</span>
-                <span>{{sales.vipClients}}%</span>
-              </div>
-              <div class="progress-bar">
-                <div class="progress" [style.width.%]="sales.vipClients" [style.background]="getProgressColor(sales.level)"></div>
-              </div>
-            </div>
-            
-            <div class="progress-container" *ngIf="sales.avgPrice !== undefined">
-              <div class="progress-label">
-                <span>客单价</span>
-                <span>¥11,711</span>
-              </div>
-              <div class="progress-bar">
-                <div class="progress" [style.width.%]="sales.avgPrice" [style.background]="getProgressColor(sales.level)"></div>
-              </div>
-            </div>
-            
-            <div class="progress-container" *ngIf="sales.repurchaseRate !== undefined">
-              <div class="progress-label">
-                <span>复购率</span>
-                <span>{{sales.repurchaseRate}}%</span>
-              </div>
-              <div class="progress-bar">
-                <div class="progress" [style.width.%]="sales.repurchaseRate" [style.background]="getProgressColor(sales.level)"></div>
-              </div>
-            </div>
-            
-            <div class="progress-container">
-              <div class="progress-label">
+            <div class="ai-assessment">
+              <div class="progress-info">
                 <span>AI能力评估</span>
                 <span>{{sales.aiAssessment}}%</span>
               </div>
               <div class="progress-bar">
-                <div class="progress" [style.width.%]="sales.aiAssessment" [style.background]="getProgressColor(sales.level)"></div>
+                <div class="progress-fill" [style.width.%]="sales.aiAssessment" [style.background]="getProgressColor(sales.level)"></div>
               </div>
             </div>
-          </div>
-          <div class="card-footer">
-            <button class="permission-btn btn-edit" (click)="openPermissionModal(sales); $event.stopPropagation()">
-              <i class="fas fa-user-cog"></i> 权限管理
-            </button>
-            <button class="permission-btn btn-details">
-              <i class="fas fa-chart-bar"></i> 业绩详情
-            </button>
+            
+            <div class="action-buttons">
+              <button class="btn-action btn-permission" (click)="openPermissionModal(sales); $event.stopPropagation()">
+                <i class="fas fa-user-cog"></i> 权限管理
+              </button>
+              <button class="btn-action btn-details" (click)="viewDetails(sales); $event.stopPropagation()">
+                <i class="fas fa-chart-line"></i> 业绩分析
+              </button>
+            </div>
           </div>
         </div>
       </div>
       
       <div class="chart-container">
         <div class="chart-header">
-          <div class="chart-title">销售团队业绩分析</div>
+          <div class="chart-title">
+            <i class="fas fa-chart-bar"></i>
+            <span>销售团队业绩分析</span>
+          </div>
           <div class="chart-actions">
-            <button class="btn btn-outline">
+            <button class="btn btn-outline" (click)="exportChart()">
               <i class="fas fa-download"></i> 导出
             </button>
-            <button class="btn btn-primary">
+            <button class="btn btn-primary" (click)="refreshChart()">
               <i class="fas fa-sync-alt"></i> 更新
             </button>
           </div>
         </div>
         <div class="chart-wrapper">
-            @if(chartOptions){
-                <div echarts [options]="chartOptions"  class="echarts-chart"></div>
-            }
+          <div echarts [options]="chartOptions" class="echarts-chart"></div>
         </div>
       </div>
     </div>
   </div>
 </div>
 
+<div class="permission-modal" [class.active]="showModal" (click)="showModal && $event.target === $event.currentTarget && closeModal()">
+  <div class="modal-content" [class.active]="showModal">
+    <div class="modal-header">
+      <div class="user-header">
+        <div class="modal-avatar">
+          <img [src]="currentSales.avatar" alt="销售头像">
+          <span class="modal-level">{{currentSales.levelName}}</span>
+        </div>
+        <h2>{{currentSales.name}} - 权限管理</h2>
+      </div>
+      <button class="close-btn" (click)="closeModal()">&times;</button>
+    </div>
+    
+    <div class="modal-body">
+      <div class="ai-recommendation">
+        <div class="ai-icon">
+          <i class="fas fa-robot"></i>
+        </div>
+        <div class="ai-content">
+          <p [innerHTML]="getAiRecommendation(currentSales.level)"></p>
+          <button class="btn btn-sm btn-primary" (click)="applyAiRecommendation()">
+            <i class="fas fa-check"></i> 应用AI建议
+          </button>
+        </div>
+      </div>
+      
+      <div class="permission-list">
+        <div class="permission-item" *ngFor="let perm of permissions">
+          <div class="permission-info">
+            <div class="perm-icon" [class]="'icon-'+perm.icon">
+              <i class="fas" [class]="'fa-'+perm.icon"></i>
+            </div>
+            <div>
+              <h3>{{perm.title}}</h3>
+              <p>{{perm.description}}</p>
+            </div>
+          </div>
+          <label class="switch">
+            <input type="checkbox" [checked]="perm.enabled" (change)="perm.enabled = !perm.enabled">
+            <span class="slider"></span>
+          </label>
+        </div>
+      </div>
+    </div>
+    
+    <div class="modal-footer">
+      <button class="btn btn-outline" (click)="closeModal()">
+        <i class="fas fa-times"></i> 取消
+      </button>
+      <button class="btn btn-primary" (click)="saveSettings()">
+        <i class="fas fa-save"></i> 保存设置
+      </button>
+    </div>
+  </div>
+</div>
+
 <!-- AI权限管理面板 -->
 <div class="permission-modal" [class.active]="showModal" (click)="showModal && $event.target === $event.currentTarget && closeModal()">
   <div class="modal-content" [class.active]="showModal">
     <div class="modal-header">
-      <h2>{{currentSales.name}} - 权限管理</h2>
+      <h2><i class="fas fa-user-cog"></i> {{currentSales.name}} - 权限管理</h2>
       <button class="close-btn" (click)="closeModal()">&times;</button>
     </div>
     <div class="modal-body">
       <div class="ai-recommendation">
-        <p [innerHTML]="getAiRecommendation(currentSales.level)"></p>
-        <button class="btn btn-primary">
+        <div class="recommendation-content">
+          <i class="fas fa-robot"></i>
+          <p [innerHTML]="getAiRecommendation(currentSales.level)"></p>
+        </div>
+        <button class="btn btn-primary" (click)="applyAiRecommendation()">
           <i class="fas fa-check"></i> 应用AI建议
         </button>
       </div>
@@ -234,8 +267,11 @@
       <div class="permission-options">
         <div class="permission-option">
           <div class="permission-info">
-            <h3>客户数据访问</h3>
-            <p>允许查看和编辑客户信息</p>
+            <i class="fas fa-users"></i>
+            <div>
+              <h3>客户数据访问</h3>
+              <p>允许查看和编辑客户信息</p>
+            </div>
           </div>
           <label class="switch">
             <input type="checkbox" checked>
@@ -245,19 +281,25 @@
         
         <div class="permission-option">
           <div class="permission-info">
-            <h3>报价修改权限</h3>
-            <p>允许修改套餐价格和优惠</p>
+            <i class="fas fa-tags"></i>
+            <div>
+              <h3>报价修改权限</h3>
+              <p>允许修改套餐价格和优惠</p>
+            </div>
           </div>
           <label class="switch">
-            <input type="checkbox">
+            <input type="checkbox" [checked]="currentSales.level !== 'rookie'">
             <span class="slider"></span>
           </label>
         </div>
         
         <div class="permission-option">
           <div class="permission-info">
-            <h3>AI陪练系统</h3>
-            <p>使用AI虚拟陪练功能</p>
+            <i class="fas fa-robot"></i>
+            <div>
+              <h3>AI陪练系统</h3>
+              <p>使用AI虚拟陪练功能</p>
+            </div>
           </div>
           <label class="switch">
             <input type="checkbox" checked>
@@ -267,22 +309,28 @@
         
         <div class="permission-option">
           <div class="permission-info">
-            <h3>高级分析报告</h3>
-            <p>访问详细客户分析报告</p>
+            <i class="fas fa-chart-pie"></i>
+            <div>
+              <h3>高级分析报告</h3>
+              <p>访问详细客户分析报告</p>
+            </div>
           </div>
           <label class="switch">
-            <input type="checkbox">
+            <input type="checkbox" [checked]="['gold', 'platinum', 'diamond'].includes(currentSales.level)">
             <span class="slider"></span>
           </label>
         </div>
         
         <div class="permission-option">
           <div class="permission-info">
-            <h3>跨区域客户</h3>
-            <p>访问和分配跨区域客户</p>
+            <i class="fas fa-globe"></i>
+            <div>
+              <h3>跨区域客户</h3>
+              <p>访问和分配跨区域客户</p>
+            </div>
           </div>
           <label class="switch">
-            <input type="checkbox" checked>
+            <input type="checkbox" [checked]="['platinum', 'diamond'].includes(currentSales.level)">
             <span class="slider"></span>
           </label>
         </div>

manager-web/src/modules/manager/mobile/page-home/page-home.ts

@@ -1,14 +1,16 @@
-// page-home.component.ts
 import { Component, OnInit } from '@angular/core';
 import { NgxEchartsModule } from 'ngx-echarts';
 import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
 import * as echarts from 'echarts';
+
 @Component({
   selector: 'app-page-home',
   standalone: true,
   imports: [
     CommonModule,
-    NgxEchartsModule
+    NgxEchartsModule,
+    FormsModule
   ],
   templateUrl: './page-home.html',
   styleUrls: ['./page-home.scss']
@@ -17,11 +19,71 @@ export class PageHome implements OnInit {
   chartOptions: any;
   showModal = false;
   currentSales: any = {};
+  activeFilter: string | null = null;
+  performanceRange = 50;
+  
+// 在组件类中添加权限数据
+permissions = [
+  {
+    icon: 'users',
+    title: '客户数据访问',
+    description: '允许查看和编辑客户信息',
+    enabled: true
+  },
+  {
+    icon: 'tags',
+    title: '报价修改权限',
+    description: '允许修改套餐价格和优惠',
+    enabled: this.currentSales.level !== 'rookie'
+  },
+  {
+    icon: 'robot',
+    title: 'AI陪练系统',
+    description: '使用AI虚拟陪练功能',
+    enabled: true
+  },
+  {
+    icon: 'chart-pie',
+    title: '高级分析报告',
+    description: '访问详细客户分析报告',
+    enabled: ['gold', 'platinum', 'diamond'].includes(this.currentSales.level)
+  },
+  {
+    icon: 'globe',
+    title: '跨区域客户',
+    description: '访问和分配跨区域客户',
+    enabled: ['platinum', 'diamond'].includes(this.currentSales.level)
+  }
+];
+
+// 更新应用AI建议的方法
+applyAiRecommendation() {
+  const level = this.currentSales.level;
+  
+  switch(level) {
+    case 'rookie':
+      this.permissions[1].enabled = true; // 报价修改权限
+      break;
+    case 'silver':
+      this.permissions[3].enabled = true; // 高级分析报告
+      break;
+    case 'gold':
+      this.permissions[4].enabled = true; // 跨区域客户
+      break;
+  }
+  
+  alert(`已应用AI建议，${this.currentSales.name}的权限已更新`);
+}
   
   ngOnInit() {
     this.initChart();
   }
 
+  get filteredSales() {
+    if (!this.activeFilter) return this.sales;
+    return this.sales.filter(s => s.level === this.activeFilter);
+  }
+
   initChart() {
     this.chartOptions = {
       tooltip: {
@@ -46,7 +108,7 @@ export class PageHome implements OnInit {
         type: 'value',
         axisLine: {
           lineStyle: {
-            color: 'rgba(255, 255, 255, 0.1)'
+            color: 'rgba(0, 0, 0, 0.1)'
           }
         },
         axisLabel: {
@@ -54,7 +116,7 @@ export class PageHome implements OnInit {
         },
         splitLine: {
           lineStyle: {
-            color: 'rgba(255, 255, 255, 0.1)'
+            color: 'rgba(0, 0, 0, 0.05)'
           }
         }
       },
@@ -63,7 +125,7 @@ export class PageHome implements OnInit {
         data: ['实习销售', '白银销售', '黄金销售', '铂金销售', '钻石销售'],
         axisLine: {
           lineStyle: {
-            color: 'rgba(255, 255, 255, 0.1)'
+            color: 'rgba(0, 0, 0, 0.1)'
           }
         },
         axisLabel: {
@@ -102,13 +164,23 @@ export class PageHome implements OnInit {
           label: {
             show: true,
             position: 'right',
-            color: '#64748b'
+            color: '#64748b',
+            formatter: '{c}万'
           }
         }
       ]
     };
   }
 
+  setFilter(level: string) {
+    this.activeFilter = this.activeFilter === level ? null : level;
+  }
+
+  refreshData() {
+    // 模拟数据刷新
+    alert('数据已刷新');
+  }
+
   openPermissionModal(sales: any) {
     this.currentSales = sales;
     this.showModal = true;
@@ -123,6 +195,8 @@ export class PageHome implements OnInit {
     alert('权限设置已保存！');
   }
 
+  
+
   aiRecommend() {
     alert('AI正在分析团队数据，推荐最优权限配置...\n\n结果：建议将3名白银销售升级为黄金销售权限');
   }
@@ -131,6 +205,18 @@ export class PageHome implements OnInit {
     alert('添加新销售功能已打开，请填写销售信息');
   }
 
+  viewDetails(sales: any) {
+    alert(`查看${sales.name}的详细业绩分析`);
+  }
+
+  exportChart() {
+    alert('图表数据已导出');
+  }
+
+  refreshChart() {
+    alert('图表数据已更新');
+  }
+
   getAiRecommendation(level: string) {
     switch(level) {
       case 'rookie':