添加 Title 组件
This commit is contained in:
tao
@@ -1,394 +0,0 @@
|
||||
<template>
|
||||
<div class="bottom-actions">
|
||||
<div class="pagination-container">
|
||||
<div class="pagination-control left" v-if="showPagination">
|
||||
<div class="pagination-btn-wrapper">
|
||||
<a-button :disabled="currentPage === 1" @click="goToPrevPage" class="pagination-btn prev-btn">
|
||||
<template #icon>
|
||||
<LeftOutlined />
|
||||
</template>
|
||||
</a-button>
|
||||
<div class="page-tooltip" v-if="currentPage > 1">
|
||||
{{ currentPage - 1 }} / {{ totalPages }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="buttons-container">
|
||||
<a-row :gutter="16" justify="center">
|
||||
<a-col v-for="button in currentPageButtons" :key="button.label">
|
||||
<a-button :type="button.type" size="large" @click="executeButtonAction(button.handler)"
|
||||
:class="['action-button', getButtonStatusClass(button)]">
|
||||
<component :is="getButtonStatusIcon(button)" v-if="getButtonStatusIcon(button)"
|
||||
class="status-icon-btn" />
|
||||
{{ button.label }}
|
||||
</a-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
|
||||
<div class="pagination-control right" v-if="showPagination">
|
||||
<div class="pagination-btn-wrapper">
|
||||
<a-button :disabled="currentPage === totalPages" @click="goToNextPage" class="pagination-btn next-btn">
|
||||
<template #icon>
|
||||
<RightOutlined />
|
||||
</template>
|
||||
</a-button>
|
||||
<div class="page-tooltip" v-if="currentPage < totalPages">
|
||||
{{ currentPage + 1 }} / {{ totalPages }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, nextTick, onMounted, onBeforeUnmount } from 'vue';
|
||||
import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
|
||||
|
||||
type ButtonType = 'primary' | 'default' | 'dashed' | 'text' | 'link';
|
||||
|
||||
interface ActionButton {
|
||||
label: string;
|
||||
handler: string;
|
||||
type: ButtonType;
|
||||
status?: 'running' | 'paused' | 'idle';
|
||||
}
|
||||
|
||||
interface Props {
|
||||
buttons: ActionButton[];
|
||||
buttonsPerPage?: number;
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'execute', handlerName: string): void;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
buttonsPerPage: 6
|
||||
});
|
||||
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
// 底部按钮分页控制
|
||||
const currentPage = ref(1);
|
||||
const buttonsPerPage = ref(props.buttonsPerPage);
|
||||
|
||||
// 获取按钮状态样式类
|
||||
const getButtonStatusClass = (button: ActionButton) => {
|
||||
const statusClasses = {
|
||||
running: 'status-running',
|
||||
paused: 'status-paused',
|
||||
idle: 'status-idle'
|
||||
};
|
||||
return statusClasses[button.status || 'idle'];
|
||||
};
|
||||
|
||||
// 获取按钮状态图标
|
||||
const getButtonStatusIcon = (button: ActionButton) => {
|
||||
const statusIcons = {
|
||||
running: 'i-play-circle',
|
||||
paused: 'i-pause-circle',
|
||||
idle: ''
|
||||
};
|
||||
return statusIcons[button.status || 'idle'];
|
||||
};
|
||||
|
||||
// 计算当前页显示的按钮
|
||||
const currentPageButtons = computed(() => {
|
||||
const start = (currentPage.value - 1) * buttonsPerPage.value;
|
||||
const end = start + buttonsPerPage.value;
|
||||
return props.buttons.slice(start, end);
|
||||
});
|
||||
|
||||
// 计算总页数
|
||||
const totalPages = computed(() => {
|
||||
return Math.ceil(props.buttons.length / buttonsPerPage.value);
|
||||
});
|
||||
|
||||
// 是否显示分页控制
|
||||
const showPagination = computed(() => {
|
||||
return totalPages.value > 1;
|
||||
});
|
||||
|
||||
// 分页控制函数
|
||||
const goToPrevPage = () => {
|
||||
if (currentPage.value > 1) {
|
||||
currentPage.value--;
|
||||
}
|
||||
};
|
||||
|
||||
const goToNextPage = () => {
|
||||
if (currentPage.value < totalPages.value) {
|
||||
currentPage.value++;
|
||||
}
|
||||
};
|
||||
|
||||
// 执行按钮操作
|
||||
const executeButtonAction = (handlerName: string) => {
|
||||
emit('execute', handlerName);
|
||||
};
|
||||
|
||||
// 响应式调整按钮数量
|
||||
const updateButtonsPerPage = () => {
|
||||
nextTick(() => {
|
||||
const buttonsContainer = document.querySelector('.buttons-container') as HTMLElement;
|
||||
if (!buttonsContainer) {
|
||||
buttonsPerPage.value = props.buttonsPerPage; // 默认值
|
||||
return;
|
||||
}
|
||||
|
||||
const containerWidth = buttonsContainer.offsetWidth;
|
||||
const buttonWidth = 100; // 单个操作按钮最小宽度
|
||||
const buttonGap = 16; // 按钮间距
|
||||
|
||||
// 计算可以放置的按钮数量
|
||||
const maxButtons = Math.floor((containerWidth + buttonGap) / (buttonWidth + buttonGap));
|
||||
|
||||
// 设置最小和最大按钮数量
|
||||
buttonsPerPage.value = Math.max(3, maxButtons);
|
||||
});
|
||||
};
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
// 初始化按钮数量
|
||||
updateButtonsPerPage();
|
||||
|
||||
// 监听窗口大小变化
|
||||
window.addEventListener('resize', updateButtonsPerPage);
|
||||
});
|
||||
|
||||
// 清理事件监听
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', updateButtonsPerPage);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
// 变量定义
|
||||
$primary-color: #4a90e2;
|
||||
$primary-light: #5ba0f2;
|
||||
$success-color: #52c41a;
|
||||
$success-light: #73d13d;
|
||||
$success-bg: rgba(82, 196, 26, 0.1);
|
||||
$success-bg-hover: rgba(82, 196, 26, 0.2);
|
||||
$warning-color: #faad14;
|
||||
$warning-light: #ffc53d;
|
||||
$warning-bg: rgba(250, 173, 20, 0.1);
|
||||
$warning-bg-hover: rgba(250, 173, 20, 0.2);
|
||||
$error-color: #ff4d4f;
|
||||
$error-light: #ff7875;
|
||||
$bg-dark: rgba(0, 0, 0, 0.4);
|
||||
$bg-overlay: rgba(255, 255, 255, 0.1);
|
||||
$bg-overlay-hover: rgba(255, 255, 255, 0.2);
|
||||
$text-light: #cccccc;
|
||||
$text-success: #52c41a;
|
||||
$text-warning: #faad14;
|
||||
$white: #ffffff;
|
||||
$spacing-xs: 4px;
|
||||
$spacing-sm: 8px;
|
||||
$spacing-md: 12px;
|
||||
$spacing-lg: 16px;
|
||||
$border-radius: 6px;
|
||||
$border-radius-lg: 8px;
|
||||
$transition: all 0.3s ease;
|
||||
|
||||
// 混合器
|
||||
@mixin flex-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@mixin button-base {
|
||||
border-radius: $border-radius;
|
||||
font-weight: 500;
|
||||
transition: $transition;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 底部操作按钮区域 */
|
||||
.bottom-actions {
|
||||
height: 80px;
|
||||
background: $bg-dark;
|
||||
border-top: 2px solid $primary-color;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: $spacing-sm $spacing-lg;
|
||||
flex-shrink: 0;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
@include flex-center;
|
||||
width: 100%;
|
||||
gap: $spacing-lg;
|
||||
}
|
||||
|
||||
.pagination-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pagination-btn-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pagination-btn {
|
||||
width: 35px;
|
||||
height: 50px;
|
||||
border-radius: $border-radius-lg;
|
||||
@include flex-center;
|
||||
background: rgba(74, 144, 226, 0.1);
|
||||
border: 1px solid $primary-color;
|
||||
color: $text-light;
|
||||
transition: $transition;
|
||||
|
||||
&:hover {
|
||||
background: rgba(74, 144, 226, 0.2);
|
||||
border-color: $primary-light;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background: $bg-overlay;
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.page-tooltip {
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
color: $white;
|
||||
padding: $spacing-xs $spacing-sm;
|
||||
border-radius: $border-radius;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.3s ease;
|
||||
z-index: 1000;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border: 4px solid transparent;
|
||||
border-top-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-btn-wrapper:hover .page-tooltip {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.buttons-container {
|
||||
flex: 1;
|
||||
@include flex-center;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
min-width: 100px;
|
||||
height: 36px;
|
||||
font-size: 14px;
|
||||
@include button-base;
|
||||
}
|
||||
|
||||
/* 按钮状态样式 */
|
||||
.action-button {
|
||||
&.status-running {
|
||||
background: $success-bg !important;
|
||||
border-color: $success-color !important;
|
||||
color: $text-success !important;
|
||||
box-shadow: 0 0 8px rgba(82, 196, 26, 0.3);
|
||||
|
||||
&:hover {
|
||||
background: $success-bg-hover !important;
|
||||
border-color: $success-light !important;
|
||||
color: $white !important;
|
||||
box-shadow: 0 0 12px rgba(82, 196, 26, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
&.status-paused {
|
||||
background: $warning-bg !important;
|
||||
border-color: $warning-color !important;
|
||||
color: $text-warning !important;
|
||||
box-shadow: 0 0 8px rgba(250, 173, 20, 0.3);
|
||||
|
||||
&:hover {
|
||||
background: $warning-bg-hover !important;
|
||||
border-color: $warning-light !important;
|
||||
color: $white !important;
|
||||
box-shadow: 0 0 12px rgba(250, 173, 20, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
&.status-idle {
|
||||
background: $bg-overlay;
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
color: $text-light;
|
||||
|
||||
&:hover {
|
||||
background: $bg-overlay-hover;
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status-icon-btn {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 1366px) {
|
||||
.bottom-actions .ant-btn {
|
||||
min-width: 90px;
|
||||
height: 36px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.bottom-actions {
|
||||
height: 70px;
|
||||
|
||||
.ant-row {
|
||||
flex-wrap: wrap;
|
||||
gap: $spacing-sm;
|
||||
}
|
||||
|
||||
.ant-btn {
|
||||
min-width: 80px;
|
||||
height: 32px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,20 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
defineOptions({
|
||||
name: 'Lucide',
|
||||
})
|
||||
|
||||
const props = defineProps({
|
||||
name: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<component :is="props.name" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
46
src/components/common/Title/index.vue
Normal file
46
src/components/common/Title/index.vue
Normal file
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<div class="title">
|
||||
<span>{{ name }}</span>
|
||||
<a-space class="subtitle">
|
||||
<slot name="extra" />
|
||||
<a-button v-if="showRefresh" size="small" type="primary" @click="handleRefresh">
|
||||
<template #icon><i-lucide-rotate-ccw /></template>刷新
|
||||
</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps({
|
||||
name: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
showRefresh: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const slots = defineSlots<{
|
||||
'default'(): any;
|
||||
'extra'(): any;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits(['refresh']);
|
||||
const handleRefresh = () => {
|
||||
emit('refresh');
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
border-bottom: 1px solid #c9c9c9;
|
||||
padding-bottom: 7px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user