mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-04-05 19:41:57 +08:00
feat: 更改项目初始化方式
This commit is contained in:
bac-joker
harrywan
parent
4727c5bf5b
commit
2b7aef1ea1
@ -1,7 +1,8 @@
|
||||
const path = require('path');
|
||||
const fs = require('fs-extra');
|
||||
const prompts = require('prompts');
|
||||
const { exec } = require('child_process');
|
||||
const tar = require('tar');
|
||||
const { execSync } = require('child_process');
|
||||
const log = require('../helpers/log');
|
||||
|
||||
|
||||
@ -13,22 +14,22 @@ function createProject(config, projectName) {
|
||||
return Promise.reject();
|
||||
}
|
||||
return new Promise((resolve, reject) => {
|
||||
fs.copy(`${config.folders.CLI_DIR}/template`, `${config.folders.PROJECT_DIR}/${projectName}`).then(() => {
|
||||
exec(`cd ${config.folders.PROJECT_DIR}/${projectName} && git init && npm i @webank/fes-core @webank/fes-ui && npm i`, (err) => {
|
||||
if (err) {
|
||||
log.error(err);
|
||||
reject(err);
|
||||
return;
|
||||
}
|
||||
log.message(`项目 ${projectName} 创建完成，请执行下面的命令进行使用：`);
|
||||
log.message(`$ cd ${projectName}`);
|
||||
log.message('$ npm run dev');
|
||||
resolve();
|
||||
});
|
||||
}).catch((err) => {
|
||||
log.error(err);
|
||||
reject(err);
|
||||
});
|
||||
const productDir = `${config.folders.PROJECT_DIR}/${projectName}`;
|
||||
const stdout = execSync(`npm pack @webank/fes-template`, { encoding: 'utf8', stdio: [null]});
|
||||
const filePath = path.resolve(config.folders.PROJECT_DIR, stdout.replace('\n', ''));
|
||||
fs.mkdirSync(projectDir);
|
||||
fs.createReadStream(filePath).pipe(
|
||||
tar.x({
|
||||
strip: 1,
|
||||
C: productDir // alias for cwd:'some-dir', also ok
|
||||
})
|
||||
);
|
||||
fs.unlinkSync(filePath);
|
||||
log.message(`项目 ${projectName} 创建完成，请执行下面的命令进行使用：`);
|
||||
log.message(`$ cd ${projectName}`);
|
||||
log.message('$ npm i');
|
||||
log.message('$ npm run dev');
|
||||
resolve();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -80,6 +80,7 @@
|
||||
"string-replace-loader": "^2.2.0",
|
||||
"strip-indent": "^2.0.0",
|
||||
"style-loader": "^1.0.0",
|
||||
"tar": "^6.0.5",
|
||||
"tar-fs": "^1.16.0",
|
||||
"terser-webpack-plugin": "^2.2.1",
|
||||
"thread-loader": "^2.1.3",
|
||||
|
||||
@ -1,17 +0,0 @@
|
||||
|
||||
module.exports = {
|
||||
extends: [
|
||||
'@webank/eslint-config-webank/vue',
|
||||
],
|
||||
globals: {
|
||||
// 这里填入你的项目需要的全局变量
|
||||
// 这里值为 false 表示这个全局变量不允许被重新赋值，比如：
|
||||
//
|
||||
// Vue: false
|
||||
},
|
||||
rules: {
|
||||
'no-plusplus': 'off',
|
||||
'no-bitwise': 'off',
|
||||
'vue/comment-directive': 'off'
|
||||
}
|
||||
};
|
||||
@ -1,21 +0,0 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2020-present harrywan
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
@ -1,139 +0,0 @@
|
||||
module.exports = {
|
||||
mode: 'vertical', // 可选有vertical、horizontal，默认vertical
|
||||
theme: 'blue', // 可选有blue、dark，默认blue
|
||||
fesName: 'xx 运营平台', // 项目名称
|
||||
favicon: 'static/favicon.ico', // 图标
|
||||
// 环境变量配置, 默认使用local环境
|
||||
env: {
|
||||
// 本地开发环境
|
||||
local: {
|
||||
api: ''
|
||||
},
|
||||
// 测试环境 --env=sit 触发使用
|
||||
develop: {
|
||||
api: 'http://test.xxx.com'
|
||||
},
|
||||
// 生产环境 --env=sit 触发使用
|
||||
prod: {
|
||||
api: 'http://xxx.com'
|
||||
}
|
||||
},
|
||||
// 配置角色-路由访问权限，使用FesApp.setRole('unLogin')来修改当前用户的角色，控制路由访问权限
|
||||
roles: {
|
||||
unLogin: ['/home'],
|
||||
admin: ['/list', '*']
|
||||
},
|
||||
// map
|
||||
map: {
|
||||
status: [['1', '成功'], ['2', '失败']]
|
||||
},
|
||||
// 左侧菜单配置
|
||||
menu: [
|
||||
{
|
||||
title: '$i18n.menu.interface',
|
||||
path: '/api',
|
||||
subMenu: [
|
||||
{
|
||||
title: 'Fes',
|
||||
path: '/api/fes'
|
||||
},
|
||||
{
|
||||
title: 'FesApp',
|
||||
path: '/api/fesApp'
|
||||
},
|
||||
{
|
||||
title: 'FesApi',
|
||||
path: '/api/fesApi'
|
||||
},
|
||||
{
|
||||
title: 'FesMenu',
|
||||
path: '/api/fesMenu'
|
||||
},
|
||||
{
|
||||
title: 'FesMap',
|
||||
path: '/api/fesMap'
|
||||
},
|
||||
{
|
||||
title: 'FesFesx',
|
||||
path: '/api/fesFesx'
|
||||
},
|
||||
{
|
||||
title: 'FesStorage',
|
||||
path: '/api/fesStorage'
|
||||
},
|
||||
{
|
||||
title: 'FesUtil',
|
||||
path: '/api/fesUtil'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '路由',
|
||||
path: '/route'
|
||||
},
|
||||
{
|
||||
icon: 'static/bell.png',
|
||||
title: '列表页',
|
||||
path: '/list'
|
||||
},
|
||||
{
|
||||
title: '内容很多的编辑',
|
||||
path: '/list/edit'
|
||||
},
|
||||
{
|
||||
title: '显示头部',
|
||||
path: '/header'
|
||||
},
|
||||
{
|
||||
title: '静态资源',
|
||||
path: '/static'
|
||||
},
|
||||
{
|
||||
title: '子路由',
|
||||
path: '/layout',
|
||||
subMenu: [
|
||||
{
|
||||
title: '子路由A',
|
||||
path: '/layout/a'
|
||||
},
|
||||
{
|
||||
title: '子路由B',
|
||||
path: '/layout/b'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '国际化',
|
||||
path: '/i18n'
|
||||
}
|
||||
],
|
||||
i18n: {
|
||||
locale: 'en', // default zh-cn
|
||||
messages: {
|
||||
'zh-cn': {
|
||||
menu: {
|
||||
interface: '接口'
|
||||
},
|
||||
overview: '概述',
|
||||
i18n: {
|
||||
internationalization: '国际化，基于',
|
||||
achieve: '实现。',
|
||||
ui: 'UI组件'
|
||||
},
|
||||
title: '标题'
|
||||
},
|
||||
en: {
|
||||
menu: {
|
||||
interface: 'interface'
|
||||
},
|
||||
overview: 'Overview',
|
||||
i18n: {
|
||||
internationalization: 'internationalization，base on',
|
||||
achieve: 'to achieve.',
|
||||
ui: 'UI components'
|
||||
},
|
||||
title: 'title'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -1,113 +0,0 @@
|
||||
module.exports = (cgiMock, Mock) => {
|
||||
const { Random } = Mock;
|
||||
|
||||
// 前缀，全局（可选）
|
||||
// cgiMock.prefix = '';
|
||||
|
||||
// 返回一个数字
|
||||
cgiMock('/number', 123);
|
||||
|
||||
// 返回一个json
|
||||
cgiMock({
|
||||
url: '/json',
|
||||
result: {
|
||||
code: '400101', msg: "不合法的请求:Missing cookie 'wb_app_id' for method parameter of type String", transactionTime: '20170309171146', success: false
|
||||
}
|
||||
});
|
||||
|
||||
// 利用mock.js 产生随机文本
|
||||
cgiMock('/text', Random.cparagraph());
|
||||
|
||||
// 返回一个字符串 利用mock.js 产生随机字符
|
||||
cgiMock('/string', Mock.mock({
|
||||
'string|1-10': '★'
|
||||
}));
|
||||
|
||||
|
||||
// 正则匹配url, 返回一个字符串
|
||||
// cgiMock(/\/abc|\/xyz/, 'regexp test!');
|
||||
|
||||
// option.result 参数如果是一个函数, 可以实现自定义返回内容, 接收的参数是是经过 express 封装的 req 和 res 对象.
|
||||
// cgiMock(/\/function$/, function (req, res) {
|
||||
// res.send('function test');
|
||||
// });
|
||||
|
||||
// 返回文本 fs.readFileSync
|
||||
// cgiMock('/file', cgiMock.file('./test.json'));
|
||||
|
||||
// 更复杂的规则配置
|
||||
cgiMock({
|
||||
url: /\/who/,
|
||||
method: 'GET',
|
||||
result(req, res) {
|
||||
if (req.query.name === 'kwan') {
|
||||
res.json({ kwan: '孤独患者' });
|
||||
} else {
|
||||
res.send('Nooooooooooo');
|
||||
}
|
||||
},
|
||||
headers: {
|
||||
'Content-Type': 'text/plain',
|
||||
'Content-Length': '123',
|
||||
ETag: '12345'
|
||||
},
|
||||
cookies: [
|
||||
{
|
||||
name: 'myname', value: 'kwan', maxAge: 900000, httpOnly: true
|
||||
}
|
||||
],
|
||||
// 接口随机延迟
|
||||
timeout: Mock.mock({
|
||||
'number|1000-5000': 1000
|
||||
}).number
|
||||
});
|
||||
// 登录
|
||||
cgiMock('/login', (req, res) => {
|
||||
res.send(JSON.stringify({
|
||||
code: '0',
|
||||
msg: '',
|
||||
result: {
|
||||
username: '万纯（harrywan）',
|
||||
roleName: '管理员'
|
||||
}
|
||||
}));
|
||||
});
|
||||
|
||||
cgiMock('/getTestList', (req, res) => {
|
||||
const list = [];
|
||||
for (let i = 0; i < req.body.pageSize; i++) {
|
||||
list.push({
|
||||
a: i
|
||||
});
|
||||
}
|
||||
res.send(JSON.stringify({
|
||||
code: '0',
|
||||
msg: 'this is message',
|
||||
result: {
|
||||
list,
|
||||
page: {
|
||||
pageSize: req.body.pageSize,
|
||||
currentPage: req.body.currentPage,
|
||||
totalPage: 1000
|
||||
}
|
||||
}
|
||||
|
||||
}));
|
||||
});
|
||||
|
||||
cgiMock('/getNumber', (req, res) => {
|
||||
res.send(JSON.stringify({
|
||||
code: '0',
|
||||
msg: 'this is message',
|
||||
result: 4
|
||||
}));
|
||||
});
|
||||
|
||||
cgiMock('/getRoleName', (req, res) => {
|
||||
res.send(JSON.stringify({
|
||||
code: '0',
|
||||
msg: 'this is message',
|
||||
result: 'admin'
|
||||
}));
|
||||
});
|
||||
};
|
||||
@ -1,60 +0,0 @@
|
||||
{
|
||||
"name": "@webank/fes-template",
|
||||
"version": "0.1.0",
|
||||
"description": "fes项目模版",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"build": "fes build",
|
||||
"dev": "fes dev"
|
||||
},
|
||||
"husky": {
|
||||
"hooks": {
|
||||
"pre-commit": "lint-staged"
|
||||
}
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.js": [
|
||||
"eslint",
|
||||
"git add"
|
||||
],
|
||||
"*.fes": [
|
||||
"eslint",
|
||||
"git add"
|
||||
],
|
||||
"*.vue": [
|
||||
"eslint",
|
||||
"git add"
|
||||
]
|
||||
},
|
||||
"keywords": [
|
||||
"管理端",
|
||||
"fes",
|
||||
"fast",
|
||||
"easy",
|
||||
"strong"
|
||||
],
|
||||
"files": [
|
||||
".eslintrc.js",
|
||||
".gitignore",
|
||||
"fes.config.js",
|
||||
"mock.js",
|
||||
"package.json",
|
||||
"README.md",
|
||||
"/src"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git"
|
||||
},
|
||||
"author": "harrywan qlin",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"@webank/eslint-config-webank": "^0.1.4",
|
||||
"husky": "^3.0.9",
|
||||
"lint-staged": "^9.4.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"@webank/fes-core": "^0.1.0",
|
||||
"@webank/fes-ui": "^0.1.0"
|
||||
},
|
||||
"peerDependencies": {}
|
||||
}
|
||||
@ -1,42 +0,0 @@
|
||||
import './assets/styles/main.scss';
|
||||
|
||||
export default function () {
|
||||
this.FesApp.set('FesName', '$i18n.title');
|
||||
|
||||
|
||||
// 设置退出逻辑
|
||||
this.on('fes_logout', () => {
|
||||
this.FesApp.setRole('unLogin');
|
||||
this.FesStorage.set('userLogin', false);
|
||||
});
|
||||
|
||||
// 设置logo点击事件
|
||||
this.on('fes_logo_click', () => {
|
||||
window.Toast('你点击了LOGO');
|
||||
});
|
||||
|
||||
// 设置路由钩子
|
||||
this.FesApp.setBeforeRouter((from, to, next) => {
|
||||
next();
|
||||
});
|
||||
this.FesApp.setAfterRouter((route) => {
|
||||
console.log(`您浏览到了${route.path}`);
|
||||
});
|
||||
|
||||
// 设置当前角色
|
||||
if (!this.FesStorage.get('userLogin') === true) {
|
||||
this.setRole('unLogin');
|
||||
}
|
||||
|
||||
// 设置AJAX配置
|
||||
this.FesApi.option({
|
||||
});
|
||||
|
||||
// 设置响应结构
|
||||
this.FesApi.setResponse({
|
||||
successCode: '0',
|
||||
codePath: 'code',
|
||||
messagePath: 'msg',
|
||||
resultPath: 'result'
|
||||
});
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 168 KiB |
@ -1,131 +0,0 @@
|
||||
.login-panel {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
margin: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: $body-background;
|
||||
background-image: url("../images/bg.png");
|
||||
background-position: left bottom;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% auto;
|
||||
font-size: 18px;
|
||||
color: $black-text-color;
|
||||
}
|
||||
|
||||
.login-panel .login-panel-swap {
|
||||
position: relative;
|
||||
width: 945px;
|
||||
height: 324px;
|
||||
margin: 10% auto;
|
||||
border-radius: $border-radius-small;
|
||||
}
|
||||
|
||||
.login-panel .logo {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 400px;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
.logo-text {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-top: 130px;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.login-panel .split {
|
||||
display: inline-block;
|
||||
background: $border-color-base;
|
||||
width: 1px;
|
||||
height: 180px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.login-panel .error {
|
||||
margin-top: 10px;
|
||||
width: 350px;
|
||||
color: $error-color;
|
||||
font-size: 14px;
|
||||
.ui-icon-exclamation-circle{
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-panel .login-form {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
padding: 0 75px 0;
|
||||
height: 270px;
|
||||
input::-webkit-input-placeholder{
|
||||
color: $black-text-color;
|
||||
}
|
||||
input::-moz-placeholder {
|
||||
color: $black-text-color;
|
||||
}
|
||||
/* ie */
|
||||
input:-ms-input-placeholder {
|
||||
color: $black-text-color;
|
||||
}
|
||||
/* firefox 19+ */
|
||||
input:-moz-placeholder {
|
||||
color: $black-text-color;
|
||||
}
|
||||
|
||||
input:-webkit-autofill {
|
||||
-webkit-box-shadow: 0 0 0px 1000px white inset !important;
|
||||
-webkit-text-fill-color: $black-text-color !important;
|
||||
}
|
||||
.line{
|
||||
padding-top: 30px;
|
||||
border-bottom: 1px solid $border-color-split;
|
||||
}
|
||||
input[type="text"],
|
||||
input[type="password"]{
|
||||
margin: 0;
|
||||
width: 350px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0 15px;
|
||||
vertical-align: middle;
|
||||
background: 0 0;
|
||||
outline: 0;
|
||||
border: none;
|
||||
font-size: 16px;
|
||||
color: $black-text-color;
|
||||
}
|
||||
button {
|
||||
margin-top: 10px;
|
||||
width: 350px;
|
||||
height: 48px;
|
||||
border-radius: 4px;
|
||||
line-height: 46px;
|
||||
border: none;
|
||||
outline: 0;
|
||||
background-color: $primary-color;
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
&:hover {
|
||||
background-color: $selected-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ie-palceholder::after{
|
||||
content: '用户名';
|
||||
position: absolute;
|
||||
left: 88px;
|
||||
top: 38px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.ie-palceholder-password::after{
|
||||
content: '密码';
|
||||
top: 110px;
|
||||
}
|
||||
@ -1,50 +0,0 @@
|
||||
@import "variables";
|
||||
@import "login";
|
||||
|
||||
.article {
|
||||
padding: 20px;
|
||||
h1 {
|
||||
font-size: 26px;
|
||||
font-weight: 400;
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 25px 0 12px;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style-type: disc;
|
||||
margin-bottom: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
table{
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
empty-cells: show;
|
||||
border: 1px solid #e9e9e9;
|
||||
width: 500px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
th,td {
|
||||
border: 1px solid #e9e9e9;
|
||||
padding: 8px 16px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
@ -1,90 +0,0 @@
|
||||
// Color
|
||||
$primary-color : #3399ff;
|
||||
$info-color : #2db7f5;
|
||||
$success-color : #00cc66;
|
||||
$warning-color : #ff9900;
|
||||
$error-color : #ff5500;
|
||||
$link-color : #3399ff;
|
||||
$link-hover-color : #5cadff;
|
||||
$link-focus-color : rgba(51,153,255, .2);
|
||||
$link-active-color : #3091f2;
|
||||
$selected-color : rgba($primary-color, .9);
|
||||
$tooltip-color : #fff;
|
||||
//辅助/图标
|
||||
$subsidiary-color : #9ea7b4;
|
||||
$disabled-color : #f3f3f3;
|
||||
|
||||
// Base
|
||||
$body-background : #fff;
|
||||
$component-background : #fff;
|
||||
$font-family : "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
|
||||
$code-family : Consolas,Menlo,Courier,monospace;
|
||||
$title-color : #464c5b;
|
||||
$text-color : #657180;
|
||||
$black-text-color : #333333;
|
||||
$sub-text-color : #999;
|
||||
$dark-color : #333;
|
||||
|
||||
//失效 Disabled
|
||||
$tip-color : #c3cbd6;
|
||||
$font-size-lg : 16px;
|
||||
$font-size-base : 14px;
|
||||
$font-size-small : 12px;
|
||||
$line-height-base : 1.5;
|
||||
$line-height-computed : floor(($font-size-base * $line-height-base));
|
||||
$border-radius-base : 6px;
|
||||
$border-radius-small : 4px;
|
||||
$cursor-disabled : not-allowed;
|
||||
|
||||
// Border color
|
||||
$border-color-base : #d7dde4; // outside
|
||||
$border-color-split : #e3e8ee; // inside
|
||||
|
||||
|
||||
// Background color
|
||||
$background-color-base : #f7f7f7; // base
|
||||
$background-color-select-hover: #f3f3f3;
|
||||
$tooltip-bg : rgba(70, 76, 91, .9);
|
||||
$head-bg : #f9fafc;
|
||||
$table-thead-bg : #f5f7f9;
|
||||
$table-td-stripe-bg : #f5f7f9;
|
||||
$table-td-hover-bg : #ebf7ff;
|
||||
$table-td-highlight-bg : #ebf7ff;
|
||||
|
||||
// Z-index
|
||||
$zindex-spin : 8;
|
||||
$zindex-affix : 10;
|
||||
$zindex-back-top : 10;
|
||||
$zindex-select : 900;
|
||||
$zindex-modal : 1000;
|
||||
$zindex-message : 1010;
|
||||
$zindex-notification : 1010;
|
||||
$zindex-tooltip : 1060;
|
||||
$zindex-loading-bar : 2000;
|
||||
|
||||
// Animation
|
||||
$animation-time : .3s;
|
||||
$transition-time : .2s;
|
||||
$ease-out : cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
$ease-in : cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
$ease-in-out : cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
$ease-out-back : cubic-bezier(0.12, 0.4, 0.29, 1.46);
|
||||
$ease-in-back : cubic-bezier(0.71, -0.46, 0.88, 0.6);
|
||||
$ease-in-out-back : cubic-bezier(0.71, -0.46, 0.29, 1.46);
|
||||
$ease-out-circ : cubic-bezier(0.08, 0.82, 0.17, 1);
|
||||
$ease-in-circ : cubic-bezier(0.6, 0.04, 0.98, 0.34);
|
||||
$ease-in-out-circ : cubic-bezier(0.78, 0.14, 0.15, 0.86);
|
||||
$ease-out-quint : cubic-bezier(0.23, 1, 0.32, 1);
|
||||
$ease-in-quint : cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
||||
$ease-in-out-quint : cubic-bezier(0.86, 0, 0.07, 1);
|
||||
|
||||
// Shadow
|
||||
$shadow-color : rgba(0, 0, 0, .2);
|
||||
$shadow-1-up : 0 -1px 6px $shadow-color;
|
||||
$shadow-1-down : 0 1px 6px $shadow-color;
|
||||
$shadow-1-left : -1px 0 6px $shadow-color;
|
||||
$shadow-1-right : 1px 0 6px $shadow-color;
|
||||
$shadow-2 : 0 2px 8px $shadow-color;
|
||||
$box-shadow-base : $shadow-1-down;
|
||||
|
||||
$mask-color: rgba(55, 55, 55, .6);
|
||||
@ -1,74 +0,0 @@
|
||||
<template>
|
||||
<div class="article">
|
||||
<h2>{{$t('overview')}}</h2>
|
||||
<p>对Vue做了一层封装。给Vue添加了一些属性，方便使用。</p>
|
||||
|
||||
<h2>属性</h2>
|
||||
<ul>
|
||||
<li><router-link to="/api/fesApp">this.FesApp App实例</router-link></li>
|
||||
<li><router-link to="/api/fesUtil">this.FesUtil 工具函数</router-link></li>
|
||||
<li><router-link to="/api/fesStorage">this.FesStorage 操作存储: cookie、sessionStorage、localStorage</router-link></li>
|
||||
<li><router-link to="/api/fesApi">this.FesApi 操作Ajax</router-link></li>
|
||||
</ul>
|
||||
|
||||
<h2>响应式数据FesData</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<p>双向绑定的值，类似绑定到ng里面scope的值</p>
|
||||
<p>
|
||||
<input v-model="data1"> {{data1}}
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><router-link to="/api/fesMap"><strong>数据字典FesMap</strong></router-link></p>
|
||||
<p>FesMap会自动挂载到FesData</p>
|
||||
<p>FesMap: {{FesMap}}</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><router-link to="/api/fesFesx"><strong>全局状态FesFesx</strong></router-link></p>
|
||||
<p>FesFesx会自动挂载到FesData </p>
|
||||
<p>FesFesx: {{FesFesx}}</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h2>异步响应数据FesSyncData</h2>
|
||||
<p>进入路由时根据接口查询到的值，并且设置成响应数据</p>
|
||||
<p>
|
||||
<input v-model="data2">
|
||||
</p>
|
||||
<p>
|
||||
data2: {{data2}}
|
||||
</p>
|
||||
|
||||
|
||||
<h2>过滤器</h2>
|
||||
<p>日期: {{date}} => {{date | date}}</p>
|
||||
<p>日期（带参数）: {{date}} => {{date | date('yyyy-MM-dd')}}</p>
|
||||
<p>金钱: {{money}} => {{money | money}}</p>
|
||||
<p>银行卡: {{card}} => {{card | card}}</p>
|
||||
<p>加密: {{safety}} => {{safety | safety(4,3)}}</p>
|
||||
<p>数据字典: {{map}} => {{map | map(FesMap.status)}}</p>
|
||||
</div>
|
||||
</template>
|
||||
<script type="text/ecmascript-6">
|
||||
export default {
|
||||
FesData: {
|
||||
data1: '1',
|
||||
money: 100000,
|
||||
card: '11122233242323',
|
||||
safety: '42222991018719191',
|
||||
map: '1',
|
||||
date: new Date().getTime()
|
||||
},
|
||||
FesSyncData: {
|
||||
data2: ['/getNumber', {
|
||||
max: 100,
|
||||
min: 1
|
||||
}]
|
||||
},
|
||||
FesReady() {
|
||||
// do something
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,50 +0,0 @@
|
||||
<template>
|
||||
<div class="article">
|
||||
<h2>{{$t('overview')}}</h2>
|
||||
<p>对vue-resource的封装。公共的异常处理，响应处理等。</p>
|
||||
|
||||
<h2>函数</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<p>get(url, data, option)</p>
|
||||
<p>
|
||||
发起一个get请求，返回值是promise对象
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>post(url, data, option)</p>
|
||||
<p>
|
||||
发起一个post请求，返回值是promise对象
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>fetch(url, data, option)</p>
|
||||
<p>
|
||||
默认调用post请求，返回值是promise对象
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>option(option)</p>
|
||||
<p>
|
||||
设置ajax的公共配置，比如root（根路径）、timeout（超时时间）、xhr（xhr对象）
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>setError(errors)</p>
|
||||
<p>
|
||||
设置当响应状态是非200时触发的事件钩子，比如401啊等
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>setResponse(constructionOfResponse)</p>
|
||||
<p>
|
||||
设置响应结构。响应一般会由状态码、错误消息、数据组成。通过此函数设置一个路径，当响应回来是来解析响应。
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
<script type="text/ecmascript-6">
|
||||
export default {
|
||||
};
|
||||
</script>
|
||||
@ -1,94 +0,0 @@
|
||||
<template>
|
||||
<div class="article">
|
||||
<h2>{{$t('overview')}}</h2>
|
||||
<p>一个App表示一个应用。管理一些应用级别的状态。</p>
|
||||
|
||||
<h2>属性</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<router-link to="/api/fesApi">
|
||||
<p>this.FesApi</p>
|
||||
<p>操作ajax的对象</p>
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link to="/api/fesMap">
|
||||
<p>this.FesMap</p>
|
||||
<p>数据字典，保存数据字典的容器，提供查找函数</p>
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link to="/api/fesUtil">
|
||||
<p>this.FesUtil</p>
|
||||
<p>工具函数，操作dom、对象等</p>
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link to="/api/fesFesx">
|
||||
<p>this.FesFesx</p>
|
||||
<p>存储全局状态的容器</p>
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link to="/api/fesStorage">
|
||||
<p>this.FesStorage</p>
|
||||
<p>操作存储: cookie、sessionStorage、localStorage</p>
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<p>this.router</p>
|
||||
<p>当前路由对象，具体api查询vue-router v0.7</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h2>函数</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<p>init</p>
|
||||
<p>
|
||||
初始化整个应用，我们只需要在app.js写入自定义的初始化内容，比如设置菜单、项目名等
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>get(prop)</p>
|
||||
<p>
|
||||
根据prop获取在App保存的应用层面的状态值
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>set(prop, value)</p>
|
||||
<p>
|
||||
设置应用层面的状态，包括FesName、FesMenu、FesUserName、FesRoleName、FesLogout
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>setRole(role)</p>
|
||||
<p>
|
||||
我们需要在common/rolesConfig.js中配置角色所属的菜单权限，可以把未登录状态也当作一种角色。根据当前登录状态或者用户设置不同的角色。菜单也会根据角色展示。
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>getAllowPage()</p>
|
||||
<p>
|
||||
返回当前能访问的页面
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>setBeforeRouter(beforeRouter)</p>
|
||||
<p>
|
||||
设置路由切换之前的事件钩子，可以根据条件判断是否阻止切换
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>setAfterRouter(afterRouter)</p>
|
||||
<p>
|
||||
路由切换之后的事件钩子
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
<script type="text/ecmascript-6">
|
||||
export default {
|
||||
};
|
||||
</script>
|
||||
@ -1,26 +0,0 @@
|
||||
<template>
|
||||
<div class="article">
|
||||
<h2>{{$t('overview')}}</h2>
|
||||
<p>全局的状态管理容器</p>
|
||||
|
||||
<h2>函数</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<p>get(prop)</p>
|
||||
<p>
|
||||
根据prop获取值
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>set(prop, value)</p>
|
||||
<p>
|
||||
设置一个全局的状态
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
<script type="text/ecmascript-6">
|
||||
export default {
|
||||
};
|
||||
</script>
|
||||
@ -1,20 +0,0 @@
|
||||
<template>
|
||||
<div class="article">
|
||||
<h2>{{$t('overview')}}</h2>
|
||||
<p>数据字典管理对象。当程序加载时，从common/map.js中读取原始数据，转换成{value: value, text: text}，存入FesMap</p>
|
||||
|
||||
<h2>函数</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<p>getNameByValue(name, value)</p>
|
||||
<p>
|
||||
从FesMap[name]中找出值是value的那一条数据
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
<script type="text/ecmascript-6">
|
||||
export default {
|
||||
};
|
||||
</script>
|
||||
@ -1,129 +0,0 @@
|
||||
<template>
|
||||
<div class="article">
|
||||
<h2>{{$t('overview')}}</h2>
|
||||
<p>
|
||||
配置公共左侧菜单
|
||||
<br> 在调用FesApp.setRole(...)之后，FesMenu只显示当前用户可以访问的菜单
|
||||
</p>
|
||||
<h2>API</h2>
|
||||
<p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="text-align:left">
|
||||
属性
|
||||
</th>
|
||||
<th style="text-align:left">
|
||||
说明
|
||||
</th>
|
||||
<th style="text-align:left">
|
||||
类型
|
||||
</th>
|
||||
<th style="text-align:left">
|
||||
默认值
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="text-align:left">
|
||||
title
|
||||
</td>
|
||||
<td style="text-align:left">
|
||||
菜单标题
|
||||
</td>
|
||||
<td style="text-align:left">
|
||||
String
|
||||
</td>
|
||||
<td style="text-align:left">
|
||||
空
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="text-align:left">
|
||||
path
|
||||
</td>
|
||||
<td style="text-align:left">
|
||||
菜单项点击后，跳转路径
|
||||
</td>
|
||||
<td style="text-align:left">
|
||||
String
|
||||
</td>
|
||||
<td style="text-align:left">
|
||||
空
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="text-align:left">
|
||||
subMenu
|
||||
</td>
|
||||
<td style="text-align:left">
|
||||
子菜单，每项也有path和title
|
||||
</td>
|
||||
<td style="text-align:left">
|
||||
Array
|
||||
</td>
|
||||
<td style="text-align:left">
|
||||
空
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</p>
|
||||
<h2>示例</h2>
|
||||
<pre>
|
||||
//在app.js文件中设置菜单
|
||||
this.set("FesMenu", [{
|
||||
title: "接口",
|
||||
path: '/api',
|
||||
subMenu: [{
|
||||
title: "Fes",
|
||||
path: '/api/fes',
|
||||
},{
|
||||
title: "FesApp",
|
||||
path: '/api/fesApp',
|
||||
},{
|
||||
title: "FesApi",
|
||||
path: '/api/fesApi',
|
||||
},{
|
||||
title: "FesMenu",
|
||||
path: '/api/fesMenu',
|
||||
},{
|
||||
title: "FesMap",
|
||||
path: '/api/fesMap',
|
||||
},{
|
||||
title: "FesFesx",
|
||||
path: '/api/fesFesx',
|
||||
},{
|
||||
title: "FesStorage",
|
||||
path: '/api/fesStorage',
|
||||
},{
|
||||
title: "FesUtil",
|
||||
path: '/api/fesUtil',
|
||||
}]
|
||||
},{
|
||||
title: "简单的列表页",
|
||||
path: '/list'
|
||||
},{
|
||||
title: "自定义内容列表页",
|
||||
path: '/list1'
|
||||
},{
|
||||
title: "内容很多的编辑",
|
||||
path: '/list/edit'
|
||||
}]
|
||||
);
|
||||
</pre>
|
||||
</div>
|
||||
</template>
|
||||
<script type="text/ecmascript-6">
|
||||
export default {
|
||||
FesData: {
|
||||
data1: '1',
|
||||
money: 100000,
|
||||
card: '11122233242323',
|
||||
safety: '42222991018719191',
|
||||
map: '1',
|
||||
date: new Date().getTime()
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,38 +0,0 @@
|
||||
<template>
|
||||
<div class="article">
|
||||
<h2>{{$t('overview')}}</h2>
|
||||
<p>操作Storage，包含cookie、sessionStorage、localStorage。 category值SESSION对应sessionStorage，LOCAL对应localStorage，COOKIE对应cookie</p>
|
||||
|
||||
<h2>函数</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<p>set(key, value, category = SESSION, expired)</p>
|
||||
<p>
|
||||
往Storage中存入一个值
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>get(key, category = SESSION)</p>
|
||||
<p>
|
||||
从Storage中取得值
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>clear(category = SESSION)</p>
|
||||
<p>
|
||||
清除所有值
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>remove(key, category = SESSION)</p>
|
||||
<p>
|
||||
删除key对应的值
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
<script type="text/ecmascript-6">
|
||||
export default {
|
||||
};
|
||||
</script>
|
||||
@ -1,33 +0,0 @@
|
||||
<template>
|
||||
<div class="article">
|
||||
<h2>{{$t('overview')}}</h2>
|
||||
<p>工具集合</p>
|
||||
|
||||
<h2>函数</h2>
|
||||
<ul>
|
||||
<li>getClass</li>
|
||||
<li>hasClass</li>
|
||||
<li>setClass</li>
|
||||
<li>addClass</li>
|
||||
<li>removeClass</li>
|
||||
<li>contains</li>
|
||||
<li>addEvent</li>
|
||||
<li>triggerEvent</li>
|
||||
<li>merge</li>
|
||||
<li>extend</li>
|
||||
<li>isPlainObject</li>
|
||||
<li>isNumber</li>
|
||||
<li>isDate</li>
|
||||
<li>isFunction</li>
|
||||
<li>isObject</li>
|
||||
<li>isArray</li>
|
||||
<li>isObjectLike</li>
|
||||
<li>isString</li>
|
||||
<li>isNull</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
<script type="text/ecmascript-6">
|
||||
export default {
|
||||
};
|
||||
</script>
|
||||
@ -1,77 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<Fes-search-panel>
|
||||
<Wb-form :label-width="150" type="query">
|
||||
<Form-item label="姓名：">
|
||||
<wb-input placeholder="请输入" />
|
||||
</Form-item>
|
||||
<Form-item label="身份证：">
|
||||
<wb-input placeholder="请输入" />
|
||||
</Form-item>
|
||||
</Wb-form>
|
||||
<div slot="button">
|
||||
<Wb-button @click="search" type="primary" icon="search">
|
||||
查询
|
||||
</Wb-button>
|
||||
</div>
|
||||
</Fes-search-panel>
|
||||
<Fes-list-panel>
|
||||
<Wb-table :data="data">
|
||||
<Column prop="date" name="日期" />
|
||||
<Column prop="name" name="姓名" />
|
||||
<Column prop="age" name="年龄" />
|
||||
<Column prop="adr" name="地址" />
|
||||
<Column prop="status" name="等级" />
|
||||
</Wb-table>
|
||||
<Pagination :size="paginationOption.pageSize" :current="paginationOption.currentPage" :total="paginationOption.totalPage" @on-change="changePage" />
|
||||
</Fes-list-panel>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
FesHeader: true,
|
||||
FesData() {
|
||||
return {
|
||||
data: [{
|
||||
name: '张晓刚',
|
||||
age: 24,
|
||||
date: new Date(2016, 9, 10),
|
||||
adr: '北京市海淀区西二旗',
|
||||
status: 1
|
||||
}, {
|
||||
name: '李晓红',
|
||||
age: 26,
|
||||
date: new Date(2016, 9, 11),
|
||||
adr: '北京市海淀区西二旗',
|
||||
status: 2
|
||||
}, {
|
||||
name: '隔壁老王',
|
||||
age: 22,
|
||||
date: new Date(2016, 9, 12),
|
||||
adr: '北京市海淀区西二旗',
|
||||
status: 3
|
||||
}, {
|
||||
name: '我爸是李刚',
|
||||
age: 19,
|
||||
date: new Date(2016, 9, 13),
|
||||
adr: '北京市海淀区西二旗',
|
||||
status: 4
|
||||
}],
|
||||
paginationOption: {
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
totalPage: 1
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
search() {
|
||||
// do something
|
||||
},
|
||||
changePage() {
|
||||
// do something
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
@ -1,142 +0,0 @@
|
||||
<template>
|
||||
<div class="login-panel">
|
||||
<div class="login-panel-swap">
|
||||
<div class="logo">
|
||||
<span class="logo-text">
|
||||
xx运营平台
|
||||
</span>
|
||||
</div>
|
||||
<div class="split" />
|
||||
<div class="login-form">
|
||||
<div :class="getStyle('userFocus')" class="line">
|
||||
<input
|
||||
ref="username"
|
||||
v-model="username"
|
||||
@input="input"
|
||||
@keydown.enter="login"
|
||||
@focus="focusHandler('userFocus')"
|
||||
@blur="blurHandler('userFocus')"
|
||||
type="text"
|
||||
name="username"
|
||||
autocomplete="off"
|
||||
autofocus
|
||||
placeholder="用户名"
|
||||
>
|
||||
</div>
|
||||
<div :class="getStyle('passwordFocus')" class="line">
|
||||
<input
|
||||
ref="password"
|
||||
v-model="password"
|
||||
@input="input"
|
||||
@keydown.enter="login"
|
||||
@focus="focusHandler('passwordFocus')"
|
||||
@blur="blurHandler('passwordFocus')"
|
||||
type="password"
|
||||
name="password"
|
||||
autocomplete="off"
|
||||
placeholder="密码"
|
||||
>
|
||||
</div>
|
||||
<div class="line">
|
||||
<button @click="login">
|
||||
登录
|
||||
</button>
|
||||
</div>
|
||||
<div v-show="error" class="error">
|
||||
<Icon type="exclamation-circle" />{{error}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
FesLeft: false,
|
||||
FesData() {
|
||||
return {
|
||||
userFocus: false,
|
||||
passwordFocus: false,
|
||||
username: '',
|
||||
password: '',
|
||||
error: '' // 请输入正确的密码，8-16位
|
||||
};
|
||||
},
|
||||
FesReady() {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.username.focus();
|
||||
});
|
||||
this.initStyle();
|
||||
|
||||
if (this.FesStorage.get('userLogin') === true) {
|
||||
this.getRole();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
login() {
|
||||
if (this.validate()) {
|
||||
this.FesApi.fetch('login').then(() => {
|
||||
// 设置用户、角色等
|
||||
this.FesApp.set('FesUserName', '万纯（harrywan）');
|
||||
this.FesApp.set('FesRoleName', '管理员');
|
||||
this.FesStorage.set('userLogin', true);
|
||||
this.getRole();
|
||||
});
|
||||
}
|
||||
},
|
||||
getRole() {
|
||||
this.FesApi.fetch('getRoleName').then((res) => {
|
||||
// 默认跳入rolesConfig的第一项
|
||||
this.FesApp.setRole(res);
|
||||
});
|
||||
},
|
||||
input() {
|
||||
this.error = '';
|
||||
},
|
||||
validate() {
|
||||
const { username } = this;
|
||||
const { password } = this;
|
||||
if (username === '' || username == null) {
|
||||
this.error = '请输入用户名';
|
||||
return false;
|
||||
}
|
||||
if (!/^[a-zA-Z0-9]+([._\\-]*[a-zA-Z0-9])*@([a-zA-Z0-9]+[-a-zA-Z0-9]*[a-zA-Z0-9]+.){1,63}[a-zA-Z0-9]+$/.test(username)) {
|
||||
this.error = '请输入正确邮箱账号';
|
||||
return false;
|
||||
}
|
||||
if (password === '' || password == null) {
|
||||
this.error = '请输入密码';
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
getStyle(type) {
|
||||
let style = '';
|
||||
if (this[type] && this.isIE(9)) {
|
||||
if (type === 'passwordFocus' && !this.password) {
|
||||
style += ' ie-palceholder ie-palceholder-password';
|
||||
} else if (type === 'userFocus' && !this.username) {
|
||||
style += ' ie-palceholder';
|
||||
}
|
||||
}
|
||||
return style;
|
||||
},
|
||||
initStyle() {
|
||||
if (this.isIE(9)) {
|
||||
!this.password && (this.passwordFocus = true);
|
||||
!this.username && (this.userFocus = true);
|
||||
}
|
||||
},
|
||||
focusHandler(type) {
|
||||
this.isIE(9) && (this[type] = false);
|
||||
},
|
||||
blurHandler(type) {
|
||||
this[type] = true;
|
||||
},
|
||||
isIE(ver) {
|
||||
const b = document.createElement('b');
|
||||
b.innerHTML = `<!--[if IE ${ver}]><i></i><![endif]-->`;
|
||||
return b.getElementsByTagName('i').length === 1;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,48 +0,0 @@
|
||||
<template>
|
||||
<div class="article">
|
||||
<h2>{{$t('overview')}}</h2>
|
||||
<p>
|
||||
{{$t('i18n.internationalization')}}<a target="_blank" href="https://kazupon.github.io/vue-i18n">
|
||||
vue-i18n
|
||||
</a>{{$t('i18n.achieve')}}
|
||||
<Wb-select v-model="locale" @on-change="change" class="select">
|
||||
<wb-option value="zh-cn">
|
||||
zh-cn
|
||||
</wb-option>
|
||||
<wb-option value="en">
|
||||
en
|
||||
</wb-option>
|
||||
</Wb-select>
|
||||
</p>
|
||||
|
||||
<h2>{{$t('i18n.ui')}}</h2>
|
||||
<Date-picker :value="value" />
|
||||
</div>
|
||||
</template>
|
||||
<script type="text/ecmascript-6">
|
||||
export default {
|
||||
FesData() {
|
||||
const local = this.FesApp.i18n.locale;
|
||||
return {
|
||||
locale: local,
|
||||
value: +new Date()
|
||||
};
|
||||
},
|
||||
FesReady() {
|
||||
// do something
|
||||
},
|
||||
methods: {
|
||||
change() {
|
||||
this.FesApp.setLocale(this.locale);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.select{
|
||||
width: 200px;
|
||||
}
|
||||
.article ul{
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
@ -1,12 +0,0 @@
|
||||
<template>
|
||||
<div class="article">
|
||||
A子页面
|
||||
</div>
|
||||
</template>
|
||||
<script type="text/ecmascript-6">
|
||||
export default {
|
||||
FesReady() {
|
||||
// do something
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,12 +0,0 @@
|
||||
<template>
|
||||
<div class="article">
|
||||
B子页面
|
||||
</div>
|
||||
</template>
|
||||
<script type="text/ecmascript-6">
|
||||
export default {
|
||||
FesReady() {
|
||||
// do something
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,16 +0,0 @@
|
||||
<template>
|
||||
<div class="article">
|
||||
<h2>{{$t('overview')}}</h2>
|
||||
<p>
|
||||
根路由下所有page共用的外层
|
||||
</p>
|
||||
<router-view />
|
||||
</div>
|
||||
</template>
|
||||
<script type="text/ecmascript-6">
|
||||
export default {
|
||||
FesReady() {
|
||||
// do something
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,89 +0,0 @@
|
||||
<template>
|
||||
<Panel title="新增XXXX">
|
||||
<Icon slot="action" type="check" title="保存" size="20" />
|
||||
<Icon slot="action" type="rollback" title="返回到列表页面" size="20" />
|
||||
<Wb-form :label-width="150">
|
||||
<Row>
|
||||
<Cell span="12">
|
||||
<Form-item label="应用名称：">
|
||||
<wb-input placeholder="我是文本哦" />
|
||||
</Form-item>
|
||||
</Cell>
|
||||
<Cell span="12">
|
||||
<Form-item label="应用名称：">
|
||||
<wb-input placeholder="我是文本哦" />
|
||||
</Form-item>
|
||||
</Cell>
|
||||
</Row>
|
||||
<Row>
|
||||
<Cell span="12">
|
||||
<Form-item label="应用名称：">
|
||||
<wb-input placeholder="我是文本哦" />
|
||||
</Form-item>
|
||||
</Cell>
|
||||
<Cell span="12">
|
||||
<Form-item label="应用名称：">
|
||||
<wb-input placeholder="我是文本哦" />
|
||||
</Form-item>
|
||||
</Cell>
|
||||
</Row>
|
||||
<Row>
|
||||
<Cell span="12">
|
||||
<Form-item label="应用名称：">
|
||||
<wb-input placeholder="我是文本哦" />
|
||||
</Form-item>
|
||||
</Cell>
|
||||
<Cell span="12">
|
||||
<Form-item label="应用名称：">
|
||||
<wb-input placeholder="我是文本哦" />
|
||||
</Form-item>
|
||||
</Cell>
|
||||
</Row>
|
||||
<Row>
|
||||
<Cell span="12">
|
||||
<Form-item label="应用名称：">
|
||||
<wb-input placeholder="我是文本哦" />
|
||||
</Form-item>
|
||||
</Cell>
|
||||
<Cell span="12">
|
||||
<Form-item label="应用名称：">
|
||||
<wb-input placeholder="我是文本哦" />
|
||||
</Form-item>
|
||||
</Cell>
|
||||
</Row>
|
||||
<Row>
|
||||
<Cell span="12">
|
||||
<Form-item label="应用名称：">
|
||||
<wb-input placeholder="我是文本哦" />
|
||||
</Form-item>
|
||||
</Cell>
|
||||
<Cell span="12">
|
||||
<Form-item label="应用名称：">
|
||||
<wb-input placeholder="我是文本哦" />
|
||||
</Form-item>
|
||||
</Cell>
|
||||
</Row>
|
||||
<Row>
|
||||
<Cell span="12">
|
||||
<Form-item label="应用名称：">
|
||||
<wb-input placeholder="我是文本哦" />
|
||||
</Form-item>
|
||||
</Cell>
|
||||
<Cell span="12">
|
||||
<Form-item label="应用名称：">
|
||||
<wb-input placeholder="我是文本哦" />
|
||||
</Form-item>
|
||||
</Cell>
|
||||
</Row>
|
||||
</Wb-form>
|
||||
</Panel>
|
||||
</template>
|
||||
<script type="text/ecmascript-6">
|
||||
export default {
|
||||
FesData() {
|
||||
return {
|
||||
};
|
||||
},
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
@ -1,84 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<fes-search-panel>
|
||||
<Wb-form :label-width="150" type="query">
|
||||
<Form-item label="姓名：">
|
||||
<wb-input v-model="query.name" placeholder="请输入" />
|
||||
</Form-item>
|
||||
<Form-item label="身份证：">
|
||||
<wb-input v-model="query.id" placeholder="请输入" />
|
||||
</Form-item>
|
||||
</Wb-form>
|
||||
<div slot="button">
|
||||
<Wb-button @click="search" type="primary" icon="search">
|
||||
查询
|
||||
</Wb-button>
|
||||
</div>
|
||||
</fes-search-panel>
|
||||
<fes-list-panel>
|
||||
<Wb-table :data="data">
|
||||
<Column prop="date" name="日期" />
|
||||
<Column prop="name" name="姓名" />
|
||||
<Column prop="age" name="年龄" />
|
||||
<Column prop="adr" name="地址" />
|
||||
<Column prop="status" name="等级" />
|
||||
</Wb-table>
|
||||
<Pagination :size="paginationOption.pageSize" :current="paginationOption.currentPage" :total="paginationOption.totalPage" @on-change="changePage" />
|
||||
</fes-list-panel>
|
||||
</div>
|
||||
</template>
|
||||
<script type="text/ecmascript-6">
|
||||
export default {
|
||||
FesDataCache: 'test',
|
||||
FesData() {
|
||||
return {
|
||||
query: {
|
||||
name: '',
|
||||
id: ''
|
||||
},
|
||||
data: [{
|
||||
name: '张晓刚',
|
||||
age: 24,
|
||||
date: new Date(2016, 9, 10),
|
||||
adr: '北京市海淀区西二旗',
|
||||
status: 1
|
||||
}, {
|
||||
name: '李晓红',
|
||||
age: 26,
|
||||
date: new Date(2016, 9, 11),
|
||||
adr: '北京市海淀区西二旗',
|
||||
status: 2
|
||||
}, {
|
||||
name: '隔壁老王',
|
||||
age: 22,
|
||||
date: new Date(2016, 9, 12),
|
||||
adr: '北京市海淀区西二旗',
|
||||
status: 3
|
||||
}, {
|
||||
name: '我爸是李刚',
|
||||
age: 19,
|
||||
date: new Date(2016, 9, 13),
|
||||
adr: '北京市海淀区西二旗',
|
||||
status: 4
|
||||
}],
|
||||
paginationOption: {
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
totalPage: 2
|
||||
}
|
||||
};
|
||||
},
|
||||
FesReady() {
|
||||
console.log(this);
|
||||
},
|
||||
methods: {
|
||||
changePage({ current, size }) {
|
||||
this.paginationOption.currentPage = current;
|
||||
this.paginationOption.pageSize = size;
|
||||
},
|
||||
search() {
|
||||
this.FesApp.router.push('/test');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,28 +0,0 @@
|
||||
<template>
|
||||
<div class="article">
|
||||
<h2>{{$t('overview')}}</h2>
|
||||
<p>
|
||||
Fes的路由是根据src/pages目录自动生成的<br>
|
||||
</p>
|
||||
<h2>生成规则</h2>
|
||||
<pre>
|
||||
pages
|
||||
├── index.fes # 根路由页面 路径 http://localhost:5000/index.html#!/
|
||||
├── a.fes # 路径 /a
|
||||
├── b
|
||||
│ ├── index.fes # 路径 /b
|
||||
│ ├── @id.fes # 动态路由 /b/:id
|
||||
│ └── c.fes # 路径 /b/c(优先于/b/:id进行匹配)
|
||||
└── layout.fes # 根路由下所有page共用的外层
|
||||
</pre>
|
||||
</div>
|
||||
</template>
|
||||
<script type="text/ecmascript-6">
|
||||
export default {
|
||||
FesData() {
|
||||
return {
|
||||
value: +new Date()
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,18 +0,0 @@
|
||||
<template>
|
||||
<div class="article">
|
||||
<h2>{{$t('overview')}}</h2>
|
||||
<p>存放静态资源文件，不需要经过打包处理的，跟vue体系无关的前端资源可以放在这里</p>
|
||||
|
||||
<a target="_blank" href="static/1.txt">
|
||||
点击下载 1.txt
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
FesData() {
|
||||
return {
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1 +0,0 @@
|
||||
111
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 443 B |
Binary file not shown.
|
Before Width: | Height: | Size: 5.3 KiB |
@ -1,10 +1,17 @@
|
||||
# 快速上手
|
||||
|
||||
## 创建项目
|
||||
|
||||
```shell
|
||||
fes init [projectName]
|
||||
```
|
||||
|
||||
## 项目初始化
|
||||
|
||||
```shell
|
||||
cd [projectName] && npm i
|
||||
```
|
||||
|
||||
## 启动项目
|
||||
进入工程目录，执行 `fes dev` 进入开发模式
|
||||
|
||||
|
||||
@ -1,15 +0,0 @@
|
||||
# http://editorconfig.org
|
||||
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 4
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
[*.md]
|
||||
insert_final_newline = false
|
||||
trim_trailing_whitespace = false
|
||||
@ -1,31 +1,11 @@
|
||||
{
|
||||
"name": "@webank/fes-template",
|
||||
"version": "0.1.0",
|
||||
"version": "0.1.2",
|
||||
"description": "fes项目模版",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"build": "fes build",
|
||||
"dev": "fes dev",
|
||||
"lint": "fes lint"
|
||||
},
|
||||
"husky": {
|
||||
"hooks": {
|
||||
"pre-commit": "lint-staged"
|
||||
}
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.js": [
|
||||
"eslint",
|
||||
"git add"
|
||||
],
|
||||
"*.fes": [
|
||||
"eslint",
|
||||
"git add"
|
||||
],
|
||||
"*.vue": [
|
||||
"eslint",
|
||||
"git add"
|
||||
]
|
||||
"dev": "fes dev"
|
||||
},
|
||||
"keywords": [
|
||||
"管理端",
|
||||
@ -43,17 +23,16 @@
|
||||
"README.md",
|
||||
"/src"
|
||||
],
|
||||
"author": "harrywan fanniehuang qlin",
|
||||
"repository": {
|
||||
"type": "git"
|
||||
},
|
||||
"author": "harrywan qlin",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"@webank/eslint-config-webank": "^0.1.6",
|
||||
"csp-html-webpack-plugin": "^4.0.0",
|
||||
"husky": "^3.0.9",
|
||||
"lint-staged": "^9.4.2"
|
||||
"@webank/eslint-config-webank": "^0.1.4"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^2.6.10",
|
||||
"@webank/fes-core": "^0.1.0",
|
||||
"@webank/fes-core": "^0.1.1",
|
||||
"@webank/fes-ui": "^0.1.0"
|
||||
},
|
||||
"peerDependencies": {}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 168 KiB |
@ -1,14 +0,0 @@
|
||||
<template>
|
||||
<div style="text-align: center">
|
||||
我是头部
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// components文件夹中的*.fes会根据文件名自动注册为组件，可直接使用
|
||||
// 请勿删除 fesHeader.fes
|
||||
export default {
|
||||
FesReady() {
|
||||
// do something
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,9 +0,0 @@
|
||||
<template>
|
||||
<div />
|
||||
</template>
|
||||
<script>
|
||||
// 我是左侧菜单下方的自定义内容
|
||||
// 请勿删除fesLeft.fes
|
||||
export default {
|
||||
};
|
||||
</script>
|
||||
@ -1,27 +0,0 @@
|
||||
const CspHtmlWebpackPlugin = require('csp-html-webpack-plugin');
|
||||
|
||||
module.exports = function (mode, configs, webpack) {
|
||||
if (mode === 'build') {
|
||||
return {
|
||||
plugins: [new CspHtmlWebpackPlugin({
|
||||
'base-uri': "'self'",
|
||||
'object-src': "'none'",
|
||||
'script-src': [
|
||||
"'self'"
|
||||
],
|
||||
'style-src': [
|
||||
"'self'"
|
||||
],
|
||||
'connect-src': [
|
||||
"'self'",
|
||||
'http://adm.webank.io'
|
||||
],
|
||||
'img-src': [
|
||||
'data:',
|
||||
"'self'"
|
||||
]
|
||||
})]
|
||||
};
|
||||
}
|
||||
return {};
|
||||
};
|
||||
Loading…
x
Reference in New Issue
Block a user