quick-platform 1.0.46

package/src/theme/react/hook.ts

@@ -0,0 +1,42 @@
+import React, { useContext, useState } from 'react';
+
+import { Color } from '../define';
+import { setPrimaryColor } from '../lib';
+
+const ThemeContext = React.createContext({
+  colorPrimary: Color.PrimaryColor,
+  setPrimaryColor(_color: string) {},
+});
+
+export const ReactThemeHOC = <T extends {}>(
+  Component: React.FunctionComponent<T>,
+): React.FC<T> => {
+  return (props) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [primaryColor, setPrimaryColor] = useState(Color.PrimaryColor);
+    return React.createElement(
+      ThemeContext.Provider,
+      {
+        key: 'theme-hoc',
+        value: {
+          colorPrimary: primaryColor,
+          setPrimaryColor(color) {
+            setPrimaryColor(color);
+          },
+        },
+      },
+      [React.createElement(Component, { ...props, key: 'theme-hoc-component' })],
+    );
+  };
+};
+
+export const useThemePrimaryColor = () => {
+  const context = useContext(ThemeContext);
+  return {
+    color: context.colorPrimary,
+    set(color: string) {
+      context.setPrimaryColor(color);
+      setPrimaryColor(color);
+    },
+  };
+};

package/src/theme/react/index.ts

@@ -0,0 +1,14 @@
+import { ReactThemeHOC, useThemePrimaryColor } from './hook';
+
+export const ThemeHOC = <T extends {}>(
+  Component: React.FC<T>
+  // options: { antd?: boolean; iconPark?: boolean; antdPrefixCls?: string } = {},
+): React.FC<T> => {
+  // const { antd = true } = options;
+  // if (antd) {
+  //   Component = AntdHOC(Component, { prefixCls: options.antdPrefixCls });
+  // }
+  return ReactThemeHOC(Component);
+};
+
+export { useThemePrimaryColor };

package/src/theme/uno.ts

@@ -0,0 +1,218 @@
+import { Color, Font, Size, Style } from './define';
+
+const prefix = 'q-';
+
+const convertToCss = (obj: any) => {
+  const toUnit = (value: string | number) => {
+    if (typeof value === 'number') return value + 'px';
+    return value;
+  };
+  return Object.keys(obj).reduce<any>((css, key) => {
+    css[toLine(key)] = toUnit(obj[key]); //todo 转rem
+    return css;
+  }, {});
+};
+
+const colors = (() => {
+  const convertToConfig = (origin: any, colors: any) => {
+    return Object.keys(colors).reduce<any>((map, key) => {
+      const varKey = Color.generateVar(key);
+      map['colors'][prefix + key] = `var(${varKey})`; //colors[key];
+      map['preflights'].push(
+        `.bg-${prefix}${key}{ background-color:var(${varKey})}\n.text-${prefix}${key}{ color:var(${varKey})}`
+      );
+      map['vars'].push(`${varKey}:${colors[key]};`);
+      return map;
+    }, origin);
+  };
+  return [
+    Color.BrandColor,
+    // Color.NeutralColor,
+    // Color.NeutralHelperColor,
+    // Color.FunctionalColor,
+    // Color.FunctionalHelperColor,
+    { primary: Color.PrimaryColor },
+  ].reduce(convertToConfig, {
+    colors: {},
+    preflights: [],
+    vars: [],
+  });
+})();
+
+const toLine = (str: string) => {
+  return str.replace(/\B([A-Z])/g, '-$1').toLowerCase();
+};
+
+const toCamel = (str: string) => {
+  return str
+    .replace(/\-(\w)/g, function(_, letter) {
+      return letter.toUpperCase();
+    })
+    .replace(/^[a-z]/, m => m.toUpperCase());
+};
+
+const fonts = (() => {
+  const results = {
+    rules: [] as [RegExp, Function][],
+  };
+
+  const convertToRules = (rule: RegExp, fonts: any) => {
+    results.rules!.push([
+      rule,
+      ([_, match]: any) => {
+        const name = toCamel(match);
+        if (fonts[name]) return convertToCss(fonts[name]);
+        return {};
+      },
+    ]);
+  };
+  convertToRules(/^text-q-([a-zA-Z-]+)$/, Font.TextFont);
+  convertToRules(/^title-q-([a-zA-Z-]+)$/, Font.TitleFont);
+  return results;
+})();
+
+const size = (() => {
+  const results = {
+    shortcuts: [] as [RegExp, Function][],
+    vars: {},
+  };
+  const matchCovert = (match: string[]) => ({
+    origin: match[0],
+    type: match[1],
+    value: match[2],
+  });
+  const convertToShortCuts = (
+    rule: RegExp,
+    size: any,
+    {
+      prefix = '',
+      covert = matchCovert,
+    }: {
+      prefix?: string;
+      covert?: typeof matchCovert;
+    }
+  ) => {
+    results.shortcuts!.push([
+      rule,
+      (match: any) => {
+        const { origin: _, type, value } = covert(match);
+        if (/title|text|top/.test(type)) return _;
+        if (!prefix) {
+          // 不为数字的情况，针对内置的样式需要过滤处理
+          if (/^(border)|(rd)|shadow/.test(type)) return _;
+        }
+
+        if (size[prefix + value]) {
+          if (Array.isArray(type))
+            return type.map(t => `${t}-${size[prefix + value]}px`).join(' ');
+          return `${type}-${size[prefix + value]}px`; //todo toRem
+        }
+        return _;
+      },
+    ]);
+  };
+  convertToShortCuts(/^(.*)-q-(\d+)$/, Size.BaseSize, { prefix: 'size-' });
+  // convertToShortCuts(/^(.*)-q-([a-z]*)$/, Size.ComponentSize, {});
+  convertToShortCuts(/^(m(-[rltbxy]+)?)-q-([a-z]*)$/, Size.MarginSize, {
+    covert(match) {
+      const res = matchCovert(match);
+      res.value = match[3];
+      if (res.type === 'm-lr' || res.type === 'm-x') {
+        res.type = ['m-l', 'm-r'] as any;
+      }
+      if (res.type === 'm-tb' || res.type === 'm-y') {
+        res.type = ['m-t', 'm-b'] as any;
+      }
+      return res;
+    },
+  });
+  convertToShortCuts(/^(p(-[rltbxy]+)?)-q-([a-z]*)$/, Size.MarginSize, {
+    covert(match) {
+      const res = matchCovert(match);
+      res.value = match[3];
+      if (res.type === 'p-lr' || res.type === 'p-x') {
+        res.type = ['p-l', 'p-r'] as any;
+      }
+      if (res.type === 'p-tb' || res.type === 'p-y') {
+        res.type = ['p-t', 'p-b'] as any;
+      }
+
+      return res;
+    },
+  });
+
+  convertToShortCuts(/^(gap)-q-([a-z]*)$/, Size.MarginSize, {});
+
+  return results;
+})();
+
+const styles = (() => {
+  const results = {
+    rules: [] as [RegExp, Function, any][],
+  };
+
+  const convertToRules = (rule: RegExp, style: any, convert = convertToCss) => {
+    results.rules!.push([
+      rule,
+      ([_, match]: any) => {
+        const name = toCamel(match);
+        if (style[name]) return convert(style[name]);
+        return {};
+      },
+      {
+        // layer: 'weight-lower',
+      },
+    ]);
+  };
+  convertToRules(/^rd-q-([a-zA-Z-]+)$/, Style.BorderRadius);
+  convertToRules(/^border-q-([a-zA-Z-]+)$/, Style.Border);
+  ['left', 'right', 'bottom', 'top'].forEach(dir => {
+    convertToRules(
+      new RegExp(`^border-${dir.slice(0, 1)}-${prefix}([a-zA-Z-]+)$`),
+      Style.Border,
+      style => {
+        return {
+          [`border-${dir}`]: `${style.borderWidth}px ${style.borderStyle} ${style.borderColor}`,
+        };
+      }
+    );
+  });
+  convertToRules(/^shadow-q-([a-zA-Z0-9-]+)$/, Style.Shadow, shadow => {
+    return {
+      'box-shadow': `${shadow.offsetX}px ${shadow.offsetY}px ${shadow.blurRadius}px ${shadow.spreadRadius}px ${shadow.color}`,
+    };
+  });
+  return results;
+})();
+
+export const UnoConfig = () => {
+  return {
+    // ...UnoCSS options
+    content: {
+      pipeline: {
+        include: ['src/**/*.{js,ts,tsx}'],
+      },
+    },
+    rules: [...fonts.rules!, ...styles.rules!],
+    theme: {
+      colors: colors.colors,
+    },
+    shortcuts: [...size.shortcuts],
+    layers: {
+      default: 1,
+      'weight-lower': -1,
+    },
+    preflights: [
+      {
+        getCSS() {
+          return `:root{${colors.vars.join('\n')} }`;
+        },
+      },
+      {
+        getCSS() {
+          return colors.preflights;
+        },
+      },
+    ],
+  };
+};

package/src/utils/i18n.ts

@@ -0,0 +1,84 @@
+import { getSystem } from '../business';
+import { isMicroApp } from './utils';
+
+const baseUrl =
+  'https://quick-multilingual.obs.ap-southeast-3.myhuaweicloud.com';
+
+const langMap = {
+  'zh-CN': 'zh',
+  'en-US': 'en',
+  ko: 'ko',
+  ja: 'ja',
+  'zh-TW': 'zh-tw',
+};
+
+const getI18nConfigUrl = (
+  env: 'test' | 'dev' | 'prod',
+  name: string,
+  lang: 'zh-CN' | 'en-US' | 'ko' | 'ja' | 'zh-TW'
+) => {
+  if (env === 'prod') return `${baseUrl}/${name}/${langMap[lang]}.json`;
+  return `${baseUrl}/${name}/${env}/${langMap[lang]}.json`;
+};
+
+const loadRemoteI18n = (
+  env: string,
+  name: string,
+  lang: 'zh-CN' | 'en-US' | 'ko' | 'ja' | 'zh-TW'
+) => {
+  let url = '';
+  if (env === 'dev') {
+    url = getI18nConfigUrl('dev', name, lang);
+  } else {
+    url = getI18nConfigUrl(env === 'prod' ? 'prod' : 'test', name, lang);
+  }
+  return fetch(`${url}?t=${Date.now()}`)
+    .then(res => {
+      return res.json();
+    })
+    .catch(() => ({}));
+};
+
+const $$i18n = (text: string, value: Record<string, any> = {}) => {
+  return text.replace(/\{[a-zA-Z_0-9]*\}/g, key => {
+    return value[key.slice(1, -1)];
+  });
+};
+
+const initI18n = (name: string, env?: string) => {
+  const messages: Record<string, string> = {};
+  const system = getSystem();
+
+  return {
+    messages,
+    setup() {
+      const lang: any = (() => {
+        if (isMicroApp) return system.lang;
+        return (
+          window.localStorage.getItem('quick_local_debug_lang') || system.lang
+        );
+      })();
+      return loadRemoteI18n(env || 'prod', name, lang).then(lang => {
+        Object.assign(messages, lang);
+      });
+    },
+    i18n(key: string, value?: Record<string, string>) {
+      const content = messages[key];
+      if (typeof content === 'undefined') return key;
+      if (!value) return content;
+      return content.replace(/\{[a-zA-Z_0-9]*\}/g, key => {
+        return value[key.slice(1, -1)];
+      });
+    },
+  };
+};
+
+export const installI18n = (name: string, env?: string) => {
+  const { i18n, setup, messages } = initI18n(name, env);
+  return {
+    $i18n: i18n,
+    $$i18n,
+    messages,
+    loadPromise: setup(),
+  };
+};

package/src/utils/image.ts

@@ -0,0 +1,52 @@
+import heic2any from 'heic2any';
+
+const handlerBlob = (url: string, blob: Blob) =>
+  new Promise<string>((resolve, reject) => {
+    const img = new window.Image();
+    img.src = URL.createObjectURL(blob);
+    img.onload = resolve.bind(null, img.src);
+    img.onerror = reject.bind(null, url);
+  });
+
+// eslint-disable-next-line max-len
+const createFetch = (handler: (url: string) => Promise<Blob>) => (
+  url: string
+): Promise<string> =>
+  handler(url)
+    .then(handlerBlob.bind(null, url))
+    .catch(() => Promise.reject(url));
+
+// eslint-disable-next-line max-len
+const tryHeic = createFetch(url =>
+  fetch(url, { headers: {}, mode: 'cors' })
+    .then(res => res.blob())
+    .then(blob => heic2any({ blob }))
+    .then(blob => {
+      if (Array.isArray(blob)) return blob[0];
+      return blob;
+    })
+);
+
+// const tryProxy = createFetch((url) => fetch(`/store/stream/downloadFileStream?fileUrl=${encodeURIComponent(url)}`).then((res) => res.blob()));
+
+const stack: Map<string, Promise<string>> = new Map();
+const tryCache = (url: string, fetch: (url: string) => Promise<string>) => {
+  if (stack.has(url)) return stack.get(url)!;
+  const promise = fetch(url);
+  stack.set(url, promise);
+  promise.finally(() => {
+    stack.delete(url);
+  });
+  return promise;
+};
+
+const tryImageTranscode = function(
+  url: string,
+  customTry?: (url: string) => Promise<Blob>
+) {
+  if (!customTry) return tryCache(url, () => tryHeic(url));
+  const customTryProxy = createFetch(customTry);
+  return tryCache(url, () => tryHeic(url).catch(customTryProxy));
+};
+
+export { tryImageTranscode };

package/src/utils/index.ts

@@ -0,0 +1,9 @@
+import { isMicroApp } from './utils';
+
+export * from './image';
+
+export * from './request';
+
+export * from './i18n';
+
+export { isMicroApp };

package/src/utils/localstorage.ts

@@ -0,0 +1,32 @@
+/*
+ * @Author: zhaoxuan (zhaoxuan@quickcep.com)
+ * @LastEditors: zhaoxuan (zhaoxuan@quickcep.com)
+ * @Date: 2023-05-10 13:42:03
+ * @Description:
+ * @LastEditDescription:
+ * @LastEditTime: 2023-05-10 17:36:24
+ */
+const ls = {
+  getData(key: string) {
+    const data = window.localStorage.getItem(key);
+    if (data) {
+      try {
+        return JSON.parse(data);
+      } catch (e) {
+        console.error(e);
+      }
+    }
+    return null;
+  },
+  setData(key: string, value: any) {
+    try {
+      window.localStorage.setItem(key, JSON.stringify(value));
+    } catch (e) {
+      console.error(e);
+    }
+  },
+  removeItem(key: string) {
+    window.localStorage.removeItem(key);
+  },
+};
+export default ls;

package/src/utils/request.ts

@@ -0,0 +1,173 @@
+import axios, { AxiosInstance, CancelTokenSource } from 'axios';
+const CancelToken = axios.CancelToken;
+
+export interface IResponse<Data> {
+  code: number;
+  message: string;
+  success: boolean;
+  data: Data;
+}
+export interface IResponsePage<Data> {
+  pageIndex: number; // 当前分页
+  pageSize: number; // 分页条数
+  total: number; // 总数
+  row: Data[];
+}
+export type TPageRequest<Params> = {
+  pageIndex?: number;
+  pageSize?: number;
+} & Params;
+
+interface IRequestConfig {
+  cancelTokenSource?: CancelTokenSource;
+}
+type TCanceler = (reason?: string) => void;
+
+type IMethod = <D = any, P extends Record<string, any> = any>(
+  url: string,
+  params?: P,
+  config?: IRequestConfig
+) => Promise<D>;
+
+interface TCancelCreator {
+  <
+    T extends (
+      url: string,
+      params?: any,
+      config?: IRequestConfig
+    ) => ReturnType<IMethod>
+  >(
+    request: T
+  ): (...args: Parameters<T>) => [ReturnType<T>, TCanceler];
+  <T extends (params?: any, config?: IRequestConfig) => ReturnType<IMethod>>(
+    request: T
+  ): (...args: Parameters<T>) => [ReturnType<T>, TCanceler];
+}
+
+const createMethods = (
+  inst: AxiosInstance,
+  requestQueue: CancelTokenSource[]
+) => {
+  return ['get', 'post'].map(method => {
+    return <D = any, P extends Record<string, any> = any>(
+      url: string,
+      params?: P,
+      config?: IRequestConfig
+    ) => {
+      const source = config?.cancelTokenSource || CancelToken.source();
+      delete config?.cancelTokenSource;
+      const requestConfig = {
+        [method === 'get' ? 'params' : 'data']: params,
+      };
+      requestQueue.push(source);
+
+      const requestUrl = url.replace(/\{([a-zA-Z]+)\}/g, (_match, key) => {
+        if (!params) return key;
+        const value = params[key] || key;
+        /**兼容不删除的场景*/
+        if (!params['saveQuery']) {
+          delete params[key];
+        } else {
+          console.log('params', params);
+          delete params['saveQuery'];
+        }
+        return value;
+      });
+      return inst
+        .request<IResponse<D>>({
+          url: requestUrl,
+          method: method.toUpperCase() as any,
+          cancelToken: source.token,
+          ...requestConfig,
+          ...(config || {}),
+        })
+        .then(res => res?.data)
+        .then(res => {
+          if (!(res as any).success) return Promise.reject(res);
+          return res.data;
+        });
+    };
+  });
+};
+
+const createAbort = (queue: CancelTokenSource[]): TCanceler => {
+  return (reason?: string) => {
+    while (queue.length) {
+      queue.shift()!.cancel(reason);
+    }
+  };
+};
+
+const creatorFactory = (request: IMethod, config1: IRequestConfig = {}) => <
+  D1 = any,
+  P1 extends Record<string, any> = any
+>(
+  url: string,
+  config2: IRequestConfig = {}
+) => (params: P1, config3: IRequestConfig = {}) =>
+  request<D1, P1>(
+    url,
+    params || ({} as any),
+    Object.assign({}, config1, config2, config3)
+  );
+
+const createAxios = (baseURL: string) => {
+  const inst = axios.create({
+    baseURL,
+  });
+  const useResponseInterCeptor = inst.interceptors.response.use.bind(
+    inst.interceptors.response
+  );
+  const useRequestInterCeptor = inst.interceptors.request.use.bind(
+    inst.interceptors.request
+  );
+
+  return {
+    instance: inst,
+    useRequestInterCeptor,
+    useResponseInterCeptor,
+  };
+};
+
+const cancelCreatorFactory = (): TCancelCreator => (request: any) => {
+  return (...args: any[]) => {
+    const source = CancelToken.source();
+    const configIndex = typeof args[0] === 'string' ? 2 : 1;
+    args[configIndex] = Object.assign({}, args[configIndex] || {}, {
+      cancelTokenSource: source,
+    });
+    return [
+      request(...args),
+      (reason: string) => {
+        source.cancel(reason);
+      },
+    ] as any;
+  };
+};
+
+export const buildHttpCtrl = (server: string) => {
+  const requestQueue: CancelTokenSource[] = [];
+  const {
+    instance: inst,
+    useRequestInterCeptor,
+    useResponseInterCeptor,
+  } = createAxios(server);
+  const abort = createAbort(requestQueue);
+  const [get, post] = createMethods(inst, requestQueue);
+
+  const getCreator = creatorFactory(get);
+  const postCreator = creatorFactory(post);
+  const cancelCreator = cancelCreatorFactory();
+  return {
+    abort,
+    get,
+    post,
+    cancelCreator,
+    getCreator,
+    postCreator,
+    useRequestInterCeptor,
+    useResponseInterCeptor,
+  };
+};
+
+export default buildHttpCtrl;

package/src/utils/utils.ts

@@ -0,0 +1,15 @@
+export const isMicroApp = !!(window as any).__POWERED_BY_QIANKUN__;
+
+export const assign = (
+  key: string | number,
+  value?: any,
+  obj?: Record<string, any>
+) => {
+  if (!key || !value) return obj || {};
+  return Object.assign(obj || {}, { [key]: value });
+};
+
+export const envValue = (prod: string, dev: string) => {
+  if (process.env.NODE_ENV === 'production') return prod;
+  return dev;
+};