142 lines
3.8 KiB
JavaScript
142 lines
3.8 KiB
JavaScript
import color from "picocolors";
|
|
import { initKeypress, onKey, stopKeypress } from "../keyboard.js";
|
|
import { createStepUI } from "../utils/stepui.js";
|
|
import { frameworkOptions, generateSteps } from "./config.js";
|
|
|
|
function clearScreen() {
|
|
process.stdout.write('\x1Bc');
|
|
}
|
|
|
|
function strWidth(str) {
|
|
let width = 0;
|
|
for (const char of str) {
|
|
width += char.charCodeAt(0) > 127 ? 2 : 1;
|
|
}
|
|
return width;
|
|
}
|
|
|
|
function padEnd(str, width) {
|
|
return str + " ".repeat(Math.max(0, width - strWidth(str)));
|
|
}
|
|
|
|
// 网格选择器
|
|
export async function gridSelect(items, title) {
|
|
let current = 0;
|
|
let resolved = false;
|
|
const termWidth = process.stdout.columns || 80;
|
|
const cols = Math.min(3, items.length);
|
|
const colWidth = 20;
|
|
const rows = Math.ceil(items.length / cols);
|
|
const totalWidth = cols * colWidth;
|
|
const pad = " ".repeat(Math.max(0, Math.floor((termWidth - totalWidth) / 2)));
|
|
|
|
function render() {
|
|
clearScreen();
|
|
console.log("");
|
|
const titlePad = " ".repeat(Math.max(0, Math.floor((termWidth - strWidth(title) - 4) / 2)));
|
|
console.log(titlePad + color.bgMagenta(color.white(` ${title} `)));
|
|
console.log("");
|
|
console.log(pad + color.dim("↑ ↓ ← → 选择 | Enter 确认 | Esc 返回"));
|
|
console.log("\n");
|
|
|
|
for (let row = 0; row < rows; row++) {
|
|
let line = "";
|
|
let descLine = "";
|
|
|
|
for (let col = 0; col < cols; col++) {
|
|
const idx = row * cols + col;
|
|
if (idx < items.length) {
|
|
const item = items[idx];
|
|
const isSelected = idx === current;
|
|
|
|
if (isSelected) {
|
|
line += color.cyan("[" + item.name + "]");
|
|
} else {
|
|
line += " " + item.name + " ";
|
|
}
|
|
line += " ".repeat(colWidth - strWidth(item.name) - 2);
|
|
descLine += padEnd(item.desc || "", colWidth);
|
|
}
|
|
}
|
|
|
|
console.log(pad + line);
|
|
console.log(pad + color.dim(descLine));
|
|
console.log("\n");
|
|
}
|
|
}
|
|
|
|
return new Promise(resolve => {
|
|
initKeypress();
|
|
render();
|
|
|
|
onKey((str, key) => {
|
|
if (!key || resolved) return;
|
|
|
|
const row = Math.floor(current / cols);
|
|
const col = current % cols;
|
|
|
|
switch (key.name) {
|
|
case "up":
|
|
if (row > 0) { current -= cols; render(); }
|
|
break;
|
|
case "down":
|
|
if (row < rows - 1 && current + cols < items.length) { current += cols; render(); }
|
|
break;
|
|
case "left":
|
|
if (col > 0) { current--; render(); }
|
|
break;
|
|
case "right":
|
|
if (col < cols - 1 && current < items.length - 1) { current++; render(); }
|
|
break;
|
|
case "return":
|
|
resolved = true;
|
|
stopKeypress();
|
|
setImmediate(() => resolve({ action: "select", item: items[current] }));
|
|
break;
|
|
case "escape":
|
|
resolved = true;
|
|
stopKeypress();
|
|
setImmediate(() => resolve({ action: "back" }));
|
|
break;
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
// 创建框架+组件配置UI
|
|
export function createScaffoldUI(projectType) {
|
|
return createStepUI({
|
|
title: `${projectType} - 项目配置`,
|
|
getSteps: () => generateSteps(projectType, null),
|
|
onStepChange: (framework) => generateSteps(projectType, framework)
|
|
});
|
|
}
|
|
|
|
// 解析配置结果
|
|
export function formatResults(steps, results) {
|
|
const summary = [];
|
|
|
|
results.forEach((val, i) => {
|
|
if (Array.isArray(val) && val.length > 0) {
|
|
summary.push(`${steps[i].name}: ${val.join(", ")}`);
|
|
} else if (val && val !== "none") {
|
|
summary.push(`${steps[i].name}: ${val}`);
|
|
}
|
|
});
|
|
|
|
return summary.length ? summary : ["未选择任何组件"];
|
|
}
|
|
|
|
// 等待按键
|
|
export async function waitKey(message = "按任意键返回") {
|
|
console.log(color.dim(`\n${message}`));
|
|
|
|
return new Promise(resolve => {
|
|
initKeypress();
|
|
onKey(() => {
|
|
stopKeypress();
|
|
resolve();
|
|
});
|
|
});
|
|
}
|