refactor(home): 优化首页组件交互和样式

- 修改 Header组件中的文字描述
- 优化 Home 组件结构,添加场景组件引用和创建调查方法
-调整 Operating 组件,增加立即体验按钮和相关逻辑
- 优化 Scene 组件,添加轮播图显隐控制和方法暴露
- 调整 ProjectManage 组件中的智能助手相关逻辑
This commit is contained in:
du.meimei
2025-05-19 17:53:31 +08:00
parent 719c67b388
commit f74d854e60
7 changed files with 95 additions and 31 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1001 B

After

Width:  |  Height:  |  Size: 664 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 755 B

View File

@@ -2,8 +2,8 @@
<div>
<div class="home-body">
<Header></Header>
<Scene></Scene>
<Operating></Operating>
<Scene ref="sceneRef"></Scene>
<Operating @create-survey="handleCreateSurvey"></Operating>
<LaunchIntro></LaunchIntro>
<Models></Models>
</div>
@@ -16,6 +16,7 @@ import Scene from './components/Scene.vue';
import Operating from './components/Operating.vue'
import LaunchIntro from './components/LaunchIntro.vue'
import Models from './components/Models.vue'
import { ref } from 'vue'
export default {
name: 'Home',
components: {
@@ -26,8 +27,20 @@ export default {
Models
},
setup() {
return {
const sceneRef = ref(null);
// 处理创建问卷的方法
const handleCreateSurvey = (sceneObj, index) => {
// 调用 Scene 组件的 createScene 方法
if (sceneRef.value) {
console.log(sceneRef.value);
sceneRef.value.createScene(sceneObj, index);
}
};
return {
sceneRef,
handleCreateSurvey
}
},
}

View File

@@ -8,7 +8,7 @@
<p class="banner-block-slogan">实时链接消费者的深度洞察日常信息采集工具</p>
<div class="banner-block-desc">
已支持 <CountTo :end="surveyStats.user_count" :use-comma="true" /> 用户 |
发起 <CountTo :end="surveyStats.survey_count" :use-comma="true" /> 次调研 |
发起 <CountTo :end="surveyStats.survey_count" :use-comma="true" /> 次调研 |
有效回收 <CountTo :end="surveyStats.sample_count" :use-comma="true" /> 份数据
</div>
</div>

View File

@@ -5,7 +5,7 @@
<p class="desc">创建编辑投放分析让洞察更简单</p>
</div>
<div>
<el-carousel :autoplay="true" :interval="5000" arrow="always" indicator-position="none">
<el-carousel :autoplay="true" :interval="10000" arrow="always" indicator-position="none">
<el-carousel-item v-for="(item,index) in operatingList" :key="item" >
<div class="flex" style="justify-content: space-around">
<div >
@@ -14,9 +14,7 @@
<span class="fs-36">
{{index+1}}
</span>
<span class="fs-34">
/
</span>
<img src="@/assets/img/home/xiegang.png" alt="">
<span>
{{operatingList.length}}
</span>
@@ -35,6 +33,7 @@
</span>
</li>
</ul>
<a-button type="primary" @click="toSurveyInfo(item,index)">立即体验</a-button>
</div>
<div>
<img src="@/assets/logic-edit.png" alt="" style="height: 300px">
@@ -47,12 +46,13 @@
</div>
</template>
<script setup>
import {ref} from 'vue'
import {ref, onMounted} from 'vue'
import { useRouter } from 'vue-router';
import { getQueryUserSurvey } from '@/api/home';
import { useStore } from 'vuex';
const router = useRouter();
const emit = defineEmits(['create-survey']);
const operatingList = ref([{
title: '多种方式',
desc:'快速创建问卷',
@@ -69,37 +69,52 @@ const operatingList = ref([{
'30+专业题型及模型题组,多种逻辑适配各类场景','AI多维度问卷质检快速识别问题提供建议',
'多种主题、九宫格抽奖, 自定义问卷风格', '多人协作编辑,便捷协同快捷高效'
],
btnColor:'green'
btnColor:'green',
key:'design'
},{
title: '精准触达',
desc:'投放轻松高效',
descList:[
'多元样本资源精准圈选,在线一站式投放','标准链接及二维码,问卷快捷私发群发','自定义链接参数,记录多渠道样本来源','回收进度、配额进度在线实时追踪'
],
btnColor:'green'
btnColor:'green',
key:'accurate'
},{
title: '数据分析',
desc:'多种维度洞察',
descList:[
'AI数据清洗无效数据在线剔除','AI智能总结调研结论一键洞察','专业模型看板,直达分析结论','个性化交叉分析,多维数据挖掘'
],
btnColor:'green'
btnColor:'green',
key:'particulars'
}])
const toSurveyInfo = async () => {
const toSurveyInfo = async (item,index) => {
let res = await getQueryUserSurvey()
console.log(res);
if (res.data.flag){
await router.push({
path: '/survey/planet/design',
query: { sn: res.data.sn }
});
const {sn} = res.data
const urlJson = {
design: `/survey/planet/design?sn=${sn}`,
accurate: `/survey/publish/accurate?sn=${sn}`,
particulars: `/survey/analyse/diagram?sn=${sn}`,
};
if (index === 0){
// 在第 101 行通过事件通知父组件调用 Scene.vue 文件的 createScene 方法
const sceneObj = {
title: '智能创建',
description: 'AI随行调研随心',
value: 1
};
// 通过事件向父组件发送信号,让父组件调用 Scene 组件的 createScene 方法
emit('create-survey', sceneObj, 0);
}else{
if (res.data.flag){
await router.push({
path: urlJson[item.key],
query: {
sn,
}
});
}
}
// router.push({
// name: 'SurveyInfo',
// query: {
// id: 1
// }
// })
}
</script>
@@ -119,6 +134,7 @@ li{
}
.operating-container{
margin-top: 20px;
margin-bottom: 60px;
&>div:first-child {
text-align: center;
}
@@ -130,7 +146,9 @@ li{
}
.operating-item{
.progress{
letter-spacing: -4px;
display: flex;
align-items: baseline;
letter-spacing: 1px;
& :nth-child(1){
color: #70B937;
font-size: 45px;

View File

@@ -36,7 +36,9 @@
</div>
</div>
</div>
<create ref="createRef" style="width: 1px;height: 1px;position: fixed"></create>
<create ref="createRef"
style="width: 1px;height: 0;position: fixed"
@update:ai-assistant-visible="getValue"></create>
</div>
</template>
@@ -99,7 +101,9 @@ const getSceneList=()=>{
const createScene = (scene,index)=>{
if (index === 0 || index === 1 || index === 2){
if (createRef.value) {
createRef.value.createCustom(scene.value)
// 检查 scene 是否有 value 属性,如果没有则直接使用 scene
const sceneData = scene.value !== undefined ? scene.value : scene;
createRef.value.createCustom(sceneData)
}
}else{
if (createRef.value) {
@@ -107,6 +111,27 @@ const createScene = (scene,index)=>{
}
}
}
/**
* 轮播图设置显隐
* @param val
*/
const getValue = (val) => {
// 获取元素并转换为数组
const containers = Array.from(document.getElementsByClassName('el-carousel__container'))
const indicators = Array.from(document.getElementsByClassName('el-carousel__indicators'))
const allElements = [...containers, ...indicators]
allElements.forEach(item => {
if (item) {
item.style.zIndex = val ? '-1' : 'unset'
}
})
}
// 使用 defineExpose 显式暴露方法,使其可以被外部组件通过 ref 访问
defineExpose({
createScene
})
</script>
<style scoped lang="scss">
@@ -137,6 +162,7 @@ p{
min-width: 183px;
//height: 118px;
//min-height: 118px;
min-height: 125px;
margin-right: 10px;
background: #fff;
border: 1px solid #EBEBEB;

View File

@@ -246,7 +246,9 @@ import {
computed,
defineProps,
nextTick,
onBeforeUpdate
onBeforeUpdate,
watch,
defineEmits
} from 'vue';
import { message, Modal } from 'ant-design-vue';
import { getSceneList } from '@/views/ProjectManage/api';
@@ -274,6 +276,8 @@ import ConceptTest from '@/views/ProjectManage/create/presets/concept/ConceptTes
import TasteTest from './presets/taste/TasteTest.vue';
import PackageTest from './presets/package/PackageTest.vue';
import { tr } from 'element-plus/lib/locale';
// 定义 emit 事件
const emit = defineEmits(['update:aiAssistantVisible']);
import { aiAssistantUrl } from '@/config';
// 获取 token
@@ -381,7 +385,7 @@ onMounted(() => {
const showModal = searchParams.get('showModal');
if (showModal && showModal === 'aiAssistant') {
// 显示智能创建助手弹框
aiAssistantVisible.value = true;
// aiAssistantVisible.value = true;
}
/** add by zhangweiwei 20250331_ai 智能创建助手 end */
}
@@ -393,7 +397,10 @@ onBeforeUnmount(() => {
window.removeEventListener('resize', calculateCount);
// document.addEventListener('click', listenClickEvent);
});
// 监听 aiAssistantVisible 变化并通知父组件
watch(aiAssistantVisible, (newVal) => {
emit('update:aiAssistantVisible', newVal);
});
const scenes = ref([]);
const customTypes = ref([