主页框架更新
This commit is contained in:
李志鹏
217
src/views/home/left-nav.vue
Normal file
217
src/views/home/left-nav.vue
Normal file
@@ -0,0 +1,217 @@
|
||||
<template>
|
||||
<div class="left-nav" :class="{ collapse: isCollapse }">
|
||||
<div class="top">
|
||||
<img class="logo-img" src="@/assets/images/logo.png" alt="FiDA" v-show="!isCollapse" />
|
||||
<span class="logo-text" v-show="!isCollapse">FiDA</span>
|
||||
<div class="close" @click="onCollapse">
|
||||
<svg-icon name="shouqi" size="24" />
|
||||
</div>
|
||||
</div>
|
||||
<button class="create-btn">
|
||||
<span class="icon"><svg-icon name="add" size="16" /></span>
|
||||
<span v-show="!isCollapse" class="text">New Project</span>
|
||||
</button>
|
||||
<div class="menu-item" @click="onHome">
|
||||
<span class="icon"><svg-icon name="home" size="24" /></span>
|
||||
<span class="title" v-show="!isCollapse">Home</span>
|
||||
</div>
|
||||
<div class="menu-item" @click="onHistory" :class="{ active: showHistory }">
|
||||
<span class="icon"><svg-icon name="history" size="24" /></span>
|
||||
<span class="title" v-show="!isCollapse">History</span>
|
||||
<span class="icon jiantou" v-show="!isCollapse"
|
||||
><svg-icon name="arrow-right" size="14" />
|
||||
</span>
|
||||
</div>
|
||||
<div class="history-list" v-show="!isCollapse && showHistory">
|
||||
<div v-for="item in historyList" :key="item.name" class="history-item">
|
||||
<div v-if="item.title" class="title">{{ item.name }}</div>
|
||||
<div v-else class="box">
|
||||
<span>{{ item.name }}</span>
|
||||
<el-popover placement="right" trigger="click">
|
||||
<template #reference>
|
||||
<span class="icon"><svg-icon name="more" size="16" /></span>
|
||||
</template>
|
||||
<div class="button-box">
|
||||
<div class="rename-btn">Rename</div>
|
||||
<div class="delete-btn">Delete</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
import { useGlobalStore } from '@/stores'
|
||||
const globalStore = useGlobalStore()
|
||||
const isCollapse = computed(() => globalStore.state.homeLeftNavCollapse)
|
||||
const onCollapse = () => {
|
||||
globalStore.setHomeLeftNavCollapse(!isCollapse.value)
|
||||
}
|
||||
const showHistory = ref(true)
|
||||
const historyList = ref([
|
||||
{
|
||||
title: true,
|
||||
name: 'Today'
|
||||
},
|
||||
{
|
||||
name: 'Conversation Item 1'
|
||||
},
|
||||
{
|
||||
name: 'Conversation Item 2'
|
||||
},
|
||||
{
|
||||
title: true,
|
||||
name: 'Yesterday'
|
||||
},
|
||||
{
|
||||
name: 'Conversation Item 3'
|
||||
},
|
||||
{
|
||||
title: true,
|
||||
name: 'Earlier Chat'
|
||||
},
|
||||
{
|
||||
name: 'Conversation Item 4'
|
||||
},
|
||||
{
|
||||
name: 'Conversation Item 5'
|
||||
}
|
||||
])
|
||||
const onHome = () => {
|
||||
console.log('onHome')
|
||||
}
|
||||
const onHistory = () => {
|
||||
showHistory.value = !showHistory.value
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.left-nav {
|
||||
width: var(--left-nav-collapse-width, 30rem);
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
&,
|
||||
& * {
|
||||
transition: width 0.2s ease-in-out;
|
||||
}
|
||||
&.collapse {
|
||||
--left-nav-collapse-width: 9.4rem;
|
||||
--collapse-top-padding: 4.6rem 0 0 0;
|
||||
--collapse-create-btn-width: 5.1rem;
|
||||
--collapse-menu-item-width: 50%;
|
||||
}
|
||||
> .top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--collapse-top-padding, 2.6rem 1.6rem 0 3.6rem);
|
||||
> .logo-img {
|
||||
width: 3.4rem;
|
||||
height: auto;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
> .logo-text {
|
||||
font-family: Mazzard;
|
||||
font-weight: 600;
|
||||
font-size: 3rem;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
> .create-btn {
|
||||
margin: 4.5rem auto 2.5rem;
|
||||
width: var(--collapse-create-btn-width, 23rem);
|
||||
height: 5.1rem;
|
||||
border-radius: 5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
background-color: rgba(255, 122, 81, 1);
|
||||
border: none;
|
||||
outline: none;
|
||||
&:active {
|
||||
background-color: rgba(255, 122, 81, 0.8);
|
||||
}
|
||||
|
||||
> .text {
|
||||
font-weight: 500;
|
||||
font-size: 1.8rem;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
> .menu-item {
|
||||
width: var(--collapse-menu-item-width, 23rem);
|
||||
margin: 2.5rem auto 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
border-radius: 8px;
|
||||
padding: 0.9rem 0.8rem;
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
> .title {
|
||||
flex: 1;
|
||||
font-weight: 500;
|
||||
font-size: 2rem;
|
||||
margin: 0 1.6rem;
|
||||
}
|
||||
> .icon {
|
||||
transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
&.active > .jiantou {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
> .history-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
width: 23.2rem;
|
||||
margin: 1rem auto 0;
|
||||
> .history-item {
|
||||
width: 100%;
|
||||
height: 4rem;
|
||||
margin-bottom: 0.4rem;
|
||||
> div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 0.8rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
> .title {
|
||||
font-weight: 600;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
> .box {
|
||||
border-radius: 0.8rem;
|
||||
cursor: pointer;
|
||||
&.active,
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
> .label {
|
||||
flex: 1;
|
||||
font-weight: 400;
|
||||
font-size: 1.6rem;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user