perf: 增加内存缓存提升性能
This commit is contained in:
478
ui/script.js
478
ui/script.js
@@ -1,478 +0,0 @@
|
||||
afi = {
|
||||
auth: {},
|
||||
consts: {},
|
||||
params: {},
|
||||
elements: {},
|
||||
utils: {},
|
||||
rpc: {},
|
||||
uploader: {},
|
||||
interface: {},
|
||||
directcall: {},
|
||||
}
|
||||
|
||||
afi.auth = {
|
||||
isLoggedIn: false,
|
||||
|
||||
checkAuth: async function () {
|
||||
try {
|
||||
const res = await fetch(location.origin + afi.params.extraPath + '/auth', {
|
||||
method: 'GET',
|
||||
credentials: 'include'
|
||||
});
|
||||
this.isLoggedIn = (res.status === 200);
|
||||
return this.isLoggedIn;
|
||||
} catch (e) {
|
||||
this.isLoggedIn = false;
|
||||
return false;
|
||||
}
|
||||
},
|
||||
logout: function () {
|
||||
fetch(location.origin + afi.params.extraPath + '/auth', {
|
||||
method: 'GET',
|
||||
headers: { 'Authorization': 'Basic ' + btoa('invalid:invalid') },
|
||||
credentials: 'include'
|
||||
});
|
||||
this.isLoggedIn = false;
|
||||
location.reload();
|
||||
}
|
||||
}
|
||||
|
||||
afi.consts = {
|
||||
leftPageWarn: "确认放弃正在进行的传输?",
|
||||
ensureDrop: () => !confirm('确认移动此对象?')
|
||||
}
|
||||
|
||||
afi.params = {
|
||||
extraPath: extraPath
|
||||
}
|
||||
|
||||
afi.elements = {
|
||||
itemlinks: Array.from(document.querySelectorAll('a.item-links')),
|
||||
table: document.getElementById("index-table"),
|
||||
badge: document.getElementById("badge"),
|
||||
uploader: document.getElementById("clickupload"),
|
||||
path: document.getElementById("path"),
|
||||
nav: document.getElementById("nav"),
|
||||
title: document.head.querySelector("title"),
|
||||
dropGrid: document.getElementById("drop-grid"),
|
||||
barDisplay: document.getElementById("bar-display"),
|
||||
barProc: document.getElementById("bar-proc"),
|
||||
helpPanel: document.getElementById('help-panel'),
|
||||
helpToggle: document.getElementById('help-toggle'),
|
||||
}
|
||||
|
||||
afi.pulsar = {
|
||||
pulseLeft: 0,
|
||||
pulseNotificator(text) {
|
||||
afi.elements.badge.innerText = text
|
||||
this.pulseEffect(afi.elements.badge)
|
||||
},
|
||||
pulseSuccess() {
|
||||
this.pulseNotificator("操作成功")
|
||||
},
|
||||
pulseFailure(error) {
|
||||
this.pulseNotificator("操作失败 " + error)
|
||||
},
|
||||
pulseEffect: function (element) {
|
||||
element.style.display = "block"
|
||||
afi.pulsar.pulseLeft += 1
|
||||
element.classList.remove('pulse');
|
||||
void element.offsetWidth;
|
||||
element.classList.add('pulse');
|
||||
setTimeout(function () {
|
||||
afi.pulsar.pulseLeft -= 1;
|
||||
if (afi.pulsar.pulseLeft > 0) {
|
||||
console.log("[AFI] Notification stack", afi.pulsar.pulseLeft, "left, skip clear")
|
||||
} else {
|
||||
console.log("[AFI] Notification stack", afi.pulsar.pulseLeft, "left, do clear")
|
||||
element.style.display = 'none';
|
||||
}
|
||||
}, 5000);
|
||||
},
|
||||
}
|
||||
|
||||
afi.utils = {
|
||||
isDupe: function (itemname) {
|
||||
if (afi.elements.itemlinks.find(a => a.innerText.replace('/', '') === itemname)) {
|
||||
alert('名称 ' + itemname + ' 已被已存在的项目占用');
|
||||
return true
|
||||
}
|
||||
else {
|
||||
return false
|
||||
}
|
||||
},
|
||||
|
||||
isFolder: function (element) {
|
||||
return element && element.href && element.innerText.endsWith('/');
|
||||
},
|
||||
|
||||
encodeURIHash: function (e) {
|
||||
return encodeURI(e).replaceAll('#', '%23');
|
||||
},
|
||||
|
||||
refresh: function () {
|
||||
afi.interface.browseTo(location.href, true);
|
||||
},
|
||||
|
||||
prependPath: function (a) {
|
||||
return a.startsWith('/') ? a : decodeURI(location.pathname) + a;
|
||||
},
|
||||
cancelDefault(e) {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
},
|
||||
setHighlight: function (t) {
|
||||
t.classList.add('highlight')
|
||||
},
|
||||
getHighlight: function () {
|
||||
return document.querySelector('.highlight') || {}
|
||||
},
|
||||
resetHighlight: function () {
|
||||
try {
|
||||
this.getHighlight().classList.remove('highlight')
|
||||
} catch (e) {
|
||||
}
|
||||
},
|
||||
isHelpMode: () => afi.elements.helpPanel.style.display === 'block',
|
||||
helpOn: function () {
|
||||
afi.elements.helpPanel.style.display = 'block'
|
||||
afi.elements.table.style.display = 'none'
|
||||
afi.elements.helpToggle.innerText = "关闭帮助"
|
||||
afi.elements.helpToggle.onclick = afi.utils.helpOff
|
||||
},
|
||||
helpOff: function () {
|
||||
if (!afi.utils.isHelpMode()) return
|
||||
afi.elements.helpPanel.style.display = 'none'
|
||||
afi.elements.table.style.display = 'table'
|
||||
afi.elements.helpToggle.innerText = "帮助菜单"
|
||||
afi.elements.helpToggle.onclick = afi.utils.helpOn
|
||||
},
|
||||
updateButtons: function () {
|
||||
const isLogged = afi.auth.isLoggedIn;
|
||||
document.querySelectorAll('#operations a').forEach(link => {
|
||||
const text = link.innerText.trim();
|
||||
if (text === '登录') {
|
||||
link.style.display = isLogged ? 'none' : 'block';
|
||||
} else if (['上传文件', '新建文件', '新建目录', '移动对象', '递归删除', '登出'].includes(text)) {
|
||||
link.style.display = isLogged ? 'block' : 'none';
|
||||
if (text === '登出' && isLogged) {
|
||||
link.onclick = function (e) {
|
||||
e.preventDefault();
|
||||
afi.auth.logout();
|
||||
return false;
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
|
||||
afi.rpc = {
|
||||
rpc: function (call, args, cb) {
|
||||
console.log('[AFI] RPC', call, args);
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.open('POST', location.origin + afi.params.extraPath + '/rpc');
|
||||
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
|
||||
xhr.withCredentials = true;
|
||||
xhr.send(JSON.stringify({ call, args }));
|
||||
xhr.onload = cb;
|
||||
xhr.onerror = () => afi.pulsar.pulseFailure();
|
||||
},
|
||||
|
||||
mkdirCall: function (path, cb) {
|
||||
this.rpc('mkdirp', [afi.utils.prependPath(path)], cb);
|
||||
},
|
||||
|
||||
rmCall: function (path1, cb) {
|
||||
this.rpc('rm', [afi.utils.prependPath(path1)], cb);
|
||||
},
|
||||
|
||||
mvCall: function (path1, path2, cb) {
|
||||
this.rpc('mv', [path1, path2], cb);
|
||||
},
|
||||
|
||||
sumCall: function (path, type, cb) {
|
||||
this.rpc('sum', [afi.utils.prependPath(path), type], cb);
|
||||
},
|
||||
|
||||
touchCall: function (path, cb) {
|
||||
this.rpc('touch', [afi.utils.prependPath(path)], cb);
|
||||
}
|
||||
}
|
||||
|
||||
afi.uploader = {
|
||||
totalUploads: 0,
|
||||
totalUploaded: 0,
|
||||
totalUploadsSize: 0,
|
||||
totalUploadedSize: [],
|
||||
|
||||
shouldRefresh: function () {
|
||||
this.totalUploaded += 1
|
||||
console.log('[AFI] Have uploaded ' + this.totalUploaded + ' files')
|
||||
if (this.totalUploads === this.totalUploaded) {
|
||||
window.onbeforeunload = null
|
||||
console.log('[AFI] Finished after uploaded ' + this.totalUploaded + ' files')
|
||||
this.totalUploaded = 0
|
||||
this.totalUploads = 0
|
||||
this.totalUploadsSize = 0
|
||||
this.totalUploadedSize = []
|
||||
setTimeout(afi.utils.refresh, 200)
|
||||
afi.elements.barDisplay.style.display = 'none'
|
||||
}
|
||||
},
|
||||
|
||||
updatePercent: function (event) {
|
||||
this.totalUploadedSize[event.target.id] = event.loaded
|
||||
const ttlDone = this.totalUploadedSize.reduce((s, x) => s + x)
|
||||
const percent = Math.min(Math.floor(100 * ttlDone / this.totalUploadsSize), 100) + '%'
|
||||
afi.elements.barProc.innerText = "传输: " + percent
|
||||
},
|
||||
upload: function (id, what, path, cbDone, cbErr, cbUpdate) {
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.open('POST', location.origin + afi.params.extraPath + '/post');
|
||||
xhr.setRequestHeader('afi-path', path);
|
||||
xhr.withCredentials = true;
|
||||
xhr.upload.addEventListener('load', cbDone);
|
||||
xhr.upload.addEventListener('progress', cbUpdate);
|
||||
xhr.upload.addEventListener('error', cbErr);
|
||||
xhr.upload.id = id;
|
||||
xhr.send(what);
|
||||
},
|
||||
|
||||
uploadFile: function (file, path) {
|
||||
path = decodeURI(location.pathname).slice(0, -1) + path
|
||||
window.onbeforeunload = afi.consts.leftPageWarn
|
||||
afi.elements.barProc.style.display = afi.elements.barDisplay.style.display = 'block'
|
||||
this.totalUploads += 1
|
||||
this.totalUploadsSize += file.size
|
||||
if (typeof upBarName !== 'undefined') {
|
||||
upBarName.innerText = this.totalUploads > 1 ? this.totalUploads + ' 个文件' : file.name
|
||||
}
|
||||
const formData = new FormData()
|
||||
formData.append(file.name, file)
|
||||
this.upload(this.totalUploads, formData, encodeURIComponent(path), this.shouldRefresh.bind(this), null, this.updatePercent.bind(this))
|
||||
}
|
||||
}
|
||||
|
||||
afi.interface = {
|
||||
pushEntry: function (entry) {
|
||||
if (!entry.webkitGetAsEntry && !entry.getAsEntry) {
|
||||
return alert('不兼容此浏览器')
|
||||
} else {
|
||||
entry = entry.webkitGetAsEntry() || entry.getAsEntry()
|
||||
}
|
||||
this.parseDomItem.bind(this)(entry, true)
|
||||
},
|
||||
parseDomFolder: function (f) {
|
||||
f.createReader().readEntries(e => e.forEach(i => afi.interface.parseDomItem.bind(this)(i)))
|
||||
},
|
||||
parseDomItem: function (domFile, shouldCheckDupes) {
|
||||
if (shouldCheckDupes && afi.utils.isDupe(domFile.name)) {
|
||||
return
|
||||
}
|
||||
if (domFile.isFile) {
|
||||
domFile.file(f => afi.uploader.uploadFile(f, domFile.fullPath))
|
||||
} else {
|
||||
const f = domFile.fullPath.startsWith('/') ? domFile.fullPath.slice(1) : domFile.fullPath
|
||||
afi.rpc.mkdirCall(f, () => this.parseDomFolder.bind(this)(domFile))
|
||||
}
|
||||
},
|
||||
|
||||
browseTo: async function (href, pulseEffectDone, skipHistory) {
|
||||
try {
|
||||
const r = await fetch(href, { credentials: 'include' })
|
||||
const t = await r.text()
|
||||
const parsed = new DOMParser().parseFromString(t, 'text/html')
|
||||
|
||||
afi.elements.table.innerHTML = parsed.getElementById('index-table').innerHTML
|
||||
const nav = parsed.getElementById('nav').innerText
|
||||
const path = parsed.getElementById('path').innerText
|
||||
const title = parsed.head.querySelector('title').innerText
|
||||
|
||||
if (afi.elements.path.innerText !== path) {
|
||||
if (!skipHistory) {
|
||||
const escaped = afi.utils.encodeURIHash(afi.params.extraPath + path)
|
||||
history.pushState({}, '', escaped)
|
||||
}
|
||||
afi.elements.title.innerText = title
|
||||
afi.elements.nav.innerText = nav
|
||||
afi.elements.path.innerText = path
|
||||
this.setBreadcrumbs()
|
||||
}
|
||||
init()
|
||||
if (pulseEffectDone) afi.pulsar.pulseSuccess()
|
||||
} catch (error) {
|
||||
afi.pulsar.pulseFailure(error)
|
||||
}
|
||||
},
|
||||
|
||||
setBreadcrumbs: function () {
|
||||
const parent = afi.elements.nav.parentNode;
|
||||
afi.elements.nav.outerHTML = '<span id="nav" onclick="return afi.directcall.bread_click(event)"><span class="nav">' + afi.elements.path.innerText.split('/').join('/</span><span class="nav">') + '</span></span>'
|
||||
afi.elements.nav = parent.querySelector('#nav');
|
||||
}
|
||||
}
|
||||
|
||||
afi.directcall = {
|
||||
exec_mkdir: function () {
|
||||
const folder = prompt('新建目录名称', '')
|
||||
if (folder && !afi.utils.isDupe(folder)) {
|
||||
afi.rpc.mkdirCall(folder, afi.utils.refresh)
|
||||
}
|
||||
},
|
||||
|
||||
exec_touch: function () {
|
||||
const file = prompt('新建文件名称', '')
|
||||
if (file && !afi.utils.isDupe(file)) {
|
||||
afi.rpc.touchCall(file, afi.utils.refresh)
|
||||
}
|
||||
},
|
||||
|
||||
exec_rm: function () {
|
||||
const file = prompt('删除对象名称', '')
|
||||
afi.rpc.rmCall(file, afi.utils.refresh)
|
||||
},
|
||||
|
||||
exec_mv: function () {
|
||||
const orig = prompt('源地址', '')
|
||||
const dest = prompt('目标地址', '')
|
||||
if (orig && !afi.utils.isDupe(dest)) {
|
||||
afi.rpc.mvCall(afi.utils.prependPath(orig), afi.utils.prependPath(dest), afi.utils.refresh)
|
||||
}
|
||||
},
|
||||
bread_click: function (e) {
|
||||
const p = Array.from(document.getElementById('nav').childNodes).map(k => k.innerText)
|
||||
const i = p.findIndex(s => s === e.target.innerText)
|
||||
var dst = p.slice(0, i + 1).join('').slice(1)
|
||||
if (!dst.startsWith('/')) {
|
||||
dst = "/" + dst
|
||||
}
|
||||
const target = location.origin + afi.params.extraPath + afi.utils.encodeURIHash(dst)
|
||||
afi.interface.browseTo(target, false)
|
||||
}
|
||||
}
|
||||
|
||||
function init() {
|
||||
afi.elements = {
|
||||
itemlinks: Array.from(document.querySelectorAll('a.item-links')),
|
||||
table: document.getElementById("index-table"),
|
||||
badge: document.getElementById("badge"),
|
||||
path: document.getElementById("path"),
|
||||
uploader: document.getElementById("clickupload"),
|
||||
nav: document.getElementById("nav"),
|
||||
title: document.head.querySelector("title"),
|
||||
dropGrid: document.getElementById("drop-grid"),
|
||||
barDisplay: document.getElementById("bar-display"),
|
||||
barProc: document.getElementById("bar-proc"),
|
||||
helpPanel: document.getElementById('help-panel'),
|
||||
helpToggle: document.getElementById('help-toggle'),
|
||||
}
|
||||
|
||||
afi.auth.checkAuth().then(() => {
|
||||
afi.utils.updateButtons();
|
||||
});
|
||||
|
||||
afi.interface.setBreadcrumbs()
|
||||
afi.elements.uploader.addEventListener('change', () => {
|
||||
const files = Array.from(afi.elements.uploader.files);
|
||||
|
||||
files.forEach(file => {
|
||||
if (!afi.utils.isDupe(file.name)) {
|
||||
afi.uploader.uploadFile(file, '/' + file.name);
|
||||
}
|
||||
});
|
||||
}, false);
|
||||
afi.elements.dropGrid.ondragend = afi.elements.dropGrid.ondragexit = afi.elements.dropGrid.ondragleave = e => {
|
||||
afi.utils.cancelDefault(e)
|
||||
afi.elements.dropGrid.style.display = 'none'
|
||||
}
|
||||
let draggingSrc
|
||||
document.ondragenter = e => {
|
||||
afi.utils.cancelDefault(e)
|
||||
afi.utils.resetHighlight()
|
||||
if (!draggingSrc) {
|
||||
afi.elements.dropGrid.style.display = 'flex'
|
||||
e.dataTransfer.dropEffect = 'copy'
|
||||
} else if (draggingSrc) {
|
||||
const t = getClosestRow(e.target)
|
||||
afi.utils.isFolder(t.firstChild) && setHighlight(t)
|
||||
}
|
||||
}
|
||||
|
||||
afi.elements.itemlinks.forEach(link => {
|
||||
const row = link.parentElement.parentElement.parentElement.querySelector('.item-icon');
|
||||
if (!row) return;
|
||||
|
||||
let clickTimer = null;
|
||||
let isDoubleClick = false;
|
||||
|
||||
row.addEventListener('click', (e) => {
|
||||
if (link.innerText === '../') return;
|
||||
if (clickTimer) {
|
||||
clearTimeout(clickTimer);
|
||||
clickTimer = null;
|
||||
}
|
||||
|
||||
clickTimer = setTimeout(() => {
|
||||
if (!isDoubleClick) {
|
||||
e.stopPropagation();
|
||||
if (confirm('确认删除此项目?')) {
|
||||
afi.rpc.rmCall(afi.utils.prependPath(link.getAttribute('href')), afi.utils.refresh);
|
||||
}
|
||||
}
|
||||
isDoubleClick = false;
|
||||
clickTimer = null;
|
||||
}, 300);
|
||||
});
|
||||
|
||||
row.addEventListener('dblclick', (e) => {
|
||||
e.stopPropagation();
|
||||
|
||||
isDoubleClick = true;
|
||||
|
||||
if (clickTimer) {
|
||||
clearTimeout(clickTimer);
|
||||
clickTimer = null;
|
||||
}
|
||||
|
||||
if (link.innerText === '../') return;
|
||||
|
||||
const newName = prompt('新名称或目标地址', link.innerText);
|
||||
if (newName && !afi.utils.isDupe(newName)) {
|
||||
afi.rpc.mvCall(
|
||||
afi.utils.prependPath(link.innerText),
|
||||
afi.utils.prependPath(newName),
|
||||
afi.utils.refresh
|
||||
);
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
isDoubleClick = false;
|
||||
}, 100);
|
||||
});
|
||||
});
|
||||
document.ondragstart = e => { draggingSrc = e.target.innerHTML }
|
||||
document.ondragend = e => resetHighlight()
|
||||
document.ondragover = e => { afi.utils.cancelDefault(e); return false }
|
||||
|
||||
document.ondrop = e => {
|
||||
|
||||
afi.utils.cancelDefault(e)
|
||||
afi.elements.dropGrid.style.display = 'none'
|
||||
const t = afi.utils.getHighlight().firstChild
|
||||
|
||||
if (draggingSrc && t) {
|
||||
const dest = t.innerHTML + draggingSrc
|
||||
afi.consts.ensureDrop() || afi.rpc.mvCall(afi.utils.prependPath(draggingSrc), afi.utils.prependPath(dest), afi.utils.refresh)
|
||||
} else if (e.dataTransfer.items.length) {
|
||||
Array.from(e.dataTransfer.items).forEach(afi.interface.pushEntry.bind(afi.interface))
|
||||
}
|
||||
|
||||
afi.utils.resetHighlight()
|
||||
draggingSrc = null
|
||||
return false
|
||||
}
|
||||
console.log('[AFI] Initialized')
|
||||
}
|
||||
|
||||
window.onload = init
|
||||
387
ui/style.css
387
ui/style.css
@@ -1,387 +0,0 @@
|
||||
@import url('https://fonts.loli.net/css2?family=Cascadia+Code:ital,wght@0,200..700;1,200..700&display=swap');
|
||||
@import url("https://fonts.loli.net/css2?family=Noto+Sans+SC:wght@400;700&display=swap");
|
||||
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--background-darker: #eeeeee;
|
||||
--background-verydarker: #dddddd;
|
||||
--foreground: #454545;
|
||||
--accent: #0f59a4;
|
||||
--accent-lighten: #2793ff;
|
||||
/*本来有color-mix的, 可惜支持太新*/
|
||||
--radius: 0;
|
||||
--font-size: 1rem;
|
||||
--line-height: 1.54em;
|
||||
}
|
||||
|
||||
html {
|
||||
/* 预留滚动条空间，但不会让背景色断开，保持内容稳定 */
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
#index-table th:nth-child(5) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#index-table td:nth-child(6) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ellipsis {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
line-clamp: 2;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.desktoponly {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#index-table th:last-child,
|
||||
#index-table td:last-child {
|
||||
text-align: right;
|
||||
padding: 0.25em 0 !important;
|
||||
}
|
||||
|
||||
#index-table th:nth-child(2),
|
||||
#index-table td:nth-child(3) {
|
||||
width: 52%;
|
||||
}
|
||||
|
||||
#index-table th:nth-child(3),
|
||||
#index-table td:nth-child(4) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: "Cascadia Code", "Noto Sans SC", system-ui, sans-serif;
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: var(--background);
|
||||
padding: 4px 32px 4px 20px;
|
||||
border-bottom: 1px solid var(--background-verydarker);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.logo-img {
|
||||
display: inline-block;
|
||||
height: calc(8px + 1em);
|
||||
width: auto;
|
||||
padding: 0 1em 0 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#nav {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
#operations {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.operation {
|
||||
padding: 4px 0px;
|
||||
border-color: transparent;
|
||||
color: var(--accent);
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.ellipsis {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
#index-table {
|
||||
margin: 20px 20px 0 20px;
|
||||
width: auto;
|
||||
border-collapse: collapse;
|
||||
background: var(--background);
|
||||
overflow: auto;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#index-table th,
|
||||
#index-table td {
|
||||
/*hack td高度计算的怪异标准(明确指定), 不然icon的div没高度显示不了icon*/
|
||||
height: 1px;
|
||||
text-align: left;
|
||||
/*Noto Fonts SC 和 Cascadia Code(以及各种utf-8 fallback字体) 的em不同, 所以用父元素统一基准, 不用子元素(可能没中文), 不然icon大小不齐*/
|
||||
/*然后导致rem不能有可变的多语言内容, 不然页面之间照样变*/
|
||||
/*css设计时就不能设置以指定字体为参照的em吗? 本来这个问题能用ie盒模型+"指定字体e"解决的 这下非要导致每行content间距可能不一样*/
|
||||
padding: 0.25rem 0.5rem;
|
||||
/*em单位简直毫不兼容且毫无预测性*/
|
||||
/*连ex这种东西都设计出来了 就不能设计一个e(任意字符)吗? */
|
||||
/*最终在icon用px+硬编码数字 懒得折腾了*/
|
||||
/*真空球形鸡设计*/
|
||||
}
|
||||
|
||||
#index-table thead th {
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
/*英文标题大写, 虽然我用中文*/
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
#index-table tbody th,
|
||||
#index-table tbody td {
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--background-darker);
|
||||
}
|
||||
|
||||
#index-table tr:hover {
|
||||
background: var(--background-darker);
|
||||
}
|
||||
|
||||
#index-table th:nth-child(1) {
|
||||
min-width: 2.5em;
|
||||
padding: 0.25em 0;
|
||||
}
|
||||
|
||||
#index-table td:nth-child(1) {
|
||||
width: 1.5em;
|
||||
padding: 0.25em 0;
|
||||
}
|
||||
|
||||
#index-table td:nth-child(2) {
|
||||
width: 0.5em;
|
||||
padding: 0.25em 0em;
|
||||
/*就一个'>'号*/
|
||||
}
|
||||
|
||||
#index-table th:nth-child(2),
|
||||
#index-table td:nth-child(3) {
|
||||
max-width: 0;
|
||||
/*允许压缩*/
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
#index-table th:nth-child(3),
|
||||
#index-table td:nth-child(4) {
|
||||
width: auto
|
||||
/*能占就占满*/
|
||||
}
|
||||
|
||||
#index-table th:nth-child(4) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#index-table td:nth-child(5) {
|
||||
text-align: right;
|
||||
width: 3em;
|
||||
}
|
||||
|
||||
#index-table th:nth-child(5) {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#index-table td:nth-child(6) {
|
||||
width: 12em;
|
||||
}
|
||||
|
||||
#index-table th:last-child,
|
||||
#index-table td:last-child {
|
||||
text-align: right;
|
||||
padding-right: 2em;
|
||||
max-width: 0;
|
||||
/*允许压缩*/
|
||||
min-width: 4em;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
footer {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 2px 12px 4px 12px;
|
||||
background: var(--background);
|
||||
border-top: 1px solid var(--background-verydarker);
|
||||
font-size: 12px;
|
||||
color: var(--foreground);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
@keyframes fade {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
20% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
80% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.pulse {
|
||||
animation: fade 5s 1;
|
||||
}
|
||||
|
||||
.item-selected::before {
|
||||
content: ">";
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
color: var(--accent);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
background-color: var(--accent-lighten);
|
||||
}
|
||||
|
||||
|
||||
#drop-grid {
|
||||
align-items: center;
|
||||
display: none;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
left: 0px;
|
||||
z-index: 999;
|
||||
border: 5px dashed var(--accent);
|
||||
margin: 0px;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
font-size: 4em;
|
||||
color: var(--accent);
|
||||
opacity: 1;
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
#drop-grid::after {
|
||||
content: "释放光标以传输文件";
|
||||
color: var(--foreground);
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#notification {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 0 0;
|
||||
}
|
||||
|
||||
#notification * {
|
||||
padding: 0 0;
|
||||
}
|
||||
|
||||
#statbar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 0 0;
|
||||
}
|
||||
|
||||
#statbar * {
|
||||
padding: 0 0;
|
||||
}
|
||||
|
||||
.nav:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
height: 16px;
|
||||
width: auto;
|
||||
/*垃圾css*/
|
||||
cursor: pointer;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.type-icon-folder {
|
||||
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNzc0NjkwMDA5MjU1IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjEwNTMwIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiPjxwYXRoIGQ9Ik04ODAgMjk4LjRINTIxTDQwMy43IDE4Ni4yYy0xLjUtMS40LTMuNS0yLjItNS41LTIuMkgxNDRjLTE3LjcgMC0zMiAxNC4zLTMyIDMydjU5MmMwIDE3LjcgMTQuMyAzMiAzMiAzMmg3MzZjMTcuNyAwIDMyLTE0LjMgMzItMzJWMzMwLjRjMC0xNy43LTE0LjMtMzItMzItMzJ6TTg0MCA3NjhIMTg0VjI1NmgxODguNWwxMTkuNiAxMTQuNEg4NDBWNzY4eiIgcC1pZD0iMTA1MzEiPjwvcGF0aD48L3N2Zz4=") !important;
|
||||
}
|
||||
|
||||
.type-icon-file {
|
||||
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNzc0Njg5OTcyMTU2IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjUzNDAiIGRhdGEtc3BtLWFuY2hvci1pZD0iYTMxM3guc2VhcmNoX2luZGV4LjAuaTEuM2YwMTNhODFMUkJncXMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTg1NC42IDI4OC42TDYzOS40IDczLjRjLTYtNi0xNC4xLTkuNC0yMi42LTkuNEgxOTJjLTE3LjcgMC0zMiAxNC4zLTMyIDMydjgzMmMwIDE3LjcgMTQuMyAzMiAzMiAzMmg2NDBjMTcuNyAwIDMyLTE0LjMgMzItMzJWMzExLjNjMC04LjUtMy40LTE2LjctOS40LTIyLjd6TTc5MC4yIDMyNkg2MDJWMTM3LjhMNzkwLjIgMzI2eiBtMS44IDU2MkgyMzJWMTM2aDMwMnYyMTZjMCAyMy4yIDE4LjggNDIgNDIgNDJoMjE2djQ5NHoiIHAtaWQ9IjUzNDEiIGRhdGEtc3BtLWFuY2hvci1pZD0iYTMxM3guc2VhcmNoX2luZGV4LjAuaTIuM2YwMTNhODFMUkJncXMiPjwvcGF0aD48L3N2Zz4=");
|
||||
}
|
||||
|
||||
#help-panel {
|
||||
display: flex;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#help-panel h3 {
|
||||
padding: 0.2em 0 0 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#help-panel p {
|
||||
padding: 0.3em 0 0.5em 0;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
#help-panel table {
|
||||
border-collapse: collapse;
|
||||
align-items: center;
|
||||
width: 40em;
|
||||
max-height: 10em;
|
||||
min-width: 30em;
|
||||
max-width: 50%;
|
||||
margin: auto;
|
||||
border: 4px solid var(--foreground);
|
||||
}
|
||||
|
||||
#help-panel table td {
|
||||
border: 2px solid var(--background-darker);
|
||||
}
|
||||
|
||||
#help-panel table * {
|
||||
padding: 0.3em 1em;
|
||||
}
|
||||
Reference in New Issue
Block a user