ace-front-end 1.0.0

package/ace-element-plus-component/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/ace-element-plus-component/packages/components/upload/JaUploader.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import type {ValidationInstance} from '../../hooks/useBackendValidations'
+import {inject, ref, watch, computed} from "vue";
+import {getValue, setValue} from "../../utils/objectUtils";
+import Uploader from "./uploader.vue";
+
+export interface JaUploaderProps {
+    /**
+     * 应用名
+     */
+    serviceName: string,
+    /**
+     * 附件配置key
+     */
+    configKey: string,
+    /**
+     * 附件令牌
+     */
+    attachToken?: string,
+    /**
+     * 数据密级
+     */
+    classificationLevel?: number,
+    /**
+     * 文件列表高度
+     */
+    height?: string | number,
+    /**
+     * 文件列表最大高度
+     */
+    maxHeight?: string | number
+}
+
+const props = defineProps<JaUploaderProps>();
+const input = ref<InstanceType<typeof Uploader>>()
+const model = inject('aceFormModel') as Record<string, any>
+const prop = inject('aceFormItemProp') as string
+const validator = inject('aceFormValidator') as ValidationInstance
+const emit = defineEmits<{
+    change: [value: string]
+}>()
+
+function onChange(value: string) {
+    validator.removeFieldError(prop)
+    setValue(model.formData, prop, mv.value);
+    emit('change', value)
+}
+
+type modelType = string;
+
+const mv = ref(getValue(model.formData, prop) as modelType);
+watch(() => model.formData, () => {
+    mv.value = getValue(model.formData, prop) as modelType
+}, {
+    deep: true
+})
+
+defineExpose({
+    uploader: input
+})
+</script>
+
+<template>
+<uploader :service-name="serviceName" :max-height="maxHeight" :height="height" :config-key="configKey"
+          :attach-token="attachToken" :classification-level="classificationLevel"
+          v-model="mv"
+          @change="onChange"></uploader>
+</template>
+
+<style scoped lang="scss">
+
+</style>

package/ace-element-plus-component/packages/components/upload/README.md

@@ -0,0 +1,24 @@
+# JaUploader 上传组件
+
+`JaUploader` 是基于 Uppy 的文件上传组件，集成了 `JaForm` 表单上下文注入。
+
+## 组件用途
+
+用于在 `JaForm` 中上传和管理文件附件。
+
+## 属性 API
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| :--- | :--- | :--- | :--- |
+| `serviceName` | `string` | - | 应用服务名称 |
+| `configKey` | `string` | - | 附件配置 Key |
+| `attachToken` | `string` | - | 附件 Token |
+| `classificationLevel` | `number` | - | 数据密级 |
+| `height` | `string \| number` | - | 文件列表高度 |
+| `maxHeight` | `string \| number` | - | 文件列表最大高度 |
+
+## 使用示例
+
+```vue
+<ja-uploader serviceName="my-app" configKey="default" />
+```

package/ace-element-plus-component/packages/components/upload/index.ts

@@ -0,0 +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'

package/ace-element-plus-component/packages/components/upload/pdf-viewer/PdfViewerModal.vue

@@ -0,0 +1,32 @@
+<template>
+    <el-dialog fullscreen v-model="visible" append-to-body modal class="preview-dialog">
+        <VuePdfEmbed annotation-layer text-layer :source="props.src" />
+    </el-dialog>
+</template>
+
+<script setup lang="ts">
+import {ElDialog } from "element-plus"
+import { defineProps, defineEmits, defineModel } from 'vue';
+import VuePdfEmbed from 'vue-pdf-embed'
+import 'vue-pdf-embed/dist/styles/annotationLayer.css'
+import 'vue-pdf-embed/dist/styles/textLayer.css'
+
+// 1. 定义 Props
+const props = defineProps({
+    src: {
+        type: String,
+        required: true,
+    }
+});
+
+const visible = defineModel<boolean>({
+    required: true
+});
+
+</script>
+
+<style lang="scss" scoped>
+.el-dialog__body {
+    height: 100% !important;
+}
+</style>

