0235713
/
intelligent-interview


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585258625872588258925902591259225932594259525962597259825992600260126022603260426052606260726082609261026112612261326142615261626172618261926202621262226232624262526262627262826292630263126322633263426352636263726382639264026412642264326442645264626472648264926502651265226532654265526562657265826592660266126622663266426652666266726682669267026712672267326742675267626772678267926802681268226832684268526862687268826892690269126922693269426952696269726982699270027012702270327042705270627072708270927102711271227132714271527162717271827192720272127222723272427252726272727282729273027312732273327342735273627372738273927402741274227432744274527462747274827492750275127522753275427552756275727582759276027612762276327642765276627672768276927702771277227732774277527762777277827792780278127822783278427852786278727882789279027912792279327942795279627972798279928002801280228032804280528062807280828092810281128122813281428152816281728182819282028212822282328242825282628272828282928302831283228332834283528362837283828392840284128422843284428452846284728482849285028512852285328542855285628572858285928602861286228632864286528662867286828692870287128722873287428752876287728782879288028812882288328842885288628872888288928902891289228932894289528962897289828992900290129022903290429052906290729082909291029112912291329142915291629172918291929202921292229232924292529262927292829292930293129322933293429352936293729382939294029412942294329442945294629472948294929502951295229532954295529562957295829592960296129622963296429652966296729682969297029712972297329742975297629772978297929802981298229832984298529862987298829892990299129922993299429952996299729982999300030013002300330043005300630073008300930103011301230133014301530163017301830193020302130223023302430253026302730283029303030313032303330343035303630373038303930403041304230433044304530463047304830493050305130523053305430553056305730583059306030613062306330643065306630673068306930703071307230733074307530763077307830793080308130823083308430853086308730883089309030913092309330943095309630973098309931003101310231033104310531063107310831093110311131123113311431153116311731183119312031213122312331243125312631273128312931303131313231333134313531363137313831393140314131423143314431453146314731483149315031513152315331543155315631573158315931603161316231633164316531663167316831693170317131723173317431753176317731783179318031813182318331843185318631873188318931903191319231933194319531963197319831993200320132023203320432053206320732083209321032113212321332143215321632173218321932203221322232233224322532263227322832293230323132323233323432353236323732383239324032413242324332443245324632473248324932503251325232533254325532563257325832593260326132623263326432653266326732683269327032713272327332743275327632773278327932803281328232833284328532863287328832893290329132923293329432953296329732983299330033013302330333043305330633073308330933103311331233133314331533163317331833193320332133223323332433253326332733283329333033313332333333343335333633373338333933403341334233433344334533463347334833493350335133523353335433553356335733583359336033613362336333643365336633673368336933703371337233733374337533763377337833793380338133823383338433853386338733883389339033913392339333943395339633973398339934003401340234033404340534063407340834093410341134123413341434153416341734183419342034213422342334243425342634273428342934303431343234333434343534363437343834393440344134423443344434453446344734483449345034513452345334543455345634573458345934603461346234633464346534663467346834693470347134723473347434753476347734783479348034813482348334843485348634873488348934903491349234933494349534963497349834993500350135023503350435053506350735083509351035113512351335143515351635173518351935203521352235233524352535263527352835293530353135323533353435353536353735383539354035413542354335443545354635473548354935503551355235533554355535563557355835593560356135623563356435653566356735683569357035713572357335743575357635773578357935803581358235833584358535863587358835893590359135923593359435953596359735983599360036013602360336043605360636073608360936103611361236133614361536163617361836193620362136223623362436253626362736283629363036313632363336343635363636373638363936403641364236433644364536463647364836493650365136523653365436553656365736583659366036613662366336643665366636673668366936703671367236733674367536763677367836793680368136823683368436853686368736883689369036913692369336943695369636973698369937003701370237033704370537063707370837093710371137123713371437153716371737183719372037213722372337243725372637273728372937303731373237333734373537363737373837393740374137423743374437453746374737483749375037513752375337543755375637573758375937603761376237633764376537663767376837693770377137723773377437753776377737783779378037813782378337843785378637873788378937903791379237933794379537963797379837993800380138023803380438053806380738083809381038113812381338143815381638173818381938203821382238233824382538263827382838293830383138323833383438353836383738383839384038413842384338443845384638473848384938503851385238533854385538563857385838593860386138623863386438653866386738683869387038713872387338743875387638773878387938803881388238833884388538863887388838893890389138923893389438953896389738983899390039013902390339043905390639073908390939103911391239133914391539163917391839193920392139223923392439253926392739283929393039313932393339343935393639373938393939403941394239433944394539463947394839493950395139523953395439553956395739583959396039613962396339643965396639673968396939703971397239733974397539763977397839793980398139823983398439853986398739883989399039913992399339943995399639973998399940004001400240034004400540064007400840094010401140124013401440154016401740184019402040214022402340244025402640274028402940304031403240334034403540364037403840394040404140424043404440454046404740484049405040514052405340544055405640574058405940604061406240634064406540664067406840694070407140724073407440754076407740784079408040814082408340844085408640874088408940904091409240934094409540964097409840994100410141024103410441054106410741084109411041114112411341144115411641174118411941204121412241234124412541264127412841294130413141324133413441354136413741384139414041414142414341444145414641474148414941504151415241534154415541564157415841594160416141624163416441654166416741684169417041714172417341744175417641774178417941804181418241834184418541864187418841894190419141924193419441954196419741984199420042014202420342044205420642074208420942104211421242134214421542164217421842194220422142224223422442254226422742284229423042314232423342344235423642374238423942404241424242434244424542464247424842494250425142524253425442554256425742584259426042614262426342644265426642674268426942704271427242734274427542764277427842794280428142824283428442854286428742884289429042914292429342944295429642974298429943004301430243034304430543064307430843094310431143124313431443154316431743184319432043214322432343244325432643274328432943304331433243334334433543364337433843394340434143424343434443454346434743484349435043514352435343544355435643574358435943604361436243634364436543664367436843694370437143724373437443754376437743784379438043814382438343844385438643874388438943904391439243934394439543964397439843994400440144024403440444054406440744084409441044114412441344144415441644174418441944204421442244234424442544264427442844294430443144324433443444354436
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能招聘系统</title>
    <!-- 国内CDN引入 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
    <style>
        :root {
            --primary: #2563eb;
            --secondary: #f59e0b;
            --dark: #1e293b;
            --light: #f8fafc;
            --success: #10b981;
            --danger: #ef4444;
            --warning: #f97316;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background-color: #f1f5f9;
            color: var(--dark);
            line-height: 1.6;
        }
        
        /* 登录页面样式 */
        .login-container {
            display: flex;
            min-height: 100vh;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
        }
        
        .login-box {
            width: 400px;
            background: white;
            border-radius: 12px;
            padding: 40px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            text-align: center;
        }
        
        .login-logo {
            font-size: 28px;
            font-weight: bold;
            color: var(--primary);
            margin-bottom: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }
        
        .login-tabs {
            display: flex;
            margin-bottom: 20px;
            border-bottom: 1px solid #e2e8f0;
        }
        
        .login-tab {
            flex: 1;
            padding: 12px;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.2s;
        }
        
        .login-tab.active {
            color: var(--primary);
            border-bottom: 2px solid var(--primary);
        }
        
        .login-form {
            display: none;
        }
        
        .login-form.active {
            display: block;
        }
        
        .form-group {
            margin-bottom: 20px;
            text-align: left;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
        }
        
        .form-control {
            width: 100%;
            padding: 12px 16px;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            font-size: 16px;
            transition: all 0.2s;
        }
        
        .form-control:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
            outline: none;
        }
        
        .btn {
            padding: 12px;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .btn-block {
            width: 100%;
        }
        
        .btn-primary {
            background: var(--primary);
            color: white;
        }
        
        .btn-primary:hover {
            background: #1d4ed8;
        }
        
        .btn-secondary {
            background: var(--secondary);
            color: white;
        }
        
        .btn-secondary:hover {
            background: #d97706;
        }
        
        .btn-success {
            background: var(--success);
            color: white;
        }
        
        .btn-success:hover {
            background: #059669;
        }
        
        .btn-danger {
            background: var(--danger);
            color: white;
        }
        
        .btn-danger:hover {
            background: #dc2626;
        }
        
        .login-links {
            margin-top: 20px;
            display: flex;
            justify-content: space-between;
        }
        
        .login-link {
            color: var(--primary);
            font-size: 14px;
            cursor: pointer;
        }
        
        /* 主界面样式 */
        .container {
            display: flex;
            min-height: 100vh;
            padding: 20px;
            gap: 20px;
            max-width: 1400px;
            margin: 0 auto;
            display: none;
        }
        
        /* 左侧导航 */
        .sidebar {
            width: 240px;
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            display: flex;
            flex-direction: column;
        }
        
        .logo {
            font-size: 20px;
            font-weight: bold;
            color: var(--primary);
            margin-bottom: 30px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .nav-menu {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .nav-item {
            padding: 12px 16px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            gap: 12px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .nav-item:hover {
            background-color: #f1f5f9;
        }
        
        .nav-item.active {
            background-color: #eff6ff;
            color: var(--primary);
            font-weight: 500;
        }
        
        .nav-item i {
            width: 20px;
            text-align: center;
        }
        
        /* 主内容区 */
        .main-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        /* 顶部信息栏 */
        .header {
            background: white;
            border-radius: 12px;
            padding: 18px 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }
        
        .user-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #e0f2fe;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary);
            font-weight: bold;
            cursor: pointer;
        }
        
        .user-dropdown {
            position: relative;
        }
        
        .dropdown-menu {
            position: absolute;
            top: 50px;
            right: 0;
            width: 200px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            padding: 10px 0;
            z-index: 100;
            display: none;
        }
        
        .dropdown-item {
            padding: 10px 16px;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .dropdown-item:hover {
            background: #f1f5f9;
        }
        
        .dropdown-divider {
            height: 1px;
            background: #e2e8f0;
            margin: 5px 0;
        }
        
        /* 搜索栏 */
        .search-bar {
            display: flex;
            gap: 10px;
            align-items: center;
            flex: 1;
            max-width: 500px;
        }
        
        .search-input {
            flex: 1;
            padding: 10px 16px;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            font-size: 14px;
        }
        
        .search-btn {
            padding: 10px 16px;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
        }
        
        .search-advanced {
            color: var(--primary);
            font-size: 14px;
            cursor: pointer;
            white-space: nowrap;
        }
        
        .search-filters {
            display: none;
            background: white;
            border-radius: 8px;
            padding: 16px;
            margin-top: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }
        
        .search-filters.active {
            display: block;
        }
        
        .filter-row {
            display: flex;
            gap: 16px;
            margin-bottom: 16px;
        }
        
        .filter-group {
            flex: 1;
        }
        
        .filter-group label {
            display: block;
            margin-bottom: 8px;
            font-size: 14px;
            color: #64748b;
        }
        
        .filter-select {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #e2e8f0;
            border-radius: 6px;
            font-size: 14px;
        }
        
        .filter-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }
        
        /* 内容区域样式 */
        .content-area {
            flex: 1;
            background: white;
            border-radius: 12px;
            padding: 24px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            overflow-y: auto;
        }
        
        .content-title {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 24px;
            color: var(--primary);
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        /* 工作/简历卡片样式 */
        .card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        
        .card {
            background: white;
            border-radius: 8px;
            padding: 16px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            border: 1px solid #e2e8f0;
            transition: all 0.2s;
            cursor: pointer;
        }
        
        .card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
        }
        
        .card-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 12px;
        }
        
        .card-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background-color: #e0f2fe;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary);
            font-weight: bold;
        }
        
        .card-title {
            font-weight: 600;
            margin-bottom: 4px;
        }
        
        .card-subtitle {
            font-size: 14px;
            color: #64748b;
        }
        
        .card-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 12px;
        }
        
        .card-tag {
            background: #f1f5f9;
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 12px;
            color: #64748b;
        }
        
        .card-footer {
            margin-top: 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .card-match {
            background: #dcfce7;
            color: #166534;
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 12px;
        }
        
        .card-btn {
            padding: 6px 12px;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 12px;
            cursor: pointer;
        }
        
        /* 简历分析表单 */
        .resume-form {
            max-width: 800px;
            margin: 0 auto;
        }
        
        .form-section {
            margin-bottom: 24px;
            padding: 16px;
            background: #f8fafc;
            border-radius: 8px;
        }
        
        .form-section-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 16px;
            color: var(--primary);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .form-row {
            display: flex;
            gap: 16px;
            margin-bottom: 16px;
        }
        
        .form-col {
            flex: 1;
        }
        
        textarea.form-control {
            min-height: 100px;
            resize: vertical;
        }
        
        .form-actions {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            margin-top: 24px;
        }
        
        /* 职业匹配结果 */
        .match-result {
            margin-top: 24px;
            padding: 16px;
            background: #f8fafc;
            border-radius: 8px;
        }
        
        .match-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 16px;
            color: var(--primary);
        }
        
        .match-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid #e2e8f0;
        }
        
        .match-item:last-child {
            border-bottom: none;
        }
        
        .match-job {
            font-weight: 500;
        }
        
        .match-score {
            font-weight: 600;
            color: var(--primary);
        }
        
        /* 个人中心样式 */
        .profile-container {
            display: flex;
            gap: 24px;
        }
        
        .profile-sidebar {
            width: 240px;
            background: #f8fafc;
            border-radius: 8px;
            padding: 16px;
        }
        
        .profile-menu {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .profile-menu-item {
            padding: 12px 16px;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .profile-menu-item:hover {
            background: #e2e8f0;
        }
        
        .profile-menu-item.active {
            background: #e0f2fe;
            color: var(--primary);
            font-weight: 500;
        }
        
        .profile-content {
            flex: 1;
            background: #f8fafc;
            border-radius: 8px;
            padding: 24px;
        }
        
        .profile-section {
            display: none;
        }
        
        .profile-section.active {
            display: block;
        }
        
        .profile-header {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-bottom: 24px;
        }
        
        .profile-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background-color: #e0f2fe;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary);
            font-size: 32px;
            font-weight: bold;
        }
        
        .profile-info h2 {
            margin-bottom: 8px;
        }
        
        .profile-info p {
            color: #64748b;
        }
        
        .profile-form {
            max-width: 600px;
        }
        
        /* 设置页面样式 */
        .settings-container {
            display: flex;
            gap: 24px;
        }
        
        .settings-sidebar {
            width: 240px;
            background: #f8fafc;
            border-radius: 8px;
            padding: 16px;
        }
        
        .settings-menu {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .settings-menu-item {
            padding: 12px 16px;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .settings-menu-item:hover {
            background: #e2e8f0;
        }
        
        .settings-menu-item.active {
            background: #e0f2fe;
            color: var(--primary);
            font-weight: 500;
        }
        
        .settings-content {
            flex: 1;
            background: #f8fafc;
            border-radius: 8px;
            padding: 24px;
        }
        
        .settings-section {
            display: none;
        }
        
        .settings-section.active {
            display: block;
        }
        
        .settings-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 0;
            border-bottom: 1px solid #e2e8f0;
        }
        
        .settings-item:last-child {
            border-bottom: none;
        }
        
        .settings-item-info h3 {
            margin-bottom: 4px;
        }
        
        .settings-item-info p {
            color: #64748b;
            font-size: 14px;
        }
        
        .settings-item-action .switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 24px;
        }
        
        .settings-item-action .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        
        .settings-item-action .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 24px;
        }
        
        .settings-item-action .slider:before {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
        
        .settings-item-action input:checked + .slider {
            background-color: var(--primary);
        }
        
        .settings-item-action input:checked + .slider:before {
            transform: translateX(26px);
        }
        
        /* 图表容器 */
        .chart-container {
            width: 100%;
            height: 400px;
            margin-top: 24px;
        }
        
        /* 模态框样式 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        .modal-content {
            background: white;
            padding: 24px;
            border-radius: 12px;
            max-width: 600px;
            width: 90%;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
            max-height: 90vh;
            overflow-y: auto;
        }

        .modal-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .modal-buttons {
            display: flex;
            gap: 12px;
            margin-top: 24px;
        }

        .modal-btn {
            flex: 1;
            padding: 10px;
            border-radius: 8px;
            border: none;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }

        .modal-btn-cancel {
            background: #f1f5f9;
            color: var(--dark);
        }

        .modal-btn-confirm {
            background: var(--success);
            color: white;
        }

        .modal-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        
        /* 日历样式 */
        .calendar {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        
        .calendar th {
            padding: 12px;
            text-align: center;
            background: #f1f5f9;
            font-weight: 500;
        }
        
        .calendar td {
            padding: 12px;
            height: 100px;
            vertical-align: top;
            border: 1px solid #e2e8f0;
        }
        
        .calendar-day {
            font-weight: 500;
            margin-bottom: 6px;
        }
        
        .calendar-event {
            background: #e0f2fe;
            color: var(--primary);
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            margin-bottom: 4px;
            cursor: pointer;
        }
        
        /* 搜索历史 */
        .search-history {
            margin-top: 20px;
        }
        
        .history-title {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 12px;
            color: var(--dark);
        }
        
        .history-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .history-tag {
            background: #f1f5f9;
            padding: 6px 12px;
            border-radius: 16px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .history-tag:hover {
            background: #e2e8f0;
        }
        
        /* 热门搜索 */
        .hot-search {
            margin-top: 24px;
        }
        
        .hot-item {
            display: flex;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #e2e8f0;
        }
        
        .hot-rank {
            width: 24px;
            height: 24px;
            background: #f1f5f9;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            font-size: 14px;
        }
        
        .hot-item:nth-child(1) .hot-rank {
            background: #fee2e2;
            color: #b91c1c;
        }
        
        .hot-item:nth-child(2) .hot-rank {
            background: #ffedd5;
            color: #c2410c;
        }
        
        .hot-item:nth-child(3) .hot-rank {
            background: #fef3c7;
            color: #b45309;
        }
        
        .hot-content {
            flex: 1;
        }
        
        .hot-count {
            color: #64748b;
            font-size: 14px;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .login-box {
                width: 90%;
                padding: 30px 20px;
            }
            
            .container {
                flex-direction: column;
                padding: 10px;
            }
            
            .sidebar {
                width: 100%;
                flex-direction: row;
                align-items: center;
            }
            
            .logo {
                margin-bottom: 0;
                margin-right: 30px;
            }
            
            .nav-menu {
                flex-direction: row;
                overflow-x: auto;
                padding-bottom: 10px;
            }
            
            .card-grid {
                grid-template-columns: 1fr;
            }
            
            .form-row {
                flex-direction: column;
                gap: 16px;
            }
            
            .profile-container, .settings-container {
                flex-direction: column;
            }
            
            .profile-sidebar, .settings-sidebar {
                width: 100%;
            }
            
            .profile-header {
                flex-direction: column;
                text-align: center;
            }
            
            .filter-row {
                flex-direction: column;
                gap: 16px;
            }
        }
    </style>
</head>
<body>
    <!-- 登录页面 -->
    <div class="login-container" id="loginPage">
        <div class="login-box">
            <div class="login-logo">
                <i class="fas fa-briefcase"></i>
                <span>智能招聘系统</span>
            </div>
            
            <div class="login-tabs">
                <div class="login-tab active" data-tab="candidate">应聘者登录</div>
                <div class="login-tab" data-tab="recruiter">招聘者登录</div>
            </div>
            
            <!-- 应聘者登录表单 -->
            <div class="login-form active" id="candidateLogin">
                <div class="form-group">
                    <label for="candidateUsername">用户名</label>
                    <input type="text" id="candidateUsername" class="form-control" placeholder="请输入用户名">
                </div>
                <div class="form-group">
                    <label for="candidatePassword">密码</label>
                    <input type="password" id="candidatePassword" class="form-control" placeholder="请输入密码">
                </div>
                <button class="btn btn-primary btn-block" id="candidateLoginBtn">登录</button>
                <div class="login-links">
                    <span class="login-link" id="showRegister">注册账号</span>
                    <span class="login-link" id="showForgot">忘记密码</span>
                </div>
            </div>
            
            <!-- 招聘者登录表单 -->
            <div class="login-form" id="recruiterLogin">
                <div class="form-group">
                    <label for="recruiterUsername">用户名</label>
                    <input type="text" id="recruiterUsername" class="form-control" placeholder="请输入用户名">
                </div>
                <div class="form-group">
                    <label for="recruiterPassword">密码</label>
                    <input type="password" id="recruiterPassword" class="form-control" placeholder="请输入密码">
                </div>
                <button class="btn btn-primary btn-block" id="recruiterLoginBtn">登录</button>
                <div class="login-links">
                    <span class="login-link" id="showRegister2">注册账号</span>
                    <span class="login-link" id="showForgot2">忘记密码</span>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 注册页面 -->
    <div class="login-container" id="registerPage" style="display: none;">
        <div class="login-box">
            <div class="login-logo">
                <i class="fas fa-user-plus"></i>
                <span>注册账号</span>
            </div>
            
            <div class="login-tabs">
                <div class="login-tab active" data-tab="candidateReg">应聘者注册</div>
                <div class="login-tab" data-tab="recruiterReg">招聘者注册</div>
            </div>
            
            <!-- 应聘者注册表单 -->
            <div class="login-form active" id="candidateRegister">
                <div class="form-group">
                    <label for="regCandidateUsername">用户名</label>
                    <input type="text" id="regCandidateUsername" class="form-control" placeholder="请输入用户名">
                </div>
                <div class="form-group">
                    <label for="regCandidatePassword">密码</label>
                    <input type="password" id="regCandidatePassword" class="form-control" placeholder="请输入密码">
                </div>
                <div class="form-group">
                    <label for="regCandidateConfirm">确认密码</label>
                    <input type="password" id="regCandidateConfirm" class="form-control" placeholder="请再次输入密码">
                </div>
                <div class="form-group">
                    <label for="regCandidateEmail">电子邮箱</label>
                    <input type="email" id="regCandidateEmail" class="form-control" placeholder="请输入电子邮箱">
                </div>
                <button class="btn btn-primary btn-block" id="candidateRegisterBtn">注册</button>
                <div class="login-links">
                    <span class="login-link" id="backToLogin">返回登录</span>
                </div>
            </div>
            
            <!-- 招聘者注册表单 -->
            <div class="login-form" id="recruiterRegister">
                <div class="form-group">
                    <label for="regRecruiterUsername">用户名</label>
                    <input type="text" id="regRecruiterUsername" class="form-control" placeholder="请输入用户名">
                </div>
                <div class="form-group">
                    <label for="regRecruiterPassword">密码</label>
                    <input type="password" id="regRecruiterPassword" class="form-control" placeholder="请输入密码">
                </div>
                <div class="form-group">
                    <label for="regRecruiterConfirm">确认密码</label>
                    <input type="password" id="regRecruiterConfirm" class="form-control" placeholder="请再次输入密码">
                </div>
                <div class="form-group">
                    <label for="regRecruiterEmail">电子邮箱</label>
                    <input type="email" id="regRecruiterEmail" class="form-control" placeholder="请输入电子邮箱">
                </div>
                <div class="form-group">
                    <label for="regCompany">公司名称</label>
                    <input type="text" id="regCompany" class="form-control" placeholder="请输入公司名称">
                </div>
                <button class="btn btn-primary btn-block" id="recruiterRegisterBtn">注册</button>
                <div class="login-links">
                    <span class="login-link" id="backToLogin2">返回登录</span>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 忘记密码页面 -->
    <div class="login-container" id="forgotPage" style="display: none;">
        <div class="login-box">
            <div class="login-logo">
                <i class="fas fa-key"></i>
                <span>找回密码</span>
            </div>
            
            <div class="form-group">
                <label for="forgotEmail">电子邮箱</label>
                <input type="email" id="forgotEmail" class="form-control" placeholder="请输入注册时使用的电子邮箱">
            </div>
            <button class="btn btn-primary btn-block" id="forgotBtn">发送重置链接</button>
            <div class="login-links">
                <span class="login-link" id="backToLogin3">返回登录</span>
            </div>
        </div>
    </div>
    
    <!-- 主界面 - 应聘者 -->
    <div class="container" id="candidateContainer">
        <!-- 左侧导航 -->
        <div class="sidebar">
            <div class="logo">
                <i class="fas fa-user-tie"></i>
                <span>应聘者中心</span>
            </div>
            <div class="nav-menu">
                <div class="nav-item active" id="navCandidateJobs">
                    <i class="fas fa-briefcase"></i>
                    <span>工作机会</span>
                </div>
                <div class="nav-item" id="navCandidateResume">
                    <i class="fas fa-file-alt"></i>
                    <span>简历分析</span>
                </div>
                <div class="nav-item" id="navCandidateInterview">
                    <i class="fas fa-video"></i>
                    <span>视频面试</span>
                </div>
                <div class="nav-item" id="navCandidateRecords">
                    <i class="fas fa-history"></i>
                    <span>面试记录</span>
                </div>
                <div class="nav-item" id="navCandidateProfile">
                    <i class="fas fa-user"></i>
                    <span>个人中心</span>
                </div>
                <div class="nav-item" id="navCandidateSettings">
                    <i class="fas fa-cog"></i>
                    <span>系统设置</span>
                </div>
            </div>
        </div>
        
        <!-- 主内容区 -->
        <div class="main-content">
            <!-- 顶部信息栏 -->
            <div class="header">
                <div class="search-bar">
                    <input type="text" class="search-input" placeholder="搜索工作职位、公司..." id="candidateSearchInput">
                    <button class="search-btn" id="candidateSearchBtn">
                        <i class="fas fa-search"></i>
                    </button>
                    <span class="search-advanced" id="candidateAdvancedSearch">高级筛选</span>
                </div>
                <div class="search-filters" id="candidateSearchFilters">
                    <div class="filter-row">
                        <div class="filter-group">
                            <label for="jobTypeFilter">职位类型</label>
                            <select id="jobTypeFilter" class="filter-select">
                                <option value="">全部</option>
                                <option value="fulltime">全职</option>
                                <option value="parttime">兼职</option>
                                <option value="intern">实习</option>
                            </select>
                        </div>
                        <div class="filter-group">
                            <label for="jobLocationFilter">工作地点</label>
                            <select id="jobLocationFilter" class="filter-select">
                                <option value="">全部</option>
                                <option value="beijing">北京</option>
                                <option value="shanghai">上海</option>
                                <option value="guangzhou">广州</option>
                                <option value="shenzhen">深圳</option>
                            </select>
                        </div>
                    </div>
                    <div class="filter-row">
                        <div class="filter-group">
                            <label for="jobSalaryFilter">薪资范围</label>
                            <select id="jobSalaryFilter" class="filter-select">
                                <option value="">全部</option>
                                <option value="10k">10k以下</option>
                                <option value="10-20k">10-20k</option>
                                <option value="20-30k">20-30k</option>
                                <option value="30k+">30k以上</option>
                            </select>
                        </div>
                        <div class="filter-group">
                            <label for="jobExperienceFilter">经验要求</label>
                            <select id="jobExperienceFilter" class="filter-select">
                                <option value="">全部</option>
                                <option value="1">1年以下</option>
                                <option value="1-3">1-3年</option>
                                <option value="3-5">3-5年</option>
                                <option value="5+">5年以上</option>
                            </select>
                        </div>
                    </div>
                    <div class="filter-actions">
                        <button class="btn" id="resetFilters">重置</button>
                        <button class="btn btn-primary" id="applyFilters">应用筛选</button>
                    </div>
                </div>
                <div class="user-info">
                    <div class="user-dropdown">
                        <div class="avatar" id="userAvatar">张</div>
                        <div class="dropdown-menu" id="userDropdown">
                            <div class="dropdown-item" id="dropdownProfile">
                                <i class="fas fa-user"></i> 个人中心
                            </div>
                            <div class="dropdown-item" id="dropdownSettings">
                                <i class="fas fa-cog"></i> 系统设置
                            </div>
                            <div class="dropdown-divider"></div>
                            <div class="dropdown-item" id="dropdownLogout">
                                <i class="fas fa-sign-out-alt"></i> 退出登录
                            </div>
                        </div>
                    </div>
                    <div>
                        <div style="font-weight: 500;">张伟</div>
                        <div style="font-size: 12px; color: #64748b;">应聘者</div>
                    </div>
                </div>
            </div>
            
            <!-- 工作机会页面 -->
            <div class="content-area" id="candidateJobsPage">
                <div class="content-title">
                    <i class="fas fa-briefcase"></i>
                    <span>推荐工作机会</span>
                </div>
                
                <!-- 搜索历史 -->
                <div class="search-history">
                    <div class="history-title">搜索历史</div>
                    <div class="history-tags" id="searchHistoryTags">
                        <span class="history-tag">前端开发</span>
                        <span class="history-tag">北京</span>
                        <span class="history-tag">20k以上</span>
                        <span class="history-tag">互联网</span>
                    </div>
                </div>
                
                <!-- 热门搜索 -->
                <div class="hot-search">
                    <div class="history-title">热门搜索</div>
                    <div id="hotSearchList">
                        <div class="hot-item">
                            <div class="hot-rank">1</div>
                            <div class="hot-content">Java开发工程师</div>
                            <div class="hot-count">1.2万次</div>
                        </div>
                        <div class="hot-item">
                            <div class="hot-rank">2</div>
                            <div class="hot-content">产品经理</div>
                            <div class="hot-count">9800次</div>
                        </div>
                        <div class="hot-item">
                            <div class="hot-rank">3</div>
                            <div class="hot-content">UI设计师</div>
                            <div class="hot-count">8500次</div>
                        </div>
                        <div class="hot-item">
                            <div class="hot-rank">4</div>
                            <div class="hot-content">数据分析师</div>
                            <div class="hot-count">7200次</div>
                        </div>
                    </div>
                </div>
                
                <div class="card-grid" id="jobGrid">
                    <!-- 工作卡片将通过JS动态生成 -->
                </div>
            </div>
            
            <!-- 简历分析页面 -->
            <div class="content-area" id="candidateResumePage" style="display: none;">
                <div class="content-title">
                    <i class="fas fa-file-alt"></i>
                    <span>我的简历</span>
                </div>
                
                <div class="resume-form">
                    <div class="form-section">
                        <div class="form-section-title">
                            <i class="fas fa-user"></i>
                            <span>基本信息</span>
                        </div>
                        <div class="form-row">
                            <div class="form-col">
                                <label for="resumeName">姓名</label>
                                <input type="text" id="resumeName" class="form-control" placeholder="请输入您的姓名" value="张伟">
                            </div>
                            <div class="form-col">
                                <label for="resumeGender">性别</label>
                                <select id="resumeGender" class="form-control">
                                    <option value="male" selected>男</option>
                                    <option value="female">女</option>
                                    <option value="other">其他</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-col">
                                <label for="resumeBirth">出生日期</label>
                                <input type="date" id="resumeBirth" class="form-control" value="1990-05-15">
                            </div>
                            <div class="form-col">
                                <label for="resumePhone">联系电话</label>
                                <input type="tel" id="resumePhone" class="form-control" placeholder="请输入联系电话" value="13800138000">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-col">
                                <label for="resumeEmail">电子邮箱</label>
                                <input type="email" id="resumeEmail" class="form-control" placeholder="请输入电子邮箱" value="zhangwei@example.com">
                            </div>
                            <div class="form-col">
                                <label for="resumeLocation">居住地</label>
                                <input type="text" id="resumeLocation" class="form-control" placeholder="请输入居住城市" value="北京">
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-section">
                        <div class="form-section-title">
                            <i class="fas fa-graduation-cap"></i>
                            <span>教育背景</span>
                        </div>
                        <div class="form-row">
                            <div class="form-col">
                                <label for="resumeSchool">学校名称</label>
                                <input type="text" id="resumeSchool" class="form-control" placeholder="请输入学校名称" value="北京大学">
                            </div>
                            <div class="form-col">
                                <label for="resumeDegree">学历</label>
                                <select id="resumeDegree" class="form-control">
                                    <option value="bachelor" selected>本科</option>
                                    <option value="master">硕士</option>
                                    <option value="phd">博士</option>
                                    <option value="college">大专</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-col">
                                <label for="resumeMajor">专业</label>
                                <input type="text" id="resumeMajor" class="form-control" placeholder="请输入所学专业" value="计算机科学与技术">
                            </div>
                            <div class="form-col">
                                <label for="resumeGraduation">毕业时间</label>
                                <input type="date" id="resumeGraduation" class="form-control" value="2012-06-30">
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-section">
                        <div class="form-section-title">
                            <i class="fas fa-briefcase"></i>
                            <span>工作经历</span>
                        </div>
                        <div id="workExperienceContainer">
                            <!-- 工作经历将通过JS动态添加 -->
                        </div>
                        <button class="btn" id="addWorkExperience" style="margin-top: 10px;">
                            <i class="fas fa-plus"></i> 添加工作经历
                        </button>
                    </div>
                    
                    <div class="form-section">
                        <div class="form-section-title">
                            <i class="fas fa-project-diagram"></i>
                            <span>项目经验</span>
                        </div>
                        <div id="projectExperienceContainer">
                            <!-- 项目经验将通过JS动态添加 -->
                        </div>
                        <button class="btn" id="addProjectExperience" style="margin-top: 10px;">
                            <i class="fas fa-plus"></i> 添加项目经验
                        </button>
                    </div>
                    
                    <div class="form-section">
                        <div class="form-section-title">
                            <i class="fas fa-star"></i>
                            <span>技能专长</span>
                        </div>
                        <div class="form-group">
                            <label for="resumeSkills">技能 (用逗号分隔)</label>
                            <input type="text" id="resumeSkills" class="form-control" placeholder="例如: JavaScript, Python, 项目管理" value="JavaScript, HTML5, CSS3, Vue.js, React, Node.js, 项目管理">
                        </div>
                    </div>
                    
                    <div class="form-section">
                        <div class="form-section-title">
                            <i class="fas fa-certificate"></i>
                            <span>证书资质</span>
                        </div>
                        <div id="certificateContainer">
                            <!-- 证书将通过JS动态添加 -->
                        </div>
                        <button class="btn" id="addCertificate" style="margin-top: 10px;">
                            <i class="fas fa-plus"></i> 添加证书
                        </button>
                    </div>
                    
                    <div class="form-actions">
                        <button class="btn" id="cancelResume">
                            取消
                        </button>
                        <button class="btn btn-primary" id="saveResume">
                            <i class="fas fa-save"></i> 保存简历
                        </button>
                        <button class="btn btn-primary" id="analyzeResume">
                            <i class="fas fa-chart-bar"></i> 分析匹配度
                        </button>
                    </div>
                </div>
                
                <!-- 职业匹配结果 -->
                <div class="match-result" id="matchResult" style="display: none;">
                    <div class="match-title">
                        <i class="fas fa-chart-pie"></i>
                        <span>职业匹配分析</span>
                    </div>
                    <div id="matchList">
                        <!-- 匹配结果将通过JS动态生成 -->
                    </div>
                    <div class="chart-container" id="matchChart"></div>
                </div>
            </div>
            
            <!-- 视频面试页面 -->
            <div class="content-area" id="candidateInterviewPage" style="display: none;">
                <div class="content-title">
                    <i class="fas fa-video"></i>
                    <span>视频面试</span>
                </div>
                
                <div class="calendar-container">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                        <h3>2023年11月</h3>
                        <div>
                            <button class="btn" id="prevMonth">
                                <i class="fas fa-chevron-left"></i>
                            </button>
                            <button class="btn" id="nextMonth">
                                <i class="fas fa-chevron-right"></i>
                            </button>
                        </div>
                    </div>
                    
                    <table class="calendar">
                        <thead>
                            <tr>
                                <th>日</th>
                                <th>一</th>
                                <th>二</th>
                                <th>三</th>
                                <th>四</th>
                                <th>五</th>
                                <th>六</th>
                            </tr>
                        </thead>
                        <tbody id="calendarBody">
                            <!-- 日历内容将通过JS动态生成 -->
                        </tbody>
                    </table>
                </div>
                
                <div style="margin-top: 30px;">
                    <h3 style="margin-bottom: 16px;">面试安排</h3>
                    <div class="card">
                        <div class="card-header">
                            <div class="card-avatar">X</div>
                            <div>
                                <div class="card-title">前端开发工程师面试</div>
                                <div class="card-subtitle">XX科技公司 · 2023-11-15 14:00</div>
                            </div>
                        </div>
                        <div class="card-tags">
                            <span class="card-tag">视频面试</span>
                            <span class="card-tag">技术面试</span>
                        </div>
                        <div class="card-footer">
                            <span>面试官: 李经理</span>
                            <button class="card-btn">进入面试</button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 面试记录页面 -->
            <div class="content-area" id="candidateRecordsPage" style="display: none;">
                <div class="content-title">
                    <i class="fas fa-history"></i>
                    <span>面试记录</span>
                </div>
                
                <div class="card-grid">
                    <div class="card">
                        <div class="card-header">
                            <div class="card-avatar">X</div>
                            <div>
                                <div class="card-title">前端开发工程师</div>
                                <div class="card-subtitle">XX科技公司 · 2023-10-20</div>
                            </div>
                        </div>
                        <div class="card-tags">
                            <span class="card-tag">技术面试</span>
                            <span class="card-tag">通过</span>
                        </div>
                        <div class="card-footer">
                            <span>面试官: 王总监</span>
                            <button class="card-btn">查看反馈</button>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">
                            <div class="card-avatar">Y</div>
                            <div>
                                <div class="card-title">高级前端开发</div>
                                <div class="card-subtitle">YY互联网公司 · 2023-09-15</div>
                            </div>
                        </div>
                        <div class="card-tags">
                            <span class="card-tag">技术面试</span>
                            <span class="card-tag">未通过</span>
                        </div>
                        <div class="card-footer">
                            <span>面试官: 张经理</span>
                            <button class="card-btn">查看反馈</button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 个人中心页面 -->
            <div class="content-area" id="candidateProfilePage" style="display: none;">
                <div class="content-title">
                    <i class="fas fa-user"></i>
                    <span>个人中心</span>
                </div>
                
                <div class="profile-container">
                    <div class="profile-sidebar">
                        <div class="profile-menu">
                            <div class="profile-menu-item active" data-section="basicInfo">基本信息</div>
                            <div class="profile-menu-item" data-section="education">教育背景</div>
                            <div class="profile-menu-item" data-section="experience">工作经历</div>
                            <div class="profile-menu-item" data-section="security">账户安全</div>
                        </div>
                    </div>
                    
                    <div class="profile-content">
                        <!-- 基本信息 -->
                        <div class="profile-section active" id="basicInfoSection">
                            <div class="profile-header">
                                <div class="profile-avatar">张</div>
                                <div class="profile-info">
                                    <h2>张伟</h2>
                                    <p>前端开发工程师 | 5年经验</p>
                                    <button class="btn" style="margin-top: 10px;">
                                        <i class="fas fa-camera"></i> 更换头像
                                    </button>
                                </div>
                            </div>
                            
                            <div class="profile-form">
                                <div class="form-group">
                                    <label for="profileName">姓名</label>
                                    <input type="text" id="profileName" class="form-control" value="张伟">
                                </div>
                                
                                <div class="form-row">
                                    <div class="form-col">
                                        <label for="profileGender">性别</label>
                                        <select id="profileGender" class="form-control">
                                            <option value="male" selected>男</option>
                                            <option value="female">女</option>
                                            <option value="other">其他</option>
                                        </select>
                                    </div>
                                    <div class="form-col">
                                        <label for="profileBirth">出生日期</label>
                                        <input type="date" id="profileBirth" class="form-control" value="1990-05-15">
                                    </div>
                                </div>
                                
                                <div class="form-group">
                                    <label for="profilePhone">联系电话</label>
                                    <input type="tel" id="profilePhone" class="form-control" value="13800138000">
                                </div>
                                
                                <div class="form-group">
                                    <label for="profileEmail">电子邮箱</label>
                                    <input type="email" id="profileEmail" class="form-control" value="zhangwei@example.com">
                                </div>
                                
                                <div class="form-group">
                                    <label for="profileLocation">居住地</label>
                                    <input type="text" id="profileLocation" class="form-control" value="北京市朝阳区">
                                </div>
                                
                                <div class="form-group">
                                    <label for="profileBio">个人简介</label>
                                    <textarea id="profileBio" class="form-control" rows="4">5年前端开发经验，精通Vue.js和React框架，有丰富的项目管理和团队协作经验。</textarea>
                                </div>
                                
                                <div class="form-actions">
                                    <button class="btn">取消</button>
                                    <button class="btn btn-primary">保存更改</button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 教育背景 -->
                        <div class="profile-section" id="educationSection">
                            <h2 style="margin-bottom: 20px;">教育背景</h2>
                            
                            <div class="form-section">
                                <div class="form-row">
                                    <div class="form-col">
                                        <label for="eduSchool">学校名称</label>
                                        <input type="text" id="eduSchool" class="form-control" value="北京大学">
                                    </div>
                                    <div class="form-col">
                                        <label for="eduDegree">学历</label>
                                        <select id="eduDegree" class="form-control">
                                            <option value="bachelor" selected>本科</option>
                                            <option value="master">硕士</option>
                                            <option value="phd">博士</option>
                                        </select>
                                    </div>
                                </div>
                                
                                <div class="form-row">
                                    <div class="form-col">
                                        <label for="eduMajor">专业</label>
                                        <input type="text" id="eduMajor" class="form-control" value="计算机科学与技术">
                                    </div>
                                    <div class="form-col">
                                        <label for="eduGraduation">毕业时间</label>
                                        <input type="date" id="eduGraduation" class="form-control" value="2012-06-30">
                                    </div>
                                </div>
                                
                                <div class="form-actions">
                                    <button class="btn">取消</button>
                                    <button class="btn btn-primary">保存更改</button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 工作经历 -->
                        <div class="profile-section" id="experienceSection">
                            <h2 style="margin-bottom: 20px;">工作经历</h2>
                            
                            <div class="form-section">
                                <div class="form-row">
                                    <div class="form-col">
                                        <label for="expCompany">公司名称</label>
                                        <input type="text" id="expCompany" class="form-control" value="AA科技有限公司">
                                    </div>
                                    <div class="form-col">
                                        <label for="expPosition">职位</label>
                                        <input type="text" id="expPosition" class="form-control" value="高级前端开发工程师">
                                    </div>
                                </div>
                                
                                <div class="form-row">
                                    <div class="form-col">
                                        <label for="expStart">开始时间</label>
                                        <input type="date" id="expStart" class="form-control" value="2018-03-01">
                                    </div>
                                    <div class="form-col">
                                        <label for="expEnd">结束时间</label>
                                        <input type="date" id="expEnd" class="form-control" value="2023-05-31">
                                    </div>
                                </div>
                                
                                <div class="form-group">
                                    <label for="expDescription">工作描述</label>
                                    <textarea id="expDescription" class="form-control" rows="4">负责公司核心产品的前端架构设计和开发，带领3人前端团队，使用Vue.js和React技术栈。</textarea>
                                </div>
                                
                                <button class="btn" style="margin-top: 10px;">
                                    <i class="fas fa-plus"></i> 添加工作经历
                                </button>
                                
                                <div class="form-actions">
                                    <button class="btn">取消</button>
                                    <button class="btn btn-primary">保存更改</button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 账户安全 -->
                        <div class="profile-section" id="securitySection">
                            <h2 style="margin-bottom: 20px;">账户安全</h2>
                            
                            <div class="form-section">
                                <div class="form-group">
                                    <label for="currentPassword">当前密码</label>
                                    <input type="password" id="currentPassword" class="form-control" placeholder="请输入当前密码">
                                </div>
                                
                                <div class="form-group">
                                    <label for="newPassword">新密码</label>
                                    <input type="password" id="newPassword" class="form-control" placeholder="请输入新密码">
                                </div>
                                
                                <div class="form-group">
                                    <label for="confirmPassword">确认新密码</label>
                                    <input type="password" id="confirmPassword" class="form-control" placeholder="请再次输入新密码">
                                </div>
                                
                                <div class="form-actions">
                                    <button class="btn">取消</button>
                                    <button class="btn btn-primary">更改密码</button>
                                </div>
                            </div>
                            
                            <div class="form-section" style="margin-top: 30px;">
                                <div class="form-section-title">
                                    <i class="fas fa-shield-alt"></i>
                                    <span>安全设置</span>
                                </div>
                                
                                <div class="settings-item">
                                    <div class="settings-item-info">
                                        <h3>双重验证</h3>
                                        <p>为您的账户增加额外的安全层</p>
                                    </div>
                                    <div class="settings-item-action">
                                        <label class="switch">
                                            <input type="checkbox">
                                            <span class="slider"></span>
                                        </label>
                                    </div>
                                </div>
                                
                                <div class="settings-item">
                                    <div class="settings-item-info">
                                        <h3>登录提醒</h3>
                                        <p>当账户在新设备登录时发送通知</p>
                                    </div>
                                    <div class="settings-item-action">
                                        <label class="switch">
                                            <input type="checkbox" checked>
                                            <span class="slider"></span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 系统设置页面 -->
            <div class="content-area" id="candidateSettingsPage" style="display: none;">
                <div class="content-title">
                    <i class="fas fa-cog"></i>
                    <span>系统设置</span>
                </div>
                
                <div class="settings-container">
                    <div class="settings-sidebar">
                        <div class="settings-menu">
                            <div class="settings-menu-item active" data-section="notificationSettings">通知设置</div>
                            <div class="settings-menu-item" data-section="privacySettings">隐私设置</div>
                            <div class="settings-menu-item" data-section="appearanceSettings">外观设置</div>
                        </div>
                    </div>
                    
                    <div class="settings-content">
                        <!-- 通知设置 -->
                        <div class="settings-section active" id="notificationSettings">
                            <h2 style="margin-bottom: 20px;">通知设置</h2>
                            
                            <div class="settings-item">
                                <div class="settings-item-info">
                                    <h3>职位推荐</h3>
                                    <p>接收系统推荐的匹配职位通知</p>
                                </div>
                                <div class="settings-item-action">
                                    <label class="switch">
                                        <input type="checkbox" checked>
                                        <span class="slider"></span>
                                    </label>
                                </div>
                            </div>
                            
                            <div class="settings-item">
                                <div class="settings-item-info">
                                    <h3>面试邀请</h3>
                                    <p>接收企业发送的面试邀请通知</p>
                                </div>
                                <div class="settings-item-action">
                                    <label class="switch">
                                        <input type="checkbox" checked>
                                        <span class="slider"></span>
                                    </label>
                                </div>
                            </div>
                            
                            <div class="settings-item">
                                <div class="settings-item-info">
                                    <h3>系统消息</h3>
                                    <p>接收系统更新和维护通知</p>
                                </div>
                                <div class="settings-item-action">
                                    <label class="switch">
                                        <input type="checkbox" checked>
                                        <span class="slider"></span>
                                    </label>
                                </div>
                            </div>
                            
                            <div class="settings-item">
                                <div class="settings-item-info">
                                    <h3>营销信息</h3>
                                    <p>接收合作伙伴的优惠和活动信息</p>
                                </div>
                                <div class="settings-item-action">
                                    <label class="switch">
                                        <input type="checkbox">
                                        <span class="slider"></span>
                                    </label>
                                </div>
                            </div>
                            
                            <div class="form-group" style="margin-top: 30px;">
                                <label for="notificationEmail">通知邮箱</label>
                                <input type="email" id="notificationEmail" class="form-control" value="zhangwei@example.com">
                            </div>
                            
                            <div class="form-actions">
                                <button class="btn">取消</button>
                                <button class="btn btn-primary">保存设置</button>
                            </div>
                        </div>
                        
                        <!-- 隐私设置 -->
                        <div class="settings-section" id="privacySettings">
                            <h2 style="margin-bottom: 20px;">隐私设置</h2>
                            
                            <div class="settings-item">
                                <div class="settings-item-info">
                                    <h3>公开简历</h3>
                                    <p>允许企业搜索和查看您的简历</p>
                                </div>
                                <div class="settings-item-action">
                                    <label class="switch">
                                        <input type="checkbox" checked>
                                        <span class="slider"></span>
                                    </label>
                                </div>
                            </div>
                            
                            <div class="settings-item">
                                <div class="settings-item-info">
                                    <h3>联系方式可见</h3>
                                    <p>允许企业查看您的联系方式</p>
                                </div>
                                <div class="settings-item-action">
                                    <label class="switch">
                                        <input type="checkbox">
                                        <span class="slider"></span>
                                    </label>
                                </div>
                            </div>
                            
                            <div class="settings-item">
                                <div class="settings-item-info">
                                    <h3>个性化推荐</h3>
                                    <p>根据您的浏览记录推荐职位</p>
                                </div>
                                <div class="settings-item-action">
                                    <label class="switch">
                                        <input type="checkbox" checked>
                                        <span class="slider"></span>
                                    </label>
                                </div>
                            </div>
                            
                            <div class="form-group" style="margin-top: 30px;">
                                <label for="privacyLevel">隐私级别</label>
                                <select id="privacyLevel" class="form-control">
                                    <option value="high">高 - 仅对申请的企业可见</option>
                                    <option value="medium" selected>中 - 对所有认证企业可见</option>
                                    <option value="low">低 - 对所有用户可见</option>
                                </select>
                            </div>
                            
                            <div class="form-actions">
                                <button class="btn">取消</button>
                                <button class="btn btn-primary">保存设置</button>
                            </div>
                        </div>
                        
                        <!-- 外观设置 -->
                        <div class="settings-section" id="appearanceSettings">
                            <h2 style="margin-bottom: 20px;">外观设置</h2>
                            
                            <div class="form-group">
                                <label for="themeSelect">主题颜色</label>
                                <select id="themeSelect" class="form-control">
                                    <option value="light" selected>浅色主题</option>
                                    <option value="dark">深色主题</option>
                                    <option value="system">跟随系统</option>
                                </select>
                            </div>
                            
                            <div class="form-group">
                                <label for="fontSize">字体大小</label>
                                <select id="fontSize" class="form-control">
                                    <option value="small">小</option>
                                    <option value="medium" selected>中</option>
                                    <option value="large">大</option>
                                </select>
                            </div>
                            
                            <div class="settings-item">
                                <div class="settings-item-info">
                                    <h3>动画效果</h3>
                                    <p>启用界面过渡动画</p>
                                </div>
                                <div class="settings-item-action">
                                    <label class="switch">
                                        <input type="checkbox" checked>
                                        <span class="slider"></span>
                                    </label>
                                </div>
                            </div>
                            
                            <div class="form-actions">
                                <button class="btn">取消</button>
                                <button class="btn btn-primary">保存设置</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 主界面 - 招聘者 -->
    <div class="container" id="recruiterContainer">
        <!-- 左侧导航 -->
        <div class="sidebar">
            <div class="logo">
                <i class="fas fa-building"></i>
                <span>招聘者中心</span>
            </div>
            <div class="nav-menu">
                <div class="nav-item active" id="navRecruiterCandidates">
                    <i class="fas fa-users"></i>
                    <span>候选人</span>
                </div>
                <div class="nav-item" id="navRecruiterJobs">
                    <i class="fas fa-briefcase"></i>
                    <span>职位管理</span>
                </div>
                <div class="nav-item" id="navRecruiterResume">
                    <i class="fas fa-file-alt"></i>
                    <span>简历分析</span>
                </div>
                <div class="nav-item" id="navRecruiterInterview">
                    <i class="fas fa-video"></i>
                    <span>视频面试</span>
                </div>
                <div class="nav-item" id="navRecruiterRecords">
                    <i class="fas fa-history"></i>
                    <span>面试记录</span>
                </div>
                <div class="nav-item" id="navRecruiterAnalysis">
                    <i class="fas fa-chart-bar"></i>
                    <span>数据分析</span>
                </div>
                <div class="nav-item" id="navRecruiterProfile">
                    <i class="fas fa-user"></i>
                    <span>个人中心</span>
                </div>
                <div class="nav-item" id="navRecruiterSettings">
                    <i class="fas fa-cog"></i>
                    <span>系统设置</span>
                </div>
            </div>
        </div>
        
        <!-- 主内容区 -->
        <div class="main-content">
            <!-- 顶部信息栏 -->
            <div class="header">
                <div class="search-bar">
                    <input type="text" class="search-input" placeholder="搜索候选人姓名、技能..." id="recruiterSearchInput">
                    <button class="search-btn" id="recruiterSearchBtn">
                        <i class="fas fa-search"></i>
                    </button>
                    <span class="search-advanced" id="recruiterAdvancedSearch">高级筛选</span>
                </div>
                <div class="search-filters" id="recruiterSearchFilters">
                    <div class="filter-row">
                        <div class="filter-group">
                            <label for="candidateLocationFilter">期望地点</label>
                            <select id="candidateLocationFilter" class="filter-select">
                                <option value="">全部</option>
                                <option value="beijing">北京</option>
                                <option value="shanghai">上海</option>
                                <option value="guangzhou">广州</option>
                                <option value="shenzhen">深圳</option>
                                <option value="remote">远程</option>
                            </select>
                        </div>
                        <div class="filter-group">
                            <label for="candidateExperienceFilter">工作经验</label>
                            <select id="candidateExperienceFilter" class="filter-select">
                                <option value="">全部</option>
                                <option value="1">1年以下</option>
                                <option value="1-3">1-3年</option>
                                <option value="3-5">3-5年</option>
                                <option value="5+">5年以上</option>
                            </select>
                        </div>
                    </div>
                    <div class="filter-row">
                        <div class="filter-group">
                            <label for="candidateEducationFilter">学历要求</label>
                            <select id="candidateEducationFilter" class="filter-select">
                                <option value="">全部</option>
                                <option value="college">大专</option>
                                <option value="bachelor">本科</option>
                                <option value="master">硕士</option>
                                <option value="phd">博士</option>
                            </select>
                        </div>
                        <div class="filter-group">
                            <label for="candidateSalaryFilter">期望薪资</label>
                            <select id="candidateSalaryFilter" class="filter-select">
                                <option value="">全部</option>
                                <option value="10k">10k以下</option>
                                <option value="10-20k">10-20k</option>
                                <option value="20-30k">20-30k</option>
                                <option value="30k+">30k以上</option>
                            </select>
                        </div>
                    </div>
                    <div class="filter-actions">
                        <button class="btn" id="resetRecruiterFilters">重置</button>
                        <button class="btn btn-primary" id="applyRecruiterFilters">应用筛选</button>
                    </div>
                </div>
                <div class="user-info">
                    <div class="user-dropdown">
                        <div class="avatar" id="recruiterAvatar">李</div>
                        <div class="dropdown-menu" id="recruiterDropdown">
                            <div class="dropdown-item" id="dropdownRecruiterProfile">
                                <i class="fas fa-user"></i> 个人中心
                            </div>
                            <div class="dropdown-item" id="dropdownRecruiterSettings">
                                <i class="fas fa-cog"></i> 系统设置
                            </div>
                            <div class="dropdown-divider"></div>
                            <div class="dropdown-item" id="dropdownRecruiterLogout">
                                <i class="fas fa-sign-out-alt"></i> 退出登录
                            </div>
                        </div>
                    </div>
                    <div>
                        <div style="font-weight: 500;">李明</div>
                        <div style="font-size: 12px; color: #64748b;">XX公司招聘经理</div>
                    </div>
                </div>
            </div>
            
            <!-- 候选人页面 -->
            <div class="content-area" id="recruiterCandidatesPage">
                <div class="content-title">
                    <i class="fas fa-users"></i>
                    <span>候选人列表</span>
                </div>
                
                <!-- 搜索历史 -->
                <div class="search-history">
                    <div class="history-title">搜索历史</div>
                    <div class="history-tags" id="recruiterSearchHistoryTags">
                        <span class="history-tag">前端开发</span>
                        <span class="history-tag">3-5年经验</span>
                        <span class="history-tag">本科</span>
                        <span class="history-tag">北京</span>
                    </div>
                </div>
                
                <div class="card-grid" id="candidateGrid">
                    <!-- 候选人卡片将通过JS动态生成 -->
                </div>
            </div>
            
            <!-- 职位管理页面 -->
            <div class="content-area" id="recruiterJobsPage" style="display: none;">
                <div class="content-title">
                    <i class="fas fa-briefcase"></i>
                    <span>职位管理</span>
                </div>
                <div style="text-align: right; margin-bottom: 20px;">
                    <button class="btn btn-primary" id="addJobBtn">
                        <i class="fas fa-plus"></i> 发布新职位
                    </button>
                </div>
                <div class="card-grid" id="jobManageGrid">
                    <!-- 职位管理卡片将通过JS动态生成 -->
                </div>
            </div>
            
            <!-- 简历分析页面 -->
            <div class="content-area" id="recruiterResumePage" style="display: none;">
                <div class="content-title">
                    <i class="fas fa-file-alt"></i>
                    <span>简历分析</span>
                </div>
                
                <div style="display: flex; gap: 20px;">
                    <div style="flex: 1;">
                        <div class="card">
                            <div class="card-header">
                                <div class="card-avatar">张</div>
                                <div>
                                    <div class="card-title">张伟</div>
                                    <div class="card-subtitle">前端开发工程师 · 5年经验</div>
                                </div>
                            </div>
                            <div class="card-tags">
                                <span class="card-tag">JavaScript</span>
                                <span class="card-tag">Vue.js</span>
                                <span class="card-tag">React</span>
                                <span class="card-tag">+5</span>
                            </div>
                            <div class="card-footer">
                                <span class="card-match">匹配度: 88%</span>
                                <button class="card-btn">邀请面试</button>
                            </div>
                        </div>
                        
                        <div class="form-section" style="margin-top: 20px;">
                            <div class="form-section-title">
                                <i class="fas fa-star"></i>
                                <span>AI分析评价</span>
                            </div>
                            <div style="padding: 12px; background: #f8fafc; border-radius: 8px;">
                                <p>候选人技术栈与职位要求高度匹配，尤其在Vue.js和React方面有丰富经验。具备5年开发经验，主导过多个大型项目，团队协作能力强。教育背景优秀，毕业于北京大学计算机专业。建议重点关注。</p>
                            </div>
                        </div>
                    </div>
                    
                    <div style="flex: 2;">
                        <div class="form-section">
                            <div class="form-section-title">
                                <i class="fas fa-user"></i>
                                <span>基本信息</span>
                            </div>
                            <div style="display: flex; gap: 20px; margin-bottom: 16px;">
                                <div>
                                    <div style="font-size: 14px; color: #64748b;">姓名</div>
                                    <div style="font-weight: 500;">张伟</div>
                                </div>
                                <div>
                                    <div style="font-size: 14px; color: #64748b;">性别</div>
                                    <div style="font-weight: 500;">男</div>
                                </div>
                                <div>
                                    <div style="font-size: 14px; color: #64748b;">年龄</div>
                                    <div style="font-weight: 500;">33</div>
                                </div>
                                <div>
                                    <div style="font-size: 14px; color: #64748b;">电话</div>
                                    <div style="font-weight: 500;">138****8000</div>
                                </div>
                                <div>
                                    <div style="font-size: 14px; color: #64748b;">邮箱</div>
                                    <div style="font-weight: 500;">zhangwei@example.com</div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-section">
                            <div class="form-section-title">
                                <i class="fas fa-graduation-cap"></i>
                                <span>教育背景</span>
                            </div>
                            <div style="margin-bottom: 16px;">
                                <div style="font-weight: 500; margin-bottom: 4px;">北京大学</div>
                                <div style="color: #64748b; margin-bottom: 4px;">计算机科学与技术 · 本科 · 2008-2012</div>
                            </div>
                        </div>
                        
                        <div class="form-section">
                            <div class="form-section-title">
                                <i class="fas fa-briefcase"></i>
                                <span>工作经历</span>
                            </div>
                            <div style="margin-bottom: 16px;">
                                <div style="font-weight: 500; margin-bottom: 4px;">AA科技有限公司 · 高级前端开发工程师</div>
                                <div style="color: #64748b; margin-bottom: 4px;">2018-2023 · 5年</div>
                                <div style="margin-top: 8px;">
                                    <p>负责公司核心产品的前端架构设计和开发，带领3人前端团队，使用Vue.js和React技术栈。主导了公司官网重构项目，性能提升40%。</p>
                                </div>
                            </div>
                            
                            <div style="margin-bottom: 16px;">
                                <div style="font-weight: 500; margin-bottom: 4px;">BB互联网公司 · 前端开发工程师</div>
                                <div style="color: #64748b; margin-bottom: 4px;">2014-2018 · 4年</div>
                                <div style="margin-top: 8px;">
                                    <p>参与公司多个项目的前端开发工作，主要负责移动端H5页面开发，积累了丰富的移动端适配经验。</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-section">
                            <div class="form-section-title">
                                <i class="fas fa-project-diagram"></i>
                                <span>项目经验</span>
                            </div>
                            <div style="margin-bottom: 16px;">
                                <div style="font-weight: 500; margin-bottom: 4px;">XX电商平台重构</div>
                                <div style="color: #64748b; margin-bottom: 4px;">2021-2022 · 项目负责人</div>
                                <div style="margin-top: 8px;">
                                    <p>主导公司电商平台前端重构，采用Vue3 + TypeScript技术栈，实现组件化开发，页面加载速度提升35%。</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-section">
                            <div class="form-section-title">
                                <i class="fas fa-star"></i>
                                <span>技能专长</span>
                            </div>
                            <div class="card-tags" style="margin-top: 12px;">
                                <span class="card-tag">JavaScript</span>
                                <span class="card-tag">HTML5</span>
                                <span class="card-tag">CSS3</span>
                                <span class="card-tag">Vue.js</span>
                                <span class="card-tag">React</span>
                                <span class="card-tag">Node.js</span>
                                <span class="card-tag">Webpack</span>
                                <span class="card-tag">Git</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 视频面试页面 -->
            <div class="content-area" id="recruiterInterviewPage" style="display: none;">
                <div class="content-title">
                    <i class="fas fa-video"></i>
                    <span>视频面试</span>
                </div>
                
                <div style="display: flex; gap: 20px;">
                    <div style="flex: 1;">
                        <div class="card">
                            <div class="card-header">
                                <div class="card-avatar">张</div>
                                <div>
                                    <div class="card-title">张伟</div>
                                    <div class="card-subtitle">前端开发工程师 · 5年经验</div>
                                </div>
                            </div>
                            <div class="card-tags">
                                <span class="card-tag">JavaScript</span>
                                <span class="card-tag">Vue.js</span>
                                <span class="card-tag">React</span>
                            </div>
                            <div class="card-footer">
                                <span>匹配度: 88%</span>
                                <button class="card-btn">查看简历</button>
                            </div>
                        </div>
                        
                        <div style="margin-top: 20px;">
                            <h3 style="margin-bottom: 16px;">面试信息</h3>
                            <div class="form-group">
                                <label for="interviewDate">面试日期</label>
                                <input type="date" id="interviewDate" class="form-control" value="2023-11-15">
                            </div>
                            <div class="form-group">
                                <label for="interviewTime">面试时间</label>
                                <input type="time" id="interviewTime" class="form-control" value="14:00">
                            </div>
                            <div class="form-group">
                                <label for="interviewDuration">持续时间</label>
                                <select id="interviewDuration" class="form-control">
                                    <option value="30">30分钟</option>
                                    <option value="60" selected>60分钟</option>
                                    <option value="90">90分钟</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="interviewType">面试类型</label>
                                <select id="interviewType" class="form-control">
                                    <option value="technical" selected>技术面试</option>
                                    <option value="hr">HR面试</option>
                                    <option value="manager">经理面试</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="interviewer">面试官</label>
                                <input type="text" id="interviewer" class="form-control" value="李明">
                            </div>
                        </div>
                    </div>
                    
                    <div style="flex: 2;">
                        <div style="background: #f8fafc; border-radius: 8px; padding: 20px; height: 100%;">
                            <div style="text-align: center; margin-bottom: 20px;">
                                <h3>视频面试预览</h3>
                                <p style="color: #64748b;">面试开始后将显示视频画面</p>
                            </div>
                            
                            <div style="background: #e2e8f0; height: 300px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px;">
                                <i class="fas fa-video" style="font-size: 60px; color: #94a3b8;"></i>
                            </div>
                            
                            <div style="display: flex; justify-content: center; gap: 20px;">
                                <button class="btn btn-primary" id="startInterviewBtn">
                                    <i class="fas fa-video"></i> 开始面试
                                </button>
                                <button class="btn">
                                    <i class="fas fa-comment"></i> 发送消息
                                </button>
                                <button class="btn btn-danger">
                                    <i class="fas fa-phone-slash"></i> 结束面试
                                </button>
                            </div>
                            
                            <div style="margin-top: 30px;">
                                <h3 style="margin-bottom: 16px;">面试评价</h3>
                                <div class="form-group">
                                    <label for="interviewScore">综合评分</label>
                                    <select id="interviewScore" class="form-control">
                                        <option value="">请选择评分</option>
                                        <option value="5">5分 - 非常优秀</option>
                                        <option value="4">4分 - 良好</option>
                                        <option value="3">3分 - 一般</option>
                                        <option value="2">2分 - 较差</option>
                                        <option value="1">1分 - 不符合</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="interviewNotes">面试记录</label>
                                    <textarea id="interviewNotes" class="form-control" rows="5" placeholder="记录面试过程中的关键点和评价"></textarea>
                                </div>
                                <div class="form-actions">
                                    <button class="btn">取消</button>
                                    <button class="btn btn-primary">保存评价</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 面试记录页面 -->
            <div class="content-area" id="recruiterRecordsPage" style="display: none;">
                <div class="content-title">
                    <i class="fas fa-history"></i>
                    <span>面试记录</span>
                </div>
                
                <div style="display: flex; gap: 20px; margin-bottom: 20px;">
                    <div style="flex: 1;">
                        <div class="form-group">
                            <label for="recordCandidate">候选人</label>
                            <select id="recordCandidate" class="form-control">
                                <option value="">全部候选人</option>
                                <option value="1">张伟</option>
                                <option value="2">李娜</option>
                                <option value="3">王强</option>
                            </select>
                        </div>
                    </div>
                    <div style="flex: 1;">
                        <div class="form-group">
                            <label for="recordJob">职位</label>
                            <select id="recordJob" class="form-control">
                                <option value="">全部职位</option>
                                <option value="1">前端开发工程师</option>
                                <option value="2">UI设计师</option>
                                <option value="3">产品经理</option>
                            </select>
                        </div>
                    </div>
                    <div style="flex: 1;">
                        <div class="form-group">
                            <label for="recordStatus">状态</label>
                            <select id="recordStatus" class="form-control">
                                <option value="">全部状态</option>
                                <option value="passed">通过</option>
                                <option value="failed">未通过</option>
                                <option value="pending">待定</option>
                            </select>
                        </div>
                    </div>
                    <div style="flex: 1; display: flex; align-items: flex-end;">
                        <button class="btn btn-primary" style="width: 100%;">
                            <i class="fas fa-filter"></i> 筛选
                        </button>
                    </div>
                </div>
                
                <div class="card-grid">
                    <div class="card">
                        <div class="card-header">
                            <div class="card-avatar">张</div>
                            <div>
                                <div class="card-title">张伟</div>
                                <div class="card-subtitle">前端开发工程师 · 技术面试</div>
                            </div>
                        </div>
                        <div class="card-tags">
                            <span class="card-tag">2023-10-20</span>
                            <span class="card-tag">通过</span>
                        </div>
                        <div class="card-footer">
                            <span>评分: 4.5/5</span>
                            <button class="card-btn">查看详情</button>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">
                            <div class="card-avatar">李</div>
                            <div>
                                <div class="card-title">李娜</div>
                                <div class="card-subtitle">UI设计师 · 技术面试</div>
                            </div>
                        </div>
                        <div class="card-tags">
                            <span class="card-tag">2023-10-18</span>
                            <span class="card-tag">待定</span>
                        </div>
                        <div class="card-footer">
                            <span>评分: 3.8/5</span>
                            <button class="card-btn">查看详情</button>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">
                            <div class="card-avatar">王</div>
                            <div>
                                <div class="card-title">王强</div>
                                <div class="card-subtitle">前端开发工程师 · 技术面试</div>
                            </div>
                        </div>
                        <div class="card-tags">
                            <span class="card-tag">2023-10-15</span>
                            <span class="card-tag">未通过</span>
                        </div>
                        <div class="card-footer">
                            <span>评分: 2.5/5</span>
                            <button class="card-btn">查看详情</button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 数据分析页面 -->
            <div class="content-area" id="recruiterAnalysisPage" style="display: none;">
                <div class="content-title">
                    <i class="fas fa-chart-bar"></i>
                    <span>数据分析</span>
                </div>
                
                <div style="display: flex; gap: 20px; margin-bottom: 20px;">
                    <div style="flex: 1; background: #f8fafc; border-radius: 8px; padding: 16px;">
                        <div style="font-size: 14px; color: #64748b; margin-bottom: 8px;">候选人总数</div>
                        <div style="font-size: 24px; font-weight: 600;">128</div>
                        <div style="font-size: 14px; color: #10b981; margin-top: 4px;">
                            <i class="fas fa-arrow-up"></i> 12% 月增长
                        </div>
                    </div>
                    
                    <div style="flex: 1; background: #f8fafc; border-radius: 8px; padding: 16px;">
                        <div style="font-size: 14px; color: #64748b; margin-bottom: 8px;">面试通过率</div>
                        <div style="font-size: 24px; font-weight: 600;">38%</div>
                        <div style="font-size: 14px; color: #10b981; margin-top: 4px;">
                            <i class="fas fa-arrow-up"></i> 5% 月增长
                        </div>
                    </div>
                    
                    <div style="flex: 1; background: #f8fafc; border-radius: 8px; padding: 16px;">
                        <div style="font-size: 14px; color: #64748b; margin-bottom: 8px;">平均招聘周期</div>
                        <div style="font-size: 24px; font-weight: 600;">23天</div>
                        <div style="font-size: 14px; color: #ef4444; margin-top: 4px;">
                            <i class="fas fa-arrow-down"></i> 2天 月减少
                        </div>
                    </div>
                    
                    <div style="flex: 1; background: #f8fafc; border-radius: 8px; padding: 16px;">
                        <div style="font-size: 14px; color: #64748b; margin-bottom: 8px;">职位空缺</div>
                        <div style="font-size: 24px; font-weight: 600;">15</div>
                        <div style="font-size: 14px; color: #ef4444; margin-top: 4px;">
                            <i class="fas fa-arrow-up"></i> 3个 月增长
                        </div>
                    </div>
                </div>
                
                <div style="display: flex; gap: 20px; margin-bottom: 20px;">
                    <div style="flex: 1; background: white; border-radius: 8px; padding: 16px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);">
                        <div style="font-weight: 500; margin-bottom: 16px;">候选人来源</div>
                        <div class="chart-container" id="candidateSourceChart"></div>
                    </div>
                    
                    <div style="flex: 1; background: white; border-radius: 8px; padding: 16px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);">
                        <div style="font-weight: 500; margin-bottom: 16px;">职位申请趋势</div>
                        <div class="chart-container" id="applicationTrendChart"></div>
                    </div>
                </div>
                
                <div style="background: white; border-radius: 8px; padding: 16px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);">
                    <div style="font-weight: 500; margin-bottom: 16px;">技能分布</div>
                    <div class="chart-container" id="skillDistributionChart"></div>
                </div>
            </div>
            
            <!-- 个人中心页面 -->
            <div class="content-area" id="recruiterProfilePage" style="display: none;">
                <div class="content-title">
                    <i class="fas fa-user"></i>
                    <span>个人中心</span>
                </div>
                
                <div class="profile-container">
                    <div class="profile-sidebar">
                        <div class="profile-menu">
                            <div class="profile-menu-item active" data-section="recruiterBasicInfo">基本信息</div>
                            <div class="profile-menu-item" data-section="recruiterCompany">公司信息</div>
                            <div class="profile-menu-item" data-section="recruiterSecurity">账户安全</div>
                        </div>
                    </div>
                    
                    <div class="profile-content">
                        <!-- 基本信息 -->
                        <div class="profile-section active" id="recruiterBasicInfoSection">
                            <div class="profile-header">
                                <div class="profile-avatar">李</div>
                                <div class="profile-info">
                                    <h2>李明</h2>
                                    <p>招聘经理 | XX科技公司</p>
                                    <button class="btn" style="margin-top: 10px;">
                                        <i class="fas fa-camera"></i> 更换头像
                                    </button>
                                </div>
                            </div>
                            
                            <div class="profile-form">
                                <div class="form-group">
                                    <label for="recruiterName">姓名</label>
                                    <input type="text" id="recruiterName" class="form-control" value="李明">
                                </div>
                                
                                <div class="form-row">
                                    <div class="form-col">
                                        <label for="recruiterGender">性别</label>
                                        <select id="recruiterGender" class="form-control">
                                            <option value="male" selected>男</option>
                                            <option value="female">女</option>
                                            <option value="other">其他</option>
                                        </select>
                                    </div>
                                    <div class="form-col">
                                        <label for="recruiterBirth">出生日期</label>
                                        <input type="date" id="recruiterBirth" class="form-control" value="1985-08-20">
                                    </div>
                                </div>
                                
                                <div class="form-group">
                                    <label for="recruiterPhone">联系电话</label>
                                    <input type="tel" id="recruiterPhone" class="form-control" value="13900139000">
                                </div>
                                
                                <div class="form-group">
                                    <label for="recruiterEmail">电子邮箱</label>
                                    <input type="email" id="recruiterEmail" class="form-control" value="liming@xxtech.com">
                                </div>
                                
                                <div class="form-actions">
                                    <button class="btn">取消</button>
                                    <button class="btn btn-primary">保存更改</button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 公司信息 -->
                        <div class="profile-section" id="recruiterCompanySection">
                            <h2 style="margin-bottom: 20px;">公司信息</h2>
                            
                            <div class="form-section">
                                <div class="form-group">
                                    <label for="companyName">公司名称</label>
                                    <input type="text" id="companyName" class="form-control" value="XX科技有限公司">
                                </div>
                                
                                <div class="form-group">
                                    <label for="companyIndustry">所属行业</label>
                                    <select id="companyIndustry" class="form-control">
                                        <option value="internet" selected>互联网</option>
                                        <option value="finance">金融</option>
                                        <option value="education">教育</option>
                                        <option value="manufacturing">制造业</option>
                                    </select>
                                </div>
                                
                                <div class="form-group">
                                    <label for="companySize">公司规模</label>
                                    <select id="companySize" class="form-control">
                                        <option value="1-50">1-50人</option>
                                        <option value="50-200">50-200人</option>
                                        <option value="200-500" selected>200-500人</option>
                                        <option value="500+">500人以上</option>
                                    </select>
                                </div>
                                
                                <div class="form-group">
                                    <label for="companyLocation">公司地址</label>
                                    <input type="text" id="companyLocation" class="form-control" value="北京市海淀区中关村软件园">
                                </div>
                                
                                <div class="form-group">
                                    <label for="companyWebsite">公司官网</label>
                                    <input type="url" id="companyWebsite" class="form-control" value="https://www.xxtech.com">
                                </div>
                                
                                <div class="form-group">
                                    <label for="companyDescription">公司简介</label>
                                    <textarea id="companyDescription" class="form-control" rows="4">XX科技有限公司成立于2010年，是一家专注于企业级软件开发的互联网公司，拥有多项自主知识产权和专利技术。</textarea>
                                </div>
                                
                                <div class="form-actions">
                                    <button class="btn">取消</button>
                                    <button class="btn btn-primary">保存更改</button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 账户安全 -->
                        <div class="profile-section" id="recruiterSecuritySection">
                            <h2 style="margin-bottom: 20px;">账户安全</h2>
                            
                            <div class="form-section">
                                <div class="form-group">
                                    <label for="recruiterCurrentPassword">当前密码</label>
                                    <input type="password" id="recruiterCurrentPassword" class="form-control" placeholder="请输入当前密码">
                                </div>
                                
                                <div class="form-group">
                                    <label for="recruiterNewPassword">新密码</label>
                                    <input type="password" id="recruiterNewPassword" class="form-control" placeholder="请输入新密码">
                                </div>
                                
                                <div class="form-group">
                                    <label for="recruiterConfirmPassword">确认新密码</label>
                                    <input type="password" id="recruiterConfirmPassword" class="form-control" placeholder="请再次输入新密码">
                                </div>
                                
                                <div class="form-actions">
                                    <button class="btn">取消</button>
                                    <button class="btn btn-primary">更改密码</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 系统设置页面 -->
            <div class="content-area" id="recruiterSettingsPage" style="display: none;">
                <div class="content-title">
                    <i class="fas fa-cog"></i>
                    <span>系统设置</span>
                </div>
                
                <div class="settings-container">
                    <div class="settings-sidebar">
                        <div class="settings-menu">
                            <div class="settings-menu-item active" data-section="recruiterNotificationSettings">通知设置</div>
                            <div class="settings-menu-item" data-section="recruiterPrivacySettings">隐私设置</div>
                            <div class="settings-menu-item" data-section="recruiterAppearanceSettings">外观设置</div>
                        </div>
                    </div>
                    
                    <div class="settings-content">
                        <!-- 通知设置 -->
                        <div class="settings-section active" id="recruiterNotificationSettings">
                            <h2 style="margin-bottom: 20px;">通知设置</h2>
                            
                            <div class="settings-item">
                                <div class="settings-item-info">
                                    <h3>新候选人</h3>
                                    <p>当有新的候选人申请职位时通知</p>
                                </div>
                                <div class="settings-item-action">
                                    <label class="switch">
                                        <input type="checkbox" checked>
                                        <span class="slider"></span>
                                    </label>
                                </div>
                            </div>
                            
                            <div class="settings-item">
                                <div class="settings-item-info">
                                    <h3>面试提醒</h3>
                                    <p>在面试开始前提醒</p>
                                </div>
                                <div class="settings-item-action">
                                    <label class="switch">
                                        <input type="checkbox" checked>
                                        <span class="slider"></span>
                                    </label>
                                </div>
                            </div>
                            
                            <div class="settings-item">
                                <div class="settings-item-info">
                                    <h3>系统消息</h3>
                                    <p>接收系统更新和维护通知</p>
                                </div>
                                <div class="settings-item-action">
                                    <label class="switch">
                                        <input type="checkbox" checked>
                                        <span class="slider"></span>
                                    </label>
                                </div>
                            </div>
                            
                            <div class="form-group" style="margin-top: 30px;">
                                <label for="recruiterNotificationEmail">通知邮箱</label>
                                <input type="email" id="recruiterNotificationEmail" class="form-control" value="liming@xxtech.com">
                            </div>
                            
                            <div class="form-actions">
                                <button class="btn">取消</button>
                                <button class="btn btn-primary">保存设置</button>
                            </div>
                        </div>
                        
                        <!-- 隐私设置 -->
                        <div class="settings-section" id="recruiterPrivacySettings">
                            <h2 style="margin-bottom: 20px;">隐私设置</h2>
                            
                            <div class="settings-item">
                                <div class="settings-item-info">
                                    <h3>公开联系方式</h3>
                                    <p>允许候选人查看您的联系方式</p>
                                </div>
                                <div class="settings-item-action">
                                    <label class="switch">
                                        <input type="checkbox">
                                        <span class="slider"></span>
                                    </label>
                                </div>
                            </div>
                            
                            <div class="settings-item">
                                <div class="settings-item-info">
                                    <h3>数据分析共享</h3>
                                    <p>允许系统使用您的招聘数据进行分析</p>
                                </div>
                                <div class="settings-item-action">
                                    <label class="switch">
                                        <input type="checkbox" checked>
                                        <span class="slider"></span>
                                    </label>
                                </div>
                            </div>
                            
                            <div class="form-group" style="margin-top: 30px;">
                                <label for="recruiterPrivacyLevel">隐私级别</label>
                                <select id="recruiterPrivacyLevel" class="form-control">
                                    <option value="high">高 - 仅对候选人可见</option>
                                    <option value="medium" selected>中 - 对所有认证用户可见</option>
                                    <option value="low">低 - 公开可见</option>
                                </select>
                            </div>
                            
                            <div class="form-actions">
                                <button class="btn">取消</button>
                                <button class="btn btn-primary">保存设置</button>
                            </div>
                        </div>
                        
                        <!-- 外观设置 -->
                        <div class="settings-section" id="recruiterAppearanceSettings">
                            <h2 style="margin-bottom: 20px;">外观设置</h2>
                            
                            <div class="form-group">
                                <label for="recruiterThemeSelect">主题颜色</label>
                                <select id="recruiterThemeSelect" class="form-control">
                                    <option value="light" selected>浅色主题</option>
                                    <option value="dark">深色主题</option>
                                    <option value="system">跟随系统</option>
                                </select>
                            </div>
                            
                            <div class="form-group">
                                <label for="recruiterFontSize">字体大小</label>
                                <select id="recruiterFontSize" class="form-control">
                                    <option value="small">小</option>
                                    <option value="medium" selected>中</option>
                                    <option value="large">大</option>
                                </select>
                            </div>
                            
                            <div class="settings-item">
                                <div class="settings-item-info">
                                    <h3>动画效果</h3>
                                    <p>启用界面过渡动画</p>
                                </div>
                                <div class="settings-item-action">
                                    <label class="switch">
                                        <input type="checkbox" checked>
                                        <span class="slider"></span>
                                    </label>
                                </div>
                            </div>
                            
                            <div class="form-actions">
                                <button class="btn">取消</button>
                                <button class="btn btn-primary">保存设置</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 发布职位模态框 -->
    <div class="modal-overlay" id="jobModal">
        <div class="modal-content">
            <div class="modal-title">
                <i class="fas fa-briefcase"></i>
                <span>发布新职位</span>
            </div>
            
            <div class="form-group">
                <label for="jobTitle">职位名称</label>
                <input type="text" id="jobTitle" class="form-control" placeholder="例如: 高级产品经理">
            </div>
            
            <div class="form-group">
                <label for="jobType">职位类型</label>
                <select id="jobType" class="form-control">
                    <option value="fulltime">全职</option>
                    <option value="parttime">兼职</option>
                    <option value="intern">实习</option>
                </select>
            </div>
            
            <div class="form-group">
                <label for="jobDepartment">所属部门</label>
                <input type="text" id="jobDepartment" class="form-control" placeholder="例如: 产品部">
            </div>
            
            <div class="form-group">
                <label for="jobLocation">工作地点</label>
                <input type="text" id="jobLocation" class="form-control" placeholder="例如: 北京">
            </div>
            
            <div class="form-group">
                <label for="jobSalary">薪资范围</label>
                <input type="text" id="jobSalary" class="form-control" placeholder="例如: 15k-30k">
            </div>
            
            <div class="form-group">
                <label for="jobDescription">职位描述</label>
                <textarea id="jobDescription" class="form-control" rows="5" placeholder="请输入职位描述和工作内容"></textarea>
            </div>
            
            <div class="form-group">
                <label for="jobRequirements">任职要求</label>
                <textarea id="jobRequirements" class="form-control" rows="5" placeholder="请输入任职要求和技能要求"></textarea>
            </div>
            
            <div class="modal-buttons">
                <button class="modal-btn modal-btn-cancel" id="cancelJob">
                    取消
                </button>
                <button class="modal-btn modal-btn-confirm" id="confirmJob">
                    发布职位
                </button>
            </div>
        </div>
    </div>

    <script>
        // 用户类型: candidate(应聘者) 或 recruiter(招聘者)
        let userType = '';
        let currentUser = null;
        
        // 工作数据
        const jobs = [
            {
                id: 1,
                title: "高级产品经理",
                company: "XX科技公司",
                location: "北京",
                salary: "25k-40k",
                type: "全职",
                experience: "5年以上",
                skills: ["产品规划", "用户增长", "数据分析"],
                description: "负责公司核心产品的规划与设计，主导产品从0到1的开发...",
                posted: "2023-10-10",
                match: 82
            },
            {
                id: 2,
                title: "UI设计师",
                company: "YY设计公司",
                location: "上海",
                salary: "15k-25k",
                type: "全职",
                experience: "3年以上",
                skills: ["界面设计", "用户体验", "Figma"],
                description: "负责公司客户产品的界面设计和用户体验优化...",
                posted: "2023-10-12",
                match: 76
            },
            {
                id: 3,
                title: "前端开发工程师",
                company: "ZZ互联网公司",
                location: "深圳",
                salary: "20k-35k",
                type: "全职",
                experience: "3年以上",
                skills: ["Vue.js", "React", "TypeScript"],
                description: "负责公司核心产品的前端架构设计和开发...",
                posted: "2023-10-15",
                match: 88
            },
            {
                id: 4,
                title: "市场营销经理",
                company: "AA集团",
                location: "广州",
                salary: "18k-30k",
                type: "全职",
                experience: "5年以上",
                skills: ["品牌策划", "数字营销", "市场分析"],
                description: "制定并执行公司年度营销策略，管理营销团队...",
                posted: "2023-10-08",
                match: 79
            }
        ];
        
        // 候选人数据
        const candidates = [
            {
                id: 1,
                name: "张伟",
                position: "高级产品经理",
                experience: "5年",
                skills: ["产品规划", "用户增长", "数据分析", "Axure", "SQL"],
                location: "北京",
                match: 82,
                resume: "张伟的简历内容..."
            },
            {
                id: 2,
                name: "李娜",
                position: "UI设计师",
                experience: "3年",
                skills: ["界面设计", "用户体验", "交互设计", "Sketch", "Figma"],
                location: "上海",
                match: 76,
                resume: "李娜的简历内容..."
            },
            {
                id: 3,
                name: "王强",
                position: "前端开发工程师",
                experience: "4年",
                skills: ["Vue.js", "React", "TypeScript", "Node.js", "Webpack"],
                location: "深圳",
                match: 88,
                resume: "王强的简历内容..."
            },
            {
                id: 4,
                name: "赵敏",
                position: "市场营销经理",
                experience: "6年",
                skills: ["品牌策划", "数字营销", "市场分析", "SEO", "Google Analytics"],
                location: "广州",
                match: 79,
                resume: "赵敏的简历内容..."
            }
        ];
        
        // 职位管理数据
        let managedJobs = [
            {
                id: 1,
                title: "高级产品经理",
                department: "产品部",
                type: "全职",
                location: "北京",
                salary: "25k-40k",
                posted: "2023-10-01",
                applicants: 12,
                status: "招聘中"
            },
            {
                id: 2,
                title: "UI设计师",
                department: "设计部",
                type: "全职",
                location: "上海",
                salary: "15k-25k",
                posted: "2023-09-15",
                applicants: 8,
                status: "招聘中"
            }
        ];
        
        // 初始化页面
        const initPages = () => {
            // 绑定登录/注册切换事件
            document.querySelectorAll('.login-tab').forEach(tab => {
                tab.addEventListener('click', function() {
                    const tabId = this.getAttribute('data-tab');
                    
                    // 更新标签页状态
                    document.querySelectorAll('.login-tab').forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                    
                    // 显示对应的表单
                    if (tabId.includes('Reg')) {
                        // 注册表单
                        document.querySelectorAll('.login-form').forEach(form => form.classList.remove('active'));
                        document.getElementById(tabId === 'candidateReg' ? 'candidateRegister' : 'recruiterRegister').classList.add('active');
                    } else {
                        // 登录表单
                        document.querySelectorAll('.login-form').forEach(form => form.classList.remove('active'));
                        document.getElementById(tabId === 'candidate' ? 'candidateLogin' : 'recruiterLogin').classList.add('active');
                    }
                });
            });
            
            // 绑定显示注册页面事件
            document.getElementById('showRegister').addEventListener('click', showRegisterPage);
            document.getElementById('showRegister2').addEventListener('click', showRegisterPage);
            
            // 绑定显示忘记密码页面事件
            document.getElementById('showForgot').addEventListener('click', showForgotPage);
            document.getElementById('showForgot2').addEventListener('click', showForgotPage);
            
            // 绑定返回登录事件
            document.getElementById('backToLogin').addEventListener('click', showLoginPage);
            document.getElementById('backToLogin2').addEventListener('click', showLoginPage);
            document.getElementById('backToLogin3').addEventListener('click', showLoginPage);
            
            // 绑定登录按钮事件
            document.getElementById('candidateLoginBtn').addEventListener('click', () => login('candidate'));
            document.getElementById('recruiterLoginBtn').addEventListener('click', () => login('recruiter'));
            
            // 绑定注册按钮事件
            document.getElementById('candidateRegisterBtn').addEventListener('click', () => register('candidate'));
            document.getElementById('recruiterRegisterBtn').addEventListener('click', () => register('recruiter'));
            
            // 绑定忘记密码按钮事件
            document.getElementById('forgotBtn').addEventListener('click', forgotPassword);
            
            // 生成工作卡片
            document.getElementById('jobGrid').innerHTML = jobs.map(job => `
                <div class="card" data-id="${job.id}">
                    <div class="card-header">
                        <div class="card-avatar">${job.company.charAt(0)}</div>
                        <div>
                            <div class="card-title">${job.title}</div>
                            <div class="card-subtitle">${job.company} · ${job.location}</div>
                        </div>
                    </div>
                    <div class="card-tags">
                        ${job.skills.slice(0, 3).map(skill => `<span class="card-tag">${skill}</span>`).join('')}
                        ${job.skills.length > 3 ? `<span class="card-tag">+${job.skills.length - 3}</span>` : ''}
                    </div>
                    <div class="card-footer">
                        <span class="card-match">匹配度: ${job.match}%</span>
                        <button class="card-btn">申请职位</button>
                    </div>
                </div>
            `).join('');
            
            // 生成候选人卡片
            document.getElementById('candidateGrid').innerHTML = candidates.map(candidate => `
                <div class="card" data-id="${candidate.id}">
                    <div class="card-header">
                        <div class="card-avatar">${candidate.name.charAt(0)}</div>
                        <div>
                            <div class="card-title">${candidate.name}</div>
                            <div class="card-subtitle">${candidate.position} · ${candidate.experience}经验</div>
                        </div>
                    </div>
                    <div class="card-tags">
                        ${candidate.skills.slice(0, 3).map(skill => `<span class="card-tag">${skill}</span>`).join('')}
                        ${candidate.skills.length > 3 ? `<span class="card-tag">+${candidate.skills.length - 3}</span>` : ''}
                    </div>
                    <div class="card-footer">
                        <span class="card-match">匹配度: ${candidate.match}%</span>
                        <button class="card-btn">查看简历</button>
                    </div>
                </div>
            `).join('');
            
            // 生成职位管理卡片
            updateJobManageGrid();
            
            // 绑定工作卡片点击事件
            document.querySelectorAll('#jobGrid .card').forEach(card => {
                card.addEventListener('click', function() {
                    const jobId = parseInt(this.getAttribute('data-id'));
                    showJobDetail(jobId);
                });
            });
            
            // 绑定候选人卡片点击事件
            document.querySelectorAll('#candidateGrid .card').forEach(card => {
                card.addEventListener('click', function() {
                    const candidateId = parseInt(this.getAttribute('data-id'));
                    showCandidateDetail(candidateId);
                });
            });
            
            // 绑定职位管理卡片点击事件
            document.querySelectorAll('#jobManageGrid .card').forEach(card => {
                card.addEventListener('click', function() {
                    const jobId = parseInt(this.getAttribute('data-id'));
                    showJobManageDetail(jobId);
                });
            });
            
            // 绑定用户头像点击事件
            document.getElementById('userAvatar').addEventListener('click', toggleUserDropdown);
            document.getElementById('recruiterAvatar').addEventListener('click', toggleRecruiterDropdown);
            
            // 绑定导航菜单点击事件 - 应聘者
            document.getElementById('navCandidateJobs').addEventListener('click', () => switchCandidatePage('jobs'));
            document.getElementById('navCandidateResume').addEventListener('click', () => switchCandidatePage('resume'));
            document.getElementById('navCandidateInterview').addEventListener('click', () => switchCandidatePage('interview'));
            document.getElementById('navCandidateRecords').addEventListener('click', () => switchCandidatePage('records'));
            document.getElementById('navCandidateProfile').addEventListener('click', () => switchCandidatePage('profile'));
            document.getElementById('navCandidateSettings').addEventListener('click', () => switchCandidatePage('settings'));
            
            // 绑定导航菜单点击事件 - 招聘者
            document.getElementById('navRecruiterCandidates').addEventListener('click', () => switchRecruiterPage('candidates'));
            document.getElementById('navRecruiterJobs').addEventListener('click', () => switchRecruiterPage('jobs'));
            document.getElementById('navRecruiterResume').addEventListener('click', () => switchRecruiterPage('resume'));
            document.getElementById('navRecruiterInterview').addEventListener('click', () => switchRecruiterPage('interview'));
            document.getElementById('navRecruiterRecords').addEventListener('click', () => switchRecruiterPage('records'));
            document.getElementById('navRecruiterAnalysis').addEventListener('click', () => switchRecruiterPage('analysis'));
            document.getElementById('navRecruiterProfile').addEventListener('click', () => switchRecruiterPage('profile'));
            document.getElementById('navRecruiterSettings').addEventListener('click', () => switchRecruiterPage('settings'));
            
            // 绑定简历表单事件
            document.getElementById('addWorkExperience').addEventListener('click', addWorkExperienceField);
            document.getElementById('addProjectExperience').addEventListener('click', addProjectExperienceField);
            document.getElementById('addCertificate').addEventListener('click', addCertificateField);
            document.getElementById('saveResume').addEventListener('click', saveResume);
            document.getElementById('cancelResume').addEventListener('click', cancelResume);
            document.getElementById('analyzeResume').addEventListener('click', analyzeResume);
            
            // 绑定职位管理事件
            document.getElementById('addJobBtn').addEventListener('click', showJobModal);
            document.getElementById('cancelJob').addEventListener('click', hideJobModal);
            document.getElementById('confirmJob').addEventListener('click', addNewJob);
            
            // 绑定个人中心菜单事件
            document.querySelectorAll('.profile-menu-item').forEach(item => {
                item.addEventListener('click', function() {
                    const section = this.getAttribute('data-section');
                    
                    // 更新菜单状态
                    document.querySelectorAll('.profile-menu-item').forEach(i => i.classList.remove('active'));
                    this.classList.add('active');
                    
                    // 显示对应内容区
                    document.querySelectorAll('.profile-section').forEach(s => s.classList.remove('active'));
                    document.getElementById(`${section}Section`).classList.add('active');
                });
            });
            
            // 绑定系统设置菜单事件
            document.querySelectorAll('.settings-menu-item').forEach(item => {
                item.addEventListener('click', function() {
                    const section = this.getAttribute('data-section');
                    
                    // 更新菜单状态
                    document.querySelectorAll('.settings-menu-item').forEach(i => i.classList.remove('active'));
                    this.classList.add('active');
                    
                    // 显示对应内容区
                    document.querySelectorAll('.settings-section').forEach(s => s.classList.remove('active'));
                    document.getElementById(`${section}`).classList.add('active');
                });
            });
            
            // 绑定下拉菜单事件
            document.getElementById('dropdownProfile').addEventListener('click', () => {
                switchCandidatePage('profile');
                toggleUserDropdown();
            });
            
            document.getElementById('dropdownSettings').addEventListener('click', () => {
                switchCandidatePage('settings');
                toggleUserDropdown();
            });
            
            document.getElementById('dropdownLogout').addEventListener('click', logout);
            
            document.getElementById('dropdownRecruiterProfile').addEventListener('click', () => {
                switchRecruiterPage('profile');
                toggleRecruiterDropdown();
            });
            
            document.getElementById('dropdownRecruiterSettings').addEventListener('click', () => {
                switchRecruiterPage('settings');
                toggleRecruiterDropdown();
            });
            
            document.getElementById('dropdownRecruiterLogout').addEventListener('click', logout);
            
            // 绑定搜索事件
            document.getElementById('candidateSearchBtn').addEventListener('click', searchJobs);
            document.getElementById('candidateSearchInput').addEventListener('keypress', (e) => {
                if (e.key === 'Enter') searchJobs();
            });
            
            document.getElementById('recruiterSearchBtn').addEventListener('click', searchCandidates);
            document.getElementById('recruiterSearchInput').addEventListener('keypress', (e) => {
                if (e.key === 'Enter') searchCandidates();
            });
            
            // 绑定高级搜索事件
            document.getElementById('candidateAdvancedSearch').addEventListener('click', toggleCandidateFilters);
            document.getElementById('recruiterAdvancedSearch').addEventListener('click', toggleRecruiterFilters);
            
            document.getElementById('applyFilters').addEventListener('click', applyJobFilters);
            document.getElementById('resetFilters').addEventListener('click', resetJobFilters);
            
            document.getElementById('applyRecruiterFilters').addEventListener('click', applyCandidateFilters);
            document.getElementById('resetRecruiterFilters').addEventListener('click', resetCandidateFilters);
            
            // 初始化日历
            generateCalendar();
            document.getElementById('prevMonth').addEventListener('click', prevMonth);
            document.getElementById('nextMonth').addEventListener('click', nextMonth);
            
            // 初始化图表
            initCharts();
        };
        
        // 更新职位管理网格
        const updateJobManageGrid = () => {
            document.getElementById('jobManageGrid').innerHTML = managedJobs.map(job => `
                <div class="card" data-id="${job.id}">
                    <div class="card-header">
                        <div class="card-avatar">${job.title.charAt(0)}</div>
                        <div>
                            <div class="card-title">${job.title}</div>
                            <div class="card-subtitle">${job.department} · ${job.location}</div>
                        </div>
                    </div>
                    <div class="card-tags">
                        <span class="card-tag">${job.type}</span>
                        <span class="card-tag">${job.salary}</span>
                        <span class="card-tag">${job.status}</span>
                    </div>
                    <div class="card-footer">
                        <span>${job.applicants}位申请人</span>
                        <span>发布于 ${job.posted}</span>
                    </div>
                </div>
            `).join('');
        };
        
        // 显示工作详情
        const showJobDetail = (jobId) => {
            const job = jobs.find(j => j.id === jobId);
            if (!job) return;
            
            alert(`职位详情: ${job.title}\n公司: ${job.company}\n地点: ${job.location}\n薪资: ${job.salary}\n描述: ${job.description}`);
        };
        
        // 显示候选人详情
        const showCandidateDetail = (candidateId) => {
            const candidate = candidates.find(c => c.id === candidateId);
            if (!candidate) return;
            
            // 如果是招聘者界面，显示简历分析页面
            if (userType === 'recruiter') {
                switchRecruiterPage('resume');
                document.getElementById('startInterviewBtn').style.display = 'inline-block';
            }
        };
        
        // 显示职位管理详情
        const showJobManageDetail = (jobId) => {
            const job = managedJobs.find(j => j.id === jobId);
            if (!job) return;
            
            alert(`职位管理: ${job.title}\n部门: ${job.department}\n地点: ${job.location}\n薪资: ${job.salary}\n状态: ${job.status}\n申请人: ${job.applicants}`);
        };
        
        // 切换应聘者页面
        const switchCandidatePage = (page) => {
            // 隐藏所有页面
            document.getElementById('candidateJobsPage').style.display = 'none';
            document.getElementById('candidateResumePage').style.display = 'none';
            document.getElementById('candidateInterviewPage').style.display = 'none';
            document.getElementById('candidateRecordsPage').style.display = 'none';
            document.getElementById('candidateProfilePage').style.display = 'none';
            document.getElementById('candidateSettingsPage').style.display = 'none';
            
            // 显示选中的页面
            document.getElementById(`candidate${page.charAt(0).toUpperCase() + page.slice(1)}Page`).style.display = 'block';
            
            // 更新导航激活状态
            document.querySelectorAll('#candidateContainer .nav-item').forEach(item => {
                item.classList.remove('active');
            });
            document.getElementById(`navCandidate${page.charAt(0).toUpperCase() + page.slice(1)}`).classList.add('active');
            
            // 如果是简历页面，初始化工作经历
            if (page === 'resume') {
                initResumeFields();
            }
        };
        
        // 切换招聘者页面
        const switchRecruiterPage = (page) => {
            // 隐藏所有页面
            document.getElementById('recruiterCandidatesPage').style.display = 'none';
            document.getElementById('recruiterJobsPage').style.display = 'none';
            document.getElementById('recruiterResumePage').style.display = 'none';
            document.getElementById('recruiterInterviewPage').style.display = 'none';
            document.getElementById('recruiterRecordsPage').style.display = 'none';
            document.getElementById('recruiterAnalysisPage').style.display = 'none';
            document.getElementById('recruiterProfilePage').style.display = 'none';
            document.getElementById('recruiterSettingsPage').style.display = 'none';
            
            // 显示选中的页面
            document.getElementById(`recruiter${page.charAt(0).toUpperCase() + page.slice(1)}Page`).style.display = 'block';
            
            // 更新导航激活状态
            document.querySelectorAll('#recruiterContainer .nav-item').forEach(item => {
                item.classList.remove('active');
            });
            document.getElementById(`navRecruiter${page.charAt(0).toUpperCase() + page.slice(1)}`).classList.add('active');
        };
        
        // 显示登录页面
        const showLoginPage = () => {
            document.getElementById('loginPage').style.display = 'flex';
            document.getElementById('registerPage').style.display = 'none';
            document.getElementById('forgotPage').style.display = 'none';
        };
        
        // 显示注册页面
        const showRegisterPage = () => {
            document.getElementById('loginPage').style.display = 'none';
            document.getElementById('registerPage').style.display = 'flex';
            document.getElementById('forgotPage').style.display = 'none';
        };
        
        // 显示忘记密码页面
        const showForgotPage = () => {
            document.getElementById('loginPage').style.display = 'none';
            document.getElementById('registerPage').style.display = 'none';
            document.getElementById('forgotPage').style.display = 'flex';
        };
        
        // 切换用户下拉菜单
        const toggleUserDropdown = () => {
            const dropdown = document.getElementById('userDropdown');
            dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
        };
        
        const toggleRecruiterDropdown = () => {
            const dropdown = document.getElementById('recruiterDropdown');
            dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
        };
        
        // 初始化简历字段
        const initResumeFields = () => {
            // 添加一个默认的工作经历
            if (document.getElementById('workExperienceContainer').children.length === 0) {
                addWorkExperienceField();
            }
            
            // 添加一个默认的项目经验
            if (document.getElementById('projectExperienceContainer').children.length === 0) {
                addProjectExperienceField();
            }
            
            // 添加一个默认的证书
            if (document.getElementById('certificateContainer').children.length === 0) {
                addCertificateField();
            }
        };
        
        // 添加工作经历字段
        const addWorkExperienceField = () => {
            const container = document.getElementById('workExperienceContainer');
            const id = Date.now();
            
            const html = `
                <div class="form-section" id="work-${id}">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                        <div class="form-section-title">
                            <i class="fas fa-briefcase"></i>
                            <span>工作经历</span>
                        </div>
                        <button class="btn" onclick="removeField('work-${id}')">
                            <i class="fas fa-trash"></i> 删除
                        </button>
                    </div>
                    <div class="form-row">
                        <div class="form-col">
                            <label for="workCompany-${id}">公司名称</label>
                            <input type="text" id="workCompany-${id}" class="form-control" placeholder="请输入公司名称">
                        </div>
                        <div class="form-col">
                            <label for="workPosition-${id}">职位</label>
                            <input type="text" id="workPosition-${id}" class="form-control" placeholder="请输入职位">
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-col">
                            <label for="workStart-${id}">开始时间</label>
                            <input type="date" id="workStart-${id}" class="form-control">
                        </div>
                        <div class="form-col">
                            <label for="workEnd-${id}">结束时间</label>
                            <input type="date" id="workEnd-${id}" class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="workDescription-${id}">工作内容</label>
                        <textarea id="workDescription-${id}" class="form-control" rows="3" placeholder="请输入工作内容和职责"></textarea>
                    </div>
                </div>
            `;
            
            container.insertAdjacentHTML('beforeend', html);
        };
        
        // 添加项目经验字段
        const addProjectExperienceField = () => {
            const container = document.getElementById('projectExperienceContainer');
            const id = Date.now();
            
            const html = `
                <div class="form-section" id="project-${id}">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                        <div class="form-section-title">
                            <i class="fas fa-project-diagram"></i>
                            <span>项目经验</span>
                        </div>
                        <button class="btn" onclick="removeField('project-${id}')">
                            <i class="fas fa-trash"></i> 删除
                        </button>
                    </div>
                    <div class="form-row">
                        <div class="form-col">
                            <label for="projectName-${id}">项目名称</label>
                            <input type="text" id="projectName-${id}" class="form-control" placeholder="请输入项目名称">
                        </div>
                        <div class="form-col">
                            <label for="projectRole-${id}">担任角色</label>
                            <input type="text" id="projectRole-${id}" class="form-control" placeholder="请输入您在项目中的角色">
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-col">
                            <label for="projectStart-${id}">开始时间</label>
                            <input type="date" id="projectStart-${id}" class="form-control">
                        </div>
                        <div class="form-col">
                            <label for="projectEnd-${id}">结束时间</label>
                            <input type="date" id="projectEnd-${id}" class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="projectDescription-${id}">项目描述</label>
                        <textarea id="projectDescription-${id}" class="form-control" rows="3" placeholder="请输入项目描述"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="projectAchievement-${id}">项目成果</label>
                        <textarea id="projectAchievement-${id}" class="form-control" rows="3" placeholder="请输入项目成果和收获"></textarea>
                    </div>
                </div>
            `;
            
            container.insertAdjacentHTML('beforeend', html);
        };
        
        // 添加证书字段
        const addCertificateField = () => {
            const container = document.getElementById('certificateContainer');
            const id = Date.now();
            
            const html = `
                <div class="form-row" id="certificate-${id}" style="margin-bottom: 16px;">
                    <div class="form-col">
                        <label for="certificateName-${id}">证书名称</label>
                        <input type="text" id="certificateName-${id}" class="form-control" placeholder="请输入证书名称">
                    </div>
                    <div class="form-col">
                        <label for="certificateTime-${id}">获得时间</label>
                        <input type="date" id="certificateTime-${id}" class="form-control">
                    </div>
                    <div class="form-col" style="display: flex; align-items: flex-end;">
                        <button class="btn" onclick="removeField('certificate-${id}')" style="height: 42px;">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </div>
            `;
            
            container.insertAdjacentHTML('beforeend', html);
        };
        
        // 删除字段
        const removeField = (id) => {
            document.getElementById(id).remove();
        };
        
        // 保存简历
        const saveResume = () => {
            alert('简历已保存');
            // 这里可以添加保存简历到服务器的代码
        };
        
        // 取消编辑简历
        const cancelResume = () => {
            if (confirm('确定要取消编辑吗？所有未保存的更改将丢失。')) {
                // 重置表单
                document.getElementById('resumeForm').reset();
                // 清空动态添加的字段
                document.getElementById('workExperienceContainer').innerHTML = '';
                document.getElementById('projectExperienceContainer').innerHTML = '';
                document.getElementById('certificateContainer').innerHTML = '';
            }
        };
        
        // 分析简历匹配度
        const analyzeResume = () => {
            // 模拟分析过程
            document.getElementById('matchResult').style.display = 'block';
            
            // 模拟匹配结果
            const matches = [
                { job: "高级产品经理", score: 85 },
                { job: "产品经理", score: 78 },
                { job: "产品助理", score: 65 },
                { job: "项目经理", score: 72 },
                { job: "用户研究员", score: 60 }
            ];
            
            document.getElementById('matchList').innerHTML = matches.map(match => `
                <div class="match-item">
                    <div class="match-job">${match.job}</div>
                    <div class="match-score">${match.score}%</div>
                </div>
            `).join('');
            
            // 渲染图表
            renderMatchChart(matches);
            
            // 滚动到结果区域
            document.getElementById('matchResult').scrollIntoView({ behavior: 'smooth' });
        };
        
        // 渲染匹配度图表
        const renderMatchChart = (matches) => {
            const chartDom = document.getElementById('matchChart');
            const myChart = echarts.init(chartDom);
            
            const option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    max: 100,
                    axisLabel: {
                        formatter: '{value}%'
                    }
                },
                yAxis: {
                    type: 'category',
                    data: matches.map(m => m.job).reverse()
                },
                series: [
                    {
                        name: '匹配度',
                        type: 'bar',
                        data: matches.map(m => m.score).reverse(),
                        itemStyle: {
                            color: function(params) {
                                const score = matches[matches.length - 1 - params.dataIndex].score;
                                if (score >= 80) return '#10b981';
                                if (score >= 60) return '#f59e0b';
                                return '#ef4444';
                            }
                        },
                        label: {
                            show: true,
                            position: 'right',
                            formatter: '{c}%'
                        }
                    }
                ]
            };
            
            myChart.setOption(option);
            
            // 响应式调整
            window.addEventListener('resize', function() {
                myChart.resize();
            });
        };
        
        // 显示职位发布模态框
        const showJobModal = () => {
            document.getElementById('jobModal').style.display = 'flex';
        };
        
        // 隐藏职位发布模态框
        const hideJobModal = () => {
            document.getElementById('jobModal').style.display = 'none';
        };
        
        // 添加新职位
        const addNewJob = () => {
            const title = document.getElementById('jobTitle').value;
            const type = document.getElementById('jobType').value;
            const department = document.getElementById('jobDepartment').value;
            const location = document.getElementById('jobLocation').value;
            const salary = document.getElementById('jobSalary').value;
            const description = document.getElementById('jobDescription').value;
            const requirements = document.getElementById('jobRequirements').value;
            
            if (!title || !department || !location || !salary) {
                alert('请填写所有必填字段');
                return;
            }
            
            const now = new Date();
            const newJob = {
                id: managedJobs.length + 1,
                title: title,
                department: department,
                type: type === 'fulltime' ? '全职' : type === 'parttime' ? '兼职' : '实习',
                location: location,
                salary: salary,
                posted: `${now.getFullYear()}-${(now.getMonth()+1).toString().padStart(2, '0')}-${now.getDate().toString().padStart(2, '0')}`,
                applicants: 0,
                status: "招聘中"
            };
            
            managedJobs.push(newJob);
            updateJobManageGrid();
            hideJobModal();
            
            // 重置表单
            document.getElementById('jobTitle').value = '';
            document.getElementById('jobDepartment').value = '';
            document.getElementById('jobLocation').value = '';
            document.getElementById('jobSalary').value = '';
            document.getElementById('jobDescription').value = '';
            document.getElementById('jobRequirements').value = '';
        };
        
        // 搜索工作
        const searchJobs = () => {
            const keyword = document.getElementById('candidateSearchInput').value.toLowerCase();
            
            if (!keyword) {
                document.getElementById('jobGrid').innerHTML = jobs.map(job => `
                    <div class="card" data-id="${job.id}">
                        <div class="card-header">
                            <div class="card-avatar">${job.company.charAt(0)}</div>
                            <div>
                                <div class="card-title">${job.title}</div>
                                <div class="card-subtitle">${job.company} · ${job.location}</div>
                            </div>
                        </div>
                        <div class="card-tags">
                            ${job.skills.slice(0, 3).map(skill => `<span class="card-tag">${skill}</span>`).join('')}
                            ${job.skills.length > 3 ? `<span class="card-tag">+${job.skills.length - 3}</span>` : ''}
                        </div>
                        <div class="card-footer">
                            <span class="card-match">匹配度: ${job.match}%</span>
                            <button class="card-btn">申请职位</button>
                        </div>
                    </div>
                `).join('');
                return;
            }
            
            const filteredJobs = jobs.filter(job => 
                job.title.toLowerCase().includes(keyword) || 
                job.company.toLowerCase().includes(keyword) ||
                job.skills.some(skill => skill.toLowerCase().includes(keyword))
            );
            
            document.getElementById('jobGrid').innerHTML = filteredJobs.map(job => `
                <div class="card" data-id="${job.id}">
                    <div class="card-header">
                        <div class="card-avatar">${job.company.charAt(0)}</div>
                        <div>
                            <div class="card-title">${job.title}</div>
                            <div class="card-subtitle">${job.company} · ${job.location}</div>
                        </div>
                    </div>
                    <div class="card-tags">
                        ${job.skills.slice(0, 3).map(skill => `<span class="card-tag">${skill}</span>`).join('')}
                        ${job.skills.length > 3 ? `<span class="card-tag">+${job.skills.length - 3}</span>` : ''}
                    </div>
                    <div class="card-footer">
                        <span class="card-match">匹配度: ${job.match}%</span>
                        <button class="card-btn">申请职位</button>
                    </div>
                </div>
            `).join('');
            
            // 如果没有结果
            if (filteredJobs.length === 0) {
                document.getElementById('jobGrid').innerHTML = `
                    <div style="grid-column: 1 / -1; text-align: center; padding: 40px;">
                        <i class="fas fa-search" style="font-size: 60px; color: #e2e8f0; margin-bottom: 20px;"></i>
                        <h3 style="margin-bottom: 10px;">没有找到匹配的工作</h3>
                        <p style="color: #64748b;">尝试使用不同的关键词或调整筛选条件</p>
                    </div>
                `;
            }
        };
        
        // 搜索候选人
        const searchCandidates = () => {
            const keyword = document.getElementById('recruiterSearchInput').value.toLowerCase();
            
            if (!keyword) {
                document.getElementById('candidateGrid').innerHTML = candidates.map(candidate => `
                    <div class="card" data-id="${candidate.id}">
                        <div class="card-header">
                            <div class="card-avatar">${candidate.name.charAt(0)}</div>
                            <div>
                                <div class="card-title">${candidate.name}</div>
                                <div class="card-subtitle">${candidate.position} · ${candidate.experience}经验</div>
                            </div>
                        </div>
                        <div class="card-tags">
                            ${candidate.skills.slice(0, 3).map(skill => `<span class="card-tag">${skill}</span>`).join('')}
                            ${candidate.skills.length > 3 ? `<span class="card-tag">+${candidate.skills.length - 3}</span>` : ''}
                        </div>
                        <div class="card-footer">
                            <span class="card-match">匹配度: ${candidate.match}%</span>
                            <button class="card-btn">查看简历</button>
                        </div>
                    </div>
                `).join('');
                return;
            }
            
            const filteredCandidates = candidates.filter(candidate => 
                candidate.name.toLowerCase().includes(keyword) || 
                candidate.position.toLowerCase().includes(keyword) ||
                candidate.skills.some(skill => skill.toLowerCase().includes(keyword))
            );
            
            document.getElementById('candidateGrid').innerHTML = filteredCandidates.map(candidate => `
                <div class="card" data-id="${candidate.id}">
                    <div class="card-header">
                        <div class="card-avatar">${candidate.name.charAt(0)}</div>
                        <div>
                            <div class="card-title">${candidate.name}</div>
                            <div class="card-subtitle">${candidate.position} · ${candidate.experience}经验</div>
                        </div>
                    </div>
                    <div class="card-tags">
                        ${candidate.skills.slice(0, 3).map(skill => `<span class="card-tag">${skill}</span>`).join('')}
                        ${candidate.skills.length > 3 ? `<span class="card-tag">+${candidate.skills.length - 3}</span>` : ''}
                    </div>
                    <div class="card-footer">
                        <span class="card-match">匹配度: ${candidate.match}%</span>
                        <button class="card-btn">查看简历</button>
                    </div>
                </div>
            `).join('');
            
            // 如果没有结果
            if (filteredCandidates.length === 0) {
                document.getElementById('candidateGrid').innerHTML = `
                    <div style="grid-column: 1 / -1; text-align: center; padding: 40px;">
                        <i class="fas fa-search" style="font-size: 60px; color: #e2e8f0; margin-bottom: 20px;"></i>
                        <h3 style="margin-bottom: 10px;">没有找到匹配的候选人</h3>
                        <p style="color: #64748b;">尝试使用不同的关键词或调整筛选条件</p>
                    </div>
                `;
            }
        };
        
        // 切换应聘者高级筛选
        const toggleCandidateFilters = () => {
            const filters = document.getElementById('candidateSearchFilters');
            filters.classList.toggle('active');
        };
        
        // 切换招聘者高级筛选
        const toggleRecruiterFilters = () => {
            const filters = document.getElementById('recruiterSearchFilters');
            filters.classList.toggle('active');
        };
        
        // 应用工作筛选
        const applyJobFilters = () => {
            const type = document.getElementById('jobTypeFilter').value;
            const location = document.getElementById('jobLocationFilter').value;
            const salary = document.getElementById('jobSalaryFilter').value;
            const experience = document.getElementById('jobExperienceFilter').value;
            
            let filteredJobs = [...jobs];
            
            if (type) {
                filteredJobs = filteredJobs.filter(job => {
                    if (type === 'fulltime') return job.type === '全职';
                    if (type === 'parttime') return job.type === '兼职';
                    if (type === 'intern') return job.type === '实习';
                    return true;
                });
            }
            
            if (location) {
                filteredJobs = filteredJobs.filter(job => {
                    if (location === 'beijing') return job.location === '北京';
                    if (location === 'shanghai') return job.location === '上海';
                    if (location === 'guangzhou') return job.location === '广州';
                    if (location === 'shenzhen') return job.location === '深圳';
                    return true;
                });
            }
            
            if (salary) {
                filteredJobs = filteredJobs.filter(job => {
                    if (salary === '10k') {
                        const min = parseInt(job.salary.split('k')[0]);
                        return min < 10;
                    }
                    if (salary === '10-20k') {
                        const min = parseInt(job.salary.split('k')[0]);
                        return min >= 10 && min < 20;
                    }
                    if (salary === '20-30k') {
                        const min = parseInt(job.salary.split('k')[0]);
                        return min >= 20 && min < 30;
                    }
                    if (salary === '30k+') {
                        const min = parseInt(job.salary.split('k')[0]);
                        return min >= 30;
                    }
                    return true;
                });
            }
            
            if (experience) {
                filteredJobs = filteredJobs.filter(job => {
                    if (experience === '1') return job.experience === '1年以下';
                    if (experience === '1-3') return job.experience === '1-3年';
                    if (experience === '3-5') return job.experience === '3-5年';
                    if (experience === '5+') return job.experience === '5年以上';
                    return true;
                });
            }
            
            document.getElementById('jobGrid').innerHTML = filteredJobs.map(job => `
                <div class="card" data-id="${job.id}">
                    <div class="card-header">
                        <div class="card-avatar">${job.company.charAt(0)}</div>
                        <div>
                            <div class="card-title">${job.title}</div>
                            <div class="card-subtitle">${job.company} · ${job.location}</div>
                        </div>
                    </div>
                    <div class="card-tags">
                        ${job.skills.slice(0, 3).map(skill => `<span class="card-tag">${skill}</span>`).join('')}
                        ${job.skills.length > 3 ? `<span class="card-tag">+${job.skills.length - 3}</span>` : ''}
                    </div>
                    <div class="card-footer">
                        <span class="card-match">匹配度: ${job.match}%</span>
                        <button class="card-btn">申请职位</button>
                    </div>
                </div>
            `).join('');
            
            // 如果没有结果
            if (filteredJobs.length === 0) {
                document.getElementById('jobGrid').innerHTML = `
                    <div style="grid-column: 1 / -1; text-align: center; padding: 40px;">
                        <i class="fas fa-search" style="font-size: 60px; color: #e2e8f0; margin-bottom: 20px;"></i>
                        <h3 style="margin-bottom: 10px;">没有找到匹配的工作</h3>
                        <p style="color: #64748b;">尝试调整筛选条件</p>
                    </div>
                `;
            }
            
            // 隐藏筛选面板
            document.getElementById('candidateSearchFilters').classList.remove('active');
        };
        
        // 重置工作筛选
        const resetJobFilters = () => {
            document.getElementById('jobTypeFilter').value = '';
            document.getElementById('jobLocationFilter').value = '';
            document.getElementById('jobSalaryFilter').value = '';
            document.getElementById('jobExperienceFilter').value = '';
            
            // 显示所有工作
            document.getElementById('jobGrid').innerHTML = jobs.map(job => `
                <div class="card" data-id="${job.id}">
                    <div class="card-header">
                        <div class="card-avatar">${job.company.charAt(0)}</div>
                        <div>
                            <div class="card-title">${job.title}</div>
                            <div class="card-subtitle">${job.company} · ${job.location}</div>
                        </div>
                    </div>
                    <div class="card-tags">
                        ${job.skills.slice(0, 3).map(skill => `<span class="card-tag">${skill}</span>`).join('')}
                        ${job.skills.length > 3 ? `<span class="card-tag">+${job.skills.length - 3}</span>` : ''}
                    </div>
                    <div class="card-footer">
                        <span class="card-match">匹配度: ${job.match}%</span>
                        <button class="card-btn">申请职位</button>
                    </div>
                </div>
            `).join('');
        };
        
        // 应用候选人筛选
        const applyCandidateFilters = () => {
            const location = document.getElementById('candidateLocationFilter').value;
            const experience = document.getElementById('candidateExperienceFilter').value;
            const education = document.getElementById('candidateEducationFilter').value;
            const salary = document.getElementById('candidateSalaryFilter').value;
            
            let filteredCandidates = [...candidates];
            
            if (location) {
                filteredCandidates = filteredCandidates.filter(candidate => {
                    if (location === 'beijing') return candidate.location === '北京';
                    if (location === 'shanghai') return candidate.location === '上海';
                    if (location === 'guangzhou') return candidate.location === '广州';
                    if (location === 'shenzhen') return candidate.location === '深圳';
                    if (location === 'remote') return candidate.location === '远程';
                    return true;
                });
            }
            
            if (experience) {
                filteredCandidates = filteredCandidates.filter(candidate => {
                    const exp = parseInt(candidate.experience);
                    if (experience === '1') return exp < 1;
                    if (experience === '1-3') return exp >= 1 && exp < 3;
                    if (experience === '3-5') return exp >= 3 && exp < 5;
                    if (experience === '5+') return exp >= 5;
                    return true;
                });
            }
            
            if (education) {
                // 这里简化处理，实际应用中应该从候选人数据中获取教育背景
                filteredCandidates = filteredCandidates.filter(candidate => {
                    if (education === 'college') return true; // 假设所有候选人都符合
                    if (education === 'bachelor') return true;
                    if (education === 'master') return candidate.name === '张伟'; // 示例
                    if (education === 'phd') return false; // 示例
                    return true;
                });
            }
            
            if (salary) {
                // 这里简化处理，实际应用中应该从候选人数据中获取期望薪资
                filteredCandidates = filteredCandidates.filter(candidate => {
                    if (salary === '10k') return candidate.match < 70;
                    if (salary === '10-20k') return candidate.match >= 70 && candidate.match < 80;
                    if (salary === '20-30k') return candidate.match >= 80 && candidate.match < 90;
                    if (salary === '30k+') return candidate.match >= 90;
                    return true;
                });
            }
            
            document.getElementById('candidateGrid').innerHTML = filteredCandidates.map(candidate => `
                <div class="card" data-id="${candidate.id}">
                    <div class="card-header">
                        <div class="card-avatar">${candidate.name.charAt(0)}</div>
                        <div>
                            <div class="card-title">${candidate.name}</div>
                            <div class="card-subtitle">${candidate.position} · ${candidate.experience}经验</div>
                        </div>
                    </div>
                    <div class="card-tags">
                        ${candidate.skills.slice(0, 3).map(skill => `<span class="card-tag">${skill}</span>`).join('')}
                        ${candidate.skills.length > 3 ? `<span class="card-tag">+${candidate.skills.length - 3}</span>` : ''}
                    </div>
                    <div class="card-footer">
                        <span class="card-match">匹配度: ${candidate.match}%</span>
                        <button class="card-btn">查看简历</button>
                    </div>
                </div>
            `).join('');
            
            // 如果没有结果
            if (filteredCandidates.length === 0) {
                document.getElementById('candidateGrid').innerHTML = `
                    <div style="grid-column: 1 / -1; text-align: center; padding: 40px;">
                        <i class="fas fa-search" style="font-size: 60px; color: #e2e8f0; margin-bottom: 20px;"></i>
                        <h3 style="margin-bottom: 10px;">没有找到匹配的候选人</h3>
                        <p style="color: #64748b;">尝试调整筛选条件</p>
                    </div>
                `;
            }
            
            // 隐藏筛选面板
            document.getElementById('recruiterSearchFilters').classList.remove('active');
        };
        
        // 重置候选人筛选
        const resetCandidateFilters = () => {
            document.getElementById('candidateLocationFilter').value = '';
            document.getElementById('candidateExperienceFilter').value = '';
            document.getElementById('candidateEducationFilter').value = '';
            document.getElementById('candidateSalaryFilter').value = '';
            
            // 显示所有候选人
            document.getElementById('candidateGrid').innerHTML = candidates.map(candidate => `
                <div class="card" data-id="${candidate.id}">
                    <div class="card-header">
                        <div class="card-avatar">${candidate.name.charAt(0)}</div>
                        <div>
                            <div class="card-title">${candidate.name}</div>
                            <div class="card-subtitle">${candidate.position} · ${candidate.experience}经验</div>
                        </div>
                    </div>
                    <div class="card-tags">
                        ${candidate.skills.slice(0, 3).map(skill => `<span class="card-tag">${skill}</span>`).join('')}
                        ${candidate.skills.length > 3 ? `<span class="card-tag">+${candidate.skills.length - 3}</span>` : ''}
                    </div>
                    <div class="card-footer">
                        <span class="card-match">匹配度: ${candidate.match}%</span>
                        <button class="card-btn">查看简历</button>
                    </div>
                </div>
            `).join('');
        };
        
        // 生成日历
        const generateCalendar = () => {
            const calendarBody = document.getElementById('calendarBody');
            calendarBody.innerHTML = '';
            
            const now = new Date();
            const year = now.getFullYear();
            const month = now.getMonth();
            
            // 获取当月第一天是星期几
            const firstDay = new Date(year, month, 1).getDay();
            // 获取当月天数
            const daysInMonth = new Date(year, month + 1, 0).getDate();
            
            let date = 1;
            for (let i = 0; i < 6; i++) {
                // 创建表格行
                const row = document.createElement('tr');
                
                // 创建单元格
                for (let j = 0; j < 7; j++) {
                    const cell = document.createElement('td');
                    
                    if (i === 0 && j < firstDay) {
                        // 上个月的日期
                        cell.innerHTML = '';
                    } else if (date > daysInMonth) {
                        // 下个月的日期
                        cell.innerHTML = '';
                    } else {
                        // 当月的日期
                        cell.innerHTML = `
                            <div class="calendar-day">${date}</div>
                            ${date === 15 ? '<div class="calendar-event">面试: XX公司</div>' : ''}
                        `;
                        date++;
                    }
                    
                    row.appendChild(cell);
                }
                
                calendarBody.appendChild(row);
                
                // 如果已经显示完所有日期，退出循环
                if (date > daysInMonth) break;
            }
        };
        
        // 上个月
        const prevMonth = () => {
            alert('切换到上个月');
            // 实际应用中应该更新日历显示
        };
        
        // 下个月
        const nextMonth = () => {
            alert('切换到下个月');
            // 实际应用中应该更新日历显示
        };
        
        // 初始化图表
        const initCharts = () => {
            // 候选人来源图表
            const sourceChart = echarts.init(document.getElementById('candidateSourceChart'));
            sourceChart.setOption({
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    right: 10,
                    top: 'center',
                    data: ['官网申请', '招聘网站', '内部推荐', '校园招聘', '其他']
                },
                series: [
                    {
                        name: '候选人来源',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '18',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 35, name: '官网申请' },
                            { value: 30, name: '招聘网站' },
                            { value: 20, name: '内部推荐' },
                            { value: 10, name: '校园招聘' },
                            { value: 5, name: '其他' }
                        ]
                    }
                ]
            });
            
            // 职位申请趋势图表
            const trendChart = echarts.init(document.getElementById('applicationTrendChart'));
            trendChart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月'],
                    axisTick: {
                        alignWithLabel: true
                    }
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '申请人数',
                        type: 'bar',
                        barWidth: '60%',
                        data: [12, 19, 15, 27, 34, 42, 39, 51, 45, 38],
                        itemStyle: {
                            color: '#2563eb'
                        }
                    }
                ]
            });
            
            // 技能分布图表
            const skillChart = echarts.init(document.getElementById('skillDistributionChart'));
            skillChart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value'
                },
                yAxis: {
                    type: 'category',
                    data: ['JavaScript', 'HTML/CSS', 'Python', 'Java', 'SQL', 'React', 'Vue.js', 'Node.js']
                },
                series: [
                    {
                        name: '技能分布',
                        type: 'bar',
                        data: [78, 65, 45, 38, 32, 28, 25, 20],
                        itemStyle: {
                            color: function(params) {
                                const colorList = ['#2563eb', '#1d4ed8', '#1e40af', '#1e3a8a'];
                                return colorList[params.dataIndex % colorList.length];
                            }
                        }
                    }
                ]
            });
            
            // 响应式调整
            window.addEventListener('resize', function() {
                sourceChart.resize();
                trendChart.resize();
                skillChart.resize();
            });
        };
        
        // 登录功能
        const login = (type) => {
            const usernameField = type === 'candidate' ? 'candidateUsername' : 'recruiterUsername';
            const passwordField = type === 'candidate' ? 'candidatePassword' : 'recruiterPassword';
            
            const username = document.getElementById(usernameField).value;
            const password = document.getElementById(passwordField).value;
            
            if (!username || !password) {
                alert('请输入用户名和密码');
                return;
            }
            
            // 模拟登录成功
            userType = type;
            currentUser = {
                username: username,
                type: type,
                name: type === 'candidate' ? '张伟' : '李明',
                company: type === 'recruiter' ? 'XX科技公司' : null
            };
            
            // 显示主界面
            document.getElementById('loginPage').style.display = 'none';
            
            if (type === 'candidate') {
                document.getElementById('candidateContainer').style.display = 'flex';
                switchCandidatePage('jobs');
            } else {
                document.getElementById('recruiterContainer').style.display = 'flex';
                switchRecruiterPage('candidates');
            }
        };
        
        // 注册功能
        const register = (type) => {
            const usernameField = type === 'candidate' ? 'regCandidateUsername' : 'regRecruiterUsername';
            const passwordField = type === 'candidate' ? 'regCandidatePassword' : 'regRecruiterPassword';
            const confirmField = type === 'candidate' ? 'regCandidateConfirm' : 'regRecruiterConfirm';
            const emailField = type === 'candidate' ? 'regCandidateEmail' : 'regRecruiterEmail';
            
            const username = document.getElementById(usernameField).value;
            const password = document.getElementById(passwordField).value;
            const confirm = document.getElementById(confirmField).value;
            const email = document.getElementById(emailField).value;
            const company = type === 'recruiter' ? document.getElementById('regCompany').value : null;
            
            if (!username || !password || !confirm || !email) {
                alert('请填写所有必填字段');
                return;
            }
            
            if (password !== confirm) {
                alert('两次输入的密码不一致');
                return;
            }
            
            if (type === 'recruiter' && !company) {
                alert('请填写公司名称');
                return;
            }
            
            // 模拟注册成功
            alert('注册成功！请登录');
            showLoginPage();
        };
        
        // 忘记密码功能
        const forgotPassword = () => {
            const email = document.getElementById('forgotEmail').value;
            
            if (!email) {
                alert('请输入电子邮箱');
                return;
            }
            
            // 模拟发送重置链接
            alert(`重置链接已发送至 ${email}，请查收邮件并按照指示操作`);
            showLoginPage();
        };
        
        // 退出登录
        const logout = () => {
            userType = '';
            currentUser = null;
            
            // 隐藏所有主界面
            document.getElementById('candidateContainer').style.display = 'none';
            document.getElementById('recruiterContainer').style.display = 'none';
            
            // 显示登录页面
            showLoginPage();
        };
        
        // 初始化页面
        initPages();
    </script>
</body>
</html>