@tuya-sat/sdf-main-sdk 0.0.1-beta.1

package/src/lang/zh.json

@@ -0,0 +1,270 @@
+{
+  "translation": {
+    "login": {
+      "title": "SaaS开发框架Demo",
+      "tabs": {
+        "tele": "手机号",
+        "email": "邮箱"
+      },
+      "form": {
+        "username": {
+          "label": "账号",
+          "validate": {
+            "require": "请输入账号",
+            "pattern": "请输入正确的手机号码或邮箱账号",
+            "emailPattern": "请输入正确的邮箱",
+            "phonePattern": "请输入有效的电话号码"
+          },
+          "placeholder": "请输入手机号/邮箱"
+        },
+        "password": {
+          "label": "密码",
+          "validate": {
+            "require": "请输入密码",
+            "pattern": "密码长度 8-20 位，至少包含以下三种字符类型（数字、大写字母、小写字母、英文符号）"
+          },
+          "placeholder": "请输入密码"
+        },
+        "newPassword": {
+          "label": "新密码"
+        },
+        "phone": {
+          "label": "电话号码",
+          "phonePattern": "请输入有效的电话号码"
+        },
+        "code": {
+          "require": "请输入验证码",
+          "requireAccount": "请输入接收验证码地址",
+          "placeholder": "验证码",
+          "getCode": "获取验证码",
+          "len": "请输入6位数字验证码",
+          "countdown": "等待 "
+        },
+        "tenantId": {
+          "label": "租户ID/企业别名",
+          "placeholder": "请输入租户ID/企业别名",
+          "require": "请输入租户ID/企业别名",
+          "pattern": "租户ID/企业别名长度4-16位，必须以小写字母开头（支持小写字母、数字、连字符）"
+        }
+      },
+      "signIn": "登录",
+      "forgot": "忘记密码？",
+      "back2login": "返回登录",
+      "resetPwd": "重置密码",
+      "resetPwdSuccess": "密码修改成功，请使用新密码登录",
+      "text": "阅读并同意",
+      "service": "《服务条款》",
+      "legal": "《法律声明》",
+      "privacy": "《隐私政策》",
+      "admin_account_login": "管理员登录",
+      "sub_account_login": "子账号登录",
+      "lang": "简体中文",
+      "thirdLoginError": "三方登录失败"
+    },
+    "menu": {
+      "title": {
+        "default": "SaaS开发框架Demo",
+        "assets": "资产管理",
+        "devices": "设备管理",
+        "setting": "账号设置",
+        "permission": "角色权限",
+        "account": "用户管理"
+      },
+      "edition": {
+        "preview": "预览",
+        "latest": "最新",
+        "stable": "稳定",
+        "trial": "体验"
+      },
+      "logout": "退出登录"
+    },
+    "notice": {
+      "title": "消息详情",
+      "typeSelect": {
+        "placeholder": "消息类型",
+        "all": "全部",
+        "message": "消息通知",
+        "alert": "告警通知"
+      },
+      "originSelect": {
+        "placeholder": "消息来源",
+        "all": "全部",
+        "center": "消息中心(Web)",
+        "app": "App Push",
+        "short": "短信",
+        "email": "邮件",
+        "telephone": "电话"
+      },
+      "StatusSelect": {
+        "placeholder": "消息状态",
+        "all": "全部",
+        "readed": "已读",
+        "unread": "未读"
+      },
+      "buttons": {
+        "read": "全部标为已读",
+        "unread": "全部标为未读"
+      },
+      "badge": {
+        "title": "消息通知",
+        "type": "通知类型",
+        "message": "查看全部消息"
+      },
+      "tools": {
+        "button": {
+          "read": "标为已读",
+          "unread": "标为未读",
+          "delete": "删除",
+          "allRead": "全部标为已读"
+        },
+        "checkbox": {
+          "onlyViewUnread": "只看未读"
+        },
+        "select": {
+          "all": "全部类型",
+          "system": "系统通知",
+          "device": "设备消息",
+          "work": "业务信息"
+        },
+        "popconfirm": {
+          "title": "确定要删除选中的消息吗?",
+          "content": "删除之后不可恢复",
+          "cancel": "取消",
+          "ok": "确定"
+        },
+        "selectedAllContent": "已选择所有{{num}}条消息",
+        "itemsNums": "已选择本页{{num}}条消息",
+        "totalNums": "选择所有{{num}}条消息",
+        "cancelSelect": "取消选择",
+        "pread": "批量标为已读",
+        "punread": "批量标为未读",
+        "pdelete": "批量删除"
+      },
+      "table": {
+        "column": {
+          "content": "消息内容",
+          "status": "消息状态",
+          "type": "消息类型",
+          "source": "消息来源",
+          "time": "通知时间"
+        },
+        "render": {
+          "status": {
+            "read": "已读",
+            "unread": "未读"
+          }
+        },
+        "hover": {
+          "read": "标为已读",
+          "unread": "标为未读",
+          "del": "删除"
+        },
+        "delTip": "确认要删除消息吗?"
+      }
+    },
+    "setting": {
+      "title": "设置",
+      "account": "用户账号",
+      "phone": "手机号",
+      "email": "邮箱",
+      "modify": "修改",
+      "bindPhone": "绑定手机号",
+      "bindEmail": "绑定邮箱",
+      "modifyPhone": "修改手机号",
+      "modifyEmail": "修改邮箱",
+      "bind": "绑定",
+      "unBind": "未绑定",
+      "username": "用户名",
+      "role": "角色",
+      "password": "密码",
+      "modifyPwd": "修改密码",
+      "language": "语言",
+      "phoneLable": "请输入手机号",
+      "emailLable": "请输入邮箱",
+      "accountLable": "用户账号（登录账号）",
+      "name": "名称",
+      "form": {
+        "oldPassword": {
+          "label": "旧密码",
+          "validate": {
+            "require": "请输入旧密码",
+            "pattern": "密码长度 8-20 位，至少包含以下三种字符类型（数字、大写字母、小写字母、英文符号）"
+          }
+        },
+        "newPassword": {
+          "label": "新密码",
+          "validate": {
+            "require": "请输入新密码",
+            "pattern": "密码长度 8-20 位，至少包含以下三种字符类型（数字、大写字母、小写字母、英文符号）"
+          }
+        },
+        "confirm": {
+          "label": "确认新密码",
+          "validate": {
+            "require": "请再次输入新密码",
+            "pattern": "密码长度 8-20 位，至少包含以下三种字符类型（数字、大写字母、小写字母、英文符号）",
+            "unanimous": "两次密码输入不一致"
+          }
+        }
+      },
+      "modifySuccess": "修改成功"
+    },
+    "httpCodeText": {
+      "400": "请求错误",
+      "401": "未授权，请重新登录",
+      "403": "拒绝访问",
+      "404": "请求出错",
+      "408": "请求超时",
+      "500": "服务器错误",
+      "501": "服务未实现",
+      "502": "网络错误",
+      "503": "服务不可用",
+      "504": "网络超时,请重试尝试",
+      "505": "HTTP版本不受支持",
+      "default": "服务异常({{status}})",
+      "timeout": "请求超时",
+      "abort": "连接失败",
+      "callBack": "网络异常"
+    },
+    "appHint1": "扫描下方二维码，下载智慧行业App",
+    "appHint2": "探索更多移动端功能",
+    "backLoginPage": "返回登录页",
+    "backHome": "返回首页",
+    "pageError": "抱歉，您暂无权访问",
+    "page404": "抱歉，你访问的站点不存在",
+    "page500": "系统错误，请稍后重试",
+    "emptyPage": "暂无权限，请联系管理员添加权限",
+    "expirationPage": "该SaaS体验服务已到期，请联系开发人员进行付费",
+    "trial": "体验版",
+    "admin": "超级管理员",
+    "forgot": {
+      "title": "找回密码",
+      "resetPwd": "重置密码",
+      "tenantRole": "租户子账号",
+      "managerRole": "租户管理员账号",
+      "noAccount": "还没有账号？",
+      "toRegister": "租户注册"
+    },
+    "register": {
+      "form": {
+        "enterprise": {
+          "label": "企业/组织名称",
+          "validate": {
+            "require": "请输入企业/组织名称"
+          },
+          "placeholder": "请输入企业/组织名称"
+        },
+        "username": {
+          "label": "租户管理员账号"
+        }
+      },
+      "register": "注册租户",
+      "registerSuccess": "注册成功"
+    },
+    "relogin": {
+      "tip": "账号已在其他设备(浏览器)登录或已过期",
+      "btn": "重新登录",
+      "pwd": "如非本人操作，建议前往账号设置修改密码"
+    }
+  }
+}

