feat: 侧边栏静态增删

This commit is contained in:
ChenZhaoYu 2023-02-14 12:00:33 +08:00
parent b03f804e35
commit 33c02cfe10
4 changed files with 67 additions and 60 deletions

View File

@ -1,14 +1,53 @@
<script setup lang='ts'>
import { NScrollbar } from 'naive-ui'
import ListItem from './ListItem.vue'
import type { HistoryChatProps } from '../../types'
import { SvgIcon } from '@/components/common'
interface Props {
data: HistoryChatProps[]
}
interface Emit {
(ev: 'delete', index: number): void
(ev: 'edit', index: number): void
}
defineProps<Props>()
const emit = defineEmits<Emit>()
function handleEdit(index: number) {
emit('delete', index)
}
function handleDelete(index: number) {
emit('delete', index)
}
</script>
<template>
<NScrollbar class="px-4">
<div class="flex flex-col gap-2 text-sm">
<ListItem text="Learning correlation" />
<ListItem text="Write Code" />
<ListItem text="docs..." />
<div v-for="(item, index) of data" :key="index">
<a
class="relative flex items-center gap-3 px-3 py-3 break-all rounded-md cursor-pointer bg-neutral-50 pr-14 hover:bg-neutral-100 group"
>
<span>
<SvgIcon icon="ri:message-3-line" />
</span>
<div class="relative flex-1 overflow-hidden break-all text-ellipsis whitespace-nowrap max-h-5">
<span>{{ item.title }}</span>
</div>
<div class="absolute z-10 flex visible right-1">
<button class="p-1">
<SvgIcon icon="ri:edit-line" @click="handleEdit(index)" />
</button>
<button class="p-1" @click="handleDelete(index)">
<SvgIcon icon="ri:delete-bin-line" />
</button>
</div>
</a>
</div>
</div>
</NScrollbar>
</template>

View File

@ -1,52 +0,0 @@
<script setup lang='ts'>
import { SvgIcon } from '@/components/common'
interface Props {
text: string
}
interface Emit {
(e: 'click',): void
(e: 'edit',): void
(e: 'delete',): void
}
defineProps<Props>()
const emit = defineEmits<Emit>()
function handleClick(event: Event) {
emit('click')
event.preventDefault()
}
function handleEdit() {
emit('edit')
}
function handleDelete() {
emit('delete')
}
</script>
<template>
<a
class="relative flex items-center gap-3 px-3 py-3 break-all rounded-md cursor-pointer bg-neutral-50 pr-14 hover:bg-neutral-100 group"
@click="handleClick"
>
<span>
<SvgIcon icon="ri:message-3-line" />
</span>
<div class="relative flex-1 overflow-hidden break-all text-ellipsis whitespace-nowrap max-h-5">
<span>{{ text }}</span>
</div>
<div class="absolute z-10 flex visible right-1">
<button class="p-1" @click="handleEdit">
<SvgIcon icon="ri:edit-line" />
</button>
<button class="p-1" @click="handleDelete">
<SvgIcon icon="ri:delete-bin-line" />
</button>
</div>
</a>
</template>

View File

@ -1,17 +1,31 @@
<script setup lang='ts'>
import { ref } from 'vue'
import { NButton, NLayoutSider, useMessage } from 'naive-ui'
import { NButton, NLayoutSider } from 'naive-ui'
import type { HistoryChatProps } from '../../types'
import List from './List.vue'
import Footer from './Footer.vue'
import { useAppStore } from '@/store'
const appStore = useAppStore()
const ms = useMessage()
const collapsed = ref(appStore.siderCollapsed ?? false)
const history = ref<HistoryChatProps[]>([])
function handleAdd() {
ms.info('Coming soon...')
history.value.push({
title: 'New chat',
edit: false,
data: [],
})
}
function handleEdit(index: number) {
history.value[index].edit = true
}
function handleDelete(index: number) {
history.value.splice(index, 1)
}
function handleCollapsed() {
@ -37,7 +51,7 @@ function handleCollapsed() {
New chat
</NButton>
</div>
<List />
<List :data="history" @edit="handleEdit" @delete="handleDelete" />
</main>
<Footer />
</div>

View File

@ -10,3 +10,9 @@ export interface ChatProps {
error?: boolean
options?: ChatOptions
}
export interface HistoryChatProps {
title: string
edit: boolean
data: ChatProps[]
}