refactor(home): 优化首页组件交互和样式
- 修改 Header组件中的文字描述 - 优化 Home 组件结构,添加场景组件引用和创建调查方法 -调整 Operating 组件,增加立即体验按钮和相关逻辑 - 优化 Scene 组件,添加轮播图显隐控制和方法暴露 - 调整 ProjectManage 组件中的智能助手相关逻辑
This commit is contained in:
Binary file not shown.
|
Before Width: | Height: | Size: 1001 B After Width: | Height: | Size: 664 B |
BIN
src/assets/img/home/xiegang.png
Normal file
BIN
src/assets/img/home/xiegang.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 755 B |
@@ -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
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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([
|
||||
|
||||
Reference in New Issue
Block a user