xkyy/xk-admin
1
0
Fork 0
Code Issues Pull Requests Actions 3 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

1
packages/effects/common-ui/package.json
View File

@@ -28,6 +28,7 @@
}
},
"dependencies": {
"@vben-core/design": "workspace:*",
"@vben-core/form-ui": "workspace:*",
"@vben-core/popup-ui": "workspace:*",
"@vben-core/preferences": "workspace:*",

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>

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>

1
packages/effects/layouts/package.json
View File

@@ -21,6 +21,7 @@
},
"dependencies": {
"@vben-core/composables": "workspace:*",
"@vben-core/design": "workspace:*",
"@vben-core/form-ui": "workspace:*",
"@vben-core/layout-ui": "workspace:*",
"@vben-core/menu-ui": "workspace:*",

26
packages/effects/layouts/src/authentication/authentication.vue
View File

@@ -55,7 +55,7 @@ const logoSrc = computed(() => {
<template>
<div
:class="[isDark ? 'dark' : '']"
class="flex min-h-full flex-1 select-none overflow-x-hidden"
class="flex min-h-full flex-1 overflow-x-hidden select-none"
>
<template v-if="toolbar">
<slot name="toolbar">
@@ -82,11 +82,11 @@ const logoSrc = computed(() => {
<!-- 头部 Logo 和应用名称 -->
<div
v-if="logoSrc || appName"
class="absolute left-0 top-0 z-10 flex flex-1"
class="absolute top-0 left-0 z-10 flex flex-1"
@click="clickLogo"
>
<div
class="text-foreground lg:text-foreground ml-4 mt-4 flex flex-1 items-center sm:left-6 sm:top-6"
class="mt-4 ml-4 flex flex-1 items-center text-foreground sm:top-6 sm:left-6 lg:text-foreground"
>
<img
v-if="logoSrc"
@@ -106,12 +106,12 @@ const logoSrc = computed(() => {
<!-- 系统介绍 -->
<div v-if="!authPanelCenter" class="relative hidden w-0 flex-1 lg:block">
<div
class="bg-background-deep absolute inset-0 h-full w-full dark:bg-[#070709]"
class="absolute inset-0 size-full bg-background-deep dark:bg-[#070709]"
>
<div class="login-background absolute left-0 top-0 size-full"></div>
<div class="login-background absolute top-0 left-0 size-full"></div>
<div
:key="authPanelLeft ? 'left' : authPanelRight ? 'right' : 'center'"
class="flex-col-center mr-20 h-full"
class="mr-20 flex-col-center h-full"
:class="{
'enter-x': authPanelLeft,
'-enter-x': authPanelRight,
@@ -121,14 +121,14 @@ const logoSrc = computed(() => {
<img
:alt="appName"
:src="sloganImage"
class="animate-float h-64 w-2/5"
class="h-64 w-2/5 animate-float"
/>
</template>
<SloganIcon v-else :alt="appName" class="animate-float h-64 w-2/5" />
<div class="text-1xl text-foreground mt-6 font-sans lg:text-2xl">
<SloganIcon v-else :alt="appName" class="h-64 w-2/5 animate-float" />
<div class="text-1xl mt-6 font-sans text-foreground lg:text-2xl">
{{ pageTitle }}
</div>
<div class="dark:text-muted-foreground mt-2">
<div class="mt-2 dark:text-muted-foreground">
{{ pageDescription }}
</div>
</div>
@@ -136,10 +136,10 @@ const logoSrc = computed(() => {
</div>
<!-- 中心认证面板 -->
<div v-if="authPanelCenter" class="flex-center relative w-full">
<div class="login-background absolute left-0 top-0 size-full"></div>
<div v-if="authPanelCenter" class="relative flex-center w-full">
<div class="login-background absolute top-0 left-0 size-full"></div>
<AuthenticationFormView
class="md:bg-background shadow-primary/5 shadow-float w-full rounded-3xl pb-20 md:w-2/3 lg:w-1/2 xl:w-[36%]"
class="w-full rounded-3xl pb-20 shadow-float shadow-primary/5 md:w-2/3 md:bg-background lg:w-1/2 xl:w-[36%]"
data-side="bottom"
>
<template v-if="copyright" #copyright>

4
packages/effects/layouts/src/authentication/form.vue
View File

@@ -10,7 +10,7 @@ defineProps<{
<template>
<div
class="flex-col-center dark:bg-background-deep bg-background relative px-6 py-10 lg:flex-initial lg:px-8"
class="relative flex-col-center bg-background px-6 py-10 lg:flex-initial lg:px-8 dark:bg-background-deep"
>
<slot></slot>
<!-- Router View with Transition and KeepAlive -->
@@ -30,7 +30,7 @@ defineProps<{
<!-- Footer Copyright -->
<div
class="text-muted-foreground absolute bottom-3 flex text-center text-xs"
class="absolute bottom-3 flex text-center text-xs text-muted-foreground"
>
<slot name="copyright"> </slot>
</div>

4
packages/effects/layouts/src/authentication/toolbar.vue
View File

@@ -33,9 +33,9 @@ const showTheme = computed(() => props.toolbarList.includes('theme'));
<template>
<div
:class="{
'bg-accent rounded-3xl px-3 py-1': toolbarList.length > 1,
'rounded-3xl bg-accent px-3 py-1': toolbarList.length > 1,
}"
class="flex-center absolute right-2 top-4 z-10"
class="absolute top-4 right-2 z-10 flex-center"
>
<!-- Only show on medium and larger screens -->
<div class="hidden md:flex">

4
packages/effects/layouts/src/basic/copyright/copyright.vue
View File

@@ -26,7 +26,7 @@ withDefaults(defineProps<Props>(), {
<a
v-if="icp"
:href="icpLink || 'javascript:void(0)'"
class="hover:text-primary-hover mx-1"
class="mx-1 hover:text-primary-hover"
target="_blank"
>
{{ icp }}
@@ -39,7 +39,7 @@ withDefaults(defineProps<Props>(), {
<a
v-if="companyName"
:href="companySiteLink || 'javascript:void(0)'"
class="hover:text-primary-hover mx-1"
class="mx-1 hover:text-primary-hover"
target="_blank"
>
{{ companyName }}

2
packages/effects/layouts/src/basic/footer/footer.vue
View File

@@ -5,7 +5,7 @@ defineOptions({
</script>
<template>
<div class="flex-center text-muted-foreground relative h-full w-full text-xs">
<div class="relative flex-center size-full text-xs text-muted-foreground">
<slot></slot>
</div>
</template>

6
packages/effects/layouts/src/basic/header/header.vue
View File

@@ -147,7 +147,7 @@ function clearPreferencesAndLogout() {
>
<slot name="menu"></slot>
</div>
<div class="flex h-full min-w-0 flex-shrink-0 items-center">
<div class="flex h-full min-w-0 shrink-0 items-center">
<template v-for="slot in rightSlots" :key="slot.name">
<slot :name="slot.name">
<template v-if="slot.name === 'global-search'">
@@ -165,7 +165,7 @@ function clearPreferencesAndLogout() {
/>
</template>
<template v-else-if="slot.name === 'theme-toggle'">
<ThemeToggle class="mr-1 mt-[2px]" />
<ThemeToggle class="mt-[2px] mr-1" />
</template>
<template v-else-if="slot.name === 'language-toggle'">
<LanguageToggle class="mr-1" />
@@ -174,7 +174,7 @@ function clearPreferencesAndLogout() {
<VbenFullScreen class="mr-1" />
</template>
<template v-else-if="slot.name === 'timezone'">
<TimezoneButton class="mr-1 mt-[2px]" />
<TimezoneButton class="mt-[2px] mr-1" />
</template>
</slot>
</template>

2
packages/effects/layouts/src/basic/layout.vue
View File

@@ -421,7 +421,7 @@ const headerSlots = computed(() => {
<template v-if="preferencesButtonPosition.fixed">
<Preferences
class="z-100 fixed right-0 top-1/2 -translate-y-1/2 transform"
class="fixed top-1/2 right-0 z-100 -translate-y-1/2 transform"
@clear-preferences-and-logout="clearPreferencesAndLogout"
/>
</template>

8
packages/effects/layouts/src/widgets/color-toggle.vue
View File

@@ -31,16 +31,16 @@ function handleUpdate(colorPrimary: string, type: BuiltinThemeType) {
>
<template v-for="preset in COLOR_PRESETS" :key="preset.color">
<VbenIconButton
class="flex-center flex-shrink-0"
class="flex-center shrink-0"
@click="handleUpdate(preset.color, preset.type)"
>
<div
:style="{ backgroundColor: preset.color }"
class="flex-center relative size-5 rounded-full hover:scale-110"
class="relative flex-center size-5 rounded-full hover:scale-110"
>
<svg
v-if="preferences.theme.builtinType === preset.type"
class="h-3.5 w-3.5 text-white"
class="size-3.5 text-white"
height="1em"
viewBox="0 0 15 15"
width="1em"
@@ -58,7 +58,7 @@ function handleUpdate(colorPrimary: string, type: BuiltinThemeType) {
</div>
<VbenIconButton>
<Palette class="text-primary size-4" />
<Palette class="size-4 text-primary" />
</VbenIconButton>
</div>
</template>

12
packages/effects/layouts/src/widgets/global-search/global-search.vue
View File

@@ -103,12 +103,12 @@ onMounted(() => {
>
<template #title>
<div class="flex items-center">
<Search class="text-muted-foreground mr-2 size-4" />
<Search class="mr-2 size-4 text-muted-foreground" />
<input
ref="searchInputRef"
v-model="keyword"
:placeholder="$t('ui.widgets.search.searchNavigate')"
class="ring-none placeholder:text-muted-foreground w-[80%] rounded-md border border-none bg-transparent p-2 pl-0 text-sm font-normal outline-none ring-0 ring-offset-transparent focus-visible:ring-transparent"
class="ring-none w-[80%] rounded-md border border-none bg-transparent p-2 pl-0 text-sm font-normal ring-0 ring-offset-transparent outline-hidden placeholder:text-muted-foreground focus-visible:ring-transparent"
/>
</div>
</template>
@@ -133,20 +133,20 @@ onMounted(() => {
</template>
</Modal>
<div
class="md:bg-accent group flex h-8 cursor-pointer items-center gap-3 rounded-2xl border-none bg-none px-2 py-0.5 outline-none"
class="group flex h-8 cursor-pointer items-center gap-3 rounded-2xl border-none bg-none px-2 py-0.5 outline-hidden md:bg-accent"
@click="toggleOpen()"
>
<Search
class="text-muted-foreground group-hover:text-foreground size-4 group-hover:opacity-100"
class="size-4 text-muted-foreground group-hover:text-foreground group-hover:opacity-100"
/>
<span
class="text-muted-foreground group-hover:text-foreground hidden text-xs duration-300 md:block"
class="hidden text-xs text-muted-foreground duration-300 group-hover:text-foreground md:block"
>
{{ $t('ui.widgets.search.title') }}
</span>
<span
v-if="enableShortcutKey"
class="bg-background border-foreground/60 text-muted-foreground group-hover:text-foreground relative hidden rounded-sm rounded-r-xl px-1.5 py-1 text-xs leading-none group-hover:opacity-100 md:block"
class="relative hidden rounded-sm rounded-r-xl border-foreground/60 bg-background px-1.5 py-1 text-xs leading-none text-muted-foreground group-hover:text-foreground group-hover:opacity-100 md:block"
>
{{ isWindowsOs() ? 'Ctrl' : '⌘' }}
<kbd>K</kbd>

22
packages/effects/layouts/src/widgets/global-search/search-panel.vue
View File

@@ -223,16 +223,16 @@ onMounted(() => {
<template>
<VbenScrollbar>
<div class="!flex h-full justify-center px-2 sm:max-h-[450px]">
<div class="flex! h-full justify-center px-2 sm:max-h-[450px]">
<!-- 无搜索结果 -->
<div
v-if="keyword && searchResults.length === 0"
class="text-muted-foreground text-center"
class="text-center text-muted-foreground"
>
<SearchX class="mx-auto mt-4 size-12" />
<p class="mb-10 mt-6 text-xs">
<p class="mt-6 mb-10 text-xs">
{{ $t('ui.widgets.search.noResults') }}
<span class="text-foreground text-sm font-medium">
<span class="text-sm font-medium text-foreground">
"{{ keyword }}"
</span>
</p>
@@ -240,7 +240,7 @@ onMounted(() => {
<!-- 历史搜索记录 & 没有搜索结果 -->
<div
v-if="!keyword && searchResults.length === 0"
class="text-muted-foreground text-center"
class="text-center text-muted-foreground"
>
<p class="my-10 text-xs">
{{ $t('ui.widgets.search.noRecent') }}
@@ -250,7 +250,7 @@ onMounted(() => {
<ul v-show="searchResults.length > 0" class="w-full">
<li
v-if="searchHistory.length > 0 && !keyword"
class="text-muted-foreground mb-2 text-xs"
class="mb-2 text-xs text-muted-foreground"
>
{{ $t('ui.widgets.search.recent') }}
</li>
@@ -264,19 +264,15 @@ onMounted(() => {
"
:data-index="index"
:data-search-item="index"
class="bg-accent flex-center group mb-3 w-full cursor-pointer rounded-lg px-4 py-4"
class="group mb-3 flex-center w-full cursor-pointer rounded-lg bg-accent p-4"
@click="handleEnter"
@mouseenter="handleMouseenter"
>
<VbenIcon
:icon="item.icon"
class="mr-2 size-5 flex-shrink-0"
fallback
/>
<VbenIcon :icon="item.icon" class="mr-2 size-5 shrink-0" fallback />
<span class="flex-1">{{ item.name }}</span>
<div
class="flex-center dark:hover:bg-accent hover:text-primary-foreground rounded-full p-1 hover:scale-110"
class="flex-center rounded-full p-1 hover:scale-110 hover:text-primary-foreground dark:hover:bg-accent"
@click.stop="removeItem(index)"
>
<X class="size-4" />

2
packages/effects/layouts/src/widgets/language-toggle.vue
View File

@@ -32,7 +32,7 @@ async function handleUpdate(value: string | undefined) {
@update:model-value="handleUpdate"
>
<VbenIconButton class="hover:animate-[shrink_0.3s_ease-in-out]">
<Languages class="text-foreground size-4" />
<Languages class="size-4 text-foreground" />
</VbenIconButton>
</VbenDropdownRadioMenu>
</div>

2
packages/effects/layouts/src/widgets/lock-screen/lock-screen-modal.vue
View File

@@ -96,7 +96,7 @@ async function handleSubmit() {
class="size-20"
dot-class="bottom-0 right-1 border-2 size-4 bg-green-500"
/>
<div class="text-foreground my-6 flex items-center font-medium">
<div class="my-6 flex items-center font-medium text-foreground">
{{ text }}
</div>
</div>

14
packages/effects/layouts/src/widgets/lock-screen/lock-screen.vue
View File

@@ -88,11 +88,11 @@ useScrollLock();
</script>
<template>
<div class="bg-background fixed z-[2000] size-full">
<div class="fixed z-2000 size-full bg-background">
<transition name="slide-left">
<div v-show="!showUnlockForm" class="size-full">
<div
class="flex-col-center text-foreground/80 hover:text-foreground group fixed left-1/2 top-6 z-[2001] -translate-x-1/2 cursor-pointer text-xl font-semibold"
class="group fixed top-6 left-1/2 z-2001 flex-col-center -translate-x-1/2 cursor-pointer text-xl font-semibold text-foreground/80 hover:text-foreground"
@click="toggleUnlockForm"
>
<LockKeyhole
@@ -100,20 +100,20 @@ useScrollLock();
/>
<span>{{ $t('ui.widgets.lockScreen.unlock') }}</span>
</div>
<div class="flex h-full w-full items-center justify-center">
<div class="flex-center size-full">
<div class="flex w-full justify-center gap-4 px-4 sm:gap-6 md:gap-8">
<div
class="bg-accent relative flex h-[140px] w-[140px] items-center justify-center rounded-xl text-[36px] sm:h-[160px] sm:w-[160px] sm:text-[42px] md:h-[200px] md:w-[200px] md:text-[72px]"
class="relative flex-center h-[140px] w-[140px] rounded-xl bg-accent text-[36px] sm:h-[160px] sm:w-[160px] sm:text-[42px] md:h-[200px] md:w-[200px] md:text-[72px]"
>
<span
class="absolute left-3 top-3 text-xs font-semibold sm:text-sm md:text-xl"
class="absolute top-3 left-3 text-xs font-semibold sm:text-sm md:text-xl"
>
{{ meridiem }}
</span>
{{ hour }}
</div>
<div
class="bg-accent flex h-[140px] w-[140px] items-center justify-center rounded-xl text-[36px] sm:h-[160px] sm:w-[160px] sm:text-[42px] md:h-[200px] md:w-[200px] md:text-[72px]"
class="flex-center h-[140px] w-[140px] rounded-xl bg-accent text-[36px] sm:h-[160px] sm:w-[160px] sm:text-[42px] md:h-[200px] md:w-[200px] md:text-[72px]"
>
{{ minute }}
</div>
@@ -128,7 +128,7 @@ useScrollLock();
class="flex-center size-full"
@keydown.enter.prevent="handleSubmit"
>
<div class="flex-col-center mb-10 w-[90%] max-w-[300px] px-4">
<div class="mb-10 flex-col-center w-[90%] max-w-[300px] px-4">
<VbenAvatar :src="avatar" class="enter-x mb-6 size-20" />
<div class="enter-x mb-2 w-full items-center">
<Form />

28
packages/effects/layouts/src/widgets/notification/notification.vue
View File

@@ -92,11 +92,11 @@ function navigateTo(
content-class="relative right-2 w-[360px] p-0"
>
<template #trigger>
<div class="flex-center mr-2 h-full" @click.stop="toggle()">
<VbenIconButton class="bell-button text-foreground relative">
<div class="mr-2 flex-center h-full" @click.stop="toggle()">
<VbenIconButton class="bell-button relative text-foreground">
<span
v-if="dot"
class="bg-primary absolute right-0.5 top-0.5 h-2 w-2 rounded"
class="absolute top-0.5 right-0.5 size-2 rounded-sm bg-primary"
></span>
<Bell class="size-4" />
</VbenIconButton>
@@ -115,36 +115,36 @@ function navigateTo(
</VbenIconButton>
</div>
<VbenScrollbar v-if="notifications.length > 0">
<ul class="!flex max-h-[360px] w-full flex-col">
<ul class="flex! max-h-[360px] w-full flex-col">
<template v-for="item in notifications" :key="item.id ?? item.title">
<li
class="hover:bg-accent border-border relative flex w-full cursor-pointer items-start gap-5 border-t px-3 py-3"
class="relative flex w-full cursor-pointer items-start gap-5 border-t border-border p-3 hover:bg-accent"
@click="handleClick(item)"
>
<span
v-if="!item.isRead"
class="bg-primary absolute right-2 top-2 h-2 w-2 rounded"
class="absolute top-2 right-2 size-2 rounded-sm bg-primary"
></span>
<span
class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full"
class="relative flex size-10 shrink-0 overflow-hidden rounded-full"
>
<img
:src="item.avatar"
class="aspect-square h-full w-full object-cover"
class="aspect-square size-full object-cover"
/>
</span>
<div class="flex flex-col gap-1 leading-none">
<p class="font-semibold">{{ item.title }}</p>
<p class="text-muted-foreground my-1 line-clamp-2 text-xs">
<p class="my-1 line-clamp-2 text-xs text-muted-foreground">
{{ item.message }}
</p>
<p class="text-muted-foreground line-clamp-2 text-xs">
<p class="line-clamp-2 text-xs text-muted-foreground">
{{ item.date }}
</p>
</div>
<div
class="absolute right-3 top-1/2 flex -translate-y-1/2 flex-col gap-2"
class="absolute top-1/2 right-3 flex -translate-y-1/2 flex-col gap-2"
>
<VbenIconButton
v-if="!item.isRead"
@@ -160,7 +160,7 @@ function navigateTo(
v-if="item.isRead"
size="xs"
variant="ghost"
class="text-destructive h-6 px-2"
class="h-6 px-2 text-destructive"
:tooltip="$t('common.delete')"
@click.stop="emit('remove', item)"
>
@@ -173,13 +173,13 @@ function navigateTo(
</VbenScrollbar>
<template v-else>
<div class="flex-center text-muted-foreground min-h-[150px] w-full">
<div class="flex-center min-h-[150px] w-full text-muted-foreground">
{{ $t('common.noData') }}
</div>
</template>
<div
class="border-border flex items-center justify-between border-t px-4 py-3"
class="flex items-center justify-between border-t border-border px-4 py-3"
>
<VbenButton
:disabled="notifications.length <= 0"

2
packages/effects/layouts/src/widgets/preferences/blocks/block.vue
View File

@@ -14,7 +14,7 @@ withDefaults(defineProps<Props>(), {
<template>
<div class="flex flex-col py-4">
<h3 class="mb-3 font-semibold leading-none tracking-tight">
<h3 class="mb-3 leading-none font-semibold tracking-tight">
{{ title }}
</h3>
<slot></slot>

4
packages/effects/layouts/src/widgets/preferences/blocks/general/animation.vue
View File

@@ -34,7 +34,7 @@ function handleClick(value: string) {
</SwitchItem>
<div
v-if="transitionEnable"
class="mb-2 mt-3 flex justify-between gap-3 px-2"
class="mt-3 mb-2 flex justify-between gap-3 px-2"
>
<div
v-for="item in transitionPreset"
@@ -45,7 +45,7 @@ function handleClick(value: string) {
class="outline-box p-2"
@click="handleClick(item)"
>
<div :class="`${item}-slow`" class="bg-accent h-10 w-12 rounded-md"></div>
<div :class="`${item}-slow`" class="h-10 w-12 rounded-md bg-accent"></div>
</div>
</div>
</template>

2
packages/effects/layouts/src/widgets/preferences/blocks/input-item.vue
View File

@@ -55,7 +55,7 @@ const slots = useSlots();
/>
<CircleX
v-if="inputValue"
class="hover:text-foreground text-foreground/60 absolute right-2 top-1/2 size-3 -translate-y-1/2 transform cursor-pointer"
class="absolute top-1/2 right-2 size-3 -translate-y-1/2 transform cursor-pointer text-foreground/60 hover:text-foreground"
@click="() => (inputValue = '')"
/>
</div>

2
packages/effects/layouts/src/widgets/preferences/blocks/layout/content.vue
View File

@@ -44,7 +44,7 @@ function activeClass(theme: string): string[] {
<div :class="activeClass(theme.type)" class="outline-box flex-center">
<component :is="components[theme.type]" />
</div>
<div class="text-muted-foreground mt-2 text-center text-xs">
<div class="mt-2 text-center text-xs text-muted-foreground">
{{ theme.name }}
</div>
</div>

2
packages/effects/layouts/src/widgets/preferences/blocks/layout/layout.vue
View File

@@ -96,7 +96,7 @@ function activeClass(theme: string): string[] {
<component :is="components[theme.type]" />
</div>
<div
class="text-muted-foreground flex-center hover:text-foreground mt-2 text-center text-xs"
class="mt-2 flex-center text-center text-xs text-muted-foreground hover:text-foreground"
>
{{ theme.name }}
<VbenTooltip v-if="theme.tip" side="bottom">

4
packages/effects/layouts/src/widgets/preferences/blocks/switch-item.vue
View File

@@ -28,7 +28,7 @@ function handleClick() {
:class="{
'pointer-events-none opacity-50': disabled,
}"
class="hover:bg-accent my-1 flex w-full items-center justify-between rounded-md px-2 py-2.5"
class="my-1 flex w-full items-center justify-between rounded-md px-2 py-2.5 hover:bg-accent"
@click="handleClick"
>
<span class="flex items-center text-sm">
@@ -47,7 +47,7 @@ function handleClick() {
</slot>
</VbenTooltip>
</span>
<span v-if="$slots.shortcut" class="ml-auto mr-2 text-xs opacity-60">
<span v-if="$slots.shortcut" class="mr-2 ml-auto text-xs opacity-60">
<slot name="shortcut"></slot>
</span>
<Switch v-model="checked" @click.stop />

8
packages/effects/layouts/src/widgets/preferences/blocks/theme/builtin.vue
View File

@@ -128,7 +128,7 @@ watch(
:class="{
'outline-box-active': theme.type === modelValue,
}"
class="outline-box flex-center group cursor-pointer"
class="group outline-box flex-center cursor-pointer"
>
<template v-if="theme.type !== 'custom'">
<div
@@ -138,9 +138,9 @@ watch(
</template>
<template v-else>
<div class="size-full px-9 py-2" @click.stop="selectColor">
<div class="flex-center relative size-5 rounded-sm">
<div class="relative flex-center size-5 rounded-sm">
<UserRoundPen
class="z-1 absolute size-5 opacity-60 group-hover:opacity-100"
class="absolute z-1 size-5 opacity-60 group-hover:opacity-100"
/>
<input
ref="colorInput"
@@ -153,7 +153,7 @@ watch(
</div>
</template>
</div>
<div class="text-muted-foreground my-2 text-center text-xs">
<div class="my-2 text-center text-xs text-muted-foreground">
{{ typeView(theme.type) }}
</div>
</div>

4
packages/effects/layouts/src/widgets/preferences/blocks/theme/font-size.vue
View File

@@ -53,9 +53,9 @@ watch(
<NumberFieldIncrement />
</NumberFieldContent>
</NumberField>
<span class="text-muted-foreground whitespace-nowrap text-xs">px</span>
<span class="text-xs whitespace-nowrap text-muted-foreground">px</span>
</div>
<div class="text-muted-foreground text-xs">
<div class="text-xs text-muted-foreground">
{{ $t('preferences.theme.fontSizeTip') }}
</div>
</div>

2
packages/effects/layouts/src/widgets/preferences/blocks/theme/radius.vue
View File

@@ -29,7 +29,7 @@ const items = [
<template v-for="item in items" :key="item.value">
<ToggleGroupItem
:value="item.value"
class="data-[state=on]:bg-primary data-[state=on]:text-primary-foreground h-7 w-16 rounded-sm"
class="h-7 w-16 rounded-sm data-[state=on]:bg-primary data-[state=on]:text-primary-foreground"
>
{{ item.label }}
</ToggleGroupItem>

2
packages/effects/layouts/src/widgets/preferences/blocks/theme/theme.vue
View File

@@ -78,7 +78,7 @@ function nameView(name: string) {
>
<component :is="theme.icon" class="mx-9 size-5" />
</div>
<div class="text-muted-foreground mt-2 text-center text-xs">
<div class="mt-2 text-center text-xs text-muted-foreground">
{{ nameView(theme.name) }}
</div>
</div>

4
packages/effects/layouts/src/widgets/preferences/blocks/toggle-item.vue
View File

@@ -20,7 +20,7 @@ const modelValue = defineModel<string>();
:class="{
'pointer-events-none opacity-50': disabled,
}"
class="hover:bg-accent flex w-full items-center justify-between rounded-md px-2 py-2"
class="flex w-full items-center justify-between rounded-md p-2 hover:bg-accent"
disabled
>
<span class="text-sm">
@@ -36,7 +36,7 @@ const modelValue = defineModel<string>();
<template v-for="item in items" :key="item.value">
<ToggleGroupItem
:value="item.value"
class="data-[state=on]:bg-primary data-[state=on]:text-primary-foreground h-7 rounded-sm"
class="h-7 rounded-sm data-[state=on]:bg-primary data-[state=on]:text-primary-foreground"
>
{{ item.label }}
</ToggleGroupItem>

2
packages/effects/layouts/src/widgets/preferences/preferences-button.vue
View File

@@ -14,7 +14,7 @@ function clearPreferencesAndLogout() {
<template>
<Preferences @clear-preferences-and-logout="clearPreferencesAndLogout">
<VbenIconButton class="hover:animate-[shrink_0.3s_ease-in-out]">
<Settings class="text-foreground size-4" />
<Settings class="size-4 text-foreground" />
</VbenIconButton>
</Preferences>
</template>

4
packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue
View File

@@ -252,7 +252,7 @@ async function handleReset() {
<Drawer
:description="$t('preferences.subtitle')"
:title="$t('preferences.title')"
class="!border-0 sm:max-w-sm"
class="border-0! sm:max-w-sm"
>
<template #extra>
<div class="flex items-center">
@@ -264,7 +264,7 @@ async function handleReset() {
>
<span
v-if="diffPreference"
class="bg-primary absolute right-0.5 top-0.5 h-2 w-2 rounded"
class="absolute top-0.5 right-0.5 size-2 rounded-sm bg-primary"
></span>
<RotateCw class="size-4" />
</VbenIconButton>

2
packages/effects/layouts/src/widgets/preferences/preferences.vue
View File

@@ -62,7 +62,7 @@ const listen = computed(() => {
<slot>
<VbenButton
:title="$t('preferences.title')"
class="bg-primary flex-col-center size-10 cursor-pointer rounded-l-lg rounded-r-none border-none"
class="flex-col-center size-10 cursor-pointer rounded-l-lg rounded-r-none border-none bg-primary"
>
<Settings class="size-5" />
</VbenButton>

93
packages/effects/layouts/src/widgets/theme-toggle/theme-button.vue
View File

@@ -93,24 +93,19 @@ function toggleTheme(event: MouseEvent) {
@click.stop="toggleTheme"
>
<svg aria-hidden="true" height="24" viewBox="0 0 24 24" width="24">
<mask
id="theme-toggle-moon"
class="theme-toggle__moon"
fill="hsl(var(--foreground)/80%)"
stroke="none"
>
<mask id="theme-toggle-moon" class="theme-toggle__moon">
<rect fill="white" height="100%" width="100%" x="0" y="0" />
<circle cx="40" cy="8" fill="black" r="11" />
</mask>
<circle
id="sun"
class="theme-toggle__sun"
class="theme-toggle__sun fill-foreground/90"
cx="12"
cy="12"
mask="url(#theme-toggle-moon)"
r="11"
/>
<g class="theme-toggle__sun-beams">
<g class="theme-toggle__sun-beams stroke-foreground/90 stroke-2">
<line x1="12" x2="12" y1="1" y2="3" />
<line x1="12" x2="12" y1="21" y2="23" />
<line x1="4.22" x2="5.64" y1="4.22" y2="5.64" />
@@ -125,64 +120,46 @@ function toggleTheme(event: MouseEvent) {
</template>
<style scoped>
.theme-toggle {
&__moon {
& > circle {
transition: transform 0.5s cubic-bezier(0, 0, 0.3, 1);
}
}
@reference "@vben-core/design/theme";
&__sun {
@apply fill-foreground/90 stroke-none;
.theme-toggle__moon > circle {
transition: transform 0.5s cubic-bezier(0, 0, 0.3, 1);
}
transform-origin: center center;
transition: transform 1.6s cubic-bezier(0.25, 0, 0.2, 1);
.theme-toggle__sun {
stroke: none;
transform-origin: center center;
transition: transform 1.6s cubic-bezier(0.25, 0, 0.2, 1);
}
&:hover > svg > & {
@apply fill-foreground/90;
}
}
.theme-toggle__sun-beams {
transform-origin: center center;
transition:
transform 1.6s cubic-bezier(0.5, 1.5, 0.75, 1.25),
opacity 0.6s cubic-bezier(0.25, 0, 0.3, 1);
}
&__sun-beams {
@apply stroke-foreground/90 stroke-[2px];
.theme-toggle.is-light .theme-toggle__sun {
@apply scale-50;
}
transform-origin: center center;
transition:
transform 1.6s cubic-bezier(0.5, 1.5, 0.75, 1.25),
opacity 0.6s cubic-bezier(0.25, 0, 0.3, 1);
.theme-toggle.is-light .theme-toggle__sun-beams {
transform: rotateZ(0.25turn);
}
&:hover > svg > & {
@apply stroke-foreground;
}
}
.theme-toggle.is-dark .theme-toggle__moon > circle {
transform: translateX(-20px);
}
&.is-light {
.theme-toggle__sun {
@apply scale-50;
}
.theme-toggle.is-dark .theme-toggle__sun-beams {
@apply opacity-0;
}
.theme-toggle__sun-beams {
transform: rotateZ(0.25turn);
}
}
.theme-toggle:hover > svg .theme-toggle__sun {
fill: hsl(var(--foreground));
}
&.is-dark {
.theme-toggle__moon {
& > circle {
transform: translateX(-20px);
}
}
.theme-toggle__sun-beams {
@apply opacity-0;
}
}
&:hover > svg {
.theme-toggle__sun,
.theme-toggle__moon {
@apply fill-foreground;
}
}
.theme-toggle:hover > svg .theme-toggle__sun-beams {
stroke: hsl(var(--foreground));
}
</style>

2
packages/effects/layouts/src/widgets/timezone/timezone-button.vue
View File

@@ -59,7 +59,7 @@ const handleClick = () => {
class="hover:animate-[shrink_0.3s_ease-in-out]"
@click="handleClick"
>
<TimezoneIcon class="text-foreground size-4" />
<TimezoneIcon class="size-4 text-foreground" />
</VbenIconButton>
<Modal :title="$t('ui.widgets.timezone.setTimezone')">
<div class="timezone-container">

8
packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue
View File

@@ -190,8 +190,8 @@ if (enableShortcutKey.value) {
<DropdownMenu v-model:open="openPopover">
<DropdownMenuTrigger ref="refTrigger" :disabled="props.trigger === 'hover'">
<div class="hover:bg-accent ml-1 mr-2 cursor-pointer rounded-full p-1.5">
<div class="hover:text-accent-foreground flex-center">
<div class="mr-2 ml-1 cursor-pointer rounded-full p-1.5 hover:bg-accent">
<div class="flex-center hover:text-accent-foreground">
<VbenAvatar :alt="text" :src="avatar" class="size-8" dot />
</div>
</div>
@@ -209,7 +209,7 @@ if (enableShortcutKey.value) {
<div class="ml-2 w-full">
<div
v-if="tagText || text || $slots.tagText"
class="text-foreground mb-1 flex items-center text-sm font-medium"
class="mb-1 flex items-center text-sm font-medium text-foreground"
>
{{ text }}
<slot name="tagText">
@@ -218,7 +218,7 @@ if (enableShortcutKey.value) {
</Badge>
</slot>
</div>
<div class="text-muted-foreground text-xs font-normal">
<div class="text-xs font-normal text-muted-foreground">
{{ description }}
</div>
</div>

1
packages/effects/plugins/package.json
View File

@@ -28,6 +28,7 @@
}
},
"dependencies": {
"@vben-core/design": "workspace:*",
"@vben-core/form-ui": "workspace:*",
"@vben-core/shadcn-ui": "workspace:*",
"@vben-core/shared": "workspace:*",

7
packages/effects/plugins/src/echarts/echarts.ts
View File

@@ -25,7 +25,11 @@ import {
TransformComponent,
} from 'echarts/components';
import * as echarts from 'echarts/core';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import {
LabelLayout,
LegacyGridContainLabel,
UniversalTransition,
} from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
@@ -50,6 +54,7 @@ echarts.use([
BarChart,
LineChart,
LabelLayout,
LegacyGridContainLabel,
UniversalTransition,
CanvasRenderer,
LegendComponent,

2
packages/effects/plugins/src/echarts/use-echarts.ts
View File

@@ -37,7 +37,7 @@ type EchartsThemeType = 'dark' | 'light' | null;
function useEcharts(chartRef: Ref<EchartsUIType>) {
let chartInstance: echarts.ECharts | null = null;
let cacheOptions: EChartsOption = {};
// echart是否处于激活状态
// echarts是否处于激活状态
const isActiveRef = ref(false);
const { isDark } = usePreferences();

11
packages/effects/plugins/src/vxe-table/api.ts
View File

@@ -45,14 +45,13 @@ export class VxeGridApi<T extends Record<string, any> = any> {
const defaultState = getDefaultState();
this.store = new Store<VxeGridProps>(
mergeWithArrayOverride(storeState, defaultState),
{
onUpdate: () => {
// this.prevState = this.state;
this.state = this.store.state;
},
},
);
this.store.subscribe((state) => {
// this.prevState = this.state;
this.state = state;
});
this.state = this.store.state;
this.stateHandler = new StateHandler();
bindMethods(this);

2
packages/effects/plugins/src/vxe-table/style.css
View File

@@ -1,3 +1,5 @@
@reference "@vben-core/design/theme";
:root .vxe-grid {
--vxe-ui-font-color: hsl(var(--foreground));
--vxe-ui-font-primary-color: hsl(var(--primary));

10
packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
View File

@@ -361,7 +361,7 @@ onUnmounted(() => {
</script>
<template>
<div :class="cn('bg-card h-full rounded-md', className)">
<div :class="cn('h-full rounded-md bg-card', className)">
<VxeGrid
ref="gridRef"
:class="
@@ -379,9 +379,7 @@ onUnmounted(() => {
<!-- 左侧操作区域或者title -->
<template v-if="showToolbar" #toolbar-actions="slotProps">
<slot v-if="showTableTitle" name="table-title">
<div
class="flex items-center justify-center gap-1 text-[1rem] font-bold"
>
<div class="flex-center gap-1 text-[1rem] font-bold">
{{ tableTitle }}
<VbenHelpTooltip v-if="tableTitleHelp">
{{ tableTitleHelp }}
@@ -419,7 +417,7 @@ onUnmounted(() => {
v-show="showSearchForm !== false"
:class="
cn(
'relative rounded py-3',
'relative rounded-sm py-3',
isCompactForm
? isSeparator
? 'pb-8'
@@ -461,7 +459,7 @@ onUnmounted(() => {
:style="{
...(separatorBg ? { backgroundColor: separatorBg } : undefined),
}"
class="bg-background-deep z-100 absolute -left-2 bottom-1 h-2 w-[calc(100%+1rem)] overflow-hidden md:bottom-2 md:h-3"
class="absolute bottom-1 -left-2 z-100 h-2 w-[calc(100%+1rem)] overflow-hidden bg-background-deep md:bottom-2 md:h-3"
></div>
</div>
</template>

4
packages/effects/request/src/request-client/modules/sse.ts
View File

@@ -98,11 +98,9 @@ class SSE {
if (!reader) {
throw new Error('No reader');
}
let isEnd = false;
while (!isEnd) {
while (true) {
const { done, value } = await reader.read();
if (done) {
isEnd = true;
decoder.decode(new Uint8Array(0), { stream: false });
requestOptions?.onEnd?.();
reader.releaseLock?.();

2
packages/effects/request/src/request-client/preset-interceptors.ts
View File

@@ -130,7 +130,7 @@ export const errorMessageResponseInterceptor = (
return Promise.reject(error);
}
let errorMessage = '';
let errorMessage: string;
const status = error?.response?.status;
switch (status) {