package/ace-element-plus-component/packages/components/upload/types.ts

@@ -0,0 +1,4 @@
+import type {Meta, UppyFile} from "@uppy/core";
+
+export type AceFile = UppyFile<Meta, Record<string, never>>;
+

package/ace-element-plus-component/packages/components/upload/uploader-locale-zh-cn.ts

@@ -0,0 +1,223 @@
+export default {
+  pluralize() {
+    return 0
+  },
+  strings: {
+    addBulkFilesFailed: {
+      '0': '因内部错误，添加 %{smart_count} 个文件失败',
+      '1': '因内部错误，添加 %{smart_count} 个文件失败',
+    },
+    addedNumFiles: '已添加 %{numFiles} 个文件',
+    addingMoreFiles: '正在添加更多文件',
+    additionalRestrictionsFailed: '%{count} 个附加限制未满足',
+    addMore: '添加更多',
+    addMoreFiles: '添加更多文件',
+    aggregateExceedsSize: '您选择的文件总大小为 %{size}，但允许的最大总大小为 %{sizeAllowed}',
+    allFilesFromFolderNamed: '来自文件夹 %{name} 的所有文件',
+    allowAccessDescription: '请允许本站访问您的摄像头，以便拍照或录制视频。',
+    allowAccessTitle: '请允许访问您的摄像头',
+    allowAudioAccessDescription: '请允许本站访问您的麦克风，以便录制音频。',
+    allowAudioAccessTitle: '请允许访问您的麦克风',
+    aspectRatioLandscape: '裁剪为横向 (16:9)',
+    aspectRatioPortrait: '裁剪为纵向 (9:16)',
+    aspectRatioSquare: '裁剪为方形',
+    authAborted: '身份验证已中止',
+    authenticate: '连接',
+    authenticateWith: '连接到 %{pluginName}',
+    authenticateWithTitle: '请通过 %{pluginName} 验证以选择文件',
+    back: '返回',
+    browse: '浏览',
+    browseFiles: '浏览文件',
+    browseFolders: '浏览文件夹',
+    cancel: '取消',
+    cancelUpload: '取消上传',
+    closeModal: '关闭窗口',
+    companionError: '与 Companion 连接失败',
+    companionUnauthorizeHint: '要取消对 %{provider} 帐户的授权，请访问 %{url}',
+    complete: '完成',
+    compressedX: '通过压缩图像节省了 %{size}',
+    compressingImages: '正在压缩图像...',
+    connectedToInternet: '已连接到互联网',
+    copyLink: '复制链接',
+    copyLinkToClipboardFallback: '请复制下方的 URL',
+    copyLinkToClipboardSuccess: '链接已复制到剪贴板。',
+    creatingAssembly: '正在准备上传...',
+    creatingAssemblyFailed: 'Transloadit: 无法创建程序集',
+    dashboardTitle: 'Uppy 仪表盘',
+    dashboardWindowTitle: 'Uppy 仪表盘窗口 (按 ESC 键关闭)',
+    dataUploadedOfTotal: '%{complete} / %{total}',
+    dataUploadedOfUnknown: '已上传 %{complete}',
+    discardMediaFile: '丢弃媒体文件',
+    discardRecordedFile: '丢弃录制的文件',
+    done: '完成',
+    dropHereOr: '拖放到此处，或%{browse}',
+    dropHint: '将文件拖放到此处',
+    dropPasteBoth: '拖放粘贴文件或文件夹到此处，或者%{browseFiles} / %{browseFolders}',
+    dropPasteFiles: '拖放粘贴文件到此处，或者%{browseFiles}',
+    dropPasteFolders: '拖放粘贴文件到此处，或者%{browseFolders}',
+    dropPasteImportBoth: '拖放粘贴文件到此处，%{browseFiles}，%{browseFolders}或从以下位置导入：',
+    dropPasteImportFiles: '拖放粘贴文件到此处，%{browseFiles}或从以下位置导入：',
+    dropPasteImportFolders: '拖放粘贴文件到此处，%{browseFolders}或从以下位置导入：',
+    editFile: '编辑文件',
+    editFileWithFilename: '编辑文件 %{file}',
+    editImage: '编辑图像',
+    editing: '正在编辑 %{file}',
+    emptyFolderAdded: '未从空文件夹添加任何文件',
+    encoding: '正在编码...',
+    enterCorrectUrl: 'URL 不正确：请输入文件的直接链接',
+    enterTextToSearch: '输入文本以搜索图像',
+    enterUrlToImport: '输入 URL 以导入文件',
+    error: '错误',
+    exceedsSize: '%{file} 超出了 %{size} 的最大允许大小',
+    failedToFetch: 'Companion 无法抓取此 URL，请确保它是正确的',
+    failedToUpload: '上传 %{file} 失败',
+    filesUploadedOfTotal: {
+      '0': '%{smart_count} 个文件已上传 %{complete} 个',
+      '1': '%{smart_count} 个文件已上传 %{complete} 个',
+    },
+    filter: '筛选',
+    finishEditingFile: '完成文件编辑',
+    flipHorizontal: '水平翻转',
+    folderAdded: {
+      '0': '从 %{folder} 添加了 %{smart_count} 个文件',
+      '1': '从 %{folder} 添加了 %{smart_count} 个文件',
+    },
+    folderAlreadyAdded: '文件夹 "%{folder}" 已添加',
+    generatingThumbnails: '正在生成缩略图...',
+    import: '导入',
+    importFiles: '从以下位置导入文件：',
+    importFrom: '从 %{name} 导入',
+    inferiorSize: '此文件小于 %{size} 的最小允许大小',
+    loadedXFiles: '已加载 %{numFiles} 个文件',
+    loading: '加载中...',
+    logIn: '登录',
+    logOut: '登出',
+    micDisabled: '用户已拒绝麦克风访问',
+    missingRequiredMetaField: '缺少必需的元数据字段',
+    missingRequiredMetaFieldOnFile: '%{fileName} 缺少必需的元数据字段',
+    missingRequiredMetaFields: {
+      '0': '缺少必需的元数据字段: %{fields}。',
+      '1': '缺少必需的元数据字段: %{fields}。',
+    },
+    myDevice: '我的设备',
+    noAudioDescription: '请连接麦克风或其他音频输入设备，以便录制音频',
+    noAudioTitle: '麦克风不可用',
+    noCameraDescription: '请连接摄像头设备，以便拍照或录制视频',
+    noCameraTitle: '摄像头不可用',
+    noDuplicates: '无法添加重复文件“%{fileName}”，该文件已存在',
+    noFilesFound: '此处没有文件或文件夹',
+    noInternetConnection: '无网络连接',
+    noMoreFilesAllowed: '无法添加更多文件',
+    noSearchResults: '抱歉，没有找到相关结果',
+    openFolderNamed: '打开文件夹 %{name}',
+    pause: '暂停',
+    paused: '已暂停',
+    pauseUpload: '暂停上传',
+    pickFiles: '选择文件',
+    pickPhotos: '选择照片',
+    pleaseWait: '请稍候',
+    pluginNameAudio: '音频',
+    pluginNameBox: 'Box',
+    pluginNameCamera: '摄像头',
+    pluginNameDropbox: 'Dropbox',
+    pluginNameFacebook: 'Facebook',
+    pluginNameGoogleDrive: 'Google Drive',
+    pluginNameGoogleDrivePicker: 'Google Drive',
+    pluginNameGooglePhotosPicker: 'Google Photos',
+    pluginNameInstagram: 'Instagram',
+    pluginNameOneDrive: 'OneDrive',
+    pluginNameScreenCapture: '屏幕录制',
+    pluginNameUnsplash: 'Unsplash',
+    pluginNameUrl: '链接',
+    pluginNameWebdav: 'WebDAV',
+    pluginNameZoom: 'Zoom',
+    pluginWebdavInputLabel: '文件的 WebDAV URL (例如来自 ownCloud 或 Nextcloud)',
+    poweredBy: '由 %{uppy} 驱动',
+    processingXFiles: {
+      '0': '正在处理 %{smart_count} 个文件',
+      '1': '正在处理 %{smart_count} 个文件',
+    },
+    recording: '录制中',
+    recordingLength: '录制时长 %{recording_length}',
+    recordingStoppedMaxSize: '录制已停止，因为文件大小即将超出限制',
+    recordVideoBtn: '录制视频',
+    recoveredAllFiles: '已恢复所有文件。您现在可以继续上传。',
+    recoveredXFiles: {
+      '0': '无法完全恢复 1 个文件。请重新选择并继续上传。',
+      '1': '无法完全恢复 %{smart_count} 个文件。请重新选择并继续上传。',
+    },
+    removeFile: '移除文件',
+    reSelect: '重新选择',
+    resetFilter: '重置筛选',
+    resetSearch: '重置搜索',
+    resume: '继续',
+    resumeUpload: '继续上传',
+    retry: '重试',
+    retryUpload: '重试上传',
+    revert: '重置',
+    rotate: '旋转 90°',
+    save: '保存',
+    saveChanges: '保存更改',
+    search: '搜索',
+    searchImages: '搜索图像',
+    selectX: {
+      '0': '选择 %{smart_count} 项',
+      '1': '选择 %{smart_count} 项',
+    },
+    sessionRestored: '会话已恢复',
+    showErrorDetails: '显示错误详情',
+    signInWithGoogle: '使用 Google 登录',
+    smile: '笑一笑！',
+    startAudioRecording: '开始音频录制',
+    startCapturing: '开始屏幕录制',
+    startRecording: '开始视频录制',
+    stopAudioRecording: '停止音频录制',
+    stopCapturing: '停止屏幕录制',
+    stopRecording: '停止视频录制',
+    streamActive: '直播流活跃',
+    streamPassive: '直播流空闲',
+    submitRecordedFile: '提交录制的文件',
+    takePicture: '拍照',
+    takePictureBtn: '拍照',
+    takeScreenshot: '截屏',
+    unnamed: '未命名',
+    upload: '上传',
+    uploadComplete: '上传完成',
+    uploadFailed: '上传失败',
+    uploading: '上传中',
+    uploadingXFiles: {
+      '0': '正在上传 %{smart_count} 个文件',
+      '1': '正在上传 %{smart_count} 个文件',
+    },
+    uploadPaused: '上传已暂停',
+    uploadStalled: '上传在 %{seconds} 秒内无任何进展。您可能需要重试。',
+    uploadXFiles: {
+      '0': '上传 %{smart_count} 个文件',
+      '1': '上传 %{smart_count} 个文件',
+    },
+    uploadXNewFiles: {
+      '0': '上传 +%{smart_count} 个文件',
+      '1': '上传 +%{smart_count} 个文件',
+    },
+    xFilesSelected: {
+      '0': '已选择 %{smart_count} 个文件',
+      '1': '已选择 %{smart_count} 个文件',
+    },
+    xMoreFilesAdded: {
+      '0': '又添加了 %{smart_count} 个文件',
+      '1': '又添加了 %{smart_count} 个文件',
+    },
+    xTimeLeft: '剩余 %{time}',
+    youCanOnlyUploadFileTypes: '您只能上传以下类型：%{types}',
+    youCanOnlyUploadX: {
+      '0': '您只能上传 %{smart_count} 个文件',
+      '1': '您只能上传 %{smart_count} 个文件',
+    },
+    youHaveToAtLeastSelectX: {
+      '0': '您至少要选择 %{smart_count} 个文件',
+      '1': '您至少要选择 %{smart_count} 个文件',
+    },
+    zoomIn: '放大',
+    zoomOut: '缩小',
+  }
+}