系统设置

src/components/PageTitle/iconTitle.vue

+<script setup lang="ts" name="IconTitle">
+import { computed, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+const route = useRoute()
+
+const emit = defineEmits(['back'])
+
+const props = withDefaults(defineProps<{
+  icon?: string
+  title?: string
+}>(), {
+  icon: ''
+})
+</script>
+
+<template>
+  <div class="pageTitle">
+    <img class="icon" :src="props.icon" alt="">
+    <span>{{ props.title }}</span>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.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;
+  }
+}
+</style>

src/main.js

@@ -46,6 +46,8 @@ import ImagePreview from "@/components/ImagePreview"
 import DictTag from '@/components/DictTag'
 // PageTitle组件
 import PageTitle from './components/PageTitle/index.vue'
+// iconTitle组件
+import IconTitle from './components/PageTitle/iconTitle.vue'
 // Modal组件
 import Modal from './components/Modal/index.vue';
 // 分割线标题
@@ -75,6 +77,7 @@ app.component('ImagePreview', ImagePreview)
 app.component('RightToolbar', RightToolbar)
 app.component('Editor', Editor)
 app.component('PageTitle', PageTitle)
+app.component('IconTitle', IconTitle)
 app.component('Modal', Modal)
 app.component('DividerTitle', DividerTitle)
 app.component('ItemTitle', ItemTitle)

src/views/systemConfig/IPTheChange/index.vue

@@ -2,6 +2,7 @@
 import { onMounted, ref, toRefs } from 'vue'
 import FormBox from './modules/formBox.vue'
 import { show } from '@/api/systemConfig/ipTheChange.js'
+import pageIcon from '@/assets/images/systemConfig/systemParamPage.png'
 
 const ipList = ref([])
 
@@ -23,10 +24,7 @@ onMounted(() => {
 <template>
   <div class="app-container scroller">
     <div class="app-container__body">
-      <div class="pageTitle">
-        <img class="icon" src="@/assets/images/systemConfig/systemParamPage.png" alt="">
-        <span>IP设置</span>
-      </div>
+      <IconTitle :icon="pageIcon" title="IP设置" />
       <div class="box">
         <div class="line"></div>
         <div class="content">
@@ -46,22 +44,6 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .app-container__body {
-  .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;

src/views/systemConfig/License/index.vue

@@ -3,6 +3,7 @@ import { onMounted, ref, toRefs } from 'vue'
 import { ElMessage } from "element-plus";
 import CustomUpload from "@/components/CustomUpload/index.vue";
 import { getlicinfo, uploadlic } from '@/api/systemConfig/license.js'
+import pageIcon from '@/assets/images/systemConfig/systemParamPage.png'
 
 const infoData = ref({})
 const uploadLoading = ref(false)
@@ -51,10 +52,7 @@ onMounted(() => {
 <template>
   <div class="app-container scroller">
     <div class="app-container__body">
-      <div class="pageTitle">
-        <img class="icon" src="@/assets/images/systemConfig/systemParamPage.png" alt="">
-        <span>License管理</span>
-      </div>
+      <IconTitle :icon="pageIcon" title="License管理" />
       <div class="box">
         <div class="line"></div>
         <div class="content">
@@ -110,25 +108,6 @@ onMounted(() => {
 <style lang="scss" scoped>
 .app-container__body {
 
-  // align-items: center;
-  // justify-content: center;
-  .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-direction: column;

src/views/systemConfig/SystemBackups/index.vue

@@ -3,6 +3,7 @@ import { onMounted, ref, toRefs, onBeforeUnmount } from 'vue'
 import { ElMessage } from "element-plus";
 import CustomUpload from "@/components/CustomUpload/index.vue";
 import { importSql, exportSql } from '@/api/systemConfig/systemBackups.js'
+import pageIcon from '@/assets/images/systemConfig/systemParamPage.png'
 
 const uploadLoading = ref(false);
 
@@ -45,10 +46,7 @@ const exportSqlFunc = async () => {
 <template>
   <div class="app-container scroller">
     <div class="app-container__body">
-      <div class="pageTitle">
-        <img class="icon" src="@/assets/images/systemConfig/systemParamPage.png" alt="">
-        <span>系统备份</span>
-      </div>
+      <IconTitle :icon="pageIcon" title="系统备份" />
       <div class="box">
         <div class="updata">
           <img src="@/assets/images/systemConfig/systemBackups.png" alt="" />
@@ -70,22 +68,6 @@ const exportSqlFunc = async () => {
 
 <style lang="scss" scoped>
 .app-container__body {
-  .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-direction: column;

src/views/systemConfig/SystemConsole/index.vue

@@ -2,6 +2,7 @@
 import { onMounted, ref, toRefs, onBeforeUnmount } from 'vue'
 import { ElMessage } from "element-plus";
 import { command, commandlog } from '@/api/systemConfig/systemConsole.js'
+import pageIcon from '@/assets/images/systemConfig/systemParamPage.png'
 
 const enterValue = ref('') // 命令内容
 const requestOptions = ref('') // 返回结果
@@ -42,10 +43,7 @@ onBeforeUnmount(() => {
 <template>
   <div class="app-container scroller">
     <div class="app-container__body">
-      <div class="pageTitle">
-        <img class="icon" src="@/assets/images/systemConfig/systemParamPage.png" alt="">
-        <span>系统控制台</span>
-      </div>
+      <IconTitle :icon="pageIcon" title="系统控制台" />
       <div class="box">
         <div class="line"></div>
         <div class="content">
@@ -66,22 +64,6 @@ onBeforeUnmount(() => {
 
 <style lang="scss" scoped>
 .app-container__body {
-  .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-direction: column;

src/views/systemConfig/SystemLogManage/index.vue

@@ -2,6 +2,7 @@
 import { onMounted, ref, reactive } from 'vue'
 import { ElMessage } from "element-plus";
 import { query, save, querylog, download } from '@/api/systemConfig/systemLogManage.js'
+import pageIcon from '@/assets/images/systemConfig/systemParamPage.png'
 
 const monthOptions = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]) // 保留月份
 const keepMonth = ref('') // 月份值
@@ -84,10 +85,7 @@ onMounted(() => {
 <template>
   <div class="app-container scroller">
     <div class="app-container__body">
-      <div class="pageTitle">
-        <img class="icon" src="@/assets/images/systemConfig/systemParamPage.png" alt="">
-        <span>系统日志管理</span>
-      </div>
+      <IconTitle :icon="pageIcon" title="系统日志管理" />
       <div class="box">
         <div class="line"></div>
         <div class="content">
@@ -124,22 +122,6 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .app-container__body {
-  .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-direction: column;

src/views/systemConfig/SystemParam/index.vue

 <script setup name="License">
 import { onMounted, ref, toRefs } from 'vue'
 import { queryAll } from '@/api/systemConfig/systemParam.js'
+import pageIcon from '@/assets/images/systemConfig/systemParamPage.png'
 
 const collapseData = ref([])
 const activeName = ref(1)
@@ -29,10 +30,7 @@ onMounted(() => {
 <template>
   <div class="app-container scroller">
     <div class="app-container__body">
-      <div class="pageTitle">
-        <img class="icon" src="@/assets/images/systemConfig/systemParamPage.png" alt="">
-        <span>系统参数</span>
-      </div>
+      <IconTitle :icon="pageIcon" title="系统参数" />
       <div class="box">
         <div class="line"></div>
         <div class="content">
@@ -56,22 +54,6 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .app-container__body {
-  .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-direction: column;