فهرست منبع

feat update demo

0235712 11 ساعت پیش
والد
کامیت
2dca7372ee

+ 0 - 1934
demo/AIC.html

@@ -1,1934 +0,0 @@
-<!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 {
-            width: 100%;
-            padding: 12px;
-            border: none;
-            border-radius: 8px;
-            font-size: 16px;
-            font-weight: 500;
-            cursor: pointer;
-            transition: all 0.2s;
-        }
-        
-        .btn-primary {
-            background: var(--primary);
-            color: white;
-        }
-        
-        .btn-primary:hover {
-            background: #1d4ed8;
-        }
-        
-        .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;
-        }
-        
-        .dropdown-item:hover {
-            background: #f1f5f9;
-        }
-        
-        .dropdown-divider {
-            height: 1px;
-            background: #e2e8f0;
-            margin: 5px 0;
-        }
-        
-        /* 搜索栏 */
-        .search-bar {
-            display: flex;
-            gap: 10px;
-        }
-        
-        .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;
-        }
-        
-        /* 内容区域样式 */
-        .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);
-        }
-        
-        /* 模态框样式 */
-        .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;
-        }
-
-        .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);
-        }
-
-        /* 响应式设计 */
-        @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;
-            }
-        }
-    </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" 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" 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" 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" 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" 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>
-        </div>
-        
-        <!-- 主内容区 -->
-        <div class="main-content">
-            <!-- 顶部信息栏 -->
-            <div class="header">
-                <div class="search-bar">
-                    <input type="text" class="search-input" placeholder="搜索工作职位、公司...">
-                    <button class="search-btn">
-                        <i class="fas fa-search"></i>
-                    </button>
-                </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">
-                                <i class="fas fa-user"></i> 个人中心
-                            </div>
-                            <div class="dropdown-item">
-                                <i class="fas fa-cog"></i> 系统设置
-                            </div>
-                            <div class="dropdown-divider"></div>
-                            <div class="dropdown-item">
-                                <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="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="请输入您的姓名">
-                            </div>
-                            <div class="form-col">
-                                <label for="resumeGender">性别</label>
-                                <select id="resumeGender" class="form-control">
-                                    <option value="male">男</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">
-                            </div>
-                            <div class="form-col">
-                                <label for="resumePhone">联系电话</label>
-                                <input type="tel" id="resumePhone" class="form-control" placeholder="请输入联系电话">
-                            </div>
-                        </div>
-                        <div class="form-row">
-                            <div class="form-col">
-                                <label for="resumeEmail">电子邮箱</label>
-                                <input type="email" id="resumeEmail" class="form-control" placeholder="请输入电子邮箱">
-                            </div>
-                            <div class="form-col">
-                                <label for="resumeLocation">居住地</label>
-                                <input type="text" id="resumeLocation" class="form-control" placeholder="请输入居住城市">
-                            </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="请输入学校名称">
-                            </div>
-                            <div class="form-col">
-                                <label for="resumeDegree">学历</label>
-                                <select id="resumeDegree" class="form-control">
-                                    <option value="bachelor">本科</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="请输入所学专业">
-                            </div>
-                            <div class="form-col">
-                                <label for="resumeGraduation">毕业时间</label>
-                                <input type="date" id="resumeGraduation" class="form-control">
-                            </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, 项目管理">
-                        </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>
-            </div>
-            
-            <!-- 视频面试页面 -->
-            <div class="content-area" id="candidateInterviewPage" style="display: none;">
-                <div class="content-title">
-                    <i class="fas fa-video"></i>
-                    <span>视频面试</span>
-                </div>
-                <div style="text-align: center; padding: 40px;">
-                    <i class="fas fa-video" style="font-size: 60px; color: #e2e8f0; margin-bottom: 20px;"></i>
-                    <h3 style="margin-bottom: 20px;">等待面试邀请</h3>
-                    <p style="color: #64748b; margin-bottom: 30px;">当招聘者发起面试邀请时,您将在此处看到面试信息</p>
-                </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 style="text-align: center; padding: 40px;">
-                    <i class="fas fa-clock" style="font-size: 60px; color: #e2e8f0; margin-bottom: 20px;"></i>
-                    <h3 style="margin-bottom: 20px;">暂无面试记录</h3>
-                    <p style="color: #64748b;">完成面试后,您的面试记录将显示在此处</p>
-                </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>
-        </div>
-        
-        <!-- 主内容区 -->
-        <div class="main-content">
-            <!-- 顶部信息栏 -->
-            <div class="header">
-                <div class="search-bar">
-                    <input type="text" class="search-input" placeholder="搜索候选人姓名、技能...">
-                    <button class="search-btn">
-                        <i class="fas fa-search"></i>
-                    </button>
-                </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">
-                                <i class="fas fa-user"></i> 个人中心
-                            </div>
-                            <div class="dropdown-item">
-                                <i class="fas fa-cog"></i> 系统设置
-                            </div>
-                            <div class="dropdown-divider"></div>
-                            <div class="dropdown-item">
-                                <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="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="text-align: center; padding: 40px;">
-                    <i class="fas fa-file-search" style="font-size: 60px; color: #e2e8f0; margin-bottom: 20px;"></i>
-                    <h3 style="margin-bottom: 20px;">选择候选人查看简历</h3>
-                    <p style="color: #64748b;">点击候选人列表中的候选人,查看其完整简历和AI分析报告</p>
-                </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="text-align: center; padding: 40px;">
-                    <i class="fas fa-video" style="font-size: 60px; color: #e2e8f0; margin-bottom: 20px;"></i>
-                    <h3 style="margin-bottom: 20px;">发起视频面试</h3>
-                    <p style="color: #64748b; margin-bottom: 30px;">选择候选人后,您可以发起视频面试邀请</p>
-                    <button class="btn btn-primary" id="startInterviewBtn" style="display: none;">
-                        <i class="fas fa-video"></i> 发起面试
-                    </button>
-                </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="text-align: center; padding: 40px;">
-                    <i class="fas fa-clock" style="font-size: 60px; color: #e2e8f0; margin-bottom: 20px;"></i>
-                    <h3 style="margin-bottom: 20px;">暂无面试记录</h3>
-                    <p style="color: #64748b;">完成面试后,您的面试记录将显示在此处</p>
-                </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="text-align: center; padding: 40px;">
-                    <i class="fas fa-chart-pie" style="font-size: 60px; color: #e2e8f0; margin-bottom: 20px;"></i>
-                    <h3 style="margin-bottom: 20px;">数据分析面板</h3>
-                    <p style="color: #64748b;">查看候选人数据、面试表现统计和招聘效果分析</p>
-                </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('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('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('.dropdown-item').forEach(item => {
-                if (item.textContent.includes('退出登录')) {
-                    item.addEventListener('click', logout);
-                }
-            });
-        };
-        
-        // 更新职位管理网格
-        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;
-            
-            alert(`候选人详情: ${candidate.name}\n职位: ${candidate.position}\n经验: ${candidate.experience}\n技能: ${candidate.skills.join(', ')}\n简历: ${candidate.resume}`);
-            
-            // 如果是招聘者界面,显示发起面试按钮
-            if (userType === 'recruiter') {
-                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(`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');
-        };
-        
-        // 切换招聘者页面
-        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(`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 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('');
-            
-            // 滚动到结果区域
-            document.getElementById('matchResult').scrollIntoView({ behavior: 'smooth' });
-        };
-        
-        // 显示职位发布模态框
-        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 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>

تفاوت فایلی نمایش داده نمی شود زیرا این فایل بسیار بزرگ است
+ 780 - 269
demo/H.html


+ 918 - 0
demo/candidate-dashboard.html

@@ -0,0 +1,918 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>应聘者中心 - 智能招聘系统</title>
+    <link 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>
+    <link href="common.css" rel="stylesheet">
+    <link href="candidate.css" rel="stylesheet">
+</head>
+<body>
+    <!-- 主界面 - 应聘者 -->
+    <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="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 src="common.js"></script>
+    <script src="candidate.js"></script>
+</body>
+</html>

+ 151 - 0
demo/index.html

@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>智能招聘系统</title>
+    <link 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">
+    <link href="common.css" rel="stylesheet">
+    <link href="login.css" rel="stylesheet">
+</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>
+
+    <script src="common.js"></script>
+    <script src="login.js"></script>
+</body>
+</html>

+ 968 - 0
demo/recruiter-dashboard.html

@@ -0,0 +1,968 @@
+<!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>
+    <link href="common.css" rel="stylesheet">
+    <link href="recruiter.css" rel="stylesheet">
+</head>
+<body>
+    <!-- 主界面 - 招聘者 -->
+    <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 src="common.js"></script>
+    <script src="recruiter.js"></script>
+</body>
+</html>

+ 8 - 0
interview-web/package-lock.json

@@ -23,6 +23,7 @@
         "@angular/cli": "^20.0.4",
         "@angular/compiler-cli": "^20.0.0",
         "@types/jasmine": "~5.1.0",
+        "@types/swiper": "^5.4.3",
         "jasmine-core": "~5.7.0",
         "karma": "~6.4.0",
         "karma-chrome-launcher": "~3.2.0",
@@ -3266,6 +3267,13 @@
         "undici-types": "~7.8.0"
       }
     },
