Merge branch 'dev'

.stylelintrc

@@ -1,6 +1,11 @@
 {
   "extends": "stylelint-config-standard",
   "rules": {
-    "no-empty-source": null
+    "no-empty-source": null,
+    "declaration-colon-newline-after": null,
+    "value-list-comma-newline-after": null,
+    "no-descending-specificity": null,
+    "no-duplicate-selectors": null,
+    "declaration-block-no-shorthand-property-overrides": null
   }
 }

.travis.yml

@@ -20,8 +20,7 @@ addons:
 cache: 
   - yarn
   - directories:
-    - release/nuxt-element-dashboard/node_modules
-    - release/nuxt-multiple-spa/node_modules
+    - release/nuxt-admin/node_modules
     - release/nuxt-vant/node_modules
 deploy:
   #- provider: pages

bin/deploy/env.json

@@ -1,6 +1,6 @@
 {
-  "nuxt-element-dashboard": {
-    "NO_LOGIN": 1
-  },
-  "nuxt-multiple-spa": {}
+  "nuxt-admin": {
+    "API_SERVER": "https://mockapi.eolinker.com/IeZWjzy87c204a1f7030b2a17b00f3776ce0a07a5030a1b",
+    "APP_ID": "1204701543597604893"
+  }
 }

docs/api.md

@@ -0,0 +1,90 @@
+# 在 nuxt 中优雅的管理 API
+
+## 背景
+
+在使用 nuxt 开发复杂系统时，往往伴随着海量的 API 接口。如果单纯的使用  [@nuxtjs/axios](#)，那么 API 将与业务代码耦合在一次。最糟糕的状况是每个开发者都在页面中写下面的代码
+
+```javascript
+// Page 1 获取一个用户的信息
+this.$axios.$get('/deepexi-cloud/users/1')
+
+// Page 2 创建一个用户
+this.$axios.$post('/deepexi-cloud/users', body)
+```
+
+对于 RESTful API 同一个资源，需要创建多个字符串来维护，即便可以通过抽离常量来维护，但对于调用者，还必须 import apiUrl，使用对应的 methods 来调用接口。
+
+随着业务规模的扩张，需要一个能统一维护 API 的方案，来降低开发者的使用和维护成本。需要满足这几点：
+
+- 可以直接调用方法，而不是写 this.$axios.$get('string')
+- 可以获取一个基本的 RESTful 资源链接，方便 data-table 等组件使用
+- 修改接口服务、版本、资源名称时，修改一处即可
+
+## 使用
+
+```javascript
+// 创建一个 API 资源，修改文件 src/api/index.js
+
+// 创建了一个菜单资源的 CRUD 接口方法
++ export const menus = new Repository(`${DEEPEXI_CLOUD_TENANT}/${VERSION}/menus`)
+
+// 获取一个菜单，只要能访问到 nuxt 上下文的地方都可以调用，最常见是 this
+
+// 在 page 中
+mounted() {
+  // 获取资源的服务器路径
+  this.$http.menus.uri()
+  // 获取所有菜单资源，返回一个列表
+  this.$http.menus.list()
+  // 获取某个菜单资源的详情
+  this.$http.menus.detail(MENUS_ID)
+  // 创建一个菜单资源
+  this.$http.menus.create(payload)
+  // 更新一个菜单资源
+  this.$http.menus.update(MENUS_ID, payload)
+  // 删除一个菜单资源
+  this.$http.menus.delete(MENUS_ID)
+}
+
+// 在 store 中
+export const actions = {
+  async getMenus(store, payload) {
+    const data = await this.$http.menus.detail(payload)
+    ...
+  }
+}
+```
+
+## 进阶
+
+有些时候，后端的接口并不是严格遵循 RESTful 的最佳实践，这个时候就需要自己重新实现默认的方法
+
+```javascript
+// 在 src/api/repository.js 中增加一个类，继承 Repository
+export class ExampleRepository extends Repository {
+  constructor(resource, id) {
+    super(resource)
+    this.id = id
+  }
+
+  uri(appId) {
+    return `${this.resource}/status/${this.id}?appId=${appId}`
+  }
+
+  update($axios) {
+    return (appId, payload, ...args) =>
+      $axios.$post(`${this.uri(appId)}`, payload, ...args)
+  }
+}
+
+// 基于 ExampleRepository 创建一个 API
+export const example = new ExampleRepository('/example/api')
+
+// 调用
+this.$http.example.uri(appId)
+this.$http.example.detail(id)
+this.$http.example.list()
+this.$http.example.create(payload)
+this.$http.example.update(appId, payload)
+this.$http.example.delete(id)
+```

docs/scroll.md

@@ -0,0 +1,32 @@
+# 实现统一的滚动条
+
+本模板使用 element 中的 `el-scrollbar` 组件实现滚动条统一。由于这个组件 element 没有作为一个基础组件开放给大家使用。所以一些使用的细节只有 element 的维护者才知道。
+
+| 属性名    | 类型    | 默认值 | 说明                                                    |
+| --------- | ------- | ------ | ------------------------------------------------------- |
+| native    | Boolean | false  | 是否使用原生的滚动条                                    |
+| wrapStyle | -       | -      | 滚动容器的样式类                                        |
+| wrapClass | -       | -      | 滚动容器的样式                                          |
+| viewClass | -       | -      | 滚动视图的样式类                                        |
+| viewStyle | -       | -      | 滚动视图的样式                                          |
+| noresize  | Boolean | false  | 如果 container 尺寸不会发生变化，最好设置它可以优化性能 |
+| tag       | String  | div    | 使用什么标签来渲染滚动视图                              |
+
+使用时，需要给 `el-scrollbar` 的根元素一个确定的宽高，如果不希望横向滚动条一直出现，需要将 `.el-scrollbar__wrap` 设置为 `overflow-x: auto;`
+
+```html
+<el-scrollbar class="srollbar">
+  ...content
+</el-scrollbar>
+
+<style>
+  .scrollbar {
+    height: 100%;
+  }
+
+  .scrollbar .el-scrollbar__wrap {
+    height: 100%;
+    overflow-x: auto;
+  }
+</style>
+```

lhci.sh

@@ -1,4 +1,4 @@
 #!/bin/sh
 yarn global add @lhci/cli
 
-lhci autorun --upload.target=temporary-public-storage --collect.staticDistDir=./dist --collect.url=http://localhost/nuxt-element-dashboard --collect.url=http://localhost/nuxt-multiple-spa --collect.url=http://localhost/nuxt-vant
+lhci autorun --upload.target=temporary-public-storage --collect.staticDistDir=./dist --collect.url=http://localhost/nuxt-admin --collect.url=http://localhost/nuxt-vant

template.config.js

@@ -28,6 +28,7 @@ const common = {
   'icon-font': 'icon-font',
   test: 'jest',
   utils: 'utils',
+  service: 'service',
 }
 
 const desktop = {
@@ -38,18 +39,11 @@ const desktop = {
   componentsDesktop: 'components-desktop',
 }
 
-// nuxt-element-dashboard 框架配置
-const single = {
+// nuxt-admin 框架配置
+const admin = {
   ...desktop,
-  folder: 'nuxt-element-dashboard',
-  template: 'single',
-}
-
-// nuxt-multiple-spa 框架配置
-const multiple = {
-  ...desktop,
-  folder: 'nuxt-multiple-spa',
-  template: 'multiple',
+  folder: 'nuxt-admin',
+  template: 'admin',
 }
 
 // nuxt-mobile 框架配置
@@ -59,4 +53,4 @@ const mobile = {
   template: 'mobile',
 }
 
-module.exports = [single, multiple, mobile]
+module.exports = [mobile, admin]

template/framework-multiple/_package.json → template/framework-admin/_package.json

@@ -1,13 +1,17 @@
 {
-  "name": "nuxt-multiple-spa",
+  "name": "nuxt-admin",
   "description": "Nuxt2 + element UI project",
   "keywords": [
+    "admin",
     "dashboard",
     "element-ui"
   ],
   "dependencies": {
     "@femessage/el-data-table": "latest",
     "@femessage/el-form-renderer": "latest",
     "@femessage/element-ui": "latest"
+  },
+  "devDependencies": {
+    "svg-sprite-loader": "^4.1.6"
   }
 }

template/framework-admin/assets/export.less

@@ -0,0 +1,19 @@
+:export {
+  INFO_COLOR: @--color-info;
+  DANGER_COLOR: @--color-danger;
+  PRIMARY_COLOR: @--color-primary;
+  SUCCESS_COLOR: @--color-success;
+  WARNING_COLOR: @--color-warning;
+  TEXTPRIMARY_COLOR: @--color-text-primary;
+  TEXTREGULAR_COLOR: @--color-text-regular;
+  MENU_BG_COLOR: @menu-bg-color;
+  MENU_TEXT_COLOR: @menu-text-color;
+  MENU_ACTIVE_TEXT_COLOR: @menu-active-text-color;
+  SUBMENU_BG_COLOR: @submenu-bg-color;
+  SUBMENU_HOVER_COLOR: @submenu-hover-color;
+  SUBMENU_ACTIVE_TEXT_COLOR: @submenu-active-text-color;
+  HEADER_HEIGHT: @--header-height;
+  FOOTER_HEIGHT: @--footer-height;
+  BREADCRUMB_HEIGHT: @--breadcrumb-height;
+  SIDEBAR_MIN_WIDTH: @sidebar-min-width;
+}

template/framework-admin/components/breadcrumb/bread-data.js

@@ -0,0 +1,34 @@
+const HOME = { name: '首页' }
+const ACCOUNT = { name: '账户管理', disabled: true }
+const FIELD = { name: '字段管理' }
+const GROUP = { name: '群组管理' }
+const ORGANNIZATION = { name: '组织管理' }
+const POSITION = { name: '职位管理' }
+const STAFF = { name: '员工管理' }
+
+export default [
+  {
+    name: 'index',
+    breadcrumb: [HOME]
+  },
+  {
+    name: "account-field",
+    breadcrumb: [ACCOUNT, FIELD]
+  },
+  {
+    name: "account-group",
+    breadcrumb: [ACCOUNT, GROUP]
+  },
+  {
+    name: "account-organization",
+    breadcrumb: [ACCOUNT, ORGANNIZATION]
+  },
+  {
+    name: "account-position",
+    breadcrumb: [ACCOUNT, POSITION]
+  },
+  {
+    name: "account-staff",
+    breadcrumb: [ACCOUNT, STAFF]
+  },
+]