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

Merge remote-tracking branch 'origin/develop' into dev_vite

Browse Source
This commit is contained in:
X1627315083
2025-06-19 09:38:42 +08:00
parent 226b7470ec c054dca2e8
commit 47223f7e95
24 changed files with 8310 additions and 9513 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -886,6 +886,12 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
} }
.ant-select-dropdown .ant-select-item {
font-size: 1.6rem;
line-height: 2.4rem;
padding: 0.8rem 1.8rem;
min-height: 3.2rem;
}
.generalModel { .generalModel {
-moz-user-select: none; -moz-user-select: none;
-webkit-user-select: none; -webkit-user-select: none;

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

@@ -970,6 +970,15 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
} }
.ant-select-item{
font-size: 1.6rem;
line-height: 2.4rem;
padding: .8rem 1.8rem;
min-height: 3.2rem;
.ant-select-item-option-content{
}
}
} }
.generalModel{//自带关闭的页面 .generalModel{//自带关闭的页面

1
src/component/DetailCopy/model/modelPosition.vue
View File

@@ -485,6 +485,7 @@ export default defineComponent({
float: left; float: left;
user-select:none; user-select:none;
-webkit-user-drag: none; -webkit-user-drag: none;
object-fit: cover;
} }
.modal_imgItem{ .modal_imgItem{
position: absolute; position: absolute;

2
src/component/Events/eventsDetail.vue
View File

@@ -101,7 +101,7 @@ export default defineComponent({
eventLangData = eventDataCn eventLangData = eventDataCn
} }
eventLangData.eventsItem.forEach((item:any)=>{ eventLangData.eventsItem.forEach((item:any)=>{
if(item.id == router.currentRoute.value.query.id){ if(item.id == router.currentRoute.value.query.eventId){
filter.eventsDetail = item; filter.eventsDetail = item;
} }
}) })

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

@@ -728,11 +728,6 @@ export default defineComponent({
if(rv.filter((item:any)=>item.status == 'Invalid').length ==dataNum){ if(rv.filter((item:any)=>item.status == 'Invalid').length ==dataNum){
message.info(this.t('Generate.effectPoor')); message.info(this.t('Generate.effectPoor'));
}else{ }else{
nextTick().then(()=>{
if(this.driver__.driver){
driverObj__.moveNext()
}
})
} }
this.store.dispatch('getCredits') this.store.dispatch('getCredits')

2
src/component/HomePage/scaleImage.vue
View File

@@ -687,7 +687,7 @@ export default defineComponent({
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
z-index: 2; z-index: 99;
.operate_icon{ .operate_icon{
font-size: 1.8rem; font-size: 1.8rem;
color: #fff; color: #fff;

1865
src/component/LoginPage/login/enterprise.vue
View File

File diff suppressed because it is too large Load Diff

1759
src/component/LoginPage/login/personal.vue
View File

File diff suppressed because it is too large Load Diff

1869
src/component/LoginPage/login/school.vue
View File

File diff suppressed because it is too large Load Diff

839
src/component/WorksPage/Falls.vue
View File

@@ -1,452 +1,429 @@
<template> <template>
<div class="Falls"> <div class="Falls">
<div <div class="falls_item" v-fadeIn="isScroll" v-for="item in list" :key="item.id"
class="falls_item" :style="{
v-fadeIn="isScroll" width: item.style.width + 'px',
v-for="item in list" height: item.style.height + 'px',
:key="item.id" top: item.style.top + 'px',
:style="{ left: item.style.left + 'px',
width: item.style.width + 'px', }"
height: item.style.height + 'px', >
top: item.style.top + 'px', <!-- 图片 -->
left: item.style.left + 'px', <div class="falls_item_img">
}" <img
> v-lazy="item.canvasUrl"
<!-- 图片 --> @click="setItemDetail(item)"
<div class="falls_item_img"> :style="{
<img height: item.style.imgHeihgt + 'px',
v-lazy="item.canvasUrl" }"
@click="setItemDetail(item)" />
:style="{ <div v-if="item.original == 1" class="falls_item_user_Original">{{$t('newScaleImage.Original')}}</div>
height: item.style.imgHeihgt + 'px', </div>
}"
/>
<div v-if="item.original == 1" class="falls_item_user_Original">
{{ $t("newScaleImage.Original") }}
</div>
</div>
<!-- 文字 --> <!-- 文字 -->
<div class="falls_item_bottom" v-if="isText"> <div class="falls_item_bottom" v-if="isText">
<div class="falls_item_text" :title="item.text"> <div class="falls_item_text" :title="item.text">
{{ item.text }} {{item.text}}
</div> </div>
<div class="falls_item_content"> <div class="falls_item_content">
<div class="falls_item_user"> <div class="falls_item_user">
<!-- <img src="http://121.40.53.210:3000/falls/5.png" alt=""> --> <!-- <img src="http://121.40.53.210:3000/falls/5.png" alt=""> -->
<div class="falls_item_user_detail"> <div class="falls_item_user_detail">
<span>@{{ item.userName }}</span> <span>@{{ item.userName }}</span>
<div :title="item.portfolioName">{{ item.portfolioName }}</div> <div :title="item.portfolioName">{{item.portfolioName}}</div>
<!-- <span :title="item.portfolioDes">{{item.portfolioDes}}</span> --> <!-- <span :title="item.portfolioDes">{{item.portfolioDes}}</span> -->
</div> </div>
</div> </div>
<div class="falls_item_detail"> <div class="falls_item_detail">
<!-- <div> <!-- <div>
<svg xmlns="http://www.w3.org/2000/svg" width="2.5rem" height="2.5rem" viewBox="0 0 16 16" fill="none" role="img" :style="{color:'#9e9ea7',fill: 'currentColor'}"> <svg xmlns="http://www.w3.org/2000/svg" width="2.5rem" height="2.5rem" viewBox="0 0 16 16" fill="none" role="img" :style="{color:'#9e9ea7',fill: 'currentColor'}">
<path d="M10.7408 2C13.0889 2 14.6667 4.235 14.6667 6.32C14.6667 10.5425 8.11856 14 8.00004 14C7.88152 14 1.33337 10.5425 1.33337 6.32C1.33337 4.235 2.91115 2 5.2593 2C6.60745 2 7.48893 2.6825 8.00004 3.2825C8.51115 2.6825 9.39263 2 10.7408 2Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M10.7408 2C13.0889 2 14.6667 4.235 14.6667 6.32C14.6667 10.5425 8.11856 14 8.00004 14C7.88152 14 1.33337 10.5425 1.33337 6.32C1.33337 4.235 2.91115 2 5.2593 2C6.60745 2 7.48893 2.6825 8.00004 3.2825C8.51115 2.6825 9.39263 2 10.7408 2Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg> </svg>
<span>{{item.viewNums}}</span> <span>{{item.viewNums}}</span>
</div> --> </div> -->
<label @click="portfolioLike(item)"> <label @click="portfolioLike(item)">
<i <i v-if="true" class="fi fi-sr-thumbs-up" style="color:rgba(158, 158, 167);"></i>
v-if="true" <i v-else class="fi fi-rr-social-network"></i>
class="fi fi-sr-thumbs-up" <span>{{item.likeNum}}</span>
style="color: rgba(158, 158, 167)" </label>
></i> <div>
<i v-else class="fi fi-rr-social-network"></i> <!-- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" role="img" style="color: #9e9ea7;fill: currentColor;">
<span>{{ item.likeNum }}</span>
</label>
<div>
<!-- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" role="img" style="color: #9e9ea7;fill: currentColor;">
<path d="M8 3C4.36992 3 1.98789 6.21774 1.18763 7.49059C1.09079 7.64462 1.04237 7.72163 1.01527 7.84042C0.99491 7.92964 0.99491 8.07036 1.01527 8.15958C1.04237 8.27837 1.09079 8.35539 1.18763 8.50941C1.98789 9.78226 4.36992 13 8 13C11.6301 13 14.0121 9.78226 14.8124 8.50941L14.8124 8.50939C14.9092 8.35538 14.9576 8.27837 14.9847 8.15958C15.0051 8.07036 15.0051 7.92964 14.9847 7.84042C14.9576 7.72163 14.9092 7.64462 14.8124 7.4906L14.8124 7.49059C14.0121 6.21774 11.6301 3 8 3Z" fill="currentColor"></path> <path d="M8 3C4.36992 3 1.98789 6.21774 1.18763 7.49059C1.09079 7.64462 1.04237 7.72163 1.01527 7.84042C0.99491 7.92964 0.99491 8.07036 1.01527 8.15958C1.04237 8.27837 1.09079 8.35539 1.18763 8.50941C1.98789 9.78226 4.36992 13 8 13C11.6301 13 14.0121 9.78226 14.8124 8.50941L14.8124 8.50939C14.9092 8.35538 14.9576 8.27837 14.9847 8.15958C15.0051 8.07036 15.0051 7.92964 14.9847 7.84042C14.9576 7.72163 14.9092 7.64462 14.8124 7.4906L14.8124 7.49059C14.0121 6.21774 11.6301 3 8 3Z" fill="currentColor"></path>
<path d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z" fill="white"></path> <path d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z" fill="white"></path>
</svg> --> </svg> -->
<i class="fi fi-sr-eye"></i> <i class="fi fi-sr-eye"></i>
<span>{{ item.viewNums }}</span> <span>{{item.viewNums}}</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { import { defineComponent,h ,toRefs,ref,reactive,onMounted,onBeforeDestroy,nextTick,provide,computed} from 'vue'
defineComponent,
h,
toRefs,
ref,
reactive,
onMounted,
nextTick,
provide,
computed,
} from "vue";
import { gsap, TweenMax } from "gsap"; import { gsap, TweenMax } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger"; import { ScrollTrigger } from "gsap/ScrollTrigger";
export default defineComponent({ export default defineComponent({
props: { props:{
isScroll: { isScroll:{
type: Boolean, type:Boolean,
default: true, default:true,
}, },
isText: { isText:{
type: Boolean, type:Boolean,
default: true, default:true,
}, },
itemWidth: { itemWidth:{
type: Number, type:Number,
default: 300, default:300,
}, }
}, },
setup() { setup(){
let list = ref([]); let list = ref([])
let wait_list = ref([]); let wait_list = ref([])
let width = ref(300); let width = ref(300)
let num_x = ref(1); let num_x = ref(1)
let gap_x = ref(0); let gap_x = ref(0)
let gap_y = ref(0); let gap_y = ref(0)
let poss = ref([]); let poss = ref([])
let loading = ref(false); let loading = ref(false)
let computedHeight = 0; let computedHeight = 0
let imgDom = ref(); let imgDom = ref()
return { return{
list, list,
wait_list, wait_list,
width, width,
num_x, num_x,
gap_x, gap_x,
gap_y, gap_y,
poss, poss,
loading, loading,
computedHeight, computedHeight,
imgDom, imgDom,
}; }
}, },
directives: { directives:{
fadeIn: { fadeIn:{
mounted(el, binding) { mounted (el,binding) {
let dom; let dom
if (binding.value) { if(binding.value){
dom = document.querySelector(".works_page .page_content"); dom = document.querySelector('.works_page .page_content')
} else { }else{
dom = document.querySelector(".homeRecommend_content_body"); dom = document.querySelector('.homeRecommend_content_body')
} }
gsap.registerPlugin(ScrollTrigger); gsap.registerPlugin(ScrollTrigger);
let tl1 = gsap.timeline(); let tl1 = gsap.timeline();
tl1.from(el, 1, { y: "30px", opacity: 0 }); tl1.from(el,1, {y:'30px',opacity:0},)
ScrollTrigger.create({ ScrollTrigger.create({
trigger: el, // 触发器元素 trigger: el, // 触发器元素
start: "top 90%", // 滚动触发器的起始滚动位置 start: "top 90%", // 滚动触发器的起始滚动位置
end: "100% 80%", // 滚动触发器的结束滚动位置 end: '100% 80%', // 滚动触发器的结束滚动位置
// markers: true, // 开启标注功能 // markers: true, // 开启标注功能
scrub: true, scrub: true,
animation: tl1, animation:tl1,
scroller: dom, //设置指定元素为滚动依据 scroller:dom,//设置指定元素为滚动依据
scrub: 2, scrub:2,
// onUpdate:(v)=>{ // onUpdate:(v)=>{
// if(v.progress < 0.1){ // if(v.progress < 0.1){
// v.trigger?.classList.remove('active') // v.trigger?.classList.remove('active')
// }else{ // }else{
// v.trigger?.classList.add('active') // v.trigger?.classList.add('active')
// // v.trigger?.classList.add('active') // // v.trigger?.classList.add('active')
// } // }
// } // }
}); });
}, }
}, },
}, },
mounted() { mounted () {
this.resize(); this.resize()
window.addEventListener("resize", this.resize); window.addEventListener("resize", this.resize);
let domFalls = document.querySelector(".Falls"); let domFalls = document.querySelector('.Falls')
let domCss = getComputedStyle(domFalls); let domCss = getComputedStyle(domFalls);
const paddingBottom = const paddingBottom = domCss.getPropertyValue('--paddingBottom').split('px')[0]*1;
domCss.getPropertyValue("--paddingBottom").split("px")[0] * 1; const textMarginTop = domCss.getPropertyValue('--textMarginTop').split('px')[0]*1;
const textMarginTop = const textHeight = domCss.getPropertyValue('--textHeight').split('px')[0]*1;
domCss.getPropertyValue("--textMarginTop").split("px")[0] * 1; const contentHeight = domCss.getPropertyValue('--contentHeight').split('px')[0]*1;
const textHeight = if(this.$props.isText){
domCss.getPropertyValue("--textHeight").split("px")[0] * 1; this.computedHeight = paddingBottom + textMarginTop + textHeight + contentHeight;
const contentHeight = }
domCss.getPropertyValue("--contentHeight").split("px")[0] * 1; },
if (this.$props.isText) { beforeDestroy () {
this.computedHeight = this.wait_list = []
paddingBottom + textMarginTop + textHeight + contentHeight; window.removeEventListener("resize", this.resize);
} },
}, // 挂载方法
beforeDestroy() { methods: {
this.wait_list = []; clearData(){
window.removeEventListener("resize", this.resize); this.wait_list = []
}, this.width = this.itemWidth
// 挂载方法 this.num_x = 1
methods: { this.gap_x = 0
clearData() { this.gap_y = 0
this.wait_list = []; this.poss = []
this.width = this.itemWidth; this.loading = false
this.num_x = 1; this.list = []
this.gap_x = 0; this.resize()
this.gap_y = 0; if(this.imgDom){
this.poss = []; this.imgDom.remove();
this.loading = false; this.imgDom = null
this.list = []; }
this.resize(); },
if (this.imgDom) { push(arr) {
this.imgDom.remove(); this.wait_list = this.wait_list.concat(arr);
this.imgDom = null; if (!this.loading) {
} this.loading = true;
}, this.loadImg();
push(arr) { }
this.wait_list = this.wait_list.concat(arr); },
if (!this.loading) { deleteItem(id){
this.loading = true; for (let index = 0; index < this.list.length; index++) {
this.loadImg(); if(this.list[index].id == id){
} this.list.splice(index,1)
}, this.resize()
deleteItem(id) { break;
for (let index = 0; index < this.list.length; index++) { }
if (this.list[index].id == id) { }
this.list.splice(index, 1); },
this.resize(); loadImg() {
break; if (this.wait_list.length <= 0) {
} this.loading = false;
} this.$emit("loadend");
}, return;
loadImg() { }
if (this.wait_list.length <= 0) {
this.loading = false;
this.$emit("loadend");
return;
}
let url = this.wait_list[0].canvasUrl || this.wait_list[0].url; let url = this.wait_list[0].canvasUrl || this.wait_list[0].url;
let data = this.wait_list[0]; let data = this.wait_list[0]
this.imgDom = document.createElement("img"); this.imgDom = document.createElement("img");
this.imgDom.src = url; this.imgDom.src = url;
this.imgDom.style.width = this.itemWidth + "px"; this.imgDom.style.width = this.itemWidth + "px";
this.imgDom.style.maxHeight = this.itemWidth + 330 + "px"; this.imgDom.style.maxHeight = this.itemWidth+330 + "px";
this.imgDom.style.position = "absolute"; this.imgDom.style.position = "absolute";
this.imgDom.style.top = "-99999px"; this.imgDom.style.top = "-99999px";
document.body.appendChild(this.imgDom); document.body.appendChild(this.imgDom);
this.imgDom.addEventListener("load", () => { this.imgDom.addEventListener("load", () => {
if (!this.imgDom) return; if(!this.imgDom) return
var idx = 0; var idx = 0;
var pos_num = this.poss[idx]; var pos_num = this.poss[idx];
for (var i = 1; i < this.poss.length; i++) { for (var i = 1; i < this.poss.length; i++) {
if (pos_num > this.poss[i]) { if (pos_num > this.poss[i]) {
idx = i; idx = i;
pos_num = this.poss[i]; pos_num = this.poss[i];
} }
} }
// this.computedHeight = 0 // this.computedHeight = 0
let width = this.imgDom.offsetWidth; let width = this.imgDom.offsetWidth;
let height = this.imgDom.offsetHeight + this.computedHeight; let height = this.imgDom.offsetHeight+this.computedHeight;
let top = this.poss[idx] + this.gap_y; let top = this.poss[idx] + this.gap_y;
let left = (idx + 1) * this.gap_x + idx * width; let left = (idx + 1) * this.gap_x + idx * width;
let imgHeight = height - this.computedHeight; let imgHeight = height - this.computedHeight
this.poss[idx] = top + height; this.poss[idx] = top + height;
let obj = { let obj = {
canvasUrl: url, canvasUrl:url,
style: { width, height, top, left, imgHeight }, style: { width, height, top, left, imgHeight },
...data, ...data
}; };
this.list.push(obj); this.list.push(obj);
this.imgDom.remove(); this.imgDom.remove();
this.imgDom = null; this.imgDom = null
this.wait_list.splice(0, 1); this.wait_list.splice(0, 1);
this.$el.style.height = Math.max(...this.poss) + this.gap_y + "px"; this.$el.style.height =
if (this.wait_list.length <= 0) { Math.max(...this.poss) + this.gap_y + "px";
this.loading = false; if (this.wait_list.length <= 0) {
this.$emit("loadend"); this.loading = false;
} else { this.$emit("loadend");
this.loadImg(); } else {
} this.loadImg();
}); }
}, });
resize() { },
nextTick(() => { resize() {
var t_width = this.$el.offsetWidth; nextTick(() => {
var width = this.itemWidth; var t_width = this.$el.offsetWidth;
var num_x = parseInt(t_width / (width + 20)); var width = this.itemWidth;
if (num_x < 1) num_x = 1; var num_x = parseInt(t_width / (width + 20));
var remain = t_width - width * num_x; if (num_x < 1) num_x = 1;
var gap_x = remain / (num_x + 1); var remain = t_width - width * num_x;
this.gap_x = gap_x; var gap_x = remain / (num_x + 1);
this.gap_y = gap_x > 30 ? 30 : gap_x < 30 ? 20 : gap_x; this.gap_x = gap_x;
this.num_x = num_x; this.gap_y = gap_x > 30 ? 30 : gap_x < 30 ? 20 : gap_x;
var poss = []; this.num_x = num_x;
for (var i = 0; i < num_x; i++) poss.push(0); var poss = [];
this.poss = poss; for (var i = 0; i < num_x; i++) poss.push(0);
this.reset(); this.poss = poss;
}); this.reset();
}, })
reset() {
for (let i = 0; i < this.list.length; i++) { },
let width = this.list[i].style.width; reset() {
let height = this.list[i].style.height; for (let i = 0; i < this.list.length; i++) {
var idx = 0; let width = this.list[i].style.width;
var pos_num = this.poss[idx]; let height = this.list[i].style.height;
for (var j = 1; j < this.poss.length; j++) { var idx = 0;
if (pos_num > this.poss[j]) { var pos_num = this.poss[idx];
idx = j; for (var j = 1; j < this.poss.length; j++) {
pos_num = this.poss[j]; if (pos_num > this.poss[j]) {
} idx = j;
} pos_num = this.poss[j];
let top = this.poss[idx] + this.gap_y; }
let left = (idx + 1) * this.gap_x + idx * width; }
this.poss[idx] = top + height; let top = this.poss[idx] + this.gap_y;
this.list[i].style = { width, height, top, left }; let left = (idx + 1) * this.gap_x + idx * width;
} this.poss[idx] = top + height;
this.$el.style.height = Math.max(...this.poss) + this.gap_y + "px"; this.list[i].style = { width, height, top, left };
}, }
setItemDetail(data) { this.$el.style.height = Math.max(...this.poss) + this.gap_y + "px";
this.$emit("getImgScale", data); },
}, setItemDetail(data){
portfolioLike(data) { this.$emit('getImgScale',data)
this.$emit("setPortfolioLike", data); },
}, portfolioLike(data){
}, this.$emit('setPortfolioLike',data)
}); }
},
})
</script> </script>
<style lang="less" scoped> <style lang='less' scoped>
.Falls { .Falls {
width: 100%; width: 100%;
height: auto; height: auto;
position: relative; position: relative;
--paddingBottom: 10px; --paddingBottom:10px;
--textMarginTop: 10px; --textMarginTop:10px;
--textHeight: 25px; --textHeight:25px;
--contentHeight: 35px; --contentHeight:35px;
.falls_item { .falls_item{
position: absolute; position: absolute;
transition: all 0.15s; transition: all 0.15s;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: #fff; background: #fff;
border-radius: 2rem; border-radius: 2rem;
overflow: hidden; overflow: hidden;
padding-bottom: var(--paddingBottom); padding-bottom: var(--paddingBottom);
&.falls_item:hover { &.falls_item:hover{
.falls_item_img { .falls_item_img{
img { img{
transform: scale(1.1); transform: scale(1.1);
} }
} }
} }
.falls_item_img { .falls_item_img{
cursor: pointer; cursor: pointer;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
img { img{
width: 100%; width: 100%;
object-fit: cover; object-fit: cover;
height: 100%; height: 100%;
transition: all 0.3s; transition: all .3s;
} }
.falls_item_user_Original { .falls_item_user_Original{
font-weight: 600; font-weight: 600;
font-size: 12px; font-size: 12px;
color: #39215b; color: #39215b;
background: #c9a2ff; background: #c9a2ff;
padding: 0 5px; padding: 0 5px;
border-radius: 4px; border-radius: 4px;
margin-right: 2px; margin-right: 2px;
position: absolute; position: absolute;
top: 10px; top: 10px;
right: 10px; right: 10px;
left: auto; left: auto;
} }
} }
.falls_item_bottom { .falls_item_bottom{
padding: 0 10px; padding: 0 10px;
.falls_item_text { .falls_item_text{
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
font-weight: 600; font-weight: 600;
font-size: 18px; font-size: 18px;
margin-top: var(--textMarginTop); margin-top: var(--textMarginTop);
height: var(--textHeight); height: var(--textHeight);
} }
.falls_item_content { .falls_item_content{
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
color: #525252; color: #525252;
height: var(--contentHeight); height: var(--contentHeight);
.falls_item_user { .falls_item_user{
width: 50%; width: 50%;
display: flex; display: flex;
align-items: center; align-items: center;
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
img { img{
width: 25px; width: 25px;
height: 25px; height: 25px;
border-radius: 50%; border-radius: 50%;
margin-right: 10px; margin-right: 10px;
} }
.falls_item_user_detail { .falls_item_user_detail{
line-height: 1; line-height: 1;
width: 60%; width: 60%;
width: 100%; width: 100%;
color: #000; color: #000;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
> div { >div{
width: 100%; width: 100%;
font-size: 16px; font-size: 16px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
span { span{
font-size: 12px; font-size: 12px;
color: #525252; color: #525252;
} }
} }
} }
.falls_item_detail { .falls_item_detail{
display: flex; display: flex;
// width: 40%; // width: 40%;
// width: 20%; // width: 20%;
// width: 7rem; // width: 7rem;
// width: 70px; // width: 70px;
width: auto; width: auto;
justify-content: space-between; justify-content: space-between;
> label:nth-child(1) { >label:nth-child(1){
margin-right: 2rem; margin-right: 2rem;
} }
> label { >label{
// cursor: pointer; // cursor: pointer;
} }
> label, >label,>div{
> div { display: flex;
display: flex; align-items: center;
align-items: center; i{
i { // font-size: 1.8rem;
// font-size: 1.8rem; font-size: 12px;
font-size: 12px; }
} svg,i{
svg, color: #9e9ea7;
i { display: flex;
color: #9e9ea7; // width: 10px;
display: flex; // height: 10px;
// width: 10px; margin-right: 5px;
// height: 10px; }
margin-right: 5px; span{
} margin-left: 3px;
span { font-size: 12px;
margin-left: 3px; }
font-size: 12px; }
} }
} }
} }
}
}
} }
} }
</style> </style>

1425
src/component/home/chat/index.vue
View File

File diff suppressed because it is too large Load Diff

16
src/component/home/design/collection/PrintboardUpload.vue
View File

@@ -928,8 +928,8 @@ export default defineComponent({
right: 1rem; right: 1rem;
top: 1rem; top: 1rem;
// opacity: 0; // opacity: 0;
width: 3.5rem; width: 3rem;
height: 3.5rem; height: 3rem;
transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
} }
&.modal_imgItem:nth-child(even) { &.modal_imgItem:nth-child(even) {
@@ -942,10 +942,10 @@ export default defineComponent({
} }
.pin_block{ .pin_block{
position: absolute; position: absolute;
left: 1rem; left: .5rem;
top: 1rem; top: 1rem;
width: 8rem; width: 7rem;
height: 3.5rem; height: 3rem;
border-radius: 3rem; border-radius: 3rem;
background: rgba(0,0,0,.7); background: rgba(0,0,0,.7);
color: #fff; color: #fff;
@@ -960,8 +960,8 @@ export default defineComponent({
padding-left: .2rem; padding-left: .2rem;
} }
i{ i{
width: 3rem; width: 2.5rem;
height: 3rem; height: 2.5rem;
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -974,7 +974,7 @@ export default defineComponent({
} }
} }
span{ span{
font-size: 1.8rem; font-size: 1.4rem;
font-weight: 600; font-weight: 600;
} }
} }

16
src/component/home/design/collection/SketchboardUpload.vue
View File

@@ -882,8 +882,8 @@ export default defineComponent({
right: 1rem; right: 1rem;
top: 1rem; top: 1rem;
// opacity: 0; // opacity: 0;
width: 3.5rem; width: 3rem;
height: 3.5rem; height: 3rem;
transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
} }
&.modal_imgItem:nth-child(even) { &.modal_imgItem:nth-child(even) {
@@ -900,10 +900,10 @@ export default defineComponent({
} }
.pin_block{ .pin_block{
position: absolute; position: absolute;
left: 1rem; left: .5rem;
top: 1rem; top: 1rem;
width: 8rem; width: 7rem;
height: 3.5rem; height: 3rem;
border-radius: 3rem; border-radius: 3rem;
background: rgba(0,0,0,.7); background: rgba(0,0,0,.7);
color: #fff; color: #fff;
@@ -918,8 +918,8 @@ export default defineComponent({
padding-left: .2rem; padding-left: .2rem;
} }
i{ i{
width: 3rem; width: 2.5rem;
height: 3rem; height: 2.5rem;
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -932,7 +932,7 @@ export default defineComponent({
} }
} }
span{ span{
font-size: 1.8rem; font-size: 1.4rem;
font-weight: 600; font-weight: 600;
} }
} }

4838
src/component/home/design/index.vue
View File

File diff suppressed because it is too large Load Diff

1
src/component/home/index.vue
View File

@@ -65,6 +65,7 @@ export default defineComponent({
}else{ }else{
data.openType = '' data.openType = ''
data.dataLoad = false data.dataLoad = false
return
} }
// if((query.history || query.id) != (oldQuery.history || oldQuery.id)){ // if((query.history || query.id) != (oldQuery.history || oldQuery.id)){
// } // }

967
src/component/home/newProject/index.vue
View File

@@ -1,530 +1,459 @@
<template> <template>
<div class="newProject"> <div class="newProject">
<div class="contentBox"> <div class="contentBox">
<div class="content"> <div class="content">
<div class="title">How can I help you today?</div> <div class="title">How can I help you today?</div>
<div class="selectFlow"> <div class="selectFlow">
<div class="select"> <div class="select">
<div <div class="item" @click="setFlow(item)" :class="{active:item.title == selectFlow.title}" v-for="item in flowList">{{ item.title }}</div>
class="item" </div>
@click="setFlow(item)" <div class="describe">
:class="{ active: item.title == selectFlow.title }" <p v-for="item in selectFlow.describe">{{ item }}</p>
v-for="item in flowList" </div>
> </div>
{{ item.title }} <div class="chatOrSetting">
</div> <div class="select">
</div> <div class="item" @click="setChatOrSetting('chat')" :class="{active:chatOrSetting == 'chat'}">Chat</div>
<div class="describe"> <div class="item" @click="setChatOrSetting('setting')" :class="{active:chatOrSetting == 'setting'}">Setting</div>
<p v-for="item in selectFlow.describe">{{ item }}</p> </div>
</div> </div>
</div> <div class="chatBox" v-show="chatOrSetting == 'chat'">
<div class="chatOrSetting"> <textarea ref="textarea" @input="inputText($event)" @keydown.enter.prevent="sendChat" placeholder="Write your message"></textarea>
<div class="select"> <div class="btn">
<div <div class="uploadBox">
class="item" <div class="filList">
@click="setChatOrSetting('chat')" <div class="item" v-for="item,index in filList">
:class="{ active: chatOrSetting == 'chat' }" <div>{{item.name}}</div>
> <span class="icon iconfont icon-shanchu" @click="deleteFile(item,index)"></span>
Chat </div>
</div> </div>
<div <i class="fi fi-rs-paperclip-vertical">
class="item" <input type="file" @change="handleFileUpload($event)">
@click="setChatOrSetting('setting')" </i>
:class="{ active: chatOrSetting == 'setting' }" <div class="enableThinking" :class="{active:enableThinking}" @click="()=>enableThinking = !enableThinking">Deep Thinking</div>
> </div>
Setting <div class="sendBox">
</div> <div class="maxNum">{{ chatContent.length }}/10000</div>
</div> <div class="send" @click="sendChat">
</div> <i class="fi fi-ss-paper-plane-top"></i>
<div class="chatBox" v-show="chatOrSetting == 'chat'"> </div>
<textarea </div>
ref="textarea" </div>
@input="inputText($event)" </div>
@keydown.enter.prevent="sendChat" <div v-show="chatOrSetting != 'chat'" class="workspaceBox">
placeholder="Write your message" <workspace @setProject="setProject" :httpWorkflowType="selectFlow.value"></workspace>
></textarea> </div>
<div class="btn"> <div class="hint" v-show="chatOrSetting == 'chat'">
<div class="uploadBox"> <div class="item" v-for="item in hintList" @click="addChatContent(item)">{{ item }}</div>
<div class="filList"> </div>
<div class="item" v-for="(item, index) in filList"> </div>
<div>{{ item.name }}</div> </div>
<span <div class="mark_loading" v-show="loadingShow">
class="icon iconfont icon-shanchu" <a-spin size="large" />
@click="deleteFile(item, index)" </div>
></span> </div>
</div>
</div>
<i class="fi fi-rs-paperclip-vertical">
<input type="file" @change="handleFileUpload($event)" />
</i>
<div
class="enableThinking"
:class="{ active: enableThinking }"
@click="() => (enableThinking = !enableThinking)"
>
Deep Thinking
</div>
</div>
<div class="sendBox">
<div class="maxNum">{{ chatContent.length }}/10000</div>
<div class="send" @click="sendChat">
<i class="fi fi-ss-paper-plane-top"></i>
</div>
</div>
</div>
</div>
<div v-show="chatOrSetting != 'chat'" class="workspaceBox">
<workspace
@setProject="setProject"
:httpWorkflowType="selectFlow.value"
></workspace>
</div>
<div class="hint" v-show="chatOrSetting == 'chat'">
<div
class="item"
v-for="item in hintList"
@click="addChatContent(item)"
>
{{ item }}
</div>
</div>
</div>
</div>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive, onMounted} from 'vue'
defineComponent, import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
computed,
ref,
provide,
nextTick,
createVNode,
toRefs,
reactive,
onMounted,
} from "vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { Https } from "@/tool/https"; import { Https } from "@/tool/https";
import { useStore } from "vuex"; import { useStore } from "vuex";
import { Modal, message, Upload, CascaderProps } from "ant-design-vue"; import { Modal,message,Upload,CascaderProps } from 'ant-design-vue';
import { useI18n } from "vue-i18n"; import { useI18n } from 'vue-i18n'
import { getCookie, clonAllCookie } from "@/tool/cookie"; import {getCookie,clonAllCookie} from '@/tool/cookie'
import router from "@/router"; import router from '@/router';
import workspace from "./workspace.vue"; import workspace from './workspace.vue'
export default defineComponent({ export default defineComponent({
components: { components:{
workspace, workspace,
}, },
props: {}, props:{
emits: ["newProject"], },
setup(props, { emit }) { emits:['newProject'],
const store = useStore(); setup(props,{emit}) {
const data = reactive({ const store = useStore();
flowList: [ const data = reactive({
{ flowList:[
title: "Series Design", {
value: "SERIES_DESIGN", title:'Series Design',
describe: [ value:'SERIES_DESIGN',
"Series Design focuses on the coordinated design of multi-category clothing, ideal for creating a unified fashion collection. You can use the Moodboard, Printboard, Colorboard, Sketchboard, and Mannequin sections in the Design Assests panel to organize your inspiration and design complementary clothing combinations. Finally, refine your designs in the Draft and Collection panels using tools like To Product Image, Relight, and Transfer Pose, then export to the Canvas to showcase your complete series design.", describe:[
], 'Series Design focuses on the coordinated design of multi-category clothing, ideal for creating a unified fashion collection. You can use the Moodboard, Printboard, Colorboard, Sketchboard, and Mannequin sections in the Design Assests panel to organize your inspiration and design complementary clothing combinations. Finally, refine your designs in the Draft and Collection panels using tools like To Product Image, Relight, and Transfer Pose, then export to the Canvas to showcase your complete series design.',
}, ]
{ },
title: "Single Design", {
value: "SINGLE_DESIGN", title:'Single Design',
describe: [ value:'SINGLE_DESIGN',
"Single Design centers on the independent design of a single clothing category, such as a T-shirt, dress, or jacket, without considering coordination with other items. Use the Moodboard, Printboard, Colorboard, and Sketchboard in the Design Assests panel to gather inspiration and focus on crafting a unique piece. Once completed, optimize your design in the Draft and Collection panels with tools like To Product Image, Relight, and Transfer Pose, then export to the Canvas to display your individual creation.", describe:[
], 'Single Design centers on the independent design of a single clothing category, such as a T-shirt, dress, or jacket, without considering coordination with other items. Use the Moodboard, Printboard, Colorboard, and Sketchboard in the Design Assests panel to gather inspiration and focus on crafting a unique piece. Once completed, optimize your design in the Draft and Collection panels with tools like To Product Image, Relight, and Transfer Pose, then export to the Canvas to display your individual creation.',
}, ]
], },
selectFlow: { ],
title: "Series Design", selectFlow:{
value: "SERIES_DESIGN", title:'Series Design',
describe: [ value:'SERIES_DESIGN',
"Series Design focuses on the coordinated design of multi-category clothing, ideal for creating a unified fashion collection. You can use the Moodboard, Printboard, Colorboard, Sketchboard, and Mannequin sections in the Design Assests panel to organize your inspiration and design complementary clothing combinations. Finally, refine your designs in the Draft and Collection panels using tools like To Product Image, Relight, and Transfer Pose, then export to the Canvas to showcase your complete series design.", describe:[
], 'Series Design focuses on the coordinated design of multi-category clothing, ideal for creating a unified fashion collection. You can use the Moodboard, Printboard, Colorboard, Sketchboard, and Mannequin sections in the Design Assests panel to organize your inspiration and design complementary clothing combinations. Finally, refine your designs in the Draft and Collection panels using tools like To Product Image, Relight, and Transfer Pose, then export to the Canvas to showcase your complete series design.',
}, ]
chatContent: "", },
hintList: [ chatContent:'',
"设计一套田园风衣服", hintList:[
"设计一套夏日风衣服", '设计一套田园风衣服',
"设计一套未来风格的衣服", '设计一套夏日风衣服',
], '设计一套未来风格的衣服',
enableThinking: false, //深度思考 ],
uploadFile: null as any, enableThinking:false,//深度思考
loadingShow: false, uploadFile:null as any,
text: "", loadingShow:false,
filList: [] as any, text:'',
textarea: null as any, filList:[] as any,
chatOrSetting: "chat", textarea:null as any,
}); chatOrSetting:'chat',
const dataDom = reactive({}); })
const setFlow = (item: any) => { const dataDom = reactive({
data.selectFlow = item; })
}; const setFlow = (item:any)=>{
data.selectFlow = item
}
const inputText = (e: any) => { const inputText = (e:any)=>{
if (e.target.value.length <= 1000) { if(e.target.value.length <= 1000){
data.chatContent = e.target.value; data.chatContent = e.target.value
} else { }else{
e.target.value = data.chatContent; e.target.value = data.chatContent
} }
e.target.style.height = `${e.target.scrollHeight}px`; e.target.style.height = `${e.target.scrollHeight}px`;
}; }
const addChatContent = (item: any) => { const addChatContent = (item:any)=>{
if (data.textarea.value?.length + item.length > 10000) return; if((data.textarea.value?.length + item.length) > 10000)return
data.chatContent += item; data.chatContent += item
data.textarea.value += item; data.textarea.value += item
}; }
const sendChat = () => { const sendChat = ()=>{
if (!data.chatContent) return; if(!data.chatContent)return
data.loadingShow = true; data.loadingShow = true
let fileList = JSON.parse(JSON.stringify(data.filList)); let fileList = JSON.parse(JSON.stringify(data.filList))
let fileUrl = let fileUrl = (fileList.filter((item:any)=>item.type == 'file').length > 0) ? fileList.filter((item:any)=>item.type == 'file')[0].minioPath : ''
fileList.filter((item: any) => item.type == "file").length > 0 let imageUrlList = (fileList.filter((item:any)=>item.type == 'image').length > 0)? fileList.filter((item:any)=>item.type == 'image').map((item:any)=>item.minioPath).join(',') : ''
? fileList.filter((item: any) => item.type == "file")[0].minioPath Https.axiosGet(Https.httpUrls.chatCreateProject, {params:{prompt:data.chatContent,process:data.selectFlow.value,fileUrl:fileUrl,imageUrlList}}).then((rv)=>{
: ""; if(rv){
let imageUrlList = data.loadingShow = false
fileList.filter((item: any) => item.type == "image").length > 0 let value = {
? fileList id:rv,
.filter((item: any) => item.type == "image") fileList:fileList,
.map((item: any) => item.minioPath) chatContent:data.chatContent,
.join(",") enableThinking:data.enableThinking,
: ""; }
Https.axiosGet(Https.httpUrls.chatCreateProject, { emit('newProject',value)
params: { }
prompt: data.chatContent, }).catch(()=>{
process: data.selectFlow.value, data.loadingShow = false
fileUrl: fileUrl, })
imageUrlList, // let projectId = ''
}, // const eventSource = new EventSource(`${process.env.VUE_APP_BASE_URL}${Https.httpUrls.llmStream}?token=${getCookie('token')}&prompt=${data.chatContent}&projectId=&fileUrl=${fileUrl}&imageUrlList=${imageUrlList}&enableThinking=${data.enableThinking}&process=${data.selectFlow.value}`);
}) // eventSource.onmessage = function(event) {
.then((rv) => { // let eventData = JSON.parse(event.data)
if (rv) { // if(eventData.status == "[PROJECT_CREATE_SIGNAL]"){
data.loadingShow = false; // projectId = JSON.parse(eventData.tools_data).projectId
let value = { // }
id: rv, // };
fileList: fileList, // eventSource.onerror = function(error) {
chatContent: data.chatContent, // if (eventSource.readyState === EventSource.CLOSED) {
enableThinking: data.enableThinking, // // data.chatList[data.chatList.length-1].content.message='服务器繁忙，请稍后再试。'
}; // } else {
emit("newProject", value); // if(projectId){
} // emit('newProject',projectId)
}) // }
.catch(() => { // eventSource.close()
data.loadingShow = false; // }
}); // data.loadingShow = false
// let projectId = '' // };
// const eventSource = new EventSource(`${import.meta.env.VITE_APP_BASE_URL}${Https.httpUrls.llmStream}?token=${getCookie('token')}&prompt=${data.chatContent}&projectId=&fileUrl=${fileUrl}&imageUrlList=${imageUrlList}&enableThinking=${data.enableThinking}&process=${data.selectFlow.value}`); }
// eventSource.onmessage = function(event) { const handleFileUpload = (event:any)=>{
// let eventData = JSON.parse(event.data) if (event.target.files[0].size > 5 * 1024 * 1024) { // 5MB
// if(eventData.status == "[PROJECT_CREATE_SIGNAL]"){ message.info('The file size cannot exceed 5MB.');
// projectId = JSON.parse(eventData.tools_data).projectId return
// } }
// }; let type = event.target.files[0].type.startsWith('image/')
// eventSource.onerror = function(error) { if(type){
// if (eventSource.readyState === EventSource.CLOSED) { if(data.filList.filter((item:any)=>item.type == 'image').length >= 5){
// // data.chatList[data.chatList.length-1].content.message='服务器繁忙，请稍后再试。' message.info('You can only upload five pictures.');
// } else { return
// if(projectId){ }
// emit('newProject',projectId) }else{
// } if(data.filList.filter((item:any)=>item.type == 'file').length >= 1){
// eventSource.close() message.info('You can only upload one file.');
// } return
// data.loadingShow = false }
// }; }
}; data.loadingShow = true
const handleFileUpload = (event: any) => { const formData = new FormData();
if (event.target.files[0].size > 5 * 1024 * 1024) { formData.append('file', event.target.files[0]);
// 5MB let config:any = {
message.info("The file size cannot exceed 5MB."); headers:{'Content-Type':'multipart/form-data','Accept':'*/*' },
return; params:formData,
} }
let type = event.target.files[0].type.startsWith("image/"); Https.axiosPost(Https.httpUrls.llmUploadFile,formData,config)
if (type) { .then((rv: any) => {
if ( let obj = {
data.filList.filter((item: any) => item.type == "image").length >= 5 name:event.target.files[0].name,
) { type:type?'image':'file',
message.info("You can only upload five pictures."); minioPath:rv[0],
return; url:rv[1],
} }
} else { data.filList.push(obj)
if ( data.loadingShow = false
data.filList.filter((item: any) => item.type == "file").length >= 1 }
) { ).catch(rv=>{
message.info("You can only upload one file."); data.loadingShow = false
return; })
} }
} const deleteFile = (item:any,index:number)=>{
data.loadingShow = true; data.filList.splice(index,1)
const formData = new FormData(); }
formData.append("file", event.target.files[0]); const setChatOrSetting = (str:any)=>{
let config: any = { data.chatOrSetting = str
headers: { "Content-Type": "multipart/form-data", Accept: "*/*" }, }
params: formData, const setProject = (item:any)=>{
}; router.push(`home?history=${item.id}`)
Https.axiosPost(Https.httpUrls.llmUploadFile, formData, config) }
.then((rv: any) => { onMounted(()=>{
let obj = { store.commit('createProbject')
name: event.target.files[0].name, })
type: type ? "image" : "file", return{
minioPath: rv[0], ...toRefs(dataDom),
url: rv[1], ...toRefs(data),
}; setFlow,
data.filList.push(obj); inputText,
data.loadingShow = false; addChatContent,
}) sendChat,
.catch((rv) => { handleFileUpload,
data.loadingShow = false; deleteFile,
}); setChatOrSetting,
}; setProject,
const deleteFile = (item: any, index: number) => { }
data.filList.splice(index, 1); },
}; provide() {
const setChatOrSetting = (str: any) => { return {
data.chatOrSetting = str; }
}; },
const setProject = (item: any) => { })
router.push(`home?history=${item.id}`);
};
onMounted(() => {
store.commit("createProbject");
});
return {
...toRefs(dataDom),
...toRefs(data),
setFlow,
inputText,
addChatContent,
sendChat,
handleFileUpload,
deleteFile,
setChatOrSetting,
setProject,
};
},
provide() {
return {};
},
});
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.newProject { .newProject{
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
> .contentBox { > .contentBox{
width: 100%; width: 100%;
height: calc(100% - 3.9rem); height: calc(100% - 3.9rem);
// height: calc(100% - 7.8rem); // height: calc(100% - 7.8rem);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
> .content { > .content{
// background: red; // background: red;
width: 88rem; width: 88rem;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
> .title { > .title{
font-size: 2rem; font-size: 2rem;
font-weight: 600; font-weight: 600;
text-align: center; text-align: center;
} }
> .workspaceBox { > .workspaceBox{
flex: 1; flex: 1;
border-radius: 2.4rem; border-radius: 2.4rem;
padding: 1.2rem; padding: 1.2rem;
border: 1px solid #0000001a; border: 1px solid #0000001a;
:deep(.workspace) { :deep(.workspace){
padding: 0; padding: 0;
height: auto; height: auto;
} }
} }
> .selectFlow { > .selectFlow{
margin-top: 4.8rem; margin-top: 4.8rem;
width: 100%; width: 100%;
border-radius: 2.4rem; border-radius: 2.4rem;
border: 1px solid #0000001a; border: 1px solid #0000001a;
padding: 1.2rem; padding: 1.2rem;
> .select { > .select{
border: 1px solid #0000001a; border: 1px solid #0000001a;
border-radius: 2.4rem; border-radius: 2.4rem;
display: flex; display: flex;
padding: 0.2rem; padding: .2rem;
border-radius: 2rem; border-radius: 2rem;
> div { > div{
white-space: nowrap; white-space: nowrap;
justify-content: space-between; justify-content: space-between;
border-radius: 2.2rem; border-radius: 2.2rem;
font-size: 1.6rem; font-size: 1.6rem;
padding: 0.6rem 0.8rem; padding: .6rem .8rem;
min-width: 25%; min-width: 25%;
text-align: center; text-align: center;
font-weight: 600; font-weight: 600;
color: #71717a; color: #71717a;
cursor: pointer; cursor: pointer;
&.active { &.active{
background: #efeff1; background: #efeff1;
color: #3f3f46; color: #3f3f46;
} }
} }
} }
> .describe { > .describe{
margin-top: 1.6rem; margin-top: 1.6rem;
margin-left: 0.8rem; margin-left: .8rem;
> p { > p{
margin: 0; margin: 0;
color: #71717a; color: #71717a;
font-weight: 400; font-weight: 400;
font-size: 1.2rem; font-size: 1.2rem;
} }
} }
} }
> .chatOrSetting { > .chatOrSetting{
margin-top: 2.4rem; margin-top: 2.4rem;
width: min-content; width: min-content;
margin-left: auto; margin-left: auto;
> .select { > .select{
border: 1px solid #0000001a; border: 1px solid #0000001a;
border-radius: 2.4rem; border-radius: 2.4rem;
display: flex; display: flex;
padding: 0.2rem; padding: .2rem;
border-radius: 2rem; border-radius: 2rem;
> div { > div{
white-space: nowrap; white-space: nowrap;
justify-content: space-between; justify-content: space-between;
border-radius: 2.2rem; border-radius: 2.2rem;
font-size: 1.6rem; font-size: 1.6rem;
padding: 0.6rem 0.8rem; padding: .6rem .8rem;
min-width: 10rem; min-width: 10rem;
text-align: center; text-align: center;
font-weight: 600; font-weight: 600;
color: #71717a; color: #71717a;
cursor: pointer; cursor: pointer;
&.active { &.active{
background: #efeff1; background: #efeff1;
color: #3f3f46; color: #3f3f46;
} }
} }
} }
} }
> .chatBox { > .chatBox{
margin-top: 0.4rem; margin-top: .4rem;
border-radius: 2.4rem; border-radius: 2.4rem;
position: relative; position: relative;
background: #f5f5f5; background: #f5f5f5;
> textarea { > textarea{
padding: 1.6rem 2rem 0; padding: 1.6rem 2rem 0;
background: #f5f5f5; background: #f5f5f5;
width: 100%; width: 100%;
min-height: 7.2rem; min-height: 7.2rem;
border-radius: 2.4rem; border-radius: 2.4rem;
font-weight: 400; font-weight: 400;
line-height: 2rem; line-height: 2rem;
font-size: 1.4rem; font-size: 1.4rem;
resize: none; resize: none;
border: none; border: none;
overflow-y: hidden; overflow-y: hidden;
} }
> .btn { > .btn{
padding: 0 1.2rem 1.2rem; padding: 0 1.2rem 1.2rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
> .uploadBox { > .uploadBox{
display: flex; display: flex;
align-items: center; align-items: center;
> .filList { > .filList{
display: flex; display: flex;
> .item { > .item{
height: 3rem; height: 3rem;
padding: 0.5rem 1rem; padding: .5rem 1rem;
background: #efeff1; background: #efeff1;
border-radius: 0.5rem; border-radius: .5rem;
margin-right: 1rem; margin-right: 1rem;
font-size: 1.4rem; font-size: 1.4rem;
line-height: 2rem; line-height: 2rem;
display: flex; display: flex;
> div { > div{
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
max-width: 10rem; max-width: 10rem;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
> span { > span{
cursor: pointer; cursor: pointer;
} }
} }
} }
> .enableThinking { > .enableThinking{
width: 10rem; width: 10rem;
padding: 0.2rem 0.4rem; padding: .2rem .4rem;
margin-left: 1rem; margin-left: 1rem;
text-align: center; text-align: center;
font-size: 1.4rem; font-size: 1.4rem;
border: 1px solid #000; border: 1px solid #000;
border-radius: 0.4rem; border-radius: .4rem;
cursor: pointer; cursor: pointer;
&.active { &.active{
background: #000; background: #000;
color: #fff; color: #fff;
}
}
}
i {
font-size: 2rem;
display: flex;
cursor: pointer;
position: relative;
> input {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
cursor: pointer;
&::-webkit-file-upload-button {
cursor: pointer;
}
}
}
> .sendBox {
display: flex;
align-items: center;
> .maxNum { }
font-size: 1.2rem; }
margin-right: 0.8rem; }
font-weight: 400; i{
} font-size: 2rem;
} display: flex;
} cursor: pointer;
} position: relative;
> .hint { > input{
display: flex; width: 100%;
margin-top: 2.4rem; height: 100%;
> div { position: absolute;
background: #efeff1; top: 0;
width: 25rem; left: 0;
height: 4.8rem; opacity: 0;
margin-right: 1.2rem; cursor: pointer;
border-radius: 1.6rem; &::-webkit-file-upload-button {
cursor: pointer; cursor: pointer;
padding: 1.2rem; }
&:hover { }
background: #f5f5f5; }
} > .sendBox{
:first-child { display: flex;
margin-right: 0; align-items: center;
}
} > .maxNum{
} font-size: 1.2rem;
} margin-right: .8rem;
} font-weight: 400;
} }
}
}
}
> .hint{
display: flex;
margin-top: 2.4rem;
> div{
background: #efeff1;
width: 25rem;
height: 4.8rem;
margin-right: 1.2rem;
border-radius: 1.6rem;
cursor: pointer;
padding: 1.2rem;
&:hover{
background: #f5f5f5;
}
:first-child{
margin-right: 0;
}
}
}
}
}
}
</style> </style>

2033
src/component/mainPage/signUp/registerModel.vue
View File

File diff suppressed because it is too large Load Diff

907
src/component/modules/generalMiniCanvas.vue
View File

@@ -1,843 +1,142 @@
<template> <template>
<div class="generalMiniCanvas"> <div class="generalCanvas">
<div class="addDetails_canvasCenter"> <div class="canvasBox" ref="canvasBox">
<div class="generalMiniCanvas_input generalMiniCanvas_item" :class="{spread:spreadState}"> <editCanvas v-if="canvasLoad" :config="canvasConfig" :clothingImageUrl="imgUrl" ref="editCanvas"></editCanvas>
<div class="generalMiniCanvas_input_item brushwork" v-show="canvasState == 'pencil'">
<span >{{ $t('exportModel.Brushwork') }}:</span>
<a-select ref="select" class="label_select" size="small" v-model:value="brushworkValue"
style="width: 20rem"
@change="brushworkChange"
>
<a-select-option class="label_select_item" v-for="item in brushList" :value="item.value">
<img :src="item.url" alt="">
</a-select-option>
</a-select>
</div>
<div class="generalMiniCanvas_input_item" v-show="(canvasState != 'move' && canvasState != 'liquidation' && canvasState != 'movePosition' && canvasState != 'zoomIn' && canvasState != 'zoomOut' && brushworkValue != 'RibbonBrush' && brushworkValue != 'LongfurBrush')">
<span>{{ $t('exportModel.Size') }}</span>
<input type="range" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth[canvasState]">
</div>
<div class="generalMiniCanvas_input_item" v-show="canvasState == 'liquidation'">
<span>{{ $t('exportModel.Size') }}</span>{{ canvasPencilWidth.routes }}
<input type="range" @change="routesChange('routes')" min="1" max="100" v-model="canvasPencilWidth.routes">
</div>
<div class="generalMiniCanvas_input_item" v-show="canvasState == 'liquidation'">
<span>{{ $t('exportModel.density') }}</span>
<input type="range" @change="routesChange('density')" min="1" max="100" v-model="canvasPencilWidth.density">
</div>
<div class="generalMiniCanvas_input_item" v-show=" canvasState == 'pencil'">
<span>{{ $t('exportModel.Color') }}</span>
<input type="color" @input="setPencilColor" v-model="canvasPencilColor">
</div>
</div>
<div class="exportCanvasBox_center_data">
<div class="generalMiniCanvas_btn generalMiniCanvas_item" :class="{spread:spreadState}">
<!-- <div @click="setOperation('')" class="generalMiniCanvas_btn_item">
<div>新增</div>
</div> -->
<i class="icon iconfont icon-chehui" @click="canvasGeneral.historyState('')"></i>
<i class="icon iconfont icon-fanchehui" @click="canvasGeneral.historyState('reverse')"></i>
<i class="icon iconfont icon-move" @click="setOperation('movePosition')" :class="{active:canvasState == 'movePosition'}"></i>
<!-- <i class="icon iconfont icon-move" @click="setOperation('move')" :class="{active:canvasState == 'move'}"></i> -->
<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:canvasState == 'pencil'}"></i>
<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:canvasState == 'eraser'}"></i>
<!-- <i class="icon iconfont icon-IC-yehua" @click="setOperation('liquidation')"></i> -->
<i class="icon iconfont icon-IC-yehua" @click="setLiquefaction()"></i>
<!-- <div class="icon iconfont icon-xiala" :class="{btnRotate:spreadState}" @click="()=>spreadState = !spreadState"></div> -->
<i class="fi fi-rr-zoom-in" @click="setOperation('zoomIn')" :class="{active:canvasState == 'zoomIn'}"></i>
<i class="fi fi-rr-zoom-out" @click="setOperation('zoomOut')" :class="{active:canvasState == 'zoomOut'}"></i>
</div>
<div class="exportCanvasBox_center_box">
<div class="exportCanvasBox_center">
</div>
<!-- <div v-show="arrows.show" class="moveDom" :style="arrows.domStyle"></div>
<div v-show="arrows.show" class="jiantouDom" :style="arrows.jiantouStyle"> </div> -->
<div class="editFrontBack_pencilbtn" v-show="loadingShow" :style="pencilbtnStyle"></div>
</div>
</div>
</div> </div>
<div class="exportCanvasBox_submit" @click="setSubmit(false)"> <div class="mark_loading" v-show="isShowMark">
<div class="started_btn"> <a-spin size="large" />
{{ $t('addDetails.submit') }}
</div>
</div> </div>
<liquefaction ref="liquefaction" @submitLiquefaction="submitLiquefaction"></liquefaction>
</div> </div>
</template> </template>
<script> <script>
import { defineComponent, ref, reactive, watch, onMounted, onBeforeUnmount, nextTick, toRefs } from "vue"; import {defineComponent, toRefs, provide, h, ref, nextTick, onBeforeUnmount, reactive, onMounted,
import creditsDetail from "@/component/Pay/creditsDetail.vue"; } from "vue";
import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JSSetRemoveImage,JScreateCheck,JSSetTexture } from "@/tool/canvasDrawing"; import {message} from 'ant-design-vue'
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import canvasGeneral from "@/tool/canvasGeneral"; import canvasGeneral from "@/tool/canvasGeneralCopy";
import { getMousePosition } from "@/tool/mdEvent"; import editCanvas from "@/component/Canvas/CanvasEditor/index.vue";
import liquefaction from "@/component/modules/liquefaction.vue";
export default defineComponent({ export default defineComponent({
components: { components: {
creditsDetail, editCanvas,
liquefaction
}, },
emits: ['submitBase64Data'], props:{
props: { imgUrl:{
imgUrl: { type:String,
type: String, default:''
default: '' }
},
}, },
// watch: { emits:['submitBase64Data'],
// // imgUrl: function(newVal, oldVal) {
// // console.log(newVal);
// // // 当propertyName数据发生变化时，执行相应的操作
// // }
// imgUrl(newVal, oldVal) {
// console.log(`imgUrl changed from ${oldVal} to ${newVal}`);
// },
// },
setup(props,{emit}) { setup(props,{emit}) {
let presentState = ref('paypal'); const { t } = useI18n();
let showPayOrder = ref(false); const store = useStore();
let loadingShow = ref(false); const isShowMark = ref(false)
let { t } = useI18n(); const component = reactive({
let canvas = reactive({});
let scale = 2;
let ratio = [1,1]
let exportWH = 512
let pencilbtnStyle = ref({
background:'',
width:0+'px',
height:0+'px',
display:'none',
left:0+'px',
top:0+'px',
}) })
let canvasBtn = reactive({ const data = reactive({
canvasState:'move', canvasLoad:false,
canvasPencilWidth:{ canvasConfig:{
pencil:20,
eraser:20,
routes:30,
density:30,
}, },
canvasPencilColor:'#000000',
spreadState:false,
}) })
let canvasWH = ref(0); const dataDom = reactive({
let arrows = ref({ editCanvas:null,
show:false, canvasBox:null,
domStyle:{
left:0,
top:0,
width:0,
height:0,
},
jiantouStyle:{
height:'1px',
transform:`translateY(-100%) rotate(${90}deg)`,
}
})
watch(
() => props.imgUrl,
(newValue, oldValue) => {
init()
}) })
const openSetData = ()=>{
data.canvasLoad = true
}
const addImage = (value)=>{
console.log(value)
dataDom.editCanvas.addImageToLayer(value.imgUrl)
}
const addBottomImage = (value)=>{
dataDom.editCanvas.changeFixedImage(value)
}
const getData = async ()=>{
onMounted(()=>{ }
init() const getCanvasData = ()=>{
})
onBeforeUnmount(()=>{
canvasGeneral.canvasClear()
})
let reverseCanvasState = ref([])//存放canvas操作
let normalCanvasState = ref([])//存放canvas操作
let canvasState = ref()//存放canvas操作
let keyDown = []//监听键盘的 keydown 和 keyup 事件
let isMovePostion = false
let init = ()=>{
normalCanvasState.value = []
reverseCanvasState.value = []
showPayOrder.value = true;
ratio = [1,1]
nextTick(()=>{
let canvasBox = document.querySelector(".generalMiniCanvas .exportCanvasBox_center");
document.removeEventListener('mousemove', mouseMove);
document.removeEventListener('touchmove', touchmove);
let img = new Image(); return canvasExport
img.onload = async function(){ }
loadingShow.value = true onMounted(() => {
let height = canvasBox.offsetHeight; if(props.imgUrl){
canvasWH.value = height let img = new Image()
// canvasBox.style.width = height+'px' img.onload = ()=>{
let wScale = 1 let domHeight = dataDom.canvasBox.offsetHeight
let hScale = 1 let imgHeight = img.height
if(img.width>img.height){ data.canvasConfig.height = domHeight
hScale = img.height/img.width data.canvasConfig.width = imgHeight/domHeight * img.width
exportWH = img.width // canvasWH.value = height
}else{ // // canvasBox.style.width = height+'px'
wScale = img.width/img.height // let wScale = 1
exportWH = img.height // let hScale = 1
} // if(img.width>img.height){
ratio = [wScale,hScale] // hScale = img.height/img.width
canvas = canvasGeneral.canvasInit(canvasBox,{ // exportWH = img.width
width:canvasWH.value * wScale, // }else{
height:canvasWH.value * hScale, // wScale = img.width/img.height
}) // exportWH = img.height
canvas.selection = false; // }
// canvas.set({ // ratio = [wScale,hScale]
// backgroundColor: 'lightblue' // canvas = canvasGeneral.canvasInit(canvasBox,{
// }); // width:canvasWH.value * wScale,
scale = img.height/canvas.height // height:canvasWH.value * hScale,
pencilbtnStyle.value.background = canvasBtn.canvasPencilColor // })
// canvas.selection = false;
fabric.Object.prototype.cornerSize = 10 // dataDom.editCanvas.addImageToLayer(img)
fabric.Object.prototype.transparentCorners = false data.canvasLoad = true
await fabric.Image.fromURL(props.imgUrl, async function(img) {
// 设置背景图对象的宽度和高度与 canvas 相同
img.scaleToWidth(canvas.width);
img.scaleToHeight(canvas.height);
img.set({
scaleX: canvas.width / img.width,
scaleY: canvas.height / img.height
});
// 将背景图添加到 canvas 的底层
await canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
if(!fabric.Object.prototype.controls.deleteControl){
JSSetRemoveImage(deleteObj)
}else{
fabric.Object.prototype.controls.deleteControl.mouseUpHandler = deleteObj
}
setPencilWidth()
canvasGeneral.updateCanvasState()
},{ crossOrigin: "Anonymous" });
// 鼠标抬起事件
canvas.on('mouse:up', function(event) {
if(isMovePostion)isMovePostion = false
// if(canvasBtn.canvasState != 'move')canvasGeneral.updateCanvasState('mouseUp')
});
canvas.on("mouse:down", event=>setCanvasDown(event));
canvas.on('mouse:wheel', opt => {
const delta = opt.e.deltaY // 滚轮，向上滚一下是 -100，向下滚一下是 100
let zoom = canvas.getZoom() // 获取画布当前缩放值
zoom *= 0.999 ** delta
if (zoom > 20) zoom = 20
if (zoom < 0.01) zoom = 0.01
canvas.zoomToPoint(
{ // 关键点
x: opt.e.offsetX,
y: opt.e.offsetY
},
zoom
)
opt.e.preventDefault()
opt.e.stopPropagation()
upDataPencilWidth(zoom)
})
canvas.on("mouse:move", event=>setCanvasMove(event));
//画布上移动
document.addEventListener('mousemove', mouseMove);
document.addEventListener('touchmove', touchmove);
setOperation('pencil')
img.remove()
} }
img.src = props.imgUrl img.src = props.imgUrl
})
}
let clearCanvas = ()=>{
canvasBtn.canvasState = 'move'
canvasBtn.spreadState = false
canvasGeneral.canvasClear()
}
let mouseMove = (event)=>{
let e = getMousePosition(event,false)
setDomMove(e)
}
let touchmove = (event)=>{
let e = getMousePosition(event,true)
setDomMove(e)
}
let setDomMove = (event)=>{
if(canvas.isDrawingMode){
canvas.setCursor('none');
}
let canvasCenterBox = document.querySelector(".generalMiniCanvas .exportCanvasBox_center_box");
if(!canvasCenterBox)return
let parentX = event.clientX - canvasCenterBox.getBoundingClientRect().left
let parentY = event.clientY - canvasCenterBox.getBoundingClientRect().top
pencilbtnStyle.value.left = parentX + "px"
pencilbtnStyle.value.top = parentY+'px'
}
let setCanvasMove = (event) =>{
if(canvasBtn.canvasState == 'movePosition' && isMovePostion)setCanvasPosition(event)
}
let lastPosX = 0
let lastPosY = 0
let setCanvasDown = (event)=>{
if(canvasBtn.canvasState == 'movePosition'){
isMovePostion = true;
lastPosX = event.pointer.x;
lastPosY = event.pointer.y;
return
}
if(canvasBtn.canvasState == 'zoomIn' || canvasBtn.canvasState == 'zoomOut'){
setCanvasZoom(event)
return
}
}
let setCanvasPosition = (event)=>{
const e = event;
const vpt = canvas.viewportTransform;
vpt[4] += e.pointer.x - lastPosX; // 更新水平偏移
vpt[5] += e.pointer.y - lastPosY; // 更新垂直偏移
canvas.requestRenderAll(); // 请求重绘画布
lastPosX = e.pointer.x;
lastPosY = e.pointer.y;
}
let setCanvasZoom = (opt)=>{
let zoom = canvas.getZoom() // 获取画布当前缩放值
let num = -100
if(canvasBtn.canvasState == 'zoomOut') num = 100
zoom *= 0.999 ** num
if (zoom > 20) zoom = 20
if (zoom < 0.01) zoom = 0.01
// console.log(zoom);
canvas.zoomToPoint(
{ // 关键点
x: opt.pointer.x,
y: opt.pointer.y
},
zoom
)
opt.e.preventDefault()
opt.e.stopPropagation()
upDataPencilWidth(zoom)
}
let setOperation = (str)=>{
canvasBtn.canvasState = str
let canvasCenterBox = document.querySelector(".generalMiniCanvas .exportCanvasBox_center_box");
let classList = canvasCenterBox.className.split(' ');
canvasCenterBox.className = 'exportCanvasBox_center_box'
if(str == 'move'){
setMove()
pencilbtnStyle.value.display = `none`
canvasCenterBox.className = 'exportCanvasBox_center_box'
}else if(str == 'pencil'){
setPencil()
pencilbtnStyle.value.display = `block`
canvasCenterBox.className = 'exportCanvasBox_center_box cursorNone'
}else if(str == 'eraser'){
setEraser()
pencilbtnStyle.value.display = `block`
canvasCenterBox.className = 'exportCanvasBox_center_box cursorNone'
}else if(str == 'liquidation'){
canvas.isDrawingMode = false
canvasCenterBox.className = 'exportCanvasBox_center_box cursorNone'
}else if(str == 'zoomIn' || str == 'zoomOut'){
pencilbtnStyle.value.display = `none`
canvas.isDrawingMode = false
canvas.forEachObject((obj) =>obj.selectable = false);
canvasCenterBox.className = 'exportCanvasBox_center_box'
}else if(str == 'movePosition'){
canvas.isDrawingMode = false
pencilbtnStyle.value.display = `none`
canvas.forEachObject((obj) =>obj.selectable = false);
canvasCenterBox.className = 'exportCanvasBox_center_box cursorMove'
}
}
let brushworkValue = ref('PencilBrush')
let brushworkChange = (value)=>{
brushworkValue.value = value
setPencil()
}
let setMove = ()=>{
canvas.isDrawingMode = false
canvas.forEachObject((obj) =>obj.selectable = true);
}
let brushList = ref([
{
value:'PencilBrush',
url:'/image/brush/PencilBrush.jpg'
},{
value:'Marking',
url:'/image/brush/PencilBrush-2.jpg'
},{
value:'InkBrush',
url:'/image/brush/InkBrush.jpg'
},{
value:'CrayonBrush',
url:'/image/brush/CrayonBrush.jpg'
},{
value:'RibbonBrush',
url:'/image/brush/RibbonBrush.jpg'
},{
value:'MarkerBrush',
url:'/image/brush/MarkerBrush.jpg'
},{
value:'WritingBrush',
url:'/image/brush/WritingBrush.jpg'
},{
value:'LongfurBrush',
url:'/image/brush/LongfurBrush.jpg'
},{
value:'SpraypaintBrush',
url:'/image/brush/SpraypaintBrush.jpg'
},
])
let setPencil = ()=>{
let pencil
canvas.isDrawingMode = true//开启绘画模式
if(brushworkValue.value == 'PencilBrush'){
pencil = new fabric.PencilBrush(canvas,{}); //普通笔
}else if(brushworkValue.value == 'Marking'){
pencil = new fabric.PencilBrush(canvas,); //记号笔
}else if(brushworkValue.value == 'InkBrush'){
pencil = new fabric.InkBrush(canvas,{}); //油画笔
}else if(brushworkValue.value=='CrayonBrush'){
pencil = new fabric.CrayonBrush(canvas,{}); //蜡笔
}else if(brushworkValue.value == 'RibbonBrush'){
pencil = new fabric.RibbonBrush(canvas,{width: 1,}); //色带
}else if(brushworkValue.value == 'MarkerBrush'){
pencil = new fabric.MarkerBrush(canvas,{}); //书写笔
// pencil = new fabric.PenBrush(canvas,{}); //书写笔
}else if(brushworkValue.value == 'WritingBrush'){
pencil = new fabric.WritingBrush(canvas,{}); //毛笔
}else if(brushworkValue.value == 'LongfurBrush'){
pencil = new fabric.LongfurBrush(canvas,{width: 1,}); //色带
}else if(brushworkValue.value == 'SpraypaintBrush'){
pencil = new fabric.SpraypaintBrush(canvas,{}); //长毛刷
}
canvas.freeDrawingBrush = pencil
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
pencilbtnStyle.value.background = canvasBtn.canvasPencilColor
canvas.freeDrawingBrush.isEraser = false
setPencilWidth()
pencilColor()
}
let setEraser = ()=>{
canvas.isDrawingMode = true
let eraser = new fabric.EraserBrush(canvas)
canvas.freeDrawingBrush = eraser
canvas.requestRenderAll();
canvas.freeDrawingBrush.isEraser = true
pencilbtnStyle.value.background = `rgb(255,255,255)`
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
setPencilWidth()
}
let upDataPencilWidth = (zoom)=>{
if(canvasBtn.canvasPencilWidth[canvasBtn?.canvasState]){
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]) / zoom;
}
}
let deleteObj = ()=> {
// if(!canvas.getActiveObjects()){
// return
// }
let target = canvas.getActiveObjects()
target.forEach((item)=>{
canvas.fxRemove(item, {
onComplete(){
canvas.discardActiveObject(); // 丢弃当前选中的对象
canvas.renderAll(); // 重新渲染 Canvas
}
})
canvas.FX_DURATION = 300
})
}
let setTimeOut = {
pencilWidth:null,
color:null,
}
let setPencilWidth = ()=>{//切换颜色给铅笔设置颜色
clearTimeout(setTimeOut.pencilWidth)
setTimeOut.pencilWidth = setTimeout(()=>{
let zoom = canvas.getZoom() // 获取画布当前缩放值
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]) / zoom
pencilbtnStyle.value.height = canvasBtn.canvasPencilWidth[canvasBtn.canvasState]+'px'
pencilbtnStyle.value.width = canvasBtn.canvasPencilWidth[canvasBtn.canvasState]+'px'
if(brushworkValue.value == 'RibbonBrush' || brushworkValue.value == 'LongfurBrush'){
canvas.freeDrawingBrush.width = 1;
pencilbtnStyle.value.height = 1+'px'
pencilbtnStyle.value.width = 1+'px'
}
},300)
}
let setPencilColor = ()=>{//切换颜色给铅笔设置颜色
clearTimeout(setTimeOut.color)
// clearTimeout(setTimeOut.colorHistory)
setTimeOut.color = setTimeout(()=>{
pencilColor()
},200)
// setTimeOut.colorHistory = setTimeout(()=>{
// colorHistoryList.value.push(canvasPencilColor.value)
// },1000)
}
let hexToRgba=(hex, alpha)=> {
const r = parseInt(hex.slice(1, 3), 16);
const g = parseInt(hex.slice(3, 5), 16);
const b = parseInt(hex.slice(5, 7), 16);
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
}
let pencilColor = ()=>{
if(canvas.freeDrawingBrush.isEraser){
canvas.freeDrawingBrush.color = '#FFFFFF';
}else{ }else{
pencilbtnStyle.value.background = canvasBtn.canvasPencilColor data.canvasLoad = true
if(brushworkValue.value == 'Marking'){
console.log(canvasBtn.canvasPencilColor);
console.log(hexToRgba(canvasBtn.canvasPencilColor,.5));
canvas.freeDrawingBrush.color = hexToRgba(canvasBtn.canvasPencilColor,.5)
}else{
canvas.freeDrawingBrush.color = canvasBtn.canvasPencilColor
}
} }
} });
let routesChange = (str)=>{ onBeforeUnmount(()=>{
canvasBtn.canvasPencilWidth[str] = Math.round(canvasBtn.canvasPencilWidth[str]/10)*10; data.canvasLoad = false
if (canvasBtn.canvasPencilWidth[str] < 10) { // canvasGeneral.canvasClear()
canvasBtn.canvasPencilWidth[str] = 10; // 设置为最小值 })
} else if (canvasBtn.canvasPencilWidth[str] > 100) {
canvasBtn.canvasPencilWidth[str] = 100; // 设置为最大值
}
}
let setSubmit = (liquefation)=>{
return new Promise((resolve,reject)=>{
var allObjects = canvas.getObjects();
// return
// if(allObjects.length == 0){
// return message.info(t('addDetails.jsContent1'))
// }
var canvasDom = document.createElement("canvas");
let exportCanvas = new fabric.Canvas(canvasDom, {
backgroundColor: "#FFFFFF",
width: exportWH * ratio[0],
height: exportWH * ratio[1],
isDrawingMode: false, // 开启绘图模式
});
canvas.backgroundImage.clone(async (back)=>{
back.set({
scaleX:1,
scaleY:1,
left:back.left*scale,
top:back.top*scale ,
})
exportCanvas.backgroundImage = back
await new Promise((resolve, reject) => {
if(allObjects.length == 0)resolve('')
allObjects.forEach((item,index)=>{
// let obj = fabric.util.object.clone(item);
if(item.type == 'circle')return
let obj
item.clone((cloned)=>{
console.log(cloned);
obj = cloned
console.log(obj.set);
if(obj.set){
obj.set(
{
scaleX:(item.scaleX?item.scaleX:1)*scale,
scaleY:(item.scaleY?item.scaleY:1)*scale,
left:item.left*scale,
top:item.top*scale,
}
)
}
// else{
// console.log(item.width,scale);
// obj.width = (item.width?item.width:1)*scale
// obj.height = (item.height?item.height:1)*scale
// obj.left = item.left*scale
// obj.top = item.top*scale
// }
exportCanvas.add(obj)
if(index == allObjects.length - 1){
resolve('')
}
})
})
})
let position = JSON.parse(JSON.stringify(canvas.viewportTransform))
position[4] *= scale
position[5] *= scale
//设置画布当前那位置和缩放
// exportCanvas.viewportTransform = position
let data = exportCanvas.toDataURL("image/png");
if(liquefation){
return resolve(data)
}
cancelDsign()
clearCanvas()
emit('submitBase64Data',data)
resolve('')
})
})
}
let cancelDsign = ()=>{
showPayOrder.value = false
}
let liquefactionData = ref(null)
let liquefaction = ref(null)
let submitLiquefaction = (rv)=>{
// const originalWidth = liquefactionData.value.width // 保存原始宽度
// const originalHeight = liquefactionData.value.height; // 保存原始高度
canvas.viewportTransform = [1,0,0,1,0,0]
fabric.Image.fromURL(rv, function(img) {
// 设置背景图对象的宽度和高度与 canvas 相同
img.scaleToWidth(canvas.width);
img.scaleToHeight(canvas.height);
img.set({
scaleX: canvas.width / img.width,
scaleY: canvas.height / img.height
});
// 将背景图添加到 canvas 的底层
canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
if(!fabric.Object.prototype.controls.deleteControl){
JSSetRemoveImage(deleteObj)
}else{
fabric.Object.prototype.controls.deleteControl.mouseUpHandler = deleteObj
}
setPencilWidth()
canvasGeneral.updateCanvasState()
},{ crossOrigin: "Anonymous" });
}
let setLiquefaction =async ()=>{
// const activeObjects = canvas.backgroundImage // 获取选中的对象
// console.log(setSubmit(true));
let activeObjects = await setSubmit(true)
if (activeObjects) {
liquefactionData.value = activeObjects
liquefaction.value.init(activeObjects)
} else {
// message.info(useI18.t('exportModel.jsContent6'))
return null;
}
}
return { return {
presentState, ...toRefs(data),
showPayOrder, ...toRefs(dataDom),
loadingShow, isShowMark,
t, addImage,
pencilbtnStyle, getData,
...toRefs(canvasBtn), getCanvasData,
arrows,
liquefactionData,
liquefaction,
init,
setOperation,
setPencilWidth,
setPencilColor,
setSubmit,
cancelDsign,
submitLiquefaction,
setLiquefaction,
routesChange,
brushList,
brushworkValue,
brushworkChange,
canvasGeneral,
}; };
}, },
data() { data(prop) {
return { return {
}; };
},
computed: {
},
watch: {
}, },
mounted() {}, mounted() {},
methods: { methods: {
}, },
}); });
</script> </script>
<style lang="less"> <style lang="less" scoped>
.generalCanvas{
.generalMiniCanvas{
position: relative;
height: 100%;
display: flex;
width: 100%; width: 100%;
// flex-direction: column; height: 100%;
margin: 0 auto; position: relative;
flex-direction: row; display: flex;
flex: 1; flex-direction: column;
overflow: hidden; overflow: hidden;
.generalMiniCanvas_item{ padding-top: 4rem;
// position: relative; > .canvasBox{
background: #fff;
position: absolute;
display: flex;
// border: 0.2rem solid #c4c4c4;
width: 25rem;
border-radius: 4px; /* 设置圆角半径 */
flex-wrap: wrap;
.generalMiniCanvas_btn_item{
display: flex;
align-items: center;
padding: 1rem 0;
}
}
.generalMiniCanvas_input,.generalMiniCanvas_btn{
z-index: 2;
padding: 1rem 1.5rem;
position: relative;
width: auto;
flex-wrap: nowrap;
flex-direction: column;
}
.generalMiniCanvas_input{
flex-direction: row;
align-items: center;
margin-left: 7rem;
height: 6rem;
.generalMiniCanvas_input_item{
display: flex;
margin-right: 3rem;
align-items: center;
&.brushwork{
img{
width: 100%;
max-height: 100%;
object-fit: contain;
}
}
span{
margin-right: 1rem;
}
}
.generalMiniCanvas_input_item:last-child{
margin-right: 0;
}
}
.generalMiniCanvas_btn{
input{
// width: 100%;
width: 30rem;
// margin-top: 1rem;
flex: 1;
}
.icon-xiala{
position: absolute;
width: 2rem;
bottom: 0;
transform: translate(-50%, 90%);
left: 50%;
width: 6rem;
background: #fff;
text-align: center;
cursor: pointer;
&.icon-xiala::before{
transition: all .3s;
}
&.btnRotate::before{
transform: rotate(180deg);
display: block;
}
}
i{
font-size: 2.5rem;
cursor: pointer;
width: 4rem;
height: 4rem;
display: flex;
align-items: center;
justify-content: center;
&.active{
border: 1px solid;
border-radius: .4rem;
}
}
&.spread{
transform: translate(-50%,0);
}
}
.addDetails_canvasCenter{
flex: 1;
overflow: hidden;
display: flex;
// flex-direction: column;
// flex-direction: row;
position: relative;
margin: 0 auto;
flex-direction: column;
}
.exportCanvasBox_center_data{
flex: 1;
display: flex;
overflow: hidden;
}
.exportCanvasBox_center_box{
padding: 3rem;
height: 100%;
flex: 1; flex: 1;
position: relative; position: relative;
overflow: hidden;
width: 100%;
background: #e6e6e6;
cursor: inherit;
&.cursorNone:hover{
cursor: none;
}
&.cursorMove:hover{
cursor: move;
canvas{
cursor: move !important;
}
}
.editFrontBack_pencilbtn{
position: absolute;
z-index: 1;
border-radius: 50%;
border: 1px solid #000;
pointer-events: none;
transform: translate(-50%,-50%);
}
} }
.exportCanvasBox_center{
height: 100%;
flex: 1;
position: relative;
overflow: hidden;
background: #e6e6e6;
// overflow: scroll;
.canvas-container{
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.editFrontBack_pencilbtn{
position: absolute;
z-index: 1;
border-radius: 50%;
border: 1px solid #000;
pointer-events: none;
transform: translate(-50%,-50%);
}
}
.exportCanvasBox_center:hover{
.generalMiniCanvas_btn{
// transform: translate(-50%,-101%);
// &.spread{
// transform: translate(-50%,0);
// }
}
}
}
.exportCanvasBox_submit{
margin-top: auto;
margin-left: 1rem;
text-align: center;
} }
</style> </style>

4
src/main.ts
View File

@@ -21,8 +21,8 @@ import "swiper/css/pagination";
// import "@/tool/fabric.brushes.js"; // import "@/tool/fabric.brushes.js";
// import "@/tool/fabric.min.js"; // import "@/tool/fabric.min.js";
const app = createApp(App); const app = createApp(App);
flexible(); flexible()
// alert(window.innerWidth)
import { getCookie, setCookie } from "@/tool/cookie"; import { getCookie, setCookie } from "@/tool/cookie";
import loadingGif from "./assets/images/homePage/loading.gif"; import loadingGif from "./assets/images/homePage/loading.gif";

7
src/tool/flexible.js
View File

@@ -1,11 +1,16 @@
import { getUniversalZoomLevel } from "@/tool/util";
let flexible = (designWidth, maxWidth,minWidth) =>{ let flexible = (designWidth, maxWidth,minWidth) =>{
var doc = document, win = window, docEl = doc.documentElement, remStyle = document.createElement("style"), tid; var doc = document, win = window, docEl = doc.documentElement, remStyle = document.createElement("style"), tid;
designWidth = designWidth || 1920; designWidth = designWidth || 1920;
maxWidth = maxWidth || 2560; maxWidth = maxWidth || 2560;
minWidth = minWidth || 1024; minWidth = minWidth || 500;
// minWidth = minWidth || 1024;
function refreshRem() { function refreshRem() {
var width = docEl.getBoundingClientRect().width; var width = docEl.getBoundingClientRect().width;
var height = docEl.getBoundingClientRect().height; var height = docEl.getBoundingClientRect().height;
width = getUniversalZoomLevel() * width
height = getUniversalZoomLevel() * height
maxWidth = maxWidth || 1920; maxWidth = maxWidth || 1920;
if(width/height>1.98) width = height * 1.98; if(width/height>1.98) width = height * 1.98;
width > maxWidth && (width = maxWidth); width > maxWidth && (width = maxWidth);

1119
src/tool/util.js
View File

File diff suppressed because it is too large Load Diff

15
src/views/HomeMain.vue
View File

@@ -35,7 +35,7 @@
<div v-for="historyTypeItem in historyData.updateTimeType" :key="historyTypeItem"> <div v-for="historyTypeItem in historyData.updateTimeType" :key="historyTypeItem">
<div class="timeType" v-if="historyTypeItem == 'Todaylist' && item.Todaylist.length>0">Today</div> <div class="timeType" v-if="historyTypeItem == 'Todaylist' && item.Todaylist.length>0">Today</div>
<div class="timeType" v-if="historyTypeItem == 'Yesterdaylist' && item.Yesterdaylist.length>0">Yesterday</div> <div class="timeType" v-if="historyTypeItem == 'Yesterdaylist' && item.Yesterdaylist.length>0">Yesterday</div>
<div class="timeType" v-if="historyTypeItem == 'WithinAWeeklist' && item.WithinAWeeklist.length>0">Within a wseek</div> <div class="timeType" v-if="historyTypeItem == 'WithinAWeeklist' && item.WithinAWeeklist.length>0">Within a week</div>
<div class="timeType" v-if="historyTypeItem == 'EarlierTodaylist' && item.EarlierTodaylist.length>0">Earlier</div> <div class="timeType" v-if="historyTypeItem == 'EarlierTodaylist' && item.EarlierTodaylist.length>0">Earlier</div>
<div v-for="childItem,index in item[historyTypeItem]" class="detailItem history" @click="setHistory(item,childItem)" :class="{active:openTypeChild == childItem.id}"> <div v-for="childItem,index in item[historyTypeItem]" class="detailItem history" @click="setHistory(item,childItem)" :class="{active:openTypeChild == childItem.id}">
<div class="text" style="width: 100%;"> <div class="text" style="width: 100%;">
@@ -844,13 +844,13 @@ export default defineComponent({
}; };
await Https.axiosPost(Https.httpUrls.accountLogout, data).then((rv) => { await Https.axiosPost(Https.httpUrls.accountLogout, data).then((rv) => {
// WriteCookie("token"); // WriteCookie("token");
clonAllCookie()
}); });
this.$router.replace("/"); this.$router.replace("/");
this.store.commit('createDetail') this.store.commit('createDetail')
this.store.commit('createProbject') this.store.commit('createProbject')
// WriteCookie("token"); // WriteCookie("token");
clonAllCookie()
// window.location.reload() // window.location.reload()
}, },
@@ -983,6 +983,11 @@ export default defineComponent({
border-radius: 2rem; border-radius: 2rem;
&.history{ &.history{
flex: 1; flex: 1;
> .detailBox{
>.detail{
min-height: 10rem;
}
}
} }
> .titleBox{ > .titleBox{
padding: 1.2rem; padding: 1.2rem;
@@ -1027,7 +1032,6 @@ export default defineComponent({
> .detail{ > .detail{
position: relative; position: relative;
height: 100%; height: 100%;
min-height: 10rem;
> img{ > img{
width: 100%; width: 100%;
} }
@@ -1421,7 +1425,7 @@ export default defineComponent({
height: 6rem; height: 6rem;
width: 6rem; width: 6rem;
position: relative; position: relative;
transform-origin: top; // transform-origin: top;
overflow: hidden; overflow: hidden;
z-index: 2; z-index: 2;
left: 0; left: 0;
@@ -1429,9 +1433,10 @@ export default defineComponent({
cursor: pointer; cursor: pointer;
background: #fff; background: #fff;
img{ img{
background: #000;
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: contain; object-fit: cover;
} }
// transition: all .3s; // transition: all .3s;
} }

5
src/views/HomeView/Events.vue
View File

@@ -123,7 +123,7 @@ export default defineComponent({
let {t} = useI18n() let {t} = useI18n()
let openEventsDetail = (item:any)=>{ let openEventsDetail = (item:any)=>{
let path = router.currentRoute._value.path.split('/')[1] let path = router.currentRoute._value.path.split('/')[1]
router.push(`/${path}/eventsDetail?id=${item.id}`) router.push(`/${path}/eventsDetail?eventId=${item.id}`)
// router.push(`${path}?id=${item.id}`) // router.push(`${path}?id=${item.id}`)
} }
onMounted (()=>{ onMounted (()=>{
@@ -244,7 +244,7 @@ export default defineComponent({
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
.page_content_item{ .page_content_item{
max-width: 25%; width: 25%;
padding: 2rem; padding: 2rem;
@media (max-width: 768px) { @media (max-width: 768px) {
max-width: 100%; max-width: 100%;
@@ -265,6 +265,7 @@ export default defineComponent({
color: #5f5f5f; color: #5f5f5f;
} }
.page_content_item_title{ .page_content_item_title{
font-size: 1.6rem;
text-overflow: ellipsis; /* 显示省略号 */ text-overflow: ellipsis; /* 显示省略号 */
overflow: hidden; /* 溢出隐藏 */ overflow: hidden; /* 溢出隐藏 */
display: -webkit-box; display: -webkit-box;

53
src/views/HomeView/Works.vue
View File

@@ -10,7 +10,7 @@
<div v-show="!isScroll" class="modal_title_text_assistant gallery_btn white" :class="{active:'NewYear_2025' == worksSelect}" @click="setWorksSelect({value:'NewYear_2025'})">NewYear_2025</div> <div v-show="!isScroll" class="modal_title_text_assistant gallery_btn white" :class="{active:'NewYear_2025' == worksSelect}" @click="setWorksSelect({value:'NewYear_2025'})">NewYear_2025</div>
</div> --> </div> -->
<div class="page_content" ref="autoscrollDom"> <div class="page_content" ref="autoscrollDom">
<Falls ref="fall" @loadend="isShowMark = false" @setPortfolioLike="setPortfolioLike" :isScroll="isScroll" @getImgScale="getImgScale"></Falls> <Falls ref="fall" @loadend="isShowMark = false" :itemWidth="failWidth" @setPortfolioLike="setPortfolioLike" :isScroll="isScroll" @getImgScale="getImgScale"></Falls>
<div class="page_loading_box" v-show="!isNoData"> <div class="page_loading_box" v-show="!isNoData">
<span class="page_loading" v-show="!isShowMark"></span> <span class="page_loading" v-show="!isShowMark"></span>
<span v-show="isShowMark"> <span v-show="isShowMark">
@@ -72,6 +72,7 @@ export default defineComponent({
let filter:any = reactive({ let filter:any = reactive({
worksSelect: 'all', worksSelect: 'all',
isNull:true, isNull:true,
failWidth:300,
worksType: [ worksType: [
{ {
name: useI18n().t('works.all'), name: useI18n().t('works.all'),
@@ -163,16 +164,57 @@ export default defineComponent({
} }
let getImgScale = (item:any)=>{ let getImgScale = (item:any)=>{
let newScaleModel = null let newScaleModel = null
if(window.innerWidth < 768){ if(getScreenOrientation() == 'landscape'){
newScaleModel = newScaleImageMobile
}else{
newScaleModel = newScaleImage newScaleModel = newScaleImage
newScaleModel.value.scaleImageMask = true newScaleModel.value.scaleImageMask = true
}else{
newScaleModel = newScaleImageMobile
} }
newScaleModel.value.init(item) newScaleModel.value.init(item)
} }
function getScreenOrientation() {
// 优先使用标准API
if (screen.orientation) {
return screen.orientation.type.includes('portrait') ? 'portrait' : 'landscape';
}
// 回退到宽高比检测
return window.innerWidth > window.innerHeight ? 'landscape' : 'portrait';
}
// 监听方向变化
function setupOrientationListener(callback:any) {
// 标准事件
const handleOrientationChange = () => {
callback(getScreenOrientation());
};
// 优先使用标准API
if (screen.orientation) {
screen.orientation.addEventListener('change', handleOrientationChange);
}
// 回退到resize事件
else {
window.addEventListener('resize', handleOrientationChange);
}
// 返回清除监听的方法
return () => {
if (screen.orientation) {
screen.orientation.removeEventListener('change', handleOrientationChange);
} else {
window.removeEventListener('resize', handleOrientationChange);
}
};
}
const cleanup = setupOrientationListener((orientation:any) => {
if (orientation === 'portrait') {
// 竖屏逻辑
return 'portrait'
} else {
// 横屏逻辑
return 'landscape'
}
});
let getPorfolio = ()=>{ let getPorfolio = ()=>{
let data = filter.getListDate let data = filter.getListDate
if(filter.isShowMark && !filter.isNoData)return if(filter.isShowMark && !filter.isNoData)return
@@ -253,6 +295,7 @@ export default defineComponent({
{ immediate: true } // 立即触发一次以处理初始参数 { immediate: true } // 立即触发一次以处理初始参数
); );
onMounted (()=>{ onMounted (()=>{
if(window.innerWidth < 1200)filter.failWidth = 120
nextTick(()=>{ nextTick(()=>{
setPorfolioDom() setPorfolioDom()
}) })