wangzhan/XinagMuKanBan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化版本

Browse Source
This commit is contained in:
LL
2025-11-18 14:28:07 +08:00
commit a3e86ac783
14 changed files with 2285 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

689
assets/js/app.js Normal file
View File

@@ -0,0 +1,689 @@
// ===== 从 index.php 迁移的脚本（中文状态版） =====
const Statuses = ["待做","进行","完成","异常"]; // 四种状态
let Projects = []; // 全量项目数据
let CurrentProjectId = null;
const ShowStep = 15; // 每列初始显示数量
let ShowLimits = { '待做': ShowStep, '进行': ShowStep, '完成': ShowStep, '异常': ShowStep };
let Filters = { status: '全部', search: '', month: '' }; // month: YYYY-MM
// 获取项目的年月键（优先 created_at，其次 updated_at）
function projectMonthKey(p) {
return monthKeyFromDateStr(p?.created_at || p?.updated_at || '') || null;
}
const api = async (url, options = {}) => {
const res = await fetch(url, options);
const ct = res.headers.get('Content-Type') || '';
if (ct.includes('application/json')) {
try {
const data = await res.json();
if (data && data.need_login) {
// 统一跳回登录页
location.href = 'index.php';
throw new Error('未登录');
}
return data;
} catch (e) {
// JSON 解析异常时直接返回空
return null;
}
}
return res.text();
};
// 退出登录
async function logout() {
try {
const data = await api('api.php?action=logout', { method: 'POST' });
// 清理本地标记
try { localStorage.removeItem('auth_ok'); } catch (e) {}
// 返回登录页
location.href = 'index.php';
} catch (e) {
// 即便异常也尝试跳转
location.href = 'index.php';
}
}
async function loadProjects() {
const data = await api('api.php?action=list_projects');
Projects = Array.isArray(data?.projects) ? data.projects : [];
// 每次加载数据时重置显示数量（避免越来越多）
ShowLimits = { '待做': ShowStep, '进行': ShowStep, '完成': ShowStep, '异常': ShowStep };
renderBoard();
renderMonthlyChart();
}
function renderBoard() {
const board = document.getElementById('statusBoard');
board.innerHTML = '';
const statusesToRender = Filters.status === '全部' ? Statuses : [Filters.status];
const q = (Filters.search || '').trim().toLowerCase();
statusesToRender.forEach(st => {
const items = Projects.filter(p => p.status === st);
let filtered = items.filter(p => {
if (!q) return true;
return String(p.name || '').toLowerCase().includes(q);
});
if (Filters.month) {
filtered = filtered.filter(p => projectMonthKey(p) === Filters.month);
}
const col = document.createElement('div');
col.className = 'column';
col.dataset.status = st; // 用于拖拽目标识别
col.innerHTML = `<h3>${st} <span class="count">(${filtered.length})</span></h3>`;
// 列拖拽目标事件
col.addEventListener('dragover', (e) => { e.preventDefault(); col.classList.add('drag-over'); });
col.addEventListener('dragleave', () => { col.classList.remove('drag-over'); });
col.addEventListener('drop', (e) => {
e.preventDefault(); col.classList.remove('drag-over');
const pid = e.dataTransfer.getData('text/plain');
if (pid) { updateProject(pid, { status: st }); }
});
const limit = ShowLimits[st] || ShowStep;
filtered.slice(0, limit).forEach(p => {
const div = document.createElement('div');
div.className = 'project';
div.draggable = true;
div.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', p.id);
e.dataTransfer.effectAllowed = 'move';
div.classList.add('dragging');
});
div.addEventListener('dragend', () => { div.classList.remove('dragging'); });
const title = document.createElement('div');
title.className = 'title';
title.textContent = p.name;
title.style.cursor = 'pointer';
title.onclick = () => openProject(p.id);
const actions = document.createElement('div');
actions.className = 'actions';
const sel = document.createElement('select');
sel.className = 'select';
Statuses.forEach(s => {
const opt = document.createElement('option');
opt.value = s; opt.textContent = s; if (s === p.status) opt.selected = true; sel.appendChild(opt);
});
sel.onchange = () => updateProject(p.id, { status: sel.value });
const editBtn = document.createElement('button'); editBtn.className = 'btn'; editBtn.textContent = '编辑'; editBtn.onclick = () => openProject(p.id);
const delBtn = document.createElement('button'); delBtn.className = 'btn danger'; delBtn.textContent = '删除'; delBtn.onclick = () => deleteProject(p.id);
actions.appendChild(sel); actions.appendChild(editBtn); actions.appendChild(delBtn);
div.appendChild(title);
div.appendChild(actions);
col.appendChild(div);
});
if (filtered.length > limit) {
const more = document.createElement('button');
more.className = 'btn';
more.textContent = `显示更多... (${filtered.length - limit})`;
more.onclick = () => { ShowLimits[st] = limit + ShowStep; renderBoard(); };
col.appendChild(more);
}
board.appendChild(col);
});
}
async function createProject() {
const nameInput = document.getElementById('newProjectName');
const name = (nameInput.value || '').trim();
if (!name) { alert('请输入项目名称'); return; }
const resp = await api('api.php?action=create_project', {
method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name })
});
if (resp && resp.ok) { nameInput.value=''; await loadProjects(); } else { alert(resp?.message || '创建失败'); }
}
async function updateProject(id, updates) {
const resp = await api('api.php?action=update_project', {
method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id, ...updates })
});
if (resp && resp.ok) { await loadProjects(); } else { alert(resp?.message || '更新失败'); }
}
async function deleteProject(id) {
if (!confirm('确认删除该项目及其笔记吗？')) return;
const resp = await api('api.php?action=delete_project', {
method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id })
});
if (resp && resp.ok) { await loadProjects(); } else { alert(resp?.message || '删除失败'); }
}
async function openProject(id) {
// 改为跳转到独立详情页，不再使用悬浮弹窗
location.href = 'project.php?id=' + encodeURIComponent(id);
}
function closeProjectModal() { document.getElementById('projectModalMask').style.display = 'none'; CurrentProjectId = null; }
function renderNotes(notes) {
const list = document.getElementById('notesList');
list.innerHTML = '';
notes.forEach(n => {
const div = document.createElement('div'); div.className = 'note';
// 预览在上方：评论气泡样式
const preview = document.createElement('div'); preview.className = 'note-preview note-bubble';
const ta = document.createElement('textarea'); ta.className = 'input'; ta.style.width = '100%'; ta.style.minHeight = '80px'; ta.value = n.content || '';
preview.innerHTML = noteTextToHtml(ta.value || '');
enhancePreview(preview);
const meta = document.createElement('div'); meta.className = 'meta'; meta.textContent = `创建: ${n.created_at || ''} 更新: ${n.updated_at || ''}`;
const bar = document.createElement('div'); bar.style.display = 'flex'; bar.style.gap='8px'; bar.style.marginTop='6px';
const save = document.createElement('button'); save.className = 'btn'; save.textContent = '保存修改'; save.onclick = () => updateNote(n.id, ta.value);
const del = document.createElement('button'); del.className = 'btn danger'; del.textContent = '删除'; del.onclick = () => deleteNote(n.id);
const addImgBtn = document.createElement('button'); addImgBtn.className = 'btn'; addImgBtn.textContent = '添加图片';
const fileInput = document.createElement('input'); fileInput.type = 'file'; fileInput.accept = 'image/*'; fileInput.className = 'hidden';
addImgBtn.onclick = () => fileInput.click();
fileInput.onchange = async () => {
const f = fileInput.files && fileInput.files[0];
if (!f) return;
const up = await uploadFile(f);
if (up && up.ok && up.url) {
const md = `\n![图片](${up.url})\n`;
insertAtCursor(ta, md);
preview.innerHTML = noteTextToHtml(ta.value || '');
enhancePreview(preview);
fileInput.value = '';
} else {
alert(up?.message || '图片上传失败');
}
};
ta.addEventListener('input', () => { preview.innerHTML = noteTextToHtml(ta.value || ''); enhancePreview(preview); });
bar.appendChild(save); bar.appendChild(del); bar.appendChild(addImgBtn); bar.appendChild(fileInput);
// 排列顺序：预览气泡 -> 元信息 -> 编辑框 -> 操作条
div.appendChild(preview);
div.appendChild(meta);
div.appendChild(ta);
div.appendChild(bar);
list.appendChild(div);
// 允许直接粘贴或拖拽图片/文件到笔记文本框
ta.addEventListener('paste', async (e) => {
const items = e.clipboardData?.items || [];
const files = [];
for (const it of items) {
if (it.kind === 'file') { const f = it.getAsFile(); if (f) files.push(f); }
}
if (files.length) {
e.preventDefault();
await handleFilesInsert(ta, files);
preview.innerHTML = noteTextToHtml(ta.value || '');
enhancePreview(preview);
}
});
ta.addEventListener('dragover', (e) => { e.preventDefault(); });
ta.addEventListener('drop', async (e) => {
e.preventDefault();
const files = Array.from(e.dataTransfer?.files || []);
if (files.length) {
await handleFilesInsert(ta, files);
preview.innerHTML = noteTextToHtml(ta.value || '');
enhancePreview(preview);
}
});
});
}
async function applyProjectMeta() {
if (!CurrentProjectId) return;
const name = document.getElementById('renameProjectInput').value.trim();
const status = document.getElementById('statusSelect').value;
const resp = await api('api.php?action=update_project', {
method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id: CurrentProjectId, name, status })
});
const msg = document.getElementById('modalMsg');
if (resp && resp.ok) { msg.textContent = '项目已保存'; await loadProjects(); openProject(CurrentProjectId); } else { msg.textContent = resp?.message || '保存失败'; }
}
async function deleteCurrentProject() { if (CurrentProjectId) { await deleteProject(CurrentProjectId); closeProjectModal(); } }
async function addNote() {
if (!CurrentProjectId) return;
const content = document.getElementById('newNoteInput').value.trim();
if (!content) { alert('请输入笔记内容'); return; }
const resp = await api('api.php?action=add_note', {
method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ project_id: CurrentProjectId, content })
});
if (resp && resp.ok) { document.getElementById('newNoteInput').value=''; await loadProjects(); openProject(CurrentProjectId); } else { alert(resp?.message || '添加失败'); }
}
async function updateNote(note_id, content) {
if (!CurrentProjectId) return;
const resp = await api('api.php?action=update_note', {
method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ project_id: CurrentProjectId, note_id, content })
});
if (resp && resp.ok) { await loadProjects(); openProject(CurrentProjectId); } else { alert(resp?.message || '保存失败'); }
}
async function deleteNote(note_id) {
if (!CurrentProjectId) return;
if (!confirm('确认删除该笔记吗？')) return;
const resp = await api('api.php?action=delete_note', {
method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ project_id: CurrentProjectId, note_id })
});
if (resp && resp.ok) { await loadProjects(); openProject(CurrentProjectId); } else { alert(resp?.message || '删除失败'); }
}
async function exportProjectHtml() {
if (!CurrentProjectId) return;
const resp = await api('api.php?action=export_project_html&id='+encodeURIComponent(CurrentProjectId));
if (resp && resp.ok && resp.url) {
window.open(resp.url, '_blank');
// 导出后刷新“导出管理”列表
await loadExports();
} else {
alert(resp?.message || '导出失败');
}
}
// 主动清理未使用的上传文件（后台扫描 data/uploads 与所有笔记引用）
async function cleanupUnusedUploads() {
const resp = await api('api.php?action=cleanup_unused_uploads');
if (resp && resp.ok) {
const d = resp.cleanup?.deleted ?? 0;
alert(`清理完成：删除未引用文件 ${d} 个`);
await loadProjects(); if (CurrentProjectId) openProject(CurrentProjectId);
} else {
alert(resp?.message || '清理失败');
}
}
// 文件上传（图片）
async function uploadFile(file) {
const fd = new FormData(); fd.append('file', file);
return api('api.php?action=upload_file', { method: 'POST', body: fd });
}
// 将笔记文本转换为HTML（支持 Markdown 图片：![alt](url)）
function noteTextToHtml(text) {
if (!text) return '';
const imgReg = /!\[([^\]]*)\]\(([^\)]+)\)/u;
const linkReg = /\[([^\]]+)\]\(([^\)]+)\)/u; // 链接（图片将由 imgReg 优先匹配）
let out = '';
let pos = 0;
while (true) {
const imgM = imgReg.exec(text.slice(pos));
const linkM = linkReg.exec(text.slice(pos));
const imgPos = imgM ? imgM.index : -1;
const linkPos = linkM ? linkM.index : -1;
if (imgPos < 0 && linkPos < 0) break;
const nextRel = (imgPos >=0 && (linkPos < 0 || imgPos <= linkPos)) ? imgPos : linkPos;
out += escapeHtml(text.slice(pos, pos + nextRel)).replace(/\n/g, '<br>');
if (nextRel === imgPos) {
const alt = escapeHtml(imgM[1] || '');
const url = escapeHtml(imgM[2] || '');
out += `<img src="${url}" alt="${alt}">`;
pos += imgPos + imgM[0].length;
} else {
const label = escapeHtml(linkM[1] || '');
const urlRaw = linkM[2] || '';
const url = escapeHtml(urlRaw);
if (isImageUrl(urlRaw)) {
out += `<img src="${url}" alt="${label}">`;
} else {
out += `<a href="${url}" target="_blank" rel="noopener noreferrer">${label}</a>`;
}
pos += linkPos + linkM[0].length;
}
}
out += escapeHtml(text.slice(pos)).replace(/\n/g, '<br>');
return out;
}
function escapeHtml(s) { return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }
function insertAtCursor(ta, text) {
const start = ta.selectionStart ?? ta.value.length; const end = ta.selectionEnd ?? start;
ta.value = ta.value.slice(0, start) + text + ta.value.slice(end);
ta.focus();
ta.selectionStart = ta.selectionEnd = start + text.length;
ta.dispatchEvent(new Event('input'));
}
// 预览增强：点击图片在新窗口查看原图
function enhancePreview(previewEl) {
previewEl.querySelectorAll('img').forEach(img => {
img.addEventListener('click', () => { openImageLightbox(img.src, img.alt || ''); });
});
}
function isImageFile(file) {
const t = (file?.type || '').toLowerCase();
if (t.startsWith('image/')) return true;
const name = file?.name || '';
return /\.(png|jpg|jpeg|gif|webp)$/i.test(name);
}
async function handleFilesInsert(ta, files) {
for (const f of files) {
const up = await uploadFile(f);
if (up && up.ok && up.url) {
const fname = (up.name || f.name || '附件');
const url = up.url;
const md = isImageFile(f) ? `\n![${fname}](${url})\n` : `\n[${fname}](${url})\n`;
insertAtCursor(ta, md);
} else {
alert(up?.message || `上传失败：${f.name}`);
}
}
}
function isImageUrl(url) {
return /\.(png|jpg|jpeg|gif|webp)(\?.*)?$/i.test(url) || /^data:image\//i.test(url);
}
// ====== 图片浮窗（Lightbox） ======
let _imgLightboxEl = null;
function ensureImageLightbox() {
if (_imgLightboxEl) return _imgLightboxEl;
const mask = document.createElement('div');
mask.className = 'img-lightbox-mask';
const content = document.createElement('div');
content.className = 'img-lightbox-content';
const img = document.createElement('img');
const closeBtn = document.createElement('button');
closeBtn.className = 'img-lightbox-close'; closeBtn.textContent = '×';
content.appendChild(img); content.appendChild(closeBtn);
mask.appendChild(content);
document.body.appendChild(mask);
// 交互
const close = () => { mask.style.display = 'none'; document.body.style.overflow = ''; document.removeEventListener('keydown', escHandler); };
const escHandler = (e) => { if (e.key === 'Escape') close(); };
mask.addEventListener('click', close);
content.addEventListener('click', (e) => e.stopPropagation());
closeBtn.addEventListener('click', close);
_imgLightboxEl = mask;
return _imgLightboxEl;
}
function openImageLightbox(src, alt) {
const el = ensureImageLightbox();
const img = el.querySelector('img');
img.src = src; img.alt = alt || '';
el.style.display = 'flex';
document.body.style.overflow = 'hidden';
const escHandler = (e) => { if (e.key === 'Escape') { el.style.display='none'; document.body.style.overflow=''; document.removeEventListener('keydown', escHandler); } };
document.addEventListener('keydown', escHandler);
}
// ====== 月份曲线图 ======
let chartInstance = null;
function getLast12MonthsLabels() {
const labels = [];
const now = new Date();
for (let i = 11; i >= 0; i--) {
const d = new Date(now.getFullYear(), now.getMonth() - i, 1);
const y = d.getFullYear();
const m = (d.getMonth() + 1).toString().padStart(2, '0');
labels.push(`${y}-${m}`);
}
return labels;
}
function monthKeyFromDateStr(str) {
// 输入格式：YYYY-MM-DD HH:mm:ss
if (!str || typeof str !== 'string' || str.length < 7) return null;
const m = str.slice(0,7);
// 基础校验
if (!/^\d{4}-\d{2}$/.test(m)) return null;
return m;
}
function computeMonthlySeries(labels) {
const colorMap = { '待做': '#3b82f6', '进行': '#f59e0b', '完成': '#10b981', '异常': '#ef4444' };
const series = {};
Statuses.forEach(st => { series[st] = labels.map(_ => 0); });
Projects.forEach(p => {
// 优先使用创建月份；没有则使用更新时间；都没有则归入当前月
const mk = monthKeyFromDateStr(p.created_at || p.updated_at || '') || labels[labels.length - 1];
if (!mk) return; // 略过缺少时间的项目
const idx = labels.indexOf(mk);
if (idx === -1) return; // 不在最近12个月
const st = p.status || '待做';
if (!series[st]) series[st] = labels.map(_ => 0);
series[st][idx] += 1;
});
const datasets = Statuses.map(st => ({
label: st,
data: series[st],
tension: 0.25,
borderColor: colorMap[st],
backgroundColor: colorMap[st],
pointRadius: 3,
borderWidth: 2,
fill: false,
}));
return datasets;
}
function drawSimpleChart(canvas, labels, datasets) {
const dpr = window.devicePixelRatio || 1;
const cw = canvas.clientWidth || 600;
const ch = canvas.clientHeight || 140;
canvas.width = Math.floor(cw * dpr);
canvas.height = Math.floor(ch * dpr);
const ctx = canvas.getContext('2d');
ctx.scale(dpr, dpr);
const margin = { left: 36, right: 12, top: 12, bottom: 28 };
const plotW = cw - margin.left - margin.right;
const plotH = ch - margin.top - margin.bottom;
// 背景
ctx.fillStyle = '#fff';
ctx.fillRect(0, 0, cw, ch);
// 计算最大值
let maxY = 0;
datasets.forEach(ds => ds.data.forEach(v => { if (v > maxY) maxY = v; }));
if (maxY === 0) maxY = 5;
const stepX = labels.length > 1 ? plotW / (labels.length - 1) : plotW;
const scaleY = plotH / maxY;
// 坐标轴
ctx.strokeStyle = '#e5e7eb';
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(margin.left, margin.top);
ctx.lineTo(margin.left, margin.top + plotH);
ctx.lineTo(margin.left + plotW, margin.top + plotH);
ctx.stroke();
// y 轴刻度
ctx.fillStyle = '#6b7280';
ctx.font = '12px Arial';
for (let i = 0; i <= 4; i++) {
const yVal = Math.round((maxY * i) / 4);
const y = margin.top + plotH - yVal * scaleY;
ctx.fillText(String(yVal), 6, y + 4);
ctx.strokeStyle = '#f3f4f6';
ctx.beginPath();
ctx.moveTo(margin.left, y);
ctx.lineTo(margin.left + plotW, y);
ctx.stroke();
}
// x 轴标签（每隔2个月显示一次）
for (let i = 0; i < labels.length; i += Math.ceil(labels.length / 6)) {
const x = margin.left + i * stepX;
ctx.fillStyle = '#6b7280';
ctx.save();
ctx.translate(x, margin.top + plotH + 14);
ctx.rotate(-Math.PI / 8);
ctx.fillText(labels[i], 0, 0);
ctx.restore();
}
// 折线
datasets.forEach(ds => {
ctx.strokeStyle = ds.borderColor;
ctx.lineWidth = 2;
ctx.beginPath();
for (let i = 0; i < ds.data.length; i++) {
const x = margin.left + i * stepX;
const y = margin.top + plotH - ds.data[i] * scaleY;
if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
}
ctx.stroke();
// 点
ctx.fillStyle = ds.borderColor;
for (let i = 0; i < ds.data.length; i++) {
const x = margin.left + i * stepX;
const y = margin.top + plotH - ds.data[i] * scaleY;
ctx.beginPath();
ctx.arc(x, y, 3, 0, Math.PI * 2);
ctx.fill();
}
});
// 简易图例
let lx = margin.left; let ly = margin.top - 2;
datasets.forEach(ds => {
ctx.fillStyle = ds.borderColor;
ctx.fillRect(lx, ly, 10, 10);
ctx.fillStyle = '#374151';
ctx.fillText(ds.label, lx + 14, ly + 10);
lx += 60;
});
}
function renderMonthlyChart() {
const labels = getLast12MonthsLabels();
const datasets = computeMonthlySeries(labels);
const canvas = document.getElementById('monthlyChart');
const msg = document.getElementById('chartMsg');
if (window.Chart) {
const ctx = canvas.getContext('2d');
if (chartInstance) { chartInstance.destroy(); }
chartInstance = new Chart(ctx, {
type: 'line',
data: { labels, datasets },
options: {
responsive: true,
maintainAspectRatio: false, // 父容器固定高度，避免在Flex布局下无限增高
plugins: {
legend: { position: 'bottom' },
tooltip: { mode: 'index', intersect: false }
},
interaction: { mode: 'nearest', axis: 'x', intersect: false },
scales: {
y: { beginAtZero: true, ticks: { precision:0 } },
x: { grid: { display: false } }
}
}
});
msg.textContent = '';
} else {
// 无法加载外部CDN时，使用内置简易绘制
msg.textContent = '图表库未加载（可能网络限制或被拦截），已切换为内置简易曲线图。';
drawSimpleChart(canvas, labels, datasets);
}
}
// 初次加载
loadProjects();
// 对外暴露（给内联按钮用）
window.createProject = createProject;
window.updateProject = updateProject;
window.deleteProject = deleteProject;
window.openProject = openProject;
window.closeProjectModal = closeProjectModal;
window.applyProjectMeta = applyProjectMeta;
window.deleteCurrentProject = deleteCurrentProject;
window.addNote = addNote;
window.updateNote = updateNote;
window.deleteNote = deleteNote;
window.exportProjectHtml = exportProjectHtml;
window.cleanupUnusedUploads = cleanupUnusedUploads;
// 绑定筛选与搜索（在脚本加载后执行一次）
document.addEventListener('DOMContentLoaded', () => {
const sel = document.getElementById('statusFilterSelect');
if (sel) sel.addEventListener('change', () => { Filters.status = sel.value || '全部'; renderBoard(); });
const input = document.getElementById('projectSearchInput');
if (input) input.addEventListener('input', () => { Filters.search = input.value || ''; renderBoard(); });
const monthInput = document.getElementById('monthFilterInput');
if (monthInput) monthInput.addEventListener('change', () => { Filters.month = monthInput.value || ''; renderBoard(); });
const clearBtn = document.getElementById('monthFilterClearBtn');
if (clearBtn) clearBtn.addEventListener('click', () => { Filters.month=''; if (monthInput) monthInput.value=''; renderBoard(); });
// 新增笔记条中的“添加图片”支持
const newNoteBtn = document.getElementById('newNoteAddImageBtn');
const newNoteFile = document.getElementById('newNoteImageInput');
const newNoteInput = document.getElementById('newNoteInput');
if (newNoteBtn && newNoteFile && newNoteInput) {
newNoteBtn.addEventListener('click', () => newNoteFile.click());
newNoteFile.addEventListener('change', async () => {
const f = newNoteFile.files && newNoteFile.files[0];
if (!f) return;
const up = await uploadFile(f);
if (up && up.ok && up.url) {
const md = isImageFile(f) ? `\n![${up.name || f.name || '图片'}](${up.url})\n` : `\n[${up.name || f.name || '附件'}](${up.url})\n`;
newNoteInput.value = (newNoteInput.value || '') + md;
newNoteFile.value = '';
} else {
alert(up?.message || '图片上传失败');
}
});
// 允许粘贴/拖拽到新增笔记输入框
newNoteInput.addEventListener('paste', async (e) => {
const items = e.clipboardData?.items || [];
const files = [];
for (const it of items) { if (it.kind === 'file') { const f = it.getAsFile(); if (f) files.push(f); } }
if (files.length) {
e.preventDefault();
await handleFilesInsert(newNoteInput, files);
}
});
newNoteInput.addEventListener('dragover', (e) => { e.preventDefault(); });
newNoteInput.addEventListener('drop', async (e) => {
e.preventDefault();
const files = Array.from(e.dataTransfer?.files || []);
if (files.length) { await handleFilesInsert(newNoteInput, files); }
});
}
});
// ====== 导出管理 ======
let ExportFilesCache = [];
let ExportsFilters = { search: '', month: '' };
async function loadExports() {
const resp = await api('api.php?action=list_exports');
ExportFilesCache = Array.isArray(resp?.files) ? resp.files : [];
renderExports(ExportFilesCache);
}
function renderExports(files) {
const box = document.getElementById('exportsList');
if (!box) return;
// 过滤
const q = (ExportsFilters.search || '').trim().toLowerCase();
const month = ExportsFilters.month || '';
let filtered = files.slice();
if (q) filtered = filtered.filter(f => String(f.name || '').toLowerCase().includes(q));
if (month) filtered = filtered.filter(f => monthKeyFromDateStr(f.mtime || '') === month);
// 数量统计
const countEl = document.getElementById('exportsCount');
if (countEl) countEl.textContent = `共 ${filtered.length} 项${month ? ` · 月份：${month}` : ''}${q ? ` · 关键词：${q}` : ''}`;
if (!filtered.length) { box.innerHTML = '<div class="muted">暂无匹配的导出文件</div>'; return; }
box.innerHTML = '';
filtered.forEach(f => {
const row = document.createElement('div');
row.className = 'export-item';
const info = document.createElement('div');
info.className = 'export-info';
const sizeKB = Math.round((f.size || 0) / 1024);
info.textContent = `${f.name} · ${f.mtime} · ${sizeKB} KB`;
const acts = document.createElement('div'); acts.className = 'export-actions';
const openBtn = document.createElement('button'); openBtn.className = 'btn'; openBtn.textContent = '打开'; openBtn.onclick = () => window.open(f.url, '_blank');
const shareBtn = document.createElement('button'); shareBtn.className = 'btn'; shareBtn.textContent = '分享';
shareBtn.onclick = async () => {
const abs = new URL(f.url, window.location.href).href;
try { await navigator.clipboard.writeText(abs); alert('已复制链接到剪贴板:\n' + abs); } catch(e) { prompt('复制失败，请手动复制：', abs); }
};
const delBtn = document.createElement('button'); delBtn.className = 'btn danger'; delBtn.textContent = '删除';
delBtn.onclick = async () => {
if (!confirm(`确认删除导出文件：${f.name}？`)) return;
const r = await api('api.php?action=delete_export', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: f.name }) });
if (r && r.ok) { await loadExports(); } else { alert(r?.message || '删除失败'); }
};
acts.appendChild(openBtn); acts.appendChild(shareBtn); acts.appendChild(delBtn);
row.appendChild(info); row.appendChild(acts);
box.appendChild(row);
});
}
// 初始加载导出列表
document.addEventListener('DOMContentLoaded', () => {
// 初次加载
loadExports();
// 绑定筛选控件
const searchInput = document.getElementById('exportsSearchInput');
if (searchInput) searchInput.addEventListener('input', () => { ExportsFilters.search = searchInput.value || ''; renderExports(ExportFilesCache); });
const monthInput = document.getElementById('exportsMonthInput');
if (monthInput) monthInput.addEventListener('change', () => { ExportsFilters.month = monthInput.value || ''; renderExports(ExportFilesCache); });
const clearBtn = document.getElementById('exportsMonthClearBtn');
if (clearBtn) clearBtn.addEventListener('click', () => { ExportsFilters.month=''; if (monthInput) monthInput.value=''; renderExports(ExportFilesCache); });
});

456
assets/js/project.js Normal file
View File

@@ -0,0 +1,456 @@
// 项目详情页脚本（不使用悬浮弹窗）
const api = async (url, options = {}) => {
const res = await fetch(url, options);
const ct = res.headers.get('Content-Type') || '';
if (ct.includes('application/json')) {
try {
const data = await res.json();
if (data && data.need_login) {
location.href = 'index.php';
throw new Error('未登录');
}
return data;
} catch (e) { return null; }
}
return res.text();
};
let CurrentProjectId = null;
let CurrentProject = null;
function escapeHtml(s) { return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }
function isImageUrl(url){ return /\.(png|jpg|jpeg|gif|webp)(\?.*)?$/i.test(url) || /^data:image\//i.test(url); }
// 将笔记文本转换为HTML（支持 Markdown 图片：![alt](url)）
function noteTextToHtml(text) {
if (!text) return '';
const imgReg = /!\[([^\]]*)\]\(([^\)]+)\)/u;
const linkReg = /\[([^\]]+)\]\(([^\)]+)\)/u; // 链接（图片将由 imgReg 优先匹配）
let out = '';
let pos = 0;
while (true) {
const imgM = imgReg.exec(text.slice(pos));
const linkM = linkReg.exec(text.slice(pos));
const imgPos = imgM ? imgM.index : -1;
const linkPos = linkM ? linkM.index : -1;
if (imgPos < 0 && linkPos < 0) break;
const nextRel = (imgPos >=0 && (linkPos < 0 || imgPos <= linkPos)) ? imgPos : linkPos;
out += escapeHtml(text.slice(pos, pos + nextRel)).replace(/\n/g, '<br>');
if (nextRel === imgPos) {
const alt = escapeHtml(imgM[1] || '');
const url = escapeHtml(imgM[2] || '');
out += `<img src="${url}" alt="${alt}">`;
pos += imgPos + imgM[0].length;
} else {
const label = escapeHtml(linkM[1] || '');
const urlRaw = linkM[2] || '';
const url = escapeHtml(urlRaw);
if (isImageUrl(urlRaw)) {
out += `<img src="${url}" alt="${label}">`;
} else {
out += `<a href="${url}" target="_blank" rel="noopener noreferrer">${label}</a>`;
}
pos += linkPos + linkM[0].length;
}
}
out += escapeHtml(text.slice(pos)).replace(/\n/g, '<br>');
return out;
}
function insertAtCursor(ta, text) {
const start = ta.selectionStart ?? ta.value.length; const end = ta.selectionEnd ?? start;
ta.value = ta.value.slice(0, start) + text + ta.value.slice(end);
ta.focus();
ta.selectionStart = ta.selectionEnd = start + text.length;
ta.dispatchEvent(new Event('input'));
}
function isImageFile(file) {
const t = (file?.type || '').toLowerCase();
if (t.startsWith('image/')) return true;
const name = file?.name || '';
return /\.(png|jpg|jpeg|gif|webp)$/i.test(name);
}
function enhancePreview(previewEl) {
previewEl.querySelectorAll('img').forEach(img => {
img.addEventListener('click', () => { openImageLightbox(img.src, img.alt || ''); });
});
}
// ====== 图片浮窗（Lightbox） ======
let _imgLightboxEl = null;
function ensureImageLightbox() {
if (_imgLightboxEl) return _imgLightboxEl;
const mask = document.createElement('div');
mask.className = 'img-lightbox-mask';
const content = document.createElement('div');
content.className = 'img-lightbox-content';
const img = document.createElement('img');
const closeBtn = document.createElement('button');
closeBtn.className = 'img-lightbox-close'; closeBtn.textContent = '×';
content.appendChild(img); content.appendChild(closeBtn);
mask.appendChild(content);
document.body.appendChild(mask);
const close = () => { mask.style.display = 'none'; document.body.style.overflow = ''; document.removeEventListener('keydown', escHandler); };
const escHandler = (e) => { if (e.key === 'Escape') close(); };
mask.addEventListener('click', close);
content.addEventListener('click', (e) => e.stopPropagation());
closeBtn.addEventListener('click', close);
_imgLightboxEl = mask;
return _imgLightboxEl;
}
function openImageLightbox(src, alt) {
const el = ensureImageLightbox();
const img = el.querySelector('img');
img.src = src; img.alt = alt || '';
el.style.display = 'flex';
document.body.style.overflow = 'hidden';
const escHandler = (e) => { if (e.key === 'Escape') { el.style.display='none'; document.body.style.overflow=''; document.removeEventListener('keydown', escHandler); } };
document.addEventListener('keydown', escHandler);
}
async function uploadFile(file) {
const fd = new FormData(); fd.append('file', file);
return api('api.php?action=upload_file', { method: 'POST', body: fd });
}
async function loadProject() {
const id = window.PAGE_PROJECT_ID || '';
if (!id) { document.getElementById('pageMsg').textContent = '缺少项目ID'; return; }
const data = await api('api.php?action=get_project&id=' + encodeURIComponent(id));
if (data && data.ok) {
CurrentProject = data.project; CurrentProjectId = CurrentProject.id;
document.getElementById('pageProjectTitle').textContent = CurrentProject.name;
document.getElementById('pageProjectStatus').textContent = '· 当前状态：' + CurrentProject.status;
document.getElementById('renameProjectInput').value = CurrentProject.name;
document.getElementById('statusSelect').value = CurrentProject.status;
// ETA 输入显示控制（仅进行中显示）
const etaInput = document.getElementById('etaInput');
if (etaInput) {
const key = 'project_eta_' + CurrentProjectId;
const saved = localStorage.getItem(key) || '';
etaInput.style.display = (CurrentProject.status === '进行') ? '' : 'none';
if (saved) etaInput.value = saved;
}
updateProjectReminder();
renderNotes(CurrentProject.notes || []);
} else {
document.getElementById('pageMsg').textContent = (data && data.message) ? data.message : '加载失败';
}
}
function timeAgo(str) {
if (!str) return '';
const d = new Date(str.replace(/-/g,'/')); // iOS 兼容
if (isNaN(d.getTime())) return str;
const diff = Date.now() - d.getTime();
const sec = Math.floor(diff/1000); if (sec < 60) return sec + '秒前';
const min = Math.floor(sec/60); if (min < 60) return min + '分钟前';
const hour = Math.floor(min/60); if (hour < 24) return hour + '小时前';
const day = Math.floor(hour/24); if (day < 30) return day + '天前';
const month = Math.floor(day/30); if (month < 12) return month + '个月前';
const year = Math.floor(month/12); return year + '年前';
}
function durationSince(str) {
if (!str) return '';
const d = new Date(str.replace(/-/g,'/'));
if (isNaN(d.getTime())) return '';
let ms = Date.now() - d.getTime();
if (ms < 0) ms = 0;
const days = Math.floor(ms / (24*3600*1000));
ms -= days * 24*3600*1000;
const hours = Math.floor(ms / (3600*1000));
ms -= hours * 3600*1000;
const mins = Math.floor(ms / (60*1000));
const parts = [];
if (days > 0) parts.push(days + '天');
if (hours > 0) parts.push(hours + '小时');
if (days === 0 && mins > 0) parts.push(mins + '分钟');
return parts.join('') || '刚刚';
}
function updateProjectReminder() {
try {
const box = document.getElementById('projectRemind'); if (!box || !CurrentProject) return;
const p = CurrentProject;
let msg = '';
if (p.status === '异常') {
const base = p.updated_at || p.created_at || '';
msg = `异常状态已持续：${durationSince(base)}。请尽快处理。`;
} else if (p.status === '待做') {
const base = p.created_at || '';
msg = `项目创建至今已等待：${durationSince(base)}。建议尽快开始。`;
} else if (p.status === '进行') {
const base = p.created_at || p.updated_at || '';
const howlong = durationSince(base);
const key = 'project_eta_' + p.id;
const eta = localStorage.getItem(key) || '';
if (eta) {
const ed = new Date(eta + 'T00:00:00');
const now = new Date();
let diff = ed.getTime() - now.getTime();
const daysLeft = Math.ceil(diff / (24*3600*1000));
const tail = daysLeft >= 0 ? `剩余约 ${daysLeft} 天` : `已超期 ${Math.abs(daysLeft)} 天`;
msg = `进行中：已用时 ${howlong}；计划完成：${eta}（${tail}）。`;
} else {
msg = `进行中：已用时 ${howlong}。可设置“计划完成日期”以显示剩余天数。`;
}
} else if (p.status === '完成') {
const base = p.updated_at || p.created_at || '';
msg = `已完成（${timeAgo(base)}）。`;
}
// 原始提醒文案（用于 AI 的原始输入）
box.textContent = msg;
box.setAttribute('data-raw', msg);
// 尝试从后端获取已保存的AI润色文本（持久化在服务器JSON）
(async () => {
try {
const resp = await api('api.php?action=get_ai_reminder&id=' + encodeURIComponent(CurrentProjectId));
if (resp && resp.ok && resp.text) {
box.textContent = resp.text;
}
} catch (e) {}
})();
} catch (e) {}
}
// ====== AI 自动润色提醒 ======
async function aiEnhanceReminderOnce() {
try {
const box = document.getElementById('projectRemind');
if (!box || !CurrentProjectId) return;
const raw = (box.getAttribute('data-raw') || box.textContent || '').trim();
if (!raw) return;
// 进度提示：结合笔记进行润色
box.textContent = 'AI正在结合笔记进行润色…';
const lastKey = 'ai_last_ts_' + CurrentProjectId;
const resp = await api('api.php?action=ai_enrich_reminder', {
method: 'POST', headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ raw: raw, project: { id: CurrentProjectId, name: CurrentProject?.name, status: CurrentProject?.status }, include_notes: true })
});
if (resp && resp.ok && resp.text) {
box.textContent = resp.text;
try { localStorage.setItem(lastKey, String(Date.now())); } catch (e) {}
}
} catch (e) { /* 静默失败 */ }
}
// 已取消自动AI润色，改为手动点击按钮触发
function firstLetter(name){ return (name || '记').trim().slice(0,1).toUpperCase(); }
function renderNotes(notes) {
const list = document.getElementById('notesList');
list.innerHTML = '';
notes.forEach(n => {
// Git风格卡片容器
const card = document.createElement('div'); card.className = 'note-git';
const header = document.createElement('div'); header.className = 'note-git-header';
const titleEl = document.createElement('span'); titleEl.className = 'note-git-title'; titleEl.textContent = '笔记';
titleEl.title = '点击以展开/收起编辑';
const timeEl = document.createElement('span'); timeEl.className = 'note-git-time'; timeEl.textContent = timeAgo(n.created_at || '') || (n.created_at || '');
header.appendChild(titleEl); header.appendChild(timeEl);
// 预览（Git风格正文）
const preview = document.createElement('div'); preview.className = 'note-git-body';
const ta = document.createElement('textarea'); ta.className = 'input'; ta.style.width = '100%'; ta.style.minHeight = '80px'; ta.value = n.content || '';
preview.innerHTML = noteTextToHtml(ta.value || '');
enhancePreview(preview);
// 编辑区域（默认展开）
const editWrap = document.createElement('div');
editWrap.style.marginTop = '6px';
editWrap.appendChild(ta);
editWrap.classList.add('hidden');
// 底部操作：左侧图标，右侧保存/删除/添加图片
const footer = document.createElement('div'); footer.className = 'note-footer';
const actionsRight = document.createElement('div'); actionsRight.className = 'note-actions-right';
const save = document.createElement('button'); save.className = 'btn'; save.textContent = '保存修改'; save.onclick = () => updateNote(n.id, ta.value);
const del = document.createElement('button'); del.className = 'btn danger'; del.textContent = '删除'; del.onclick = () => deleteNote(n.id);
const addImgBtn = document.createElement('button'); addImgBtn.className = 'btn'; addImgBtn.textContent = '添加图片';
const fileInput = document.createElement('input'); fileInput.type = 'file'; fileInput.accept = 'image/*'; fileInput.className = 'hidden';
addImgBtn.onclick = () => fileInput.click();
fileInput.onchange = async () => {
const f = fileInput.files?.[0]; if (!f) return; if (!isImageFile(f)) { alert('请选择图片文件'); return; }
const up = await uploadFile(f);
if (up && up.ok && up.url) {
insertAtCursor(ta, `![image](${up.url})`);
preview.innerHTML = noteTextToHtml(ta.value || '');
enhancePreview(preview);
} else {
alert(up?.message || '上传失败');
}
fileInput.value = '';
};
ta.addEventListener('input', () => { preview.innerHTML = noteTextToHtml(ta.value || ''); enhancePreview(preview); });
// 点击标题“笔记”展开/收起编辑；双击正文也可展开编辑
const toggleEdit = () => {
const hidden = editWrap.classList.contains('hidden');
if (hidden) { editWrap.classList.remove('hidden'); footer.classList.remove('hidden'); }
else { editWrap.classList.add('hidden'); footer.classList.add('hidden'); }
};
titleEl.addEventListener('click', toggleEdit);
preview.addEventListener('dblclick', toggleEdit);
actionsRight.appendChild(save); actionsRight.appendChild(del); actionsRight.appendChild(addImgBtn); actionsRight.appendChild(fileInput);
footer.appendChild(actionsRight);
// 初始隐藏底部按钮，跟随编辑区一起展开/收起
footer.classList.add('hidden');
// 组装卡片：头部 -> 预览 -> 编辑（默认展开） -> 底部
card.appendChild(header);
card.appendChild(preview);
card.appendChild(editWrap);
card.appendChild(footer);
list.appendChild(card);
});
}
async function applyProjectMeta() {
if (!CurrentProjectId) return;
const name = document.getElementById('renameProjectInput').value.trim();
const status = document.getElementById('statusSelect').value;
const resp = await api('api.php?action=update_project', {
method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id: CurrentProjectId, name, status })
});
const msg = document.getElementById('pageMsg');
if (resp && resp.ok) { msg.textContent = '项目已保存'; await loadProject(); } else { msg.textContent = resp?.message || '保存失败'; }
}
async function deleteProjectCurrent() {
if (!CurrentProjectId) return; if (!confirm('确认删除该项目吗？')) return;
const resp = await api('api.php?action=delete_project', {
method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id: CurrentProjectId })
});
if (resp && resp.ok) {
// 删除项目的同时清理保存的AI润色、上次时间、计划日期
try {
localStorage.removeItem('ai_last_ts_' + CurrentProjectId);
localStorage.removeItem('project_eta_' + CurrentProjectId);
} catch (e) {}
alert('已删除'); location.href = 'index.php';
} else { alert(resp?.message || '删除失败'); }
}
async function addNote() {
if (!CurrentProjectId) return;
const content = document.getElementById('newNoteInput').value.trim();
if (!content) { alert('请输入笔记内容'); return; }
const resp = await api('api.php?action=add_note', {
method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ project_id: CurrentProjectId, content })
});
if (resp && resp.ok) { document.getElementById('newNoteInput').value=''; await loadProject(); } else { alert(resp?.message || '添加失败'); }
}
async function updateNote(note_id, content) {
if (!CurrentProjectId) return;
const resp = await api('api.php?action=update_note', {
method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ project_id: CurrentProjectId, note_id, content })
});
if (resp && resp.ok) { await loadProject(); } else { alert(resp?.message || '保存失败'); }
}
async function deleteNote(note_id) {
if (!CurrentProjectId) return; if (!confirm('确认删除该笔记吗？')) return;
const resp = await api('api.php?action=delete_note', {
method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ project_id: CurrentProjectId, note_id })
});
if (resp && resp.ok) { await loadProject(); } else { alert(resp?.message || '删除失败'); }
}
async function exportProjectHtml() {
if (!CurrentProjectId) return;
const resp = await api('api.php?action=export_project_html&id='+encodeURIComponent(CurrentProjectId));
if (resp && resp.ok && resp.url) {
window.open(resp.url, '_blank');
} else {
alert(resp?.message || '导出失败');
}
}
async function cleanupUnusedUploads() {
const resp = await api('api.php?action=cleanup_unused_uploads');
if (resp && resp.ok) {
const d = resp.cleanup?.deleted ?? 0;
alert(`清理完成：删除未引用文件 ${d} 个`);
await loadProject();
} else {
alert(resp?.message || '清理失败');
}
}
document.addEventListener('DOMContentLoaded', () => {
// 退出登录按钮
const logoutBtn = document.getElementById('logoutBtn');
if (logoutBtn) logoutBtn.addEventListener('click', async () => {
try { await api('api.php?action=logout', { method: 'POST' }); } catch (e) {}
try { localStorage.removeItem('auth_ok'); } catch (e) {}
location.href = 'index.php';
});
// 绑定操作按钮
document.getElementById('saveMetaBtn').addEventListener('click', applyProjectMeta);
document.getElementById('deleteProjectBtn').addEventListener('click', deleteProjectCurrent);
document.getElementById('exportHtmlBtn').addEventListener('click', exportProjectHtml);
document.getElementById('cleanupBtn').addEventListener('click', cleanupUnusedUploads);
document.getElementById('addNoteBtn').addEventListener('click', addNote);
// 已移除前端 AI Key 输入，改为后端文件配置
// AI润色提示
const aiBtn = document.getElementById('aiEnhanceBtn');
if (aiBtn) {
aiBtn.addEventListener('click', async () => {
try {
const box = document.getElementById('projectRemind'); if (!box) return;
const raw = (box.getAttribute('data-raw') || box.textContent || '');
if (!raw) { alert('当前无提醒内容'); return; }
aiBtn.disabled = true; aiBtn.textContent = 'AI润色中...';
// 进度提示：结合笔记进行润色
box.textContent = 'AI正在结合笔记进行润色…';
const resp = await api('api.php?action=ai_enrich_reminder', {
method: 'POST', headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ raw: raw, project: { id: CurrentProjectId, name: CurrentProject?.name, status: CurrentProject?.status }, include_notes: true })
});
if (resp && resp.ok && resp.text) {
box.textContent = resp.text;
try { localStorage.setItem('ai_last_ts_' + CurrentProjectId, String(Date.now())); } catch (e) {}
}
else {
const msg = resp?.message || 'AI润色失败';
box.textContent = msg;
alert(msg);
}
} catch (e) { alert('AI调用失败'); }
finally { aiBtn.disabled = false; aiBtn.textContent = 'AI润色提示'; }
});
}
// 手动润色：仅在点击“AI润色提示”时触发
// 计划完成日期（本地存储，不影响后端数据）
const etaInput = document.getElementById('etaInput');
if (etaInput) {
etaInput.addEventListener('change', () => {
if (!CurrentProjectId) return;
const key = 'project_eta_' + CurrentProjectId;
const v = etaInput.value || '';
if (v) localStorage.setItem(key, v); else localStorage.removeItem(key);
updateProjectReminder();
});
}
// 新增笔记添加图片
const addImgBtn = document.getElementById('newNoteAddImageBtn');
const imgInput = document.getElementById('newNoteImageInput');
const ta = document.getElementById('newNoteInput');
if (addImgBtn && imgInput && ta) {
addImgBtn.addEventListener('click', () => imgInput.click());
imgInput.addEventListener('change', async () => {
const f = imgInput.files?.[0]; if (!f) return; if (!isImageFile(f)) { alert('请选择图片文件'); return; }
const up = await uploadFile(f);
if (up && up.ok && up.url) {
insertAtCursor(ta, `![image](${up.url})`);
} else {
alert(up?.message || '上传失败');
}
imgInput.value = '';
});
}
// 加载项目
loadProject();
});