【代码评审】写作：生成部分

2024-07-10 12:49:54 +08:00
parent e53786e8bd
commit ece1533436
7 changed files with 47 additions and 45 deletions
--- a/src/views/ai/writer/index/components/Right.vue
+++ b/src/views/ai/writer/index/components/Right.vue
@ -0,0 +1,105 @@
+<template>
+  <div class="h-full box-border flex flex-col px-7">
+    <h3 class="m-0 h-14 -mx-7 px-7 shrink-0 flex items-center justify-between bg-[#ecedef]">
+      <span>预览</span>
+      <!-- 展示在右上角 -->
+      <el-button color="#846af7" v-show="showCopy" @click="copyContent" size="small">
+        <template #icon>
+          <Icon icon="ph:copy-bold" />
+        </template>
+        复制
+      </el-button>
+    </h3>
+
+    <div ref="contentRef" class="hide-scroll-bar flex-grow box-border overflow-y-auto">
+      <div class="w-full min-h-full relative flex-grow bg-white box-border p-3 sm:p-7">
+        <!-- 终止生成内容的按钮 -->
+        <el-button
+          v-show="isWriting"
+          class="absolute bottom-2 sm:bottom-5 left-1/2 -translate-x-1/2 z-36"
+          @click="emits('stopStream')"
+          size="small"
+        >
+          <template #icon>
+            <Icon icon="material-symbols:stop" />
+          </template>
+          终止生成
+        </el-button>
+        <el-input
+          id="inputId"
+          type="textarea"
+          v-model="compContent"
+          autosize
+          :input-style="{ boxShadow: 'none' }"
+          resize="none"
+          placeholder="生成的内容……"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useClipboard } from '@vueuse/core'
+
+const message = useMessage() // 消息弹窗
+const { copied, copy } = useClipboard() // 粘贴板
+
+const props = defineProps({
+  content: {
+    // 生成的结果
+    type: String,
+    default: ''
+  },
+  isWriting: {
+    // 是否正在生成文章
+    type: Boolean,
+    default: false
+  }
+})
+
+const emits = defineEmits(['update:content', 'stopStream'])
+
+/** 通过计算属性，双向绑定，更改生成的内容，考虑到用户想要更改生成文章的情况 */
+const compContent = computed({
+  get() {
+    return props.content
+  },
+  set(val) {
+    emits('update:content', val)
+  }
+})
+
+/** 滚动 */
+const contentRef = ref<HTMLDivElement>()
+defineExpose({
+  scrollToBottom() {
+    contentRef.value?.scrollTo(0, contentRef.value?.scrollHeight)
+  }
+})
+
+/** 点击复制的时候复制内容 */
+const showCopy = computed(() => props.content && !props.isWriting) // 是否展示复制按钮，在生成内容完成的时候展示
+const copyContent = () => {
+  copy(props.content)
+}
+
+/** 复制成功的时候 copied.value 为 true */
+watch(copied, (val) => {
+  if (val) {
+    message.success('复制成功')
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.hide-scroll-bar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+}
+</style>