初始化版本
This commit is contained in:
LL
201
assets/app.js
Normal file
201
assets/app.js
Normal file
@@ -0,0 +1,201 @@
|
||||
const $ = (sel) => document.querySelector(sel);
|
||||
const $$ = (sel) => Array.from(document.querySelectorAll(sel));
|
||||
|
||||
const state = {
|
||||
currentId: null,
|
||||
list: [],
|
||||
dirty: false,
|
||||
};
|
||||
let weEditor = null;
|
||||
|
||||
function setStatus(text) {
|
||||
const el = $('#status');
|
||||
el.textContent = text || '';
|
||||
}
|
||||
|
||||
function renderList() {
|
||||
const ul = $('#doc-list');
|
||||
ul.innerHTML = '';
|
||||
state.list.forEach((d) => {
|
||||
const li = document.createElement('li');
|
||||
li.className = 'doc-item' + (d.id === state.currentId ? ' active' : '');
|
||||
li.textContent = d.title || '(未命名)';
|
||||
li.onclick = () => loadDoc(d.id);
|
||||
ul.appendChild(li);
|
||||
});
|
||||
}
|
||||
|
||||
async function fetchJSON(url, opts = {}) {
|
||||
const res = await fetch(url, opts);
|
||||
if (!res.ok) throw new Error('请求失败: ' + res.status);
|
||||
return res.json();
|
||||
}
|
||||
|
||||
async function refreshList() {
|
||||
const data = await fetchJSON('api.php?action=list');
|
||||
state.list = data.docs || [];
|
||||
renderList();
|
||||
}
|
||||
|
||||
async function loadDoc(id) {
|
||||
const data = await fetchJSON('api.php?action=get&id=' + encodeURIComponent(id));
|
||||
state.currentId = data.id;
|
||||
$('#title-input').value = data.title || '';
|
||||
if (weEditor) weEditor.setHtml(data.content || '');
|
||||
$('#btn-save').disabled = true;
|
||||
$('#btn-delete').disabled = !state.currentId;
|
||||
renderList();
|
||||
setStatus('已加载: ' + (data.title || data.id));
|
||||
}
|
||||
|
||||
async function saveDoc() {
|
||||
const payload = {
|
||||
id: state.currentId,
|
||||
title: $('#title-input').value.trim(),
|
||||
content: weEditor ? weEditor.getHtml() : $('#we-editor').innerHTML,
|
||||
};
|
||||
const data = await fetchJSON('api.php?action=save', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
state.currentId = data.id;
|
||||
$('#btn-save').disabled = true;
|
||||
$('#btn-delete').disabled = !state.currentId;
|
||||
await refreshList();
|
||||
renderList();
|
||||
setStatus('已保存: ' + (payload.title || data.id));
|
||||
}
|
||||
|
||||
async function deleteDoc() {
|
||||
if (!state.currentId) return;
|
||||
if (!confirm('确定删除当前文档吗？')) return;
|
||||
const data = await fetchJSON('api.php?action=delete', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ id: state.currentId }),
|
||||
});
|
||||
state.currentId = null;
|
||||
$('#title-input').value = '';
|
||||
$('#editor').innerHTML = '';
|
||||
$('#btn-save').disabled = true;
|
||||
$('#btn-delete').disabled = true;
|
||||
await refreshList();
|
||||
renderList();
|
||||
setStatus('文档已删除');
|
||||
}
|
||||
|
||||
function newDoc() {
|
||||
state.currentId = null;
|
||||
$('#title-input').value = '';
|
||||
if (weEditor) weEditor.setHtml('');
|
||||
$('#btn-save').disabled = false;
|
||||
$('#btn-delete').disabled = true;
|
||||
renderList();
|
||||
setStatus('新建文档');
|
||||
}
|
||||
|
||||
function markDirty() {
|
||||
$('#btn-save').disabled = false;
|
||||
}
|
||||
|
||||
// 由 wangEditor 处理图片上传
|
||||
|
||||
function setupEvents() {
|
||||
$('#btn-save').onclick = saveDoc;
|
||||
$('#btn-delete').onclick = deleteDoc;
|
||||
$('#btn-new').onclick = newDoc;
|
||||
$('#title-input').oninput = markDirty;
|
||||
const shareBtn = $('#btn-share');
|
||||
if (shareBtn) shareBtn.onclick = shareCurrent;
|
||||
const revokeBtn = $('#btn-share-revoke');
|
||||
if (revokeBtn) revokeBtn.onclick = revokeShares;
|
||||
}
|
||||
|
||||
async function init() {
|
||||
setupEvents();
|
||||
// 初始化 wangEditor
|
||||
const { createEditor, createToolbar } = window.wangEditor || {};
|
||||
if (createEditor && createToolbar) {
|
||||
const editorConfig = { placeholder: '在此编辑内容…' };
|
||||
editorConfig.onChange = () => markDirty();
|
||||
// 配置图片上传到后端
|
||||
editorConfig.MENU_CONF = editorConfig.MENU_CONF || {};
|
||||
editorConfig.MENU_CONF['uploadImage'] = {
|
||||
server: 'upload.php',
|
||||
fieldName: 'image',
|
||||
maxFileSize: 10 * 1024 * 1024,
|
||||
timeout: 20 * 1000,
|
||||
customInsert(res, insertFn) {
|
||||
if (res && res.url) insertFn(res.url);
|
||||
},
|
||||
};
|
||||
|
||||
weEditor = createEditor({ selector: '#we-editor', config: editorConfig, mode: 'default' });
|
||||
createToolbar({ editor: weEditor, selector: '#we-toolbar', mode: 'default' });
|
||||
}
|
||||
await refreshList();
|
||||
if (state.list.length) {
|
||||
loadDoc(state.list[0].id).catch(console.error);
|
||||
} else {
|
||||
newDoc();
|
||||
}
|
||||
}
|
||||
|
||||
async function shareCurrent() {
|
||||
if (!state.currentId) {
|
||||
alert('请先保存文档，再进行分享');
|
||||
return;
|
||||
}
|
||||
openShareModal();
|
||||
}
|
||||
|
||||
init().catch((e) => setStatus('初始化失败: ' + e.message));
|
||||
|
||||
function openShareModal() {
|
||||
const overlay = $('#share-modal');
|
||||
const linkBox = overlay.querySelector('.link-box');
|
||||
const linkInput = $('#share-link');
|
||||
const copyBtn = $('#btn-copy-link');
|
||||
overlay.style.display = 'flex';
|
||||
overlay.setAttribute('aria-hidden', 'false');
|
||||
linkBox.style.display = 'none';
|
||||
const close = () => { overlay.style.display = 'none'; overlay.setAttribute('aria-hidden', 'true'); };
|
||||
$('#btn-close-share').onclick = close;
|
||||
overlay.querySelectorAll('.options .btn').forEach((btn) => {
|
||||
btn.onclick = async () => {
|
||||
const mode = btn.getAttribute('data-mode');
|
||||
try {
|
||||
const data = await fetchJSON('api.php?action=share_create&id=' + encodeURIComponent(state.currentId) + '&mode=' + encodeURIComponent(mode));
|
||||
const url = (data && data.url) ? (location.origin + data.url) : '';
|
||||
if (!url) throw new Error('未获取到分享链接');
|
||||
linkInput.value = url;
|
||||
linkBox.style.display = 'flex';
|
||||
copyBtn.onclick = async () => {
|
||||
try { await navigator.clipboard.writeText(url); showToast('已复制分享链接：', url); } catch (e) { prompt('复制分享链接', url); }
|
||||
};
|
||||
} catch (e) {
|
||||
alert('生成分享链接失败：' + e.message);
|
||||
}
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function showToast(text, link) {
|
||||
const el = $('#share-toast');
|
||||
el.innerHTML = link ? (text + '<a href="' + link + '" target="_blank">打开</a>') : text;
|
||||
el.style.display = 'block';
|
||||
setTimeout(() => { el.style.display = 'none'; }, 3000);
|
||||
}
|
||||
|
||||
async function revokeShares() {
|
||||
if (!state.currentId) { alert('当前没有文档'); return; }
|
||||
if (!confirm('取消该文档的所有分享链接？此操作不可恢复')) return;
|
||||
try {
|
||||
await fetchJSON('api.php?action=share_revoke_all&id=' + encodeURIComponent(state.currentId));
|
||||
setStatus('已取消所有分享');
|
||||
showToast('已取消所有分享');
|
||||
} catch (e) {
|
||||
alert('取消分享失败：' + e.message);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user