jobdone-shared-files 1.1.22 → 1.1.23

package/ModalDailyMultimediaImagesSelector.vue

@@ -0,0 +1,413 @@
+<template>
+	<div class="modal fade" :class="subModal ? 'sub-modal' : ''" ref="modalDom" data-bs-backdrop="static" tabindex="-1"
+		role="dialog" aria-hidden="true" data-bs-focus="false">
+		<div class="modal-dialog modal-xl modal-dialog-scrollable" role="document">
+			<div class="modal-content modal-daily-multimedia-images-selector">
+				<div class="modal-header">
+					<h5 class="modal-title">影音日誌紀錄圖片選擇器</h5>
+					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+				</div>
+				<div class="d-flex justify-content-between align-items-center p-2 border-bottom">
+					<div class="filter-container">
+						<div class="filter-item">
+							<div class="form-label-content">
+								<label class="form-label">日期區間</label>
+								<button v-if="filterDate" class="btn-clear-item" @click='filterDate = ""'></button>
+							</div>
+							<flatPickr :config="dateConfig" class="form-control" placeholder="記錄日期篩選"
+								v-model="filterDate" />
+						</div>
+						<div class="d-flex">
+							<button type="button" class="btn btn-primary mt-auto" @click="applyFilter"><span
+									class="material-icons">search</span></button>
+						</div>
+					</div>
+					<div class="btn-group" role="group">
+						<button type="button" class="btn"
+							:class="{ 'btn-primary': activeTab === 'records', 'btn-outline-primary': activeTab !== 'records', }"
+							@click="switchTab('records')"><span
+								class="material-icons me-1">view_list</span><span>記錄列表</span></button>
+						<button type="button" class="btn"
+							:class="{ 'btn-primary': activeTab === 'medias', 'btn-outline-primary': activeTab !== 'medias', }"
+							@click="switchTab('medias')"><span
+								class="material-icons me-1">view_module</span><span>照片總覽</span></button>
+					</div>
+				</div>
+				<div class="modal-body p-0" ref="scrollDom">
+					<template v-if="recordsState.items?.length > 0">
+						<div v-show="activeTab === 'records'">
+							<table class="table records-preview-table ">
+								<colgroup>
+									<col class="date-grid">
+									<col>
+								</colgroup>
+								<thead class="thead-default">
+									<tr>
+										<th class="date-grid">記錄日期</th>
+										<th>記錄資訊</th>
+									</tr>
+								</thead>
+								<tbody>
+									<template v-for="record in sortedRecords" :key="record.id">
+										<tr>
+											<td class="date-grid">
+												<div class="mb-2">{{ record.date }}</div>
+												<button type="button" class="btn btn-sm mt-1"
+													:class="allSelectedByRecord.get(record.id) ? 'btn-primary' : 'btn-outline-primary'"
+													:disabled="!record.images?.length"
+													@click="toggleAllInRecord(record)">
+													{{ allSelectedByRecord.get(record.id) ? '取消全選' : `全選 (
+													${record.images?.length ?? 0} )` }}
+												</button>
+											</td>
+											<td>
+												<h6 class="mb-1">{{ record.title }}</h6>
+												<small class="d-block text-gray-500 mb-2">{{ record.content }}</small>
+												<div class="d-flex flex-wrap gap-1 mb-2" v-if="record.tags?.length">
+													<span class="d-inline-flex flex-center badge badge-outline-gray"
+														v-for="tag in record.tags" :key="tag.label">{{ tag.label }}：{{
+															tag.value }}</span>
+												</div>
+												<div class="records-photos" v-if="record.images?.length">
+													<div class="media-item" v-for="(img, imgIdx) in record.images"
+														:key="img.id">
+														<div class="media-item-body">
+															<div class="multimedia-select-content">
+																<button type="button" class="select-control"
+																	:class="{ 'multimedia-is-selected': selectedImageIds.has(img.id) }"
+																	@click.stop="toggleImage(img)"></button>
+															</div>
+															<button type="button" class="multimedia-preview-content"
+																@click="previewImagesShow(record.images, imgIdx)">
+																<img :src="img.thumbnailUrl || img.url"
+																	:alt="`img-${img.id}`" />
+															</button>
+														</div>
+													</div>
+												</div>
+											</td>
+										</tr>
+									</template>
+								</tbody>
+							</table>
+						</div>
+						<div v-show="activeTab === 'medias'" class="multimedia-list-preview">
+							<div class="the-month-content" v-for="theMonth in mediasByMonth" :key="theMonth.monthKey">
+								<p class="the-month-content-header">{{ theMonth.monthLabel }}</p>
+								<div class="the-month-content-body">
+									<template v-for="day in theMonth.days" :key="`${theMonth.monthKey}-${day.dayKey}`">
+										<div class="media-item" v-for="(item, itemIdx) in day.items"
+											:key="`${theMonth.monthKey}-${day.dayKey}-${item.id}`">
+											<p class="media-item-header" v-if="itemIdx === 0">{{ day.dayLabel }}</p>
+											<div class="media-item-body">
+												<div class="multimedia-select-content">
+													<button type="button" class="select-control"
+														:class="{ 'multimedia-is-selected': selectedImageIds.has(item.id) }"
+														@click.stop="toggleImage(item)"></button>
+												</div>
+												<button type="button" class="multimedia-preview-content"
+													@click="previewImagesShow(day.items, itemIdx)">
+													<img :src="item.thumbnailUrl || item.url" :alt="`img-${item.id}`" />
+												</button>
+											</div>
+										</div>
+									</template>
+								</div>
+							</div>
+						</div>
+					</template>
+					<div v-else>
+						<div class="d-flex flex-column align-items-center justify-content-center py-5 bg-gray-300">
+							<span class="material-icons"
+								style="font-size: 48px; color: var(--gray-400);">photo_library</span>
+							<p class="mt-3 mb-0" style="color: var(--gray-500);">未找到相關影音日誌記錄</p>
+						</div>
+					</div>
+					<div ref="sentinelDom" aria-hidden="true"></div>
+				</div>
+				<div class="selected-preview-bar" v-if="selectedImages.length">
+					<div class="selected-preview-header">已選擇圖片 ( {{ selectedImages.length }} )</div>
+					<div class="selected-preview-body">
+						<div class="selected-preview-list">
+							<div class="media-item" v-for="(img, imgIdx) in selectedImages" :key="img.id">
+								<div class="media-item-body">
+									<div class="multimedia-select-content">
+										<button type="button" class="select-control multimedia-is-selected"
+											@click.stop="toggleImage(img)"></button>
+									</div>
+									<button type="button" class="multimedia-preview-content"
+										@click="previewImagesShow(selectedImages, imgIdx)">
+										<img :src="img.thumbnailUrl || img.url" :alt="`img-${img.id}`" />
+									</button>
+								</div>
+							</div>
+						</div>
+					</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="submit"
+						:disabled="selectedImages.length === 0">確認選擇 (
+						{{
+							selectedImages.length || '請選擇圖片'
+						}} )</button>
+				</div>
+			</div>
+		</div>
+	</div>
+	<VueEasyLightbox ref="ezLb" :visible="previewImages?.length > 0" :imgs="previewImages" :index="previewImageIndex"
+		@hide="previewImagesOnHide" />
+	<Loading :is-active="isLoading"></Loading>
+</template>
+<script setup>
+import { ref, reactive, computed, nextTick, onMounted, onBeforeUnmount } from 'vue';
+import { modalShow, modalHide } from "./common/ModalSetup.js";
+import Loading from './common/vueLoadingOverlay.vue';
+import flatPickr from "vue-flatpickr-component";
+import { MandarinTraditional } from "flatpickr/dist/l10n/zh-tw";
+import VueEasyLightbox from 'vue-easy-lightbox';
+
+const props = defineProps({
+	subModal: {
+		type: Boolean,
+		default: false,
+	},
+	fetchFn: {
+		type: Function,
+		required: true,
+	},
+	pageSize: {
+		type: Number,
+		default: 20,
+	},
+});
+
+const emit = defineEmits(['afterSubmit']);
+
+const isLoading = ref(false);
+const modalDom = ref(null);
+const scrollDom = ref(null);
+const sentinelDom = ref(null);
+let scrollObserver = null;
+
+// #region  Flatpickr
+const dateConfig = {
+	altFormat: "Y-m-d",
+	dateFormat: "Y-m-d",
+	disableMobile: "true",
+	mode: "range",
+	locale: MandarinTraditional,
+}
+// #endregion Flatpickr
+
+// #region  預覽圖片
+const previewImages = ref([]);
+const previewImageIndex = ref(0);
+const previewImagesShow = (images, idx) => {
+	previewImageIndex.value = idx;
+	previewImages.value = images.map((item) => ({ src: item.url }));
+};
+const previewImagesOnHide = () => {
+	previewImages.value = [];
+	previewImageIndex.value = 0;
+};
+// #endregion 預覽圖片
+
+
+const activeTab = ref('records');
+const filterDate = ref('');
+const selectedImages = ref([]);
+// 改用 reactive Set 取代 computed Set。Vue 3 對 reactive 集合提供 per-element 反應式追蹤，
+// template 裡 .has(id) 只會在「該 id 的選取狀態變動」時 invalidate，
+// 不會像 computed Set（每次都回傳新 Set 物件）那樣讓所有 button 的 binding 一起重新評估
+const selectedImageIds = reactive(new Set());
+
+const createInitialRecordsState = () => ({
+	items: [],
+	page: 0,
+	hasMore: true,
+	initialized: false,
+	emptyStreak: 0,
+});
+const recordsState = reactive(createInitialRecordsState());
+
+const MAX_EMPTY_STREAK = 5; // 連續多頁全被過濾掉時的安全閥，避免 observer 重複觸發造成無限請求
+
+// 失效令牌：每次重置 state 就 +1。in-flight 的 loadMore 開頭會抓快照 myGen，
+// 等 fetch 回來時比對；若 myGen 已落後，代表期間 modal 被關 / 篩選被換，這份結果該丟棄，
+// 避免把舊資料 push 進已被清空的新 state（例如：fetch A 還在飛 → 使用者按篩選 → fetch A 回來污染新列表）
+let loadGeneration = 0;
+
+const resetRecordsState = () => { // 重置記錄列表相關狀態（如關閉 modal 或重新套用篩選條件時）
+	loadGeneration += 1; // 讓所有 in-flight 的 loadMore 變成「上個世代」，回來後會被丟棄
+	isLoading.value = false; // 強制清掉，避免下一個 loadMore 被舊的 isLoading=true 擋住
+	Object.assign(recordsState, createInitialRecordsState());
+};
+
+// 跨頁載入時 fetchFn 不保證順序，這裡統一在前端依 record.date 由新到舊排序，
+// 讓「記錄列表」與「照片總覽」都吃同一份排序好的資料
+const sortedRecords = computed(() => {
+	// ISO 格式（YYYY-MM-DD）字串遞減即等同日期遞減；Array.prototype.sort 為穩定排序，同日期維持原進入順序
+	return [...recordsState.items].sort((a, b) => (b.date ?? '').localeCompare(a.date ?? ''));
+});
+
+const mediasByMonth = computed(() => { // 將圖片依年月日分類，方便在照片總覽頁籤中呈現
+	const months = new Map();
+	for (const record of sortedRecords.value) {
+		const d = new Date(record.date);
+		const monthKey = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`;
+		const monthLabel = `${d.getFullYear()} 年 ${d.getMonth() + 1} 月`;
+		const dayKey = record.date;
+		const dayLabel = record.date;
+		if (!months.has(monthKey)) months.set(monthKey, { monthKey, monthLabel, days: new Map() });
+		const month = months.get(monthKey);
+		if (!month.days.has(dayKey)) month.days.set(dayKey, { dayKey, dayLabel, items: [] });
+		const day = month.days.get(dayKey);
+		for (const img of record.images) {
+			day.items.push({ id: img.id, url: img.url, thumbnailUrl: img.thumbnailUrl });
+		}
+	}
+	// 月與日皆以由新到舊呈現；monthKey/dayKey 是 ISO 格式（YYYY-MM、YYYY-MM-DD），字串遞減排序即等同日期遞減
+	return Array.from(months.values())
+		.sort((a, b) => b.monthKey.localeCompare(a.monthKey))
+		.map((m) => ({
+			monthKey: m.monthKey,
+			monthLabel: m.monthLabel,
+			days: Array.from(m.days.values()).sort((a, b) => b.dayKey.localeCompare(a.dayKey)),
+		}));
+});
+
+const refreshObserver = async () => { // 重新觀察觸底偵測點：當載入完成後若它仍在可視區內（內容沒撐滿），會再次觸發 callback 繼續載入下一頁
+	await nextTick();
+	if (!scrollObserver || !sentinelDom.value) return;
+	scrollObserver.unobserve(sentinelDom.value);
+	scrollObserver.observe(sentinelDom.value);
+};
+
+const loadMore = async () => { // 載入更多記錄
+	if (isLoading.value || !recordsState.hasMore) return;
+	const myGen = loadGeneration; // 抓快照；await 期間若被 reset，loadGeneration 會走在前頭，靠這個比對丟棄結果
+	try {
+		isLoading.value = true;
+		const fetchParams = {
+			page: recordsState.page + 1,
+			pageSize: props.pageSize,
+			filters: { date: filterDate.value },
+		};
+		const result = await props.fetchFn(fetchParams);
+		if (myGen !== loadGeneration) return; // 已被 reset，舊資料不能進新 state
+		const validItems = (result?.items ?? []).filter((r) => r.images?.length);
+		recordsState.items.push(...validItems);
+		recordsState.page = fetchParams.page;
+		recordsState.hasMore = !!result?.hasMore;
+		recordsState.initialized = true;
+		recordsState.emptyStreak = validItems.length === 0 ? recordsState.emptyStreak + 1 : 0;
+	} catch (err) {
+		if (myGen !== loadGeneration) return; // 已被 reset，不該動到新 state 的 hasMore
+		recordsState.hasMore = false; // 失敗就停止，避免 observer 重觸發造成無限重試
+		console.error('[ModalDailyMultimediaImagesSelector] loadMore failed', err);
+	} finally {
+		if (myGen === loadGeneration) isLoading.value = false; // 只有同世代才能清；否則新 loadMore 剛把它設成 true，不能誤覆寫
+	}
+	if (myGen !== loadGeneration) return; // 收尾邏輯（emptyStreak 判斷、refreshObserver）也要保護
+	if (recordsState.emptyStreak >= MAX_EMPTY_STREAK) {
+		recordsState.hasMore = false;
+		return;
+	}
+	// 統一靠 observer 重觸發：sentinel 仍可見（內容沒撐滿、或本頁全空）就會自動再呼一次 loadMore
+	refreshObserver();
+};
+
+const switchTab = (tab) => {
+	activeTab.value = tab;
+	refreshObserver();
+};
+
+const applyFilter = async () => {
+	resetRecordsState();
+	await loadMore();
+};
+
+//#region 圖片選取相關
+const toggleImage = (img) => {
+	const idx = selectedImages.value.findIndex((m) => m.id === img.id);
+	if (idx >= 0) {
+		selectedImages.value.splice(idx, 1);
+		selectedImageIds.delete(img.id);
+	} else {
+		selectedImages.value.push({ id: img.id, url: img.url, thumbnailUrl: img.thumbnailUrl, fileName: img.fileName });
+		selectedImageIds.add(img.id);
+	}
+};
+
+const allSelectedByRecord = computed(() => { // 預先算出每筆 record 是否「全選」，template 直接查表，避免在 HTML 呼叫 function
+	const map = new Map();
+	for (const record of recordsState.items) {
+		map.set(
+			record.id,
+			!!record.images?.length && record.images.every((img) => selectedImageIds.has(img.id)),
+		);
+	}
+	return map;
+});
+
+const toggleAllInRecord = (record) => {
+	if (!record.images?.length) return;
+	if (allSelectedByRecord.value.get(record.id)) {
+		const removeIds = new Set(record.images.map((img) => img.id));
+		selectedImages.value = selectedImages.value.filter((m) => !removeIds.has(m.id));
+		for (const id of removeIds) selectedImageIds.delete(id);
+	} else {
+		const toAdd = record.images
+			.filter((img) => !selectedImageIds.has(img.id))
+			.map((img) => ({ id: img.id, url: img.url, thumbnailUrl: img.thumbnailUrl, fileName: img.fileName }));
+		selectedImages.value.push(...toAdd);
+		for (const m of toAdd) selectedImageIds.add(m.id);
+	}
+};
+//#endregion 圖片選取相關
+
+// #region 光箱操作相關
+const closeModal = () => {
+	selectedImages.value = [];
+	previewImages.value = [];
+	selectedImageIds.clear();
+	filterDate.value = '';
+	activeTab.value = 'records';
+	resetRecordsState();
+};
+
+const show = (preSelected = []) => {
+	// 開啟時可帶入已選圖片，讓使用者看到先前的選擇狀態（例如再次開啟時保留勾選）
+	selectedImages.value = preSelected.map((img) => ({ id: img.id, url: img.url, fileName: img.fileName }));
+	selectedImageIds.clear();
+	for (const img of preSelected) selectedImageIds.add(img.id);
+	modalShow(modalDom.value, closeModal);
+	if (!recordsState.initialized) loadMore();
+};
+
+const submit = () => {
+	modalHide(modalDom.value);
+	// thumbnailUrl 是內部顯示用、不外流；對外帶出 { id, url, fileName }
+	emit('afterSubmit', selectedImages.value.map((m) => ({ id: m.id, url: m.url, fileName: m.fileName })));
+};
+// #endregion 光箱操作相關
+
+onMounted(() => {
+	if (!sentinelDom.value || !scrollDom.value) return;
+	scrollObserver = new IntersectionObserver(
+		(entries) => {
+			if (entries[0]?.isIntersecting) loadMore();
+		},
+		{ root: scrollDom.value, rootMargin: '100px' },
+	);
+	scrollObserver.observe(sentinelDom.value);
+});
+
+onBeforeUnmount(() => {
+	scrollObserver?.disconnect();
+	scrollObserver = null;
+});
+
+defineExpose({ show });
+</script>

package/index.js

@@ -12,6 +12,7 @@ import selectPlaceholder from "./common/directives/selectPlaceholder.js";
 import collapse from "./common/directives/collapse.js";
 import popovers from "./common/directives/popovers.js";
 import tooltip from "./common/directives/tooltip.js";
+import ModalDailyMultimediaImagesSelector from "./ModalDailyMultimediaImagesSelector.vue";
 
 export default {
     paginate,
@@ -31,6 +32,7 @@ export {
     ModalFileRepositorySelector,
     autocompleteSelect,
     ProjectContactUserPicker,
+    ModalDailyMultimediaImagesSelector,
 
     // ProjectManagement
     projectNavbar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jobdone-shared-files",
-  "version": "1.1.22",
+  "version": "1.1.23",
   "description": "Shared JS and SCSS for Jobdone Enterprise.",
   "main": "index.js",
   "scripts": {
@@ -14,6 +14,8 @@
     "vue-loading-overlay": "^6.0.3",
     "bootstrap": "^5.3.8",
     "dayjs": "^1.11.7",
-    "vue-easy-lightbox": "^1.16.0"
+    "vue-easy-lightbox": "^1.16.0",
+    "flatpickr": "^4.6.13",
+    "vue-flatpickr-component": "^12.0.0"
   }
 }

package/style/scss/Components/ModalDailyMultimediaImagesSelector.scss

@@ -0,0 +1,342 @@
+.modal-daily-multimedia-images-selector {
+    .modal-title {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+
+        &::before {
+            content: "photo_camera";
+            display: block;
+            color: var(--bs-primary);
+            font-size: 1.25rem;
+            line-height: 1.25rem;
+            font-family: "Material Icons";
+        }
+    }
+
+    .filter-container {
+        flex: 1;
+        gap: .25rem;
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+
+        .filter-item {
+            flex: 1;
+        }
+
+        .form-label-content {
+            display: flex;
+            align-items: center;
+            gap: .5rem;
+            margin-bottom: .5rem;
+        }
+
+        .form-label {
+            font-size: .875rem;
+            color: var(--gray-500);
+            margin: 0
+        }
+
+        .btn-clear-item {
+            display: inline-flex;
+            align-items: center;
+            font-size: .875rem;
+            padding: 0;
+            background-color: transparent;
+            border: 0;
+            color: var(--red-500);
+            vertical-align: middle;
+            gap: .25rem;
+
+            &::before {
+                font-family: "Material Icons";
+                content: "close";
+            }
+
+            &::after {
+                content: "清除";
+            }
+        }
+    }
+
+
+
+    .media-item {
+        display: flex;
+        justify-content: flex-end;
+        flex-direction: column;
+        position: relative;
+        padding: 0;
+
+        .media-item-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: 0.5rem;
+            margin-bottom: auto;
+
+            &::before {
+                display: block;
+                content: " ";
+                width: 3px;
+                background-color: var(--bs-primary);
+                border-radius: 99px;
+            }
+        }
+
+        .media-item-body {
+            position: relative;
+            padding: 0;
+            transition: 0.1s ease-out;
+
+            &:has(.multimedia-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(0.95);
+
+                .multimedia-preview-content {
+                    transform: scale(0.95);
+                }
+            }
+        }
+
+        .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;
+                transition: opacity 0.2s ease-out;
+
+                &::before {
+                    content: "check";
+                    display: block;
+                    position: absolute;
+                    margin: auto;
+                    color: #fff;
+                    font-size: 1rem;
+                    line-height: 1rem;
+                    opacity: 0.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: 0.8;
+                    border: 2px solid;
+                    border-color: #ffffff85;
+                    content: " ";
+                    display: block;
+                    width: 1.75rem;
+                    height: 1.75rem;
+                    background-color: rgba(0, 0, 0, 0.2);
+                    border-radius: var(--bs-border-radius);
+                    backdrop-filter: blur(2px);
+                    transition: 0.2s ease-out;
+                }
+
+                &:hover {
+                    cursor: pointer;
+
+                    &::before {
+                        opacity: 1;
+                    }
+                }
+
+                &.multimedia-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: var(--purple-100);
+            width: 100%;
+            padding-top: 100%;
+            overflow: hidden;
+            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;
+            }
+        }
+
+        &:hover {
+            cursor: pointer;
+
+            img {
+                transform: scale(1.05);
+            }
+        }
+    }
+
+    .records-preview-table {
+        table-layout: fixed;
+
+        thead {
+            position: sticky;
+            top: 0;
+            z-index: 20;
+        }
+
+        .date-grid {
+            text-align: center;
+            vertical-align: middle;
+            width: 8rem;
+            border-right: 1px solid var(--gray-300);
+        }
+
+        .records-photos {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 0.5rem;
+            padding: .75rem 1rem;
+            background: var(--gray-100);
+            border-radius: var(--bs-border-radius);
+
+            .media-item {
+                background-color: #fff;
+                border-radius: var(--bs-border-radius);
+                border: 3px solid #fff;
+                width: 5rem;
+
+                .select-control {
+                    // 觸控區域調整，兼具勾選便利性和預覽操作的流暢性
+                    padding: 0.25rem 0.25rem 0.5rem 0.5rem;
+
+                    &::before {
+                        left: calc(50% - 0.4rem);
+                        top: calc(50% - 0.6rem);
+
+                    }
+                }
+
+                &:has(.multimedia-is-selected) {
+                    border-radius: var(--bs-border-radius-xl);
+                }
+            }
+        }
+    }
+    .multimedia-list-preview{
+        padding: 0 1rem;
+    }
+    .the-month-content {
+        margin-bottom: 2rem;
+
+        .the-month-content-header {
+            font-size: 1.25rem;
+            border-bottom: 1px solid var(--gray-300);
+            padding-top: 0.75rem;
+            padding-bottom: 0.5rem;
+            margin-bottom: 0.5rem;
+            position: sticky;
+            top: 0;
+            backdrop-filter: blur(2px);
+            background: rgba(255, 255, 255, 0.85);
+            z-index: 10;
+        }
+
+        .the-month-content-body {
+            display: grid;
+            gap: 0.25rem;
+            grid-template-columns: repeat(auto-fill, minmax(8.6rem, 1fr));
+        }
+
+    }
+
+    .selected-preview-bar {
+        display: flex;
+        flex-direction: column;
+        border-top: 1px solid var(--gray-300);
+        background-color: var(--gray-100);
+        max-height: 25vh;
+        overflow: hidden;
+        flex-shrink: 0;
+
+        >* {
+            padding: 0.5rem 1rem;
+        }
+
+        .selected-preview-header {
+            border-bottom: 1px solid var(--gray-300);
+            font-size: 0.875rem;
+            color: var(--gray-600);
+            flex-shrink: 0;
+        }
+
+        .selected-preview-body {
+            overflow: auto;
+            background: var(--gray-400);
+        }
+
+        .selected-preview-list {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 0.25rem;
+
+            .media-item {
+                height: 6rem;
+                width: 6rem;
+                overflow: hidden;
+            }
+
+            .media-item-body {
+                position: relative;
+                padding: 0;
+                transition: 0.1s ease-out;
+
+                &:has(.multimedia-is-selected) {
+                    transform: scale(1);
+                    border: 3px solid #fff;
+
+                    .multimedia-preview-content {
+                        transform: scale(1);
+                    }
+                }
+            }
+        }
+
+    }
+}
+