chore: initialize

src/App.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { NConfigProvider, dateZhCN, zhCN } from 'naive-ui'
+import NaiveProvider from '@/components/NaiveProvider.vue'
+import Chat from '@/views/Chat/index.vue'
+</script>
+
+<template>
+  <NConfigProvider :locale="zhCN" :date-locale="dateZhCN" class="h-full" preflight-style-disabled>
+    <NaiveProvider>
+      <div class="flex h-full">
+        <div class="w-[700px] h-[600px] m-auto">
+          <Chat />
+        </div>
+      </div>
+    </NaiveProvider>
+  </NConfigProvider>
+</template>

src/components/NaiveProvider.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { defineComponent, h } from 'vue'
+import { 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>
+  <NLoadingBarProvider>
+    <NDialogProvider>
+      <NNotificationProvider>
+        <NMessageProvider>
+          <slot />
+          <NaiveProviderContent />
+        </NMessageProvider>
+      </NNotificationProvider>
+    </NDialogProvider>
+  </NLoadingBarProvider>
+</template>

src/components/SvgIcon.vue

@@ -0,0 +1,36 @@
+<script setup lang='ts'>
+import { computed, useAttrs } from 'vue'
+import { Icon } from '@iconify/vue'
+
+interface Props {
+  icon?: string
+  localIcon?: string
+}
+
+const props = defineProps<Props>()
+
+const attrs = useAttrs()
+
+const bindAttrs = computed<{ class: string; style: string }>(() => ({
+  class: (attrs.class as string) || '',
+  style: (attrs.style as string) || '',
+}))
+
+const symbolId = computed(() => {
+  const icon = props.localIcon || 'no-icon'
+  return `#icon-local-${icon}`
+})
+
+const renderLocalIcon = computed(() => props.localIcon || !props.icon)
+</script>
+
+<template>
+  <template v-if="renderLocalIcon">
+    <svg aria-hidden="true" width="1em" height="1em" v-bind="bindAttrs">
+      <use :xlink:href="symbolId" fill="currentColor" />
+    </svg>
+  </template>
+  <template v-else>
+    <Icon v-if="icon" :icon="icon" v-bind="bindAttrs" />
+  </template>
+</template>

src/components/index.ts

@@ -0,0 +1,3 @@
+import SvgIcon from './SvgIcon.vue'
+
+export { SvgIcon }

src/icons/logo.svg

@@ -0,0 +1 @@
+<svg id="openai-symbol" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M29.71,13.09A8.09,8.09,0,0,0,20.34,2.68a8.08,8.08,0,0,0-13.7,2.9A8.08,8.08,0,0,0,2.3,18.9,8,8,0,0,0,3,25.45a8.08,8.08,0,0,0,8.69,3.87,8,8,0,0,0,6,2.68,8.09,8.09,0,0,0,7.7-5.61,8,8,0,0,0,5.33-3.86A8.09,8.09,0,0,0,29.71,13.09Zm-12,16.82a6,6,0,0,1-3.84-1.39l.19-.11,6.37-3.68a1,1,0,0,0,.53-.91v-9l2.69,1.56a.08.08,0,0,1,.05.07v7.44A6,6,0,0,1,17.68,29.91ZM4.8,24.41a6,6,0,0,1-.71-4l.19.11,6.37,3.68a1,1,0,0,0,1,0l7.79-4.49V22.8a.09.09,0,0,1,0,.08L13,26.6A6,6,0,0,1,4.8,24.41ZM3.12,10.53A6,6,0,0,1,6.28,7.9v7.57a1,1,0,0,0,.51.9l7.75,4.47L11.85,22.4a.14.14,0,0,1-.09,0L5.32,18.68a6,6,0,0,1-2.2-8.18Zm22.13,5.14-7.78-4.52L20.16,9.6a.08.08,0,0,1,.09,0l6.44,3.72a6,6,0,0,1-.9,10.81V16.56A1.06,1.06,0,0,0,25.25,15.67Zm2.68-4-.19-.12-6.36-3.7a1,1,0,0,0-1.05,0l-7.78,4.49V9.2a.09.09,0,0,1,0-.09L19,5.4a6,6,0,0,1,8.91,6.21ZM11.08,17.15,8.38,15.6a.14.14,0,0,1-.05-.08V8.1a6,6,0,0,1,9.84-4.61L18,3.6,11.61,7.28a1,1,0,0,0-.53.91ZM12.54,14,16,12l3.47,2v4L16,20l-3.47-2Z"/></svg>

src/main.ts

@@ -0,0 +1,22 @@
+import 'virtual:svg-icons-register'
+import './styles/css/tailwind.css'
+import './styles/less/global.less'
+
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import App from './App.vue'
+
+function injectMeta() {
+  const meta = document.createElement('meta')
+  meta.name = 'naive-ui-style'
+  document.head.appendChild(meta)
+}
+
+function bootstrap() {
+  const app = createApp(App)
+  injectMeta()
+  app.use(createPinia())
+  app.mount('#app')
+}
+
+bootstrap()

src/styles/css/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/styles/less/global.less

@@ -0,0 +1,5 @@
+html,
+body,
+#app {
+	height: 100%;
+}

src/typings/global.d.ts

@@ -0,0 +1,6 @@
+interface Window {
+  $loadingBar?: import('naive-ui').LoadingBarProviderInst;
+  $dialog?: import('naive-ui').DialogProviderInst;
+  $message?: import('naive-ui').MessageProviderInst;
+  $notification?: import('naive-ui').NotificationProviderInst;
+}

src/views/Chat/components/Message.vue

@@ -0,0 +1,31 @@
+<script setup lang='ts'>
+import { SvgIcon } from '@/components'
+
+interface Props {
+  user?: boolean
+  date?: string
+  message?: string
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div class="flex w-full mb-6" :class="[{ 'flex-row-reverse': user }]">
+    <div
+      class="flex items-center justify-center rounded-full overflow-hidden w-[32px] h-[32px]"
+      :class="[user ? 'ml-3' : 'mr-3']"
+    >
+      <img v-if="user" src="@/assets/avatar.jpg" class="object-cover w-full h-full " alt="avatar">
+      <SvgIcon v-else local-icon="logo" class="text-[26px]" />
+    </div>
+    <div class="flex flex-col text-sm" :class="[{ 'items-end': user }]">
+      <span class="text-xs text-[#b4bbc4]">
+        {{ date }}
+      </span>
+      <div class="p-2 mt-2 rounded-md" :class="[user ? 'bg-[#d2f9d1]' : 'bg-[#f4f6f8]']">
+        {{ message }}
+      </div>
+    </div>
+  </div>
+</template>

src/views/Chat/index.vue

@@ -0,0 +1,42 @@
+<script setup lang='ts'>
+import { NButton, NInput, NScrollbar } from 'naive-ui'
+import Message from './components/Message.vue'
+import { SvgIcon } from '@/components'
+</script>
+
+<template>
+  <div class="h-full p-4">
+    <div class="flex flex-col h-full overflow-hidden border rounded-md shadow-md">
+      <header class="flex items-center justify-between p-4">
+        <div>会话</div>
+        <div>&nbsp;</div>
+      </header>
+      <main class="flex-1 overflow-hidden border-y">
+        <div class="h-full">
+          <NScrollbar class="h-full p-4">
+            <div>
+              <Message date="10 hours ago" message="hello world" />
+              <Message date="10 hours ago" message="Reprehenderit ut voluptas sapiente ratione nostrum est." user />
+              <Message date="10 hours ago" message="hello world" />
+              <Message date="10 hours ago" message="Reprehenderit ut voluptas sapiente ratione nostrum est." user />
+              <Message date="10 hours ago" message="hello world" />
+              <Message date="10 hours ago" message="Reprehenderit ut voluptas sapiente ratione nostrum est." user />
+              <Message date="10 hours ago" message="hello world" />
+              <Message date="10 hours ago" message="Reprehenderit ut voluptas sapiente ratione nostrum est." user />
+              <Message date="10 hours ago" message="hello world" />
+              <Message date="10 hours ago" message="Reprehenderit ut voluptas sapiente ratione nostrum est." user />
+            </div>
+          </NScrollbar>
+        </div>
+      </main>
+      <footer class="p-4">
+        <div class="flex items-center justify-between space-x-2">
+          <NInput placeholder="Type a message" />
+          <NButton type="primary">
+            <SvgIcon icon="ri:send-plane-fill" />
+          </NButton>
+        </div>
+      </footer>
+    </div>
+  </div>
+</template>