✨ feat: 初步实现aide decide
This commit is contained in:
313
aide-program/aide/decide/web/app.js
Normal file
313
aide-program/aide/decide/web/app.js
Normal file
@@ -0,0 +1,313 @@
|
||||
const AppState = {
|
||||
task: "",
|
||||
source: "",
|
||||
items: [],
|
||||
decisions: {},
|
||||
notes: {},
|
||||
isSubmitting: false,
|
||||
};
|
||||
|
||||
async function init() {
|
||||
try {
|
||||
const data = await loadItems();
|
||||
AppState.task = data.task || "";
|
||||
AppState.source = data.source || "";
|
||||
AppState.items = Array.isArray(data.items) ? data.items : [];
|
||||
|
||||
renderItems(data);
|
||||
bindEvents();
|
||||
} catch (error) {
|
||||
showError("无法加载待定项数据，请刷新页面重试");
|
||||
}
|
||||
}
|
||||
|
||||
async function loadItems() {
|
||||
const response = await fetch("/api/items");
|
||||
if (!response.ok) {
|
||||
throw new Error("加载失败");
|
||||
}
|
||||
return response.json();
|
||||
}
|
||||
|
||||
function renderItems(data) {
|
||||
const container = document.getElementById("items-container");
|
||||
container.innerHTML = "";
|
||||
|
||||
document.getElementById("task-name").textContent = data.task || "-";
|
||||
document.getElementById("task-source").textContent = data.source || "-";
|
||||
|
||||
data.items.forEach((item) => {
|
||||
container.appendChild(renderItemCard(item));
|
||||
});
|
||||
|
||||
updateProgress();
|
||||
updateSubmitButton();
|
||||
}
|
||||
|
||||
function renderItemCard(item) {
|
||||
const card = document.createElement("article");
|
||||
card.className = "item-card";
|
||||
card.dataset.itemId = String(item.id);
|
||||
|
||||
const header = document.createElement("header");
|
||||
header.className = "item-header";
|
||||
const title = document.createElement("h2");
|
||||
title.className = "item-title";
|
||||
const number = document.createElement("span");
|
||||
number.className = "item-number";
|
||||
number.textContent = `${item.id}.`;
|
||||
const titleText = document.createElement("span");
|
||||
titleText.textContent = item.title || "待定项";
|
||||
title.appendChild(number);
|
||||
title.appendChild(titleText);
|
||||
|
||||
const recommend = document.createElement("span");
|
||||
recommend.className = "recommend-badge";
|
||||
if (item.recommend) {
|
||||
recommend.textContent = `推荐: ${item.recommend}`;
|
||||
} else {
|
||||
recommend.hidden = true;
|
||||
}
|
||||
|
||||
header.appendChild(title);
|
||||
header.appendChild(recommend);
|
||||
card.appendChild(header);
|
||||
|
||||
if (item.context) {
|
||||
const context = document.createElement("div");
|
||||
context.className = "item-context";
|
||||
context.textContent = item.context;
|
||||
card.appendChild(context);
|
||||
}
|
||||
|
||||
if (item.location && item.location.file) {
|
||||
const location = document.createElement("div");
|
||||
location.className = "item-location";
|
||||
location.textContent = `位置: ${item.location.file}:${item.location.start}-${item.location.end}`;
|
||||
card.appendChild(location);
|
||||
}
|
||||
|
||||
const options = renderOptions(item);
|
||||
card.appendChild(options);
|
||||
|
||||
const noteWrap = document.createElement("div");
|
||||
noteWrap.className = "item-note";
|
||||
const noteLabel = document.createElement("label");
|
||||
noteLabel.setAttribute("for", `note-${item.id}`);
|
||||
noteLabel.textContent = "备注（可选）:";
|
||||
const textarea = document.createElement("textarea");
|
||||
textarea.id = `note-${item.id}`;
|
||||
textarea.placeholder = "添加补充说明...";
|
||||
noteWrap.appendChild(noteLabel);
|
||||
noteWrap.appendChild(textarea);
|
||||
card.appendChild(noteWrap);
|
||||
|
||||
return card;
|
||||
}
|
||||
|
||||
function renderOptions(item) {
|
||||
const optionsWrap = document.createElement("div");
|
||||
optionsWrap.className = "options-list";
|
||||
const current = AppState.decisions[item.id];
|
||||
|
||||
item.options.forEach((option) => {
|
||||
const label = document.createElement("label");
|
||||
label.className = "option-item";
|
||||
label.dataset.value = option.value;
|
||||
label.dataset.recommended = option.value === item.recommend ? "true" : "false";
|
||||
|
||||
const input = document.createElement("input");
|
||||
input.type = "radio";
|
||||
input.name = `item-${item.id}`;
|
||||
input.value = option.value;
|
||||
if (current === option.value) {
|
||||
input.checked = true;
|
||||
label.classList.add("selected");
|
||||
}
|
||||
|
||||
const content = document.createElement("div");
|
||||
content.className = "option-content";
|
||||
|
||||
const header = document.createElement("div");
|
||||
header.className = "option-header";
|
||||
const optLabel = document.createElement("span");
|
||||
optLabel.className = "option-label";
|
||||
optLabel.textContent = option.label || option.value;
|
||||
header.appendChild(optLabel);
|
||||
|
||||
if (option.score !== undefined && option.score !== null) {
|
||||
const score = document.createElement("span");
|
||||
score.className = "option-score";
|
||||
score.textContent = `评分: ${option.score}`;
|
||||
header.appendChild(score);
|
||||
}
|
||||
|
||||
content.appendChild(header);
|
||||
|
||||
const hasPros = Array.isArray(option.pros) && option.pros.length > 0;
|
||||
const hasCons = Array.isArray(option.cons) && option.cons.length > 0;
|
||||
if (hasPros || hasCons) {
|
||||
const details = document.createElement("div");
|
||||
details.className = "option-details";
|
||||
if (hasPros) {
|
||||
const pros = document.createElement("div");
|
||||
pros.className = "option-pros";
|
||||
pros.innerHTML = `<strong>优点:</strong> ${option.pros.join("，")}`;
|
||||
details.appendChild(pros);
|
||||
}
|
||||
if (hasCons) {
|
||||
const cons = document.createElement("div");
|
||||
cons.className = "option-cons";
|
||||
cons.innerHTML = `<strong>缺点:</strong> ${option.cons.join("，")}`;
|
||||
details.appendChild(cons);
|
||||
}
|
||||
content.appendChild(details);
|
||||
}
|
||||
|
||||
label.appendChild(input);
|
||||
label.appendChild(content);
|
||||
optionsWrap.appendChild(label);
|
||||
});
|
||||
|
||||
return optionsWrap;
|
||||
}
|
||||
|
||||
function bindEvents() {
|
||||
const container = document.getElementById("items-container");
|
||||
container.addEventListener("change", (event) => {
|
||||
const target = event.target;
|
||||
if (target && target.type === "radio") {
|
||||
const itemId = parseInt(target.name.replace("item-", ""), 10);
|
||||
handleOptionSelect(itemId, target.value);
|
||||
}
|
||||
});
|
||||
|
||||
container.addEventListener("input", (event) => {
|
||||
const target = event.target;
|
||||
if (target && target.tagName === "TEXTAREA") {
|
||||
const itemId = parseInt(target.id.replace("note-", ""), 10);
|
||||
handleNoteInput(itemId, target.value);
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById("submit-btn").addEventListener("click", submitDecisions);
|
||||
}
|
||||
|
||||
function handleOptionSelect(itemId, value) {
|
||||
AppState.decisions[itemId] = value;
|
||||
const card = document.querySelector(`.item-card[data-item-id="${itemId}"]`);
|
||||
if (card) {
|
||||
const options = card.querySelectorAll(".option-item");
|
||||
options.forEach((opt) => {
|
||||
if (opt.dataset.value === value) {
|
||||
opt.classList.add("selected");
|
||||
} else {
|
||||
opt.classList.remove("selected");
|
||||
}
|
||||
});
|
||||
if (AppState.decisions[itemId]) {
|
||||
card.classList.add("completed");
|
||||
}
|
||||
}
|
||||
updateProgress();
|
||||
updateSubmitButton();
|
||||
}
|
||||
|
||||
function handleNoteInput(itemId, note) {
|
||||
AppState.notes[itemId] = note;
|
||||
}
|
||||
|
||||
function updateProgress() {
|
||||
const total = AppState.items.length;
|
||||
const completed = Object.keys(AppState.decisions).length;
|
||||
const text = document.getElementById("progress-text");
|
||||
text.textContent = `已完成 ${completed}/${total} 项`;
|
||||
}
|
||||
|
||||
function canSubmit() {
|
||||
return (
|
||||
AppState.items.length > 0 &&
|
||||
Object.keys(AppState.decisions).length === AppState.items.length &&
|
||||
!AppState.isSubmitting
|
||||
);
|
||||
}
|
||||
|
||||
function updateSubmitButton() {
|
||||
const button = document.getElementById("submit-btn");
|
||||
const allowed = canSubmit();
|
||||
button.disabled = !allowed;
|
||||
button.setAttribute("aria-disabled", allowed ? "false" : "true");
|
||||
button.textContent = AppState.isSubmitting ? "提交中..." : "提交决策";
|
||||
}
|
||||
|
||||
function buildDecisionData() {
|
||||
const decisions = AppState.items.map((item) => {
|
||||
const note = AppState.notes[item.id];
|
||||
const trimmed = typeof note === "string" ? note.trim() : "";
|
||||
const payload = { id: item.id, chosen: AppState.decisions[item.id] };
|
||||
if (trimmed) {
|
||||
payload.note = trimmed;
|
||||
}
|
||||
return payload;
|
||||
});
|
||||
return { decisions };
|
||||
}
|
||||
|
||||
async function submitDecisions() {
|
||||
if (!canSubmit()) {
|
||||
showError("请先完成所有待定项的选择");
|
||||
return;
|
||||
}
|
||||
AppState.isSubmitting = true;
|
||||
updateSubmitButton();
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/submit", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(buildDecisionData()),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
let detail = "提交失败";
|
||||
try {
|
||||
const error = await response.json();
|
||||
detail = error.detail || detail;
|
||||
} catch (e) {
|
||||
// ignore
|
||||
}
|
||||
throw new Error(detail);
|
||||
}
|
||||
|
||||
showSuccess();
|
||||
} catch (error) {
|
||||
AppState.isSubmitting = false;
|
||||
updateSubmitButton();
|
||||
showError(`提交失败: ${error.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
function showSuccess() {
|
||||
const overlay = document.getElementById("success-overlay");
|
||||
overlay.hidden = false;
|
||||
AppState.isSubmitting = false;
|
||||
const button = document.getElementById("submit-btn");
|
||||
button.disabled = true;
|
||||
button.setAttribute("aria-disabled", "true");
|
||||
}
|
||||
|
||||
let errorTimer = null;
|
||||
function showError(message) {
|
||||
const toast = document.getElementById("error-toast");
|
||||
const text = document.getElementById("error-message");
|
||||
text.textContent = message;
|
||||
toast.hidden = false;
|
||||
if (errorTimer) {
|
||||
clearTimeout(errorTimer);
|
||||
}
|
||||
errorTimer = setTimeout(() => {
|
||||
toast.hidden = true;
|
||||
}, 4000);
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", init);
|
||||
Reference in New Issue
Block a user