mirror of
https://github.com/m-xlsea/ruoyi-plus-soybean.git
synced 2025-09-24 07:49:47 +08:00
chore(projects): add unocss eslint config
This commit is contained in:
@ -23,8 +23,8 @@ const columns = defineModel<FilteredColumn[]>('columns', {
|
||||
</NButton>
|
||||
</template>
|
||||
<VueDraggable v-model="columns">
|
||||
<div v-for="item in columns" :key="item.key" class="flex-y-center h-36px hover:(bg-primary bg-opacity-20) rd-4px">
|
||||
<icon-mdi-drag class="mr-8px text-icon cursor-move" />
|
||||
<div v-for="item in columns" :key="item.key" class="h-36px flex-y-center rd-4px hover:(bg-primary bg-opacity-20)">
|
||||
<icon-mdi-drag class="mr-8px cursor-move text-icon" />
|
||||
<NCheckbox v-model:checked="item.checked">
|
||||
{{ item.title }}
|
||||
</NCheckbox>
|
||||
|
@ -29,7 +29,7 @@ const icon = computed(() => iconMap[props.type]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex-vertical-center gap-24px min-h-520px size-full overflow-hidden">
|
||||
<div class="size-full min-h-520px flex-vertical-center gap-24px overflow-hidden">
|
||||
<div class="flex text-400px text-primary">
|
||||
<SvgIcon :local-icon="icon" />
|
||||
</div>
|
||||
|
@ -7,12 +7,12 @@ defineOptions({
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex-vertical-center gap-24px min-h-520px size-full overflow-hidden">
|
||||
<div class="size-full min-h-520px flex-vertical-center gap-24px overflow-hidden">
|
||||
<div class="flex text-400px text-primary">
|
||||
<SvgIcon local-icon="expectation" />
|
||||
</div>
|
||||
<slot>
|
||||
<h3 class="text-28px font-500 text-primary">{{ $t('common.lookForward') }}</h3>
|
||||
<h3 class="text-28px text-primary font-500">{{ $t('common.lookForward') }}</h3>
|
||||
</slot>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -5,7 +5,7 @@ defineOptions({
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="size-72px rd-1/2 overflow-hidden">
|
||||
<div class="size-72px overflow-hidden rd-1/2">
|
||||
<img src="@/assets/imgs/soybean.jpg" class="size-full" />
|
||||
</div>
|
||||
</template>
|
||||
|
@ -36,7 +36,7 @@ const darkColor = computed(() => getColorPalette(props.themeColor, 6));
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="absolute -left-200px -bottom-400px <sm:(-left-100px -bottom-760px)">
|
||||
<div class="absolute -bottom-400px -left-200px <sm:(-bottom-760px -left-100px)">
|
||||
<svg height="896" width="967.8852157128662">
|
||||
<defs>
|
||||
<path
|
||||
|
@ -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>
|
||||
|
@ -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
|
||||
|
@ -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>
|
||||
|
@ -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
|
||||
|
@ -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 }"
|
||||
|
@ -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"
|
||||
|
@ -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
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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">
|
||||
|
@ -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>
|
||||
|
@ -57,13 +57,13 @@ const bgColor = computed(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative flex-center size-full overflow-hidden" :style="{ backgroundColor: bgColor }">
|
||||
<div class="relative size-full flex-center overflow-hidden" :style="{ backgroundColor: bgColor }">
|
||||
<WaveBg :theme-color="bgThemeColor" />
|
||||
<NCard :bordered="false" class="relative w-auto rd-12px z-4">
|
||||
<NCard :bordered="false" class="relative z-4 w-auto rd-12px">
|
||||
<div class="w-400px <sm:w-300px">
|
||||
<header class="flex-y-center justify-between">
|
||||
<SystemLogo class="text-64px text-primary <sm:text-48px" />
|
||||
<h3 class="text-28px font-500 text-primary <sm:text-22px">{{ $t('system.title') }}</h3>
|
||||
<h3 class="text-28px text-primary font-500 <sm:text-22px">{{ $t('system.title') }}</h3>
|
||||
<div class="i-flex-vertical">
|
||||
<ThemeSchemaSwitch
|
||||
:theme-schema="themeStore.themeScheme"
|
||||
|
@ -18,10 +18,10 @@ const { toggleLoginModule } = useRouterPush();
|
||||
<NInput :placeholder="$t('page.login.common.codePlaceholder')" />
|
||||
</NFormItem>
|
||||
<NSpace vertical :size="18" class="w-full">
|
||||
<NButton type="primary" size="large" block round>
|
||||
<NButton type="primary" size="large" round block>
|
||||
{{ $t('common.confirm') }}
|
||||
</NButton>
|
||||
<NButton size="large" block round @click="toggleLoginModule('pwd-login')">
|
||||
<NButton size="large" round block @click="toggleLoginModule('pwd-login')">
|
||||
{{ $t('page.login.common.back') }}
|
||||
</NButton>
|
||||
</NSpace>
|
||||
|
@ -56,7 +56,7 @@ async function handleSubmit() {
|
||||
<NCheckbox>{{ $t('page.login.pwdLogin.rememberMe') }}</NCheckbox>
|
||||
<NButton quaternary>{{ $t('page.login.pwdLogin.forgetPassword') }}</NButton>
|
||||
</div>
|
||||
<NButton type="primary" size="large" block round :loading="authStore.loginLoading" @click="handleSubmit">
|
||||
<NButton type="primary" size="large" round block :loading="authStore.loginLoading" @click="handleSubmit">
|
||||
{{ $t('common.confirm') }}
|
||||
</NButton>
|
||||
<div class="flex-y-center justify-between gap-12px">
|
||||
|
@ -18,10 +18,10 @@ const { toggleLoginModule } = useRouterPush();
|
||||
<NInput :placeholder="$t('page.login.common.codePlaceholder')" />
|
||||
</NFormItem>
|
||||
<NSpace vertical :size="18" class="w-full">
|
||||
<NButton type="primary" size="large" block round>
|
||||
<NButton type="primary" size="large" round block>
|
||||
{{ $t('common.confirm') }}
|
||||
</NButton>
|
||||
<NButton size="large" block round @click="toggleLoginModule('pwd-login')">
|
||||
<NButton size="large" round block @click="toggleLoginModule('pwd-login')">
|
||||
{{ $t('page.login.common.back') }}
|
||||
</NButton>
|
||||
</NSpace>
|
||||
|
@ -81,7 +81,7 @@ function getGradientColor(color: CardData['color']) {
|
||||
<NCard :bordered="false" size="small" class="card-wrapper">
|
||||
<!-- define component start: GradientBg -->
|
||||
<DefineGradientBg v-slot="{ $slots, gradientColor }">
|
||||
<div class="px-16px pt-8px pb-4px rd-8px text-white" :style="{ backgroundImage: gradientColor }">
|
||||
<div class="rd-8px px-16px pb-4px pt-8px text-white" :style="{ backgroundImage: gradientColor }">
|
||||
<component :is="$slots.default" />
|
||||
</div>
|
||||
</DefineGradientBg>
|
||||
|
@ -7,9 +7,9 @@ defineOptions({
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NCard :title="$t('page.home.creativity')" :bordered="false" size="small" class="card-wrapper h-full">
|
||||
<div class="flex-center h-full">
|
||||
<IconLocalBanner class="text-400px sm:text-320px text-primary" />
|
||||
<NCard :title="$t('page.home.creativity')" :bordered="false" size="small" class="h-full card-wrapper">
|
||||
<div class="h-full flex-center">
|
||||
<IconLocalBanner class="text-400px text-primary sm:text-320px" />
|
||||
</div>
|
||||
</NCard>
|
||||
</template>
|
||||
|
@ -43,14 +43,14 @@ const statisticData = computed<StatisticData[]>(() => [
|
||||
<NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
|
||||
<NGi span="24 s:24 m:18">
|
||||
<div class="flex-y-center">
|
||||
<div class="shrink-0 size-72px rd-1/2 overflow-hidden">
|
||||
<div class="size-72px shrink-0 overflow-hidden rd-1/2">
|
||||
<img src="@/assets/imgs/soybean.jpg" class="size-full" />
|
||||
</div>
|
||||
<div class="pl-12px">
|
||||
<h3 class="text-18px font-semibold">
|
||||
{{ $t('page.home.greeting', { userName: authStore.userInfo.userName }) }}
|
||||
</h3>
|
||||
<p class="leading-30px text-#999">{{ $t('page.home.weatherDesc') }}</p>
|
||||
<p class="text-#999 leading-30px">{{ $t('page.home.weatherDesc') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</NGi>
|
||||
|
@ -227,7 +227,7 @@ async function handleDelete(id: number) {
|
||||
|
||||
<template>
|
||||
<div ref="wrapperRef" class="flex-vertical-stretch gap-16px overflow-hidden <sm:overflow-auto">
|
||||
<NCard :title="$t('page.manage.menu.title')" :bordered="false" size="small" class="card-wrapper sm:flex-1-hidden">
|
||||
<NCard :title="$t('page.manage.menu.title')" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
|
||||
<template #header-extra>
|
||||
<TableHeaderOperation
|
||||
v-model:columns="filteredColumns"
|
||||
|
@ -176,7 +176,7 @@ function getIndex(index: number) {
|
||||
<template>
|
||||
<div class="flex-vertical-stretch gap-16px overflow-hidden <sm:overflow-auto">
|
||||
<RoleSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getData" />
|
||||
<NCard :title="$t('page.manage.role.title')" :bordered="false" size="small" class="card-wrapper sm:flex-1-hidden">
|
||||
<NCard :title="$t('page.manage.role.title')" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
|
||||
<template #header-extra>
|
||||
<TableHeaderOperation
|
||||
v-model:columns="filteredColumns"
|
||||
|
@ -206,7 +206,7 @@ function getIndex(index: number) {
|
||||
<template>
|
||||
<div class="flex-vertical-stretch gap-16px overflow-hidden <sm:overflow-auto">
|
||||
<UserSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getData" />
|
||||
<NCard :title="$t('page.manage.user.title')" :bordered="false" size="small" class="card-wrapper sm:flex-1-hidden">
|
||||
<NCard :title="$t('page.manage.user.title')" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
|
||||
<template #header-extra>
|
||||
<TableHeaderOperation
|
||||
v-model:columns="filteredColumns"
|
||||
|
Reference in New Issue
Block a user