From c5ec2bede55b3584d0aad18c31c8fec5b4dfffef Mon Sep 17 00:00:00 2001 From: SaarHV Date: Wed, 30 Nov 2022 17:05:27 +0800 Subject: [PATCH 1/2] Update to use configuration to compile and run this repo --- .env | 8 ++++++++ .env.development | 2 ++ .env.production | 2 ++ build/utils.ts | 31 +++++++++++++++++++++++++++++++ src/main.ts | 2 +- vite.config.ts | 32 +++++++++++++++++++++----------- 6 files changed, 65 insertions(+), 12 deletions(-) create mode 100644 .env create mode 100644 .env.development create mode 100644 .env.production create mode 100644 build/utils.ts diff --git a/.env b/.env new file mode 100644 index 0000000..40921d8 --- /dev/null +++ b/.env @@ -0,0 +1,8 @@ +# port +VITE_PORT = 16801 + +# Automatically open browser when executing 'npm run dev' +VITE_OPEN = false + +# Configure the online environment path +VITE_PUBLIC_PATH = /dsms-ui/ diff --git a/.env.development b/.env.development new file mode 100644 index 0000000..c8acfc0 --- /dev/null +++ b/.env.development @@ -0,0 +1,2 @@ +# public path +VITE_PUBLIC_PATH = 'http://localhost:xxxx/' diff --git a/.env.production b/.env.production new file mode 100644 index 0000000..83d35c7 --- /dev/null +++ b/.env.production @@ -0,0 +1,2 @@ +# public path +VITE_PUBLIC_PATH = /https://xxx.xxx.xxx:xxxx/ diff --git a/build/utils.ts b/build/utils.ts new file mode 100644 index 0000000..a703028 --- /dev/null +++ b/build/utils.ts @@ -0,0 +1,31 @@ +import dotenv from 'dotenv'; + +export interface ViteEnv { + VITE_PORT: number; + VITE_OPEN: boolean; + VITE_PUBLIC_PATH: string; +} + +export function loadEnv(): ViteEnv { + const env = process.env.NODE_ENV; + const ret: any = {}; + const envList = [`.env.${env}.local`, `.env.${env}`, '.env.local', '.env', ,] + envList.forEach((e) => { + dotenv.config({ + path: e, + }); + }); + for (const envName of Object.keys(process.env)) { + let realName = (process.env as any)[envName].replace(/\\n/g, '\n'); + realName = realName === 'true' ? true : realName === 'false' ? false : realName; + if (envName === 'VITE_PORT') { + realName = Number(realName); + } + if (envName === 'VITE_OPEN') { + realName = Boolean(realName); + } + ret[envName] = realName; + process.env[envName] = realName; + } + return ret; +} \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index f530a2d..4063e31 100644 --- a/src/main.ts +++ b/src/main.ts @@ -2,7 +2,7 @@ import { createApp } from 'vue' import App from './App.vue' import ElementPlus from 'element-plus'; -import '/@assets/style/base/index.scss'; +import '/@/assets/style/base/index.scss'; // import 'element-plus/lib/theme-chalk/index.css' const app = createApp(App) diff --git a/vite.config.ts b/vite.config.ts index a45c494..d4f4cdc 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,17 +1,27 @@ import type { UserConfig } from 'vite' -const path = require('path') +import { resolve } from 'path' +import { loadEnv } from './build/utils' + +const pathResolve = (dir: string): any => { + return resolve(__dirname, '.', dir) +} + +const alias: Record = { + '/@/': pathResolve('src'), +} + +const { VITE_PORT, VITE_PUBLIC_PATH, VITE_OPEN } = loadEnv() + +const root: string = process.cwd() const viteConfig: UserConfig = { - port: 16801, - hostname: '0.0.0.0', - open: false, - alias: { - '/@/': path.resolve(__dirname, './src'), - '/@assets/': path.resolve(__dirname, './src/assets'), - '/@views/': path.resolve(__dirname, './src/views'), - '/@components/': path.resolve(__dirname, './src/components'), - '/@utils/': path.resolve(__dirname, './src/utils') - } + root, + alias, + outDir: 'dist', + minify: 'esbuild', + port: VITE_PORT, + open: VITE_OPEN, + base: process.env.NODE_ENV === "production" ? "./" : VITE_PUBLIC_PATH, } export default viteConfig -- Gitee From 43a60fac05277e2c9c1557333af2075343cfe0c7 Mon Sep 17 00:00:00 2001 From: SaarHV Date: Wed, 30 Nov 2022 18:19:14 +0800 Subject: [PATCH 2/2] Update theme and finish default theme --- package.json | 2 +- source.d.ts | 4 + src/assets/config/config-layout/index.ts | 0 src/assets/config/config-them/index.ts | 0 src/assets/style/base/index.scss | 14 - .../style/element/element-variables.scss | 6 - src/assets/theme/theme-classic/index.scss | 0 src/assets/theme/theme-elegant/index.scss | 0 src/assets/theme/theme-fashion/index.scss | 0 src/assets/theme/theme-strange/index.scss | 0 src/main.ts | 8 +- src/theme/app.scss | 18 + src/theme/base.scss | 2 + .../common/transition.scss} | 26 +- src/theme/common/var.scss | 108 +++ src/theme/element.scss | 763 ++++++++++++++++++ src/theme/index.scss | 4 + src/theme/media.scss | 1 + src/theme/mixins/element-mixins.scss | 26 + src/theme/mixins/function.scss | 3 + src/theme/mixins/mixins.scss | 14 + src/utils/theme.ts | 39 + 22 files changed, 1002 insertions(+), 36 deletions(-) create mode 100644 source.d.ts delete mode 100644 src/assets/config/config-layout/index.ts delete mode 100644 src/assets/config/config-them/index.ts delete mode 100644 src/assets/style/base/index.scss delete mode 100644 src/assets/style/element/element-variables.scss delete mode 100644 src/assets/theme/theme-classic/index.scss delete mode 100644 src/assets/theme/theme-elegant/index.scss delete mode 100644 src/assets/theme/theme-fashion/index.scss delete mode 100644 src/assets/theme/theme-strange/index.scss create mode 100644 src/theme/app.scss create mode 100644 src/theme/base.scss rename src/{assets/style/transition/index.scss => theme/common/transition.scss} (54%) create mode 100644 src/theme/common/var.scss create mode 100644 src/theme/element.scss create mode 100644 src/theme/index.scss create mode 100644 src/theme/media.scss create mode 100644 src/theme/mixins/element-mixins.scss create mode 100644 src/theme/mixins/function.scss create mode 100644 src/theme/mixins/mixins.scss create mode 100644 src/utils/theme.ts diff --git a/package.json b/package.json index df26e50..2c0dae3 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "build": "vite build" }, "dependencies": { - "element-plus": "^1.0.1-beta.7", + "element-plus": "^v1.0.1-beta.14", "vue": "^3.0.4" }, "devDependencies": { diff --git a/source.d.ts b/source.d.ts new file mode 100644 index 0000000..bbe11d4 --- /dev/null +++ b/source.d.ts @@ -0,0 +1,4 @@ +declare const React: string; +declare module '*.json'; +declare module '*.png'; +declare module '*.jpg'; \ No newline at end of file diff --git a/src/assets/config/config-layout/index.ts b/src/assets/config/config-layout/index.ts deleted file mode 100644 index e69de29..0000000 diff --git a/src/assets/config/config-them/index.ts b/src/assets/config/config-them/index.ts deleted file mode 100644 index e69de29..0000000 diff --git a/src/assets/style/base/index.scss b/src/assets/style/base/index.scss deleted file mode 100644 index f5960a3..0000000 --- a/src/assets/style/base/index.scss +++ /dev/null @@ -1,14 +0,0 @@ -@import '../element/element-variables.scss'; -@import '../transition/index.scss'; - -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -html, -body { - width: 100%; - height: 100%; -} \ No newline at end of file diff --git a/src/assets/style/element/element-variables.scss b/src/assets/style/element/element-variables.scss deleted file mode 100644 index 5ffdb8f..0000000 --- a/src/assets/style/element/element-variables.scss +++ /dev/null @@ -1,6 +0,0 @@ -/* theme color */ -$--color-primary: #09f; - -/* change icon font path */ -$--font-path: 'element-plus/lib/theme-chalk/fonts'; -@import 'element-plus/packages/theme-chalk/src/index'; diff --git a/src/assets/theme/theme-classic/index.scss b/src/assets/theme/theme-classic/index.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/assets/theme/theme-elegant/index.scss b/src/assets/theme/theme-elegant/index.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/assets/theme/theme-fashion/index.scss b/src/assets/theme/theme-fashion/index.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/assets/theme/theme-strange/index.scss b/src/assets/theme/theme-strange/index.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/main.ts b/src/main.ts index 4063e31..cc61cc0 100644 --- a/src/main.ts +++ b/src/main.ts @@ -2,9 +2,7 @@ import { createApp } from 'vue' import App from './App.vue' import ElementPlus from 'element-plus'; -import '/@/assets/style/base/index.scss'; -// import 'element-plus/lib/theme-chalk/index.css' +import 'element-plus/lib/theme-chalk/index.css'; +import '/@/theme/index.scss'; -const app = createApp(App) -app.use(ElementPlus) -app.mount('#app') +createApp(App).use(ElementPlus, { size: 'small' }).mount('#app') diff --git a/src/theme/app.scss b/src/theme/app.scss new file mode 100644 index 0000000..0e5ed34 --- /dev/null +++ b/src/theme/app.scss @@ -0,0 +1,18 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html, +body, +#app { + margin: 0; + padding: 0; + height: 100%; + font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, + Microsoft YaHei, SimSun, sans-serif; + font-weight: 400; + -webkit-font-smoothing: antialiased; + -webkit-tap-highlight-color: transparent; +} diff --git a/src/theme/base.scss b/src/theme/base.scss new file mode 100644 index 0000000..ed9216f --- /dev/null +++ b/src/theme/base.scss @@ -0,0 +1,2 @@ +@import 'common/transition.scss'; +@import 'common/var.scss'; diff --git a/src/assets/style/transition/index.scss b/src/theme/common/transition.scss similarity index 54% rename from src/assets/style/transition/index.scss rename to src/theme/common/transition.scss index 6596fba..4f54288 100644 --- a/src/assets/style/transition/index.scss +++ b/src/theme/common/transition.scss @@ -1,31 +1,37 @@ +@mixin transition($second: 0.3) { + transition: all #{$second}s; +} + +@mixin translateX($opacity: 0, $offsetX: 0) { + opacity: $opacity; + transform: translateX(#{$offsetX}px); +} + /* change page Transition animation */ .fade-transform-enter-active, .fade-transform-leave-active { will-change: transform; - transition: all 0.3s; + @include transition(); } .fade-transform-enter { - opacity: 0; - transform: translateX(-30px); + @include translateX(-30); } .fade-transform-leave-active { - opacity: 0; - transform: translateX(30px); + @include translateX(30); } /* Breadcrumb transition animation*/ .breadcrumb-enter-active, .breadcrumb-leave-active { - transition: all 0.3s; + @include transition(); } .breadcrumb-enter, .breadcrumb-leave-active { - opacity: 0; - transform: translateX(20px); + @include translateX(20); } .breadcrumb-move { - transition: all 0.3s; + @include transition(); } .breadcrumb-leave-active { position: absolute; -} \ No newline at end of file +} diff --git a/src/theme/common/var.scss b/src/theme/common/var.scss new file mode 100644 index 0000000..31fc1b4 --- /dev/null +++ b/src/theme/common/var.scss @@ -0,0 +1,108 @@ +/* define color */ +$--color-primary: #409eff !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 { + --color-primary: #{$--color-primary}; + --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/src/theme/element.scss b/src/theme/element.scss new file mode 100644 index 0000000..fadf8cd --- /dev/null +++ b/src/theme/element.scss @@ -0,0 +1,763 @@ +@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--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/src/theme/index.scss b/src/theme/index.scss new file mode 100644 index 0000000..66fb626 --- /dev/null +++ b/src/theme/index.scss @@ -0,0 +1,4 @@ +@import './app.scss'; +@import './base.scss'; +@import './element.scss'; +@import './media.scss'; diff --git a/src/theme/media.scss b/src/theme/media.scss new file mode 100644 index 0000000..b41428b --- /dev/null +++ b/src/theme/media.scss @@ -0,0 +1 @@ +// 540/720/960/1140 \ No newline at end of file diff --git a/src/theme/mixins/element-mixins.scss b/src/theme/mixins/element-mixins.scss new file mode 100644 index 0000000..5a587ff --- /dev/null +++ b/src/theme/mixins/element-mixins.scss @@ -0,0 +1,26 @@ +@mixin Button($main, $c1, $c2) { + color: set-color($main); + background: set-color($c1); + border-color: set-color($c2); +} + +@mixin RadioCheckbox($name) { + background-color: set-color($name); + border-color: set-color($name); +} + +@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); +} + +@mixin Alert($main, $c1, $c2) { + color: set-color($main); + background: set-color($c1); + border: 1px solid set-color($c2); +} diff --git a/src/theme/mixins/function.scss b/src/theme/mixins/function.scss new file mode 100644 index 0000000..6d7adb4 --- /dev/null +++ b/src/theme/mixins/function.scss @@ -0,0 +1,3 @@ +@function set-color($key) { + @return var(--color-#{$key}); +} diff --git a/src/theme/mixins/mixins.scss b/src/theme/mixins/mixins.scss new file mode 100644 index 0000000..ee0e83f --- /dev/null +++ b/src/theme/mixins/mixins.scss @@ -0,0 +1,14 @@ +@mixin text-no-wrap() { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +} + +@mixin text-ellipsis($line: 2) { + overflow: hidden; + word-break: break-all; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: $line; + -webkit-box-orient: vertical; +} diff --git a/src/utils/theme.ts b/src/utils/theme.ts new file mode 100644 index 0000000..deb0810 --- /dev/null +++ b/src/utils/theme.ts @@ -0,0 +1,39 @@ +import { ElMessage } from 'element-plus'; + +// hex to 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 to 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("")}`; +} + +// make color darker +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]); +} + +// make color lighter +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 -- Gitee