feat:路由修改

config/router.ts

@@ -28,8 +28,17 @@ const router = [
       },
     ]
   },
-  memberCenterRoute,
-  shopRoute,
+  {
+    path: '/',
+    component: '@/wrappers/getSiteConfig',
+    routes: [
+      memberCenterRoute,
+      shopRoute,
+      {
+        component: '@/pages/404',
+      },
+    ],
+  },
   {
     path: '/404',
     component: '@/pages/404',

config/routes/index.ts

@@ -14,8 +14,8 @@ const memberCenterRoute = {
       redirect: '/memberCenter/home'
     },
     {
-      path: '/shopAbility',
-      redirect: '/shopAbility/infoManage'
+      path: '/memberCenter/shopAbility',
+      redirect: '/memberCenter/shopAbility/infoManage'
     },
     {
       // 首页

config/shopRoutes/index.ts

-const routes = []
+
 
 const shopRoute = {
   path: '/',
@@ -7,13 +7,15 @@ const shopRoute = {
       // 首页
       path: `/`,
       name: 'home',
-      icon: 'smile',
       key: 'home',
       component: '@/pages/index',
     },
-    ...routes,
     {
-      component: '@/pages/404',
+      // 资讯
+      path: `/information`,
+      name: 'home',
+      key: 'home',
+      component: '@/pages/index',
     },
   ],
 }

src/components/Loading/index.tsx

 import React, { Component } from 'react'
+import { Spin } from 'antd'
 
 class Loading extends Component {
   render() {
     return (
-      <div>loading</div>
+      <Spin />
     )
   }
 }

src/store/index.tsx

 import UserStore from './user'
+import ThemeStore from './theme'
 import React from 'react';
 import { Provider } from 'mobx-react'
 import { IUserModule } from '@/module/userModule';
@@ -23,10 +24,11 @@ export interface IStore {
 }
 
 const store = {
-  userStore: new UserStore
+  userStore: new UserStore,
+  ThemeStore: new ThemeStore,
 }
 
-const MobxProvider:React.FC = (props) => {
+const MobxProvider: React.FC = (props) => {
   return <Provider {...store}>{props.children}</Provider>
 }
 

src/store/theme/index.ts

+import { observable } from 'mobx'
+import { IThemeModule } from '@/types/ThemeStoreType'
+
+class ThemeStore implements IThemeModule {
+  @observable public themeName: string = 'default';
+
+}
+
+export default ThemeStore

src/theme/default/styles/colors.less

+@default_btn_color: green;
+@default_text_color: green;
\ No newline at end of file

src/theme/default/styles/login.less

+@import './colors.less';
+
+.welcome_text {
+  color: @default_text_color;
+
+}
+
+// .login_theme(@default_color: red) {}
\ No newline at end of file

src/theme/login.less

+.theme-default {
+  @import './default/styles/login.less';
+
+}
+
+.theme-template2 {
+  @import './template2/styles/login.less';
+
+}
\ No newline at end of file

src/theme/template2/styles/colors.less

+@default_btn_color: red;
+@default_text_color: red;
\ No newline at end of file

src/theme/template2/styles/login.less

+@import './colors.less';
+
+.welcome_text {
+  color: @default_text_color;
+
+}
+
+// .login_theme(@default_color: red) {}
\ No newline at end of file

src/types/CategoryType.ts

+/**
+ * 定义组件的分类数据结构，目的是为了更改的在组件预览面板做，组件的展示搜索与约束
+ */
+
+interface propType {
+  [propName: string]: any
+}
+
+export interface ComponentCategoryType {
+  // 组件预览面板为grid布局通过设置span值来分配各个组件中展示组件所占位置大小，数值0-24
+  span?: number,
+  // 默认属性配置，组件预览面板会将默认属性分别展示出来，在拖拽组件时会携默认属性到页面中
+  props?: propType[],
+}
+
+export interface ComponentInfoType {
+  // 如果组件没有次级组件（次级组件定义类似Layout.Footer）
+  //时就可以认定，分类名称即为组件名称
+  span?: number,
+  props?: propType[],
+  components?: {
+    [componentName: string]: ComponentCategoryType | null
+  }
+}
+
+export interface CategoryType {
+  //组件分类，如果组件没有次级组件，并且无法为其设置默认属性，时可直接设置其值为null，类别名必须为组件名
+  [category: string]: ComponentInfoType | null
+}

src/types/ComponentConfigType.ts

+import { PROPS_TYPES } from '@/types/ConfigTypes';
+
+/**
+ * 组件配置信息数据结构定义，组件配置信息用于组件属性可视化展示，组件约束
+ */
+
+/**
+ * 组件属性的配置信息
+ */
+export interface PropsConfigType {
+  [propName: string]: PropInfoType
+}
+
+/**
+ * 单个属性的具体配置
+ */
+export interface PropInfoType {
+  //属性展示的文字
+  label: string,
+  //属性的类型
+  type: PROPS_TYPES | PROPS_TYPES[],
+  //属性的功能的描述信息
+  tip?: string,
+  //当类型为object或者objectArray时，我们定义该类型的值为子属性值，子属性类型完全与配置完全与属性配置一样
+  //当类型为object时其配置信息为一个类型为PropsConfigType的对象
+  //当类型为objectArray时其配置为一个类型为PropsConfigType的数组对象
+  childPropsConfig?: PropsConfigType | PropsConfigType[],
+  //表示该属性是否为添加属性，在属性设置面板中类型为object的属性，可以动态添加和删除子属性，
+  // 只有属性面板中动态添加的属性才会有这个字段，组件原始配置信息，不需要配置此字段
+  isAdd?: boolean,
+  // 规则，其实就是antd 的form规则，属性配置面板本身就是一个纯表单，组件的属性有时会需要必填，或者做值校验等，其值完全与antd的form一样
+  rules?: any[],
+  // 当类型为function时用于做方法的展示和代码生成时方法的生成，同时设计面板与预览面板也会使用eval来执行默认方法，以防部分组件报错，
+  //因为无法在页面填写可执行的方法，所以function类型的属性只看已填写方法名，代码生成时会将名与方法体整合生成方法代码。
+  //该值必须为可执行的方法字符串，如果不填写，设计面板与预览解析时如果该属性有值，就会默认执行一个空方法
+  placeholder?: string,
+  // 当类型为enum 时用于填写可选的值
+  enumData?: string[],
+  // 属性的默认值
+  defaultValue?: any,
+  // 类型为number并且属性值为number+单位比如 12px，12%等可以设置此属性为true
+  hasUnit?: boolean,
+  // 类型为string时有时会是颜色这时设置此值为true就可以使用颜色面板
+  isShowColor?: boolean,
+  inputColProps?: any,
+  //类型为numberArray时设置其最大可以填写的个数
+  maxTagCount?: number,
+  //类型为number时设置number 的最小值
+  min?: number,
+  //类型为number时设置number 的最大值
+  max?: number,
+  //类型为stringArray时设置其最大可填写的个数
+  stringCount?: number,
+  //因为每个属性在属性设置面板都是以一个formItem的形式可视化的展示的，
+  // 所以你可以设置当前属性在属性设置面板中formItem的一些特性，可参考antd form.Item设置
+  formItemProps?: any
+
+}
+
+/**
+ * 节点属性配置信息，节点属性是这样定义的，一个属性的值可为html标签或者react组件的属性就是节点属性
+ * react的子节点嵌套实际是将子节点作为属性children的值，所以children也可以作为属性节点配置
+ */
+export interface NodePropsConfigType {
+  [propName: string]: {
+    // 节点属性的类型，只可以填写reactNode和functionReactNode
+    type: PROPS_TYPES.reactNode | PROPS_TYPES.functionReactNode,
+    // 节点属性的功能描述，在都dom树面板hover单属性上会显示
+    tip?: string,
+    //节点属性的文字展示，不填写默认展示属性名
+    label?: string,
+    //节点属性的组件约束，表示该节点属性只可以放入的组件
+    childNodesRule?: string[],
+    //节点属性是否必填
+    isRequired?: boolean,
+    //节点属性的值是否为单节点
+    isOnlyNode?: boolean,
+    //节点属性类型为functionReactNode，时其参数信息
+    params?: string[]
+  },
+}
+
+/**
+ * 弹窗类组件配置显示映射，目的是为了将弹窗类的组件展示约束到设计面板中去
+ */
+export interface MirrorModalFieldType {
+  // 控制显示的属性字段（比如：Modal的visible）
+  displayPropName: string,
+  // 挂载组件的配置信息
+  mounted: {
+    //挂载组件的属性的名 (比如Modal的getContainer)
+    propName: string,
+    //挂载组件的属性的类型
+    type: PROPS_TYPES.function | PROPS_TYPES.string
+  }
+  // 需要修改样式才能挂载的情况（比如antd 的Drawer组件其默认样式为 position: 'fixed',无法挂载到设计面板上，需要改成 position: 'absolute'）
+  style?: any
+
+}
+
+/**
+ * 组件配置的数据结构
+ */
+
+export interface ComponentConfigType {
+  //父组件约束，许多组件只能作为特定组件的子组件，这些组件需要设置，父组件约束放置放错，导致错误显示或者报错，
+  //注意要明确约束到父组件的节点属性
+  parentNodesRule?: string[],
+  nodePropsConfig?: NodePropsConfigType,
+  mirrorModalField?: MirrorModalFieldType,
+  propsConfig: PropsConfigType,
+}

src/types/ConfigTypes.ts

+import { CategoryType } from '@/types/CategoryType';
+import { ComponentConfigType } from '@/types/ComponentConfigType';
+
+/**
+ * 属性类型定义
+ */
+export enum PROPS_TYPES {
+  object = 'object',
+  objectArray = 'objectArray',
+  function = 'function',
+  number = 'number',
+  numberArray = 'numberArray',
+  string = 'string',
+  stringArray = 'stringArray',
+  enum = 'enum',
+  json = 'json',
+  boolean = 'boolean',
+  reactNode = 'reactNode',
+  functionReactNode = 'functionReactNode',
+  animate = 'animate',
+}
+
+/**
+ * 样式类型定义
+ */
+export enum CSS_TYPE {
+  string = 'string',
+  enum = 'enum',
+  number = 'number',
+};
+
+
+/**
+ * 全局配置类型定义
+ */
+export interface ConfigType {
+  OriginalComponents: any, //所有的React原始组件
+  CONTAINER_CATEGORY: CategoryType,  //容器组件分类
+  NON_CONTAINER_CATEGORY: CategoryType, //非容器组件分类
+  //所有的组件配置汇总
+  AllComponentConfigs: { [componentName: string]: ComponentConfigType },
+  iframeSrcDoc: string
+}

src/types/DesignStoreType.ts

+import {
+  SelectedComponentInfoType,
+  VirtualDOMType,
+} from '@/types/ModelType';
+
+export interface DesignStoreType {
+  componentConfigs: VirtualDOMType[];
+  selectedComponentInfo: SelectedComponentInfoType | {};
+  hoverKey: null | string
+}

src/types/ModelType.ts

+import { PropsConfigType } from './ComponentConfigType';
+import { EffectsCommandMap } from 'dva';
+import { AnyAction } from 'redux';
+
+
+export interface PropsNodeType {
+  [propName: string]: {
+    childNodes: VirtualDOMType[]
+  }
+}
+
+export interface VirtualDOMType {
+  key: string,
+  componentName: string,
+  props: any,
+  addPropsConfig?: PropsConfigType,
+  childNodes?: VirtualDOMType[] | PropsNodeType
+
+}
+
+export interface SelectedComponentInfoType {
+  selectedKey: string,
+  style: any,
+  parentPath: string,
+  componentName: string,
+  propName?: string,
+  propPath?: string,
+  path: string,
+  isContainer?: boolean,
+  isOnlyNode?: boolean,
+  childNodesRule?: string[],
+  domTreeKeys?: string[],
+  isRequiredHasChild?: boolean
+}
+
+export interface PropsSettingType {
+  props: any,
+  propsConfig: PropsConfigType,
+  mergePropsConfig: PropsConfigType,
+  addPropsConfig: PropsConfigType,
+}
+
+interface DragDataType {
+  defaultProps?: any,
+  componentName?: string,
+  templateData?: VirtualDOMType,
+  dragPath?: string,
+  dragParentPath?: string
+}
+
+export interface TemplateInfoType {
+  img: string,
+  id: string,
+  name: string,
+  config: string
+}
+
+export interface DropTargetInfoType {
+  isContainer: boolean,
+  propPath: string,
+  path: string,
+  isOnlyNode?: boolean,
+  childNodesRule?: string[],
+  componentName: string,
+  propName: string
+}
+
+export type PlatformStyleType = number[] | string[]
+
+export interface PlatformInfoType {
+  isMobile: boolean,
+  size: PlatformStyleType,
+}
+
+export interface StateType {
+  componentConfigs: VirtualDOMType[],
+  selectedComponentInfo: SelectedComponentInfoType | {},
+  propsSetting: PropsSettingType | {},
+  styleSetting: any,
+  undo: any[],
+  redo: any[],
+  templateInfos: TemplateInfoType[],
+  hoverKey: null | string,
+  dragData: DragDataType | null,
+  dropTargetInfo: null | DropTargetInfoType,
+  platformInfo: PlatformInfoType
+
+}
+
+export type Effect = (
+  action: AnyAction,
+  effects: EffectsCommandMap & { select: <T>(func: (state: StateType) => T) => T },
+) => void;
+
+export type Reducer = (state: StateType, action: AnyAction) => StateType
+
+export interface ModelType {
+  namespace: string,
+  state: StateType,
+  effects: {
+    submitConfigs: Effect,
+    searchTemplate: Effect,
+    getTemplateList: Effect,
+    addTemplateInfo: Effect,
+    deleteTemplate: Effect
+  },
+  reducers: {
+    saveTemplateInfos: Reducer;
+    addComponent: Reducer,
+    copyComponent: Reducer,
+    onLayoutSortChange: Reducer,
+    clearSelectedStatus: Reducer,
+    selectComponent: Reducer,
+    clearChildNodes: Reducer,
+    deleteComponent: Reducer,
+    addPropsConfig: Reducer,
+    deletePropsConfig: Reducer,
+    changeStyles: Reducer,
+    submitProps: Reducer,
+    overTarget: Reducer,
+    clearHovered: Reducer,
+    getDragData: Reducer,
+    getDropTargetInfo: Reducer,
+    changePlatform: Reducer,
+    undo: Reducer,
+    redo: Reducer,
+
+  }
+
+}

src/types/ThemeStoreType.ts

+export interface IThemeModule {
+  themeName: string;
+}
\ No newline at end of file

src/types/UserStoreType.ts

+export interface IUserModule {
+  name: string;
+  age: number;
+
+  printNameAndAge: string;
+
+  setName(name: string):void;
+  getAsyncAge(): Promise<number>;
+}
\ No newline at end of file

src/wrappers/getSiteConfig.tsx

+import React, { useMemo, useState, useEffect } from 'react';
+import { inject, observer } from 'mobx-react'
+import { IThemeModule } from '@/types/ThemeStoreType'
+
+interface AuthComponentPropsType {
+  children: any;
+  ThemeStore: IThemeModule
+}
+
+const GetSiteConfig: React.FC<AuthComponentPropsType> = (props) => {
+  const [loading, setLoading] = useState<boolean>(true)
+  const { themeName } = props.ThemeStore
+  // useMemo(() => {
+  //   console.log('当前使用模板', themeName)
+  //   document.body.className = `theme-${themeName}`;
+  // }, [themeName])
+
+  useEffect(() => {
+    // 根据当前网站域名加载站点配置和商城配置
+    const domainName = location.href
+    setTimeout(() => {
+      setLoading(false)
+      console.log('当前使用模板', themeName)
+      document.body.className = `theme-${themeName}`;
+    }, 100);
+
+  }, [])
+
+  return !loading ? (
+    <>
+      {props.children}
+    </>
+  ) : null
+}
+
+export default inject('ThemeStore')(observer(GetSiteConfig))
\ No newline at end of file