public/ruoyi-plus-vben5-h
1
0
Fork 0
mirror of https://github.com/imdap/ruoyi-plus-vben5.git synced 2026-05-06 10:01:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: migrate to Tailwind CSS v4 (#7614)

Browse Source 
* chore: update deps

* feat: use jsonc/x language

* chore: update eslint 10.0

* fix: no-useless-assignment

* feat: add CLAUDE.md

* chore: ignore

* feat: claude

* fix: lint

* chore: suppot eslint v10

* fix: lint

* fix: lint

* fix: type check

* fix: unit test

* fix: Suggested fix

* fix: unit test

* chore: update stylelint v17

* chore: update all major deps

* fix:  echarts console warn

* chore: update vitest v4

* feat: add skills ignores

* chore: update deps

* chore: update deps

* fix: cspell

* chore: update deps

* chore: update tailwindcss v4

* chore: remove postcss config

* fix: no use catalog

* chore: tailwind v4 config

* fix: tailwindcss v4 sort

* feat: use eslint-plugin-better-tailwindcss

* fix: Interference between enforce-consistent-line-wrapping, jsx-curly-brace-presence and Prettier

* fix: Interference between enforce-consistent-line-wrapping, jsx-curly-brace-presence and Prettier

* fix(lint): resolve prettier and better-tailwindcss formatting conflicts

* fix(tailwind): update theme references and lint sources

* style(format): normalize apps docs and playground vue files

* style(format): normalize core ui-kit components

* style(format): normalize effects ui and layout components
This commit is contained in:
xingyu
2026-03-10 05:08:45 +08:00
committed by GitHub
parent aa7d8630b5
commit a4736a49f8
289 changed files with 5286 additions and 6331 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
View File

@@ -78,7 +78,7 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
ref="contentRef"
:class="contentClass"
:style="style"
class="tabs-chrome !flex h-full w-max overflow-y-hidden pr-6"
class="tabs-chrome flex! h-full w-max overflow-y-hidden pr-6"
>
<TransitionGroup name="slide-left">
<div
@@ -94,7 +94,7 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
]"
:data-active-tab="active"
:data-index="i"
class="tabs-chrome__item draggable translate-all group relative -mr-3 flex h-full select-none items-center"
class="draggable group tabs-chrome__item translate-all relative -mr-3 flex h-full items-center select-none"
data-tab-item="true"
@click="active = tab.key"
@mousedown="onMouseDown($event, tab)"
@@ -109,24 +109,24 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
<!-- divider -->
<div
v-if="i !== 0 && tab.key !== active"
class="tabs-chrome__divider absolute left-[var(--gap)] top-1/2 z-0 h-4 w-[1px] translate-y-[-50%] bg-border transition-all"
class="tabs-chrome__divider absolute top-1/2 left-(--gap) z-0 h-4 w-px translate-y-[-50%] bg-border transition-all"
></div>
<!-- background -->
<div
class="tabs-chrome__background absolute z-[-1] size-full px-[calc(var(--gap)-1px)] py-0 transition-opacity duration-150"
>
<div
class="tabs-chrome__background-content h-full rounded-tl-[var(--gap)] rounded-tr-[var(--gap)] duration-150 group-[.is-active]:bg-primary/15 dark:group-[.is-active]:bg-accent"
class="tabs-chrome__background-content h-full rounded-tl-(--gap) rounded-tr-(--gap) duration-150 group-[.is-active]:bg-primary/15 dark:group-[.is-active]:bg-accent"
></div>
<svg
class="tabs-chrome__background-before absolute bottom-0 left-[-1px] fill-transparent transition-all duration-150 group-[.is-active]:fill-primary/15 dark:group-[.is-active]:fill-accent"
class="tabs-chrome__background-before absolute bottom-0 -left-px fill-transparent transition-all duration-150 group-[.is-active]:fill-primary/15 dark:group-[.is-active]:fill-accent"
height="7"
width="7"
>
<path d="M 0 7 A 7 7 0 0 0 7 0 L 7 7 Z" />
</svg>
<svg
class="tabs-chrome__background-after absolute bottom-0 right-[-1px] fill-transparent transition-all duration-150 group-[.is-active]:fill-primary/15 dark:group-[.is-active]:fill-accent"
class="tabs-chrome__background-after absolute -right-px bottom-0 fill-transparent transition-all duration-150 group-[.is-active]:fill-primary/15 dark:group-[.is-active]:fill-accent"
height="7"
width="7"
>
@@ -136,24 +136,24 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
<!-- extra -->
<div
class="tabs-chrome__extra absolute right-[var(--gap)] top-1/2 z-[3] size-4 translate-y-[-50%]"
class="tabs-chrome__extra absolute top-1/2 right-(--gap) z-3 size-4 translate-y-[-50%]"
>
<!-- close-icon -->
<X
v-show="!tab.affixTab && tabsView.length > 1 && tab.closable"
class="mt-[2px] size-3 cursor-pointer rounded-full stroke-accent-foreground/80 text-accent-foreground/80 transition-all hover:bg-accent hover:stroke-accent-foreground group-[.is-active]:text-accent-foreground"
class="mt-[2px] size-3 cursor-pointer rounded-full stroke-accent-foreground/80 text-accent-foreground/80 transition-all group-[.is-active]:text-accent-foreground hover:bg-accent hover:stroke-accent-foreground"
@click.stop="() => emit('close', tab.key)"
/>
<Pin
v-show="tab.affixTab && tabsView.length > 1 && tab.closable"
class="mt-[1px] size-3.5 cursor-pointer rounded-full text-accent-foreground/80 transition-all hover:text-accent-foreground group-[.is-active]:text-accent-foreground"
class="mt-px size-3.5 cursor-pointer rounded-full text-accent-foreground/80 transition-all group-[.is-active]:text-accent-foreground hover:text-accent-foreground"
@click.stop="() => emit('unpin', tab)"
/>
</div>
<!-- tab-item-main -->
<div
class="tabs-chrome__item-main z-[2] mx-[calc(var(--gap)*2)] my-0 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] pl-2 pr-4 text-accent-foreground duration-150 group-[.is-active]:text-primary dark:group-[.is-active]:text-accent-foreground"
class="tabs-chrome__item-main z-2 mx-[calc(var(--gap)*2)] my-0 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] pr-4 pl-2 text-accent-foreground duration-150 group-[.is-active]:text-primary dark:group-[.is-active]:text-accent-foreground"
>
<VbenIcon
v-if="showIcon"
@@ -161,7 +161,7 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
class="mr-1 flex size-4 items-center overflow-hidden group-hover:animate-[shrink_0.3s_ease-in-out]"
/>
<span class="flex-1 overflow-hidden whitespace-nowrap text-sm">
<span class="flex-1 overflow-hidden text-sm whitespace-nowrap">
{{ tab.title }}
</span>
</div>
@@ -173,6 +173,8 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
</template>
<style scoped>
@reference "@vben-core/design/theme";
.tabs-chrome {
&__item:not(.dragging) {
@apply cursor-pointer;
@@ -192,7 +194,7 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
@apply pb-[2px];
&-content {
@apply mx-[2px] rounded-md bg-accent;
@apply bg-accent mx-[2px] rounded-md;
}
}
}
@@ -202,7 +204,7 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
& + .tabs-chrome__item {
.tabs-chrome__divider {
@apply opacity-0 !important;
@apply !opacity-0;
}
}
}

