|
@@ -6,12 +6,15 @@
|
|
|
width="450px"
|
|
width="450px"
|
|
|
:ok-text="$t('sys.saveToBackend')"
|
|
:ok-text="$t('sys.saveToBackend')"
|
|
|
@cancel="close"
|
|
@cancel="close"
|
|
|
- unmountOnClose>
|
|
|
|
|
- <template #title>{{ $t('sys.backendSettingTitle') }}</template>
|
|
|
|
|
|
|
+ unmountOnClose
|
|
|
|
|
+ >
|
|
|
|
|
+ <template #title>{{ $t("sys.backendSettingTitle") }}</template>
|
|
|
<a-form :model="form" :auto-label-width="true">
|
|
<a-form :model="form" :auto-label-width="true">
|
|
|
<a-row class="flex justify-center mb-5">
|
|
<a-row class="flex justify-center mb-5">
|
|
|
<a-divider orientation="center"
|
|
<a-divider orientation="center"
|
|
|
- ><span class="title">{{ $t('sys.systemPrimaryColor') }}</span></a-divider
|
|
|
|
|
|
|
+ ><span class="title">{{
|
|
|
|
|
+ $t("sys.systemPrimaryColor")
|
|
|
|
|
+ }}</span></a-divider
|
|
|
>
|
|
>
|
|
|
<ColorPicker
|
|
<ColorPicker
|
|
|
theme="dark"
|
|
theme="dark"
|
|
@@ -19,23 +22,30 @@
|
|
|
:sucker-hide="true"
|
|
:sucker-hide="true"
|
|
|
:colors-default="defaultColorList"
|
|
:colors-default="defaultColorList"
|
|
|
@changeColor="changeColor"
|
|
@changeColor="changeColor"
|
|
|
- style="width: 218px" />
|
|
|
|
|
|
|
+ style="width: 218px"
|
|
|
|
|
+ />
|
|
|
</a-row>
|
|
</a-row>
|
|
|
<a-divider orientation="center"
|
|
<a-divider orientation="center"
|
|
|
- ><span class="title">{{ $t('sys.personalizedConfig') }}</span></a-divider
|
|
|
|
|
|
|
+ ><span class="title">{{
|
|
|
|
|
+ $t("sys.personalizedConfig")
|
|
|
|
|
+ }}</span></a-divider
|
|
|
>
|
|
>
|
|
|
<a-form-item :label="$t('sys.skin')" :help="$t('sys.skinHelp')">
|
|
<a-form-item :label="$t('sys.skin')" :help="$t('sys.skinHelp')">
|
|
|
{{ currentSkin }}
|
|
{{ currentSkin }}
|
|
|
<a-button type="primary" size="mini" class="ml-2" @click="skin.open()">
|
|
<a-button type="primary" size="mini" class="ml-2" @click="skin.open()">
|
|
|
- {{ $t('sys.changeSkin') }}
|
|
|
|
|
|
|
+ {{ $t("sys.changeSkin") }}
|
|
|
</a-button>
|
|
</a-button>
|
|
|
</a-form-item>
|
|
</a-form-item>
|
|
|
<a-form-item :label="$t('sys.layouts')" :help="$t('sys.layoutsHelp')">
|
|
<a-form-item :label="$t('sys.layouts')" :help="$t('sys.layoutsHelp')">
|
|
|
<a-select v-model="form.layout" @change="handleLayout">
|
|
<a-select v-model="form.layout" @change="handleLayout">
|
|
|
- <a-option value="classic">{{ $t('sys.layout.classic') }}</a-option>
|
|
|
|
|
- <a-option value="columns">{{ $t('sys.layout.columns') }}</a-option>
|
|
|
|
|
- <a-option v-if="appStore.skin !== 'classics'" value="banner">{{ $t('sys.layout.banner') }}</a-option>
|
|
|
|
|
- <a-option v-if="appStore.skin !== 'classics'" value="mixed">{{ $t('sys.layout.mixed') }}</a-option>
|
|
|
|
|
|
|
+ <a-option value="classic">{{ $t("sys.layout.classic") }}</a-option>
|
|
|
|
|
+ <a-option value="columns">{{ $t("sys.layout.columns") }}</a-option>
|
|
|
|
|
+ <a-option v-if="appStore.skin !== 'classics'" value="banner">{{
|
|
|
|
|
+ $t("sys.layout.banner")
|
|
|
|
|
+ }}</a-option>
|
|
|
|
|
+ <a-option v-if="appStore.skin !== 'classics'" value="mixed">{{
|
|
|
|
|
+ $t("sys.layout.mixed")
|
|
|
|
|
+ }}</a-option>
|
|
|
</a-select>
|
|
</a-select>
|
|
|
</a-form-item>
|
|
</a-form-item>
|
|
|
<a-form-item :label="$t('sys.round')" :help="$t('sys.roundHelp')">
|
|
<a-form-item :label="$t('sys.round')" :help="$t('sys.roundHelp')">
|
|
@@ -47,38 +57,69 @@
|
|
|
<a-form-item :label="$t('sys.i18n')" :help="$t('sys.i18nHelp')">
|
|
<a-form-item :label="$t('sys.i18n')" :help="$t('sys.i18nHelp')">
|
|
|
<a-switch v-model="form.i18n" @change="handleI18n" />
|
|
<a-switch v-model="form.i18n" @change="handleI18n" />
|
|
|
</a-form-item>
|
|
</a-form-item>
|
|
|
- <a-form-item :label="$t('sys.language')" :help="$t('sys.languageHelp')" v-if="form.i18n">
|
|
|
|
|
|
|
+ <a-form-item
|
|
|
|
|
+ :label="$t('sys.language')"
|
|
|
|
|
+ :help="$t('sys.languageHelp')"
|
|
|
|
|
+ v-if="form.i18n"
|
|
|
|
|
+ >
|
|
|
<a-select v-model="form.language" @change="handleLanguage">
|
|
<a-select v-model="form.language" @change="handleLanguage">
|
|
|
- <a-option value="zh_CN">{{ $t('sys.chinese') }}</a-option>
|
|
|
|
|
- <a-option value="en">{{ $t('sys.english') }}</a-option>
|
|
|
|
|
|
|
+ <a-option value="zh_CN">{{ $t("sys.chinese") }}</a-option>
|
|
|
|
|
+ <a-option value="en">{{ $t("sys.english") }}</a-option>
|
|
|
</a-select>
|
|
</a-select>
|
|
|
</a-form-item>
|
|
</a-form-item>
|
|
|
<a-form-item :label="$t('sys.animation')" :help="$t('sys.animationHelp')">
|
|
<a-form-item :label="$t('sys.animation')" :help="$t('sys.animationHelp')">
|
|
|
<a-select v-model="form.animation" @change="handleAnimation">
|
|
<a-select v-model="form.animation" @change="handleAnimation">
|
|
|
- <a-option value="ma-fade">{{ $t('sys.animate.fade') }}</a-option>
|
|
|
|
|
- <a-option value="ma-slide-left">{{ $t('sys.animate.sliderLeft') }}</a-option>
|
|
|
|
|
- <a-option value="ma-slide-right">{{ $t('sys.animate.sliderRight') }}</a-option>
|
|
|
|
|
- <a-option value="ma-slide-down">{{ $t('sys.animate.sliderDown') }}</a-option>
|
|
|
|
|
- <a-option value="ma-slide-up">{{ $t('sys.animate.sliderUp') }}</a-option>
|
|
|
|
|
|
|
+ <a-option value="ma-fade">{{ $t("sys.animate.fade") }}</a-option>
|
|
|
|
|
+ <a-option value="ma-slide-left">{{
|
|
|
|
|
+ $t("sys.animate.sliderLeft")
|
|
|
|
|
+ }}</a-option>
|
|
|
|
|
+ <a-option value="ma-slide-right">{{
|
|
|
|
|
+ $t("sys.animate.sliderRight")
|
|
|
|
|
+ }}</a-option>
|
|
|
|
|
+ <a-option value="ma-slide-down">{{
|
|
|
|
|
+ $t("sys.animate.sliderDown")
|
|
|
|
|
+ }}</a-option>
|
|
|
|
|
+ <a-option value="ma-slide-up">{{
|
|
|
|
|
+ $t("sys.animate.sliderUp")
|
|
|
|
|
+ }}</a-option>
|
|
|
</a-select>
|
|
</a-select>
|
|
|
</a-form-item>
|
|
</a-form-item>
|
|
|
- <a-form-item :label="$t('sys.dark')" :help="$t('sys.darkHelp')" v-if="currentSkin === 'Mine'">
|
|
|
|
|
|
|
+ <a-form-item
|
|
|
|
|
+ :label="$t('sys.dark')"
|
|
|
|
|
+ :help="$t('sys.darkHelp')"
|
|
|
|
|
+ v-if="currentSkin === 'Mine'"
|
|
|
|
|
+ >
|
|
|
<a-switch v-model="form.mode" @change="handleSettingMode" />
|
|
<a-switch v-model="form.mode" @change="handleSettingMode" />
|
|
|
</a-form-item>
|
|
</a-form-item>
|
|
|
<a-form-item :label="$t('sys.water')" :help="$t('sys.waterHelp')">
|
|
<a-form-item :label="$t('sys.water')" :help="$t('sys.waterHelp')">
|
|
|
<a-switch v-model="form.waterMark" @change="handleSettingWater" />
|
|
<a-switch v-model="form.waterMark" @change="handleSettingWater" />
|
|
|
</a-form-item>
|
|
</a-form-item>
|
|
|
<a-form-item :label="$t('sys.waterContent')" v-if="form.waterMark">
|
|
<a-form-item :label="$t('sys.waterContent')" v-if="form.waterMark">
|
|
|
- <a-input v-model="form.waterContent" @blur="handleSettingWaterContent" />
|
|
|
|
|
|
|
+ <a-input
|
|
|
|
|
+ v-model="form.waterContent"
|
|
|
|
|
+ @blur="handleSettingWaterContent"
|
|
|
|
|
+ />
|
|
|
</a-form-item>
|
|
</a-form-item>
|
|
|
<a-form-item :label="$t('sys.tag')" :help="$t('sys.tagHelp')">
|
|
<a-form-item :label="$t('sys.tag')" :help="$t('sys.tagHelp')">
|
|
|
<a-switch v-model="form.tag" @change="handleSettingTag" />
|
|
<a-switch v-model="form.tag" @change="handleSettingTag" />
|
|
|
</a-form-item>
|
|
</a-form-item>
|
|
|
- <a-form-item v-if="form.layout !== 'banner'" :label="$t('sys.menuFold')" :help="$t('sys.menuFoldHelp')">
|
|
|
|
|
|
|
+ <a-form-item
|
|
|
|
|
+ v-if="form.layout !== 'banner'"
|
|
|
|
|
+ :label="$t('sys.menuFold')"
|
|
|
|
|
+ :help="$t('sys.menuFoldHelp')"
|
|
|
|
|
+ >
|
|
|
<a-switch v-model="form.menuCollapse" @change="handleMenuCollapse" />
|
|
<a-switch v-model="form.menuCollapse" @change="handleMenuCollapse" />
|
|
|
</a-form-item>
|
|
</a-form-item>
|
|
|
- <a-form-item v-if="form.layout !== 'banner'" :label="$t('sys.menuWidth')" :help="$t('sys.menuWidthHelp')">
|
|
|
|
|
- <a-input-number v-model="form.menuWidth" mode="button" @change="handleMenuWidth" />
|
|
|
|
|
|
|
+ <a-form-item
|
|
|
|
|
+ v-if="form.layout !== 'banner'"
|
|
|
|
|
+ :label="$t('sys.menuWidth')"
|
|
|
|
|
+ :help="$t('sys.menuWidthHelp')"
|
|
|
|
|
+ >
|
|
|
|
|
+ <a-input-number
|
|
|
|
|
+ v-model="form.menuWidth"
|
|
|
|
|
+ mode="button"
|
|
|
|
|
+ @change="handleMenuWidth"
|
|
|
|
|
+ />
|
|
|
</a-form-item>
|
|
</a-form-item>
|
|
|
</a-form>
|
|
</a-form>
|
|
|
</a-drawer>
|
|
</a-drawer>
|
|
@@ -87,25 +128,25 @@
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
|
-import { ref, reactive, watch } from 'vue'
|
|
|
|
|
-import { useAppStore, useUserStore } from '@/store'
|
|
|
|
|
-import { Message } from '@arco-design/web-vue'
|
|
|
|
|
-import user from '@/api/system/user'
|
|
|
|
|
-import Skin from './components/components/skin.vue'
|
|
|
|
|
-import skins from '@/config/skins'
|
|
|
|
|
-import { useI18n } from 'vue-i18n'
|
|
|
|
|
-import { ColorPicker } from 'vue-color-kit'
|
|
|
|
|
-import 'vue-color-kit/dist/vue-color-kit.css'
|
|
|
|
|
|
|
+import { ref, reactive, watch } from "vue";
|
|
|
|
|
+import { useAppStore, useUserStore } from "@/store";
|
|
|
|
|
+import { Message } from "@arco-design/web-vue";
|
|
|
|
|
+import user from "@/api/system/user";
|
|
|
|
|
+import Skin from "./components/components/skin.vue";
|
|
|
|
|
+import skins from "@/config/skins";
|
|
|
|
|
+import { useI18n } from "vue-i18n";
|
|
|
|
|
+import { ColorPicker } from "vue-color-kit";
|
|
|
|
|
+import "vue-color-kit/dist/vue-color-kit.css";
|
|
|
|
|
|
|
|
-const userStore = useUserStore()
|
|
|
|
|
-const appStore = useAppStore()
|
|
|
|
|
-const { t } = useI18n()
|
|
|
|
|
|
|
+const userStore = useUserStore();
|
|
|
|
|
+const appStore = useAppStore();
|
|
|
|
|
+const { t } = useI18n();
|
|
|
|
|
|
|
|
-const skin = ref(null)
|
|
|
|
|
-const visible = ref(false)
|
|
|
|
|
-const currentSkin = ref('')
|
|
|
|
|
|
|
+const skin = ref(null);
|
|
|
|
|
+const visible = ref(false);
|
|
|
|
|
+const currentSkin = ref("");
|
|
|
const form = reactive({
|
|
const form = reactive({
|
|
|
- mode: appStore.mode === 'dark',
|
|
|
|
|
|
|
+ mode: appStore.mode === "dark",
|
|
|
tag: appStore.tag,
|
|
tag: appStore.tag,
|
|
|
menuCollapse: appStore.menuCollapse,
|
|
menuCollapse: appStore.menuCollapse,
|
|
|
menuWidth: appStore.menuWidth,
|
|
menuWidth: appStore.menuWidth,
|
|
@@ -117,64 +158,64 @@ const form = reactive({
|
|
|
waterContent: appStore.waterContent,
|
|
waterContent: appStore.waterContent,
|
|
|
ws: appStore.ws,
|
|
ws: appStore.ws,
|
|
|
roundOpen: appStore.roundOpen,
|
|
roundOpen: appStore.roundOpen,
|
|
|
-})
|
|
|
|
|
|
|
+});
|
|
|
|
|
|
|
|
const defaultColorList = reactive([
|
|
const defaultColorList = reactive([
|
|
|
- '#165DFF',
|
|
|
|
|
- '#7166f0',
|
|
|
|
|
- '#e84a6c',
|
|
|
|
|
- '#efbd48',
|
|
|
|
|
- '#0bd092',
|
|
|
|
|
- '#bb1b1b',
|
|
|
|
|
- '#0d9496',
|
|
|
|
|
- '#18181b',
|
|
|
|
|
|
|
+ "#165DFF",
|
|
|
|
|
+ "#7166f0",
|
|
|
|
|
+ "#e84a6c",
|
|
|
|
|
+ "#efbd48",
|
|
|
|
|
+ "#0bd092",
|
|
|
|
|
+ "#bb1b1b",
|
|
|
|
|
+ "#0d9496",
|
|
|
|
|
+ "#18181b",
|
|
|
|
|
|
|
|
- '#0960be',
|
|
|
|
|
- '#4e69fd',
|
|
|
|
|
- '#f5319d',
|
|
|
|
|
- '#c1420b',
|
|
|
|
|
- '#43a047',
|
|
|
|
|
- '#f53f3f',
|
|
|
|
|
- '#344256',
|
|
|
|
|
- '#3f3f46',
|
|
|
|
|
-])
|
|
|
|
|
|
|
+ "#0960be",
|
|
|
|
|
+ "#4e69fd",
|
|
|
|
|
+ "#f5319d",
|
|
|
|
|
+ "#c1420b",
|
|
|
|
|
+ "#43a047",
|
|
|
|
|
+ "#f53f3f",
|
|
|
|
|
+ "#344256",
|
|
|
|
|
+ "#3f3f46",
|
|
|
|
|
+]);
|
|
|
const changeColor = (color) => {
|
|
const changeColor = (color) => {
|
|
|
- appStore.changeColor(color.hex)
|
|
|
|
|
-}
|
|
|
|
|
|
|
+ appStore.changeColor(color.hex);
|
|
|
|
|
+};
|
|
|
|
|
|
|
|
skins.map((item) => {
|
|
skins.map((item) => {
|
|
|
- if (item.name === appStore.skin) currentSkin.value = t('skin.' + item.name)
|
|
|
|
|
-})
|
|
|
|
|
|
|
+ if (item.name === appStore.skin) currentSkin.value = t("skin." + item.name);
|
|
|
|
|
+});
|
|
|
|
|
|
|
|
watch(
|
|
watch(
|
|
|
() => appStore.skin,
|
|
() => appStore.skin,
|
|
|
(v) => {
|
|
(v) => {
|
|
|
skins.map((item) => {
|
|
skins.map((item) => {
|
|
|
- if (item.name === v) currentSkin.value = t('skin.' + item.name)
|
|
|
|
|
- })
|
|
|
|
|
|
|
+ if (item.name === v) currentSkin.value = t("skin." + item.name);
|
|
|
|
|
+ });
|
|
|
}
|
|
}
|
|
|
-)
|
|
|
|
|
|
|
+);
|
|
|
|
|
|
|
|
-const open = () => (visible.value = true)
|
|
|
|
|
-const close = () => (visible.value = false)
|
|
|
|
|
|
|
+const open = () => (visible.value = true);
|
|
|
|
|
+const close = () => (visible.value = false);
|
|
|
|
|
|
|
|
-const handleLayout = (val) => appStore.changeLayout(val)
|
|
|
|
|
-const handleI18n = (val) => appStore.toggleI18n(val)
|
|
|
|
|
-const handleWs = (val) => appStore.toggleWs(val)
|
|
|
|
|
-const handleRound = (val) => appStore.toggleRound(val)
|
|
|
|
|
-const handleLanguage = (val) => appStore.changeLanguage(val)
|
|
|
|
|
-const handleAnimation = (val) => appStore.changeAnimation(val)
|
|
|
|
|
-const handleSettingMode = (val) => appStore.toggleMode(val ? 'dark' : 'light')
|
|
|
|
|
-const handleSettingWater = (val) => appStore.toggleWater(val)
|
|
|
|
|
-const handleSettingWaterContent = (val) => appStore.changeWaterContent(val)
|
|
|
|
|
-const handleSettingTag = (val) => appStore.toggleTag(val)
|
|
|
|
|
-const handleMenuCollapse = (val) => appStore.toggleMenu(val)
|
|
|
|
|
-const handleMenuWidth = (val) => appStore.changeMenuWidth(val)
|
|
|
|
|
|
|
+const handleLayout = (val) => appStore.changeLayout(val);
|
|
|
|
|
+const handleI18n = (val) => appStore.toggleI18n(val);
|
|
|
|
|
+const handleWs = (val) => appStore.toggleWs(val);
|
|
|
|
|
+const handleRound = (val) => appStore.toggleRound(val);
|
|
|
|
|
+const handleLanguage = (val) => appStore.changeLanguage(val);
|
|
|
|
|
+const handleAnimation = (val) => appStore.changeAnimation(val);
|
|
|
|
|
+const handleSettingMode = (val) => appStore.toggleMode(val ? "dark" : "light");
|
|
|
|
|
+const handleSettingWater = (val) => appStore.toggleWater(val);
|
|
|
|
|
+const handleSettingWaterContent = (val) => appStore.changeWaterContent(val);
|
|
|
|
|
+const handleSettingTag = (val) => appStore.toggleTag(val);
|
|
|
|
|
+const handleMenuCollapse = (val) => appStore.toggleMenu(val);
|
|
|
|
|
+const handleMenuWidth = (val) => appStore.changeMenuWidth(val);
|
|
|
|
|
|
|
|
watch(
|
|
watch(
|
|
|
() => appStore.menuCollapse,
|
|
() => appStore.menuCollapse,
|
|
|
(val) => (form.menuCollapse = val)
|
|
(val) => (form.menuCollapse = val)
|
|
|
-)
|
|
|
|
|
|
|
+);
|
|
|
|
|
|
|
|
const save = async (done) => {
|
|
const save = async (done) => {
|
|
|
const data = {
|
|
const data = {
|
|
@@ -192,13 +233,15 @@ const save = async (done) => {
|
|
|
waterContent: appStore.waterContent,
|
|
waterContent: appStore.waterContent,
|
|
|
ws: appStore.ws,
|
|
ws: appStore.ws,
|
|
|
roundOpen: appStore.roundOpen,
|
|
roundOpen: appStore.roundOpen,
|
|
|
- }
|
|
|
|
|
|
|
+ };
|
|
|
|
|
|
|
|
- user.updateInfo({ id: userStore.user.id, backend_setting: data }).then((res) => {
|
|
|
|
|
- res.code === 200 && Message.success(res.message)
|
|
|
|
|
- })
|
|
|
|
|
- done(true)
|
|
|
|
|
-}
|
|
|
|
|
|
|
+ user
|
|
|
|
|
+ .updateInfo({ id: userStore.user.id, backend_setting: data })
|
|
|
|
|
+ .then((res) => {
|
|
|
|
|
+ res.code === 200 && Message.success(res.message);
|
|
|
|
|
+ });
|
|
|
|
|
+ done(true);
|
|
|
|
|
+};
|
|
|
|
|
|
|
|
-defineExpose({ open })
|
|
|
|
|
|
|
+defineExpose({ open });
|
|
|
</script>
|
|
</script>
|