# 💱 从 Dolphin_Common 迁移

如果你以前在用 dolphin_common 开发项目，现在要迁移到 HUI-Pro，请参考这份文档。

# 1、切换成新脚手架

参考海豚脚手架文档，切换到最新脚手架，然后将代码迁移进新项目。

# 2、生成皮肤包

npm run build:theme

# 3、切换前工作

布局逻辑不再使用样式类或者单纯的 page 控件，目前改为 h-layout 控件组和 h-page 控件组搭配使用，切换前建议先熟悉目前的代码逻辑。

还可以参考 Lego 典型页面，里面包含公共典型页面，对迁移会有帮助：

# 4、切换布局

• page 改为 h-page。

  • 移除参数 menu、menuTheme、menuCollapse

• 新增左侧导航控件 page-menu。

• page-container 改为 h-page-container。

• 新增页面头部控件 h-page-header，原先 page-container 的参数移到 h-page-header 上。

  • showReturnIcon 改为 returnIcon
  • 移除属性
    • headerNonShadow
    • topGutter
    • nonSpacing
    • anchor（使用锚点控件）
    • sidebarFixed（改为 h-page-sidebar 控制）
    • tableHeaderFixed（改为 h-page-table 控制）
    • tableScrollbarFixed（改为 h-page-table 控制）

• page-container 中的 slot 修改：

  • pageHeaderToolbar：内容移到 h-page-header 的 slot pageHeaderAction
  • pageSidebar：改为使用控件 h-page-sidebar
  • pageFooter：改为使用控件 h-page-footer

• 移除 page-tabs 和 page-tabs-content，改为 h-layout 控件进行布局，建议参考 Lego 中的典型页面查看用法。

• page-card 改为 h-page-content，移除 page-card 所有的 slot，改为控件。

• 新增操作栏控件 h-page-action。

• 新增搜索栏控件 h-page-search。

  • page-search 改为 h-page-search
  • page-search-item 改为 h-page-search-item
  • pageSearchOperate slot 改为 pageSearchAction

• 新增表格控件 h-page-table。

  • 将 el-table 和 el-pagination 放到控件 h-page-table 中，且 el-pagination 加上插槽 pagination
  • el-table 移除属性 border，具体参考表格典型页面

• button-group 改为 h-page-button-group。

# 5、切换控件

• 控件修改，都加上前缀 h-
  • ellipsis => h-ellipsis
  • highlight => h-highlight
  • plan => h-plan
  • ip-input => h-ip-input
  • pwd-input => h-pwd-input
  • table-transfer => h-table-transfer
  • table-tree-column => h-table-tree-column

# 6、切换工具方法

大部分工具类都迁移到 @hui-pro/utils 下，引入方式不再是 this.$utils.on，而是

import { on, off } from '@hui-pro/utils'
on(this.$el, 'click', callback)
off(this.$el, 'click', callback)

也可以参考文档：http://10.19.171.20:8099/hui-pro/zh/utils/utils.html

若改动太大，这里提供一种兼容模式，这样可以继续使用之前的形式 this.$utils.on，但后续建议统一成第一种方式：

// main.js
import * as utils from '@hui-pro/utils'

Vue.prototype.$utils = utils
Vue.prototype.$reg = utils.regExp

移除方法：

• isIE
• addResizeListener，使用 on(this.$el, 'resize', callback) 代替
• removeResizeListener，使用 off(this.$el, 'resize', callback) 代替
• renderSkin
• loadCSS
• listToTreeWithRootObj
• listTotreeWithOutRootObj
• treeTolist
• getLeafKeys
• compareArray
• arrDataCompare
• combineArr
• getChildrenkeys
• setChildrenChecked
• getDefaultPageSize

修改方法：

• getOffset => offset
• scroll => scrollTo
• getExplorer => getBrowserInfo
• localTimeToISOTime => localTimeToIsoTime
• utcTimeToISOTime => utcTimeToIsoTime

# 7、图标

# 字体图标

HUI-Pro 不再内置字体图标，需要自行下载字体图标后在项目中引入。

之前的图标已经进行了整合，目前只有 dolphin_common（海豚公共图标）和 dolphin_nav（海豚导航图标）两类，参考 海豚新旧字体图标切换对照表。

开发初期可以先使用原先的缩小版，地址：http://pc11-publicisms/，资源下载/Grid Size 24，等框架切换完成后请务必更换新图标。

# 树图标

树图标方案已经变更，不再使用字体图标，而是 SVG 图标

控件参考：SvgIcon

树控件中用法：Tree 树形控件 - 带图标

图标切换时参考：海豚新旧字体图标切换对照表 - 树图标切换对照表

# 8、其他

• 皮肤样式类修改

  • skin-8-bgcolor-hover => skin-hui-bgcolor-hover
  • skin-80-bgcolor-active => skin-hui-bgcolor-active

• 控件原先样式，可以先使用 less 引入，后续建议改为 scss。

• HUI 图标有删减和命名改动，若切换中发现图标无法加载可以参考切换文档 http://hui-vue.hikvision.com.cn/zh/guide/migration-guide.html

# 9、建议步骤

徐子龙提供，框架迁移亲生经历者的血泪教训。

# 第一步：生成脚手架

使用脚手架生成最新的脚手架项目。将通用文件直接拷过来，如 pages、assets、mixins、components 等。具体参考脚手架切换文档。

# 第二步：生成皮肤包

npm run build:theme

# 第三步：按 Lego 布局替换页面

以下分享我的方式：

• 找个最简单的页面，比如参数配置模块；
• 在 nav.config.js 和 router.config.js 写好对应的路由；
• 找到这个页面在 Lego 典型页面中对应的页面，打开，点击查看源码按钮，比如参数配置对应的就是基础表单；
• 注意新页面的布局方式，采用 h-page-container + h-page-header + h-layout + h-page-content 等组件布局，尝试按照头部、侧边栏、工具栏、搜索栏等一一对应的组件来替换一下；
• 将业务组件、代码片段拷到对应的新布局中。打开页面查看效果。一般情况下，不需要自己新写样式。
• 把以前多余的样式和结构删除（样式要是嫌麻烦也可以不删）。
• 查看控制台是否有报错，如果有，根据报错修复对应问题。一般为 utils 和部分 pro 中组件没有加 h- 的问题（pro 中组件要单独下载，请参考 pro 文档）。如果没有报错，且页面展示正常，则完成切换。
• 查看新的交互稿和视觉稿，对应修改一些新的交互/视觉样式。
• 三四个典型页面替换下来，就会了。