diff --git a/.vscode/settings.json b/.vscode/settings.json index 90adb164..86ae5732 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -122,11 +122,13 @@ "vben", "windi", "browserslist", + "tailwindcss", "esnext", "antv", "tinymce", "qrcode", "sider", - "pinia" + "pinia", + "sider" ] } diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md index e236c906..c25d4e3b 100644 --- a/CHANGELOG.zh_CN.md +++ b/CHANGELOG.zh_CN.md @@ -1,4 +1,11 @@ -## Wip +## 2.5.0(2021-06-20) + +## (破坏性更新) Breaking changes + +- 将项目`windicss`改为`tailwindcss`，解决内存溢出问题 + - 目前项目不兼容地方有 + - `!xl:m-4` 之类的写法需要改为`xl:!m-4`,注意只有`!`这个不兼容，没用到则不用改 + - `windicss`自身新增的特性需要调整，比如`Attribute`模式不兼容 ### ✨ Refactor diff --git a/build/vite/plugin/index.ts b/build/vite/plugin/index.ts index ce4e15fc..94ec6613 100644 --- a/build/vite/plugin/index.ts +++ b/build/vite/plugin/index.ts @@ -5,7 +5,6 @@ import vueJsx from '@vitejs/plugin-vue-jsx'; import legacy from '@vitejs/plugin-legacy'; import purgeIcons from 'vite-plugin-purge-icons'; -import windiCSS from 'vite-plugin-windicss'; import { configHtmlPlugin } from './html'; import { configPwaConfig } from './pwa'; @@ -46,9 +45,6 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) { // vite-plugin-svg-icons vitePlugins.push(configSvgIconsPlugin(isBuild)); - // vite-plugin-windicss - vitePlugins.push(windiCSS()); - // vite-plugin-mock VITE_USE_MOCK && vitePlugins.push(configMockPlugin(isBuild)); diff --git a/jest.config.mjs b/jest.config.mjs index 53091ac3..162e72b3 100644 --- a/jest.config.mjs +++ b/jest.config.mjs @@ -17,7 +17,6 @@ export default { ], transform: { '^.+\\.tsx?$': 'ts-jest', - '^.+\\.(vue)$': 'vue-jest', }, transformIgnorePatterns: ['/tests/__mocks__/', '/node_modules/'], // A map from regular expressions to module names that allow to stub out resources with a single module diff --git a/package.json b/package.json index d67c814d..ae2e6942 100644 --- a/package.json +++ b/package.json @@ -87,9 +87,8 @@ "@vitejs/plugin-vue": "^1.2.3", "@vitejs/plugin-vue-jsx": "^1.1.5", "@vue/compiler-sfc": "3.0.11", - "@vue/test-utils": "^2.0.0-rc.6", + "@vue/test-utils": "^2.0.0-rc.7", "autoprefixer": "^10.2.6", - "babel-jest": "^27.0.2", "commitizen": "^4.2.4", "conventional-changelog-cli": "^2.1.1", "cross-env": "^7.0.3", @@ -109,6 +108,7 @@ "jest": "^27.0.4", "less": "^4.1.1", "lint-staged": "^11.0.0", + "npm-run-all": "^4.1.5", "postcss": "^8.3.5", "prettier": "^2.3.1", "pretty-quick": "^3.1.1", @@ -118,10 +118,11 @@ "stylelint-config-prettier": "^8.0.2", "stylelint-config-standard": "^22.0.0", "stylelint-order": "^4.1.0", + "tailwindcss": "^2.2.2", "ts-jest": "^27.0.3", "ts-node": "^10.0.0", "typescript": "4.3.4", - "vite": "2.3.7", + "vite": "2.3.8", "vite-plugin-compression": "^0.2.5", "vite-plugin-html": "^2.0.7", "vite-plugin-imagemin": "^0.3.2", @@ -131,9 +132,7 @@ "vite-plugin-style-import": "^1.0.0", "vite-plugin-svg-icons": "^0.7.1", "vite-plugin-theme": "^0.8.1", - "vite-plugin-windicss": "^1.0.4", "vue-eslint-parser": "^7.6.0", - "vue-jest": "^5.0.0-alpha.10", "vue-tsc": "^0.1.7" }, "resolutions": { diff --git a/postcss.config.js b/postcss.config.js index a47ef4f9..12a703d9 100755 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,5 +1,6 @@ module.exports = { plugins: { + tailwindcss: {}, autoprefixer: {}, }, }; diff --git a/src/design/tailwind.css b/src/design/tailwind.css new file mode 100644 index 00000000..254f058f --- /dev/null +++ b/src/design/tailwind.css @@ -0,0 +1,1742 @@ +/*! tailwindcss v2.2.0 | MIT License | https://tailwindcss.com */ + +/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */ + +/* +Document +======== +*/ + +/** +Use a better box model (opinionated). +*/ + +*, +::before, +::after { + box-sizing: border-box; +} + +/** +Use a more readable tab size (opinionated). +*/ + +html { + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; +} + +/** +1. Correct the line height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +*/ + +html { + line-height: 1.15; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ +} + +/* +Sections +======== +*/ + +/** +Remove the margin in all browsers. +*/ + +body { + margin: 0; +} + +/** +Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) +*/ + +body { + font-family: system-ui, -apple-system, + /* Firefox supports this but not yet `system-ui` */ 'Segoe UI', Roboto, Helvetica, Arial, + sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; +} + +/* +Grouping content +================ +*/ + +/** +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ +} + +/* +Text-level semantics +==================== +*/ + +/** +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr[title] { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/** +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/** +1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) +2. Correct the odd 'em' font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/** +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/** +Prevent 'sub' and 'sup' elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +Tabular data +============ +*/ + +/** +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ +} + +/* +Forms +===== +*/ + +/** +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + line-height: 1.15; + /* 1 */ + margin: 0; + /* 2 */ +} + +/** +Remove the inheritance of text transform in Edge and Firefox. +1. Remove the inheritance of text transform in Firefox. +*/ + +button, +select { + /* 1 */ + text-transform: none; +} + +/** +Correct the inability to style clickable types in iOS and Safari. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; +} + +/** +Remove the inner border and padding in Firefox. +*/ + +::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** +Restore the focus styles unset by the previous rule. +*/ + +:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** +Remove the additional ':invalid' styles in Firefox. +See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737 +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/** +Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers. +*/ + +legend { + padding: 0; +} + +/** +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/** +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/** +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/** +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to 'inherit' in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Interactive +=========== +*/ + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/** + * Manually forked from SUIT CSS Base: https://github.com/suitcss/base + * A thin layer on top of normalize.css that provides a starting point more + * suitable for web applications. + */ + +/** + * Removes the default spacing and border for appropriate elements. + */ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +button { + background-color: transparent; + background-image: none; +} + +/** + * Work around a Firefox/IE bug where the transparent `button` background + * results in a loss of the default `button` focus styles. + */ + +button:focus { + outline: 1px dotted; + outline: 5px auto -webkit-focus-ring-color; +} + +fieldset { + margin: 0; + padding: 0; +} + +ol, +ul { + list-style: none; + margin: 0; + padding: 0; +} + +/** + * Tailwind custom reset styles + */ + +/** + * 1. Use the user's configured `sans` font-family (with Tailwind's default + * sans-serif font stack as a fallback) as a sane default. + * 2. Use Tailwind's default "normal" line-height so the user isn't forced + * to override it to ensure consistency even when using the default theme. + */ + +html { + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, + 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', + 'Segoe UI Symbol', 'Noto Color Emoji'; + /* 1 */ + line-height: 1.5; + /* 2 */ +} + +/** + * Inherit font-family and line-height from `html` so users can set them as + * a class directly on the `html` element. + */ + +body { + font-family: inherit; + line-height: inherit; +} + +/** + * 1. Prevent padding and border from affecting element width. + * + * We used to set this in the html element and inherit from + * the parent element for everything else. This caused issues + * in shadow-dom-enhanced elements like
where the content + * is wrapped by a div with box-sizing set to `content-box`. + * + * https://github.com/mozdevs/cssremedy/issues/4 + * + * + * 2. Allow adding a border to an element by just adding a border-width. + * + * By default, the way the browser specifies that an element should have no + * border is by setting it's border-style to `none` in the user-agent + * stylesheet. + * + * In order to easily add borders to elements by just setting the `border-width` + * property, we change the default border-style for all elements to `solid`, and + * use border-width to hide them instead. This way our `border` utilities only + * need to set the `border-width` property instead of the entire `border` + * shorthand, making our border utilities much more straightforward to compose. + * + * https://github.com/tailwindcss/tailwindcss/pull/116 + */ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: currentColor; + /* 2 */ +} + +/* + * Ensure horizontal rules are visible by default + */ + +hr { + border-top-width: 1px; +} + +/** + * Undo the `border-style: none` reset that Normalize applies to images so that + * our `border-{width}` utilities have the expected effect. + * + * The Normalize reset is unnecessary for us since we default the border-width + * to 0 on all elements. + * + * https://github.com/tailwindcss/tailwindcss/issues/362 + */ + +img { + border-style: solid; +} + +textarea { + resize: vertical; +} + +input::-moz-placeholder, +textarea::-moz-placeholder { + opacity: 1; + color: #a1a1aa; +} + +input:-ms-input-placeholder, +textarea:-ms-input-placeholder { + opacity: 1; + color: #a1a1aa; +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + color: #a1a1aa; +} + +button, +[role='button'] { + cursor: pointer; +} + +table { + border-collapse: collapse; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/** + * Reset links to optimize for opt-in styling instead of + * opt-out. + */ + +a { + color: inherit; + text-decoration: inherit; +} + +/** + * Reset form element properties that are easy to forget to + * style explicitly so you don't inadvertently introduce + * styles that deviate from your design system. These styles + * supplement a partial reset that is already applied by + * normalize.css. + */ + +button, +input, +optgroup, +select, +textarea { + padding: 0; + line-height: inherit; + color: inherit; +} + +/** + * Use the configured 'mono' font family for elements that + * are expected to be rendered with a monospace font, falling + * back to the system monospace stack if there is no configured + * 'mono' font family. + */ + +pre, +code, +kbd, +samp { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', + 'Courier New', monospace; +} + +/** + * 1. Make replaced elements `display: block` by default as that's + * the behavior you want almost all of the time. Inspired by + * CSS Remedy, with `svg` added as well. + * + * https://github.com/mozdevs/cssremedy/issues/14 + * + * 2. Add `vertical-align: middle` to align replaced elements more + * sensibly by default when overriding `display` by adding a + * utility like `inline`. + * + * This can trigger a poorly considered linting error in some + * tools but is included by design. + * + * https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210 + */ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/** + * Constrain images and videos to the parent width and preserve + * their intrinsic aspect ratio. + * + * https://github.com/mozdevs/cssremedy/issues/14 + */ + +img, +video { + max-width: 100%; + height: auto; +} + +*, +::before, +::after { + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) + rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) + scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + --tw-border-opacity: 1; + border-color: rgba(228, 228, 231, var(--tw-border-opacity)); + --tw-shadow: 0 0 #0000; + --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/); + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgba(59, 130, 246, 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-blur: var(--tw-empty, /*!*/ /*!*/); + --tw-brightness: var(--tw-empty, /*!*/ /*!*/); + --tw-contrast: var(--tw-empty, /*!*/ /*!*/); + --tw-grayscale: var(--tw-empty, /*!*/ /*!*/); + --tw-hue-rotate: var(--tw-empty, /*!*/ /*!*/); + --tw-invert: var(--tw-empty, /*!*/ /*!*/); + --tw-saturate: var(--tw-empty, /*!*/ /*!*/); + --tw-sepia: var(--tw-empty, /*!*/ /*!*/); + --tw-drop-shadow: var(--tw-empty, /*!*/ /*!*/); + --tw-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); + --tw-backdrop-blur: var(--tw-empty, /*!*/ /*!*/); + --tw-backdrop-brightness: var(--tw-empty, /*!*/ /*!*/); + --tw-backdrop-contrast: var(--tw-empty, /*!*/ /*!*/); + --tw-backdrop-grayscale: var(--tw-empty, /*!*/ /*!*/); + --tw-backdrop-hue-rotate: var(--tw-empty, /*!*/ /*!*/); + --tw-backdrop-invert: var(--tw-empty, /*!*/ /*!*/); + --tw-backdrop-opacity: var(--tw-empty, /*!*/ /*!*/); + --tw-backdrop-saturate: var(--tw-empty, /*!*/ /*!*/); + --tw-backdrop-sepia: var(--tw-empty, /*!*/ /*!*/); + --tw-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) + var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) + var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) + var(--tw-backdrop-sepia); +} + +* > .enter-x:nth-child(1) { + transform: translateX(50px); +} + +* > .-enter-x:nth-child(1) { + transform: translateX(-50px); +} + +* > .enter-x:nth-child(1), +* > .-enter-x:nth-child(1) { + z-index: 9; + opacity: 0; + -webkit-animation: enter-x-animation 0.4s ease-in-out 0.3s; + animation: enter-x-animation 0.4s ease-in-out 0.3s; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + -webkit-animation-delay: 0.1s; + animation-delay: 0.1s; +} + +* > .enter-y:nth-child(1) { + transform: translateY(50px); +} + +* > .enter-y:nth-child(1), +* > .-enter-y:nth-child(1) { + z-index: 9; + opacity: 0; + -webkit-animation: enter-y-animation 0.4s ease-in-out 0.3s; + animation: enter-y-animation 0.4s ease-in-out 0.3s; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + -webkit-animation-delay: 0.1s; + animation-delay: 0.1s; +} + +* > .enter-x:nth-child(2) { + transform: translateX(50px); +} + +* > .-enter-x:nth-child(2) { + transform: translateX(-50px); +} + +* > .enter-x:nth-child(2), +* > .-enter-x:nth-child(2) { + z-index: 8; + opacity: 0; + -webkit-animation: enter-x-animation 0.4s ease-in-out 0.3s; + animation: enter-x-animation 0.4s ease-in-out 0.3s; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + -webkit-animation-delay: 0.2s; + animation-delay: 0.2s; +} + +* > .enter-y:nth-child(2) { + transform: translateY(50px); +} + +* > .enter-y:nth-child(2), +* > .-enter-y:nth-child(2) { + z-index: 8; + opacity: 0; + -webkit-animation: enter-y-animation 0.4s ease-in-out 0.3s; + animation: enter-y-animation 0.4s ease-in-out 0.3s; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + -webkit-animation-delay: 0.2s; + animation-delay: 0.2s; +} + +* > .enter-x:nth-child(3) { + transform: translateX(50px); +} + +* > .-enter-x:nth-child(3) { + transform: translateX(-50px); +} + +* > .enter-x:nth-child(3), +* > .-enter-x:nth-child(3) { + z-index: 7; + opacity: 0; + -webkit-animation: enter-x-animation 0.4s ease-in-out 0.3s; + animation: enter-x-animation 0.4s ease-in-out 0.3s; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + -webkit-animation-delay: 0.3s; + animation-delay: 0.3s; +} + +* > .enter-y:nth-child(3) { + transform: translateY(50px); +} + +* > .enter-y:nth-child(3), +* > .-enter-y:nth-child(3) { + z-index: 7; + opacity: 0; + -webkit-animation: enter-y-animation 0.4s ease-in-out 0.3s; + animation: enter-y-animation 0.4s ease-in-out 0.3s; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + -webkit-animation-delay: 0.3s; + animation-delay: 0.3s; +} + +* > .enter-x:nth-child(4) { + transform: translateX(50px); +} + +* > .-enter-x:nth-child(4) { + transform: translateX(-50px); +} + +* > .enter-x:nth-child(4), +* > .-enter-x:nth-child(4) { + z-index: 6; + opacity: 0; + -webkit-animation: enter-x-animation 0.4s ease-in-out 0.3s; + animation: enter-x-animation 0.4s ease-in-out 0.3s; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + -webkit-animation-delay: 0.4s; + animation-delay: 0.4s; +} + +* > .enter-y:nth-child(4) { + transform: translateY(50px); +} + +* > .enter-y:nth-child(4), +* > .-enter-y:nth-child(4) { + z-index: 6; + opacity: 0; + -webkit-animation: enter-y-animation 0.4s ease-in-out 0.3s; + animation: enter-y-animation 0.4s ease-in-out 0.3s; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + -webkit-animation-delay: 0.4s; + animation-delay: 0.4s; +} + +* > .enter-x:nth-child(5) { + transform: translateX(50px); +} + +* > .-enter-x:nth-child(5) { + transform: translateX(-50px); +} + +* > .enter-x:nth-child(5), +* > .-enter-x:nth-child(5) { + z-index: 5; + opacity: 0; + -webkit-animation: enter-x-animation 0.4s ease-in-out 0.3s; + animation: enter-x-animation 0.4s ease-in-out 0.3s; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + -webkit-animation-delay: 0.5s; + animation-delay: 0.5s; +} + +* > .enter-y:nth-child(5) { + transform: translateY(50px); +} + +* > .enter-y:nth-child(5), +* > .-enter-y:nth-child(5) { + z-index: 5; + opacity: 0; + -webkit-animation: enter-y-animation 0.4s ease-in-out 0.3s; + animation: enter-y-animation 0.4s ease-in-out 0.3s; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + -webkit-animation-delay: 0.5s; + animation-delay: 0.5s; +} + +@-webkit-keyframes enter-x-animation { + to { + opacity: 1; + transform: translateX(0); + } +} + +@keyframes enter-x-animation { + to { + opacity: 1; + transform: translateX(0); + } +} + +@-webkit-keyframes enter-y-animation { + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes enter-y-animation { + to { + opacity: 1; + transform: translateY(0); + } +} + +.container { + width: 100%; +} + +@media (min-width: 576px) { + .container { + max-width: 576px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} + +@media (min-width: 992px) { + .container { + max-width: 992px; + } +} + +@media (min-width: 1200px) { + .container { + max-width: 1200px; + } +} + +@media (min-width: 1600px) { + .container { + max-width: 1600px; + } +} + +.visible { + visibility: visible; +} + +.invisible { + visibility: hidden; +} + +.static { + position: static; +} + +.fixed { + position: fixed; +} + +.absolute { + position: absolute; +} + +.relative { + position: relative; +} + +.inset-0 { + top: 0px; + right: 0px; + bottom: 0px; + left: 0px; +} + +.top-0 { + top: 0px; +} + +.left-1\/2 { + left: 50%; +} + +.left-5 { + left: 1.25rem; +} + +.top-5 { + top: 1.25rem; +} + +.bottom-5 { + bottom: 1.25rem; +} + +.top-4 { + top: 1rem; +} + +.right-4 { + right: 1rem; +} + +.top-3 { + top: 0.75rem; +} + +.right-7 { + right: 1.75rem; +} + +.m-3 { + margin: 0.75rem; +} + +.m-10 { + margin: 2.5rem; +} + +.m-4 { + margin: 1rem; +} + +.m-5 { + margin: 1.25rem; +} + +.mx-auto { + margin-left: auto; + margin-right: auto; +} + +.\!my-4 { + margin-top: 1rem !important; + margin-bottom: 1rem !important; +} + +.mx-4 { + margin-left: 1rem; + margin-right: 1rem; +} + +.my-4 { + margin-top: 1rem; + margin-bottom: 1rem; +} + +.my-auto { + margin-top: auto; + margin-bottom: auto; +} + +.\!my-2 { + margin-top: 0.5rem !important; + margin-bottom: 0.5rem !important; +} + +.mx-1 { + margin-left: 0.25rem; + margin-right: 0.25rem; +} + +.my-3 { + margin-top: 0.75rem; + margin-bottom: 0.75rem; +} + +.\!mx-auto { + margin-left: auto !important; + margin-right: auto !important; +} + +.mx-12 { + margin-left: 3rem; + margin-right: 3rem; +} + +.my-2 { + margin-top: 0.5rem; + margin-bottom: 0.5rem; +} + +.my-5 { + margin-top: 1.25rem; + margin-bottom: 1.25rem; +} + +.mx-2 { + margin-left: 0.5rem; + margin-right: 0.5rem; +} + +.ml-1 { + margin-left: 0.25rem; +} + +.ml-2 { + margin-left: 0.5rem; +} + +.mr-2 { + margin-right: 0.5rem; +} + +.mr-1 { + margin-right: 0.25rem; +} + +.mt-1 { + margin-top: 0.25rem; +} + +.mt-2 { + margin-top: 0.5rem; +} + +.\!mt-4 { + margin-top: 1rem !important; +} + +.mb-1 { + margin-bottom: 0.25rem; +} + +.\!mr-4 { + margin-right: 1rem !important; +} + +.mt-4 { + margin-top: 1rem; +} + +.mb-4 { + margin-bottom: 1rem; +} + +.mt-5 { + margin-top: 1.25rem; +} + +.mt-10 { + margin-top: 2.5rem; +} + +.ml-4 { + margin-left: 1rem; +} + +.mr-5 { + margin-right: 1.25rem; +} + +.mr-4 { + margin-right: 1rem; +} + +.-mt-16 { + margin-top: -4rem; +} + +.mb-6 { + margin-bottom: 1.5rem; +} + +.mr-10 { + margin-right: 2.5rem; +} + +.mb-2 { + margin-bottom: 0.5rem; +} + +.mr-0 { + margin-right: 0px; +} + +.\!ml-4 { + margin-left: 1rem !important; +} + +.ml-5 { + margin-left: 1.25rem; +} + +.block { + display: block; +} + +.\!block { + display: block !important; +} + +.inline-block { + display: inline-block; +} + +.inline { + display: inline; +} + +.flex { + display: flex; +} + +.inline-flex { + display: inline-flex; +} + +.table { + display: table; +} + +.\!table { + display: table !important; +} + +.grid { + display: grid; +} + +.contents { + display: contents; +} + +.list-item { + display: list-item; +} + +.hidden { + display: none; +} + +.h-full { + height: 100%; +} + +.h-20 { + height: 5rem; +} + +.h-screen { + height: 100vh; +} + +.h-16 { + height: 4rem; +} + +.h-2\/5 { + height: 40%; +} + +.\!h-full { + height: 100% !important; +} + +.h-10 { + height: 2.5rem; +} + +.h-32 { + height: 8rem; +} + +.h-64 { + height: 16rem; +} + +.max-h-80 { + max-height: 20rem; +} + +.min-h-full { + min-height: 100%; +} + +.w-full { + width: 100%; +} + +.w-2\/3 { + width: 66.666667%; +} + +.w-1\/3 { + width: 33.333333%; +} + +.w-screen { + width: 100vw; +} + +.w-2\/5 { + width: 40%; +} + +.w-1\/2 { + width: 50%; +} + +.\!w-full { + width: 100% !important; +} + +.w-12 { + width: 3rem; +} + +.w-1\/4 { + width: 25%; +} + +.w-3\/4 { + width: 75%; +} + +.flex-1 { + flex: 1 1 0%; +} + +.flex-shrink { + flex-shrink: 1; +} + +.flex-grow-0 { + flex-grow: 0; +} + +.border-collapse { + border-collapse: collapse; +} + +.translate-x-1\/2 { + --tw-translate-x: 50%; + transform: var(--tw-transform); +} + +.cursor-pointer { + cursor: pointer; +} + +.cursor-not-allowed { + cursor: not-allowed; +} + +.resize { + resize: both; +} + +.flex-col { + flex-direction: column; +} + +.flex-wrap { + flex-wrap: wrap; +} + +.items-center { + align-items: center; +} + +.justify-end { + justify-content: flex-end; +} + +.justify-center { + justify-content: center; +} + +.justify-between { + justify-content: space-between; +} + +.justify-around { + justify-content: space-around; +} + +.justify-evenly { + justify-content: space-evenly; +} + +.overflow-auto { + overflow: auto; +} + +.overflow-hidden { + overflow: hidden; +} + +.truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.rounded-md { + border-radius: 0.375rem; +} + +.border { + border-width: 1px; +} + +.\!border { + border-width: 1px !important; +} + +.border-t-0 { + border-top-width: 0px; +} + +.border-solid { + border-style: solid; +} + +.border-primary { + --tw-border-opacity: 1; + border-color: rgba(9, 96, 189, var(--tw-border-opacity)); +} + +.bg-black { + --tw-bg-opacity: 1; + background-color: rgba(0, 0, 0, var(--tw-bg-opacity)); +} + +.bg-gray-700 { + --tw-bg-opacity: 1; + background-color: rgba(63, 63, 70, var(--tw-bg-opacity)); +} + +.bg-white { + --tw-bg-opacity: 1; + background-color: rgba(255, 255, 255, var(--tw-bg-opacity)); +} + +.p-2 { + padding: 0.5rem; +} + +.p-5 { + padding: 1.25rem; +} + +.p-4 { + padding: 1rem; +} + +.p-1 { + padding: 0.25rem; +} + +.p-3 { + padding: 0.75rem; +} + +.p-10 { + padding: 2.5rem; +} + +.px-4 { + padding-left: 1rem; + padding-right: 1rem; +} + +.px-2 { + padding-left: 0.5rem; + padding-right: 0.5rem; +} + +.py-1 { + padding-top: 0.25rem; + padding-bottom: 0.25rem; +} + +.py-2 { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.py-1\.5 { + padding-top: 0.375rem; + padding-bottom: 0.375rem; +} + +.py-5 { + padding-top: 1.25rem; + padding-bottom: 1.25rem; +} + +.px-5 { + padding-left: 1.25rem; + padding-right: 1.25rem; +} + +.py-8 { + padding-top: 2rem; + padding-bottom: 2rem; +} + +.py-4 { + padding-top: 1rem; + padding-bottom: 1rem; +} + +.pl-2 { + padding-left: 0.5rem; +} + +.pt-5 { + padding-top: 1.25rem; +} + +.pl-4 { + padding-left: 1rem; +} + +.pt-4 { + padding-top: 1rem; +} + +.text-center { + text-align: center; +} + +.text-right { + text-align: right; +} + +.text-4xl { + font-size: 2.25rem; + line-height: 2.5rem; +} + +.text-5xl { + font-size: 3rem; + line-height: 1; +} + +.text-3xl { + font-size: 1.875rem; + line-height: 2.25rem; +} + +.text-2xl { + font-size: 1.5rem; + line-height: 2rem; +} + +.text-lg { + font-size: 1.125rem; + line-height: 1.75rem; +} + +.font-medium { + font-weight: 500; +} + +.font-normal { + font-weight: 400; +} + +.font-bold { + font-weight: 700; +} + +.uppercase { + text-transform: uppercase; +} + +.italic { + font-style: italic; +} + +.text-white { + --tw-text-opacity: 1; + color: rgba(255, 255, 255, var(--tw-text-opacity)); +} + +.text-gray-300 { + --tw-text-opacity: 1; + color: rgba(212, 212, 216, var(--tw-text-opacity)); +} + +.text-primary { + --tw-text-opacity: 1; + color: rgba(9, 96, 189, var(--tw-text-opacity)); +} + +.underline { + text-decoration: underline; +} + +.shadow { + --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} + +.shadow-md { + --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} + +.blur { + --tw-blur: blur(8px); + filter: var(--tw-filter); +} + +.transition { + transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, + transform, filter, -webkit-backdrop-filter; + transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, + transform, filter, backdrop-filter; + transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, + transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.hover\:border-primary:hover { + --tw-border-opacity: 1; + border-color: rgba(9, 96, 189, var(--tw-border-opacity)); +} + +@media (min-width: 576px) { + .sm\:w-3\/4 { + width: 75%; + } + + .sm\:px-10 { + padding-left: 2.5rem; + padding-right: 2.5rem; + } + + .sm\:px-8 { + padding-left: 2rem; + padding-right: 2rem; + } +} + +@media (min-width: 768px) { + .md\:\!mx-4 { + margin-left: 1rem !important; + margin-right: 1rem !important; + } + + .md\:\!my-0 { + margin-top: 0px !important; + margin-bottom: 0px !important; + } + + .md\:mx-2 { + margin-left: 0.5rem; + margin-right: 0.5rem; + } + + .md\:mx-16 { + margin-left: 4rem; + margin-right: 4rem; + } + + .md\:mr-20 { + margin-right: 5rem; + } + + .md\:\!mt-0 { + margin-top: 0px !important; + } + + .md\:\!mr-4 { + margin-right: 1rem !important; + } + + .md\:ml-6 { + margin-left: 1.5rem; + } + + .md\:mt-0 { + margin-top: 0px; + } + + .md\:mr-10 { + margin-right: 2.5rem; + } + + .md\:block { + display: block; + } + + .md\:flex { + display: flex; + } + + .md\:h-4\/5 { + height: 80%; + } + + .md\:w-1\/3 { + width: 33.333333%; + } + + .md\:w-1\/4 { + width: 25%; + } + + .md\:\!w-1\/3 { + width: 33.333333% !important; + } + + .md\:text-lg { + font-size: 1.125rem; + line-height: 1.75rem; + } + + .md\:opacity-100 { + opacity: 1; + } +} + +@media (min-width: 992px) { + .lg\:flex { + display: flex; + } + + .lg\:w-2\/4 { + width: 50%; + } +} + +@media (min-width: 1200px) { + .xl\:my-0 { + margin-top: 0px; + margin-bottom: 0px; + } + + .xl\:ml-20 { + margin-left: 5rem; + } + + .xl\:flex { + display: flex; + } + + .xl\:hidden { + display: none; + } + + .xl\:h-auto { + height: auto; + } + + .xl\:w-6\/12 { + width: 50%; + } + + .xl\:w-auto { + width: auto; + } + + .xl\:w-1\/5 { + width: 20%; + } + + .xl\:w-4\/5 { + width: 80%; + } + + .xl\:flex-col { + flex-direction: column; + } + + .xl\:justify-start { + justify-content: flex-start; + } + + .xl\:p-4 { + padding: 1rem; + } + + .xl\:py-0 { + padding-top: 0px; + padding-bottom: 0px; + } + + .xl\:text-left { + text-align: left; + } + + .xl\:text-xl { + font-size: 1.25rem; + line-height: 1.75rem; + } + + .xl\:text-3xl { + font-size: 1.875rem; + line-height: 2.25rem; + } + + .xl\:text-gray-600 { + --tw-text-opacity: 1; + color: rgba(82, 82, 91, var(--tw-text-opacity)); + } + + .xl\:shadow-none { + --tw-shadow: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); + } +} + +@media (min-width: 1600px) { + .\32xl\:text-3xl { + font-size: 1.875rem; + line-height: 2.25rem; + } +} diff --git a/src/main.ts b/src/main.ts index 992480ac..e2134a2a 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,7 +1,6 @@ import '/@/design/index.less'; +import '/@/design/tailwind.css'; -// Register windi -import 'virtual:windi.css'; // Register icon sprite import 'virtual:svg-icons-register'; diff --git a/src/utils/mitt.ts b/src/utils/mitt.ts index bb5f03d1..9a6ea526 100644 --- a/src/utils/mitt.ts +++ b/src/utils/mitt.ts @@ -27,6 +27,7 @@ export interface Emitter { emit(type: EventType, event?: T): void; emit(type: '*', event?: any): void; + clear(): void; } /** @@ -88,5 +89,12 @@ export default function mitt(all?: EventHandlerMap): Emitter { handler(type, evt); }); }, + + /** + * Clear all + */ + clear() { + this.all.clear(); + }, }; } diff --git a/src/views/dashboard/analysis/components/GrowCard.vue b/src/views/dashboard/analysis/components/GrowCard.vue index 5c1c5dea..b6976283 100644 --- a/src/views/dashboard/analysis/components/GrowCard.vue +++ b/src/views/dashboard/analysis/components/GrowCard.vue @@ -5,8 +5,8 @@ size="small" :loading="$attrs.loading" :title="item.title" - class="md:w-1/4 w-full !md:mt-0 !mt-4" - :class="[index + 1 < 4 && '!md:mr-4']" + class="md:w-1/4 w-full md:!mt-0 !mt-4" + :class="[index + 1 < 4 && 'md:!mr-4']" :canExpan="false" >