perf(components): 优化“协议内容”组件协议参数表格样式

1. 添加协议识别结果及其样式

src/constants/index.ts

@@ -23,6 +23,15 @@ export const enum ProtocolConfigMethod {
   ManuallyCreate,
 }
 
+/**
+ * 协议识别结果
+ */
+export const enum ProtocolRecognitionResult {
+  Success = '识别成功',
+  Unrecognized = '无法识别',
+  MultipleResults = '多个结果',
+}
+
 /**
  * 字典编码
  */

src/views/setup-protocol/ProtocolContent.vue

@@ -8,7 +8,7 @@ import { useDictData } from '@/hooks/dict-data';
 import { useRequest } from '@/hooks/request';
 import { t } from '@/i18n';
 import { batchDeleleProtocolParam, getProtocolParamList } from '@/api';
-import { DictCode, ProtocolType } from '@/constants';
+import { DictCode, ProtocolRecognitionResult, ProtocolType } from '@/constants';
 
 import CustomParams from './CustomParams.vue';
 import SelectStandardParams from './SelectStandardParams.vue';
@@ -484,7 +484,23 @@ defineExpose({
         :width="180"
         fixed="left"
       />
-      <ATableColumn :title="$t('setupProtocol.protocolParamFields.result')" data-index="result" :width="110" />
+      <ATableColumn :title="$t('setupProtocol.protocolParamFields.result')" data-index="recognizeResult" :width="110">
+        <template #default="{ record }">
+          <div
+            :class="[
+              'protocol-recognize-result',
+              {
+                'protocol-recognize-success': record.recognizeResult === ProtocolRecognitionResult.Success,
+                'protocol-recognize-unrecognized': record.recognizeResult === ProtocolRecognitionResult.Unrecognized,
+                'protocol-recognize-multiple-results':
+                  record.recognizeResult === ProtocolRecognitionResult.MultipleResults,
+              },
+            ]"
+          >
+            {{ record.recognizeResult }}
+          </div>
+        </template>
+      </ATableColumn>
       <ATableColumn
         class="table-column-item-required"
         :title="$t('setupProtocol.protocolParamFields.platformParamName')"
@@ -707,4 +723,32 @@ defineExpose({
     }
   }
 }
+
+.protocol-recognize-result {
+  height: 24px;
+  padding: 2px 8px;
+  font-size: 12px;
+  line-height: 20px;
+  text-align: center;
+  border: 1px solid var(--antd-color-border);
+  border-radius: 4px;
+
+  &.protocol-recognize-success {
+    color: #52c41a;
+    background: #f6ffed;
+    border-color: #b7eb8f;
+  }
+
+  &.protocol-recognize-unrecognized {
+    color: #f56c6c;
+    background: #fff1f0;
+    border-color: #ffa39e;
+  }
+
+  &.protocol-recognize-multiple-results {
+    color: var(--antd-color-primary);
+    background: var(--antd-color-primary-opacity-10);
+    border-color: var(--antd-color-primary-opacity-60);
+  }
+}
 </style>