+    "node_modules/@types/swiper": {
+      "version": "5.4.3",
+      "resolved": "https://registry.npmmirror.com/@types/swiper/-/swiper-5.4.3.tgz",
+      "integrity": "sha512-hJXpVeANf+XQXgbvmuFZdsnaSOKqOEZcaLDnHhZOJDRow+lfboatwubW+Ay9XiHobMGyEomkgpXSYRlDVn4gMQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@vitejs/plugin-basic-ssl": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-basic-ssl/-/plugin-basic-ssl-2.0.0.tgz",

+ 1 - 0
interview-web/package.json

@@ -35,6 +35,7 @@
     "@angular/cli": "^20.0.4",
     "@angular/compiler-cli": "^20.0.0",
     "@types/jasmine": "~5.1.0",
+    "@types/swiper": "^5.4.3",
     "jasmine-core": "~5.7.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",

+ 1044 - 0
interview-web/src/app/app.component.css

@@ -0,0 +1,1044 @@
+/* 根变量定义 */
+: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;
+}
+
+/* 左侧导航 */
+.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-menu.show {
+  display: block;
+}
+
+.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: flex;
+  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;
+}
+
+/* 无结果样式 */
+.no-results {
+  grid-column: 1 / -1;
+  text-align: center;
+  padding: 40px;
+}
+
+.no-results i {
+  font-size: 60px;
+  color: #e2e8f0;
+  margin-bottom: 20px;
+}
+
+.no-results h3 {
+  margin-bottom: 10px;
+}
+
+.no-results p {
+  color: #64748b;
+}
+
+/* 响应式设计 */
+@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;
+  }
+}

