Files
AFI/ui/ui.html
2026-04-02 07:45:43 +08:00

205 lines
7.5 KiB
HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>{{.Title}}</title>
<link rel="preconnect" href="https://fonts.loli.net">
<link href="data:image/svg+xml;base64,favicon_will_be_here" rel="icon" type="image/svg+xml" />
<style type="text/css">
css_will_be_here
</style>
<script>
readonly = {{.Ro }}
extraPath = {{.ExtraPath }}.slice(0, -1)
js_will_be_here
</script>
</head>
<body>
<input type="file" id="clickupload" multiple style="display:none" />
<header>
<a href="/"><img class="logo-img" src="data:image/svg+xml;base64,favicon_will_be_here" /></a>
<span class="nav" id="nav">{{.Path}}</span>
<span id="path" style="display: none;" onclick="return afi.directcall.bread_click(event)">{{.Path}}</span>
<div id="operations">
{{if not .Ro}}
<a onclick="document.getElementById('clickupload').click()" class="operation">上传文件</a>
<a onclick="afi.directcall.exec_touch()" class="operation">新建文件</a>
<a onclick="afi.directcall.exec_mkdir()" class="operation">新建目录</a>
<a onclick="afi.directcall.exec_mv()" class="operation">移动对象</a>
<a onclick="afi.directcall.exec_rm()" class="operation">递归删除</a>
<a onclick="" class="operation">登出</a>
{{end}}
{{if .Ro}}
<a onclick="" class="operation">登录</a>
{{end}}
<a onclick="afi.utils.helpOn()" class="operation" id="help-toggle">帮助菜单</a>
</div>
</header>
<table id="index-table">
<thead>
<tr>
<th colspan="2">图标</th>
<th>名称</th>
<th><!--我是占位的--></th>
<th>大小</th>
<th>类型</th>
<th>备注</th>
</tr>
</thead>
<tbody>
{{range .RowsFolders}}
<tr>
<td>
<div class="item-icon type-icon-folder"></div>
</td>
<td>
<div class="item-selector"></div>
</td>
<td>
<div class="item-name"><a class="item-links" href="{{.Href}}/"><span
class="ellipsis">{{.Name}}</span></a></div>
</td>
<td><!--我是占位的--></td>
<td>
<div class="item-size">{{.Size}}</div>
</td>
<td>
<div class="item-type">{{.Mime}}</div>
</td>
<td>
<div class="item-desc"><span class="ellipsis">{{.Desc}}</span></div>
</td>
</tr>
{{end}}
{{range .RowsFiles}}
<tr>
<td>
<div class="item-icon type-icon-file type-icon-{{.Ext}}"></div>
</td>
<td>
<div class="item-selector"></div>
</td>
<td>
<div class="item-name"><a class="item-links" href="{{.Href}}" download><span
class="ellipsis">{{.Name}}</span></a>
</div>
</td>
<td><!--我是占位的--></td>
<td>
<div class="item-size">{{.Size}}</div>
</td>
<td>
<div class="item-type">{{.Mime}}</div>
</td>
<td>
<div class="item-desc"><span class="ellipsis">{{.Desc}}</span></div>
</td>
</tr>
{{end}}
</tbody>
</table>
<div style="display: none;" onclick="afi.utils.helpOff()" id="help-panel">
<br>
<h3>帮助信息与按键绑定</h3>
<p>^[X] 表示组合键 Ctrl + [X] 或 Meta + [X]</p>
<table>
<tbody>
<tr>
<td>使用键盘浏览文件系统</td>
<td>方向键与回车</td>
</tr>
<tr>
<td>上传项目</td>
<td>拖放外部文件或文件夹到窗口内部;<br>单击按钮或 ^U / Shift + U 以呼出文件上传菜单</td>
</tr>
<tr>
<td>移动项目</td>
<td>直接拖放界面内的项目;<br>对选中项 ^X, 并在目标目录中 ^V</td>
</tr>
<tr>
<td>下载为归档文件(.zip)</td>
<td>Ctrl + 单击任一项目;<br>对选中项 ^↵</td>
</tr>
<tr>
<td>复制链接</td>
<td>右键任一项目复制;<br>对选中项 ^C</td>
</tr>
<tr>
<td>重命名项目</td>
<td>单击任一文件图标;<br>对选中项 ^E</td>
</tr>
<tr>
<td>删除项目</td>
<td>双击任一文件图标;<br>对选中项 ^⌫</td>
</tr>
<tr>
<td>新建文件夹</td>
<td>^M</td>
</tr>
<tr>
<td>复制多种校验和</td>
<td>对选中项目 ^Z</td>
</tr>
<tr>
<td>进行模糊搜索匹配</td>
<td>单独输入其他任意内容</td>
</tr>
</tbody>
</table>
<br>
<h3>关于 AFI</h3>
<p>AFI (敏捷文件索引器) 是 Go 编写的轻量级文件服务器.<br>
AFI 是基于 Gossa 的现代化改进与维护分支, 以 MIT 协议在<a href="">此处</a>开放源代码.<br>
您可在仓库网页中的 Issues 内反馈缺陷, 提出需求或想法 ^v^</p>
</div>
<div onclick="afi.sumsOff()" style="display: none;" id="sums">
<table id="sumsTable">
<thead>
<tr>
<td>按键</td>
<td>哈希算法</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>复制 sha1 校验和</td>
</tr>
<tr>
<td>2</td>
<td>复制 sha256 校验和</td>
</tr>
<tr>
<td>3</td>
<td>复制 sha512 校验和</td>
</tr>
<tr>
<td>5</td>
<td>复制 md5 校验和</td>
</tr>
</tbody>
</table>
</div>
<div class="placeholder"><!--我是液压机--></div>
<div id="drop-grid"></div>
<footer>
<div id="about">AFI - 轻巧敏捷的文件服务器</div>
<div style="display: inline-block;">
<div id="notification" style="display: inline-block;">
<span style="display: none;" id="badge"></span>
</div>
<div id="statbar" style="display: inline-block;">
<span id="bar-proc"></span>
<span id="bar-display" style="display: none;"></span>
<span id="bar-checksum" style="display: none;"></span>
</div>
<div id="timestamp" style="display: inline-block;">页面生成于 {{.TimeStamp}}</div>
</div>
</footer>
</body>
</html>