twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-06-04 07:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: use tailwindcss replace unocss (#342)

Browse Source 
* refactor: use `tailwindcss` replace `unocss`

* fix: update
This commit is contained in:
RealityBoy 2022-09-07 15:07:01 +08:00 committed by GitHub
parent 4dfde1bea6
commit 3683bd46a4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
57 changed files with 550 additions and 808 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.eslintignore
View File

@ -1,4 +1,10 @@
public
dist
*.d.ts
package.json
package.json
.eslintrc.js
.prettierrc.js
commitlint.config.js
postcss.config.js
tailwind.config.js
stylelint.config.js

2
.vscode/extensions.json vendored
View File

@ -3,13 +3,13 @@
"vscode-icons-team.vscode-icons",
"davidanson.vscode-markdownlint",
"stylelint.vscode-stylelint",
"bradlc.vscode-tailwindcss",
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode",
"lokalise.i18n-ally",
"mikestead.dotenv",
"eamodio.gitlens",
"antfu.iconify",
"antfu.unocss",
"Vue.volar"
]
}

2
build/plugins.ts
View File

@ -1,5 +1,4 @@
import { resolve } from "path";
import Unocss from "unocss/vite";
import vue from "@vitejs/plugin-vue";
import { viteBuildInfo } from "./info";
import svgLoader from "vite-svg-loader";
@ -26,7 +25,6 @@ export function getPluginsList(command, VITE_LEGACY) {
}),
// jsx、tsx语法支持
vueJsx(),
Unocss(),
DefineOptions(),
// 线上环境删除console
removeConsole({ external: ["src/assets/iconfont/iconfont.js"] }),

8
package.json
View File

@ -13,8 +13,8 @@
"typecheck": "tsc --noEmit && vue-tsc --noEmit --skipLibCheck",
"cloc": "cross-env --max_old_space_size=4096 cloc . --exclude-dir=node_modules --exclude-lang=YAML",
"clean:cache": "rm -rf node_modules && rm -rf .eslintcache && pnpm install",
"lint:eslint": "eslint --cache --max-warnings 0 \"{src,mock}/**/*.{vue,ts,tsx}\" --fix",
"lint:prettier": "prettier --write \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
"lint:eslint": "eslint --cache --max-warnings 0 \"{src,mock,build}/**/*.{vue,js,ts,tsx}\" --fix",
"lint:prettier": "prettier --write \"src/**/*.{js,ts,json,tsx,css,less,scss,vue,html,md}\"",
"lint:stylelint": "stylelint --cache --fix \"**/*.{vue,css,scss,postcss,less}\" --cache --cache-location node_modules/.cache/stylelint/",
"lint:lint-staged": "lint-staged -c ./.husky/lintstagedrc.js",
"lint:pretty": "pretty-quick --staged",
@ -128,7 +128,7 @@
"picocolors": "^1.0.0",
"postcss": "^8.4.16",
"postcss-html": "^1.5.0",
"postcss-import": "^14.1.0",
"postcss-import": "^15.0.0",
"postcss-scss": "^4.0.4",
"prettier": "^2.5.1",
"pretty-quick": "3.1.1",
@ -142,9 +142,9 @@
"stylelint-config-recommended": "^6.0.0",
"stylelint-config-standard": "^24.0.0",
"stylelint-order": "^5.0.0",
"tailwindcss": "^3.1.8",
"terser": "^5.15.0",
"typescript": "^4.7.4",
"unocss": "^0.45.15",
"unplugin-vue-define-options": "0.7.3",
"vite": "^3.1.0",
"vite-plugin-mock": "^2.9.6",

1005
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

6
postcss.config.js
View File

@ -1,3 +1,7 @@
module.exports = {
plugins: [require("autoprefixer"), require("postcss-import")]
plugins: {
"postcss-import": {},
tailwindcss: {},
autoprefixer: {}
}
};

2
src/components/ReFlowChart/src/Control.vue
View File

