Explorar o código

refactor(frontend/src/views/Photography/detail.vue): 重构详情页面逻辑以增强功能和可维护性

- 将`@click.native="form.logo_path = item"`替换为`@click.native="selectLogo(item)"`,并添加了`selectLogo`方法来处理LOGO选择。
- 更新模板点击事件处理函数为`selectTemplate(template)`,并在该方法中保存模板选择到缓存。
- 在多个地方使用可选链操作符(`?.`)来避免潜在的空指针异常。
- 引入`watch`来监听`form.dataType`的变化,并在变化时自动保存到缓存。
- 添加了新的缓存键和相应的加载、保存缓存的方法,包括LOGO、数据类型和服务选择状态。- 优化了路径转换逻辑,使用正则表达式替换路径中的斜杠。- 在获取LOGO列表和新增LOGO时,自动保存默认或新添加的LOGO到缓存。
panqiuyao hai 3 meses
pai
achega
aeb1e7932d
Modificáronse 1 ficheiros con 114 adicións e 11 borrados
  1. 114 11
      frontend/src/views/Photography/detail.vue

+ 114 - 11
frontend/src/views/Photography/detail.vue

@@ -138,7 +138,7 @@
                     :class="{
                         active: item === form.logo_path
                     }"
-                    @click.native="form.logo_path = item"
+                    @click.native="selectLogo(item)"
             ></upload>
             <upload @input="onInput"></upload>
           </div>
@@ -161,10 +161,10 @@
 
             <div class="template-list">
               <div v-for="(template, index) in visibleTemplates" :key="index" class="template-item"
-                @click="form.selectTemplate = template" v-log="{ describe: { action: '点击选择详情模板', template_name: template.template_name } }">
+                @click="selectTemplate(template)" v-log="{ describe: { action: '点击选择详情模板', template_name: template.template_name } }">
                 <el-image :src="template.template_cover_image" fit="contain" class="cur-p"
                   style="width: 100%; display: block;" />
-                <div class="select-warp" :class="form.selectTemplate.id == template.id ? 'active' : ''">
+                <div class="select-warp" :class="form.selectTemplate?.id == template.id ? 'active' : ''">
                   <el-icon color="#FFFFFF">
                     <Select />
                   </el-icon>
@@ -178,7 +178,7 @@
 
             <div class="template-tips c-333 fs-14 line-20 te-l mar-top-20 flex left">
               <el-icon><WarningFilled /></el-icon>
-              <span class="mar-left-10">该模版图片顺序说明:{{form.selectTemplate.template_image_order}}</span>
+              <span class="mar-left-10">该模版图片顺序说明:{{form.selectTemplate?.template_image_order}}</span>
             </div>
 
             <!-- 模板下:一键上架 和 电商平台(多选) -->
@@ -357,7 +357,7 @@ import { clickLog, setLogInfo } from '@/utils/log'
 import { ElMessage, ElMessageBox } from 'element-plus'
 
 import headerBar from '@/components/header-bar/index.vue'