package/src/micro-script/theme/index.ts

@@ -0,0 +1,29 @@
+import {
+  CustomizeVariableWithDarkLightChange,
+  DarkLightChange,
+  CustomizeVariableWithSingleTheme,
+  CustomVariable,
+  Fallback,
+  SingleTheme,
+} from './theme-css/subscriber';
+
+import {
+  isSupportCssVariable,
+  isSupportLightDarkSwitch,
+  isSpecificTheme,
+} from '@/utils/theme/base';
+
+let microThemeControl = new Fallback();
+if (isSupportLightDarkSwitch() && isSupportCssVariable()) {
+  microThemeControl = new CustomizeVariableWithDarkLightChange();
+} else if (isSpecificTheme() && isSupportCssVariable()) {
+  microThemeControl = new CustomizeVariableWithSingleTheme();
+} else if (isSupportLightDarkSwitch()) {
+  microThemeControl = new DarkLightChange();
+} else if (isSpecificTheme()) {
+  microThemeControl = new SingleTheme();
+} else if (isSupportCssVariable()) {
+  microThemeControl = new CustomVariable();
+}
+
+export { microThemeControl };

package/src/micro-script/theme/theme-css/static.js

@@ -0,0 +1,73 @@
+const themeScript = `
+(function () {
+  const oemAppId = OEM_APP_ID_PLACEHOLDER;
+
+  let base = OEM_APP_BASE_PLACEHOLDER;
+
+  console.log('base: ' + base);
+
+  if (!base.includes('http')) {
+    base = new URL(base, location.origin).href;
+  }
+
+  const initalTheme = INITAL_THEME_PLACEHOLDER;
+  const otherTheme = initalTheme === 'dark' ? 'light' : 'dark';
+
+  const darkCss = getDarkCssNode();
+  const lightCss = getLightCssNode();
+  const darkLink = darkCss ? darkCss.getAttribute('href') : '';
+  const lightLink = lightCss ? lightCss.getAttribute('href') : '';
+
+  function getOriginPath(theme) {
+    return theme == 'dark' ? darkLink : lightLink;
+  }
+
+  function getDarkCssNode() {
+    return document.querySelector('link[id="micro-dark-theme-css"]');
+  }
+  function getLightCssNode() {
+    return document.querySelector('link[id="micro-light-theme-css"]');
+  }
+
+  function createLink(path, theme) {
+    const linkDom = document.createElement('link');
+    linkDom.href = path;
+    linkDom.rel = 'stylesheet';
+    linkDom.setAttribute('reference-id', 'micro-light-theme-css');
+    linkDom.setAttribute('id', 'micro-unique-light-dark-id-' + theme);
+    document.head.insertBefore(linkDom, getLightCssNode());
+  }
+
+  function getAbosultePath(theme) {
+    const originPath = getOriginPath(theme);
+    const abosultePath = new URL(originPath, base).href;
+    return abosultePath;
+  }
+
+  function queryStyle(href) {
+    return document.querySelector(\`style[data-qiankun-href=\"\$\{href\}\"\]\`);
+  }
+
+  function subscriber(theme) {
+    if (!darkLink || !lightLink) {
+      return;
+    }
+    if (theme === initalTheme) {
+      //判断是否存在非初始主题的动态style，有 需要删除
+      const abosultePath = getAbosultePath(otherTheme);
+      const style = queryStyle(abosultePath);
+      style && document.head.removeChild(style);
+    } else {
+      //判断是否存在非初始主题的动态style，有 不动
+      const abosultePath = getAbosultePath(theme);
+      const style = queryStyle(abosultePath);
+      !style && createLink(abosultePath, theme);
+    }
+  }
+
+  darkLightChangeSubscriber.add(oemAppId, subscriber);
+})();
+
+`;
+
+export default themeScript;

