From c96151d2ae0523daf57abbf93ff710b506a6f107 Mon Sep 17 00:00:00 2001 From: liuyun Date: Sun, 11 Oct 2026 13:18:45 +0800 Subject: [PATCH] refactor: convert raw CSS to Tailwind @apply + search collapseCount=3 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - ty-search-form 折叠默认数 2 → 3 - login/register/forgot/home/ty-header/ty-sidebar/ty-mixbar/ty-tabs/ty-footer/ty-setting-panel/icon/default 布局裸 CSS 转 @apply - 修复背景色工具类误写(bg-base→bg-bg-base、bg-page→bg-bg-page) Co-Authored-By: Claude Opus 4.8 --- src/components/icon/icon.vue | 4 +- src/components/ty-footer.vue | 14 +--- src/components/ty-header.vue | 74 +++++-------------- src/components/ty-mixbar.vue | 25 +------ src/components/ty-search-form.vue | 2 +- src/components/ty-setting-panel.vue | 23 ++---- src/components/ty-sidebar.vue | 29 +++----- src/components/ty-tabs.vue | 38 +++------- src/layouts/default.vue | 28 ++----- src/pages/forgot-password.vue | 12 +-- src/pages/index.vue | 9 +-- src/pages/login/index.vue | 25 ++----- src/pages/register.vue | 12 +-- .../system/role/assign-resources-form.vue | 3 +- stats.html | 2 +- 15 files changed, 81 insertions(+), 219 deletions(-) diff --git a/src/components/icon/icon.vue b/src/components/icon/icon.vue index 487d813..d27dfbd 100644 --- a/src/components/icon/icon.vue +++ b/src/components/icon/icon.vue @@ -68,8 +68,6 @@ const iconfontClassName = computed(() => `${props.fontFamily} ${props.prefix}-${ @apply inline-block align-mid text-xl; } .svg { - @apply inline-block align-mid; - width: 1rem; - height: 1rem; + @apply inline-block align-mid h-4 w-4; } diff --git a/src/components/ty-footer.vue b/src/components/ty-footer.vue index 2387963..ca7ba96 100644 --- a/src/components/ty-footer.vue +++ b/src/components/ty-footer.vue @@ -23,20 +23,12 @@ withDefaults( diff --git a/src/components/ty-header.vue b/src/components/ty-header.vue index c9bc150..ed84235 100644 --- a/src/components/ty-header.vue +++ b/src/components/ty-header.vue @@ -157,118 +157,78 @@ function onUserCommand(command: string): void { diff --git a/src/components/ty-tabs.vue b/src/components/ty-tabs.vue index b754ed0..6ff4f89 100644 --- a/src/components/ty-tabs.vue +++ b/src/components/ty-tabs.vue @@ -87,21 +87,14 @@ onBeforeUnmount(() => document.removeEventListener('click', closeMenu)) diff --git a/src/pages/forgot-password.vue b/src/pages/forgot-password.vue index dfb9aec..a825b58 100644 --- a/src/pages/forgot-password.vue +++ b/src/pages/forgot-password.vue @@ -103,9 +103,7 @@ async function onSubmit(): Promise { } .auth__card { - @apply rounded-lg border border-solid p-2xl shadow-md; - width: 440px; - max-width: 92vw; + @apply rounded-lg border border-solid p-2xl shadow-md w-[440px] max-w-[92vw]; background: var(--wm-bg-color-base); border-color: var(--wm-border-color-light); } @@ -135,10 +133,9 @@ async function onSubmit(): Promise { } .auth__form :deep(.el-input__wrapper) { - @apply rounded-base; + @apply rounded-base transition-shadow duration-200; background-color: var(--wm-bg-color-page); box-shadow: none; - transition: box-shadow 0.2s; } .auth__form :deep(.el-input__wrapper:hover) { @@ -150,12 +147,11 @@ async function onSubmit(): Promise { } .auth__submit { - @apply mt-lg h-11 w-full border-none text-base rounded-full; + @apply mt-lg h-11 w-full border-none text-base rounded-full tracking-[2px]; background: linear-gradient(90deg, var(--wm-color-primary), var(--wm-color-primary-dark-2)); - letter-spacing: 2px; &:hover { - opacity: 0.9; + @apply opacity-90; } } diff --git a/src/pages/index.vue b/src/pages/index.vue index 178325b..4b6b383 100644 --- a/src/pages/index.vue +++ b/src/pages/index.vue @@ -94,9 +94,8 @@ function decodeUsername(token: string | null): string { } .home__banner { - @apply relative overflow-hidden rounded-lg; + @apply relative overflow-hidden rounded-lg text-white; background: linear-gradient(135deg, var(--wm-color-primary), var(--wm-color-primary-dark-2)); - color: #fff; } .home__banner-decor { @@ -130,13 +129,11 @@ function decodeUsername(token: string | null): string { } .home__datetime { - @apply mt-sm text-base; - opacity: 0.9; + @apply mt-sm text-base opacity-90; } .home__subtitle { - @apply mt-md text-sm; - opacity: 0.75; + @apply mt-md text-sm opacity-75; } .home__modules { diff --git a/src/pages/login/index.vue b/src/pages/login/index.vue index dc46ca1..c237e97 100644 --- a/src/pages/login/index.vue +++ b/src/pages/login/index.vue @@ -223,9 +223,7 @@ function onRegister(): void { /* ---------- 品牌区(split) ---------- */ .login__brand { - @apply relative hidden md:flex flex-col overflow-hidden; - width: 44%; - color: #fff; + @apply relative hidden md:flex flex-col overflow-hidden w-[44%] text-white; } .login__brand-decor { @@ -268,13 +266,11 @@ function onRegister(): void { } .login__brand-subtitle { - @apply mt-md text-base; - opacity: 0.85; + @apply mt-md text-base opacity-85; } .login__brand-copyright { - @apply relative mx-xl mb-lg border-t border-white/20 pt-lg text-center text-sm; - opacity: 0.7; + @apply relative mx-xl mb-lg border-t border-white/20 pt-lg text-center text-sm opacity-70; } /* ---------- 表单区 ---------- */ @@ -283,9 +279,7 @@ function onRegister(): void { } .login__panel { - @apply rounded-lg border border-solid p-2xl shadow-md; - width: 440px; - max-width: 92vw; + @apply rounded-lg border border-solid p-2xl shadow-md w-[440px] max-w-[92vw]; background: var(--wm-bg-color-base); border-color: var(--wm-border-color-light); } @@ -316,10 +310,9 @@ function onRegister(): void { } .login__form :deep(.el-input__wrapper) { - @apply rounded-base; + @apply rounded-base transition-shadow duration-200; background-color: var(--wm-bg-color-page); box-shadow: none; - transition: box-shadow 0.2s; } .login__form :deep(.el-input__wrapper:hover) { @@ -335,10 +328,9 @@ function onRegister(): void { } .login__captcha-code { - @apply flex w-28 flex-shrink-0 cursor-pointer select-none items-center justify-center rounded-base font-bold text-lg; + @apply flex w-28 flex-shrink-0 cursor-pointer select-none items-center justify-center rounded-base font-bold text-lg tracking-[4px]; background: var(--wm-bg-color-page); color: var(--wm-color-primary); - letter-spacing: 4px; } .login__row { @@ -346,12 +338,11 @@ function onRegister(): void { } .login__submit { - @apply mt-lg h-11 w-full border-none text-base rounded-full; + @apply mt-lg h-11 w-full border-none text-base rounded-full tracking-[2px]; background: linear-gradient(90deg, var(--wm-color-primary), var(--wm-color-primary-dark-2)); - letter-spacing: 2px; &:hover { - opacity: 0.9; + @apply opacity-90; } } diff --git a/src/pages/register.vue b/src/pages/register.vue index d8facb5..55c7e4a 100644 --- a/src/pages/register.vue +++ b/src/pages/register.vue @@ -117,9 +117,7 @@ async function onSubmit(): Promise { } .auth__card { - @apply rounded-lg border border-solid p-2xl shadow-md; - width: 440px; - max-width: 92vw; + @apply rounded-lg border border-solid p-2xl shadow-md w-[440px] max-w-[92vw]; background: var(--wm-bg-color-base); border-color: var(--wm-border-color-light); } @@ -149,10 +147,9 @@ async function onSubmit(): Promise { } .auth__form :deep(.el-input__wrapper) { - @apply rounded-base; + @apply rounded-base transition-shadow duration-200; background-color: var(--wm-bg-color-page); box-shadow: none; - transition: box-shadow 0.2s; } .auth__form :deep(.el-input__wrapper:hover) { @@ -164,12 +161,11 @@ async function onSubmit(): Promise { } .auth__submit { - @apply mt-lg h-11 w-full border-none text-base rounded-full; + @apply mt-lg h-11 w-full border-none text-base rounded-full tracking-[2px]; background: linear-gradient(90deg, var(--wm-color-primary), var(--wm-color-primary-dark-2)); - letter-spacing: 2px; &:hover { - opacity: 0.9; + @apply opacity-90; } } diff --git a/src/pages/system/role/assign-resources-form.vue b/src/pages/system/role/assign-resources-form.vue index 6e0afe6..c058a7d 100644 --- a/src/pages/system/role/assign-resources-form.vue +++ b/src/pages/system/role/assign-resources-form.vue @@ -47,7 +47,6 @@ defineExpose({ submit }) diff --git a/stats.html b/stats.html index e86fb3c..529da94 100644 --- a/stats.html +++ b/stats.html @@ -4930,7 +4930,7 @@ var drawChart = (function (exports) {