diff --git a/vue-admin-wonderful-next-docs/docs/README.md b/vue-admin-wonderful-next-docs/docs/README.md index 269a701..a419ffa 100644 --- a/vue-admin-wonderful-next-docs/docs/README.md +++ b/vue-admin-wonderful-next-docs/docs/README.md @@ -2,7 +2,7 @@ home: true heroImage: https://v1.vuepress.vuejs.org/hero.png heroText: vue-admin-wonderful -tagline: 这是 vue3.x + vite + element plus + typescript 的开发文档 +tagline: 这是 vue3.x Composition API + vite + element plus + typescript 的开发文档 actionText: 快速上手 → actionLink: /guide/ features: diff --git a/vue-admin-wonderful-next/package.json b/vue-admin-wonderful-next/package.json index 15861be..e65a4e8 100644 --- a/vue-admin-wonderful-next/package.json +++ b/vue-admin-wonderful-next/package.json @@ -6,7 +6,7 @@ "build": "vite build" }, "dependencies": { - "element-plus": "^1.0.1-beta.7", + "element-plus": "^1.0.1-beta.10", "vue": "^3.0.4" }, "devDependencies": { diff --git a/vue-admin-wonderful-next/src/App.vue b/vue-admin-wonderful-next/src/App.vue index ec4dd21..86517e2 100644 --- a/vue-admin-wonderful-next/src/App.vue +++ b/vue-admin-wonderful-next/src/App.vue @@ -1,68 +1,1116 @@ \ No newline at end of file + + + \ No newline at end of file diff --git a/vue-admin-wonderful-next/src/theme/app.scss b/vue-admin-wonderful-next/src/theme/app.scss index 895ea3f..637a3db 100644 --- a/vue-admin-wonderful-next/src/theme/app.scss +++ b/vue-admin-wonderful-next/src/theme/app.scss @@ -5,7 +5,8 @@ } html, -body { +body, +#app { width: 100%; height: 100%; } diff --git a/vue-admin-wonderful-next/src/theme/common/var.scss b/vue-admin-wonderful-next/src/theme/common/var.scss index c0dae4c..f073fc0 100644 --- a/vue-admin-wonderful-next/src/theme/common/var.scss +++ b/vue-admin-wonderful-next/src/theme/common/var.scss @@ -1,39 +1,117 @@ +/** +* scss 怎么动态创建变量 +* 本来想用 @function，@for 好像不可以动态创建 +* 2020.12.19 lyt 记录 +**/ + /* 定义初始颜色 ------------------------------- */ -// $root: ( -// primary: #409eff, -// success: #67c23a, -// warning: #e6a23c, -// danger: #f56c6c, -// info: #909399, -// whites: #ffffff, -// blacks: #000000, -// ); - -/* 循环赋值给:root -------------------------------- */ -// :root { -// @each $key, $value in $root { -// --color-#{$key}: #{$value}; -// } -// } - $--color-primary: #409eff !default; -$--color-white: #ffffff !default; -$--color-black: #000000 !default; -$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; -// $--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; -// $--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; -// $--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; -// $--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; -// $--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; -// $--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; -// $--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; -// $--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; +$--color-whites: #ffffff !default; +$--color-blacks: #000000 !default; +$--color-primary-light-1: mix($--color-whites, $--color-primary, 10%) !default; +$--color-primary-light-2: mix($--color-whites, $--color-primary, 20%) !default; +$--color-primary-light-3: mix($--color-whites, $--color-primary, 30%) !default; +$--color-primary-light-4: mix($--color-whites, $--color-primary, 40%) !default; +$--color-primary-light-5: mix($--color-whites, $--color-primary, 50%) !default; +$--color-primary-light-6: mix($--color-whites, $--color-primary, 60%) !default; +$--color-primary-light-7: mix($--color-whites, $--color-primary, 70%) !default; +$--color-primary-light-8: mix($--color-whites, $--color-primary, 80%) !default; +$--color-primary-light-9: mix($--color-whites, $--color-primary, 90%) !default; +$--color-success: #67c23a !default; +$--color-success-light-1: mix($--color-whites, $--color-success, 10%) !default; +$--color-success-light-2: mix($--color-whites, $--color-success, 20%) !default; +$--color-success-light-3: mix($--color-whites, $--color-success, 30%) !default; +$--color-success-light-4: mix($--color-whites, $--color-success, 40%) !default; +$--color-success-light-5: mix($--color-whites, $--color-success, 50%) !default; +$--color-success-light-6: mix($--color-whites, $--color-success, 60%) !default; +$--color-success-light-7: mix($--color-whites, $--color-success, 70%) !default; +$--color-success-light-8: mix($--color-whites, $--color-success, 80%) !default; +$--color-success-light-9: mix($--color-whites, $--color-success, 90%) !default; +$--color-info: #909399 !default; +$--color-info-light-1: mix($--color-whites, $--color-info, 10%) !default; +$--color-info-light-2: mix($--color-whites, $--color-info, 20%) !default; +$--color-info-light-3: mix($--color-whites, $--color-info, 30%) !default; +$--color-info-light-4: mix($--color-whites, $--color-info, 40%) !default; +$--color-info-light-5: mix($--color-whites, $--color-info, 50%) !default; +$--color-info-light-6: mix($--color-whites, $--color-info, 60%) !default; +$--color-info-light-7: mix($--color-whites, $--color-info, 70%) !default; +$--color-info-light-8: mix($--color-whites, $--color-info, 80%) !default; +$--color-info-light-9: mix($--color-whites, $--color-info, 90%) !default; +$--color-warning: #e6a23c !default; +$--color-warning-light-1: mix($--color-whites, $--color-warning, 10%) !default; +$--color-warning-light-2: mix($--color-whites, $--color-warning, 20%) !default; +$--color-warning-light-3: mix($--color-whites, $--color-warning, 30%) !default; +$--color-warning-light-4: mix($--color-whites, $--color-warning, 40%) !default; +$--color-warning-light-5: mix($--color-whites, $--color-warning, 50%) !default; +$--color-warning-light-6: mix($--color-whites, $--color-warning, 60%) !default; +$--color-warning-light-7: mix($--color-whites, $--color-warning, 70%) !default; +$--color-warning-light-8: mix($--color-whites, $--color-warning, 80%) !default; +$--color-warning-light-9: mix($--color-whites, $--color-warning, 90%) !default; +$--color-danger: #f56c6c !default; +$--color-danger-light-1: mix($--color-whites, $--color-danger, 10%) !default; +$--color-danger-light-2: mix($--color-whites, $--color-danger, 20%) !default; +$--color-danger-light-3: mix($--color-whites, $--color-danger, 30%) !default; +$--color-danger-light-4: mix($--color-whites, $--color-danger, 40%) !default; +$--color-danger-light-5: mix($--color-whites, $--color-danger, 50%) !default; +$--color-danger-light-6: mix($--color-whites, $--color-danger, 60%) !default; +$--color-danger-light-7: mix($--color-whites, $--color-danger, 70%) !default; +$--color-danger-light-8: mix($--color-whites, $--color-danger, 80%) !default; +$--color-danger-light-9: mix($--color-whites, $--color-danger, 90%) !default; +/* 赋值给:root +------------------------------- */ :root { --color-primary: #{$--color-primary}; - --color-white: #{$--color-white}; - --color-black: #{$--color-black}; + --color-whites: #{$--color-whites}; + --color-blacks: #{$--color-blacks}; --color-primary-light-1: #{$--color-primary-light-1}; + --color-primary-light-2: #{$--color-primary-light-2}; + --color-primary-light-3: #{$--color-primary-light-3}; + --color-primary-light-4: #{$--color-primary-light-4}; + --color-primary-light-5: #{$--color-primary-light-5}; + --color-primary-light-6: #{$--color-primary-light-6}; + --color-primary-light-7: #{$--color-primary-light-7}; + --color-primary-light-8: #{$--color-primary-light-8}; + --color-primary-light-9: #{$--color-primary-light-9}; + --color-success: #{$--color-success}; + --color-success-light-1: #{$--color-success-light-1}; + --color-success-light-2: #{$--color-success-light-2}; + --color-success-light-3: #{$--color-success-light-3}; + --color-success-light-4: #{$--color-success-light-4}; + --color-success-light-5: #{$--color-success-light-5}; + --color-success-light-6: #{$--color-success-light-6}; + --color-success-light-7: #{$--color-success-light-7}; + --color-success-light-8: #{$--color-success-light-8}; + --color-success-light-9: #{$--color-success-light-9}; + --color-info: #{$--color-info}; + --color-info-light-1: #{$--color-info-light-1}; + --color-info-light-2: #{$--color-info-light-2}; + --color-info-light-3: #{$--color-info-light-3}; + --color-info-light-4: #{$--color-info-light-4}; + --color-info-light-5: #{$--color-info-light-5}; + --color-info-light-6: #{$--color-info-light-6}; + --color-info-light-7: #{$--color-info-light-7}; + --color-info-light-8: #{$--color-info-light-8}; + --color-info-light-9: #{$--color-info-light-9}; + --color-warning: #{$--color-warning}; + --color-warning-light-1: #{$--color-warning-light-1}; + --color-warning-light-2: #{$--color-warning-light-2}; + --color-warning-light-3: #{$--color-warning-light-3}; + --color-warning-light-4: #{$--color-warning-light-4}; + --color-warning-light-5: #{$--color-warning-light-5}; + --color-warning-light-6: #{$--color-warning-light-6}; + --color-warning-light-7: #{$--color-warning-light-7}; + --color-warning-light-8: #{$--color-warning-light-8}; + --color-warning-light-9: #{$--color-warning-light-9}; + --color-danger: #{$--color-danger}; + --color-danger-light-1: #{$--color-danger-light-1}; + --color-danger-light-2: #{$--color-danger-light-2}; + --color-danger-light-3: #{$--color-danger-light-3}; + --color-danger-light-4: #{$--color-danger-light-4}; + --color-danger-light-5: #{$--color-danger-light-5}; + --color-danger-light-6: #{$--color-danger-light-6}; + --color-danger-light-7: #{$--color-danger-light-7}; + --color-danger-light-8: #{$--color-danger-light-8}; + --color-danger-light-9: #{$--color-danger-light-9}; } diff --git a/vue-admin-wonderful-next/src/theme/element.scss b/vue-admin-wonderful-next/src/theme/element.scss new file mode 100644 index 0000000..2ef6016 --- /dev/null +++ b/vue-admin-wonderful-next/src/theme/element.scss @@ -0,0 +1,798 @@ +@import 'mixins/function.scss'; +@import 'mixins/element-mixins.scss'; + +/* Button 按钮 +------------------------------- */ +// text +.el-button--text { + color: set-color(primary); + &:focus, + &:hover { + color: set-color(primary-light-3); + } +} +// default +.el-button--default:hover, +.el-button--default:focus { + @include Button(primary, primary-light-8, primary-light-6); +} +.el-button--default.is-plain:hover, +.el-button--default.is-plain:focus { + @include Button(primary, whites, primary-light-1); +} +// primary +.el-button--primary { + @include Button(whites, primary, primary); + &:hover, + &:focus { + @include Button(whites, primary-light-3, primary-light-3); + } +} +.el-button--primary.is-plain { + @include Button(primary, primary-light-8, primary-light-6); + &:hover, + &:focus { + @include Button(whites, primary, primary); + } +} +.el-button--primary.is-disabled, +.el-button--primary.is-disabled:active, +.el-button--primary.is-disabled:focus, +.el-button--primary.is-disabled:hover { + @include Button(whites, primary-light-7, primary-light-7); +} +// success +.el-button--success { + @include Button(whites, success, success); + &:hover, + &:focus { + @include Button(whites, success-light-3, success-light-3); + } +} +.el-button--success.is-plain { + @include Button(success, success-light-8, success-light-6); + &:hover, + &:focus { + @include Button(whites, success, success); + } +} +// info +.el-button--info { + @include Button(whites, info, info); + &:hover, + &:focus { + @include Button(whites, info-light-3, info-light-3); + } +} +.el-button--info.is-plain { + @include Button(info, info-light-8, info-light-6); + &:hover, + &:focus { + @include Button(whites, info, info); + } +} +// warning +.el-button--warning { + @include Button(whites, warning, warning); + &:hover, + &:focus { + @include Button(whites, warning-light-3, warning-light-3); + } +} +.el-button--warning.is-plain { + @include Button(warning, warning-light-8, warning-light-6); + &:hover, + &:focus { + @include Button(whites, warning, warning); + } +} +// danger +.el-button--danger { + @include Button(whites, danger, danger); + &:hover, + &:focus { + @include Button(whites, danger-light-3, danger-light-3); + } +} +.el-button--danger.is-plain { + @include Button(danger, danger-light-8, danger-light-6); + &:hover, + &:focus { + @include Button(whites, danger, danger); + } +} + +/* Link 文字链接 +------------------------------- */ +// default +.el-link.el-link--default:hover { + color: set-color(primary-light-3); +} +// primary +.el-link.el-link--primary { + color: set-color(primary); + &:hover { + color: set-color(primary-light-3); + } +} +.el-link.el-link--default::after, +.el-link.is-underline:hover::after, +.el-link.el-link--primary.is-underline:hover::after, +.el-link.el-link--primary::after { + border-color: set-color(primary); +} +// success +.el-link.el-link--success { + color: set-color(success); + &:hover { + color: set-color(success-light-3); + } +} +.el-link.el-link--success.is-underline:hover::after, +.el-link.el-link--success::after { + border-color: set-color(success); +} +// info +.el-link.el-link--info { + color: set-color(info); + &:hover { + color: set-color(info-light-3); + } +} +.el-link.el-link--info.is-underline:hover::after, +.el-link.el-link--info::after { + border-color: set-color(info); +} +// warning +.el-link.el-link--warning { + color: set-color(warning); + &:hover { + color: set-color(warning-light-3); + } +} +.el-link.el-link--warning.is-underline:hover::after, +.el-link.el-link--warning::after { + border-color: set-color(warning); +} +// danger +.el-link.el-link--danger { + color: set-color(danger); + &:hover { + color: set-color(danger-light-3); + } +} +.el-link.el-link--danger.is-underline:hover::after, +.el-link.el-link--danger::after { + border-color: set-color(danger); +} + +/* Radio 单选框 +------------------------------- */ +.el-radio__input.is-checked + .el-radio__label, +.el-radio-button__inner:hover { + color: set-color(primary); +} +.el-radio__input.is-checked .el-radio__inner { + @include RadioCheckbox(primary); +} +.el-radio-button__orig-radio:checked + .el-radio-button__inner { + color: set-color(whites); + @include RadioCheckbox(primary); + box-shadow: -1px 0 0 0 set-color(primary); +} +.el-radio.is-bordered.is-checked, +.el-radio__inner:hover { + border-color: set-color(primary); +} + +/* Checkbox 多选框 +------------------------------- */ +.el-checkbox__input.is-checked + .el-checkbox__label, +.el-checkbox-button__inner:hover { + color: set-color(primary); +} +.el-checkbox__input.is-checked .el-checkbox__inner { + @include RadioCheckbox(primary); +} +.el-checkbox__input.is-focus .el-checkbox__inner, +.el-checkbox__inner:hover, +.el-checkbox.is-bordered.is-checked, +.el-checkbox-button.is-focus .el-checkbox-button__inner { + border-color: set-color(primary); +} +.el-checkbox-button.is-checked .el-checkbox-button__inner { + color: set-color(whites); + @include RadioCheckbox(primary); + box-shadow: -1px 0 0 0 set-color(primary); +} +.el-checkbox-button.is-checked:first-child .el-checkbox-button__inner { + border-left-color: set-color(primary); +} +.el-checkbox__input.is-checked .el-checkbox__inner, +.el-checkbox__input.is-indeterminate .el-checkbox__inner { + background-color: set-color(primary); + border-color: set-color(primary); +} + +/* Input 输入框、InputNumber 计数器 +------------------------------- */ +.el-input__inner:focus, +.el-input-number__decrease:hover:not(.is-disabled) + ~ .el-input + .el-input__inner:not(.is-disabled), +.el-input-number__increase:hover:not(.is-disabled) + ~ .el-input + .el-input__inner:not(.is-disabled), +.el-textarea__inner:focus { + border-color: set-color(primary); +} +.el-input-number__increase:hover, +.el-input-number__decrease:hover { + color: set-color(primary); +} + +/* Select 选择器 +------------------------------- */ +.el-range-editor.is-active, +.el-range-editor.is-active:hover, +.el-select .el-input.is-focus .el-input__inner, +.el-select .el-input__inner:focus { + border-color: set-color(primary); +} +.el-select-dropdown__item.selected { + color: set-color(primary); +} + +/* Cascader 级联选择器 +------------------------------- */ +.el-cascader .el-input .el-input__inner:focus, +.el-cascader .el-input.is-focus .el-input__inner { + border-color: set-color(primary); +} +.el-cascader-node.in-active-path, +.el-cascader-node.is-active, +.el-cascader-node.is-selectable.in-checked-path { + color: set-color(primary); +} + +/* Switch 开关 +------------------------------- */ +.el-switch.is-checked .el-switch__core { + border-color: set-color(primary); + background-color: set-color(primary); +} +.el-switch__label.is-active { + color: set-color(primary); +} + +/* Slider 滑块 +------------------------------- */ +.el-slider__bar { + background-color: set-color(primary); +} +.el-slider__button { + border-color: set-color(primary); +} + +/* TimePicker 时间选择器 +------------------------------- */ +.el-time-panel__btn.confirm, +.el-time-spinner__arrow:hover { + color: set-color(primary); +} + +/* DatePicker 日期选择器 +------------------------------- */ +.el-date-table td.today span, +.el-date-table td.available:hover, +.el-date-picker__header-label.active, +.el-date-picker__header-label:hover, +.el-picker-panel__icon-btn:hover, +.el-year-table td.today .cell, +.el-year-table td .cell:hover, +.el-year-table td.current:not(.disabled) .cell, +.el-month-table td .cell:hover, +.el-month-table td.today .cell, +.el-month-table td.current:not(.disabled) .cell, +.el-picker-panel__shortcut:hover { + color: set-color(primary); +} +.el-date-table td.current:not(.disabled) span, +.el-date-table td.selected span { + color: set-color(whites); + background-color: set-color(primary); +} +.el-date-table td.end-date span, +.el-date-table td.start-date span { + background-color: set-color(primary); +} +.el-date-table td.in-range div, +.el-date-table td.in-range div:hover, +.el-date-table.is-week-mode .el-date-table__row.current div, +.el-date-table.is-week-mode .el-date-table__row:hover div, +.el-date-table td.selected div { + background-color: set-color(primary-light-9); +} + +/* Upload 上传 +------------------------------- */ +.el-upload-list__item.is-success .el-upload-list__item-name:focus, +.el-upload-list__item.is-success .el-upload-list__item-name:hover, +.el-upload-list__item .el-icon-close-tip, +.el-upload-dragger .el-upload__text em { + color: set-color(primary); +} +.el-upload-list__item:hover { + background-color: set-color(primary-light-9); +} +.el-upload--picture-card:hover, +.el-upload:focus { + color: set-color(primary); + border-color: set-color(primary); +} +.el-upload-dragger:hover, +.el-upload:focus .el-upload-dragger { + border-color: set-color(primary); +} + +/* Transfer 穿梭框 +------------------------------- */ +.el-transfer-panel__item:hover { + color: set-color(primary); +} + +/* Table 表格 +------------------------------- */ +.el-table .descending .sort-caret.descending { + border-top-color: set-color(primary); +} +.el-table .ascending .sort-caret.ascending { + border-bottom-color: set-color(primary); +} + +/* Tag 标签 +------------------------------- */ +// primary +.el-tag { + @include Tag(primary, primary-light-8, primary-light-6); +} +.el-tag .el-tag__close { + color: set-color(primary); + &:hover { + @include TagDark(whites, primary); + } +} +.el-tag--dark { + @include TagDark(whites, primary); +} +.el-tag--dark .el-tag__close { + color: set-color(whites); + &:hover { + background-color: set-color(primary-light-3); + } +} +.el-tag--plain { + @include Tag(primary, whites, primary-light-3); +} +// success +.el-tag.el-tag--success { + @include Tag(success, success-light-8, success-light-6); +} +.el-tag.el-tag--success .el-tag__close { + color: set-color(success); + &:hover { + @include TagDark(whites, success); + } +} +.el-tag--dark.el-tag--success { + @include TagDark(whites, success); +} +.el-tag--dark.el-tag--success .el-tag__close { + color: set-color(whites); + &:hover { + background-color: set-color(success-light-3); + } +} +.el-tag--plain.el-tag--success { + @include Tag(success, whites, success-light-3); +} +// info +.el-tag.el-tag--info { + @include Tag(info, info-light-8, info-light-6); +} +.el-tag.el-tag--info .el-tag__close { + color: set-color(info); + &:hover { + @include TagDark(whites, info); + } +} +.el-tag--dark.el-tag--info { + @include TagDark(whites, info); +} +.el-tag--dark.el-tag--info .el-tag__close { + color: set-color(whites); + &:hover { + background-color: set-color(info-light-3); + } +} +.el-tag--plain.el-tag--info { + @include Tag(info, whites, info-light-3); +} +// warning +.el-tag.el-tag--warning { + @include Tag(warning, warning-light-8, warning-light-6); +} +.el-tag.el-tag--warning .el-tag__close { + color: set-color(warning); + &:hover { + @include TagDark(whites, warning); + } +} +.el-tag--dark.el-tag--warning { + @include TagDark(whites, warning); +} +.el-tag--dark.el-tag--warning .el-tag__close { + color: set-color(whites); + &:hover { + background-color: set-color(warning-light-3); + } +} +.el-tag--plain.el-tag--warning { + @include Tag(warning, whites, warning-light-3); +} +// danger +.el-tag.el-tag--danger { + @include Tag(danger, danger-light-8, danger-light-6); +} +.el-tag.el-tag--danger .el-tag__close { + color: set-color(danger); + &:hover { + @include TagDark(whites, danger); + } +} +.el-tag--dark.el-tag--danger { + @include TagDark(whites, danger); +} +.el-tag--dark.el-tag--danger .el-tag__close { + color: set-color(whites); + &:hover { + background-color: set-color(danger-light-3); + } +} +.el-tag--plain.el-tag--danger { + @include Tag(danger, whites, danger-light-3); +} + +/* Tag 标签 +------------------------------- */ +// primary +.el-progress-bar__inner { + background-color: set-color(primary); +} +// success +.el-progress.is-success .el-progress-bar__inner { + background-color: set-color(success); +} +.el-progress.is-success .el-progress__text { + color: set-color(success); +} +// warning +.el-progress.is-warning .el-progress-bar__inner { + background-color: set-color(warning); +} +.el-progress.is-warning .el-progress__text { + color: set-color(warning); +} +// danger +.el-badge__content, +.el-progress.is-exception .el-progress-bar__inner { + background-color: set-color(danger); +} +.el-progress.is-exception .el-progress__text { + color: set-color(danger); +} + +/* Pagination 分页 +------------------------------- */ +.el-pager li.active, +.el-pager li:hover, +.el-pagination button:hover, +.el-pagination.is-background .el-pager li:not(.disabled):hover { + color: set-color(primary); +} +.el-pagination__sizes .el-input .el-input__inner:hover { + border-color: set-color(primary); +} +.el-pagination.is-background .el-pager li:not(.disabled).active { + background-color: set-color(primary); + color: set-color(whites); +} + +/* Badge 标记 +------------------------------- */ +// primary +.el-badge__content--primary { + background-color: set-color(primary); +} +// success +.el-badge__content--success { + background-color: set-color(success); +} +// warning +.el-badge__content--warning { + background-color: set-color(warning); +} +// danger +.el-badge__content--danger { + background-color: set-color(danger); +} +// info +.el-badge__content--info { + background-color: set-color(info); +} + +/* Alert 警告 +------------------------------- */ +// success +.el-alert--success.is-light { + @include Alert(success, success-light-9, success-light-8); +} +.el-alert--success.is-dark { + @include Alert(whites, success, success-light-8); +} +.el-alert--success.is-light .el-alert__description { + color: set-color(success); +} +// warning +.el-alert--warning.is-light { + @include Alert(warning, warning-light-9, warning-light-8); +} +.el-alert--warning.is-dark { + @include Alert(whites, warning, warning-light-8); +} +.el-alert--warning.is-light .el-alert__description { + color: set-color(warning); +} +// info +.el-alert--info.is-light { + @include Alert(info, info-light-9, info-light-8); +} +.el-alert--info.is-dark { + @include Alert(whites, info, info-light-8); +} +.el-alert--info.is-light .el-alert__description { + color: set-color(info); +} +// error +.el-alert--error.is-light { + @include Alert(danger, danger-light-9, danger-light-8); +} +.el-alert--error.is-dark { + @include Alert(whites, danger, danger-light-8); +} +.el-alert--error.is-light .el-alert__description { + color: set-color(danger); +} + +/* Loading 加载 +------------------------------- */ +.el-loading-spinner .path { + stroke: set-color(primary); +} +.el-loading-spinner .el-loading-text, +.el-loading-spinner i { + color: set-color(primary); +} + +/* Message 消息提示 +------------------------------- */ +// default/info +.el-message { + background-color: set-color(info-light-9); + border-color: set-color(info-light-8); + min-width: unset !important; + padding: 15px !important; +} +.el-message .el-message__content, +.el-message .el-icon-info { + color: set-color(info); +} +// success +.el-message--success { + background-color: set-color(success-light-9); + border-color: set-color(success-light-8); +} +.el-message--success .el-message__content, +.el-message .el-icon-success { + color: set-color(success); +} +// warning +.el-message--warning { + background-color: set-color(warning-light-9); + border-color: set-color(warning-light-8); +} +.el-message--warning .el-message__content, +.el-message .el-icon-warning { + color: set-color(warning); +} +// error +.el-message--error { + background-color: set-color(danger-light-9); + border-color: set-color(danger-light-8); +} +.el-message--error .el-message__content, +.el-message .el-icon-error { + color: set-color(danger); +} + +/* MessageBox 弹框 +------------------------------- */ +.el-message-box__headerbtn:focus .el-message-box__close, +.el-message-box__headerbtn:hover .el-message-box__close { + color: set-color(primary); +} +// success +.el-message-box__status.el-icon-success { + color: set-color(success); +} +// info +.el-message-box__status.el-icon-info { + color: set-color(info); +} +// warning +.el-message-box__status.el-icon-warning { + color: set-color(warning); +} +// error +.el-message-box__status.el-icon-error { + color: set-color(danger); +} + +/* Notification 通知 +------------------------------- */ +// success +.el-notification .el-icon-success { + color: set-color(success); +} +// info +.el-notification .el-icon-info { + color: set-color(info); +} +// warning +.el-notification .el-icon-warning { + color: set-color(warning); +} +// error +.el-notification .el-icon-error { + color: set-color(danger); +} + +/* NavMenu 导航菜单 +------------------------------- */ +// horizontal +.el-menu--horizontal > .el-menu-item.is-active, +.el-menu--horizontal > .el-submenu.is-active .el-submenu__title { + border-bottom-color: set-color(primary); + color: set-color(primary); +} +.el-menu--horizontal .el-menu-item:not(.is-disabled):focus, +.el-menu--horizontal .el-menu-item:not(.is-disabled):hover, +.el-menu--horizontal > .el-submenu:focus .el-submenu__title, +.el-menu--horizontal > .el-submenu:hover .el-submenu__title, +.el-menu--horizontal .el-menu .el-menu-item.is-active, +.el-menu--horizontal .el-menu .el-submenu.is-active > .el-submenu__title { + color: set-color(primary); +} +// default +.el-menu-item.is-active { + color: set-color(primary); +} +.el-menu-item:focus, +.el-menu-item:hover, +.el-submenu__title:focus, +.el-submenu__title:hover { + background-color: set-color(primary-light-9); +} + +/* Tabs 标签页 +------------------------------- */ +.el-tabs__item.is-active, +.el-tabs__item:hover, +.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active, +.el-tabs--border-card + > .el-tabs__header + .el-tabs__item:not(.is-disabled):hover { + color: set-color(primary); +} +.el-tabs__active-bar { + background-color: set-color(primary); +} + +/* Breadcrumb 面包屑 +------------------------------- */ +.el-breadcrumb__inner a:hover, +.el-breadcrumb__inner.is-link:hover { + color: set-color(primary); +} + +/* Dropdown 下拉菜单 +------------------------------- */ +.el-dropdown-menu__item:focus, +.el-dropdown-menu__item:not(.is-disabled):hover { + color: set-color(primary); + background-color: set-color(primary-light-9); +} + +/* Steps 步骤条 +------------------------------- */ +// default +.el-step__title.is-finish, +.el-step__description.is-finish, +.el-step__head.is-finish { + color: set-color(primary); +} +.el-step__head.is-finish { + border-color: set-color(primary); +} +// success +.el-step__title.is-success, +.el-step__head.is-success { + color: set-color(success); +} +.el-step__head.is-success { + border-color: set-color(success); +} +// error +.el-step__title.is-error, +.el-step__head.is-error { + color: set-color(danger); +} +.el-step__head.is-error { + border-color: set-color(danger); +} + +/* Dialog 对话框 +------------------------------- */ +.el-dialog__headerbtn:focus .el-dialog__close, +.el-dialog__headerbtn:hover .el-dialog__close { + color: set-color(primary); +} + +/* Timeline 时间线 +------------------------------- */ +// success +.el-timeline-item__node--success { + background-color: set-color(success); +} +// warning +.el-timeline-item__node--warning { + background-color: set-color(warning); +} +// danger +.el-timeline-item__node--danger { + background-color: set-color(danger); +} +// info +.el-timeline-item__node--info { + background-color: set-color(info); +} + +/* Calendar 日历 +------------------------------- */ +.el-calendar-table td.is-today { + color: set-color(primary); + background-color: set-color(primary-light-9); +} +.el-calendar-table .el-calendar-day:hover, +.el-calendar-table td.is-selected { + background-color: set-color(primary-light-9); +} + +/* Tag 标签 +------------------------------- */ +.el-backtop { + color: set-color(primary); + &:hover { + background-color: set-color(primary-light-9); + } +} diff --git a/vue-admin-wonderful-next/src/theme/index.scss b/vue-admin-wonderful-next/src/theme/index.scss index c44ded9..66fb626 100644 --- a/vue-admin-wonderful-next/src/theme/index.scss +++ b/vue-admin-wonderful-next/src/theme/index.scss @@ -1,4 +1,4 @@ @import './app.scss'; @import './base.scss'; -@import './reset-element.scss'; +@import './element.scss'; @import './media.scss'; diff --git a/vue-admin-wonderful-next/src/theme/mixins/element-mixins.scss b/vue-admin-wonderful-next/src/theme/mixins/element-mixins.scss new file mode 100644 index 0000000..8c9fe62 --- /dev/null +++ b/vue-admin-wonderful-next/src/theme/mixins/element-mixins.scss @@ -0,0 +1,34 @@ +/* Button 按钮 +------------------------------- */ +@mixin Button($main, $c1, $c2) { + color: set-color($main); + background: set-color($c1); + border-color: set-color($c2); +} + +/* Radio 单选框、Checkbox 多选框 +------------------------------- */ +@mixin RadioCheckbox($name) { + background-color: set-color($name); + border-color: set-color($name); +} + +/* Tag 标签 +------------------------------- */ +@mixin Tag($main, $c1, $c2) { + color: set-color($main); + background-color: set-color($c1); + border-color: set-color($c2); +} +@mixin TagDark($main, $c1) { + color: set-color($main); + background-color: set-color($c1); +} + +/* Alert 警告 +------------------------------- */ +@mixin Alert($main, $c1, $c2) { + color: set-color($main); + background: set-color($c1); + border: 1px solid set-color($c2); +} diff --git a/vue-admin-wonderful-next/src/theme/reset-element.scss b/vue-admin-wonderful-next/src/theme/reset-element.scss deleted file mode 100644 index 10ac8f6..0000000 --- a/vue-admin-wonderful-next/src/theme/reset-element.scss +++ /dev/null @@ -1,13 +0,0 @@ -@import 'mixins/function.scss'; - -/* Button 按钮 -------------------------------- */ -.el-button--primary { - background-color: set-color(primary); - border-color: set-color(primary); - &:hover, - &:focus { - background: set-color(primary-light-1); - border-color: set-color(primary-light-1); - } -} diff --git a/vue-admin-wonderful-next/src/utils/theme.ts b/vue-admin-wonderful-next/src/utils/theme.ts new file mode 100644 index 0000000..89e544a --- /dev/null +++ b/vue-admin-wonderful-next/src/utils/theme.ts @@ -0,0 +1,39 @@ +import { ElMessage } from 'element-plus'; + +// hex颜色转rgb颜色 +export function hexToRgb(str: any) { + let hexs: any = ''; + let reg = /^\#?[0-9A-F]{6}$/; + if (!reg.test(str)) return ElMessage({ type: 'warning', message: "输入错误的hex" }); + str = str.replace("#", ""); + hexs = str.match(/../g); + for (let i = 0; i < 3; i++) hexs[i] = parseInt(hexs[i], 16); + return hexs; +} + +// rgb颜色转Hex颜色 +export function rgbToHex(r: any, g: any, b: any) { + let reg = /^\d{1,3}$/; + if (!reg.test(r) || !reg.test(g) || !reg.test(b)) return ElMessage({ type: 'warning', message: "输入错误的rgb颜色值" }); + let hexs = [r.toString(16), g.toString(16), b.toString(16)]; + for (let i = 0; i < 3; i++) if (hexs[i].length == 1) hexs[i] = `0${hexs[i]}`; + return `#${hexs.join("")}`; +} + +// 加深颜色值，level为加深的程度，限0-1之间 +export function getDarkColor(color: any, level: number) { + let reg = /^\#?[0-9A-F]{6}$/; + if (!reg.test(color)) return ElMessage({ type: 'warning', message: "输入错误的hex颜色值" }); + let rgb = hexToRgb(color); + for (let i = 0; i < 3; i++) rgb[i] = Math.floor(rgb[i] * (1 - level)); + return rgbToHex(rgb[0], rgb[1], rgb[2]); +} + +// 变浅颜色值，level为加深的程度，限0-1之间 +export function getLightColor(color: any, level: number) { + let reg = /^\#?[0-9A-F]{6}$/; + if (!reg.test(color)) return ElMessage({ type: 'warning', message: "输入错误的hex颜色值" }); + let rgb = hexToRgb(color); + for (let i = 0; i < 3; i++) rgb[i] = Math.floor((255 - rgb[i]) * level + rgb[i]); + return rgbToHex(rgb[0], rgb[1], rgb[2]); +} \ No newline at end of file diff --git a/vue-admin-wonderful-next/vite.config.ts b/vue-admin-wonderful-next/vite.config.ts index b079902..624c02e 100644 --- a/vue-admin-wonderful-next/vite.config.ts +++ b/vue-admin-wonderful-next/vite.config.ts @@ -2,6 +2,8 @@ import type { UserConfig } from 'vite'; import path from 'path'; const viteConfig: UserConfig = { + sourcemap: false, + base: '../', port: 8080, hostname: 'localhost', open: false,