lingji-work-fe/src/views/home/index.vue

<script lang="tsx">
import HistoryConversationDrawer from './components/history-conversation-drawer';
import { Sender } from 'ant-design-x-vue';
import { message } from 'ant-design-vue';
import ExpandableTags from '@/components/expandable-tags';

import { useSharedDataStore } from '@/stores/modules/share-data';

export default {
  setup(props, { emit, expose }) {
    const historyConversationDrawerRef = ref(null);
    const senderRef = ref(null);
    const searchValue = ref('');
    const sharedDataStore = useSharedDataStore();

    const handleSubmit = () => {
      handleSearch();
      searchValue.value = '';
    };

    const handleSearch = () => {
      message.info('handleSearch----' + searchValue.value);
    };

    const tagList = [
      '人工智能',
      '人工智能与应用',
      '行业分析与市场数据',
      '标签标签标签标签标签标签标签',
      '标签标签标签标签标签标签标签',
      '标签标签标签标签标签标签标签',
      '标签标签标签标签标签标签标签',
      '标签A',
      '啊啊啊',
      '宝宝贝贝',
      '微信',
      '吧啊啊',
      '哦哦哦哦哦哦哦哦',
      '人工智能',
      '人工智能与应用',
    ];

    const handleTagClick = (tag: string) => {
      searchValue.value = tag;
      handleSearch();
      senderRef.value?.focus();
    };

    onMounted(() => {
      const params = sharedDataStore.routeParams;
      if (params) {
        searchValue.value = params.keyWord;
        sharedDataStore.clearRouteParams();

        handleSearch();
        senderRef.value?.focus();
      }
    });

    return () => (
      <div class="home-wrap rounded-12px w-full h-full">
        <div class="w-full h-full flex justify-center ">
          <div class="main-chat-wrap w-600px pt-120px">
            <p class="title mb-16px">
              <span>营小智，7x24小时</span>
              <span class="s1">AI营销</span>
              <span>团队</span>
            </p>
            <p class="cts  text-center mb-104px">AI 辅助账号托管账号 ｜ 自动生成爆款内容 ｜ 定时任务发布</p>
            <Sender
              v-model:value={searchValue.value}
              ref={senderRef}
              onSubmit={handleSubmit}
              class="h-120px w-full mb-24px"
              placeholder="随时告诉我你想做什么，比如查数据、发任务、写内容，我会立刻帮你完成。"
              actions={() => (
                <div
                  onClick={handleSubmit}
                  class={`submit-btn w-32px h-32px p-6px flex justify-center items-center rounded-50% cursor-pointer ${
                    !searchValue.value ? 'opacity-50' : ''
                  }`}
                >
                  <icon-arrow-right size={20} class="color-#FFFFFF" />
                </div>
              )}
            />
            <p class="cts mb-6px">可以试试这样下发任务：</p>
            <ExpandableTags tags={tagList} clickable onTagClick={handleTagClick} />
          </div>
        </div>

        {/**历史对话入口 */}
        <div
          class="history-conversation-btn cursor-pointer bg-#fff flex flex-col justify-center w-28px px-10px py-8px"
          onClick={() => historyConversationDrawerRef.value.showDrawer()}
        >
          <span class="s1">历史对话</span>
        </div>
        <HistoryConversationDrawer ref={historyConversationDrawerRef} />
      </div>
    );
  },
};
</script>

<style lang="scss" scoped>
@import './style.scss';
</style>