20260716173254
This commit is contained in:
oneao committed
1 parent
704dda07b5
commit
5cd4e1e1d2
46 files changed
+3569
-528
No files matched your search
@@ -1,431 +1,54 @@
|
||||
<script setup>
|
||||
import { computed, ref, watch } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import {
|
||||
AppstoreOutlined,
|
||||
BarChartOutlined,
|
||||
BellOutlined,
|
||||
DollarOutlined,
|
||||
DownOutlined,
|
||||
FileTextOutlined,
|
||||
LogoutOutlined,
|
||||
MenuFoldOutlined,
|
||||
MenuUnfoldOutlined,
|
||||
SettingOutlined,
|
||||
TranslationOutlined,
|
||||
UserOutlined,
|
||||
} from "@antdv-next/icons";
|
||||
import { useAppStore } from "../stores/app";
|
||||
import { useAuthStore } from "../stores/auth";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const appStore = useAppStore();
|
||||
const authStore = useAuthStore();
|
||||
const profileOpen = ref(false);
|
||||
const logoutOpen = ref(false);
|
||||
|
||||
const menuItems = [
|
||||
{
|
||||
key: "/dashboard",
|
||||
icon: AppstoreOutlined,
|
||||
label: "工作台",
|
||||
},
|
||||
{
|
||||
key: "business",
|
||||
icon: FileTextOutlined,
|
||||
label: "业务管理",
|
||||
children: [{ key: "/business/orders", label: "业务单据" }],
|
||||
},
|
||||
{
|
||||
key: "fees",
|
||||
icon: DollarOutlined,
|
||||
label: "费用管理",
|
||||
children: [{ key: "/fees/receivable", label: "应收费用" }],
|
||||
},
|
||||
{
|
||||
key: "reports",
|
||||
icon: BarChartOutlined,
|
||||
label: "报表中心",
|
||||
children: [{ key: "/reports/operations", label: "运营报表" }],
|
||||
},
|
||||
{
|
||||
key: "system",
|
||||
icon: SettingOutlined,
|
||||
label: "系统设置",
|
||||
children: [{ key: "/system/users", label: "用户管理" }],
|
||||
},
|
||||
];
|
||||
|
||||
const selectedKeys = computed(() => [route.meta.menuKey || route.path]);
|
||||
const activeTab = computed(() => route.path);
|
||||
const tabItems = computed(() => appStore.visitedTabs);
|
||||
const languageMenu = computed(() => ({
|
||||
items: [
|
||||
{ key: "zh-CN", label: "简体中文" },
|
||||
{ key: "en", label: "English" },
|
||||
],
|
||||
onClick: ({ key }) => appStore.setLocale(key),
|
||||
selectable: true,
|
||||
selectedKeys: [appStore.locale],
|
||||
}));
|
||||
const userMenu = {
|
||||
items: [
|
||||
{ key: "profile", icon: UserOutlined, label: "个人资料" },
|
||||
{ key: "settings", icon: SettingOutlined, label: "账户设置" },
|
||||
{ type: "divider" },
|
||||
{ key: "logout", icon: LogoutOutlined, label: "退出登录", danger: true },
|
||||
],
|
||||
onClick: handleUserMenu,
|
||||
};
|
||||
|
||||
watch(
|
||||
() => appStore.locale,
|
||||
(locale) => document.documentElement.setAttribute("lang", locale),
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
watch(
|
||||
() => route.path,
|
||||
() => {
|
||||
if (!route.meta.title) return;
|
||||
appStore.addVisitedTab({
|
||||
key: route.path,
|
||||
label: route.meta.title,
|
||||
closable: route.path !== "/dashboard",
|
||||
});
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
function navigate({ key }) {
|
||||
if (typeof key === "string" && key.startsWith("/")) {
|
||||
router.push(key);
|
||||
}
|
||||
}
|
||||
|
||||
function changeTab(key) {
|
||||
if (key !== route.path) router.push(key);
|
||||
}
|
||||
|
||||
function editTab(targetKey, action) {
|
||||
if (action !== "remove" || typeof targetKey !== "string" || targetKey === "/dashboard") {
|
||||
return;
|
||||
}
|
||||
|
||||
const currentIndex = appStore.visitedTabs.findIndex((item) => item.key === targetKey);
|
||||
const fallback =
|
||||
appStore.visitedTabs[currentIndex - 1] ??
|
||||
appStore.visitedTabs[currentIndex + 1] ??
|
||||
appStore.visitedTabs[0];
|
||||
|
||||
appStore.removeVisitedTab(targetKey);
|
||||
if (route.path === targetKey && fallback) router.push(fallback.key);
|
||||
}
|
||||
|
||||
function handleUserMenu({ key }) {
|
||||
if (key === "profile" || key === "settings") profileOpen.value = true;
|
||||
if (key === "logout") logoutOpen.value = true;
|
||||
}
|
||||
|
||||
function confirmLogout() {
|
||||
authStore.clearSession();
|
||||
logoutOpen.value = false;
|
||||
router.replace("/dashboard");
|
||||
}
|
||||
import AppSidebar from "./components/AppSidebar.vue";
|
||||
import AppTabs from "./components/AppTabs.vue";
|
||||
import AppToolbar from "./components/AppToolbar.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-layout class="app-layout">
|
||||
<a-layout-sider
|
||||
class="app-sider"
|
||||
:collapsed="appStore.sidebarCollapsed"
|
||||
:trigger="null"
|
||||
:collapsed-width="56"
|
||||
collapsible
|
||||
theme="light"
|
||||
width="208"
|
||||
>
|
||||
<div class="brand" :class="{ 'brand--collapsed': appStore.sidebarCollapsed }">
|
||||
<div class="brand__mark">F</div>
|
||||
<div class="brand__copy" :aria-hidden="appStore.sidebarCollapsed">
|
||||
<strong>FMS 管理系统</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sider-menu">
|
||||
<a-menu mode="inline" :items="menuItems" :selected-keys="selectedKeys" @click="navigate" />
|
||||
</div>
|
||||
|
||||
<div class="sider-footer">
|
||||
<a-tooltip :title="appStore.sidebarCollapsed ? '展开侧栏' : '收起侧栏'" placement="top">
|
||||
<a-button
|
||||
type="text"
|
||||
class="sider-collapse"
|
||||
aria-label="切换侧栏宽度"
|
||||
@click="appStore.toggleSidebar"
|
||||
>
|
||||
<template #icon>
|
||||
<MenuUnfoldOutlined v-if="appStore.sidebarCollapsed" />
|
||||
<MenuFoldOutlined v-else />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</a-layout-sider>
|
||||
<AppSidebar />
|
||||
|
||||
<a-layout class="app-main">
|
||||
<header class="tab-header">
|
||||
<a-tabs
|
||||
:active-key="activeTab"
|
||||
:items="tabItems"
|
||||
type="editable-card"
|
||||
size="small"
|
||||
hide-add
|
||||
:animated="false"
|
||||
@change="changeTab"
|
||||
@edit="editTab"
|
||||
>
|
||||
<template #rightExtra>
|
||||
<div class="global-actions">
|
||||
<a-tooltip title="切换语言" placement="bottom">
|
||||
<a-dropdown :menu="languageMenu" :trigger="['click']" placement="bottomRight">
|
||||
<a-button type="text" class="global-action" aria-label="切换语言">
|
||||
<template #icon><TranslationOutlined /></template>
|
||||
</a-button>
|
||||
</a-dropdown>
|
||||
</a-tooltip>
|
||||
<a-tooltip title="通知提醒" placement="bottom">
|
||||
<a-button type="text" class="global-action" aria-label="通知提醒">
|
||||
<a-badge dot><BellOutlined /></a-badge>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-dropdown :menu="userMenu" :trigger="['click']" placement="bottomRight">
|
||||
<button type="button" class="header-user">
|
||||
<a-avatar :size="24"><UserOutlined /></a-avatar>
|
||||
<span>管理员</span>
|
||||
<DownOutlined class="header-user__arrow" />
|
||||
</button>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
</template>
|
||||
</a-tabs>
|
||||
</header>
|
||||
<AppToolbar />
|
||||
<AppTabs />
|
||||
|
||||
<a-layout-content class="app-content">
|
||||
<router-view v-slot="{ Component, route: currentRoute }">
|
||||
<router-view v-slot="{ Component, route }">
|
||||
<transition name="slide" mode="out-in">
|
||||
<component :is="Component" :key="currentRoute.path" />
|
||||
<keep-alive>
|
||||
<component :is="Component" :key="route.fullPath" />
|
||||
</keep-alive>
|
||||
</transition>
|
||||
</router-view>
|
||||
</a-layout-content>
|
||||
</a-layout>
|
||||
</a-layout>
|
||||
|
||||
<a-modal v-model:open="profileOpen" title="个人资料" :footer="null" width="420px">
|
||||
<a-descriptions :column="1" bordered size="small">
|
||||
<a-descriptions-item label="用户名">admin</a-descriptions-item>
|
||||
<a-descriptions-item label="姓名">管理员</a-descriptions-item>
|
||||
<a-descriptions-item label="角色">系统管理员</a-descriptions-item>
|
||||
<a-descriptions-item label="机构码">{{ authStore.orgid || "--" }}</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-modal>
|
||||
|
||||
<a-modal
|
||||
v-model:open="logoutOpen"
|
||||
title="退出登录"
|
||||
ok-text="确认退出"
|
||||
cancel-text="取消"
|
||||
@ok="confirmLogout"
|
||||
>
|
||||
确认退出当前账号吗？
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app-layout {
|
||||
min-height: 100vh;
|
||||
background: var(--fms-bg);
|
||||
}
|
||||
|
||||
.app-sider {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
border-right: 1px solid var(--fms-border);
|
||||
|
||||
:deep(.ant-layout-sider-children) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
:deep(.ant-menu) {
|
||||
border-inline-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sider-menu {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.sider-footer {
|
||||
display: flex;
|
||||
flex: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.sider-collapse {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
padding-inline: 0;
|
||||
color: var(--fms-text-secondary);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 48px;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
|
||||
&--collapsed {
|
||||
justify-content: center;
|
||||
padding-inline: 8px;
|
||||
|
||||
.brand__copy {
|
||||
max-width: 0;
|
||||
opacity: 0;
|
||||
transform: translateX(-4px);
|
||||
}
|
||||
}
|
||||
|
||||
&__mark {
|
||||
display: grid;
|
||||
flex: none;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
place-items: center;
|
||||
border-radius: 6px;
|
||||
background: #1677ff;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&__copy {
|
||||
display: flex;
|
||||
max-width: 140px;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
opacity: 1;
|
||||
line-height: 1;
|
||||
transform: translateX(0);
|
||||
transition:
|
||||
max-width 0.18s ease,
|
||||
opacity 0.12s ease,
|
||||
transform 0.18s ease;
|
||||
|
||||
strong {
|
||||
color: var(--fms-text);
|
||||
font-size: 14px;
|
||||
font-weight: 650;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
background: var(--fms-bg);
|
||||
}
|
||||
|
||||
.app-main {
|
||||
height: 100vh;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
background: var(--fms-bg);
|
||||
}
|
||||
|
||||
.tab-header {
|
||||
z-index: 15;
|
||||
flex: none;
|
||||
height: 44px;
|
||||
padding: 6px 8px 0;
|
||||
border-bottom: 1px solid var(--fms-border);
|
||||
background: var(--fms-surface);
|
||||
|
||||
:deep(.ant-tabs) {
|
||||
height: 37px;
|
||||
}
|
||||
|
||||
:deep(.ant-tabs-nav) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:deep(.ant-tabs-content-holder) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:deep(.ant-tabs-tab) {
|
||||
min-width: 80px;
|
||||
padding: 5px 10px !important;
|
||||
justify-content: center;
|
||||
border-radius: 3px 3px 0 0 !important;
|
||||
}
|
||||
|
||||
:deep(.ant-tabs-extra-content) {
|
||||
height: 37px;
|
||||
}
|
||||
}
|
||||
|
||||
.global-actions {
|
||||
display: flex;
|
||||
height: 36px;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.global-action {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding-inline: 0;
|
||||
color: var(--fms-text-secondary);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.header-user {
|
||||
display: flex;
|
||||
height: 32px;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-left: 12px;
|
||||
padding: 0 8px 0 0;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
color: var(--fms-text);
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
background: var(--fms-hover);
|
||||
}
|
||||
|
||||
&__arrow {
|
||||
color: var(--fms-text-secondary);
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.app-content {
|
||||
width: 100%;
|
||||
min-height: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 8px;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.slide-enter-active,
|
||||
|
||||
@@ -0,0 +1,351 @@
|
||||
<script setup>
|
||||
import { computed, h, ref, watch } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import {
|
||||
Bug,
|
||||
ChartColumn,
|
||||
CircleQuestionMark,
|
||||
Database,
|
||||
FolderKanban,
|
||||
House,
|
||||
Landmark,
|
||||
PanelLeftClose,
|
||||
PanelLeftOpen,
|
||||
Settings,
|
||||
Wallet,
|
||||
} from "@lucide/vue";
|
||||
import { useAppStore } from "../../stores/app";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const appStore = useAppStore();
|
||||
const menuIcon = (icon) => () => h(icon, { size: 16, strokeWidth: 1.8 });
|
||||
|
||||
const menuItems = [
|
||||
{
|
||||
key: "/home",
|
||||
icon: menuIcon(House),
|
||||
label: "首页",
|
||||
},
|
||||
{
|
||||
key: "business",
|
||||
icon: menuIcon(FolderKanban),
|
||||
label: "业务管理",
|
||||
children: [
|
||||
{ key: "/business", label: "业务管理" },
|
||||
{ key: "/business/listcontainer", label: "排车列表" },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: "finance",
|
||||
icon: menuIcon(Wallet),
|
||||
label: "财务管理",
|
||||
children: [
|
||||
{
|
||||
key: "finance-receivable",
|
||||
label: "应收管理",
|
||||
children: [
|
||||
{ key: "/cw/ys/list", label: "应收费用列表" },
|
||||
{ key: "/cw/ys/listbill", label: "应收账单" },
|
||||
{ key: "/cw/ys/listinvoice", label: "应收发票" },
|
||||
{ key: "/cw/ys/listskd", label: "收款管理" },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: "finance-payable",
|
||||
label: "应付管理",
|
||||
children: [
|
||||
{ key: "/cw/yf/list", label: "应付费用列表" },
|
||||
{ key: "/cw/yf/listbill", label: "应付账单" },
|
||||
{ key: "/cw/yf/listinvoice", label: "应付发票" },
|
||||
{ key: "/cw/yf/listfkd", label: "付款管理" },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: "finance-daily",
|
||||
label: "日常费用",
|
||||
children: [
|
||||
{ key: "/cw/assistance/daily-expenses", label: "日常费用" },
|
||||
{ key: "/cw/assistance/payment-account", label: "收付账户" },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: "statistics",
|
||||
icon: menuIcon(ChartColumn),
|
||||
label: "统计分析",
|
||||
children: [
|
||||
{
|
||||
key: "statistics-receivable",
|
||||
label: "收款统计分析",
|
||||
children: [
|
||||
{ key: "/tj/ystj/tj_nots", label: "应收未收明细" },
|
||||
{ key: "/tj/ystj/tj_notsbydw", label: "应收未收按单位汇总" },
|
||||
{ key: "/tj/ystj/tj_notsbysales", label: "未收款按业务员汇总" },
|
||||
{ key: "/tj/ystj/tj_cwskxz", label: "收款明细统计" },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: "statistics-payable",
|
||||
label: "付款统计分析",
|
||||
children: [
|
||||
{ key: "/tj/yftj/tj_alone_notf", label: "应付未付明细" },
|
||||
{ key: "/tj/yftj/tj_notfbydw", label: "应付未付按单位汇总" },
|
||||
{ key: "/tj/yftj/tj_cwfkxz", label: "付款明细统计" },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: "statistics-profit",
|
||||
label: "利润统计分析",
|
||||
children: [
|
||||
{ key: "/tj/lrtj/tj_lr_module_id", label: "利润分析单票明细" },
|
||||
{ key: "/tj/lrtj/tj_lrbysales", label: "利润分析按业务员" },
|
||||
{ key: "/tj/lrtj/tj_lrbycustomer", label: "利润分析按客户" },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: "management",
|
||||
icon: menuIcon(Landmark),
|
||||
label: "管理中心",
|
||||
children: [
|
||||
{ key: "/shcenter", label: "审批中心" },
|
||||
{ key: "/partners/khht", label: "合同管理" },
|
||||
{ key: "/pricelist/list", label: "运费模版" },
|
||||
{ key: "/system/oa-management/companyAnnouncement", label: "企业公告" },
|
||||
{ key: "/system/approvalSettings", label: "审批设置" },
|
||||
{ key: "/system/oa-management/userReminder", label: "提醒设置" },
|
||||
{ key: "/partners/hl", label: "结算汇率" },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: "base-data",
|
||||
icon: menuIcon(Database),
|
||||
label: "基础数据",
|
||||
children: [
|
||||
{ key: "/partners", label: "合作伙伴" },
|
||||
{ key: "/partners/contact", label: "联系人" },
|
||||
{ key: "/base/other", label: "其他数据" },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: "system",
|
||||
icon: menuIcon(Settings),
|
||||
label: "系统管理",
|
||||
children: [
|
||||
{ key: "/system/permission", label: "权限管理" },
|
||||
{ key: "/system/field", label: "字段配置" },
|
||||
{ key: "/system/statisticalSettings", label: "查询设置" },
|
||||
{ key: "/system/mappingConfig", label: "映射配置" },
|
||||
{ key: "/system/moduleSettings", label: "模块设置" },
|
||||
{ key: "/system/autoId", label: "自动编码" },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: "help",
|
||||
icon: menuIcon(CircleQuestionMark),
|
||||
label: "系统帮助",
|
||||
children: [
|
||||
{ key: "/help", label: "帮助文档" },
|
||||
{ key: "/videos", label: "操作视频" },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: "test",
|
||||
icon: menuIcon(Bug),
|
||||
label: "功能测试",
|
||||
children: [{ key: "/test/test", label: "测试页面" }],
|
||||
},
|
||||
];
|
||||
|
||||
const selectedKeys = computed(() => [route.meta.menuKey || route.path]);
|
||||
const openKeys = ref([]);
|
||||
const parentKeyByRoute = new Map(
|
||||
menuItems.flatMap((item) =>
|
||||
item.children?.map((child) => [child.key, item.key]) ?? [],
|
||||
),
|
||||
);
|
||||
|
||||
watch(
|
||||
() => route.meta.menuKey || route.path,
|
||||
(menuKey) => {
|
||||
const parentKey = parentKeyByRoute.get(menuKey);
|
||||
if (parentKey && !openKeys.value.includes(parentKey)) {
|
||||
openKeys.value = [...openKeys.value, parentKey];
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
function navigate({ key }) {
|
||||
if (typeof key === "string" && key.startsWith("/")) {
|
||||
router.push(key);
|
||||
}
|
||||
}
|
||||
|
||||
function updateOpenKeys(keys) {
|
||||
openKeys.value = keys;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-layout-sider
|
||||
class="app-sider"
|
||||
:collapsed="appStore.sidebarCollapsed"
|
||||
:trigger="null"
|
||||
:collapsed-width="56"
|
||||
collapsible
|
||||
theme="light"
|
||||
width="208"
|
||||
>
|
||||
<div class="brand" :class="{ 'brand--collapsed': appStore.sidebarCollapsed }">
|
||||
<div class="brand__mark">F</div>
|
||||
<div class="brand__copy" :aria-hidden="appStore.sidebarCollapsed">
|
||||
<strong>FMS 管理系统</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sider-menu">
|
||||
<a-menu
|
||||
mode="inline"
|
||||
:items="menuItems"
|
||||
:selected-keys="selectedKeys"
|
||||
:open-keys="openKeys"
|
||||
@click="navigate"
|
||||
@open-change="updateOpenKeys"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="sider-footer">
|
||||
<a-tooltip :title="appStore.sidebarCollapsed ? '展开侧栏' : '收起侧栏'" placement="right">
|
||||
<a-button
|
||||
type="text"
|
||||
class="sider-collapse"
|
||||
aria-label="切换侧栏宽度"
|
||||
@click="appStore.toggleSidebar"
|
||||
>
|
||||
<template #icon>
|
||||
<PanelLeftOpen v-if="appStore.sidebarCollapsed" />
|
||||
<PanelLeftClose v-else />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</a-layout-sider>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app-sider {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border-right: 1px solid var(--fms-border);
|
||||
|
||||
:deep(.ant-layout-sider-children) {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
:deep(.ant-menu) {
|
||||
border-inline-end: 0;
|
||||
}
|
||||
|
||||
:deep(.ant-menu-item),
|
||||
:deep(.ant-menu-submenu-title) {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
:deep(.ant-menu-root > .ant-menu-item),
|
||||
:deep(.ant-menu-root > .ant-menu-submenu > .ant-menu-submenu-title) {
|
||||
padding-inline-start: 20px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.sider-menu {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.sider-footer {
|
||||
display: flex;
|
||||
flex: none;
|
||||
align-items: center;
|
||||
padding: 4px;
|
||||
border-top: 1px solid var(--fms-border);
|
||||
}
|
||||
|
||||
.sider-collapse {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
padding-inline: 0;
|
||||
border-radius: 4px;
|
||||
color: var(--fms-text-secondary);
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 44px;
|
||||
gap: 8px;
|
||||
padding: 6px 12px 6px 15px;
|
||||
|
||||
&--collapsed {
|
||||
justify-content: flex-start;
|
||||
gap: 0;
|
||||
padding-inline: 15px;
|
||||
|
||||
.brand__copy {
|
||||
max-width: 0;
|
||||
opacity: 0;
|
||||
transform: translateX(-4px);
|
||||
}
|
||||
}
|
||||
|
||||
&__mark {
|
||||
display: grid;
|
||||
flex: none;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
place-items: center;
|
||||
border-radius: 6px;
|
||||
background: #1677ff;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&__copy {
|
||||
display: flex;
|
||||
max-width: 140px;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
opacity: 1;
|
||||
line-height: 1;
|
||||
transform: translateX(0);
|
||||
transition:
|
||||
max-width 0.18s ease,
|
||||
opacity 0.12s ease,
|
||||
transform 0.18s ease;
|
||||
|
||||
strong {
|
||||
color: var(--fms-text);
|
||||
font-size: 14px;
|
||||
font-weight: 650;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,322 @@
|
||||
<script setup>
|
||||
import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { ChevronLeft, ChevronRight, X } from "@lucide/vue";
|
||||
import { theme } from "antdv-next";
|
||||
import { useAppStore } from "../../stores/app";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const appStore = useAppStore();
|
||||
const { token } = theme.useToken();
|
||||
const headerRef = ref(null);
|
||||
const trackRef = ref(null);
|
||||
const overflowed = ref(false);
|
||||
const canScrollLeft = ref(false);
|
||||
const canScrollRight = ref(false);
|
||||
const activeTab = computed(() => route.fullPath);
|
||||
const tabItems = computed(() => appStore.visitedTabs);
|
||||
let resizeObserver;
|
||||
|
||||
watch(
|
||||
() => route.fullPath,
|
||||
async () => {
|
||||
if (route.meta.title) {
|
||||
appStore.addVisitedTab({
|
||||
key: route.fullPath,
|
||||
label: getTabLabel(),
|
||||
closable: route.fullPath !== "/dashboard",
|
||||
});
|
||||
}
|
||||
|
||||
await nextTick();
|
||||
revealActiveTab();
|
||||
updateScrollState();
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
watch(
|
||||
() => appStore.visitedTabs.length,
|
||||
async () => {
|
||||
await nextTick();
|
||||
updateScrollState();
|
||||
},
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
resizeObserver = new ResizeObserver(updateScrollState);
|
||||
if (headerRef.value) resizeObserver.observe(headerRef.value);
|
||||
updateScrollState();
|
||||
revealActiveTab("auto");
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => resizeObserver?.disconnect());
|
||||
|
||||
function changeTab(key) {
|
||||
if (key !== route.fullPath) router.push(key);
|
||||
}
|
||||
|
||||
function getTabLabel() {
|
||||
if (route.meta.detail && route.params.id) {
|
||||
return `${route.meta.listTitle || route.meta.title} ${route.params.id}`;
|
||||
}
|
||||
|
||||
return route.meta.title;
|
||||
}
|
||||
|
||||
function closeTab(targetKey) {
|
||||
if (typeof targetKey !== "string" || targetKey === "/dashboard") return;
|
||||
|
||||
const currentIndex = appStore.visitedTabs.findIndex((item) => item.key === targetKey);
|
||||
const fallback =
|
||||
appStore.visitedTabs[currentIndex - 1] ??
|
||||
appStore.visitedTabs[currentIndex + 1] ??
|
||||
appStore.visitedTabs[0];
|
||||
|
||||
appStore.removeVisitedTab(targetKey);
|
||||
if (route.fullPath === targetKey && fallback) router.push(fallback.key);
|
||||
}
|
||||
|
||||
function updateScrollState() {
|
||||
const header = headerRef.value;
|
||||
const track = trackRef.value;
|
||||
if (!header || !track) return;
|
||||
|
||||
const shouldOverflow = track.scrollWidth > header.clientWidth - 16 + 1;
|
||||
if (overflowed.value !== shouldOverflow) {
|
||||
overflowed.value = shouldOverflow;
|
||||
if (!shouldOverflow) track.scrollLeft = 0;
|
||||
nextTick(updateScrollState);
|
||||
return;
|
||||
}
|
||||
|
||||
canScrollLeft.value = shouldOverflow && track.scrollLeft > 1;
|
||||
canScrollRight.value =
|
||||
shouldOverflow && track.scrollLeft + track.clientWidth < track.scrollWidth - 1;
|
||||
}
|
||||
|
||||
function scrollTabs(direction) {
|
||||
const track = trackRef.value;
|
||||
if (!track) return;
|
||||
|
||||
track.scrollBy({
|
||||
left: direction * Math.max(track.clientWidth * 0.65, 120),
|
||||
behavior: "smooth",
|
||||
});
|
||||
}
|
||||
|
||||
function revealActiveTab(behavior = "smooth") {
|
||||
const track = trackRef.value;
|
||||
if (!track) return;
|
||||
|
||||
const activeElement = Array.from(track.querySelectorAll("[data-tab-key]")).find(
|
||||
(element) => element.dataset.tabKey === activeTab.value,
|
||||
);
|
||||
activeElement?.scrollIntoView({ behavior, block: "nearest", inline: "center" });
|
||||
}
|
||||
|
||||
function focusAdjacentTab(index, offset) {
|
||||
const items = tabItems.value;
|
||||
if (!items.length) return;
|
||||
|
||||
const nextIndex = (index + offset + items.length) % items.length;
|
||||
changeTab(items[nextIndex].key);
|
||||
nextTick(() => {
|
||||
const target = Array.from(trackRef.value?.querySelectorAll("[data-tab-key]") ?? []).find(
|
||||
(element) => element.dataset.tabKey === items[nextIndex].key,
|
||||
);
|
||||
target?.focus();
|
||||
});
|
||||
}
|
||||
|
||||
function handleTabKeydown(event, index) {
|
||||
if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
|
||||
|
||||
event.preventDefault();
|
||||
focusAdjacentTab(index, event.key === "ArrowLeft" ? -1 : 1);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header
|
||||
ref="headerRef"
|
||||
class="tab-header"
|
||||
:style="{
|
||||
'--tabs-active-bg': token.colorPrimaryBg,
|
||||
'--tabs-active-color': token.colorPrimary,
|
||||
'--tabs-idle-bg': token.colorFillQuaternary,
|
||||
}"
|
||||
>
|
||||
<button
|
||||
v-if="overflowed"
|
||||
type="button"
|
||||
class="tab-nav-button"
|
||||
aria-label="向左滚动页签"
|
||||
:disabled="!canScrollLeft"
|
||||
@click="scrollTabs(-1)"
|
||||
>
|
||||
<ChevronLeft />
|
||||
</button>
|
||||
|
||||
<div ref="trackRef" class="tab-track" role="tablist" @scroll.passive="updateScrollState">
|
||||
<div
|
||||
v-for="(item, index) in tabItems"
|
||||
:key="item.key"
|
||||
class="tab-item"
|
||||
:class="{ 'tab-item--active': item.key === activeTab }"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="tab-item__select"
|
||||
role="tab"
|
||||
:data-tab-key="item.key"
|
||||
:aria-selected="item.key === activeTab"
|
||||
:tabindex="item.key === activeTab ? 0 : -1"
|
||||
@click="changeTab(item.key)"
|
||||
@keydown="handleTabKeydown($event, index)"
|
||||
>
|
||||
<span>{{ item.label }}</span>
|
||||
</button>
|
||||
<button
|
||||
v-if="item.closable"
|
||||
type="button"
|
||||
class="tab-item__close"
|
||||
:aria-label="`关闭${item.label}`"
|
||||
@click.stop="closeTab(item.key)"
|
||||
>
|
||||
<X />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
v-if="overflowed"
|
||||
type="button"
|
||||
class="tab-nav-button"
|
||||
aria-label="向右滚动页签"
|
||||
:disabled="!canScrollRight"
|
||||
@click="scrollTabs(1)"
|
||||
>
|
||||
<ChevronRight />
|
||||
</button>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tab-header {
|
||||
z-index: 15;
|
||||
display: flex;
|
||||
flex: none;
|
||||
height: 34px;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 3px 8px;
|
||||
background: var(--fms-surface);
|
||||
}
|
||||
|
||||
.tab-track {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
gap: 6px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
overscroll-behavior-inline: contain;
|
||||
scrollbar-width: none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
display: flex;
|
||||
flex: none;
|
||||
min-width: 64px;
|
||||
height: 28px;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
background: var(--tabs-idle-bg);
|
||||
color: var(--fms-text-secondary);
|
||||
|
||||
&:hover {
|
||||
color: var(--tabs-active-color);
|
||||
}
|
||||
|
||||
&--active {
|
||||
background: var(--tabs-active-bg);
|
||||
color: var(--tabs-active-color);
|
||||
}
|
||||
|
||||
&__select,
|
||||
&__close {
|
||||
height: 100%;
|
||||
border: 0;
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&__select {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 7px;
|
||||
font-size: 12px;
|
||||
|
||||
span {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
&__close {
|
||||
display: grid;
|
||||
width: 18px;
|
||||
flex: none;
|
||||
padding: 0;
|
||||
place-items: center;
|
||||
|
||||
&:hover {
|
||||
background: rgb(0 0 0 / 6%);
|
||||
}
|
||||
|
||||
.lucide {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-nav-button {
|
||||
display: grid;
|
||||
flex: none;
|
||||
width: 26px;
|
||||
height: 28px;
|
||||
padding: 0;
|
||||
place-items: center;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
color: var(--fms-text-secondary);
|
||||
background: var(--tabs-idle-bg);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
color: var(--tabs-active-color);
|
||||
background: var(--tabs-active-bg);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: default;
|
||||
opacity: 0.35;
|
||||
}
|
||||
|
||||
.lucide {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,179 @@
|
||||
<script setup>
|
||||
import { computed, h, ref, watch } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { Bell, ChevronDown, Languages, LogOut, Settings, UserRound } from "@lucide/vue";
|
||||
import { useAppStore } from "../../stores/app";
|
||||
import { useAuthStore } from "../../stores/auth";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const appStore = useAppStore();
|
||||
const authStore = useAuthStore();
|
||||
const profileOpen = ref(false);
|
||||
const logoutOpen = ref(false);
|
||||
const menuIcon = (icon) => () => h(icon, { size: 16, strokeWidth: 1.8 });
|
||||
|
||||
const breadcrumbItems = computed(() => {
|
||||
const items = [];
|
||||
|
||||
if (route.path === "/dashboard") return [{ label: "工作台" }];
|
||||
if (route.meta.section) items.push({ label: route.meta.section });
|
||||
if (route.meta.title) items.push({ label: route.meta.title });
|
||||
|
||||
return items;
|
||||
});
|
||||
|
||||
const languageMenu = computed(() => ({
|
||||
items: [
|
||||
{ key: "zh-CN", label: "简体中文" },
|
||||
{ key: "en", label: "English" },
|
||||
],
|
||||
onClick: ({ key }) => appStore.setLocale(key),
|
||||
selectable: true,
|
||||
selectedKeys: [appStore.locale],
|
||||
}));
|
||||
|
||||
const userMenu = {
|
||||
items: [
|
||||
{ key: "profile", icon: menuIcon(UserRound), label: "个人资料" },
|
||||
{ key: "settings", icon: menuIcon(Settings), label: "账户设置" },
|
||||
{ type: "divider" },
|
||||
{ key: "logout", icon: menuIcon(LogOut), label: "退出登录", danger: true },
|
||||
],
|
||||
onClick: handleUserMenu,
|
||||
};
|
||||
|
||||
watch(
|
||||
() => appStore.locale,
|
||||
(locale) => document.documentElement.setAttribute("lang", locale),
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
function handleUserMenu({ key }) {
|
||||
if (key === "profile" || key === "settings") profileOpen.value = true;
|
||||
if (key === "logout") logoutOpen.value = true;
|
||||
}
|
||||
|
||||
function confirmLogout() {
|
||||
authStore.clearSession();
|
||||
logoutOpen.value = false;
|
||||
router.replace("/dashboard");
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header class="top-toolbar">
|
||||
<a-breadcrumb class="toolbar-breadcrumb" separator=">">
|
||||
<a-breadcrumb-item v-for="item in breadcrumbItems" :key="item.label">
|
||||
{{ item.label }}
|
||||
</a-breadcrumb-item>
|
||||
</a-breadcrumb>
|
||||
|
||||
<div class="toolbar-actions">
|
||||
<a-tooltip title="切换语言" placement="bottom">
|
||||
<a-dropdown :menu="languageMenu" :trigger="['click']" placement="bottomRight">
|
||||
<a-button type="text" class="toolbar-action" aria-label="切换语言">
|
||||
<template #icon><Languages /></template>
|
||||
</a-button>
|
||||
</a-dropdown>
|
||||
</a-tooltip>
|
||||
<a-tooltip title="通知提醒" placement="bottom">
|
||||
<a-button type="text" class="toolbar-action" aria-label="通知提醒">
|
||||
<a-badge dot><Bell /></a-badge>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-dropdown :menu="userMenu" :trigger="['click']" placement="bottomRight">
|
||||
<button type="button" class="toolbar-user" aria-label="用户菜单">
|
||||
<a-avatar :size="24"><UserRound /></a-avatar>
|
||||
<span>管理员</span>
|
||||
<ChevronDown class="toolbar-user__arrow" />
|
||||
</button>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<a-modal v-model:open="profileOpen" title="个人资料" :footer="null" width="420px">
|
||||
<a-descriptions :column="1" bordered size="small">
|
||||
<a-descriptions-item label="用户名">admin</a-descriptions-item>
|
||||
<a-descriptions-item label="姓名">管理员</a-descriptions-item>
|
||||
<a-descriptions-item label="角色">系统管理员</a-descriptions-item>
|
||||
<a-descriptions-item label="机构码">{{ authStore.orgid || "--" }}</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-modal>
|
||||
|
||||
<a-modal
|
||||
v-model:open="logoutOpen"
|
||||
title="退出登录"
|
||||
ok-text="确认退出"
|
||||
cancel-text="取消"
|
||||
@ok="confirmLogout"
|
||||
>
|
||||
确认退出当前账号吗？
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.top-toolbar {
|
||||
z-index: 16;
|
||||
display: flex;
|
||||
flex: none;
|
||||
height: 44px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 0 8px 0 12px;
|
||||
border-bottom: 1px solid var(--fms-border);
|
||||
background: var(--fms-surface);
|
||||
}
|
||||
|
||||
.toolbar-breadcrumb {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
font-size: 13px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.toolbar-actions {
|
||||
display: flex;
|
||||
flex: none;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.toolbar-action {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding-inline: 0;
|
||||
border-radius: 4px;
|
||||
color: var(--fms-text-secondary);
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.toolbar-user {
|
||||
display: flex;
|
||||
height: 32px;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-left: 4px;
|
||||
padding: 0 6px 0 4px;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
color: var(--fms-text);
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
background: var(--fms-hover);
|
||||
}
|
||||
|
||||
&__arrow {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
color: var(--fms-text-secondary);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user