jobdone-shared-files 1.1.12 → 1.1.14

package/ModalFileRepositorySelector.vue

@@ -0,0 +1,400 @@
+<template>
+    <div id="ModalFileRepository" class="modal fade" :class="optionsAdjust.subModal ? 'sub-modal' : ''" ref="modalDom"
+        data-bs-backdrop="static" tabindex="-1" role="dialog" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-scrollable" :class="classManager.modalSize" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title"><span class="material-icons icon-18 me-2 text-primary">{{
+                        optionsAdjust.modalIcon }}</span>{{ optionsAdjust.modalTitle }}</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="top-header">
+                    <p>暫存清單</p>
+                    <template v-if="selectedFilesSet.size > 0">
+                        <div class="d-flex align-items-center gap-2">
+                            <small><span>已選擇</span><span class="text-primary mx-1">{{ selectedFilesSet.size
+                            }}</span><span>個檔案</span></small>
+                            <button class="btn btn-link btn-sm" @click='clearSelected'><span
+                                    class="material-icons me-1">close</span>取消選取</button>
+                        </div>
+                    </template>
+                    <template v-else>
+                        <div class="form-check" v-if="optionsAdjust.onlyMyFileCanSwitch">
+                            <input class="form-check-input" type="checkbox" :true-value="true" :false-value="false"
+                                :id="`ModalFileRepository_MyFilesOnly_${componentUuid}`" v-model="onlyMyFile"
+                                @change="reloadRepositoryFiles()" />
+                            <label class="form-check-label is-unselectable"
+                                :for="`ModalFileRepository_MyFilesOnly_${componentUuid}`">僅顯示我的檔案</label>
+                        </div>
+                    </template>
+                </div>
+                <div class="modal-body overflow-auto p-0" ref="previewWindow" style="position: relative;">
+                    <div class="the-month-content m-3" v-for="theMonth in fileListPreview" :key="theMonth.monthKey">
+                        <p class="the-month-content-header">{{ theMonth.monthLabel }}</p>
+                        <div class="the-month-content-body">
+                            <template v-for="(day, dayIdx) in theMonth.days"
+                                :key="`${theMonth.monthKey}-${day.dayKey}`">
+                                <div class="the-date-content" v-for="(item, itemIdx) in day.items"
+                                    :key="`${theMonth.monthKey}-${day.dayKey}-${itemIdx}`">
+                                    <p class="the-date-content-header" v-if="itemIdx === 0">{{ day.dayLabel }}</p>
+                                    <div class="the-date-content-body">
+                                        <div class="multimedia-select-content">
+                                            <button class="select-control"
+                                                @click.stop="selectMultimedia(item[optionsAdjust.bindingKey])"
+                                                :class="{ 'is-selected': selectedFilesSet.has(item[optionsAdjust.bindingKey]) }"></button>
+                                        </div>
+                                        <button class="multimedia-preview-content"
+                                            @click="previewImg(item[optionsAdjust.fileUrlKey], item.fileName)">
+                                            <div v-if="item.multimediaList?.length > 0"
+                                                class="the-date-content-multiple-tag">
+                                            </div>
+                                            <img :src="item[optionsAdjust.thumbnailUrlKey] || item[optionsAdjust.fileUrlKey]"
+                                                lazy="loaded" :alt="item.fileName" :title="item.fileName">
+                                        </button>
+                                    </div>
+                                </div>
+                            </template>
+                        </div>
+                    </div>
+                    <div v-if="fileListPreview.length === 0" class="border-bottom text-center p-4 bg-gray-500">
+                        <p class="mt-3">暫存媒體庫中沒有任何檔案</p>
+                    </div>
+                    <div ref="getNextPagesTarget" style="height: 1rem"></div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
+                    <button type="button" class="btn btn-primary" @click="submitSelected">送出選擇項目 ( {{
+                        selectedFilesSet.size }}
+                        )</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <vue-easy-lightbox ref="ezLb" :visible='previewImgAry.length > 0' :imgs="previewImgAry" :index="previewImgIdx"
+        @hide="onHide"></vue-easy-lightbox>
+    <Loading :is-active="isLoading"></Loading>
+</template>
+<script setup>
+import axios from 'axios';
+import { computed, ref, nextTick, toRaw, onMounted } from "vue";
+import { modalShow, modalHide } from "./common/ModalSetup.js";
+import Loading from "./vueLoadingOverlay.vue";
+import VueEasyLightbox from 'vue-easy-lightbox';
+
+const props = defineProps({
+    projectId: {
+        // 專案ID
+        type: String,
+        required: true
+    },
+    userId: {
+        // 使用者ID
+        type: String,
+        required: true
+    },
+    apiUrl: {
+        // 取得檔案列表的 API URL
+        type: String,
+        required: true
+    },
+    options: {
+        // 額外參數設定
+        // { 
+        //      subModal: false,                    // 是否為子視窗（預設 false），子視窗會取消 backdrop-filter 效果，且高度略低於一般Modal
+        //      modalSize: 'lg'                      // Modal的尺寸。可選值：sm, md, lg, xl。預設 'lg',
+        //      modalTitle: '暫存媒體選擇器'           // Modal的標題。預設 '暫存媒體選擇器'
+        //      modalIcon: 'inventory_2',            // Modal的圖示。預設 'inventory_2'
+        //      onlyMyFileCanSwitch: true,           // 是否顯示「僅顯示我的檔案」切換選項。預設 true
+        //      onlyMyFileDefaultValue: true,        // 「僅顯示我的檔案」預設選項。預設 true
+        //      bindingKey: 'uid',                   // 選項唯一值的keyName。預設 'uid'
+        //      createAtKey: 'createAt'              // 檔案建立時間的keyName。預設 'createAt'
+        //      fileUrlKey: 'fileUrl',               // 檔案URL的keyName。預設'fileUrl'
+        //      thumbnailUrlKey: 'thumbnailUrl',     // 檔案縮圖URL的keyName。預設'thumbnailUrl'
+        // }
+        type: Object,
+        default: () => ({})
+    }
+})
+const emit = defineEmits([
+    'submitSelected'
+])
+
+const componentUuid = crypto.randomUUID()
+const modalDom = ref(null)
+const isLoading = ref(false)
+
+// 參數設定
+const optionConfigs = {
+    bindingKey: {
+        validate: (value) => typeof value === 'string' && value.length > 0,
+        defaultValue: 'uid'
+    },
+    createAtKey: {
+        validate: (value) => typeof value === 'string' && value.length > 0,
+        defaultValue: 'createAt'
+    },
+    fileUrlKey: {
+        validate: (value) => typeof value === 'string' && value.length > 0,
+        defaultValue: 'fileUrl'
+    },
+    thumbnailUrlKey: {
+        validate: (value) => typeof value === 'string' && value.length > 0,
+        defaultValue: 'thumbnailUrl'
+    },
+    subModal: {
+        validate: (value) => typeof value === 'boolean',
+        defaultValue: false // 是否為子視窗（預設 false），子視窗會取消 backdrop-filter 效果，且高度略低於一般Modal
+    },
+    modalSize: {
+        validate: (value) => typeof value === 'string' && ['sm', 'md', 'lg', 'xl'].includes(value),
+        defaultValue: 'lg' // 可選值：sm, md, lg, xl
+    },
+    modalTitle: {
+        validate: (value) => typeof value === 'string' && value.length > 0,
+        defaultValue: '暫存媒體選擇器'
+    },
+    modalIcon: {
+        validate: (value) => typeof value === 'string' && value.length > 0,
+        defaultValue: 'inventory_2'
+    },
+    onlyMyFileCanSwitch: {
+        validate: (value) => typeof value === 'boolean',
+        defaultValue: true // 是否顯示「僅顯示我的檔案」切換選項
+    },
+    onlyMyFileDefaultValue: {
+        validate: (value) => typeof value === 'boolean',
+        defaultValue: true // 「僅顯示我的檔案」預設選項。預設 true
+    }
+}
+const optionDefaults = Object.fromEntries(
+    Object.entries(optionConfigs).map(([key, config]) => [key, config.defaultValue])
+)
+const optionsAdjust = computed(() => {
+    const merged = { ...optionDefaults }
+    const incomingOptions = props.options || {}
+    for (const [key, value] of Object.entries(incomingOptions)) {
+        const config = optionConfigs[key]
+        if (!config) {
+            console.warn(`ModalFileRepositorySelector: 未知參數 ${key}`)
+            continue
+        }
+        if (!config.validate(value)) {
+            console.warn(`ModalFileRepositorySelector: 參數 ${key} 的型態錯誤，將使用預設值 ${config.defaultValue}`)
+            continue
+        }
+        merged[key] = value
+    }
+    return merged
+})
+const classManager = computed(() => {
+    return {
+        modalSize: optionsAdjust.value.modalSize ? `modal-${optionsAdjust.value.modalSize}` : `modal-${optionDefaults.modalSize}`
+    }
+})
+
+const ezLb = ref(null)
+const previewImgAry = ref([])
+const previewImgIdx = ref(0)
+const previewImg = (url, title = '') => { previewImgAry.value = [{ src: url, title: title }] }
+const onHide = () => { previewImgIdx.value = 0; previewImgAry.value = [] }
+
+const debounce = (func, delay = 200) => {
+    let timeout;
+
+    return function (...args) {
+        const context = this;
+        clearTimeout(timeout); // 清除上一次的計時器
+        timeout = setTimeout(() => func.apply(context, args), delay);
+    };
+}
+
+
+// 滾動讀取
+let observer = null
+const previewWindow = ref(null)
+const getNextPagesTarget = ref(null)
+const checkNeedLoadMore = () => { // 檢查是否需要繼續載入（如果內容高度不足以觸發滾動）
+    if (getNextPagesTarget.value && getNextPagesTarget.value.getBoundingClientRect().top <= window.innerHeight) {
+        getRepositoryFiles()
+    }
+}
+
+// 開啟光箱
+const show = async (selectedFilesUid) => {
+    modalShow(modalDom.value, afterCloseModal)
+    if (selectedFilesUid && selectedFilesUid.length > 0) {
+        selectedFilesSet.value = new Set(selectedFilesUid)
+    }
+    if (!observer) {
+        observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting && (getNextPagesTarget.value && getNextPagesTarget.value.getBoundingClientRect().top <= window.innerHeight)) {
+                    getRepositoryFiles()
+                }
+            });
+        }, {
+            root: previewWindow.value,
+        });
+    }
+    observer.observe(getNextPagesTarget.value);
+}
+
+// 關閉光箱時的處理
+const afterCloseModal = () => {
+    observer.disconnect()
+    selectedFilesSet.value.clear()
+}
+
+// 載入檔案
+const repositoryFiles = ref([])
+const fileListPreview = computed(() => {    // 預覽用陣列
+    const flatMap = repositoryFiles.value.flatMap(pageGroups => pageGroups.data.map(item => ({ ...item, page: pageGroups.page })))
+
+    // 先按日期排序（最新的在前）
+    const sortedItems = flatMap.sort((a, b) => new Date(b[optionsAdjust.value.createAtKey]) - new Date(a[optionsAdjust.value.createAtKey]))
+
+    // 分組處理
+    const groupedData = []
+    const monthGroupMap = new Map()     // 用 Map 來快速查找月份群組
+    const dayGroupMap = new Map()       // 用 Map 來快速查找日期群組
+
+    sortedItems.forEach(item => {
+        const date = new Date(item[[optionsAdjust.value.createAtKey]])
+        const year = date.getFullYear()
+        const month = date.getMonth() + 1
+        const day = date.getDate()
+
+        const monthKey = `${year}-${month.toString().padStart(2, '0')}`
+        const dayKey = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`
+
+        // 檢查是否需要新增月份群組
+        let currentMonthGroup = monthGroupMap.get(monthKey)
+        if (!currentMonthGroup) {
+            currentMonthGroup = {
+                monthKey,
+                monthLabel: `${year}年${month}月`,
+                days: []
+            }
+            monthGroupMap.set(monthKey, currentMonthGroup)
+            groupedData.push(currentMonthGroup)
+        }
+
+        // 檢查是否需要新增日期群組
+        let currentDayGroup = dayGroupMap.get(dayKey)
+        if (!currentDayGroup) {
+            currentDayGroup = {
+                dayKey,
+                dayLabel: `${month}月${day}日`,
+                items: []
+            }
+            dayGroupMap.set(dayKey, currentDayGroup)
+            currentMonthGroup.days.push(currentDayGroup)
+        }
+        // 加入項目到日期群組
+        currentDayGroup.items.push(item)
+    })
+    return groupedData
+})
+const onlyMyFile = ref(true)
+const repositoryFilesPagination = ref({
+    pagesToLoad: new Set([1]), // 應載入的頁數
+    totalPages: undefined,
+    size: 20
+})
+const getRepositoryFiles = async () => {
+    isLoading.value = true
+    try {
+        const fileListPages = new Set(repositoryFiles.value.map(pg => pg.page)) // 已載入頁數
+        let needLoadPages = Array.from(repositoryFilesPagination.value.pagesToLoad).filter(pg => !fileListPages.has(pg)) // 需要載入的頁數
+        if (!(repositoryFilesPagination.value.totalPages === undefined)) {
+            needLoadPages = needLoadPages.filter(pg => pg <= repositoryFilesPagination.value.totalPages) // 過濾超出總頁數的
+        }
+        if (needLoadPages.length < 1) return // 無需載入，跳出迴圈
+
+        const getPromise = []
+        needLoadPages.forEach(page => {
+            getPromise.push(axios.get(props.apiUrl, {
+                params: {
+                    userId: props.userId,
+                    projectId: props.projectId,
+                    onlyMyFile: onlyMyFile.value,
+                    page: page,
+                    limit: repositoryFilesPagination.value.size
+                }
+            }))
+        })
+
+        const pageResults = await Promise.allSettled(getPromise)
+        pageResults.forEach((result) => {
+            if (result.status === 'rejected') {
+                throw new Error('載入檔案列表失敗')
+            }
+            if (!result.value?.headers?.["x-pagination"]) {
+                throw new Error('分頁資訊遺失')
+            }
+            if (result.status === 'fulfilled') {
+                const resPagination = JSON.parse(result.value.headers["x-pagination"])
+                repositoryFiles.value = repositoryFiles.value.filter(pg => pg.page !== resPagination.CurrentPage) // 移除重複頁數
+                repositoryFiles.value.push({ data: result.value.data, page: resPagination.CurrentPage });
+                repositoryFilesPagination.value.totalPages = resPagination.TotalPages;
+            }
+        });
+
+        const nextPage = repositoryFilesPagination.value.pagesToLoad.size > 0
+            ? Math.max(...repositoryFilesPagination.value.pagesToLoad) + 1
+            : 1
+        if (repositoryFilesPagination.value.totalPages && nextPage > repositoryFilesPagination.value.totalPages) return // 已達最後頁，跳出迴圈
+        repositoryFilesPagination.value.pagesToLoad.add(nextPage)
+        await nextTick()
+        checkNeedLoadMore()
+    } catch (error) {
+        console.error(error)
+    } finally {
+        isLoading.value = false
+    }
+}
+const reloadRepositoryFiles = debounce(async () => {
+    repositoryFilesPagination.value = {
+        pagesToLoad: new Set([1]),
+        totalPages: undefined,
+        size: 20
+    }
+    repositoryFiles.value = []
+    await nextTick()
+    await getRepositoryFiles()
+}, 200)
+
+
+// 選取檔案
+const selectedFilesSet = ref(new Set())
+const selectMultimedia = (multimediaUid) => {
+    if (multimediaUid === undefined || multimediaUid === null) return
+    if (selectedFilesSet.value.has(multimediaUid)) {
+        selectedFilesSet.value.delete(multimediaUid)
+        return
+    }
+    selectedFilesSet.value.add(multimediaUid)
+}
+const clearSelected = () => {
+    selectedFilesSet.value.clear()
+}
+
+const submitSelected = () => {
+    let res = repositoryFiles.value.flatMap(pageGroups => pageGroups.data).filter(item => selectedFilesSet.value.has(item[optionsAdjust.value.bindingKey])) || []
+    res = res.reduce((acc, item) => {
+        acc.push(toRaw(item))
+        return acc
+    }, [])
+    emit('submitSelected', res)
+    modalHide(modalDom.value)
+}
+onMounted(() => {
+    onlyMyFile.value = optionsAdjust.value.onlyMyFileDefaultValue
+})
+defineExpose({
+    show,
+    onlyMyFile
+})
+</script>
+<!-- styleCss請自行在 js 或 scss 引入
+    @import "../scss/Helpers/_ModalFileRepository.scss"; -->

package/README.md

@@ -380,6 +380,31 @@ import OOXX from '../../node_modules/jobdone-shared-files/OOXX.vue';
 | --------- | ------------------ |
 | select | 選到項目要做什麼 |      
 
+## 09.ModalFileRepositorySelector
+
+### 參數
+|參數|型別|說明|必要|
+|--|--|--|--|
+| `project-id` | `String` | 專案ID | 是 |
+| `user-id` | `String` | 使用者ID | 是 |
+| `api-url` | `String` | 取得檔案列表的 API URL | 是 |
+| `options` | `Object` | 額外參數設定，詳細參考下方| 否 |
+
+### options 額外參數設定
+|參數|型別|預設|可用選項|說明|
+|--|--|--|--|--|
+| `subModal` | `Boolean` | `false` |  `true` `false` | 是否為子視窗。子視窗會取消 backdrop-filter 效果，且高度略低於一般Modal 
+| `modalSize` | `String` | `lg` |  `sm` `md` `lg` `xl` | Modal的尺寸
+| `modalTitle` | `String` | `暫存媒體選擇器` |   | Modal的標題
+| `modalIcon` | `String` | `inventory_2` |   | Modal的圖示(MaterialIcons)
+| `onlyMyFileCanSwitch` | `Boolean` | `true` | `true` `false`  | 是否顯示「僅顯示我的檔案」切換選項
+| `onlyMyFileDefaultValue` | `Boolean` | `true` | `true` `false`  | 「僅顯示我的檔案」預設選項
+| `bindingKey` | `String` | `uid` |   | 選項唯一值的keyName
+| `createAtKey` | `String` | `createAt` |   | 檔案建立時間的keyName
+| `fileUrlKey` | `String` | `fileUrl` |   | 檔案URL的keyName
+| `thumbnailUrlKey` | `String` | `thumbnailUrl` |   | 檔案縮圖URL的keyName
+
+
 ### .    
 ### .    
 ### .    

package/common/ModalSetup.js

@@ -0,0 +1,56 @@
+import Modal from 'bootstrap/js/dist/modal.js';
+
+/** 移除焦點Function */
+const blurHandler = () => {
+    document.activeElement && document.activeElement.blur();
+};
+
+/** 取得與 DOM 元素關聯的Modal實例，或在未初始化的情況下建立新的Modal實例。
+ * @param { HTMLElement } modalDom 光箱的DOM
+ */
+export const getOrCreateInstance = (modalDom) => {
+    return Modal.getOrCreateInstance(modalDom);
+}
+
+/**
+ * 開啟光箱
+ * @param { HTMLElement } modalDom 光箱的DOM
+ * @param { Function } modalHiddenFun 關閉光箱後的回調函數(等待 CSS 轉換完成後執行)
+ * @param { Boolean } hidePrevented static = true 時，使用者點選黑色遮罩被阻止關閉光箱時的回調函數
+ */
+export const modalShow = (modalDom, modalHiddenFun, hidePreventedFun) => {
+    const removeEventListeners = () => {
+        modalDom.removeEventListener('hide.bs.modal', blurHandler);
+        modalDom.removeEventListener('hidden.bs.modal', afterCloseModalFun);
+        modalDom.removeEventListener('hidePrevented.bs.modal', hidePreventedFun);
+    }
+
+    const afterCloseModalFun = () => {
+        removeEventListeners();
+        if (modalHiddenFun && typeof modalHiddenFun === 'function') {
+            modalHiddenFun();
+        }
+    };
+
+    // 先移除事件監聽，避免重複添加
+    removeEventListeners();
+
+    modalDom.addEventListener('hide.bs.modal', blurHandler); // 關閉光箱時需移除焦點，避免aria-hidden="true"的元素仍然有焦點
+    modalDom.addEventListener('hidden.bs.modal', afterCloseModalFun);
+    if (hidePreventedFun && typeof hidePreventedFun === 'function') {
+        modalDom.addEventListener('hidePrevented.bs.modal', hidePreventedFun);
+    }
+
+    getOrCreateInstance(modalDom).show();
+};
+
+/**
+ * 手動關閉光箱
+ * @param { HTMLElement } modalDom 光箱的DOM
+ */
+export const modalHide = (modalDom, dispose = false) => {
+    getOrCreateInstance(modalDom).hide();
+    if (dispose) {
+        getOrCreateInstance(modalDom).dispose();
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jobdone-shared-files",
-  "version": "1.1.12",
+  "version": "1.1.14",
   "description": "Shared JS and SCSS for Jobdone Enterprise.",
   "main": "index.js",
   "scripts": {

package/style/scss/Components/ModalFileRepository.scss

@@ -0,0 +1,365 @@
+#ModalFileRepository {
+    &.modal.sub-modal {
+        backdrop-filter: none;
+        background-color: rgba(#000000, 0.1);
+
+
+        .modal-content {
+            box-shadow: var(--bs-box-shadow-lg);
+        }
+
+        >.modal-dialog:not(.modal-fullscreen) {
+            max-height: calc(100% - 100px);
+            margin-top: 60px;
+            margin-bottom: 40px;
+
+            @each $key,
+            $breakpoint in $grid-breakpoints {
+                @media (max-width: $breakpoint) {
+                    &.modal-fullscreen-#{$key}-down {
+                        max-height: 100%;
+                        margin-top: 0;
+                        margin-bottom: 0;
+                    }
+                }
+
+            }
+        }
+    }
+
+    .the-month-content {
+        margin-bottom: 2rem;
+
+
+        .the-month-content-header {
+            font-size: 1.25rem;
+            border-bottom: 1px solid var(--gray-300);
+            padding-top: .75rem;
+            padding-bottom: .5rem;
+            margin-bottom: .5rem;
+            position: sticky;
+            top: 0;
+            backdrop-filter: blur(2px);
+            background-color: rgba(white, .8);
+            z-index: 10;
+        }
+
+        .the-month-content-body {
+            display: grid;
+            gap: .25rem;
+            grid-template-columns: repeat(auto-fill, minmax(8.6rem, 1fr));
+        }
+
+        .the-date-content {
+            display: flex;
+            justify-content: flex-end;
+            flex-direction: column;
+            position: relative;
+
+            .the-date-content-header {
+                margin-bottom: 0.25rem;
+                font-size: 0.875rem;
+                display: grid;
+                grid-template-columns: 3px auto 1fr;
+                gap: 0.5rem;
+                line-height: 1.25rem;
+                color: var(--gray-800);
+                padding-top: 0.5rem;
+                padding-bottom: .5rem;
+                margin-bottom: auto;
+
+                &::before {
+                    display: block;
+                    content: " ";
+                    width: 3px;
+                    background-color: var(--bs-primary);
+                    border-radius: 99px;
+                }
+            }
+
+            .the-date-content-body {
+                position: relative;
+                padding: 0;
+                transition: .1s ease-out;
+
+                &:has(.is-selected) {
+                    border: 3px solid rgba(var(--bs-primary-rgb), 0.8);
+                    border-radius: calc(var(--bs-border-radius) + 3px);
+                    background-color: #fff;
+                    transform: scale(.95);
+
+                    .multimedia-preview-content {
+                        transform: scale(.95);
+                    }
+                }
+            }
+
+            .the-date-content-footer {
+                opacity: 0;
+                position: absolute;
+                transition: .3s ease-out;
+                bottom: 0;
+                z-index: 10;
+                padding: 0.5rem;
+                display: flex;
+                align-items: center;
+                justify-content: flex-end;
+                width: 100%;
+                gap: .5rem;
+                background: linear-gradient(#00000000, #000000b0);
+                border-bottom-left-radius: var(--bs-border-radius);
+                border-bottom-right-radius: var(--bs-border-radius);
+
+                .save-file,
+                .more-info {
+                    width: 1.5rem;
+                    height: 1.5rem;
+                    background-color: transparent;
+                    z-index: 10;
+                    margin: 0;
+                    font-size: 0.5rem;
+                    display: flex;
+                    border: none;
+                    align-items: center;
+                    justify-content: center;
+                    color: #fff;
+                    transition: 0.3s ease-out;
+
+                    &::before {
+                        transition: 0.3s ease-out;
+                        font-size: 1.25rem;
+                    }
+
+                    &:hover::before {
+                        color: var(--blue-500);
+                    }
+                }
+
+                .save-file {
+                    &::before {
+                        content: "file_download";
+                        font-family: "Material Icons";
+                    }
+
+                    &:hover {
+                        cursor: pointer;
+                    }
+                }
+
+                .more-info {
+                    &::before {
+                        content: "info";
+                        font-family: "Material Icons";
+                    }
+
+                    &:hover {
+                        cursor: pointer;
+                    }
+
+                }
+            }
+
+            &:hover,
+            &.batch-operating {
+
+                .the-date-content-footer,
+                .select-control {
+                    opacity: 1;
+                }
+
+                .multimedia-preview-content.is-video::before {
+                    transform: scale(1.1);
+                }
+            }
+
+            &:hover {
+                cursor: pointer;
+
+                img {
+                    transform: scale(1.05);
+                }
+            }
+        }
+
+        .multimedia-select-content {
+            position: absolute;
+            width: 100%;
+            width: -webkit-fill-available;
+
+            .select-control {
+                border: 0;
+                background-color: transparent;
+                top: 0;
+                right: 0;
+                padding: 0.5rem;
+                z-index: 10;
+                margin: 0;
+                position: absolute;
+                user-select: none;
+                // opacity: 0;
+                transition: opacity 0.2s ease-out;
+
+                &::before {
+                    content: "check";
+                    display: block;
+                    position: absolute;
+                    margin: auto;
+                    color: #fff;
+                    font-size: 1rem;
+                    line-height: 1rem;
+                    opacity: .5;
+                    font-family: "Material Icons";
+                    z-index: 10;
+                    width: 1rem;
+                    height: 1rem;
+                    left: calc(50% - 0.5rem);
+                    top: calc(50% - 0.5rem);
+                    transform: translateY(-1px);
+                    transition: opacity 0.2s ease-out;
+                }
+
+                &::after {
+                    opacity: .8;
+                    border: 2px solid;
+                    border-color: #ffffff85;
+                    content: " ";
+                    display: block;
+                    width: 1.75rem;
+                    height: 1.75rem;
+                    background-color: rgba(#000, 0.2);
+                    border-radius: var(--bs-border-radius);
+                    backdrop-filter: blur(2px);
+                    transition: 0.2s ease-out;
+                }
+
+                &:hover {
+                    cursor: pointer;
+
+                    &::before {
+                        opacity: 1;
+                    }
+
+                    &::after {
+                        // background-color: rgba(100, 122, 241, 0);
+                    }
+                }
+
+                &.is-selected {
+                    opacity: 1;
+
+                    &::before {
+                        opacity: 1;
+                    }
+
+                    &::after {
+                        opacity: 1;
+                        background-color: var(--bs-primary);
+                        border-color: #fff;
+                    }
+                }
+            }
+        }
+
+        .multimedia-preview-content {
+            position: relative;
+            display: block;
+            border: 0;
+            background-color: transparent;
+            width: 100%;
+            padding-top: 100%;
+            overflow: hidden;
+            background-color: var(--purple-100);
+            border-radius: var(--bs-border-radius);
+
+            img {
+                transition: 0.3s ease-out;
+                border-radius: var(--bs-border-radius);
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+                position: absolute;
+                top: 0;
+                left: 0;
+                /* 確保圖片覆蓋整個方形區域 */
+            }
+
+
+
+            &.is-video::before {
+                position: absolute;
+                transition: 0.3s ease-out;
+                background-color: rgba(#000, 0.4);
+                color: #fff;
+                backdrop-filter: blur(2px);
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                width: 2.8rem;
+                height: 2.8rem;
+                top: calc(50% - 1.4rem);
+                left: calc(50% - 1.4rem);
+                box-shadow: 0 0px 12px 4px #c3c3c396;
+                z-index: 100;
+                font-family: "Material Icons";
+                content: "play_arrow";
+                font-size: 1.5rem;
+                border-radius: 99px;
+            }
+        }
+
+
+    }
+
+    .is-unselectable {
+        user-select: none;
+    }
+
+    .top-header {
+        display: flex;
+        align-items: center;
+        border-bottom: 1px solid var(--gray-300);
+        background-color: var(--gray-100);
+
+        >* {
+            padding: .5rem 1rem;
+        }
+
+        p {
+            color: var(--gray-500);
+            margin-bottom: 0;
+            margin-right: auto;
+        }
+    }
+
+    .the-date-content-multiple-tag {
+        position: absolute;
+        z-index: 2;
+        top: 0;
+        left: 0;
+        border: none;
+        background-color: transparent;
+        padding: 0;
+        margin: 0;
+
+
+
+        &::before {
+            height: 1.875rem;
+            width: 2rem;
+            content: "insert_link";
+            font-family: "Material Icons";
+            font-size: 1rem;
+            line-height: 1rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: rgba(var(--green-500-rgb), .9);
+            color: #fff;
+            border-top-left-radius: var(--bs-border-radius);
+            border-bottom-right-radius: var(--bs-border-radius);
+            top: 0;
+            left: 0;
+            transition: .1s ease-out;
+        }
+    }
+}