xiangyuan-app/src/pages/home/chat/dependent/post/components/tbutton.vue

<template>
  <BubbleBox 
    ref="bubbleBoxRef"
    trigger="none"
    position="left"
    backgroundColor="rgba(0,0,0,0.9)"
    :innerProps="{
      width: '400rpx',
    }"
  >
    <template #content>
      <FlexRow align="center" gap="gap.md">
        <Text :text="currentTipContent" fontConfig="contentText" color="white" touchable @click="openAiWindow" />
        <IconButton icon="close" @click="hideTip" />
      </FlexRow>
    </template>
    <Button icon="https://xy.wenlvti.net/app_static/images/village/IconAi.png" @click="openAiWindow">
      AI帮你写
    </Button>
  </BubbleBox>
</template>

<script setup lang="ts">
import Button from '@/components/basic/Button.vue';
import IconButton from '@/components/basic/IconButton.vue';
import Text from '@/components/basic/Text.vue';
import BubbleBox from '@/components/feedback/BubbleBox.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import { onMounted, ref } from 'vue';

const props = defineProps<{
  title: string;
  content: string;
  images: {
    url: string;
    localUrl: string;
  }[];
}>();

const emit = defineEmits([ 'showAi' ]);

/**
 * 能助手提示：
 * 0. 监听编辑器内容  
 * 1. 当用户进入后，长时间 15s 没有内容变更，则触发 "不知道怎么写？来和我讨论灵感吧"
 * 2. 当用户上传图片后，则触发 “让我来为你根据素材智能编写吧”
 * 
 * 3. 用户已写一段文字，防抖，一段时间内触发 
 * “灵感枯竭？让我来为你拓展文化选题”
 * "让我来为你润色文稿叙述更优雅动人"
 * "让我来为你校对纠错精准修正文史细节"
 * 
 */

const bubbleBoxRef = ref<InstanceType<typeof BubbleBox>>();
const currentTipContent = ref('');

function hideTip() {
  bubbleBoxRef.value?.hide();
}
function showTip(message: string) {
  currentTipContent.value = message;
  bubbleBoxRef.value?.show();
}
function openAiWindow() {
  emit('showAi', currentTipContent.value);
  hideTip();
}

onMounted(() => {
  setTimeout(() => {
    showTip('不知道怎么写？让我来帮你吧');
  }, 1000);
})
</script>