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

20260722222510

Browse Source
This commit is contained in:
oneao committed 2026-07-22 22:25:10 +08:00
1 parent d04fad24ed
commit 59b3ccfb1c
36 files changed
+2753 -3064
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

code/fms/fms-vue/src/layouts/components/AppSidebar.vue
+60 -289
View File
@@ -1,209 +1,46 @@
<script setup>
import { computed, h, ref, watch } from "vue";
import { computed, h, onMounted, 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 { House, PanelLeftClose, PanelLeftOpen, Settings } from "@lucide/vue";
import { useAppStore } from "@/stores/app";
import { usePermissionStore } from "@/stores/permissions";
const route = useRoute();
const router = useRouter();
const appStore = useAppStore();
const permissionStore = usePermissionStore();
const menuIcon = (icon) => () => h(icon, { size: 16, strokeWidth: 1.8 });
const openKeys = ref(["system"]);
const effectiveCollapsed = computed(() => appStore.sidebarCollapsed);
const fallbackMenuItems = [
{
key: "dashboard",
icon: menuIcon(House),
label: "工作台",
children: [
{ key: "/dashboard", label: "概览" },
{ key: "/dashboard/table-demo", label: "表格 Demo" },
],
},
{
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/autoId", label: "自动编码" },
{ key: "/system/modules", label: "模块管理" },
{ key: "/system/i18n", 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 menuItems = ref(fallbackMenuItems);
const selectedKeys = computed(() => [route.meta.menuKey || route.path]);
const openKeys = ref([]);
const parentKeysByRoute = computed(() => {
const result = new Map();
const visit = (items, parents = []) => {
items.forEach((item) => {
if (item.children?.length) visit(item.children, [...parents, item.key]);
else result.set(item.key, parents);
const menuItems = computed(() => {
const systemPages = [
{ key: "/system/metadata", label: "元数据配置", moduleCode: "m_metadata" },
{ key: "/system/i18n", label: "多语言管理", moduleCode: "m_i18n" },
{ key: "/system/authorization", label: "用户授权", moduleCode: "m_authorization" },
].filter((item) => permissionStore.canModule(item.moduleCode));
const items = [{ key: "/dashboard", icon: menuIcon(House), label: "工作台" }];
if (systemPages.length)
items.push({
key: "system",
icon: menuIcon(Settings),
label: "系统管理",
children: systemPages,
});
};
visit(menuItems.value);
return result;
return items;
});
const selectedKeys = computed(() => [route.meta.menuKey || route.path]);
watch(
[() => route.meta.menuKey || route.path, menuItems],
([menuKey]) => {
const parentKeys = parentKeysByRoute.value.get(menuKey) || [];
const nextKeys = new Set(openKeys.value);
parentKeys.forEach((key) => nextKeys.add(key));
if (nextKeys.size !== openKeys.value.length) {
openKeys.value = Array.from(nextKeys);
}
() => route.path,
(path) => {
if (path.startsWith("/system") && !openKeys.value.includes("system"))
openKeys.value = [...openKeys.value, "system"];
},
{ immediate: true },
);
function navigate({ key }) {
if (typeof key === "string" && key.startsWith("/")) {
router.push(key);
}
}
function updateOpenKeys(keys) {
openKeys.value = keys;
if (typeof key === "string" && key.startsWith("/")) router.push(key);
}
onMounted(() => permissionStore.load().catch(() => {}));
</script>
<template>
@@ -218,11 +55,8 @@ function updateOpenKeys(keys) {
>
<div class="brand" :class="{ 'brand--collapsed': effectiveCollapsed }">
<div class="brand__mark">F</div>
<div class="brand__copy" :aria-hidden="effectiveCollapsed">
<strong>FMS 管理系统</strong>
</div>
<strong>FMS 管理系统</strong>
</div>
<div class="sider-menu">
<a-menu
mode="inline"
@@ -230,49 +64,31 @@ function updateOpenKeys(keys) {
:selected-keys="selectedKeys"
:open-keys="openKeys"
@click="navigate"
@open-change="updateOpenKeys"
@open-change="openKeys = $event"
/>
</div>
<div class="sider-footer">
<a-tooltip :title="effectiveCollapsed ? '展开侧栏' : '收起侧栏'" placement="right">
<a-button
type="text"
class="sider-collapse"
aria-label="切换侧栏宽度"
@click="appStore.toggleSidebar"
>
<template #icon>
<PanelLeftOpen v-if="effectiveCollapsed" />
<PanelLeftClose v-else />
</template>
</a-button>
</a-tooltip>
<a-tooltip :title="effectiveCollapsed ? '展开侧栏' : '收起侧栏'" placement="right"
><a-button type="text" class="sider-collapse" @click="appStore.toggleSidebar"
><PanelLeftOpen v-if="effectiveCollapsed" /><PanelLeftClose v-else /></a-button
></a-tooltip>
</div>
</a-layout-sider>
</template>
<style lang="scss" scoped>
<style scoped lang="scss">
.app-sider {
position: sticky;
top: 0;
z-index: 20;
height: 100%;
overflow: hidden;
border-right: 1px solid var(--fms-border);
will-change: width;
: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%;
@@ -281,88 +97,43 @@ function updateOpenKeys(keys) {
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;
}
}
.brand {
display: flex;
min-height: 44px;
align-items: center;
gap: 8px;
padding: 6px 12px 6px 15px;
overflow: hidden;
white-space: nowrap;
}
.brand__mark {
display: grid;
flex: none;
width: 26px;
height: 26px;
place-items: center;
border-radius: 6px;
background: #1677ff;
color: #fff;
font-weight: 700;
}
.brand strong {
font-size: 14px;
}
.brand--collapsed strong {
display: none;
}
.sider-menu {
flex: 1;
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
overflow: 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>