for_client/src/views/home/config.vue

<template>
    <HcNewCard action-size="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="UserTheme === item?.key ? 'active' : ''" class="item">
                        <div :class="item?.key" class="demo">
                            <img :src="ImgTheme" alt="">
                        </div>
                        <div class="action" @click="ThemeConfigClick(item)">
                            <el-radio :value="item?.key" class="size-xl" size="large">{{ 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 v-if="index < 5" :class="UserColorNmae === item.name ? 'active' : ''" class="item">
                    <div :class="`bg-${item.name}`" class="demo">
                        <img :src="ImgColor" alt="">
                    </div>
                    <div class="action" @click="ColorConfigClick(item)">
                        <el-radio v-model="UserColorNmae" :value="item?.name" class="size-xl" size="large">
                            {{ 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 v-if="index >= 5" :class="UserColorNmae === item.name ? 'active' : ''" class="item">
                    <div :class="`bg-${item.name}`" class="demo">
                        <img :src="ImgColor" alt="">
                    </div>
                    <div class="action" @click="ColorConfigClick(item)">
                        <el-radio v-model="UserColorNmae" :value="item?.name" class="size-xl" size="large">
                            {{ 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="HomeTheme.name === item?.name ? 'active' : ''" class="item mt-2"
                    @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 :width="400" placement="top-start" trigger="hover">
                    <template #reference>
                        <el-switch
                            v-model="webRtcVal" active-value="1" inactive-value="0" size="large"
                            @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 :width="180" placement="top-start" trigger="hover">
                    <template #reference>
                        <el-switch
                            v-model="fullScreenVal" active-value="1" inactive-value="0" size="large"
                            @change="fullScreenUpdate"
                        />
                    </template>
                    <div>单击截全屏的启用状态</div>
                </el-popover>
            </div>
        </div>

        <div class="text-lg font-medium mb-4">首页模式</div>
        <el-radio-group v-model="IndexModel" class="ml-4" @change="changeIndexModel">
            <el-radio value="1" size="large">精简模式</el-radio>
            <el-radio value="2" size="large">数据模式</el-radio>
        </el-radio-group>

        <template #action>
            <el-popover :width="180" placement="top" trigger="hover">
                <template #reference>
                    <el-button :loading="saveLoading" hc-btn type="primary" @click="SaveConfigClick">
                        <HcIcon name="save" />
                        <span>保存配置</span>
                    </el-button>
                </template>
                <div>下次登录后，会自动同步，并启用当前配置</div>
            </el-popover>
            <el-popover :width="180" placement="top-start" trigger="hover">
                <template #reference>
                    <el-button hc-btn @click="CancelClick">
                        <HcIcon name="arrow-go-back" />
                        <span>取消</span>
                    </el-button>
                </template>
                <div>如果没有保存配置，下次登录后，将恢复到上次保存的配置</div>
            </el-popover>
        </template>
    </HcNewCard>
</template>

<script setup>
import { nextTick, ref } from 'vue'
import { useRoute, useRouter } 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 { setElementMainColor } from 'js-fast-way'
import { useOsTheme } from 'hc-vue3-ui'

//初始变量
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 IndexModel = ref(useAppState.getIndexModel)

//颜色
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())
    } 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 changeIndexModel = (val) => {
    useAppState.setIndexModel(val)
}
//取消配置
const CancelClick = () => {
    router.back()
}
//首页模式
const radio1 = ref('1')
//保存配置
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,
        indexModel:IndexModel.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>