密钥管理

src/views/ruleConfig/keyManagement/index.vue

 <template>
-  <div class="key-management-wrapper">
-    <div class="key-management">
+  <div class="app-container scroller">
+    <div class="app-container__body">
       <!-- 标题 -->
-      <div class="title">
-        <i class="el-icon-lock"></i>
-        密钥管理
+      <div class="pageTitle">
+        <img class="icon" src="@/assets/images/ruleConfig/keyManagementPage.png" alt="">
+        <span>密钥管理</span>
       </div>
 
       <!-- 密管选择区域 -->
-      <div class="section-card">
-        <div class="section-title">密管选择区域:</div>
       <div class="section-content">
         <div class="form-item">
           <span class="label">密管方式</span>
-            <el-select 
-              v-model="keyManageType" 
-              placeholder="请选择" 
-              style="width: 200px;padding-right: 10px;"
+          <el-select v-model="keyManageType" placeholder="请选择" style="width: 300px;height: 40px;margin-right: 27px;"
             @change="handleKeyManageChange">
-              <el-option
-                v-for="item in keyManageData"
-                :key="item.typeid"
-                :label="item.typename"
-                :value="item.typeid">
+            <el-option v-for="item in keyManageData" :key="item.typeid" :label="item.typename" :value="item.typeid">
             </el-option>
           </el-select>
           <el-checkbox v-model="isEnabled" @change="handleEnableChange">是否启用</el-checkbox>
@@ -31,64 +22,46 @@
           </span>
         </div>
       </div>
-      </div>
 
       <!-- 参数配置区域 -->
       <div class="section-card">
-        <div class="section-title">参数配置区域:</div>
+        <div class="line"></div>
         <div class="section-content">
-          <params-config
-            v-model="configParams"
-            :type="getConfigType"
-            :editable="isEditing"
-            @download-template="handleDownloadTemplate"
-            @upload-config="handleUploadConfig"
-            @upload-cert="handleUploadCert"
-            @generate-params="generateParams"
-          />
-        </div>
+          <params-config v-model="configParams" :type="getConfigType" :editable="isEditing"
+            @download-template="handleDownloadTemplate" @upload-config="handleUploadConfig"
+            @upload-cert="handleUploadCert" @generate-params="generateParams" />
         </div>
-
         <!-- 底部按钮 -->
         <div class="footer">
           <template v-if="isEditing">
-          <el-button @click="handleCancel">取消</el-button>
-          <el-button @click="handleTest">测试</el-button>
-          <el-button type="primary" @click="handleConfirm">确定</el-button>
+            <el-button style="width: 80px;" @click="handleCancel">取消</el-button>
+            <el-button style="width: 80px;" type="primary" @click="handleConfirm">确定</el-button>
+            <el-button style="width: 80px;background: rgba(255, 141, 26, 1);border: 1px solid rgba(255, 141, 26, 1);" type="primary" @click="handleTest">测试</el-button>
           </template>
           <template v-else>
-          <el-button type="primary" @click="isEditing = true">编辑</el-button>
+            <el-button type="primary" style="width: 80px;" @click="isEditing = true">编辑</el-button>
           </template>
         </div>
       </div>
+    </div>
     <!-- 上传配置文件弹层组件 -->
-    <UploadDialog
-      v-model:visible="uploadDialogVisible"
-      :title="'上传配置文件'"
-      :loading="uploadLoading"
-      :fileList="uploadFileList"
-      @file-change="handleFileChange"
-      @confirm="handleUploadConfirm"
-      @cancel="handleUploadCancel"
-    />
+    <UploadDialog v-model:visible="uploadDialogVisible" :title="'上传配置文件'" :loading="uploadLoading"
+      :fileList="uploadFileList" @file-change="handleFileChange" @confirm="handleUploadConfirm"
+      @cancel="handleUploadCancel" />
 
     <!-- 上传证书弹层组件 -->
-    <UploadDialog
-      v-model:visible="uploadCertDialogVisible"
-      :title="'上传证书'"
-      :loading="uploadCertLoading"
-      :fileList="uploadCertFileList"
-      @file-change="handleCertFileChange"
-      @confirm="handleCertUploadConfirm"
-      @cancel="handleCertUploadCancel"
-    />
+    <UploadDialog v-model:visible="uploadCertDialogVisible" :title="'上传证书'" :loading="uploadCertLoading"
+      :fileList="uploadCertFileList" @file-change="handleCertFileChange" @confirm="handleCertUploadConfirm"
+      @cancel="handleCertUploadCancel" />
   </div>
 </template>
 
 <script setup>
 import { ref, reactive, computed, onMounted } from 'vue';
