@ibiz-template/runtime 0.7.19 → 0.7.21

package/out/utils/theme-util/custom-theme-util.js

@@ -0,0 +1,199 @@
+import { notNilEmpty } from 'qx-util';
+import { ConfigService } from '../../service';
+/**
+ * 自定义主题工具类
+ *
+ * @author zzq
+ * @date 2024-05-10 23:12:15
+ * @export
+ * @class CustomThemeUtil
+ */
+export class CustomThemeUtil {
+    constructor(themeUtil) {
+        this.themeUtil = themeUtil;
+        /**
+         * 自定义主题状态
+         *
+         * @type {ICustomThemeState}
+         * @memberof CustomThemeUtil
+         */
+        this.state = {};
+        this.state.themeTag = ibiz.util.theme.getTheme();
+        this.state.themeVars = {};
+        const { appData } = ibiz;
+        if (!appData) {
+            return;
+        }
+        const app = ibiz.hub.getApp();
+        this.config = new ConfigService(app.appId, 'customtheme', `theme_config_${appData.context.srfuserid}`);
+    }
+    /**
+     * 转换自定义变量
+     *
+     * @param {Record<string, string>} themeVars
+     * @return {string}
+     * @memberof CustomThemeUtil
+     */
+    transCustomVars(themeVars) {
+        let result = '';
+        for (const key in themeVars) {
+            if (Object.prototype.hasOwnProperty.call(themeVars, key)) {
+                const val = themeVars[key];
+                result += `.${key}{${val}}`;
+            }
+        }
+        return result;
+    }
+    /**
+     * 设置自定义主题测试
+     *
+     * @param {string} themeTag
+     * @param {Record<string, string>} themeVars
+     * @memberof CustomThemeUtil
+     */
+    setCustomThemeParams(themeTag, themeVars) {
+        const themeStyle = document.getElementById(themeTag);
+        if (themeStyle) {
+            themeStyle.remove();
+        }
+        const otherContent = {};
+        let content = `:root.${themeTag}{`;
+        for (const key in themeVars) {
+            if (Object.prototype.hasOwnProperty.call(themeVars, key)) {
+                if (key.split(':').length === 2) {
+                    const className = key.split(':')[0];
+                    const varName = key.split(':')[1];
+                    const val = themeVars[key];
+                    if (!otherContent[className]) {
+                        otherContent[className] = '';
+                    }
+                    otherContent[className] +=
+                        `${varName}: ${val}${val.endsWith(';') ? '' : ';'}`;
+                }
+                else {
+                    const val = themeVars[key];
+                    content += `${key}: ${val}${val.endsWith(';') ? '' : ';'}`;
+                }
+            }
+        }
+        content += '}';
+        content += this.transCustomVars(otherContent);
+        const script = document.createElement('style');
+        script.id = themeTag;
+        script.type = 'text/css';
+        script.innerHTML = content;
+        document.head.appendChild(script);
+    }
+    /**
+     * 清除自定义主题参数
+     *
+     * @memberof CustomThemeUtil
+     */
+    clearCustomThemeParams() {
+        this.state.themeVars = {};
+        const themeStyle = document.getElementById(this.state.themeTag);
+        if (themeStyle) {
+            themeStyle.remove();
+        }
+    }
+    /**
+     * 加载自定义主题
+     *
+     * @return {*}  {Promise<IData>}
+     * @memberof CustomThemeUtil
+     */
+    async loadCustomTheme() {
+        const res = await this.config.load();
+        if (res.themeTag) {
+            this.state.themeTag = res.themeTag;
+            ibiz.util.theme.setTheme(this.state.themeTag);
+        }
+        if (notNilEmpty(res.themeVars)) {
+            this.state.themeVars = res.themeVars;
+            this.setCustomThemeParams(this.state.themeTag, res.themeVars);
+        }
+        return res;
+    }
+    /**
+     * 预览自定义主题
+     *
+     * @param {string} themeTag
+     * @param {Record<string, string>} themeVars
+     * @return {*}  {ICustomThemeState}
+     * @memberof CustomThemeUtil
+     */
+    previewCustomTheme(themeTag, themeVars) {
+        if (themeTag) {
+            this.state.themeTag = themeTag;
+            ibiz.util.theme.setTheme(this.state.themeTag);
+        }
+        if (notNilEmpty(themeVars)) {
+            this.state.themeVars = themeVars;
+            this.setCustomThemeParams(this.state.themeTag, themeVars);
+        }
+        return this.state;
+    }
+    /**
+     * 保存自定义主题
+     *
+     * @param {string} themeTag
+     * @param {Record<string, string>} themeVars
+     * @return {*}  {Promise<boolean>}
+     * @memberof CustomThemeUtil
+     */
+    async saveCustomTheme(themeTag, themeVars) {
+        const data = {
+            themeTag,
+            themeVars,
+        };
+        const result = await this.config.save(data);
+        if (result) {
+            ibiz.message.success('保存自定义主题成功!');
+        }
+        return result;
+    }
+    /**
+     * 分享自定义主题
+     *
+     * @param {string} themeTag
+     * @param {Record<string, string>} themeVars
+     * @return {*}  {(Promise<string | undefined>)}
+     * @memberof CustomThemeUtil
+     */
+    async shareCustomTheme(themeTag, themeVars) {
+        const { appData } = ibiz;
+        if (!appData) {
+            return;
+        }
+        const data = {
+            themeTag,
+            themeVars,
+        };
+        const app = ibiz.hub.getApp();
+        const timestamp = Date.now();
+        const shareConfig = new ConfigService(app.appId, 'customtheme', `theme_share_${appData.context.srfuserid}_${timestamp}`);
+        const result = await shareConfig.save(data);
+        if (result) {
+            const { origin, pathname } = window.location;
+            const shareThemeId = `shareThemeId=${window.btoa(timestamp.toString())}`;
+            const shareUserName = `shareUserName=${encodeURIComponent(appData.context.srfusername)}`;
+            const shareUserId = `shareUserId=${encodeURIComponent(appData.context.srfuserid)}`;
+            const url = `/share?${shareThemeId}&${shareUserName}&${shareUserId}`;
+            return `${origin}${pathname}#${url}`;
+        }
+        ibiz.message.error('分享自定义主题失败!');
+    }
+    /**
+     * 获取分享主题
+     *
+     * @param {string} userId
+     * @param {string} themeId
+     * @return {*}  {Promise<IData>}
+     * @memberof CustomThemeUtil
+     */
+    async getShareTheme(userId, themeId) {
+        const app = ibiz.hub.getApp();
+        const shareConfig = new ConfigService(app.appId, 'customtheme', `theme_share_${userId}_${themeId}`);
+        return shareConfig.load();
+    }
+}

package/out/utils/theme-util/theme-util.d.ts

@@ -1,4 +1,5 @@
 import { IAppUITheme } from '@ibiz/model-core';
+import { CustomThemeUtil, ICustomThemeState } from './custom-theme-util';
 /**
  * 主题工具类
  *
@@ -17,6 +18,14 @@ export declare class ThemeUtil {
      * @type {HTMLElement}
      */
     protected html: HTMLElement;
+    /**
+     * 自定义主题工具类
+     *
+     * @protected
+     * @type {CustomThemeUtil}
+     * @memberof ThemeUtil
+     */
+    protected customUtil: CustomThemeUtil;
     /**
      * 加载主题插件
      *
@@ -53,5 +62,75 @@ export declare class ThemeUtil {
      * @return {*}  {string}
      */
     getTheme(): string;
+    /**
+     * 自定义主题
+     *
+     * @memberof ThemeUtil
+     */
+    customTheme(): void;
+    /**
+     * 初始化自定义主题
+     *
+     * @return {*}  {Promise<void>}
+     * @memberof ThemeUtil
+     */
+    initCustomTheme(needLoad?: boolean): Promise<void>;
+    /**
+     * 获取自定义主题
+     *
+     * @return {*}  {ICustomThemeState}
+     * @memberof ThemeUtil
+     */
+    getCustomTheme(): ICustomThemeState;
+    /**
+     * 设置自定义主题
+     *
+     * @param {IData} data
+     * @memberof ThemeUtil
+     */
+    setCustomTheme(data: IData): void;
+    /**
+     * 预览自定义主题
+     *
+     * @param {string} themeTag
+     * @param {Record<string, string>} themeVars
+     * @return {*}  {ICustomThemeState}
+     * @memberof ThemeUtil
+     */
+    previewCustomTheme(themeTag: string, themeVars: Record<string, string>): ICustomThemeState;
+    /**
+     * 还原自定义主题
+     *
+     * @return {*}  {void}
+     * @memberof ThemeUtil
+     */
+    resetCustomTheme(): void;
+    /**
+     * 保存自定义主题
+     *
+     * @param {string} themeTag
+     * @param {Record<string, string>} themeVars
+     * @return {*}  {(Promise<boolean | undefined>)}
+     * @memberof ThemeUtil
+     */
+    saveCustomTheme(themeTag: string, themeVars: Record<string, string>): Promise<boolean | undefined>;
+    /**
+     * 分享自定义主题
+     *
+     * @param {string} themeTag
+     * @param {Record<string, string>} themeVars
+     * @return {*}  {(Promise<string | undefined>)}
+     * @memberof ThemeUtil
+     */
+    shareCustomTheme(themeTag: string, themeVars: Record<string, string>): Promise<string | undefined>;
+    /**
+     * 获取分享主题
+     *
+     * @param {string} userId
+     * @param {string} themeId
+     * @return {*}  {Promise<IData>}
+     * @memberof ThemeUtil
+     */
+    getShareTheme(userId: string, themeId: string): Promise<IData>;
 }
 //# sourceMappingURL=theme-util.d.ts.map

