diff --git a/babel.config.js b/babel.config.js index 073da90..777881b 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,7 +1,7 @@ module.exports = { presets: [ // https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app - '@vue/cli-plugin-babel/preset' + '@vue/cli-plugin-babel/preset' ], 'env': { 'development': { diff --git a/package.json b/package.json index dab0f22..c3f5696 100644 --- a/package.json +++ b/package.json @@ -6,10 +6,10 @@ "dev": "vue-cli-service serve", "serve": "vue-cli-service serve", "build-dev": "vue-cli-service build --mode development --dest dist-dev", + "preview": "node build/index.js --preview", "build": "vue-cli-service build", "lint": "vue-cli-service lint", - "svgo": "svgo -f src/assets/icons", - "new": "plop" + "svgo": "svgo -f src/assets/icons" }, "dependencies": { "animate.css": "^4.1.1", @@ -39,6 +39,7 @@ "@vue/cli-service": "^4.5.8", "babel-eslint": "^10.1.0", "babel-plugin-dynamic-import-node": "^2.3.3", + "script-ext-html-webpack-plugin": "^2.1.5", "eslint": "^7.12.1", "eslint-plugin-vue": "^7.1.0", "html-webpack-plugin": "^4.5.0", diff --git a/src/assets/icons/index.js b/src/assets/icons/index.js new file mode 100644 index 0000000..05d6e7e --- /dev/null +++ b/src/assets/icons/index.js @@ -0,0 +1,9 @@ +import Vue from 'vue' +import SvgIcon from '@/components/SvgIcon'// svg component + +// register globally +Vue.component('SvgIcon', SvgIcon) + +const req = require.context('./svg', false, /\.svg$/) +const requireAll = requireContext => requireContext.keys().map(requireContext) +requireAll(req) diff --git a/src/assets/icons/button.svg b/src/assets/icons/svg/button.svg similarity index 100% rename from src/assets/icons/button.svg rename to src/assets/icons/svg/button.svg diff --git a/src/assets/icons/cascader.svg b/src/assets/icons/svg/cascader.svg similarity index 100% rename from src/assets/icons/cascader.svg rename to src/assets/icons/svg/cascader.svg diff --git a/src/assets/icons/checkbox.svg b/src/assets/icons/svg/checkbox.svg similarity index 100% rename from src/assets/icons/checkbox.svg rename to src/assets/icons/svg/checkbox.svg diff --git a/src/assets/icons/color.svg b/src/assets/icons/svg/color.svg similarity index 100% rename from src/assets/icons/color.svg rename to src/assets/icons/svg/color.svg diff --git a/src/assets/icons/component.svg b/src/assets/icons/svg/component.svg similarity index 100% rename from src/assets/icons/component.svg rename to src/assets/icons/svg/component.svg diff --git a/src/assets/icons/date-range.svg b/src/assets/icons/svg/date-range.svg similarity index 100% rename from src/assets/icons/date-range.svg rename to src/assets/icons/svg/date-range.svg diff --git a/src/assets/icons/date.svg b/src/assets/icons/svg/date.svg similarity index 100% rename from src/assets/icons/date.svg rename to src/assets/icons/svg/date.svg diff --git a/src/assets/icons/divider.svg b/src/assets/icons/svg/divider.svg similarity index 100% rename from src/assets/icons/divider.svg rename to src/assets/icons/svg/divider.svg diff --git a/src/assets/icons/example.color.svg b/src/assets/icons/svg/example.color.svg similarity index 100% rename from src/assets/icons/example.color.svg rename to src/assets/icons/svg/example.color.svg diff --git a/src/assets/icons/example.svg b/src/assets/icons/svg/example.svg similarity index 100% rename from src/assets/icons/example.svg rename to src/assets/icons/svg/example.svg diff --git a/src/assets/icons/gitee.svg b/src/assets/icons/svg/gitee.svg similarity index 100% rename from src/assets/icons/gitee.svg rename to src/assets/icons/svg/gitee.svg diff --git a/src/assets/icons/github.svg b/src/assets/icons/svg/github.svg similarity index 100% rename from src/assets/icons/github.svg rename to src/assets/icons/svg/github.svg diff --git a/src/assets/icons/image-carousel.svg b/src/assets/icons/svg/image-carousel.svg similarity index 100% rename from src/assets/icons/image-carousel.svg rename to src/assets/icons/svg/image-carousel.svg diff --git a/src/assets/icons/image-select.svg b/src/assets/icons/svg/image-select.svg similarity index 100% rename from src/assets/icons/image-select.svg rename to src/assets/icons/svg/image-select.svg diff --git a/src/assets/icons/image.svg b/src/assets/icons/svg/image.svg similarity index 100% rename from src/assets/icons/image.svg rename to src/assets/icons/svg/image.svg diff --git a/src/assets/icons/input.svg b/src/assets/icons/svg/input.svg similarity index 100% rename from src/assets/icons/input.svg rename to src/assets/icons/svg/input.svg diff --git a/src/assets/icons/like.svg b/src/assets/icons/svg/like.svg similarity index 100% rename from src/assets/icons/like.svg rename to src/assets/icons/svg/like.svg diff --git a/src/assets/icons/loginQQ.svg b/src/assets/icons/svg/loginQQ.svg similarity index 100% rename from src/assets/icons/loginQQ.svg rename to src/assets/icons/svg/loginQQ.svg diff --git a/src/assets/icons/loginWx.svg b/src/assets/icons/svg/loginWx.svg similarity index 100% rename from src/assets/icons/loginWx.svg rename to src/assets/icons/svg/loginWx.svg diff --git a/src/assets/icons/number.svg b/src/assets/icons/svg/number.svg similarity index 100% rename from src/assets/icons/number.svg rename to src/assets/icons/svg/number.svg diff --git a/src/assets/icons/page.svg b/src/assets/icons/svg/page.svg similarity index 100% rename from src/assets/icons/page.svg rename to src/assets/icons/svg/page.svg diff --git a/src/assets/icons/password.svg b/src/assets/icons/svg/password.svg similarity index 100% rename from src/assets/icons/password.svg rename to src/assets/icons/svg/password.svg diff --git a/src/assets/icons/radio.svg b/src/assets/icons/svg/radio.svg similarity index 100% rename from src/assets/icons/radio.svg rename to src/assets/icons/svg/radio.svg diff --git a/src/assets/icons/rate.svg b/src/assets/icons/svg/rate.svg similarity index 100% rename from src/assets/icons/rate.svg rename to src/assets/icons/svg/rate.svg diff --git a/src/assets/icons/rich-text.svg b/src/assets/icons/svg/rich-text.svg similarity index 100% rename from src/assets/icons/rich-text.svg rename to src/assets/icons/svg/rich-text.svg diff --git a/src/assets/icons/row.svg b/src/assets/icons/svg/row.svg similarity index 100% rename from src/assets/icons/row.svg rename to src/assets/icons/svg/row.svg diff --git a/src/assets/icons/select.svg b/src/assets/icons/svg/select.svg similarity index 100% rename from src/assets/icons/select.svg rename to src/assets/icons/svg/select.svg diff --git a/src/assets/icons/sign-pad.svg b/src/assets/icons/svg/sign-pad.svg similarity index 100% rename from src/assets/icons/sign-pad.svg rename to src/assets/icons/svg/sign-pad.svg diff --git a/src/assets/icons/slider.svg b/src/assets/icons/svg/slider.svg similarity index 100% rename from src/assets/icons/slider.svg rename to src/assets/icons/svg/slider.svg diff --git a/src/assets/icons/switch.svg b/src/assets/icons/svg/switch.svg similarity index 100% rename from src/assets/icons/switch.svg rename to src/assets/icons/svg/switch.svg diff --git a/src/assets/icons/table.svg b/src/assets/icons/svg/table.svg similarity index 100% rename from src/assets/icons/table.svg rename to src/assets/icons/svg/table.svg diff --git a/src/assets/icons/text.svg b/src/assets/icons/svg/text.svg similarity index 100% rename from src/assets/icons/text.svg rename to src/assets/icons/svg/text.svg diff --git a/src/assets/icons/textarea.svg b/src/assets/icons/svg/textarea.svg similarity index 100% rename from src/assets/icons/textarea.svg rename to src/assets/icons/svg/textarea.svg diff --git a/src/assets/icons/time-range.svg b/src/assets/icons/svg/time-range.svg similarity index 100% rename from src/assets/icons/time-range.svg rename to src/assets/icons/svg/time-range.svg diff --git a/src/assets/icons/time.svg b/src/assets/icons/svg/time.svg similarity index 100% rename from src/assets/icons/time.svg rename to src/assets/icons/svg/time.svg diff --git a/src/assets/icons/upload.svg b/src/assets/icons/svg/upload.svg similarity index 100% rename from src/assets/icons/upload.svg rename to src/assets/icons/svg/upload.svg diff --git a/src/assets/icons/svgo.yml b/src/assets/icons/svgo.yml new file mode 100644 index 0000000..d11906a --- /dev/null +++ b/src/assets/icons/svgo.yml @@ -0,0 +1,22 @@ +# replace default config + +# multipass: true +# full: true + +plugins: + + # - name + # + # or: + # - name: false + # - name: true + # + # or: + # - name: + # param1: 1 + # param2: 2 + +- removeAttrs: + attrs: + - 'fill' + - 'fill-rule' diff --git a/src/assets/images/5b968a75b5e42.png b/src/assets/images/5b968a75b5e42.png deleted file mode 100644 index c4f91fd..0000000 Binary files a/src/assets/images/5b968a75b5e42.png and /dev/null differ diff --git a/src/assets/images/official/background.svg b/src/assets/images/official/background.svg deleted file mode 100644 index 28af307..0000000 --- a/src/assets/images/official/background.svg +++ /dev/null @@ -1,1820 +0,0 @@ - - - - diff --git a/src/assets/images/official/banner2.png b/src/assets/images/official/banner2.png deleted file mode 100644 index 7df7c84..0000000 Binary files a/src/assets/images/official/banner2.png and /dev/null differ diff --git a/src/assets/images/official/desc1.png b/src/assets/images/official/desc1.png deleted file mode 100644 index d2ff218..0000000 Binary files a/src/assets/images/official/desc1.png and /dev/null differ diff --git a/src/assets/images/official/solution1.png b/src/assets/images/official/solution1.png deleted file mode 100644 index 96bc955..0000000 Binary files a/src/assets/images/official/solution1.png and /dev/null differ diff --git a/src/assets/images/official/solution2.png b/src/assets/images/official/solution2.png deleted file mode 100644 index fcaee00..0000000 Binary files a/src/assets/images/official/solution2.png and /dev/null differ diff --git a/src/assets/images/official/solution3.png b/src/assets/images/official/solution3.png deleted file mode 100644 index eb8d885..0000000 Binary files a/src/assets/images/official/solution3.png and /dev/null differ diff --git a/src/assets/images/official/use-commony.png b/src/assets/images/official/use-commony.png deleted file mode 100644 index c040464..0000000 Binary files a/src/assets/images/official/use-commony.png and /dev/null differ diff --git a/src/assets/styles/element-ui.scss b/src/assets/styles/element-ui.scss deleted file mode 100644 index 5442f24..0000000 --- a/src/assets/styles/element-ui.scss +++ /dev/null @@ -1,75 +0,0 @@ -// cover some element-ui styles -.el-breadcrumb__inner, -.el-breadcrumb__inner a { - font-weight: 400 !important; -} -.el-upload { - input[type="file"] { - display: none !important; - } -} -.el-upload__input { - display: none; -} -.cell { - .el-tag { - margin-right: 0; - } -} -.small-padding { - .cell { - padding-left: 5px; - padding-right: 5px; - } -} -.fixed-width { - .el-button--mini { - padding: 7px 10px; - min-width: 60px; - } -} -.status-col { - .cell { - padding: 0 10px; - text-align: center; - .el-tag { - margin-right: 0; - } - } -} - -// to fixed https://github.com/ElemeFE/element/issues/2461 -.el-dialog { - transform: none; - left: 0; - position: relative; - margin: 0 auto; -} - -// refine element ui upload -.upload-container { - .el-upload { - width: 100%; - .el-upload-dragger { - width: 100%; - height: 200px; - } - } -} - -// dropdown -.el-dropdown-menu { - a { - display: block; - } -} - -// fix date-picker ui bug in filter-item -.el-range-editor.el-input__inner { - display: inline-flex !important; -} - -// to fix el-date-picker css style -.el-range-separator { - box-sizing: content-box; -} diff --git a/src/assets/styles/form/home.scss b/src/assets/styles/form/home.scss index fb5511d..6ce21da 100644 --- a/src/assets/styles/form/home.scss +++ b/src/assets/styles/form/home.scss @@ -1,4 +1,4 @@ -@import '../resources/element-variables'; +@import '../resources/variables'; $selectedColor: rgba(24, 144, 255, 0.05); $lighterBlue: #1890ff; .form-edit-container { diff --git a/src/assets/styles/form/index.scss b/src/assets/styles/form/index.scss index c4d2244..88fdc08 100644 --- a/src/assets/styles/form/index.scss +++ b/src/assets/styles/form/index.scss @@ -1,4 +1,4 @@ -@import '../resources/element-variables'; +@import '../resources/variables'; $editorTabsborderColor: #121315; body, html { diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss index 427d63a..40dd31d 100644 --- a/src/assets/styles/index.scss +++ b/src/assets/styles/index.scss @@ -1,9 +1,6 @@ -@import './resources/variables'; @import './mixin.scss'; @import './transition.scss'; -@import './element-ui.scss'; @import './btn.scss'; -@import "./resources/element-variables"; body { height: 100%; margin: 0; diff --git a/src/assets/styles/resources/element-variables.scss b/src/assets/styles/resources/element-variables.scss deleted file mode 100644 index a123c0d..0000000 --- a/src/assets/styles/resources/element-variables.scss +++ /dev/null @@ -1,32 +0,0 @@ -/** -* I think element-ui's default theme color is too light for long-term use. -* So I modified the default color and you can modify it to your liking. -**/ - -/* theme color */ -$--color-primary: #1890ff; -$--color-success: #13ce66; -$--color-warning: #ffba00; -$--color-danger: #ff4949; -// $--color-info: #1E1E1E; - -$--button-font-weight: 400; - -// $--color-text-regular: #1f2d3d; - -$--border-color-light: #dfe4ed; -$--border-color-lighter: #e6ebf5; - -$--table-border: 1px solid #dfe6ec; - -$--box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); - -/* icon font path, required */ -$--font-path: "~element-ui/lib/theme-chalk/fonts"; -@import "../../../../node_modules/element-ui/packages/theme-chalk/src/index"; - -// the :export directive is the magic sauce for webpack -// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass -:export { - theme: $--color-primary; -} diff --git a/src/assets/styles/resources/variables.scss b/src/assets/styles/resources/variables.scss index decb04a..35af5fa 100644 --- a/src/assets/styles/resources/variables.scss +++ b/src/assets/styles/resources/variables.scss @@ -21,9 +21,35 @@ $subMenuHover: #001528; $sideBarWidth: 210px; + +/** +* I think element-ui's default theme color is too light for long-term use. +* So I modified the default color and you can modify it to your liking. +**/ + +/* theme color */ +$--color-primary: #1890ff; +$--color-success: #13ce66; +$--color-warning: #ffba00; +$--color-danger: #ff4949; +// $--color-info: #1E1E1E; + +$--button-font-weight: 400; + +// $--color-text-regular: #1f2d3d; + +$--border-color-light: #dfe4ed; +$--border-color-lighter: #e6ebf5; + +$--table-border: 1px solid #dfe6ec; + +$--box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + + // the :export directive is the magic sauce for webpack // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass :export { + theme: $--color-primary; menutext: $menuText; menuactivetext: $menuActiveText; submenuactivetext: $subMenuActiveText; diff --git a/src/main.js b/src/main.js index bc8cd91..24d493f 100644 --- a/src/main.js +++ b/src/main.js @@ -7,27 +7,29 @@ import meta from 'vue-meta' import dayjs from 'dayjs' import Cookies from 'js-cookie' import router from './router/index' -import animated from 'animate.css' + import api from './api' import store from './store/index' import '@/assets/styles/index.scss' // global css import '@/utils/plugins' +import './assets/icons' // icon // 全局组件自动注册 import '@/components/autoRegister' import VueClipboard from 'vue-clipboard2' import Process from '@/components/HandleProcess/process' + Vue.prototype.$api = api Vue.prototype.$dayjs = dayjs Vue.prototype.$store = store Vue.prototype.$cookies = Cookies Vue.prototype.msgSuccess = function(msg) { - this.$message({ showClose: true, message: msg, type: 'success' }) + this.$message({showClose: true, message: msg, type: 'success'}) } Vue.prototype.msgError = function(msg) { - this.$message({ showClose: true, message: msg, type: 'error' }) + this.$message({showClose: true, message: msg, type: 'error'}) } Vue.prototype.msgWarning = function(msg) { - this.$message({ showClose: true, message: msg, type: 'warning' }) + this.$message({showClose: true, message: msg, type: 'warning'}) } Vue.prototype.msgInfo = function(msg) { this.$message.info(msg) @@ -36,12 +38,6 @@ Vue.prototype.$process = Process Vue.use(VueClipboard) Vue.use(meta) Vue.use(Element, {size: 'small', zIndex: 3000}) -Vue.use(animated) - -// 自动加载 svg 图标 -const req = require.context('./assets/icons', false, /\.svg$/) -const requireAll = requireContext => requireContext.keys().map(requireContext) -requireAll(req) Vue.config.productionTip = false diff --git a/src/views/404.vue b/src/views/404.vue index 5426786..23a9fb6 100644 --- a/src/views/404.vue +++ b/src/views/404.vue @@ -23,7 +23,7 @@ export default { justify-content: center; justify-items: center; .title { - color: $--color-primary; + color: #1890ff; font-size: 84px; text-align: left; } diff --git a/src/views/account/login/index.vue b/src/views/account/login/index.vue index 27b62c1..d586558 100644 --- a/src/views/account/login/index.vue +++ b/src/views/account/login/index.vue @@ -1,7 +1,7 @@