diff --git a/.env.production b/.env.production index 2e7490da..994ff9ee 100644 --- a/.env.production +++ b/.env.production @@ -10,7 +10,7 @@ VITE_DROP_CONSOLE = true # Whether to enable gizp or brotli compression # Optional: gzip | brotli | none # If you need multiple forms, you can use `,` to separate -VITE_BUILD_COMPRESS = 'gzip' +VITE_BUILD_COMPRESS = 'none' # Basic interface address SPA VITE_GLOB_API_URL=/api diff --git a/.vscode/extensions.json b/.vscode/extensions.json index f8e1e7e7..993d360f 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -1,5 +1,6 @@ { "recommendations": [ + "johnsoncodehk.volar", "octref.vetur", "dbaeumer.vscode-eslint", "stylelint.vscode-stylelint", diff --git a/.vscode/settings.json b/.vscode/settings.json index 671b12c6..e49048f7 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,5 +1,7 @@ { "typescript.tsdk": "./node_modules/typescript/lib", + "volar.tsPlugin": true, + "volar.tsPluginStatus": false, //=========================================== //============= Editor ====================== //=========================================== diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md index 996cf9e4..36351bd3 100644 --- a/CHANGELOG.zh_CN.md +++ b/CHANGELOG.zh_CN.md @@ -1,10 +1,15 @@ ## Wip +### ✨ Refactor + +- 移除`global.less`,`mixin.less`,`design/helper`,由`windicss`代替,有用到的需要修改对应的样式 + ### ✨ Features - useModal 新增返回值函数 `redoModalHeight`,用于在 modal 内为动态内容时刷新 modal 高度 - 升级 husky 到 5.0 - 新增 `brotli`|`gzip`压缩及相关测试命令 +- 重新引入 `windicss` (与`tailwind`一样).在速度上更快 ### ⚡ Performance Improvements @@ -23,7 +28,8 @@ ### 🎫 Chores - 文档更新 -- 升级 ant-design-vue 到 2.0.0 +- 升级 ant-design-vue 到 `2.0.0` +- 升级 vite 到 `2.0.0` ## 2.0.0-rc.18 (2021-02-05) diff --git a/build/vite/plugin/index.ts b/build/vite/plugin/index.ts index 667dd7a2..9c1bd96d 100644 --- a/build/vite/plugin/index.ts +++ b/build/vite/plugin/index.ts @@ -1,10 +1,12 @@ import type { Plugin } from 'vite'; -import PurgeIcons from 'vite-plugin-purge-icons'; import vue from '@vitejs/plugin-vue'; import vueJsx from '@vitejs/plugin-vue-jsx'; import legacy from '@vitejs/plugin-legacy'; +import windiCSS from 'vite-plugin-windicss'; +import PurgeIcons from 'vite-plugin-purge-icons'; + import { ViteEnv } from '../../utils'; import { configHtmlPlugin } from './html'; import { configPwaConfig } from './pwa'; @@ -23,6 +25,7 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) { vue(), // have to vueJsx(), + ...windiCSS(), ]; // @vitejs/plugin-legacy diff --git a/package.json b/package.json index 5e1e4004..5e8d539f 100644 --- a/package.json +++ b/package.json @@ -51,9 +51,9 @@ "devDependencies": { "@commitlint/cli": "^11.0.0", "@commitlint/config-conventional": "^11.0.0", - "@iconify/json": "^1.1.299", + "@iconify/json": "^1.1.303", "@ls-lint/ls-lint": "^1.9.2", - "@purge-icons/generated": "^0.6.0", + "@purge-icons/generated": "^0.7.0", "@types/echarts": "^4.9.3", "@types/fs-extra": "^9.0.7", "@types/http-proxy": "^1.17.5", @@ -99,15 +99,16 @@ "stylelint-order": "^4.1.0", "ts-node": "^9.1.1", "typescript": "^4.1.5", - "vite": "2.0.0-beta.70", + "vite": "2.0.0", "vite-plugin-compression": "^0.2.1", "vite-plugin-html": "^2.0.0", "vite-plugin-imagemin": "^0.2.6", "vite-plugin-mock": "^2.1.4", - "vite-plugin-purge-icons": "^0.6.0", - "vite-plugin-pwa": "^0.4.6", + "vite-plugin-purge-icons": "^0.7.0", + "vite-plugin-pwa": "^0.4.7", "vite-plugin-style-import": "^0.7.2", "vite-plugin-theme": "^0.4.3", + "vite-plugin-windicss": "^0.2.2", "vue-eslint-parser": "^7.5.0", "yargs": "^16.2.0" }, diff --git a/src/App.vue b/src/App.vue index f3bf866e..e629105e 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,7 +1,7 @@ diff --git a/src/components/Application/src/AppLogo.vue b/src/components/Application/src/AppLogo.vue index de7b4435..ee506e19 100644 --- a/src/components/Application/src/AppLogo.vue +++ b/src/components/Application/src/AppLogo.vue @@ -9,7 +9,11 @@ @click="handleGoHome" > -
+
{{ title }}
@@ -85,12 +89,7 @@ &__title { font-size: 16px; font-weight: 700; - opacity: 0; transition: all 0.5s; - - .respond-to(medium,{ - opacity: 1; - }); } } diff --git a/src/components/Basic/src/BasicTitle.vue b/src/components/Basic/src/BasicTitle.vue index 4862c3ff..2484a7db 100644 --- a/src/components/Basic/src/BasicTitle.vue +++ b/src/components/Basic/src/BasicTitle.vue @@ -41,8 +41,8 @@ font-weight: 700; line-height: 24px; color: @text-color-base; - - .unselect(); + cursor: pointer; + user-select: none; &.show-span::before { position: absolute; diff --git a/src/components/SimpleMenu/src/components/menu.less b/src/components/SimpleMenu/src/components/menu.less index dce754cd..7fda2eca 100644 --- a/src/components/SimpleMenu/src/components/menu.less +++ b/src/components/SimpleMenu/src/components/menu.less @@ -41,10 +41,6 @@ cursor: pointer; transition: all @transition-time @ease-in-out; - // &:hover { - // color: @primary-color; - // } - &-icon { position: absolute; top: 50%; @@ -164,9 +160,10 @@ position: relative; z-index: 1; padding: 12px 24px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; cursor: pointer; - .text-truncate(); - // transition: all @transition-time @ease-in-out; &:hover { color: @primary-color; diff --git a/src/components/SimpleMenu/src/index.less b/src/components/SimpleMenu/src/index.less index f301ba95..5ef67015 100644 --- a/src/components/SimpleMenu/src/index.less +++ b/src/components/SimpleMenu/src/index.less @@ -18,15 +18,19 @@ } .collapse-title { + overflow: hidden; font-size: 12px; - .text-truncate(); + text-overflow: ellipsis; + white-space: nowrap; } } .@{simple-prefix-cls} { &-sub-title { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; transition: all 0.3s; - .text-truncate(); } &-tag { diff --git a/src/components/Upload/src/data.tsx b/src/components/Upload/src/data.tsx index 168d6a5d..d71d967f 100644 --- a/src/components/Upload/src/data.tsx +++ b/src/components/Upload/src/data.tsx @@ -40,7 +40,7 @@ export function createTableColumns(): BasicColumn[] { } return ( -

+

{text}

diff --git a/src/design/ant/input.less b/src/design/ant/input.less index 3763f1a0..3394205f 100644 --- a/src/design/ant/input.less +++ b/src/design/ant/input.less @@ -1,4 +1,3 @@ -@import '../mixins.less'; @import '../color.less'; // input diff --git a/src/design/config.less b/src/design/config.less index 22fded77..583aa1f4 100644 --- a/src/design/config.less +++ b/src/design/config.less @@ -1,3 +1,2 @@ @import 'color.less'; @import 'var/index.less'; -@import 'mixins.less'; diff --git a/src/design/global.less b/src/design/global.less deleted file mode 100644 index bc3bc2cb..00000000 --- a/src/design/global.less +++ /dev/null @@ -1,73 +0,0 @@ -@import './helper/distance.less'; -.distance(); - -.flex { - display: flex; -} - -.align-middle { - vertical-align: middle; -} - -.flex-wrap { - flex-wrap: wrap; -} - -.justify-center { - justify-content: center; -} - -.items-center { - align-items: center; -} - -.justify-start { - justify-content: flex-start; -} - -.justify-end { - justify-content: flex-end; -} - -.justify-around { - justify-content: space-around; -} - -.relative { - position: relative; -} - -.absolute { - position: absolute; -} - -.ellipsis { - overflow: hidden; - text-overflow: ellipsis; - word-wrap: normal; - white-space: nowrap; -} - -.shadow-xs { - box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05); -} - -.shadow-sm { - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); -} - -.shadow { - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); -} - -.shadow-md { - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); -} - -.shadow-lg { - box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); -} - -.shadow-xl { - box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); -} diff --git a/src/design/helper/distance.less b/src/design/helper/distance.less deleted file mode 100644 index de9e8b9f..00000000 --- a/src/design/helper/distance.less +++ /dev/null @@ -1,38 +0,0 @@ -@import 'loop.less'; -// margin 步长 -@margin-size-base: 4; - -// 最大生成 -@margin-size-max: 10; - -// padding步长 -@padding-size-base: 4; - -// 最大生成 -@padding-size-max: 10; - -.distance() { - // 生成margin - .loop (m, margin, 1, @margin-size-base, @margin-size-max); - .loop (mt, margin-top, 1, @margin-size-base, @margin-size-max); - .loop (mr, margin-right, 1, @margin-size-base, @margin-size-max); - .loop (mb, margin-bottom, 1, @margin-size-base, @margin-size-max); - .loop (ml, margin-left, 1, @margin-size-base, @margin-size-max); - .loop (my, margin, 1, @margin-size-base, @margin-size-max, y); - .loop (mx, margin, 1, @margin-size-base, @margin-size-max, x); - .loop (mx-auto, margin, 1, @padding-size-base, @padding-size-max, autoX); - .loop (my-auto, margin, 1, @padding-size-base, @padding-size-max, autoY); - .loop (m-auto, margin, 1, @padding-size-base, @padding-size-max, auto); - - // 生成padding - .loop (p, padding, 1, @padding-size-base, @padding-size-max); - .loop (pt, padding-top, 1, @padding-size-base, @padding-size-max); - .loop (pr, padding-right, 1, @padding-size-base, @padding-size-max); - .loop (pb, padding-bottom, 1, @padding-size-base, @padding-size-max); - .loop (pl, padding-left, 1, @padding-size-base, @padding-size-max); - .loop (py, padding, 1, @padding-size-base, @padding-size-max, y); - .loop (px, padding, 1, @padding-size-base, @padding-size-max, x); - .loop (px-auto, padding, 1, @padding-size-base, @padding-size-max, autoX); - .loop (py-auto, padding, 1, @padding-size-base, @padding-size-max, autoY); - .loop (p-auto, padding, 1, @padding-size-base, @padding-size-max, auto); -} diff --git a/src/design/helper/loop.less b/src/design/helper/loop.less deleted file mode 100644 index 62d02724..00000000 --- a/src/design/helper/loop.less +++ /dev/null @@ -1,67 +0,0 @@ -.loop (@style-name, @tag-name, @i,@base-size, @max:10,@xy:none) when (@i <= @max) { - @next: @i+1; - .fn() when (@xy =none) { - @size: @base-size * @i; - - .@{style-name}-@{i} { - @{tag-name}: ~'@{size}px '; - } - .loop(@style-name, @tag-name, @next, @base-size, @max, @xy); - } - - .fn() when (@xy =x) { - @size: @base-size * @i; - - @tnl: ~'@{tag-name}-left'; - @tnr: ~'@{tag-name}-right'; - - .@{style-name}-@{i} { - @{tnl}: ~'@{size}px'; - @{tnr}: ~'@{size}px'; - } - .loop(@style-name, @tag-name, @next, @base-size, @max, @xy); - } - .fn() when (@xy =y) { - @size: @base-size * @i; - - @tnt: ~'@{tag-name}-top'; - @tnb: ~'@{tag-name}-bottom'; - - .@{style-name}-@{i} { - @{tnt}: ~'@{size}px'; - @{tnb}: ~'@{size}px'; - } - .loop(@style-name, @tag-name, @next, @base-size, @max, @xy); - } - .fn() when (@xy =auto) { - @tnt: ~'@{tag-name}-top'; - @tnb: ~'@{tag-name}-bottom'; - @tnl: ~'@{tag-name}-left'; - @tnr: ~'@{tag-name}-right'; - .@{style-name} { - @{tnl}: ~'auto'; - @{tnr}: ~'auto'; - @{tnt}: ~'auto'; - @{tnb}: ~'auto'; - } - } - - .fn() when (@xy =autoX) { - @tnl: ~'@{tag-name}-left'; - @tnr: ~'@{tag-name}-right'; - .@{style-name} { - @{tnl}: ~'auto'; - @{tnr}: ~'auto'; - } - } - - .fn() when (@xy =autoY) { - @tnt: ~'@{tag-name}-top'; - @tnb: ~'@{tag-name}-bottom'; - .@{style-name} { - @{tnt}: ~'auto'; - @{tnb}: ~'auto'; - } - } - .fn(); -} diff --git a/src/design/index.less b/src/design/index.less index c06f9d09..eeaaa94c 100644 --- a/src/design/index.less +++ b/src/design/index.less @@ -1,9 +1,7 @@ @import 'transition/index.less'; @import 'var/index.less'; @import 'public.less'; -@import 'mixins.less'; @import 'ant/index.less'; -@import 'global.less'; *, *::before, diff --git a/src/design/mixins.less b/src/design/mixins.less deleted file mode 100644 index c7ddbedc..00000000 --- a/src/design/mixins.less +++ /dev/null @@ -1,85 +0,0 @@ -// Text truncation -.text-truncate() { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -/* Force no line break */ -.word-nowrap() { - word-wrap: normal; - white-space: nowrap; -} - -/* Force line break */ -.break-all() { - word-break: break-all; - word-wrap: break-word; - white-space: normal; -} - -// Prohibit selection -.unselect() { - cursor: pointer; - user-select: none; -} - -/* Suitable for webkit core and mobile */ -.ellipsis-multiple(@num: 1) { - display: -webkit-box; - overflow: hidden; - -webkit-box-orient: vertical; - -webkit-line-clamp: @num; -} - -.respond-to (small, @content) { - @media only screen and (min-width: @screen-sm-min) { - @content(); - } -} -.respond-to (medium, @content) { - @media only screen and (min-width: @screen-md-min) { - @content(); - } -} -.respond-to (large, @content) { - @media only screen and (min-width: @screen-lg-min) { - @content(); - } -} -.respond-to (xlarge, @content) { - @media only screen and (min-width: @screen-xl-min) { - @content(); - } -} -.respond-to (xsmall-only, @content) { - @media only screen and (max-width: @screen-xs-max) { - @content(); - } -} -.respond-to (small-only, @content) { - @media only screen and (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { - @content(); - } -} -.respond-to (medium-only, @content) { - @media only screen and (min-width: @screen-md-min) and (max-width: @screen-md-max) { - @content(); - } -} -.respond-to (large-only, @content) { - @media only screen and (min-width: @screen-lg-min) and (max-width: @screen-lg-max) { - @content(); - } -} - -.respond-to (xsmall-and-small, @content) { - @media only screen and (max-width: @screen-sm-max) { - @content(); - } -} -.respond-to (small-and-medium, @content) { - @media only screen and (min-width: @screen-sm-min) and (max-width: @screen-md-max) { - @content(); - } -} diff --git a/src/design/var/index.less b/src/design/var/index.less index 0ac42f08..8dcc562b 100644 --- a/src/design/var/index.less +++ b/src/design/var/index.less @@ -35,7 +35,7 @@ // left-menu @app-menu-item-height: 42px; -.bem(@n;@content) { +.bem(@n; @content) { @{namespace}-@{n} { @content(); } diff --git a/src/layouts/page/ParentView.vue b/src/layouts/page/ParentView.vue index 78cab4fe..246beeaa 100644 --- a/src/layouts/page/ParentView.vue +++ b/src/layouts/page/ParentView.vue @@ -3,7 +3,7 @@ -->