package/src/micro-script/theme/theme-css/subscriber.ts

@@ -0,0 +1,201 @@
+import { getMicroAppId } from '@/utils';
+import {
+  getCurrentMicroResourceRoot,
+  HREF_REGEX,
+  DEFAULT_LINK_REGEX,
+  LIGHT_LINK_REGEX,
+  DARK_LINK_REGEX,
+  CSS_VARIABLE_STYLE_TAG_REGEX,
+  getMicroIdFromHtml,
+} from '../util/index';
+import type { Theme } from '@/utils/theme/base';
+import { LIGHT, getRenderTheme } from '@/utils/theme/base';
+import themeScript from './static.js';
+
+interface Subscriber {
+  (theme: Theme): void;
+}
+
+//主要为了剥离css变量
+function removeCssVariable(tpl: string) {
+  //移除微应用内css变量，方便主应用控制全局的css变量
+  return tpl.replace(CSS_VARIABLE_STYLE_TAG_REGEX, '');
+}
+
+//获取匹配亮色/暗色的正则
+function getLinkRegExp(theme: Theme) {
+  return theme === LIGHT ? LIGHT_LINK_REGEX : DARK_LINK_REGEX;
+}
+
+//获取亮色/暗色下的style的href
+function getMicroAppSpecificThemeLinkHref(tpl: string, theme: Theme) {
+  const linkRegExp = getLinkRegExp(theme);
+  const [link] = linkRegExp.exec(tpl) || [];
+  if (!link) {
+    return null;
+  }
+  const [, href] = HREF_REGEX.exec(link);
+  return href;
+}
+
+//获取初始亮/暗下的模板
+function getInitalThemeTpl(tpl: string, href: string) {
+  return (
+    tpl
+      //默认移除有效的light样式
+      .replace(DEFAULT_LINK_REGEX, '')
+      //往light link链接之前插入当前具体明暗的链接
+      .replace(LIGHT_LINK_REGEX, (match) => {
+        return `<link rel="stylesheet" href="${href}">${match}`;
+      })
+  );
+}
+
+//创建一个color-scheme的控制器
+function createMicroColorSchemeControl() {
+  return {
+    microAppWithThemeMap: new Map<string, boolean>(),
+    add(id: string, value: boolean) {
+      this.microAppWithThemeMap.set(id, value);
+    },
+    setColorScheme(id: string) {
+      const container = document.querySelector('#container') as HTMLElement;
+      if (!this.microAppWithThemeMap.get(id)) {
+        container.style['colorScheme'] = LIGHT;
+      } else {
+        container.style['colorScheme'] = 'inherit';
+      }
+    },
+  };
+}
+
+class Fallback {
+  changeTheme(value: unknown) {}
+  cannotExclude(url: string) {
+    return false;
+  }
+  beforeMount(app) {}
+  getTemplate(tpl: string) {
+    return tpl;
+  }
+}
+
+//单一亮/暗
+class SingleTheme extends Fallback {
+  microColorSchemeControl: ReturnType<typeof createMicroColorSchemeControl>;
+  theme: Theme;
+  constructor() {
+    super();
+    this.theme = getRenderTheme();
+    this.microColorSchemeControl = createMicroColorSchemeControl();
+  }
+  beforeMount(app: any): void {
+    this.microColorSchemeControl.setColorScheme(app.name);
+  }
+  getTemplate(tpl: string): string {
+    const id = getMicroAppId();
+    const styleHref = getMicroAppSpecificThemeLinkHref(tpl, this.theme);
+    if (!styleHref) {
+      this.microColorSchemeControl.add(id, false);
+      return tpl;
+    }
+    this.microColorSchemeControl.add(id, true);
+    const outputTpl = getInitalThemeTpl(tpl, styleHref);
+    return outputTpl;
+  }
+}
+
+//支持亮暗切换
+class DarkLightChange extends SingleTheme {
+  private subscribers = new Map();
+  constructor() {
+    super();
+    window.darkLightChangeSubscriber = this;
+  }
+  changeTheme(theme: Theme) {
+    this.theme = theme;
+    this.dispatch(getMicroAppId(), theme);
+  }
+  beforeMount(app) {
+    this.dispatch(app.name, this.theme);
+    super.beforeMount(app);
+  }
+  cannotExclude(url: string) {
+    return /(light|dark).[\s\S]+.css$/.test(url);
+  }
+  injectVarible(str: string, varibles: [string, string][]) {
+    let make = str;
+    for (const [key, value] of varibles) {
+      make = make.replace(key, JSON.stringify(value));
+    }
+    return make;
+  }
+  getTemplate(tpl: string) {
+    const id = getMicroIdFromHtml(tpl);
+    const styleHref = getMicroAppSpecificThemeLinkHref(tpl, this.theme);
+    if (!styleHref) {
+      this.microColorSchemeControl.add(id, false);
+      return tpl;
+    }
+    this.microColorSchemeControl.add(id, true);
+    const resourceRoot = getCurrentMicroResourceRoot(id);
+    const outputTpl = getInitalThemeTpl(tpl, styleHref).replace(
+      '</head>',
+      `
+    <script>
+    ${this.injectVarible(themeScript, [
+      ['OEM_APP_ID_PLACEHOLDER', id],
+      ['OEM_APP_BASE_PLACEHOLDER', resourceRoot],
+      ['INITAL_THEME_PLACEHOLDER', this.theme],
+      ['INITAL_HREF_PLACEHOLDER', styleHref],
+    ])}
+    </script>
+    </head>
+    `
+    );
+    return outputTpl;
+  }
+  add(id: string, subscriber: Subscriber) {
+    this.subscribers.set(id, subscriber);
+  }
+  clear() {
+    this.subscribers = new Map();
+  }
+  dispatch(id: string, theme: string) {
+    this.subscribers.get(id)?.(theme);
+  }
+}
+
+//css变量
+class CustomVariable extends Fallback {
+  removeCssVariable = removeCssVariable;
+  getTemplate(tpl: string): string {
+    return this.removeCssVariable(tpl);
+  }
+}
+
+//css变量 + 单一亮暗
+class CustomizeVariableWithSingleTheme extends SingleTheme {
+  removeCssVariable = removeCssVariable;
+  getTemplate(tpl: string): string {
+    const initalThemeTpl = super.getTemplate(tpl);
+    return this.removeCssVariable(initalThemeTpl);
+  }
+}
+
+//css变量 + 明暗切换
+class CustomizeVariableWithDarkLightChange extends DarkLightChange {
+  removeCssVariable = removeCssVariable;
+  getTemplate(tpl: string): string {
+    return this.removeCssVariable(super.getTemplate(tpl));
+  }
+}
+
+export {
+  SingleTheme,
+  DarkLightChange,
+  CustomVariable,
+  CustomizeVariableWithSingleTheme,
+  CustomizeVariableWithDarkLightChange,
+  Fallback,
+};

