Skip to content

J
jinfa-admin
Commit e27b5bd6 authored by alwayOnlie's avatar alwayOnlie
Browse files
Options

‘多级菜单

parent 2ce5f316
Hide whitespace changes
Inline Side-by-side
Showing with 1091 additions and 159 deletions
config/config.ts
View file @ e27b5bd6
......@@ -46,7 +46,20 @@ export default defineConfig({
},
// 自定义修改webpack配置
chainWebpack(memo, { env, webpack, createCSSRule }) {
chainWebpack: function (config, { webpack }) {
config.module
.rule('svg')
.exclude.add(/pages/)
.end(); // 给内置的添加 exclude，这里根据自己的情况处理
config.module
.rule('svgr')
.test(/.svg$/)
.include.add(/pages/)
.end() // include 指定需要直接 svgr 的情况
.use('@svgr/webpack')
.loader(require.resolve('@svgr/webpack'));
},
cssLoader: {
......
package.json
View file @ e27b5bd6
......@@ -87,6 +87,7 @@
"yorkie": "^2.0.0"
},
"devDependencies": {
"@svgr/webpack": "^5.5.0",
"@types/sortablejs": "^1.10.6",
"async": "^3.2.0",
"axios": "^0.19.2",
......
src/asserts/imgs/default_avatar.svg 0 → 100644
View file @ e27b5bd6
<?xml version="1.0" encoding="UTF-8"?>
<svg width="56px" height="56px" viewBox="0 0 56 56" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>我</title>
<defs>
<circle id="path-1" cx="28" cy="28" r="28"></circle>
</defs>
<g id="我" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g>
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Mask" fill="#E6E7EB" xlink:href="#path-1"></use>
<path d="M33.6555679,41.9707886 C33.6555679,39.4830014 35.5358268,40.29543 36.3612399,35.7393901 C36.7035576,33.8493771 38.3642448,35.7089168 38.6821448,31.3941714 C38.6821448,29.6745403 37.7757776,29.2472439 37.7757776,29.2472439 C37.7757776,29.2472439 38.2364274,26.702535 38.4170246,24.7441009 C38.640259,22.3042277 37.0383622,16 28.4925336,16 C19.9463292,16 18.3434933,22.3042277 18.5680425,24.7441009 C18.7482641,26.702535 19.2089139,29.2472439 19.2089139,29.2472439 C19.2089139,29.2472439 18.3025467,29.6745403 18.3025467,31.3941714 C18.6196954,35.7089168 20.2801947,33.8493771 20.6227003,35.7393901 C21.4491464,40.2953342 23.3279966,39.4830014 23.3279966,41.9707886 C23.3279966,46.1150562 21.3612426,48.0505874 15.2037493,50.3452814 C9.02681572,52.6468751 4,55.4864395 4,57.0869565 L4,61 L52.9999992,61 C52.9999992,61 53,58.6864194 53,57.0869565 C53,55.4864395 47.9580635,52.6468751 41.78113,50.3452814 C35.6234488,48.0505874 33.6555679,46.1150562 33.6555679,41.9707886 Z" fill="#FAFAFA" mask="url(#mask-2)"></path>
</g>
</g>
</svg>
\ No newline at end of file
src/asserts/menuIcon/afterSale.svg 0 → 100644
View file @ e27b5bd6
<svg t="1608803349400" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2941" width="200" height="200"><path d="M688.64 736.213333a42.666667 42.666667 0 0 1 5.845333 60.032c-2.986667 3.669333-6.058667 7.253333-9.216 10.752l-3.754666 3.968H896a42.666667 42.666667 0 0 1 42.368 37.717334l0.298667 4.992a42.666667 42.666667 0 0 1-37.674667 42.368l-4.992 0.298666h-320.085333v-106.069333l16.512-12.8c12.842667-10.026667 25.088-21.973333 36.181333-35.413333a42.666667 42.666667 0 0 1 60.032-5.845334zM512 256.64c117.930667 0 196.522667 82.432 236.330667 201.130667a42.666667 42.666667 0 1 1-80.896 27.093333C637.994667 397.056 585.386667 342.016 512 342.016c-118.272 0-179.157333 102.4-167.936 252.16 5.418667 72.021333 34.304 132.48 79.573333 172.288l8.106667 6.826667 16.213333 12.8v110.250666H169.514667a42.666667 42.666667 0 0 1-4.992-85.077333l4.992-0.256 177.621333-0.042667-3.413333-3.584C297.856 756.906667 268.501333 689.877333 260.266667 613.973333l-1.237334-13.482666c-14.506667-193.109333 75.093333-343.893333 253.013334-343.893334z m275.541333 311.466667a42.666667 42.666667 0 0 1-1.92 60.330666c-56.618667 53.162667-136.533333 79.061333-237.738666 79.061334a42.666667 42.666667 0 1 1 0-85.333334c81.066667 0 140.16-19.157333 179.328-55.893333a42.666667 42.666667 0 0 1 60.330666 1.834667zM512 85.333333c190.506667 0 349.056 154.026667 378.965333 357.290667l1.194667 9.301333 14.08 9.045334c4.010667 2.688 6.997333 4.949333 10.368 7.808 11.818667 10.026667 20.053333 21.205333 21.76 37.034666L938.666667 512v127.701333a42.666667 42.666667 0 0 1-85.034667 4.992L853.333333 639.701333v-111.36l-13.781333-8.917333-5.333333-3.84-2.56-2.090667c-12.629333-10.325333-21.12-21.546667-22.784-39.082666C792.32 301.44 663.637333 170.666667 512 170.666667c-151.210667 0-279.637333 130.048-296.746667 302.421333-1.706667 17.194667-9.984 28.458667-22.314666 38.826667l-5.12 4.138666-5.888 4.181334-11.264 7.381333v112.085333a42.666667 42.666667 0 0 1-37.674667 42.368L128 682.368a42.666667 42.666667 0 0 1-42.368-37.674667L85.333333 639.701333V512c0-18.901333 8.533333-31.786667 21.546667-43.178667 3.413333-2.944 6.4-5.248 10.410667-8.106666l14.592-9.685334 1.408-9.941333c29.866667-198.656 182.698667-349.866667 367.786666-355.584L512 85.333333z" fill="currentColor" p-id="2942"></path></svg>
src/asserts/menuIcon/channel.svg 0 → 100644
View file @ e27b5bd6
<svg t="1608803063200" fill="currentColor" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1598" width="200" height="200"><path d="M597.333333 85.333333a85.333333 85.333333 0 0 1 85.333334 85.333334v170.666666a85.333333 85.333333 0 0 1-85.333334 85.333334h-42.666666v42.666666h256v128h42.666666a85.333333 85.333333 0 0 1 85.333334 85.333334v170.666666a85.333333 85.333333 0 0 1-85.333334 85.333334h-170.666666a85.333333 85.333333 0 0 1-85.333334-85.333334v-170.666666a85.333333 85.333333 0 0 1 85.333334-85.333334h42.666666v-42.666666H298.666667v42.666666h42.666666a85.333333 85.333333 0 0 1 85.333334 85.333334v170.666666a85.333333 85.333333 0 0 1-85.333334 85.333334H170.666667a85.333333 85.333333 0 0 1-85.333334-85.333334v-170.666666a85.333333 85.333333 0 0 1 85.333334-85.333334h42.666666v-128h256v-42.666666h-42.666666a85.333333 85.333333 0 0 1-85.333334-85.333334V170.666667a85.333333 85.333333 0 0 1 85.333334-85.333334h170.666666zM341.333333 682.666667H170.666667v170.666666h170.666666v-170.666666z m512 0h-170.666666v170.666666h170.666666v-170.666666zM597.333333 170.666667h-170.666666v170.666666h170.666666V170.666667z" p-id="1599"></path></svg>
src/asserts/menuIcon/commodity.svg 0 → 100644
View file @ e27b5bd6
<svg t="1608803121895" fill="currentColor" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1732" width="200" height="200"><path d="M551.68 95.573333l341.418667 179.114667a85.333333 85.333333 0 0 1 45.653333 75.562667v323.584a85.333333 85.333333 0 0 1-45.525333 75.52l-341.418667 179.925333a85.333333 85.333333 0 0 1-79.573333 0l-341.333334-179.925333a85.333333 85.333333 0 0 1-45.525333-75.52V350.293333a85.333333 85.333333 0 0 1 45.653333-75.52l341.376-179.157333a85.333333 85.333333 0 0 1 79.317334 0zM170.666667 378.368v295.466667l298.666666 157.44v-303.573334l-85.333333-42.666666V597.333333a42.666667 42.666667 0 0 1-85.034667 4.992L298.666667 597.333333v-154.965333l-128-64z m679.552-29.781333l-296.106667 156.757333a42.666667 42.666667 0 0 1 0.256 1.706667L554.666667 512v319.274667l298.794666-157.44V350.293333l-3.242666-1.664z m-338.133334-177.450667L236.373333 315.776l253.738667 126.890667 268.544-142.165334L512 171.136z" p-id="1733"></path></svg>
src/asserts/menuIcon/contract.svg 0 → 100644
View file @ e27b5bd6
<svg t="1608802992555" class="icon" fill="currentColor" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1330" width="200" height="200"><path d="M853.333333 853.333333a42.666667 42.666667 0 0 1 0 85.333334H170.666667a42.666667 42.666667 0 0 1 0-85.333334h682.666666zM512 85.333333c129.493333 0 234.666667 103.808 234.666667 232.106667 0 47.488-14.506667 102.272-38.912 151.893333h53.376c55.936 0 105.173333 35.712 118.314666 87.210667l1.578667 7.125333 13.184 71.082667c11.733333 63.530667-34.56 121.898667-100.608 131.84-4.266667 0.597333-8.533333 1.024-12.8 1.28l-6.485333 0.128H249.685333C183.424 768 128 718.122667 128 654.208c0-4.352 0.256-8.661333 0.810667-13.013333l0.981333-6.4 13.184-71.125334c9.813333-52.906667 57.045333-90.88 112.298667-94.122666L262.869333 469.333333h53.333334C291.84 419.669333 277.333333 364.885333 277.333333 317.44 277.333333 189.184 382.506667 85.333333 512 85.333333z m0 85.333334c-82.602667 0-149.333333 65.834667-149.333333 146.773333 0 32.597333 10.410667 72.533333 27.861333 109.568 4.821333 10.154667 16.853333 24.192 36.096 41.984L426.24 469.333333H426.666667v85.333334H262.826667c-17.066667 0-30.805333 9.301333-34.986667 20.949333l-0.981333 3.584-13.184 71.082667a21.504 21.504 0 0 0-0.341334 3.925333c0 13.44 12.885333 26.154667 31.232 28.16l5.12 0.298667h524.629334c2.218667 0 4.437333-0.170667 6.656-0.512 18.432-2.730667 29.866667-15.488 29.653333-28.330667l-0.341333-3.541333-13.141334-71.082667c-2.261333-12.074667-14.634667-22.485333-30.976-24.277333L761.130667 554.666667h-163.456v-85.333334h0.042666l-0.298666-0.341333c14.634667-11.690667 25.813333-20.48 35.669333-41.258667 17.664-37.162667 28.245333-77.397333 28.245333-110.250666C661.333333 236.501333 594.602667 170.666667 512 170.666667z" p-id="1331"></path></svg>
src/asserts/menuIcon/home.svg 0 → 100644
View file @ e27b5bd6
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>能力中心 / 首页</title>
<g id="能力中心-/-首页" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Home" transform="translate(3.000000, 2.000000)" fill="currentColor">
<path d="M2,20 C0.8954305,20 0,19.1045695 0,18 L0,8.56503803 C0,7.97781893 0.25806653,7.42026991 0.705753892,7.04026689 L7.70575389,1.09857339 C8.45225309,0.464934898 9.54774691,0.464934898 10.2942461,1.09857339 L17.2942461,7.04026689 C17.7419335,7.42026991 18,7.97781893 18,8.56503803 L18,18 C18,19.1045695 17.1045695,20 16,20 L2,20 Z M9,2.62334452 L2,8.56503803 L2,18 L5,18 L5,18 L5,13 C5,11.8954305 5.8954305,11 7,11 L11,11 C12.1045695,11 13,11.8954305 13,13 L13,18 L16,18 L16,8.56503803 L9,2.62334452 Z M11,13 L7,13 L7,18 L11,18 L11,13 Z" id="🎨-Icon-Сolor"></path>
</g>
</g>
</svg>
src/asserts/menuIcon/logistics.svg 0 → 100644
View file @ e27b5bd6
<svg t="1608803295407" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2807" width="200" height="200"><path d="M810.666667 768a42.666667 42.666667 0 1 1-85.333334 0 42.666667 42.666667 0 0 1 85.333334 0z m-298.666667-128H170.666667l0.682666-426.666667H640l-0.682667 426.666667H512z m-213.333333 128a42.666667 42.666667 0 1 1-85.333334 0 42.666667 42.666667 0 0 1 85.333334 0z m554.666666-235.52V640h-128v-209.877333l128 102.357333z m69.333334-53.802667L725.333333 320.810667V213.333333c0-47.061333-34.688-85.333333-77.354666-85.333333H162.645333C120.021333 128 85.333333 166.272 85.333333 213.333333v426.666667c0 37.248 21.888 68.650667 52.096 80.298667C131.456 735.061333 128 751.104 128 768c0 70.570667 57.429333 128 128 128s128-57.429333 128-128c0-15.061333-3.072-29.269333-7.893333-42.666667h271.786666A125.354667 125.354667 0 0 0 640 768c0 70.570667 57.429333 128 128 128s128-57.429333 128-128c0-15.061333-3.072-29.269333-7.893333-42.666667H896a42.666667 42.666667 0 0 0 42.666667-42.666666v-170.666667a42.666667 42.666667 0 0 0-16-33.322667z" fill="currentColor" p-id="2808"></path></svg>
src/asserts/menuIcon/maching.svg 0 → 100644
View file @ e27b5bd6
<svg t="1608803279270" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2673" width="200" height="200"><path d="M768 810.666667H256c-23.509333 0-42.666667-19.114667-42.666667-42.666667v-213.333333h85.333334v128a42.666667 42.666667 0 0 0 42.666666 42.666666h341.333334a42.666667 42.666667 0 0 0 42.666666-42.666666v-128h85.333334v213.333333c0 23.552-19.157333 42.666667-42.666667 42.666667zM355.925333 236.928A42.410667 42.410667 0 0 1 394.069333 213.333333h235.861334c16.256 0 30.890667 9.045333 38.144 23.594667L784.298667 469.333333H682.666667a42.666667 42.666667 0 0 0-42.666667 42.666667v128H384v-128a42.666667 42.666667 0 0 0-42.666667-42.666667H239.701333l116.224-232.405333z m531.072 246.997333l-142.592-285.184A127.317333 127.317333 0 0 0 629.930667 128H394.069333a127.317333 127.317333 0 0 0-114.474666 70.741333l-142.592 285.184a85.845333 85.845333 0 0 0-9.002667 38.144V768c0 70.570667 57.429333 128 128 128h512c70.570667 0 128-57.429333 128-128v-245.930667c0-13.141333-3.114667-26.368-9.002667-38.144z" fill="currentColor" p-id="2674"></path></svg>
src/asserts/menuIcon/member.svg 0 → 100644
View file @ e27b5bd6
<svg fill="currentColor" t="1608802959577" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1196" width="200" height="200"><path d="M469.333333 512a213.333333 213.333333 0 0 1 213.12 204.074667L682.666667 725.333333v85.333334a42.666667 42.666667 0 0 1-85.034667 4.992L597.333333 810.666667v-85.333334a128 128 0 0 0-120.490666-127.786666L469.333333 597.333333H298.666667a128 128 0 0 0-127.786667 120.490667L170.666667 725.333333v85.333334a42.666667 42.666667 0 0 1-85.034667 4.992L85.333333 810.666667v-85.333334a213.333333 213.333333 0 0 1 204.074667-213.12L298.666667 512h170.666666z m298.666667 0a170.666667 170.666667 0 0 1 170.453333 162.133333L938.666667 682.666667v128a42.666667 42.666667 0 0 1-85.034667 4.992L853.333333 810.666667v-128a85.333333 85.333333 0 0 0-78.933333-85.12L768 597.333333h-21.162667a42.666667 42.666667 0 0 1-4.992-85.034666l4.992-0.298667H768zM384 128a170.666667 170.666667 0 1 1 0 341.333333 170.666667 170.666667 0 0 1 0-341.333333z m362.666667 42.666667a149.333333 149.333333 0 1 1 0 298.666666 149.333333 149.333333 0 0 1 0-298.666666zM384 213.333333a85.333333 85.333333 0 1 0 0 170.666667 85.333333 85.333333 0 0 0 0-170.666667z m362.666667 42.666667a64 64 0 1 0 0 128 64 64 0 0 0 0-128z" p-id="1197"></path></svg>
src/asserts/menuIcon/order.svg 0 → 100644
View file @ e27b5bd6
<svg t="1608802866586" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1062" width="200" height="200"><path d="M640 682.666667a42.666667 42.666667 0 1 1 0 85.333333H384a42.666667 42.666667 0 0 1 0-85.333333z m-128-170.666667a42.666667 42.666667 0 0 1 0 85.333333H384a42.666667 42.666667 0 0 1 0-85.333333z m232.277333 341.333333H279.68C266.666667 853.333333 256 843.776 256 832v-640c0-11.776 10.666667-21.333333 23.68-21.333333H512v134.4C512 372.138667 563.925333 426.666667 627.797333 426.666667H768v405.333333c0 11.776-10.624 21.333333-23.722667 21.333333zM597.333333 212.394667L714.325333 341.333333h-86.528C610.986667 341.333333 597.333333 325.077333 597.333333 305.066667V212.394667z m244.906667 142.933333l-232.277333-256a42.666667 42.666667 0 0 0-31.573334-13.994667h-298.666666C219.52 85.333333 170.666667 133.205333 170.666667 192v640C170.666667 890.794667 219.562667 938.666667 279.68 938.666667h464.64C804.352 938.666667 853.333333 890.794667 853.333333 832V384a42.666667 42.666667 0 0 0-11.093333-28.672z" fill="currentColor" p-id="1063"></path></svg>
src/asserts/menuIcon/payment.svg 0 → 100644
View file @ e27b5bd6
<svg t="1608803257774" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2539" width="200" height="200"><path d="M724.650667 145.066667l3.968 6.4L813.525333 298.666667 853.333333 298.666667a85.333333 85.333333 0 0 1 85.333334 85.333333v426.666667a85.333333 85.333333 0 0 1-85.333334 85.333333H170.666667a85.333333 85.333333 0 0 1-85.333334-85.333333V384a85.333333 85.333333 0 0 1 85.333334-85.333333l47.018666-0.042667 336.085334-194.005333a128 128 0 0 1 170.88 40.448zM853.333333 384H170.666667v426.666667h682.666666V384z m-128 127.317333a42.666667 42.666667 0 0 1 0 85.333334H298.666667a42.666667 42.666667 0 0 1 0-85.333334h426.666666z m-124.458666-335.018666l-4.437334 2.218666L388.352 298.666667h326.656l-60.288-104.448a42.666667 42.666667 0 0 0-53.845333-17.877334z" p-id="2540" fill="currentColor"></path></svg>
src/asserts/menuIcon/purchase.svg 0 → 100644
View file @ e27b5bd6
<svg t="1608803036658" class="icon" viewBox="0 0 1024 1024" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1464" width="200" height="200"><path d="M597.333333 85.333333c55.722667 0 103.168 35.626667 120.746667 85.333334h59.392a118.528 118.528 0 0 1 118.314667 111.317333l0.213333 7.210667v530.944a118.528 118.528 0 0 1-111.317333 118.314666l-7.210667 0.213334H246.528a118.528 118.528 0 0 1-118.314667-111.317334L128 820.138667V289.194667a118.528 118.528 0 0 1 111.317333-118.314667L246.528 170.666667H305.92A128.042667 128.042667 0 0 1 426.666667 85.333333h170.666666zM305.962667 256H246.528a33.194667 33.194667 0 0 0-32.853333 28.672L213.333333 289.194667v530.944c0 16.810667 12.501333 30.72 28.672 32.853333l4.522667 0.341333h530.944c16.810667 0 30.72-12.501333 32.853333-28.672l0.341334-4.522666V289.194667a33.194667 33.194667 0 0 0-28.672-32.853334L777.472 256H718.08A128.042667 128.042667 0 0 1 597.333333 341.333333h-170.666666a128.042667 128.042667 0 0 1-120.704-85.333333z m406.869333 183.168a42.666667 42.666667 0 0 1 3.541333 56.32l-3.541333 4.010667-213.333333 213.333333a42.453333 42.453333 0 0 1-22.613334 11.818667l-5.034666 0.597333h-5.034667a42.496 42.496 0 0 1-23.637333-8.874667l-4.010667-3.541333-106.666667-106.666667a42.666667 42.666667 0 0 1 56.32-63.872l4.010667 3.541334L469.333333 622.293333l183.168-183.125333a42.666667 42.666667 0 0 1 60.330667 0zM597.333333 170.666667h-170.666666a42.666667 42.666667 0 0 0-4.992 85.034666L426.666667 256h170.666666a42.666667 42.666667 0 0 0 4.992-85.034667L597.333333 170.666667z" p-id="1465"></path></svg>
src/asserts/menuIcon/settlement.svg 0 → 100644
View file @ e27b5bd6
<svg t="1608803235784" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2405" width="200" height="200"><path d="M810.666667 128a85.333333 85.333333 0 0 1 85.333333 85.333333v597.333334a85.333333 85.333333 0 0 1-85.333333 85.333333H213.333333a85.333333 85.333333 0 0 1-85.333333-85.333333V213.333333a85.333333 85.333333 0 0 1 85.333333-85.333333h597.333334z m0 85.333333H213.333333v597.333334h597.333334V213.333333z m-353.152 354.261334l0.298666 0.341333a42.453333 42.453333 0 0 1 0 60.032L329.301333 756.48a42.453333 42.453333 0 0 1-60.032 0l-0.341333-0.298667a42.453333 42.453333 0 0 1 0-60.032l128.554667-128.554666a42.453333 42.453333 0 0 1 60.032 0z m169.685333 0l34.090667 34.090666 34.133333-34.090666a42.453333 42.453333 0 0 1 59.989333 0l0.341334 0.341333a42.453333 42.453333 0 0 1 0 60.032l-34.133334 34.090667 34.133334 34.090666a42.453333 42.453333 0 0 1 0 60.032l-0.341334 0.298667a42.453333 42.453333 0 0 1-59.989333 0l-34.133333-34.090667-34.090667 34.133334a42.453333 42.453333 0 0 1-59.989333 0l-0.341334-0.341334a42.453333 42.453333 0 0 1 0-60.032l34.090667-34.090666-34.090667-34.133334a42.453333 42.453333 0 0 1 0-59.989333l0.341334-0.341333a42.453333 42.453333 0 0 1 59.989333 0zM384 256a42.666667 42.666667 0 0 1 42.666667 42.666667v42.666666h42.88c23.466667 0 42.453333 18.986667 42.453333 42.453334v0.426666c0 23.466667-18.986667 42.453333-42.453333 42.453334H426.666667v42.666666a42.666667 42.666667 0 0 1-85.333334 0v-42.666666H298.453333A42.453333 42.453333 0 0 1 256 384.213333v-0.426666c0-23.466667 18.986667-42.453333 42.453333-42.453334H341.333333V298.666667a42.666667 42.666667 0 0 1 42.666667-42.666667z m341.546667 85.333333c23.466667 0 42.453333 18.986667 42.453333 42.453334v0.426666c0 23.466667-18.986667 42.453333-42.453333 42.453334h-128.469334a42.453333 42.453333 0 0 1-42.453333-42.453334v-0.426666c0-23.466667 18.986667-42.453333 42.453333-42.453334h128.469334z" p-id="2406" fill="currentColor"></path></svg>
src/asserts/menuIcon/shop.svg 0 → 100644
View file @ e27b5bd6
<svg t="1608803213938" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2271" width="200" height="200"><path d="M788.906667 85.717333a65.28 65.28 0 0 1 60.245333 39.850667l17.92 40.832 38.058667 85.12 16.256 37.546667 6.997333 17.152 3.541333 9.6 1.706667 5.12c2.432 7.808 2.986667 12.16 2.986667 16.341333 0 63.146667-31.573333 121.6-83.285334 156.416v324.096c0 63.872-48.298667 116.821333-110.122666 120.661333L736 938.666667H288c-62.848 0-113.493333-50.602667-117.12-113.578667L170.666667 817.792l-0.042667-322.645333A188.330667 188.330667 0 0 1 85.973333 347.306667l-0.213333-10.752 0.341333-4.096 0.938667-4.864 1.792-6.229334 2.816-8.106666L97.408 298.666667l14.165333-32.682667 57.216-126.208 6.4-14.592a65.28 65.28 0 0 1 60.074667-39.466667H788.906667z m-159.786667 396.458667a187.733333 187.733333 0 0 1-117.418667 42.325333 189.269333 189.269333 0 0 1-118.442666-42.197333 188.16 188.16 0 0 1-118.784 42.496c-6.314667 0-12.501333-0.256-18.517334-0.768L256 817.792c0 18.517333 12.586667 33.152 28.074667 35.285333L288 853.333333h448c15.872 0 29.696-13.226667 31.744-31.018666l0.256-4.522667 0.042667-294.314667a226.133333 226.133333 0 0 1-19.626667 0.896 188.245333 188.245333 0 0 1-119.296-42.197333z m146.645333-311.168H248.277333L190.122667 299.306667l-13.098667 30.165333-4.693333 11.648-1.024 2.688 0.042666 1.578667A103.04 103.04 0 0 0 219.306667 424.96l6.570666 3.84c12.928 6.869333 28.928 10.624 48.426667 10.624a102.826667 102.826667 0 0 0 58.666667-18.474667l6.272-4.736 53.76-43.946666 53.973333 43.690666c18.389333 14.933333 41.344 23.04 64.170667 23.168a102.4 102.4 0 0 0 57.045333-17.877333l6.997333-5.205333 53.845334-43.946667 53.930666 43.861333a102.826667 102.826667 0 0 0 65.066667 23.04c20.053333-0.085333 36.352-4.010667 49.493333-11.221333a103.210667 103.210667 0 0 0 53.461334-83.328v-1.493333l-3.84-10.154667-11.648-27.648-28.288-63.744-31.445334-70.442667z" p-id="2272" fill="currentColor"></path></svg>
src/asserts/menuIcon/system.svg 0 → 100644
View file @ e27b5bd6
<svg t="1608803189184" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2134" width="200" height="200"><path d="M192 490.709333h640v42.666667h-640z" p-id="2135"></path><path d="M192 874.709333m21.333333 0l597.333334 0q21.333333 0 21.333333 21.333334l0 0q0 21.333333-21.333333 21.333333l-597.333334 0q-21.333333 0-21.333333-21.333333l0 0q0-21.333333 21.333333-21.333334Z" p-id="2136"></path><path d="M490.666667 746.709333h42.666666v85.333334h-42.666666z" p-id="2137"></path><path d="M469.333333 725.333333H171.349333a85.333333 85.333333 0 0 1-85.333333-85.333333V216.32a85.333333 85.333333 0 0 1 85.333333-85.333333H853.333333a85.333333 85.333333 0 0 1 85.333334 85.333333V640a85.333333 85.333333 0 0 1-85.333334 85.333333h-298.666666v128h256a42.666667 42.666667 0 0 1 0 85.333334H213.333333a42.666667 42.666667 0 0 1 0-85.333334h256v-128z m384-170.666666H171.306667l0.042666 85.333333H853.333333v-85.333333z m0-338.346667H171.349333V469.333333H853.333333V216.32z" p-id="2138" fill="currentColor"></path></svg>
src/asserts/menuIcon/transcation.svg 0 → 100644
View file @ e27b5bd6
<svg t="1608803160436" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2000" width="200" height="200"><path d="M640 469.333333a42.666667 42.666667 0 0 0-42.666667 42.666667c0 47.061333-38.272 85.333333-85.333333 85.333333s-85.333333-38.272-85.333333-85.333333a42.666667 42.666667 0 1 0-85.333334 0c0 94.122667 76.544 170.666667 170.666667 170.666667s170.666667-76.544 170.666667-170.666667a42.666667 42.666667 0 0 0-42.666667-42.666667m128 341.333334H256c-23.552 0-42.666667-19.157333-42.666667-42.666667V384h597.333334v384c0 23.509333-19.114667 42.666667-42.666667 42.666667zM346.496 225.834667A43.093333 43.093333 0 0 1 376.661333 213.333333h270.677334c11.221333 0 22.186667 4.565333 30.165333 12.501334L750.336 298.666667H273.664l72.832-72.832z m512 60.330666l-120.661333-120.661333A127.061333 127.061333 0 0 0 647.338667 128H376.661333c-34.176 0-66.346667 13.312-90.496 37.504L165.504 286.165333A127.061333 127.061333 0 0 0 128 376.704V768c0 70.570667 57.429333 128 128 128h512c70.570667 0 128-57.429333 128-128V376.704c0-34.218667-13.312-66.389333-37.504-90.538667z" fill="currentColor" p-id="2001"></path></svg>
src/global.css 0 → 100644
View file @ e27b5bd6
html,
body,
#root {
height: 100%;
}
.colorWeak {
filter: invert(80%);
}
/*全局高度*/
.ant-layout {
min-height: 100vh !important;
}
.wrapper-white {
background: #fff;
border-radius: 8px;
padding: 24px;
}
.connectBtn {
width: 80px;
height: 32px;
line-height: 32px;
background: #909399;
color: #fff;
text-align: center;
cursor: pointer;
}
.common-wrapper {
background-color: #fff;
padding: 32px 24px;
border-radius: 5px;
}
.common-wrapper-gray {
background-color: #F5F6FA;
padding: 32px 24px;
border-radius: 5px;
}
.commonShowBlock {
display: block;
}
.commonShow {
display: inline-block;
}
.commonHide {
display: none;
}
.commonPickColor {
color: #00B37A;
}
.commonStatus {
display: inline-block;
width: 8px;
height: 8px;
margin-right: 6px;
border-radius: 50%;
vertical-align: middle;
}
.commonStatusStop {
display: inline-block;
width: 8px;
height: 8px;
margin-right: 6px;
border-radius: 50%;
vertical-align: middle;
background-color: #C1C7D0;
}
.commonStatusModify {
display: inline-block;
width: 8px;
height: 8px;
margin-right: 6px;
border-radius: 50%;
vertical-align: middle;
background-color: #669EDE;
}
.commonStatusValid {
display: inline-block;
width: 8px;
height: 8px;
margin-right: 6px;
border-radius: 50%;
vertical-align: middle;
background-color: #41CC9E;
}
.commonStatusInvalid {
display: inline-block;
width: 8px;
height: 8px;
margin-right: 6px;
border-radius: 50%;
vertical-align: middle;
background-color: #FFC400;
}
.commonPanelTitle {
padding-left: 8px;
position: relative;
}
.commonPanelTitle::before {
content: "";
display: inline-block;
position: absolute;
left: 0;
top: 50%;
margin-top: -0.42667rem;
width: 2px;
height: 0.85333rem;
background-color: #00B37A;
box-shadow: 0 0.14933rem 0.256rem 0 rgba(97, 144, 232, 0.2);
border-radius: 1px;
}
.mr-10 {
margin-right: 10px;
}
.mr-20 {
margin-right: 20px;
}
.mr-30 {
margin-right: 30px;
}
.mr-50 {
margin-right: 50px;
}
.mr-100 {
margin-right: 100px;
}
.ml-10 {
margin-left: 10px;
}
.ml-20 {
margin-left: 20px;
}
.ml-30 {
margin-left: 30px;
}
.ml-50 {
margin-left: 50px;
}
.ml-100 {
margin-left: 100px;
}
.mt-10 {
margin-top: 10px;
}
.mt-20 {
margin-top: 20px;
}
.mt-30 {
margin-top: 30px;
}
.mt-50 {
margin-top: 50px;
}
.mt-100 {
margin-top: 100px;
}
.mb-10 {
margin-bottom: 10px;
}
.mb-20 {
margin-bottom: 20px;
}
.mb-30 {
margin-bottom: 30px;
}
.mb-50 {
margin-bottom: 50px;
}
.mb-100 {
margin-bottom: 100px;
}
canvas {
display: block;
}
body {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
ul,
ol {
list-style: none;
}
#root .ant-pro-global-header {
background: '#fff';
}
#root .ant-pro-global-header-trigger:hover {
background: '#fff';
}
#root .ant-pro-sider-menu-sider.light .ant-pro-sider-menu-logo {
background: #38414A;
}
#root .ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow {
width: 14px;
}
#root .ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow::before {
width: 10px;
height: 10px;
background: none;
border-right: 2px solid #595959;
border-bottom: 2px solid #595959;
transform: rotate(-45deg) translateY(-6px);
border-radius: 0;
}
#root .ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow::after {
display: none;
}
#root .ant-menu-submenu-open.ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow::before {
transform: rotate(45deg) translateY(-2px) translateX(-6px);
}
#root .ant-menu-submenu-selected {
background: rgba(0, 0, 0, 0.02);
color: rgba(0, 0, 0, 0.85);
}
#root .ant-menu-submenu-selected.ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow::before {
border-color: rgba(0, 0, 0, 0.85);
}
#root .ant-menu-sub .lx-menu-item-link {
display: block;
position: relative;
padding-left: 18px;
}
#root .ant-menu-sub .lx-menu-item-link::before {
content: '';
width: 8px;
height: 8px;
border: 1px solid #D8DEE4;
position: absolute;
transform: rotate(45deg);
top: 0;
bottom: 0;
left: 0px;
margin: auto 0;
}
#root .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
background: none;
}
#root .ant-menu-sub .ant-menu-item-selected .lx-menu-item-link::before {
border: 1px solid #00B37A;
}
#root .ant-menu-inline .ant-menu-selected::after,
#root .ant-menu-inline .ant-menu-item-selected::after {
display: none;
}
#root .ant-tree .ant-tree-treenode {
padding-bottom: 0;
padding-right: 16px;
background: #FBFCFD;
border: 1px solid rgba(0, 0, 0, 0.04);
margin-bottom: 4px;
align-items: center;
height: 32px;
}
#root .ant-tree .ant-tree-treenode.ant-tree-treenode-selected {
border-color: #00B37A;
background: #EBF7F2;
}
#root .ant-tree .ant-tree-treenode.ant-tree-treenode:hover {
border-color: #00B37A;
background: #EBF7F2;
}
#root .ant-tree .ant-tree-treenode.ant-tree-treenode-selected .tree-node-circle {
background: #00B37A;
}
#root .tree-node-circle {
width: 4px;
height: 4px;
border-radius: 50%;
margin-right: 12px;
background: #C1C7D0;
}
#root .ant-tree .ant-tree-checkbox {
margin: 0;
}
#root .ant-tree .ant-tree-node-content-wrapper:hover {
background: none;
}
#root .ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected {
background: none;
}
#root .ant-tree .ant-tree-switcher {
width: 28px;
height: 28px;
line-height: 32px;
}
#root .ant-tree .ant-tree-switcher .ant-tree-switcher-icon,
#root .ant-tree .ant-tree-switcher .ant-select-tree-switcher-icon {
font-size: 12px;
}
#root .black-tabs.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab {
margin-right: 0;
}
src/global.less
View file @ e27b5bd6
......@@ -210,11 +210,14 @@ ol {
#root {
.ant-pro-global-header {
background: @header-global-nav-bg;
// background: @header-global-nav-bg;
background: '#fff';
}
.ant-pro-global-header-trigger:hover {
background: @header-global-nav-bg;
background: '#fff';
// background: @header-global-nav-bg;
}
.ant-pro-sider-menu-sider.light .ant-pro-sider-menu-logo {
......
src/layouts/RightContent.tsx
View file @ e27b5bd6
import React, { useState, useEffect, useRef, useCallback, useLayoutEffect } from 'react';
import { Link, history } from 'umi';
import { Menu, Dropdown, List, Avatar, Modal, Badge} from 'antd';
import { Menu, Dropdown, List, Avatar, Modal, Badge } from 'antd';
import { BellOutlined, CaretDownOutlined } from '@ant-design/icons';
import { removeAuth, getAuth } from '@/utils/auth';
import { PublicApi } from '@/services/api';
......@@ -9,7 +9,7 @@ import msgSystem from '@/asserts/msg_system.png';
import msgPlatform from '@/asserts/msg_platform.png';
import { SOCKET_URL } from '@/constants';
import { encryptedByAES } from '@/utils/cryptoAes';
import PwdModal from './components/PwdModal';
import PwdModal from './components/PwdModal';
import styles from './index.less';
type SocketData = {
......@@ -63,15 +63,15 @@ const RightContent: React.FC<{}> = (props) => {
const userInfo = getAuth();
useEffect(() => {
if(visible) {
if (visible) {
setMsgLoading(true);
PublicApi.getMessageMessagePlatformPage({current: '1', pageSize: '4'})
.then((data) => {
if(data.code === 1000) {
setMsgLoading(false);
setMessageData(data.data.data);
}
});
PublicApi.getMessageMessagePlatformPage({ current: '1', pageSize: '4' })
.then((data) => {
if (data.code === 1000) {
setMsgLoading(false);
setMessageData(data.data.data);
}
});
}
}, [visible]);
......@@ -83,8 +83,8 @@ const RightContent: React.FC<{}> = (props) => {
console.log(e);
};
ws.current.onmessage = (e) => {
const data:SocketData = JSON.parse(e.data);
if(data.action === "msg_no_read_message") {
const data: SocketData = JSON.parse(e.data);
if (data.action === "msg_no_read_message") {
setUnReadMsg(+data.data);
}
};
......@@ -116,19 +116,19 @@ const RightContent: React.FC<{}> = (props) => {
{"查看更多 ->"}
</a>
}
renderItem={(item:any) => {
renderItem={(item: any) => {
return (
<List.Item>
{/* <Skeleton paragraph={{ rows: 1 }} loading={loading} active avatar> */}
<div className={styles.msgContainer}>
<div className={styles.msgItemIcon}>
<Avatar src={item.type == 1 ? msgSystem : msgPlatform} />
</div>
<div>
<div className={styles.msgTitle}>{item.title}</div>
<div className={styles.msgTime}>{moment(item.sendTime).format('YYYY-MM-DD HH:mm:ss')}</div>
</div>
<div className={styles.msgContainer}>
<div className={styles.msgItemIcon}>
<Avatar src={item.type == 1 ? msgSystem : msgPlatform} />
</div>
<div>
<div className={styles.msgTitle}>{item.title}</div>
<div className={styles.msgTime}>{moment(item.sendTime).format('YYYY-MM-DD HH:mm:ss')}</div>
</div>
</div>
{/* </Skeleton> */}
</List.Item>
);
......@@ -143,7 +143,7 @@ const RightContent: React.FC<{}> = (props) => {
<Dropdown overlay={menuMessage} trigger={['click']} visible={visible}>
<span className={styles.topMessage}>
<Badge count={unreadMsg} size={"small"}>
<BellOutlined style={{color: "#fff"}} onClick={() => setVisible(!visible)}/>
<BellOutlined style={{ color: "#000" }} onClick={() => setVisible(!visible)} />
</Badge>
</span>
</Dropdown>
......
src/layouts/components/CustomIcon.tsx 0 → 100644
View file @ e27b5bd6
import React, { FC } from 'react'
import { ReactComponent as afterSale } from '../../asserts/menuIcon/afterSale.svg'
import { ReactComponent as channel } from '../../asserts/menuIcon/channel.svg'
import { ReactComponent as contract } from '../../asserts/menuIcon/contract.svg'
import { ReactComponent as logistics } from '../../asserts/menuIcon/logistics.svg'
import { ReactComponent as maching } from '../../asserts/menuIcon/maching.svg'
import { ReactComponent as member } from '../../asserts/menuIcon/member.svg'
import { ReactComponent as order } from '../../asserts/menuIcon/order.svg'
import { ReactComponent as payment } from '../../asserts/menuIcon/payment.svg'
import { ReactComponent as purchase } from '../../asserts/menuIcon/purchase.svg'
import { ReactComponent as settlement } from '../../asserts/menuIcon/settlement.svg'
import { ReactComponent as shop } from '../../asserts/menuIcon/shop.svg'
import { ReactComponent as system } from '../../asserts/menuIcon/system.svg'
import { ReactComponent as transcation } from '../../asserts/menuIcon/transcation.svg'
import { ReactComponent as home } from '../../asserts/menuIcon/home.svg'
import { ReactComponent as commodity } from '../../asserts/menuIcon/commodity.svg'
import Icon from '@ant-design/icons'
import { IconComponentProps } from '@ant-design/icons/lib/components/Icon'
const iconMap = {
afterSale,
channel,
contract,
logistics,
maching,
member,
order,
payment,
purchase,
settlement,
shop,
system,
transcation,
home,
commodity
}
function RenderComponent({ type, ...props }: { type: keyof typeof iconMap }) {
const Component = iconMap[type]
// console.log(Component, 'Component')
return <Component {...props} />
}
const CustomIcon: FC<any> = ({ type, ...props }: { type: keyof typeof iconMap }) => {
// console.log(type, props)
// return <Icon component={() => <RenderComponent type={type} {...props}/>}/>
// @处理未配置icon报错
return <Icon component={channel} />
// return <><span>66</span></>
// return type ? <Icon component={() => <RenderComponent type={type} {...props} />} /> : null
}
export default CustomIcon
src/layouts/components/MenuSlider.tsx
View file @ e27b5bd6
import React, { useRef, useState, useEffect } from 'react'
import { Menu, Layout } from 'antd'
import Logo from './Logo'
import styles from '../index.less'
import MenuUtil from '@/utils/menu'
import { useIntl } from 'umi'
import { MenuDataItem } from '@/utils/typing'
import { getMatchMenu } from '@umijs/route-utils'
import { isDev } from '@/constants'
import { getRouters } from '@/utils/auth'
// 获取当前的选中菜单
export const getSelectedMenuKeys = (
pathname: string,
menuData: MenuDataItem[],
): string[] => {
const menus = getMatchMenu(pathname, menuData);
return menus.map((item) => item.key || item.path || '');
};
const Slider = Layout.Sider
export interface IMenuRouter {
path?: string,
name?: string,
exact?: boolean,
key?: string,
parentKeys?: string[],
locale?: string,
routes?: IMenuRouter[],
children?: IMenuRouter[]
import React, { useState } from 'react'
import { Layout, Menu } from 'antd'
import { Link, history } from 'umi';
import {
BorderOutlined,
} from '@ant-design/icons'
import OuterSider from './OuterSide'
import { GlobalConfig } from '@/global/config'
import styles from '../styles/MenuSlider.less'
import { getRouters } from '@/utils/auth';
import { isDev } from '@/constants';
const { Sider } = Layout
const { SubMenu } = Menu;
export interface MenuSliderProps {
collapseState: boolean | undefined;
menuData: Array<any>;
pathname: string | undefined;
currentSelectKey: string[];
openKeys: string[];
changeOpenKeys: Function;
currentRouter: any;
}
const {
} = Menu
const MenuSlider = (props) => {
const {
menuData,
selectedKeys,
defaultOpenKeysRef
} = props
const { formatMessage } = useIntl();
const menuUtil = new MenuUtil({
formatMessage,
})
// 本地可无权限访问所有路由
const dispatchRoutes = isDev ? menuData : menuData.filter(v => getRouters().includes(v.path))
return (
<Slider className={styles.lxSlider} collapsed={props.collapseState} width={240}>
<Logo />
const MenuSlider: React.FC<MenuSliderProps> = (props) => {
const { menuData, pathname, currentSelectKey = [], openKeys = [], changeOpenKeys } = props
console.log(menuData)
const [innerCollapsed, setInnerCollapsed] = useState(false)
let menuItemsCache = null
const getMenuRouter = (routes: any, pathname: any) => {
const list = routes.filter((item: any) => pathname.indexOf(item.key) > -1)
return list[0]
}
const getMenus = (menuArray: any, hasChildren = false) => {
if (!!menuArray && menuArray.length > 0) {
return menuArray.map((item: any) => {
// 不存在路由表内或者 需要隐藏
if (item.hideInMenu || (!getRouters().includes(item.path) && !isDev)) {
return null
}
if (item.children) {
return (
<SubMenu
key={item.key || item.path}
title={item.name}
>
{getMenus(item.children, true)}
</SubMenu>
)
}
return (
<Menu.Item key={item.key || item.path} className={hasChildren ? styles.menuItem : ""}>
{
hasChildren && <BorderOutlined rotate={45} style={{ fontSize: 6, verticalAlign: 'middle' }} />
}
<Link to={item.path}>
<span>{item.name}</span>
</Link>
</Menu.Item>
)
});
}
}
const menuRouter = getMenuRouter(menuData, pathname)
if (menuRouter && menuRouter.children) {
menuItemsCache = getMenus(menuRouter.children)
}
const handleOpenchange = (keys: any) => {
changeOpenKeys(keys)
}
/** @tofix 这里体验不好，不太明白点击子路由的时候为什么需要去reload */
const clickMenuItem = ({ item, key, keyPath, domEvent }) => {
// 对比url和点击项的key 相同的话重载页面 并清空筛选的store
if (key === pathname) {
clearHeightSearchParams()
window.location.reload()
}
}
const clearHeightSearchParams = () => {
const currentState = JSON.parse(sessionStorage.getItem("currentState"))
const result = { ...currentState, queryParams: {}, current: 1 }
sessionStorage.setItem("currentState", JSON.stringify(result))
}
return <>
<OuterSider {...props} />
<Sider theme="light" className="menu_sider" collapsed={props.collapseState}>
<Link to={`/`} className={styles.logo}>
<img src={require('../../asserts/menuIcon/logo.png')} />
</Link>
<div className={styles.menuTitle}>
{menuRouter?.name}
</div>
<Menu
mode='inline'
key='MenuSlider'
selectedKeys={selectedKeys}
defaultOpenKeys={defaultOpenKeysRef.current}
className={styles.lxSliderMenu}
className={styles.menuSlider}
onOpenChange={handleOpenchange}
selectedKeys={currentSelectKey}
openKeys={openKeys}
mode="inline"
onClick={clickMenuItem}
>
{menuUtil.getNavMenuItems(dispatchRoutes)}
{
menuItemsCache
}
</Menu>
</Slider>
)
</Sider>
</>
}
MenuSlider.defaultProps = {}
export default MenuSlider
src/layouts/components/OuterSide.tsx 0 → 100644
View file @ e27b5bd6
import React from 'react'
import { Layout, Menu, Avatar, Image } from 'antd'
import { Link } from 'umi'
import styles from '../styles/MenuSlider.less'
import { getRouters } from '@/utils/auth'
import { isDev } from '@/constants'
import { observer, inject } from 'mobx-react';
import CustomIcon from './CustomIcon';
import Icon from '@ant-design/icons';
import { ReactComponent as DefaultAvatar } from '@/asserts/imgs/default_avatar.svg';
const { Sider } = Layout
export interface OuterSiderProps {
menuData: Array<any>;
pathname: string | undefined;
currentRouter: any,
UserStore?: any,
}
const OuterSider: React.FC<OuterSiderProps> = observer((props) => {
const { menuData, pathname = "/", currentRouter } = props
console.log(menuData, currentRouter)
const authRouters = getRouters()
let defaultSelectedKeys = ""
const isAuthPath = (path) => {
if (isDev) {
return true
} else {
return authRouters.includes(path)
}
}
const getSubMenu = () => {
const subHeadMenus: Array<any> = []
menuData.forEach(item => {
// 为适配pass菜单自由组合变更， 使用code进行高亮显示
const code = currentRouter.relationParentCode
// console.log(code, item.relationParentCode)
if (code && code === item.relationParentCode) {
defaultSelectedKeys = item.relationParentCode
}
!item.hideInMenu && isAuthPath(item.path) && subHeadMenus.push({
path: item.path,
title: item.name,
icon: item.icon,
key: item.key,
// 新增code属性 用于辨别子菜单是否属于该菜单下的属性
relationParentCode: item.relationParentCode,
})
})
return subHeadMenus
}
const siderMenu = getSubMenu()
console.log(siderMenu, 'siderMenu')
return <>
<Sider collapsed={true} collapsedWidth={64} className={styles.wrapperSilder}>
<div className={styles.userPic}>
{/* <Link to="/memberCenter/home">
{
props.UserStore.avatar
? <img src={props.UserStore.avatar} className={styles.avatar} />
: <Icon component={() => <DefaultAvatar className={styles.logo} />} />
}
</Link> */}
</div>
<ul className={styles.menuBox}>
{
siderMenu.map(item => (
<li key={item.key} className={defaultSelectedKeys === item.relationParentCode ? styles.currentItem : ''}>
<Link to={item.path}>
<CustomIcon type={item.icon} style={{ width: 20, height: 20 }} />
<label>{item.title}</label>
</Link>
</li>
))
}
</ul>
</Sider>
</>
})
OuterSider.defaultProps = {}
export default inject('UserStore')(OuterSider)
src/layouts/index.less
View file @ e27b5bd6
......@@ -5,10 +5,10 @@
height: 56px;
padding-right: 24px;
align-items: center;
color: #fff;
color: #000;
.lx-link {
color: #fff;
color: #000;
margin-right: 30px;
}
......@@ -24,7 +24,7 @@
.avatar {
width: 32px;
height: 32px;
background: #fff;
background: #000;
border-radius: 50%;
margin-right: 8px;
}
......
src/layouts/index.tsx
View file @ e27b5bd6
import { Link, useIntl } from 'umi';
import React, { useState, useRef, useEffect } from 'react';
import ProLayout, {
MenuDataItem,
BasicLayoutProps as ProLayoutProps,
Settings,
DefaultFooter,
PageHeaderWrapper,
BasicLayoutProps,
getMenuData,
} from '@ant-design/pro-layout';
import React, { useState, useEffect, useLayoutEffect, useMemo } from 'react';
import { Link, useIntl, Helmet } from 'umi';
import RightContent from './RightContent';
import { Button } from 'antd';
import styles from './index.less';
import cx from 'classnames';
import MenuSlider from './components/MenuSlider';
import PageHeader from './components/PageHeader';
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
import { MenuDataItem } from '@/utils/typing';
import { GlobalConfig } from '@/global/config';
import MenuSlider from './components/MenuSlider'
import { getMatchMenu } from '@umijs/route-utils';
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons';
export interface BasicLayoutProps extends ProLayoutProps {
breadcrumbNameMap: {
[path: string]: MenuDataItem;
};
route: ProLayoutProps['route'] & {
authority: string[];
routes: Array<any>
};
settings: Settings;
location: any;
// dispatch: Dispatch;
}
export type BasicLayoutContext = { [K in 'location']: BasicLayoutProps[K] } & {
breadcrumbNameMap: {
[path: string]: MenuDataItem;
};
};
import { observer } from 'mobx-react'
import { store } from '@/store'
const { indexStore } = store
const defaultFooterDom = (
<DefaultFooter
links={[]}
copyright="Copy Right©广州市数商云网络科技有限公司 粤ICP备13044797号-5"
/>
);
// 获取当前的选中菜单
export const getSelectedMenuKeys = (
pathname: string,
menuData: MenuDataItem[],
......@@ -46,26 +47,52 @@ export const getSelectedMenuKeys = (
return dispatchMenu.map(item => item.key || item.path || '');
};
const Layout = props => {
// const { formatMessage } = useIntl();
const basicInfo = getMenuData(
props.route.routes,
{ locale: false },
// formatMessage,
);
const [collapseState, setCollapseState] = useState(false);
const defaultOpenKeysRef = useRef<string[]>([]);
const [selectedKeys, setSelectedKeys] = useState<string[] | undefined>([]);
const defaultFooterDom = (
<DefaultFooter
links={[]}
copyright="Copy Right©广州市数商云网络科技有限公司 粤ICP备13044797号-5"
/>
);
const keys = getSelectedMenuKeys(
location.pathname || '/',
basicInfo.menuData || [],
);
defaultOpenKeysRef.current = keys;
const DEFAULT_COLLAPSED_LIST = ["/home", "/pageCustomized/mobile/template/category"];
const BasicLayout: React.FC<any> = (props) => {
const {
// dispatch,
children,
// collapsed,
settings,
location,
} = props;
useEffect(() => {
indexStore.setGlobalCollapsed(collapseState)
}, [collapseState])
const [openKeys, setOpenKeys] = useState<string[]>([])
const [collapsed, setCollapsed] = useState(false)
const [selectedKeys, setSelectedKeys] = useState<any>([]);
// 获取全局状态
const isHome = location.pathname === '/memberCenter/home'
const handleMenuCollapse = (payload: boolean): void => {
if (DEFAULT_COLLAPSED_LIST.includes(location.pathname)) {
return;
}
setCollapsed(payload)
if (payload) {
setOpenKeys([])
}
console.log('点击了缩起', payload)
};
const getMenuRouter = (routes: any, pathname: any) => {
const list = routes.filter((item: any) => pathname.indexOf(item.key) > -1)
return list[0]
}
const basicInfo = getMenuData(props.route.routes, { locale: false })
const menuData = basicInfo.menuData ? basicInfo.menuData.filter(item => !item.redirect) : []
const menuRouter = getMenuRouter(menuData, location.pathname)
// 当前路由信息， 可获取到config下的route配置
const currentRouter = basicInfo.breadcrumb[location.pathname];
useEffect(() => {
// if pathname can't match, use the nearest parent's key
......@@ -73,60 +100,87 @@ const Layout = props => {
location.pathname || '/',
basicInfo.menuData || [],
);
const animationFrameId = requestAnimationFrame(() => {
setSelectedKeys(keys);
});
return () =>
window.cancelAnimationFrame &&
window.cancelAnimationFrame(animationFrameId);
}, [location.pathname]);
// 标题生成
const currentRouter = basicInfo.breadcrumb[props.location.pathname];
const headerTitle = currentRouter?.name;
// 当 currentRouter 改变时（路由触发所致），设置 Menu openKeys 为 currentRouter 的祖先路由记录
// 当 菜单 收缩时 收起所有菜单，打开执行上面的逻辑
// 这里处理的逻辑都是由 路由改变 引起的，需要配合 点击 SubMenu 也是需要设置一遍 openKeys 一起达到理想的效果
// 注：点击 SubMenu 不会触发路由跳转
useEffect(() => {
if (menuRouter && menuRouter.children && currentRouter) {
if (collapsed) {
setOpenKeys([])
} else {
// 优化默认打开的菜单
// setOpenKeys([...openKeys, currentRouter.key, ...currentRouter.pro_layout_parentKeys])
setOpenKeys(currentRouter.pro_layout_parentKeys)
}
} else {
setOpenKeys([])
}
}, [currentRouter, collapsed])
useLayoutEffect(() => {
if (DEFAULT_COLLAPSED_LIST.includes(location.pathname)) {
setCollapsed(true)
} else {
setCollapsed(false);
}
}, [location.pathname])
const prolayoutStyle = isHome
? {
minHeight: '100vh',
minWidth: '1280px',
}
: {}
return currentRouter.noLayout ? props.children : (
<ProLayout
title="瓴犀平台后台"
navTheme="light"
locale={false}
pageTitleRender={() => currentRouter ? currentRouter.name : window.location.href}
// contentStyle={{minWidth: '1280px'}}
style={prolayoutStyle}
// logo={logo}
// formatMessage={formatMessage}
onCollapse={collapse => {
setCollapseState(collapse);
}}
breadcrumbRender={(routers = []) => []}
collapsed={collapseState}
collapsedButtonRender={() =>
collapseState ? (
<MenuUnfoldOutlined style={{ color: '#fff' }} />
) : (
<MenuFoldOutlined style={{ color: '#fff' }} />
)
}
menuRender={headerProps => (
<MenuSlider
selectedKeys={selectedKeys}
defaultOpenKeysRef={defaultOpenKeysRef}
collapseState={collapseState}
{...headerProps}
/>
menuHeaderRender={(logoDom, titleDom) => (
<Link to="/">
{/* {logoDom} */}
{titleDom}
</Link>
)}
collapsed={collapsed}
collapsedButtonRender={(flag) => (DEFAULT_COLLAPSED_LIST.includes(location.pathname) ? null : flag ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />)}
onCollapse={handleMenuCollapse}
disableContentMargin={currentRouter?.noMargin !== undefined}
breadcrumbRender={(routers = []) => [
]}
menuRender={() => <MenuSlider
currentSelectKey={selectedKeys}
openKeys={openKeys}
menuData={menuData}
pathname={location.pathname}
collapseState={collapsed}
currentRouter={currentRouter}
changeOpenKeys={(keys: string[]) => setOpenKeys(keys)}
/>}
footerRender={() => defaultFooterDom}
// headerRender={() => []}
rightContentRender={() => <RightContent />}
disableContentMargin={true}
{...props}
{...settings}
>
<PageHeader title={headerTitle} routeInfo={currentRouter} />
<div
className={cx(
styles.lxPageContent,
currentRouter?.hidePageHeader ? styles.noHeader : '',
)}
>
{props.children}
</div>
{children}
</ProLayout>
);
};
export default observer(Layout);
export default BasicLayout
src/layouts/styles/MenuSlider.css 0 → 100644
View file @ e27b5bd6
.logo {
background: #ffffff;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.logo > img {
display: block;
margin: 0 auto;
width: 100%;
}
:global .menu_sider.ant-layout-sider-collapsed {
flex: 0 !important;
max-width: 0 !important;
min-width: 0 !important;
width: 0 !important;
}
.menu_sider {
position: relative;
}
.menuTitle {
height: 64px;
font-size: 12px;
color: #909399;
display: flex;
align-items: center;
padding-left: 16px;
border-top: 1px solid #F4F5F7;
border-right: 1px solid #F4F5F7;
}
.userPic {
height: 32px;
width: 32px;
background: rgba(255, 255, 255, 0.2);
margin: 16px;
border-radius: 50%;
overflow: hidden;
}
.userPic .avatar {
width: 32px;
height: 32px;
}
.userPic .logo {
width: 32px;
height: 32px;
}
.wrapperSilder {
background-color: #FAFBFC !important;
min-height: 100vh;
}
.wrapperSilder .menuBox {
padding: 0;
text-align: center;
padding-top: 24px;
}
.wrapperSilder .menuBox li {
padding: 8px 0;
position: relative;
}
.wrapperSilder .menuBox li a {
display: block;
}
.wrapperSilder .menuBox li label {
display: block;
line-height: 20px;
margin-top: 4px;
font-size: 12px;
font-weight: 400;
color: #97a0af;
}
.wrapperSilder .menuBox li span {
display: block;
font-size: 24px;
font-weight: 400;
color: #97a0af;
}
.currentItem:not(:first-child)::after {
position: absolute;
content: "";
right: 0;
top: 50%;
transform: translate(0, -50%);
border-right: 8px solid #fff;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
.currentItem span {
color: #00A98F !important;
}
.currentItem label {
color: #00A98F !important;
}
.menuItem {
padding-left: 30px !important;
}
.ant-menu-submenu-open .ant-menu-submenu-title {
background: rgba(0, 0, 0, 0.02);
}
.menuSlider .ant-menu-submenu-title {
height: 48px !important;
line-height: 48px !important;
}
src/layouts/styles/MenuSlider.less 0 → 100644
View file @ e27b5bd6
.logo {
background: rgba(255, 255, 255, 1);
height: 48px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
& > img {
display: block;
margin: 0 auto;
// height: 40px;
width: 100%;
// max-width: 127px;
}
}
:global {
.menu_sider.ant-layout-sider-collapsed {
flex: 0 !important;
max-width: 0 !important;
min-width: 0 !important;
width: 0 !important;
}
}
.menu_sider {
position: relative;
}
.menuTitle {
height: 64px;
font-size: 12px;
color: #909399;
display: flex;
align-items: center;
padding-left: 16px;
border-top: 1px solid #F4F5F7;
border-right: 1px solid #F4F5F7;
}
// 外层导航
.userPic {
height: 32px;
width: 32px;
background: rgba(255, 255, 255, 0.2);
margin: 16px;
border-radius: 50%;
overflow: hidden;
.avatar {
width: 32px;
height: 32px;
}
.logo {
width: 32px;
height: 32px;
}
}
.wrapperSilder {
background-color: #FAFBFC !important;
min-height: 100vh;
.menuBox {
padding: 0;
text-align: center;
padding-top: 24px;
li {
padding: 8px 0;
position: relative;
a {
display: block;
}
label {
display: block;
line-height: 20px;
margin-top: 4px;
font-size: 12px;
font-weight: 400;
color: rgba(151, 160, 175, 1);
}
span {
display: block;
// height: 24px;
font-size: 24px;
font-weight: 400;
color: rgba(151, 160, 175, 1);
}
}
}
}
.currentItem {
&:not(:first-child)::after {
position: absolute;
content: "";
right: 0;
top: 50%;
transform: translate(0, -50%);
border-right: 8px solid #fff;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
span {
color: #00A98F !important;
}
label {
color: #00A98F !important;
}
}
.menuItem {
padding-left: 30px !important;
}
.ant-menu-submenu-open {
.ant-menu-submenu-title {
background: rgba(0, 0, 0, 0.02);
}
}
.menuSlider {
.ant-menu-submenu-title {
height: 48px !important;
line-height: 48px !important;
}
}
src/module/userModule/index.ts 0 → 100644
View file @ e27b5bd6
export interface ILoginModule {
username: string;
password: string;
res: object;
handleLogin(): Promise<object>;
}
src/store/index.tsx
View file @ e27b5bd6
......@@ -4,8 +4,10 @@ import { Provider } from 'mobx-react'
import GlobalSelectStore from './globalSelect';
import SiteStore from './site'
import MemberStore from './member'
import UserStore from './user'
import { ITestModule } from '@/module/testModule';
import { IMemberModule } from '@/module/memberModule';
import { ILoginModule } from '@/module/userModule';
import GlobalStore from './global';
/**
......@@ -26,9 +28,11 @@ import GlobalStore from './global';
export interface IStore {
testStore: ITestModule;
MemberModuleStore: IMemberModule;
UserStore: ILoginModule;
}
export const store = {
UserStore: new UserStore,
testStore: new TestStore,
globalStore: new GlobalSelectStore,
SiteStore: new SiteStore,
......
src/store/user/index.ts 0 → 100644
View file @ e27b5bd6
import { action, computed, observable, runInAction } from 'mobx'
import { ILoginModule } from '@/module/userModule'
import { getAuth } from '@/utils/auth'
// import { localStorage } from '@/utils/storage'
// import { userDetailGet } from '@/services/user'
// const userInfo = localStorage.getItem('userInfo')
class LoginStore implements ILoginModule {
@observable public username: string = 'admin';
@observable public password: string = "123456";
@observable public res: object = {};
@observable public userInfo = getAuth();
@observable public avatar = this.userInfo?.logo;
// 可以改变对应的状态值
// @todo 接入更新用户信息接口
@action.bound
public async updateUserInfo() {
// try {
// const res = await userDetailGet()
// runInAction(() => {
// this.userInfo = res.data;
// localStorage.setItem('userInfo', JSON.stringify(this.userInfo))
// })
// } catch (error) {
// return error
// }
}
// 当有时需要拼接状态，但又不希望改变原有状态，可以采取如下, 类似vue中的computed
@computed
public get printInfo(): string {
return `hello, ${this.username}, your password is ${this.password}`
}
// 可以改变对应的状态值
@action.bound
public setUsername(username: string) {
this.username = username;
}
@action.bound
public setPassword(password: string) {
this.password = password;
}
// 异步修改数据, 需要使用bound，保持this指向当前store
@action.bound
public async handleLogin() {
try {
let params = {
username: this.username,
password: this.password
}
const result = {}
runInAction(() => {
this.res = result
})
return result
} catch (error) {
return error
}
}
// 改变用户的头像
@action.bound
public setUserAvatar(link: string) {
this.avatar = link;
}
}
export default LoginStore
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 to comment