fix: 修复管理端前端 lint 与构建问题
- 收敛 easyflow-ui-admin 的 lint、格式和类型问题 - 修正 demo 页面与管理端前端构建失败点 - 验证 pnpm lint 与 pnpm build 均已通过
This commit is contained in:
@@ -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 {
|
||||
/**
|
||||
|
||||
@@ -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 {
|
||||
/**
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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 {
|
||||
/**
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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,
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user