mirror of
https://github.com/soybeanjs/soybean-admin.git
synced 2026-02-07 15:51:23 +08:00
Compare commits
2 Commits
30e3cdc7b9
...
d73947a5ab
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
d73947a5ab | ||
|
|
0081b9c022 |
@@ -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.
|
||||||
|
|||||||
@@ -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` 为您提供了一站式的后台管理解决方案,无需额外配置,开箱即用。同样是一个快速学习前沿技术的最佳实践。
|
||||||
|
|||||||
@@ -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,6 +69,19 @@ function handleFixed(column: NaiveUI.TableColumnCheck) {
|
|||||||
{{ $t('common.columnSetting') }}
|
{{ $t('common.columnSetting') }}
|
||||||
</NButton>
|
</NButton>
|
||||||
</template>
|
</template>
|
||||||
|
<div>
|
||||||
|
<div class="h-36px flex-y-center rd-4px pl-26px hover:(bg-primary bg-opacity-20)">
|
||||||
|
<NCheckbox
|
||||||
|
:checked="selectAllChecked"
|
||||||
|
:indeterminate="selectAllIndeterminate"
|
||||||
|
:disabled="visibleStats.total === 0"
|
||||||
|
class="flex-1"
|
||||||
|
@update:checked="toggleSelectAll"
|
||||||
|
>
|
||||||
|
{{ $t('common.selectAll') }}
|
||||||
|
</NCheckbox>
|
||||||
|
</div>
|
||||||
|
<NDivider class="!my-4px" />
|
||||||
<VueDraggable v-model="columns" :animation="150" filter=".none_draggable">
|
<VueDraggable v-model="columns" :animation="150" filter=".none_draggable">
|
||||||
<div
|
<div
|
||||||
v-for="item in columns"
|
v-for="item in columns"
|
||||||
@@ -41,7 +89,7 @@ function handleFixed(column: NaiveUI.TableColumnCheck) {
|
|||||||
class="h-36px flex-y-center justify-between gap-6px"
|
class="h-36px flex-y-center justify-between gap-6px"
|
||||||
:class="{ hidden: !item.visible }"
|
:class="{ hidden: !item.visible }"
|
||||||
>
|
>
|
||||||
<div class="flex-y-center rd-4px hover:(bg-primary bg-opacity-20)">
|
<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" />
|
<icon-mdi-drag class="mr-8px h-full cursor-move text-icon" />
|
||||||
<NCheckbox v-model:checked="item.checked" class="none_draggable flex-1">
|
<NCheckbox v-model:checked="item.checked" class="none_draggable flex-1">
|
||||||
<template v-if="typeof item.title === 'function'">
|
<template v-if="typeof item.title === 'function'">
|
||||||
@@ -63,6 +111,7 @@ function handleFixed(column: NaiveUI.TableColumnCheck) {
|
|||||||
</ButtonIcon>
|
</ButtonIcon>
|
||||||
</div>
|
</div>
|
||||||
</VueDraggable>
|
</VueDraggable>
|
||||||
|
</div>
|
||||||
</NPopover>
|
</NPopover>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@@ -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',
|
||||||
|
|||||||
@@ -15,6 +15,7 @@ const local: App.I18n.Schema = {
|
|||||||
cancel: '取消',
|
cancel: '取消',
|
||||||
close: '关闭',
|
close: '关闭',
|
||||||
check: '勾选',
|
check: '勾选',
|
||||||
|
selectAll: '全选',
|
||||||
expandColumn: '展开列',
|
expandColumn: '展开列',
|
||||||
columnSetting: '列设置',
|
columnSetting: '列设置',
|
||||||
config: '配置',
|
config: '配置',
|
||||||
|
|||||||
1
src/typings/app.d.ts
vendored
1
src/typings/app.d.ts
vendored
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user