y

code/file-preview/test.html

@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <title>附件管理示例</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      background: #f5f7fa;
+      padding: 20px;
+    }
+
+```
+/* 顶部工具栏 */
+.file-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 10px;
+  padding: 10px;
+  background: #fff;
+  border: 1px solid #eee;
+}
+
+.file-toolbar button {
+  padding: 4px 10px;
+  border: 1px solid #ccc;
+  background: #fff;
+  cursor: pointer;
+}
+
+/* 列表 */
+.file-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  background: #fff;
+  border: 1px solid #eee;
+}
+
+.file-item {
+  display: flex;
+  align-items: center;
+  padding: 10px 12px;
+  border-bottom: 1px solid #f0f0f0;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.file-item:last-child {
+  border-bottom: none;
+}
+
+/* hover */
+.file-item:hover {
+  background: #f5f7fa;
+}
+
+/* 模拟选中状态 */
+.file-item.active {
+  background: #e6f7ff;
+}
+
+/* checkbox */
+.file-select {
+  margin-right: 10px;
+}
+
+/* 文件名 */
+.file-name {
+  flex: 1;
+  color: #1890ff;
+  cursor: pointer;
+  user-select: none;
+}
+
+.file-name:hover {
+  text-decoration: underline;
+}
+
+/* 操作区 */
+.file-actions {
+  display: none;
+  gap: 6px;
+}
+
+.file-item:hover .file-actions {
+  display: flex;
+}
+
+.file-actions button {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 14px;
+  padding: 4px;
+}
+
+.file-actions button:hover {
+  background: #eee;
+  border-radius: 4px;
+}
+```
+
+  </style>
+</head>
+<body>
+
+  <!-- 工具栏 -->
+
+  <div class="file-toolbar">
+    <span>已选 0 个</span>
+    <button>删除</button>
+    <button>下载</button>
+  </div>
+
+  <!-- 文件列表 -->
+
+  <ul class="file-list">
+    <li class="file-item active">
+      <label class="file-select">
+        <input type="checkbox" checked />
+      </label>
+
+```
+  <span class="file-name">合同.pdf</span>
+
+  <div class="file-actions">
+    <button title="预览">👁</button>
+    <button title="下载">⬇</button>
+    <button title="删除">🗑</button>
+  </div>
+</li>
+
+<li class="file-item">
+  <label class="file-select">
+    <input type="checkbox" />
+  </label>
+
+  <span class="file-name">图片.png</span>
+
+  <div class="file-actions">
+    <button title="预览">👁</button>
+    <button title="下载">⬇</button>
+    <button title="删除">🗑</button>
+  </div>
+</li>
+
+<li class="file-item">
+  <label class="file-select">
+    <input type="checkbox" />
+  </label>
+
+  <span class="file-name">说明文档.docx</span>
+
+  <div class="file-actions">
+    <button title="预览">👁</button>
+    <button title="下载">⬇</button>
+    <button title="删除">🗑</button>
+  </div>
+</li>
+```
+
+  </ul>
+
+</body>
+</html>