109 lines
3.5 KiB
Vue
109 lines
3.5 KiB
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>
|