jobdone-shared-files 1.1.11 → 1.1.13

package/ModalFileRepositorySelector.vue

@@ -0,0 +1,402 @@
+<template>
+    <div id="ModalFileRepository" class="modal fade" :class="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({
+    subModal: {
+        // 是否為子視窗（預設 false），子視窗會取消 backdrop-filter 效果，且高度略低於一般Modal
+        type: Boolean,
+        default: false
+    },
+    projectId: {
+        // 專案ID
+        type: String,
+        required: true
+    },
+    userId: {
+        // 使用者ID
+        type: String,
+        required: true
+    },
+    apiUrl: {
+        // 取得檔案列表的 API URL
+        type: String,
+        required: true
+    },
+    options: {
+        // 額外參數設定
+        // { 
+        //      modalSize: 'lg'                      // Modal的尺寸。可選值：sm, '', 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'
+    },
+    modalSize: {
+        validate: (value) => typeof value === 'string' && ['sm', 'md', 'lg', 'xl'].includes(value),
+        defaultValue: 'lg' // 可選值：sm, '', 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) => {
+            console.log(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.log(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
+    }, [])
+    // console.log(res)
+    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/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.11",
+  "version": "1.1.13",
   "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;
+        }
+    }
+}

package/tagEditor.vue

@@ -13,135 +13,156 @@
                         </div>
                     </div>
                 </template>
-                <input v-if="!disabled" class="new-tag-input" list="datalistOptions" type="text" :placeholder="placeholder"
-                    v-model.trim="newTag" @keydown.enter="addTag($event)" @keyup="keyupFunction">
-                <datalist id="datalistOptions" v-if="autoCompleteShow">
-                    <option :value="opt" v-for="(opt, idx) in autoCompleteOption" :key="idx">{{ opt }}</option>
-                </datalist>
+                <template v-if="!disabled && !isMaxTagCountReached">
+                    <input class="new-tag-input" list="datalistOptions" type="text" :placeholder="placeholder"
+                        :maxlength="singleTagMaxLength || 50" v-model.trim="newTag" @keydown.enter="addTag($event)"
+                        @keyup="keyupFunction">
+                    <datalist id="datalistOptions" v-if="autoCompleteShow">
+                        <option :value="opt" v-for="(opt, idx) in autoCompleteOption" :key="idx">{{ opt }}</option>
+                    </datalist>
+                </template>
             </div>
         </div>
         <div class="helper-text-box" v-if="!disabled">
-            <small class="helper-text">在輸入框中輸入文字後，按下鍵盤的"Enter"鍵，即可增加標籤。(標籤僅接受中文、英文、數字、下底線)</small>
+            <small class="helper-text">在輸入框中輸入文字後，按下鍵盤的「Enter鍵」即可增加標籤。標籤僅接受中文、英文、數字、下底線、<span class="text-danger">長度限制
+                    {{ singleTagMaxLength }} 個字元</span>。
+                <template v-if="maxTagCount > 0">
+                    <span class="text-danger">最多新增 {{ maxTagCount }} 個標籤</span>，
+                </template>標籤不可重複。</small>
         </div>
     </div>
 </template>
-<script>
+<script setup>
 import { ref, reactive, onMounted, computed } from 'vue'
