refactor: 系统水印优化等

README.md

@@ -13,7 +13,7 @@
     <img src="https://img.shields.io/docker/pulls/mayflygo/mayfly-go.svg?label=docker%20pulls&color=fac858" alt="docker pulls"/>
   </a>
   <a href="https://github.com/golang/go" target="_blank">
-    <img src="https://img.shields.io/badge/Golang-1.20%2B-yellow.svg" alt="golang"/>
+    <img src="https://img.shields.io/badge/Golang-1.21%2B-yellow.svg" alt="golang"/>
   </a>
   <a href="https://cn.vuejs.org" target="_blank">
     <img src="https://img.shields.io/badge/Vue-3.x-green.svg" alt="vue">
@@ -22,7 +22,7 @@
 
 ### 介绍
 
-web 版 **linux(终端[终端回放] 文件 脚本 进程)、数据库（mysql postgres）、redis(单机 哨兵 集群)、mongo 统一管理操作平台**
+web 版 **linux(终端[终端回放] 文件 脚本 进程 计划任务)、数据库（mysql postgres）、redis(单机 哨兵 集群)、mongo 统一管理操作平台**
 
 ### 开发语言与主要框架
 

build_release.sh

@@ -74,12 +74,13 @@ function build() {
     # fi
 
     if [ "${copyDocScript}" == "1" ] ; then
-        echo_green "拷贝脚本等资源文件[config.yml.example、mayfly-go.sql、readme.txt、startup.sh、shutdown.sh]"
+        echo_green "拷贝脚本等资源文件[config.yml.example、mayfly-go.sql、mayfly-go.sqlite、readme.txt、startup.sh、shutdown.sh]"
         cp ${server_folder}/config.yml.example ${toFolder}
         cp ${server_folder}/readme.txt ${toFolder}
         cp ${server_folder}/resources/script/startup.sh ${toFolder}
         cp ${server_folder}/resources/script/shutdown.sh ${toFolder}
         cp ${server_folder}/resources/script/sql/mayfly-go.sql ${toFolder}
+        cp ${server_folder}/resources/data/mayfly-go.sqlite ${toFolder}
     fi
 
     echo_yellow ">>>>>>>>>>>>>>>>>>>${os}-${arch}打包构建完成<<<<<<<<<<<<<<<<<<<<\n"

mayfly_go_web/src/App.vue

@@ -1,21 +1,24 @@
 <template>
-    <el-watermark
+    <div class="h100">
-        :zIndex="10000000"
+        <el-watermark
-        :width="200"
+            :zIndex="10000000"
-        v-if="themeConfig.isWartermark"
+            :width="210"
-        :font="{ color: 'rgba(180, 180, 180, 0.5)' }"
+            v-if="themeConfig.isWatermark"
-        :content="state.watermarkContent"
+            :font="{ color: 'rgba(180, 180, 180, 0.5)' }"
-    >
+            :content="themeConfig.watermarkText"
-        <router-view v-show="themeConfig.lockScreenTime !== 0" />
+            class="h100"
-    </el-watermark>
+        >
-    <router-view v-if="!themeConfig.isWartermark" v-show="themeConfig.lockScreenTime !== 0" />
+            <router-view v-show="themeConfig.lockScreenTime !== 0" />
+        </el-watermark>
+        <router-view v-if="!themeConfig.isWatermark" v-show="themeConfig.lockScreenTime !== 0" />
 
-    <LockScreen v-if="themeConfig.isLockScreen" />
+        <LockScreen v-if="themeConfig.isLockScreen" />
-    <Setings ref="setingsRef" v-show="themeConfig.lockScreenTime !== 0" />
+        <Setings ref="setingsRef" v-show="themeConfig.lockScreenTime !== 0" />
+    </div>
 </template>
 
 <script setup lang="ts" name="app">
-import { ref, reactive, onBeforeMount, onMounted, onUnmounted, nextTick, watch } from 'vue';
+import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '@/store/themeConfig';
@@ -24,9 +27,7 @@ import LockScreen from '@/layout/lockScreen/index.vue';
 import Setings from '@/layout/navBars/breadcrumb/setings.vue';
 import mittBus from '@/common/utils/mitt';
 import { getThemeConfig } from './common/utils/storage';
-import { dateFormat2 } from '@/common/utils/date';
+import { useWatermark } from '@/common/sysconfig';
-import { useWartermark } from '@/common/sysconfig';
-import { useUserInfo } from '@/store/userInfo';
 
 const setingsRef = ref();
 const route = useRoute();
@@ -34,32 +35,14 @@ const route = useRoute();
 const themeConfigStores = useThemeConfig();
 const { themeConfig } = storeToRefs(themeConfigStores);
 
-const state = reactive({
-    useWatermark: false,
-    watermarkContent: [] as any,
-});
-
 // 布局配置弹窗打开
 const openSetingsDrawer = () => {
     setingsRef.value.openDrawer();
 };
 
-// 设置初始化，防止刷新时恢复默认
-onBeforeMount(() => {
-    // 设置批量第三方 icon 图标
-    // setIntroduction.cssCdn();
-    // // 设置批量第三方 js
-    // setIntroduction.jsCdn();
-});
-
 // 页面加载时
 onMounted(() => {
     nextTick(() => {
-        // 是否开启水印
-        useWartermark().then((res) => {
-            themeConfigStores.setWatermarkConfig(res);
-        });
-
         // 监听布局配置弹窗点击打开
         mittBus.on('openSetingsDrawer', () => {
             openSetingsDrawer();
@@ -73,33 +56,30 @@ onMounted(() => {
 
             themeConfigStores.switchDark(tc.isDark);
         }
+
+        // 是否开启水印
+        useWatermark().then((res) => {
+            themeConfigStores.setWatermarkConfig(res);
+        });
     });
 });
 
 // 监听 themeConfig isWartermark配置文件的变化
 watch(
-    () => themeConfig.value.isWartermark,
+    () => themeConfig.value.isWatermark,
     (val) => {
         if (val) {
             setTimeout(() => {
                 setWatermarkContent();
                 refreshWatermarkTime();
-            }, 1500);
+            }, 500);
         }
     }
 );
 
 const setWatermarkContent = () => {
-    const userinfo = useUserInfo().userInfo;
+    themeConfigStores.setWatermarkUser();
-    if (!userinfo) {
+    themeConfigStores.setWatermarkNowTime();
-        themeConfig.value.isWartermark = false;
-        return;
-    }
-    state.watermarkContent = [`${userinfo.username}(${userinfo.name})`, dateFormat2('yyyy-MM-dd HH:mm:ss', new Date())];
-    // 存在额外水印信息，则追加水印信息
-    if (themeConfig.value.wartermarkText?.trim()) {
-        state.watermarkContent.push(themeConfig.value.wartermarkText);
-    }
 };
 
 let refreshWatermarkTimeInterval: any = null;
@@ -111,8 +91,8 @@ const refreshWatermarkTime = () => {
         clearInterval(refreshWatermarkTimeInterval);
     }
     refreshWatermarkTimeInterval = setInterval(() => {
-        if (themeConfig.value.isWartermark) {
+        if (themeConfig.value.isWatermark) {
-            state.watermarkContent[1] = dateFormat2('yyyy-MM-dd HH:mm:ss', new Date());
+            themeConfigStores.setWatermarkNowTime();
         } else {
             clearInterval(refreshWatermarkTimeInterval);
         }

mayfly_go_web/src/common/sysconfig.ts

@@ -3,7 +3,7 @@ import openApi from './openApi';
 // 登录是否使用验证码配置key
 const AccountLoginSecurity = 'AccountLoginSecurity';
 const UseLoginCaptchaConfigKey = 'UseLoginCaptcha';
-const UseWartermarkConfigKey = 'UseWartermark';
+const UseWatermarkConfigKey = 'UseWatermark';
 
 /**
  * 获取系统配置值
@@ -57,8 +57,8 @@ export async function useLoginCaptcha(): Promise<boolean> {
  *
  * @returns
  */
-export async function useWartermark(): Promise<any> {
+export async function useWatermark(): Promise<any> {
-    const value = await getConfigValue(UseWartermarkConfigKey);
+    const value = await getConfigValue(UseWatermarkConfigKey);
     if (!value) {
         return {
             isUse: true,

mayfly_go_web/src/store/themeConfig.ts

@@ -1,4 +1,6 @@
 import { defineStore } from 'pinia';
+import { dateFormat2 } from '@/common/utils/date';
+import { useUserInfo } from '@/store/userInfo';
 
 export const useThemeConfig = defineStore('themeConfig', {
     state: (): ThemeConfigState => ({
@@ -88,9 +90,9 @@ export const useThemeConfig = defineStore('themeConfig', {
             // 是否开启色弱模式
             isInvert: false,
             // 是否开启水印
-            isWartermark: false,
+            isWatermark: false,
-            // 额外水印文案
+            // 水印文案数组，0->用户信息  1->当前时间 2->额外信息
-            wartermarkText: '',
+            watermarkText: ['', '', ''],
 
             /* 其它设置
             ------------------------------- */
@@ -154,8 +156,26 @@ export const useThemeConfig = defineStore('themeConfig', {
         },
         // 设置水印配置信息
         setWatermarkConfig(useWatermarkConfig: any) {
-            this.themeConfig.isWartermark = useWatermarkConfig.isUse;
+            this.themeConfig.watermarkText = [];
-            this.themeConfig.wartermarkText = useWatermarkConfig.content;
+            this.themeConfig.isWatermark = useWatermarkConfig.isUse;
+            if (!useWatermarkConfig.isUse) {
+                return;
+            }
+            // 索引2为用户自定义水印信息
+            this.themeConfig.watermarkText[2] = useWatermarkConfig.content;
+        },
+        // 设置水印用户信息
+        setWatermarkUser(del: boolean = false) {
+            const userinfo = useUserInfo().userInfo;
+            let desc = '';
+            if (!del && userinfo && userinfo.username) {
+                desc = `${userinfo.username}(${userinfo.name})`;
+            }
+            this.themeConfig.watermarkText[0] = desc;
+        },
+        // 设置水印时间为当前时间
+        setWatermarkNowTime() {
+            this.themeConfig.watermarkText[1] = dateFormat2('yyyy-MM-dd HH:mm:ss', new Date());
         },
     },
 });

mayfly_go_web/src/types/pinia.d.ts

@@ -40,8 +40,8 @@ declare interface ThemeConfigState {
         isDark: boolean;
         isGrayscale: boolean;
         isInvert: boolean;
-        isWartermark: boolean;
+        isWatermark: boolean;
-        wartermarkText: string;
+        watermarkText: Array<string>;
         tagsStyle: string;
         animation: string;
         columnsAsideStyle: string;

mayfly_go_web/src/views/error/401.vue

@@ -64,7 +64,7 @@ export default {
                 }
                 .left-item-title {
                     font-size: 20px;
-                    color: #333333;
+                    // color: #333333;
                     margin: 15px 0 5px 0;
                     animation-delay: 0.1s;
                 }

mayfly_go_web/src/views/error/404.vue

@@ -62,7 +62,7 @@ export default {
                 }
                 .left-item-title {
                     font-size: 20px;
-                    color: #333333;
+                    // color: #333333;
                     margin: 15px 0 5px 0;
                     animation-delay: 0.1s;
                 }

mayfly_go_web/src/views/login/component/AccountLogin.vue

@@ -136,7 +136,7 @@ import { saveToken, saveUser } from '@/common/utils/storage';
 import { formatAxis } from '@/common/utils/format';
 import openApi from '@/common/openApi';
 import { RsaEncrypt } from '@/common/rsa';
-import { getAccountLoginSecurity, getLdapEnabled, useWartermark } from '@/common/sysconfig';
+import { getAccountLoginSecurity, getLdapEnabled } from '@/common/sysconfig';
 import { letterAvatar } from '@/common/utils/string';
 import { useUserInfo } from '@/store/userInfo';
 import QrcodeVue from 'qrcode.vue';
@@ -409,8 +409,8 @@ const toIndex = async () => {
         // 关闭 loading
         state.loading.signIn = true;
         ElMessage.success(`${currentTimeInfo}，欢迎回来！`);
-        // 水印信息配置
+        // 水印设置用户信息
-        storesThemeConfig.setWatermarkConfig(await useWartermark());
+        storesThemeConfig.setWatermarkUser();
     }, 300);
 };
 

mayfly_go_web/src/views/login/index.vue

@@ -45,8 +45,7 @@
 </template>
 
 <script setup lang="ts" name="loginIndex">
-import { ref, defineAsyncComponent, onMounted, reactive, computed } from 'vue';
+import { ref, defineAsyncComponent, onMounted, reactive } from 'vue';
-import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '@/store/themeConfig';
 import logoMini from '@/assets/image/logo.svg';
 import loginBgImg from '@/assets/image/login-bg-main.svg';
@@ -61,7 +60,6 @@ const loginForm = ref<{ loginResDeal: (data: any) => void } | null>(null);
 
 // 定义变量内容
 const storesThemeConfig = useThemeConfig();
-const { themeConfig } = storeToRefs(storesThemeConfig);
 
 const state = reactive({
     tabsActiveName: 'account',
@@ -72,13 +70,8 @@ const state = reactive({
     },
 });
 
-// 获取布局配置信息
-const getThemeConfig = computed(() => {
-    return themeConfig.value;
-});
-
 onMounted(async () => {
-    getThemeConfig.value.isWartermark = false;
+    storesThemeConfig.setWatermarkUser(true);
     state.oauth2LoginConfig = await openApi.oauth2LoginConfig();
 });
 

server/resources/script/sql/v1.5.3.sql

@@ -2,6 +2,7 @@ UPDATE `t_sys_config`
 SET
   `params` = '[{"name":"是否启用","model":"isUse","placeholder":"是否启用水印","options":"true,false"},{"name":"自定义信息","model":"content","placeholder":"额外添加的水印内容，可添加公司名称等"}]',
   `value` = '',
-  `remark` = '水印信息配置'
+  `remark` = '水印信息配置',
+  `key` = 'UseWatermark'
 WHERE
   `key` = 'UseWartermark';