jingrow/jingrow
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

美化default_toolbar.vue

Browse Source
This commit is contained in:
jingrow 2026-05-25 21:56:41 +08:00
parent d123212380
commit 52d6f7ee2c
1 changed files with 45 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
frontend/src/core/pagetype/default_toolbar.vue
View File

@ -1,25 +1,33 @@
<template>
<n-space align="center">
<!-- 直接按钮区（可被 xxx_toolbar_menu.vue 覆盖） -->
<component v-if="menuOverrideComp" :is="menuOverrideComp" v-bind="toolbarBindProps"
@go-to-prev="goToPrev" @go-to-next="goToNext" @toggle-sidebar-position="$emit('toggle-sidebar-position')"
@refresh="$emit('refresh')" @delete="$emit('delete')" @toggle-like="handleToggleLike"
@toggle-chat="$emit('toggle-chat')" @go-back="$emit('go-back')" />
<DefaultToolbarMenu v-else v-bind="menuBindProps"
@go-to-prev="goToPrev" @go-to-next="goToNext" @toggle-sidebar-position="$emit('toggle-sidebar-position')"
@refresh="$emit('refresh')" @delete="$emit('delete')" @toggle-like="handleToggleLike"
@toggle-chat="$emit('toggle-chat')" @go-back="$emit('go-back')" />
<div class="toolbar-container">
<!-- 导航组：上/下/侧边栏切换 -->
<div class="toolbar-group">
<component v-if="menuOverrideComp" :is="menuOverrideComp" v-bind="toolbarBindProps"
@go-to-prev="goToPrev" @go-to-next="goToNext" @toggle-sidebar-position="$emit('toggle-sidebar-position')"
@refresh="$emit('refresh')" @delete="$emit('delete')" @toggle-like="handleToggleLike"
@toggle-chat="$emit('toggle-chat')" @go-back="$emit('go-back')" />
<DefaultToolbarMenu v-else v-bind="menuBindProps"
@go-to-prev="goToPrev" @go-to-next="goToNext" @toggle-sidebar-position="$emit('toggle-sidebar-position')"
@refresh="$emit('refresh')" @delete="$emit('delete')" @toggle-like="handleToggleLike"
@toggle-chat="$emit('toggle-chat')" @go-back="$emit('go-back')" />
</div>
<!-- 追加按钮（xxx_toolbar_addmenu.vue） -->
<component v-if="addMenuComp" :is="addMenuComp" v-bind="toolbarBindProps" />
<!-- 扩展组：追加按钮 -->
<div v-if="addMenuComp" class="toolbar-group">
<component :is="addMenuComp" v-bind="toolbarBindProps" />
</div>
<!-- 三点菜单（可被 xxx_toolbar_moremenu.vue 覆盖） -->
<component v-if="moreMenuOverrideComp" :is="moreMenuOverrideComp" v-bind="toolbarBindProps" @select="handleMenuSelect" />
<DefaultToolbarMoreMenu v-else :options="moreMenuOptions" @select="handleMenuSelect" />
<!-- 菜单组：三点菜单 -->
<div class="toolbar-group">
<component v-if="moreMenuOverrideComp" :is="moreMenuOverrideComp" v-bind="toolbarBindProps" @select="handleMenuSelect" />
<DefaultToolbarMoreMenu v-else :options="moreMenuOptions" @select="handleMenuSelect" />
</div>
<!-- 追加菜单数据（xxx_toolbar_addmoremenu.vue，无视觉输出） -->
<component v-if="addMoreMenuComp" :is="addMoreMenuComp" ref="addMoreMenuRef" v-bind="toolbarBindProps" />
<!-- 操作组：保存/提交/取消 -->
<div class="toolbar-group toolbar-group--actions">
<!-- 保存按钮 -->
<n-button
type="primary"
@ -98,13 +106,14 @@
<!-- Email Compose Drawer -->
<EmailComposeModal ref="emailComposeRef" />
</n-space>
</div><!-- /toolbar-group--actions -->
</div><!-- /toolbar-container -->
</template>
<script setup lang="ts">
import { ref, computed, onMounted, watchEffect, shallowRef, markRaw, h } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { NButton, NSpace, NIcon, NDropdown, NModal, NForm, NFormItem, NInput, NCheckbox, NText, useMessage, type FormInst, type FormRules, type DropdownOption } from 'naive-ui'
import { NButton, NIcon, NDropdown, NModal, NForm, NFormItem, NInput, NCheckbox, NText, useMessage, type FormInst, type FormRules, type DropdownOption } from 'naive-ui'
import { Icon } from '@iconify/vue'
import { t } from '@/shared/i18n'
import { usePageTypeSlug } from '@/shared/utils/slug'
@ -525,6 +534,25 @@ onMounted(async () => {
</script>
<style scoped>
/* 工具栏容器：水平排列，组间有间隔 */
.toolbar-container {
display: flex;
align-items: center;
gap: 12px;
}
/* 功能组：组内按钮紧密排列 */
.toolbar-group {
display: flex;
align-items: center;
gap: 4px;
}
/* 操作组（保存/提交/取消）：稍宽松 */
.toolbar-group--actions {
gap: 6px;
}
/* 头部操作按钮统一样式 */
.header-action-btn {
display: inline-flex;