Parcourir la source

chore: fix ThemeColorReplacer selector
and cleanup

- fix ThemeColorReplacer selector
- add env `VUE_APP_API_BASE_URL`
- cleanup. (remove utils/storage.js)

Sendya il y a 5 ans
Parent
commit
4bed861161
10 fichiers modifiés avec 19 ajouts et 146 suppressions
  1. 1 0
      .env
  2. 1 0
      .env.preview
  3. 2 34
      README.md
  4. 4 21
      README.zh-CN.md
  5. 2 0
      src/core/bootstrap.js
  6. 1 3
      src/main.js
  7. 3 7
      src/utils/request.js
  8. 0 77
      src/utils/storage.js
  9. 2 2
      src/views/dashboard/Workplace.vue
  10. 3 2
      vue.config.js

+ 1 - 0
.env

@@ -1,2 +1,3 @@
 NODE_ENV=production
 VUE_APP_PREVIEW=false
+VUE_APP_API_BASE_URL=/api

+ 1 - 0
.env.preview

@@ -1,2 +1,3 @@
 NODE_ENV=production
 VUE_APP_PREVIEW=true
+VUE_APP_API_BASE_URL=/api

+ 2 - 34
README.md

@@ -1,7 +1,6 @@
 English | [简体中文](./README.zh-CN.md)
 
 <h1 align="center">Ant Design Pro Vue</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>
@@ -92,39 +91,8 @@ yarn run lint
 
 - Load on Demand: modify `/src/main.js` L14,  replace to `import './core/lazy_use'` code.
 