+ 405 - 0
interview-web/src/app/app.component.html

@@ -0,0 +1,405 @@
+<div class="login-container" *ngIf="currentPage === 'login'">
+  <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" [class.active]="activeLoginTab === 'candidate'" 
+           (click)="setActiveLoginTab('candidate')">应聘者登录</div>
+      <div class="login-tab" [class.active]="activeLoginTab === 'recruiter'" 
+           (click)="setActiveLoginTab('recruiter')">招聘者登录</div>
+    </div>
+    
+    <!-- 应聘者登录表单 -->
+    <div class="login-form" [class.active]="activeLoginTab === 'candidate'">
+      <div class="form-group">
+        <label for="candidateUsername">用户名</label>
+        <input type="text" id="candidateUsername" class="form-control" placeholder="请输入用户名" 
+               [(ngModel)]="candidateLogin.username">
+      </div>
+      <div class="form-group">
+        <label for="candidatePassword">密码</label>
+        <input type="password" id="candidatePassword" class="form-control" placeholder="请输入密码" 
+               [(ngModel)]="candidateLogin.password">
+      </div>
+      <button class="btn btn-primary btn-block" (click)="login('candidate')">登录</button>
+      <div class="login-links">
+        <span class="login-link" (click)="goToPage('register')">注册账号</span>
+        <span class="login-link" (click)="goToPage('forgot')">忘记密码</span>
+      </div>
+    </div>
+    
+    <!-- 招聘者登录表单 -->
+    <div class="login-form" [class.active]="activeLoginTab === 'recruiter'">
+      <div class="form-group">
+        <label for="recruiterUsername">用户名</label>
+        <input type="text" id="recruiterUsername" class="form-control" placeholder="请输入用户名" 
+               [(ngModel)]="recruiterLogin.username">
+      </div>
+      <div class="form-group">
+        <label for="recruiterPassword">密码</label>
+        <input type="password" id="recruiterPassword" class="form-control" placeholder="请输入密码" 
+               [(ngModel)]="recruiterLogin.password">
+      </div>
+      <button class="btn btn-primary btn-block" (click)="login('recruiter')">登录</button>
+      <div class="login-links">
+        <span class="login-link" (click)="goToPage('register')">注册账号</span>
+        <span class="login-link" (click)="goToPage('forgot')">忘记密码</span>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- 注册页面 -->
+<div class="login-container" *ngIf="currentPage === 'register'">
+  <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" [class.active]="activeRegisterTab === 'candidate'" 
+           (click)="setActiveRegisterTab('candidate')">应聘者注册</div>
+      <div class="login-tab" [class.active]="activeRegisterTab === 'recruiter'" 
+           (click)="setActiveRegisterTab('recruiter')">招聘者注册</div>
+    </div>
+    
+    <!-- 应聘者注册表单 -->
+    <div class="login-form" [class.active]="activeRegisterTab === 'candidate'">
+      <div class="form-group">
+        <label for="regCandidateUsername">用户名</label>
+        <input type="text" id="regCandidateUsername" class="form-control" placeholder="请输入用户名" 
+               [(ngModel)]="candidateRegister.username">
+      </div>
+      <div class="form-group">
+        <label for="regCandidatePassword">密码</label>
+        <input type="password" id="regCandidatePassword" class="form-control" placeholder="请输入密码" 
+               [(ngModel)]="candidateRegister.password">
+      </div>
+      <div class="form-group">
+        <label for="regCandidateConfirm">确认密码</label>
+        <input type="password" id="regCandidateConfirm" class="form-control" placeholder="请再次输入密码" 
+               [(ngModel)]="candidateRegister.confirmPassword">
+      </div>
+      <div class="form-group">
+        <label for="regCandidateEmail">电子邮箱</label>
+        <input type="email" id="regCandidateEmail" class="form-control" placeholder="请输入电子邮箱" 
+               [(ngModel)]="candidateRegister.email">
+      </div>
+      <button class="btn btn-primary btn-block" (click)="register('candidate')">注册</button>
+      <div class="login-links">
+        <span class="login-link" (click)="goToPage('login')">返回登录</span>
+      </div>
+    </div>
+    
+    <!-- 招聘者注册表单 -->
+    <div class="login-form" [class.active]="activeRegisterTab === 'recruiter'">
+      <div class="form-group">
+        <label for="regRecruiterUsername">用户名</label>
+        <input type="text" id="regRecruiterUsername" class="form-control" placeholder="请输入用户名" 
+               [(ngModel)]="recruiterRegister.username">
+      </div>
+      <div class="form-group">
+        <label for="regRecruiterPassword">密码</label>
+        <input type="password" id="regRecruiterPassword" class="form-control" placeholder="请输入密码" 
+               [(ngModel)]="recruiterRegister.password">
+      </div>
+      <div class="form-group">
+        <label for="regRecruiterConfirm">确认密码</label>
+        <input type="password" id="regRecruiterConfirm" class="form-control" placeholder="请再次输入密码" 
+               [(ngModel)]="recruiterRegister.confirmPassword">
+      </div>
+      <div class="form-group">
+        <label for="regRecruiterEmail">电子邮箱</label>
+        <input type="email" id="regRecruiterEmail" class="form-control" placeholder="请输入电子邮箱" 
+               [(ngModel)]="recruiterRegister.email">
+      </div>
+      <div class="form-group">
+        <label for="regCompany">公司名称</label>
+        <input type="text" id="regCompany" class="form-control" placeholder="请输入公司名称" 
+               [(ngModel)]="recruiterRegister.company">
+      </div>
+      <button class="btn btn-primary btn-block" (click)="register('recruiter')">注册</button>
+      <div class="login-links">
+        <span class="login-link" (click)="goToPage('login')">返回登录</span>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- 忘记密码页面 -->
+<div class="login-container" *ngIf="currentPage === 'forgot'">
+  <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="请输入注册时使用的电子邮箱" 
+             [(ngModel)]="forgotPasswordEmail">
+    </div>
+    <button class="btn btn-primary btn-block" (click)="forgotPassword()">发送重置链接</button>
+    <div class="login-links">
+      <span class="login-link" (click)="goToPage('login')">返回登录</span>
+    </div>
+  </div>
+</div>
+
+<!-- 主界面 - 应聘者 -->
+<div class="container" *ngIf="currentPage === 'candidate'">
+  <!-- 左侧导航 -->
+  <div class="sidebar">
+    <div class="logo">
+      <i class="fas fa-user-tie"></i>
+      <span>应聘者中心</span>
+    </div>
+    <div class="nav-menu">
+      <div class="nav-item" [class.active]="activeCandidatePage === 'jobs'" (click)="switchCandidatePage('jobs')">
+        <i class="fas fa-briefcase"></i>
+        <span>工作机会</span>
+      </div>
+      <div class="nav-item" [class.active]="activeCandidatePage === 'resume'" (click)="switchCandidatePage('resume')">
+        <i class="fas fa-file-alt"></i>
+        <span>简历分析</span>
+      </div>
+      <div class="nav-item" [class.active]="activeCandidatePage === 'interview'" (click)="switchCandidatePage('interview')">
+        <i class="fas fa-video"></i>
+        <span>视频面试</span>
+      </div>
+      <div class="nav-item" [class.active]="activeCandidatePage === 'records'" (click)="switchCandidatePage('records')">
+        <i class="fas fa-history"></i>
+        <span>面试记录</span>
+      </div>
+      <div class="nav-item" [class.active]="activeCandidatePage === 'profile'" (click)="switchCandidatePage('profile')">
+        <i class="fas fa-user"></i>
+        <span>个人中心</span>
+      </div>
+      <div class="nav-item" [class.active]="activeCandidatePage === 'settings'" (click)="switchCandidatePage('settings')">
+        <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="搜索工作职位、公司..." 
+               [(ngModel)]="jobSearchKeyword" (keyup.enter)="searchJobs()">
+        <button class="search-btn" (click)="searchJobs()">
+          <i class="fas fa-search"></i>
+        </button>
+        <span class="search-advanced" (click)="toggleCandidateFilters()">高级筛选</span>
+      </div>
+      <div class="search-filters" [class.active]="showCandidateFilters">
+        <div class="filter-row">
+          <div class="filter-group">
+            <label for="jobTypeFilter">职位类型</label>
+            <select id="jobTypeFilter" class="filter-select" [(ngModel)]="jobFilters.type">
+              <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" [(ngModel)]="jobFilters.location">
+              <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" [(ngModel)]="jobFilters.salary">
+              <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" [(ngModel)]="jobFilters.experience">
+              <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" (click)="resetJobFilters()">重置</button>
+          <button class="btn btn-primary" (click)="applyJobFilters()">应用筛选</button>
+        </div>
+      </div>
+      <div class="user-info">
+        <div class="user-dropdown">
+          <div class="avatar" (click)="toggleUserDropdown()">{{ currentUser?.name?.charAt(0) || '?' }}</div>
+          <div class="dropdown-menu" [class.show]="showUserDropdown">
+            <div class="dropdown-item" (click)="switchCandidatePage('profile'); toggleUserDropdown()">
+              <i class="fas fa-user"></i> 个人中心
+            </div>
+            <div class="dropdown-item" (click)="switchCandidatePage('settings'); toggleUserDropdown()">
+              <i class="fas fa-cog"></i> 系统设置
+            </div>
+            <div class="dropdown-divider"></div>
+            <div class="dropdown-item" (click)="logout()">
+              <i class="fas fa-sign-out-alt"></i> 退出登录
+            </div>
+          </div>
+        </div>
+        <div>
+          <div style="font-weight: 500;">{{ currentUser?.name }}</div>
+          <div style="font-size: 12px; color: #64748b;">应聘者</div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- 工作机会页面 -->
+    <div class="content-area" *ngIf="activeCandidatePage === 'jobs'">
+      <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">
+          <span class="history-tag" *ngFor="let tag of searchHistory" (click)="applySearchTag(tag)">{{ tag }}</span>
+        </div>
+      </div>
+      
+      <!-- 热门搜索 -->
+      <div class="hot-search">
+        <div class="history-title">热门搜索</div>
+        <div>
+          <div class="hot-item" *ngFor="let item of hotSearches; let i = index">
+            <div class="hot-rank" [ngClass]="{
+              'rank-1': i === 0,
+              'rank-2': i === 1,
+              'rank-3': i === 2
+            }">{{ i + 1 }}</div>
+            <div class="hot-content">{{ item.term }}</div>
+            <div class="hot-count">{{ item.count }}次</div>
+          </div>
+        </div>
+      </div>
+      
+      <div class="card-grid">
+        <div class="card" *ngFor="let job of filteredJobs" (click)="showJobDetail(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">
+            <span class="card-tag" *ngFor="let skill of job.skills.slice(0, 3)">{{ skill }}</span>
+            <span class="card-tag" *ngIf="job.skills.length > 3">+{{ job.skills.length - 3 }}</span>
+          </div>
+          <div class="card-footer">
+            <span class="card-match">匹配度: {{ job.match }}%</span>
+            <button class="card-btn">申请职位</button>
+          </div>
+        </div>
+        
+        <div class="no-results" *ngIf="filteredJobs.length === 0">
+          <i class="fas fa-search"></i>
+          <h3>没有找到匹配的工作</h3>
+          <p>尝试使用不同的关键词或调整筛选条件</p>
+        </div>
+      </div>
+    </div>
+    
+    <!-- 简历分析页面 -->
+    <div class="content-area" *ngIf="activeCandidatePage === 'resume'">
+      <!-- 简历表单内容 -->
+      <!-- 其他页面内容 -->
+    </div>
+    
+    <!-- 其他页面内容... -->
+    
+  </div>
+</div>
+
+<!-- 主界面 - 招聘者 -->
+<div class="container" *ngIf="currentPage === 'recruiter'">
+  <!-- 招聘者界面内容 -->
+</div>
+
+<!-- 模态框 -->
+<div class="modal-overlay" *ngIf="showJobModal" (click)="hideJobModal()">
+  <div class="modal-content" (click)="$event.stopPropagation()">
+    <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="例如: 高级产品经理" [(ngModel)]="newJob.title">
+    </div>
+    
+    <div class="form-group">
+      <label for="jobType">职位类型</label>
+      <select id="jobType" class="form-control" [(ngModel)]="newJob.type">
+        <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="例如: 产品部" [(ngModel)]="newJob.department">
+    </div>
+    
+    <div class="form-group">
+      <label for="jobLocation">工作地点</label>
+      <input type="text" id="jobLocation" class="form-control" placeholder="例如: 北京" [(ngModel)]="newJob.location">
+    </div>
+    
+    <div class="form-group">
+      <label for="jobSalary">薪资范围</label>
+      <input type="text" id="jobSalary" class="form-control" placeholder="例如: 15k-30k" [(ngModel)]="newJob.salary">
+    </div>
+    
+    <div class="form-group">
+      <label for="jobDescription">职位描述</label>
+      <textarea id="jobDescription" class="form-control" rows="5" placeholder="请输入职位描述和工作内容" 
+                [(ngModel)]="newJob.description"></textarea>
+    </div>
+    
+    <div class="form-group">
+      <label for="jobRequirements">任职要求</label>
+      <textarea id="jobRequirements" class="form-control" rows="5" placeholder="请输入任职要求和技能要求" 
+                [(ngModel)]="newJob.requirements"></textarea>
+    </div>
+    
+    <div class="modal-buttons">
+      <button class="modal-btn modal-btn-cancel" (click)="hideJobModal()">
+        取消
+      </button>
+      <button class="modal-btn modal-btn-confirm" (click)="addNewJob()">
+        发布职位
+      </button>
+    </div>
+  </div>
+</div>

