perf(views): 优化“网关协议列表管理”页面，支持新增协议

src/views/gateway-protocol/GatewayProtocol.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue';
+import { computed, onMounted, ref, useTemplateRef } from 'vue';
 import { message, Modal } from 'ant-design-vue';
 
+import ModalGuidance from '@/layout/ModalGuidance.vue';
 import SvgIcon from '@/components/SvgIcon.vue';
 import { useRequest } from '@/hooks/request';
 import { t } from '@/i18n';
 import { deleteProtocolBaseInfo, getProtocolList } from '@/api';
 
+import SetupProtocol from '../setup-protocol/SetupProtocol.vue';
+
 import type { ColumnType } from 'ant-design-vue/es/table';
 import type { PageParams, ProtocolBaseInfo } from '@/types';
 
@@ -77,11 +80,7 @@ const handleSearch = () => {
 };
 
 const handleAdd = () => {
-  console.log('Add new item');
-};
-
-const handleImportTemplate = () => {
-  console.log('Import template');
+  modalGuidanceRef.value?.showView();
 };
 
 const handleEdit = (record: ProtocolBaseInfo) => {
@@ -110,6 +109,8 @@ const handlePageChange = (page: number, pageSize: number) => {
   pageParams.value.pageSize = pageSize;
   getProtocolData();
 };
+
+const modalGuidanceRef = useTemplateRef('modalGuidance');
 </script>
 
 <template>
@@ -131,7 +132,6 @@ const handlePageChange = (page: number, pageSize: number) => {
         <SvgIcon name="plus" />
         {{ $t('common.addNew') }}
       </AButton>
-      <AButton @click="handleImportTemplate">{{ $t('common.templateImport') }}</AButton>
     </div>
     <ATable
       class="protocol-table"
@@ -156,6 +156,9 @@ const handlePageChange = (page: number, pageSize: number) => {
         </span>
       </template>
     </ATable>
+    <ModalGuidance ref="modalGuidance" @finish="getProtocolData">
+      <SetupProtocol />
+    </ModalGuidance>
   </div>
 </template>