archives/src/views/config/index.vue

<template>
    <HcCard actionSize="lg" scrollbar>
        <div class="text-lg font-medium mb-4">主题模式<span class="text-sm text-slate-400 font-light ml-4">深色模式还未适配，暂不推荐使用深色模式</span></div>
        <div class="hc-theme-box mb-8">
            <el-radio-group v-model="UserTheme" @change="ThemeTabsUpdate">
                <template v-for="item in ThemeDatas">
                    <div class="item" :class="UserTheme === item?.key ? 'active' : ''">
                        <div class="demo" :class="item?.key">
                            <img :src="ImgTheme" alt="">
                        </div>
                        <div class="action" @click="ThemeConfigClick(item)">
                            <el-radio :label="item?.key" size="large" class="size-xl">{{item?.name}}</el-radio>
                        </div>
                    </div>
                </template>
            </el-radio-group>
        </div>

        <div class="text-lg font-medium mb-4">主题色</div>
        <div class="hc-theme-box color-box mb-4">
            <template v-for="(item,index) in ColorConfigData">
                <div class="item" :class="UserColorNmae === item.name ? 'active' : ''" v-if="index < 5">
                    <div class="demo" :class="`bg-${item.name}`">
                        <img :src="ImgColor" alt="">
                    </div>
                    <div class="action" @click="ColorConfigClick(item)">
                        <el-radio v-model="UserColorNmae" :label="item?.name" size="large" class="size-xl">{{item?.label}}</el-radio>
                    </div>
                </div>
            </template>
        </div>
        <div class="hc-theme-box color-box mb-8">
            <template v-for="(item,index) in ColorConfigData">
                <div class="item" :class="UserColorNmae === item.name ? 'active' : ''" v-if="index >= 5">
                    <div class="demo" :class="`bg-${item.name}`">
                        <img :src="ImgColor" alt="">
                    </div>
                    <div class="action" @click="ColorConfigClick(item)">
                        <el-radio v-model="UserColorNmae" :label="item?.name" size="large" class="size-xl">{{item?.label}}</el-radio>
                    </div>
                </div>
            </template>
        </div>

        <div class="text-lg font-medium mb-2">首页背景</div>
        <div class="hc-theme-box home-bg-box mb-8">
            <template v-for="item in homeConfigData">
                <div class="item mt-2" :class="HomeTheme.name === item?.name ? 'active' : ''" @click="homeConfigClick(item)">
                    <img :src="item.bg" alt="" crossOrigin="anonymous">
                </div>
            </template>
        </div>

        <div class="text-lg font-medium mb-4">截图设置</div>
        <div class="hc-screenshot-box mb-4">
            <div class="item">
                <div class="label">WebRtc：</div>
                <el-popover placement="top-start" trigger="hover" :width="400">
                    <template #reference>
                        <el-switch v-model="webRtcVal" size="large" active-value="1" inactive-value="0" @change="webRtcUpdate"/>
                    </template>
                    <div>
                        <div>是否启用WebRtc方式截图，WebRtc方式不会错版，但需要同意授权，调用的是浏览器的共享屏幕API (可能在某些浏览器上，不支持)。</div>
                        <div class="mt-2 mb-2">不启用WebRtc时，采用 html2canvas 实现截图，但支持的并不好，容易出现错版。</div>
                        <div>但目前市面上，网页截图的仅有这两种方案，推荐使用第三方截图来手动上传图片。</div>
                    </div>
                </el-popover>
            </div>
            <div class="item">
                <div class="label">全屏截图：</div>
                <el-popover placement="top-start" trigger="hover" :width="180">
                    <template #reference>
                        <el-switch v-model="fullScreenVal" size="large" active-value="1" inactive-value="0" @change="fullScreenUpdate"/>
                    </template>
                    <div>单击截全屏的启用状态</div>
                </el-popover>
            </div>
        </div>
        <template #action>
            <el-popover placement="top" trigger="hover" :width="180">
                <template #reference>
                    <el-button type="primary" hc-btn :loading="saveLoading" @click="SaveConfigClick">
                        <HcIcon name="save"/>
                        <span>保存配置</span>
                    </el-button>
                </template>
                <div>下次登录后，会自动同步，并启用当前配置</div>
            </el-popover>
            <el-popover placement="top-start" trigger="hover" :width="180">
                <template #reference>
                    <el-button hc-btn @click="CancelClick">
                        <HcIcon name="arrow-go-back"/>
                        <span>取消</span>
                    </el-button>
                </template>
                <div>如果没有保存配置，下次登录后，将恢复到上次保存的配置</div>
            </el-popover>
        </template>
    </HcCard>
