wangziqi/yudao-ui-admin-vben
1
0
Fork 0
Code Issues Pull Requests Actions 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

26
packages/effects/common-ui/src/ui/about/about.vue
View File

@@ -114,7 +114,7 @@ const devDependenciesItems = Object.keys(devDependencies).map((key) => ({
<template>
<Page :title="title">
<template #description>
<p class="text-foreground mt-3 text-sm leading-6">
<p class="mt-3 text-sm/6 text-foreground">
<a :href="VBEN_GITHUB_URL" class="vben-link" target="_blank">
{{ name }}
</a>
@@ -123,16 +123,16 @@ const devDependenciesItems = Object.keys(devDependencies).map((key) => ({
</template>
<div class="card-box p-5">
<div>
<h5 class="text-foreground text-lg">基本信息</h5>
<h5 class="text-lg text-foreground">基本信息</h5>
</div>
<div class="mt-4">
<dl class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
<template v-for="item in vbenDescriptionItems" :key="item.title">
<div class="border-border border-t px-4 py-6 sm:col-span-1 sm:px-0">
<dt class="text-foreground text-sm font-medium leading-6">
<div class="border-t border-border px-4 py-6 sm:col-span-1 sm:px-0">
<dt class="text-sm/6 font-medium text-foreground">
{{ item.title }}
</dt>
<dd class="text-foreground mt-1 text-sm leading-6 sm:mt-2">
<dd class="mt-1 text-sm/6 text-foreground sm:mt-2">
<VbenRenderContent :content="item.content" />
</dd>
</div>
@@ -143,16 +143,16 @@ const devDependenciesItems = Object.keys(devDependencies).map((key) => ({
<div class="card-box mt-6 p-5">
<div>
<h5 class="text-foreground text-lg">生产环境依赖</h5>
<h5 class="text-lg text-foreground">生产环境依赖</h5>
</div>
<div class="mt-4">
<dl class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
<template v-for="item in dependenciesItems" :key="item.title">
<div class="border-border border-t px-4 py-3 sm:col-span-1 sm:px-0">
<dt class="text-foreground text-sm">
<div class="border-t border-border px-4 py-3 sm:col-span-1 sm:px-0">
<dt class="text-sm text-foreground">
{{ item.title }}
</dt>
<dd class="text-foreground/80 mt-1 text-sm sm:mt-2">
<dd class="mt-1 text-sm text-foreground/80 sm:mt-2">
<VbenRenderContent :content="item.content" />
</dd>
</div>
@@ -162,16 +162,16 @@ const devDependenciesItems = Object.keys(devDependencies).map((key) => ({
</div>
<div class="card-box mt-6 p-5">
<div>
<h5 class="text-foreground text-lg">开发环境依赖</h5>
<h5 class="text-lg text-foreground">开发环境依赖</h5>
</div>
<div class="mt-4">
<dl class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
<template v-for="item in devDependenciesItems" :key="item.title">
<div class="border-border border-t px-4 py-3 sm:col-span-1 sm:px-0">
<dt class="text-foreground text-sm">
<div class="border-t border-border px-4 py-3 sm:col-span-1 sm:px-0">
<dt class="text-sm text-foreground">
{{ item.title }}
</dt>
<dd class="text-foreground/80 mt-1 text-sm sm:mt-2">
<dd class="mt-1 text-sm text-foreground/80 sm:mt-2">
<VbenRenderContent :content="item.content" />
</dd>
</div>

4
packages/effects/common-ui/src/ui/authentication/auth-title.vue
View File

@@ -1,12 +1,12 @@
<template>
<div class="mb-7 sm:mx-auto sm:w-full sm:max-w-md">
<h2
class="text-foreground mb-3 text-3xl font-bold leading-9 tracking-tight lg:text-4xl"
class="mb-3 text-3xl/9 font-bold tracking-tight text-foreground lg:text-4xl"
>
<slot></slot>
</h2>
<p class="text-muted-foreground lg:text-md text-sm">
<p class="lg:text-md text-sm text-muted-foreground">
<slot name="desc"></slot>
</p>
</div>

2
packages/effects/common-ui/src/ui/authentication/login.vue
View File

@@ -146,7 +146,7 @@ defineExpose({
<div
v-if="showCodeLogin || showQrcodeLogin"
class="mb-2 mt-4 flex items-center justify-between"
class="mt-4 mb-2 flex items-center justify-between"
>
<VbenButton
v-if="showCodeLogin"

4
packages/effects/common-ui/src/ui/authentication/qrcode-login.vue
View File

@@ -84,9 +84,9 @@ function goToLogin() {
</template>
</Title>
<div class="flex-col-center mt-6">
<div class="mt-6 flex-col-center">
<img :src="qrcode" alt="qrcode" class="w-1/2" />
<p class="text-muted-foreground mt-4 text-sm">
<p class="mt-4 text-sm text-muted-foreground">
<slot name="description">
{{ description || $t('authentication.qrcodePrompt') }}
</slot>

6
packages/effects/common-ui/src/ui/authentication/third-party-login.vue
View File

@@ -24,11 +24,11 @@ const {
<template>
<div class="w-full sm:mx-auto md:max-w-md">
<div class="mt-4 flex items-center justify-between">
<span class="border-input w-[35%] border-b dark:border-gray-600"></span>
<span class="text-muted-foreground text-center text-xs uppercase">
<span class="w-[35%] border-b border-input dark:border-gray-600"></span>
<span class="text-center text-xs text-muted-foreground uppercase">
{{ $t('authentication.thirdPartyLogin') }}
</span>
<span class="border-input w-[35%] border-b dark:border-gray-600"></span>
<span class="w-[35%] border-b border-input dark:border-gray-600"></span>
</div>
<div class="mt-4 flex flex-wrap justify-center">

2
packages/effects/common-ui/src/ui/dashboard/analysis/analysis-charts-tabs.vue
View File

@@ -23,7 +23,7 @@ const defaultValue = computed(() => {
</script>
<template>
<div class="card-box w-full px-4 pb-5 pt-3">
<div class="card-box w-full px-4 pt-3 pb-5">
<Tabs :default-value="defaultValue">
<TabsList>
<template v-for="tab in tabs" :key="tab.label">

2
packages/effects/common-ui/src/ui/dashboard/analysis/analysis-overview.vue
View File

@@ -39,7 +39,7 @@ withDefaults(defineProps<Props>(), {
class="text-xl"
prefix=""
/>
<VbenIcon :icon="item.icon" class="size-8 flex-shrink-0" />
<VbenIcon :icon="item.icon" class="size-8 shrink-0" />
</CardContent>
<CardFooter class="justify-between">
<span>{{ item.totalTitle }}</span>

4
packages/effects/common-ui/src/ui/dashboard/workbench/workbench-header.vue
View File

@@ -18,12 +18,12 @@ withDefaults(defineProps<Props>(), {
<VbenAvatar :src="avatar" class="size-20" />
<div
v-if="$slots.title || $slots.description"
class="flex flex-col justify-center md:ml-6 md:mt-0"
class="flex flex-col justify-center md:mt-0 md:ml-6"
>
<h1 v-if="$slots.title" class="text-md font-semibold md:text-xl">
<slot name="title"></slot>
</h1>
<span v-if="$slots.description" class="text-foreground/80 mt-1">
<span v-if="$slots.description" class="mt-1 text-foreground/80">
<slot name="description"></slot>
</span>
</div>

6
packages/effects/common-ui/src/ui/dashboard/workbench/workbench-project.vue
View File

@@ -40,7 +40,7 @@ defineEmits(['click']);
'rounded-bl-xl': index === items.length - 3,
'rounded-br-xl': index === items.length - 1,
}"
class="border-border group w-full cursor-pointer border-r border-t p-4 transition-all hover:shadow-xl md:w-1/2 lg:w-1/3"
class="group w-full cursor-pointer border-t border-r border-border p-4 transition-all hover:shadow-xl md:w-1/2 lg:w-1/3"
>
<div class="flex items-center">
<VbenIcon
@@ -51,10 +51,10 @@ defineEmits(['click']);
/>
<span class="ml-4 text-lg font-medium">{{ item.title }}</span>
</div>
<div class="text-foreground/80 mt-4 flex h-10">
<div class="mt-4 flex h-10 text-foreground/80">
{{ item.content }}
</div>
<div class="text-foreground/80 flex justify-between">
<div class="flex justify-between text-foreground/80">
<span>{{ item.group }}</span>
<span>{{ item.date }}</span>
</div>

2
packages/effects/common-ui/src/ui/dashboard/workbench/workbench-quick-nav.vue
View File

@@ -40,7 +40,7 @@ defineEmits(['click']);
'rounded-bl-xl': index === items.length - 3,
'rounded-br-xl': index === items.length - 1,
}"
class="flex-col-center border-border group w-1/3 cursor-pointer border-r border-t py-8 hover:shadow-xl"
class="group flex-col-center w-1/3 cursor-pointer border-t border-r border-border py-8 hover:shadow-xl"
@click="$emit('click', item)"
>
<VbenIcon

10
packages/effects/common-ui/src/ui/dashboard/workbench/workbench-todo.vue
View File

@@ -29,30 +29,30 @@ withDefaults(defineProps<Props>(), {
<CardTitle class="text-lg">{{ title }}</CardTitle>
</CardHeader>
<CardContent class="flex flex-wrap p-5 pt-0">
<ul class="divide-border w-full divide-y" role="list">
<ul class="w-full divide-y divide-border" role="list">
<li
v-for="item in items"
:key="item.title"
:class="{
'select-none line-through opacity-60': item.completed,
'line-through opacity-60 select-none': item.completed,
}"
class="flex cursor-pointer justify-between gap-x-6 py-5"
>
<div class="flex min-w-0 items-center gap-x-4">
<VbenCheckbox v-model="item.completed" name="completed" />
<div class="min-w-0 flex-auto">
<p class="text-foreground text-sm font-semibold leading-6">
<p class="text-sm/6 font-semibold text-foreground">
{{ item.title }}
</p>
<!-- eslint-disable vue/no-v-html -->
<p
class="text-foreground/80 *:text-primary mt-1 truncate text-xs leading-5"
class="mt-1 truncate text-xs/5 text-foreground/80 *:text-primary"
v-html="item.content"
></p>
</div>
</div>
<div class="hidden h-full shrink-0 sm:flex sm:flex-col sm:items-end">
<span class="text-foreground/80 mt-6 text-xs leading-6">
<span class="mt-6 text-xs/6 text-foreground/80">
{{ item.date }}
</span>
</div>

8
packages/effects/common-ui/src/ui/dashboard/workbench/workbench-trends.vue
View File

@@ -29,7 +29,7 @@ withDefaults(defineProps<Props>(), {
<CardTitle class="text-lg">{{ title }}</CardTitle>
</CardHeader>
<CardContent class="flex flex-wrap p-5 pt-0">
<ul class="divide-border w-full divide-y" role="list">
<ul class="w-full divide-y divide-border" role="list">
<li
v-for="item in items"
:key="item.title"
@@ -42,18 +42,18 @@ withDefaults(defineProps<Props>(), {
class="size-10 flex-none rounded-full"
/>
<div class="min-w-0 flex-auto">
<p class="text-foreground text-sm font-semibold leading-6">
<p class="text-sm/6 font-semibold text-foreground">
{{ item.title }}
</p>
<!-- eslint-disable vue/no-v-html -->
<p
class="text-foreground/80 *:text-primary mt-1 truncate text-xs leading-5"
class="mt-1 truncate text-xs/5 text-foreground/80 *:text-primary"
v-html="item.content"
></p>
</div>
</div>
<div class="hidden h-full shrink-0 sm:flex sm:flex-col sm:items-end">
<span class="text-foreground/80 mt-6 text-xs leading-6">
<span class="mt-6 text-xs/6 text-foreground/80">
{{ item.date }}
</span>
</div>

6
packages/effects/common-ui/src/ui/fallback/fallback.vue
View File

@@ -128,7 +128,7 @@ function refresh() {
</script>
<template>
<div class="flex size-full flex-col items-center justify-center duration-300">
<div class="flex-col-center size-full duration-300">
<img v-if="image" :src="image" class="md:1/3 w-1/2 lg:w-1/4" />
<component
:is="fallbackIcon"
@@ -139,14 +139,14 @@ function refresh() {
<slot v-if="$slots.title" name="title"></slot>
<p
v-else-if="titleText"
class="text-foreground mt-8 text-2xl md:text-3xl lg:text-4xl"
class="mt-8 text-2xl text-foreground md:text-3xl lg:text-4xl"
>
{{ titleText }}
</p>
<slot v-if="$slots.describe" name="describe"></slot>
<p
v-else-if="descText"
class="text-muted-foreground md:text-md my-4 lg:text-lg"
class="md:text-md my-4 text-muted-foreground lg:text-lg"
>
{{ descText }}
</p>

10
packages/effects/common-ui/src/ui/profile/profile.vue
View File

@@ -26,9 +26,9 @@ const tabsValue = defineModel<string>('modelValue');
</script>
<template>
<Page auto-content-height>
<div class="flex h-full w-full">
<div class="flex size-full">
<Card class="w-1/6 flex-none">
<div class="mt-4 flex h-40 flex-col items-center justify-center gap-4">
<div class="mt-4 flex-col-center h-40 gap-4">
<VbenAvatar
:src="userInfo?.avatar ?? preferences.app.defaultAvatar"
class="size-20"
@@ -36,18 +36,18 @@ const tabsValue = defineModel<string>('modelValue');
<span class="text-lg font-semibold">
{{ userInfo?.realName ?? '' }}
</span>
<span class="text-foreground/80 text-sm">
<span class="text-sm text-foreground/80">
{{ userInfo?.username ?? '' }}
</span>
</div>
<Separator class="my-4" />
<Tabs v-model="tabsValue" orientation="vertical" class="m-4">
<TabsList class="bg-card grid w-full grid-cols-1">
<TabsList class="grid w-full grid-cols-1 bg-card">
<TabsTrigger
v-for="tab in tabs"
:key="tab.value"
:value="tab.value"
class="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground h-12 justify-start"
class="h-12 justify-start data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
>
{{ tab.label }}
</TabsTrigger>