feat: #388 支持自定义挂件背景色用来适配不同的主题

components.d.ts

@@ -1,50 +1,77 @@
+/*
+ * Copyright (c) 2023, Terwer . All rights reserved.
+ * DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
+ *
+ * This code is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License version 2 only, as
+ * published by the Free Software Foundation.  Terwer designates this
+ * particular file as subject to the "Classpath" exception as provided
+ * by Terwer in the LICENSE file that accompanied this code.
+ *
+ * This code is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License
+ * version 2 for more details (a copy is included in the LICENSE file that
+ * accompanied this code).
+ *
+ * You should have received a copy of the GNU General Public License version
+ * 2 along with this work; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
+ *
+ * Please contact Terwer, Shenzhen, Guangdong, China, youweics@163.com
+ * or visit www.terwer.space if you need additional information or have any
+ * questions.
+ */
+
 /* eslint-disable */
 /* prettier-ignore */
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
-import '@vue/runtime-core'
+import "@vue/runtime-core";
 
 export {}
 
-declare module '@vue/runtime-core' {
+declare module "@vue/runtime-core" {
   export interface GlobalComponents {
-    ElAlert: typeof import('element-plus/es')['ElAlert']
-    ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
-    ElButton: typeof import('element-plus/es')['ElButton']
-    ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
-    ElCard: typeof import('element-plus/es')['ElCard']
-    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
-    ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
-    ElCol: typeof import('element-plus/es')['ElCol']
-    ElContainer: typeof import('element-plus/es')['ElContainer']
-    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
-    ElDialog: typeof import('element-plus/es')['ElDialog']
-    ElForm: typeof import('element-plus/es')['ElForm']
-    ElFormItem: typeof import('element-plus/es')['ElFormItem']
-    ElHeader: typeof import('element-plus/es')['ElHeader']
-    ElIcon: typeof import('element-plus/es')['ElIcon']
-    ElInput: typeof import('element-plus/es')['ElInput']
-    ElMain: typeof import('element-plus/es')['ElMain']
-    ElOption: typeof import('element-plus/es')['ElOption']
-    ElPageHeader: typeof import('element-plus/es')['ElPageHeader']
-    ElPagination: typeof import('element-plus/es')['ElPagination']
-    ElPopover: typeof import('element-plus/es')['ElPopover']
-    ElRadio: typeof import('element-plus/es')['ElRadio']
-    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
-    ElRow: typeof import('element-plus/es')['ElRow']
-    ElSelect: typeof import('element-plus/es')['ElSelect']
-    ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
-    ElSwitch: typeof import('element-plus/es')['ElSwitch']
-    ElTable: typeof import('element-plus/es')['ElTable']
-    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
-    ElTabPane: typeof import('element-plus/es')['ElTabPane']
-    ElTabs: typeof import('element-plus/es')['ElTabs']
-    ElTag: typeof import('element-plus/es')['ElTag']
-    ElTooltip: typeof import('element-plus/es')['ElTooltip']
-    ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
+    ElAlert: typeof import("element-plus/es")["ElAlert"]
+    ElAutocomplete: typeof import("element-plus/es")["ElAutocomplete"]
+    ElButton: typeof import("element-plus/es")["ElButton"]
+    ElButtonGroup: typeof import("element-plus/es")["ElButtonGroup"]
+    ElCard: typeof import("element-plus/es")["ElCard"]
+    ElCheckbox: typeof import("element-plus/es")["ElCheckbox"]
+    ElCheckboxGroup: typeof import("element-plus/es")["ElCheckboxGroup"]
+    ElCol: typeof import("element-plus/es")["ElCol"]
+    ElColorPicker: typeof import("element-plus/es")["ElColorPicker"]
+    ElContainer: typeof import("element-plus/es")["ElContainer"]
+    ElDatePicker: typeof import("element-plus/es")["ElDatePicker"]
+    ElDialog: typeof import("element-plus/es")["ElDialog"]
+    ElDivider: typeof import("element-plus/es")["ElDivider"]
+    ElForm: typeof import("element-plus/es")["ElForm"]
+    ElFormItem: typeof import("element-plus/es")["ElFormItem"]
+    ElHeader: typeof import("element-plus/es")["ElHeader"]
+    ElIcon: typeof import("element-plus/es")["ElIcon"]
+    ElInput: typeof import("element-plus/es")["ElInput"]
+    ElMain: typeof import("element-plus/es")["ElMain"]
+    ElOption: typeof import("element-plus/es")["ElOption"]
+    ElPageHeader: typeof import("element-plus/es")["ElPageHeader"]
+    ElPagination: typeof import("element-plus/es")["ElPagination"]
+    ElPopover: typeof import("element-plus/es")["ElPopover"]
+    ElRadio: typeof import("element-plus/es")["ElRadio"]
+    ElRadioGroup: typeof import("element-plus/es")["ElRadioGroup"]
+    ElRow: typeof import("element-plus/es")["ElRow"]
+    ElSelect: typeof import("element-plus/es")["ElSelect"]
+    ElSkeleton: typeof import("element-plus/es")["ElSkeleton"]
+    ElSwitch: typeof import("element-plus/es")["ElSwitch"]
+    ElTable: typeof import("element-plus/es")["ElTable"]
+    ElTableColumn: typeof import("element-plus/es")["ElTableColumn"]
+    ElTabPane: typeof import("element-plus/es")["ElTabPane"]
+    ElTabs: typeof import("element-plus/es")["ElTabs"]
+    ElTag: typeof import("element-plus/es")["ElTag"]
+    ElTooltip: typeof import("element-plus/es")["ElTooltip"]
+    ElTreeSelect: typeof import("element-plus/es")["ElTreeSelect"]
   }
   export interface ComponentCustomProperties {
-    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
+    vLoading: typeof import("element-plus/es")["ElLoadingDirective"]
   }
 }

components/set/SetIndex.vue

@@ -25,6 +25,9 @@
 
 <template>
   <el-tabs tab-position="left">
+    <el-tab-pane :label="$t('service.tab.change.local')">
+      <general-setting />
+    </el-tab-pane>
     <el-tab-pane :label="$t('blog.change.siyuan.api')">
       <siyuan-api-setting :show-cancel="false" />
     </el-tab-pane>
@@ -40,9 +43,6 @@
     <el-tab-pane :label="$t('picgo.pic.setting')">
       <picgo-setting />
     </el-tab-pane>
-    <el-tab-pane :label="$t('service.tab.change.local')">
-      <general-setting />
-    </el-tab-pane>
   </el-tabs>
 </template>
 

components/set/preference/PreferenceSetting.vue

@@ -63,6 +63,24 @@
         />
       </el-form-item>
     </el-form>
+
+    <el-form label-width="150px" v-if="false">
+      <el-divider />
+
+      <el-form-item :label="$t('setting.main.background')">
+        <el-color-picker v-model="formData.mainBg" />
+        <el-alert
+          :title="$t('setting.main.background.tip')"
+          type="warning"
+          :closable="false"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="formMethods.handleSavePreference"
+          >{{ $t("main.opt.ok") }}
+        </el-button>
+      </el-form-item>
+    </el-form>
   </div>
 </template>
 
@@ -73,7 +91,7 @@ import { PublishPreference } from "~/utils/models/publishPreference"
 import { setJSONConf } from "~/utils/configUtil"
 import { CONSTANTS } from "~/utils/constants/constants"
 import { LogFactory } from "~/utils/logUtil"
-import { isBrowser, reloadPage } from "~/utils/browserUtil"
+import { reloadPage } from "~/utils/browserUtil"
 import { parseBoolean } from "~/utils/util"
 import { ElMessageBox } from "element-plus"
 import { useI18n } from "vue-i18n"
@@ -97,6 +115,7 @@ const formData = reactive({
   autoTag: false,
   showCloseBtn: false,
   usePicgo: false,
+  mainBg: "",
 })
 
 const formMethods = {
@@ -158,6 +177,9 @@ const formMethods = {
 
     saveConf()
   },
+  handleSavePreference: () => {
+    saveConf()
+  },
 }
 
 const saveConf = () => {
@@ -168,6 +190,7 @@ const saveConf = () => {
   publishCfg.autoTag = parseBoolean(formData.autoTag)
   publishCfg.showCloseBtn = parseBoolean(formData.showCloseBtn)
   publishCfg.usePicgo = parseBoolean(formData.usePicgo)
+  publishCfg.mainBg = formData.mainBg
 
   setJSONConf<PublishPreference>(
     CONSTANTS.PUBLISH_PREFERENCE_CONFIG_KEY,
@@ -187,6 +210,7 @@ const initConf = () => {
   formData.autoTag = parseBoolean(publishCfg.autoTag)
   formData.showCloseBtn = parseBoolean(publishCfg.showCloseBtn)
   formData.usePicgo = parseBoolean(publishCfg.usePicgo)
+  formData.mainBg = publishCfg.mainBg
 }
 
 onMounted(() => {

layouts/default/DefaultFooter.vue

@@ -128,6 +128,11 @@ const openGeneralSetting = () => {
 }
 
 const initConf = () => {
+  // const publishCfg = getPublishCfg()
+  // siyuanBrowserUtil.fitThemeCustom({
+  //   backgroundColor: publishCfg.mainBg,
+  // })
+
   const deviceType = DeviceUtil.getDevice()
   if (
     deviceType === DeviceType.DeviceType_Chrome_Extension ||

locales/en_US.ts

@@ -510,4 +510,7 @@ export default {
     "Clear configuration cannot be restored, please do it carefully. It is strongly recommended to backup configuration first.",
   "setting.conf.clear.picgo.tip":
     "Clear configuration cannot be restored, please do it carefully. It is strongly recommended to backup configuration first. This operation will delete PicGo -related configuration folders, including configuration, plug -in, cache, etc. It is used only when picgo is completely unavailable, otherwise the consequences of the loss of configuration will be at your own risk!",
+  "setting.main.background": "Widget background",
+  "setting.main.background.tip":
+    "Support hexadecimal and RGB, for example: #000000, no settings or staying empty unchanged",
 }

locales/zh_CN.ts

@@ -420,7 +420,6 @@ export default {
     "JVue平台的xmlrpc远程发布地址，通常固定是：https://<平台地址>/xmlrpc",
   "setting.jvue.previewUrl.tip":
     "JVue平台的文章预览规则，通常是：/post/[postid].html",
-
   "setting.conf.home.tip":
     "Confluence Cloud，首页，通常是：https://<您的用户名>.atlassian.net/wiki/spaces/<空间名>",
   "setting.conf.username.tip": "Confluence登录名，可前往您的atlassian账户获取",
@@ -508,4 +507,7 @@ export default {
     "清空配置不可恢复，请谨慎操作。强烈建议先备份配置。",
   "setting.conf.clear.picgo.tip":
     "清空配置不可恢复，请谨慎操作。强烈建议先备份配置。此操作会删除PicGO相关配置文件夹，包括配置、插件、缓存等，仅在PicGO加载发生异常，并且完全无法使用的时候使用，否则丢失配置后果自负！",
+  "setting.main.background": "挂件背景",
+  "setting.main.background.tip":
+    "支持16进制和rgb，例如：#000000，未设置或者留空不变。如果新窗口设置，请重新刷新文档。",
 }

public/lib/siyuan/theme.js

@@ -31,16 +31,10 @@ const initTheme = () => {
   }
   console.warn("sy-post-publisher 外观适配")
 
-  const themeMode = document
-    .querySelector("html")
-    .getAttribute("data-theme-mode")
-  console.log("themeMode=>", themeMode)
-
-  const element = window.document.querySelector(
-    "#layouts>.fn__flex>.fn__flex-column:not(.layout__center)>.fn__flex>div[data-type=wnd]"
+  const bgColor = getComputedStyle(document.documentElement).getPropertyValue(
+    "--b3-theme-background"
   )
-  const computedStyle = window.getComputedStyle(element)
-  const bgColor = computedStyle.getPropertyValue("background-color")
+  // const bgColor = "var(--b3-theme-background)"
   window.customstyle.backgroundColor = bgColor
 
   console.log("开始customstyle适配=>", window.customstyle)

utils/models/publishPreference.ts

@@ -76,4 +76,8 @@ export class PublishPreference {
    * 是否使用PicGO
    */
   usePicgo: boolean
+  /**
+   * 挂件背景色
+   */
+  mainBg: string
 }

utils/otherlib/siyuanBrowserUtil.js

@@ -28,6 +28,7 @@
 import { ElMessage } from "element-plus"
 import { isInSiyuanWidget } from "~/utils/platform/siyuan/siyuanUtil"
 import envUtil from "~/utils/envUtil"
+import { isEmptyString } from "~/utils/util"
 
 /**
  * 是否在思源浏览器
@@ -101,11 +102,29 @@ export const getSiyuanNewWinPageId = () => {
 const fitTheme = () => {
   const syWin = parent.window
   const customstyle = syWin.customstyle
-  document.documentElement.style.setProperty(
-    "--custom-app-bg-color",
-    customstyle.backgroundColor
-  )
-  console.log("适配customstyle完成=>", customstyle)
+  fitThemeCustom(customstyle)
+}
+
+/**
+ * 用给定的颜色自定义背景
+ * @param customstyle 自定义样式
+ */
+const fitThemeCustom = (customstyle) => {
+  const customAppBgColor = getComputedStyle(
+    document.documentElement
+  ).getPropertyValue("--custom-app-bg-color")
+  // 样式不一致才去适配
+  if (
+    !isEmptyString(customstyle.backgroundColor) &&
+    customstyle.backgroundColor !== customAppBgColor
+  ) {
+    document.documentElement.style.setProperty(
+      "--custom-app-bg-color",
+      customstyle.backgroundColor
+    )
+
+    console.log("重新适配customstyle完成=>", customstyle)
+  }
 }
 
 /**
@@ -128,6 +147,7 @@ const openPath = (absFilePath) => {
 // 统一访问入口
 const siyuanBrowserUtil = {
   fitTheme,
+  fitThemeCustom,
   getSiyuanWindow,
   openPath,
 }