From 579938c2a79a4f9385ad33b73725a9683fd945f1 Mon Sep 17 00:00:00 2001 From: lbw Date: Mon, 5 Jun 2023 15:58:54 +0800 Subject: [PATCH] =?UTF-8?q?:recycle:=20=E4=BC=98=E5=8C=96css=20=E9=81=BF?= =?UTF-8?q?=E5=85=8D=E5=92=8Ctailwind=E5=86=B2=E7=AA=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/index.ts | 4 +- src/i18n/index.ts | 2 +- src/main.ts | 9 ++-- src/theme/element.scss | 5 -- tailwind.config.js | 115 ++-------------------------------------- 5 files changed, 12 insertions(+), 123 deletions(-) diff --git a/src/components/index.ts b/src/components/index.ts index 715b5461..a1c769a9 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,3 +1,4 @@ +import ElementIcons from '/@/components/SvgIcon/svgicon'; import Pagination from '/@/components/Pagination/index.vue'; import RightToolbar from '/@/components/RightToolbar/index.vue'; import DictTag from '/@/components/DictTag/index.vue'; @@ -5,5 +6,6 @@ import UploadExcel from '/@/components/Upload/Excel.vue'; import UploadFile from '/@/components/Upload/index.vue'; import UploadImg from '/@/components/Upload/Image.vue'; import Editor from '/@/components/Editor/index.vue'; +import Tip from '/@/components/Tip/index.vue'; -export { Pagination, RightToolbar, DictTag, UploadExcel, UploadFile, UploadImg, Editor }; +export { ElementIcons, Pagination, RightToolbar, DictTag, UploadExcel, UploadFile, UploadImg, Editor, Tip }; diff --git a/src/i18n/index.ts b/src/i18n/index.ts index d6dac3b9..12c06f70 100644 --- a/src/i18n/index.ts +++ b/src/i18n/index.ts @@ -93,7 +93,7 @@ try { i18n.global.mergeLocaleMessage('zh-cn', messageLocal['zh-cn']); i18n.global.mergeLocaleMessage('en', messageLocal['en']); i18n.global.locale.value = themeConfig.value.globalI18n; - }, 50); + }, 10); } catch (e) { // 考虑请求不过去没有后台的情况下导致的i18n失效 } diff --git a/src/main.ts b/src/main.ts index 6a1c9349..d24f9fa1 100644 --- a/src/main.ts +++ b/src/main.ts @@ -5,16 +5,14 @@ import router from './router'; import { directive } from '/@/directive'; import { i18n } from '/@/i18n'; import other from '/@/utils/other'; +import '/@/theme/index.scss'; import ElementPlus from 'element-plus'; import 'element-plus/dist/index.css'; - import VForm3 from 'form-designer-plus'; //引入VForm3库 import 'form-designer-plus/dist/designer.style.css'; //引入VForm3样式 -import elementIcons from '/@/components/SvgIcon/svgicon'; -import '/@/theme/index.scss'; -import { Pagination, RightToolbar, DictTag, UploadExcel, UploadFile, UploadImg, Editor } from '/@/components/index'; +import { ElementIcons, Pagination, RightToolbar, DictTag, UploadExcel, UploadFile, UploadImg, Editor, Tip } from '/@/components/index'; import { parseTime, parseDate, dateTimeStr, dateStr, timeStr } from '/@/utils/formatTime'; import 'highlight.js/styles/atom-one-dark.css'; import 'highlight.js/lib/common'; @@ -34,6 +32,7 @@ app.component('uploadExcel', UploadExcel); app.component('UploadFile', UploadFile); app.component('UploadImg', UploadImg); app.component('Editor', Editor); +app.component('Tip', Tip); // 导入布局插件 app.component('Splitpanes', Splitpanes); app.component('Pane', Pane); @@ -51,7 +50,7 @@ app .use(pinia) // pinia 存储 .use(router) // 路由 .use(ElementPlus, { i18n: i18n.global.t }) // ElementPlus 全局引入 - .use(elementIcons) // elementIcons 图标全局引入 + .use(ElementIcons) // elementIcons 图标全局引入 .use(VForm3) // 表单设计 .use(i18n) // 国际化 .use(hljsVuePlugin) // 代码高亮 diff --git a/src/theme/element.scss b/src/theme/element.scss index 45497218..5ef7413e 100644 --- a/src/theme/element.scss +++ b/src/theme/element.scss @@ -376,8 +376,3 @@ .el-empty { --el-empty-padding: 0 0 !important; } - -.el-button { - // 防止被tailwindcss默认样式覆盖 - background-color: var(--el-button-bg-color, var(--el-color-white)); -} diff --git a/tailwind.config.js b/tailwind.config.js index 3f094a07..0177e69a 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,115 +1,8 @@ /** @type {import('tailwindcss').Config} */ module.exports = { content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'], - theme: { - colors: { - white: 'var(--color-white)', - primary: { - DEFAULT: 'var(--el-color-primary)', - 'light-3': 'var(--el-color-primary-light-3)', - 'light-5': 'var(--el-color-primary-light-5)', - 'light-7': 'var(--el-color-primary-light-7)', - 'light-8': 'var(--el-color-primary-light-8)', - 'light-9': 'var(--el-color-primary-light-9)', - 'dark-2': 'var(--el-color-primary-dark-2)', - }, - success: 'var(--el-color-success)', - warning: 'var(--el-color-warning)', - danger: 'var(--el-color-danger)', - error: 'var(--el-color-error)', - info: 'var(--el-color-info)', - body: 'var(--el-bg-color)', - page: 'var(--el-bg-color-page)', - 'tx-primary': 'var(--el-text-color-primary)', - 'tx-regular': 'var(--el-text-color-regular)', - 'tx-secondary': 'var(--el-text-color-secondary)', - 'tx-placeholder': 'var(--el-text-color-placeholder)', - 'tx-disabled': 'var(--el-text-color-disabled)', - br: 'var(--el-border-color)', - 'br-light': 'var(--el-border-color-light)', - 'br-extra-light': 'var(--el-border-color-extra-light)', - 'br-dark': 'var( --el-border-color-dark)', - fill: 'var(--el-fill-color)', - 'fill-light': 'var(--el-fill-color-light)', - 'fill-lighter': 'var(--el-fill-color-lighter)', - mask: 'var(--el-mask-color)', - }, - fontFamily: { - sans: ['PingFang SC', 'Arial', 'Hiragino Sans GB', 'Microsoft YaHei', 'sans-serif'], - }, - boxShadow: { - DEFAULT: 'var(--el-box-shadow)', - light: 'var(--el-box-shadow-light)', - lighter: 'var(--el-box-shadow-lighter)', - dark: 'var(--el-box-shadow-dark)', - }, - fontSize: { - xs: 'var(--el-font-size-extra-small)', - sm: 'var( --el-font-size-small)', - base: 'var( --el-font-size-base)', - lg: 'var( --el-font-size-medium)', - xl: 'var( --el-font-size-large)', - '2xl': 'var( --el-font-size-extra-large)', - '3xl': '20px', - '4xl': '24px', - '5xl': '28px', - '6xl': '30px', - '7xl': '36px', - '8xl': '48px', - '9xl': '60px', - }, - spacing: { - px: '1px', - 0: '0px', - 0.5: '2px', - 1: '4px', - 1.5: '6px', - 2: '8px', - 2.5: '10px', - 3: '12px', - 3.5: '14px', - 4: '16px', - 5: '20px', - 6: '24px', - 7: '28px', - 8: '32px', - 9: '36px', - 10: '40px', - 11: '44px', - 12: '48px', - 14: '56px', - 16: '64px', - 20: '80px', - 24: '96px', - 28: '112px', - 32: '128px', - 36: '144px', - 40: '160px', - 44: '176px', - 48: '192px', - 52: '208px', - 56: '224px', - 60: '240px', - 64: '256px', - 72: '288px', - 80: '320px', - 96: '384px', - }, - lineHeight: { - none: '1', - tight: '1.25', - snug: '1.375', - normal: '1.5', - relaxed: '1.625', - loose: '2', - 3: '12px', - 4: '16px', - 5: '20px', - 6: '24px', - 7: '28px', - 8: '32px', - 9: '36px', - 10: '40px', - }, - } + corePlugins: { + // 不使用 tailwind 的基础样式 + preflight: false, + }, };