@ -102,7 +102,7 @@ onMounted(() => {
v-for="(item, key) in titleLists"
:key="key"
:title="item.text"
class="dark:color-bg_color"
class="dark:text-bg_color"
@mouseenter.prevent="onEnter(key)"
@mouseleave.prevent="focusIndex = -1"
>

2
src/components/ReFlowChart/src/NodePanel.vue
View File

@ -35,7 +35,7 @@ const nodeDragNode = item => {
<!-- 左侧bpmn元素选择器 -->
<div class="node-panel">
<div
class="node-item dark:color-bg_color"
class="node-item dark:text-bg_color"
v-for="item in props.nodeList"
:key="item.text"
@mousedown="nodeDragNode(item)"

8
src/components/ReIcon/src/Select.vue
View File

@ -118,7 +118,7 @@ watch(
</script>
<template>
<div class="selector w-350px">
<div class="selector w-[350px]">
<el-input v-model="inputValue" disabled>
<template #append>
<el-popover
@ -132,7 +132,7 @@ watch(
>
<template #reference>
<div
class="w-40px h-32px cursor-pointer flex justify-center items-center"
class="w-[40px] h-[32px] cursor-pointer flex justify-center items-center"
@click="visible = !visible"
>
<IconifyIconOnline :icon="currentActiveType + icon" />
@ -156,12 +156,12 @@ watch(
>
<el-divider class="tab-divider" border-style="dashed" />
<el-scrollbar height="220px">
<ul class="flex-wrap px-2 ml-2">
<ul class="flex flex-wrap px-2 ml-2">
<li
v-for="(item, key) in pageList"
:key="key"
:title="item"
class="icon-item p-2 w-1/10 cursor-pointer mr-2 mt-1 flex justify-center items-center border border-solid"
class="icon-item p-2 w-[1/10] cursor-pointer mr-2 mt-1 flex justify-center items-center border border-solid"
:style="iconItemStyle(item)"
@click="onChangeIcon(item)"
>

4
src/components/ReTable/src/bar.tsx
View File

@ -117,12 +117,12 @@ export default defineComponent({
<>
<div
{...attrs}
class="w-99/100 mt-6 p-2 bg-white dark:bg-dark"
class="w-[99/100] mt-6 p-2 bg-white dark:bg-dark"
v-loading={props.loading}
element-loading-svg={loadingSvg}
element-loading-svg-view-box="-10, -10, 50, 50"
>
<div class="flex justify-between w-full h-60px p-4">
<div class="flex justify-between w-full h-[60px] p-4">
<p class="font-bold truncate">{props.title}</p>
<div class="flex items-center justify-around">
<div class="flex mr-4">{slots?.buttons()}</div>

8
src/layout/components/navbar.vue
View File

@ -55,13 +55,13 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
<!-- 国际化 -->
<el-dropdown id="header-translation" trigger="click">
<globalization
class="navbar-bg-hover w-40px h-48px p-11px cursor-pointer outline-none"
class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-none"
/>
<template #dropdown>
<el-dropdown-menu class="translation">
<el-dropdown-item
:style="getDropdownItemStyle(locale, 'zh')"
:class="['!dark:color-white', getDropdownItemClass(locale, 'zh')]"
:class="['dark:!text-white', getDropdownItemClass(locale, 'zh')]"
@click="translationCh"
>
<IconifyIconOffline
@ -73,7 +73,7 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
</el-dropdown-item>
<el-dropdown-item
:style="getDropdownItemStyle(locale, 'en')"
:class="['!dark:color-white', getDropdownItemClass(locale, 'en')]"
:class="['dark:!text-white', getDropdownItemClass(locale, 'en')]"
@click="translationEn"
>
<span class="check-en" v-show="locale === 'en'">
@ -88,7 +88,7 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
<el-dropdown trigger="click">
<span class="el-dropdown-link navbar-bg-hover">
<img v-if="avatars" :src="avatars" :style="avatarsStyle" />
<p v-if="username" class="dark:color-white">{{ username }}</p>
<p v-if="username" class="dark:text-white">{{ username }}</p>
</span>
<template #dropdown>
<el-dropdown-menu class="logout">

6
src/layout/components/notice/noticeItem.vue
View File

@ -45,7 +45,7 @@ function hoverDescription(event, description) {
<template>
<div
class="notice-container border-b-1 border-[#f0f0f0] dark:border-[#303030]"
class="notice-container border-b-[1px] border-solid border-[#f0f0f0] dark:border-[#303030]"
>
<el-avatar
v-if="props.noticeItem.avatar"
@ -54,7 +54,7 @@ function hoverDescription(event, description) {
class="notice-container-avatar"
/>
<div class="notice-container-text">
<div class="notice-text-title color-[#000000d9] dark:color-white">
<div class="notice-text-title text-[#000000d9] dark:text-white">
<el-tooltip
popper-class="notice-title-popper"
:disabled="!titleTooltip"
@ -93,7 +93,7 @@ function hoverDescription(event, description) {
{{ props.noticeItem.description }}
</div>
</el-tooltip>
<div class="notice-text-datetime color-[#00000073] dark:color-white">
<div class="notice-text-datetime text-[#00000073] dark:text-white">
{{ props.noticeItem.datetime }}
</div>
</div>

6
src/layout/components/panel/index.vue
View File

@ -21,12 +21,14 @@ emitter.on("openPanel", () => {
<div ref="target" class="right-panel bg-white dark:bg-dark">
<div class="right-panel-items">
<div class="project-configuration">
<h3>项目配置</h3>
<h3 class="dark:text-white">项目配置</h3>
<el-icon title="关闭配置" class="el-icon-close" @click="show = !show">
<IconifyIconOffline icon="close" />
</el-icon>
</div>
<div class="border-b-1 border-[#dcdfe6] dark:border-[#303030]" />
<div
class="border-b-[1px] border-solid border-[#dcdfe6] dark:border-[#303030]"
/>
<slot />
</div>
</div>

2
src/layout/components/screenfull/index.vue
View File

@ -8,7 +8,7 @@ const { isFullscreen, toggle } = useFullscreen();
<template>
<div
class="screen-full w-36px h-48px flex-ac cursor-pointer navbar-bg-hover"
class="screen-full w-[36px] h-[48px] flex-ac cursor-pointer navbar-bg-hover"
@click="toggle"
>
<FontIcon

2
src/layout/components/search/components/SearchFooter.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="search-footer color-[#333] dark:color-white">
<div class="search-footer text-[#333] dark:text-white">
<span class="search-footer-item">
<enterOutlined class="icon" />
确认

2
src/layout/components/search/index.vue
View File

@ -9,7 +9,7 @@ function handleSearch() {
<template>
<div
class="search-container w-40px h-48px flex-c cursor-pointer navbar-bg-hover"
class="search-container w-[40px] h-[48px] flex-c cursor-pointer navbar-bg-hover"
@click="handleSearch"
>
<IconifyIconOffline icon="search" />

12
src/layout/components/setting/index.vue
View File

@ -309,7 +309,7 @@ nextTick(() => {
<el-divider>界面显示</el-divider>
<ul class="setting">
<li>
<span>灰色模式</span>
<span class="dark:text-white">灰色模式</span>
<el-switch
v-model="settings.greyVal"
inline-prompt
@ -320,7 +320,7 @@ nextTick(() => {
/>
</li>
<li>
<span>色弱模式</span>
<span class="dark:text-white">色弱模式</span>
<el-switch
v-model="settings.weakVal"
inline-prompt
@ -331,7 +331,7 @@ nextTick(() => {
/>
</li>
<li>
<span>隐藏标签页</span>
<span class="dark:text-white">隐藏标签页</span>
<el-switch
v-model="settings.tabsVal"
inline-prompt
@ -342,7 +342,7 @@ nextTick(() => {
/>
</li>
<li>
<span>侧边栏Logo</span>
<span class="dark:text-white">侧边栏Logo</span>
<el-switch
v-model="logoVal"
inline-prompt
@ -355,7 +355,7 @@ nextTick(() => {
/>
</li>
<li>
<span>标签页持久化</span>
<span class="dark:text-white">标签页持久化</span>
<el-switch
v-model="settings.multiTagsCache"
inline-prompt
@ -367,7 +367,7 @@ nextTick(() => {
</li>
<li>
<span>标签风格</span>
<span class="dark:text-white">标签风格</span>
<el-radio-group v-model="markValue" size="small" @change="onChange">
<el-radio label="card">卡片</el-radio>
<el-radio label="smart">灵动</el-radio>

8
src/layout/components/sidebar/horizontal.vue
View File

@ -67,13 +67,13 @@ watch(
<!-- 国际化 -->
<el-dropdown id="header-translation" trigger="click">
<globalization
class="navbar-bg-hover w-40px h-48px p-11px cursor-pointer outline-none"
class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-none"
/>
<template #dropdown>
<el-dropdown-menu class="translation">
<el-dropdown-item
:style="getDropdownItemStyle(locale, 'zh')"
:class="['!dark:color-white', getDropdownItemClass(locale, 'zh')]"
:class="['dark:!text-white', getDropdownItemClass(locale, 'zh')]"
@click="translationCh"
>
<span class="check-zh" v-show="locale === 'zh'">
@ -83,7 +83,7 @@ watch(
</el-dropdown-item>
<el-dropdown-item
:style="getDropdownItemStyle(locale, 'en')"
:class="['!dark:color-white', getDropdownItemClass(locale, 'en')]"
:class="['dark:!text-white', getDropdownItemClass(locale, 'en')]"
@click="translationEn"
>
<span class="check-en" v-show="locale === 'en'">
@ -98,7 +98,7 @@ watch(
<el-dropdown trigger="click">
<span class="el-dropdown-link navbar-bg-hover">
<img v-if="avatars" :src="avatars" :style="avatarsStyle" />
<p v-if="username" class="dark:color-white">{{ username }}</p>
<p v-if="username" class="dark:text-white">{{ username }}</p>
</span>
<template #dropdown>
<el-dropdown-menu class="logout">

2
src/layout/components/sidebar/leftCollapse.vue
View File

@ -28,7 +28,7 @@ const toggleClick = () => {
>
<IconifyIconOffline
:icon="props.isActive ? 'menu-fold' : 'menu-unfold'"
class="cursor-pointer inline-block align-middle color-primary hover:color-primary !dark:hover:color-white w-16px h-16px ml-4 mb-1"
class="cursor-pointer inline-block align-middle text-primary hover:text-primary dark:hover:!text-white w-[16px] h-[16px] ml-4 mb-1"
@click="toggleClick"
/>
</el-tooltip>

8
src/layout/components/sidebar/mixNav.vue
View File

@ -99,13 +99,13 @@ watch(
<!-- 国际化 -->
<el-dropdown id="header-translation" trigger="click">
<globalization
class="navbar-bg-hover w-40px h-48px p-11px cursor-pointer outline-none"
class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-none"
/>
<template #dropdown>
<el-dropdown-menu class="translation">
<el-dropdown-item
:style="getDropdownItemStyle(locale, 'zh')"
:class="['!dark:color-white', getDropdownItemClass(locale, 'zh')]"
:class="['dark:!text-white', getDropdownItemClass(locale, 'zh')]"
@click="translationCh"
>
<span class="check-zh" v-show="locale === 'zh'">
@ -115,7 +115,7 @@ watch(
</el-dropdown-item>
<el-dropdown-item
:style="getDropdownItemStyle(locale, 'en')"
:class="['!dark:color-white', getDropdownItemClass(locale, 'en')]"
:class="['dark:!text-white', getDropdownItemClass(locale, 'en')]"
@click="translationEn"
>
<span class="check-en" v-show="locale === 'en'">
@ -130,7 +130,7 @@ watch(
<el-dropdown trigger="click">
<span class="el-dropdown-link navbar-bg-hover">
<img v-if="avatars" :src="avatars" :style="avatarsStyle" />
<p v-if="username" class="dark:color-white">{{ username }}</p>
<p v-if="username" class="dark:text-white">{{ username }}</p>
</span>
<template #dropdown>
<el-dropdown-menu class="logout">

2
src/layout/components/sidebar/topCollapse.vue
View File

@ -24,7 +24,7 @@ const toggleClick = () => {
>
<IconifyIconOffline
:icon="props.isActive ? 'menu-fold' : 'menu-unfold'"
class="inline-block align-middle hover:color-primary !dark:hover:color-white"
class="inline-block align-middle hover:text-primary dark:hover:!text-white"
/>
</div>
</template>

4
src/layout/components/tag/index.vue
View File

@ -490,7 +490,7 @@ onMounted(() => {
>
<router-link
:to="item.path"
class="!dark:color-text_color_primary !dark:hover:color-primary"
class="dark:!text-text_color_primary dark:hover:!text-primary"
>
{{ transformI18n(item.meta.title) }}
</router-link>
@ -555,7 +555,7 @@ onMounted(() => {
placement="bottom-end"
@command="handleCommand"
>
<IconifyIconOffline icon="arrow-down" class="dark:color-white" />
<IconifyIconOffline icon="arrow-down" class="dark:text-white" />
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item

2
src/layout/hooks/useNav.ts
View File

@ -35,7 +35,7 @@ export function useNav() {
const getDropdownItemClass = computed(() => {
return (locale, t) => {
return locale === t ? "" : "!dark:hover:color-primary";
return locale === t ? "" : "dark:hover:!text-primary";
};
});

4
src/layout/index.vue
View File

@ -144,8 +144,8 @@ const layoutHeader = defineComponent({
{
default: () => [
!pureSetting.hiddenSideBar
? h(fullScreen, { class: "dark:color-white" })
: h(exitScreen, { class: "dark:color-white" })
? h(fullScreen, { class: "dark:text-white" })
: h(exitScreen, { class: "dark:text-white" })
]
}
)

1
src/main.ts
View File

@ -14,7 +14,6 @@ import { injectResponsiveStorage } from "/@/utils/responsive";
import Table from "@pureadmin/table";
import PureDescriptions from "@pureadmin/descriptions";
import "uno.css";
import "animate.css";
// 引入重置样式
import "./style/reset.scss";

7
src/style/dark.scss
View File

@ -129,7 +129,8 @@ html.dark {
}
.vxe-modal--title,
.vxe-button--content {
.vxe-button--content,
.vxe-modal--header-title {
color: var(--el-text-color-primary);
}
@ -137,6 +138,10 @@ html.dark {
background: var(--el-color-primary) !important;
}
.vxe-button {
background-color: transparent;
}
/* 项目配置面板 */
.right-panel-items {
.el-divider__text {

1
src/style/index.scss
View File

@ -3,6 +3,7 @@
@import "./element-plus.scss";
@import "./sidebar.scss";
@import "./dark.scss";
@import "./tailwind.css";
:root {
--pure-transition-duration: 0.016s;

29
src/style/tailwind.css Normal file
View File

@ -0,0 +1,29 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.bg-dark {
@apply bg-bg_color;
}
.wh-full {
@apply w-full h-full;
}
.flex-c {
@apply flex justify-center items-center;
}
.flex-ac {
@apply flex justify-around items-center;
}
.flex-bc {
@apply flex justify-between items-center;
}
.navbar-bg-hover {
@apply dark:text-white dark:hover:!bg-[#242424];
}
}

10
src/views/able/ant-anchor.vue
View File

@ -37,8 +37,8 @@ function handleAnchorClick(e, link) {
</span>
</div>
</template>
<div class="w-400px">
<Anchor class="float-left mt-200px" @click="handleAnchorClick">
<div class="w-[400px]">
<Anchor class="float-left mt-[200px]" @click="handleAnchorClick">
<AnchorLink href="one" title="测试one" />
<AnchorLink href="two" title="测试two" />
<AnchorLink href="three" title="测试three" />
@ -47,21 +47,21 @@ function handleAnchorClick(e, link) {
<el-scrollbar class="float-right overflow-auto" height="600px">
<header
id="one"
class="w-200px h-600px text-cyan-50 flex justify-center items-center text-4xl"
class="w-[200px] h-[600px] text-cyan-50 flex justify-center items-center text-4xl"
style="background: #409eff"
>
测试one
</header>
<header
id="two"
class="w-200px h-600px text-cyan-50 flex justify-center items-center text-4xl"
class="w-[200px] h-[600px] text-cyan-50 flex justify-center items-center text-4xl"
style="background: #67c23a"
>
测试two
</header>
<header
id="three"
class="w-200px h-600px text-cyan-50 flex justify-center items-center text-4xl"
class="w-[200px] h-[600px] text-cyan-50 flex justify-center items-center text-4xl"
style="background: #f56c6c"
>
测试three

8
src/views/able/ant-treeSelect.vue
View File

@ -149,7 +149,7 @@ const onLoadData = treeNode => {
<div>
<span>线性样式：</span>
<TreeSelect
class="w-200px"
class="w-[200px]"
v-model:value="value1"
show-search
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
@ -169,7 +169,7 @@ const onLoadData = treeNode => {
<div>
<span>虚拟滚动：</span>
<TreeSelect
class="w-200px mt-6"
class="w-[200px] mt-6"
v-model:value="checkedKeys"
tree-checkable
tree-default-expand-all
@ -190,7 +190,7 @@ const onLoadData = treeNode => {
<div>
<span>可勾选：</span>
<TreeSelect
class="w-200px"
class="w-[200px]"
v-model:value="value2"
:tree-data="treeData2"
tree-checkable
@ -203,7 +203,7 @@ const onLoadData = treeNode => {
<div>
<span>异步加载：</span>
<TreeSelect
class="w-200px"
class="w-[200px]"
v-model:value="value3"
tree-data-simple-mode
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"

2
src/views/able/execl.vue
View File

@ -84,7 +84,7 @@ const exportExcel = () => {
</div>
</template>
<el-button type="primary" @click="exportExcel">导出Excel </el-button>
<div class="h-100 mt-3">
<div class="h-[25rem] mt-3">
<el-auto-resizer>
<template #default="{ height, width }">
<el-table-v2

6
src/views/able/line-tree.vue
View File

@ -30,14 +30,14 @@ let dataProps = {
</template>
<el-row :gutter="24">
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="mb-20px">
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="mb-[20px]">
<el-card>
<template #header>
<div class="card-header">
<span class="font-medium"> 普通树结构 </span>
</div>
</template>
<div class="max-h-550px overflow-y-auto">
<div class="max-h-[550px] overflow-y-auto">
<el-tree
:data="menusData"
:props="dataProps"
@ -66,7 +66,7 @@ let dataProps = {
<span class="font-medium"> 虚拟树结构 </span>
</div>
</template>
<div class="max-h-550px overflow-y-auto">
<div class="max-h-[550px] overflow-y-auto">
<el-tree-v2
:data="menusData"
:props="dataProps"

2
src/views/able/pdf.vue
View File

@ -73,7 +73,7 @@ const onPrint = () => {
{{ currentPage }} / {{ pageCount }}
</el-pagination>
</div>
<div class="w-170px flex-bc">
<div class="w-[170px] flex-bc">
<el-checkbox v-model="showAllPages" @change="showAllPagesChange">
显示所有页面
</el-checkbox>

2
src/views/able/print.vue
View File

@ -197,7 +197,7 @@ const tableData: User[] = [
border
:data="tableData"
:row-class-name="tableRowClassName"
class="el-table w-full mt-40px mr-40px"
class="el-table w-full mt-[40px] mr-[40px]"
>
<el-table-column prop="date" label="Date" width="180" />
<el-table-column prop="name" label="Name" width="180" />

18
src/views/able/qrcode.vue
View File

@ -40,19 +40,19 @@ const disabledClick = () => {
</template>
<el-row :gutter="20" justify="space-between">
<el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
<el-card shadow="hover" class="mb-10px text-center">
<el-card shadow="hover" class="mb-[10px] text-center">
<div class="font-bold">基础用法</div>
<ReQrcode :text="qrcodeText" />
</el-card>
</el-col>
<el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
<el-card shadow="hover" class="mb-10px text-center">
<el-card shadow="hover" class="mb-[10px] text-center">
<div class="font-bold">img标签</div>
<ReQrcode :text="qrcodeText" tag="img" />
</el-card>
</el-col>
<el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
<el-card shadow="hover" class="mb-10px text-center">
<el-card shadow="hover" class="mb-[10px] text-center">
<div class="font-bold">样式配置</div>
<ReQrcode
:text="qrcodeText"
@ -66,19 +66,19 @@ const disabledClick = () => {
</el-card>
</el-col>
<el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
<el-card shadow="hover" class="mb-10px text-center">
<el-card shadow="hover" class="mb-[10px] text-center">
<div class="font-bold">点击事件</div>
<ReQrcode :text="qrcodeText" @click="codeClick" />
</el-card>
</el-col>
<el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
<el-card shadow="hover" class="mb-10px text-center">
<el-card shadow="hover" class="mb-[10px] text-center">
<div class="font-bold">异步内容</div>
<ReQrcode :text="asyncTitle" />
</el-card>
</el-col>
<el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
<el-card shadow="hover" class="mb-10px text-center">
<el-card shadow="hover" class="mb-[10px] text-center">
<div class="font-bold">失效</div>
<ReQrcode
:text="qrcodeText"
@ -88,13 +88,13 @@ const disabledClick = () => {
</el-card>
</el-col>
<el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
<el-card shadow="hover" class="mb-10px text-center">
<el-card shadow="hover" class="mb-[10px] text-center">
<div class="font-bold">logo配置</div>
<ReQrcode :text="qrcodeText" :logo="avatars" />
</el-card>
</el-col>
<el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
<el-card shadow="hover" class="mb-10px text-center">
<el-card shadow="hover" class="mb-[10px] text-center">
<div class="font-bold">logo样式</div>
<ReQrcode
:text="qrcodeText"
@ -109,7 +109,7 @@ const disabledClick = () => {
</el-card>
</el-col>
<el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
<el-card shadow="hover" class="mb-10px text-center">
<el-card shadow="hover" class="mb-[10px] text-center">
<div class="font-bold">大小配置</div>
<ReQrcode :text="qrcodeText" :width="100" />
</el-card>

4
src/views/able/swiper.vue
View File

@ -119,11 +119,11 @@ const swiperExample: SwiperExample[] = [
</template>
<el-row :gutter="10">
<el-col v-for="item in swiperExample" :key="item.id" :span="12">
<h3 class="py-24px text-24px font-bold">{{ item.label }}</h3>
<h3 class="py-[24px] text-[24px] font-bold">{{ item.label }}</h3>
<swiper v-bind="item.options">
<swiper-slide v-for="i in 5" :key="i">
<div
class="flex justify-center items-center h-240px border-1px border-[#999] text-18px font-bold"
class="flex justify-center items-center h-[240px] border-[1px] border-[#999] text-[18px] font-bold"
>
Slide{{ i }}
</div>

2
src/views/able/virtual-list/horizontal.vue
View File

@ -29,7 +29,7 @@ function changeMessage(message) {
<div class="dynamic-scroller-demo">
<div class="flex justify-around mb-4">
<el-input
class="mr-2 !w-1/1.5"
class="mr-2 !w-[1/1.5]"
clearable
v-model="search"
placeholder="Filter..."

4
src/views/able/virtual-list/index.vue
View File

@ -23,8 +23,8 @@ defineOptions({
</div>
</template>
<div class="w-full flex justify-around flex-wrap">
<vertical-list class="h-500px w-500px" />
<horizontal-list class="h-500px w-500px" />
<vertical-list class="h-[500px] w-[500px]" />
<horizontal-list class="h-[500px] w-[500px]" />
</div>
</el-card>
</template>

2
src/views/able/virtual-list/vertical.vue
View File

@ -33,7 +33,7 @@ function onResize() {
<div class="dynamic-scroller-demo">
<div class="flex justify-around mb-4">
<el-input
class="mr-2 !w-1/1.5"
class="mr-2 !w-[1/1.5]"
clearable
v-model="search"
placeholder="Filter..."

2
src/views/components/button/index.vue
View File

@ -18,7 +18,7 @@ const url = ref(`${VITE_PUBLIC_PATH}html/button.html`);
<span class="font-medium">通过iframe引入按钮页面</span>
</div>
</template>
<iframe :src="url" frameborder="0" class="iframe w-full h-60vh" />
<iframe :src="url" frameborder="0" class="iframe w-full h-[60vh]" />
</el-card>
</template>

2
src/views/empty/index.vue
View File

@ -8,7 +8,7 @@ defineOptions({
<template>
<div class="back" title="返回上一页" @click="$router.go(-1)">
<back class="w-80px h-80px" />
<back class="w-[80px] h-[80px]" />
</div>
</template>

2
src/views/error/403.vue
View File

@ -7,7 +7,7 @@ defineOptions({
</script>
<template>
<div class="flex justify-center items-center h-screen-sm">
<div class="flex justify-center items-center h-[640px]">
<noAccess />
<div class="ml-12">
<p

2
src/views/error/404.vue
View File

@ -7,7 +7,7 @@ defineOptions({
</script>
<template>
<div class="flex justify-center items-center h-screen-sm">
<div class="flex justify-center items-center h-[640px]">
<noExist />
<div class="ml-12">
<p

2
src/views/error/500.vue
View File

@ -7,7 +7,7 @@ defineOptions({
</script>
<template>
<div class="flex justify-center items-center h-screen-sm">
<div class="flex justify-center items-center h-[640px]">
<noServer />
<div class="ml-12">
<p

8
src/views/list/card/components/Card.vue
View File

@ -46,7 +46,7 @@ const cardLogoClass = computed(() => [
<template>
<div :class="cardClass">
<div class="list-card-item_detail !bg-white !dark:bg-dark">
<div class="list-card-item_detail bg-white dark:bg-dark">
<el-row justify="space-between">
<div :class="cardLogoClass">
<shopIcon v-if="product.type === 1" />
@ -68,7 +68,7 @@ const cardLogoClass = computed(() => [
:disabled="!product.isSetup"
max-height="2"
>
<IconifyIconOffline icon="more-vertical" class="text-size-24px" />
<IconifyIconOffline icon="more-vertical" class="text-[24px]" />
<template #dropdown>
<el-dropdown-menu :disabled="!product.isSetup">
<el-dropdown-item @click="handleClickManage(product)">
@ -82,10 +82,10 @@ const cardLogoClass = computed(() => [
</el-dropdown>
</div>
</el-row>
<p class="list-card-item_detail--name color-text_color_primary">
<p class="list-card-item_detail--name text-text_color_primary">
{{ product.name }}
</p>
<p class="list-card-item_detail--desc color-text_color_regular">
<p class="list-card-item_detail--desc text-text_color_regular">
{{ product.description }}
</p>
</div>

10
src/views/login/index.vue
View File

@ -102,13 +102,13 @@ dataThemeChange();
<!-- 国际化 -->
<el-dropdown trigger="click">
<globalization
class="hover:color-primary !hover:bg-transparent w-20px h-20px ml-1.5 cursor-pointer outline-none duration-300"
class="hover:text-primary hover:!bg-[transparent] w-[20px] h-[20px] ml-1.5 cursor-pointer outline-none duration-300"
/>
<template #dropdown>
<el-dropdown-menu class="translation">
<el-dropdown-item
:style="getDropdownItemStyle(locale, 'zh')"
:class="['!dark:color-white', getDropdownItemClass(locale, 'zh')]"
:class="['dark:!text-white', getDropdownItemClass(locale, 'zh')]"
@click="translationCh"
>
<IconifyIconOffline
@ -120,7 +120,7 @@ dataThemeChange();
</el-dropdown-item>
<el-dropdown-item
:style="getDropdownItemStyle(locale, 'en')"
:class="['!dark:color-white', getDropdownItemClass(locale, 'en')]"
:class="['dark:!text-white', getDropdownItemClass(locale, 'en')]"
@click="translationEn"
>
<span class="check-en" v-show="locale === 'en'">
@ -202,7 +202,7 @@ dataThemeChange();
<Motion :delay="250">
<el-form-item>
<div class="w-full h-20px flex justify-between items-center">
<div class="w-full h-[20px] flex justify-between items-center">
<el-checkbox v-model="checked">
{{ t("login.remember") }}
</el-checkbox>
@ -228,7 +228,7 @@ dataThemeChange();
<Motion :delay="300">
<el-form-item>
<div class="w-full h-20px flex justify-between items-center">
<div class="w-full h-[20px] flex justify-between items-center">
<el-button
v-for="(item, index) in operates"
:key="index"

2
src/views/result/success.vue
View File

@ -57,7 +57,7 @@ const columns = [
<span
role="img"
aria-label="dingding"
class="anticon anticon-dingding cursor-pointer flex items-center cursor-pointer"
class="anticon anticon-dingding flex items-center cursor-pointer"
style="color: rgb(0, 160, 233); margin-left: 8px"
>
<svg

2
src/views/system/dept/index.vue
View File

@ -60,7 +60,7 @@ onMounted(() => {
ref="formRef"
:inline="true"
:model="form"
class="bg-white dark:bg-dark w-99/100 pl-8 pt-4"
class="bg-white dark:bg-dark w-[99/100] pl-8 pt-4"
>
<el-form-item label="部门名称：" prop="user">
<el-input v-model="form.user" placeholder="请输入部门名称" clearable />

2
src/views/system/dict/config.vue
View File

@ -88,7 +88,7 @@ const checkboxChangeEvent: VxeTableEvents.CheckboxChange = ({ records }) => {
size="680px"
>
<template #header>
<span class="color-black dark:color-white">{{ drawTitle }}</span>
<span class="text-black dark:text-white">{{ drawTitle }}</span>
</template>
<el-divider />
<!-- 列表 -->

6
src/views/system/dict/index.vue
View File

@ -224,10 +224,10 @@ function onHide() {
<!-- 工具栏 -->
<vxe-toolbar class="dark:bg-dark">
<template #buttons>
<div class="ml-20px">
<label>字典名称：</label>
<div class="ml-[20px]">
<label class="dark:text-text_color_regular">字典名称： </label>
<el-input
class="!w-200px"
class="!w-[200px]"
v-model="dictData.filterName"
:placeholder="t('buttons.hssearch')"
@keyup.prevent="searchEvent"

6
src/views/system/role/index.vue
View File

@ -77,7 +77,7 @@ onMounted(() => {
ref="formRef"
:inline="true"
:model="form"
class="bg-white dark:bg-dark w-99/100 pl-8 pt-4"
class="bg-white dark:bg-dark w-[99/100] pl-8 pt-4"
>
<el-form-item label="角色名称：" prop="name">
<el-input v-model="form.name" placeholder="请输入角色名称" clearable />
@ -175,7 +175,7 @@ onMounted(() => {
<el-dropdown-menu>
<el-dropdown-item>
<el-button
class="reset-margin !h-20px !text-gray-500"
class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
link
type="primary"
:size="size"
@ -186,7 +186,7 @@ onMounted(() => {
</el-dropdown-item>
<el-dropdown-item>
<el-button
class="reset-margin !h-20px !text-gray-500"
class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
link
type="primary"
:size="size"

6
src/views/system/user/index.vue
View File

@ -79,7 +79,7 @@ onMounted(() => {
ref="formRef"
:inline="true"
:model="form"
class="bg-white dark:bg-dark w-99/100 pl-8 pt-4"
class="bg-white dark:bg-dark w-[99/100] pl-8 pt-4"
>
<el-form-item label="用户名称：" prop="username">
<el-input
@ -187,7 +187,7 @@ onMounted(() => {
<el-dropdown-menu>
<el-dropdown-item>
<el-button
class="reset-margin !h-20px !text-gray-500"
class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
link
type="primary"
:size="size"
@ -198,7 +198,7 @@ onMounted(() => {
</el-dropdown-item>
<el-dropdown-item>
<el-button
class="reset-margin !h-20px !text-gray-500"
class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
link
type="primary"
:size="size"

14
src/views/system/user/tree.vue
View File

@ -69,8 +69,8 @@ onMounted(async () => {
</script>
<template>
<div class="max-w-260px h-full min-h-780px bg-white dark:bg-dark">
<div class="flex items-center h-34px">
<div class="max-w-[260px] h-full min-h-[780px] bg-white dark:bg-dark">
<div class="flex items-center h-[34px]">
<p class="flex-1 ml-2 font-bold text-base truncate" title="部门列表">
部门列表
</p>
@ -92,7 +92,7 @@ onMounted(async () => {
</el-input>
<el-dropdown>
<IconifyIconOffline
class="w-28px cursor-pointer"
class="w-[28px] cursor-pointer"
width="18px"
icon="more-vertical"
/>
@ -100,7 +100,7 @@ onMounted(async () => {
<el-dropdown-menu>
<el-dropdown-item>
<el-button
class="reset-margin !h-20px !text-gray-500 !dark:hover:color-primary"
class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
link
type="primary"
:icon="useRenderIcon('expand')"
@ -111,7 +111,7 @@ onMounted(async () => {
</el-dropdown-item>
<el-dropdown-item>
<el-button
class="reset-margin !h-20px !text-gray-500 !dark:hover:color-primary"
class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
link
type="primary"
:icon="useRenderIcon('unExpand')"
@ -122,7 +122,7 @@ onMounted(async () => {
</el-dropdown-item>
<el-dropdown-item>
<el-button
class="reset-margin !h-20px !text-gray-500 !dark:hover:color-primary"
class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
link
type="primary"
:icon="useRenderIcon('reset')"
@ -159,7 +159,7 @@ onMounted(async () => {
searchValue.trim().length > 0 &&
node.label.includes(searchValue) &&
'text-red-500',
highlightMap[node.id]?.highlight ? 'dark:color-primary' : ''
highlightMap[node.id]?.highlight ? 'dark:text-primary' : ''
]"
:style="{
background: highlightMap[node.id]?.highlight

8
src/views/tabs/index.vue
View File

@ -50,7 +50,7 @@ function onCloseTags() {
<template #header>
<div>标签页复用，超出限制自动关闭（使用场景: 动态路由）</div>
</template>
<div class="flex-wrap items-center">
<div class="flex flex-wrap items-center">
<p>query传参模式：</p>
<el-button
class="m-2"
@ -64,7 +64,7 @@ function onCloseTags() {
<el-divider />
<div class="flex-wrap items-center">
<div class="flex flex-wrap items-center">
<p>params传参模式：</p>
<el-button
class="m-2"
@ -78,7 +78,7 @@ function onCloseTags() {
<el-divider />
<TreeSelect
class="w-300px"
class="w-[300px]"
v-model:value="value"
show-search
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
@ -94,7 +94,7 @@ function onCloseTags() {
:tree-data="treeData"
>
<template #tagRender="{ closable, onClose, option }">
<el-tag class="mr-3px" :closable="closable" @close="onClose">
<el-tag class="mr-[3px]" :closable="closable" @close="onClose">
{{ transformI18n(option.meta.title) }}
</el-tag>
</template>

2
src/views/welcome/components/columns.tsx
View File

@ -58,7 +58,7 @@ export function useColumns() {
cellRenderer: () => {
return lists.map(v => {
return (
<el-tag class="mr-10px" type={v.type} size="small" effect="dark">
<el-tag class="mr-[10px]" type={v.type} size="small" effect="dark">
{v.label}
</el-tag>
);

20
tailwind.config.js Normal file
View File

@ -0,0 +1,20 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: "class",
corePlugins: {
preflight: false
},
content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
theme: {
extend: {
colors: {
bg_color: "var(--el-bg-color)",
primary: "var(--el-color-primary)",
primary_light_9: "var(--el-color-primary-light-9)",
text_color_primary: "var(--el-text-color-primary)",
text_color_regular: "var(--el-text-color-regular)",
text_color_disabled: "var(--el-text-color-disabled)"
}
}
}
};

49
uno.config.ts
View File

@ -1,49 +0,0 @@
import { defineConfig, presetUno } from "unocss";
// https://github.com/unocss/unocss#readme
export default defineConfig({
// unocss默认不扫描 node_modules、dist、css以及其扩展 具体实现：https://github.com/unocss/unocss/blob/03c8abe8f5020b3baaed3dfbfe8e2258dd041a7e/packages/vite/src/utils.ts#L3
exclude: [
"node_modules",
"dist",
".git",
".github",
".husky",
".vscode",
"build",
"locales",
"mock",
"public",
"types",
".eslintrc.js",
".prettierrc.js",
"postcss.config.js",
"stylelint.config.js",
"commitlint.config.js",
"README.md",
"CHANGELOG.md",
"README.en-US.md",
"CHANGELOG.en_US.md",
"CHANGELOG.zh_CN.md"
],
presets: [presetUno({ dark: "class" })],
shortcuts: {
"bg-dark": "bg-bg_color",
"wh-full": "w-full h-full",
"flex-wrap": "flex flex-wrap",
"flex-c": "flex justify-center items-center",
"flex-ac": "flex justify-around items-center",
"flex-bc": "flex justify-between items-center",
"navbar-bg-hover": "dark:color-white !dark:hover:bg-[#242424]"
},
theme: {
colors: {
bg_color: "var(--el-bg-color)",
primary: "var(--el-color-primary)",
primary_light_9: "var(--el-color-primary-light-9)",
text_color_primary: "var(--el-text-color-primary)",
text_color_regular: "var(--el-text-color-regular)",
text_color_disabled: "var(--el-text-color-disabled)"
}
}
});