编辑页面

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, #ff6b6b 0%, #ee5a24 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(255, 107, 107, 0.2);
            color: #ff6b6b;
            border-left-color: #ff6b6b;
        }
        
        .nav-item svg {
            width: 20px;
            height: 20px;
            fill: rgba(255,255,255,0.7);
            flex-shrink: 0;
        }
        
        .nav-item.active svg {
            fill: #ff6b6b;
        }
        
        .nav-item .badge {
            margin-left: auto;
            background: #ff4757;
            color: #fff;
            font-size: 11px;
            padding: 2px 8px;
            border-radius: 10px;
        }
        
        .nav-item .badge.green {
            background: #27ae60;
        }
        
        .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, #ff6b6b 0%, #ee5a24 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: #ff6b6b;
        }
        
        .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: #ff6b6b;
        }
        
        .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.red { background: rgba(255, 107, 107, 0.1); }
        .card-icon.green { background: rgba(39, 174, 96, 0.1); }
        .card-icon.orange { background: rgba(255, 165, 0, 0.1); }
        .card-icon.blue { background: rgba(102, 126, 234, 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(255, 107, 107, 0.1);
            color: #ff6b6b;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
        }
        
        .task-status {
            padding: 4px 10px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
        }
        
        .task-status.pending {
            background: rgba(255, 165, 0, 0.1);
            color: #ffa500;
        }
        
        .task-status.progress {
            background: rgba(102, 126, 234, 0.1);
            color: #667eea;
        }
        
        .task-status.completed {
            background: rgba(39, 174, 96, 0.1);
            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, #ff6b6b 0%, #ee5a24 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(255, 107, 107, 0.4);
        }
        
        .task-btn.outline {
            background: transparent;
            border: 1px solid #ff6b6b;
            color: #ff6b6b;
        }
        
        .task-btn.outline:hover {
            background: rgba(255, 107, 107, 0.1);
        }
        
        .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: #ff6b6b;
            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: #ff6b6b;
            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, #ff6b6b 0%, #ee5a24 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: #ff6b6b;
        }
        
        .work-sales {
            font-size: 12px;
            color: #999;
        }
        
        .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: 600px;
            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, #ff6b6b 0%, #ee5a24 100%);
            color: #fff;
        }
        
        .btn-primary:hover {
            box-shadow: 0 4px 15px rgba(255, 107, 107, 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;
        }
        
        .table-action {
            font-size: 13px;
            color: #ff6b6b;
            cursor: pointer;
        }
        
        .table-action:hover {
            text-decoration: underline;
        }
        
        .applicant-item {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 16px;
            background: #f9fafb;
            border-radius: 8px;
            margin-bottom: 12px;
        }
        
        .applicant-avatar {
            width: 48px;
            height: 48px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-weight: 600;
        }
        
        .applicant-info {
            flex: 1;
        }
        
        .applicant-name {
            font-size: 14px;
            font-weight: 600;
            color: #333;
        }
        
        .applicant-rating {
            font-size: 12px;
            color: #f39c12;
        }
        
        .applicant-price {
            font-size: 16px;
            font-weight: 700;
            color: #ff6b6b;
        }
        
        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            margin-bottom: 16px;
        }
        
        .form-group {
            margin-bottom: 16px;
        }
        
        .form-group label {
            display: block;
            font-size: 13px;
            color: #666;
            margin-bottom: 8px;
        }
        
        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 12px 16px;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            font-size: 14px;
            transition: border-color 0.3s;
        }
        
        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: #ff6b6b;
        }
        
        .form-group textarea {
            resize: vertical;
            min-height: 100px;
        }
        
        .todo-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 16px;
            background: #f9fafb;
            border-radius: 8px;
        }
        
        @media (max-width: 1200px) {
            .dashboard-cards, .tasks-grid, .work-grid {
                grid-template-columns: repeat(2, 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 {
                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-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-plus" viewBox="0 0 24 24">
            <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
        </symbol>
        <symbol id="icon-star" viewBox="0 0 24 24">
            <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
        </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-check" viewBox="0 0 24 24">
            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
        </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="publishTask">
                        <svg><use href="#icon-plus"/></svg>
                        <span>发布任务</span>
                        <span class="badge green">新</span>
                    </div>
                    <div class="nav-item" data-page="taskMarket">
                        <svg><use href="#icon-document"/></svg>
                        <span>任务市场</span>
                    </div>
                    <div class="nav-item" data-page="myPublishedTasks">
                        <svg><use href="#icon-task"/></svg>
                        <span>已发布任务</span>
                        <span class="badge">8</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="workers">
                        <svg><use href="#icon-user"/></svg>
                        <span>服务商列表</span>
                    </div>
                    <div class="nav-item" data-page="favorites">
                        <svg><use href="#icon-star"/></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="budget">
                        <svg><use href="#icon-wallet"/></svg>
                        <span>预算管理</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="messages">
                        <svg><use href="#icon-notification"/></svg>
                        <span>消息中心</span>
                        <span class="badge">3</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">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 red">
                                    <svg style="fill: #ff6b6b;"><use href="#icon-task"/></svg>
                                </div>
                                <span class="card-trend up">+2</span>
                            </div>
                            <div class="card-value">8</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-check"/></svg>
                                </div>
                                <span class="card-trend up">+5</span>
                            </div>
                            <div class="card-value">25</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>
                                <span class="card-trend down">-20%</span>
                            </div>
                            <div class="card-value">¥12,580</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-user"/></svg>
                                </div>
                            </div>
                            <div class="card-value">15</div>
                            <div class="card-label">合作服务商</div>
                        </div>
                    </div>

                    <div class="quick-actions">
                        <div class="quick-action-item" data-page="publishTask">
                            <div class="quick-action-icon" style="background: rgba(255, 107, 107, 0.1);">
                                <svg style="fill: #ff6b6b;"><use href="#icon-plus"/></svg>
                            </div>
                            <div class="quick-action-name">发布任务</div>
                        </div>
                        <div class="quick-action-item" data-page="myPublishedTasks">
                            <div class="quick-action-icon" style="background: rgba(39, 174, 96, 0.1);">
                                <svg style="fill: #27ae60;"><use href="#icon-task"/></svg>
                            </div>
                            <div class="quick-action-name">已发布任务</div>
                        </div>
                        <div class="quick-action-item" data-page="workers">
                            <div class="quick-action-icon" style="background: rgba(102, 126, 234, 0.1);">
                                <svg style="fill: #667eea;"><use href="#icon-user"/></svg>
                            </div>
                            <div class="quick-action-name">找服务商</div>
                        </div>
                        <div class="quick-action-item" data-page="budget">
                            <div class="quick-action-icon" style="background: rgba(255, 165, 0, 0.1);">
                                <svg style="fill: #ffa500;"><use href="#icon-wallet"/></svg>
                            </div>
                            <div class="quick-action-name">预算管理</div>
                        </div>
                        <div class="quick-action-item" data-page="messages">
                            <div class="quick-action-icon" style="background: rgba(155, 89, 182, 0.1);">
                                <svg style="fill: #9b59b6;"><use href="#icon-notification"/></svg>
                            </div>
                            <div class="quick-action-name">消息中心</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-status progress">进行中</span>
                            </div>
                            <div class="task-title">电商产品宣传片剪辑制作</div>
                            <div class="task-tags">
                                <span class="task-tag">预算 ¥500</span>
                                <span class="task-tag">2人已接</span>
                            </div>
                            <div class="task-footer">
                                <span class="task-info">截止 2024-01-20</span>
                                <button class="task-btn" onclick="showTaskDetail(1)">查看详情</button>
                            </div>
                        </div>
                        <div class="task-card">
                            <div class="task-card-header">
                                <span class="task-type">图片设计</span>
                                <span class="task-status pending">待验收</span>
                            </div>
                            <div class="task-title">企业LOGO设计</div>
                            <div class="task-tags">
                                <span class="task-tag">预算 ¥800</span>
                                <span class="task-tag">1人已提交</span>
                            </div>
                            <div class="task-footer">
                                <span class="task-info">等待验收</span>
                                <button class="task-btn" onclick="showTaskDetail(2)">立即验收</button>
                            </div>
                        </div>
                        <div class="task-card">
                            <div class="task-card-header">
                                <span class="task-type">文案撰写</span>
                                <span class="task-status progress">已选人</span>
                            </div>
                            <div class="task-title">小红书种草文案写作</div>
                            <div class="task-tags">
                                <span class="task-tag">预算 ¥200</span>
                                <span class="task-tag">服务商：张明</span>
                            </div>
                            <div class="task-footer">
                                <span class="task-info">开发中</span>
                                <button class="task-btn outline" onclick="showTaskDetail(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">查看全部</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;">LOGO设计待验收</div>
                                        <div style="font-size: 12px; color: #999;">服务商已提交作品，请及时验收</div>
                                    </div>
                                    <span class="status pending">待处理</span>
                                </div>
                                <div class="todo-item">
                                    <div style="width: 40px; height: 40px; background: rgba(255, 107, 107, 0.1); border-radius: 8px; display: flex; align-items: center; justify-content: center;">
                                        <svg style="width: 20px; height: 20px; fill: #ff6b6b;"><use href="#icon-plus"/></svg>
                                    </div>
                                    <div style="flex: 1;">
                                        <div style="font-size: 14px; font-weight: 500; color: #333;">发布新任务</div>
                                        <div style="font-size: 12px; color: #999;">春节活动宣传片制作</div>
                                    </div>
                                    <span class="status progress">进行中</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-check"/></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 class="notification-item">
                                    <div class="notification-icon" style="background: rgba(102, 126, 234, 0.1);">
                                        <svg style="fill: #667eea;"><use href="#icon-user"/></svg>
                                    </div>
                                    <div class="notification-content">
                                        <div class="notification-title">新服务商申请</div>
                                        <div class="notification-desc">服务商"张明"申请了您的视频剪辑任务</div>
                                        <div class="notification-time">1小时前</div>
                                    </div>
                                    <div class="notification-dot"></div>
                                </div>
                            </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>
                            <button class="btn btn-primary" onclick="showPage('publishTask')">发布新任务</button>
                        </div>
                        <div class="table-tabs">
                            <button class="table-tab active">全部</button>
                            <button class="table-tab">进行中</button>
                            <button class="table-tab">待验收</button>
                            <button class="table-tab">已完成</button>
                        </div>
                        <table class="task-list-table">
                            <thead>
                                <tr>
                                    <th>任务名称</th>
                                    <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: #ff6b6b; font-weight: 600;">¥500</td>
                                    <td>张明</td>
                                    <td>2024-01-20</td>
                                    <td><span class="status progress">进行中</span></td>
                                    <td><button class="task-btn" style="padding: 6px 12px; font-size: 12px;" onclick="showTaskApplicants(1)">查看接单</button></td>
                                </tr>
                                <tr>
                                    <td style="font-weight: 500; color: #333;">企业LOGO设计</td>
                                    <td>图片设计</td>
                                    <td style="color: #ff6b6b; font-weight: 600;">¥800</td>
                                    <td>王设计</td>
                                    <td>2024-01-18</td>
                                    <td><span class="status waiting">待验收</span></td>
                                    <td><button class="task-btn" style="padding: 6px 12px; font-size: 12px; background: #27ae60;">验收</button></td>
                                </tr>
                                <tr>
                                    <td style="font-weight: 500; color: #333;">小红书种草文案</td>
                                    <td>文案撰写</td>
                                    <td style="color: #ff6b6b; font-weight: 600;">¥200</td>
                                    <td>李文案</td>
                                    <td>2024-01-15</td>
                                    <td><span class="status completed">已完成</span></td>
                                    <td><button class="task-btn" style="padding: 6px 12px; font-size: 12px; background: #27ae60;">查看</button></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Publish Task Section -->
                <div class="page-section" id="publishTaskSection" 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);">
                        <form id="publishTaskForm">
                            <div class="form-row">
                                <div class="form-group">
                                    <label>任务类型</label>
                                    <select required>
                                        <option value="">请选择任务类型</option>
                                        <option>视频剪辑</option>
                                        <option>图片设计</option>
                                        <option>文案撰写</option>
                                        <option>音频处理</option>
                                        <option>其他</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>预算金额</label>
                                    <input type="number" placeholder="请输入预算金额" required>
                                </div>
                            </div>
                            <div class="form-group">
                                <label>任务标题</label>
                                <input type="text" placeholder="请输入任务标题，简明扼要描述任务需求" required>
                            </div>
                            <div class="form-group">
                                <label>任务描述</label>
                                <textarea placeholder="请详细描述任务要求，包括：1.具体需求 2.交付标准 3.注意事项等" required>
类别	预算额度	已使用	剩余	使用率	状态	操作
视频剪辑	¥12,000	¥7,800	¥4,200	65%	正常	调整
图片设计	¥8,000	¥6,400	¥1,600	80%	预警	调整
文案撰写	¥5,000	¥2,250	¥2,750	45%	充裕	调整
其他	¥7,580	¥7,580	¥0	100%	超支	追加
编辑页面

任务接单情况

电商产品宣传片剪辑制作

申请人列表

服务商列表

张明

王设计

李文案

陈剪辑

我的钱包

账户统计

交易记录

收支明细

预算管理

预算分配

月度支出趋势

预算预警

个人资料

李经理

消息中心

账号设置

安全设置

时间	类型	任务名称	金额	状态
2024-01-15 14:30	任务支出	产品宣传片剪辑	-¥450	已完成
2024-01-14 10:00	充值	账户充值	+¥5,000	已完成
2024-01-13 16:20	任务支出	LOGO设计	-¥800	已完成