Browse Source

refactor: use `tailwindcss` replace `unocss`

i18n
xiaoxian521 2 years ago
parent
commit
60cdaf4697
  1. 6
      .eslintignore
  2. 2
      .vscode/extensions.json
  3. 2
      build/plugins.ts
  4. 8
      package.json
  5. 983
      pnpm-lock.yaml
  6. 6
      postcss.config.js
  7. 8
      src/layout/components/navbar.vue
  8. 6
      src/layout/components/notice/noticeItem.vue
  9. 6
      src/layout/components/panel/index.vue
  10. 2
      src/layout/components/screenfull/index.vue
  11. 2
      src/layout/components/search/components/SearchFooter.vue
  12. 2
      src/layout/components/search/index.vue
  13. 12
      src/layout/components/setting/index.vue
  14. 8
      src/layout/components/sidebar/horizontal.vue
  15. 2
      src/layout/components/sidebar/leftCollapse.vue
  16. 8
      src/layout/components/sidebar/mixNav.vue
  17. 2
      src/layout/components/sidebar/topCollapse.vue
  18. 4
      src/layout/components/tag/index.vue
  19. 2
      src/layout/hooks/useNav.ts
  20. 4
      src/layout/index.vue
  21. 1
      src/main.ts
  22. 7
      src/style/dark.scss
  23. 1
      src/style/index.scss
  24. 29
      src/style/tailwind.css
  25. 2
      src/views/error/403.vue
  26. 2
      src/views/error/404.vue
  27. 2
      src/views/error/500.vue
  28. 10
      src/views/login/index.vue
  29. 20
      tailwind.config.js
  30. 49
      uno.config.ts

6
.eslintignore

@ -2,3 +2,9 @@ public
dist dist
*.d.ts *.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

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

2
build/plugins.ts

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

8
package.json

@ -13,8 +13,8 @@
"typecheck": "tsc --noEmit && vue-tsc --noEmit --skipLibCheck", "typecheck": "tsc --noEmit && vue-tsc --noEmit --skipLibCheck",
"cloc": "cross-env --max_old_space_size=4096 cloc . --exclude-dir=node_modules --exclude-lang=YAML", "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", "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: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:lint-staged": "lint-staged -c ./.husky/lintstagedrc.js",
"lint:pretty": "pretty-quick --staged", "lint:pretty": "pretty-quick --staged",
@ -100,7 +100,7 @@
"picocolors": "^1.0.0", "picocolors": "^1.0.0",
"postcss": "^8.4.16", "postcss": "^8.4.16",
"postcss-html": "^1.5.0", "postcss-html": "^1.5.0",
"postcss-import": "^14.1.0",
"postcss-import": "^15.0.0",
"postcss-scss": "^4.0.4", "postcss-scss": "^4.0.4",
"prettier": "^2.5.1", "prettier": "^2.5.1",
"pretty-quick": "3.1.1", "pretty-quick": "3.1.1",
@ -114,9 +114,9 @@
"stylelint-config-recommended": "^6.0.0", "stylelint-config-recommended": "^6.0.0",
"stylelint-config-standard": "^24.0.0", "stylelint-config-standard": "^24.0.0",
"stylelint-order": "^5.0.0", "stylelint-order": "^5.0.0",
"tailwindcss": "^3.1.8",
"terser": "^5.15.0", "terser": "^5.15.0",
"typescript": "^4.7.4", "typescript": "^4.7.4",
"unocss": "^0.45.15",
"unplugin-vue-define-options": "0.7.3", "unplugin-vue-define-options": "0.7.3",
"vite": "^3.1.0", "vite": "^3.1.0",
"vite-plugin-mock": "^2.9.6", "vite-plugin-mock": "^2.9.6",

983
pnpm-lock.yaml
File diff suppressed because it is too large
View File

6
postcss.config.js

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

8
src/layout/components/navbar.vue

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

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

