代码、编辑和打印网站

.dockerignore

@@ -0,0 +1,5 @@
+__pycache__
+*.pyc
+.git
+.DS_Store
+venv

Dockerfile

@@ -0,0 +1,26 @@
+FROM python:3.9-slim
+
+# Set up a new user named "user" with user ID 1000
+RUN useradd -m -u 1000 user
+
+# Switch to the "user" user
+USER user
+
+# Set home to the user's home directory
+ENV HOME=/home/user \
+	PATH=/home/user/.local/bin:$PATH
+
+# Set the working directory to the user's home directory
+WORKDIR $HOME/app
+
+# Copy the current directory contents into the container at $HOME/app setting the owner to the user
+COPY --chown=user . $HOME/app
+
+# Install any needed packages specified in requirements.txt
+RUN pip install --no-cache-dir --upgrade -r requirements.txt
+
+# Expose the port that the app runs on
+EXPOSE 7860
+
+# Run the application
+CMD ["python", "app.py"]

README.md

@@ -0,0 +1,54 @@
+# Code Interview Showcase
+
+这是一个用于积累和练习手写代码题（笔试题）的 Web 应用。
+
+## 特性
+
+*   **极简流程**：只需在 `problems/` 目录下新建 `.js` 文件，即可自动显示在网页上。
+*   **三栏布局**：左侧题目列表，中间 Monaco 代码编辑器，右侧实时控制台输出。
+*   **即时运行**：支持直接在浏览器中运行 JavaScript 代码并查看结果。
+*   **暗色主题**：美观的 Dark Mode 界面。
+
+## 如何添加题目
+
+1.  在 `problems/` 目录下创建一个新的 JavaScript 文件（例如 `03_my_problem.js`）。
+2.  （可选）在文件开头使用注释添加 `@title` 来定义显示的题目名称。如果未定义，将显示文件名。
+3.  编写代码和测试用例（使用 `console.log` 输出结果）。
+
+**示例文件内容：**
+
+```javascript
+/**
+ * @title 3. 我的新题目
+ * 描述：这是一个测试题目。
+ */
+
+function solve() {
+    return "Hello World";
+}
+
+console.log(solve());
+```
+
+保存文件后，刷新网页即可看到新题目。
+
+## 本地运行
+
+1.  安装依赖：
+    ```bash
+    pip install -r requirements.txt
+    ```
+2.  运行应用：
+    ```bash
+    python app.py
+    ```
+3.  打开浏览器访问：`http://localhost:7860`
+
+## 部署到 Hugging Face Spaces
+
+本项目已配置 Dockerfile，可直接部署到 Hugging Face Spaces。
+
+1.  在 Hugging Face 创建一个新的 Space。
+2.  选择 SDK 为 **Docker**。
+3.  上传本项目所有文件。
+4.  等待构建完成即可。

app.py

@@ -0,0 +1,110 @@
+import os
+import re
+from flask import Flask, jsonify, send_from_directory, render_template, request
+
+app = Flask(__name__)
+PROBLEMS_DIR = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'problems')
+
+def parse_problem_metadata(filename):
+    filepath = os.path.join(PROBLEMS_DIR, filename)
+    with open(filepath, 'r', encoding='utf-8') as f:
+        content = f.read()
+    
+    # 默认标题为文件名
+    title = filename
+    
+    # 尝试解析 @title
+    # 匹配 /** ... @title 标题 ... */ 或 // @title 标题
+    title_match = re.search(r'@title\s+(.+)', content)
+    if title_match:
+        title = title_match.group(1).strip()
+    
+    return {
+        'id': filename,
+        'title': title,
+        'content': content
+    }
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@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()
+    
+    problems = []
+    for f in files:
+        try:
+            problems.append(parse_problem_metadata(f))
+        except Exception as e:
+            print(f"Error parsing {f}: {e}")
+            
+    return jsonify(problems)
+
+@app.route('/api/problems', methods=['POST'])
+def create_problem():
+    data = request.json
+    filename = data.get('filename')
+    
+    if not filename:
+        return jsonify({'error': 'Filename is required'}), 400
+    
+    if not (filename.endswith('.js') or filename.endswith('.ts')):
+        filename += '.js'
+        
+    filepath = os.path.join(PROBLEMS_DIR, filename)
+    
+    if os.path.exists(filepath):
+        return jsonify({'error': 'File already exists'}), 409
+        
+    # 默认模板
+    content = f"""/**
+ * @title {filename}
+ * @description 在此处添加题目描述
+ */
+
+function solve() {{
+    // TODO: Implement solution
+}}
+
+console.log(solve());
+"""
+    
+    try:
+        with open(filepath, 'w', encoding='utf-8') as f:
+            f.write(content)
+        return jsonify(parse_problem_metadata(filename)), 201
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/api/problems/<path:filename>', methods=['GET'])
+def get_problem_content(filename):
+    return send_from_directory(PROBLEMS_DIR, filename)
+
+@app.route('/api/problems/<path:filename>', methods=['PUT'])
+def update_problem(filename):
+    filepath = os.path.join(PROBLEMS_DIR, 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
+        
+    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
+
+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)

problems/01_two_sum.js

@@ -0,0 +1,26 @@
+/**
+ * @title 1. 两数之和 (Two Sum)
+ * 
+ * 题目描述：
+ * 给定一个整数数组 nums 和一个目标值 target，
+ * 请你在该数组中找出和为目标值的那 两个 整数，并返回他们的数组下标。
+ */
+
+function twoSum(nums, target) {
+    const map = new Map();
+    for (let i = 0; i < nums.length; i++) {
+        const complement = target - nums[i];
+        if (map.has(complement)) {
+            return [map.get(complement), i];
+        }
+        map.set(nums[i], i);
+    }
+    return [];
+}
+
+// 测试用例
+console.log("测试用例 1: nums = [2, 7, 11, 15], target = 9");
+console.log("结果:", twoSum([2, 7, 11, 15], 9)); // 预期 [0, 1]
+
+console.log("测试用例 2: nums = [3, 2, 4], target = 6");
+console.log("结果:", twoSum([3, 2, 4], 6)); // 预期 [1, 2]

problems/02_fibonacci.js

@@ -0,0 +1,24 @@
+/**
+ * @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

problems/map.js

@@ -0,0 +1,7 @@
+/**
+ * @title map.js 
+ * @description 在此处添加题目描述
+ */
+
+let a = [1,2,3].map(n => n*2)
+console.log(a)

requirements.txt

@@ -0,0 +1 @@
+flask

templates/index.html

