Browse Source

WMS+SCP电脑端全局UI调整

master_hella_20240701
wangyufei 2 months ago
parent
commit
fb7aadc681
  1. 2
      src/components/RouterSearch/index.vue
  2. 9
      src/layout/components/CategoryHeader.vue
  3. 2
      src/layout/components/Message/src/Message.vue
  4. 16
      src/layout/components/ToolHeader.vue
  5. 4
      src/layout/components/UserInfo/src/UserInfo.vue
  6. 4
      src/layout/components/useRenderLayout.tsx

2
src/components/RouterSearch/index.vue

@ -18,7 +18,7 @@
</el-select> --> </el-select> -->
</ElDialog> </ElDialog>
<div v-else class="custom-hover" @click.stop="showTopSearch = !showTopSearch"> <div v-else class="custom-hover" @click.stop="showTopSearch = !showTopSearch">
<Icon icon="ep:search" /> <Icon icon="ep:search" color="#ffffff"/>
<el-select <el-select
filterable filterable
:reserve-keyword="false" :reserve-keyword="false"

9
src/layout/components/CategoryHeader.vue

@ -9,6 +9,8 @@ import { ElMenu, ElMenuItem } from 'element-plus'
import { usePermissionStore } from '@/store/modules/permission' import { usePermissionStore } from '@/store/modules/permission'
import { hasOneShowingChild } from '@/layout/components/Menu/src/helper' import { hasOneShowingChild } from '@/layout/components/Menu/src/helper'
import { useRenderMenuTitle } from '@/layout/components/Menu/src/components/useRenderMenuTitle' import { useRenderMenuTitle } from '@/layout/components/Menu/src/components/useRenderMenuTitle'
import ToolHeader from './ToolHeader.vue'
// //
import { useDesign } from '@/hooks/web/useDesign' import { useDesign } from '@/hooks/web/useDesign'
const { getPrefixCls, variables } = useDesign() const { getPrefixCls, variables } = useDesign()
@ -101,6 +103,7 @@ export default defineComponent({
} }
}} }}
</ElMenu> </ElMenu>
<ToolHeader class="tool-header"></ToolHeader>
</div> </div>
) )
} }
@ -127,7 +130,11 @@ $prefix-cls: #{$namespace}-tool-header;
left:0; left:0;
z-index: 999; z-index: 999;
} }
.tool-header{
position: absolute;
right: 0px;
top: 0px;
}
} }
.categoryheader{ .categoryheader{
padding-left: 20px; padding-left: 20px;

2
src/layout/components/Message/src/Message.vue

@ -62,7 +62,7 @@ onBeforeUnmount(() => {
<ElPopover :width="400" placement="bottom" trigger="click"> <ElPopover :width="400" placement="bottom" trigger="click">
<template #reference> <template #reference>
<ElBadge :is-dot="unreadCount > 0" class="item"> <ElBadge :is-dot="unreadCount > 0" class="item">
<Icon :size="18" class="cursor-pointer" icon="ep:bell" @click="getList" /> <Icon :size="18" class="cursor-pointer" color="#ffffff" icon="ep:bell" @click="getList" />
</ElBadge> </ElBadge>
</template> </template>
<ElTabs v-model="activeName"> <ElTabs v-model="activeName">

16
src/layout/components/ToolHeader.vue

@ -54,28 +54,28 @@ export default defineComponent({
'dark:bg-[var(--el-bg-color)]' 'dark:bg-[var(--el-bg-color)]'
]} ]}
> >
{layout.value !== 'top' ? ( {/* {layout.value !== 'top' ? (
<div class="h-full flex items-center"> <div class="h-full flex items-center">
{hamburger.value && layout.value !== 'cutMenu' ? ( {hamburger.value && layout.value !== 'cutMenu' ? (
<Collapse class="custom-hover" color="var(--top-header-text-color)"></Collapse> <Collapse class="custom-hover" color="var(--top-header-text-color)"></Collapse>
) : undefined} ) : undefined}
{breadcrumb.value ? <Breadcrumb class="lt-md:hidden"></Breadcrumb> : undefined} {breadcrumb.value ? <Breadcrumb class="lt-md:hidden"></Breadcrumb> : undefined}
</div> </div>
) : undefined} ) : undefined} */}
<div class="h-full flex items-center"> <div class="h-full flex items-center">
{search.value ? (<RouterSearch isModal={false} />) : undefined} {search.value ? (<RouterSearch isModal={false} />) : undefined}
{screenfull.value ? ( {/* {screenfull.value ? (
<Screenfull class="custom-hover" color="var(--top-header-text-color)"></Screenfull> <Screenfull class="custom-hover" color="var(--top-header-text-color)"></Screenfull>
) : undefined} ) : undefined} */}
{size.value ? ( {/* {size.value ? (
<SizeDropdown class="custom-hover" color="var(--top-header-text-color)"></SizeDropdown> <SizeDropdown class="custom-hover" color="var(--top-header-text-color)"></SizeDropdown>
) : undefined} ) : undefined} */}
{locale.value ? ( {/* {locale.value ? (
<LocaleDropdown <LocaleDropdown
class="custom-hover" class="custom-hover"
color="var(--top-header-text-color)" color="var(--top-header-text-color)"
></LocaleDropdown> ></LocaleDropdown>
) : undefined} ) : undefined} */}
{message.value ? ( {message.value ? (
<Message class="custom-hover" color="var(--top-header-text-color)"></Message> <Message class="custom-hover" color="var(--top-header-text-color)"></Message>
) : undefined} ) : undefined}

4
src/layout/components/UserInfo/src/UserInfo.vue

@ -54,7 +54,7 @@ const toDocument = () => {
<ElDropdown class="custom-hover" :class="prefixCls" trigger="click"> <ElDropdown class="custom-hover" :class="prefixCls" trigger="click">
<div class="flex items-center"> <div class="flex items-center">
<ElAvatar :src="avatar" alt="" class="w-[calc(var(--logo-height)-25px)] rounded-[50%]" /> <ElAvatar :src="avatar" alt="" class="w-[calc(var(--logo-height)-25px)] rounded-[50%]" />
<span class="pl-[5px] text-14px text-[var(--top-header-text-color)] <lg:hidden"> <span class="pl-[5px] text-14px text-[var(--top-header-text-color)] <lg:hidden" style="color:#ffffff">
{{ userName }} {{ userName }}
</span> </span>
</div> </div>
@ -62,7 +62,7 @@ const toDocument = () => {
<ElDropdownMenu> <ElDropdownMenu>
<ElDropdownItem> <ElDropdownItem>
<Icon icon="ep:tools" /> <Icon icon="ep:tools" />
<div @click="toProfile">{{ t('common.profile') }}</div> <div @click="toProfile" >{{ t('common.profile') }}</div>
</ElDropdownItem> </ElDropdownItem>
<!-- <ElDropdownItem> <!-- <ElDropdownItem>
<Icon icon="ep:menu" /> <Icon icon="ep:menu" />

4
src/layout/components/useRenderLayout.tsx

@ -114,14 +114,14 @@ export const useRenderLayout = () => {
style="transition: all var(--transition-time-02);width:100%;" style="transition: all var(--transition-time-02);width:100%;"
> >
<ToolHeader {/* <ToolHeader
class={[ class={[
'bg-[var(--top-header-bg-color)]', 'bg-[var(--top-header-bg-color)]',
{ {
'layout-border__bottom': !tagsView.value 'layout-border__bottom': !tagsView.value
} }
]} ]}
></ToolHeader> ></ToolHeader> */}
{tagsView.value ? ( {tagsView.value ? (
<TagsView class="layout-border__bottom layout-border__top"></TagsView> <TagsView class="layout-border__bottom layout-border__top"></TagsView>

Loading…
Cancel
Save