package/src/micro-script/theme/util/index.ts

@@ -0,0 +1,58 @@
+import { micApps } from '@/utils';
+
+const HREF_REGEX = /href="([\s\S]+?)"/;
+const DEFAULT_LINK_REGEX = /<link[^>]+?id="micro-default-theme-css"[^>]*?>/;
+const LIGHT_LINK_REGEX = /<link[^>]+?id="micro-light-theme-css"[^>]*?>/;
+const DARK_LINK_REGEX = /<link[^>]+?id="micro-dark-theme-css"[^>]*?>/;
+const CSS_VARIABLE_STYLE_TAG_REGEX =
+  /<style[^>]+?id="micro-css-variable">[\s\S]*?<\/style>/;
+const MICRO_APP_ID_REGEX = /<meta[\s\S]+?content="([\s\S]+?)"\/>/;
+
+function getCurrentMicroResourceRoot(id: string) {
+  let currentApp = null;
+  for (const app of micApps()) {
+    if (app.oem_micro_app_id === id) {
+      currentApp = app;
+      break;
+    }
+  }
+  if (!currentApp) return;
+  const { resource } = currentApp;
+  const resourceRoot = resource.replace(/index.html$/, '');
+  return resourceRoot;
+}
+
+function processHtmlInTheme(url: string, apps: any[]) {
+  return {
+    async text() {
+      const res = await fetch(url);
+      if (res.ok) {
+        const microApp = apps.find((item) => item.entry === url);
+        const text = await res.text();
+        if (microApp) {
+          return text.replace(
+            '<head>',
+            `<head><meta name="micro-app-id" content="${microApp.name}"/>`
+          );
+        }
+        return text;
+      }
+      return '';
+    },
+  };
+}
+
+function getMicroIdFromHtml(tpl) {
+  return MICRO_APP_ID_REGEX.exec(tpl)?.[1];
+}
+
+export {
+  HREF_REGEX,
+  DEFAULT_LINK_REGEX,
+  LIGHT_LINK_REGEX,
+  DARK_LINK_REGEX,
+  CSS_VARIABLE_STYLE_TAG_REGEX,
+  getCurrentMicroResourceRoot,
+  processHtmlInTheme,
+  getMicroIdFromHtml,
+};