@chenghongyu/xpt-file-viewer 1.1.0

package/src/http/index.js

@@ -0,0 +1,153 @@
+import axios from 'axios'
+import {ElMessage} from 'element-plus';
+// 修改后：延迟初始化或通过 pinia 实例获取
+import { createPinia } from 'pinia';
+import useGlobalConfigStore from '~/stores/global-config';
+import MessageBox from "~/components/messageBox/messageBox";
+const pinia = createPinia();
+let globalConfigStore = useGlobalConfigStore(pinia);
+// 创建 axios 的一个实例
+const instance = axios.create({
+    baseURL: globalConfigStore.zfileConfig.baseUrl, //接口统一域名
+    timeout: 0, //设置超时
+    headers: {
+        'Content-Type': 'application/json;charset=UTF-8;',
+    },
+})
+
+// 请求拦截器
+instance.interceptors.request.use((config) => {
+    // 每次发送请求之前判断是否存在 token，如果存在，则统一在 http 请求的 header 都加上 token，不用每次请求都手动添加了
+    let token = window.localStorage.getItem('zfile-token');
+	// 如果 token 不存在，则从 cookie 中获取
+	if (!token) {
+		const cookieToken = document.cookie.split('; ').find(row => row.startsWith('zfile-token='));
+		if (cookieToken) {
+			token = cookieToken.split('=')[1];
+		}
+	}
+    // 非外部链接，才增加 token 到请求头
+    if (!config.url.startsWith("http") || config.containToken === true) {
+        token && (config.headers['zfile-token'] = token)
+        config.headers['axios-request'] = true
+        config.headers['axios-from'] = globalConfigStore.serverAddress
+    }
+    // console.log('开始请求的 url 为：', config.url, '\n时间为：', new Date().getTime())
+    // requestTimeCache[config.url] = new Date().getTime();
+    console.time(config.url);
+
+    return config;
+}, (error) =>
+    // 对请求错误做些什么
+    Promise.reject(error)
+);
+
+// 响应拦截器
+instance.interceptors.response.use((response) => {
+    // console.log('结束请求的 url 为：', response.config.url, '\n时间为：', new Date().getTime(), '\n耗时为：', new Date().getTime() - requestTimeCache[response.config.url])
+    console.timeEnd(response.config.url);
+    // 如果不需要话执行响应拦截器, 直接返回
+    if (response.config.responseIntercept === false) {
+        return response;
+    }
+
+    if (response.data.code !== constant.responseCode.SUCCESS) {
+
+        if (response.config.showDefaultMsg !== false) {
+            ElMessage({
+                type: 'error',
+                dangerouslyUseHTMLString: true,
+                grouping: true,
+                message: response.data.msg
+            })
+        }
+
+        return Promise.reject(response);
+    }
+    return response.data;
+}, (error) => {
+    // 响应错误
+    if(error.response && error.response.status){
+        const responseDataCode = error.response.data.code;
+
+        if (responseDataCode === constant.responseCode.BAD_REQUEST) {
+            let errorObj = error.response.data.data;
+
+            let message;
+            if (errorObj) {
+                let keys = Object.keys(errorObj);
+
+                if (keys.length > 1) {
+                    message = '非法参数！<br>';
+                    keys.forEach((key) => {
+                        message += `字段[${key}]: ${errorObj[key]}<br>`
+                    })
+                } else {
+                    message = errorObj[keys[0]];
+                }
+            } else {
+                message = error.response.data.msg;
+            }
+
+            ElMessage({
+                type: 'error',
+                dangerouslyUseHTMLString: true,
+                grouping: true,
+                message: message
+            })
+            return Promise.reject(error);
+        }
+
+        if (responseDataCode === constant.responseCode.UNAUTHORIZED) {
+            window.location.href = '/login?redirect=' + window.location.pathname + window.location.search + window.location.hash;
+            return;
+        }
+
+        if (responseDataCode === constant.responseCode.FORBIDDEN) {
+            MessageBox.confirm('您没有权限访问此资源，是否前往登录？', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                window.location.href = '/login?redirect=' + window.location.pathname + window.location.search + window.location.hash;
+            }).catch(() => {
+            });
+        }
+
+        if (error.response.config.showDefaultMsg !== false) {
+            if (responseDataCode) {
+                if (responseDataCode.startsWith(constant.responseCode.PRO_CHECK_PREFIX)) {
+                    MessageBox.confirm(`授权校验异常, 错误信息: <font color="red">${error.response.data.msg}</font>，是否前往后台查看授权设置？`, '提示', {
+                        confirmButtonText: '确定',
+                        cancelButtonText: '取消',
+                        dangerouslyUseHTMLString: true,
+                        type: 'info'
+                    }).then(() => {
+                        window.location.href = '/admin';
+                    }).catch(() => {
+                    });
+                } else {
+                    ElMessage({
+                        type: 'error',
+                        grouping: true,
+                        message: error.response.data.msg
+                    })
+                }
+            }  else {
+                let msg = '请求失败，请联系管理员';
+                if (error.response.status === 403) {
+                    msg = error.response.data;
+                }
+                ElMessage({
+                    type: 'error',
+                    grouping: true,
+                    message: msg
+                })
+            }
+        }
+        return Promise.reject(error);
+    }
+    return Promise.reject(error);
+});
+
+export default instance;

