touyun_liuyun/ec-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: convert raw CSS to Tailwind @apply + search collapseCount=3

Browse Source 
- 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 <noreply@anthropic.com>
This commit is contained in:
liuyun 2026-10-11 13:18:45 +08:00
parent 8742932f21
commit c96151d2ae
15 changed files with 81 additions and 219 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/icon/icon.vue
View File

@ -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;
}
</style>

14
src/components/ty-footer.vue
View File

@ -23,20 +23,12 @@ withDefaults(
<style scoped lang="scss">
.ty-footer {
display: flex;
align-items: center;
justify-content: center;
padding: 6px 16px;
@apply flex items-center justify-center px-4 py-1.5 text-xs text-text-secondary bg-bg-base border-t border-solid;
line-height: 1.4;
font-size: var(--wm-font-size-xs);
color: var(--wm-color-text-secondary);
background: var(--wm-bg-color-base);
border-top: 1px solid var(--wm-border-color-light);
border-color: var(--wm-border-color-light);
}
.ty-footer.is-fixed {
position: sticky;
bottom: 0;
z-index: 9;
@apply sticky bottom-0 z-10;
}
</style>

74
src/components/ty-header.vue
View File

@ -157,118 +157,78 @@ function onUserCommand(command: string): void {
<style scoped lang="scss">
.ty-header {
display: flex;
align-items: center;
@apply flex items-center bg-bg-base pr-3;
height: var(--ty-header-height, 56px);
padding: 0 12px 0 0;
background: var(--wm-bg-color-base);
box-shadow: 0 1px 4px rgb(0 21 41 / 6%);
z-index: 100;
&.is-fixed {
position: sticky;
top: 0;
@apply sticky top-0;
}
&__left {
display: flex;
align-items: center;
gap: 8px;
@apply flex items-center gap-2;
}
&__logo {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
flex-shrink: 0;
overflow: hidden;
@apply flex items-center justify-center gap-2 shrink-0 overflow-hidden bg-bg-base border-r border-solid px-2;
height: var(--ty-header-height, 56px);
padding: 0 8px;
background: var(--wm-bg-color-base);
border-right: 1px solid var(--wm-border-color-light);
border-color: var(--wm-border-color-light);
}
&__logo-img {
width: 30px;
height: 30px;
flex-shrink: 0;
@apply w-[30px] h-[30px] shrink-0;
}
&__title {
font-size: var(--wm-font-size-lg);
font-weight: var(--wm-font-weight-semibold);
letter-spacing: 0.5px;
color: var(--wm-color-text-primary);
white-space: nowrap;
@apply tracking-[0.5px] text-lg font-semibold text-text-primary whitespace-nowrap;
}
&__action {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border: none;
border-radius: var(--wm-border-radius-base);
background: transparent;
font-size: 18px;
color: var(--wm-color-text-regular);
cursor: pointer;
transition: background-color 0.2s, color 0.2s;
@apply inline-flex items-center justify-center w-[34px] h-[34px] border-none rounded-base bg-transparent text-[18px] text-text-regular cursor-pointer transition-colors duration-200;
&:hover {
background: var(--wm-bg-color-page);
@apply bg-bg-page;
color: var(--el-color-primary);
}
}
&__nav {
@apply ml-1;
height: var(--ty-header-height, 56px);
margin-left: 4px;
// 覆盖 EP 横向菜单根元素默认的 1px 底边框（提高选择器优先级）
&.el-menu--horizontal {
border-bottom: none;
@apply border-b-0;
}
:deep(.el-menu-item),
:deep(.el-sub-menu__title) {
@apply text-text-regular;
height: var(--ty-header-height, 56px);
line-height: var(--ty-header-height, 56px);
color: var(--wm-color-text-regular);
}
:deep(.el-menu-item.is-active) {
@apply border-b-0;
color: var(--el-color-primary);
border-bottom: none;
}
:deep(.menu-icon) {
margin-right: 4px;
font-size: 16px;
@apply mr-1 text-base;
}
}
&__breadcrumb {
margin-left: 12px;
@apply ml-3;
}
&__right {
display: flex;
align-items: center;
gap: 2px;
margin-left: auto;
@apply ml-auto flex items-center gap-0.5;
}
&__user {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0 8px;
font-size: 16px;
color: var(--wm-color-text-regular);
cursor: pointer;
@apply inline-flex items-center gap-1.5 px-2 text-base text-text-regular cursor-pointer;
&:hover {
color: var(--el-color-primary);

25
src/components/ty-mixbar.vue
View File

@ -37,33 +37,16 @@ const emit = defineEmits<{
<style scoped lang="scss">
.ty-mixbar {
position: sticky;
@apply sticky self-start flex flex-col items-center w-16 shrink-0 bg-bg-base border-r border-solid pt-2;
top: var(--ty-sidebar-top, 0);
align-self: flex-start;
display: flex;
flex-direction: column;
align-items: center;
width: 64px;
flex-shrink: 0;
height: var(--ty-sidebar-height, 100vh);
padding-top: 8px;
background: var(--wm-bg-color-base);
border-right: 1px solid var(--wm-border-color-light);
border-color: var(--wm-border-color-light);
&__item {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
margin-bottom: 4px;
border-radius: var(--wm-border-radius-base);
font-size: 22px;
color: var(--wm-color-text-regular);
cursor: pointer;
@apply flex items-center justify-center w-12 h-12 mb-1 rounded-base cursor-pointer text-[22px] text-text-regular;
&:hover {
background: var(--wm-bg-color-page);
@apply bg-bg-page;
}
&.is-active {

2
src/components/ty-search-form.vue
View File

@ -27,7 +27,7 @@ const props = withDefaults(
collapseCount?: number
}>(),
{
collapseCount: 2,
collapseCount: 3,
},
)

23
src/components/ty-setting-panel.vue
View File

@ -93,36 +93,27 @@ function emitUpdate(): void {
<style scoped lang="scss">
.ty-setting-panel {
&__section {
padding: 12px 0;
border-bottom: 1px solid var(--wm-border-color-light);
@apply border-b border-solid py-3;
border-color: var(--wm-border-color-light);
&:last-child {
border-bottom: none;
@apply border-b-0;
}
}
&__title {
margin-bottom: 12px;
font-size: var(--wm-font-size-sm);
font-weight: var(--wm-font-weight-medium);
color: var(--wm-color-text-primary);
@apply mb-3 text-sm font-medium text-text-primary;
}
&__row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
font-size: var(--wm-font-size-sm);
color: var(--wm-color-text-regular);
@apply mb-3.5 flex items-center justify-between text-sm text-text-regular;
&:last-child {
margin-bottom: 0;
@apply mb-0;
}
&--block {
flex-direction: column;
align-items: stretch;
@apply flex-col items-stretch;
}
}
}

29
src/components/ty-sidebar.vue
View File

@ -69,18 +69,14 @@ function onSelect(index: string): void {
<style scoped lang="scss">
.ty-sidebar {
position: sticky;
@apply sticky self-start shrink-0 overflow-hidden bg-bg-base border-r border-solid;
top: var(--ty-sidebar-top, 0);
align-self: flex-start;
height: var(--ty-sidebar-height, 100vh);
flex-shrink: 0;
overflow: hidden;
background: var(--wm-bg-color-base);
border-right: 1px solid var(--wm-border-color-light);
transition: width 0.2s;
border-color: var(--wm-border-color-light);
@apply transition-[width] duration-200;
.el-menu {
border-right: none;
@apply border-r-0;
--el-menu-bg-color: transparent;
--el-menu-text-color: var(--wm-color-text-regular);
--el-menu-hover-bg-color: var(--wm-bg-color-page);
@ -88,43 +84,40 @@ function onSelect(index: string): void {
:deep(.el-menu-item),
:deep(.el-sub-menu__title) {
height: 44px;
@apply my-0.5 mx-2 h-11 rounded-base;
line-height: 44px;
margin: 2px 8px;
border-radius: var(--wm-border-radius-base);
}
:deep(.el-menu-item.is-active) {
@apply font-medium;
background: var(--el-color-primary-light-9);
color: var(--el-color-primary);
font-weight: var(--wm-font-weight-medium);
}
:deep(.el-menu-item:hover),
:deep(.el-sub-menu__title:hover) {
background: var(--wm-bg-color-page);
@apply bg-bg-page;
}
:deep(.icon) {
margin-right: 8px;
@apply mr-2;
}
}
.el-menu--collapse {
:deep(.el-menu-item),
:deep(.el-sub-menu__title) {
margin: 2px 4px;
@apply my-0.5 mx-1;
}
:deep(.icon) {
margin-right: 0;
font-size: 24px;
@apply mr-0 text-[24px];
}
}
}
/* 折叠时弹出的子菜单（teleport 到 body，需全局样式）图标与文字间距 */
:global(.ty-menu-popper .el-menu-item .icon) {
margin-right: 8px;
@apply mr-2;
}
</style>

38
src/components/ty-tabs.vue
View File

@ -87,21 +87,14 @@ onBeforeUnmount(() => document.removeEventListener('click', closeMenu))
<style scoped lang="scss">
.ty-tabs {
@apply flex items-center gap-1 overflow-x-auto px-2;
height: 36px;
background: var(--wm-bg-color-base);
border-bottom: 1px solid var(--wm-border-color-light);
@apply flex items-center gap-1 overflow-x-auto px-2 h-9 bg-bg-base border-b border-solid;
border-color: var(--wm-border-color-light);
&__item {
@apply flex flex-shrink-0 cursor-pointer items-center gap-1;
height: 28px;
padding: 0 10px;
border-radius: var(--wm-border-radius-base);
font-size: var(--wm-font-size-sm);
color: var(--wm-color-text-regular);
@apply flex flex-shrink-0 cursor-pointer items-center gap-1 h-7 px-2.5 rounded-base text-sm text-text-regular;
&:hover {
background: var(--wm-bg-color-page);
@apply bg-bg-page;
}
&.is-active {
@ -111,36 +104,25 @@ onBeforeUnmount(() => document.removeEventListener('click', closeMenu))
}
&__close {
@apply flex items-center justify-center;
width: 16px;
height: 16px;
border-radius: 50%;
font-size: 12px;
@apply flex items-center justify-center w-4 h-4 rounded-full text-xs;
&:hover {
color: #fff;
@apply text-white;
background: var(--wm-color-text-placeholder);
}
}
&__context-menu {
@apply fixed z-50;
min-width: 110px;
padding: 4px 0;
background: var(--wm-bg-color-base);
border: 1px solid var(--wm-border-color-light);
border-radius: var(--wm-border-radius-base);
@apply fixed z-50 min-w-[110px] py-1 bg-bg-base rounded-base border border-solid;
border-color: var(--wm-border-color-light);
box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
}
&__context-item {
@apply cursor-pointer;
padding: 6px 14px;
font-size: var(--wm-font-size-sm);
color: var(--wm-color-text-regular);
@apply cursor-pointer py-1.5 px-3.5 text-sm text-text-regular;
&:hover {
background: var(--wm-bg-color-page);
@apply bg-bg-page;
}
}
}

28
src/layouts/default.vue
View File

@ -280,42 +280,26 @@ watch(
<style scoped lang="scss">
.app-shell {
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
@apply flex flex-col h-screen overflow-hidden;
&.is-not-fixed {
height: auto;
min-height: 100vh;
overflow: visible;
@apply h-auto min-h-screen overflow-visible;
}
}
.app-body {
display: flex;
flex: 1;
align-items: stretch;
min-height: 0;
@apply flex flex-1 items-stretch min-h-0;
}
.app-content {
display: flex;
flex: 1;
flex-direction: column;
min-width: 0;
min-height: 0;
@apply flex flex-1 flex-col min-w-0 min-h-0;
}
.app-main {
flex: 1;
min-height: 0;
padding: 16px;
overflow-y: auto;
background: var(--wm-bg-color-page);
@apply flex-1 min-h-0 p-4 overflow-y-auto bg-bg-page;
.is-not-fixed & {
overflow-y: visible;
@apply overflow-y-visible;
}
}
</style>

12
src/pages/forgot-password.vue
View File

@ -103,9 +103,7 @@ async function onSubmit(): Promise<void> {
}
.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<void> {
}
.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<void> {
}
.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;
}
}

9
src/pages/index.vue
View File

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

25
src/pages/login/index.vue
View File

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

12
src/pages/register.vue
View File

@ -117,9 +117,7 @@ async function onSubmit(): Promise<void> {
}
.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<void> {
}
.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<void> {
}
.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;
}
}

3
src/pages/system/role/assign-resources-form.vue
View File

@ -47,7 +47,6 @@ defineExpose({ submit })
<style scoped lang="scss">
.assign-tree {
max-height: 420px;
overflow-y: auto;
@apply max-h-[420px] overflow-y-auto;
}
</style>

2
stats.html
View File

File diff suppressed because one or more lines are too long