feat: 升级vue3版本和router版本，主框架调整，页面样式统一
This commit is contained in:
rd
@ -1,95 +1,38 @@
|
||||
<template>
|
||||
<div class="navbar-menu h-100%">
|
||||
<a-menu mode="horizontal" :selected-keys="selectedKey">
|
||||
<a-menu-item v-for="item in menuList" :key="String(item.id)">
|
||||
<template v-if="item.children">
|
||||
<a-dropdown :popup-max-height="false" class="layout-menu-item-dropdown">
|
||||
<a-button type="text">
|
||||
<span class="menu-item-text mr-2px"> {{ item.name }}</span>
|
||||
<icon-caret-down size="16" class="arco-icon-down !mr-0" />
|
||||
</a-button>
|
||||
<template #content>
|
||||
<a-doption
|
||||
v-for="(child, ind) in item.children"
|
||||
:key="ind"
|
||||
@click="handleDropdownClick(child)"
|
||||
:class="{ active: child.includeRouteNames.includes(route.name) }"
|
||||
<script lang="jsx">
|
||||
import { Sender } from 'ant-design-x-vue';
|
||||
import { Input } from 'ant-design-vue';
|
||||
|
||||
export default {
|
||||
setup(props, { emit, expose }) {
|
||||
const keyWord = ref('');
|
||||
const handleSearch = () => {
|
||||
console.log('handleSearch', keyWord.value);
|
||||
};
|
||||
return () => (
|
||||
<div class="middle-wrap h-100% flex-1 flex items-center justify-center px-24px">
|
||||
<Input
|
||||
v-model:value={keyWord.value}
|
||||
onPressEnter={handleSearch}
|
||||
size="large"
|
||||
class="sender-input-wrap"
|
||||
placeholder="随时告诉我你想做什么，比如查数据、发任务、写内容，我会立刻帮你完成。"
|
||||
v-slots={{
|
||||
suffix: () => (
|
||||
<div
|
||||
class="bg-#F0EDFF rounded-16px w-32px h-32px flex justify-center items-center icon cursor-pointer"
|
||||
onClick={handleSearch}
|
||||
>
|
||||
<span class="menu-item-text"> {{ child.name }}</span>
|
||||
</a-doption>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-menu-item :key="String(item.id)" @click="handleDropdownClick(item)">
|
||||
<span class="menu-item-text"> {{ item.name }}</span>
|
||||
</a-menu-item>
|
||||
</template>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useSidebarStore } from '@/stores/modules/side-bar';
|
||||
// import router from '@/router';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const sidebarStore = useSidebarStore();
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
const selectedKey = computed(() => {
|
||||
return [String(sidebarStore.activeMenuId)];
|
||||
});
|
||||
const menuList = computed(() => {
|
||||
return sidebarStore.menuList;
|
||||
});
|
||||
|
||||
const handleDropdownClick = (item) => {
|
||||
router.push({ name: item.routeName });
|
||||
<icon-arrow-right size={20} class="color-#6D4CFE" />
|
||||
</div>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import './style.scss';
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.layout-menu-item-dropdown {
|
||||
.arco-dropdown {
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--BG-300, #e6e6e8);
|
||||
background: var(--BG-white, #fff);
|
||||
padding: 12px 0px;
|
||||
.arco-dropdown-option {
|
||||
padding: 0 12px;
|
||||
margin-bottom: 4px;
|
||||
&-content {
|
||||
display: flex;
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
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; /* 137.5% */
|
||||
}
|
||||
}
|
||||
&:not(.arco-dropdown-option-disabled):hover {
|
||||
background: var(--BG-200, #f2f3f5);
|
||||
}
|
||||
&.active {
|
||||
background: var(--Brand-Brand-1, #f0edff) !important;
|
||||
.menu-item-text {
|
||||
color: var(--Brand-Brand-6, #6d4cfe) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,45 +1,53 @@
|
||||
.navbar-menu {
|
||||
.middle-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 40px;
|
||||
.menu-item-text {
|
||||
color: var(--Text-2, #3c4043);
|
||||
font-family: $font-family-medium;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
:deep(.arco-menu) {
|
||||
height: 100%;
|
||||
.arco-menu-inner {
|
||||
padding: 0 24px;
|
||||
.sender-input-wrap {
|
||||
width: 560px;
|
||||
height: 36px;
|
||||
padding: 0 2px 0 16px;
|
||||
border-radius: 50px;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
backdrop-filter: blur(8px);
|
||||
box-shadow: none;
|
||||
transition: all 0.3s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
:deep(.ant-input-suffix) {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
.arco-menu-item {
|
||||
padding: 0;
|
||||
position: relative;
|
||||
&.arco-menu-selected {
|
||||
.menu-item-text,
|
||||
.arco-menu-selected-label {
|
||||
color: #6d4cfe;
|
||||
}
|
||||
.arco-menu-selected-label {
|
||||
background: var(--Brand-Brand-6, #6d4cfe);
|
||||
height: 4px;
|
||||
border-radius: 4px;
|
||||
width: 50%;
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
:deep(.ant-input) {
|
||||
padding-right: 16px;
|
||||
border: none !important;
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
font-family: $font-family-regular;
|
||||
color: #211f24;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
&:hover {
|
||||
border-color: #6d4cfe;
|
||||
}
|
||||
&::placeholder {
|
||||
color: #939499;
|
||||
}
|
||||
&:focus {
|
||||
border-color: #6d4cfe !important;
|
||||
caret-color: #6D4CFE;
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
&::after {
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.arco-icon-down {
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.arco-dropdown-open .arco-icon-down {
|
||||
transform: rotate(180deg);
|
||||
.icon {
|
||||
transition: background 0.3s;
|
||||
&:hover {
|
||||
background: linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--Brand-1, #f0edff);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user