package/src/http/request.js

@@ -0,0 +1,31 @@
+// http/request.js
+import instance from "~/http"
+
+/**
+ * @param {String} method  请求的方法：get、post、delete、put
+ * @param {String} url     请求的url:
+ * @param {Object} data    请求的参数
+ * @param {Object} config  请求的配置
+ * @returns {Promise}     返回一个 promise 对象，其实就相当于 axios 请求数据的返回值
+ */
+const axios = ({
+       method,
+       url,
+       data,
+       config
+   }) => {
+    method = method.toLowerCase();
+    if (method === 'get') {
+        return instance.get(url, {params: data, ...config});
+    } else if (method === 'post') {
+        return instance.post(url, data, {...config})
+    } else if (method === 'put') {
+        return instance.put(url, data, {...config})
+    } else if (method === 'delete') {
+        return instance.delete(url, {params: data, ...config});
+    } else {
+        console.error('未知的 method:' + method)
+        return Promise.reject('不支持的 Method');
+    }
+}
+export default axios

package/src/main.ts

@@ -0,0 +1,23 @@
+// src/main.ts
+import { createApp } from 'vue'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import { createPinia } from 'pinia'
+import App from './App.vue'
+// 导出文件预览主组件
+import HelloWorld from './components/HelloWorld.vue'
+
+const app = createApp(App)
+const pinia = createPinia()
+
+export function install(app: any) {
+  app.component('FileViewer', HelloWorld)
+}
+// 默认导出（兼容多种引入方式）
+export default {
+  install,
+  FileViewer: HelloWorld,
+}
+app.use(ElementPlus)
+app.use(pinia)
+// app.mount('#app')

package/src/stores/file-data.ts

