编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>爱思智创 - 接单人工作台</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .login-container {
            width: 100%;
            max-width: 420px;
            padding: 40px;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
        }
        
        .login-logo {
            text-align: center;
            margin-bottom: 40px;
        }
        
        .login-logo h1 {
            font-size: 28px;
            color: #333;
            margin-bottom: 8px;
        }
        
        .login-logo p {
            font-size: 14px;
            color: #999;
        }
        
        .login-form {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        .form-group {
            position: relative;
        }
        
        .form-group label {
            display: block;
            font-size: 14px;
            color: #666;
            margin-bottom: 8px;
        }
        
        .form-group input {
            width: 100%;
            padding: 14px 16px;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            font-size: 14px;
            transition: border-color 0.3s;
        }
        
        .form-group input:focus {
            outline: none;
            border-color: #667eea;
        }
        
        .login-btn {
            width: 100%;
            padding: 14px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #fff;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        
        .login-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
        }
        
        .login-footer {
            margin-top: 30px;
            text-align: center;
            font-size: 12px;
            color: #999;
        }
        
        .main-container {
            display: none;
            width: 100%;
            min-height: 100vh;
            background: #f5f7fa;
        }
        
        .main-container.active {
            display: flex;
        }
        
        .sidebar {
            width: 260px;
            background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
            min-height: 100vh;
            position: fixed;
            left: 0;
            top: 0;
            z-index: 100;
            transition: transform 0.3s;
        }
        
        .sidebar-header {
            padding: 24px 20px;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        
        .sidebar-logo {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .sidebar-logo-icon {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .sidebar-logo-icon svg {
            width: 24px;
            height: 24px;
            fill: #fff;
        }
        
        .sidebar-logo h2 {
            color: #fff;
            font-size: 18px;
            font-weight: 600;
        }
        
        .sidebar-logo span {
            display: block;
            font-size: 11px;
            color: rgba(255,255,255,0.5);
            margin-top: 2px;
        }
        
        .sidebar-nav {
            padding: 20px 0;
            max-height: calc(100vh - 88px);
            overflow-y: auto;
        }
        
        .nav-section {
            margin-bottom: 8px;
        }
        
        .nav-section-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
            font-size: 11px;
            color: rgba(255,255,255,0.4);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 8px;
            cursor: pointer;
            transition: color 0.2s;
        }
        
        .nav-section-title:hover {
            color: rgba(255,255,255,0.7);
        }
        
        .nav-section-title .arrow {
            transition: transform 0.3s;
            font-size: 10px;
        }
        
        .nav-section-title.collapsed .arrow {
            transform: rotate(-90deg);
        }
        
        .nav-section.collapsed .nav-item {
            display: none;
        }
        
        .nav-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 20px;
            color: rgba(255,255,255,0.7);
            text-decoration: none;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s;
            border-left: 3px solid transparent;
        }
        
        .nav-item:hover {
            background: rgba(255,255,255,0.05);
            color: #fff;
        }
        
        .nav-item.active {
            background: rgba(102, 126, 234, 0.2);
            color: #667eea;
            border-left-color: #667eea;
        }
        
        .nav-item svg {
            width: 20px;
            height: 20px;
            fill: rgba(255,255,255,0.7);
            flex-shrink: 0;
        }
        
        .nav-item.active svg {
            fill: #667eea;
        }
        
        .nav-item .badge {
            margin-left: auto;
            background: #ff4757;
            color: #fff;
            font-size: 11px;
            padding: 2px 8px;
            border-radius: 10px;
        }
        
        .main-content {
            flex: 1;
            margin-left: 260px;
            min-height: 100vh;
        }
        
        .topbar {
            height: 70px;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 30px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            position: sticky;
            top: 0;
            z-index: 50;
        }
        
        .topbar-left {
            display: flex;
            align-items: center;
            gap: 20px;
        }
        
        .toggle-sidebar {
            width: 40px;
            height: 40px;
            background: #f5f7fa;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .toggle-sidebar svg {
            width: 20px;
            height: 20px;
            fill: #666;
        }
        
        .search-box {
            display: flex;
            align-items: center;
            background: #f5f7fa;
            border-radius: 8px;
            padding: 0 16px;
            width: 300px;
        }
        
        .search-box input {
            flex: 1;
            border: none;
            background: transparent;
            padding: 12px 0;
            font-size: 14px;
            outline: none;
        }
        
        .search-box svg {
            width: 18px;
            height: 18px;
            fill: #999;
        }
        
        .topbar-right {
            display: flex;
            align-items: center;
            gap: 20px;
        }
        
        .topbar-item {
            position: relative;
            cursor: pointer;
        }
        
        .topbar-item svg {
            width: 22px;
            height: 22px;
            fill: #666;
        }
        
        .topbar-item .count {
            position: absolute;
            top: -6px;
            right: -6px;
            background: #ff4757;
            color: #fff;
            font-size: 10px;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .user-info {
            display: flex;
            align-items: center;
            gap: 12px;
            cursor: pointer;
            padding: 8px 12px;
            border-radius: 8px;
            transition: background 0.2s;
        }
        
        .user-info:hover {
            background: #f5f7fa;
        }
        
        .user-avatar {
            width: 36px;
            height: 36px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-weight: 600;
        }
        
        .user-details {
            display: flex;
            flex-direction: column;
        }
        
        .user-name {
            font-size: 14px;
            font-weight: 600;
            color: #333;
        }
        
        .user-role {
            font-size: 11px;
            color: #27ae60;
        }
        
        .content-area {
            padding: 30px;
        }
        
        .page-header {
            margin-bottom: 30px;
        }
        
        .page-title {
            font-size: 24px;
            font-weight: 600;
            color: #333;
            margin-bottom: 8px;
        }
        
        .page-breadcrumb {
            font-size: 14px;
            color: #999;
        }
        
        .page-breadcrumb span {
            color: #667eea;
        }
        
        .dashboard-cards {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
            margin-bottom: 30px;
        }
        
        .dashboard-card {
            background: #fff;
            border-radius: 12px;
            padding: 24px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        
        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }
        
        .card-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .card-icon svg {
            width: 24px;
            height: 24px;
        }
        
        .card-icon.blue { background: rgba(102, 126, 234, 0.1); }
        .card-icon.green { background: rgba(39, 174, 96, 0.1); }
        .card-icon.orange { background: rgba(255, 165, 0, 0.1); }
        .card-icon.red { background: rgba(255, 71, 87, 0.1); }
        
        .card-trend {
            font-size: 12px;
            padding: 4px 8px;
            border-radius: 4px;
        }
        
        .card-trend.up {
            background: rgba(39, 174, 96, 0.1);
            color: #27ae60;
        }
        
        .card-trend.down {
            background: rgba(255, 71, 87, 0.1);
            color: #ff4757;
        }
        
        .card-value {
            font-size: 28px;
            font-weight: 700;
            color: #333;
            margin-bottom: 4px;
        }
        
        .card-label {
            font-size: 14px;
            color: #999;
        }
        
        .quick-actions {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 16px;
            margin-bottom: 30px;
        }
        
        .quick-action-item {
            background: #fff;
            border-radius: 12px;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .quick-action-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        
        .quick-action-icon {
            width: 48px;
            height: 48px;
            margin: 0 auto 12px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .quick-action-icon svg {
            width: 24px;
            height: 24px;
        }
        
        .quick-action-name {
            font-size: 14px;
            font-weight: 500;
            color: #333;
        }
        
        .tasks-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .task-card {
            background: #fff;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            transition: all 0.2s;
        }
        
        .task-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.1);
        }
        
        .task-card-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 16px;
        }
        
        .task-type {
            padding: 4px 10px;
            background: rgba(102, 126, 234, 0.1);
            color: #667eea;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
        }
        
        .task-price {
            font-size: 20px;
            font-weight: 700;
            color: #27ae60;
        }
        
        .task-title {
            font-size: 15px;
            font-weight: 600;
            color: #333;
            margin-bottom: 12px;
            line-height: 1.4;
        }
        
        .task-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 16px;
        }
        
        .task-tag {
            padding: 4px 8px;
            background: #f5f7fa;
            border-radius: 4px;
            font-size: 11px;
            color: #666;
        }
        
        .task-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 16px;
            border-top: 1px solid #f0f0f0;
        }
        
        .task-info {
            font-size: 12px;
            color: #999;
        }
        
        .task-btn {
            padding: 8px 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #fff;
            border: none;
            border-radius: 6px;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .task-btn:hover {
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
        }
        
        .my-tasks-table {
            background: #fff;
            border-radius: 12px;
            padding: 24px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        
        .table-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .table-title {
            font-size: 18px;
            font-weight: 600;
            color: #333;
        }
        
        .table-tabs {
            display: flex;
            gap: 8px;
        }
        
        .table-tab {
            padding: 8px 16px;
            font-size: 13px;
            border-radius: 6px;
            cursor: pointer;
            background: #f5f7fa;
            color: #666;
            border: none;
        }
        
        .table-tab.active {
            background: #667eea;
            color: #fff;
        }
        
        .task-list-table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .task-list-table th {
            text-align: left;
            padding: 14px 16px;
            font-size: 13px;
            color: #999;
            font-weight: 500;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .task-list-table td {
            padding: 16px;
            font-size: 14px;
            color: #666;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .status {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
        }
        
        .status.pending {
            background: rgba(255, 165, 0, 0.1);
            color: #ffa500;
        }
        
        .status.progress {
            background: rgba(102, 126, 234, 0.1);
            color: #667eea;
        }
        
        .status.completed {
            background: rgba(39, 174, 96, 0.1);
            color: #27ae60;
        }
        
        .status.waiting {
            background: rgba(155, 89, 182, 0.1);
            color: #9b59b6;
        }
        
        .two-column-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
        }
        
        .chart-card {
            background: #fff;
            border-radius: 12px;
            padding: 24px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        
        .chart-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .chart-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
        }
        
        .chart-tabs {
            display: flex;
            gap: 8px;
        }
        
        .chart-tab {
            padding: 6px 12px;
            font-size: 12px;
            border-radius: 4px;
            cursor: pointer;
            background: #f5f7fa;
            color: #666;
            border: none;
        }
        
        .chart-tab.active {
            background: #667eea;
            color: #fff;
        }
        
        .notification-list {
            max-height: 300px;
            overflow-y: auto;
        }
        
        .notification-item {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 14px 0;
            border-bottom: 1px solid #f0f0f0;
            cursor: pointer;
            transition: background 0.2s;
        }
        
        .notification-item:hover {
            background: #f9fafb;
        }
        
.notification-item:last-child {
            border-bottom: none;
        }
        
        .notification-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        
        .notification-icon svg {
            width: 20px;
            height: 20px;
        }
        
        .notification-content {
            flex: 1;
        }
        
        .notification-title {
            font-size: 14px;
            font-weight: 500;
            color: #333;
            margin-bottom: 4px;
        }
        
        .notification-desc {
            font-size: 12px;
            color: #999;
            margin-bottom: 4px;
        }
        
        .notification-time {
            font-size: 11px;
            color: #ccc;
        }
        
        .notification-dot {
            width: 8px;
            height: 8px;
            background: #ff4757;
            border-radius: 50%;
            flex-shrink: 0;
            margin-top: 6px;
        }
        
        .notification-dot.read {
            background: transparent;
        }
        
        .wallet-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 12px;
            padding: 24px;
            color: #fff;
        }
        
        .wallet-balance {
            font-size: 14px;
            opacity: 0.8;
            margin-bottom: 8px;
        }
        
        .wallet-amount {
            font-size: 36px;
            font-weight: 700;
            margin-bottom: 20px;
        }
        
        .wallet-actions {
            display: flex;
            gap: 12px;
        }
        
        .wallet-btn {
            flex: 1;
            padding: 12px;
            background: rgba(255,255,255,0.2);
            color: #fff;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            cursor: pointer;
            transition: background 0.2s;
        }
        
        .wallet-btn:hover {
            background: rgba(255,255,255,0.3);
        }
        
        .work-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }
        
        .work-card {
            background: #fff;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            transition: all 0.2s;
        }
        
        .work-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.1);
        }
        
        .work-image {
            height: 140px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .work-image svg {
            width: 60px;
            height: 60px;
            fill: rgba(255,255,255,0.3);
        }
        
        .work-content {
            padding: 16px;
        }
        
        .work-title {
            font-size: 14px;
            font-weight: 600;
            color: #333;
            margin-bottom: 8px;
        }
        
        .work-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .work-price {
            font-size: 16px;
            font-weight: 700;
            color: #27ae60;
        }
        
        .work-sales {
            font-size: 12px;
            color: #999;
        }
        
        .portfolio-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
        }
        
        .portfolio-card {
            background: #fff;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            transition: all 0.3s;
        }
        
        .portfolio-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 30px rgba(0,0,0,0.12);
        }
        
        .portfolio-image {
            height: 180px;
            position: relative;
            overflow: hidden;
        }
        
        .portfolio-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s;
        }
        
        .portfolio-card:hover .portfolio-overlay {
            opacity: 1;
        }
        
        .portfolio-overlay-btn {
            padding: 10px 20px;
            background: #fff;
            color: #333;
            border: none;
            border-radius: 6px;
            font-size: 14px;
            cursor: pointer;
            margin: 4px;
        }
        
        .portfolio-content {
            padding: 20px;
        }
        
        .portfolio-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin-bottom: 8px;
        }
        
        .portfolio-desc {
            font-size: 13px;
            color: #666;
            margin-bottom: 12px;
            line-height: 1.5;
        }
        
        .portfolio-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        
        .portfolio-tag {
            padding: 4px 10px;
            background: #f5f7fa;
            border-radius: 4px;
            font-size: 11px;
            color: #666;
        }
        
        .portfolio-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px solid #f0f0f0;
        }
        
        .portfolio-views, .portfolio-likes {
            font-size: 12px;
            color: #999;
        }
        
        .profile-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 12px;
            padding: 40px;
            color: #fff;
            margin-bottom: 24px;
        }
        
        .profile-info {
            display: flex;
            align-items: center;
            gap: 24px;
        }
        
        .profile-avatar-large {
            width: 100px;
            height: 100px;
            background: rgba(255,255,255,0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            font-weight: 600;
            border: 3px solid rgba(255,255,255,0.3);
        }
        
        .profile-details h2 {
            font-size: 24px;
            margin-bottom: 4px;
        }
        
        .profile-tag {
            display: inline-block;
            padding: 4px 12px;
            background: rgba(255,255,255,0.2);
            border-radius: 20px;
            font-size: 12px;
            margin-left: 12px;
        }
        
        .profile-desc {
            font-size: 14px;
            opacity: 0.9;
            margin-top: 8px;
        }
        
        .profile-stats-row {
            display: flex;
            gap: 40px;
            margin-top: 24px;
        }
        
        .profile-stat-item {
            text-align: center;
        }
        
        .profile-stat-value {
            font-size: 28px;
            font-weight: 700;
        }
        
        .profile-stat-label {
            font-size: 13px;
            opacity: 0.8;
        }
        
        .skill-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .skill-tag {
            padding: 6px 14px;
            background: rgba(255,255,255,0.2);
            border-radius: 20px;
            font-size: 13px;
        }
        
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }
        
        .modal-overlay.show {
            display: flex;
        }
        
        .modal {
            background: #fff;
            border-radius: 12px;
            width: 100%;
            max-width: 500px;
            max-height: 90vh;
            overflow-y: auto;
        }
        
        .modal-header {
            padding: 20px 24px;
            border-bottom: 1px solid #f0f0f0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .modal-title {
            font-size: 18px;
            font-weight: 600;
            color: #333;
        }
        
        .modal-close {
            width: 32px;
            height: 32px;
            border: none;
            background: #f5f7fa;
            border-radius: 8px;
            cursor: pointer;
            font-size: 18px;
            color: #666;
        }
        
        .modal-body {
            padding: 24px;
        }
        
        .modal-footer {
            padding: 16px 24px;
            border-top: 1px solid #f0f0f0;
            display: flex;
            justify-content: flex-end;
            gap: 12px;
        }
        
        .btn {
            padding: 10px 24px;
            border-radius: 8px;
            font-size: 14px;
            cursor: pointer;
            border: none;
            transition: all 0.2s;
        }
        
        .btn-default {
            background: #f5f7fa;
            color: #666;
        }
        
        .btn-default:hover {
            background: #e8eaed;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #fff;
        }
        
        .btn-primary:hover {
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
        }
        
        .user-dropdown {
            position: absolute;
            top: 100%;
            right: 0;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
            min-width: 180px;
            display: none;
            z-index: 100;
        }
        
        .user-dropdown.show {
            display: block;
        }
        
        .dropdown-item {
            padding: 12px 20px;
            font-size: 14px;
            color: #666;
            cursor: pointer;
            transition: background 0.2s;
        }
        
        .dropdown-item:hover {
            background: #f5f7fa;
        }
        
        .dropdown-divider {
            height: 1px;
            background: #f0f0f0;
        }
        
        .todo-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 16px;
            background: #f9fafb;
            border-radius: 8px;
        }
        
        .signin-card {
            background: #fff;
            border-radius: 12px;
            padding: 24px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            text-align: center;
        }
        
        .signin-header {
            margin-bottom: 20px;
        }
        
        .signin-days {
            display: flex;
            justify-content: center;
            gap: 16px;
            margin-bottom: 20px;
        }
        
        .signin-day {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f5f7fa;
            color: #999;
            font-size: 13px;
        }
        
        .signin-day.checked {
            background: #27ae60;
            color: #fff;
        }
        
        .signin-day.today {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #fff;
        }
        
        .signin-btn {
            padding: 12px 40px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #fff;
            border: none;
            border-radius: 8px;
            font-size: 15px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .signin-btn:hover {
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
        }
        
        .signin-btn:disabled {
            background: #ccc;
            cursor: not-allowed;
        }
        
        .ai-tools-section {
            margin-bottom: 30px;
        }
        
        .section-title {
            font-size: 18px;
            font-weight: 600;
            color: #333;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .section-title svg {
            width: 24px;
            height: 24px;
            fill: #667eea;
        }
        
        .ai-tools-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 20px;
        }
        
        .ai-tool-card {
            background: #fff;
            border-radius: 12px;
            padding: 24px 16px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
            border: 2px solid transparent;
        }
        
        .ai-tool-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            border-color: #667eea;
        }
        
        .ai-tool-icon {
            width: 64px;
            height: 64px;
            margin: 0 auto 16px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .ai-tool-icon svg {
            width: 32px;
            height: 32px;
        }
        
        .ai-tool-name {
            font-size: 15px;
            font-weight: 600;
            color: #333;
            margin-bottom: 6px;
        }
        
        .ai-tool-desc {
            font-size: 12px;
            color: #999;
            line-height: 1.4;
        }
        
        .ai-tool-tag {
            display: inline-block;
            padding: 2px 8px;
            background: rgba(102, 126, 234, 0.1);
            color: #667eea;
            border-radius: 4px;
            font-size: 11px;
            margin-top: 10px;
        }
        
        .ai-tool-tag.popular {
            background: rgba(255, 71, 87, 0.1);
            color: #ff4757;
        }
        
        .ai-tool-tag.new {
            background: rgba(39, 174, 96, 0.1);
            color: #27ae60;
        }
        
        .software-section {
            margin-top: 30px;
        }
        
        .software-grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 16px;
        }
        
        .software-card {
            background: #fff;
            border-radius: 12px;
            padding: 20px 12px;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .software-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.08);
        }
        
        .software-icon {
            width: 48px;
            height: 48px;
            margin: 0 auto 12px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
        }
        
        .software-name {
            font-size: 13px;
            font-weight: 500;
            color: #333;
        }
        
        .table-action {
            font-size: 13px;
            color: #667eea;
            cursor: pointer;
        }
        
        .table-action:hover {
            text-decoration: underline;
        }
        
        @media (max-width: 1200px) {
            .dashboard-cards, .tasks-grid, .work-grid, .portfolio-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .ai-tools-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        
        @media (max-width: 768px) {
            .sidebar {
                transform: translateX(-100%);
            }
            .sidebar.show {
                transform: translateX(0);
            }
            .main-content {
                margin-left: 0;
            }
            .dashboard-cards, .tasks-grid, .work-grid, .portfolio-grid, .ai-tools-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <svg style="display: none;">
        <symbol id="icon-home" viewBox="0 0 24 24">
            <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
        </symbol>
        <symbol id="icon-task" viewBox="0 0 24 24">
            <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/>
        </symbol>
        <symbol id="icon-document" viewBox="0 0 24 24">
            <path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/>
        </symbol>
        <symbol id="icon-user" viewBox="0 0 24 24">
            <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
        </symbol>
        <symbol id="icon-notification" viewBox="0 0 24 24">
            <path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/>
        </symbol>
        <symbol id="icon-settings" viewBox="0 0 24 24">
            <path d="M19.14 12.94c.04-.31.06-.63.06-.94 0-.31-.02-.63-.06-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.04.31-.06.63-.06.94s.02.63.06.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/>
        </symbol>
        <symbol id="icon-coin" viewBox="0 0 24 24">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1.41 16.09V20h-2.67v-1.93c-1.71-.36-3.16-1.46-3.27-3.4h1.96c.11 1.08.88 1.94 2.01 1.94.92 0 1.69-.57 1.69-1.37 0-.62-.41-1.21-1.38-1.5-1.21-.37-2.99-.9-2.99-3.03C6.84 7.57 9.07 6 12 6c2.17 0 3.12 1.11 3.33 2.69h-1.96c-.13-.92-.9-1.59-1.95-1.59-1.04 0-1.79.6-1.79 1.47 0 .83.73 1.27 2.11 1.82 1.59.65 2.99 1.61 2.99 3.61-.01 1.93-1.44 2.96-3.39 2.99z"/>
        </symbol>
        <symbol id="icon-work" viewBox="0 0 24 24">
            <path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14zM9 7h6v2H9zm0 4h6v2H9zm0 4h6v2H9z"/>
        </symbol>
        <symbol id="icon-calendar" viewBox="0 0 24 24">
            <path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM9 10H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm-8 4H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2z"/>
        </symbol>
        <symbol id="icon-menu" viewBox="0 0 24 24">
            <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
        </symbol>
        <symbol id="icon-search" viewBox="0 0 24 24">
            <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
        </symbol>
        <symbol id="icon-dashboard" viewBox="0 0 24 24">
            <path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/>
        </symbol>
        <symbol id="icon-wallet" viewBox="0 0 24 24">
            <path d="M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/>
        </symbol>
        <symbol id="icon-ai" viewBox="0 0 24 24">
            <path d="M21 10.12h-6.78l2.74-2.82c-2.73-2.7-7.15-2.8-9.88-.1-2.73 2.71-2.73 7.08 0 9.79s7.15 2.71 9.88 0C18.32 15.65 19 14.08 19 12.1h2c0 1.98-.88 4.55-2.64 6.29-3.51 3.48-9.21 3.48-12.72 0-3.5-3.47-3.53-9.11-.02-12.58s9.14-3.47 12.65 0L21 3v7.12zM12.5 8v4.25l3.5 2.08-.72 1.21L11 13V8h1.5z"/>
        </symbol>
        <symbol id="icon-video" viewBox="0 0 24 24">
            <path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"/>
        </symbol>
        <symbol id="icon-image" viewBox="0 0 24 24">
            <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
        </symbol>
        <symbol id="icon-text" viewBox="0 0 24 24">
            <path d="M2.5 4v3h5v12h3V7h5V4h-13zm19 5h-9v3h3v7h3v-7h3V9z"/>
        </symbol>
        <symbol id="icon-audio" viewBox="0 0 24 24">
            <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>
        </symbol>
        <symbol id="icon-translate" viewBox="0 0 24 24">
            <path d="M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"/>
        </symbol>
        <symbol id="icon-creative" viewBox="0 0 24 24">
            <path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/>
        </symbol>
        <symbol id="icon-tool" viewBox="0 0 24 24">
            <path d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"/>
        </symbol>
        <symbol id="icon-folder" viewBox="0 0 24 24">
            <path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/>
        </symbol>
        <symbol id="icon-team" viewBox="0 0 24 24">
            <path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/>
        </symbol>
        <symbol id="icon-share" viewBox="0 0 24 24">
            <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/>
        </symbol>
    </svg>

    <div class="login-container" id="loginPage">
        <div class="login-logo">
            <h1>爱思智创</h1>
            <p>接单人工作台</p>
        </div>
        <form class="login-form" id="loginForm">
            <div class="form-group">
                <label>账号</label>
                <input type="text" id="username" placeholder="请输入账号" required>
            </div>
            <div class="form-group">
                <label>密码</label>
                <input type="password" id="password" placeholder="请输入密码" required>
            </div>
            <button type="submit" class="login-btn">登录</button>
        </form>
        <div class="login-footer">
            <p>爱思智创 © 2024 版权所有</p>
        </div>
    </div>

    <div class="main-container" id="mainContainer">
        <aside class="sidebar" id="sidebar">
            <div class="sidebar-header">
                <div class="sidebar-logo">
                    <div class="sidebar-logo-icon">
                        <svg><use href="#icon-dashboard"/></svg>
                    </div>
                    <h2>爱思智创<span>接单人工作台</span></h2>
                </div>
            </div>
            <nav class="sidebar-nav">
                <div class="nav-section">
                    <div class="nav-section-title" onclick="toggleSection(this)">
                        <span>工作台</span>
                        <span class="arrow">▼</span>
                    </div>
                    <div class="nav-item active" data-page="dashboard">
                        <svg><use href="#icon-home"/></svg>
                        <span>首页面板</span>
                    </div>
                </div>
                <div class="nav-section">
                    <div class="nav-section-title" onclick="toggleSection(this)">
                        <span>任务中心</span>
                        <span class="arrow">▼</span>
                    </div>
                    <div class="nav-item" data-page="taskHall">
                        <svg><use href="#icon-task"/></svg>
                        <span>任务大厅</span>
                        <span class="badge">12</span>
                    </div>
                    <div class="nav-item" data-page="myTasks">
                        <svg><use href="#icon-document"/></svg>
                        <span>我的任务</span>
                    </div>
                </div>
                <div class="nav-section">
                    <div class="nav-section-title" onclick="toggleSection(this)">
                        <span>AI工具箱</span>
                        <span class="arrow">▼</span>
                    </div>
                    <div class="nav-item" data-page="aiTools">
                        <svg><use href="#icon-ai"/></svg>
                        <span>AI工具集</span>
                        <span class="badge" style="background: #27ae60;">新</span>
                    </div>
                    <div class="nav-item" data-page="software">
                        <svg><use href="#icon-tool"/></svg>
                        <span>软件工具</span>
                    </div>
                </div>
                <div class="nav-section">
                    <div class="nav-section-title" onclick="toggleSection(this)">
                        <span>作品中心</span>
                        <span class="arrow">▼</span>
                    </div>
                    <div class="nav-item" data-page="myWorks">
                        <svg><use href="#icon-work"/></svg>
                        <span>我的作品</span>
                    </div>
                    <div class="nav-item" data-page="portfolio">
                        <svg><use href="#icon-folder"/></svg>
                        <span>我的作品集</span>
                    </div>
                    <div class="nav-item" data-page="workMarket">
                        <svg><use href="#icon-dashboard"/></svg>
                        <span>作品市场</span>
                    </div>
                </div>
                <div class="nav-section">
                    <div class="nav-section-title" onclick="toggleSection(this)">
                        <span>钱包</span>
                        <span class="arrow">▼</span>
                    </div>
                    <div class="nav-item" data-page="wallet">
                        <svg><use href="#icon-coin"/></svg>
                        <span>我的钱包</span>
                    </div>
                    <div class="nav-item" data-page="transaction">
                        <svg><use href="#icon-document"/></svg>
                        <span>交易记录</span>
                    </div>
                </div>
                <div class="nav-section">
                    <div class="nav-section-title" onclick="toggleSection(this)">
                        <span>个人中心</span>
                        <span class="arrow">▼</span>
                    </div>
                    <div class="nav-item" data-page="profile">
                        <svg><use href="#icon-user"/></svg>
                        <span>个人资料</span>
                    </div>
                    <div class="nav-item" data-page="teamManage">
                        <svg><use href="#icon-team"/></svg>
                        <span>团队管理</span>
                    </div>
                    <div class="nav-item" data-page="revenueShare">
                        <svg><use href="#icon-share"/></svg>
                        <span>分成管理</span>
                    </div>
                    <div class="nav-item" data-page="messages">
                        <svg><use href="#icon-notification"/></svg>
                        <span>消息中心</span>
                        <span class="badge">5</span>
                    </div>
                    <div class="nav-item" data-page="settings">
                        <svg><use href="#icon-settings"/></svg>
                        <span>账号设置</span>
                    </div>
                </div>
            </nav>
        </aside>

        <main class="main-content">
            <header class="topbar">
                <div class="topbar-left">
                    <button class="toggle-sidebar" id="toggleSidebar">
                        <svg><use href="#icon-menu"/></svg>
                    </button>
                    <div class="search-box">
                        <input type="text" placeholder="搜索任务、作品...">
                        <svg><use href="#icon-search"/></svg>
                    </div>
                </div>
                <div class="topbar-right">
                    <div class="topbar-item" id="notificationBtn">
                        <svg><use href="#icon-notification"/></svg>
                        <span class="count">5</span>
                    </div>
                    <div class="topbar-item" id="messageBtn">
                        <svg><use href="#icon-notification"/></svg>
                        <span class="count">3</span>
                    </div>
                    <div class="user-info" id="userInfoBtn">
                        <div class="user-avatar">张</div>
                        <div class="user-details">
                            <span class="user-name">张明</span>
                            <span class="user-role">高级接单员</span>
                        </div>
                        <div class="user-dropdown" id="userDropdown">
                            <div class="dropdown-item" onclick="showPage('profile')">个人资料</div>
                            <div class="dropdown-item" onclick="showPage('settings')">账号设置</div>
                            <div class="dropdown-divider"></div>
                            <div class="dropdown-item" id="logoutBtn">退出登录</div>
                        </div>
                    </div>
                </div>
            </header>

            <div class="content-area">
                <!-- Dashboard Section -->
                <div class="page-section" id="dashboardSection">
                    <div class="page-header">
                        <h1 class="page-title">工作台首页</h1>
                        <div class="page-breadcrumb">
                            <span>首页</span> / 工作台
                        </div>
                    </div>

                    <div class="dashboard-cards">
                        <div class="dashboard-card">
                            <div class="card-header">
                                <div class="card-icon blue">
                                    <svg style="fill: #667eea;"><use href="#icon-task"/></svg>
                                </div>
                                <span class="card-trend up">+3</span>
                            </div>
                            <div class="card-value">28</div>
                            <div class="card-label">进行中任务</div>
                        </div>
                        <div class="dashboard-card">
                            <div class="card-header">
                                <div class="card-icon green">
                                    <svg style="fill: #27ae60;"><use href="#icon-coin"/></svg>
                                </div>
                                <span class="card-trend up">+15.2%</span>
                            </div>
                            <div class="card-value">¥8,560</div>
                            <div class="card-label">本月收入</div>
                        </div>
                        <div class="dashboard-card">
                            <div class="card-header">
                                <div class="card-icon orange">
                                    <svg style="fill: #ffa500;"><use href="#icon-work"/></svg>
                                </div>
                                <span class="card-trend up">+5</span>
                            </div>
                            <div class="card-value">156</div>
                            <div class="card-label">已发布作品</div>
                        </div>
                        <div class="dashboard-card">
                            <div class="card-header">
                                <div class="card-icon red">
                                    <svg style="fill: #ff4757;"><use href="#icon-notification"/></svg>
                                </div>
                                <span class="card-trend up">+2</span>
                            </div>
                            <div class="card-value">3</div>
                            <div class="card-label">待验收任务</div>
                        </div>
                    </div>

                    <div class="quick-actions">
                        <div class="quick-action-item" data-page="taskHall">
                            <div class="quick-action-icon" style="background: rgba(102, 126, 234, 0.1);">
                                <svg style="fill: #667eea;"><use href="#icon-task"/></svg>
                            </div>
                            <div class="quick-action-name">接新任务</div>
                        </div>
                        <div class="quick-action-item" data-page="myTasks">
                            <div class="quick-action-icon" style="background: rgba(39, 174, 96, 0.1);">
                                <svg style="fill: #27ae60;"><use href="#icon-document"/></svg>
                            </div>
                            <div class="quick-action-name">我的任务</div>
                        </div>
                        <div class="quick-action-item" onclick="openSignInModal()">
                            <div class="quick-action-icon" style="background: rgba(255, 165, 0, 0.1);">
                                <svg style="fill: #ffa500;"><use href="#icon-calendar"/></svg>
                            </div>
                            <div class="quick-action-name">每日签到</div>
                        </div>
                        <div class="quick-action-item" data-page="wallet">
                            <div class="quick-action-icon" style="background: rgba(255, 71, 87, 0.1);">
                                <svg style="fill: #ff4757;"><use href="#icon-coin"/></svg>
                            </div>
                            <div class="quick-action-name">查看钱包</div>
                        </div>
                        <div class="quick-action-item" data-page="myWorks">
                            <div class="quick-action-icon" style="background: rgba(155, 89, 182, 0.1);">
                                <svg style="fill: #9b59b6;"><use href="#icon-work"/></svg>
                            </div>
                            <div class="quick-action-name">发布作品</div>
                        </div>
                    </div>

                    <div class="ai-tools-section">
                        <div class="section-title">
                            <svg><use href="#icon-ai"/></svg>
                            AI工具箱
                        </div>
                        <div class="ai-tools-grid">
                            <div class="ai-tool-card" onclick="showPage('aiTools')">
                                <div class="ai-tool-icon" style="background: rgba(102, 126, 234, 0.1);">
                                    <svg style="fill: #667eea;"><use href="#icon-video"/></svg>
                                </div>
                                <div class="ai-tool-name">AI视频剪辑</div>
                                <div class="ai-tool-desc">智能剪辑、自动配音</div>
                                <span class="ai-tool-tag popular">热门</span>
                            </div>
                            <div class="ai-tool-card" onclick="showPage('aiTools')">
                                <div class="ai-tool-icon" style="background: rgba(39, 174, 96, 0.1);">
                                    <svg style="fill: #27ae60;"><use href="#icon-image"/></svg>
                                </div>
                                <div class="ai-tool-name">AI图片生成</div>
                                <div class="ai-tool-desc">文生图、图生图</div>
                                <span class="ai-tool-tag new">新增</span>
                            </div>
                            <div class="ai-tool-card" onclick="showPage('aiTools')">
                                <div class="ai-tool-icon" style="background: rgba(255, 165, 0, 0.1);">
                                    <svg style="fill: #ffa500;"><use href="#icon-text"/></svg>
                                </div>
                                <div class="ai-tool-name">AI文案写作</div>
                                <div class="ai-tool-desc">营销文案、内容创作</div>
                                <span class="ai-tool-tag popular">热门</span>
                            </div>
                            <div class="ai-tool-card" onclick="showPage('aiTools')">
                                <div class="ai-tool-icon" style="background: rgba(255, 71, 87, 0.1);">
                                    <svg style="fill: #ff4757;"><use href="#icon-audio"/></svg>
                                </div>
                                <div class="ai-tool-name">AI音频处理</div>
                                <div class="ai-tool-desc">配音、变声、降噪</div>
                                <span class="ai-tool-tag">常用</span>
                            </div>
                            <div class="ai-tool-card" onclick="showPage('aiTools')">
                                <div class="ai-tool-icon" style="background: rgba(155, 89, 182, 0.1);">
                                    <svg style="fill: #9b59b6;"><use href="#icon-translate"/></svg>
                                </div>
                                <div class="ai-tool-name">AI翻译助手</div>
                                <div class="ai-tool-desc">多语言互译</div>
                                <span class="ai-tool-tag">工具</span>
                            </div>
                        </div>
                    </div>

                    <div class="software-section">
                        <div class="section-title">
                            <svg style="fill: #666;"><use href="#icon-tool"/></svg>
                            常用软件工具
                        </div>
                        <div class="software-grid">
                            <div class="software-card" onclick="showPage('software')">
                                <div class="software-icon" style="background: #9999FF; color: #fff;">Pr</div>
                                <div class="software-name">Premiere</div>
                            </div>
                            <div class="software-card" onclick="showPage('software')">
                                <div class="software-icon" style="background: #31A8FF; color: #fff;">Ae</div>
                                <div class="software-name">After Effects</div>
                            </div>
                            <div class="software-card" onclick="showPage('software')">
                                <div class="software-icon" style="background: #FF9A00; color: #fff;">Ps</div>
                                <div class="software-name">Photoshop</div>
                            </div>
                            <div class="software-card" onclick="showPage('software')">
                                <div class="software-icon" style="background: #00A8E8; color: #fff;">Au</div>
                                <div class="software-name">Audition</div>
                            </div>
                            <div class="software-card" onclick="showPage('software')">
                                <div class="software-icon" style="background: #00CC66; color: #fff;">Ai</div>
                                <div class="software-name">Illustrator</div>
                            </div>
                            <div class="software-card" onclick="showPage('software')">
                                <div class="software-icon" style="background: #FF0000; color: #fff;">Fcp</div>
                                <div class="software-name">Final Cut</div>
                            </div>
                        </div>
                    </div>

                    <div class="page-header" style="margin-top: 20px;">
                        <h3 class="table-title">热门任务</h3>
                    </div>
                    <div class="tasks-grid">
                        <div class="task-card">
                            <div class="task-card-header">
                                <span class="task-type">视频剪辑</span>
                                <span class="task-price">¥300-500</span>
                            </div>
                            <div class="task-title">电商产品宣传片剪辑制作</div>
                            <div class="task-tags">
                                <span class="task-tag">需要PR</span>
                                <span class="task-tag">1-3天交付</span>
                                <span class="task-tag">高需求</span>
                            </div>
                            <div class="task-footer">
                                <span class="task-info">12人已接 · 剩余3个名额</span>
                                <button class="task-btn" onclick="acceptTask(1)">立即接单</button>
                            </div>
                        </div>
                        <div class="task-card">
                            <div class="task-card-header">
                                <span class="task-type">图片设计</span>
                                <span class="task-price">¥150-250</span>
                            </div>
                            <div class="task-title">企业LOGO设计及VI延展</div>
                            <div class="task-tags">
                                <span class="task-tag">需要AI工具</span>
                                <span class="task-tag">3-5天交付</span>
                                <span class="task-tag">急招</span>
                            </div>
                            <div class="task-footer">
                                <span class="task-info">5人已接 · 剩余1个名额</span>
                                <button class="task-btn" onclick="acceptTask(2)">立即接单</button>
                            </div>
                        </div>
                        <div class="task-card">
                            <div class="task-card-header">
                                <span class="task-type">文案撰写</span>
                                <span class="task-price">¥100-200</span>
                            </div>
                            <div class="task-title">小红书种草文案写作</div>
                            <div class="task-tags">
                                <span class="task-tag">原创度高</span>
                                <span class="task-tag">1-2天交付</span>
                                <span class="task-tag">新手友好</span>
                            </div>
                            <div class="task-footer">
                                <span class="task-info">8人已接 · 剩余10个名额</span>
                                <button class="task-btn" onclick="acceptTask(3)">立即接单</button>
                            </div>
                        </div>
                    </div>

                    <div class="two-column-grid" style="margin-top: 30px;">
                        <div class="chart-card">
                            <div class="chart-header">
                                <h3 class="chart-title">我的待办</h3>
<span class="table-action" onclick="showPage('myTasks')">查看全部</span>
                            </div>
                            <div style="display: flex; flex-direction: column; gap: 12px;">
                                <div class="todo-item">
                                    <div style="width: 40px; height: 40px; background: rgba(255, 165, 0, 0.1); border-radius: 8px; display: flex; align-items: center; justify-content: center;">
                                        <svg style="width: 20px; height: 20px; fill: #ffa500;"><use href="#icon-task"/></svg>
                                    </div>
                                    <div style="flex: 1;">
                                        <div style="font-size: 14px; font-weight: 500; color: #333;">待提交：电商宣传片</div>
                                        <div style="font-size: 12px; color: #999;">截止时间：今日 18:00</div>
                                    </div>
                                    <span class="status pending">待提交</span>
                                </div>
                                <div class="todo-item">
                                    <div style="width: 40px; height: 40px; background: rgba(155, 89, 182, 0.1); border-radius: 8px; display: flex; align-items: center; justify-content: center;">
                                        <svg style="width: 20px; height: 20px; fill: #9b59b6;"><use href="#icon-task"/></svg>
                                    </div>
                                    <div style="flex: 1;">
                                        <div style="font-size: 14px; font-weight: 500; color: #333;">待验收：LOGO设计</div>
                                        <div style="font-size: 12px; color: #999;">等待雇主验收中</div>
                                    </div>
                                    <span class="status waiting">等待验收</span>
                                </div>
</div>
                        </div>
                        <div class="chart-card">
                            <div class="chart-header">
                                <h3 class="chart-title">最新通知</h3>
                                <span class="table-action" onclick="showPage('messages')">查看全部</span>
                            </div>
                            <div class="notification-list">
                                <div class="notification-item">
                                    <div class="notification-icon" style="background: rgba(39, 174, 96, 0.1);">
                                        <svg style="fill: #27ae60;"><use href="#icon-coin"/></svg>
                                    </div>
                                    <div class="notification-content">
                                        <div class="notification-title">任务验收通过</div>
                                        <div class="notification-desc">您的"产品宣传片"任务已通过验收，获得收入 ¥450</div>
                                        <div class="notification-time">10分钟前</div>
                                    </div>
                                    <div class="notification-dot"></div>
                                </div>
                                <div class="notification-item">
                                    <div class="notification-icon" style="background: rgba(255, 165, 0, 0.1);">
                                        <svg style="fill: #ffa500;"><use href="#icon-task"/></svg>
                                    </div>
                                    <div class="notification-content">
                                        <div class="notification-title">新任务发布提醒</div>
                                        <div class="notification-desc">您关注的设计类任务已发布，奖励翻倍</div>
                                        <div class="notification-time">30分钟前</div>
                                    </div>
                                    <div class="notification-dot"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Task Hall Section -->
                <div class="page-section" id="taskHallSection" style="display: none;">
                    <div class="page-header">
                        <h1 class="page-title">任务大厅</h1>
                        <div class="page-breadcrumb">
                            <span>首页</span> / <span>任务中心</span> / 任务大厅
                        </div>
                    </div>
                    <div style="background: #fff; border-radius: 12px; padding: 20px; margin-bottom: 24px; display: flex; gap: 16px; align-items: center;">
                        <div style="display: flex; gap: 8px;">
                            <button class="chart-tab active">全部</button>
                            <button class="chart-tab">视频剪辑</button>
                            <button class="chart-tab">图片设计</button>
                            <button class="chart-tab">文案撰写</button>
                        </div>
                        <div style="flex: 1;"></div>
                        <select style="padding: 8px 16px; border: 1px solid #e0e0e0; border-radius: 6px; font-size: 13px;">
                            <option>综合排序</option>
                            <option>价格最高</option>
                            <option>最新发布</option>
                        </select>
                    </div>
                    <div class="tasks-grid">
                        <div class="task-card">
                            <div class="task-card-header">
                                <span class="task-type">视频剪辑</span>
                                <span class="task-price">¥300-500</span>
                            </div>
                            <div class="task-title">电商产品宣传片剪辑制作</div>
                            <div class="task-tags">
                                <span class="task-tag">需要PR</span>
                                <span class="task-tag">1-3天交付</span>
                            </div>
                            <div class="task-footer">
                                <span class="task-info">12人已接 · 剩余3个名额</span>
                                <button class="task-btn" onclick="acceptTask(1)">立即接单</button>
                            </div>
                        </div>
                        <div class="task-card">
                            <div class="task-card-header">
                                <span class="task-type">图片设计</span>
                                <span class="task-price">¥150-250</span>
                            </div>
                            <div class="task-title">企业LOGO设计及VI延展</div>
                            <div class="task-tags">
                                <span class="task-tag">需要AI工具</span>
                                <span class="task-tag">3-5天交付</span>
                            </div>
                            <div class="task-footer">
                                <span class="task-info">5人已接 · 剩余1个名额</span>
                                <button class="task-btn" onclick="acceptTask(2)">立即接单</button>
                            </div>
                        </div>
                        <div class="task-card">
                            <div class="task-card-header">
                                <span class="task-type">文案撰写</span>
                                <span class="task-price">¥100-200</span>
                            </div>
                            <div class="task-title">小红书种草文案写作</div>
                            <div class="task-tags">
                                <span class="task-tag">原创度高</span>
                                <span class="task-tag">1-2天交付</span>
                            </div>
                            <div class="task-footer">
                                <span class="task-info">8人已接 · 剩余10个名额</span>
                                <button class="task-btn" onclick="acceptTask(3)">立即接单</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- My Tasks Section -->
                <div class="page-section" id="myTasksSection" style="display: none;">
                    <div class="page-header">
                        <h1 class="page-title">我的任务</h1>
                        <div class="page-breadcrumb">
                            <span>首页</span> / <span>任务中心</span> / 我的任务
                        </div>
                    </div>
                    <div class="my-tasks-table">
                        <div class="table-header">
                            <h3 class="table-title">任务列表</h3>
                            <div class="table-tabs">
                                <button class="table-tab active">全部任务</button>
                                <button class="table-tab">进行中</button>
                                <button class="table-tab">待验收</button>
                            </div>
                        </div>
                        <table class="task-list-table">
                            <thead>
                                <tr>
                                    <th>任务名称</th>
                                    <th>雇主</th>
                                    <th>报酬</th>
                                    <th>截止时间</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td style="font-weight: 500; color: #333;">电商产品宣传片剪辑</td>
                                    <td>李经理</td>
                                    <td style="color: #27ae60; font-weight: 600;">¥450</td>
                                    <td>2024-01-20 18:00</td>
                                    <td><span class="status progress">进行中</span></td>
                                    <td><button class="task-btn" style="padding: 6px 12px; font-size: 12px;">查看详情</button></td>
                                </tr>
                                <tr>
                                    <td style="font-weight: 500; color: #333;">企业LOGO设计</td>
                                    <td>王总</td>
                                    <td style="color: #27ae60; font-weight: 600;">¥800</td>
                                    <td>2024-01-18 12:00</td>
                                    <td><span class="status waiting">等待验收</span></td>
                                    <td><button class="task-btn" style="padding: 6px 12px; font-size: 12px;">查看详情</button></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- My Works Section -->
                <div class="page-section" id="myWorksSection" style="display: none;">
                    <div class="page-header">
                        <h1 class="page-title">我的作品</h1>
                        <div class="page-breadcrumb">
                            <span>首页</span> / <span>作品中心</span> / 我的作品
                        </div>
                    </div>
                    <div class="table-header" style="background: #fff; border-radius: 12px; padding: 20px; margin-bottom: 24px;">
                        <h3 class="table-title">作品管理</h3>
                        <button class="btn btn-primary" onclick="openPublishModal()">发布新作品</button>
                    </div>
                    <div class="work-grid">
                        <div class="work-card">
                            <div class="work-image">
                                <svg><use href="#icon-work"/></svg>
                            </div>
                            <div class="work-content">
                                <div class="work-title">原创宣传片模板</div>
                                <div class="work-meta">
                                    <span class="work-price">¥99</span>
                                    <span class="work-sales">已售 28份</span>
                                </div>
                            </div>
                        </div>
                        <div class="work-card">
                            <div class="work-image" style="background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);">
                                <svg><use href="#icon-task"/></svg>
                            </div>
                            <div class="work-content">
                                <div class="work-title">企业VI设计方案</div>
                                <div class="work-meta">
                                    <span class="work-price">¥199</span>
                                    <span class="work-sales">已售 15份</span>
                                </div>
                            </div>
                        </div>
                        <div class="work-card">
                            <div class="work-image" style="background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);">
                                <svg><use href="#icon-user"/></svg>
                            </div>
                            <div class="work-content">
                                <div class="work-title">小红书爆款文案集</div>
                                <div class="work-meta">
                                    <span class="work-price">¥49</span>
                                    <span class="work-sales">已售 86份</span>
                                </div>
                            </div>
                        </div>
                        <div class="work-card">
                            <div class="work-image" style="background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);">
                                <svg><use href="#icon-settings"/></svg>
                            </div>
                            <div class="work-content">
                                <div class="work-title">AE动效模板包</div>
                                <div class="work-meta">
                                    <span class="work-price">¥159</span>
                                    <span class="work-sales">已售 42份</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Portfolio Section -->
                <div class="page-section" id="portfolioSection" style="display: none;">
                    <div class="page-header">
                        <h1 class="page-title">我的作品集</h1>
                        <div class="page-breadcrumb">
                            <span>首页</span> / <span>作品中心</span> / 我的作品集
                        </div>
                    </div>
                    <div class="profile-header">
                        <div class="profile-info">
                            <div class="profile-avatar-large">张</div>
                            <div class="profile-details">
                                <h2>张明的作品集</h2>
                                <span class="profile-tag">高级创作者</span>
                            </div>
                        </div>
                        <p class="profile-desc">专注视频剪辑与视觉设计，8年行业经验，擅长电商、短视频、品牌宣传片等各类视频制作</p>
                        <div class="profile-stats-row">
                            <div class="profile-stat-item">
                                <div class="profile-stat-value">156</div>
                                <div class="profile-stat-label">作品数</div>
                            </div>
                            <div class="profile-stat-item">
                                <div class="profile-stat-value">2.8万</div>
                                <div class="profile-stat-label">总浏览</div>
                            </div>
                            <div class="profile-stat-item">
                                <div class="profile-stat-value">1.5万</div>
                                <div class="profile-stat-label">获赞数</div>
                            </div>
                            <div class="profile-stat-item">
                                <div class="profile-stat-value">98%</div>
                                <div class="profile-stat-label">好评率</div>
                            </div>
                        </div>
                        <div class="skill-tags" style="margin-top: 20px;">
                            <span class="skill-tag">Premiere</span>
                            <span class="skill-tag">After Effects</span>
                            <span class="skill-tag">Photoshop</span>
                            <span class="skill-tag">AI视频剪辑</span>
                        </div>
                    </div>
                    <div style="background: #fff; border-radius: 12px; padding: 20px; margin-bottom: 24px;">
                        <div style="display: flex; gap: 8px;">
                            <button class="chart-tab active">全部作品</button>
                            <button class="chart-tab">视频类</button>
                            <button class="chart-tab">图片类</button>
                        </div>
                    </div>
                    <div class="portfolio-grid">
                        <div class="portfolio-card">
                            <div class="portfolio-image" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                                <svg style="width: 60px; height: 60px; fill: rgba(255,255,255,0.5);"><use href="#icon-video"/></svg>
                                <div class="portfolio-overlay">
                                    <button class="portfolio-overlay-btn">预览</button>
                                    <button class="portfolio-overlay-btn">分享</button>
                                </div>
                            </div>
                            <div class="portfolio-content">
                                <div class="portfolio-title">电商产品宣传片模板</div>
                                <div class="portfolio-desc">包含多种风格的产品展示模板</div>
                                <div class="portfolio-tags">
                                    <span class="portfolio-tag">视频模板</span>
                                    <span class="portfolio-tag">电商</span>
                                </div>
                                <div class="portfolio-meta">
                                    <span class="portfolio-views">浏览 2.3k</span>
                                    <span class="portfolio-likes">点赞 456</span>
                                </div>
                            </div>
                        </div>
                        <div class="portfolio-card">
                            <div class="portfolio-image" style="background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);">
                                <svg style="width: 60px; height: 60px; fill: rgba(255,255,255,0.5);"><use href="#icon-image"/></svg>
                                <div class="portfolio-overlay">
                                    <button class="portfolio-overlay-btn">预览</button>
                                    <button class="portfolio-overlay-btn">分享</button>
                                </div>
                            </div>
                            <div class="portfolio-content">
                                <div class="portfolio-title">品牌VI设计方案</div>
                                <div class="portfolio-desc">完整的品牌视觉识别系统</div>
                                <div class="portfolio-tags">
                                    <span class="portfolio-tag">品牌设计</span>
                                    <span class="portfolio-tag">VI</span>
                                </div>
                                <div class="portfolio-meta">
                                    <span class="portfolio-views">浏览 1.8k</span>
                                    <span class="portfolio-likes">点赞 321</span>
                                </div>
                            </div>
                        </div>
                        <div class="portfolio-card">
                            <div class="portfolio-image" style="background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);">
                                <svg style="width: 60px; height: 60px; fill: rgba(255,255,255,0.5);"><use href="#icon-text"/></svg>
                                <div class="portfolio-overlay">
                                    <button class="portfolio-overlay-btn">预览</button>
                                    <button class="portfolio-overlay-btn">分享</button>
                                </div>
                            </div>
                            <div class="portfolio-content">
                                <div class="portfolio-title">小红书爆款文案合集</div>
                                <div class="portfolio-desc">50篇高互动率的种草文案模板</div>
                                <div class="portfolio-tags">
                                    <span class="portfolio-tag">文案</span>
                                    <span class="portfolio-tag">种草</span>
                                </div>
                                <div class="portfolio-meta">
                                    <span class="portfolio-views">浏览 5.2k</span>
                                    <span class="portfolio-likes">点赞 892</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Wallet Section -->
                <div class="page-section" id="walletSection" style="display: none;">
                    <div class="page-header">
                        <h1 class="page-title">我的钱包</h1>
                        <div class="page-breadcrumb">
                            <span>首页</span> / <span>钱包</span> / 我的钱包
                        </div>
                    </div>
                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px;">
                        <div>
                            <div class="wallet-card" style="margin-bottom: 20px;">
                                <div class="wallet-balance">账户余额</div>
                                <div class="wallet-amount">¥8,560.00</div>
                                <div class="wallet-actions">
                                    <button class="wallet-btn" onclick="openWithdrawModal()">提现</button>
                                    <button class="wallet-btn" onclick="showPage('transaction')">查看明细</button>
                                </div>
                            </div>
                            <div class="dashboard-card">
                                <div class="card-header">
                                    <div class="card-icon green">
                                        <svg style="fill: #27ae60;"><use href="#icon-coin"/></svg>
                                    </div>
                                </div>
                                <div class="card-value" style="color: #27ae60;">+¥1,250</div>
                                <div class="card-label">本月收入</div>
                            </div>
                        </div>
                        <div>
                            <div class="signin-card">
                                <div class="signin-header">
                                    <h3 style="font-size: 16px; color: #333; margin-bottom: 8px;">每日签到</h3>
                                    <p style="font-size: 13px; color: #999;">连续签到可获得额外奖励</p>
                                </div>
                                <div class="signin-days">
                                    <div class="signin-day checked">一</div>
                                    <div class="signin-day checked">二</div>
                                    <div class="signin-day checked">三</div>
                                    <div class="signin-day checked">四</div>
                                    <div class="signin-day checked">五</div>
                                    <div class="signin-day checked">六</div>
                                    <div class="signin-day today">日</div>
                                </div>
                                <button class="signin-btn" id="signinBtn" onclick="signIn()">立即签到</button>
                                <p style="font-size: 12px; color: #27ae60; margin-top: 12px;">今日签到可获得 ¥2 奖励</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Transaction Section -->
                <div class="page-section" id="transactionSection" style="display: none;">
                    <div class="page-header">
                        <h1 class="page-title">交易记录</h1>
                        <div class="page-breadcrumb">
                            <span>首页</span> / <span>钱包</span> / 交易记录
                        </div>
                    </div>
                    <div class="my-tasks-table">
                        <div class="table-header">
                            <h3 class="table-title">收支明细</h3>
                            <div class="table-tabs">
                                <button class="table-tab active">全部</button>
                                <button class="table-tab">收入</button>
                                <button class="table-tab">支出</button>
                            </div>
                        </div>
                        <table class="task-list-table">
                            <thead>
                                <tr>
                                    <th>时间</th>
                                    <th>类型</th>
                                    <th>说明</th>
                                    <th>金额</th>
                                    <th>状态</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>2024-01-15 14:30</td>
                                    <td>任务收入</td>
                                    <td>电商宣传片剪辑 - 已验收</td>
                                    <td style="color: #27ae60; font-weight: 600;">+¥450</td>
                                    <td><span class="status completed">已完成</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Profile Section -->
                <div class="page-section" id="profileSection" style="display: none;">
                    <div class="page-header">
                        <h1 class="page-title">个人资料</h1>
                        <div class="page-breadcrumb">
                            <span>首页</span> / <span>个人中心</span> / 个人资料
                        </div>
                    </div>
                    <div style="background: #fff; border-radius: 12px; padding: 30px; box-shadow: 0 2px 10px rgba(0,0,0,0.05);">
                        <div style="display: flex; align-items: center; gap: 24px; margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid #f0f0f0;">
                            <div class="user-avatar" style="width: 80px; height: 80px; font-size: 32px;">张</div>
                            <div>
                                <h3 style="font-size: 20px; color: #333; margin-bottom: 4px;">张明</h3>
                                <p style="font-size: 14px; color: #27ae60;">高级接单员</p>
                            </div>
                        </div>
                        <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;">
                            <div>
                                <label style="display: block; font-size: 13px; color: #999; margin-bottom: 8px;">手机号码</label>
                                <div style="padding: 12px 16px; background: #f9fafb; border-radius: 8px; color: #333;">138****8888</div>
                            </div>
                            <div>
                                <label style="display: block; font-size: 13px; color: #999; margin-bottom: 8px;">信誉评分</label>
                                <div style="padding: 12px 16px; background: #f9fafb; border-radius: 8px; color: #27ae60; font-weight: 600;">98分</div>
                            </div>
                        </div>
                        <button class="btn btn-primary" style="margin-top: 30px;">编辑资料</button>
                    </div>
                </div>

                <!-- Messages Section -->
                <div class="page-section" id="messagesSection" style="display: none;">
                    <div class="page-header">
                        <h1 class="page-title">消息中心</h1>
                        <div class="page-breadcrumb">
                            <span>首页</span> / <span>个人中心</span> / 消息中心
                        </div>
                    </div>
                    <div style="background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 2px 10px rgba(0,0,0,0.05);">
                        <div class="notification-list">
                            <div class="notification-item">
                                <div class="notification-icon" style="background: rgba(39, 174, 96, 0.1);">
                                    <svg style="fill: #27ae60;"><use href="#icon-coin"/></svg>
                                </div>
                                <div class="notification-content">
                                    <div class="notification-title">任务验收通过</div>
                                    <div class="notification-desc">您的"产品宣传片"任务已通过验收，获得收入 ¥450</div>
                                    <div class="notification-time">10分钟前</div>
                                </div>
                                <div class="notification-dot"></div>
                            </div>
                            <div class="notification-item">
                                <div class="notification-icon" style="background: rgba(255, 165, 0, 0.1);">
                                    <svg style="fill: #ffa500;"><use href="#icon-task"/></svg>
                                </div>
                                <div class="notification-content">
                                    <div class="notification-title">新任务发布提醒</div>
                                    <div class="notification-desc">您关注的设计类任务已发布，奖励翻倍</div>
                                    <div class="notification-time">30分钟前</div>
                                </div>
                                <div class="notification-dot"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Settings Section -->
                <div class="page-section" id="settingsSection" style="display: none;">
                    <div class="page-header">
                        <h1 class="page-title">账号设置</h1>
                        <div class="page-breadcrumb">
                            <span>首页</span> / <span>个人中心</span> / 账号设置
                        </div>
                    </div>
                    <div style="background: #fff; border-radius: 12px; padding: 30px; box-shadow: 0 2px 10px rgba(0,0,0,0.05);">
                        <h3 style="font-size: 16px; color: #333; margin-bottom: 20px;">安全设置</h3>
                        <div style="display: flex; flex-direction: column; gap: 16px;">
                            <div style="display: flex; justify-content: space-between; align-items: center; padding: 16px; background: #f9fafb; border-radius: 8px;">
                                <div>
                                    <div style="font-size: 14px; font-weight: 500; color: #333;">登录密码</div>
                                    <div style="font-size: 12px; color: #999; margin-top: 4px;">定期修改密码可以保护账户安全</div>
                                </div>
                                <button class="btn btn-default">修改密码</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- AI Tools Section -->
                <div class="page-section" id="aiToolsSection" style="display: none;">
                    <div class="page-header">
                        <h1 class="page-title">AI工具集</h1>
                        <div class="page-breadcrumb">
                            <span>首页</span> / <span>AI工具箱</span> / AI工具集
                        </div>
                    </div>
                    <div style="background: #fff; border-radius: 12px; padding: 20px; margin-bottom: 24px;">
                        <div style="display: flex; gap: 8px;">
                            <button class="chart-tab active">全部工具</button>
                            <button class="chart-tab">AI写作</button>
                            <button class="chart-tab">AI图像</button>
                            <button class="chart-tab">AI视频</button>
                        </div>
                    </div>
                    <div class="ai-tools-grid" style="grid-template-columns: repeat(4, 1fr);">
                        <div class="ai-tool-card">
                            <div class="ai-tool-icon" style="background: rgba(102, 126, 234, 0.1);">
                                <svg style="fill: #667eea;"><use href="#icon-video"/></svg>
                            </div>
                            <div class="ai-tool-name">AI视频剪辑</div>
                            <div class="ai-tool-desc">智能识别精彩片段，自动剪辑生成</div>
                            <span class="ai-tool-tag popular">热门</span>
                            <button class="btn btn-primary" style="margin-top: 12px; width: 100%; padding: 8px;">立即使用</button>
                        </div>
                        <div class="ai-tool-card">
                            <div class="ai-tool-icon" style="background: rgba(39, 174, 96, 0.1);">
                                <svg style="fill: #27ae60;"><use href="#icon-image"/></svg>
                            </div>
                            <div class="ai-tool-name">AI图片生成</div>
                            <div class="ai-tool-desc">输入描述词，一键生成精美图片</div>
                            <span class="ai-tool-tag new">新增</span>
                            <button class="btn btn-primary" style="margin-top: 12px; width: 100%; padding: 8px;">立即使用</button>
                        </div>
                        <div class="ai-tool-card">
                            <div class="ai-tool-icon" style="background: rgba(255, 165, 0, 0.1);">
                                <svg style="fill: #ffa500;"><use href="#icon-text"/></svg>
                            </div>
                            <div class="ai-tool-name">AI文案写作</div>
                            <div class="ai-tool-desc">营销文案、种草笔记、小红书爆款</div>
                            <span class="ai-tool-tag popular">热门</span>
                            <button class="btn btn-primary" style="margin-top: 12px; width: 100%; padding: 8px;">立即使用</button>
                        </div>
                        <div class="ai-tool-card">
                            <div class="ai-tool-icon" style="background: rgba(255, 71, 87, 0.1);">
                                <svg style="fill: #ff4757;"><use href="#icon-audio"/></svg>
                            </div>
                            <div class="ai-tool-name">AI音频处理</div>
                            <div class="ai-tool-desc">文字转语音、智能配音、降噪处理</div>
                            <span class="ai-tool-tag">常用</span>
                            <button class="btn btn-primary" style="margin-top: 12px; width: 100%; padding: 8px;">立即使用</button>
                        </div>
                    </div>
                </div>

                <!-- Software Section -->
                <div class="page-section" id="softwareSection" style="display: none;">
                    <div class="page-header">
                        <h1 class="page-title">软件工具</h1>
                        <div class="page-breadcrumb">
                            <span>首页</span> / <span>AI工具箱</span> / 软件工具
                        </div>
                    </div>
                    <div style="background: #fff; border-radius: 12px; padding: 20px; margin-bottom: 24px;">
                        <div style="display: flex; gap: 8px;">
                            <button class="chart-tab active">全部软件</button>
                            <button class="chart-tab">视频剪辑</button>
                            <button class="chart-tab">图像设计</button>
                        </div>
                    </div>
                    <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;">
                        <div style="background: #fff; border-radius: 12px; padding: 24px; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,0.05);">
                            <div style="width: 64px; height: 64px; margin: 0 auto 16px; background: #9999FF; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 24px; font-weight: bold;">Pr</div>
                            <h4 style="font-size: 16px; color: #333; margin-bottom: 8px;">Premiere Pro</h4>
                            <p style="font-size: 12px; color: #999; margin-bottom: 16px;">专业视频剪辑软件</p>
                            <button class="btn btn-default" style="width: 100%;">查看教程</button>
                        </div>
                        <div style="background: #fff; border-radius: 12px; padding: 24px; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,0.05);">
                            <div style="width: 64px; height: 64px; margin: 0 auto 16px; background: #31A8FF; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 24px; font-weight: bold;">Ae</div>
                            <h4 style="font-size: 16px; color: #333; margin-bottom: 8px;">After Effects</h4>
                            <p style="font-size: 12px; color: #999; margin-bottom: 16px;">特效制作与合成</p>
                            <button class="btn btn-default" style="width: 100%;">查看教程</button>
                        </div>
                        <div style="background: #fff; border-radius: 12px; padding: 24px; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,0.05);">
                            <div style="width: 64px; height: 64px; margin: 0 auto 16px; background: #FF9A00; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 24px; font-weight: bold;">Ps</div>
                            <h4 style="font-size: 16px; color: #333; margin-bottom: 8px;">Photoshop</h4>
                            <p style="font-size: 12px; color: #999; margin-bottom: 16px;">图像处理与设计</p>
                            <button class="btn btn-default" style="width: 100%;">查看教程</button>
                        </div>
                        <div style="background: #fff; border-radius: 12px; padding: 24px; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,0.05);">
                            <div style="width: 64px; height: 64px; margin: 0 auto 16px; background: #00A8E8; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 24px; font-weight: bold;">Au</div>
                            <h4 style="font-size: 16px; color: #333; margin-bottom: 8px;">Audition</h4>
                            <p style="font-size: 12px; color: #999; margin-bottom: 16px;">专业音频编辑</p>
                            <button class="btn btn-default" style="width: 100%;">查看教程</button>
                        </div>
                    </div>
                </div>

                <!-- Team Manage Section -->
                <div class="page-section" id="teamManageSection" style="display: none;">
                    <div class="page-header">
                        <h1 class="page-title">团队管理</h1>
                        <div class="page-breadcrumb">
                            <span>首页</span> / <span>个人中心</span> / 团队管理
                        </div>
                    </div>
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
                        <div style="display: flex; gap: 16px;">
                            <div style="background: #fff; padding: 16px 24px; border-radius: 8px; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,0.05);">
                                <div style="font-size: 24px; font-weight: 700; color: #667eea;">5</div>
                                <div style="font-size: 13px; color: #999;">团队成员</div>
                            </div>
                            <div style="background: #fff; padding: 16px 24px; border-radius: 8px; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,0.05);">
                                <div style="font-size: 24px; font-weight: 700; color: #27ae60;">12</div>
                                <div style="font-size: 13px; color: #999;">进行中任务</div>
                            </div>
                            <div style="background: #fff; padding: 16px 24px; border-radius: 8px; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,0.05);">
                                <div style="font-size: 24px; font-weight: 700; color: #ffa500;">¥8,560</div>
                                <div style="font-size: 13px; color: #999;">本月团队收入</div>
                            </div>
                        </div>
                        <button class="btn btn-primary" onclick="alert('邀请成员功能开发中')">邀请成员</button>
                    </div>
                    <div style="background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 2px 10px rgba(0,0,0,0.05);">
                        <div style="margin-bottom: 20px;">
                            <h3 style="font-size: 16px; color: #333;">团队成员</h3>
                        </div>
                        <table class="task-list-table">
                            <thead>
                                <tr>
                                    <th>成员</th>
                                    <th>角色</th>
                                    <th>进行中任务</th>
                                    <th>本月贡献</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td style="display: flex; align-items: center; gap: 12px;">
                                        <div class="user-avatar" style="width: 36px; height: 36px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">张</div>
                                        <span style="font-weight: 500;">张明</span>
                                    </td>
                                    <td><span class="status progress" style="background: rgba(102, 126, 234, 0.1); color: #667eea;">组长</span></td>
                                    <td>3个</td>
                                    <td style="color: #27ae60; font-weight: 600;">¥3,200</td>
                                    <td><span class="status completed">在线</span></td>
                                    <td><span class="table-action">管理</span></td>
                                </tr>
                                <tr>
                                    <td style="display: flex; align-items: center; gap: 12px;">
                                        <div class="user-avatar" style="width: 36px; height: 36px; background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);">王</div>
                                        <span style="font-weight: 500;">王设计</span>
                                    </td>
                                    <td><span class="status pending" style="background: rgba(255, 165, 0, 0.1); color: #ffa500;">成员</span></td>
                                    <td>2个</td>
                                    <td style="color: #27ae60; font-weight: 600;">¥2,100</td>
                                    <td><span class="status completed">在线</span></td>
                                    <td><span class="table-action">管理</span></td>
                                </tr>
                                <tr>
                                    <td style="display: flex; align-items: center; gap: 12px;">
                                        <div class="user-avatar" style="width: 36px; height: 36px; background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);">李</div>
                                        <span style="font-weight: 500;">李文案</span>
                                    </td>
                                    <td><span class="status pending" style="background: rgba(255, 165, 0, 0.1); color: #ffa500;">成员</span></td>
                                    <td>4个</td>
                                    <td style="color: #27ae60; font-weight: 600;">¥1,800</td>
                                    <td><span class="status waiting">离线</span></td>
                                    <td><span class="table-action">管理</span></td>
                                </tr>
                                <tr>
                                    <td style="display: flex; align-items: center; gap: 12px;">
                                        <div class="user-avatar" style="width: 36px; height: 36px; background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);">陈</div>
                                        <span style="font-weight: 500;">陈剪辑</span>
                                    </td>
                                    <td><span class="status pending" style="background: rgba(255, 165, 0, 0.1); color: #ffa500;">成员</span></td>
                                    <td>3个</td>
                                    <td style="color: #27ae60; font-weight: 600;">¥1,460</td>
                                    <td><span class="status completed">在线</span></td>
                                    <td><span class="table-action">管理</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Revenue Share Section -->
                <div class="page-section" id="revenueShareSection" style="display: none;">
                    <div class="page-header">
                        <h1 class="page-title">分成管理</h1>
                        <div class="page-breadcrumb">
                            <span>首页</span> / <span>个人中心</span> / 分成管理
                        </div>
                    </div>
                    <div class="dashboard-cards" style="margin-bottom: 24px;">
                        <div class="dashboard-card">
                            <div class="card-header">
                                <div class="card-icon green">
                                    <svg style="fill: #27ae60;"><use href="#icon-coin"/></svg>
                                </div>
                            </div>
                            <div class="card-value" style="color: #27ae60;">¥8,560</div>
                            <div class="card-label">本月总收入</div>
                        </div>
                        <div class="dashboard-card">
                            <div class="card-header">
                                <div class="card-icon blue">
                                    <svg style="fill: #667eea;"><use href="#icon-team"/></svg>
                                </div>
                            </div>
                            <div class="card-value">¥2,568</div>
                            <div class="card-label">团队分成</div>
                        </div>
                        <div class="dashboard-card">
                            <div class="card-header">
                                <div class="card-icon orange">
                                    <svg style="fill: #ffa500;"><use href="#icon-coin"/></svg>
                                </div>
                            </div>
                            <div class="card-value">¥5,992</div>
                            <div class="card-label">个人所得</div>
                        </div>
                        <div class="dashboard-card">
                            <div class="card-header">
                                <div class="card-icon red">
                                    <svg style="fill: #ff4757;"><use href="#icon-share"/></svg>
                                </div>
                            </div>
                            <div class="card-value">30%</div>
                            <div class="card-label">分成比例</div>
                        </div>
                    </div>
                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px;">
                        <div class="chart-card">
                            <div class="chart-header">
                                <h3 class="chart-title">分成规则设置</h3>
                                <button class="btn btn-default" style="padding: 6px 12px; font-size: 12px;">编辑规则</button>
                            </div>
                            <div style="display: flex; flex-direction: column; gap: 12px;">
                                <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px; background: #f9fafb; border-radius: 8px;">
                                    <span style="color: #333;">组长提取比例</span>
                                    <span style="font-weight: 600; color: #667eea;">30%</span>
                                </div>
                                <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px; background: #f9fafb; border-radius: 8px;">
                                    <span style="color: #333;">成员基础分成</span>
                                    <span style="font-weight: 600; color: #27ae60;">70%</span>
                                </div>
                                <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px; background: #f9fafb; border-radius: 8px;">
                                    <span style="color: #333;">绩效奖励池</span>
                                    <span style="font-weight: 600; color: #ffa500;">10%</span>
                                </div>
                            </div>
                        </div>
                        <div class="chart-card">
                            <div class="chart-header">
                                <h3 class="chart-title">分成记录</h3>
                            </div>
                            <div style="display: flex; flex-direction: column; gap: 12px;">
                                <div style="display: flex; justify-content: space-between; padding: 12px; background: #f9fafb; border-radius: 8px;">
                                    <div>
                                        <div style="font-size: 14px; font-weight: 500; color: #333;">电商宣传片项目</div>
                                        <div style="font-size: 12px; color: #999;">2024-01-15</div>
                                    </div>
                                    <div style="text-align: right;">
                                        <div style="font-weight: 600; color: #27ae60;">+¥450</div>
                                        <div style="font-size: 12px; color: #999;">分成 ¥135</div>
                                    </div>
                                </div>
                                <div style="display: flex; justify-content: space-between; padding: 12px; background: #f9fafb; border-radius: 8px;">
                                    <div>
                                        <div style="font-size: 14px; font-weight: 500; color: #333;">LOGO设计项目</div>
                                        <div style="font-size: 12px; color: #999;">2024-01-14</div>
                                    </div>
                                    <div style="text-align: right;">
                                        <div style="font-weight: 600; color: #27ae60;">+¥280</div>
                                        <div style="font-size: 12px; color: #999;">分成 ¥84</div>
                                    </div>
                                </div>
                                <div style="display: flex; justify-content: space-between; padding: 12px; background: #f9fafb; border-radius: 8px;">
                                    <div>
                                        <div style="font-size: 14px; font-weight: 500; color: #333;">文案撰写项目</div>
                                        <div style="font-size: 12px; color: #999;">2024-01-12</div>
                                    </div>
                                    <div style="text-align: right;">
                                        <div style="font-weight: 600; color: #27ae60;">+¥120</div>
                                        <div style="font-size: 12px; color: #999;">分成 ¥36</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="my-tasks-table">
                        <div class="table-header">
                            <h3 class="table-title">团队分成明细</h3>
                        </div>
                        <table class="task-list-table">
                            <thead>
                                <tr>
                                    <th>项目</th>
                                    <th>成员</th>
                                    <th>任务收入</th>
                                    <th>分成比例</th>
                                    <th>分成金额</th>
                                    <th>结算状态</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td style="font-weight: 500; color: #333;">电商宣传片剪辑</td>
                                    <td>王设计</td>
                                    <td>¥1,500</td>
                                    <td>70%</td>
                                    <td style="color: #27ae60; font-weight: 600;">¥450</td>
                                    <td><span class="status completed">已结算</span></td>
                                </tr>
                                <tr>
                                    <td style="font-weight: 500; color: #333;">LOGO设计</td>
                                    <td>王设计</td>
                                    <td>¥400</td>
                                    <td>70%</td>
                                    <td style="color: #27ae60; font-weight: 600;">¥280</td>
                                    <td><span class="status completed">已结算</span></td>
                                </tr>
                                <tr>
                                    <td style="font-weight: 500; color: #333;">小红书文案</td>
                                    <td>李文案</td>
                                    <td>¥400</td>
                                    <td>70%</td>
                                    <td style="color: #27ae60; font-weight: 600;">¥280</td>
                                    <td><span class="status completed">已结算</span></td>
                                </tr>
                                <tr>
                                    <td style="font-weight: 500; color: #333;">视频剪辑</td>
                                    <td>陈剪辑</td>
                                    <td>¥600</td>
                                    <td>70%</td>
                                    <td style="color: #27ae60; font-weight: 600;">¥420</td>
                                    <td><span class="status progress" style="background: rgba(102, 126, 234, 0.1); color: #667eea;">待结算</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- Accept Task Modal -->
    <div class="modal-overlay" id="acceptModal">
        <div class="modal">
            <div class="modal-header">
                <h3 class="modal-title">确认接单</h3>
                <button class="modal-close" onclick="closeModal('acceptModal')">×</button>
            </div>
            <div class="modal-body" id="acceptModalContent"></div>
            <div class="modal-footer">
                <button class="btn btn-default" onclick="closeModal('acceptModal')">取消</button>
                <button class="btn btn-primary" onclick="confirmAccept()">确认接单</button>
            </div>
        </div>
    </div>

    <!-- Sign In Modal -->
    <div class="modal-overlay" id="signinModal">
        <div class="modal" style="max-width: 400px;">
            <div class="modal-header">
                <h3 class="modal-title">每日签到</h3>
                <button class="modal-close" onclick="closeModal('signinModal')">×</button>
            </div>
            <div class="modal-body" style="text-align: center;">
                <div style="font-size: 48px; margin-bottom: 16px;">🎉</div>
                <h4 style="font-size: 18px; color: #333; margin-bottom: 8px;">签到成功</h4>
                <p style="font-size: 14px; color: #27ae60;">获得 ¥2 奖励，已到账</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" onclick="closeModal('signinModal')" style="width: 100%;">确定</button>
            </div>
        </div>
    </div>

    <script>
        document.getElementById('loginForm').addEventListener('submit', function(e) {
            e.preventDefault();
            document.getElementById('loginPage').style.display = 'none';
            document.getElementById('mainContainer').classList.add('active');
        });

        document.getElementById('logoutBtn').addEventListener('click', function() {
            document.getElementById('mainContainer').classList.remove('active');
            document.getElementById('loginPage').style.display = 'block';
        });

        document.getElementById('toggleSidebar').addEventListener('click', function() {
            document.getElementById('sidebar').classList.toggle('show');
        });

        document.getElementById('userInfoBtn').addEventListener('click', function(e) {
            e.stopPropagation();
            document.getElementById('userDropdown').classList.toggle('show');
        });

        document.addEventListener('click', function() {
            document.getElementById('userDropdown').classList.remove('show');
        });

        document.querySelectorAll('.nav-item').forEach(item => {
            item.addEventListener('click', function() {
                document.querySelectorAll('.nav-item').forEach(i => i.classList.remove('active'));
                this.classList.add('active');
                const page = this.dataset.page;
                showPage(page);
            });
        });

        document.querySelectorAll('.quick-action-item').forEach(item => {
            item.addEventListener('click', function() {
                const page = this.dataset.page;
                if (page) {
                    showPage(page);
                }
            });
        });

        function showPage(page) {
            document.querySelectorAll('.page-section').forEach(section => {
                section.style.display = 'none';
            });
            const pageMap = {
                'dashboard': 'dashboardSection',
                'taskHall': 'taskHallSection',
                'myTasks': 'myTasksSection',
                'myWorks': 'myWorksSection',
                'portfolio': 'portfolioSection',
                'wallet': 'walletSection',
                'transaction': 'transactionSection',
                'profile': 'profileSection',
                'messages': 'messagesSection',
                'settings': 'settingsSection',
                'workMarket': 'workMarketSection',
                'aiTools': 'aiToolsSection',
                'software': 'softwareSection',
                'teamManage': 'teamManageSection',
                'revenueShare': 'revenueShareSection'
            };
            const sectionId = pageMap[page];
            if (sectionId) {
                document.getElementById(sectionId).style.display = 'block';
            }
        }

        let currentTaskId = null;

        function acceptTask(taskId) {
            currentTaskId = taskId;
            const taskData = {
                1: { name: '电商产品宣传片剪辑制作', price: '¥300-500', deadline: '1-3天' },
                2: { name: '企业LOGO设计及VI延展', price: '¥150-250', deadline: '3-5天' },
                3: { name: '小红书种草文案写作', price: '¥100-200', deadline: '1-2天' }
            };
            const task = taskData[taskId];
            if (task) {
                document.getElementById('acceptModalContent').innerHTML = '<div style="text-align: center; margin-bottom: 20px;"><h4 style="font-size: 16px; color: #333; margin-bottom: 16px;">' + task.name + '</h4><div style="display: flex; justify-content: space-around; padding: 16px; background: #f9fafb; border-radius: 8px;"><div><div style="font-size: 12px; color: #999;">报酬</div><div style="font-size: 18px; font-weight: 600; color: #27ae60;">' + task.price + '</div></div><div><div style="font-size: 12px; color: #999;">交付周期</div><div style="font-size: 18px; font-weight: 600; color: #333;">' + task.deadline + '</div></div></div></div><p style="font-size: 13px; color: #666; text-align: center;">确认接受此任务吗？接受后请按时完成交付。</p>';
                document.getElementById('acceptModal').classList.add('show');
            }
        }

        function confirmAccept() {
            closeModal('acceptModal');
            alert('接单成功！请在规定时间内完成任务。');
        }

        function closeModal(modalId) {
            document.getElementById(modalId).classList.remove('show');
        }

        function signIn() {
            document.getElementById('signinModal').classList.add('show');
            document.getElementById('signinBtn').disabled = true;
            document.getElementById('signinBtn').textContent = '已签到';
        }

        function openSignInModal() {
            document.getElementById('signinModal').classList.add('show');
        }

        document.querySelectorAll('.table-tab').forEach(tab => {
            tab.addEventListener('click', function() {
                const parent = this.closest('.table-header');
                parent.querySelectorAll('.table-tab').forEach(t => t.classList.remove('active'));
                this.classList.add('active');
            });
        });

        function toggleSection(title) {
            const section = title.parentElement;
            section.classList.toggle('collapsed');
            title.classList.toggle('collapsed');
        }

        function openPublishModal() {
            alert('发布作品功能开发中...');
        }

        function openWithdrawModal() {
            alert('提现功能开发中...');
        }
    </script>
</body>
</html>