update:优化协议界面

frontend/src/App.vue

 <template>
   <div class="common-layout">
-    <el-container>
+    <el-container style="height: 100vh">
       <el-header>
         <el-menu :default-active="activeIndex" class="el-menu-demo pl-20" mode="horizontal">
           <el-menu-item index="index">
@@ -61,4 +61,8 @@ onMounted(async () => {
 .el-header {
   --el-header-padding: 0 !important;
 }
+.el-main{
+  align-items: stretch;
+  background-color: #f4f4f4;
+}
 </style>

frontend/src/components/protocol/CollapseTable.vue

 <template>
   <div class="demo-collapse">
-    <div class="container">
+    <div class="containers">
       <div class="left">
         <div class="mr-4">协议版本</div>
         <el-select v-model="currentVersion" @change="changeProtocolVersion">
@@ -12,6 +12,7 @@
           >
           </el-option>
         </el-select>
+        <el-button @click="newVersionDialog = true" icon="plus" ml-4>新增版本</el-button>
       </div>
       <div class="right">
         <el-upload
@@ -25,25 +26,28 @@
           :on-success="uploadFileSuccess"
           :on-error="uploadFileFail"
           mr-4>
-          <el-button>上传原始文件</el-button>
+          <el-button icon="upload">上传原始文件</el-button>
         </el-upload>
-        <el-button v-else @click="downloadFile"> 下载原始文件 </el-button>
-        <el-button @click="newVersionDialog = true">新增版本</el-button>
-        <el-button @click="addCmdDialog = true">新增指令</el-button>
+        <el-button v-else @click="downloadFile" icon="download"> 下载原始文件 </el-button>
+
+        <el-button @click="addCmdDialog = true" icon="plus">新增指令</el-button>
         <!-- <el-button @click="deleteProtocol">删除该版本协议</el-button> -->
       </div>
     </div>
 
-    <div class="my-4">协议规范</div>
 
-    <el-collapse class="mt-4">
+    <el-collapse class="mt-4 collapse1" accordion>
       <el-collapse-item
+
         v-for="cmd in cmdInfos">
         <template #title>
-          <div>{{ cmd.cmd_name + ' ' + cmd.cmd_explain + ' ' + cmd.cmd_type }}</div>
+          <div style="width:100%; display: flex; justify-content: space-between">
+            <div ml-4>{{cmd.cmd_name + ' ' + cmd.cmd_explain + ' ' + cmd.cmd_type }}</div>
             <div>
-            <el-button type="danger" text @click="removeCmd(cmd.id)">删除</el-button>
+              <el-button text type="danger" icon="delete" ml-4 @click="removeCmd(cmd.id)">删除指令</el-button>
             </div>
+          </div>
+
         </template> 
         <protocol-table
           v-if="fieldInfos !== undefined" 
@@ -405,7 +409,8 @@ const addNewVersion = () => {
 </script>
 
 <style>
-.container {
+.containers {
+  width: 100%;
   display: flex;
   justify-content: space-between;
   /* 使内部元素平均分布 */
@@ -424,4 +429,18 @@ const addNewVersion = () => {
   display: flex;
   align-items: center;
   /* 垂直居中 */
-}</style>
+}
+.collapse1 .el-collapse-item__header {
+  background-color: white; /* 设置展开区域的头部颜色 */
+}
+.collapse1 .el-collapse-item__wrap {
+  border: 1px solid;
+  padding: 10px;
+}
+/*.collapse1 .el-collapse-item__wrap {*/
+/*  background-color: white; !* 设置展开区域的背景颜色 *!*/
+/*}*/
+/*.collapse1 .el-collapse-item:nth-child(even) .el-collapse-item__header {*/
+/*  background-color: red; !* 奇数项的背景颜色 *!*/
+/*}*/
+</style>

frontend/src/components/protocol/KitCollapse.vue

 <template>
   <div class="demo-collapse">
-    <el-collapse>
+    <el-collapse accordion class="collapse2">
       <el-collapse-item v-for="item in protocolNames">
         <template #title>
-          <div> {{ item }} </div>
-          <div> 
-            <el-button type="danger" text @click="removeProtocol(item)">删除</el-button>
+          <div style="display: flex;width: 100%;justify-content: space-between">
+            <div style="padding-left: 40px"> {{ item }} </div>
+            <div >
+              <el-button  text type="danger" icon="delete" @click="removeProtocol(item)">删除协议</el-button>
             </div>
+          </div>
+
         </template>
         <div style="margin: auto; width: 90%">
           <collapse-table
@@ -56,8 +59,7 @@ const removeProtocol = (protocolName: string) => {
 </script>
 
 <style>
-.el-collapse-item__header {
-  padding-left: 40px;
-  /* 调整合适的左边距值 */
+.collapse2 .el-collapse-item__wrap {
+  /*background-color: #f9f9f9; !* 设置展开区域的背景颜色 *!*/
 }
 </style>

frontend/src/components/protocol/ProtocolTable.vue

 <template>
-  <el-table :data="tableData" style="width: 100%">
+  <el-table :data="tableData"
+            :header-cell-style="{backgroundColor:'#eff3f8', 'text-align':'center',color: 'black'}"
+            border
+            :cell-style="{'text-align':'center'}"
+  >
     <el-table-column fixed prop="fieldname" label="字段名" style="width: 25%" />
     <el-table-column prop="fieldsize" label="字段长度" style="width: 25%" />
     <el-table-column prop="value" label="默认值" style="width: 25%" />
-    <el-table-column fixed="right" style="width: 25%">
+    <el-table-column fixed="right" label="操作" style="width: 25%">
       <template #default="{ row }">
-        <div style="display: flex;">
-          <el-button type="primary" @click="open('delete', row)">删除字段</el-button>
-          <el-button type="primary" @click="editField(row)">修改字段</el-button>
+        <div style="display: flex;justify-content: center">
+          <el-button icon="delete" @click="open('delete', row)">删除字段</el-button>
+          <el-button icon="edit" @click="editField(row)">修改字段</el-button>
         </div>
       </template>
     </el-table-column>
@@ -338,4 +342,17 @@ const dialogSubmit = (flag: boolean, data: CmdInfo) => {
   margin-bottom: 10px;
   /* 添加间距 */
 }
+
+.el-table {
+  border-collapse: collapse;
+}
+/*.el-table th, .el-table td {*/
+/*  border: 1px solid #ccc;*/
+/*}*/
+/*.el-table td.is-hover, .el-table td:hover {*/
+/*  border: 1px solid #409EFF;*/
+/*}*/
+
+
+
 </style>
\ No newline at end of file

frontend/src/views/protocol/protocol.vue

 <template>
   <div class="button-container">
-    <el-button class="ml-10" @click="isShow = true">新增协议</el-button>
+    <el-button  @click="isShow = true">新增协议</el-button>
     <!-- <div>
       <el-button>导出数据库</el-button>
     </div> -->