xixi_shiyu
/
ai-interview


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能简历筛选系统</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>
        :root {
            --primary: #4361ee;
            --primary-dark: #3a0ca3;
            --secondary: #4cc9f0;
            --success: #2ecc71;
            --warning: #f39c12;
            --danger: #e74c3c;
            --light: #f8f9fa;
            --dark: #212529;
            --gray: #6c757d;
            --light-gray: #e9ecef;
            --border: #dee2e6;
            --shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            --transition: all 0.3s ease;
            --radius: 10px;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
            color: var(--dark);
            line-height: 1.6;
            min-height: 100vh;
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
        }
        
        /* 顶部导航栏 */
        header {
            background: white;
            box-shadow: var(--shadow);
            border-radius: var(--radius);
            margin-bottom: 25px;
            position: sticky;
            top: 10px;
            z-index: 100;
        }
        
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 30px;
        }
        
        .logo {
            display: flex;
            align-items: center;
            gap: 15px;
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--primary);
        }
        
        .logo i {
            color: var(--primary-dark);
        }
        
        .nav-links {
            display: flex;
            gap: 20px;
        }
        
        .nav-link {
            padding: 10px 20px;
            border-radius: 30px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .nav-link:hover {
            background: var(--light);
        }
        
        .nav-link.active {
            background: var(--primary);
            color: white;
        }
        
        .system-info {
            display: flex;
            gap: 20px;
            align-items: center;
        }
        
        .resume-count {
            background: var(--light);
            padding: 8px 15px;
            border-radius: 30px;
            font-weight: 600;
        }
        
        .btn {
            background: var(--primary);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 30px;
            cursor: pointer;
            font-weight: 600;
            transition: var(--transition);
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        
        .btn:hover {
            background: var(--primary-dark);
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(67, 97, 238, 0.3);
        }
        
        .btn-success {
            background: var(--success);
        }
        
        .btn-success:hover {
            background: #27ae60;
            box-shadow: 0 4px 8px rgba(46, 204, 113, 0.3);
        }
        
        .btn-warning {
            background: var(--warning);
        }
        
        .btn-warning:hover {
            background: #e67e22;
            box-shadow: 0 4px 8px rgba(243, 156, 18, 0.3);
        }
        
        .btn-light {
            background: var(--light);
            color: var(--dark);
        }
        
        .btn-light:hover {
            background: #e2e6ea;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        
        /* 页面容器 */
        .page-container {
            display: none;
            animation: fadeIn 0.5s ease;
        }
        
        .page-container.active {
            display: block;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* 面板样式 */
        .panel {
            background: white;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            padding: 25px;
            margin-bottom: 25px;
        }
        
        .panel-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid var(--light-gray);
        }
        
        .panel-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary-dark);
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        /* 简历列表页 */
        .filters-bar {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            margin-bottom: 20px;
            padding: 15px;
            background: white;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
        }
        
        .filter-group {
            display: flex;
            flex-direction: column;
            min-width: 200px;
        }
        
        .filter-label {
            font-weight: 600;
            margin-bottom: 8px;
            color: var(--gray);
            font-size: 0.9rem;
        }
        
        .filter-control {
            padding: 10px 15px;
            border: 1px solid var(--border);
            border-radius: 8px;
            font-size: 1rem;
        }
        
        .candidate-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 20px;
        }
        
        .candidate-card {
            background: white;
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: var(--transition);
            border: 1px solid var(--border);
            position: relative;
        }
        
        .candidate-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        }
        
        .candidate-header {
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            color: white;
            padding: 20px;
            position: relative;
        }
        
        .candidate-status {
            position: absolute;
            top: 15px;
            right: 15px;
            background: rgba(255, 255, 255, 0.2);
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 600;
        }
        
        .status-passed {
            background: rgba(46, 204, 113, 0.3);
        }
        
        .status-pending {
            background: rgba(243, 156, 18, 0.3);
        }
        
        .candidate-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            color: var(--primary);
            margin-bottom: 15px;
            border: 3px solid rgba(255, 255, 255, 0.5);
        }
        
        .candidate-name {
            font-size: 1.5rem;
            margin-bottom: 5px;
        }
        
        .candidate-title {
            opacity: 0.9;
            font-size: 1rem;
            margin-bottom: 10px;
        }
        
        .candidate-score {
            display: inline-block;
            background: rgba(255, 255, 255, 0.2);
            padding: 5px 15px;
            border-radius: 20px;
            font-weight: 700;
            font-size: 1.1rem;
        }
        
        .candidate-body {
            padding: 20px;
        }
        
        .candidate-info {
            margin-bottom: 15px;
        }
        
        .info-item {
            display: flex;
            margin-bottom: 10px;
            font-size: 0.95rem;
        }
        
        .info-label {
            width: 100px;
            font-weight: 600;
            color: var(--gray);
        }
        
        .skills {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 10px;
        }
        
        .skill {
            background: var(--light);
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 0.85rem;
        }
        
        .card-actions {
            display: flex;
            justify-content: space-between;
            padding: 15px 20px;
            border-top: 1px solid var(--light-gray);
        }
        
        /* 筛选配置页 */
        .config-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 25px;
        }
        
        .config-section {
            background: var(--light);
            border-radius: var(--radius);
            padding: 20px;
        }
        
        .config-title {
            font-size: 1.2rem;
            margin-bottom: 15px;
            color: var(--primary-dark);
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .criteria-list {
            list-style: none;
        }
        
        .criteria-item {
            padding: 12px 0;
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .criteria-name {
            font-weight: 500;
        }
        
        .criteria-controls {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .slider-container {
            padding: 10px 0;
        }
        
        .slider-label {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
        }
        
        .slider-value {
            font-weight: 700;
            color: var(--primary);
        }
        
        input[type="range"] {
            width: 100%;
            height: 8px;
            border-radius: 5px;
            background: var(--light-gray);
            outline: none;
        }
        
        /* 简历详情页 */
        .resume-detail-container {
            display: grid;
            grid-template-columns: 300px 1fr;
            gap: 30px;
        }
        
        .resume-sidebar {
            background: white;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            padding: 25px;
            position: sticky;
            top: 100px;
            align-self: start;
        }
        
        .candidate-basic {
            text-align: center;
            padding-bottom: 20px;
            margin-bottom: 20px;
            border-bottom: 1px solid var(--light-gray);
        }
        
        .detail-avatar {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background: var(--light);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
            color: var(--primary);
            margin: 0 auto 15px;
            border: 5px solid var(--light-gray);
        }
        
        .detail-name {
            font-size: 1.8rem;
            margin-bottom: 5px;
        }
        
        .detail-title {
            font-size: 1.2rem;
            color: var(--gray);
            margin-bottom: 15px;
        }
        
        .detail-score {
            display: inline-block;
            background: var(--primary);
            color: white;
            padding: 8px 25px;
            border-radius: 30px;
            font-weight: 700;
            font-size: 1.3rem;
            margin-bottom: 15px;
        }
        
        .contact-info {
            margin: 20px 0;
        }
        
        .contact-item {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
            align-items: center;
        }
        
        .resume-content {
            background: white;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            padding: 30px;
            position: relative;
        }
        
        .back-button {
            position: absolute;
            top: 25px;
            right: 25px;
        }
        
        .section-title {
            font-size: 1.4rem;
            color: var(--primary-dark);
            margin: 30px 0 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid var(--light-gray);
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .section-content {
            line-height: 1.8;
        }
        
        .timeline-item {
            margin-bottom: 25px;
            padding-left: 20px;
            border-left: 2px solid var(--primary);
            position: relative;
        }
        
        .timeline-item:before {
            content: '';
            position: absolute;
            left: -8px;
            top: 5px;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: var(--primary);
        }
        
        .timeline-period {
            font-weight: 600;
            color: var(--primary);
            margin-bottom: 5px;
        }
        
        .timeline-title {
            font-weight: 700;
            margin-bottom: 5px;
        }
        
        .skill-bars {
            margin-top: 20px;
        }
        
        .skill-bar {
            margin-bottom: 15px;
        }
        
        .skill-info {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
        }
        
        .skill-progress {
            height: 10px;
            background: var(--light-gray);
            border-radius: 5px;
            overflow: hidden;
        }
        
        .skill-progress-inner {
            height: 100%;
            background: var(--primary);
            border-radius: 5px;
        }
        
        /* 数据看板页 */
        .dashboard-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }
        
        .metric-card {
            background: white;
            border-radius: var(--radius);
            padding: 25px;
            box-shadow: var(--shadow);
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }
        
        .metric-icon {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background: rgba(67, 97, 238, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            color: var(--primary);
            margin-bottom: 15px;
        }
        
        .metric-value {
            font-size: 2.5rem;
            font-weight: 700;
            margin: 10px 0;
            color: var(--primary);
        }
        
        .metric-label {
            color: var(--gray);
            font-size: 1.1rem;
        }
        
        .metric-change {
            margin-top: 10px;
            font-weight: 600;
            color: var(--success);
        }
        
        .chart-container {
            background: white;
            border-radius: var(--radius);
            padding: 25px;
            box-shadow: var(--shadow);
            margin-top: 25px;
            height: 400px;
        }
        
        .chart-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .chart-title {
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--dark);
        }
        
        /* 响应式设计 */
        @media (max-width: 992px) {
            .resume-detail-container {
                grid-template-columns: 1fr;
            }
            
            .resume-sidebar {
                position: static;
            }
        }
        
        @media (max-width: 768px) {
            .navbar {
                flex-direction: column;
                gap: 15px;
            }
            
            .nav-links {
                width: 100%;
                justify-content: center;
                flex-wrap: wrap;
            }
            
            .system-info {
                width: 100%;
                justify-content: center;
            }
            
            .filters-bar {
                flex-direction: column;
            }
            
            .card-actions {
                flex-direction: column;
                gap: 10px;
            }
            
            .card-actions .btn {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 顶部导航栏 -->
        <header>
            <div class="navbar">
                <div class="logo">
                    <i class="fas fa-file-alt"></i>
                    <span>智能简历筛选系统</span>
                </div>
                
                <div class="nav-links">
                    <div class="nav-link active" data-page="resume-list">
                        <i class="fas fa-list"></i>
                        <span>简历列表</span>
                    </div>
                    <div class="nav-link" data-page="filter-config">
                        <i class="fas fa-sliders-h"></i>
                        <span>筛选配置</span>
                    </div>
                    <div class="nav-link" data-page="dashboard">
                        <i class="fas fa-chart-bar"></i>
                        <span>数据看板</span>
                    </div>
                </div>
                
                <div class="system-info">
                    <div class="resume-count">
                        <i class="fas fa-file"></i>
                        <span>简历总数: <span id="total-resumes">24</span></span>
                    </div>
                    <button class="btn btn-success" id="filter-action">
                        <i class="fas fa-filter"></i>
                        <span>一键筛选 (<span id="passed-resumes">16</span>通过)</span>
                    </button>
                </div>
            </div>
        </header>
        
        <!-- 简历列表页 -->
        <div class="page-container active" id="resume-list-page">
            <div class="panel">
                <div class="panel-header">
                    <h2 class="panel-title">
                        <i class="fas fa-users"></i>
                        <span>候选人列表</span>
                    </h2>
                    <div class="filters-bar">
                        <div class="filter-group">
                            <label class="filter-label">职位类型</label>
                            <select class="filter-control" id="position-filter">
                                <option value="">所有职位</option>
                                <option>前端开发</option>
                                <option>后端开发</option>
                                <option>UI/UX设计</option>
                                <option>数据分析</option>
                                <option>产品经理</option>
                                <option>测试工程师</option>
                            </select>
                        </div>
                        <div class="filter-group">
                            <label class="filter-label">工作经验</label>
                            <select class="filter-control" id="experience-filter">
                                <option value="0">不限经验</option>
                                <option value="1">1年以下</option>
                                <option value="3">1-3年</option>
                                <option value="5">3-5年</option>
                                <option value="10">5年以上</option>
                            </select>
                        </div>
                        <div class="filter-group">
                            <label class="filter-label">学历要求</label>
                            <select class="filter-control" id="education-filter">
                                <option value="">不限学历</option>
                                <option>大专</option>
                                <option>本科</option>
                                <option>硕士</option>
                                <option>博士</option>
                            </select>
                        </div>
                        <div class="filter-group">
                            <label class="filter-label">最低评分</label>
                            <input type="number" class="filter-control" min="0" max="100" value="70" id="min-score">
                        </div>
                        <button class="btn" id="apply-filters">
                            <i class="fas fa-search"></i>
                            <span>应用筛选</span>
                        </button>
                    </div>
                </div>
                
                <div class="candidate-grid" id="candidate-container">
                    <!-- 候选人卡片将通过JS动态生成 -->
                </div>
            </div>
        </div>
        
        <!-- 筛选配置页 -->
        <div class="page-container" id="filter-config-page">
            <div class="panel">
                <div class="panel-header">
                    <h2 class="panel-title">
                        <i class="fas fa-cog"></i>
                        <span>筛选配置</span>
                    </h2>
                    <button class="btn" id="save-config">
                        <i class="fas fa-save"></i>
                        <span>保存配置</span>
                    </button>
                </div>
                
                <div class="config-grid">
                    <div class="config-section">
                        <h3 class="config-title">
                            <i class="fas fa-graduation-cap"></i>
                            <span>学历要求</span>
                        </h3>
                        <ul class="criteria-list">
                            <li class="criteria-item">
                                <span class="criteria-name">大专</span>
                                <div class="criteria-controls">
                                    <input type="checkbox" checked data-type="education" data-value="大专">
                                </div>
                            </li>
                            <li class="criteria-item">
                                <span class="criteria-name">本科</span>
                                <div class="criteria-controls">
                                    <input type="checkbox" checked data-type="education" data-value="本科">
                                </div>
                            </li>
                            <li class="criteria-item">
                                <span class="criteria-name">硕士</span>
                                <div class="criteria-controls">
                                    <input type="checkbox" checked data-type="education" data-value="硕士">
                                </div>
                            </li>
                            <li class="criteria-item">
                                <span class="criteria-name">博士</span>
                                <div class="criteria-controls">
                                    <input type="checkbox" checked data-type="education" data-value="博士">
                                </div>
                            </li>
                        </ul>
                    </div>
                    
                    <div class="config-section">
                        <h3 class="config-title">
                            <i class="fas fa-briefcase"></i>
                            <span>工作经验</span>
                        </h3>
                        <div class="slider-container">
                            <div class="slider-label">
                                <span>最低年限</span>
                                <span class="slider-value" id="exp-value">3年</span>
                            </div>
                            <input type="range" min="0" max="10" value="3" id="exp-slider">
                        </div>
                    </div>
                    
                    <div class="config-section">
                        <h3 class="config-title">
                            <i class="fas fa-money-bill-wave"></i>
                            <span>薪资范围</span>
                        </h3>
                        <div class="slider-container">
                            <div class="slider-label">
                                <span>最高薪资</span>
                                <span class="slider-value" id="salary-value">20K</span>
                            </div>
                            <input type="range" min="5" max="50" value="20" step="5" id="salary-slider">
                        </div>
                    </div>
                    
                    <div class="config-section">
                        <h3 class="config-title">
                            <i class="fas fa-star"></i>
                            <span>评分设置</span>
                        </h3>
                        <div class="slider-container">
                            <div class="slider-label">
                                <span>通过阈值</span>
                                <span class="slider-value" id="score-value">70分</span>
                            </div>
                            <input type="range" min="50" max="100" value="70" id="score-slider">
                        </div>
                    </div>
                    
                    <div class="config-section">
                        <h3 class="config-title">
                            <i class="fas fa-code"></i>
                            <span>技能要求</span>
                        </h3>
                        <ul class="criteria-list">
                            <li class="criteria-item">
                                <span class="criteria-name">JavaScript</span>
                                <div class="criteria-controls">
                                    <input type="checkbox" checked data-type="skill" data-value="JavaScript">
                                </div>
                            </li>
                            <li class="criteria-item">
                                <span class="criteria-name">React</span>
                                <div class="criteria-controls">
                                    <input type="checkbox" checked data-type="skill" data-value="React">
                                </div>
                            </li>
                            <li class="criteria-item">
                                <span class="criteria-name">Node.js</span>
                                <div class="criteria-controls">
                                    <input type="checkbox" data-type="skill" data-value="Node.js">
                                </div>
                            </li>
                            <li class="criteria-item">
                                <span class="criteria-name">Python</span>
                                <div class="criteria-controls">
                                    <input type="checkbox" data-type="skill" data-value="Python">
                                </div>
                            </li>
                            <li class="criteria-item">
                                <span class="criteria-name">SQL</span>
                                <div class="criteria-controls">
                                    <input type="checkbox" data-type="skill" data-value="SQL">
                                </div>
                            </li>
                            <li class="criteria-item">
                                <span class="criteria-name">AWS</span>
                                <div class="criteria-controls">
                                    <input type="checkbox" data-type="skill" data-value="AWS">
                                </div>
                            </li>
                            <li class="criteria-item">
                                <span class="criteria-name">Docker</span>
                                <div class="criteria-controls">
                                    <input type="checkbox" data-type="skill" data-value="Docker">
                                </div>
                            </li>
                            <li class="criteria-item">
                                <span class="criteria-name">Git</span>
                                <div class="criteria-controls">
                                    <input type="checkbox" checked data-type="skill" data-value="Git">
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 简历详情页 -->
        <div class="page-container" id="resume-detail-page">
            <div class="resume-detail-container">
                <div class="resume-sidebar">
                    <div class="candidate-basic">
                        <div class="detail-avatar">
                            <i class="fas fa-user"></i>
                        </div>
                        <h2 class="detail-name" id="detail-name">张明</h2>
                        <div class="detail-title" id="detail-title">高级前端开发工程师</div>
                        <div class="detail-score" id="detail-score">86分</div>
                        <div class="candidate-status" id="detail-status">已通过</div>
                    </div>
                    
                    <div class="contact-info" id="contact-info">
                        <div class="contact-item">
                            <i class="fas fa-envelope"></i>
                            <span>zhangming@example.com</span>
                        </div>
                        <div class="contact-item">
                            <i class="fas fa-phone"></i>
                            <span>13800138000</span>
                        </div>
                        <div class="contact-item">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>北京市海淀区</span>
                        </div>
                    </div>
                    
                    <div class="skills">
                        <h3 class="section-title">
                            <i class="fas fa-code"></i>
                            <span>技能专长</span>
                        </h3>
                        <div class="skill-bars" id="skill-bars">
                            <!-- 技能条将通过JS动态生成 -->
                        </div>
                    </div>
                </div>
                
                <div class="resume-content">
                    <button class="btn btn-light back-button" id="back-to-list">
                        <i class="fas fa-arrow-left"></i>
                        <span>返回列表</span>
                    </button>
                    
                    <h2 class="section-title">
                        <i class="fas fa-user"></i>
                        <span>个人简介</span>
                    </h2>
                    <div class="section-content" id="personal-profile">
                        <!-- 个人简介内容将通过JS动态生成 -->
                    </div>
                    
                    <h2 class="section-title">
                        <i class="fas fa-briefcase"></i>
                        <span>工作经历</span>
                    </h2>
                    <div class="section-content" id="work-experience">
                        <!-- 工作经历内容将通过JS动态生成 -->
                    </div>
                    
                    <h2 class="section-title">
                        <i class="fas fa-graduation-cap"></i>
                        <span>教育背景</span>
                    </h2>
                    <div class="section-content" id="education-background">
                        <!-- 教育背景内容将通过JS动态生成 -->
                    </div>
                    
                    <h2 class="section-title">
                        <i class="fas fa-medal"></i>
                        <span>项目经验</span>
                    </h2>
                    <div class="section-content" id="project-experience">
                        <!-- 项目经验内容将通过JS动态生成 -->
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 数据看板页 -->
        <div class="page-container" id="dashboard-page">
            <div class="dashboard-grid">
                <div class="metric-card">
                    <div class="metric-icon">
                        <i class="fas fa-file"></i>
                    </div>
                    <div class="metric-value" id="total-resumes-dash">24</div>
                    <div class="metric-label">简历总数</div>
                </div>
                <div class="metric-card">
                    <div class="metric-icon">
                        <i class="fas fa-check-circle"></i>
                    </div>
                    <div class="metric-value" id="passed-resumes-dash">16</div>
                    <div class="metric-label">通过筛选</div>
                    <div class="metric-change">+2 较昨日</div>
                </div>
                <div class="metric-card">
                    <div class="metric-icon">
                        <i class="fas fa-percentage"></i>
                    </div>
                    <div class="metric-value">66.7%</div>
                    <div class="metric-label">筛选通过率</div>
                    <div class="metric-change">+3.5% 较上周</div>
                </div>
                <div class="metric-card">
                    <div class="metric-icon">
                        <i class="fas fa-star"></i>
                    </div>
                    <div class="metric-value">78.4</div>
                    <div class="metric-label">平均评分</div>
                    <div class="metric-change">+1.2 较上月</div>
                </div>
            </div>
            
            <div class="chart-container">
                <div class="chart-header">
                    <div class="chart-title">简历评分分布</div>
                    <div class="filter-control">
                        <select id="score-chart-range">
                            <option>最近7天</option>
                            <option>最近30天</option>
                            <option>全部时间</option>
                        </select>
                    </div>
                </div>
                <canvas id="score-distribution-chart"></canvas>
            </div>
            
            <div class="chart-container">
                <div class="chart-header">
                    <div class="chart-title">岗位类型分布</div>
                </div>
                <canvas id="position-distribution-chart"></canvas>
            </div>
        </div>
    </div>

    <script>
        // 简历数据 - 增加更多示例
        const resumes = [
            {
                id: 1,
                name: "张明",
                title: "高级前端开发工程师",
                education: "本科",
                experience: 5,
                salary: 25,
                score: 86,
                skills: ["JavaScript", "HTML", "CSS", "React", "Vue", "TypeScript", "Webpack"],
                status: "passed",
                location: "北京",
                email: "zhangming@example.com",
                phone: "13800138000",
                profile: "5年前端开发经验，专注于构建高性能、用户友好的Web应用程序。精通现代JavaScript框架和响应式设计，对前端工程化和性能优化有深入研究。具有良好的团队协作能力和沟通技巧，能够高效地解决复杂问题并交付高质量产品。",
                workExperience: [
                    {
                        period: "2020年6月 - 至今",
                        company: "科技有限公司",
                        position: "高级前端工程师",
                        responsibilities: [
                            "负责公司核心产品的前端架构设计和实现",
                            "优化应用性能，提升页面加载速度40%",
                            "设计和实现组件库，提高团队开发效率",
                            "指导初级开发人员，组织技术分享会"
                        ]
                    },
                    {
                        period: "2018年3月 - 2020年5月",
                        company: "网络科技有限公司",
                        position: "前端开发工程师",
                        responsibilities: [
                            "参与电商平台的前端开发",
                            "实现响应式设计，优化移动端体验",
                            "与后端团队协作开发API接口",
                            "参与代码审查和团队技术决策"
                        ]
                    }
                ],
                education: [
                    {
                        period: "2014年9月 - 2018年6月",
                        school: "北京大学",
                        major: "计算机科学与技术",
                        degree: "本科"
                    }
                ],
                projects: [
                    {
                        name: "企业级管理系统重构",
                        description: "将遗留系统从AngularJS迁移到React + TypeScript",
                        responsibilities: [
                            "设计并实现组件库，统一UI风格",
                            "优化构建流程，减少构建时间50%",
                            "实现自动化测试，覆盖率从30%提升到85%"
                        ]
                    },
                    {
                        name: "移动电商平台",
                        description: "使用Vue.js开发高性能移动端应用",
                        responsibilities: [
                            "实现服务端渲染(SSR)提升首屏加载速度",
                            "集成支付系统和物流跟踪功能",
                            "优化SEO，提升自然搜索流量30%"
                        ]
                    }
                ],
                skillLevels: [
                    { name: "JavaScript", level: 95 },
                    { name: "React", level: 90 },
                    { name: "Vue.js", level: 85 },
                    { name: "HTML/CSS", level: 92 },
                    { name: "TypeScript", level: 88 },
                    { name: "Webpack", level: 80 }
                ]
            },
            {
                id: 2,
                name: "李华",
                title: "Java后端工程师",
                education: "硕士",
                experience: 6,
                salary: 28,
                score: 92,
                skills: ["Java", "Spring", "MySQL", "Redis", "Linux", "Docker"],
                status: "passed",
                location: "上海",
                email: "lihua@example.com",
                phone: "13900139000",
                profile: "6年Java后端开发经验，精通Spring生态和微服务架构。熟悉高并发、分布式系统设计，有丰富的性能调优经验。主导过多个大型企业级应用的后端架构设计和实现，对系统安全和稳定性有深刻理解。",
                workExperience: [
                    {
                        period: "2019年7月 - 至今",
                        company: "信息技术有限公司",
                        position: "高级Java工程师",
                        responsibilities: [
                            "设计和实现微服务架构",
                            "优化数据库查询性能，减少响应时间60%",
                            "实现分布式缓存系统",
                            "负责系统安全设计和实现"
                        ]
                    },
                    {
                        period: "2017年2月 - 2019年6月",
                        company: "软件科技有限公司",
                        position: "Java开发工程师",
                        responsibilities: [
                            "参与企业ERP系统开发",
                            "设计和实现RESTful API",
                            "优化SQL查询，提高系统性能",
                            "参与系统架构设计"
                        ]
                    }
                ],
                education: [
                    {
                        period: "2013年9月 - 2017年6月",
                        school: "清华大学",
                        major: "软件工程",
                        degree: "硕士"
                    }
                ],
                projects: [
                    {
                        name: "电商平台后端系统",
                        description: "高并发电商平台后端架构设计和实现",
                        responsibilities: [
                            "设计微服务架构",
                            "实现分布式事务处理",
                            "优化数据库性能"
                        ]
                    },
                    {
                        name: "支付系统",
                        description: "企业级支付系统开发",
                        responsibilities: [
                            "设计支付流程",
                            "实现与第三方支付平台对接",
                            "确保系统安全性和稳定性"
                        ]
                    }
                ],
                skillLevels: [
                    { name: "Java", level: 98 },
                    { name: "Spring", level: 95 },
                    { name: "MySQL", level: 90 },
                    { name: "Redis", level: 88 },
                    { name: "Docker", level: 85 },
                    { name: "Linux", level: 80 }
                ]
            },
            {
                id: 3,
                name: "王芳",
                title: "全栈工程师",
                education: "本科",
                experience: 4,
                salary: 22,
                score: 78,
                skills: ["JavaScript", "Node.js", "Express", "MongoDB", "React"],
                status: "passed",
                location: "深圳",
                email: "wangfang@example.com",
                phone: "13700137000",
                profile: "4年全栈开发经验，熟悉JavaScript全栈技术。能够独立完成从前端到后端的完整开发流程。对Web性能优化和用户体验有深入研究，擅长快速学习和应用新技术。",
                workExperience: [
                    {
                        period: "2019年1月 - 至今",
                        company: "互联网科技有限公司",
                        position: "全栈工程师",
                        responsibilities: [
                            "负责Web应用全栈开发",
                            "设计和实现RESTful API",
                            "优化前端性能",
                            "参与数据库设计和优化"
                        ]
                    }
                ],
                education: [
                    {
                        period: "2015年9月 - 2019年6月",
                        school: "浙江大学",
                        major: "计算机科学与技术",
                        degree: "本科"
                    }
                ],
                projects: [
                    {
                        name: "内容管理系统",
                        description: "基于MERN技术栈的内容管理系统",
                        responsibilities: [
                            "全栈开发",
                            "实现用户权限管理",
                            "优化编辑器体验"
                        ]
                    }
                ],
                skillLevels: [
                    { name: "JavaScript", level: 90 },
                    { name: "Node.js", level: 85 },
                    { name: "React", level: 80 },
                    { name: "MongoDB", level: 75 },
                    { name: "Express", level: 70 }
                ]
            },
            {
                id: 4,
                name: "刘伟",
                title: "Python数据分析师",
                education: "硕士",
                experience: 3,
                salary: 18,
                score: 72,
                skills: ["Python", "Pandas", "NumPy", "Matplotlib", "SQL"],
                status: "passed",
                location: "广州",
                email: "liuwei@example.com",
                phone: "13600136000",
                profile: "3年数据分析经验，精通Python数据分析工具链。擅长数据清洗、分析和可视化，能够从海量数据中提取有价值的信息。有丰富的商业分析和预测建模经验。",
                workExperience: [
                    {
                        period: "2020年5月 - 至今",
                        company: "数据科技有限公司",
                        position: "数据分析师",
                        responsibilities: [
                            "数据清洗和分析",
                            "构建预测模型",
                            "生成数据报告",
                            "可视化数据展示"
                        ]
                    }
                ],
                education: [
                    {
                        period: "2017年9月 - 2020年6月",
                        school: "中山大学",
                        major: "数据科学",
                        degree: "硕士"
                    }
                ],
                projects: [
                    {
                        name: "销售预测系统",
                        description: "基于历史数据的销售预测模型",
                        responsibilities: [
                            "数据收集和清洗",
                            "特征工程",
                            "模型训练和评估"
                        ]
                    }
                ],
                skillLevels: [
                    { name: "Python", level: 90 },
                    { name: "Pandas", level: 85 },
                    { name: "NumPy", level: 80 },
                    { name: "Matplotlib", level: 75 },
                    { name: "SQL", level: 70 }
                ]
            },
            {
                id: 5,
                name: "陈静",
                title: "UI/UX设计师",
                education: "本科",
                experience: 4,
                salary: 20,
                score: 65,
                skills: ["Figma", "Sketch", "Photoshop", "Illustrator", "UI设计"],
                status: "pending",
                location: "杭州",
                email: "chenjing@example.com",
                phone: "13500135000",
                profile: "4年UI/UX设计经验，擅长移动端和Web端界面设计。对用户体验有深刻理解，能够将复杂需求转化为直观易用的界面。熟悉设计系统和组件化设计方法。",
                workExperience: [
                    {
                        period: "2019年3月 - 至今",
                        company: "设计工作室",
                        position: "UI设计师",
                        responsibilities: [
                            "移动应用界面设计",
                            "设计规范制定",
                            "用户研究",
                            "原型设计"
                        ]
                    }
                ],
                education: [
                    {
                        period: "2015年9月 - 2019年6月",
                        school: "中国美术学院",
                        major: "视觉传达设计",
                        degree: "本科"
                    }
                ],
                projects: [
                    {
                        name: "电商App设计",
                        description: "从0到1设计电商App",
                        responsibilities: [
                            "用户调研",
                            "信息架构设计",
                            "界面设计",
                            "设计规范制定"
                        ]
                    }
                ],
                skillLevels: [
                    { name: "Figma", level: 95 },
                    { name: "Sketch", level: 90 },
                    { name: "Photoshop", level: 85 },
                    { name: "Illustrator", level: 80 },
                    { name: "UI设计", level: 90 }
                ]
            },
            {
                id: 6,
                name: "杨阳",
                title: "DevOps工程师",
                education: "本科",
                experience: 7,
                salary: 32,
                score: 88,
                skills: ["Docker", "Kubernetes", "AWS", "Jenkins", "Linux"],
                status: "passed",
                location: "成都",
                email: "yangyang@example.com",
                phone: "13400134000",
                profile: "7年DevOps经验，精通云原生技术和自动化部署。熟悉CI/CD流程优化，能够构建高可用、可扩展的基础设施。对系统监控和性能调优有丰富经验。",
                workExperience: [
                    {
                        period: "2018年8月 - 至今",
                        company: "云计算有限公司",
                        position: "DevOps工程师",
                        responsibilities: [
                            "设计和维护CI/CD流程",
                            "容器化应用部署",
                            "云基础设施管理",
                            "系统监控和告警"
                        ]
                    }
                ],
                education: [
                    {
                        period: "2011年9月 - 2015年6月",
                        school: "电子科技大学",
                        major: "计算机科学与技术",
                        degree: "本科"
                    }
                ],
                projects: [
                    {
                        name: "微服务架构部署",
                        description: "将单体应用迁移到微服务架构",
                        responsibilities: [
                            "容器化部署",
                            "服务网格配置",
                            "自动化扩缩容"
                        ]
                    }
                ],
                skillLevels: [
                    { name: "Docker", level: 95 },
                    { name: "Kubernetes", level: 90 },
                    { name: "AWS", level: 85 },
                    { name: "Jenkins", level: 80 },
                    { name: "Linux", level: 90 }
                ]
            },
            {
                id: 7,
                name: "赵琳",
                title: "移动开发工程师",
                education: "硕士",
                experience: 3,
                salary: 21,
                score: 75,
                skills: ["Swift", "Kotlin", "React Native", "Flutter", "iOS"],
                status: "pending",
                location: "南京",
                email: "zhaolin@example.com",
                phone: "13300133000",
                profile: "3年移动开发经验，熟悉iOS和Android原生开发以及跨平台框架。对移动端性能优化和用户体验有深入研究。能够快速学习和应用新技术。",
                workExperience: [
                    {
                        period: "2020年2月 - 至今",
                        company: "移动科技有限公司",
                        position: "移动开发工程师",
                        responsibilities: [
                            "iOS原生应用开发",
                            "Android原生应用开发",
                            "跨平台应用开发",
                            "性能优化"
                        ]
                    }
                ],
                education: [
                    {
                        period: "2017年9月 - 2020年6月",
                        school: "东南大学",
                        major: "软件工程",
                        degree: "硕士"
                    }
                ],
                projects: [
                    {
                        name: "社交App开发",
                        description: "基于React Native的跨平台社交应用",
                        responsibilities: [
                            "核心功能开发",
                            "性能优化",
                            "与后端API对接"
                        ]
                    }
                ],
                skillLevels: [
                    { name: "Swift", level: 85 },
                    { name: "Kotlin", level: 80 },
                    { name: "React Native", level: 75 },
                    { name: "Flutter", level: 70 },
                    { name: "iOS", level: 85 }
                ]
            },
            {
                id: 8,
                name: "周涛",
                title: "大数据工程师",
                education: "博士",
                experience: 8,
                salary: 38,
                score: 90,
                skills: ["Hadoop", "Spark", "Hive", "Scala", "Python"],
                status: "passed",
                location: "武汉",
                email: "zhoutao@example.com",
                phone: "13200132000",
                profile: "8年大数据领域经验，精通Hadoop生态和Spark计算框架。擅长海量数据处理和分析，有丰富的分布式系统优化经验。能够设计和实现高效的数据处理流程。",
                workExperience: [
                    {
                        period: "2017年5月 - 至今",
                        company: "大数据科技有限公司",
                        position: "大数据工程师",
                        responsibilities: [
                            "大数据平台架构设计",
                            "数据处理流程优化",
                            "实时计算系统开发",
                            "团队技术指导"
                        ]
                    }
                ],
                education: [
                    {
                        period: "2012年9月 - 2017年6月",
                        school: "华中科技大学",
                        major: "计算机科学与技术",
                        degree: "博士"
                    }
                ],
                projects: [
                    {
                        name: "实时数据分析平台",
                        description: "基于Spark Streaming的实时数据处理平台",
                        responsibilities: [
                            "架构设计",
                            "性能优化",
                            "数据管道开发"
                        ]
                    }
                ],
                skillLevels: [
                    { name: "Hadoop", level: 95 },
                    { name: "Spark", level: 90 },
                    { name: "Hive", level: 85 },
                    { name: "Scala", level: 80 },
                    { name: "Python", level: 75 }
                ]
            },
            {
                id: 9,
                name: "吴强",
                title: "测试工程师",
                education: "本科",
                experience: 5,
                salary: 18,
                score: 68,
                skills: ["自动化测试", "Selenium", "JMeter", "Postman", "JIRA"],
                status: "pending",
                location: "西安",
                email: "wuqiang@example.com",
                phone: "13100131000",
                profile: "5年软件测试经验，精通自动化测试和性能测试。熟悉敏捷开发流程，能够设计和实施全面的测试策略。对质量保证和缺陷管理有丰富经验。",
                workExperience: [
                    {
                        period: "2018年4月 - 至今",
                        company: "软件测试有限公司",
                        position: "测试工程师",
                        responsibilities: [
                            "自动化测试脚本开发",
                            "性能测试",
                            "测试用例设计",
                            "缺陷跟踪和管理"
                        ]
                    }
                ],
                education: [
                    {
                        period: "2014年9月 - 2018年6月",
                        school: "西安电子科技大学",
                        major: "软件工程",
                        degree: "本科"
                    }
                ],
                projects: [
                    {
                        name: "电商平台测试",
                        description: "全流程测试电商平台",
                        responsibilities: [
                            "功能测试",
                            "性能测试",
                            "安全测试",
                            "测试报告生成"
                        ]
                    }
                ],
                skillLevels: [
                    { name: "自动化测试", level: 85 },
                    { name: "Selenium", level: 80 },
                    { name: "JMeter", level: 75 },
                    { name: "Postman", level: 70 },
                    { name: "JIRA", level: 65 }
                ]
            },
            {
                id: 10,
                name: "郑雪",
                title: "产品经理",
                education: "硕士",
                experience: 6,
                salary: 25,
                score: 82,
                skills: ["产品规划", "用户研究", "Axure", "数据分析", "项目管理"],
                status: "passed",
                location: "重庆",
                email: "zhengxue@example.com",
                phone: "13000130000",
                profile: "6年产品管理经验，熟悉从0到1的产品开发全流程。擅长用户需求分析和产品设计，能够协调跨部门团队推动产品落地。对数据驱动决策有深刻理解。",
                workExperience: [
                    {
                        period: "2019年1月 - 至今",
                        company: "互联网产品有限公司",
                        position: "产品经理",
                        responsibilities: [
                            "产品路线图规划",
                            "用户需求分析",
                            "产品原型设计",
                            "跨部门协调"
                        ]
                    }
                ],
                education: [
                    {
                        period: "2016年9月 - 2019年6月",
                        school: "重庆大学",
                        major: "工商管理",
                        degree: "硕士"
                    }
                ],
                projects: [
                    {
                        name: "企业SaaS产品",
                        description: "从0到1设计并推出企业级SaaS产品",
                        responsibilities: [
                            "市场调研",
                            "产品功能设计",
                            "用户体验优化",
                            "产品上线推广"
                        ]
                    }
                ],
                skillLevels: [
                    { name: "产品规划", level: 90 },
                    { name: "用户研究", level: 85 },
                    { name: "Axure", level: 80 },
                    { name: "数据分析", level: 75 },
                    { name: "项目管理", level: 70 }
                ]
            }
        ];

        // 当前查看的简历ID
        let currentViewingResumeId = null;

        // 初始化应用
        document.addEventListener('DOMContentLoaded', function() {
            renderCandidates(resumes);
            setupEventListeners();
            updateResumeCounts();
            initSliders();
            initCharts();
        });

        // 渲染候选人列表
        function renderCandidates(candidates) {
            const container = document.getElementById('candidate-container');
            
            if (candidates.length === 0) {
                container.innerHTML = `<div class="no-results">没有找到匹配的候选人，请调整筛选条件</div>`;
                return;
            }
            
            let html = '';
            
            candidates.forEach(candidate => {
                const statusClass = candidate.status === "passed" ? "status-passed" : "status-pending";
                const statusText = candidate.status === "passed" ? "已通过" : "待审核";
                
                html += `
                    <div class="candidate-card" data-id="${candidate.id}">
                        <div class="candidate-header">
                            <div class="candidate-status ${statusClass}">${statusText}</div>
                            <div class="candidate-avatar">
                                <i class="fas fa-user"></i>
                            </div>
                            <div class="candidate-name">${candidate.name}</div>
                            <div class="candidate-title">${candidate.title}</div>
                            <div class="candidate-score">${candidate.score}分</div>
                        </div>
                        <div class="candidate-body">
                            <div class="candidate-info">
                                <div class="info-item">
                                    <span class="info-label">学历:</span>
                                    <span>${candidate.education}</span>
                                </div>
                                <div class="info-item">
                                    <span class="info-label">经验:</span>
                                    <span>${candidate.experience}年</span>
                                </div>
                                <div class="info-item">
                                    <span class="info-label">期望薪资:</span>
                                    <span>${candidate.salary}K/月</span>
                                </div>
                                <div class="info-item">
                                    <span class="info-label">所在地:</span>
                                    <span>${candidate.location}</span>
                                </div>
                            </div>
                            <div class="candidate-skills">
                                <div class="info-label">技能:</div>
                                <div class="skills">
                                    ${candidate.skills.map(skill => `<div class="skill">${skill}</div>`).join('')}
                                </div>
                            </div>
                        </div>
                        <div class="card-actions">
                            <button class="btn btn-warning view-detail">
                                <i class="fas fa-eye"></i> 查看详情
                            </button>
                            <button class="btn ${candidate.status === "passed" ? "btn-success" : ""} toggle-status">
                                <i class="fas ${candidate.status === "passed" ? "fa-check" : "fa-hourglass-half"}"></i> 
                                ${candidate.status === "passed" ? "已通过" : "标记通过"}
                            </button>
                        </div>
                    </div>
                `;
            });
            
            container.innerHTML = html;
            
            // 添加查看详情事件
            document.querySelectorAll('.view-detail').forEach(button => {
                button.addEventListener('click', function() {
                    const card = this.closest('.candidate-card');
                    const candidateId = parseInt(card.dataset.id);
                    viewResumeDetail(candidateId);
                });
            });
            
            // 添加标记通过事件
            document.querySelectorAll('.toggle-status').forEach(button => {
                button.addEventListener('click', function() {
                    const card = this.closest('.candidate-card');
                    const candidateId = parseInt(card.dataset.id);
                    toggleCandidateStatus(candidateId);
                });
            });
        }

        // 设置事件监听器
        function setupEventListeners() {
            // 导航切换
            document.querySelectorAll('.nav-link').forEach(link => {
                link.addEventListener('click', function() {
                    if (this.dataset.page === 'resume-detail') return;
                    
                    document.querySelectorAll('.nav-link').forEach(el => {
                        el.classList.remove('active');
                    });
                    this.classList.add('active');
                    
                    const pageId = this.dataset.page + '-page';
                    document.querySelectorAll('.page-container').forEach(page => {
                        page.classList.remove('active');
                    });
                    document.getElementById(pageId).classList.add('active');
                });
            });
            
            // 一键筛选按钮
            document.getElementById('filter-action').addEventListener('click', function() {
                const minScore = parseInt(document.getElementById('min-score').value);
                filterCandidates(minScore);
            });
            
            // 应用筛选按钮
            document.getElementById('apply-filters').addEventListener('click', applyFilters);
            
            // 返回列表按钮
            document.getElementById('back-to-list').addEventListener('click', backToList);
            
            // 保存配置按钮
            document.getElementById('save-config').addEventListener('click', saveConfig);
        }
        
        // 初始化滑块控件
        function initSliders() {
            const expSlider = document.getElementById('exp-slider');
            const expValue = document.getElementById('exp-value');
            const salarySlider = document.getElementById('salary-slider');
            const salaryValue = document.getElementById('salary-value');
            const scoreSlider = document.getElementById('score-slider');
            const scoreValue = document.getElementById('score-value');
            
            expSlider.addEventListener('input', () => {
                expValue.textContent = expSlider.value + '年';
            });
            
            salarySlider.addEventListener('input', () => {
                salaryValue.textContent = salarySlider.value + 'K';
            });
            
            scoreSlider.addEventListener('input', () => {
                scoreValue.textContent = scoreSlider.value + '分';
                document.getElementById('min-score').value = scoreSlider.value;
            });
        }
        
        // 初始化图表
        function initCharts() {
            // 评分分布图
            const scoreCtx = document.getElementById('score-distribution-chart').getContext('2d');
            new Chart(scoreCtx, {
                type: 'bar',
                data: {
                    labels: ['50-59', '60-69', '70-79', '80-89', '90-100'],
                    datasets: [{
                        label: '人数',
                        data: [2, 5, 8, 6, 3],
                        backgroundColor: '#4361ee'
                    }]
                },
                options: {
                    responsive: true,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
            
            // 岗位类型分布图
            const positionCtx = document.getElementById('position-distribution-chart').getContext('2d');
            new Chart(positionCtx, {
                type: 'doughnut',
                data: {
                    labels: ['前端开发', '后端开发', 'UI/UX设计', '数据分析', '产品经理', '测试工程师'],
                    datasets: [{
                        data: [3, 2, 1, 1, 1, 1],
                        backgroundColor: [
                            '#4361ee',
                            '#4cc9f0',
                            '#3a0ca3',
                            '#7209b7',
                            '#f72585',
                            '#4895ef'
                        ]
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'right'
                        }
                    }
                }
            });
        }
        
        // 筛选候选人
        function filterCandidates(minScore) {
            const filtered = resumes.filter(candidate => candidate.score >= minScore);
            renderCandidates(filtered);
            
            // 更新通过人数
            const passedCount = filtered.filter(c => c.status === "passed").length;
            document.getElementById('passed-resumes').textContent = passedCount;
            document.getElementById('passed-resumes-dash').textContent = passedCount;
        }
        
        // 应用筛选条件
        function applyFilters() {
            const position = document.getElementById('position-filter').value;
            const experience = parseInt(document.getElementById('experience-filter').value);
            const education = document.getElementById('education-filter').value;
            const minScore = parseInt(document.getElementById('min-score').value);
            
            const filtered = resumes.filter(candidate => {
                // 职位筛选
                if (position && !candidate.title.includes(position)) {
                    return false;
                }
                
                // 经验筛选
                if (experience > 0 && candidate.experience < experience) {
                    return false;
                }
                
                // 学历筛选
                if (education && candidate.education !== education) {
                    return false;
                }
                
                // 评分筛选
                if (candidate.score < minScore) {
                    return false;
                }
                
                return true;
            });
            
            renderCandidates(filtered);
        }
        
        // 查看简历详情
        function viewResumeDetail(candidateId) {
            const candidate = resumes.find(c => c.id === candidateId);
            if (!candidate) return;
            
            currentViewingResumeId = candidateId;
            
            // 更新基本信息
            document.getElementById('detail-name').textContent = candidate.name;
            document.getElementById('detail-title').textContent = candidate.title;
            document.getElementById('detail-score').textContent = candidate.score + '分';
            
            const statusElement = document.getElementById('detail-status');
            statusElement.textContent = candidate.status === "passed" ? "已通过" : "待审核";
            statusElement.className = `candidate-status status-${candidate.status}`;
            
            // 更新联系方式
            const contactInfo = document.getElementById('contact-info');
            contactInfo.innerHTML = `
                <div class="contact-item">
                    <i class="fas fa-envelope"></i>
                    <span>${candidate.email}</span>
                </div>
                <div class="contact-item">
                    <i class="fas fa-phone"></i>
                    <span>${candidate.phone}</span>
                </div>
                <div class="contact-item">
                    <i class="fas fa-map-marker-alt"></i>
                    <span>${candidate.location}</span>
                </div>
            `;
            
            // 更新技能条
            const skillBars = document.getElementById('skill-bars');
            skillBars.innerHTML = candidate.skillLevels.map(skill => `
                <div class="skill-bar">
                    <div class="skill-info">
                        <span>${skill.name}</span>
                        <span>${skill.level}%</span>
                    </div>
                    <div class="skill-progress">
                        <div class="skill-progress-inner" style="width: ${skill.level}%"></div>
                    </div>
                </div>
            `).join('');
            
            // 更新个人简介
            document.getElementById('personal-profile').innerHTML = `
                <p>${candidate.profile}</p>
            `;
            
            // 更新工作经历
            const workExperience = document.getElementById('work-experience');
            workExperience.innerHTML = candidate.workExperience.map(exp => `
                <div class="timeline-item">
                    <div class="timeline-period">${exp.period}</div>
                    <div class="timeline-title">${exp.position} - ${exp.company}</div>
                    <ul>
                        ${exp.responsibilities.map(resp => `<li>${resp}</li>`).join('')}
                    </ul>
                </div>
            `).join('');
            
            // 更新教育背景
            const educationBackground = document.getElementById('education-background');
            educationBackground.innerHTML = candidate.education.map(edu => `
                <div class="timeline-item">
                    <div class="timeline-period">${edu.period}</div>
                    <div class="timeline-title">${edu.major} ${edu.degree}</div>
                    <div>${edu.school}</div>
                </div>
            `).join('');
            
            // 更新项目经验
            const projectExperience = document.getElementById('project-experience');
            projectExperience.innerHTML = candidate.projects.map(project => `
                <div class="timeline-item">
                    <div class="timeline-title">${project.name}</div>
                    <p>${project.description}</p>
                    <ul>
                        ${project.responsibilities.map(resp => `<li>${resp}</li>`).join('')}
                    </ul>
                </div>
            `).join('');
            
            // 切换到详情页
            document.querySelectorAll('.page-container').forEach(page => {
                page.classList.remove('active');
            });
            document.getElementById('resume-detail-page').classList.add('active');
        }
        
        // 返回列表
        function backToList() {
            document.querySelectorAll('.page-container').forEach(page => {
                page.classList.remove('active');
            });
            document.getElementById('resume-list-page').classList.add('active');
            
            // 确保列表页的导航按钮高亮
            document.querySelectorAll('.nav-link').forEach(link => {
                link.classList.remove('active');
            });
            document.querySelector('[data-page="resume-list"]').classList.add('active');
        }
        
        // 切换候选人状态
        function toggleCandidateStatus(candidateId) {
            const candidate = resumes.find(c => c.id === candidateId);
            if (!candidate) return;
            
            candidate.status = candidate.status === "passed" ? "pending" : "passed";
            renderCandidates(resumes);
            updateResumeCounts();
            
            // 如果当前正在查看这个候选人的详情，更新详情页状态
            if (currentViewingResumeId === candidateId) {
                const statusElement = document.getElementById('detail-status');
                statusElement.textContent = candidate.status === "passed" ? "已通过" : "待审核";
                statusElement.className = `candidate-status status-${candidate.status}`;
            }
        }
        
        // 更新简历数量统计
        function updateResumeCounts() {
            const total = resumes.length;
            const passed = resumes.filter(c => c.status === "passed").length;
            
            document.getElementById('total-resumes').textContent = total;
            document.getElementById('passed-resumes').textContent = passed;
            document.getElementById('total-resumes-dash').textContent = total;
            document.getElementById('passed-resumes-dash').textContent = passed;
        }
        
        // 保存配置
        function saveConfig() {
            alert('筛选配置已保存');
            // 在实际应用中，这里会将配置保存到本地存储或后端
        }
    </script>
</body>
</html>