Browse Source

change background

master
skyboy 10 months ago
parent
commit
f8b1a29805
  1. BIN
      frontend/public/image/bg/bg6.jpg
  2. BIN
      frontend/public/image/bg/bg7.jpg
  3. BIN
      frontend/public/image/bg/bg8.jpg
  4. BIN
      frontend/public/image/bg/bg9.jpg
  5. 28
      frontend/src/components/desktop/DeskItem.vue
  6. 3
      frontend/src/components/setting/ColorPicker.vue
  7. 58
      frontend/src/components/setting/SetCustom.vue
  8. 3
      frontend/src/system/config.ts

BIN
frontend/public/image/bg/bg6.jpg

Binary file not shown.

Before

Width:  |  Height:  |  Size: 384 KiB

After

Width:  |  Height:  |  Size: 209 KiB

BIN
frontend/public/image/bg/bg7.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

BIN
frontend/public/image/bg/bg8.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 367 KiB

BIN
frontend/public/image/bg/bg9.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

28
frontend/src/components/desktop/DeskItem.vue

@ -1,15 +1,19 @@
<template> <template>
<div class="desk-group"> <div class="desk-group">
<FileList :on-chosen="props.onChosen" :on-open="openapp" :file-list="appList"></FileList> <FileList
:on-chosen="props.onChosen"
:on-open="openapp"
:file-list="appList"
></FileList>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { mountEvent } from '@/system/event'; import { mountEvent } from "@/system/event";
import { useSystem } from '@/system/index.ts'; import { useSystem } from "@/system/index.ts";
import { useAppOpen } from '@/hook/useAppOpen'; import { useAppOpen } from "@/hook/useAppOpen";
import { onMounted } from 'vue'; import { onMounted } from "vue";
const { openapp, appList } = useAppOpen('apps'); const { openapp, appList } = useAppOpen("apps");
const props = defineProps({ const props = defineProps({
onChosen: { onChosen: {
type: Function, type: Function,
@ -17,7 +21,7 @@ const props = defineProps({
}, },
}); });
onMounted(() => { onMounted(() => {
mountEvent('file.props.edit', async () => { mountEvent("file.props.edit", async () => {
useSystem().initAppList(); useSystem().initAppList();
}); });
}); });
@ -28,5 +32,15 @@ onMounted(() => {
flex-direction: column; flex-direction: column;
flex-wrap: wrap; flex-wrap: wrap;
height: 100%; height: 100%;
//
color: transparent; /* 文字颜色设为透明 */
text-shadow: 0 0 0.5px white, 0 0 0.5px black, 0 0 2px rgba(0, 0, 0, 2); /* 多层阴影 */
//
> * {
color: inherit; /* 继承颜色 */
text-shadow: inherit; /* 继承描边效果 */
font-size: 0.8rem;
}
} }
</style> </style>

3
frontend/src/components/setting/ColorPicker.vue

@ -39,6 +39,3 @@ const predefineColors = ref([
"#c7158577", "#c7158577",
]); ]);
</script> </script>
<!-- <style>
@import url('vue-accessible-color-picker/styles');
</style> -->

58
frontend/src/components/setting/SetCustom.vue

@ -29,7 +29,7 @@
<template v-if="config.background.type === 'color'"> <template v-if="config.background.type === 'color'">
<div class="setting-item"> <div class="setting-item">
<label> </label> <label> </label>
<ColorPicker v-model="config.background.color"></ColorPicker> <ColorPicker v-model:modelValue="config.background.color" @update:modelValue="onColorChange"></ColorPicker>
</div> </div>
</template> </template>
<template v-if="config.background.type === 'image'"> <template v-if="config.background.type === 'image'">
@ -39,7 +39,7 @@
v-for="(item, index) in config.background.imageList" v-for="(item, index) in config.background.imageList"
:key="index" :key="index"
:class="config.background.url === item ? 'selected' : ''" :class="config.background.url === item ? 'selected' : ''"
@click="config.background.url = item" @click="setBg(item)"
> >
<img :src="item" /> <img :src="item" />
</li> </li>
@ -49,21 +49,14 @@
<label> </label> <label> </label>
</div> </div>
</template> </template>
<div class="setting-item">
<label> </label>
<el-button @click="submit" type="primary">
{{ t("confirm") }}
</el-button>
</div>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { getSystemConfig, setSystemConfig } from "@/system/config"; import { getSystemConfig, setSystemConfig } from "@/system/config";
import { ref, toRaw } from "vue"; import { ref } from "vue";
import { Dialog, t, useSystem } from "@/system"; import { t, useSystem } from "@/system";
const sys = useSystem(); const sys = useSystem();
const items = [t("background")]; const items = [t("background")];
const desktopOptions = [ const desktopOptions = [
@ -78,42 +71,23 @@ const desktopOptions = [
]; ];
const activeIndex = ref(0); const activeIndex = ref(0);
const config = ref(getSystemConfig()); const config:any = ref(getSystemConfig());
function setBg(item: any){
config.value.background.url = item
config.value.background.type = "image";
setSystemConfig(config.value);
sys.initBackground();
/** 提交背景设置 */
async function submit() {
const val = toRaw(config.value);
setSystemConfig(val);
config.value = val;
Dialog.showMessageBox({
message: t("save.success"),
title: t("wallpaper"),
type: "success",
}).then(() => {
//location.reload();
sys.initBackground();
});
} }
function onColorChange(color : string){
config.value.background.color = color;
config.value.background.type = "color";
setSystemConfig(config.value);
sys.initBackground();
}
const selectItem = (index: number) => { const selectItem = (index: number) => {
activeIndex.value = index; activeIndex.value = index;
}; };
// async function submitStyle() {
// let rootStyle = system.getConfig("rootStyle");
// rootStyle = {
// ...rootStyle,
// "--icon-title-color": textColor.value,
// "--window-border-radius": winRadius.value,
// "--theme-main-color": taskBarColor.value,
// };
// await system.setConfig("rootStyle", rootStyle);
// Dialog.showMessageBox({
// message: t("save.success"),
// title: t("style"),
// type: "info",
// });
// }
</script> </script>
<style scoped> <style scoped>

3
frontend/src/system/config.ts

@ -75,6 +75,9 @@ export const getSystemConfig = (ifset = false) => {
'/image/bg/bg4.jpg', '/image/bg/bg4.jpg',
'/image/bg/bg5.jpg', '/image/bg/bg5.jpg',
'/image/bg/bg6.jpg', '/image/bg/bg6.jpg',
'/image/bg/bg7.jpg',
'/image/bg/bg8.jpg',
'/image/bg/bg9.jpg',
] ]
} }
} }

Loading…
Cancel
Save