-- Customize Theme:  `vue.config.js` 
-eg: 
-```ecmascript 6
-  css: {
-    loaderOptions: {
-      less: {
-        modifyVars: {
-          /* Less variables, required modifyVars*/
-
-          'primary-color': '#F5222D',
-          'link-color': '#F5222D',
-          'border-radius-base': '4px',
-        },
-        javascriptEnabled: true,
-      }
-    }
-  }
-```
-- **polyfill**
-
-- remove polyfill: 
-  > [Vue CLI Polyfill](https://cli.vuejs.org/zh/guide/browser-compatibility.html#usebuiltins-usage)
-  
-  - remove `import '@babel/polyfill'`  field in  `src/main.js`
-  - `babel.conflg.js` remove
-    ```ecmascript 6
-    [
-      '@babel/preset-env',
-      {
-        'useBuiltIns': 'entry'
-      }
-    ]
-    ```
+- Customize Theme:  [Custom Theme Config](https://github.com/kokoroli/antd-awesome/blob/master/docs/Ant_Design_%E6%A0%B7%E5%BC%8F%E8%A6%86%E7%9B%96.md)
+
 
 ## Browsers support
 

+ 4 - 21
README.zh-CN.md

@@ -1,7 +1,6 @@
 [English](./README.md) | 简体中文
 
 <h1 align="center">Ant Design Pro Vue</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>
@@ -92,29 +91,13 @@ yarn run lint
 
 - **关于 Issue 反馈 (重要!重要!重要!) 请在开 *Issue* 前,先阅读该内容:[Issue / PR 编写建议](https://github.com/sendya/ant-design-pro-vue/issues/90)** 
 
-- 项目使用的 [vue-cli3](https://cli.vuejs.org/guide/), 请更新您的 cli
+- 项目使用的 [vue-cli3](https://cli.vuejs.org/guide/), 请确保你所使用的 vue-cli 是新版,并且已经学习 cli 官方文档使用教程
 
 - 关闭 Eslint (不推荐) 移除 `package.json` 中 `eslintConfig` 整个节点代码, `vue.config.js` 下的 `lintOnSave` 值改为 `false`
 
-- 开启组件按需加载 `/src/main.js` L7 修改为 `import './core/lazy_use'`
-
-- 修改 Ant Design 配色,在文件 `vue.config.js` 中,其他 less 变量覆盖参考 [ant design](https://ant.design/docs/react/customize-theme-cn) 官方说明
-```ecmascript 6
-  css: {
-    loaderOptions: {
-      less: {
-        modifyVars: {
-          /* less 变量覆盖,用于自定义 ant design 主题 */
-
-          'primary-color': '#F5222D',
-          'link-color': '#F5222D',
-          'border-radius-base': '4px',
-        },
-        javascriptEnabled: true,
-      }
-    }
-  }
-```
+- 开启组件按需加载 `/src/main.js` L14 修改为 `import './core/lazy_use'`
+
+- [修改 Ant Design 配色](https://github.com/kokoroli/antd-awesome/blob/master/docs/Ant_Design_%E6%A0%B7%E5%BC%8F%E8%A6%86%E7%9B%96.md)
 - **使用polyfill兼容至 IE10**
 
 ## 浏览器兼容

+ 2 - 0
src/core/bootstrap.js

@@ -16,6 +16,8 @@ import {
 import config from '@/config/defaultSettings'
 
 export default function Initializer () {
+  console.log(`API_URL: ${process.env.VUE_APP_API_BASE_URL}`)
+
   store.commit('SET_SIDEBAR_TYPE', Vue.ls.get(SIDEBAR_TYPE, true))
   store.commit('TOGGLE_THEME', Vue.ls.get(DEFAULT_THEME, config.navTheme))
   store.commit('TOGGLE_LAYOUT_MODE', Vue.ls.get(DEFAULT_LAYOUT_MODE, config.layout))

+ 1 - 3
src/main.js

@@ -23,8 +23,6 @@ Vue.use(VueAxios)
 new Vue({
   router,
   store,
-  created () {
-    bootstrap()
-  },
+  created: bootstrap,
   render: h => h(App)
 }).$mount('#app')

+ 3 - 7
src/utils/request.js

@@ -1,17 +1,13 @@
 import Vue from 'vue'
 import axios from 'axios'
 import store from '@/store'
-import {
-  VueAxios
-} from './axios'
 import notification from 'ant-design-vue/es/notification'
-import {
-  ACCESS_TOKEN
-} from '@/store/mutation-types'
+import { VueAxios } from './axios'
+import { ACCESS_TOKEN } from '@/store/mutation-types'
 
 // 创建 axios 实例
 const service = axios.create({
-  baseURL: '/api', // api base_url
+  baseURL: process.env.VUE_APP_API_BASE_URL, // api base_url
   timeout: 6000 // 请求超时时间
 })
 

+ 0 - 77
src/utils/storage.js

@@ -1,77 +0,0 @@
-/**
- * Set storage
- *
- * @param name
- * @param content
- * @param maxAge
- */
-export const setStore = (name, content, maxAge = null) => {
-  if (!global.window || !name) {
-    return
-  }
-
-  if (typeof content !== 'string') {
-    content = JSON.stringify(content)
-  }
-
-  const storage = global.window.localStorage
-
-  storage.setItem(name, content)
-  if (maxAge && !isNaN(parseInt(maxAge))) {
-    const timeout = parseInt(new Date().getTime() / 1000)
-    storage.setItem(`${name}_expire`, timeout + maxAge)
-  }
-}
-
-/**
- * Get storage
- *
- * @param name
- * @returns {*}
- */
-export const getStore = name => {
-  if (!global.window || !name) {
-    return
-  }
-
-  const content = window.localStorage.getItem(name)
-  const _expire = window.localStorage.getItem(`${name}_expire`)
-
-  if (_expire) {
-    const now = parseInt(new Date().getTime() / 1000)
-    if (now > _expire) {
-      return
-    }
-  }
-
-  try {
-    return JSON.parse(content)
-  } catch (e) {
-    return content
-  }
-}
-
-/**
- * Clear storage
- *
- * @param name
- */
-export const clearStore = name => {
-  if (!global.window || !name) {
-    return
-  }
-
-  window.localStorage.removeItem(name)
-  window.localStorage.removeItem(`${name}_expire`)
-}
-
-/**
- * Clear all storage
- */
-export const clearAll = () => {
-  if (!global.window || !name) {
-    return
-  }
-
-  window.localStorage.clear()
-}

+ 2 - 2
src/views/dashboard/Workplace.vue

@@ -190,11 +190,11 @@ export default {
     this.avatar = this.userInfo.avatar
 
     getRoleList().then(res => {
-      console.log('workplace -> call getRoleList()', res)
+      // console.log('workplace -> call getRoleList()', res)
     })
 
     getServiceList().then(res => {
-      console.log('workplace -> call getServiceList()', res)
+      // console.log('workplace -> call getServiceList()', res)
     })
   },
   mounted () {

+ 3 - 2
vue.config.js

@@ -20,13 +20,14 @@ module.exports = {
         matchColors: getAntdSerials('#1890ff'), // 主色系列
         // 改变样式选择器,解决样式覆盖问题
         changeSelector (selector) {
+          console.log('selector', selector)
           switch (selector) {
             case '.ant-calendar-today .ant-calendar-date':
-              return ':not(.ant-calendar-selected-date)' + selector
+              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),.ant-btn:hover:not(.ant-btn-primary)'
             case '.ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon':
-              return null
+              return ':not(.ant-steps-item-process)' + selector
             case '.ant-btn.active,.ant-btn:active':
               return '.ant-btn.active:not(.ant-btn-primary),.ant-btn:active:not(.ant-btn-primary)'
             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':