chore: version 2.7.3 (#120)

* fix: 用户输入也被渲染的问题 (#117) * fix: 用户输入不转换 * feat: 基础深色模式适配 * feat: 主题模式跟随系统 * feat: 深色适配补漏 * chore: version 2.7.3
2023-02-25 00:19:13 +08:00
parent abbdcf9c51
commit cc91e95eed
25 changed files with 1285 additions and 51 deletions
--- a/src/views/chat/components/Message/Avatar.vue
+++ b/src/views/chat/components/Message/Avatar.vue
@@ -8,9 +8,9 @@ defineProps<Props>()

 <template>
  <img v-if="image" src="@/assets/avatar.jpg" class="object-cover w-full h-full " alt="avatar">
-  <span v-else class="text-[27px]">
+  <span v-else class="text-[27px] dark:text-white">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" width="1em" height="1em">
-      <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" />
+      <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" fill="currentColor" />
    </svg>
  </span>
 </template>
--- a/src/views/chat/components/Message/Text.vue
+++ b/src/views/chat/components/Message/Text.vue
@@ -26,25 +26,27 @@ const wrapClass = computed(() => {
    'min-w-[20px]',
    'rounded-md',
    props.inversion ? 'bg-[#d2f9d1]' : 'bg-[#f4f6f8]',
+    props.inversion ? 'dark:bg-[#a1dc95]' : 'dark:bg-[#1e1e20]',
    { 'text-red-500': props.error },
  ]
 })

 const text = computed(() => {
-  if (props.text)
+  if (props.text && !props.inversion)
    return marked(props.text)
-  return ''
+  return props.text
 })
 </script>

 <template>
-  <div :class="wrapClass">
+  <div class="text-black" :class="wrapClass">
    <template v-if="loading">
-      <span class="w-[5px] h-[20px] block animate-blink" />
+      <span class="dark:text-white w-[4px] h-[20px] block animate-blink" />
    </template>
    <template v-else>
      <div class="leading-relaxed break-all">
-        <div :class="[{ 'markdown-body': !inversion }]" v-html="text" />
+        <div v-if="!inversion" class="markdown-body" v-html="text" />
+        <div v-else v-text="text" />
      </div>
    </template>
  </div>
--- a/src/views/chat/components/Message/index.vue
+++ b/src/views/chat/components/Message/index.vue
@@ -31,9 +31,9 @@ function handleRegenerate() {
 </script>

 <template>
-  <div class="flex w-full mb-6" :class="[{ 'flex-row-reverse': inversion }]">
+  <div class="flex w-full mb-6 overflow-hidden" :class="[{ 'flex-row-reverse': inversion }]">
    <div
-      class="flex items-center justify-center rounded-full overflow-hidden w-[32px] h-[32px]"
+      class="flex items-center justify-center rounded-full overflow-hidden flex-shrink-0 w-[32px] h-[32px]"
      :class="[inversion ? 'ml-3' : 'mr-3']"
    >
      <AvatarComponent :image="inversion" />
@@ -42,7 +42,10 @@ function handleRegenerate() {
      <span class="text-xs text-[#b4bbc4]">
        {{ dateTime }}
      </span>
-      <div class="flex items-end gap-2 mt-2" :class="[inversion ? 'flex-row-reverse' : 'flex-row']">
+      <div
+        class="flex items-end gap-2 mt-2"
+        :class="[inversion ? 'flex-row-reverse' : 'flex-row']"
+      >
        <TextComponent
          :inversion="inversion"
          :error="error"
@@ -52,13 +55,13 @@ function handleRegenerate() {
        <div class="flex flex-col">
          <button
            v-if="!inversion"
-            class="mb-2 transition text-neutral-400 hover:text-neutral-800"
+            class="mb-2 transition text-neutral-400 hover:text-neutral-800 dark:hover:text-neutral-200"
            @click="handleRegenerate"
          >
            <SvgIcon icon="ri:restart-line" />
          </button>
          <button
-            class="mb-1 transition text-neutral-400 hover:text-neutral-800"
+            class="mb-1 transition text-neutral-400 hover:text-neutral-800 dark:hover:text-neutral-200"
            @click="handleDelete"
          >
            <SvgIcon icon="ri:delete-bin-6-line" />
--- a/src/views/chat/components/Message/style.less
+++ b/src/views/chat/components/Message/style.less
@@ -20,3 +20,12 @@
 		background-color: #fff;
 	}
 }
+
+.dark{
+	.markdown-body{
+		.highlight pre,
+		pre {
+			background-color: #18181c;
+		}
+	}
+}