chore(projects): add unocss eslint config

This commit is contained in:
Soybean
2024-03-03 10:32:00 +08:00
parent b4c00ce199
commit 4063529a25
34 changed files with 165 additions and 64 deletions

View File

@ -5,7 +5,7 @@ defineOptions({
</script>
<template>
<DarkModeContainer class="flex-center h-full">
<DarkModeContainer class="h-full flex-center">
<a href="https://github.com/soybeanjs/soybean-admin/blob/main/LICENSE" target="_blank" rel="noopener noreferrer">
Copyright MIT © 2021 Soybean
</a>

View File

@ -46,14 +46,14 @@ const headerMenus = computed(() => {
</script>
<template>
<DarkModeContainer class="flex-y-center h-full shadow-header">
<DarkModeContainer class="h-full flex-y-center shadow-header">
<GlobalLogo v-if="showLogo" class="h-full" :style="{ width: themeStore.sider.width + 'px' }" />
<HorizontalMenu v-if="showMenu" mode="horizontal" :menus="headerMenus" class="px-12px" />
<div v-else class="flex-1-hidden flex-y-center h-full">
<div v-else class="h-full flex-y-center flex-1-hidden">
<MenuToggler v-if="showMenuToggler" :collapsed="appStore.siderCollapse" @click="appStore.toggleSiderCollapse" />
<GlobalBreadcrumb v-if="!appStore.isMobile" class="ml-12px" />
</div>
<div class="flex-y-center justify-end h-full">
<div class="h-full flex-y-center justify-end">
<FullScreen v-if="!appStore.isMobile" :full="isFullscreen" @click="toggle" />
<LangSwitch :lang="appStore.locale" :lang-options="appStore.localeOptions" @change-lang="appStore.changeLocale" />
<ThemeSchemaSwitch

View File

@ -16,9 +16,9 @@ withDefaults(defineProps<Props>(), {
</script>
<template>
<RouterLink to="/" class="flex-center w-full nowrap-hidden">
<RouterLink to="/" class="w-full flex-center nowrap-hidden">
<SystemLogo class="text-32px text-primary" />
<h2 v-show="showTitle" class="pl-8px text-16px font-bold text-primary transition duration-300 ease-in-out">
<h2 v-show="showTitle" class="pl-8px text-16px text-primary font-bold transition duration-300 ease-in-out">
{{ $t('system.title') }}
</h2>
</RouterLink>

View File

@ -58,7 +58,7 @@ function handleClickMixMenu(menu: App.Global.Menu) {
<!-- define component: MixMenuItem -->
<DefineMixMenuItem v-slot="{ label, icon, active, isMini }">
<div
class="flex-vertical-center mx-4px mb-6px py-8px px-4px rounded-8px bg-transparent transition-300 cursor-pointer hover:bg-[rgb(0,0,0,0.08)]"
class="mx-4px mb-6px flex-vertical-center cursor-pointer rounded-8px bg-transparent px-4px py-8px transition-300 hover:bg-[rgb(0,0,0,0.08)]"
:class="{
'text-primary selected-mix-menu': active,
'text-white:65 hover:text-white': inverted,
@ -67,7 +67,7 @@ function handleClickMixMenu(menu: App.Global.Menu) {
>
<component :is="icon" :class="[isMini ? 'text-icon-small' : 'text-icon-large']" />
<p
class="w-full text-center ellipsis-text text-12px transition-height-300"
class="w-full ellipsis-text text-center text-12px transition-height-300"
:class="[isMini ? 'h-0 pt-0' : 'h-24px pt-4px']"
>
{{ label }}
@ -76,7 +76,7 @@ function handleClickMixMenu(menu: App.Global.Menu) {
</DefineMixMenuItem>
<!-- template -->
<div class="flex-1-hidden flex-vertical-stretch h-full">
<div class="h-full flex-vertical-stretch flex-1-hidden">
<slot></slot>
<SimpleScrollbar>
<MixMenuItem

View File

@ -43,7 +43,7 @@ function handleResetActiveMenu() {
</script>
<template>
<div class="flex h-full" @mouseleave="handleResetActiveMenu">
<div class="h-full flex" @mouseleave="handleResetActiveMenu">
<FirstLevelMenu :active-menu-key="activeFirstLevelMenuKey" :inverted="siderInverted" @select="handleSelectMixMenu">
<slot></slot>
</FirstLevelMenu>
@ -52,12 +52,12 @@ function handleResetActiveMenu() {
:style="{ width: appStore.mixSiderFixed ? themeStore.sider.mixChildMenuWidth + 'px' : '0px' }"
>
<DarkModeContainer
class="absolute-lt flex-vertical-stretch h-full nowrap-hidden transition-all-300 shadow-sm"
class="absolute-lt h-full flex-vertical-stretch nowrap-hidden shadow-sm transition-all-300"
:inverted="siderInverted"
:style="{ width: showDrawer ? themeStore.sider.mixChildMenuWidth + 'px' : '0px' }"
>
<header class="flex-y-center justify-between" :style="{ height: themeStore.header.height + 'px' }">
<h2 class="text-primary pl-8px text-16px font-bold">{{ $t('system.title') }}</h2>
<h2 class="pl-8px text-16px text-primary font-bold">{{ $t('system.title') }}</h2>
<PinToggler
:pin="appStore.mixSiderFixed"
:class="{ 'text-white:88 !hover:text-white': siderInverted }"

View File

@ -23,7 +23,7 @@ const showLogo = computed(() => !isVerticalMix.value && !isHorizontalMix.value);
</script>
<template>
<DarkModeContainer class="flex-vertical-stretch size-full shadow-sider" :inverted="darkMenu">
<DarkModeContainer class="size-full flex-vertical-stretch shadow-sider" :inverted="darkMenu">
<GlobalLogo
v-if="showLogo"
:show-title="!appStore.siderCollapse"

View File

@ -159,12 +159,12 @@ init();
</script>
<template>
<DarkModeContainer class="flex-y-center size-full px-16px shadow-tab">
<div ref="bsWrapper" class="flex-1-hidden h-full">
<DarkModeContainer class="size-full flex-y-center px-16px shadow-tab">
<div ref="bsWrapper" class="h-full flex-1-hidden">
<BetterScroll ref="bsScroll" :options="{ scrollX: true, scrollY: false, click: appStore.isMobile }">
<div
ref="tabRef"
class="flex h-full pr-18px"
class="h-full flex pr-18px"
:class="[themeStore.tab.mode === 'chrome' ? 'items-end' : 'items-center gap-12px']"
>
<PageTab

View File

@ -72,14 +72,14 @@ function handleChangeMode(mode: UnionKey.ThemeLayoutMode) {
<div
v-for="(item, key) in layoutConfig"
:key="key"
class="flex border-2px rounded-6px cursor-pointer hover:border-primary"
class="flex cursor-pointer border-2px rounded-6px hover:border-primary"
:class="[mode === key ? 'border-primary' : 'border-transparent']"
@click="handleChangeMode(key)"
>
<NTooltip :placement="item.placement">
<template #trigger>
<div
class="gap-6px w-96px h-64px p-6px rd-4px shadow dark:shadow-coolGray-5"
class="h-64px w-96px gap-6px rd-4px p-6px shadow dark:shadow-coolGray-5"
:class="[key.includes('vertical') ? 'flex' : 'flex-vertical']"
>
<slot :name="key"></slot>

View File

@ -12,9 +12,9 @@ defineProps<Props>();
</script>
<template>
<div class="flex-y-center justify-between w-full">
<div class="w-full flex-y-center justify-between">
<div>
<span class="text-base_text pr-8px">{{ label }}</span>
<span class="pr-8px text-base_text">{{ label }}</span>
<slot name="suffix"></slot>
</div>
<slot></slot>

View File

@ -46,7 +46,7 @@ onMounted(() => {
</script>
<template>
<div class="flex justify-between w-full">
<div class="w-full flex justify-between">
<textarea id="themeConfigCopyTarget" v-model="dataClipboardText" class="absolute opacity-0 -z-1" />
<NButton type="error" ghost @click="handleReset">{{ $t('theme.configOperation.resetConfig') }}</NButton>
<div ref="domRef" data-clipboard-target="#themeConfigCopyTarget">

View File

@ -16,15 +16,15 @@ const themeStore = useThemeStore();
<NDivider>{{ $t('theme.layoutMode.title') }}</NDivider>
<LayoutModeCard v-model:mode="themeStore.layout.mode" :disabled="appStore.isMobile">
<template #vertical>
<div class="layout-sider w-18px h-full"></div>
<div class="layout-sider h-full w-18px"></div>
<div class="vertical-wrapper">
<div class="layout-header"></div>
<div class="layout-main"></div>
</div>
</template>
<template #vertical-mix>
<div class="layout-sider w-8px h-full"></div>
<div class="layout-sider w-16px h-full"></div>
<div class="layout-sider h-full w-8px"></div>
<div class="layout-sider h-full w-16px"></div>
<div class="vertical-wrapper">
<div class="layout-header"></div>
<div class="layout-main"></div>