规则管理

src/views/assetLibrary/list.vue

@@ -156,10 +156,7 @@ onMounted(() => {
 <template>
   <div class="app-container scroller">
     <div class="app-container__body" style="padding: 30px 0 10px 0;">
-      <div class="pageTitle">
-        <img class="icon" :src="img.pageTitle" alt="">
-        <span>资产库</span>
-      </div>
+      <IconTitle :icon="img.pageTitle" title="资产库" />
       <query-form ref="QueryFormRef" v-model="queryParams" @query="onQuery" @reset="onReset" @add="handleAdd" />
       <div class="mainBox">
         <div class="mainBox-left">
@@ -202,23 +199,6 @@ onMounted(() => {
 </template>
 
 <style lang="scss" scoped>
-.pageTitle {
-  margin-bottom: 30px;
-  display: flex;
-  align-items: center;
-  font-size: 16px;
-  font-weight: 500;
-  letter-spacing: 0px;
-  line-height: 22px;
-  color: rgba(53, 64, 79, 1);
-
-  .icon {
-    margin-right: 3px;
-    width: 21px;
-    height: 21px;
-  }
-}
-
 .mainBox {
   flex: 1;
   width: 100%;

src/views/ruleConfig/Algorithm/index.vue

@@ -2,10 +2,10 @@
 import { onMounted, ref, toRefs } from 'vue'
 import { Split } from 'view-ui-plus';
 import { ElMessage } from "element-plus";
-
 import CollapseView from '@/components/CollapseView/index.vue'
 import formModule from './modules/formModule.vue'
 import ModalPop from "@/components/EditPop/ModalPop.vue"
+import pageIcon from '@/assets/images/ruleConfig/algorithmPage.png'
 
 import { query, del } from '@/api/ruleConfig/algorithm.js'
 
@@ -147,10 +147,7 @@ onMounted(() => {
 <template>
   <div class="app-container scroller">
     <div class="app-container__body">
-      <div class="pageTitle">
-        <img class="icon" src="@/assets/images/ruleConfig/algorithmPage.png" alt="">
-        <span>脱敏算法</span>
-      </div>
+      <IconTitle :icon="pageIcon" title="脱敏算法" />
       <div class="box">
         <div class="left">
           <el-input v-model="searchValue" placeholder="脱敏规则搜索" style="width: 369px;margin-bottom: 15px;">
@@ -198,22 +195,6 @@ onMounted(() => {
 <style lang="scss" scoped>
 .app-container__body {
   padding: 20px 0 0 0;
-  .pageTitle {
-    margin-bottom: 20px;
-    display: flex;
-    align-items: center;
-    font-size: 16px;
-    font-weight: 500;
-    letter-spacing: 0px;
-    line-height: 22px;
-    color: rgba(53, 64, 79, 1);
-
-    .icon {
-      margin-right: 6px;
-      width: 16px;
-      height: 16px;
-    }
-  }
   .box {
     display: flex;
     flex: 1;

src/views/ruleConfig/CalculationMethod/index.vue

 <script setup name="CalculationMethod">
 import { onMounted, ref, toRefs } from 'vue'
 import { ElMessage } from "element-plus";
-
 import CollapseView from '@/components/CollapseView/index.vue'
 import formModule from './modules/formModule.vue'
 import ModalPop from "@/components/EditPop/ModalPop.vue"
+import pageIcon from '@/assets/images/ruleConfig/algorithmPage.png'
 
 import { query, queryenc, del } from '@/api/ruleConfig/calculationMethod'
 
@@ -159,10 +159,7 @@ onMounted(() => {
 <template>
   <div class="app-container scroller">
     <div class="app-container__body">
-      <div class="pageTitle">
-        <img class="icon" src="@/assets/images/ruleConfig/algorithmPage.png" alt="">
-        <span>加密算法</span>
-      </div>
+      <IconTitle :icon="pageIcon" title="加密算法" />
       <div class="box">
         <div class="left">
           <el-input v-model="queryParams.dataarea" placeholder="加密算法搜索" style="width: 369px;margin-bottom: 15px;">
@@ -211,22 +208,6 @@ onMounted(() => {
 <style lang="scss" scoped>
 .app-container__body {
   padding: 20px 0 0 0;
-  .pageTitle {
-    margin-bottom: 20px;
-    display: flex;
-    align-items: center;
-    font-size: 16px;
-    font-weight: 500;
-    letter-spacing: 0px;
-    line-height: 22px;
-    color: rgba(53, 64, 79, 1);
-
-    .icon {
-      margin-right: 6px;
-      width: 16px;
-      height: 16px;
-    }
-  }
   .box {
     display: flex;
     flex: 1;

src/views/ruleConfig/Dictionary/index.vue

@@ -2,11 +2,11 @@
 import { onMounted, ref, toRefs } from 'vue'
 import { Split } from 'view-ui-plus';
 import { ElMessage } from "element-plus";
-
 import ModalPop from "@/components/EditPop/ModalPop.vue"
 import AddClass from './modules/AddClass.vue' // 分类
 import AddValue from './modules/AddValue.vue' // 值
 import uploadModule from './modules/uploadModule.vue' // 上传模块
+import pageIcon from '@/assets/images/ruleConfig/dictionaryPage.png'
 
 import { dictinaryTypes, query, delDictionaryType, delValue, exportExcel } from '@/api/ruleConfig/dictionary'
 
@@ -223,10 +223,7 @@ onMounted(() => {
 <template>
   <div class="app-container scroller">
     <div class="app-container__body">
-      <div class="pageTitle">
-        <img class="icon" src="@/assets/images/ruleConfig/dictionaryPage.png" alt="">
-        <span>知识库</span>
-      </div>
+      <IconTitle :icon="pageIcon" title="知识库" />
       <div class="box">
         <div class="left">
           <div style="width: 100%;flex: 1;overflow: auto;">
@@ -308,22 +305,6 @@ onMounted(() => {
 <style lang="scss" scoped>
 .app-container__body {
   padding: 20px 0 0 0;
-  .pageTitle {
-    margin-bottom: 20px;
-    display: flex;
-    align-items: center;
-    font-size: 16px;
-    font-weight: 500;
-    letter-spacing: 0px;
-    line-height: 22px;
-    color: rgba(53, 64, 79, 1);
-
-    .icon {
-      margin-right: 6px;
-      width: 16px;
-      height: 16px;
-    }
-  }
   .box {
     display: flex;
     width: 100%;

src/views/ruleConfig/Discover/index.vue

@@ -5,7 +5,7 @@ import CollapseView from '@/components/CollapseView/index.vue'
 import AddDomain from './modules/AddDomain.vue' // 数据域表单
 import AddRules from './modules/AddRules.vue' // 发现规则表单
 import ModalPop from "@/components/EditPop/ModalPop.vue"
-
+import pageIcon from '@/assets/images/ruleConfig/DiscoverPage.png'
 import { query, delDataArea, delRule, setdefault } from '@/api/ruleConfig/discover'
 
 const fatherIndex = ref(0) // 父级索引
@@ -232,10 +232,7 @@ onMounted(() => {
 <template>
   <div class="app-container scroller">
     <div class="app-container__body">
-      <div class="pageTitle">
-        <img class="icon" src="@/assets/images/ruleConfig/DiscoverPage.png" alt="">
-        <span>发现规则</span>
-      </div>
+      <IconTitle :icon="pageIcon" title="发现规则" />
       <div class="box">
         <div class="left">
           <div class="searchBox">
@@ -289,22 +286,6 @@ onMounted(() => {
 <style lang="scss" scoped>
 .app-container__body {
   padding: 20px 0 0 0;
-  .pageTitle {
-    margin-bottom: 20px;
-    display: flex;
-    align-items: center;
-    font-size: 16px;
-    font-weight: 500;
-    letter-spacing: 0px;
-    line-height: 22px;
-    color: rgba(53, 64, 79, 1);
-
-    .icon {
-      margin-right: 6px;
-      width: 16px;
-      height: 16px;
-    }
-  }
   .box {
     display: flex;
     flex: 1;

src/views/ruleConfig/Encryption/index.vue

@@ -7,6 +7,7 @@ import AddEncryption from './modules/AddEncryption.vue' // 加密表单
 import AddKey from './modules/AddKey.vue' // 密钥表单
 import ModalPop from "@/components/EditPop/ModalPop.vue"
 import UploadModule from './modules/UploadModule.vue' // 上传模块
+import pageIcon from '@/assets/images/ruleConfig/encryptionPage.png'
 
 import { query, initEncryptionTypeList, getDictinaryTypes, deleteType, delSecretKey, exportExcel, importfile } from '@/api/ruleConfig/encryption'
 
@@ -242,10 +243,7 @@ onMounted(() => {
 <template>
   <div class="app-container scroller">
     <div class="app-container__body">
-      <div class="pageTitle">
-        <img class="icon" src="@/assets/images/ruleConfig/encryptionPage.png" alt="">
-        <span>加密规则</span>
-      </div>
+      <IconTitle :icon="pageIcon" title="加密规则" />
       <div class="box">
         <div class="left">
           <div class="searchBox">
@@ -305,22 +303,6 @@ onMounted(() => {
 <style lang="scss" scoped>
 .app-container__body {
   padding: 20px 0 0 0;
-  .pageTitle {
-    margin-bottom: 20px;
-    display: flex;
-    align-items: center;
-    font-size: 16px;
-    font-weight: 500;
-    letter-spacing: 0px;
-    line-height: 22px;
-    color: rgba(53, 64, 79, 1);
-
-    .icon {
-      margin-right: 6px;
-      width: 16px;
-      height: 16px;
-    }
-  }
   .box {
     display: flex;
     flex: 1;

src/views/ruleConfig/keyManagement/index.vue

@@ -2,10 +2,7 @@
   <div class="app-container scroller">
     <div class="app-container__body">
       <!-- 标题 -->
-      <div class="pageTitle">
-        <img class="icon" src="@/assets/images/ruleConfig/keyManagementPage.png" alt="">
-        <span>密钥管理</span>
-      </div>
+      <IconTitle :icon="pageIcon" title="密钥管理" />
 
       <!-- 密管选择区域 -->
       <div class="section-content">
@@ -66,6 +63,8 @@ import ParamsConfig from './components/ParamsConfig.vue';
 import UploadDialog from './components/UploadDialog.vue';
 import { testData } from '@/constants/keyConfigDefaultData.js';
 import { ElMessageBox } from 'element-plus';
+import pageIcon from '@/assets/images/ruleConfig/keyManagementPage.png'
+
 const keyManageType = ref('');
 const isEnabled = ref(false);
 const keyManageData = ref([]);
@@ -508,23 +507,6 @@ onMounted(() => {
 <style lang="scss" scoped>
 .app-container__body {
   padding: 20px 0 0 0;
-  .pageTitle {
-    margin-bottom: 20px;
-    display: flex;
-    align-items: center;
-    font-size: 16px;
-    font-weight: 500;
-    letter-spacing: 0px;
-    line-height: 22px;
-    color: rgba(53, 64, 79, 1);
-
-    .icon {
-      margin-right: 6px;
-      width: 16px;
-      height: 16px;
-    }
-  }
-
   .section-content {
     margin-bottom: 20px;
     .form-item {