u
This commit is contained in:
oneao committed
1 parent
3464bc7907
commit
3620369d47
9 files changed
+1270
-635
No files matched your search
@@ -0,0 +1,55 @@
|
||||
# g3-file-actions 修改计划
|
||||
|
||||
## 需求分析
|
||||
|
||||
用户要求修改 `g3-file-item` 中的 `g3-file-actions`：
|
||||
|
||||
1. **默认不显示，hover 时显示**：操作按钮默认隐藏，鼠标悬停在文件项上时才显示
|
||||
2. **根据 getActionMenu 动态显示 more 按钮**：如果 `getActionMenu` 返回空数组或为空，则不显示「更多」(more) 操作按钮
|
||||
|
||||
## 修改内容
|
||||
|
||||
### 1. CSS 修改（index.css）
|
||||
|
||||
修改 `.g3-file-actions` 的样式，使其默认隐藏，hover 时显示：
|
||||
|
||||
```css
|
||||
.g3-file-actions {
|
||||
display: none; /* 默认隐藏 */
|
||||
/* ... 其他样式 */
|
||||
}
|
||||
|
||||
.g3-file-item:hover .g3-file-actions {
|
||||
display: flex; /* hover 时显示 */
|
||||
}
|
||||
```
|
||||
|
||||
### 2. JavaScript 修改（index.js）
|
||||
|
||||
修改 `createFileItem` 方法，动态判断是否渲染 `g3-action-more` 按钮：
|
||||
|
||||
- 在生成文件项 HTML 前，先调用 `getActionMenu(file)` 获取自定义菜单
|
||||
- 如果返回结果为空（空数组或 undefined），则不渲染 `g3-action-more` 按钮
|
||||
|
||||
## 文件列表
|
||||
|
||||
- `d:\workspace\code\file-preview\g3-file\index.css` - 修改样式
|
||||
- `d:\workspace\code\file-preview\g3-file\index.js` - 修改 createFileItem 方法
|
||||
|
||||
## 风险评估
|
||||
|
||||
1. **兼容性风险**：修改 hover 显示可能影响现有交互逻辑，需确保不影响其他功能
|
||||
2. **性能风险**：每次渲染文件项都会调用 getActionMenu，需确保该函数执行效率
|
||||
3. **样式风险**：hover 显示可能影响布局，需要适当调整定位
|
||||
|
||||
## 实施步骤
|
||||
|
||||
1. 修改 CSS 文件，添加 hover 显示逻辑
|
||||
2. 修改 createFileItem 方法，根据 getActionMenu 结果动态渲染 more 按钮
|
||||
3. 测试验证功能是否正常工作
|
||||
|
||||
## 预期效果
|
||||
|
||||
- 文件项默认只显示基本信息（文件名、大小、状态等）
|
||||
- 鼠标悬停时显示操作按钮（预览、下载、更多）
|
||||
- 如果没有自定义菜单，「更多」按钮不显示
|
||||
@@ -0,0 +1,60 @@
|
||||
# g3-file-actions 修改计划
|
||||
|
||||
## 需求分析
|
||||
|
||||
用户要求修改 `g3-file-item` 中的 `g3-file-actions`：
|
||||
|
||||
1. **默认不显示，hover 时显示**：操作按钮默认隐藏，鼠标悬停在文件项上时才显示
|
||||
2. **根据 getActionMenu 动态显示 more 按钮**：如果 `getActionMenu` 返回空数组或为空，则不显示「更多」(more) 操作按钮
|
||||
|
||||
## 修改内容
|
||||
|
||||
### 1. CSS 修改（index.css）
|
||||
|
||||
修改 `.g3-file-actions` 的样式，使其默认隐藏，hover 时显示：
|
||||
|
||||
```css
|
||||
.g3-file-actions {
|
||||
display: none; /* 默认隐藏 */
|
||||
/* ... 其他样式 */
|
||||
}
|
||||
|
||||
.g3-file-item:hover .g3-file-actions {
|
||||
display: flex; /* hover 时显示 */
|
||||
}
|
||||
```
|
||||
|
||||
### 2. JavaScript 修改（index.js）
|
||||
|
||||
修改 `createFileItem` 方法，动态判断是否渲染 `g3-action-more` 按钮：
|
||||
|
||||
* 在生成文件项 HTML 前，先调用 `getActionMenu(file)` 获取自定义菜单
|
||||
|
||||
* 如果返回结果为空（空数组或 undefined），则不渲染 `g3-action-more` 按钮
|
||||
|
||||
## 文件列表
|
||||
|
||||
* `d:\workspace\code\file-preview\g3-file\index.css` - 修改样式
|
||||
|
||||
* `d:\workspace\code\file-preview\g3-file\index.js` - 修改 createFileItem 方法
|
||||
|
||||
## 风险评估
|
||||
|
||||
1. **兼容性风险**：修改 hover 显示可能影响现有交互逻辑，需确保不影响其他功能
|
||||
2. **性能风险**：每次渲染文件项都会调用 getActionMenu，需确保该函数执行效率
|
||||
3. **样式风险**：hover 显示可能影响布局，需要适当调整定位
|
||||
|
||||
## 实施步骤
|
||||
|
||||
1. 修改 CSS 文件，添加 hover 显示逻辑
|
||||
2. 修改 createFileItem 方法，根据 getActionMenu 结果动态渲染 more 按钮
|
||||
3. 测试验证功能是否正常工作
|
||||
|
||||
## 预期效果
|
||||
|
||||
* 文件项默认只显示基本信息（文件名、大小、状态等）
|
||||
|
||||
* 鼠标悬停时显示操作按钮（预览、下载、更多）
|
||||
|
||||
* 如果没有自定义菜单，「更多」按钮不显示
|
||||
|
||||
@@ -0,0 +1,143 @@
|
||||
# Modal 预览功能实现计划
|
||||
|
||||
## 需求分析
|
||||
|
||||
用户需要实现双击文件项弹出 modal 预览的功能，具体要求：
|
||||
|
||||
1. 双击 `file-item` 触发 modal 预览
|
||||
2. modal 需设计为通用组件，便于后续复用
|
||||
3. modal header：title 居中显示文件名，右侧包含最小化/最大化/关闭按钮
|
||||
4. modal content：预览区域，与现有单击预览布局一致
|
||||
5. 支持左右切换预览文件
|
||||
6. 文件名作为 modal 的 title
|
||||
|
||||
## 实现方案
|
||||
|
||||
### 1. CSS 修改 (index.css)
|
||||
|
||||
添加通用 modal 样式，包括：
|
||||
|
||||
* `.g3-modal`: modal 遮罩层
|
||||
|
||||
* `.g3-modal-content`: modal 主体容器
|
||||
|
||||
* `.g3-modal-header`: 头部区域，包含 title 和操作按钮
|
||||
|
||||
* `.g3-modal-title`: 居中的标题
|
||||
|
||||
* `.g3-modal-actions`: 右侧操作按钮组（min/max/close）
|
||||
|
||||
* `.g3-modal-body`: 预览内容区域
|
||||
|
||||
* `.g3-modal-preview`: 预览内容布局（与现有预览一致）
|
||||
|
||||
* `.g3-modal-footer`: 底部区域，现在预览用不到，但是仍然需要保留，方便以后使用
|
||||
|
||||
### 2. JavaScript 修改 (index.js)
|
||||
|
||||
添加以下功能：
|
||||
|
||||
* `openModal(fileId)`: 打开 modal 并显示指定文件预览
|
||||
|
||||
* `closeModal()`: 关闭 modal
|
||||
|
||||
* `toggleModalSize()`: 切换 modal 大小（最大化/还原）
|
||||
|
||||
* `modalPrev()`: modal 内预览上一个文件
|
||||
|
||||
* `modalNext()`: modal 内预览下一个文件
|
||||
|
||||
* `updateModalPreview()`: 更新 modal 预览内容
|
||||
|
||||
* 双击事件绑定
|
||||
|
||||
* 同时需要考虑国际化，国际化配置在 language.js
|
||||
|
||||
* 图标配置在 icon.js
|
||||
|
||||
### 3. 关键设计
|
||||
|
||||
**双预览状态分离**：
|
||||
|
||||
* `currentPreviewFileId`: 右侧面板预览的文件 ID
|
||||
|
||||
* `currentModalFileId`: modal 预览的文件 ID（独立状态）
|
||||
|
||||
**通用 modal 设计**：
|
||||
|
||||
* modal 使用固定定位，居中显示
|
||||
|
||||
* 支持最大化/还原
|
||||
|
||||
* 点击遮罩层可关闭
|
||||
|
||||
**预览内容复用**：
|
||||
|
||||
* 提取公共预览内容生成逻辑
|
||||
|
||||
* modal 内预览布局与右侧面板保持一致
|
||||
|
||||
## 修改文件列表
|
||||
|
||||
| 文件 | 修改类型 | 说明 |
|
||||
| ------------------- | ---- | ------------------ |
|
||||
| `g3-file/index.css` | 添加 | 添加 modal 相关样式 |
|
||||
| `g3-file/index.js` | 修改 | 添加 modal 相关方法和事件绑定 |
|
||||
|
||||
## 步骤分解
|
||||
|
||||
1. **添加 modal CSS 样式**
|
||||
|
||||
* 遮罩层样式
|
||||
|
||||
* modal 主体样式
|
||||
|
||||
* header 样式（title 居中，按钮组）
|
||||
|
||||
* body 样式（预览区域）
|
||||
|
||||
2. **添加 modal HTML 结构**
|
||||
|
||||
* 在 render 方法中添加 modal 模板
|
||||
|
||||
3. **添加 modal 控制方法**
|
||||
|
||||
* `openModal(fileId)`
|
||||
|
||||
* `closeModal()`
|
||||
|
||||
* `toggleModalSize()`
|
||||
|
||||
* `modalPrev()`
|
||||
|
||||
* `modalNext()`
|
||||
|
||||
* `updateModalPreview()`
|
||||
|
||||
4. **绑定双击事件**
|
||||
|
||||
* 在文件列表事件委托中添加 dblclick 事件
|
||||
|
||||
5. **初始化 modal DOM 引用**
|
||||
|
||||
* 在 render 方法中保存 modal 相关 DOM 引用
|
||||
|
||||
## 风险考虑
|
||||
|
||||
1. **状态冲突**：双击和单击可能同时触发，需确保状态隔离
|
||||
2. **内存泄漏**：modal 关闭时需清理 iframe 资源
|
||||
3. **样式冲突**：modal 样式需独立命名空间，避免与现有样式冲突
|
||||
4. **响应式布局**：modal 需要适配不同屏幕尺寸
|
||||
|
||||
## 预期效果
|
||||
|
||||
* 双击文件项弹出居中的 modal
|
||||
|
||||
* modal 头部显示文件名，右侧有操作按钮
|
||||
|
||||
* 预览内容与右侧面板布局一致，支持左右切换
|
||||
|
||||
* 最大化时 modal 占满整个屏幕
|
||||
|
||||
* 点击遮罩层或 close 按钮关闭 modal
|
||||
|
||||
@@ -20,24 +20,29 @@ var G3FileIcons = {
|
||||
more: `
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M17 12h.01M12 12h.01M7 12h.01"/></g></svg>
|
||||
`,
|
||||
|
||||
|
||||
},
|
||||
file: {
|
||||
default: '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><!-- Icon from Fluent UI System Color Icons by Microsoft Corporation - https://github.com/microsoft/fluentui-system-icons/blob/main/LICENSE --><g fill="none"><path fill="url(#SVGsXCcfeOf)" d="M8.004 1L9.5 4.5L13 6l-.008 7.5a1.5 1.5 0 0 1-1.5 1.5H4.5A1.5 1.5 0 0 1 3 13.5v-11A1.5 1.5 0 0 1 4.5 1z"/><path fill="url(#SVGUVHt30XG)" fill-opacity=".5" d="M8.004 1L9.5 4.5L13 6l-.008 7.5a1.5 1.5 0 0 1-1.5 1.5H4.5A1.5 1.5 0 0 1 3 13.5v-11A1.5 1.5 0 0 1 4.5 1z"/><path fill="url(#SVG176kqd6n)" d="M8 4.5V1l5 5H9.5A1.5 1.5 0 0 1 8 4.5"/><defs><linearGradient id="SVGsXCcfeOf" x1="9.994" x2="11.264" y1="1" y2="12.781" gradientUnits="userSpaceOnUse"><stop stop-color="#6CE0FF"/><stop offset="1" stop-color="#4894FE"/></linearGradient><linearGradient id="SVG176kqd6n" x1="10.492" x2="9.242" y1="3.083" y2="5.167" gradientUnits="userSpaceOnUse"><stop stop-color="#9FF0F9"/><stop offset="1" stop-color="#B3E0FF"/></linearGradient><radialGradient id="SVGUVHt30XG" cx="0" cy="0" r="1" gradientTransform="rotate(130.372 6.372 3.818)scale(8.35524 4.87457)" gradientUnits="userSpaceOnUse"><stop offset=".362" stop-color="#4A43CB"/><stop offset="1" stop-color="#4A43CB" stop-opacity="0"/></radialGradient></defs></g></svg>',
|
||||
audio:`<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Ultimate color icons by Streamline - https://creativecommons.org/licenses/by/4.0/ --><g fill="none"><path fill="#66e1ff" d="M21.087 6.71v15.334a.956.956 0 0 1-.957.956H3.87a.957.957 0 0 1-.957-.956V1.957A.957.957 0 0 1 3.87 1h11.507q.467 0 .927.086v3.74a.957.957 0 0 0 .957.957H21q.086.46.086.927"/><path fill="#c2f3ff" d="M16.64 5.553L2.912 19.289V1.957A.957.957 0 0 1 3.87 1h11.507q.467 0 .927.086v3.74a1 1 0 0 0 .335.727"/><path fill="#fff" d="M21.001 5.783h-3.74a.957.957 0 0 1-.956-.957v-3.74A5.67 5.67 0 0 1 21 5.783"/><path stroke="#191919" stroke-linecap="round" stroke-linejoin="round" d="M21.087 6.71v15.334a.956.956 0 0 1-.957.956H3.87a.957.957 0 0 1-.957-.956V1.957A.957.957 0 0 1 3.87 1h11.507q.467 0 .927.086v3.74a.957.957 0 0 0 .957.957H21q.086.46.086.927"/><path stroke="#191919" stroke-linecap="round" stroke-linejoin="round" d="M21.001 5.783h-3.74a.957.957 0 0 1-.956-.957v-3.74A5.67 5.67 0 0 1 21 5.783M5.783 18.217v-5.739l1.434 2.87l1.435-2.87v5.74m4.783-4.305A1.435 1.435 0 0 1 12 15.348h-1.435v-2.87H12a1.435 1.435 0 0 1 1.435 1.435m-2.87 4.304v-2.87m4.783-1.721a1.066 1.066 0 0 1 .956-1.148h.724a1.33 1.33 0 0 1 1.19 1.435a1.33 1.33 0 0 1-1.194 1.435a1.33 1.33 0 0 1 1.193 1.435a1.33 1.33 0 0 1-1.189 1.434h-.724a1.066 1.066 0 0 1-.956-1.147"/></g></svg>`,
|
||||
video:`<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path fill="#e75749" d="M4.5 2.375A2.56 2.56 0 0 1 5.861 2h20.366a2.545 2.545 0 0 1 2.423 1.951a3.4 3.4 0 0 1 .072.862v11.176h-1.573a2 2 0 0 0-.22.022a5 5 0 0 0-.581-.011c-.3.007-.61-.014-.914.014a2.3 2.3 0 0 0-.4-.02h-4.739c-.2 0-.392.008-.587-.01l.1-.065l-6.353-3.813v3.889c-2.213-.005-4.427 0-6.64 0a2 2 0 0 0-.251.021c-.212-.032-.427-.016-.642-.016c-.284.006-.57-.015-.853.015a2 2 0 0 0-.253-.022H3.275c.006-3.635 0-7.27 0-10.9a4.8 4.8 0 0 1 .071-1.131A2.54 2.54 0 0 1 4.5 2.375m.54 2.188a.64.64 0 0 0-.489.606v1.316a.64.64 0 0 0 .627.6h1.309a.64.64 0 0 0 .6-.608c.005-.426 0-.853 0-1.279a.64.64 0 0 0-.329-.575a.7.7 0 0 0-.358-.078H5.264a1 1 0 0 0-.224.018m20.341 0a.64.64 0 0 0-.474.607v1.306a.64.64 0 0 0 .6.608c.436.005.872 0 1.308 0a.64.64 0 0 0 .627-.606c.006-.438 0-.876 0-1.314a.64.64 0 0 0-.594-.621c-.348-.009-.7 0-1.045 0a2 2 0 0 0-.422.024ZM5.042 8.38a.64.64 0 0 0-.452.4a1.1 1.1 0 0 0-.041.386v1.135a.637.637 0 0 0 .6.6c.4.008.795 0 1.192 0a.8.8 0 0 0 .395-.065a.64.64 0 0 0 .36-.574V8.983a.64.64 0 0 0-.6-.624c-.338-.008-.677 0-1.016 0a2.4 2.4 0 0 0-.438.021m20.338 0a.64.64 0 0 0-.433.4a1.1 1.1 0 0 0-.041.387v1.131a.64.64 0 0 0 .608.607c.406.006.812 0 1.218 0a.74.74 0 0 0 .38-.078a.64.64 0 0 0 .335-.558V8.985a.637.637 0 0 0-.593-.622c-.349-.009-.7 0-1.047 0a2 2 0 0 0-.428.022ZM5.041 12.2a.64.64 0 0 0-.491.608c0 .438-.005.877 0 1.315a.64.64 0 0 0 .627.6h1.3a.64.64 0 0 0 .608-.607v-1.307a.64.64 0 0 0-.605-.626c-.348-.007-.7 0-1.045 0a2 2 0 0 0-.394.017m20.335.006a.64.64 0 0 0-.43.394a1.1 1.1 0 0 0-.041.386v1.131a.64.64 0 0 0 .607.608c.435.005.87 0 1.306 0a.64.64 0 0 0 .628-.605c.006-.438 0-.876 0-1.313a.637.637 0 0 0-.592-.622c-.349-.01-.7 0-1.046 0a2 2 0 0 0-.431.015Z"/><path fill="#fff" d="M13.458 12.1q3.176 1.908 6.353 3.813l-.1.065q-3.127 1.872-6.251 3.748V15.99q-.003-1.941-.002-3.89"/><path fill="#c0392b" d="M3.275 15.988h1.541a2 2 0 0 1 .253.022a.65.65 0 0 0-.409.273a.9.9 0 0 0-.111.518v1.045a.686.686 0 0 0 .685.689h1.192a.68.68 0 0 0 .657-.569c.008-.447 0-.9 0-1.343a.63.63 0 0 0-.521-.613a2 2 0 0 1 .251-.021h6.64v3.736q3.127-1.871 6.251-3.748c.2.018.391.007.587.01h4.741a2.3 2.3 0 0 1 .4.02a.64.64 0 0 0-.475.385a1 1 0 0 0-.045.407v1.014a.677.677 0 0 0 .691.719h1.16a.684.684 0 0 0 .686-.658v-.984a1.07 1.07 0 0 0-.1-.589a.64.64 0 0 0-.42-.292a2 2 0 0 1 .22-.022h1.573c.011 1.721 0 3.443 0 5.165v6.293a2.57 2.57 0 0 1-.612 1.651a2.54 2.54 0 0 1-1.563.868a8 8 0 0 1-.981.033H6.724a9 9 0 0 1-1.368-.048a2.56 2.56 0 0 1-2-1.846a2.8 2.8 0 0 1-.09-.746V16.891c.007-.3-.002-.602.009-.903m1.795 3.843a.6.6 0 0 0-.386.234a.76.76 0 0 0-.134.464v1.162a.685.685 0 0 0 .686.658h1.283a.687.687 0 0 0 .568-.716v-1.191a.62.62 0 0 0-.2-.458a.7.7 0 0 0-.487-.17H5.264a1 1 0 0 0-.194.017m20.366 0a.62.62 0 0 0-.522.58v1.222a.676.676 0 0 0 .69.718c.428 0 .857.005 1.285 0a.7.7 0 0 0 .562-.684v-1.013a.9.9 0 0 0-.123-.568a.66.66 0 0 0-.532-.267h-.954a2.3 2.3 0 0 0-.406.011ZM5.071 23.648a.6.6 0 0 0-.4.249a.77.77 0 0 0-.124.448v1.132a.7.7 0 0 0 .6.688h1.376a.687.687 0 0 0 .567-.717v-1.189a.62.62 0 0 0-.2-.459a.7.7 0 0 0-.484-.17H5.265a1 1 0 0 0-.194.018m20.362 0a.62.62 0 0 0-.492.427a1 1 0 0 0-.029.33V25.6a.68.68 0 0 0 .656.567h1.193a.69.69 0 0 0 .686-.719v-1.164a.66.66 0 0 0-.286-.545a1.46 1.46 0 0 0-.787-.11c-.312.01-.629-.02-.94.018Z"/></svg>`,
|
||||
txt:`<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 48 48"><!-- Icon from IconPark by ByteDance - https://github.com/bytedance/IconPark/blob/master/LICENSE --><g fill="none" stroke="#000" stroke-linecap="round" stroke-width="4"><path stroke-linejoin="round" d="M10 38V44H38V38"/><path stroke-linejoin="round" d="M38 20V14L30 4H10V20"/><path stroke-linejoin="round" d="M28 4V14H38"/><path d="M16 12H20"/><rect width="40" height="18" x="4" y="20" stroke-linejoin="round" rx="2"/><path stroke-linejoin="round" d="M21 25L27 33"/><path stroke-linejoin="round" d="M27 25L21 33"/><path stroke-linejoin="round" d="M13 25V33"/><path stroke-linejoin="round" d="M10 25H13H16"/><path stroke-linejoin="round" d="M35 25V33"/><path stroke-linejoin="round" d="M32 25H35H38"/></g></svg>`,
|
||||
pdf:`<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><!-- Icon from VSCode Icons by Roberto Huertas - https://github.com/vscode-icons/vscode-icons/blob/master/LICENSE --><path fill="#909090" d="m24.1 2.072l5.564 5.8v22.056H8.879V30h20.856V7.945z"/><path fill="#f4f4f4" d="M24.031 2H8.808v27.928h20.856V7.873z"/><path fill="#7a7b7c" d="M8.655 3.5h-6.39v6.827h20.1V3.5z"/><path fill="#dd2025" d="M22.472 10.211H2.395V3.379h20.077z"/><path fill="#464648" d="M9.052 4.534H7.745v4.8h1.028V7.715L9 7.728a2 2 0 0 0 .647-.117a1.4 1.4 0 0 0 .493-.291a1.2 1.2 0 0 0 .335-.454a2.1 2.1 0 0 0 .105-.908a2.2 2.2 0 0 0-.114-.644a1.17 1.17 0 0 0-.687-.65a2 2 0 0 0-.409-.104a2 2 0 0 0-.319-.026m-.189 2.294h-.089v-1.48h.193a.57.57 0 0 1 .459.181a.92.92 0 0 1 .183.558c0 .246 0 .469-.222.626a.94.94 0 0 1-.524.114m3.671-2.306c-.111 0-.219.008-.295.011L12 4.538h-.78v4.8h.918a2.7 2.7 0 0 0 1.028-.175a1.7 1.7 0 0 0 .68-.491a1.9 1.9 0 0 0 .373-.749a3.7 3.7 0 0 0 .114-.949a4.4 4.4 0 0 0-.087-1.127a1.8 1.8 0 0 0-.4-.733a1.6 1.6 0 0 0-.535-.4a2.4 2.4 0 0 0-.549-.178a1.3 1.3 0 0 0-.228-.017m-.182 3.937h-.1V5.392h.013a1.06 1.06 0 0 1 .6.107a1.2 1.2 0 0 1 .324.4a1.3 1.3 0 0 1 .142.526c.009.22 0 .4 0 .549a3 3 0 0 1-.033.513a1.8 1.8 0 0 1-.169.5a1.1 1.1 0 0 1-.363.36a.67.67 0 0 1-.416.106m5.08-3.915H15v4.8h1.028V7.434h1.3v-.892h-1.3V5.43h1.4v-.892"/><path fill="#dd2025" d="M21.781 20.255s3.188-.578 3.188.511s-1.975.646-3.188-.511m-2.357.083a7.5 7.5 0 0 0-1.473.489l.4-.9c.4-.9.815-2.127.815-2.127a14 14 0 0 0 1.658 2.252a13 13 0 0 0-1.4.288Zm-1.262-6.5c0-.949.307-1.208.546-1.208s.508.115.517.939a10.8 10.8 0 0 1-.517 2.434a4.4 4.4 0 0 1-.547-2.162Zm-4.649 10.516c-.978-.585 2.051-2.386 2.6-2.444c-.003.001-1.576 3.056-2.6 2.444M25.9 20.895c-.01-.1-.1-1.207-2.07-1.16a14 14 0 0 0-2.453.173a12.5 12.5 0 0 1-2.012-2.655a11.8 11.8 0 0 0 .623-3.1c-.029-1.2-.316-1.888-1.236-1.878s-1.054.815-.933 2.013a9.3 9.3 0 0 0 .665 2.338s-.425 1.323-.987 2.639s-.946 2.006-.946 2.006a9.6 9.6 0 0 0-2.725 1.4c-.824.767-1.159 1.356-.725 1.945c.374.508 1.683.623 2.853-.91a23 23 0 0 0 1.7-2.492s1.784-.489 2.339-.623s1.226-.24 1.226-.24s1.629 1.639 3.2 1.581s1.495-.939 1.485-1.035"/><path fill="#909090" d="M23.954 2.077V7.95h5.633z"/><path fill="#f4f4f4" d="M24.031 2v5.873h5.633z"/><path fill="#fff" d="M8.975 4.457H7.668v4.8H8.7V7.639l.228.013a2 2 0 0 0 .647-.117a1.4 1.4 0 0 0 .493-.291a1.2 1.2 0 0 0 .332-.454a2.1 2.1 0 0 0 .105-.908a2.2 2.2 0 0 0-.114-.644a1.17 1.17 0 0 0-.687-.65a2 2 0 0 0-.411-.105a2 2 0 0 0-.319-.026m-.189 2.294h-.089v-1.48h.194a.57.57 0 0 1 .459.181a.92.92 0 0 1 .183.558c0 .246 0 .469-.222.626a.94.94 0 0 1-.524.114m3.67-2.306c-.111 0-.219.008-.295.011l-.235.006h-.78v4.8h.918a2.7 2.7 0 0 0 1.028-.175a1.7 1.7 0 0 0 .68-.491a1.9 1.9 0 0 0 .373-.749a3.7 3.7 0 0 0 .114-.949a4.4 4.4 0 0 0-.087-1.127a1.8 1.8 0 0 0-.4-.733a1.6 1.6 0 0 0-.535-.4a2.4 2.4 0 0 0-.549-.178a1.3 1.3 0 0 0-.228-.017m-.182 3.937h-.1V5.315h.013a1.06 1.06 0 0 1 .6.107a1.2 1.2 0 0 1 .324.4a1.3 1.3 0 0 1 .142.526c.009.22 0 .4 0 .549a3 3 0 0 1-.033.513a1.8 1.8 0 0 1-.169.5a1.1 1.1 0 0 1-.363.36a.67.67 0 0 1-.416.106m5.077-3.915h-2.43v4.8h1.028V7.357h1.3v-.892h-1.3V5.353h1.4v-.892"/></svg>`,
|
||||
docs:`<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><!-- Icon from VSCode Icons by Roberto Huertas - https://github.com/vscode-icons/vscode-icons/blob/master/LICENSE --><defs><linearGradient id="SVGSuUii0pt" x1="4.494" x2="13.832" y1="-2092.086" y2="-2075.914" gradientTransform="translate(0 2100)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#18884f"/><stop offset=".5" stop-color="#117e43"/><stop offset="1" stop-color="#0b6631"/></linearGradient></defs><path fill="#185c37" d="M19.581 15.35L8.512 13.4v14.409A1.19 1.19 0 0 0 9.705 29h19.1A1.19 1.19 0 0 0 30 27.809V22.5Z"/><path fill="#21a366" d="M19.581 3H9.705a1.19 1.19 0 0 0-1.193 1.191V9.5L19.581 16l5.861 1.95L30 16V9.5Z"/><path fill="#107c41" d="M8.512 9.5h11.069V16H8.512Z"/><path d="M16.434 8.2H8.512v16.25h7.922a1.2 1.2 0 0 0 1.194-1.191V9.391A1.2 1.2 0 0 0 16.434 8.2" opacity=".1"/><path d="M15.783 8.85H8.512V25.1h7.271a1.2 1.2 0 0 0 1.194-1.191V10.041a1.2 1.2 0 0 0-1.194-1.191" opacity=".2"/><path d="M15.783 8.85H8.512V23.8h7.271a1.2 1.2 0 0 0 1.194-1.191V10.041a1.2 1.2 0 0 0-1.194-1.191" opacity=".2"/><path d="M15.132 8.85h-6.62V23.8h6.62a1.2 1.2 0 0 0 1.194-1.191V10.041a1.2 1.2 0 0 0-1.194-1.191" opacity=".2"/><path fill="url(#SVGSuUii0pt)" d="M3.194 8.85h11.938a1.193 1.193 0 0 1 1.194 1.191v11.918a1.193 1.193 0 0 1-1.194 1.191H3.194A1.19 1.19 0 0 1 2 21.959V10.041A1.19 1.19 0 0 1 3.194 8.85"/><path fill="#fff" d="m5.7 19.873l2.511-3.884l-2.3-3.862h1.847L9.013 14.6c.116.234.2.408.238.524h.017q.123-.281.26-.546l1.342-2.447h1.7l-2.359 3.84l2.419 3.905h-1.809l-1.45-2.711A2.4 2.4 0 0 1 9.2 16.8h-.024a1.7 1.7 0 0 1-.168.351l-1.493 2.722Z"/><path fill="#33c481" d="M28.806 3h-9.225v6.5H30V4.191A1.19 1.19 0 0 0 28.806 3"/><path fill="#107c41" d="M19.581 16H30v6.5H19.581Z"/></svg>`,
|
||||
zip:`<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 14 14"><!-- Icon from Flex color icons by Streamline - https://creativecommons.org/licenses/by/4.0/ --><g fill="none"><path fill="#d7e0ff" d="M6.331 1.688a.99.99 0 0 0-.883-.648a27 27 0 0 0-3.456.033a1.004 1.004 0 0 0-.92.893C.735 4.903.623 7.85.975 10.793c.119.998.937 1.724 1.915 1.83c2.762.301 5.485.294 8.247-.007a2.09 2.09 0 0 0 1.845-1.823c.218-1.82.276-3.684.14-5.971a1.906 1.906 0 0 0-1.745-1.788c-1.344-.112-2.279-.118-3.931-.153a1 1 0 0 1-.915-.652z"/><path stroke="#4147d5" stroke-linecap="round" stroke-linejoin="round" d="M6.331 1.688a.99.99 0 0 0-.883-.648a27 27 0 0 0-3.456.033a1.004 1.004 0 0 0-.92.893C.735 4.903.623 7.85.975 10.793c.119.998.937 1.724 1.915 1.83c2.762.301 5.485.294 8.247-.007a2.09 2.09 0 0 0 1.845-1.823c.218-1.82.276-3.684.14-5.971a1.906 1.906 0 0 0-1.745-1.788c-1.344-.112-2.279-.118-3.931-.153a1 1 0 0 1-.915-.652zM8 5.981h2.5m-2.5 3h2.5M9.248 2.934V8.98"/></g></svg>`,
|
||||
audio: `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Ultimate color icons by Streamline - https://creativecommons.org/licenses/by/4.0/ --><g fill="none"><path fill="#66e1ff" d="M21.087 6.71v15.334a.956.956 0 0 1-.957.956H3.87a.957.957 0 0 1-.957-.956V1.957A.957.957 0 0 1 3.87 1h11.507q.467 0 .927.086v3.74a.957.957 0 0 0 .957.957H21q.086.46.086.927"/><path fill="#c2f3ff" d="M16.64 5.553L2.912 19.289V1.957A.957.957 0 0 1 3.87 1h11.507q.467 0 .927.086v3.74a1 1 0 0 0 .335.727"/><path fill="#fff" d="M21.001 5.783h-3.74a.957.957 0 0 1-.956-.957v-3.74A5.67 5.67 0 0 1 21 5.783"/><path stroke="#191919" stroke-linecap="round" stroke-linejoin="round" d="M21.087 6.71v15.334a.956.956 0 0 1-.957.956H3.87a.957.957 0 0 1-.957-.956V1.957A.957.957 0 0 1 3.87 1h11.507q.467 0 .927.086v3.74a.957.957 0 0 0 .957.957H21q.086.46.086.927"/><path stroke="#191919" stroke-linecap="round" stroke-linejoin="round" d="M21.001 5.783h-3.74a.957.957 0 0 1-.956-.957v-3.74A5.67 5.67 0 0 1 21 5.783M5.783 18.217v-5.739l1.434 2.87l1.435-2.87v5.74m4.783-4.305A1.435 1.435 0 0 1 12 15.348h-1.435v-2.87H12a1.435 1.435 0 0 1 1.435 1.435m-2.87 4.304v-2.87m4.783-1.721a1.066 1.066 0 0 1 .956-1.148h.724a1.33 1.33 0 0 1 1.19 1.435a1.33 1.33 0 0 1-1.194 1.435a1.33 1.33 0 0 1 1.193 1.435a1.33 1.33 0 0 1-1.189 1.434h-.724a1.066 1.066 0 0 1-.956-1.147"/></g></svg>`,
|
||||
video: `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path fill="#e75749" d="M4.5 2.375A2.56 2.56 0 0 1 5.861 2h20.366a2.545 2.545 0 0 1 2.423 1.951a3.4 3.4 0 0 1 .072.862v11.176h-1.573a2 2 0 0 0-.22.022a5 5 0 0 0-.581-.011c-.3.007-.61-.014-.914.014a2.3 2.3 0 0 0-.4-.02h-4.739c-.2 0-.392.008-.587-.01l.1-.065l-6.353-3.813v3.889c-2.213-.005-4.427 0-6.64 0a2 2 0 0 0-.251.021c-.212-.032-.427-.016-.642-.016c-.284.006-.57-.015-.853.015a2 2 0 0 0-.253-.022H3.275c.006-3.635 0-7.27 0-10.9a4.8 4.8 0 0 1 .071-1.131A2.54 2.54 0 0 1 4.5 2.375m.54 2.188a.64.64 0 0 0-.489.606v1.316a.64.64 0 0 0 .627.6h1.309a.64.64 0 0 0 .6-.608c.005-.426 0-.853 0-1.279a.64.64 0 0 0-.329-.575a.7.7 0 0 0-.358-.078H5.264a1 1 0 0 0-.224.018m20.341 0a.64.64 0 0 0-.474.607v1.306a.64.64 0 0 0 .6.608c.436.005.872 0 1.308 0a.64.64 0 0 0 .627-.606c.006-.438 0-.876 0-1.314a.64.64 0 0 0-.594-.621c-.348-.009-.7 0-1.045 0a2 2 0 0 0-.422.024ZM5.042 8.38a.64.64 0 0 0-.452.4a1.1 1.1 0 0 0-.041.386v1.135a.637.637 0 0 0 .6.6c.4.008.795 0 1.192 0a.8.8 0 0 0 .395-.065a.64.64 0 0 0 .36-.574V8.983a.64.64 0 0 0-.6-.624c-.338-.008-.677 0-1.016 0a2.4 2.4 0 0 0-.438.021m20.338 0a.64.64 0 0 0-.433.4a1.1 1.1 0 0 0-.041.387v1.131a.64.64 0 0 0 .608.607c.406.006.812 0 1.218 0a.74.74 0 0 0 .38-.078a.64.64 0 0 0 .335-.558V8.985a.637.637 0 0 0-.593-.622c-.349-.009-.7 0-1.047 0a2 2 0 0 0-.428.022ZM5.041 12.2a.64.64 0 0 0-.491.608c0 .438-.005.877 0 1.315a.64.64 0 0 0 .627.6h1.3a.64.64 0 0 0 .608-.607v-1.307a.64.64 0 0 0-.605-.626c-.348-.007-.7 0-1.045 0a2 2 0 0 0-.394.017m20.335.006a.64.64 0 0 0-.43.394a1.1 1.1 0 0 0-.041.386v1.131a.64.64 0 0 0 .607.608c.435.005.87 0 1.306 0a.64.64 0 0 0 .628-.605c.006-.438 0-.876 0-1.313a.637.637 0 0 0-.592-.622c-.349-.01-.7 0-1.046 0a2 2 0 0 0-.431.015Z"/><path fill="#fff" d="M13.458 12.1q3.176 1.908 6.353 3.813l-.1.065q-3.127 1.872-6.251 3.748V15.99q-.003-1.941-.002-3.89"/><path fill="#c0392b" d="M3.275 15.988h1.541a2 2 0 0 1 .253.022a.65.65 0 0 0-.409.273a.9.9 0 0 0-.111.518v1.045a.686.686 0 0 0 .685.689h1.192a.68.68 0 0 0 .657-.569c.008-.447 0-.9 0-1.343a.63.63 0 0 0-.521-.613a2 2 0 0 1 .251-.021h6.64v3.736q3.127-1.871 6.251-3.748c.2.018.391.007.587.01h4.741a2.3 2.3 0 0 1 .4.02a.64.64 0 0 0-.475.385a1 1 0 0 0-.045.407v1.014a.677.677 0 0 0 .691.719h1.16a.684.684 0 0 0 .686-.658v-.984a1.07 1.07 0 0 0-.1-.589a.64.64 0 0 0-.42-.292a2 2 0 0 1 .22-.022h1.573c.011 1.721 0 3.443 0 5.165v6.293a2.57 2.57 0 0 1-.612 1.651a2.54 2.54 0 0 1-1.563.868a8 8 0 0 1-.981.033H6.724a9 9 0 0 1-1.368-.048a2.56 2.56 0 0 1-2-1.846a2.8 2.8 0 0 1-.09-.746V16.891c.007-.3-.002-.602.009-.903m1.795 3.843a.6.6 0 0 0-.386.234a.76.76 0 0 0-.134.464v1.162a.685.685 0 0 0 .686.658h1.283a.687.687 0 0 0 .568-.716v-1.191a.62.62 0 0 0-.2-.458a.7.7 0 0 0-.487-.17H5.264a1 1 0 0 0-.194.017m20.366 0a.62.62 0 0 0-.522.58v1.222a.676.676 0 0 0 .69.718c.428 0 .857.005 1.285 0a.7.7 0 0 0 .562-.684v-1.013a.9.9 0 0 0-.123-.568a.66.66 0 0 0-.532-.267h-.954a2.3 2.3 0 0 0-.406.011ZM5.071 23.648a.6.6 0 0 0-.4.249a.77.77 0 0 0-.124.448v1.132a.7.7 0 0 0 .6.688h1.376a.687.687 0 0 0 .567-.717v-1.189a.62.62 0 0 0-.2-.459a.7.7 0 0 0-.484-.17H5.265a1 1 0 0 0-.194.018m20.362 0a.62.62 0 0 0-.492.427a1 1 0 0 0-.029.33V25.6a.68.68 0 0 0 .656.567h1.193a.69.69 0 0 0 .686-.719v-1.164a.66.66 0 0 0-.286-.545a1.46 1.46 0 0 0-.787-.11c-.312.01-.629-.02-.94.018Z"/></svg>`,
|
||||
txt: `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 48 48"><!-- Icon from IconPark by ByteDance - https://github.com/bytedance/IconPark/blob/master/LICENSE --><g fill="none" stroke="#000" stroke-linecap="round" stroke-width="4"><path stroke-linejoin="round" d="M10 38V44H38V38"/><path stroke-linejoin="round" d="M38 20V14L30 4H10V20"/><path stroke-linejoin="round" d="M28 4V14H38"/><path d="M16 12H20"/><rect width="40" height="18" x="4" y="20" stroke-linejoin="round" rx="2"/><path stroke-linejoin="round" d="M21 25L27 33"/><path stroke-linejoin="round" d="M27 25L21 33"/><path stroke-linejoin="round" d="M13 25V33"/><path stroke-linejoin="round" d="M10 25H13H16"/><path stroke-linejoin="round" d="M35 25V33"/><path stroke-linejoin="round" d="M32 25H35H38"/></g></svg>`,
|
||||
pdf: `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><!-- Icon from VSCode Icons by Roberto Huertas - https://github.com/vscode-icons/vscode-icons/blob/master/LICENSE --><path fill="#909090" d="m24.1 2.072l5.564 5.8v22.056H8.879V30h20.856V7.945z"/><path fill="#f4f4f4" d="M24.031 2H8.808v27.928h20.856V7.873z"/><path fill="#7a7b7c" d="M8.655 3.5h-6.39v6.827h20.1V3.5z"/><path fill="#dd2025" d="M22.472 10.211H2.395V3.379h20.077z"/><path fill="#464648" d="M9.052 4.534H7.745v4.8h1.028V7.715L9 7.728a2 2 0 0 0 .647-.117a1.4 1.4 0 0 0 .493-.291a1.2 1.2 0 0 0 .335-.454a2.1 2.1 0 0 0 .105-.908a2.2 2.2 0 0 0-.114-.644a1.17 1.17 0 0 0-.687-.65a2 2 0 0 0-.409-.104a2 2 0 0 0-.319-.026m-.189 2.294h-.089v-1.48h.193a.57.57 0 0 1 .459.181a.92.92 0 0 1 .183.558c0 .246 0 .469-.222.626a.94.94 0 0 1-.524.114m3.671-2.306c-.111 0-.219.008-.295.011L12 4.538h-.78v4.8h.918a2.7 2.7 0 0 0 1.028-.175a1.7 1.7 0 0 0 .68-.491a1.9 1.9 0 0 0 .373-.749a3.7 3.7 0 0 0 .114-.949a4.4 4.4 0 0 0-.087-1.127a1.8 1.8 0 0 0-.4-.733a1.6 1.6 0 0 0-.535-.4a2.4 2.4 0 0 0-.549-.178a1.3 1.3 0 0 0-.228-.017m-.182 3.937h-.1V5.392h.013a1.06 1.06 0 0 1 .6.107a1.2 1.2 0 0 1 .324.4a1.3 1.3 0 0 1 .142.526c.009.22 0 .4 0 .549a3 3 0 0 1-.033.513a1.8 1.8 0 0 1-.169.5a1.1 1.1 0 0 1-.363.36a.67.67 0 0 1-.416.106m5.08-3.915H15v4.8h1.028V7.434h1.3v-.892h-1.3V5.43h1.4v-.892"/><path fill="#dd2025" d="M21.781 20.255s3.188-.578 3.188.511s-1.975.646-3.188-.511m-2.357.083a7.5 7.5 0 0 0-1.473.489l.4-.9c.4-.9.815-2.127.815-2.127a14 14 0 0 0 1.658 2.252a13 13 0 0 0-1.4.288Zm-1.262-6.5c0-.949.307-1.208.546-1.208s.508.115.517.939a10.8 10.8 0 0 1-.517 2.434a4.4 4.4 0 0 1-.547-2.162Zm-4.649 10.516c-.978-.585 2.051-2.386 2.6-2.444c-.003.001-1.576 3.056-2.6 2.444M25.9 20.895c-.01-.1-.1-1.207-2.07-1.16a14 14 0 0 0-2.453.173a12.5 12.5 0 0 1-2.012-2.655a11.8 11.8 0 0 0 .623-3.1c-.029-1.2-.316-1.888-1.236-1.878s-1.054.815-.933 2.013a9.3 9.3 0 0 0 .665 2.338s-.425 1.323-.987 2.639s-.946 2.006-.946 2.006a9.6 9.6 0 0 0-2.725 1.4c-.824.767-1.159 1.356-.725 1.945c.374.508 1.683.623 2.853-.91a23 23 0 0 0 1.7-2.492s1.784-.489 2.339-.623s1.226-.24 1.226-.24s1.629 1.639 3.2 1.581s1.495-.939 1.485-1.035"/><path fill="#909090" d="M23.954 2.077V7.95h5.633z"/><path fill="#f4f4f4" d="M24.031 2v5.873h5.633z"/><path fill="#fff" d="M8.975 4.457H7.668v4.8H8.7V7.639l.228.013a2 2 0 0 0 .647-.117a1.4 1.4 0 0 0 .493-.291a1.2 1.2 0 0 0 .332-.454a2.1 2.1 0 0 0 .105-.908a2.2 2.2 0 0 0-.114-.644a1.17 1.17 0 0 0-.687-.65a2 2 0 0 0-.411-.105a2 2 0 0 0-.319-.026m-.189 2.294h-.089v-1.48h.194a.57.57 0 0 1 .459.181a.92.92 0 0 1 .183.558c0 .246 0 .469-.222.626a.94.94 0 0 1-.524.114m3.67-2.306c-.111 0-.219.008-.295.011l-.235.006h-.78v4.8h.918a2.7 2.7 0 0 0 1.028-.175a1.7 1.7 0 0 0 .68-.491a1.9 1.9 0 0 0 .373-.749a3.7 3.7 0 0 0 .114-.949a4.4 4.4 0 0 0-.087-1.127a1.8 1.8 0 0 0-.4-.733a1.6 1.6 0 0 0-.535-.4a2.4 2.4 0 0 0-.549-.178a1.3 1.3 0 0 0-.228-.017m-.182 3.937h-.1V5.315h.013a1.06 1.06 0 0 1 .6.107a1.2 1.2 0 0 1 .324.4a1.3 1.3 0 0 1 .142.526c.009.22 0 .4 0 .549a3 3 0 0 1-.033.513a1.8 1.8 0 0 1-.169.5a1.1 1.1 0 0 1-.363.36a.67.67 0 0 1-.416.106m5.077-3.915h-2.43v4.8h1.028V7.357h1.3v-.892h-1.3V5.353h1.4v-.892"/></svg>`,
|
||||
docs: `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><!-- Icon from VSCode Icons by Roberto Huertas - https://github.com/vscode-icons/vscode-icons/blob/master/LICENSE --><defs><linearGradient id="SVGSuUii0pt" x1="4.494" x2="13.832" y1="-2092.086" y2="-2075.914" gradientTransform="translate(0 2100)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#18884f"/><stop offset=".5" stop-color="#117e43"/><stop offset="1" stop-color="#0b6631"/></linearGradient></defs><path fill="#185c37" d="M19.581 15.35L8.512 13.4v14.409A1.19 1.19 0 0 0 9.705 29h19.1A1.19 1.19 0 0 0 30 27.809V22.5Z"/><path fill="#21a366" d="M19.581 3H9.705a1.19 1.19 0 0 0-1.193 1.191V9.5L19.581 16l5.861 1.95L30 16V9.5Z"/><path fill="#107c41" d="M8.512 9.5h11.069V16H8.512Z"/><path d="M16.434 8.2H8.512v16.25h7.922a1.2 1.2 0 0 0 1.194-1.191V9.391A1.2 1.2 0 0 0 16.434 8.2" opacity=".1"/><path d="M15.783 8.85H8.512V25.1h7.271a1.2 1.2 0 0 0 1.194-1.191V10.041a1.2 1.2 0 0 0-1.194-1.191" opacity=".2"/><path d="M15.783 8.85H8.512V23.8h7.271a1.2 1.2 0 0 0 1.194-1.191V10.041a1.2 1.2 0 0 0-1.194-1.191" opacity=".2"/><path d="M15.132 8.85h-6.62V23.8h6.62a1.2 1.2 0 0 0 1.194-1.191V10.041a1.2 1.2 0 0 0-1.194-1.191" opacity=".2"/><path fill="url(#SVGSuUii0pt)" d="M3.194 8.85h11.938a1.193 1.193 0 0 1 1.194 1.191v11.918a1.193 1.193 0 0 1-1.194 1.191H3.194A1.19 1.19 0 0 1 2 21.959V10.041A1.19 1.19 0 0 1 3.194 8.85"/><path fill="#fff" d="m5.7 19.873l2.511-3.884l-2.3-3.862h1.847L9.013 14.6c.116.234.2.408.238.524h.017q.123-.281.26-.546l1.342-2.447h1.7l-2.359 3.84l2.419 3.905h-1.809l-1.45-2.711A2.4 2.4 0 0 1 9.2 16.8h-.024a1.7 1.7 0 0 1-.168.351l-1.493 2.722Z"/><path fill="#33c481" d="M28.806 3h-9.225v6.5H30V4.191A1.19 1.19 0 0 0 28.806 3"/><path fill="#107c41" d="M19.581 16H30v6.5H19.581Z"/></svg>`,
|
||||
zip: `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 14 14"><!-- Icon from Flex color icons by Streamline - https://creativecommons.org/licenses/by/4.0/ --><g fill="none"><path fill="#d7e0ff" d="M6.331 1.688a.99.99 0 0 0-.883-.648a27 27 0 0 0-3.456.033a1.004 1.004 0 0 0-.92.893C.735 4.903.623 7.85.975 10.793c.119.998.937 1.724 1.915 1.83c2.762.301 5.485.294 8.247-.007a2.09 2.09 0 0 0 1.845-1.823c.218-1.82.276-3.684.14-5.971a1.906 1.906 0 0 0-1.745-1.788c-1.344-.112-2.279-.118-3.931-.153a1 1 0 0 1-.915-.652z"/><path stroke="#4147d5" stroke-linecap="round" stroke-linejoin="round" d="M6.331 1.688a.99.99 0 0 0-.883-.648a27 27 0 0 0-3.456.033a1.004 1.004 0 0 0-.92.893C.735 4.903.623 7.85.975 10.793c.119.998.937 1.724 1.915 1.83c2.762.301 5.485.294 8.247-.007a2.09 2.09 0 0 0 1.845-1.823c.218-1.82.276-3.684.14-5.971a1.906 1.906 0 0 0-1.745-1.788c-1.344-.112-2.279-.118-3.931-.153a1 1 0 0 1-.915-.652zM8 5.981h2.5m-2.5 3h2.5M9.248 2.934V8.98"/></g></svg>`,
|
||||
},
|
||||
preview: {
|
||||
prev: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 19l-7-7 7-7"/><path d="M8 12h11"/></svg>',
|
||||
next: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 5l7 7-7 7"/><path d="M16 12H3"/></svg>',
|
||||
imgLoadError:`
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from TDesign Icons by TDesign - https://github.com/Tencent/tdesign-icons/blob/main/LICENSE --><path fill="none" stroke="currentColor" stroke-linecap="square" stroke-width="2" d="M21 11V3H3v18h8m2-7l-4-4l-5.5 5.5m14.25-7.25a2 2 0 1 1-4 0a2 2 0 0 1 4 0Zm4.079 7.922L19 19m0 0l-2.828 2.829M19 19l-2.828-2.828M19 19l2.829 2.829"/></svg>
|
||||
prev: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 19l-7-7 7-7"/><path d="M8 12h11"/></svg>',
|
||||
next: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 5l7 7-7 7"/><path d="M16 12H3"/></svg>',
|
||||
imgLoadError: `
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from TDesign Icons by Tencent - https://github.com/Tencent/tdesign-icons/blob/main/LICENSE --><path fill="none" stroke="currentColor" stroke-linecap="square" stroke-width="2" d="M21 11V3H3v18h8m2-7l-4-4l-5.5 5.5m14.25-7.25a2 2 0 1 1-4 0a2 2 0 0 1 4 0Zm4.079 7.922L19 19m0 0l-2.828 2.829M19 19l-2.828-2.828M19 19l2.829 2.829"/></svg>
|
||||
`
|
||||
},
|
||||
modal: {
|
||||
minimize: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><!-- Icon from Lucide by Lucide Contributors - https://github.com/lucide-icons/lucide/blob/main/LICENSE --><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3M3 16h3a2 2 0 0 1 2 2v3m8 0v-3a2 2 0 0 1 2-2h3"/></svg>',
|
||||
maximize: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><!-- Icon from Lucide by Lucide Contributors - https://github.com/lucide-icons/lucide/blob/main/LICENSE --><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3m8 0h3a2 2 0 0 0 2-2v-3"/></svg>',
|
||||
close: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><!-- Icon from Lucide by Lucide Contributors - https://github.com/lucide-icons/lucide/blob/main/LICENSE --><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 6L6 18M6 6l12 12"/></svg>'
|
||||
},
|
||||
toast: {
|
||||
success: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>',
|
||||
error: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>',
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
}
|
||||
|
||||
.g3-left-panel {
|
||||
width: 50%;
|
||||
width: 30%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-right: 1px solid #eef0f2;
|
||||
@@ -255,19 +255,23 @@
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
overflow: hidden;
|
||||
border-top: 1px solid #f0f2f5;
|
||||
padding: 4px;
|
||||
/* border-top: 1px solid #f0f2f5; */
|
||||
}
|
||||
|
||||
.g3-file-action {
|
||||
padding: 8px 2px;
|
||||
flex: 1;
|
||||
padding: 8px;
|
||||
/* flex: 1; */
|
||||
border: 1px solid #eee;
|
||||
margin-left: 6px;
|
||||
border-radius: 999px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
border-right: 1px solid #f0f2f5;
|
||||
/* border-right: 1px solid #f0f2f5; */
|
||||
}
|
||||
|
||||
.g3-file-action:hover {
|
||||
@@ -286,17 +290,17 @@
|
||||
}
|
||||
|
||||
.g3-file-action:first-child {
|
||||
border-radius: 0 0 0 8px;
|
||||
/* border-radius: 0 0 0 8px; */
|
||||
}
|
||||
|
||||
.g3-file-action:last-child {
|
||||
border-right: none;
|
||||
border-radius: 0 0 8px 0;
|
||||
/* border-right: none;
|
||||
border-radius: 0 0 8px 0; */
|
||||
}
|
||||
|
||||
.g3-file-action svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
@@ -386,8 +390,8 @@
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: #ebebeb;
|
||||
color: #666;
|
||||
background: #ffebeb;
|
||||
color: #ff4d4f;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -421,7 +425,6 @@
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 16px;
|
||||
background: #ffffff;
|
||||
border-bottom: 1px solid #eef0f2;
|
||||
@@ -480,10 +483,11 @@
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
max-width: 300px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-left: 12px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.g3-preview-content {
|
||||
@@ -522,6 +526,24 @@
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #ffffff;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.g3-preview-content .g3-preview-iframe.current {
|
||||
opacity: 1;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.g3-preview-content .g3-preview-iframe.next {
|
||||
opacity: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.g3-preview-content {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.g3-preview-content .preview-file-info {
|
||||
@@ -884,3 +906,231 @@
|
||||
.g3-ui-lock.is-locked {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
Modal 样式
|
||||
============================================================================ */
|
||||
|
||||
.g3-modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: var(--g3-z-modal);
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.g3-modal-overlay.is-visible {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.g3-modal {
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
transition:
|
||||
transform 0.3s ease,
|
||||
opacity 0.3s ease;
|
||||
transform: scale(0.95);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.g3-modal-overlay.is-visible .g3-modal {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.g3-modal.is-maximized {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.g3-modal-header {
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 16px;
|
||||
background: #fafbfc;
|
||||
border-bottom: 1px solid #eef0f2;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.g3-modal-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.g3-modal-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.g3-modal-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.2s ease;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.g3-modal-btn:hover {
|
||||
background: #f0f2f5;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.g3-modal-btn-close:hover {
|
||||
background: #ff4d4f;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.g3-modal-body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.g3-modal-preview-toolbar {
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
background: #ffffff;
|
||||
border-bottom: 1px solid #eef0f2;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.g3-modal-preview-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.g3-modal-preview-nav .g3-modal-preview-counter {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
min-width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.g3-modal-preview-filename {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
margin-left: 16px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.g3-modal-preview-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 4px;
|
||||
background: #ffffff;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease;
|
||||
padding: 0;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.g3-modal-preview-btn:hover:not(:disabled) {
|
||||
border-color: #165dff;
|
||||
background: rgba(22, 93, 255, 0.05);
|
||||
color: #165dff;
|
||||
}
|
||||
|
||||
.g3-modal-preview-btn:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.g3-modal-preview-content {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
padding: 20px;
|
||||
overflow: auto;
|
||||
background: #fafbfc;
|
||||
}
|
||||
|
||||
.g3-modal-preview-content .g3-modal-preview-placeholder {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.g3-modal-preview-content .g3-modal-preview-iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #ffffff;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.g3-modal-preview-content .g3-modal-preview-iframe.current {
|
||||
opacity: 1;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.g3-modal-preview-content .g3-modal-preview-iframe.next {
|
||||
opacity: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.g3-modal-footer {
|
||||
display: none;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding: 0 16px;
|
||||
background: #fafbfc;
|
||||
border-top: 1px solid #eef0f2;
|
||||
flex-shrink: 0;
|
||||
visibility: hidden;
|
||||
height: 0;
|
||||
padding: 0;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.g3-modal-footer.has-content {
|
||||
display: flex;
|
||||
visibility: visible;
|
||||
height: 48px;
|
||||
padding: 0 16px;
|
||||
border-top: 1px solid #eef0f2;
|
||||
}
|
||||
@@ -88,14 +88,11 @@
|
||||
},
|
||||
// 全局权限（支持对象或函数）
|
||||
globalPermission: {
|
||||
select: true,
|
||||
upload: true,
|
||||
download: true,
|
||||
delete: true,
|
||||
view: true,
|
||||
},
|
||||
// 单文件权限解析函数（仅支持函数）
|
||||
filePermissionResolver: null,
|
||||
},
|
||||
|
||||
// ============================================================================
|
||||
@@ -268,7 +265,7 @@
|
||||
</button>
|
||||
<button class="g3-btn g3-btn-delete-all" disabled>
|
||||
${G3FileIcons.action.delete}
|
||||
${this.language.delete}
|
||||
${this.language.deleteBatch}
|
||||
</button>
|
||||
</div>
|
||||
<div class="g3-main" style="display: none;">main</div>
|
||||
@@ -316,6 +313,23 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="g3-global-menu"></div>
|
||||
<div class="g3-modal-overlay">
|
||||
<div class="g3-modal">
|
||||
<div class="g3-modal-header">
|
||||
<span class="g3-modal-title"></span>
|
||||
<div class="g3-modal-actions">
|
||||
<button class="g3-modal-btn g3-modal-btn-toggle" title="${this.language.modal.maximize}">
|
||||
${G3FileIcons.modal.maximize}
|
||||
</button>
|
||||
<button class="g3-modal-btn g3-modal-btn-close" title="${this.language.modal.close}">
|
||||
${G3FileIcons.modal.close}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="g3-modal-body"></div>
|
||||
<div class="g3-modal-footer"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -339,6 +353,14 @@
|
||||
this.$previewName = this.$container.find(".g3-preview-name");
|
||||
this.$previewCounter = this.$container.find(".g3-preview-counter");
|
||||
|
||||
this.$modalOverlay = this.$container.find(".g3-modal-overlay");
|
||||
this.$modal = this.$container.find(".g3-modal");
|
||||
this.$modalTitle = this.$container.find(".g3-modal-title");
|
||||
this.$modalBody = this.$container.find(".g3-modal-body");
|
||||
this.$modalBtnToggle = this.$container.find(".g3-modal-btn-toggle");
|
||||
this.$modalBtnClose = this.$container.find(".g3-modal-btn-close");
|
||||
this.$modalFooter = this.$container.find(".g3-modal-footer");
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
@@ -403,9 +425,13 @@
|
||||
|
||||
var $anchor = $(actionMenuState.anchorEl).closest(".g3-action-more");
|
||||
|
||||
if (!$anchor.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
var rect = $anchor[0].getBoundingClientRect();
|
||||
var $mainContainer = this.$container.find(".main");
|
||||
var mainRect = $mainContainer[0].getBoundingClientRect();
|
||||
var mainRect = $mainContainer.length > 0 ? $mainContainer[0].getBoundingClientRect() : null;
|
||||
|
||||
var menuWidth = 160;
|
||||
var itemHeight = 36;
|
||||
@@ -414,29 +440,51 @@
|
||||
var top = rect.bottom;
|
||||
var left = rect.right - menuWidth;
|
||||
|
||||
var spaceBottom = mainRect.bottom - rect.bottom; // main 容器底部到锚点的距离
|
||||
var spaceTop = rect.top - mainRect.top; // 锚点到 main 容器顶部的距离
|
||||
if (mainRect) {
|
||||
var spaceBottom = mainRect.bottom - rect.bottom; // main 容器底部到锚点的距离
|
||||
var spaceTop = rect.top - mainRect.top; // 锚点到 main 容器顶部的距离
|
||||
|
||||
var openUp = spaceBottom < menuHeight && spaceTop > menuHeight;
|
||||
var openUp = spaceBottom < menuHeight && spaceTop > menuHeight;
|
||||
|
||||
if (openUp) {
|
||||
top = rect.top - menuHeight; // 在锚点上方显示
|
||||
}
|
||||
if (openUp) {
|
||||
top = rect.top - menuHeight; // 在锚点上方显示
|
||||
}
|
||||
|
||||
// 确保菜单不超出 main 容器左右边界
|
||||
if (left < mainRect.left) {
|
||||
left = mainRect.left;
|
||||
}
|
||||
if (left + menuWidth > mainRect.right) {
|
||||
left = mainRect.right - menuWidth;
|
||||
}
|
||||
// 确保菜单不超出 main 容器左右边界
|
||||
if (left < mainRect.left) {
|
||||
left = mainRect.left;
|
||||
}
|
||||
if (left + menuWidth > mainRect.right) {
|
||||
left = mainRect.right - menuWidth;
|
||||
}
|
||||
|
||||
// 确保菜单不超出 main 容器上下边界
|
||||
if (top < mainRect.top) {
|
||||
top = mainRect.top;
|
||||
}
|
||||
if (top + menuHeight > mainRect.bottom) {
|
||||
top = mainRect.bottom - menuHeight;
|
||||
// 确保菜单不超出 main 容器上下边界
|
||||
if (top < mainRect.top) {
|
||||
top = mainRect.top;
|
||||
}
|
||||
if (top + menuHeight > mainRect.bottom) {
|
||||
top = mainRect.bottom - menuHeight;
|
||||
}
|
||||
} else {
|
||||
// 如果没有找到 main 容器，使用视口边界
|
||||
var viewportWidth = window.innerWidth;
|
||||
var viewportHeight = window.innerHeight;
|
||||
|
||||
// 确保菜单不超出视口左右边界
|
||||
if (left < 0) {
|
||||
left = 0;
|
||||
}
|
||||
if (left + menuWidth > viewportWidth) {
|
||||
left = viewportWidth - menuWidth;
|
||||
}
|
||||
|
||||
// 确保菜单不超出视口上下边界
|
||||
if (top < 0) {
|
||||
top = 0;
|
||||
}
|
||||
if (top + menuHeight > viewportHeight) {
|
||||
top = viewportHeight - menuHeight;
|
||||
}
|
||||
}
|
||||
|
||||
actionMenu.css({
|
||||
@@ -499,6 +547,15 @@
|
||||
break;
|
||||
}
|
||||
|
||||
// <span>${G3FileUtils.formatDate(file.uploadDate)}</span>
|
||||
|
||||
var actionMenuItems = (this.options.getActionMenu && this.options.getActionMenu(file)) || [];
|
||||
var moreActionHtml = actionMenuItems && actionMenuItems.length > 0 ? `
|
||||
<div class="g3-file-action g3-action-more" title="${this.language.more}">
|
||||
${G3FileIcons.action.more}
|
||||
</div>
|
||||
` : "";
|
||||
|
||||
return `
|
||||
<div class="g3-file-item" data-id="${file._id}">
|
||||
<input type="checkbox" class="g3-file-checkbox" />
|
||||
@@ -511,7 +568,7 @@
|
||||
|
||||
<div class="g3-file-info">
|
||||
<span class="g3-file-name">${file.name}</span>
|
||||
<span>${typeof file.size === "string" ? file.size || "-" : G3FileUtils.formatFileSize(file.size)}</span>
|
||||
<span>${G3FileUtils.formatFileSize(file.size)}</span>
|
||||
<span>${G3FileUtils.formatDate(file.uploadDate)}</span>
|
||||
</div>
|
||||
|
||||
@@ -524,9 +581,7 @@
|
||||
${G3FileIcons.action.download}
|
||||
</div>
|
||||
|
||||
<div class="g3-file-action g3-action-more" title="${this.language.more}">
|
||||
${G3FileIcons.action.more}
|
||||
</div>
|
||||
${moreActionHtml}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -738,6 +793,7 @@
|
||||
this.$btnPrev.prop("disabled", true);
|
||||
this.$btnNext.prop("disabled", true);
|
||||
this.currentPreviewFileId = null;
|
||||
this.previewCache = null;
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -769,20 +825,168 @@
|
||||
.replace("{total}", total);
|
||||
this.$previewCounter.text(counterText);
|
||||
|
||||
var previewContent = "";
|
||||
var self = this;
|
||||
|
||||
if (isUploaded && fileUrl && isPreviewable) {
|
||||
var previewUrl = this.options.previewUrl || "";
|
||||
var fullPreviewUrl = previewUrl
|
||||
? previewUrl + G3FileUtils.base64Encode(fileUrl)
|
||||
: fileUrl;
|
||||
previewContent = `
|
||||
|
||||
if (!this.previewCache) {
|
||||
this.previewCache = { currentUrl: null, nextUrl: null };
|
||||
}
|
||||
|
||||
if (this.previewCache.currentUrl === fullPreviewUrl) {
|
||||
return;
|
||||
}
|
||||
|
||||
var $content = this.$previewContent;
|
||||
var $currentIframe = $content.find(".g3-preview-iframe.current");
|
||||
var $nextIframe = $content.find(".g3-preview-iframe.next");
|
||||
|
||||
if ($nextIframe.length && this.previewCache.nextUrl === fullPreviewUrl) {
|
||||
$currentIframe.removeClass("current").addClass("next").hide();
|
||||
$nextIframe.removeClass("next").addClass("current").show();
|
||||
this.previewCache.currentUrl = fullPreviewUrl;
|
||||
this.previewCache.nextUrl = null;
|
||||
return;
|
||||
}
|
||||
|
||||
if ($nextIframe.length) {
|
||||
$nextIframe.remove();
|
||||
}
|
||||
|
||||
var newIframe = $(`
|
||||
<iframe
|
||||
src="${fullPreviewUrl}"
|
||||
class="g3-preview-iframe"
|
||||
class="g3-preview-iframe next"
|
||||
frameborder="0"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
`);
|
||||
|
||||
newIframe.on("load", function () {
|
||||
if ($currentIframe.length) {
|
||||
$currentIframe.css("opacity", "0");
|
||||
setTimeout(function () {
|
||||
$currentIframe.remove();
|
||||
}, 300);
|
||||
}
|
||||
newIframe.removeClass("next").addClass("current");
|
||||
self.previewCache.currentUrl = fullPreviewUrl;
|
||||
self.previewCache.nextUrl = null;
|
||||
});
|
||||
|
||||
newIframe.on("error", function () {
|
||||
newIframe.remove();
|
||||
self.showPlaceholder($content, `<p class="g3-url-error">${self.language.urlError}</p>`);
|
||||
});
|
||||
|
||||
$content.append(newIframe);
|
||||
this.previewCache.nextUrl = fullPreviewUrl;
|
||||
|
||||
} else {
|
||||
this.previewCache = null;
|
||||
var tipsHtml = "";
|
||||
if (!isUploaded) {
|
||||
tipsHtml = `<p class="g3-upload-tip">${this.language.uploadToPreview}</p>`;
|
||||
} else if (!isPreviewable) {
|
||||
tipsHtml = `<p class="g3-cannot-preview">${this.language.downloadToPreview}</p>`;
|
||||
} else if (!fileUrl) {
|
||||
tipsHtml = `<p class="g3-url-error">${this.language.urlError}</p>`;
|
||||
}
|
||||
|
||||
this.showPlaceholder(this.$previewContent, tipsHtml);
|
||||
}
|
||||
},
|
||||
|
||||
showPlaceholder: function ($container, tipsHtml) {
|
||||
$container.find(".g3-preview-iframe").remove();
|
||||
$container.html(`
|
||||
<div class="g3-preview-placeholder">
|
||||
${tipsHtml}
|
||||
</div>
|
||||
`);
|
||||
},
|
||||
|
||||
showModalPlaceholder: function ($container, tipsHtml) {
|
||||
$container.find(".g3-modal-preview-iframe").remove();
|
||||
$container.html(`
|
||||
<div class="g3-modal-preview-placeholder">
|
||||
${tipsHtml}
|
||||
</div>
|
||||
`);
|
||||
},
|
||||
|
||||
openModal: function (options) {
|
||||
var defaults = {
|
||||
title: "",
|
||||
content: "",
|
||||
width: "80%",
|
||||
height: "80%",
|
||||
showToggle: true,
|
||||
showClose: true
|
||||
};
|
||||
|
||||
var opts = $.extend({}, defaults, options);
|
||||
|
||||
this.$modalTitle.text(opts.title || "");
|
||||
this.$modalBody.html(opts.content || "");
|
||||
|
||||
this.$modal.css({
|
||||
width: opts.width,
|
||||
height: opts.height
|
||||
});
|
||||
|
||||
this.$modalBtnToggle.toggle(opts.showToggle);
|
||||
this.$modalBtnClose.toggle(opts.showClose);
|
||||
|
||||
this.$modalOverlay.addClass("is-visible");
|
||||
this.$modal.removeClass("is-maximized");
|
||||
this.$modalBtnToggle.html(G3FileIcons.modal.maximize);
|
||||
this.$modalBtnToggle.attr("title", this.language.modal.maximize);
|
||||
},
|
||||
|
||||
openPreviewModal: function (fileId) {
|
||||
var file = this.getFileById(fileId);
|
||||
if (!file) return;
|
||||
|
||||
var isUploaded = file.status === "uploaded";
|
||||
var isPreviewable = this.isPreviewableFile(file.name);
|
||||
var fileUrl = file.url && file.url !== "" ? file.url : null;
|
||||
|
||||
var toolbarHtml = `
|
||||
<div class="g3-modal-preview-toolbar">
|
||||
<div class="g3-modal-preview-nav">
|
||||
<button class="g3-modal-preview-btn g3-modal-preview-prev" disabled>
|
||||
${G3FileIcons.preview.prev}
|
||||
</button>
|
||||
<span class="g3-modal-preview-counter">0/0</span>
|
||||
<button class="g3-modal-preview-btn g3-modal-preview-next" disabled>
|
||||
${G3FileIcons.preview.next}
|
||||
</button>
|
||||
</div>
|
||||
<div class="g3-modal-preview-filename">${file.name}</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
var contentHtml = "";
|
||||
if (isUploaded && fileUrl && isPreviewable) {
|
||||
var previewUrl = this.options.previewUrl || "";
|
||||
var fullPreviewUrl = previewUrl
|
||||
? previewUrl + G3FileUtils.base64Encode(fileUrl)
|
||||
: fileUrl;
|
||||
|
||||
contentHtml = `
|
||||
<div class="g3-modal-preview-content">
|
||||
<iframe
|
||||
src="${fullPreviewUrl}"
|
||||
class="g3-modal-preview-iframe current"
|
||||
frameborder="0"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
var tipsHtml = "";
|
||||
@@ -794,14 +998,195 @@
|
||||
tipsHtml = `<p class="g3-url-error">${this.language.urlError}</p>`;
|
||||
}
|
||||
|
||||
previewContent = `
|
||||
<div class="g3-preview-placeholder">
|
||||
${tipsHtml}
|
||||
contentHtml = `
|
||||
<div class="g3-modal-preview-content">
|
||||
<div class="g3-modal-preview-placeholder">
|
||||
${tipsHtml}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
this.$previewContent.html(previewContent);
|
||||
var previewContent = toolbarHtml + contentHtml;
|
||||
|
||||
this.currentModalFileId = fileId;
|
||||
|
||||
this.openModal({
|
||||
title: this.language.filePreview,
|
||||
content: previewContent,
|
||||
width: "90%",
|
||||
height: "90%",
|
||||
});
|
||||
|
||||
var self = this;
|
||||
setTimeout(function () {
|
||||
self.$modal.find(".g3-modal-preview-prev").off("click").on("click", function () {
|
||||
self.modalPrev();
|
||||
});
|
||||
self.$modal.find(".g3-modal-preview-next").off("click").on("click", function () {
|
||||
self.modalNext();
|
||||
});
|
||||
self.updateModalPreviewCounter(fileId);
|
||||
}, 0);
|
||||
},
|
||||
|
||||
updateModalPreviewCounter: function (fileId) {
|
||||
var allFiles = this.getUploadedFiles();
|
||||
var currentIndex = allFiles.findIndex(function (f) { return f._id === fileId; });
|
||||
var total = allFiles.length;
|
||||
|
||||
var $counter = this.$modal.find(".g3-modal-preview-counter");
|
||||
var $prevBtn = this.$modal.find(".g3-modal-preview-prev");
|
||||
var $nextBtn = this.$modal.find(".g3-modal-preview-next");
|
||||
|
||||
if ($counter.length) {
|
||||
$counter.text((currentIndex + 1) + "/" + total);
|
||||
}
|
||||
if ($prevBtn.length) {
|
||||
$prevBtn.prop("disabled", currentIndex === 0);
|
||||
}
|
||||
if ($nextBtn.length) {
|
||||
$nextBtn.prop("disabled", currentIndex === total - 1);
|
||||
}
|
||||
},
|
||||
|
||||
modalPrev: function () {
|
||||
var uploadedFiles = this.getUploadedFiles();
|
||||
if (uploadedFiles.length === 0) return;
|
||||
|
||||
var currentIndex = this.getPreviewFileIndex(this.currentModalFileId);
|
||||
var newIndex = currentIndex > 0 ? currentIndex - 1 : uploadedFiles.length - 1;
|
||||
this.currentModalFileId = uploadedFiles[newIndex]._id;
|
||||
this.updateModalPreviewWithFile(uploadedFiles[newIndex]);
|
||||
},
|
||||
|
||||
modalNext: function () {
|
||||
var uploadedFiles = this.getUploadedFiles();
|
||||
if (uploadedFiles.length === 0) return;
|
||||
|
||||
var currentIndex = this.getPreviewFileIndex(this.currentModalFileId);
|
||||
var newIndex = currentIndex < uploadedFiles.length - 1 ? currentIndex + 1 : 0;
|
||||
this.currentModalFileId = uploadedFiles[newIndex]._id;
|
||||
this.updateModalPreviewWithFile(uploadedFiles[newIndex]);
|
||||
},
|
||||
|
||||
updateModalPreviewWithFile: function (file) {
|
||||
var $content = this.$modal.find(".g3-modal-preview-content");
|
||||
var $title = this.$modal.find(".g3-modal-title");
|
||||
var $filename = this.$modal.find(".g3-modal-preview-filename");
|
||||
|
||||
if (!file || !$content.length) return;
|
||||
|
||||
$title.text(this.language.filePreview);
|
||||
if ($filename.length) {
|
||||
$filename.text(file.name);
|
||||
}
|
||||
|
||||
var isUploaded = file.status === "uploaded";
|
||||
var isPreviewable = this.isPreviewableFile(file.name);
|
||||
var fileUrl = file.url && file.url !== "" ? file.url : null;
|
||||
|
||||
if (isUploaded && fileUrl && isPreviewable) {
|
||||
var previewUrl = this.options.previewUrl || "";
|
||||
var fullPreviewUrl = previewUrl
|
||||
? previewUrl + G3FileUtils.base64Encode(fileUrl)
|
||||
: fileUrl;
|
||||
|
||||
var newIframe = $(`
|
||||
<iframe
|
||||
src="${fullPreviewUrl}"
|
||||
class="g3-modal-preview-iframe"
|
||||
frameborder="0"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
`);
|
||||
|
||||
$content.html(newIframe);
|
||||
} else {
|
||||
var tipsHtml = "";
|
||||
if (!isUploaded) {
|
||||
tipsHtml = `<p class="g3-upload-tip">${this.language.uploadToPreview}</p>`;
|
||||
} else if (!isPreviewable) {
|
||||
tipsHtml = `<p class="g3-cannot-preview">${this.language.downloadToPreview}</p>`;
|
||||
} else if (!fileUrl) {
|
||||
tipsHtml = `<p class="g3-url-error">${this.language.urlError}</p>`;
|
||||
}
|
||||
|
||||
$content.html(`
|
||||
<div class="g3-modal-preview-placeholder">
|
||||
${tipsHtml}
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
|
||||
this.updateModalPreviewCounter(file._id);
|
||||
},
|
||||
|
||||
closeModal: function () {
|
||||
this.$modalOverlay.removeClass("is-visible");
|
||||
this.$modalBody.html("");
|
||||
this.$modalTitle.text("");
|
||||
this.setModalFooter("");
|
||||
this.currentModalFileId = null;
|
||||
},
|
||||
|
||||
toggleModalSize: function () {
|
||||
var isMaximized = this.$modal.hasClass("is-maximized");
|
||||
|
||||
if (isMaximized) {
|
||||
this.$modal.removeClass("is-maximized");
|
||||
this.$modal.css({
|
||||
width: "80%",
|
||||
height: "80%",
|
||||
maxWidth: "none",
|
||||
borderRadius: "8px"
|
||||
});
|
||||
this.$modalBtnToggle.html(G3FileIcons.modal.maximize);
|
||||
this.$modalBtnToggle.attr("title", this.language.modal.maximize);
|
||||
} else {
|
||||
this.$modal.addClass("is-maximized");
|
||||
this.$modal.css({
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
maxWidth: "none",
|
||||
borderRadius: "0"
|
||||
});
|
||||
this.$modalBtnToggle.html(G3FileIcons.modal.restore);
|
||||
this.$modalBtnToggle.attr("title", this.language.modal.restore);
|
||||
}
|
||||
},
|
||||
|
||||
setModalTitle: function (title) {
|
||||
if (this.$modalTitle) {
|
||||
this.$modalTitle.text(title || "");
|
||||
}
|
||||
},
|
||||
|
||||
setModalContent: function (content) {
|
||||
if (this.$modalBody) {
|
||||
this.$modalBody.html(content || "");
|
||||
}
|
||||
},
|
||||
|
||||
setModalSize: function (width, height) {
|
||||
if (!this.$modal) return;
|
||||
|
||||
this.$modal.css({
|
||||
width: width || "80%",
|
||||
height: height || "80%"
|
||||
});
|
||||
},
|
||||
|
||||
setModalFooter: function (content) {
|
||||
if (!this.$modalFooter) return;
|
||||
|
||||
if (content && content.trim()) {
|
||||
this.$modalFooter.html(content);
|
||||
this.$modalFooter.addClass("has-content");
|
||||
} else {
|
||||
this.$modalFooter.html("");
|
||||
this.$modalFooter.removeClass("has-content");
|
||||
}
|
||||
},
|
||||
|
||||
setPreviewFile: function (fileId) {
|
||||
@@ -1019,6 +1404,21 @@
|
||||
}
|
||||
self.setPreviewFile(id);
|
||||
})
|
||||
// 文件项双击打开 modal 预览
|
||||
.on("dblclick", ".g3-file-item", function (e) {
|
||||
if (
|
||||
$(e.target).closest(
|
||||
".g3-file-action, .g3-file-checkbox, .g3-file-delete-btn",
|
||||
).length
|
||||
) {
|
||||
return;
|
||||
}
|
||||
var id = $(this).data("id");
|
||||
var file = self.getFileById(id);
|
||||
if (!file) return;
|
||||
if (!self.hasPermission(file, "view")) return;
|
||||
self.openPreviewModal(id);
|
||||
})
|
||||
// 更多按钮
|
||||
.on("click", ".g3-action-more", function (e) {
|
||||
e.preventDefault();
|
||||
@@ -1037,6 +1437,23 @@
|
||||
self.openActionMenu($el, file);
|
||||
});
|
||||
|
||||
// Modal 事件绑定
|
||||
this.$modalBtnClose.off("click").on("click", function () {
|
||||
self.closeModal();
|
||||
});
|
||||
|
||||
this.$modalBtnToggle.off("click").on("click", function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
self.toggleModalSize();
|
||||
});
|
||||
|
||||
this.$modalOverlay.off("click").on("click", function (e) {
|
||||
if (e.target === this) {
|
||||
self.closeModal();
|
||||
}
|
||||
});
|
||||
|
||||
// 任务关闭按钮事件委托
|
||||
this.$container.on("click", ".g3-task-close", function (e) {
|
||||
e.preventDefault();
|
||||
@@ -1884,19 +2301,12 @@
|
||||
|
||||
resolvePermission: function (file, action) {
|
||||
var globalPermission = this.options.globalPermission;
|
||||
var filePermissionResolver = this.options.filePermissionResolver;
|
||||
|
||||
if (typeof filePermissionResolver === "function") {
|
||||
var fileResult = filePermissionResolver({ file: file, action: action });
|
||||
if (fileResult !== undefined) {
|
||||
return !!fileResult;
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof globalPermission === "function") {
|
||||
return !!globalPermission({ file: file, action: action });
|
||||
} else if (typeof globalPermission === "object") {
|
||||
return !!globalPermission[action];
|
||||
var permissionKey = action === "select" ? "upload" : action;
|
||||
return !!globalPermission[permissionKey];
|
||||
}
|
||||
|
||||
return true;
|
||||
@@ -1904,19 +2314,12 @@
|
||||
|
||||
/**
|
||||
* 更新权限配置
|
||||
* @param {Object} config - 权限配置
|
||||
* @param {Object} permissions - 权限对象
|
||||
*/
|
||||
updatePermissions: function (config) {
|
||||
if (!config) return;
|
||||
|
||||
if (config.globalPermission !== undefined) {
|
||||
this.options.globalPermission = config.globalPermission;
|
||||
}
|
||||
|
||||
if (config.filePermissionResolver !== undefined) {
|
||||
this.options.filePermissionResolver = config.filePermissionResolver;
|
||||
}
|
||||
updatePermissions: function (permissions) {
|
||||
if (!permissions) return;
|
||||
|
||||
this.options.globalPermission = permissions;
|
||||
this.updateUI();
|
||||
},
|
||||
|
||||
@@ -2004,16 +2407,9 @@
|
||||
Object.prototype.hasOwnProperty.call(
|
||||
partialState,
|
||||
"globalPermission",
|
||||
) ||
|
||||
Object.prototype.hasOwnProperty.call(
|
||||
partialState,
|
||||
"filePermissionResolver",
|
||||
)
|
||||
) {
|
||||
this.updatePermissions({
|
||||
globalPermission: partialState.globalPermission,
|
||||
filePermissionResolver: partialState.filePermissionResolver,
|
||||
});
|
||||
this.updatePermissions(partialState.globalPermission);
|
||||
}
|
||||
|
||||
return this;
|
||||
|
||||
@@ -4,6 +4,7 @@ var G3FileLanguages = {
|
||||
download: "下载",
|
||||
downloadBatch: "批量下载",
|
||||
delete: "删除",
|
||||
deleteBatch: "批量删除",
|
||||
upload: "上传",
|
||||
select: "选择",
|
||||
more: "更多",
|
||||
@@ -56,12 +57,18 @@ var G3FileLanguages = {
|
||||
currentItem: "当前项",
|
||||
close: "关闭",
|
||||
},
|
||||
modal: {
|
||||
maximize: "全屏",
|
||||
restore: "恢复",
|
||||
close: "关闭",
|
||||
},
|
||||
},
|
||||
"en-US": {
|
||||
selectAll: "Select All",
|
||||
download: "Download",
|
||||
downloadBatch: "Batch Download",
|
||||
delete: "Delete",
|
||||
deleteBatch: "Batch Delete",
|
||||
upload: "Upload",
|
||||
select: "Select",
|
||||
more: "More",
|
||||
@@ -116,5 +123,74 @@ var G3FileLanguages = {
|
||||
currentItem: "Current",
|
||||
close: "Close",
|
||||
},
|
||||
modal: {
|
||||
maximize: "Maximize",
|
||||
restore: "Restore",
|
||||
close: "Close",
|
||||
},
|
||||
},
|
||||
"ru": {
|
||||
selectAll: "Выделить все",
|
||||
download: "Скачать",
|
||||
downloadBatch: "Пакетная загрузка",
|
||||
delete: "Удалить",
|
||||
deleteBatch: "Пакетное удаление",
|
||||
upload: "Загрузить",
|
||||
select: "Выбрать",
|
||||
more: "Дополнительно",
|
||||
confirmDelete: "Вы уверены, что хотите удалить {count} выбранный(ые) файл(ы)?",
|
||||
downloading: "Подготовка к загрузке {count} файла(ов)",
|
||||
deleting: "Удаление...",
|
||||
name: "Имя",
|
||||
size: "Размер",
|
||||
date: "Дата",
|
||||
pending: "Ожидает загрузки",
|
||||
selectFiles: "Выберите файлы",
|
||||
emptyTip1: "Перетащите файлы сюда ...",
|
||||
emptyTip2: "Поддерживается множественная загрузка/скачивание файлов",
|
||||
emptyTip3: "Поддерживается вставка изображений для загрузки",
|
||||
fileSizeError: "Размер файла превышает лимит",
|
||||
preview: "Предпросмотр",
|
||||
filePreview: "Предпросмотр файла",
|
||||
fileName: "Имя файла",
|
||||
fileSize: "Размер файла",
|
||||
uploadDate: "Дата загрузки",
|
||||
fileStatus: "Статус",
|
||||
notUploaded: "Не загружен",
|
||||
uploaded: "Загружен",
|
||||
cannotPreview: "Этот тип файла не поддерживает предпросмотр",
|
||||
previewCount: "{current}/{total}",
|
||||
uploadToPreview: "Пожалуйста, загрузите для предпросмотра",
|
||||
downloadToPreview: "Пожалуйста, загрузите для предпросмотра",
|
||||
urlError: "Неверный URL, пожалуйста, проверьте ссылку",
|
||||
uploading: "Загрузка",
|
||||
uploadFailed: "Загрузка не удалась",
|
||||
downloadingStatus: "Загрузка:",
|
||||
downloadingFile: "Загружается:",
|
||||
downloadComplete: "Загрузка завершена",
|
||||
downloadResult: "Всего {total} файлов, {success} успешно, {failed} не удалось",
|
||||
close: "Закрыть",
|
||||
batchDownload: "Пакетная загрузка",
|
||||
batchUpload: "Пакетная загрузка",
|
||||
error: "Ошибка",
|
||||
downloadError: "Загрузка не удалась, пожалуйста, проверьте, действителен ли файл",
|
||||
toast: {
|
||||
success: "Успех",
|
||||
error: "Ошибка",
|
||||
info: "Информация",
|
||||
warning: "Предупреждение",
|
||||
},
|
||||
task: {
|
||||
total: "Всего",
|
||||
success: "Успешно",
|
||||
failed: "Не удалось",
|
||||
currentItem: "Текущий",
|
||||
close: "Закрыть",
|
||||
},
|
||||
modal: {
|
||||
maximize: "На весь экран",
|
||||
restore: "Восстановить",
|
||||
close: "Закрыть",
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -34,6 +34,8 @@
|
||||
background: #f5f7fa;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
@@ -76,7 +78,7 @@
|
||||
<button id="destroyBtn">销毁组件</button>
|
||||
</div>
|
||||
|
||||
<div style="height: 600px;width: 800px;">
|
||||
<div style="height: 600px;width: 1200px;">
|
||||
<div id="fileContainer"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -121,7 +123,7 @@
|
||||
language: 'zh-CN',
|
||||
previewUrl: 'https://sxox.g3soft.cn:8012/onlinePreview?url=',
|
||||
data: [
|
||||
{ name: 'logo.png', size: 1024000, uploadDate: '2024-01-15T10:30:00', url: 'https://g3hdzjsj.oss-cn-hangzhou.aliyuncs.com/g3hd/2026/04/28/ccb964f4-124d-4169-8981-20333bea2587.docx' },
|
||||
{ name: 'DC2A4692147D10C9C7B48A7EA29BCBA8.jpg', size: 1024000, uploadDate: '2024-01-15T10:30:00', url: 'http://118.89.70.199:9000/test/DC2A4692147D10C9C7B48A7EA29BCBA8.jpg' },
|
||||
],
|
||||
uploadConfig: {
|
||||
aliyun: {
|
||||
@@ -195,80 +197,6 @@
|
||||
getActionMenu: function (file) {
|
||||
const menuItems = [];
|
||||
|
||||
// 根据权限添加菜单项
|
||||
if (userPermissions.approve) {
|
||||
menuItems.push({
|
||||
title: '审批',
|
||||
onClick: function (f) {
|
||||
console.log('审批文件:', f.name);
|
||||
alert('审批功能：' + f.name);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (userPermissions.edit) {
|
||||
menuItems.push({
|
||||
title: '修改',
|
||||
onClick: function (f) {
|
||||
console.log('修改文件:', f.name);
|
||||
alert('修改功能：' + f.name);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (userPermissions.rename) {
|
||||
menuItems.push({
|
||||
title: '重命名',
|
||||
onClick: function (f) {
|
||||
console.log('重命名文件:', f.name);
|
||||
const newName = prompt('请输入新文件名:', f.name);
|
||||
if (newName && newName !== f.name) {
|
||||
console.log('文件已重命名为:', newName);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (userPermissions.copy) {
|
||||
menuItems.push({
|
||||
title: '复制',
|
||||
onClick: function (f) {
|
||||
console.log('复制文件:', f.name);
|
||||
alert('复制功能：' + f.name);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (userPermissions.move) {
|
||||
menuItems.push({
|
||||
title: '移动到文件夹',
|
||||
onClick: function (f) {
|
||||
console.log('移动文件:', f.name);
|
||||
alert('移动功能：' + f.name);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (userPermissions.share) {
|
||||
menuItems.push({
|
||||
title: '分享',
|
||||
onClick: function (f) {
|
||||
console.log('分享文件:', f.name);
|
||||
alert('分享功能：' + f.name);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (userPermissions.history) {
|
||||
menuItems.push({
|
||||
title: '历史版本',
|
||||
onClick: function (f) {
|
||||
console.log('查看历史版本:', f.name);
|
||||
alert('历史版本功能：' + f.name);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return menuItems;
|
||||
}
|
||||
});
|
||||
|
||||
+193
-471
@@ -1,505 +1,227 @@
|
||||
<%@ page language="java" import="java.util.*,com.g3.general.*" pageEncoding="utf-8" %>
|
||||
<%@ include file="../ini.jsp" %>
|
||||
<% if (orgid.equals("")) { return; } String id=request.getParameter("id"); String
|
||||
mx_moduleid=request.getParameter("mx_moduleid"); String sh_state=request.getParameter("sh_state"); String
|
||||
iread=request.getParameter("iread"); String tree_where=request.getParameter("tree_where"); String
|
||||
mx_secondfather=request.getParameter("mx_secondfather"); if (mx_secondfather==null) { mx_secondfather="" ; }
|
||||
String mx_secondfather_fz=request.getParameter("mx_secondfather_fz"); if (mx_secondfather_fz==null) {
|
||||
mx_secondfather_fz="" ; } String default_click=request.getParameter("default_click"); if (default_click==null) {
|
||||
default_click="" ; } %>
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>G3 File UI Demo</title>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Cache-Control" content="no-cache" />
|
||||
<base href="<%=basePath%>">
|
||||
<title>采购下单浏览</title>
|
||||
<jsp:include page="../inc.jsp"></jsp:include>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
background: #f5f6f7;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial;
|
||||
}
|
||||
|
||||
<script type="text/javascript" src="<%=basePath%>/js/jquery-easyui-1.4/jquery.min.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="<%=basePath%>/js/jquery-easyui-1.4/themes/default/easyui.css" />
|
||||
<link rel="stylesheet" type="text/css" href="<%=basePath%>/js/jquery-easyui-1.4/themes/icon.css" />
|
||||
<script type="text/javascript" src="<%=basePath%>/js/jquery-easyui-1.4/jquery.easyui.min.js"></script>
|
||||
<script type="text/javascript" src="<%=basePath%>/js/jquery-easyui-1.4/locale/easyui-lang-zh_CN.js"></script>
|
||||
/* 列表 */
|
||||
.g3-file-list {
|
||||
width: 600px;
|
||||
margin: 40px auto;
|
||||
}
|
||||
|
||||
<script type="text/javascript" src="<%=basePath%>/js/g3-file/libs/FileSaver.min.js"></script>
|
||||
<script type="text/javascript" src="<%=basePath%>/js/g3-file/libs/jszip.min.js"></script>
|
||||
<script type="text/javascript" src="<%=basePath%>/js/g3-file/index.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="<%=basePath%>/js/g3-file/index.css" />
|
||||
/* 文件项 */
|
||||
.g3-file-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid #eee;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
<script type="text/javascript" src="g3Funlib.js?5"></script>
|
||||
.g3-file-item:hover {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
<script type="text/javascript" id="testScript" columns_viewgrid="v_xc_consite_wx"
|
||||
changLang_table="v_xc_consite_wx" columns_editgrid="" src="language/language_new_yardyw.js"></script>
|
||||
<script type="text/javascript" src="language/languagebtn.js"></script>
|
||||
/* 缩略图 */
|
||||
.g3-file-thumb {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
<style type="text/css">
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.g3-file-thumb img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
/* 信息 */
|
||||
.g3-file-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.g3-layout {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
.g3-file-name {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.g3-layout .pane {
|
||||
height: 100%;
|
||||
flex: 0 0 auto;
|
||||
overflow: auto;
|
||||
}
|
||||
.g3-file-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.g3-layout .split {
|
||||
width: 1px;
|
||||
position: relative;
|
||||
background: #95b8e7;
|
||||
}
|
||||
/* 进度条 */
|
||||
.g3-file-progress {
|
||||
flex: 1;
|
||||
height: 4px;
|
||||
background: #eee;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.g3-layout .split::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -6px;
|
||||
right: -6px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
cursor: ew-resize;
|
||||
}
|
||||
.g3-file-progress-bar {
|
||||
height: 100%;
|
||||
background: #52c41a;
|
||||
width: 0%;
|
||||
}
|
||||
|
||||
#fileContainer {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
/* 错误 */
|
||||
.g3-file-error {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
#previewContainer {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
/* 操作 */
|
||||
.g3-file-actions {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
margin-left: 10px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
<body>
|
||||
<div class="g3-layout" id="dropZone" style="position: relative;">
|
||||
<div class="pane" data-pane="left" style="width: 10%;min-width: 150px;">
|
||||
<ul id="otherbaseTree" class="easyui-tree"></ul>
|
||||
</div>
|
||||
.g3-file-item:hover .g3-file-actions {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
<div class="split" id="split1"></div>
|
||||
.g3-btn {
|
||||
border: none;
|
||||
background: #f0f0f0;
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
<div class="pane" data-pane="middle" style="width: 30%;min-width: 450px;">
|
||||
<div id="fileContainer"></div>
|
||||
</div>
|
||||
.g3-btn:hover {
|
||||
background: #e6e6e6;
|
||||
}
|
||||
|
||||
<div class="split" id="split2"></div>
|
||||
.g3-btn.danger {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
<div class="pane" data-pane="right" style="flex:1">
|
||||
<div id="previewContainer">文件预览位置</div>
|
||||
/* 状态控制 */
|
||||
.is-success .g3-file-progress {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.is-error .g3-file-progress {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.is-error .g3-file-error {
|
||||
display: inline;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="g3-file-list" id="fileList">
|
||||
|
||||
<!-- 上传中 -->
|
||||
<div class="g3-file-item is-uploading">
|
||||
<div class="g3-file-thumb">
|
||||
<img src="https://via.placeholder.com/40" />
|
||||
</div>
|
||||
|
||||
<div class="g3-file-info">
|
||||
<div class="g3-file-name">uploading-file.zip</div>
|
||||
<div class="g3-file-meta">
|
||||
<span>3.2 MB</span>
|
||||
<div class="g3-file-progress">
|
||||
<div class="g3-file-progress-bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
/** 全局变量 */
|
||||
var vid1 = "<%=id%>";
|
||||
var mx_moduleid = "<%=mx_moduleid%>";
|
||||
var sh_state = "<%=sh_state%>";
|
||||
var iread = "<%=iread%>";
|
||||
var orgid = "<%=orgid%>";
|
||||
var tree_where = "<%=tree_where%>";
|
||||
var mx_secondfather = "<%=mx_secondfather%>";
|
||||
var mx_secondfather_fz = "<%=mx_secondfather_fz%>";
|
||||
var default_click = "<%=default_click%>";
|
||||
var Fmoduleid = "<%=mx_moduleid%>";
|
||||
var modid = "g3hdzjsj";
|
||||
var mx_orderid = '';
|
||||
var jpowerqx = null;
|
||||
var g3FileInstance = null;
|
||||
var userid = "<%=userid%>";
|
||||
var tablename = "bf_files";
|
||||
<div class="g3-file-actions">
|
||||
<button class="g3-btn">查看</button>
|
||||
<button class="g3-btn">下载</button>
|
||||
<button class="g3-btn danger">删除</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
/** 多语言文本 */
|
||||
var tabtitle = '所有类别';
|
||||
var xztitle = '下载';
|
||||
var viewtitle = '查看';
|
||||
var confirmOk = '是';
|
||||
var confirmCancel = '否';
|
||||
var alertCannotDelete = '已审核不能删除';
|
||||
var alertSelectFile = '请选择要删除的图片';
|
||||
var alertDeleteSuccess = '删除成功';
|
||||
var alertDeleteFail = '删除失败';
|
||||
var alertDeletePartial = '部分删除失败：成功 {0} 条，失败 {1} 条';
|
||||
var confirmTitle = '操作提示';
|
||||
var confirmMessage = '您确定删除选中的 {0} 条数据吗？';
|
||||
<!-- 成功 -->
|
||||
<div class="g3-file-item is-success">
|
||||
<div class="g3-file-thumb">
|
||||
<img src="https://via.placeholder.com/40" />
|
||||
</div>
|
||||
|
||||
/**
|
||||
* 初始化多语言配置
|
||||
*/
|
||||
function initLanguage() {
|
||||
var language = getCookie("languageCook");
|
||||
if (language == 1) {
|
||||
tabtitle = 'All Categories';
|
||||
xztitle = 'Download';
|
||||
viewtitle = 'View';
|
||||
confirmOk = 'Yes';
|
||||
confirmCancel = 'No';
|
||||
alertCannotDelete = 'Cannot delete after review';
|
||||
alertSelectFile = 'Please select files to delete';
|
||||
alertDeleteSuccess = 'Delete success';
|
||||
alertDeleteFail = 'Delete failed';
|
||||
alertDeletePartial = 'Partial delete failed: {0} success, {1} failed';
|
||||
confirmTitle = 'Confirmation';
|
||||
confirmMessage = 'Are you sure to delete {0} selected items?';
|
||||
} else if (language == 2) {
|
||||
tabtitle = 'Все категории';
|
||||
xztitle = 'Скачать';
|
||||
viewtitle = 'Просмотр';
|
||||
}
|
||||
}
|
||||
<div class="g3-file-info">
|
||||
<div class="g3-file-name">finished.pdf</div>
|
||||
<div class="g3-file-meta">
|
||||
<span>1.1 MB</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
/**
|
||||
* 绑定分割条拖拽事件
|
||||
* @param {string} splitId - 分割条元素ID
|
||||
* @param {HTMLElement} leftEl - 左侧面板元素
|
||||
*/
|
||||
function bindSplit(splitId, leftEl) {
|
||||
const split = document.getElementById(splitId);
|
||||
let startX = 0, startWidth = 0, dragging = false;
|
||||
<div class="g3-file-actions">
|
||||
<button class="g3-btn">查看</button>
|
||||
<button class="g3-btn">下载</button>
|
||||
<button class="g3-btn danger">删除</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
split.addEventListener('mousedown', function (e) {
|
||||
if (e.button !== 0) return;
|
||||
dragging = true;
|
||||
startX = e.clientX;
|
||||
startWidth = leftEl.offsetWidth;
|
||||
document.body.style.userSelect = 'none';
|
||||
document.addEventListener('mousemove', onMouseMove);
|
||||
document.addEventListener('mouseup', onMouseUp);
|
||||
});
|
||||
<!-- 失败 -->
|
||||
<div class="g3-file-item is-error">
|
||||
<div class="g3-file-thumb">
|
||||
<img src="https://via.placeholder.com/40" />
|
||||
</div>
|
||||
|
||||
function onMouseMove(e) {
|
||||
if (!dragging) return;
|
||||
let newWidth = startWidth + (e.clientX - startX);
|
||||
if (newWidth < 100) newWidth = 150;
|
||||
leftEl.style.width = newWidth + 'px';
|
||||
}
|
||||
<div class="g3-file-info">
|
||||
<div class="g3-file-name">error-image.png</div>
|
||||
<div class="g3-file-meta">
|
||||
<span>5.6 MB</span>
|
||||
<span class="g3-file-error">上传失败</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
function onMouseUp() {
|
||||
dragging = false;
|
||||
document.body.style.userSelect = '';
|
||||
document.removeEventListener('mousemove', onMouseMove);
|
||||
document.removeEventListener('mouseup', onMouseUp);
|
||||
}
|
||||
}
|
||||
<div class="g3-file-actions">
|
||||
<button class="g3-btn">重试</button>
|
||||
<button class="g3-btn danger">删除</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
/**
|
||||
* 初始化文件管理组件
|
||||
*/
|
||||
function initG3File() {
|
||||
if (g3FileInstance) return;
|
||||
</div>
|
||||
|
||||
var langCode = getCookie("languageCook") == 1 ? "en-US" : "zh-CN";
|
||||
<script>
|
||||
// 模拟上传进度
|
||||
const progressBar = document.querySelector('.is-uploading .g3-file-progress-bar');
|
||||
let percent = 0;
|
||||
|
||||
g3FileInstance = $('#fileContainer').G3File({
|
||||
language: langCode,
|
||||
uploadConfig: {
|
||||
aliyun: {
|
||||
getAliyunKey: function () {
|
||||
return new Promise(function (resolve, reject) {
|
||||
$.ajax({
|
||||
url: "jattachfiletype/getaliyunkey.jsp",
|
||||
type: "GET",
|
||||
data: {
|
||||
orgid: orgid,
|
||||
bucket: modid
|
||||
},
|
||||
success: function (res) {
|
||||
try {
|
||||
var json = typeof res === "string" ? JSON.parse(res) : res;
|
||||
resolve({
|
||||
accessid: json.accessid,
|
||||
policy: json.policy,
|
||||
signature: json.signature,
|
||||
callback: json.callback,
|
||||
host: json.host,
|
||||
dir: json.dir,
|
||||
expire: json.expire
|
||||
});
|
||||
} catch (e) {
|
||||
reject(e);
|
||||
}
|
||||
},
|
||||
error: function (err) {
|
||||
reject(err);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
onDelete: handleDelete
|
||||
});
|
||||
}
|
||||
const timer = setInterval(() => {
|
||||
percent += 5;
|
||||
progressBar.style.width = percent + '%';
|
||||
|
||||
/**
|
||||
* 处理文件删除操作，删除成功后刷新文件列表
|
||||
* @param {Array} files - 待删除文件列表
|
||||
* @param {Function} callback - 删除完成回调函数
|
||||
*/
|
||||
function handleDelete(files, callback) {
|
||||
if (sh_state == 0) {
|
||||
alert(alertCannotDelete);
|
||||
callback(false);
|
||||
return;
|
||||
}
|
||||
if (percent >= 100) {
|
||||
clearInterval(timer);
|
||||
const item = progressBar.closest('.g3-file-item');
|
||||
item.classList.remove('is-uploading');
|
||||
item.classList.add('is-success');
|
||||
}
|
||||
}, 300);
|
||||
</script>
|
||||
|
||||
if (!files || files.length === 0) {
|
||||
alert(alertSelectFile);
|
||||
callback(false);
|
||||
return;
|
||||
}
|
||||
</body>
|
||||
|
||||
$.messager.defaults = {
|
||||
ok: confirmOk,
|
||||
cancel: confirmCancel
|
||||
};
|
||||
|
||||
$.messager.confirm(confirmTitle, confirmMessage.replace('{0}', files.length), function (ok) {
|
||||
if (!ok) {
|
||||
callback(false);
|
||||
return;
|
||||
}
|
||||
|
||||
var ids = files.map(item => item.subid);
|
||||
|
||||
if (ids.length === 0) {
|
||||
alert(alertSelectFile);
|
||||
callback(false);
|
||||
return;
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
type: 'post',
|
||||
url: 'jattachfiletype/DelSubRecordBath.jsp',
|
||||
data: {
|
||||
module: tablename,
|
||||
bucketName: modid,
|
||||
ids: ids.join(",")
|
||||
},
|
||||
success: function (res) {
|
||||
var last = res[res.length - 1];
|
||||
if (last.result) {
|
||||
alert(alertDeleteSuccess);
|
||||
} else {
|
||||
alert(alertDeletePartial.replace('{0}', last.success).replace('{1}', last.fail));
|
||||
}
|
||||
callback(true);
|
||||
refreshFileList();
|
||||
},
|
||||
error: function () {
|
||||
alert(alertDeleteFail);
|
||||
callback(false);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 刷新文件列表（删除后重新请求数据）
|
||||
*/
|
||||
function refreshFileList() {
|
||||
var queryWhere = buildQueryWhere(mx_orderid);
|
||||
searchData(queryWhere);
|
||||
}
|
||||
|
||||
/**
|
||||
* 构建查询条件
|
||||
* @param {string} orderId - 订单ID
|
||||
* @returns {string} - 查询条件字符串
|
||||
*/
|
||||
function buildQueryWhere(orderId) {
|
||||
var queryWhere = "mx_moduleid='" + Fmoduleid + "' and father='" + vid1 + "'";
|
||||
|
||||
if (tree_where && tree_where !== '' && tree_where != 'null') {
|
||||
queryWhere += " and mx_orderid='" + tree_where + "'";
|
||||
}
|
||||
if (orderId && orderId !== '') {
|
||||
queryWhere = "mx_moduleid='" + Fmoduleid + "' and father='" + vid1 + "' and mx_orderid='" + orderId + "'";
|
||||
}
|
||||
if (mx_secondfather && mx_secondfather !== '' && mx_secondfather != 'null') {
|
||||
queryWhere += " and mx_secondfather='" + mx_secondfather + "'";
|
||||
}
|
||||
|
||||
return queryWhere;
|
||||
}
|
||||
|
||||
/**
|
||||
* 搜索文件数据
|
||||
* @param {string} condition - 查询条件
|
||||
*/
|
||||
function searchData(condition) {
|
||||
if (!g3FileInstance) {
|
||||
initG3File();
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
url: "jattachfiletype/loaddata_attach.jsp",
|
||||
type: "post",
|
||||
async: true,
|
||||
data: {
|
||||
viewname: "bf_files",
|
||||
searchcondition: condition,
|
||||
orderfield: '',
|
||||
soption: ''
|
||||
},
|
||||
success: function (res) {
|
||||
var fileList = [];
|
||||
for (var i = 0; i < res.length; i++) {
|
||||
fileList.push({
|
||||
name: res[i].mx_filename,
|
||||
size: res[i].mx_filesize,
|
||||
uploadDate: res[i].mx_addtime,
|
||||
url: res[i].mx_mapfilename,
|
||||
...res[i]
|
||||
});
|
||||
}
|
||||
g3FileInstance.setFiles(fileList);
|
||||
},
|
||||
error: function () {
|
||||
g3FileInstance.setFiles([]);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建文件类型树
|
||||
*/
|
||||
function createTree() {
|
||||
$('#otherbaseTree').tree('append', {
|
||||
data: [{ id: '', text: tabtitle }]
|
||||
});
|
||||
var node = $('#otherbaseTree').tree('find', '');
|
||||
|
||||
var queryWhere = '';
|
||||
if (tree_where !== '' && tree_where != 'null') {
|
||||
queryWhere = "and b_id='" + tree_where + "'";
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
type: 'post',
|
||||
url: 'jsp/searchdata.jsp',
|
||||
cache: false,
|
||||
async: false,
|
||||
data: {
|
||||
soption: 'main',
|
||||
searchcondition: "2>1 and b_module_id='" + Fmoduleid + "'" + queryWhere,
|
||||
viewname: 'bf_files_type',
|
||||
orderfield: 'b_xh'
|
||||
},
|
||||
dataType: 'json',
|
||||
success: function (result) {
|
||||
for (var i in result) {
|
||||
$('#otherbaseTree').tree('append', {
|
||||
parent: node.target,
|
||||
data: [{ id: result[i].b_id, text: result[i].b_name }]
|
||||
});
|
||||
}
|
||||
if (default_click && default_click != 'null') {
|
||||
setTimeout(function () {
|
||||
var node = $('#otherbaseTree').tree('find', default_click);
|
||||
if (node) {
|
||||
$('#otherbaseTree').tree('select', node.target);
|
||||
onClickNode(node);
|
||||
}
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 加载子节点数据
|
||||
* @param {Object} node - 树节点对象
|
||||
*/
|
||||
function loadChildNodes(node) {
|
||||
$.ajax({
|
||||
type: 'post',
|
||||
url: 'jsp/searchdata.jsp',
|
||||
cache: false,
|
||||
async: false,
|
||||
data: {
|
||||
soption: 'main',
|
||||
searchcondition: "b_module_id ='" + node.id + "'",
|
||||
viewname: 'bf_files_type',
|
||||
orderfield: 'b_xh'
|
||||
},
|
||||
dataType: 'json',
|
||||
success: function (result) {
|
||||
for (var i in result) {
|
||||
$('#otherbaseTree').tree('append', {
|
||||
parent: node.target,
|
||||
data: [{ id: result[i].b_id, text: result[i].b_name }]
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 树节点点击事件处理
|
||||
* @param {Object} node - 被点击的树节点
|
||||
*/
|
||||
function onClickNode(node) {
|
||||
mx_orderid = node.id;
|
||||
var queryWhere = buildQueryWhere(node.id);
|
||||
|
||||
if ($('#otherbaseTree').tree('getLevel', node.target) > 0 && $('#otherbaseTree').tree('isLeaf', node.target)) {
|
||||
loadChildNodes(node);
|
||||
}
|
||||
|
||||
searchData(queryWhere);
|
||||
}
|
||||
|
||||
/**
|
||||
* 初始化权限控制
|
||||
*/
|
||||
function initPowerControl() {
|
||||
if (orgid != 'demo') {
|
||||
jpowerqx = getUserPowerQX('bf_files', userid);
|
||||
for (var key in jpowerqx) {
|
||||
if (jpowerqx[key] != '1') {
|
||||
$("a[tag='" + key + "']").linkbutton('disable');
|
||||
$("button[tag='" + key + "']").attr('disabled', true);
|
||||
$("input[tag='" + key + "']").attr('disabled', true);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (getModulePowerByTag(Fmoduleid, userid, '4') != '1') {
|
||||
sh_state = 0;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 页面初始化入口
|
||||
*/
|
||||
$(function () {
|
||||
initLanguage();
|
||||
bindSplit('split1', document.querySelector('[data-pane="left"]'));
|
||||
bindSplit('split2', document.querySelector('[data-pane="middle"]'));
|
||||
createTree();
|
||||
|
||||
$('#otherbaseTree').tree({
|
||||
onClick: onClickNode
|
||||
});
|
||||
|
||||
initPowerControl();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
Reference in new issue
Block a user