1
import http from "http";
2

3
const server = http.createServer((req, res) => {
4
  // req: IncomingMessage — 请求的方法、URL、headers
5
  // res: ServerResponse — 用于写入响应
6

7
  res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
8
  res.end("<h1>Hello</h1>");
9
});
10

11
server.listen(3456, () => {
12
  console.log("Server running at http://localhost:3456");
13
});

1
客户端                      服务器
2
   │                          │
3
   │──── GET / ──────────────►│  req.method = "GET"
4
   │                          │  req.url = "/"
5
   │◄─── 200 OK + HTML ──────│  res.writeHead(200, ...)
6
   │                          │  res.end(html)
7
   │                          │
8
   │──── POST /api/publish ──►│  req.method = "POST"
9
   │  Body: {"title":"..."}   │  req.url = "/api/publish"
10
   │                          │  // 解析 JSON body
11
   │◄─── NDJSON stream ──────│  res.write(json + "\n")
12
   │◄─── NDJSON stream ──────│  res.write(json + "\n")
13
   │◄─── 完成 ───────────────│  res.end()

1
// req.url 只包含路径部分，不含协议和域名
2
// 例如: "/api/posts?limit=10"
3

4
const url = new URL(req.url, `http://localhost:${PORT}`);
5
console.log(url.pathname);  // "/api/posts"
6
console.log(url.searchParams.get("limit"));  // "10"

1
function parseJSONBody(req) {
2
  return new Promise((resolve, reject) => {
3
    let body = "";
4
    req.on("data", (chunk) => (body += chunk));   // 每次收到一块数据
5
    req.on("end", () => {                          // 所有数据收完
6
      try {
7
        resolve(JSON.parse(body));
8
      } catch {
9
        reject(new Error("Invalid JSON"));
10
      }
11
    });
12
  });
13
}

1
{"type":"log","message":"🔨 构建中..."}
2
{"type":"log","message":"✓ built in 10.39s"}
3
{"type":"phase","message":"📤 Git 推送..."}
4
{"type":"log","message":"git push origin master"}
5
{"type":"complete","message":"🎉 完成！","url":"https://fzy.it.com"}

1
document.querySelectorAll('.sidebar-tab').forEach(tab => {
2
  tab.addEventListener('click', () => {
3
    // 移除所有 active
4
    document.querySelectorAll('.sidebar-tab').forEach(t => t.classList.remove('active'));
5
    document.querySelectorAll('.panel').forEach(p => p.classList.remove('active'));
6

7
    // 激活当前
8
    tab.classList.add('active');
9
    document.getElementById('panel-' + tab.dataset.tab).classList.add('active');
10
  });
11
});

1
const dropZone = document.getElementById('drop-zone');
2

3
dropZone.addEventListener('dragover', (e) => {
4
  e.preventDefault();  // 必须！否则浏览器会尝试打开文件
5
  dropZone.classList.add('drag-over');
6
});
7

8
dropZone.addEventListener('drop', (e) => {
9
  e.preventDefault();
10
  dropZone.classList.remove('drag-over');
11
  const file = e.dataTransfer.files[0];  // File 对象
12
  // file.path 是文件的本地路径（Electron 中常用）
13
  // 在普通浏览器中需要通过 file.name 来引用
14
});

1
function showToast(message, type = 'success') {
2
  const container = document.getElementById('toast-container');
3
  const toast = document.createElement('div');
4
  toast.className = `toast toast-${type}`;
5
  toast.textContent = message;
6
  container.appendChild(toast);
7

8
  // 3 秒后自动消失
9
  setTimeout(() => {
10
    toast.style.opacity = '0';
11
    setTimeout(() => toast.remove(), 300);
12
  }, 3000);
13
}

1
:root {
2
  --bg: #0f1117;           /* 页面背景 */
3
  --bg-card: #1a1d27;       /* 卡片/面板背景 */
4
  --bg-input: #252836;      /* 输入框背景 */
5
  --border: #2e3140;        /* 边框 */
6
  --text: #e4e6ee;          /* 主文字 */
7
  --text-dim: #8b8fa7;      /* 次要文字 */
8
  --accent: #6c8aff;        /* 强调色 */
9
  --green: #4ade80;         /* 成功 */
10
  --red: #f87171;           /* 错误 */
11
  --radius: 10px;           /* 圆角 */
12
}

1
body
2
├── .header (固定高度 56px)
3
└── .main (flex: 1, 填满剩余空间)
4
    ├── .sidebar (固定宽度 220px)
5
    └── .content (flex: 1)
6
        ├── .panel (flex: 1, 可滚动)
7
        └── .log-panel (固定最大高度)

1
@media (max-width: 768px) {
2
  .sidebar { display: none; }  /* 小屏隐藏侧边栏 */
3
  .form-grid { grid-template-columns: 1fr; }  /* 表单单列 */
4
}