+ 314 - 0
interview-web/src/app/app.component.ts

@@ -0,0 +1,314 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent implements OnInit {
+  // 页面状态
+  currentPage: 'login' | 'register' | 'forgot' | 'candidate' | 'recruiter' = 'login';
+  activeLoginTab: 'candidate' | 'recruiter' = 'candidate';
+  activeRegisterTab: 'candidate' | 'recruiter' = 'candidate';
+  activeCandidatePage: 'jobs' | 'resume' | 'interview' | 'records' | 'profile' | 'settings' = 'jobs';
+  activeRecruiterPage: 'candidates' | 'jobs' | 'resume' | 'interview' | 'records' | 'analysis' | 'profile' | 'settings' = 'candidates';
+  
+  // 用户数据
+  currentUser: any = null;
+  showUserDropdown = false;
+  showRecruiterDropdown = false;
+  
+  // 登录表单数据
+  candidateLogin = { username: '', password: '' };
+  recruiterLogin = { username: '', password: '' };
+  
+  // 注册表单数据
+  candidateRegister = { username: '', password: '', confirmPassword: '', email: '' };
+  recruiterRegister = { username: '', password: '', confirmPassword: '', email: '', company: '' };
+  
+  // 忘记密码
+  forgotPasswordEmail = '';
+  
+  // 工作搜索
+  jobSearchKeyword = '';
+  showCandidateFilters = false;
+  jobFilters = { type: '', location: '', salary: '', experience: '' };
+  searchHistory = ['前端开发', '北京', '20k以上', '互联网'];
+  hotSearches = [
+    { term: 'Java开发工程师', count: '1.2万' },
+    { term: '产品经理', count: '9800' },
+    { term: 'UI设计师', count: '8500' },
+    { term: '数据分析师', count: '7200' }
+  ];
+  
+  // 工作数据
+  jobs = [
+    {
+      id: 1,
+      title: "高级产品经理",
+      company: "XX科技公司",
+      location: "北京",
+      salary: "25k-40k",
+      type: "全职",
+      experience: "5年以上",
+      skills: ["产品规划", "用户增长", "数据分析"],
+      description: "负责公司核心产品的规划与设计,主导产品从0到1的开发...",
+      posted: "2023-10-10",
+      match: 82
+    },
+    // 其他工作数据...
+  ];
+  filteredJobs = [...this.jobs];
+  
+  // 候选人数据
+  candidates = [
+    {
+      id: 1,
+      name: "张伟",
+      position: "高级产品经理",
+      experience: "5年",
+      skills: ["产品规划", "用户增长", "数据分析", "Axure", "SQL"],
+      location: "北京",
+      match: 82,
+      resume: "张伟的简历内容..."
+    },
+    // 其他候选人数据...
+  ];
+  filteredCandidates = [...this.candidates];
+  
+  // 职位管理
+  managedJobs = [
+    {
+      id: 1,
+      title: "高级产品经理",
+      department: "产品部",
+      type: "全职",
+      location: "北京",
+      salary: "25k-40k",
+      posted: "2023-10-01",
+      applicants: 12,
+      status: "招聘中"
+    },
+    // 其他管理职位数据...
+  ];
+  showJobModal = false;
+  newJob = {
+    title: '',
+    type: 'fulltime',
+    department: '',
+    location: '',
+    salary: '',
+    description: '',
+    requirements: ''
+  };
+  
+  ngOnInit() {
+    this.filteredJobs = [...this.jobs];
+    this.filteredCandidates = [...this.candidates];
+  }
+  
+  // 导航方法
+  goToPage(page: 'login' | 'register' | 'forgot' | 'candidate' | 'recruiter') {
+    this.currentPage = page;
+  }
+  
+  setActiveLoginTab(tab: 'candidate' | 'recruiter') {
+    this.activeLoginTab = tab;
+  }
+  
+  setActiveRegisterTab(tab: 'candidate' | 'recruiter') {
+    this.activeRegisterTab = tab;
+  }
+  
+  // 登录/注册/忘记密码
+  login(type: 'candidate' | 'recruiter') {
+    const credentials = type === 'candidate' ? this.candidateLogin : this.recruiterLogin;
+    
+    if (!credentials.username || !credentials.password) {
+      alert('请输入用户名和密码');
+      return;
+    }
+    
+    // 模拟登录成功
+    this.currentUser = {
+      username: credentials.username,
+      type: type,
+      name: type === 'candidate' ? '张伟' : '李明',
+      company: type === 'recruiter' ? 'XX科技公司' : null
+    };
+    
+    this.currentPage = type;
+    this.resetForms();
+  }
+  
+  register(type: 'candidate' | 'recruiter') {
+    const form = type === 'candidate' ? this.candidateRegister : this.recruiterRegister;
+    
+    if (!form.username || !form.password || !form.confirmPassword || !form.email) {
+      alert('请填写所有必填字段');
+      return;
+    }
+    
+    if (form.password !== form.confirmPassword) {
+      alert('两次输入的密码不一致');
+      return;
+    }
+    
+    if (type === 'recruiter' && !form.company) {
+      alert('请填写公司名称');
+      return;
+    }
+    
+    alert('注册成功!请登录');
+    this.goToPage('login');
+    this.resetForms();
+  }
+  
+  forgotPassword() {
+    if (!this.forgotPasswordEmail) {
+      alert('请输入电子邮箱');
+      return;
+    }
+    
+    alert(`重置链接已发送至 ${this.forgotPasswordEmail},请查收邮件并按照指示操作`);
+    this.goToPage('login');
+    this.forgotPasswordEmail = '';
+  }
+  
+  logout() {
+    this.currentUser = null;
+    this.currentPage = 'login';
+    this.resetForms();
+  }
+  
+  // 应聘者页面导航
+  switchCandidatePage(page: 'jobs' | 'resume' | 'interview' | 'records' | 'profile' | 'settings') {
+    this.activeCandidatePage = page;
+  }
+  
+  // 招聘者页面导航
+  switchRecruiterPage(page: 'candidates' | 'jobs' | 'resume' | 'interview' | 'records' | 'analysis' | 'profile' | 'settings') {
+    this.activeRecruiterPage = page;
+  }
+  
+  // 搜索功能
+  searchJobs() {
+    if (!this.jobSearchKeyword) {
+      this.filteredJobs = [...this.jobs];
+      return;
+    }
+    
+    const keyword = this.jobSearchKeyword.toLowerCase();
+    this.filteredJobs = this.jobs.filter(job => 
+      job.title.toLowerCase().includes(keyword) || 
+      job.company.toLowerCase().includes(keyword) ||
+      job.skills.some(skill => skill.toLowerCase().includes(keyword))
+    );
+    
+    // 添加到搜索历史
+    if (keyword && !this.searchHistory.includes(keyword)) {
+      this.searchHistory.unshift(keyword);
+      if (this.searchHistory.length > 5) {
+        this.searchHistory.pop();
+      }
+    }
+  }
+  
+  applySearchTag(tag: string) {
+    this.jobSearchKeyword = tag;
+    this.searchJobs();
+  }
+  
+  // 筛选功能
+  toggleCandidateFilters() {
+    this.showCandidateFilters = !this.showCandidateFilters;
+  }
+  
+  applyJobFilters() {
+    let filtered = [...this.jobs];
+    
+    if (this.jobFilters.type) {
+      filtered = filtered.filter(job => {
+        if (this.jobFilters.type === 'fulltime') return job.type === '全职';
+        if (this.jobFilters.type === 'parttime') return job.type === '兼职';
+        if (this.jobFilters.type === 'intern') return job.type === '实习';
+        return true;
+      });
+    }
+    
+    // 其他筛选条件...
+    
+    this.filteredJobs = filtered;
+    this.showCandidateFilters = false;
+  }
+  
+  resetJobFilters() {
+    this.jobFilters = { type: '', location: '', salary: '', experience: '' };
+    this.filteredJobs = [...this.jobs];
+  }
+  
+  // 职位管理
+  showJobModal() {
+    this.showJobModal = true;
+  }
+  
+  hideJobModal() {
+    this.showJobModal = false;
+    this.newJob = {
+      title: '',
+      type: 'fulltime',
+      department: '',
+      location: '',
+      salary: '',
+      description: '',
+      requirements: ''
+    };
+  }
+  
+  addNewJob() {
+    if (!this.newJob.title || !this.newJob.department || !this.newJob.location || !this.newJob.salary) {
+      alert('请填写所有必填字段');
+      return;
+    }
+    
+    const now = new Date();
+    const newJob = {
+      id: this.managedJobs.length + 1,
+      title: this.newJob.title,
+      department: this.newJob.department,
+      type: this.newJob.type === 'fulltime' ? '全职' : this.newJob.type === 'parttime' ? '兼职' : '实习',
+      location: this.newJob.location,
+      salary: this.newJob.salary,
+      posted: `${now.getFullYear()}-${(now.getMonth()+1).toString().padStart(2, '0')}-${now.getDate().toString().padStart(2, '0')}`,
+      applicants: 0,
+      status: "招聘中"
+    };
+    
+    this.managedJobs.push(newJob);
+    this.hideJobModal();
+  }
+  
+  // 其他方法
+  toggleUserDropdown() {
+    this.showUserDropdown = !this.showUserDropdown;
+  }
+  
+  toggleRecruiterDropdown() {
+    this.showRecruiterDropdown = !this.showRecruiterDropdown;
+  }
+  
+  showJobDetail(jobId: number) {
+    const job = this.jobs.find(j => j.id === jobId);
+    if (job) {
+      alert(`职位详情: ${job.title}\n公司: ${job.company}\n地点: ${job.location}\n薪资: ${job.salary}\n描述: ${job.description}`);
+    }
+  }
+  
+  private resetForms() {
+    this.candidateLogin = { username: '', password: '' };
+    this.recruiterLogin = { username: '', password: '' };
+    this.candidateRegister = { username: '', password: '', confirmPassword: '', email: '' };
+    this.recruiterRegister = { username: '', password: '', confirmPassword: '', email: '', company: '' };
+    this.forgotPasswordEmail = '';
+  }
+}

