Skip to content

赵月辉 / fastgpt-migrated

Go to a project
Commit e0b68607 by archer
Options

user ui

parent 9fefaa8e
Showing with 312 additions and 345 deletions
client/src/components/Icon/icons/light/billRecord.svg 0 → 100644
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1689854058748" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3614" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M803.84 934.4H238.08c-52.736 0-96.256-43.008-96.256-96.256V165.376c0-52.736 43.008-96.256 96.256-96.256H803.84c52.736 0 96.256 43.008 96.256 96.256v673.28c0 52.736-43.52 95.744-96.256 95.744zM232.96 128c-17.408 0-32.256 14.336-32.256 32.256v683.52c0 17.408 14.336 32.256 32.256 32.256H808.96c17.408 0 32.256-14.336 32.256-32.256V160.256c0-17.408-14.336-32.256-32.256-32.256H232.96z m256 646.656c-8.192 0-15.872-3.072-22.528-9.728l-48.128-46.592-24.064 15.872c-4.608 4.608-11.264 6.656-17.408 6.656h-48.128c-22.016-5.12-31.744-13.312-31.744-27.136 0-17.408 9.216-32.256 31.744-32.256h38.4l36.864-30.72c12.8-9.728 30.208-8.192 41.472 3.072l48.128 46.592 25.6-17.408c4.608-3.072 11.264-6.656 17.408-6.656h79.872c17.408 0 32.256 14.336 32.256 32.256 0 17.408-14.336 32.256-32.256 32.256h-70.656l-39.936 27.136c-4.096 5.12-10.24 6.656-16.896 6.656z" p-id="3615"></path><path d="M718.336 385.536H316.416c-16.384 0-29.184-13.312-29.184-29.184 0-16.384 13.312-29.184 29.184-29.184h401.92c16.384 0 29.184 13.312 29.184 29.184 0.512 15.872-12.8 29.184-29.184 29.184zM718.336 535.04H316.416c-16.384 0-29.184-13.312-29.184-29.184 0-16.384 13.312-29.696 29.184-29.696h401.92c16.384 0 29.184 13.312 29.184 29.696 0.512 16.384-12.8 29.184-29.184 29.184z" p-id="3616"></path></svg>
\ No newline at end of file
client/src/components/Icon/icons/light/inform.svg 0 → 100644
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1689854044643" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3460" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M892.1 805L781.9 621.3V458c0-71.8-28.1-139.5-79.3-190.6-36.2-36.2-80.7-60.8-129-72.2v-22.7c0-34-27.6-61.6-61.6-61.6s-61.6 27.6-61.6 61.6v22.7c-48.4 11.3-92.9 36-129 72.2-51.1 51.1-79.3 118.8-79.3 190.6v163.3L131.9 805h257.7c7.6 60.8 59.5 108 122.3 108s114.8-47.2 122.3-108h257.9zM496.4 172.6c0-8.6 7-15.6 15.6-15.6s15.6 7 15.6 15.6v16c-5.2-0.3-10.4-0.5-15.6-0.5s-10.4 0.2-15.6 0.5v-16zM288.1 634.1V458c0-123.4 100.4-223.9 223.9-223.9 123.4 0 223.9 100.4 223.9 223.9v176.1L810.8 759H213.2l74.9-124.9zM512 867c-37.4 0-68.6-26.7-75.8-62h151.5c-7.1 35.3-38.3 62-75.7 62z" p-id="3461"></path></svg>
\ No newline at end of file
client/src/components/Icon/icons/light/loginout.svg 0 → 100644
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1689855121257" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3135" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M952.7 492.1c-1.4-1.8-3.1-3.4-4.8-4.9l-179-178.9c-12.5-12.5-32.9-12.5-45.4 0s-12.5 32.9 0 45.4l126 126H421.3h-0.1c-18.2 0-32.9 14.8-32.9 33s14.7 33 32.9 33c0.3 0.1 0.5 0 0.7 0h427.8l-126 126c-12.3 12.3-12.3 32.4 0 44.7l0.7 0.7c12.3 12.3 32.4 12.3 44.7 0l182-182c11.7-11.7 12.3-30.6 1.6-43z" fill="#515151" p-id="3136"></path><path d="M562.3 799c-18 0-32.7 14.7-32.7 32.7v63.8H129.2V128.7h400.4v63.1c0 18 14.7 32.7 32.7 32.7s32.7-14.7 32.7-32.7V96.3c0-3.5-0.6-6.8-1.6-10-4.2-13.3-16.6-23-31.2-23H96.6c-18 0-32.7 14.7-32.7 32.7v831.9c0 14.2 9.2 26.3 21.8 30.8 3.6 1.4 7.5 2.1 11.5 2.1h463.2c0.6 0 1.3 0.1 1.9 0.1 18 0 32.7-14.7 32.7-32.7v-96.5c0-18-14.7-32.7-32.7-32.7z" fill="#515151" p-id="3137"></path><path d="M256.8 512.7a32.9 33 0 1 0 65.8 0 32.9 33 0 1 0-65.8 0Z" fill="#515151" p-id="3138"></path></svg>
\ No newline at end of file
client/src/components/Icon/icons/light/payRecord.svg 0 → 100644
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1689854074967" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3769" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M637.074286 554.934857c-1.462857-1.097143-3.291429-1.828571-4.754286-2.56-1.828571-0.731429-3.657143-1.462857-5.12-1.462857-1.828571-0.365714-3.657143-0.731429-5.485714-0.731429v27.428572-27.428572h-219.428572c-1.828571 0-3.657143 0-5.485714 0.365715-1.462857 0.365714-3.291429 1.097143-5.12 1.828571-1.462857 0.731429-3.291429 1.462857-4.754286 2.56-1.462857 0.731429-2.925714 1.828571-4.022857 3.291429-1.462857 1.097143-2.56 2.56-3.291428 4.022857-1.097143 1.462857-1.828571 3.291429-2.56 4.754286-0.731429 1.828571-1.462857 3.657143-1.828572 5.12-0.365714 1.828571-0.365714 3.657143-0.365714 5.485714 0 1.828571 0 3.657143 0.365714 5.485714 0.365714 1.462857 1.097143 3.291429 1.828572 5.12 0.731429 1.462857 1.462857 3.291429 2.56 4.754286 0.731429 1.462857 1.828571 2.925714 3.291428 4.022857 1.097143 1.462857 2.56 2.56 4.022857 3.291429 1.462857 1.097143 3.291429 1.828571 4.754286 2.56 1.828571 0.731429 3.657143 1.462857 5.12 1.828571 1.828571 0.365714 3.657143 0.365714 5.485714 0.365714v-27.428571 27.428571h219.428572c1.828571 0 3.657143 0 5.485714-0.365714 1.462857-0.365714 3.291429-1.097143 5.12-1.828571 1.462857-0.731429 3.291429-1.462857 4.754286-2.56 1.462857-0.731429 2.925714-1.828571 4.022857-3.291429 1.462857-1.097143 2.56-2.56 3.291428-4.022857 1.097143-1.462857 1.828571-3.291429 2.56-4.754286 0.731429-1.828571 1.462857-3.291429 1.828572-5.12 0.365714-1.828571 0.365714-3.657143 0.365714-5.485714 0-1.828571 0-3.657143-0.365714-5.485714-0.365714-1.462857-1.097143-3.291429-1.828572-5.12-0.731429-1.462857-1.462857-2.925714-2.56-4.754286a15.945143 15.945143 0 0 0-3.291428-4.022857c-1.097143-1.097143-2.56-2.56-4.022857-3.291429zM377.051429 475.538286c-0.731429 1.828571-1.462857 3.657143-1.828572 5.12-0.365714 1.828571-0.365714 3.657143-0.365714 5.485714 0 1.828571 0 3.657143 0.365714 5.485714 0.365714 1.462857 1.097143 3.291429 1.828572 5.12 0.731429 1.462857 1.462857 3.291429 2.56 4.754286 0.731429 1.462857 1.828571 2.925714 3.291428 4.022857 1.097143 1.462857 2.56 2.56 4.022857 3.291429 1.462857 1.097143 3.291429 1.828571 4.754286 2.56 1.828571 0.731429 3.657143 1.462857 5.12 1.828571 1.828571 0.365714 3.657143 0.365714 5.485714 0.365714v-27.428571 27.428571h219.428572c1.828571 0 3.657143 0 5.485714-0.365714 1.462857-0.365714 3.291429-1.097143 5.12-1.828571 1.462857-0.731429 3.291429-1.462857 4.754286-2.56 1.462857-0.731429 2.925714-1.828571 4.022857-3.291429 1.462857-1.097143 2.56-2.56 3.291428-4.022857 1.097143-1.462857 1.828571-3.291429 2.56-4.754286 0.731429-1.828571 1.462857-3.291429 1.828572-5.12 0.365714-1.828571 0.365714-3.657143 0.365714-5.485714 0-1.828571 0-3.657143-0.365714-5.485714-0.365714-1.462857-1.097143-3.291429-1.828572-5.12-0.731429-1.462857-1.462857-2.925714-2.56-4.754286a15.945143 15.945143 0 0 0-3.291428-4.022857c-1.097143-1.097143-2.56-2.56-4.022857-3.291429-1.462857-1.097143-3.291429-1.828571-4.754286-2.56-1.828571-0.731429-3.657143-1.462857-5.12-1.462857-1.828571-0.365714-3.657143-0.731429-5.485714-0.731428v27.428571-27.428571h-219.428572c-1.828571 0-3.657143 0-5.485714 0.365714-1.462857 0.365714-3.291429 1.097143-5.12 1.828571-1.462857 0.731429-3.291429 1.462857-4.754286 2.56-1.462857 0.731429-2.925714 1.828571-4.022857 3.291429-1.462857 1.097143-2.56 2.56-3.291428 4.022857-1.097143 1.462857-1.828571 3.291429-2.56 4.754286z" p-id="3770"></path><path d="M511.817143 660.224h-27.428572c0 1.828571 0.365714 3.657143 0.731429 5.485714 0.365714 1.462857 0.731429 3.291429 1.462857 5.12 0.731429 1.462857 1.462857 3.291429 2.56 4.754286 0.731429 1.462857 2.194286 2.925714 3.291429 4.022857 1.462857 1.462857 2.56 2.56 4.022857 3.291429 1.828571 1.097143 3.291429 1.828571 4.754286 2.56 1.828571 0.731429 3.657143 1.462857 5.12 1.828571 1.828571 0.365714 3.657143 0.365714 5.485714 0.365714a28.379429 28.379429 0 0 0 19.382857-8.045714c2.56-2.56 4.754286-5.485714 5.851429-8.777143 1.462857-3.657143 2.194286-6.948571 2.194285-10.605714v-197.485714h-27.428571 27.428571c0-1.828571 0-3.657143-0.365714-5.485715-0.365714-1.462857-1.097143-3.291429-1.828571-5.12-0.731429-1.462857-1.462857-3.291429-2.56-4.754285a11.446857 11.446857 0 0 0-3.291429-4.022857 11.446857 11.446857 0 0 0-4.022857-3.291429c-1.462857-1.097143-3.291429-1.828571-4.754286-2.56-1.828571-0.731429-3.657143-1.462857-5.12-1.828571-1.828571-0.365714-3.657143-0.365714-5.485714-0.365715-1.828571 0-3.657143 0-5.485714 0.365715-1.462857 0.365714-3.291429 1.097143-5.12 1.828571-1.462857 0.731429-3.291429 1.462857-4.754286 2.56-1.462857 0.731429-2.925714 1.828571-4.022857 3.291429-1.462857 1.097143-2.56 2.56-3.291429 4.022857-1.097143 1.462857-1.828571 3.291429-2.56 4.754285-0.731429 1.828571-1.462857 3.657143-1.828571 5.12-0.365714 1.828571-0.365714 3.657143-0.365715 5.485715v197.485714h27.428572z" p-id="3771"></path><path d="M413.915429 336.713143c1.462857 0.365714 3.291429 1.097143 5.12 1.828571 1.462857 0.731429 3.291429 1.462857 4.754285 2.56 1.462857 0.731429 2.925714 1.828571 4.022857 3.291429l103.497143 103.497143a28.379429 28.379429 0 0 1 8.045715 19.382857 27.538286 27.538286 0 0 1-38.034286 25.234286 28.379429 28.379429 0 0 1-8.777143-5.851429l-103.497143-103.497143a11.446857 11.446857 0 0 1-3.291428-4.022857c-1.097143-1.462857-1.828571-3.291429-2.56-4.754286-0.731429-1.828571-1.462857-3.657143-1.828572-5.12-0.365714-1.828571-0.365714-3.657143-0.365714-5.485714 0-1.828571 0-3.657143 0.365714-5.485714 0.365714-1.462857 1.097143-3.291429 1.828572-5.12 0.731429-1.462857 1.462857-3.291429 2.56-4.754286 0.731429-1.462857 1.828571-2.925714 3.291428-4.022857 1.097143-1.462857 2.56-2.56 4.022857-3.291429 1.462857-1.097143 3.291429-1.828571 4.754286-2.56 1.828571-0.731429 3.657143-1.462857 5.12-1.828571 1.828571-0.365714 3.657143-0.365714 5.485714-0.365714 1.828571 0 3.657143 0 5.485715 0.365714z" p-id="3772"></path><path d="M489.142857 451.913143c-1.097143 1.462857-1.828571 3.291429-2.56 4.754286-0.731429 1.828571-1.462857 3.291429-1.828571 5.12-0.365714 1.828571-0.365714 3.657143-0.365715 5.485714 0 1.828571 0 3.657143 0.365715 5.12 0.365714 1.828571 1.097143 3.657143 1.828571 5.485714 0.731429 1.462857 1.462857 2.925714 2.56 4.754286 0.731429 1.462857 1.828571 2.56 3.291429 4.022857a28.379429 28.379429 0 0 0 19.382857 8.045714 27.538286 27.538286 0 0 0 19.382857-8.045714l103.497143-103.497143a28.379429 28.379429 0 0 0 8.045714-19.382857 28.379429 28.379429 0 0 0-8.045714-19.382857 15.945143 15.945143 0 0 0-4.022857-3.291429c-1.828571-1.097143-3.291429-1.828571-4.754286-2.56-1.828571-0.731429-3.657143-1.462857-5.485714-1.828571-1.462857-0.365714-3.291429-0.365714-5.12-0.365714-1.828571 0-3.657143 0-5.485715 0.365714-1.828571 0.365714-3.291429 1.097143-5.12 1.828571-1.462857 0.731429-3.291429 1.462857-4.754285 2.56-1.462857 0.731429-2.925714 1.828571-4.022857 3.291429l-103.497143 103.497143c-1.462857 1.097143-2.56 2.56-3.291429 4.022857z" p-id="3773"></path><path d="M360.777143 870.217143c-46.445714-19.382857-87.771429-47.177143-123.611429-83.382857-35.84-35.84-63.634286-76.8-83.382857-123.245715q-30.72-72.411429-30.72-151.405714 0-78.994286 30.72-151.405714c19.748571-46.445714 47.542857-87.771429 83.382857-123.611429 35.84-35.84 77.165714-63.634286 123.611429-83.382857q72.411429-30.72 151.405714-30.72 78.994286 0 151.405714 30.72c46.445714 19.748571 87.405714 47.542857 123.245715 83.382857 36.205714 35.84 64 77.165714 83.382857 123.611429 20.48 48.274286 30.72 98.742857 30.72 151.405714q0 52.114286-13.348572 101.339429h-57.234285a328.777143 328.777143 0 0 0 15.725714-101.339429c0-45.348571-8.777143-88.502857-26.331429-130.194286a325.668571 325.668571 0 0 0-71.68-106.057142c-30.72-31.085714-66.194286-54.857143-106.057142-71.68a328.301714 328.301714 0 0 0-129.828572-26.331429c-45.348571 0-88.502857 8.777143-130.194286 26.331429a325.668571 325.668571 0 0 0-106.057142 71.68c-31.085714 30.72-54.857143 66.194286-71.68 106.057142a331.337143 331.337143 0 0 0-26.331429 130.194286c0 45.348571 8.777143 88.502857 26.331429 129.828572a325.668571 325.668571 0 0 0 71.68 106.057142c30.72 31.085714 66.194286 54.857143 106.057142 71.68 41.691429 17.554286 84.845714 26.331429 130.194286 26.331429 34.779429 0 68.278857-5.156571 100.644572-15.469714v57.161143c-32.621714 8.777143-66.157714 13.165714-100.644572 13.165714q-78.994286 0-151.405714-30.72z" p-id="3774"></path><path d="M657.188571 797.184c1.097143 1.462857 2.56 2.56 4.022858 3.291429 1.462857 1.097143 3.291429 1.828571 4.754285 2.56 1.828571 0.731429 3.657143 1.462857 5.12 1.828571 1.828571 0.365714 3.657143 0.365714 5.485715 0.365714v-27.428571 27.428571h292.571428c1.828571 0 3.657143 0 5.485714-0.365714 1.462857-0.365714 3.291429-1.097143 5.12-1.828571 1.462857-0.365714 3.291429-1.462857 4.754286-2.56 1.462857-0.731429 2.925714-1.828571 4.022857-3.291429 1.462857-1.097143 2.56-2.56 3.291429-4.022857 1.097143-1.462857 1.828571-3.291429 2.56-4.754286 0.731429-1.828571 1.462857-3.291429 1.828571-5.12 0.365714-1.828571 0.365714-3.657143 0.365715-5.485714a27.538286 27.538286 0 0 0-27.428572-27.428572v27.428572-27.428572h-292.571428c-1.828571 0-3.657143 0-5.485715 0.365715-1.462857 0.365714-3.291429 1.097143-5.12 1.828571-1.462857 0.731429-3.291429 1.462857-4.754285 2.56-1.462857 0.731429-2.925714 1.828571-4.022858 3.291429-1.462857 1.097143-2.56 2.56-3.291428 4.022857-1.097143 1.462857-1.828571 3.291429-2.56 4.754286-0.731429 1.828571-1.462857 3.657143-1.828572 5.12-0.365714 1.828571-0.365714 3.657143-0.365714 5.485714 0 1.828571 0 3.657143 0.365714 5.485714 0.365714 1.462857 1.097143 3.291429 1.828572 5.12 0.731429 1.462857 1.462857 3.291429 2.56 4.754286 0.731429 1.462857 1.828571 2.925714 3.291428 4.022857zM657.188571 893.549714c1.097143 1.462857 2.56 2.56 4.022858 3.291429 1.462857 1.097143 3.291429 1.828571 4.754285 2.56 1.828571 0.731429 3.657143 1.462857 5.12 1.828571 1.828571 0.365714 3.657143 0.365714 5.485715 0.365715v-27.428572 27.428572h292.571428c1.828571 0 3.657143 0 5.485714-0.365715 1.462857-0.365714 3.291429-1.097143 5.12-1.828571 1.462857-0.365714 3.291429-1.462857 4.754286-2.56 1.462857-0.731429 2.925714-1.828571 4.022857-3.291429 1.462857-1.097143 2.56-2.56 3.291429-4.022857 1.097143-1.462857 1.828571-3.291429 2.56-4.754286 0.731429-1.828571 1.462857-3.291429 1.828571-5.12 0.365714-1.828571 0.365714-3.657143 0.365715-5.485714a27.538286 27.538286 0 0 0-27.428572-27.428571v27.428571-27.428571h-292.571428c-1.828571 0-3.657143 0-5.485715 0.365714-1.462857 0.365714-3.291429 1.097143-5.12 1.828571-1.462857 0.731429-3.291429 1.462857-4.754285 2.56-1.462857 0.731429-2.925714 1.828571-4.022858 3.291429-1.462857 1.097143-2.56 2.56-3.291428 4.022857-1.097143 1.462857-1.828571 3.291429-2.56 4.754286-0.731429 1.828571-1.462857 3.657143-1.828572 5.12-0.365714 1.828571-0.365714 3.657143-0.365714 5.485714 0 1.828571 0 3.657143 0.365714 5.485714 0.365714 1.462857 1.097143 3.291429 1.828572 5.12 0.731429 1.462857 1.462857 3.291429 2.56 4.754286 0.731429 1.462857 1.828571 2.925714 3.291428 4.022857zM676.571429 640.621714c-1.828571 0-3.657143 0-5.485715 0.365715-1.462857 0.365714-3.291429 1.097143-5.12 1.828571-1.462857 0.731429-3.291429 1.462857-4.754285 2.56-1.462857 0.731429-2.925714 1.828571-4.022858 3.291429-1.462857 1.097143-2.56 2.56-3.291428 4.022857-1.097143 1.462857-1.828571 3.291429-2.56 4.754285-0.731429 1.828571-1.462857 3.657143-1.828572 5.12-0.365714 1.828571-0.365714 3.657143-0.365714 5.485715 0 1.828571 0 3.657143 0.365714 5.485714 0.365714 1.462857 1.097143 3.291429 1.828572 5.12 0.731429 1.462857 1.462857 3.291429 2.56 4.754286 0.731429 1.462857 1.828571 2.925714 3.291428 4.022857 1.097143 1.462857 2.56 2.56 4.022858 3.291428 1.462857 1.097143 3.291429 1.828571 4.754285 2.56 1.828571 0.731429 3.657143 1.462857 5.12 1.828572 1.828571 0.365714 3.657143 0.365714 5.485715 0.365714v-27.428571 27.428571h292.571428c1.828571 0 3.657143 0 5.485714-0.365714 1.462857-0.365714 3.291429-1.097143 5.12-1.828572 1.462857-0.365714 3.291429-1.462857 4.754286-2.56 1.462857-0.731429 2.925714-1.828571 4.022857-3.291428 1.462857-1.097143 2.56-2.56 3.291429-4.022857 1.097143-1.462857 1.828571-3.291429 2.56-4.754286 0.731429-1.828571 1.462857-3.291429 1.828571-5.12 0.365714-1.828571 0.365714-3.657143 0.365715-5.485714a27.538286 27.538286 0 0 0-27.428572-27.428572v27.428572-27.428572h-292.571428z" p-id="3775"></path></svg>
\ No newline at end of file
client/src/components/Icon/index.tsx
...@@ -63,7 +63,11 @@ const map = { ...@@ -63,7 +63,11 @@ const map = {
qaImport: require('./icons/file/qaImport.svg').default, qaImport: require('./icons/file/qaImport.svg').default,
uploadFile: require('./icons/file/uploadFile.svg').default, uploadFile: require('./icons/file/uploadFile.svg').default,
closeLight: require('./icons/light/close.svg').default, closeLight: require('./icons/light/close.svg').default,
customTitle: require('./icons/light/customTitle.svg').default customTitle: require('./icons/light/customTitle.svg').default,
billRecordLight: require('./icons/light/billRecord.svg').default,
informLight: require('./icons/light/inform.svg').default,
payRecordLight: require('./icons/light/payRecord.svg').default,
loginoutLight: require('./icons/light/loginout.svg').default
}; };
export type IconName = keyof typeof map; export type IconName = keyof typeof map;
......
client/src/hooks/useScreen.ts deleted 100644 → 0
import { useMemo } from 'react';
import { useMediaQuery } from '@chakra-ui/react';
interface Props {
defaultIsPc?: boolean;
}
export function useScreen(data?: Props) {
const { defaultIsPc = false } = data || {};
const [isPc] = useMediaQuery('(min-width: 900px)', {
ssr: false,
fallback: defaultIsPc
});
return {
isPc,
mediaLgMd: useMemo(() => (isPc ? 'lg' : 'md'), [isPc]),
mediaMdSm: useMemo(() => (isPc ? 'md' : 'sm'), [isPc]),
media: (pc: any, phone: any) => (isPc ? pc : phone)
};
}
client/src/pages/kb/detail/index.tsx
...@@ -6,8 +6,8 @@ import { useForm } from 'react-hook-form'; ...@@ -6,8 +6,8 @@ import { useForm } from 'react-hook-form';
import { useQuery } from '@tanstack/react-query'; import { useQuery } from '@tanstack/react-query';
import { useUserStore } from '@/store/user'; import { useUserStore } from '@/store/user';
import { KbItemType } from '@/types/plugin'; import { KbItemType } from '@/types/plugin';
import { useScreen } from '@/hooks/useScreen';
import { getErrText } from '@/utils/tools'; import { getErrText } from '@/utils/tools';
import { useGlobalStore } from '@/store/global';
import { type ComponentRef } from './components/Info'; import { type ComponentRef } from './components/Info';
import Tabs from '@/components/Tabs'; import Tabs from '@/components/Tabs';
import dynamic from 'next/dynamic'; import dynamic from 'next/dynamic';
...@@ -37,7 +37,7 @@ const Detail = ({ kbId, currentTab }: { kbId: string; currentTab: `${TabEnum}` } ...@@ -37,7 +37,7 @@ const Detail = ({ kbId, currentTab }: { kbId: string; currentTab: `${TabEnum}` }
const theme = useTheme(); const theme = useTheme();
const { toast } = useToast(); const { toast } = useToast();
const router = useRouter(); const router = useRouter();
const { isPc } = useScreen(); const { isPc } = useGlobalStore();
const { kbDetail, getKbDetail } = useUserStore(); const { kbDetail, getKbDetail } = useUserStore();
const tabList = useRef([ const tabList = useRef([
......
client/src/pages/number/components/BillTable.tsx
...@@ -21,6 +21,7 @@ import MyIcon from '@/components/Icon'; ...@@ -21,6 +21,7 @@ import MyIcon from '@/components/Icon';
import DateRangePicker, { type DateRangeType } from '@/components/DateRangePicker'; import DateRangePicker, { type DateRangeType } from '@/components/DateRangePicker';
import { addDays } from 'date-fns'; import { addDays } from 'date-fns';
import dynamic from 'next/dynamic'; import dynamic from 'next/dynamic';
import { useGlobalStore } from '@/store/global';
const BillDetail = dynamic(() => import('./BillDetail')); const BillDetail = dynamic(() => import('./BillDetail'));
...@@ -30,6 +31,7 @@ const BillTable = () => { ...@@ -30,6 +31,7 @@ const BillTable = () => {
from: addDays(new Date(), -7), from: addDays(new Date(), -7),
to: new Date() to: new Date()
}); });
const { isPc } = useGlobalStore();
const { const {
data: bills, data: bills,
...@@ -38,6 +40,7 @@ const BillTable = () => { ...@@ -38,6 +40,7 @@ const BillTable = () => {
getData getData
} = usePagination<UserBillType>({ } = usePagination<UserBillType>({
api: getUserBills, api: getUserBills,
pageSize: isPc ? 20 : 10,
params: { params: {
dateStart: new Date(dateRange.from || new Date()).setHours(0, 0, 0, 0), dateStart: new Date(dateRange.from || new Date()).setHours(0, 0, 0, 0),
dateEnd: new Date(dateRange.to || new Date()).setHours(23, 59, 59, 999) dateEnd: new Date(dateRange.to || new Date()).setHours(23, 59, 59, 999)
...@@ -47,8 +50,8 @@ const BillTable = () => { ...@@ -47,8 +50,8 @@ const BillTable = () => {
const [billDetail, setBillDetail] = useState<UserBillType>(); const [billDetail, setBillDetail] = useState<UserBillType>();
return ( return (
<> <Flex flexDirection={'column'} py={[0, 5]} h={'100%'} position={'relative'}>
<TableContainer position={'relative'} minH={'100px'}> <TableContainer px={[3, 8]} position={'relative'} flex={'1 0 0'} h={0} overflowY={'auto'}>
<Table> <Table>
<Thead> <Thead>
<Tr> <Tr>
...@@ -78,27 +81,27 @@ const BillTable = () => { ...@@ -78,27 +81,27 @@ const BillTable = () => {
</TableContainer> </TableContainer>
{!isLoading && bills.length === 0 && ( {!isLoading && bills.length === 0 && (
<Flex h={'100%'} flexDirection={'column'} alignItems={'center'}> <Flex flex={'1 0 0'} flexDirection={'column'} alignItems={'center'}>
<MyIcon name="empty" w={'48px'} h={'48px'} color={'transparent'} /> <MyIcon name="empty" w={'48px'} h={'48px'} color={'transparent'} />
<Box mt={2} color={'myGray.500'}> <Box mt={2} color={'myGray.500'}>
无使用记录~ 无使用记录~
</Box> </Box>
</Flex> </Flex>
)} )}
<Flex w={'100%'} mt={4} justifyContent={'flex-end'} flexWrap={'wrap'}> <Flex w={'100%'} mt={4} px={[3, 8]} alignItems={'center'} justifyContent={'flex-end'}>
<DateRangePicker <DateRangePicker
defaultDate={dateRange} defaultDate={dateRange}
position="top" position="top"
onChange={setDateRange} onChange={setDateRange}
onSuccess={() => getData(1)} onSuccess={() => getData(1)}
/> />
<Box ml={[0, 2]} mt={[3, 0]} w={['100%', 'auto']}> <Box ml={3}>
<Pagination /> <Pagination />
</Box> </Box>
</Flex> </Flex>
<Loading loading={isLoading} fixed={false} /> <Loading loading={isLoading} fixed={false} />
{!!billDetail && <BillDetail bill={billDetail} onClose={() => setBillDetail(undefined)} />} {!!billDetail && <BillDetail bill={billDetail} onClose={() => setBillDetail(undefined)} />}
</> </Flex>
); );
}; };
......
client/src/pages/number/components/Info.tsx 0 → 100644
import React, { useCallback } from 'react';
import { Box, Flex, Button, useDisclosure } from '@chakra-ui/react';
import { useForm } from 'react-hook-form';
import { UserUpdateParams } from '@/types/user';
import { putUserInfo } from '@/api/user';
import { useToast } from '@/hooks/useToast';
import { useGlobalStore } from '@/store/global';
import { useUserStore } from '@/store/user';
import { UserType } from '@/types/user';
import { useRouter } from 'next/router';
import { useQuery } from '@tanstack/react-query';
import dynamic from 'next/dynamic';
import { useSelectFile } from '@/hooks/useSelectFile';
import { compressImg } from '@/utils/file';
import { getErrText } from '@/utils/tools';
import { feConfigs } from '@/store/static';
import Loading from '@/components/Loading';
import Avatar from '@/components/Avatar';
const PayModal = dynamic(() => import('./PayModal'), {
loading: () => <Loading fixed={false} />,
ssr: false
});
const UserInfo = () => {
const router = useRouter();
const { userInfo, updateUserInfo, initUserInfo } = useUserStore();
const { setLoading } = useGlobalStore();
const { reset } = useForm<UserUpdateParams>({
defaultValues: userInfo as UserType
});
const { toast } = useToast();
const {
isOpen: isOpenPayModal,
onClose: onClosePayModal,
onOpen: onOpenPayModal
} = useDisclosure();
const { File, onOpen: onOpenSelectFile } = useSelectFile({
fileType: '.jpg,.png',
multiple: false
});
const onclickSave = useCallback(
async (data: UserUpdateParams) => {
setLoading(true);
try {
await putUserInfo({
avatar: data.avatar
});
updateUserInfo({
avatar: data.avatar
});
reset(data);
toast({
title: '更新数据成功',
status: 'success'
});
} catch (error) {
toast({
title: getErrText(error),
status: 'error'
});
}
setLoading(false);
},
[reset, setLoading, toast, updateUserInfo]
);
const onSelectFile = useCallback(
async (e: File[]) => {
const file = e[0];
if (!file) return;
try {
const src = await compressImg({
file,
maxW: 100,
maxH: 100
});
onclickSave({
...userInfo,
avatar: src
});
} catch (err: any) {
toast({
title: typeof err === 'string' ? err : '头像选择异常',
status: 'warning'
});
}
},
[onclickSave, toast, userInfo]
);
useQuery(['init'], initUserInfo, {
onSuccess(res) {
reset(res);
}
});
return (
<Flex flexDirection={'column'} alignItems={'center'} py={[0, 8]} fontSize={['lg', 'xl']}>
<Flex mt={6} alignItems={'center'} w={'260px'}>
<Box flex={'0 0 50px'}>头像:</Box>
<Box flex={1} pl={10}>
<Avatar
src={userInfo?.avatar}
w={['34px', '44px']}
h={['34px', '44px']}
cursor={'pointer'}
title={'点击切换头像'}
onClick={onOpenSelectFile}
/>
</Box>
</Flex>
<Flex mt={6} alignItems={'center'} w={'260px'}>
<Box flex={'0 0 50px'}>账号:</Box>
<Box>{userInfo?.username}</Box>
</Flex>
{feConfigs?.show_userDetail && (
<Box mt={6} w={'260px'} whiteSpace={'nowrap'}>
<Flex alignItems={'center'}>
<Box flex={'0 0 50px'}>余额:</Box>
<Box>
<strong>{userInfo?.balance}</strong> 元
</Box>
<Button size={['xs', 'sm']} w={['70px', '80px']} ml={5} onClick={onOpenPayModal}>
充值
</Button>
</Flex>
</Box>
)}
{isOpenPayModal && <PayModal onClose={onClosePayModal} />}
<File onSelect={onSelectFile} />
</Flex>
);
};
export default UserInfo;
client/src/pages/number/components/InformTable.tsx
import React from 'react'; import React from 'react';
import { import { Box, Flex, useTheme } from '@chakra-ui/react';
Box,
Flex,
Accordion,
AccordionItem,
AccordionButton,
AccordionPanel,
AccordionIcon
} from '@chakra-ui/react';
import { getInforms, readInform } from '@/api/user'; import { getInforms, readInform } from '@/api/user';
import { usePagination } from '@/hooks/usePagination'; import { usePagination } from '@/hooks/usePagination';
import { useLoading } from '@/hooks/useLoading'; import { useLoading } from '@/hooks/useLoading';
...@@ -16,8 +8,8 @@ import { formatTimeToChatTime } from '@/utils/tools'; ...@@ -16,8 +8,8 @@ import { formatTimeToChatTime } from '@/utils/tools';
import MyIcon from '@/components/Icon'; import MyIcon from '@/components/Icon';
const BillTable = () => { const BillTable = () => {
const theme = useTheme();
const { Loading } = useLoading(); const { Loading } = useLoading();
const { const {
data: informs, data: informs,
isLoading, isLoading,
...@@ -31,11 +23,17 @@ const BillTable = () => { ...@@ -31,11 +23,17 @@ const BillTable = () => {
}); });
return ( return (
<Box mt={2}> <Flex flexDirection={'column'} py={[0, 5]} h={'100%'} position={'relative'}>
<Accordion defaultIndex={[0, 1, 2]} allowMultiple> <Box px={[3, 8]} position={'relative'} flex={'1 0 0'} h={0} overflowY={'auto'}>
{informs.map((item) => ( {informs.map((item) => (
<AccordionItem <Box
key={item._id} key={item._id}
border={theme.borders.md}
py={2}
px={4}
borderRadius={'md'}
cursor={item.read ? 'default' : 'pointer'}
position={'relative'}
onClick={async () => { onClick={async () => {
if (!item.read) { if (!item.read) {
await readInform(item._id); await readInform(item._id);
...@@ -43,35 +41,31 @@ const BillTable = () => { ...@@ -43,35 +41,31 @@ const BillTable = () => {
} }
}} }}
> >
<AccordionButton> <Flex alignItems={'center'} justifyContent={'space-between'}>
<Flex alignItems={'center'} flex="1" textAlign="left"> <Box>{item.title}</Box>
<Box fontWeight={'bold'} position={'relative'}> <Box ml={2} color={'myGray.500'}>
{!item.read && ( {formatTimeToChatTime(item.time)}
<Box </Box>
w={'5px'} </Flex>
h={'5px'} <Box fontSize={'sm'} color={'myGray.600'}>
borderRadius={'10px'} {item.content}
bg={'myRead.600'} </Box>
position={'absolute'} {!item.read && (
top={1} <Box
left={'-5px'} w={'5px'}
></Box> h={'5px'}
)} borderRadius={'10px'}
{item.title} bg={'myRead.600'}
</Box> position={'absolute'}
<Box ml={2} color={'myGray.500'}> bottom={'8px'}
{formatTimeToChatTime(item.time)} right={'8px'}
</Box> ></Box>
</Flex> )}
</Box>
<AccordionIcon />
</AccordionButton>
<AccordionPanel pb={4}>{item.content}</AccordionPanel>
</AccordionItem>
))} ))}
</Accordion> </Box>
{!isLoading && informs.length === 0 && ( {!isLoading && informs.length === 0 && (
<Flex h={'100%'} flexDirection={'column'} alignItems={'center'} pt={'100px'}> <Flex flex={'1 0 0'} flexDirection={'column'} alignItems={'center'} pt={'-48px'}>
<MyIcon name="empty" w={'48px'} h={'48px'} color={'transparent'} /> <MyIcon name="empty" w={'48px'} h={'48px'} color={'transparent'} />
<Box mt={2} color={'myGray.500'}> <Box mt={2} color={'myGray.500'}>
暂无通知~ 暂无通知~
...@@ -79,12 +73,12 @@ const BillTable = () => { ...@@ -79,12 +73,12 @@ const BillTable = () => {
</Flex> </Flex>
)} )}
{total > pageSize && ( {total > pageSize && (
<Flex w={'100%'} mt={4} justifyContent={'flex-end'}> <Flex w={'100%'} mt={4} px={[3, 8]} justifyContent={'flex-end'}>
<Pagination /> <Pagination />
</Flex> </Flex>
)} )}
<Loading loading={isLoading && informs.length === 0} fixed={false} /> <Loading loading={isLoading && informs.length === 0} fixed={false} />
</Box> </Flex>
); );
}; };
......
client/src/pages/number/components/PayRecordTable.tsx
...@@ -59,45 +59,46 @@ const PayRecordTable = () => { ...@@ -59,45 +59,46 @@ const PayRecordTable = () => {
return ( return (
<> <>
<TableContainer> {!isInitialLoading && payOrders.length === 0 ? (
<Table> <Flex h={'100%'} flexDirection={'column'} alignItems={'center'} justifyContent={'center'}>
<Thead>
<Tr>
<Th>订单号</Th>
<Th>时间</Th>
<Th>金额</Th>
<Th>状态</Th>
<Th></Th>
</Tr>
</Thead>
<Tbody fontSize={'sm'}>
{payOrders.map((item) => (
<Tr key={item._id}>
<Td>{item.orderId}</Td>
<Td>
{item.createTime ? dayjs(item.createTime).format('YYYY/MM/DD HH:mm:ss') : '-'}
</Td>
<Td>{formatPrice(item.price)}元</Td>
<Td>{item.status}</Td>
<Td>
{item.status === 'NOTPAY' && (
<Button onClick={() => handleRefreshPayOrder(item._id)} size={'sm'}>
更新
</Button>
)}
</Td>
</Tr>
))}
</Tbody>
</Table>
</TableContainer>
{!isInitialLoading && payOrders.length === 0 && (
<Flex h={'100%'} flexDirection={'column'} alignItems={'center'} pt={'100px'}>
<MyIcon name="empty" w={'48px'} h={'48px'} color={'transparent'} /> <MyIcon name="empty" w={'48px'} h={'48px'} color={'transparent'} />
<Box mt={2} color={'myGray.500'}> <Box mt={2} color={'myGray.500'}>
无支付记录~ 无支付记录~
</Box> </Box>
</Flex> </Flex>
) : (
<TableContainer py={[0, 5]} px={[3, 8]} h={'100%'} overflow={'overlay'}>
<Table>
<Thead>
<Tr>
<Th>订单号</Th>
<Th>时间</Th>
<Th>金额</Th>
<Th>状态</Th>
<Th></Th>
</Tr>
</Thead>
<Tbody fontSize={'sm'}>
{payOrders.map((item) => (
<Tr key={item._id}>
<Td>{item.orderId}</Td>
<Td>
{item.createTime ? dayjs(item.createTime).format('YYYY/MM/DD HH:mm:ss') : '-'}
</Td>
<Td>{formatPrice(item.price)}元</Td>
<Td>{item.status}</Td>
<Td>
{item.status === 'NOTPAY' && (
<Button onClick={() => handleRefreshPayOrder(item._id)} size={'sm'}>
更新
</Button>
)}
</Td>
</Tr>
))}
</Tbody>
</Table>
</TableContainer>
)} )}
<Loading loading={isInitialLoading} fixed={false} /> <Loading loading={isInitialLoading} fixed={false} />
</> </>
......
client/src/pages/number/components/PromotionTable.tsx deleted 100644 → 0
import React from 'react';
import { Flex, Table, Thead, Tbody, Tr, Th, Td, TableContainer, Box } from '@chakra-ui/react';
import { useLoading } from '@/hooks/useLoading';
import dayjs from 'dayjs';
import { getPromotionRecords } from '@/api/user';
import { usePagination } from '@/hooks/usePagination';
import { PromotionRecordType } from '@/api/response/user';
import { PromotionTypeMap } from '@/constants/user';
import MyIcon from '@/components/Icon';
const OpenApi = () => {
const { Loading } = useLoading();
const {
data: promotionRecords,
isLoading,
total,
pageSize,
Pagination
} = usePagination<PromotionRecordType>({
api: getPromotionRecords
});
return (
<>
<TableContainer position={'relative'} overflow={'hidden'} minH={'100px'}>
<Table>
<Thead>
<Tr>
<Th>时间</Th>
<Th>类型</Th>
<Th>金额</Th>
</Tr>
</Thead>
<Tbody fontSize={'sm'}>
{promotionRecords.map((item) => (
<Tr key={item._id}>
<Td>
{item.createTime ? dayjs(item.createTime).format('YYYY/MM/DD HH:mm:ss') : '-'}
</Td>
<Td>{PromotionTypeMap[item.type]}</Td>
<Td>{item.amount}</Td>
</Tr>
))}
</Tbody>
</Table>
</TableContainer>
{!isLoading && promotionRecords.length === 0 && (
<Flex flexDirection={'column'} alignItems={'center'}>
<MyIcon name="empty" w={'48px'} h={'48px'} color={'transparent'} />
<Box mt={2} color={'myGray.500'}>
无佣金记录~
</Box>
</Flex>
)}
{total > pageSize && (
<Flex mt={4} justifyContent={'flex-end'}>
<Pagination />
</Flex>
)}
<Loading loading={isLoading} fixed={false} />
</>
);
};
export default OpenApi;
client/src/pages/number/index.tsx
import React, { useCallback, useRef } from 'react'; import React, { useCallback, useRef } from 'react';
import { Card, Box, Flex, Button, Grid, useDisclosure } from '@chakra-ui/react'; import { Box, Flex, useTheme } from '@chakra-ui/react';
import { useForm } from 'react-hook-form';
import { UserUpdateParams } from '@/types/user';
import { putUserInfo } from '@/api/user';
import { useToast } from '@/hooks/useToast';
import { useGlobalStore } from '@/store/global'; import { useGlobalStore } from '@/store/global';
import { useUserStore } from '@/store/user';
import { UserType } from '@/types/user';
import { clearCookie } from '@/utils/user';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { useQuery } from '@tanstack/react-query';
import dynamic from 'next/dynamic'; import dynamic from 'next/dynamic';
import { useSelectFile } from '@/hooks/useSelectFile'; import { clearCookie } from '@/utils/user';
import { compressImg } from '@/utils/file';
import { getErrText } from '@/utils/tools';
import { feConfigs } from '@/store/static';
import Loading from '@/components/Loading'; import PageContainer from '@/components/PageContainer';
import Avatar from '@/components/Avatar'; import SideTabs from '@/components/SideTabs';
import MyIcon from '@/components/Icon';
import Tabs from '@/components/Tabs';
import BillTable from './components/BillTable';
const PayRecordTable = dynamic(() => import('./components/PayRecordTable'), { import Tabs from '@/components/Tabs';
ssr: false import UserInfo from './components/Info';
}); import { useUserStore } from '@/store/user';
const InformTable = dynamic(() => import('./components/InformTable'), { const BillTable = dynamic(() => import('./components/BillTable'), {
ssr: false ssr: false
}); });
const PayModal = dynamic(() => import('./components/PayModal'), { const PayRecordTable = dynamic(() => import('./components/PayRecordTable'), {
loading: () => <Loading fixed={false} />,
ssr: false ssr: false
}); });
const WxConcat = dynamic(() => import('@/components/WxConcat'), { const InformTable = dynamic(() => import('./components/InformTable'), {
loading: () => <Loading fixed={false} />,
ssr: false ssr: false
}); });
enum TableEnum { enum TabEnum {
'info' = 'info',
'bill' = 'bill', 'bill' = 'bill',
'pay' = 'pay', 'pay' = 'pay',
'promotion' = 'promotion', 'inform' = 'inform',
'inform' = 'inform' 'loginout' = 'loginout'
} }
const NumberSetting = ({ tableType }: { tableType: `${TableEnum}` }) => { const NumberSetting = ({ currentTab }: { currentTab: `${TabEnum}` }) => {
const tableList = useRef([ const tabList = useRef([
{ label: '账单', id: TableEnum.bill, Component: <BillTable /> }, { icon: 'meLight', label: '个人信息', id: TabEnum.info, Component: <BillTable /> },
{ label: '充值', id: TableEnum.pay, Component: <PayRecordTable /> }, { icon: 'billRecordLight', label: '消费记录', id: TabEnum.bill, Component: <BillTable /> },
{ label: '通知', id: TableEnum.inform, Component: <InformTable /> } { icon: 'payRecordLight', label: '充值记录', id: TabEnum.pay, Component: <PayRecordTable /> },
{ icon: 'informLight', label: '通知', id: TabEnum.inform, Component: <InformTable /> },
{ icon: 'loginoutLight', label: '登出', id: TabEnum.loginout, Component: () => <></> }
]); ]);
const router = useRouter(); const router = useRouter();
const { userInfo, updateUserInfo, initUserInfo, setUserInfo } = useUserStore(); const theme = useTheme();
const { setLoading } = useGlobalStore(); const { isPc } = useGlobalStore();
const { reset } = useForm<UserUpdateParams>({ const { setUserInfo } = useUserStore();
defaultValues: userInfo as UserType
}); const setCurrentTab = useCallback(
const { toast } = useToast(); (tab: string) => {
const { if (tab === TabEnum.loginout) {
isOpen: isOpenPayModal, clearCookie();
onClose: onClosePayModal, setUserInfo(null);
onOpen: onOpenPayModal router.replace('/login');
} = useDisclosure(); } else {
router.replace({
const { File, onOpen: onOpenSelectFile } = useSelectFile({ query: {
fileType: '.jpg,.png', currentTab: tab
multiple: false }
});
const onclickSave = useCallback(
async (data: UserUpdateParams) => {
setLoading(true);
try {
await putUserInfo({
avatar: data.avatar
});
updateUserInfo({
avatar: data.avatar
});
reset(data);
toast({
title: '更新数据成功',
status: 'success'
});
} catch (error) {
toast({
title: getErrText(error),
status: 'error'
});
}
setLoading(false);
},
[reset, setLoading, toast, updateUserInfo]
);
const onSelectFile = useCallback(
async (e: File[]) => {
const file = e[0];
if (!file) return;
try {
const src = await compressImg({
file,
maxW: 100,
maxH: 100
});
onclickSave({
...userInfo,
avatar: src
});
} catch (err: any) {
toast({
title: typeof err === 'string' ? err : '头像选择异常',
status: 'warning'
}); });
} }
}, },
[onclickSave, toast, userInfo] [router, setUserInfo]
); );
const onclickLogOut = useCallback(() => {
clearCookie();
setUserInfo(null);
router.replace('/login');
}, [router, setUserInfo]);
useQuery(['init'], initUserInfo, {
onSuccess(res) {
reset(res);
}
});
return ( return (
<Box h={'100%'} overflow={'overlay'}> <PageContainer>
<Box py={[5, 10]} px={'5vw'}> <Flex flexDirection={['column', 'row']} h={'100%'} pt={[4, 0]}>
<Grid gridTemplateColumns={['1fr', '3fr 300px']} gridGap={4}> {isPc ? (
<Card px={6} py={4}> <Flex
<Flex justifyContent={'space-between'}> flexDirection={'column'}
<Box fontSize={'xl'} fontWeight={'bold'}> p={4}
账号信息 h={'100%'}
</Box> flex={'0 0 200px'}
<Button variant={'base'} size={'xs'} onClick={onclickLogOut}> borderRight={theme.borders.base}
退出登录 >
</Button> <SideTabs
</Flex> flex={1}
<Flex mt={6} alignItems={'center'}> mx={'auto'}
<Box flex={'0 0 50px'}>头像:</Box> mt={2}
<Avatar w={'100%'}
src={userInfo?.avatar} list={tabList.current}
w={['28px', '36px']} activeId={currentTab}
h={['28px', '36px']} onChange={setCurrentTab}
cursor={'pointer'} />
title={'点击切换头像'} </Flex>
onClick={onOpenSelectFile} ) : (
/> <Box mb={3}>
</Flex>
<Flex mt={6} alignItems={'center'}>
<Box flex={'0 0 50px'}>账号:</Box>
<Box>{userInfo?.username}</Box>
</Flex>
{feConfigs?.show_userDetail && (
<Box mt={6}>
<Flex alignItems={'center'}>
<Box flex={'0 0 50px'}>余额:</Box>
<Box>
<strong>{userInfo?.balance}</strong> 元
</Box>
<Button size={['xs', 'sm']} w={['70px', '80px']} ml={5} onClick={onOpenPayModal}>
充值
</Button>
</Flex>
</Box>
)}
</Card>
</Grid>
{feConfigs?.show_userDetail && (
<Card mt={4} px={[3, 6]} py={4}>
<Tabs <Tabs
m={'auto'} m={'auto'}
w={'200px'} w={'90%'}
list={tableList.current} size={isPc ? 'md' : 'sm'}
activeId={tableType} list={tabList.current.map((item) => ({
size={'sm'} id: item.id,
onChange={(id: any) => router.replace(`/number?type=${id}`)} label: item.label
}))}
activeId={currentTab}
onChange={setCurrentTab}
/> />
<Box minH={'300px'}> </Box>
{(() => {
const item = tableList.current.find((item) => item.id === tableType);
return item ? item.Component : null;
})()}
</Box>
</Card>
)} )}
</Box>
{isOpenPayModal && <PayModal onClose={onClosePayModal} />} <Box flex={'1 0 0'} h={'100%'} pb={[4, 0]}>
<File onSelect={onSelectFile} /> {currentTab === TabEnum.info && <UserInfo />}
</Box> {currentTab === TabEnum.bill && <BillTable />}
{currentTab === TabEnum.pay && <PayRecordTable />}
{currentTab === TabEnum.inform && <InformTable />}
</Box>
</Flex>
</PageContainer>
); );
}; };
export async function getServerSideProps({ query }: any) { export async function getServerSideProps({ query }: any) {
return { return {
props: { props: {
tableType: query?.type || TableEnum.bill currentTab: query?.currentTab || TabEnum.info
} }
}; };
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment