工作台风格开发说明

1、分支说明

请从develop分支新建分支feature-version03，以此开发工作台的《风格三》页面。

2、目录说明

• /@types - 类型声明

• /api - 接口定义

• /assets/fonts - 字体文件

  用pai-svgtofont工具生成，暂只用于《风格二》

• /assets/iconfont - 字体文件

  用阿里的iconfont网站生成，暂只用于《风格一》

• /assets/images - 公共图片

• /assets/styles - 样式

  可以增加目录version03用于《风格三》的相关样式。

• /assets/styles/common - 公共样式

• /assets/styles/version01 - 《风格一》相关样式

• /assets/styles/version02 - 《风格二》相关样式

• /assets/svgs - 字体文件素材

  用于生成/assets/fonts

• /build-widget - 小组件相关

• /cdn - 对cdn资源的转换

• /components - 组件

可以增加目录version03用于《风格三》的相关样式。

• /components/common - 公共组件

• /components/common/avatar-letter - 首字符头像

• /components/common/back-top - 返回顶部

• /components/common/book-dialog - 通讯录员工详情

• /components/common/flow-layout - 流布局

• /components/common/help-box - 帮助浮窗

• /components/common/home-page - 首页容器

• /components/common/iframe-stack - 微应用容器

• /components/common/msg - 消息列表

• /components/common/msg-list - 消息列表（用于搜索窗）

• /components/common/portal - 门户组件

• /components/common/portal-detail - 门户页面

• /components/common/portal-home-detail - 首页门户页面

• /components/common/right-box - 右侧浮窗容器

• /components/common/search-box - 搜索窗

• /components/common/user-box - 用户窗

• /components/common/workbench-back - 带返回按钮页面容器

• /components/version01 - 《风格一》相关组件

• /components/version02 - 《风格二》相关组件

• /layouts - 模板页

  若default.vue不满足《风格三》，可以新建version03.vue作为模板页，在页面文件中配置layout: ‘version03’应用新模板。依赖关系为 default模板 <- version03模板 <- 页面

• /locales - 国际化

• /mixins/menu.js - 菜单打开控制

• /mixins/msg.js - 消息打开控制

• /mixins/portal.js - 门户全局处理

• /mixins/version.js - 风格控制

  需要注意的是，在/plugins/setup/prototypes.js的$wbBaseConsts中，queryKeep常量记录需要保留url的query变量。主要用于/mixins/menu.js、/mixins/version.js

• /mixins/wss.js - 消息心跳

• /pages - 页面

  可以增加目录version03用于《风格三》的相关页面。

• /pages/common - 公共页面，如：通讯录、消息

• /pages/electron - 挂件门户

• /pages/version01 - 《风格一》相关页面

• /pages/version02 - 《风格二》相关页面

• /plugins - 相关插件初始化

  值得注意setup目录为相关全局功能初始化

• /server - 项目启动服务

• /static - 静态资源

• /static/images - 静态图片

  可以增加目录version03用于《风格三》的静态图片。

• /static/images/common - 公共静态图片

• /static/images/version01 - 《风格一》静态图片

• /store - 状态管理

• /store/action.js - 【基础状态】获取、恢复

  用户信息、token、ossToken等状态

• /store/config.js - 【个性化配置】

• /store/index.js - 【基础状态】

  国际化、token、ossToken、用户信息、部分状态模块历史（用户分离）

• /store/micro.js - 【微应用】

• /store/msg.js - 【消息】

• /store/mutations.js - 【基础状态】更新

• /store/portal.js -【 门户】

• /store/portalDestop.js - 【挂件门户】

• /store/portalHome.js - 【首页门户】

• /store/theme.js - 【菜单主题】

  暂只用于《风格二》

• /tools/micro.js - 微应用工具

• /tools/auth.js - 登录工具

• /tools/locale.js - 国际化初始化

• /tools/log.js - 日志工具

3、关于样式

按基础、风格划分为：

/assets/styles/common
/assets/styles/version01
/assets/styles/version02
...
/assets/styles/version??
以此类推

要注意的是

• /assets/styles/version??/index.less
  需要处理一下和高度相关的样式

  • 类.workbench–hide（即当前打开了门户）
  • 响应式媒体查询

@import '../common/var.less';
@import '../common/mixin.less';
//
@import './var.less';

.workbench {
  //...
  &.workbench--hide {
    //...
    .workbench-home {
      //...
    }
  }
  @media screen and (max-width: @min-width) {
    //...
  }
}

• /assets/styles/version??/var.less
  全局css变量，会影响到一些组件（包括公共组件）的高度样式是否正确计算

:root {
  --workbench-header-height: ?px; /* 顶栏高度 */
  --workbench-header-height-sub: ?px; /* 第二层顶栏（双顶栏：如version02的微应用tab栏）高度 */
}

4、关于状态管理

• /store/index.js

  由于是根据用户分离的缓存历史，且按模块筛选的。如下代码片段：

// 按需在msg后增加新状态模块，才能让新状态模块的持久化生效
if (['micro', 'portal', 'portalHome', 'portalDestop', 'msg'].includes(module)) {
    history[userId][module] = JSON.parse(JSON.stringify(state[module]))
    store.commit('historyUpdate', history)
}

5、关于微应用

/store/micro.js为微应用的状态模块，除了获取其state的状态值，其余对状态的改变请调用/tools/micro.js中的api，而非直接使用store的commit、dispatch方式。

原因：一些界面的交互逻辑并不适合放在store里面

6、其他

若需要修改非《风格三》所属的相关代码和资源，请事先告知并讨论。