@jari-ace/element-plus-component 0.4.4 → 0.5.1

package/packages/components/upload/uploader.vue

@@ -10,13 +10,12 @@ import {
     useLoginUser
 } from "@jari-ace/app-bolts";
 import { nextTick, onMounted, onUnmounted, ref, watch } from "vue";
-import { ArrowDown, Download, Upload, WarningFilled } from "@element-plus/icons-vue";
+import { ArrowDown, Document, Download, Upload, WarningFilled, Picture, VideoPlay, Headset } from "@element-plus/icons-vue";
 import {
     useSystemClassificationLevelMap,
     useSystemClassificationLevels
 } from "../../hooks/useClassificationLevels";
 import Ace = Jari.Ace;
-import { ElMessageBox } from "element-plus";
 import "@uppy/core/css/style.min.css";
 import "@uppy/dashboard/css/style.min.css";
 import "@uppy/audio/css/style.min.css";
@@ -33,8 +32,8 @@ import Dashboard from "@uppy/dashboard";
 import ImageEditor from "@uppy/image-editor";
 import prettyBytes from "pretty-bytes";
 import PdfViewerModal from "./pdf-viewer/PdfViewerModal.vue";
-
 import {
+    ElMessageBox,
     ElTable,
     ElTableColumn,
     ElButton,
@@ -43,12 +42,13 @@ import {
     ElDropdownMenu,
     ElIcon,
     ElTag,
-    ElTooltip
+    ElTooltip,
+    ElPopover
 } from "element-plus";
 import type { AceFile } from "./types";
 import { fa } from "element-plus/es/locales.mjs";
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
     /**
      * 应用名
      */
@@ -89,7 +89,13 @@ const props = defineProps<{
      * 是否允许预览，为空表示采用应用里的附件设置
      */
     allowPreview?: boolean,
-}>();
+    /**
+     * 布局方式: list-列表布局(默认), inline-行内布局
+     */
+    layout?: 'list' | 'inline'
+}>(), {
+    layout: 'list'
+});
 const attachId = defineModel<string>({
     required: false
 });
