Commit c674b34d by kenzo

feat: init

parents
> 1%
last 2 versions
not ie <= 10
[*]
charset=utf-8
end_of_line=lf
insert_final_newline=false
indent_style=space
indent_size=2
[{*.ng,*.sht,*.html,*.shtm,*.shtml,*.htm}]
indent_style=space
indent_size=2
[{*.jhm,*.xslt,*.xul,*.rng,*.xsl,*.xsd,*.ant,*.tld,*.fxml,*.jrxml,*.xml,*.jnlp,*.wsdl}]
indent_style=space
indent_size=2
[{.babelrc,.stylelintrc,jest.config,.eslintrc,.prettierrc,*.json,*.jsb3,*.jsb2,*.bowerrc}]
indent_style=space
indent_size=2
[*.svg]
indent_style=space
indent_size=2
[*.js.map]
indent_style=space
indent_size=2
[*.less]
indent_style=space
indent_size=2
[*.vue]
indent_style=space
indent_size=2
[{.analysis_options,*.yml,*.yaml}]
indent_style=space
indent_size=2
NODE_ENV=production
VUE_APP_PREVIEW=false
VUE_APP_API_BASE_URL=/api
\ No newline at end of file
NODE_ENV=development
VUE_APP_PREVIEW=true
VUE_APP_API_BASE_URL=/api
\ No newline at end of file
NODE_ENV=production
VUE_APP_PREVIEW=true
VUE_APP_API_BASE_URL=/api
\ No newline at end of file
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/strongly-recommended',
'@vue/standard'
],
rules: {
'no-console': 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'generator-star-spacing': 'off',
'no-mixed-operators': 0,
'vue/max-attributes-per-line': [
2,
{
'singleline': 5,
'multiline': {
'max': 1,
'allowFirstLine': false
}
}
],
'vue/attribute-hyphenation': 0,
'vue/html-self-closing': 0,
'vue/component-name-in-template-casing': 0,
'vue/html-closing-bracket-spacing': 0,
'vue/singleline-html-element-content-newline': 0,
'vue/no-unused-components': 0,
'vue/multiline-html-element-content-newline': 0,
'vue/no-use-v-if-with-v-for': 0,
'vue/html-closing-bracket-newline': 0,
'vue/no-parsing-error': 0,
'no-tabs': 0,
'quotes': [
2,
'single',
{
'avoidEscape': true,
'allowTemplateLiterals': true
}
],
'semi': [
2,
'never',
{
'beforeStatementContinuationChars': 'never'
}
],
'no-delete-var': 2,
'prefer-const': [
2,
{
'ignoreReadBeforeAssign': false
}
],
'template-curly-spacing': 'off',
'indent': 'off'
},
parserOptions: {
parser: 'babel-eslint'
},
overrides: [
{
files: [
'**/__tests__/*.{j,t}s?(x)',
'**/tests/unit/**/*.spec.{j,t}s?(x)'
],
env: {
jest: true
}
}
]
}
public/* linguist-vendored
\ No newline at end of file
.DS_Store
node_modules
<<<<<<< HEAD
/dist
=======
/directories
both added:
README.md
>>>>>>> 9ce4d27f685cea00afaead5f8af062d022381bb3
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*
{
"printWidth": 120,
"semi": false,
"singleQuote": true
}
language: node_js
node_js:
- 10.15.0
cache: yarn
script:
- yarn
- yarn run lint --no-fix && yarn run build
MIT License
Copyright (c) 2018 Anan Yang
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.
\ No newline at end of file
[English](./README.md) | 简体中文
<h1 align="center">Ant Design Vue Pro</h1>
<div align="center">
An out-of-box UI solution for enterprise applications as a Vue boilerplate. based on <a href="https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/" target="_blank">Ant Design of Vue</a>
</div>
<div align="center">
[![License](https://img.shields.io/npm/l/package.json.svg?style=flat)](https://github.com/vueComponent/ant-design-vue-pro/blob/master/LICENSE)
[![Release](https://img.shields.io/github/release/vueComponent/ant-design-vue-pro.svg?style=flat)](https://github.com/vueComponent/ant-design-vue-pro/releases/latest)
[![Travis branch](https://travis-ci.org/vueComponent/ant-design-vue-pro.svg?branch=master)](https://travis-ci.org/vueComponent/ant-design-vue-pro)
</div>
- 预览: https://preview.pro.antdv.com
- 首页: https://pro.antdv.com
- 文档: https://pro.antdv.com/docs/getting-started
- 更新日志: https://pro.antdv.com/docs/changelog
- 常见问题: https://pro.antdv.com/docs/faq
Overview
----
基于 [Ant Design of Vue](https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/) 实现的 [Ant Design Pro](https://pro.ant.design/)
![dashboard](https://static-2.loacg.com/open/static/github/SP1.png)
环境和依赖
----
- node
- yarn
- webpack
- eslint
- @vue/cli ~3
- [ant-design-vue](https://github.com/vueComponent/ant-design-vue) - Ant Design Of Vue 实现
- [vue-cropper](https://github.com/xyxiao001/vue-cropper) - 头像裁剪组件
- [@antv/g2](https://antv.alipay.com/zh-cn/index.html) - Alipay AntV 数据可视化图表
- [Viser-vue](https://viserjs.github.io/docs.html#/viser/guide/installation) - antv/g2 封装实现
> 请注意,我们强烈建议本项目使用 [Yarn](https://yarnpkg.com/) 包管理工具,这样可以与本项目演示站所加载完全相同的依赖版本 (yarn.lock) 。由于我们没有对依赖进行强制的版本控制,采用非 yarn 包管理进行引入时,可能由于 Pro 所依赖的库已经升级版本而引入了新版本所导致的问题。作者可能会由于时间问题无法及时排查而导致您采用本项目作为基项目而出现问题。
项目下载和运行
----
- 拉取项目代码
```bash
git clone https://github.com/vueComponent/ant-design-vue-pro.git
cd ant-design-vue-pro
```
- 安装依赖
```
yarn install
```
- 开发模式运行
```
yarn run serve
```
- 编译项目
```
yarn run build
```
- Lints and fixes files
```
yarn run lint
```
其他说明
----
- **关于 Issue 反馈 (重要!重要!重要!) 请在开 *Issue* 前,先阅读该内容:[Issue / PR 编写建议](https://github.com/vueComponent/ant-design-vue-pro/issues/90)**
- 项目使用的 [vue-cli3](https://cli.vuejs.org/guide/), 请确保你所使用的 vue-cli 是新版,并且已经学习 cli 官方文档使用教程
- 关闭 Eslint (不推荐) 移除 `package.json``eslintConfig` 整个节点代码, `vue.config.js` 下的 `lintOnSave` 值改为 `false`
- 组件按需加载 `/src/main.js` L14 相关代码 `import './core/lazy_use'` / `import './core/use'`
- [修改 Ant Design 配色 (@kokoroli)](https://github.com/kokoroli/antd-awesome/blob/master/docs/Ant_Design_%E6%A0%B7%E5%BC%8F%E8%A6%86%E7%9B%96.md)
- I18n: [多语言支持 (@musnow)](./src/locales/index.js)
- 生成环境默认不加载 `mock`,更多详情请看 `src/mock/index.js`
- **用于生产环境,请使用 `release` 版本代码,使用 master 代码出现的任何问题需要你自行解决**
## 浏览器兼容
Modern browsers and IE10.
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera |
| --- | --- | --- | --- | --- |
| IE10, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
## Contributors
This project exists thanks to all the people who contribute.
<a href="https://github.com/vueComponent/ant-design-vue-pro/graphs/contributors"><img src="https://opencollective.com/ant-design-pro-vue/contributors.svg?width=890&button=false" /></a>
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
const plugins = []
if (IS_PROD) {
plugins.push('transform-remove-console')
}
// lazy load ant-design-vue
// if your use import on Demand, Use this code
plugins.push(['import', {
'libraryName': 'ant-design-vue',
'libraryDirectory': 'es',
'style': true // `style: true` 会加载 less 文件
}])
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset',
[
'@babel/preset-env',
{
'useBuiltIns': 'entry',
'corejs': 3
}
]
],
plugins
}
const ThemeColorReplacer = require('webpack-theme-color-replacer')
const generate = require('@ant-design/colors/lib/generate').default
const getAntdSerials = (color) => {
// 淡化(即less的tint)
const lightens = new Array(9).fill().map((t, i) => {
return ThemeColorReplacer.varyColor.lighten(color, i / 10)
})
const colorPalettes = generate(color)
const rgb = ThemeColorReplacer.varyColor.toNum3(color.replace('#', '')).join(',')
return lightens.concat(colorPalettes).concat(rgb)
}
const themePluginOption = {
fileName: 'css/theme-colors-[contenthash:8].css',
matchColors: getAntdSerials('#1890ff'), // 主色系列
// 改变样式选择器,解决样式覆盖问题
changeSelector (selector) {
switch (selector) {
case '.ant-calendar-today .ant-calendar-date':
return ':not(.ant-calendar-selected-date):not(.ant-calendar-selected-day)' + selector
case '.ant-btn:focus,.ant-btn:hover':
return '.ant-btn:focus:not(.ant-btn-primary):not(.ant-btn-danger),.ant-btn:hover:not(.ant-btn-primary):not(.ant-btn-danger)'
case '.ant-btn.active,.ant-btn:active':
return '.ant-btn.active:not(.ant-btn-primary):not(.ant-btn-danger),.ant-btn:active:not(.ant-btn-primary):not(.ant-btn-danger)'
case '.ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon':
case '.ant-steps-item-process .ant-steps-item-icon>.ant-steps-icon':
return ':not(.ant-steps-item-process)' + selector
case '.ant-menu-horizontal>.ant-menu-item-active,.ant-menu-horizontal>.ant-menu-item-open,.ant-menu-horizontal>.ant-menu-item-selected,.ant-menu-horizontal>.ant-menu-item:hover,.ant-menu-horizontal>.ant-menu-submenu-active,.ant-menu-horizontal>.ant-menu-submenu-open,.ant-menu-horizontal>.ant-menu-submenu-selected,.ant-menu-horizontal>.ant-menu-submenu:hover':
case '.ant-menu-horizontal > .ant-menu-item-active,.ant-menu-horizontal > .ant-menu-item-open,.ant-menu-horizontal > .ant-menu-item-selected,.ant-menu-horizontal > .ant-menu-item:hover,.ant-menu-horizontal > .ant-menu-submenu-active,.ant-menu-horizontal > .ant-menu-submenu-open,.ant-menu-horizontal > .ant-menu-submenu-selected,.ant-menu-horizontal > .ant-menu-submenu:hover':
return '.ant-menu-horizontal > .ant-menu-item-active,.ant-menu-horizontal > .ant-menu-item-open,.ant-menu-horizontal > .ant-menu-item-selected,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item:hover,.ant-menu-horizontal > .ant-menu-submenu-active,.ant-menu-horizontal > .ant-menu-submenu-open,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-selected,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu:hover'
case '.ant-menu-horizontal > .ant-menu-item-selected > a':
case '.ant-menu-horizontal>.ant-menu-item-selected>a':
return '.ant-menu-horizontal:not(ant-menu-light):not(.ant-menu-dark) > .ant-menu-item-selected > a'
case '.ant-menu-horizontal > .ant-menu-item > a:hover':
case '.ant-menu-horizontal>.ant-menu-item>a:hover':
return '.ant-menu-horizontal:not(ant-menu-light):not(.ant-menu-dark) > .ant-menu-item > a:hover'
default :
return selector
}
}
}
const createThemeColorReplacerPlugin = () => new ThemeColorReplacer(themePluginOption)
module.exports = createThemeColorReplacerPlugin
export default {
theme: [
{
key: 'dark',
fileName: 'dark.css',
theme: 'dark'
},
{
key: '#F5222D',
fileName: '#F5222D.css',
modifyVars: {
'@primary-color': '#F5222D'
}
},
{
key: '#FA541C',
fileName: '#FA541C.css',
modifyVars: {
'@primary-color': '#FA541C'
}
},
{
key: '#FAAD14',
fileName: '#FAAD14.css',
modifyVars: {
'@primary-color': '#FAAD14'
}
},
{
key: '#13C2C2',
fileName: '#13C2C2.css',
modifyVars: {
'@primary-color': '#13C2C2'
}
},
{
key: '#52C41A',
fileName: '#52C41A.css',
modifyVars: {
'@primary-color': '#52C41A'
}
},
{
key: '#2F54EB',
fileName: '#2F54EB.css',
modifyVars: {
'@primary-color': '#2F54EB'
}
},
{
key: '#722ED1',
fileName: '#722ED1.css',
modifyVars: {
'@primary-color': '#722ED1'
}
},
{
key: '#F5222D',
theme: 'dark',
fileName: 'dark-#F5222D.css',
modifyVars: {
'@primary-color': '#F5222D'
}
},
{
key: '#FA541C',
theme: 'dark',
fileName: 'dark-#FA541C.css',
modifyVars: {
'@primary-color': '#FA541C'
}
},
{
key: '#FAAD14',
theme: 'dark',
fileName: 'dark-#FAAD14.css',
modifyVars: {
'@primary-color': '#FAAD14'
}
},
{
key: '#13C2C2',
theme: 'dark',
fileName: 'dark-#13C2C2.css',
modifyVars: {
'@primary-color': '#13C2C2'
}
},
{
key: '#52C41A',
theme: 'dark',
fileName: 'dark-#52C41A.css',
modifyVars: {
'@primary-color': '#52C41A'
}
},
{
key: '#2F54EB',
theme: 'dark',
fileName: 'dark-#2F54EB.css',
modifyVars: {
'@primary-color': '#2F54EB'
}
},
{
key: '#722ED1',
theme: 'dark',
fileName: 'dark-#722ED1.css',
modifyVars: {
'@primary-color': '#722ED1'
}
}
]
}
为首屏增加 加载动画
====
## 需求
> 为了缓解用户第一次访问时,加载 JS 过大所导致用户等待白屏时间过长导致的用户体验不好,进行的一个优化动效。
## 实现方案
1. 将 动画加载 dom 元素放在 #app 内,Vue 生命周期开始时,会自动清掉 #app 下的所有元素。
2. 将 动画加载 dom 元素放在 body 下,Vue 生命周期开始时 App.vue (created, mounted) 调用 `@/utils/utll` 下的 removeLoadingAnimate(#id, timeout) 则会移除加载动画
最后一步:
​ 将样式插入到 `public/index.html` 文件的 `<head></head>` 最好写成内联 `<style>动画样式</style>`
----
目前提供有两个样式,均在 `public/loading` 文件夹内。且 pro 已经默认使用了一套 loading 动画方案,可以直接参考 `public/index.html`
## 写在最后
目前 pro 有页面 overflow 显示出浏览器滚动条时,页面会抖动一下的问题。
欢迎各位提供能解决的方案和实现 demo。如果在条件允许的情况下,建议请直接使用 pro 进行改造,也欢迎直接 PR 到 pro 的仓库
按需加载 减小打包
====
## 按需引入组件依赖
`Ant Design Pro Vue` 默认编码工作并不支持按需引入,不过可以通过以下操作结合 [Ant Design Of Vue](https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/) 官方文档来进行按需引入。
- 增加项目按需引入依赖
- 修改引入组件方式
1. 增加按需引入所需依赖 `babel-plugin-import`
并且修改文件 `babel.config.js`
```ecmascript 6
module.exports = {
presets: [
'@vue/app'
],
plugins: [
[ "import", {
"libraryName": "ant-design-vue",
"libraryDirectory": "es",
"style": "css"
} ]
]
}
```
2. 修改引入组件方式 (注意,这只是一个例子,请完整引入你所需要的组件)
文件 `@/core/lazy_lib/component_use.js`
```javascript
import Vue from 'vue'
import {
Input,
Button,
Select,
Card,
Form,
Row,
Col,
Modal,
Table,
notification
} from 'ant-design-vue'
Vue.use(Input)
Vue.use(Button)
Vue.use(Select)
Vue.use(Card)
Vue.use(Form)
Vue.use(Row)
Vue.use(Col)
Vue.use(Modal)
Vue.use(Table)
Vue.use(notification)
Vue.prototype.$notification = notification;
```
3. 最后在 `main.js` 中引入 `@/core/lazy_use.js` 文件即可,如下
```javascript
import Vue from 'vue'
import App from './App'
// 引入 按需组件的统一引入文件
import './core/lazy_use'
import './style/index.less'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
```
## 其他 减少打包大小
1. Ant Design Vue 1.2.x 版本起,采用的 ant-design 官方方案 svg Icon 组件,整个项目打包会变大很多,图标进行按需加载可参考 https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo
2. moment 按需加载 可参考 https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
多(页签)标签 模式
====
## 让框架支持打开的页面增加多标签,可随时切换
### 关于如何移除该功能 组件
1. 移除 `/src/layouts/BasicLayout.vue` L44, L69, L80
```vue
// L44
<multi-tab v-if="multiTab"></multi-tab>
// L69
import MultiTab from '@/components/MultiTab'
// L80
MultiTab,
```
2. 移除 `/src/config/defaultSettings.js` L25
3. 移除 `src/store/modules/app.js` L27, L76-L79, L118-L120
4. 移除 `src/utils/mixin.js` L21
5. 删除组件目录 `src/components/MultiTab`
> 以上 `L x` 均代表行N ,如 L3 = 行3
先增加依赖
```bash
// npm
$ npm install --save-dev webpack-bundle-analyzer
// or yarn
$ yarn add webpack-bundle-analyzer -D
```
配置文件 `vue.config.js` 增加 `configureWebpack.plugins` 参数
```
const path = require('path')
const webpack = require('webpack')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
function resolve (dir) {
return path.join(__dirname, dir)
}
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
// Ignore all locale files of moment.js
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
// 依赖大小分析工具
new BundleAnalyzerPlugin(),
]
},
...
}
```
启动 `cli``build` 命令进行项目编译,编译完成时,会自动运行一个 http://localhost:8888 的地址,完整显示了支持库依赖
\ No newline at end of file
module.exports = {
moduleFileExtensions: [
'js',
'jsx',
'json',
'vue'
],
transform: {
'^.+\\.vue$': 'vue-jest',
'.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
'^.+\\.jsx?$': 'babel-jest'
},
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/src/$1'
},
snapshotSerializers: [
'jest-serializer-vue'
],
testMatch: [
'**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
],
testURL: 'http://localhost/'
}
{
"compilerOptions": {
"target": "es6",
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
},
"exclude": ["node_modules", "dist"],
"include": ["src/**/*"]
}
This source diff could not be displayed because it is too large. You can view the blob instead.
{
"name": "vue-antd-pro",
"version": "3.0.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint",
"build:preview": "vue-cli-service build --mode preview",
"lint:nofix": "vue-cli-service lint --no-fix"
},
"dependencies": {
"@ant-design-vue/pro-layout": "^0.3.2",
"@antv/data-set": "^0.10.2",
"animate.css": "^4.1.1",
"ant-design-vue": "^1.6.2",
"axios": "^0.19.0",
"core-js": "^3.1.2",
"echarts": "^4.9.0",
"enquire.js": "^2.1.6",
"fabric": "^4.3.1",
"lodash.clonedeep": "^4.5.0",
"lodash.debounce": "^4.0.8",
"lodash.get": "^4.4.2",
"lodash.pick": "^4.4.0",
"md5": "^2.2.1",
"mockjs2": "1.0.8",
"moment": "^2.29.1",
"nprogress": "^0.2.0",
"postcss-px2rem": "^0.3.0",
"postcss-px2rem-exclude": "^0.0.6",
"px2rem-loader": "^0.1.9",
"reqwest": "^2.0.5",
"screenfull": "^5.1.0",
"store": "^2.0.12",
"v-viewer": "^1.6.4",
"viser-vue": "^2.4.6",
"vue": "^2.6.10",
"vue-clipboard2": "^0.2.1",
"vue-cropper": "0.4.9",
"vue-i18n": "^8.17.4",
"vue-loader-plugin": "^1.3.0",
"vue-ls": "^3.2.2",
"vue-quill-editor": "^3.0.6",
"vue-router": "^3.1.2",
"vue-svg-component-runtime": "^1.0.1",
"vuex": "^3.1.1",
"wangeditor": "^3.1.1"
},
"devDependencies": {
"@ant-design/colors": "^3.2.1",
"@vue/cli-plugin-babel": "^4.0.4",
"@vue/cli-plugin-eslint": "^4.0.4",
"@vue/cli-plugin-router": "^4.0.4",
"@vue/cli-plugin-unit-jest": "^4.0.4",
"@vue/cli-plugin-vuex": "^4.0.4",
"@vue/cli-service": "^4.0.4",
"@vue/eslint-config-standard": "^4.0.0",
"@vue/test-utils": "^1.0.0-beta.29",
"babel-eslint": "^10.0.1",
"babel-plugin-import": "^1.12.2",
"babel-plugin-transform-remove-console": "^6.9.4",
"eslint": "^5.16.0",
"eslint-plugin-html": "^5.0.0",
"eslint-plugin-vue": "^5.2.3",
"git-revision-webpack-plugin": "^3.0.6",
"less": "^3.0.4",
"less-loader": "^5.0.0",
"opencollective": "^1.0.3",
"opencollective-postinstall": "^2.0.2",
"postcss-plugin-px2rem": "^0.8.1",
"swiper": "^3.4.2",
"vue-awesome-swiper": "^4.1.1",
"vue-svg-icon-loader": "^2.1.1",
"vue-template-compiler": "^2.6.10",
"webpack-theme-color-replacer": "^1.3.12"
}
}
module.exports = {
plugins: {
autoprefixer: {
overrideBrowserslist: [
'Android 4.1',
'iOS 7.1',
'Chrome > 31',
'ff > 31',
'ie >= 8'
// 'last 10 versions', // 所有主流浏览器最近10版本用
]
},
'postcss-px2rem-exclude': {
'postcss-import': {},
'autoprefixer': {},
// 'remUnit': 192,
// 'exclude': /node_modules|folder_name|src/i // 忽略node_modules目录下的文件
'exclude': /node_modules|folder_name|layouts/i // 忽略node_modules目录下的文件
// 'selectorBlackList': ['.ant-pro-side/r-menu-logo']
}
}
}
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
*.lcov
# nyc test coverage
.nyc_output
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# Snowpack dependency directory (https://snowpack.dev/)
web_modules/
# TypeScript cache
*.tsbuildinfo
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variables file
.env
.env.test
# parcel-bundler cache (https://parceljs.org/)
.cache
.parcel-cache
# Next.js build output
.next
out
# Nuxt.js build / generate output
.nuxt
dist
# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and not Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public
# vuepress build output
.vuepress/dist
# Serverless directories
.serverless/
# FuseBox cache
.fusebox/
# DynamoDB Local files
.dynamodb/
# TernJS port file
.tern-port
# Stores VSCode versions used for testing VSCode extensions
.vscode-test
# yarn v2
.yarn/cache
.yarn/unplugged
.yarn/build-state.yml
.yarn/install-state.gz
.pnp.*
### 进站车辆记录
&emsp;&emsp;加油站AI动态监测预警平台,可对加油站内进站车辆进行动态监测预警。在进站车辆记录展示区内,平台可对加油站内全部进站车辆车牌号、进站时间进行监测与展示。<br />
<center>
<img src="../jpg/Inbound-vehicle-record.png">
</center>
&emsp;&emsp;<font color="#FF0000">温馨提示:若加油站内没有进站车辆检测设备或暂无车辆进站,平台的【进站车辆记录】模块内将无监测数据内容,仅展示默认占位图文。</font>
\ No newline at end of file
### 声光告警设备监测
&emsp;&emsp;加油站AI动态监测预警平台,可对加油站内全部声光告警设备进行动态监测预警。当出现告警内容时,平台将第一时间进行反馈并调用平台已添加的声光告警设备发出告警警示音,同时将告警消息以短信的形式推送给平台已设置好的消息推送人手机端。<br />
&emsp;&emsp;在声光告警设备监测展示区内,平台可对加油站内全部声光告警设备的状态、接入正常声光告警设备数量、接入异常声光告警设备数量进行监测与展示。
<center>
<img src="../jpg/acoustooptic-alarm-detection.png">
</center>
&emsp;&emsp;<font color="#FF000">温馨提示:若加油站内没有声光告警设备物联网检测设备,平台的【声光告警设备监测】模块内将无监测数据内容,仅展示默认占位图文。</font>
\ No newline at end of file
### 可燃气体监测
&emsp;&emsp;加油站AI动态监测预警平台,可对加油站内可燃气体进行动态监测预警。当出现告警内容时,平台将第一时间进行反馈并调用平台已添加的声光告警设备发出告警警示音,同时将告警消息以短信的形式推送给平台已设置好的消息推送人手机端。<br />
&emsp;&emsp;在可燃气体监测展示区内,平台可对加油站内可燃气体浓度、正常运行可燃气体检测设备数量、断线可燃气体检测设备数量进行监测与展示,并支持对可燃气体检测设备的点击切换。<br />
<center>
<img src="../jpg/combustible-gas-monitoring.png">
</center>
&emsp;&emsp;<font color="#FF0000">温馨提示:若加油站内没有可燃气体物联网检测设备,平台的【可燃气体监测】模块将固定展示数量为0,检测值为0,指针指向0。</font>
### 静电接地监测
&emsp;&emsp;加油站AI动态监测预警平台,可对加油站内静电接地状态进行动态监测预警。当出现告警内容时,平台将第一时间进行反馈并调用平台已添加的声光告警设备发出告警警示音,同时将告警消息以短信的形式推送给平台已设置好的消息推送人手机端。<br />
&emsp;&emsp;在静电接地监测展示区内,平台可对加油站内静电接地状态进行监测与展示。<br />
<center>
<img src="../jpg/../jpg/electrostatic-grounding-monitoring.png">
</center><br />
&emsp;&emsp;<font color="#FF0000">温馨提示:若加油站内没有静电接地物联网检测设备,平台的【静电接地监测】模块内将无监测数据内容,仅展示默认占位图文。</font>
\ No newline at end of file
### 气象环境监测
&emsp;&emsp;加油站AI动态监测预警平台,可对加油站气象环境内容进行动态监测预警。当出现告警内容时,平台将第一时间进行反馈并调用平台已添加的声光告警设备发出告警警示音,同时将告警消息以短信的形式推送给平台已设置好的消息推送人手机端。<br />
&emsp;&emsp;在气象环境监测展示区内,平台可对加油站内温度、湿度、及所在地气象进行监测与展示。
![](../jpg/environmental-monitoring.png)<br />
&emsp;&emsp;<font color="#FF0000">温馨提示:若加油站内没有温度、湿度物联网检测设备,平台在【气象环境监测】模块显示加油站所在地的气象温度与湿度。</font>
\ No newline at end of file
### 平台动态监测预警
&emsp;&emsp;进入加油站AI动态监测预警平台后,可实现视频行为实时监控、气象环境实时监测、燃油液位实时监测、可燃气体实时监测、静电接地实时监测、油罐区非法入侵实时监测、声光告警设备实时监测、进站车辆记录实时监测、出站车辆记录实时监测。
![](../jpg/forecasting-warning.png)
### 燃油液位监测
&emsp;&emsp;加油站AI动态监测预警平台,可对加油站内全部油罐燃油液位进行动态监测预警。当出现告警内容时,平台将第一时间进行反馈并调用平台已添加的声光告警设备发出告警警示音,同时将告警消息以短信的形式推送给平台已设置好的消息推送人手机端。<br />
&emsp;&emsp;在燃油液位监测展示区内,平台可对加油站内全部油罐的油位、水位、油温进行监测与展示,并支持对油罐的点击切换。<br />
<center>
<img src="../jpg/fuel-level-monitoring.png">
</center>
&emsp;&emsp;<font color="#FF0000">温馨提示:若加油站内没有燃油液位物联网检测设备,平台的【燃油液位监测】模块内将无监测数据内容,仅展示默认占位图文。</font>
\ No newline at end of file
### 出站车辆记录
&emsp;&emsp;加油站AI动态监测预警平台,可对加油站内出站车辆进行动态监测预警。在出站车辆记录展示区内,平台可对加油站内全部出站车辆车牌号、出站时间进行监测与展示。<br />
<center>
<img src="../jpg/outbound-vehicle-record.png">
</center>
&emsp;&emsp;<font color="#FF0000">温馨提示:若加油站内没有出站车辆检测设备或暂无车辆出站,平台的【出站车辆记录】模块内将无监测数据内容,仅展示默认占位图文。</font>
### 油罐区非法入侵监测
&emsp;&emsp;加油站AI动态监测预警平台,可对加油站内全部油罐区非法入侵情况进行动态监测预警。当出现告警内容时,平台将第一时间进行反馈并调用平台已添加的声光告警设备发出告警警示音,同时将告警消息以短信的形式推送给平台已设置好的消息推送人手机端。<br />
&emsp;&emsp;在油罐区非法入侵监测展示区内,平台可对加油站内全部油罐区非法入侵情况进行监测与展示。
<center>
<img src="../jpg/tank-farm-monitoring.png"><br />
</center>
&emsp;&emsp;<font color="#FF0000">温馨提示:平台支持使用红外线入侵探测器、雷达周界报警器、摄像头对加油站油罐区进行非法入侵监测。若加油站没有油罐区非法入侵物联网检测设备,平台的【油罐区非法入侵监测】模块内将无监测数据内容,仅展示默认占位图文。</font>
\ No newline at end of file
### 视频行为检测
&emsp;&emsp;加油站AI动态监测预警平台,可对加油站内加油区、油罐区、通道区、进出站四个区域内的摄像头拍摄内容进行AI动态监测预警。当出现告警内容时,平台将第一时间进行反馈并调用平台已添加的声光告警设备发出告警警示音,同时将告警消息以短信的形式推送给平台已设置好的消息推送人手机端。<br />
&emsp;&emsp;在视频行为监测展示区内,平台可对当前各监测区域内添加摄像头总数量、正常运行摄像头数量、断线摄像头数量、历史告警次数进行统计与展示,并支持历史告警记录的查看。<br />
&emsp;&emsp;操作步骤:<br />
&emsp;&emsp;①在【数据大屏】-【视频监控】模块,点击“告警记录”按钮进入告警记录数据列表页面;<br />
&emsp;&emsp;②在告警记录数据列表页面,点击“数据可视化”按钮返回数据大屏。
![](../jpg/video-behavior-detection.png)
This source diff could not be displayed because it is too large. You can view the blob instead.
a.plugin-anchor {
color: inherit !important;
display: none;
margin-left: -30px;
padding-left: 40px;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
bottom: 0;
}
a.plugin-anchor i {
margin-left: -30px;
font-size: 15px !important;
}
h1, h2, h3, h4, h5, h6 {
position: relative;
}
h1:hover a.plugin-anchor, h2:hover a.plugin-anchor, h3:hover a.plugin-anchor,
h4:hover a.plugin-anchor, h5:hover a.plugin-anchor, h6:hover a.plugin-anchor {
display: inline-block;
}
.book .book-body .page-wrapper .page-inner section.normal {
overflow: visible;
}
.back-to-top {
position: fixed;
bottom: 25px;
right: 25px;
background: rgba(0, 0, 0, 0.5);
width: 50px;
height: 50px;
display: block;
text-decoration: none;
-webkit-border-radius: 35px;
-moz-border-radius: 35px;
border-radius: 35px;
display: none;
}
.back-to-top i {
color: #fff;
margin: 0;
position: relative;
left: 15px;
top: 14px;
font-size: 22px;
}
.back-to-top:hover {
background: rgba(0, 0, 0, 0.9);
cursor: pointer;
}
.book.color-theme-1 .back-to-top {
background: rgba(112, 66, 20, 0.5);
}
.book.color-theme-1 .back-to-top i {
color: #f3eacb;
}
.book.color-theme-1 .back-to-top:hover {
background: rgba(112, 66, 20, 0.9);
}
.book.color-theme-2 .back-to-top {
background: rgba(189, 202, 219, 0.5);
}
.book.color-theme-2 .back-to-top i {
color: #1C1F2B;
}
.book.color-theme-2 .back-to-top:hover {
background: rgba(189, 202, 219, 0.9);
}
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
.back-to-top {
bottom: 10px;
right: 10px;
}
}
\ No newline at end of file
var gitbook = window.gitbook;
gitbook.events.on('page.change', function() {
var back_to_top_button = ['<div class="back-to-top"><i class="fa fa-arrow-up"></i></div>'].join("");
$(".book").append(back_to_top_button)
$(".back-to-top").hide();
$('.book-body,.body-inner').on('scroll', function () {
if ($(this).scrollTop() > 100) {
$('.back-to-top').fadeIn();
} else {
$('.back-to-top').fadeOut();
}
});
$('.back-to-top').click(function () {
$('.book-body,.body-inner').animate({
scrollTop: 0
}, 800);
return false;
});
});
require(['gitbook', 'jquery'], function(gitbook, $) {
// Configuration
var MAX_SIZE = 4,
MIN_SIZE = 0,
BUTTON_ID;
// Current fontsettings state
var fontState;
// Default themes
var THEMES = [
{
config: 'white',
text: 'White',
id: 0
},
{
config: 'sepia',
text: 'Sepia',
id: 1
},
{
config: 'night',
text: 'Night',
id: 2
}
];
// Default font families
var FAMILIES = [
{
config: 'serif',
text: 'Serif',
id: 0
},
{
config: 'sans',
text: 'Sans',
id: 1
}
];
// Return configured themes
function getThemes() {
return THEMES;
}
// Modify configured themes
function setThemes(themes) {
THEMES = themes;
updateButtons();
}
// Return configured font families
function getFamilies() {
return FAMILIES;
}
// Modify configured font families
function setFamilies(families) {
FAMILIES = families;
updateButtons();
}
// Save current font settings
function saveFontSettings() {
gitbook.storage.set('fontState', fontState);
update();
}
// Increase font size
function enlargeFontSize(e) {
e.preventDefault();
if (fontState.size >= MAX_SIZE) return;
fontState.size++;
saveFontSettings();
}
// Decrease font size
function reduceFontSize(e) {
e.preventDefault();
if (fontState.size <= MIN_SIZE) return;
fontState.size--;
saveFontSettings();
}
// Change font family
function changeFontFamily(configName, e) {
if (e && e instanceof Event) {
e.preventDefault();
}
var familyId = getFontFamilyId(configName);
fontState.family = familyId;
saveFontSettings();
}
// Change type of color theme
function changeColorTheme(configName, e) {
if (e && e instanceof Event) {
e.preventDefault();
}
var $book = gitbook.state.$book;
// Remove currently applied color theme
if (fontState.theme !== 0)
$book.removeClass('color-theme-'+fontState.theme);
// Set new color theme
var themeId = getThemeId(configName);
fontState.theme = themeId;
if (fontState.theme !== 0)
$book.addClass('color-theme-'+fontState.theme);
saveFontSettings();
}
// Return the correct id for a font-family config key
// Default to first font-family
function getFontFamilyId(configName) {
// Search for plugin configured font family
var configFamily = $.grep(FAMILIES, function(family) {
return family.config == configName;
})[0];
// Fallback to default font family
return (!!configFamily)? configFamily.id : 0;
}
// Return the correct id for a theme config key
// Default to first theme
function getThemeId(configName) {
// Search for plugin configured theme
var configTheme = $.grep(THEMES, function(theme) {
return theme.config == configName;
})[0];
// Fallback to default theme
return (!!configTheme)? configTheme.id : 0;
}
function update() {
var $book = gitbook.state.$book;
$('.font-settings .font-family-list li').removeClass('active');
$('.font-settings .font-family-list li:nth-child('+(fontState.family+1)+')').addClass('active');
$book[0].className = $book[0].className.replace(/\bfont-\S+/g, '');
$book.addClass('font-size-'+fontState.size);
$book.addClass('font-family-'+fontState.family);
if(fontState.theme !== 0) {
$book[0].className = $book[0].className.replace(/\bcolor-theme-\S+/g, '');
$book.addClass('color-theme-'+fontState.theme);
}
}
function init(config) {
// Search for plugin configured font family
var configFamily = getFontFamilyId(config.family),
configTheme = getThemeId(config.theme);
// Instantiate font state object
fontState = gitbook.storage.get('fontState', {
size: config.size || 2,
family: configFamily,
theme: configTheme
});
update();
}
function updateButtons() {
// Remove existing fontsettings buttons
if (!!BUTTON_ID) {
gitbook.toolbar.removeButton(BUTTON_ID);
}
// Create buttons in toolbar
BUTTON_ID = gitbook.toolbar.createButton({
icon: 'fa fa-font',
label: 'Font Settings',
className: 'font-settings',
dropdown: [
[
{
text: 'A',
className: 'font-reduce',
onClick: reduceFontSize
},
{
text: 'A',
className: 'font-enlarge',
onClick: enlargeFontSize
}
],
$.map(FAMILIES, function(family) {
family.onClick = function(e) {
return changeFontFamily(family.config, e);
};
return family;
}),
$.map(THEMES, function(theme) {
theme.onClick = function(e) {
return changeColorTheme(theme.config, e);
};
return theme;
})
]
});
}
// Init configuration at start
gitbook.events.bind('start', function(e, config) {
var opts = config.fontsettings;
// Generate buttons at start
updateButtons();
// Init current settings
init(opts);
});
// Expose API
gitbook.fontsettings = {
enlargeFontSize: enlargeFontSize,
reduceFontSize: reduceFontSize,
setTheme: changeColorTheme,
setFamily: changeFontFamily,
getThemes: getThemes,
setThemes: setThemes,
getFamilies: getFamilies,
setFamilies: setFamilies
};
});
/*
* Theme 1
*/
.color-theme-1 .dropdown-menu {
background-color: #111111;
border-color: #7e888b;
}
.color-theme-1 .dropdown-menu .dropdown-caret .caret-inner {
border-bottom: 9px solid #111111;
}
.color-theme-1 .dropdown-menu .buttons {
border-color: #7e888b;
}
.color-theme-1 .dropdown-menu .button {
color: #afa790;
}
.color-theme-1 .dropdown-menu .button:hover {
color: #73553c;
}
/*
* Theme 2
*/
.color-theme-2 .dropdown-menu {
background-color: #2d3143;
border-color: #272a3a;
}
.color-theme-2 .dropdown-menu .dropdown-caret .caret-inner {
border-bottom: 9px solid #2d3143;
}
.color-theme-2 .dropdown-menu .buttons {
border-color: #272a3a;
}
.color-theme-2 .dropdown-menu .button {
color: #62677f;
}
.color-theme-2 .dropdown-menu .button:hover {
color: #f4f4f5;
}
.book .book-header .font-settings .font-enlarge {
line-height: 30px;
font-size: 1.4em;
}
.book .book-header .font-settings .font-reduce {
line-height: 30px;
font-size: 1em;
}
.book.color-theme-1 .book-body {
color: #704214;
background: #f3eacb;
}
.book.color-theme-1 .book-body .page-wrapper .page-inner section {
background: #f3eacb;
}
.book.color-theme-2 .book-body {
color: #bdcadb;
background: #1c1f2b;
}
.book.color-theme-2 .book-body .page-wrapper .page-inner section {
background: #1c1f2b;
}
.book.font-size-0 .book-body .page-inner section {
font-size: 1.2rem;
}
.book.font-size-1 .book-body .page-inner section {
font-size: 1.4rem;
}
.book.font-size-2 .book-body .page-inner section {
font-size: 1.6rem;
}
.book.font-size-3 .book-body .page-inner section {
font-size: 2.2rem;
}
.book.font-size-4 .book-body .page-inner section {
font-size: 4rem;
}
.book.font-family-0 {
font-family: Georgia, serif;
}
.book.font-family-1 {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.book.color-theme-1 .book-body .page-wrapper .page-inner section.normal {
color: #704214;
}
.book.color-theme-1 .book-body .page-wrapper .page-inner section.normal a {
color: inherit;
}
.book.color-theme-1 .book-body .page-wrapper .page-inner section.normal h1,
.book.color-theme-1 .book-body .page-wrapper .page-inner section.normal h2,
.book.color-theme-1 .book-body .page-wrapper .page-inner section.normal h3,
.book.color-theme-1 .book-body .page-wrapper .page-inner section.normal h4,
.book.color-theme-1 .book-body .page-wrapper .page-inner section.normal h5,
.book.color-theme-1 .book-body .page-wrapper .page-inner section.normal h6 {
color: inherit;
}
.book.color-theme-1 .book-body .page-wrapper .page-inner section.normal h1,
.book.color-theme-1 .book-body .page-wrapper .page-inner section.normal h2 {
border-color: inherit;
}
.book.color-theme-1 .book-body .page-wrapper .page-inner section.normal h6 {
color: inherit;
}
.book.color-theme-1 .book-body .page-wrapper .page-inner section.normal hr {
background-color: inherit;
}
.book.color-theme-1 .book-body .page-wrapper .page-inner section.normal blockquote {
border-color: inherit;
}
.book.color-theme-1 .book-body .page-wrapper .page-inner section.normal pre,
.book.color-theme-1 .book-body .page-wrapper .page-inner section.normal code {
background: #fdf6e3;
color: #657b83;
border-color: #f8df9c;
}
.book.color-theme-1 .book-body .page-wrapper .page-inner section.normal .highlight {
background-color: inherit;
}
.book.color-theme-1 .book-body .page-wrapper .page-inner section.normal table th,
.book.color-theme-1 .book-body .page-wrapper .page-inner section.normal table td {
border-color: #f5d06c;
}
.book.color-theme-1 .book-body .page-wrapper .page-inner section.normal table tr {
color: inherit;
background-color: #fdf6e3;
border-color: #444444;
}
.book.color-theme-1 .book-body .page-wrapper .page-inner section.normal table tr:nth-child(2n) {
background-color: #fbeecb;
}
.book.color-theme-2 .book-body .page-wrapper .page-inner section.normal {
color: #bdcadb;
}
.book.color-theme-2 .book-body .page-wrapper .page-inner section.normal a {
color: #3eb1d0;
}
.book.color-theme-2 .book-body .page-wrapper .page-inner section.normal h1,
.book.color-theme-2 .book-body .page-wrapper .page-inner section.normal h2,
.book.color-theme-2 .book-body .page-wrapper .page-inner section.normal h3,
.book.color-theme-2 .book-body .page-wrapper .page-inner section.normal h4,
.book.color-theme-2 .book-body .page-wrapper .page-inner section.normal h5,
.book.color-theme-2 .book-body .page-wrapper .page-inner section.normal h6 {
color: #fffffa;
}
.book.color-theme-2 .book-body .page-wrapper .page-inner section.normal h1,
.book.color-theme-2 .book-body .page-wrapper .page-inner section.normal h2 {
border-color: #373b4e;
}
.book.color-theme-2 .book-body .page-wrapper .page-inner section.normal h6 {
color: #373b4e;
}
.book.color-theme-2 .book-body .page-wrapper .page-inner section.normal hr {
background-color: #373b4e;
}
.book.color-theme-2 .book-body .page-wrapper .page-inner section.normal blockquote {
border-color: #373b4e;
}
.book.color-theme-2 .book-body .page-wrapper .page-inner section.normal pre,
.book.color-theme-2 .book-body .page-wrapper .page-inner section.normal code {
color: #9dbed8;
background: #2d3143;
border-color: #2d3143;
}
.book.color-theme-2 .book-body .page-wrapper .page-inner section.normal .highlight {
background-color: #282a39;
}
.book.color-theme-2 .book-body .page-wrapper .page-inner section.normal table th,
.book.color-theme-2 .book-body .page-wrapper .page-inner section.normal table td {
border-color: #3b3f54;
}
.book.color-theme-2 .book-body .page-wrapper .page-inner section.normal table tr {
color: #b6c2d2;
background-color: #2d3143;
border-color: #3b3f54;
}
.book.color-theme-2 .book-body .page-wrapper .page-inner section.normal table tr:nth-child(2n) {
background-color: #35394b;
}
.book.color-theme-1 .book-header {
color: #afa790;
background: transparent;
}
.book.color-theme-1 .book-header .btn {
color: #afa790;
}
.book.color-theme-1 .book-header .btn:hover {
color: #73553c;
background: none;
}
.book.color-theme-1 .book-header h1 {
color: #704214;
}
.book.color-theme-2 .book-header {
color: #7e888b;
background: transparent;
}
.book.color-theme-2 .book-header .btn {
color: #3b3f54;
}
.book.color-theme-2 .book-header .btn:hover {
color: #fffff5;
background: none;
}
.book.color-theme-2 .book-header h1 {
color: #bdcadb;
}
.book.color-theme-1 .book-body .navigation {
color: #afa790;
}
.book.color-theme-1 .book-body .navigation:hover {
color: #73553c;
}
.book.color-theme-2 .book-body .navigation {
color: #383f52;
}
.book.color-theme-2 .book-body .navigation:hover {
color: #fffff5;
}
/*
* Theme 1
*/
.book.color-theme-1 .book-summary {
color: #afa790;
background: #111111;
border-right: 1px solid rgba(0, 0, 0, 0.07);
}
.book.color-theme-1 .book-summary .book-search {
background: transparent;
}
.book.color-theme-1 .book-summary .book-search input,
.book.color-theme-1 .book-summary .book-search input:focus {
border: 1px solid transparent;
}
.book.color-theme-1 .book-summary ul.summary li.divider {
background: #7e888b;
box-shadow: none;
}
.book.color-theme-1 .book-summary ul.summary li i.fa-check {
color: #33cc33;
}
.book.color-theme-1 .book-summary ul.summary li.done > a {
color: #877f6a;
}
.book.color-theme-1 .book-summary ul.summary li a,
.book.color-theme-1 .book-summary ul.summary li span {
color: #877f6a;
background: transparent;
font-weight: normal;
}
.book.color-theme-1 .book-summary ul.summary li.active > a,
.book.color-theme-1 .book-summary ul.summary li a:hover {
color: #704214;
background: transparent;
font-weight: normal;
}
/*
* Theme 2
*/
.book.color-theme-2 .book-summary {
color: #bcc1d2;
background: #2d3143;
border-right: none;
}
.book.color-theme-2 .book-summary .book-search {
background: transparent;
}
.book.color-theme-2 .book-summary .book-search input,
.book.color-theme-2 .book-summary .book-search input:focus {
border: 1px solid transparent;
}
.book.color-theme-2 .book-summary ul.summary li.divider {
background: #272a3a;
box-shadow: none;
}
.book.color-theme-2 .book-summary ul.summary li i.fa-check {
color: #33cc33;
}
.book.color-theme-2 .book-summary ul.summary li.done > a {
color: #62687f;
}
.book.color-theme-2 .book-summary ul.summary li a,
.book.color-theme-2 .book-summary ul.summary li span {
color: #c1c6d7;
background: transparent;
font-weight: 600;
}
.book.color-theme-2 .book-summary ul.summary li.active > a,
.book.color-theme-2 .book-summary ul.summary li a:hover {
color: #f4f4f5;
background: #252737;
font-weight: 600;
}
require(['gitbook', 'jquery'], function(gitbook, $) {
var opts;
gitbook.events.bind('start', function(e, config) {
opts = config['hide-element'].elements;
});
gitbook.events.bind('page.change', function() {
$.map(opts, function(ele) {
$(ele).hide();
});
});
});
pre,
code {
/* http://jmblog.github.io/color-themes-for-highlightjs */
/* Tomorrow Comment */
/* Tomorrow Red */
/* Tomorrow Orange */
/* Tomorrow Yellow */
/* Tomorrow Green */
/* Tomorrow Aqua */
/* Tomorrow Blue */
/* Tomorrow Purple */
}
pre .hljs-comment,
code .hljs-comment,
pre .hljs-title,
code .hljs-title {
color: #8e908c;
}
pre .hljs-variable,
code .hljs-variable,
pre .hljs-attribute,
code .hljs-attribute,
pre .hljs-tag,
code .hljs-tag,
pre .hljs-regexp,
code .hljs-regexp,
pre .hljs-deletion,
code .hljs-deletion,
pre .ruby .hljs-constant,
code .ruby .hljs-constant,
pre .xml .hljs-tag .hljs-title,
code .xml .hljs-tag .hljs-title,
pre .xml .hljs-pi,
code .xml .hljs-pi,
pre .xml .hljs-doctype,
code .xml .hljs-doctype,
pre .html .hljs-doctype,
code .html .hljs-doctype,
pre .css .hljs-id,
code .css .hljs-id,
pre .css .hljs-class,
code .css .hljs-class,
pre .css .hljs-pseudo,
code .css .hljs-pseudo {
color: #c82829;
}
pre .hljs-number,
code .hljs-number,
pre .hljs-preprocessor,
code .hljs-preprocessor,
pre .hljs-pragma,
code .hljs-pragma,
pre .hljs-built_in,
code .hljs-built_in,
pre .hljs-literal,
code .hljs-literal,
pre .hljs-params,
code .hljs-params,
pre .hljs-constant,
code .hljs-constant {
color: #f5871f;
}
pre .ruby .hljs-class .hljs-title,
code .ruby .hljs-class .hljs-title,
pre .css .hljs-rules .hljs-attribute,
code .css .hljs-rules .hljs-attribute {
color: #eab700;
}
pre .hljs-string,
code .hljs-string,
pre .hljs-value,
code .hljs-value,
pre .hljs-inheritance,
code .hljs-inheritance,
pre .hljs-header,
code .hljs-header,
pre .hljs-addition,
code .hljs-addition,
pre .ruby .hljs-symbol,
code .ruby .hljs-symbol,
pre .xml .hljs-cdata,
code .xml .hljs-cdata {
color: #718c00;
}
pre .css .hljs-hexcolor,
code .css .hljs-hexcolor {
color: #3e999f;
}
pre .hljs-function,
code .hljs-function,
pre .python .hljs-decorator,
code .python .hljs-decorator,
pre .python .hljs-title,
code .python .hljs-title,
pre .ruby .hljs-function .hljs-title,
code .ruby .hljs-function .hljs-title,
pre .ruby .hljs-title .hljs-keyword,
code .ruby .hljs-title .hljs-keyword,
pre .perl .hljs-sub,
code .perl .hljs-sub,
pre .javascript .hljs-title,
code .javascript .hljs-title,
pre .coffeescript .hljs-title,
code .coffeescript .hljs-title {
color: #4271ae;
}
pre .hljs-keyword,
code .hljs-keyword,
pre .javascript .hljs-function,
code .javascript .hljs-function {
color: #8959a8;
}
pre .hljs,
code .hljs {
display: block;
background: white;
color: #4d4d4c;
padding: 0.5em;
}
pre .coffeescript .javascript,
code .coffeescript .javascript,
pre .javascript .xml,
code .javascript .xml,
pre .tex .hljs-formula,
code .tex .hljs-formula,
pre .xml .javascript,
code .xml .javascript,
pre .xml .vbscript,
code .xml .vbscript,
pre .xml .css,
code .xml .css,
pre .xml .hljs-cdata,
code .xml .hljs-cdata {
opacity: 0.5;
}
/*
This CSS only styled the search results section, not the search input
It defines the basic interraction to hide content when displaying results, etc
*/
#book-search-input {
background: inherit;
}
#book-search-results .search-results {
display: none;
}
#book-search-results .search-results ul.search-results-list {
list-style-type: none;
padding-left: 0;
}
#book-search-results .search-results ul.search-results-list li {
margin-bottom: 1.5rem;
padding-bottom: 0.5rem;
/* Highlight results */
}
#book-search-results .search-results ul.search-results-list li p em {
background-color: rgba(255, 220, 0, 0.4);
font-style: normal;
}
#book-search-results .search-results .no-results {
display: none;
}
#book-search-results.open .search-results {
display: block;
}
#book-search-results.open .search-noresults {
display: none;
}
#book-search-results.no-results .search-results .has-results {
display: none;
}
#book-search-results.no-results .search-results .no-results {
display: block;
}
#book-search-results span.search-highlight-keyword {
background: #ff0;
}
require([
'gitbook',
'jquery'
], function(gitbook, $) {
var MAX_DESCRIPTION_SIZE = 500;
var state = gitbook.state;
var INDEX_DATA = {};
var usePushState = (typeof history.pushState !== 'undefined');
// DOM Elements
var $body = $('body');
var $bookSearchResults;
var $searchList;
var $searchTitle;
var $searchResultsCount;
var $searchQuery;
// Throttle search
function throttle(fn, wait) {
var timeout;
return function() {
var ctx = this,
args = arguments;
if (!timeout) {
timeout = setTimeout(function() {
timeout = null;
fn.apply(ctx, args);
}, wait);
}
};
}
function displayResults(res) {
$bookSearchResults = $('#book-search-results');
$searchList = $bookSearchResults.find('.search-results-list');
$searchTitle = $bookSearchResults.find('.search-results-title');
$searchResultsCount = $searchTitle.find('.search-results-count');
$searchQuery = $searchTitle.find('.search-query');
$bookSearchResults.addClass('open');
var noResults = res.count == 0;
$bookSearchResults.toggleClass('no-results', noResults);
// Clear old results
$searchList.empty();
// Display title for research
$searchResultsCount.text(res.count);
$searchQuery.text(res.query);
// Create an <li> element for each result
res.results.forEach(function(item) {
var $li = $('<li>', {
'class': 'search-results-item'
});
var $title = $('<h3>');
var $link = $('<a>', {
'href': gitbook.state.basePath + '/' + item.url + '?h=' + encodeURIComponent(res.query),
'text': item.title,
'data-is-search': 1
});
if ($link[0].href.split('?')[0] === location.href.split('?')[0]) {
$link[0].setAttribute('data-need-reload', 1);
}
var content = item.body.trim();
if (content.length > MAX_DESCRIPTION_SIZE) {
content = content + '...';
}
var $content = $('<p>').html(content);
$link.appendTo($title);
$title.appendTo($li);
$content.appendTo($li);
$li.appendTo($searchList);
});
$('.body-inner').scrollTop(0);
}
function escapeReg(keyword) {
//escape regexp prevserve word
return String(keyword).replace(/([\*\.\?\+\$\^\[\]\(\)\{\}\|\/\\])/g, '\\$1');
}
function query(keyword) {
if (keyword == null || keyword.trim() === '') return;
var results = [],
index = -1;
for (var page in INDEX_DATA) {
if ((index = INDEX_DATA[page].body.toLowerCase().indexOf(keyword.toLowerCase())) !== -1) {
results.push({
url: page,
title: INDEX_DATA[page].title,
body: INDEX_DATA[page].body.substr(Math.max(0, index - 50), MAX_DESCRIPTION_SIZE).replace(new RegExp('(' + escapeReg(keyword) + ')', 'gi'), '<span class="search-highlight-keyword">$1</span>')
});
}
}
displayResults({
count: results.length,
query: keyword,
results: results
});
}
function launchSearch(keyword) {
// Add class for loading
$body.addClass('with-search');
$body.addClass('search-loading');
function doSearch() {
query(keyword);
$body.removeClass('search-loading');
}
throttle(doSearch)();
}
function closeSearch() {
$body.removeClass('with-search');
$('#book-search-results').removeClass('open');
}
function bindSearch() {
// Bind DOM
var $body = $('body');
// Launch query based on input content
function handleUpdate() {
var $searchInput = $('#book-search-input input');
var keyword = $searchInput.val();
if (keyword.length == 0) {
closeSearch();
} else {
launchSearch(keyword);
}
}
$body.on('keyup', '#book-search-input input', function(e) {
if (e.keyCode === 13) {
if (usePushState) {
var uri = updateQueryString('q', $(this).val());
history.pushState({
path: uri
}, null, uri);
}
}
handleUpdate();
});
// Push to history on blur
$body.on('blur', '#book-search-input input', function(e) {
// Update history state
if (usePushState) {
var uri = updateQueryString('q', $(this).val());
history.pushState({
path: uri
}, null, uri);
}
});
}
gitbook.events.on('start', function() {
bindSearch();
$.getJSON(state.basePath + "/search_plus_index.json").then(function(data) {
INDEX_DATA = data;
showResult();
closeSearch();
});
});
// 高亮文本
var highLightPageInner = function(keyword) {
$('.page-inner').mark(keyword, {
'ignoreJoiners': true,
'acrossElements': true,
'separateWordSearch': false
});
setTimeout(function() {
var mark = $('mark[data-markjs="true"]');
if (mark.length) {
mark[0].scrollIntoView();
}
}, 100);
};
function showResult() {
var keyword, type;
if (/\b(q|h)=([^&]+)/.test(location.search)) {
type = RegExp.$1;
keyword = decodeURIComponent(RegExp.$2);
if (type === 'q') {
launchSearch(keyword);
} else {
highLightPageInner(keyword);
}
$('#book-search-input input').val(keyword);
}
}
gitbook.events.on('page.change', showResult);
function getParameterByName(name) {
var url = window.location.href;
name = name.replace(/[\[\]]/g, '\\$&');
var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)', 'i'),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
function updateQueryString(key, value) {
value = encodeURIComponent(value);
var url = window.location.href.replace(/([?&])(?:q|h)=([^&]+)(&|$)/, function(all, pre, value, end) {
if (end === '&') {
return pre;
}
return '';
});
var re = new RegExp('([?&])' + key + '=.*?(&|#|$)(.*)', 'gi'),
hash;
if (re.test(url)) {
if (typeof value !== 'undefined' && value !== null)
return url.replace(re, '$1' + key + '=' + value + '$2$3');
else {
hash = url.split('#');
url = hash[0].replace(re, '$1$3').replace(/(&|\?)$/, '');
if (typeof hash[1] !== 'undefined' && hash[1] !== null)
url += '#' + hash[1];
return url;
}
} else {
if (typeof value !== 'undefined' && value !== null) {
var separator = url.indexOf('?') !== -1 ? '&' : '?';
hash = url.split('#');
url = hash[0] + separator + key + '=' + value;
if (typeof hash[1] !== 'undefined' && hash[1] !== null)
url += '#' + hash[1];
return url;
} else
return url;
}
}
window.addEventListener('click', function(e) {
if (e.target.tagName === 'A' && e.target.getAttribute('data-need-reload')) {
setTimeout(function() {
location.reload();
}, 100);
}
}, true);
});
\ No newline at end of file
require(['gitbook', 'jquery'], function(gitbook, $) {
function site(label, icon, link) {
return {
label: label,
icon: 'fa fa-' + icon,
onClick: function (e) {
e.preventDefault();
window.open(link);
}
};
}
var url = encodeURIComponent(location.href);
var title = encodeURIComponent(document.title);
var SITES = {
douban: site('豆瓣', 'share', 'http://shuo.douban.com/!service/share?href=' + url + '&name=' + title),
facebook: site('Facebook', 'facebook', 'http://www.facebook.com/sharer/sharer.php?s=100&p[url]=' + url),
google: site('Google+', 'google-plus', 'https://plus.google.com/share?url=' + url),
hatenaBookmark: site('はてなブックマーク', 'bold', 'http://b.hatena.ne.jp/entry/' + url),
instapaper: site('instapaper', 'instapaper', 'http://www.instapaper.com/text?u=' + url),
line: site('LINE', 'comment', 'http://line.me/R/msg/text/?' + title + ' ' + url),
linkedin: site('Linkedin', 'linkedin', 'https://www.linkedin.com/shareArticle?mini=true&url=' + url),
messenger: site('Facebook Messenger', 'commenting', 'fb-messenger://share?link=' + url),
pocket: site('Pocket', 'get-pocket', 'https://getpocket.com/save?url=' + url + '&title=' + title),
qq: site('QQ', 'qq', 'http://connect.qq.com/widget/shareqq/index.html?url=' + url + '&title=' + title),
qzone: site('QQ空间', 'star', 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=' + url + '&title=' + title),
stumbleupon: site('StumbleUpon', 'stumbleupon', 'http://www.stumbleupon.com/submit?url=' + url + '&title=' + title),
twitter: site('Twitter', 'twitter', 'https://twitter.com/intent/tweet?url=' + title + '&text=' + title),
viber: site('Viber', 'volume-control-phone', 'viber://forward?text='+ url + ' ' + title),
vk: site('VK', 'vk', 'http://vkontakte.ru/share.php?url=' + url),
weibo: site('新浪微博', 'weibo', 'http://service.weibo.com/share/share.php?content=utf-8&url=' + url + '&title=' + title),
whatsapp: site('WhatsApp', 'whatsapp', 'whatsapp://send?text='+ url + ' ' + title),
};
gitbook.events.bind('start', function(e, config) {
var opts = config.sharing;
// Create dropdown menu
var menu = $.map(opts.all, function(id) {
var site = SITES[id];
return {
text: site.label,
onClick: site.onClick
};
});
// Create main button with dropdown
if (menu.length > 0) {
gitbook.toolbar.createButton({
icon: 'fa fa-share-alt',
label: 'Share',
position: 'right',
dropdown: [menu]
});
}
// Direct actions to share
$.each(SITES, function(sideId, site) {
if (!opts[sideId]) return;
gitbook.toolbar.createButton({
icon: site.icon,
label: site.text,
position: 'right',
onClick: site.onClick
});
});
});
});
.divider-content-summary {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 5px;
display: table;
cursor: col-resize;
color: #ccc;
-webkit-transition: color 350ms ease;
-moz-transition: color 350ms ease;
-o-transition: color 350ms ease;
transition: color 350ms ease
}
.divider-content-summary:hover {
color: #444;
}
.divider-content-summary__icon {
display: table-cell;
vertical-align: middle;
text-align: center;
}
require(['gitbook', 'jQuery'], function (gitbook, $) {
// MEMO:
// Gitbook is calculated as "calc (100% - 60px)" in the horizontal width when the width of the screen size is 600px
// or less.
// In this case, since contradiction occurs in the implementation of this module, return.
if($(window).width() <= 600) {
return;
}
gitbook.events.bind('start', function () {
});
gitbook.events.bind('page.change', function () {
var KEY_SPLIT_STATE = 'plugin_gitbook_split';
var dividerWidth = null;
var isDraggable = false;
var dividerCenterOffsetLeft = null;
var splitState = null;
var grabPointWidth = null;
var $body = $('body');
var $book = $('.book');
var $summary = $('.book-summary');
var $bookBody = $('.book-body');
var $divider = $('<div class="divider-content-summary">' +
'<div class="divider-content-summary__icon">' +
'<i class="fa fa-ellipsis-v"></i>' +
'</div>' +
'</div>');
$summary.append($divider);
dividerWidth = $divider.outerWidth();
dividerCenterOffsetLeft = $divider.outerWidth() / 2;
// restore split state from sessionStorage
splitState = getSplitState();
setSplitState(
splitState.summaryWidth,
splitState.summaryOffset,
splitState.bookBodyOffset
);
setTimeout(function() {
var isGreaterThanEqualGitbookV2_5 = !Boolean($('.toggle-summary').length);
var $toggleSummary = isGreaterThanEqualGitbookV2_5
? $('.fa.fa-align-justify').parent() : $('.toggle-summary');
$toggleSummary.on('click', function () {
var summaryOffset = null;
var bookBodyOffset = null;
var isOpen = isGreaterThanEqualGitbookV2_5
? !gitbook.sidebar.isOpen() : $book.hasClass('with-summary');
if (isOpen) {
summaryOffset = -($summary.outerWidth());
bookBodyOffset = 0;
} else {
summaryOffset = 0;
bookBodyOffset = $summary.outerWidth();
}
setSplitState($summary.outerWidth(), summaryOffset, bookBodyOffset);
saveSplitState($summary.outerWidth(), summaryOffset, bookBodyOffset);
});
}, 1);
$divider.on('mousedown', function (event) {
event.stopPropagation();
isDraggable = true;
grabPointWidth = $summary.outerWidth() - event.pageX;
});
$body.on('mouseup', function (event) {
event.stopPropagation();
isDraggable = false;
saveSplitState(
$summary.outerWidth(),
$summary.position().left,
$bookBody.position().left
);
});
$body.on('mousemove', function (event) {
if (!isDraggable) {
return;
}
event.stopPropagation();
event.preventDefault();
$summary.outerWidth(event.pageX + grabPointWidth);
$bookBody.offset({ left: event.pageX + grabPointWidth });
});
function getSplitState() {
var splitState = JSON.parse(sessionStorage.getItem(KEY_SPLIT_STATE));
splitState || (splitState = {});
splitState.summaryWidth || (splitState.summaryWidth = $summary.outerWidth());
splitState.summaryOffset || (splitState.summaryOffset = $summary.position().left);
splitState.bookBodyOffset || (splitState.bookBodyOffset = $bookBody.position().left);
return splitState;
}
function saveSplitState(summaryWidth, summaryWidthOffset, bookBodyOffset) {
sessionStorage.setItem(KEY_SPLIT_STATE, JSON.stringify({
summaryWidth: summaryWidth,
summaryOffset: summaryWidthOffset,
bookBodyOffset: bookBodyOffset,
}));
}
function setSplitState(summaryWidth, summaryOffset, bookBodyOffset) {
$summary.outerWidth(summaryWidth);
$summary.offset({ left: summaryOffset });
$bookBody.offset({ left: bookBodyOffset });
// improved broken layout in windows chrome.
// "$(x).offset" automatically add to "position:relative".
// but it cause layout broken..
$summary.css({ position: 'absolute' });
$bookBody.css({ position: 'absolute' });
}
});
});
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment