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]
|
||||
> 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
|
||||
|
||||
[`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]
|
||||
> `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` 为您提供了一站式的后台管理解决方案,无需额外配置,开箱即用。同样是一个快速学习前沿技术的最佳实践。
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<script setup lang="ts" generic="T extends Record<string, unknown>, K = never">
|
||||
import { computed } from 'vue';
|
||||
import { VueDraggable } from 'vue-draggable-plus';
|
||||
import { $t } from '@/locales';
|
||||
|
||||
@@ -22,6 +23,40 @@ function handleFixed(column: NaiveUI.TableColumnCheck) {
|
||||
const nextIndex = index === fixedOptions.length - 1 ? 0 : index + 1;
|
||||
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>
|
||||
|
||||
<template>
|
||||
@@ -34,35 +69,49 @@ function handleFixed(column: NaiveUI.TableColumnCheck) {
|
||||
{{ $t('common.columnSetting') }}
|
||||
</NButton>
|
||||
</template>
|
||||
<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="flex-y-center 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)"
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
{{ $t('common.selectAll') }}
|
||||
</NCheckbox>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -15,6 +15,7 @@ const local: App.I18n.Schema = {
|
||||
cancel: 'Cancel',
|
||||
close: 'Close',
|
||||
check: 'Check',
|
||||
selectAll: 'Select All',
|
||||
expandColumn: 'Expand Column',
|
||||
columnSetting: 'Column Setting',
|
||||
config: 'Config',
|
||||
|
||||
@@ -15,6 +15,7 @@ const local: App.I18n.Schema = {
|
||||
cancel: '取消',
|
||||
close: '关闭',
|
||||
check: '勾选',
|
||||
selectAll: '全选',
|
||||
expandColumn: '展开列',
|
||||
columnSetting: '列设置',
|
||||
config: '配置',
|
||||
|
||||
1
src/typings/app.d.ts
vendored
1
src/typings/app.d.ts
vendored
@@ -326,6 +326,7 @@ declare namespace App {
|
||||
cancel: string;
|
||||
close: string;
|
||||
check: string;
|
||||
selectAll: string;
|
||||
expandColumn: string;
|
||||
columnSetting: string;
|
||||
config: string;
|
||||
|
||||
Reference in New Issue
Block a user