@@ -512,6 +518,36 @@ watch(() => props.attachToken, () => {
 
 watch(()=> props.classificationLevel,  updateAllowedClassificationLevels)
 
+function getFileIcon(fileName: string) {
+    if (!fileName) return Document;
+    const ext = fileName.split('.').pop()?.toLowerCase();
+    switch (ext) {
+        case 'jpg':
+        case 'jpeg':
+        case 'png':
+        case 'gif':
+        case 'bmp':
+        case 'webp':
+        case 'svg':
+            return Picture;
+        case 'mp4':
+        case 'mkv':
+        case 'avi':
+        case 'mov':
+        case 'wmv':
+        case 'webm':
+            return VideoPlay;
+        case 'mp3':
+        case 'wav':
+        case 'ogg':
+        case 'flac':
+        case 'm4a':
+            return Headset;
+        default:
+            return Document;
+    }
+}
+
 </script>
 
 <template>
@@ -546,40 +582,79 @@ watch(()=> props.classificationLevel,  updateAllowedClassificationLevels)
                     <span class="loader-shimmer">正在上传，已完成{{ uploadingProgress }}%...</span>
                 </p>
             </div>
+            
+            <div v-if="layout === 'inline'" class="inline-files">
+                 <div v-for="file in files" :key="file.id" class="inline-file-item">
+                    <el-popover placement="top" :width="300" trigger="hover">
+                        <template #reference>
+                            <div class="inline-file-icon-wrapper">
+                                <el-icon class="file-icon" size="20"><component :is="getFileIcon(file.fileName)" /></el-icon>
+                            </div>
+                        </template>
+                        <div class="file-popover-content">
+                            <div class="popover-row">
+                                <span class="label">文件名：</span>
+                                <span class="value">{{ file.fileName }}</span>
+                            </div>
+                             <div class="popover-row">
+                                <span class="label">大小：</span>
+                                <span class="value">{{ prettyBytes(file.fileSize) }}</span>
+                            </div>
+                             <div class="popover-row">
+                                <span class="label">密级：</span>
+                                <span class="value">
+                                     <el-tag size="small"
+                                        :type="file.classifiedLevel < 50 ? (file.classifiedLevel < 30 ? 'danger' : 'warning') : 'info'">
+                                        {{ classificationLevelMap?.get(file.classifiedLevel) }}
+                                    </el-tag>
+                                </span>
+                            </div>
+                            <div class="popover-actions">
+                                 <el-button link type="primary" @click="previewFile(file.token)"
+                                    v-if="checkAllowPreview(file)">预览
+                                </el-button>
+                                <el-button link type="primary" @click="downloadFile(file.token)" v-if="checkAllowDownload()">下载
+                                </el-button>
+                                <el-button link type="danger" @click="delUploadedFile(file)" v-if="checkAllowDelete()">删除
+                                </el-button>
+                            </div>
+                        </div>
+                    </el-popover>
+                 </div>
+            </div>
+        </div>
+        <div v-if="layout === 'list'" class="file-list" :style="{ height: typeof props.height === 'number' ? props.height + 'px' : props.height, maxHeight: typeof props.maxHeight === 'number' ? props.maxHeight + 'px' : props.maxHeight }">
+            <div v-if="files.length === 0" class="empty-text">暂无文件</div>
+            <div v-for="file in files" :key="file.id" class="file-item">
+                <div class="file-main">
+                    <el-icon class="file-icon"><component :is="getFileIcon(file.fileName)" /></el-icon>
+                    <span class="file-name" :title="file.fileName">{{ file.fileName }}</span>
+                </div>
+                <div class="file-info-right">
+                    <span class="file-size">{{ prettyBytes(file.fileSize) }}</span>
+                    <div class="file-tag">
+                        <el-tag size="small"
+                            :type="file.classifiedLevel < 50 ? (file.classifiedLevel < 30 ? 'danger' : 'warning') : 'info'">
+                            {{ classificationLevelMap?.get(file.classifiedLevel) }}
+                        </el-tag>
+                        <el-tooltip v-if="file.classifiedLevel < highestClassificationLevel" content="文件密级已高于当前许可范围，请立即删除">
+                            <el-icon color="#F56C6C" class="warning-icon">
+                                <warning-filled/>
+                            </el-icon>
+                        </el-tooltip>
+                    </div>
+                    <div class="file-actions">
+                        <el-button link type="primary" @click="previewFile(file.token)"
+                            v-if="checkAllowPreview(file)">预览
+                        </el-button>
+                        <el-button link type="primary" @click="downloadFile(file.token)" v-if="checkAllowDownload()">下载
+                        </el-button>
+                        <el-button link type="danger" @click="delUploadedFile(file)" v-if="checkAllowDelete()">删除
+                        </el-button>
+                    </div>
+                </div>
+            </div>
         </div>
-        <el-table :data="files" :show-header="true" style="width: 100%" empty-text="暂无文件" :height="props.height"
-            :max-height="props.maxHeight">
-            <el-table-column prop="fileName" />
-            <el-table-column prop="fileSize" width="100">
-                <template #default="scope">
-                    {{ prettyBytes(scope.row.fileSize) }}
-                </template>
-            </el-table-column>
-            <el-table-column prop="classifiedLevel" width="80">
-                <template #default="scope">
-                    <el-tag
-                        :type="scope.row.classifiedLevel < 50 ? (scope.row.classifiedLevel < 30 ? 'danger' : 'warning') : 'info'">
-                        {{ classificationLevelMap?.get(scope.row.classifiedLevel) }}
-                    </el-tag>
-                    <el-tooltip v-if="scope.row.classifiedLevel < highestClassificationLevel" content="文件密级已高于当前许可范围，请立即删除">
-                        <el-icon color="#F56C6C">
-                            <warning-filled/>
-                        </el-icon>
-                    </el-tooltip>
-                </template>
-            </el-table-column>
-            <el-table-column align="right" width="150" fixed="right">
-                <template #default="scope">
-                    <el-button link type="warning" @click="previewFile(scope.row.token)"
-                        v-if="checkAllowPreview(scope.row)">预览
-                    </el-button>
-                    <el-button link type="primary" @click="downloadFile(scope.row.token)" v-if="checkAllowDownload()">下载
-                    </el-button>
-                    <el-button link type="danger" @click="delUploadedFile(scope.row)" v-if="checkAllowDelete()">删除
-                    </el-button>
-                </template>
-            </el-table-column>
-        </el-table>
     </div>
     <pdf-viewer-modal :src="pdfSrc" v-model="pdfViewerVisible"></pdf-viewer-modal>
 </template>
@@ -601,6 +676,34 @@ watch(()=> props.classificationLevel,  updateAllowedClassificationLevels)
 
     &-tools {
         display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 8px;
+    }
+
+    .inline-files {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 8px;
+        margin-left: 8px;
+        
+        .inline-file-item {
+            .inline-file-icon-wrapper {
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                padding: 4px;
+                border-radius: 4px;
+                color: var(--el-text-color-regular);
+                
+                &:hover {
+                    background-color: var(--el-fill-color-light);
+                    color: var(--el-color-primary);
+                }
+            }
+        }
     }
 
     .container {
@@ -654,4 +757,120 @@ watch(()=> props.classificationLevel,  updateAllowedClassificationLevels)
         }
     }
 }
