feat: 侧边栏静态增删
This commit is contained in:
parent
b03f804e35
commit
33c02cfe10
|
@ -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>
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
||||
|
|
|
@ -10,3 +10,9 @@ export interface ChatProps {
|
|||
error?: boolean
|
||||
options?: ChatOptions
|
||||
}
|
||||
|
||||
export interface HistoryChatProps {
|
||||
title: string
|
||||
edit: boolean
|
||||
data: ChatProps[]
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue