18307996893
/
ai-manager


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>九州管理 - 智能AI权限管理系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }
        
        :root {
            --primary: #1a56db;
            --secondary: #0e2a53;
            --accent: #f59e0b;
            --success: #10b981;
            --danger: #ef4444;
            --light: #f8fafc;
            --dark: #0f172a;
            --card-bg: rgba(255, 255, 255, 0.85);
            --glass: rgba(255, 255, 255, 0.1);
            --glass-border: rgba(255, 255, 255, 0.2);
            --shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
        }
        
        body {
            background: linear-gradient(135deg, #0f172a, #1e293b);
            color: var(--light);
            min-height: 100vh;
            padding: 20px;
            position: relative;
            overflow-x: hidden;
        }
        
        body::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(circle at 10% 20%, rgba(26, 86, 219, 0.15) 0%, transparent 30%),
                radial-gradient(circle at 90% 80%, rgba(245, 158, 11, 0.15) 0%, transparent 30%);
            z-index: -1;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        /* 头部样式 */
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
            margin-bottom: 30px;
            border-bottom: 1px solid var(--glass-border);
        }
        
        .logo {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .logo-icon {
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, var(--primary), #3b82f6);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            box-shadow: var(--shadow);
        }
        
        .logo-text h1 {
            font-size: 24px;
            font-weight: 700;
            background: linear-gradient(to right, #fbcfe8, #c7d2fe);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .logo-text p {
            font-size: 14px;
            color: #cbd5e1;
            letter-spacing: 1px;
        }
        
        .user-actions {
            display: flex;
            gap: 15px;
        }
        
        .btn {
            padding: 10px 20px;
            border-radius: 10px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            border: none;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, var(--primary), #3b82f6);
            color: white;
            box-shadow: 0 4px 6px rgba(26, 86, 219, 0.3);
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(26, 86, 219, 0.4);
        }
        
        .btn-outline {
            background: transparent;
            border: 1px solid var(--glass-border);
            color: #e2e8f0;
        }
        
        .btn-outline:hover {
            background: rgba(255, 255, 255, 0.1);
        }
        
        /* 主内容区 */
        .dashboard {
            display: flex;
            gap: 25px;
            margin-bottom: 30px;
        }
        
        /* 左侧面板 */
        .sidebar {
            flex: 0 0 280px;
            background: var(--glass);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            border: 1px solid var(--glass-border);
            padding: 25px;
            box-shadow: var(--shadow);
            height: fit-content;
        }
        
        .section-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
            color: #e2e8f0;
        }
        
        .section-title i {
            color: var(--accent);
        }
        
        .filters {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        
        .filter-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .filter-group label {
            font-size: 14px;
            color: #94a3b8;
            font-weight: 500;
        }
        
        .tag-filters {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 5px;
        }
        
        .tag {
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .tag:hover {
            transform: translateY(-2px);
        }
        
        .tag.active {
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        .tag-rookie {
            background: linear-gradient(135deg, #60a5fa, #3b82f6);
            color: white;
        }
        
        .tag-silver {
            background: linear-gradient(135deg, #cbd5e1, #94a3b8);
            color: var(--dark);
        }
        
        .tag-gold {
            background: linear-gradient(135deg, #fcd34d, #f59e0b);
            color: var(--dark);
        }
        
        .tag-platinum {
            background: linear-gradient(135deg, #a5b4fc, #818cf8);
            color: white;
        }
        
        .tag-diamond {
            background: linear-gradient(135deg, #67e8f9, #22d3ee);
            color: var(--dark);
        }
        
        .stats-card {
            background: var(--glass);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            border: 1px solid var(--glass-border);
            padding: 15px;
            margin-top: 20px;
        }
        
        .stat-item {
            display: flex;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }
        
        .stat-item:last-child {
            border-bottom: none;
        }
        
        .stat-value {
            font-weight: 700;
            font-size: 18px;
            background: linear-gradient(to right, #fbcfe8, #c7d2fe);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        /* 主面板 */
        .main-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 25px;
        }
        
        .ai-header {
            background: var(--glass);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            border: 1px solid var(--glass-border);
            padding: 25px;
            box-shadow: var(--shadow);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .ai-title {
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 10px;
            background: linear-gradient(to right, #fde68a, #fcd34d);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .ai-subtitle {
            color: #cbd5e1;
            max-width: 600px;
            line-height: 1.6;
        }
        
        .ai-highlight {
            color: var(--accent);
            font-weight: 600;
        }
        
        .ai-power {
            font-size: 48px;
            color: var(--accent);
            opacity: 0.7;
        }
        
        .cards-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .card {
            background: var(--card-bg);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: all 0.3s ease;
            color: var(--dark);
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 20px rgba(31, 38, 135, 0.2);
        }
        
        .card-header {
            padding: 20px;
            display: flex;
            align-items: center;
            gap: 15px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            position: relative;
        }
        
        .card-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
        }
        
        .rookie .card-header::before { background: linear-gradient(90deg, #60a5fa, #3b82f6); }
        .silver .card-header::before { background: linear-gradient(90deg, #cbd5e1, #94a3b8); }
        .gold .card-header::before { background: linear-gradient(90deg, #fcd34d, #f59e0b); }
        .platinum .card-header::before { background: linear-gradient(90deg, #a5b4fc, #818cf8); }
        .diamond .card-header::before { background: linear-gradient(90deg, #67e8f9, #22d3ee); }
        
        .avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            overflow: hidden;
            border: 3px solid white;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        .avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .user-info {
            flex: 1;
        }
        
        .user-info h3 {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 5px;
            color: var(--dark);
        }
        
        .user-info p {
            font-size: 14px;
            color: #64748b;
        }
        
        .user-tag {
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            margin-top: 5px;
            display: inline-block;
        }
        
        .card-body {
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        
        .stats {
            display: flex;
            justify-content: space-between;
            text-align: center;
        }
        
        .stat {
            flex: 1;
        }
        
        .stat-value {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 5px;
        }
        
        .stat-label {
            font-size: 12px;
            color: #64748b;
        }
        
        .progress-container {
            margin-top: 5px;
        }
        
        .progress-label {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: #64748b;
            margin-bottom: 5px;
        }
        
        .progress-bar {
            height: 8px;
            background: #e2e8f0;
            border-radius: 10px;
            overflow: hidden;
        }
        
        .progress {
            height: 100%;
            border-radius: 10px;
        }
        
        .card-footer {
            padding: 15px 20px;
            background: rgba(241, 245, 249, 0.7);
            display: flex;
            justify-content: space-between;
            border-top: 1px solid rgba(0, 0, 0, 0.05);
        }
        
        .permission-btn {
            padding: 8px 15px;
            border-radius: 8px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 5px;
            border: none;
            transition: all 0.2s ease;
        }
        
        .permission-btn:hover {
            transform: translateY(-2px);
        }
        
        .btn-edit {
            background: linear-gradient(135deg, #a5b4fc, #818cf8);
            color: white;
        }
        
        .btn-details {
            background: rgba(203, 213, 225, 0.5);
            color: var(--dark);
        }
        
        /* 图表容器 */
        .chart-container {
            background: var(--card-bg);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            padding: 25px;
            box-shadow: var(--shadow);
            margin-bottom: 30px;
        }
        
        .chart-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .chart-title {
            font-size: 20px;
            font-weight: 600;
            color: var(--dark);
        }
        
        .chart-actions {
            display: flex;
            gap: 10px;
        }
        
        .chart-wrapper {
            height: 300px;
            position: relative;
        }
        
        /* AI权限管理面板 */
        .permission-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(15, 23, 42, 0.9);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }
        
        .permission-modal.active {
            opacity: 1;
            visibility: visible;
        }
        
        .modal-content {
            background: var(--card-bg);
            width: 90%;
            max-width: 600px;
            border-radius: 20px;
            box-shadow: var(--shadow);
            overflow: hidden;
            transform: translateY(20px);
            transition: transform 0.3s ease;
        }
        
        .permission-modal.active .modal-content {
            transform: translateY(0);
        }
        
        .modal-header {
            padding: 20px;
            background: linear-gradient(135deg, var(--primary), #3b82f6);
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .modal-header h2 {
            font-size: 22px;
        }
        
        .close-btn {
            background: transparent;
            border: none;
            color: white;
            font-size: 24px;
            cursor: pointer;
        }
        
        .modal-body {
            padding: 25px;
            color: var(--dark);
        }
        
        .ai-recommendation {
            background: rgba(26, 86, 219, 0.1);
            border-left: 4px solid var(--primary);
            padding: 15px;
            margin-bottom: 20px;
            border-radius: 0 8px 8px 0;
        }
        
        .ai-recommendation p {
            margin-bottom: 10px;
        }
        
        .ai-recommendation .btn {
            margin-top: 10px;
        }
        
        .permission-options {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        
        .permission-option {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 15px;
            background: rgba(241, 245, 249, 0.5);
            border-radius: 10px;
        }
        
        .permission-info {
            flex: 1;
        }
        
        .permission-info h3 {
            font-size: 16px;
            margin-bottom: 5px;
        }
        
        .permission-info p {
            font-size: 13px;
            color: #64748b;
        }
        
        .switch {
            position: relative;
            display: inline-block;
            width: 50px;
            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: .4s;
            border-radius: 24px;
        }
        
        .slider:before {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
        
        input:checked + .slider {
            background-color: var(--success);
        }
        
        input:checked + .slider:before {
            transform: translateX(26px);
        }
        
        .modal-footer {
            padding: 20px;
            display: flex;
            justify-content: flex-end;
            gap: 15px;
            border-top: 1px solid rgba(0, 0, 0, 0.1);
        }
        
        /* 响应式调整 */
        @media (max-width: 992px) {
            .dashboard {
                flex-direction: column;
            }
            
            .sidebar {
                width: 100%;
            }
        }
        
        @media (max-width: 576px) {
            .cards-container {
                grid-template-columns: 1fr;
            }
            
            .ai-header {
                flex-direction: column;
                text-align: center;
                gap: 20px;
            }
            
            .user-actions {
                flex-wrap: wrap;
                justify-content: center;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <div class="logo">
                <div class="logo-icon">
                    <i class="fas fa-crown"></i>
                </div>
                <div class="logo-text">
                    <h1>九州管理</h1>
                    <p>智能AI权限管理系统</p>
                </div>
            </div>
            <div class="user-actions">
                <button class="btn btn-outline">
                    <i class="fas fa-sync-alt"></i> 刷新数据
                </button>
                <button class="btn btn-primary" id="addSalesBtn">
                    <i class="fas fa-plus"></i> 添加销售
                </button>
            </div>
        </header>
        
        <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;" id="aiRecommendBtn">
                        <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>
                    </div>
                    
                    <div class="stat-item">
                        <div>团队成员</div>
                        <div class="stat-value">24人</div>
                    </div>
                    <div class="stat-item">
                        <div>平均业绩</div>
                        <div class="stat-value">¥86,540</div>
                    </div>
                    <div class="stat-item">
                        <div>本月成交率</div>
                        <div class="stat-value">72.5%</div>
                    </div>
                    <div class="stat-item">
                        <div>AI标签准确率</div>
                        <div class="stat-value">94.8%</div>
                    </div>
                </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>
                    <div class="ai-power">
                        <i class="fas fa-brain"></i>
                    </div>
                </div>
                
                <div class="cards-container">
                    <!-- 实习销售 -->
                    <div class="card rookie" data-sales-id="1">
                        <div class="card-header">
                            <div class="avatar">
                                <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="销售头像">
                            </div>
                            <div class="user-info">
                                <h3>张雨欣</h3>
                                <p>入职时间: 2023-08-15</p>
                                <span class="user-tag tag-rookie">实习销售</span>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="stats">
                                <div class="stat">
                                    <div class="stat-value">¥24,500</div>
                                    <div class="stat-label">本月业绩</div>
                                </div>
                                <div class="stat">
                                    <div class="stat-value">58%</div>
                                    <div class="stat-label">成交率</div>
                                </div>
                                <div class="stat">
                                    <div class="stat-value">12</div>
                                    <div class="stat-label">客户数</div>
                                </div>
                            </div>
                            
                            <div class="progress-container">
                                <div class="progress-label">
                                    <span>培训进度</span>
                                    <span>65%</span>
                                </div>
                                <div class="progress-bar">
                                    <div class="progress" style="width: 65%; background: #60a5fa;"></div>
                                </div>
                            </div>
                            
                            <div class="progress-container">
                                <div class="progress-label">
                                    <span>AI能力评估</span>
                                    <span>42%</span>
                                </div>
                                <div class="progress-bar">
                                    <div class="progress" style="width: 42%; background: #3b82f6;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <button class="permission-btn btn-edit edit-permission">
                                <i class="fas fa-user-cog"></i> 权限管理
                            </button>
                            <button class="permission-btn btn-details">
                                <i class="fas fa-chart-bar"></i> 业绩详情
                            </button>
                        </div>
                    </div>
                    
                    <!-- 白银销售 -->
                    <div class="card silver" data-sales-id="2">
                        <div class="card-header">
                            <div class="avatar">
                                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="销售头像">
                            </div>
                            <div class="user-info">
                                <h3>王建国</h3>
                                <p>入职时间: 2022-11-03</p>
                                <span class="user-tag tag-silver">白银销售</span>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="stats">
                                <div class="stat">
                                    <div class="stat-value">¥68,200</div>
                                    <div class="stat-label">本月业绩</div>
                                </div>
                                <div class="stat">
                                    <div class="stat-value">76%</div>
                                    <div class="stat-label">成交率</div>
                                </div>
                                <div class="stat">
                                    <div class="stat-value">21</div>
                                    <div class="stat-label">客户数</div>
                                </div>
                            </div>
                            
                            <div class="progress-container">
                                <div class="progress-label">
                                    <span>客户满意度</span>
                                    <span>88%</span>
                                </div>
                                <div class="progress-bar">
                                    <div class="progress" style="width: 88%; background: #94a3b8;"></div>
                                </div>
                            </div>
                            
                            <div class="progress-container">
                                <div class="progress-label">
                                    <span>AI能力评估</span>
                                    <span>78%</span>
                                </div>
                                <div class="progress-bar">
                                    <div class="progress" style="width: 78%; background: #64748b;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <button class="permission-btn btn-edit edit-permission">
                                <i class="fas fa-user-cog"></i> 权限管理
                            </button>
                            <button class="permission-btn btn-details">
                                <i class="fas fa-chart-bar"></i> 业绩详情
                            </button>
                        </div>
                    </div>
                    
                    <!-- 黄金销售 -->
                    <div class="card gold" data-sales-id="3">
                        <div class="card-header">
                            <div class="avatar">
                                <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="销售头像">
                            </div>
                            <div class="user-info">
                                <h3>李思琪</h3>
                                <p>入职时间: 2021-05-22</p>
                                <span class="user-tag tag-gold">黄金销售</span>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="stats">
                                <div class="stat">
                                    <div class="stat-value">¥128,400</div>
                                    <div class="stat-label">本月业绩</div>
                                </div>
                                <div class="stat">
                                    <div class="stat-value">84%</div>
                                    <div class="stat-label">成交率</div>
                                </div>
                                <div class="stat">
                                    <div class="stat-value">29</div>
                                    <div class="stat-label">客户数</div>
                                </div>
                            </div>
                            
                            <div class="progress-container">
                                <div class="progress-label">
                                    <span>大客户占比</span>
                                    <span>42%</span>
                                </div>
                                <div class="progress-bar">
                                    <div class="progress" style="width: 42%; background: #f59e0b;"></div>
                                </div>
                            </div>
                            
                            <div class="progress-container">
                                <div class="progress-label">
                                    <span>AI能力评估</span>
                                    <span>92%</span>
                                </div>
                                <div class="progress-bar">
                                    <div class="progress" style="width: 92%; background: #fbbf24;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <button class="permission-btn btn-edit edit-permission">
                                <i class="fas fa-user-cog"></i> 权限管理
                            </button>
                            <button class="permission-btn btn-details">
                                <i class="fas fa-chart-bar"></i> 业绩详情
                            </button>
                        </div>
                    </div>
                    
                    <!-- 铂金销售 -->
                    <div class="card platinum" data-sales-id="4">
                        <div class="card-header">
                            <div class="avatar">
                                <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="销售头像">
                            </div>
                            <div class="user-info">
                                <h3>陈志强</h3>
                                <p>入职时间: 2020-03-14</p>
                                <span class="user-tag tag-platinum">铂金销售</span>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="stats">
                                <div class="stat">
                                    <div class="stat-value">¥210,800</div>
                                    <div class="stat-label">本月业绩</div>
                                </div>
                                <div class="stat">
                                    <div class="stat-value">91%</div>
                                    <div class="stat-label">成交率</div>
                                </div>
                                <div class="stat">
                                    <div class="stat-value">18</div>
                                    <div class="stat-label">客户数</div>
                                </div>
                            </div>
                            
                            <div class="progress-container">
                                <div class="progress-label">
                                    <span>客单价</span>
                                    <span>¥11,711</span>
                                </div>
                                <div class="progress-bar">
                                    <div class="progress" style="width: 85%; background: #818cf8;"></div>
                                </div>
                            </div>
                            
                            <div class="progress-container">
                                <div class="progress-label">
                                    <span>AI能力评估</span>
                                    <span>97%</span>
                                </div>
                                <div class="progress-bar">
                                    <div class="progress" style="width: 97%; background: #a5b4fc;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <button class="permission-btn btn-edit edit-permission">
                                <i class="fas fa-user-cog"></i> 权限管理
                            </button>
                            <button class="permission-btn btn-details">
                                <i class="fas fa-chart-bar"></i> 业绩详情
                            </button>
                        </div>
                    </div>
                    
                    <!-- 钻石销售 -->
                    <div class="card diamond" data-sales-id="5">
                        <div class="card-header">
                            <div class="avatar">
                                <img src="https://randomuser.me/api/portraits/women/26.jpg" alt="销售头像">
                            </div>
                            <div class="user-info">
                                <h3>赵雅芝</h3>
                                <p>入职时间: 2019-08-07</p>
                                <span class="user-tag tag-diamond">钻石销售</span>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="stats">
                                <div class="stat">
                                    <div class="stat-value">¥356,700</div>
                                    <div class="stat-label">本月业绩</div>
                                </div>
                                <div class="stat">
                                    <div class="stat-value">96%</div>
                                    <div class="stat-label">成交率</div>
                                </div>
                                <div class="stat">
                                    <div class="stat-value">15</div>
                                    <div class="stat-label">客户数</div>
                                </div>
                            </div>
                            
                            <div class="progress-container">
                                <div class="progress-label">
                                    <span>复购率</span>
                                    <span>63%</span>
                                </div>
                                <div class="progress-bar">
                                    <div class="progress" style="width: 63%; background: #22d3ee;"></div>
                                </div>
                            </div>
                            
                            <div class="progress-container">
                                <div class="progress-label">
                                    <span>AI能力评估</span>
                                    <span>99%</span>
                                </div>
                                <div class="progress-bar">
                                    <div class="progress" style="width: 99%; background: #67e8f9;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <button class="permission-btn btn-edit edit-permission">
                                <i class="fas fa-user-cog"></i> 权限管理
                            </button>
                            <button class="permission-btn btn-details">
                                <i class="fas fa-chart-bar"></i> 业绩详情
                            </button>
                        </div>
                    </div>
                </div>
                
                <div class="chart-container">
                    <div class="chart-header">
                        <div class="chart-title">销售团队业绩分析</div>
                        <div class="chart-actions">
                            <button class="btn btn-outline">
                                <i class="fas fa-download"></i> 导出
                            </button>
                            <button class="btn btn-primary">
                                <i class="fas fa-sync-alt"></i> 更新
                            </button>
                        </div>
                    </div>
                    <div class="chart-wrapper">
                        <canvas id="salesChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- AI权限管理面板 -->
    <div class="permission-modal" id="permissionModal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>AI权限管理</h2>
                <button class="close-btn" id="closeModal">&times;</button>
            </div>
            <div class="modal-body">
                <div class="ai-recommendation">
                    <p><i class="fas fa-lightbulb"></i> AI建议：根据该销售表现，建议升级为<span class="ai-highlight">黄金销售</span>权限级别</p>
                    <button class="btn btn-primary">
                        <i class="fas fa-check"></i> 应用AI建议
                    </button>
                </div>
                
                <div class="permission-options">
                    <div class="permission-option">
                        <div class="permission-info">
                            <h3>客户数据访问</h3>
                            <p>允许查看和编辑客户信息</p>
                        </div>
                        <label class="switch">
                            <input type="checkbox" checked>
                            <span class="slider"></span>
                        </label>
                    </div>
                    
                    <div class="permission-option">
                        <div class="permission-info">
                            <h3>报价修改权限</h3>
                            <p>允许修改套餐价格和优惠</p>
                        </div>
                        <label class="switch">
                            <input type="checkbox">
                            <span class="slider"></span>
                        </label>
                    </div>
                    
                    <div class="permission-option">
                        <div class="permission-info">
                            <h3>AI陪练系统</h3>
                            <p>使用AI虚拟陪练功能</p>
                        </div>
                        <label class="switch">
                            <input type="checkbox" checked>
                            <span class="slider"></span>
                        </label>
                    </div>
                    
                    <div class="permission-option">
                        <div class="permission-info">
                            <h3>高级分析报告</h3>
                            <p>访问详细客户分析报告</p>
                        </div>
                        <label class="switch">
                            <input type="checkbox">
                            <span class="slider"></span>
                        </label>
                    </div>
                    
                    <div class="permission-option">
                        <div class="permission-info">
                            <h3>跨区域客户</h3>
                            <p>访问和分配跨区域客户</p>
                        </div>
                        <label class="switch">
                            <input type="checkbox" checked>
                            <span class="slider"></span>
                        </label>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-outline" id="cancelBtn">取消</button>
                <button class="btn btn-primary" id="saveBtn">保存设置</button>
            </div>
        </div>
    </div>
    
    <script>
        // 初始化图表
        document.addEventListener('DOMContentLoaded', function() {
            const ctx = document.getElementById('salesChart').getContext('2d');
            
            // 图表数据
            const salesData = {
                labels: ['实习销售', '白银销售', '黄金销售', '铂金销售', '钻石销售'],
                datasets: [{
                    label: '平均月业绩 (万元)',
                    data: [8.2, 22.5, 45.8, 78.3, 125.6],
                    backgroundColor: [
                        'rgba(59, 130, 246, 0.7)',
                        'rgba(148, 163, 184, 0.7)',
                        'rgba(245, 158, 11, 0.7)',
                        'rgba(129, 140, 248, 0.7)',
                        'rgba(34, 211, 238, 0.7)'
                    ],
                    borderColor: [
                        'rgb(59, 130, 246)',
                        'rgb(148, 163, 184)',
                        'rgb(245, 158, 11)',
                        'rgb(129, 140, 248)',
                        'rgb(34, 211, 238)'
                    ],
                    borderWidth: 2
                }]
            };
            
            // 创建柱状图
            const salesChart = new Chart(ctx, {
                type: 'bar',
                data: salesData,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                color: 'rgba(255, 255, 255, 0.1)'
                            },
                            ticks: {
                                color: '#64748b'
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            },
                            ticks: {
                                color: '#64748b'
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            labels: {
                                color: '#64748b'
                            }
                        },
                        tooltip: {
                            backgroundColor: 'rgba(15, 23, 42, 0.9)',
                            titleColor: '#e2e8f0',
                            bodyColor: '#cbd5e1',
                            borderColor: 'rgba(255, 255, 255, 0.1)',
                            borderWidth: 1
                        }
                    }
                }
            });
            
            // 权限管理面板交互
            const modal = document.getElementById('permissionModal');
            const closeBtn = document.getElementById('closeModal');
            const cancelBtn = document.getElementById('cancelBtn');
            const saveBtn = document.getElementById('saveBtn');
            const editButtons = document.querySelectorAll('.edit-permission');
            
            // 打开权限管理面板
            editButtons.forEach(button => {
                button.addEventListener('click', function(e) {
                    e.stopPropagation();
                    const card = this.closest('.card');
                    const salesId = card.getAttribute('data-sales-id');
                    const salesName = card.querySelector('h3').textContent;
                    const salesLevel = card.querySelector('.user-tag').textContent;
                    
                    // 更新模态框标题
                    document.querySelector('.modal-header h2').textContent = `${salesName} - 权限管理`;
                    
                    // 更新AI建议
                    const aiRec = document.querySelector('.ai-recommendation p');
                    if (salesLevel === '实习销售') {
                        aiRec.innerHTML = '<i class="fas fa-lightbulb"></i> AI建议：根据该销售表现，建议升级为<span class="ai-highlight">白银销售</span>权限级别';
                    } else if (salesLevel === '白银销售') {
                        aiRec.innerHTML = '<i class="fas fa-lightbulb"></i> AI建议：根据该销售表现，建议升级为<span class="ai-highlight">黄金销售</span>权限级别';
                    } else if (salesLevel === '黄金销售') {
                        aiRec.innerHTML = '<i class="fas fa-lightbulb"></i> AI建议：根据该销售表现，建议升级为<span class="ai-highlight">铂金销售</span>权限级别';
                    } else if (salesLevel === '铂金销售') {
                        aiRec.innerHTML = '<i class="fas fa-lightbulb"></i> AI建议：根据该销售表现，建议升级为<span class="ai-highlight">钻石销售</span>权限级别';
                    } else {
                        aiRec.innerHTML = '<i class="fas fa-lightbulb"></i> AI建议：该销售已达到最高权限级别，表现优秀';
                    }
                    
                    modal.classList.add('active');
                });
            });
            
            // 关闭权限管理面板
            function closeModal() {
                modal.classList.remove('active');
            }
            
            closeBtn.addEventListener('click', closeModal);
            cancelBtn.addEventListener('click', closeModal);
            saveBtn.addEventListener('click', function() {
                closeModal();
                // 实际应用中这里会保存权限设置
                alert('权限设置已保存！');
            });
            
            // 点击模态框外部关闭
            modal.addEventListener('click', function(e) {
                if (e.target === modal) {
                    closeModal();
                }
            });
            
            // AI智能推荐按钮
            document.getElementById('aiRecommendBtn').addEventListener('click', function() {
                alert('AI正在分析团队数据，推荐最优权限配置...\n\n结果：建议将3名白银销售升级为黄金销售权限');
            });
            
            // 添加销售按钮
            document.getElementById('addSalesBtn').addEventListener('click', function() {
                alert('添加新销售功能已打开，请填写销售信息');
            });
            
            // 添加卡片交互效果
            const cards = document.querySelectorAll('.card');
            cards.forEach(card => {
                card.addEventListener('click', function() {
                    // 移除所有卡片的active类
                    cards.forEach(c => c.classList.remove('active'));
                    
                    // 为当前卡片添加active类
                    this.classList.add('active');
                });
            });
            
            // 添加标签筛选功能
            const tags = document.querySelectorAll('.tag');
            tags.forEach(tag => {
                tag.addEventListener('click', function() {
                    this.classList.toggle('active');
                    filterSales();
                });
            });
            
            function filterSales() {
                // 在实际应用中，这里会根据选中的标签过滤销售卡片
                console.log('应用筛选条件...');
            }
        });
    </script>
</body>
</html>