chore: initial commit
This commit is contained in:
zhaoyilun
352
web/app.js
Normal file
352
web/app.js
Normal file
@@ -0,0 +1,352 @@
|
||||
const form = document.getElementById("converterForm");
|
||||
const jsCode = document.getElementById("jsCode");
|
||||
const scriptNotes = document.getElementById("scriptNotes");
|
||||
const scriptFile = document.getElementById("scriptFile");
|
||||
const selectedFile = document.getElementById("selectedFile");
|
||||
const skillRoot = document.getElementById("skillRoot");
|
||||
const aiStatus = document.getElementById("aiStatus");
|
||||
const aiServerCfg = document.getElementById("aiServerCfg");
|
||||
const aiEffectiveCfg = document.getElementById("aiEffectiveCfg");
|
||||
const useAi = document.getElementById("useAi");
|
||||
const statusBox = document.getElementById("status");
|
||||
const output = document.getElementById("output");
|
||||
const resultList = document.getElementById("resultList");
|
||||
const clearBtn = document.getElementById("clear");
|
||||
|
||||
const API_CONFIG_KEY = "sgclaw.converter.apiConfig";
|
||||
let serverCfg = null;
|
||||
|
||||
function setStatus(text, ok = true) {
|
||||
statusBox.textContent = text;
|
||||
statusBox.style.color = ok ? "#20a76b" : "#c62828";
|
||||
}
|
||||
|
||||
function fileToText(file) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => resolve(String(e.target.result || ""));
|
||||
reader.onerror = () => reject(new Error("读取文件失败"));
|
||||
reader.readAsText(file);
|
||||
});
|
||||
}
|
||||
|
||||
function readApiConfigFromStorage() {
|
||||
try {
|
||||
const raw = localStorage.getItem(API_CONFIG_KEY);
|
||||
if (!raw) return null;
|
||||
return JSON.parse(raw);
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function trimText(v) {
|
||||
if (typeof v === "number" && Number.isFinite(v)) {
|
||||
return String(v);
|
||||
}
|
||||
return typeof v === "string" ? v.trim() : "";
|
||||
}
|
||||
|
||||
function parseTimeout(v) {
|
||||
const n = Number.parseInt(trimText(v), 10);
|
||||
return Number.isFinite(n) && n > 0 ? n : "";
|
||||
}
|
||||
|
||||
function maskApiKey(v) {
|
||||
const value = trimText(v);
|
||||
if (!value) {
|
||||
return "未配置";
|
||||
}
|
||||
if (value.length <= 6) {
|
||||
return `${value.slice(0, 1)}***${value.slice(-1)}`;
|
||||
}
|
||||
return `${value.slice(0, 3)}***${value.slice(-3)}`;
|
||||
}
|
||||
|
||||
function resolveAiConfig() {
|
||||
const localCfg = readApiConfigFromStorage() || {};
|
||||
const effective = {
|
||||
base_url: trimText(localCfg.base_url) || trimText(serverCfg?.base_url),
|
||||
model: trimText(localCfg.model) || trimText(serverCfg?.model),
|
||||
timeout: parseTimeout(trimText(localCfg.timeout || serverCfg?.timeout)),
|
||||
api_key: trimText(localCfg.api_key),
|
||||
api_key_masked: localCfg.api_key ? maskApiKey(localCfg.api_key) : trimText(serverCfg?.api_key_masked),
|
||||
key_source: localCfg.api_key ? "local" : "server_env",
|
||||
};
|
||||
return { local: localCfg, effective };
|
||||
}
|
||||
|
||||
function formatCfgLine(cfg) {
|
||||
const timeout = cfg.timeout ? `${cfg.timeout}s` : "未设置";
|
||||
return `base_url=${cfg.base_url || "未设置"} | model=${cfg.model || "未设置"} | timeout=${timeout} | api_key=${cfg.api_key_masked || "未配置"}`;
|
||||
}
|
||||
|
||||
function updateAiStatusSummary() {
|
||||
const resolved = resolveAiConfig();
|
||||
aiEffectiveCfg.textContent = `实际生效: ${formatCfgLine(resolved.effective)}（${resolved.effective.key_source}）`;
|
||||
}
|
||||
|
||||
function formatAiState(result, requestedUseAi) {
|
||||
if (!requestedUseAi) {
|
||||
return "已关闭";
|
||||
}
|
||||
if (result.ai_used) {
|
||||
return "已使用模型";
|
||||
}
|
||||
if (result.ai_attempted) {
|
||||
return `已回退（${result.ai_fallback_reason || "模型调用失败"}）`;
|
||||
}
|
||||
return `未调用模型（${result.ai_fallback_reason || "AI配置不可用"}）`;
|
||||
}
|
||||
|
||||
function formatElapsed(ms) {
|
||||
if (!Number.isFinite(ms) || ms < 0) {
|
||||
return "-";
|
||||
}
|
||||
if (ms < 1000) {
|
||||
return `${Math.round(ms)} ms`;
|
||||
}
|
||||
return `${(ms / 1000).toFixed(2)} s`;
|
||||
}
|
||||
|
||||
function formatSourceName(fileName, index, total, isManual, note) {
|
||||
const tag = note ? ` (${note})` : "";
|
||||
if (!isManual) {
|
||||
return `${fileName}${tag}`;
|
||||
}
|
||||
return total > 1 ? `manual-${index + 1}${tag}` : `manual${tag}`;
|
||||
}
|
||||
|
||||
scriptFile.addEventListener("change", () => {
|
||||
const files = scriptFile.files || [];
|
||||
if (!files.length) {
|
||||
selectedFile.textContent = "未选择文件";
|
||||
return;
|
||||
}
|
||||
selectedFile.textContent = Array.from(files).map((f) => f.name).join("，");
|
||||
});
|
||||
|
||||
function renderResults(rows) {
|
||||
if (!rows.length) {
|
||||
resultList.innerHTML = "";
|
||||
return;
|
||||
}
|
||||
|
||||
resultList.innerHTML = rows
|
||||
.map((item) => {
|
||||
const statusClass = item.ok ? "result-ok" : "result-err";
|
||||
const openBtn = item.ok && item.target_dir
|
||||
? `<button type="button" class="open-dir-btn" data-target="${encodeURIComponent(item.target_dir)}">打开目录</button>`
|
||||
: "";
|
||||
return `
|
||||
<div class="result-item ${statusClass}">
|
||||
<div class="result-head">
|
||||
<strong>${item.source}</strong>
|
||||
${openBtn}
|
||||
</div>
|
||||
<div class="result-meta">技能名：${item.skill_name || "-"}</div>
|
||||
<div class="result-meta">目录：${item.target_dir || "-"}</div>
|
||||
<div class="result-meta">耗时：${formatElapsed(item.elapsed_ms)}</div>
|
||||
<div class="result-meta">实际AI配置：${item.ai_config_line || "-"}</div>
|
||||
<div class="result-meta">AI状态：${item.ai_state || "-"}</div>
|
||||
${item.ok ? "" : `<div class="result-meta err">${item.error || "处理失败"}</div>`}
|
||||
</div>
|
||||
`;
|
||||
})
|
||||
.join("");
|
||||
}
|
||||
|
||||
resultList.addEventListener("click", async (e) => {
|
||||
const targetBtn = e.target.closest(".open-dir-btn");
|
||||
if (!targetBtn) {
|
||||
return;
|
||||
}
|
||||
|
||||
const target = decodeURIComponent(targetBtn.dataset.target || "");
|
||||
if (!target) {
|
||||
setStatus("没有可打开的目录", false);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const resp = await fetch(`/api/open-dir?path=${encodeURIComponent(target)}`);
|
||||
const result = await resp.json().catch(() => ({}));
|
||||
if (!resp.ok) {
|
||||
setStatus(`打开目录失败：${result.error || "server error"}`, false);
|
||||
return;
|
||||
}
|
||||
setStatus(`已打开：${result.target_dir}`);
|
||||
} catch (err) {
|
||||
setStatus(`打开目录失败：${err.message}`, false);
|
||||
}
|
||||
});
|
||||
|
||||
form.addEventListener("submit", async (e) => {
|
||||
e.preventDefault();
|
||||
setStatus("正在生成...");
|
||||
const totalStart = performance.now();
|
||||
|
||||
const files = Array.from(scriptFile.files || []);
|
||||
const manualCode = jsCode.value.trim();
|
||||
const note = scriptNotes.value.trim();
|
||||
|
||||
const tasks = [];
|
||||
|
||||
for (const f of files) {
|
||||
tasks.push({
|
||||
source: f.name,
|
||||
isManual: false,
|
||||
name: `${f.name.replace(/\.[^/.]+$/, "")}`,
|
||||
promise: fileToText(f).then((code) => ({ code, error: null })).catch((err) => ({ code: "", error: err.message || "读取文件失败" })),
|
||||
});
|
||||
}
|
||||
|
||||
if (manualCode) {
|
||||
tasks.push({
|
||||
source: "manual-script",
|
||||
isManual: true,
|
||||
name: "manual-script",
|
||||
promise: Promise.resolve({ code: manualCode, error: null }),
|
||||
});
|
||||
}
|
||||
|
||||
if (!tasks.length) {
|
||||
setStatus("请上传脚本文件或粘贴脚本内容", false);
|
||||
return;
|
||||
}
|
||||
|
||||
const reads = await Promise.all(tasks.map((t) => t.promise));
|
||||
const { effective } = resolveAiConfig();
|
||||
const aiConfig = {
|
||||
base_url: effective.base_url,
|
||||
model: effective.model,
|
||||
timeout: effective.timeout || undefined,
|
||||
api_key: effective.api_key,
|
||||
};
|
||||
|
||||
const jobs = tasks.map((task, idx) => {
|
||||
const payload = reads[idx] || {};
|
||||
const code = payload.code || "";
|
||||
const readError = payload.error;
|
||||
|
||||
if (readError || !code.trim()) {
|
||||
const sourceName = formatSourceName(task.source, idx, tasks.length, task.isManual, note);
|
||||
return Promise.resolve({
|
||||
ok: false,
|
||||
source: sourceName,
|
||||
skill_name: task.name,
|
||||
target_dir: "",
|
||||
elapsed_ms: 0,
|
||||
ai_config_line: formatCfgLine(effective),
|
||||
ai_state: useAi.checked ? "未执行（输入读取失败）" : "已关闭",
|
||||
error: readError || "脚本内容为空",
|
||||
});
|
||||
}
|
||||
|
||||
const displaySource = formatSourceName(task.source, idx, tasks.length, task.isManual, note);
|
||||
|
||||
return (async () => {
|
||||
const itemStart = performance.now();
|
||||
const req = {
|
||||
js_script_code: code,
|
||||
write: true,
|
||||
use_ai: useAi.checked,
|
||||
skill_root: skillRoot.value,
|
||||
skill_name: task.name,
|
||||
skill_use_case: note,
|
||||
ai_config: aiConfig,
|
||||
};
|
||||
|
||||
try {
|
||||
const resp = await fetch("/api/convert", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json; charset=utf-8" },
|
||||
body: JSON.stringify(req),
|
||||
});
|
||||
const result = await resp.json();
|
||||
if (!resp.ok) {
|
||||
return {
|
||||
ok: false,
|
||||
source: displaySource,
|
||||
skill_name: task.name,
|
||||
target_dir: "",
|
||||
elapsed_ms: performance.now() - itemStart,
|
||||
ai_config_line: formatCfgLine(effective),
|
||||
ai_state: useAi.checked ? "请求失败" : "已关闭",
|
||||
error: result.error || "server error",
|
||||
};
|
||||
}
|
||||
return {
|
||||
ok: true,
|
||||
source: displaySource,
|
||||
skill_name: result.skill_name,
|
||||
target_dir: result.target_dir,
|
||||
elapsed_ms: performance.now() - itemStart,
|
||||
ai_config_line: formatCfgLine(effective),
|
||||
ai_state: formatAiState(result, useAi.checked),
|
||||
raw: result,
|
||||
};
|
||||
} catch (err) {
|
||||
return {
|
||||
ok: false,
|
||||
source: displaySource,
|
||||
skill_name: task.name,
|
||||
target_dir: "",
|
||||
elapsed_ms: performance.now() - itemStart,
|
||||
ai_config_line: formatCfgLine(effective),
|
||||
ai_state: useAi.checked ? "请求失败" : "已关闭",
|
||||
error: err.message || "请求失败",
|
||||
};
|
||||
}
|
||||
})();
|
||||
});
|
||||
|
||||
const results = await Promise.all(jobs);
|
||||
const success = results.filter((r) => r.ok).length;
|
||||
const fail = results.length - success;
|
||||
const totalElapsed = performance.now() - totalStart;
|
||||
setStatus(`完成：成功 ${success} / ${results.length}，失败 ${fail}，总耗时 ${formatElapsed(totalElapsed)}`, fail === 0);
|
||||
|
||||
renderResults(results);
|
||||
output.textContent = JSON.stringify(results, null, 2);
|
||||
});
|
||||
|
||||
clearBtn.addEventListener("click", () => {
|
||||
jsCode.value = "";
|
||||
scriptNotes.value = "";
|
||||
resultList.innerHTML = "";
|
||||
output.textContent = "";
|
||||
setStatus("");
|
||||
scriptFile.value = "";
|
||||
selectedFile.textContent = "未选择文件";
|
||||
});
|
||||
|
||||
async function loadConfig() {
|
||||
try {
|
||||
const resp = await fetch("/api/config");
|
||||
const cfg = await resp.json();
|
||||
serverCfg = cfg;
|
||||
aiStatus.textContent = `AI: ${cfg.ai_enabled ? "已启用" : "未启用"}`;
|
||||
aiServerCfg.textContent = `服务端: ${formatCfgLine(cfg)}`;
|
||||
updateAiStatusSummary();
|
||||
|
||||
const root = cfg.skill_root || "skills";
|
||||
const hasOption = Array.from(skillRoot.options).some((o) => o.value === root);
|
||||
if (!hasOption) {
|
||||
const option = document.createElement("option");
|
||||
option.value = root;
|
||||
option.textContent = root;
|
||||
skillRoot.appendChild(option);
|
||||
}
|
||||
skillRoot.value = root;
|
||||
} catch {
|
||||
serverCfg = {};
|
||||
aiStatus.textContent = "AI: 未读取到配置";
|
||||
aiServerCfg.textContent = "服务端: 读取失败";
|
||||
updateAiStatusSummary();
|
||||
skillRoot.value = "skills";
|
||||
}
|
||||
}
|
||||
|
||||
loadConfig();
|
||||
setInterval(updateAiStatusSummary, 2000);
|
||||
Reference in New Issue
Block a user