feat: 调整dialog弹窗顶部icon和样式

src/components/AddRules/src/AddRules.vue

@@ -388,8 +388,7 @@ const Savesubscribe = () => {
   if (props.TitleType == 'Milestone') {
     savesubscribeobj.rules_type = 'Milestone_Update'
     if (
-      OceanCheckList.value.length == 0 &&
-      AirCheckList.value.length == 0 ||
+      (OceanCheckList.value.length == 0 && AirCheckList.value.length == 0) ||
       MilFrequencyList.value.length == 0 ||
       MilMethodsList.value == undefined ||
       MilMethodsList.value.length == 0
@@ -408,21 +407,17 @@ const Savesubscribe = () => {
     } else {
       savesubscribeobj.ocean_milestone = OceanCheckCode.value
       savesubscribeobj.air_milestone = AirCheckListCode.value
-      if(OceanCheckList.value.length == 0) {
-        str =
-        'Air Milestones: ' +
-        AirCheckList.value.join(',')
-      } else if(AirCheckList.value.length == 0) {
-        str =
-        'Ocean Milestones: ' +
-        OceanCheckList.value.join(',')
+      if (OceanCheckList.value.length == 0) {
+        str = 'Air Milestones: ' + AirCheckList.value.join(',')
+      } else if (AirCheckList.value.length == 0) {
+        str = 'Ocean Milestones: ' + OceanCheckList.value.join(',')
       } else {
         str =
-        'Ocean Milestones: ' +
-        OceanCheckList.value.join(',') +
-        ';\nAir Milestones: ' +
-        AirCheckList.value.join(',') +
-        ';'
+          'Ocean Milestones: ' +
+          OceanCheckList.value.join(',') +
+          ';\nAir Milestones: ' +
+          AirCheckList.value.join(',') +
+          ';'
       }
       savesubscribeobj.event_details = str
       SaveSuceessful()
@@ -455,8 +450,7 @@ const Savesubscribe = () => {
   } else if (props.TitleType == 'Departure') {
     savesubscribeobj.rules_type = 'Departure/Arrival_Delay'
     if (
-      DelayedDeparturedList.value.length == 0 &&
-      DelayedAirdList.value.length == 0 ||
+      (DelayedDeparturedList.value.length == 0 && DelayedAirdList.value.length == 0) ||
       DepFrequencyList.value.length == 0 ||
       DepMethodsList.value == undefined ||
       DepMethodsList.value.length == 0
@@ -473,21 +467,17 @@ const Savesubscribe = () => {
       missingmessage.value = missingmessage.value.substring(0, missingmessage.value.length - 2)
       UnableSaveVisible.value = true
     } else {
-      if(DelayedDeparturedList.value.length == 0) {
-        str =
-        'Air: ' +
-        DelayedAirdList.value.join(',')
-      } else if(DelayedAirdList.value.length == 0) {
-        str =
-        'Ocean: ' +
-        DelayedDeparturedList.value.join(',')
+      if (DelayedDeparturedList.value.length == 0) {
+        str = 'Air: ' + DelayedAirdList.value.join(',')
+      } else if (DelayedAirdList.value.length == 0) {
+        str = 'Ocean: ' + DelayedDeparturedList.value.join(',')
       } else {
         str =
-        'Ocean: ' +
-        DelayedDeparturedList.value.join(',') +
-        ';\nAir: ' +
-        DelayedAirdList.value.join(',') +
-        ';'
+          'Ocean: ' +
+          DelayedDeparturedList.value.join(',') +
+          ';\nAir: ' +
+          DelayedAirdList.value.join(',') +
+          ';'
       }
       savesubscribeobj.event_details = str
       SaveSuceessful()
@@ -495,8 +485,7 @@ const Savesubscribe = () => {
   } else {
     savesubscribeobj.rules_type = 'ETD/ETA_Change'
     if (
-      ETDOceanList.value.length == 0 &&
-      ETDAirList.value.length == 0 ||
+      (ETDOceanList.value.length == 0 && ETDAirList.value.length == 0) ||
       ETDFrequencyList.value.length == 0 ||
       ETDMethodsList.value == undefined ||
       ETDMethodsList.value.length == 0
@@ -513,21 +502,13 @@ const Savesubscribe = () => {
       missingmessage.value = missingmessage.value.substring(0, missingmessage.value.length - 2)
       UnableSaveVisible.value = true
     } else {
-      if(ETDOceanList.value.length == 0) {
-        str =
-        '[Air]' +
-        ETDAirList.value.join(',')
-      } else if(ETDAirList.value.length == 0) {
-        str =
-        '[Ocean]' +
-        ETDOceanList.value.join(',')
+      if (ETDOceanList.value.length == 0) {
+        str = '[Air]' + ETDAirList.value.join(',')
+      } else if (ETDAirList.value.length == 0) {
+        str = '[Ocean]' + ETDOceanList.value.join(',')
       } else {
         str =
-        '[Ocean]' +
-        ETDOceanList.value.join(',') +
-        ';\n[Air]' +
-        ETDAirList.value.join(',') +
-        ';'
+          '[Ocean]' + ETDOceanList.value.join(',') + ';\n[Air]' + ETDAirList.value.join(',') + ';'
       }
       savesubscribeobj.event_details = str
       SaveSuceessful()
@@ -578,14 +559,14 @@ const clearData = (val: any) => {
 const MilOceanref = ref()
 const MilAirref = ref()
 const ContainerOcean = ref()
-const handleCloseMilestoneOcean = (val:any) => {
+const handleCloseMilestoneOcean = (val: any) => {
   MilOceanref.value.hadleclose(val)
 }
-const handleCloseMilestoneAir = (val:any) => {
+const handleCloseMilestoneAir = (val: any) => {
   MilAirref.value.hadleclose(val)
 }
 
-const handleCloseContainer = (val:any) => {
+const handleCloseContainer = (val: any) => {
   ContainerOcean.value.hadleclose(val)
 }
 
@@ -936,12 +917,8 @@ defineExpose({
         </div>
       </template>
       <template #header>
-        <div class="cancel_header">
-          <span class="iconfont_icon iconfont_warning">
-            <svg class="iconfont icon_warning" aria-hidden="true">
-              <use xlink:href="#icon-icon_tipsfilled_b"></use>
-            </svg>
-          </span>
+        <div class="warning-header dialog-header">
+          <span class="font_family icon-icon_fail_fill_b"></span>
           Unsaved Changes
         </div>
       </template>
@@ -962,19 +939,15 @@ defineExpose({
         </div>
       </template>
       <template #header>
-        <div class="cancel_header">
-          <span class="iconfont_icon iconfont_warning">
-            <svg class="iconfont icon_danger" aria-hidden="true">
-              <use xlink:href="#icon-icon_fail_fill_b"></use>
-            </svg>
-          </span>
+        <div class="unable-save-header dialog-header">
+          <span class="font_family icon-icon_fail_fill_b"></span>
           Unable to Save
         </div>
       </template>
     </el-dialog>
     <!-- 保存成功 -->
     <el-dialog v-model="SaveedVisible" width="320" style="height: 212px">
-      <div style="text-align: center"><el-image :src="submitsucessful" style="width: 64px;" /></div>
+      <div style="text-align: center"><el-image :src="submitsucessful" style="width: 64px" /></div>
       <div style="text-align: center; margin-top: 20px">Saved successfully</div>
     </el-dialog>
   </div>
@@ -1086,12 +1059,23 @@ defineExpose({
   width: 100px;
   height: 40px;
 }
-.cancel_header {
-  font-size: 18px;
-  font-weight: 700;
-  color: var(--color-neutral-1);
+.dialog-header {
   display: flex;
   align-items: center;
+  .font_family {
+    font-size: 14px;
+    width: 16px;
+    height: 16px;
+    border-radius: 24px;
+    margin-right: 4px;
+  }
+}
+.unable-save-header .font_family {
+  color: #b53039;
+}
+
+div.warning-header .font_family {
+  color: #e9b227;
 }
 .icon_warning {
   width: 22px;
@@ -1112,4 +1096,4 @@ defineExpose({
 :deep(.el-collapse) {
   margin-right: 8px;
 }
-</style>
+</style>

src/components/CreateAddRules/src/CreateAddRules.vue

@@ -1240,12 +1240,8 @@ defineExpose({
       </div>
     </template>
     <template #header>
-      <div class="cancel_header">
-        <span class="iconfont_icon iconfont_warning">
-          <svg class="iconfont icon_danger" aria-hidden="true">
-            <use xlink:href="#icon-icon_fail_fill_b"></use>
-          </svg>
-        </span>
+      <div class="unable-save-header dialog-header">
+        <span class="font_family icon-icon_fail_fill_b"></span>
         Unable to Save
       </div>
     </template>
@@ -1267,12 +1263,8 @@ defineExpose({
       </div>
     </template>
     <template #header>
-      <div class="cancel_header">
-        <span class="iconfont_icon iconfont_warning">
-          <svg class="iconfont icon_danger" aria-hidden="true">
-            <use xlink:href="#icon-icon_fail_fill_b"></use>
-          </svg>
-        </span>
+      <div class="unable-save-header dialog-header">
+        <span class="font_family icon-icon_fail_fill_b"></span>
         Unable to Save
       </div>
     </template>
@@ -1300,12 +1292,8 @@ defineExpose({
       </div>
     </template>
     <template #header>
-      <div class="cancel_header">
-        <span class="iconfont_icon iconfont_warning">
-          <svg class="iconfont icon_warning" aria-hidden="true">
-            <use xlink:href="#icon-icon_tipsfilled_b"></use>
-          </svg>
-        </span>
+      <div class="warning-header dialog-header">
+        <span class="font_family icon-icon_warning_fill_b"></span>
         Similar Rule Detected
       </div>
     </template>
@@ -1415,12 +1403,23 @@ defineExpose({
   width: 100px;
   height: 40px;
 }
-.cancel_header {
-  font-size: 18px;
-  font-weight: 700;
-  color: var(--color-neutral-1);
+.dialog-header {
   display: flex;
   align-items: center;
+  .font_family {
+    font-size: 14px;
+    width: 16px;
+    height: 16px;
+    border-radius: 24px;
+    margin-right: 4px;
+  }
+}
+.unable-save-header .font_family {
+  color: #b53039;
+}
+
+div.warning-header .font_family {
+  color: #e9b227;
 }
 .icon_warning {
   width: 22px;

src/views/DestinationDelivery/src/components/ConfiguRations/src/components/CreateNewRule.vue

@@ -346,12 +346,8 @@ onMounted(() => {
             </div>
           </template>
           <template #header>
-            <div class="cancel_header">
-              <span class="iconfont_icon iconfont_warning">
-                <svg class="iconfont icon_warning" aria-hidden="true">
-                  <use xlink:href="#icon-icon_tipsfilled_b"></use>
-                </svg>
-              </span>
+            <div class="dialog-header warning-header">
+              <span class="font_family icon-icon_tipsfilled_b"></span>
               Unsaved Changes
             </div>
           </template>
@@ -372,12 +368,8 @@ onMounted(() => {
             </div>
           </template>
           <template #header>
-            <div class="cancel_header">
-              <span class="iconfont_icon iconfont_warning">
-                <svg class="iconfont icon_danger" aria-hidden="true">
-                  <use xlink:href="#icon-icon_fail_fill_b"></use>
-                </svg>
-              </span>
+            <div class="unable-save-header dialog-header">
+              <span class="font_family icon-icon_fail_fill_b"></span>
               Unable to Save
             </div>
           </template>
@@ -611,4 +603,24 @@ onMounted(() => {
 :deep(.el-dialog__body) {
   font-weight: 400;
 }
+
+.dialog-header {
+  display: flex;
+  align-items: center;
+  .font_family {
+    font-size: 14px;
+    width: 16px;
+    height: 16px;
+    border-radius: 24px;
+    margin-right: 4px;
+  }
+}
+
+.unable-save-header .font_family {
+  color: #b53039;
+}
+
+div.warning-header .font_family {
+  color: #e9b227;
+}
 </style>

src/views/DestinationDelivery/src/components/CreateNewBooking/src/CreateNewbooking.vue

@@ -1324,8 +1324,8 @@ onMounted(() => {
         </div>
       </template>
       <template #header>
-        <div class="cancel_header">
-          <span class="font_family icon-icon_tipsfilled_b"></span>
+        <div class="unable-save-header dialog-header">
+          <span class="font_family icon-icon_fail_fill_b"></span>
           Unable to Save
         </div>
       </template>
@@ -1345,8 +1345,8 @@ onMounted(() => {
         </div>
       </template>
       <template #header>
-        <div class="cancel_header">
-          <span class="font_family icon-icon_tipsfilled_b"></span>
+        <div class="warning-header dialog-header">
+          <span class="font_family icon-icon_fail_fill_b"></span>
           Unsaved Changes
         </div>
       </template>
@@ -1372,8 +1372,8 @@ onMounted(() => {
         </div>
       </template>
       <template #header>
-        <div class="cancel_header">
-          <span class="font_family icon-icon_tipsfilled_b"></span>
+        <div class="warning-header dialog-header">
+          <span class="font_family icon-icon_warning_fill_b"></span>
           Additional Fees Notice
         </div>
       </template>
@@ -1739,21 +1739,22 @@ onMounted(() => {
 :deep(header.el-dialog__header) {
   background-color: var(--color-system-body-bg);
 }
-.cancel_header {
+.dialog-header {
   display: flex;
   align-items: center;
-  // font-size: 18px;
-  // font-weight: 700;
   .font_family {
-    color: #f19d38;
-    font-size: 18px;
-    width: 18px;
-    height: 18px;
+    font-size: 14px;
+    width: 16px;
+    height: 16px;
     border-radius: 24px;
     margin-right: 4px;
   }
-  .iconfont_icon {
-    font-size: 24px;
-  }
+}
+.unable-save-header .font_family {
+  color: #b53039;
+}
+
+div.warning-header .font_family {
+  color: #e9b227;
 }
 </style>

src/views/PromptConfiguration/src/PromptConfiguration.vue

@@ -39,7 +39,15 @@ const addstepdata = () => {
 // 计算属性
 const testquestiontEmpty = computed(() => {
   // 去除首尾空格后检查长度
-  if(rolename.value.trim().length == 0 || professionalfield.value.trim().length == 0 || maintasks.value.trim().length == 0 || tablename.value.trim().length == 0 || tableDataList.value.length == 0 || stepData.value.length == 0 || formatList.value.length == 0) {
+  if (
+    rolename.value.trim().length == 0 ||
+    professionalfield.value.trim().length == 0 ||
+    maintasks.value.trim().length == 0 ||
+    tablename.value.trim().length == 0 ||
+    tableDataList.value.length == 0 ||
+    stepData.value.length == 0 ||
+    formatList.value.length == 0
+  ) {
     return true
   } else {
     return false
@@ -69,38 +77,50 @@ const getPromptConfiguration = () => {
 const missingmessage = ref()
 const SavePromptConfiguration = () => {
   missingmessage.value = ''
-  if(rolename.value != '' && professionalfield.value != '' && maintasks.value != '' && professionalfield.value != '' && tableDataList.value.length != 0 && stepData.value.length != 0 &&  formatList.value.length != 0 &&  outputvalue.value != '' && prompttextvalue.value != '') {
-    $api.SavePromptConfiguration({
-      role_name: rolename.value,
-      professional_field: professionalfield.value,
-      main_tasks: maintasks.value,
-      table_name: tablename.value,
-      table_description: tabledescription.value,
-      tableDataList: tableDataList.value,
-      stepData: stepData.value,
-      formatList: formatList.value,
-      outputvalue: outputvalue.value,
-      prompttextvalue: prompttextvalue.value,
-      id: editid.value
-    }).then((res) => {
-      if (res.code === 200) {
-        SaveedVisible.value = true
-        setTimeout(() => {
-          window.location.reload()
-        }, 3000)
-      }
-    })
+  if (
+    rolename.value != '' &&
+    professionalfield.value != '' &&
+    maintasks.value != '' &&
+    professionalfield.value != '' &&
+    tableDataList.value.length != 0 &&
+    stepData.value.length != 0 &&
+    formatList.value.length != 0 &&
+    outputvalue.value != '' &&
+    prompttextvalue.value != ''
+  ) {
+    $api
+      .SavePromptConfiguration({
+        role_name: rolename.value,
+        professional_field: professionalfield.value,
+        main_tasks: maintasks.value,
+        table_name: tablename.value,
+        table_description: tabledescription.value,
+        tableDataList: tableDataList.value,
+        stepData: stepData.value,
+        formatList: formatList.value,
+        outputvalue: outputvalue.value,
+        prompttextvalue: prompttextvalue.value,
+        id: editid.value
+      })
+      .then((res) => {
+        if (res.code === 200) {
+          SaveedVisible.value = true
+          setTimeout(() => {
+            window.location.reload()
+          }, 3000)
+        }
+      })
   } else {
-    if(rolename.value == '' || professionalfield.value == '' || maintasks.value == '') {
+    if (rolename.value == '' || professionalfield.value == '' || maintasks.value == '') {
       missingmessage.value += '系统角色配置, '
     }
-    if(tablename.value == '' || tableDataList.value.length == 0) {
+    if (tablename.value == '' || tableDataList.value.length == 0) {
       missingmessage.value += '表结构配置, '
     }
-    if(stepData.value.length == 0) {
+    if (stepData.value.length == 0) {
       missingmessage.value += '响应规则配置, '
     }
-    if(formatList.value.length == 0 || outputvalue.value == '') {
+    if (formatList.value.length == 0 || outputvalue.value == '') {
       missingmessage.value += '输出格式配置, '
     }
     missingmessage.value = missingmessage.value.substring(0, missingmessage.value.length - 2)
@@ -109,7 +129,8 @@ const SavePromptConfiguration = () => {
 }
 
 const EditPrompt = () => {
-  $api.EditPrompt({
+  $api
+    .EditPrompt({
       role_name: rolename.value,
       professional_field: professionalfield.value,
       main_tasks: maintasks.value,
@@ -121,7 +142,8 @@ const EditPrompt = () => {
       outputvalue: outputvalue.value,
       prompttextvalue: prompttextvalue.value,
       id: editid.value
-    }).then((res) => {
+    })
+    .then((res) => {
       if (res.code === 200) {
         prompttextvalue.value = res.data.complete_prompt
         promptValue.value = res.data.prompt_summary
@@ -133,16 +155,16 @@ const EditPrompt = () => {
 const exporttxt = () => {
   // 创建 Blob 对象
   const blob = new Blob([prompttext.value], { type: 'text/plain' })
-   // 创建下载链接
+  // 创建下载链接
   const link = document.createElement('a')
   link.href = URL.createObjectURL(blob)
-  const currentDate = moment();
-  const formattedDate = currentDate.format('YYYY-MM-DD HH:mm');
+  const currentDate = moment()
+  const formattedDate = currentDate.format('YYYY-MM-DD HH:mm')
   link.download = `${formattedDate} Prompt.txt` // 自定义文件名
-  
+
   // 触发下载
   link.click()
-  
+
   // 清理内存
   URL.revokeObjectURL(link.href)
 }
@@ -167,8 +189,17 @@ onMounted(() => {
   <div class="Title">
     <div>Prompt Configuration</div>
     <div>
-      <el-button class="el-button--default title-button" style="margin-right: 8px;" @click="PromptdialogVisible = true"><span class="font_family icon-icon_dashboard_b icon_dark" style="margin-right: 5px;"></span>变更日志查看</el-button>
-      <el-button class="el-button--main title-button" @click="SavePromptConfiguration"><span class="font_family icon-icon_save_b icon_dark" style="margin-right: 5px;"></span>保存生效</el-button>
+      <el-button
+        class="el-button--default title-button"
+        style="margin-right: 8px"
+        @click="PromptdialogVisible = true"
+        ><span class="font_family icon-icon_dashboard_b icon_dark" style="margin-right: 5px"></span
+        >变更日志查看</el-button
+      >
+      <el-button class="el-button--main title-button" @click="SavePromptConfiguration"
+        ><span class="font_family icon-icon_save_b icon_dark" style="margin-right: 5px"></span
+        >保存生效</el-button
+      >
     </div>
   </div>
   <el-dialog
@@ -179,7 +210,7 @@ onMounted(() => {
     align-center
     class="prompt-dialog"
     :close-on-click-modal="false"
-  > 
+  >
     <div class="diaolog-body">
       <div class="diaolog-content" v-for="(item, index) in ChangeLogList" :key="index">
         <div class="diaolog-flex">
@@ -188,7 +219,10 @@ onMounted(() => {
             <div class="dialog-person">{{ item.person }}</div>
           </div>
           <div>
-            <el-button class="el-button--default" @click="ViewPrompt(item.text)"><span class="font_family icon-icon_view_b icon_dark" style="margin-right: 5px;" ></span>查看完整Prompt</el-button>
+            <el-button class="el-button--default" @click="ViewPrompt(item.text)"
+              ><span class="font_family icon-icon_view_b icon_dark" style="margin-right: 5px"></span
+              >查看完整Prompt</el-button
+            >
           </div>
         </div>
         <div class="diaolog-text">
@@ -204,14 +238,19 @@ onMounted(() => {
     align-center
     class="prompt-dialog prompt-dialog-inner"
     :close-on-click-modal="false"
-  > 
+  >
     <template #header>
       <div class="dialog-header">
-        <div style="width: 55%;display: flex;justify-content: space-between;">
-          <div class="Back" @click="Backprompt"><span class="font_family icon-icon_previous_b icon_dark"></span>Back</div>
-          <div style="display: flex;align-items: center;">查看完整Prmopt</div>
+        <div style="width: 55%; display: flex; justify-content: space-between">
+          <div class="Back" @click="Backprompt">
+            <span class="font_family icon-icon_previous_b icon_dark"></span>Back
+          </div>
+          <div style="display: flex; align-items: center">查看完整Prmopt</div>
         </div>
-        <el-button class="el-button--default" @click="exporttxt"><span class="font_family icon-icon_import_b icon_dark" style="margin-right: 5px;" ></span>导出完整日志</el-button>
+        <el-button class="el-button--default" @click="exporttxt"
+          ><span class="font_family icon-icon_import_b icon_dark" style="margin-right: 5px"></span
+          >导出完整日志</el-button
+        >
       </div>
     </template>
     <pre class="diaolog-content">
@@ -223,62 +262,115 @@ onMounted(() => {
     <div class="prompt-border">
       <div class="prompt-title">系统角色设置</div>
       <div class="flex">
-        <div style="width: 50%; margin-right: 8px;">
+        <div style="width: 50%; margin-right: 8px">
           <div class="little-title">角色名称</div>
-          <el-input v-model="rolename" placeholder="为AI Robot创建一个角色名称" class="input-name" @change="EditPrompt"></el-input>
+          <el-input
+            v-model="rolename"
+            placeholder="为AI Robot创建一个角色名称"
+            class="input-name"
+            @change="EditPrompt"
+          ></el-input>
         </div>
-        <div style="width: 50%;">
+        <div style="width: 50%">
           <div class="little-title">专业领域</div>
-          <el-input v-model="professionalfield" placeholder="为AI Robot设定专业领域" class="input-name"></el-input>
+          <el-input
+            v-model="professionalfield"
+            placeholder="为AI Robot设定专业领域"
+            class="input-name"
+          ></el-input>
         </div>
       </div>
-      <div style="margin-top: 16px;">
+      <div style="margin-top: 16px">
         <div class="little-title">主要任务</div>
-        <el-input v-model="maintasks" type="textarea" placeholder="简要描述AI Robot的主要任务" class="input-name-textarea" :rows="3"></el-input>
+        <el-input
+          v-model="maintasks"
+          type="textarea"
+          placeholder="简要描述AI Robot的主要任务"
+          class="input-name-textarea"
+          :rows="3"
+        ></el-input>
       </div>
     </div>
     <!-- 表结构配置 -->
     <div class="prompt-border">
       <div class="prompt-title">表结构配置</div>
       <div class="flex">
-        <div style="width: 50%; margin-right: 8px;">
+        <div style="width: 50%; margin-right: 8px">
           <div class="little-title"><span class="stars_red">*</span>表名</div>
-          <el-input v-model="tablename" placeholder="创建一个表名" class="input-name" @change="EditPrompt"></el-input>
+          <el-input
+            v-model="tablename"
+            placeholder="创建一个表名"
+            class="input-name"
+            @change="EditPrompt"
+          ></el-input>
         </div>
-        <div style="width: 50%;">
+        <div style="width: 50%">
           <div class="little-title">表描述</div>
-          <el-input v-model="tabledescription" placeholder="简要描述表的用途" class="input-name"></el-input>
+          <el-input
+            v-model="tabledescription"
+            placeholder="简要描述表的用途"
+            class="input-name"
+          ></el-input>
         </div>
       </div>
-      <div style="margin-top: 16px;">
-        <el-button class="el-button--noborder--configuration prompt-button" @click="AddTableConfiguration">+ 添加字段</el-button>
-        <TableConfiguration ref="TableConfigurationref" :tableDataList="tableDataList"></TableConfiguration>
+      <div style="margin-top: 16px">
+        <el-button
+          class="el-button--noborder--configuration prompt-button"
+          @click="AddTableConfiguration"
+          >+ 添加字段</el-button
+        >
+        <TableConfiguration
+          ref="TableConfigurationref"
+          :tableDataList="tableDataList"
+        ></TableConfiguration>
       </div>
     </div>
     <!-- 响应规则配置 -->
     <div class="prompt-border">
       <div class="prompt-title">响应规则配置</div>
-      <div style="margin-top: 16px;">
-        <el-button class="el-button--noborder--configuration prompt-button" @click="addstepdata" v-if="stepData.length != 0">+ 添加步骤</el-button>
-        <RespnseConfiguration ref="RespnseConfigurationref" :stepDataprops="stepData"></RespnseConfiguration>
+      <div style="margin-top: 16px">
+        <el-button
+          class="el-button--noborder--configuration prompt-button"
+          @click="addstepdata"
+          v-if="stepData.length != 0"
+          >+ 添加步骤</el-button
+        >
+        <RespnseConfiguration
+          ref="RespnseConfigurationref"
+          :stepDataprops="stepData"
+        ></RespnseConfiguration>
       </div>
     </div>
     <!-- 输出格式配置 -->
     <div class="prompt-border">
       <div class="prompt-title">输出格式配置</div>
-      <div style="margin-top: 16px;">
-        <OutputConfiguration ref="OutputConfigurationref" :formatList="formatList" :outputvalue="outputvalue"></OutputConfiguration>
+      <div style="margin-top: 16px">
+        <OutputConfiguration
+          ref="OutputConfigurationref"
+          :formatList="formatList"
+          :outputvalue="outputvalue"
+        ></OutputConfiguration>
       </div>
     </div>
     <!-- 预览与测试 -->
-     <div class="propmt-border-colorful">
-        <div class="prompt-title" style="padding: 0 14px;">预览与测试</div>
-        <div style="margin-top: 16px;">
-          <PreviewTesting ref="PreviewTestingref" :prompttext="prompttextvalue" :testquestion="testquestiontEmpty" :promptValue="promptValue"></PreviewTesting>
-        </div>
-     </div>
-     <div class="propmt-save"><el-button class="el-button--main" @click="SavePromptConfiguration"><span class="font_family icon-icon_save_b icon_dark" style="margin-right: 5px;"></span>保存生效</el-button></div>
-     <!-- 保存失败 -->
+    <div class="propmt-border-colorful">
+      <div class="prompt-title" style="padding: 0 14px">预览与测试</div>
+      <div style="margin-top: 16px">
+        <PreviewTesting
+          ref="PreviewTestingref"
+          :prompttext="prompttextvalue"
+          :testquestion="testquestiontEmpty"
+          :promptValue="promptValue"
+        ></PreviewTesting>
+      </div>
+    </div>
+    <div class="propmt-save">
+      <el-button class="el-button--main" @click="SavePromptConfiguration"
+        ><span class="font_family icon-icon_save_b icon_dark" style="margin-right: 5px"></span
+        >保存生效</el-button
+      >
+    </div>
+    <!-- 保存失败 -->
     <el-dialog v-model="UnableSaveVisible" width="480">
       <div>{{ missingmessage }} missing.</div>
       <div>Please complete all required fields.</div>
@@ -294,19 +386,15 @@ onMounted(() => {
         </div>
       </template>
       <template #header>
-        <div class="cancel_header">
-          <span class="iconfont_icon iconfont_warning">
-            <svg class="iconfont icon_danger" aria-hidden="true">
-              <use xlink:href="#icon-icon_fail_fill_b"></use>
-            </svg>
-          </span>
+        <div class="unable-save-dialog-header">
+          <span class="font_family icon-icon_fail_fill_b"></span>
           Unable to Save
         </div>
       </template>
     </el-dialog>
     <!-- 保存成功 -->
     <el-dialog v-model="SaveedVisible" width="320" style="height: 212px">
-      <div style="text-align: center"><el-image :src="submitsucessful" style="width: 64px;" /></div>
+      <div style="text-align: center"><el-image :src="submitsucessful" style="width: 64px" /></div>
       <div style="text-align: center; margin-top: 20px">Saved successfully</div>
     </el-dialog>
   </div>
@@ -339,7 +427,9 @@ onMounted(() => {
   border-radius: 12px;
   background-clip: padding-box, border-box;
   background-origin: padding-box, border-box;
-  background-image: linear-gradient(to bottom, var(--color-mode), var(--color-mode)), linear-gradient(to bottom, #FF7500, #8112FF);
+  background-image:
+    linear-gradient(to bottom, var(--color-mode), var(--color-mode)),
+    linear-gradient(to bottom, #ff7500, #8112ff);
   margin-bottom: 8px;
   padding: 13px 0;
 }
@@ -405,7 +495,7 @@ onMounted(() => {
   padding: 16px;
   margin-bottom: 8px;
   border-radius: 6px;
-  line-height: 21px; 
+  line-height: 21px;
   white-space: break-spaces;
 }
 .diaolog-flex {
@@ -457,9 +547,9 @@ onMounted(() => {
   border-color: var(--color-btn-default-bg-hover);
   background-color: var(--color-btn-default-bg-hover);
   color: var(--color-theme);
-    span {
-      color: var(--color-theme);
-    }
+  span {
+    color: var(--color-theme);
+  }
 }
 .cancel_header {
   font-size: 18px;
@@ -475,4 +565,16 @@ onMounted(() => {
   display: flex;
   align-items: center;
 }
-</style>
+.unable-save-dialog-header {
+  display: flex;
+  align-items: center;
+  .font_family {
+    width: 16px;
+    height: 16px;
+    border-radius: 24px;
+    margin-right: 4px;
+    font-size: 14px;
+    color: #b53039;
+  }
+}
+</style>

src/views/PromptConfiguration/src/components/OutputConfiguration.vue

@@ -7,7 +7,7 @@ const isEdit = ref(false)
 const UnableSaveVisible = ref(false)
 const outputoptions = ref([
   {
-    label:'JSON',
+    label: 'JSON',
     value: 'JSON'
   }
 ])
@@ -35,7 +35,7 @@ interface TypeItem {
   requirements: string
 }
 interface Props {
-  formatList: TypeItem []
+  formatList: TypeItem[]
   outputvalue: String
 }
 const props = withDefaults(defineProps<Props>(), {})
@@ -46,7 +46,7 @@ watch(
   () => props.formatList,
   (current) => {
     formatList.value = current
-    if(formatList.value == null) {
+    if (formatList.value == null) {
       formatList.value = []
     }
   }
@@ -90,16 +90,27 @@ const handleclickcancel = () => {
 
 // 保存字段
 const handleclicksave = () => {
-  if(isEdit.value) {
-    const target = formatList.value.find(obj => obj.name === temporaryname.value);
-    if(EditName.value == '' || EditDataType.value == '' || Editdescribe.value == '' || isSelectedvalue.value == '') {
+  if (isEdit.value) {
+    const target = formatList.value.find((obj) => obj.name === temporaryname.value)
+    if (
+      EditName.value == '' ||
+      EditDataType.value == '' ||
+      Editdescribe.value == '' ||
+      isSelectedvalue.value == ''
+    ) {
       UnableSaveVisible.value = true
     } else {
-      if(isSelectedvalue.value == '有条件必填' && Condition.value == '') {
+      if (isSelectedvalue.value == '有条件必填' && Condition.value == '') {
         UnableSaveVisible.value = true
       } else {
-        const newData = { name: EditName.value, type: EditDataType.value, describe: Editdescribe.value, selecttype: isSelectedvalue.value,requirements: Condition.value }
-        if (target) Object.assign(target, newData);
+        const newData = {
+          name: EditName.value,
+          type: EditDataType.value,
+          describe: Editdescribe.value,
+          selecttype: isSelectedvalue.value,
+          requirements: Condition.value
+        }
+        if (target) Object.assign(target, newData)
         EditName.value = ''
         EditDataType.value = ''
         Editdescribe.value = ''
@@ -110,16 +121,27 @@ const handleclicksave = () => {
       }
     }
   } else {
-      if(formatList.value.some(obj => Object.values(obj).includes(EditName.value))) {
-        const target = formatList.value.find(obj => obj.name === EditName.value);
-        if(EditName.value == '' || EditDataType.value == '' || Editdescribe.value == '' || isSelectedvalue.value == '') {
+    if (formatList.value.some((obj) => Object.values(obj).includes(EditName.value))) {
+      const target = formatList.value.find((obj) => obj.name === EditName.value)
+      if (
+        EditName.value == '' ||
+        EditDataType.value == '' ||
+        Editdescribe.value == '' ||
+        isSelectedvalue.value == ''
+      ) {
         UnableSaveVisible.value = true
       } else {
-        if(isSelectedvalue.value == '有条件必填' && Condition.value == '') {
+        if (isSelectedvalue.value == '有条件必填' && Condition.value == '') {
           UnableSaveVisible.value = true
         } else {
-          const newData = { name: EditName.value, type: EditDataType.value, describe: Editdescribe.value, selecttype: isSelectedvalue.value,requirements: Condition.value }
-          if (target) Object.assign(target, newData);
+          const newData = {
+            name: EditName.value,
+            type: EditDataType.value,
+            describe: Editdescribe.value,
+            selecttype: isSelectedvalue.value,
+            requirements: Condition.value
+          }
+          if (target) Object.assign(target, newData)
           EditName.value = ''
           EditDataType.value = ''
           Editdescribe.value = ''
@@ -130,10 +152,15 @@ const handleclicksave = () => {
         }
       }
     } else {
-      if(EditName.value == '' || EditDataType.value == '' || Editdescribe.value == '' || isSelectedvalue.value == '') {
+      if (
+        EditName.value == '' ||
+        EditDataType.value == '' ||
+        Editdescribe.value == '' ||
+        isSelectedvalue.value == ''
+      ) {
         UnableSaveVisible.value = true
       } else {
-        if(isSelectedvalue.value == '有条件必填' && Condition.value == '') {
+        if (isSelectedvalue.value == '有条件必填' && Condition.value == '') {
           UnableSaveVisible.value = true
         } else {
           formatList.value.push({
@@ -163,13 +190,11 @@ const handelclickdelete = (val: any) => {
 </script>
 <template>
   <div>
-    <div class="output-title">
-      <span class="stars_red">*</span>输出格式类型
-    </div>
+    <div class="output-title"><span class="stars_red">*</span>输出格式类型</div>
     <el-select
       v-model="outputvalue"
       placeholder="Select"
-      style="width: 480px;margin: 4px 0 16px 0;"
+      style="width: 480px; margin: 4px 0 16px 0"
     >
       <el-option
         v-for="item in outputoptions"
@@ -179,9 +204,11 @@ const handelclickdelete = (val: any) => {
       />
     </el-select>
     <div>
-      <el-button class="el-button--noborder--configuration prompt-button" @click="handleaddclick">+ 添加字段</el-button>
+      <el-button class="el-button--noborder--configuration prompt-button" @click="handleaddclick"
+        >+ 添加字段</el-button
+      >
     </div>
-    <div class="empty" v-if="formatList.length == 0 ">
+    <div class="empty" v-if="formatList.length == 0">
       <div>
         <div><img :src="addimg" width="100" /></div>
         <el-button @click="handleaddclick" class="el-button--main">+ 添加字段</el-button>
@@ -194,16 +221,29 @@ const handelclickdelete = (val: any) => {
           <div class="output-item-type">{{ item.type }}</div>
         </div>
         <div class="output-flex-left">
-          <el-button class="el-button--blue" style="height: 24px;width: 24px;" @click="handelclickedit(item)">
+          <el-button
+            class="el-button--blue"
+            style="height: 24px; width: 24px"
+            @click="handelclickedit(item)"
+          >
             <span class="font_family icon-icon_edit_b icon_dark"></span>
           </el-button>
-          <el-button @click="handelclickdelete(item)" class="el-button--blue" style="height: 24px;width: 24px;">
+          <el-button
+            @click="handelclickdelete(item)"
+            class="el-button--blue"
+            style="height: 24px; width: 24px"
+          >
             <span class="font_family icon-icon_delete_b icon_dark"></span>
           </el-button>
         </div>
       </div>
       <div class="output-describe">{{ item.describe }}</div>
-      <div class="output-select">{{ item.selecttype }}<span class="output-select" v-if="item.selecttype === '有条件必填'">({{item.requirements}})</span></div>
+      <div class="output-select">
+        {{ item.selecttype
+        }}<span class="output-select" v-if="item.selecttype === '有条件必填'"
+          >({{ item.requirements }})</span
+        >
+      </div>
     </div>
     <el-dialog
       v-model="editdialogVisible"
@@ -213,19 +253,15 @@ const handelclickdelete = (val: any) => {
       :close-on-click-modal="false"
       class="dialog-edit"
       width="480"
-    > 
+    >
       <div class="dialog-title"><span class="stars_red">*</span>字段名称</div>
-      <el-input v-model="EditName" style="margin-bottom: 16px;"></el-input>
+      <el-input v-model="EditName" style="margin-bottom: 16px"></el-input>
       <div class="dialog-title"><span class="stars_red">*</span>数据类型</div>
-      <el-input v-model="EditDataType" style="margin-bottom: 16px;"></el-input>
+      <el-input v-model="EditDataType" style="margin-bottom: 16px"></el-input>
       <div class="dialog-title"><span class="stars_red">*</span>描述</div>
-      <el-input type="textarea" v-model="Editdescribe" style="margin-bottom: 16px;"></el-input>
+      <el-input type="textarea" v-model="Editdescribe" style="margin-bottom: 16px"></el-input>
       <div class="dialog-title"><span class="stars_red">*</span>是否必填</div>
-      <el-select
-        v-model="isSelectedvalue"
-        placeholder="Select"
-        style="margin-bottom: 16px;"
-      >
+      <el-select v-model="isSelectedvalue" placeholder="Select" style="margin-bottom: 16px">
         <el-option
           v-for="item in isSelected"
           :key="item.value"
@@ -233,15 +269,19 @@ const handelclickdelete = (val: any) => {
           :value="item.value"
         />
       </el-select>
-      <div v-if="isSelectedvalue === '有条件必填'" class="dialog-title"><span class="stars_red">*</span>条件要求</div>
-      <el-input v-if="isSelectedvalue === '有条件必填'"  v-model="Condition"></el-input>
+      <div v-if="isSelectedvalue === '有条件必填'" class="dialog-title">
+        <span class="stars_red">*</span>条件要求
+      </div>
+      <el-input v-if="isSelectedvalue === '有条件必填'" v-model="Condition"></el-input>
       <template #footer>
         <div class="dialog-footer">
           <el-button class="dialog_button" type="default" @click="handleclickcancel">
-            <span class="font_family icon-icon_return_b icon_dark" style="margin-right: 5px;"></span>Cancel
+            <span class="font_family icon-icon_return_b icon_dark" style="margin-right: 5px"></span
+            >Cancel
           </el-button>
           <el-button class="el-button--dark dialog_button" @click="handleclicksave">
-            <span class="font_family icon-icon_save_b icon_dark" style="margin-right: 5px;"></span>Save
+            <span class="font_family icon-icon_save_b icon_dark" style="margin-right: 5px"></span
+            >Save
           </el-button>
         </div>
       </template>
@@ -260,12 +300,8 @@ const handelclickdelete = (val: any) => {
         </div>
       </template>
       <template #header>
-        <div class="cancel_header">
-          <span class="iconfont_icon iconfont_warning">
-            <svg class="iconfont icon_danger" aria-hidden="true">
-              <use xlink:href="#icon-icon_fail_fill_b"></use>
-            </svg>
-          </span>
+        <div class="dialog-header">
+          <span class="font_family icon-icon_fail_fill_b"></span>
           Unable to Save
         </div>
       </template>
@@ -323,7 +359,7 @@ const handelclickdelete = (val: any) => {
   margin: 6px 0;
 }
 .output-select {
-  color:var(--color-output-select-text);
+  color: var(--color-output-select-text);
   font-size: 12px;
 }
 :deep(.dialog_button) {
@@ -331,11 +367,23 @@ const handelclickdelete = (val: any) => {
   height: 40px;
 }
 :deep(.el-dialog) {
-  box-shadow: 2px 2px 12px 0px rgba(0, 0, 0, 0.25) ;
+  box-shadow: 2px 2px 12px 0px rgba(0, 0, 0, 0.25);
 }
 .dialog-title {
   color: var(--color-neutral-2);
   font-size: 12px;
   margin-bottom: 8px;
 }
-</style>
+.dialog-header {
+  display: flex;
+  align-items: center;
+  .font_family {
+    width: 16px;
+    height: 16px;
+    border-radius: 24px;
+    margin-right: 4px;
+    font-size: 14px;
+    color: #b53039;
+  }
+}
+</style>