-import { ref, computed, reactive, onMounted, onBeforeUnmount, nextTick } from 'vue';
+import { ref, computed, reactive, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
 import { Select, EditPen } from '@element-plus/icons-vue'
 import upload from '@/components/upload'
 import client from "@/stores/modules/client";
@@ -470,6 +470,13 @@ onMounted(() => {
   loadDetailCache()
 })
 
+// 监听数据类型变化,自动保存到缓存
+watch(() => form.dataType, (newValue) => {
+  if (newValue) {
+    saveDataTypeToCache(newValue)
+  }
+})
+
 // 页面卸载时清理监听器
 onBeforeUnmount(() => {
   clientStore.ipc.removeAllListeners(icpList.socket.message + '_detail_progress');
@@ -532,6 +539,9 @@ const toggleService = (key: string) => {
   const idx = form.services.indexOf(key)
   if (idx > -1) form.services.splice(idx, 1)
   else form.services.push(key)
+  
+  // 保存服务选择状态到缓存
+  saveServicesToCache(form.services)
 }
 
 // 电商平台多选与一键上架
@@ -548,6 +558,9 @@ const scenePrompt = ref('')
 // 本地缓存键(与弹窗组件保持一致)
 const DETAIL_MODEL_CACHE_KEY = 'model_selection_cache'
 const DETAIL_SCENE_PROMPT_CACHE_KEY = 'scene_prompt_cache'
+const DETAIL_LOGO_CACHE_KEY = 'detail_logo_cache'
+const DETAIL_DATA_TYPE_CACHE_KEY = 'detail_data_type_cache'
+const DETAIL_SERVICES_CACHE_KEY = 'detail_services_cache'
 
 // 读取本地缓存
 const loadDetailCache = () => {
@@ -571,6 +584,48 @@ const loadDetailCache = () => {
       console.log(scenePrompt.value);
     }
   } catch {}
+
+  // 加载LOGO缓存
+  try {
+    const logo = localStorage.getItem(DETAIL_LOGO_CACHE_KEY)
+    if (logo) {
+      form.logo_path = logo
+      console.log('loadDetailCache - logo:', logo);
+    }
+  } catch {}
+
+  // 加载数据类型缓存
+  try {
+    const dataType = localStorage.getItem(DETAIL_DATA_TYPE_CACHE_KEY)
+    if (dataType) {
+      form.dataType = dataType
+      console.log('loadDetailCache - dataType:', dataType);
+    }
+  } catch {}
+
+  // 加载模板缓存
+  try {
+    const template = localStorage.getItem('detail_template_cache')
+    if (template) {
+      const parsed = JSON.parse(template)
+      if (parsed && parsed.id) {
+        form.selectTemplate = parsed
+        console.log('loadDetailCache - template:', parsed);
+      }
+    }
+  } catch {}
+
+  // 加载服务选择状态缓存
+  try {
+    const services = localStorage.getItem(DETAIL_SERVICES_CACHE_KEY)
+    if (services) {
+      const parsed = JSON.parse(services)
+      if (Array.isArray(parsed)) {
+        form.services = parsed
+        console.log('loadDetailCache - services:', parsed);
+      }
+    }
+  } catch {}
 }
 
 // 保存到本地缓存(仅保存必要字段)
@@ -604,12 +659,56 @@ const saveScenePromptToCache = (prompt: string) => {
   } catch {}
 }
 
+// 保存LOGO到缓存
+const saveLogoToCache = (logoPath: string) => {
+  try {
+    if (logoPath) {
+      localStorage.setItem(DETAIL_LOGO_CACHE_KEY, logoPath)
+      console.log('saveLogoToCache:', logoPath);
+    }
+  } catch {}
+}
+
+// 保存数据类型到缓存
+const saveDataTypeToCache = (dataType: string) => {
+  try {
+    if (dataType) {
+      localStorage.setItem(DETAIL_DATA_TYPE_CACHE_KEY, dataType)
+      console.log('saveDataTypeToCache:', dataType);
+    }
+  } catch {}
+}
+
+const saveServicesToCache = (services: string[]) => {
+  try {
+    localStorage.setItem(DETAIL_SERVICES_CACHE_KEY, JSON.stringify(services))
+    console.log('saveServicesToCache:', services);
+  } catch {}
+}
+
 const openModelDialog = () => {
   modelDialogVisible.value = true
 }
 const openScenePromptDialog = () => {
   scenePromptDialogVisible.value = true
 }
+
+// 选择模板
+const selectTemplate = (template: any) => {
+  form.selectTemplate = template
+  // 保存模板选择到缓存
+  try {
+    localStorage.setItem('detail_template_cache', JSON.stringify(template))
+    console.log('selectTemplate - saved to cache:', template);
+  } catch {}
+}
+
+// 选择LOGO
+const selectLogo = (logoPath: string) => {
+  form.logo_path = logoPath
+  // 保存LOGO选择到缓存
+  saveLogoToCache(logoPath)
+}
 const handleModelSelection = (models: { female: any; male: any }) => {
   selectedModels.value = models
   saveModelsToCache(models)
@@ -747,7 +846,7 @@ const openOutputDir = () => {
     clientStore.ipc.removeAllListeners(icpList.utils.shellFun);
     clientStore.ipc.send(icpList.utils.shellFun, {
       action: 'openPath',
-      params: fullPath.replaceAll('/', '\\')
+      params: fullPath.replace(/\//g, '\\')
     });
   } catch (e) {
     console.error(e)
@@ -768,7 +867,7 @@ const generate = async function () {
       action: '点击开始生成详情页',
       services: form.services,
       dataType: form.dataType,
-      template_name: form.selectTemplate.template_name,
+      template_name: form.selectTemplate?.template_name,
       goods_count: goods_art_nos.value.length,
       goods_art_nos: goods_art_nos.value
     }
@@ -821,9 +920,9 @@ const generate = async function () {
   const params = {
     goods_art_no: JSON.parse(JSON.stringify(goods_art_nos.value)),
     logo_path: form.logo_path || '',
-    temp_name: form.selectTemplate.template_id || '',
+    temp_name: form.selectTemplate?.template_id || '',
     excel_path: form.dataType == '1' ? form.excel_path : '',
-    template_image_order: form.selectTemplate.template_image_order,
+    template_image_order: form.selectTemplate?.template_image_order,
     temp_list,
     token,
     uuid: uuidStore.getUuid || '',
@@ -1040,8 +1139,10 @@ const getLogolist = async () => {
     logoList.value = result.data || []
     console.log('getLogoList')
     console.log(result.data)
-    if(logoList.value.length){
+    if(logoList.value.length && !form.logo_path){
       form.logo_path = logoList.value[0]
+      // 保存默认LOGO到缓存
+      saveLogoToCache(form.logo_path)
     }
     clientStore.ipc.removeAllListeners(icpList.generate.getLogoList);
   })
@@ -1061,6 +1162,8 @@ const addLogo = async (path) => {
       console.log(result)
       if(result.data.logo){
         form.logo_path = result.data.logo
+        // 保存新添加的LOGO到缓存
+        saveLogoToCache(form.logo_path)
         if(logoList.value.indexOf(result.data.logo) <0){
           logoList.value.push(result.data.logo)
         }
@@ -1119,7 +1222,7 @@ const handleComplete = () => {
   clientStore.ipc.removeAllListeners(icpList.utils.shellFun);
   let params = {
     action: 'openPath',
-    params: completeDirectory.value?.replaceAll('/', '\\')
+    params: completeDirectory.value?.replace(/\//g, '\\')
   }
   clientStore.ipc.send(icpList.utils.shellFun, params);
 }