From e295922209fb87c6dcd68ea1560fd16c3e6d808c Mon Sep 17 00:00:00 2001
From: dongyukun <1208714201@qq.com>
Date: 星期五, 27 六月 2025 09:36:51 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/feature/ai'
---
src/views/ai/write/index/components/Right.vue | 120 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 120 insertions(+), 0 deletions(-)
diff --git a/src/views/ai/write/index/components/Right.vue b/src/views/ai/write/index/components/Right.vue
new file mode 100644
index 0000000..d0aada5
--- /dev/null
+++ b/src/views/ai/write/index/components/Right.vue
@@ -0,0 +1,120 @@
+<template>
+ <el-card class="my-card h-full">
+ <template #header>
+ <h3 class="m-0 px-7 shrink-0 flex items-center justify-between">
+ <span>预览</span>
+ <!-- 展示在右上角 -->
+ <el-button color="#846af7" v-show="showCopy" @click="copyContent" size="small">
+ <template #icon>
+ <Icon icon="ph:copy-bold" />
+ </template>
+ 复制
+ </el-button>
+ </h3>
+ </template>
+
+ <div ref="contentRef" class="hide-scroll-bar h-full 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>
+ </el-card>
+</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;
+ }
+}
+
+.my-card {
+ display: flex;
+ flex-direction: column;
+
+ :deep(.el-card__body) {
+ box-sizing: border-box;
+ flex-grow: 1;
+ overflow-y: auto;
+ padding: 0;
+ @extend .hide-scroll-bar;
+ }
+}
+</style>
--
Gitblit v1.9.3