package/out/utils/theme-util/theme-util.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-util.d.ts","sourceRoot":"","sources":["../../../src/utils/theme-util/theme-util.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAG7D;;;;;;;GAOG;AACH,qBAAa,SAAS;IACpB;;;;;;;OAOG;IACH,SAAS,CAAC,IAAI,EAAE,WAAW,CAA4C;IAEvE;;;;;;;OAOG;IACG,SAAS,CAAC,KAAK,EAAE,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC;IAclD;;;;;;;;;OASG;IACH,SAAS,CAAC,cAAc,CACtB,KAAK,EAAE,WAAW,EAClB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAC7B,IAAI;IAoBP;;;;;;OAMG;IACH,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAO3B;;;;;;OAMG;IACH,QAAQ,IAAI,MAAM;CAGnB"}
+{"version":3,"file":"theme-util.d.ts","sourceRoot":"","sources":["../../../src/utils/theme-util/theme-util.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAE7D,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAEzE;;;;;;;GAOG;AACH,qBAAa,SAAS;IACpB;;;;;;;OAOG;IACH,SAAS,CAAC,IAAI,EAAE,WAAW,CAA4C;IAEvE;;;;;;OAMG;IACH,SAAS,CAAC,UAAU,EAAE,eAAe,CAAyB;IAE9D;;;;;;;OAOG;IACG,SAAS,CAAC,KAAK,EAAE,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC;IAclD;;;;;;;;;OASG;IACH,SAAS,CAAC,cAAc,CACtB,KAAK,EAAE,WAAW,EAClB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAC7B,IAAI;IAoBP;;;;;;OAMG;IACH,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAO3B;;;;;;OAMG;IACH,QAAQ,IAAI,MAAM;IAIlB;;;;OAIG;IACH,WAAW,IAAI,IAAI;IAOnB;;;;;OAKG;IACG,eAAe,CAAC,QAAQ,GAAE,OAAc,GAAG,OAAO,CAAC,IAAI,CAAC;IAO9D;;;;;OAKG;IACH,cAAc,IAAI,iBAAiB;IAInC;;;;;OAKG;IACH,cAAc,CAAC,IAAI,EAAE,KAAK,GAAG,IAAI;IAIjC;;;;;;;OAOG;IACH,kBAAkB,CAChB,QAAQ,EAAE,MAAM,EAChB,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAChC,iBAAiB;IAIpB;;;;;OAKG;IACH,gBAAgB,IAAI,IAAI;IAIxB;;;;;;;OAOG;IACG,eAAe,CACnB,QAAQ,EAAE,MAAM,EAChB,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAChC,OAAO,CAAC,OAAO,GAAG,SAAS,CAAC;IAI/B;;;;;;;OAOG;IACG,gBAAgB,CACpB,QAAQ,EAAE,MAAM,EAChB,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAChC,OAAO,CAAC,MAAM,GAAG,SAAS,CAAC;IAI9B;;;;;;;OAOG;IACG,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,KAAK,CAAC;CAGrE"}

package/out/utils/theme-util/theme-util.js

@@ -1,4 +1,5 @@
 import { clone } from 'ramda';
+import { CustomThemeUtil } from './custom-theme-util';
 /**
  * 主题工具类
  *
@@ -18,6 +19,14 @@ export class ThemeUtil {
          * @type {HTMLElement}
          */
         this.html = document.getElementsByTagName('html')[0];
+        /**
+         * 自定义主题工具类
+         *
+         * @protected
+         * @type {CustomThemeUtil}
+         * @memberof ThemeUtil
+         */
+        this.customUtil = {};
     }
     /**
      * 加载主题插件
@@ -92,4 +101,98 @@ export class ThemeUtil {
     getTheme() {
         return this.html.getAttribute('theme');
     }
+    /**
+     * 自定义主题
+     *
+     * @memberof ThemeUtil
+     */
+    customTheme() {
+        ibiz.overlay.drawer('IBizCustomTheme', undefined, {
+            width: 30,
+            placement: 'right',
+        });
+    }
+    /**
+     * 初始化自定义主题
+     *
+     * @return {*}  {Promise<void>}
+     * @memberof ThemeUtil
+     */
+    async initCustomTheme(needLoad = true) {
+        this.customUtil = new CustomThemeUtil(this);
+        if (needLoad) {
+            await this.customUtil.loadCustomTheme();
+        }
+    }
+    /**
+     * 获取自定义主题
+     *
+     * @return {*}  {ICustomThemeState}
+     * @memberof ThemeUtil
+     */
+    getCustomTheme() {
+        return this.customUtil.state;
+    }
+    /**
+     * 设置自定义主题
+     *
+     * @param {IData} data
+     * @memberof ThemeUtil
+     */
+    setCustomTheme(data) {
+        Object.assign(this.customUtil.state, data);
+    }
+    /**
+     * 预览自定义主题
+     *
+     * @param {string} themeTag
+     * @param {Record<string, string>} themeVars
+     * @return {*}  {ICustomThemeState}
+     * @memberof ThemeUtil
+     */
+    previewCustomTheme(themeTag, themeVars) {
+        return this.customUtil.previewCustomTheme(themeTag, themeVars);
+    }
+    /**
+     * 还原自定义主题
+     *
+     * @return {*}  {void}
+     * @memberof ThemeUtil
+     */
+    resetCustomTheme() {
+        return this.customUtil.clearCustomThemeParams();
+    }
+    /**
+     * 保存自定义主题
+     *
+     * @param {string} themeTag
+     * @param {Record<string, string>} themeVars
+     * @return {*}  {(Promise<boolean | undefined>)}
+     * @memberof ThemeUtil
+     */
+    async saveCustomTheme(themeTag, themeVars) {
+        return this.customUtil.saveCustomTheme(themeTag, themeVars);
+    }
+    /**
+     * 分享自定义主题
+     *
+     * @param {string} themeTag
+     * @param {Record<string, string>} themeVars
+     * @return {*}  {(Promise<string | undefined>)}
+     * @memberof ThemeUtil
+     */
+    async shareCustomTheme(themeTag, themeVars) {
+        return this.customUtil.shareCustomTheme(themeTag, themeVars);
+    }
+    /**
+     * 获取分享主题
+     *
+     * @param {string} userId
+     * @param {string} themeId
+     * @return {*}  {Promise<IData>}
+     * @memberof ThemeUtil
+     */
+    async getShareTheme(userId, themeId) {
+        return this.customUtil.getShareTheme(userId, themeId);
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ibiz-template/runtime",
-  "version": "0.7.19",
+  "version": "0.7.21",
   "description": "控制器包",
   "type": "module",
   "main": "out/index.js",
@@ -66,5 +66,5 @@
     "qx-util": "^0.4.8",
     "ramda": "^0.29.0"
   },
-  "gitHead": "621190b3f9acc682910f61b1f96d8bf7ab5355e9"
+  "gitHead": "cae794a2466f2ca5614332344f66f1797ea6a4f4"
 }