npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

rtlink-vt

v0.3.7

Published

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

Downloads

470

Readme

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级以上菜单向右展开,支持任意层级的菜单结构

组件

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

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】待补充