aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新用户指引

Browse Source
This commit is contained in:
X1627315083
2023-12-08 16:27:35 +08:00
parent ec21fd1ff1
commit 4f62c4c2d3
12 changed files with 421 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/assets/style/style.css
View File

@@ -159,15 +159,44 @@ li {
.el-cascader__collapse-tag .el-cascader__collapse-tag .el-tag--light {
display: flex !important;
}
.hideEvents* {
.hideEvents {
pointer-events: none !important;
}
.hideEvents * {
pointer-events: none !important;
}
.Guide_ {
pointer-events: auto !important;
overflow-y: initial !important;
}
.Guide_.showEvents * {
pointer-events: auto !important;
}
.Guide_.showEvents .hideEvents {
pointer-events: none !important;
}
.Guide_.showEvents .hideEvents * {
pointer-events: none !important;
}
.Guide_ .Guide_active {
box-shadow: 0px 0px 13px #ff5f5f;
animation: identifier 1s infinite linear;
display: block !important;
}
@keyframes identifier {
0% {
box-shadow: none;
}
50% {
box-shadow: 0px 0px 13px #ff5f5f;
}
100% {
box-shadow: none;
}
}
:not(body):has(>.driver-active-element) {
overflow: initial !important;
}
.delete_like_file_block {
display: none;
width: 2.5rem;
@@ -311,6 +340,17 @@ li {
top: auto;
margin: 0 9rem;
}
.ant-modal-confirm-confirm .ant-modal-content {
border-radius: 1rem;
}
.ant-modal-confirm-confirm .ant-modal-content .ant-modal-body .ant-modal-confirm-btns {
width: 100%;
display: flex;
justify-content: center;
}
.ant-modal-confirm-confirm .ant-modal-content .ant-modal-body .ant-modal-confirm-btns .ant-btn-primary {
margin-left: 10rem;
}
.modal_component.ant-modal {
top: 0;
}

47
src/assets/style/style.less
View File

@@ -174,14 +174,15 @@ ul,li{
}
}
.hideEvents{
&*{
pointer-events:none !important;
*{
pointer-events:none !important;
}
}
.Guide_{
pointer-events:auto !important;
overflow-y: initial !important;
&.showEvents{
*{
pointer-events:auto !important;
@@ -189,9 +190,34 @@ ul,li{
// .select_img_type{
// overflow: initial !important;
// }
.hideEvents{
pointer-events:none !important;
*{
pointer-events:none !important;
}
}
}
.Guide_active{
box-shadow: 0px 0px 13px rgb(255, 95, 95);
animation: identifier 1s infinite linear;
display: block !important;
@keyframes identifier {
0% {
box-shadow: none;
}
50% {
box-shadow: 0px 0px 13px rgb(255, 95, 95);
}
100% {
box-shadow: none;
}
}
}
}
:not(body):has(>.driver-active-element){
overflow: initial !important;
}
//爱心
.delete_like_file_block{
display: none;
@@ -366,6 +392,21 @@ ul,li{
}
}
}
.ant-modal-confirm-confirm{
.ant-modal-content{
border-radius: 1rem;
.ant-modal-body{
.ant-modal-confirm-btns{
width: 100%;
display: flex;
justify-content: center;
.ant-btn-primary{
margin-left: 10rem;
}
}
}
}
}
.modal_component{
&.ant-modal{

2
src/component/Detail/DesignDetail.vue
View File

@@ -362,7 +362,7 @@ export default defineComponent({
if(this.driver__.driver){
nextTick().then(()=>{
// driverObj__.moveNext();
driverObj__.moveTo(21);
driverObj__.moveTo(41);
})
}
}

58
src/component/Detail/habit.vue
View File

@@ -5,7 +5,7 @@
{{ $t('Habit.Workspace') }}
<i class="fi fi-bs-angle-down"></i>
</div>
<div class="habit_content" v-fade="openType.habit">
<div class="habit_content Guide_1_28" :class="[driver__.driver?'showEvents':'']" v-fade="openType.habit">
<div class="habit_title">
<h3>{{ $t('Habit.WorkspaceSetting') }}</h3>
<div class="habit_intro">{{ $t('Habit.settingWorkspace') }}</div>
@@ -35,7 +35,7 @@
</ul>
</div>
</div>
<div class="habit_Overal_Single">
<div class="habit_Overal_Single" :class="[driver__.driver?'Guide_active':'']">
<a-dropdown @click.stop="setOpenType('sex')">
<a-button>
<UserOutlined />
@@ -95,7 +95,7 @@
<div class="habit_System_Designer_text">{{ $t('Habit.Designer') }}</div>
</div>
</div>
<div class="habit_model Guide_1_28">
<div class="habit_model" :class="[driver__.driver?'Guide_active':'']">
<a-dropdown placement="bottomRight"
trigger="['click']"
@click.stop="setOpenType('model')"
@@ -183,7 +183,7 @@ export default defineComponent({
})
let mannequins:any = ref([{},{}])
let systemSeleves= ref(false);
let openType = ref({
let openType:any = ref({
workspace:false,
singleton:false,
habit:false,
@@ -235,6 +235,14 @@ export default defineComponent({
}
}
},
driver__:{
handler(newVal:any,oldVal:any){
if(newVal.index>=4){
this.openType.habit = false
}
}
},
'workspaceItem.id_':{
handler(newVal:any,oldVal:any){
this.workspace.workspaceList.forEach((v:any)=>{
@@ -270,12 +278,22 @@ export default defineComponent({
// })
}
},
'workspaceItem.sex':{
'workspaceItem.overallSingle':{
handler(newVal:any,oldVal:any){
// console.log(this.workspaceItem);
if(this.driver__.driver){
driverObj__.refresh();
}
}
},
// 'openType.model':{
// handler(newVal:any,oldVal:any){
// if(this.driver__.driver){
// console.log(213);
// driverObj__.refresh();
// }
// }
// },
workspaceItem:{
handler(newVal:any,oldVal:any){
this.store.commit("setWorkspace", this.workspaceItem);
@@ -565,14 +583,17 @@ export default defineComponent({
this.workspaceItem.mannequinMaleType = str
this.workspaceItem.mannequinMaleId = item.id
}
if(id != item.id){
if(this.driver__.driver){
this.openType.habit = false
nextTick().then(()=>{
driverObj__.moveNext();
})
}
// if(id != item.id){
if(this.driver__.driver){
// this.openType.habit = false
nextTick().then(()=>{
driverObj__.moveTo(2);
this.openType.model = false
// driverObj__.moveNext();
})
}
// }
this.workspaceItem.mannequinUrl = item.presignedUrl
this.workspaceItem.mannequinType = str
this.workspaceItem.mannequinId = item.id
@@ -594,8 +615,8 @@ export default defineComponent({
this.openType.habit = !this.openType.habit
if(this.driver__.driver){
nextTick().then(()=>{
// driverObj__.moveNext();
driverObj__.moveTo(29);
driverObj__.moveNext();
// driverObj__.moveTo(29);
})
}
@@ -612,9 +633,10 @@ export default defineComponent({
this.openType.sex = false
this.openType.model = !this.openType.model
this.getMannequins()
if(this.driver__.driver){
if(this.driver__.driver && this.openType.model){
nextTick().then(()=>{
driverObj__.moveNext();
driverObj__.moveTo(3);
// driverObj__.moveNext();
})
}
}else if(v == 'singleton'){

3
src/component/HomePage/Cropper.vue
View File

@@ -1,6 +1,5 @@
<template>
<a-modal class="modal_component cut_pricture_modal Guide_1_2_2"
:class="[driver__.driver?'showEvents':'']"
<a-modal class="modal_component cut_pricture_modal"
v-model:visible="cutPicuterModal"
:footer="null"
width="65%"

77
src/component/HomePage/Generate.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="generate">
<div v-if="type_.type2 == 'Sketchboard'|| type_.type2 == 'Printboard'" class="generate_checkbox">
<div v-if="type_.type2 == 'Sketchboard'|| type_.type2 == 'Printboard'" class="generate_checkbox Guide_1_2_2" :class="[driver__.driver?'hideEvents':'']">
<div>
<label>
<input
@@ -12,7 +12,9 @@
</label>
</div>
<div>
<label>
<label
:class="[driver__.driver ? driver__.index == 29?'showEvents':'':'',type_.type2 == 'Sketchboard'?'Guide_1_9_1':'']"
>
<input
type="checkbox"
v-model="checkbox[1].type"
@@ -22,7 +24,7 @@
</label>
</div>
<div>
<label>
<label class="Guide_1_2_3" :class="[driver__.driver?'showEvents':'']">
<input
type="checkbox"
v-model="checkbox[2].type"
@@ -32,8 +34,8 @@
</label>
</div>
<div v-if="type_.type2 == 'Printboard'" class="printModel">
<div @click.stop="PrintModel">{{ printModel.name }}</div>
<ul v-show="printModel.optype">
<div @click.stop="PrintModel" class="Guide_1_2_4" :class="[driver__.driver?'showEvents':'']">{{ printModel.name }}</div>
<ul v-show="printModel.optype" class="Guide_1_2_5" :class="[driver__.driver?'showEvents':'']">
<li class="printModel_item" @click="setprintModel(1)">{{ $t('Generate.Model1') }}</li>
<li class="printModel_item" @click="setprintModel(2)">{{ $t('Generate.Model2') }}</li>
<li v-show="printBoards.length >= 1" class="printModel_item" @click="setprintModel(3)">{{ $t('Generate.Generate') }}</li>
@@ -51,16 +53,15 @@
/>
<div class="generage_btn started_btn" @click.stop="getgenerate">{{ $t('Generate.Generate') }}</div>
<span>{{ $t('Generate.maximumLength') }}</span>
</div>
<div v-if="type_.type2 == 'Sketchboard' || type_.type2 == 'Printboard'" class="generage_img Guide_1_6">
<div class="upload_item">
<div
class="upload_file_item"
class="upload_file_item Guide_1_2_7"
v-for="(file, index) in sketchboardList"
:key="file"
@click.stop="setSketchboardItem(file)"
:class="[file?.checked?'active':'',checkboxImage? 'forbidden':'']"
:class="[file?.checked?'active':'',checkboxImage? 'forbidden':'',driver__.driver?'showEvents':'']"
>
<div
class="upload_file_item_content"
@@ -122,8 +123,8 @@
</div>
</div>
<div
class="upload_file_item upload_component"
v-show="sketchboardList.length != 8"
class="upload_file_item upload_component Guide_1_2_6"
:class="[driver__.driver?'showEvents':'']"
>
<a-upload
:action="uploadUrl + '/api/element/upload'"
@@ -136,13 +137,11 @@
v-model:file-list="sketchboardList"
:before-upload="beforeUpload"
multiple
:maxCount="8 - sketchboardList.length"
accept=".jpg,.png,.jpeg,.bmp"
@change="(file) => fileUploadChange(file)"
>
<div
class="upload_tip_block"
v-show="sketchboardList.length != 8"
>
<i class="fi fi-br-upload"></i>
<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
@@ -157,24 +156,23 @@
v-for="(item, index) in fileList"
:key="item.imgUrl"
@click="generageAdd(item)"
:class="[item?.checked?'active':'',driver__.driver?'hideEvents':'']"
:class="[item?.checked?'active':'']"
>
<img v-lazy="item.imgUrl" alt="" />
<div
class="delete_like_file_block"
:class="[driver__.driver?'hideEvents':'']"
>
<i v-if="!item.like" class="fi fi-rr-heart" @click.stop="likeFile(item,'like')"></i>
<i v-else class="fi fi-sr-heart" @click.stop="likeFile(item,'noLike')"></i>
</div>
<div class="delete_like_file_block left">
<div class="delete_like_file_block left" :class="[driver__.driver?'hideEvents':'']">
<i class="fi fi-bs-expand-arrows-alt" @click.stop="scaleImage()"></i>
</div>
</div>
</div>
<scaleImage ref="scaleImage"></scaleImage>
<scaleImage ref="scaleImage"></scaleImage>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</div>
@@ -203,11 +201,11 @@ export default defineComponent({
let checkbox = ref([
{
name: "image",
type: false,
type: true,
},
{
name: "text",
type: true,
type: false,
},
{
name: "text-image",
@@ -317,6 +315,21 @@ export default defineComponent({
this.uploadUrl = getUploadUrl();
this.workspace = this.store.state.Workspace.workspace
},
watch:{
driver__:{
handler(newVal,oldVal){
if(this.type_.type2 == 'Printboard'){
if(newVal.index >= 13 && newVal.index < 15){
this.setKeyword(newVal.index-13)
}else{
}
}else if(this.type_.type2 == 'Sketchboard'){
}
}
}
},
computed: {
getSketchLabel(value: any) {
return (value: any) => {
@@ -374,12 +387,22 @@ export default defineComponent({
})
}
})
if(num == 2 || num == 1){
if(this.driver__.driver){
driverObj__.moveNext()
}
}
},
PrintModel(){
if(!this.printModel.optype){
document.addEventListener('click',this.removePrintModel)
}
this.printModel.optype = !this.printModel.optype
nextTick().then(()=>{
if(this.driver__.driver){
driverObj__.moveNext()
}
})
},
removePrintModel(){
this.printModel.optype = false
@@ -399,7 +422,11 @@ export default defineComponent({
name:this.t('Generate.Model')+num
}
}
nextTick().then(()=>{
if(this.driver__.driver){
driverObj__.moveNext()
}
})
},
getgenerate(){
if(this.isTest){//试用用户禁止使用
@@ -456,7 +483,7 @@ export default defineComponent({
})
nextTick().then(()=>{
if(this.driver__.driver){
driverObj__.moveTo(3)
driverObj__.moveTo(9)
}
})
// if(){
@@ -503,6 +530,11 @@ export default defineComponent({
} else {
this.sketchboardList = fileList
}
nextTick().then(()=>{
if(this.driver__.driver){
driverObj__.moveNext()
}
})
} else if (file.status === "error") {
let index = -1;
this.sketchboardList.forEach((ele: any, index1: any) => {
@@ -548,6 +580,9 @@ export default defineComponent({
}
this.collectionElementid = item.id
this.level2Type = item.category
if(this.driver__.driver){
driverObj__.moveNext()
}
},
deleteFile(item: any) {
if (item.type_ == "generate" || item.type_ == "material") {

41
src/component/HomePage/MoodboardUpload.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="collection_modal_item">
<div class="modal_left">
<div class="switch_type_list">
<div class="modal_left Guide_1_1_2" :class="[driver__.driver?'showEvents':'']">
<div class="switch_type_list" :class="[driver__.driver?'hideEvents':'']">
<div
@click.stop="open(1)"
class="switch_type_item"
@@ -68,7 +68,7 @@
:headers="{ Authorization: token }"
:before-upload="beforeUpload"
v-model:file-list="fileList"
multiple
:multiple="!driver__.driver"
:maxCount="8 - moodboarList.length+fileList.length"
accept=".jpg,.png,.jpeg,.bmp"
@change="(file) => fileUploadChange(file)"
@@ -252,28 +252,14 @@ export default defineComponent({
this.uploadUrl = getUploadUrl();
},
watch:{
fileList:{
handler(newVal:any,oldVal:any){
// console.log(111);
// if(this.uploading.length<newVal.length){
// for (let index = 1; this.uploading.length < newVal.length; index++) {
// this.uploading.push(false)
// }
// }else{
// if(newVal[newVal.length-1].status == 'dome')
// this.uploading[this.uploading-1] = true
// }
driver__:{
handler(newVal,oldVal){
if(newVal.index >= 5 && newVal.index <= 7){
this.open(newVal.index-4)
}else{
}
}
},
// driver__:{
// handler(newVal,oldVal){
// if(newVal.index >= 1 && newVal.index <= 2){
// this.open(newVal.index)
// }else{
// }
// }
// }
}
},
directives:{
modelImg:{
@@ -307,10 +293,11 @@ export default defineComponent({
material.init('Moodboard')
}else if (num == 3){
// let driver = this.store.state.Guide.guide.driver
if(this.driver__.driver){
driverObj__.moveNext()
}
// if(this.driver__.driver){
// driverObj__.moveNext()
// }
let Generate:any = this.$refs.Generate
if(this.driver__.driver){
Generate.searchPictureName = 'Exit sign, door, sunset, ocean, surreal'
}else{

26
src/component/HomePage/PrintboardUpload.vue
View File

@@ -21,8 +21,8 @@
</div>
<div
@click.stop="open(3)"
class="switch_type_item"
:class="[openClick == 3 ? 'select_swtich' : '']"
class="switch_type_item Guide_1_2_1"
:class="[openClick == 3 ? 'select_swtich' : '',driver__.driver?'showEvents':'']"
>
<span>{{ $t('PrintboardUpload.Generate') }}</span>
</div>
@@ -51,7 +51,7 @@
</div>
</div>
<div class="upload_file_item upload_component Guide_1_2_1" :class="[driver__.driver?'showEvents':'']" v-show="printboardList.length < 8">
<div class="upload_file_item upload_component" v-show="printboardList.length < 8">
<a-upload
:action="uploadUrl + '/api/element/upload'"
list-type="picture-card"
@@ -102,16 +102,17 @@
</div>
</div>
<div v-show="openClick == 3" class="modal_accomplish">
<div class="input_box" :class="{active:inputShow}">
<div class="input_box Guide_1_2_8" :class="[inputShow?'active':'',driver__.driver?'showEvents':'']">
<input class="search_input" @input="ifMaximumLength" @keydown.enter="getgenerate" :maxlength='inputShow?0:9999' :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" :placeholder="$t('PrintboardUpload.inputContent1')" v-model="captionGeneration">
<div class="generage_btn started_btn" @click.stop="getgenerate">{{ $t('PrintboardUpload.Generate') }}</div>
<span>{{ $t('PrintboardUpload.maximumLength') }}</span>
</div>
<div class="modal_img">
<div v-for="item,index in generateList" class="modal_imgItem" :class="{ active: item?.checked }" >
<div v-for="item,index in generateList" class="modal_imgItem Guide_1_2_9" :class="[item?.checked?'active':'',driver__.driver?'showEvents':'']" >
<img :src="item.imgUrl" @click.stop="generageAdd(item)">
<div
class="delete_like_file_block"
:class="[driver__.driver?'hideEvents':'']"
>
<i v-if="!item.like" class="fi fi-rr-heart" @click.stop="likeFile(item,'like')"></i>
<i v-else class="fi fi-sr-heart" @click.stop="likeFile(item,'noLike')"></i>
@@ -239,6 +240,11 @@ export default defineComponent({
let isTest:any = getCookie('isTest')
this.isTest =JSON.parse(isTest)|| ''
this.uploadUrl = getUploadUrl()
if(this.driver__.driver){
this.captionGeneration = 'Exit sign, door, sunset, ocean, surreal'
}else{
this.captionGeneration = ''
}
},
methods:{
open(num: Number) {
@@ -247,6 +253,13 @@ export default defineComponent({
if(num == 2){
material.init('Printboard')
}
if(num == 3){
nextTick().then(()=>{
if(this.driver__.driver){
driverObj__.moveNext()
}
})
}
},
fileUploadChange(data:any){
let file = data.file
@@ -603,6 +616,9 @@ export default defineComponent({
this.generateList.push(arr)
this.loadingShow = false
})
if(this.driver__.driver){
driverObj__.moveNext()
}
}
}
).catch(res=>{

79
src/component/HomePage/RobotAssist.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="robot" @mousemove="robotmax">
<div class="robot Guide_1_1_1" :class="[driver__.driver?'showEvents':'']" @mousemove="robotmax">
<div class="robot_top" ref="robotDom" v-fade="robotTop,'block'">
<div :class="[item.state == 1?'text_right':'text_left',item.img?'white':'']" v-for="item,index in record" ref="robotChildDom">
<div class="robot_text">
@@ -7,6 +7,17 @@
{{item.str}}
<a v-if="item.src" :href="item.src" target="_blank"><i class="fi fi-br-link-alt"></i></a>
</span>
<span class="driver__" v-if="driver__.driver">
{{item.str}}
<div class="driver__btn" v-if="item.driver">
<span @click="setDriver">
Yes
</span>
<span @click="removeDriver">
No
</span>
</div>
</span>
<div class="robot_img" :class="[item.img ?'img':'']">
<div class="robot_img_item" v-for="imgItem,imgIndex in item.img">
<img :src="imgItem.presignedUrl" alt="">
@@ -49,6 +60,7 @@ import { Https } from "@/tool/https";
import { getCookie } from "@/tool/cookie";
import { useStore } from "vuex";
import { message } from "ant-design-vue";
import { openGuide,driverObj__ } from "@/tool/guide";
import { useI18n } from "vue-i18n";
export default defineComponent({
components: {
@@ -72,6 +84,10 @@ export default defineComponent({
let isTest = ref()
let store = useStore()
let workspace:any = ref({})
let driver__:any = computed(()=>{
return store.state.Guide.guide
})
let driver__Time:any = ref()
return {
robotTop,
robotInput,
@@ -86,13 +102,41 @@ export default defineComponent({
t,
isTest,
store,
workspace
workspace,
driver__,
driver__Time
};
},
data() {
return {
};
},
watch:{
driver__:{
handler: function(newval) {
console.log(this.driver__);
if(this.driver__.driver && this.driver__.index == 0){
this.robotTop = true
this.robotInput = true
driverObj__.refresh();
this.record.push({
state:1,
str:'123123123',
driver:true,
})
this.driver__Time = setInterval(() => {
this.$nextTick().then(()=>{
driverObj__.refresh();
})
this.createTimer()
}, 3000);
}else{
clearTimeout(this.driver__Time)
}
}
}
},
mounted() {
this.textScroll()
let userInfo:any = getCookie("userInfo")
@@ -108,7 +152,8 @@ export default defineComponent({
this.workspace = computed(()=>{
return this.store?.state?.Workspace?.workspace
})
},
directives:{
fade:{
@@ -247,6 +292,20 @@ export default defineComponent({
});
this.chatCentent = ""
},
setDriver(){
if(this.driver__.driver){
driverObj__.moveNext();
this.robotTop = false
this.robotInput = false
}
},
removeDriver(){
if(this.driver__.driver){
driverObj__.destroy();
this.robotTop = false
this.robotInput = false
}
},
likeFile(item:any,imgIndex:number,index:number){
let data = {
...item,
@@ -280,7 +339,6 @@ export default defineComponent({
},
//清除定时器
clearTimer() {
clearInterval(this.timeTop);
clearInterval(this.timeInput);
},
@@ -347,6 +405,19 @@ export default defineComponent({
// margin-right: 5%;
}
}
.driver__{
.driver__btn{
width: 100%;
margin-top: 1rem;
display: flex;
justify-content: space-around;
span{
font-size: 1.4em;
color: #9efff4;
cursor: pointer;
}
}
}
}
.text_left,.text_right{
margin: 2rem 0;

53
src/component/HomePage/SketchboardUpload.vue
View File

@@ -18,8 +18,8 @@
</div>
<div
@click.stop="open(3)"
class="switch_type_item"
:class="[openClick == 3 ? 'select_swtich' : '']"
class="switch_type_item Guide_1_9"
:class="[openClick == 3 ? 'select_swtich' : '', driver__.driver?'showEvents':'']"
>
<span>{{ $t('SketchboardUpload.Generate') }}</span>
</div>
@@ -46,7 +46,7 @@
v-show="file?.status === 'done'"
>
<img :src="file?.imgUrl" class="upload_img" />
<div class="operate_file_block Guide_1_13" :class="[driver__.driver?'showEvents':'']">
<div class="operate_file_block">
<div class="select_img_type">
<div
class="select_category"
@@ -65,8 +65,7 @@
></div>
</div>
<div
class="category_list Guide_1_13_1"
:class="[driver__.driver?'showEvents':'']"
class="category_list"
v-show="file.categoryShow"
>
<div
@@ -111,8 +110,7 @@
</div>
</div>
<div
class="upload_file_item upload_component Guide_1_9"
:class="[driver__.driver?'showEvents':'']"
class="upload_file_item upload_component"
v-show="sketchboardList.length < 8"
>
<a-upload
@@ -177,18 +175,18 @@
</div>
</div>
<div v-show="openClick == 3" class="modal_accomplish">
<div class="input_box" :class="{active:inputShow}">
<div class="input_box Guide_1_9_2" :class="[inputShow?'active':'',driver__.driver?'showEvents':'']">
<input class="search_input" @input="ifMaximumLength" @keydown.enter="getgenerate()" :maxlength='inputShow?0:9999' :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" :placeholder="$t('SketchboardUpload.inputContent1')" v-model="captionGeneration">
<div class="generage_btn started_btn" @click.stop="getgenerate">Generate</div>
<span>{{ $t('SketchboardUpload.maximumLength') }}</span>
</div>
<div class="modal_img">
<div v-for="item,index in generateList" class="modal_imgItem" :class="{ active: item?.checked }">
<div v-for="item,index in generateList" class="modal_imgItem Guide_1_13_2" :class="[driver__.driver?'showEvents':'',item?.checked?'active':'']">
<img :src="item.imgUrl" @click="generageAdd(item)">
<div class="operate_file_block">
<div class="select_img_type">
<div
class="select_category"
class="select_category Guide_1_13"
@click.stop="showFileCategory(item)"
>
{{ item.categoryValue }}
@@ -205,7 +203,8 @@
</div>
<div
class="category_list"
class="category_list Guide_1_13_1"
:class="[driver__.driver?'showEvents':'']"
v-show="item.categoryShow"
>
<div
@@ -350,7 +349,7 @@ export default defineComponent({
handler(newVal:any,oldVal:any){
if(newVal.length>=2 && this.driver__.driver&& newVal.length!=oldVal.length){
if(this.driver__.driver){
driverObj__.moveTo(17)
// driverObj__.moveTo(22)
}
}
}
@@ -374,6 +373,11 @@ export default defineComponent({
this.workspaceCom = computed(()=>{
return this.store?.state?.Workspace?.workspace
})
if(this.driver__.driver){
this.captionGeneration = 'Exit sign, door, sunset, ocean, surreal'
}else{
this.captionGeneration = ''
}
},
methods: {
open(num: Number) {
@@ -384,6 +388,11 @@ export default defineComponent({
} else if (num == 3) {
// let Generate:any = this.$refs.Generate
// Generate.init('generate')
nextTick().then(()=>{
if(this.driver__.driver){
driverObj__.moveNext()
}
})
}
},
getPosition(){
@@ -423,11 +432,6 @@ export default defineComponent({
(v: any) => v.status === "done"
);
this.store.commit("setSketchboardFile", fileList);
nextTick().then(()=>{
if(this.driver__.driver){
driverObj__.moveTo(15)
}
})
} else if (file.status === "error") {
let index = -1;
@@ -464,7 +468,7 @@ export default defineComponent({
file.categoryShow = true;
nextTick().then(()=>{
if(this.driver__.driver){
driverObj__.moveTo(16)
driverObj__.moveNext()
}
})
@@ -478,6 +482,9 @@ export default defineComponent({
}
file.categoryValue = cate.value;
file.category = cate.name;
if(this.driver__.driver){
driverObj__.moveNext()
}
// this.store.commit("sketchGenerateFiles", this.fileList);
}else{
for (let item of this.fileList) {
@@ -682,6 +689,11 @@ export default defineComponent({
this.generateList.push(arr)
this.loadingShow = false
})
nextTick().then(()=>{
if(this.driver__.driver){
driverObj__.moveNext()
}
})
}
}
).catch(res=>{
@@ -696,6 +708,11 @@ export default defineComponent({
item.resData = JSON.parse(JSON.stringify(item))
item.jsContent1 = this.t('uploadFile.jsContent1')
this.store.commit("addGenerateMaterialFils", item);
nextTick().then(()=>{
if(this.driver__.driver){
driverObj__.moveNext()
}
})
}
},
});

126
src/tool/guide.js
View File

@@ -1,3 +1,4 @@
import { nextTick} from "vue";
import { driver } from "driver.js";
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
import "driver.js/dist/driver.css";
@@ -12,8 +13,17 @@ let data = {
}
const driverObj__ = driver({
steps: [
{ element: '.Guide_1_1', popover: { title: '', description: 'Begin your creative journey here.' } },
// { element: '.Guide_1_2', popover: { title: '', description: 'Description' } },
{ element: '.Guide_1_1_1', popover: { title: 'Title', description: 'Description' } },
{ element: '.Guide_1_27', popover: { title: '', description: 'You can change the mannequin and other settings in Workspace.' } },
{ element: '.Guide_1_28', popover: { title: '', description: 'Change the mannequin here.' } },
{ element: '.Guide_1_29', popover: { title: '', description: 'Select a mannequin of your choice from our system library.' } },
{ element: '.Guide_1_1', popover: { title: '', description: 'Begin your creative journey here. ' } },
{ element: '.Guide_1_1_2', popover: { title: '', description: 'Begin your creative journey here. ' } },
{ element: '.Guide_1_1_2', popover: { title: '', description: 'Begin your creative journey here. ' } },
// { element: '.Guide_1_1_2', popover: { title: '', description: 'Begin your creative journey here. ' } },
// { element: '.Guide_1_3', popover: { title: '', description: 'Description' } },
// { element: '.Guide_1_2', popover: { title: '', description: 'Description' } },
{ element: '.Guide_1_4', popover: { title: '', description: 'Click here to try the latest image generation technology to create your mood board.' } },
{ element: '.Guide_1_5', popover: { title: '', description: "Enter keywords that capture the mood you wish to express and then click the 'Generate' button." } },
@@ -23,6 +33,14 @@ const driverObj__ = driver({
//以上moodboard
{ element: '.Guide_1_2_1', popover: { title: '', description: 'Upload two print images here' } },
{ element: '.Guide_1_2_2', popover: { title: '', description: 'Crop the uploaded image here.' } },
{ element: '.Guide_1_2_2', popover: { title: '', description: 'Crop the uploaded image here.' } },
{ element: '.Guide_1_2_3', popover: { title: '', description: 'Crop the uploaded image here.' } },
{ element: '.Guide_1_2_4', popover: { title: '', description: 'Crop the uploaded image here.' } },
{ element: '.Guide_1_2_5', popover: { title: '', description: 'Crop the uploaded image here.' } },
{ element: '.Guide_1_2_6', popover: { title: '', description: 'Crop the uploaded image here.' } },
{ element: '.Guide_1_2_7', popover: { title: '', description: 'Crop the uploaded image here.' } },
{ element: '.Guide_1_2_8', popover: { title: '', description: 'Crop the uploaded image here.' } },
{ element: '.Guide_1_2_9', popover: { title: '', description: 'Crop the uploaded image here.' } },
{ element: '.Guide_1_8', popover: { title: '', description: 'Click here for next step.' } },
{ element: '.Guide_1_10', popover: { title: '', description: 'Click here to extract primary colors from image.' } },
{ element: '.Guide_1_11', popover: { title: '', description: 'Select the color you want from these color blocks as the first color.' } },
@@ -32,15 +50,21 @@ const driverObj__ = driver({
{ element: '.Guide_1_8', popover: { title: '', description: 'Click here for next step.' } },
{ element: '.Guide_1_9', popover: { title: '', description: 'Upload or select two sketches for your collection on this page.' } },
{ element: '.Guide_1_9_1', popover: { title: '', description: 'Upload or select two sketches for your collection on this page.' } },
{ element: '.Guide_1_9_2', popover: { title: '', description: 'Upload or select two sketches for your collection on this page.' } },
{ element: '.Guide_1_13', popover: { title: '', description: 'Click here to choose a category for the uploaded sketch.' } },
{ element: '.Guide_1_13_1', popover: { title: '', description: 'Choose correct category for the sketch.' } },
{ element: '.Guide_1_13_2', popover: { title: '', description: 'Choose correct category for the sketch.' } },
{ element: '.Guide_1_14', popover: { title: '', description: 'After you have confirmed categories of sketches are correct, click here to complete the uploading process.' } },
//开始design
{ element: '.Guide_1_15', popover: { title: '', description: 'Click here to let AI generate design illustrations.' } },
{ element: '.Guide_1_16', popover: { title: '', description: 'Please wait a few seconds.' } },
{ element: '.Guide_1_17', popover: { title: '', description: 'Click on any design image you are interested in to modify the details.' } },
// { element: '.Guide_1_18', popover: { title: '', description: 'Description' } },
{ element: '.Guide_1_30', popover: { title: '', description: 'Click the ‘Redesign’ button to generate new results using the selected mannequin.' } },
{ element: '.Guide_1_16', popover: { title: '', description: 'Click here to let AI generate design illustrations.' } },
{ element: '.Guide_1_17', popover: { title: '', description: 'Click on any design image you are interested in to modify the details.' } },
{ element: '.Guide_1_19', popover: { title: '', description: 'Click on the clothes to modify its details.' } },
{ element: '.Guide_1_20', popover: { title: '', description: 'Click here to add or change the print.' } },
{ element: '.Guide_1_21', popover: { title: '', description: 'You can find the print you uploaded earlier in your Library.' } },
@@ -49,11 +73,7 @@ const driverObj__ = driver({
// { element: '.Guide_1_24', popover: { title: '', description: 'Description' } },
{ element: '.Guide_1_25', popover: { title: '', description: 'Preview printed design here.' ,side: "right",align: 'end' } },
{ element: '.Guide_1_26', popover: { title: '', description: 'Click here to finalize your modification.' } },
{ element: '.Guide_1_27', popover: { title: '', description: 'You can change the mannequin and other settings in Workspace.' } },
{ element: '.Guide_1_28', popover: { title: '', description: 'Change the mannequin here.' } },
{ element: '.Guide_1_29', popover: { title: '', description: 'Select a mannequin of your choice from our system library.' } },
{ element: '.Guide_1_30', popover: { title: '', description: 'Click the ‘Redesign’ button to generate new results using the selected mannequin.' } },
{ element: '.Guide_1_99', popover: { title: 'Begin Your Design', description: 'Your guide is complete, and now the canvas is yours to create freely. For more insights and details, check out our demo video on the homepage at <a :href="https://code-create.com.hk/aida/" target="_blank"></a>' } },
{ element: '.Guide_1_99', popover: { title: 'Begin Your Design', description: 'Your guide is complete, and now the canvas is yours to create freely. For more insights and details, check out our demo video on the homepage at <a href="https://code-create.com.hk/aida/" style="pointer-events: auto;" target="_blank">https://code-create.com.hk/aida/</a>' } },
],
// showProgress: true,//控制总页数和当前页数是否显示
allowClose:false,
@@ -69,41 +89,55 @@ const driverObj__ = driver({
doneBtnText: '✕',
onPopoverRender: (popover, options) => {//每个步骤的元素和所有信息
// console.log(popover,options,element);
if(element){
element.classList.remove('Guide_')
}
popover.previousButton.style.display = 'none'
let driver = document.querySelector('body')
if(options.state.activeIndex >= 2 && options.state.activeIndex < 3){
options.config.stagePadding = 0
}else{
options.config.stagePadding = 10
}
if(
// options.state.activeIndex >= 1 && options.state.activeIndex <= 2 ||
// options.state.activeIndex >= 18 && options.state.activeIndex < 19 ||
// options.state.activeIndex >= 24 && options.state.activeIndex < 25 ||
driverObj__.isLastStep()
){
popover.footer.style.display = 'block'
popover.footerButtons.style.pointerEvents = 'auto';
// driver.classList.add('showEvents')
addDiv(options.state.activeElement)
}else{
popover.footer.style.display = 'none'
removeDiv(options.state.activeElement)
popover.footerButtons.style.pointerEvents = 'none';
// driver.classList.remove('showEvents')
}
// console.log(options.state.activeIndex);
// let driver = document.querySelector('body')
driverIndex__ = driverObj__.getState().activeIndex
data = {
index : driverIndex__,
driver : true,
}
store?.commit("setGuide", data);
element = options.state.activeElement
element.classList.add('Guide_')
if(options.state.activeIndex == 0){
popover.wrapper.style.display = 'none'
}else{
popover.wrapper.style.display = 'block'
}
//判断是不是generate 如果是就吧边距设为0
// if(options.state.activeIndex >= 2 && options.state.activeIndex < 3){
// options.config.stagePadding = 0
// }else{
// options.config.stagePadding = 10
// }
if(
options.state.activeIndex >= 2 && options.state.activeIndex < 3 ||
options.state.activeIndex >= 5 && options.state.activeIndex < 8 ||
options.state.activeIndex >= 13 && options.state.activeIndex < 15 ||
// options.state.activeIndex >= 24 && options.state.activeIndex < 25 ||
driverObj__.isLastStep()
){
popover.footer.style.display = 'block'
// popover.previousButton.style.display = 'block'
popover.footerButtons.style.pointerEvents = 'auto';
// driver.classList.add('showEvents')
// addDiv(options.state.activeElement)
}else{
popover.footer.style.display = 'none'
// popover.previousButton.style.display = 'none'
// removeDiv(options.state.activeElement)
popover.footerButtons.style.pointerEvents = 'none';
// driver.classList.remove('showEvents')
}
nextTick().then(()=>{
if(element){
element.classList.remove('Guide_')
}
element = options.state.activeElement
element.classList.add('Guide_')
console.log(element);
})
},
//销毁前
onDestroyStarted:()=>{
@@ -121,20 +155,14 @@ const driverObj__ = driver({
// onNextClick:(element, step, options) =>{
// console.log(element,step,options);
// driverObj__.moveNext()
// // element.style.posiiton = 'relative'
// // const mask = document.createElement('div');
// // mask.style.position = 'absolute';
// // mask.style.top = '0';
// // mask.style.left = '0';
// // mask.style.width = '100%';
// // mask.style.height = '100%';
// // mask.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
// // mask.style.zIndex = '9999';
// // element.appendChild(mask);
// }
onNextClick:(element, step, options) =>{
console.log(element,step,options);
if(options.state.activeIndex == 2){
driverObj__.moveTo(4)
}else{
driverObj__.moveNext()
}
}
});
function addDiv(element){
element.style.posiiton = 'relative'

28
src/views/HomeView.vue
View File

@@ -73,20 +73,22 @@
<div class="right_content_img_item">
<!-- <draggable
group="people" > -->
<div class="content_img_block" :class="[driver__.driver?'hideEvents':'']" v-for="(
<div class="content_img_block" v-for="(
design, index
) in designCollectionList" :key="design?.designItemId" @click="
designDetail(
design,
index,
designCollectionList,
'dislike'
)
">
<div class="content_img_flex">
) in designCollectionList" :key="design?.designItemId">
<div class="content_img_flex"
:class="[driver__.driver?driver__.index == 37?'hideEvents':'':'']"
@click="
designDetail(
design,
index,
designCollectionList,
'dislike'
)
">
<img class="content_img" :src="design.designOutfitUrl" />
</div>
<div class="icon iconfont icon-jushoucang icon_like" @click.stop="
<div class="icon iconfont icon-jushoucang icon_like" :class="[index == 0?driver__.index == 37?'Guide_active showEvents':'':'']" @click.stop="
likeDesignCollection(
design,
index
@@ -744,6 +746,9 @@ export default defineComponent({
}
}
this.likeLoading = false;
if(this.driver__.driver){
driverObj__.moveNext();
}
})
.catch((rv) => {
this.likeLoading = false;
@@ -1380,7 +1385,6 @@ export default defineComponent({
.icon-jushoucang {
color: #000;
}
.icon-jushoucanggift {
color: rgba(52, 53, 121, 1);
}