优化

app.py

@@ -19,10 +19,21 @@ def parse_problem_metadata(filename):
     if title_match:
         title = title_match.group(1).strip()
     
+    # 解析 @category
+    category_match = re.search(r'@category\s+(.+)', content)
+    category = category_match.group(1).strip() if category_match else '练习题'
+
+    # 解析 @pinned
+    pinned_match = re.search(r'@pinned\s+(.+)', content)
+    is_pinned = (pinned_match.group(1).strip().lower() == 'true') if pinned_match else False
+
     return {
         'id': filename,
         'title': title,
-        'content': content
+        'category': category,
+        'pinned': is_pinned,
+        'content': content,
+        'ctime': os.path.getctime(filepath)
     }
 
 @app.route('/')
@@ -32,8 +43,8 @@ def index():
 @app.route('/api/problems', methods=['GET'])
 def get_problems():
     files = [f for f in os.listdir(PROBLEMS_DIR) if f.endswith('.js') or f.endswith('.ts')]
-    # 按文件名排序
-    files.sort()
+    # 按创建时间倒序排序 (最新的在最前)
+    files.sort(key=lambda x: os.path.getctime(os.path.join(PROBLEMS_DIR, x)), reverse=True)
     
     problems = []
     for f in files:
@@ -48,6 +59,7 @@ def get_problems():
 def create_problem():
     data = request.json
     filename = data.get('filename')
+    category = data.get('category', '练习题')
     
     if not filename:
         return jsonify({'error': 'Filename is required'}), 400
