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

package/src/utils/theme/changeMenuCssVariable.ts

@@ -0,0 +1,176 @@
+import { updateCSS } from 'rc-util/lib/Dom/dynamicCSS';
+import type {
+  Theme,
+  UserColorConfig,
+  ColorConfig,
+  UserColorConfigWithThemeAndMenu,
+} from './base';
+
+//相当于antd的css变量前缀
+const MAIN_PREFIX = 'main';
+
+//相当于动态菜单的变量前缀
+const MAIN_MENU_PREFIX = `${MAIN_PREFIX}-app`;
+
+const PRIMARY_COLOR_VARIABLE = `var(--${MAIN_PREFIX}-primary-color)`;
+const PRIMARY_COLOR_ACTIVE_VARIABLE = `var(--${MAIN_PREFIX}-primary-1)`;
+
+const LIGHT_MENU = {
+  menuBg: '#fff', //底色
+  menuText: 'rgba(0, 0, 0, 0.85)', //文案&icon色值
+  menuBgExpand: '#fff', //展开底色
+  menuTextExpand: 'rgba(0,0,0,0.85)', //展开文案&icon色值
+  menuBgActived: PRIMARY_COLOR_ACTIVE_VARIABLE, //选中底色
+  menuTextActived: PRIMARY_COLOR_VARIABLE, //选中文案&icon色值
+  // 顶部导航
+  navigateBg: '#fff',
+  navigateText: 'rgba(0, 0, 0, 0.85)',
+  navigateTextHover: PRIMARY_COLOR_VARIABLE,
+  navigateBoundary: '#f0f0f0',
+};
+
+const LIGHT_MENU_GROUP = {
+  ...LIGHT_MENU,
+  // 分组菜单
+  menuSlideBg: '#fff',
+  menuSlideText: 'rgba(102, 102, 102, 1)',
+  menuSlideBgActived: '#fff',
+  menuSlideTextActived: PRIMARY_COLOR_VARIABLE,
+  menuSlideBoundary: '#f0f0f0',
+};
+
+const DARK_MENU = {
+  menuBg: '#2C303F', //底色
+  menuText: 'rgba(255, 255, 255, 0.85)', //文案&icon色值
+  menuBgExpand: '#2C303F', //展开底色
+  menuTextExpand: 'rgba(255,255,255,0.85)', //展开文案&icon色值
+  menuBgActived: '#202332', //选中底色
+  menuTextActived: '#ffffff', //选中文案&icon色值
+  // 顶部导航
+  navigateBg: '#2C303F',
+  navigateText: '#ffffff',
+  navigateTextHover: PRIMARY_COLOR_VARIABLE,
+  navigateBoundary: 'rgba(255,255,255,0.12)',
+};
+
+const DARK_MENU_GROUP = {
+  ...DARK_MENU,
+  // 分组菜单
+  menuSlideBg: '#2C303F',
+  menuSlideText: 'rgba(255, 255, 255, 0.85)',
+  menuSlideBgActived: '#202332',
+  menuSlideTextActived: '#ffffff',
+  menuSlideBoundary: 'rgba(255,255,255,0.12)',
+};
+
+const DEFAULT_USER_CONFIG = {
+  normal: {
+    light: LIGHT_MENU,
+    dark: DARK_MENU,
+  },
+  group: {
+    light: LIGHT_MENU_GROUP,
+    dark: DARK_MENU_GROUP,
+  },
+};
+
+export function hexToRgba(hex: string, opacity: number) {
+  const [, hexValue] = hex.split('#');
+  const [i, ii, iii, iv, v, vi] = hexValue.split('');
+  const r = parseInt(`${i}${ii}`, 16);
+  const g = parseInt(`${iii}${iv}`, 16);
+  const b = parseInt(`${v}${vi}`, 16);
+  return `rgba(${r},${g},${b},${opacity})`;
+}
+
+function processUserConfig(config: UserColorConfig): ColorConfig {
+  return Object.entries(config).reduce((prev: ColorConfig, item) => {
+    const [key, value] = item;
+    const { hex, a } = value;
+    prev[key] = hexToRgba(hex, a);
+    return prev;
+  }, {});
+}
+
+function getMenuType() {
+  return window._SDF.saas.entries.entry_mode;
+}
+
+function getDefaultConfig({
+  theme,
+  menuType,
+}: {
+  theme: Theme;
+  menuType: `${keyof UserColorConfigWithThemeAndMenu}`;
+}) {
+  return DEFAULT_USER_CONFIG[menuType][theme];
+}
+
+export default function changeMenuCssVariable({
+  menuColor,
+  theme,
+  prefix = MAIN_MENU_PREFIX,
+}: {
+  menuColor: UserColorConfigWithThemeAndMenu | null;
+  theme: Theme;
+  prefix?: string;
+}) {
+  const menuType = getMenuType();
+  const color = menuColor?.[menuType]?.[theme] || {};
+
+  const combinedConfig = {
+    ...getDefaultConfig({ theme, menuType }),
+    ...processUserConfig(color),
+  };
+
+  const {
+    menuBg,
+    menuText,
+    menuBgExpand,
+    menuTextExpand,
+    menuBgActived,
+    menuTextActived,
+    menuSlideBg,
+    menuSlideText,
+    menuSlideBgActived,
+    menuSlideTextActived,
+    menuSlideBoundary,
+    navigateBg,
+    navigateText,
+    navigateTextHover,
+    navigateBoundary,
+  } = combinedConfig;
+
+  const cssList = {
+    [`--${prefix}-menu-bg`]: menuBg, //底色
+    [`--${prefix}-menu-text`]: menuText, //文案&icon色值
+    [`--${prefix}-menu-bg-expand`]: menuBgExpand, //展开底色
+    [`--${prefix}-menu-text-expand`]: menuTextExpand, //展开文案&icon色值
+    [`--${prefix}-menu-bg-actived`]: menuBgActived, //选中底色
+    [`--${prefix}-menu-text-actived`]: menuTextActived, //选中文案&icon色值
+    // 分组菜单
+    [`--${prefix}-menu-slide-bg`]: menuSlideBg,
+    [`--${prefix}-menu-slide-text`]: menuSlideText,
+    [`--${prefix}-menu-slide-bg-actived`]: menuSlideBgActived,
+    [`--${prefix}-menu-slide-text-actived`]: menuSlideTextActived,
+    [`--${prefix}-menu-slide-boundary`]: menuSlideBoundary,
+    // 顶部导航
+    [`--${prefix}-navigate-bg`]: navigateBg,
+    [`--${prefix}-navigate-text`]: navigateText,
+    [`--${prefix}-navigate-text-hover`]: navigateTextHover,
+    [`--${prefix}-navigate-boundary`]: navigateBoundary,
+  };
+
+  const css = Object.keys(cssList).reduce((prev, key) => {
+    return `${prev}${key}:${cssList[key]};\n`;
+  }, '');
+
+  updateCSS(
+    `
+  :root {
+    ${css}
+  }
+  `,
+    `-${prefix}-menu-dynamic-theme`,
+  );
+}

package/src/utils/theme/index.ts

@@ -0,0 +1,85 @@
+import { useState } from 'react';
+import { microThemeControl } from '@/micro-script/theme';
+import { changeCssVarible } from './changeCssVariable';
+import changeMenuCssVariable, { hexToRgba } from './changeMenuCssVariable';
+import { themeSubscribe } from './store';
+import type { Theme } from './base';
+import {
+  LIGHT,
+  DARK,
+  getSupportedTheme,
+  getCssVarible,
+  getDynamicMenuTheme,
+  getRenderTheme,
+} from './base';
+
+function createDisableTransition() {
+  const style = document.createElement('style');
+  style.textContent = `
+  *{
+    transition:none !important;
+  }
+  `;
+  document.head.appendChild(style);
+  setTimeout(() => {
+    // 可能会有延迟
+    document.head.removeChild(style);
+  }, 200);
+}
+
+function changeMainCssLink(theme: Theme) {
+  createDisableTransition();
+  const link = document.querySelector('#macro-dark-css');
+  link.setAttribute('rel', theme === DARK ? 'stylesheet' : 'stylesheet/css');
+  document.body.setAttribute('class', theme);
+  document.querySelector('html').style['colorScheme'] = theme;
+  themeSubscribe.publish(theme);
+}
+
+function getRenderCssVariable(theme: Theme) {
+  const supportedTheme = getSupportedTheme();
+  const { primaryColor, primaryColorInAll } = getCssVarible();
+  let _primaryColor = primaryColor;
+  if (supportedTheme === 'all' && theme === DARK && primaryColorInAll) {
+    _primaryColor = primaryColorInAll;
+  }
+  if (typeof _primaryColor === 'object') {
+    const { hex, a } = _primaryColor;
+    _primaryColor = hexToRgba(hex, a);
+  }
+  return {
+    primaryColor: _primaryColor as string,
+  };
+}
+
+function changeTheme(theme: Theme) {
+  const renderVariable = getRenderCssVariable(theme);
+  const menuColor = getDynamicMenuTheme();
+  changeMainCssLink(theme);
+  changeCssVarible(renderVariable, 'main', theme);
+  changeCssVarible(renderVariable, 'ant', theme);
+  changeMenuCssVariable({
+    menuColor,
+    theme,
+  });
+  microThemeControl.changeTheme(theme);
+  window.localStorage.setItem('theme', theme);
+}
+
+function useTheme() {
+  const [theme, setTheme] = useState(getRenderTheme);
+  function _changeTheme() {
+    const willRenderTheme = theme === LIGHT ? DARK : LIGHT;
+    changeTheme(willRenderTheme);
+    setTheme(willRenderTheme);
+  }
+  return { theme, changeTheme: _changeTheme };
+}
+
+function initalTheme(cb?: () => void) {
+  const renderTheme = getRenderTheme();
+  changeTheme(renderTheme);
+  cb && cb();
+}
+
+export { changeTheme, useTheme, initalTheme };