12
packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue
View File

@@ -81,7 +81,7 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
<template>
<div
:class="contentClass"
class="relative !flex h-full w-max items-center overflow-hidden pr-6"
class="relative flex! h-full w-max items-center overflow-hidden pr-6"
>
<TransitionGroup name="slide-left">
<div
@@ -96,7 +96,7 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
typeWithClass.content,
]"
:data-index="i"
class="tab-item translate-all group relative flex cursor-pointer select-none [&:not(.is-active)]:hover:bg-accent"
class="group tab-item translate-all relative flex cursor-pointer select-none [&:not(.is-active)]:hover:bg-accent"
data-tab-item="true"
@click="active = tab.key"
@mousedown="onMouseDown($event, tab)"
@@ -110,17 +110,17 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
<div class="relative flex size-full items-center">
<!-- extra -->
<div
class="absolute right-1.5 top-1/2 z-[3] translate-y-[-50%] overflow-hidden"
class="absolute top-1/2 right-1.5 z-3 translate-y-[-50%] overflow-hidden"
>
<!-- close-icon -->
<X
v-show="!tab.affixTab && tabsView.length > 1 && tab.closable"
class="size-3 cursor-pointer rounded-full stroke-accent-foreground/80 transition-all hover:bg-accent hover:stroke-accent-foreground group-[.is-active]:text-primary dark:group-[.is-active]:text-accent-foreground"
class="size-3 cursor-pointer rounded-full stroke-accent-foreground/80 transition-all group-[.is-active]:text-primary hover:bg-accent hover:stroke-accent-foreground dark:group-[.is-active]:text-accent-foreground"
@click.stop="() => emit('close', tab.key)"
/>
<Pin
v-show="tab.affixTab && tabsView.length > 1 && tab.closable"
class="mt-[1px] size-3.5 cursor-pointer rounded-full transition-all hover:bg-accent hover:stroke-accent-foreground group-[.is-active]:text-primary dark:group-[.is-active]:text-accent-foreground"
class="mt-px size-3.5 cursor-pointer rounded-full transition-all group-[.is-active]:text-primary hover:bg-accent hover:stroke-accent-foreground dark:group-[.is-active]:text-accent-foreground"
@click.stop="() => emit('unpin', tab)"
/>
</div>
@@ -136,7 +136,7 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
fallback
/>
<span class="flex-1 overflow-hidden whitespace-nowrap text-sm">
<span class="flex-1 overflow-hidden text-sm whitespace-nowrap">
{{ tab.title }}
</span>
</div>