yudao-team/oa-ui
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新布局完成

Browse Source
This commit is contained in:
XaoLi717 2025-01-13 11:12:56 +08:00
parent b278b66ea1
commit 2f5c50a2f1
10 changed files with 127 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/layout/Layout.vue
View File

@ -38,6 +38,9 @@ const renderLayout = () => {
case 'cutMenu':
const { renderCutMenu } = useRenderLayout()
return renderCutMenu()
case 'leftTop':
const { NewTopLeft } = useRenderLayout()
return NewTopLeft()
default:
break
}

4
src/layout/components/AppView.vue
View File

@ -40,14 +40,14 @@ provide('reload', reload)
{
'!min-h-[calc(100%-var(--app-content-padding)-var(--app-content-padding)-var(--app-footer-height))]':
(fixedHeader &&
(layout === 'classic' || layout === 'topLeft' || layout === 'top') &&
(layout === 'classic' || layout === 'topLeft' || layout === 'top'|| layout === 'leftTop') &&
footer) ||
(!tagsView && layout === 'top' && footer),
'!min-h-[calc(100%-var(--app-content-padding)-var(--app-content-padding)-var(--app-footer-height)-var(--tags-view-height))]':
tagsView && layout === 'top' && footer,
'!min-h-[calc(100%-var(--tags-view-height)-var(--app-content-padding)-var(--app-content-padding)-var(--top-tool-height)-var(--app-footer-height))]':
!fixedHeader && layout === 'classic' && footer,
!fixedHeader && (layout === 'classic'|| layout === 'leftTop') && footer,
'!min-h-[calc(100%-var(--tags-view-height)-var(--app-content-padding)-var(--app-content-padding)-var(--app-footer-height))]':
!fixedHeader && layout === 'topLeft' && footer,

2
src/layout/components/Logo/src/Logo.vue
View File

@ -75,7 +75,7 @@ watch(
:class="[
'ml-10px text-16px font-700',
{
'text-[var(--logo-title-text-color)]': layout === 'classic',
'text-[var(--logo-title-text-color)]': layout === 'classic' || layout === 'leftTop',
'text-[var(--top-header-text-color)]':
layout === 'topLeft' || layout === 'top' || layout === 'cutMenu'
}

4
src/layout/components/Menu/src/Menu.vue
View File

@ -32,7 +32,7 @@ export default defineComponent({
const menuMode = computed((): 'vertical' | 'horizontal' => {
// 竖
const vertical: LayoutType[] = ['classic', 'topLeft', 'cutMenu']
const vertical: LayoutType[] = ['classic', 'topLeft', 'cutMenu', 'leftTop']
if (vertical.includes(unref(layout))) {
return 'vertical'
@ -42,7 +42,7 @@ export default defineComponent({
})
const routers = computed(() =>
unref(layout) === 'cutMenu' ? permissionStore.getMenuTabRouters : permissionStore.getRouters
(unref(layout) === 'cutMenu' || unref(layout) === 'leftTop') ? permissionStore.getMenuTabRouters : permissionStore.getRouters
)
const collapse = computed(() => appStore.getCollapse)

4
src/layout/components/Setting/src/components/LayoutRadioPicker.vue
View File

@ -30,10 +30,10 @@ const layout = computed(() => appStore.getLayout)
`${prefixCls}__top-left`,
'relative w-56px h-48px cursor-pointer bg-gray-300',
{
'is-acitve': layout === 'topLeft'
'is-acitve': layout === 'leftTop'
}
]"
@click="appStore.setLayout('topLeft')"
@click="appStore.setLayout('leftTop')"
></div>
<div
:class="[

2
src/layout/components/TabMenu/index.ts
View File

@ -1,3 +1,5 @@
import TabMenu from './src/TabMenu.vue'
import TabMenu2 from './src/TabMenu2.vue'
export { TabMenu }
export { TabMenu2 }

70
src/layout/components/TabMenu/src/TabMenu2.vue
View File

@ -57,6 +57,7 @@ export default defineComponent({
)
}
}
appStore.setCollapse(true)
})
watch(
@ -102,10 +103,13 @@ export default defineComponent({
const oldPath = unref(tabActive)
tabActive.value = item.children ? item.path : item.path.split('/')[0]
if (item.children) {
if (unref(collapse)){
appStore.setCollapse(false)
}
if (newPath === oldPath || !unref(showMenu)) {
showMenu.value = unref(fixedMenu) ? true : !unref(showMenu)
}
if (unref(showMenu)) {
if (unref(showMenu)&&newPath) {
permissionStore.setMenuTabRouters(
cloneDeep(item.children).map((v) => {
v.path = pathResolve(unref(tabActive), v.path)
@ -115,7 +119,7 @@ export default defineComponent({
}
} else {
push(item.path)
permissionStore.setMenuTabRouters([])
if (unref(collapse))permissionStore.setMenuTabRouters([])
showMenu.value = false
}
}
@ -139,7 +143,7 @@ export default defineComponent({
id={`${variables.namespace}-menu`}
class={[
prefixCls,
'relative bg-[var(--left-menu-bg-color)] top-1px layout-border__right',
'relative dark:bg-[var(--el-bg-color)] flex flex-row flex-grow-1 pl-[1%]',
{
'w-[var(--tab-menu-max-width)]': !unref(collapse),
'w-[var(--tab-menu-min-width)]': unref(collapse)
@ -148,7 +152,7 @@ export default defineComponent({
onMouseleave={mouseleave}
>
<ElScrollbar class="!h-[calc(100%-var(--tab-menu-collapse-height)-1px)]">
<div>
<div class="flex flex-row">
{() => {
return unref(tabRouters).map((v) => {
const item = (
@ -163,52 +167,37 @@ export default defineComponent({
<div
class={[
`${prefixCls}__item`,
'text-center text-12px relative py-12px cursor-pointer',
{
'is-active': isActive(v.path)
}
'h-[100%] text-center text-14px relative cursor-pointer flex-grow pl-15px pr-15px',
'whitespace-nowrap overflow-hidden',
]}
style={['color: var(--top-header-text-color)', 'height: 50px']}
onClick={() => {
tabClick(item)
}}
>
<div>
<Icon icon={item?.meta?.icon}></Icon>
<div class="flex items-center justify-center">
<Icon class="mb-1px icon-class"
icon={item?.meta?.icon}
/>
<p class="mr-3px mt-13px break-words px-2px "
>{t(item.meta?.title)}</p>
<span
class={{'is-active': isActive(v.path)}}
style={['height: 3px','width: 100%','position: absolute','bottom: 1px']}
/>
</div>
{!unref(showTitle) ? undefined : (
<p class="mt-5px break-words px-2px">{t(item.meta?.title)}</p>
)}
</div>
)
})
}}
</div>
</ElScrollbar>
<div
class={[
`${prefixCls}--collapse`,
'text-center h-[var(--tab-menu-collapse-height)] leading-[var(--tab-menu-collapse-height)] cursor-pointer'
]}
onClick={setCollapse}
>
<Icon icon={unref(collapse) ? 'ep:d-arrow-right' : 'ep:d-arrow-left'}></Icon>
</div>
<Menu
class={[
'!absolute top-0 z-11',
{
'!left-[var(--tab-menu-min-width)]': unref(collapse),
'!left-[var(--tab-menu-max-width)]': !unref(collapse),
'!w-[calc(var(--left-menu-max-width)+1px)]': unref(showMenu) || unref(fixedMenu),
'!w-0': !unref(showMenu) && !unref(fixedMenu)
}
]}
style="transition: width var(--transition-time-02), left var(--transition-time-02);"
></Menu>
</div>
)
}
})
// {!unref(showTitle) ? undefined : (
// )}
</script>
<style lang="scss" scoped>
@ -223,7 +212,7 @@ $prefix-cls: #{$namespace}-tab-menu;
&:hover {
color: var(--left-menu-text-active-color);
// background-color: var(--left-menu-bg-active-color);
background-color: var(--left-menu-bg-active-color);
}
}
@ -236,5 +225,16 @@ $prefix-cls: #{$namespace}-tab-menu;
color: var(--left-menu-text-active-color);
background-color: var(--left-menu-bg-active-color);
}
.is-hover {
color: var(--left-menu-text-active-color);
}
}
.icon-class {
flex-shrink: 1;
min-width: 0;
overflow: hidden;
}
.icon-class.hidden {
opacity: 0;
}
</style>

2
src/layout/components/ToolHeader.vue
View File

@ -58,7 +58,7 @@ export default defineComponent({
{hamburger.value && layout.value !== 'cutMenu' ? (
<Collapse class="custom-hover" color="var(--top-header-text-color)"></Collapse>
) : undefined}
{breadcrumb.value ? <Breadcrumb class="lt-md:hidden"></Breadcrumb> : undefined}
{breadcrumb.value && layout.value !== 'leftTop' ? <Breadcrumb class="lt-md:hidden"></Breadcrumb> : undefined}
</div>
) : undefined}
<div class="h-full flex items-center">

136
src/layout/components/useRenderLayout.tsx
View File

@ -1,7 +1,7 @@
import { computed } from 'vue'
import { useAppStore } from '@/store/modules/app'
import { Menu } from '@/layout/components/Menu'
import { TabMenu } from '@/layout/components/TabMenu'
import { TabMenu, TabMenu2 } from '@/layout/components/TabMenu'
import { TagsView } from '@/layout/components/TagsView'
import { Logo } from '@/layout/components/Logo'
import AppView from './AppView.vue'
@ -297,72 +297,92 @@ export const useRenderLayout = () => {
)
}
const NewTopLeft = () => {
return (
<>
<div class="relative flex items-center bg-[var(--top-header-bg-color)] layout-border__bottom">
{logo.value ? <Logo class="custom-hover !pr-15px"></Logo> : undefined}
<ToolHeader class="flex-1"></ToolHeader>
</div>
<div class="absolute left-0 top-[var(--logo-height)] h-[calc(100%-var(--logo-height))] w-[calc(100%-2px)] flex">
<TabMenu></TabMenu>
const NewTopLeft = () => {
return (
<>
<div
class={[
'absolute top-0 left-0 h-full layout-border__right',
{ '!fixed z-3000': mobile.value }
]}
>
{logo.value ? (
<Logo
class={[
'bg-[var(--left-menu-bg-color)] relative',
{
'!pl-0': mobile.value && collapse.value,
'w-[var(--left-menu-min-width)]': appStore.getCollapse,
'w-[var(--left-menu-max-width)]': !appStore.getCollapse
}
]}
style="transition: all var(--transition-time-02);"
></Logo>
) : undefined}
<Menu class={[{ '!h-[calc(100%-var(--logo-height))]': logo.value }]}></Menu>
</div>
<div
class={[
`${prefixCls}-content`,
'absolute top-0 h-[100%]',
{
'w-[calc(100%-var(--left-menu-min-width))] left-[var(--left-menu-min-width)]':
collapse.value && !mobile.value && !mobile.value,
'w-[calc(100%-var(--left-menu-max-width))] left-[var(--left-menu-max-width)]':
!collapse.value && !mobile.value && !mobile.value,
'fixed !w-full !left-0': mobile.value
}
]}
style="transition: all var(--transition-time-02);"
>
<ElScrollbar
v-loading={pageLoading.value}
class={[
`${prefixCls}-content-scrollbar`,
{
'!h-[calc(100%-var(--top-tool-height)-var(--tags-view-height))] mt-[calc(var(--top-tool-height)+var(--tags-view-height))]':
fixedHeader.value
}
]}
>
<div
class={[
`${prefixCls}-content`,
'h-[100%]',
{
'w-[calc(100%-var(--tab-menu-min-width))] left-[var(--tab-menu-min-width)]':
collapse.value && !fixedMenu.value,
'w-[calc(100%-var(--tab-menu-max-width))] left-[var(--tab-menu-max-width)]':
!collapse.value && !fixedMenu.value,
'w-[calc(100%-var(--tab-menu-min-width)-var(--left-menu-max-width))] ml-[var(--left-menu-max-width)]':
collapse.value && fixedMenu.value,
'w-[calc(100%-var(--tab-menu-max-width)-var(--left-menu-max-width))] ml-[var(--left-menu-max-width)]':
!collapse.value && fixedMenu.value
'fixed top-0 left-0 z-10': fixedHeader.value,
'w-[calc(100%-var(--left-menu-min-width))] !left-[var(--left-menu-min-width)]':
collapse.value && fixedHeader.value && !mobile.value,
'w-[calc(100%-var(--left-menu-max-width))] !left-[var(--left-menu-max-width)]':
!collapse.value && fixedHeader.value && !mobile.value,
'!w-full !left-0': mobile.value
}
]}
style="transition: all var(--transition-time-02);"
>
<ElScrollbar
v-loading={pageLoading.value}
class={[
`${prefixCls}-content-scrollbar`,
{
'!h-[calc(100%-var(--tags-view-height))] mt-[calc(var(--tags-view-height))]':
fixedHeader.value && tagsView.value
}
]}
>
{tagsView.value ? (
<TagsView
class={[
'relative layout-border__bottom layout-border__top',
{
'!fixed top-0 left-0 z-10': fixedHeader.value,
'w-[calc(100%-var(--tab-menu-min-width))] !left-[var(--tab-menu-min-width)] mt-[var(--logo-height)]':
collapse.value && fixedHeader.value,
'w-[calc(100%-var(--tab-menu-max-width))] !left-[var(--tab-menu-max-width)] mt-[var(--logo-height)]':
!collapse.value && fixedHeader.value,
'!fixed top-0 !left-[var(--tab-menu-min-width)+var(--left-menu-max-width)] z-10':
fixedHeader.value && fixedMenu.value,
'w-[calc(100%-var(--tab-menu-min-width)-var(--left-menu-max-width))] !left-[var(--tab-menu-min-width)+var(--left-menu-max-width)] mt-[var(--logo-height)]':
collapse.value && fixedHeader.value && fixedMenu.value,
'w-[calc(100%-var(--tab-menu-max-width)-var(--left-menu-max-width))] !left-[var(--tab-menu-max-width)+var(--left-menu-max-width)] mt-[var(--logo-height)]':
!collapse.value && fixedHeader.value && fixedMenu.value
}
]}
style="transition: width var(--transition-time-02), left var(--transition-time-02);"
></TagsView>
) : undefined}
<div class="flex items-center justify-between bg-[var(--top-header-bg-color)]">
<TabMenu2
class={[
'bg-[var(--top-header-bg-color)]',
]}
></TabMenu2>
<ToolHeader
class={[
'bg-[var(--top-header-bg-color)] flex-shrink-0',
{'layout-border__bottom': !tagsView.value},
]}
></ToolHeader>
</div>
<AppView></AppView>
</ElScrollbar>
{tagsView.value ? (
<TagsView class="layout-border__top layout-border__bottom"></TagsView>
) : undefined}
</div>
</div>
</>
)
}
<AppView></AppView>
</ElScrollbar>
</div>
</>
)
}
return {
renderClassic,

2
src/types/layout.d.ts vendored
View File

@ -1 +1 @@
export type LayoutType = 'classic' | 'topLeft' | 'top' | 'cutMenu'
export type LayoutType = 'classic' | 'topLeft' | 'top' | 'cutMenu' | 'leftTop'