Demo:添加内置背景图片

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',

web/src/lang/zh_cn.js

@@ -40,7 +40,8 @@ export default {
     rainbowLines: '彩虹线条',
     notUseRainbowLines: '不使用彩虹线条',
     outerFramePadding: '外框内边距',
-    associativeLineStyle: '关联线样式'
+    associativeLineStyle: '关联线样式',
+    builtInBackgroundImage: '内置背景图片'
   },
   setting: {
     title: '设置',

web/src/lang/zh_tw.js

@@ -41,7 +41,8 @@ export default {
     rainbowLines: '彩虹線條',
     notUseRainbowLines: '不使用彩虹線條',
     outerFramePadding: '外框內距',
-    associativeLineStyle: '關聯線樣式'
+    associativeLineStyle: '關聯線樣式',
+    builtInBackgroundImage: '內置背景圖片'
   },
   setting: {
     title: '設置',

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;
+        }
+      }
+    }
   }
 }
 

web/src/pages/Edit/components/Edit.vue

@@ -719,6 +719,7 @@ export default {
           }
         ]
         this.$store.commit('setExtendThemeGroupList', extendThemeGroupList)
+        this.$store.commit('setBgList', MoreThemes.bgList)
       }
     },
 

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: {}