twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-11-03 13:44:47 +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
57 changed files with 550 additions and 808 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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>
);