init

Adangs · Feb 25, 2020 · aa694ff · aa694ff
1 parent 7ef4005
commit aa694ff
Show file tree

Hide file tree

Showing 37 changed files with 1,074 additions and 1 deletion.
diff --git a/.browserslistrc b/.browserslistrc
@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not ie <= 8
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,5 @@
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,17 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  'extends': [
+    'plugin:vue/essential',
+    '@vue/standard'
+  ],
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+  },
+  parserOptions: {
+    parser: 'babel-eslint'
+  }
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,24 @@
+.DS_Store
+node_modules
+/dist
+
+# 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*
+
+# FED
+package-lock.json
diff --git a/README.md b/README.md
@@ -1 +1,6 @@
-# fed-design
+# fed-design
+
+在线图片制作工具
+
+参考[稿定设计](https://www.gaoding.com/) | [图怪兽](https://818ps.com/)等在线图片制作平台.
+
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/app'
+  ]
+}
diff --git a/package.json b/package.json
@@ -0,0 +1,53 @@
+{
+  "name": "fed-design",
+  "version": "1.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "vue-cli-service serve",
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "axios": "^0.19.2",
+    "element-ui": "^2.13.0",
+    "path": "^0.12.7",
+    "vue": "^2.6.11",
+    "vue-router": "^3.1.5",
+    "vuex": "^3.1.2"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^3.3.0",
+    "@vue/cli-plugin-eslint": "^3.3.0",
+    "@vue/cli-service": "^3.5.3",
+    "@vue/eslint-config-standard": "^4.0.0",
+    "babel-eslint": "^10.0.1",
+    "eslint": "^5.8.0",
+    "eslint-plugin-vue": "^5.0.0",
+    "file-saver": "^2.0.2",
+    "html2canvas": "^1.0.0-rc.5",
+    "js-cookie": "^2.2.0",
+    "jszip": "^3.2.2",
+    "less": "^3.11.1",
+    "less-loader": "^5.0.0",
+    "lint-staged": "^8.1.0",
+    "node-sass": "^4.9.0",
+    "nprogress": "^0.2.0",
+    "sass-loader": "^7.0.1",
+    "uuid": "^7.0.0",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "gitHooks": {
+    "pre-commit": "lint-staged"
+  },
+  "lint-staged": {
+    "*.js": [
+      "vue-cli-service lint",
+      "git add"
+    ],
+    "*.vue": [
+      "vue-cli-service lint",
+      "git add"
+    ]
+  }
+}
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {}
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <!--<link rel="icon" href="<%= BASE_URL %>favicon.ico">-->
+    <title>fed-vue-init</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but fed-vue-init doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/src/App.vue b/src/App.vue
@@ -0,0 +1,10 @@
+<template>
+  <div id="app">
+    <router-view />
+  </div>
+</template>
+<script>
+export default {
+  name: 'APP'
+}
+</script>
diff --git a/src/api/index.js b/src/api/index.js
@@ -0,0 +1,8 @@
+// api接口map
+export default {
+  'login': '/api/v1/login', // login api demo
+  'getUserInfo': '/api/v1/getUserInfo', // getUserInfo api demo
+  'success': '/api/v1/success', // success api demo
+  'error': '/api/v1/error', // error api demo
+  'page': '/api/v1/page' // page api demo
+}
diff --git a/src/assets/iconfont/README.md b/src/assets/iconfont/README.md
@@ -0,0 +1,2 @@
+### 引入iconfont
+#### https://www.iconfont.cn/
diff --git a/src/assets/images/logo.png b/src/assets/images/logo.png
diff --git a/src/assets/style/index.less b/src/assets/style/index.less
@@ -0,0 +1,20 @@
+@import "./mixin.less";
+@import "./reset.less";
+html, body, #app{ height: 100%;}
+
+.g-layout-all{
+  .flexVertical(); height: 100%;
+  .g-layout-header{ background: #ddd; height: 80px; line-height: 80px; text-align: center; }
+
+  .g-layout-content{
+    flex: 1; display: flex;
+    .g-layout-aside{ width: 100px; background-color: #eee;}
+    .g-layout-main{ flex: 1;}
+  }
+}
+
+.m-content-all{
+  padding: 10px; height: 100%;
+  dl{ padding-bottom: 20px;}
+  dt{ font-size: 14px; font-weight: bold;}
+}
diff --git a/src/assets/style/mixin.less b/src/assets/style/mixin.less
@@ -0,0 +1,7 @@
+.flexCenter() {
+  display: flex; box-align: center; align-items: center;
+}
+
+.flexVertical(){
+  display: flex; box-orient: vertical; flex-direction: column;
+}
diff --git a/src/assets/style/reset.less b/src/assets/style/reset.less
@@ -0,0 +1,32 @@
+@charset "utf-8";
+*{ -webkit-box-sizing:border-box; box-sizing:border-box;}
+body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,p,th,td,pre,code,form,fieldset,legend,input,textarea,blockquote,figure,button{ margin:0;padding:0;}
+article,aside,details,figcaption,figure,footer,header,main,nav,section,summary { display:block; }
+html{-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;}
+body{ font: 14px/1.44 Tahoma, Verdana, Arial, Roboto, 'Heiti SC', 'Hiragino Sans GB', '\5FAE\8F6F\96C5\9ED1', '\5b8b\4f53', sans-serif; color: #000; background: #fff;}
+button,input,select,textarea{ font:inherit; color:#333; line-height: 1.44; border: 0;outline: 0;}
+input[type="text"],input[type="password"],input[type="tel"],input[type="email"]{padding-left: 5px;}
+audio,canvas,progress,video{ display:inline-block; vertical-align:baseline; }
+h1,h2,h3,h4,h5,h6{ font-weight:normal;}
+ol,ul,li{ list-style:none;}
+table{ border-collapse:collapse; border-spacing:0;}
+sup,sub{ font-size:100%; vertical-align:baseline;}
+a,a:active{ outline:none;}
+i,em{ font-style:normal; }
+a,del,ins,s,u{ text-decoration:none;}
+fieldset,img,acronym{ border:0;}
+img,acronym,input,textarea,iframe,button{ vertical-align:middle;}
+input,button,textarea,select,optgroup,option{ resize:none; outline:none;}
+html,body,a,button,input,li,div,span,section{ -webkit-tap-highlight-color:transparent;}
+img{ max-width:100%;}
+a,img{ -webkit-touch-callout: none;}
+a,button{ cursor:pointer;}
+input,textarea,select{-webkit-appearance: none;}
+input:-webkit-autofill{-webkit-box-shadow: 0 0 0 200px white inset;}
+
+::-webkit-scrollbar{ width:8px; height:8px;}
+::-webkit-scrollbar-track-piece{background-color:rgba(0,0,0,.05);}
+::-webkit-scrollbar-thumb,
+::-webkit-scrollbar-thumb:vertical{height: 5px;background-color:rgba(0,0,0,.15); -webkit-border-radius: 10px;}
+::-webkit-scrollbar-thumb:hover,
+::-webkit-scrollbar-thumb:vertical:hover{ background-color:rgba(0,0,0,.2);}
diff --git a/src/components/index.js b/src/components/index.js
@@ -0,0 +1,5 @@
+// 自定义全局组件
+import XEmpty from './x-empty' // 空页面
+export {
+  XEmpty
+}
diff --git a/src/components/x-empty/index.vue b/src/components/x-empty/index.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="m-components-all null">
+    暂无相关数据...
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'XNull'
+}
+</script>
+
+<style>
+
+</style>
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,48 @@
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router/index'
+import store from './store/index'
+import ElementUI from 'element-ui'
+
+import 'element-ui/lib/theme-chalk/index.css'
+import './assets/style/index.less' // global css
+
+// global request
+import http from './utils/x-request'
+
+import * as filters from './utils/x-filters' // global request
+// ui
+Vue.use(ElementUI)
+// request
+Vue.use(http)
+// register global utility filters.
+Object.keys(filters).forEach(key => {
+  Vue.filter(key, filters[key])
+})
+
+// 全局滚动事件
+Vue.directive('xscroll', {
+  bind (el, binding) {
+    const container = el.attributes['x-scroll-container']
+    const selectWrap = container ? el.querySelector(container.nodeValue) : el
+    selectWrap.addEventListener('scroll', function () {
+      const sign = el.attributes['xscroll-threshold'] ? el.attributes['xscroll-threshold'].nodeValue : 10
+      const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
+      if (scrollDistance <= sign) {
+        // console.log('滚动到底了')
+        binding.value({ type: 'bottom', scrollTop: this.scrollTop, scrollHeight: this.scrollHeight, clientHeight: this.clientHeight })
+      } else if (this.scrollTop <= 0) {
+        // console.log('滚动到顶了')
+        binding.value({ type: 'top', scrollTop: this.scrollTop, scrollHeight: this.scrollHeight, clientHeight: this.clientHeight })
+      }
+    })
+  }
+})
+
+Vue.config.productionTip = false
+
+new Vue({
+  router,
+  store,
+  render: h => h(App)
+}).$mount('#app')
diff --git a/src/router/async.js b/src/router/async.js
@@ -0,0 +1,8 @@
+export default [
+  {
+    path: '/design',
+    component: () => import('~/views/design/index')
+  },
+
+  { path: '*', redirect: '/404', hidden: true }
+]
diff --git a/src/router/index.js b/src/router/index.js
@@ -0,0 +1,71 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import NProgress from 'nprogress' // progress bar
+import 'nprogress/nprogress.css'// progress bar style
+import { getCookie } from '~/utils/index'
+import staticRouter from './static' // 静态路由列表
+import store from '../store'
+
+NProgress.configure({ showSpinner: false }) // NProgress Configuration
+Vue.use(Router)
+
+// 路由白名单
+const whiteList = ['/', '/login']
+
+const router = new Router({
+  mode: 'history',
+  routes: staticRouter
+})
+
+// 路由开始钩子
+router.beforeEach(async (to, from, next) => {
+  if (getCookie('token')) {
+    if (to.path === '/login') {
+      next({ path: '/design' })
+    } else {
+      if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息
+        await store.dispatch('user/getUserInfo').then(async (res) => { // 拉取user_info
+          const roles = res.roles // note: roles must be a array! such as: ['editor','develop']
+          await store.dispatch('app/generateRoutes', roles).then((asyncRoutes) => { // 根据roles权限生成可访问的路由表
+            router.addRoutes(asyncRoutes) // 动态添加可访问路由表
+            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
+          })
+        }).catch((err) => {
+          switch (err.code) {
+            // 用户不存在时API报的code
+            case 500:
+            case 401:
+              store.dispatch('user/fedLogOut').then(() => {
+                next({ path: '/login' })
+              })
+              break
+            default:
+              // 接口报错时是否要退出
+              console.log(err)
+              next()
+          }
+        })
+      } else {
+        next()
+      }
+    }
+  } else {
+    if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入
+      next()
+    } else {
+      next(`/login?redirect=${encodeURIComponent(to.fullPath)}`) // 否则全部重定向到登录页
+    }
+  }
+})
+
+// 路由结束钩子
+router.afterEach((to, from, next) => {
+  // 路由发生变化修改页面title
+  if (to.meta.title) {
+    document.title = to.meta.title
+  }
+  // finish progress bar
+  NProgress.done()
+})
+
+export default router
diff --git a/src/router/static.js b/src/router/static.js
@@ -0,0 +1,13 @@
+// import Layout from '~/views/layout/index'
+
+export default [
+  {
+    path: '/',
+    redirect: 'login',
+    name: 'home'
+  }, {
+    path: '/login',
+    component: () => import(/* webpackChunkName: "common" */ '~/views/home/index'),
+    name: 'login'
+  }
+]