quick-platform 1.0.46

package/src/index.ts

@@ -0,0 +1,38 @@
+import { registerApp, getCurrentApp } from './application';
+
+import MicroApp from './components/MicroApp';
+
+import Permission from './components/Permission';
+import LocalDebug from './components/LocalDebug';
+
+import I18nFC from './components/i18n';
+
+import IconFont from './components/IconFont';
+import { App, useAppData } from './components/context';
+
+import AppEvent from './event';
+
+import * as Utils from './utils';
+
+import * as Authentication from './business';
+
+export * from './theme';
+
+const win: any = window;
+const debugKey = '__quick_platform_get_current_app__';
+win[debugKey] = getCurrentApp;
+
+export {
+  App,
+  useAppData,
+  getCurrentApp,
+  registerApp,
+  LocalDebug,
+  MicroApp,
+  Permission,
+  IconFont,
+  AppEvent,
+  Utils,
+  Authentication,
+  I18nFC,
+};

package/src/theme/define/color.ts

@@ -0,0 +1,53 @@
+const DefaultOpacity = (0.6 * 255).toString(16);
+
+// eslint-disable-next-line import/no-mutable-exports
+export let PrimaryColor = '#ff6600';
+
+export const generateVar = (name: string) => {
+  return `--color-g-${name}`;
+};
+
+//
+/* todo 预留主题色阶
+{
+  'brand-1': string;
+  'brand-2': string;
+  'brand-3': string;
+  'brand-4': string;
+  'brand-5': string;
+  'brand-6': string;
+}
+*/
+export const BrandColor = {} as const;
+
+export const updateBrandColor = (color: string) => {
+  PrimaryColor = color;
+  return BrandColor;
+};
+
+// todo 预留中性色
+// export const NeutralColor = {} ;
+
+// // todo 预留中性色-浅色
+// export const NeutralHelperColor: Record<
+//   `${keyof typeof NeutralColor}-6`,
+// string
+// > = Object.keys(NeutralColor).reduce<any>((map, key) => {
+//   map[`${key}-6`] =
+//     NeutralColor[key as unknown as keyof typeof NeutralColor] + DefaultOpacity;
+//   return map;
+// }, {});
+
+/**
+ * todo预留功能色
+ */
+export const FunctionalColor = {};
+
+export const FunctionalHelperColor: typeof FunctionalColor = Object.keys(
+  FunctionalColor
+).reduce<any>((map, key) => {
+  map[`${key}-6`] =
+    FunctionalColor[(key as unknown) as keyof typeof FunctionalColor] +
+    DefaultOpacity;
+  return map;
+}, {});

package/src/theme/define/font.ts

@@ -0,0 +1,29 @@
+export const EnFont = 'Inter';
+export const NumberFont = 'Inter';
+
+const font = (size: number, _lineHeight?: number) => {
+  return { fontSize: size, fontWeight: 'initial' };
+};
+
+const bold = (_font: ReturnType<typeof font>) => {
+  return { ..._font, fontWeight: 'bold' };
+};
+
+export const TextFont = {
+  Normal: font(13, 22),
+  NormalBold: bold(font(13, 22)),
+  Small: font(12, 20),
+  SmallBold: bold(font(12, 20)),
+  Middle: font(14, 22),
+  MiddleBold: bold(font(14, 22)),
+  Large: font(16, 28),
+  LargeBold: bold(font(16, 28)),
+  Helper: font(12, 20),
+};
+
+export const TitleFont = {
+  Normal: font(14, 24),
+  // Small: font(16, 24),
+  Middle: font(16, 28),
+  // Large: font(24, 32),
+};

package/src/theme/define/index.ts

@@ -0,0 +1,8 @@
+import * as Color from './color';
+import * as Font from './font';
+import * as Size from './size';
+import * as Style from './style';
+
+export {
+  Color, Size, Font, Style,
+};

package/src/theme/define/size.ts

@@ -0,0 +1,31 @@
+const DefaultSize = 4;
+// todo 还未定义，暂时不处理
+export const BaseSize: {
+  'size-1': number;
+  'size-2': number;
+  'size-3': number;
+  'size-4': number;
+  'size-5': number;
+  'size-6': number;
+  'size-7': number;
+  'size-8': number;
+  'size-9': number;
+  'size-10': number;
+} = Array.from({ length: 10 }).reduce<any>((map, _, index) => {
+  map[`size-${index + 1}`] = (index + 1) * DefaultSize;
+  return map;
+}, {});
+
+export const ComponentSize = {};
+
+export const MarginSize = {};
+export const IconSize = { normal: 16 };
+
+// 参考 https://www.woshipm.com/pd/4736098.html
+export const ResponsiveScreenSize = {
+  s: 480,
+  m: 640,
+  l: 1024,
+  xl: 1366,
+  xxl: 1920,
+};

package/src/theme/define/style.ts

@@ -0,0 +1,41 @@
+const border = (width: number, style: 'dashed' | 'solid') => {
+  return {
+    borderStyle: style,
+    borderWidth: width,
+    borderColor: '#F0F0F0', // todo
+  };
+};
+const borderRadius = (radius: number) => {
+  return { borderRadius: radius };
+};
+
+export const BorderRadius = {
+  Small: borderRadius(6),
+  Normal: borderRadius(8),
+  // Large: borderRadius(10), // todo
+};
+
+export const Border = {
+  SolidStroke: border(1, 'solid'),
+  // SolidNormal: border(2, 'solid'),
+  // SolidBold: border(3, 'solid'),
+  DashedStroke: border(1, 'dashed'),
+  // DashedNormal: border(2, 'dashed'),
+  // DashedBold: border(3, 'dashed'),
+};
+
+// const shadow = (x: number, y: number, b: number, s: number) => {
+//   return {
+//     offsetX: x,
+//     offsetY: y,
+//     blurRadius: b,
+//     spreadRadius: s,
+//     color: '#00000020',
+//   };
+// };
+
+export const Shadow = {
+  // Level1: shadow(0, 2, 5, 0),
+  // Level2: shadow(0, 4, 10, 0),
+  // Level3: shadow(0, 8, 20, 0),
+};

package/src/theme/doc.tsx

@@ -0,0 +1,438 @@
+import React, { useContext, useState } from 'react';
+
+import classNames from 'classnames';
+
+import { Color, Font, Size, Style } from './define';
+import { ThemeHOC, useThemePrimaryColor } from './react';
+
+const ThemeContext = React.createContext<{ mode: 'js' | 'uno' }>({
+  mode: 'js',
+});
+
+const Button: React.FC<any> = props => {
+  return <div onClick={props.onClick}>{props.children}</div>;
+};
+
+const useTheme = () => {
+  return useContext(ThemeContext).mode;
+};
+const mUno = (mode: string, value: any) => {
+  if (mode === 'uno') return value;
+  return typeof value === 'string' ? '' : {};
+};
+const mJs = (mode: string, value: any) => {
+  if (mode === 'js') return value;
+  return typeof value === 'string' ? '' : {};
+};
+
+const useThemeMatch = () => {
+  const mode = useTheme();
+  return {
+    Uno(value: any) {
+      return mUno(mode, value);
+    },
+    Js(value: any) {
+      return mJs(mode, value);
+    },
+  };
+};
+
+const Cls: React.FC<{ js?: React.ReactNode }> = props => {
+  const mode = useTheme();
+  if (mode === 'js') {
+    return (
+      <div className="bg-gray">
+        {'js->'}
+        {props.js}
+      </div>
+    );
+  }
+  return <div className="bg-gray">{props.children}</div>;
+};
+
+const ColorList: React.FC<{ colors: any; name: string }> = ({
+  colors,
+  name,
+}) => {
+  const keys = Object.keys(colors);
+  console.log(
+    '%c [ halvee>colors]-56',
+    'font-size:13px; background:pink; color:#bf2c9f;',
+    colors
+  );
+  const mode = useTheme();
+  return (
+    <div className="flex-box">
+      <div className="color-black font-500 rounded-lg shadow-2xl flex-col m-2 bg-blue size-20 flex-box">
+        {name}
+      </div>
+      {keys.map((key, index) => {
+        return (
+          <div
+            key={key}
+            style={mJs(mode, { backgroundColor: colors[key] })}
+            className={`
+              size-30 flex-box rounded-lg shadow-2xl flex-col m-2
+              ${index > keys.length / 2 ? 'color-white' : 'color-black'}
+              ${mUno(mode, `bg-q-${key}`)}
+            `}
+          >
+            <Cls jsNode="">{`.bg-q-${key}`}</Cls>
+            <div>{key}</div>
+            <div>{colors[key]}</div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+// ' bg-q-brand-1 bg-q-brand-2 bg-q-brand-3 bg-q-brand-4 bg-q-brand-5 bg-q-brand-6 bg-q-brand-7 bg-q-brand-8 bg-q-brand-9 bg-q-brand-10
+// bg-q-grey-1 bg-q-grey-2 bg-q-grey-3 bg-q-grey-4 bg-q-grey-6 bg-q-grey-8 bg-q-grey-10
+// bg-q-grey-1-6 bg-q-grey-2-6 bg-q-grey-3-6 bg-q-grey-4-6 bg-q-grey-6-6 bg-q-grey-8-6 bg-q-grey-10-6
+// bg-q-error bg-q-warn bg-q-success bg-q-link bg-q-yellow bg-q-cyan bg-q-purple
+// bg-q-error-6 bg-q-warn-6 bg-q-success-6 bg-q-link-6 bg-q-yellow-6 bg-q-cyan-6 bg-q-purple-6 bg-q-primary';
+
+const ColorDoc: React.FC<{ test?: string }> = props => {
+  console.log(
+    '%c [ halvee>]-93',
+    'font-size:13px; background:pink; color:#bf2c9f;',
+    Color
+  );
+  return (
+    <div className={`border-3 border-solid m-10 ${props.test}`}>
+      <Cls>
+        <div className="bg-q-primary">主题色(bg-q-primary)</div>
+      </Cls>
+      <Cls>
+        <div className="text-q-primary">主题色(color-q-primary)</div>
+      </Cls>
+      <div style={{ color: Color.PrimaryColor }}>
+        js:
+        {'{Color.PrimaryColor}'}
+      </div>
+      {/* <ColorList key={1} colors={BrandColor} name="主题色" /> */}
+      {/*  <ColorList key={2} colors={NeutralColor} name="中性色" />
+      <ColorList key={4} colors={NeutralHelperColor} name="中性色-遮罩" />
+      <ColorList key={3} colors={FunctionalColor} name="功能色" />
+      <ColorList key={4} colors={FunctionalHelperColor} name="功能色-遮罩" /> */}
+    </div>
+  );
+};
+const toLine = (str: string) => {
+  return str.replace(/\B([A-Z])/g, '-$1').toLowerCase();
+};
+
+// 'text-q-normal text-q-normal-bold text-q-small text-q-small-bold text-q-middle-bold text-q-large text-q-large-bold'
+// 'title-q-normal title-q-small title-q-large title-q-middle text-q-helper'
+// 'topic-q-normal topic-q-small topic-q-large'
+const FontList: React.FC<{
+  fonts: any;
+  name: string;
+  prefix: string;
+  jsPrefix: string;
+}> = ({ fonts, name, prefix, jsPrefix }) => {
+  const keys = Object.keys(fonts);
+  const mode = useTheme();
+  return (
+    <div className="flex flex-(row items-center wrap)">
+      <div className="color-black font-500 rounded-lg shadow-2xl flex-col m-2 bg-blue size-20 flex-box shrink-0">
+        {name}
+      </div>
+      {keys.map(key => {
+        return (
+          <span
+            key={key}
+            className={classNames(
+              'rounded-lg shadow-2xl flex-col m-2 bg-#00000020',
+              mUno(mode, `${prefix}-q-${toLine(key)}`)
+            )}
+            style={mJs(mode, {
+              ...fonts[key],
+              lineHeight: `${fonts[key].lineHeight}px`,
+            })}
+          >
+            <Cls js={`Theme.${jsPrefix}.${key}`}>{`.${prefix}-q-${toLine(
+              key
+            )}`}</Cls>
+            <br />
+            <span>
+              {key}:{JSON.stringify(fonts[key])}
+            </span>
+          </span>
+        );
+      })}
+    </div>
+  );
+};
+
+const FontDoc: React.FC = () => {
+  return (
+    <div className="border-3 border-solid m-10">
+      <FontList
+        key="text"
+        fonts={Font.TextFont}
+        jsPrefix="Font.TextFont"
+        name="文本字体"
+        prefix="text"
+      />
+      <FontList
+        key="title"
+        fonts={Font.TitleFont}
+        jsPrefix="Font.TitleFont"
+        name="标题字体"
+        prefix="title"
+      />
+    </div>
+  );
+};
+'flex-(col none)';
+// 'size-q-1 size-q-2 size-q-3 size-q-4 size-q-5 size-q-6 size-q-7 size-q-8 size-q-9 size-q-10'
+// 'size-q-mini size-q-small size-q-default size-q-large'
+// 'm-q-s m-q-m m-q-l m-q-xl m-q-xxl m-q-xxxl'
+// 'p-q-s p-q-m p-q-l p-q-xl p-q-xxl p-q-xxxl'
+// 'gap-q-s gap-q-m gap-q-l gap-q-xl gap-q-xxl gap-q-xxxl'
+const SizeList: React.FC<{
+  size: any;
+  name: string;
+  isMargin?: boolean;
+  isPadding?: boolean;
+}> = ({ size, name, isMargin = false, isPadding = false }) => {
+  const keys = Object.keys(size);
+  const { Js, Uno } = useThemeMatch();
+  return (
+    <div className="flex flex-wrap flex-row">
+      <div className="color-black font-500 rounded-lg shadow-2xl flex-col m-2 bg-blue size-20 flex-box">
+        {name}
+      </div>
+      {keys.map(key => {
+        const s = (v: number) => Math.min(200, v);
+        const cls = isMargin
+          ? Uno(`m-q-${key.replace('size-', '')}`)
+          : isPadding
+          ? Uno(`p-q-${key.replace('size-', '')}`)
+          : Uno(`size-q-${key.replace('size-', '')}`);
+        return (
+          <div key={key} className="m-2">
+            <span>
+              <Cls> {`.${cls}`}</Cls>
+              {key}:{`${size[key]}px`}
+              <div
+                style={isPadding ? Js({ padding: s(size[key]) }) : {}}
+                className={classNames({
+                  'border border-solid': isMargin,
+                  'bg-#C9CDD4': isPadding,
+                  [cls]: isPadding,
+                })}
+              >
+                <div
+                  className={classNames('flex-col bg-#00000020', cls, {
+                    'size-100px': isMargin || isPadding,
+                  })}
+                  style={
+                    isMargin
+                      ? Js({
+                          width: 100,
+                          height: 100,
+                          margin: s(size[key]),
+                        })
+                      : isPadding
+                      ? Js({ minWith: 20 })
+                      : Js({ width: s(size[key]), height: s(size[key]) })
+                  }
+                />
+              </div>
+            </span>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+const GapList: React.FC<{}> = () => {
+  const { Js, Uno } = useThemeMatch();
+
+  return (
+    <div className="flex-box flex-wrap items-start">
+      <div className="color-black font-500 rounded-lg shadow-2xl flex-col m-2 bg-blue size-20 flex-box">
+        间距
+      </div>
+      <div>
+        {Object.keys(Size.MarginSize).map((key: any) => {
+          const gap = Size.MarginSize[key as keyof typeof Size.MarginSize];
+          return (
+            <div>
+              <Cls>{`.gap-q-${key}`}</Cls>
+              <span>
+                gap-
+                {gap}
+                px
+              </span>
+              <div
+                style={Js({ gap })}
+                className={classNames(
+                  'flex p-q-xl border-q-solid-stroke',
+                  Uno(`gap-q-${key}`)
+                )}
+              >
+                {Array.from({ length: 6 }).map(_ => {
+                  return <div className="size-100px bg-#00000020" />;
+                })}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+const SizeDoc: React.FC = () => {
+  return (
+    <div className="m-10 border-solid border-3">
+      <SizeList key="base" name="基础尺寸" size={Size.BaseSize} />
+      {/* <SizeList key="component" name="组件尺寸" size={Size.ComponentSize} /> */}
+      {/* <SizeList key="margin" isMargin name="间距尺寸" size={Size.MarginSize} /> */}
+      {/* <SizeList key="padding" isPadding name="内边距" size={Size.MarginSize} /> */}
+      <GapList />
+      {/* <SizeList size={Size.ResponsiveScreenSize} name="断点尺寸"></SizeList> */}
+    </div>
+  );
+};
+
+// 'rd-q-normal rd-q-small rd-q-large'
+// 'border-q-solid-stroke border-q-solid-normal border-q-solid-bold border-q-dashed-stroke border-q-dashed-normal border-q-dashed-bold'
+// 'shadow-q-level1 shadow-q-level2 shadow-q-level3'
+const StyleList: React.FC<{
+  style: any;
+  name: string;
+  prefix: string;
+  jsPrefix: string;
+  className?: string;
+}> = ({ style, name, prefix, className = '', jsPrefix }) => {
+  const keys = Object.keys(style);
+  const { Js, Uno } = useThemeMatch();
+  return (
+    <div className="flex flex-row flex-wrap color-grey-2 color-grey-2">
+      <div className="color-black font-500 rounded-lg shadow-2xl flex-col m-2 bg-blue size-20 flex-box">
+        {name}
+      </div>
+      {keys.map(key => {
+        const cls = `${prefix}q-${toLine(key)}`;
+        return (
+          <div
+            key={key}
+            className={classNames('m-2 w-100 h-30 p-5 ', Uno(cls), className)}
+            style={Js(style[key])}
+          >
+            <Cls js={`Theme.${jsPrefix}.${key}`}>
+              {' '}
+              <span className="text-q-primary">{`.${cls}`}</span>
+            </Cls>
+            {key}
+            <div>{JSON.stringify(style[key], null, 2)}</div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+const StyleDoc: React.FC = () => {
+  const boxShadowToCss = () => {
+    return Object.keys(Style.Shadow).reduce<any>((map, key) => {
+      const shadow = (Style.Shadow as any)[key];
+      map[key] = {
+        boxShadow: `${shadow.offsetX}px ${shadow.offsetY}px ${shadow.blurRadius}px ${shadow.spreadRadius}px ${shadow.color}`,
+        border: 'none',
+      };
+      return map;
+    }, {});
+  };
+
+  return (
+    <div className="m-10 border-solid border-3">
+      <StyleList
+        key="rd"
+        className="border-1 border-solid "
+        jsPrefix="Style.BorderRadius"
+        name="圆角样式"
+        prefix="rd-"
+        style={Style.BorderRadius}
+      />
+      <StyleList
+        key="border"
+        jsPrefix="Style.Border"
+        name="边框样式"
+        prefix="border-"
+        style={Style.Border}
+      />
+      <StyleList
+        key="shadow"
+        jsPrefix="Style.Shadow"
+        name="阴影样式"
+        prefix="shadow-"
+        style={boxShadowToCss()}
+      />
+    </div>
+  );
+};
+
+const Mode: React.FC<{
+  change(mode: 'js' | 'uno'): void;
+  mode: 'js' | 'uno';
+}> = ({ change, mode }) => {
+  const { set, color } = useThemePrimaryColor();
+  return (
+    <div className=" right-10px fixed flex-row m-t-2 flex items-center gap-10px bg-q-cyan-6 rd-q-normal">
+      <Button
+        key="xx"
+        type={mode === 'uno' ? 'primary' : 'default'}
+        onClick={change.bind(null, 'uno')}
+      >
+        unocss
+      </Button>
+      <Button
+        key="yy"
+        type={mode === 'js' ? 'primary' : 'default'}
+        onClick={change.bind(null, 'js')}
+      >
+        js
+      </Button>
+
+      {/* <Popover
+        content={
+          <SketchPicker
+            color={color}
+            onChange={(color) => {
+              set(color);
+            }}
+          />
+        }
+      >
+        <Button type="primary">
+          修改主题色
+        </Button>
+      </Popover> */}
+    </div>
+  );
+};
+
+const ThemeDoc = ThemeHOC(() => {
+  const [mode, setMode] = useState<'js' | 'uno'>('uno');
+  return (
+    <ThemeContext.Provider value={{ mode }}>
+      <div className="">
+        {/* <div className="p-lr-q-s">test</div> */}
+        <Mode change={setMode} mode={mode} />
+        <ColorDoc />
+        <FontDoc />
+        {/* <SizeDoc /> */}
+        <StyleDoc />
+      </div>
+    </ThemeContext.Provider>
+  );
+});
+
+export default ThemeDoc;

package/src/theme/index.ts

@@ -0,0 +1,5 @@
+import * as Theme from './define';
+
+import { useThemePrimaryColor, ThemeHOC } from './react';
+
+export { useThemePrimaryColor, ThemeHOC, Theme };

package/src/theme/lib/index.ts

@@ -0,0 +1,15 @@
+import { Color } from '../define';
+
+export const setPrimaryColor = (color: string) => {
+  Color.updateBrandColor(color);
+  document.documentElement.style.setProperty(
+    Color.generateVar('primary'),
+    Color.PrimaryColor
+  );
+  // Object.keys(Color.BrandColor).forEach(key => {
+  //   document.documentElement.style.setProperty(
+  //     Color.generateVar(key),
+  //     Color.BrandColor[key]
+  //   );
+  // });
+};