rtlink-vt v0.3.12

rtlink-vt

对 rtlink 前端框架进行扩展，仅适用于基于 rtlink 框架创建的vue项目。

安装

npm install rtlink-vt --save

使用

考虑到 rtlink-vt 并不是普通的组件库，而是会对前端框架的布局、样式进行修改，同时还提供示例页面、文档说明、代码生成等功能，因此配置方式较为复杂。

​

添加文件

在 src/plugins 中添加文件 vt.js ，其中编辑以下内容：

import Vue from 'vue'
import RtlinkVt from 'rtlink-vt';
import 'rtlink-vt/packages/theme/index.scss';
import 'rtlink-vt/packages/route';
Vue.use(RtlinkVt)

在 mock/controller 中添加文件 vt-mock.js，其中编辑以下内容：

const mockdata = require('../../node_modules/rtlink-vt/packages/mock');
module.exports = mockdata;

​

修改文件

在src/mixins/tableHeight.js 中，第3行左右修改代码

tableHeight() {
  const pageTabsHeight = document.querySelector('div.vt-page-tabs') ? 60 : 0;
  return this.$baseTableHeight(45 - pageTabsHeight);
},

在 src/plugins/index.js 中，添加以下代码：

import './vt'

在 src/config/theme.config.js 中，第16行左右修改代码

//主题色
themeColor: '#24a2ff',

在 src/styles/base.scss 中，第116行左右修改代码

/* 注释掉关于transition的全局样式 */
* {
  /*transition: $base-transition;*/
}

在 src/styles/variables.scss 中 ，第4行左右修改代码

/* 框架默认主题色 */
$base-color-default: #24a2ff;

在 src/components/layouts/index.vue 中，第52行左右，添加 ht-top-bar，将 ht-tabs-bar 注释掉

<ht-top-bar />
<ht-nav-bar />
<!--<ht-tabs-bar v-if="tabsBar === 'true' || tabsBar === true" />-->

在 src/components/layouts/HtAppMain/index.vue 中，第7行左右，在 <transition> 的上面添加代码

<ht-tabs-bar />

在 src/components/layouts/HtSideBar/index.vue，第21行左右，将 ht-side-bar-item 修改为 vt-side-bar-item

<vt-side-bar-item
  :key="route.id"
  :full-path="route.path"
  :item="route"
/>

在 src/components/layouts/HtTabsBar/index.vue，第36行左右，添加以下代码

<vt-demo-code />

在 src/components/layouts/HtTabsBar/index.vue，第43行左右，添加以下代码

<li class="context-menu-item">
  <el-button type="text" @click="handleOperateTabs('refreshRoute')">
    刷新当前标签页
  </el-button>
</li>

在 mock/index.js 中，第10行左右添加代码

// 避免进程crash
process.on('uncaughtException', function (err) {
  console.log('uncaughtException: ' + err);
});

在 mock/index.js 中，第61行左右修改

//使mock接口支持异步返回
//res.json(mock(respond instanceof Function ? respond(req, res) : respond))
const result = typeof respond === 'function' ? respond(req) : respond;
const promise = typeof result?.then === 'function' ? result : Promise.resolve(result);
promise.then(obj => res.json(mock(obj))).catch(e => res.json(mock(e)));

【todo】待补充 stypes/themes/header和styles/themes/login

​

功能说明

浅色版皮肤

应用《2023春季浅色版皮肤》，包括以下要点

（1）布局调整：页面顶部添加一个横条、标签页横条位置调整到页面内容区域

（2）样式调整：主题色调整、框架样式调整、组件库 rtlink-ui 样式调整、组件库element-ui 样式调整

（3）左侧菜单调整：3级以上菜单向右展开，支持任意层级的菜单结构

深色版皮肤

框架默认使用浅色版皮肤，若应用深色版皮肤，需额外配置（版本 0.3.9 以上）。配置方式如下：

在 src/plugins/vt.js 中，引用样式的 import 语句进行以下修改

import 'rtlink-vt/packages/theme/dark/index.scss';

在 src/components/layouts/index.vue 中，第54行左右，进行以下修改

<ht-top-bar />
<ht-nav-bar />
<ht-tabs-bar />

在 src/components/layouts/HtTopBar/index.vue 中，进行多处修改

第16行左右，在 <ht-logo class="logo-padding" /> 下面添加以下代码

<i
  :class="[collapse ? 'icon-fold' : 'icon-unfold']"
  :title="collapse ? '展开' : '收起'"
  class="fold-unfold"
  @click="handleCollapse"
></i>

第78行左右，注释掉 ht-theme-bar

<!-- <ht-theme-bar class="hidden-md-and-down" /> -->

第90行左右，进行以下修改

import { mapActions, mapGetters, mapState } from 'vuex'

第107行左右，在 ...mapGetters 中添加以下代码

collapse: 'settings/collapse',

第206行左右，在 methods 中添加以下代码

...mapActions({
  changeCollapse: 'settings/changeCollapse',
}),
handleCollapse() {
  this.changeCollapse()
},

​

组件

提供一些组件，具体包含如下

vt-sider-list : 列表组件，一般放在页面左侧

vt-sider-tree : 基于 el-tree 开发的树组件，一般放在页面左侧，选择树形数据

vt-org : 机构选择器

vt-user : 用户选择器

​

指令

提供一些 Vue 指令，具体包含如下

v-sider : 用于左右布局中，在左侧 div 添加该指令，可令其允许拖拽调整宽度

v-auth : 用于实现按钮权限 【todo】尚未开发完成

​

内置示例页面

通过 npm run serve 启动项目，在浏览器输入 http://localhost:8081/front/vtdemo ，进入 rtlink-vt 的内置页面

此时，左侧菜单栏中会出现 vtdemo 项目，其中包含了一些示例页面、框架说明文档以及一些开发工具页面。

（1）示例页面

针对一些常见的页面类型或功能，提供示例页面。

示例页面并不使用数据库的数据，而是连接mock接口。

示例页面的源码位于 node_modules/rtlink-vt/packages/demo

（2）框架使用文档

提供了常用组件的接口文档和使用说明。

（3）开发工具

提供一些辅助开发的工具页面，如代码生成器等。

​

代码生成器

【todo】待补充

​

批量创建菜单

【todo】待补充