add dark mode

add audit conn log

src/layout/components/setting/index.vue

@@ -1,8 +1,21 @@
 <template>
   <div class="setting">
-    <div>
+    <div class="menu-item">
       <el-button size="small" @click="changeLang" style="width: 100px">{{ T('ChangeLang') }}</el-button>
     </div>
+    <div class="menu-item">
+        <el-switch
+            v-model="isDark"
+            style="--el-switch-on-color:#18222c"
+            >
+          <template #active-action>
+           <el-icon><Moon/></el-icon>
+          </template>
+          <template #inactive-action>
+            <el-icon ><Sunny color="#000"/></el-icon>
+          </template>
+        </el-switch>
+    </div>
     <el-dropdown class="menu-item">
       <div class="title">
         <!--        <el-image class="avatar" :src="user.avatar"></el-image>-->
@@ -30,6 +43,8 @@
   import changePwdDialog from '@/components/changePwdDialog.vue'
   import { ref } from 'vue'
   import { T } from '@/utils/i18n'
+  import { useDark } from "@vueuse/core"
+  import {Sunny, Moon} from '@element-plus/icons'
 
   const userStore = useUserStore()
   const user = userStore
@@ -47,6 +62,8 @@
   const changeLang = () => {
     appStore.changeLang()
   }
+  const isDark = useDark();
+  // const toggleDark = useToggle(isDark)
 </script>
 
 <style lang="scss" scoped>
@@ -55,7 +72,9 @@
   display: flex;
   align-items: center;
   justify-content: space-around;
-
+  .menu-item {
+    margin-left: 10px;
+  }
   .title {
     color: #fff;
     display: flex;