@@ -63,6 +75,7 @@ def create_problem():
     # 默认模板
     content = f"""/**
  * @title {filename}
+ * @category {category}
  * @description 在此处添加题目描述
  */
 
@@ -91,15 +104,47 @@ def update_problem(filename):
     if not os.path.exists(filepath):
         return jsonify({'error': 'File not found'}), 404
         
-    content = request.json.get('content')
-    if content is None:
-        return jsonify({'error': 'Content is required'}), 400
+    data = request.json
+    
+    # Handle Rename
+    new_filename = data.get('new_filename')
+    if new_filename:
+        if not (new_filename.endswith('.js') or new_filename.endswith('.ts')):
+            new_filename += '.js'
+            
+        new_filepath = os.path.join(PROBLEMS_DIR, new_filename)
+        if os.path.exists(new_filepath) and new_filename != filename:
+            return jsonify({'error': 'Target filename already exists'}), 409
+            
+        try:
+            os.rename(filepath, new_filepath)
+            return jsonify(parse_problem_metadata(new_filename))
+        except Exception as e:
+            return jsonify({'error': str(e)}), 500
+
+    # Handle Content Update
+    content = data.get('content')
+    if content is not None:
+        try:
+            with open(filepath, 'w', encoding='utf-8') as f:
+                f.write(content)
+            # 返回新的 metadata 以便前端更新标题
+            return jsonify(parse_problem_metadata(filename))
+        except Exception as e:
+            return jsonify({'error': str(e)}), 500
+            
+    return jsonify({'error': 'No valid operation specified'}), 400
+
+@app.route('/api/problems/<path:filename>', methods=['DELETE'])
+def delete_problem(filename):
+    filepath = os.path.join(PROBLEMS_DIR, filename)
+    
+    if not os.path.exists(filepath):
+        return jsonify({'error': 'File not found'}), 404
         
     try:
-        with open(filepath, 'w', encoding='utf-8') as f:
-            f.write(content)
-        # 返回新的 metadata 以便前端更新标题
-        return jsonify(parse_problem_metadata(filename))
+        os.remove(filepath)
+        return jsonify({'message': 'Deleted successfully'})
     except Exception as e:
         return jsonify({'error': str(e)}), 500
 
@@ -107,4 +152,4 @@ if __name__ == '__main__':
     # 确保 problems 目录存在
     if not os.path.exists(PROBLEMS_DIR):
         os.makedirs(PROBLEMS_DIR)
-    app.run(host='0.0.0.0', port=7860, debug=True)
+    app.run(host='0.0.0.0', port=7870, debug=True)

problems/02_fibonacci.js

@@ -1,24 +0,0 @@
-/**
- * @title 2. 斐波那契数列 (Fibonacci)
- * 
- * 题目描述：
- * 写一个函数，输入 n，求斐波那契（Fibonacci）数列的第 n 项。
- * F(0) = 0, F(1) = 1
- * F(N) = F(N - 1) + F(N - 2), 其中 N > 1.
- */
-
-function fib(n) {
-    if (n < 2) return n;
-    let p = 0, q = 0, r = 1;
-    for (let i = 2; i <= n; i++) {
-        p = q; 
-        q = r; 
-        r = p + q;
-    }
-    return r;
-}
-
-// 测试用例
-console.log("Fib(2) =", fib(2)); // 1
-console.log("Fib(5) =", fib(5)); // 5
-console.log("Fib(10) =", fib(10)); // 55

templates/index.html

@@ -135,10 +135,70 @@
             overflow: hidden;
             text-overflow: ellipsis;
             border-left: 3px solid transparent;
+            display: flex;
+            align-items: center;
+            position: relative; /* For absolute positioning of actions */
+            height: 32px; /* Fixed height for consistency */
+        }
+
+        .problem-title {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            flex: 1;
+            margin-right: 5px; /* Spacing from potential actions */
+        }
+
+        .item-actions {
+            position: absolute;
+            right: 5px;
+            top: 50%;
+            transform: translateY(-50%);
+            display: flex;
+            gap: 4px;
+            opacity: 0; /* Hidden by default */
+            transition: opacity 0.2s ease;
+            background-color: var(--sidebar-bg); /* Cover text behind */
+            padding-left: 8px; /* Fade effect spacer if using gradient, here just solid bg */
+            box-shadow: -10px 0 10px -5px var(--sidebar-bg); /* Soft edge */
+        }
+
+        .problem-item:hover .item-actions {
+            opacity: 1;
         }
 
-        .problem-item:hover {
+        .problem-item.active .item-actions {
+            background-color: var(--sidebar-active); /* Match active bg */
+            box-shadow: -10px 0 10px -5px var(--sidebar-active);
+        }
+        
+        .problem-item:hover .item-actions {
             background-color: var(--sidebar-hover);
+            box-shadow: -10px 0 10px -5px var(--sidebar-hover);
+        }
+
+        .action-btn {
+            background: none;
+            border: none;
+            color: #888;
+            cursor: pointer;
+            padding: 4px;
+            border-radius: 3px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 24px;
+            height: 24px;
+        }
+        
+        .action-btn:hover {
+            color: #e0e0e0;
+            background-color: rgba(255, 255, 255, 0.1);
+        }
+        
+        .action-btn svg {
+            width: 14px;
+            height: 14px;
+            fill: currentColor;
         }
 
         .problem-item.active {
@@ -244,6 +304,83 @@
             height: 100%;
             color: #888;
         }
+
+        /* Category Group Styles */
+        .category-group {
+            margin-bottom: 5px;
+        }
+        .category-header {
+            padding: 0 15px; /* Taller */
+            font-size: 12px;
+            font-weight: bold;
+            color: #aaa;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: space-between; /* Push add button to right */
+            user-select: none;
+            text-transform: uppercase;
+            border-bottom: 1px solid rgba(255,255,255,0.05); /* Subtle separator */
+        }
+        .category-header:hover {
+            color: #fff;
+            background-color: rgba(255,255,255,0.05);
+        }
+        .category-header svg {
+            width: 14px; /* Slightly larger */
+            height: 14px;
+            margin-right: 8px;
+            transition: transform 0.2s;
+            fill: currentColor;
+        }
+        .category-header .add-btn {
+            background: none;
+            border: none;
+            color: #888;
+            cursor: pointer;
+            font-size: 20px; /* Larger */
+            width: 24px;
+            height: 24px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 4px;
+            transition: all 0.2s;
+            line-height: 1;
+            padding: 0;
+            margin-left: 10px;
+        }
+        .category-header .add-btn:hover {
+            color: #fff;
+            background-color: rgba(255, 255, 255, 0.2);
+        }
+        
+        .category-header.collapsed svg {
+            transform: rotate(-90deg);
+        }
+        .category-list {
+            list-style: none;
+            padding-left: 0;
+            display: block;
+        }
+        .category-list.collapsed {
+            display: none;
+        }
+        
+        /* Pinned Item Styles */
+        .pinned-icon {
+            color: #d7ba7d; /* Gold-ish for pinned */
+            margin-right: 5px;
+            width: 12px;
+            height: 12px;
+            fill: currentColor;
+            display: inline-block;
+            vertical-align: middle;
+        }
+        
+        .action-btn.pinned {
+            color: #d7ba7d;
+        }
     </style>
 </head>
 <body>
@@ -262,7 +399,6 @@
     <div id="split-0" class="sidebar">
         <div class="sidebar-header">
             题目列表
-            <button class="add-btn" onclick="createProblem()" title="新建题目">+</button>
         </div>
         <ul class="problem-list" id="problem-list">
             <!-- Items will be injected here -->
@@ -370,17 +506,141 @@
         }
     }
 
+    const CATEGORIES = ['练习题', '面试题', '手撕题', '算法题'];
+
     function renderProblemList(problems) {
         const listEl = document.getElementById('problem-list');
         listEl.innerHTML = '';
 
+        // Group problems
+        const grouped = {};
+        CATEGORIES.forEach(c => grouped[c] = []);
+        
         problems.forEach(p => {
-            const li = document.createElement('li');
-            li.className = 'problem-item';
-            li.textContent = p.title;
-            li.dataset.id = p.id;
-            li.onclick = () => loadProblem(p);
-            listEl.appendChild(li);
+            const targetCat = CATEGORIES.includes(p.category) ? p.category : '练习题';
+            grouped[targetCat].push(p);
+        });
+
+        CATEGORIES.forEach(category => {
+            const items = grouped[category];
+            
+            // Sort: Pinned first, then by ctime desc (backend sent ctime desc)
+            items.sort((a, b) => {
+                if (!!a.pinned === !!b.pinned) return 0; // Stable sort for same pin status
+                return a.pinned ? -1 : 1;
+            });
+
+            // Create Category Group
+            const groupDiv = document.createElement('div');
+            groupDiv.className = 'category-group';
+
+            // Header
+            const header = document.createElement('div');
+            header.className = 'category-header';
+            
+            // Header Content
+            const headerContent = document.createElement('div');
+            headerContent.style.display = 'flex';
+            headerContent.style.alignItems = 'center';
+            headerContent.innerHTML = `
+                <svg viewBox="0 0 16 16"><path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>
+                ${category} (${items.length})
+            `;
+            header.appendChild(headerContent);
+
+            // Add Button in Header
+            const addBtn = document.createElement('button');
+            addBtn.className = 'add-btn';
+            addBtn.innerHTML = '+';
+            addBtn.title = '新建题目';
+            // Removed inline styles to let CSS take over
+            addBtn.onclick = (e) => {
+                e.stopPropagation();
+                createProblem(category);
+            };
+            header.appendChild(addBtn);
+
+            // List
+            const ul = document.createElement('ul');
+            ul.className = 'category-list';
+
+            // Toggle Handler
+            header.onclick = (e) => {
+                if (e.target === addBtn) return;
+                header.classList.toggle('collapsed');
+                ul.classList.toggle('collapsed');
+            };
+            groupDiv.appendChild(header);
+
+            items.forEach((p, index) => {
+                const li = document.createElement('li');
+                li.className = 'problem-item';
+                li.dataset.id = p.id;
+                li.onclick = () => loadProblem(p);
+
+                // Title Span
+                const titleSpan = document.createElement('span');
+                titleSpan.className = 'problem-title';
+                
+                // Clean title: remove existing leading numbering (e.g. "1. ", "01 ", "1、")
+                const cleanTitle = p.title.replace(/^\d+[\.\s、]+/, '');
+                const displayTitle = `${index + 1}. ${cleanTitle}`;
+                
+                // Pinned Icon in Title
+                if (p.pinned) {
+                    titleSpan.innerHTML = `<svg class="pinned-icon" viewBox="0 0 16 16"><path d="M4.146.146A.5.5 0 0 1 4.5 0h7a.5.5 0 0 1 .5.5c0 .68-.342 1.174-.646 1.479-.126.125-.25.224-.354.298v4.431l.078.048c.203.127.476.314.751.555C12.36 7.775 13 8.527 13 9.5a.5.5 0 0 1-.5.5h-4v4.5a.5.5 0 0 1-1 0V10h-4a.5.5 0 0 1-.5-.5c0-.973.64-1.725 1.17-2.189A5.921 5.921 0 0 1 5 6.708V2.277a2.77 2.77 0 0 1-.354-.298C4.342 1.674 4 1.179 4 .5a.5.5 0 0 1 .146-.354z"/></svg>`;
+                    titleSpan.appendChild(document.createTextNode(displayTitle));
+                } else {
+                    titleSpan.textContent = displayTitle;
+                }
+                
+                li.appendChild(titleSpan);
+
+                // Actions Div
+                const actionsDiv = document.createElement('div');
+                actionsDiv.className = 'item-actions';
+
+                // Pin Button
+                const pinBtn = document.createElement('button');
+                pinBtn.className = `action-btn ${p.pinned ? 'pinned' : ''}`;
+                pinBtn.title = p.pinned ? '取消置顶' : '置顶';
+                pinBtn.innerHTML = '<svg viewBox="0 0 16 16"><path d="M4.146.146A.5.5 0 0 1 4.5 0h7a.5.5 0 0 1 .5.5c0 .68-.342 1.174-.646 1.479-.126.125-.25.224-.354.298v4.431l.078.048c.203.127.476.314.751.555C12.36 7.775 13 8.527 13 9.5a.5.5 0 0 1-.5.5h-4v4.5a.5.5 0 0 1-1 0V10h-4a.5.5 0 0 1-.5-.5c0-.973.64-1.725 1.17-2.189A5.921 5.921 0 0 1 5 6.708V2.277a2.77 2.77 0 0 1-.354-.298C4.342 1.674 4 1.179 4 .5a.5.5 0 0 1 .146-.354z"/></svg>';
+                pinBtn.onclick = (e) => {
+                    e.stopPropagation();
+                    togglePin(p);
+                };
+                actionsDiv.appendChild(pinBtn);
+
+                // Rename Button
+                const renameBtn = document.createElement('button');
+                renameBtn.className = 'action-btn';
+                renameBtn.title = '重命名';
+                // Edit Icon (Pencil)
+                renameBtn.innerHTML = '<svg viewBox="0 0 16 16"><path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/></svg>';
+                renameBtn.onclick = (e) => {
+                    e.stopPropagation();
+                    renameProblem(p.id);
+                };
+                actionsDiv.appendChild(renameBtn);
+
+                // Delete Button
+                const deleteBtn = document.createElement('button');
+                deleteBtn.className = 'action-btn';
+                deleteBtn.title = '删除';
+                // Trash Icon
+                deleteBtn.innerHTML = '<svg viewBox="0 0 16 16"><path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/><path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/></svg>';
+                deleteBtn.onclick = (e) => {
+                    e.stopPropagation();
+                    deleteProblem(p.id);
+                };
+                actionsDiv.appendChild(deleteBtn);
+
+                li.appendChild(actionsDiv);
+                ul.appendChild(li);
+            });
+            
+            groupDiv.appendChild(ul);
+            listEl.appendChild(groupDiv);
         });
         
         if (currentProblemId) {
@@ -388,6 +648,102 @@
              if (activeEl) activeEl.classList.add('active');
         }
     }
+    
+    async function togglePin(problem) {
+        try {
+            const res = await fetch(`/api/problems/${problem.id}`);
+            const content = await res.text();
+            
+            let newContent;
+            // Check if @pinned exists
+            const hasPinned = /@pinned\s+(true|false)/i.test(content);
+            const isPinned = problem.pinned;
+            
+            if (hasPinned) {
+                // Replace existing
+                newContent = content.replace(/@pinned\s+(true|false)/i, `@pinned ${!isPinned}`);
+            } else {
+                // Add after @title or @category
+                if (content.includes('@category')) {
+                     newContent = content.replace(/(@category\s+.+)/, `$1\n * @pinned ${!isPinned}`);
+                } else if (content.includes('@title')) {
+                     newContent = content.replace(/(@title\s+.+)/, `$1\n * @pinned ${!isPinned}`);
+                } else {
+                     // Just prepend
+                     newContent = `/**\n * @pinned ${!isPinned}\n */\n` + content;
+                }
+            }
+
+            // Save
+            const saveRes = await fetch(`/api/problems/${problem.id}`, {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ content: newContent })
+            });
+
+            if (saveRes.ok) {
+                // Refresh list
+                await fetchProblems(currentProblemId);
+            }
+        } catch (e) {
+            console.error("Toggle pin failed", e);
+        }
+    }
+
+    async function renameProblem(id) {
+        // Strip extension for display if you want, but keep it simple for now
+        const currentName = id.replace(/\.(js|ts)$/, '');
+        const newName = prompt("请输入新文件名 (不含后缀):", currentName);
+        
+        if (!newName || newName === currentName) return;
+        
+        try {
+            const res = await fetch(`/api/problems/${id}`, {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ new_filename: newName })
+            });
+            
+            if (res.ok) {
+                const newMeta = await res.json();
+                // If we renamed the currently open problem, update the ID
+                if (currentProblemId === id) {
+                    currentProblemId = newMeta.id;
+                }
+                await fetchProblems(currentProblemId);
+                logToConsole(['Renamed to:', newMeta.title], 'info');
+            } else {
+                const err = await res.json();
+                alert(`Error: ${err.error}`);
+            }
+        } catch (e) {
+            alert(`Error: ${e.message}`);
+        }
+    }
+
+    async function deleteProblem(id) {
+        if (!confirm(`确定要删除 "${id}" 吗? 此操作无法撤销。`)) return;
+        
+        try {
+            const res = await fetch(`/api/problems/${id}`, {
+                method: 'DELETE'
+            });
+            
+            if (res.ok) {
+                logToConsole(['Deleted:', id], 'warn');
+                if (currentProblemId === id) {
+                    currentProblemId = null;
+                    if (editor) editor.setValue('// Select a problem to start coding...');
+                }
+                await fetchProblems();
+            } else {
+                const err = await res.json();
+                alert(`Error: ${err.error}`);
+            }
+        } catch (e) {
+            alert(`Error: ${e.message}`);
+        }
+    }
 
     async function loadProblem(problem) {
         if (currentProblemId === problem.id && editor.getValue() === problem.content) return;
@@ -408,15 +764,15 @@
         logToConsole(['Loaded:', problem.title], 'info');
     }
 
-    async function createProblem() {
-        const filename = prompt("请输入新题目文件名 (例如: 03_new_problem):", "new_problem");
+    async function createProblem(category = '练习题') {
+        const filename = prompt(`[${category}] 请输入新题目文件名 (例如: 03_new_problem):`, "new_problem");
         if (!filename) return;
 
         try {
             const res = await fetch('/api/problems', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ filename })
+                body: JSON.stringify({ filename, category })
             });
             
             if (res.ok) {