</template>

<script setup>
import {ref,nextTick} from "vue";
import {useRouter, useRoute} from 'vue-router'
import {useAppStore} from "~src/store";
import themeData from '~src/config/theme';
import {userConfigSave} from "~api/other";
import ImgTheme from "~src/assets/images/theme.png";
import ImgColor from "~src/assets/images/color.png";
import {useOsTheme} from '~src/plugins/useOsTheme';
import {setElementMainColor} from "js-fast-way"
//初始变量
const router = useRouter()
const useRoutes = useRoute()
const useAppState = useAppStore()

//配置变量
const UserTheme = ref(useAppState.getTheme)
const UserColor = ref(useAppState.getColor)
const HomeTheme = ref(useAppState.getHomeTheme)
const webRtcVal = ref(useAppState.getShotWebRtc)
const fullScreenVal = ref(useAppState.getFullScreen)
const UserColorNmae = ref(UserColor.value?.name || 'green')

//颜色
const ColorConfigData = ref(themeData.color)

//更改主色调
const ColorConfigClick = (item) => {
    useAppState.setColor(item)
    UserColorNmae.value = item?.name
    //设置主色调
    setElementMainColor(item?.color)
    nextTick(() => {
        UserColor.value = item
    })
}

//更改主题设置
const ThemeDatas = ref([
    {key: 'auto', name: '跟随系统'},
    {key: 'light', name: '浅色模式'},
    {key: 'dark', name: '深色模式'}
])
const ThemeConfigClick = (item) => {
    ThemeTabsUpdate(item?.key)
}
const ThemeTabsUpdate = (val) => {
    UserTheme.value = val
    useAppState.setTheme(val)
    if (val === 'auto') {
        useAppState.setThemeVal(useOsTheme().value)
    } else {
        useAppState.setThemeVal(val)
    }
    let colorName = UserColorNmae.value || 'green'
    document.documentElement.setAttribute('class',`${val} color-${colorName}`)
}

//更改首页主题
const homeConfigData = ref(themeData.home)
const homeConfigClick = (item) => {
    HomeTheme.value = item
    useAppState.setHomeTheme(item)
}

//更改截图方式
const webRtcUpdate = (val) => {
    useAppState.setShotWebRtc(val)
}
//更改全屏截图方式
const fullScreenUpdate = (val) => {
    useAppState.setFullScreen(val)
}

//取消配置
const CancelClick = () => {
    router.back()
}

//保存配置
const saveLoading = ref(false)
const SaveConfigClick = async () => {
    //发起请求
    saveLoading.value = true
    const { error, code } = await userConfigSave({
        theme: UserTheme.value,
        color: UserColorNmae.value,
        homeTheme: HomeTheme.value?.name,
        shotWebRtc: webRtcVal.value,
        fullScreen: fullScreenVal.value
    })
    //判断状态
    saveLoading.value = false
    if (!error && code === 200) {
        window?.$message?.success('保存成功')
        router.back()
    } else {
        window?.$message?.error('保存失败，请稍后再试')
    }
}
</script>

<style lang="scss" scoped>
@import "../../styles/view/config.scss";
</style>

<style lang="scss">
.hc-theme-box .item .action .el-radio.el-radio--large {
    height: 40px;
}
</style>