From 0146e43815a290a84eb02142bfd20c8594b375d8 Mon Sep 17 00:00:00 2001
From: wanglin2 <1013335014@qq.com>
Date: Sun, 6 Apr 2025 09:53:16 +0800
Subject: [PATCH] =?UTF-8?q?Demo:=E6=B7=BB=E5=8A=A0=E5=86=85=E7=BD=AE?=
 =?UTF-8?q?=E8=83=8C=E6=99=AF=E5=9B=BE=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/lang/en_us.js                       |  3 +-
 web/src/lang/zh_cn.js                       |  3 +-
 web/src/lang/zh_tw.js                       |  3 +-
 web/src/pages/Edit/components/BaseStyle.vue | 79 ++++++++++++++++++++-
 web/src/pages/Edit/components/Edit.vue      |  1 +
 web/src/store.js                            |  9 ++-
 6 files changed, 92 insertions(+), 6 deletions(-)

diff --git a/web/src/lang/en_us.js b/web/src/lang/en_us.js
index f7d06de8..e50d3b5b 100644
--- a/web/src/lang/en_us.js
+++ b/web/src/lang/en_us.js
@@ -41,7 +41,8 @@ export default {
     rainbowLines: 'Rainbow lines',
     notUseRainbowLines: 'Not use rainbow lines',
     outerFramePadding: 'Outer frame padding',
-    associativeLineStyle: 'Associative line style'
+    associativeLineStyle: 'Associative line style',
+    builtInBackgroundImage: 'Built in background image'
   },
   setting: {
     title: 'Setting',
diff --git a/web/src/lang/zh_cn.js b/web/src/lang/zh_cn.js
index 08ea0f62..f9bf80c1 100644
--- a/web/src/lang/zh_cn.js
+++ b/web/src/lang/zh_cn.js
@@ -40,7 +40,8 @@ export default {
     rainbowLines: '彩虹线条',
     notUseRainbowLines: '不使用彩虹线条',
     outerFramePadding: '外框内边距',
-    associativeLineStyle: '关联线样式'
+    associativeLineStyle: '关联线样式',
+    builtInBackgroundImage: '内置背景图片'
   },
   setting: {
     title: '设置',
diff --git a/web/src/lang/zh_tw.js b/web/src/lang/zh_tw.js
index 3ed053e4..744f1e72 100644
--- a/web/src/lang/zh_tw.js
+++ b/web/src/lang/zh_tw.js
@@ -41,7 +41,8 @@ export default {
     rainbowLines: '彩虹線條',
     notUseRainbowLines: '不使用彩虹線條',
     outerFramePadding: '外框內距',
-    associativeLineStyle: '關聯線樣式'
+    associativeLineStyle: '關聯線樣式',
+    builtInBackgroundImage: '內置背景圖片'
   },
   setting: {
     title: '設置',
diff --git a/web/src/pages/Edit/components/BaseStyle.vue b/web/src/pages/Edit/components/BaseStyle.vue
index 072fd435..8db1a13d 100644
--- a/web/src/pages/Edit/components/BaseStyle.vue
+++ b/web/src/pages/Edit/components/BaseStyle.vue
@@ -98,6 +98,30 @@
                 </el-option>
               </el-select>
             </div>
+            <!-- 内置背景图片 -->
+            <div
+              class="rowItem spaceBetween"
+              style="margin-top: 8px; margin-bottom: 8px;"
+              v-if="bgList.length > 0"
+            >
+              <div class="name">{{ $t('baseStyle.builtInBackgroundImage') }}</div>
+              <div
+                class="iconBtn el-icon-arrow-down"
+                :class="{ top: !bgListExpand }"
+                @click="bgListExpand = !bgListExpand"
+              ></div>
+            </div>
+            <div class="bgList" :class="{ expand: bgListExpand }">
+              <div
+                class="bgItem"
+                v-for="(item, index) in bgList"
+                :key="index"
+                :class="{active: style.backgroundImage === item}"
+                @click="useBg(item)"
+              >
+                <img :src="item" alt="" />
+              </div>
+            </div>
           </el-tab-pane>
         </el-tabs>
       </div>
@@ -899,7 +923,8 @@ export default {
       outerFramePadding: {
         outerFramePaddingX: 0,
         outerFramePaddingY: 0
-      }
+      },
+      bgListExpand: true
     }
   },
   computed: {
@@ -907,7 +932,8 @@ export default {
       activeSidebar: state => state.activeSidebar,
       localConfig: state => state.localConfig,
       isDark: state => state.localConfig.isDark,
-      supportLineFlow: state => state.supportLineFlow
+      supportLineFlow: state => state.supportLineFlow,
+      bgList: state => state.bgList
     }),
     lineStyleList() {
       return lineStyleList[this.$i18n.locale] || lineStyleList.zh
@@ -1106,6 +1132,10 @@ export default {
           config: this.data.theme.config
         }
       })
+    },
+
+    useBg(bg) {
+      this.update('backgroundImage', bg)
     }
   }
 }
@@ -1172,6 +1202,10 @@ export default {
       align-items: center;
       margin-bottom: 5px;
 
+      &.spaceBetween {
+        justify-content: space-between;
+      }
+
       .name {
         font-size: 12px;
         margin-right: 10px;
@@ -1197,6 +1231,15 @@ export default {
         justify-content: center;
         cursor: pointer;
       }
+
+      .iconBtn {
+        cursor: pointer;
+        transition: all 0.3s;
+
+        &.top {
+          transform: rotateZ(-180deg);
+        }
+      }
     }
 
     .styleBtn {
@@ -1224,6 +1267,38 @@ export default {
         height: 2px;
       }
     }
+
+    .bgList {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      height: 75px;
+
+      &.expand {
+        height: max-content;
+      }
+
+      .bgItem {
+        width: 120px;
+        height: 73px;
+        border: 1px solid #e9e9e9;
+        border-radius: 5px;
+        overflow: hidden;
+        padding: 5px;
+        margin-bottom: 8px;
+        cursor: pointer;
+
+        &.active {
+          border-color: #409eff;
+        }
+
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+      }
+    }
   }
 }
 
diff --git a/web/src/pages/Edit/components/Edit.vue b/web/src/pages/Edit/components/Edit.vue
index c0db03a5..ed754303 100644
--- a/web/src/pages/Edit/components/Edit.vue
+++ b/web/src/pages/Edit/components/Edit.vue
@@ -719,6 +719,7 @@ export default {
           }
         ]
         this.$store.commit('setExtendThemeGroupList', extendThemeGroupList)
+        this.$store.commit('setBgList', MoreThemes.bgList)
       }
     },
 
diff --git a/web/src/store.js b/web/src/store.js
index 0c3fed49..647f4733 100644
--- a/web/src/store.js
+++ b/web/src/store.js
@@ -47,7 +47,9 @@ const store = new Vuex.Store({
       method: 'POST'
     },
     // 扩展主题列表
-    extendThemeGroupList: []
+    extendThemeGroupList: [],
+    // 内置背景图片
+    bgList: []
   },
   mutations: {
     // 设置操作本地文件标志位
@@ -144,6 +146,11 @@ const store = new Vuex.Store({
     // 扩展主题列表
     setExtendThemeGroupList(state, data) {
       state.extendThemeGroupList = data
+    },
+
+    // 设置背景图片列表
+    setBgList(state, data) {
+      state.bgList = data
     }
   },
   actions: {}