@@ -0,0 +1,108 @@
+// @ts-ignore
+import { getFileType, getFileIconName } from "../utils";
+import { defineStore } from 'pinia'
+
+// @ts-ignore
+import useStorageConfigStore from "./storage-config";
+
+// 当前存储源的配置信息，数据来源为服务端配置。请求存储源后会获取其配置信息。
+const useFileDataStore = defineStore('fileDataStore', {
+  state: () => {
+    return {
+      currentClickRow: {},
+      currentRightClickRow: {},
+      currentStorageSource: {
+        id: null,
+        type: {
+          description: '',
+          key: ''
+        }
+      },
+      imgMode: false,
+      newImgMode: false,
+      oldStorageKey: null,
+      searchParam: '',
+      fileListSource: [],
+      loadFileSize: -1,
+      audioArray: [],
+      audioIndex: 0,
+    }
+  },
+  getters: {
+    filterFileByType: (state) => {
+      return (type: string) => {
+        return state.fileListSource.filter(function (item:any) {
+          if (item.type === 'BACK') {
+            return false
+          }
+          let name = item.name;
+          let suffix = name.substr(name.lastIndexOf('.') + 1).toLowerCase();
+          return constant.fileTypeMap[type].indexOf(suffix) !== -1;
+        });
+      };
+    },
+    fileList: state => {
+      if (state.loadFileSize === -1) return [];
+      let firstIsBack = state.fileListSource[0]?.type === 'BACK';
+      let toSize = firstIsBack ? state.loadFileSize + 1 : state.loadFileSize;
+      toSize = toSize > state.fileListSource.length ? state.fileListSource.length : toSize;
+      let tableData = state.fileListSource.slice(0, toSize);
+      tableData.forEach((item:any) => {
+        // 生成图标
+        if (!item.icon) {
+          item['icon'] = getFileIconName(item);
+        }
+        if (item.preview !== null) {
+          // 获取文件类型
+          let fileType = getFileType(item.name);
+          if (fileType) {
+            // 获取文件是否可预览
+            item['fileType'] = fileType;
+            item.preview = constant.previewFileType.indexOf(fileType) !== -1;
+          } else {
+            item.preview = false;
+          }
+        }
+      });
+      return tableData;
+    },
+    getFileUrlByName: state => {
+      return (name: string) => {
+        let item = state.fileListSource.find((item:any) => item.name === name);
+        if (item) {
+          return item.url;
+        }
+        return '';
+      };
+    }
+  },
+  actions: {
+    updateCurrentStorageSource(val: any) {
+      this.currentStorageSource = val;
+    },
+    updateAudioIndex(val: any) {
+      this.audioIndex = val;
+    },
+    updateAudioList(val: any) {
+      this.audioArray = val;
+    },
+    updateCurrentClickRow(val: any) {
+      this.currentClickRow = val;
+    },
+    updateCurrentRightClickRow(val: any) {
+      this.currentRightClickRow = val;
+    },
+    updateFileList(val: any) {
+      this.fileListSource = val;
+      this.loadFileSize = useStorageConfigStore().globalConfig.maxShowSize;
+    },
+    updateOldStorageKey(val: any) {
+      this.oldStorageKey = val;
+    },
+    updateLoadFileSize(val: number) {
+      this.loadFileSize = val;
+    }
+  },
+})
+
+export default useFileDataStore;

package/src/stores/global-config.ts

@@ -0,0 +1,115 @@
+import { defineStore } from "pinia";
+// @ts-ignore
+import { isMobile } from "../utils";
+import type { FormProps }  from "element-plus";
+
+// 全局配置信息, 初始化自 /public/zfile.config.json 文件中.
+const useGlobalConfigStore = defineStore("globalConfigStore", {
+	state: () => {
+		return {
+			zfileConfig: {
+				baseUrl: "",
+				router: {
+					mode: "history"
+				},
+				skeleton: {
+					enable: true,
+					show: "always",
+					size: 20
+				},
+				gallery: {
+					mobileColumn: 5,
+					column: 3,
+					columnSpacing: 50,
+					rowSpacing: 10,
+					showInfo: true,
+					showInfoMode: "hover",
+					roundedBorder: true,
+					showBackTop: true
+				},
+				imagePreview: {
+					mode: "full",
+					gallery: true
+				},
+				officePreview: {},
+				admin: {
+					form: {
+						mobile: {
+							"size": "mini",
+							"labelWidth": "120px",
+							"labelPosition": "left",
+						},
+						pc: {
+							"size": "mini",
+							"labelWidth": "120px",
+							"labelPosition": "left",
+						}
+					},
+					search: {
+						mobile: {
+							size: "mini",
+							spanSize: 16,
+						},
+						pc: {
+							size: "mini",
+							spanSize: 8,
+						}
+					},
+					table: {
+						mobile: {
+							"size": "default",
+							"pager": {
+								"size": "small",
+								"background": true,
+								"layout": "prev, pager, next",
+								"pagerCount": 5
+							}
+						},
+						pc: {
+							"size": "default",
+							"pager": {
+								"size": "default",
+								"background": true,
+								"layout": "total, sizes, prev, pager, next, jumper",
+								"pagerCount": 5
+							}
+						}
+					}
+				}
+			}
+		};
+	},
+	actions: {
+		updateZfileConfig(val: any) {
+			this.zfileConfig = val;
+		}
+	},
+	getters: {
+		serverAddress(): string {
+			return this.zfileConfig.baseUrl || window.location.origin;
+		},
+		frontAddress() {
+			return window.location.origin;
+		},
+		adminForm(): FormProps {
+			return isMobile.value ?
+				this.zfileConfig.admin.form.mobile as FormProps
+				:
+				this.zfileConfig.admin.form.pc as FormProps;
+		},
+		adminSearch(): any {
+			return isMobile.value ?
+				this.zfileConfig.admin.search.mobile
+				:
+				this.zfileConfig.admin.search.pc;
+		},
+		adminTable(): any {
+			return isMobile.value ?
+				this.zfileConfig.admin.table.mobile
+				:
+				this.zfileConfig.admin.table.pc;
+		}
+	}
+});
+
+export default useGlobalConfigStore;

