refactor: 系统水印优化等

2025-11-02 07:20:24 +08:00 · 2023-10-14 16:00:16 +08:00
parent 77ae6e3bab
commit a4d3a4627a
12 changed files with 71 additions and 76 deletions
--- a/README.md
+++ b/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 统一管理操作平台**

 ### 开发语言与主要框架

--- a/build_release.sh
+++ b/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"
--- a/mayfly_go_web/src/App.vue
+++ b/mayfly_go_web/src/App.vue
@@ -1,21 +1,24 @@
 <template>
-    <el-watermark
-        :zIndex="10000000"
-        :width="200"
-        v-if="themeConfig.isWartermark"
-        :font="{ color: 'rgba(180, 180, 180, 0.5)' }"
-        :content="state.watermarkContent"
-    >
-        <router-view v-show="themeConfig.lockScreenTime !== 0" />
-    </el-watermark>
-    <router-view v-if="!themeConfig.isWartermark" v-show="themeConfig.lockScreenTime !== 0" />
+    <div class="h100">
+        <el-watermark
+            :zIndex="10000000"
+            :width="210"
+            v-if="themeConfig.isWatermark"
+            :font="{ color: 'rgba(180, 180, 180, 0.5)' }"
+            :content="themeConfig.watermarkText"
+            class="h100"
+        >
+            <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" />
-    <Setings ref="setingsRef" v-show="themeConfig.lockScreenTime !== 0" />
+        <LockScreen v-if="themeConfig.isLockScreen" />
+        <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 { useWartermark } from '@/common/sysconfig';
-import { useUserInfo } from '@/store/userInfo';
+import { useWatermark } from '@/common/sysconfig';

 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;
-    if (!userinfo) {
-        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);
-    }
+    themeConfigStores.setWatermarkUser();
+    themeConfigStores.setWatermarkNowTime();
 };

 let refreshWatermarkTimeInterval: any = null;
@@ -111,8 +91,8 @@ const refreshWatermarkTime = () => {
        clearInterval(refreshWatermarkTimeInterval);
    }
    refreshWatermarkTimeInterval = setInterval(() => {
-        if (themeConfig.value.isWartermark) {
-            state.watermarkContent[1] = dateFormat2('yyyy-MM-dd HH:mm:ss', new Date());
+        if (themeConfig.value.isWatermark) {
+            themeConfigStores.setWatermarkNowTime();
        } else {
            clearInterval(refreshWatermarkTimeInterval);
        }
--- a/mayfly_go_web/src/common/sysconfig.ts
+++ b/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> {
-    const value = await getConfigValue(UseWartermarkConfigKey);
+export async function useWatermark(): Promise<any> {
+    const value = await getConfigValue(UseWatermarkConfigKey);
    if (!value) {
        return {
            isUse: true,
--- a/mayfly_go_web/src/store/themeConfig.ts
+++ b/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,
-            // 额外水印文案
-            wartermarkText: '',
+            isWatermark: false,
+            // 水印文案数组，0->用户信息  1->当前时间 2->额外信息
+            watermarkText: ['', '', ''],

            /* 其它设置
            ------------------------------- */
@@ -154,8 +156,26 @@ export const useThemeConfig = defineStore('themeConfig', {
        },
        // 设置水印配置信息
        setWatermarkConfig(useWatermarkConfig: any) {
-            this.themeConfig.isWartermark = useWatermarkConfig.isUse;
-            this.themeConfig.wartermarkText = useWatermarkConfig.content;
+            this.themeConfig.watermarkText = [];
+            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());
        },
    },
 });
--- a/mayfly_go_web/src/types/pinia.d.ts
+++ b/mayfly_go_web/src/types/pinia.d.ts
@@ -40,8 +40,8 @@ declare interface ThemeConfigState {
        isDark: boolean;
        isGrayscale: boolean;
        isInvert: boolean;
-        isWartermark: boolean;
-        wartermarkText: string;
+        isWatermark: boolean;
+        watermarkText: Array<string>;
        tagsStyle: string;
        animation: string;
        columnsAsideStyle: string;
--- a/mayfly_go_web/src/views/error/401.vue
+++ b/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;
                }
--- a/mayfly_go_web/src/views/error/404.vue
+++ b/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;
                }
--- a/mayfly_go_web/src/views/login/component/AccountLogin.vue
+++ b/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);
 };

--- a/mayfly_go_web/src/views/login/index.vue
+++ b/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 { storeToRefs } from 'pinia';
+import { ref, defineAsyncComponent, onMounted, reactive } from 'vue';
 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();
 });

--- a/server/resources/data/mayfly-go.sqlite
+++ b/server/resources/data/mayfly-go.sqlite
--- a/server/resources/script/sql/v1.5.3.sql
+++ b/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';