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; @apply inline-block align-mid text-xl;
} }
.svg { .svg {
@apply inline-block align-mid; @apply inline-block align-mid h-4 w-4;
width: 1rem;
height: 1rem;
} }
</style> </style>

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

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

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

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

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

@ -37,33 +37,16 @@ const emit = defineEmits<{
<style scoped lang="scss"> <style scoped lang="scss">
.ty-mixbar { .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); 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); height: var(--ty-sidebar-height, 100vh);
padding-top: 8px; border-color: var(--wm-border-color-light);
background: var(--wm-bg-color-base);
border-right: 1px solid var(--wm-border-color-light);
&__item { &__item {
display: flex; @apply flex items-center justify-center w-12 h-12 mb-1 rounded-base cursor-pointer text-[22px] text-text-regular;
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;
&:hover { &:hover {
background: var(--wm-bg-color-page); @apply bg-bg-page;
} }
&.is-active { &.is-active {

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

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

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

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

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

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

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

@ -103,9 +103,7 @@ async function onSubmit(): Promise<void> {
} }
.auth__card { .auth__card {
@apply rounded-lg border border-solid p-2xl shadow-md; @apply rounded-lg border border-solid p-2xl shadow-md w-[440px] max-w-[92vw];
width: 440px;
max-width: 92vw;
background: var(--wm-bg-color-base); background: var(--wm-bg-color-base);
border-color: var(--wm-border-color-light); border-color: var(--wm-border-color-light);
} }
@ -135,10 +133,9 @@ async function onSubmit(): Promise<void> {
} }
.auth__form :deep(.el-input__wrapper) { .auth__form :deep(.el-input__wrapper) {
@apply rounded-base; @apply rounded-base transition-shadow duration-200;
background-color: var(--wm-bg-color-page); background-color: var(--wm-bg-color-page);
box-shadow: none; box-shadow: none;
transition: box-shadow 0.2s;
} }
.auth__form :deep(.el-input__wrapper:hover) { .auth__form :deep(.el-input__wrapper:hover) {
@ -150,12 +147,11 @@ async function onSubmit(): Promise<void> {
} }
.auth__submit { .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)); background: linear-gradient(90deg, var(--wm-color-primary), var(--wm-color-primary-dark-2));
letter-spacing: 2px;
&:hover { &: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 { .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)); background: linear-gradient(135deg, var(--wm-color-primary), var(--wm-color-primary-dark-2));
color: #fff;
} }
.home__banner-decor { .home__banner-decor {
@ -130,13 +129,11 @@ function decodeUsername(token: string | null): string {
} }
.home__datetime { .home__datetime {
@apply mt-sm text-base; @apply mt-sm text-base opacity-90;
opacity: 0.9;
} }
.home__subtitle { .home__subtitle {
@apply mt-md text-sm; @apply mt-md text-sm opacity-75;
opacity: 0.75;
} }
.home__modules { .home__modules {

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

@ -223,9 +223,7 @@ function onRegister(): void {
/* ---------- 品牌区（split） ---------- */ /* ---------- 品牌区（split） ---------- */
.login__brand { .login__brand {
@apply relative hidden md:flex flex-col overflow-hidden; @apply relative hidden md:flex flex-col overflow-hidden w-[44%] text-white;
width: 44%;
color: #fff;
} }
.login__brand-decor { .login__brand-decor {
@ -268,13 +266,11 @@ function onRegister(): void {
} }
.login__brand-subtitle { .login__brand-subtitle {
@apply mt-md text-base; @apply mt-md text-base opacity-85;
opacity: 0.85;
} }
.login__brand-copyright { .login__brand-copyright {
@apply relative mx-xl mb-lg border-t border-white/20 pt-lg text-center text-sm; @apply relative mx-xl mb-lg border-t border-white/20 pt-lg text-center text-sm opacity-70;
opacity: 0.7;
} }
/* ---------- 表单区 ---------- */ /* ---------- 表单区 ---------- */
@ -283,9 +279,7 @@ function onRegister(): void {
} }
.login__panel { .login__panel {
@apply rounded-lg border border-solid p-2xl shadow-md; @apply rounded-lg border border-solid p-2xl shadow-md w-[440px] max-w-[92vw];
width: 440px;
max-width: 92vw;
background: var(--wm-bg-color-base); background: var(--wm-bg-color-base);
border-color: var(--wm-border-color-light); border-color: var(--wm-border-color-light);
} }
@ -316,10 +310,9 @@ function onRegister(): void {
} }
.login__form :deep(.el-input__wrapper) { .login__form :deep(.el-input__wrapper) {
@apply rounded-base; @apply rounded-base transition-shadow duration-200;
background-color: var(--wm-bg-color-page); background-color: var(--wm-bg-color-page);
box-shadow: none; box-shadow: none;
transition: box-shadow 0.2s;
} }
.login__form :deep(.el-input__wrapper:hover) { .login__form :deep(.el-input__wrapper:hover) {
@ -335,10 +328,9 @@ function onRegister(): void {
} }
.login__captcha-code { .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); background: var(--wm-bg-color-page);
color: var(--wm-color-primary); color: var(--wm-color-primary);
letter-spacing: 4px;
} }
.login__row { .login__row {
@ -346,12 +338,11 @@ function onRegister(): void {
} }
.login__submit { .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)); background: linear-gradient(90deg, var(--wm-color-primary), var(--wm-color-primary-dark-2));
letter-spacing: 2px;
&:hover { &: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 { .auth__card {
@apply rounded-lg border border-solid p-2xl shadow-md; @apply rounded-lg border border-solid p-2xl shadow-md w-[440px] max-w-[92vw];
width: 440px;
max-width: 92vw;
background: var(--wm-bg-color-base); background: var(--wm-bg-color-base);
border-color: var(--wm-border-color-light); border-color: var(--wm-border-color-light);
} }
@ -149,10 +147,9 @@ async function onSubmit(): Promise<void> {
} }
.auth__form :deep(.el-input__wrapper) { .auth__form :deep(.el-input__wrapper) {
@apply rounded-base; @apply rounded-base transition-shadow duration-200;
background-color: var(--wm-bg-color-page); background-color: var(--wm-bg-color-page);
box-shadow: none; box-shadow: none;
transition: box-shadow 0.2s;
} }
.auth__form :deep(.el-input__wrapper:hover) { .auth__form :deep(.el-input__wrapper:hover) {
@ -164,12 +161,11 @@ async function onSubmit(): Promise<void> {
} }
.auth__submit { .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)); background: linear-gradient(90deg, var(--wm-color-primary), var(--wm-color-primary-dark-2));
letter-spacing: 2px;
&:hover { &: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"> <style scoped lang="scss">
.assign-tree { .assign-tree {
max-height: 420px; @apply max-h-[420px] overflow-y-auto;
overflow-y: auto;
} }
</style> </style>

2
stats.html
View File

File diff suppressed because one or more lines are too long