Home Explore Help
Sign In
jack
/
PPT
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

update

lsc 20 hours ago
parent
f20d44ae34
commit
975a3a2192
3 changed files with 0 additions and 10627 deletions
Split View Show Diff Stats
  1. 0 10627
      Interactive_Courseware_without_ToolAI_theme_blue.html
  2. BIN
      ffd774a7-2b75-46e8-a263-8c0c097bf42f.png
  3. BIN
      image.png

+ 0 - 10627
Interactive_Courseware_without_ToolAI_theme_blue.html
View File 

@@ -1,10627 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="zh-CN">
 
-<head>
 
-    <meta charset="UTF-8">
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <title>互动课件编辑器</title>
 
-    <style>
 
-        * {
 
-            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: #f0f2f5;
 
-            overflow: hidden;
 
-        }
 
-
 
-        /* ========== 顶部工具栏 ========== */
 
-        .top-bar {
 
-            height: 64px;
 
-            background: white;
 
-            display: flex;
 
-            align-items: center;
 
-            justify-content: space-between;
 
-            padding: 0 24px;
 
-            position: relative;
 
-            z-index: 100;
 
-            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.06);
 
-        }
 
-
 
-        .top-bar-left {
 
-            display: flex;
 
-            align-items: center;
 
-            gap: 16px;
 
-        }
 
-
 
-        .logo-menu-wrapper {
 
-            position: relative;
 
-        }
 
-
 
-        .logo-btn {
 
-            height: 36px;
 
-            padding: 6px 10px;
 
-            border-radius: 10px;
 
-            border: 1.5px solid #e5e7eb;
 
-            background: #f9fafb;
 
-            cursor: pointer;
 
-            display: inline-flex;
 
-            align-items: center;
 
-            gap: 8px;
 
-            transition: all 0.2s;
 
-        }
 
-
 
-        .logo-btn:hover {
 
-            background: #fff;
 
-            border-color: #285cf5;
 
-            box-shadow: 0 4px 10px rgba(40, 92, 245, 0.15);
 
-        }
 
-
 
-        .logo-img {
 
-            width: 20px;
 
-            height: 20px;
 
-            object-fit: contain;
 
-        }
 
-
 
-        .logo-caret {
 
-            width: 14px;
 
-            height: 14px;
 
-            color: #9ca3af;
 
-        }
 
-
 
-        .top-dropdown {
 
-            position: absolute;
 
-            top: 44px;
 
-            left: 0;
 
-            background: #fff;
 
-            border: 1px solid #e5e7eb;
 
-            box-shadow: 0 12px 30px rgba(0,0,0,0.12);
 
-            border-radius: 12px;
 
-            min-width: 160px;
 
-            padding: 6px 0;
 
-            display: none;
 
-            z-index: 200;
 
-        }
 
-
 
-        .top-dropdown.active {
 
-            display: block;
 
-        }
 
-
 
-        .top-dropdown-item {
 
-            display: flex;
 
-            align-items: center;
 
-            gap: 10px;
 
-            padding: 10px 14px;
 
-            cursor: pointer;
 
-            font-size: 13px;
 
-            color: #111827;
 
-            transition: all 0.15s;
 
-        }
 
-
 
-        .top-dropdown-item:hover {
 
-            background: #eef3ff;
 
-            color: #1f4ad6;
 
-        }
 
-
 
-        .top-dropdown-item.danger {
 
-            color: #dc2626;
 
-        }
 
-
 
-        .top-dropdown-item.danger:hover {
 
-            background: #fef2f2;
 
-            color: #b91c1c;
 
-        }
 
-
 
-        .top-dropdown-sep {
 
-            height: 1px;
 
-            background: #f3f4f6;
 
-            margin: 4px 0;
 
-        }
 
-
 
-        .course-title {
 
-            font-size: 16px;
 
-            font-weight: 600;
 
-            color: #111827;
 
-            padding: 8px 12px;
 
-            border: 1px solid transparent;
 
-            border-radius: 8px;
 
-            cursor: text;
 
-            transition: all 0.2s;
 
-        }
 
-
 
-        .course-title:hover {
 
-            border-color: #e5e7eb;
 
-            background: #f9fafb;
 
-        }
 
-
 
-        .course-title:focus {
 
-            outline: none;
 
-            border-color: #285cf5;
 
-            background: #f6f8ff;
 
-        }
 
-
 
-        .auto-save {
 
-            font-size: 13px;
 
-            color: #6b7280;
 
-            display: flex;
 
-            align-items: center;
 
-            gap: 6px;
 
-        }
 
-
 
-        .save-dot {
 
-            width: 6px;
 
-            height: 6px;
 
-            border-radius: 50%;
 
-            background: #10b981;
 
-            animation: pulse 2s ease-in-out infinite;
 
-        }
 
-
 
-        @keyframes pulse {
 
-            0%, 100% { opacity: 1; }
 
-            50% { opacity: 0.5; }
 
-        }
 
-
 
-        .top-bar-right {
 
-            display: flex;
 
-            align-items: center;
 
-            gap: 12px;
 
-        }
 
-
 
-        .top-btn {
 
-            height: 40px;
 
-            padding: 0 20px;
 
-            border-radius: 10px;
 
-            border: none;
 
-            font-size: 14px;
 
-            font-weight: 500;
 
-            cursor: pointer;
 
-            transition: all 0.2s;
 
-            display: flex;
 
-            align-items: center;
 
-            gap: 8px;
 
-        }
 
-
 
-        .btn-secondary {
 
-            background: white;
 
-            color: #374151;
 
-            border: 1.5px solid #e5e7eb;
 
-        }
 
-
 
-        .btn-secondary:hover {
 
-            background: #f9fafb;
 
-            border-color: #d1d5db;
 
-            transform: translateY(-1px);
 
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 
-        }
 
-
 
-        .btn-primary {
 
-            background: #285cf5;
 
-            color: white;
 
-            box-shadow: 0 2px 8px rgba(40, 92, 245, 0.2);
 
-        }
 
-
 
-        .btn-primary:hover {
 
-            background: #1f4ad6;
 
-            transform: translateY(-1px);
 
-            box-shadow: 0 4px 12px rgba(40, 92, 245, 0.3);
 
-        }
 
-
 
-        /* ========== 主容器 ========== */
 
-        .main-container {
 
-            height: calc(100vh - 64px);
 
-            display: flex;
 
-            position: relative;
 
-            padding: 16px;
 
-            gap: 16px;
 
-        }
 
-
 
-        /* ========== 左侧容器 ========== */
 
-        .left-container {
 
-            display: flex;
 
-            background: white;
 
-            border-radius: 16px;
 
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
 
-            position: relative;
 
-            z-index: 50;
 
-            overflow: hidden;
 
-        }
 
-
 
-        .primary-menu {
 
-            width: 100px;
 
-            background: #fafbfc;
 
-            border-right: 1px solid #e5e7eb;
 
-            padding: 16px 8px;
 
-            display: flex;
 
-            flex-direction: column;
 
-            gap: 6px;
 
-        }
 
-
 
-        .menu-item {
 
-            width: 84px;
 
-            padding: 12px 8px;
 
-            border-radius: 12px;
 
-            display: flex;
 
-            flex-direction: column;
 
-            align-items: center;
 
-            justify-content: center;
 
-            gap: 6px;
 
-            cursor: pointer;
 
-            transition: all 0.2s;
 
-            position: relative;
 
-        }
 
-
 
-        .menu-item:hover {
 
-            background: #f3f4f6;
 
-        }
 
-
 
-        .menu-item.active {
 
-            background: #eef3ff;
 
-            box-shadow: 0 2px 8px rgba(40, 92, 245, 0.15);
 
-        }
 
-
 
-        .menu-item.active::after {
 
-            content: '';
 
-            position: absolute;
 
-            left: -8px;
 
-            top: 50%;
 
-            transform: translateY(-50%);
 
-            width: 4px;
 
-            height: 32px;
 
-            background: #285cf5;
 
-            border-radius: 0 2px 2px 0;
 
-        }
 
-
 
-        .menu-icon {
 
-            width: 22px;
 
-            height: 22px;
 
-            color: #6b7280;
 
-            flex-shrink: 0;
 
-        }
 
-
 
-        .menu-item.active .menu-icon {
 
-            color: #285cf5;
 
-        }
 
-
 
-        .menu-label {
 
-            font-size: 11px;
 
-            font-weight: 500;
 
-            color: #6b7280;
 
-            text-align: center;
 
-            line-height: 1.2;
 
-        }
 
-
 
-        .menu-item.active .menu-label {
 
-            color: #285cf5;
 
-            font-weight: 600;
 
-        }
 
-
 
-        /* ========== 二级菜单 - AI对话 ========== */
 
-        .secondary-panel {
 
-            width: 420px;
 
-            background: white;
 
-            display: flex;
 
-            flex-direction: column;
 
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 
-        }
 
-
 
-        .secondary-panel.collapsed {
 
-            width: 0;
 
-            overflow: hidden;
 
-        }
 
-
 
-        .secondary-panel.hidden {
 
-            display: none;
 
-        }
 
-
 
-        .panel-header {
 
-            padding: 20px 20px 16px;
 
-            border-bottom: 1px solid #f3f4f6;
 
-            display: flex;
 
-            align-items: center;
 
-            justify-content: space-between;
 
-        }
 
-
 
-        .panel-title {
 
-            font-size: 15px;
 
-            font-weight: 600;
 
-            color: #111827;
 
-            display: flex;
 
-            align-items: center;
 
-            gap: 10px;
 
-        }
 
-
 
-        .ai-badge {
 
-            background: linear-gradient(135deg, #285cf5 0%, #1f4ad6 100%);
 
-            color: white;
 
-            font-size: 11px;
 
-            font-weight: 600;
 
-            padding: 4px 10px;
 
-            border-radius: 12px;
 
-        }
 
-
 
-        .collapse-btn {
 
-            width: 28px;
 
-            height: 28px;
 
-            border-radius: 10px;
 
-            border: none;
 
-            background: transparent;
 
-            cursor: pointer;
 
-            display: flex;
 
-            align-items: center;
 
-            justify-content: center;
 
-            transition: all 0.2s;
 
-            color: #9ca3af;
 
-        }
 
-
 
-        .collapse-btn:hover {
 
-            background: #f3f4f6;
 
-            color: #6b7280;
 
-        }
 
-
 
-        /* 输入框容器 */
 
-        .chat-input-container {
 
-            padding: 16px 20px;
 
-            background: white;
 
-            order: 1;
 
-            border-bottom: 1px solid #f0f1f3;
 
-            transition: all 0.3s ease;
 
-        }
 
-
 
-        .chat-input-container.bottom {
 
-            order: 3;
 
-            border-bottom: none;
 
-            border-top: 1px solid #f0f1f3;
 
-        }
 
-
 
-        .secondary-content {
 
-            flex: 1;
 
-            overflow-y: auto;
 
-            padding: 20px;
 
-            display: flex;
 
-            flex-direction: column;
 
-            order: 2;
 
-        }
 
-
 
-        .chat-messages {
 
-            min-height: 600px;
 
-            overflow-y: auto;
 
-            padding-bottom: 16px;
 
-        }
 
-
 
-        .message {
 
-            margin-bottom: 16px;
 
-        }
 
-
 
-        .message-user {
 
-            display: flex;
 
-            justify-content: flex-end;
 
-        }
 
-
 
-        .message-user .message-content {
 
-            background: #eef3ff;
 
-            border: 1.5px solid #285cf5;
 
-            color: #111827;
 
-            border-radius: 16px 16px 4px 16px;
 
-            padding: 12px 16px;
 
-            max-width: 85%;
 
-            font-size: 14px;
 
-            line-height: 1.6;
 
-        }
 
-
 
-        .message-ai {
 
-            display: flex;
 
-            justify-content: flex-start;
 
-        }
 
-
 
-        .message-ai .message-content {
 
-            background: #fafbfc;
 
-            border: 1.5px solid #e5e7eb;
 
-            color: #374151;
 
-            border-radius: 16px 16px 16px 4px;
 
-            padding: 12px 16px;
 
-            max-width: 85%;
 
-            font-size: 14px;
 
-            line-height: 1.6;
 
-            white-space: pre-line;
 
-        }
 
-
 
-        .chat-input-wrapper {
 
-            display: flex;
 
-            flex-direction: column;
 
-            gap: 8px;
 
-            background: #fafbfc;
 
-            border: 1.5px solid #e5e7eb;
 
-            border-radius: 16px;
 
-            padding: 12px;
 
-            transition: all 0.2s;
 
-        }
 
-
 
-        .chat-input-wrapper:focus-within {
 
-            border-color: #285cf5;
 
-            background: white;
 
-        }
 
-
 
-        .chat-textarea-container {
 
-            width: 100%;
 
-            min-height: 72px;
 
-        }
 
-
 
-        .chat-textarea {
 
-            width: 100%;
 
-            border: none;
 
-            background: transparent;
 
-            outline: none;
 
-            resize: none;
 
-            font-size: 14px;
 
-            color: #111827;
 
-            line-height: 1.5;
 
-            padding: 0;
 
-            min-height: 72px;
 
-            max-height: 180px;
 
-            font-family: inherit;
 
-        }
 
-
 
-        .chat-textarea::placeholder {
 
-            color: #9ca3af;
 
-        }
 
-
 
-        .chat-textarea:disabled {
 
-            opacity: 0.6;
 
-            cursor: not-allowed;
 
-        }
 
-
 
-        .chat-bottom-row {
 
-            display: flex;
 
-            align-items: center;
 
-            justify-content: space-between;
 
-            gap: 8px;
 
-        }
 
-
 
-        .upload-file-btn {
 
-            width: 36px;
 
-            height: 36px;
 
-            border-radius: 8px;
 
-            border: none;
 
-            background: transparent;
 
-            cursor: pointer;
 
-            display: flex;
 
-            align-items: center;
 
-            justify-content: center;
 
-            transition: all 0.2s;
 
-            flex-shrink: 0;
 
-        }
 
-
 
-        .upload-file-btn:hover {
 
-            background: #eef3ff;
 
-        }
 
-
 
-        .upload-file-btn svg {
 
-            width: 20px;
 
-            height: 20px;
 
-            color: #6b7280;
 
-        }
 
-
 
-        .upload-file-btn:hover svg {
 
-            color: #285cf5;
 
-        }
 
-
 
-        .status-text {
 
-            font-size: 13px;
 
-            color: #9ca3af;
 
-            display: none;
 
-            align-items: center;
 
-            gap: 6px;
 
-        }
 
-
 
-        .status-text.active {
 
-            display: flex;
 
-        }
 
-
 
-        .status-dot {
 
-            width: 6px;
 
-            height: 6px;
 
-            border-radius: 50%;
 
-            background: #285cf5;
 
-            animation: pulse-dot 1.5s ease-in-out infinite;
 
-        }
 
-
 
-        @keyframes pulse-dot {
 
-            0%, 100% { opacity: 1; transform: scale(1); }
 
-            50% { opacity: 0.5; transform: scale(1.2); }
 
-        }
 
-
 
-        .send-btn {
 
-            width: 36px;
 
-            height: 36px;
 
-            border-radius: 50%;
 
-            border: none;
 
-            background: #285cf5;
 
-            cursor: pointer;
 
-            display: flex;
 
-            align-items: center;
 
-            justify-content: center;
 
-            transition: all 0.2s;
 
-            flex-shrink: 0;
 
-        }
 
-
 
-        .send-btn.generating {
 
-            background: #1f4ad6;
 
-            cursor: not-allowed;
 
-            box-shadow: 0 0 0 3px rgba(40, 92, 245, 0.16);
 
-        }
 
-
 
-        .send-btn.generating svg {
 
-            animation: spin 1s linear infinite;
 
-        }
 
-
 
-        @keyframes spin {
 
-            from { transform: rotate(0deg); }
 
-            to { transform: rotate(360deg); }
 
-        }
 
-
 
-        .send-btn:hover {
 
-            background: #1f4ad6;
 
-            transform: scale(1.05);
 
-            box-shadow: 0 4px 12px rgba(40, 92, 245, 0.25);
 
-        }
 
-
 
-        .send-btn.generating:hover {
 
-            background: #1f4ad6;
 
-            transform: none;
 
-            box-shadow: 0 0 0 3px rgba(40, 92, 245, 0.16);
 
-        }
 
-
 
-        .send-btn svg {
 
-            width: 18px;
 
-            height: 18px;
 
-            color: white;
 
-        }
 
-
 
-        /* ========== 中央编辑区 ========== */
 
-        .center-area {
 
-            flex: 1;
 
-            display: flex;
 
-            flex-direction: column;
 
-            background: white;
 
-            overflow: hidden;
 
-            border-radius: 16px;
 
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
 
-            position: relative;
 
-        }
 
-
 
-        /* 元素工具栏 */
 
-        .element-toolbar {
 
-            min-height: 60px;
 
-            background: white;
 
-            border-bottom: 1px solid #f0f1f3;
 
-            display: none;
 
-            align-items: center;
 
-            padding: 12px 24px;
 
-            gap: 10px;
 
-            position: sticky;
 
-            top: 0;
 
-            z-index: 3;
 
-        }
 
-
 
-        .element-toolbar.visible {
 
-            display: flex;
 
-        }
 
-
 
-        .toolbar-section {
 
-            display: flex;
 
-            align-items: center;
 
-            gap: 8px;
 
-            padding-right: 16px;
 
-            border-right: 1px solid #e5e7eb;
 
-        }
 
-
 
-        .toolbar-section:last-child {
 
-            border-right: none;
 
-        }
 
-
 
-        .toolbar-btn {
 
-            height: 38px;
 
-            padding: 0 14px;
 
-            border-radius: 10px;
 
-            border: none;
 
-            background: #f9fafb;
 
-            font-size: 13px;
 
-            font-weight: 500;
 
-            color: #4b5563;
 
-            cursor: pointer;
 
-            display: flex;
 
-            align-items: center;
 
-            gap: 7px;
 
-            transition: all 0.2s;
 
-        }
 
-
 
-        .toolbar-btn:hover {
 
-            background: #eef3ff;
 
-            color: #285cf5;
 
-            transform: translateY(-1px);
 
-        }
 
-
 
-        .toolbar-btn svg {
 
-            width: 16px;
 
-            height: 16px;
 
-        }
 
-
 
-        /* Slides编辑区 */
 
-        .slides-area {
 
-            flex: 1;
 
-            display: flex;
 
-            flex-direction: column;
 
-            padding: 0;
 
-            overflow: hidden;
 
-            background: #fafbfc;
 
-            position: relative;
 
-        }
 
-
 
-        .slides-area > .slide-canvas {
 
-            flex: 1;
 
-            width: 100%;
 
-            height: auto;
 
-            background: white;
 
-            box-shadow: none;
 
-            border-radius: 0;
 
-            display: flex;
 
-            align-items: center;
 
-            justify-content: center;
 
-            padding: 40px;
 
-        }
 
-
 
-        .slides-area > .slide-canvas .slide-placeholder {
 
-            text-align: center;
 
-            color: #9ca3af;
 
-        }
 
-
 
-        .slide-placeholder-icon {
 
-            font-size: 56px;
 
-            margin-bottom: 20px;
 
-            opacity: 0.6;
 
-        }
 
-
 
-        .slide-placeholder-text {
 
-            font-size: 16px;
 
-            font-weight: 500;
 
-            margin-bottom: 8px;
 
-            color: #6b7280;
 
-        }
 
-
 
-        .slide-placeholder-hint {
 
-            font-size: 13px;
 
-            color: #d1d5db;
 
-        }
 
-
 
-        /* 可编辑元素 */
 
-        .slide-element {
 
-            position: absolute;
 
-            border: 2px solid transparent;
 
-            cursor: move;
 
-            transition: border-color 0.2s;
 
-        }
 
-
 
-        .slide-element:hover {
 
-            border-color: #d1d5db;
 
-        }
 
-
 
-        .slide-element.selected {
 
-            border-color: #285cf5;
 
-            box-shadow: 0 0 0 1px #285cf5;
 
-        }
 
-
 
-        .slide-element.selected .resize-handle {
 
-            display: block;
 
-        }
 
-
 
-        .resize-handle {
 
-            position: absolute;
 
-            width: 8px;
 
-            height: 8px;
 
-            background: #285cf5;
 
-            border: 2px solid white;
 
-            border-radius: 50%;
 
-            display: none;
 
-        }
 
-
 
-        .resize-handle.nw { top: -4px; left: -4px; cursor: nw-resize; }
 
-        .resize-handle.ne { top: -4px; right: -4px; cursor: ne-resize; }
 
-        .resize-handle.sw { bottom: -4px; left: -4px; cursor: sw-resize; }
 
-        .resize-handle.se { bottom: -4px; right: -4px; cursor: se-resize; }
 
-
 
-        .text-element {
 
-            padding: 12px;
 
-            font-size: 16px;
 
-            line-height: 1.5;
 
-            outline: none;
 
-        }
 
-
 
-        .image-element {
 
-            width: 100%;
 
-            height: 100%;
 
-            object-fit: cover;
 
-        }
 
-
 
-        /* 下拉菜单 */
 
-        .dropdown {
 
-            position: relative;
 
-        }
 
-
 
-        .dropdown-menu {
 
-            position: absolute;
 
-            top: 100%;
 
-            left: 0;
 
-            margin-top: 4px;
 
-            background: white;
 
-            border-radius: 12px;
 
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 
-            padding: 8px;
 
-            min-width: 160px;
 
-            display: none;
 
-            z-index: 1000;
 
-        }
 
-
 
-        .dropdown.active .dropdown-menu {
 
-            display: block;
 
-        }
 
-
 
-        .dropdown-item {
 
-            padding: 10px 12px;
 
-            border-radius: 8px;
 
-            cursor: pointer;
 
-            transition: all 0.2s;
 
-            display: flex;
 
-            align-items: center;
 
-            gap: 10px;
 
-            font-size: 13px;
 
-            color: #374151;
 
-        }
 
-
 
-        .dropdown-item:hover {
 
-            background: #f3f4f6;
 
-        }
 
-
 
-        .dropdown-item svg {
 
-            width: 18px;
 
-            height: 18px;
 
-            color: #6b7280;
 
-        }
 
-
 
-        /* 底部大纲 */
 
-        .bottom-outline {
 
-            height: 150px;
 
-            background: #fafbfc;
 
-            border-top: 1px solid #f0f1f3;
 
-            padding: 16px 24px;
 
-            overflow-x: auto;
 
-            overflow-y: hidden;
 
-            display: none;
 
-        }
 
-
 
-        .bottom-outline.visible {
 
-            display: block;
 
-        }
 
-
 
-        .outline-track {
 
-            display: flex;
 
-            gap: 14px;
 
-            height: 100%;
 
-            align-items: center;
 
-        }
 
-
 
-        .outline-item-wrapper {
 
-            position: relative;
 
-            display: flex;
 
-            align-items: center;
 
-            gap: 14px;
 
-            z-index: 1;
 
-        }
 
-
 
-        .outline-item-wrapper:has(.page-menu.active) {
 
-            z-index: 10000;
 
-        }
 
-
 
-        .outline-item {
 
-            width: 190px;
 
-            height: 110px;
 
-            flex-shrink: 0;
 
-            border-radius: 12px;
 
-            border: 2px solid #e5e7eb;
 
-            background: white;
 
-            cursor: grab;
 
-            position: relative;
 
-            transition: all 0.2s;
 
-            display: flex;
 
-            flex-direction: column;
 
-            align-items: center;
 
-            justify-content: center;
 
-            font-size: 12px;
 
-            color: #9ca3af;
 
-        }
 
-
 
-        .outline-item:active {
 
-            cursor: grabbing;
 
-        }
 
-
 
-        .outline-item.dragging {
 
-            opacity: 0.5;
 
-            cursor: grabbing;
 
-        }
 
-
 
-        .outline-item.drag-over {
 
-            border-color: #285cf5;
 
-            border-style: dashed;
 
-            background: #f6f8ff;
 
-        }
 
-
 
-        .outline-item:hover {
 
-            border-color: #285cf5;
 
-            transform: translateY(-2px);
 
-            box-shadow: 0 4px 8px rgba(40, 92, 245, 0.15);
 
-            z-index: 100;
 
-        }
 
-
 
-        .outline-item.active {
 
-            border-color: #285cf5;
 
-            box-shadow: 0 4px 12px rgba(40, 92, 245, 0.2);
 
-        }
 
-
 
-        .outline-item:has(.page-menu.active) {
 
-            z-index: 10000;
 
-        }
 
-
 
-        .outline-item .page-number {
 
-            position: absolute;
 
-            top: 8px;
 
-            left: 10px;
 
-            font-size: 11px;
 
-            font-weight: 700;
 
-            color: #6b7280;
 
-            background: white;
 
-            width: 24px;
 
-            height: 24px;
 
-            border-radius: 6px;
 
-            display: flex;
 
-            align-items: center;
 
-            justify-content: center;
 
-        }
 
-
 
-        /* 页面操作菜单 */
 
-        .page-menu {
 
-            position: absolute;
 
-            bottom: 8px;
 
-            right: 8px;
 
-            width: 28px;
 
-            height: 28px;
 
-            border-radius: 8px;
 
-            background: rgba(255, 255, 255, 0.95);
 
-            border: 1px solid #e5e7eb;
 
-            display: none;
 
-            align-items: center;
 
-            justify-content: center;
 
-            cursor: pointer;
 
-            transition: all 0.2s;
 
-            z-index: 10000;
 
-        }
 
-
 
-        .outline-item:hover .page-menu {
 
-            display: flex;
 
-        }
 
-
 
-        .page-menu.active {
 
-            z-index: 10001;
 
-        }
 
-
 
-        .page-menu:hover {
 
-            background: #285cf5;
 
-            border-color: #285cf5;
 
-        }
 
-
 
-        .page-menu:hover svg {
 
-            color: white;
 
-        }
 
-
 
-        .page-menu svg {
 
-            width: 16px;
 
-            height: 16px;
 
-            color: #6b7280;
 
-        }
 
-
 
-        .page-menu-dropdown {
 
-            position: absolute;
 
-            bottom: 100%;
 
-            right: 0;
 
-            margin-bottom: 4px;
 
-            background: white;
 
-            border-radius: 12px;
 
-            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
 
-            padding: 8px;
 
-            min-width: 120px;
 
-            display: none;
 
-            z-index: 10002;
 
-        }
 
-
 
-        .page-menu.active .page-menu-dropdown {
 
-            display: block;
 
-        }
 
-
 
-        .page-menu-item {
 
-            padding: 10px 12px;
 
-            border-radius: 8px;
 
-            cursor: pointer;
 
-            transition: all 0.2s;
 
-            display: flex;
 
-            align-items: center;
 
-            gap: 10px;
 
-            font-size: 13px;
 
-            color: #374151;
 
-        }
 
-
 
-        .page-menu-item:hover {
 
-            background: #eef3ff;
 
-        }
 
-
 
-        .page-menu-item:hover svg {
 
-            color: #285cf5;
 
-        }
 
-
 
-        .page-menu-item.danger:hover {
 
-            background: #fef2f2;
 
-            color: #dc2626;
 
-        }
 
-
 
-        .page-menu-item.danger:hover svg {
 
-            color: #dc2626;
 
-        }
 
-
 
-        .page-menu-item svg {
 
-            width: 16px;
 
-            height: 16px;
 
-            color: #6b7280;
 
-        }
 
-
 
-        /* 页面间添加按钮 */
 
-        .add-page-between {
 
-            width: 40px;
 
-            height: 40px;
 
-            border-radius: 50%;
 
-            border: 2px dashed #d1d5db;
 
-            background: white;
 
-            cursor: pointer;
 
-            display: none;
 
-            align-items: center;
 
-            justify-content: center;
 
-            color: #9ca3af;
 
-            font-size: 20px;
 
-            transition: all 0.2s;
 
-            flex-shrink: 0;
 
-        }
 
-
 
-        .outline-item-wrapper:hover .add-page-between {
 
-            display: flex;
 
-        }
 
-
 
-        .add-page-between:hover {
 
-            border-color: #285cf5;
 
-            border-style: solid;
 
-            color: #285cf5;
 
-            background: #f6f8ff;
 
-        }
 
-
 
-        /* ========== 页面模板二级菜单 ========== */
 
-        .template-grid {
 
-            display: grid;
 
-            grid-template-columns: repeat(2, 1fr);
 
-            gap: 14px;
 
-            padding: 20px;
 
-        }
 
-
 
-        .template-card {
 
-            background: #fafbfc;
 
-            border: 1.5px solid #e5e7eb;
 
-            border-radius: 14px;
 
-            padding: 14px;
 
-            cursor: pointer;
 
-            transition: all 0.2s;
 
-            position: relative;
 
-            overflow: hidden;
 
-        }
 
-
 
-        .template-card:hover {
 
-            border-color: #285cf5;
 
-            background: #f6f8ff;
 
-            transform: translateY(-2px);
 
-            box-shadow: 0 4px 12px rgba(40, 92, 245, 0.15);
 
-        }
 
-
 
-        .template-card:hover .template-preview {
 
-            opacity: 1;
 
-            transform: translateY(0);
 
-        }
 
-
 
-        .template-preview {
 
-            width: 100%;
 
-            height: 100px;
 
-            background: white;
 
-            border-radius: 8px;
 
-            margin-bottom: 12px;
 
-            display: flex;
 
-            align-items: center;
 
-            justify-content: center;
 
-            border: 1px solid #e5e7eb;
 
-            position: relative;
 
-            opacity: 0.9;
 
-            transform: translateY(-2px);
 
-            transition: all 0.3s;
 
-        }
 
-
 
-        .template-preview svg {
 
-            width: 48px;
 
-            height: 48px;
 
-            color: #d1d5db;
 
-        }
 
-
 
-        .template-card:hover .template-preview svg {
 
-            color: #285cf5;
 
-        }
 
-
 
-        .template-name {
 
-            font-size: 14px;
 
-            font-weight: 600;
 
-            color: #111827;
 
-            text-align: center;
 
-        }
 
-
 
-.upload-ppt-card {
 
-    grid-column: 1 / -1;
 
-    background: #fafbfc;
 
-    border: 1.5px solid #e5e7eb;
 
-    display: flex;
 
-    align-items: center;
 
-    justify-content: center;
 
-    gap: 12px;
 
-    padding: 14px;
 
-    border-radius: 14px;
 
-}
 
-
 
-.upload-ppt-card:hover {
 
-    background: #f6f8ff;
 
-    border-color: #285cf5;
 
-    box-shadow: 0 4px 12px rgba(40, 92, 245, 0.15);
 
-    transform: translateY(-2px);
 
-}
 
-
 
-.upload-ppt-card svg {
 
-    width: 28px;
 
-    height: 28px;
 
-    color: #d1d5db;
 
-}
 
-
 
-.upload-ppt-card:hover svg {
 
-    color: #285cf5;
 
-}
 
-
 
-.upload-ppt-text {
 
-    font-size: 14px;
 
-    font-weight: 600;
 
-    color: #111827;
 
-}
 
-
 
-
 
-        /* ========== 图片悬浮菜单 ========== */
 
-        .image-hover-menu {
 
-            position: absolute;
 
-            top: 50%;
 
-            left: 50%;
 
-            transform: translate(-50%, -50%);
 
-            background: white;
 
-            border-radius: 12px;
 
-            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
 
-            padding: 8px;
 
-            display: none;
 
-            flex-direction: column;
 
-            gap: 4px;
 
-            z-index: 1000;
 
-            min-width: 160px;
 
-        }
 
-
 
-        .slide-element.has-image:hover .image-hover-menu {
 
-            display: flex;
 
-        }
 
-
 
-        .image-menu-item {
 
-            padding: 12px 14px;
 
-            border-radius: 8px;
 
-            cursor: pointer;
 
-            transition: all 0.2s;
 
-            display: flex;
 
-            align-items: center;
 
-            gap: 10px;
 
-            font-size: 13px;
 
-            color: #374151;
 
-            font-weight: 500;
 
-        }
 
-
 
-        .image-menu-item:hover {
 
-            background: #eef3ff;
 
-            color: #285cf5;
 
-        }
 
-
 
-        .image-menu-item svg {
 
-            width: 18px;
 
-            height: 18px;
 
-            flex-shrink: 0;
 
-        }
 
-
 
-        /* ========== 搜索/生成浮窗 ========== */
 
-        .floating-modal {
 
-            position: fixed;
 
-            top: 0;
 
-            left: 0;
 
-            right: 0;
 
-            bottom: 0;
 
-            background: rgba(0, 0, 0, 0.4);
 
-            backdrop-filter: blur(4px);
 
-            display: none;
 
-            align-items: center;
 
-            justify-content: center;
 
-            z-index: 2000;
 
-            opacity: 0;
 
-            transition: opacity 0.3s;
 
-        }
 
-
 
-        .floating-modal.active {
 
-            display: flex;
 
-            opacity: 1;
 
-        }
 
-
 
-        .floating-content {
 
-            background: white;
 
-            border-radius: 20px;
 
-            padding: 32px;
 
-            max-width: 600px;
 
-            width: 90%;
 
-            max-height: 80vh;
 
-            overflow-y: auto;
 
-            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
 
-            transform: scale(0.95);
 
-            transition: transform 0.3s;
 
-        }
 
-
 
-        .floating-modal.active .floating-content {
 
-            transform: scale(1);
 
-        }
 
-
 
-        .floating-header {
 
-            display: flex;
 
-            align-items: center;
 
-            justify-content: space-between;
 
-            margin-bottom: 24px;
 
-        }
 
-
 
-        .floating-title {
 
-            font-size: 20px;
 
-            font-weight: 700;
 
-            color: #111827;
 
-        }
 
-
 
-        .floating-close {
 
-            width: 32px;
 
-            height: 32px;
 
-            border-radius: 8px;
 
-            border: none;
 
-            background: #f3f4f6;
 
-            cursor: pointer;
 
-            display: flex;
 
-            align-items: center;
 
-            justify-content: center;
 
-            transition: all 0.2s;
 
-        }
 
-
 
-        .floating-close:hover {
 
-            background: #e5e7eb;
 
-        }
 
-
 
-        .search-input-group {
 
-            margin-bottom: 20px;
 
-        }
 
-
 
-        .search-input-label {
 
-            font-size: 13px;
 
-            font-weight: 600;
 
-            color: #6b7280;
 
-            margin-bottom: 8px;
 
-            display: block;
 
-        }
 
-
 
-        .search-input {
 
-            width: 100%;
 
-            padding: 14px 16px;
 
-            border: 1.5px solid #e5e7eb;
 
-            border-radius: 12px;
 
-            font-size: 14px;
 
-            color: #111827;
 
-            background: #fafbfc;
 
-            transition: all 0.2s;
 
-            font-family: inherit;
 
-        }
 
-
 
-        .search-input:focus {
 
-            outline: none;
 
-            border-color: #285cf5;
 
-            background: white;
 
-        }
 
-
 
-        /* ========== AI应用中心浮窗 ========== */
 
-        .app-center-content {
 
-            background: white;
 
-            border-radius: 20px;
 
-            padding: 32px;
 
-            max-width: 900px;
 
-            width: 90%;
 
-            max-height: 85vh;
 
-            display: flex;
 
-            flex-direction: column;
 
-            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
 
-            transform: scale(0.95);
 
-            transition: transform 0.3s;
 
-        }
 
-
 
-        .floating-modal.active .app-center-content {
 
-            transform: scale(1);
 
-        }
 
-
 
-        .app-filters {
 
-            display: flex;
 
-            gap: 16px;
 
-            margin-bottom: 24px;
 
-            padding-bottom: 20px;
 
-            border-bottom: 1px solid #e5e7eb;
 
-        }
 
-
 
-        .filter-group {
 
-            display: flex;
 
-            flex-direction: column;
 
-            gap: 8px;
 
-            flex: 1;
 
-            position: relative;
 
-        }
 
-
 
-        .filter-label {
 
-            font-size: 13px;
 
-            font-weight: 600;
 
-            color: #6b7280;
 
-        }
 
-
 
-        .filter-select {
 
-            height: 40px;
 
-            padding: 0 36px 0 14px;
 
-            border: 1.5px solid #e5e7eb;
 
-            border-radius: 10px;
 
-            font-size: 13px;
 
-            color: #111827;
 
-            background: #fafbfc;
 
-            cursor: pointer;
 
-            transition: all 0.2s;
 
-            outline: none;
 
-            appearance: none;
 
-            font-weight: 500;
 
-            background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
 
-            background-repeat: no-repeat;
 
-            background-position: right 12px center;
 
-            background-size: 16px;
 
-        }
 
-
 
-        .filter-select:hover {
 
-            border-color: #285cf5;
 
-            background-color: #f6f8ff;
 
-            background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23285cf5' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
 
-        }
 
-
 
-        .filter-select:focus {
 
-            border-color: #285cf5;
 
-            background-color: white;
 
-        }
 
-
 
-        .filter-select option {
 
-            padding: 10px;
 
-            font-size: 13px;
 
-        }
 
-
 
-        .app-grid {
 
-            display: grid;
 
-            grid-template-columns: repeat(3, 1fr);
 
-            gap: 16px;
 
-            flex: 1;
 
-            overflow-y: auto;
 
-            padding: 4px;
 
-        }
 
-
 
-        .app-card {
 
-            background: #fafbfc;
 
-            border: 1.5px solid #e5e7eb;
 
-            border-radius: 14px;
 
-            padding: 16px;
 
-            cursor: pointer;
 
-            transition: all 0.2s;
 
-            position: relative;
 
-            display: flex;
 
-            flex-direction: column;
 
-        }
 
-
 
-        .app-card:hover {
 
-            border-color: #285cf5;
 
-            background: #f6f8ff;
 
-            transform: translateY(-2px);
 
-            box-shadow: 0 4px 12px rgba(40, 92, 245, 0.15);
 
-        }
 
-
 
-        .app-card.selected {
 
-            border-color: #285cf5;
 
-            background: #f6f8ff;
 
-        }
 
-
 
-        .app-card.selected::after {
 
-            content: '';
 
-            position: absolute;
 
-            top: 10px;
 
-            right: 10px;
 
-            width: 20px;
 
-            height: 20px;
 
-            background: #285cf5;
 
-            border-radius: 50%;
 
-            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
 
-            background-size: 14px;
 
-            background-position: center;
 
-            background-repeat: no-repeat;
 
-        }
 
-
 
-        .app-cover {
 
-            width: 100%;
 
-            aspect-ratio: 16/9;
 
-            border-radius: 10px;
 
-            background: linear-gradient(135deg, #eef3ff 0%, #f6f8ff 100%);
 
-            display: flex;
 
-            align-items: center;
 
-            justify-content: center;
 
-            margin-bottom: 12px;
 
-            border: 1px solid #dbe6ff;
 
-        }
 
-
 
-        .app-cover svg {
 
-            width: 36px;
 
-            height: 36px;
 
-            color: #285cf5;
 
-        }
 
-
 
-        .app-info {
 
-            flex: 1;
 
-        }
 
-
 
-        .app-name {
 
-            font-size: 14px;
 
-            font-weight: 600;
 
-            color: #111827;
 
-            margin-bottom: 4px;
 
-        }
 
-
 
-        .app-description {
 
-            font-size: 12px;
 
-            color: #6b7280;
 
-            line-height: 1.4;
 
-        }
 
-
 
-        .app-meta {
 
-            display: flex;
 
-            gap: 6px;
 
-            margin-top: 8px;
 
-            flex-wrap: wrap;
 
-        }
 
-
 
-        .app-tag {
 
-            font-size: 11px;
 
-            padding: 3px 8px;
 
-            border-radius: 6px;
 
-            background: #f3f4f6;
 
-            color: #6b7280;
 
-        }
 
-
 
-        .app-center-footer {
 
-            display: flex;
 
-            justify-content: space-between;
 
-            align-items: center;
 
-            padding-top: 20px;
 
-            margin-top: 20px;
 
-            border-top: 1px solid #e5e7eb;
 
-        }
 
-
 
-        .selected-count {
 
-            font-size: 14px;
 
-            color: #6b7280;
 
-        }
 
-
 
-        .selected-count span {
 
-            font-weight: 600;
 
-            color: #285cf5;
 
-        }
 
-
 
-        .app-center-actions {
 
-            display: flex;
 
-            gap: 12px;
 
-        }
 
-
 
-        .app-center-btn {
 
-            padding: 10px 20px;
 
-            border-radius: 10px;
 
-            border: none;
 
-            font-size: 14px;
 
-            font-weight: 600;
 
-            cursor: pointer;
 
-            transition: all 0.2s;
 
-        }
 
-
 
-        .app-center-btn-cancel {
 
-            background: #f3f4f6;
 
-            color: #6b7280;
 
-        }
 
-
 
-        .app-center-btn-cancel:hover {
 
-            background: #e5e7eb;
 
-        }
 
-
 
-        .app-center-btn-confirm {
 
-            background: #285cf5;
 
-            color: white;
 
-            display: flex;
 
-            align-items: center;
 
-            gap: 6px;
 
-        }
 
-
 
-        .app-center-btn-confirm:hover {
 
-            background: #1f4ad6;
 
-        }
 
-
 
-        .app-center-btn-confirm:disabled {
 
-            opacity: 0.5;
 
-            cursor: not-allowed;
 
-        }
 
-
 
-        /* ========== AI创建应用浮窗 ========== */
 
-        .ai-create-app-content {
 
-            background: white;
 
-            border-radius: 20px;
 
-            padding: 32px;
 
-            max-width: 1000px;
 
-            width: 90%;
 
-            max-height: 85vh;
 
-            display: flex;
 
-            flex-direction: column;
 
-            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
 
-            transform: scale(0.95);
 
-            transition: transform 0.3s;
 
-        }
 
-
 
-        .floating-modal.active .ai-create-app-content {
 
-            transform: scale(1);
 
-        }
 
-
 
-        .ai-create-main {
 
-            display: grid;
 
-            grid-template-columns: 1fr 360px;
 
-            gap: 24px;
 
-            flex: 1;
 
-            min-height: 0;
 
-        }
 
-
 
-        .app-canvas-preview {
 
-            border: 2px dashed #e5e7eb;
 
-            border-radius: 16px;
 
-            background: #fafbfc;
 
-            display: flex;
 
-            align-items: center;
 
-            justify-content: center;
 
-            color: #9ca3af;
 
-            font-size: 14px;
 
-            overflow: auto;
 
-            padding: 20px;
 
-        }
 
-
 
-        .ai-chat-panel {
 
-            display: flex;
 
-            flex-direction: column;
 
-            border: 1.5px solid #e5e7eb;
 
-            border-radius: 16px;
 
-            background: #fafbfc;
 
-            overflow: hidden;
 
-        }
 
-
 
-        .ai-chat-messages {
 
-            flex: 1;
 
-            overflow-y: auto;
 
-            padding: 16px;
 
-            display: flex;
 
-            flex-direction: column;
 
-            gap: 12px;
 
-        }
 
-
 
-        .ai-chat-message {
 
-            display: flex;
 
-            gap: 10px;
 
-            max-width: 85%;
 
-        }
 
-
 
-        .ai-chat-message.user {
 
-            align-self: flex-end;
 
-            flex-direction: row-reverse;
 
-        }
 
-
 
-        .chat-avatar {
 
-            width: 32px;
 
-            height: 32px;
 
-            border-radius: 50%;
 
-            background: #285cf5;
 
-            display: flex;
 
-            align-items: center;
 
-            justify-content: center;
 
-            flex-shrink: 0;
 
-            color: white;
 
-            font-size: 14px;
 
-            font-weight: 600;
 
-        }
 
-
 
-        .ai-chat-message.user .chat-avatar {
 
-            background: #3b82f6;
 
-        }
 
-
 
-        .chat-bubble {
 
-            background: white;
 
-            padding: 10px 14px;
 
-            border-radius: 12px;
 
-            font-size: 13px;
 
-            line-height: 1.5;
 
-            color: #111827;
 
-            border: 1px solid #e5e7eb;
 
-        }
 
-
 
-        .ai-chat-message.user .chat-bubble {
 
-            background: #3b82f6;
 
-            color: white;
 
-            border-color: #3b82f6;
 
-        }
 
-
 
-        .ai-chat-input-area {
 
-            border-top: 1px solid #e5e7eb;
 
-            padding: 12px;
 
-            background: white;
 
-        }
 
-
 
-        .ai-chat-input-wrapper {
 
-            display: flex;
 
-            gap: 8px;
 
-        }
 
-
 
-        .ai-chat-input {
 
-            flex: 1;
 
-            padding: 10px 12px;
 
-            border: 1.5px solid #e5e7eb;
 
-            border-radius: 10px;
 
-            font-size: 13px;
 
-            font-family: inherit;
 
-            resize: none;
 
-            min-height: 40px;
 
-            max-height: 100px;
 
-        }
 
-
 
-        .ai-chat-input:focus {
 
-            outline: none;
 
-            border-color: #285cf5;
 
-        }
 
-
 
-        .ai-chat-send-btn {
 
-            width: 40px;
 
-            height: 40px;
 
-            border-radius: 10px;
 
-            border: none;
 
-            background: #285cf5;
 
-            color: white;
 
-            cursor: pointer;
 
-            display: flex;
 
-            align-items: center;
 
-            justify-content: center;
 
-            transition: all 0.2s;
 
-            flex-shrink: 0;
 
-        }
 
-
 
-        .ai-chat-send-btn:hover {
 
-            background: #1f4ad6;
 
-        }
 
-
 
-        .ai-chat-send-btn:disabled {
 
-            opacity: 0.5;
 
-            cursor: not-allowed;
 
-        }
 
-
 
-        .ai-chat-send-btn svg {
 
-            width: 18px;
 
-            height: 18px;
 
-        }
 
-
 
-        .ai-create-footer {
 
-            display: flex;
 
-            justify-content: flex-end;
 
-            gap: 12px;
 
-            padding-top: 20px;
 
-            margin-top: 20px;
 
-            border-top: 1px solid #e5e7eb;
 
-        }
 
-
 
-        .search-results {
 
-            display: grid;
 
-            grid-template-columns: repeat(3, 1fr);
 
-            gap: 12px;
 
-            margin-top: 20px;
 
-        }
 
-
 
-        .search-result-item {
 
-            aspect-ratio: 16/9;
 
-            background: #e5e7eb;
 
-            border-radius: 10px;
 
-            cursor: pointer;
 
-            transition: all 0.2s;
 
-            border: 2px solid transparent;
 
-            overflow: hidden;
 
-            position: relative;
 
-        }
 
-
 
-        .search-result-item:hover {
 
-            border-color: #285cf5;
 
-            transform: scale(1.05);
 
-        }
 
-
 
-        .search-result-item img {
 
-            width: 100%;
 
-            height: 100%;
 
-            object-fit: cover;
 
-        }
 
-
 
-        .floating-actions {
 
-            display: flex;
 
-            gap: 12px;
 
-            margin-top: 24px;
 
-        }
 
-
 
-        .floating-btn {
 
-            flex: 1;
 
-            padding: 14px 24px;
 
-            border-radius: 12px;
 
-            border: none;
 
-            font-size: 14px;
 
-            font-weight: 600;
 
-            cursor: pointer;
 
-            transition: all 0.2s;
 
-        }
 
-
 
-        .floating-btn-secondary {
 
-            background: #f3f4f6;
 
-            color: #374151;
 
-        }
 
-
 
-        .floating-btn-secondary:hover {
 
-            background: #e5e7eb;
 
-        }
 
-
 
-        .floating-btn-primary {
 
-            background: #285cf5;
 
-            color: white;
 
-        }
 
-
 
-        .floating-btn-primary:hover {
 
-            background: #1f4ad6;
 
-            transform: translateY(-1px);
 
-            box-shadow: 0 4px 12px rgba(40, 92, 245, 0.3);
 
-        }
 
-
 
-        .generate-preview {
 
-            width: 100%;
 
-            aspect-ratio: 16/9;
 
-            background: #fafbfc;
 
-            border: 1.5px solid #e5e7eb;
 
-            border-radius: 12px;
 
-            display: flex;
 
-            align-items: center;
 
-            justify-content: center;
 
-            margin-top: 20px;
 
-            position: relative;
 
-            overflow: hidden;
 
-        }
 
-
 
-        .generate-preview img {
 
-            width: 100%;
 
-            height: 100%;
 
-            object-fit: cover;
 
-        }
 
-
 
-        .generate-loading {
 
-            position: absolute;
 
-            inset: 0;
 
-            background: rgba(255, 255, 255, 0.9);
 
-            display: none;
 
-            align-items: center;
 
-            justify-content: center;
 
-            flex-direction: column;
 
-            gap: 12px;
 
-        }
 
-
 
-        .generate-loading.active {
 
-            display: flex;
 
-        }
 
-
 
-        .loading-spinner {
 
-            width: 40px;
 
-            height: 40px;
 
-            border: 3px solid #f3f4f6;
 
-            border-top-color: #285cf5;
 
-            border-radius: 50%;
 
-            animation: spin 1s linear infinite;
 
-        }
 
-
 
-        .loading-text {
 
-            font-size: 13px;
 
-            color: #6b7280;
 
-        }
 
-
 
-        /* 右侧面板 */
 
-        .right-panel {
 
-            width: 320px;
 
-            background: white;
 
-            border-radius: 16px;
 
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
 
-            display: flex;
 
-            flex-direction: column;
 
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 
-            position: relative;
 
-            z-index: 50;
 
-            overflow: hidden;
 
-            height: calc(100vh - 32px);
 
-            max-height: calc(100vh - 32px);
 
-        }
 
-
 
-        .right-panel.collapsed {
 
-            width: 60px;
 
-        }
 
-
 
-        .right-panel.collapsed .menu-content {
 
-            opacity: 0;
 
-            pointer-events: none;
 
-        }
 
-
 
-        .right-panel.collapsed .collapse-text,
 
-        .right-panel.collapsed .outline-panel {
 
-            display: none;
 
-        }
 
-
 
-        .outline-panel {
 
-            flex: 1;
 
-            display: flex;
 
-            flex-direction: column;
 
-            border-top: 1px solid #f0f1f3;
 
-            overflow: hidden;
 
-            min-height: 0;
 
-        }
 
-
 
-        .outline-toolbar {
 
-            display: flex;
 
-            align-items: center;
 
-            justify-content: space-between;
 
-            padding: 10px 12px;
 
-            gap: 8px;
 
-            border-bottom: 1px solid #f3f4f6;
 
-        }
 
-
 
-        .outline-toolbar-left {
 
-            display: flex;
 
-            align-items: center;
 
-            gap: 6px;
 
-            font-weight: 600;
 
-            color: #111827;
 
-        }
 
-
 
-        .outline-actions {
 
-            display: flex;
 
-            gap: 6px;
 
-        }
 
-
 
-        .outline-btn {
 
-            height: 32px;
 
-            padding: 0 10px;
 
-            border-radius: 8px;
 
-            border: 1px solid #e5e7eb;
 
-            background: #f9fafb;
 
-            color: #374151;
 
-            font-size: 12px;
 
-            display: inline-flex;
 
-            align-items: center;
 
-            gap: 6px;
 
-            cursor: pointer;
 
-            transition: all 0.2s;
 
-        }
 
-
 
-        .outline-btn:hover {
 
-            background: #eef3ff;
 
-            border-color: #285cf5;
 
-            color: #1f4ad6;
 
-        }
 
-
 
-        .outline-list {
 
-            flex: 1;
 
-            overflow-y: auto;
 
-            padding: 8px 10px 12px;
 
-            display: flex;
 
-            flex-direction: column;
 
-            gap: 6px;
 
-            min-height: 0;
 
-        }
 
-
 
-        .outline-group {
 
-            background: #f9fafb;
 
-            border: 1px solid #e5e7eb;
 
-            border-radius: 10px;
 
-            padding: 8px;
 
-            display: flex;
 
-            flex-direction: column;
 
-            gap: 6px;
 
-        }
 
-
 
-        .outline-group-header {
 
-            display: flex;
 
-            align-items: center;
 
-            justify-content: space-between;
 
-            padding: 6px 8px;
 
-            border-radius: 8px;
 
-            background: #fff;
 
-            cursor: pointer;
 
-        }
 
-
 
-        .outline-group-left {
 
-            display: flex;
 
-            align-items: center;
 
-            gap: 8px;
 
-            font-weight: 600;
 
-            color: #1f2937;
 
-        }
 
-
 
-        .outline-group-title {
 
-            max-width: 160px;
 
-            overflow: hidden;
 
-            text-overflow: ellipsis;
 
-            white-space: nowrap;
 
-            font-size: 14px;
 
-        }
 
-
 
-        .outline-items {
 
-            display: flex;
 
-            flex-direction: column;
 
-            gap: 6px;
 
-            padding-top: 4px;
 
-        }
 
-
 
-        .outline-item {
 
-            background: #fff;
 
-            border: 1px solid #e5e7eb;
 
-            border-radius: 8px;
 
-            padding: 8px 10px;
 
-            display: flex;
 
-            align-items: center;
 
-            justify-content: space-between;
 
-            gap: 8px;
 
-            cursor: grab;
 
-            transition: all 0.15s;
 
-        }
 
-
 
-        .outline-item:hover {
 
-            border-color: #285cf5;
 
-            box-shadow: 0 2px 6px rgba(0,0,0,0.05);
 
-        }
 
-
 
-        .outline-item.dragging {
 
-            opacity: 0.7;
 
-        }
 
-
 
-        .outline-item-left {
 
-            display: flex;
 
-            align-items: center;
 
-            gap: 8px;
 
-            min-width: 0;
 
-        }
 
-
 
-        .outline-index {
 
-            width: 20px;
 
-            height: 20px;
 
-            border-radius: 6px;
 
-            background: #eef3ff;
 
-            color: #1f4ad6;
 
-            display: inline-flex;
 
-            align-items: center;
 
-            justify-content: center;
 
-            font-size: 12px;
 
-            font-weight: 700;
 
-            flex-shrink: 0;
 
-        }
 
-
 
-        .outline-title {
 
-            font-size: 13px;
 
-            color: #111827;
 
-            font-weight: 600;
 
-            white-space: nowrap;
 
-            overflow: hidden;
 
-            text-overflow: ellipsis;
 
-            max-width: 140px;
 
-        }
 
-
 
-        .outline-type {
 
-            padding: 2px 8px;
 
-            border-radius: 999px;
 
-            background: #f3f4f6;
 
-            color: #4b5563;
 
-            font-size: 11px;
 
-            font-weight: 600;
 
-            flex-shrink: 0;
 
-        }
 
-
 
-        .outline-handle {
 
-            color: #9ca3af;
 
-            display: inline-flex;
 
-            align-items: center;
 
-            cursor: pointer;
 
-            opacity: 0;
 
-            pointer-events: none;
 
-            transition: opacity 0.15s ease;
 
-        }
 
-
 
-        .outline-item:hover .outline-handle {
 
-            opacity: 1;
 
-            pointer-events: auto;
 
-        }
 
-
 
-        .outline-drag-handle {
 
-            color: #9ca3af;
 
-            display: inline-flex;
 
-            align-items: center;
 
-            cursor: grab;
 
-            opacity: 0;
 
-            pointer-events: none;
 
-            transition: opacity 0.15s ease;
 
-        }
 
-
 
-        .outline-group:hover .outline-drag-handle {
 
-            opacity: 1;
 
-            pointer-events: auto;
 
-        }
 
-
 
-        .outline-delete-btn {
 
-            color: #9ca3af;
 
-            display: inline-flex;
 
-            align-items: center;
 
-            cursor: pointer;
 
-            padding: 4px;
 
-            border-radius: 8px;
 
-        }
 
-
 
-        .outline-delete-btn:hover {
 
-            color: #ef4444;
 
-            background: #fef2f2;
 
-        }
 
-
 
-        .outline-group-input {
 
-            font-size: 13px;
 
-            font-weight: 600;
 
-            color: #111827;
 
-            padding: 6px 10px;
 
-            border: 1.5px solid #285cf5;
 
-            border-radius: 8px;
 
-            outline: none;
 
-            box-shadow: 0 0 0 3px rgba(40, 92, 245, 0.1);
 
-            min-width: 120px;
 
-            max-width: 220px;
 
-        }
 
-
 
-        .outline-empty {
 
-            padding: 12px;
 
-            text-align: center;
 
-            color: #9ca3af;
 
-            font-size: 13px;
 
-            border: 1px dashed #e5e7eb;
 
-            border-radius: 10px;
 
-        }
 
-
 
-        /* ========== 交互网页样式 ========== */
 
-        /* 网页配置表单 */
 
-        .web-config-form {
 
-            padding: 20px;
 
-        }
 
-
 
-        .form-group {
 
-            margin-bottom: 24px;
 
-        }
 
-
 
-        .form-label {
 
-            display: block;
 
-            font-size: 13px;
 
-            font-weight: 600;
 
-            color: #374151;
 
-            margin-bottom: 8px;
 
-        }
 
-
 
-        .form-input {
 
-            width: 100%;
 
-            height: 44px;
 
-            padding: 0 14px;
 
-            border: 1.5px solid #e5e7eb;
 
-            border-radius: 10px;
 
-            font-size: 14px;
 
-            color: #111827;
 
-            background: white;
 
-            transition: all 0.2s;
 
-            outline: none;
 
-        }
 
-
 
-        .form-input:focus {
 
-            border-color: #285cf5;
 
-            background: #f6f8ff;
 
-        }
 
-
 
-        .form-input::placeholder {
 
-            color: #9ca3af;
 
-        }
 
-
 
-        .form-hint {
 
-            margin-top: 6px;
 
-            font-size: 12px;
 
-            color: #6b7280;
 
-        }
 
-
 
-        /* 文件上传区域 */
 
-        #uploadFilePanel .form-group {
 
-            display: flex;
 
-            flex-direction: column;
 
-            gap: 12px;
 
-        }
 
-
 
-        .file-upload-area {
 
-            border: 2px dashed #e5e7eb;
 
-            border-radius: 12px;
 
-            background: #fafbfc;
 
-            padding: 40px 20px;
 
-            text-align: center;
 
-            cursor: pointer;
 
-            transition: all 0.2s;
 
-            display: flex;
 
-            flex-direction: column;
 
-            align-items: center;
 
-            justify-content: center;
 
-            gap: 10px;
 
-            min-height: 190px; /* 对齐粘贴代码区域高度 */
 
-        }
 
-
 
-        .file-upload-area:hover {
 
-            border-color: #285cf5;
 
-            background: #f6f8ff;
 
-        }
 
-
 
-        .file-upload-area.dragover {
 
-            border-color: #285cf5;
 
-            background: #f6f8ff;
 
-            border-style: solid;
 
-        }
 
-
 
-        .file-upload-area svg {
 
-            color: #9ca3af;
 
-            margin-bottom: 12px;
 
-        }
 
-
 
-        .upload-text {
 
-            font-size: 14px;
 
-            font-weight: 500;
 
-            color: #374151;
 
-            margin-bottom: 6px;
 
-        }
 
-
 
-        .upload-hint {
 
-            font-size: 12px;
 
-            color: #6b7280;
 
-        }
 
-
 
-        /* 状态提示 */
 
-        .web-status {
 
-            margin-top: 16px;
 
-            padding: 12px 16px;
 
-            background: #f9fafb;
 
-            border-radius: 10px;
 
-            display: flex;
 
-            align-items: center;
 
-            gap: 10px;
 
-        }
 
-
 
-        .web-status .status-icon {
 
-            font-size: 18px;
 
-        }
 
-
 
-        .web-status .status-text {
 
-            font-size: 13px;
 
-            color: #6b7280;
 
-            font-weight: 500;
 
-        }
 
-
 
-        .web-status.loading .status-icon {
 
-            animation: spin 1s linear infinite;
 
-        }
 
-
 
-        .web-status.success {
 
-            background: #f0fdf4;
 
-            border: 1px solid #86efac;
 
-        }
 
-
 
-        .web-status.success .status-icon {
 
-            color: #22c55e;
 
-        }
 
-
 
-        .web-status.success .status-text {
 
-            color: #16a34a;
 
-        }
 
-
 
-        .web-status.error {
 
-            background: #fef2f2;
 
-            border: 1px solid #fecaca;
 
-        }
 
-
 
-        .web-status.error .status-icon {
 
-            color: #ef4444;
 
-        }
 
-
 
-        .web-status.error .status-text {
 
-            color: #dc2626;
 
-        }
 
-
 
-        @keyframes spin {
 
-            from { transform: rotate(0deg); }
 
-            to { transform: rotate(360deg); }
 
-        }
 
-
 
-        /* 配置操作按钮 */
 
-        .web-config-actions {
 
-            display: flex;
 
-            gap: 12px;
 
-            margin-top: 24px;
 
-        }
 
-
 
-        .config-btn {
 
-            flex: 1;
 
-            height: 44px;
 
-            border-radius: 10px;
 
-            border: none;
 
-            font-size: 14px;
 
-            font-weight: 600;
 
-            cursor: pointer;
 
-            transition: all 0.2s;
 
-        }
 
-
 
-        .config-btn-secondary {
 
-            background: #f3f4f6;
 
-            color: #6b7280;
 
-        }
 
-
 
-        .config-btn-secondary:hover {
 
-            background: #e5e7eb;
 
-        }
 
-
 
-        .config-btn-primary {
 
-            background: #285cf5;
 
-            color: white;
 
-        }
 
-
 
-        .config-btn-primary:hover {
 
-            background: #1f4ad6;
 
-        }
 
-
 
-        .config-btn-primary:disabled {
 
-            opacity: 0.5;
 
-            cursor: not-allowed;
 
-        }
 
-
 
-        .status-btn,
 
-        .crawl-btn {
 
-            display: inline-flex;
 
-            align-items: center;
 
-            justify-content: center;
 
-            gap: 8px;
 
-        }
 
-
 
-        .status-btn .btn-status-icon,
 
-        .crawl-btn .btn-status-icon {
 
-            display: inline-flex;
 
-            align-items: center;
 
-            justify-content: center;
 
-        }
 
-
 
-        .status-btn .btn-status-icon svg,
 
-        .crawl-btn .btn-status-icon svg {
 
-            width: 16px;
 
-            height: 16px;
 
-            stroke: currentColor;
 
-            fill: none;
 
-        }
 
-
 
-        .status-btn.status-loading,
 
-        .crawl-btn.status-loading {
 
-            opacity: 0.9;
 
-        }
 
-
 
-        .status-btn.status-loading .btn-status-icon svg,
 
-        .crawl-btn.status-loading .btn-status-icon svg {
 
-            animation: spin 1s linear infinite;
 
-        }
 
-
 
-        .status-btn.status-success,
 
-        .crawl-btn.status-success {
 
-            background: #f0fdf4;
 
-            color: #16a34a;
 
-            border: 1px solid #86efac;
 
-        }
 
-
 
-        .status-btn.status-error,
 
-        .crawl-btn.status-error {
 
-            background: #fef2f2;
 
-            color: #dc2626;
 
-            border: 1px solid #fecaca;
 
-        }
 
-
 
-        /* Upload Tabs */
 
-        .upload-tabs {
 
-            display: flex;
 
-            margin-bottom: 20px;
 
-            border-bottom: 1px solid #e5e7eb;
 
-        }
 
-        .upload-tab {
 
-            padding: 10px 16px;
 
-            border: none;
 
-            background-color: transparent;
 
-            cursor: pointer;
 
-            font-size: 14px;
 
-            color: #6b7280;
 
-            margin-bottom: -1px;
 
-            border-bottom: 2px solid transparent;
 
-        }
 
-        .upload-tab.active {
 
-            color: #285cf5;
 
-            border-bottom-color: #285cf5;
 
-            font-weight: 600;
 
-        }
 
-        .code-textarea {
 
-            width: 100%;
 
-            min-height: 190px; /* Increased height to match file upload area */
 
-            border: 1px solid #d1d5db;
 
-            border-radius: 8px;
 
-            padding: 12px;
 
-            font-family: monospace;
 
-            font-size: 13px;
 
-            resize: vertical;
 
-            transition: border-color 0.2s;
 
-        }
 
-        .code-textarea:focus {
 
-            outline: none;
 
-            border-color: #285cf5;
 
-        }
 
-        .file-name-display {
 
-            margin-top: 12px;
 
-            font-size: 13px;
 
-            color: #4b5563;
 
-            background-color: #f9fafb;
 
-            border-radius: 6px;
 
-            padding: 8px 12px;
 
-            border: 1px solid #e5e7eb;
 
-            display: none; /* Hidden by default */
 
-        }
 
-
 
-        /* 网页中心浮窗 */
 
-        .web-center-content {
 
-            background: white;
 
-            border-radius: 20px;
 
-            padding: 32px;
 
-            max-width: 900px;
 
-            width: 90%;
 
-            max-height: 85vh;
 
-            display: flex;
 
-            flex-direction: column;
 
-            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
 
-            transform: scale(0.95);
 
-            transition: transform 0.3s;
 
-        }
 
-
 
-        .floating-modal.active .web-center-content {
 
-            transform: scale(1);
 
-        }
 
-
 
-        .web-filters {
 
-            display: flex;
 
-            gap: 16px;
 
-            margin-bottom: 24px;
 
-            padding-bottom: 20px;
 
-            border-bottom: 1px solid #e5e7eb;
 
-        }
 
-
 
-        .web-grid {
 
-            display: grid;
 
-            grid-template-columns: repeat(3, 1fr);
 
-            gap: 16px;
 
-            flex: 1;
 
-            overflow-y: auto;
 
-            padding: 4px;
 
-        }
 
-
 
-        .web-card {
 
-            background: #fafbfc;
 
-            border: 1.5px solid #e5e7eb;
 
-            border-radius: 14px;
 
-            padding: 16px;
 
-            cursor: pointer;
 
-            transition: all 0.2s;
 
-            position: relative;
 
-            display: flex;
 
-            flex-direction: column;
 
-        }
 
-
 
-        .web-card:hover {
 
-            border-color: #285cf5;
 
-            background: #f6f8ff;
 
-            transform: translateY(-2px);
 
-            box-shadow: 0 4px 12px rgba(40, 92, 245, 0.15);
 
-        }
 
-
 
-        .web-card.selected {
 
-            border-color: #285cf5;
 
-            background: #f6f8ff;
 
-        }
 
-
 
-        .web-card.selected::after {
 
-            content: '';
 
-            position: absolute;
 
-            top: 10px;
 
-            right: 10px;
 
-            width: 20px;
 
-            height: 20px;
 
-            background: #285cf5;
 
-            border-radius: 50%;
 
-            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
 
-            background-size: 14px;
 
-            background-position: center;
 
-            background-repeat: no-repeat;
 
-        }
 
-
 
-        .web-preview {
 
-            width: 100%;
 
-            aspect-ratio: 16/9;
 
-            border-radius: 10px;
 
-            background: linear-gradient(135deg, #eef3ff 0%, #f6f8ff 100%);
 
-            display: flex;
 
-            align-items: center;
 
-            justify-content: center;
 
-            margin-bottom: 12px;
 
-            border: 1px solid #dbe6ff;
 
-            overflow: hidden;
 
-        }
 
-
 
-        .web-preview svg {
 
-            width: 36px;
 
-            height: 36px;
 
-            color: #285cf5;
 
-        }
 
-
 
-        .web-preview img {
 
-            width: 100%;
 
-            height: 100%;
 
-            object-fit: cover;
 
-        }
 
-
 
-        .web-info {
 
-            flex: 1;
 
-        }
 
-
 
-        .web-name {
 
-            font-size: 14px;
 
-            font-weight: 600;
 
-            color: #111827;
 
-            margin-bottom: 4px;
 
-        }
 
-
 
-        .web-description {
 
-            font-size: 12px;
 
-            color: #6b7280;
 
-            line-height: 1.5;
 
-            margin-bottom: 8px;
 
-            display: -webkit-box;
 
-            -webkit-line-clamp: 2;
 
-            -webkit-box-orient: vertical;
 
-            overflow: hidden;
 
-        }
 
-
 
-        .web-meta {
 
-            display: flex;
 
-            gap: 8px;
 
-            flex-wrap: wrap;
 
-        }
 
-
 
-        .web-tag {
 
-            padding: 3px 8px;
 
-            background: #f3f4f6;
 
-            border-radius: 6px;
 
-            font-size: 11px;
 
-            color: #6b7280;
 
-            font-weight: 500;
 
-        }
 
-
 
-        .web-center-footer {
 
-            display: flex;
 
-            align-items: center;
 
-            justify-content: space-between;
 
-            padding-top: 20px;
 
-            margin-top: 20px;
 
-            border-top: 1px solid #e5e7eb;
 
-        }
 
-
 
-        /* 网页详情浮窗 */
 
-        .web-detail-modal {
 
-            position: fixed;
 
-            top: 0;
 
-            left: 0;
 
-            right: 0;
 
-            bottom: 0;
 
-            background: rgba(0, 0, 0, 0.7);
 
-            display: none;
 
-            align-items: center;
 
-            justify-content: center;
 
-            z-index: 10001;
 
-            animation: fadeIn 0.3s;
 
-        }
 
-
 
-        .web-detail-modal.active {
 
-            display: flex;
 
-        }
 
-
 
-        .web-detail-content {
 
-            background: white;
 
-            border-radius: 20px;
 
-            width: 90%;
 
-            max-width: 1200px;
 
-            height: 85vh;
 
-            display: grid;
 
-            grid-template-columns: 1fr 360px;
 
-            overflow: hidden;
 
-            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
 
-        }
 
-
 
-        .web-preview-area {
 
-            background: #f9fafb;
 
-            display: flex;
 
-            flex-direction: column;
 
-            border-right: 1px solid #e5e7eb;
 
-        }
 
-
 
-        .web-preview-header {
 
-            padding: 20px 24px;
 
-            border-bottom: 1px solid #e5e7eb;
 
-            display: flex;
 
-            align-items: center;
 
-            justify-content: space-between;
 
-        }
 
-
 
-        .web-preview-title {
 
-            font-size: 16px;
 
-            font-weight: 600;
 
-            color: #111827;
 
-        }
 
-
 
-        .web-fullscreen-btn {
 
-            padding: 8px 12px;
 
-            background: #f3f4f6;
 
-            border: none;
 
-            border-radius: 8px;
 
-            color: #6b7280;
 
-            font-size: 13px;
 
-            cursor: pointer;
 
-            transition: all 0.2s;
 
-            display: flex;
 
-            align-items: center;
 
-            gap: 6px;
 
-        }
 
-
 
-        .web-fullscreen-btn:hover {
 
-            background: #e5e7eb;
 
-            color: #374151;
 
-        }
 
-
 
-        .web-preview-iframe {
 
-            flex: 1;
 
-            padding: 20px;
 
-        }
 
-
 
-        .web-preview-iframe iframe {
 
-            width: 100%;
 
-            height: 100%;
 
-            border: 1px solid #e5e7eb;
 
-            border-radius: 12px;
 
-            background: white;
 
-        }
 
-
 
-        .web-info-area {
 
-            background: white;
 
-            display: flex;
 
-            flex-direction: column;
 
-            overflow-y: auto;
 
-        }
 
-
 
-        .web-detail-header {
 
-            padding: 24px;
 
-            border-bottom: 1px solid #e5e7eb;
 
-        }
 
-
 
-        .web-detail-name {
 
-            font-size: 18px;
 
-            font-weight: 600;
 
-            color: #111827;
 
-            margin-bottom: 12px;
 
-        }
 
-
 
-        .web-meta-item {
 
-            display: flex;
 
-            align-items: center;
 
-            gap: 8px;
 
-            margin-bottom: 8px;
 
-            font-size: 13px;
 
-            color: #6b7280;
 
-        }
 
-
 
-        .web-meta-item svg {
 
-            width: 16px;
 
-            height: 16px;
 
-        }
 
-
 
-        .web-detail-body {
 
-            flex: 1;
 
-            padding: 24px;
 
-        }
 
-
 
-        .web-detail-section {
 
-            margin-bottom: 24px;
 
-        }
 
-
 
-        .web-detail-section-title {
 
-            font-size: 14px;
 
-            font-weight: 600;
 
-            color: #374151;
 
-            margin-bottom: 8px;
 
-        }
 
-
 
-        .web-detail-section-content {
 
-            font-size: 13px;
 
-            color: #6b7280;
 
-            line-height: 1.6;
 
-        }
 
-
 
-        .web-detail-footer {
 
-            padding: 20px 24px;
 
-            border-top: 1px solid #e5e7eb;
 
-            display: flex;
 
-            gap: 12px;
 
-        }
 
-
 
-        .web-detail-btn {
 
-            flex: 1;
 
-            height: 44px;
 
-            border-radius: 10px;
 
-            border: none;
 
-            font-size: 14px;
 
-            font-weight: 600;
 
-            cursor: pointer;
 
-            transition: all 0.2s;
 
-        }
 
-
 
-        .web-detail-btn-secondary {
 
-            background: #f3f4f6;
 
-            color: #6b7280;
 
-        }
 
-
 
-        .web-detail-btn-secondary:hover {
 
-            background: #e5e7eb;
 
-        }
 
-
 
-        .web-detail-btn-primary {
 
-            background: #285cf5;
 
-            color: white;
 
-        }
 
-
 
-        .web-detail-btn-primary:hover {
 
-            background: #1f4ad6;
 
-        }
 
-
 
-        /* ========== 创建入口弹窗 ========== */
 
-        .modal-overlay {
 
-            position: fixed;
 
-            top: 0;
 
-            left: 0;
 
-            right: 0;
 
-            bottom: 0;
 
-            background: rgba(0, 0, 0, 0.5);
 
-            backdrop-filter: blur(4px);
 
-            display: flex;
 
-            align-items: center;
 
-            justify-content: center;
 
-            z-index: 1000;
 
-            opacity: 0;
 
-            pointer-events: none;
 
-            transition: opacity 0.3s;
 
-        }
 
-
 
-        .modal-overlay.active {
 
-            opacity: 1;
 
-            pointer-events: all;
 
-        }
 
-
 
-        .settings-modal {
 
-            background: #fff;
 
-            border-radius: 16px;
 
-            padding: 20px;
 
-            width: 360px;
 
-            box-shadow: 0 16px 40px rgba(0,0,0,0.16);
 
-            display: flex;
 
-            flex-direction: column;
 
-            gap: 16px;
 
-            position: relative;
 
-        }
 
-
 
-        .settings-header {
 
-            display: flex;
 
-            align-items: center;
 
-            justify-content: space-between;
 
-            margin-bottom: 4px;
 
-        }
 
-
 
-        .settings-title {
 
-            font-size: 16px;
 
-            font-weight: 700;
 
-            color: #111827;
 
-        }
 
-
 
-        .settings-body {
 
-            display: flex;
 
-            flex-direction: column;
 
-            gap: 12px;
 
-        }
 
-
 
-        .settings-row {
 
-            display: flex;
 
-            gap: 12px;
 
-        }
 
-
 
-        .settings-actions {
 
-            display: flex;
 
-            justify-content: flex-end;
 
-            gap: 10px;
 
-        }
 
-
 
-        .settings-btn {
 
-            height: 36px;
 
-            padding: 0 14px;
 
-            border-radius: 10px;
 
-            border: 1px solid #e5e7eb;
 
-            background: #f9fafb;
 
-            color: #374151;
 
-            font-size: 13px;
 
-            font-weight: 600;
 
-            cursor: pointer;
 
-            transition: all 0.2s;
 
-        }
 
-
 
-        .settings-btn:hover {
 
-            background: #fff;
 
-            border-color: #d1d5db;
 
-        }
 
-
 
-        .settings-btn.primary {
 
-            background: #285cf5;
 
-            color: #fff;
 
-            border-color: #285cf5;
 
-            box-shadow: 0 4px 12px rgba(40, 92, 245, 0.24);
 
-        }
 
-
 
-        .settings-btn.primary:hover {
 
-            background: #1f4ad6;
 
-        }
 
-
 
-        .confirm-modal {
 
-            background: #fff;
 
-            border-radius: 16px;
 
-            padding: 22px;
 
-            width: 360px;
 
-            box-shadow: 0 16px 40px rgba(0,0,0,0.16);
 
-            display: flex;
 
-            flex-direction: column;
 
-            gap: 14px;
 
-        }
 
-
 
-        .confirm-title {
 
-            font-size: 16px;
 
-            font-weight: 700;
 
-            color: #111827;
 
-        }
 
-
 
-        .confirm-text {
 
-            font-size: 13px;
 
-            color: #4b5563;
 
-            line-height: 1.6;
 
-        }
 
-
 
-        .confirm-actions {
 
-            display: flex;
 
-            justify-content: flex-end;
 
-            gap: 10px;
 
-        }
 
-
 
-        /* PPT解析浮窗 */
 
-        .ppt-parse-overlay {
 
-            position: fixed;
 
-            inset: 0;
 
-            background: rgba(0, 0, 0, 0.4);
 
-            backdrop-filter: blur(2px);
 
-            display: flex;
 
-            align-items: center;
 
-            justify-content: center;
 
-            z-index: 1200;
 
-            opacity: 0;
 
-            pointer-events: none;
 
-            transition: opacity 0.25s ease;
 
-        }
 
-
 
-        .ppt-parse-overlay.active {
 
-            opacity: 1;
 
-            pointer-events: all;
 
-        }
 
-
 
-        .ppt-parse-card {
 
-            background: #ffffff;
 
-            border-radius: 16px;
 
-            padding: 24px;
 
-            width: 360px;
 
-            box-shadow: 0 16px 40px rgba(0,0,0,0.16);
 
-            display: flex;
 
-            flex-direction: column;
 
-            gap: 14px;
 
-            text-align: center;
 
-        }
 
-
 
-        .ppt-parse-icon {
 
-            width: 56px;
 
-            height: 56px;
 
-            border-radius: 14px;
 
-            margin: 0 auto;
 
-            display: flex;
 
-            align-items: center;
 
-            justify-content: center;
 
-            background: #eef3ff;
 
-            color: #285cf5;
 
-        }
 
-
 
-        .ppt-parse-icon svg {
 
-            width: 26px;
 
-            height: 26px;
 
-            stroke: currentColor;
 
-            fill: none;
 
-        }
 
-
 
-        .ppt-parse-icon.success {
 
-            background: #f0fdf4;
 
-            color: #16a34a;
 
-        }
 
-
 
-        .ppt-parse-icon.error {
 
-            background: #fef2f2;
 
-            color: #dc2626;
 
-        }
 
-
 
-        .ppt-parse-title {
 
-            font-size: 16px;
 
-            font-weight: 700;
 
-            color: #111827;
 
-        }
 
-
 
-        .ppt-parse-desc {
 
-            font-size: 13px;
 
-            color: #6b7280;
 
-        }
 
-
 
-        .ppt-parse-actions {
 
-            display: flex;
 
-            gap: 10px;
 
-            margin-top: 4px;
 
-        }
 
-
 
-        .ppt-parse-btn {
 
-            flex: 1;
 
-            height: 40px;
 
-            border-radius: 10px;
 
-            border: none;
 
-            font-size: 14px;
 
-            font-weight: 600;
 
-            cursor: pointer;
 
-            transition: all 0.2s;
 
-        }
 
-
 
-        .ppt-parse-btn.primary {
 
-            background: #285cf5;
 
-            color: white;
 
-        }
 
-
 
-        .ppt-parse-btn.primary:hover {
 
-            background: #1f4ad6;
 
-        }
 
-
 
-        .ppt-parse-btn.secondary {
 
-            background: #f3f4f6;
 
-            color: #4b5563;
 
-        }
 
-
 
-        .ppt-parse-btn.secondary:hover {
 
-            background: #e5e7eb;
 
-        }
 
-
 
-        .create-modal {
 
-            background: white;
 
-            border-radius: 20px;
 
-            padding: 40px;
 
-            max-width: 900px;
 
-            width: 90%;
 
-            max-height: 85vh;
 
-            overflow-y: auto;
 
-            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
 
-            transform: scale(0.9);
 
-            transition: transform 0.3s;
 
-        }
 
-
 
-        .modal-overlay.active .create-modal {
 
-            transform: scale(1);
 
-        }
 
-
 
-        .modal-header {
 
-            text-align: center;
 
-            margin-bottom: 32px;
 
-        }
 
-
 
-        .modal-header h2 {
 
-            font-size: 28px;
 
-            font-weight: 700;
 
-            color: #111827;
 
-            margin-bottom: 8px;
 
-        }
 
-
 
-        .modal-header p {
 
-            font-size: 15px;
 
-            color: #6b7280;
 
-        }
 
-
 
-        .create-options {
 
-            display: grid;
 
-            grid-template-columns: repeat(2, 1fr);
 
-            gap: 16px;
 
-        }
 
-
 
-        .create-card {
 
-            background: #fafbfc;
 
-            border: 1.5px solid #e5e7eb;
 
-            border-radius: 16px;
 
-            padding: 24px 20px;
 
-            cursor: pointer;
 
-            transition: all 0.2s;
 
-            display: flex;
 
-            flex-direction: column;
 
-            align-items: center;
 
-            text-align: center;
 
-            position: relative;
 
-        }
 
-
 
-        .create-card:hover {
 
-            border-color: #285cf5;
 
-            background: #f6f8ff;
 
-            transform: translateY(-2px);
 
-            box-shadow: 0 4px 12px rgba(40, 92, 245, 0.15);
 
-        }
 
-
 
-        .create-card.featured {
 
-            background: linear-gradient(135deg, #eef3ff 0%, #f6f8ff 100%);
 
-            border-color: #285cf5;
 
-        }
 
-
 
-        .create-card.featured::before {
 
-            content: '推荐';
 
-            position: absolute;
 
-            top: 12px;
 
-            right: 12px;
 
-            background: #285cf5;
 
-            color: white;
 
-            font-size: 11px;
 
-            font-weight: 600;
 
-            padding: 4px 10px;
 
-            border-radius: 12px;
 
-        }
 
-
 
-        .create-icon {
 
-            width: 56px;
 
-            height: 56px;
 
-            border-radius: 14px;
 
-            background: white;
 
-            display: flex;
 
-            align-items: center;
 
-            justify-content: center;
 
-            margin-bottom: 16px;
 
-        }
 
-
 
-        .create-icon svg {
 
-            width: 28px;
 
-            height: 28px;
 
-            color: #6b7280;
 
-        }
 
-
 
-        .create-card.featured .create-icon svg {
 
-            color: #285cf5;
 
-        }
 
-
 
-        .create-card h3 {
 
-            font-size: 16px;
 
-            font-weight: 600;
 
-            color: #111827;
 
-            margin-bottom: 6px;
 
-        }
 
-
 
-        .create-card p {
 
-            font-size: 13px;
 
-            color: #6b7280;
 
-            line-height: 1.4;
 
-        }
 
-
 
-        .modal-close {
 
-            position: absolute;
 
-            top: 20px;
 
-            right: 20px;
 
-            width: 36px;
 
-            height: 36px;
 
-            border-radius: 10px;
 
-            border: none;
 
-            background: #f3f4f6;
 
-            cursor: pointer;
 
-            display: flex;
 
-            align-items: center;
 
-            justify-content: center;
 
-            transition: all 0.2s;
 
-        }
 
-
 
-        .modal-close:hover {
 
-            background: #e5e7eb;
 
-        }
 
-
 
-        /* ========== 发布弹窗 ========== */
 
-        .publish-modal {
 
-            background: white;
 
-            border-radius: 20px;
 
-            padding: 28px;
 
-            max-width: 780px;
 
-            width: 90%;
 
-            max-height: 85vh;
 
-            overflow-y: auto;
 
-            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
 
-            transform: scale(0.9);
 
-            transition: transform 0.3s;
 
-            position: relative;
 
-        }
 
-
 
-        .modal-overlay.active .publish-modal {
 
-            transform: scale(1);
 
-        }
 
-
 
-        .publish-header {
 
-            margin-bottom: 18px;
 
-            padding-bottom: 12px;
 
-            border-bottom: 1px solid #f0f1f3;
 
-            text-align: center;
 
-        }
 
-
 
-        .publish-title {
 
-            font-size: 22px;
 
-            font-weight: 700;
 
-            color: #111827;
 
-            margin-bottom: 8px;
 
-        }
 
-
 
-        .publish-course-name {
 
-            font-size: 18px;
 
-            font-weight: 600;
 
-            color: #111827;
 
-            padding: 10px 16px;
 
-            border: 1.5px solid transparent;
 
-            border-radius: 10px;
 
-            cursor: text;
 
-            transition: all 0.2s;
 
-            display: inline-block;
 
-            min-width: 120px;
 
-            max-width: 500px;
 
-        }
 
-
 
-        .publish-course-name:hover {
 
-            background: #fafbfc;
 
-            border-color: #e5e7eb;
 
-        }
 
-
 
-        .publish-course-name-input {
 
-            font-size: 18px;
 
-            font-weight: 600;
 
-            color: #111827;
 
-            padding: 10px 16px;
 
-            border: 1.5px solid #285cf5;
 
-            border-radius: 10px;
 
-            outline: none;
 
-            box-shadow: 0 0 0 3px rgba(40, 92, 245, 0.1);
 
-            min-width: 120px;
 
-            max-width: 500px;
 
-            text-align: center;
 
-        }
 
-
 
-        .publish-content {
 
-            display: grid;
 
-            grid-template-columns: 1fr 260px;
 
-            gap: 16px;
 
-        }
 
-
 
-        .publish-form {
 
-            display: flex;
 
-            flex-direction: column;
 
-            gap: 14px;
 
-        }
 
-
 
-        .publish-cover-section {
 
-            display: flex;
 
-            flex-direction: column;
 
-            gap: 12px;
 
-        }
 
-
 
-        .publish-cover-label {
 
-            font-size: 14px;
 
-            font-weight: 600;
 
-            color: #374151;
 
-        }
 
-
 
-        .publish-cover-wrapper {
 
-            position: relative;
 
-            width: 100%;
 
-            aspect-ratio: 16/9;
 
-            border-radius: 12px;
 
-            overflow: hidden;
 
-            border: 2px dashed #d1d5db;
 
-            background: #fafbfc;
 
-            cursor: default;
 
-            transition: all 0.2s;
 
-            display: flex;
 
-            align-items: center;
 
-            justify-content: center;
 
-        }
 
-
 
-        .publish-cover-wrapper:hover {
 
-            border-color: #285cf5;
 
-            background: #f6f8ff;
 
-        }
 
-
 
-        .publish-cover-wrapper img {
 
-            width: 100%;
 
-            height: 100%;
 
-            object-fit: cover;
 
-            position: absolute;
 
-            top: 0;
 
-            left: 0;
 
-        }
 
-
 
-        .publish-cover-placeholder {
 
-            color: #9ca3af;
 
-            text-align: center;
 
-            z-index: 1;
 
-        }
 
-
 
-        .publish-cover-placeholder svg {
 
-            width: 48px;
 
-            height: 48px;
 
-            margin-bottom: 8px;
 
-            color: #d1d5db;
 
-        }
 
-
 
-        .publish-cover-placeholder p {
 
-            font-size: 13px;
 
-            font-weight: 500;
 
-        }
 
-
 
-        /* 课程封面悬浮菜单 */
 
-        .publish-cover-menu {
 
-            position: absolute;
 
-            top: 50%;
 
-            left: 50%;
 
-            transform: translate(-50%, -50%);
 
-            background: white;
 
-            border-radius: 12px;
 
-            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
 
-            padding: 8px;
 
-            display: none;
 
-            flex-direction: column;
 
-            gap: 4px;
 
-            z-index: 1000;
 
-            min-width: 160px;
 
-        }
 
-
 
-        .publish-cover-wrapper:hover .publish-cover-menu {
 
-            display: flex;
 
-        }
 
-
 
-        .publish-cover-menu-item {
 
-            padding: 12px 14px;
 
-            border-radius: 8px;
 
-            cursor: pointer;
 
-            transition: all 0.2s;
 
-            display: flex;
 
-            align-items: center;
 
-            gap: 10px;
 
-            font-size: 13px;
 
-            color: #374151;
 
-            font-weight: 500;
 
-        }
 
-
 
-        .publish-cover-menu-item:hover {
 
-            background: #eef3ff;
 
-            color: #285cf5;
 
-        }
 
-
 
-        .publish-cover-menu-item svg {
 
-            width: 18px;
 
-            height: 18px;
 
-            flex-shrink: 0;
 
-        }
 
-
 
-        .publish-cover-actions {
 
-            position: absolute;
 
-            bottom: 12px;
 
-            right: 12px;
 
-            display: none;
 
-            gap: 8px;
 
-            z-index: 999;
 
-        }
 
-
 
-        .publish-cover-wrapper:hover .publish-cover-actions {
 
-            display: flex;
 
-        }
 
-
 
-        .cover-action-btn {
 
-            width: 36px;
 
-            height: 36px;
 
-            border-radius: 8px;
 
-            border: none;
 
-            background: rgba(255, 255, 255, 0.95);
 
-            backdrop-filter: blur(4px);
 
-            cursor: pointer;
 
-            display: flex;
 
-            align-items: center;
 
-            justify-content: center;
 
-            transition: all 0.2s;
 
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 
-        }
 
-
 
-        .cover-action-btn:hover {
 
-            background: white;
 
-            transform: translateY(-2px);
 
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 
-        }
 
-
 
-        .cover-action-btn svg {
 
-            width: 18px;
 
-            height: 18px;
 
-            color: #6b7280;
 
-        }
 
-
 
-        .cover-action-btn:hover svg {
 
-            color: #285cf5;
 
-        }
 
-
 
-        .cover-action-btn.delete:hover svg {
 
-            color: #dc2626;
 
-        }
 
-
 
-        .form-group {
 
-            display: flex;
 
-            flex-direction: column;
 
-            gap: 10px;
 
-        }
 
-
 
-        .form-label {
 
-            font-size: 14px;
 
-            font-weight: 600;
 
-            color: #374151;
 
-            display: flex;
 
-            align-items: center;
 
-            gap: 6px;
 
-        }
 
-
 
-        .form-label .required {
 
-            color: #dc2626;
 
-        }
 
-
 
-        .form-select {
 
-            height: 44px;
 
-            padding: 0 16px;
 
-            border: 1.5px solid #e5e7eb;
 
-            border-radius: 12px;
 
-            font-size: 14px;
 
-            color: #111827;
 
-            background: white;
 
-            cursor: pointer;
 
-            transition: all 0.2s;
 
-            outline: none;
 
-            appearance: none;
 
-            background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
 
-            background-repeat: no-repeat;
 
-            background-position: right 16px center;
 
-            padding-right: 40px;
 
-        }
 
-
 
-        .form-select:hover {
 
-            border-color: #d1d5db;
 
-        }
 
-
 
-        .form-select:focus {
 
-            border-color: #285cf5;
 
-            box-shadow: 0 0 0 3px rgba(40, 92, 245, 0.1);
 
-        }
 
-
 
-        .form-row {
 
-            display: grid;
 
-            grid-template-columns: 1fr 1fr;
 
-            gap: 16px;
 
-        }
 
-
 
-        .visibility-options {
 
-            display: flex;
 
-            flex-direction: column;
 
-            gap: 12px;
 
-        }
 
-
 
-        .radio-option {
 
-            display: flex;
 
-            align-items: center;
 
-            padding: 14px 16px;
 
-            border: 1.5px solid #e5e7eb;
 
-            border-radius: 12px;
 
-            cursor: pointer;
 
-            transition: all 0.2s;
 
-            background: white;
 
-        }
 
-
 
-        .radio-option:hover {
 
-            border-color: #d1d5db;
 
-            background: #fafbfc;
 
-        }
 
-
 
-        .radio-option.selected {
 
-            border-color: #285cf5;
 
-            background: #f6f8ff;
 
-        }
 
-
 
-        .radio-option input[type="radio"] {
 
-            display: none;
 
-        }
 
-
 
-        .radio-custom {
 
-            width: 20px;
 
-            height: 20px;
 
-            border: 2px solid #d1d5db;
 
-            border-radius: 50%;
 
-            margin-right: 12px;
 
-            position: relative;
 
-            flex-shrink: 0;
 
-            transition: all 0.2s;
 
-        }
 
-
 
-        .radio-option.selected .radio-custom {
 
-            border-color: #285cf5;
 
-        }
 
-
 
-        .radio-custom::after {
 
-            content: '';
 
-            position: absolute;
 
-            top: 50%;
 
-            left: 50%;
 
-            transform: translate(-50%, -50%) scale(0);
 
-            width: 10px;
 
-            height: 10px;
 
-            border-radius: 50%;
 
-            background: #285cf5;
 
-            transition: transform 0.2s;
 
-        }
 
-
 
-        .radio-option.selected .radio-custom::after {
 
-            transform: translate(-50%, -50%) scale(1);
 
-        }
 
-
 
-        .radio-content {
 
-            flex: 1;
 
-        }
 
-
 
-        .radio-label {
 
-            font-size: 14px;
 
-            font-weight: 600;
 
-            color: #111827;
 
-            margin-bottom: 4px;
 
-        }
 
-
 
-        .radio-description {
 
-            font-size: 13px;
 
-            color: #6b7280;
 
-            line-height: 1.4;
 
-        }
 
-
 
-        .publish-actions {
 
-            display: flex;
 
-            gap: 10px;
 
-            margin-top: 18px;
 
-            padding-top: 14px;
 
-            border-top: 1px solid #f0f1f3;
 
-        }
 
-
 
-        .publish-btn {
 
-            flex: 1;
 
-            height: 44px;
 
-            border-radius: 12px;
 
-            font-size: 15px;
 
-            font-weight: 600;
 
-            cursor: pointer;
 
-            transition: all 0.2s;
 
-            border: none;
 
-            display: flex;
 
-            align-items: center;
 
-            justify-content: center;
 
-            gap: 8px;
 
-        }
 
-
 
-        .publish-btn-cancel {
 
-            background: white;
 
-            color: #6b7280;
 
-            border: 1.5px solid #e5e7eb;
 
-        }
 
-
 
-        .publish-btn-cancel:hover {
 
-            background: #f9fafb;
 
-            border-color: #d1d5db;
 
-        }
 
-
 
-        .publish-btn-confirm {
 
-            background: #285cf5;
 
-            color: white;
 
-            box-shadow: 0 2px 8px rgba(40, 92, 245, 0.2);
 
-        }
 
-
 
-        .publish-btn-confirm:hover {
 
-            background: #1f4ad6;
 
-            box-shadow: 0 4px 12px rgba(40, 92, 245, 0.3);
 
-            transform: translateY(-1px);
 
-        }
 
-
 
-        .publish-btn-confirm svg {
 
-            width: 18px;
 
-            height: 18px;
 
-        }
 
-
 
-        /* ========== 互动工具样式 ========== */
 
-        .tools-intro {
 
-            padding: 20px;
 
-            text-align: center;
 
-            background: #fafbfc;
 
-            border-radius: 12px;
 
-            margin: 16px 20px;
 
-        }
 
-
 
-        .tools-intro-image {
 
-            margin-bottom: 12px;
 
-            display: flex;
 
-            justify-content: center;
 
-        }
 
-
 
-        .tools-intro-text {
 
-            font-size: 13px;
 
-            color: #6b7280;
 
-            font-weight: 500;
 
-        }
 
-
 
-        .tools-grid {
 
-            display: grid;
 
-            grid-template-columns: repeat(2, 1fr);
 
-            gap: 12px;
 
-            padding: 0 20px 20px;
 
-        }
 
-
 
-        .tool-card {
 
-            background: white;
 
-            border: 1.5px solid #e5e7eb;
 
-            border-radius: 12px;
 
-            padding: 14px 16px;
 
-            cursor: pointer;
 
-            transition: all 0.2s;
 
-            display: flex;
 
-            flex-direction: row;
 
-            align-items: center;
 
-            gap: 12px;
 
-        }
 
-
 
-        .tool-card:hover {
 
-            border-color: #285cf5;
 
-            background: #f6f8ff;
 
-            transform: translateY(-2px);
 
-            box-shadow: 0 4px 12px rgba(40, 92, 245, 0.15);
 
-        }
 
-
 
-        .tool-icon {
 
-            width: 40px;
 
-            height: 40px;
 
-            border-radius: 10px;
 
-            background: #f9fafb;
 
-            display: flex;
 
-            align-items: center;
 
-            justify-content: center;
 
-            transition: all 0.2s;
 
-            flex-shrink: 0;
 
-        }
 
-
 
-        .tool-card:hover .tool-icon {
 
-            background: #eef3ff;
 
-        }
 
-
 
-        .tool-icon svg {
 
-            width: 20px;
 
-            height: 20px;
 
-            color: #6b7280;
 
-        }
 
-
 
-        .tool-card:hover .tool-icon svg {
 
-            color: #285cf5;
 
-        }
 
-
 
-        .tool-name {
 
-            font-size: 14px;
 
-            font-weight: 600;
 
-            color: #374151;
 
-            flex: 1;
 
-        }
 
-
 
-        /* 面板内容包装器 */
 
-        .panel-content-wrapper {
 
-            flex: 1;
 
-            position: relative;
 
-            overflow: hidden;
 
-        }
 
-
 
-        /* 工具配置视图 */
 
-        .tools-config-view {
 
-            position: absolute;
 
-            top: 0;
 
-            left: 0;
 
-            right: 0;
 
-            bottom: 0;
 
-            background: white;
 
-            display: flex;
 
-            flex-direction: column;
 
-            z-index: 10;
 
-        }
 
-
 
-        .tools-config-view.hidden {
 
-            display: none;
 
-        }
 
-
 
-        /* 通用hidden类 */
 
-        .hidden {
 
-            display: none !important;
 
-        }
 
-
 
-        .config-header {
 
-            padding: 20px 20px 16px;
 
-            border-bottom: 1px solid #f3f4f6;
 
-            display: flex;
 
-            align-items: center;
 
-            gap: 12px;
 
-        }
 
-
 
-        .config-back-btn {
 
-            width: 32px;
 
-            height: 32px;
 
-            border-radius: 8px;
 
-            border: none;
 
-            background: #f9fafb;
 
-            cursor: pointer;
 
-            display: flex;
 
-            align-items: center;
 
-            justify-content: center;
 
-            transition: all 0.2s;
 
-            color: #6b7280;
 
-        }
 
-
 
-        .config-back-btn:hover {
 
-            background: #eef3ff;
 
-            color: #285cf5;
 
-        }
 
-
 
-        .config-tool-name {
 
-            font-size: 15px;
 
-            font-weight: 600;
 
-            color: #111827;
 
-        }
 
-
 
-        .config-content {
 
-            flex: 1;
 
-            overflow-y: auto;
 
-            padding: 20px;
 
-        }
 
-
 
-        .config-section {
 
-            margin-bottom: 24px;
 
-        }
 
-
 
-        .config-label {
 
-            font-size: 13px;
 
-            font-weight: 600;
 
-            color: #374151;
 
-            margin-bottom: 10px;
 
-            display: block;
 
-        }
 
-
 
-        .config-switch {
 
-            display: flex;
 
-            align-items: center;
 
-            justify-content: space-between;
 
-            padding: 14px 16px;
 
-            background: #fafbfc;
 
-            border: 1.5px solid #e5e7eb;
 
-            border-radius: 12px;
 
-            margin-bottom: 10px;
 
-        }
 
-
 
-        .config-switch-label {
 
-            font-size: 14px;
 
-            color: #374151;
 
-            font-weight: 500;
 
-        }
 
-
 
-        .switch-toggle {
 
-            position: relative;
 
-            width: 48px;
 
-            height: 28px;
 
-            background: #e5e7eb;
 
-            border-radius: 14px;
 
-            cursor: pointer;
 
-            transition: all 0.3s;
 
-        }
 
-
 
-        .switch-toggle.active {
 
-            background: #285cf5;
 
-        }
 
-
 
-        .switch-toggle::after {
 
-            content: '';
 
-            position: absolute;
 
-            top: 3px;
 
-            left: 3px;
 
-            width: 22px;
 
-            height: 22px;
 
-            background: white;
 
-            border-radius: 50%;
 
-            transition: all 0.3s;
 
-        }
 
-
 
-        .switch-toggle.active::after {
 
-            left: 23px;
 
-        }
 
-
 
-        .config-mode-list {
 
-            display: flex;
 
-            flex-direction: column;
 
-            gap: 8px;
 
-        }
 
-
 
-        .mode-item {
 
-            display: flex;
 
-            align-items: center;
 
-            gap: 12px;
 
-            padding: 12px;
 
-            background: #fafbfc;
 
-            border: 1.5px solid #e5e7eb;
 
-            border-radius: 10px;
 
-            cursor: pointer;
 
-            transition: all 0.2s;
 
-        }
 
-
 
-        .mode-item:hover {
 
-            border-color: #285cf5;
 
-            background: #f6f8ff;
 
-        }
 
-
 
-        .mode-checkbox {
 
-            width: 20px;
 
-            height: 20px;
 
-            border: 2px solid #d1d5db;
 
-            border-radius: 4px;
 
-            display: flex;
 
-            align-items: center;
 
-            justify-content: center;
 
-            transition: all 0.2s;
 
-        }
 
-
 
-        .mode-item.active .mode-checkbox {
 
-            background: #285cf5;
 
-            border-color: #285cf5;
 
-        }
 
-
 
-        .mode-checkbox svg {
 
-            width: 14px;
 
-            height: 14px;
 
-            color: white;
 
-            display: none;
 
-        }
 
-
 
-        .mode-item.active .mode-checkbox svg {
 
-            display: block;
 
-        }
 
-
 
-        .mode-radio {
 
-            width: 20px;
 
-            height: 20px;
 
-            border: 2px solid #d1d5db;
 
-            border-radius: 50%;
 
-            display: flex;
 
-            align-items: center;
 
-            justify-content: center;
 
-            transition: all 0.2s;
 
-        }
 
-
 
-        .mode-item.active .mode-radio {
 
-            border-color: #285cf5;
 
-        }
 
-
 
-        .mode-radio-dot {
 
-            width: 10px;
 
-            height: 10px;
 
-            border-radius: 50%;
 
-            background: transparent;
 
-            transition: all 0.2s;
 
-        }
 
-
 
-        .mode-item.active .mode-radio-dot {
 
-            background: #285cf5;
 
-        }
 
-
 
-        .mode-label {
 
-            font-size: 13px;
 
-            color: #374151;
 
-            font-weight: 500;
 
-        }
 
-
 
-        /* 填空符按钮 */
 
-        .question-input-wrapper {
 
-            position: relative;
 
-        }
 
-
 
-        .add-blank-btn {
 
-            position: absolute;
 
-            right: 8px;
 
-            bottom: 8px;
 
-            height: 32px;
 
-            padding: 0 12px;
 
-            border: 1.5px solid #e5e7eb;
 
-            border-radius: 8px;
 
-            background: white;
 
-            color: #6b7280;
 
-            cursor: pointer;
 
-            transition: all 0.2s;
 
-            display: flex;
 
-            align-items: center;
 
-            gap: 6px;
 
-            font-size: 12px;
 
-            font-weight: 500;
 
-        }
 
-
 
-        .add-blank-btn svg {
 
-            width: 14px;
 
-            height: 14px;
 
-        }
 
-
 
-        .add-blank-btn:hover {
 
-            border-color: #285cf5;
 
-            color: #285cf5;
 
-            background: #f6f8ff;
 
-        }
 
-
 
-        /* 图片上传按钮 */
 
-        .upload-image-btn {
 
-            position: absolute;
 
-            right: 8px;
 
-            bottom: 8px;
 
-            width: 32px;
 
-            height: 32px;
 
-            border: 1.5px solid #e5e7eb;
 
-            border-radius: 8px;
 
-            background: white;
 
-            color: #6b7280;
 
-            cursor: pointer;
 
-            transition: all 0.2s;
 
-            display: flex;
 
-            align-items: center;
 
-            justify-content: center;
 
-            z-index: 5;
 
-        }
 
-
 
-        .upload-image-btn svg {
 
-            width: 16px;
 
-            height: 16px;
 
-        }
 
-
 
-        .upload-image-btn:hover {
 
-            border-color: #285cf5;
 
-            color: #285cf5;
 
-            background: #f6f8ff;
 
-        }
 
-
 
-        /* 带图片按钮的输入框容器 */
 
-        .input-with-image {
 
-            position: relative;
 
-        }
 
-
 
-        .input-with-image textarea,
 
-        .input-with-image .option-input {
 
-            padding-right: 48px;
 
-        }
 
-
 
-        /* 图片预览 */
 
-        .image-preview {
 
-            position: relative;
 
-            margin-top: 12px;
 
-            margin-bottom: 8px;
 
-            max-width: 200px;
 
-        }
 
-
 
-        .image-preview img {
 
-            width: 100%;
 
-            height: auto;
 
-            border-radius: 8px;
 
-            border: 1.5px solid #e5e7eb;
 
-        }
 
-
 
-        .remove-image-btn {
 
-            position: absolute;
 
-            top: 8px;
 
-            right: 8px;
 
-            width: 24px;
 
-            height: 24px;
 
-            border-radius: 50%;
 
-            border: none;
 
-            background: rgba(0, 0, 0, 0.6);
 
-            color: white;
 
-            cursor: pointer;
 
-            display: flex;
 
-            align-items: center;
 
-            justify-content: center;
 
-            transition: all 0.2s;
 
-        }
 
-
 
-        .remove-image-btn:hover {
 
-            background: rgba(220, 38, 38, 0.9);
 
-        }
 
-
 
-        .remove-image-btn svg {
 
-            width: 14px;
 
-            height: 14px;
 
-        }
 
-
 
-        /* 排序项样式 */
 
-        .sort-item {
 
-            display: flex;
 
-            align-items: center;
 
-            gap: 12px;
 
-            position: relative;
 
-            padding: 6px 8px;
 
-            border-radius: 10px;
 
-            transition: all 0.2s;
 
-            border: 1px solid transparent;
 
-        }
 
-
 
-        .sort-item:hover {
 
-            background: #eef3ff;
 
-            border-color: #285cf5;
 
-            box-shadow: 0 4px 12px rgba(40, 92, 245, 0.16);
 
-        }
 
-
 
-        .sort-item:hover .option-actions {
 
-            opacity: 1;
 
-            pointer-events: auto;
 
-        }
 
-
 
-        .sort-item-static {
 
-            display: flex;
 
-            align-items: center;
 
-            gap: 12px;
 
-            position: relative;
 
-            padding: 4px;
 
-            border-radius: 8px;
 
-            transition: all 0.2s;
 
-        }
 
-
 
-        .sort-item-static:hover {
 
-            background: #f9fafb;
 
-        }
 
-
 
-        .sort-item-static:hover .option-actions {
 
-            opacity: 1;
 
-            pointer-events: auto;
 
-        }
 
-
 
-        .sort-number {
 
-            width: 32px;
 
-            height: 32px;
 
-            background: #285cf5;
 
-            color: white;
 
-            border-radius: 8px;
 
-            display: flex;
 
-            align-items: center;
 
-            justify-content: center;
 
-            font-size: 14px;
 
-            font-weight: 700;
 
-            flex-shrink: 0;
 
-        }
 
-
 
-        .sort-order-display {
 
-            display: flex;
 
-            align-items: center;
 
-            gap: 12px;
 
-            padding: 16px;
 
-            background: white;
 
-            border-radius: 10px;
 
-            flex-wrap: wrap;
 
-        }
 
-
 
-        .sort-order-item {
 
-            width: 56px;
 
-            height: 56px;
 
-            background: #eef3ff;
 
-            border: 2px solid #285cf5;
 
-            color: #285cf5;
 
-            border-radius: 10px;
 
-            display: flex;
 
-            flex-direction: column;
 
-            align-items: center;
 
-            justify-content: center;
 
-            font-size: 18px;
 
-            font-weight: 700;
 
-            position: relative;
 
-            transition: all 0.2s;
 
-        }
 
-
 
-        .sort-order-item.draggable {
 
-            cursor: move;
 
-        }
 
-
 
-        .sort-order-item.draggable:hover {
 
-            background: #dbe6ff;
 
-            transform: scale(1.05);
 
-            box-shadow: 0 6px 14px rgba(40, 92, 245, 0.22);
 
-        }
 
-
 
-        .sort-order-item.dragging {
 
-            opacity: 0.5;
 
-        }
 
-
 
-        .sort-order-item.drag-over {
 
-            border-color: #285cf5;
 
-            background: #cddcff;
 
-            box-shadow: 0 6px 14px rgba(40, 92, 245, 0.22);
 
-        }
 
-
 
-        .sort-drag-handle {
 
-            position: absolute;
 
-            top: 2px;
 
-            right: 2px;
 
-            width: 16px;
 
-            height: 16px;
 
-            color: #285cf5;
 
-            opacity: 0;
 
-            transition: opacity 0.2s;
 
-        }
 
-
 
-        .sort-order-item.draggable:hover .sort-drag-handle {
 
-            opacity: 1;
 
-        }
 
-
 
-        .sort-drag-handle svg {
 
-            width: 12px;
 
-            height: 12px;
 
-        }
 
-
 
-        .sort-arrow {
 
-            color: #285cf5;
 
-            font-size: 20px;
 
-            font-weight: 700;
 
-        }
 
-
 
-        /* 工具顶部栏 */
 
-        .tool-header {
 
-            height: 60px;
 
-            background: white;
 
-            border-bottom: 1px solid #f0f1f3;
 
-            display: flex;
 
-            align-items: center;
 
-            padding: 0 24px;
 
-            flex-shrink: 0;
 
-        }
 
-
 
-        .tool-type-selector {
 
-            position: relative;
 
-            display: inline-block;
 
-        }
 
-
 
-        .tool-type-btn {
 
-            display: flex;
 
-            align-items: center;
 
-            gap: 8px;
 
-            padding: 10px 16px;
 
-            background: #fafbfc;
 
-            border: 1.5px solid #e5e7eb;
 
-            border-radius: 10px;
 
-            font-size: 14px;
 
-            font-weight: 600;
 
-            color: #111827;
 
-            cursor: pointer;
 
-            transition: all 0.2s;
 
-        }
 
-
 
-        .tool-type-btn:hover {
 
-            border-color: #285cf5;
 
-            background: #f6f8ff;
 
-        }
 
-
 
-        .tool-type-btn svg {
 
-            width: 16px;
 
-            height: 16px;
 
-            color: #6b7280;
 
-            flex-shrink: 0;
 
-        }
 
-
 
-        .tool-type-btn svg:last-child {
 
-            width: 12px;
 
-            height: 12px;
 
-        }
 
-
 
-        .tool-type-dropdown {
 
-            position: absolute;
 
-            top: 100%;
 
-            left: 0;
 
-            margin-top: 8px;
 
-            background: white;
 
-            border-radius: 12px;
 
-            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
 
-            padding: 8px;
 
-            min-width: 200px;
 
-            display: none;
 
-            z-index: 1000;
 
-        }
 
-
 
-        .tool-type-selector.active .tool-type-dropdown {
 
-            display: block;
 
-        }
 
-
 
-        .tool-type-item {
 
-            padding: 10px 12px;
 
-            border-radius: 8px;
 
-            cursor: pointer;
 
-            transition: all 0.2s;
 
-            display: flex;
 
-            align-items: center;
 
-            gap: 10px;
 
-            font-size: 14px;
 
-            color: #374151;
 
-        }
 
-
 
-        .tool-type-item svg {
 
-            width: 18px;
 
-            height: 18px;
 
-            flex-shrink: 0;
 
-        }
 
-
 
-        .tool-type-item:hover {
 
-            background: #eef3ff;
 
-            color: #285cf5;
 
-        }
 
-
 
-        .tool-type-item:hover svg {
 
-            color: #285cf5;
 
-        }
 
-
 
-        .tool-type-item.active {
 
-            background: #eef3ff;
 
-            color: #285cf5;
 
-        }
 
-
 
-        .tool-type-item.active svg {
 
-            color: #285cf5;
 
-        }
 
-
 
-        /* 工具编辑区域 */
 
-        .tool-edit-container {
 
-            display: none;
 
-            flex-direction: column;
 
-            background: white;
 
-            width: 100%;
 
-            height: 100%;
 
-            flex: 1;
 
-        }
 
-
 
-        .tool-edit-container.active {
 
-            display: flex;
 
-        }
 
-
 
-        .tool-edit-area {
 
-            flex: 1;
 
-            overflow-y: auto;
 
-            padding: 40px;
 
-            background: #fafbfc;
 
-        }
 
-
 
-        .tool-canvas {
 
-            width: 960px;
 
-            max-width: 100%;
 
-            margin: 0 auto;
 
-            background: white;
 
-            border-radius: 16px;
 
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
 
-            padding: 40px;
 
-            min-height: 500px;
 
-        }
 
-
 
-        .question-item {
 
-            margin-bottom: 32px;
 
-            padding-bottom: 32px;
 
-            border-bottom: 1px solid #f0f1f3;
 
-        }
 
-
 
-        .question-item:last-child {
 
-            border-bottom: none;
 
-        }
 
-
 
-        .question-header {
 
-            display: flex;
 
-            align-items: center;
 
-            justify-content: space-between;
 
-            margin-bottom: 16px;
 
-        }
 
-
 
-        .question-number {
 
-            font-size: 16px;
 
-            font-weight: 700;
 
-            color: #285cf5;
 
-        }
 
-
 
-        .question-type-toggle {
 
-            display: flex;
 
-            align-items: center;
 
-            gap: 8px;
 
-        }
 
-
 
-        .toggle-label {
 
-            font-size: 13px;
 
-            color: #6b7280;
 
-        }
 
-
 
-        .mini-toggle {
 
-            width: 40px;
 
-            height: 22px;
 
-            background: #e5e7eb;
 
-            border-radius: 11px;
 
-            cursor: pointer;
 
-            transition: all 0.3s;
 
-            position: relative;
 
-        }
 
-
 
-        .mini-toggle.active {
 
-            background: #285cf5;
 
-        }
 
-
 
-        .mini-toggle::after {
 
-            content: '';
 
-            position: absolute;
 
-            top: 2px;
 
-            left: 2px;
 
-            width: 18px;
 
-            height: 18px;
 
-            background: white;
 
-            border-radius: 50%;
 
-            transition: all 0.3s;
 
-        }
 
-
 
-        .mini-toggle.active::after {
 
-            left: 20px;
 
-        }
 
-
 
-        .question-input {
 
-            width: 100%;
 
-            padding: 14px 16px;
 
-            border: 1.5px solid #e5e7eb;
 
-            border-radius: 10px;
 
-            font-size: 14px;
 
-            color: #111827;
 
-            background: #fafbfc;
 
-            transition: all 0.2s;
 
-            font-family: inherit;
 
-            resize: vertical;
 
-            min-height: 80px;
 
-        }
 
-
 
-        .question-input:focus {
 
-            outline: none;
 
-            border-color: #285cf5;
 
-            background: white;
 
-        }
 
-
 
-        .options-list {
 
-            margin-top: 16px;
 
-            display: flex;
 
-            flex-direction: column;
 
-            gap: 10px;
 
-        }
 
-
 
-        .option-item {
 
-            display: flex;
 
-            align-items: center;
 
-            gap: 12px;
 
-            position: relative;
 
-            padding: 4px;
 
-            border-radius: 8px;
 
-            transition: all 0.2s;
 
-        }
 
-
 
-        .option-item:hover {
 
-            background: #f9fafb;
 
-        }
 
-
 
-        .option-item:hover .option-actions {
 
-            opacity: 1;
 
-            pointer-events: auto;
 
-        }
 
-
 
-        .option-actions {
 
-            display: flex;
 
-            align-items: center;
 
-            gap: 4px;
 
-            opacity: 0;
 
-            pointer-events: none;
 
-            transition: opacity 0.2s;
 
-        }
 
-
 
-        .option-action-btn {
 
-            width: 24px;
 
-            height: 24px;
 
-            border: none;
 
-            background: transparent;
 
-            cursor: pointer;
 
-            display: flex;
 
-            align-items: center;
 
-            justify-content: center;
 
-            border-radius: 4px;
 
-            transition: all 0.2s;
 
-            color: #9ca3af;
 
-        }
 
-
 
-        .option-action-btn:hover {
 
-            background: #e5e7eb;
 
-            color: #374151;
 
-        }
 
-
 
-        .option-action-btn.delete:hover {
 
-            background: #fee2e2;
 
-            color: #dc2626;
 
-        }
 
-
 
-        .option-action-btn svg {
 
-            width: 14px;
 
-            height: 14px;
 
-        }
 
-
 
-        .option-drag-handle {
 
-            cursor: grab;
 
-            color: #d1d5db;
 
-            width: 16px;
 
-            height: 16px;
 
-            display: flex;
 
-            align-items: center;
 
-            justify-content: center;
 
-            flex-shrink: 0;
 
-            opacity: 0;
 
-            transition: opacity 0.2s;
 
-        }
 
-
 
-        .option-item:hover .option-drag-handle {
 
-            opacity: 1;
 
-        }
 
-
 
-        .option-drag-handle:active {
 
-            cursor: grabbing;
 
-        }
 
-
 
-        .option-drag-handle svg {
 
-            width: 14px;
 
-            height: 14px;
 
-        }
 
-
 
-        .option-checkbox {
 
-            width: 22px;
 
-            height: 22px;
 
-            border: 2px solid #d1d5db;
 
-            border-radius: 4px;
 
-            flex-shrink: 0;
 
-            cursor: pointer;
 
-            display: flex;
 
-            align-items: center;
 
-            justify-content: center;
 
-            transition: all 0.2s;
 
-        }
 
-
 
-        .option-checkbox.checked {
 
-            background: #285cf5;
 
-            border-color: #285cf5;
 
-        }
 
-
 
-        .option-checkbox svg {
 
-            width: 14px;
 
-            height: 14px;
 
-            color: white;
 
-            display: none;
 
-        }
 
-
 
-        .option-checkbox.checked svg {
 
-            display: block;
 
-        }
 
-
 
-        .option-input {
 
-            flex: 1;
 
-            padding: 10px 14px;
 
-            border: 1.5px solid #e5e7eb;
 
-            border-radius: 8px;
 
-            font-size: 14px;
 
-            color: #111827;
 
-            background: white;
 
-            transition: all 0.2s;
 
-            font-family: inherit;
 
-        }
 
-
 
-        .option-input:focus {
 
-            outline: none;
 
-            border-color: #285cf5;
 
-        }
 
-
 
-        .add-option-btn {
 
-            width: 32px;
 
-            height: 32px;
 
-            margin-top: 8px;
 
-            margin-left: 34px;
 
-            border: 1.5px dashed #d1d5db;
 
-            border-radius: 8px;
 
-            background: transparent;
 
-            color: #6b7280;
 
-            cursor: pointer;
 
-            transition: all 0.2s;
 
-            display: flex;
 
-            align-items: center;
 
-            justify-content: center;
 
-            flex-shrink: 0;
 
-        }
 
-
 
-        .add-option-btn svg {
 
-            width: 16px;
 
-            height: 16px;
 
-        }
 
-
 
-        .add-option-btn:hover {
 
-            border-color: #285cf5;
 
-            color: #285cf5;
 
-            background: #f6f8ff;
 
-        }
 
-
 
-        .add-option-btn-with-text {
 
-            height: 36px;
 
-            padding: 0 14px;
 
-            margin-top: 8px;
 
-            margin-left: 66px;
 
-            border: 1.5px dashed #d1d5db;
 
-            border-radius: 8px;
 
-            background: transparent;
 
-            color: #6b7280;
 
-            cursor: pointer;
 
-            transition: all 0.2s;
 
-            display: inline-flex;
 
-            align-items: center;
 
-            justify-content: center;
 
-            gap: 6px;
 
-            font-size: 13px;
 
-            font-weight: 500;
 
-            white-space: nowrap;
 
-            align-self: flex-start;
 
-        }
 
-
 
-        .add-option-btn-with-text svg {
 
-            width: 14px;
 
-            height: 14px;
 
-            flex-shrink: 0;
 
-        }
 
-
 
-        .add-option-btn-with-text:hover {
 
-            border-color: #285cf5;
 
-            color: #285cf5;
 
-            background: #f6f8ff;
 
-        }
 
-
 
-        .question-actions {
 
-            display: flex;
 
-            align-items: center;
 
-            gap: 8px;
 
-            margin-left: auto;
 
-        }
 
-
 
-        .question-action-btn {
 
-            width: 32px;
 
-            height: 32px;
 
-            border: none;
 
-            background: #f9fafb;
 
-            border-radius: 8px;
 
-            cursor: pointer;
 
-            display: flex;
 
-            align-items: center;
 
-            justify-content: center;
 
-            transition: all 0.2s;
 
-            color: #6b7280;
 
-        }
 
-
 
-        .question-action-btn:hover {
 
-            background: #f3f4f6;
 
-            color: #374151;
 
-        }
 
-
 
-        .question-action-btn.delete:hover {
 
-            background: #fee2e2;
 
-            color: #dc2626;
 
-        }
 
-
 
-        .question-action-btn svg {
 
-            width: 16px;
 
-            height: 16px;
 
-        }
 
-
 
-        .explanation-section {
 
-            margin-top: 16px;
 
-            padding: 16px;
 
-            background: #f9fafb;
 
-            border-radius: 10px;
 
-        }
 
-
 
-        .explanation-header {
 
-            display: flex;
 
-            align-items: center;
 
-            justify-content: space-between;
 
-            margin-bottom: 10px;
 
-        }
 
-
 
-        .explanation-label {
 
-            font-size: 13px;
 
-            font-weight: 600;
 
-            color: #6b7280;
 
-            display: flex;
 
-            align-items: center;
 
-            gap: 6px;
 
-        }
 
-
 
-        .ai-gen-btn {
 
-            padding: 6px 12px;
 
-            border-radius: 8px;
 
-            border: none;
 
-            background: linear-gradient(135deg, #285cf5 0%, #1f4ad6 100%);
 
-            color: white;
 
-            font-size: 12px;
 
-            font-weight: 600;
 
-            cursor: pointer;
 
-            display: flex;
 
-            align-items: center;
 
-            gap: 4px;
 
-            transition: all 0.2s;
 
-        }
 
-
 
-        .ai-gen-btn:hover {
 
-            transform: translateY(-1px);
 
-            box-shadow: 0 2px 8px rgba(40, 92, 245, 0.3);
 
-        }
 
-
 
-        .explanation-textarea {
 
-            width: 100%;
 
-            padding: 10px;
 
-            border: 1.5px solid #e5e7eb;
 
-            border-radius: 8px;
 
-            font-size: 13px;
 
-            color: #374151;
 
-            background: white;
 
-            resize: vertical;
 
-            min-height: 60px;
 
-            font-family: inherit;
 
-        }
 
-
 
-        .explanation-textarea:focus {
 
-            outline: none;
 
-            border-color: #285cf5;
 
-        }
 
-
 
-        .add-question-btn {
 
-            margin-top: 24px;
 
-            width: 40px;
 
-            height: 40px;
 
-            border: 2px dashed #d1d5db;
 
-            border-radius: 10px;
 
-            background: transparent;
 
-            color: #6b7280;
 
-            cursor: pointer;
 
-            transition: all 0.2s;
 
-            display: flex;
 
-            align-items: center;
 
-            justify-content: center;
 
-            flex-shrink: 0;
 
-        }
 
-
 
-        .add-question-btn svg {
 
-            width: 20px;
 
-            height: 20px;
 
-        }
 
-
 
-        .add-question-btn:hover {
 
-            border-color: #285cf5;
 
-            color: #285cf5;
 
-            background: #f6f8ff;
 
-            transform: scale(1.05);
 
-        }
 
-
 
-        .add-question-btn-with-text {
 
-            margin-top: 24px;
 
-            height: 44px;
 
-            padding: 0 18px;
 
-            border: 2px dashed #d1d5db;
 
-            border-radius: 10px;
 
-            background: transparent;
 
-            color: #6b7280;
 
-            cursor: pointer;
 
-            transition: all 0.2s;
 
-            display: inline-flex;
 
-            align-items: center;
 
-            justify-content: center;
 
-            gap: 8px;
 
-            font-size: 14px;
 
-            font-weight: 600;
 
-            white-space: nowrap;
 
-            align-self: flex-start;
 
-        }
 
-
 
-        .add-question-btn-with-text svg {
 
-            width: 18px;
 
-            height: 18px;
 
-            flex-shrink: 0;
 
-        }
 
-
 
-        .add-question-btn-with-text:hover {
 
-            border-color: #285cf5;
 
-            color: #285cf5;
 
-            background: #f6f8ff;
 
-            transform: scale(1.02);
 
-        }
 
-
 
-        /* 抽认卡特殊布局 */
 
-        .flashcard-layout {
 
-            display: grid;
 
-            grid-template-columns: 1fr 1fr;
 
-            gap: 24px;
 
-            margin-bottom: 32px;
 
-        }
 
-
 
-        .flashcard-side {
 
-            border: 1.5px solid #e5e7eb;
 
-            border-radius: 12px;
 
-            padding: 20px;
 
-            min-height: 200px;
 
-        }
 
-
 
-        .flashcard-side-label {
 
-            font-size: 13px;
 
-            font-weight: 600;
 
-            color: #6b7280;
 
-            margin-bottom: 12px;
 
-        }
 
-
 
-        .flashcard-content {
 
-            width: 100%;
 
-            padding: 14px;
 
-            border: 1.5px solid #e5e7eb;
 
-            border-radius: 8px;
 
-            font-size: 14px;
 
-            color: #111827;
 
-            background: white;
 
-            resize: vertical;
 
-            min-height: 120px;
 
-            font-family: inherit;
 
-        }
 
-
 
-        .flashcard-content:focus {
 
-            outline: none;
 
-            border-color: #285cf5;
 
-        }
 
-
 
-        /* 资源弹窗与列表 */
 
-        .resource-upload-list {
 
-            margin-top: 12px;
 
-            display: flex;
 
-            flex-direction: column;
 
-            gap: 10px;
 
-        }
 
-
 
-        .resource-file-item {
 
-            display: flex;
 
-            align-items: center;
 
-            justify-content: space-between;
 
-            padding: 10px 12px;
 
-            border: 1px solid #e5e7eb;
 
-            border-radius: 10px;
 
-            background: #fafbfc;
 
-            font-size: 13px;
 
-            color: #374151;
 
-        }
 
-
 
-        .resource-file-name {
 
-            display: flex;
 
-            align-items: center;
 
-            gap: 8px;
 
-            overflow: hidden;
 
-        }
 
-
 
-        .resource-file-name span {
 
-            white-space: nowrap;
 
-            text-overflow: ellipsis;
 
-            overflow: hidden;
 
-        }
 
-
 
-        .resource-remove-btn {
 
-            border: none;
 
-            background: transparent;
 
-            color: #9ca3af;
 
-            cursor: pointer;
 
-            display: flex;
 
-            align-items: center;
 
-            justify-content: center;
 
-            width: 28px;
 
-            height: 28px;
 
-            border-radius: 8px;
 
-            transition: all 0.2s;
 
-        }
 
-
 
-        .resource-remove-btn:hover {
 
-            background: #fef2f2;
 
-            color: #dc2626;
 
-        }
 
-
 
-        .resource-tip {
 
-            font-size: 12px;
 
-            color: #6b7280;
 
-            margin-top: 8px;
 
-        }
 
-
 
-        .resource-actions {
 
-            display: flex;
 
-            gap: 12px;
 
-            margin-top: 16px;
 
-        }
 
-
 
-        .resource-chip {
 
-            display: inline-flex;
 
-            align-items: center;
 
-            gap: 6px;
 
-            padding: 6px 10px;
 
-            border-radius: 999px;
 
-            background: #f3f4f6;
 
-            color: #4b5563;
 
-            font-size: 12px;
 
-            font-weight: 600;
 
-        }
 
-
 
-        .resource-tabs {
 
-            display: flex;
 
-            align-items: center;
 
-            gap: 8px;
 
-            min-height: 60px;
 
-            padding: 0 16px;
 
-            border-bottom: 1px solid #f0f1f3;
 
-            background: #fff;
 
-            border-radius: 12px 12px 0 0;
 
-        }
 
-
 
-        .resource-tab {
 
-            padding: 8px 14px;
 
-            border-radius: 10px;
 
-            border: 1px solid #e5e7eb;
 
-            background: #fafbfc;
 
-            cursor: pointer;
 
-            font-size: 13px;
 
-            font-weight: 600;
 
-            color: #4b5563;
 
-            transition: all 0.2s;
 
-            height: 36px;
 
-            display: inline-flex;
 
-            align-items: center;
 
-            justify-content: center;
 
-        }
 
-
 
-        .resource-tab.active {
 
-            border-color: #285cf5;
 
-            color: #285cf5;
 
-            background: #eef3ff;
 
-            box-shadow: 0 2px 8px rgba(40, 92, 245, 0.12);
 
-        }
 
-
 
-        /* 滚动条 */
 
-        ::-webkit-scrollbar {
 
-            width: 8px;
 
-            height: 8px;
 
-        }
 
-
 
-        ::-webkit-scrollbar-track {
 
-            background: transparent;
 
-        }
 
-
 
-        ::-webkit-scrollbar-thumb {
 
-            background: #e0e2e5;
 
-            border-radius: 4px;
 
-        }
 
-
 
-        ::-webkit-scrollbar-thumb:hover {
 
-            background: #c5c8cc;
 
-        }
 
-    </style>
 
-</head>
 
-<body>
 
-    <!-- 顶部工具栏 -->
 
-        <div class="top-bar">
 
-        <div class="top-bar-left">
 
-            <div class="logo-menu-wrapper">
 
-                <button class="logo-btn" id="topMenuToggle" onclick="toggleTopMenu(event)">
 
-                    <img src="/var/folders/6_/1f501dn50cqbnjhxhfyqnbcm0000gn/T/cocorobo_icon_rgb_blue_png_1769396590215.png" alt="Coco" class="logo-img">
 
-                    <svg class="logo-caret" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                        <polyline points="6 9 12 15 18 9"/>
 
-                    </svg>
 
-                </button>
 
-                <div class="top-dropdown" id="topDropdown">
 
-                    <div class="top-dropdown-item" onclick="handleTopMenuAction('back')">
 
-                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                            <path d="M15 18l-6-6 6-6"/>
 
-                        </svg>
 
-                        返回列表
 
-                    </div>
 
-                    <div class="top-dropdown-item" onclick="handleTopMenuAction('settings')">
 
-                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                            <circle cx="12" cy="12" r="3"/>
 
-                            <path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 01-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09a1.65 1.65 0 00-1-1.51 1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09a1.65 1.65 0 001.51-1 1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06a1.65 1.65 0 001.82.33h.09A1.65 1.65 0 0010.91 3V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51h.09a1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82v.09a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"/>
 
-                        </svg>
 
-                        设置
 
-                    </div>
 
-                    <div class="top-dropdown-item" onclick="handleTopMenuAction('template')">
 
-                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                            <rect x="3" y="3" width="7" height="7"/>
 
-                            <rect x="14" y="3" width="7" height="7"/>
 
-                            <rect x="14" y="14" width="7" height="7"/>
 
-                            <rect x="3" y="14" width="7" height="7"/>
 
-                        </svg>
 
-                        导入模板
 
-                    </div>
 
-                    <div class="top-dropdown-item" onclick="handleTopMenuAction('duplicate')">
 
-                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
 
-                            <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/>
 
-                        </svg>
 
-                        另存为副本
 
-                    </div>
 
-                    <div class="top-dropdown-sep"></div>
 
-                    <div class="top-dropdown-item danger" onclick="handleTopMenuAction('delete')">
 
-                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                            <polyline points="3 6 5 6 21 6"/>
 
-                            <path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/>
 
-                        </svg>
 
-                        删除
 
-                    </div>
 
-                </div>
 
-            </div>
 
-            <div class="course-title" contenteditable="true">新建课程</div>
 
-            <div class="auto-save">
 
-                <span class="save-dot"></span>
 
-                <span id="saveStatus">未保存</span>
 
-            </div>
 
-        </div>
 
-
 
-        <div class="top-bar-right">
 
-            <button class="top-btn btn-secondary">
 
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                    <path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
 
-                    <path d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
 
-                </svg>
 
-                预览
 
-            </button>
 
-            <button class="top-btn btn-secondary">
 
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                    <path d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z"/>
 
-                    <polyline points="17 21 17 13 7 13 7 21"/>
 
-                    <polyline points="7 3 7 8 15 8"/>
 
-                </svg>
 
-                保存
 
-            </button>
 
-            <button class="top-btn btn-primary" onclick="showPublishModal()">
 
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                    <circle cx="12" cy="12" r="10"/>
 
-                    <polyline points="12 6 12 12 16 14"/>
 
-                </svg>
 
-                发布
 
-            </button>
 
-        </div>
 
-    </div>
 
-
 
-    <!-- 主容器 -->
 
-    <div class="main-container">
 
-        <!-- 左侧容器 -->
 
-        <div class="left-container">
 
-            <!-- 一级菜单 -->
 
-            <div class="primary-menu">
 
-                <div class="menu-item active" data-panel="ai">
 
-                    <svg class="menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                        <path d="M12 2L2 7l10 5 10-5-10-5z"/>
 
-                        <path d="M2 17l10 5 10-5"/>
 
-                        <path d="M2 12l10 5 10-5"/>
 
-                    </svg>
 
-                    <span class="menu-label">Coco AI</span>
 
-                </div>
 
-                <div class="menu-item" data-panel="pages">
 
-                    <svg class="menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                        <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
 
-                        <polyline points="14 2 14 8 20 8"/>
 
-                    </svg>
 
-                    <span class="menu-label">页面</span>
 
-                </div>
 
-                <div class="menu-item" data-panel="tools">
 
-                    <svg class="menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                        <circle cx="12" cy="12" r="3"/>
 
-                        <path d="M12 1v6m0 6v6M5.64 5.64l4.24 4.24m4.24 4.24l4.24 4.24M1 12h6m6 0h6M5.64 18.36l4.24-4.24m4.24-4.24l4.24-4.24"/>
 
-                    </svg>
 
-                    <span class="menu-label">互动工具</span>
 
-                </div>
 
-                <div class="menu-item" data-panel="apps">
 
-                    <svg class="menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                        <rect x="3" y="3" width="7" height="7"/>
 
-                        <rect x="14" y="3" width="7" height="7"/>
 
-                        <rect x="14" y="14" width="7" height="7"/>
 
-                        <rect x="3" y="14" width="7" height="7"/>
 
-                    </svg>
 
-                    <span class="menu-label">AI应用</span>
 
-                </div>
 
-                <div class="menu-item" data-panel="web">
 
-                    <svg class="menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                        <circle cx="12" cy="12" r="10"/>
 
-                        <path d="M2 12h20"/>
 
-                        <path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/>
 
-                    </svg>
 
-                    <span class="menu-label">交互网页</span>
 
-                </div>
 
-                <div class="menu-item" data-panel="resources">
 
-                    <svg class="menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                        <path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/>
 
-                    </svg>
 
-                    <span class="menu-label">多媒体</span>
 
-                </div>
 
-            </div>
 
-
 
-            <!-- 二级菜单 - AI对话 -->
 
-            <div class="secondary-panel" id="aiPanel">
 
-                <div class="panel-header">
 
-                    <span class="panel-title">Coco AI</span>
 
-                    <button class="collapse-btn" onclick="toggleSecondaryPanel()">
 
-                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                            <polyline points="15 18 9 12 15 6"/>
 
-                        </svg>
 
-                    </button>
 
-                </div>
 
-
 
-                <div class="chat-input-container" id="chatInputContainer">
 
-                    <div class="chat-input-wrapper">
 
-                        <div class="chat-textarea-container">
 
-                            <textarea
 
-                                class="chat-textarea"
 
-                                id="chatInput"
 
-                                placeholder="例如:创建一节45分钟的四年级教学内容为水的三态变化的课程"
 
-                                rows="3"
 
-                                oninput="autoResize(this)"
 
-                            >创建一节45分钟的四年级教学内容为水的三态变化的课程</textarea>
 
-                        </div>
 
-                        <div class="chat-bottom-row">
 
-                            <div style="display: flex; align-items: center; gap: 8px;">
 
-                                <button class="upload-file-btn" title="上传参考资料" id="uploadBtn">
 
-                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                        <path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"/>
 
-                                    </svg>
 
-                                </button>
 
-                                <span class="status-text" id="statusText">
 
-                                    <span class="status-dot"></span>
 
-                                    生成中……
 
-                                </span>
 
-                            </div>
 
-                            <button class="send-btn" onclick="sendMessage()" id="sendBtn">
 
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 
-                                    <line x1="22" y1="2" x2="11" y2="13"/>
 
-                                    <polygon points="22 2 15 22 11 13 2 9 22 2"/>
 
-                                </svg>
 
-                            </button>
 
-                        </div>
 
-                    </div>
 
-                </div>
 
-
 
-                <div class="secondary-content">
 
-                    <div class="chat-messages" id="chatMessages">
 
-                        <!-- 对话消息将显示在这里 -->
 
-                    </div>
 
-                </div>
 
-            </div>
 
-
 
-            <!-- 二级菜单 - 页面模板 -->
 
-            <div class="secondary-panel hidden" id="pagesPanel">
 
-                <div class="panel-header">
 
-                    <span class="panel-title">添加模板页面</span>
 
-                    <button class="collapse-btn" onclick="toggleSecondaryPanel()">
 
-                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                            <polyline points="15 18 9 12 15 6"/>
 
-                        </svg>
 
-                    </button>
 
-                </div>
 
-
 
-                <div class="secondary-content" style="overflow-y: auto;">
 
-                    <div class="template-grid">
 
-                        <!-- 标题页 -->
 
-                        <div class="template-card" onclick="addPageFromTemplate('title')">
 
-                            <div class="template-preview">
 
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                    <path d="M4 7V4h16v3M9 20h6M12 4v16"/>
 
-                                </svg>
 
-                            </div>
 
-                            <div class="template-name">标题页</div>
 
-                        </div>
 
-
 
-                        <!-- 图片页 -->
 
-                        <div class="template-card" onclick="addPageFromTemplate('image')">
 
-                            <div class="template-preview">
 
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
 
-                                    <circle cx="8.5" cy="8.5" r="1.5"/>
 
-                                    <polyline points="21 15 16 10 5 21"/>
 
-                                </svg>
 
-                            </div>
 
-                            <div class="template-name">图片页</div>
 
-                        </div>
 
-
 
-                        <!-- 内容页 -->
 
-                        <div class="template-card" onclick="addPageFromTemplate('content')">
 
-                            <div class="template-preview">
 
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                    <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
 
-                                    <polyline points="14 2 14 8 20 8"/>
 
-                                    <line x1="16" y1="13" x2="8" y2="13"/>
 
-                                    <line x1="16" y1="17" x2="8" y2="17"/>
 
-                                    <polyline points="10 9 9 9 8 9"/>
 
-                                </svg>
 
-                            </div>
 
-                            <div class="template-name">内容页</div>
 
-                        </div>
 
-
 
-                        <!-- 文图页（左文右图） -->
 
-                        <div class="template-card" onclick="addPageFromTemplate('text-image')">
 
-                            <div class="template-preview">
 
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                    <rect x="3" y="3" width="7" height="18" rx="1"/>
 
-                                    <rect x="14" y="3" width="7" height="18" rx="1"/>
 
-                                </svg>
 
-                            </div>
 
-                            <div class="template-name">文图页</div>
 
-                        </div>
 
-
 
-                        <!-- 图文页（左图右文） -->
 
-                        <div class="template-card" onclick="addPageFromTemplate('image-text')">
 
-                            <div class="template-preview">
 
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                    <rect x="3" y="3" width="7" height="18" rx="1"/>
 
-                                    <rect x="14" y="3" width="7" height="18" rx="1"/>
 
-                                </svg>
 
-                            </div>
 
-                            <div class="template-name">图文页</div>
 
-                        </div>
 
-
 
-                        <!-- 上传PPT -->
 
-                        <div class="template-card upload-ppt-card" onclick="uploadPPT()">
 
-                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/>
 
-                                <polyline points="17 8 12 3 7 8"/>
 
-                                <line x1="12" y1="3" x2="12" y2="15"/>
 
-                            </svg>
 
-                            <span class="upload-ppt-text">上传PPT</span>
 
-                        </div>
 
-                    </div>
 
-                </div>
 
-            </div>
 
-
 
-            <!-- 二级菜单 - 互动工具 -->
 
-            <div class="secondary-panel hidden" id="toolsPanel">
 
-                <div class="panel-header">
 
-                    <span class="panel-title">添加互动工具</span>
 
-                    <button class="collapse-btn" onclick="toggleSecondaryPanel()">
 
-                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                            <polyline points="15 18 9 12 15 6"/>
 
-                        </svg>
 
-                    </button>
 
-                </div>
 
-
 
-                <!-- 内容区域包装器 -->
 
-                <div class="panel-content-wrapper">
 
-                    <!-- 工具列表视图 -->
 
-                    <div class="secondary-content tools-list-view" id="toolsListView" style="overflow-y: auto;">
 
-                    <!-- 插画式说明 -->
 
-                    <div class="tools-intro">
 
-                        <div class="tools-intro-image">
 
-                            <svg width="120" height="80" viewBox="0 0 120 80" fill="none">
 
-                                <rect x="10" y="15" width="100" height="50" rx="8" fill="#eef3ff" stroke="#285cf5" stroke-width="2"/>
 
-                                <circle cx="30" cy="30" r="4" fill="#285cf5"/>
 
-                                <rect x="40" y="27" width="60" height="6" rx="3" fill="#ffd9a8"/>
 
-                                <circle cx="30" cy="45" r="4" fill="#d1d5db"/>
 
-                                <rect x="40" y="42" width="45" height="6" rx="3" fill="#e5e7eb"/>
 
-                            </svg>
 
-                        </div>
 
-                        <div class="tools-intro-text">选择工具创建互动页面</div>
 
-                    </div>
 
-
 
-                    <div class="tools-grid">
 
-                        <!-- 选择 -->
 
-                        <div class="tool-card" onclick="selectTool('choice')">
 
-                            <div class="tool-icon">
 
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                    <circle cx="12" cy="12" r="10"/>
 
-                                    <path d="M12 16v-4m0-4h.01"/>
 
-                                </svg>
 
-                            </div>
 
-                            <div class="tool-name">选择</div>
 
-                        </div>
 
-
 
-                        <!-- 问答 -->
 
-                        <div class="tool-card" onclick="selectTool('qa')">
 
-                            <div class="tool-icon">
 
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                    <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
 
-                                </svg>
 
-                            </div>
 
-                            <div class="tool-name">问答</div>
 
-                        </div>
 
-
 
-                        <!-- 投票 -->
 
-                        <div class="tool-card" onclick="selectTool('vote')">
 
-                            <div class="tool-icon">
 
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                    <polyline points="9 11 12 14 22 4"/>
 
-                                    <path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/>
 
-                                </svg>
 
-                            </div>
 
-                            <div class="tool-name">投票</div>
 
-                        </div>
 
-
 
-                        <!-- 拍照 -->
 
-                        <div class="tool-card" onclick="selectTool('photo')">
 
-                            <div class="tool-icon">
 
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                    <path d="M23 19a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2z"/>
 
-                                    <circle cx="12" cy="13" r="4"/>
 
-                                </svg>
 
-                            </div>
 
-                            <div class="tool-name">拍照</div>
 
-                        </div>
 
-
 
-                        <!-- 填空 -->
 
-                        <div class="tool-card" onclick="selectTool('fillblank')">
 
-                            <div class="tool-icon">
 
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                    <line x1="8" y1="6" x2="21" y2="6"/>
 
-                                    <line x1="8" y1="12" x2="21" y2="12"/>
 
-                                    <line x1="8" y1="18" x2="21" y2="18"/>
 
-                                    <line x1="3" y1="6" x2="3.01" y2="6"/>
 
-                                    <line x1="3" y1="12" x2="3.01" y2="12"/>
 
-                                    <line x1="3" y1="18" x2="3.01" y2="18"/>
 
-                                </svg>
 
-                            </div>
 
-                            <div class="tool-name">填空</div>
 
-                        </div>
 
-
 
-                        <!-- 排序 -->
 
-                        <div class="tool-card" onclick="selectTool('sort')">
 
-                            <div class="tool-icon">
 
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                    <line x1="4" y1="6" x2="20" y2="6"/>
 
-                                    <line x1="4" y1="12" x2="20" y2="12"/>
 
-                                    <line x1="4" y1="18" x2="20" y2="18"/>
 
-                                </svg>
 
-                            </div>
 
-                            <div class="tool-name">排序</div>
 
-                        </div>
 
-
 
-                        <!-- 白板 -->
 
-                        <div class="tool-card" onclick="selectTool('whiteboard')">
 
-                            <div class="tool-icon">
 
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                    <path d="M12 19l7-7 3 3-7 7-3-3z"/>
 
-                                    <path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"/>
 
-                                    <path d="M2 2l7.586 7.586"/>
 
-                                </svg>
 
-                            </div>
 
-                            <div class="tool-name">白板</div>
 
-                        </div>
 
-
 
-                        <!-- 抽认卡 -->
 
-                        <div class="tool-card" onclick="selectTool('flashcard')">
 
-                            <div class="tool-icon">
 
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                    <rect x="2" y="4" width="20" height="16" rx="2"/>
 
-                                    <path d="M7 15h10M12 9v6"/>
 
-                                </svg>
 
-                            </div>
 
-                            <div class="tool-name">抽认卡</div>
 
-                        </div>
 
-
 
-                        <!-- CocoPi -->
 
-                        <div class="tool-card" onclick="selectTool('cocopi')">
 
-                            <div class="tool-icon">
 
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                    <polyline points="16 18 22 12 16 6"/>
 
-                                    <polyline points="8 6 2 12 8 18"/>
 
-                                </svg>
 
-                            </div>
 
-                            <div class="tool-name">CocoPi</div>
 
-                        </div>
 
-
 
-                        <!-- 创作空间 -->
 
-                        <div class="tool-card" onclick="selectTool('workspace')">
 
-                            <div class="tool-icon">
 
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                    <path d="M12 2L2 7l10 5 10-5-10-5z"/>
 
-                                    <path d="M2 17l10 5 10-5"/>
 
-                                    <path d="M2 12l10 5 10-5"/>
 
-                                </svg>
 
-                            </div>
 
-                            <div class="tool-name">创作空间</div>
 
-                        </div>
 
-                    </div>
 
-                </div>
 
-
 
-                <!-- 工具配置视图 -->
 
-                <div class="secondary-content tools-config-view hidden" id="toolsConfigView">
 
-                    <div class="config-header">
 
-                        <button class="config-back-btn" onclick="backToToolsList()">
 
-                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                <path d="M19 12H5M12 19l-7-7 7-7"/>
 
-                            </svg>
 
-                        </button>
 
-                        <span class="config-tool-name" id="currentToolName">选择</span>
 
-                    </div>
 
-
 
-                    <!-- 配置内容区域 -->
 
-                    <div class="config-content" id="toolConfigContent">
 
-                        <!-- 配置项将通过JavaScript动态生成 -->
 
-                    </div>
 
-                </div>
 
-                </div><!-- 关闭 panel-content-wrapper -->
 
-            </div>
 
-
 
-            <!-- 二级菜单 - AI应用 -->
 
-            <div class="secondary-panel hidden" id="appsPanel">
 
-                <div class="panel-header">
 
-                    <span class="panel-title">添加AI应用</span>
 
-                    <button class="collapse-btn" onclick="toggleSecondaryPanel()">
 
-                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                            <polyline points="15 18 9 12 15 6"/>
 
-                        </svg>
 
-                    </button>
 
-                </div>
 
-
 
-                <div class="secondary-content" style="overflow-y: auto;">
 
-                    <div class="template-grid">
 
-                        <!-- 应用中心 -->
 
-                        <div class="template-card" onclick="openAIAppCenter()">
 
-                            <div class="template-preview">
 
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                    <rect x="3" y="3" width="7" height="7" rx="1"/>
 
-                                    <rect x="14" y="3" width="7" height="7" rx="1"/>
 
-                                    <rect x="14" y="14" width="7" height="7" rx="1"/>
 
-                                    <rect x="3" y="14" width="7" height="7" rx="1"/>
 
-                                </svg>
 
-                            </div>
 
-                            <div class="template-name">应用中心</div>
 
-                        </div>
 
-
 
-                        <!-- 创建应用 -->
 
-                        <div class="template-card" onclick="openCreateAppModal()">
 
-                            <div class="template-preview">
 
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                    <circle cx="12" cy="12" r="10"/>
 
-                                    <line x1="12" y1="8" x2="12" y2="16"/>
 
-                                    <line x1="8" y1="12" x2="16" y2="12"/>
 
-                                </svg>
 
-                            </div>
 
-                            <div class="template-name">创建应用</div>
 
-                        </div>
 
-                    </div>
 
-                </div>
 
-            </div>
 
-
 
-            <!-- 二级菜单 - 交互网页 -->
 
-            <div class="secondary-panel hidden" id="webPanel">
 
-                <!-- 列表视图 -->
 
-                <div id="webListView">
 
-                    <div class="panel-header">
 
-                        <span class="panel-title">添加交互网页</span>
 
-                        <button class="collapse-btn" onclick="toggleSecondaryPanel()">
 
-                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                <polyline points="15 18 9 12 15 6"/>
 
-                            </svg>
 
-                        </button>
 
-                    </div>
 
-                    <div class="secondary-content" style="overflow-y: auto;">
 
-                        <div class="template-grid">
 
-                            <!-- 网页中心 -->
 
-                            <div class="template-card" onclick="openWebCenter()">
 
-                                <div class="template-preview">
 
-                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                        <rect x="2" y="3" width="20" height="14" rx="2"/>
 
-                                        <line x1="2" y1="7" x2="22" y2="7"/>
 
-                                        <circle cx="5" cy="5" r="0.5" fill="currentColor"/>
 
-                                        <circle cx="7" cy="5" r="0.5" fill="currentColor"/>
 
-                                        <circle cx="9" cy="5" r="0.5" fill="currentColor"/>
 
-                                        <path d="M8 11h8M8 14h5"/>
 
-                                    </svg>
 
-                                </div>
 
-                                <div class="template-name">网页中心</div>
 
-                            </div>
 
-
 
-                            <!-- 上传网页 -->
 
-                            <div class="template-card" onclick="uploadWebPage()">
 
-                                <div class="template-preview">
 
-                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                        <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/>
 
-                                        <polyline points="17 8 12 3 7 8"/>
 
-                                        <line x1="12" y1="3" x2="12" y2="15"/>
 
-                                    </svg>
 
-                                </div>
 
-                                <div class="template-name">上传网页</div>
 
-                            </div>
 
-
 
-                            <!-- 爬取网页 -->
 
-                            <div class="template-card" onclick="crawlWebPage()">
 
-                                <div class="template-preview">
 
-                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                        <circle cx="12" cy="12" r="10"/>
 
-                                        <path d="M2 12h20"/>
 
-                                        <path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/>
 
-                                        <path d="M16 8l-4 4-4-4" stroke-width="1.5"/>
 
-                                    </svg>
 
-                                </div>
 
-                                <div class="template-name">爬取网页</div>
 
-                            </div>
 
-                        </div>
 
-                    </div>
 
-                </div>
 
-
 
-                <!-- 配置视图 -->
 
-                <div id="webConfigView" class="hidden">
 
-                    <!-- 上传网页配置 -->
 
-                    <div class="panel-content-wrapper hidden" id="uploadWebView">
 
-                        <div class="config-header">
 
-                            <button class="config-back-btn" onclick="backToWebList()">
 
-                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                    <path d="M19 12H5M12 19l-7-7 7-7"/>
 
-                                </svg>
 
-                            </button>
 
-                            <span class="config-tool-name">上传网页</span>
 
-                        </div>
 
-                        <div class="config-content">
 
-                           <div class="web-config-form">
 
-                                <div class="form-group">
 
-                                    <label class="form-label">网页名称</label>
 
-                                    <input type="text" class="form-input" id="uploadWebName" placeholder="请输入网页名称" oninput="validateUploadForm()">
 
-                                </div>
 
-
 
-                                <!-- Tabs -->
 
-                                <div class="upload-tabs">
 
-                                    <button id="uploadFileTab" class="upload-tab active" onclick="switchUploadTab('file')">上传文件</button>
 
-                                    <button id="pasteCodeTab" class="upload-tab" onclick="switchUploadTab('code')">粘贴代码</button>
 
-                                </div>
 
-
 
-                                <!-- Tab Panels -->
 
-                                <div id="uploadFilePanel">
 
-                                    <div class="form-group">
 
-                                        <div class="file-upload-area" id="fileUploadArea" onclick="document.getElementById('fileInput').click()">
 
-                                            <input type="file" id="fileInput" accept=".html,.htm,.zip" style="display: none;" onchange="handleFileSelect(event)">
 
-                                            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
 
-                                                <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/>
 
-                                                <polyline points="17 8 12 3 7 8"/>
 
-                                                <line x1="12" y1="3" x2="12" y2="15"/>
 
-                                            </svg>
 
-                                            <p class="upload-text">点击或拖拽文件到此处上传</p>
 
-                                            <p class="upload-hint">支持 HTML、HTM、ZIP 格式</p>
 
-                                        </div>
 
-                                         <div id="fileNameDisplay" class="file-name-display"></div>
 
-                                    </div>
 
-                                </div>
 
-
 
-                                <div id="pasteCodePanel" class="hidden">
 
-                                    <div class="form-group">
 
-                                        <textarea id="pasteCodeTextarea" class="code-textarea" placeholder="请在此处粘贴完整的HTML代码" oninput="validateUploadForm()"></textarea>
 
-                                    </div>
 
-                                </div>
 
-
 
-                                <div class="web-config-actions" style="padding: 0 30%;">
 
-                                    <button class="config-btn config-btn-primary status-btn" id="confirmCreateWebBtn" onclick="confirmCreateWebPage()" disabled>
 
-                                        <span class="btn-status-icon" id="uploadStatusIcon" aria-hidden="true"></span>
 
-                                        <span class="btn-status-text" id="uploadStatusText">等待上传...</span>
 
-                                    </button>
 
-                                </div>
 
-                            </div>
 
-                        </div>
 
-                    </div>
 
-
 
-                    <!-- 爬取网页配置 -->
 
-                    <div class="panel-content-wrapper hidden" id="crawlWebView">
 
-                        <div class="config-header">
 
-                            <button class="config-back-btn" onclick="backToWebList()">
 
-                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                    <path d="M19 12H5M12 19l-7-7 7-7"/>
 
-                                </svg>
 
-                            </button>
 
-                            <span class="config-tool-name">爬取网页</span>
 
-                        </div>
 
-                        <div class="config-content">
 
-                            <div class="web-config-form">
 
-                                <div class="form-group">
 
-                                    <label class="form-label">网页名称</label>
 
-                                    <input type="text" class="form-input" id="crawlWebName" placeholder="请输入网页名称" oninput="validateCrawlUrl()">
 
-                                </div>
 
-                                <div class="form-group">
 
-                                    <label class="form-label">网页链接</label>
 
-                                    <input type="url" class="form-input" id="crawlWebUrl" placeholder="请输入完整的网页URL地址" oninput="validateCrawlUrl()">
 
-                                </div>
 
-                                <div class="web-config-actions" style="padding: 0 30%;">
 
-                                    <button class="config-btn config-btn-primary crawl-btn" id="startCrawlBtn" onclick="startCrawlWeb()" disabled>
 
-                                        <span class="btn-status-icon" id="crawlStatusIcon" aria-hidden="true"></span>
 
-                                        <span class="btn-status-text" id="crawlStatusText">等待输入...</span>
 
-                                    </button>
 
-                                </div>
 
-                            </div>
 
-                        </div>
 
-                    </div>
 
-                </div>
 
-            </div>
 
-
 
-            <!-- 二级菜单 - 资源 -->
 
-            <div class="secondary-panel hidden" id="resourcesPanel">
 
-                <div class="panel-header">
 
-                    <span class="panel-title">添加多媒体</span>
 
-                    <button class="collapse-btn" onclick="toggleSecondaryPanel()">
 
-                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                            <polyline points="15 18 9 12 15 6"/>
 
-                        </svg>
 
-                    </button>
 
-                </div>
 
-                <div class="secondary-content" style="overflow-y: auto;">
 
-                    <div class="template-grid">
 
-                        <div class="template-card" onclick="openVideoSourceModal()">
 
-                            <div class="template-preview">
 
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                    <rect x="3" y="4" width="18" height="16" rx="2" ry="2"/>
 
-                                    <polygon points="10 9 16 12 10 15 10 9"/>
 
-                                </svg>
 
-                            </div>
 
-                            <div class="template-name">视频</div>
 
-                        </div>
 
-
 
-                        <div class="template-card" onclick="openAudioUploadModal()">
 
-                            <div class="template-preview">
 
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                    <path d="M9 18V5l12-2v13"/>
 
-                                    <circle cx="6" cy="18" r="3"/>
 
-                                    <circle cx="18" cy="16" r="3"/>
 
-                                </svg>
 
-                            </div>
 
-                            <div class="template-name">音频</div>
 
-                        </div>
 
-
 
-                        <div class="template-card" onclick="openDocumentUploadModal()">
 
-                            <div class="template-preview">
 
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                    <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
 
-                                    <polyline points="14 2 14 8 20 8"/>
 
-                                    <line x1="8" y1="13" x2="16" y2="13"/>
 
-                                    <line x1="8" y1="17" x2="14" y2="17"/>
 
-                                </svg>
 
-                            </div>
 
-                            <div class="template-name">文档</div>
 
-                        </div>
 
-
 
-                        <div class="template-card" onclick="openCollectionModal()">
 
-                            <div class="template-preview">
 
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                    <rect x="3" y="4" width="8" height="14" rx="2"/>
 
-                                    <rect x="13" y="4" width="8" height="14" rx="2"/>
 
-                                    <line x1="7" y1="9" x2="7" y2="13"/>
 
-                                    <line x1="17" y1="9" x2="17" y2="13"/>
 
-                                </svg>
 
-                            </div>
 
-                            <div class="template-name">文档集</div>
 
-                        </div>
 
-                    </div>
 
-                </div>
 
-            </div>
 
-        </div>
 
-
 
-        <!-- 中央编辑区 -->
 
-        <div class="center-area">
 
-            <div class="element-toolbar" id="elementToolbar">
 
-                <!-- 插入工具 -->
 
-                <div class="toolbar-section">
 
-                    <button class="toolbar-btn" onclick="insertText()">
 
-                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                            <path d="M4 7V4h16v3M9 20h6M12 4v16"/>
 
-                        </svg>
 
-                        文本
 
-                    </button>
 
-                    <button class="toolbar-btn" onclick="insertImage()">
 
-                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
 
-                            <circle cx="8.5" cy="8.5" r="1.5"/>
 
-                            <polyline points="21 15 16 10 5 21"/>
 
-                        </svg>
 
-                        图片
 
-                    </button>
 
-                    <button class="toolbar-btn" onclick="insertTable()">
 
-                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                            <rect x="3" y="3" width="18" height="18" rx="2"/>
 
-                            <line x1="3" y1="9" x2="21" y2="9"/>
 
-                            <line x1="3" y1="15" x2="21" y2="15"/>
 
-                            <line x1="9" y1="3" x2="9" y2="21"/>
 
-                            <line x1="15" y1="3" x2="15" y2="21"/>
 
-                        </svg>
 
-                        表格
 
-                    </button>
 
-                    <div class="dropdown" id="shapeDropdown">
 
-                        <button class="toolbar-btn" onclick="toggleDropdown('shapeDropdown')">
 
-                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                <circle cx="12" cy="12" r="10"/>
 
-                            </svg>
 
-                            形状
 
-                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                <polyline points="6 9 12 15 18 9"/>
 
-                            </svg>
 
-                        </button>
 
-                        <div class="dropdown-menu">
 
-                            <div class="dropdown-item" onclick="insertShape('circle')">
 
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                    <circle cx="12" cy="12" r="10"/>
 
-                                </svg>
 
-                                圆形
 
-                            </div>
 
-                            <div class="dropdown-item" onclick="insertShape('rectangle')">
 
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                    <rect x="3" y="3" width="18" height="18" rx="2"/>
 
-                                </svg>
 
-                                矩形
 
-                            </div>
 
-                            <div class="dropdown-item" onclick="insertShape('triangle')">
 
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                    <path d="M12 2 L22 20 L2 20 Z"/>
 
-                                </svg>
 
-                                三角形
 
-                            </div>
 
-                            <div class="dropdown-item" onclick="insertShape('arrow')">
 
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                    <line x1="5" y1="12" x2="19" y2="12"/>
 
-                                    <polyline points="12 5 19 12 12 19"/>
 
-                                </svg>
 
-                                箭头
 
-                            </div>
 
-                        </div>
 
-                    </div>
 
-                </div>
 
-
 
-                <!-- 编辑工具（选中元素时显示） -->
 
-                <div class="toolbar-section" id="editTools" style="display: none;">
 
-                    <button class="toolbar-btn">
 
-                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                            <path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/>
 
-                            <path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/>
 
-                        </svg>
 
-                        编辑
 
-                    </button>
 
-                    <button class="toolbar-btn" onclick="deleteElement()">
 
-                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                            <polyline points="3 6 5 6 21 6"/>
 
-                            <path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/>
 
-                        </svg>
 
-                        删除
 
-                    </button>
 
-                    <button class="toolbar-btn">
 
-                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                            <rect x="8" y="8" width="8" height="8"/>
 
-                            <path d="M4 16c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2h8c1.1 0 2 .9 2 2"/>
 
-                        </svg>
 
-                        复制
 
-                    </button>
 
-                </div>
 
-            </div>
 
-
 
-            <div class="slides-area">
 
-                <div class="slide-canvas" id="slideCanvas">
 
-                    <div class="slide-placeholder" id="slidePlaceholder">
 
-                        <div class="slide-placeholder-icon">✨</div>
 
-                        <div class="slide-placeholder-text">使用AI生成或创建课程内容</div>
 
-                        <div class="slide-placeholder-hint">描述您的需求，AI将为您创建完整课程</div>
 
-                    </div>
 
-                </div>
 
-
 
-                <!-- 工具编辑区域 -->
 
-                <div class="tool-edit-container" id="toolEditContainer" style="display: none;">
 
-                    <!-- 工具编辑内容将在这里动态生成 -->
 
-                </div>
 
-            </div>
 
-
 
-            <div class="bottom-outline" id="bottomOutline">
 
-                <div class="outline-track" id="outlineTrack">
 
-                    <!-- 页面大纲将在这里生成 -->
 
-                </div>
 
-            </div>
 
-        </div>
 
-
 
-        <!-- 右侧面板 -->
 
-        <div class="right-panel collapsed" id="rightPanel">
 
-            <div class="panel-header">
 
-                <span class="panel-title collapse-text">页面大纲</span>
 
-                <button class="collapse-btn" onclick="toggleRightPanel()">
 
-                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                        <polyline points="15 18 9 12 15 6"/>
 
-                    </svg>
 
-                </button>
 
-            </div>
 
-            <div class="outline-panel">
 
-                <div class="outline-toolbar">
 
-                    <div class="outline-toolbar-left">
 
-                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                            <rect x="3" y="4" width="18" height="16" rx="2"/>
 
-                            <line x1="3" y1="10" x2="21" y2="10"/>
 
-                        </svg>
 
-                        <span>大纲</span>
 
-                    </div>
 
-                    <div class="outline-actions">
 
-                        <button class="outline-btn" onclick="addOutlineGroup()">
 
-                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                <line x1="12" y1="5" x2="12" y2="19"/>
 
-                                <line x1="5" y1="12" x2="19" y2="12"/>
 
-                            </svg>
 
-                            分组
 
-                        </button>
 
-                    </div>
 
-                </div>
 
-                <div class="outline-list" id="rightOutlineList">
 
-                    <div class="outline-empty">暂无页面，创建后将出现在此</div>
 
-                </div>
 
-            </div>
 
-        </div>
 
-    </div>
 
-
 
-    <!-- 创建入口弹窗 -->
 
-    <div class="modal-overlay" id="createModal">
 
-        <div class="create-modal">
 
-            <button class="modal-close" onclick="hideCreateModal()">
 
-                <svg width="20" height="20" 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 class="modal-header">
 
-                <h2>创建新课程</h2>
 
-                <p>选择一种方式开始创建您的互动课件</p>
 
-            </div>
 
-
 
-            <div class="create-options">
 
-                <div class="create-card featured" id="aiCreateCard" onclick="startAICreate()">
 
-                    <div class="create-icon">
 
-                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                            <path d="M12 2L2 7l10 5 10-5-10-5z"/>
 
-                            <path d="M2 17l10 5 10-5"/>
 
-                            <path d="M2 12l10 5 10-5"/>
 
-                        </svg>
 
-                    </div>
 
-                    <h3>从AI创建</h3>
 
-                    <p>AI自动生成完整教学内容</p>
 
-                </div>
 
-
 
-                <div class="create-card" id="pptCreateCard" onclick="startPptUploadFlow()" onmouseenter="unsetAiFeatured()">
 
-                    <div class="create-icon">
 
-                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                            <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-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>上传本地PPT文件并解析</p>
 
-                </div>
 
-
 
-                <div class="create-card" onmouseenter="unsetAiFeatured()">
 
-                    <div class="create-icon">
 
-                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                            <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/>
 
-                            <polyline points="9 22 9 12 15 12 15 22"/>
 
-                        </svg>
 
-                    </div>
 
-                    <h3>从资源库导入</h3>
 
-                    <p>选择已有的课程模板</p>
 
-                </div>
 
-
 
-                <div class="create-card" onmouseenter="unsetAiFeatured()" onclick="createBlankCourse()">
 
-                    <div class="create-icon">
 
-                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                            <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
 
-                            <polyline points="14 2 14 8 20 8"/>
 
-                        </svg>
 
-                    </div>
 
-                    <h3>创建空白</h3>
 
-                    <p>从零开始自定义</p>
 
-                </div>
 
-            </div>
 
-        </div>
 
-    </div>
 
-
 
-    <!-- 课程设置弹窗 -->
 
-    <div class="modal-overlay" id="courseSettingsModal">
 
-        <div class="settings-modal">
 
-            <div class="settings-header">
 
-                <div class="settings-title">课程设置</div>
 
-                <button class="modal-close" onclick="hideCourseSettings()">
 
-                    <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>
 
-            <div class="settings-body">
 
-                <div class="form-group">
 
-                    <label class="form-label">学科</label>
 
-                    <select class="form-select" id="settingsSubjectSelect">
 
-                        <option value="">请选择学科</option>
 
-                        <option value="chinese">语文</option>
 
-                        <option value="math">数学</option>
 
-                        <option value="english">英语</option>
 
-                        <option value="physics">物理</option>
 
-                        <option value="chemistry">化学</option>
 
-                        <option value="biology">生物</option>
 
-                        <option value="history">历史</option>
 
-                        <option value="geography">地理</option>
 
-                        <option value="politics">道德与法治</option>
 
-                        <option value="science">科学</option>
 
-                    </select>
 
-                </div>
 
-                <div class="form-group">
 
-                    <label class="form-label">年级</label>
 
-                    <select class="form-select" id="settingsGradeSelect">
 
-                        <option value="">请选择年级</option>
 
-                        <option value="1">一年级</option>
 
-                        <option value="2">二年级</option>
 
-                        <option value="3">三年级</option>
 
-                        <option value="4">四年级</option>
 
-                        <option value="5">五年级</option>
 
-                        <option value="6">六年级</option>
 
-                        <option value="7">七年级</option>
 
-                        <option value="8">八年级</option>
 
-                        <option value="9">九年级</option>
 
-                    </select>
 
-                </div>
 
-            </div>
 
-            <div class="settings-actions">
 
-                <button class="settings-btn" onclick="hideCourseSettings()">取消</button>
 
-                <button class="settings-btn primary" onclick="applyCourseSettings()">应用</button>
 
-            </div>
 
-        </div>
 
-    </div>
 
-
 
-    <!-- PPT上传隐藏输入 -->
 
-    <input type="file" id="pptFileInput" accept=".ppt,.pptx" style="display: none;" onchange="handlePptFileSelected(event)">
 
-
 
-    <!-- PPT解析浮窗 -->
 
-    <div class="ppt-parse-overlay" id="pptParseOverlay">
 
-        <div class="ppt-parse-card">
 
-            <div class="ppt-parse-icon" id="pptParseIcon"></div>
 
-            <div class="ppt-parse-title" id="pptParseTitle">解析中...</div>
 
-            <div class="ppt-parse-desc" id="pptParseDesc">正在处理所选PPT文件</div>
 
-            <div class="ppt-parse-actions" id="pptParseActions">
 
-                <button class="ppt-parse-btn primary" onclick="closePptParseOverlay()">关闭</button>
 
-            </div>
 
-        </div>
 
-    </div>
 
-
 
-    <!-- 发布弹窗 -->
 
-    <div class="modal-overlay" id="publishModal">
 
-        <div class="publish-modal">
 
-            <button class="modal-close" onclick="hidePublishModal()">
 
-                <svg width="20" height="20" 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 class="publish-header">
 
-                <h2 class="publish-title">发布课程</h2>
 
-                <div class="publish-course-name" id="publishCourseNameDisplay" onclick="editCourseName()">
 
-                    水的三态变化
 
-                </div>
 
-            </div>
 
-
 
-            <div class="publish-content">
 
-                <!-- 左侧表单 -->
 
-                <form class="publish-form" onsubmit="confirmPublish(event)">
 
-                    <div class="form-group">
 
-                        <label class="form-label">
 
-                            学科 <span class="required">*</span>
 
-                        </label>
 
-                        <select class="form-select" id="subjectSelect" required>
 
-                            <option value="">请选择学科</option>
 
-                            <option value="chinese">语文</option>
 
-                            <option value="math">数学</option>
 
-                            <option value="english">英语</option>
 
-                            <option value="physics">物理</option>
 
-                            <option value="chemistry">化学</option>
 
-                            <option value="biology">生物</option>
 
-                            <option value="history">历史</option>
 
-                            <option value="geography">地理</option>
 
-                            <option value="politics">道德与法治</option>
 
-                            <option value="science">科学</option>
 
-                        </select>
 
-                    </div>
 
-
 
-                    <div class="form-row">
 
-                        <div class="form-group">
 
-                            <label class="form-label">
 
-                                年级 <span class="required">*</span>
 
-                            </label>
 
-                            <select class="form-select" id="classGradeSelect" required>
 
-                                <option value="">请选择年级</option>
 
-                                <option value="1">一年级</option>
 
-                                <option value="2">二年级</option>
 
-                                <option value="3">三年级</option>
 
-                                <option value="4">四年级</option>
 
-                                <option value="5">五年级</option>
 
-                                <option value="6">六年级</option>
 
-                                <option value="7">七年级</option>
 
-                                <option value="8">八年级</option>
 
-                                <option value="9">九年级</option>
 
-                            </select>
 
-                        </div>
 
-
 
-                        <div class="form-group">
 
-                            <label class="form-label">
 
-                                班级 <span class="required">*</span>
 
-                            </label>
 
-                            <select class="form-select" id="classSelect" required>
 
-                                <option value="">请选择班级</option>
 
-                                <option value="1">1班</option>
 
-                                <option value="2">2班</option>
 
-                                <option value="3">3班</option>
 
-                                <option value="4">4班</option>
 
-                                <option value="5">5班</option>
 
-                                <option value="6">6班</option>
 
-                                <option value="7">7班</option>
 
-                                <option value="8">8班</option>
 
-                                <option value="9">9班</option>
 
-                                <option value="10">10班</option>
 
-                            </select>
 
-                        </div>
 
-                    </div>
 
-
 
-                    <div class="form-group">
 
-                        <label class="form-label">
 
-                            可见范围 <span class="required">*</span>
 
-                        </label>
 
-                        <div class="visibility-options">
 
-                            <label class="radio-option selected" onclick="selectVisibility(this, 'students')">
 
-                                <input type="radio" name="visibility" value="students" checked>
 
-                                <div class="radio-custom"></div>
 
-                                <div class="radio-content">
 
-                                    <div class="radio-label">仅发布学生可见</div>
 
-                                    <div class="radio-description">仅对发布的班级学生可见，其他人无法访问</div>
 
-                                </div>
 
-                            </label>
 
-                            <label class="radio-option" onclick="selectVisibility(this, 'organization')">
 
-                                <input type="radio" name="visibility" value="organization">
 
-                                <div class="radio-custom"></div>
 
-                                <div class="radio-content">
 
-                                    <div class="radio-label">组织可见</div>
 
-                                    <div class="radio-description">学校内所有师生均可查看和使用</div>
 
-                                </div>
 
-                            </label>
 
-                        </div>
 
-                    </div>
 
-
 
-                    <div class="publish-actions">
 
-                        <button type="button" class="publish-btn publish-btn-cancel" onclick="hidePublishModal()">
 
-                            取消
 
-                        </button>
 
-                        <button type="submit" class="publish-btn publish-btn-confirm">
 
-                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                <path d="M22 11.08V12a10 10 0 11-5.93-9.14"/>
 
-                                <polyline points="22 4 12 14.01 9 11.01"/>
 
-                            </svg>
 
-                            确认发布
 
-                        </button>
 
-                    </div>
 
-                </form>
 
-
 
-                <!-- 右侧封面 -->
 
-                <div class="publish-cover-section">
 
-                    <label class="publish-cover-label">课程封面</label>
 
-                    <div class="publish-cover-wrapper">
 
-                        <div class="publish-cover-placeholder" id="coverPlaceholder">
 
-                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
 
-                                <circle cx="8.5" cy="8.5" r="1.5"/>
 
-                                <polyline points="21 15 16 10 5 21"/>
 
-                            </svg>
 
-                            <p>悬浮选择上传方式</p>
 
-                        </div>
 
-                        <img id="courseCoverImage" style="display: none;">
 
-                        
-                        <!-- 悬浮菜单 -->
 
-                        <div class="publish-cover-menu">
 
-                            <div class="publish-cover-menu-item" onclick="uploadCourseCoverLocal(event)">
 
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                    <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/>
 
-                                    <polyline points="17 8 12 3 7 8"/>
 
-                                    <line x1="12" y1="3" x2="12" y2="15"/>
 
-                                </svg>
 
-                                自本地上传
 
-                            </div>
 
-                            <div class="publish-cover-menu-item" onclick="searchWebImageForCover(event)">
 
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                    <circle cx="11" cy="11" r="8"/>
 
-                                    <path d="M21 21l-4.35-4.35"/>
 
-                                </svg>
 
-                                自网页搜索
 
-                            </div>
 
-                            <div class="publish-cover-menu-item" onclick="generateAIImageForCover(event)">
 
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                    <path d="M12 2L2 7l10 5 10-5-10-5z"/>
 
-                                    <path d="M2 17l10 5 10-5"/>
 
-                                    <path d="M2 12l10 5 10-5"/>
 
-                                </svg>
 
-                                自AI生成
 
-                            </div>
 
-                        </div>
 
-                        
-                        <!-- 已上传封面时显示的操作按钮 -->
 
-                        <div class="publish-cover-actions">
 
-                            <button class="cover-action-btn delete" type="button" onclick="event.stopPropagation(); deleteCourseCover()" title="删除封面">
 
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                    <polyline points="3 6 5 6 21 6"/>
 
-                                    <path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/>
 
-                                </svg>
 
-                            </button>
 
-                        </div>
 
-                    </div>
 
-                </div>
 
-            </div>
 
-        </div>
 
-    </div>
 
-
 
-    <!-- 隐藏的文件上传输入框 -->
 
-    <input type="file" id="courseCoverInput" accept="image/*" style="display: none;" onchange="handleCoverUpload(event)">
 
-
 
-    <!-- 网页搜索图片浮窗 -->
 
-    <div class="floating-modal" id="searchImageModal">
 
-        <div class="floating-content">
 
-            <div class="floating-header">
 
-                <h3 class="floating-title">网页搜索图片</h3>
 
-                <button class="floating-close" onclick="closeSearchModal()">
 
-                    <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>
 
-
 
-            <div class="search-input-group">
 
-                <label class="search-input-label">搜索关键词</label>
 
-                <input type="text" class="search-input" id="searchKeyword" placeholder="AI已为您生成关键词..." value="水的三态变化 实验">
 
-            </div>
 
-
 
-            <div class="search-results" id="searchResults">
 
-                <!-- 搜索结果将在这里显示 -->
 
-                <div class="search-result-item" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
 
-                </div>
 
-                <div class="search-result-item" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
 
-                </div>
 
-                <div class="search-result-item" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
 
-                </div>
 
-                <div class="search-result-item" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
 
-                </div>
 
-                <div class="search-result-item" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
 
-                </div>
 
-                <div class="search-result-item" style="background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);">
 
-                </div>
 
-            </div>
 
-
 
-            <div class="floating-actions">
 
-                <button class="floating-btn floating-btn-secondary" onclick="closeSearchModal()">取消</button>
 
-                <button class="floating-btn floating-btn-primary" onclick="confirmSearchImage()">确定</button>
 
-            </div>
 
-        </div>
 
-    </div>
 
-
 
-    <!-- AI生成图片浮窗 -->
 
-    <div class="floating-modal" id="generateImageModal">
 
-        <div class="floating-content">
 
-            <div class="floating-header">
 
-                <h3 class="floating-title">AI生成图片</h3>
 
-                <button class="floating-close" onclick="closeGenerateModal()">
 
-                    <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>
 
-
 
-            <div class="search-input-group">
 
-                <label class="search-input-label">生成描述</label>
 
-                <input type="text" class="search-input" id="generatePrompt" placeholder="AI已为您生成描述..." value="水分子在不同温度下的三态变化示意图">
 
-            </div>
 
-
 
-            <div class="generate-preview" id="generatePreview">
 
-                <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
 
-                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
 
-                    <circle cx="8.5" cy="8.5" r="1.5"/>
 
-                    <polyline points="21 15 16 10 5 21"/>
 
-                </svg>
 
-                <div class="generate-loading" id="generateLoading">
 
-                    <div class="loading-spinner"></div>
 
-                    <div class="loading-text">AI生成中...</div>
 
-                </div>
 
-            </div>
 
-
 
-            <div class="floating-actions">
 
-                <button class="floating-btn floating-btn-secondary" onclick="closeGenerateModal()">取消</button>
 
-                <button class="floating-btn floating-btn-primary" onclick="startGenerate()">生成</button>
 
-            </div>
 
-        </div>
 
-    </div>
 
-
 
-    <!-- AI应用中心浮窗 -->
 
-    <div class="floating-modal" id="aiAppCenterModal">
 
-        <div class="app-center-content">
 
-            <div class="floating-header">
 
-                <h3 class="floating-title">应用中心</h3>
 
-                <button class="floating-close" onclick="closeAppCenter()">
 
-                    <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>
 
-
 
-            <!-- 筛选区 -->
 
-            <div class="app-filters">
 
-                <div class="filter-group">
 
-                    <div class="filter-label">应用来源</div>
 
-                    <select class="filter-select" id="sourceFilter" onchange="filterApps()">
 
-                        <option value="all">所有应用</option>
 
-                        <option value="public">公开应用</option>
 
-                        <option value="mine">我的应用</option>
 
-                    </select>
 
-                </div>
 
-                <div class="filter-group">
 
-                    <div class="filter-label">应用类型</div>
 
-                    <select class="filter-select" id="typeFilter" onchange="filterApps()">
 
-                        <option value="all">所有类型</option>
 
-                        <option value="agent">智能体</option>
 
-                        <option value="workflow">工作流</option>
 
-                    </select>
 
-                </div>
 
-                <div class="filter-group">
 
-                    <div class="filter-label">交互模式</div>
 
-                    <select class="filter-select" id="modeFilter" onchange="filterApps()">
 
-                        <option value="all">所有模式</option>
 
-                        <option value="card">卡片式</option>
 
-                        <option value="immersive">沉浸式</option>
 
-                        <option value="chat">聊天式</option>
 
-                    </select>
 
-                </div>
 
-            </div>
 
-
 
-            <!-- 应用列表 -->
 
-            <div class="app-grid" id="appGrid">
 
-                <!-- 应用卡片将在这里动态生成 -->
 
-            </div>
 
-
 
-            <!-- 底部操作栏 -->
 
-            <div class="app-center-footer">
 
-                <div class="selected-count">已选择 <span id="selectedCountText">0</span> 个应用</div>
 
-                <div class="app-center-actions">
 
-                    <button class="app-center-btn app-center-btn-confirm" id="confirmAddAppsBtn" onclick="confirmAddApps()" disabled>
 
-                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                            <polyline points="20 6 9 17 4 12"/>
 
-                        </svg>
 
-                        添加
 
-                    </button>
 
-                </div>
 
-            </div>
 
-        </div>
 
-    </div>
 
-
 
-    <!-- 模板中心浮窗 -->
 
-    <div class="floating-modal" id="templateCenterModal">
 
-        <div class="app-center-content">
 
-            <div class="floating-header">
 
-                <h3 class="floating-title">模板中心</h3>
 
-                <button class="floating-close" onclick="closeTemplateCenter()">
 
-                    <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>
 
-
 
-            <div class="app-filters">
 
-                <div class="filter-group">
 
-                    <div class="filter-label">来源</div>
 
-                    <select class="filter-select" id="tplSourceFilter" onchange="filterTemplates()">
 
-                        <option value="all">所有模板</option>
 
-                        <option value="official">官方</option>
 
-                        <option value="mine">我的</option>
 
-                    </select>
 
-                </div>
 
-                <div class="filter-group">
 
-                    <div class="filter-label">学科</div>
 
-                    <select class="filter-select" id="tplSubjectFilter" onchange="filterTemplates()">
 
-                        <option value="all">全部学科</option>
 
-                        <option value="chinese">语文</option>
 
-                        <option value="math">数学</option>
 
-                        <option value="english">英语</option>
 
-                        <option value="science">科学</option>
 
-                    </select>
 
-                </div>
 
-                <div class="filter-group">
 
-                    <div class="filter-label">年级</div>
 
-                    <select class="filter-select" id="tplGradeFilter" onchange="filterTemplates()">
 
-                        <option value="all">全部年级</option>
 
-                        <option value="1">一年级</option>
 
-                        <option value="2">二年级</option>
 
-                        <option value="3">三年级</option>
 
-                        <option value="4">四年级</option>
 
-                        <option value="5">五年级</option>
 
-                        <option value="6">六年级</option>
 
-                        <option value="7">七年级</option>
 
-                        <option value="8">八年级</option>
 
-                        <option value="9">九年级</option>
 
-                    </select>
 
-                </div>
 
-            </div>
 
-
 
-            <div class="app-grid" id="templateGrid">
 
-                <!-- 模板卡片将在这里生成 -->
 
-            </div>
 
-
 
-            <div class="app-center-footer">
 
-                <div class="selected-count">已选择 <span id="selectedTemplateCount">0</span> 个模板</div>
 
-                <div class="app-center-actions">
 
-                    <button class="app-center-btn app-center-btn-confirm" id="confirmApplyTemplateBtn" onclick="confirmApplyTemplates()" disabled>
 
-                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                            <polyline points="20 6 9 17 4 12"/>
 
-                        </svg>
 
-                        应用
 
-                    </button>
 
-                </div>
 
-            </div>
 
-        </div>
 
-    </div>
 
-
 
-    <!-- 删除课程确认弹窗 -->
 
-    <div class="modal-overlay" id="deleteCourseModal">
 
-        <div class="confirm-modal">
 
-            <div class="confirm-title">删除课程</div>
 
-            <div class="confirm-text">删除后不可恢复，课件及关联资源将移除，确认要删除当前课程吗？</div>
 
-            <div class="confirm-actions">
 
-                <button class="settings-btn" onclick="hideDeleteCourse()">取消</button>
 
-                <button class="settings-btn primary" onclick="confirmDeleteCourse()">删除</button>
 
-            </div>
 
-        </div>
 
-    </div>
 
-
 
-    <!-- 网页中心浮窗 -->
 
-    <div class="floating-modal" id="webCenterModal">
 
-        <div class="web-center-content">
 
-            <div class="floating-header">
 
-                <h3 class="floating-title">网页中心</h3>
 
-                <button class="floating-close" onclick="closeWebCenter()">
 
-                    <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>
 
-
 
-            <!-- 筛选区 -->
 
-            <div class="web-filters">
 
-                <div class="filter-group">
 
-                    <div class="filter-label">网页来源</div>
 
-                    <select class="filter-select" id="webSourceFilter" onchange="filterWebs()">
 
-                        <option value="all">所有网页</option>
 
-                        <option value="public">公开网页</option>
 
-                        <option value="mine">我的网页</option>
 
-                    </select>
 
-                </div>
 
-                <div class="filter-group">
 
-                    <div class="filter-label">学科分类</div>
 
-                    <select class="filter-select" id="webSubjectFilter" onchange="filterWebs()">
 
-                        <option value="all">所有学科</option>
 
-                        <option value="语文">语文</option>
 
-                        <option value="数学">数学</option>
 
-                        <option value="英语">英语</option>
 
-                        <option value="物理">物理</option>
 
-                        <option value="化学">化学</option>
 
-                        <option value="生物">生物</option>
 
-                        <option value="历史">历史</option>
 
-                        <option value="地理">地理</option>
 
-                    </select>
 
-                </div>
 
-                <div class="filter-group">
 
-                    <div class="filter-label">年级分类</div>
 
-                    <select class="filter-select" id="webGradeFilter" onchange="filterWebs()">
 
-                        <option value="all">所有年级</option>
 
-                        <option value="小学">小学</option>
 
-                        <option value="初中">初中</option>
 
-                        <option value="高中">高中</option>
 
-                    </select>
 
-                </div>
 
-            </div>
 
-
 
-            <!-- 网页列表 -->
 
-            <div class="web-grid" id="webGrid">
 
-                <!-- 网页卡片将在这里动态生成 -->
 
-            </div>
 
-
 
-            <!-- 底部操作栏 -->
 
-            <div class="web-center-footer">
 
-                <div class="selected-count">已选择 <span id="webSelectedCountText">0</span> 个网页</div>
 
-                <div class="app-center-actions">
 
-                    <button class="app-center-btn app-center-btn-confirm" id="confirmAddWebsBtn" onclick="confirmAddWebs()" disabled>
 
-                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                            <polyline points="20 6 9 17 4 12"/>
 
-                        </svg>
 
-                        添加
 
-                    </button>
 
-                </div>
 
-            </div>
 
-        </div>
 
-    </div>
 
-
 
-    <!-- 网页详情浮窗 -->
 
-    <div class="web-detail-modal" id="webDetailModal">
 
-        <div class="web-detail-content">
 
-            <!-- 左侧预览区 -->
 
-            <div class="web-preview-area">
 
-                <div class="web-preview-header">
 
-                    <h4 class="web-preview-title" id="webDetailPreviewTitle">网页预览</h4>
 
-                    <button class="web-fullscreen-btn" onclick="toggleWebPreviewFullscreen()">
 
-                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                            <path d="M8 3H5a2 2 0 00-2 2v3m18 0V5a2 2 0 00-2-2h-3m0 18h3a2 2 0 002-2v-3M3 16v3a2 2 0 002 2h3"/>
 
-                        </svg>
 
-                        全屏
 
-                    </button>
 
-                </div>
 
-                <div class="web-preview-iframe" id="webDetailPreview">
 
-                    <iframe src="" frameborder="0" id="webDetailIframe"></iframe>
 
-                </div>
 
-            </div>
 
-
 
-            <!-- 右侧信息区 -->
 
-            <div class="web-info-area">
 
-                <div class="web-detail-header">
 
-                    <h3 class="web-detail-name" id="webDetailName">网页名称</h3>
 
-                    <div class="web-meta-item">
 
-                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                            <path d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
 
-                        </svg>
 
-                        <span id="webDetailSubject">学科</span>
 
-                    </div>
 
-                    <div class="web-meta-item">
 
-                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                            <path d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
 
-                        </svg>
 
-                        <span id="webDetailGrade">年级</span>
 
-                    </div>
 
-                    <div class="web-meta-item">
 
-                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                            <circle cx="12" cy="12" r="10"/>
 
-                            <polyline points="12 6 12 12 16 14"/>
 
-                        </svg>
 
-                        <span id="webDetailDuration">时长</span>
 
-                    </div>
 
-                </div>
 
-
 
-                <div class="web-detail-body">
 
-                    <div class="web-detail-section">
 
-                        <h4 class="web-detail-section-title">简介</h4>
 
-                        <p class="web-detail-section-content" id="webDetailDescription">
 
-                            网页简介内容
 
-                        </p>
 
-                    </div>
 
-
 
-                    <div class="web-detail-section">
 
-                        <h4 class="web-detail-section-title">作者信息</h4>
 
-                        <p class="web-detail-section-content" id="webDetailAuthor">
 
-                            作者名称
 
-                        </p>
 
-                    </div>
 
-
 
-                    <div class="web-detail-section">
 
-                        <h4 class="web-detail-section-title">创建时间</h4>
 
-                        <p class="web-detail-section-content" id="webDetailTime">
 
-                            创建时间
 
-                        </p>
 
-                    </div>
 
-                </div>
 
-
 
-                <div class="web-detail-footer">
 
-                    <button class="web-detail-btn web-detail-btn-secondary" onclick="closeWebDetail()">返回列表</button>
 
-                    <button class="web-detail-btn web-detail-btn-primary" onclick="addWebFromDetail()">添加到课件</button>
 
-                </div>
 
-            </div>
 
-        </div>
 
-    </div>
 
-
 
-    <!-- 资源 - 视频来源弹窗 -->
 
-    <div class="floating-modal" id="videoSourceModal">
 
-        <div class="floating-content">
 
-            <div class="floating-header">
 
-                <h3 class="floating-title">选择视频来源</h3>
 
-                <button class="floating-close" onclick="closeVideoSourceModal()">
 
-                    <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>
 
-            <div class="template-grid" style="grid-template-columns: repeat(2, 1fr);">
 
-                <div class="template-card" onclick="chooseLocalVideo()">
 
-                    <div class="template-preview">
 
-                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                            <path d="M12 5v14"/>
 
-                            <polyline points="5 12 12 5 19 12"/>
 
-                        </svg>
 
-                    </div>
 
-                    <div class="template-name">本地上传</div>
 
-                </div>
 
-                <div class="template-card" onclick="chooseBilibiliVideo()">
 
-                    <div class="template-preview">
 
-                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                            <rect x="3" y="4" width="18" height="14" rx="2"/>
 
-                            <polyline points="10 9 16 12 10 15 10 9"/>
 
-                        </svg>
 
-                    </div>
 
-                    <div class="template-name">Bilibili 检索</div>
 
-                </div>
 
-            </div>
 
-        </div>
 
-    </div>
 
-
 
-    <!-- 资源 - 音频上传弹窗 -->
 
-    <div class="floating-modal" id="audioUploadModal">
 
-        <div class="floating-content">
 
-            <div class="floating-header">
 
-                <h3 class="floating-title">上传音频</h3>
 
-                <button class="floating-close" onclick="closeAudioUploadModal()">
 
-                    <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>
 
-            <div class="web-config-form">
 
-                <div class="file-upload-area" onclick="document.getElementById('audioFileInput').click()">
 
-                    <input type="file" id="audioFileInput" accept="audio/*" style="display: none;" onchange="handleAudioFile(event)">
 
-                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
 
-                        <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/>
 
-                        <polyline points="17 8 12 3 7 8"/>
 
-                        <line x1="12" y1="3" x2="12" y2="15"/>
 
-                    </svg>
 
-                    <p class="upload-text">点击或拖拽音频到此处上传</p>
 
-                    <p class="upload-hint">支持.mp3、.wav等常见音频格式</p>
 
-                </div>
 
-                <div id="audioFileNameDisplay" class="file-name-display"></div>
 
-                <div class="resource-actions">
 
-                    <button class="floating-btn floating-btn-secondary" onclick="closeAudioUploadModal()">取消</button>
 
-                    <button class="floating-btn floating-btn-primary" id="confirmAudioUploadBtn" onclick="confirmAudioUpload()" disabled>确定</button>
 
-                </div>
 
-            </div>
 
-        </div>
 
-    </div>
 
-
 
-    <!-- 资源 - 文档上传弹窗 -->
 
-    <div class="floating-modal" id="documentUploadModal">
 
-        <div class="floating-content">
 
-            <div class="floating-header">
 
-                <h3 class="floating-title">上传文档</h3>
 
-                <button class="floating-close" onclick="closeDocumentUploadModal()">
 
-                    <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>
 
-            <div class="web-config-form">
 
-                <div class="file-upload-area" onclick="document.getElementById('documentFileInput').click()">
 
-                    <input type="file" id="documentFileInput" accept=".docx,.pdf" style="display: none;" onchange="handleDocumentFile(event)">
 
-                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
 
-                        <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/>
 
-                        <polyline points="17 8 12 3 7 8"/>
 
-                        <line x1="12" y1="3" x2="12" y2="15"/>
 
-                    </svg>
 
-                    <p class="upload-text">点击或拖拽文档到此处上传</p>
 
-                    <p class="upload-hint">支持 .docx、.doc、.pdf格式</p>
 
-                </div>
 
-                <div id="documentFileNameDisplay" class="file-name-display"></div>
 
-                <div class="resource-actions">
 
-                    <button class="floating-btn floating-btn-secondary" onclick="closeDocumentUploadModal()">取消</button>
 
-                    <button class="floating-btn floating-btn-primary" id="confirmDocumentUploadBtn" onclick="confirmDocumentUpload()" disabled>确定</button>
 
-                </div>
 
-            </div>
 
-        </div>
 
-    </div>
 
-
 
-    <!-- 资源 - 资源集合弹窗 -->
 
-    <div class="floating-modal" id="collectionModal">
 
-        <div class="floating-content">
 
-            <div class="floating-header">
 
-                <h3 class="floating-title">资源集合</h3>
 
-                <button class="floating-close" onclick="closeCollectionModal()">
 
-                    <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>
 
-            <div class="web-config-form">
 
-                <div class="file-upload-area" onclick="document.getElementById('collectionFileInput').click()">
 
-                    <input type="file" id="collectionFileInput" multiple style="display: none;" onchange="handleCollectionFiles(event)">
 
-                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
 
-                        <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/>
 
-                        <polyline points="17 8 12 3 7 8"/>
 
-                        <line x1="12" y1="3" x2="12" y2="15"/>
 
-                    </svg>
 
-                    <p class="upload-text">点击或拖拽文件到此处上传</p>
 
-                    <p class="upload-hint">支持 .docx、.doc、.pdf格式</p>
 
-                </div>
 
-                <div class="resource-upload-list" id="collectionFileList"></div>
 
-                <div class="resource-tip">最多添加5个文件</div>
 
-                <div class="resource-actions">
 
-                    <button class="floating-btn floating-btn-secondary" onclick="closeCollectionModal()">取消</button>
 
-                    <button class="floating-btn floating-btn-primary" id="confirmCollectionBtn" onclick="confirmCollection()" disabled>确定</button>
 
-                </div>
 
-            </div>
 
-        </div>
 
-    </div>
 
-
 
-    <!-- 创建应用方式选择弹窗 -->
 
-    <div class="modal-overlay" id="createAppMethodModal">
 
-        <div class="create-modal">
 
-            <button class="modal-close" onclick="hideCreateAppMethodModal()">
 
-                <svg width="20" height="20" 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 class="modal-header">
 
-                <h2>创建应用</h2>
 
-                <p>选择一种方式开始创建您的AI应用</p>
 
-            </div>
 
-
 
-            <div class="create-options">
 
-                <div class="create-card featured" onclick="selectCreateMethod('ai')">
 
-                    <div class="create-icon">
 
-                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                            <path d="M12 2L2 7l10 5 10-5-10-5z"/>
 
-                            <path d="M2 17l10 5 10-5"/>
 
-                            <path d="M2 12l10 5 10-5"/>
 
-                        </svg>
 
-                    </div>
 
-                    <h3>自AI创建</h3>
 
-                    <p>通过对话让AI为您生成应用</p>
 
-                </div>
 
-
 
-                <div class="create-card" onclick="selectCreateMethod('blank')">
 
-                    <div class="create-icon">
 
-                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
 
-                            <line x1="12" y1="8" x2="12" y2="16"/>
 
-                            <line x1="8" y1="12" x2="16" y2="12"/>
 
-                        </svg>
 
-                    </div>
 
-                    <h3>自空白创建</h3>
 
-                    <p>从空白画布开始手动创建应用</p>
 
-                </div>
 
-            </div>
 
-        </div>
 
-    </div>
 
-
 
-    <!-- AI创建应用浮窗 -->
 
-    <div class="floating-modal" id="aiCreateAppModal">
 
-        <div class="ai-create-app-content">
 
-            <div class="floating-header">
 
-                <h3 class="floating-title">AI创建应用</h3>
 
-                <button class="floating-close" onclick="closeAICreateModal()">
 
-                    <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>
 
-
 
-            <div class="ai-create-main">
 
-                <!-- 左侧画布预览 -->
 
-                <div class="app-canvas-preview" id="appCanvasPreview">
 
-                    <span>应用画布预览区</span>
 
-                </div>
 
-
 
-                <!-- 右侧对话栏 -->
 
-                <div class="ai-chat-panel">
 
-                    <div class="ai-chat-messages" id="aiChatMessages">
 
-                        <!-- 对话消息将在这里显示 -->
 
-                    </div>
 
-                    <div class="ai-chat-input-area">
 
-                        <div class="ai-chat-input-wrapper">
 
-                            <textarea class="ai-chat-input" id="aiChatInput" placeholder="描述您想要的应用功能..." rows="2"></textarea>
 
-                            <button class="ai-chat-send-btn" id="aiChatSendBtn" onclick="sendMessageToAI()">
 
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                    <line x1="22" y1="2" x2="11" y2="13"/>
 
-                                    <polygon points="22 2 15 22 11 13 2 9 22 2"/>
 
-                                </svg>
 
-                            </button>
 
-                        </div>
 
-                    </div>
 
-                </div>
 
-            </div>
 
-
 
-            <div class="ai-create-footer">
 
-                <button class="app-center-btn app-center-btn-cancel" onclick="closeAICreateModal()">取消</button>
 
-                <button class="app-center-btn app-center-btn-confirm" id="confirmCreateAppBtn" onclick="confirmAICreatedApp()">
 
-                    确认创建
 
-                </button>
 
-            </div>
 
-        </div>
 
-    </div>
 
-
 
-    <script>
 
-        let isEditMode = false;
 
-        let elementIdCounter = 0;
 
-        let selectedElement = null;
 
-        let currentTool = null; // 当前选中的工具
 
-        let isToolMode = false; // 是否处于工具编辑模式
 
-
 
-        // 工具配置数据
 
-        const toolConfigs = {
 
-            choice: {
 
-                name: '选择',
 
-                icon: '<circle cx="12" cy="12" r="10"/><path d="M12 16v-4m0-4h.01"/>',
 
-                hasTime: true,
 
-                hasViewWork: true,
 
-                hasVoting: false,
 
-                hasShowAnswer: true
 
-            },
 
-            qa: {
 
-                name: '问答',
 
-                icon: '<path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>',
 
-                hasTime: true,
 
-                hasViewWork: true,
 
-                hasVoting: true
 
-            },
 
-            vote: {
 
-                name: '投票',
 
-                icon: '<polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/>',
 
-                hasTime: true,
 
-                hasViewWork: true,
 
-                hasVoting: false
 
-            },
 
-            photo: {
 
-                name: '拍照',
 
-                icon: '<path d="M23 19a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2z"/><circle cx="12" cy="13" r="4"/>',
 
-                hasTime: true,
 
-                hasViewWork: true,
 
-                hasVoting: true
 
-            },
 
-            fillblank: {
 
-                name: '填空',
 
-                icon: '<line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/>',
 
-                hasTime: true,
 
-                hasViewWork: true,
 
-                hasVoting: false
 
-            },
 
-            sort: {
 
-                name: '排序',
 
-                icon: '<line x1="4" y1="6" x2="20" y2="6"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="18" x2="20" y2="18"/>',
 
-                hasTime: true,
 
-                hasViewWork: true,
 
-                hasVoting: false
 
-            },
 
-            whiteboard: {
 
-                name: '白板',
 
-                icon: '<path d="M12 19l7-7 3 3-7 7-3-3z"/><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"/><path d="M2 2l7.586 7.586"/>',
 
-                hasTime: true,
 
-                hasViewWork: true,
 
-                hasVoting: true
 
-            },
 
-            flashcard: {
 
-                name: '抽认卡',
 
-                icon: '<rect x="2" y="4" width="20" height="16" rx="2"/><path d="M7 15h10M12 9v6"/>',
 
-                hasTime: true,
 
-                hasViewWork: false,
 
-                hasVoting: false,
 
-                hasLearningMode: true
 
-            },
 
-            cocopi: {
 
-                name: 'CocoPi',
 
-                icon: '<polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>',
 
-                hasTime: true,
 
-                hasViewWork: true,
 
-                hasVoting: true
 
-            },
 
-            workspace: {
 
-                name: '创作空间',
 
-                icon: '<path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/>',
 
-                hasTime: true,
 
-                hasViewWork: true,
 
-                hasVoting: true
 
-            }
 
-        };
 
-
 
-        // 选择工具
 
-        function selectTool(toolType) {
 
-            currentTool = toolType;
 
-
 
-            // 切换到工具编辑模式
 
-            switchToToolMode(toolType);
 
-
 
-            // 显示配置面板
 
-            showToolConfig(toolType);
 
-
 
-            // 显示工具编辑区域
 
-            showToolEditArea(toolType);
 
-        }
 
-
 
-        // 切换到工具模式
 
-        function switchToToolMode(toolType) {
 
-            isToolMode = true;
 
-
 
-            // 隐藏普通元素工具栏
 
-            document.getElementById('elementToolbar').classList.remove('visible');
 
-            document.getElementById('elementToolbar').style.display = 'none';
 
-
 
-            // 显示底部大纲
 
-            document.getElementById('bottomOutline').classList.add('visible');
 
-
 
-            // 隐藏占位符
 
-            const placeholder = document.getElementById('slidePlaceholder');
 
-            if (placeholder) {
 
-                placeholder.style.display = 'none';
 
-            }
 
-
 
-            // 如果还没有进入编辑模式，则进入
 
-            if (!isEditMode) {
 
-                isEditMode = true;
 
-                if (document.getElementById('outlineTrack').children.length === 0) {
 
-                    generateSamplePages();
 
-                }
 
-            }
 
-        }
 
-
 
-        // 显示工具配置面板
 
-        function showToolConfig(toolType) {
 
-            const config = toolConfigs[toolType];
 
-
 
-            // 切换视图
 
-            document.getElementById('toolsListView').classList.add('hidden');
 
-            document.getElementById('toolsConfigView').classList.remove('hidden');
 
-
 
-            // 更新配置标题
 
-            document.getElementById('currentToolName').textContent = config.name;
 
-
 
-            // 生成配置内容
 
-            const configContent = document.getElementById('toolConfigContent');
 
-            let html = '';
 
-
 
-            // 查看作业配置
 
-            if (config.hasViewWork) {
 
-                html += `
 
-                    <div class="config-section">
 
-                        <div class="config-switch" onclick="toggleSwitch('viewWork')">
 
-                            <span class="config-switch-label">学生查看结果</span>
 
-                            <div class="switch-toggle" id="viewWorkSwitch"></div>
 
-                        </div>
 
-                    </div>
 
-                `;
 
-            }
 
-
 
-            // 提交后显示答案配置（选择题专用）
 
-            if (config.hasShowAnswer) {
 
-                html += `
 
-                    <div class="config-switch" onclick="toggleSwitch('showAnswer')">
 
-                        <span class="config-switch-label">提交后显示答案</span>
 
-                        <div class="switch-toggle" id="showAnswerSwitch"></div>
 
-                    </div>
 
-                `;
 
-            }
 
-
 
-            // 投票配置
 
-            if (config.hasVoting) {
 
-                html += `
 
-                    <div class="config-switch" onclick="toggleSwitch('voting')">
 
-                        <span class="config-switch-label">学生点赞</span>
 
-                        <div class="switch-toggle" id="votingSwitch"></div>
 
-                    </div>
 
-                `;
 
-            }
 
-
 
-            // 学习模式配置（抽认卡专用）
 
-            if (config.hasLearningMode) {
 
-                html += `
 
-                    <div class="config-section">
 
-                        <label class="config-label">学习模式</label>
 
-                        <div class="config-mode-list">
 
-                            <div class="mode-item active" onclick="toggleModeRadio(this, 'random')">
 
-                                <div class="mode-radio">
 
-                                    <div class="mode-radio-dot"></div>
 
-                                </div>
 
-                                <span class="mode-label">随机乱序</span>
 
-                            </div>
 
-                            <div class="mode-item" onclick="toggleModeRadio(this, 'autoread')">
 
-                                <div class="mode-radio">
 
-                                    <div class="mode-radio-dot"></div>
 
-                                </div>
 
-                                <span class="mode-label">自动朗读</span>
 
-                            </div>
 
-                            <div class="mode-item" onclick="toggleModeRadio(this, 'flip')">
 
-                                <div class="mode-radio">
 
-                                    <div class="mode-radio-dot"></div>
 
-                                </div>
 
-                                <span class="mode-label">正反对调</span>
 
-                            </div>
 
-                        </div>
 
-                    </div>
 
-                `;
 
-            }
 
-
 
-            configContent.innerHTML = html;
 
-
 
-            // 隐藏顶部标题栏
 
-            const panelHeader = document.querySelector('#toolsPanel .panel-header');
 
-            if (panelHeader) {
 
-                panelHeader.style.display = 'none';
 
-            }
 
-        }
 
-
 
-        // 显示工具编辑区域
 
-        function showToolEditArea(toolType) {
 
-            const toolEditContainer = document.getElementById('toolEditContainer');
 
-            const slideCanvas = document.getElementById('slideCanvas');
 
-            const config = toolConfigs[toolType];
 
-
 
-            // 隐藏slide-canvas，显示工具编辑容器
 
-            if (slideCanvas) {
 
-                slideCanvas.style.display = 'none';
 
-            }
 
-            if (toolEditContainer) {
 
-                toolEditContainer.style.display = 'flex';
 
-            }
 
-
 
-            // 创建工具编辑区域HTML
 
-            let html = `
 
-                <div class="tool-header">
 
-                    <div class="tool-type-selector" id="toolTypeSelector">
 
-                        <button class="tool-type-btn" onclick="toggleToolTypeDropdown()">
 
-                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                ${config.icon}
 
-                            </svg>
 
-                            <span>${config.name}</span>
 
-                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                <polyline points="6 9 12 15 18 9"/>
 
-                            </svg>
 
-                        </button>
 
-                        <div class="tool-type-dropdown">
 
-                            ${Object.keys(toolConfigs).map(key => {
 
-                                const cfg = toolConfigs[key];
 
-                                return `
 
-                                    <div class="tool-type-item ${key === toolType ? 'active' : ''}" onclick="switchToolType('${key}')">
 
-                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                            ${cfg.icon}
 
-                                        </svg>
 
-                                        <span>${cfg.name}</span>
 
-                                    </div>
 
-                                `;
 
-                            }).join('')}
 
-                        </div>
 
-                    </div>
 
-                </div>
 
-                <div class="tool-edit-area">
 
-                    <div class="tool-canvas" id="toolCanvas">
 
-                        ${generateToolContent(toolType)}
 
-                    </div>
 
-                </div>
 
-            `;
 
-
 
-            toolEditContainer.innerHTML = html;
 
-            
-            // 如果是排序工具，初始化拖动功能
 
-            if (toolType === 'sort') {
 
-                setTimeout(initSortDragAndDrop, 100);
 
-            }
 
-        }
 
-
 
-        // 生成工具内容
 
-        function generateToolContent(toolType) {
 
-            switch(toolType) {
 
-                case 'choice':
 
-                    return generateChoiceContent();
 
-                case 'qa':
 
-                    return generateQAContent();
 
-                case 'vote':
 
-                    return generateVoteContent();
 
-                case 'photo':
 
-                    return generatePhotoContent();
 
-                case 'fillblank':
 
-                    return generateFillBlankContent();
 
-                case 'sort':
 
-                    return generateSortContent();
 
-                case 'whiteboard':
 
-                    return generateWhiteboardContent();
 
-                case 'flashcard':
 
-                    return generateFlashcardContent();
 
-                case 'cocopi':
 
-                    return generateCocoPiContent();
 
-                case 'workspace':
 
-                    return generateWorkspaceContent();
 
-                default:
 
-                    return '<div>工具内容加载中...</div>';
 
-            }
 
-        }
 
-
 
-        // 生成选择题内容
 
-        function generateChoiceContent() {
 
-            return `
 
-                <div class="question-item">
 
-                    <div class="question-header">
 
-                        <span class="question-number">题目 1</span>
 
-                        <div class="question-actions">
 
-                            <button class="question-action-btn" onclick="copyQuestion(this)" title="复制题目">
 
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
 
-                                    <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/>
 
-                                </svg>
 
-                            </button>
 
-                            <button class="question-action-btn delete" onclick="deleteQuestion(this)" title="删除题目">
 
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                    <polyline points="3 6 5 6 21 6"/>
 
-                                    <path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/>
 
-                                </svg>
 
-                            </button>
 
-                        </div>
 
-                    </div>
 
-                    <div class="input-with-image">
 
-                        <textarea class="question-input" placeholder="输入题目内容...">水在多少摄氏度会结冰?</textarea>
 
-                        <button class="upload-image-btn" onclick="uploadImage(this)" title="上传图片">
 
-                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
 
-                                <circle cx="8.5" cy="8.5" r="1.5"/>
 
-                                <polyline points="21 15 16 10 5 21"/>
 
-                            </svg>
 
-                        </button>
 
-                    </div>
 
-                    <div class="options-list">
 
-                        <div class="option-item">
 
-                            <div class="option-drag-handle" title="拖动排序">
 
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                    <line x1="3" y1="12" x2="21" y2="12"/>
 
-                                    <line x1="3" y1="6" x2="21" y2="6"/>
 
-                                    <line x1="3" y1="18" x2="21" y2="18"/>
 
-                                </svg>
 
-                            </div>
 
-                            <div class="option-checkbox checked" onclick="toggleOption(this)">
 
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                    <polyline points="20 6 9 17 4 12"/>
 
-                                </svg>
 
-                            </div>
 
-                            <input type="text" class="option-input" placeholder="选项A" value="0°C">
 
-                            <div class="option-actions">
 
-                                <button class="option-action-btn" onclick="addOptionAfter(this)" title="在下方添加选项">
 
-                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                        <line x1="12" y1="5" x2="12" y2="19"/>
 
-                                        <line x1="5" y1="12" x2="19" y2="12"/>
 
-                                    </svg>
 
-                                </button>
 
-                                <button class="option-action-btn delete" onclick="deleteOption(this)" title="删除选项">
 
-                                    <svg 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>
 
-                        </div>
 
-                        <div class="option-item">
 
-                            <div class="option-drag-handle" title="拖动排序">
 
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                    <line x1="3" y1="12" x2="21" y2="12"/>
 
-                                    <line x1="3" y1="6" x2="21" y2="6"/>
 
-                                    <line x1="3" y1="18" x2="21" y2="18"/>
 
-                                </svg>
 
-                            </div>
 
-                            <div class="option-checkbox" onclick="toggleOption(this)">
 
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                    <polyline points="20 6 9 17 4 12"/>
 
-                                </svg>
 
-                            </div>
 
-                            <input type="text" class="option-input" placeholder="选项B" value="100°C">
 
-                            <div class="option-actions">
 
-                                <button class="option-action-btn" onclick="addOptionAfter(this)" title="在下方添加选项">
 
-                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                        <line x1="12" y1="5" x2="12" y2="19"/>
 
-                                        <line x1="5" y1="12" x2="19" y2="12"/>
 
-                                    </svg>
 
-                                </button>
 
-                                <button class="option-action-btn delete" onclick="deleteOption(this)" title="删除选项">
 
-                                    <svg 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>
 
-                        </div>
 
-                        <div class="option-item">
 
-                            <div class="option-drag-handle" title="拖动排序">
 
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                    <line x1="3" y1="12" x2="21" y2="12"/>
 
-                                    <line x1="3" y1="6" x2="21" y2="6"/>
 
-                                    <line x1="3" y1="18" x2="21" y2="18"/>
 
-                                </svg>
 
-                            </div>
 
-                            <div class="option-checkbox" onclick="toggleOption(this)">
 
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                    <polyline points="20 6 9 17 4 12"/>
 
-                                </svg>
 
-                            </div>
 
-                            <input type="text" class="option-input" placeholder="选项C" value="50°C">
 
-                            <div class="option-actions">
 
-                                <button class="option-action-btn" onclick="addOptionAfter(this)" title="在下方添加选项">
 
-                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                        <line x1="12" y1="5" x2="12" y2="19"/>
 
-                                        <line x1="5" y1="12" x2="19" y2="12"/>
 
-                                    </svg>
 
-                                </button>
 
-                                <button class="option-action-btn delete" onclick="deleteOption(this)" title="删除选项">
 
-                                    <svg 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>
 
-                        </div>
 
-                        <button class="add-option-btn-with-text" onclick="addOption(this)" title="添加选项">
 
-                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                <line x1="12" y1="5" x2="12" y2="19"/>
 
-                                <line x1="5" y1="12" x2="19" y2="12"/>
 
-                            </svg>
 
-                            <span>选项</span>
 
-                        </button>
 
-                    </div>
 
-                    <div class="explanation-section">
 
-                        <div class="explanation-header">
 
-                            <span class="explanation-label">解释说明</span>
 
-                            <button class="ai-gen-btn" onclick="generateExplanation()">
 
-                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                    <path d="M12 2L2 7l10 5 10-5-10-5z"/>
 
-                                    <path d="M2 17l10 5 10-5"/>
 
-                                    <path d="M2 12l10 5 10-5"/>
 
-                                </svg>
 
-                                AI生成
 
-                            </button>
 
-                        </div>
 
-                        <textarea class="explanation-textarea" placeholder="为这道题目添加解释说明..."></textarea>
 
-                    </div>
 
-                </div>
 
-                <button class="add-question-btn-with-text" onclick="addQuestion()" title="添加题目">
 
-                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                        <line x1="12" y1="5" x2="12" y2="19"/>
 
-                        <line x1="5" y1="12" x2="19" y2="12"/>
 
-                    </svg>
 
-                    <span>题目</span>
 
-                </button>
 
-            `;
 
-        }
 
-
 
-        // 生成问答内容
 
-        function generateQAContent() {
 
-            return `
 
-                <div class="question-item">
 
-                    <div class="question-header">
 
-                        <span class="question-number">题目 1</span>
 
-                    </div>
 
-                    <div class="input-with-image">
 
-                        <textarea class="question-input" placeholder="输入题目内容...">请描述水的三态变化过程</textarea>
 
-                        <button class="upload-image-btn" onclick="uploadImage(this)" title="上传图片">
 
-                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
 
-                                <circle cx="8.5" cy="8.5" r="1.5"/>
 
-                                <polyline points="21 15 16 10 5 21"/>
 
-                            </svg>
 
-                        </button>
 
-                    </div>
 
-                    <div class="explanation-section">
 
-                        <div class="explanation-header">
 
-                            <span class="explanation-label">评价标准</span>
 
-                        </div>
 
-                        <textarea class="explanation-textarea" placeholder="设置评价标准，如:必须包括/避免..."></textarea>
 
-                    </div>
 
-                </div>
 
-            `;
 
-        }
 
-
 
-        // 生成投票内容
 
-        function generateVoteContent() {
 
-            return `
 
-                <div class="question-item">
 
-                    <div class="question-header">
 
-                        <span class="question-number">投票主题</span>
 
-                    </div>
 
-                    <div class="input-with-image">
 
-                        <textarea class="question-input" placeholder="输入投票主题...">你最喜欢哪种状态的水?</textarea>
 
-                        <button class="upload-image-btn" onclick="uploadImage(this)" title="上传图片">
 
-                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
 
-                                <circle cx="8.5" cy="8.5" r="1.5"/>
 
-                                <polyline points="21 15 16 10 5 21"/>
 
-                            </svg>
 
-                        </button>
 
-                    </div>
 
-                    <div class="options-list">
 
-                        <div class="option-item">
 
-                            <input type="text" class="option-input" placeholder="选项1" value="固态(冰)">
 
-                        </div>
 
-                        <div class="option-item">
 
-                            <input type="text" class="option-input" placeholder="选项2" value="液态(水)">
 
-                        </div>
 
-                        <div class="option-item">
 
-                            <input type="text" class="option-input" placeholder="选项3" value="气态(水蒸气)">
 
-                        </div>
 
-                        <button class="add-option-btn-with-text" onclick="addOption(this)" title="添加选项">
 
-                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                <line x1="12" y1="5" x2="12" y2="19"/>
 
-                                <line x1="5" y1="12" x2="19" y2="12"/>
 
-                            </svg>
 
-                            <span>选项</span>
 
-                        </button>
 
-                    </div>
 
-                </div>
 
-            `;
 
-        }
 
-
 
-        // 生成拍照内容
 
-        function generatePhotoContent() {
 
-            return `
 
-                <div class="question-item">
 
-                    <div class="question-header">
 
-                        <span class="question-number">拍照指引</span>
 
-                    </div>
 
-                    <textarea class="question-input" placeholder="输入拍照指引内容...">请拍摄家中水的不同状态</textarea>
 
-                </div>
 
-            `;
 
-        }
 
-
 
-        // 生成填空内容
 
-        function generateFillBlankContent() {
 
-            return `
 
-                <div class="question-item">
 
-                    <div class="question-header">
 
-                        <span class="question-number">题目 1</span>
 
-                    </div>
 
-                    <div class="question-input-wrapper">
 
-                        <textarea class="question-input" placeholder="输入题目内容，使用___表示填空...">水在___°C会结冰，在___°C会沸腾。</textarea>
 
-                        <button class="add-blank-btn" onclick="insertBlank(this)" title="插入填空符">
 
-                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                <line x1="5" y1="12" x2="19" y2="12"/>
 
-                                <line x1="5" y1="12" x2="19" y2="12" stroke-dasharray="2,2"/>
 
-                            </svg>
 
-                            <span>填空符</span>
 
-                        </button>
 
-                    </div>
 
-                    <div class="explanation-section">
 
-                        <div class="explanation-header">
 
-                            <span class="explanation-label">参考答案</span>
 
-                        </div>
 
-                        <textarea class="explanation-textarea" placeholder="输入参考答案...">0, 100</textarea>
 
-                    </div>
 
-                </div>
 
-                <button class="add-question-btn-with-text" onclick="addQuestion()" title="添加题目">
 
-                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                        <line x1="12" y1="5" x2="12" y2="19"/>
 
-                        <line x1="5" y1="12" x2="19" y2="12"/>
 
-                    </svg>
 
-                    <span>题目</span>
 
-                </button>
 
-            `;
 
-        }
 
-
 
-        // 生成排序内容
 
-        function generateSortContent() {
 
-            return `
 
-                <div class="question-item">
 
-                    <div class="question-header">
 
-                        <span class="question-number">题目 1</span>
 
-                    </div>
 
-                    <div class="input-with-image">
 
-                        <textarea class="question-input" placeholder="输入题目内容...">将水的状态变化过程按顺序排列</textarea>
 
-                        <button class="upload-image-btn" onclick="uploadImage(this)" title="上传图片">
 
-                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
 
-                                <circle cx="8.5" cy="8.5" r="1.5"/>
 
-                                <polyline points="21 15 16 10 5 21"/>
 
-                            </svg>
 
-                        </button>
 
-                    </div>
 
-                    <div class="options-list">
 
-                        <div class="sort-item-static">
 
-                            <div class="sort-number">1</div>
 
-                            <input type="text" class="option-input" placeholder="片段1" value="冰融化">
 
-                            <div class="option-actions">
 
-                                <button class="option-action-btn delete" onclick="deleteSortOption(this)" title="删除片段">
 
-                                    <svg 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>
 
-                        </div>
 
-                        <div class="sort-item-static">
 
-                            <div class="sort-number">2</div>
 
-                            <input type="text" class="option-input" placeholder="片段2" value="水加热">
 
-                            <div class="option-actions">
 
-                                <button class="option-action-btn delete" onclick="deleteSortOption(this)" title="删除片段">
 
-                                    <svg 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>
 
-                        </div>
 
-                        <div class="sort-item-static">
 
-                            <div class="sort-number">3</div>
 
-                            <input type="text" class="option-input" placeholder="片段3" value="水沸腾">
 
-                            <div class="option-actions">
 
-                                <button class="option-action-btn delete" onclick="deleteSortOption(this)" title="删除片段">
 
-                                    <svg 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>
 
-                        </div>
 
-                        <button class="add-option-btn-with-text" onclick="addSortOption(this)" title="添加片段">
 
-                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                <line x1="12" y1="5" x2="12" y2="19"/>
 
-                                <line x1="5" y1="12" x2="19" y2="12"/>
 
-                            </svg>
 
-                            <span>片段</span>
 
-                        </button>
 
-                    </div>
 
-                    <div class="explanation-section">
 
-                        <div class="explanation-header">
 
-                            <span class="explanation-label">正确排序</span>
 
-                        </div>
 
-                        <div class="sort-order-display" id="sortOrderDisplay">
 
-                            <div class="sort-order-item draggable" draggable="true" data-order="1">
 
-                                <div class="sort-drag-handle">
 
-                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                        <line x1="3" y1="12" x2="21" y2="12"/>
 
-                                        <line x1="3" y1="6" x2="21" y2="6"/>
 
-                                        <line x1="3" y1="18" x2="21" y2="18"/>
 
-                                    </svg>
 
-                                </div>
 
-                                <span>1</span>
 
-                            </div>
 
-                            <div class="sort-arrow">→</div>
 
-                            <div class="sort-order-item draggable" draggable="true" data-order="2">
 
-                                <div class="sort-drag-handle">
 
-                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                        <line x1="3" y1="12" x2="21" y2="12"/>
 
-                                        <line x1="3" y1="6" x2="21" y2="6"/>
 
-                                        <line x1="3" y1="18" x2="21" y2="18"/>
 
-                                    </svg>
 
-                                </div>
 
-                                <span>2</span>
 
-                            </div>
 
-                            <div class="sort-arrow">→</div>
 
-                            <div class="sort-order-item draggable" draggable="true" data-order="3">
 
-                                <div class="sort-drag-handle">
 
-                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                        <line x1="3" y1="12" x2="21" y2="12"/>
 
-                                        <line x1="3" y1="6" x2="21" y2="6"/>
 
-                                        <line x1="3" y1="18" x2="21" y2="18"/>
 
-                                    </svg>
 
-                                </div>
 
-                                <span>3</span>
 
-                            </div>
 
-                        </div>
 
-                    </div>
 
-                </div>
 
-                <button class="add-question-btn-with-text" onclick="addQuestion()" title="添加题目">
 
-                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                        <line x1="12" y1="5" x2="12" y2="19"/>
 
-                        <line x1="5" y1="12" x2="19" y2="12"/>
 
-                    </svg>
 
-                    <span>题目</span>
 
-                </button>
 
-            `;
 
-        }
 
-
 
-        // 生成白板内容
 
-        function generateWhiteboardContent() {
 
-            return `
 
-                <div class="question-item">
 
-                    <div class="question-header">
 
-                        <span class="question-number">白板主题</span>
 
-                    </div>
 
-                    <div class="input-with-image">
 
-                        <textarea class="question-input" placeholder="输入白板主题...">画出水的三态变化示意图</textarea>
 
-                        <button class="upload-image-btn" onclick="uploadImage(this)" title="上传图片">
 
-                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
 
-                                <circle cx="8.5" cy="8.5" r="1.5"/>
 
-                                <polyline points="21 15 16 10 5 21"/>
 
-                            </svg>
 
-                        </button>
 
-                    </div>
 
-                </div>
 
-            `;
 
-        }
 
-
 
-        // 生成抽认卡内容
 
-        function generateFlashcardContent() {
 
-            return `
 
-                <div class="question-item">
 
-                    <div class="flashcard-layout">
 
-                        <div class="flashcard-side">
 
-                            <div class="flashcard-side-label">正面</div>
 
-                            <div class="input-with-image">
 
-                                <textarea class="flashcard-content" placeholder="输入正面内容...">水的固态叫什么?</textarea>
 
-                                <button class="upload-image-btn" onclick="uploadImage(this)" title="上传图片">
 
-                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
 
-                                        <circle cx="8.5" cy="8.5" r="1.5"/>
 
-                                        <polyline points="21 15 16 10 5 21"/>
 
-                                    </svg>
 
-                                </button>
 
-                            </div>
 
-                        </div>
 
-                        <div class="flashcard-side">
 
-                            <div class="flashcard-side-label">背面</div>
 
-                            <div class="input-with-image">
 
-                                <textarea class="flashcard-content" placeholder="输入背面内容...">冰</textarea>
 
-                                <button class="upload-image-btn" onclick="uploadImage(this)" title="上传图片">
 
-                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
 
-                                        <circle cx="8.5" cy="8.5" r="1.5"/>
 
-                                        <polyline points="21 15 16 10 5 21"/>
 
-                                    </svg>
 
-                                </button>
 
-                            </div>
 
-                        </div>
 
-                    </div>
 
-                </div>
 
-                <button class="add-question-btn-with-text" onclick="addFlashcard()" title="添加卡片">
 
-                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                        <line x1="12" y1="5" x2="12" y2="19"/>
 
-                        <line x1="5" y1="12" x2="19" y2="12"/>
 
-                    </svg>
 
-                    <span>卡片</span>
 
-                </button>
 
-            `;
 
-        }
 
-
 
-        // 生成CocoPi内容
 
-        function generateCocoPiContent() {
 
-            return `
 
-                <div class="question-item">
 
-                    <div class="question-header">
 
-                        <span class="question-number">编程任务</span>
 
-                    </div>
 
-                    <textarea class="question-input" placeholder="输入编程任务描述...">使用温度传感器监测水的温度变化</textarea>
 
-                    <div style="margin-top: 20px; padding: 40px; background: #f3f4f6; border-radius: 12px; text-align: center; color: #6b7280;">
 
-                        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="margin: 0 auto 16px;">
 
-                            <polyline points="16 18 22 12 16 6"/>
 
-                            <polyline points="8 6 2 12 8 18"/>
 
-                        </svg>
 
-                        <div>CocoPi编程界面占位</div>
 
-                        <div style="font-size: 12px; margin-top: 8px;">点击加载CocoPi编程模块</div>
 
-                    </div>
 
-                </div>
 
-            `;
 
-        }
 
-
 
-        // 生成创作空间内容
 
-        function generateWorkspaceContent() {
 
-            return `
 
-                <div class="question-item">
 
-                    <div class="question-header">
 
-                        <span class="question-number">创作任务</span>
 
-                    </div>
 
-                    <textarea class="question-input" placeholder="输入创作任务描述...">创建一个介绍水循环的智能体</textarea>
 
-                    <div style="margin-top: 20px; padding: 40px; background: #f3f4f6; border-radius: 12px; text-align: center; color: #6b7280;">
 
-                        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="margin: 0 auto 16px;">
 
-                            <path d="M12 2L2 7l10 5 10-5-10-5z"/>
 
-                            <path d="M2 17l10 5 10-5"/>
 
-                            <path d="M2 12l10 5 10-5"/>
 
-                        </svg>
 
-                        <div>CocoFlow创作空间占位</div>
 
-                        <div style="font-size: 12px; margin-top: 8px;">点击进入CocoFlow创作界面</div>
 
-                    </div>
 
-                </div>
 
-            `;
 
-        }
 
-
 
-        // 返回工具列表
 
-        function backToToolsList() {
 
-            document.getElementById('toolsListView').classList.remove('hidden');
 
-            document.getElementById('toolsConfigView').classList.add('hidden');
 
-
 
-            // 显示顶部标题栏
 
-            const panelHeader = document.querySelector('#toolsPanel .panel-header');
 
-            if (panelHeader) {
 
-                panelHeader.style.display = 'flex';
 
-            }
 
-        }
 
-
 
-        // 恢复正常的slide显示
 
-        function restoreNormalView() {
 
-            const toolEditContainer = document.getElementById('toolEditContainer');
 
-            const slideCanvas = document.getElementById('slideCanvas');
 
-
 
-            if (toolEditContainer) {
 
-                toolEditContainer.style.display = 'none';
 
-            }
 
-            if (slideCanvas) {
 
-                slideCanvas.style.display = 'flex';
 
-            }
 
-
 
-            isToolMode = false;
 
-        }
 
-
 
-        // ========== 资源功能 ==========
 
-        let audioSelectedFile = null;
 
-        let documentSelectedFile = null;
 
-        let collectionFiles = [];
 
-
 
-        function openVideoSourceModal() {
 
-            document.getElementById('videoSourceModal').classList.add('active');
 
-        }
 
-
 
-        function closeVideoSourceModal() {
 
-            document.getElementById('videoSourceModal').classList.remove('active');
 
-        }
 
-
 
-        function chooseLocalVideo() {
 
-            const input = document.createElement('input');
 
-            input.type = 'file';
 
-            input.accept = 'video/*';
 
-            input.onchange = (e) => {
 
-                const file = e.target.files[0];
 
-                if (file) {
 
-                    closeVideoSourceModal();
 
-                    addResourcePage('视频', file.name || '视频');
 
-                }
 
-            };
 
-            input.click();
 
-        }
 
-
 
-        function chooseBilibiliVideo() {
 
-            closeVideoSourceModal();
 
-            alert('已选择来自 Bilibili 的视频占位');
 
-            addResourcePage('视频', 'Bilibili 视频');
 
-        }
 
-
 
-        function openAudioUploadModal() {
 
-            document.getElementById('audioFileInput').value = '';
 
-            document.getElementById('audioFileNameDisplay').style.display = 'none';
 
-            document.getElementById('confirmAudioUploadBtn').disabled = true;
 
-            audioSelectedFile = null;
 
-            document.getElementById('audioUploadModal').classList.add('active');
 
-        }
 
-
 
-        function handleAudioFile(event) {
 
-            audioSelectedFile = event.target.files[0] || null;
 
-            const display = document.getElementById('audioFileNameDisplay');
 
-            if (audioSelectedFile) {
 
-                display.textContent = audioSelectedFile.name;
 
-                display.style.display = 'block';
 
-            } else {
 
-                display.textContent = '';
 
-                display.style.display = 'none';
 
-            }
 
-            document.getElementById('confirmAudioUploadBtn').disabled = !audioSelectedFile;
 
-        }
 
-
 
-        function confirmAudioUpload() {
 
-            if (!audioSelectedFile) return;
 
-            addResourcePage('音频', audioSelectedFile.name || '音频');
 
-            closeAudioUploadModal();
 
-        }
 
-
 
-        function closeAudioUploadModal() {
 
-            audioSelectedFile = null;
 
-            document.getElementById('audioUploadModal').classList.remove('active');
 
-            document.getElementById('confirmAudioUploadBtn').disabled = true;
 
-        }
 
-
 
-        function openDocumentUploadModal() {
 
-            document.getElementById('documentFileInput').value = '';
 
-            document.getElementById('documentFileNameDisplay').style.display = 'none';
 
-            document.getElementById('confirmDocumentUploadBtn').disabled = true;
 
-            documentSelectedFile = null;
 
-            document.getElementById('documentUploadModal').classList.add('active');
 
-        }
 
-
 
-        function handleDocumentFile(event) {
 
-            documentSelectedFile = event.target.files[0] || null;
 
-            const display = document.getElementById('documentFileNameDisplay');
 
-            if (documentSelectedFile) {
 
-                display.textContent = documentSelectedFile.name;
 
-                display.style.display = 'block';
 
-            } else {
 
-                display.textContent = '';
 
-                display.style.display = 'none';
 
-            }
 
-            document.getElementById('confirmDocumentUploadBtn').disabled = !documentSelectedFile;
 
-        }
 
-
 
-        function confirmDocumentUpload() {
 
-            if (!documentSelectedFile) return;
 
-            addResourcePage('文档', documentSelectedFile.name || '文档');
 
-            closeDocumentUploadModal();
 
-        }
 
-
 
-        function closeDocumentUploadModal() {
 
-            documentSelectedFile = null;
 
-            document.getElementById('documentUploadModal').classList.remove('active');
 
-            document.getElementById('confirmDocumentUploadBtn').disabled = true;
 
-        }
 
-
 
-        function openCollectionModal() {
 
-            collectionFiles = [];
 
-            renderCollectionList();
 
-            document.getElementById('collectionModal').classList.add('active');
 
-        }
 
-
 
-        function closeCollectionModal() {
 
-            collectionFiles = [];
 
-            renderCollectionList();
 
-            document.getElementById('collectionModal').classList.remove('active');
 
-        }
 
-
 
-        function handleCollectionFiles(event) {
 
-            const newFiles = Array.from(event.target.files || []);
 
-            newFiles.forEach(file => {
 
-                if (collectionFiles.length < 5) {
 
-                    collectionFiles.push(file);
 
-                }
 
-            });
 
-            event.target.value = '';
 
-            renderCollectionList();
 
-        }
 
-
 
-        function renderCollectionList() {
 
-            const list = document.getElementById('collectionFileList');
 
-            if (!list) return;
 
-            list.innerHTML = collectionFiles.map((file, index) => `
 
-                <div class="resource-file-item">
 
-                    <div class="resource-file-name">
 
-                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                            <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
 
-                            <polyline points="14 2 14 8 20 8"/>
 
-                        </svg>
 
-                        <span title="${file.name}">${file.name}</span>
 
-                    </div>
 
-                    <button class="resource-remove-btn" onclick="removeCollectionFile(${index})">
 
-                        <svg width="14" height="14" 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('');
 
-            document.getElementById('confirmCollectionBtn').disabled = collectionFiles.length === 0;
 
-        }
 
-
 
-        function removeCollectionFile(index) {
 
-            collectionFiles.splice(index, 1);
 
-            renderCollectionList();
 
-        }
 
-
 
-        function confirmCollection() {
 
-            if (collectionFiles.length === 0) return;
 
-            const filesSnapshot = [...collectionFiles];
 
-            addResourcePage('资源集合', `资源集合 (${collectionFiles.length})`, filesSnapshot);
 
-            closeCollectionModal();
 
-        }
 
-
 
-        function addResourcePage(resourceType, label, files = []) {
 
-            if (!isEditMode) {
 
-                switchToEditMode();
 
-            } else {
 
-                document.getElementById('elementToolbar').classList.add('visible');
 
-                document.getElementById('bottomOutline').classList.add('visible');
 
-                const placeholder = document.getElementById('slidePlaceholder');
 
-                if (placeholder) placeholder.style.display = 'none';
 
-            }
 
-
 
-            const outlineTrack = document.getElementById('outlineTrack');
 
-            const pageIndex = outlineTrack.querySelectorAll('.outline-item-wrapper').length + 1;
 
-
 
-            const wrapper = document.createElement('div');
 
-            wrapper.className = 'outline-item-wrapper';
 
-
 
-            const outlineItem = document.createElement('div');
 
-            outlineItem.className = 'outline-item active';
 
-            outlineItem.draggable = true;
 
-            outlineItem.dataset.pageIndex = pageIndex;
 
-            outlineItem.onclick = (e) => selectPage(pageIndex, e);
 
-            outlineItem.innerHTML = `
 
-                <span class="page-number">${pageIndex}</span>
 
-                <span>${label}</span>
 
-                <div class="page-menu" onclick="event.stopPropagation(); togglePageMenu(event, ${pageIndex})">
 
-                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                        <circle cx="12" cy="12" r="1"/>
 
-                        <circle cx="12" cy="5" r="1"/>
 
-                        <circle cx="12" cy="19" r="1"/>
 
-                    </svg>
 
-                    <div class="page-menu-dropdown">
 
-                        <div class="page-menu-item" onclick="copyPage(${pageIndex})">
 
-                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
 
-                                <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/>
 
-                            </svg>
 
-                            复制
 
-                        </div>
 
-                        <div class="page-menu-item" onclick="addBlankPage(${pageIndex})">
 
-                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                <line x1="12" y1="5" x2="12" y2="19"/>
 
-                                <line x1="5" y1="12" x2="19" y2="12"/>
 
-                            </svg>
 
-                            新增
 
-                        </div>
 
-                        <div class="page-menu-item danger" onclick="deletePage(${pageIndex})">
 
-                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                <polyline points="3 6 5 6 21 6"/>
 
-                                <path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/>
 
-                            </svg>
 
-                            删除
 
-                        </div>
 
-                    </div>
 
-                </div>
 
-            `;
 
-
 
-            outlineItem.addEventListener('dragstart', handleDragStart);
 
-            outlineItem.addEventListener('dragend', handleDragEnd);
 
-            outlineItem.addEventListener('dragover', handleDragOver);
 
-            outlineItem.addEventListener('drop', handleDrop);
 
-            outlineItem.addEventListener('dragleave', handleDragLeave);
 
-
 
-            document.querySelectorAll('.outline-item').forEach(item => item.classList.remove('active'));
 
-
 
-            const addBtn = document.createElement('button');
 
-            addBtn.className = 'add-page-between';
 
-            addBtn.textContent = '+';
 
-            addBtn.onclick = () => addPageBetween(pageIndex);
 
-
 
-            wrapper.appendChild(outlineItem);
 
-            wrapper.appendChild(addBtn);
 
-            outlineTrack.appendChild(wrapper);
 
-
 
-            syncRightOutlineWithBottom();
 
-            renderResourceCanvas(resourceType, label, files);
 
-            alert('已添加资源页面: ' + label);
 
-        }
 
-
 
-        function renderResourceCanvas(resourceType, label, files = []) {
 
-            const canvas = document.getElementById('slideCanvas');
 
-            const placeholder = document.getElementById('slidePlaceholder');
 
-            if (placeholder) {
 
-                placeholder.style.display = 'none';
 
-            }
 
-            const elementToolbar = document.getElementById('elementToolbar');
 
-            if (elementToolbar) {
 
-                elementToolbar.classList.remove('visible');
 
-                elementToolbar.style.display = 'none';
 
-            }
 
-            document.getElementById('bottomOutline').classList.add('visible');
 
-
 
-            const icons = {
 
-                '视频': '▶️',
 
-                '音频': '🎵',
 
-                '文档': '📄',
 
-                '资源集合': '📚'
 
-            };
 
-            const descMap = {
 
-                '视频': '全屏视频播放器占位',
 
-                '音频': '音频播放条占位',
 
-                '文档': '文档阅读器占位',
 
-                '资源集合': '顶部标签可切换的资源集合占位'
 
-            };
 
-
 
-            const showTabs = resourceType === '资源集合';
 
-            const tabItems = showTabs
 
-                ? (files.length > 0 ? files.slice(0, 5).map((f, idx) => f.name || `资源${idx + 1}`) : ['资源1', '资源2', '资源3'])
 
-                : [];
 
-            const tabsHtml = showTabs ? `<div class="resource-tabs">${tabItems.map((name, idx) => `<div class="resource-tab ${idx === 0 ? 'active' : ''}">${name}</div>`).join('')}</div>` : '';
 
-
 
-            canvas.innerHTML = `
 
-                <div style="width: 100%; height: 100%; display: flex; flex-direction: column;">
 
-                    ${tabsHtml}
 
-                    <div style="flex: 1; display: flex; align-items: center; justify-content: center;">
 
-                        <div style="width: 80%; background: #fafbfc; border: 2px dashed #e5e7eb; border-radius: 16px; padding: 32px; text-align: center;">
 
-                            <div style="font-size: 42px; margin-bottom: 12px;">${icons[resourceType] || '📦'}</div>
 
-                            <div style="font-size: 18px; font-weight: 700; color: #111827; margin-bottom: 6px;">${label}</div>
 
-                            <div style="font-size: 13px; color: #6b7280;">${descMap[resourceType] || '资源内容占位'}</div>
 
-                        </div>
 
-                    </div>
 
-                </div>
 
-            `;
 
-        }
 
-
 
-        // 切换开关
 
-        function toggleSwitch(switchType) {
 
-            event.stopPropagation();
 
-            const switchEl = document.getElementById(switchType + 'Switch');
 
-            if (switchEl) {
 
-                // 如果是关闭"学生查看结果"，需要同时关闭"学生点赞"
 
-                if (switchType === 'viewWork' && switchEl.classList.contains('active')) {
 
-                    const votingSwitch = document.getElementById('votingSwitch');
 
-                    if (votingSwitch && votingSwitch.classList.contains('active')) {
 
-                        votingSwitch.classList.remove('active');
 
-                    }
 
-                }
 
-                
-                // 如果是打开"学生点赞"，需要同时打开"学生查看结果"
 
-                if (switchType === 'voting' && !switchEl.classList.contains('active')) {
 
-                    const viewWorkSwitch = document.getElementById('viewWorkSwitch');
 
-                    if (viewWorkSwitch && !viewWorkSwitch.classList.contains('active')) {
 
-                        viewWorkSwitch.classList.add('active');
 
-                    }
 
-                }
 
-                
-                switchEl.classList.toggle('active');
 
-            }
 
-        }
 
-
 
-        // 切换模式（多选）
 
-        function toggleMode(element, mode) {
 
-            element.classList.toggle('active');
 
-        }
 
-
 
-        // 切换模式（单选）
 
-        function toggleModeRadio(element, mode) {
 
-            const parent = element.parentElement;
 
-            parent.querySelectorAll('.mode-item').forEach(item => {
 
-                item.classList.remove('active');
 
-            });
 
-            element.classList.add('active');
 
-        }
 
-
 
-        // 插入填空符
 
-        function insertBlank(button) {
 
-            const wrapper = button.closest('.question-input-wrapper');
 
-            const textarea = wrapper.querySelector('.question-input');
 
-            const cursorPos = textarea.selectionStart;
 
-            const textBefore = textarea.value.substring(0, cursorPos);
 
-            const textAfter = textarea.value.substring(cursorPos);
 
-            textarea.value = textBefore + '___' + textAfter;
 
-            textarea.focus();
 
-            textarea.setSelectionRange(cursorPos + 3, cursorPos + 3);
 
-        }
 
-
 
-        // 添加排序选项
 
-        function addSortOption(button) {
 
-            const optionsList = button.parentElement;
 
-            const currentItems = optionsList.querySelectorAll('.sort-item-static');
 
-            const nextNumber = currentItems.length + 1;
 
-            
-            const sortItem = document.createElement('div');
 
-            sortItem.className = 'sort-item-static';
 
-            sortItem.innerHTML = `
 
-                <div class="sort-number">${nextNumber}</div>
 
-                <input type="text" class="option-input" placeholder="片段${nextNumber}">
 
-                <div class="option-actions">
 
-                    <button class="option-action-btn delete" onclick="deleteSortOption(this)" title="删除片段">
 
-                        <svg 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>
 
-            `;
 
-            optionsList.insertBefore(sortItem, button);
 
-            
-            // 更新正确排序显示
 
-            updateSortOrderDisplay();
 
-        }
 
-
 
-        // 删除排序选项
 
-        function deleteSortOption(button) {
 
-            const sortItem = button.closest('.sort-item-static');
 
-            const optionsList = sortItem.parentElement;
 
-            const allItems = optionsList.querySelectorAll('.sort-item-static');
 
-            
-            // 至少保留2个选项
 
-            if (allItems.length <= 2) {
 
-                alert('至少需要保留两个片段');
 
-                return;
 
-            }
 
-            
-            sortItem.remove();
 
-            
-            // 重新编号
 
-            const remainingItems = optionsList.querySelectorAll('.sort-item-static');
 
-            remainingItems.forEach((item, index) => {
 
-                const numberEl = item.querySelector('.sort-number');
 
-                const inputEl = item.querySelector('.option-input');
 
-                numberEl.textContent = index + 1;
 
-                if (inputEl.placeholder) {
 
-                    inputEl.placeholder = `片段${index + 1}`;
 
-                }
 
-            });
 
-            
-            // 更新正确排序显示
 
-            updateSortOrderDisplay();
 
-        }
 
-
 
-        // 更新排序顺序显示
 
-        function updateSortOrderDisplay() {
 
-            const sortItems = document.querySelectorAll('.sort-item-static');
 
-            const display = document.querySelector('.sort-order-display');
 
-            if (!display) return;
 
-            
-            let html = '';
 
-            sortItems.forEach((item, index) => {
 
-                const number = item.querySelector('.sort-number').textContent;
 
-                html += `
 
-                    <div class="sort-order-item draggable" draggable="true" data-order="${number}">
 
-                        <div class="sort-drag-handle">
 
-                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                <line x1="3" y1="12" x2="21" y2="12"/>
 
-                                <line x1="3" y1="6" x2="21" y2="6"/>
 
-                                <line x1="3" y1="18" x2="21" y2="18"/>
 
-                            </svg>
 
-                        </div>
 
-                        <span>${number}</span>
 
-                    </div>
 
-                `;
 
-                if (index < sortItems.length - 1) {
 
-                    html += '<div class="sort-arrow">→</div>';
 
-                }
 
-            });
 
-            display.innerHTML = html;
 
-            
-            // 重新初始化拖动事件
 
-            initSortDragAndDrop();
 
-        }
 
-
 
-        // 初始化排序拖动功能
 
-        function initSortDragAndDrop() {
 
-            const draggables = document.querySelectorAll('.sort-order-item.draggable');
 
-            const container = document.querySelector('.sort-order-display');
 
-            
-            if (!container) return;
 
-            
-            let draggedElement = null;
 
-            
-            draggables.forEach(item => {
 
-                item.addEventListener('dragstart', function(e) {
 
-                    draggedElement = this;
 
-                    this.classList.add('dragging');
 
-                    e.dataTransfer.effectAllowed = 'move';
 
-                });
 
-                
-                item.addEventListener('dragend', function(e) {
 
-                    this.classList.remove('dragging');
 
-                    draggables.forEach(el => el.classList.remove('drag-over'));
 
-                });
 
-                
-                item.addEventListener('dragover', function(e) {
 
-                    e.preventDefault();
 
-                    e.dataTransfer.dropEffect = 'move';
 
-                    
-                    if (this !== draggedElement) {
 
-                        this.classList.add('drag-over');
 
-                    }
 
-                });
 
-                
-                item.addEventListener('dragleave', function(e) {
 
-                    this.classList.remove('drag-over');
 
-                });
 
-                
-                item.addEventListener('drop', function(e) {
 
-                    e.preventDefault();
 
-                    this.classList.remove('drag-over');
 
-                    
-                    if (this !== draggedElement) {
 
-                        // 交换元素
 
-                        const allItems = Array.from(container.querySelectorAll('.sort-order-item.draggable'));
 
-                        const draggedIndex = allItems.indexOf(draggedElement);
 
-                        const targetIndex = allItems.indexOf(this);
 
-                        
-                        if (draggedIndex < targetIndex) {
 
-                            this.parentNode.insertBefore(draggedElement, this.nextSibling);
 
-                        } else {
 
-                            this.parentNode.insertBefore(draggedElement, this);
 
-                        }
 
-                        
-                        // 重建箭头
 
-                        rebuildSortArrows();
 
-                    }
 
-                });
 
-            });
 
-        }
 
-
 
-        // 重建排序箭头
 
-        function rebuildSortArrows() {
 
-            const container = document.querySelector('.sort-order-display');
 
-            if (!container) return;
 
-            
-            const items = Array.from(container.querySelectorAll('.sort-order-item.draggable'));
 
-            const arrows = Array.from(container.querySelectorAll('.sort-arrow'));
 
-            
-            // 移除所有箭头
 
-            arrows.forEach(arrow => arrow.remove());
 
-            
-            // 重新插入箭头
 
-            items.forEach((item, index) => {
 
-                if (index < items.length - 1) {
 
-                    const arrow = document.createElement('div');
 
-                    arrow.className = 'sort-arrow';
 
-                    arrow.textContent = '→';
 
-                    item.parentNode.insertBefore(arrow, item.nextSibling);
 
-                }
 
-            });
 
-        }
 
-
 
-        // 页面加载后初始化拖动
 
-        document.addEventListener('DOMContentLoaded', function() {
 
-            // 延迟初始化，等待工具内容加载
 
-            setTimeout(initSortDragAndDrop, 500);
 
-        });
 
-
 
-        // 图片上传函数
 
-        function uploadImage(button) {
 
-            const input = document.createElement('input');
 
-            input.type = 'file';
 
-            input.accept = 'image/*';
 
-            input.onchange = (e) => {
 
-                const file = e.target.files[0];
 
-                if (file) {
 
-                    // 创建图片预览
 
-                    const reader = new FileReader();
 
-                    reader.onload = function(event) {
 
-                        const wrapper = button.closest('.input-with-image');
 
-                        const textarea = wrapper.querySelector('textarea, .option-input');
 
-                        
-                        // 在textarea下方插入图片预览
 
-                        let preview = wrapper.querySelector('.image-preview');
 
-                        if (!preview) {
 
-                            preview = document.createElement('div');
 
-                            preview.className = 'image-preview';
 
-                            textarea.parentNode.insertBefore(preview, button);
 
-                        }
 
-                        
-                        preview.innerHTML = `
 
-                            <img src="${event.target.result}" alt="预览图片">
 
-                            <button class="remove-image-btn" onclick="removeImage(this)" title="删除图片">
 
-                                <svg 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>
 
-                        `;
 
-                    };
 
-                    reader.readAsDataURL(file);
 
-                }
 
-            };
 
-            input.click();
 
-        }
 
-
 
-        // 删除图片
 
-        function removeImage(button) {
 
-            const preview = button.closest('.image-preview');
 
-            if (preview) {
 
-                preview.remove();
 
-            }
 
-        }
 
-
 
-        // 切换工具类型下拉菜单
 
-        function toggleToolTypeDropdown() {
 
-            event.stopPropagation();
 
-            document.getElementById('toolTypeSelector').classList.toggle('active');
 
-        }
 
-
 
-        // 切换工具类型
 
-        function switchToolType(toolType) {
 
-            currentTool = toolType;
 
-            showToolConfig(toolType);
 
-            showToolEditArea(toolType);
 
-            document.getElementById('toolTypeSelector').classList.remove('active');
 
-        }
 
-
 
-        // 切换题目类型(单选/多选)
 
-        function toggleQuestionType(toggle) {
 
-            toggle.classList.toggle('active');
 
-        }
 
-
 
-        // 切换选项选中状态
 
-        function toggleOption(checkbox) {
 
-            checkbox.classList.toggle('checked');
 
-        }
 
-
 
-        // 添加选项
 
-        function addOption(button) {
 
-            const optionsList = button.parentElement;
 
-            const optionItem = document.createElement('div');
 
-            optionItem.className = 'option-item';
 
-            optionItem.innerHTML = `
 
-                <div class="option-drag-handle" title="拖动排序">
 
-                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                        <line x1="3" y1="12" x2="21" y2="12"/>
 
-                        <line x1="3" y1="6" x2="21" y2="6"/>
 
-                        <line x1="3" y1="18" x2="21" y2="18"/>
 
-                    </svg>
 
-                </div>
 
-                <div class="option-checkbox" onclick="toggleOption(this)">
 
-                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                        <polyline points="20 6 9 17 4 12"/>
 
-                    </svg>
 
-                </div>
 
-                <input type="text" class="option-input" placeholder="新选项">
 
-                <div class="option-actions">
 
-                    <button class="option-action-btn" onclick="addOptionAfter(this)" title="在下方添加选项">
 
-                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                            <line x1="12" y1="5" x2="12" y2="19"/>
 
-                            <line x1="5" y1="12" x2="19" y2="12"/>
 
-                        </svg>
 
-                    </button>
 
-                    <button class="option-action-btn delete" onclick="deleteOption(this)" title="删除选项">
 
-                        <svg 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>
 
-            `;
 
-            optionsList.insertBefore(optionItem, button);
 
-        }
 
-
 
-        // 在指定选项后添加新选项
 
-        function addOptionAfter(button) {
 
-            const currentOption = button.closest('.option-item');
 
-            const optionsList = currentOption.parentElement;
 
-            const newOption = document.createElement('div');
 
-            newOption.className = 'option-item';
 
-            newOption.innerHTML = `
 
-                <div class="option-drag-handle" title="拖动排序">
 
-                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                        <line x1="3" y1="12" x2="21" y2="12"/>
 
-                        <line x1="3" y1="6" x2="21" y2="6"/>
 
-                        <line x1="3" y1="18" x2="21" y2="18"/>
 
-                    </svg>
 
-                </div>
 
-                <div class="option-checkbox" onclick="toggleOption(this)">
 
-                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                        <polyline points="20 6 9 17 4 12"/>
 
-                    </svg>
 
-                </div>
 
-                <input type="text" class="option-input" placeholder="新选项">
 
-                <div class="option-actions">
 
-                    <button class="option-action-btn" onclick="addOptionAfter(this)" title="在下方添加选项">
 
-                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                            <line x1="12" y1="5" x2="12" y2="19"/>
 
-                            <line x1="5" y1="12" x2="19" y2="12"/>
 
-                        </svg>
 
-                    </button>
 
-                    <button class="option-action-btn delete" onclick="deleteOption(this)" title="删除选项">
 
-                        <svg 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>
 
-            `;
 
-            currentOption.after(newOption);
 
-            newOption.querySelector('.option-input').focus();
 
-        }
 
-
 
-        // 删除选项
 
-        function deleteOption(button) {
 
-            const optionItem = button.closest('.option-item');
 
-            const optionsList = optionItem.parentElement;
 
-            const allOptions = optionsList.querySelectorAll('.option-item');
 
-            
-            // 至少保留2个选项
 
-            if (allOptions.length <= 2) {
 
-                alert('至少需要保留两个选项');
 
-                return;
 
-            }
 
-            
-            optionItem.remove();
 
-        }
 
-
 
-        // 复制题目
 
-        function copyQuestion(button) {
 
-            const questionItem = button.closest('.question-item');
 
-            const clone = questionItem.cloneNode(true);
 
-            const questionNumber = clone.querySelector('.question-number');
 
-            const currentNum = parseInt(questionNumber.textContent.match(/\d+/)[0]);
 
-            questionNumber.textContent = `题目 ${currentNum + 1}`;
 
-            questionItem.after(clone);
 
-            alert('题目已复制');
 
-        }
 
-
 
-        // 删除题目
 
-        function deleteQuestion(button) {
 
-            const questionItem = button.closest('.question-item');
 
-            const allQuestions = document.querySelectorAll('.question-item');
 
-            
-            // 至少保留1个题目
 
-            if (allQuestions.length <= 1) {
 
-                alert('至少需要保留一个题目');
 
-                return;
 
-            }
 
-            
-            if (confirm('确定要删除这道题目吗?')) {
 
-                questionItem.remove();
 
-            }
 
-        }
 
-
 
-        // 添加题目
 
-        function addQuestion() {
 
-            alert('添加新题目');
 
-        }
 
-
 
-        // 添加抽认卡
 
-        function addFlashcard() {
 
-            alert('添加新抽认卡');
 
-        }
 
-
 
-        // AI生成解释
 
-        function generateExplanation() {
 
-            alert('AI正在生成解释...');
 
-        }
 
-
 
-        // 点击页面其他地方关闭下拉菜单
 
-        document.addEventListener('click', function() {
 
-            const selector = document.getElementById('toolTypeSelector');
 
-            if (selector) {
 
-                selector.classList.remove('active');
 
-            }
 
-        });
 
-
 
-        // 显示创建弹窗
 
-        function showCreateModal() {
 
-            document.getElementById('createModal').classList.add('active');
 
-        }
 
-
 
-        // 隐藏创建弹窗
 
-        function hideCreateModal() {
 
-            document.getElementById('createModal').classList.remove('active');
 
-        }
 
-
 
-        // 取消AI卡片高亮
 
-        function unsetAiFeatured() {
 
-            const aiCard = document.getElementById('aiCreateCard');
 
-            if (aiCard) aiCard.classList.remove('featured');
 
-        }
 
-
 
-        function createBlankCourse() {
 
-            hideCreateModal();
 
-            addPageFromTemplate('content');
 
-        }
 
-
 
-        // 点击遮罩关闭弹窗
 
-        document.getElementById('createModal').addEventListener('click', function(e) {
 
-            if (e.target === this) {
 
-                hideCreateModal();
 
-            }
 
-        });
 
-
 
-        // ========== PPT上传与解析（模拟） ==========
 
-        let currentPptFile = null;
 
-        let pptParseTimer = null;
 
-
 
-        // ========== 右侧大纲（分组 + 拖动） ==========
 
-        let outlineData = { groups: [], ungrouped: [] };
 
-        let draggingItem = null;
 
-
 
-        function initRightOutline() {
 
-            syncRightOutlineWithBottom();
 
-        }
 
-
 
-        function snapshotBottomOutline() {
 
-            const track = document.getElementById('outlineTrack');
 
-            if (!track) return [];
 
-            const items = Array.from(track.querySelectorAll('.outline-item-wrapper'));
 
-            return items.map((item, idx) => {
 
-                const titleSpan = item.querySelector('.outline-item span:nth-child(2)');
 
-                const title = titleSpan ? titleSpan.textContent.trim() : `页面 ${idx + 1}`;
 
-                const pageNumber = item.querySelector('.page-number');
 
-                const id = pageNumber ? pageNumber.textContent.trim() : `${idx + 1}`;
 
-                return { id, title, type: '页面' };
 
-            });
 
-        }
 
-
 
-        function syncRightOutlineWithBottom() {
 
-            const bottomPages = snapshotBottomOutline();
 
-            const orderMap = new Map(bottomPages.map((p, idx) => [p.id, idx]));
 
-            const existsInBottom = (id) => orderMap.has(id);
 
-
 
-            // 移除已被删除的页面
 
-            outlineData.groups.forEach(group => {
 
-                group.items = group.items.filter(item => existsInBottom(item.id));
 
-            });
 
-            outlineData.ungrouped = outlineData.ungrouped.filter(item => existsInBottom(item.id));
 
-
 
-            // 添加新增页面到未分组
 
-            bottomPages.forEach(page => {
 
-                const inGroup = outlineData.groups.some(g => g.items.some(it => it.id === page.id));
 
-                const inUngrouped = outlineData.ungrouped.some(it => it.id === page.id);
 
-                if (!inGroup && !inUngrouped) {
 
-                    outlineData.ungrouped.push(page);
 
-                }
 
-            });
 
-
 
-            // 未分组跟随底部顺序
 
-            outlineData.ungrouped.sort((a, b) => (orderMap.get(a.id) ?? 0) - (orderMap.get(b.id) ?? 0));
 
-
 
-            renderRightOutline();
 
-        }
 
-
 
-        function refreshRightOutline() {
 
-            syncRightOutlineWithBottom();
 
-        }
 
-
 
-        function addOutlineGroup() {
 
-            const group = {
 
-                id: `group_${Date.now()}`,
 
-                name: '新建分组',
 
-                collapsed: false,
 
-                items: []
 
-            };
 
-            outlineData.groups.push(group);
 
-            renderRightOutline();
 
-        }
 
-
 
-        function deleteGroup(groupId) {
 
-            const group = outlineData.groups.find(g => g.id === groupId);
 
-            if (!group) return;
 
-            // 将子项平铺到未分组，保持顺序
 
-            outlineData.ungrouped = [...outlineData.ungrouped, ...group.items];
 
-            outlineData.groups = outlineData.groups.filter(g => g.id !== groupId);
 
-            renderRightOutline();
 
-        }
 
-
 
-        function confirmDeleteGroup(groupId) {
 
-            const group = outlineData.groups.find(g => g.id === groupId);
 
-            if (!group) return;
 
-            const ok = confirm('确定删除该分组？其中的页面将移动到未分组');
 
-            if (ok) {
 
-                deleteGroup(groupId);
 
-            }
 
-        }
 
-
 
-
 
-        function toggleGroupCollapse(groupId) {
 
-            const group = outlineData.groups.find(g => g.id === groupId);
 
-            if (group) {
 
-                group.collapsed = !group.collapsed;
 
-                renderRightOutline();
 
-            }
 
-        }
 
-
 
-        function renameGroup(groupId, titleSpan) {
 
-            const group = outlineData.groups.find(g => g.id === groupId);
 
-            if (!group || !titleSpan || titleSpan.dataset.editing === '1') return;
 
-
 
-            const input = document.createElement('input');
 
-            input.className = 'outline-group-input';
 
-            input.value = group.name;
 
-            const width = Math.min(220, Math.max(120, titleSpan.offsetWidth + 20));
 
-            input.style.width = width + 'px';
 
-            titleSpan.dataset.editing = '1';
 
-            titleSpan.replaceWith(input);
 
-            input.focus();
 
-            input.select();
 
-
 
-            let finished = false;
 
-            const finish = (commit) => {
 
-                if (finished) return;
 
-                finished = true;
 
-                if (commit) {
 
-                    const name = input.value.trim();
 
-                    if (name) group.name = name;
 
-                }
 
-                const newSpan = document.createElement('span');
 
-                newSpan.className = 'outline-group-title';
 
-                newSpan.textContent = group.name;
 
-                newSpan.onclick = (e) => { e.stopPropagation(); renameGroup(groupId, newSpan); };
 
-                input.replaceWith(newSpan);
 
-            };
 
-
 
-            input.addEventListener('blur', () => finish(true));
 
-            input.addEventListener('keydown', (e) => {
 
-                if (e.key === 'Enter') {
 
-                    e.preventDefault();
 
-                    input.blur();
 
-                } else if (e.key === 'Escape') {
 
-                    e.preventDefault();
 
-                    finish(false);
 
-                }
 
-            });
 
-        }
 
-
 
-        function renderRightOutline() {
 
-            const container = document.getElementById('rightOutlineList');
 
-            if (!container) return;
 
-            container.innerHTML = '';
 
-
 
-            const hasContent = outlineData.groups.length > 0 || outlineData.ungrouped.length > 0;
 
-            if (!hasContent) {
 
-                container.innerHTML = '<div class="outline-empty">暂无页面，创建后将出现在此</div>';
 
-                return;
 
-            }
 
-
 
-            // 先渲染分组
 
-            outlineData.groups.forEach(group => {
 
-                const groupEl = document.createElement('div');
 
-                groupEl.className = 'outline-group';
 
-                groupEl.dataset.id = group.id;
 
-
 
-                const header = document.createElement('div');
 
-                header.className = 'outline-group-header';
 
-                header.draggable = false;
 
-
 
-                const left = document.createElement('div');
 
-                left.className = 'outline-group-left';
 
-
 
-                const arrow = document.createElement('span');
 
-                arrow.innerHTML = `
 
-                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                        <polyline points="6 9 12 15 18 9" style="transform: ${group.collapsed ? 'rotate(-90deg)' : 'none'}; transform-origin: 12px 12px;"/>
 
-                    </svg>`;
 
-                arrow.style.cursor = 'pointer';
 
-                arrow.onclick = (e) => { e.stopPropagation(); toggleGroupCollapse(group.id); };
 
-
 
-                const titleSpan = document.createElement('span');
 
-                titleSpan.className = 'outline-group-title';
 
-                titleSpan.textContent = group.name;
 
-                titleSpan.onclick = (e) => { e.stopPropagation(); renameGroup(group.id, titleSpan); };
 
-
 
-                left.appendChild(arrow);
 
-                left.appendChild(titleSpan);
 
-                header.appendChild(left);
 
-
 
-                const dragHandle = document.createElement('div');
 
-                dragHandle.className = 'outline-drag-handle';
 
-                dragHandle.innerHTML = `
 
-                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                        <circle cx="5" cy="8" r="1"/>
 
-                        <circle cx="5" cy="16" r="1"/>
 
-                        <circle cx="12" cy="8" r="1"/>
 
-                        <circle cx="12" cy="16" r="1"/>
 
-                        <circle cx="19" cy="8" r="1"/>
 
-                        <circle cx="19" cy="16" r="1"/>
 
-                    </svg>`;
 
-                dragHandle.draggable = true;
 
-                dragHandle.addEventListener('dragstart', (e) => onGroupDragStart(e, group.id));
 
-                dragHandle.addEventListener('dragover', onDragOver);
 
-                dragHandle.addEventListener('drop', (e) => onDrop(e, { targetGroup: group.id }));
 
-                header.appendChild(dragHandle);
 
-
 
-                const deleteBtn = document.createElement('div');
 
-                deleteBtn.className = 'outline-delete-btn';
 
-                deleteBtn.innerHTML = `
 
-                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                        <polyline points="3 6 5 6 21 6"/>
 
-                        <path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/>
 
-                    </svg>`;
 
-                deleteBtn.onclick = (e) => { e.stopPropagation(); confirmDeleteGroup(group.id); };
 
-                header.appendChild(deleteBtn);
 
-
 
-                groupEl.appendChild(header);
 
-
 
-                const dropAreaTarget = { targetGroup: group.id };
 
-                header.addEventListener('dragover', onDragOver);
 
-                header.addEventListener('drop', (e) => onDrop(e, dropAreaTarget));
 
-
 
-                if (!group.collapsed) {
 
-                    const itemsBox = document.createElement('div');
 
-                    itemsBox.className = 'outline-items';
 
-                    itemsBox.addEventListener('dragover', onDragOver);
 
-                    itemsBox.addEventListener('drop', (e) => onDrop(e, dropAreaTarget));
 
-                    if (group.items.length === 0) {
 
-                        const empty = document.createElement('div');
 
-                        empty.className = 'outline-empty';
 
-                        empty.textContent = '拖动页面到此';
 
-                        itemsBox.appendChild(empty);
 
-                    } else {
 
-                        group.items.forEach((item, idx) => {
 
-                            itemsBox.appendChild(createOutlineItem(item, idx, group.id));
 
-                        });
 
-                    }
 
-                    groupEl.appendChild(itemsBox);
 
-                }
 
-
 
-                container.appendChild(groupEl);
 
-            });
 
-
 
-            // 渲染未分组
 
-            outlineData.ungrouped.forEach((item, idx) => {
 
-                container.appendChild(createOutlineItem(item, idx, null));
 
-            });
 
-        }
 
-
 
-
 
-        function createOutlineItem(item, idx, groupId) {
 
-            const el = document.createElement('div');
 
-            el.className = 'outline-item';
 
-            el.draggable = true;
 
-            el.dataset.id = item.id;
 
-            el.dataset.group = groupId || '';
 
-            el.addEventListener('dragstart', (e) => onItemDragStart(e, item, groupId));
 
-            el.addEventListener('dragover', onDragOver);
 
-            el.addEventListener('drop', (e) => onDrop(e, { targetItem: item, groupId }));
 
-            el.onclick = () => selectPageById(item.id);
 
-
 
-            el.innerHTML = `
 
-                <div class="outline-item-left">
 
-                    <span class="outline-index">${idx + 1}</span>
 
-                    <span class="outline-title" title="${item.title}">${item.title}</span>
 
-                    <span class="outline-type">${item.type || '页面'}</span>
 
-                </div>
 
-                <span class="outline-handle">
 
-                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                        <circle cx="5" cy="12" r="1"/>
 
-                        <circle cx="12" cy="12" r="1"/>
 
-                        <circle cx="19" cy="12" r="1"/>
 
-                    </svg>
 
-                </span>
 
-            `;
 
-            return el;
 
-        }
 
-
 
-        function onItemDragStart(e, item, groupId) {
 
-            draggingItem = { type: 'item', item, groupId };
 
-            e.dataTransfer.effectAllowed = 'move';
 
-        }
 
-
 
-        function onGroupDragStart(e, groupId) {
 
-            draggingItem = { type: 'group', groupId };
 
-            e.dataTransfer.effectAllowed = 'move';
 
-        }
 
-
 
-        function onDragOver(e) {
 
-            e.preventDefault();
 
-            e.dataTransfer.dropEffect = 'move';
 
-        }
 
-
 
-        function onDrop(e, target) {
 
-            e.preventDefault();
 
-            if (!draggingItem) return;
 
-
 
-            if (draggingItem.type === 'group' && target.targetGroup) {
 
-                reorderGroups(draggingItem.groupId, target.targetGroup);
 
-            } else if (draggingItem.type === 'item') {
 
-                moveItem(draggingItem.item, draggingItem.groupId, target);
 
-            }
 
-            draggingItem = null;
 
-            renderRightOutline();
 
-            syncBottomOutlineOrder();
 
-        }
 
-
 
-        function reorderGroups(sourceId, targetId) {
 
-            if (sourceId === targetId) return;
 
-            const list = outlineData.groups;
 
-            const fromIdx = list.findIndex(g => g.id === sourceId);
 
-            const toIdx = list.findIndex(g => g.id === targetId);
 
-            if (fromIdx === -1 || toIdx === -1) return;
 
-            const [g] = list.splice(fromIdx, 1);
 
-            list.splice(toIdx, 0, g);
 
-        }
 
-
 
-        function moveItem(item, fromGroupId, target) {
 
-            removeItemFromData(item.id);
 
-            if (target.targetItem) {
 
-                const targetGroup = target.groupId || null;
 
-                insertItemBefore(item, target.targetItem.id, targetGroup);
 
-            } else if (target.targetGroup) {
 
-                const group = outlineData.groups.find(g => g.id === target.targetGroup);
 
-                if (group) group.items.push(item);
 
-            } else {
 
-                outlineData.ungrouped.push(item);
 
-            }
 
-        }
 
-
 
-        function removeItemFromData(itemId) {
 
-            outlineData.groups.forEach(g => {
 
-                g.items = g.items.filter(it => it.id !== itemId);
 
-            });
 
-            outlineData.ungrouped = outlineData.ungrouped.filter(it => it.id !== itemId);
 
-        }
 
-
 
-        function insertItemBefore(item, targetId, groupId) {
 
-            if (groupId) {
 
-                const group = outlineData.groups.find(g => g.id === groupId);
 
-                if (!group) return;
 
-                const idx = group.items.findIndex(it => it.id === targetId);
 
-                if (idx === -1) group.items.push(item); else group.items.splice(idx, 0, item);
 
-            } else {
 
-                const idx = outlineData.ungrouped.findIndex(it => it.id === targetId);
 
-                if (idx === -1) outlineData.ungrouped.push(item); else outlineData.ungrouped.splice(idx, 0, item);
 
-            }
 
-        }
 
-
 
-        function selectPageById(id) {
 
-            // 通过底部大纲的序号匹配
 
-            const track = document.getElementById('outlineTrack');
 
-            if (!track) return;
 
-            const item = Array.from(track.querySelectorAll('.outline-item-wrapper')).find(w => {
 
-                const num = w.querySelector('.page-number');
 
-                return num && num.textContent.trim() === id;
 
-            });
 
-            if (item) {
 
-                const index = Array.from(track.children).indexOf(item) + 1;
 
-                selectPage(index, { stopPropagation: () => {} });
 
-            }
 
-        }
 
-
 
-        function syncBottomOutlineOrder() {
 
-            const track = document.getElementById('outlineTrack');
 
-            if (!track) return;
 
-            const order = [];
 
-            outlineData.groups.forEach(g => {
 
-                g.items.forEach(it => order.push(it.id));
 
-            });
 
-            outlineData.ungrouped.forEach(it => order.push(it.id));
 
-
 
-            const wrappers = Array.from(track.querySelectorAll('.outline-item-wrapper'));
 
-            const map = new Map();
 
-            wrappers.forEach(w => {
 
-                const id = w.querySelector('.page-number')?.textContent.trim();
 
-                if (id) map.set(id, w);
 
-            });
 
-            track.innerHTML = '';
 
-            order.forEach(id => {
 
-                const node = map.get(id);
 
-                if (node) track.appendChild(node);
 
-            });
 
-        }
 
-
 
-        document.addEventListener('DOMContentLoaded', () => {
 
-            initRightOutline();
 
-        });
 
-
 
-        function startPptUploadFlow() {
 
-            const input = document.getElementById('pptFileInput');
 
-            if (!input) return;
 
-            unsetAiFeatured();
 
-            input.value = '';
 
-            input.click();
 
-        }
 
-
 
-        function handlePptFileSelected(event) {
 
-            const file = event.target.files[0];
 
-            if (!file) return;
 
-            const ext = file.name.split('.').pop().toLowerCase();
 
-            if (!['ppt', 'pptx'].includes(ext)) {
 
-                alert('仅支持上传PPT文件');
 
-                return;
 
-            }
 
-            currentPptFile = file;
 
-            hideCreateModal();
 
-            beginPptParseSimulation(file);
 
-        }
 
-
 
-        function beginPptParseSimulation(file) {
 
-            setPptParseState('parsing', `正在解析 ${file.name}`);
 
-            const shouldFail = file.name.toLowerCase().includes('fail');
 
-            clearTimeout(pptParseTimer);
 
-            pptParseTimer = setTimeout(() => {
 
-                if (shouldFail) {
 
-                    setPptParseState('error', '解析失败，请重试或更换文件');
 
-                } else {
 
-                    setPptParseState('success', '解析完成，已生成课件');
 
-                    setTimeout(() => {
 
-                        closePptParseOverlay();
 
-                        addPptContentToCourse(file.name);
 
-                    }, 900);
 
-                }
 
-            }, 2200);
 
-        }
 
-
 
-        function setPptParseState(state, desc) {
 
-            const overlay = document.getElementById('pptParseOverlay');
 
-            const icon = document.getElementById('pptParseIcon');
 
-            const title = document.getElementById('pptParseTitle');
 
-            const text = document.getElementById('pptParseDesc');
 
-            const actions = document.getElementById('pptParseActions');
 
-            overlay.classList.add('active');
 
-            icon.className = 'ppt-parse-icon';
 
-            icon.innerHTML = statusIcons.loading;
 
-            title.textContent = '解析中...';
 
-            text.textContent = desc || '';
 
-            actions.style.display = 'flex';
 
-            Array.from(actions.querySelectorAll('button')).forEach(btn => btn.disabled = true);
 
-
 
-            if (state === 'parsing') {
 
-                icon.innerHTML = statusIcons.loading;
 
-                title.textContent = '解析中...';
 
-                icon.classList.remove('success', 'error');
 
-            } else if (state === 'success') {
 
-                icon.innerHTML = statusIcons.success;
 
-                icon.classList.add('success');
 
-                title.textContent = '解析完成';
 
-                Array.from(actions.querySelectorAll('button')).forEach(btn => btn.disabled = false);
 
-            } else if (state === 'error') {
 
-                icon.innerHTML = statusIcons.error;
 
-                icon.classList.add('error');
 
-                title.textContent = '解析失败';
 
-                Array.from(actions.querySelectorAll('button')).forEach(btn => btn.disabled = false);
 
-            }
 
-        }
 
-
 
-        function closePptParseOverlay() {
 
-            clearTimeout(pptParseTimer);
 
-            const overlay = document.getElementById('pptParseOverlay');
 
-            overlay.classList.remove('active');
 
-        }
 
-
 
-        function addPptContentToCourse(pptName) {
 
-            // 简单模拟：新增一页内容页并提示
 
-            addPageFromTemplate('content');
 
-            alert(`已从PPT "${pptName}" 生成课程页面`);
 
-        }
 
-
 
-        // 顶部菜单 & 课程设置
 
-        let courseMeta = { subject: '', grade: '' };
 
-
 
-        function toggleTopMenu(event) {
 
-            event.stopPropagation();
 
-            const dropdown = document.getElementById('topDropdown');
 
-            dropdown.classList.toggle('active');
 
-        }
 
-
 
-        function closeTopMenu() {
 
-            const dropdown = document.getElementById('topDropdown');
 
-            if (dropdown) dropdown.classList.remove('active');
 
-        }
 
-
 
-        document.addEventListener('click', () => {
 
-            closeTopMenu();
 
-        });
 
-
 
-        function handleTopMenuAction(action) {
 
-            closeTopMenu();
 
-            if (action === 'back') {
 
-                showCreateModal();
 
-            } else if (action === 'settings') {
 
-                showCourseSettings();
 
-            } else if (action === 'template') {
 
-                openTemplateCenter();
 
-            } else if (action === 'duplicate') {
 
-                alert('已另存为副本（示例）');
 
-            } else if (action === 'delete') {
 
-                openDeleteCourse();
 
-            }
 
-        }
 
-
 
-        function setMenuActive(panelType) {
 
-            document.querySelectorAll('.primary-menu .menu-item').forEach(item => {
 
-                const isMatch = item.getAttribute('data-panel') === panelType;
 
-                if (isMatch) {
 
-                    item.classList.add('active');
 
-                } else {
 
-                    item.classList.remove('active');
 
-                }
 
-            });
 
-        }
 
-
 
-        function showCourseSettings() {
 
-            const modal = document.getElementById('courseSettingsModal');
 
-            const subjectSelect = document.getElementById('settingsSubjectSelect');
 
-            const gradeSelect = document.getElementById('settingsGradeSelect');
 
-            if (!modal || !subjectSelect || !gradeSelect) return;
 
-
 
-            const publishSubject = document.getElementById('subjectSelect');
 
-            const publishGrade = document.getElementById('classGradeSelect');
 
-            subjectSelect.value = courseMeta.subject || (publishSubject ? publishSubject.value : '') || '';
 
-            gradeSelect.value = courseMeta.grade || (publishGrade ? publishGrade.value : '') || '';
 
-
 
-            modal.classList.add('active');
 
-        }
 
-
 
-        function hideCourseSettings() {
 
-            const modal = document.getElementById('courseSettingsModal');
 
-            if (modal) modal.classList.remove('active');
 
-        }
 
-
 
-        document.getElementById('courseSettingsModal').addEventListener('click', function(e) {
 
-            if (e.target === this) hideCourseSettings();
 
-        });
 
-
 
-        function applyCourseSettings() {
 
-            const subjectSelect = document.getElementById('settingsSubjectSelect');
 
-            const gradeSelect = document.getElementById('settingsGradeSelect');
 
-            courseMeta.subject = subjectSelect ? subjectSelect.value : '';
 
-            courseMeta.grade = gradeSelect ? gradeSelect.value : '';
 
-            applyCourseMetaToPublish();
 
-            hideCourseSettings();
 
-        }
 
-
 
-        function applyCourseMetaToPublish() {
 
-            const publishSubject = document.getElementById('subjectSelect');
 
-            const publishGrade = document.getElementById('classGradeSelect');
 
-            if (publishSubject) publishSubject.value = courseMeta.subject || '';
 
-            if (publishGrade) publishGrade.value = courseMeta.grade || '';
 
-        }
 
-
 
-        // 发布表单变化时同步回全局设置
 
-        const publishSubjectSelect = document.getElementById('subjectSelect');
 
-        if (publishSubjectSelect) publishSubjectSelect.addEventListener('change', () => {
 
-            courseMeta.subject = publishSubjectSelect.value;
 
-        });
 
-        const publishGradeSelect = document.getElementById('classGradeSelect');
 
-        if (publishGradeSelect) publishGradeSelect.addEventListener('change', () => {
 
-            courseMeta.grade = publishGradeSelect.value;
 
-        });
 
-        courseMeta.subject = publishSubjectSelect ? publishSubjectSelect.value : '';
 
-        courseMeta.grade = publishGradeSelect ? publishGradeSelect.value : '';
 
-
 
-        // 模板中心数据
 
-        const sampleTemplates = [
 
-            { id: 'tpl-1', name: '小学语文·故事导入', source: 'official', subject: 'chinese', grade: '3', pages: 8 },
 
-            { id: 'tpl-2', name: '小学数学·分数基础', source: 'official', subject: 'math', grade: '4', pages: 10 },
 
-            { id: 'tpl-3', name: '科学·水的三态', source: 'mine', subject: 'science', grade: '4', pages: 6 },
 
-            { id: 'tpl-4', name: '英语·词汇练习', source: 'official', subject: 'english', grade: '5', pages: 5 }
 
-        ];
 
-        let selectedTemplates = [];
 
-
 
-        function openTemplateCenter() {
 
-            document.getElementById('templateCenterModal').classList.add('active');
 
-            filterTemplates();
 
-        }
 
-
 
-        function closeTemplateCenter() {
 
-            document.getElementById('templateCenterModal').classList.remove('active');
 
-            selectedTemplates = [];
 
-            updateTemplateSelectedCount();
 
-        }
 
-
 
-        document.getElementById('templateCenterModal').addEventListener('click', function(e) {
 
-            if (e.target === this) closeTemplateCenter();
 
-        });
 
-
 
-        function filterTemplates() {
 
-            const source = document.getElementById('tplSourceFilter').value;
 
-            const subject = document.getElementById('tplSubjectFilter').value;
 
-            const grade = document.getElementById('tplGradeFilter').value;
 
-            const grid = document.getElementById('templateGrid');
 
-            let filtered = sampleTemplates.filter(t => {
 
-                if (source !== 'all' && t.source !== source) return false;
 
-                if (subject !== 'all' && t.subject !== subject) return false;
 
-                if (grade !== 'all' && t.grade !== grade) return false;
 
-                return true;
 
-            });
 
-            grid.innerHTML = filtered.map(t => `
 
-                <div class="app-card ${selectedTemplates.includes(t.id) ? 'selected' : ''}" onclick="toggleTemplateSelection('${t.id}')">
 
-                    <div class="app-cover">
 
-                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                            <rect x="3" y="4" width="18" height="14" rx="2"/>
 
-                            <line x1="8" y1="8" x2="16" y2="8"/>
 
-                            <line x1="8" y1="12" x2="16" y2="12"/>
 
-                        </svg>
 
-                    </div>
 
-                    <div class="app-info">
 
-                        <div class="app-name">${t.name}</div>
 
-                        <div class="app-description">${(t.subject || '通用')} · ${t.pages}页</div>
 
-                    </div>
 
-                </div>
 
-            `).join('');
 
-            updateTemplateSelectedCount();
 
-        }
 
-
 
-        function toggleTemplateSelection(id) {
 
-            if (selectedTemplates.includes(id)) {
 
-                selectedTemplates = selectedTemplates.filter(tid => tid !== id);
 
-            } else {
 
-                selectedTemplates.push(id);
 
-            }
 
-            filterTemplates();
 
-        }
 
-
 
-        function updateTemplateSelectedCount() {
 
-            const countText = document.getElementById('selectedTemplateCount');
 
-            const btn = document.getElementById('confirmApplyTemplateBtn');
 
-            if (countText) countText.textContent = selectedTemplates.length;
 
-            if (btn) btn.disabled = selectedTemplates.length === 0;
 
-        }
 
-
 
-        function confirmApplyTemplates() {
 
-            if (selectedTemplates.length === 0) return;
 
-            selectedTemplates.forEach(() => addPageFromTemplate('content'));
 
-            alert('已应用模板，生成对应页面');
 
-            closeTemplateCenter();
 
-        }
 
-
 
-        // 删除课程确认
 
-        function openDeleteCourse() {
 
-            document.getElementById('deleteCourseModal').classList.add('active');
 
-        }
 
-
 
-        function hideDeleteCourse() {
 
-            document.getElementById('deleteCourseModal').classList.remove('active');
 
-        }
 
-
 
-        document.getElementById('deleteCourseModal').addEventListener('click', function(e) {
 
-            if (e.target === this) hideDeleteCourse();
 
-        });
 
-
 
-        function confirmDeleteCourse() {
 
-            hideDeleteCourse();
 
-            showCreateModal();
 
-        }
 
-
 
-        // 显示发布弹窗
 
-        function showPublishModal() {
 
-            // 获取当前课程名称
 
-            const courseName = document.querySelector('.course-title').textContent.trim();
 
-            document.getElementById('publishCourseNameDisplay').textContent = courseName;
 
-            document.getElementById('publishModal').classList.add('active');
 
-        }
 
-
 
-        // 隐藏发布弹窗
 
-        function hidePublishModal() {
 
-            document.getElementById('publishModal').classList.remove('active');
 
-            // 重置封面
 
-            const coverImage = document.getElementById('courseCoverImage');
 
-            const placeholder = document.getElementById('coverPlaceholder');
 
-            coverImage.style.display = 'none';
 
-            coverImage.src = '';
 
-            placeholder.style.display = 'block';
 
-        }
 
-
 
-        // 点击遮罩关闭发布弹窗
 
-        document.getElementById('publishModal').addEventListener('click', function(e) {
 
-            if (e.target === this) {
 
-                hidePublishModal();
 
-            }
 
-        });
 
-
 
-        // 编辑课程名称
 
-        function editCourseName() {
 
-            const display = document.getElementById('publishCourseNameDisplay');
 
-            const currentName = display.textContent;
 
-            
-            // 创建输入框
 
-            const input = document.createElement('input');
 
-            input.type = 'text';
 
-            input.value = currentName;
 
-            input.className = 'publish-course-name-input';
 
-            
-            // 设置初始宽度（基于当前文本）
 
-            const measureSpan = document.createElement('span');
 
-            measureSpan.style.visibility = 'hidden';
 
-            measureSpan.style.position = 'absolute';
 
-            measureSpan.style.fontSize = '18px';
 
-            measureSpan.style.fontWeight = '600';
 
-            measureSpan.style.padding = '10px 16px';
 
-            measureSpan.textContent = currentName;
 
-            document.body.appendChild(measureSpan);
 
-            const initialWidth = Math.max(120, Math.min(500, measureSpan.offsetWidth));
 
-            document.body.removeChild(measureSpan);
 
-            input.style.width = initialWidth + 'px';
 
-            
-            // 替换显示元素
 
-            display.replaceWith(input);
 
-            input.focus();
 
-            input.select();
 
-            
-            // 输入时自动调整宽度
 
-            input.addEventListener('input', () => {
 
-                const tempSpan = document.createElement('span');
 
-                tempSpan.style.visibility = 'hidden';
 
-                tempSpan.style.position = 'absolute';
 
-                tempSpan.style.fontSize = '18px';
 
-                tempSpan.style.fontWeight = '600';
 
-                tempSpan.style.padding = '10px 16px';
 
-                tempSpan.textContent = input.value || currentName;
 
-                document.body.appendChild(tempSpan);
 
-                const newWidth = Math.max(120, Math.min(500, tempSpan.offsetWidth));
 
-                document.body.removeChild(tempSpan);
 
-                input.style.width = newWidth + 'px';
 
-            });
 
-            
-            // 失去焦点时恢复
 
-            const saveEdit = () => {
 
-                const newName = input.value.trim() || currentName;
 
-                const newDisplay = document.createElement('div');
 
-                newDisplay.id = 'publishCourseNameDisplay';
 
-                newDisplay.className = 'publish-course-name';
 
-                newDisplay.textContent = newName;
 
-                newDisplay.onclick = editCourseName;
 
-                input.replaceWith(newDisplay);
 
-                
-                // 同步更新顶部课程标题
 
-                document.querySelector('.course-title').textContent = newName;
 
-            };
 
-            
-            input.addEventListener('blur', saveEdit);
 
-            input.addEventListener('keydown', (e) => {
 
-                if (e.key === 'Enter') {
 
-                    input.blur();
 
-                } else if (e.key === 'Escape') {
 
-                    input.value = currentName;
 
-                    input.blur();
 
-                }
 
-            });
 
-        }
 
-
 
-        // 从本地上传课程封面
 
-        function uploadCourseCoverLocal(event) {
 
-            event.stopPropagation();
 
-            document.getElementById('courseCoverInput').click();
 
-        }
 
-
 
-        // 网页搜索图片作为封面
 
-        function searchWebImageForCover(event) {
 
-            event.stopPropagation();
 
-            console.log('打开网页搜索图片弹窗（用于课程封面）');
 
-            alert('网页搜索图片功能（为课程封面）');
 
-            // 实际应用中应打开搜索浮窗，选择后设置封面
 
-        }
 
-
 
-        // AI生成图片作为封面
 
-        function generateAIImageForCover(event) {
 
-            event.stopPropagation();
 
-            console.log('打开AI生成图片弹窗（用于课程封面）');
 
-            alert('AI生成图片功能（为课程封面）');
 
-            // 实际应用中应打开AI生成浮窗，生成后设置封面
 
-        }
 
-
 
-        // 处理封面上传
 
-        function handleCoverUpload(event) {
 
-            const file = event.target.files[0];
 
-            if (file && file.type.startsWith('image/')) {
 
-                const reader = new FileReader();
 
-                reader.onload = function(e) {
 
-                    const coverImage = document.getElementById('courseCoverImage');
 
-                    const placeholder = document.getElementById('coverPlaceholder');
 
-                    
-                    coverImage.src = e.target.result;
 
-                    coverImage.style.display = 'block';
 
-                    placeholder.style.display = 'none';
 
-                };
 
-                reader.readAsDataURL(file);
 
-            }
 
-        }
 
-
 
-        // 删除课程封面
 
-        function deleteCourseCover() {
 
-            const coverImage = document.getElementById('courseCoverImage');
 
-            const placeholder = document.getElementById('coverPlaceholder');
 
-            
-            coverImage.src = '';
 
-            coverImage.style.display = 'none';
 
-            placeholder.style.display = 'block';
 
-            
-            // 清空文件选择
 
-            document.getElementById('courseCoverInput').value = '';
 
-        }
 
-
 
-        // 选择可见范围
 
-        function selectVisibility(element, value) {
 
-            // 移除所有选中状态
 
-            document.querySelectorAll('.radio-option').forEach(option => {
 
-                option.classList.remove('selected');
 
-            });
 
-            // 添加选中状态
 
-            element.classList.add('selected');
 
-            // 设置radio按钮
 
-            element.querySelector('input[type="radio"]').checked = true;
 
-        }
 
-
 
-        // 确认发布
 
-        function confirmPublish(event) {
 
-            event.preventDefault();
 
-            
-            const subject = document.getElementById('subjectSelect').value;
 
-            const classGrade = document.getElementById('classGradeSelect').value;
 
-            const classNum = document.getElementById('classSelect').value;
 
-            const visibility = document.querySelector('input[name="visibility"]:checked').value;
 
-            
-            const courseName = document.getElementById('publishCourseNameDisplay').textContent;
 
-            const coverImage = document.getElementById('courseCoverImage');
 
-            const hasCover = coverImage.style.display !== 'none' && coverImage.src;
 
-            
-            console.log('发布课程:', {
 
-                courseName,
 
-                subject,
 
-                classGrade,
 
-                classNum,
 
-                visibility,
 
-                hasCover
 
-            });
 
-            
-            // 显示成功提示
 
-            alert(`课程《${courseName}》发布成功！\n学科: ${subject}\n班级: ${classGrade}年级${classNum}班\n可见范围: ${visibility === 'students' ? '仅发布学生可见' : '组织可见'}`);
 
-            
-            hidePublishModal();
 
-        }
 
-
 
-        // 开始AI创建
 
-        function startAICreate() {
 
-            hideCreateModal();
 
-            // 切换到AI面板
 
-            switchToPanel('ai');
 
-        }
 
-
 
-        // 切换面板
 
-        function switchToPanel(panelType) {
 
-            const aiPanel = document.getElementById('aiPanel');
 
-            const pagesPanel = document.getElementById('pagesPanel');
 
-            const toolsPanel = document.getElementById('toolsPanel');
 
-            const appsPanel = document.getElementById('appsPanel');
 
-            const webPanel = document.getElementById('webPanel');
 
-            const resourcesPanel = document.getElementById('resourcesPanel');
 
-
 
-            [aiPanel, pagesPanel, toolsPanel, appsPanel, webPanel, resourcesPanel].forEach(panel => {
 
-                if (panel) {
 
-                    panel.classList.remove('collapsed', 'hidden');
 
-                }
 
-            });
 
-
 
-            if (panelType === 'ai') {
 
-                pagesPanel.classList.add('hidden');
 
-                toolsPanel.classList.add('hidden');
 
-                appsPanel.classList.add('hidden');
 
-                webPanel.classList.add('hidden');
 
-                resourcesPanel.classList.add('hidden');
 
-                restoreNormalView();
 
-            } else if (panelType === 'pages') {
 
-                aiPanel.classList.add('hidden');
 
-                toolsPanel.classList.add('hidden');
 
-                appsPanel.classList.add('hidden');
 
-                webPanel.classList.add('hidden');
 
-                resourcesPanel.classList.add('hidden');
 
-                restoreNormalView();
 
-            } else if (panelType === 'tools') {
 
-                aiPanel.classList.add('hidden');
 
-                pagesPanel.classList.add('hidden');
 
-                appsPanel.classList.add('hidden');
 
-                webPanel.classList.add('hidden');
 
-                resourcesPanel.classList.add('hidden');
 
-                document.getElementById('toolsListView').classList.remove('hidden');
 
-                document.getElementById('toolsConfigView').classList.add('hidden');
 
-                restoreNormalView();
 
-            } else if (panelType === 'apps') {
 
-                aiPanel.classList.add('hidden');
 
-                pagesPanel.classList.add('hidden');
 
-                toolsPanel.classList.add('hidden');
 
-                webPanel.classList.add('hidden');
 
-                resourcesPanel.classList.add('hidden');
 
-                restoreNormalView();
 
-            } else if (panelType === 'web') {
 
-                aiPanel.classList.add('hidden');
 
-                pagesPanel.classList.add('hidden');
 
-                toolsPanel.classList.add('hidden');
 
-                appsPanel.classList.add('hidden');
 
-                resourcesPanel.classList.add('hidden');
 
-                switchToWebView('list');
 
-                restoreNormalView();
 
-            } else if (panelType === 'resources') {
 
-                aiPanel.classList.add('hidden');
 
-                pagesPanel.classList.add('hidden');
 
-                toolsPanel.classList.add('hidden');
 
-                appsPanel.classList.add('hidden');
 
-                webPanel.classList.add('hidden');
 
-                restoreNormalView();
 
-            }
 
-        }
 
-
 
-        // 二级菜单折叠
 
-        function toggleSecondaryPanel() {
 
-            const aiPanel = document.getElementById('aiPanel');
 
-            const pagesPanel = document.getElementById('pagesPanel');
 
-            const toolsPanel = document.getElementById('toolsPanel');
 
-            const appsPanel = document.getElementById('appsPanel');
 
-            const webPanel = document.getElementById('webPanel');
 
-            const resourcesPanel = document.getElementById('resourcesPanel');
 
-            
-            let activePanel = null;
 
-            if (!aiPanel.classList.contains('hidden')) {
 
-                activePanel = aiPanel;
 
-            } else if (!pagesPanel.classList.contains('hidden')) {
 
-                activePanel = pagesPanel;
 
-            } else if (!toolsPanel.classList.contains('hidden')) {
 
-                activePanel = toolsPanel;
 
-            } else if (!appsPanel.classList.contains('hidden')) {
 
-                activePanel = appsPanel;
 
-            } else if (!webPanel.classList.contains('hidden')) {
 
-                activePanel = webPanel;
 
-            } else if (!resourcesPanel.classList.contains('hidden')) {
 
-                activePanel = resourcesPanel;
 
-            }
 
-
 
-            if (!activePanel) return;
 
-
 
-            activePanel.classList.toggle('collapsed');
 
-            const btn = activePanel.querySelector('.collapse-btn svg');
 
-            if (activePanel.classList.contains('collapsed')) {
 
-                btn.innerHTML = '<polyline points="9 18 15 12 9 6"/>';
 
-            } else {
 
-                btn.innerHTML = '<polyline points="15 18 9 12 15 6"/>';
 
-            }
 
-        }
 
-
 
-        // 右侧面板折叠
 
-        function toggleRightPanel() {
 
-            const panel = document.getElementById('rightPanel');
 
-            panel.classList.toggle('collapsed');
 
-            const btn = panel.querySelector('.collapse-btn svg');
 
-            if (panel.classList.contains('collapsed')) {
 
-                btn.innerHTML = '<polyline points="15 18 9 12 15 6"/>';
 
-            } else {
 
-                btn.innerHTML = '<polyline points="9 18 15 12 9 6"/>';
 
-            }
 
-        }
 
-
 
-        // 一级菜单点击
 
-        document.querySelectorAll('.primary-menu .menu-item').forEach(item => {
 
-            item.addEventListener('click', function() {
 
-                document.querySelectorAll('.primary-menu .menu-item').forEach(i => i.classList.remove('active'));
 
-                this.classList.add('active');
 
-
 
-                const panelType = this.getAttribute('data-panel');
 
-
 
-                if (panelType === 'ai') {
 
-                    switchToPanel('ai');
 
-                } else if (panelType === 'pages') {
 
-                    switchToPanel('pages');
 
-                } else if (panelType === 'tools') {
 
-                    switchToPanel('tools');
 
-                } else if (panelType === 'apps') {
 
-                    switchToPanel('apps');
 
-                } else if (panelType === 'web') {
 
-                    switchToPanel('web');
 
-                } else if (panelType === 'resources') {
 
-                    switchToPanel('resources');
 
-                }
 
-            });
 
-        });
 
-
 
-        // 自动调整textarea高度
 
-        function autoResize(textarea) {
 
-            textarea.style.height = 'auto';
 
-            const newHeight = Math.max(72, Math.min(textarea.scrollHeight, 180));
 
-            textarea.style.height = newHeight + 'px';
 
-        }
 
-
 
-        // 发送消息
 
-        function sendMessage() {
 
-            const input = document.getElementById('chatInput');
 
-            const message = input.value.trim();
 
-            const inputContainer = document.getElementById('chatInputContainer');
 
-            const statusText = document.getElementById('statusText');
 
-            const sendBtn = document.getElementById('sendBtn');
 
-            const uploadBtn = document.getElementById('uploadBtn');
 
-
 
-            if (!message) return;
 
-
 
-            // 添加用户消息
 
-            addMessage(message, 'user');
 
-
 
-            // 清空输入框并重置高度
 
-            input.value = '';
 
-            input.style.height = '72px';
 
-
 
-            // 移动对话框到底部
 
-            inputContainer.classList.add('bottom');
 
-
 
-            // 显示生成状态
 
-            statusText.classList.add('active');
 
-            sendBtn.classList.add('generating');
 
-            uploadBtn.style.display = 'none';
 
-
 
-            // 禁用输入和按钮
 
-            input.disabled = true;
 
-            sendBtn.disabled = true;
 
-
 
-            // 模拟AI回复
 
-            setTimeout(() => {
 
-                const topic = extractTopic(message);
 
-                const aiResponse = `好的,我正在为您生成"${topic}"的课程内容。\n\n课程将包括:\n• 教学目标和重点\n• 互动演示内容\n• 课堂练习题\n• 小组活动设计\n\n预计生成时间:30秒`;
 
-                addMessage(aiResponse, 'ai');
 
-
 
-                // 更新课程标题
 
-                document.querySelector('.course-title').textContent = topic;
 
-
 
-                // 模拟生成完成
 
-                setTimeout(() => {
 
-                    addMessage('✅ 课程已生成完成!已为您创建了5个教学页面和3个互动工具。您可以在底部查看课程大纲,或在中央区域开始编辑。', 'ai');
 
-
 
-                    // 切换到编辑模式
 
-                    switchToEditMode();
 
-
 
-                    // 恢复正常状态
 
-                    statusText.classList.remove('active');
 
-                    sendBtn.classList.remove('generating');
 
-                    uploadBtn.style.display = 'flex';
 
-                    input.disabled = false;
 
-                    sendBtn.disabled = false;
 
-
 
-                    // 更新保存状态
 
-                    document.getElementById('saveStatus').textContent = '已保存';
 
-                }, 2000);
 
-            }, 800);
 
-        }
 
-
 
-        // 添加消息到聊天区域
 
-        function addMessage(text, type) {
 
-            const messagesContainer = document.getElementById('chatMessages');
 
-            const messageDiv = document.createElement('div');
 
-            messageDiv.className = `message message-${type}`;
 
-
 
-            const contentDiv = document.createElement('div');
 
-            contentDiv.className = 'message-content';
 
-            contentDiv.textContent = text;
 
-
 
-            messageDiv.appendChild(contentDiv);
 
-            messagesContainer.appendChild(messageDiv);
 
-
 
-            // 滚动到底部
 
-            messagesContainer.scrollTop = messagesContainer.scrollHeight;
 
-        }
 
-
 
-        // 提取课程主题
 
-        function extractTopic(message) {
 
-            const match = message.match(/教学内容为(.+?)的/);
 
-            if (match) {
 
-                return match[1];
 
-            }
 
-            return '新课程';
 
-        }
 
-
 
-        // 切换到编辑模式
 
-        function switchToEditMode() {
 
-            isEditMode = true;
 
-
 
-            // 隐藏占位符
 
-            document.getElementById('slidePlaceholder').style.display = 'none';
 
-
 
-            // 显示工具栏
 
-            document.getElementById('elementToolbar').classList.add('visible');
 
-
 
-            // 显示底部大纲
 
-            document.getElementById('bottomOutline').classList.add('visible');
 
-
 
-            // 生成示例页面
 
-            generateSamplePages();
 
-        }
 
-
 
-        // 生成示例页面
 
-        function generateSamplePages() {
 
-            const outlineTrack = document.getElementById('outlineTrack');
 
-            const pageCount = 5;
 
-            const pageTypes = ['标题页', '内容页', '选择题', '问答', '总结'];
 
-
 
-            for (let i = 1; i <= pageCount; i++) {
 
-                const wrapper = document.createElement('div');
 
-                wrapper.className = 'outline-item-wrapper';
 
-
 
-                const outlineItem = document.createElement('div');
 
-                outlineItem.className = 'outline-item' + (i === 1 ? ' active' : '');
 
-                outlineItem.draggable = true;
 
-                outlineItem.dataset.pageIndex = i;
 
-                outlineItem.onclick = (e) => selectPage(i, e);
 
-                outlineItem.innerHTML = `
 
-                    <span class="page-number">${i}</span>
 
-                    <span>${pageTypes[i - 1]}</span>
 
-                    <div class="page-menu" onclick="event.stopPropagation(); togglePageMenu(event, ${i})">
 
-                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                            <circle cx="12" cy="12" r="1"/>
 
-                            <circle cx="12" cy="5" r="1"/>
 
-                            <circle cx="12" cy="19" r="1"/>
 
-                        </svg>
 
-                        <div class="page-menu-dropdown">
 
-                            <div class="page-menu-item" onclick="copyPage(${i})">
 
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
 
-                                    <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/>
 
-                                </svg>
 
-                                复制
 
-                            </div>
 
-                            <div class="page-menu-item" onclick="addBlankPage(${i})">
 
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                    <line x1="12" y1="5" x2="12" y2="19"/>
 
-                                    <line x1="5" y1="12" x2="19" y2="12"/>
 
-                                </svg>
 
-                                新增
 
-                            </div>
 
-                            <div class="page-menu-item danger" onclick="deletePage(${i})">
 
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                    <polyline points="3 6 5 6 21 6"/>
 
-                                    <path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/>
 
-                                </svg>
 
-                                删除
 
-                            </div>
 
-                        </div>
 
-                    </div>
 
-                `;
 
-
 
-                // 添加拖拽事件监听器
 
-                outlineItem.addEventListener('dragstart', handleDragStart);
 
-                outlineItem.addEventListener('dragend', handleDragEnd);
 
-                outlineItem.addEventListener('dragover', handleDragOver);
 
-                outlineItem.addEventListener('drop', handleDrop);
 
-                outlineItem.addEventListener('dragleave', handleDragLeave);
 
-
 
-                const addBtn = document.createElement('button');
 
-                addBtn.className = 'add-page-between';
 
-                addBtn.textContent = '+';
 
-                addBtn.onclick = () => addPageBetween(i);
 
-
 
-                wrapper.appendChild(outlineItem);
 
-                wrapper.appendChild(addBtn);
 
-                outlineTrack.appendChild(wrapper);
 
-            }
 
-            syncRightOutlineWithBottom();
 
-        }
 
-
 
-        // 选择页面
 
-        function selectPage(pageNum, evt) {
 
-            const currentEvent = evt || event;
 
-            document.querySelectorAll('.outline-item').forEach(item => {
 
-                item.classList.remove('active');
 
-            });
 
-            if (currentEvent && currentEvent.currentTarget) {
 
-                currentEvent.currentTarget.classList.add('active');
 
-            }
 
-        }
 
-
 
-        // 页面菜单切换
 
-        function togglePageMenu(event, pageNum) {
 
-            event.stopPropagation();
 
-            const menu = event.currentTarget;
 
-
 
-            // 关闭其他菜单
 
-            document.querySelectorAll('.page-menu').forEach(m => {
 
-                if (m !== menu) m.classList.remove('active');
 
-            });
 
-
 
-            menu.classList.toggle('active');
 
-        }
 
-
 
-        // 复制页面
 
-        function copyPage(pageNum) {
 
-            console.log('复制页面', pageNum);
 
-            alert('复制页面 ' + pageNum);
 
-        }
 
-
 
-        // 新增空白页面
 
-        function addBlankPage(afterPage) {
 
-            console.log('在页面后新增空白页', afterPage);
 
-            alert('在页面 ' + afterPage + ' 后新增空白页');
 
-        }
 
-
 
-        // 删除页面
 
-        function deletePage(pageNum) {
 
-            if (confirm('确定要删除页面 ' + pageNum + ' 吗?')) {
 
-                console.log('删除页面', pageNum);
 
-                alert('删除页面 ' + pageNum);
 
-            }
 
-        }
 
-
 
-        // 在页面之间添加
 
-        function addPageBetween(afterPage) {
 
-            console.log('在页面后添加新页面', afterPage);
 
-            alert('在页面 ' + afterPage + ' 后添加新页面');
 
-        }
 
-
 
-        // 页面拖拽功能
 
-        let draggedElement = null;
 
-        let draggedIndex = null;
 
-
 
-        function handleDragStart(e) {
 
-            draggedElement = e.currentTarget;
 
-            draggedIndex = parseInt(draggedElement.dataset.pageIndex);
 
-            draggedElement.classList.add('dragging');
 
-            e.dataTransfer.effectAllowed = 'move';
 
-            e.dataTransfer.setData('text/html', draggedElement.innerHTML);
 
-        }
 
-
 
-        function handleDragEnd(e) {
 
-            e.currentTarget.classList.remove('dragging');
 
-            // 清除所有拖拽状态
 
-            document.querySelectorAll('.outline-item').forEach(item => {
 
-                item.classList.remove('drag-over');
 
-            });
 
-        }
 
-
 
-        function handleDragOver(e) {
 
-            if (e.preventDefault) {
 
-                e.preventDefault();
 
-            }
 
-            e.dataTransfer.dropEffect = 'move';
 
-            
-            const targetElement = e.currentTarget;
 
-            if (targetElement !== draggedElement) {
 
-                targetElement.classList.add('drag-over');
 
-            }
 
-            
-            return false;
 
-        }
 
-
 
-        function handleDragLeave(e) {
 
-            e.currentTarget.classList.remove('drag-over');
 
-        }
 
-
 
-        function handleDrop(e) {
 
-            if (e.stopPropagation) {
 
-                e.stopPropagation();
 
-            }
 
-            
-            const targetElement = e.currentTarget;
 
-            const targetIndex = parseInt(targetElement.dataset.pageIndex);
 
-            
-            if (draggedElement !== targetElement && draggedIndex !== targetIndex) {
 
-                // 交换页面顺序
 
-                const outlineTrack = document.getElementById('outlineTrack');
 
-                const allWrappers = Array.from(outlineTrack.querySelectorAll('.outline-item-wrapper'));
 
-                
-                const draggedWrapper = draggedElement.parentElement;
 
-                const targetWrapper = targetElement.parentElement;
 
-                
-                // 获取位置
 
-                const draggedWrapperIndex = allWrappers.indexOf(draggedWrapper);
 
-                const targetWrapperIndex = allWrappers.indexOf(targetWrapper);
 
-                
-                if (draggedWrapperIndex < targetWrapperIndex) {
 
-                    targetWrapper.parentNode.insertBefore(draggedWrapper, targetWrapper.nextSibling);
 
-                } else {
 
-                    targetWrapper.parentNode.insertBefore(draggedWrapper, targetWrapper);
 
-                }
 
-                
-                // 更新页面序号
 
-                updatePageNumbers();
 
-                
-                console.log(`页面从位置 ${draggedIndex} 移动到位置 ${targetIndex}`);
 
-            }
 
-            
-            targetElement.classList.remove('drag-over');
 
-            
-            return false;
 
-        }
 
-
 
-        // 更新页面序号
 
-        function updatePageNumbers() {
 
-            const outlineItems = document.querySelectorAll('.outline-item');
 
-            outlineItems.forEach((item, index) => {
 
-                const pageNumber = index + 1;
 
-                item.dataset.pageIndex = pageNumber;
 
-                const numberSpan = item.querySelector('.page-number');
 
-                if (numberSpan) {
 
-                    numberSpan.textContent = pageNumber;
 
-                }
 
-            });
 
-        }
 
-
 
-        // 下拉菜单切换
 
-        function toggleDropdown(id) {
 
-            event.stopPropagation();
 
-            const dropdown = document.getElementById(id);
 
-            dropdown.classList.toggle('active');
 
-        }
 
-
 
-        // 点击页面其他地方关闭下拉菜单
 
-        document.addEventListener('click', function() {
 
-            document.querySelectorAll('.dropdown').forEach(d => d.classList.remove('active'));
 
-            document.querySelectorAll('.page-menu').forEach(m => m.classList.remove('active'));
 
-        });
 
-
 
-        // 插入表格
 
-        function insertTable() {
 
-            alert('插入表格功能');
 
-        }
 
-
 
-        // 插入形状
 
-        function insertShape(type) {
 
-            const canvas = document.getElementById('slideCanvas');
 
-            const element = document.createElement('div');
 
-            element.className = 'slide-element';
 
-            element.id = 'element-' + (++elementIdCounter);
 
-            element.style.left = '200px';
 
-            element.style.top = '200px';
 
-            element.style.width = '150px';
 
-            element.style.height = '150px';
 
-
 
-            if (type === 'circle') {
 
-                element.style.borderRadius = '50%';
 
-                element.style.background = '#285cf5';
 
-            } else if (type === 'rectangle') {
 
-                element.style.background = '#3b82f6';
 
-            } else if (type === 'triangle') {
 
-                element.style.background = '#10b981';
 
-            } else if (type === 'arrow') {
 
-                element.style.background = '#f59e0b';
 
-            }
 
-
 
-            addResizeHandles(element);
 
-            canvas.appendChild(element);
 
-            makeElementDraggable(element);
 
-            element.addEventListener('click', () => selectElement(element));
 
-        }
 
-
 
-        // 添加调整大小手柄
 
-        function addResizeHandles(element) {
 
-            const positions = ['nw', 'ne', 'sw', 'se'];
 
-            positions.forEach(pos => {
 
-                const handle = document.createElement('div');
 
-                handle.className = 'resize-handle ' + pos;
 
-                element.appendChild(handle);
 
-            });
 
-        }
 
-
 
-        // 插入文本
 
-        function insertText() {
 
-            const canvas = document.getElementById('slideCanvas');
 
-            const element = document.createElement('div');
 
-            element.className = 'slide-element text-element';
 
-            element.id = 'element-' + (++elementIdCounter);
 
-            element.contentEditable = true;
 
-            element.textContent = '双击编辑文本';
 
-            element.style.left = '100px';
 
-            element.style.top = '100px';
 
-            element.style.width = '300px';
 
-            element.style.minHeight = '50px';
 
-
 
-            addResizeHandles(element);
 
-            canvas.appendChild(element);
 
-            makeElementDraggable(element);
 
-            element.addEventListener('click', () => selectElement(element));
 
-        }
 
-
 
-        // 插入图片
 
-        function insertImage() {
 
-            const canvas = document.getElementById('slideCanvas');
 
-            const element = document.createElement('div');
 
-            element.className = 'slide-element has-image';
 
-            element.id = 'element-' + (++elementIdCounter);
 
-            element.style.left = '150px';
 
-            element.style.top = '150px';
 
-            element.style.width = '200px';
 
-            element.style.height = '150px';
 
-            element.style.background = '#e5e7eb';
 
-            element.style.display = 'flex';
 
-            element.style.alignItems = 'center';
 
-            element.style.justifyContent = 'center';
 
-            element.innerHTML = `
 
-                <span style="color: #9ca3af;">图片占位</span>
 
-                <div class="image-hover-menu">
 
-                    <div class="image-menu-item" onclick="uploadLocal(event)">
 
-                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                            <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/>
 
-                            <polyline points="17 8 12 3 7 8"/>
 
-                            <line x1="12" y1="3" x2="12" y2="15"/>
 
-                        </svg>
 
-                        自本地上传
 
-                    </div>
 
-                    <div class="image-menu-item" onclick="searchWebImage(event)">
 
-                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                            <circle cx="11" cy="11" r="8"/>
 
-                            <path d="M21 21l-4.35-4.35"/>
 
-                        </svg>
 
-                        自网页搜索
 
-                    </div>
 
-                    <div class="image-menu-item" onclick="generateAIImage(event)">
 
-                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                            <path d="M12 2L2 7l10 5 10-5-10-5z"/>
 
-                            <path d="M2 17l10 5 10-5"/>
 
-                            <path d="M2 12l10 5 10-5"/>
 
-                        </svg>
 
-                        自AI生成
 
-                    </div>
 
-                </div>
 
-            `;
 
-
 
-            addResizeHandles(element);
 
-            canvas.appendChild(element);
 
-            makeElementDraggable(element);
 
-            element.addEventListener('click', () => selectElement(element));
 
-        }
 
-
 
-        // 从模板添加页面
 
-        function addPageFromTemplate(templateType) {
 
-            if (!isEditMode) {
 
-                switchToEditMode();
 
-            }
 
-
 
-            const outlineTrack = document.getElementById('outlineTrack');
 
-            const pageCount = outlineTrack.querySelectorAll('.outline-item-wrapper').length + 1;
 
-
 
-            const templateNames = {
 
-                'title': '标题页',
 
-                'image': '图片页',
 
-                'content': '内容页',
 
-                'text-image': '文图页',
 
-                'image-text': '图文页'
 
-            };
 
-
 
-            const wrapper = document.createElement('div');
 
-            wrapper.className = 'outline-item-wrapper';
 
-
 
-            const outlineItem = document.createElement('div');
 
-            outlineItem.className = 'outline-item';
 
-            outlineItem.onclick = (e) => selectPage(pageCount, e);
 
-            outlineItem.innerHTML = `
 
-                <span class="page-number">${pageCount}</span>
 
-                <span>${templateNames[templateType]}</span>
 
-                <div class="page-menu" onclick="event.stopPropagation(); togglePageMenu(event, ${pageCount})">
 
-                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                        <circle cx="12" cy="12" r="1"/>
 
-                        <circle cx="12" cy="5" r="1"/>
 
-                        <circle cx="12" cy="19" r="1"/>
 
-                    </svg>
 
-                    <div class="page-menu-dropdown">
 
-                        <div class="page-menu-item" onclick="copyPage(${pageCount})">
 
-                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
 
-                                <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/>
 
-                            </svg>
 
-                            复制
 
-                        </div>
 
-                        <div class="page-menu-item" onclick="addBlankPage(${pageCount})">
 
-                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                <line x1="12" y1="5" x2="12" y2="19"/>
 
-                                <line x1="5" y1="12" x2="19" y2="12"/>
 
-                            </svg>
 
-                            新增
 
-                        </div>
 
-                        <div class="page-menu-item danger" onclick="deletePage(${pageCount})">
 
-                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                                <polyline points="3 6 5 6 21 6"/>
 
-                                <path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/>
 
-                            </svg>
 
-                            删除
 
-                        </div>
 
-                    </div>
 
-                </div>
 
-            `;
 
-
 
-            const addBtn = document.createElement('button');
 
-            addBtn.className = 'add-page-between';
 
-            addBtn.textContent = '+';
 
-            addBtn.onclick = () => addPageBetween(pageCount);
 
-
 
-            wrapper.appendChild(outlineItem);
 
-            wrapper.appendChild(addBtn);
 
-            outlineTrack.appendChild(wrapper);
 
-
 
-            // 如果是包含图片的页面,自动添加图片元素
 
-            if (['image', 'text-image', 'image-text'].includes(templateType)) {
 
-                insertImage();
 
-            }
 
-
 
-            alert('已添加' + templateNames[templateType]);
 
-            syncRightOutlineWithBottom();
 
-        }
 
-
 
-        // 上传PPT
 
-        function uploadPPT() {
 
-            const input = document.createElement('input');
 
-            input.type = 'file';
 
-            input.accept = '.ppt,.pptx';
 
-            input.onchange = (e) => {
 
-                const file = e.target.files[0];
 
-                if (file) {
 
-                    alert('正在解析PPT文件: ' + file.name + '\n\n此功能将自动识别PPT中的页面并导入到课件中。');
 
-                }
 
-            };
 
-            input.click();
 
-        }
 
-
 
-        // 图片上传方法
 
-        function uploadLocal(event) {
 
-            event.stopPropagation();
 
-            const input = document.createElement('input');
 
-            input.type = 'file';
 
-            input.accept = 'image/*';
 
-            input.onchange = (e) => {
 
-                const file = e.target.files[0];
 
-                if (file) {
 
-                    alert('已选择图片: ' + file.name);
 
-                }
 
-            };
 
-            input.click();
 
-        }
 
-
 
-        function searchWebImage(event) {
 
-            event.stopPropagation();
 
-            document.getElementById('searchImageModal').classList.add('active');
 
-        }
 
-
 
-        function generateAIImage(event) {
 
-            event.stopPropagation();
 
-            document.getElementById('generateImageModal').classList.add('active');
 
-        }
 
-
 
-        // 关闭搜索浮窗
 
-        function closeSearchModal() {
 
-            document.getElementById('searchImageModal').classList.remove('active');
 
-        }
 
-
 
-        // 确认选择搜索图片
 
-        function confirmSearchImage() {
 
-            alert('已选择网页图片');
 
-            closeSearchModal();
 
-        }
 
-
 
-        // 关闭生成浮窗
 
-        function closeGenerateModal() {
 
-            document.getElementById('generateImageModal').classList.remove('active');
 
-        }
 
-
 
-        // 开始生成图片
 
-        function startGenerate() {
 
-            const loading = document.getElementById('generateLoading');
 
-            loading.classList.add('active');
 
-
 
-            setTimeout(() => {
 
-                loading.classList.remove('active');
 
-                alert('图片生成完成!');
 
-                closeGenerateModal();
 
-            }, 3000);
 
-        }
 
-
 
-        // 点击浮窗遮罩关闭
 
-        document.getElementById('searchImageModal').addEventListener('click', function(e) {
 
-            if (e.target === this) {
 
-                closeSearchModal();
 
-            }
 
-        });
 
-
 
-        document.getElementById('generateImageModal').addEventListener('click', function(e) {
 
-            if (e.target === this) {
 
-                closeGenerateModal();
 
-            }
 
-        });
 
-
 
-        document.getElementById('videoSourceModal').addEventListener('click', function(e) {
 
-            if (e.target === this) {
 
-                closeVideoSourceModal();
 
-            }
 
-        });
 
-
 
-        document.getElementById('audioUploadModal').addEventListener('click', function(e) {
 
-            if (e.target === this) {
 
-                closeAudioUploadModal();
 
-            }
 
-        });
 
-
 
-        document.getElementById('documentUploadModal').addEventListener('click', function(e) {
 
-            if (e.target === this) {
 
-                closeDocumentUploadModal();
 
-            }
 
-        });
 
-
 
-        document.getElementById('collectionModal').addEventListener('click', function(e) {
 
-            if (e.target === this) {
 
-                closeCollectionModal();
 
-            }
 
-        });
 
-
 
-        // 使元素可拖动
 
-        function makeElementDraggable(element) {
 
-            let isDragging = false;
 
-            let startX, startY, startLeft, startTop;
 
-
 
-            element.addEventListener('mousedown', function(e) {
 
-                if (e.target.classList.contains('resize-handle')) return;
 
-                if (e.target.contentEditable === 'true' && e.target === element) return;
 
-
 
-                isDragging = true;
 
-                startX = e.clientX;
 
-                startY = e.clientY;
 
-                startLeft = parseInt(element.style.left) || 0;
 
-                startTop = parseInt(element.style.top) || 0;
 
-
 
-                e.preventDefault();
 
-            });
 
-
 
-            document.addEventListener('mousemove', function(e) {
 
-                if (!isDragging) return;
 
-
 
-                const dx = e.clientX - startX;
 
-                const dy = e.clientY - startY;
 
-
 
-                element.style.left = (startLeft + dx) + 'px';
 
-                element.style.top = (startTop + dy) + 'px';
 
-            });
 
-
 
-            document.addEventListener('mouseup', function() {
 
-                isDragging = false;
 
-            });
 
-        }
 
-
 
-        // 选中元素
 
-        function selectElement(element) {
 
-            if (selectedElement) {
 
-                selectedElement.classList.remove('selected');
 
-            }
 
-            selectedElement = element;
 
-            element.classList.add('selected');
 
-
 
-            // 显示编辑工具
 
-            document.getElementById('editTools').style.display = 'flex';
 
-        }
 
-
 
-        // 删除元素
 
-        function deleteElement() {
 
-            if (selectedElement) {
 
-                selectedElement.remove();
 
-                selectedElement = null;
 
-                document.getElementById('editTools').style.display = 'none';
 
-            }
 
-        }
 
-
 
-        // 点击canvas空白处取消选择
 
-        document.getElementById('slideCanvas').addEventListener('click', function(e) {
 
-            if (e.target === this && selectedElement) {
 
-                selectedElement.classList.remove('selected');
 
-                selectedElement = null;
 
-                document.getElementById('editTools').style.display = 'none';
 
-            }
 
-        });
 
-
 
-        // 监听Enter键发送消息
 
-        document.getElementById('chatInput').addEventListener('keydown', function(e) {
 
-            if (e.key === 'Enter' && !e.shiftKey) {
 
-                e.preventDefault();
 
-                sendMessage();
 
-            }
 
-        });
 
-
 
-        // 页面加载时显示创建弹窗
 
-        window.addEventListener('load', function() {
 
-            setTimeout(() => {
 
-                showCreateModal();
 
-            }, 300);
 
-        });
 
-
 
-        // ========== AI应用功能 ==========
 
-        
-        // 应用数据（模拟）
 
-        const sampleApps = [
 
-            {
 
-                id: 'app-001',
 
-                name: '单词记忆卡',
 
-                description: '帮助学生记忆单词的互动卡片应用',
 
-                source: 'public',
 
-                type: 'agent',
 
-                mode: 'card',
 
-                category: '英语',
 
-                grade: '小学'
 
-            },
 
-            {
 
-                id: 'app-002',
 
-                name: '数学计算练习',
 
-                description: '支持四则运算的智能练习系统',
 
-                source: 'public',
 
-                type: 'workflow',
 
-                mode: 'immersive',
 
-                category: '数学',
 
-                grade: '小学'
 
-            },
 
-            {
 
-                id: 'app-003',
 
-                name: '诗词鉴赏助手',
 
-                description: 'AI辅助的诗词理解与鉴赏工具',
 
-                source: 'public',
 
-                type: 'agent',
 
-                mode: 'chat',
 
-                category: '语文',
 
-                grade: '初中'
 
-            },
 
-            {
 
-                id: 'app-004',
 
-                name: '化学实验模拟',
 
-                description: '虚拟化学实验室，安全探索化学反应',
 
-                source: 'public',
 
-                type: 'workflow',
 
-                mode: 'immersive',
 
-                category: '化学',
 
-                grade: '高中'
 
-            },
 
-            {
 
-                id: 'app-005',
 
-                name: '历史时间轴',
 
-                description: '交互式历史事件时间轴展示',
 
-                source: 'mine',
 
-                type: 'workflow',
 
-                mode: 'card',
 
-                category: '历史',
 
-                grade: '初中'
 
-            },
 
-            {
 
-                id: 'app-006',
 
-                name: '地理地图探索',
 
-                description: '3D地球仪和地理知识问答',
 
-                source: 'public',
 
-                type: 'agent',
 
-                mode: 'immersive',
 
-                category: '地理',
 
-                grade: '初中'
 
-            },
 
-            {
 
-                id: 'app-007',
 
-                name: '物理公式推导',
 
-                description: 'AI辅助的物理公式推导与解题',
 
-                source: 'mine',
 
-                type: 'agent',
 
-                mode: 'chat',
 
-                category: '物理',
 
-                grade: '高中'
 
-            },
 
-            {
 
-                id: 'app-008',
 
-                name: '生物细胞识别',
 
-                description: '显微镜下的细胞结构学习工具',
 
-                source: 'public',
 
-                type: 'workflow',
 
-                mode: 'card',
 
-                category: '生物',
 
-                grade: '初中'
 
-            },
 
-            {
 
-                id: 'app-009',
 
-                name: '作文批改助手',
 
-                description: 'AI智能作文评分与改进建议',
 
-                source: 'public',
 
-                type: 'agent',
 
-                mode: 'chat',
 
-                category: '语文',
 
-                grade: '小学'
 
-            }
 
-        ];
 
-
 
-        let selectedApps = [];
 
-        let currentFilters = { source: 'all', type: 'all', mode: 'all' };
 
-        let chatMessages = [];
 
-
 
-        // 打开应用中心
 
-        function openAIAppCenter() {
 
-            document.getElementById('aiAppCenterModal').classList.add('active');
 
-            renderAppGrid();
 
-        }
 
-
 
-        // 关闭应用中心
 
-        function closeAppCenter() {
 
-            document.getElementById('aiAppCenterModal').classList.remove('active');
 
-            selectedApps = [];
 
-            updateSelectedCount();
 
-        }
 
-
 
-        // 点击遮罩关闭
 
-        document.getElementById('aiAppCenterModal').addEventListener('click', function(e) {
 
-            if (e.target === this) {
 
-                closeAppCenter();
 
-            }
 
-        });
 
-
 
-        // 筛选应用
 
-        function filterApps() {
 
-            // 获取三个下拉菜单的值
 
-            currentFilters.source = document.getElementById('sourceFilter').value;
 
-            currentFilters.type = document.getElementById('typeFilter').value;
 
-            currentFilters.mode = document.getElementById('modeFilter').value;
 
-
 
-            // 重新渲染应用列表
 
-            renderAppGrid();
 
-        }
 
-
 
-        // 渲染应用网格
 
-        function renderAppGrid() {
 
-            const appGrid = document.getElementById('appGrid');
 
-            
-            // 过滤应用
 
-            let filteredApps = sampleApps.filter(app => {
 
-                if (currentFilters.source !== 'all' && app.source !== currentFilters.source) return false;
 
-                if (currentFilters.type !== 'all' && app.type !== currentFilters.type) return false;
 
-                if (currentFilters.mode !== 'all' && app.mode !== currentFilters.mode) return false;
 
-                return true;
 
-            });
 
-
 
-            // 生成HTML
 
-            appGrid.innerHTML = filteredApps.map(app => `
 
-                <div class="app-card ${selectedApps.includes(app.id) ? 'selected' : ''}" 
-                     onclick="toggleAppSelection('${app.id}')">
 
-                    <div class="app-cover">
 
-                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                            <rect x="3" y="3" width="7" height="7" rx="1"/>
 
-                            <rect x="14" y="3" width="7" height="7" rx="1"/>
 
-                            <rect x="14" y="14" width="7" height="7" rx="1"/>
 
-                            <rect x="3" y="14" width="7" height="7" rx="1"/>
 
-                        </svg>
 
-                    </div>
 
-                    <div class="app-info">
 
-                        <div class="app-name">${app.name}</div>
 
-                        <div class="app-description">${app.description}</div>
 
-                        <div class="app-meta">
 
-                            <span class="app-tag">${app.type === 'agent' ? '智能体' : '工作流'}</span>
 
-                            <span class="app-tag">${app.mode === 'card' ? '卡片式' : app.mode === 'immersive' ? '沉浸式' : '聊天式'}</span>
 
-                        </div>
 
-                    </div>
 
-                </div>
 
-            `).join('');
 
-        }
 
-
 
-        // 切换应用选中状态
 
-        function toggleAppSelection(appId) {
 
-            const index = selectedApps.indexOf(appId);
 
-            if (index > -1) {
 
-                selectedApps.splice(index, 1);
 
-            } else {
 
-                selectedApps.push(appId);
 
-            }
 
-            renderAppGrid();
 
-            updateSelectedCount();
 
-        }
 
-
 
-        // 更新已选数量
 
-        function updateSelectedCount() {
 
-            const countText = document.getElementById('selectedCountText');
 
-            const confirmBtn = document.getElementById('confirmAddAppsBtn');
 
-            
-            countText.textContent = selectedApps.length;
 
-            confirmBtn.disabled = selectedApps.length === 0;
 
-        }
 
-
 
-        // 确认添加应用
 
-        function confirmAddApps() {
 
-            if (selectedApps.length === 0) return;
 
-
 
-            const selectedAppNames = sampleApps
 
-                .filter(app => selectedApps.includes(app.id))
 
-                .map(app => app.name)
 
-                .join('、');
 
-
 
-            alert(`已添加 ${selectedApps.length} 个应用页面：\n${selectedAppNames}`);
 
-            
-            // 这里可以添加实际的页面创建逻辑
 
-            // selectedApps.forEach(appId => {
 
-            //     const app = sampleApps.find(a => a.id === appId);
 
-            //     addPageFromAIApp(app);
 
-            // });
 
-
 
-            closeAppCenter();
 
-        }
 
-
 
-        // 打开创建应用方式选择弹窗
 
-        function openCreateAppModal() {
 
-            document.getElementById('createAppMethodModal').classList.add('active');
 
-        }
 
-
 
-        // 隐藏创建应用方式选择弹窗
 
-        function hideCreateAppMethodModal() {
 
-            document.getElementById('createAppMethodModal').classList.remove('active');
 
-        }
 
-
 
-        // 点击遮罩关闭
 
-        document.getElementById('createAppMethodModal').addEventListener('click', function(e) {
 
-            if (e.target === this) {
 
-                hideCreateAppMethodModal();
 
-            }
 
-        });
 
-
 
-        // 选择创建方式
 
-        function selectCreateMethod(method) {
 
-            hideCreateAppMethodModal();
 
-
 
-            if (method === 'blank') {
 
-                // 创建空白应用
 
-                alert('创建空白应用页面');
 
-                // 实际应用中应创建包含空白应用画布的新页面
 
-            } else if (method === 'ai') {
 
-                // 打开AI创建界面
 
-                openAICreateInterface();
 
-            }
 
-        }
 
-
 
-        // 打开AI创建界面
 
-        function openAICreateInterface() {
 
-            document.getElementById('aiCreateAppModal').classList.add('active');
 
-            initAIChat();
 
-        }
 
-
 
-        // 关闭AI创建应用浮窗
 
-        function closeAICreateModal() {
 
-            document.getElementById('aiCreateAppModal').classList.remove('active');
 
-            chatMessages = [];
 
-        }
 
-
 
-        // 点击遮罩关闭
 
-        document.getElementById('aiCreateAppModal').addEventListener('click', function(e) {
 
-            if (e.target === this) {
 
-                closeAICreateModal();
 
-            }
 
-        });
 
-
 
-        // 初始化AI对话
 
-        function initAIChat() {
 
-            chatMessages = [
 
-                {
 
-                    id: 'msg-' + Date.now(),
 
-                    role: 'ai',
 
-                    content: '您好！我将帮您创建AI应用。请描述您想要的应用功能，例如："创建一个数学口算练习应用"。'
 
-                }
 
-            ];
 
-            renderChatMessages();
 
-        }
 
-
 
-        // 渲染对话消息
 
-        function renderChatMessages() {
 
-            const chatMessagesContainer = document.getElementById('aiChatMessages');
 
-            chatMessagesContainer.innerHTML = chatMessages.map(msg => `
 
-                <div class="ai-chat-message ${msg.role}">
 
-                    <div class="chat-avatar">${msg.role === 'ai' ? 'AI' : 'U'}</div>
 
-                    <div class="chat-bubble">${msg.content}</div>
 
-                </div>
 
-            `).join('');
 
-            
-            // 滚动到底部
 
-            chatMessagesContainer.scrollTop = chatMessagesContainer.scrollHeight;
 
-        }
 
-
 
-        // 发送消息给AI
 
-        function sendMessageToAI() {
 
-            const input = document.getElementById('aiChatInput');
 
-            const message = input.value.trim();
 
-            
-            if (!message) return;
 
-
 
-            // 添加用户消息
 
-            chatMessages.push({
 
-                id: 'msg-' + Date.now(),
 
-                role: 'user',
 
-                content: message
 
-            });
 
-            
-            input.value = '';
 
-            renderChatMessages();
 
-
 
-            // 模拟AI回复
 
-            setTimeout(() => {
 
-                const aiResponse = generateAIResponse(message);
 
-                chatMessages.push({
 
-                    id: 'msg-' + Date.now(),
 
-                    role: 'ai',
 
-                    content: aiResponse
 
-                });
 
-                renderChatMessages();
 
-                
-                // 更新画布预览（模拟）
 
-                updateAppCanvasPreview(message);
 
-            }, 1000);
 
-        }
 
-
 
-        // 生成AI回复（模拟）
 
-        function generateAIResponse(userMessage) {
 
-            if (userMessage.includes('数学') || userMessage.includes('计算')) {
 
-                return '好的！我将为您创建一个数学口算练习应用。\n\n应用将包含：\n1. 题目生成器（支持加减乘除）\n2. 答题输入框\n3. 即时反馈\n4. 分数统计\n\n您可以继续描述更多需求，或点击"确认创建"完成。';
 
-            } else if (userMessage.includes('单词') || userMessage.includes('英语')) {
 
-                return '明白了！我将创建一个英语单词学习应用。\n\n功能包括：\n1. 单词卡片展示\n2. 中英文切换\n3. 发音功能\n4. 记忆进度追踪\n\n请告诉我还需要什么功能？';
 
-            } else {
 
-                return '收到您的需求！我正在为您设计应用界面。\n\n您可以继续补充功能要求，或者查看左侧预览区的效果。满意的话，点击"确认创建"即可添加到课件中。';
 
-            }
 
-        }
 
-
 
-        // 更新应用画布预览（模拟）
 
-        function updateAppCanvasPreview(userMessage) {
 
-            const canvas = document.getElementById('appCanvasPreview');
 
-            
-            if (userMessage.includes('数学') || userMessage.includes('计算')) {
 
-                canvas.innerHTML = `
 
-                    <div style="background: white; padding: 20px; border-radius: 12px; width: 80%; text-align: center;">
 
-                        <div style="font-size: 32px; font-weight: 600; color: #111827; margin-bottom: 20px;">
 
-                            25 + 17 = ?
 
-                        </div>
 
-                        <input type="text" style="width: 200px; padding: 12px; border: 2px solid #e5e7eb; border-radius: 10px; font-size: 18px; text-align: center;" placeholder="输入答案">
 
-                        <div style="margin-top: 16px;">
 
-                            <button style="padding: 10px 30px; background: #285cf5; color: white; border: none; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer;">提交</button>
 
-                        </div>
 
-                    </div>
 
-                `;
 
-            } else if (userMessage.includes('单词') || userMessage.includes('英语')) {
 
-                canvas.innerHTML = `
 
-                    <div style="background: white; padding: 30px; border-radius: 12px; width: 80%; text-align: center;">
 
-                        <div style="font-size: 40px; font-weight: 700; color: #111827; margin-bottom: 12px;">
 
-                            Apple
 
-                        </div>
 
-                        <div style="font-size: 18px; color: #6b7280; margin-bottom: 20px;">
 
-                            苹果
 
-                        </div>
 
-                        <button style="padding: 10px 30px; background: #3b82f6; color: white; border: none; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer;">🔊 发音</button>
 
-                    </div>
 
-                `;
 
-            } else {
 
-                canvas.innerHTML = `
 
-                    <div style="background: white; padding: 40px; border-radius: 12px; width: 80%; text-align: center; color: #9ca3af;">
 
-                        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-bottom: 12px;">
 
-                            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
 
-                            <circle cx="8.5" cy="8.5" r="1.5"/>
 
-                            <polyline points="21 15 16 10 5 21"/>
 
-                        </svg>
 
-                        <div style="font-size: 14px;">应用界面预览</div>
 
-                    </div>
 
-                `;
 
-            }
 
-        }
 
-
 
-        // 确认创建AI应用
 
-        function confirmAICreatedApp() {
 
-            alert('AI应用已创建！\n\n新的应用页面已添加到课件中。');
 
-            closeAICreateModal();
 
-        }
 
-
 
-        // 监听AI对话输入框的Enter键
 
-        document.getElementById('aiChatInput').addEventListener('keydown', function(e) {
 
-            if (e.key === 'Enter' && !e.shiftKey) {
 
-                e.preventDefault();
 
-                sendMessageToAI();
 
-            }
 
-        });
 
-
 
-        // ========== 交互网页功能 ==========
 
-        let selectedWebs = [];
 
-        let webFilters = { source: 'all', subject: 'all', grade: 'all' };
 
-        let currentWebDetail = null;
 
-        let selectedWebFile = null;
 
-
 
-        // 切换交互网页的内部视图 (list, upload, crawl)
 
-        function switchToWebView(viewType) {
 
-            const webListView = document.getElementById('webListView');
 
-            const webConfigView = document.getElementById('webConfigView');
 
-            const uploadWebView = document.getElementById('uploadWebView');
 
-            const crawlWebView = document.getElementById('crawlWebView');
 
-
 
-            // 先隐藏所有主视图和配置视图
 
-            webListView.classList.add('hidden');
 
-            webConfigView.classList.add('hidden');
 
-            uploadWebView.classList.add('hidden');
 
-            crawlWebView.classList.add('hidden');
 
-
 
-            if (viewType === 'list') {
 
-                webListView.classList.remove('hidden');
 
-            } else if (viewType === 'upload') {
 
-                webConfigView.classList.remove('hidden');
 
-                uploadWebView.classList.remove('hidden');
 
-            } else if (viewType === 'crawl') {
 
-                webConfigView.classList.remove('hidden');
 
-                crawlWebView.classList.remove('hidden');
 
-            }
 
-        }
 
-
 
-        // 从配置界面返回列表
 
-        function backToWebList() {
 
-            switchToWebView('list');
 
-        }
 
-        
-        // 打开上传网页视图
 
-        function uploadWebPage() {
 
-            switchToWebView('upload');
 
-            resetUploadForm();
 
-        }
 
-
 
-        // 打开爬取网页视图
 
-        function crawlWebPage() {
 
-            switchToWebView('crawl');
 
-            
-            // 重置表单
 
-            document.getElementById('crawlWebName').value = '';
 
-            document.getElementById('crawlWebUrl').value = '';
 
-            document.getElementById('startCrawlBtn').disabled = true;
 
-            
-            updateCrawlStatus('waiting', '等待输入...', '');
 
-        }
 
-
 
-        let currentUploadMode = 'file'; // 'file' or 'code'
 
-
 
-        function switchUploadTab(mode) {
 
-            currentUploadMode = mode;
 
-            const fileTab = document.getElementById('uploadFileTab');
 
-            const codeTab = document.getElementById('pasteCodeTab');
 
-            const filePanel = document.getElementById('uploadFilePanel');
 
-            const codePanel = document.getElementById('pasteCodePanel');
 
-
 
-            if (mode === 'file') {
 
-                fileTab.classList.add('active');
 
-                codeTab.classList.remove('active');
 
-                filePanel.classList.remove('hidden');
 
-                codePanel.classList.add('hidden');
 
-            } else {
 
-                fileTab.classList.remove('active');
 
-                codeTab.classList.add('active');
 
-                filePanel.classList.add('hidden');
 
-                codePanel.classList.remove('hidden');
 
-            }
 
-            validateUploadForm();
 
-        }
 
-
 
-        function handleFileSelect(event) {
 
-            const file = event.target.files[0];
 
-            const fileNameDisplay = document.getElementById('fileNameDisplay');
 
-            const fileUploadArea = document.getElementById('fileUploadArea');
 
-            if (!file) {
 
-                fileNameDisplay.textContent = '';
 
-                fileNameDisplay.style.display = 'none';
 
-                fileUploadArea.style.display = 'flex';
 
-                selectedWebFile = null;
 
-                validateUploadForm();
 
-                return;
 
-            }
 
-            
-            selectedWebFile = file;
 
-            fileNameDisplay.textContent = '已选择文件: ' + file.name;
 
-            fileNameDisplay.style.display = 'block';
 
-            fileUploadArea.style.display = 'none';
 
-            
-            // 自动填充网页名称
 
-            const fileName = file.name.replace(/\.[^/.]+$/, "");
 
-            if (!document.getElementById('uploadWebName').value) {
 
-                document.getElementById('uploadWebName').value = fileName;
 
-            }
 
-            
-            // 重新校验按钮状态
 
-            validateUploadForm();
 
-        }
 
-
 
-        function validateUploadForm() {
 
-            const webName = document.getElementById('uploadWebName').value.trim();
 
-            const fileInput = document.getElementById('fileInput').files[0];
 
-            const codeInput = document.getElementById('pasteCodeTextarea').value.trim();
 
-            const confirmBtn = document.getElementById('confirmCreateWebBtn');
 
-
 
-            let isModeValid = false;
 
-            if (currentUploadMode === 'file') {
 
-                isModeValid = !!fileInput;
 
-            } else { // mode === 'code'
 
-                isModeValid = codeInput.length > 0;
 
-            }
 
-
 
-            if (webName.length > 0 && isModeValid) {
 
-                confirmBtn.disabled = false;
 
-                updateUploadButtonStatus('ready', '开始上传', 'ready');
 
-            } else {
 
-                confirmBtn.disabled = true;
 
-                updateUploadButtonStatus('waiting', '等待上传...', '');
 
-            }
 
-        }
 
-
 
-        function confirmCreateWebPage() {
 
-            if (currentUploadMode === 'file') {
 
-                startUploadWeb();
 
-            } else {
 
-                startRecognizeCode();
 
-            }
 
-        }
 
-
 
-        function startRecognizeCode() {
 
-            const uploadBtn = document.getElementById('confirmCreateWebBtn');
 
-            uploadBtn.disabled = true;
 
-            updateUploadButtonStatus('loading', '解析中...', 'loading');
 
-
 
-            const code = document.getElementById('pasteCodeTextarea').value;
 
-            console.log('Recognizing code:', code);
 
-            
-            setTimeout(() => {
 
-                updateUploadButtonStatus('success', '解析完成！', 'success');
 
-                // Mock success
 
-                addWebToPage({ name: document.getElementById('uploadWebName').value, type: 'pasted' });
 
-                setTimeout(() => {
 
-                    resetUploadForm();
 
-                    backToWebList();
 
-                }, 800);
 
-            }, 800);
 
-        }
 
-
 
-        // 模拟网页数据
 
-        const sampleWebs = [
 
-            {
 
-                id: 'web_001',
 
-                name: '化学实验-酸碱中和反应',
 
-                source: 'public',
 
-                subject: '化学',
 
-                grade: '初中',
 
-                description: '通过交互式动画展示酸碱中和反应的全过程，学生可以自主调整反应物浓度',
 
-                preview: '',
 
-                url: 'https://example.com/chem-001',
 
-                duration: '10分钟',
 
-                author: '张老师',
 
-                createTime: '2024-01-15'
 
-            },
 
-            {
 
-                id: 'web_002',
 
-                name: '物理模拟-牛顿摆',
 
-                source: 'public',
 
-                subject: '物理',
 
-                grade: '高中',
 
-                description: '3D交互式牛顿摆模拟，可调整球数、质量和初速度',
 
-                preview: '',
 
-                url: 'https://example.com/physics-001',
 
-                duration: '15分钟',
 
-                author: '李老师',
 
-                createTime: '2024-01-10'
 
-            },
 
-            {
 
-                id: 'web_003',
 
-                name: '数学可视化-函数图像',
 
-                source: 'mine',
 
-                subject: '数学',
 
-                grade: '高中',
 
-                description: '动态函数图像绘制工具，支持多种函数类型',
 
-                preview: '',
 
-                url: 'https://example.com/math-001',
 
-                duration: '20分钟',
 
-                author: '我',
 
-                createTime: '2024-01-20'
 
-            },
 
-            {
 
-                id: 'web_004',
 
-                name: '地理探索-地球仪3D',
 
-                source: 'public',
 
-                subject: '地理',
 
-                grade: '初中',
 
-                description: '交互式3D地球仪，可查看地形、气候、人口等多种数据层',
 
-                preview: '',
 
-                url: 'https://example.com/geo-001',
 
-                duration: '12分钟',
 
-                author: '王老师',
 
-                createTime: '2024-01-18'
 
-            },
 
-            {
 
-                id: 'web_005',
 
-                name: '生物模型-细胞结构',
 
-                source: 'public',
 
-                subject: '生物',
 
-                grade: '初中',
 
-                description: '3D细胞结构模型，可放大查看各细胞器的详细结构',
 
-                preview: '',
 
-                url: 'https://example.com/bio-001',
 
-                duration: '8分钟',
 
-                author: '赵老师',
 
-                createTime: '2024-01-12'
 
-            },
 
-            {
 
-                id: 'web_006',
 
-                name: '历史时间轴-中国近代史',
 
-                source: 'mine',
 
-                subject: '历史',
 
-                grade: '高中',
 
-                description: '交互式历史时间轴，包含重要事件、人物和影响',
 
-                preview: '',
 
-                url: 'https://example.com/history-001',
 
-                duration: '25分钟',
 
-                author: '我',
 
-                createTime: '2024-01-22'
 
-            }
 
-        ];
 
-
 
-        // ========== 网页中心功能 ==========
 
-        // 打开网页中心
 
-        function openWebCenter() {
 
-            document.getElementById('webCenterModal').classList.add('active');
 
-            renderWebGrid();
 
-        }
 
-
 
-        // 关闭网页中心
 
-        function closeWebCenter() {
 
-            document.getElementById('webCenterModal').classList.remove('active');
 
-            selectedWebs = [];
 
-            updateWebSelectedCount();
 
-        }
 
-
 
-        // 点击遮罩关闭
 
-        document.getElementById('webCenterModal').addEventListener('click', function(e) {
 
-            if (e.target === this) {
 
-                closeWebCenter();
 
-            }
 
-        });
 
-
 
-        // 筛选网页
 
-        function filterWebs() {
 
-            webFilters.source = document.getElementById('webSourceFilter').value;
 
-            webFilters.subject = document.getElementById('webSubjectFilter').value;
 
-            webFilters.grade = document.getElementById('webGradeFilter').value;
 
-            renderWebGrid();
 
-        }
 
-
 
-        // 渲染网页网格
 
-        function renderWebGrid() {
 
-            const webGrid = document.getElementById('webGrid');
 
-            
-            // 过滤网页
 
-            let filteredWebs = sampleWebs.filter(web => {
 
-                if (webFilters.source !== 'all' && web.source !== webFilters.source) return false;
 
-                if (webFilters.subject !== 'all' && web.subject !== webFilters.subject) return false;
 
-                if (webFilters.grade !== 'all' && web.grade !== webFilters.grade) return false;
 
-                return true;
 
-            });
 
-
 
-            // 生成HTML
 
-            webGrid.innerHTML = filteredWebs.map(web => `
 
-                <div class="web-card ${selectedWebs.includes(web.id) ? 'selected' : ''}" 
-                     onclick="toggleWebSelection('${web.id}')">
 
-                    <div class="web-preview">
 
-                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
-                            <rect x="2" y="3" width="20" height="14" rx="2"/>
 
-                            <line x1="2" y1="7" x2="22" y2="7"/>
 
-                            <path d="M8 11h8M8 14h5"/>
 
-                        </svg>
 
-                    </div>
 
-                    <div class="web-info">
 
-                        <div class="web-name">${web.name}</div>
 
-                        <div class="web-description">${web.description}</div>
 
-                        <div class="web-meta">
 
-                            <span class="web-tag">${web.subject}</span>
 
-                            <span class="web-tag">${web.grade}</span>
 
-                            <span class="web-tag">${web.duration}</span>
 
-                        </div>
 
-                    </div>
 
-                </div>
 
-            `).join('');
 
-        }
 
-
 
-        // 切换网页选中状态
 
-        function toggleWebSelection(webId) {
 
-            const index = selectedWebs.indexOf(webId);
 
-            if (index > -1) {
 
-                selectedWebs.splice(index, 1);
 
-            } else {
 
-                selectedWebs.push(webId);
 
-            }
 
-            renderWebGrid();
 
-            updateWebSelectedCount();
 
-        }
 
-
 
-        // 更新选中计数
 
-        function updateWebSelectedCount() {
 
-            const countText = document.getElementById('webSelectedCountText');
 
-            const confirmBtn = document.getElementById('confirmAddWebsBtn');
 
-            
-            countText.textContent = selectedWebs.length;
 
-            confirmBtn.disabled = selectedWebs.length === 0;
 
-        }
 
-
 
-        // 确认添加网页
 
-        function confirmAddWebs() {
 
-            if (selectedWebs.length === 0) return;
 
-            
-            console.log('添加网页:', selectedWebs);
 
-            alert(`已添加 ${selectedWebs.length} 个网页到课件`);
 
-            
-            // 这里应该实际创建新页面并插入网页内容
 
-            // 暂时模拟功能
 
-            closeWebCenter();
 
-        }
 
-
 
-        // 打开网页详情
 
-        function openWebDetail(webId) {
 
-            const web = sampleWebs.find(w => w.id === webId);
 
-            if (!web) return;
 
-            
-            currentWebDetail = web;
 
-            
-            // 填充详情信息
 
-            document.getElementById('webDetailName').textContent = web.name;
 
-            document.getElementById('webDetailSubject').textContent = web.subject;
 
-            document.getElementById('webDetailGrade').textContent = web.grade;
 
-            document.getElementById('webDetailDuration').textContent = web.duration;
 
-            document.getElementById('webDetailDescription').textContent = web.description;
 
-            document.getElementById('webDetailAuthor').textContent = web.author;
 
-            document.getElementById('webDetailTime').textContent = web.createTime;
 
-            document.getElementById('webDetailPreviewTitle').textContent = web.name;
 
-            document.getElementById('webDetailIframe').src = web.url;
 
-            
-            // 显示详情浮窗
 
-            document.getElementById('webDetailModal').classList.add('active');
 
-        }
 
-
 
-        // 关闭网页详情
 
-        function closeWebDetail() {
 
-            document.getElementById('webDetailModal').classList.remove('active');
 
-            document.getElementById('webDetailIframe').src = '';
 
-            currentWebDetail = null;
 
-        }
 
-
 
-        // 点击遮罩关闭详情
 
-        document.getElementById('webDetailModal').addEventListener('click', function(e) {
 
-            if (e.target === this) {
 
-                closeWebDetail();
 
-            }
 
-        });
 
-
 
-        // 切换预览全屏
 
-        function toggleWebPreviewFullscreen() {
 
-            const iframe = document.getElementById('webDetailIframe');
 
-            if (iframe.requestFullscreen) {
 
-                iframe.requestFullscreen();
 
-            } else if (iframe.webkitRequestFullscreen) {
 
-                iframe.webkitRequestFullscreen();
 
-            } else if (iframe.mozRequestFullScreen) {
 
-                iframe.mozRequestFullScreen();
 
-            } else if (iframe.msRequestFullscreen) {
 
-                iframe.msRequestFullscreen();
 
-            }
 
-        }
 
-
 
-        // 从详情页添加网页
 
-        function addWebFromDetail() {
 
-            if (!currentWebDetail) return;
 
-            
-            console.log('从详情页添加网页:', currentWebDetail);
 
-            alert(`已添加"${currentWebDetail.name}"到课件`);
 
-            
-            // 这里应该实际创建新页面并插入网页内容
 
-            closeWebDetail();
 
-            closeWebCenter();
 
-        }
 
-
 
-        // ========== 上传网页功能 ==========
 
-
 
-        // 开始上传网页
 
-        function startUploadWeb() {
 
-            const webName = document.getElementById('uploadWebName').value.trim();
 
-            
-            if (!webName) {
 
-                alert('请输入网页名称');
 
-                return;
 
-            }
 
-            
-            if (!selectedWebFile) {
 
-                alert('请选择文件');
 
-                return;
 
-            }
 
-            
-            // 显示解析中状态
 
-            const uploadBtn = document.getElementById('confirmCreateWebBtn');
 
-            uploadBtn.disabled = true;
 
-            updateUploadButtonStatus('loading', '解析中...', 'loading');
 
-            
-            // 模拟解析过程
 
-            setTimeout(() => {
 
-                updateUploadButtonStatus('success', '解析完成！', 'success');
 
-                
-                // 2秒后创建页面并显示内容
 
-                setTimeout(() => {
 
-                    console.log('创建新页面并插入网页内容:', webName);
 
-                    alert(`网页"${webName}"已成功添加到课件`);
 
-                    resetUploadForm();
 
-                    returnFromUpload();
 
-                }, 2000);
 
-            }, 2000);
 
-        }
 
-
 
-        function resetUploadForm() {
 
-            const uploadBtn = document.getElementById('confirmCreateWebBtn');
 
-            document.getElementById('uploadWebName').value = '';
 
-            document.getElementById('fileInput').value = '';
 
-            document.getElementById('pasteCodeTextarea').value = '';
 
-            const fileNameDisplay = document.getElementById('fileNameDisplay');
 
-            const fileUploadArea = document.getElementById('fileUploadArea');
 
-            fileNameDisplay.textContent = '';
 
-            fileNameDisplay.style.display = 'none';
 
-            fileUploadArea.style.display = 'flex';
 
-            selectedWebFile = null;
 
-            uploadBtn.disabled = true;
 
-            updateUploadButtonStatus('waiting', '等待上传...', '');
 
-        }
 
-
 
-        // 返回列表视图
 
-        function returnFromUpload() {
 
-            switchToWebView('list');
 
-        }
 
-
 
-        // 更新上传按钮状态
 
-        function updateUploadButtonStatus(statusKey, text, className) {
 
-            const uploadBtn = document.getElementById('confirmCreateWebBtn');
 
-            const statusIcon = document.getElementById('uploadStatusIcon');
 
-            const statusText = document.getElementById('uploadStatusText');
 
-
 
-            uploadBtn.classList.remove('status-loading', 'status-success', 'status-error', 'status-ready');
 
-            if (className) {
 
-                uploadBtn.classList.add(`status-${className}`);
 
-            }
 
-
 
-            statusIcon.innerHTML = statusIcons[statusKey] || statusIcons.waiting;
 
-            statusText.textContent = text;
 
-        }
 
-
 
-        // 文件拖拽上传
 
-        const fileUploadArea = document.getElementById('fileUploadArea');
 
-        
-        fileUploadArea.addEventListener('dragover', (e) => {
 
-            e.preventDefault();
 
-            fileUploadArea.classList.add('dragover');
 
-        });
 
-        
-        fileUploadArea.addEventListener('dragleave', () => {
 
-            fileUploadArea.classList.remove('dragover');
 
-        });
 
-        
-        fileUploadArea.addEventListener('drop', (e) => {
 
-            e.preventDefault();
 
-            fileUploadArea.classList.remove('dragover');
 
-            
-            const files = e.dataTransfer.files;
 
-            if (files.length > 0) {
 
-                const file = files[0];
 
-                // 检查文件类型
 
-                const validTypes = ['.html', '.htm', '.zip'];
 
-                const fileExt = '.' + file.name.split('.').pop().toLowerCase();
 
-                
-                if (validTypes.includes(fileExt)) {
 
-                    document.getElementById('fileInput').files = files;
 
-                    handleFileSelect({ target: { files: files } });
 
-                } else {
 
-                    alert('仅支持 HTML、HTM、ZIP 格式文件');
 
-                }
 
-            }
 
-        });
 
-
 
-        // ========== 交互网页按钮状态图标 ==========
 
-        const statusIcons = {
 
-            waiting: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"></circle><path d="M12 7v5l3 2"></path></svg>',
 
-            ready: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="10 7 17 12 10 17 10 7"></polygon><line x1="7" y1="7" x2="7" y2="17"></line></svg>',
 
-            loading: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9" stroke-dasharray="56" stroke-dashoffset="20"></circle></svg>',
 
-            success: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"></path></svg>',
 
-            error: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"></circle><line x1="9" y1="9" x2="15" y2="15"></line><line x1="15" y1="9" x2="9" y2="15"></line></svg>'
 
-        };
 
-
 
-        // 验证爬取URL
 
-        function validateCrawlUrl() {
 
-            const url = document.getElementById('crawlWebUrl').value.trim();
 
-            const name = document.getElementById('crawlWebName').value.trim();
 
-            const startBtn = document.getElementById('startCrawlBtn');
 
-            
-            if (url && name && isValidUrl(url)) {
 
-                startBtn.disabled = false;
 
-                updateCrawlStatus('ready', '开始爬取', 'ready');
 
-            } else if (url && !isValidUrl(url)) {
 
-                startBtn.disabled = true;
 
-                updateCrawlStatus('error', 'URL格式不正确，请检查', 'error');
 
-            } else {
 
-                startBtn.disabled = true;
 
-                updateCrawlStatus('waiting', '等待输入...', '');
 
-            }
 
-        }
 
-
 
-        // 验证URL格式
 
-        function isValidUrl(string) {
 
-            try {
 
-                const url = new URL(string);
 
-                return url.protocol === 'http:' || url.protocol === 'https:';
 
-            } catch (_) {
 
-                return false;  
-            }
 
-        }
 
-
 
-        // 开始爬取网页
 
-        function startCrawlWeb() {
 
-            const webName = document.getElementById('crawlWebName').value.trim();
 
-            const webUrl = document.getElementById('crawlWebUrl').value.trim();
 
-            const startBtn = document.getElementById('startCrawlBtn');
 
-            
-            if (!webName) {
 
-                alert('请输入网页名称');
 
-                return;
 
-            }
 
-            
-            if (!webUrl || !isValidUrl(webUrl)) {
 
-                alert('请输入有效的网页链接');
 
-                return;
 
-            }
 
-            
-            // 显示爬取中状态
 
-            startBtn.disabled = true;
 
-            updateCrawlStatus('loading', '爬取中...', 'loading');
 
-            
-            // 模拟爬取过程
 
-            setTimeout(() => {
 
-                updateCrawlStatus('success', '爬取完成！', 'success');
 
-                
-                setTimeout(() => {
 
-                    resetCrawlForm();
 
-                }, 1200);
 
-            }, 2500);
 
-        }
 
-
 
-        function resetCrawlForm() {
 
-            const startBtn = document.getElementById('startCrawlBtn');
 
-            const nameInput = document.getElementById('crawlWebName');
 
-            const urlInput = document.getElementById('crawlWebUrl');
 
-            nameInput.value = '';
 
-            urlInput.value = '';
 
-            startBtn.disabled = true;
 
-            updateCrawlStatus('waiting', '等待输入...', '');
 
-        }
 
-
 
-        // 返回列表视图（保留，未使用）
 
-        function returnFromCrawl() {
 
-            switchToWebView('list');
 
-        }
 
-
 
-        // 更新爬取状态
 
-        function updateCrawlStatus(statusKey, text, className) {
 
-            const startBtn = document.getElementById('startCrawlBtn');
 
-            const statusIcon = document.getElementById('crawlStatusIcon');
 
-            const statusText = document.getElementById('crawlStatusText');
 
-            
-            startBtn.classList.remove('status-loading', 'status-success', 'status-error', 'status-ready');
 
-            if (className) {
 
-                startBtn.classList.add(`status-${className}`);
 
-            }
 
-            
-            statusIcon.innerHTML = statusIcons[statusKey] || statusIcons.waiting;
 
-            statusText.textContent = text;
 
-        }
 
-    </script>
 
-</body>
 
-</html>

BIN
ffd774a7-2b75-46e8-a263-8c0c097bf42f.png
View File


BIN
image.png
View File