+ 18 - 0
interview-web/src/app/app.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    FormsModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

+ 6 - 5
interview-web/src/index.html

@@ -1,13 +1,14 @@
 <!doctype html>
-<html lang="en">
+<html lang="zh-CN">
 <head>
   <meta charset="utf-8">
-  <title>InterviewWeb</title>
-  <base href="/">
+  <title>智能招聘系统</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css">
 </head>
 <body>
   <app-root></app-root>
+  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
 </body>
-</html>
+</html>

+ 3 - 1
interview-web/src/modules/interview/mobile/page-home/page-home.ts

@@ -2,10 +2,12 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-page-home',
-  imports: [],
+  imports: [RouterModule],
   templateUrl: './page-home.html',
   styleUrl: './page-home.scss'
 })
 export class PageHome {
 
 }
+import { RouterModule } from '@angular/router';
+

+ 195 - 0
interview-web/styles.css

@@ -0,0 +1,195 @@
+/* styles.css - 智能招聘系统全局样式 */
+
+/* 基础样式 */
+:root {
+  --primary: #2563eb;
+  --secondary: #f59e0b;
+  --dark: #1e293b;
+  --light: #f8fafc;
+  --success: #10b981;
+  --danger: #ef4444;
+  --warning: #f97316;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
+  background-color: #f1f5f9;
+  color: var(--dark);
+  line-height: 1.6;
+}
+
+/* 通用样式 */
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+button {
+  cursor: pointer;
+}
+
+/* 卡片样式 */
+.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;
+}
+
+.card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
+}
+
+/* 按钮样式 */
+.btn {
+  padding: 12px;
+  border: none;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 500;
+  transition: all 0.2s;
+}
+
+.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;
+}
+
+/* 表单控件样式 */
+.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;
+}
+
+/* 布局样式 */
+.container {
+  display: flex;
+  min-height: 100vh;
+  padding: 20px;
+  gap: 20px;
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+.sidebar {
+  width: 240px;
+  background: white;
+  border-radius: 12px;
+  padding: 20px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+}
+
+.main-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .container {
+    flex-direction: column;
+    padding: 10px;
+  }
+  
+  .sidebar {
+    width: 100%;
+  }
+  
+  .form-row {
+    flex-direction: column;
+  }
+}
+
+/* 动画效果 */
+.animate {
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.fade-in {
+  animation-name: fadeIn;
+}
+
+/* 工具类 */
+.text-primary {
+  color: var(--primary);
+}
+
+.text-center {
+  text-align: center;
+}
+
+.mt-2 {
+  margin-top: 8px;
+}
+
+.mb-4 {
+  margin-bottom: 16px;
+}
+
+.p-4 {
+  padding: 16px;
+}
+
+/* ECharts 容器 */
+.chart-container {
+  width: 100%;
+  height: 400px;
+}

برخی فایل ها در این مقایسه diff نمایش داده نمی شوند زیرا تعداد فایل ها بسیار زیاد است