change background

frontend/src/components/desktop/DeskItem.vue

@@ -1,15 +1,19 @@
 <template>
   <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>
 </template>
 <script lang="ts" setup>
-import { mountEvent } from '@/system/event';
-import { useSystem } from '@/system/index.ts';
-import { useAppOpen } from '@/hook/useAppOpen';
-import { onMounted } from 'vue';
+import { mountEvent } from "@/system/event";
+import { useSystem } from "@/system/index.ts";
+import { useAppOpen } from "@/hook/useAppOpen";
+import { onMounted } from "vue";
 
-const { openapp, appList } = useAppOpen('apps');
+const { openapp, appList } = useAppOpen("apps");
 const props = defineProps({
   onChosen: {
     type: Function,
@@ -17,7 +21,7 @@ const props = defineProps({
   },
 });
 onMounted(() => {
-  mountEvent('file.props.edit', async () => {
+  mountEvent("file.props.edit", async () => {
     useSystem().initAppList();
   });
 });
@@ -28,5 +32,15 @@ onMounted(() => {
   flex-direction: column;
   flex-wrap: wrap;
   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>

frontend/src/components/setting/ColorPicker.vue

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

frontend/src/components/setting/SetCustom.vue

@@ -29,7 +29,7 @@
       <template v-if="config.background.type === 'color'">
         <div class="setting-item">
           <label> </label>
-          <ColorPicker v-model="config.background.color"></ColorPicker>
+          <ColorPicker v-model:modelValue="config.background.color" @update:modelValue="onColorChange"></ColorPicker>
         </div>
       </template>
       <template v-if="config.background.type === 'image'">
@@ -39,7 +39,7 @@
               v-for="(item, index) in config.background.imageList"
               :key="index"
               :class="config.background.url === item ? 'selected' : ''"
-              @click="config.background.url = item"
+              @click="setBg(item)"
             >
               <img :src="item" />
             </li>
@@ -49,21 +49,14 @@
           <label> </label>
         </div>
       </template>
-
-      <div class="setting-item">
-        <label> </label>
-        <el-button @click="submit" type="primary">
-          {{ t("confirm") }}
-        </el-button>
-      </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { getSystemConfig, setSystemConfig } from "@/system/config";
-import { ref, toRaw } from "vue";
-import { Dialog, t, useSystem } from "@/system";
+import { ref } from "vue";
+import { t, useSystem } from "@/system";
 const sys = useSystem();
 const items = [t("background")];
 const desktopOptions = [
@@ -78,42 +71,23 @@ const desktopOptions = [
 ];
 
 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) => {
   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>
 
 <style scoped>

frontend/src/system/config.ts

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