Compare commits

..

2 Commits

Author SHA1 Message Date
skyfeiz
d73947a5ab docs(projects): V2 has been released. 2026-01-19 11:23:34 +08:00
wenyuan
0081b9c022 feat(components): Add “Select All” to TableColumnSetting 2026-01-19 11:23:16 +08:00
6 changed files with 79 additions and 33 deletions

View File

@@ -23,9 +23,6 @@
> [!NOTE] > [!NOTE]
> The `SoybeanAdmin` quick start series videos have been uploaded to [Bilibili](https://www.bilibili.com/video/BV1YKdRYXELC) Go online [click here](https://www.bilibili.com/video/BV1YKdRYXELC) Go check it out > The `SoybeanAdmin` quick start series videos have been uploaded to [Bilibili](https://www.bilibili.com/video/BV1YKdRYXELC) Go online [click here](https://www.bilibili.com/video/BV1YKdRYXELC) Go check it out
> [!WARNING]
> `SoybeanAdmin` is planning to develop a `V2` version, see [plan list](https://github.com/soybeanjs/soybean-admin/issues/767)
## Introduction ## Introduction
[`SoybeanAdmin`](https://github.com/soybeanjs/soybean-admin) is a clean, elegant, beautiful and powerful admin template, based on the latest front-end technology stack, including Vue3, Vite7, TypeScript, Pinia and UnoCSS. It has built-in rich theme configuration and components, strict code specifications, and an automated file routing system. In addition, it also uses the online mock data solution based on ApiFox. `SoybeanAdmin` provides you with a one-stop admin solution, no additional configuration, and out of the box. It is also a best practice for learning cutting-edge technologies quickly. [`SoybeanAdmin`](https://github.com/soybeanjs/soybean-admin) is a clean, elegant, beautiful and powerful admin template, based on the latest front-end technology stack, including Vue3, Vite7, TypeScript, Pinia and UnoCSS. It has built-in rich theme configuration and components, strict code specifications, and an automated file routing system. In addition, it also uses the online mock data solution based on ApiFox. `SoybeanAdmin` provides you with a one-stop admin solution, no additional configuration, and out of the box. It is also a best practice for learning cutting-edge technologies quickly.

View File

@@ -23,9 +23,6 @@
> [!NOTE] > [!NOTE]
> `SoybeanAdmin` 快速上手系列视频已在 [Bilibili](https://www.bilibili.com/video/BV1YKdRYXELC) 上线 [点击这里](https://www.bilibili.com/video/BV1YKdRYXELC) 前往查看 > `SoybeanAdmin` 快速上手系列视频已在 [Bilibili](https://www.bilibili.com/video/BV1YKdRYXELC) 上线 [点击这里](https://www.bilibili.com/video/BV1YKdRYXELC) 前往查看
> [!WARNING]
> `SoybeanAdmin` 正在计划开发 `V2` 版本,详情见[计划清单](https://github.com/soybeanjs/soybean-admin/issues/767)
## 简介 ## 简介
[`SoybeanAdmin`](https://github.com/soybeanjs/soybean-admin) 是一个清新优雅、高颜值且功能强大的后台管理模板,基于最新的前端技术栈,包括 Vue3, Vite7, TypeScript, Pinia 和 UnoCSS。它内置了丰富的主题配置和组件代码规范严谨实现了自动化的文件路由系统。此外它还采用了基于 ApiFox 的在线Mock数据方案。`SoybeanAdmin` 为您提供了一站式的后台管理解决方案,无需额外配置,开箱即用。同样是一个快速学习前沿技术的最佳实践。 [`SoybeanAdmin`](https://github.com/soybeanjs/soybean-admin) 是一个清新优雅、高颜值且功能强大的后台管理模板,基于最新的前端技术栈,包括 Vue3, Vite7, TypeScript, Pinia 和 UnoCSS。它内置了丰富的主题配置和组件代码规范严谨实现了自动化的文件路由系统。此外它还采用了基于 ApiFox 的在线Mock数据方案。`SoybeanAdmin` 为您提供了一站式的后台管理解决方案,无需额外配置,开箱即用。同样是一个快速学习前沿技术的最佳实践。

View File

@@ -1,4 +1,5 @@
<script setup lang="ts" generic="T extends Record<string, unknown>, K = never"> <script setup lang="ts" generic="T extends Record<string, unknown>, K = never">
import { computed } from 'vue';
import { VueDraggable } from 'vue-draggable-plus'; import { VueDraggable } from 'vue-draggable-plus';
import { $t } from '@/locales'; import { $t } from '@/locales';
@@ -22,6 +23,40 @@ function handleFixed(column: NaiveUI.TableColumnCheck) {
const nextIndex = index === fixedOptions.length - 1 ? 0 : index + 1; const nextIndex = index === fixedOptions.length - 1 ? 0 : index + 1;
column.fixed = fixedOptions[nextIndex]; column.fixed = fixedOptions[nextIndex];
} }
const visibleStats = computed(() => {
let total = 0;
let checked = 0;
columns.value.forEach(column => {
if (!column.visible) return;
total += 1;
if (column.checked) checked += 1;
});
return { total, checked };
});
const selectAllChecked = computed(() => {
const { total, checked } = visibleStats.value;
return total > 0 && checked === total;
});
const selectAllIndeterminate = computed(() => {
const { total, checked } = visibleStats.value;
return checked > 0 && checked < total;
});
function toggleSelectAll(checked: boolean) {
columns.value.forEach(column => {
if (!column.visible) return;
column.checked = checked;
});
}
</script> </script>
<template> <template>
@@ -34,35 +69,49 @@ function handleFixed(column: NaiveUI.TableColumnCheck) {
{{ $t('common.columnSetting') }} {{ $t('common.columnSetting') }}
</NButton> </NButton>
</template> </template>
<VueDraggable v-model="columns" :animation="150" filter=".none_draggable"> <div>
<div <div class="h-36px flex-y-center rd-4px pl-26px hover:(bg-primary bg-opacity-20)">
v-for="item in columns" <NCheckbox
:key="item.key" :checked="selectAllChecked"
class="h-36px flex-y-center justify-between gap-6px" :indeterminate="selectAllIndeterminate"
:class="{ hidden: !item.visible }" :disabled="visibleStats.total === 0"
> class="flex-1"
<div class="flex-y-center rd-4px hover:(bg-primary bg-opacity-20)"> @update:checked="toggleSelectAll"
<icon-mdi-drag class="mr-8px h-full cursor-move text-icon" />
<NCheckbox v-model:checked="item.checked" class="none_draggable flex-1">
<template v-if="typeof item.title === 'function'">
<component :is="item.title" />
</template>
<template v-else>{{ item.title }}</template>
</NCheckbox>
</div>
<ButtonIcon
:disabled="!item.checked"
text
:focusable="false"
:tooltip-content="$t(tooltipRecord[item.fixed!])"
@click="handleFixed(item)"
> >
<icon-octicon-pin-16 v-if="item.fixed === 'unFixed'" /> {{ $t('common.selectAll') }}
<icon-octicon-pin-16 v-else-if="item.fixed === 'left'" class="rotate-270" /> </NCheckbox>
<icon-octicon-pin-slash-16 v-else />
</ButtonIcon>
</div> </div>
</VueDraggable> <NDivider class="!my-4px" />
<VueDraggable v-model="columns" :animation="150" filter=".none_draggable">
<div
v-for="item in columns"
:key="item.key"
class="h-36px flex-y-center justify-between gap-6px"
:class="{ hidden: !item.visible }"
>
<div class="h-full flex-y-center flex-1 rd-4px hover:(bg-primary bg-opacity-20)">
<icon-mdi-drag class="mr-8px h-full cursor-move text-icon" />
<NCheckbox v-model:checked="item.checked" class="none_draggable flex-1">
<template v-if="typeof item.title === 'function'">
<component :is="item.title" />
</template>
<template v-else>{{ item.title }}</template>
</NCheckbox>
</div>
<ButtonIcon
:disabled="!item.checked"
text
:focusable="false"
:tooltip-content="$t(tooltipRecord[item.fixed!])"
@click="handleFixed(item)"
>
<icon-octicon-pin-16 v-if="item.fixed === 'unFixed'" />
<icon-octicon-pin-16 v-else-if="item.fixed === 'left'" class="rotate-270" />
<icon-octicon-pin-slash-16 v-else />
</ButtonIcon>
</div>
</VueDraggable>
</div>
</NPopover> </NPopover>
</template> </template>

View File

@@ -15,6 +15,7 @@ const local: App.I18n.Schema = {
cancel: 'Cancel', cancel: 'Cancel',
close: 'Close', close: 'Close',
check: 'Check', check: 'Check',
selectAll: 'Select All',
expandColumn: 'Expand Column', expandColumn: 'Expand Column',
columnSetting: 'Column Setting', columnSetting: 'Column Setting',
config: 'Config', config: 'Config',

View File

@@ -15,6 +15,7 @@ const local: App.I18n.Schema = {
cancel: '取消', cancel: '取消',
close: '关闭', close: '关闭',
check: '勾选', check: '勾选',
selectAll: '全选',
expandColumn: '展开列', expandColumn: '展开列',
columnSetting: '列设置', columnSetting: '列设置',
config: '配置', config: '配置',

View File

@@ -326,6 +326,7 @@ declare namespace App {
cancel: string; cancel: string;
close: string; close: string;
check: string; check: string;
selectAll: string;
expandColumn: string; expandColumn: string;
columnSetting: string; columnSetting: string;
config: string; config: string;