+
+.file-popover-content {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    font-size: 14px;
+    
+    .popover-row {
+        display: flex;
+        align-items: flex-start;
+        
+        .label {
+            color: var(--el-text-color-secondary);
+            width: 60px;
+            flex-shrink: 0;
+        }
+        
+        .value {
+            color: var(--el-text-color-primary);
+            word-break: break-all;
+        }
+    }
+    
+    .popover-actions {
+        display: flex;
+        justify-content: flex-end;
+        gap: 8px;
+        margin-top: 8px;
+        border-top: 1px solid var(--el-border-color-lighter);
+        padding-top: 8px;
+    }
+}
+
+.file-list {
+    overflow-y: auto;
+    border: 1px solid var(--el-border-color-lighter);
+    border-radius: 4px;
+    
+    .empty-text {
+        text-align: center;
+        padding: 20px;
+        color: var(--el-text-color-secondary);
+        font-size: 14px;
+    }
+
+    .file-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 8px 12px;
+        border-bottom: 1px solid var(--el-border-color-lighter);
+        font-size: 14px;
+
+        &:last-child {
+            border-bottom: none;
+        }
+
+        &:hover {
+            background-color: var(--el-fill-color-light);
+        }
+
+        .file-main {
+            display: flex;
+            align-items: center;
+            flex: 1;
+            overflow: hidden;
+            margin-right: 16px;
+
+            .file-icon {
+                margin-right: 8px;
+                color: var(--el-text-color-secondary);
+                font-size: 16px;
+            }
+
+            .file-name {
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                color: var(--el-text-color-regular);
+            }
+        }
+
+        .file-info-right {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+
+            .file-size {
+                color: var(--el-text-color-secondary);
+                min-width: 60px;
+                text-align: right;
+            }
+
+            .file-tag {
+                display: flex;
+                align-items: center;
+                gap: 4px;
+                
+                .warning-icon {
+                    margin-left: 4px;
+                    cursor: help;
+                }
+            }
+
+            .file-actions {
+                display: flex;
+                gap: 8px;
+                
+                .el-button {
+                    padding: 0;
+                    height: auto;
+                }
+            }
+        }
+    }
+}
 </style>

package/packages/components/userPicker/src/JaUserList.vue

@@ -255,7 +255,6 @@ onUnmounted(() => {
                         <Check v-if="userSelected(u)"/>
                     </el-icon>
                     <ja-user-info-tag :user-id="u.id" :full-name="u.fullName"
-                                      :has-avatar="u.hasAvatar"
                                       placement="left-start"
                                       :theme="userTagTheme(u)"></ja-user-info-tag>
                 </li>

package/packages/components/userTag/UserInfoTag.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {onUnmounted, type Ref, ref} from "vue";
+import {onUnmounted, type Ref, ref, type StyleValue} from "vue";
 import {Close, Star, StarFilled} from "@element-plus/icons-vue";
 import {type IAceAxios, useLoading, type User, useUserApi} from "@jari-ace/app-bolts";
 import {JaAvatar} from "../avatar";
@@ -29,13 +29,18 @@ const props = withDefaults(defineProps<{
     realm?: string,
     username?: string,
     theme?: keyof typeof themeClass,
-    hasAvatar?: boolean,
-    placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'
+    showAvatarInTag?: boolean,
+    placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end',
+    displayType?: 'tag' | 'text',
+    textStyle?: StyleValue,
+    width?: string | number
 }>(), {
     closable: false,
     fullName: "无名氏",
     theme: "skyGray",
-    placement: "bottom"
+    placement: "bottom",
+    displayType: "tag",
+    textStyle: () => ({})
 })
 
 const user = ref<User>();
@@ -103,10 +108,11 @@ function doUnbookmark() {
     <el-popover width="auto" :hide-after="200" @before-enter="onPop" :placement="placement"
                 v-model:visible="visible">
         <template #reference>
-            <div :class="themeClass[props.theme]">
+            <div v-if="displayType === 'tag'" :class="themeClass[props.theme]"
+                 :style="{ width: typeof width === 'number' ? width + 'px' : width }">
                 <div class="portrait">
                     <ja-avatar :size="24" :user-id="userId" :realm="realm"
-                               :username="username" :has-avatar="false"></ja-avatar>
+                               :username="username" :has-avatar="showAvatarInTag"></ja-avatar>
                 </div>
                 <div class="user-info">
                     {{ fullName }}
@@ -117,6 +123,10 @@ function doUnbookmark() {
                     </div>
                 </div>
             </div>
+            <span v-else class="user-info-text"
+                  :style="[textStyle, width ? { width: typeof width === 'number' ? width + 'px' : width, display: 'inline-block', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', verticalAlign: 'bottom' } : {}]">
+                 {{ fullName }}
+            </span>
         </template>
         <template #default>
             <div
@@ -275,6 +285,8 @@ function doUnbookmark() {
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
+        flex: 1;
+        min-width: 0;
     }
 
     .close-btn {
@@ -394,4 +406,14 @@ function doUnbookmark() {
     }
 }
 
+.user-info-text {
+    cursor: pointer;
+    color: var(--el-color-primary);
+    display: inline-block;
+
+    &:hover {
+        opacity: 0.8;
+    }
+}
+
 </style>