Преглед изворни кода

wanda-adm:feat >添加环境变量,基础配置

shaun-sheep пре 4 година
родитељ
комит
a274a1a713

+ 1 - 0
.prod

@@ -1 +1,2 @@
+NODE_ENV = development
 VUE_APP_BASE_API = 'https://vue-typescript-admin-mock-server.armour.now.sh/mock-api/v1/'

+ 1 - 0
.env

@@ -1 +1,2 @@
+NODE_ENV = production
 VUE_APP_BASE_API = 'https://vue-typescript-admin-mock-server.armour.now.sh/mock-api/v1/'

+ 4 - 0
.env.staging

@@ -0,0 +1,4 @@
+
+# Base api
+VUE_APP_BASE_API = '/stage-api'
+

+ 0 - 1
.stage

@@ -1 +0,0 @@
-VUE_APP_BASE_API = 'https://vue-typescript-admin-mock-server.armour.now.sh/mock-api/v1/'

+ 3 - 4
README.md

@@ -25,12 +25,11 @@
 │   ├── main.js                # 入口文件 加载组件 初始化等
 │   ├── permission.ts          # 权限管理
 │   └── shims.d.ts             # 模块注入
-├── .circleci/                 # 自动化 CI 配置
 ├── .browserslistrc            # browserslistrc 配置文件 (用于支持 Autoprefixer)
 ├── .editorconfig              # 编辑相关配置
-├── .env                       # 开发环境变量配置
-├── .stage                     # 测试环境变量配置
-├── .prod                      # 线上环境变量配置
+├── ..env.development          # 开发环境变量配置
+├── .env.staging               # 测试环境变量配置
+├── .env.production            # 线上环境变量配置
 ├── .eslintrc.js               # eslint 配置
 ├── babel.config.js            # babel-loader 配置
 ├── package.json               # package.json 依赖

+ 3 - 3
package.json

