feat: 优化文件结构、组件、布局
ChenZhaoYu
2 years ago
parent
72df35c929
commit
39f718ef16
@ -1,13 +1,12 @@
|
||||
<script setup lang="ts">
|
||||
import { GithubSite, NaiveProvider } from '@/components'
|
||||
import { NaiveProvider } from '@/components/common'
|
||||
import Chat from '@/views/Chat/index.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NaiveProvider>
|
||||
<div class="h-full overflow-hidden pb-[50px] p-4">
|
||||
<div class="h-full p-4 overflow-hidden">
|
||||
<Chat />
|
||||
<GithubSite />
|
||||
</div>
|
||||
</NaiveProvider>
|
||||
</template>
|
||||
|
||||
@ -1,27 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { defineComponent, h } from 'vue'
|
||||
import { NConfigProvider, NMessageProvider, useMessage } from 'naive-ui'
|
||||
|
||||
function registerNaiveTools() {
|
||||
window.$message = useMessage()
|
||||
}
|
||||
|
||||
const NaiveProviderContent = defineComponent({
|
||||
name: 'NaiveProviderContent',
|
||||
setup() {
|
||||
registerNaiveTools()
|
||||
},
|
||||
render() {
|
||||
return h('div')
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NConfigProvider class="h-full">
|
||||
<NMessageProvider>
|
||||
<slot />
|
||||
<NaiveProviderContent />
|
||||
</NMessageProvider>
|
||||
</NConfigProvider>
|
||||
</template>
|
||||
@ -0,0 +1,20 @@
|
||||
<script setup lang='ts'>
|
||||
interface Emit {
|
||||
(e: 'click'): void
|
||||
}
|
||||
|
||||
const emit = defineEmits<Emit>()
|
||||
|
||||
function handleClick() {
|
||||
emit('click')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button
|
||||
class="flex items-center justify-center w-10 h-10 transition rounded-full hover:bg-neutral-100"
|
||||
@click="handleClick"
|
||||
>
|
||||
<slot />
|
||||
</button>
|
||||
</template>
|
||||
@ -0,0 +1,46 @@
|
||||
<script setup lang='ts'>
|
||||
import { computed } from 'vue'
|
||||
import type { PopoverPlacement } from 'naive-ui'
|
||||
import { NTooltip } from 'naive-ui'
|
||||
import Button from './Button.vue'
|
||||
|
||||
interface Props {
|
||||
tooltip?: string
|
||||
placement?: PopoverPlacement
|
||||
}
|
||||
|
||||
interface Emit {
|
||||
(e: 'click'): void
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
tooltip: '',
|
||||
placement: 'bottom',
|
||||
})
|
||||
|
||||
const emit = defineEmits<Emit>()
|
||||
|
||||
const showTooltip = computed(() => Boolean(props.tooltip))
|
||||
|
||||
function handleClick() {
|
||||
emit('click')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="showTooltip">
|
||||
<NTooltip :placement="placement" trigger="hover">
|
||||
<template #trigger>
|
||||
<Button @click="handleClick">
|
||||
<slot />
|
||||
</Button>
|
||||
</template>
|
||||
{{ tooltip }}
|
||||
</NTooltip>
|
||||
</div>
|
||||
<div v-else>
|
||||
<Button @click="handleClick">
|
||||
<slot />
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
@ -0,0 +1,46 @@
|
||||
<script setup lang="ts">
|
||||
import { defineComponent, h } from 'vue'
|
||||
import {
|
||||
NConfigProvider,
|
||||
NDialogProvider,
|
||||
NLoadingBarProvider,
|
||||
NMessageProvider,
|
||||
NNotificationProvider,
|
||||
useDialog,
|
||||
useLoadingBar,
|
||||
useMessage,
|
||||
useNotification,
|
||||
} from 'naive-ui'
|
||||
|
||||
function registerNaiveTools() {
|
||||
window.$loadingBar = useLoadingBar()
|
||||
window.$dialog = useDialog()
|
||||
window.$message = useMessage()
|
||||
window.$notification = useNotification()
|
||||
}
|
||||
|
||||
const NaiveProviderContent = defineComponent({
|
||||
name: 'NaiveProviderContent',
|
||||
setup() {
|
||||
registerNaiveTools()
|
||||
},
|
||||
render() {
|
||||
return h('div')
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NConfigProvider class="h-full">
|
||||
<NLoadingBarProvider>
|
||||
<NDialogProvider>
|
||||
<NNotificationProvider>
|
||||
<NMessageProvider>
|
||||
<slot />
|
||||
<NaiveProviderContent />
|
||||
</NMessageProvider>
|
||||
</NNotificationProvider>
|
||||
</NDialogProvider>
|
||||
</NLoadingBarProvider>
|
||||
</NConfigProvider>
|
||||
</template>
|
||||
@ -0,0 +1,5 @@
|
||||
import HoverButton from './HoverButton/index.vue'
|
||||
import NaiveProvider from './NaiveProvider.vue'
|
||||
import SvgIcon from './SvgIcon.vue'
|
||||
|
||||
export { HoverButton, NaiveProvider, SvgIcon }
|
||||
@ -0,0 +1,3 @@
|
||||
import GithubSite from './GithubSite.vue'
|
||||
|
||||
export { GithubSite }
|
||||
@ -1,5 +0,0 @@
|
||||
import NaiveProvider from './NaiveProvider.vue'
|
||||
import Icon from './Icon.vue'
|
||||
import GithubSite from './GithubSite.vue'
|
||||
|
||||
export { NaiveProvider, Icon, GithubSite }
|
||||
@ -1,3 +1,6 @@
|
||||
interface Window {
|
||||
$loadingBar?: import('naive-ui').LoadingBarProviderInst;
|
||||
$dialog?: import('naive-ui').DialogProviderInst;
|
||||
$message?: import('naive-ui').MessageProviderInst;
|
||||
$notification?: import('naive-ui').NotificationProviderInst;
|
||||
}
|
||||
|
||||
@ -0,0 +1,27 @@
|
||||
<script setup lang='ts'>
|
||||
import { NLayout, NLayoutContent, NLayoutSider } from 'naive-ui'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="h-full overflow-hidden border rounded-md shadow-md">
|
||||
<NLayout class="h-full" has-sider>
|
||||
<NLayoutSider
|
||||
collapse-mode="width"
|
||||
:collapsed-width="120"
|
||||
:width="240"
|
||||
show-trigger="arrow-circle"
|
||||
class="p-4"
|
||||
bordered
|
||||
>
|
||||
<span>Sider</span>
|
||||
</NLayoutSider>
|
||||
<NLayoutContent class="h-full">
|
||||
<slot />
|
||||
</NLayoutContent>
|
||||
</NLayout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,3 @@
|
||||
import Layout from './Layout.vue'
|
||||
|
||||
export { Layout }
|
||||
Loading…
Reference in New Issue