sileya-ai
/
vr-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/dev-yxl' into dev-sws

v1.0.0
sws 2024-10-15 09:31:50 +08:00
parent f403c069d7 4eef5508ea
commit b574432d3c
25 changed files with 519 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/assets/icons/iconfont.css
View File

@ -1,9 +1,9 @@
@font-face {
font-family: "iconfont"; /* Project id 4227145 */
src: url('iconfont.woff2?t=1728611284151') format('woff2'),
url('iconfont.woff?t=1728611284151') format('woff'),
url('iconfont.ttf?t=1728611284151') format('truetype'),
url('iconfont.svg?t=1728611284151#iconfont') format('svg');
src: url('iconfont.woff2?t=1728898698610') format('woff2'),
url('iconfont.woff?t=1728898698610') format('woff'),
url('iconfont.ttf?t=1728898698610') format('truetype'),
url('iconfont.svg?t=1728898698610#iconfont') format('svg');
}
.iconfont {
@ -14,6 +14,14 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-top-up:before {
content: "\e7a1";
}
.icon-bottom-up:before {
content: "\e7a0";
}
.icon-domain:before {
content: "\e7cf";
}
@ -182,11 +190,11 @@
content: "\e738";
}
.icon-arrow-left1:before {
.icon-arrow-left:before {
content: "\e73f";
}
.icon-arrow-right1:before {
.icon-arrow-right:before {
content: "\e737";
}
@ -574,10 +582,6 @@
content: "\e6d4";
}
.icon-arrow-left:before {
content: "\e6d1";
}
.icon-scan:before {
content: "\e6cf";
}
@ -650,10 +654,6 @@
content: "\e6c1";
}
.icon-arrow-right:before {
content: "\e6c2";
}
.icon-zhibo-shixiao:before {
content: "\e6bb";
}
@ -670,7 +670,7 @@
content: "\e6b8";
}
.icon-categroy-more:before {
.icon-category-more:before {
content: "\e6b7";
}

2
src/assets/icons/iconfont.js
View File

File diff suppressed because one or more lines are too long

36
src/assets/icons/iconfont.json
View File

@ -5,6 +5,20 @@
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "42105733",
"name": "置顶",
"font_class": "top-up",
"unicode": "e7a1",
"unicode_decimal": 59297
},
{
"icon_id": "42097665",
"name": "置底",
"font_class": "bottom-up",
"unicode": "e7a0",
"unicode_decimal": 59296
},
{
"icon_id": "7561087",
"name": "域名服务",
@ -21,7 +35,7 @@
},
{
"icon_id": "38735708",
"name": "yinyong-shangchuan",
"name": "文件上传",
"font_class": "upload-file",
"unicode": "e72d",
"unicode_decimal": 59181
@ -302,14 +316,14 @@
{
"icon_id": "40047124",
"name": "进销存左箭头",
"font_class": "arrow-left1",
"font_class": "arrow-left",
"unicode": "e73f",
"unicode_decimal": 59199
},
{
"icon_id": "40047129",
"name": "进销存右箭头",
"font_class": "arrow-right1",
"font_class": "arrow-right",
"unicode": "e737",
"unicode_decimal": 59191
},
@ -985,13 +999,6 @@
"unicode": "e6d4",
"unicode_decimal": 59092
},
{
"icon_id": "37356823",
"name": "箭头-向左",
"font_class": "arrow-left",
"unicode": "e6d1",
"unicode_decimal": 59089
},
{
"icon_id": "37354114",
"name": "扫一扫",
@ -1118,13 +1125,6 @@
"unicode": "e6c1",
"unicode_decimal": 59073
},
{
"icon_id": "37288621",
"name": "箭头-向右",
"font_class": "arrow-right",
"unicode": "e6c2",
"unicode_decimal": 59074
},
{
"icon_id": "37272530",
"name": "zhibo-shixiao",
@ -1156,7 +1156,7 @@
{
"icon_id": "37217394",
"name": "分类更多",
"font_class": "categroy-more",
"font_class": "category-more",
"unicode": "e6b7",
"unicode_decimal": 59063
},

16
src/assets/icons/iconfont.svg
View File

@ -14,11 +14,15 @@
/>
<missing-glyph />
<glyph glyph-name="top-up" unicode="&#59297;" d="M932.465778 655.075556A34.872889 34.872889 0 0 1 967.111111 690.176 34.872889 34.872889 0 0 1 932.465778 725.333333H91.591111A34.872889 34.872889 0 0 1 56.888889 690.176c0-19.342222 15.473778-35.100444 34.645333-35.100444H932.408889zM116.053333 110.364444l403.512889 430.307556 388.437334-414.208c11.776-12.572444 30.549333-14.222222 44.145777-4.778667l4.266667 3.584a35.043556 35.043556 0 0 1 1.194667 49.152L544.426667 615.082667a34.019556 34.019556 0 0 1-49.777778 0.113777l-428.316445-456.874666a35.157333 35.157333 0 0 1 1.137778-49.152 33.962667 33.962667 0 0 1 48.526222 1.137778z" horiz-adv-x="1024" />
<glyph glyph-name="bottom-up" unicode="&#59296;" d="M932.465778 169.813333c19.171556 0 34.645333-15.701333 34.645333-35.100444a34.872889 34.872889 0 0 0-34.645333-35.157333H91.591111A34.872889 34.872889 0 0 0 56.888889 134.712889c0 19.342222 15.473778 35.100444 34.645333 35.100444H932.408889zM116.053333 714.524444l403.512889-430.307555 388.437334 414.208a33.848889 33.848889 0 0 0 44.145777 4.778667l4.266667-3.584c13.767111-13.255111 14.279111-35.328 1.194667-49.152L544.426667 209.806222a34.019556 34.019556 0 0 0-49.777778-0.113778L66.332444 666.567111a35.157333 35.157333 0 0 0 1.137778 49.152 33.962667 33.962667 0 0 0 48.526222-1.137778z" horiz-adv-x="1024" />
<glyph glyph-name="domain" unicode="&#59343;" d="M352.457463 457.129832l-55.631569-193.107892h-62.607512l-28.475392 113.146691c-1.88598 7.545135-2.955188 15.777185-3.206409 24.705858h-1.131103c-0.881095-9.806127-2.139629-17.794238-3.771961-23.952194l-30.549485-113.901568H105.227757l-54.500466 193.107892h60.722745l26.590625-125.974756c1.253679-5.91159 2.197883-13.074432 2.828971-21.497022h1.131103c0.627447 8.796388 1.758549 16.217733 3.393308 22.253113l33.191557 125.218665h56.762671l29.795821-125.974756c0.753664-3.145728 1.631118-10.434788 2.639645-21.875674h1.319215a216.955714 216.955714 0 0 0 3.017084 21.875674l25.082083 125.974756h55.255344zM660.408699 457.129832l-55.631568-193.107892h-62.609939l-28.474179 113.145477c-1.887194 7.547563-2.956402 15.779612-3.206409 24.708286h-1.132317c-0.879881-9.806127-2.138415-17.794238-3.770747-23.952195l-30.550699-113.901568h-61.853847l-54.499252 193.107892h60.723958l26.589412-125.974755c1.254893-5.91159 2.197883-13.074432 2.82897-21.497022h1.132317c0.626233 8.796388 1.759763 16.217733 3.393308 22.253113l33.191557 125.218664h56.762671l29.793394-125.974755c0.756091-3.145728 1.634759-10.434788 2.642072-21.875674h1.320429a216.613471 216.613471 0 0 0 3.018297 21.875674l25.079656 125.974755h55.252916zM968.358722 457.129832L912.728367 264.023154h-62.608725l-28.476606 113.143049c-1.88598 7.547563-2.953975 15.779612-3.206409 24.708286h-1.132316c-0.878668-9.806127-2.138415-17.794238-3.770748-23.952194l-30.550698-113.901568h-61.853848L666.628551 457.129832h60.726386l26.586984-125.974755c1.25732-5.91159 2.200311-13.074432 2.830184-21.497022h1.132317c0.627447 8.796388 1.758549 16.217733 3.392095 22.253113l33.193984 125.218664h56.761458l29.795821-125.974755c0.756091-3.145728 1.634759-10.434788 2.644499-21.875674h1.318001a216.944792 216.944792 0 0 0 3.014656 21.875674l25.079657 125.974755h55.254129zM228.98157 535.599483a6.068148 6.068148 0 0 0-5.745322 8.024519c35.237736 103.580862 132.467674 173.172812 241.944348 173.172812a6.068148 6.068148 0 0 0 0-12.136296c-104.277485 0-196.890776-66.287237-230.454917-164.945617a6.070575 6.070575 0 0 0-5.744109-4.115418zM506.492549-59.571769c-174.451977 0-332.055135 103.42309-401.513586 263.482634-5.336329 12.297709 0.307048 26.593052 12.604757 31.929382 12.295282 5.335116 26.591839-0.305835 31.929382-12.603544 61.75433-142.31021 201.876366-234.263287 356.979447-234.263287 154.515684 0 294.428975 91.470052 356.443022 233.032666 5.378807 12.277077 19.692354 17.875551 31.973073 12.493104 12.278291-5.38002 17.873124-19.694782 12.493103-31.973073C837.650811 43.307615 680.284312-59.571769 506.492549-59.571769zM116.356741 490.166044c-2.660276 0-5.364243 0.440548-8.017238 1.368975-12.653303 4.427321-19.320984 18.273621-14.893662 30.926924 29.684167 84.835138 84.070552 157.603157 157.276691 210.437309 74.797208 53.982246 163.240467 82.515892 255.770017 82.515892 92.169102 0 180.332013-28.33097 254.955671-81.929709 73.018027-52.445791 127.450529-124.750203 157.410191-209.096249 4.486789-12.632671-2.11657-26.510526-14.748028-30.997314-12.632671-4.484361-26.510526 2.115356-30.997314 14.748027-54.968927 154.753555-202.301137 258.728846-366.62052 258.728846-165.139797 0-312.715947-104.663419-367.224908-260.441277C135.767533 496.428373 126.384962 490.166044 116.356741 490.166044z" horiz-adv-x="1024" />
<glyph glyph-name="download-btn" unicode="&#59143;" d="M919.296 0H104.704a40.704 40.704 0 1 1 0-81.472h814.592a40.704 40.704 0 0 1 0 81.472z m-30.656 566.08l-58.624 57.856-300.544-300.544V896H448v-581.568L138.496 623.9359999999999l-57.024-57.856 403.2-403.2 403.968 403.2z" horiz-adv-x="1024" />
<glyph glyph-name="upload-file" unicode="&#59181;" d="M872.90418594 8.773953750000032H144.87813969a67.35627937 67.35627937 0 0 0-67.27813969 67.27813969V686.41116281A67.35627937 67.35627937 0 0 0 144.87813969 753.70046531h315.85116281a67.35627937 67.35627937 0 0 0 67.2893025-67.2893025c0-10.57116281-8.65116281-19.22232562-19.23348844-19.22232562a19.27813969 19.27813969 0 0 0-19.22232562 19.22232562 28.8 28.8 0 0 1-28.83348844 28.84465125H144.8893025a28.8 28.8 0 0 1-28.83348844-28.84465125v-610.35906937a28.8 28.8 0 0 1 28.83348844-28.83348844H872.91534875c10.57116281 0 19.22232562-8.65116281 19.22232562-19.22232562s-8.461395-19.22232562-19.22232562-19.22232563zM872.90418594 8.773953750000032a19.27813969 19.27813969 0 0 0-19.22232563 19.22232563c0 10.57116281 8.65116281 19.22232562 19.22232563 19.22232562a28.8 28.8 0 0 1 28.83348844 28.83348844V471.49395375a28.8 28.8 0 0 1-28.83348844 28.83348844H304.26046531a28.8 28.8 0 0 1-28.83348843-28.83348844V213.29860499999995c0-10.57116281-8.65116281-19.22232562-19.23348844-19.22232563a19.27813969 19.27813969 0 0 0-19.22232563 19.22232563V471.49395375a67.35627937 67.35627937 0 0 0 67.2893025 67.27813969h568.63255781a67.35627937 67.35627937 0 0 0 67.2893025-67.27813969v-395.44186031a67.35627937 67.35627937 0 0 0-67.27813968-67.27813969zM728.53581406 599.52H557.23162813a67.35627937 67.35627937 0 0 0-67.27813969 67.2893025v9.9906975c0 10.58232562 8.65116281 19.22232562 19.22232562 19.22232562s19.22232562-8.64 19.22232563-19.22232562v-9.9906975a28.8 28.8 0 0 1 28.83348844-28.83348844h171.29302312c10.57116281 0 19.22232562-8.65116281 19.22232563-19.23348844 0-10.57116281-8.65116281-19.22232562-19.22232563-19.22232562zM208.32744219 8.773953750000032h-15.18139594a19.27813969 19.27813969 0 0 0-19.22232562 19.22232563c0 10.57116281 8.65116281 19.22232562 19.22232562 19.22232562h15.18139594a28.8 28.8 0 0 1 28.83348844 28.83348844V238.11348843999997c0 10.57116281 8.65116281 19.22232562 19.23348843 19.22232562 10.57116281 0 19.22232562-8.65116281 19.22232469-19.22232562v-162.061395c-0.18976781-37.10511656-30.18418594-67.27813969-67.28930156-67.27813969zM809.28744219 500.13767437a19.27813969 19.27813969 0 0 0-19.23348844 19.22232563v51.12558094a28.8 28.8 0 0 1-28.83348844 28.84465125H674.3293025a19.27813969 19.27813969 0 0 0-19.22232563 19.22232562c0 10.57116281 8.65116281 19.22232562 19.22232563 19.22232563h86.89116281a67.35627937 67.35627937 0 0 0 67.2893025-67.27813969v-51.13674375c0-10.57116281-8.65116281-19.22232562-19.22232562-19.22232563zM597.99813969 148.141395a19.27813969 19.27813969 0 0 0-19.22232563 19.22232562V371.33023218999995c0 10.58232562 8.65116281 19.23348844 19.22232563 19.23348843s19.22232562-8.65116281 19.22232562-19.23348843v-203.96651156c0-10.57116281-8.65116281-19.22232562-19.22232562-19.22232563zM680.27906937 269.82697686999995c-5.00093062 0-9.80093062 1.93116281-13.6520925 5.58139501l-82.26976781 82.26976781a19.14418594 19.14418594 0 0 0 0 27.11441812 19.14418594 19.14418594 0 0 0 27.10325625 0l82.4706975-82.26976687a19.14418594 19.14418594 0 0 0-13.65209344-32.69581407zM515.52744219 269.82697686999995c-5.00093062 0-9.80093062 1.93116281-13.65209344 5.58139501a19.14418594 19.14418594 0 0 0 0 27.10325625l82.4706975 82.47069749a19.14418594 19.14418594 0 0 0 27.11441906 0 19.14418594 19.14418594 0 0 0 0-27.10325625L528.98976781 275.40837188c-3.661395-3.85116281-8.461395-5.581395-13.46232562-5.58139501z" horiz-adv-x="1024" />
<glyph glyph-name="upload-file" unicode="&#59181;" d="M872.904186 8.773954H144.87814a67.356279 67.356279 0 0 0-67.27814 67.278139V686.411163A67.356279 67.356279 0 0 0 144.87814 753.700465h315.851162a67.356279 67.356279 0 0 0 67.289303-67.289302c0-10.571163-8.651163-19.222326-19.233488-19.222326a19.27814 19.27814 0 0 0-19.222326 19.222326 28.8 28.8 0 0 1-28.833488 28.844651H144.889303a28.8 28.8 0 0 1-28.833489-28.844651v-610.35907a28.8 28.8 0 0 1 28.833489-28.833488H872.915349c10.571163 0 19.222326-8.651163 19.222325-19.222326s-8.461395-19.222326-19.222325-19.222325zM872.904186 8.773954a19.27814 19.27814 0 0 0-19.222326 19.222325c0 10.571163 8.651163 19.222326 19.222326 19.222326a28.8 28.8 0 0 1 28.833488 28.833488V471.493954a28.8 28.8 0 0 1-28.833488 28.833488H304.260465a28.8 28.8 0 0 1-28.833488-28.833488V213.298605c0-10.571163-8.651163-19.222326-19.233489-19.222326a19.27814 19.27814 0 0 0-19.222325 19.222326V471.493954a67.356279 67.356279 0 0 0 67.289302 67.278139h568.632558a67.356279 67.356279 0 0 0 67.289303-67.278139v-395.441861a67.356279 67.356279 0 0 0-67.27814-67.278139zM728.535814 599.52H557.231628a67.356279 67.356279 0 0 0-67.27814 67.289303v9.990697c0 10.582326 8.651163 19.222326 19.222326 19.222326s19.222326-8.64 19.222326-19.222326v-9.990697a28.8 28.8 0 0 1 28.833488-28.833489h171.293023c10.571163 0 19.222326-8.651163 19.222326-19.233488 0-10.571163-8.651163-19.222326-19.222326-19.222326zM208.327442 8.773954h-15.181396a19.27814 19.27814 0 0 0-19.222325 19.222325c0 10.571163 8.651163 19.222326 19.222325 19.222326h15.181396a28.8 28.8 0 0 1 28.833489 28.833488V238.113488c0 10.571163 8.651163 19.222326 19.233488 19.222326 10.571163 0 19.222326-8.651163 19.222325-19.222326v-162.061395c-0.189768-37.105117-30.184186-67.27814-67.289302-67.278139zM809.287442 500.137674a19.27814 19.27814 0 0 0-19.233488 19.222326v51.125581a28.8 28.8 0 0 1-28.833489 28.844651H674.329303a19.27814 19.27814 0 0 0-19.222326 19.222326c0 10.571163 8.651163 19.222326 19.222326 19.222325h86.891162a67.356279 67.356279 0 0 0 67.289303-67.278139v-51.136744c0-10.571163-8.651163-19.222326-19.222326-19.222326zM597.99814 148.141395a19.27814 19.27814 0 0 0-19.222326 19.222326V371.330232c0 10.582326 8.651163 19.233488 19.222326 19.233489s19.222326-8.651163 19.222325-19.233489v-203.966511c0-10.571163-8.651163-19.222326-19.222325-19.222326zM680.279069 269.826977c-5.000931 0-9.800931 1.931163-13.652092 5.581395l-82.269768 82.269768a19.144186 19.144186 0 0 0 0 27.114418 19.144186 19.144186 0 0 0 27.103256 0l82.470698-82.269767a19.144186 19.144186 0 0 0-13.652094-32.695814zM515.527442 269.826977c-5.000931 0-9.800931 1.931163-13.652093 5.581395a19.144186 19.144186 0 0 0 0 27.103256l82.470697 82.470698a19.144186 19.144186 0 0 0 27.114419 0 19.144186 19.144186 0 0 0 0-27.103257L528.989768 275.408372c-3.661395-3.851163-8.461395-5.581395-13.462326-5.581395z" horiz-adv-x="1024" />
<glyph glyph-name="panel" unicode="&#59294;" d="M827.562667 827.733333H196.437333C125.7472 827.733333 68.266667 762.504533 68.266667 682.3936v-596.821333C68.266667 5.5296 125.713067-59.733333 196.437333-59.733333h631.125334C898.286933-59.733333 955.733333 5.495467 955.733333 85.6064V682.3936C955.733333 762.4704 898.286933 827.733333 827.562667 827.733333z m54.203733-741.922133c0-39.492267-27.648-71.5776-61.678933-71.5776H203.912533c-34.030933 0-61.678933 32.085333-61.678933 71.5776V682.1888c0 39.492267 27.648 71.5776 61.678933 71.5776h616.174934c34.030933 0 61.678933-32.085333 61.678933-71.5776v-596.3776z" horiz-adv-x="1024" />
@ -98,9 +102,9 @@
<glyph glyph-name="arrow-top1" unicode="&#59192;" d="M512 507.099429l-370.761143-370.761143a39.862857 39.862857 0 1 0-56.393143 56.466285L483.766857 591.7257139999999a39.862857 39.862857 0 0 0 56.466286 0l398.921143-398.921143a39.789714 39.789714 0 0 0 0-56.466285 39.862857 39.862857 0 0 0-56.393143 0L512 507.172571z" horiz-adv-x="1024" />
<glyph glyph-name="arrow-left1" unicode="&#59199;" d="M368.932571 364.03200000000004l370.761143-370.761143a39.862857 39.862857 0 1 0-56.393143-56.32L284.306286 335.798857a39.862857 39.862857 0 0 0 0 56.32l398.994285 398.994286a39.789714 39.789714 0 0 0 56.32 0 39.862857 39.862857 0 0 0 0-56.32l-370.688-370.834286z" horiz-adv-x="1024" />
<glyph glyph-name="arrow-left" unicode="&#59199;" d="M368.932571 364.032l370.761143-370.761143a39.862857 39.862857 0 1 0-56.393143-56.32L284.306286 335.798857a39.862857 39.862857 0 0 0 0 56.32l398.994285 398.994286a39.789714 39.789714 0 0 0 56.32 0 39.862857 39.862857 0 0 0 0-56.32l-370.688-370.834286z" horiz-adv-x="1024" />
<glyph glyph-name="arrow-right1" unicode="&#59191;" d="M655.067429 364.03200000000004l-370.761143-370.761143a39.862857 39.862857 0 1 1 56.393143-56.32l398.994285 398.921143a39.862857 39.862857 0 0 1 0 56.32L340.699429 791.259429a39.789714 39.789714 0 0 1-56.32 0 39.862857 39.862857 0 0 1 0-56.32l370.688-370.834286z" horiz-adv-x="1024" />
<glyph glyph-name="arrow-right" unicode="&#59191;" d="M655.067429 364.032l-370.761143-370.761143a39.862857 39.862857 0 1 1 56.393143-56.32l398.994285 398.921143a39.862857 39.862857 0 0 1 0 56.32L340.699429 791.259429a39.789714 39.789714 0 0 1-56.32 0 39.862857 39.862857 0 0 1 0-56.32l370.688-370.834286z" horiz-adv-x="1024" />
<glyph glyph-name="add" unicode="&#59168;" d="M473.6-38.39999999999998a38.4 38.4 0 1 1 76.8 0v384h384a38.4 38.4 0 1 1 0 76.8h-384v384a38.4 38.4 0 0 1-76.8 0v-384h-384a38.4 38.4 0 0 1 0-76.8h384v-384z" horiz-adv-x="1024" />
@ -294,8 +298,6 @@
<glyph glyph-name="bjdz-guanbi" unicode="&#59092;" d="M512-128A512 512 0 1 0 512 896a512 512 0 0 0 0-1024zM305.92 525.632L447.552 384l-141.504-141.632a45.568 45.568 0 1 1 64.384-64.384L512 319.488l141.632-141.504a45.568 45.568 0 0 1 64.384 64.384L576.512 384l141.504 141.632a45.568 45.568 0 1 1-64.384 64.384L512 448.512 370.368 590.016a45.568 45.568 0 0 1-64.384-64.384z" horiz-adv-x="1024" />
<glyph glyph-name="arrow-left" unicode="&#59089;" d="M732.672 739.6351999999999L361.472 405.6576a29.0816 29.0816 0 0 1 0-43.264l371.2-334.0288A36.352 36.352 0 0 0 684.288-25.600000000000023l-371.2512 333.9776a101.632 101.632 0 0 0 0 151.2448L684.1856 793.6a36.2496 36.2496 0 1 0 48.5376-53.9648z" horiz-adv-x="1024" />
<glyph glyph-name="scan" unicode="&#59087;" d="M801.28571416-66h-128.57142832v64.28571416h128.57142832a96.42857168 96.42857168 0 0 1 96.42857168 96.42857168v128.57142832h64.28571416v-128.57142832a160.71428584 160.71428584 0 0 0-160.71428584-160.71428584z m128.57142832 417.85714248H94.14285752a32.14285752 32.14285752 0 0 0 0 64.28571504h835.71428496a32.14285752 32.14285752 0 0 0 0-64.28571504z m-32.14285664 321.42857168A96.42857168 96.42857168 0 0 1 801.28571416 769.71428584h-128.57142832V834h128.57142832A160.71428584 160.71428584 0 0 0 962 673.28571416v-128.57142832h-64.28571416v128.57142832z m-771.42857168 0v-128.57142832H62v128.57142832A160.71428584 160.71428584 0 0 0 222.71428584 834h128.57142832v-64.28571416h-128.57142832A96.42857168 96.42857168 0 0 1 126.28571416 673.28571416z m0-578.57142832A96.42857168 96.42857168 0 0 1 222.71428584-1.7142858400000023h128.57142832v-64.28571416h-128.57142832A160.71428584 160.71428584 0 0 0 62 94.71428584v128.57142832h64.28571416v-128.57142832z" horiz-adv-x="1024" />
<glyph glyph-name="wodeqianbao-eye" unicode="&#59088;" d="M512 709.818182c257.070545 0 465.454545-140.846545 465.454545-314.554182s-208.384-314.554182-465.454545-314.554182S46.545455 221.55636400000003 46.545455 395.264 254.929455 709.818182 512 709.818182z m0-116.084364a198.656 198.656 0 0 1-198.469818-198.469818 198.656 198.656 0 0 1 198.423273-198.469818 198.656 198.656 0 0 1 198.469818 198.469818A198.656 198.656 0 0 1 512 593.7338179999999z m0-57.669818a140.939636 140.939636 0 0 0 140.8-140.8 140.939636 140.939636 0 0 0-140.846545-140.8 140.986182 140.986182 0 0 0-140.8 140.8A140.986182 140.986182 0 0 0 512 536.0640000000001z" horiz-adv-x="1024" />
@ -332,8 +334,6 @@
<glyph glyph-name="qiandao-yixuan" unicode="&#59073;" d="M512 896c341.333333 0 512-170.666667 512-512s-170.666667-512-512-512S0 42.666667 0 384 170.666667 896 512 896zM273.408 355.669333a30.464 30.464 0 0 1 0-43.093333l136.832-136.832a32 32 0 0 1 45.269333 0l299.477334 299.52a32 32 0 0 1-45.226667 45.226667l-267.733333-267.690667a16 16 0 0 0-22.613334 0l-102.912 102.869333a30.464 30.464 0 0 1-43.093333 0z" horiz-adv-x="1024" />
<glyph glyph-name="arrow-right" unicode="&#59074;" d="M388.266667 9.813332999999943a43.690667 43.690667 0 0 1 27.136 9.472L834.730667 356.69333300000005a43.264 43.264 0 0 1 0 67.413334L417.28 759.466667a43.178667 43.178667 0 0 1-54.101333-67.413334l375.552-301.738666-377.429334-303.616a43.178667 43.178667 0 0 1 27.136-76.885334z" horiz-adv-x="1109" />
<glyph glyph-name="zhibo-shixiao" unicode="&#59067;" d="M512 896a512 512 0 1 0 0-1024A512 512 0 0 0 512 896z m329.301333-268.373333L280.064 46.421333A409.6 409.6 0 0 1 841.386667 627.626667zM512 793.6a409.6 409.6 0 0 1-319.488-665.856l564.48 584.533333A407.808 407.808 0 0 1 512 793.6z" horiz-adv-x="1024" />
<glyph glyph-name="cart-dec" unicode="&#59066;" d="M512 896c282.7776 0 512-229.2224 512-512s-229.2224-512-512-512S0 101.2224 0 384 229.2224 896 512 896z m0-51.2a460.8 460.8 0 1 1 0-921.6 460.8 460.8 0 0 1 0 921.6zM288.3584 416.1536v-63.0784h447.2832V416.1536z" horiz-adv-x="1024" />
@ -342,7 +342,7 @@
<glyph glyph-name="arrow-top" unicode="&#59064;" d="M195.447467 177.76639999999998c0 9.557333 3.208533 19.114667 9.557333 27.170133l337.988267 420.181334a43.349333 43.349333 0 0 0 67.584 0l336.145066-418.474667a43.281067 43.281067 0 0 0-67.515733-54.203733L576.853333 528.8618670000001 272.520533 150.52800000000002a43.281067 43.281067 0 0 0-77.073066 27.170133z" horiz-adv-x="1092" />
<glyph glyph-name="categroy-more" unicode="&#59063;" d="M0 486.4h1024v-102.4H0z m0-512h409.6v-102.4H0z m0 921.6h1024v-102.4H0z m524.3904-729.6a44.6464 44.6464 0 0 1 0-61.8496l213.6064-219.7504a41.6768 41.6768 0 0 1 60.0064 0L1011.5072 104.44799999999998a44.6464 44.6464 0 0 1 0 61.8496 41.5744 41.5744 0 0 1-60.0064 0L768-22.52800000000002 584.4992 166.39999999999998a41.6768 41.6768 0 0 1-60.1088 0z" horiz-adv-x="1024" />
<glyph glyph-name="category-more" unicode="&#59063;" d="M0 486.4h1024v-102.4H0z m0-512h409.6v-102.4H0z m0 921.6h1024v-102.4H0z m524.3904-729.6a44.6464 44.6464 0 0 1 0-61.8496l213.6064-219.7504a41.6768 41.6768 0 0 1 60.0064 0L1011.5072 104.448a44.6464 44.6464 0 0 1 0 61.8496 41.5744 41.5744 0 0 1-60.0064 0L768-22.528 584.4992 166.4a41.6768 41.6768 0 0 1-60.1088 0z" horiz-adv-x="1024" />
<glyph glyph-name="zhibo-time" unicode="&#59059;" d="M512 896a512 512 0 1 0 0-1024A512 512 0 0 0 512 896z m0-93.110857a418.889143 418.889143 0 1 1 0-837.778286A418.889143 418.889143 0 0 1 512 802.889143z m23.405714-185.929143a23.259429 23.259429 0 0 0 23.332572-23.259429v-242.102857l126.464-85.284571c9.289143-6.290286 12.8-18.285714 8.265143-28.598857l-2.048-3.657143-26.038858-38.619429a23.259429 23.259429 0 0 0-28.525714-8.265143l-3.730286 1.974858-154.331428 104.155428a23.625143 23.625143 0 0 0-1.024 0.731429 23.259429 23.259429 0 0 0-12.068572 20.48V593.627429c0 12.873143 10.386286 23.332571 23.259429 23.332571h46.518857v-0.073143z" horiz-adv-x="1024" />

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 176 KiB

After

Width:  |  Height:  |  Size: 176 KiB

BIN
src/assets/icons/iconfont.ttf
View File

Binary file not shown.

BIN
src/assets/icons/iconfont.woff
View File

Binary file not shown.

BIN
src/assets/icons/iconfont.woff2
View File

Binary file not shown.

2
src/components/base/icon/index.vue
View File

@ -1,5 +1,5 @@
<template>
<i class="iconfont" :class="className" :style="'font-size:' + size + 'px;' + (props.color.indexOf('#') != -1 || props.color.indexOf('rgba') != -1 ? 'color:' + props.color + ';' : '') + styles" @click="onClick">
<i class="iconfont" :class="className" :style="'font-size:' + size + 'px;' + (props.color && (props.color.indexOf('#') != -1 || props.color.indexOf('rgba') != -1) ? 'color:' + props.color + ';' : '') + styles" @click="onClick">
<slot></slot>
</i>
</template>

4
src/components/common/custom-module/model-icon/model-icon-style.vue
View File

@ -39,9 +39,9 @@
<el-form-item label="旋转角度">
<slider v-model="form.icon_rotate" :max="1000"></slider>
</el-form-item>
<el-form-item label="是否置底">
<!-- <el-form-item label="是否置底">
<el-switch v-model="form.bottom_up" active-value="1" inactive-value="0" />
</el-form-item>
</el-form-item> -->
</card-container>
<div class="bg-f5 divider-line" />
<card-container>

4
src/components/common/custom-module/model-image/model-image-style.vue
View File

@ -26,9 +26,9 @@
<el-form-item label="旋转角度">
<slider v-model="form.img_rotate" :max="1000"></slider>
</el-form-item>
<el-form-item label="是否置底">
<!-- <el-form-item label="是否置底">
<el-switch v-model="form.bottom_up" active-value="1" inactive-value="0" />
</el-form-item>
</el-form-item> -->
</card-container>
<div class="bg-f5 divider-line" />
<card-container class="h">

4
src/components/common/custom-module/model-lines/model-lines-style.vue
View File

@ -31,9 +31,9 @@
<el-form-item label="线条颜色">
<color-picker v-model="form.line_color"></color-picker>
</el-form-item>
<el-form-item label="是否置底">
<!-- <el-form-item label="是否置底">
<el-switch v-model="form.bottom_up" active-value="1" inactive-value="0" />
</el-form-item>
</el-form-item> -->
</card-container>
</el-form>
</div>

4
src/components/common/custom-module/model-panel/model-panel-style.vue
View File

@ -20,9 +20,9 @@
<el-form-item label="旋转角度">
<slider v-model="form.panel_rotate" :max="1000"></slider>
</el-form-item>
<el-form-item label="是否置底">
<!-- <el-form-item label="是否置底">
<el-switch v-model="form.bottom_up" active-value="1" inactive-value="0" />
</el-form-item>
</el-form-item> -->
<el-form-item label="容器宽度">
<slider v-model="form.com_width" :max="1000"></slider>
</el-form-item>

1
src/components/common/custom-module/model-text/index.vue
View File

@ -51,7 +51,6 @@ const text_title = computed(() => {
});
const text_style = computed(() => {
console.log(form.text_size * props.scale);
let style = `font-size: ${ form.text_size * props.scale }px;line-height: ${ form.text_size * props.scale}px;color: ${ form.text_color }; text-align: ${ form.text_location }; transform: rotate(${form.text_rotate}deg);text-decoration: ${ form.text_option };${ padding_computer(form.text_padding, props.scale) };`;
if (form.text_weight == 'italic') {
style += `font-style: italic`;

4
src/components/common/custom-module/model-text/model-text-style.vue
View File

@ -59,9 +59,9 @@
<el-form-item label="旋转角度">
<slider v-model="form.text_rotate" :max="1000"></slider>
</el-form-item>
<el-form-item label="是否置底">
<!-- <el-form-item label="是否置底">
<el-switch v-model="form.bottom_up" active-value="1" inactive-value="0" />
</el-form-item>
</el-form-item> -->
</card-container>
<div class="bg-f5 divider-line" />
<card-container>

2
src/components/model-article-list/index.vue
View File

@ -179,7 +179,7 @@ watch(
() => data_list_computer.value,
(new_value, old_value) => {
// 使用JSON.stringify()进行判断 新值和旧值是否一样 不一样就重新获取数据
if (JSON.stringify(new_value) !== JSON.stringify(old_value)) {
if ((JSON.stringify(new_value) !== JSON.stringify(old_value)) || props.isCommonStyle) {
if (new_value.data_type == '1') {
get_auto_data_list();
} else {

10
src/components/model-custom/components/index-default.ts
View File

@ -36,7 +36,7 @@ export const text_com_data = {
border_size: 1,
direction: '90deg',
color_list: [{ color: '', color_percentage: undefined }],
bottom_up: '0',
z_index: 0
}
// 图片的默认值
export const img_com_data = {
@ -68,7 +68,7 @@ export const img_com_data = {
radius_bottom_right: 0,
},
border_size: 1,
bottom_up: '0',
z_index: 0
}
// 线条的默认值
export const line_com_data = {
@ -80,7 +80,7 @@ export const line_com_data = {
line_width: 306,
line_size: 1,
line_color: '#000',
bottom_up: '1',
z_index: 0,
}
// icon的默认值
@ -120,7 +120,7 @@ export const icon_com_data = {
border_size: 1,
direction: '90deg',
color_list: [{ color: '', color_percentage: undefined }],
bottom_up: '0',
z_index: 0
}
// 面板的默认值
@ -144,7 +144,7 @@ export const panel_com_data = {
border_size: 1,
direction: '90deg',
color_list: [{ color: '#fff', color_percentage: undefined }],
bottom_up: '0',
z_index: 0
}
// 判断两个矩形是否有交集或者被包裹

134
src/components/model-custom/components/index.scss
View File

@ -53,8 +53,54 @@
.vdr-handle.vdr-handle-bl,
.vdr-handle.vdr-handle-bm,
.vdr-handle.vdr-handle-br {
width: 5px;
height: 5px;
display: none !important;
}
.vdr-handle-tl {
top: -3px;
left: -3px;
cursor: nw-resize;
}
.vdr-handle-tm {
top: -3px;
left: 50%;
margin-left: -3px;
cursor: n-resize;
}
.vdr-handle-tr {
top: -3px;
right: -3px;
cursor: ne-resize;
}
.vdr-handle-ml {
top: 50%;
margin-top: -3px;
left: -3px;
cursor: w-resize;
}
.vdr-handle-mr {
top: 50%;
margin-top: -3px;
right: -3px;
cursor: e-resize;
}
.vdr-handle-bl {
bottom: -3px;
left: -3px;
cursor: sw-resize;
}
.vdr-handle-bm {
bottom: -3px;
left: 50%;
margin-left: -3px;
cursor: s-resize;
}
.vdr-handle-br {
bottom: -3px;
right: -3px;
cursor: se-resize;
}
}
:deep(.plug-in-show-tabs.vdr-container) {
.vdr-handle.vdr-handle-tl,
@ -85,33 +131,9 @@
.plug-in-border {
cursor: pointer;
position: relative;
box-shadow: 0px 0 0px 0.2rem $cr-main;
box-shadow: 0rem 0 0rem 0.1rem $cr-main;
border: 0;
}
.plug-in-right {
cursor: default;
background: $cr-main;
position: absolute;
right: -5rem;
display: flex;
flex-direction: column;
gap: 2rem;
padding: 2rem 1.2rem;
color: #fff;
border-radius: 0.4rem;
z-index: 2;
& > i {
cursor: pointer;
}
& > i.disabled {
color: #5db2ff;
cursor: not-allowed;
}
& .icon-arrow-top,
& .icon-arrow-bottom {
height: 0.9rem;
}
}
.area-box {
position: absolute;
background: rgba(42, 148, 255, 0.25);
@ -147,10 +169,10 @@
}
.drag-btn {
position: absolute;
width: 7px;
height: 7px;
width: 0.7rem;
height: 0.7rem;
background: #f0f0f0;
border: 1px solid #333;
border: 0.1rem solid #333;
z-index: 1;
}
.drag-tl {
@ -237,10 +259,10 @@
position: absolute;
background: rgba(41, 128, 185, 0.3);
border: 1px dashed #34495e;
width: 0px;
height: 0px;
left: 0px;
top: 0px;
width: 0rem;
height: 0rem;
left: 0rem;
top: 0rem;
z-index: 6;
display: none;
}
@ -248,4 +270,52 @@
.clear-selection {
cursor: pointer;
color: $cr-main;
}
.drawer-container {
position: relative;
height: 100%;
overflow: hidden;
.drawer-custom-drag-bg {
background: #f2f8ff;
}
.drawer-drag-area {
height: 100%;
overflow-y: auto;
}
.drawer-drag {
height: 4rem;
cursor: move;
}
.drawer-drag:hover {
background: #f2f8ff;
.draggable-icon {
opacity: 1 !important;
}
}
.draggable-icon {
display: flex;
align-items: center;
gap: 1rem;
right: 1rem;
color: #8a8a8a;
cursor: pointer;
}
}
.break{
word-wrap: break-word;
word-break:break-all;
}
.plug-in-show-component-line::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 0.1rem dashed #999;
border-radius: inherit;
pointer-events: none; /* 防止影子部分阻止鼠标事件 */
}

1
src/components/model-custom/components/index.ts
View File

@ -14,6 +14,7 @@ interface diy_content extends diy{
com_width: number,
com_height: number,
name: string,
new_name: string,
show_tabs: string,
is_enable: string,
src: string,

292
src/components/model-custom/components/index.vue
View File

@ -20,13 +20,38 @@
<slider v-model="center_height" :max="1000">组件高度</slider>
</card-container>
<card-container class="h selected">
<div class="mb-12 flex-row align-c jc-sb">已选组件<span class="clear-selection" @click="cancel">清除选中</span></div>
<div class="assembly">
<div v-if="!isEmpty(diy_data)" class="flex-row flex-wrap gap-10">
<div v-for="(item, index) in diy_data" :key="index" class="item flex jc-sb align-c size-14 cr-3" :class="{ 'item-active': item.show_tabs == '1' }" @click="on_choose(index, item.show_tabs)">{{ item.name }}<icon name="close" color="3" size="10" class="c-pointer" @click="del(index)"></icon></div>
<div class="flex-col gap-10 drawer-container">
<div class="flex-row align-c jc-sb">已选组件
<div class="flex-row align-c gap-10">
<span class="clear-selection" @click="show_computer_line">{{ !is_show_component_line ? '显示' : '关闭' }}参考线</span>
<span class="clear-selection" @click="cancel">清除选中</span>
</div>
</div>
<div v-else class="w h flex jc-c align-c">
<no-data></no-data>
<div ref="left_scrollTop" class="drawer-drag-area">
<VueDraggable v-model="diy_data" :animation="500" target=".sort-target" :scroll="true" @sort="on_sort">
<TransitionGroup type="transition" tag="ul" name="fade" class="sort-target flex-col h">
<template v-if="!isEmpty(diy_data)">
<li v-for="(item, index) in diy_data" :key="index" :class="['flex-row gap-y-8 re align-c drawer-drag', { 'drawer-custom-drag-bg': item.show_tabs == '1' }]" @click="on_choose(index, item.show_tabs)" @dblclick="double_click(index)">
<el-icon class="iconfont icon-drag size-16 cr-d" />
<div class="text-line-1 flex align-c" style="width: 70%;">
<template v-if="edit_index == index">
<el-input v-model="item.new_name" placeholder="请输入组件别名" size="small" clearable type="textarea" class="flex-1 do-not-trigger" :rows="1" />
</template>
<template v-else>
<span class="size-12 cr-6 break">{{ !isEmpty(item.new_name) ? item.new_name : item.name }}</span>
</template>
</div>
<div class="abs draggable-icon" :style="item.show_tabs == '1' ? 'opacity: 1;' : 'opacity: 0.5;'">
<el-icon class="iconfont icon-commodity-edit size-16 cr-primary do-not-trigger two-click" @click="on_edit(index)" />
<el-icon class="iconfont icon-close-b size-16" @click.stop="del(index)" />
</div>
</li>
</template>
<div v-else class="w h flex jc-c align-c">
<no-data></no-data>
</div>
</TransitionGroup>
</VueDraggable>
</div>
</div>
</card-container>
@ -34,19 +59,16 @@
<!-- 视图渲染 -->
<div class="main">
<div class="model-content">
<right-side-operation v-if="typeof select_index === 'number' && !isNaN(select_index)" v-model="select_index" @del="del" @copy="copy" @previous_layer="previous_layer" @underlying_layer="underlying_layer" @top_up="top_up" @bottom_up="bottom_up"></right-side-operation>
<!-- 拖拽区 -->
<div class="model-drag">
<div class="model-wall">
<div ref="imgBoxRef" class="drag-area re dropzone" @dragover.prevent @dragenter.prevent @drop="drop">
<div class="w h" @mousedown.prevent="start_drag" @mousemove.prevent="move_drag" @mouseup.prevent="end_drag">
<DraggableContainer v-if="draggable_container" :reference-line-visible="true" :disabled="false" reference-line-color="#ddd" @selectstart.prevent @contextmenu.prevent @dragstart.prevent>
<DraggableContainer v-if="draggable_container" style="z-index:0" :reference-line-visible="true" :disabled="false" reference-line-color="#ddd" @selectstart.prevent @contextmenu.prevent @dragstart.prevent>
<!-- @mouseover="on_choose(index)" -->
<Vue3DraggableResizable v-for="(item, index) in diy_data" :key="item.id" v-model:w="item.com_data.com_width" v-model:h="item.com_data.com_height" :min-w="0" :min-h="0" :class="{ 'plug-in-show-tabs': item.show_tabs == '1', 'vdr-handle-z-index': item.com_data.bottom_up == '1'}" :init-w="item.com_data.com_width" :init-h="item.com_data.com_height" :x="item.location.x" :y="item.location.y" :parent="true" :draggable="is_draggable" @mousedown.stop="on_choose(index, item.show_tabs)" @click.stop="on_choose(index, item.show_tabs)" @drag-end="dragEndHandle($event, index)" @resizing="resizingHandle($event, item.key, index)" @resize-end="resizingHandle($event, item.key, index)">
<div v-if="item.show_tabs == '1'" class="plug-in-right" chosenClass="close">
<el-icon class="iconfont icon-del" @click.stop="del(index)" />
<el-icon class="iconfont icon-copy" @click.stop="copy(index)" />
</div>
<div :class="['main-content', { 'plug-in-border': item.show_tabs == '1' }]" :style="{ 'z-index': item.com_data.bottom_up == '1' ? 0 : 1 }">
<Vue3DraggableResizable v-for="(item, index) in diy_data" :key="item.id" v-model:w="item.com_data.com_width" v-model:h="item.com_data.com_height" :min-w="0" :min-h="0" :class="{'plug-in-show-component-line': is_show_component_line, 'plug-in-show-tabs': item.show_tabs == '1', 'vdr-handle-z-index': item.com_data.bottom_up == '1' }" :style="{ 'z-index': item.com_data.z_index }" :init-w="item.com_data.com_width" :init-h="item.com_data.com_height" :x="item.location.x" :y="item.location.y" :parent="true" :draggable="is_draggable" @mousedown.stop="on_choose(index, item.show_tabs)" @click.stop="on_choose(index, item.show_tabs)" @drag-end="dragEndHandle($event, index)" @resizing="resizingHandle($event, item.key, index)" @resize-end="resizingHandle($event, item.key, index)">
<div :class="['main-content', { 'plug-in-border': item.show_tabs == '1' }]">
<template v-if="item.key == 'text'">
<model-text :key="item.id" :value="item.com_data" :source-list="props.sourceList"></model-text>
</template>
@ -89,6 +111,7 @@
import { cloneDeep, isEmpty } from 'lodash';
import { get_math } from '@/utils';
import { text_com_data, img_com_data, line_com_data, icon_com_data, panel_com_data, isRectangleIntersecting } from "./index-default";
import { SortableEvent, VueDraggable } from 'vue-draggable-plus';
// 删除
const app = getCurrentInstance();
//#region 传递参数和传出数据的处理
@ -109,26 +132,31 @@ const components = reactive([
{
key: 'text',
name: '文本',
new_name: '',
com_data: text_com_data
},
{
key: 'img',
name: '图片',
new_name: '',
com_data: img_com_data,
},
{
key: 'auxiliary-line',
name: '线条',
new_name: '',
com_data: line_com_data,
},
{
key: 'icon',
name: '图标',
new_name: '',
com_data: icon_com_data,
},
{
key: 'panel',
name: '面板',
new_name: '',
com_data: panel_com_data,
},
],
@ -139,6 +167,23 @@ const url_computer = (name: string) => {
return new_url;
};
//#endregion
//#region 组件边线相关
const is_show_component_line = ref(false);
const show_computer_line = () => {
is_show_component_line.value = !is_show_component_line.value;
// set_show_tabs(0);
cancel();
};
//#endregion
//#region 左侧处理逻辑
const select_index = ref<null | number>(null);
// 任何行动都会触发
const on_sort = (item: SortableEvent) => {
let index = item?.newIndex || 0;
// 设置对应的位置为显示
set_show_tabs(index);
};
//#endregion
//#region 中间区域的处理逻辑
const diy_data = toRef(props.list);
@ -149,55 +194,188 @@ const diy_data = toRef(props.list);
// on_choose(0, false);
// }
// });
onMounted(() => {
// 监听点击事件
document.addEventListener('click', outerClick);
});
onUnmounted(() => {
// 移除监听事件
document.removeEventListener('click', outerClick);
});
const edit_index = ref(-1);
const on_edit = (index: number) => {
if (edit_index.value === index) {
edit_close_processing(index);
edit_index.value = -1;
} else {
edit_index.value = index;
edit_processing(index);
}
};
// 判断点击的是否是可以点击的区域，其他区域隐藏掉编辑属性
const outerClick = (e: any) => {
if (!e.target.className.includes('do-not-trigger') && !e.target.parentNode.className.includes('do-not-trigger')) {
edit_close_processing(edit_index.value);
edit_index.value = -1;
}
};
const double_click = (index: number) => {
edit_index.value = index;
edit_processing(index);
};
// 编辑时的数据处理
const edit_processing = (index: number) => {
const list = diy_data.value[index];
if (!isEmpty(list) && isEmpty(list.new_name)) {
list.new_name = list.name;
}
};
//编辑关闭前的处理
const edit_close_processing = (index: number) => {
const list = diy_data.value[index];
if (!isEmpty(list) && !isEmpty(list.new_name) && list.new_name === list.name) {
list.new_name = '';
}
};
// 复制
const copy = (index: number) => {
// 获取当前数据, 复制的时候id更换一下
const new_data = {
...cloneDeep(get_diy_index_data(index)),
id: get_math(),
};
// 在当前位置下插入数据
diy_data.value.splice(index, 0, new_data);
set_show_tabs(index + 1);
const copy = (index: null | number) => {
if (typeof index === 'number' && !isNaN(index)) {
// 获取当前数据, 复制的时候id更换一下
const new_data = {
...cloneDeep(get_diy_index_data(index)),
id: get_math(),
};
// 在当前位置下插入数据
diy_data.value.splice(index, 0, new_data);
set_show_tabs(index + 1);
}
};
// 删除
const del = (index: number) => {
app?.appContext.config.globalProperties.$common.message_box('删除后不可恢复，确定继续吗?', 'warning').then(() => {
ElMessage({
type: 'success',
message: '删除成功!',
});
// 调用删除接口，然后，更新数据
diy_data.value.splice(index, 1);
if (diy_data.value.length > 0) {
let new_index: number = index;
// 删除的时候如果大于0，则显示上边的数据
if (index > 0) {
new_index = new_index - 1;
const del = (index: null | number) => {
if (typeof index === 'number' && !isNaN(index)) {
app?.appContext.config.globalProperties.$common.message_box('删除后不可恢复，确定继续吗?', 'warning').then(() => {
ElMessage({
type: 'success',
message: '删除成功!',
});
const show_tabs_index = diy_data.value.findIndex((item: any) => item.show_tabs == '1');
// 删除的是当前的这个数据
if (show_tabs_index == index) {
// 调用删除接口，然后，更新数据
diy_data.value.splice(index, 1);
if (diy_data.value.length > 0) {
let new_index: number = index;
// 删除的时候如果大于0，则显示上边的数据
if (index > 0) {
new_index = new_index - 1;
}
set_show_tabs(new_index);
} else {
emits('rightUpdate', {});
}
} else {
diy_data.value.splice(index, 1);
}
set_show_tabs(new_index);
} else {
emits('rightUpdate', {});
}
});
});
}
};
//前置一层 + 1
const previous_layer = (index: number) => {
if (diy_data.value.length > 0) {
const old_z_index = cloneDeep(diy_data.value[index].com_data.z_index);
// 数据排序
const list = cloneDeep(diy_data.value).sort((a, b) => a.com_data.z_index - b.com_data.z_index);
// 找到当前元素的索引
const regular_index = list.findIndex(item => item.com_data.z_index == old_z_index);
if (regular_index + 1 <= diy_data.value.length - 1) {
// 取出上一个的值
const new_z_index = list[regular_index + 1].com_data.z_index;
// 替换原始数组中的值
const new_regular_index_1 = diy_data.value.findIndex(item => item.com_data.z_index == old_z_index);
const new_regular_index_2 = diy_data.value.findIndex(item => item.com_data.z_index == new_z_index);
// 数据互换
diy_data.value[new_regular_index_1].com_data.z_index = new_z_index;
diy_data.value[new_regular_index_2].com_data.z_index = old_z_index;
}
}
}
//后置一层 - 1
const underlying_layer = (index: number) => {
if (diy_data.value.length > 0) {
const old_z_index = cloneDeep(diy_data.value[index].com_data.z_index);
// 数据排序
const list = cloneDeep(diy_data.value).sort((a, b) => a.com_data.z_index - b.com_data.z_index);
// 找到当前元素的索引
const regular_index = list.findIndex(item => item.com_data.z_index == old_z_index);
if (regular_index - 1 >= 0) {
// 取出上一个的值
const new_z_index = list[regular_index - 1].com_data.z_index;
// 替换原始数组中的值
const new_regular_index_1 = diy_data.value.findIndex(item => item.com_data.z_index == old_z_index);
const new_regular_index_2 = diy_data.value.findIndex(item => item.com_data.z_index == new_z_index);
// 数据互换
diy_data.value[new_regular_index_1].com_data.z_index = new_z_index;
diy_data.value[new_regular_index_2].com_data.z_index = old_z_index;
}
}
}
//组件置顶
const top_up = (index: number) => {
if (!isEmpty(diy_data.value[index])) {
const new_z_index = top_z_index.value + 1;
diy_data.value[index].com_data.z_index = new_z_index;
top_z_index.value = new_z_index;
}
}
//组件置底
const bottom_up = (index: number) => {
if (!isEmpty(diy_data.value[index])) {
const new_z_index = z_index.value - 1;
diy_data.value[index].com_data.z_index = new_z_index;
z_index.value = new_z_index;
}
}
// 获取当前传递过来的index对应的diy_data中的数据
const get_diy_index_data = (index: number) => {
return (<arrayIndex>diy_data.value)[index.toString()];
};
// 设置当前选中的是那个
const set_show_tabs = (index: number) => {
is_show_component_line.value = false;
diy_data.value.forEach((item, for_index) => {
// 先将全部的设置为false,再将当前选中的设置为true
item.show_tabs = '0';
if (for_index == index) {
select_index.value = for_index;
item.show_tabs = '1';
scroll();
emits('rightUpdate', item);
}
});
};
// 左边已选组件的滚动效果
const left_scrollTop = ref<HTMLElement | null>(null);
const left_activeCard = ref<HTMLElement | null>(null);
// 滚动到指定位置
const scroll = () => {
nextTick(() => {
// 左边已选组件的滚动效果
left_activeCard.value = document.querySelector('.drawer-custom-drag-bg');
if (left_activeCard.value) {
// 获取选中内容的位置
const left_scrollY = left_activeCard.value.offsetTop;
if (left_scrollTop.value) {
// 选中的滚动到指定位置
left_scrollTop.value.scrollTo({ top: left_scrollY - 200, behavior: 'smooth' });
}
}
});
};
// 选中和鼠标按下时候的效果
const on_choose = (index: number, show_tabs: string) => {
// 如果已经选中了, 设置为不可再次触发事件
@ -211,6 +389,7 @@ const cancel = () => {
diy_data.value.forEach((item) => {
item.show_tabs = '0';
});
select_index.value = null;
emits('rightUpdate', {});
};
//#endregion
@ -219,14 +398,17 @@ const center_height = defineModel('height', { type: Number, default: 0 });
const drag_area_height = computed(() => center_height.value + 'px');
const draggable_container = ref(true);
let data = reactive<diy_content[]>([]);
// 最低的层级
const z_index = ref(0);
// 最高的层级
const top_z_index = ref(0);
watch(() => center_height.value, () => {
data = diy_data.value;
// 从 DOM 中删除组件
draggable_container.value = false;
nextTick(() => {
// 在 DOM 中添加组件
diy_data.value = data.map((item) => ({
diy_data.value = data.map((item, index) => ({
...item,
show_tabs: '0',
location: {
@ -238,9 +420,27 @@ watch(() => center_height.value, () => {
},
com_data: {
...item.com_data,
z_index: typeof item.com_data.z_index === 'number' && !isNaN(item.com_data.z_index) ? item.com_data.z_index : 0,
com_height: item.com_data.staging_height,
},
}));
if (diy_data.value.length > 0) {
const list = diy_data.value.sort((a, b) => a.com_data.z_index - b.com_data.z_index);
// 将z-index重置为初始效果
let list_z_index = -1;
// 设置默认值
list.forEach((item) => {
if (item.com_data.z_index == 0) {
const new_z_index = list_z_index + 1;
item.com_data.z_index = new_z_index;
list_z_index = new_z_index;
}
});
// 获取更新后的数据
const new_list = list.sort((a, b) => a.com_data.z_index - b.com_data.z_index);
z_index.value = new_list[0].com_data.z_index || 0;
top_z_index.value = new_list[new_list.length - 1].com_data.z_index || 0;
}
// 容器高度变化时，组件不绑定右侧数据
emits('rightUpdate', {});
draggable_container.value = true;
@ -250,6 +450,7 @@ watch(() => center_height.value, () => {
//#region 左侧拖拽过来的处理
let draggedItem = ref<any>({});
const dragStart = (item: any, event: any) => {
const new_z_index = top_z_index.value + 1;
// 初始化拖拽的数据
draggedItem.value = {
name: item.name,
@ -260,8 +461,12 @@ const dragStart = (item: any, event: any) => {
id: get_math(),
key: item.key,
is_hot: '0',
com_data: cloneDeep(item.com_data),
com_data: {
...cloneDeep(item.com_data),
z_index: new_z_index,
},
};
top_z_index.value = new_z_index;
// 拖拽的时候清空热区
hot_list.data = [];
};
@ -387,6 +592,7 @@ const end_drag = (event: MouseEvent) => {
diy_data.value.forEach((item: any) => {
item.show_tabs = '0';
});
select_index.value = null;
emits('rightUpdate', {});
}
rect_start.value = { x: 0, y: 0, width: 0, height: 0 };

88
src/components/model-custom/components/right-side-operation/index.vue Normal file
View File

@ -0,0 +1,88 @@
<template>
<div v-if="typeof index === 'number' && !isNaN(index)" class="acticons">
<div class="plug-in-right" chosenClass="close">
<el-tooltip effect="dark" :show-after="200" :hide-after="200" content="删除组件" placement="right">
<el-icon class="iconfont icon-del" @click.stop="del(index)" />
</el-tooltip>
<el-tooltip effect="dark" :show-after="200" :hide-after="200" content="复制组件" placement="right">
<el-icon class="iconfont icon-copy" @click.stop="copy(index)" />
</el-tooltip>
<el-tooltip effect="dark" :show-after="200" :hide-after="200" content="前置一层" placement="right">
<el-icon class="iconfont icon-arrow-top" @click.stop="previous_layer(index)" />
</el-tooltip>
<el-tooltip effect="dark" :show-after="200" :hide-after="200" content="后置一层" placement="right">
<el-icon class="iconfont icon-arrow-bottom" @click.stop="underlying_layer(index)" />
</el-tooltip>
<el-tooltip effect="dark" :show-after="200" :hide-after="200" content="组件置顶" placement="right">
<el-icon class="iconfont icon-top-up" @click.stop="top_up(index)" />
</el-tooltip>
<el-tooltip effect="dark" :show-after="200" :hide-after="200" content="组件置底" placement="right">
<el-icon class="iconfont icon-bottom-up" @click.stop="bottom_up(index)" />
</el-tooltip>
</div>
</div>
</template>
<script setup lang="ts">
const index = defineModel({ type: Number , default: null });
const emits = defineEmits(['del', 'copy', 'previous_layer', 'underlying_layer', 'top_up', 'bottom_up']);
// 删除
const del = (index: number) => {
emits('del', index)
}
//复制组件
const copy = (index: number) => {
emits('copy', index)
}
//前置一层
const previous_layer = (index: number) => {
emits('previous_layer', index)
}
//后置一层
const underlying_layer = (index: number) => {
emits('underlying_layer', index)
}
//组件置顶
const top_up = (index: number) => {
emits('top_up', index)
}
//组件置底
const bottom_up = (index: number) => {
emits('bottom_up', index)
}
</script>
<style scoped lang="scss">
.acticons {
position: absolute;
left: 50%;
margin-left: 23rem;
top: 50%;
display: flex;
flex-direction: column;
gap: 2rem;
z-index: 1;
transform: translate(-50%, -50%);
}
.plug-in-right {
cursor: default;
background: $cr-main;
display: flex;
flex-direction: column;
gap: 2rem;
padding: 2rem 1.2rem;
color: #fff;
border-radius: 0.4rem;
z-index: 2;
& > i {
cursor: pointer;
}
& > i.disabled {
color: #5db2ff;
cursor: not-allowed;
}
& .icon-arrow-top,
& .icon-arrow-bottom {
height: 0.9rem;
}
}
</style>

2
src/components/model-custom/index.vue
View File

@ -2,7 +2,7 @@
<div ref="container" class="custom-other" :style="style_container">
<div class="w h" :style="style_img_container">
<div class="w h re">
<div v-for="item in form.custom_list" :key="item.id" class="main-content" :style="{'left': percentage_count(item.location.x * scale, div_width) , 'top': percentage_count(item.location.y * scale, form.height), 'width': percentage_count(item.com_data.com_width * scale, div_width), 'height': percentage_count(item.com_data.com_height * scale, form.height)}">
<div v-for="item in form.custom_list" :key="item.id" class="main-content" :style="{'left': percentage_count(item.location.x * scale, div_width) , 'top': percentage_count(item.location.y * scale, form.height), 'width': percentage_count(item.com_data.com_width * scale, div_width), 'height': percentage_count(item.com_data.com_height * scale, form.height), 'z-index': item.com_data.z_index}">
<template v-if="item.key == 'text'">
<model-text :key="item.com_data" :value="item.com_data" :scale="scale" :source-list="form.data_source_content" :is-percentage="true"></model-text>
</template>

15
src/components/model-custom/model-custom-content.vue
View File

@ -105,7 +105,7 @@ onBeforeMount(() => {
});
// 处理显示的图片和传递到下去的数据结构
const model_data_source = ref<data_list[]>([]);
const is_show_more = ref(true);
const is_show_more = ref(false);
const processing_data = (key: string) => {
const list = options.value.filter((item) => item.type == key);
if (list.length > 0) {
@ -159,6 +159,19 @@ const accomplish = () => {
if (!draglist.value) {
return;
} else {
// 规整数据逻辑
const list = draglist.value.diy_data.sort((a, b) => a.com_data.z_index - b.com_data.z_index);
// 将z-index重置为初始效果
let z_index = 0;
if (list.length > 0) {
list.forEach((item) => {
if (item.com_data.z_index < 0) {
const new_z_index = z_index - 1;
item.com_data.z_index = new_z_index;
z_index = new_z_index;
}
});
}
form.custom_list = draglist.value.diy_data;
}
form.height = center_height.value;

6
src/components/model-goods-list/index.vue
View File

@ -265,13 +265,13 @@ const get_products = () => {
};
// 取出监听的数据
const watch_data = computed(() => {
const { category_ids, brand, number, order_by_type, order_by_rule, data_type, data_list } = form.value;
return { category_ids: category_ids, brand: brand, number: number, order_by_type: order_by_type, order_by_rule: order_by_rule, data_type: data_type, data_list: data_list };
const { category_ids, brand_ids, number, order_by_type, order_by_rule, data_type, data_list } = form.value;
return { category_ids: category_ids, brand_ids: brand_ids, number: number, order_by_type: order_by_type, order_by_rule: order_by_rule, data_type: data_type, data_list: data_list };
})
// 初始化的时候不执行, 监听数据变化
watch(() => watch_data.value, (val, oldVal) => {
// 使用JSON.stringify()进行判断 新值和旧值是否一样 不一样就重新获取数据
if (JSON.stringify(val) !== JSON.stringify(oldVal)) {
if ((JSON.stringify(val) !== JSON.stringify(oldVal)) || props.isCommonStyle) {
if (val.data_type == '0') {
if (!isEmpty(val.data_list)) {
list.value = cloneDeep(val.data_list).map((item: any) => ({

2
src/config/const/goods-list.ts
View File

@ -76,7 +76,7 @@ const defaultProductList: DefaultProductList = {
is_shop_show: '1',
shop_type: 'text',
shop_button_text: '购买',
shop_button_icon_class: '',
shop_button_icon_class: 'cart',
shop_button_effect: '0',
shop_button_size: '1',
},

2
src/config/const/goods-tabs.ts
View File

@ -94,7 +94,7 @@ const defaultProductList: DefaultProductList = {
is_price_solo: '1',
shop_type: 'text',
shop_button_text: '购买',
shop_button_icon_class: '',
shop_button_icon_class: 'cart',
shop_button_effect: '0',
shop_button_size: '1',
},