编辑页面

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>
        :root {
            --primary-color: #1a365d;
            --primary-light: #2c5282;
            --accent-color: #3182ce;
            --success-color: #38a169;
            --warning-color: #d69e2e;
            --error-color: #e53e3e;
            --bg-color: #f7fafc;
            --card-bg: #ffffff;
            --text-primary: #1a202c;
            --text-secondary: #4a5568;
            --border-color: #e2e8f0;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
            background: linear-gradient(135deg, #1a365d 0%, #2c5282 100%);
            min-height: 100vh;
            color: var(--text-primary);
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 20px;
        }

        /* Header */
        .header {
            text-align: center;
            margin-bottom: 40px;
            color: white;
        }

        .header h1 {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 12px;
            letter-spacing: -0.5px;
        }

        .header p {
            font-size: 1.1rem;
            opacity: 0.9;
        }

        /* Main Card */
        .main-card {
            background: var(--card-bg);
            border-radius: 16px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            overflow: hidden;
        }

        /* Upload Section */
        .upload-section {
            padding: 48px;
            border-bottom: 1px solid var(--border-color);
        }

        .upload-area {
            border: 2px dashed var(--border-color);
            border-radius: 12px;
            padding: 60px 40px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            background: var(--bg-color);
        }

        .upload-area:hover {
            border-color: var(--accent-color);
            background: #ebf8ff;
        }

        .upload-area.dragover {
            border-color: var(--accent-color);
            background: #ebf8ff;
            transform: scale(1.02);
        }

        .upload-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 20px;
            background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .upload-icon svg {
            width: 40px;
            height: 40px;
            fill: white;
        }

        .upload-area h3 {
            font-size: 1.4rem;
            color: var(--text-primary);
            margin-bottom: 8px;
        }

        .upload-area p {
            color: var(--text-secondary);
            font-size: 0.95rem;
        }

        .upload-area .supported-formats {
            margin-top: 16px;
            font-size: 0.85rem;
            color: var(--text-secondary);
        }

        #file-input {
            display: none;
        }

        /* File List */
        .file-list {
            margin-top: 24px;
        }

        .file-item {
            display: flex;
            align-items: center;
            padding: 16px;
            background: var(--bg-color);
            border-radius: 8px;
            margin-bottom: 12px;
            transition: all 0.3s ease;
        }

        .file-item:hover {
            background: #edf2f7;
        }

        .file-icon {
            width: 48px;
            height: 48px;
            background: var(--primary-color);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 16px;
        }

        .file-icon svg {
            width: 24px;
            height: 24px;
            fill: white;
        }

        .file-info {
            flex: 1;
        }

        .file-name {
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 4px;
        }

        .file-size {
            font-size: 0.85rem;
            color: var(--text-secondary);
        }

        .file-remove {
            width: 32px;
            height: 32px;
            border: none;
            background: transparent;
            cursor: pointer;
            color: var(--text-secondary);
            border-radius: 50%;
            transition: all 0.2s ease;
        }

        .file-remove:hover {
            background: #fed7d7;
            color: var(--error-color);
        }

        /* Controls */
        .controls {
            padding: 24px 48px;
            background: var(--bg-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 16px;
        }

        .grading-options {
            display: flex;
            gap: 16px;
            align-items: center;
        }

        .option-group {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .option-group label {
            font-size: 0.85rem;
            color: var(--text-secondary);
            font-weight: 500;
        }

        .option-group select {
            padding: 10px 16px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            font-size: 0.95rem;
            background: white;
            cursor: pointer;
            min-width: 140px;
        }

        .btn {
            padding: 14px 32px;
            border: none;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
            color: white;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(49, 130, 206, 0.4);
        }

        .btn-primary:disabled {
            background: #a0aec0;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .btn-secondary {
            background: white;
            color: var(--text-primary);
            border: 1px solid var(--border-color);
        }

        .btn-secondary:hover {
            background: var(--bg-color);
        }

        /* Processing */
        .processing-section {
            padding: 48px;
            display: none;
        }

        .processing-section.active {
            display: block;
        }

        .processing-animation {
            text-align: center;
            padding: 60px;
        }

        .spinner {
            width: 60px;
            height: 60px;
            border: 4px solid var(--border-color);
            border-top-color: var(--accent-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto 24px;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        .processing-animation p {
            font-size: 1.1rem;
            color: var(--text-secondary);
        }

        /* Results Section */
        .results-section {
            display: none;
        }

        .results-section.active {
            display: block;
        }

        .results-header {
            padding: 32px 48px;
            background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
            color: white;
        }

        .results-header h2 {
            font-size: 1.5rem;
            margin-bottom: 8px;
        }

        .results-summary {
            display: flex;
            gap: 32px;
            margin-top: 20px;
        }

        .summary-item {
            text-align: center;
        }

        .summary-value {
            font-size: 2.5rem;
            font-weight: 700;
        }

        .summary-label {
            font-size: 0.9rem;
            opacity: 0.9;
        }

        .results-content {
            padding: 32px 48px;
        }

        /* Question Cards */
        .question-card {
            background: var(--bg-color);
            border-radius: 12px;
            padding: 24px;
            margin-bottom: 20px;
            border-left: 4px solid var(--border-color);
            transition: all 0.3s ease;
        }

        .question-card.correct {
            border-left-color: var(--success-color);
        }

        .question-card.partial {
            border-left-color: var(--warning-color);
        }

        .question-card.incorrect {
            border-left-color: var(--error-color);
        }

        .question-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 16px;
        }

        .question-number {
            font-weight: 700;
            color: var(--primary-color);
            font-size: 1.1rem;
        }

        .question-score {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .score-badge {
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 600;
        }

        .score-badge.correct {
            background: #c6f6d5;
            color: #22543d;
        }

        .score-badge.partial {
            background: #fefcbf;
            color: #744210;
        }

        .score-badge.incorrect {
            background: #fed7d7;
            color: #742a2a;
        }

        .question-content {
            margin-bottom: 16px;
        }

        .question-text {
            font-weight: 500;
            color: var(--text-primary);
            margin-bottom: 12px;
        }

        .answer-section {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        .answer-box {
            padding: 16px;
            border-radius: 8px;
            background: white;
        }

        .answer-box h4 {
            font-size: 0.85rem;
            color: var(--text-secondary);
            margin-bottom: 8px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .answer-box p {
            color: var(--text-primary);
            line-height: 1.6;
        }

        .feedback-box {
            margin-top: 16px;
            padding: 16px;
            background: white;
            border-radius: 8px;
            border-left: 3px solid var(--accent-color);
        }

        .feedback-box h4 {
            font-size: 0.85rem;
            color: var(--accent-color);
            margin-bottom: 8px;
        }

        .feedback-box p {
            color: var(--text-secondary);
            line-height: 1.6;
        }

        /* Action Buttons */
        .action-buttons {
            padding: 24px 48px;
            background: var(--bg-color);
            display: flex;
            gap: 16px;
            justify-content: flex-end;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .container {
                padding: 20px 16px;
            }

            .header h1 {
                font-size: 1.8rem;
            }

            .upload-section,
            .results-content,
            .action-buttons {
                padding: 24px;
            }

            .controls {
                padding: 20px 24px;
            }

            .answer-section {
                grid-template-columns: 1fr;
            }

            .results-summary {
                flex-wrap: wrap;
            }
        }

        /* Animations */
        .fade-in {
            animation: fadeIn 0.5s ease;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>智能阅卷系统</h1>
            <p>AI 驱动的作业批改平台，快速精准评分</p>
        </header>

        <div class="main-card">
            <!-- Upload Section -->
            <div class="upload-section" id="upload-section">
                <div class="upload-area" id="upload-area">
                    <div class="upload-icon">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                            <polyline points="17 8 12 3 7 8"/>
                            <line x1="12" y1="3" x2="12" y2="15"/>
                        </svg>
                    </div>
                    <h3>拖拽文件到此处，或点击上传</h3>
                    <p>支持上传作业文件进行智能批改</p>
                    <p class="supported-formats">支持格式：PDF、Word (.docx)、图片 (JPG/PNG)、TXT</p>
                </div>
                <input type="file" id="file-input" accept=".pdf,.docx,.doc,.jpg,.jpeg,.png,.txt" multiple>
                
                <div class="file-list" id="file-list"></div>
            </div>

            <!-- Controls -->
            <div class="controls" id="controls-section">
                <div class="grading-options">
                    <div class="option-group">
                        <label>学科类型</label>
                        <select id="subject-select">
                            <option value="chinese">语文</option>
                            <option value="math">数学</option>
                            <option value="english">英语</option>
                            <option value="physics">物理</option>
                            <option value="chemistry">化学</option>
                            <option value="biology">生物</option>
                        </select>
                    </div>
                    <div class="option-group">
                        <label>年级</label>
                        <select id="grade-select">
                            <option value="primary">小学</option>
                            <option value="junior">初中</option>
                            <option value="senior">高中</option>
                        </select>
                    </div>
                    <div class="option-group">
                        <label>批改模式</label>
                        <select id="mode-select">
                            <option value="strict">严格模式</option>
                            <option value="normal">标准模式</option>
                            <option value="lenient">宽松模式</option>
                        </select>
                    </div>
                </div>
                <button class="btn btn-primary" id="start-btn" disabled>
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <polygon points="5 3 19 12 5 21 5 3"/>
                    </svg>
                    开始批改
                </button>
            </div>

            <!-- Processing Section -->
            <div class="processing-section" id="processing-section">
                <div class="processing-animation">
                    <div class="spinner"></div>
                    <p>正在智能批改中，请稍候...</p>
                </div>
            </div>

            <!-- Results Section -->
            <div class="results-section" id="results-section">
                <div class="results-header">
                    <h2>批改结果</h2>
                    <p>以下是作业的详细批改报告</p>
                    <div class="results-summary">
                        <div class="summary-item">
                            <div class="summary-value" id="total-score">85</div>
                            <div class="summary-label">总分</div>
                        </div>
                        <div class="summary-item">
                            <div class="summary-value" id="correct-count">8</div>
                            <div class="summary-label">正确题数</div>
                        </div>
                        <div class="summary-item">
                            <div class="summary-value" id="accuracy-rate">80%</div>
                            <div class="summary-label">正确率</div>
                        </div>
                    </div>
                </div>

                <div class="results-content" id="results-content">
                    <!-- Questions will be dynamically inserted here -->
                </div>

                <div class="action-buttons">
                    <button class="btn btn-secondary" id="new-grading-btn">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M12 5v14M5 12h14"/>
                        </svg>
                        新建批改
                    </button>
                    <button class="btn btn-primary" id="export-btn">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                            <polyline points="7 10 12 15 17 10"/>
                            <line x1="12" y1="15" x2="12" y2="3"/>
                        </svg>
                        导出报告
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // State management
        const state = {
            files: [],
            isProcessing: false
        };

        // DOM Elements
        const uploadArea = document.getElementById('upload-area');
        const fileInput = document.getElementById('file-input');
        const fileList = document.getElementById('file-list');
        const startBtn = document.getElementById('start-btn');
        const uploadSection = document.getElementById('upload-section');
        const controlsSection = document.getElementById('controls-section');
        const processingSection = document.getElementById('processing-section');
        const resultsSection = document.getElementById('results-section');
        const resultsContent = document.getElementById('results-content');
        const newGradingBtn = document.getElementById('new-grading-btn');
        const exportBtn = document.getElementById('export-btn');

        // File upload handling
        uploadArea.addEventListener('click', () => fileInput.click());
        
        uploadArea.addEventListener('dragover', (e) => {
            e.preventDefault();
            uploadArea.classList.add('dragover');
        });

        uploadArea.addEventListener('dragleave', () => {
            uploadArea.classList.remove('dragover');
        });

        uploadArea.addEventListener('drop', (e) => {
            e.preventDefault();
            uploadArea.classList.remove('dragover');
            handleFiles(e.dataTransfer.files);
        });

        fileInput.addEventListener('change', (e) => {
            handleFiles(e.target.files);
        });

        function handleFiles(files) {
            Array.from(files).forEach(file => {
                if (!state.files.some(f => f.name === file.name)) {
                    state.files.push(file);
                }
            });
            renderFileList();
            updateStartButton();
        }

        function renderFileList() {
            fileList.innerHTML = state.files.map((file, index) => `
                <div class="file-item fade-in">
                    <div class="file-icon">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                            <polyline points="14 2 14 8 20 8"/>
                        </svg>
                    </div>
                    <div class="file-info">
                        <div class="file-name">${file.name}</div>
                        <div class="file-size">${formatFileSize(file.size)}</div>
                    </div>
                    <button class="file-remove" onclick="removeFile(${index})">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <line x1="18" y1="6" x2="6" y2="18"/>
                            <line x1="6" y1="6" x2="18" y2="18"/>
                        </svg>
                    </button>
                </div>
            `).join('');
        }

        function removeFile(index) {
            state.files.splice(index, 1);
            renderFileList();
            updateStartButton();
        }

        function formatFileSize(bytes) {
            if (bytes < 1024) return bytes + ' B';
            if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
            return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
        }

        function updateStartButton() {
            startBtn.disabled = state.files.length === 0;
        }

        // Start grading
        startBtn.addEventListener('click', startGrading);

        function startGrading() {
            if (state.files.length === 0) return;

            // Show processing
            uploadSection.style.display = 'none';
            controlsSection.style.display = 'none';
            processingSection.classList.add('active');

            // Simulate processing (replace with actual API call)
            setTimeout(() => {
                processingSection.classList.remove('active');
                showResults();
            }, 2500);
        }

        // Demo results data
        const demoResults = {
            totalScore: 85,
            correctCount: 8,
            accuracyRate: '80%',
            questions: [
                {
                    number: '一、选择题',
                    items: [
                        {
                            subNumber: '1',
                            score: 10,
                            maxScore: 10,
                            status: 'correct',
                            question: '下列词语中加点字读音完全正确的一项是',
                            studentAnswer: 'A. 惬意(qiè) 恪守(kè)',
                            correctAnswer: 'A. 惬意(qiè) 恪守(kè)',
                            feedback: '回答正确！对多音字的掌握很好。'
                        },
                        {
                            subNumber: '2',
                            score: 10,
                            maxScore: 10,
                            status: 'correct',
                            question: '下列各句中，加点成语使用恰当的一项是',
                            studentAnswer: 'B. 这部小说情节曲折，抑扬顿挫，具有很强的感染力',
                            correctAnswer: 'B. 这部小说情节曲折，抑扬顿挫，具有很强的感染力',
                            feedback: '正确理解了成语的含义和使用场景。'
                        }
                    ]
                },
                {
                    number: '二、阅读理解',
                    items: [
                        {
                            subNumber: '1',
                            score: 15,
                            maxScore: 15,
                            status: 'correct',
                            question: '文章第一段在全文中有什么作用？',
                            studentAnswer: '开篇点题，引出下文，为后文的论述做铺垫，同时设置悬念吸引读者阅读兴趣。',
                            correctAnswer: '开篇点题，引出下文，为后文的论述做铺垫，同时设置悬念吸引读者阅读兴趣。',
                            feedback: '分析全面，条理清晰，准确把握了段落的作用。'
                        },
                        {
                            subNumber: '2',
                            score: 12,
                            maxScore: 15,
                            status: 'partial',
                            question: '结合全文，分析作者的情感变化',
                            studentAnswer: '作者的情感从最初的失望，逐渐转变为希望和坚定。',
                            correctAnswer: '作者的情感经历了从失望、迷茫到希望、坚定，最后达到豁然开朗的心境变化过程。',
                            feedback: '基本把握了情感变化的主线，但对变化的层次分析不够细致，缺少"迷茫"和"豁然开朗"两个阶段。'
                        }
                    ]
                },
                {
                    number: '三、作文',
                    items: [
                        {
                            subNumber: '',
                            score: 38,
                            maxScore: 50,
                            status: 'partial',
                            question: '请以"成长的足迹"为题，写一篇不少于600字的文章',
                            studentAnswer: '文章以第一人称叙述，讲述了作者在学习游泳过程中克服困难、不断成长的故事。结构完整，叙事流畅，但细节描写略显不足，情感表达可以更加深入。',
                            correctAnswer: '优秀作文应具备：立意明确，中心突出；内容充实，感情真挚；结构完整，条理清楚；语言流畅，有文采。',
                            feedback: '文章主题明确，叙事完整，语言流畅。建议：1. 增加心理活动描写，使情感表达更加细腻；2. 可以适当运用修辞手法，增强文章感染力；3. 结尾可以更加升华主题。'
                        }
                    ]
                }
            ]
        };

        function showResults() {
            resultsSection.classList.add('active');
            
            // Update summary
            document.getElementById('total-score').textContent = demoResults.totalScore;
            document.getElementById('correct-count').textContent = demoResults.correctCount;
            document.getElementById('accuracy-rate').textContent = demoResults.accuracyRate;

            // Render questions
            let html = '';
            demoResults.questions.forEach(section => {
                section.items.forEach(item => {
                    const scoreText = item.maxScore === 50 
                        ? `${item.score}/${item.maxScore}分` 
                        : `${item.score}分`;
                    
                    html += `
                        <div class="question-card ${item.status} fade-in">
                            <div class="question-header">
                                <span class="question-number">${section.number}${item.subNumber ? ' 第' + item.subNumber + '题' : ''}</span>
                                <div class="question-score">
                                    <span class="score-badge ${item.status}">${scoreText}</span>
                                </div>
                            </div>
                            <div class="question-content">
                                <p class="question-text">${item.question}</p>
                                <div class="answer-section">
                                    <div class="answer-box">
                                        <h4>学生答案</h4>
                                        <p>${item.studentAnswer}</p>
                                    </div>
                                    <div class="answer-box">
                                        <h4>参考答案</h4>
                                        <p>${item.correctAnswer}</p>
                                    </div>
                                </div>
                                <div class="feedback-box">
                                    <h4>AI 批改点评</h4>
                                    <p>${item.feedback}</p>
                                </div>
                            </div>
                        </div>
                    `;
                });
            });
            resultsContent.innerHTML = html;
        }

        // New grading
        newGradingBtn.addEventListener('click', () => {
            state.files = [];
            fileInput.value = '';
            renderFileList();
            updateStartButton();
            
            resultsSection.classList.remove('active');
            uploadSection.style.display = 'block';
            controlsSection.style.display = 'flex';
        });

        // Export report
        exportBtn.addEventListener('click', () => {
            alert('报告导出功能：在实际应用中，这里会生成 PDF 或 Word 格式的详细批改报告。');
        });
    </script>
</body>
</html>