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

fix

Browse Source
This commit is contained in:
X1627315083
2025-04-09 14:09:19 +08:00
parent b6e5f05f06
commit 37f1b36e54
76 changed files with 1969 additions and 970 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/homePage/sketchDesign.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 700 B

After

Width:  |  Height:  |  Size: 6.8 KiB

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

@@ -721,13 +721,13 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
padding: 1rem 2rem;
}
.generalModel_state .generalModel_state_item > input {
height: 2.5rem !important;
height: 6rem !important;
padding: 1rem !important;
border-radius: 1rem;
padding: calc(2rem - 1px * 2) !important;
box-sizing: content-box;
box-sizing: border-box;
background-color: #f3f3f3;
background-color: #fff;
width: calc(100% - 4rem);
width: 25rem;
font-size: 1.8rem;
transition: all 0.3s;
border: 1px solid;
@@ -754,9 +754,6 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
width: calc(100% - 4rem);
border: 1px solid #000;
}
.generalModel_state .generalModel_state_item .ant-select-selector {
border-radius: 4rem;
}
.generalModel_state .generalModel_state_item .ant-picker-input > input {
font-size: 1.8rem;
}
@@ -898,6 +895,9 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
.generalModel.fullScreen > .ant-modal-body {
padding: 2.5rem 3rem;
}
.generalModel.fullScreen .generalModel_btn .generalModel_closeIcon {
transform: translate(-100%, 100%);
}
.generalModel .ant-modal-content {
border-radius: 3rem;
height: 100%;
@@ -1165,18 +1165,9 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
z-index: 9999 !important;
top: 6rem;
}
.ant-modal-confirm-btns .ant-btn:hover {
color: #fff !important;
border-color: #39215b !important;
}
.ant-modal-confirm-btns .ant-btn-primary {
background: #39215b !important;
border-color: #39215b !important;
}
.ant-modal-confirm-btns .ant-btn-primary:hover {
color: #fff !important;
border-color: #543087 !important;
background: #543087 !important;
background: #000 !important;
border-color: #000 !important;
}
.ant-spin-dot-item {
background-color: #000000;
@@ -1617,6 +1608,7 @@ textarea:focus {
}
.upload_item .upload_file_item .ant-upload-picture-card-wrapper .ant-upload-select-picture-card .fi-br-upload {
font-size: 2rem;
display: flex;
color: #000;
}
.upload_item .upload_file_item.upload_file_item:last-child {
@@ -1680,6 +1672,7 @@ textarea:focus {
.design_detail_modal_component .input_border,
.library_page .input_border,
.productImg_content .input_border,
.poseTransfer .input_border,
.scaleImage_modal .input_border,
.accountEdit_page .input_border,
.generalMenu_printModel_upload .input_border,
@@ -1696,6 +1689,7 @@ textarea:focus {
.design_detail_modal_component .input_border .input_box,
.library_page .input_border .input_box,
.productImg_content .input_border .input_box,
.poseTransfer .input_border .input_box,
.scaleImage_modal .input_border .input_box,
.accountEdit_page .input_border .input_box,
.generalMenu_printModel_upload .input_border .input_box,
@@ -1706,11 +1700,13 @@ textarea:focus {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-between;
}
.collection_modal_body .input_border .input_box .inputShowText,
.design_detail_modal_component .input_border .input_box .inputShowText,
.library_page .input_border .input_box .inputShowText,
.productImg_content .input_border .input_box .inputShowText,
.poseTransfer .input_border .input_box .inputShowText,
.scaleImage_modal .input_border .input_box .inputShowText,
.accountEdit_page .input_border .input_box .inputShowText,
.generalMenu_printModel_upload .input_border .input_box .inputShowText,
@@ -1722,29 +1718,32 @@ textarea:focus {
.design_detail_modal_component .input_border .input_box.active .input_box_btnBox,
.library_page .input_border .input_box.active .input_box_btnBox,
.productImg_content .input_border .input_box.active .input_box_btnBox,
.poseTransfer .input_border .input_box.active .input_box_btnBox,
.scaleImage_modal .input_border .input_box.active .input_box_btnBox,
.accountEdit_page .input_border .input_box.active .input_box_btnBox,
.generalMenu_printModel_upload .input_border .input_box.active .input_box_btnBox,
.generate .input_border .input_box.active .input_box_btnBox,
.collection_modal_body .input_border .input_box.active textarea,
.design_detail_modal_component .input_border .input_box.active textarea,
.library_page .input_border .input_box.active textarea,
.productImg_content .input_border .input_box.active textarea,
.scaleImage_modal .input_border .input_box.active textarea,
.accountEdit_page .input_border .input_box.active textarea,
.generalMenu_printModel_upload .input_border .input_box.active textarea,
.generate .input_border .input_box.active textarea {
.collection_modal_body .input_border .input_box.active .search_textarea,
.design_detail_modal_component .input_border .input_box.active .search_textarea,
.library_page .input_border .input_box.active .search_textarea,
.productImg_content .input_border .input_box.active .search_textarea,
.poseTransfer .input_border .input_box.active .search_textarea,
.scaleImage_modal .input_border .input_box.active .search_textarea,
.accountEdit_page .input_border .input_box.active .search_textarea,
.generalMenu_printModel_upload .input_border .input_box.active .search_textarea,
.generate .input_border .input_box.active .search_textarea {
border: 1px solid #ff0001;
box-shadow: 0px 0px 3px 1px rgba(255, 0, 0, 0.2);
}
.collection_modal_body .input_border .input_box.active span,
.design_detail_modal_component .input_border .input_box.active span,
.library_page .input_border .input_box.active span,
.productImg_content .input_border .input_box.active span,
.scaleImage_modal .input_border .input_box.active span,
.accountEdit_page .input_border .input_box.active span,
.generalMenu_printModel_upload .input_border .input_box.active span,
.generate .input_border .input_box.active span {
.collection_modal_body .input_border .input_box.active .inputShowText,
.design_detail_modal_component .input_border .input_box.active .inputShowText,
.library_page .input_border .input_box.active .inputShowText,
.productImg_content .input_border .input_box.active .inputShowText,
.poseTransfer .input_border .input_box.active .inputShowText,
.scaleImage_modal .input_border .input_box.active .inputShowText,
.accountEdit_page .input_border .input_box.active .inputShowText,
.generalMenu_printModel_upload .input_border .input_box.active .inputShowText,
.generate .input_border .input_box.active .inputShowText {
opacity: 1;
display: block;
color: rgba(255, 0, 0.7);
@@ -1753,6 +1752,7 @@ textarea:focus {
.design_detail_modal_component .input_border .search_keyword,
.library_page .input_border .search_keyword,
.productImg_content .input_border .search_keyword,
.poseTransfer .input_border .search_keyword,
.scaleImage_modal .input_border .search_keyword,
.accountEdit_page .input_border .search_keyword,
.generalMenu_printModel_upload .input_border .search_keyword,
@@ -1764,6 +1764,7 @@ textarea:focus {
.design_detail_modal_component .input_border .search_keyword .search_keyword_center,
.library_page .input_border .search_keyword .search_keyword_center,
.productImg_content .input_border .search_keyword .search_keyword_center,
.poseTransfer .input_border .search_keyword .search_keyword_center,
.scaleImage_modal .input_border .search_keyword .search_keyword_center,
.accountEdit_page .input_border .search_keyword .search_keyword_center,
.generalMenu_printModel_upload .input_border .search_keyword .search_keyword_center,
@@ -1784,6 +1785,7 @@ textarea:focus {
.design_detail_modal_component .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
.library_page .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
.productImg_content .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
.poseTransfer .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
.scaleImage_modal .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
.accountEdit_page .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
.generalMenu_printModel_upload .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
@@ -1797,6 +1799,7 @@ textarea:focus {
.design_detail_modal_component .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
.library_page .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
.productImg_content .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
.poseTransfer .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
.scaleImage_modal .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
.accountEdit_page .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
.generalMenu_printModel_upload .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
@@ -1815,6 +1818,7 @@ textarea:focus {
.design_detail_modal_component .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
.library_page .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
.productImg_content .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
.poseTransfer .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
.scaleImage_modal .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
.accountEdit_page .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
.generalMenu_printModel_upload .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
@@ -1825,6 +1829,7 @@ textarea:focus {
.design_detail_modal_component .input_border .input_box_btnBox,
.library_page .input_border .input_box_btnBox,
.productImg_content .input_border .input_box_btnBox,
.poseTransfer .input_border .input_box_btnBox,
.scaleImage_modal .input_border .input_box_btnBox,
.accountEdit_page .input_border .input_box_btnBox,
.generalMenu_printModel_upload .input_border .input_box_btnBox,
@@ -1838,21 +1843,43 @@ textarea:focus {
padding: 1.5rem 2rem;
padding-right: 0;
background-color: #fff;
flex: 1;
}
.collection_modal_body .input_border .input_box_btnBox.sketch,
.design_detail_modal_component .input_border .input_box_btnBox.sketch,
.library_page .input_border .input_box_btnBox.sketch,
.productImg_content .input_border .input_box_btnBox.sketch,
.poseTransfer .input_border .input_box_btnBox.sketch,
.scaleImage_modal .input_border .input_box_btnBox.sketch,
.accountEdit_page .input_border .input_box_btnBox.sketch,
.generalMenu_printModel_upload .input_border .input_box_btnBox.sketch,
.generate .input_border .input_box_btnBox.sketch {
padding: 0;
}
.collection_modal_body .input_border .input_box_btnBox > .textarea,
.design_detail_modal_component .input_border .input_box_btnBox > .textarea,
.library_page .input_border .input_box_btnBox > .textarea,
.productImg_content .input_border .input_box_btnBox > .textarea,
.poseTransfer .input_border .input_box_btnBox > .textarea,
.scaleImage_modal .input_border .input_box_btnBox > .textarea,
.accountEdit_page .input_border .input_box_btnBox > .textarea,
.generalMenu_printModel_upload .input_border .input_box_btnBox > .textarea,
.generate .input_border .input_box_btnBox > .textarea {
border-radius: 1rem;
min-height: 2rem;
max-height: 20rem;
border: none;
resize: none;
height: 2.7rem;
font-size: 1.8rem;
flex: 1;
line-height: 2rem;
}
.collection_modal_body .input_border .input_box_btnBox .ant-spin-text,
.design_detail_modal_component .input_border .input_box_btnBox .ant-spin-text,
.library_page .input_border .input_box_btnBox .ant-spin-text,
.productImg_content .input_border .input_box_btnBox .ant-spin-text,
.poseTransfer .input_border .input_box_btnBox .ant-spin-text,
.scaleImage_modal .input_border .input_box_btnBox .ant-spin-text,
.accountEdit_page .input_border .input_box_btnBox .ant-spin-text,
.generalMenu_printModel_upload .input_border .input_box_btnBox .ant-spin-text,
@@ -1863,6 +1890,7 @@ textarea:focus {
.design_detail_modal_component .input_border .input_box_btnBox .search_seed,
.library_page .input_border .input_box_btnBox .search_seed,
.productImg_content .input_border .input_box_btnBox .search_seed,
.poseTransfer .input_border .input_box_btnBox .search_seed,
.scaleImage_modal .input_border .input_box_btnBox .search_seed,
.accountEdit_page .input_border .input_box_btnBox .search_seed,
.generalMenu_printModel_upload .input_border .input_box_btnBox .search_seed,
@@ -1877,6 +1905,7 @@ textarea:focus {
.design_detail_modal_component .input_border .input_box_btnBox .upload_item,
.library_page .input_border .input_box_btnBox .upload_item,
.productImg_content .input_border .input_box_btnBox .upload_item,
.poseTransfer .input_border .input_box_btnBox .upload_item,
.scaleImage_modal .input_border .input_box_btnBox .upload_item,
.accountEdit_page .input_border .input_box_btnBox .upload_item,
.generalMenu_printModel_upload .input_border .input_box_btnBox .upload_item,
@@ -1887,6 +1916,7 @@ textarea:focus {
.design_detail_modal_component .input_border .input_box_btnBox .upload_item .upload_file_item,
.library_page .input_border .input_box_btnBox .upload_item .upload_file_item,
.productImg_content .input_border .input_box_btnBox .upload_item .upload_file_item,
.poseTransfer .input_border .input_box_btnBox .upload_item .upload_file_item,
.scaleImage_modal .input_border .input_box_btnBox .upload_item .upload_file_item,
.accountEdit_page .input_border .input_box_btnBox .upload_item .upload_file_item,
.generalMenu_printModel_upload .input_border .input_box_btnBox .upload_item .upload_file_item,
@@ -1897,13 +1927,14 @@ textarea:focus {
transform: translateY(-50%);
height: 5.7rem;
width: 5.7rem;
border-radius: 50%;
border-radius: 1rem;
overflow: hidden;
}
.collection_modal_body .input_border input,
.design_detail_modal_component .input_border input,
.library_page .input_border input,
.productImg_content .input_border input,
.poseTransfer .input_border input,
.scaleImage_modal .input_border input,
.accountEdit_page .input_border input,
.generalMenu_printModel_upload .input_border input,
@@ -1921,6 +1952,7 @@ textarea:focus {
.design_detail_modal_component .input_border inputinput:-moz-placeholder,
.library_page .input_border inputinput:-moz-placeholder,
.productImg_content .input_border inputinput:-moz-placeholder,
.poseTransfer .input_border inputinput:-moz-placeholder,
.scaleImage_modal .input_border inputinput:-moz-placeholder,
.accountEdit_page .input_border inputinput:-moz-placeholder,
.generalMenu_printModel_upload .input_border inputinput:-moz-placeholder,
@@ -1931,6 +1963,7 @@ textarea:focus {
.design_detail_modal_component .input_border inputinput:-ms-input-placeholder,
.library_page .input_border inputinput:-ms-input-placeholder,
.productImg_content .input_border inputinput:-ms-input-placeholder,
.poseTransfer .input_border inputinput:-ms-input-placeholder,
.scaleImage_modal .input_border inputinput:-ms-input-placeholder,
.accountEdit_page .input_border inputinput:-ms-input-placeholder,
.generalMenu_printModel_upload .input_border inputinput:-ms-input-placeholder,
@@ -1941,6 +1974,7 @@ textarea:focus {
.design_detail_modal_component .input_border inputinput::-webkit-input-placeholder,
.library_page .input_border inputinput::-webkit-input-placeholder,
.productImg_content .input_border inputinput::-webkit-input-placeholder,
.poseTransfer .input_border inputinput::-webkit-input-placeholder,
.scaleImage_modal .input_border inputinput::-webkit-input-placeholder,
.accountEdit_page .input_border inputinput::-webkit-input-placeholder,
.generalMenu_printModel_upload .input_border inputinput::-webkit-input-placeholder,
@@ -1951,6 +1985,7 @@ textarea:focus {
.design_detail_modal_component .input_border input.forbidden,
.library_page .input_border input.forbidden,
.productImg_content .input_border input.forbidden,
.poseTransfer .input_border input.forbidden,
.scaleImage_modal .input_border input.forbidden,
.accountEdit_page .input_border input.forbidden,
.generalMenu_printModel_upload .input_border input.forbidden,
@@ -1961,6 +1996,7 @@ textarea:focus {
.design_detail_modal_component .input_border .input_box_btnBox_upImg,
.library_page .input_border .input_box_btnBox_upImg,
.productImg_content .input_border .input_box_btnBox_upImg,
.poseTransfer .input_border .input_box_btnBox_upImg,
.scaleImage_modal .input_border .input_box_btnBox_upImg,
.accountEdit_page .input_border .input_box_btnBox_upImg,
.generalMenu_printModel_upload .input_border .input_box_btnBox_upImg,
@@ -1971,6 +2007,7 @@ textarea:focus {
.design_detail_modal_component .input_border .fi,
.library_page .input_border .fi,
.productImg_content .input_border .fi,
.poseTransfer .input_border .fi,
.scaleImage_modal .input_border .fi,
.accountEdit_page .input_border .fi,
.generalMenu_printModel_upload .input_border .fi,
@@ -1990,6 +2027,7 @@ textarea:focus {
.design_detail_modal_component .input_border .fi.fi-br-loading,
.library_page .input_border .fi.fi-br-loading,
.productImg_content .input_border .fi.fi-br-loading,
.poseTransfer .input_border .fi.fi-br-loading,
.scaleImage_modal .input_border .fi.fi-br-loading,
.accountEdit_page .input_border .fi.fi-br-loading,
.generalMenu_printModel_upload .input_border .fi.fi-br-loading,
@@ -2001,6 +2039,7 @@ textarea:focus {
.design_detail_modal_component .input_border .fi.active,
.library_page .input_border .fi.active,
.productImg_content .input_border .fi.active,
.poseTransfer .input_border .fi.active,
.scaleImage_modal .input_border .fi.active,
.accountEdit_page .input_border .fi.active,
.generalMenu_printModel_upload .input_border .fi.active,
@@ -2011,6 +2050,7 @@ textarea:focus {
.design_detail_modal_component .input_border .fi.forbidden,
.library_page .input_border .fi.forbidden,
.productImg_content .input_border .fi.forbidden,
.poseTransfer .input_border .fi.forbidden,
.scaleImage_modal .input_border .fi.forbidden,
.accountEdit_page .input_border .fi.forbidden,
.generalMenu_printModel_upload .input_border .fi.forbidden,
@@ -2021,6 +2061,7 @@ textarea:focus {
.design_detail_modal_component .input_border .search_upImg,
.library_page .input_border .search_upImg,
.productImg_content .input_border .search_upImg,
.poseTransfer .input_border .search_upImg,
.scaleImage_modal .input_border .search_upImg,
.accountEdit_page .input_border .search_upImg,
.generalMenu_printModel_upload .input_border .search_upImg,
@@ -2035,6 +2076,7 @@ textarea:focus {
.design_detail_modal_component .input_border .search_upImg span,
.library_page .input_border .search_upImg span,
.productImg_content .input_border .search_upImg span,
.poseTransfer .input_border .search_upImg span,
.scaleImage_modal .input_border .search_upImg span,
.accountEdit_page .input_border .search_upImg span,
.generalMenu_printModel_upload .input_border .search_upImg span,
@@ -2046,6 +2088,7 @@ textarea:focus {
.design_detail_modal_component .input_border .search_upImg .ant-upload-select-picture-card,
.library_page .input_border .search_upImg .ant-upload-select-picture-card,
.productImg_content .input_border .search_upImg .ant-upload-select-picture-card,
.poseTransfer .input_border .search_upImg .ant-upload-select-picture-card,
.scaleImage_modal .input_border .search_upImg .ant-upload-select-picture-card,
.accountEdit_page .input_border .search_upImg .ant-upload-select-picture-card,
.generalMenu_printModel_upload .input_border .search_upImg .ant-upload-select-picture-card,
@@ -2058,6 +2101,7 @@ textarea:focus {
.design_detail_modal_component .input_border .search_textarea,
.library_page .input_border .search_textarea,
.productImg_content .input_border .search_textarea,
.poseTransfer .input_border .search_textarea,
.scaleImage_modal .input_border .search_textarea,
.accountEdit_page .input_border .search_textarea,
.generalMenu_printModel_upload .input_border .search_textarea,
@@ -2077,6 +2121,7 @@ textarea:focus {
.design_detail_modal_component .input_border .generage_btn_box,
.library_page .input_border .generage_btn_box,
.productImg_content .input_border .generage_btn_box,
.poseTransfer .input_border .generage_btn_box,
.scaleImage_modal .input_border .generage_btn_box,
.accountEdit_page .input_border .generage_btn_box,
.generalMenu_printModel_upload .input_border .generage_btn_box,
@@ -2085,10 +2130,22 @@ textarea:focus {
display: flex;
align-items: center;
}
.collection_modal_body .input_border .generage_btn_box .generage_btn,
.design_detail_modal_component .input_border .generage_btn_box .generage_btn,
.library_page .input_border .generage_btn_box .generage_btn,
.productImg_content .input_border .generage_btn_box .generage_btn,
.poseTransfer .input_border .generage_btn_box .generage_btn,
.scaleImage_modal .input_border .generage_btn_box .generage_btn,
.accountEdit_page .input_border .generage_btn_box .generage_btn,
.generalMenu_printModel_upload .input_border .generage_btn_box .generage_btn,
.generate .input_border .generage_btn_box .generage_btn {
width: 10rem;
}
.collection_modal_body .input_border .generage_btn_box .icon-xiala,
.design_detail_modal_component .input_border .generage_btn_box .icon-xiala,
.library_page .input_border .generage_btn_box .icon-xiala,
.productImg_content .input_border .generage_btn_box .icon-xiala,
.poseTransfer .input_border .generage_btn_box .icon-xiala,
.scaleImage_modal .input_border .generage_btn_box .icon-xiala,
.accountEdit_page .input_border .generage_btn_box .icon-xiala,
.generalMenu_printModel_upload .input_border .generage_btn_box .icon-xiala,
@@ -2101,6 +2158,7 @@ textarea:focus {
.design_detail_modal_component .input_border .generage_btn_box .icon-xiala.active,
.library_page .input_border .generage_btn_box .icon-xiala.active,
.productImg_content .input_border .generage_btn_box .icon-xiala.active,
.poseTransfer .input_border .generage_btn_box .icon-xiala.active,
.scaleImage_modal .input_border .generage_btn_box .icon-xiala.active,
.accountEdit_page .input_border .generage_btn_box .icon-xiala.active,
.generalMenu_printModel_upload .input_border .generage_btn_box .icon-xiala.active,
@@ -2111,6 +2169,7 @@ textarea:focus {
.design_detail_modal_component .input_border .generage_btn_box .content,
.library_page .input_border .generage_btn_box .content,
.productImg_content .input_border .generage_btn_box .content,
.poseTransfer .input_border .generage_btn_box .content,
.scaleImage_modal .input_border .generage_btn_box .content,
.accountEdit_page .input_border .generage_btn_box .content,
.generalMenu_printModel_upload .input_border .generage_btn_box .content,
@@ -2118,17 +2177,19 @@ textarea:focus {
position: absolute;
top: 100%;
width: calc(100% - 2rem);
left: 2rem;
left: 0rem;
text-align: center;
border-radius: calc(1rem*1.2);
overflow: hidden;
z-index: 3;
margin-top: 0.2rem;
margin-left: 2rem;
}
.collection_modal_body .input_border .generage_btn_box .content > div,
.design_detail_modal_component .input_border .generage_btn_box .content > div,
.library_page .input_border .generage_btn_box .content > div,
.productImg_content .input_border .generage_btn_box .content > div,
.poseTransfer .input_border .generage_btn_box .content > div,
.scaleImage_modal .input_border .generage_btn_box .content > div,
.accountEdit_page .input_border .generage_btn_box .content > div,
.generalMenu_printModel_upload .input_border .generage_btn_box .content > div,
@@ -2141,10 +2202,22 @@ textarea:focus {
overflow: hidden;
text-overflow: ellipsis;
}
.collection_modal_body .input_border .generage_btn_box .content > div.active,
.design_detail_modal_component .input_border .generage_btn_box .content > div.active,
.library_page .input_border .generage_btn_box .content > div.active,
.productImg_content .input_border .generage_btn_box .content > div.active,
.poseTransfer .input_border .generage_btn_box .content > div.active,
.scaleImage_modal .input_border .generage_btn_box .content > div.active,
.accountEdit_page .input_border .generage_btn_box .content > div.active,
.generalMenu_printModel_upload .input_border .generage_btn_box .content > div.active,
.generate .input_border .generage_btn_box .content > div.active {
background-color: #616161;
}
.collection_modal_body .input_border .generage_btn_box .content > div:hover,
.design_detail_modal_component .input_border .generage_btn_box .content > div:hover,
.library_page .input_border .generage_btn_box .content > div:hover,
.productImg_content .input_border .generage_btn_box .content > div:hover,
.poseTransfer .input_border .generage_btn_box .content > div:hover,
.scaleImage_modal .input_border .generage_btn_box .content > div:hover,
.accountEdit_page .input_border .generage_btn_box .content > div:hover,
.generalMenu_printModel_upload .input_border .generage_btn_box .content > div:hover,
@@ -2155,6 +2228,7 @@ textarea:focus {
.design_detail_modal_component .input_border .generage_btn,
.library_page .input_border .generage_btn,
.productImg_content .input_border .generage_btn,
.poseTransfer .input_border .generage_btn,
.scaleImage_modal .input_border .generage_btn,
.accountEdit_page .input_border .generage_btn,
.generalMenu_printModel_upload .input_border .generage_btn,
@@ -2164,6 +2238,7 @@ textarea:focus {
font-size: 1.8rem;
padding: 1rem 2rem;
box-sizing: content-box;
justify-content: center;
}
.hideChecked {
user-select: none;

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

@@ -793,14 +793,16 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
}
>input{
height: 2.5rem !important;
height: 6rem !important;
box-sizing: border-box;
padding: 1rem !important;
border-radius: 1rem;
// border-radius: 4rem;
padding: calc(2rem - 1px * 2) !important;
box-sizing: content-box;
// box-sizing: content-box;
box-sizing: border-box;
background-color: #f3f3f3;
background-color: #fff;
width: calc(100% - 4rem);
width: 25rem;
font-size: 1.8rem;
transition: all .3s;
border: 1px solid;
@@ -827,9 +829,6 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
width: calc(100% - 4rem);
border: 1px solid #000;
}
.ant-select-selector{
border-radius: 4rem;
}
.ant-picker-input > input{
font-size: 1.8rem;
}
@@ -977,6 +976,11 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
> .ant-modal-body{
padding: 2.5rem 3rem;
}
.generalModel_btn {
.generalModel_closeIcon{
transform: translate(-100%, 100%);
}
}
}
.ant-modal-content{
border-radius: 3rem;
@@ -1280,18 +1284,9 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
top: 6rem;
}
.ant-modal-confirm-btns{
.ant-btn:hover{
color: #fff !important;
border-color: #39215b !important;
}
.ant-btn-primary{
background: #39215b !important;
border-color: #39215b !important;
}
.ant-btn-primary:hover{
color: #fff !important;
border-color: #543087 !important;
background: #543087 !important;
background: #000 !important;
border-color: #000 !important;
}
}
//loding样式
@@ -1759,6 +1754,7 @@ textarea:focus{
margin: 0;
.fi-br-upload{
font-size: 2rem;
display: flex;
color: #000;
}
}
@@ -1827,7 +1823,7 @@ textarea:focus{
}
//设计input和上传按钮样式
.collection_modal_body,.design_detail_modal_component,.library_page,.productImg_content,.scaleImage_modal,.accountEdit_page,.generalMenu_printModel_upload,.generate{
.collection_modal_body,.design_detail_modal_component,.library_page,.productImg_content,.poseTransfer,.scaleImage_modal,.accountEdit_page,.generalMenu_printModel_upload,.generate{
.input_border{
z-index: 2;
display: flex;
@@ -1843,17 +1839,18 @@ textarea:focus{
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-between;
.inputShowText{
width: 100%;
display: none;
}
&.active{
.input_box_btnBox,textarea{
.input_box_btnBox,.search_textarea{
// color: rgb(255, 0, .7);
border: 1px solid rgb(255, 0, .7);
box-shadow: 0px 0px 3px 1px rgba(255, 0, 0, 0.2);
}
span{
.inputShowText{
opacity: 1;
display: block;
color: rgba(255, 0, .7);
@@ -1912,10 +1909,23 @@ textarea:focus{
padding: 1.5rem 2rem;
padding-right: 0;
background-color: #fff;
flex: 1;
// border
&.sketch{
padding: 0;
}
> .textarea{
border-radius: 1rem;
min-height: 2rem;
max-height: 20rem;
border: none;
resize: none;
height: 2.7rem;
font-size: 1.8rem;
flex: 1;
line-height: 2rem;
// overflow: hidden;
}
.ant-spin-text{
font-size: 1.2rem;
}
@@ -1935,7 +1945,7 @@ textarea:focus{
transform: translateY(-50%);
height: 5.7rem;
width: 5.7rem;
border-radius: 50%;
border-radius: 1rem;
overflow: hidden;
}
}
@@ -2034,7 +2044,9 @@ textarea:focus{
position: relative;
display: flex;
align-items: center;
.generage_btn{
width: 10rem;
}
.icon-xiala{
margin-left: 1rem;
transition: all .3s;
@@ -2047,12 +2059,13 @@ textarea:focus{
position: absolute;
top: 100%;
width: calc(100% - 2rem);
left: 2rem;
left: 0rem;
text-align: center;
border-radius: calc(1rem* 1.2);
overflow: hidden;
z-index: 3;
margin-top: .2rem;
margin-left: 2rem;
>div{
background: #cccccc;
line-height: 2;
@@ -2061,6 +2074,9 @@ textarea:focus{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&.active{
background-color: #616161;
}
}
>div:hover{
background: #999999;
@@ -2074,6 +2090,7 @@ textarea:focus{
font-size: 1.8rem;
padding: 1rem 2rem;
box-sizing: content-box;
justify-content: center;
}
}

6
src/component/Canvas/argument.vue
View File

@@ -2,11 +2,11 @@
<div class="canvasArgument">
<div class="label_item wH">
<div class="title">{{ $t('exportModel.Width') }}</div>
<input type="number" @input="canvasGeneral.setCanvasWH('width')" v-model="canvasGeneral.canvasWH.width">
<input type="number" @input="canvasGeneral.setCanvasWH('width')" v-model="canvasGeneral.canvasWH.layerWidth">
</div>
<div class="label_item wH">
<div class="title">{{ $t('exportModel.Height') }}</div>
<input type="number" @input="canvasGeneral.setCanvasWH('height')" v-model="canvasGeneral.canvasWH.height">
<input type="number" @input="canvasGeneral.setCanvasWH('height')" v-model="canvasGeneral.canvasWH.layerHeight">
</div>
<div class="label_item" v-show="
canvasGeneral.operation != 'movePosition' &&
@@ -93,7 +93,6 @@
:style="{'font-family':canvasGeneral.fontFamily}"
>
<a-select-option class="label_select_item" v-for="item in canvasGeneral.pencilList.textFontFamilyList" :style="{'font-family':item.value}" :value="item.value">
{{item.name}}
</a-select-option>
</a-select>
</div>
@@ -148,6 +147,7 @@
}
const addImage = (item:any)=>{
if(!item.minioUrl)item.minioUrl = item.imgUrl
item.imgUrl = item?.url || item?.designOutfitUrl || item?.imgUrl || item?.minioUrl
canvasGeneral.addImage(item)
}
return {

22
src/component/Canvas/canvasContent.vue
View File

@@ -1,12 +1,12 @@
<template>
<div class="canvasContent_box">
<div class="canvasContent" ref="canvasScaleDom">
<div v-if="isPresuppose" class="generalCanvas_center presuppose">
<!-- <div v-if="isPresuppose" class="generalCanvas_center presuppose">
<div class="presuppose16-9" @click="setPresuppose('16/9')">16 : 9</div>
<div class="presuppose1-1" @click="setPresuppose('1/1')">1 : 1</div>
<div class="presuppose9-16" @click="setPresuppose('9/16')">9 : 16</div>
</div>
<div v-else class="generalCanvas_center canvas" ref="canvasDom">
</div> -->
<div class="generalCanvas_center canvas" ref="canvasDom">
<div class="editFrontBack_pencilbtn" v-show="!isShowMark" :style="canvasGeneral.pencilbtnStyle"></div>
</div>
</div>
@@ -29,7 +29,6 @@
const data:any = reactive({
canvasScaleDom:null,
canvasDom:null,
isPresuppose:false,
isShowMark:false,
pencilbtnStyle:{},
@@ -41,7 +40,7 @@
await canvasGeneral.canvasInit(data.canvasDom,{
width:data.canvasDom.offsetWidth,
height:data.canvasDom.offsetHeight,
})
},'','','',2000)
resolve('')
})
})
@@ -105,17 +104,16 @@
const openSetData =async ()=>{
let oldCanvas = store.state.HomeStoreModule.canvasData?.canvas
if(oldCanvas){
await createCanvas({})
await canvasGeneral.createCanvas(data.canvasDom,{
width:data.canvasDom.offsetWidth,
height:data.canvasDom.offsetHeight,
},2000)
canvasGeneral.setLoadFromJSON(oldCanvas, () => {});
}else{
await createCanvas({})
}
}
onMounted(()=>{
if(canvasType == 'export'){
data.isPresuppose = true
}else{
createCanvas({})
}
})
return {
canvasGeneral,

25
src/component/Canvas/detail.vue
View File

@@ -5,7 +5,7 @@
>
<div class="layer">
<div class="layer-item button" @click="canvasGeneral.createLayer">
新建图层
Add Layer
</div>
<div class="layer-item-box-scroll">
<div class="layer-item-box" :style="{'height':layerList.length * 6 + 'rem'}">
@@ -13,11 +13,11 @@
v-for="item,index in layerList"
:key="item"
:style="item?.style"
@click="canvasGeneral.selectLayer(item.id)"
@mousedown="mousedown($event,item,index)"
@touchstart="touchstart($event,item,index)"
@click.stop="canvasGeneral.selectLayer(item.id)"
@mousedown.stop="mousedown($event,item,index)"
@touchstart.stop="touchstart($event,item,index)"
@contextmenu="openMenu($event,item,index)"
@contextmenu.stop="openMenu($event,item,index)"
:class="{'active':item.id == canvasGeneral.layer.selectLayer.id}">
<!-- <div @click.stop="canvasGeneral.layerShowHide(item.id,item)">{{ item.isShow }}</div> -->
@@ -26,17 +26,19 @@
<div>
{{ item.name }}
</div>
<div @click.stop="canvasGeneral.layerDelete(index,item.id)" :class="{noDelete:canvasGeneral.layer.list.length == 1}">删除</div>
<div @click.stop="canvasGeneral.layerDelete(index,item.id)" :class="{noDelete:canvasGeneral.layer.list.length == 1}">
<i class="fi fi-rr-trash icon_delete"></i>
</div>
</div>
</div>
</div>
</div>
<div class="layer-menu" :style="styleMenu">
<div class="layer-menu-item" @click="canvasGeneral.copyLayer(itemMenu.id)">复制</div>
<div class="layer-menu-item" @click="canvasGeneral.layerDelete(itemMenu.index,itemMenu.id)">删除</div>
<div class="layer-menu-item" v-if="itemMenu.groupType == 'Object'" @click="canvasGeneral.setGridOrObject(itemMenu.id,'Grid')">设置栅格化</div>
<div class="layer-menu-item" v-if="itemMenu.groupType == 'Grid'" @click="canvasGeneral.setGridOrObject(itemMenu.id,'Object')">取消栅格化</div>
<div class="layer-menu-item" @click="canvasGeneral.copyLayer(itemMenu.id)">Copy</div>
<div class="layer-menu-item" @click="canvasGeneral.layerDelete(itemMenu.index,itemMenu.id)">Delete</div>
<div class="layer-menu-item" v-if="itemMenu.groupType == 'Object'" @click="canvasGeneral.setGridOrObject(itemMenu.id,'Grid')">Rasterize layer</div>
<div class="layer-menu-item" v-if="itemMenu.groupType == 'Grid'" @click="canvasGeneral.setGridOrObject(itemMenu.id,'Object')">Cancal rasterization</div>
</div>
</div>
</template>
@@ -90,7 +92,7 @@
const openMenu = (event:any,item:any,index:number)=>{
if(event.preventDefault)event.preventDefault();
data.itemMenu = item;
data.itemMenu.index = index
// data.itemMenu.index = index
let position = data.detailDom.getBoundingClientRect();
data.styleMenu = {
left:event.clientX - position.left+'px',
@@ -191,7 +193,6 @@
}
});
if(str == 'up')time = setTimeout(()=>canvasGeneral.upLayerIndex(list),500)
}
return {
canvasGeneral,

18
src/component/Canvas/index.vue
View File

@@ -20,7 +20,7 @@
<div class="gallery_btn" style="margin: 0 2rem;" @click="setExport">{{ $t('exportModel.Export') }}</div>
</div>
<liquefaction ref="liquefaction" @submitLiquefaction="submitLiquefaction"></liquefaction>
<!-- <publish ref="publish" @clearPublish="()=>{}"></publish> -->
<publish ref="publish" @clearPublish="()=>{}"></publish>
</div>
</template>
<script>
@@ -118,7 +118,6 @@ export default defineComponent({
const getCanvasData = ()=>{
if(!canvasObj.canvas)return
var json = canvasObj.canvas.toJSON(['src','minioUrl','custom','perPixelTargetFind','hasBorders','selectable','hasControls','erasable']);
// console.log(JSON.stringify(json));
json.objects.forEach(item=>{
if(item.type == 'image'){
delete item.src
@@ -131,6 +130,7 @@ export default defineComponent({
return canvasExport
}
const openSetData = async ()=>{
//获取所有所选元素
let arr = store.state.Workspace.projectList
let obj = {}
for (let index = 0; index < arr.length; index++) {
@@ -142,6 +142,13 @@ export default defineComponent({
resolve('')
return
}
if(keys == 'design'){
value[keys].forEach((designItem)=>{
let minioUrl = designItem.url
designItem.url = designItem.designOutfitUrl
designItem.minioUrl = designItem.minioUrl
})
}
let rv = {
list:value[keys],
name:item.name,
@@ -150,9 +157,10 @@ export default defineComponent({
resolve('')
})
})
}
data.elementList = obj
//获取所有所选元素 END
if(data.showCanvas)return
data.showCanvas = true
dataDom.canvasContent.openSetData()
@@ -179,7 +187,6 @@ export default defineComponent({
name: "collection.png",
});
let num = 0;
console.log(data.elementList)
for (let key in data.elementList) {
for (let index = 0; index < data.elementList[key].list.length; index++) {
const item = data.elementList[key].list[index];
@@ -188,7 +195,6 @@ export default defineComponent({
img.push({imgUrl:url,name:`element${index}.${name}`})
}
}
console.log(img)
downImg(img);
};
let getImgArrayBuffer = (url) => {
@@ -252,7 +258,7 @@ export default defineComponent({
onMounted(() => {
});
onBeforeUnmount(()=>{
// canvasGeneral.canvasClear()
canvasObj.canvasClear()
})
return {
isShowMark,

1
src/component/Canvas/tool.vue
View File

@@ -117,6 +117,7 @@ import { Https } from "@/tool/https";
flex-direction: column;
position: relative;
align-items: center;
overflow-y: auto;
&.leftAlign{
justify-content: flex-start;
}

14
src/component/Detail/addDetails.vue
View File

@@ -1,34 +1,32 @@
<template>
<div class="addDetailsModal generalModel" ref="addDetailsModal"></div>
<a-modal
class="addDetails_modal generalModel"
class="addDetails_modal generalModel fullScreen"
v-model:visible="addDetails"
:footer="null"
:get-container="() => $refs.addDetailsModal"
width="78%"
width="100%"
height="100%"
:maskClosable="false"
:centered="true"
:closable="false"
:destroyOnClose="true"
wrapClassName="#app"
:keyboard="false"
:mask="false"
>
<div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="#000"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="#000"/>
</svg>
</div>
</div>
<div class="addDetails_center">
<div class="modal_title_text">
<div>{{ $t('addDetails.AddDetails') }}</div>
<div class="modal_title_text_intro"></div>
</div>
<generalMiniCanvas :imgUrl="imgUrl" @submitBase64Data="submitBase64Data"></generalMiniCanvas>
</div>
<div></div>

24
src/component/Detail/editFrontBack.vue
View File

@@ -90,6 +90,7 @@ export default defineComponent({
ratio = [1,1]
imgData.value = data
nextTick(()=>{
let contentBox = document.querySelector(".editFrontBack_center");
let canvasBox = document.querySelector(".editFrontBack_center .exportCanvasBox_center");
let editFrontBack_bgImg = document.querySelector(".editFrontBack_center .editFrontBack_bgImg");
document.removeEventListener('mousemove', mouseMove);
@@ -97,33 +98,36 @@ export default defineComponent({
let img = new Image();
img.onload = async function(){
loadingShow.value = true
let scale = img.width/img.height
let height = canvasBox.offsetHeight;
canvasWH.value = height
canvasBox.style.width = height * scale+'px'
let scale
let wScale = 1
let hScale = 1
let styleWidth = Number(data.style.width.split('px')[0])
let styleHeight = Number(data.style.height.split('px')[0])
let width = contentBox.offsetWidth;
let height = contentBox.offsetHeight;
if(styleWidth>styleHeight){
hScale = styleHeight/styleWidth
exportWH = img.width
canvasWH.value = width
scale = img.height/img.width
console.log(width,scale)
canvasBox.style.height = width * scale+'px'
}else{
wScale = styleWidth/styleHeight
exportWH = img.height
canvasWH.value = height
scale = img.width/img.height
canvasBox.style.width = height * scale+'px'
}
editFrontBack_bgImg.style.width = canvasWH.value * wScale+'px'
editFrontBack_bgImg.style.height = canvasWH.value * hScale+'px'
ratio = [wScale,hScale]
// canvas = frontBackCanvasObj.canvasInit(canvasBox,{
// width:canvasWH.value * wScale,
// height:canvasWH.value * hScale,
// })
await frontBackCanvasObj.canvasInit(canvasBox,{
width:canvasWH.value * wScale,
height:canvasWH.value * hScale,
},data.maskUrl,'',{})
},data.maskUrl,'',{noWheel:true})
// undividedLayer
canvas = frontBackCanvasObj.canvas
@@ -383,6 +387,8 @@ export default defineComponent({
width: 100%;
background: #e6e6e6;
cursor: auto;
display: flex;
align-items: center;
&:hover{
cursor: none;
}

4
src/component/Detail/habitSetStyle.vue
View File

@@ -272,10 +272,10 @@ methods: {
left: 50%;
border-radius: 2rem;
transform: translate(-50%, -50%);
background: radial-gradient(50px circle at var(--x) var(--y),#39215b 0,transparent 100%);;
background: radial-gradient(50px circle at var(--x) var(--y),#000 0,transparent 100%);;
}
.content_bottom_item .active{
background: #39215b;
background: #000;
color: #fff;
}
}

73
src/component/DetailCopy/canvas/argument.vue
View File

@@ -10,13 +10,13 @@
</div> -->
<div v-show="isEditFrontBack" class="frontBack">
<div class="label_item" @click.stop="setOperation('print')">
<div class="title">Sharding</div>
<div class="title">Masking :</div>
<a-select
v-model:value="frontBackData"
:options="frontBackDataList"
size="large"
:fieldNames="{ label: 'name', value: 'value' }"
style="width:12rem;"
style="width:18rem;"
@change="changeFrontBackData"
>
<template #suffixIcon
@@ -28,7 +28,7 @@
</a-select>
</div>
<div class="label_item">
<div class="titile">{{ $t('exportModel.Size') }}:</div>
<div class="title">{{ $t('exportModel.Size') }} :</div>
<input @change="frontBackCanvas.setFontFamily" type="range" @input="frontBackCanvas.setPencilWidth" min="3" max="50" v-model="frontBackCanvas.brushwork.width[frontBackCanvas.operation]">
<!-- <input type="range" @input="frontBackCanvas.setPencilWidth" min="3" max="50" v-model="frontBackCanvas.brushwork.width[frontBackCanvas.operation]"> -->
@@ -65,6 +65,17 @@
<div v-for="item in canvasGeneral.colorHistoryList" :style="{'background':item}" @click="canvasGeneral.setColorHistory(item)"></div>
</div>
</div>
<div class="label_item texture" v-show="canvasGeneral.operation == 'texture'">
<div class="title">{{ $t('exportModel.Texture') }}:</div>
<a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.texture.value"
style="width: 12rem "
@change="canvasGeneral.textureValueChange"
>
<a-select-option class="label_select_item" v-for="item in canvasGeneral.texture.list" :value="item.value">
<img :src="item.url" alt="">
</a-select-option>
</a-select>
</div>
<div class="label_item" v-show="
canvasGeneral.operation != 'movePosition' &&
canvasGeneral.operation != 'move' &&
@@ -80,7 +91,7 @@
<div class="label_item" v-show="canvasGeneral.operation == 'pencil'">
<div class="title">{{ $t('exportModel.Brushwork') }}:</div>
<a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.brushwork.value"
style="width: 12rem "
style="width: 12rem ;height: 6rem;"
@change="canvasGeneral.brushworkChange"
>
<a-select-option class="label_select_item" v-for="item in canvasGeneral.pencilList.brushList" :value="item.value">
@@ -88,17 +99,7 @@
</a-select-option>
</a-select>
</div>
<div class="label_item texture" v-show="canvasGeneral.operation == 'texture'">
<div class="title">{{ $t('exportModel.Texture') }}:</div>
<a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.texture.value"
style="width: 12rem "
@change="canvasGeneral.textureValueChange"
>
<a-select-option class="label_select_item" v-for="item in canvasGeneral.texture.list" :value="item.value">
<img :src="item.url" alt="">
</a-select-option>
</a-select>
</div>
<div class="label_item" v-show="
canvasGeneral.operation != 'pencil' &&
canvasGeneral.operation != 'eraser'&&
@@ -162,13 +163,13 @@
frontBackData:'#ff0000',
frontBackDataList:[
{
name:'正面',
name:'Front Piece',
value:'#ff0000'
},{
name:'反面',
name:'Back Piece',
value:'#00ff00'
},{
name:'背景',
name:'Surroundings',
value:'background'
},
]
@@ -190,9 +191,10 @@
const closeModal = ()=>{
document.removeEventListener('click',setOper)
}
const selectImgItem = (data:any)=>{
data.minioUrl = data.url
canvasGeneral.addPartImg(data,'print')
const selectImgItem = (value:any)=>{
value.minioUrl = value.url
canvasGeneral.addPartImg(value,'print')
data.operation = ''
}
const changeFrontBackData = (value:any)=>{
emit('setFrontBackColor',value)
@@ -227,7 +229,7 @@
display: flex;
}
> .current{
border-radius: 3rem;
border-radius: 1rem;
height: 3rem;
width: 7rem;
border: 1px solid #000;
@@ -238,7 +240,7 @@
top: 4rem;
background: #fff;
border: 1px solid #000;
border-radius: 2rem;
border-radius: 1rem;
padding: 2.4rem;
width: 40rem;
height: 50rem;
@@ -264,14 +266,7 @@
cursor: pointer;
}
}
input{
height: 100%;
border-radius: 3rem;
width: 12rem;
background: #fff;
height: 3rem;
border: 1px solid #000;
}
&.wH input{
width: 5rem;
}
@@ -280,23 +275,7 @@
font-weight: 600;
font-size: 1.8rem;
}
:deep(.ant-select){
border-radius: 3rem;
.ant-select-selector{
height: 100%;
border-radius: 3rem;
border: 1px solid;
display: flex;
align-items: center;
justify-content: center;
.ant-select-selection-item{
display: flex;
font-size: 2rem;
line-height: 3rem;
}
}
}
}
&.sketch{

7
src/component/DetailCopy/canvas/canvasContent.vue
View File

@@ -21,6 +21,7 @@
const store = useStore();
let {t} = useI18n()
let canvasType = inject('canvasType')
let getCanvasIfEdit:any = inject('getCanvasIfEdit')
let canvasGeneral:any = inject('canvasObj')
const data:any = reactive({
canvasScaleDom:null,
@@ -31,6 +32,9 @@
})
getCanvasIfEdit.fun = ()=>{
return canvasGeneral.getElement()
}
const createCanvas = (canvasSize:any)=>{
nextTick(async ()=>{
let img = data.selectDetail.undividedLayer
@@ -53,8 +57,9 @@
width:WH.height*wScale,
height:WH.height*hScale,
}
// let editGroupImg = data.selectDetail.partialDesign.partialDesignPath || data.selectDetail.partialDesign.partialDesignBase64
let editGroupImg = data.selectDetail.partialDesign.partialDesignPath
await canvasGeneral.canvasInit(data.canvasDom,size,img,editGroupImg)
await canvasGeneral.canvasInit(data.canvasDom,size,img,editGroupImg,{dashedIsDetail:true})
}
image.src = img
// canvasGeneral.canvasInit(data.canvasDom,canvasSize)

5
src/component/DetailCopy/canvas/index.vue
View File

@@ -87,6 +87,7 @@ export default defineComponent({
})
watch(()=>detailData.selectDetail,(newValue,oldValue)=>{
detailData.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
// privewDetail(oldValue)
},{immediate: true})
provide('frontBackCanvasObj',detailData.frontBackCanvasObj)
provide('canvasObj',detailData.canvasObj)
@@ -121,9 +122,9 @@ export default defineComponent({
detailData.frontBackCanvasObj.currentOperation = false
}
}
const privewDetail = async ()=>{
const privewDetail = async (oldSelectDetail = detailData.selectDetail)=>{
let data = await detailData.canvasObj.detailSubmit()
detailData.selectDetail.partialDesign.partialDesignBase64 = data
if(oldSelectDetail.partialDesign)oldSelectDetail.partialDesign.partialDesignBase64 = data
}
const setFrontBackColor = (data:any)=>{
detailDom.editFrontBack.setBackground(data)

44
src/component/DetailCopy/designDetail.vue
View File

@@ -16,7 +16,7 @@
:closable="false"
>
<div class="content">
<div class="nav">
<div class="nav" :class="{isEditPattern:isEditPattern.value}">
<div class="back_home">
<div class="gallery_btn" @click="closeModal()">
<i class="fi fi-rs-house-chimney"></i>
@@ -130,8 +130,12 @@ export default defineComponent({
childKey:0,
singleOveral:{
value:'overall'
}
},
getCanvasIfEdit:{
fun:null,
},
})
provide('getCanvasIfEdit',detailData.getCanvasIfEdit)
provide('singleOveral',detailData.singleOveral)
provide('isEditPattern',detailData.isEditPattern)
const closeModal = ()=>{
@@ -142,6 +146,7 @@ export default defineComponent({
}
const showDesignDetailModal = (data:any,str:any)=>{
// let url = Https.httpUrls.getDesignDetail + `?designItemId=${77770}&designPythonOutfitId=${77423}`
let url = Https.httpUrls.getDesignDetail + `?designItemId=${data.design.designItemId}&designPythonOutfitId=${data.design.designOutfitId}`
detailData.loadingShow = true
Https.axiosGet(url).then(
@@ -154,11 +159,21 @@ export default defineComponent({
item.layersObject[0] = item.layersObject[1]
item.layersObject[1] = a
}
if(item.color){
item.color.rgba = {
r:item.color.r,
g:item.color.g,
b:item.color.b,
}
}else{
item.color = {
rgba:{
r:255,
g:255,
b:255,
}
}
}
if(item.gradient){
item.color.gradient = item.gradient
}
@@ -170,14 +185,14 @@ export default defineComponent({
});
})
detailData.singleOveral.value = rv.singleOverall
console.log(detailData.singleOveral)
detailData.designDetailShow = true
store.commit('DesignDetailCopy/setDesignDetail',rv)
// this.deleteShow = false
setRevocation()
detailData.loadingShow = false
// await this.setImgSize()
store.commit('DesignDetailCopy/setDesignColthes',rv.clothes[0].id)
}
).catch(rv=>{
@@ -240,6 +255,7 @@ export default defineComponent({
const setClothes = async (list:any)=>{
let clothesList:any = []
for(let i = 0;i<list.length;i++){
detailData.selectDetail
let {scale,offset,priority,maskUrl,maskMinioUrl} = (detailDom.model as any).getSubmitData(list[i])
if(detailDom.canvasBox?.privewDetail)await (detailDom.canvasBox as any).privewDetail()
if(detailDom.detailRight?.privewDetail)await (detailDom.detailRight as any).privewDetail()
@@ -425,14 +441,27 @@ export default defineComponent({
top: 50%;
transform: translate(-50%,-50%);
z-index: 2;
:deep(>div){
> .ant-modal-root{
> .ant-modal-centered{
> .fullScreen{
> .ant-modal-content{
> .ant-modal-body{
padding: 0;
}
}
}
}
}
:deep(.ant-modal-wrap){
.ant-modal-body{
padding: 0;
// padding: 0;
}
// position: absolute;
// top: 0;
// left: 0;
}
}
.content{
display: flex;
align-items: flex-start;
@@ -444,7 +473,7 @@ export default defineComponent({
&.detailLeft{
width: 34rem;
}
&.isEditPattern{width: 0;}
&.isEditPattern{width: 0px;}
&.model{
width: 50rem;
margin: 0 10rem;
@@ -486,6 +515,9 @@ export default defineComponent({
}
> .nav{
margin-right: 5rem;
overflow: hidden;
// transition: all .3s;
&.isEditPattern{width: 0px;margin: 0;}
> .back_home{
width: 9rem;
text-align: center;

15
src/component/DetailCopy/detailLeft/colorBox/index.vue
View File

@@ -1,10 +1,10 @@
<template>
<div class="color">
<div class="detailText">Palette</div>
<div class="detailText">Current color</div>
<div class="pallet">
<pallet :selectColor="selectColor" @selectUplpadColor="selectUplpadColor"></pallet>
</div>
<div class="detailText">New color</div>
<div class="detailText">Color pelette</div>
<div class="colorBox">
<div v-for="item,index in colorList.list[selectDetail.id]" @click="setSelectColor(item,index)" class="colorBoxItem" :class="{active:colorList.index == index}">
<div v-show="!item.gradient" class="background" :style="{'background-color':item.hex}"></div>
@@ -13,7 +13,7 @@
<div v-show="item.gradient" class="backgroundImg" :style="{'background-image':`linear-gradient(${item.gradient?.angle}deg,${setGradient(item.gradient)})`}"></div>
</div>
</div>
<div class="detailText">Upload Image</div>
<div class="detailText">Choose color from image</div>
<div class="uploadImage">
<upload @selectUplpadColor="selectUplpadColor"></upload>
</div>
@@ -246,18 +246,19 @@ export default defineComponent({
flex-direction: column;
overflow-y: auto;
> .detailText{
margin-bottom: 1rem;
margin-bottom: .5rem;
}
> .pallet{
margin-bottom: 4.5rem;
margin-bottom: 2rem;
}
> .colorBox{
margin-bottom: 3rem;
margin-bottom: 1rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
> .colorBoxItem{
margin: 1rem 0;
// margin: 1rem 0;
margin-bottom: 1rem;
width: 32%;
height: 11rem;
border-radius: .5rem;

2
src/component/DetailCopy/detailLeft/colorBox/pallet.vue
View File

@@ -272,7 +272,7 @@ export default defineComponent({
nextTick().then(()=>{
const backIcon = document.createElement('div');
backIcon.classList.add('vc-sketch-color-wrap')
let dropperDom = document.getElementsByClassName("pallet")?.[0].getElementsByClassName('vc-chrome-fields-wrap')[0]
let dropperDom = document.getElementsByClassName("pallet")?.[0]?.getElementsByClassName('vc-chrome-fields-wrap')[0]
dropperDom.appendChild(backIcon);
backIcon.addEventListener('click',async ()=>{
try {

2
src/component/DetailCopy/detailLeft/colorBox/upload.vue
View File

@@ -27,7 +27,7 @@
accept=".jpg,.png,.jpeg,.bmp"
>
<div class="upload_tip_block">
<i class="fi fi-rr-picture"></i>
<i class="fi fi-br-upload"></i>
</div>
</a-upload>
</div>

2
src/component/DetailCopy/detailLeft/index.vue
View File

@@ -2,7 +2,7 @@
<div class="detailLeft">
<sketch v-show="currentDetailType == 'sketch'" @addDetail="addDetail"></sketch>
<print v-show="currentDetailType == 'print'"></print>
<color v-show="currentDetailType == 'color'"></color>
<color v-if="currentDetailType == 'color'"></color>
<element v-show="currentDetailType == 'element'"></element>
<addDetails ref="addDetails" @setSloganData="setSloganData"></addDetails>
</div>

19
src/component/DetailCopy/detailLeft/module/libraryList.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="libraryList">
<div class="generalModel_state">
<div class="generalModel_state_item">
<div class="generalModel_state" v-if="type != 'element'">
<div class="generalModel_state_item" style="width: 40%;">
<a-select
v-model:value="designType"
:options="designTypeList"
@@ -18,8 +18,10 @@
></template>
</a-select>
</div>
<div class="generalModel_state_item">
<input class="search_input" :placeholder="$t('DesignDetailAlter.inputContent1')" v-model="searchPictureName" @keydown.enter="getLibraryList()">
<div class="generalModel_state_item" style="width: 35%;">
<input class="search_input" style="width: 100%;" :placeholder="$t('DesignDetailAlter.inputContent1')" v-model="searchPictureName" @keydown.enter="getLibraryList()">
</div>
<div class="generalModel_state_item" style="width: auto;">
<div class="search_icon_block" @click.stop="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
</div>
<!-- clothesPrint -->
@@ -84,6 +86,7 @@ export default defineComponent({
currentPage:1,
})
const init = ()=>{
console.log(123)
detailData.designTypeList = props.catecoryList
detailData.designType = detailData.designTypeList[0].value
getLibraryList()
@@ -207,13 +210,15 @@ export default defineComponent({
flex-direction: column;
> .generalModel_state{
width: 100%;
display: flex;
justify-content: space-between;
> .generalModel_state_item{
width: 100%;
margin: 0;
position: relative;
> .search_icon_block{
position: absolute;
right: 5px;
// position: absolute;
// right: 5px;
width: calc(6rem - 4px);
height: calc(6rem - 4px);
color: #fff;
@@ -227,7 +232,7 @@ export default defineComponent({
}
}
> .generalModel_state_item:last-child{
margin-top: 2rem;
// margin-top: 2rem;
}
}
> .libraryList_box{

15
src/component/DetailCopy/detailLeft/module/selectList.vue
View File

@@ -1,8 +1,7 @@
<template>
<div class="selectList">
<div class="switch_type_list">
<div class="switch_type_list" v-if="type != 'element'">
<div
v-if="type != 'element'"
@click.stop="openCurrent()"
class="switch_type_item"
:class="[selectTitle == 'current' ? 'select_swtich' : '',]"
@@ -28,7 +27,7 @@
<div class="content_item" v-show="selectTitle == 'current'" v-if="type != 'element'">
<currentList ref="currentList" :level1Type="level1Type" :type="type" @selectImgItem="selectImgItem" :catecoryList="catecoryList"></currentList>
</div>
<div class="content_item" v-show="selectTitle == 'upload'">
<div class="content_item" v-show="selectTitle == 'upload'" v-if="type != 'element'">
<uploadList @selectImgItem="selectImgItem" :level1Type="level1Type" :catecoryList="catecoryList"></uploadList>
</div>
<div class="content_item" v-show="selectTitle == 'library'">
@@ -39,7 +38,7 @@
</template>
<script lang="ts">
import { defineComponent,computed,ref,watch,nextTick,createVNode,toRefs, reactive} from 'vue'
import { defineComponent,computed,onMounted,watch,nextTick,createVNode,toRefs, reactive} from 'vue'
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
@@ -78,7 +77,7 @@ export default defineComponent({
setup(props,{emit}) {
const store = useStore();
const detailData = reactive({
selectTitle: props.type == 'element'?'upload':'current',
selectTitle: props.type == 'element'?'library':'current',
printList:[]
})
const getDetailListDom = reactive({
@@ -97,7 +96,11 @@ export default defineComponent({
const selectImgItem = (data:any)=>{
emit('selectImgItem',data)
}
onMounted(()=>{
if(props.type == 'element'){
openLibrary()
}
})
return{
...toRefs(detailData),
...toRefs(getDetailListDom),

13
src/component/DetailCopy/detailRight/editPrintElement.vue
View File

@@ -70,7 +70,9 @@
<a-spin size="large" />
</div>
</div>
<div class="clearOverall" style="text-align: center; height: 6rem;">
<div class="gallery_btn" v-show="!overallSingle && type == 'print'" style="line-height: 5rem;" @click="clearOverall">Clear</div>
</div>
</div>
</template>
@@ -293,7 +295,6 @@ export default defineComponent({
let state = true
editPrintElementData.stateOverallSingle = 'single'
let arr:any = editPrintElementData.selectDetail.printObject.prints
console.log(props.type)
if(props.type == 'element'){
arr = editPrintElementData.selectDetail.printObject.trims
}
@@ -496,8 +497,10 @@ export default defineComponent({
document.removeEventListener('mouseup',mouseup)
document.removeEventListener('touchend',mouseup)
}
const clearOverall = ()=>{
editPrintElementData.printStyleList[props.type].overall = []
}
onMounted(()=>{
console.log(123123)
if(props.type == 'element'){
editPrintElementData.stateOverallSingle = 'single'
editPrintElementData.overallSingle = true
@@ -516,13 +519,13 @@ export default defineComponent({
itemSizeMousedown,
deletePrint,
previewDetailPrintData,
clearOverall,
}
},
directives:{
//操作旋转
rotote:{
mounted(el,value:any){
console.log(value)
let mousedown = function(event:any){
let e = getMousePosition(event,false)
mouseDownOperation(e)
@@ -680,6 +683,8 @@ export default defineComponent({
.designOpenrtion_imgMask{
width: auto;
height: auto;
min-width: 60%;
// max-height: 80%;
position: relative;
>img{
z-index: 2;

2
src/component/DetailCopy/detailRight/sketchType.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="sketchType">
<div class="sketchType" v-show="selectDetail?.newDetail?.[currentDetailType]">
<div class="detailText">New Apparel</div>
<div class="sketchContent">
<img :src="selectDetail?.newDetail?.[currentDetailType]?selectDetail.newDetail?.[currentDetailType].url:selectDetail.path" :title="selectDetail.type" alt="">

32
src/component/DetailCopy/model/index.vue
View File

@@ -12,12 +12,12 @@
<i v-show="true" class="icon iconfont icon-fanchehui" @click="oppositeRevocation"></i>
<!-- 编辑 -->
<i class="fi fi-rr-edit" :title="$t('DesignDetail.editTitle')" :class="{active:isEditPattern.value}" @click="showDesignImgDetail('edit')"></i>
<i class="fi fi-rr-copy" :title="$t('DesignDetail.compareTitle')" :class="{active:imgDesignImg}" @click="mousedownDesignImg"></i>
<!-- <i class="fi fi-rr-copy" :title="$t('DesignDetail.compareTitle')" :class="{active:imgDesignImg}" @click="mousedownDesignImg"></i> -->
<!-- <i v-show="!body && !deleteShow" :title="$t('DesignDetail.DetailTitle')" class="fi fi-rr-trash" @click="deleteNav(0)"></i>
<i v-show="!body && deleteShow" class="fi fi-br-check" @click="deleteNav(1)"></i> -->
<!-- 层 -->
<!-- <i class="fi fi-rr-copy" :title="$t('DesignDetail.compareTitle')" @mousedown="mousedownDesignImg" @mouseup="mouseupDesignImg" @touchstart="mousedownDesignImg" @touchend="mouseupDesignImg"></i> -->
<i class="fi fi-rr-copy" :title="$t('DesignDetail.compareTitle')" @mousedown="mousedownDesignImg" @mouseup="mousedownDesignImg" @touchstart="mousedownDesignImg" @touchend="mousedownDesignImg"></i>
</div>
<position ref="position" @canvasReload="()=>$emit('canvasReload')" :imgDesignImg=imgDesignImg></position>
@@ -31,6 +31,7 @@ import { defineComponent,computed,ref,inject,nextTick,createVNode,toRefs, reacti
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { Modal,message } from 'ant-design-vue';
import { useI18n } from 'vue-i18n'
import position from './modelPosition.vue';
import modelNav from './modelNav.vue';
@@ -40,9 +41,10 @@ export default defineComponent({
},
emits:['detailEdit','canvasReload','addSketch','revocation','oppositeRevocation'],
setup(props,{emit}) {
const {t} = useI18n()
const store = useStore();
const detailData = reactive({
getCanvasIfEdit:inject('getCanvasIfEdit')as any,
})
const setRevocation:any = inject('setRevocation')
const getDetailListData = reactive({
@@ -58,7 +60,31 @@ export default defineComponent({
return getDetailListDom.position.getSubmitData(value)
}
const showDesignImgDetail = (str:any)=>{
new Promise((resolve, reject) => {
if(
getDetailListData.isEditPattern.value&&
detailData?.getCanvasIfEdit?.fun&&detailData?.getCanvasIfEdit?.fun()?.length > 0
){
Modal.confirm({
title: t('collectionModal.jsContent2'),
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
mask:false,
centered:true,
onOk() {
resolve(true)
emit('detailEdit',str)
},
onCancel(){
resolve(false)
}
});
}else{
resolve(true)
emit('detailEdit',str)
}
})
}
const deleteItem = ()=>{
setRevocation()

10
src/component/DetailCopy/model/modelNav.vue
View File

@@ -33,14 +33,19 @@ export default defineComponent({
currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
frontBack:{} as any,
isEditPattern:inject('isEditPattern') as any,
singleOveral:inject('singleOveral') as any
singleOveral:inject('singleOveral') as any,
getCanvasIfEdit:inject('getCanvasIfEdit')as any,
})
watch(()=>detailData.frontBack_,(newFollowVue)=>{
detailData.frontBack = newFollowVue
})
const selectDetailItem = (item:any,index:number)=>{
new Promise((resolve, reject) => {
if(detailData.isEditPattern.value && detailData.selectDetail?.id){
if(detailData.isEditPattern.value &&
detailData.selectDetail?.id &&
detailData?.getCanvasIfEdit?.fun&&detailData?.getCanvasIfEdit?.fun()?.length > 0
){
Modal.confirm({
title: t('collectionModal.jsContent2'),
icon: createVNode(ExclamationCircleOutlined),
@@ -58,6 +63,7 @@ export default defineComponent({
});
}else{
resolve(true)
emit('canvasReload')
}
}).then((rv)=>{
if(rv)store.commit('DesignDetailCopy/setDesignColthes',item.id)

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

@@ -1,14 +1,14 @@
<template>
<div class="molepositon" :class="{active:!imgDesignImg}">
<div class="designOpenrtion_imgMask" v-if="frontBack?.body" :style="frontBack?.body?.style">
<div class="designOpenrtion_print" :class="{active:singleOveral.value == 'single'}" v-for="item,index in frontBack.back" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))" @click="setpitch(item,index)" :style="frontBack.front[index].style">
<div class="designOpenrtion_imgMask" v-if="frontBack?.body?.path" :style="frontBack?.body?.style">
<div class="designOpenrtion_print" v-for="item,index in frontBack.back" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))" @click="setpitch(item,index)" :style="frontBack.front[index].style">
<img :style="item.imageUrl?'':'display:none;'" :src="item.imageUrl" alt="">
</div>
<img v-show="singleOveral.value == 'overall'" class="perview_img" v-detailBody="frontBack?.body?.path" :style="'width:'+ frontBack?.body?.layersObject?.[0].imageSize?.[0] +';height:' + frontBack?.body?.layersObject?.[0].imageSize?.[0] +';'" v-lazy="frontBack?.body?.layersObject?.[0].imageUrl || ''">
<div class="detail_modal_item_front" :class="{active:singleOveral.value == 'single'}" v-for="item,index in frontBack.front" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))" @click="setpitch(item,index)" :style="item.style">
<img class="perview_img" v-detailBody="frontBack?.body?.path" :style="'width:'+ frontBack?.body?.layersObject?.[0].imageSize?.[0] +';height:' + frontBack?.body?.layersObject?.[0].imageSize?.[0] +';'" v-lazy="frontBack?.body?.layersObject?.[0].imageUrl || ''">
<div class="detail_modal_item_front" v-for="item,index in frontBack.front" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))" @click="setpitch(item,index)" :style="item.style">
<img :src="item.imageUrl" alt="">
</div>
<div class="designOpenrtion_btn" v-show="singleOveral.value != 'overall'">
<div class="designOpenrtion_btn">
<ul v-for="item,index in frontBack.front" :key="item" :class="{active:item.designOpenrtionBtn}" class="designOpenrtion_btn" :style="item.style" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))">
<li class="designOpenrtion_btn_top" @mousedown.stop="itemSizeMousedown('top',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('top',getMousePosition($event,true))"></li>
<li class="designOpenrtion_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('bottom',getMousePosition($event,true))"></li>
@@ -18,7 +18,7 @@
</div>
</div>
<div class="designOpenrtion_imgMask" v-else>
<!-- <img src="" alt=""> -->
<img :src="selectDetail.undividedLayer" alt="">
</div>
</div>
<div class="molepositon" :class="{active:imgDesignImg}">
@@ -339,6 +339,7 @@ export default defineComponent({
}
return{
...toRefs(detailData),
...toRefs(selectItem),
...toRefs(getDetailListDom),
itemSizeMousedown,
@@ -407,9 +408,10 @@ export default defineComponent({
>img{
z-index: 2;
position: relative;
// width: 100%;
width: 100%;
height: 100%;
object-fit: contain;
object-fit: contain;
}
>div{
position: absolute;
@@ -426,11 +428,6 @@ export default defineComponent({
user-select:none;
-webkit-user-drag: none;
}
&.active{
> img{
object-fit: contain;
}
}
.modal_imgItem{
position: absolute;
overflow: hidden;

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

@@ -17,7 +17,6 @@
<div>{{ $t('Cropper.Cutpicture') }}</div>
</div>
<div class="header_right_block" @click.stop="">
<div class="next_step_button" @click.stop="finishCropper()">{{ $t('Cropper.Finish') }}</div>
<div class="header_cancel_button" @click.stop="cancleCropper()">{{ $t('Cropper.Cancel') }}</div>
</div>
</div>
@@ -54,7 +53,7 @@
<div class="review_logo icon iconfont icon-yulan"></div>
<div>{{ $t('Cropper.CropPreview') }}</div>
</div>
<div class="cut_picture_review_block">
<div class="cut_picture_review_block" :style="{'width': previews.w + 'px', 'height': previews.h + 'px'}">
<div class="cut_picture_review_item">
<div class="cut_picture_review_content" :class="{active:isRound}" :style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden'}">
<div :style="previews.div">
@@ -62,6 +61,10 @@
</div>
</div>
</div>
<div class="next_step_button" @click.stop="finishCropper()">
<!-- <i class="fi fi-rr-check"></i> -->
<i class="fi fi-sr-check-circle"></i>
</div>
<!-- <div class="cut_picture_review_item">
<div class="cut_picture_review_block_sec" :style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden'}">
<div :style="previews.div" >
@@ -206,11 +209,10 @@ export default defineComponent({
padding: 0 calc(1.2rem*1.2);
height: calc(3.2rem*1.2);
// background: linear-gradient(160deg, #AC2A3B, #292161);
background: linear-gradient(-137deg, #eeefdb, #e7dbed);
background: #000;
color: #fff;
border-radius: calc(1.6rem*1.2);
font-size: calc(1.4rem*1.2);
color: #000;
line-height: calc(3.2rem*1.2);
margin-right: calc(1.6rem*1.2);
white-space: nowrap;
@@ -237,10 +239,16 @@ export default defineComponent({
// background: #F2F3FB;
display: flex;
justify-content: space-between;
align-items: center;
.cut_picture_right,.cut_picture_left{
display: flex;
flex-direction: column;
height: 80%;
}
.cut_picture_left{
width: calc(70.7rem*1.2);
height: 100%;
// height: 100%;
background: #fff;
border-radius: calc(2rem*1.2);
padding: calc(1.3rem*1.2) calc(1.3rem*1.2) calc(2rem*1.2);
@@ -301,12 +309,12 @@ export default defineComponent({
.cut_picture_right{
// width: 39.2rem;
width: calc(52rem*1.2);
height: 100%;
background: #fff;
border-radius: calc(2rem*1.2);
margin-block: -5rem;
.cur_picture_right_header{
padding: calc(2rem*1.2);
// padding: calc(2rem*1.2);
padding: 2rem;
display: flex;
align-items: center;
font-size: var(--aida-fsize1-8);
@@ -324,9 +332,25 @@ export default defineComponent({
.cut_picture_review_block{
width: 100%;
padding: 0 calc(2rem*1.2);
height: calc(100% - 6.8rem*1.2);
margin: 0 auto;
.next_step_button{
margin-top: 2rem;
i{
display: flex;
// height: 4rem;
// width: 4rem;
// background: #000;
// color: #fff;
font-weight: 900;
border-radius: 50%;
font-size: 4rem;
align-items: center;
justify-content: center;
margin: 0 auto;
cursor: pointer;
}
}
.cut_picture_review_item{
width: 100%;
// height: 50%;
@@ -338,7 +362,7 @@ export default defineComponent({
position: absolute;
left: 50%;
top: 50%;
transform: scale(0.8) translate(-50%, -50%);
transform: scale(1) translate(-50%, -50%);
background: rgba(91,94,105,0.8);
box-shadow: 0 calc(0.2rem*1.2) calc(0.5rem*1.2) 0 rgba(216,213,239,0.3);
border-radius: calc(1rem*1.2);

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

@@ -39,7 +39,7 @@
</div>
</div>
</div>
<input
<!-- <input
class="search_input"
@input="ifMaximumLength"
:placeholder="(scene?.value == 'Slogan' && type_.type2 == 'Printboard')?isSloganHint:$t('Generate.inputContent1')"
@@ -48,7 +48,18 @@
@keydown.enter="getgenerate()"
@click="inputFocus()"
@paste="onPaste"
/>
/> -->
<textarea
class="textarea"
@input="ifMaximumLength"
:placeholder="(scene?.value == 'Slogan' && type_.type2 == 'Printboard')?isSloganHint:$t('Generate.inputContent1')"
:maxlength='inputShow?0:9999'
@keydown.enter.prevent="getgenerate()"
@click="inputFocus()"
v-model="searchPictureName"
@paste="onPaste"
></textarea>
<i class="fi fi-br-upload" :class="{ Guide_1_2_6:type_.type2 == 'Printboard'}" :title="$t('Generate.uploadTitle')" v-show="!isTextarea && upload.level1Type !== 'Moodboard' && scene?.value != 'Slogan' && scene?.value != 'Logo'">
<a-upload
class="search_upImg"
@@ -68,8 +79,8 @@
</a-upload>
</i>
<i v-show="scene?.value == 'Slogan'" :title="$t('Generate.sloganTitle')" @click.stop="setSlogan" class="fi fi-rr-poll-h"></i>
<i v-show="!isTextarea" class="fi fi-br-expand" @click.stop="setTextareaShow"></i>
<i v-show="isTextarea" class="fi fi-bs-compress" @click.stop="setTextareaShow"></i>
<!-- <i v-show="!isTextarea" class="fi fi-br-expand" @click.stop="setTextareaShow"></i>
<i v-show="isTextarea" class="fi fi-bs-compress" @click.stop="setTextareaShow"></i> -->
</div>
<div class="input_box_btnBox sketch" v-else>
<div class="upload_item" v-show="sketchboardList.length > 0">
@@ -91,7 +102,7 @@
>
<img :src="file?.imgUrl" class="upload_img" />
<div class="delete_like_file_block" :class="[driver__.driver?'hideEvents':'']">
<span class="icon iconfont icon-shanchu operate_icon" @click.stop="deleteFile(index)"></span>
<i class="icon iconfont icon-shanchu operate_icon" @click.stop="deleteFile(index)"></i>
</div>
</div>
</div>
@@ -127,8 +138,10 @@
@click.stop=""
v-model="searchPictureName"
></textarea>
<div class="generage_btn_box" v-show="!isGenerate">
<div class="generage_btn started_btn">
<div class="generage_btn_box">
<div class="generage_btn started_btn" v-show="!isGenerate">
<i class="fi fi-bs-magic-wand" style="background-color: #000; font-size: 2.3rem; flex: 1;margin: 0;" @click="getgenerate()"></i>
<!--
<div :class="{Guide_1_2_8:type_.type2 == 'Printboard'}" @click.stop="getgenerate">
<span
v-if="
@@ -139,22 +152,29 @@
{{ speedData.label }}
</span>
<span v-else>{{ $t('Generate.Generate') }}</span>
</div>
</div> -->
<div class="icon iconfont icon-xiala" v-show="
type_.type2 == 'Moodboard' ||
(type_.type2 == 'Printboard' && scene?.value == 'Pattern') ||
(type_.type2 == 'Sketchboard' && scene?.value == 'generate')" :class="{active:speedState}" @click.stop="openSpeed"></div>
</div>
<div class="content" v-show="speedState">
<div v-for="item in speedList" :key="item.value" @click="setSpeed(item)" :title="item.title">{{ item.label }}</div>
<div v-for="item in speedList" :key="item.value" :class="{active:item.value == speedData.value}" @click="setSpeed(item)" :title="item.title">{{ item.label }}</div>
</div>
</div>
<div v-show="isGenerate && !remGenerate" class="generage_btn started_btn" :class="{Guide_1_2_8:type_.type2 == 'Printboard'}" @click="getgenerate">
<div class="generage_btn started_btn" v-show="isGenerate && !remGenerate">
<i class="fi fi-br-loading" ></i>
</div>
<div class="generage_btn started_btn" v-show="remGenerate" @click="removeGenerate">
{{$t('Generate.Close')}}
</div>
</div>
<!-- <div v-show="isGenerate && !remGenerate" class="generage_btn started_btn" :class="{Guide_1_2_8:type_.type2 == 'Printboard'}" @click="getgenerate">
<i class="fi fi-br-loading"></i>
</div>
<div v-show="remGenerate" @click="removeGenerate" class="generage_btn started_btn" :class="{Guide_1_2_8:type_.type2 == 'Printboard'}">
{{$t('Generate.Close')}}
</div>
</div> -->
<span class="inputShowText" ref="inputShowText"></span>
</div>
<div class="search_keyword" v-if="workspace?.allKeywordsByStyle" v-show="isInputFocus" @click.stop="">
@@ -273,20 +293,20 @@ export default defineComponent({
let speed = reactive({
speedList:[
{
title:'Picture quality is average, speed is fast',
label:'Low Quality',
title:'Generate image in fast speed normal quality',
label:'Normal',
value:'fast',
},{
title:'Picture quality is high, speed is slow',
label:'High Quality',
title:'Generate image in high quality low speed',
label:'High',
value:'high',
},
],
speedState:false,
speedData:{
title:'Picture quality is average, speed is fast',
label:'Low Quality',
title:'Generate image in fast speed normal quality',
label:'Normal',
value:'fast',
},
})
@@ -646,7 +666,7 @@ export default defineComponent({
let dataNum = dataList.length
let state = true
this.generateTime = setInterval(()=>{
if(!this.isGenerate || this.remGenerate)return
if(!this.isGenerate || !this.remGenerate)return
if(!state)return
state = false
Https.axiosPost(Https.httpUrls.generateResult, data).then(
@@ -753,10 +773,25 @@ export default defineComponent({
this.searchPictureSeed = 0
}
},
ifMaximumLength(){
ifMaximumLength(event:any){
clearTimeout(this.inputTime)
let inputBox = document.getElementsByClassName('generate')[0].getElementsByClassName('input_box')[0]
let input = inputBox.getElementsByClassName('search_input')[0]
let textarea = event.target as HTMLTextAreaElement;
const scrollTop = textarea.scrollTop;
// 2. 计算单行高度
const lineHeight = parseInt(getComputedStyle(textarea).lineHeight) || 20; // 默认20px
// 3. 重置高度为1行
textarea.style.height = lineHeight + 'px';
// 4. 计算实际需要的高度
const newHeight = Math.max(lineHeight, textarea.scrollHeight);
// 5. 应用新高度并恢复滚动位置
textarea.style.height = newHeight + 'px';
textarea.scrollTop = scrollTop;
this.inputTime = setTimeout(()=>{
// let num1 = ((input as HTMLInputElement).value.match(/ /g) || []).length
// let num2 = (input as HTMLInputElement).value.split(' ').length
@@ -957,8 +992,9 @@ export default defineComponent({
flex-direction: column;
position: relative;
// padding-top: calc(2.5rem*1.2);
.input_border{
.input_border{//输入框
padding-top: 1rem;
}
.mark_loading{
@@ -1011,8 +1047,10 @@ export default defineComponent({
}
}
img {
width: calc(10rem*1.2);
height: calc(10rem*1.2);
// width: calc(10rem*1.2);
// height: calc(10rem*1.2);
width: 100%;
height: 100%;
object-fit: contain;
}
&:hover .delete_like_file_block{

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

@@ -10,7 +10,7 @@
<div class="my_material_header">
<div class="my_material_header_left" v-if="selectCode != 'Moodboard'">
<div class="select_block">
<generalMenu :dataList="disignTypeList" @setprintModel="menuChange" :item="disignType"></generalMenu>
<generalMenu selectWidth="15rem" :dataList="disignTypeList" @setprintModel="menuChange" :item="disignType"></generalMenu>
<!-- <a-select
ref="select"
v-model:value="disignType"

4
src/component/HomePage/NewCollectionReview.vue
View File

@@ -199,9 +199,8 @@ export default defineComponent({
.collection_review{
// width: 40.8rem;
width: 100%;
background: #fff;
position: relative;
padding: 2rem;
.collection_review_mark{
position: absolute;
@@ -213,7 +212,6 @@ export default defineComponent({
}
.img_block_item{
margin-bottom: 2rem;
// &.color_block_item{
// padding: 0 0.5rem 0 0.3rem;
// }

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

@@ -656,7 +656,7 @@ export default defineComponent({
margin-top: auto;
position: relative;
>div{
width: 14rem;
width: 18rem;
font-size: var(--aida-fsize1-6);
border: 0;
i{
@@ -669,7 +669,7 @@ export default defineComponent({
}
}
ul{
width: 14rem;
width: 18rem;
}
}
.switch_type_item:nth-child(3){

31
src/component/HomePage/generalMenu.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="generalMenu_printModel">
<div @click.stop="openPrintModel" :class="driverClass.class1" :style="$props.style_">
<div @click.stop="openPrintModel" :class="driverClass.class1" :style="{...$props.style_,'width':selectWidth}">
<a-popover v-if="isCanvas">
<template #content>
<img style="width: 10rem;height: 10rem;object-fit: contain;" :src="item.img" alt="">
@@ -15,12 +15,12 @@
</div>
<div class="icon iconfont icon-xiala" :class="{active:openClick}"></div>
</div>
<ul :class="driverClass.class2" v-show="openClick">
<li v-for="item,index in dataList" :class="{active:deleteItem == index}" class="printModel_item" @click="setprintModel(item,index)">
<ul :class="driverClass.class2" v-show="openClick" :style="{'width':selectWidth}">
<li v-for="listItem,index in dataList" :class="{active:deleteItem == index,hover:((item?.label && item?.label == listItem?.label) || (item?.name && item?.name == listItem?.name))}" class="printModel_item" @click="setprintModel(listItem,index)">
<a-popover placement="right" v-if="isCanvas">
<template #content>
<!-- <span v-if="item.img != -1 && index == dataList?.length -1 " class="icon iconfont icon-shanchu" style="cursor: pointer; position: absolute; right: 10px; top: 10px;" @click.stop="deleteFile(item)"></span> -->
<img v-if="item.img != -1" style="width: 10rem;height: 10rem;object-fit: contain;" :src="item.img" alt="">
<img v-if="listItem.img != -1" style="width: 10rem;height: 10rem;object-fit: contain;" :src="item.img" alt="">
<!-- <div v-else-if="item.img == -1" class="generalMenu_printModel_upload ">
<i class="fi fi-br-upload input_border" style="width: 8rem; height: 8rem;padding: 0;" :title="$t('Generate.uploadTitle')">
<a-upload
@@ -43,12 +43,12 @@
<span style="text-align: center;">{{ $t('Generate.referenceImage') }}</span>
</template>
<span v-if="item?.label">{{ item?.label }}</span>
<span v-else>{{ item?.name }}</span>
<span v-if="listItem?.label">{{ listItem?.label }}</span>
<span v-else>{{ listItem?.name }}</span>
</a-popover>
<div v-else>
<span v-if="item?.label">{{ item?.label }}</span>
<span v-else>{{ item?.name }}</span>
<span v-if="listItem?.label">{{ listItem?.label }}</span>
<span v-else>{{ listItem?.name }}</span>
</div>
</li>
</ul>
@@ -90,6 +90,10 @@ import { message, Upload, Modal } from "ant-design-vue";
style_:{
type:Object,
default:{}
},
selectWidth:{
type:String,
default:'20rem'
}
},
emits:['setprintModel'],
@@ -200,7 +204,7 @@ import { message, Upload, Modal } from "ant-design-vue";
//衣服类型下拉菜单
.generalMenu_printModel{
margin-right: 2rem;
height: 6rem;
height: 5rem;
.icon-xiala{
margin-left: auto;
transition: all .3s;
@@ -212,11 +216,11 @@ import { message, Upload, Modal } from "ant-design-vue";
// display: flex;
display: block;
width: 20rem;
border-radius: 4rem;
border-radius: 1rem;
margin: 0;
border: 1px solid;
cursor: pointer;
padding: 1.5rem 2rem;
padding: 1rem;
text-align: center;
display: flex;
font-size: 1.8rem;
@@ -239,7 +243,6 @@ import { message, Upload, Modal } from "ant-design-vue";
position: absolute;
border: 1px solid;
width: 20rem;
text-align: center;
margin-top: calc(.3rem*1.2);
border-radius: calc(1rem*1.2);
overflow: hidden;
@@ -265,6 +268,10 @@ import { message, Upload, Modal } from "ant-design-vue";
cursor: not-allowed;
}
&.hover{
background: #f3f3f6;
color: #000;
}
:deep(.icon-shanchu){
cursor: pointer;
position: absolute;

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

@@ -12,7 +12,7 @@
</div>
</div>
</div>
<workflow v-else ref="workflow" @goHome="()=>state = 1" :workflowType="selectObject.type" :httpWorkflowType="selectObject.httpType"></workflow>
<workflow v-if="selectObject?.type" ref="workflow" @goHome="()=>state = 1" :workflowType="selectObject.type" :httpWorkflowType="selectObject.httpType"></workflow>
<div class="mark_loading" v-show="isShowMark">
<a-spin size="large" />
</div>
@@ -113,10 +113,11 @@ export default defineComponent({
let type:any = data.opjectList.find(obj => obj.httpValue === rv.process);
//取出数组对象某个值
let storeData = {
name:'测试项目',
name:rv.name,
id:rv.id,
type:type?.value,
httpType:rv.process,//项目类型
ageGroup:rv.workspaceVO.ageGroup,
style:rv.workspaceVO.style,
styleId:rv.workspaceVO.styleId,
styleName:rv.workspaceVO.styleName,

10
src/component/HomePage/index/model/collection/ColorboardUpload.vue
View File

@@ -655,15 +655,17 @@ export default defineComponent({
setColorboardList(colorList){
let newColorList = colorList.map((v)=>{
console.log(v)
let data = {
id:'',
name:'',
name:v?.name?v?.name:'',
rgbValue:v.rgba,
gradient:v.gradient,
}
return data
})
console.log(123)
this.store.commit('setColorboardList',newColorList)
},
@@ -671,11 +673,11 @@ export default defineComponent({
let colorList = this.store.state.UploadFilesModule.allBoardData.colorBoards
let hex
colorList.forEach((ele, index) => {
this.colorList[index] = ele
hex = this.rgbaToHex([ele.rgbValue.r,ele.rgbValue.g,ele.rgbValue.b,ele.rgbValue.a?ele.rgbValue.a:1])
this.colorList[index].rgba = ele.rgbValue
this.colorList[index].gradient = ele.gradient
// if(ele.gradient) this.colorList[index].gradient = ele.gradient
// if(ele.gradient) this.colorList[index].gradient = ele.gradient
this.colorList[index].name = ele.name
});
if(this.colorList[0]?.gradient && this.colorList[0]?.gradient?.selectIndex>-1 && this.colorList[0]?.gradient?.gradientShow){
this.selectColor = {rgba:this.colorList[0].gradient.gradientList[0].rgba,hex:hex} //顔色选择器默认颜色
@@ -974,7 +976,7 @@ export default defineComponent({
}
}
.fi-rr-square-plus,.fi-rr-picture{
zoom: 7.5;
zoom: 6;
display: flex;
}
.upload_file_item{

1
src/component/HomePage/index/model/collection/MoodboardUpload.vue
View File

@@ -339,6 +339,7 @@ export default defineComponent({
deleteFile(item: any) {
if(item.type_.type1 == 'generate' || item.type_.type1 == 'material'){
item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:8})
item.state = 'delete'
this.store.commit("addGenerateMaterialFils", item);
}else{
this.fileList = this.store.state.UploadFilesModule.moodboardFiles

1
src/component/HomePage/index/model/collection/PrintboardUpload.vue
View File

@@ -384,6 +384,7 @@ export default defineComponent({
// this.store.commit('setPrintboardFile',this.fileList)
if(item.type_.type1 == 'generate' || item.type_.type1 == 'material'){
item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:16})
item.state = 'delete'
this.store.commit("addGenerateMaterialFils", item);
}else{
this.fileList = this.store.state.UploadFilesModule.printboardFiles

5
src/component/HomePage/index/model/collection/SketchboardUpload.vue
View File

@@ -465,6 +465,7 @@ export default defineComponent({
deleteFile(item: any) {
if(item?.type_?.type1 == 'generate' || item?.type_?.type1 == 'material'){
item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:20})
item.state = 'delete'
this.store.commit("addGenerateMaterialFils", item);
}else{
this.fileList = this.store.state.UploadFilesModule.sketchboardFiles
@@ -658,7 +659,7 @@ export default defineComponent({
margin-top: auto;
position: relative;
>div{
width: 14rem;
width: 18rem;
font-size: var(--aida-fsize1-6);
border: 0;
i{
@@ -671,7 +672,7 @@ export default defineComponent({
}
}
ul{
width: 14rem;
width: 18rem;
}
}
.switch_type_item:nth-child(3){

8
src/component/HomePage/index/model/deReconstruction/canvas/argument.vue
View File

@@ -1,5 +1,12 @@
<template>
<div class="canvasArgument">
<div class="label_item">
<div >{{ $t('exportModel.Layer') }}:</div>
<i class="icon iconfont icon-shangyiceng" @click="canvasGeneral.setLayerIndex('Front')"></i>
<i class="icon iconfont icon-shangyiceng2" @click="canvasGeneral.setLayerIndex('Forward')"></i>
<i class="icon iconfont icon-xiayiceng" @click="canvasGeneral.setLayerIndex('Backwards')"></i>
<i class="icon iconfont icon-shangyiceng1" @click="canvasGeneral.setLayerIndex('Back')"></i>
</div>
<div class="label_item" v-show="
canvasGeneral.operation != 'movePosition' &&
canvasGeneral.operation != 'move' &&
@@ -77,6 +84,7 @@
<span style="margin-right: 2rem;">Show Models</span>
<a-switch v-model:checked="isShowBg" @change="showBg" />
</div>
</div>
</template>

8
src/component/HomePage/index/model/deReconstruction/canvas/canvasContent.vue
View File

@@ -9,7 +9,7 @@
</template>
<script lang="ts">
import { defineComponent,computed,reactive,nextTick,toRefs,inject,createVNode, onMounted} from 'vue'
import { defineComponent,computed,reactive,nextTick,toRefs,inject,createVNode, onMounted, watch} from 'vue'
import { Modal,message } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { useI18n } from 'vue-i18n'
@@ -31,8 +31,12 @@
const dataDom = reactive({
canvasScaleDom:null as any,
})
watch(()=>data.selectObject.model.id,(newVal:any)=>{
if(newVal){
canvasGeneral.upDataRectBGImg(data.selectObject.model.url)
}
})
const createCanvas = ()=>{
console.log(123123,data.isCanvas)
if(data.isCanva)return
nextTick(async ()=>{
let width = dataDom.canvasScaleDom.offsetWidth

199
src/component/HomePage/index/model/design/index.vue
View File

@@ -9,9 +9,17 @@
<div class="designPage_left" ref="hidden">
<div class="designPage_left_content" :class="{'active':(domHidden)}">
<!-- 有图状态 start-->
<div class="home_left_info">
<div class="left_info_content scroll_style">
<div class="left_info_content_body" ref="collection_canvas">
<div class="right_content_header">
<div class="content_header_left" style="padding-top: 2rem;">
<i class="fi fi-rs-comments"></i><span class="content_header_des">
{{ $t('HomeView.elementTitle') }}
</span>
</div>
</div>
<NewCollectionReview id="collectionReview"></NewCollectionReview>
<!-- <ExportNewCoolection id="exportNewCoolection"></ExportNewCoolection> -->
@@ -36,15 +44,15 @@
<!-- <div class="gallery_btn white Guide_1_15" @click="designNewCollection()"> -->
{{ $t('HomeView.Design') }}
</div>
<div class="gallery_btn white button_margin_14 Guide_1_30" v-show="designCollectionId"
<!-- <div class="gallery_btn white button_margin_14 Guide_1_30" v-show="designCollectionId"
@click="resDesignCollection()">
{{ $t('HomeView.Redesign') }}
</div>
<div class="silder button_margin_14" v-show="designCollectionId">
</div> -->
<div class="silder button_margin_14" v-show="likeDesignCollectionList?.length > 0">
<div class="text">Small</div>
<a-slider
class="system_silder"
v-model:value="collValue"
v-model:value="elementWidth"
:min="minCollValue"
:max="maxCollValue-1"
@afterChange="setSystemDesigner(500)"
@@ -53,10 +61,9 @@
</a-slider>
<div class="text">Big</div>
</div>
<div v-show="designCollectionId && userGroupId" class="gallery_btn Guide_1_31" style="margin-left: auto" @click="exportModel()">
<!-- {{ $t('HomeView.Export') }} -->
<!-- <div v-show="designCollectionId && userGroupId" class="gallery_btn Guide_1_31" style="margin-left: auto" @click="exportModel()">
{{$t('HomeView.FinalizeCollection')}}
</div>
</div> -->
</div>
</div>
<div class="right_content_block_box">
@@ -73,7 +80,6 @@
</div>
<div class="right_content_img_block scroll_style active">
<div class="right_content_img_item" ref="likeItemDom" designType="like" :index="0">
<div class="content_img_block content_img_GetWidth active" :style="likeStyle"
v-for="(design, index) in likeDesignCollectionList" :key="design.id"
@mousedown.stop="designMousedown(getMousePosition($event,false),design.userLikeSortId,'like')"
@@ -334,9 +340,11 @@ export default defineComponent({
let sessionStorageCollValue = JSON.parse(sessionStorage.getItem('collValue') as any)
const collItemSize = reactive({
collValue:( sessionStorageCollValue>= 20? 10:sessionStorageCollValue) || 3,
minCollValue:4,
maxCollValue:20,
collValue:6,
elementWidth:100,
minCollValue:100,
maxCollValue:999,
padding:60,
likeStyle:{
width:'240px',
height:'370px',
@@ -370,14 +378,18 @@ export default defineComponent({
}
let getDesignTime = null as any;
const setSystemDesigner = (time:any)=>{
clearTimeout(collItemSize.collTime)
collItemSize.collTime = setTimeout(()=>{
nextTick(()=>{
let parentWidth = likeItemDom.value.parentElement.offsetWidth
collItemSize.minCollValue = collItemSize.maxCollValue - Math.round(likeItemDom.value.parentElement.offsetWidth/120)
collItemSize.collValue = collItemSize.collValue<collItemSize.minCollValue?collItemSize.minCollValue:collItemSize.collValue
let value = collItemSize.maxCollValue - collItemSize.collValue
collItemSize.itemStyle.width = (parentWidth - (value * 10)) / value
collItemSize.elementWidth = collItemSize.elementWidth == -1?100:collItemSize.elementWidth
collItemSize.maxCollValue = parentWidth / 2
collItemSize.collValue = Math.floor(parentWidth / collItemSize.elementWidth)
collItemSize.padding = Math.floor(parentWidth - (collItemSize.collValue * collItemSize.elementWidth))
let value = collItemSize.collValue
collItemSize.itemStyle.width = (parentWidth - collItemSize.padding - (value * 10)) / value
collItemSize.itemStyle.height = collItemSize.itemStyle.width * 1.54
collItemSize.collStyle.width = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[0] + 'px'
@@ -476,6 +488,7 @@ export default defineComponent({
//排序 从大到小
const sortDesignCollection = ()=> {
let arrData:any = []
if(!likeDesignCollectionList.value)return
likeDesignCollectionList.value.forEach((likeItem:any)=>{
let item = posiitonData.value.likeElList.filter((item:any)=>item.userLikeSortId == likeItem.userLikeSortId)[0]
likeItem.sort = item.sort + 1
@@ -499,7 +512,7 @@ export default defineComponent({
const reRange = (item:any, x:number, y:number,str:string)=>{
let elList = str == 'like'? posiitonData.value.likeElList:posiitonData.value.generateElList
let index = str == 'like'?posiitonData.value.likeSelectIndex:posiitonData.value.generateSelectIndex
let value = collItemSize.maxCollValue - collItemSize.collValue
let value = collItemSize.collValue
let width,height,num
if(str == 'like'){
num = value
@@ -579,14 +592,14 @@ export default defineComponent({
const moveItem = (str:any)=>{
let elLikeList = posiitonData.value.likeElList
let generateElList = posiitonData.value.generateElList
let value = collItemSize.maxCollValue - collItemSize.collValue
let value = collItemSize.collValue
let width,height
width = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[0]
height = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[1]
// let num = str == 'like'?value:3
for(let i = 0;i < elLikeList.length;i++){
elLikeList[i].el.style.left = (elLikeList.length - 1 - elLikeList[i].sort) % value * (collItemSize.itemStyle.width +10) + 'px';
elLikeList[i].el.style.left = (elLikeList.length - 1 - elLikeList[i].sort) % value * (collItemSize.itemStyle.width +10) + collItemSize.padding/2 + 'px';
elLikeList[i].el.style.top = parseInt(String((elLikeList.length - 1 - elLikeList[i].sort) / value)) * (collItemSize.itemStyle.height +10) + 'px';
}
for(let i = 0;i < generateElList.length;i++){
@@ -820,18 +833,6 @@ export default defineComponent({
//设计新的collection
designNewCollection() {
if(!this.chooseIsDesign.value){
message.info(this.t('HomeView.jsContent10'));
return
}
let { colorBoards } =
this.store.state.UploadFilesModule.allBoardData;
if (!colorBoards || colorBoards?.length < 1) {
message.info(
this.t('HomeView.jsContent1')
);
return;
}
clearTimeout(this.getDesignTime);
let data = this.getDesignData("");
if(this.driver__.driver){
@@ -840,7 +841,7 @@ export default defineComponent({
})
}
this.isShowMark = true
this.store.commit("setLikeDesignCollectionList", []);
// this.store.commit("setLikeDesignCollectionList", []);
Https.axiosPost(Https.httpUrls.designCollection, data)
.then((rv: any) => {
@@ -856,8 +857,8 @@ export default defineComponent({
this.getDesignResult(value,'newDesign')
this.startDesignType = "design";
this.posiitonData.likeSelectIndex = 0
this.posiitonData.likeElList = []
// this.posiitonData.likeSelectIndex = 0
// this.posiitonData.likeElList = []
}
this.isShowMark = false;
})
@@ -906,7 +907,7 @@ export default defineComponent({
this.showDesignMark = false
if(str == 'newDesign'){
if(rv.designCollectionItems){
this.store.commit("deleteUserGroupId");
// this.store.commit("deleteUserGroupId");
this.store.commit(
"setDesignCollectionId",
rv.collectionId
@@ -941,14 +942,6 @@ export default defineComponent({
},
//重新设计collection
resDesignCollection() {
let { colorBoards } =
this.store.state.UploadFilesModule.allBoardData;
if (!colorBoards || colorBoards?.length < 1) {
message.info(
this.t('HomeView.jsContent2')
);
return;
}
if(this.driver__.driver){
nextTick().then(()=>{
driverObj__.moveNext();
@@ -1131,7 +1124,8 @@ export default defineComponent({
likeDesignCollection(design: any, index: any) {
let data = {
designItemId: design.designItemId,
userGroupId: this.userGroupId,
userGroupId: this.store.state.HomeStoreModule.userGroupId,
projectId: this.store.state.Workspace.probjects.id,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
designPythonOutfitId:design.designOutfitId?design.designOutfitId:design.designPythonOutfitId
};
@@ -1178,7 +1172,7 @@ export default defineComponent({
let data = {
designId: design.designId || this.designId,
designPythonOutfitId:design.designOutfitId,
groupDetailId: design.groupDetailId,
groupDetailId: design.groupDetailId || design.id,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
};
if (this.disLikeLoading) {
@@ -1392,6 +1386,9 @@ export default defineComponent({
if(button == 'design'){
this.designNewCollection()
}
nextTick(()=>{
this.setSystemDesigner(100)
})
},
//销毁图片详情
setDetailDestroy() {
@@ -1504,6 +1501,62 @@ export default defineComponent({
// padding-bottom: 4rem;
box-sizing: border-box;
z-index:1;
.right_content_header {
display: flex;
justify-content: space-between;
height: 4.5rem;
align-items: center;
padding: 0 3.2rem 0 1.9rem;
background: rgba(255, 255, 255, 0.2);
position: relative;
.right_content_export{
display: flex;
align-items: center;
position: relative;
.icon-xiala{
cursor: pointer;
transition: .3s all;
margin-left: 1rem;
}
.icon_rotate{
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
animation-direction: 0.5s;
}
.export_nav{
display: flex;
flex-direction: column;
position: absolute;
top: 5.5rem;
width: 100%;
background: #fff;
padding: 1rem;
border: 2px solid;
z-index: 2;
label{
margin: 0;
}
}
}
.content_header_left {
display: flex;
justify-content: space-between;
align-items: center;
.icon-dangqianweizhi {
font-size: 1.6rem;
color: #000;
}
.content_header_des {
font-size: 1.6rem;
color: #000000;
margin-left: 1rem;
font-weight: 900;
}
}
}
.designPage_body {
width: 100%;
height: 100%;
@@ -1515,7 +1568,6 @@ export default defineComponent({
.designPage_left {
// width: 44.4rem;
height: 100%;
padding: 2rem 0 0 0;
background: rgba(255, 255, 255, 0.2);
position: relative;
// overflow: hidden;
@@ -1589,7 +1641,7 @@ export default defineComponent({
}
}
.right_top {
padding: 2rem 3.2rem 2rem 1.2rem;
padding: 1rem 3.2rem 2rem 1.2rem;
display: flex;
justify-content: space-between;
box-shadow: 0rem 0.2rem 8rem 0rem rgba(238, 238, 244, 0.25);
@@ -1656,62 +1708,7 @@ export default defineComponent({
&.active{
overflow: hidden;
}
.right_content_header {
display: flex;
justify-content: space-between;
height: 4.5rem;
align-items: center;
padding: 0 3.2rem 0 1.9rem;
background: rgba(255, 255, 255, 0.2);
position: relative;
.right_content_export{
display: flex;
align-items: center;
position: relative;
.icon-xiala{
cursor: pointer;
transition: .3s all;
margin-left: 1rem;
}
.icon_rotate{
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
animation-direction: 0.5s;
}
.export_nav{
display: flex;
flex-direction: column;
position: absolute;
top: 5.5rem;
width: 100%;
background: #fff;
padding: 1rem;
border: 2px solid;
z-index: 2;
label{
margin: 0;
}
}
}
.content_header_left {
display: flex;
justify-content: space-between;
align-items: center;
.icon-dangqianweizhi {
font-size: 1.6rem;
color: #000;
}
.content_header_des {
font-size: 1.6rem;
color: #000000;
margin-left: 1rem;
font-weight: 900;
}
}
}
.right_content_body {
// padding: 0 1.8rem 0 1.2rem;
// height: calc(50% - 4.5rem);

42
src/component/HomePage/index/model/mannequin/edit.vue
View File

@@ -169,9 +169,13 @@
</div>
<div class="input_blok" v-show="brushProportion">
<div class="label">
<div class="text">Stretch</div>
<div class="text">Resize</div>
<!-- 伸缩 -->
<a-slider class="slider" v-model:value="slider" :tooltipVisible="false" @change="sliderChange"/>
<div class="gallery_btn" @click="stretchOK">完成</div>
<!-- <div class="gallery_btn" @click="stretchOK">完成</div> -->
<div>
<i class="fi fi-sr-check-circle" style="display: flex; font-size: 4rem; cursor: pointer;" @click="stretchOK"></i>
</div>
</div>
</div>
</div>
@@ -843,7 +847,7 @@ export default defineComponent({
}else{
cropper.getCropData(async (value:any) => {
// 转换为File对象
if(this.printObject.templateId){
if(this.printObject.templateId || this.printObject.id){
this.printObject.id = this.printObject.relationId
this.confrimSubmit()
}else{
@@ -853,6 +857,7 @@ export default defineComponent({
this.customRequest().then((rv:any)=>{
this.isShowMark = false
this.printObject.id = rv.id
this.printObject.url = rv.url
this.confrimSubmit()
}).catch((res:any)=>{
this.isShowMark = false
@@ -879,13 +884,13 @@ export default defineComponent({
"type": this.printObject.designType,
// "waistbandLeft": [],
// "waistbandRight": []
...await this.getPrintLocation()
}
this.isShowMark = true
Https.axiosPost(Https.httpUrls.modifyProportion, data).then(
(rv: any) => {
// this.getImgDetail(url)
this.printObject.rv
this.printObject.url = rv
this.option.img = rv
this.setProportion(false)
this.isShowMark = false
}
@@ -920,6 +925,30 @@ export default defineComponent({
cropper.changeScale(num);
},
async confrimSubmit(){
console.log(this.printObject)
let isCovered = true
if(this.editOrUpload == 'edit'){
await new Promise((resolve, reject) => {
Modal.confirm({
title: this.t('LibraryPage.jsContent10'),
icon: createVNode(ExclamationCircleOutlined),
okText: 'Save as new',
cancelText: 'Overwrite',
mask:false,
centered:true,
onOk() {
isCovered = false
resolve('')
},
onCancel(){
isCovered = true
resolve('')
}
});
})
}
let modelType = 'Library'
if(this.userDetail.userId == 88 || this.userDetail.userId == 83){
modelType = this.modelType
@@ -930,6 +959,8 @@ export default defineComponent({
modelType:modelType,
modelSex:this.sex,
checkMd5:1,
modelPath:getMinioUrl(this.printObject.url),
isCovered,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
...await this.getPrintLocation()
}
@@ -1080,6 +1111,7 @@ export default defineComponent({
async setProportion(boolean:any){
this.brushProportion = boolean
if(boolean){
this.slider = 50
let url
if(this.printObject.url){
url = this.printObject.url

73
src/component/HomePage/index/model/mannequin/index.vue
View File

@@ -5,8 +5,8 @@
<!-- <div class="text">Style：</div>
<div class="text" style="margin: 0 9rem 0 4rem;">{{ selectObject?.styleName }}</div>
<div class="gallery_btn" style="line-height: 5rem;" @click="setStyle">{{ $t('Habit.Select') }}</div> -->
<div class="text">Style：</div>
<div class="generalModel_state" style="width: 20rem;">
<div class="text" v-show="systemUser">Style：</div>
<div class="generalModel_state" style="width: 20rem;" v-show="systemUser">
<div class="generalModel_state_item" style="margin: 0; width: 100%;">
<a-select
v-model:value="selectObject.style"
@@ -28,7 +28,7 @@
</div>
<div class="right">
<div class="text" :class="{active:systemUser}">{{ $t('Habit.System') }}</div>
<a-switch class="switch" :disabled="libraryList?.[0]==null?true:false" :checked="!systemUser" @click="setSystemUser" />
<a-switch class="switch" :checked="!systemUser" @click="setSystemUser" />
<div class="text" :class="{active:!systemUser}">{{ $t('Habit.User') }}</div>
</div>
</div>
@@ -37,7 +37,7 @@
<img :src="item.presignedUrl" alt="">
<span v-show="!systemUser" class="icon iconfont icon-tianxie" @click.stop="setEdit(item,!systemUser?'Library':'System','edit')"></span>
<span v-show="!systemUser" class="icon iconfont icon-shanchu" @click.stop="deleteSinglePic(item,index)"></span>
<span class="icon add" v-if="systemUser" :title="'Add to your library'">+</span>
<span class="icon add" v-if="systemUser" :title="'Add to your library'" @click.stop="addSystemToUser(item)">+</span>
</div>
<div class="uploadBox">
<div class="upload" v-if="!systemUser">
@@ -69,6 +69,7 @@ import { useI18n } from 'vue-i18n'
import habitSetStyle from "@/component/Detail/habitSetStyle.vue";
import edit from './edit.vue';
import { Modal,message,Upload,CascaderProps } from 'ant-design-vue';
import { Item } from 'ant-design-vue/lib/menu';
export default defineComponent({
components:{
habitSetStyle,edit
@@ -84,14 +85,14 @@ export default defineComponent({
modelList:[],
systemUser:true,
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
mannequinStyleList:[],
mannequinStyleList:[] as any,
mannequinStyle:computed(()=>store.state.UserHabit.mannequinStyle),//女性衣服位置
})
watch(()=>data.mannequinStyle,(newValue,oldValue)=>{
if(newValue != oldValue){
data.mannequinStyleList = JSON.parse(JSON.stringify(newValue))
data.mannequinStyleList.unshift({
name:'No style',
name:'All',
value:'',
id:'',
})
@@ -210,40 +211,28 @@ export default defineComponent({
Https.axiosPost(Https.httpUrls.batchDeleteLibrary, newData).then(
(rv: any) => {
getModel()
// let id = this.store.state.Workspace.workspace.id
// Https.axiosGet(Https.httpUrls.workspaceDetail,{params:{id:id}}).then((rv: any) => {
// if (rv) {
// if(rv.sexEnum.name == 'Female'){
// rv.mannequinUrl = rv.femalePresignedUrl
// rv.mannequinType = rv.mannequinFemaleType
// rv.mannequinId = rv.mannequinFemaleId
// }else if(rv.sexEnum.name == 'Male'){
// rv.mannequinUrl = rv.malePresignedUrl
// rv.mannequinType = rv.mannequinMaleType
// rv.mannequinId = rv.mannequinMaleId
// }
// this.store.commit("setWorkspace", rv);
// }
// })
}
).catch((res)=>{
// if(res.errCode === 2){
// Modal.confirm({
// title: res.errMsg,
// icon: createVNode(ExclamationCircleOutlined),
// okText: 'Yes',
// cancelText: 'No',
// mask:false,
// zIndex:99999,
// centered:true,
// onOk () {
// newData.deleteModelConfirm = 1
// confirmDeletePic('',index,newData)
// },
// onCancel(){
// }
// });
// }
});
}
const addSystemToUser = (item:any)=>{
let newData = {
sysModelId:item.id,
}
Https.axiosGet(Https.httpUrls.addSysModelToLib, {params:newData}).then(
(rv: any) => {
getModel()
let value = {
id:rv.id,
url:rv.url,
type:'Library',
}
setSelectKey(value)
data.systemUser = false
}
).catch((res)=>{
});
}
onMounted(()=>{
@@ -262,7 +251,8 @@ export default defineComponent({
beforeUpload,
fileUploadChange,
getModel,
deleteSinglePic
deleteSinglePic,
addSystemToUser
}
},
directives:{
@@ -334,6 +324,7 @@ export default defineComponent({
> .item{
width: 25rem;
height: 55rem;
max-height: 100%;
margin: auto 0;
flex-shrink: 0;
cursor: pointer;
@@ -390,8 +381,8 @@ export default defineComponent({
}
}
> .uploadBox{
padding-left: 2rem;
right: .5rem;
padding: 0 2rem;
right: 0;
position: sticky;
flex-shrink: 0;
background: #fff;

37
src/component/HomePage/index/model/patternMaking3D/download.vue
View File

@@ -1,12 +1,13 @@
<template>
<div class="threeDownPage" ref="threeDownPage">
<!-- height="65rem" -->
<a-modal class="generalModel"
v-model:visible="threeDown"
:footer="null"
width="77rem"
height="65rem"
height="35rem"
:maskClosable="false"
:mask="false"
:mask="true"
:centered="true"
:closable="false"
:get-container="() => $refs.threeDownPage"
@@ -24,7 +25,7 @@
</div>
<div style="display: flex; flex-direction: column; height: 100%;">
<div class="modal_title_text" style="text-align: center;">
<div>Please select the image size</div>
<div>Please select the size of the clothing</div>
</div>
<div class="content">
<div class="downItem" v-for="item,key in loadList">
@@ -37,7 +38,7 @@
</div>
</div>
<div style="width: 100%; display: flex; margin-top: auto;">
<div class="gallery_btn" @click="setDown" style="width: 13rem; margin-left: auto;">Download</div>
<div class="gallery_btn" :class="{btnActive:!select.sizeType}" @click="setDown" style="width: 13rem; margin-left: auto;">Download</div>
</div>
</div>
@@ -84,6 +85,8 @@ export default defineComponent({
})
const cancelDsign = ()=>{
data.threeDown = false;
data.select.sizeType = ''
data.select.size = ''
}
const getDowList = (id:any)=>{
data.isShowMark = true
@@ -104,11 +107,13 @@ export default defineComponent({
let value = {
...data.select,
}
Https.axiosGet(Https.httpUrls.downloadZip,{params:value,env:{binary:true,binaryType:'application/octet-stream'}}).then((res:any)=>{
console.log(res)
//anchor 标签下载
let config = {
params:value
}
Https.axiosGet(Https.httpUrls.downloadZip,config).then((res:any)=>{
let a = document.createElement('a');
a.href = res.url;
a.href = res;
a.download = 'model.zip'; // 设置下载的文件名
a.click(); // 触发下载
URL.revokeObjectURL(a.href); // 释放 URL 对象
@@ -126,6 +131,7 @@ export default defineComponent({
data.select.sizeType = key
data.select.size = DSizeItem
}
return{
...toRefs(dataDom),
...toRefs(data),
@@ -142,21 +148,36 @@ export default defineComponent({
})
</script>
<style lang="less" scoped>
:deep(.ant-modal-mask){
background: rgba(0,0,0,0.3);
}
.threeDownPage{
width: 100%;
height: 100%;
position: relative;
:deep(.generalModel){
.gallery_btn{
&.btnActive{
pointer-events: none;
background: rgba(0, 0, 0, .4);
border: none;
}
}
.content{
display: flex;
flex-direction: column;
flex: 1;
padding-left: 6rem;
// width: 55rem;
// margin: 0 auto;
> .downItem{
display: flex;
font-size: 2rem;
font-weight: 600;
margin-bottom: 1rem;
text-align: center;
align-items:center;
> .title{
margin-right: 1.5rem;
width: 3.5rem;

9
src/component/HomePage/index/model/patternMaking3D/index.vue
View File

@@ -2,7 +2,7 @@
<div class="patternMaking3D">
<div class="selectModel">
<div class="heard">Clothing</div>
<div class="list">
<div class="list" v-if="maskShow">
<div v-for="item in modelList" class="modelItem" :class="{active:item.id == selectModel.id}" @click="setSelectModel(item)">
<img :src="item.url" alt="">
</div>
@@ -28,7 +28,7 @@
<img v-show="isFront" :src="selectModel.threeDLayoutList?.[0]?.url" alt="">
<img v-show="!isFront" :src="selectModel.threeDLayoutList?.[1]?.url" alt="">
</div>
<threeBox v-show="imgOrThree" ref="threeBox"></threeBox>
<threeBox v-if="imgOrThree" ref="threeBox"></threeBox>
</div>
<div class="gallery_btn" v-show="!imgOrThree" @click="setImgOrThree(true)">3D view</div>
<div class="gallery_btn" v-show="imgOrThree" @click="setImgOrThree(false)">Img view</div>
@@ -76,6 +76,7 @@ export default defineComponent({
pageSize:10,
imgOrThree:false,
isFront:false,
maskShow:false,
})
const setSelectModel = (item:any)=>{
data.isShowMark = true
@@ -104,6 +105,9 @@ export default defineComponent({
let id = store.state.HomeStoreModule.patternMaking3D
if(id && data.selectModel.id == -1)setSelectModel({id})
})
setTimeout(()=>{
data.maskShow = true
},500)
}
const getModelList = ()=>{
if(data.isShowMark && !data.isNoData)return
@@ -219,6 +223,7 @@ export default defineComponent({
width: calc(100% / 4 - 1rem);
margin: .5rem;
aspect-ratio: 1 / 1.2;
// height: 10rem;
border-radius: 2rem;
border: 2px solid #D4D4D4;
cursor: pointer;

8
src/component/HomePage/index/model/patternMaking3D/three.vue
View File

@@ -125,10 +125,10 @@ export default defineComponent({
floorMesh.rotation.x = -0.5 * Math.PI;
floorMesh.receiveShadow = true;
floorMesh.position.y = -0.001;
data.scene.add(floorMesh);
// data.scene.add(floorMesh);
const textureLoader = new THREE.TextureLoader();
// const texture = textureLoader.load('/3dModel/sketch-thick.jpg');
data.scene.background = new THREE.Color("#eee");
data.scene.background = new THREE.Color("#fff");
// data.scene.background = texture;
let openModel = (event:any)=>{
@@ -213,7 +213,7 @@ export default defineComponent({
//添加图片材质
data.load.state = true
let textureLoader = new THREE.TextureLoader()
textureLoader.load('/3dModel/texture0.webp', // 图片放在public/textures目录下
textureLoader.load('https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E7%99%BD%E8%89%B2%E5%9B%BE%E7%89%87&hs=0&pn=8&spn=0&di=7466852183703552001&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=1061489690%2C1376605706&os=2709213815%2C2487532130&simid=3551480199%2C346831275&adpicid=0&lpn=0&ln=0&fm=&sme=&cg=&bdtype=0&oriquery=&objurl=https%3A%2F%2Fwx2.sinaimg.cn%2Fmw690%2F941fd00fgy1hrx01tvys1j20zk1bet8s.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fojtk5_z%26e3Bv54AzdH3Fd9bc88db90AzdH3FO5LdNyykj&gsm=&islist=&querylist=', // 图片放在public/textures目录下
(texture:any) => {
// 3. 配置纹理参数
texture.wrapS = THREE.RepeatWrapping;
@@ -226,7 +226,7 @@ export default defineComponent({
const newMaterial = new THREE.MeshStandardMaterial({
map: texture, // 基础颜色贴图
roughness: 0.7, // 表面粗糙度 (0-1)
metalness: 0.2, // 金属质感 (0-1)
metalness: .2, // 金属质感 (0-1)
side: THREE.DoubleSide // 双面渲染
});
console.log(child)

175
src/component/HomePage/index/model/poseTransfer/index.vue
View File

@@ -2,19 +2,21 @@
<div class="poseTransfer">
<div class="configuratioBox" :class="{active:button.left}">
<div class="configuratio">
<div class="title">Give pose for them to select</div>
<!-- <div class="title">Give pose for them to select</div> -->
<div class="content">
<!-- <selectList @selectImgItem="selectImgItem" level1Type="Printboard" type="print"></selectList> -->
<div class="selectImg">
<div class="head">
<div class="text">Current</div>
<div class="text">Choose design to transfer</div>
</div>
<div class="imgBox">
<div class="imgBox" v-mousewheel>
<div class="item" :class="{active:item.id == selectImg.id}" v-for="item in currentList" @click="selectImgItem(item)">
<img :src="item.imgUrl || item.url" alt="">
<a-checkbox v-model:checked="item.isChecked"></a-checkbox>
</div>
<div class="item" :class="{active:item.id == selectImg.id}" v-for="item in fileList" @click="selectImgItem(item)">
<img :src="item.imgUrl || item.url" alt="">
<a-checkbox v-model:checked="item.isChecked"></a-checkbox>
</div>
<div class="upload_item item">
<div class="upload_file_item">
@@ -46,45 +48,50 @@
</div>
<div class="poses">
<div class="head">
<div class="text">Target poses</div>
<div class="text">Choose pose</div>
</div>
<div class="imgBox">
<div class="item" v-for="item in currentList">
<img :src="item.imgUrl" alt="">
<div class="imgBox" v-mousewheel>
<div class="item" v-for="item in poseList" @click="selectPose(item)">
<img :src="item.firstFrame"
alt=""
@mouseenter.stop="gifPlay($event,item)"
@mouseleave.stop="gifPause($event,item)"
>
<a-checkbox v-model:checked="item.isChecked"></a-checkbox>
</div>
</div>
</div>
</div>
</div>
<div class="generate">
<div class="gallery_btn" v-show="!isGenerate" @click="getgenerate">
<div class="generate input_border">
<div class="generage_btn started_btn" v-show="!isGenerate" @click="getgenerate">
{{ $t('Generate.Generate') }}
</div>
<div v-show="isGenerate && !remGenerate" class="gallery_btn">
<div v-show="isGenerate && !remGenerate" class="generage_btn started_btn">
<i class="fi fi-br-loading"></i>
</div>
<div v-show="remGenerate" @click="removeGenerate" class="gallery_btn">
<div v-show="remGenerate" @click="removeGenerate" class="generage_btn started_btn">
{{$t('Generate.Close')}}
</div>
</div>
</div>
<div class="likeBox">
<div class="element">
<div class="title">Selected Product</div>
<div class="title"><i class="fi fi-rs-comments"></i><span>Selected Video</span></div>
<div class="content">
<generalDrag ref="generalDragLeft" v-if="isState" :list="likeList" :isVideo="true" @setBtn="likeSetBtn"></generalDrag>
</div>
<div class="btnLeft" @click="setSize('left')">
<span class="icon iconfont icon-xiala" :class="{'active':button.left}"></span>
</div>
<div class="btnRight" @click="setSize('right')">
<span class="icon iconfont icon-xiala" :class="{'active':button.right}"></span>
<!-- <div class="btnLeft" @click="setSize('left')" :class="{'active':button.left}">
<span class="icon iconfont icon-xiala"></span>
</div> -->
<div class="btnRight" @click="setSize('right')" :class="{'active':button.right}">
<span class="icon iconfont icon-xiala"></span>
</div>
</div>
</div>
<div class="noLikeBox" :class="{active:button.right}">
<div class="element">
<div class="title">Generate Product</div>
<div class="title"><i class="fi fi-rs-comments"></i><span>Generated Video</span></div>
<div class="content">
<generalDrag ref="generalDragRight" v-if="isState" :list="noLikeList" :isVideo="true" @setBtn="noLikeSetBtn"></generalDrag>
</div>
@@ -134,10 +141,13 @@ export default defineComponent({
},
waitList:[],
likeList:computed(()=>store.state.HomeStoreModule.poseTransfer),
noLikeList:[{id:1},{id:2},{id:3},{id:4},{id:5},{id:6},],
noLikeList:[],
isGenerate:false,//判断是否正在进行generate
remGenerate:false,
removeGenerate:false,
generateTime:null as any,
poseList:[],
selectPose:null as any,
})
const setIsShowMark:any = inject('setIsShowMark')
const dataDom = reactive({
@@ -145,14 +155,33 @@ export default defineComponent({
generalDragRight:null as any,
scaleVideo:null as any,
})
const selectImgItem = (item:any)=>{
const selectImgItem = (item:any,)=>{
data.selectImg = item
data.selectImg.minioUrl = getMinioUrl(item.url)
data.fileList.forEach((listItem:any)=>listItem.isChecked = false)
data.currentList.forEach((listItem:any)=>listItem.isChecked = false)
item.isChecked = true
if(item.url || item.imgUrl)data.selectImg.minioUrl = getMinioUrl(item.url || item.imgUrl)
}
const openSetData = ()=>{
// dataDom.generalDrag.openSetData()
data.currentList = store.state.UploadFilesModule.modularData.toProduct
setIsShowMark(false)
if(data.poseList.length == 0){
getPoseList()
}
}
const gifPlay = (e:any,item:any)=>{
e.target.src = item.gif//使用gif图片
}
const gifPause = (e:any,item:any)=>{
e.target.src = item.firstFrame//静态图片
}
const getPoseList = ()=>{
Https.axiosGet(Https.httpUrls.getAllPose).then((rv)=>{
rv[0].isChecked = true
data.selectPose = rv[0]?.id || 1
data.poseList = rv
})
}
const setSize = (str:any)=>{
data.button[str] = !data.button[str]
@@ -173,7 +202,7 @@ export default defineComponent({
data.remGenerate = true
},10000)
let value = {
poseId:1,
poseId:data.selectPose,
projectId:store.state.Workspace.probjects.id,
productImage:data.selectImg.minioUrl,
}
@@ -187,11 +216,11 @@ export default defineComponent({
})
}
const setGenerate = (dataList:any)=>{
let list = dataList
let list:any = dataList
let dataNum = dataList.length
let state = true
data.generateTime = setInterval(()=>{
if(!data.isGenerate || data.remGenerate)return
if(!data.isGenerate || !data.remGenerate)return
if(!state)return
state = false
Https.axiosGet(Https.httpUrls.poseTransformResult,{params:{taskId:list}}).then(
@@ -205,11 +234,15 @@ export default defineComponent({
element.url = element.firstFrameUrl
let index = data.noLikeList.findIndex((obj:any) => obj.taskId === element.taskId);
data.noLikeList[index] = element
list = list.filter((item:any) => item !== element.taskId);
console.log(list)
list = ''
// if(list?.filter)list = list?.filter((item:any) => item !== element.taskId);
}else if(element.status == 'Fail'){
}
});
data.waitList = list
if((list.length == 0)|| (rv.filter((item:any)=>item.status == 'Invalid').length ==list.length)){
if((!list)|| (rv.filter((item:any)=>item.status == 'Invalid').length ==list.length)){
if(rv.filter((item:any)=>item.status == 'Invalid').length ==dataNum){
message.info(t('Generate.effectPoor'));
}else{
@@ -224,6 +257,7 @@ export default defineComponent({
}
}
).catch(res=>{
data.noLikeList = data.noLikeList.filter((item:any)=>item.taskId != list)
clearInterval(data.generateTime)
clearInterval(data.remGenerateTime)
data.isGenerate = false
@@ -276,6 +310,8 @@ export default defineComponent({
if(res.errCode == 0){
file.imgUrl = res.data.url;
file.id = res.data.id
data.fileList.forEach((listItem:any)=>listItem.isChecked = false)
data.currentList.forEach((listItem:any)=>listItem.isChecked = false)
file.isChecked = true
file.type = 'ProductElement'
// if(props.productimgMenu.value == 'Relight'){
@@ -308,6 +344,7 @@ export default defineComponent({
if(item.id == id){
if(str == 'zoom'){
showViewVideo({url:item.videoUrl})
}else if(str == 'like'){
likeFile(item,'like',index)
}
@@ -353,8 +390,13 @@ export default defineComponent({
).catch(res=>{
});
}
const selectPose = (item:any)=>{
item.isChecked = true
data.selectPose = item?.id || 1
data.poseList.forEach((listItem:any)=>listItem.isChecked = false)
}
onMounted(()=>{
// showViewVideo({url:'https://www.minio.aida.com.hk:12025/api/v1/download-shared-object/aHR0cHM6Ly93d3cubWluaW8uYWlkYS5jb20uaGs6MTIwMjQvYWlkYS11c2Vycy84OS9wb3NlX3RyYW5zZm9ybV92aWRlby8xMjMtODkubXA0P1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9N0tOVDdNWlNLWkRXM1RVOEJZVlklMkYyMDI1MDQwOCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTA0MDhUMDUxOTM1WiZYLUFtei1FeHBpcmVzPTQzMTk5JlgtQW16LVNlY3VyaXR5LVRva2VuPWV5SmhiR2NpT2lKSVV6VXhNaUlzSW5SNWNDSTZJa3BYVkNKOS5leUpoWTJObGMzTkxaWGtpT2lJM1MwNVVOMDFhVTB0YVJGY3pWRlU0UWxsV1dTSXNJbVY0Y0NJNk1UYzBOREV4T0RneE9Td2ljR0Z5Wlc1MElqb2lZV1J0YVc0aWZRLmY0Z3RoTU1BeC1GUnM3eGhWNFdjTUFCUW5lU19BVkIxUDlYbnJQbEFNWUFsVnJwY3RpYXgtU2cyY2FkZHZ0a0VCOU1NbWxGeUlIbU90aGhUWDlqN2lnJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZ2ZXJzaW9uSWQ9bnVsbCZYLUFtei1TaWduYXR1cmU9Yjg5YmQ4ZDg5M2I4ZjBjYmYxZDI3NDFjZmY0NGRiZGNmYWM2NmU0ZGM2OGIwYzQzZDA2OGI4YjYzZjE5YjhhOA'})
})
return{
...toRefs(dataDom),
@@ -363,6 +405,8 @@ export default defineComponent({
selectImgItem,
setSize,
setItemPosition,
gifPlay,
gifPause,
getgenerate,
getUploadUrl,
beforeUpload,
@@ -370,8 +414,24 @@ export default defineComponent({
removeGenerate,
likeSetBtn,
noLikeSetBtn,
selectPose,
}
},
directives:{
mousewheel:{
mounted (el) {
el.addEventListener('wheel',(e:WheelEvent)=>{
let num = 0
if(e.deltaY > 0){
num = 25
}else{
num = -25
}
el.scrollBy(num, 0);
},{ passive: true })
}
},
},
provide() {
return {
}
@@ -390,22 +450,27 @@ export default defineComponent({
display: flex;
flex-direction: column;
align-items: center;
padding-right: 3.8rem;
&.active{
width: 0;
overflow: hidden;
}
> .generate{
margin-top: auto;
margin-left: auto;
> .started_btn{
font-weight: 300;
}
}
}
> .configuratioBox > .configuratio{
padding-right: 3.8rem;
width: 31.8rem;
padding-bottom: 1rem;
> .title{
// font-size: 2.6rem;
}
> .content{
margin-top: 4rem;
// margin-top: 4rem;
margin-top: 1.8rem;
> .selectImg,> .poses{
display: flex;
flex-direction: column;
@@ -414,24 +479,29 @@ export default defineComponent({
max-height: 45rem;
margin-top: 2rem;
display: flex;
flex-wrap: wrap;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
width: 100%;
overflow: hidden;
overflow-y: auto;
overflow-x: auto;
> .item{
margin-right: 1rem;
width: calc(100% / 2 - .5rem);
margin-bottom: 1rem;
cursor: pointer;
border-radius: 2rem;
border: 2px solid #8e8e8e;
overflow: hidden;
display: flex;
justify-content: center;
flex-shrink: 0;
height: 25rem;
&.active{
border: 2px solid;
position: relative;
// &.active{
// border: 2px solid;
// }
:deep(.ant-checkbox-wrapper){
position: absolute;
top: 2rem;
right: 2rem;
}
> img{
width: 100%;
@@ -447,29 +517,11 @@ export default defineComponent({
font-weight: 600;
> .text{
display: inline-block;
font-size: 1.6rem;
}
}
}
> .selectImg{
> .head{
> .text{
position: relative;
&::before {
position: absolute;
content: "";
display: block;
background: #000;
height: calc(.4rem*1.2);
left: 50%;
transform: translateX(-50%);
bottom: -.5rem;
width: 0px;
width: 100%;
transition: 0.3s all;
}
}
}
}
> .poses{
margin-top: 3rem;
}
@@ -504,8 +556,12 @@ export default defineComponent({
>span{
transition: all .3s;
transform: rotate(90deg);
}
&.active{
>span{
transform: rotate(270deg);
}
}
}
@@ -521,6 +577,11 @@ export default defineComponent({
}
> .title{
margin-bottom: 2rem;
font-size: 1.6rem;
font-weight: 900;
> span{
margin-left: 1rem;
}
}
}

175
src/component/HomePage/index/model/toProduct/index.vue
View File

@@ -10,62 +10,8 @@
<!-- <div class="productImg_content_item_title productImg_content_item_title_menu">
<generalMenu class="productImg_content_item_title_menubtn" :class="{hideEvents:driver__.driver}" :dataList="productimgMenuList" @setprintModel="setproduct" :item="productimgMenu"></generalMenu>
</div> -->
<div class="input_border productImg_content_item_generate">
<div class="input_box">
<div class="input_box_btnBox">
<input
class="search_input"
:placeholder="$t('Generate.inputContent1')"
v-model="searchName[productimgMenu.value]"
@keydown.enter="getPrductimg()"
/>
<i v-show="!isTextarea" class="fi fi-br-expand" @click.stop="()=>isTextarea = !isTextarea"></i>
<i v-show="isTextarea" class="fi fi-bs-compress" @click.stop="()=>isTextarea = !isTextarea"></i>
</div>
<textarea
v-show="isTextarea"
class="search_textarea "
@keydown.enter="getPrductimg()"
v-model="searchName[productimgMenu.value]"
></textarea>
</div>
</div>
<div v-show="productimgMenu.value == 'ToProductImage'" class="productImg_content_item_title productImg_content_item_title_similarity">
<span>{{$t('ProductImg.Similarity')}}</span>
</div>
<div v-show="productimgMenu.value == 'ToProductImage'" class="productImg_content_item_similarity">
<a-slider class="system_silder"
v-model:value="similarity"
@afterChange="setSimilarity"
:tooltipVisible="false"
:step="5"
>
</a-slider>
<input type="number" readonly v-model="similarity">
</div>
<div v-show="productimgMenu.value == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
<span>{{$t('ProductImg.RelightDirection')}}</span>
</div>
<div v-show="productimgMenu.value == 'Relight'" class="productImg_content_item_Direction">
<a-select style="width: 100%;" v-model:value="RelightDirection" :options="RelightDirectionList"></a-select>
</div>
<div v-show="productimgMenu.value == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
<span>{{$t('ProductImg.Highlight')}}</span>
</div>
<div v-show="productimgMenu.value == 'Relight'" class="productImg_content_item_similarity">
<a-slider class="system_silder"
v-model:value="brightenValue"
:tooltipVisible="false"
:max="3"
:min="1"
:step="0.1"
>
</a-slider>
<input type="number" readonly v-model="brightenValue">
</div>
<div class="productImg_content_item_title">{{$t('ProductImg.SelectCollection')}}</div>
<div class="productImg_content_item_imgBox generalScroll upload_item">
<div class="productImg_content_item_imgBox generalScroll upload_item" v-mousewheel>
<div class="content_item_imgBox_itemImg" v-for="item,index in selectList[productimgMenu.value]" :key="item.id" >
<img @click="setGenerate(item)" v-lazy="item.designOutfitUrl?item.designOutfitUrl:item.url" alt="" :class="[item?.isChecked?'active':'']">
<a-checkbox v-model:checked="item.isChecked"></a-checkbox>
@@ -117,6 +63,59 @@
</div>
</div>
<div v-show="productimgMenu.value == 'ToProductImage'" class="productImg_content_item_title productImg_content_item_title_similarity">
<span>{{$t('ProductImg.Similarity')}}</span>
</div>
<div v-show="productimgMenu.value == 'ToProductImage'" class="productImg_content_item_similarity">
<a-slider class="system_silder"
v-model:value="similarity"
@afterChange="setSimilarity"
:tooltipVisible="false"
:step="5"
>
</a-slider>
<input type="number" readonly v-model="similarity">
</div>
<div v-show="productimgMenu.value == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
<span>{{$t('ProductImg.RelightDirection')}}</span>
</div>
<div v-show="productimgMenu.value == 'Relight'" class="productImg_content_item_Direction">
<a-select style="width: 100%;" v-model:value="RelightDirection" :options="RelightDirectionList"></a-select>
</div>
<div v-show="productimgMenu.value == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
<span>{{$t('ProductImg.Highlight')}}</span>
</div>
<div v-show="productimgMenu.value == 'Relight'" class="productImg_content_item_similarity">
<a-slider class="system_silder"
v-model:value="brightenValue"
:tooltipVisible="false"
:max="3"
:min="1"
:step="0.1"
>
</a-slider>
<input type="number" readonly v-model="brightenValue">
</div>
<div class="input_border productImg_content_item_generate">
<div class="input_box">
<div class="input_box_btnBox">
<!-- <input
class="search_input"
:placeholder="productimgMenu.value == 'Relight'?$t('ProductImg.relightInput'):$t('ProductImg.productInput')"
v-model="searchName[productimgMenu.value]"
@keydown.enter="getPrductimg()"
/> -->
<textarea
class="textarea"
@input="ifMaximumLength"
:placeholder="productimgMenu.value == 'Relight'?$t('ProductImg.relightInput'):$t('ProductImg.productInput')"
@keydown.enter.prevent="getPrductimg()"
v-model="searchName[productimgMenu.value]"
></textarea>
</div>
</div>
</div>
<!-- <div class="productImg_content_item_title">{{$t('ProductImg.Upload')}}</div>
<div class="productImg_content_item_imgBox generalScroll upload_item">
@@ -142,7 +141,7 @@
<div class="productImg_right_item_box generalScroll">
<div class="content_header_left">
<i class="fi fi-rs-comments"></i><span class="content_header_des">
{{ $t('HomeView.SelectedDesign') }}
{{ $t('ProductImg.SelectedDesign') }}
</span>
</div>
<!-- <div class="productImg_right_item" v-for="item,index in generateList" :key="item"> -->
@@ -173,12 +172,10 @@
<generalDrag ref="generalDragLeft" @setBtn="selectSetBtn" :list="likeList[productimgMenu.value]"></generalDrag>
</div>
<!-- </div> -->
<div class="mark_loading" v-show="isShowMark">
<a-spin size="large" />
</div>
<div class="btnLeft" @click="setSize('left')">
<!-- <div class="btnLeft" @click="setSize('left')">
<span class="icon iconfont icon-xiala" :class="{'active':button.left}"></span>
</div>
</div> -->
<div class="btnRight" @click="setSize('right')">
<span class="icon iconfont icon-xiala" :class="{'active':button.right}"></span>
</div>
@@ -188,12 +185,15 @@
<div class="productImg_right_item_box right generalScroll">
<div class="content_header_left">
<i class="fi fi-rs-comments"></i><span class="content_header_des">
{{ $t('HomeView.GeneratedDesign') }}
{{ $t('ProductImg.productImageDrafts') }}
</span>
</div>
<div class="content">
<generalDrag ref="generalDragRight" @setBtn="generateSetBtn" :list="generateList" :showMark="isShowMark"></generalDrag>
</div>
<!-- <div class="mark_loading" v-show="isShowMark">
<a-spin size="large" />
</div> -->
<!-- <div class="productImg_right_item" v-for="item,index in likeList[productimgMenu.value]" :key="item" >
<img :src="item.url" alt="">
<div class="productImg_right_item_iconRight">
@@ -272,7 +272,6 @@ export default defineComponent({
ToProductImage:'',
Relight:'',
},
isTextarea:false,//是否展开
remProductimg:false,//是否出现取消按钮
isProductimg:false,//开始生成
selectProductimgList:[],
@@ -329,7 +328,7 @@ export default defineComponent({
});
let userlikeGroupId = 0
const openSetData = ()=>{
cleardata()
// cleardata()
if(props.productimgMenu.value == 'ToProductImage'){
selectList.value['ToProductImage'] = JSON.parse(JSON.stringify(selectDesignList.value.design.likeData))
}else if(props.productimgMenu.value == 'Relight'){
@@ -340,6 +339,7 @@ export default defineComponent({
}
userlikeGroupId = selectDesignList.value.userlikeGroupId
// getLikeProductImage(selectDesignList.value.userlikeGroupId)
productImgDom.generalDragLeft.setItemPosition()
}
let setproduct = (value:any)=>{
// props.productimgMenu = value
@@ -719,6 +719,18 @@ export default defineComponent({
setItemPosition()
})
}
const ifMaximumLength = (event:any)=>{
let textarea = event.target as HTMLTextAreaElement;
const scrollTop = textarea.scrollTop;
// 2. 计算单行高度
const lineHeight = parseInt(getComputedStyle(textarea).lineHeight) || 20; // 默认20px
// 3. 重置高度为1行
textarea.style.height = lineHeight + 'px';
// 4. 计算实际需要的高度
const newHeight = Math.max(lineHeight, textarea.scrollHeight);
textarea.style.height = newHeight + 'px';
textarea.scrollTop = scrollTop;
}
return {
upload,
driver__,
@@ -749,10 +761,23 @@ export default defineComponent({
generateSetBtn,
setItemPosition,
setSize,
ifMaximumLength,
};
},
directives:{
mousewheel:{
mounted (el) {
el.addEventListener('wheel',(e:WheelEvent)=>{
let num = 0
if(e.deltaY > 0){
num = 25
}else{
num = -25
}
el.scrollBy(num, 0);
},{ passive: true })
}
},
},
data() {
return {
@@ -812,7 +837,7 @@ methods: {
}
}
.productImg_content_bottom{
height: calc(100% - 4rem - 2.4rem);
height: 100%;
--border-color: #c4c4c4;
display: flex;
justify-content: space-between;
@@ -858,7 +883,8 @@ methods: {
display: flex;
margin-right: 1rem;
position: relative;
height: 14rem;
height: 36rem;
max-height: 100%;
position: relative;
img{
height: 100%;
@@ -866,10 +892,8 @@ methods: {
cursor: pointer;
object-fit: contain;
opacity: .5;
transform: scale(.9);
&.active{
opacity: 1;
transform: scale(1);
}
}
.ant-checkbox-wrapper{
@@ -918,7 +942,7 @@ methods: {
height: 100%;
flex-direction: column;
padding-right: 3.8rem;
width: 31.8rem;
width: 39rem;
&.active{
width: 0;
padding: 0;
@@ -931,14 +955,17 @@ methods: {
width: 9rem;
border: none !important;
&.upload_file_item:last-child{
width: 9rem;
margin-right: 0rem;
}
}
// width: 45%;
.productImg_content_item_imgBox{
flex-shrink: 0;
margin-bottom: 3rem;
.content_item_imgBox_itemImg{
width: auto;
max-width: 9rem;
max-width: 20rem;
flex-shrink: 0;
img{
object-fit: contain;
@@ -946,16 +973,18 @@ methods: {
}
.upload_file_item{
flex-shrink: 0;
width: 9rem;
width: 36rem;
}
}
.productImg_content_item_generate{
--width:100%;
padding-bottom: 1rem;
// margin-top: auto;
}
.productImg_content_item_similarity{
display: flex;
align-items: center;
padding-bottom: 3rem;
.system_silder{
flex: 1;
}
@@ -965,6 +994,7 @@ methods: {
height: 5rem;
text-align: center;
font-size: 1.8rem;
margin-left: 2rem;
}
}
.productImg_content_item_Direction{
@@ -986,7 +1016,6 @@ methods: {
}
}
.productImg_content_item_generate_btn{
margin-top: auto;
width: 100%;
justify-content: space-around;
.input_box{

14
src/component/HomePage/index/workflow/content/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="contentBox">
<div class="contentBox" :class="{active:selectKey_ == 'design'}">
<seriesDesign v-if="selectObject.id && workflowType == 'seriesDesign'" ref="seriesDesign" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType"></seriesDesign>
<singleProductDesign v-if="selectObject.id && workflowType == 'singleProductDesign'" ref="singleProductDesign" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType"></singleProductDesign>
<sketchDesign v-if="selectObject.id && workflowType == 'sketchDesign'" ref="sketchDesign" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType"></sketchDesign>
@@ -15,6 +15,7 @@ import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import workspace from '../../workflow/workspace.vue'
import seriesDesign from './seriesDesign.vue'
import printDesign from './printDesign.vue'
import singleProductDesign from './singleProductDesign.vue'
@@ -27,7 +28,7 @@ import { gsap, TweenMax } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
export default defineComponent({
components:{
seriesDesign,printDesign,singleProductDesign,sketchDesign,productDrawingDesign,printingDesign3D
workspace,seriesDesign,printDesign,singleProductDesign,sketchDesign,productDrawingDesign,printingDesign3D
},
props:{
selectKey_:String,
@@ -89,6 +90,7 @@ export default defineComponent({
})
}
const saveProject = (str:any)=>{
if(str == 'design')return
let value:any = {
projectId:data.selectObject.id,
}
@@ -97,7 +99,7 @@ export default defineComponent({
return
}
store.dispatch('getProjectData',str).then((data)=>{
if(!data[str])return
// if(!data[str])return
value[str] = data[str]
Https.axiosPost(Https.httpUrls.saveModuleContent, value).then((rv)=>{
@@ -205,10 +207,14 @@ export default defineComponent({
display: flex;
width: 100%;
height: 100%;
overflow: hidden;
&.active{
overflow: initial;
}
> .contentBox{
position: relative;
flex: 1;
overflow: hidden;
overflow-x: initial;
> .content,
>.homeContent{
width: 100%;

2
src/component/HomePage/index/workflow/content/printingDesign3D.vue
View File

@@ -80,7 +80,7 @@ export default defineComponent({
objectName:data.selectObject.type,
}
let arr = ['sketchBoard','moodBoard','printBoard','colorBoard']
if(arr.indexOf(item) != -1){
if(arr.indexOf(item) > -1){
store.dispatch('setAllBoardData',value)
}else{
store.dispatch('setModularData',value)

8
src/component/HomePage/index/workflow/content/seriesDesign.vue
View File

@@ -102,11 +102,11 @@ export default defineComponent({
const getCollection = ()=>{
let value:any = {
"id":data.selectObject.id,
"moduleList":["moodBoard", "printBoard", "colorBoard", "sketchBoard",'design','toProduct','relight','poseTransfer']
"moduleList":["moodBoard", "printBoard", "colorBoard", "sketchBoard",'design','toProduct','relight','poseTransfer','mannequin']
}
Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
historyChooseData(rv)//设置历史数据
let allBoardData = ['sketchBoard','moodBoard','printBoard','colorBoard','design','toProduct','relight','poseTransfer']
let allBoardData = ['sketchBoard','moodBoard','printBoard','colorBoard','design','toProduct','relight','poseTransfer','mannequin']
let canvasData = ['canvas']
for (let index = 0; index < canvasData.length; index++) {
const item = canvasData[index];
@@ -188,9 +188,8 @@ export default defineComponent({
}
);
}
store.commit("setLikeDesignCollectionList",data.design.userLikeDetails);
if(data.design.userLikeDetails)store.commit("setLikeDesignCollectionList",data.design.userLikeDetails);
store.commit("setUserGroupId", data.design.userGroupId);
console.log(data.toProduct)
if(data.toProduct){
let value = {
list: data.toProduct,
@@ -268,6 +267,7 @@ export default defineComponent({
}
return newData;
});
console.log(colorList)
return colorList;
}
onMounted(()=>{

2
src/component/HomePage/index/workflow/content/singleProductDesign.vue
View File

@@ -181,7 +181,7 @@ export default defineComponent({
}
);
}
store.commit("setLikeDesignCollectionList",data.design.userLikeDetails);
if(data.design.userLikeDetails)store.commit("setLikeDesignCollectionList",data.design.userLikeDetails);
store.commit("setUserGroupId", data.design.userGroupId);
if(data.toProduct){
let value = {

9
src/component/HomePage/index/workflow/content/sketchDesign.vue
View File

@@ -1,6 +1,7 @@
<template>
<div class="seriesDesign">
<workspace ref="workspace" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" class="workspace" :isState="selectKey_ =='workspace'" v-show="selectKey_ == 'workspace'"></workspace>
<mannequin ref="mannequin" class="mannequin" :isState="selectKey_ =='mannequin'" v-show="selectKey_ == 'mannequin'"></mannequin>
<SketchboardUpload ref="sketchBoard" class="sketchBoard" :isState="selectKey_ =='sketchBoard'" v-show="selectKey_ == 'sketchBoard'"></SketchboardUpload>
<deReconstruction ref="deReconstruction" class="deReconstruction" :isState="selectKey_ =='deReconstruction'" v-show="selectKey_ == 'deReconstruction'"></deReconstruction>
<canvasUpload ref="canvas" class="canvas" :isState="selectKey_ =='canvas'" v-show="selectKey_ == 'canvas'"></canvasUpload>
@@ -17,12 +18,13 @@ import { useI18n } from 'vue-i18n'
import SketchboardUpload from '../../model/collection/SketchboardUpload.vue'
import deReconstruction from '../../model/deReconstruction/index.vue'
import canvasUpload from "@/component/Canvas/index.vue";
import mannequin from '../../model/mannequin/index.vue'
import { gsap, TweenMax } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
export default defineComponent({
components:{
workspace,SketchboardUpload,deReconstruction,canvasUpload
workspace,SketchboardUpload,deReconstruction,canvasUpload,mannequin
},
props:{
selectKey_:{
@@ -46,6 +48,7 @@ export default defineComponent({
sketchBoard:null as any,
deReconstruction:null as any,
canvas:null as any,
mannequin:null as any,
})
const open = (str:any)=>{
nextTick(()=>{
@@ -71,11 +74,11 @@ export default defineComponent({
const getCollection = ()=>{
let value:any = {
"id":data.selectObject.id,
"moduleList":["sketchBoard",'deReconstruction']
"moduleList":["sketchBoard",'deReconstruction','mannequin']
}
Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
historyChooseData(rv)
let allBoardData = ['sketchBoard','deReconstruction']
let allBoardData = ['sketchBoard','deReconstruction','mannequin']
let canvasData = ['deReconstruction','canvas']
for (let index = 0; index < canvasData.length; index++) {
const item = canvasData[index];

21
src/component/HomePage/index/workflow/index.vue
View File

@@ -1,4 +1,5 @@
<template>
<div class="workflowBox">
<div class="workflow" v-show="isUpdataPorject || selectObject.id">
<navList @setSelectKey="setSelectKey" @unfold="unfold" @goHome="goHome" :navListData="navListData" :selectKey="selectKey"></navList>
<div class="contentBox" :style="[{overflow:selectKey == 'canvas'?'hidden':''}]">
@@ -14,6 +15,7 @@
<div class="content">
<div class="back">
<div class="title">
<i :class="[navListData?.find((item:any) => item.value === selectKey_)?.icon]"></i>
{{ navListData?.find((item:any) => item.value === selectKey_)?.name }}
</div>
<div class="text" @click="setBack()"><i class="fi fi-bs-down-left-and-up-right-to-center"></i></div>
@@ -22,12 +24,13 @@
</div>
</div>
</div>
<div v-show="!isUpdataPorject && !selectObject.id" class="workflow">
<div v-if="!isUpdataPorject && !selectObject.id" class="workflow">
<workspace :workflowType="workflowType" @setProject="setProject" :httpWorkflowType="httpWorkflowType"></workspace>
</div>
<div class="mark_loading" v-show="isShowMark">
<a-spin size="large" />
</div>
</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,watch,nextTick,provide,toRefs, reactive, onMounted} from 'vue'
@@ -177,7 +180,11 @@ export default defineComponent({
})
</script>
<style lang="less" scoped>
.workflow{
.workflowBox{
display: flex;
width: 100%;
height: 100%;
> .workflow{
display: flex;
width: 100%;
height: 100%;
@@ -212,8 +219,15 @@ export default defineComponent({
display: flex;
padding-bottom: 1rem;
> .title{
font-size: 2rem;
font-size: 2.5rem;
font-weight: 600;
display: flex;
align-items: center;
> i{
font-size: 2rem;
display: flex;
margin-right: 1rem;
}
}
> .text{
cursor: pointer;
@@ -231,4 +245,5 @@ export default defineComponent({
}
}
}
}
</style>

15
src/component/HomePage/index/workflow/navBox.vue
View File

@@ -18,7 +18,8 @@
<!-- @click.stop="setSelect(item)" -->
<div class="background"></div>
<div class="text">
<i :class="[item.icon,item.value == 'design'?'active':'']" @click.stop="setNav(item.value,$event,'design')"></i>{{ item.name }}
<i :class="[item.icon,]" @click.stop="setNav(item.value,$event,'design')"></i>{{ item.name }}
<!-- <i :class="[item.icon,item.value == 'design'?'active':'']" @click.stop="setNav(item.value,$event,'design')"></i>{{ item.name }} -->
</div>
<!-- <div class="designIcon" v-if="item.value == 'design'"><i class="fi fi-rr-magic-wand"></i></div> -->
</div>
@@ -117,7 +118,7 @@ export default defineComponent({
&.printDesign{width: 8rem;height: 1.3rem;}
&.printingDesign3D{width: 8rem;height: 1.3rem;}
&.productDrawingDesign{width: 38rem;height: 23rem;}
&.sketchDesign{width: 38rem;height: 1.3rem;}
&.sketchDesign{width: 38rem;height: 23rem;}
}
> .navListItem{
width: 22rem;
@@ -131,6 +132,7 @@ export default defineComponent({
transition: all .2s;
overflow: hidden;
cursor: pointer;
padding: 2rem;
&.seriesDesign{
&.item1-1{top: -5rem;left: -22rem;}
&.item1-2{top: 9rem;left: -22rem;}
@@ -165,9 +167,10 @@ export default defineComponent({
&.item3-1{top: 6.5rem;left: 38rem;}
}
&.sketchDesign{
&.item1-1{top: -2.5rem;left: -22rem;}
&.item2-1{top: -2.5rem;left: 8rem;}
&.item3-1{top: -2.5rem;left: 38rem;}
&.item1-1{top: -5rem;left: -22rem;}
&.item1-2{top: 18rem;left: -22rem;}
&.item2-1{top: 6.5rem;left: 8rem;}
&.item3-1{top: 6.5rem;left: 38rem;}
}
.background{
// background: #e8e8e8;
@@ -200,7 +203,7 @@ export default defineComponent({
bottom: 1rem;
right: 1rem;
cursor: pointer;
box-shadow: #000 0px 0px 10px;
box-shadow: #000 0px 0px 2px;
border-radius: 1rem;
> i{
display: flex;

13
src/component/HomePage/index/workflow/workspace.vue
View File

@@ -37,7 +37,7 @@
</div>
<div class="style marginBottom" v-if="show.style">
<div class="text">Style：</div>
<div class="text">{{ selectObject?.styleName?selectObject?.styleName:'No style' }}</div>
<div class="text">{{ selectObject?.styleName?selectObject?.styleName:'All' }}</div>
<div class="gallery_btn" style="line-height: 5rem;" @click="setStyle">{{ $t('Habit.Select') }}</div>
</div>
<div class="systemDesigner marginBottom" v-if="show.systemDesigner">
@@ -58,7 +58,7 @@
</div>
</div>
<div class="position marginBottom" v-show="show.position">
<generalMenu :dataList="selectObject.positionList" @setprintModel="setprintModel" :item="selectObject.position"></generalMenu>
<generalMenu :selectWidth="'100%'" :dataList="selectObject.positionList" @setprintModel="setprintModel" :item="selectObject.position"></generalMenu>
</div>
<div class="complete">
<div class="gallery_btn" @click="complete">Complete</div>
@@ -133,8 +133,6 @@ export default defineComponent({
// store.commit('setProbject',data)
}
const setprintModel = (value:any)=>{
console.log(value);
data.selectObject.position = value
}
const formatter = (value: number)=>{
@@ -151,13 +149,14 @@ export default defineComponent({
let value = {
name:data.selectObject.name,
process:props.httpWorkflowType,
styleId:data.show.style?data.selectObject.sylteId:null,
styleId:data.show.style?data.selectObject.styleId:null,
id:data.selectObject.id,
workspace:{
sex:data.selectObject.sex,
// sex:data.show.gender?data.selectObject.sex:null,
systemDesignerPercentage:data.show.systemDesigner?data.selectObject.systemDesignerPercentage:null,
position:data.show.position?data.selectObject.position.value:'Overall',
ageGroup:data.show.style?data.selectObject.ageGroup:null,
// position:data.selectObject,
} as any,
@@ -172,7 +171,7 @@ export default defineComponent({
model = {
id:rv.workspaceVO.mannequinFemaleId,
type:rv.workspaceVO.mannequinFemaleType,
url:rv.workspaceVO.malePresignedUrl,
url:rv.workspaceVO.femalePresignedUrl,
}
position = store.state.UserHabit.FemalePosition
}else{
@@ -201,7 +200,7 @@ export default defineComponent({
data.show.systemDesigner = (props.workflowType == 'seriesDesign' || props.workflowType == 'singleProductDesign')
data.show.position = (props.workflowType == 'singleProductDesign')
if(!data.mannequinStyle && props.workflowType == 'seriesDesign'){
if(!data.mannequinStyle && (props.workflowType == 'seriesDesign' || props.workflowType =='sketchDesign')){
data.setIsShowMark(true)
Https.axiosPost(Https.httpUrls.getStyleList, {}).then(
(rv) => {

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

@@ -33,26 +33,7 @@
<span v-if="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage'">{{$t('ProductImg.MagicTools')}}</span>
<span v-if="scaleImageList[scaleImageIndex]?.resultType == 'Relight'">{{$t('ProductImg.relightingTool')}}</span>
</div>
<div class="input_border productImg_content_item_generate">
<div class="input_box">
<div class="input_box_btnBox">
<input
class="search_input"
:placeholder="$t('Generate.inputContent1')"
v-model="productimgSearchName"
@keydown.enter="getPrductimg()"
/>
<i v-show="!productimgIsTextarea" class="fi fi-br-expand" @click.stop="()=>productimgIsTextarea = !productimgIsTextarea"></i>
<i v-show="productimgIsTextarea" class="fi fi-bs-compress" @click.stop="()=>productimgIsTextarea = !productimgIsTextarea"></i>
</div>
<textarea
v-show="productimgIsTextarea"
class="search_textarea "
@keydown.enter="getPrductimg()"
v-model="productimgSearchName"
></textarea>
</div>
</div>
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage'" class="productImg_content_item_title productImg_content_item_title_similarity">
<span>{{$t('ProductImg.Similarity')}}</span>
</div>
@@ -93,6 +74,26 @@
</a-slider>
<input type="number" readonly v-model="productimgBrightenValue">
</div>
<div class="input_border productImg_content_item_generate">
<div class="input_box">
<div class="input_box_btnBox">
<input
class="search_input"
:placeholder="$t('Generate.inputContent1')"
v-model="productimgSearchName"
@keydown.enter="getPrductimg()"
/>
<i v-show="!productimgIsTextarea" class="fi fi-br-expand" @click.stop="()=>productimgIsTextarea = !productimgIsTextarea"></i>
<i v-show="productimgIsTextarea" class="fi fi-bs-compress" @click.stop="()=>productimgIsTextarea = !productimgIsTextarea"></i>
</div>
<textarea
v-show="productimgIsTextarea"
class="search_textarea "
@keydown.enter="getPrductimg()"
v-model="productimgSearchName"
></textarea>
</div>
</div>
<div class="productImg_content_item_generate_btn input_border">
<div class="input_box">
<div v-show="!productimgIsProductimg" class="generage_btn started_btn" @click.stop="getPrductimg">
@@ -524,6 +525,9 @@ export default defineComponent({
.productImg_content_item_title{
font-weight: 600;
font-size: 1.6rem;
&.productImg_content_item_title_menu{
margin-bottom: 6rem;
}
}
.scaleImage_content{
display: flex;
@@ -549,11 +553,11 @@ export default defineComponent({
}
.productImg_content_item_generate_btn{
// transform: translateY(100%);
position: absolute;
bottom: 0;
top: auto;
// position: absolute;
// bottom: 0;
width: 100%;
justify-content: space-around;
margin-top: 0;
}
.productImg_content_item_similarity{
padding-bottom: 2.4rem;
@@ -576,7 +580,7 @@ export default defineComponent({
img{
width: auto;
height: 100%;
max-width: 40rem;
max-width: 50rem;
object-fit: contain;
}
&.active{
@@ -584,7 +588,8 @@ export default defineComponent({
img{
// width: 50%;
height: 100%;
object-fit: cover;
object-fit: contain;
margin: 0 1rem;
}
}
.img_operate_block{

144
src/component/LibraryPage/brandDetail.vue
View File

@@ -1,13 +1,7 @@
<template>
<div class="brandDetail">
<div class="title">
<div @click="back" class="back">&lt; Back</div>
<div>
<div class="gallery_btn" @click="compute">Compute</div>
<div>
<a-progress :percent="100" size="small" :showInfo="false" />
</div>
</div>
<div @click="back" class="back"><i class="fi fi-rr-arrow-small-left" style="font-size: 4rem; display:flex;"></i></div>
</div>
<div class="userDetail">
<div class="logo">
@@ -34,19 +28,25 @@
</div>
<div class="info">
<div class="name">
<span v-if="!isEditUserName">{{ brandName }}</span>
<span v-if="!isEditUserName" style="font-size:3rem;">{{ brandName }}</span>
<input v-else type="text" v-model="brandName">
<i v-if="!isEditUserName" class="fi fi-rr-edit" @click="openEdit('userName')"></i>
<i v-else class="fi fi-br-check" @click="editChek('userName')"></i>
</div>
<div class="slogan">
<div>Brand slonan:</div>
<span v-if="!isEditDescribe">{{ brandSlogan }}</span>
<div>Slogan:</div>
<span v-if="!isEditDescribe" style="font-weight: 300;">{{ brandSlogan }}</span>
<input v-else type="text" v-model="brandSlogan">
<i v-if="!isEditDescribe" class="fi fi-rr-edit" @click="openEdit('brandSlogan')"></i>
<i v-else class="fi fi-br-check" @click="editChek('brandSlogan')"></i>
</div>
</div>
<div style="flex:1;text-align: right;" v-show="imgList.length > 0">
<div class="gallery_btn" v-show="schedule.num == 1||(schedule.num == 0 && !schedule.state)" @click="compute">Compute</div>
<div v-show="schedule.num != 1">
<a-progress style="width:20rem;" :percent="schedule.num * 100" size="small" :showInfo="false" />
</div>
</div>
</div>
<div class="content">
<div style="display: flex;">
@@ -61,10 +61,12 @@
>
<div class="gallery_btn">Upload</div>
</a-upload>
<div style="margin-left:2rem;" @click="deleteBatchPic" class="gallery_btn">Delete</div>
</div>
<div class="imgBox">
<div class="imgItem" v-for="item,index in imgList" :key="item.id">
<div class="imgItem" v-for="item,index in imgList" :key="item.id" :class="{active:selectImgList.indexOf(item.id) > -1}" @click="selectImg(item)">
<img :src="item.url" alt="">
<i class="fi fi-rr-trash icon_delete" @click="deleteSinglePic(item,index)"></i>
</div>
</div>
<div class="total">
@@ -86,7 +88,7 @@
</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
import { defineComponent,computed,ref,provide,onBeforeUnmount,createVNode,toRefs, reactive} from 'vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { Modal,message } from 'ant-design-vue';
@@ -104,9 +106,11 @@ export default defineComponent({
emits:['update:isShowMark','handleBack'],
props: {
isShowMark:{type:Boolean,default:false},
selectCode:{type:String,default:''},
},
setup(props,{emit}) {
const store = useStore();
const {t} = useI18n();
const data = reactive({
cropperFileData:{name:'',uid:''}, //裁剪的原始文件数据
uploadUrl:'',
@@ -126,6 +130,12 @@ export default defineComponent({
total:0,
pageSize:10,
currentPage:1,
selectImgList:[] as any,//选择删除的图片
getProgressTime:null as any,//获取进度的时间
schedule:{
num:0,
state:false
}
})
const dataDom = reactive({
Cropper:null as any,
@@ -233,6 +243,8 @@ export default defineComponent({
data.brandSlogan = value.brandSlogan;
data.logoUrl = value.minioUrl
data.minioUrl = value.brandLogo
clearInterval(data.getProgressTime)
getProgress()
getLibraryList()
// emit("update:isShowMark",true)
// setTimeout(()=>{
@@ -240,6 +252,7 @@ export default defineComponent({
// },2000)
}
const back = ()=>{
clearInterval(data.getProgressTime)
emit("handleBack")
}
const uploadBrand = ()=>{
@@ -255,12 +268,90 @@ export default defineComponent({
})
}
const compute = ()=>{
Https.axiosPost(Https.httpUrls.productImageInitialize,{brandId:data.detail.id}).then((res:any)=>{
getProgress()
}).catch((err:any)=>{
// console.log(err)
})
}
const getProgress = ()=>{
setTimeout
if(props.selectCode != 'MyBrand'){
clearTimeout(data.getProgressTime)
return
}
Https.axiosPost(Https.httpUrls.getInitializeProgress,{brandId:data.detail.id}).then((res:any)=>{
data.schedule.num = res.percent
data.schedule.state = res.analyzed
if(res.percent == 1 || !res.analyzed){return clearTimeout(data.getProgressTime)}
data.getProgressTime = setTimeout(()=>{
getProgress()
},5000)
// analyzed
}).catch((err:any)=>{
// console.log(err)
})
}
const changePage = (current:number, pageSize:number)=>{
data.currentPage = current
data.pageSize = pageSize
}
const deleteBatchPic = ()=>{
if(!data.selectImgList.length){
return
}
Modal.confirm({
title: t('LibraryPage.jsContent2'),
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
centered:true,
onOk() {
confirmDeletePic('',0,'')
}
});
}
const deleteSinglePic = (data:any,index:any)=>{
Modal.confirm({
title: t('LibraryPage.jsContent1'),
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
mask:false,
centered:true,
onOk() {
confirmDeletePic(data,index,'')
}
});
}
const confirmDeletePic = (value:any,index:any,nData:any)=>{
let libraryIds = value ? [value.id] : data.selectImgList
let newData = {
libraryIds:libraryIds,
deleteModelConfirm:'',
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
}
if(nData)newData = nData
Https.axiosPost(Https.httpUrls.batchDeleteLibrary, newData).then(
(rv: any) => {
getLibraryList()
data.selectImgList = []
}
).catch((res)=>{
});
}
const selectImg = (item:any)=>{
if(data.selectImgList.indexOf(item.id) > -1){
data.selectImgList = data.selectImgList.filter((selectItem:any)=>selectItem != item.id)
}else{
data.selectImgList.push(item.id)
}
}
onBeforeUnmount(()=>{
clearInterval(data.getProgressTime)
})
return{
...toRefs(dataDom),
...toRefs(data),
@@ -274,6 +365,9 @@ export default defineComponent({
editChek,
compute,
changePage,
deleteBatchPic,
deleteSinglePic,
selectImg,
}
},
provide() {
@@ -299,12 +393,16 @@ export default defineComponent({
font-weight: 400;
font-size: 2rem;
cursor: pointer;
margin-left: -2rem;
}
}
> .userDetail{
display: flex;
margin-top: 4rem;
margin-top: 2rem;
align-items: center;
border-bottom: 1px solid #ccc;
padding-bottom: 1rem;
margin-bottom: 1rem;
> .logo{
position: relative;
margin-right: 3rem;
@@ -386,12 +484,32 @@ export default defineComponent({
> .imgItem{
width: 100px;
margin: 1rem;
position: relative;
cursor: pointer;
aspect-ratio: 1 / 2.5;
&.active{
opacity: 0.5;
}
> img{
width: 100%;
height: 100%;
object-fit: contain;
}
> i{
position: absolute;
top: 1rem;
right: 1rem;
cursor: pointer;
display: none;
cursor: pointer;
padding: 0.5rem;
font-size: 2rem;
}
&:hover{
> i{
display: flex;
}
}
}
}
> .total{

29
src/component/LibraryPage/createBrand.vue
View File

@@ -32,7 +32,7 @@
<input type="text" v-model="brandName">
</div>
<div class="item">
<div class="text">Brand Slogen <span style="color: red;">*</span></div>
<div class="text">Brand Slogan <span style="color: red;">*</span></div>
<input type="text" v-model="brandSlogan">
</div>
<div class="item">
@@ -73,12 +73,12 @@
<div class="right">
<div class="item">
<div class="text">Brand Name </div>
<textarea v-model="generateText" :placeholder="'Please enter the name, logo, and slogan you want to generate'"></textarea>
<textarea v-model="generateText" :placeholder="'Please enter your thoughts about this brand, and we will help you generate the name, logo, and slogan.'"></textarea>
</div>
<div class="btn">
<div class="gallery_btn" style="width: 13rem;" v-show="!isGenerateLoad" @click="generate">Generate</div>
<div class="gallery_btn" style="width: 13rem;" v-show="isGenerateLoad">
<i class="fi fi-br-loading"></i>
<span class="fi fi-br-loading"></span>
</div>
</div>
</div>
@@ -352,6 +352,29 @@ export default defineComponent({
width: 100%;
> .gallery_btn{
margin-left: auto;
width: 13rem;
height: 6rem;
display: flex;
justify-content: center;
align-items: center;
> span{
display: flex;
text-align: center;
line-height: 6rem;
animation: whirl 1s infinite linear;
@keyframes whirl {
0%{
transform: rotate(0deg);
}
50%{
transform: rotate(180deg);
}
100%{
transform: rotate(360deg);
}
}
}
}
}

3
src/component/WorksPage/publish.vue
View File

@@ -113,7 +113,8 @@ export default defineComponent({
isSecondaryCreation:true,
},
})
let portfolio:any = inject('portfolio')
// let portfolio:any = inject('portfolio')
// let setPortfolio:any = inject('setPortfolio')
let tagList = ref([
// {id:1,tagName:'#AiDAworkshop_2024',title:'The process is simple: use AiDA to post your design work on the "Gallery ", and the one with the most likes(at least 20 likes) will be invited to the AiDA Workshop offline event in Hong Kong on November 14th, to exchange ideas with the Royal College of Art (RCA), Jae Lim, co-founder of the renowned fashion brand BESFXXK, and outstanding designers! '},

116
src/component/modules/generalDrag.vue
View File

@@ -10,21 +10,28 @@
>
<img v-if="item.url"
:class="[isVideo?'video':'']"
@mouseenter.stop="gifPlay($event,item)"
@mouseleave.stop="gifPause($event,item)"
:src="item.url"
alt=""
>
<a-spin v-else size="large" class="content_img_flex"></a-spin>
<div class="btn like" v-if="item.url" @click.stop="()=>$emit('setBtn',item.id,'like')">
<div class="btn">
<div class="like" v-if="item.url" @click.stop="()=>$emit('setBtn',item.id,'like')">
<i class="fi fi-rr-heart"></i>
</div>
<div class="btn down" v-if="isVideo" @click.stop="down(item)">
<i class="fi fi-rr-heart"></i>
<div class="down" v-if="isVideo && item.url" @click.stop="down(item)">
<i class="fi fi-ss-down-to-line"></i>
</div>
<div class="btn zoom" v-if="item.url" @click.stop="()=>$emit('setBtn',item.id,'zoom')">
<div class="zoom" v-if="item.url" @click.stop="()=>$emit('setBtn',item.id,'zoom')">
<i class="fi fi-bs-expand-arrows-alt"></i>
</div>
<div class="delete" v-if="item.url" @click.stop="()=>$emit('setBtn',item.id,'zoom')">
<i class="fi fi-rr-trash icon_delete"></i>
</div>
</div>
</div>
</div>
</template>
@@ -53,21 +60,21 @@ export default defineComponent({
generalDragDom:null as any,
})
const collItemSize = reactive({
collValue:15,
minCollValue:2,
maxCollValue:20,
collValue:18,
num:2,
padding:40,
likeStyle:{
width:'100px',
width:'0px',
// width:'240px',
height:'200px',
height:'0px',
// height:'370px',
position:'absolute',
},
itemStyle:{
width:100,
height:154,
width:0,
height:0,
},
scale:[1,1.54],
scale:[1,1.539],
collTime:null as any,
isMove:false,
elList:[] as any,
@@ -138,11 +145,11 @@ export default defineComponent({
// })
}
const reRange = (item:any, x:number, y:number,str:string)=>{
dataDom.generalDragDom
let elList:any = collItemSize.elList
let index = data.selectIndex
let value = collItemSize.maxCollValue - collItemSize.collValue
let width,height,num
num = value
num = collItemSize.num
width = collItemSize.itemStyle.width
height = collItemSize.itemStyle.height
@@ -170,10 +177,10 @@ export default defineComponent({
}
}
const moveItem = ()=>{
let value = collItemSize.maxCollValue - collItemSize.collValue
let value = collItemSize.num
// let num = str == 'like'?value:3
for(let i = 0;i < collItemSize.elList.length;i++){
collItemSize.elList[i].el.style.left = (collItemSize.elList.length - 1 - collItemSize.elList[i].sort) % value * (collItemSize.itemStyle.width +10) + 'px';
collItemSize.elList[i].el.style.left = (collItemSize.elList.length - 1 - collItemSize.elList[i].sort) % value * (collItemSize.itemStyle.width +10) + collItemSize.padding/2 + 'px';
collItemSize.elList[i].el.style.top = parseInt(String((collItemSize.elList.length - 1 - collItemSize.elList[i].sort) / value)) * (collItemSize.itemStyle.height +10) + 'px';
}
@@ -181,10 +188,11 @@ export default defineComponent({
const setItemPosition = ()=>{
let parent = dataDom.generalDragDom.offsetWidth
let elArr = dataDom.generalDragDom.children
let value = collItemSize.maxCollValue - collItemSize.collValue
collItemSize.itemStyle.width = (parent - ((value-1)*10)) / value
let value = collItemSize.num
//子元素宽度 = (父容器总宽度 - (列数-1)*间隙) / 列数
collItemSize.itemStyle.width = (parent - collItemSize.padding - ((value-1)*10)) / value
// collItemSize.itemStyle.width = (parent - (value * 10)) / value
collItemSize.itemStyle.height = collItemSize.itemStyle.width * 1.54
collItemSize.itemStyle.height = collItemSize.itemStyle.width * 1.539
collItemSize.likeStyle.width = collItemSize.itemStyle.width + 'px'
collItemSize.likeStyle.height = collItemSize.itemStyle.height + 'px'
collItemSize.elList = []
@@ -242,22 +250,31 @@ export default defineComponent({
e.target.src = item.url//静态图片
// e.target.src = ''//静态图片
}
const down = (item:any)=>{
const down = async (item:any)=>{
const videoUrl = item.videoUrl; // 视频文件 URL
const fileName = 'video.mp4'; // 下载时保存的文件名
const response = await fetch(videoUrl);
const blob = await response.blob();
const blobUrl = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = videoUrl;
link.download = fileName;
const a = document.createElement('a');
a.href = blobUrl;
a.download = 'video.mp4';
document.body.appendChild(a);
a.click();
// 触发下载
link.click();
// 清理
setTimeout(() => {
document.body.removeChild(a);
URL.revokeObjectURL(blobUrl);
}, 100);
}
onMounted(()=>{
window.addEventListener('resize', setItemPosition)
// nextTick(()=>{
// setItemPosition()
// })
nextTick(()=>{
let width = (dataDom.generalDragDom.offsetWidth - collItemSize.padding) / collItemSize.num
collItemSize.likeStyle.width = width + 'px'
collItemSize.likeStyle.height = width * 1.54 + 'px'
})
})
onBeforeUnmount(()=>{
window.removeEventListener('resize', setItemPosition)
@@ -288,38 +305,57 @@ export default defineComponent({
overflow-y: auto;
overflow-x: hidden;
> .item{
border-radius: 2rem;
border: 2px solid;
// border-radius: 2rem;
// border: 2px solid;
position: absolute;
transition: all .3s;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
// background: #fff;
> img{
width: 100%;
height: 100%;
object-fit: cover;
&.video{
object-fit: contain;
}
}
> .btn{
position: absolute;
top: 2rem;
top: 1rem;
cursor: pointer;
display: none;
&.like{
left: 2rem;
}
&.zoom{
right: 2rem;
display: none;
flex-direction: column;
align-items: center;
background: rgba(255,255,255,.5);
> div{
padding: .8rem;
&:hover{
background: rgba(255,255,255,.7);
}
>i{
}
.like{
}
.zoom{
i{
font-size: 2.5rem;
}
}
.down{
}
.delete{
}
i{
display: flex;
font-size: 3rem;
}
}
&:hover{
> .btn{
display: block;
display: flex;
}
}
}

41
src/component/modules/liquefaction.vue
View File

@@ -5,7 +5,8 @@
v-model:visible="liqufeaction"
:footer="null"
:get-container="() => $refs.liquefactionModal"
width="78%"
width="80%"
height="90%"
:maskClosable="false"
:centered="true"
:closable="false"
@@ -16,8 +17,8 @@
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="#000"/>
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="#000"/>
</svg>
</div>
@@ -30,6 +31,10 @@
<div v-show="arrows.show" class="jiantouDom" :style="arrows.jiantouStyle"> </div>
</div>
<div class="liquefaction_parameter">
<div class="liquefaction_parameter_item icon">
<i class="icon iconfont icon-chehui" @click="historyState('reverse')"></i>
<i class="icon iconfont icon-fanchehui" @click="historyState('')"></i>
</div>
<div class="liquefaction_parameter_item">
<div class="liquefaction_parameter_item_title">
<span>{{ $t('exportModel.Size') }}</span>
@@ -48,12 +53,9 @@
<input type="range" v-model="density" @change="routesChange('density')">
</div>
</div>
<div class="liquefaction_parameter_item icon">
<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
</div>
<div class="liquefaction_parameter_item">
<div class="generage_btn started_btn" @click="cancelDsign">{{ $t('Cropper.Cancel')}}</div>
<!-- <div class="generage_btn started_btn" @click="cancelDsign">{{ $t('Cropper.Cancel')}}</div> -->
<div class="generage_btn started_btn" @click="submit">{{ $t('Cropper.Finish')}}</div>
</div>
</div>
@@ -406,16 +408,29 @@ export default defineComponent({
});
</script>
<style lang="less" scoped>
.liquefactionModal{
:deep(.liquefaction){
.ant-modal-mask{
background: rgba(0,0,0,.2);
}
}
}
.liquefaction {
background: #f9fafb;
.generalModel_btn{
.generalModel_closeIcon{
transform: translate(-100%, 100%);
}
}
.liquefaction_center{
height: 100%;
display: flex;
align-items: center;
justify-content: center;
.liquefaction_canvas_box{
background: #fff;
height: 90%;
width: 80%;
width: 55%;
text-align: center;
// overflow-x: auto;
position: relative;
@@ -426,9 +441,11 @@ export default defineComponent({
justify-content: center;
}
.liquefaction_parameter{
padding-top: 5rem;
height: 100%;
flex: 1;
// flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
.liquefaction_parameter_item{
display: flex;
flex-direction: column;
@@ -455,7 +472,7 @@ export default defineComponent({
border-radius: .5rem;
font-size: 2rem;
cursor: pointer;
border: 2px solid #000;
// border: 2px solid #000;
margin-right: 1rem;
align-items: center;
justify-content: center;

36
src/lang/cn.ts
View File

@@ -56,7 +56,7 @@ export default {
CanvasTool:'画布工具',
Color:'颜色',
Size:'大小',
Brushwork:'绘画',
Brushwork:'笔触',
Texture:'材质',
FillBack:'填充 & 边',
Layer:'层级',
@@ -155,9 +155,10 @@ export default {
Reset:'重置',
Design:'设计',
Redesign:'重新设计',
GeneratedDesign:'生成设计，请选择您最喜欢的设计',
GeneratedDesign:'设计草稿',
elementTitle:'设计素材',
recycleBin:'回收站',
SelectedDesign:'喜欢的设计',
SelectedDesign:'设计集',
Export:'导出',
moodboard:"情绪板",
printboard:"印刷板",
@@ -178,13 +179,17 @@ export default {
jsContent10:"二次创作的作品不允许使用'设计'，但是您可以使用'重新设计'",
},
ProductImg:{
productInput:'输入关键词（例如风格、材质）',
relightInput:'输入关键词（例如场景、地点）',
Finalize:'完成',
SelectCollection:'选择的系列',
SelectCollection:'选择要转换的图片',
SelectedDesign:'产品图集',
productImageDrafts:'产品图草稿',
Upload:'上传',
MagicTools:'转换产品图工具',
relightingTool:'打光工具',
Similarity:'相似度',
Highlight:'高亮',
Highlight:'曝光强度',
RelightDirection:'打光方向',
GenerateProduct:'生成的产品',
SelectedProduct:'选择的产品',
@@ -199,6 +204,9 @@ export default {
Clear:'清空',
jsContent1:'如果您离开此页，您的更改将会丢失。您确定要离开这一页吗?',
jsContent2:'请至少选择一张图片',
},
poseTransfer:{
},
LibraryPage:{
Organize:'整理',
@@ -247,6 +255,8 @@ export default {
jsContent7:'请输入内容~',
jsContent8:'上传失败',
jsContent9:'选择一张图片~',
jsContent10:'是否另存为当前模特？',
jsContent11:'你确定删除当前品牌DNA吗？',
},
HistoryPage:{
History:'历史',
@@ -360,7 +370,7 @@ export default {
jsContent4:"请选择一张图片",
jsContent5:"输入的内容超过允许输入的最大长度",
jsContent6:"请输入内容~",
jsContent7:"请检查*号内容",
jsContent7:"请确保所有必填项都填妥",
},
ColorboardUpload:{
Thumbnail:'选择的颜色缩略图',
@@ -368,7 +378,7 @@ export default {
Palette:'调色板',
HEX:'HEX',
RGBA:'RGBA',
UploadImage:'上传图片',
UploadImage:'提取主色',
ColorCode:'颜色代码',
SelectSuccessively:'连选',
SelectSuccessivelyOnTitle:'连续选色模式开启.',
@@ -388,7 +398,7 @@ export default {
jsContent6:"请至少选择一个情绪版或者印花",
},
selectImgList:{
SelectImg:'选择图片',
SelectImg:'选择图片来提取主色',
Clear:'关闭',
},
MoodboardUpload:{
@@ -438,7 +448,7 @@ export default {
Model1:'笔墨画风',
Model2:'插画画风',
Model3:'真实画风',
inputContent1:'输入生成图片的标题',
inputContent1:'输入生成图片的提示词',
Generate:'生成',
Sequence:'队列',
Close:'取消',
@@ -493,7 +503,7 @@ export default {
CurrentElements:'当前元素',
},
DesignDetailAlter:{
current:'当前',
current:'项目',
Upload:'上传',
Library:'收藏',
inputContent1:'输入名字进行搜索',
@@ -560,16 +570,16 @@ export default {
NewYear_2025:'新年 2025',
},
Publish:{
Publish:'发布',
Publish:'发布到作品广场',
CoverPicture:'封面图',
CollectionTitle:'系列名字',
topic:'话题',
Description:'描述',
Permissions:'权限',
PermissionsItem1:'允许其他用户进行二次创作。',
Close:'关闭',
Close:'取消',
UpdatePublish:'更新发布',
jsContent1:'如果您离开此页，您的更改将会丢失。您确定要离开这一页吗?',
jsContent1:'您确定要离开这一页吗?你的更改没有被保存。',
jsContent2:'请输入您的作品名称',
jsContent3:'这将把您的作品发布到广场上，供所有用户查看。请确认是否发布?',
jsContent4:'发布成功!你可以在我的作品中找到',

40
src/lang/en.ts
View File

@@ -56,7 +56,7 @@ export default {
CanvasTool:'Canvas Tool',
Color:'Color',
Size:'Size',
Brushwork:'Brushwork',
Brushwork:'Brush',
Texture:'Texture',
FillBack:'Fill & Border',
Layer:'Layer',
@@ -155,9 +155,10 @@ export default {
Reset:'Reset',
Design:'Design',
Redesign:'Redesign',
GeneratedDesign:'Generated Design，please choose your favorite design',
GeneratedDesign:'Design Drafts',
elementTitle:'Design Assets',
recycleBin:'Recycle Bin',
SelectedDesign:'Selected Design',
SelectedDesign:'Design Collection',
Export:'Export',
moodboard:"moodboard",
printboard:"printboard",
@@ -178,11 +179,15 @@ export default {
jsContent10:"Re-created works are not allowed to use 'design', but you can use 'redesign'",
},
ProductImg:{
productInput:'Enter keywords (e.g. Style, Material)',
relightInput:'Enter keywords (e.g. Scene, Location)',
Finalize:'Finalize',
SelectCollection:'Select Collection',
SelectCollection:'Select image to convert',
SelectedDesign:'Product Image Collection',
productImageDrafts:'Product Image Drafts',
Upload:'Upload',
Similarity:'Similarity',
Highlight:'Highlight',
Highlight:'Exposure Intensity',
RelightDirection:'Relight Direction',
MagicTools:'To Product lmage Tool',
relightingTool:'Relighting Tool',
@@ -199,6 +204,9 @@ export default {
Clear:'Clear',
jsContent1:'Your changes will be lost if you navigate away from this page. Are you sure you want to leave this page?',
jsContent2:'Please select at least one picture',
},
poseTransfer:{
},
LibraryPage:{
Organize:'Organize',
@@ -247,6 +255,8 @@ export default {
jsContent7:'Please enter content',
jsContent8:'upload failed',
jsContent9:'Please select a picture',
jsContent10:'Save as New or Overwrite Current Mannequin?',
jsContent11:'Are you sure about deleting the current brand DNA?',
},
HistoryPage:{
History:'History',
@@ -329,7 +339,7 @@ export default {
PIN:'PIN',
Maximum:'Maximum {maxImg} images can be uploaded, Maximum 5MB per image',
Thumbnail:'Selected sketchboard',
inputContent1:'Input prompt',
inputContent1:'Input prompt for image generation',
maximumLength:'The entered content exceeds the maximum length.',
GenerateSketch:'Generate Sketch',
jsContent1:"upload failed",
@@ -360,15 +370,15 @@ export default {
jsContent4:"Please select a picture",
jsContent5:"The entered content exceeds the maximum length.",
jsContent6:"Please enter content",
jsContent7:"Please check the * number",
jsContent7:"Please ensure all required fields are filled out",
},
ColorboardUpload:{
Thumbnail:'Thumbnail preview of selected colorboard',
Thumbnail:'Thumbnail preview of selected colors',
Clear:'Clear',
Palette:'Palette',
HEX:'HEX',
RGBA:'RGBA',
UploadImage:'Upload Image',////////////
UploadImage:'Extract main colors',////////////
ColorCode:'Color Code',
SelectSuccessively:'Successive',
SelectSuccessivelyOnTitle:'Enable successive color selection.',
@@ -388,7 +398,7 @@ export default {
jsContent6:"Please select at least one mood plate or print",
},
selectImgList:{
SelectImg:' Select Image',
SelectImg:' Select image for main color extraction',
Clear:'Close',
},
MoodboardUpload:{
@@ -414,7 +424,7 @@ export default {
CropPreview:'Crop Preview',
},
Material:{
inputContent1:'Please input',
inputContent1:'Please enter name to search',
PIN:'PIN',
},
MarketingSketchUpload:{
@@ -493,7 +503,7 @@ export default {
CurrentElements:'Current Elements',
},
DesignDetailAlter:{
current:'Current',
current:'Project',
Upload:'Upload',
Library:'Library',
inputContent1:'Please input',
@@ -560,16 +570,16 @@ export default {
NewYear_2025:'NewYear 2025',
},
Publish:{
Publish:'Publish',
Publish:'Publish to gallery',
CoverPicture:'Cover Picture',
CollectionTitle:'Collection Title',
topic:'Topic',
Description:'Description',
Permissions:'Permissions',
PermissionsItem1:'Allow other users to perform secondary creation.',
Close:'Close',
Close:'Cancel',
UpdatePublish:'Update Publish',
jsContent1:'Your changes will be lost if you navigate away from this page. Are you sure you want to leave this page?',
jsContent1:'Are you sure to leave this page? Your changes are not saved. ',
jsContent2:'Please enter the name of your work',
jsContent3:'This will publish your work to the square for all users to see. Please confirm whether to publish?',
jsContent4:'Release success! You can find it in my work',

5
src/store/Detail/designDetailCopy.ts
View File

@@ -244,7 +244,9 @@ const DesignDetailCopy : Module<DesignDetailCopy,RootState> = {
state.selectDetail.color = state.selectDetail?.newDetail?.color
state.selectDetail.newDetail.color = null
}
if(item.partialDesign){
state.selectDetail.partialDesign = item.partialDesign
}
state.selectDetail.designType = item.designType
state.selectDetail.gradient = item.gradient
state.selectDetail.layersObject = item.layersObject
@@ -261,7 +263,6 @@ const DesignDetailCopy : Module<DesignDetailCopy,RootState> = {
}
state.selectDetail.id = item.id
if(state.selectDetail.newDetail?.[currentType])delete state.selectDetail.newDetail[currentType]
console.log(state.selectDetail.newDetail);
}
},

1
src/store/homeStore/homeStore.ts
View File

@@ -56,6 +56,7 @@ const HomeStoreModule : Module<DesignDetail,RootState> = {
state.designCollectionList = data
},
setLikeDesignCollectionList(state,data){
data = data || []
state.likeDesignCollectionList = data
},
setRelightList(state,data){

19
src/store/uploadFile/uploadFile.ts
View File

@@ -151,10 +151,11 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
data.collectionChecked = true
file.push(data)
}
}else{
}else if(data.state == 'delete'){
//重复选中后取消选择改为无反应
// data.collectionChecked = false
// file = file.filter((v:any)=> v.id != data.id)
data.collectionChecked = false
delete data.state
file = file.filter((v:any)=> v.id != data.id)
}
}
if(data.type_.type1 == 'generate'){
@@ -405,9 +406,17 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
});
data[str] = colorBoards
}else if(str == 'moodBoard'){
state.moodboard = state.moodboard || []
let dataList = state.moodboard.map((v: any) => {
let data: any = {
id: v.resData.id,
designType: v.resData.designType,
};
return data;
});
data[str] = {
moodBoards:state.moodboard,
moodTemplateId:state.moodTemplateId,
moodBoards:dataList,
moodTemplateId:state.allBoardData.disposeMoodboard?.[0]?.id?state.allBoardData.disposeMoodboard?.[0]?.id:null,
moodboardPosition:JSON.stringify(state.moodboardPosition),
}
}else if (str == 'printBoard') {

4
src/store/workspace/workspace.ts
View File

@@ -60,7 +60,7 @@ const Workspace : Module<DesignDetail,RootState> = {
},
setProbject(state,data){
for (const key in data) {
if(state.probjects[key] == undefined)return
if(data[key] == undefined)continue
state.probjects[key] = data[key]
}
},
@@ -71,7 +71,7 @@ const Workspace : Module<DesignDetail,RootState> = {
type:'',
httpType:'',
styleName:'',//项目风格
styleId:-1,//项目风格
styleId:null,//项目风格
style:'',
sex:'Female',
ageGroup:'Adult',//年龄组

398
src/tool/canvasGeneralCopy.js
View File

@@ -71,6 +71,8 @@ class MyCanvas {
this.canvasWH={
width:0,
height:0,
layerWidth:0,
layerHeight:0,
}
this.createPatterning = {//创建图形
state:false,
@@ -143,6 +145,9 @@ class MyCanvas {
value:0,
list:[],
}
this.exportData = {
width:-1,
}
for (let index = 0; index < 20; index++) {
this.texture.list.push({value:index,url:`/image/texture/texture${index}.webp`})
}
@@ -163,10 +168,79 @@ class MyCanvas {
}//给切换颜色设置防抖
}
async canvasInit (dom, val,img,editGroupImg,data){//初始化
async createCanvas(dom,val,exportWidth = -1){
this.exportData.width = exportWidth
this.canvasWH={
width:val.width,
height:val.height,
layerWidth:val.width,
layerHeight:val.height,
}
this.canvasDomParent = dom;
var canvasDom = document.createElement("canvas");
this.canvasDomParent.appendChild(canvasDom);
MyCanvas[this.id] = await new fabric.Canvas(canvasDom, {
backgroundColor: "rgba(230, 230, 230)",
width: this.canvasWH.width,
height: this.canvasWH.height,
isDrawingMode: val.isDrawingMode, // 开启绘图模式
selectionFullyContained: true,
selectionKey:'ctrlKey',
includeDefaultValues: false,//尚未测试 精简导出JSON
// freeDrawingCursor: 'none',
preserveObjectStacking:true,
hoverCursor: 'pointer',
});
this.initCanvasWH('init')
fabric.Object.prototype.cornerSize = 10//选中后的操作按钮大小
fabric.Object.prototype.transparentCorners = false //实心
if(!fabric.Object.prototype.controls.deleteControl){//设置元素删除
JSSetRemoveImage(this.deleteObject.bind(this))
}else{
fabric.Object.prototype.controls.deleteControl.mouseUpHandler = this.deleteObject.bind(this)
}
initAligningGuidelines(MyCanvas?.[this.id], true);
JSchangeType(MyCanvas?.[this.id],'init')
this.canvas = MyCanvas?.[this.id];
// console.log(this.layer)
return MyCanvas?.[this.id]
}
addEvent(){
MyCanvas?.[this.id].on("object:modified", (event)=>{
this.updateCanvasState('')
this.updataLayer()
});
this.canvasKeyDown = this.canvasKeyDown.bind(this);
this.canvasKeyUp = this.canvasKeyUp.bind(this);
MyCanvas?.[this.id].on("mouse:move", this.setCanvasMove.bind(this));
MyCanvas?.[this.id].on("mouse:down",this.setCanvasDown.bind(this));
MyCanvas?.[this.id].on("mouse:up",this.setCanvasUp.bind(this));
MyCanvas?.[this.id].on("mouse:wheel",this.setCanvasWheel.bind(this));
//双击
MyCanvas?.[this.id].on("mouse:dblclick", event=>{
if(this.operation == 'fold'){
this.foldEnd('Enter')
}
});
document.addEventListener('mousemove', this.mouseMove.bind(this));
document.addEventListener('touchmove', this.touchmove.bind(this));
document.addEventListener("keydown", this.canvasKeyDown);
document.addEventListener("keyup", this.canvasKeyUp);
MyCanvas?.[this.id].on("object:added", this.addLayer.bind(this));
}
async canvasInit (dom, val,img,editGroupImg,data,exportWidth = -1){//初始化
// let {erasable} = data
// this.canvasClear()
this.canvasWH = val
console.log(exportWidth)
this.exportData.width = exportWidth
this.canvasWH={
width:val.width,
height:val.height,
layerWidth:val.width,
layerHeight:val.height,
}
this.canvasDomParent = dom;
var canvasDom = document.createElement("canvas");
this.canvasDomParent.appendChild(canvasDom);
@@ -289,7 +363,9 @@ class MyCanvas {
MyCanvas?.[this.id].on("mouse:move", this.setCanvasMove.bind(this));
MyCanvas?.[this.id].on("mouse:down",this.setCanvasDown.bind(this));
MyCanvas?.[this.id].on("mouse:up",this.setCanvasUp.bind(this));
if(!data?.noWheel){
MyCanvas?.[this.id].on("mouse:wheel",this.setCanvasWheel.bind(this));
}
//双击
MyCanvas?.[this.id].on("mouse:dblclick", event=>{
if(this.operation == 'fold'){
@@ -305,13 +381,12 @@ class MyCanvas {
JSchangeType(MyCanvas?.[this.id],'init')
// await this.createBg()
await this.createLayer({str:'init',img:img,noErasable:data?.noErasable || false})//创建图层并且使用
if(img && editGroupImg){
if(img && data.dashedIsDetail){
this.dashed.isDetail = true
await this.createLayer({editImg:editGroupImg,noErasable:data?.noErasable || false})//创建图层并且使用
}
MyCanvas?.[this.id].on("object:added", this.addLayer.bind(this));
// MyCanvas?.[this.id].on("object:added", this.addLayer.bind(this));
this.canvas = MyCanvas?.[this.id];
return MyCanvas?.[this.id]
}
@@ -336,11 +411,11 @@ class MyCanvas {
},
scale
)
MyCanvas?.[this.id].setBackgroundColor({
source:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC',
repeat: 'repeat',
},MyCanvas?.[this.id].renderAll.bind(MyCanvas?.[this.id]),
)
// MyCanvas?.[this.id].setBackgroundColor({
// source:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC',
// repeat: 'repeat',
// },MyCanvas?.[this.id].renderAll.bind(MyCanvas?.[this.id]),
// )
}
mouseMove(event){
let e = getMousePosition(event,false)
@@ -373,6 +448,7 @@ class MyCanvas {
this.setPencil()
this.pencilbtnStyle.display = `block`
this.setCursor('none');
this.setGroupGrid('all')
MyCanvas[this.id].freeDrawingCursor = 'none'
}else if(str == 'move'){
JSchangeType(MyCanvas?.[this.id],'')
@@ -452,11 +528,15 @@ class MyCanvas {
MyCanvas[this.id].upperCanvasEl.style.cursor = str;
}
setCanvasMove = (event)=>{
if(this.mouse.isMovePostion && this.operation == 'move') return this.setCanvasPosition(event)
if(MyCanvas?.[this.id].isDrawingMode){
}else{
let getActiveObject = MyCanvas?.[this.id].getActiveObject()
// console.log(getActiveObject)
// console.log(!this.clipPath.isImg ,
// this.mouse.isDown ,
// getActiveObject?.custom?.dashed ,
// this.layer.selectLayer.group.custom?.groupType == 'Grid')
if(
!this.clipPath.isImg &&
this.mouse.isDown &&
@@ -594,9 +674,7 @@ class MyCanvas {
// if (clickedObject instanceof fabric.Textbox && this.operation != 'text') {
// this.createPatterning.textDataShow = true
// this.createText = clickedObject
// console.log(1);
// }else{
// console.log(2);
// this.createPatterning.textDataShow = false
// this.createText = {}
// }
@@ -686,7 +764,7 @@ class MyCanvas {
//添加裁剪后的图片
let elements = MyCanvas?.[this.id].getObjects().filter(obj => this.isAddToLayer(obj));
let imgData = await this.groupToImg(elements,position,'clipPath')
let img = await this.createImage({minioUrl:imgData})
let img = await this.createImage({imgUrl:imgData})
img.set({
scaleX:1,
scaleY:1,
@@ -750,7 +828,7 @@ class MyCanvas {
}
// 复制图层
async copyLayer(id){
let createId = new Date().getTime()
// let createId = new Date().getTime()
let elements = MyCanvas?.[this.id].getObjects().filter(obj => obj.custom.layerId == id)
for (let i = 0; i < elements.length; i++) {
await new Promise((resolve, reject) => {
@@ -763,12 +841,14 @@ class MyCanvas {
})
})
}
await this.createLayer({id:createId})
// await this.createLayer({id:createId})
copyElements.forEach( item=>MyCanvas?.[this.id].add(item))
}
async setGroupGrid(str){//group变为图片
// MyCanvas?.[this.id].discardActiveObject();//取消所有选中边框
let dashed = MyCanvas?.[this.id].getObjects().filter(obj => obj.custom?.dashed)?.[0];
if(this.layer.selectLayer.group.custom.groupType == 'Object' && !dashed)return
MyCanvas?.[this.id].discardActiveObject();//取消所有选中边框
return await new Promise(async (resolve, reject) => {
let elements = MyCanvas?.[this.id].getObjects().filter(obj => this.isAddToLayer(obj) && !obj.custom.dashed && obj.type);
if(str == 'all'){
elements = MyCanvas?.[this.id].getObjects().filter(obj => this.isAddToLayer(obj) && obj.type);
@@ -781,7 +861,7 @@ class MyCanvas {
height:layerBg?.height?layerBg?.height:MyCanvas?.[this.id].height,
}
let imgData = await this.groupToImg(elements,{},'setGrid',scaleXY)
let img = await this.createImage({minioUrl:imgData})
let img = await this.createImage({imgUrl:imgData})
elements.forEach((obj) =>{
if(obj.custom.isSelectable){
}else{
@@ -805,6 +885,7 @@ class MyCanvas {
hasControls: true
})
this.setGroupStyle(layerBg)
resolve('')
}else{
const rect = new fabric.Rect({
// left:0,
@@ -824,8 +905,11 @@ class MyCanvas {
});
this.setGroupStyle(rect)
MyCanvas?.[this.id].add(rect)
resolve('')
}
MyCanvas?.[this.id].renderAll() // 刷新画布，改变group的visible属性，必须通过刷新画布，才能应用新属性值
})
}
//液化
getLiquefactionImgObj(){
@@ -895,7 +979,7 @@ class MyCanvas {
}
}else if(liquefaction.type == 'layer'){
let bg = MyCanvas?.[this.id].getObjects().filter(item => item.custom?.isSelectable)[0]
let img = await this.createImage({minioUrl:data})
let img = await this.createImage({imgUrl:data})
bg.set({
fill: new fabric.Pattern({
source: img.getElement(), // 传入图片元素
@@ -948,12 +1032,38 @@ class MyCanvas {
if(item.custom?.dashed && item._objects){
cloned._objects = cloned._objects.filter(item => item.type == 'image')
}
// if(type == 'setGrid'){
if(this.exportData.width != -1){
if (cloned.type !== 'image') {
cloned.set({
left: cloned.left - xy.x,
top: cloned.top - xy.y,
left: scaleXY?.scale?cloned.left * scaleXY?.scale:cloned.left - xy.x,
top: scaleXY?.scale?cloned.top * scaleXY?.scale:cloned.top - xy.y,
scaleX: cloned.scaleX * scaleXY?.scale?scaleXY?.scale:1,
scaleY: cloned.scaleY * scaleXY?.scale?scaleXY?.scale:1
});
} else {
// 对图片对象单独处理：重新计算图片的缩放
cloned.set({
left: scaleXY?.scale?cloned.left * scaleXY?.scale:cloned.left - xy.x,
top: scaleXY?.scale?cloned.top * scaleXY?.scale:cloned.top - xy.y,
scaleX: cloned.scaleX * scaleXY?.scale?scaleXY?.scale:1, // 根据原有 scaleX 进行缩放
scaleY: cloned.scaleY * scaleXY?.scale?scaleXY?.scale:1 // 根据原有 scaleY 进行缩放
});
// 确保图片的尺寸缩放是基于原始宽高和当前缩放
var originalWidth = cloned.width * cloned.scaleX; // 原始宽度 * 当前缩放
var originalHeight = cloned.height * cloned.scaleY; // 原始高度 * 当前缩放
cloned.set({
width: originalWidth * scaleXY?.scale?scaleXY?.scale:1, // 调整后的宽度
height: originalHeight * scaleXY?.scale?scaleXY?.scale:1 // 调整后的高度
});
}
}else{
cloned.set({
left: (cloned.left - xy.x),
top: (cloned.top - xy.y),
})
// }
}
if(cloned.custom?.layerId != -1){
temporar.add(cloned)
}
@@ -1108,6 +1218,8 @@ class MyCanvas {
this.setPencilWidth()
}
async addImage (imgData){
console.log(imgData)
if(!imgData.imgUrl)imgData.imgUrl = imgData.url
let img = await this.createImage(imgData)
let position = {
// left: 0,
@@ -1122,17 +1234,18 @@ class MyCanvas {
// minioUrl:getMinioUrl(imgData.url)
},
})
if(this.dashed.isDetail)await this.createLayer({})
console.log(this.exportData.width)
if(this.exportData.width != -1)await this.createLayer({})
// if(this.dashed.isDetail)await this.createLayer({})
this.setCanvasImage(img,position,"upImgFiles",imgData)
}
createImage(imgData){
return new Promise((resolve, reject) => {
console.log(imgData)
fabric.Image.fromURL(imgData.minioUrl,(img) => {
fabric.Image.fromURL(imgData.imgUrl,(img) => {
img.set({
hasControls: true,
})
img.minioUrl=getMinioUrl(imgData.minioUrl || imgData.imgUrl)
img.minioUrl=getMinioUrl(imgData.imgUrl || imgData.minioUrl)
resolve(img)
},{ crossOrigin: "Anonymous" })
})
@@ -1184,7 +1297,6 @@ class MyCanvas {
if (key == "likeDesignCollectionList") {
imgUrl = data.designOutfitUrl;
}
console.log(img.width , img.height,img);
let imgWidth = await this.setImageWidth(key,img);
let proportion = img.height / img.width; //计算图形宽高比例
let scaleWH = imgWidth / img.width; //计算放到画布上缩小倍率
@@ -1278,11 +1390,47 @@ class MyCanvas {
setCanvasWH = (str)=>{
clearTimeout(this.setTimeOut.canvasWH)
this.setTimeOut.canvasWH = setTimeout(()=>{
MyCanvas?.[this.id].setWidth(this.canvasWH.width);
MyCanvas?.[this.id].setHeight(this.canvasWH.height);
// MyCanvas?.[this.id].width = this.canvasWH.width
// MyCanvas?.[this.id].height = this.canvasWH.height
this.initCanvasWH('updata')
// MyCanvas?.[this.id].setWidth(this.canvasWH.width);
// MyCanvas?.[this.id].setHeight(this.canvasWH.height);
var allObjects = MyCanvas?.[this.id].getObjects();
allObjects.forEach((obj)=>{
if((obj?.custom?.type == 'layer' && obj.type == 'group')||(obj.type == 'rect' && obj.custom.isSelectable)){
if((obj?.custom?.type == 'layer' && obj.type == 'group')){
// if(obj.custom.layerId == this.layer.selectLayer.id){
obj.set({
// left: -MyCanvas?.[this.id].width / 2,
// top: -MyCanvas?.[this.id].height / 2,
left: MyCanvas?.[this.id].width / 2 - this.canvasWH.layerWidth / 2,
top: MyCanvas?.[this.id].height / 2 - this.canvasWH.layerHeight / 2,
width:this.canvasWH.layerWidth,
height:this.canvasWH.layerHeight,
})
// }
// if(obj._objects.length > 1){
// obj._objects.forEach((item)=>{
// item.set({
// left: item.left + this.canvasWH.layerWidth / 2,
// top: item.top + this.canvasWH.layerHeight / 2,
// })
// })
// }
}else{
obj.set({
left: MyCanvas?.[this.id].width / 2 - this.canvasWH.layerWidth / 2,
top: MyCanvas?.[this.id].height / 2 - this.canvasWH.layerHeight / 2,
})
}
obj.set({
width:this.canvasWH.layerWidth,
height:this.canvasWH.layerHeight,
})
}
});
MyCanvas?.[this.id].renderAll();
// this.initCanvasWH('updata')
this.updataLayer()
},1000)
}
setColorHistory = (value)=>{
@@ -1411,7 +1559,48 @@ class MyCanvas {
// });
// })
// }
getBGRect(){
let rect
MyCanvas?.[this.id].getObjects().forEach((element)=>{
if(element?.custom?.type == 'layer' && element.type == 'group'){
element._objects.forEach((item)=>{
if(item?.custom?.isSelectable && item.type == 'rect'){
rect = item
}
})
}else if(element?.custom?.isSelectable && element.type == 'rect'){
rect = element
}
})
return rect
}
async upDataRectBGImg(image){
let rect = this.getBGRect()
if(!rect)return
let img = await this.createImage({imgUrl:image})
const scaleX = this.canvasWH.layerWidth / img.width; // 横向比例
const scaleY = this.canvasWH.layerWidth / img.height; // 纵向比例
// 选择较大的比例来保持完整图片显示，避免裁剪
const scale = Math.min(scaleX, scaleY);
const patternTransform = [
scale, 0,
0, scale,
(this.canvasWH.layerWidth - img.width * scale) / 2,
(this.canvasWH.layerWidth - img.height * scale) / 2
];
rect.set({
fill: new fabric.Pattern({
source: img.getElement(), // 传入图片元素
repeat: 'no-repeat', // 设置图片不重复
patternTransform: patternTransform
// patternTransform: [group.width / img.width, 0, 0, group.height / img.height, 0, 0]
}),
})
rect.minioUrl = getMinioUrl(image)
MyCanvas?.[this.id].requestRenderAll()
}
createLayer(data){
let {str,id,editImg,noErasable} = data
let image = data.img
let canvasData = MyCanvas?.[this.id].toJSON(['selectable','minioUrl','custom']);
@@ -1424,8 +1613,10 @@ class MyCanvas {
top: -MyCanvas?.[this.id].height / 2,
// left:0,
// top:0,
width: MyCanvas?.[this.id].width,
height: MyCanvas?.[this.id].height,
// width: this.canvasWH.layerWidth,
// height: this.canvasWH.layerHeight,
width: this.canvasWH.width,
height: this.canvasWH.height,
strokeWidth:0,
fill:'#FFF',
custom:{
@@ -1440,10 +1631,10 @@ class MyCanvas {
rect.clipPath = cloned
})
const group = new fabric.Group([], {
width: MyCanvas?.[this.id].width,
height: MyCanvas?.[this.id].height,
left:0,
top:0,
width: this.canvasWH.width,
height: this.canvasWH.height,
left:(this.canvasWH.width - this.canvasWH.layerWidth)/2,
top:(this.canvasWH.height - this.canvasWH.layerHeight)/2,
erasable:false,
subTargetCheck:true,
evented:false,
@@ -1461,7 +1652,7 @@ class MyCanvas {
if(str == 'init'){
group.moveTo(group.custom.selectLayerIndex)
if(image){
let img = await this.createImage({minioUrl:image})
let img = await this.createImage({imgUrl:image})
const scaleX = group.width / img.width; // 横向比例
const scaleY = group.height / img.height; // 纵向比例
// 选择较大的比例来保持完整图片显示，避免裁剪
@@ -1489,7 +1680,7 @@ class MyCanvas {
})
}else if(editImg){
group.moveTo(group.custom.selectLayerIndex)
let img = await this.createImage({minioUrl:editImg})
let img = await this.createImage({imgUrl:editImg})
rect.set({
fill: new fabric.Pattern({
source: img.getElement(), // 传入图片元素
@@ -1505,8 +1696,10 @@ class MyCanvas {
}
MyCanvas?.[this.id].add(group)
let img = group.toDataURL({
width: MyCanvas?.[this.id].width,
height: MyCanvas?.[this.id].height,
// width: this.canvasWH.layerWidth,
// height: this.canvasWH.layerHeight,
width: this.canvasWH.width,
height: this.canvasWH.height,
})
this.layer.list.unshift({
@@ -1514,8 +1707,11 @@ class MyCanvas {
id,img,isShow:true,
groupType:'Object',
index,})
await this.selectLayer(id)
if(this.layer.selectLayer.group && this.layer.selectLayer.group?.custom.groupType == 'Grid'){
await this.setGroupGrid('all')
}
MyCanvas?.[this.id].renderAll();
await this.selectLayer(id)
this.updateCanvasState()
resolve(group)
})
@@ -1532,11 +1728,9 @@ class MyCanvas {
}))
}
showBg(boolen){
let Bg = MyCanvas?.[this.id].getObjects().filter(obj => obj.custom.type == 'init')?.[0];
// MyCanvas?.[this.id].getObjects().forEach((item)=>{
// console.log(item)
// })
Bg.set({visible:boolen})
let rect = this.getBGRect()
if(!rect)return
rect.set({visible:boolen})
// if(Bg.visible){
// Bg.set({visible:false})
// }else{
@@ -1602,7 +1796,6 @@ class MyCanvas {
options.target.clipPath = cloned
})
}else if(options.target.type == 'image' && options.target.custom?.type != 'pencil' && this.dashed.isDetail ){
console.log(123321)
let scale = 1
if(options.target?.custom?.type == 'print')scale = 2
options.target.set({
@@ -1617,7 +1810,7 @@ class MyCanvas {
//判断是否可以点击空白地方进行选中
if(options.target?.custom?.dashed){
this.dashed.isDashedShow = true
options.target.set({perPixelTargetFind:false,erasable:false,hasBorders: false,hasControls: false})
options.target.set({perPixelTargetFind:false,erasable:false,hasBorders: false,hasControls: false,selectable:true})
if(this.dashed.isDetail){//判断是裁剪还是局部添加
options.target.set({selectable:false,perPixelTargetFind:true})
}else{
@@ -1647,7 +1840,7 @@ class MyCanvas {
arr.forEach((item,index)=>{
item.moveTo(index)
})
if(!options?.target?.custom?.dashed && this.layer.selectLayer.group.custom.groupType == 'Grid'){
if(!options?.target?.custom?.dashed && this.layer.selectLayer.group.custom.groupType == 'Grid' && this.clipPath.clipGroup && this.dashed.isDetail){
await new Promise((resolve, reject) => {
let clipPathElement = this.clipPath.clipGroup._objects.filter(obj => obj.custom?.dashed)[0]
let clipPathLect = this.clipPath.clipGroup.left
@@ -1705,8 +1898,10 @@ class MyCanvas {
return this.isAddToLayer(obj)
});
const group = new fabric.Group([], {
width: this.layer.selectLayer.group.width,
height: this.layer.selectLayer.group.height,
// width: this.layer.selectLayer.group.width,
// height: this.layer.selectLayer.group.height,
width:this.canvasWH.layerWidth,
height:this.canvasWH.layerHeight,
erasable:false,
selectable:false,
});
@@ -1715,8 +1910,10 @@ class MyCanvas {
let item = elements[i]
item.clone((clonedObj)=>{
this.setClone(item,clonedObj)
clonedObj.left = clonedObj.left - this.layer.selectLayer.group.width/2
clonedObj.top = clonedObj.top - this.layer.selectLayer.group.height/2
// clonedObj.height = this.layer.selectLayer.group.height
// clonedObj.width = this.layer.selectLayer.group.width
clonedObj.left = clonedObj.left - this.canvasWH.width/2
clonedObj.top = clonedObj.top - this.canvasWH.height/2
if(clonedObj.custom?.dashed){
let clipPath = clonedObj._objects.filter(item => item.type != 'image')[0]
clonedObj.remove(clipPath)
@@ -1727,8 +1924,10 @@ class MyCanvas {
})
}
this.updataLayerImg(this.layer.selectLayer.id,group.toDataURL({
width: this.layer.selectLayer.group.width,
height: this.layer.selectLayer.group.height
// left:this.canvasWH.width / 2 - this.canvasWH.layerWidth/2,
// top:this.canvasWH.height / 2 - this.canvasWH.layerWidth/2,
width:this.canvasWH.layerWidth,
height:this.canvasWH.layerHeight,
})
)
},500)
@@ -1763,7 +1962,7 @@ class MyCanvas {
}
async selectLayer(id){
await new Promise(async (resolve, reject) => {
if(this.layer.selectLayer.id != -1){
if(this.layer.selectLayer.id != -1 && this.layer.selectLayer.group){
await this.mergeGroup()
}
let group = await this.lookingLayer(id,'setRubber')
@@ -1778,17 +1977,17 @@ class MyCanvas {
}
async mergeGroup(){
const elements = MyCanvas?.[this.id].getObjects().filter(obj => this.isAddToLayer(obj));
let isClipPath = MyCanvas?.[this.id].getObjects().filter(obj => obj.custom?.dashed);
if(isClipPath.length>0)await this.setGroupGrid('all')
let group = await this.lookingLayer(this.layer.selectLayer.id,'setlayerIndex')
group.set({visible:true})
group.set({visible:true,evented:false})
for (let index = 0; index < elements.length; index++) {
const item = elements[index];
await new Promise((resolve, reject) => {
item.clone((v)=>{
this.setClone(item,v)
v.left = v.left - group.width/2
v.top = v.top - group.height/2
// v.left = v.left - MyCanvas?.[this.id].width / 2
// v.top = v.top - MyCanvas?.[this.id].height / 2
v.left = v.left - (this.canvasWH.width - this.canvasWH.layerWidth)/2 - this.layer.selectLayer.group.width/2
v.top = v.top - (this.canvasWH.height - this.canvasWH.layerHeight)/2 - this.layer.selectLayer.group.height/2
if(v.custom?.dashed){
// MyCanvas?.[this.id].remove(item)
// let img = v._objects.filter(item => item.type == 'image')[0]
@@ -1814,14 +2013,18 @@ class MyCanvas {
async expandGroup(){
const elements = this.layer.selectLayer.group._objects.filter(obj => this.isAddToLayer(obj));
// fabric.util.enlivenObjects(elements, (clonedObjects) => {
this.layer.selectLayer.group.set({visible:false})
let isClipPath = MyCanvas?.[this.id].getObjects().filter(obj => obj.custom?.dashed);
if(isClipPath.length>0)await this.setGroupGrid('all')
this.layer.selectLayer.group.set({evented:true})
for (let index = 0; index < elements.length; index++) {
const item = elements[index];
await new Promise((resolve, reject) => {
item.clone((v)=>{
this.setClone(item,v)
v.left = v.left + this.layer.selectLayer.group.width/2
v.top = v.top + this.layer.selectLayer.group.height/2
// v.left = v.left + this.layer.selectLayer.group.width/2
// v.top = v.top + this.layer.selectLayer.group.height/2
v.left = v.left + (this.canvasWH.width - this.canvasWH.layerWidth)/2 + this.layer.selectLayer.group.width/2
v.top = v.top + (this.canvasWH.height - this.canvasWH.layerHeight)/2 + this.layer.selectLayer.group.height/2
if(v.custom?.isSelectable && this.layer.selectLayer.group.custom.noErasable){
v.set({
erasable:false
@@ -1841,6 +2044,7 @@ class MyCanvas {
// MyCanvas?.[this.id].add(img)
// }
}else{
console.log(v,'add')
MyCanvas?.[this.id].add(v)
}
if(index == elements.length - 1){
@@ -1928,7 +2132,7 @@ class MyCanvas {
}else if(this.keyDown.indexOf('KeyI') > -1){
this.getColor()//吸色
}else if(this.keyDown.indexOf('KeyM') > -1){
setOperation('move')
this.setOperation('move')
}else if((this.keyDown.indexOf('ControlLeft') > -1 || this.keyDown.indexOf('MetaLeft') > -1) && event.code == 'KeyD'){
MyCanvas?.[this.id].discardActiveObject().renderAll();
}else if((this.keyDown.indexOf('ControlLeft') > -1 || this.keyDown.indexOf('MetaLeft') > -1) && event.code == 'KeyO'){
@@ -2049,7 +2253,7 @@ class MyCanvas {
}
let elements = MyCanvas[this.id].getObjects().filter(obj => this.isAddToLayer(obj));
let imgData = await this.groupToImg(elements,position,'clipPath')//矩形裁剪图片
let img = await this.createImage({minioUrl:imgData})
let img = await this.createImage({imgUrl:imgData})
// cloned._objects = cloned._objects.filter(item => item.type == 'image')
let clipPathElement = cloned._objects.filter(obj => obj.type != 'image')[0]
@@ -2091,17 +2295,16 @@ class MyCanvas {
this._clipboard = copyObj;
}
async paste(){//粘贴
paste(){//粘贴
if(!this._clipboard){
return
}
await this.createLayer({})
this._clipboard.clone(clonedObj => {
// this.setClone(this._clipboard,clonedObj)
this._clipboard.clone(async clonedObj => {
MyCanvas?.[this.id].discardActiveObject() // 取消选择
clonedObj.set({
selectable: true
})
if(this.exportData.width != -1)await this.createLayer({})
if (clonedObj.type === 'activeSelection') {
// 活动选择需要一个对画布的引用
clonedObj.forEachObject((obj)=>{
@@ -2111,7 +2314,6 @@ class MyCanvas {
clonedObj.setCoords()
} else {
MyCanvas?.[this.id].add(clonedObj)
// this.layer.selectLayer.group.add(clonedObj)
}
MyCanvas?.[this.id].setActiveObject(clonedObj)
MyCanvas?.[this.id].requestRenderAll()
@@ -2120,8 +2322,8 @@ class MyCanvas {
this.updateCanvasState()
}
isSelectable(obj){//判断元素是否允许选中
if(this.dashed.isDetail){
return (obj.custom?.type != 'layer' && (!obj.custom?.isSelectable || this.layer.selectLayer.group.custom.groupType == 'Grid') && !obj.isType('path') && !obj.custom?.dashed)
if(!this.dashed.isDetail){
return (obj.custom?.type != 'layer' && (!obj.custom?.isSelectable || this.layer.selectLayer.group.custom.groupType == 'Grid') && !obj.isType('path'))
}else{
return (obj.custom?.type != 'layer' && (!obj.custom?.isSelectable || this.layer.selectLayer.group.custom.groupType == 'Grid') && !obj.isType('path') && (this.dashed.isDetail || !obj.custom?.dashed))
}
@@ -2178,13 +2380,28 @@ class MyCanvas {
)
}
setLoadFromJSON(data,fun){
MyCanvas?.[this.id].loadFromJSON(data.canvas, fun);
MyCanvas?.[this.id].loadFromJSON(data.canvas, async ()=>{
fun()
if(data.groupList.length == 0){
console.log(this.layer)
}else{
data.groupList.sort((a, b) => a.index - b.index);
data.groupList.forEach((item, i) => {
item.index = i + 1; // 从1开始
});
this.layer.currentIndex = data.groupList.length
this.layer.list = data.groupList
this.layer.selectLayer.id = data.groupList[0].id
await this.selectLayer(this.layer.list[this.layer.list.length-1].id)
let arr = MyCanvas?.[this.id].getObjects().sort((a, b) =>{
return a.custom.selectLayerIndex - b.custom.selectLayerIndex;
});
arr.forEach((item,index)=>{
item.moveTo(index)
})
this.addEvent()
}
});
}
temporarilyExport(data){
let scaleXY = {
@@ -2220,16 +2437,33 @@ class MyCanvas {
goal.erasable = obj.erasable
if(obj.minioUrl)goal.minioUrl = obj.minioUrl
}
getElement(){
let list = []
if(MyCanvas?.[this.id]?.getObjects){
list = MyCanvas?.[this.id].getObjects().filter(obj => this.isAddToLayer(obj) && !obj.custom.dashed && obj.type && obj.erasable);
}
return list
}
//导出除了底图
async detailSubmit(){
return await new Promise(async (resolve, reject) => {
let list = MyCanvas?.[this.id].getObjects().filter(obj => this.isAddToLayer(obj) && !obj.custom.dashed && obj.type && obj.erasable);
let list
if(this.exportData.width == -1){
list = MyCanvas?.[this.id].getObjects().filter(obj => this.isAddToLayer(obj) && !obj.custom.dashed && obj.type && obj.erasable);
}else{
list = MyCanvas?.[this.id].getObjects().filter(obj => !obj.custom.dashed && obj.type);
}
let layerBg = list.filter(obj => obj.custom.isSelectable)[0]
let canvasWidth = layerBg?.width?layerBg?.width:MyCanvas?.[this.id].width
let canvasHeight = layerBg?.height?layerBg?.height:MyCanvas?.[this.id].height
let exportWidth = this.exportData.width == -1?canvasWidth:this.exportData.width
let exportHeight = canvasHeight / canvasWidth * exportWidth
let scaleXY = {
scaleX:layerBg?.scaleX?layerBg?.scaleX:1,
scaleY:layerBg?.scaleY?layerBg?.scaleY:1,
width:layerBg?.width?layerBg?.width:MyCanvas?.[this.id].width,
height:layerBg?.height?layerBg?.height:MyCanvas?.[this.id].height,
width:exportWidth,
height:exportHeight,
scale:exportWidth / canvasWidth,
}
let imgData = await this.groupToImg(list,{},'setGrid',scaleXY)
resolve(imgData)

11
src/tool/https.js
View File

@@ -118,6 +118,7 @@ axios.interceptors.response.use((res) =>{
}
message.warning('Please login and try again~')
store.commit('createDetail')
store.commit('createProbject')
setTimeout(()=>[
isLoginTime = false
],2000)
@@ -232,6 +233,7 @@ export const Https = {
getModuleContent:`/api/project/getModuleContent`,//获取模块内容
saveModuleContent:`/api/project/saveModuleContent`,//储存模块内容
historyProject:`/api/project/page`,//项目记录
projectDetail:`/api/project/delete`,//删除项目
//3d
threeDPage:`/api/project/threeDPage`,
downloadZip:`/api/project/downloadZip`,//下载zip
@@ -241,7 +243,11 @@ export const Https = {
selectHistoryProject:`/api/project/choose`,//选择项目
getMannequinDetail:`/api/project/getMannequinDetail`,//模块化查看模特点位
modifyProportion:`/api/generate/modifyProportion`,//模特拉伸
addSysModelToLib:`/api/library/addSysModelToLib`,
poselikeOrDisike:`/api/generate/likeOrDislike`,//postTransform like
getAllPose:`/api/generate/getAllPose`,//获取动作
//拼贴
genSketchRecon:`/api/generate/genSketchRecon`,
@@ -365,11 +371,12 @@ export const Https = {
brandLogoUpload:`/api/history/brandLogoUpload`,//上传bradDNA
brandDNAGenerate:`/api/history/brandDNAGenerate`,//上传bradDNA
brandDNAUpload:`/api/history/brandDNAUpload`,//上传DNA图片
getInitializeProgress:`/api/history/getInitializeProgress`,//获取brand进度
brandDNADelete:`/api/history/brandDNADelete`,//删除brandDna
brandDNAPage:`/api/history/brandDNAPage`,//brand列表
brandDNASaveOrUpdate:`/api/history/brandDNASaveOrUpdate`,//提交个人信息
productImageInitialize:`/api/history/productImageInitialize`,//产品识别
//调查问卷
questionnaire:`/api/account/questionnaire`,//保存画布

81
src/tool/listData.js
View File

@@ -1,4 +1,72 @@
const projectList = {
all:[
{
icon:'fi fi-rr-grid',
value:'moodBoard',
name:'Moodboard',
task:'false',
},{
icon:'fi fi-rs-objects-column',
value:'printBoard',
name:'Printboard',
task:'false',
},{
icon:'fi fi-rr-palette',
value:'colorBoard',
name:'Colorboard',
task:'false',
},{
icon:'fi icon iconfont icon-a-waitao_changkuanwaitao11x',
value:'sketchBoard',
name:'Sketchboard',
task:'false',
},{
icon:'fi fi-rs-people',
value:'mannequin',
name:'Mannequin',
task:'false',
},{
icon:'fi fi-rs-paintbrush-pencil',
value:'design',
name:'Design',
task:'false',
},{
icon:'fi fi-ss-box-open',
value:'toProduct',
name:'To Product Image',
task:'false',
},{
icon:'fi fi-br-keyboard-brightness',
value:'relight',
name:'Relight',
task:'false',
},{
icon:'fi fi-rr-play-alt',
value:'poseTransfer',
name:'Transfer Pose',
task:'false',
},{
icon:'i class="fi fi-rr-puzzle-alt',
value:'deReconstruction',
name:'De/Reconstruction',
task:'false',
},{
icon:'fi fi-rr-model-cube',
value:'patternMaking3D',
name:'3D Pattern Making',
task:'false',
},{
icon:'fi fi-rr-play-alt',
value:'poseTransfer',
name:'Transfer Pose',
task:'false',
},{
icon:'fi fi-rr-pen-swirl',
value:'canvas',
name:'Canvas',
task:'false',
},
],
seriesDesign:[
{
icon:'fi fi-rr-grid',
@@ -33,7 +101,7 @@ const projectList = {
},{
icon:'fi fi-ss-box-open',
value:'toProduct',
name:'To Product',
name:'To Product Image',
task:'3-1',
},{
icon:'fi fi-br-keyboard-brightness',
@@ -81,7 +149,7 @@ const projectList = {
},{
icon:'fi fi-ss-box-open',
value:'toProduct',
name:'To Product',
name:'To Product Image',
task:'3-1',
},{
icon:'fi fi-br-keyboard-brightness',
@@ -112,7 +180,7 @@ const projectList = {
{
icon:'fi fi-ss-box-open',
value:'toProduct',
name:'To Product',
name:'To Product Image',
task:'1-1',
},{
icon:'fi fi-br-keyboard-brightness',
@@ -133,7 +201,7 @@ const projectList = {
],
printingDesign3D:[
{
icon:'fi fi-rr-model-cube',
icon:'fi fi-rr-cubes',
value:'patternMaking3D',
name:'3D Pattern Making',
task:'1-1',
@@ -150,6 +218,11 @@ const projectList = {
value:'sketchBoard',
name:'Sketchboard',
task:'1-1',
},{
icon:'fi fi-rs-people',
value:'mannequin',
name:'Mannequin',
task:'1-2',
},{
icon:'i class="fi fi-rr-puzzle-alt',
value:'deReconstruction',

1
src/views/HomeMain.vue
View File

@@ -495,6 +495,7 @@ export default defineComponent({
this.$router.replace("/");
}
this.store.commit('createDetail')
store.commit('createProbject')
// WriteCookie("token");
clonAllCookie()

1
src/views/HomeRecommend.vue
View File

@@ -105,6 +105,7 @@ export default defineComponent({
userId: userInfo?.userId,
};
store.commit('createDetail')
store.commit('createProbject')
if(!data.userId) return
Https.axiosPost(Https.httpUrls.accountLogout, data).then((rv) => {
clonAllCookie();

10
src/views/HomeView/history.vue
View File

@@ -294,11 +294,12 @@ export default defineComponent({
//删除分组
deleteGroup(record:any,index:number){
console.log(record)
let deleteGroupFun = (id:any,index:number) =>{
let data = {
userGroupId:id
projectId:id
}
Https.axiosPost(Https.httpUrls.deleteUserGroup,data).then(
Https.axiosPost(Https.httpUrls.projectDetail,{},{params:data}).then(
(rv: any) => {
message.success(this.t('HistoryPage.jsContent1'))
this.collectionList.splice(index,1)
@@ -306,8 +307,10 @@ export default defineComponent({
// return
// });
if(record.id == this.store.state.HomeStoreModule.userGroupId){
this.store.commit('deleteUserGroupId')
// this.store.commit('deleteUserGroupId')
this.store.commit("setLikeDesignCollectionList", []);
this.store.commit('createProbject')
this.store.commit("clearAllData");
this.store.commit("clearAllCollection");
this.store.commit("setAllBoardDataChoose",{});
@@ -340,6 +343,7 @@ export default defineComponent({
if(record.original == 0){
num = false
}
this.store.commit('createProbject')
this.$router.push({name:'homePage',params: {id:record.id,type:'History'}})
this.store.commit('setChooseIsDesign',num)

51
src/views/HomeView/library.vue
View File

@@ -237,11 +237,12 @@
<!-- 蒙层 end-->
<div v-show="selectCode == 'MyBrand'" class="right_content_body">
<div v-show="!isBrandDetail" class="list">
<div class="addBrand gallery_btn" @click="addBrand">Add brand</div>
<div class="addBrand gallery_btn" style="padding:0 2.5rem;" @click="addBrand">Add brand</div>
<div class="content_body_table scroll_style">
<div class="myBrandItem content_img_item" v-for="item in brandDNAList" :key="item.id" @click="openBrandDetail(item)">
<div class="myBrandItem content_img_item" v-for="item,index in brandDNAList" :key="item.id" @click="openBrandDetail(item)">
<img :src="item.minioUrl" alt="">
<div class="bg"></div>
<i class="fi fi-rr-trash icon_delete" @click.stop="deleteBrand(item,index)"></i>
</div>
<div class="no_data_block" v-show="!brandDNAList.length && !isShowMark">
<img src="@/assets/images/homePage/null_img.png">
@@ -258,7 +259,7 @@
/>
</div>
</div>
<brandDetail v-show="isBrandDetail" v-model:isShowMark="isShowMark" ref="brandDetail" @handleBack="()=>isBrandDetail = false"></brandDetail>
<brandDetail v-show="isBrandDetail" v-model:isShowMark="isShowMark" :selectCode="selectCode" ref="brandDetail" @handleBack="()=>isBrandDetail = false"></brandDetail>
</div>
<div class="right_content_body" v-show="uploadGenerate !='Upload'">
@@ -795,6 +796,7 @@ export default defineComponent({
const addBrand = ()=>{
dataDom.createBrand.openAddBrand()
}
watch(
() => props.getLangIsShowMark, // 这里使用了一个 getter 函数
(newValue, oldValue) => {
@@ -1822,7 +1824,28 @@ export default defineComponent({
})
}
},
deleteBrand(item:any,index:any){
let this_ = this
Modal.confirm({
title: this.t('LibraryPage.jsContent11'),
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
mask:false,
centered:true,
onOk() {
let data = {
id:item.id,
}
Https.axiosPost(Https.httpUrls.brandDNADelete, data).then(
(rv) => {
this_.brandDNAList.splice(index,1)
}
).catch(res=>{
});
}
});
}
}
})
@@ -2025,7 +2048,7 @@ export default defineComponent({
.right_content_body{
width: 100%;
height: 100%;
background: #f6f5fa;
background: #f7f8fa;
padding: 2rem 4rem;
border-radius: 2rem;
overflow: hidden;
@@ -2149,11 +2172,11 @@ export default defineComponent({
width: calc(100% / 5 - 1rem);
margin: 1rem;
border-radius: 2rem;
border: 2px solid #000;
// border: 2px solid #000;
position: relative;
aspect-ratio: 1 / .566;
cursor: pointer;
background: #fff;
// background: #fff;
> img{
width: 100%;
height: 100%;
@@ -2167,10 +2190,24 @@ export default defineComponent({
background: rgba(0,0,0,0);
transition: all .3s;
}
i{
display: flex;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-size: 3rem;
display: none;
color: #fff;
cursor: pointer;
}
&:hover{
> .bg{
background: rgba(0,0,0,0.2);
}
> i{
display: flex;
}
}
}
.content_img_item_block{

1
src/views/Register.vue
View File

@@ -77,6 +77,7 @@ export default defineComponent({
userId: userInfo?.userId,
};
store.commit('createDetail')
store.commit('createProbject')
if(!data.userId) return
Https.axiosPost(Https.httpUrls.accountLogout, data).then((rv) => {
clonAllCookie();

3
tsconfig.json
View File

@@ -23,7 +23,8 @@
"paths": {
"@/*": [
"src/*"
]
],
"three/ *": ["three/addons/postprocessing/*"]
},
"lib": [
"esnext",