openclaw/CHFS-NG
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add media preview and upload progress

Browse Source
This commit is contained in:
OpenClaw Agent
2026-09-22 02:12:21 +08:00
parent 5feaf0daf8
commit 715904ab9f
1 changed files with 6 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
chfs-ng/internal/api/web/index.html
+6 -4
View File
@@ -21,7 +21,7 @@ body{background:var(--bg);color:var(--text);transition:background .2s,color .2s}
button.ghost{background:var(--surface2);color:var(--text)}button.danger{background:var(--danger)}.meta,.path{color:var(--muted)}
.card{box-shadow:var(--shadow)}th{background:var(--surface2);color:var(--muted)}th,td{border-color:var(--border)}.field input,.toolbar input,.field select{background:var(--surface);color:var(--text);border-color:var(--border)}
.iconbtn{width:38px;height:38px;padding:0;background:var(--surface2);color:var(--text)}.viewbtn.active{background:var(--primary);color:#fff}.selectbox{width:18px;height:18px;accent-color:var(--primary)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;padding:14px}.tile{position:relative;border:1px solid var(--border);border-radius:12px;padding:14px;background:var(--surface);min-height:145px;cursor:pointer}.tile:hover{border-color:var(--primary)}.tile.selected{outline:2px solid var(--primary)}.tile .thumb{height:82px;display:flex;align-items:center;justify-content:center;font-size:42px;border-radius:9px;background:var(--surface2);overflow:hidden;margin-bottom:9px}.tile .thumb img{width:100%;height:100%;object-fit:cover}.tile .tilecheck{position:absolute;top:9px;left:9px}.tile .tilemenu{position:absolute;right:7px;top:7px}.file-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bulk{display:none;align-items:center;gap:8px;margin-bottom:12px}.bulk.show{display:flex}.bulk .count{font-weight:650;margin-right:auto}.context{position:fixed;z-index:10;display:none;min-width:170px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:10px;padding:5px}.context button{display:block;width:100%;text-align:left;background:transparent;color:var(--text);border-radius:7px}.context button:hover{background:var(--surface2)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;padding:14px}.tile{position:relative;border:1px solid var(--border);border-radius:12px;padding:14px;background:var(--surface);min-height:145px;cursor:pointer}.tile:hover{border-color:var(--primary)}.tile.selected{outline:2px solid var(--primary)}.tile .thumb{height:82px;display:flex;align-items:center;justify-content:center;font-size:42px;border-radius:9px;background:var(--surface2);overflow:hidden;margin-bottom:9px}.tile .thumb img{width:100%;height:100%;object-fit:cover}.progress{height:8px;background:var(--surface2);border-radius:99px;overflow:hidden}.progress i{display:block;height:100%;width:0;background:var(--primary);transition:width .15s}.upload-row{display:grid;gap:7px;padding:10px 0;border-bottom:1px solid var(--border)}.tile .tilecheck{position:absolute;top:9px;left:9px}.tile .tilemenu{position:absolute;right:7px;top:7px}.file-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bulk{display:none;align-items:center;gap:8px;margin-bottom:12px}.bulk.show{display:flex}.bulk .count{font-weight:650;margin-right:auto}.context{position:fixed;z-index:10;display:none;min-width:170px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:10px;padding:5px}.context button{display:block;width:100%;text-align:left;background:transparent;color:var(--text);border-radius:7px}.context button:hover{background:var(--surface2)}
</style>
</head>
<body>
@@ -55,8 +55,8 @@ function iconFor(f){return {folder:"📁",image:"🖼️",video:"🎬",audio:"
function selectItem(p,checked){if(checked)selected.add(p);else selected.delete(p);updateSelection()}
let selected=new Set(),lastItems=[];
function render(items){lastItems=items;selected=new Set([...selected].filter(p=>items.some(f=>(current?current+"/":"")+f.name===p)));renderList(items);renderGrid(items);updateSelection()}
function renderList(items){const body=$("files");body.innerHTML=items.map(f=>{const p=current?current+"/"+f.name:f.name,canRead=(f.mask||"").includes("R"),canWrite=(f.mask||"").includes("W"),canDelete=(f.mask||"").includes("D"),share=f.guestMask&&f.guestMask.includes("R")?'<button class="ghost" onclick="shareItem('+JSON.stringify(p)+')">分享</button>':"";return '<tr><td><input class="selectbox" type="checkbox" '+(selected.has(p)?"checked":"")+' onchange="selectItem('+JSON.stringify(p)+',this.checked)"></td><td><div class="name"><span>'+iconFor(f)+'</span>'+(f.dir&&canRead?'<a href="#" onclick="openDir('+JSON.stringify(p)+');return false">'+esc(f.name)+'</a>':'<span>'+esc(f.name)+'</span>')+'</div></td><td class="meta">'+(f.dir?"—":fmt(f.size))+'</td><td class="meta">'+esc(f.modified||"")+'</td><td><div class="actions"><button class="iconbtn" onclick="itemMenu(event,'+JSON.stringify(p)+')">⋮</button></div></td></tr>'}).join("")||'<tr><td colspan="5" class="empty">这里还没有文件</td></tr>'}
function renderGrid(items){$("grid").innerHTML=items.map(f=>{const p=current?current+"/"+f.name:f.name,canRead=(f.mask||"").includes("R");let thumb=iconFor(f);if(fileType(f)==="image"&&canRead)thumb='<img src="/chfs/shared/'+encodeURI(p)+'" loading="lazy" alt="">';return '<div class="tile '+(selected.has(p)?"selected":"")+'" onclick="'+(f.dir&&canRead?'openDir('+JSON.stringify(p)+')':'toggleTile('+JSON.stringify(p)+')')+'" oncontextmenu="itemMenu(event,'+JSON.stringify(p)+');return false"><input class="selectbox tilecheck" type="checkbox" '+(selected.has(p)?"checked":"")+' onclick="event.stopPropagation();selectItem('+JSON.stringify(p)+',this.checked)"><div class="thumb">'+thumb+'</div><div class="file-name">'+esc(f.name)+'</div><div class="meta">'+(f.dir?'文件夹':fmt(f.size))+'</div></div>'}).join('')||'<div class="empty">这里还没有文件</div>'}
function renderList(items){const body=$("files");body.innerHTML=items.map(f=>{const p=current?current+"/"+f.name:f.name,canRead=(f.mask||"").includes("R"),canWrite=(f.mask||"").includes("W"),canDelete=(f.mask||"").includes("D"),share=f.guestMask&&f.guestMask.includes("R")?'<button class="ghost" onclick="shareItem('+JSON.stringify(p)+')">分享</button>':"";return '<tr><td><input class="selectbox" type="checkbox" '+(selected.has(p)?"checked":"")+' onchange="selectItem('+JSON.stringify(p)+',this.checked)"></td><td><div class="name"><span>'+iconFor(f)+'</span>'+(f.dir&&canRead?'<a href="#" onclick="openDir('+JSON.stringify(p)+');return false">'+esc(f.name)+'</a>':(canRead?'<a href="#" onclick="previewFile('+JSON.stringify(p)+');return false">'+esc(f.name)+'</a>':'<span>'+esc(f.name)+'</span>'))+'</div></td><td class="meta">'+(f.dir?"—":fmt(f.size))+'</td><td class="meta">'+esc(f.modified||"")+'</td><td><div class="actions"><button class="iconbtn" onclick="itemMenu(event,'+JSON.stringify(p)+')">⋮</button></div></td></tr>'}).join("")||'<tr><td colspan="5" class="empty">这里还没有文件</td></tr>'}
function renderGrid(items){$("grid").innerHTML=items.map(f=>{const p=current?current+"/"+f.name:f.name,canRead=(f.mask||"").includes("R");let thumb=iconFor(f);if(fileType(f)==="image"&&canRead)thumb='<img src="/chfs/preview?file='+encodeURIComponent(p)+'" loading="lazy" alt="">';return '<div class="tile '+(selected.has(p)?"selected":"")+'" onclick="'+(f.dir&&canRead?'openDir('+JSON.stringify(p)+')':'toggleTile('+JSON.stringify(p)+')')+'" oncontextmenu="itemMenu(event,'+JSON.stringify(p)+');return false"><input class="selectbox tilecheck" type="checkbox" '+(selected.has(p)?"checked":"")+' onclick="event.stopPropagation();selectItem('+JSON.stringify(p)+',this.checked)"><div class="thumb">'+thumb+'</div><div class="file-name">'+esc(f.name)+'</div><div class="meta">'+(f.dir?'文件夹':fmt(f.size))+'</div></div>'}).join('')||'<div class="empty">这里还没有文件</div>'}
function toggleTile(p){selectItem(p,!selected.has(p))}
function toggleAll(v){lastItems.forEach(f=>{const p=current?current+"/"+f.name:f.name;if(v)selected.add(p);else selected.delete(p)});render(lastItems)}
function clearSelection(){selected.clear();updateSelection();renderGrid(lastItems);renderList(lastItems)}
@@ -77,9 +77,11 @@ async function renameItem(p){const name=p.split("/").pop();const n=await ask("
async function removeItem(p){if(!await confirmBox("确认删除","确定删除 "+p+"？"))return;try{await api("/chfs/rmfiles",{method:"POST",headers:{"Content-Type":"application/x-www-form-urlencoded"},body:new URLSearchParams({filepath:p})});refresh()}catch(e){alert(e.message)}}
async function newFolder(){const n=await ask("新建文件夹","文件夹名称");if(!n)return;const p=current?current+"/"+n:n;try{await api("/chfs/newdir",{method:"POST",headers:{"Content-Type":"application/x-www-form-urlencoded"},body:new URLSearchParams({filepath:p})});refresh()}catch(e){alert(e.message)}}
async function newText(){const n=await ask("新建文本","文件名","new.txt");if(!n)return;const text=await ask("新建文本","文本内容");if(text===null)return;try{await api("/chfs/newtext",{method:"POST",headers:{"Content-Type":"application/x-www-form-urlencoded"},body:new URLSearchParams({filepath:current,title:n,text:text||""})});refresh()}catch(e){alert(e.message)}}
$("upload").addEventListener("change",async e=>{const fd=new FormData();fd.append("folder",current);for(const f of e.target.files)fd.append("file",f);try{await api("/chfs/upload",{method:"POST",body:fd});refresh()}catch(x){alert(x.message)}e.target.value=""})
$("upload").addEventListener("change",async e=>{const files=[...e.target.files];if(!files.length)return;show('<h2>上传文件</h2><div id="uploadList"></div><div class="row"><button class="ghost" onclick="closeModal()">后台继续</button></div>');const box=$("uploadList");for(const file of files){const row=document.createElement("div");row.className="upload-row";row.innerHTML='<b>'+esc(file.name)+'</b><span class="meta">'+fmt(file.size)+' · 准备上传</span><div class="progress"><i></i></div>';box.appendChild(row);await uploadOne(file,row)}e.target.value="";refresh()})
function uploadOne(file,row){return new Promise(resolve=>{const xhr=new XMLHttpRequest(),fd=new FormData();fd.append("folder",current);fd.append("file",file);const meta=row.querySelector('.meta'),bar=row.querySelector('i');xhr.open('POST','/chfs/upload');xhr.upload.onprogress=e=>{if(e.lengthComputable){const pct=Math.round(e.loaded/e.total*100);bar.style.width=pct+'%';meta.textContent=fmt(file.size)+' · '+pct+'%'}};xhr.onload=()=>{if(xhr.status>=200&&xhr.status<300){bar.style.width='100%';meta.textContent=fmt(file.size)+' · 完成'}else{meta.textContent='上传失败';bar.style.width='0'}};xhr.onerror=()=>{meta.textContent='网络错误';bar.style.width='0'};xhr.onloadend=resolve;xhr.send(fd)})}
$("search").addEventListener("keydown",async e=>{if(e.key!=="Enter")return;const s=e.target.value.trim();if(!s){refresh();return}try{const d=await api("/chfs/search?str="+encodeURIComponent(s));renderSearch(d.files||[])}catch(x){alert(x.message)}})
function renderSearch(items){$("crumb").textContent="搜索结果";const body=$("files");body.innerHTML="";for(const f of items){const row=document.createElement("tr");row.innerHTML='<td><div class="name">🔎 <a href="#" onclick="openDir('+JSON.stringify(f.dir?f.path:f.path.split("/").slice(0,-1).join("/")).replace(/^"/,'\\"')+');return false">'+esc(f.path)+'</a></div></td><td class="meta">'+(f.dir?"—":fmt(f.size))+'</td><td class="meta">'+esc(f.modified||"")+'</td><td></td>';body.appendChild(row)}}
function previewFile(p){const n=p.split('/').pop(),ext=n.toLowerCase().split('.').pop(),url='/chfs/shared/'+encodeURI(p),media=['mp4','webm','mov','mkv'].includes(ext),audio=['mp3','wav','flac','m4a','ogg'].includes(ext),image=['png','jpg','jpeg','gif','webp','bmp','svg'].includes(ext),pdf=ext==='pdf';let body='';if(image)body='<img src="'+url+'" style="max-width:100%;max-height:65vh;object-fit:contain">';else if(media)body='<video controls autoplay style="width:100%;max-height:65vh"><source src="'+url+'"></video>';else if(audio)body='<audio controls autoplay style="width:100%"><source src="'+url+'"></audio>';else if(pdf)body='<iframe src="'+url+'" style="width:100%;height:65vh;border:0"></iframe>';else body='<div class="empty">暂不支持该文件类型的在线预览<br><button onclick="location.href='+JSON.stringify(url)+'">下载文件</button></div>';show('<h2 style="word-break:break-all">'+esc(n)+'</h2><div>'+body+'</div><div class="row"><button class="ghost" onclick="closeModal()">关闭</button></div>')}
function changePassword(){show('<h2>修改密码</h2><div class="field"><input id="cp" type="password" placeholder="当前密码"><input id="npw" type="password" placeholder="新密码"></div><div class="row"><button class="ghost" onclick="closeModal()">取消</button><button onclick="savePassword()">保存</button></div>')}
async function savePassword(){try{await api("/chfs/password",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({currentPassword:$("cp").value,password:$("npw").value})});alert("密码已更新");closeModal()}catch(e){alert(e.message)}}
function openLogin(){show('<h2>登录</h2><div class="field"><label>用户名</label><input id="u" autocomplete="username"></div><div class="field"><label>密码</label><input id="p" type="password" autocomplete="current-password"></div><div class="row"><button class="ghost" onclick="closeModal()">取消</button><button onclick="login()">登录</button></div>')}