fix: 修复管理端前端 lint 与构建问题

- 收敛 easyflow-ui-admin 的 lint、格式和类型问题

- 修正 demo 页面与管理端前端构建失败点

- 验证 pnpm lint 与 pnpm build 均已通过
This commit is contained in:
2026-04-05 21:39:13 +08:00
parent bb72e19c84
commit 7e7c236c2a
240 changed files with 5151 additions and 4701 deletions

View File

@@ -1,11 +1,12 @@
<script setup lang="ts">
import type {CSSProperties} from 'vue';
import {computed} from 'vue';
import type { CSSProperties } from 'vue';
import type {ContentCompactType} from '@easyflow-core/typings';
import type { ContentCompactType } from '@easyflow-core/typings';
import {useLayoutContentStyle} from '@easyflow-core/composables';
import {Slot} from '@easyflow-core/shadcn-ui';
import { computed } from 'vue';
import { useLayoutContentStyle } from '@easyflow-core/composables';
import { Slot } from '@easyflow-core/shadcn-ui';
interface Props {
/**

View File

@@ -1,6 +1,7 @@
<script setup lang="ts">
import type {CSSProperties} from 'vue';
import {computed, useSlots} from 'vue';
import type { CSSProperties } from 'vue';
import { computed, useSlots } from 'vue';
interface Props {
/**

View File

@@ -1,12 +1,13 @@
<script setup lang="ts">
import type {CSSProperties} from 'vue';
import {computed, shallowRef, useSlots, watchEffect} from 'vue';
import type { CSSProperties } from 'vue';
import {EasyFlowScrollbar} from '@easyflow-core/shadcn-ui';
import { computed, shallowRef, useSlots, watchEffect } from 'vue';
import {useScrollLock} from '@vueuse/core';
import { EasyFlowScrollbar } from '@easyflow-core/shadcn-ui';
import {SidebarCollapseButton, SidebarFixedButton} from './widgets';
import { useScrollLock } from '@vueuse/core';
import { SidebarCollapseButton, SidebarFixedButton } from './widgets';
interface Props {
/**
@@ -295,15 +296,11 @@ function handleFixedToggle(nextValue: boolean) {
},
]"
:style="style"
class="fixed left-0 top-0 h-full overflow-hidden transition-all duration-150"
class="fixed left-0 top-0 h-full overflow-hidden transition-all duration-150"
@mouseenter="handleMouseenter"
@mouseleave="handleMouseleave"
>
<div
v-if="slots.logo"
:style="headerStyle"
class="relative z-10 px-2 pt-2"
>
<div v-if="slots.logo" :style="headerStyle" class="relative z-10 px-2 pt-2">
<slot name="logo"></slot>
</div>
<EasyFlowScrollbar :style="contentStyle" class="relative z-10">
@@ -333,17 +330,14 @@ function handleFixedToggle(nextValue: boolean) {
>
<slot name="extra-title"></slot>
</div>
<EasyFlowScrollbar
:style="extraContentStyle"
class="relative z-10 py-2"
>
<EasyFlowScrollbar :style="extraContentStyle" class="relative z-10 py-2">
<slot name="extra"></slot>
</EasyFlowScrollbar>
<div
v-if="expandOnHover || !extraCollapse"
:style="toolStyle"
class="absolute right-3 z-20 flex flex-col gap-2"
>
v-if="expandOnHover || !extraCollapse"
:style="toolStyle"
class="absolute right-3 z-20 flex flex-col gap-2"
>
<SidebarCollapseButton
v-if="expandOnHover"
v-model:collapsed="extraCollapse"

View File

@@ -1,6 +1,7 @@
<script setup lang="ts">
import type {CSSProperties} from 'vue';
import {computed} from 'vue';
import type { CSSProperties } from 'vue';
import { computed } from 'vue';
interface Props {
/**

View File

@@ -21,7 +21,7 @@ function handleCollapsed() {
<button
aria-label="切换侧边栏折叠状态"
:style="buttonStyle"
class="flex-center h-9 w-9 rounded-2xl text-[hsl(var(--nav-item-muted-foreground))] backdrop-blur-xl transition-[background-color,color,transform,box-shadow,border-color] duration-200 hover:-translate-y-0.5 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--primary))/0.2]"
class="flex-center hover:text-foreground h-9 w-9 rounded-2xl text-[hsl(var(--nav-item-muted-foreground))] backdrop-blur-xl transition-[background-color,color,transform,box-shadow,border-color] duration-200 hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--primary))/0.2]"
@click.stop="handleCollapsed"
>
<ChevronsRight v-if="collapsed" class="size-4" />

View File

@@ -1,12 +1,12 @@
<script setup lang="ts">
import type {CSSProperties} from 'vue';
import type { CSSProperties } from 'vue';
import {Pin, PinOff} from '@easyflow-core/icons';
import { Pin, PinOff } from '@easyflow-core/icons';
const expandOnHover = defineModel<boolean>('expandOnHover');
const emit = defineEmits<{
toggle: [value: boolean];
}>();
const expandOnHover = defineModel<boolean>('expandOnHover');
const buttonStyle: CSSProperties = {
backgroundColor: 'hsl(var(--nav-tool-bg) / 0.92)',
backgroundImage:
@@ -26,7 +26,7 @@ function toggleFixed() {
<button
aria-label="切换侧边栏固定状态"
:style="buttonStyle"
class="flex-center h-9 w-9 rounded-2xl text-[hsl(var(--nav-item-muted-foreground))] backdrop-blur-xl transition-[background-color,color,transform,box-shadow,border-color] duration-200 hover:-translate-y-0.5 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--primary))/0.2]"
class="flex-center hover:text-foreground h-9 w-9 rounded-2xl text-[hsl(var(--nav-item-muted-foreground))] backdrop-blur-xl transition-[background-color,color,transform,box-shadow,border-color] duration-200 hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--primary))/0.2]"
@click="toggleFixed"
>
<PinOff v-if="!expandOnHover" class="size-3.5" />

View File

@@ -1,19 +1,20 @@
<script setup lang="ts">
import type {CSSProperties} from 'vue';
import {computed, ref, watch} from 'vue';
import type { CSSProperties } from 'vue';
import type {EasyFlowLayoutProps} from './easyflow-layout';
import type { EasyFlowLayoutProps } from './easyflow-layout';
import { computed, ref, watch } from 'vue';
import {
SCROLL_FIXED_CLASS,
useLayoutFooterStyle,
useLayoutHeaderStyle,
} from '@easyflow-core/composables';
import {IconifyIcon} from '@easyflow-core/icons';
import {EasyFlowIconButton} from '@easyflow-core/shadcn-ui';
import {ELEMENT_ID_MAIN_CONTENT} from '@easyflow-core/shared/constants';
import { IconifyIcon } from '@easyflow-core/icons';
import { EasyFlowIconButton } from '@easyflow-core/shadcn-ui';
import { ELEMENT_ID_MAIN_CONTENT } from '@easyflow-core/shared/constants';
import {useMouse, useScroll, useThrottleFn} from '@vueuse/core';
import { useMouse, useScroll, useThrottleFn } from '@vueuse/core';
import {
LayoutContent,
@@ -22,7 +23,7 @@ import {
LayoutSidebar,
LayoutTabbar,
} from './components';
import {useLayout} from './hooks/use-layout';
import { useLayout } from './hooks/use-layout';
interface Props extends EasyFlowLayoutProps {}
@@ -30,24 +31,6 @@ defineOptions({
name: 'EasyFlowLayout',
});
const headerToggleButtonClass =
'my-0 mr-1 flex h-9 w-9 items-center justify-center rounded-2xl text-[hsl(var(--nav-item-muted-foreground))] backdrop-blur-xl transition-[background-color,color,transform,box-shadow,border-color] hover:-translate-y-0.5 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--primary))/0.2]';
const headerToggleButtonStyle: CSSProperties = {
backgroundColor: 'hsl(var(--nav-tool-bg) / 0.92)',
backgroundImage:
'linear-gradient(180deg, hsl(var(--nav-tool-bg) / 0.96), hsl(var(--glass-tint) / 0.8))',
border: '1px solid hsl(var(--glass-border) / 0.2)',
boxShadow: '0 18px 36px -28px hsl(var(--primary) / 0.24)',
};
const layoutFlowFieldStyle: CSSProperties = {
backgroundImage:
'radial-gradient(ellipse 14% 18% at 5% 3%, hsl(var(--nav-flow-core) / 0.34) 0%, hsl(var(--nav-flow-core) / 0.14) 34%, transparent 74%), radial-gradient(ellipse 48% 18% at 16% 8%, hsl(var(--nav-flow-core) / 0.12) 0%, transparent 68%), radial-gradient(ellipse 68% 34% at 28% 18%, hsl(var(--nav-flow-secondary) / 0.1) 0%, transparent 70%), linear-gradient(122deg, hsl(var(--nav-flow-trace) / 0.13) 0%, hsl(var(--nav-flow-trace) / 0.1) 8%, hsl(var(--nav-flow-core) / 0.08) 14%, transparent 24%, transparent 42%, hsl(var(--nav-flow-secondary) / 0.06) 58%, hsl(var(--nav-flow-trace) / 0.04) 70%, transparent 88%), radial-gradient(ellipse 84% 34% at 34% 26%, hsl(var(--nav-flow-core) / 0.08) 0%, transparent 72%), radial-gradient(ellipse 74% 30% at 48% 38%, hsl(var(--nav-flow-secondary) / 0.06) 0%, transparent 74%), radial-gradient(ellipse 62% 26% at 60% 48%, hsl(var(--nav-flow-accent) / 0.04) 0%, transparent 76%)',
};
const layoutFlowGlowStyle: CSSProperties = {
backgroundImage:
'radial-gradient(ellipse 18% 20% at 6% 4%, hsl(var(--nav-flow-core) / 0.18) 0%, transparent 74%), radial-gradient(ellipse 72% 28% at 26% 16%, hsl(var(--nav-flow-trace) / 0.08) 0%, transparent 70%), radial-gradient(ellipse 68% 26% at 44% 28%, hsl(var(--nav-flow-secondary) / 0.05) 0%, transparent 72%), radial-gradient(ellipse 58% 22% at 62% 42%, hsl(var(--nav-flow-trace) / 0.04) 0%, transparent 74%)',
};
const props = withDefaults(defineProps<Props>(), {
contentCompact: 'wide',
contentCompactWidth: 1200,
@@ -79,8 +62,25 @@ const props = withDefaults(defineProps<Props>(), {
tabbarHeight: 40,
zIndex: 200,
});
const emit = defineEmits<{ sideMouseLeave: []; toggleSidebar: [] }>();
const headerToggleButtonClass =
'my-0 mr-1 flex h-9 w-9 items-center justify-center rounded-2xl text-[hsl(var(--nav-item-muted-foreground))] backdrop-blur-xl transition-[background-color,color,transform,box-shadow,border-color] hover:-translate-y-0.5 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--primary))/0.2]';
const headerToggleButtonStyle: CSSProperties = {
backgroundColor: 'hsl(var(--nav-tool-bg) / 0.92)',
backgroundImage:
'linear-gradient(180deg, hsl(var(--nav-tool-bg) / 0.96), hsl(var(--glass-tint) / 0.8))',
border: '1px solid hsl(var(--glass-border) / 0.2)',
boxShadow: '0 18px 36px -28px hsl(var(--primary) / 0.24)',
};
const layoutFlowFieldStyle: CSSProperties = {
backgroundImage:
'radial-gradient(ellipse 14% 18% at 5% 3%, hsl(var(--nav-flow-core) / 0.34) 0%, hsl(var(--nav-flow-core) / 0.14) 34%, transparent 74%), radial-gradient(ellipse 48% 18% at 16% 8%, hsl(var(--nav-flow-core) / 0.12) 0%, transparent 68%), radial-gradient(ellipse 68% 34% at 28% 18%, hsl(var(--nav-flow-secondary) / 0.1) 0%, transparent 70%), linear-gradient(122deg, hsl(var(--nav-flow-trace) / 0.13) 0%, hsl(var(--nav-flow-trace) / 0.1) 8%, hsl(var(--nav-flow-core) / 0.08) 14%, transparent 24%, transparent 42%, hsl(var(--nav-flow-secondary) / 0.06) 58%, hsl(var(--nav-flow-trace) / 0.04) 70%, transparent 88%), radial-gradient(ellipse 84% 34% at 34% 26%, hsl(var(--nav-flow-core) / 0.08) 0%, transparent 72%), radial-gradient(ellipse 74% 30% at 48% 38%, hsl(var(--nav-flow-secondary) / 0.06) 0%, transparent 74%), radial-gradient(ellipse 62% 26% at 60% 48%, hsl(var(--nav-flow-accent) / 0.04) 0%, transparent 76%)',
};
const layoutFlowGlowStyle: CSSProperties = {
backgroundImage:
'radial-gradient(ellipse 18% 20% at 6% 4%, hsl(var(--nav-flow-core) / 0.18) 0%, transparent 74%), radial-gradient(ellipse 72% 28% at 26% 16%, hsl(var(--nav-flow-trace) / 0.08) 0%, transparent 70%), radial-gradient(ellipse 68% 26% at 44% 28%, hsl(var(--nav-flow-secondary) / 0.05) 0%, transparent 72%), radial-gradient(ellipse 58% 22% at 62% 42%, hsl(var(--nav-flow-trace) / 0.04) 0%, transparent 74%)',
};
const sidebarCollapse = defineModel<boolean>('sidebarCollapse', {
default: false,
});