renxiaodong/lingji-work-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 组件库替换

Browse Source
This commit is contained in:
rd
2025-09-05 16:41:50 +08:00
parent f6b91fce4f
commit 3451546280
61 changed files with 549 additions and 548 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/layouts/NotFound.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { Button } from 'ant-design-vue';
import { Button, Result } from 'ant-design-vue';
import { useRouter } from 'vue-router';
const router = useRouter();
@ -10,7 +10,7 @@ const back = () => {
<template>
<div class="content">
<a-result class="result" status="404" subtitle="页面跑路了" />
<Result class="result" status="404" sub-title="页面跑路了" />
<div class="operation-row flex justify-center">
<Button key="back" type="primary" @click="back">返回</Button>
</div>
@ -22,8 +22,10 @@ const back = () => {
position: absolute;
top: 50%;
left: 50%;
margin-left: -95px;
margin-top: -121px;
text-align: center;
transform: translate(-50%, -50%);
padding: 32px 32px 24px;
// margin-left: -95px;
// margin-top: -121px;
// text-align: center;
}
</style>

22
src/layouts/components/navbar/components/middle-side/style.scss
View File

@ -8,42 +8,42 @@
width: 560px;
height: 36px;
padding: 0 2px 0 16px;
border-radius: 50px;
background: rgba(255, 255, 255, 0.6);
border-radius: 50px !important;
background-color: rgba(255, 255, 255, 0.6) !important;
backdrop-filter: blur(8px);
border-color: #fff;
border-color: #fff !important;
box-shadow: none;
transition: all 0.3s;
display: flex;
align-items: center;
&.ant-input-affix-wrapper-focused {
border-color: #6d4cfe;
caret-color: #6d4cfe;
border-color: #6d4cfe !important;
caret-color: #6d4cfe !important;
}
&:hover {
border-color: #6d4cfe;
border-color: #6d4cfe !important;
}
.ant-input-suffix {
margin-inline-start: 0;
margin-inline-start: 0 !important;
}
.ant-input {
padding-right: 16px;
border: none !important;
background-color: transparent;
background-color: transparent !important;
box-shadow: none;
font-family: $font-family-regular;
color: #211f24;
font-size: 12px;
font-size: 12px !important;
font-style: normal;
font-weight: 400;
line-height: 20px;
&::placeholder {
color: #939499;
color: #939499 !important;
}
&:focus-within {
&::after {
border-width: 1px;
border-width: 1px !important;
}
}
}

125
src/layouts/components/navbar/components/right-side/index.vue
View File

@ -10,13 +10,11 @@
<div class="agent-entry mx-16px" :class="isAgentRoute ? 'agent' : ''" @click="handleAgentClick"></div>
<!-- 头像设置 -->
<a-dropdown trigger="click" class="layout-avatar-dropdown">
<a-avatar class="cursor-pointer" :size="32">
<img alt="avatar" src="@/assets/avatar.svg" />
</a-avatar>
<template #content>
<div>
<a-doption>
<Dropdown trigger="click" overlayClassName="layout-avatar-dropdown">
<img alt="avatar" src="@/assets/avatar.svg" class="cursor-pointer w-32px h-32px rounded-50%" />
<template #overlay>
<Menu>
<MenuItem>
<div class="h-full flex justify-between items-center w-100%" @click="setServerMenu">
<div class="flex items-center">
<img :src="icon1" class="w-16px h-16px mr-8px" />
@ -24,19 +22,19 @@
</div>
<icon-right size="12" />
</div>
</a-doption>
<a-dsubmenu value="option-1" position="lt" trigger="hover" class="enterprises-dsubmenu">
<a-doption class="enterprises-doption">
<div class="flex justify-between w-100% h-full items-center">
<div class="flex items-center">
<img :src="icon3" class="w-16px h-16px mr-8px" />
<span>切换企业账号</span>
</MenuItem>
<MenuItem>
<SubMenu value="option-1" position="lt" trigger="hover" popupClassName="enterprises-dsubmenu">
<template #title>
<div class="flex justify-between w-100% h-full items-center">
<div class="flex items-center">
<img :src="icon3" class="w-16px h-16px mr-8px" />
<span>切换企业账号</span>
</div>
<icon-right size="12" />
</div>
<icon-right size="12" />
</div>
</a-doption>
<template #content>
<a-doption
</template>
<MenuItem
v-for="(item, index) in enterprises"
:key="index"
class="rounded-8px hover:bg-#F2F3F5"
@ -49,10 +47,10 @@
<span>{{ item.name }}</span>
<icon-check v-if="enterpriseInfo?.id === item.id" size="16" />
</div>
</a-doption>
</template>
</a-dsubmenu>
<a-doption>
</MenuItem>
</SubMenu>
</MenuItem>
<MenuItem>
<div class="flex justify-between w-100% h-full items-center" @click="clickExit">
<div class="flex items-center">
<img :src="icon2" class="w-16px h-16px mr-8px" />
@ -60,10 +58,10 @@
</div>
<icon-right size="12" />
</div>
</a-doption>
</div>
</MenuItem>
</Menu>
</template>
</a-dropdown>
</Dropdown>
<ExitAccountModal ref="exitAccountModalRef" />
<DownloadCenterModal ref="downloadCenterModalRef" />
@ -71,6 +69,7 @@
</template>
<script setup>
import { Dropdown, Menu, MenuItem, SubMenu } from 'ant-design-vue';
import router from '@/router';
import { useEnterpriseStore } from '@/stores/modules/enterprise';
import { useSidebarStore } from '@/stores/modules/side-bar';
@ -137,35 +136,51 @@ const handleAgentClick = () => {
<style lang="scss">
.layout-avatar-dropdown,
.enterprises-dsubmenu {
.arco-dropdown {
.ant-dropdown-menu {
border-radius: 8px;
border: 1px solid var(--BG-300, #e6e6e8);
background: var(--BG-white, #fff);
padding: 12px 0px;
.arco-dropdown-option {
.ant-dropdown-menu-item {
padding: 0 12px;
margin-bottom: 4px;
&-content {
.ant-dropdown-menu-title-content {
display: flex;
height: 40px;
width: 100%;
padding: 10px 24px;
align-items: center;
.menu-item-text {
color: var(--Text-2, #3c4043);
font-family: $font-family-regular;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 22px;
.ant-dropdown-menu-submenu {
width: 100%;
.ant-dropdown-menu-submenu-title {
padding: 0;
&:hover {
background: none;
}
.ant-dropdown-menu-title-content {
padding: 0 !important;
}
}
.ant-dropdown-menu-submenu-arrow {
display: none;
}
}
}
.arco-dropdown-option-content {
.menu-item-text {
color: var(--Text-2, #3c4043);
font-family: $font-family-regular;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 22px;
}
.ant-dropdown-menu-title-content {
border-radius: 8px !important;
}
&:not(.arco-dropdown-option-disabled):hover {
&:not(.ant-dropdown-menu-item):hover {
background-color: transparent;
.arco-dropdown-option-content {
.ant-dropdown-menu-title-content {
background: var(--BG-200, #f2f3f5);
}
}
@ -175,29 +190,29 @@ const handleAgentClick = () => {
.layout-avatar-dropdown,
.enterprises-dsubmenu {
width: 200px;
.arco-dropdown {
.ant-dropdown-menu {
padding: 12px 4px;
.arco-dropdown-option {
.ant-dropdown-menu-item {
padding: 0 !important;
&-content {
.ant-dropdown-menu-title-content {
padding: 0 12px !important;
}
}
}
.arco-dropdown-option-suffix {
.ant-dropdown-option-suffix {
display: none;
}
.enterprises-doption {
.arco-dropdown-option-content {
padding: 0 !important;
border-radius: 8px;
}
&:not(.arco-dropdown-option-disabled):hover {
background-color: transparent;
.arco-dropdown-option-content {
background: var(--BG-200, #f2f3f5);
}
}
}
// .enterprises-doption {
// .ant-dropdown-menu-title-content {
// padding: 0 !important;
// border-radius: 8px;
// }
// &:not(.ant-dropdown-option-disabled):hover {
// background-color: transparent;
// .ant-dropdown-menu-title-content {
// background: var(--BG-200, #f2f3f5);
// }
// }
// }
}
</style>