-import { queryKeys, showKeyParams, editIsUse, testCallKey, saveKeyParams, uploadHsmConfig, createParam,
-   downloadHsmConfig, downloadCloudHsmConfig, downloadSanWeiConfig, downloadZdxlzjceConfig, uploadSanWeiConfig } from '@/api/ruleConfig/keyManagement.js';
+import {
+  queryKeys, showKeyParams, editIsUse, testCallKey, saveKeyParams, uploadHsmConfig, createParam,
+  downloadHsmConfig, downloadCloudHsmConfig, downloadSanWeiConfig, downloadZdxlzjceConfig, uploadSanWeiConfig
+} from '@/api/ruleConfig/keyManagement.js';
 import ParamsConfig from './components/ParamsConfig.vue';
 import UploadDialog from './components/UploadDialog.vue';
 import { testData } from '@/constants/keyConfigDefaultData.js';
@@ -311,9 +284,9 @@ const handleUploadConfirm = async () => {
     }
 
     //如果量子加密机配置
-     if (keyManageType.value === '9'){
+    if (keyManageType.value === '9') {
       formData.append('filePath', configParams.value.zdxlzjcedir);
-     }else{
+    } else {
       // 如果是其他类型的密管配置
       formData.append('filePath', configParams.value.hsmfiledir);
     }
@@ -386,7 +359,7 @@ const handleDownloadTemplate = async () => {
       });
       return;
     }
-    if(keyManageType.value === '2'){
+    if (keyManageType.value === '2') {
       // 加密机的模版
       const res = await downloadHsmConfig();
       const blob = new Blob([res], { type: 'application/octet-stream' });
@@ -400,7 +373,7 @@ const handleDownloadTemplate = async () => {
     }
 
     // 云加密机的模版
-    if(keyManageType.value === '3'){
+    if (keyManageType.value === '3') {
       const res = await downloadCloudHsmConfig();
       const blob = new Blob([res], { type: 'application/octet-stream' });
       const link = document.createElement('a');
@@ -414,7 +387,7 @@ const handleDownloadTemplate = async () => {
 
 
     // 三未加密机的模版
-    if(keyManageType.value === '8'){
+    if (keyManageType.value === '8') {
       const res = await downloadSanWeiConfig();
       const blob = new Blob([res], { type: 'application/octet-stream' });
       const link = document.createElement('a');
@@ -427,7 +400,7 @@ const handleDownloadTemplate = async () => {
     }
 
     // 中电信密管的模版
-    if(keyManageType.value === '9'){
+    if (keyManageType.value === '9') {
       const res = await downloadZdxlzjceConfig();
       const blob = new Blob([res], { type: 'application/octet-stream' });
       const link = document.createElement('a');
@@ -533,60 +506,48 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.key-management-wrapper {
-  .key-management {
-    padding: 20px;
-    .title {
-      font-size: 18px;
-      color: #333;
-      margin-bottom: 20px;
-      
-      i {
-        color: #409EFF;
-        margin-right: 8px;
-      }
-    }
-
-    .section-card {
-      background: #fff;
-      border-radius: 4px;
-      padding: 20px;
+.app-container__body {
+  padding: 20px 0 0 0;
+  .pageTitle {
     margin-bottom: 20px;
-      box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
-
-      .section-title {
-        color: #409EFF;
-        font-size: 14px;
-        margin-bottom: 20px;
-        position: relative;
-        padding-left: 12px;
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    font-weight: 500;
+    letter-spacing: 0px;
+    line-height: 22px;
+    color: rgba(53, 64, 79, 1);
 
-        &:before {
-          content: '';
-          width: 4px;
-          height: 14px;
-          background: #409EFF;
-          position: absolute;
-          left: 0;
-          top: 50%;
-          transform: translateY(-50%);
+    .icon {
+      margin-right: 6px;
+      width: 16px;
+      height: 16px;
     }
   }
 
   .section-content {
+    margin-bottom: 20px;
     .form-item {
       display: flex;
       align-items: center;
+      :deep(.el-select__wrapper){
+        height: 40px;
+      }
 
       .label {
         width: 100px;
         margin-right: 10px;
+        font-size: 14px;
+        color: rgba(53, 64, 79, 1);
       }
 
       .tip {
-            color: #f56c6c;
-            margin-left: 10px;
-            font-size: 12px;
+        margin-left: 34px;
+        font-size: 14px;
+        font-weight: 400;
+        letter-spacing: 0px;
+        line-height: 22px;
+        color: rgba(253, 84, 81, 1);
       }
     }
 
@@ -596,12 +557,30 @@ onMounted(() => {
       }
     }
   }
+  .section-card{
+    flex: 1;
+    border-radius: 3px;
+    background: rgba(255, 255, 255, 1);
+    .line {
+        width: 100%;
+        height: 2px;
+        border-radius: 5px 5px 0px 0px;
+        background: linear-gradient(
+          90deg,
+          rgba(33, 103, 217, 1) 0%,
+          rgba(17, 200, 250, 1) 34.03%,
+          rgba(33, 103, 217, 1) 64.58%,
+          rgba(48, 128, 255, 1) 100%
+        );
+      }
+      .section-content{
+        padding: 48px 96px 0 96px;
+      }
   }
 
   .footer {
     text-align: center;
     margin-top: 20px;
   }
-  }
 }
 </style>
\ No newline at end of file