admin panel beter ui

This commit is contained in:
s.esmaeili
2026-09-19 12:05:59 +03:30
parent 80ccf1a2aa
commit 81987ceae8
196 changed files with 565 additions and 431 deletions
@@ -13,33 +13,55 @@
-->
<div class="x-table">
<div class="x-table__toolbar">
<a-input-search
v-if="!model._hideSearch"
v-model:value="query.search"
placeholder="جستجو"
allow-clear
style="max-width: 260px"
@search="onSearch"
/>
<div class="x-table__search-group">
<a-input-search
v-if="!model._hideSearch"
v-model:value="query.search"
placeholder="جستجو"
allow-clear
style="max-width: 260px"
@search="onSearch"
/>
<div class="x-table__actions">
<a-button v-if="!model._noFilters" :type="activeFilter ? 'primary' : 'default'" @click="toggleVisibleFilter">
فیلتر
<a-badge v-if="query.filters.length" :count="query.filters.length" />
</a-button>
<div class="x-table__actions">
<a-badge v-if="!model._noFilters" :count="query.filters.length">
<a-button type="text" :class="{ 'x-table__action--active': activeFilter }" @click="toggleVisibleFilter">
فیلتر
<template #icon><FilterOutlined /></template>
</a-button>
</a-badge>
<a-dropdown :trigger="['click']">
<a-button>ستون‌ها</a-button>
<template #overlay>
<a-menu>
<a-menu-item v-for="col in cols" :key="col.key">
<a-checkbox v-model:checked="col.show">{{ col.title }}</a-checkbox>
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
<a-tooltip title="چاپ">
<a-button type="text" shape="circle">
<template #icon><PrinterOutlined /></template>
</a-button>
</a-tooltip>
<a-button class="refresh-btn" :loading="loading" @click="fetch()">بارگذاری مجدد</a-button>
<a-dropdown :trigger="['click']">
<a-tooltip title="ستون‌ها">
<a-button type="text" shape="circle">
<template #icon><SettingOutlined /></template>
</a-button>
</a-tooltip>
<template #overlay>
<a-menu>
<a-menu-item v-for="col in cols" :key="col.key">
<a-checkbox v-model:checked="col.show">{{ col.title }}</a-checkbox>
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
<a-tooltip title="بارگذاری مجدد">
<a-button class="refresh-btn" type="text" shape="circle" :loading="loading" @click="fetch()">
<template #icon><ReloadOutlined /></template>
</a-button>
</a-tooltip>
</div>
</div>
<div v-if="$slots.add" class="x-table__add">
<slot name="add" />
</div>
</div>
@@ -115,6 +137,7 @@
<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue';
import { FilterOutlined, PrinterOutlined, ReloadOutlined, SettingOutlined } from '@ant-design/icons-vue';
import api from '../../api/client';
import type { XTbl } from './model';
@@ -336,11 +359,24 @@ defineExpose({ fetch });
align-items: center;
gap: 12px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.x-table__search-group {
display: flex;
align-items: center;
gap: 24px;
flex-wrap: nowrap;
}
.x-table__actions {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: nowrap;
}
.x-table__action--active {
color: #1677ff;
}
.x-table__add {
display: flex;
}
.x-table__filters {
background: #fafafa;