package/src/utils/theme/store.ts

@@ -0,0 +1,37 @@
+import PubSub from 'pubsub-js';
+import type { Theme } from './base';
+import { LIGHT } from './base';
+
+const THEME_TYPE = 'CHANGE THEME';
+
+function createSubscribe<T, P>(initalValue: T, type: string) {
+  const state = {
+    value: initalValue,
+  };
+
+  const getValue = () => state.value;
+
+  const publish = (value: T) => {
+    state.value = value;
+    PubSub.publish(type, value);
+  };
+
+  const subscribe = (cb: P, callImmediately: boolean) => {
+    PubSub.subscribe(type, cb);
+    callImmediately && publish(getValue());
+    return () => {
+      PubSub.unsubscribe(cb);
+    };
+  };
+
+  return {
+    subscribe,
+    getValue,
+    publish,
+  };
+}
+
+export const themeSubscribe = createSubscribe<
+  Theme,
+  (type: typeof THEME_TYPE, value: Theme) => void
+>(LIGHT, THEME_TYPE);

package/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "jsx": "react-jsx",
+    "lib": ["ES2021", "DOM"],
+    "module": "ESNext",
+    "target": "es6",
+    "composite": false,
+    "declaration": true,
+    "declarationMap": true,
+    "declarationDir": "dist",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "inlineSources": false,
+    "isolatedModules": false,
+    "moduleResolution": "node",
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "preserveWatchOutput": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "resolveJsonModule": true
+  },
+  "include": ["./src", "./typings.d.ts"]
+}

package/typings.d.ts

@@ -0,0 +1,10 @@
+declare module '*.css';
+declare module '*.less';
+declare module '*.png';
+declare module '*.svg' {
+  export function ReactComponent(
+    props: React.SVGProps<SVGSVGElement>
+  ): React.ReactElement;
+  const url: string;
+  export default url;
+}

package/webpack.config.js

@@ -0,0 +1,103 @@
+const path = require('path');
+const webpack = require('webpack');
+const fs = require('fs');
+const BundleAnalyzerPlugin =
+  require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+module.exports = {
+  mode: 'development',
+  entry: path.join(__dirname, '/src/index.tsx'),
+  target: ['web', 'es5'],
+  output: {
+    filename: '[name].bundle.js',
+    chunkFilename: '[name].[hash:8].chunk.js',
+    path: path.join(__dirname, '/dist'),
+    library: {
+      type: 'commonjs2',
+    },
+  },
+  externals: {
+    react: 'react',
+    antd: 'antd',
+    moment: 'moment',
+    '@tuya-sat/galaxy': '@tuya-sat/galaxy',
+    axios: 'axios',
+  },
+  resolve: {
+    extensions: ['.js', '.tsx', '.ts'],
+    fallback: {
+      url: require.resolve('url/'),
+    },
+  },
+  plugins: [
+    // new BundleAnalyzerPlugin(),
+    new webpack.ProvidePlugin({
+      process: 'process/browser',
+      Buffer: ['buffer', 'Buffer'],
+    }),
+    new MiniCssExtractPlugin(),
+  ],
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js', 'jsx'],
+    alias: {
+      '@': path.resolve(__dirname, 'src'),
+    },
+  },
+  module: {
+    rules: [
+      {
+        test: /.(ts|tsx)$/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: [
+              [
+                '@babel/preset-env',
+                {
+                  useBuiltIns: 'usage',
+                  corejs: 3,
+                },
+              ],
+              ['@babel/preset-react', { runtime: 'automatic' }],
+              '@babel/preset-typescript',
+            ],
+          },
+        },
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)?$/,
+        type: 'asset/resource',
+      },
+      {
+        test: /.(css|less)$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          {
+            loader: 'postcss-loader',
+            options: {
+              postcssOptions: {
+                plugins: ['autoprefixer'],
+              },
+            },
+          },
+          {
+            loader: 'less-loader',
+            options: {
+              lessOptions: {
+                modifyVars: {
+                  'ant-prefix': 'main',
+                  'macro-entry-name': 'custom-light',
+                  'macro-variable-location': 'antd/lib/style/variable',
+                },
+                javascriptEnabled: true,
+              },
+            },
+          },
+        ],
+      },
+    ],
+  },
+};