@ -45,7 +45,7 @@ function hoverDescription(event, description) {
<template> <template>
<div <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 <el-avatar
v-if="props.noticeItem.avatar" v-if="props.noticeItem.avatar"
@ -54,7 +54,7 @@ function hoverDescription(event, description) {
class="notice-container-avatar" class="notice-container-avatar"
/> />
<div class="notice-container-text"> <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 <el-tooltip
popper-class="notice-title-popper" popper-class="notice-title-popper"
:disabled="!titleTooltip" :disabled="!titleTooltip"
@ -93,7 +93,7 @@ function hoverDescription(event, description) {
{{ props.noticeItem.description }} {{ props.noticeItem.description }}
</div> </div>
</el-tooltip> </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 }} {{ props.noticeItem.datetime }}
</div> </div>
</div> </div>

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

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

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

@ -8,7 +8,7 @@ const { isFullscreen, toggle } = useFullscreen();
<template> <template>
<div <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" @click="toggle"
> >
<FontIcon <FontIcon

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

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

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

@ -9,7 +9,7 @@ function handleSearch() {
<template> <template>
<div <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" @click="handleSearch"
> >
<IconifyIconOffline icon="search" /> <IconifyIconOffline icon="search" />

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

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

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

@ -67,13 +67,13 @@ watch(
<!-- 国际化 --> <!-- 国际化 -->
<el-dropdown id="header-translation" trigger="click"> <el-dropdown id="header-translation" trigger="click">
<globalization <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> <template #dropdown>
<el-dropdown-menu class="translation"> <el-dropdown-menu class="translation">
<el-dropdown-item <el-dropdown-item
:style="getDropdownItemStyle(locale, 'zh')" :style="getDropdownItemStyle(locale, 'zh')"
:class="['!dark:color-white', getDropdownItemClass(locale, 'zh')]"
:class="['dark:!text-white', getDropdownItemClass(locale, 'zh')]"
@click="translationCh" @click="translationCh"
> >
<span class="check-zh" v-show="locale === 'zh'"> <span class="check-zh" v-show="locale === 'zh'">
@ -83,7 +83,7 @@ watch(
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item <el-dropdown-item
:style="getDropdownItemStyle(locale, 'en')" :style="getDropdownItemStyle(locale, 'en')"
:class="['!dark:color-white', getDropdownItemClass(locale, 'en')]"
:class="['dark:!text-white', getDropdownItemClass(locale, 'en')]"
@click="translationEn" @click="translationEn"
> >
<span class="check-en" v-show="locale === 'en'"> <span class="check-en" v-show="locale === 'en'">
@ -98,7 +98,7 @@ watch(
<el-dropdown trigger="click"> <el-dropdown trigger="click">
<span class="el-dropdown-link navbar-bg-hover"> <span class="el-dropdown-link navbar-bg-hover">
<img v-if="avatars" :src="avatars" :style="avatarsStyle" /> <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> </span>
<template #dropdown> <template #dropdown>
<el-dropdown-menu class="logout"> <el-dropdown-menu class="logout">

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

@ -28,7 +28,7 @@ const toggleClick = () => {
> >
<IconifyIconOffline <IconifyIconOffline
:icon="props.isActive ? 'menu-fold' : 'menu-unfold'" :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" @click="toggleClick"
/> />
</el-tooltip> </el-tooltip>

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

@ -99,13 +99,13 @@ watch(
<!-- 国际化 --> <!-- 国际化 -->
<el-dropdown id="header-translation" trigger="click"> <el-dropdown id="header-translation" trigger="click">
<globalization <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> <template #dropdown>
<el-dropdown-menu class="translation"> <el-dropdown-menu class="translation">
<el-dropdown-item <el-dropdown-item
:style="getDropdownItemStyle(locale, 'zh')" :style="getDropdownItemStyle(locale, 'zh')"
:class="['!dark:color-white', getDropdownItemClass(locale, 'zh')]"
:class="['dark:!text-white', getDropdownItemClass(locale, 'zh')]"
@click="translationCh" @click="translationCh"
> >
<span class="check-zh" v-show="locale === 'zh'"> <span class="check-zh" v-show="locale === 'zh'">
@ -115,7 +115,7 @@ watch(
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item <el-dropdown-item
:style="getDropdownItemStyle(locale, 'en')" :style="getDropdownItemStyle(locale, 'en')"
:class="['!dark:color-white', getDropdownItemClass(locale, 'en')]"
:class="['dark:!text-white', getDropdownItemClass(locale, 'en')]"
@click="translationEn" @click="translationEn"
> >
<span class="check-en" v-show="locale === 'en'"> <span class="check-en" v-show="locale === 'en'">
@ -130,7 +130,7 @@ watch(
<el-dropdown trigger="click"> <el-dropdown trigger="click">
<span class="el-dropdown-link navbar-bg-hover"> <span class="el-dropdown-link navbar-bg-hover">
<img v-if="avatars" :src="avatars" :style="avatarsStyle" /> <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> </span>
<template #dropdown> <template #dropdown>
<el-dropdown-menu class="logout"> <el-dropdown-menu class="logout">

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

@ -24,7 +24,7 @@ const toggleClick = () => {
> >
<IconifyIconOffline <IconifyIconOffline
:icon="props.isActive ? 'menu-fold' : 'menu-unfold'" :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> </div>
</template> </template>

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

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

2
src/layout/hooks/useNav.ts

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

4
src/layout/index.vue

@ -144,8 +144,8 @@ const layoutHeader = defineComponent({
{ {
default: () => [ default: () => [
!pureSetting.hiddenSideBar !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

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

7
src/style/dark.scss

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

1
src/style/index.scss

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

29
src/style/tailwind.css

@ -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];
}
}

2
src/views/error/403.vue

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

2
src/views/error/404.vue

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

2
src/views/error/500.vue

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

10
src/views/login/index.vue

@ -102,13 +102,13 @@ dataThemeChange();
<!-- 国际化 --> <!-- 国际化 -->
<el-dropdown trigger="click"> <el-dropdown trigger="click">
<globalization <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> <template #dropdown>
<el-dropdown-menu class="translation"> <el-dropdown-menu class="translation">
<el-dropdown-item <el-dropdown-item
:style="getDropdownItemStyle(locale, 'zh')" :style="getDropdownItemStyle(locale, 'zh')"
:class="['!dark:color-white', getDropdownItemClass(locale, 'zh')]"
:class="['dark:!text-white', getDropdownItemClass(locale, 'zh')]"
@click="translationCh" @click="translationCh"
> >
<IconifyIconOffline <IconifyIconOffline
@ -120,7 +120,7 @@ dataThemeChange();
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item <el-dropdown-item
:style="getDropdownItemStyle(locale, 'en')" :style="getDropdownItemStyle(locale, 'en')"
:class="['!dark:color-white', getDropdownItemClass(locale, 'en')]"
:class="['dark:!text-white', getDropdownItemClass(locale, 'en')]"
@click="translationEn" @click="translationEn"
> >
<span class="check-en" v-show="locale === 'en'"> <span class="check-en" v-show="locale === 'en'">
@ -202,7 +202,7 @@ dataThemeChange();
<Motion :delay="250"> <Motion :delay="250">
<el-form-item> <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"> <el-checkbox v-model="checked">
{{ t("login.remember") }} {{ t("login.remember") }}
</el-checkbox> </el-checkbox>
@ -228,7 +228,7 @@ dataThemeChange();
<Motion :delay="300"> <Motion :delay="300">
<el-form-item> <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 <el-button
v-for="(item, index) in operates" v-for="(item, index) in operates"
:key="index" :key="index"

20
tailwind.config.js

@ -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

@ -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)"
}
}
});
Loading…
Cancel
Save