-
-export default {
-    props: {
-        defaultTagList: {
-            type: Array,
-            default: () => []
-        },
-        placeholder: {
-            type: String,
-            default: '請在此處輸入標籤文字'
-        },
-        autoComplete: {
-            type: Boolean,
-            default: true
-        },
-        autoCompleteOption: {
-            type: Array,
-            default: () => []
-        },
-        disabled: {
-            type: Boolean,
-            default: false
-        }
+const props = defineProps({
+    defaultTagList: {
+        type: Array,
+        default: () => []
     },
-    setup(props, { emit }) {
-        // 基本資料
-        const tagAry = reactive([])
-        const newTag = ref('')
-
-        const autoCompleteShow = computed(() => {
-            let show = props.autoComplete
-            if (!newTag.value || props.autoCompleteOption.length < 1) {
-                show = false
-            }
-            return show
-        })
-        // 輸入時 AutoComplete
-        var autoCompleteTimer
-        function updateAutoCompleteOption() {
-            clearTimeout(autoCompleteTimer);
-            if (newTag.value) {
-                autoCompleteTimer = setTimeout(() => {
-                    emit('update-auto-complete-option', newTag.value);
-                }, 500);
-            }
-        }
+    placeholder: {
+        type: String,
+        default: '請輸入標籤文字'
+    },
+    autoComplete: {
+        type: Boolean,
+        default: true
+    },
+    autoCompleteOption: {
+        type: Array,
+        default: () => []
+    },
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    singleTagMaxLength: {
+        type: Number,
+        default: 50
+    },
+    maxTagCount: {
+        type: Number,
+        default: 0
+    }
+})
 
-        // 刷新預設選中內容
-        function getDefaultTag(updateData = []) {
-            tagAry.splice(0, tagAry.length, ...updateData)
-        }
-        function keyupFunction() {
-            if (props.autoCompleteOption) {
-                updateAutoCompleteOption()
-            }
-            newTag.value = newTag.value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g, '_')
-        }
+// 基本資料
+const tagAry = reactive([])
+const newTag = ref('')
 
-        // 重複標籤禁止新增
-        var isDuplicate = computed(() => {
-            return newTag.value ? !!tagAry.find(tag => tag == newTag.value) : false
-        })
+const autoCompleteShow = computed(() => {
+    let show = props.autoComplete
+    if (!newTag.value || props.autoCompleteOption.length < 1) {
+        show = false
+    }
+    return show
+})
 
-        // 增加Tag
-        function addTag(event) {
-            // 檢查是否為中文輸入法組合狀態
-            if (event.isComposing || event.keyCode === 229) {
-                return
-            }
-            if (newTag.value && !isDuplicate.value) {
-                tagAry.push(newTag.value)
-            }
-            newTag.value = ''
-        }
-        // 移除Tag
-        function removeTag(index) {
-            tagAry.splice(index, 1)
-        }
-        function reset() {
-            tagAry.splice(0, tagAry.length)
-            newTag.value = ''
-        }
+// 輸入時 AutoComplete
+var autoCompleteTimer
+function updateAutoCompleteOption() {
+    clearTimeout(autoCompleteTimer);
+    if (newTag.value) {
+        autoCompleteTimer = setTimeout(() => {
+            emit('update-auto-complete-option', newTag.value);
+        }, 500);
+    }
+}
 
-        onMounted(() => {
-            getDefaultTag(props.defaultTagList)
-        })
-        return {
-            tagAry,
-            newTag,
-            addTag,
-            removeTag,
-            updateAutoCompleteOption,
-            autoCompleteTimer,
-            autoCompleteShow,
-            reset,
-            keyupFunction,
-            isDuplicate,
-            getDefaultTag
-        }
+// 刷新預設選中內容
+function getDefaultTag(updateData = []) {
+    tagAry.splice(0, tagAry.length, ...updateData)
+}
+function keyupFunction() {
+    if (props.autoCompleteOption) {
+        updateAutoCompleteOption()
+    }
+    newTag.value = newTag.value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g, '_')
+}
+
+// 重複標籤禁止新增
+var isDuplicate = computed(() => {
+    return newTag.value ? !!tagAry.find(tag => tag == newTag.value) : false
+})
+const isMaxTagCountReached = computed(() => {
+    return props.maxTagCount > 0 ? tagAry.length >= props.maxTagCount : false
+})
+
+// 增加Tag
+function addTag(event) {
+    // 檢查是否為中文輸入法組合狀態
+    if (event.isComposing || event.keyCode === 229) {
+        return
+    }
+    if (newTag.value && !isDuplicate.value && !isMaxTagCountReached.value) {
+        tagAry.push(newTag.value)
     }
+    newTag.value = ''
 }
+// 移除Tag
+function removeTag(index) {
+    tagAry.splice(index, 1)
+}
+function reset() {
+    tagAry.splice(0, tagAry.length)
+    newTag.value = ''
+}
+
+onMounted(() => {
+    getDefaultTag(props.defaultTagList)
+})
+
+defineExpose({
+    tagAry,
+    newTag,
+    addTag,
+    removeTag,
+    updateAutoCompleteOption,
+    autoCompleteTimer,
+    autoCompleteShow,
+    reset,
+    keyupFunction,
+    isDuplicate,
+    getDefaultTag,
+    isMaxTagCountReached
+})
+const emit = defineEmits(['update-auto-complete-option'])
+
 </script>
 
 <style lang="scss" scoped>
 .tag-editor {
-    background: var(--bs-gray-100);
-    border-radius: var(--bs-border-radius);
-    padding: .5rem;
+    background: var(--bs-gray-100, #f9f9fd);
+    border-radius: var(--bs-border-radius-lg, 0.5rem);
+    padding: .75rem;
 
     .helper-text-box {
+        margin-top: .25rem;
         text-align: start;
 
         .helper-text {
-            font-size: 0.75rem;
-            color: var(--bs-gray-500);
+            line-height: 125%;
+            font-size: 0.875rem;
+            color: var(--bs-gray-500, #A9B3BD);
         }
     }
 
@@ -162,9 +183,9 @@ export default {
                 position: absolute;
                 top: calc(100% + 0.25rem);
                 background: #fff;
-                border: 1px solid var(--bs-gray-300);
-                border-radius: var(--bs-border-radius);
-                box-shadow: var(--bs-box-shadow);
+                border: 1px solid var(--bs-gray-300, #DBE2E7);
+                border-radius: var(--bs-border-radius, 0.375rem);
+                box-shadow: var(--bs-box-shadow, 0 0.5rem 1rem rgba(73, 85, 98, 0.15));
             }
 
             .opt-item {
@@ -184,7 +205,8 @@ export default {
         display: flex;
         align-items: center;
         flex-wrap: wrap;
-        padding: .5rem .5rem .25rem .5rem;
+        gap: .25rem;
+        padding: .5rem;
 
         &.is-disabled:hover {
             cursor: not-allowed;
@@ -192,22 +214,41 @@ export default {
     }
 
     .new-tag-input {
+        height: 32px;
         all: unset;
         flex-grow: 1;
-        margin-bottom: .25rem;
-        background: var(--bs-gray-100);
+        background: var(--bs-gray-100, #f9f9fd);
         padding: .25rem .75rem;
         border-radius: 99px;
         border: 1px solid rgba(#000, 0);
+        transition: .2s ease-out;
+        border: 1px solid var(--bs-gray-200, #e8edf4);
+        outline-width: 3px;
+        outline-color: rgba(var(--purple-500-rgb, 100, 122, 241), 0);
+        outline-style: solid;
+
+        &::placeholder {
+            color: var(--bs-secondary-color, rgba(103, 120, 137, 0.5));
+        }
+
+        &:focus {
+            outline-width: 3px;
+            outline-color: rgba(var(--purple-500-rgb, 100, 122, 241), .25);
+            outline-style: solid;
+        }
     }
 
     .badge.rounded-pill {
-        margin: 0 .25rem .25rem 0;
         display: inline-flex;
         align-items: stretch;
         overflow: hidden;
+        height: 32px;
+        padding: .5rem .75rem;
+        margin: 0;
 
         .tag-text {
+            font-size: .75rem;
+            font-weight: 500;
             margin: auto;
             overflow: hidden;
             text-overflow: ellipsis;
@@ -221,7 +262,7 @@ export default {
                 display: block;
                 content: ' ';
                 height: 100%;
-                border-left: 1px solid var(--bs-gray-300);
+                border-left: 1px solid var(--bs-gray-300, #DBE2E7);
                 margin: 0 0.25rem;
             }
         }
@@ -235,7 +276,7 @@ export default {
             .material-icons {
                 font-size: 16px;
                 line-height: 16px;
-                color: var(--bs-purple);
+                color: var(--bs-purple, #647AF1);
                 opacity: .5;
                 transition: .3s;
             }
@@ -249,6 +290,5 @@ export default {
             }
         }
     }
-
 }
 </style>