public/ruoyi-plus-vben5-h
1
0
Fork 0
mirror of https://github.com/imdap/ruoyi-plus-vben5.git synced 2026-04-28 04:19:39 +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

6
packages/effects/common-ui/src/components/captcha/point-selection-captcha/index.vue
View File

@@ -152,7 +152,7 @@ function handleConfirm() {
top: `${point.y - POINT_OFFSET}px`,
left: `${point.x - POINT_OFFSET}px`,
}"
class="bg-primary text-primary-50 border-primary-50 absolute z-20 flex h-5 w-5 cursor-default items-center justify-center rounded-full border-2"
class="absolute z-20 flex-center size-5 cursor-default rounded-full border-2 border-primary-50 bg-primary text-primary-50"
role="button"
tabindex="0"
>
@@ -163,11 +163,11 @@ function handleConfirm() {
v-if="hintImage"
:alt="$t('ui.captcha.alt')"
:src="hintImage"
class="border-border h-10 w-full rounded border"
class="h-10 w-full rounded-sm border border-border"
/>
<div
v-else-if="hintText"
class="border-border flex-center h-10 w-full rounded border"
class="flex-center h-10 w-full rounded-sm border border-border"
>
{{ `${$t('ui.captcha.clickInOrder')}` + `【${hintText}】` }}
</div>

4
packages/effects/common-ui/src/components/captcha/point-selection-captcha/point-selection-captcha-card.vue
View File

@@ -64,7 +64,9 @@ function handleClick(e: MouseEvent) {
</div>
</CardTitle>
</CardHeader>
<CardContent class="relative mt-2 flex w-full overflow-hidden rounded p-0">
<CardContent
class="relative mt-2 flex w-full overflow-hidden rounded-sm p-0"
>
<img
v-show="captchaImage"
:alt="$t('ui.captcha.alt')"

2
packages/effects/common-ui/src/components/captcha/slider-captcha/index.vue
View File

@@ -200,7 +200,7 @@ function resume() {
ref="wrapperRef"
:class="
cn(
'border-border bg-background-deep relative flex h-10 w-full items-center overflow-hidden rounded-md border text-center',
'relative flex h-10 w-full items-center overflow-hidden rounded-md border border-border bg-background-deep text-center',
props.class,
)
"

6
packages/effects/common-ui/src/components/captcha/slider-captcha/slider-captcha-action.vue
View File

@@ -48,14 +48,14 @@ defineExpose({
<div
ref="actionRef"
:class="{
'transition-width !left-0 duration-300': toLeft,
'transition-width left-0! duration-300': toLeft,
'rounded-md': isDragging,
}"
:style="style"
class="bg-background dark:bg-accent absolute left-0 top-0 flex h-full cursor-move items-center justify-center px-3.5 shadow-md"
class="absolute top-0 left-0 flex-center h-full cursor-move bg-background px-3.5 shadow-md dark:bg-accent"
name="captcha-action"
>
<Slot :is-passing="isPassing" class="text-foreground/60 size-4">
<Slot :is-passing="isPassing" class="size-4 text-foreground/60">
<slot name="icon">
<ChevronsRight v-if="!isPassing" />
<Check v-else />

4
packages/effects/common-ui/src/components/captcha/slider-captcha/slider-captcha-bar.vue
View File

@@ -33,8 +33,8 @@ defineExpose({
<template>
<div
ref="barRef"
:class="toLeft && 'transition-width !w-0 duration-300'"
:class="toLeft && 'transition-width w-0! duration-300'"
:style="style"
class="bg-success absolute h-full"
class="absolute h-full bg-success"
></div>
</template>

2
packages/effects/common-ui/src/components/captcha/slider-captcha/slider-captcha-content.vue
View File

@@ -36,7 +36,7 @@ defineExpose({
[$style.success]: isPassing,
}"
:style="style"
class="absolute top-0 flex size-full select-none items-center justify-center text-xs"
class="absolute top-0 flex-center size-full text-xs select-none"
>
<slot name="text">
<VbenSpineText class="flex h-full items-center">

2
packages/effects/common-ui/src/components/captcha/slider-rotate-captcha/index.vue
View File

@@ -167,7 +167,7 @@ defineExpose({
<div class="relative flex flex-col items-center">
<div
:style="getImgWrapStyleRef"
class="border-border relative cursor-pointer overflow-hidden rounded-full border shadow-md"
class="relative cursor-pointer overflow-hidden rounded-full border border-border shadow-md"
>
<img
:class="imgCls"

4
packages/effects/common-ui/src/components/captcha/slider-translate-captcha/index.vue
View File

@@ -261,7 +261,7 @@ onMounted(() => {
<template>
<div class="relative flex flex-col items-center">
<div
class="border-border relative flex cursor-pointer overflow-hidden border shadow-md"
class="relative flex cursor-pointer overflow-hidden border border-border shadow-md"
>
<canvas
ref="puzzleCanvasRef"
@@ -278,7 +278,7 @@ onMounted(() => {
@click="resume"
></canvas>
<div
class="h-15 absolute bottom-3 left-0 z-10 block w-full text-center text-xs leading-[30px] text-white"
class="absolute bottom-3 left-0 z-10 block h-15 w-full text-center text-xs leading-[30px] text-white"
>
<div
v-if="state.showTip"

34
packages/effects/common-ui/src/components/cropper/cropper.vue
View File

@@ -851,6 +851,8 @@ defineExpose({ getCropImage });
</template>
<style scoped>
@reference "@vben-core/design/theme";
.cropper-action-wrapper {
@apply box-border flex items-center justify-center;
@@ -880,34 +882,34 @@ defineExpose({ getCropImage });
/* 遮罩层 */
.cropper-mask {
@apply absolute left-0 top-0 bg-black/50;
@apply absolute top-0 left-0 bg-black/50;
}
.cropper-mask-view {
@apply absolute left-0 top-0;
@apply absolute top-0 left-0;
}
/* 裁剪框 */
.cropper-box {
@apply absolute left-0 top-0 z-10;
@apply absolute top-0 left-0 z-10;
}
.cropper-view {
@apply absolute bottom-0 left-0 right-0 top-0 select-none outline outline-1 outline-blue-500;
@apply absolute top-0 right-0 bottom-0 left-0 outline outline-1 outline-blue-500 select-none;
}
/* 裁剪框辅助线 */
.cropper-dashed-h {
@apply absolute left-0 top-1/3 block h-1/3 w-full border-b border-t border-dashed border-gray-200/50;
@apply absolute top-1/3 left-0 block h-1/3 w-full border-t border-b border-dashed border-gray-200/50;
}
.cropper-dashed-v {
@apply absolute left-1/3 top-0 block h-full w-1/3 border-l border-r border-dashed border-gray-200/50;
@apply absolute top-0 left-1/3 block h-full w-1/3 border-r border-l border-dashed border-gray-200/50;
}
/* 裁剪框拖拽区域 */
.cropper-move-area {
@apply absolute left-0 top-0 block h-full w-full cursor-move bg-white/10;
@apply absolute top-0 left-0 block h-full w-full cursor-move bg-white/10;
}
/* 边框拖拽线 */
@@ -919,15 +921,15 @@ defineExpose({ getCropImage });
}
.cropper-line-e {
@apply right-[-3px] top-0 h-full w-1;
@apply top-0 right-[-3px] h-full w-1;
}
.cropper-line-n {
@apply left-0 top-[-3px] h-1 w-full;
@apply top-[-3px] left-0 h-1 w-full;
}
.cropper-line-w {
@apply left-[-3px] top-0 h-full w-1;
@apply top-0 left-[-3px] h-full w-1;
}
.cropper-line-s {
@@ -945,11 +947,11 @@ defineExpose({ getCropImage });
/* 边角拖拽点位置和光标 */
.cropper-point-ne {
@apply right-[-5px] top-[-5px] cursor-ne-resize;
@apply top-[-5px] right-[-5px] cursor-ne-resize;
}
.cropper-point-nw {
@apply left-[-5px] top-[-5px] cursor-nw-resize;
@apply top-[-5px] left-[-5px] cursor-nw-resize;
}
.cropper-point-sw {
@@ -957,20 +959,20 @@ defineExpose({ getCropImage });
}
.cropper-point-se {
@apply bottom-[-5px] right-[-5px] cursor-se-resize;
@apply right-[-5px] bottom-[-5px] cursor-se-resize;
}
/* 边中点拖拽点位置和光标 */
.cropper-point-e {
@apply right-[-5px] top-1/2 -mt-1 cursor-e-resize;
@apply top-1/2 right-[-5px] -mt-1 cursor-e-resize;
}
.cropper-point-n {
@apply left-1/2 top-[-5px] -ml-1 cursor-n-resize;
@apply top-[-5px] left-1/2 -ml-1 cursor-n-resize;
}
.cropper-point-w {
@apply left-[-5px] top-1/2 -mt-1 cursor-w-resize;
@apply top-1/2 left-[-5px] -mt-1 cursor-w-resize;
}
.cropper-point-s {

2
packages/effects/common-ui/src/components/ellipsis-text/ellipsis-text.vue
View File

@@ -205,7 +205,7 @@ function handleExpand() {
<div
ref="ellipsis"
:class="{
'!cursor-pointer': expand,
'cursor-pointer!': expand,
['block truncate']: line === 1,
[$style.ellipsisMultiLine]: line > 1,
}"

4
packages/effects/common-ui/src/components/icon-picker/icon-picker.vue
View File

@@ -219,7 +219,7 @@ defineExpose({ toggleOpenState, open, close });
/>
<VbenIcon
:icon="currentSelect || Grip"
class="absolute right-1 top-1 size-6"
class="absolute top-1 right-1 size-6"
aria-hidden="true"
/>
</div>
@@ -309,7 +309,7 @@ defineExpose({ toggleOpenState, open, close });
</template>
<template v-else>
<div class="flex-col-center text-muted-foreground min-h-[150px] w-full">
<div class="flex-col-center min-h-[150px] w-full text-muted-foreground">
<EmptyIcon class="size-10" />
<div class="mt-1 text-sm">{{ $t('common.noData') }}</div>
</div>

4
packages/effects/common-ui/src/components/page/page.vue
View File

@@ -62,7 +62,7 @@ onMounted(() => {
ref="headerRef"
:class="
cn(
'bg-card border-border relative flex items-end border-b px-6 py-4',
'relative flex items-end border-b border-border bg-card px-6 py-4',
headerClass,
)
"
@@ -92,7 +92,7 @@ onMounted(() => {
<div
v-if="$slots.footer"
ref="footerRef"
:class="cn('bg-card align-center flex px-6 py-4', footerClass)"
:class="cn('align-center flex bg-card px-6 py-4', footerClass)"
>
<slot name="footer"></slot>
</div>

2
packages/effects/common-ui/src/components/tree/tree.vue
View File

@@ -17,7 +17,7 @@ const props = withDefaults(defineProps<TreeProps>(), treePropsDefaults());
</VbenTree>
<div
v-else
class="flex-col-center text-muted-foreground cursor-pointer rounded-lg border p-10 text-sm font-medium"
class="flex-col-center cursor-pointer rounded-lg border p-10 text-sm font-medium text-muted-foreground"
>
<Inbox class="size-10" />
<div class="mt-1">{{ $t('common.noData') }}</div>