package/src/stores/storage-config.ts

@@ -0,0 +1,123 @@
+import { defineStore } from "pinia";
+
+import useFileSelect from "~/composables/file/useFileSelect";
+
+let { selectStatistics } = useFileSelect();
+
+
+// 当前存储源的配置信息，数据来源为服务端配置。请求存储源后会获取其配置信息。
+const useStorageConfigStore = defineStore('storageConfigStore', {
+  state: () => {
+    return {
+      globalConfig: {
+        siteName: '',
+        directLinkPrefix: '',
+        infoEnable: false,
+        showLinkBtn: false,
+        recordDownloadLog: false,
+        showShortLink: false,
+        showPathLink: false,
+        tableSize: 'small',
+        rootShowStorage: true,
+        fileClickMode: 'dbclick',
+		mobileFileClickMode: 'dbclick',
+        showDocument: false,
+        debugMode: false,
+        icp: '',
+        announcement: '',
+        layout: 'full',
+        mobileLayout: 'full',
+        showAnnouncement: false,
+        searchEnable: false,
+        showLogin: false,
+        siteHomeName: '首页',
+        siteHomeLogo: '',
+        siteHomeLogoLink: '',
+        siteHomeLogoTargetMode: '',
+        maxShowSize: 1000,
+        loadMoreSize: 50,
+        defaultSortField: 'name',
+        defaultSortOrder: 'asc',
+        linkExpireTimes: '',
+        forceBackendAddress: '',
+				enableNormalDownloadConfirm: true,
+			},
+      loginInfo: {
+        isLogin: null,
+        isAdmin: null,
+        username: '',
+        nickname: ''
+      },
+      folderConfig: {
+        readmeText: null,
+        proxyUpload: false,
+        readmeDisplayMode: null,
+        defaultSwitchToImgMode: false,
+        permission: {
+          preview: true,
+        },
+        metadata: {
+          uploadType: null,
+          supportRenameFolder: null,
+          supportMoveFolder: null,
+          supportCopyFolder: null,
+          supportDeleteNotEmptyFolder: null,
+          needCreateFolderBeforeUpload: null,
+        },
+        rootPath: null,
+      },
+      user: {
+      	rootPath: '',
+      }
+    }
+  },
+  getters: {
+    permission: (state) => {
+      let originPermission = state.folderConfig.permission;
+      // 当全局允许使用直链，且当前用户有直链权限时，才显示直链按钮
+      let pathLink = state.globalConfig.showPathLink && originPermission.generateLink;
+      let shortLink = state.globalConfig.showShortLink && originPermission.generateShortLink;
+      let download = originPermission.download && selectStatistics.value.isAllFile;
+      return {
+        open: selectStatistics.value.isSingleSelectFolder,
+        preview: originPermission.preview && selectStatistics.value.isSingleSelectFile,
+        download: download,
+        copyDownloadLink: download && originPermission.copyDownloadLink,
+        rename: originPermission.rename && selectStatistics.value.isSingleSelect,
+
+        link: (pathLink || shortLink) && selectStatistics.value.isAllFile,
+        pathLink: pathLink,
+        shortLink: shortLink,
+        bothLink: (pathLink && shortLink) && selectStatistics.value.isAllFile,
+
+        copy: originPermission.copy,
+        move: originPermission.move,
+        delete: originPermission.delete,
+        upload: originPermission.upload,
+        uploadFolder: originPermission.upload && originPermission.newFolder,
+        search: originPermission.search,
+        newFolder: originPermission.newFolder,
+        batchDownload: download && originPermission.batchDownload,
+        packageDownload: download && originPermission.packageDownload,
+        createShareLink: originPermission.createShareLink,
+        customShareKey: originPermission.customShareKey
+      }
+    }
+  },
+  actions: {
+	updateUserRootPath(val: string) {
+		this.user.rootPath = val;
+	},
+    updateGlobalConfig(val: any) {
+      this.globalConfig = val;
+    },
+    updateFolderConfig(val: any) {
+      this.folderConfig = val;
+    },
+    updateLoginInfo(val: any) {
+      this.loginInfo = val;
+    },
+  },
+})
+
+export default useStorageConfigStore;