From 3ca39fc010704f654e11f4b56ca22284e55c87ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=81=8C=E7=B3=96=E5=8C=85=E5=AD=90?=
 <colorfulsweet@icloud.com>
Date: Tue, 31 Mar 2026 22:51:51 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E6=B7=B1=E8=89=B2?=
 =?UTF-8?q?=E6=A8=A1=E5=BC=8F=E5=92=8C=E7=85=A7=E7=89=87=E9=A2=84=E8=A7=88?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增全局深色模式切换功能，支持手动切换和跟随系统主题
- 优化照片墙预览，使用ElImageViewer组件支持左右切换
- 引入Element Plus深色模式相关样式文件

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 components.d.ts             |  1 +
 src/main.ts                 |  2 ++
 src/views/Home.vue          | 30 ++++++++++++++++++++++++++++++
 src/views/api/PhotoWall.vue | 25 +++++++++++++++----------
 4 files changed, 48 insertions(+), 10 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index c600702..0aac2b9 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -23,6 +23,7 @@ declare module '@vue/runtime-core' {
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElHeader: typeof import('element-plus/es')['ElHeader']
     ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElImageViewer: typeof import('element-plus/es')['ElImageViewer']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElMain: typeof import('element-plus/es')['ElMain']
     ElMenu: typeof import('element-plus/es')['ElMenu']
diff --git a/src/main.ts b/src/main.ts
index a1f76ad..956665a 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -7,6 +7,8 @@ import type { RouteLocationNormalized, NavigationGuardNext } from 'vue-router'
 import { ElLoading } from 'element-plus'
 import 'element-plus/theme-chalk/el-message.css'
 import 'element-plus/theme-chalk/el-message-box.css'
+import 'element-plus/theme-chalk/el-image-viewer.css'
+import 'element-plus/theme-chalk/dark/css-vars.css'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 
 // 全局路由导航前置守卫
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 9e595fe..9c92604 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -3,6 +3,10 @@
     <el-header class="layout-header">
       <div class="main-title">博客管理后台</div>
       <div class="nav-btns-right">
+        <el-button link @click="toggleDarkMode" style="color: #fff; font-size: 18px; margin-right: 12px;">
+          <Moon v-if="!isDark" style="width: 18px" />
+          <Sunny v-else style="width: 18px" />
+        </el-button>
         <el-dropdown @command="dropdownMenuCommand">
           <el-button link type="primary">
             <UserFilled style="width: 18px" />
@@ -92,6 +96,32 @@ const defaultActiveMenuKey = ref<string | null>(null)
 const openMenuNames = ref<string[]>([])
 const mainViewReady = ref(false)
 
+const isDark = ref(false)
+function applyDarkMode(dark: boolean) {
+  isDark.value = dark
+  document.documentElement.classList.toggle('dark', dark)
+}
+function toggleDarkMode() {
+  const next = !isDark.value
+  applyDarkMode(next)
+  localStorage.setItem('theme_mode', next ? 'dark' : 'light')
+}
+// 初始化主题
+;(() => {
+  const saved = localStorage.getItem('theme_mode')
+  if (saved) {
+    applyDarkMode(saved === 'dark')
+  } else {
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+    applyDarkMode(prefersDark)
+  }
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+    if (!localStorage.getItem('theme_mode')) {
+      applyDarkMode(e.matches)
+    }
+  })
+})()
+
 const changePwdModal = ref(false)
 const changePwdLoading = ref(false)
 const changePwdForm = ref<VForm>()
diff --git a/src/views/api/PhotoWall.vue b/src/views/api/PhotoWall.vue
index 91c3bbc..9b3eda7 100644
--- a/src/views/api/PhotoWall.vue
+++ b/src/views/api/PhotoWall.vue
@@ -75,10 +75,16 @@
       @current-change="pageChange">
     </el-pagination>
   </div>
+  <el-image-viewer
+    v-if="previewVisible"
+    :url-list="previewUrlList"
+    :initial-index="previewIndex"
+    @close="previewVisible = false"
+  />
 </div>
 </template>
 <script setup lang="ts">
-import { ref, h } from 'vue'
+import { ref } from 'vue'
 import { useStore } from 'vuex'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { MsgResult, Page } from '@/model/common.dto'
@@ -106,8 +112,11 @@ const store = useStore()
 const { loading, total, search, setLoadData, loadDataBase, reset, pageChange, pageSizeChange } = useBaseList(new PhotoWallPage())
 
 const allowUploadExt = ['jpg', 'jpeg', 'png']
-const photowallData = ref([])
+const photowallData = ref<PhotoWallModel[]>([])
 const isUploading = ref(false)
+const previewVisible = ref(false)
+const previewUrlList = ref<string[]>([])
+const previewIndex = ref(0)
 
 let selectedData: string[] = []
 
@@ -157,15 +166,11 @@ function uploadError(error: Error) {
   ElMessage.error(error.message)
 }
 async function preview(row: PhotoWallModel) {
-  const previewHeight = Math.floor(row.height * (500 / row.width))
   const pictureCdn = await http.get('/api/v2/common/config/picture_cdn')
-  ElMessageBox({
-    title: '图片预览',
-    message: h('img', { style: `width:500px;height:${previewHeight}px;`, src: `${pictureCdn}/${row.name}` }, ''),
-    showCancelButton: false,
-    confirmButtonText: '关闭',
-    customStyle: {width: '530px', maxWidth: 'unset'}
-  }).catch(() => {})
+  const index = photowallData.value.findIndex(item => item._id === row._id)
+  previewUrlList.value = photowallData.value.map(item => `${pictureCdn}/${item.name}`)
+  previewIndex.value = index >= 0 ? index : 0
+  previewVisible.value = true
 }
 
 // created