feat: 调整消息布局以便扩展

xubodreamsky · Feb 13, 2023 · 73c9ac4 · 73c9ac4
1 parent 727562f
commit 73c9ac4
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 7 deletions.
diff --git a/src/components/business/Chat/components/Message/Text.vue b/src/components/business/Chat/components/Message/Text.vue
@@ -1,5 +1,15 @@
+<script lang="ts" setup>
+interface Props {
+ reversal?: boolean
+}
+
+defineProps<Props>()
+</script>
+
 <template>
- <span class="leading-relaxed whitespace-pre-wrap">
- <slot />
- </span>
+ <div class="p-2 mt-2 rounded-md" :class="[reversal ? 'bg-[#d2f9d1]' : 'bg-[#f4f6f8]']">
+ <span class="leading-relaxed whitespace-pre-wrap">
+ <slot />
+ </span>
+ </div>
 </template>
diff --git a/src/components/business/Chat/components/Message/index.vue b/src/components/business/Chat/components/Message/index.vue
@@ -23,9 +23,9 @@ defineProps<Props>()
  <span class="text-xs text-[#b4bbc4]">
  {{ dateTime }}
  </span>
- <div class="p-2 mt-2 rounded-md" :class="[reversal ? 'bg-[#d2f9d1]' : 'bg-[#f4f6f8]']">
- <Text>{{ message }}</Text>
- </div>
+ <Text :reversal="reversal">
+ {{ message }}
+ </Text>
  </div>
  </div>
 </template>
diff --git a/src/components/business/Chat/index.vue b/src/components/business/Chat/index.vue
@@ -92,7 +92,7 @@ function addMessage(message: string, reversal = false) {
  <div class="flex items-center justify-between space-x-2">
  <HoverButton tooltip="Clear conversations" @click="handleClear">
  <span class="text-xl text-[#4f555e]">
- <SvgIcon icon="ri:refresh-line" />
+ <SvgIcon icon="ri:delete-bin-line" />
  </span>
  </HoverButton>
  <NInput v-model:value="prompt" placeholder="Type a message..." @keypress="handleEnter" />