@@ -5,7 +5,9 @@
   "author": "hao jie <haojie@persagy.com>",
   "scripts": {
     "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
+    "build:dev": "vue-cli-service build --mode development",
+    "build:prod": "vue-cli-service build --mode production",
+    "build:stage": "vue-cli-service build --mode staging",
     "lint": "vue-cli-service lint",
     "svg": "vsvg -s ./src/icons/svg -t ./src/icons/components --ext ts --es6",
     "test:unit": "jest --clearCache && vue-cli-service test:unit"
@@ -60,11 +62,9 @@
     "eslint-plugin-standard": "^4.0.2",
     "eslint-plugin-vue": "^7.1.0",
     "fibers": "^5.0.0",
-    "jest": "^26.6.1",
     "sass": "^1.28.0",
     "sass-loader": "^10.0.4",
     "style-resources-loader": "^1.3.3",
-    "ts-jest": "^26.4.3",
     "typescript": "^4.0.5",
     "vue-cli-plugin-element": "^1.0.1",
     "vue-cli-plugin-style-resources-loader": "^0.1.4",

+ 11 - 5
public/index.html

@@ -8,10 +8,16 @@
   <title><%= htmlWebpackPlugin.options.title %></title>
 </head>
 <body>
-  <noscript>
-    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-  </noscript>
-  <div id="app"></div>
-  <!-- built files will be auto injected -->
+<noscript>
+  <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> 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>
+<style>
+  html {
+    height: 100%;
+  }
+</style>
 </html>

+ 3 - 1
src/components/Breadcrumb/index.vue

@@ -83,12 +83,14 @@ export default class extends Vue {
 .el-breadcrumb__inner,
 .el-breadcrumb__inner a {
   font-weight: 400 !important;
+
 }
 
 .app-breadcrumb.el-breadcrumb {
   display: inline-block;
   font-size: 14px;
-  line-height: 50px;
+  height: 30px;
+  line-height: 40px;
   margin-left: 8px;
 
   .no-redirect {

+ 13 - 28
src/layout/components/Navbar/index.vue

@@ -1,41 +1,28 @@
 <template>
   <div class="navbar">
-    <span class="title">万达数字化运维平台</span>
+    <span class="title" v-show="sidebar.opened">万达数字化运维平台</span>
     <hamburger
       id="hamburger-container"
       :is-active="sidebar.opened"
       class="hamburger-container"
       @toggle-click="toggleSideBar"
     />
-    <breadcrumb
-      id="breadcrumb-container"
-      class="breadcrumb-container"
-    />
+
     <div class="right-menu">
       <el-dropdown
         class="avatar-container right-menu-item hover-effect"
-        trigger="click"
       >
         <div class="avatar-wrapper">
-          <img
-            src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2853553659,1775735885&fm=26&gp=0.jpg"
-            class="user-avatar"
-          >
-          <i class="el-icon-caret-bottom"/>
+        <span> yanruolan </span>
+          <i class="el-icon-user-solid"/>
         </div>
         <el-dropdown-menu slot="dropdown">
           <router-link to="/">
             <el-dropdown-item>
-              Home
+              退出
             </el-dropdown-item>
           </router-link>
 
-          <el-dropdown-item divided>
-            <span
-              style="display:block;"
-              @click="logout"
-            >LogOut</span>
-          </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
     </div>
@@ -70,13 +57,12 @@ export default class extends Vue {
   }
 
   private toggleSideBar() {
-
     AppModule.ToggleSideBar(false)
   }
 
   private async logout() {
     await UserModule.LogOut()
-    this.$router.push(`/login?redirect=${this.$route.fullPath}`)
+    // this.$router.push(`/login?redirect=${this.$route.fullPath}`)
   }
 }
 </script>
@@ -86,7 +72,7 @@ export default class extends Vue {
   height: 50px;
   overflow: hidden;
   position: relative;
-  background-color: rgb(48, 65, 86);
+  background-color: #2b3643;
   box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
 
   .title {
@@ -95,14 +81,16 @@ export default class extends Vue {
     margin: 0 auto;
     line-height: 46px;
     height: 100%;
-    color:#fff;
+    color: #fff;
   }
 
   .hamburger-container {
+    color: #fff;
     line-height: 46px;
     height: 100%;
     float: left;
-    padding: 0 15px;
+    width: 60px;
+    //padding: 0 15px;
     cursor: pointer;
     transition: background .3s;
     -webkit-tap-highlight-color: transparent;
@@ -112,9 +100,6 @@ export default class extends Vue {
     }
   }
 
-  .breadcrumb-container {
-    float: left;
-  }
 
   .right-menu {
     float: right;
@@ -147,9 +132,9 @@ export default class extends Vue {
       margin-right: 30px;
 
       .avatar-wrapper {
-        margin-top: 5px;
         position: relative;
-
+        color: #409eff;
+        font-size: 18px;
         .user-avatar {
           cursor: pointer;
           width: 40px;

+ 4 - 0
src/layout/components/Sidebar/SidebarItem.vue

@@ -19,6 +19,7 @@
           <span
             v-if="theOnlyOneChild.meta.title"
             slot="title"
+            class="title-name"
           >{{ theOnlyOneChild.meta.title }}</span>
         </el-menu-item>
       </sidebar-item-link>
@@ -164,6 +165,9 @@ export default class extends Vue {
 </style>
 
 <style lang="scss" scoped>
+.title-name{
+  color: #ffffff;
+}
 .svg-icon {
   margin-right: 16px;
 }

+ 1 - 1
src/layout/components/Sidebar/index.vue

@@ -74,6 +74,7 @@ export default class extends Vue {
 
   .el-scrollbar__view {
     height:calc(100% - 50px);
+    background: #2b3643;
   }
 
   .el-scrollbar__bar {
@@ -90,7 +91,6 @@ export default class extends Vue {
 
 <style lang="scss" scoped>
 .el-scrollbar {
-
   height: 100%;
 }
 

+ 4 - 3
src/layout/components/index.ts

@@ -1,3 +1,4 @@
-export { default as AppMain } from './AppMain.vue'
-export { default as Navbar } from './Navbar/index.vue'
-export { default as Sidebar } from './Sidebar/index.vue'
+export {default as AppMain} from './AppMain.vue'
+export {default as Navbar} from './Navbar/index.vue'
+export {default as Sidebar} from './Sidebar/index.vue'
+export {default as Breadcrumb} from '@/components/Breadcrumb/index.vue'

+ 14 - 8
src/layout/index.vue

@@ -8,19 +8,24 @@
       class="drawer-bg"
       @click="handleClickOutside"
     />
-    <sidebar class="sidebar-container" />
-      <navbar />
+    <sidebar class="sidebar-container"/>
+    <navbar/>
     <div class="main-container">
-      <app-main />
+      <breadcrumb
+        id="breadcrumb-container"
+        class="breadcrumb-container"
+      />
+      <hr>
+      <app-main/>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { Component } from 'vue-property-decorator'
-import { mixins } from 'vue-class-component'
-import { DeviceType, AppModule } from '@/store/modules/app'
-import { AppMain, Navbar, Sidebar } from './components'
+import {Component} from 'vue-property-decorator'
+import {mixins} from 'vue-class-component'
+import {DeviceType, AppModule} from '@/store/modules/app'
+import {AppMain, Navbar, Sidebar, Breadcrumb} from './components'
 import ResizeMixin from './mixin/resize'
 
 @Component({
@@ -28,7 +33,8 @@ import ResizeMixin from './mixin/resize'
   components: {
     AppMain,
     Navbar,
-    Sidebar
+    Sidebar,
+    Breadcrumb
   }
 })
 export default class extends mixins(ResizeMixin) {

+ 5 - 5
src/utils/request.ts

@@ -3,7 +3,7 @@ import { Message, MessageBox } from 'element-ui'
 import { UserModule } from '@/store/modules/user'
 
 const service = axios.create({
-  baseURL: process.env.VUE_APP_BASE_API,
+  baseURL: process.env.VUE_APP_BASE_API,// url = base url + request url
   timeout: 5000
 })
 
@@ -41,11 +41,11 @@ service.interceptors.response.use(
       })
       if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
         MessageBox.confirm(
-          'You have been logged out, try to login again.',
-          'Log out',
+          '你已被登出,可以取消继续留在该页面,或者重新登录',
+          '确定登出',
           {
-            confirmButtonText: 'Relogin',
-            cancelButtonText: 'Cancel',
+            confirmButtonText: '重新登录',
+            cancelButtonText: '取消',
             type: 'warning'
           }
         ).then(() => {

+ 24 - 3
vue.config.js

@@ -1,10 +1,31 @@
 const path = require('path')
-const name = 'Vue Typescript Admin'
-
+const name = 'wanda-adm'
+const devServerPort = 28888
+const stageServerPort = 28889
 module.exports = {
   // TODO: Remember to change publicPath to fit your need
-  publicPath: process.env.NODE_ENV === 'production' ? '/vue-typescript-admin-template/' : '/',
+  publicPath: process.env.NODE_ENV === 'production' ? '/wanda-adm/' : '/',
   lintOnSave: process.env.NODE_ENV === 'development',
+  productionSourceMap: false,
+  devServer: {
+    port: devServerPort,
+    open: true,
+    overlay: {
+      warning: false,
+      errors: true
+    },
+    progress: false,
+    proxy: {
+      [process.env.VUE_APP_BASE_API]: {
+        target: `http://127.0.0.1:${stageServerPort}/mock-api/v1`,
+        changeOrigin: true, // needed for virtual hosted sites
+        ws: true, // proxy websockets
+        pathRewrite: {
+          ['^' + process.env.VUE_APP_BASE_API]: ''
+        }
+      }
+    }
+  },
   pwa: {
     name: name
   },