feat: 大屏列表背景

src/api/axios.ts

@@ -40,7 +40,6 @@ axiosInstance.interceptors.request.use(
       const userInfo = info[SystemStoreEnum.USER_INFO]
       if (userInfo && userInfo[SystemStoreUserInfoEnum.USER_TOKEN]) {
         config.headers['authorization'] = userInfo[SystemStoreUserInfoEnum.USER_TOKEN]
-        console.log('[GoView] 请求拦截器：添加 authorization 头:', userInfo[SystemStoreUserInfoEnum.USER_TOKEN])
       } else {
         console.warn('[GoView] 请求拦截器：未找到 token')
       }

src/views/chart/hooks/useSync.hook.ts

@@ -290,21 +290,41 @@ export const useSync = () => {
       if (updateImg) {
         // 获取缩略图片
         const range = document.querySelector('.go-edit-range') as HTMLElement
+        
+        // 只有配置了背景图片时才需要临时修改样式
+        const hasBackgroundImage = !!chartEditStore.getEditCanvasConfig.backgroundImage
+        let originalBgColor = ''
+        let originalBgImage = ''
+        
+        if (hasBackgroundImage) {
+          // 保存原始背景色
+          originalBgColor = range.style.backgroundColor
+          originalBgImage = range.style.backgroundImage
+          
+          // 临时设置为透明背景
+          range.style.backgroundColor = 'transparent'
+          range.style.backgroundImage = 'none'
+        }
+        
         // 生成图片（透明底）
         const canvasImage: HTMLCanvasElement = await html2canvas(range, {
-          backgroundColor: 'transparent',
+          backgroundColor: null,
           allowTaint: true,
           useCORS: true,
           scale: 2,
           logging: false
         })
         
-        // 上传预览图
+        if (hasBackgroundImage) {
+          // 恢复原始背景色
+          range.style.backgroundColor = originalBgColor
+          range.style.backgroundImage = originalBgImage
+        }
 
         // 上传预览图（使用 FtsUpload）
         let uploadParams = new FormData()
-        uploadParams.append('file', base64toFile(canvasImage.toDataURL('image/png'), `${fetchRouteParamsLocation()}_index_preview.png`))
+        uploadParams.append('file', base64toFile(canvasImage.toDataURL('image/png'), `${fetchRouteParamsLocation()}.png`))
-        console.log(base64toFile(canvasImage.toDataURL('image/png'), `${fetchRouteParamsLocation()}_index_preview.png`))
+        // console.log(base64toFile(canvasImage.toDataURL('image/png'), `${fetchRouteParamsLocation()}_index_preview.png`))
         const uploadRes: any = await FtsUpload(uploadParams)
         
         // 保存预览图

src/views/project/items/components/ProjectItemsCard/index.vue

@@ -12,10 +12,11 @@
          ></mac-os-control-btn>
         </div>
         <!-- 中间 -->
-        <div class="list-content-img" @click="resizeHandle">
+        <div class="list-content-img" @click="resizeHandle" :style="{ backgroundImage: `url(${cardData.backgroundImage})` }">
           <n-image
+            class="list-item-img"
             v-if="cardData.image"
-            object-fit="contain"
+            object-fit="cover"
             height="180"
             preview-disabled
             :src="`${cardData.image}?time=${new Date().getTime()}`"
@@ -239,5 +240,10 @@ $contentHeight: 180px;
       min-width: 180px;
     }
   }
+  .list-content-img {
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+  }
 }
 </style>

src/views/project/items/components/ProjectItemsList/hooks/useData.hook.ts

@@ -13,7 +13,7 @@ export const useDataListInit = () => {
     // 当前页数
     page: 1,
     // 每页值
-    limit: 12,
+    limit: 10,
     // 总数
     count: 10
   })
@@ -23,23 +23,22 @@ export const useDataListInit = () => {
   // 数据请求
   const fetchList = async () => {
     loading.value = true
-    const res = await projectListApi({
+    const { code, data }: any = await projectListApi({
       page: paginat.page,
-      limit: paginat.limit
+      size: paginat.limit
     })
-    console.log('fetchList', res)
+    if (code === 0) {
-    if (res && res.data) {
+      paginat.count = data.total
-      const { count } = res as any // 这里的count与data平级，不在Response结构中
+      list.value = (data.list).map(e => {
-      paginat.count = count
+        const { identity, projectName, state, createTime, indexImage, createUserId, backgroundImage } = e
-      list.value = res.data.map(e => {
-        const { identity, projectName, state, createTime, indexImage, createUserId } = e
         return {
           identity: identity,
           title: projectName,
           createId: createUserId,
           time: createTime,
           image: indexImage,
-          release: state === 1
+          release: state === 1,
+          backgroundImage
         }
       })
       setTimeout(() => {

src/views/project/items/components/ProjectItemsModalCard/index.vue

@@ -24,10 +24,13 @@
          ></mac-os-control-btn>
         </n-space>
         <!-- 中间 -->
-        <div class="list-content-img">
+        <div class="list-content-img" :style="{ backgroundImage: `url(${cardData.backgroundImage})` }">
           <img
             :src="cardData?.image"
             :alt="cardData?.title"
+            object-fit="cover"
+            preview-disabled
+            :fallback-src="requireErrorImg()"
           />
         </div>
       </div>
@@ -74,7 +77,7 @@
 
 <script setup lang="ts">
 import { ref, reactive, PropType, watch } from 'vue'
-import { renderIcon, renderLang } from '@/utils'
+import { renderIcon, renderLang, requireErrorImg } from '@/utils'
 import { icon } from '@/plugins'
 import { MacOsControlBtn } from '@/components/Tips/MacOsControlBtn'
 import { Chartype } from '../../index.d'
@@ -173,5 +176,12 @@ $contentWidth: calc(82vw);
   .list-footer {
     line-height: 30px;
   }
+  
+  .list-content-img {
+    padding: 0;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+  }
 }
 </style>

src/views/project/items/index.d.ts

@@ -6,6 +6,7 @@ export type Chartype = {
   image: string, // 预览图地址
   createId: string, // 创建者
   release: boolean // false 未发布 | true 已发布
+  backgroundImage?: string // 背景图片地址
 }
 
 export type ChartList = Chartype[]