From ec2f62ac968780c1174d0d927e1ac230f47904b9 Mon Sep 17 00:00:00 2001
From: guoapeng <GuoAnPeng@163.com>
Date: Fri, 4 Jul 2025 22:12:07 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=B6=88=E6=AF=92=E8=AE=BE=E7=BD=AE?=
 =?UTF-8?q?=E9=BB=98=E8=AE=A4=E9=85=8D=E6=96=B9=E4=BF=9D=E7=95=99=E6=B6=88?=
 =?UTF-8?q?=E6=AF=92=E7=AD=89=E7=BA=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/home/HomeSetting.vue        |   2 +
 src/components/home/config.vue             |   1 +
 src/components/system/ErrorEventsModal.vue | 245 +++++++++++++++--------------
 src/stores/formulaStore.ts                 |  16 +-
 4 files changed, 140 insertions(+), 124 deletions(-)

diff --git a/src/components/home/HomeSetting.vue b/src/components/home/HomeSetting.vue
index d37f2bd..77f5734 100644
--- a/src/components/home/HomeSetting.vue
+++ b/src/components/home/HomeSetting.vue
@@ -229,6 +229,8 @@ const handleCancel = () => {
  * @desc 重置对话框状态
  */
 const onClose = () => {
+  const formData = configRef.value?.getFormData()
+  formulaStore.updateSelectedFormulaDataByList(cloneDeep(formData))
   disinfectFormulaVisible.value = false
 }
 
diff --git a/src/components/home/config.vue b/src/components/home/config.vue
index d5c8726..f05b049 100644
--- a/src/components/home/config.vue
+++ b/src/components/home/config.vue
@@ -97,6 +97,7 @@ const onChooseFormula = () => {
  * @description 重置配方数据为默认配置
  */
 const onDefaultFormula = () => {
+  // formulaStore.updateSelectedFormulaDataByList()
   formulaStore.initFormulaData()
 }
 </script>
diff --git a/src/components/system/ErrorEventsModal.vue b/src/components/system/ErrorEventsModal.vue
index 00d3a28..f6a4da2 100644
--- a/src/components/system/ErrorEventsModal.vue
+++ b/src/components/system/ErrorEventsModal.vue
@@ -37,17 +37,13 @@ const getClassByType = (type: string) => {
 </script>
 
 <template>
-  <div v-if="appEvents.length" class="reconnect-modal-overlay">
+  <div v-if="appEvents?.length" class="reconnect-modal-overlay">
     <div class="reconnect-modal-container">
       <h2 class="reconnect-title">
         错误信息：
       </h2>
       <ul class="recipe-list">
-        <li
-          v-for="(item, index) in appEvents"
-          :key="index"
-          :class="getClassByType(item.type)"
-        >
+        <li v-for="(item, index) in appEvents" :key="index" :class="getClassByType(item.type)">
           <span v-if="item.type === 'AppCheckPointCheckFailEvent'">
             <span v-for="checkItem in item.errCheckPoints" :key="checkItem.ecode">
               {{ checkItem.ecodeInfo }}
@@ -76,7 +72,7 @@ const getClassByType = (type: string) => {
   padding: 10px;
   margin-bottom: 5px;
   border-radius: 4px;
-  border: 1px solid #E6A23C;
+  border: 1px solid #e6a23c;
 }
 .list-info {
   padding: 10px;
@@ -84,136 +80,147 @@ const getClassByType = (type: string) => {
   border-radius: 4px;
   border: 1px solid #909399;
 }
-  .list-err {
-    padding: 10px;
-    margin-bottom: 5px;
-    border-radius: 4px;
-    border: 1px solid #F56C6C;
-  }
-  .list-info {
-    padding: 10px;
-    margin-bottom: 5px;
-    border-radius: 4px;
-    border: 1px solid #f0f9eb;
-  }
-  .reconnect-modal-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.5);
-    backdrop-filter: blur(4px);
+.list-err {
+  padding: 10px;
+  margin-bottom: 5px;
+  border-radius: 4px;
+  border: 1px solid #f56c6c;
+}
+.list-info {
+  padding: 10px;
+  margin-bottom: 5px;
+  border-radius: 4px;
+  border: 1px solid #f0f9eb;
+}
+.reconnect-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+}
+
+.reconnect-modal-container {
+  background-color: white;
+  border-radius: 12px;
+  padding: 40px;
+  width: 40vw;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+  text-align: center;
+  animation: fadeIn 0.3s ease-out;
+  .recipe-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .recipe-list li {
     display: flex;
-    justify-content: center;
     align-items: center;
-    z-index: 9999;
+    justify-content: space-between;
+    padding: 10px;
+    border-radius: 4px;
+    margin-bottom: 8px;
+    transition: all 0.2s;
+    cursor: pointer;
   }
 
-  .reconnect-modal-container {
-    background-color: white;
-    border-radius: 12px;
-    padding: 40px;
-    width: 40vw;
-    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
-    text-align: center;
-    animation: fadeIn 0.3s ease-out;
-    .recipe-list {
-      list-style: none;
-      padding: 0;
-      margin: 0;
-    }
-
-    .recipe-list li {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 10px;
-      border-radius: 4px;
-      margin-bottom: 8px;
-      transition: all 0.2s;
-      cursor: pointer;
-    }
-
-    .recipe-list li:hover {
-      background-color: #f5f7fa;
-    }
-
-    .recipe-list li.selected {
-      background-color: #e6f7ff;
-      /* border: 1px solid #1890ff; */
-      /* padding: 9px; */
-    }
+  .recipe-list li:hover {
+    background-color: #f5f7fa;
   }
 
-  .reconnect-spinner {
-    width: 64px;
-    height: 64px;
-    border: 6px solid #f3f3f3;
-    border-radius: 50%;
-    border-top: 6px solid #3b82f6;
-    margin: 0 auto 24px;
-    animation: spin 1s linear infinite;
+  .recipe-list li.selected {
+    background-color: #e6f7ff;
+    /* border: 1px solid #1890ff; */
+    /* padding: 9px; */
   }
+}
 
-  .reconnect-title {
-    font-size: 1.12rem;
-    font-weight: bold;
-    color: #1f2937;
-    margin-bottom: 12px;
-  }
+.reconnect-spinner {
+  width: 64px;
+  height: 64px;
+  border: 6px solid #f3f3f3;
+  border-radius: 50%;
+  border-top: 6px solid #3b82f6;
+  margin: 0 auto 24px;
+  animation: spin 1s linear infinite;
+}
 
-  .reconnect-message {
-    font-size: 16px;
-    color: #4b5563;
-  }
+.reconnect-title {
+  font-size: 1.12rem;
+  font-weight: bold;
+  color: #1f2937;
+  margin-bottom: 12px;
+}
 
-  .actions {
-    display: flex;
-    align-items: center;
-  }
+.reconnect-message {
+  font-size: 16px;
+  color: #4b5563;
+}
 
-  .view-button, .delete-button {
-    border: none;
-    padding: 4px 8px;
-    border-radius: 3px;
-    cursor: pointer;
-    margin-right: 5px;
-    transition: all 0.3s;
-  }
+.actions {
+  display: flex;
+  align-items: center;
+}
 
-  .view-button {
-    background-color: #e6f7ff;
-    color: #1890ff;
-  }
+.view-button,
+.delete-button {
+  border: none;
+  padding: 4px 8px;
+  border-radius: 3px;
+  cursor: pointer;
+  margin-right: 5px;
+  transition: all 0.3s;
+}
 
-  .view-button:hover {
-    background-color: #1890ff;
-    color: white;
-  }
+.view-button {
+  background-color: #e6f7ff;
+  color: #1890ff;
+}
 
-  .delete-button {
-    background-color: #ffe6e6;
-    color: #ff4d4f;
-  }
+.view-button:hover {
+  background-color: #1890ff;
+  color: white;
+}
 
-  .delete-button:hover {
-    background-color: #ff4d4f;
-    color: white;
-  }
+.delete-button {
+  background-color: #ffe6e6;
+  color: #ff4d4f;
+}
 
-  .selected-icon {
-    color: #1890ff;
-    /* margin-left: 8px; */
-  }
+.delete-button:hover {
+  background-color: #ff4d4f;
+  color: white;
+}
 
-  @keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
+.selected-icon {
+  color: #1890ff;
+  /* margin-left: 8px; */
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
   }
+}
 
-  @keyframes fadeIn {
-    from { opacity: 0; transform: scale(0.95); }
-    to { opacity: 1; transform: scale(1); }
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
   }
+}
 </style>
diff --git a/src/stores/formulaStore.ts b/src/stores/formulaStore.ts
index b557728..40692d0 100644
--- a/src/stores/formulaStore.ts
+++ b/src/stores/formulaStore.ts
@@ -64,9 +64,13 @@ export const useFormulaStore = defineStore('formula', () => {
   const flip = ref(true)
   const selectedIndex = ref<number | null>(0)
 
-  watch(defaultFormulaInfo, (newVal) => {
-    currentSelectedFormulaInfo.value = cloneDeep(newVal)
-  }, { deep: true })
+  watch(
+    defaultFormulaInfo,
+    (newVal) => {
+      currentSelectedFormulaInfo.value = cloneDeep(newVal)
+    },
+    { deep: true },
+  )
   // 计算属性
   const isDefaultFormula = computed(() => selectedFormulaInfo.value?.name === defaultFormulaInfo.value.name)
 
@@ -180,7 +184,9 @@ export const useFormulaStore = defineStore('formula', () => {
         formulaList.value = res.rely
         if (res.rely.length) {
           console.log('selectedIndex.value--', selectedIndex.value)
-          currentSelectedFormulaInfo.value = selectedIndex.value ? res.rely[selectedIndex.value] : res.rely[res.rely.length - 1]
+          currentSelectedFormulaInfo.value = selectedIndex.value
+            ? res.rely[selectedIndex.value]
+            : res.rely[res.rely.length - 1]
         }
       }
       else {
@@ -197,7 +203,7 @@ export const useFormulaStore = defineStore('formula', () => {
    * @desc 初始化配方数据，重置为默认配方
    */
   const initFormulaData = () => {
-    selectedFormulaInfo.value = null
+    selectedFormulaInfo.value = cloneDeep(defaultFormulaInfo.value)
     resetToDefaultFormula()
   }