diff --git a/docs/前端页面设计规范.md b/docs/前端页面设计规范.md index 92b6bdd..9852214 100644 --- a/docs/前端页面设计规范.md +++ b/docs/前端页面设计规范.md @@ -27,19 +27,31 @@ ``` a-layout (垂直) -├── TopNav(顶部导航,fixed) +├── TopNav(仅运营端,fixed) ├── a-layout-content -│ ├── paddingTop: 顶部导航高度 + Tab 栏高度(可选) -│ └── PageLayout(router-view + keep-alive) +│ ├── 运营端:paddingTop = 顶栏 + Tab;PageLayout +│ └── 客户门户:CustomerSideRail(全高)+ PageLayout(无顶栏、无多页签) └── Footer(可选) ``` +运营端布局 DOM/样式与改前一致;客户门户不挂载 TopNav / TabBar。 + **约定:** - 主内容背景色:`#f0f3f4` - 页面容器使用 `[class$='-container']`,统一 `padding: 16px` - 内容区域使用 `overflow: hidden`、`height: 100%` 保证高度正确 +**客户门户 vs 运营端导航(差异约定):** + +| | 运营端 | 客户门户 | +|---|---|---| +| 顶栏 | 一级模块 + hover 二级 + 右侧余额/打印/用户 | **无顶栏** | +| 页签 | TabBar 多页签 | **无多页签**(当前页仅由侧栏高亮表达) | +| 侧栏 | 无全局侧栏 | **全高可折叠左栏**(默认展开):顶 Logo;中按「常用 / 仓储 / 更多」浅分组;**资产与账户收进用户下拉**;底沉余额/打印(含下载)/消息/仓库;**语言收进用户菜单** | +| 高亮 | 路由最长路径匹配 | 侧栏最长路径匹配;账户类路由高亮底栏用户区 | +| 数据 | RBAC 菜单树原样 | 仍用同一菜单树,`flatMap` 二级即可,不改表结构 | + ### 2.2 页面内容结构 单页内容推荐结构: diff --git a/src/components.d.ts b/src/components.d.ts index 4502aec..705769d 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -18,6 +18,7 @@ declare module 'vue' { CodeMirror: typeof import('./components/CodeMirror/index.vue')['default'] CompleteContactModal: typeof import('./components/CompleteContactModal/index.vue')['default'] ContactService: typeof import('./components/ContactService/index.vue')['default'] + CustomerSideRail: typeof import('./components/customer-side-rail/index.vue')['default'] CustomLeftMenu: typeof import('./components/CustomLeftMenu/index.vue')['default'] CustomList: typeof import('./components/CustomList/index.vue')['default'] DrawerPro: typeof import('./components/DrawerPro/index.vue')['default'] diff --git a/src/components/ContactService/index.vue b/src/components/ContactService/index.vue index ad4d2ae..aa34834 100644 --- a/src/components/ContactService/index.vue +++ b/src/components/ContactService/index.vue @@ -4,12 +4,18 @@ import { useI18n } from 'vue-i18n' import { getWarehouseList } from '@/api/system/warehouse' import { useCurrentWarehouseStore } from '@/store' -withDefaults( +const props = withDefaults( defineProps<{ - variant?: 'navbar' | 'login' + variant?: 'navbar' | 'login' | 'sider' + /** 下拉位置;侧栏沉底用 rt */ + dropdownPosition?: 'br' | 'bl' | 'tr' | 'tl' | 'rt' | 'rb' + /** 侧栏收起:窄宽展示缩略文案(无图标) */ + compact?: boolean }>(), { variant: 'navbar', + dropdownPosition: 'br', + compact: false, }, ) @@ -22,6 +28,17 @@ const displayName = computed( t('nav.contactService.selectWarehouse'), ) +/** 收起时只露一字,避免无图标时空块 */ +const labelText = computed(() => { + const name = displayName.value + if (props.variant === 'sider' && props.compact) { + return name.slice(0, 1) || '仓' + } + return name +}) + +const useDropdown = computed(() => props.variant === 'navbar' || props.variant === 'sider') + async function loadServiceDataList() { try { const { items } = await getWarehouseList({ @@ -51,15 +68,22 @@ onMounted(() => {