@jari-ace/element-plus-component 0.3.4 → 0.4.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jari-ace/element-plus-component",
   "private": false,
-  "version": "0.3.4",
+  "version": "0.4.0",
   "main": "lib/index.umd.cjs",
   "module": "lib/index.js",
   "types": "dist/index.d.ts",

package/packages/components/upload/FilePreviewer.vue

@@ -0,0 +1,245 @@
+<!--
+  - 版权所有 (c) 2026 江苏杰瑞信息科技有限公司
+  -
+  - 此文件属于JARI.ACE平台项目，修改、分发必须遵守杰瑞信科商业软件许可协议
+  -
+  -->
+
+<!--
+ * FilePreviewer 组件
+ *
+ * 用途：用于根据 attachToken 预览附件列表中的第一个可预览文件
+ *
+ * 功能特点：
+ * - 自动获取附件列表并识别可预览文件
+ * - 支持多种文件格式预览（PDF、Office文档、图片等）
+ * - 使用 Element Plus 按钮组件，支持完整的外观自定义
+ * - 集成 PdfViewerModal 进行文件预览
+ *
+ * 使用示例：
+ *
+ * 基础用法：
+ * <FilePreviewer attachToken="your-attach-token" />
+ *
+ * 自定义按钮外观：
+ * <FilePreviewer
+ *   attachToken="your-attach-token"
+ *   buttonType="primary"
+ *   buttonSize="medium"
+ *   buttonText="查看文件"
+ *   buttonIcon="View"
+ * />
+ *
+ * 高级自定义：
+ * <FilePreviewer
+ *   attachToken="your-attach-token"
+ *   buttonClass="my-custom-button"
+ *   buttonRound
+ *   buttonPlain={false}
+ * />
+-->
+
+<script setup lang="ts">
+import {createAxiosWithoutCache, type FileInfo, useFilesApi} from "@jari-ace/app-bolts";
+import {computed, ref} from "vue";
+import {ElButton} from "element-plus";
+import PdfViewerModal from "./pdf-viewer/PdfViewerModal.vue";
+
+/**
+ * FilePreviewer 组件属性定义
+ *
+ * @property {string} attachToken - 附件令牌，用于获取文件列表（必需）
+ * @property {string} [buttonType='warning'] - 按钮类型，可选值：primary/success/warning/danger/info
+ * @property {string} [buttonSize='small'] - 按钮尺寸，可选值：large/medium/small
+ * @property {boolean} [buttonPlain=true] - 是否使用朴素按钮样式
+ * @property {boolean} [buttonRound=false] - 是否圆角按钮
+ * @property {boolean} [buttonCircle=false] - 是否圆形按钮
+ * @property {boolean} [buttonDisabled=false] - 按钮是否禁用
+ * @property {any} [buttonIcon] - 按钮图标，可以是 Element Plus 图标组件
+ * @property {string} [buttonText='预览'] - 按钮文本内容
+ * @property {string} [buttonClass] - 自定义按钮 CSS 类名
+ */
+const props = defineProps<{
+    /**
+     * 附件令牌
+     */
+    attachToken: string,
+    /**
+     * 按钮类型
+     */
+    buttonType?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text' | 'default',
+    /**
+     * 按钮尺寸
+     */
+    buttonSize?: string,
+    /**
+     * 按钮是否朴素
+     */
+    buttonPlain?: boolean,
+    /**
+     * 按钮是否圆角
+     */
+    buttonRound?: boolean,
+    /**
+     * 按钮是否圆形
+     */
+    buttonCircle?: boolean,
+    /**
+     * 按钮是否禁用
+     */
+    buttonDisabled?: boolean,
+    /**
+     * 按钮图标
+     */
+    buttonIcon?: any,
+    /**
+     * 按钮文本
+     */
+    buttonText?: string,
+    /**
+     * 按钮类名
+     */
+    buttonClass?: string,
+}>();
+
+/**
+ * 组件内部状态管理
+ */
+const axios = createAxiosWithoutCache();
+const api = useFilesApi(axios);
+const files = ref<FileInfo[]>([]); // 存储文件列表
+const pdfViewerVisible = ref(false); // 控制 PDF 查看器模态框显示
+const pdfSrc = ref(""); // PDF 文件源地址
+const loading = ref(false); // 加载状态
+
+/**
+ * 按钮属性计算属性
+ * 用于处理 Element Plus 按钮的类型安全
+ */
+const buttonProps = computed(() => (
+    {
+        type: (
+            props.buttonType || 'warning'
+        ) as any,
+        size: (
+            props.buttonSize || 'small'
+        ) as any
+    }
+));
+
+/**
+ * 可预览文件扩展名列表
+ * 支持多种文档格式：Office文档、PDF、图片、文本等
+ */
+const previewableFileExts = [".doc", ".docx", ".xls", ".xlsx", ".wps", ".et",
+    ".csv", ".txt", ".rtf", ".odt", "ods", ".mht", ".ppt", ".pptx", ".odp", ".pdf", "xps", "."];
+
+/**
+ * 计算属性：检查是否存在可预览的文件
+ * 遍历文件列表，检查是否有文件扩展名在可预览列表中
+ */
+const hasPreviewableFiles = computed(() => {
+    return files.value.some(file => previewableFileExts.some(ext => file.fileName.endsWith(ext)));
+});
+
+/**
+ * 计算属性：获取第一个可预览的文件
+ * 用于确定要预览哪个文件
+ */
+const firstPreviewableFile = computed(() => {
+    return files.value.find(file => previewableFileExts.some(ext => file.fileName.endsWith(ext)));
+});
+
+/**
+ * 加载文件列表
+ * 根据 attachToken 从服务器获取关联的文件列表
+ *
+ * @async
+ * @returns {Promise<void>}
+ */
+async function loadFileInfos() {
+    if (!props.attachToken) {
+        files.value = [];
+        return;
+    }
+
+    try {
+        loading.value = true;
+        files.value = await api.getFileList(props.attachToken);
+    } catch (error) {
+        console.error('Failed to load file list:', error);
+        files.value = [];
+    } finally {
+        loading.value = false;
+    }
+}
+
+/**
+ * 预览第一个可预览的文件
+ * 构建预览 URL 并显示 PDF 查看器模态框
+ *
+ * @returns {void}
+ */
+function previewFirstFile() {
+    const file = firstPreviewableFile.value;
+    if (!file) {
+        console.warn('No previewable files found');
+        return;
+    }
+
+    // 构建预览 URL，使用文件 token 或 ID
+    pdfSrc.value = new URL("uploads/preview/" + (
+        file.token || file.id
+    ), location.origin).toString();
+    pdfViewerVisible.value = true;
+}
+
+/**
+ * 组件初始化
+ * 自动加载文件列表
+ */
+loadFileInfos();
+</script>
+
+<template>
+    <div class="file-previewer">
+        <!--
+         * 预览按钮
+         * 支持完整的 Element Plus 按钮属性自定义
+         * 当没有可预览文件时会自动禁用
+         * 点击时触发 previewFirstFile 函数
+         -->
+        <ElButton
+            :type="buttonProps.type"
+            :size="buttonProps.size"
+            :plain="buttonPlain !== undefined ? buttonPlain : true"
+            :round="buttonRound"
+            :circle="buttonCircle"
+            :loading="loading"
+            :disabled="buttonDisabled || !hasPreviewableFiles"
+            :icon="buttonIcon"
+            :class="buttonClass"
+            @click="previewFirstFile"
+            link>
+            {{ buttonText || '预览' }}
+        </ElButton>
+
+        <!--
+         * PDF 查看器模态框
+         * 用于显示可预览文件的内容
+         * 支持全屏显示和响应式布局
+         -->
+        <PdfViewerModal :src="pdfSrc" v-model="pdfViewerVisible"></PdfViewerModal>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+/**
+ * FilePreviewer 组件样式
+ * 使用内联块级显示，使按钮可以与其他元素并排显示
+ * 保持简洁的样式，让按钮本身的样式起主导作用
+ */
+.file-previewer {
+    display: inline-block;
+}
+</style>

package/packages/components/upload/index.ts

@@ -1,6 +1,8 @@
 import { withInstall } from '../../utils/install'
 import Upload from './uploader.vue'
 import _JaUploader from './JaUploader.vue'
+import _FilePreviewer from './FilePreviewer.vue'
 export const JaUploader = withInstall(_JaUploader);
 export const JaUploaderRaw = withInstall(Upload);
+export const JaFilePreviewer = withInstall(_FilePreviewer);
 export * from './types'