@@ -0,0 +1,541 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Code Interview Showcase</title>
+    <!-- Split.js for Resizable Layout -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/split.js/1.6.0/split.min.js"></script>
+    <!-- JSON Formatter for Console -->
+    <script src="https://cdn.jsdelivr.net/npm/json-formatter-js@2.3.4/dist/json-formatter.umd.min.js"></script>
+    <style>
+        :root {
+            --bg-color: #1e1e1e;
+            --sidebar-bg: #252526;
+            --sidebar-hover: #2a2d2e;
+            --sidebar-active: #37373d;
+            --border-color: #333;
+            --text-color: #cccccc;
+            --accent-color: #007acc;
+            --console-bg: #1e1e1e;
+            --console-text: #e0e0e0;
+        }
+
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+            background-color: var(--bg-color);
+            color: var(--text-color);
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+
+        header {
+            height: 50px;
+            background-color: #333333;
+            display: flex;
+            align-items: center;
+            padding: 0 20px;
+            border-bottom: 1px solid var(--border-color);
+            justify-content: space-between;
+            flex-shrink: 0; /* Prevent shrinking */
+        }
+
+        h1 {
+            font-size: 18px;
+            font-weight: 500;
+            color: #fff;
+        }
+
+        .run-btn {
+            background-color: #0e639c;
+            color: white;
+            border: none;
+            padding: 6px 16px;
+            border-radius: 2px;
+            cursor: pointer;
+            font-size: 14px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+
+        .run-btn:hover {
+            background-color: #1177bb;
+        }
+
+        /* Split.js Layout */
+        .main-container {
+            display: flex;
+            flex: 1;
+            overflow: hidden;
+            height: calc(100vh - 50px);
+        }
+
+        /* Gutter Styles for Split.js */
+        .gutter {
+            background-color: var(--bg-color);
+            background-repeat: no-repeat;
+            background-position: 50%;
+            cursor: col-resize;
+        }
+        .gutter:hover {
+            background-color: var(--accent-color);
+        }
+
+        /* Left Sidebar: Problem List */
+        .sidebar {
+            background-color: var(--sidebar-bg);
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+            /* width is handled by Split.js */
+        }
+
+        .sidebar-header {
+            padding: 10px 15px;
+            font-size: 12px;
+            text-transform: uppercase;
+            font-weight: 600;
+            color: #888;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        .add-btn {
+            background: none;
+            border: none;
+            color: #888;
+            cursor: pointer;
+            font-size: 18px;
+            line-height: 1;
+        }
+        .add-btn:hover { color: #fff; }
+
+        .problem-list {
+            flex: 1;
+            overflow-y: auto;
+            list-style: none;
+        }
+
+        .problem-item {
+            padding: 8px 15px;
+            cursor: pointer;
+            font-size: 14px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            border-left: 3px solid transparent;
+        }
+
+        .problem-item:hover {
+            background-color: var(--sidebar-hover);
+        }
+
+        .problem-item.active {
+            background-color: var(--sidebar-active);
+            border-left-color: var(--accent-color);
+            color: #fff;
+        }
+
+        /* Center: Editor */
+        .editor-container {
+            display: flex;
+            flex-direction: column;
+            position: relative;
+            overflow: hidden;
+        }
+
+        #monaco-editor {
+            width: 100%;
+            height: 100%;
+        }
+
+        /* Right: Console Output */
+        .output-panel {
+            background-color: var(--console-bg);
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+
+        .output-header {
+            padding: 10px 15px;
+            background-color: #252526;
+            border-bottom: 1px solid var(--border-color);
+            font-size: 12px;
+            text-transform: uppercase;
+            font-weight: 600;
+            display: flex;
+            justify-content: space-between;
+        }
+
+        .clear-btn {
+            background: none;
+            border: none;
+            color: #888;
+            cursor: pointer;
+            font-size: 12px;
+        }
+        .clear-btn:hover { color: #fff; }
+
+        #console-output {
+            flex: 1;
+            padding: 10px;
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+            font-size: 13px;
+            overflow-y: auto;
+            /* white-space: pre-wrap; Removed to allow JSONFormatter to handle layout */
+            color: var(--console-text);
+        }
+
+        .log-line {
+            margin-bottom: 4px;
+            border-bottom: 1px solid #2a2a2a;
+            padding-bottom: 2px;
+            display: flex; /* For alignment */
+            align-items: flex-start;
+        }
+        .log-error { color: #f48771; background-color: rgba(255, 0, 0, 0.1); }
+        .log-warn { color: #cca700; background-color: rgba(255, 255, 0, 0.1); }
+        .log-info { color: #e0e0e0; }
+        
+        /* JSON Formatter Tweaks for Dark Mode */
+        .json-formatter-row {
+            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        }
+        .json-formatter-row .json-formatter-key {
+            color: #9cdcfe !important;
+        }
+        .json-formatter-row .json-formatter-string {
+            color: #ce9178 !important;
+        }
+        .json-formatter-row .json-formatter-number {
+            color: #b5cea8 !important;
+        }
+        .json-formatter-row .json-formatter-boolean {
+            color: #569cd6 !important;
+        }
+        .json-formatter-row .json-formatter-null {
+            color: #569cd6 !important;
+        }
+        
+        .log-content {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 8px;
+            width: 100%;
+        }
+
+        /* Loading Overlay */
+        .loading {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100%;
+            color: #888;
+        }
+    </style>
+</head>
+<body>
+
+<header>
+    <h1>Code Interview Showcase</h1>
+    <button class="run-btn" onclick="runCode()">
+        <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+            <path d="M4 2.5L13.5 8L4 13.5V2.5Z"/>
+        </svg>
+        运行代码 (Run)
+    </button>
+</header>
+
+<div class="main-container">
+    <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 -->
+            <div class="loading">Loading...</div>
+        </ul>
+    </div>
+
+    <div id="split-1" class="editor-container">
+        <div id="monaco-editor"></div>
+    </div>
+
+    <div id="split-2" class="output-panel">
+        <div class="output-header">
+            <span>Console</span>
+            <button class="clear-btn" onclick="clearConsole()">Clear</button>
+        </div>
+        <div id="console-output">
+            <div class="log-info">
+                <span class="log-content">Click 'Run' to see output...</span>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Monaco Editor Loader -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.45.0/min/vs/loader.min.js"></script>
+<script>
+    let editor;
+    let currentProblemId = null;
+    let autoSaveTimer = null;
+    let isInternalUpdate = false;
+
+    // Initialize Split.js
+    Split(['#split-0', '#split-1', '#split-2'], {
+        sizes: [20, 50, 30], // Initial percentages
+        minSize: [150, 200, 200],
+        gutterSize: 6,
+        cursor: 'col-resize',
+        onDragEnd: function() {
+            if (editor) editor.layout(); // Resize editor when layout changes
+        }
+    });
+
+    require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.45.0/min/vs' }});
+
+    require(['vs/editor/editor.main'], function() {
+        // Enhance JS/TS IntelliSense
+        monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
+            target: monaco.languages.typescript.ScriptTarget.ES2020,
+            allowNonTsExtensions: true,
+            moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
+            module: monaco.languages.typescript.ModuleKind.CommonJS,
+            noEmit: true,
+            // Enable type checking for better suggestions
+            checkJs: true 
+        });
+
+        // Add some basic lib definitions if needed (optional)
+        // monaco.languages.typescript.javascriptDefaults.addExtraLib(...)
+
+        editor = monaco.editor.create(document.getElementById('monaco-editor'), {
+            value: '// Select a problem to start coding...',
+            language: 'javascript',
+            theme: 'vs-dark',
+            automaticLayout: true, // Auto resize with container
+            minimap: { enabled: false },
+            fontSize: 14,
+            scrollBeyondLastLine: false,
+            // IntelliSense features
+            suggest: {
+                showWords: false // Prefer intelligent suggestions over text matches
+            },
+            quickSuggestions: true,
+            parameterHints: { enabled: true }
+        });
+
+        // Initialize
+        fetchProblems();
+
+        // Auto Save Listener
+        editor.onDidChangeModelContent(() => {
+            if (currentProblemId && !isInternalUpdate) {
+                clearTimeout(autoSaveTimer);
+                autoSaveTimer = setTimeout(saveProblem, 1000);
+            }
+        });
+    });
+
+    async function fetchProblems(selectId = null) {
+        try {
+            const res = await fetch('/api/problems');
+            const problems = await res.json();
+            renderProblemList(problems);
+            
+            if (problems.length > 0) {
+                const target = selectId 
+                    ? problems.find(p => p.id === selectId) 
+                    : (!currentProblemId ? problems[0] : problems.find(p => p.id === currentProblemId));
+                
+                if (target) loadProblem(target);
+                else if (problems.length > 0) loadProblem(problems[0]);
+            }
+        } catch (e) {
+            console.error("Failed to fetch problems:", e);
+        }
+    }
+
+    function renderProblemList(problems) {
+        const listEl = document.getElementById('problem-list');
+        listEl.innerHTML = '';
+
+        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);
+        });
+        
+        if (currentProblemId) {
+             const activeEl = listEl.querySelector(`.problem-item[data-id="${currentProblemId}"]`);
+             if (activeEl) activeEl.classList.add('active');
+        }
+    }
+
+    async function loadProblem(problem) {
+        if (currentProblemId === problem.id && editor.getValue() === problem.content) return;
+
+        currentProblemId = problem.id;
+        
+        document.querySelectorAll('.problem-item').forEach(el => {
+            el.classList.toggle('active', el.dataset.id === problem.id);
+        });
+
+        if (editor) {
+            isInternalUpdate = true;
+            editor.setValue(problem.content);
+            isInternalUpdate = false;
+        }
+        
+        clearConsole();
+        logToConsole(['Loaded:', problem.title], 'info');
+    }
+
+    async function createProblem() {
+        const filename = prompt("请输入新题目文件名 (例如: 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 })
+            });
+            
+            if (res.ok) {
+                const newProblem = await res.json();
+                await fetchProblems(newProblem.id);
+                logToConsole(['Created:', newProblem.title], 'info');
+            } else {
+                const err = await res.json();
+                alert(`Error: ${err.error}`);
+            }
+        } catch (e) {
+            alert(`Error: ${e.message}`);
+        }
+    }
+
+    async function saveProblem() {
+        if (!currentProblemId || !editor) return;
+
+        const content = editor.getValue();
+        
+        try {
+            const res = await fetch(`/api/problems/${currentProblemId}`, {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ content })
+            });
+
+            if (res.ok) {
+                const updatedMeta = await res.json();
+                const listItem = document.querySelector(`.problem-item[data-id="${currentProblemId}"]`);
+                if (listItem && listItem.textContent !== updatedMeta.title) {
+                    listItem.textContent = updatedMeta.title;
+                }
+            }
+        } catch (e) {
+            console.error("Save failed:", e);
+            logToConsole(["Auto-save failed"], 'error');
+        }
+    }
+
+    function runCode() {
+        if (!editor) return;
+        const code = editor.getValue();
+        
+        clearConsole();
+        logToConsole(["Running..."], 'info');
+
+        const originalLog = console.log;
+        const originalError = console.error;
+        const originalWarn = console.warn;
+
+        try {
+            console.log = (...args) => {
+                logToConsole(args, 'info');
+            };
+            console.error = (...args) => {
+                logToConsole(args, 'error');
+            };
+            console.warn = (...args) => {
+                logToConsole(args, 'warn');
+            };
+
+            // Using new Function is safer than eval for scope isolation, but we want quick results
+            // Note: Objects printed will be live references if we don't clone them, 
+            // but for a console that's usually desired or acceptable.
+            // If async is needed:
+            const wrappedCode = `(async () => { \n${code}\n })();`;
+            eval(code); 
+
+        } catch (e) {
+            logToConsole([e], 'error');
+        } finally {
+            console.log = originalLog;
+            console.error = originalError;
+            console.warn = originalWarn;
+        }
+    }
+
+    // New Log Function supporting Objects
+    function logToConsole(args, type = 'info') {
+        const outputEl = document.getElementById('console-output');
+        const lineDiv = document.createElement('div');
+        lineDiv.className = `log-line log-${type}`;
+        
+        const contentDiv = document.createElement('div');
+        contentDiv.className = 'log-content';
+
+        args.forEach(arg => {
+            if (typeof arg === 'string' || typeof arg === 'number' || typeof arg === 'boolean' || arg === null || arg === undefined) {
+                const span = document.createElement('span');
+                span.textContent = String(arg);
+                span.style.marginRight = '5px';
+                contentDiv.appendChild(span);
+            } else {
+                // Use JSONFormatter for objects/arrays
+                try {
+                    const formatter = new JSONFormatter(arg, 1, { // 1 = open depth
+                        theme: 'dark', 
+                        hoverPreviewEnabled: true
+                    });
+                    contentDiv.appendChild(formatter.render());
+                } catch (e) {
+                    const span = document.createElement('span');
+                    span.textContent = String(arg);
+                    contentDiv.appendChild(span);
+                }
+            }
+        });
+
+        lineDiv.appendChild(contentDiv);
+        outputEl.appendChild(lineDiv);
+        outputEl.scrollTop = outputEl.scrollHeight;
+    }
+
+    function clearConsole() {
+        const outputEl = document.getElementById('console-output');
+        outputEl.innerHTML = '';
+    }
+</script>
+
+</body>
+</html>