Skip to content

A
Admin
Commit 75dd27ad authored by 周远喜's avatar 周远喜
Browse files
Options

ok

parent d48c4163
Hide whitespace changes
Inline Side-by-side
Showing with 8545 additions and 0 deletions
api/account.js 0 → 100644
View file @ 75dd27ad
import request from '@/plugins/request';
export function AccountLogin (data) {
return request({
url: '/api/login',
method: 'post',
data
});
}
export function AccountRegister (data) {
return request({
url: '/api/register',
method: 'post',
data
});
}
assets/svg/body.svg 0 → 100644
View file @ 75dd27ad
<?xml version="1.0" encoding="UTF-8"?>
<svg width="1457px" height="651px" viewBox="0 0 1457 651" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 54 (76480) - https://sketchapp.com -->
<title>bg</title>
<desc>Created with Sketch.</desc>
<g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="body">
<rect id="矩形" fill="#E0E3F5" transform="translate(1111.405592, 620.405592) rotate(45.000000) translate(-1111.405592, -620.405592) " x="1089.90559" y="598.905592" width="43" height="43"></rect>
<rect id="矩形" fill="#DEEFF6" transform="translate(127.254834, 230.254834) rotate(40.000000) translate(-127.254834, -230.254834) " x="95.254834" y="198.254834" width="64" height="64"></rect>
<circle id="Oval-7" fill="#C9CFED" fill-rule="nonzero" opacity="0.45" cx="1286.5" cy="27.5" r="23.5"></circle>
<circle id="Oval-7" fill="#E7E6E6" fill-rule="nonzero" opacity="0.45" cx="191" cy="51" r="18"></circle>
<circle id="Oval-7" fill="#EFEFEF" fill-rule="nonzero" opacity="0.45" cx="888" cy="499" r="18"></circle>
<ellipse id="Oval-7" stroke="#E4E4F2" stroke-width="10" fill-opacity="0" fill="#FFFFFF" fill-rule="nonzero" opacity="0.45" cx="1373.5" cy="331.5" rx="78.5" ry="79.5"></ellipse>
<ellipse id="Oval-7" stroke="#CEECF8" stroke-width="10" fill-opacity="0" fill="#FFFFFF" fill-rule="nonzero" opacity="0.45" cx="235" cy="481.5" rx="44" ry="44.5"></ellipse>
</g>
</g>
</svg>
\ No newline at end of file
assets/svg/header-theme-dark.svg 0 → 100644
View file @ 75dd27ad
<?xml version="1.0" encoding="UTF-8"?>
<svg width="52px" height="45px" viewBox="0 0 52 45" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
<title>Group 5 Copy 5</title>
<desc>Created with Sketch.</desc>
<defs>
<filter x="-9.4%" y="-6.2%" width="118.8%" height="122.5%" filterUnits="objectBoundingBox" id="filter-1">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<rect id="path-2" x="0" y="0" width="48" height="40" rx="4"></rect>
<filter x="-4.2%" y="-2.5%" width="108.3%" height="110.0%" filterUnits="objectBoundingBox" id="filter-4">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g id="配置面板" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="setting-copy-2" transform="translate(-1190.000000, -136.000000)">
<g id="Group-8" transform="translate(1167.000000, 0.000000)">
<g id="Group-5-Copy-5" filter="url(#filter-1)" transform="translate(25.000000, 137.000000)">
<mask id="mask-3" fill="white">
<use xlink:href="#path-2"></use>
</mask>
<g id="Rectangle-18">
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
<use fill="#F0F2F5" fill-rule="evenodd" xlink:href="#path-2"></use>
</g>
<rect id="Rectangle-11" fill="#303648" mask="url(#mask-3)" x="-1" y="0" width="49" height="10"></rect>
<rect id="Rectangle-18" fill="#303648" mask="url(#mask-3)" x="0" y="0" width="16" height="44"></rect>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
assets/svg/header-theme-primary.svg 0 → 100644
View file @ 75dd27ad
<?xml version="1.0" encoding="UTF-8"?>
<svg width="52px" height="45px" viewBox="0 0 52 45" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
<title>Group 5 Copy 5</title>
<desc>Created with Sketch.</desc>
<defs>
<filter x="-9.4%" y="-6.2%" width="118.8%" height="122.5%" filterUnits="objectBoundingBox" id="filter-1">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<rect id="path-2" x="0" y="0" width="48" height="40" rx="4"></rect>
<filter x="-4.2%" y="-2.5%" width="108.3%" height="110.0%" filterUnits="objectBoundingBox" id="filter-4">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g id="配置面板" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="setting-copy-2" transform="translate(-1190.000000, -136.000000)">
<g id="Group-8" transform="translate(1167.000000, 0.000000)">
<g id="Group-5-Copy-5" filter="url(#filter-1)" transform="translate(25.000000, 137.000000)">
<mask id="mask-3" fill="white">
<use xlink:href="#path-2"></use>
</mask>
<g id="Rectangle-18">
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
<use fill="#F0F2F5" fill-rule="evenodd" xlink:href="#path-2"></use>
</g>
<rect id="Rectangle-11" fill="#2d8cf0" mask="url(#mask-3)" x="-1" y="0" width="49" height="10"></rect>
<rect id="Rectangle-18" fill="#303648" mask="url(#mask-3)" x="0" y="0" width="16" height="44"></rect>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
assets/svg/header-top.svg 0 → 100644
View file @ 75dd27ad
<?xml version="1.0" encoding="UTF-8"?>
<svg width="52px" height="45px" viewBox="0 0 52 45" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
<title>Group 5 Copy 5</title>
<desc>Created with Sketch.</desc>
<defs>
<filter x="-9.4%" y="-6.2%" width="118.8%" height="122.5%" filterUnits="objectBoundingBox" id="filter-1">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<rect id="path-2" x="0" y="0" width="48" height="40" rx="4"></rect>
<filter x="-4.2%" y="-2.5%" width="108.3%" height="110.0%" filterUnits="objectBoundingBox" id="filter-4">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g id="配置面板" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="setting-copy-2" transform="translate(-1190.000000, -136.000000)">
<g id="Group-8" transform="translate(1167.000000, 0.000000)">
<g id="Group-5-Copy-5" filter="url(#filter-1)" transform="translate(25.000000, 137.000000)">
<mask id="mask-3" fill="white">
<use xlink:href="#path-2"></use>
</mask>
<g id="Rectangle-18">
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
<use fill="#F0F2F5" fill-rule="evenodd" xlink:href="#path-2"></use>
</g>
<rect id="Rectangle-18" fill="#303648" mask="url(#mask-3)" x="0" y="0" width="16" height="44"></rect>
<rect id="Rectangle-11" fill="#FFFFFF" mask="url(#mask-3)" x="0" y="0" width="49" height="10"></rect>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
assets/svg/icon-happy.svg 0 → 100644
View file @ 75dd27ad
<?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="1559281361864" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2715" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"><defs><style type="text/css"></style></defs><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#FBD971" p-id="2716"></path><path d="M512 877.714286c-161.328762 0-292.571429-131.242667-292.571429-292.571429a24.380952 24.380952 0 0 1 48.761905 0c0 134.436571 109.372952 243.809524 243.809524 243.809524s243.809524-109.372952 243.809524-243.809524a24.380952 24.380952 0 0 1 48.761905 0c0 161.328762-131.242667 292.571429-292.571429 292.571429z" fill="#F0C419" p-id="2717"></path><path d="M390.095238 414.47619a24.380952 24.380952 0 0 1-24.380952-24.380952c0-40.326095-32.816762-73.142857-73.142857-73.142857s-73.142857 32.816762-73.142858 73.142857a24.380952 24.380952 0 0 1-48.761904 0c0-67.218286 54.686476-121.904762 121.904762-121.904762s121.904762 54.686476 121.904761 121.904762a24.380952 24.380952 0 0 1-24.380952 24.380952zM828.952381 414.47619a24.380952 24.380952 0 0 1-24.380952-24.380952c0-40.326095-32.816762-73.142857-73.142858-73.142857s-73.142857 32.816762-73.142857 73.142857a24.380952 24.380952 0 0 1-48.761904 0c0-67.218286 54.686476-121.904762 121.904761-121.904762s121.904762 54.686476 121.904762 121.904762a24.380952 24.380952 0 0 1-24.380952 24.380952z" fill="#F29C1F" p-id="2718"></path></svg>
\ No newline at end of file
assets/svg/icon-sad.svg 0 → 100644
View file @ 75dd27ad
<?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="1559281374840" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3076" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"><defs><style type="text/css"></style></defs><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#FBD971" p-id="3077"></path><path d="M780.190476 877.714286a24.380952 24.380952 0 0 1-24.380952-24.380953c0-134.436571-109.372952-243.809524-243.809524-243.809523s-243.809524 109.372952-243.809524 243.809523a24.380952 24.380952 0 1 1-48.761905 0c0-161.328762 131.242667-292.571429 292.571429-292.571428s292.571429 131.242667 292.571429 292.571428a24.380952 24.380952 0 0 1-24.380953 24.380953z" fill="#F0C419" p-id="3078"></path><path d="M390.095238 414.47619a24.380952 24.380952 0 0 1-24.380952-24.380952c0-40.326095-32.816762-73.142857-73.142857-73.142857s-73.142857 32.816762-73.142858 73.142857a24.380952 24.380952 0 1 1-48.761904 0c0-67.218286 54.686476-121.904762 121.904762-121.904762s121.904762 54.686476 121.904761 121.904762a24.380952 24.380952 0 0 1-24.380952 24.380952zM828.952381 414.47619a24.380952 24.380952 0 0 1-24.380952-24.380952c0-40.326095-32.816762-73.142857-73.142858-73.142857s-73.142857 32.816762-73.142857 73.142857a24.380952 24.380952 0 1 1-48.761904 0c0-67.218286 54.686476-121.904762 121.904761-121.904762s121.904762 54.686476 121.904762 121.904762a24.380952 24.380952 0 0 1-24.380952 24.380952z" fill="#F29C1F" p-id="3079"></path></svg>
\ No newline at end of file
assets/svg/icon-social-bilibili.svg 0 → 100644
View file @ 75dd27ad
<?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="1547543867554" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16276" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"><defs><style type="text/css"></style></defs><path d="M253.44 577.536c2.56 18.432 5.12 36.352 7.68 55.296 15.36-11.776 30.208-23.04 45.056-34.304-1.536-2.56-43.008-18.944-52.736-20.992zM610.304 577.536c2.56 18.432 5.12 36.352 7.68 55.296 15.36-11.776 30.208-23.04 45.056-34.304-2.048-2.56-43.008-18.944-52.736-20.992z" fill="#DD6DA6" p-id="16277"></path><path d="M512 0C229.376 0 0 229.376 0 512s229.376 512 512 512 512-229.376 512-512S794.624 0 512 0z m-29.184 444.928h16.896c3.072 0 4.096 1.024 4.096 4.608v53.76c-6.656-0.512-13.824-0.512-20.992-1.024V444.928z m-115.712-6.656c2.048 0 3.072 1.024 3.584 3.584 1.536 17.92 3.584 35.328 5.12 53.76-6.656 1.024-13.312 1.024-20.48 1.536-2.56-19.456-5.12-38.912-7.168-58.368 6.144-0.512 12.8-0.512 18.944-0.512z m-27.648 3.072c2.56-0.512 2.048 2.048 2.56 3.584 0.512 6.656 1.536 12.8 2.048 19.456 1.024 10.24 2.56 19.968 3.584 30.208v4.096l-15.872 2.56c-3.584-18.944-6.656-37.376-10.24-56.832 5.632-1.024 11.776-2.56 17.92-3.072z m-3.072 184.32c-2.56 8.192-8.192 14.848-15.36 20.48-16.896 13.312-34.304 25.088-54.784 31.744-14.336 5.12-29.184 8.192-44.032 10.752-19.456 3.072-39.424 4.096-59.392 6.144-4.096 0.512-8.192 0-12.288 0-2.048 0-2.56-1.024-2.56-3.072 0-8.704-1.024-17.92-1.536-27.136-1.024-11.776-2.048-23.04-3.584-34.816-2.048-16.384-4.096-32.256-5.632-48.64-2.048-16.896-4.096-34.304-6.144-51.2-2.048-16.896-3.584-33.28-5.632-49.664-2.56-18.944-5.12-37.376-8.192-56.832-3.072-22.016-7.168-44.544-12.8-66.56-0.512-1.024 0.512-3.072 1.024-3.584 19.456-7.168 38.4-14.848 57.856-23.04 6.144-2.56 6.656-3.584 6.656 4.608 0 34.304 0 68.608 0.512 103.424 0.512 17.92 1.024 35.84 2.56 53.76 1.536 21.504 4.096 43.008 5.632 65.024 0 1.024 0.512 1.536 0.512 2.56 7.168-0.512 14.848-1.024 22.016-1.024 30.72-1.024 60.416 3.584 89.088 14.848 13.824 5.632 27.648 12.288 39.936 20.992 9.216 7.68 11.776 17.408 6.144 31.232z m26.112 44.544c-10.24-50.688-19.968-100.352-29.696-151.04 8.192-1.024 15.872-2.56 23.552-3.584 5.632-1.024 11.264-1.024 16.896-1.536 3.072-0.512 5.12 1.024 5.632 4.096 1.024 7.68 2.56 15.36 3.584 23.552 1.536 13.312 3.072 26.624 4.096 39.936 1.536 11.776 2.56 23.04 4.096 34.816 1.536 12.288 3.072 24.576 4.608 37.376 0.512 3.584 1.024 7.168 1.536 11.264-11.776 2.048-22.528 3.584-34.304 5.12zM445.44 655.36c-10.24-1.024-19.968-1.536-30.72-2.56-9.216-92.672-16.896-185.856-34.304-279.04 5.632-0.512 11.264-1.536 17.408-2.048 6.656-0.512 13.312-1.024 20.48-1.536 5.632-0.512 7.68 1.024 8.192 6.656l3.072 44.032c1.536 19.968 3.072 39.936 4.096 59.392 1.024 14.336 1.536 28.672 3.072 43.008 1.536 15.872 3.072 31.232 4.096 47.104 1.536 11.264 2.56 23.04 3.584 34.304 1.536 12.288 2.56 24.576 3.584 37.376l1.024 10.752c-0.512 2.56-1.536 3.072-3.584 2.56z m27.136-210.944c2.56 0 3.584 0.512 3.584 3.584-0.512 7.68 0 15.872 0 23.552v29.696c-5.632 0.512-11.264 1.024-16.384 1.536-1.536-18.944-3.072-37.888-4.608-58.368h17.408z m2.56 228.864c-1.024 0-2.56-1.536-2.56-2.56l-4.608-50.688c-1.536-15.36-3.072-31.744-4.096-47.104-1.536-15.872-3.072-32.256-4.096-48.64 0-1.024 0-2.048-0.512-3.584 4.096-1.024 7.168-1.536 11.264-1.536 10.24 0 20.48 0 30.72 0.512 2.56 0 4.096 2.048 4.096 4.096 0 5.12 0.512 10.24 0.512 15.36 0 23.552-0.512 48.128 0 71.68 0.512 19.456 1.024 37.888 1.536 57.344 0 1.024 0 2.56 0.512 4.608-11.264 0.512-22.016 1.024-32.768 0.512zM896 444.928h16.896c3.072 0 4.096 1.024 4.096 4.608v53.76c-6.656-0.512-13.824-0.512-20.992-1.024V444.928z m-116.224-6.656c2.048 0 3.072 1.024 3.584 3.584 1.536 17.92 3.584 35.328 5.12 53.76-6.656 1.024-13.312 1.024-20.48 1.536-2.56-19.456-5.12-38.912-7.168-58.368 6.656-0.512 12.8-0.512 18.944-0.512z m-27.648 3.072c2.56-0.512 2.048 2.048 2.56 3.584 0.512 6.656 1.536 12.8 2.048 19.456 1.024 10.24 2.56 19.968 3.584 30.208v4.096l-15.872 2.56c-3.584-18.944-6.656-37.376-10.24-56.832 5.632-1.024 11.776-2.56 17.92-3.072z m-3.072 183.808c-2.56 8.192-8.192 14.848-15.36 20.48-16.896 13.312-34.304 25.088-54.784 31.744-14.336 5.12-29.184 8.192-44.032 10.752-19.456 3.072-39.424 4.096-59.392 6.144-4.096 0.512-8.192 0-12.288 0-2.048 0-2.56-1.024-2.56-3.072 0-8.704-1.024-17.92-1.536-27.136-1.024-11.776-2.048-23.04-3.584-34.816-2.048-16.384-4.096-32.256-5.632-48.64-2.048-16.896-4.096-34.304-6.144-51.2-2.048-16.896-3.584-33.28-5.632-49.664-2.56-18.944-5.12-37.376-8.192-56.832-3.072-22.016-7.168-44.544-12.8-66.56 0-1.024 1.024-3.072 1.536-3.584 19.456-7.168 38.4-14.848 57.856-23.04 6.144-2.56 6.656-3.584 6.656 4.608 0 34.304 0 68.608 0.512 103.424 0.512 17.92 1.024 35.84 2.56 53.76 1.536 21.504 4.096 43.008 5.632 65.024 0 1.024 0.512 1.536 0.512 2.56 7.168-0.512 14.848-1.024 22.016-1.024 30.72-1.024 60.416 3.584 89.088 14.848 13.824 5.632 27.648 12.288 39.936 20.992 9.216 8.192 11.264 17.92 5.632 31.232z m26.112 45.056c-10.24-50.688-19.968-100.352-29.696-151.04 8.192-1.024 15.872-2.56 23.552-3.584 5.632-1.024 11.264-1.024 16.896-1.536 3.072-0.512 5.12 1.024 5.632 4.096 1.024 7.68 2.56 15.36 3.584 23.552 1.536 13.312 3.072 26.624 4.096 39.936 1.536 11.776 2.56 23.04 4.096 34.816 1.536 12.288 3.072 24.576 4.608 37.376 0.512 3.584 1.024 7.168 1.536 11.264-11.264 2.048-22.528 3.584-34.304 5.12z m83.456-14.848c-10.24-1.024-19.968-1.536-30.72-2.56-9.216-92.672-16.896-185.856-34.304-279.04 5.632-0.512 11.264-1.536 17.408-2.048 6.656-0.512 13.312-1.024 20.48-1.536 5.632-0.512 7.68 1.024 8.192 6.656l3.072 44.032c1.536 19.968 3.072 39.936 4.096 59.392 1.024 14.336 1.536 28.672 3.072 43.008 1.536 15.872 3.072 31.232 4.096 47.104 1.536 11.264 2.56 23.04 3.584 34.304 1.536 12.288 2.56 24.576 3.584 37.376l1.024 10.752c-1.024 2.56-1.536 3.072-3.584 2.56z m26.624-210.944c2.56 0 3.584 0.512 3.584 3.584-0.512 7.68 0 15.872 0 23.552v29.696c-5.632 0.512-11.264 1.024-16.384 1.536-1.536-18.944-3.072-37.888-4.608-58.368h17.408z m3.072 228.864c-1.024 0-2.56-1.536-2.56-2.56l-4.608-50.688c-1.536-15.36-3.072-31.744-4.096-47.104-1.536-15.872-3.072-32.256-4.096-48.64 0-1.024 0-2.048-0.512-3.584 4.096-1.024 7.168-1.536 11.264-1.536 10.24 0 20.48 0 30.72 0.512 2.56 0 4.096 2.048 4.096 4.096 0 5.12 0.512 10.24 0.512 15.36 0 23.552-0.512 48.128 0 71.68 0.512 19.456 1.024 37.888 1.536 57.344 0 1.024 0 2.56 0.512 4.608-11.776 0.512-22.528 1.024-32.768 0.512z" fill="#DD6DA6" p-id="16278"></path></svg>
\ No newline at end of file
assets/svg/icon-social-dingding.svg 0 → 100644
View file @ 75dd27ad
<?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="1547543870835" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16387" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"><defs><style type="text/css"></style></defs><path d="M512 1024C228.894118 1024 0 795.105882 0 512S228.894118 0 512 0s512 228.894118 512 512-228.894118 512-512 512" fill="#3296FA" p-id="16388"></path><path d="M733.866667 381.490196c-19.07451-8.031373-158.619608-58.227451-213.835294-79.309804C404.580392 261.019608 272.062745 197.772549 250.980392 187.733333c-3.011765-2.007843-7.027451-1.003922-10.039216 1.003922-3.011765 2.007843-3.011765 4.015686-4.015686 6.023529-7.027451 45.176471 12.047059 122.478431 49.192157 155.607843 18.070588 16.062745 253.992157 89.34902 253.992157 89.34902S291.137255 383.498039 286.117647 383.498039c-4.015686 0-6.023529 0-9.035294 3.011765-2.007843 2.007843-3.011765 5.019608-3.011765 9.035294 9.035294 50.196078 56.219608 115.45098 98.384314 123.482353 34.133333 7.027451 170.666667 2.007843 170.666667 2.007843s-165.647059 23.090196-169.662745 24.094118c-4.015686 1.003922-6.023529 3.011765-7.027451 5.019608-1.003922 2.007843-2.007843 5.019608 0 9.035294 7.027451 15.058824 29.113725 37.145098 29.113725 37.145098 45.176471 46.180392 94.368627 40.156863 106.415686 38.149019 12.047059-2.007843 44.172549-12.047059 59.231373-20.078431l-27.105882 99.388235 82.321568 1.003922-49.192157 157.615686 178.698039-225.882353h-87.341176S740.894118 510.996078 765.992157 461.803922c7.027451-13.05098 10.039216-32.12549 5.019608-46.180393-6.023529-14.054902-16.062745-25.098039-37.145098-34.133333" fill="#FFFFFF" p-id="16389"></path></svg>
\ No newline at end of file
assets/svg/icon-social-facebook.svg 0 → 100644
View file @ 75dd27ad
<?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="1547543877388" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16609" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"><defs><style type="text/css"></style></defs><path d="M512.2 0.6C229.6 0.6 0.5 229.7 0.5 512.3S229.6 1024 512.2 1024s511.7-229.1 511.7-511.7S794.8 0.6 512.2 0.6z m132.7 341h-48.2c-17.6 0-29.5 3.7-35.6 11.1-6.1 7.4-9.2 18.5-9.2 33.2v58h89.9l-12 90.9h-78v233h-94v-233h-78.3v-90.9h78.3V377c0-38.1 10.6-67.6 31.9-88.6s49.6-31.5 85-31.5h0.2c30.1 0 53.4 1.2 70 3.7v81z" fill="#3162A2" p-id="16610"></path><path d="M551.7 534.8h0.1v233h-0.1zM561 352.7c-6.1 7.4-9.2 18.4-9.2 33.2v58h89.9l-12 90.9h0.1l12-90.9h-89.9v-58c0-14.7 3.1-25.8 9.1-33.2 6.2-7.4 18.1-11.1 35.7-11.1h-0.1c-17.6 0-29.5 3.7-35.6 11.1zM574.9 256.9c30 0 53.3 1.2 69.8 3.7v81h0.2v-81c-16.6-2.5-39.9-3.7-70-3.7z" fill="#FFFFFF" p-id="16611"></path></svg>
\ No newline at end of file
assets/svg/icon-social-juejin.svg 0 → 100644
View file @ 75dd27ad
<?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="1547543883733" class="icon" style="" viewBox="0 0 1272 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16831" xmlns:xlink="http://www.w3.org/1999/xlink" width="496.875" height="400"><defs><style type="text/css"></style></defs><path d="M729.64116345 165.27693991L634.32650881 90.125l-99.5625 78.52693991-5.17887981 4.16056009 104.74137981 83.50215546 105.09051682-83.50215546-9.77586218-7.53556009z m361.21228445 291.47198236l-456.78879245 360.19396555-456.49784537-359.99030128L110.125 511.12715547l523.93965546 413.11745671 524.23060335-413.35021555-67.44181091-54.14547436z m-456.78879245 29.21120673L385.4784479 290.00646554 318.06573237 344.12284454l315.96982771 249.16810336 316.28987101-249.40086136-67.41271555-54.14547436-248.84806008 196.21551682z" fill="#006cff" p-id="16832"></path></svg>
\ No newline at end of file
assets/svg/icon-social-qq.svg 0 → 100644
View file @ 75dd27ad
<?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="1547543886845" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16941" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"><defs><style type="text/css"></style></defs><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#18ACFC" p-id="16942"></path><path d="M500.113 228.39c118.396-1.518 178.924 61.004 201 156 3.497 15.048 0.15 34.807 0 50 27.142999999999997 5.682 33.087 60.106 10 75v1h1c8.26 14.329999999999998 19.04 28.125 26 44 7.332 16.723 9.305999999999997 35.16 14 55 4.024 17.01-2.287 51.505-10 57-0.7709999999999998 0.683-2.231 1.312-3 2-14.601-3.016-30.377-16.865-38-27-3.065-4.074-5.275-9.672-10-12-0.395 21.568-12.503 41.15-22 55-3.5139999999999993 5.123-14.073 13.216999999999999-14 18 3.690999999999999 2.836 8.305 2.955999999999999 13 5 10.513 4.577 25.449 13.168 32 22 2.333999999999999 3.146 5.548 7.554999999999999 7 11 16.193 38.414-36.527 48.314-63 54-27.185 5.839-77.818-10.224-92-19-8.749-5.414-16.863-18.573-29-19-3.666 2.3889999999999993-14.438 1.1319999999999997-20 1-16.829 32.804-101.913 47.867999999999995-148 31-14.061-5.146-43.398-17.695-38-40 4.437-18.327 19.947-29.224 35-37 5.759-2.975 18.915-4.419 22-10-13.141-8.988-24.521-28.659-31-44-3.412-8.077-4.193-25.775-9-32-7.789 12.245-32.097 36.91-52 33-3.071-4.553-7.213-9.097-9-15-4.792-15.835-1.81-40.379 2-54 8.117-29.02 16.965-50.62299999999998 32-72 4.672-6.643 11.425-12.135 16-19-8.945-9.733-6.951-37.535999999999994-1-49 4.002-7.709 9.701-7.413 10-20-1.9199999999999997-3.022-0.071-8.604-1-13-4.383-20.75 3.2729999999999997-47.552 9-63 19.8-53.420999999999985 53.712-90.466 105-112 11.986-5.033 25.833-7.783 39-11 5.322-1.3 11.969 0.518 16-2z" fill="#FFFFFF" p-id="16943"></path></svg>
\ No newline at end of file
assets/svg/icon-social-twitter.svg 0 → 100644
View file @ 75dd27ad
<?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="1547543874130" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16498" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"><defs><style type="text/css"></style></defs><path d="M511.8 0.6C229.2 0.6 0.1 229.7 0.1 512.3S229.2 1024 511.8 1024s511.7-229.1 511.7-511.7S794.4 0.6 511.8 0.6z m264.9 375.3c-0.1 0.1-0.1 0.2-0.2 0.3h0.2c-9 14.3-21.2 28.8-34.2 39.2-5.2 4.2-10.5 8.3-15.7 12.5v0.5c0.3 22.9-0.3 44.9-4.7 64.2-25.2 113.1-91.9 189.9-197.4 222.8-37.9 11.8-99.1 16.7-142.6 5.9-21.5-5.4-41-11.4-59.3-19.3-10.2-4.5-19.6-9.3-28.5-14.7l-8.8-5.3h0.5l-0.5-0.3c9.8 0.2 21.3 2.9 32.2 1.2 9.8-1.6 19.6-1.2 28.7-3.2 22.7-5 43-11.6 60.4-21.8 8.3-4.8 20.9-10.6 27-17.6-11.2 0.2-21.4-2.4-29.7-5.4-32.6-11.5-51.6-32.7-63.9-64.4h0.1c0-0.1-0.1-0.2-0.1-0.3 9.7 1.1 37.3 3.5 44.6-1.7-12.3-0.8-24.1-7.9-32.5-13.2-26.2-16.4-47.6-43.9-47.4-86.2v-0.3c3.5 1.7 6.9 3.3 10.4 4.9 6.6 2.8 13.3 4.3 21.1 5.9 3.1 0.7 9.3 2.4 13.2 1.4-5.1-5.8-13.2-9.7-18.4-16-14.7-18.3-28.7-45.3-25.2-77.4 0.5-4.7 1.3-9.4 2.6-14.3 2.5-9.7 6.5-18.3 10.8-26.2 0.2 0.1 0.4 0.2 0.5 0.3 2 4.2 6.4 7.2 9.1 10.6 8.6 10.7 19.2 20.3 30 28.7 36.7 28.7 69.9 46.4 123.1 59.5 13.5 3.3 29 5.9 45.1 5.9-1.9-5.8-2.7-13-2.7-20.5 0-9.7 1.3-19.6 3.3-26.8 9-32.1 28.5-55.2 57-67.6 6.9-3 14.4-5.2 22.4-6.9 4.1-0.6 8.2-1.1 12.3-1.6 39-0.7 59.8 13.5 79.6 31.6 16.8-1.4 38.7-10.8 51.6-17.4l12.6-6.9c0 0.1-0.1 0.3-0.1 0.4l0.1-0.1c-7.3 19.9-17.4 35.5-32.7 47.3-3.1 2.4-6.3 5.6-10 7.4 21.5-0.4 39.3-10 56.1-15.4v0.3z" fill="#2EB1EB" p-id="16499"></path><path d="M719.7 391.1s0.1 0 0.1-0.1c0 0-0.1 0-0.1 0.1zM726.8 428.4v-0.5 0.5zM336.4 479.9c3.3 0.7 9.9 2.7 13.8 1.2h-0.5l-0.1-0.1c-3.9 1-10.1-0.7-13.2-1.4-7.8-1.6-14.5-3.1-21.1-5.9-3.5-1.6-6.9-3.2-10.4-4.9v0.3c3.4 1.6 6.9 3.2 10.4 4.9 6.6 2.8 13.3 4.3 21.1 5.9zM719.6 391.4v0.2c21.9-0.2 39.8-10.1 56.9-15.4 0.1-0.1 0.1-0.2 0.2-0.3v-0.3c-16.9 5.3-34.6 14.9-56.1 15.4-0.4 0.1-0.7 0.3-1 0.4zM584.8 337.5c6.9-3 14.4-5.1 22.4-6.9 4.1-0.6 8.2-1 12.3-1.6 39-0.7 59.8 13.5 79.6 31.6 16.8-1.4 38.7-10.8 51.6-17.4 4.2-2.3 8.3-4.5 12.5-6.8 0-0.1 0.1-0.3 0.1-0.4l-12.6 6.9c-12.9 6.6-34.8 16-51.6 17.4-19.8-18.1-40.6-32.3-79.6-31.6-4.1 0.5-8.2 1-12.3 1.6-8 1.7-15.5 3.9-22.4 6.9-28.5 12.4-48 35.5-57 67.6-2 7.2-3.4 17.2-3.3 26.8 0-9.6 1.3-19.4 3.3-26.5 9-32.1 28.5-55.2 57-67.6zM385.2 568.5h-0.4c-7.3 5.2-34.9 2.8-44.6 1.7 0 0.1 0.1 0.2 0.1 0.3 10 1.1 38.2 3.6 44.9-2zM319.4 347.4c0.1 0.1 0.3 0.1 0.5 0.3 2 4.1 6.3 7.1 9.1 10.6 8.6 10.6 19.2 20.2 30 28.7 36.8 28.7 69.9 46.4 123.1 59.5 13.5 3.3 29.1 5.9 45.2 5.9 0-0.1-0.1-0.2-0.1-0.3-16.1 0-31.6-2.6-45.1-5.9-53.2-13.1-86.4-30.8-123.1-59.5-10.8-8.4-21.4-18-30-28.7-2.7-3.4-7.1-6.4-9.1-10.6-0.1-0.1-0.3-0.2-0.5-0.3-4.3 7.9-8.3 16.5-10.8 26.2-1.3 4.9-2.1 9.6-2.6 14.3 0.5-4.6 1.3-9.2 2.6-14 2.5-9.7 6.5-18.3 10.8-26.2zM317.7 683.2c9.9-1.6 19.6-1.2 28.7-3.2 22.8-5 43-11.6 60.4-21.8 8.4-4.9 21.3-10.8 27.3-17.9h-0.3c-6.1 7-18.7 12.8-27 17.6-17.4 10.2-37.7 16.8-60.4 21.8-9.1 2-18.9 1.6-28.7 3.2-10.9 1.7-22.4-1-32.2-1.2l0.5 0.3c9.7 0.4 21 2.9 31.7 1.2z" fill="#FFFFFF" p-id="16500"></path></svg>
\ No newline at end of file
assets/svg/icon-social-wechat.svg 0 → 100644
View file @ 75dd27ad
<?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="1547543880869" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16720" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"><defs><style type="text/css"></style></defs><path d="M512 1024C229.228089 1024 0 794.771911 0 512S229.228089 0 512 0s512 229.228089 512 512-229.228089 512-512 512z m-87.813689-750.933333C314.1632 273.066667 221.866667 351.744 221.866667 444.7232c0 57.230222 31.9488 103.708444 78.085689 135.896178h3.549866l-21.2992 60.802844 74.5472-39.344355h3.549867c21.2992 10.729244 42.587022 14.301867 63.886222 14.301866h14.199467c-3.549867-14.301867-7.099733-28.603733-7.099734-42.9056 0-85.833956 81.635556-157.354667 184.570312-157.354666h7.099733C608.756622 337.442133 527.132444 273.066667 424.186311 273.066667z m370.676622 306.722133c0-78.654578-78.791111-143.018667-171.906844-143.018667-96.688356 0-171.895467 64.364089-171.895467 143.018667s78.791111 143.018667 171.895467 143.018667c17.908622 0 35.817244-3.584 53.725867-7.156623h3.572622l60.882489 32.176356-17.908623-53.623467c46.557867-28.603733 71.634489-67.925333 71.634489-114.414933z" fill="#5FC948" p-id="16721"></path><path d="M358.4 420.977778a28.444444 28.444444 0 1 1 0-56.888889 28.444444 28.444444 0 0 1 0 56.888889z m204.8 136.533333a28.444444 28.444444 0 1 1 0-56.888889 28.444444 28.444444 0 0 1 0 56.888889z m-68.266667-136.533333a28.444444 28.444444 0 1 1 0-56.888889 28.444444 28.444444 0 0 1 0 56.888889z m193.422223 136.533333a28.444444 28.444444 0 1 1 0-56.888889 28.444444 28.444444 0 0 1 0 56.888889z" fill="#5FC948" p-id="16722"></path></svg>
\ No newline at end of file
assets/svg/icon-social-weibo.svg 0 → 100644
View file @ 75dd27ad
<?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="1547543890412" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17052" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"><defs><style type="text/css"></style></defs><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#F1DF55" p-id="17053"></path><path d="M455.876923 589.784615c-6.892308-2.953846-15.753846 0.984615-19.692308 7.876923-3.938462 6.892308-1.969231 14.769231 4.923077 17.723077 6.892308 2.953846 16.738462 0 20.676923-7.876923 2.953846-6.892308 0.984615-14.769231-5.907692-17.723077zM410.584615 608.492308c-18.707692-7.876923-42.338462 0-53.16923 17.723077-11.815385 17.723077-5.907692 39.384615 11.815384 47.261538 18.707692 8.861538 43.323077 0 54.153846-17.723077 10.830769-17.723077 4.923077-39.384615-12.8-47.261538z" fill="#FFFFFF" p-id="17054"></path><path d="M426.338462 466.707692C307.2 478.523077 217.6 551.384615 225.476923 629.169231c7.876923 77.784615 110.276923 131.938462 229.415385 120.123077 119.138462-11.815385 208.738462-84.676923 200.861538-162.461539-7.876923-78.769231-110.276923-131.938462-229.415384-120.123077zM530.707692 649.846154c-24.615385 55.138462-93.538462 83.692308-152.615384 64.984615-57.107692-18.707692-81.723077-74.830769-56.123077-126.030769 24.615385-50.215385 88.615385-77.784615 144.738461-63.015385 58.092308 15.753846 88.615385 70.892308 64 124.061539z" fill="#FFFFFF" p-id="17055"></path><path d="M692.184615 490.338462c-9.846154-2.953846-16.738462-4.923077-11.815384-18.707693 11.815385-28.553846 12.8-54.153846 0-71.876923-23.630769-33.476923-86.646154-31.507692-160.492308-0.984615 0 0-22.646154 9.846154-16.738461-7.876923 10.830769-36.430769 9.846154-65.969231-7.876924-83.692308-39.384615-39.384615-144.738462 1.969231-235.323076 91.569231-66.953846 67.938462-106.338462 139.815385-106.338462 201.846154 0 118.153846 151.630769 191.015385 301.292308 191.015384 194.953846 0 324.923077-113.230769 324.923077-202.830769-0.984615-55.138462-46.276923-85.661538-87.63077-98.461538zM454.892308 748.307692c-119.138462 11.815385-221.538462-42.338462-229.415385-120.123077-7.876923-77.784615 82.707692-150.646154 200.861539-162.461538 119.138462-11.815385 221.538462 42.338462 229.415384 120.123077 7.876923 78.769231-82.707692 151.630769-200.861538 162.461538z" fill="#D52B2A" p-id="17056"></path><path d="M822.153846 272.738462c-47.261538-52.184615-116.184615-71.876923-181.169231-58.092308-14.769231 2.953846-24.615385 17.723077-20.676923 32.492308 2.953846 14.769231 17.723077 24.615385 32.492308 20.676923 45.292308-9.846154 94.523077 4.923077 128 41.353846 33.476923 37.415385 42.338462 87.630769 28.553846 131.938461-4.923077 14.769231 2.953846 29.538462 17.723077 34.461539s29.538462-2.953846 34.461539-17.723077c19.692308-62.030769 6.892308-132.923077-39.384616-185.107692z" fill="#E89214" p-id="17057"></path><path d="M738.461538 444.061538c12.8 3.938462 25.6-2.953846 29.538462-14.76923 9.846154-30.523077 3.938462-64.984615-19.692308-90.584616-22.646154-25.6-57.107692-35.446154-87.630769-28.553846-12.8 2.953846-20.676923 15.753846-17.723077 28.553846 2.953846 12.8 15.753846 20.676923 27.569231 17.723077 15.753846-2.953846 31.507692 1.969231 43.323077 13.784616 10.830769 12.8 13.784615 29.538462 9.846154 44.307692-3.938462 11.815385 2.953846 25.6 14.76923 29.538461z" fill="#E89214" p-id="17058"></path><path d="M466.707692 526.769231c-56.123077-14.769231-120.123077 13.784615-144.738461 63.015384-24.615385 51.2-0.984615 107.323077 56.123077 126.03077 59.076923 18.707692 128.984615-9.846154 152.615384-64.984616 24.615385-54.153846-5.907692-109.292308-64-124.061538zM423.384615 655.753846c-11.815385 18.707692-36.430769 26.584615-54.153846 17.723077-18.707692-7.876923-23.630769-29.538462-11.815384-47.261538 11.815385-17.723077 35.446154-25.6 53.16923-17.723077 17.723077 7.876923 23.630769 29.538462 12.8 47.261538z m37.415385-48.246154c-3.938462 6.892308-13.784615 10.830769-20.676923 7.876923-6.892308-2.953846-8.861538-10.830769-4.923077-17.723077s12.8-9.846154 19.692308-7.876923c7.876923 2.953846 9.846154 10.830769 5.907692 17.723077z" fill="#040000" p-id="17059"></path></svg>
\ No newline at end of file
assets/svg/icon-social-zhihu.svg 0 → 100644
View file @ 75dd27ad
<?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="1547543863835" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16165" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"><defs><style type="text/css"></style></defs><path d="M512 1024C229.236364 1024 0 794.763636 0 512S229.236364 0 512 0s512 229.236364 512 512-229.236364 512-512 512z m-129.861818-756.48s-36.212364 2.094545-48.989091 24.482909c-12.8 22.365091-54.318545 137.378909-54.318546 137.378909s13.847273 6.376727 37.28291-10.658909c23.435636-17.035636 30.882909-46.848 30.882909-46.848l42.589091-2.117818 1.070545 121.390545s-73.495273-1.070545-88.413091 0c-14.894545 1.047273-23.412364 40.448-23.412364 40.448h111.825455s-9.588364 67.095273-38.353455 116.084364c-28.741818 48.989091-83.060364 87.319273-83.060363 87.319273s39.424 15.965091 77.730909-6.4c38.353455-22.341818 66.629818-120.692364 66.629818-120.692364l89.925818 110.056727s8.192-52.386909-1.466182-67.188363c-9.658182-14.778182-62.208-74.286545-62.208-74.286546l-22.946909 20.247273 16.337455-65.117091h97.954909s0-38.353455-19.153455-40.494545c-19.176727-2.094545-78.801455 0-78.801454 0V371.898182h88.389818s-1.070545-39.400727-18.106182-39.400727h-143.755636l22.341818-64.954182z m169.984 61.184v358.562909h36.002909l13.102545 45.009455 63.348364-45.009455h89.064727V328.704h-201.518545z" fill="#0f84fd" p-id="16166"></path><path d="M594.781091 368.64h117.899636v277.876364h-41.890909l-53.364363 40.261818-11.636364-40.261818h-11.008V368.64z" fill="#0f84fd" p-id="16167"></path></svg>
\ No newline at end of file
assets/svg/nav-theme-dark.svg 0 → 100644
View file @ 75dd27ad
<?xml version="1.0" encoding="UTF-8"?>
<svg width="52px" height="45px" viewBox="0 0 52 45" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
<title>Group 5 Copy 5</title>
<desc>Created with Sketch.</desc>
<defs>
<filter x="-9.4%" y="-6.2%" width="118.8%" height="122.5%" filterUnits="objectBoundingBox" id="filter-1">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<rect id="path-2" x="0" y="0" width="48" height="40" rx="4"></rect>
<filter x="-4.2%" y="-2.5%" width="108.3%" height="110.0%" filterUnits="objectBoundingBox" id="filter-4">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g id="配置面板" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="setting-copy-2" transform="translate(-1190.000000, -136.000000)">
<g id="Group-8" transform="translate(1167.000000, 0.000000)">
<g id="Group-5-Copy-5" filter="url(#filter-1)" transform="translate(25.000000, 137.000000)">
<mask id="mask-3" fill="white">
<use xlink:href="#path-2"></use>
</mask>
<g id="Rectangle-18">
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
<use fill="#F0F2F5" fill-rule="evenodd" xlink:href="#path-2"></use>
</g>
<rect id="Rectangle-11" fill="#FFFFFF" mask="url(#mask-3)" x="-1" y="0" width="49" height="10"></rect>
<rect id="Rectangle-18" fill="#303648" mask="url(#mask-3)" x="0" y="0" width="16" height="44"></rect>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
assets/svg/nav-theme-light.svg 0 → 100644
View file @ 75dd27ad
<?xml version="1.0" encoding="UTF-8"?>
<svg width="52px" height="45px" viewBox="0 0 52 45" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
<title>Group 5</title>
<desc>Created with Sketch.</desc>
<defs>
<filter x="-9.4%" y="-6.2%" width="118.8%" height="122.5%" filterUnits="objectBoundingBox" id="filter-1">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<rect id="path-2" x="0" y="0" width="48" height="40" rx="4"></rect>
<filter x="-4.2%" y="-2.5%" width="108.3%" height="110.0%" filterUnits="objectBoundingBox" id="filter-4">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g id="配置面板" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="setting-copy-2" transform="translate(-1254.000000, -136.000000)">
<g id="Group-8" transform="translate(1167.000000, 0.000000)">
<g id="Group-5" filter="url(#filter-1)" transform="translate(89.000000, 137.000000)">
<mask id="mask-3" fill="white">
<use xlink:href="#path-2"></use>
</mask>
<g id="Rectangle-18">
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
<use fill="#F0F2F5" fill-rule="evenodd" xlink:href="#path-2"></use>
</g>
<rect id="Rectangle-18" fill="#FFFFFF" mask="url(#mask-3)" x="0" y="0" width="16" height="44"></rect>
<rect id="Rectangle-11" fill="#FFFFFF" mask="url(#mask-3)" x="-1" y="0" width="49" height="10"></rect>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
components/basic-layout/header-breadcrumb/index.vue 0 → 100644
View file @ 75dd27ad
<template>
<Breadcrumb class="i-layout-header-breadcrumb" v-if="!isLimit" ref="breadcrumb">
<BreadcrumbItem>
<i-menu-head-title :item="topItem" :hide-icon="!showBreadcrumbIcon" />
</BreadcrumbItem>
<BreadcrumbItem v-for="item in items" :key="item.path">
<i-menu-head-title :item="item" :hide-icon="!showBreadcrumbIcon" />
</BreadcrumbItem>
<BreadcrumbItem>
<i-menu-head-title :item="siderMenuObject[activePath]" :hide-icon="!showBreadcrumbIcon" />
</BreadcrumbItem>
</Breadcrumb>
</template>
<script>
import { mapState } from 'vuex';
import menuSider from '@/menu/sider';
import { flattenSiderMenu } from '@/libs/system';
import iMenuHeadTitle from '../menu-head/title';
import { on, off } from 'view-design/src/utils/dom';
import { findComponentUpward, getStyle } from 'view-design/src/utils/assist';
import { throttle } from 'lodash';
export default {
name: 'iHeaderBreadcrumb',
components: { iMenuHeadTitle },
computed: {
...mapState('admin/layout', [
'showBreadcrumbIcon',
'menuCollapse'
]),
...mapState('admin/menu', [
'openNames',
'activePath',
'header',
'headerName'
]),
siderMenuObject () {
let obj = {};
this.allSiderMenu.forEach(item => {
if ('path' in item) {
obj[item.path] = item;
}
});
return obj;
},
items () {
let items = [...this.openNames];
let newItems = [];
items.forEach(i => {
newItems.push(this.siderMenuObject[i]);
});
return newItems;
},
// 第一级，默认是 menu/header.js 中的第一项
topItem () {
return this.header.find(item => item.name === this.headerName);
}
},
data () {
return {
// 得到所有侧边菜单，并转为平级，查询图标及显示对应内容
allSiderMenu: flattenSiderMenu(menuSider, []),
handleResize: () => {},
isLimit: false,
maxWidth: 560,
breadcrumbWidth: 0
}
},
methods: {
handleCheckWidth () {
const $header = findComponentUpward(this, 'Header');
if ($header) {
const headerWidth = parseInt(getStyle($header.$el, 'width'));
this.$nextTick(() => {
this.isLimit = headerWidth - this.maxWidth <= this.breadcrumbWidth;
});
}
},
handleGetWidth () {
this.isLimit = false;
this.$nextTick(() => {
const $breadcrumb = this.$refs.breadcrumb;
if ($breadcrumb) {
this.breadcrumbWidth = parseInt(getStyle($breadcrumb.$el, 'width'));
}
});
}
},
watch: {
topItem: {
handler () {
this.handleGetWidth();
this.handleCheckWidth();
},
deep: true
},
items: {
handler () {
this.handleGetWidth();
this.handleCheckWidth();
},
deep: true
},
activePath: {
handler () {
this.handleGetWidth();
this.handleCheckWidth();
},
deep: true
}
},
mounted () {
this.handleResize = throttle(this.handleCheckWidth, 100, { leading: false });
on(window, 'resize', this.handleResize);
this.handleGetWidth();
this.handleCheckWidth();
},
beforeDestroy () {
off(window, 'resize', this.handleResize);
}
}
</script>
components/basic-layout/header-collapse/index.vue 0 → 100644
View file @ 75dd27ad
<template>
<span class="i-layout-header-trigger" :class="{ 'i-layout-header-trigger-min': showReload }" @click="handleToggleMenuSide">
<Icon custom="i-icon i-icon-menu-unfold" v-show="menuCollapse || isMobile" />
<Icon custom="i-icon i-icon-menu-fold" v-show="!menuCollapse && !isMobile" />
</span>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
export default {
name: 'iHeaderCollapse',
computed: {
...mapState('admin/layout', [
'isMobile',
'isTablet',
'isDesktop',
'menuCollapse',
'showReload'
])
},
methods: {
...mapMutations('admin/layout', [
'updateMenuCollapse'
]),
// 展开/收起侧边栏
handleToggleMenuSide (state) {
if (this.isMobile) {
this.updateMenuCollapse(false);
this.$emit('on-toggle-drawer', state);
} else {
this.updateMenuCollapse(!this.menuCollapse);
}
}
},
watch: {
// 切换页面时，在移动端自动收起侧边栏
// 强行传参 false 是因为有的路由不是在菜单栏发生的，toggle 会使其显示
'$route' () {
if (this.isMobile) this.handleToggleMenuSide(false);
},
// 在平板时自动收起菜单
isTablet (state) {
if (!this.isMobile && state) this.updateMenuCollapse(true);
},
// 在桌面时自动展开菜单
isDesktop (state) {
if (!this.isMobile && state) this.updateMenuCollapse(false);
}
}
}
</script>
components/basic-layout/header-fullscreen/index.vue 0 → 100644
View file @ 75dd27ad
<template>
<span class="i-layout-header-trigger i-layout-header-trigger-min" @click="toggleFullscreen">
<Icon custom="i-icon i-icon-full-screen" v-show="!isFullscreen" />
<Icon custom="i-icon i-icon-exit-full-screen" v-show="isFullscreen" />
</span>
</template>
<script>
import { mapState, mapActions } from 'vuex';
export default {
name: 'iHeaderFullscreen',
computed: {
...mapState('admin/layout', [
'isFullscreen'
])
},
methods: {
...mapActions('admin/layout', [
'toggleFullscreen'
])
}
}
</script>
components/basic-layout/header-i18n/index.vue 0 → 100644
View file @ 75dd27ad
<template>
<span class="i-layout-header-trigger i-layout-header-trigger-min">
<Dropdown :trigger="isMobile ? 'click' : 'hover'" class="i-layout-header-i18n" :class="{ 'i-layout-header-user-mobile': isMobile }" @on-click="handleClick">
<Icon type="md-globe" />
<DropdownMenu slot="list">
<DropdownItem v-for="(item, key) in languages" :key="key" :name="key" :selected="locale === key">
<span>{{ item.language }}</span>
</DropdownItem>
</DropdownMenu>
</Dropdown>
</span>
</template>
<script>
import Languages from '@/i18n/locale';
import { mapState, mapActions } from 'vuex';
export default {
name: 'iHeaderI18n',
data () {
return {
languages: Languages
}
},
computed: {
...mapState('admin/i18n', [
'locale'
]),
...mapState('admin/layout', [
'isMobile'
])
},
methods: {
...mapActions('admin/i18n', [
'setLocale'
]),
handleClick (locale) {
if (locale === this.locale) return;
this.setLocale({ locale, vm: this });
}
}
}
</script>
components/basic-layout/header-log/index.vue 0 → 100644
View file @ 75dd27ad
<template>
<Tooltip :content="tooltipContent" transfer>
<span class="i-layout-header-trigger i-layout-header-trigger-min" @click="handleOpenLog">
<Badge :count="lengthError === 0 ? null : lengthError" :overflow-count="99" :dot="showDot" :offset="showDot ? [26, 2] : [20, 0]">
<Icon custom="i-icon i-icon-record" />
</Badge>
</span>
</Tooltip>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
name: 'iHeaderLog',
computed: {
...mapGetters('admin/log', [
'length',
'lengthError'
]),
showDot () {
return !!this.length && this.lengthError === 0;
},
tooltipContent () {
if (!this.length) {
return '没有日志或异常';
} else {
let text = `${this.length} 条日志`;
if (this.lengthError) text += ` | 包含 ${this.lengthError} 个异常`;
return text;
}
}
},
methods: {
handleOpenLog () {
this.$router.push({
name: 'log'
});
}
}
}
</script>
components/basic-layout/header-logo/index.vue 0 → 100644
View file @ 75dd27ad
<template>
<i-link class="i-layout-header-logo" :class="{ 'i-layout-header-logo-stick': !isMobile }" to="/">
<img src="@/assets/images/logo-small.png" v-if="isMobile">
<img src="@/assets/images/logo.png" v-else-if="headerTheme === 'light'">
<img src="@/assets/images/logo-dark.png" v-else>
</i-link>
</template>
<script>
import { mapState } from 'vuex';
export default {
name: 'iHeaderLogo',
computed: {
...mapState('admin/layout', [
'isMobile',
'headerTheme'
])
}
}
</script>
components/basic-layout/header-notice/index.vue 0 → 100644
View file @ 75dd27ad
<template>
<span class="i-layout-header-trigger i-layout-header-trigger-min i-layout-header-trigger-in">
<Notification
:wide="isMobile"
:badge-props="badgeProps"
class="i-layout-header-notice"
:class="{ 'i-layout-header-notice-mobile': isMobile }">
<Icon slot="icon" custom="i-icon i-icon-notification" />
<NotificationTab title="通知">
</NotificationTab>
<NotificationTab title="消息">
</NotificationTab>
<NotificationTab title="待办">
</NotificationTab>
</Notification>
</span>
</template>
<script>
import { mapState } from 'vuex';
export default {
name: 'iHeaderNotice',
data () {
return {
badgeProps: {
offset: [20, 0]
}
}
},
computed: {
...mapState('admin/layout', [
'isMobile'
])
}
}
</script>
components/basic-layout/header-reload/index.vue 0 → 100644
View file @ 75dd27ad
<template>
<span class="i-layout-header-trigger" :class="{ 'i-layout-header-trigger-min': showSiderCollapse }" @click="handleReload">
<Icon custom="i-icon i-icon-refresh" />
</span>
</template>
<script>
import { mapState } from 'vuex';
export default {
name: 'iHeaderReload',
computed: {
...mapState('admin/layout', [
'isMobile',
'showSiderCollapse'
])
},
methods: {
handleReload () {
this.$emit('on-reload');
}
}
}
</script>
components/basic-layout/header-search/index.vue 0 → 100644
View file @ 75dd27ad
<template>
<span v-if="isDesktop" class="i-layout-header-trigger i-layout-header-trigger-min i-layout-header-trigger-in i-layout-header-trigger-nohover">
<input class="i-layout-header-search" type="text" :placeholder="$t('basicLayout.search.placeholder')">
</span>
<span v-else class="i-layout-header-trigger i-layout-header-trigger-min">
<Dropdown trigger="click" class="i-layout-header-search-drop" ref="dropdown">
<Icon type="ios-search" />
<DropdownMenu slot="list">
<div class="i-layout-header-search-drop-main">
<Input size="large" prefix="ios-search" type="text" :placeholder="$t('basicLayout.search.placeholder')" />
<span class="i-layout-header-search-drop-main-cancel" @click="handleCloseSearch">{{ $t('basicLayout.search.cancel') }}</span>
</div>
</DropdownMenu>
</Dropdown>
</span>
</template>
<script>
import { mapState } from 'vuex';
export default {
name: 'iHeaderSearch',
computed: {
...mapState('admin/layout', [
'isDesktop',
'headerMenu'
])
},
methods: {
handleCloseSearch () {
this.$refs.dropdown.handleClick();
}
}
}
</script>
components/basic-layout/header-setting/index.vue 0 → 100644
View file @ 75dd27ad
<template>
<span class="i-layout-header-trigger i-layout-header-trigger-min" @click="showSetting">
<Icon type="md-more" />
<Drawer v-model="visible" width="280">
<Divider size="small">主题风格设置</Divider>
<div class="i-layout-header-setting-item">
<div class="i-layout-header-setting-item-radio" :class="{ 'on': siderTheme === 'dark' }" @click="handleChangeSetting('siderTheme', 'dark')">
<Tooltip content="暗色侧边栏" placement="top" transfer>
<img src="@/assets/svg/nav-theme-dark.svg">
</Tooltip>
</div>
<div class="i-layout-header-setting-item-radio" :class="{ 'on': siderTheme === 'light' }" @click="handleChangeSetting('siderTheme', 'light')">
<Tooltip content="亮色侧边栏" placement="top" transfer>
<img src="@/assets/svg/nav-theme-light.svg">
</Tooltip>
</div>
</div>
<div class="i-layout-header-setting-item">
<div class="i-layout-header-setting-item-radio" :class="{ 'on': headerTheme === 'light' }" @click="handleChangeSetting('headerTheme', 'light')">
<Tooltip content="亮色顶栏" placement="top" transfer>
<img src="@/assets/svg/nav-theme-dark.svg">
</Tooltip>
</div>
<div class="i-layout-header-setting-item-radio" :class="{ 'on': headerTheme === 'dark' }" @click="handleChangeSetting('headerTheme', 'dark')">
<Tooltip content="暗色顶栏" placement="top" transfer>
<img src="@/assets/svg/header-theme-dark.svg">
</Tooltip>
</div>
<div class="i-layout-header-setting-item-radio" :class="{ 'on': headerTheme === 'primary' }" @click="handleChangeSetting('headerTheme', 'primary')">
<Tooltip content="主色顶栏" placement="top" transfer>
<img src="@/assets/svg/header-theme-primary.svg">
</Tooltip>
</div>
</div>
<Divider size="small">导航设置</Divider>
<div class="i-layout-header-setting-item">
<span class="i-layout-header-setting-item-desc">固定侧边栏</span>
<span class="i-layout-header-setting-item-action">
<Switch size="small" :value="siderFix" @on-change="(val) => handleChangeSetting('siderFix', val)" />
</span>
</div>
<div class="i-layout-header-setting-item">
<span class="i-layout-header-setting-item-desc">固定顶栏</span>
<span class="i-layout-header-setting-item-action">
<Switch size="small" :value="headerFix" @on-change="(val) => handleChangeSetting('headerFix', val)" />
</span>
</div>
<div class="i-layout-header-setting-item" :class="{ 'i-layout-header-setting-item-disabled': !headerFix }">
<span class="i-layout-header-setting-item-desc">
下滑时隐藏顶栏
<Tooltip placement="top" content="需开启固定顶栏" transfer>
<Icon type="ios-help-circle-outline" />
</Tooltip>
</span>
<span class="i-layout-header-setting-item-action">
<Switch size="small" :value="headerHide" :disabled="!headerFix" @on-change="(val) => handleChangeSetting('headerHide', val)" />
</span>
</div>
<div class="i-layout-header-setting-item" :class="{ 'i-layout-header-setting-item-disabled': !headerFix }">
<span class="i-layout-header-setting-item-desc">
置顶顶栏
<Tooltip placement="top" content="需开启固定顶栏" transfer>
<Icon type="ios-help-circle-outline" />
</Tooltip>
</span>
<span class="i-layout-header-setting-item-action">
<Switch size="small" :value="headerStick" :disabled="!headerFix" @on-change="(val) => handleChangeSetting('headerStick', val)" />
</span>
</div>
<div class="i-layout-header-setting-item">
<span class="i-layout-header-setting-item-desc">侧边栏开启手风琴模式</span>
<span class="i-layout-header-setting-item-action">
<Switch size="small" :value="menuAccordion" @on-change="(val) => handleChangeSetting('menuAccordion', val)" />
</span>
</div>
<div class="i-layout-header-setting-item">
<span class="i-layout-header-setting-item-desc">显示折叠侧边栏按钮</span>
<span class="i-layout-header-setting-item-action">
<Switch size="small" :value="showSiderCollapse" @on-change="(val) => handleChangeSetting('showSiderCollapse', val)" />
</span>
</div>
<div class="i-layout-header-setting-item">
<span class="i-layout-header-setting-item-desc">侧边栏折叠时显示父级菜单名</span>
<span class="i-layout-header-setting-item-action">
<Switch size="small" :value="showCollapseMenuTitle" @on-change="(val) => handleChangeSetting('showCollapseMenuTitle', val)" />
</span>
</div>
<div class="i-layout-header-setting-item">
<span class="i-layout-header-setting-item-desc">
显示全局面包屑导航
<Tooltip placement="top" content="headerMenu 开启时无效" transfer>
<Icon type="ios-help-circle-outline" />
</Tooltip>
</span>
<span class="i-layout-header-setting-item-action">
<Switch size="small" :value="showBreadcrumb" @on-change="(val) => handleChangeSetting('showBreadcrumb', val)" />
</span>
</div>
<div class="i-layout-header-setting-item" :class="{ 'i-layout-header-setting-item-disabled': !showBreadcrumb }">
<span class="i-layout-header-setting-item-desc">
全局面包屑显示图标
<Tooltip placement="top" content="需开启全局面包屑导航" transfer>
<Icon type="ios-help-circle-outline" />
</Tooltip>
</span>
<span class="i-layout-header-setting-item-action">
<Switch size="small" :value="showBreadcrumbIcon" :disabled="!showBreadcrumb" @on-change="(val) => handleChangeSetting('showBreadcrumbIcon', val)" />
</span>
</div>
<div class="i-layout-header-setting-item">
<span class="i-layout-header-setting-item-desc">显示重载页面按钮</span>
<span class="i-layout-header-setting-item-action">
<Switch size="small" :value="showReload" @on-change="(val) => handleChangeSetting('showReload', val)" />
</span>
</div>
<div class="i-layout-header-setting-item">
<span class="i-layout-header-setting-item-desc">显示多语言选择</span>
<span class="i-layout-header-setting-item-action">
<Switch size="small" :value="showI18n" @on-change="(val) => handleChangeSetting('showI18n', val)" />
</span>
</div>
<Divider size="small">其它设置</Divider>
<div class="i-layout-header-setting-item">
<span class="i-layout-header-setting-item-desc">开启多页签</span>
<span class="i-layout-header-setting-item-action">
<Switch size="small" :value="tabs" @on-change="(val) => handleChangeSetting('tabs', val)" />
</span>
</div>
<div class="i-layout-header-setting-item" :class="{ 'i-layout-header-setting-item-disabled': !tabs }">
<span class="i-layout-header-setting-item-desc">
多页签显示图标
<Tooltip placement="top" content="需开启多页签" transfer>
<Icon type="ios-help-circle-outline" />
</Tooltip>
</span>
<span class="i-layout-header-setting-item-action">
<Switch size="small" :value="showTabsIcon" :disabled="!tabs" @on-change="(val) => handleChangeSetting('showTabsIcon', val)" />
</span>
</div>
<div class="i-layout-header-setting-item" :class="{ 'i-layout-header-setting-item-disabled': !tabs }">
<span class="i-layout-header-setting-item-desc">
固定多页签
<Tooltip placement="top" content="需开启多页签" transfer>
<Icon type="ios-help-circle-outline" />
</Tooltip>
</span>
<span class="i-layout-header-setting-item-action">
<Switch size="small" :value="tabsFix" :disabled="!tabs" @on-change="(val) => handleChangeSetting('tabsFix', val)" />
</span>
</div>
<Alert type="warning">
<div slot="desc">
该功能主要实时预览各种布局效果，更多完整配置在 <strong>setting.js</strong> 中设置。建议在生产环境关闭该布局预览功能。
</div>
</Alert>
</Drawer>
</span>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
export default {
name: 'iHeaderSetting',
data () {
return {
visible: false
}
},
computed: {
...mapState('admin/layout', [
'siderTheme',
'headerTheme',
'headerStick',
'siderFix',
'headerFix',
'headerHide',
'menuAccordion',
'showSiderCollapse',
'tabs',
'showTabsIcon',
'tabsFix',
'showBreadcrumb',
'showBreadcrumbIcon',
'showReload',
'showI18n',
'showCollapseMenuTitle'
])
},
methods: {
...mapMutations('admin/layout', [
'updateLayoutSetting'
]),
showSetting () {
this.visible = true;
},
handleChangeSetting (key, value) {
this.updateLayoutSetting({
key,
value
});
}
}
}
</script>
components/basic-layout/header-user/index.vue 0 → 100644
View file @ 75dd27ad
<template>
<span class="i-layout-header-trigger i-layout-header-trigger-min">
<Dropdown :trigger="isMobile ? 'click' : 'hover'" class="i-layout-header-user" :class="{ 'i-layout-header-user-mobile': isMobile }" @on-click="handleClick">
<Avatar size="small" :src="info.avatar" v-if="info.avatar" />
<span class="i-layout-header-user-name" v-if="!isMobile">{{ info.name }}</span>
<DropdownMenu slot="list">
<i-link to="/setting/user">
<DropdownItem>
<Icon type="ios-contact-outline" />
<span>{{ $t('basicLayout.user.center') }}</span>
</DropdownItem>
</i-link>
<i-link to="/setting/account">
<DropdownItem>
<Icon type="ios-settings-outline" />
<span>{{ $t('basicLayout.user.setting') }}</span>
</DropdownItem>
</i-link>
<DropdownItem divided name="logout">
<Icon type="ios-log-out" />
<span>{{ $t('basicLayout.user.logOut') }}</span>
</DropdownItem>
</DropdownMenu>
</Dropdown>
</span>
</template>
<script>
import { mapState, mapActions } from 'vuex';
export default {
name: 'iHeaderUser',
computed: {
...mapState('admin/user', [
'info'
]),
...mapState('admin/layout', [
'isMobile',
'logoutConfirm'
])
},
methods: {
...mapActions('admin/account', [
'logout'
]),
handleClick (name) {
if (name === 'logout') {
this.logout({
confirm: this.logoutConfirm,
vm: this
});
}
}
}
}
</script>
components/basic-layout/i18n.js 0 → 100644
View file @ 75dd27ad
// 默认布局使用的多语言
export default {
'zh-CN': {
basicLayout: {
search: {
placeholder: '搜索...',
cancel: '取消'
},
user: {
center: '个人中心',
setting: '设置',
logOut: '退出登录'
},
logout: {
confirmTitle: '退出登录确认',
confirmContent: '您确定退出登录当前账户吗？打开的标签页和个人设置将会保存。'
},
tabs: {
left: '关闭左侧',
right: '关闭右侧',
other: '关闭其它',
all: '全部关闭'
}
}
},
'en-US': {
basicLayout: {
search: {
placeholder: 'Search...',
cancel: 'Cancel'
},
user: {
center: 'My home',
setting: 'Setting',
logOut: 'Log out'
},
logout: {
confirmTitle: 'Logout confirmation',
confirmContent: 'Are you sure you are logged out of your current account? Open tabs and personal settings will be saved.'
},
tabs: {
left: 'Close left',
right: 'Close right',
other: 'Close other',
all: 'Close all'
}
}
}
}
components/basic-layout/index.vue 0 → 100644
View file @ 75dd27ad
<template>
<Layout class="i-layout">
<Sider v-if="!isMobile && !hideSider" class="i-layout-sider" :class="siderClasses" :width="menuSideWidth">
<i-menu-side :hide-logo="isHeaderStick && headerFix && showHeader" />
</Sider>
<Layout class="i-layout-inside" :class="insideClasses">
<transition name="fade-quick">
<Header class="i-layout-header" :class="headerClasses" :style="headerStyle" v-show="showHeader" v-resize="handleHeaderWidthChange">
<i-header-logo v-if="isMobile && showMobileLogo" />
<i-header-logo v-if="!isMobile && isHeaderStick && headerFix" />
<i-header-collapse v-if="(isMobile || showSiderCollapse) && !hideSider" @on-toggle-drawer="handleToggleDrawer" />
<i-header-reload v-if="!isMobile && showReload" @on-reload="handleReload" />
<i-menu-head v-if="headerMenu && !isMobile" ref="menuHead" />
<i-header-breadcrumb v-if="showBreadcrumb && !headerMenu && !isMobile" ref="breadcrumb" />
<i-header-search v-if="showSearch && !headerMenu && !isMobile && !showBreadcrumb" />
<div class="i-layout-header-right">
<i-header-search v-if="(showSearch && isMobile) || (showSearch && (headerMenu || showBreadcrumb))" />
<i-menu-head v-if="headerMenu && isMobile" />
<i-header-log v-if="isDesktop && showLog" />
<i-header-fullscreen v-if="isDesktop && showFullscreen" />
<i-header-notice v-if="showNotice" />
<i-header-user />
<i-header-i18n v-if="showI18n" />
<i-header-setting v-if="enableSetting && !isMobile" />
</div>
</Header>
</transition>
<Content class="i-layout-content" :class="contentClasses">
<transition name="fade-quick">
<i-tabs v-if="tabs" v-show="showHeader" @on-reload="handleReload" />
</transition>
<div class="i-layout-content-main">
<keep-alive :include="keepAlive">
<router-view v-if="loadRouter" />
</keep-alive>
</div>
</Content>
<i-copyright />
</Layout>
<div v-if="isMobile && !hideSider">
<Drawer v-model="showDrawer" placement="left" :closable="false" :class-name="drawerClasses">
<i-menu-side />
</Drawer>
</div>
</Layout>
</template>
<script>
import iMenuHead from './menu-head';
import iMenuSide from './menu-side';
import iHeaderLogo from './header-logo';
import iHeaderCollapse from './header-collapse';
import iHeaderReload from './header-reload';
import iHeaderBreadcrumb from './header-breadcrumb';
import iHeaderSearch from './header-search';
import iHeaderLog from './header-log';
import iHeaderFullscreen from './header-fullscreen';
import iHeaderNotice from './header-notice';
import iHeaderUser from './header-user';
import iHeaderI18n from './header-i18n';
import iHeaderSetting from './header-setting';
import iTabs from './tabs';
import iCopyright from '@/components/copyright';
import { mapState, mapGetters, mapMutations } from 'vuex';
import Setting from '@/setting';
import { requestAnimation } from '@/libs/util';
export default {
name: 'BasicLayout',
components: { iMenuHead, iMenuSide, iCopyright, iHeaderLogo, iHeaderCollapse, iHeaderReload, iHeaderBreadcrumb, iHeaderSearch, iHeaderUser, iHeaderI18n, iHeaderLog, iHeaderFullscreen, iHeaderSetting, iHeaderNotice, iTabs },
data () {
return {
showDrawer: false,
ticking: false,
headerVisible: true,
oldScrollTop: 0,
isDelayHideSider: false, // hack，当从隐藏侧边栏的 header 切换到正常 header 时，防止 Logo 抖动
loadRouter: true
}
},
computed: {
...mapState('admin/layout', [
'siderTheme',
'headerTheme',
'headerStick',
'tabs',
'tabsFix',
'siderFix',
'headerFix',
'headerHide',
'headerMenu',
'isMobile',
'isTablet',
'isDesktop',
'menuCollapse',
'showMobileLogo',
'showSearch',
'showNotice',
'showFullscreen',
'showSiderCollapse',
'showBreadcrumb',
'showLog',
'showI18n',
'showReload',
'enableSetting'
]),
...mapState('admin/page', [
'keepAlive'
]),
...mapGetters('admin/menu', [
'hideSider'
]),
// 如果开启 headerMenu，且当前 header 的 hideSider 为 true，则将顶部按 headerStick 处理
// 这时，即使没有开启 headerStick，仍然按开启处理
isHeaderStick () {
let state = this.headerStick;
if (this.hideSider) state = true;
return state;
},
showHeader () {
let visible = true;
if (this.headerFix && this.headerHide && !this.headerVisible) visible = false;
return visible;
},
headerClasses () {
return [
`i-layout-header-color-${this.headerTheme}`,
{
'i-layout-header-fix': this.headerFix,
'i-layout-header-fix-collapse': this.headerFix && this.menuCollapse,
'i-layout-header-mobile': this.isMobile,
'i-layout-header-stick': this.isHeaderStick && !this.isMobile,
'i-layout-header-with-menu': this.headerMenu,
'i-layout-header-with-hide-sider': this.hideSider || this.isDelayHideSider
}
];
},
headerStyle () {
const menuWidth = this.isHeaderStick ? 0 : this.menuCollapse ? 80 : Setting.menuSideWidth;
return this.isMobile || !this.headerFix ? {} : {
width: `calc(100% - ${menuWidth}px)`
};
},
siderClasses () {
return {
'i-layout-sider-fix': this.siderFix,
'i-layout-sider-dark': this.siderTheme === 'dark'
};
},
contentClasses () {
return {
'i-layout-content-fix-with-header': this.headerFix,
'i-layout-content-with-tabs': this.tabs,
'i-layout-content-with-tabs-fix': this.tabs && this.tabsFix
};
},
insideClasses () {
return {
'i-layout-inside-fix-with-sider': this.siderFix,
'i-layout-inside-fix-with-sider-collapse': this.siderFix && this.menuCollapse,
'i-layout-inside-with-hide-sider': this.hideSider,
'i-layout-inside-mobile': this.isMobile
};
},
drawerClasses () {
let className = 'i-layout-drawer';
if (this.siderTheme === 'dark') className += ' i-layout-drawer-dark';
return className;
},
menuSideWidth () {
return this.menuCollapse ? 80 : Setting.menuSideWidth;
}
},
watch: {
hideSider () {
this.isDelayHideSider = true;
setTimeout(() => {
this.isDelayHideSider = false;
}, 0);
},
'$route' (to, from) {
if (to.name === from.name) {
// 相同路由，不同参数，跳转时，重载页面
if (Setting.sameRouteForceUpdate) {
this.handleReload();
}
}
}
},
methods: {
...mapMutations('admin/layout', [
'updateMenuCollapse'
]),
...mapMutations('admin/page', [
'keepAlivePush',
'keepAliveRemove'
]),
handleToggleDrawer (state) {
if (typeof state === 'boolean') {
this.showDrawer = state;
} else {
this.showDrawer = !this.showDrawer;
}
},
handleScroll () {
if (!this.headerHide) return;
const scrollTop = document.body.scrollTop + document.documentElement.scrollTop;
if (!this.ticking) {
this.ticking = true;
requestAnimation(() => {
if (this.oldScrollTop > scrollTop) {
this.headerVisible = true;
} else if (scrollTop > 300 && this.headerVisible) {
this.headerVisible = false;
} else if (scrollTop < 300 && !this.headerVisible) {
this.headerVisible = true;
}
this.oldScrollTop = scrollTop;
this.ticking = false;
});
}
},
handleHeaderWidthChange () {
const $breadcrumb = this.$refs.breadcrumb;
if ($breadcrumb) {
$breadcrumb.handleGetWidth();
$breadcrumb.handleCheckWidth();
}
const $menuHead = this.$refs.menuHead;
if ($menuHead) {
// todo $menuHead.handleGetMenuHeight();
}
},
handleReload () {
// 针对缓存的页面也生效
const isCurrentPageCache = this.keepAlive.indexOf(this.$route.name) > -1;
const pageName = this.$route.name;
if (isCurrentPageCache) {
this.keepAliveRemove(pageName);
}
this.loadRouter = false;
this.$nextTick(() => {
this.loadRouter = true;
if (isCurrentPageCache) {
this.keepAlivePush(pageName);
}
});
}
},
mounted () {
document.addEventListener('scroll', this.handleScroll, { passive: true });
},
beforeDestroy () {
document.removeEventListener('scroll', this.handleScroll);
},
created () {
if (this.isTablet && this.showSiderCollapse) this.updateMenuCollapse(true);
}
}
</script>
components/basic-layout/menu-head/index.vue 0 → 100644
View file @ 75dd27ad
<template>
<div class="i-layout-menu-head" :class="{ 'i-layout-menu-head-mobile': isMobile }">
<Menu mode="horizontal" :active-name="headerName" v-if="!isMobile && !isMenuLimit" ref="menu">
<MenuItem v-for="item in filterHeader" :to="item.path" :replace="item.replace" :target="item.target" :name="item.name" :key="item.path" @click.native="handleClick(item.path, 'header')">
<i-menu-head-title :item="item" />
</MenuItem>
</Menu>
<div class="i-layout-header-trigger i-layout-header-trigger-min i-layout-header-trigger-in i-layout-header-trigger-no-height" v-else>
<Dropdown trigger="click" :class="{ 'i-layout-menu-head-mobile-drop': isMobile }">
<Icon type="ios-apps" />
<DropdownMenu slot="list">
<i-link v-for="item in filterHeader" :to="item.path" :replace="item.replace" :target="item.target" :key="item.path" @click.native="handleClick(item.path, 'header')">
<DropdownItem>
<i-menu-head-title :item="item" />
</DropdownItem>
</i-link>
</DropdownMenu>
</Dropdown>
</div>
</div>
</template>
<script>
import iMenuHeadTitle from './title';
import { mapState, mapGetters } from 'vuex';
import { getStyle } from 'view-design/src/utils/assist';
import clickItem from '../mixins/click-item';
// import { on, off } from 'view-design/src/utils/dom';
// import { throttle } from 'lodash';
export default {
name: 'iMenuHead',
components: { iMenuHeadTitle },
mixins: [ clickItem ],
computed: {
...mapState('admin/layout', [
'isMobile'
]),
...mapState('admin/menu', [
'headerName'
]),
...mapGetters('admin/menu', [
'filterHeader'
])
},
data () {
return {
handleResize: () => {},
isMenuLimit: false,
menuMaxWidth: 0 // 达到这个值后，menu 就显示不下了
}
},
methods: {
handleGetMenuHeight () {
const menuWidth = parseInt(getStyle(this.$el, 'width'));
const $menu = this.$refs.menu;
if ($menu) {
const menuHeight = parseInt(getStyle(this.$refs.menu.$el, 'height'));
if (menuHeight > 64) {
if (!this.isMenuLimit) {
this.menuMaxWidth = menuWidth;
}
this.isMenuLimit = true;
}
} else if (menuWidth >= this.menuMaxWidth) {
this.isMenuLimit = false;
}
}
},
watch: {
filterHeader () {
this.handleGetMenuHeight();
},
isMobile () {
this.handleGetMenuHeight();
}
},
mounted () {
// this.handleResize = throttle(this.handleGetMenuHeight, 100, { leading: false });
// on(window, 'resize', this.handleResize);
this.handleGetMenuHeight();
},
beforeDestroy () {
// off(window, 'resize', this.handleResize);
}
}
</script>
components/basic-layout/menu-head/title.vue 0 → 100644
View file @ 75dd27ad
<template>
<div class="i-layout-menu-head-title">
<span class="i-layout-menu-head-title-icon" v-if="(item.icon || item.custom || item.img) && !hideIcon">
<Icon :type="item.icon" v-if="item.icon" />
<Icon :custom="item.custom" v-else-if="item.custom" />
<img :src="item.img" v-else-if="item.img" />
</span>
<span class="i-layout-menu-head-title-text">{{ tTitle(item.title) }}</span>
</div>
</template>
<script>
/**
* 该组件除了 Menu，也被 Breadcrumb 使用过
* */
import tTitle from '../mixins/translate-title';
export default {
name: 'iMenuHeadTitle',
mixins: [ tTitle ],
props: {
item: {
type: Object,
default () {
return {}
}
},
hideIcon: {
type: Boolean,
default: false
}
}
}
</script>
components/basic-layout/menu-side/index.vue 0 → 100644
View file @ 75dd27ad
<template>
<div>
<div class="i-layout-sider-logo" :class="{ 'i-layout-sider-logo-dark': siderTheme === 'dark' }">
<transition name="fade-quick">
<i-link to="/" v-show="!hideLogo">
<img src="@/assets/images/logo-small.png" v-if="menuCollapse">
<img src="@/assets/images/logo.png" v-else-if="siderTheme === 'light'">
<img src="@/assets/images/logo-dark.png" v-else>
</i-link>
</transition>
</div>
<Menu
ref="menu"
class="i-layout-menu-side i-scrollbar-hide"
:theme="siderTheme"
:accordion="menuAccordion"
:active-name="activePath"
:open-names="openNames"
width="auto">
<template v-if="!menuCollapse" v-for="(item, index) in filterSider">
<i-menu-side-item v-if="item.children === undefined || !item.children.length" :menu="item" :key="index" />
<i-menu-side-submenu v-else :menu="item" :key="index" />
</template>
<template v-else>
<Tooltip :content="tTitle(item.title)" placement="right" v-if="item.children === undefined || !item.children.length" :key="index">
<i-menu-side-item :menu="item" hide-title />
</Tooltip>
<i-menu-side-collapse v-else :menu="item" :key="index" top-level />
</template>
</Menu>
</div>
</template>
<script>
import iMenuSideItem from './menu-item';
import iMenuSideSubmenu from './submenu';
import iMenuSideCollapse from './menu-collapse';
import tTitle from '../mixins/translate-title';
import { mapState, mapGetters } from 'vuex';
export default {
name: 'iMenuSide',
mixins: [ tTitle ],
components: { iMenuSideItem, iMenuSideSubmenu, iMenuSideCollapse },
props: {
hideLogo: {
type: Boolean,
default: false
}
},
computed: {
...mapState('admin/layout', [
'siderTheme',
'menuAccordion',
'menuCollapse'
]),
...mapState('admin/menu', [
'activePath',
'openNames'
]),
...mapGetters('admin/menu', [
'filterSider'
])
},
watch: {
'$route': {
handler () {
this.handleUpdateMenuState();
},
immediate: true
},
// 在展开/收起侧边菜单栏时，更新一次 menu 的状态
menuCollapse () {
this.handleUpdateMenuState();
}
},
methods: {
handleUpdateMenuState () {
this.$nextTick(() => {
if (this.$refs.menu) {
this.$refs.menu.updateActiveName();
if (this.menuAccordion) this.$refs.menu.updateOpened();
}
});
}
}
}
</script>
components/basic-layout/menu-side/menu-collapse.vue 0 → 100644
View file @ 75dd27ad
<template>
<Dropdown placement="right-start" :class="dropdownClasses">
<li :class="menuItemClasses" v-if="topLevel">
<i-menu-side-title :menu="menu" hide-title />
</li>
<DropdownItem v-else>
<i-menu-side-title :menu="menu" :selected="openNames.indexOf(menu.path) >= 0" />
<Icon type="ios-arrow-forward" class="i-layout-menu-side-arrow" />
</DropdownItem>
<DropdownMenu slot="list">
<div class="i-layout-menu-side-collapse-title" v-if="showCollapseMenuTitle">
<i-menu-side-title :menu="menu" />
</div>
<template v-for="(item, index) in menu.children">
<i-link :to="item.path" :target="item.target" v-if="item.children === undefined || !item.children.length" :key="index" @click.native="handleClick(item.path)">
<DropdownItem :divided="item.divided" :class="{ 'i-layout-menu-side-collapse-item-selected': item.path === activePath }">
<i-menu-side-title :menu="item" />
</DropdownItem>
</i-link>
<i-menu-side-collapse v-else :menu="item" :key="index" />
</template>
</DropdownMenu>
</Dropdown>
</template>
<script>
import iMenuSideTitle from './menu-title';
import clickItem from '../mixins/click-item';
import { mapState } from 'vuex';
export default {
name: 'iMenuSideCollapse',
components: { iMenuSideTitle },
mixins: [ clickItem ],
props: {
menu: {
type: Object,
default () {
return {}
}
},
// 是否是第一级，区分在于左侧和展开侧
topLevel: {
type: Boolean,
default: false
}
},
computed: {
...mapState('admin/layout', [
'siderTheme',
'showCollapseMenuTitle'
]),
...mapState('admin/menu', [
'activePath',
'openNames'
]),
dropdownClasses () {
return {
'i-layout-menu-side-collapse-top': this.topLevel,
'i-layout-menu-side-collapse-dark': this.siderTheme === 'dark'
}
},
menuItemClasses () {
return [
'ivu-menu-item i-layout-menu-side-collapse-top-item',
{
'ivu-menu-item-selected ivu-menu-item-active': this.openNames.indexOf(this.menu.path) >= 0 // -active 在高亮时，有背景
}
]
}
}
}
</script>
components/basic-layout/menu-side/menu-item.vue 0 → 100644
View file @ 75dd27ad
<template>
<div>
<MenuItem :to="menu.path" :replace="menu.replace" :target="menu.target" :name="menu.path" @click.native="handleClick(menu.path)">
<i-menu-side-title :menu="menu" :hide-title="hideTitle" />
</MenuItem>
</div>
</template>
<script>
import iMenuSideTitle from './menu-title';
import clickItem from '../mixins/click-item';
export default {
name: 'iMenuSideItem',
components: { iMenuSideTitle },
mixins: [ clickItem ],
props: {
menu: {
type: Object,
default () {
return {}
}
},
hideTitle: {
type: Boolean,
default: false
}
}
}
</script>
components/basic-layout/menu-side/menu-title.vue 0 → 100644
View file @ 75dd27ad
<template>
<span class="i-layout-menu-side-title">
<span class="i-layout-menu-side-title-icon" :class="{ 'i-layout-menu-side-title-icon-single': hideTitle }" v-if="menu.icon || menu.custom || menu.img">
<Icon :type="menu.icon" v-if="menu.icon" />
<Icon :custom="menu.custom" v-else-if="menu.custom" />
<img :src="menu.img" v-else-if="menu.img" />
</span>
<span class="i-layout-menu-side-title-text" :class="{ 'i-layout-menu-side-title-text-selected': selected }" v-if="!hideTitle">{{ tTitle(menu.title) }}</span>
</span>
</template>
<script>
import tTitle from '../mixins/translate-title';
export default {
name: 'iMenuSideTitle',
mixins: [ tTitle ],
props: {
menu: {
type: Object,
default () {
return {}
}
},
hideTitle: {
type: Boolean,
default: false
},
// 用于侧边栏收起 Dropdown 当前高亮
selected: {
type: Boolean,
default: false
}
}
}
</script>
components/basic-layout/menu-side/submenu.vue 0 → 100644
View file @ 75dd27ad
<template>
<Submenu :name="menu.path">
<template slot="title">
<i-menu-side-title :menu="menu" />
</template>
<template v-for="(item, index) in menu.children">
<i-menu-side-item v-if="item.children === undefined || !item.children.length" :menu="item" :key="index" />
<i-menu-side-submenu v-else :menu="item" :key="index" />
</template>
</Submenu>
</template>
<script>
import iMenuSideItem from './menu-item';
import iMenuSideTitle from './menu-title';
export default {
name: 'iMenuSideSubmenu',
components: { iMenuSideItem, iMenuSideTitle },
props: {
menu: {
type: Object,
default () {
return {}
}
}
}
}
</script>
components/basic-layout/mixins/click-item.js 0 → 100644
View file @ 75dd27ad
import { findComponentUpward } from 'view-design/src/utils/assist';
import { mapState } from 'vuex';
export default {
computed: {
...mapState('admin/layout', [
'menuSiderReload',
'menuHeaderReload'
])
},
methods: {
handleClick (path, type = 'sider') {
const current = this.$route.path;
if (current === path) {
if (type === 'sider' && this.menuSiderReload) this.handleReload();
else if (type === 'header' && this.menuHeaderReload) this.handleReload();
}
},
handleReload () {
const $layout = findComponentUpward(this, 'BasicLayout');
if ($layout) $layout.handleReload();
}
}
}
components/basic-layout/mixins/translate-title.js 0 → 100644
View file @ 75dd27ad
export default {
methods: {
tTitle (title) {
if (title && title.indexOf('$t:') === 0) {
return this.$t(title.split('$t:')[1]);
} else {
return title;
}
}
}
}
components/basic-layout/tabs/index.vue 0 → 100644
View file @ 75dd27ad
<template>
<div class="i-layout-tabs" :class="classes" :style="styles">
<div class="i-layout-tabs-main">
<Tabs
type="card"
:value="current"
:animated="false"
closable
@on-click="handleClickTab"
@on-tab-remove="handleClickClose"
>
<TabPane
v-for="page in opened"
:key="page.fullPath"
:label="(h) => tabLabel(h, page)"
:name="page.fullPath"
:closable="page.meta && page.meta.closable"
/>
</Tabs>
<Dropdown class="i-layout-tabs-close" @on-click="handleClose">
<div class="i-layout-tabs-close-main">
<Icon type="ios-arrow-down" />
</div>
<DropdownMenu slot="list">
<DropdownItem name="left">
<Icon type="md-arrow-back" />
{{ $t('basicLayout.tabs.left') }}
</DropdownItem>
<DropdownItem name="right">
<Icon type="md-arrow-forward" />
{{ $t('basicLayout.tabs.right') }}
</DropdownItem>
<DropdownItem name="other">
<Icon type="md-close" />
{{ $t('basicLayout.tabs.other') }}
</DropdownItem>
<DropdownItem name="all">
<Icon type="md-close-circle" />
{{ $t('basicLayout.tabs.all') }}
</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
</div>
</template>
<script>
import { mapState, mapGetters, mapActions } from 'vuex';
import menuSider from '@/menu/sider';
import tTitle from '../mixins/translate-title';
import Setting from '@/setting';
import { getAllSiderMenu } from '@/libs/system';
export default {
name: 'iTabs',
mixins: [ tTitle ],
computed: {
...mapState('admin/page', [
'opened',
'current'
]),
...mapState('admin/layout', [
'showTabsIcon',
'tabsFix',
'tabsReload',
'headerFix',
'headerStick',
'isMobile',
'menuCollapse'
]),
...mapGetters('admin/menu', [
'hideSider'
]),
classes () {
return {
'i-layout-tabs-fix': this.tabsFix
}
},
isHeaderStick () {
return this.hideSider;
},
styles () {
let style = {};
if (this.tabsFix && !this.headerFix) {
style.top = `${64 - this.scrollTop}px`;
}
const menuWidth = this.isHeaderStick ? 0 : this.menuCollapse ? 80 : Setting.menuSideWidth;
if (!this.isMobile && this.tabsFix) {
style.width = `calc(100% - ${menuWidth}px)`;
style.left = `${menuWidth}px`;
}
return style;
}
},
data () {
return {
// 得到所有侧边菜单，并转为平级，查询图标用
allSiderMenu: getAllSiderMenu(menuSider),
scrollTop: 0
}
},
methods: {
...mapActions('admin/page', [
'close',
'closeLeft',
'closeRight',
'closeOther',
'closeAll'
]),
tabLabel (h, page) {
const title = h('span', this.tTitle(page.meta.title) || '未命名');
let slot = [];
if (this.showTabsIcon) {
const fullPathWithoutQuery = page.fullPath.indexOf('?') >= 0 ? page.fullPath.split('?')[0] : page.fullPath;
const currentMenu = this.allSiderMenu.find(menu => menu.path === fullPathWithoutQuery) || {};
let icon;
if (currentMenu.icon) {
icon = h('Icon', {
props: {
type: currentMenu.icon
}
});
} else if (currentMenu.custom) {
icon = h('Icon', {
props: {
custom: currentMenu.custom
}
});
} else if (currentMenu.img) {
icon = h('img', {
attrs: {
src: currentMenu.img
}
});
}
if (icon) slot.push(icon);
slot.push(title);
} else {
slot.push(title);
}
return h('div', {
class: 'i-layout-tabs-title'
}, slot);
},
handleClickTab (tabName) {
if (tabName === this.current) {
if (this.tabsReload) {
this.$emit('on-reload');
}
} else {
const page = this.opened.find(page => page.fullPath === tabName);
const { name, params, query } = page;
if (page) this.$router.push({ name, params, query }, () => {});
}
},
handleClickClose (tagName) {
this.close({
tagName
});
},
handleScroll () {
if (this.tabsFix && !this.headerFix) {
const scrollTop = document.body.scrollTop + document.documentElement.scrollTop;
this.scrollTop = scrollTop > 64 ? 64 : scrollTop;
}
},
handleClose (name) {
const params = {
pageSelect: this.current
};
switch (name) {
case 'left':
this.closeLeft(params);
break;
case 'right':
this.closeRight(params);
break;
case 'other':
this.closeOther(params);
break;
case 'all':
this.closeAll();
break;
}
}
},
mounted () {
document.addEventListener('scroll', this.handleScroll, { passive: true });
this.handleScroll();
},
beforeDestroy () {
document.removeEventListener('scroll', this.handleScroll);
}
}
</script>
components/copyright/index.vue 0 → 100644
View file @ 75dd27ad
<template>
<GlobalFooter class="i-copyright" :links="links" :copyright="copyright" />
</template>
<script>
export default {
name: 'i-copyright',
data () {
return {
links: [
{
title: '官网',
key: '官网',
href: 'https://iview.design',
blankTarget: true
},
{
title: '社区',
key: '社区',
href: 'https://dev.iviewui.com',
blankTarget: true
},
{
title: '专业版',
key: '专业版',
href: 'https://pro.iviewui.com',
blankTarget: true
}
],
copyright: 'Copyright © 2019 北京视图更新科技有限公司'
}
}
}
</script>
<style lang="less">
.i-copyright{
flex: 0 0 auto;
}
</style>
components/link/index.vue 0 → 100644
View file @ 75dd27ad
<template>
<a
:href="linkUrl"
:target="target"
class="i-link"
:class="{ 'i-link-color': !linkColor }"
@click.exact="handleClickItem($event, false)"
@click.ctrl="handleClickItem($event, true)"
@click.meta="handleClickItem($event, true)"
><slot></slot></a>
</template>
<script>
import mixinsLink from 'view-design/src/mixins/link';
export default {
name: 'i-link',
mixins: [ mixinsLink ],
props: {
disabled: {
type: Boolean,
default: false
},
// 开启后，链接颜色为默认的蓝色，默认关闭为继承效果
linkColor: {
type: Boolean,
default: false
}
},
methods: {
handleClickItem (event, new_window = false) {
if (this.disabled) return;
this.handleCheckClick(event, new_window);
}
}
}
</script>
<style lang="less">
.i-link{
cursor: pointer;
&-color{
&, &:hover, &:active{
color: inherit;
}
}
}
</style>
components/mde/index.vue 0 → 100644
View file @ 75dd27ad
<template>
<div class="i-mde" :class="classes">
<textarea ref="mde"></textarea>
</div>
</template>
<script>
import SimpleMDE from 'simplemde';
import 'simplemde/dist/simplemde.min.css';
export default {
name: 'i-mde',
props: {
value: {
type: String,
default: ''
},
border: {
type: Boolean,
default: false
},
// 配置参数
config: {
type: Object,
default: () => ({})
}
},
data () {
return {
// 编辑器实例
mde: null,
// 编辑器默认参数
// 详见 https://github.com/sparksuite/simplemde-markdown-editor#configuration
defaultConfig: {
}
}
},
computed: {
classes () {
return [
{
'i-mde-no-border': !this.border
}
];
}
},
methods: {
// 初始化
init () {
// 合并参数
const config = Object.assign({}, this.defaultConfig, this.config);
// 初始化
this.mde = new SimpleMDE({
...config,
// 初始值
initialValue: this.value,
// 挂载元素
element: this.$refs.mde
});
this.mde.codemirror.on('change', () => {
this.$emit('input', this.mde.value());
this.$emit('on-change', this.mde.value());
});
},
// 增加内容
add (val) {
if (this.mde) {
this.mde.value(this.value + val);
}
},
// 替换内容
replace (val) {
if (this.mde) {
this.mde.value(val);
}
}
},
mounted () {
// 初始化
this.init();
},
beforeDestroy () {
// 在组件销毁后销毁实例
this.mde = null;
}
}
</script>
<style lang="less">
.i-mde{
.editor-toolbar.fullscreen, .CodeMirror-fullscreen, .editor-preview-side{
z-index: 100;
border-radius: 0;
}
&-no-border{
.editor-toolbar{
border: none;
border-bottom: 1px solid #e8eaec;
}
.CodeMirror{
border: none;
}
.editor-preview-side{
border: none;
border-left: 1px solid #e8eaec;
}
}
}
</style>
components/quill/index.vue 0 → 100644
View file @ 75dd27ad
<template>
<div class="i-quill" :class="classes">
<div ref="editor" :style="styles"></div>
</div>
</template>
<script>
import Quill from 'quill';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
export default {
name: 'i-quill',
props: {
value: {
type: String,
default: ''
},
border: {
type: Boolean,
default: false
},
height: {
type: Number
},
minHeight: {
type: Number
}
},
data () {
return {
Quill: null,
currentValue: '',
options: {
theme: 'snow',
bounds: document.body,
debug: 'warn',
modules: {
toolbar: [
['bold', 'italic', 'underline', 'strike'],
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'size': ['small', false, 'large', 'huge'] }],
[{ 'color': [] }, { 'background': [] }],
['blockquote', 'code-block'],
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
// [{ 'script': 'sub' }, { 'script': 'super' }],
[{ 'indent': '-1' }, { 'indent': '+1' }],
[{ 'align': [] }],
[{ 'direction': 'rtl' }],
// [{ 'font': [] }],
['clean'],
['link', 'image']
]
},
placeholder: '内容...',
readOnly: false
}
}
},
computed: {
classes () {
return [
{
'i-quill-no-border': !this.border
}
];
},
styles () {
let style = {};
if (this.minHeight) {
style.minHeight = `${this.minHeight}px`;
}
if (this.height) {
style.height = `${this.height}px`;
}
return style;
}
},
watch: {
value: {
handler (val) {
if (val !== this.currentValue) {
this.currentValue = val;
if (this.Quill) {
this.Quill.pasteHTML(this.value);
}
}
},
immediate: true
}
},
methods: {
init () {
const editor = this.$refs.editor;
// 初始化编辑器
this.Quill = new Quill(editor, this.options);
// 默认值
this.Quill.pasteHTML(this.currentValue);
// 绑定事件
this.Quill.on('text-change', (delta, oldDelta, source) => {
const html = this.$refs.editor.children[0].innerHTML;
const text = this.Quill.getText();
const quill = this.Quill;
// 更新内部的值
this.currentValue = html;
// 发出事件 v-model
this.$emit('input', html);
// 发出事件
this.$emit('on-change', { html, text, quill });
});
// 将一些 quill 自带的事件传递出去
this.Quill.on('text-change', (delta, oldDelta, source) => {
this.$emit('on-text-change', delta, oldDelta, source);
});
this.Quill.on('selection-change', (range, oldRange, source) => {
this.$emit('on-selection-change', range, oldRange, source);
});
this.Quill.on('editor-change', (eventName, ...args) => {
this.$emit('on-editor-change', eventName, ...args);
});
}
},
mounted () {
this.init();
},
beforeDestroy () {
// 在组件销毁后销毁实例
this.Quill = null;
}
}
</script>
<style lang="less">
.i-quill-no-border{
.ql-toolbar.ql-snow{
border: none;
border-bottom: 1px solid #e8eaec;
}
.ql-container.ql-snow{
border: none;
}
}
</style>
i18n/index.js 0 → 100644
View file @ 75dd27ad
import Vue from 'vue';
import VueI18n from 'vue-i18n';
import store from '@/store/index';
import Languages from '@/i18n/locale';
store.dispatch('admin/i18n/getLocale');
const locale = store.state.admin.i18n.locale;
Vue.use(VueI18n);
export default new VueI18n({
locale,
messages: Languages
});
i18n/locale.js 0 → 100644
View file @ 75dd27ad
// 导入自有语言包
import zhCN from './locale/zh-CN';
import enUS from './locale/en-US';
// 导入 iView 语言包
import zhCNiView from 'view-design/dist/locale/zh-CN';
import enUSiView from 'view-design/dist/locale/en-US';
// 导入布局语言包
import layoutLocale from '@/layouts/basic-layout/i18n';
// 合并语言包
export default {
'zh-CN': Object.assign(zhCN, zhCNiView, layoutLocale['zh-CN']),
'en-US': Object.assign(enUS, enUSiView, layoutLocale['en-US'])
};
i18n/locale/en-US.js 0 → 100644
View file @ 75dd27ad
export default {
locale: 'en-US',
language: 'English',
menu: {
i18n: 'Internationalization'
},
page: {
login: {
title: 'Login',
remember: 'Remember me',
forgot: 'Forgot your password?',
submit: 'Login',
other: 'Sign in with',
signup: 'Sign up'
},
register: {
title: 'Register',
submit: 'Register',
other: 'Already have an account?'
},
exception: {
e403: 'Sorry, you don\'t have access to this page.',
e404: 'Sorry, the page you visited does not exist.',
e500: 'Sorry, the server is reporting an error.',
btn: 'Back to home'
},
i18n: {
content: 'Hello, nice to meet you!'
}
}
}
i18n/locale/zh-CN.js 0 → 100644
View file @ 75dd27ad
export default {
locale: 'zh-CN',
language: '简体中文',
menu: {
i18n: '多语言'
},
page: {
login: {
title: '登录',
remember: '自动登录',
forgot: '忘记密码',
submit: '登录',
other: '其它登录方式',
signup: '注册账户'
},
register: {
title: '注册',
submit: '注册',
other: '使用已有账户登录'
},
exception: {
e403: '抱歉，你无权访问该页面',
e404: '抱歉，你访问的页面不存在',
e500: '抱歉，服务器出错了',
btn: '返回首页'
},
i18n: {
content: '你好，很高兴认识你！'
}
}
}
layouts/basic-layout/header-breadcrumb/index.vue 0 → 100644
View file @ 75dd27ad
<template>
<Breadcrumb class="i-layout-header-breadcrumb" v-if="!isLimit" ref="breadcrumb">
<BreadcrumbItem>
<i-menu-head-title :item="topItem" :hide-icon="!showBreadcrumbIcon" />
</BreadcrumbItem>
<BreadcrumbItem v-for="item in items" :key="item.path">
<i-menu-head-title :item="item" :hide-icon="!showBreadcrumbIcon" />
</BreadcrumbItem>
<BreadcrumbItem>
<i-menu-head-title :item="siderMenuObject[activePath]" :hide-icon="!showBreadcrumbIcon" />
</BreadcrumbItem>
</Breadcrumb>
</template>
<script>
import { mapState } from 'vuex';
import menuSider from '@/menu/sider';
import { flattenSiderMenu } from '@/libs/system';
import iMenuHeadTitle from '../menu-head/title';
import { on, off } from 'view-design/src/utils/dom';
import { findComponentUpward, getStyle } from 'view-design/src/utils/assist';
import { throttle } from 'lodash';
export default {
name: 'iHeaderBreadcrumb',
components: { iMenuHeadTitle },
computed: {
...mapState('admin/layout', [
'showBreadcrumbIcon',
'menuCollapse'
]),
...mapState('admin/menu', [
'openNames',
'activePath',
'header',
'headerName'
]),
siderMenuObject () {
let obj = {};
this.allSiderMenu.forEach(item => {
if ('path' in item) {
obj[item.path] = item;
}
});
return obj;
},
items () {
let items = [...this.openNames];
let newItems = [];
items.forEach(i => {
newItems.push(this.siderMenuObject[i]);
});
return newItems;
},
// 第一级，默认是 menu/header.js 中的第一项
topItem () {
return this.header.find(item => item.name === this.headerName);
}
},
data () {
return {
// 得到所有侧边菜单，并转为平级，查询图标及显示对应内容
allSiderMenu: flattenSiderMenu(menuSider, []),
handleResize: () => {},
isLimit: false,
maxWidth: 560,
breadcrumbWidth: 0
}
},
methods: {
handleCheckWidth () {
const $header = findComponentUpward(this, 'Header');
if ($header) {
const headerWidth = parseInt(getStyle($header.$el, 'width'));
this.$nextTick(() => {
this.isLimit = headerWidth - this.maxWidth <= this.breadcrumbWidth;
});
}
},
handleGetWidth () {
this.isLimit = false;
this.$nextTick(() => {
const $breadcrumb = this.$refs.breadcrumb;
if ($breadcrumb) {
this.breadcrumbWidth = parseInt(getStyle($breadcrumb.$el, 'width'));
}
});
}
},
watch: {
topItem: {
handler () {
this.handleGetWidth();
this.handleCheckWidth();
},
deep: true
},
items: {
handler () {
this.handleGetWidth();
this.handleCheckWidth();
},
deep: true
},
activePath: {
handler () {
this.handleGetWidth();
this.handleCheckWidth();
},
deep: true
}
},
mounted () {
this.handleResize = throttle(this.handleCheckWidth, 100, { leading: false });
on(window, 'resize', this.handleResize);
this.handleGetWidth();
this.handleCheckWidth();
},
beforeDestroy () {
off(window, 'resize', this.handleResize);
}
}
</script>
layouts/basic-layout/header-collapse/index.vue 0 → 100644
View file @ 75dd27ad
<template>
<span class="i-layout-header-trigger" :class="{ 'i-layout-header-trigger-min': showReload }" @click="handleToggleMenuSide">
<Icon custom="i-icon i-icon-menu-unfold" v-show="menuCollapse || isMobile" />
<Icon custom="i-icon i-icon-menu-fold" v-show="!menuCollapse && !isMobile" />
</span>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
export default {
name: 'iHeaderCollapse',
computed: {
...mapState('admin/layout', [
'isMobile',
'isTablet',
'isDesktop',
'menuCollapse',
'showReload'
])
},
methods: {
...mapMutations('admin/layout', [
'updateMenuCollapse'
]),
// 展开/收起侧边栏
handleToggleMenuSide (state) {
if (this.isMobile) {
this.updateMenuCollapse(false);
this.$emit('on-toggle-drawer', state);
} else {
this.updateMenuCollapse(!this.menuCollapse);
}
}
},
watch: {
// 切换页面时，在移动端自动收起侧边栏
// 强行传参 false 是因为有的路由不是在菜单栏发生的，toggle 会使其显示
'$route' () {
if (this.isMobile) this.handleToggleMenuSide(false);
},
// 在平板时自动收起菜单
isTablet (state) {
if (!this.isMobile && state) this.updateMenuCollapse(true);
},
// 在桌面时自动展开菜单
isDesktop (state) {
if (!this.isMobile && state) this.updateMenuCollapse(false);
}
}
}
</script>
layouts/basic-layout/header-fullscreen/index.vue 0 → 100644
View file @ 75dd27ad
<template>
<span class="i-layout-header-trigger i-layout-header-trigger-min" @click="toggleFullscreen">
<Icon custom="i-icon i-icon-full-screen" v-show="!isFullscreen" />
<Icon custom="i-icon i-icon-exit-full-screen" v-show="isFullscreen" />
</span>
</template>
<script>
import { mapState, mapActions } from 'vuex';
export default {
name: 'iHeaderFullscreen',
computed: {
...mapState('admin/layout', [
'isFullscreen'
])
},
methods: {
...mapActions('admin/layout', [
'toggleFullscreen'
])
}
}
</script>
layouts/basic-layout/header-i18n/index.vue 0 → 100644
View file @ 75dd27ad
<template>
<span class="i-layout-header-trigger i-layout-header-trigger-min">
<Dropdown :trigger="isMobile ? 'click' : 'hover'" class="i-layout-header-i18n" :class="{ 'i-layout-header-user-mobile': isMobile }" @on-click="handleClick">
<Icon type="md-globe" />
<DropdownMenu slot="list">
<DropdownItem v-for="(item, key) in languages" :key="key" :name="key" :selected="locale === key">
<span>{{ item.language }}</span>
</DropdownItem>
</DropdownMenu>
</Dropdown>
</span>
</template>
<script>
import Languages from '@/i18n/locale';
import { mapState, mapActions } from 'vuex';
export default {
name: 'iHeaderI18n',
data () {
return {
languages: Languages
}
},
computed: {
...mapState('admin/i18n', [
'locale'
]),
...mapState('admin/layout', [
'isMobile'
])
},
methods: {
...mapActions('admin/i18n', [
'setLocale'
]),
handleClick (locale) {
if (locale === this.locale) return;
this.setLocale({ locale, vm: this });
}
}
}
</script>
layouts/basic-layout/header-log/index.vue 0 → 100644
View file @ 75dd27ad
<template>
<Tooltip :content="tooltipContent" transfer>
<span class="i-layout-header-trigger i-layout-header-trigger-min" @click="handleOpenLog">
<Badge :count="lengthError === 0 ? null : lengthError" :overflow-count="99" :dot="showDot" :offset="showDot ? [26, 2] : [20, 0]">
<Icon custom="i-icon i-icon-record" />
</Badge>
</span>
</Tooltip>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
name: 'iHeaderLog',
computed: {
...mapGetters('admin/log', [
'length',
'lengthError'
]),
showDot () {
return !!this.length && this.lengthError === 0;
},
tooltipContent () {
if (!this.length) {
return '没有日志或异常';
} else {
let text = `${this.length} 条日志`;
if (this.lengthError) text += ` | 包含 ${this.lengthError} 个异常`;
return text;
}
}
},
methods: {
handleOpenLog () {
this.$router.push({
name: 'log'
});
}
}
}
</script>
layouts/basic-layout/header-logo/index.vue 0 → 100644
View file @ 75dd27ad
<template>
<i-link class="i-layout-header-logo" :class="{ 'i-layout-header-logo-stick': !isMobile }" to="/">
<img src="@/assets/images/logo-small.png" v-if="isMobile">
<img src="@/assets/images/logo.png" v-else-if="headerTheme === 'light'">
<img src="@/assets/images/logo-dark.png" v-else>
</i-link>
</template>
<script>
import { mapState } from 'vuex';
export default {
name: 'iHeaderLogo',
computed: {
...mapState('admin/layout', [
'isMobile',
'headerTheme'
])
}
}
</script>
layouts/basic-layout/header-notice/index.vue 0 → 100644
View file @ 75dd27ad
<template>
<span class="i-layout-header-trigger i-layout-header-trigger-min i-layout-header-trigger-in">
<Notification
:wide="isMobile"
:badge-props="badgeProps"
class="i-layout-header-notice"
:class="{ 'i-layout-header-notice-mobile': isMobile }">
<Icon slot="icon" custom="i-icon i-icon-notification" />
<NotificationTab title="通知">
</NotificationTab>
<NotificationTab title="消息">
</NotificationTab>
<NotificationTab title="待办">
</NotificationTab>
</Notification>
</span>
</template>
<script>
import { mapState } from 'vuex';
export default {
name: 'iHeaderNotice',
data () {
return {
badgeProps: {
offset: [20, 0]
}
}
},
computed: {
...mapState('admin/layout', [
'isMobile'
])
}
}
</script>
layouts/basic-layout/header-reload/index.vue 0 → 100644
View file @ 75dd27ad
<template>
<span class="i-layout-header-trigger" :class="{ 'i-layout-header-trigger-min': showSiderCollapse }" @click="handleReload">
<Icon custom="i-icon i-icon-refresh" />
</span>
</template>
<script>
import { mapState } from 'vuex';
export default {
name: 'iHeaderReload',
computed: {
...mapState('admin/layout', [
'isMobile',
'showSiderCollapse'
])
},
methods: {
handleReload () {
this.$emit('on-reload');
}
}
}
</script>
layouts/basic-layout/header-search/index.vue 0 → 100644
View file @ 75dd27ad
<template>
<span v-if="isDesktop" class="i-layout-header-trigger i-layout-header-trigger-min i-layout-header-trigger-in i-layout-header-trigger-nohover">
<input class="i-layout-header-search" type="text" :placeholder="$t('basicLayout.search.placeholder')">
</span>
<span v-else class="i-layout-header-trigger i-layout-header-trigger-min">
<Dropdown trigger="click" class="i-layout-header-search-drop" ref="dropdown">
<Icon type="ios-search" />
<DropdownMenu slot="list">
<div class="i-layout-header-search-drop-main">
<Input size="large" prefix="ios-search" type="text" :placeholder="$t('basicLayout.search.placeholder')" />
<span class="i-layout-header-search-drop-main-cancel" @click="handleCloseSearch">{{ $t('basicLayout.search.cancel') }}</span>
</div>
</DropdownMenu>
</Dropdown>
</span>
</template>
<script>
import { mapState } from 'vuex';
export default {
name: 'iHeaderSearch',
computed: {
...mapState('admin/layout', [
'isDesktop',
'headerMenu'
])
},
methods: {
handleCloseSearch () {
this.$refs.dropdown.handleClick();
}
}
}
</script>
layouts/basic-layout/header-setting/index.vue 0 → 100644
View file @ 75dd27ad
<template>
<span class="i-layout-header-trigger i-layout-header-trigger-min" @click="showSetting">
<Icon type="md-more" />
<Drawer v-model="visible" width="280">
<Divider size="small">主题风格设置</Divider>
<div class="i-layout-header-setting-item">
<div class="i-layout-header-setting-item-radio" :class="{ 'on': siderTheme === 'dark' }" @click="handleChangeSetting('siderTheme', 'dark')">
<Tooltip content="暗色侧边栏" placement="top" transfer>
<img src="@/assets/svg/nav-theme-dark.svg">
</Tooltip>
</div>
<div class="i-layout-header-setting-item-radio" :class="{ 'on': siderTheme === 'light' }" @click="handleChangeSetting('siderTheme', 'light')">
<Tooltip content="亮色侧边栏" placement="top" transfer>
<img src="@/assets/svg/nav-theme-light.svg">
</Tooltip>
</div>
</div>
<div class="i-layout-header-setting-item">
<div class="i-layout-header-setting-item-radio" :class="{ 'on': headerTheme === 'light' }" @click="handleChangeSetting('headerTheme', 'light')">
<Tooltip content="亮色顶栏" placement="top" transfer>
<img src="@/assets/svg/nav-theme-dark.svg">
</Tooltip>
</div>
<div class="i-layout-header-setting-item-radio" :class="{ 'on': headerTheme === 'dark' }" @click="handleChangeSetting('headerTheme', 'dark')">
<Tooltip content="暗色顶栏" placement="top" transfer>
<img src="@/assets/svg/header-theme-dark.svg">
</Tooltip>
</div>
<div class="i-layout-header-setting-item-radio" :class="{ 'on': headerTheme === 'primary' }" @click="handleChangeSetting('headerTheme', 'primary')">
<Tooltip content="主色顶栏" placement="top" transfer>
<img src="@/assets/svg/header-theme-primary.svg">
</Tooltip>
</div>
</div>
<Divider size="small">导航设置</Divider>
<div class="i-layout-header-setting-item">
<span class="i-layout-header-setting-item-desc">固定侧边栏</span>
<span class="i-layout-header-setting-item-action">
<Switch size="small" :value="siderFix" @on-change="(val) => handleChangeSetting('siderFix', val)" />
</span>
</div>
<div class="i-layout-header-setting-item">
<span class="i-layout-header-setting-item-desc">固定顶栏</span>
<span class="i-layout-header-setting-item-action">
<Switch size="small" :value="headerFix" @on-change="(val) => handleChangeSetting('headerFix', val)" />
</span>
</div>
<div class="i-layout-header-setting-item" :class="{ 'i-layout-header-setting-item-disabled': !headerFix }">
<span class="i-layout-header-setting-item-desc">
下滑时隐藏顶栏
<Tooltip placement="top" content="需开启固定顶栏" transfer>
<Icon type="ios-help-circle-outline" />
</Tooltip>
</span>
<span class="i-layout-header-setting-item-action">
<Switch size="small" :value="headerHide" :disabled="!headerFix" @on-change="(val) => handleChangeSetting('headerHide', val)" />
</span>
</div>
<div class="i-layout-header-setting-item" :class="{ 'i-layout-header-setting-item-disabled': !headerFix }">
<span class="i-layout-header-setting-item-desc">
置顶顶栏
<Tooltip placement="top" content="需开启固定顶栏" transfer>
<Icon type="ios-help-circle-outline" />
</Tooltip>
</span>
<span class="i-layout-header-setting-item-action">
<Switch size="small" :value="headerStick" :disabled="!headerFix" @on-change="(val) => handleChangeSetting('headerStick', val)" />
</span>
</div>
<div class="i-layout-header-setting-item">
<span class="i-layout-header-setting-item-desc">侧边栏开启手风琴模式</span>
<span class="i-layout-header-setting-item-action">
<Switch size="small" :value="menuAccordion" @on-change="(val) => handleChangeSetting('menuAccordion', val)" />
</span>
</div>
<div class="i-layout-header-setting-item">
<span class="i-layout-header-setting-item-desc">显示折叠侧边栏按钮</span>
<span class="i-layout-header-setting-item-action">
<Switch size="small" :value="showSiderCollapse" @on-change="(val) => handleChangeSetting('showSiderCollapse', val)" />
</span>
</div>
<div class="i-layout-header-setting-item">
<span class="i-layout-header-setting-item-desc">侧边栏折叠时显示父级菜单名</span>
<span class="i-layout-header-setting-item-action">
<Switch size="small" :value="showCollapseMenuTitle" @on-change="(val) => handleChangeSetting('showCollapseMenuTitle', val)" />
</span>
</div>
<div class="i-layout-header-setting-item">
<span class="i-layout-header-setting-item-desc">
显示全局面包屑导航
<Tooltip placement="top" content="headerMenu 开启时无效" transfer>
<Icon type="ios-help-circle-outline" />
</Tooltip>
</span>
<span class="i-layout-header-setting-item-action">
<Switch size="small" :value="showBreadcrumb" @on-change="(val) => handleChangeSetting('showBreadcrumb', val)" />
</span>
</div>
<div class="i-layout-header-setting-item" :class="{ 'i-layout-header-setting-item-disabled': !showBreadcrumb }">
<span class="i-layout-header-setting-item-desc">
全局面包屑显示图标
<Tooltip placement="top" content="需开启全局面包屑导航" transfer>
<Icon type="ios-help-circle-outline" />
</Tooltip>
</span>
<span class="i-layout-header-setting-item-action">
<Switch size="small" :value="showBreadcrumbIcon" :disabled="!showBreadcrumb" @on-change="(val) => handleChangeSetting('showBreadcrumbIcon', val)" />
</span>
</div>
<div class="i-layout-header-setting-item">
<span class="i-layout-header-setting-item-desc">显示重载页面按钮</span>
<span class="i-layout-header-setting-item-action">
<Switch size="small" :value="showReload" @on-change="(val) => handleChangeSetting('showReload', val)" />
</span>
</div>
<div class="i-layout-header-setting-item">
<span class="i-layout-header-setting-item-desc">显示多语言选择</span>
<span class="i-layout-header-setting-item-action">
<Switch size="small" :value="showI18n" @on-change="(val) => handleChangeSetting('showI18n', val)" />
</span>
</div>
<Divider size="small">其它设置</Divider>
<div class="i-layout-header-setting-item">
<span class="i-layout-header-setting-item-desc">开启多页签</span>
<span class="i-layout-header-setting-item-action">
<Switch size="small" :value="tabs" @on-change="(val) => handleChangeSetting('tabs', val)" />
</span>
</div>
<div class="i-layout-header-setting-item" :class="{ 'i-layout-header-setting-item-disabled': !tabs }">
<span class="i-layout-header-setting-item-desc">
多页签显示图标
<Tooltip placement="top" content="需开启多页签" transfer>
<Icon type="ios-help-circle-outline" />
</Tooltip>
</span>
<span class="i-layout-header-setting-item-action">
<Switch size="small" :value="showTabsIcon" :disabled="!tabs" @on-change="(val) => handleChangeSetting('showTabsIcon', val)" />
</span>
</div>
<div class="i-layout-header-setting-item" :class="{ 'i-layout-header-setting-item-disabled': !tabs }">
<span class="i-layout-header-setting-item-desc">
固定多页签
<Tooltip placement="top" content="需开启多页签" transfer>
<Icon type="ios-help-circle-outline" />
</Tooltip>
</span>
<span class="i-layout-header-setting-item-action">
<Switch size="small" :value="tabsFix" :disabled="!tabs" @on-change="(val) => handleChangeSetting('tabsFix', val)" />
</span>
</div>
<Alert type="warning">
<div slot="desc">
该功能主要实时预览各种布局效果，更多完整配置在 <strong>setting.js</strong> 中设置。建议在生产环境关闭该布局预览功能。
</div>
</Alert>
</Drawer>
</span>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
export default {
name: 'iHeaderSetting',
data () {
return {
visible: false
}
},
computed: {
...mapState('admin/layout', [
'siderTheme',
'headerTheme',
'headerStick',
'siderFix',
'headerFix',
'headerHide',
'menuAccordion',
'showSiderCollapse',
'tabs',
'showTabsIcon',
'tabsFix',
'showBreadcrumb',
'showBreadcrumbIcon',
'showReload',
'showI18n',
'showCollapseMenuTitle'
])
},
methods: {
...mapMutations('admin/layout', [
'updateLayoutSetting'
]),
showSetting () {
this.visible = true;
},
handleChangeSetting (key, value) {
this.updateLayoutSetting({
key,
value
});
}
}
}
</script>
layouts/basic-layout/header-user/index.vue 0 → 100644
View file @ 75dd27ad
<template>
<span class="i-layout-header-trigger i-layout-header-trigger-min">
<Dropdown :trigger="isMobile ? 'click' : 'hover'" class="i-layout-header-user" :class="{ 'i-layout-header-user-mobile': isMobile }" @on-click="handleClick">
<Avatar size="small" :src="info.avatar" v-if="info.avatar" />
<span class="i-layout-header-user-name" v-if="!isMobile">{{ info.name }}</span>
<DropdownMenu slot="list">
<i-link to="/setting/user">
<DropdownItem>
<Icon type="ios-contact-outline" />
<span>{{ $t('basicLayout.user.center') }}</span>
</DropdownItem>
</i-link>
<i-link to="/setting/account">
<DropdownItem>
<Icon type="ios-settings-outline" />
<span>{{ $t('basicLayout.user.setting') }}</span>
</DropdownItem>
</i-link>
<DropdownItem divided name="logout">
<Icon type="ios-log-out" />
<span>{{ $t('basicLayout.user.logOut') }}</span>
</DropdownItem>
</DropdownMenu>
</Dropdown>
</span>
</template>
<script>
import { mapState, mapActions } from 'vuex';
export default {
name: 'iHeaderUser',
computed: {
...mapState('admin/user', [
'info'
]),
...mapState('admin/layout', [
'isMobile',
'logoutConfirm'
])
},
methods: {
...mapActions('admin/account', [
'logout'
]),
handleClick (name) {
if (name === 'logout') {
this.logout({
confirm: this.logoutConfirm,
vm: this
});
}
}
}
}
</script>
layouts/basic-layout/i18n.js 0 → 100644
View file @ 75dd27ad
// 默认布局使用的多语言
export default {
'zh-CN': {
basicLayout: {
search: {
placeholder: '搜索...',
cancel: '取消'
},
user: {
center: '个人中心',
setting: '设置',
logOut: '退出登录'
},
logout: {
confirmTitle: '退出登录确认',
confirmContent: '您确定退出登录当前账户吗？打开的标签页和个人设置将会保存。'
},
tabs: {
left: '关闭左侧',
right: '关闭右侧',
other: '关闭其它',
all: '全部关闭'
}
}
},
'en-US': {
basicLayout: {
search: {
placeholder: 'Search...',
cancel: 'Cancel'
},
user: {
center: 'My home',
setting: 'Setting',
logOut: 'Log out'
},
logout: {
confirmTitle: 'Logout confirmation',
confirmContent: 'Are you sure you are logged out of your current account? Open tabs and personal settings will be saved.'
},
tabs: {
left: 'Close left',
right: 'Close right',
other: 'Close other',
all: 'Close all'
}
}
}
}
layouts/basic-layout/index.vue 0 → 100644
View file @ 75dd27ad
<template>
<Layout class="i-layout">
<Sider v-if="!isMobile && !hideSider" class="i-layout-sider" :class="siderClasses" :width="menuSideWidth">
<i-menu-side :hide-logo="isHeaderStick && headerFix && showHeader" />
</Sider>
<Layout class="i-layout-inside" :class="insideClasses">
<transition name="fade-quick">
<Header class="i-layout-header" :class="headerClasses" :style="headerStyle" v-show="showHeader" v-resize="handleHeaderWidthChange">
<i-header-logo v-if="isMobile && showMobileLogo" />
<i-header-logo v-if="!isMobile && isHeaderStick && headerFix" />
<i-header-collapse v-if="(isMobile || showSiderCollapse) && !hideSider" @on-toggle-drawer="handleToggleDrawer" />
<i-header-reload v-if="!isMobile && showReload" @on-reload="handleReload" />
<i-menu-head v-if="headerMenu && !isMobile" ref="menuHead" />
<i-header-breadcrumb v-if="showBreadcrumb && !headerMenu && !isMobile" ref="breadcrumb" />
<i-header-search v-if="showSearch && !headerMenu && !isMobile && !showBreadcrumb" />
<div class="i-layout-header-right">
<i-header-search v-if="(showSearch && isMobile) || (showSearch && (headerMenu || showBreadcrumb))" />
<i-menu-head v-if="headerMenu && isMobile" />
<i-header-log v-if="isDesktop && showLog" />
<i-header-fullscreen v-if="isDesktop && showFullscreen" />
<i-header-notice v-if="showNotice" />
<i-header-user />
<i-header-i18n v-if="showI18n" />
<i-header-setting v-if="enableSetting && !isMobile" />
</div>
</Header>
</transition>
<Content class="i-layout-content" :class="contentClasses">
<transition name="fade-quick">
<i-tabs v-if="tabs" v-show="showHeader" @on-reload="handleReload" />
</transition>
<div class="i-layout-content-main">
<keep-alive :include="keepAlive">
<router-view v-if="loadRouter" />
</keep-alive>
</div>
</Content>
<i-copyright />
</Layout>
<div v-if="isMobile && !hideSider">
<Drawer v-model="showDrawer" placement="left" :closable="false" :class-name="drawerClasses">
<i-menu-side />
</Drawer>
</div>
</Layout>
</template>
<script>
import iMenuHead from './menu-head';
import iMenuSide from './menu-side';
import iHeaderLogo from './header-logo';
import iHeaderCollapse from './header-collapse';
import iHeaderReload from './header-reload';
import iHeaderBreadcrumb from './header-breadcrumb';
import iHeaderSearch from './header-search';
import iHeaderLog from './header-log';
import iHeaderFullscreen from './header-fullscreen';
import iHeaderNotice from './header-notice';
import iHeaderUser from './header-user';
import iHeaderI18n from './header-i18n';
import iHeaderSetting from './header-setting';
import iTabs from './tabs';
import iCopyright from '@/components/copyright';
import { mapState, mapGetters, mapMutations } from 'vuex';
import Setting from '@/setting';
import { requestAnimation } from '@/libs/util';
export default {
name: 'BasicLayout',
components: { iMenuHead, iMenuSide, iCopyright, iHeaderLogo, iHeaderCollapse, iHeaderReload, iHeaderBreadcrumb, iHeaderSearch, iHeaderUser, iHeaderI18n, iHeaderLog, iHeaderFullscreen, iHeaderSetting, iHeaderNotice, iTabs },
data () {
return {
showDrawer: false,
ticking: false,
headerVisible: true,
oldScrollTop: 0,
isDelayHideSider: false, // hack，当从隐藏侧边栏的 header 切换到正常 header 时，防止 Logo 抖动
loadRouter: true
}
},
computed: {
...mapState('admin/layout', [
'siderTheme',
'headerTheme',
'headerStick',
'tabs',
'tabsFix',
'siderFix',
'headerFix',
'headerHide',
'headerMenu',
'isMobile',
'isTablet',
'isDesktop',
'menuCollapse',
'showMobileLogo',
'showSearch',
'showNotice',
'showFullscreen',
'showSiderCollapse',
'showBreadcrumb',
'showLog',
'showI18n',
'showReload',
'enableSetting'
]),
...mapState('admin/page', [
'keepAlive'
]),
...mapGetters('admin/menu', [
'hideSider'
]),
// 如果开启 headerMenu，且当前 header 的 hideSider 为 true，则将顶部按 headerStick 处理
// 这时，即使没有开启 headerStick，仍然按开启处理
isHeaderStick () {
let state = this.headerStick;
if (this.hideSider) state = true;
return state;
},
showHeader () {
let visible = true;
if (this.headerFix && this.headerHide && !this.headerVisible) visible = false;
return visible;
},
headerClasses () {
return [
`i-layout-header-color-${this.headerTheme}`,
{
'i-layout-header-fix': this.headerFix,
'i-layout-header-fix-collapse': this.headerFix && this.menuCollapse,
'i-layout-header-mobile': this.isMobile,
'i-layout-header-stick': this.isHeaderStick && !this.isMobile,
'i-layout-header-with-menu': this.headerMenu,
'i-layout-header-with-hide-sider': this.hideSider || this.isDelayHideSider
}
];
},
headerStyle () {
const menuWidth = this.isHeaderStick ? 0 : this.menuCollapse ? 80 : Setting.menuSideWidth;
return this.isMobile || !this.headerFix ? {} : {
width: `calc(100% - ${menuWidth}px)`
};
},
siderClasses () {
return {
'i-layout-sider-fix': this.siderFix,
'i-layout-sider-dark': this.siderTheme === 'dark'
};
},
contentClasses () {
return {
'i-layout-content-fix-with-header': this.headerFix,
'i-layout-content-with-tabs': this.tabs,
'i-layout-content-with-tabs-fix': this.tabs && this.tabsFix
};
},
insideClasses () {
return {
'i-layout-inside-fix-with-sider': this.siderFix,
'i-layout-inside-fix-with-sider-collapse': this.siderFix && this.menuCollapse,
'i-layout-inside-with-hide-sider': this.hideSider,
'i-layout-inside-mobile': this.isMobile
};
},
drawerClasses () {
let className = 'i-layout-drawer';
if (this.siderTheme === 'dark') className += ' i-layout-drawer-dark';
return className;
},
menuSideWidth () {
return this.menuCollapse ? 80 : Setting.menuSideWidth;
}
},
watch: {
hideSider () {
this.isDelayHideSider = true;
setTimeout(() => {
this.isDelayHideSider = false;
}, 0);
},
'$route' (to, from) {
if (to.name === from.name) {
// 相同路由，不同参数，跳转时，重载页面
if (Setting.sameRouteForceUpdate) {
this.handleReload();
}
}
}
},
methods: {
...mapMutations('admin/layout', [
'updateMenuCollapse'
]),
...mapMutations('admin/page', [
'keepAlivePush',
'keepAliveRemove'
]),
handleToggleDrawer (state) {
if (typeof state === 'boolean') {
this.showDrawer = state;
} else {
this.showDrawer = !this.showDrawer;
}
},
handleScroll () {
if (!this.headerHide) return;
const scrollTop = document.body.scrollTop + document.documentElement.scrollTop;
if (!this.ticking) {
this.ticking = true;
requestAnimation(() => {
if (this.oldScrollTop > scrollTop) {
this.headerVisible = true;
} else if (scrollTop > 300 && this.headerVisible) {
this.headerVisible = false;
} else if (scrollTop < 300 && !this.headerVisible) {
this.headerVisible = true;
}
this.oldScrollTop = scrollTop;
this.ticking = false;
});
}
},
handleHeaderWidthChange () {
const $breadcrumb = this.$refs.breadcrumb;
if ($breadcrumb) {
$breadcrumb.handleGetWidth();
$breadcrumb.handleCheckWidth();
}
const $menuHead = this.$refs.menuHead;
if ($menuHead) {
// todo $menuHead.handleGetMenuHeight();
}
},
handleReload () {
// 针对缓存的页面也生效
const isCurrentPageCache = this.keepAlive.indexOf(this.$route.name) > -1;
const pageName = this.$route.name;
if (isCurrentPageCache) {
this.keepAliveRemove(pageName);
}
this.loadRouter = false;
this.$nextTick(() => {
this.loadRouter = true;
if (isCurrentPageCache) {
this.keepAlivePush(pageName);
}
});
}
},
mounted () {
document.addEventListener('scroll', this.handleScroll, { passive: true });
},
beforeDestroy () {
document.removeEventListener('scroll', this.handleScroll);
},
created () {
if (this.isTablet && this.showSiderCollapse) this.updateMenuCollapse(true);
}
}
</script>
layouts/basic-layout/menu-head/index.vue 0 → 100644
View file @ 75dd27ad
<template>
<div class="i-layout-menu-head" :class="{ 'i-layout-menu-head-mobile': isMobile }">
<Menu mode="horizontal" :active-name="headerName" v-if="!isMobile && !isMenuLimit" ref="menu">
<MenuItem v-for="item in filterHeader" :to="item.path" :replace="item.replace" :target="item.target" :name="item.name" :key="item.path" @click.native="handleClick(item.path, 'header')">
<i-menu-head-title :item="item" />
</MenuItem>
</Menu>
<div class="i-layout-header-trigger i-layout-header-trigger-min i-layout-header-trigger-in i-layout-header-trigger-no-height" v-else>
<Dropdown trigger="click" :class="{ 'i-layout-menu-head-mobile-drop': isMobile }">
<Icon type="ios-apps" />
<DropdownMenu slot="list">
<i-link v-for="item in filterHeader" :to="item.path" :replace="item.replace" :target="item.target" :key="item.path" @click.native="handleClick(item.path, 'header')">
<DropdownItem>
<i-menu-head-title :item="item" />
</DropdownItem>
</i-link>
</DropdownMenu>
</Dropdown>
</div>
</div>
</template>
<script>
import iMenuHeadTitle from './title';
import { mapState, mapGetters } from 'vuex';
import { getStyle } from 'view-design/src/utils/assist';
import clickItem from '../mixins/click-item';
// import { on, off } from 'view-design/src/utils/dom';
// import { throttle } from 'lodash';
export default {
name: 'iMenuHead',
components: { iMenuHeadTitle },
mixins: [ clickItem ],
computed: {
...mapState('admin/layout', [
'isMobile'
]),
...mapState('admin/menu', [
'headerName'
]),
...mapGetters('admin/menu', [
'filterHeader'
])
},
data () {
return {
handleResize: () => {},
isMenuLimit: false,
menuMaxWidth: 0 // 达到这个值后，menu 就显示不下了
}
},
methods: {
handleGetMenuHeight () {
const menuWidth = parseInt(getStyle(this.$el, 'width'));
const $menu = this.$refs.menu;
if ($menu) {
const menuHeight = parseInt(getStyle(this.$refs.menu.$el, 'height'));
if (menuHeight > 64) {
if (!this.isMenuLimit) {
this.menuMaxWidth = menuWidth;
}
this.isMenuLimit = true;
}
} else if (menuWidth >= this.menuMaxWidth) {
this.isMenuLimit = false;
}
}
},
watch: {
filterHeader () {
this.handleGetMenuHeight();
},
isMobile () {
this.handleGetMenuHeight();
}
},
mounted () {
// this.handleResize = throttle(this.handleGetMenuHeight, 100, { leading: false });
// on(window, 'resize', this.handleResize);
this.handleGetMenuHeight();
},
beforeDestroy () {
// off(window, 'resize', this.handleResize);
}
}
</script>
layouts/basic-layout/menu-head/title.vue 0 → 100644
View file @ 75dd27ad
<template>
<div class="i-layout-menu-head-title">
<span class="i-layout-menu-head-title-icon" v-if="(item.icon || item.custom || item.img) && !hideIcon">
<Icon :type="item.icon" v-if="item.icon" />
<Icon :custom="item.custom" v-else-if="item.custom" />
<img :src="item.img" v-else-if="item.img" />
</span>
<span class="i-layout-menu-head-title-text">{{ tTitle(item.title) }}</span>
</div>
</template>
<script>
/**
* 该组件除了 Menu，也被 Breadcrumb 使用过
* */
import tTitle from '../mixins/translate-title';
export default {
name: 'iMenuHeadTitle',
mixins: [ tTitle ],
props: {
item: {
type: Object,
default () {
return {}
}
},
hideIcon: {
type: Boolean,
default: false
}
}
}
</script>
layouts/basic-layout/menu-side/index.vue 0 → 100644
View file @ 75dd27ad
<template>
<div>
<div class="i-layout-sider-logo" :class="{ 'i-layout-sider-logo-dark': siderTheme === 'dark' }">
<transition name="fade-quick">
<i-link to="/" v-show="!hideLogo">
<img src="@/assets/images/logo-small.png" v-if="menuCollapse">
<img src="@/assets/images/logo.png" v-else-if="siderTheme === 'light'">
<img src="@/assets/images/logo-dark.png" v-else>
</i-link>
</transition>
</div>
<Menu
ref="menu"
class="i-layout-menu-side i-scrollbar-hide"
:theme="siderTheme"
:accordion="menuAccordion"
:active-name="activePath"
:open-names="openNames"
width="auto">
<template v-if="!menuCollapse" v-for="(item, index) in filterSider">
<i-menu-side-item v-if="item.children === undefined || !item.children.length" :menu="item" :key="index" />
<i-menu-side-submenu v-else :menu="item" :key="index" />
</template>
<template v-else>
<Tooltip :content="tTitle(item.title)" placement="right" v-if="item.children === undefined || !item.children.length" :key="index">
<i-menu-side-item :menu="item" hide-title />
</Tooltip>
<i-menu-side-collapse v-else :menu="item" :key="index" top-level />
</template>
</Menu>
</div>
</template>
<script>
import iMenuSideItem from './menu-item';
import iMenuSideSubmenu from './submenu';
import iMenuSideCollapse from './menu-collapse';
import tTitle from '../mixins/translate-title';
import { mapState, mapGetters } from 'vuex';
export default {
name: 'iMenuSide',
mixins: [ tTitle ],
components: { iMenuSideItem, iMenuSideSubmenu, iMenuSideCollapse },
props: {
hideLogo: {
type: Boolean,
default: false
}
},
computed: {
...mapState('admin/layout', [
'siderTheme',
'menuAccordion',
'menuCollapse'
]),
...mapState('admin/menu', [
'activePath',
'openNames'
]),
...mapGetters('admin/menu', [
'filterSider'
])
},
watch: {
'$route': {
handler () {
this.handleUpdateMenuState();
},
immediate: true
},
// 在展开/收起侧边菜单栏时，更新一次 menu 的状态
menuCollapse () {
this.handleUpdateMenuState();
}
},
methods: {
handleUpdateMenuState () {
this.$nextTick(() => {
if (this.$refs.menu) {
this.$refs.menu.updateActiveName();
if (this.menuAccordion) this.$refs.menu.updateOpened();
}
});
}
}
}
</script>
layouts/basic-layout/menu-side/menu-collapse.vue 0 → 100644
View file @ 75dd27ad
<template>
<Dropdown placement="right-start" :class="dropdownClasses">
<li :class="menuItemClasses" v-if="topLevel">
<i-menu-side-title :menu="menu" hide-title />
</li>
<DropdownItem v-else>
<i-menu-side-title :menu="menu" :selected="openNames.indexOf(menu.path) >= 0" />
<Icon type="ios-arrow-forward" class="i-layout-menu-side-arrow" />
</DropdownItem>
<DropdownMenu slot="list">
<div class="i-layout-menu-side-collapse-title" v-if="showCollapseMenuTitle">
<i-menu-side-title :menu="menu" />
</div>
<template v-for="(item, index) in menu.children">
<i-link :to="item.path" :target="item.target" v-if="item.children === undefined || !item.children.length" :key="index" @click.native="handleClick(item.path)">
<DropdownItem :divided="item.divided" :class="{ 'i-layout-menu-side-collapse-item-selected': item.path === activePath }">
<i-menu-side-title :menu="item" />
</DropdownItem>
</i-link>
<i-menu-side-collapse v-else :menu="item" :key="index" />
</template>
</DropdownMenu>
</Dropdown>
</template>
<script>
import iMenuSideTitle from './menu-title';
import clickItem from '../mixins/click-item';
import { mapState } from 'vuex';
export default {
name: 'iMenuSideCollapse',
components: { iMenuSideTitle },
mixins: [ clickItem ],
props: {
menu: {
type: Object,
default () {
return {}
}
},
// 是否是第一级，区分在于左侧和展开侧
topLevel: {
type: Boolean,
default: false
}
},
computed: {
...mapState('admin/layout', [
'siderTheme',
'showCollapseMenuTitle'
]),
...mapState('admin/menu', [
'activePath',
'openNames'
]),
dropdownClasses () {
return {
'i-layout-menu-side-collapse-top': this.topLevel,
'i-layout-menu-side-collapse-dark': this.siderTheme === 'dark'
}
},
menuItemClasses () {
return [
'ivu-menu-item i-layout-menu-side-collapse-top-item',
{
'ivu-menu-item-selected ivu-menu-item-active': this.openNames.indexOf(this.menu.path) >= 0 // -active 在高亮时，有背景
}
]
}
}
}
</script>
layouts/basic-layout/menu-side/menu-item.vue 0 → 100644
View file @ 75dd27ad
<template>
<div>
<MenuItem :to="menu.path" :replace="menu.replace" :target="menu.target" :name="menu.path" @click.native="handleClick(menu.path)">
<i-menu-side-title :menu="menu" :hide-title="hideTitle" />
</MenuItem>
</div>
</template>
<script>
import iMenuSideTitle from './menu-title';
import clickItem from '../mixins/click-item';
export default {
name: 'iMenuSideItem',
components: { iMenuSideTitle },
mixins: [ clickItem ],
props: {
menu: {
type: Object,
default () {
return {}
}
},
hideTitle: {
type: Boolean,
default: false
}
}
}
</script>
layouts/basic-layout/menu-side/menu-title.vue 0 → 100644
View file @ 75dd27ad
<template>
<span class="i-layout-menu-side-title">
<span class="i-layout-menu-side-title-icon" :class="{ 'i-layout-menu-side-title-icon-single': hideTitle }" v-if="menu.icon || menu.custom || menu.img">
<Icon :type="menu.icon" v-if="menu.icon" />
<Icon :custom="menu.custom" v-else-if="menu.custom" />
<img :src="menu.img" v-else-if="menu.img" />
</span>
<span class="i-layout-menu-side-title-text" :class="{ 'i-layout-menu-side-title-text-selected': selected }" v-if="!hideTitle">{{ tTitle(menu.title) }}</span>
</span>
</template>
<script>
import tTitle from '../mixins/translate-title';
export default {
name: 'iMenuSideTitle',
mixins: [ tTitle ],
props: {
menu: {
type: Object,
default () {
return {}
}
},
hideTitle: {
type: Boolean,
default: false
},
// 用于侧边栏收起 Dropdown 当前高亮
selected: {
type: Boolean,
default: false
}
}
}
</script>
layouts/basic-layout/menu-side/submenu.vue 0 → 100644
View file @ 75dd27ad
<template>
<Submenu :name="menu.path">
<template slot="title">
<i-menu-side-title :menu="menu" />
</template>
<template v-for="(item, index) in menu.children">
<i-menu-side-item v-if="item.children === undefined || !item.children.length" :menu="item" :key="index" />
<i-menu-side-submenu v-else :menu="item" :key="index" />
</template>
</Submenu>
</template>
<script>
import iMenuSideItem from './menu-item';
import iMenuSideTitle from './menu-title';
export default {
name: 'iMenuSideSubmenu',
components: { iMenuSideItem, iMenuSideTitle },
props: {
menu: {
type: Object,
default () {
return {}
}
}
}
}
</script>
layouts/basic-layout/mixins/click-item.js 0 → 100644
View file @ 75dd27ad
import { findComponentUpward } from 'view-design/src/utils/assist';
import { mapState } from 'vuex';
export default {
computed: {
...mapState('admin/layout', [
'menuSiderReload',
'menuHeaderReload'
])
},
methods: {
handleClick (path, type = 'sider') {
const current = this.$route.path;
if (current === path) {
if (type === 'sider' && this.menuSiderReload) this.handleReload();
else if (type === 'header' && this.menuHeaderReload) this.handleReload();
}
},
handleReload () {
const $layout = findComponentUpward(this, 'BasicLayout');
if ($layout) $layout.handleReload();
}
}
}
layouts/basic-layout/mixins/translate-title.js 0 → 100644
View file @ 75dd27ad
export default {
methods: {
tTitle (title) {
if (title && title.indexOf('$t:') === 0) {
return this.$t(title.split('$t:')[1]);
} else {
return title;
}
}
}
}
layouts/basic-layout/tabs/index.vue 0 → 100644
View file @ 75dd27ad
<template>
<div class="i-layout-tabs" :class="classes" :style="styles">
<div class="i-layout-tabs-main">
<Tabs
type="card"
:value="current"
:animated="false"
closable
@on-click="handleClickTab"
@on-tab-remove="handleClickClose"
>
<TabPane
v-for="page in opened"
:key="page.fullPath"
:label="(h) => tabLabel(h, page)"
:name="page.fullPath"
:closable="page.meta && page.meta.closable"
/>
</Tabs>
<Dropdown class="i-layout-tabs-close" @on-click="handleClose">
<div class="i-layout-tabs-close-main">
<Icon type="ios-arrow-down" />
</div>
<DropdownMenu slot="list">
<DropdownItem name="left">
<Icon type="md-arrow-back" />
{{ $t('basicLayout.tabs.left') }}
</DropdownItem>
<DropdownItem name="right">
<Icon type="md-arrow-forward" />
{{ $t('basicLayout.tabs.right') }}
</DropdownItem>
<DropdownItem name="other">
<Icon type="md-close" />
{{ $t('basicLayout.tabs.other') }}
</DropdownItem>
<DropdownItem name="all">
<Icon type="md-close-circle" />
{{ $t('basicLayout.tabs.all') }}
</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
</div>
</template>
<script>
import { mapState, mapGetters, mapActions } from 'vuex';
import menuSider from '@/menu/sider';
import tTitle from '../mixins/translate-title';
import Setting from '@/setting';
import { getAllSiderMenu } from '@/libs/system';
export default {
name: 'iTabs',
mixins: [ tTitle ],
computed: {
...mapState('admin/page', [
'opened',
'current'
]),
...mapState('admin/layout', [
'showTabsIcon',
'tabsFix',
'tabsReload',
'headerFix',
'headerStick',
'isMobile',
'menuCollapse'
]),
...mapGetters('admin/menu', [
'hideSider'
]),
classes () {
return {
'i-layout-tabs-fix': this.tabsFix
}
},
isHeaderStick () {
return this.hideSider;
},
styles () {
let style = {};
if (this.tabsFix && !this.headerFix) {
style.top = `${64 - this.scrollTop}px`;
}
const menuWidth = this.isHeaderStick ? 0 : this.menuCollapse ? 80 : Setting.menuSideWidth;
if (!this.isMobile && this.tabsFix) {
style.width = `calc(100% - ${menuWidth}px)`;
style.left = `${menuWidth}px`;
}
return style;
}
},
data () {
return {
// 得到所有侧边菜单，并转为平级，查询图标用
allSiderMenu: getAllSiderMenu(menuSider),
scrollTop: 0
}
},
methods: {
...mapActions('admin/page', [
'close',
'closeLeft',
'closeRight',
'closeOther',
'closeAll'
]),
tabLabel (h, page) {
const title = h('span', this.tTitle(page.meta.title) || '未命名');
let slot = [];
if (this.showTabsIcon) {
const fullPathWithoutQuery = page.fullPath.indexOf('?') >= 0 ? page.fullPath.split('?')[0] : page.fullPath;
const currentMenu = this.allSiderMenu.find(menu => menu.path === fullPathWithoutQuery) || {};
let icon;
if (currentMenu.icon) {
icon = h('Icon', {
props: {
type: currentMenu.icon
}
});
} else if (currentMenu.custom) {
icon = h('Icon', {
props: {
custom: currentMenu.custom
}
});
} else if (currentMenu.img) {
icon = h('img', {
attrs: {
src: currentMenu.img
}
});
}
if (icon) slot.push(icon);
slot.push(title);
} else {
slot.push(title);
}
return h('div', {
class: 'i-layout-tabs-title'
}, slot);
},
handleClickTab (tabName) {
if (tabName === this.current) {
if (this.tabsReload) {
this.$emit('on-reload');
}
} else {
const page = this.opened.find(page => page.fullPath === tabName);
const { name, params, query } = page;
if (page) this.$router.push({ name, params, query }, () => {});
}
},
handleClickClose (tagName) {
this.close({
tagName
});
},
handleScroll () {
if (this.tabsFix && !this.headerFix) {
const scrollTop = document.body.scrollTop + document.documentElement.scrollTop;
this.scrollTop = scrollTop > 64 ? 64 : scrollTop;
}
},
handleClose (name) {
const params = {
pageSelect: this.current
};
switch (name) {
case 'left':
this.closeLeft(params);
break;
case 'right':
this.closeRight(params);
break;
case 'other':
this.closeOther(params);
break;
case 'all':
this.closeAll();
break;
}
}
},
mounted () {
document.addEventListener('scroll', this.handleScroll, { passive: true });
this.handleScroll();
},
beforeDestroy () {
document.removeEventListener('scroll', this.handleScroll);
}
}
</script>
libs/iview-pro/iview-pro.css 0 → 100644
View file @ 75dd27ad
.ivu-block{display:block}.ivu-inline{display:inline}.ivu-inline-block{display:inline-block}.ivu-text-center{text-align:center}.ivu-text-left{text-align:left}.ivu-text-right{text-align:right}.ivu-fl{float:left}.ivu-fr{float:right}.ivu-clearfix:after,.ivu-clearfix:before{display:table;content:""}.ivu-clearfix:after{clear:both}.ivu-line-clamp{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.ivu-b{border:1px solid #e8eaec}.ivu-bt{border-top:1px solid #e8eaec}.ivu-br{border-right:1px solid #e8eaec}.ivu-bb{border-bottom:1px solid #e8eaec}.ivu-bl{border-left:1px solid #e8eaec}.ivu-m-0{margin:0!important}.ivu-mt-0{margin-top:0!important}.ivu-mr-0{margin-right:0!important}.ivu-mb-0{margin-bottom:0!important}.ivu-ml-0{margin-left:0!important}.ivu-m-8{margin:8px!important}.ivu-mt-8{margin-top:8px!important}.ivu-mr-8{margin-right:8px!important}.ivu-mb-8{margin-bottom:8px!important}.ivu-ml-8{margin-left:8px!important}.ivu-p-0{padding:0!important}.ivu-pt-0{padding-top:0!important}.ivu-pr-0{padding-right:0!important}.ivu-pb-0{padding-bottom:0!important}.ivu-pl-0{padding-left:0!important}.ivu-p-8{padding:8px!important}.ivu-pt-8{padding-top:8px!important}.ivu-pr-8{padding-right:8px!important}.ivu-pb-8{padding-bottom:8px!important}.ivu-pl-8{padding-left:8px!important}.ivu-m,.ivu-m-16{margin:16px!important}.ivu-mt,.ivu-mt-16{margin-top:16px!important}.ivu-mr,.ivu-mr-16{margin-right:16px!important}.ivu-mb,.ivu-mb-16{margin-bottom:16px!important}.ivu-ml,.ivu-ml-16{margin-left:16px!important}.ivu-p,.ivu-p-16{padding:16px!important}.ivu-pt,.ivu-pt-16{padding-top:16px!important}.ivu-pr,.ivu-pr-16{padding-right:16px!important}.ivu-pb,.ivu-pb-16{padding-bottom:16px!important}.ivu-pl,.ivu-pl-16{padding-left:16px!important}.ivu-anim-fade-appear,.ivu-anim-fade-enter-active{-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-play-state:paused;animation-play-state:paused}.ivu-anim-fade-leave-active{-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-play-state:paused;animation-play-state:paused}.ivu-anim-fade-appear,.ivu-anim-fade-enter-active{-webkit-animation-name:ivuFadeIn;animation-name:ivuFadeIn;-webkit-animation-play-state:running;animation-play-state:running}.ivu-anim-fade-leave-active{-webkit-animation-name:ivuFadeOut;animation-name:ivuFadeOut;-webkit-animation-play-state:running;animation-play-state:running}.ivu-anim-fade-appear,.ivu-anim-fade-enter-active{opacity:0;-webkit-animation-timing-function:linear;animation-timing-function:linear}.ivu-anim-fade-leave-active{-webkit-animation-timing-function:linear;animation-timing-function:linear}.ivu-anim-move-up-appear,.ivu-anim-move-up-enter-active{-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-play-state:paused;animation-play-state:paused}.ivu-anim-move-up-leave-active{-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-play-state:paused;animation-play-state:paused}.ivu-anim-move-up-appear,.ivu-anim-move-up-enter-active{-webkit-animation-name:ivuMoveUpIn;animation-name:ivuMoveUpIn;-webkit-animation-play-state:running;animation-play-state:running}.ivu-anim-move-up-leave-active{-webkit-animation-name:ivuMoveUpOut;animation-name:ivuMoveUpOut;-webkit-animation-play-state:running;animation-play-state:running}.ivu-anim-move-up-appear,.ivu-anim-move-up-enter-active{opacity:0;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}.ivu-anim-move-up-leave-active{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}.ivu-anim-move-down-appear,.ivu-anim-move-down-enter-active{-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-play-state:paused;animation-play-state:paused}.ivu-anim-move-down-leave-active{-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-play-state:paused;animation-play-state:paused}.ivu-anim-move-down-appear,.ivu-anim-move-down-enter-active{-webkit-animation-name:ivuMoveDownIn;animation-name:ivuMoveDownIn;-webkit-animation-play-state:running;animation-play-state:running}.ivu-anim-move-down-leave-active{-webkit-animation-name:ivuMoveDownOut;animation-name:ivuMoveDownOut;-webkit-animation-play-state:running;animation-play-state:running}.ivu-anim-move-down-appear,.ivu-anim-move-down-enter-active{opacity:0;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}.ivu-anim-move-down-leave-active{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}.ivu-anim-move-left-appear,.ivu-anim-move-left-enter-active{-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-play-state:paused;animation-play-state:paused}.ivu-anim-move-left-leave-active{-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-play-state:paused;animation-play-state:paused}.ivu-anim-move-left-appear,.ivu-anim-move-left-enter-active{-webkit-animation-name:ivuMoveLeftIn;animation-name:ivuMoveLeftIn;-webkit-animation-play-state:running;animation-play-state:running}.ivu-anim-move-left-leave-active{-webkit-animation-name:ivuMoveLeftOut;animation-name:ivuMoveLeftOut;-webkit-animation-play-state:running;animation-play-state:running}.ivu-anim-move-left-appear,.ivu-anim-move-left-enter-active{opacity:0;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}.ivu-anim-move-left-leave-active{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}.ivu-anim-move-right-appear,.ivu-anim-move-right-enter-active{-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-play-state:paused;animation-play-state:paused}.ivu-anim-move-right-leave-active{-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-play-state:paused;animation-play-state:paused}.ivu-anim-move-right-appear,.ivu-anim-move-right-enter-active{-webkit-animation-name:ivuMoveRightIn;animation-name:ivuMoveRightIn;-webkit-animation-play-state:running;animation-play-state:running}.ivu-anim-move-right-leave-active{-webkit-animation-name:ivuMoveRightOut;animation-name:ivuMoveRightOut;-webkit-animation-play-state:running;animation-play-state:running}.ivu-anim-move-right-appear,.ivu-anim-move-right-enter-active{opacity:0;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}.ivu-anim-move-right-leave-active{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}.ivu-anim-ease-appear,.ivu-anim-ease-enter-active{-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-play-state:paused;animation-play-state:paused}.ivu-anim-ease-leave-active{-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-play-state:paused;animation-play-state:paused}.ivu-anim-ease-appear,.ivu-anim-ease-enter-active{-webkit-animation-name:ivuEaseIn;animation-name:ivuEaseIn;-webkit-animation-play-state:running;animation-play-state:running}.ivu-anim-ease-leave-active{-webkit-animation-name:ivuEaseOut;animation-name:ivuEaseOut;-webkit-animation-play-state:running;animation-play-state:running}.ivu-anim-ease-appear,.ivu-anim-ease-enter-active{opacity:0;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-duration:.2s;animation-duration:.2s}.ivu-anim-ease-leave-active{-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-duration:.2s;animation-duration:.2s}.ivu-anim-transition-drop-appear,.ivu-anim-transition-drop-enter-active{-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-play-state:paused;animation-play-state:paused}.ivu-anim-transition-drop-leave-active{-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-play-state:paused;animation-play-state:paused}.ivu-anim-transition-drop-appear,.ivu-anim-transition-drop-enter-active{-webkit-animation-name:ivuTransitionDropIn;animation-name:ivuTransitionDropIn;-webkit-animation-play-state:running;animation-play-state:running}.ivu-anim-transition-drop-leave-active{-webkit-animation-name:ivuTransitionDropOut;animation-name:ivuTransitionDropOut;-webkit-animation-play-state:running;animation-play-state:running}.ivu-anim-transition-drop-appear,.ivu-anim-transition-drop-enter-active{opacity:0;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}.ivu-anim-transition-drop-leave-active{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}.ivu-anim-slide-up-appear,.ivu-anim-slide-up-enter-active{-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-play-state:paused;animation-play-state:paused}.ivu-anim-slide-up-leave-active{-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-play-state:paused;animation-play-state:paused}.ivu-anim-slide-up-appear,.ivu-anim-slide-up-enter-active{-webkit-animation-name:ivuSlideUpIn;animation-name:ivuSlideUpIn;-webkit-animation-play-state:running;animation-play-state:running}.ivu-anim-slide-up-leave-active{-webkit-animation-name:ivuSlideUpOut;animation-name:ivuSlideUpOut;-webkit-animation-play-state:running;animation-play-state:running}.ivu-anim-slide-up-appear,.ivu-anim-slide-up-enter-active{opacity:0;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}.ivu-anim-slide-up-leave-active{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}.ivu-anim-slide-down-appear,.ivu-anim-slide-down-enter-active{-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-play-state:paused;animation-play-state:paused}.ivu-anim-slide-down-leave-active{-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-play-state:paused;animation-play-state:paused}.ivu-anim-slide-down-appear,.ivu-anim-slide-down-enter-active{-webkit-animation-name:ivuSlideDownIn;animation-name:ivuSlideDownIn;-webkit-animation-play-state:running;animation-play-state:running}.ivu-anim-slide-down-leave-active{-webkit-animation-name:ivuSlideDownOut;animation-name:ivuSlideDownOut;-webkit-animation-play-state:running;animation-play-state:running}.ivu-anim-slide-down-appear,.ivu-anim-slide-down-enter-active{opacity:0;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}.ivu-anim-slide-down-leave-active{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}.ivu-anim-slide-left-appear,.ivu-anim-slide-left-enter-active{-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-play-state:paused;animation-play-state:paused}.ivu-anim-slide-left-leave-active{-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-play-state:paused;animation-play-state:paused}.ivu-anim-slide-left-appear,.ivu-anim-slide-left-enter-active{-webkit-animation-name:ivuSlideLeftIn;animation-name:ivuSlideLeftIn;-webkit-animation-play-state:running;animation-play-state:running}.ivu-anim-slide-left-leave-active{-webkit-animation-name:ivuSlideLeftOut;animation-name:ivuSlideLeftOut;-webkit-animation-play-state:running;animation-play-state:running}.ivu-anim-slide-left-appear,.ivu-anim-slide-left-enter-active{opacity:0;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}.ivu-anim-slide-left-leave-active{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}.ivu-anim-slide-right-appear,.ivu-anim-slide-right-enter-active{-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-play-state:paused;animation-play-state:paused}.ivu-anim-slide-right-leave-active{-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-play-state:paused;animation-play-state:paused}.ivu-anim-slide-right-appear,.ivu-anim-slide-right-enter-active{-webkit-animation-name:ivuSlideRightIn;animation-name:ivuSlideRightIn;-webkit-animation-play-state:running;animation-play-state:running}.ivu-anim-slide-right-leave-active{-webkit-animation-name:ivuSlideRightOut;animation-name:ivuSlideRightOut;-webkit-animation-play-state:running;animation-play-state:running}.ivu-anim-slide-right-appear,.ivu-anim-slide-right-enter-active{opacity:0;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}.ivu-anim-slide-right-leave-active{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}.ivu-anim-loop{-webkit-animation:ani-load-loop 1s linear infinite;animation:ani-load-loop 1s linear infinite}.ivu-auth-prevent{display:inline-block;cursor:pointer}.ivu-auth-prevent-no-match{pointer-events:none}.ivu-avatar-list{display:inline-block}.ivu-avatar-list-item{display:inline-block;margin-left:-8px;cursor:pointer}.ivu-avatar-list-item:first-child{margin-left:0}.ivu-avatar-list-item .ivu-avatar{border:1px solid #fff}.ivu-avatar-list-item-excess{cursor:auto}.ivu-avatar-list-large .ivu-avatar-list-item{margin-left:-16px}.ivu-avatar-list-large .ivu-avatar-list-item:first-child{margin-left:0}.ivu-avatar-list-large .ivu-avatar-list-item-excess{font-size:16px}.ivu-avatar-list-default .ivu-avatar-list-item{margin-left:-12px}.ivu-avatar-list-default .ivu-avatar-list-item:first-child{margin-left:0}.ivu-calendar-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:12px;border-bottom:1px solid #e8eaec}.ivu-calendar-header-title{color:#17233d;font-size:18px}.ivu-calendar-table{table-layout:fixed;width:100%}.ivu-calendar-table thead th{padding:24px 0 6px 6px;text-align:left;font-size:14px}.ivu-calendar-table td{font-size:14px;border-bottom:1px solid #e8eaec;border-right:1px solid #e8eaec;vertical-align:top}.ivu-calendar-table tr:first-child td{border-top:1px solid #e8eaec}.ivu-calendar-table tr td:first-child{border-left:1px solid #e8eaec}.ivu-calendar-table-day{-webkit-box-sizing:border-box;box-sizing:border-box;height:100px;padding:6px;-webkit-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out;cursor:pointer}.ivu-calendar-table-day:hover{background-color:#f0faff}.ivu-calendar-table-day-other .ivu-calendar-table-day-title{color:#c5c8ce}.ivu-calendar-table-day-current{background-color:#f0faff}.ivu-calendar-table-day-current .ivu-calendar-table-day-title{color:#2d8cf0}.ivu-calendar-table-year{padding-top:24px}.ivu-city{display:inline-block;width:100%;position:relative}.ivu-city .ivu-dropdown{width:100%}.ivu-city-rel{display:inline-block;width:100%;position:relative;cursor:pointer}.ivu-city-arrow{-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.ivu-city-visible .ivu-city-arrow:nth-of-type(2){-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.ivu-city .ivu-select-dropdown{width:400px}.ivu-city-drop{width:400px;padding:2px 8px}.ivu-city-drop-cities{margin-bottom:8px}.ivu-city-drop-cities span{display:inline-block;margin-right:4px;cursor:pointer}.ivu-city-drop-cities span:hover{color:#57a3f3}.ivu-city-drop-menu{margin-bottom:8px}.ivu-city-drop-type{display:inline-block}.ivu-city-drop-search{display:inline-block;margin-left:8px}.ivu-city-drop-list-letter{margin-bottom:8px}.ivu-city-drop-list-letter .ivu-tag{cursor:pointer}.ivu-city-drop-list-letter .ivu-tag:hover .ivu-tag-text{color:#57a3f3}.ivu-city-drop-list-main{max-height:200px;overflow:auto}.ivu-city-drop-list-main dt{float:left;font-weight:700}.ivu-city-drop-list-main dd{white-space:normal;-webkit-margin-start:40px;margin-inline-start:40px;margin-bottom:8px}.ivu-city-drop-list-main dd li{display:inline-block;margin-right:9px;cursor:pointer}.ivu-city-drop-list-main dd li:hover{color:#57a3f3}.ivu-city-drop-list-main-city dd{-webkit-margin-start:24px;margin-inline-start:24px}.ivu-city-transfer.ivu-select-dropdown{max-height:none;overflow:visible}.ivu-description-list-title{margin-bottom:16px;color:#17233d;font-weight:500;font-size:14px}.ivu-description-term{display:table-cell;padding-bottom:16px;color:#17233d;line-height:20px;white-space:nowrap}.ivu-description-detail{display:table-cell;width:100%;padding-bottom:16px;color:#515a6e;line-height:20px}.ivu-description-list-vertical .ivu-description-term{display:block;padding-bottom:8px}.ivu-description-list-vertical .ivu-description-detail{display:block}.ivu-ellipsis-hidden{visibility:hidden}.ivu-exception{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:80%;min-height:500px}.ivu-exception-img{-webkit-box-flex:0;-ms-flex:0 0 62.5%;flex:0 0 62.5%;width:62.5%;padding-right:152px;zoom:1}.ivu-exception-img::after,.ivu-exception-img::before{content:' ';display:table}.ivu-exception-img::after{clear:both;height:0;font-size:0;visibility:hidden}.ivu-exception-img-element{float:right;width:100%;max-width:430px;height:360px;background-repeat:no-repeat;background-position:50% 50%;background-size:contain}.ivu-exception-content{-webkit-box-flex:1;-ms-flex:auto;flex:auto}.ivu-exception-content h1{margin-bottom:24px;color:#515a6e;font-weight:600;font-size:72px;line-height:72px}.ivu-exception-content-desc{margin-bottom:16px;color:#808695;font-size:20px;line-height:28px}.ivu-exception-content-actions button:not(:last-child){margin-right:8px}@media screen and (max-width:768px){.ivu-exception-img{padding-right:88px}}@media screen and (max-width:576px){.ivu-exception{display:block;text-align:center}.ivu-exception-img{margin:0 auto 24px;padding-right:0}}@media screen and (max-width:480px){.ivu-exception-img{margin-bottom:-24px;overflow:hidden}}.ivu-footer-toolbar{position:fixed;right:0;bottom:0;z-index:9;width:100%;height:56px;padding:0 24px;line-height:56px;background:#fff;border-top:1px solid #e8eaec;-webkit-box-shadow:0 -1px 2px rgba(0,0,0,.03);box-shadow:0 -1px 2px rgba(0,0,0,.03)}.ivu-footer-toolbar::after{display:block;clear:both;content:''}.ivu-footer-toolbar-left{float:left}.ivu-footer-toolbar-right{float:right}.ivu-footer-toolbar button+button{margin-left:8px}.ivu-global-footer{margin:48px 0 24px 0;padding:0 16px;text-align:center}.ivu-global-footer-links{margin-bottom:8px}.ivu-global-footer-links a{font-size:14px;color:#808695;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.ivu-global-footer-links a:not(:last-child){margin-right:40px}.ivu-global-footer-links a:hover{color:#515a6e}.ivu-global-footer-copyright{color:#808695;font-size:14px}.ivu-grid:after{content:'';display:block;clear:both}.ivu-grid-item{position:relative;float:left;width:33.33%;-webkit-box-sizing:border-box;box-sizing:border-box;border:0;border-radius:0;-webkit-transition:-webkit-box-shadow .2s ease-in-out;transition:-webkit-box-shadow .2s ease-in-out;transition:box-shadow .2s ease-in-out;transition:box-shadow .2s ease-in-out,-webkit-box-shadow .2s ease-in-out}.ivu-grid-item-main{padding:24px}.ivu-grid-border .ivu-grid-item{-webkit-box-shadow:1px 0 0 0 #e8eaec,0 1px 0 0 #e8eaec,1px 1px 0 0 #e8eaec,1px 0 0 0 #e8eaec inset,0 1px 0 0 #e8eaec inset;box-shadow:1px 0 0 0 #e8eaec,0 1px 0 0 #e8eaec,1px 1px 0 0 #e8eaec,1px 0 0 0 #e8eaec inset,0 1px 0 0 #e8eaec inset}.ivu-grid-hover .ivu-grid-item:hover{z-index:1;-webkit-box-shadow:0 1px 6px rgba(0,0,0,.2);box-shadow:0 1px 6px rgba(0,0,0,.2)}.ivu-grid-center .ivu-grid-item-main{width:100%;position:absolute;top:50%;-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);text-align:center}.ivu-notifications{display:inline-block}.ivu-notifications-rel{display:inline-block;cursor:pointer}.ivu-notifications-list{width:300px;line-height:normal}.ivu-notifications-list-wide{width:auto}.ivu-notifications .ivu-tabs-nav-scroll{text-align:center}.ivu-notifications .ivu-tabs-nav{display:inline-block;float:none}.ivu-notifications-tabs .ivu-badge{margin-left:3px}.ivu-notifications-tabs .ivu-badge-count{background:#e6ebf1;color:#808695;min-width:16px;height:16px;line-height:14px;border-radius:8px;padding:0 4px}.ivu-notifications-tabs .ivu-tabs-tab:last-child{margin-right:0}.ivu-notifications-tabs .ivu-tabs-bar{margin-bottom:0}.ivu-notifications-extra{border-top:1px solid #e8eaec}.ivu-notifications-tab-empty{text-align:center;padding:64px 0}.ivu-notifications-tab-empty-img{display:inline-block;height:64px}.ivu-notifications-tab-empty-text{color:#808695}.ivu-notifications-tab-clear{border-top:1px solid #e8eaec;text-align:center;font-size:14px;cursor:pointer;padding:6px 0;color:#515a6e;-webkit-transition:color .2s ease-in-out;transition:color .2s ease-in-out}.ivu-notifications-tab-clear:hover{color:#57a3f3}.ivu-notifications-tab-loading-item{border-top:1px solid #e8eaec;text-align:center;font-size:14px;padding:6px 0;color:#515a6e;-webkit-transition:color .2s ease-in-out;transition:color .2s ease-in-out}.ivu-notifications-tab-loading-all,.ivu-notifications-tab-loading-show{color:#c5c8ce}.ivu-notifications-tab-loading-more{cursor:pointer;color:#2d8cf0}.ivu-notifications-tab-loading-more:hover{color:#57a3f3}.ivu-notifications-container{max-height:400px;overflow:auto}.ivu-notifications-item{padding:12px 24px;border-bottom:1px solid #e8eaec;cursor:pointer;-webkit-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out;text-align:left}.ivu-notifications-item:last-child{border-bottom:none}.ivu-notifications-item:hover{background-color:#f0faff}.ivu-notifications-item-unread{background-color:#f8f8f9}.ivu-notifications-item-title{margin-bottom:4px}.ivu-notifications-item-title h4{font-size:14px;font-weight:400;line-height:22px;color:#515a6e}.ivu-notifications-item-tag{float:right;margin-top:-2px}.ivu-notifications-item-tag .ivu-tag{margin-right:0}.ivu-notifications-item-desc{color:#808695;font-size:12px;margin-bottom:4px}.ivu-notifications-item-time{font-size:12px;color:#808695}.ivu-number-info-title{margin-bottom:16px;color:#17233d;font-size:16px;-webkit-transition:all .2s;transition:all .2s}.ivu-number-info-subTitle{height:22px;overflow:hidden;color:#808695;font-size:14px;line-height:22px;white-space:nowrap;text-overflow:ellipsis;word-break:break-all}.ivu-number-info-value{margin-top:4px;overflow:hidden;font-size:0;white-space:nowrap;text-overflow:ellipsis;word-break:break-all}.ivu-number-info-total{display:inline-block;height:32px;margin-right:32px;color:#515a6e;font-size:24px;line-height:32px}.ivu-number-info-subTotal{display:inline-block;height:32px;line-height:32px;margin-right:0;vertical-align:top;font-size:14px;color:#808695}.ivu-page-header{padding:16px 32px 0 32px;background:#fff;border-bottom:1px solid #e8eaec}.ivu-page-header-wide{max-width:1200px;margin:auto}.ivu-page-header-detail{display:-webkit-box;display:-ms-flexbox;display:flex}.ivu-page-header-row{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}.ivu-page-header-breadcrumb{margin-bottom:16px}.ivu-page-header-tabs{margin:0 0 0 -8px}.ivu-page-header-tabs .ivu-tabs-bar{margin-bottom:0;border-bottom-color:transparent}.ivu-page-header-logo{-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;margin-right:16px;padding-top:1px}.ivu-page-header-logo>img{display:block;width:28px;height:28px;border-radius:4px}.ivu-page-header-back{display:-webkit-box;display:-ms-flexbox;display:flex;height:30px;-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;margin-right:8px;cursor:pointer;-webkit-transition:color .2s ease-in-out;transition:color .2s ease-in-out}.ivu-page-header-back:hover{color:#2d8cf0}.ivu-page-header-back .ivu-icon{font-size:20px;line-height:inherit}.ivu-page-header-back .ivu-divider{height:14px;line-height:inherit;top:8px}.ivu-page-header-main .ivu-page-header-back{display:none}.ivu-page-header-title{display:inline-block;color:#17233d;font-weight:500;font-size:20px}.ivu-page-header-action{min-width:266px;margin-left:56px}.ivu-page-header-action .ivu-btn-group:not(:last-child),.ivu-page-header-action .ivu-btn:not(:last-child){margin-right:8px}.ivu-page-header-action .ivu-btn-group>.ivu-btn{margin-right:0}.ivu-page-header-content,.ivu-page-header-extra{font-size:14px}.ivu-page-header-content,.ivu-page-header-title{-webkit-box-flex:1;-ms-flex:auto;flex:auto}.ivu-page-header-action,.ivu-page-header-extra,.ivu-page-header-main{-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto}.ivu-page-header-main{width:100%}.ivu-page-header-action,.ivu-page-header-title{margin-bottom:16px}.ivu-page-header-content,.ivu-page-header-extra,.ivu-page-header-logo{margin-bottom:16px}.ivu-page-header-action,.ivu-page-header-extra{text-align:right}.ivu-page-header-extra{min-width:242px;margin-left:88px}@media screen and (max-width:1200px){.ivu-page-header-extra{margin-left:44px}}@media screen and (max-width:992px){.ivu-page-header-extra{margin-left:20px}}@media screen and (max-width:768px){.ivu-page-header-row{display:block}.ivu-page-header-action,.ivu-page-header-extra{margin-left:0;text-align:left}}@media screen and (max-width:576px){.ivu-page-header-detail>.ivu-page-header-back{display:none}.ivu-page-header-main .ivu-page-header-back{display:inline-block;position:relative;top:-4px}.ivu-page-header-main .ivu-page-header-back .ivu-divider{top:0}.ivu-page-header-detail{display:block}}@media screen and (max-width:480px){.ivu-page-header-action .ivu-btn,.ivu-page-header-action .ivu-btn-group{display:block;margin-bottom:8px}.ivu-page-header-action .ivu-btn-group>.ivu-btn{display:inline-block;margin-bottom:0}}.ivu-result{width:72%;margin:0 auto;text-align:center}@media screen and (max-width:480px){.ivu-result{width:100%}}.ivu-result-icon{display:inline-block;width:72px;border-radius:50%;margin-bottom:24px}.ivu-result-icon-success{background-color:#19be6b}.ivu-result-icon-error{background-color:#ed4014}.ivu-result-icon .ivu-icon{color:#fff;font-size:72px;border-radius:50%}.ivu-result-title{margin-bottom:16px;color:#17233d;font-weight:500;font-size:24px;line-height:32px}.ivu-result-desc{margin-bottom:24px;color:#808695;font-size:14px;line-height:22px}.ivu-result-extra{padding:24px 40px;text-align:left;background:#f8f8f9;border-radius:4px}@media screen and (max-width:480px){.ivu-result-extra{padding:18px 20px}}.ivu-result-actions{margin-top:32px}.ivu-result-actions .ivu-btn:not(:last-child){margin-right:8px}.ivu-tag-select{position:relative;max-height:32px;margin-left:-8px;overflow:hidden;line-height:32px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ivu-tag-select-expanded{max-height:200px}.ivu-tag-select-option{display:inline-block}.ivu-tag-select-option .ivu-tag{margin-right:24px}.ivu-tag-select-expand-btn{position:absolute;top:1px;right:0}.ivu-tag-select-with-expanded{padding-right:50px}.ivu-tree-select .ivu-select-dropdown{padding:0}.ivu-tree-select .ivu-tree,.ivu-tree-select-transfer .ivu-tree{padding:0 6px}.ivu-tree-select .ivu-tree li,.ivu-tree-select-transfer .ivu-tree li{font-size:14px}.ivu-tree-select .ivu-tree-title,.ivu-tree-select-transfer .ivu-tree-title{display:inline-block;width:calc(100% - 18px);vertical-align:middle}.ivu-tree-select .ivu-checkbox-wrapper+.ivu-tree-title,.ivu-tree-select-transfer .ivu-checkbox-wrapper+.ivu-tree-title{width:calc(100% - 44px)}.ivu-tree-select .ivu-tree-title{padding:2px 4px 4px}.ivu-tree-select-transfer{padding:0}.ivu-tree-select-transfer .ivu-tree-title{padding:0 4px 2px}.ivu-trend{display:inline-block}.ivu-trend-text{vertical-align:middle}.ivu-trend-colorful.ivu-trend-up .ivu-trend-flag{color:#ed4014}.ivu-trend-colorful.ivu-trend-down .ivu-trend-flag{color:#19be6b}.ivu-trend-reverse-color.ivu-trend-colorful.ivu-trend-up .ivu-trend-flag{color:#19be6b}.ivu-trend-reverse-color.ivu-trend-colorful.ivu-trend-down .ivu-trend-flag{color:#ed4014}.ivu-trend-colorful.ivu-trend-text-color.ivu-trend-up .ivu-trend-text{color:#ed4014}.ivu-trend-colorful.ivu-trend-text-color.ivu-trend-down .ivu-trend-text{color:#19be6b}.ivu-trend-reverse-color.ivu-trend-colorful.ivu-trend-text-color.ivu-trend-up .ivu-trend-text{color:#19be6b}.ivu-trend-reverse-color.ivu-trend-colorful.ivu-trend-text-color.ivu-trend-down .ivu-trend-text{color:#ed4014}.ivu-word-count{display:inline-block}.ivu-word-count-overflow{color:#ed4014}
\ No newline at end of file
libs/iview-pro/iview-pro.min.js 0 → 100644
View file @ 75dd27ad
This source diff could not be displayed because it is too large. You can view the blob instead.
libs/random_str.js 0 → 100644
View file @ 75dd27ad
// 生成随机字符串
export default function (len = 32) {
const $chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890';
const maxPos = $chars.length;
let str = '';
for (let i = 0; i < len; i++) {
str += $chars.charAt(Math.floor(Math.random() * maxPos));
}
return str;
}
libs/system/index.js 0 → 100644
View file @ 75dd27ad
/**
* 系统内置方法集，正常情况下您不应该修改或移除此文件
* */
import { cloneDeep } from 'lodash';
/**
* @description 根据当前路由，找打顶部菜单名称
* @param {String} currentPath 当前路径
* @param {Array} menuList 所有路径
* */
function getHeaderName (currentPath, menuList) {
const allMenus = [];
menuList.forEach(menu => {
const headerName = menu.header || '';
const menus = transferMenu(menu, headerName);
allMenus.push({
path: menu.path,
header: headerName
});
menus.forEach(item => allMenus.push(item));
});
const currentMenu = allMenus.find(item => item.path === currentPath);
return currentMenu ? currentMenu.header : null;
}
function transferMenu (menu, headerName) {
if (menu.children && menu.children.length) {
return menu.children.reduce((all, item) => {
all.push({
path: item.path,
header: headerName
});
const foundChildren = transferMenu(item, headerName);
return all.concat(foundChildren);
}, []);
} else {
return [menu];
}
}
export { getHeaderName };
/**
* @description 根据当前顶栏菜单 name，找到对应的二级菜单
* @param {Array} menuList 所有的二级菜单
* @param {String} headerName 当前顶栏菜单的 name
* */
function getMenuSider (menuList, headerName = '') {
if (headerName) {
return menuList.filter(item => item.header === headerName);
} else {
return menuList;
}
}
export { getMenuSider };
/**
* @description 根据当前路由，找到其所有父菜单 path，作为展开侧边栏 open-names 依据
* @param {String} currentPath 当前路径
* @param {Array} menuList 所有路径
* */
function getSiderSubmenu (currentPath, menuList) {
const allMenus = [];
menuList.forEach(menu => {
const menus = transferSubMenu(menu, []);
allMenus.push({
path: menu.path,
openNames: []
});
menus.forEach(item => allMenus.push(item));
});
const currentMenu = allMenus.find(item => item.path === currentPath);
return currentMenu ? currentMenu.openNames : [];
}
function transferSubMenu (menu, openNames) {
if (menu.children && menu.children.length) {
const itemOpenNames = openNames.concat([menu.path]);
return menu.children.reduce((all, item) => {
all.push({
path: item.path,
openNames: itemOpenNames
});
const foundChildren = transferSubMenu(item, itemOpenNames);
return all.concat(foundChildren);
}, []);
} else {
return [menu].map(item => {
return {
path: item.path,
openNames: openNames
}
});
}
}
export { getSiderSubmenu };
/**
* @description 递归获取所有子菜单
* */
function getAllSiderMenu (menuList) {
let allMenus = [];
menuList.forEach(menu => {
if (menu.children && menu.children.length) {
const menus = getMenuChildren(menu);
menus.forEach(item => allMenus.push(item));
} else {
allMenus.push(menu);
}
});
return allMenus;
}
function getMenuChildren (menu) {
if (menu.children && menu.children.length) {
return menu.children.reduce((all, item) => {
const foundChildren = getMenuChildren(item);
return all.concat(foundChildren);
}, []);
} else {
return [menu];
}
}
export { getAllSiderMenu };
/**
* @description 将菜单转为平级
* */
function flattenSiderMenu (menuList, newList) {
menuList.forEach(menu => {
let newMenu = {};
for (let i in menu) {
if (i !== 'children') newMenu[i] = cloneDeep(menu[i]);
}
newList.push(newMenu);
menu.children && flattenSiderMenu(menu.children, newList);
});
return newList;
}
export { flattenSiderMenu };
/**
* @description 判断列表1中是否包含了列表2中的某一项
* 因为用户权限 access 为数组，includes 方法无法直接得出结论
* */
function includeArray (list1, list2) {
let status = false;
list2.forEach(item => {
if (list1.includes(item)) status = true;
});
return status;
}
export { includeArray };
libs/util.cookies.js 0 → 100644
View file @ 75dd27ad
import Cookies from 'js-cookie';
import Setting from '@/setting';
const cookies = {};
/**
* @description 存储 cookie 值
* @param {String} name cookie name
* @param {String} value cookie value
* @param {Object} cookieSetting cookie setting
*/
cookies.set = function (name = 'default', value = '', cookieSetting = {}) {
let currentCookieSetting = {
expires: Setting.cookiesExpires
};
Object.assign(currentCookieSetting, cookieSetting);
Cookies.set(`admin-${name}`, value, currentCookieSetting);
};
/**
* @description 拿到 cookie 值
* @param {String} name cookie name
*/
cookies.get = function (name = 'default') {
return Cookies.get(`admin-${name}`);
};
/**
* @description 拿到 cookie 全部的值
*/
cookies.getAll = function () {
return Cookies.get();
};
/**
* @description 删除 cookie
* @param {String} name cookie name
*/
cookies.remove = function (name = 'default') {
return Cookies.remove(`admin-${name}`);
};
export default cookies;
libs/util.db.js 0 → 100644
View file @ 75dd27ad
import low from 'lowdb';
import LocalStorage from 'lowdb/adapters/LocalStorage';
const adapter = new LocalStorage('admin');
const db = low(adapter);
db
.defaults({
sys: {},
database: {}
})
.write();
export default db;
libs/util.js 0 → 100644
View file @ 75dd27ad
import cookies from './util.cookies';
import log from './util.log';
import db from './util.db';
import Setting from '@/setting';
const util = {
cookies,
log,
db
};
function tTitle (title = '') {
if (window && window.$t) {
if (title.indexOf('$t:') === 0) {
return window.$t(title.split('$t:')[1]);
} else {
return title;
}
} else {
return title;
}
}
/**
* @description 更改标题
* @param {Object} title 标题
* @param {Object} count 未读消息数提示（可视情况选择使用或不使用）
*/
util.title = function ({ title, count }) {
title = tTitle(title);
let fullTitle = title ? `${title} - ${Setting.titleSuffix}` : Setting.titleSuffix;
if (count) fullTitle = `(${count}条消息)${fullTitle}`;
window.document.title = fullTitle;
};
function requestAnimation (task) {
if ('requestAnimationFrame' in window) {
return window.requestAnimationFrame(task);
}
setTimeout(task, 16);
}
export { requestAnimation };
export default util;
libs/util.log.js 0 → 100644
View file @ 75dd27ad
const log = {};
/**
* @description 返回这个样式的颜色值
* @param {String} type 样式名称 [ primary | success | warning | error | text ]
*/
function typeColor (type = 'default') {
let color = '';
switch (type) {
case 'default': color = '#515a6e'; break;
case 'primary': color = '#2d8cf0'; break;
case 'success': color = '#19be6b'; break;
case 'warning': color = '#ff9900'; break;
case 'error': color = '#ed4014'; break;
default:; break
}
return color;
}
/**
* @description 打印一个 [ title | text ] 样式的信息
* @param {String} title title text
* @param {String} info info text
* @param {String} type style
*/
log.capsule = function (title, info, type = 'primary') {
console.log(
`%c ${title} %c ${info} %c`,
'background:#35495E; padding: 1px; border-radius: 3px 0 0 3px; color: #fff;',
`background:${typeColor(type)}; padding: 1px; border-radius: 0 3px 3px 0; color: #fff;`,
'background:transparent'
);
};
/**
* @description 打印彩色文字
*/
log.colorful = function (textArr) {
console.log(
`%c${textArr.map(t => t.text || '').join('%c')}`,
...textArr.map(t => `color: ${typeColor(t.type)};`)
);
};
/**
* @description 打印 default 样式的文字
*/
log.default = function (text) {
log.colorful([{ text }]);
};
/**
* @description 打印 primary 样式的文字
*/
log.primary = function (text) {
log.colorful([{ text, type: 'primary' }]);
};
/**
* @description 打印 success 样式的文字
*/
log.success = function (text) {
log.colorful([{ text, type: 'success' }]);
};
/**
* @description 打印 warning 样式的文字
*/
log.warning = function (text) {
log.colorful([{ text, type: 'warning' }]);
};
/**
* @description 打印 error 样式的文字
*/
log.error = function (text) {
log.colorful([{ text, type: 'error' }]);
};
export default log;
menu/header.js 0 → 100644
View file @ 75dd27ad
// 菜单，顶栏
export default [
{
path: '/',
title: '首页',
icon: 'md-home',
hideSider: false,
name: 'home'
},
{
path: '/log',
title: '日志',
icon: 'md-locate',
hideSider: true,
name: 'system'
}
];
menu/modules/dashboard.js 0 → 100644
View file @ 75dd27ad
const pre = '/dashboard/';
export default {
path: '/dashboard',
title: 'Dashboard',
header: 'home',
icon: 'md-speedometer',
children: [
{
path: `${pre}console`,
title: '主控台'
}
]
}
menu/modules/log.js 0 → 100644
View file @ 75dd27ad
export default {
path: '/log',
title: '前端日志',
header: 'system',
icon: 'md-locate'
}
menu/sider.js 0 → 100644
View file @ 75dd27ad
// 菜单，侧边栏
import dashboard from './modules/dashboard';
// 系统
import log from './modules/log';
export default [
dashboard,
log
];
mixins/app.js 0 → 100644
View file @ 75dd27ad
/**
* 通用混合
* */
export default {
methods: {
// 当 $route 更新时触发
appRouteChange (to, from) {
}
}
}
mock/admin-mock/index.js 0 → 100644
View file @ 75dd27ad
import Mock from 'mockjs';
import qs from 'qs';
import withCredentials from './patch/withCredentials';
/* 补丁 */
withCredentials(Mock);
/* Mock 默认配置 */
Mock.setup({ timeout: '200-300' });
/* 扩展 [生成器] */
const Generator = (prop, template) => {
const obj = {};
obj[prop] = [template];
return Mock.mock(obj);
};
/* 扩展 [循环] */
const Repeat = (num, itemTemplate) => Generator(`data|${num}`, itemTemplate).data;
const CustomExtends = {
Generator,
Repeat,
Mock,
Random: Mock.Random
};
const extend = (prop, value) => {
CustomExtends[prop] = value;
};
/* 装配配置组 */
const wired = ({ url, type, body }) => ({
method: type,
params: qs.parse(url.split('?').length > 1 ? url.split('?')[1] : ''),
body: JSON.parse(body),
url: qs.parse(url.split('?')[0]),
...CustomExtends
});
const setup = (path, method, handle) => {
Mock.mock(
RegExp(path),
method,
typeof handle === 'function' ? o => handle(wired(o)) : handle
)
};
const load = (collection) => {
collection.map(({ path, method, handle }) => {
if (method === '*') {
method = [
'get',
'head',
'post',
'put',
'delete',
'connect',
'options',
'trace',
'patch'
]
}
if (typeof method === 'string' && method.indexOf('|') > -1) method = method.split('|')
if (method instanceof Array) {
method.map(item => setup(path, item, handle))
} else {
setup(path, method, handle)
}
})
};
export default { setup, load, extend };
mock/admin-mock/patch/withCredentials.js 0 → 100644
View file @ 75dd27ad
export default function (Mock) {
// http://cnine.me/note/FrontEnd/mock-lose-cookies-dbg.html
Mock.XHR.prototype.__send = Mock.XHR.prototype.send;
Mock.XHR.prototype.send = function () {
if (this.custom.xhr) this.custom.xhr.withCredentials = this.withCredentials || false;
this.__send.apply(this, arguments);
}
}
mock/api/account.js 0 → 100644
View file @ 75dd27ad
const userDB = [
{
username: 'admin',
password: 'admin',
uuid: 'admin-uuid',
info: {
name: 'Aresn',
avatar: 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar',
access: ['admin']
}
}
];
export default [
{
path: '/api/login',
method: 'post',
handle ({ body }) {
const user = userDB.find(e => e.username === body.username && e.password === body.password);
if (user) {
return {
code: 0,
msg: '登录成功',
data: {
...user,
token: 'A68NUPaXVBJYRStwvd9frcUn8rlf30h6'
}
}
} else {
return {
code: 401,
msg: '用户名或密码错误',
data: {}
}
}
}
},
{
path: '/api/register',
method: 'post',
handle ({ body }) {
return {
code: 0,
msg: '注册成功',
data: {
username: 'admin',
uuid: 'admin-uuid',
info: {
name: 'Aresn',
avatar: 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar',
access: ['admin']
},
token: 'A68NUPaXVBJYRStwvd9frcUn8rlf30h6'
}
}
}
}
]
mock/index.js 0 → 100644
View file @ 75dd27ad
import adminMock from './admin-mock';
const req = context => context.keys().map(context);
const options = req(require.context('./api/', true, /\.js$/))
.filter(e => e.default)
.map(e => e.default);
options.forEach(option => {
adminMock.load(option);
});
pages/account/login/index.vue 0 → 100644
View file @ 75dd27ad
<template>
<div class="page-account">
<div v-if="showI18n" class="page-account-header">
<i-header-i18n />
</div>
<div class="page-account-container">
<div class="page-account-top">
<div class="page-account-top-logo">
<img src="@/assets/images/logo.png" alt="logo">
</div>
<div class="page-account-top-desc">iView Admin Pro 企业级中台前端/设计解决方案</div>
</div>
<Login @on-submit="handleSubmit">
<UserName name="username" value="admin" />
<Password name="password" value="admin" enter-to-submit />
<div class="page-account-auto-login">
<Checkbox v-model="autoLogin" size="large">{{ $t('page.login.remember') }}</Checkbox>
<a href="">{{ $t('page.login.forgot') }}</a>
</div>
<Submit>{{ $t('page.login.submit') }}</Submit>
</Login>
<div class="page-account-other">
<span>{{ $t('page.login.other') }}</span>
<img src="@/assets/svg/icon-social-wechat.svg" alt="wechat">
<img src="@/assets/svg/icon-social-qq.svg" alt="qq">
<img src="@/assets/svg/icon-social-weibo.svg" alt="weibo">
<router-link class="page-account-register" :to="{ name: 'register' }">{{ $t('page.login.signup') }}</router-link>
</div>
</div>
<i-copyright />
</div>
</template>
<script>
import iCopyright from '@/components/copyright';
import { mapActions } from 'vuex';
import mixins from '../mixins';
export default {
mixins: [ mixins ],
components: { iCopyright },
data () {
return {
autoLogin: true
}
},
methods: {
...mapActions('admin/account', [
'login'
]),
/**
* @description 登录
* 表单校验已有 iView Pro 自动完成，如有需要修改，请阅读 iView Pro 文档
*/
handleSubmit (valid, values) {
if (valid) {
const { username, password } = values;
this.login({
username,
password
})
.then(() => {
// 重定向对象不存在则返回顶层路径
this.$router.replace(this.$route.query.redirect || '/');
});
}
}
}
};
</script>
pages/account/mixins.js 0 → 100644
View file @ 75dd27ad
import iHeaderI18n from '@/layouts/basic-layout/header-i18n';
import { mapState } from 'vuex';
export default {
components: { iHeaderI18n },
computed: {
...mapState('admin/layout', [
'showI18n'
])
}
}
pages/account/register/index.vue 0 → 100644
View file @ 75dd27ad
<template>
<div class="page-account">
<div v-if="showI18n" class="page-account-header">
<i-header-i18n />
</div>
<div class="page-account-container">
<div class="page-account-top">
<div class="page-account-top-logo">
<img src="@/assets/images/logo.png" alt="logo">
</div>
<div class="page-account-top-desc">iView Admin Pro 企业级中台前端/设计解决方案</div>
</div>
<Login ref="form" @on-submit="handleSubmit">
<Email name="mail" />
<Poptip trigger="focus" placement="right" width="240">
<Password name="password" :rules="passwordRule" placeholder="至少6位密码，区分大小写" @on-change="handleChangePassword" />
<div slot="content" class="page-account-register-tip">
<div class="page-account-register-tip-title" :class="passwordTip.class">
强度：{{ passwordTip.strong }}
</div>
<Progress :percent="passwordTip.percent" hide-info :stroke-width="6" :stroke-color="passwordTip.color" />
<div class="page-account-register-tip-desc">
请至少输入 6 个字符。请不要使用容易被猜到的密码。
</div>
</div>
</Poptip>
<Password name="passwordConfirm" :rules="passwordConfirmRule" placeholder="确认密码" />
<Mobile name="mobile" />
<Captcha name="captcha" :field="['mobile']" enter-to-submit @on-get-captcha="handleGetCaptcha" />
<Submit>{{ $t('page.register.submit') }}</Submit>
</Login>
<div class="page-account-to-login">
<router-link :to="{ name: 'login' }">{{ $t('page.register.other') }}</router-link>
</div>
</div>
<i-copyright />
</div>
</template>
<script>
import iCopyright from '@/components/copyright';
import { mapActions } from 'vuex';
import mixins from '../mixins';
export default {
mixins: [ mixins ],
components: { iCopyright },
data () {
// 二次校验密码
// 因为 iView Pro 的表单控件省去了对数据的绑定，因此需要通过 ref 从 Login 组件中获取数据
// 下面的 formValidate.password 中的 password，指的是给 <Password> 组件设置的 name="password"
const validatePassCheck = (rule, value, callback) => {
if (value !== this.$refs.form.formValidate.password) {
callback(new Error('两次输入的密码不匹配！'));
} else {
callback();
}
};
return {
passwordRule: [
{
required: true, message: '密码不能为空！', trigger: 'change'
},
{
min: 6, message: '密码不能少于6位！', trigger: 'change'
}
],
passwordConfirmRule: [
{
required: true, message: '确认密码不能为空！', trigger: 'change'
},
{ validator: validatePassCheck, trigger: 'change' }
],
// 密码长度，在密码强度提示时作为判断依据
passwordLen: 0
}
},
computed: {
// 密码强度提示文案等
passwordTip () {
let strong = '强';
let className = 'strong';
let percent = this.passwordLen > 10 ? 10 : this.passwordLen;
let color = '#19be6b';
if (this.passwordLen < 6) {
strong = '太短';
className = 'low';
color = '#ed4014';
} else if (this.passwordLen < 10) {
strong = '中';
className = 'medium';
color = '#ff9900';
}
return {
strong,
class: `page-account-register-tip-${className}`,
percent: percent * 10,
color
}
}
},
methods: {
...mapActions('admin/account', [
'register',
'login'
]),
handleChangePassword (val) {
this.passwordLen = val.length;
},
/**
* @description 注册
* 表单校验已有 iView Pro 自动完成，如有需要修改，请阅读 iView Pro 文档
*/
handleSubmit (valid, values) {
if (valid) {
if (valid) {
const { mail, password, mobile, captcha } = values;
this.register({
mail,
password,
mobile,
captcha
})
.then(() => {
this.$router.replace({ name: 'register-result' });
});
}
}
},
/**
* @description 获取验证码
* */
handleGetCaptcha () {
}
}
};
</script>
pages/account/register/result/index.vue 0 → 100644
View file @ 75dd27ad
<template>
<div class="page-account">
<div class="page-account-container page-account-container-result">
<div class="page-account-top">
<div class="page-account-top-logo">
<img src="@/assets/images/logo.png" alt="logo">
</div>
<div class="page-account-top-desc">iView Admin Pro 企业级中台前端/设计解决方案</div>
</div>
<Result type="success" :title="title" :desc="desc">
<div slot="actions">
<Button size="large" type="primary" to="https://mail.qq.com" target="_blank">查看邮箱</Button>
<Button size="large" to="/">返回首页</Button>
</div>
</Result>
</div>
<i-copyright />
</div>
</template>
<script>
import iCopyright from '@/components/copyright';
export default {
components: { iCopyright },
data () {
return {
title: '你的账户：admin 注册成功',
desc: '激活邮件已发送到你的邮箱中，邮件有效期为24小时。请及时登录邮箱，点击邮件中的链接激活帐户。'
}
}
};
</script>
pages/dashboard/console/index.vue 0 → 100644
View file @ 75dd27ad
<template>
<div>
欢迎使用 iView Admin Pro
</div>
</template>
<script>
export default {
name: 'dashboard-console'
}
</script>
pages/system/error/403/index.vue 0 → 100644
View file @ 75dd27ad
<template>
<div>
<Exception type="403" img-color :desc="$t('page.exception.e403')" :back-text="$t('page.exception.btn')" />
</div>
</template>
<script>
</script>
pages/system/error/404/index.vue 0 → 100644
View file @ 75dd27ad
<template>
<div>
<Exception type="404" img-color :desc="$t('page.exception.e404')" :back-text="$t('page.exception.btn')" />
</div>
</template>
<script>
</script>
pages/system/error/500/index.vue 0 → 100644
View file @ 75dd27ad
<template>
<div>
<Exception type="500" img-color :desc="$t('page.exception.e500')" :back-text="$t('page.exception.btn')" />
</div>
</template>
<script>
</script>
pages/system/log/index.vue 0 → 100644
View file @ 75dd27ad
<template>
<div class="i-table-no-border">
<Card :bordered="false" dis-hover>
<div slot="title">
<Avatar icon="md-locate" size="small" v-color="'#2f54eb'" v-bg-color="'#f0f5ff'" />
<span class="ivu-pl-8">前端日志</span>
</div>
<div slot="extra">
<Tooltip content="清空日志" placement="top">
<Button type="text" @click="clean">
<Icon type="md-trash" size="16" />
</Button>
</Tooltip>
</div>
<Table :columns="columns" :data="log">
<template slot-scope="{ row }" slot="page">
{{ get(row, 'meta.url') }}
</template>
<template slot-scope="{ row }" slot="type">
<Tag color="blue" v-if="row.type === 'info'">info</Tag>
<Tag color="green" v-if="row.type === 'success'">success</Tag>
<Tag color="orange" v-if="row.type === 'warning'">warning</Tag>
<Tag color="red" v-if="row.type === 'error'">error</Tag>
</template>
<template slot-scope="{ row }" slot="more">
<Button type="primary" @click="handleMore(row)">查看</Button>
</template>
</Table>
</Card>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import { get } from 'lodash';
export default {
name: 'log',
data () {
return {
columns: [
{
title: '时间',
key: 'time',
width: 180
},
{
title: '信息',
key: 'message',
minWidth: 300
},
{
title: '触发页面',
slot: 'page',
minWidth: 300
},
{
title: '类型',
width: 100,
slot: 'type'
},
{
title: '详细信息',
width: 100,
slot: 'more'
}
]
}
},
computed: {
...mapState('admin/log', [
'log'
])
},
methods: {
...mapMutations('admin/log', [
'clean'
]),
get,
handleMore (log) {
this.$Notice.info({
title: '提示',
desc: '请在浏览器控制台查看完整日志'
});
this.$log.capsule('iView Admin', '完整日志内容', 'primary');
console.group('完整日志');
console.log('message ', log.message);
console.log('time: ', log.time);
console.log('type: ', log.type);
console.log('meta: ', log.meta);
console.groupEnd();
}
}
}
</script>
plugins/auth/index.js 0 → 100644
View file @ 75dd27ad
/**
* @description 鉴权指令
* 当传入的权限当前用户没有时，会移除该组件
* 用例：<Tag v-auth="['admin']">text</Tag>
* */
import store from '@/store';
import { includeArray } from '@/libs/system';
export default {
inserted (el, binding, vnode) {
const { value } = binding;
const access = store.state.admin.user.info.access;
if (value && value instanceof Array && value.length && access && access.length) {
const isPermission = includeArray(value, access);
if (!isPermission) {
el.parentNode && el.parentNode.removeChild(el);
}
}
}
}
plugins/error/index.js 0 → 100644
View file @ 75dd27ad
import store from '@/store';
import util from '@/libs/util';
export default {
install (Vue, options) {
Vue.config.errorHandler = function (error, instance, info) {
Vue.nextTick(() => {
// store 追加 log
store.dispatch('admin/log/push', {
message: `${info}: ${error.message}`,
type: 'error',
meta: {
error
// instance
}
});
// 只在开发模式下打印 log
if (process.env.NODE_ENV === 'development') {
util.log.capsule('iView Admin', 'ErrorHandler', 'error');
util.log.error('>>>>>> 错误信息 >>>>>>');
console.log(info);
util.log.error('>>>>>> Vue 实例 >>>>>>');
console.log(instance);
util.log.error('>>>>>> Error >>>>>>');
console.log(error)
}
})
}
}
}
plugins/index.js 0 → 100644
View file @ 75dd27ad
/**
* 插件
* */
// 错误捕获
import pluginError from '@/plugins/error';
// 日志插件
import pluginLog from '@/plugins/log';
// 鉴权指令
import directiveAuth from '@/plugins/auth';
export default {
async install (Vue, options) {
// 插件
Vue.use(pluginError);
Vue.use(pluginLog);
// 指令
Vue.directive('auth', directiveAuth);
}
}
plugins/log/index.js 0 → 100644
View file @ 75dd27ad
import store from '@/store';
import util from '@/libs/util';
export default {
install (Vue, options) {
// 快速打印 log
Vue.prototype.$log = {
...util.log,
push (data) {
if (typeof data === 'string') {
// 如果传递来的数据是字符串
// 赋值给 message 字段
// 为了方便使用
// eg: this.$log.push('foo text')
store.dispatch('admin/log/push', {
message: data
});
} else if (typeof data === 'object') {
// 如果传递来的数据是对象
store.dispatch('admin/log/push', data);
}
}
}
}
}
plugins/request/index.js 0 → 100644
View file @ 75dd27ad
import store from '@/store';
import axios from 'axios';
import util from '@/libs/util';
import Setting from '@/setting';
import { Message, Notice } from 'view-design';
// 创建一个错误
function errorCreate (msg) {
const err = new Error(msg);
errorLog(err);
throw err;
}
// 记录和显示错误
function errorLog (err) {
// 添加到日志
store.dispatch('admin/log/push', {
message: '数据请求异常',
type: 'error',
meta: {
error: err
}
});
// 打印到控制台
if (process.env.NODE_ENV === 'development') {
util.log.error('>>>>>> Error >>>>>>');
console.log(err);
}
// 显示提示，可配置使用 iView 的 $Message 还是 $Notice 组件来显示
if (Setting.errorModalType === 'Message') {
Message.error({
content: err.message,
duration: Setting.modalDuration
});
} else if (Setting.errorModalType === 'Notice') {
Notice.error({
title: '提示',
desc: err.message,
duration: Setting.modalDuration
});
}
}
// 创建一个 axios 实例
const service = axios.create({
baseURL: Setting.apiBaseURL,
timeout: 5000 // 请求超时时间
});
// 请求拦截器
service.interceptors.request.use(
config => {
// 在请求发送之前做一些处理
const token = util.cookies.get('token');
// 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
config.headers['X-Token'] = token;
return config;
},
error => {
// 发送失败
console.log(error);
Promise.reject(error);
}
);
// 响应拦截器
service.interceptors.response.use(
response => {
// dataAxios 是 axios 返回数据中的 data
const dataAxios = response.data;
// 这个状态码是和后端约定的
const { code } = dataAxios;
// 根据 code 进行判断
if (code === undefined) {
// 如果没有 code 代表这不是项目后端开发的接口
return dataAxios;
} else {
// 有 code 代表这是一个后端接口 可以进行进一步的判断
switch (code) {
case 0:
// [ 示例 ] code === 0 代表没有错误
return dataAxios.data;
case 'xxx':
// [ 示例 ] 其它和后台约定的 code
errorCreate(`[ code: xxx ] ${dataAxios.msg}: ${response.config.url}`);
break;
default:
// 不是正确的 code
errorCreate(`${dataAxios.msg}: ${response.config.url}`);
break;
}
}
},
error => {
if (error && error.response) {
switch (error.response.status) {
case 400: error.message = '请求错误'; break;
case 401: error.message = '未授权，请登录'; break;
case 403: error.message = '拒绝访问'; break;
case 404: error.message = `请求地址出错: ${error.response.config.url}`; break;
case 408: error.message = '请求超时'; break;
case 500: error.message = '服务器内部错误'; break;
case 501: error.message = '服务未实现'; break;
case 502: error.message = '网关错误'; break;
case 503: error.message = '服务不可用'; break;
case 504: error.message = '网关超时'; break;
case 505: error.message = 'HTTP版本不受支持'; break;
default: break;
}
}
errorLog(error);
return Promise.reject(error);
}
);
export default service;
router/index.js 0 → 100644
View file @ 75dd27ad
import Vue from 'vue';
import VueRouter from 'vue-router';
import iView from 'view-design';
import util from '@/libs/util'
import Setting from '@/setting';
import store from '@/store/index';
// 路由数据
import routes from './routes';
Vue.use(VueRouter);
// 导出路由 在 main.js 里使用
const router = new VueRouter({
routes,
mode: Setting.routerMode,
base: Setting.routerBase
});
/**
* 路由拦截
* 权限验证
*/
router.beforeEach((to, from, next) => {
if (Setting.showProgressBar) iView.LoadingBar.start();
// 判断是否需要登录才可以进入
if (to.matched.some(_ => _.meta.auth)) {
// 这里依据 token 判断是否登录，可视情况修改
const token = util.cookies.get('token');
if (token && token !== 'undefined') {
next();
} else {
// 没有登录的时候跳转到登录界面
// 携带上登陆成功之后需要跳转的页面完整路径
next({
name: 'login',
query: {
redirect: to.fullPath
}
});
}
} else {
// 不需要身份校验 直接通过
next();
}
});
router.afterEach(to => {
if (Setting.showProgressBar) iView.LoadingBar.finish();
// 多页控制 打开新的页面
store.dispatch('admin/page/open', to);
// 更改标题
util.title({
title: to.meta.title
});
// 返回页面顶端
window.scrollTo(0, 0);
});
export default router;
router/modules/dashboard.js 0 → 100644
View file @ 75dd27ad
import BasicLayout from '@/layouts/basic-layout';
const meta = {
auth: true
};
const pre = 'dashboard-';
export default {
path: '/dashboard',
name: 'dashboard',
redirect: {
name: `${pre}console`
},
meta,
component: BasicLayout,
children: [
{
path: 'console',
name: `${pre}console`,
meta: {
...meta,
title: '主控台',
closable: false
},
component: () => import('@/pages/dashboard/console')
}
]
};
router/routes.js 0 → 100644
View file @ 75dd27ad
import dashboard from './modules/dashboard';
import BasicLayout from '@/layouts/basic-layout';
/**
* 在主框架内显示
*/
const frameIn = [
{
path: '/',
redirect: {
name: 'dashboard-console'
},
component: BasicLayout,
children: [
{
path: 'index',
name: 'index',
redirect: {
name: 'dashboard-console'
}
},
{
path: 'log',
name: 'log',
meta: {
title: '前端日志',
auth: true
},
component: () => import('@/pages/system/log')
},
// 刷新页面 必须保留
{
path: 'refresh',
name: 'refresh',
hidden: true,
component: {
beforeRouteEnter (to, from, next) {
next(instance => instance.$router.replace(from.fullPath));
},
render: h => h()
}
},
// 页面重定向 必须保留
{
path: 'redirect/:route*',
name: 'redirect',
hidden: true,
component: {
beforeRouteEnter (to, from, next) {
next(instance => instance.$router.replace(JSON.parse(from.params.route)));
},
render: h => h()
}
}
]
},
dashboard
];
/**
* 在主框架之外显示
*/
const frameOut = [
// 登录
{
path: '/login',
name: 'login',
meta: {
title: '$t:page.login.title'
},
component: () => import('@/pages/account/login')
},
// 注册
{
path: '/register',
name: 'register',
meta: {
title: '$t:page.register.title'
},
component: () => import('@/pages/account/register')
},
// 注册结果
{
path: '/register/result',
name: 'register-result',
meta: {
auth: true,
title: '注册结果'
},
component: () => import('@/pages/account/register/result')
}
];
/**
* 错误页面
*/
const errorPage = [
{
path: '/403',
name: '403',
meta: {
title: '403'
},
component: () => import('@/pages/system/error/403')
},
{
path: '/500',
name: '500',
meta: {
title: '500'
},
component: () => import('@/pages/system/error/500')
},
{
path: '*',
name: '404',
meta: {
title: '404'
},
component: () => import('@/pages/system/error/404')
}
];
// 导出需要显示菜单的
export const frameInRoutes = frameIn;
// 重新组织后导出
export default [
...frameIn,
...frameOut,
...errorPage
];
setting.env.js 0 → 100644
View file @ 75dd27ad
/**
* iView Admin Pro 开发配置
* */
const env = process.env.NODE_ENV;
const Setting = {
// 是否使用 Mock 的数据，默认 开发环境为 true，生产环境为 false
isMock: env === 'development',
// 部署应用包时的基本 URL
publicPath: env === 'development' ? '/' : '/',
// 生产环境构建文件的目录名
outputDir: 'dist',
// 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
assetsDir: '',
// 开发环境每次保存时 lint 代码，会将 lint 错误输出为编译警告
// true || false || error
lintOnSave: true,
// iView Loader 的选项
// 详见 https://www.iviewui.com/docs/guide/iview-loader
iviewLoaderOptions: {
prefix: false
}
};
module.exports = Setting;
setting.js 0 → 100644
View file @ 75dd27ad
/**
* iView Admin Pro 业务配置
* */
const env = process.env.NODE_ENV;
const Setting = {
/**
* 基础配置
* */
// 网页标题的后缀
titleSuffix: 'iView Admin Pro',
// 路由模式，可选值为 history 或 hash
routerMode: 'history',
// 应用的基路径
routerBase: '/',
// 页面切换时，是否显示模拟的进度条
showProgressBar: true,
// 接口请求地址
apiBaseURL: env === 'development' ? '/' : '/',
// 接口请求返回错误时，弹窗的持续时间，单位：秒
modalDuration: 3,
// 接口请求返回错误时，弹窗的类型，可选值为 Message 或 Notice
errorModalType: 'Message',
// Cookies 默认保存时间，单位：天
cookiesExpires: 1,
/**
* 多语言配置
* */
i18n: {
// 默认语言
default: 'zh-CN',
// 是否根据用户电脑配置自动设置语言（仅第一次有效）
auto: false
},
/**
* 布局配置
* */
// 侧边菜单宽度，单位 px，不可动态修改，需与 setting.less 的 @menuSideWidth 保持一致
menuSideWidth: 256,
layout: {
// 侧边栏风格，可选值为 dark 或 light
siderTheme: 'dark',
// 顶栏风格，可选值为 light、dark 或 primary
headerTheme: 'light',
// 顶栏是否置顶，开启后会覆盖侧边栏，需开启 headerFix
headerStick: false,
// 是否开启多 Tabs 页签
tabs: true,
// 多 Tabs 页签是否显示图标，开启 tabs 时有效
showTabsIcon: true,
// 是否固定多 Tabs 多页签
tabsFix: true,
// 再次点击 Tabs 页签时，是否重载当前页面
tabsReload: false,
// 是否固定侧边栏
siderFix: true,
// 是否固定顶栏
headerFix: true,
// 是否在下滑时隐藏顶栏，需开启 headerFix，如果开启了 tabsFix，Tabs 也会被隐藏
headerHide: false,
// 是否显示顶部菜单栏
// 一般来说，侧边的菜单栏足以满足大部分业务，如需动态切换侧边栏，可开启此选项启用顶部一级菜单，此时侧边栏将作为二级菜单
headerMenu: false,
// 侧边菜单栏是否开启手风琴模式
menuAccordion: true,
// 是否显示折叠侧边栏按钮，移动端下会自动强制开启
showSiderCollapse: true,
// 侧边菜单栏是否默认折起
menuCollapse: false,
// 再次点击当前侧边菜单时，是否重载当前页面
menuSiderReload: false,
// 再次点击当前顶部菜单时，是否重载当前页面
menuHeaderReload: false,
// 侧边菜单折起时，是否在子菜单前显示父级菜单名称
showCollapseMenuTitle: false,
// 是否显示重载按钮
showReload: true,
// 是否显示搜索
showSearch: true,
// 是否显示通知
showNotice: true,
// 是否显示全屏
showFullscreen: true,
// 在手机访问时，是否在顶部显示小尺寸 logo
showMobileLogo: true,
// 是否显示全局面包屑，开启 headerMenu 时不可用
showBreadcrumb: true,
// 全局面包屑是否显示图标，开启 showBreadcrumb 时有效
showBreadcrumbIcon: false,
// 是否显示日志入口，开启与否，不影响日志记录，如不希望用户看到可关闭
showLog: true,
// 是否显示多语言
showI18n: true,
// 是否支持动态修改布局配置，移动端下会自动强制关闭
enableSetting: true,
// 退出登录时，是否二次确认
logoutConfirm: true
},
/**
* 多页 Tabs
* */
page: {
// 默认打开的页签
opened: []
},
/**
* 功能配置
* */
// 相同路由，不同参数间进行切换，是否强力更新
sameRouteForceUpdate: false,
// 是否使用动态侧边菜单
dynamicSiderMenu: false
};
export default Setting;
store/index.js 0 → 100644
View file @ 75dd27ad
import Vue from 'vue';
import Vuex from 'vuex';
import admin from './modules/admin'
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
admin
}
})
store/modules/admin/index.js 0 → 100644
View file @ 75dd27ad
/**
* 该文件启用 `@/store/index.js` 导入所有 vuex 模块。
* 这个文件是一次性创建的，不应该被修改。
*/
const files = require.context('./modules', false, /\.js$/);
const modules = {};
files.keys().forEach(key => {
modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
});
export default {
namespaced: true,
modules
};
store/modules/admin/modules/account.js 0 → 100644
View file @ 75dd27ad
/**
* 注册、登录、注销
* */
import util from '@/libs/util';
import router from '@/router';
import { AccountLogin, AccountRegister } from '@/api/account';
import { Modal } from 'view-design';
export default {
namespaced: true,
actions: {
/**
* @description 登录
* @param {Object} param context
* @param {Object} param username {String} 用户账号
* @param {Object} param password {String} 密码
* @param {Object} param route {Object} 登录成功后定向的路由对象 任何 vue-router 支持的格式
*/
login ({ dispatch }, {
username = '',
password = ''
} = {}) {
return new Promise((resolve, reject) => {
// 开始请求登录接口
AccountLogin({
username,
password
})
.then(async res => {
// 设置 cookie 一定要存 uuid 和 token 两个 cookie
// 整个系统依赖这两个数据进行校验和存储
// uuid 是用户身份唯一标识 用户注册的时候确定 并且不可改变 不可重复
// token 代表用户当前登录状态 建议在网络请求中携带 token
// 如有必要 token 需要定时更新，默认保存一天，可在 setting.js 中修改
// 如果你的 token 不是通过 cookie 携带，而是普通字段，也可视情况存储在 localStorage
util.cookies.set('uuid', res.uuid);
util.cookies.set('token', res.token);
// 设置 vuex 用户信息
await dispatch('admin/user/set', res.info, { root: true });
// 用户登录后从持久化数据加载一系列的设置
await dispatch('load');
// 结束
resolve();
})
.catch(err => {
// console.log('err: ', err);
reject(err);
})
})
},
/**
* @description 退出登录
* */
logout ({ commit, dispatch }, { confirm = false, vm } = {}) {
async function logout () {
// 删除cookie
util.cookies.remove('token');
util.cookies.remove('uuid');
// 清空 vuex 用户信息
await dispatch('admin/user/set', {}, { root: true });
// 跳转路由
router.push({
name: 'login'
});
}
if (confirm) {
Modal.confirm({
title: vm.$t('basicLayout.logout.confirmTitle'),
content: vm.$t('basicLayout.logout.confirmContent'),
onOk () {
logout();
}
});
} else {
logout();
}
},
/**
* @description 注册
* @param {Object} param context
* @param {Object} param mail {String} 邮箱
* @param {Object} param password {String} 密码
* @param {Object} param mobile {String} 手机号码
* @param {Object} param captcha {String} 验证码
*/
register ({ dispatch }, {
mail = '',
password = '',
mobile = '',
captcha = ''
} = {}) {
return new Promise((resolve, reject) => {
// 开始请求登录接口
AccountRegister({
mail,
password,
mobile,
captcha
})
.then(async res => {
// 注册成功后，完成与登录一致的操作
// 注册也可视情况不返还 uuid、token 等数据，在注册完成后，由前端自动执行一次登录逻辑
util.cookies.set('uuid', res.uuid);
util.cookies.set('token', res.token);
// 设置 vuex 用户信息
await dispatch('admin/user/set', res.info, { root: true });
// 用户登录后从持久化数据加载一系列的设置
await dispatch('load');
// 结束
resolve();
})
.catch(err => {
// console.log('err: ', err);
reject(err);
})
})
},
/**
* @description 用户登录后从持久化数据加载一系列的设置
* @param {Object} state vuex state
* @param {Object} dispatch vuex dispatch
*/
load ({ state, dispatch }) {
return new Promise(async resolve => {
// 加载用户登录信息
await dispatch('admin/user/load', null, { root: true });
// 持久化数据加载上次退出时的多页列表
await dispatch('admin/page/openedLoad', null, { root: true });
// end
resolve();
})
}
}
};
store/modules/admin/modules/db.js 0 → 100644
View file @ 75dd27ad
/**
* 持久化存储
* 一般情况下，您无需修改此文件
* */
import util from '@/libs/util';
import router from '@/router';
import { cloneDeep } from 'lodash';
/**
* @description 检查路径是否存在 不存在的话初始化
* @param {Object} dbName {String} 数据库名称
* @param {Object} path {String} 路径
* @param {Object} user {Boolean} 区分用户
* @param {Object} validator {Function} 数据校验钩子 返回 true 表示验证通过
* @param {Object} defaultValue {*} 初始化默认值
* @returns {String} 可以直接使用的路径
*/
function pathInit ({
dbName = 'database',
path = '',
user = true,
validator = () => true,
defaultValue = ''
}) {
const uuid = util.cookies.get('uuid') || 'ghost-uuid';
const currentPath = `${dbName}.${user ? `user.${uuid}` : 'public'}${path ? `.${path}` : ''}`;
const value = util.db.get(currentPath).value();
if (!(value !== undefined && validator(value))) {
util.db.set(currentPath, defaultValue).write();
}
return currentPath;
}
export { pathInit };
export default {
namespaced: true,
actions: {
/**
* @description 将数据存储到指定位置 | 路径不存在会自动初始化
* @description 效果类似于取值 dbName.path = value
* @param context context
* @param {Object} dbName {String} 数据库名称
* @param {Object} path {String} 存储路径
* @param {Object} value {*} 需要存储的值
* @param {Object} user {Boolean} 是否区分用户
*/
set (context, {
dbName = 'database',
path = '',
value = '',
user = false
}) {
util.db.set(pathInit({
dbName,
path,
user
}), value).write()
},
/**
* @description 获取数据
* @description 效果类似于取值 dbName.path || defaultValue
* @param context context
* @param {Object} dbName {String} 数据库名称
* @param {Object} path {String} 存储路径
* @param {Object} defaultValue {*} 取值失败的默认值
* @param {Object} user {Boolean} 是否区分用户
*/
get (context, {
dbName = 'database',
path = '',
defaultValue = '',
user = false
}) {
return new Promise(resolve => {
resolve(cloneDeep(util.db.get(pathInit({
dbName,
path,
user,
defaultValue
})).value()))
})
},
/**
* @description 获取存储数据库对象
* @param {Object} context context
* @param {Object} user {Boolean} 是否区分用户
*/
database (context, {
user = false
} = {}) {
return new Promise(resolve => {
resolve(util.db.get(pathInit({
dbName: 'database',
path: '',
user,
defaultValue: {}
})))
})
},
/**
* @description 清空存储数据库对象
* @param {Object} context context
* @param {Object} user {Boolean} 是否区分用户
*/
databaseClear (context, {
user = false
} = {}) {
return new Promise(resolve => {
resolve(util.db.get(pathInit({
dbName: 'database',
path: '',
user,
validator: () => false,
defaultValue: {}
})))
})
},
/**
* @description 获取存储数据库对象 [ 区分页面 ]
* @param {Object} context context
* @param {Object} basis {String} 页面区分依据 [ name | path | fullPath ]
* @param {Object} user {Boolean} 是否区分用户
*/
databasePage (context, {
basis = 'fullPath',
user = false
} = {}) {
return new Promise(resolve => {
resolve(util.db.get(pathInit({
dbName: 'database',
path: `$page.${router.app.$route[basis]}`,
user,
defaultValue: {}
})))
})
},
/**
* @description 清空存储数据库对象 [ 区分页面 ]
* @param {Object} context context
* @param {Object} basis {String} 页面区分依据 [ name | path | fullPath ]
* @param {Object} user {Boolean} 是否区分用户
*/
databasePageClear (context, {
basis = 'fullPath',
user = false
} = {}) {
return new Promise(resolve => {
resolve(util.db.get(pathInit({
dbName: 'database',
path: `$page.${router.app.$route[basis]}`,
user,
validator: () => false,
defaultValue: {}
})))
})
},
/**
* @description 快速将页面当前的数据 ( $data ) 持久化
* @param {Object} context context
* @param {Object} instance {Object} vue 实例
* @param {Object} basis {String} 页面区分依据 [ name | path | fullPath ]
* @param {Object} user {Boolean} 是否区分用户
*/
pageSet (context, {
instance,
basis = 'fullPath',
user = false
}) {
return new Promise(resolve => {
resolve(util.db.get(pathInit({
dbName: 'database',
path: `$page.${router.app.$route[basis]}.$data`,
user,
validator: () => false,
defaultValue: cloneDeep(instance.$data)
})))
})
},
/**
* @description 快速获取页面快速持久化的数据
* @param {Object} context context
* @param {Object} instance {Object} vue 实例
* @param {Object} basis {String} 页面区分依据 [ name | path | fullPath ]
* @param {Object} user {Boolean} 是否区分用户
*/
pageGet (context, {
instance,
basis = 'fullPath',
user = false
}) {
return new Promise(resolve => {
resolve(cloneDeep(util.db.get(pathInit({
dbName: 'database',
path: `$page.${router.app.$route[basis]}.$data`,
user,
defaultValue: cloneDeep(instance.$data)
})).value()))
})
},
/**
* @description 清空页面快照
* @param {Object} context context
* @param {Object} basis {String} 页面区分依据 [ name | path | fullPath ]
* @param {Object} user {Boolean} 是否区分用户
*/
pageClear (context, {
basis = 'fullPath',
user = false
}) {
return new Promise(resolve => {
resolve(util.db.get(pathInit({
dbName: 'database',
path: `$page.${router.app.$route[basis]}.$data`,
user,
validator: () => false,
defaultValue: {}
})))
})
}
}
};
store/modules/admin/modules/i18n.js 0 → 100644
View file @ 75dd27ad
/**
* 多语言
* */
import Languages from '@/i18n/locale';
import Setting from '@/setting';
import util from '@/libs/util';
import { pathInit } from '@/store/modules/admin/modules/db';
const savedLocaleKey = 'i18n-locale';
export default {
namespaced: true,
state: {
locale: ''
},
actions: {
/**
* @description 获取当前语言
* */
getLocale ({ state }) {
let locale;
const db = util.db.get(pathInit({
dbName: 'database',
path: '',
user: true,
defaultValue: {}
}));
const savedLocale = db.get(savedLocaleKey).value();
// 先判断本地存储是否已有语言选择
if (savedLocale) {
locale = savedLocale;
} else {
// 判断是否开启自动识别语言
if (Setting.i18n.auto) {
// 如果自动识别的语言，本地没有该语言包，则设置为默认语言
const navLang = navigator.language;
if (Languages[navLang]) {
locale = navLang;
} else {
locale = Setting.i18n.default;
}
} else {
locale = Setting.i18n.default;
}
// 将初次的语言保存在本地
db.set(savedLocaleKey, locale).write();
}
state.locale = locale;
},
/**
* @description 设置当前语言
* */
setLocale ({ state }, { locale = Setting.i18n.default, vm }) {
const db = util.db.get(pathInit({
dbName: 'database',
path: '',
user: true,
defaultValue: {}
}));
// 将语言保存在本地
db.set(savedLocaleKey, locale).write();
// 设置当前语言
state.locale = locale;
// 设置 vue-i18n 的语言
vm.$i18n.locale = locale;
// 更新网页标题
util.title({
title: vm.$route.meta.title
});
}
}
};
store/modules/admin/modules/layout.js 0 → 100644
View file @ 75dd27ad
/**
* 布局配置
* */
import screenfull from 'screenfull';
import Setting from '@/setting';
export default {
namespaced: true,
state: {
...Setting.layout,
isMobile: false, // 是否为手机
isTablet: false, // 是否为平板
isDesktop: true, // 是否为桌面
isFullscreen: false // 是否切换到了全屏
},
mutations: {
/**
* @description 设置设备类型
* @param {Object} state vuex state
* @param {String} type 设备类型，可选值为 Mobile、Tablet、Desktop
*/
setDevice (state, type) {
state.isMobile = false;
state.isTablet = false;
state.isDesktop = false;
state[`is${type}`] = true;
},
/**
* @description 修改 menuCollapse
* @param {Object} state vuex state
* @param {Boolean} collapse 折叠状态
* */
updateMenuCollapse (state, collapse) {
state.menuCollapse = collapse;
},
/**
* @description 设置全屏状态
* @param {Object} state vuex state
* @param {Boolean} isFullscreen vuex
* */
setFullscreen (state, isFullscreen) {
state.isFullscreen = isFullscreen;
},
/**
* @description 更改指定布局配置
* @param {Object} state vuex state
* @param {Object} key layout 名称，对应 Setting.layout
* @param {Object} value layout 值
* */
updateLayoutSetting (state, { key, value }) {
state[key] = value;
}
},
actions: {
/**
* @description 初始化监听全屏状态
*/
listenFullscreen ({ commit }) {
return new Promise(resolve => {
if (screenfull.enabled) {
screenfull.on('change', () => {
if (!screenfull.isFullscreen) {
commit('setFullscreen', false)
}
})
}
// end
resolve();
});
},
/**
* @description 切换全屏
*/
toggleFullscreen ({ commit }) {
return new Promise(resolve => {
if (screenfull.isFullscreen) {
screenfull.exit();
commit('setFullscreen', false);
} else {
screenfull.request();
commit('setFullscreen', true);
}
// end
resolve();
});
}
}
};
store/modules/admin/modules/log.js 0 → 100644
View file @ 75dd27ad
import dayjs from 'dayjs';
import { get } from 'lodash';
import util from '@/libs/util.js';
export default {
namespaced: true,
state: {
/**
* @description 错误日志，单条属性：
* message: 必填，日志信息
* type: 非必填，类型，可选值为 info（默认值）| success | warning | error，其中 error 会以具体数目强调显示，其它以点轻量显示
* time: 必填，日志记录时间
* meta: 非必填，其它携带信息
* */
log: []
},
getters: {
/**
* @description 返回现存 log (all) 的条数
* @param {*} state vuex state
*/
length (state) {
return state.log.length;
},
/**
* @description 返回现存 log (error) 的条数
* @param {*} state vuex state
*/
lengthError (state) {
return state.log.filter(log => log.type === 'error').length;
}
},
actions: {
/**
* @description 添加一个日志
* @param {String} param message {String} 信息
* @param {String} param type {String} 类型
* @param {Object} param meta {Object} 附带的信息
*/
push ({ rootState, commit }, { message, type = 'info', meta }) {
commit('push', {
message,
type,
time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
meta: {
// 当前用户信息
user: rootState.admin.user.info,
// 当前用户的 uuid
uuid: util.cookies.get('uuid'),
// 当前的 token
token: util.cookies.get('token'),
// 当前地址
url: get(window, 'location.href', ''),
// 用户设置
...meta
}
});
}
},
mutations: {
/**
* @description 添加日志
* @param {Object} state vuex state
* @param {Object} log data
*/
push (state, log) {
state.log.push(log);
},
/**
* @description 清空日志
* @param {Object} state vuex state
*/
clean (state) {
state.log = [];
}
}
}
store/modules/admin/modules/menu.js 0 → 100644
View file @ 75dd27ad
/**
* 菜单
* */
import { cloneDeep } from 'lodash';
import { includeArray } from '@/libs/system';
// 根据 menu 配置的权限，过滤菜单
function filterMenu (menuList, access, lastList) {
menuList.forEach(menu => {
let menuAccess = menu.auth;
if (!menuAccess || includeArray(menuAccess, access)) {
let newMenu = {};
for (let i in menu) {
if (i !== 'children') newMenu[i] = cloneDeep(menu[i]);
}
if (menu.children && menu.children.length) newMenu.children = [];
lastList.push(newMenu);
menu.children && filterMenu(menu.children, access, newMenu.children);
}
});
return lastList;
}
export default {
namespaced: true,
state: {
// 顶部菜单
header: [],
// 侧栏菜单
sider: [],
// 当前顶栏菜单的 name
headerName: '',
// 当前所在菜单的 path
activePath: '',
// 展开的子菜单 name 集合
openNames: []
},
getters: {
/**
* @description 根据 user 里登录用户权限，对侧边菜单进行鉴权过滤
* */
filterSider (state, getters, rootState) {
const userInfo = rootState.admin.user.info;
// @权限
const access = userInfo.access;
if (access && access.length) {
return filterMenu(state.sider, access, []);
} else {
return filterMenu(state.sider, [], []);
}
},
/**
* @description 根据 user 里登录用户权限，对顶栏菜单进行鉴权过滤
* */
filterHeader (state, getters, rootState) {
const userInfo = rootState.admin.user.info;
// @权限
const access = userInfo.access;
if (access && access.length) {
return state.header.filter(item => {
let state = true;
if (item.auth && !includeArray(item.auth, access)) state = false;
return state;
});
} else {
return state.header.filter(item => {
let state = true;
if (item.auth && item.auth.length) state = false;
return state;
});
}
},
/**
* @description 当前 header 的全部信息
* */
currentHeader (state) {
return state.header.find(item => item.name === state.headerName);
},
/**
* @description 在当前 header 下，是否隐藏 sider（及折叠按钮）
* */
hideSider (state, getters) {
let visible = false;
if (getters.currentHeader && 'hideSider' in getters.currentHeader) visible = getters.currentHeader.hideSider;
return visible;
}
},
mutations: {
/**
* @description 设置侧边栏菜单
* @param {Object} state vuex state
* @param {Array} menu menu
*/
setSider (state, menu) {
state.sider = menu;
},
/**
* @description 设置顶栏菜单
* @param {Object} state vuex state
* @param {Array} menu menu
*/
setHeader (state, menu) {
state.header = menu;
},
/**
* @description 设置当前顶栏菜单 name
* @param {Object} state vuex state
* @param {Array} name headerName
*/
setHeaderName (state, name) {
state.headerName = name;
},
/**
* @description 设置当前所在菜单的 path，用于侧栏菜单高亮当前项
* @param {Object} state vuex state
* @param {Array} path fullPath
*/
setActivePath (state, path) {
state.activePath = path;
},
/**
* @description 设置当前所在菜单的全部展开父菜单的 names 集合
* @param {Object} state vuex state
* @param {Array} names openNames
*/
setOpenNames (state, names) {
state.openNames = names;
}
}
}
store/modules/admin/modules/page.js 0 → 100644
View file @ 75dd27ad
/**
* 多标签页
* */
import { get } from 'lodash';
import router from '@/router';
import Setting from '@/setting';
import menuSider from '@/menu/sider';
import { getAllSiderMenu, includeArray } from '@/libs/system';
// 判定是否需要缓存
const isKeepAlive = data => get(data, 'meta.cache', false);
export default {
namespaced: true,
state: {
// 可以在多页 tab 模式下显示的页面
pool: [],
// 当前显示的多页面列表
opened: Setting.page.opened,
// 当前页面
current: '',
// 需要缓存的页面 name
keepAlive: []
},
actions: {
/**
* @description 从持久化数据载入分页列表
*/
openedLoad ({ state, commit, dispatch, rootState }) {
return new Promise(async resolve => {
// store 赋值
const value = await dispatch('admin/db/get', {
dbName: 'sys',
path: 'page.opened',
defaultValue: Setting.page.opened,
user: true
}, { root: true });
// 在处理函数中进行数据优化 过滤掉现在已经失效的页签或者已经改变了信息的页签
// 以 fullPath 字段为准
// 如果页面过多的话可能需要优化算法
// valid 有效列表 1, 1, 0, 1 => 有效, 有效, 失效, 有效
const valid = [];
// 处理数据
state.opened = value.map(opened => {
// 忽略首页
if (opened.fullPath === '/index') {
valid.push(1);
return opened;
}
// 尝试在所有的支持多标签页的页面里找到 name 匹配的页面
const find = state.pool.find(item => item.name === opened.name);
// 记录有效或无效信息
valid.push(find ? 1 : 0);
// 返回合并后的数据 新的覆盖旧的
// 新的数据中一般不会携带 params 和 query, 所以旧的参数会留存
return Object.assign({}, opened, find);
})
.filter((opened, index) => valid[index] === 1)
// 对 menu 鉴权过滤
.filter(opened => {
const allSiderMenu = getAllSiderMenu(menuSider);
const find = allSiderMenu.find(item => item.path === opened.fullPath);
let state = true;
if (find && find.auth) {
const userInfo = rootState.admin.user.info;
// @权限
const access = userInfo.access;
// 如果用户当前的权限，不是该 menu 对应的 权限，则过滤这个 Tab
if (access && !includeArray(find.auth, access)) state = false;
}
return state;
});
// 根据 opened 数据生成缓存设置
commit('keepAliveRefresh');
// end
resolve();
});
},
/**
* 将 opened 属性赋值并持久化 在这之前请先确保已经更新了 state.opened
*/
opened2db ({ state, dispatch }) {
return new Promise(async resolve => {
// 设置数据
dispatch('admin/db/set', {
dbName: 'sys',
path: 'page.opened',
value: state.opened,
user: true
}, { root: true });
// end
resolve();
});
},
/**
* @description 更新页面列表上的某一项
* @param {Object} param { index, params, query, fullPath } 路由信息
*/
openedUpdate ({ state, commit, dispatch }, { index, params, query, fullPath, meta }) {
return new Promise(async resolve => {
// 更新页面列表某一项
let page = state.opened[index];
page.params = params || page.params;
page.query = query || page.query;
page.fullPath = fullPath || page.fullPath;
page.meta = meta || page.meta;
state.opened.splice(index, 1, page);
// 持久化
await dispatch('opened2db');
// end
resolve();
});
},
/**
* @description 更新页面当前项
* @param {Object} param { params, query, fullPath } 路由信息
*/
currentUpdate ({ state, commit, dispatch }, { params, query, fullPath, meta }) {
return new Promise(async resolve => {
setTimeout(async () => {
// 更新当前项
const index = state.opened.findIndex(item => item.fullPath === state.current);
let page = state.opened[index];
page.params = params || page.params;
page.query = query || page.query;
page.fullPath = fullPath || page.fullPath;
page.meta = meta || page.meta;
state.opened.splice(index, 1, page);
// 持久化
await dispatch('opened2db');
// end
resolve();
}, 0);
});
},
/**
* @description 新增一个 tag (打开一个页面)
* @param {Object} param new tag info
*/
add ({ state, commit, dispatch }, { tag, params, query, fullPath }) {
return new Promise(async resolve => {
// 设置新的 tag 在新打开一个以前没打开过的页面时使用
let newTag = tag;
newTag.params = params || newTag.params;
newTag.query = query || newTag.query;
newTag.fullPath = fullPath || newTag.fullPath;
// 添加进当前显示的页面数组
state.opened.push(newTag);
// 如果这个页面需要缓存 将其添加到缓存设置
if (isKeepAlive(newTag)) {
commit('keepAlivePush', tag.name);
}
// 持久化
await dispatch('opened2db');
// end
resolve();
});
},
/**
* @description 打开一个新的页面
* @param {Object} param 从路由钩子的 to 对象上获取 { name, params, query, fullPath } 路由信息
*/
open ({ state, commit, dispatch }, { name, params, query, fullPath }) {
return new Promise(async resolve => {
// 已经打开的页面
let opened = state.opened;
// 判断此页面是否已经打开 并且记录位置
let pageOpenedIndex = 0;
const pageOpened = opened.find((page, index) => {
const same = page.fullPath === fullPath;
pageOpenedIndex = same ? index : pageOpenedIndex;
return same;
});
if (pageOpened) {
// 页面以前打开过
await dispatch('openedUpdate', {
index: pageOpenedIndex,
params,
query,
fullPath
});
} else {
// 页面以前没有打开过
let page = state.pool.find(t => t.name === name);
// 如果这里没有找到 page 代表这个路由虽然在框架内 但是不参与标签页显示
if (page) {
await dispatch('add', {
tag: Object.assign({}, page),
params,
query,
fullPath
});
}
}
commit('currentSet', fullPath);
// end
resolve();
});
},
/**
* @description 关闭一个 tag (关闭一个页面)
* @param {Object} param { tagName: 要关闭的标签名字 }
*/
close ({ state, commit, dispatch }, { tagName }) {
return new Promise(async resolve => {
// 下个新的页面
let newPage = state.opened[0];
const isCurrent = state.current === tagName;
// 如果关闭的页面就是当前显示的页面
if (isCurrent) {
// 去找一个新的页面
let len = state.opened.length;
for (let i = 0; i < len; i++) {
if (state.opened[i].fullPath === tagName) {
// 是否只剩最后一个，是则跳首页
if (len > 1) {
// 如果是最后一个，则向前一个跳，否则向下一个跳
if (i === len - 1) {
newPage = state.opened[i - 1];
} else {
newPage = state.opened[i + 1];
}
} else {
newPage = {};
}
break;
}
}
}
// 找到这个页面在已经打开的数据里是第几个
const index = state.opened.findIndex(page => page.fullPath === tagName);
if (index >= 0) {
// 如果这个页面是缓存的页面 将其在缓存设置中删除
commit('keepAliveRemove', state.opened[index].name);
// 更新数据 删除关闭的页面
state.opened.splice(index, 1);
}
// 持久化
await dispatch('opened2db');
// 最后需要判断是否需要跳到首页
if (isCurrent) {
const { name = 'index', params = {}, query = {} } = newPage;
let routerObj = {
name,
params,
query
};
router.push(routerObj, () => {});
}
// end
resolve();
});
},
/**
* @description 关闭当前标签左边的标签
* @param {Object} param { pageSelect: 当前选中的tagName }
*/
closeLeft ({ state, commit, dispatch }, { pageSelect } = {}) {
return new Promise(async resolve => {
const pageAim = pageSelect || state.current;
let currentIndex = 0;
state.opened.forEach((page, index) => {
if (page.fullPath === pageAim) {
currentIndex = index;
}
});
if (currentIndex > 0) {
// 删除打开的页面 并在缓存设置中删除
state.opened.splice(1, currentIndex - 1).forEach(({ name }) => commit('keepAliveRemove', name));
}
state.current = pageAim;
if (router.app.$route.fullPath !== pageAim) {
router.push(pageAim);
}
// 持久化
await dispatch('opened2db');
// end
resolve();
});
},
/**
* @description 关闭当前标签右边的标签
* @param {Object} param { pageSelect: 当前选中的tagName }
*/
closeRight ({ state, commit, dispatch }, { pageSelect } = {}) {
return new Promise(async resolve => {
const pageAim = pageSelect || state.current;
let currentIndex = 0;
state.opened.forEach((page, index) => {
if (page.fullPath === pageAim) {
currentIndex = index;
}
});
// 删除打开的页面 并在缓存设置中删除
state.opened.splice(currentIndex + 1).forEach(({ name }) => commit('keepAliveRemove', name));
// 设置当前的页面
state.current = pageAim;
if (router.app.$route.fullPath !== pageAim) {
router.push(pageAim);
}
// 持久化
await dispatch('opened2db');
// end
resolve();
});
},
/**
* @description 关闭当前激活之外的 tag
* @param {Object} param { pageSelect: 当前选中的tagName }
*/
closeOther ({ state, commit, dispatch }, { pageSelect } = {}) {
return new Promise(async resolve => {
const pageAim = pageSelect || state.current;
let currentIndex = 0;
state.opened.forEach((page, index) => {
if (page.fullPath === pageAim) {
currentIndex = index;
}
});
// 删除打开的页面数据 并更新缓存设置
if (currentIndex === 0) {
state.opened.splice(1).forEach(({ name }) => commit('keepAliveRemove', name));
} else {
state.opened.splice(currentIndex + 1).forEach(({ name }) => commit('keepAliveRemove', name));
state.opened.splice(1, currentIndex - 1).forEach(({ name }) => commit('keepAliveRemove', name));
}
// 设置新的页面
state.current = pageAim;
if (router.app.$route.fullPath !== pageAim) {
router.push(pageAim);
}
// 持久化
await dispatch('opened2db');
// end
resolve();
});
},
/**
* @description 关闭所有 tag
* @param {Object} state vuex state
*/
closeAll ({ state, commit, dispatch }) {
return new Promise(async resolve => {
// 删除打开的页面 并在缓存设置中删除
state.opened.splice(1).forEach(({ name }) => commit('keepAliveRemove', name));
// 持久化
await dispatch('opened2db');
// 关闭所有的标签页后需要判断一次现在是不是在首页
if (router.app.$route.name !== 'index') {
router.push({
name: 'index'
}, () => {});
}
// end
resolve();
});
}
},
mutations: {
/**
* @class keepAlive
* @description 从已经打开的页面记录中更新需要缓存的页面记录
* @param {Object} state vuex state
*/
keepAliveRefresh (state) {
state.keepAlive = state.opened.filter(item => isKeepAlive(item)).map(e => e.name);
},
/**
* @description 删除一个页面的缓存设置
* @param {Object} state vuex state
* @param {String} name name
*/
keepAliveRemove (state, name) {
const list = [ ...state.keepAlive ];
const index = list.findIndex(item => item === name);
if (index !== -1) {
list.splice(index, 1);
state.keepAlive = list;
}
},
/**
* @description 增加一个页面的缓存设置
* @param {Object} state vuex state
* @param {String} name name
*/
keepAlivePush (state, name) {
const keep = [ ...state.keepAlive ];
keep.push(name);
state.keepAlive = keep;
},
/**
* @description 清空页面缓存设置
* @param {Object} state vuex state
*/
keepAliveClean (state) {
state.keepAlive = [];
},
/**
* @class current
* @description 设置当前激活的页面 fullPath
* @param {Object} state vuex state
* @param {String} fullPath new fullPath
*/
currentSet (state, fullPath) {
state.current = fullPath;
},
/**
* @class pool
* @description 保存 pool (候选池)
* @param {Object} state vuex state
* @param {Array} routes routes
*/
init (state, routes) {
const pool = [];
const push = function (routes) {
routes.forEach(route => {
if (route.children) {
push(route.children);
} else {
if (!route.hidden) {
const { meta, name, path } = route;
pool.push({ meta, name, path });
}
}
})
};
push(routes);
state.pool = pool;
}
}
}
store/modules/admin/modules/user.js 0 → 100644
View file @ 75dd27ad
/**
* 用户信息
* */
export default {
namespaced: true,
state: {
// 用户信息
info: {}
},
actions: {
/**
* @description 设置用户数据
* @param {Object} state vuex state
* @param {Object} dispatch vuex dispatch
* @param {*} info info
*/
set ({ state, dispatch }, info) {
return new Promise(async resolve => {
// store 赋值
state.info = info;
// 持久化
await dispatch('admin/db/set', {
dbName: 'sys',
path: 'user.info',
value: info,
user: true
}, { root: true });
// end
resolve();
})
},
/**
* @description 从数据库取用户数据
* @param {Object} state vuex state
* @param {Object} dispatch vuex dispatch
*/
load ({ state, dispatch }) {
return new Promise(async resolve => {
// store 赋值
state.info = await dispatch('admin/db/get', {
dbName: 'sys',
path: 'user.info',
defaultValue: {},
user: true
}, { root: true });
// end
resolve();
})
}
}
}
styles/common.less 0 → 100644
View file @ 75dd27ad
#app, body, html{
height: 100%;
}
body{
background-color: @background-color-base;
font-size: 14px;
}
// 隐藏滚动条样式
.i-scrollbar-hide{
&::-webkit-scrollbar{
width: 0;
}
&::-webkit-scrollbar-track{
background-color: transparent;
}
&::-webkit-scrollbar-thumb{
background: #e8eaec;
}
}
// 极简滚动条样式
.i-scrollbar{
&::-webkit-scrollbar{
width: 6px;
}
&::-webkit-scrollbar-track{
background-color: transparent;
}
&::-webkit-scrollbar-thumb{
background: #808695;
border-radius: 4px;
}
}
// 去除 Table 的左右边框，更精简
.i-table-no-border{
.ivu-table th{
background-color: #fff;
}
.ivu-table-wrapper, .ivu-table tr:last-child td{
border: none;
}
.ivu-table:before, .ivu-table:after{
display: none;
}
}
styles/default/index.less 0 → 100644
View file @ 75dd27ad
// 自定义主题
// 详见 https://www.iviewui.com/docs/guide/theme
@import '~view-design/src/styles/index.less';
@menu-dark-title: #191a23;
@menu-dark-active-bg: #101117;
styles/font/demo.css 0 → 100644
View file @ 75dd27ad
/* Logo 字体 */
@font-face {
font-family: "iconfont logo";
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
}
.logo {
font-family: "iconfont logo";
font-size: 160px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* tabs */
.nav-tabs {
position: relative;
}
.nav-tabs .nav-more {
position: absolute;
right: 0;
bottom: 0;
height: 42px;
line-height: 42px;
color: #666;
}
#tabs {
border-bottom: 1px solid #eee;
}
#tabs li {
cursor: pointer;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 16px;
border-bottom: 2px solid transparent;
position: relative;
z-index: 1;
margin-bottom: -1px;
color: #666;
}
#tabs .active {
border-bottom-color: #f00;
color: #222;
}
.tab-container .content {
display: none;
}
/* 页面布局 */
.main {
padding: 30px 100px;
width: 960px;
margin: 0 auto;
}
.main .logo {
color: #333;
text-align: left;
margin-bottom: 30px;
line-height: 1;
height: 110px;
margin-top: -50px;
overflow: hidden;
*zoom: 1;
}
.main .logo a {
font-size: 160px;
color: #333;
}
.helps {
margin-top: 40px;
}
.helps pre {
padding: 20px;
margin: 10px 0;
border: solid 1px #e7e1cd;
background-color: #fffdef;
overflow: auto;
}
.icon_lists {
width: 100% !important;
overflow: hidden;
*zoom: 1;
}
.icon_lists li {
width: 100px;
margin-bottom: 10px;
margin-right: 20px;
text-align: center;
list-style: none !important;
cursor: default;
}
.icon_lists li .code-name {
line-height: 1.2;
}
.icon_lists .icon {
display: block;
height: 100px;
line-height: 100px;
font-size: 42px;
margin: 10px auto;
color: #333;
-webkit-transition: font-size 0.25s linear, width 0.25s linear;
-moz-transition: font-size 0.25s linear, width 0.25s linear;
transition: font-size 0.25s linear, width 0.25s linear;
}
.icon_lists .icon:hover {
font-size: 100px;
}
.icon_lists .svg-icon {
/* 通过设置 font-size 来改变图标大小 */
width: 1em;
/* 图标和文字相邻时，垂直对齐 */
vertical-align: -0.15em;
/* 通过设置 color 来改变 SVG 的颜色/fill */
fill: currentColor;
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
normalize.css 中也包含这行 */
overflow: hidden;
}
.icon_lists li .name,
.icon_lists li .code-name {
color: #666;
}
/* markdown 样式 */
.markdown {
color: #666;
font-size: 14px;
line-height: 1.8;
}
.highlight {
line-height: 1.5;
}
.markdown img {
vertical-align: middle;
max-width: 100%;
}
.markdown h1 {
color: #404040;
font-weight: 500;
line-height: 40px;
margin-bottom: 24px;
}
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
color: #404040;
margin: 1.6em 0 0.6em 0;
font-weight: 500;
clear: both;
}
.markdown h1 {
font-size: 28px;
}
.markdown h2 {
font-size: 22px;
}
.markdown h3 {
font-size: 16px;
}
.markdown h4 {
font-size: 14px;
}
.markdown h5 {
font-size: 12px;
}
.markdown h6 {
font-size: 12px;
}
.markdown hr {
height: 1px;
border: 0;
background: #e9e9e9;
margin: 16px 0;
clear: both;
}
.markdown p {
margin: 1em 0;
}
.markdown>p,
.markdown>blockquote,
.markdown>.highlight,
.markdown>ol,
.markdown>ul {
width: 80%;
}
.markdown ul>li {
list-style: circle;
}
.markdown>ul li,
.markdown blockquote ul>li {
margin-left: 20px;
padding-left: 4px;
}
.markdown>ul li p,
.markdown>ol li p {
margin: 0.6em 0;
}
.markdown ol>li {
list-style: decimal;
}
.markdown>ol li,
.markdown blockquote ol>li {
margin-left: 20px;
padding-left: 4px;
}
.markdown code {
margin: 0 3px;
padding: 0 5px;
background: #eee;
border-radius: 3px;
}
.markdown strong,
.markdown b {
font-weight: 600;
}
.markdown>table {
border-collapse: collapse;
border-spacing: 0px;
empty-cells: show;
border: 1px solid #e9e9e9;
width: 95%;
margin-bottom: 24px;
}
.markdown>table th {
white-space: nowrap;
color: #333;
font-weight: 600;
}
.markdown>table th,
.markdown>table td {
border: 1px solid #e9e9e9;
padding: 8px 16px;
text-align: left;
}
.markdown>table th {
background: #F7F7F7;
}
.markdown blockquote {
font-size: 90%;
color: #999;
border-left: 4px solid #e9e9e9;
padding-left: 0.8em;
margin: 1em 0;
}
.markdown blockquote p {
margin: 0;
}
.markdown .anchor {
opacity: 0;
transition: opacity 0.3s ease;
margin-left: 8px;
}
.markdown .waiting {
color: #ccc;
}
.markdown h1:hover .anchor,
.markdown h2:hover .anchor,
.markdown h3:hover .anchor,
.markdown h4:hover .anchor,
.markdown h5:hover .anchor,
.markdown h6:hover .anchor {
opacity: 1;
display: inline-block;
}
.markdown>br,
.markdown>p>br {
clear: both;
}
.hljs {
display: block;
background: white;
padding: 0.5em;
color: #333333;
overflow-x: auto;
}
.hljs-comment,
.hljs-meta {
color: #969896;
}
.hljs-string,
.hljs-variable,
.hljs-template-variable,
.hljs-strong,
.hljs-emphasis,
.hljs-quote {
color: #df5000;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-type {
color: #a71d5d;
}
.hljs-literal,
.hljs-symbol,
.hljs-bullet,
.hljs-attribute {
color: #0086b3;
}
.hljs-section,
.hljs-name {
color: #63a35c;
}
.hljs-tag {
color: #333333;
}
.hljs-title,
.hljs-attr,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
color: #795da3;
}
.hljs-addition {
color: #55a532;
background-color: #eaffea;
}
.hljs-deletion {
color: #bd2c00;
background-color: #ffecec;
}
.hljs-link {
text-decoration: underline;
}
/* 代码高亮 */
/* PrismJS 1.15.0
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
/**
* prism.js default theme for JavaScript, CSS and HTML
* Based on dabblet (http://dabblet.com)
* @author Lea Verou
*/
code[class*="language-"],
pre[class*="language-"] {
color: black;
background: none;
text-shadow: 0 1px white;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*="language-"]::-moz-selection,
pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection,
code[class*="language-"] ::-moz-selection {
text-shadow: none;
background: #b3d4fc;
}
pre[class*="language-"]::selection,
pre[class*="language-"] ::selection,
code[class*="language-"]::selection,
code[class*="language-"] ::selection {
text-shadow: none;
background: #b3d4fc;
}
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
}
:not(pre)>code[class*="language-"],
pre[class*="language-"] {
background: #f5f2f0;
}
/* Inline code */
:not(pre)>code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
}
.token.punctuation {
color: #999;
}
.namespace {
opacity: .7;
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
color: #905;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #690;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #9a6e3a;
background: hsla(0, 0%, 100%, .5);
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #07a;
}
.token.function,
.token.class-name {
color: #DD4A68;
}
.token.regex,
.token.important,
.token.variable {
color: #e90;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
styles/font/demo_index.html 0 → 100644
View file @ 75dd27ad
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>IconFont Demo</title>
<link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
<link rel="stylesheet" href="demo.css">
<link rel="stylesheet" href="iconfont.css">
<script src="iconfont.js"></script>
<!-- jQuery -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
<!-- 代码高亮 -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
</head>
<body>
<div class="main">
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
<div class="nav-tabs">
<ul id="tabs" class="dib-box">
<li class="dib active"><span>Unicode</span></li>
<li class="dib"><span>Font class</span></li>
<li class="dib"><span>Symbol</span></li>
</ul>
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1125611" target="_blank" class="nav-more">查看项目</a>
</div>
<div class="tab-container">
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon i-icon">&#xe61f;</span>
<div class="name">iconfont-radiobox</div>
<div class="code-name">&amp;#xe61f;</div>
</li>
<li class="dib">
<span class="icon i-icon">&#xe7d1;</span>
<div class="name">refresh</div>
<div class="code-name">&amp;#xe7d1;</div>
</li>
<li class="dib">
<span class="icon i-icon">&#xe657;</span>
<div class="name">exit-full-screen</div>
<div class="code-name">&amp;#xe657;</div>
</li>
<li class="dib">
<span class="icon i-icon">&#xe69d;</span>
<div class="name">notification</div>
<div class="code-name">&amp;#xe69d;</div>
</li>
<li class="dib">
<span class="icon i-icon">&#xe743;</span>
<div class="name">full-screen</div>
<div class="code-name">&amp;#xe743;</div>
</li>
<li class="dib">
<span class="icon i-icon">&#xe68b;</span>
<div class="name">menu-unfold</div>
<div class="code-name">&amp;#xe68b;</div>
</li>
<li class="dib">
<span class="icon i-icon">&#xe600;</span>
<div class="name">menu-fold</div>
<div class="code-name">&amp;#xe600;</div>
</li>
</ul>
<div class="article markdown">
<h2 id="unicode-">Unicode 引用</h2>
<hr>
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
<ul>
<li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
<li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
</ul>
<blockquote>
<p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
</blockquote>
<p>Unicode 使用步骤如下：</p>
<h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
font-family: 'i-icon';
src: url('iconfont.eot');
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff2') format('woff2'),
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'),
url('iconfont.svg#i-icon') format('svg');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.i-icon {
font-family: "i-icon" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</code></pre>
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="i-icon"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
<blockquote>
<p>"i-icon" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
</blockquote>
</div>
</div>
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon i-icon i-icon-record"></span>
<div class="name">
iconfont-radiobox
</div>
<div class="code-name">.i-icon-record
</div>
</li>
<li class="dib">
<span class="icon i-icon i-icon-refresh"></span>
<div class="name">
refresh
</div>
<div class="code-name">.i-icon-refresh
</div>
</li>
<li class="dib">
<span class="icon i-icon i-icon-exit-full-screen"></span>
<div class="name">
exit-full-screen
</div>
<div class="code-name">.i-icon-exit-full-screen
</div>
</li>
<li class="dib">
<span class="icon i-icon i-icon-notification"></span>
<div class="name">
notification
</div>
<div class="code-name">.i-icon-notification
</div>
</li>
<li class="dib">
<span class="icon i-icon i-icon-full-screen"></span>
<div class="name">
full-screen
</div>
<div class="code-name">.i-icon-full-screen
</div>
</li>
<li class="dib">
<span class="icon i-icon i-icon-menu-unfold"></span>
<div class="name">
menu-unfold
</div>
<div class="code-name">.i-icon-menu-unfold
</div>
</li>
<li class="dib">
<span class="icon i-icon i-icon-menu-fold"></span>
<div class="name">
menu-fold
</div>
<div class="code-name">.i-icon-menu-fold
</div>
</li>
</ul>
<div class="article markdown">
<h2 id="font-class-">font-class 引用</h2>
<hr>
<p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
<p>与 Unicode 使用方式相比，具有如下特点：</p>
<ul>
<li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
<li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
<li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
<li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
</ul>
<p>使用步骤如下：</p>
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="i-icon i-icon-xxx"&gt;&lt;/span&gt;
</code></pre>
<blockquote>
<p>"
i-icon" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
</blockquote>
</div>
</div>
<div class="content symbol">
<ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#i-icon-record"></use>
</svg>
<div class="name">iconfont-radiobox</div>
<div class="code-name">#i-icon-record</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#i-icon-refresh"></use>
</svg>
<div class="name">refresh</div>
<div class="code-name">#i-icon-refresh</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#i-icon-exit-full-screen"></use>
</svg>
<div class="name">exit-full-screen</div>
<div class="code-name">#i-icon-exit-full-screen</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#i-icon-notification"></use>
</svg>
<div class="name">notification</div>
<div class="code-name">#i-icon-notification</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#i-icon-full-screen"></use>
</svg>
<div class="name">full-screen</div>
<div class="code-name">#i-icon-full-screen</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#i-icon-menu-unfold"></use>
</svg>
<div class="name">menu-unfold</div>
<div class="code-name">#i-icon-menu-unfold</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#i-icon-menu-fold"></use>
</svg>
<div class="name">menu-fold</div>
<div class="code-name">#i-icon-menu-fold</div>
</li>
</ul>
<div class="article markdown">
<h2 id="symbol-">Symbol 引用</h2>
<hr>
<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
<ul>
<li>支持多色图标了，不再受单色限制。</li>
<li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
<li>兼容性较差，支持 IE9+，及现代浏览器。</li>
<li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
</ul>
<p>使用步骤如下：</p>
<h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
&lt;/style&gt;
</code></pre>
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
&lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('.tab-container .content:first').show()
$('#tabs li').click(function (e) {
var tabContent = $('.tab-container .content')
var index = $(this).index()
if ($(this).hasClass('active')) {
return
} else {
$('#tabs li').removeClass('active')
$(this).addClass('active')
tabContent.hide().eq(index).fadeIn()
}
})
})
</script>
</body>
</html>
styles/font/iconfont.css 0 → 100644
View file @ 75dd27ad
@font-face {font-family: "i-icon";
src: url('iconfont.eot?t=1570845937392'); /* IE9 */
src: url('iconfont.eot?t=1570845937392#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAW4AAsAAAAADAgAAAVrAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDdAqKMIhSATYCJAMgCxIABCAFhFUHgQQbUAojEaaErk72lwfcYWHxjyPaEUW0fmv4c+ow30ev+kLnUarQzWDwQO9ZbzJpmtZLZU8szsKngMXhF1T20D27MbU5R4hCRpihfELNvpDitu7S7J+FEqzMt682d7c/5948tbvkf046AFSzUxMOCDRQahObth95wu0myXEhADBi2w4eldCqF4eqGUtj8dxbAGCvQQGcnN3yGNvWea+AvRBgLcRzlxReUOpnPg0B2EmlBKJOvSZt0FERfIG0IQP790RvKFAniAJdrA1cqSIWYkFXZikXgQXZ9sUbfEIHBYtEPKtFv7p9qBEi/5qcEeZ0kTOYsT0dYB0IEigBqGyfOWiYjSwCJZDYg1iVboBXkiSEtpsWah+aE1qXXzv/WjjcqYVArFWFf/HAikCioWJBAaEhBE6G7RO0QgjNqIRpkCEgbA8ZEsI5kKFBuA4UqJBfW4YFwmsoQAFAT67wAokg9oCSghBVyUTyGYxSsWBpycdyZ8LhSHiUNLWmmogPe9/Z9oLjLHresuteK95STqu/x7bX3uyevDP/6fUX3LsFJbQlU3+WbBGmmfOzpTdnyTqnPw3OOnJYbj9xm8hnAL0hYhRhUeP1VYKMuKnTsHJ8l/K5GQg6vYG9AOL1bStBw2A2BPfeLYHuivfNcg0yX+K1A9GD9oS9gBYUj5cJyTvS66e/oz1xJssMm4Jiy7oRL20k9rofWLYAjiZWVodJucwO6jyk2KJl3GCzoT8TAqexb50hVdsSDQAsegzNxHAOucKI10RDA8ukVrEbso6ILHh0Fg9Wu+3YbzWDqfkURcaCwRry41BHzsJW90Zlu1229Es3W4W4sZ5u0bD2JzPpKWf1kJBGlnz7VsbcLJMGTpXliFJXyHPnJLgrOA1VPOrHp7Q0LfqUZVPx2OKJk1Ymr+RnrEryJ62qWQM5Zeu2KYrUbdumpLxtlaPyoOKrJvbyzQw2YKW8cEGu5NSEFjMqPTVqjJ3HRGl6Mt2mi8SPztOn01ictU6fcXw0j89zG6Z5lAQCz5yM2F15Vw2izVMozxVxjw7wnCnPNe+DCV6dXW3Y+0KJzfx16weni9FKtLvhe1UZNa9eINffgBbv60ycnPxznXvX5iZVB6pfuXlX3D+t94AldnuCfWb0TGvcQ7YkJl+ZtWPH1dgR/RpOK2j9So22o+okqEcifcYdX634tqOp8dUaqD1RRFChTKEs05fq98yb5/GnZrqz3Ia7jaeOzPL5zBum0Q5k1jyQlTWGuEHzaVRTnsdDJ/jMS+q4szy1WXHK7KFV0HokKi7mdBh+7POWDAxq48KsMt4VaycZuhHvet8S7bu2ZAPmssci1+X7tvQzTAcg/PwWmQkgtyuvINz8VlkQwsgRshaEnd8uCwHIhYqZPUIAAgrL6c7unirfdIeKoXtn2n6CPcwgs74K/ftjFPgbMYldasgWSn385jSDTNa1WfQpwC4H4M9jifS3TVEMTwVBE1OBwioJJI2BVLFFwMKhFGg0FcGuuKPrHaKEeWIuKOZjAYLTDlC45YLkdAypYi+BRaxP0Dh9ALt2/3d0KNT12hmhYNQgX8CrNBhl5zVfeMk3aKdOkM1MvA9I2cMJTVm3wlc4IK17Tn60LbMBQ6mHy408D7suwUgpoOLSMY+7VWWGvqlUqZ9ZU5tQMGogX4BXaTBJJq8ZWAR/v0E7dYIGa6rYB6Qc0tly0CjVk8grKuiEuvvOzY+2xVJnQJdS6sHl0eiwY4EExuHDAiouuTV8466K9TNUQblfUf/oTgF24g16q910enr7urQfVSK9nHKNel92O/jsuTBT1xVZEeKwMST2xivBd6d7vTd2vcdhKqbbauj0akUv5DMz') format('woff2'),
url('iconfont.woff?t=1570845937392') format('woff'),
url('iconfont.ttf?t=1570845937392') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1570845937392#i-icon') format('svg'); /* iOS 4.1- */
}
.i-icon {
font-family: "i-icon" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.i-icon-record:before {
content: "\e61f";
}
.i-icon-refresh:before {
content: "\e7d1";
}
.i-icon-exit-full-screen:before {
content: "\e657";
}
.i-icon-notification:before {
content: "\e69d";
}
.i-icon-full-screen:before {
content: "\e743";
}
.i-icon-menu-unfold:before {
content: "\e68b";
}
.i-icon-menu-fold:before {
content: "\e600";
}
styles/font/iconfont.js 0 → 100644
View file @ 75dd27ad
!function(l){var c,t='<svg><symbol id="i-icon-record" viewBox="0 0 1024 1024"><path d="M512 93.85942719c-230.54965688 0-418.14057281 187.5893025-418.14057281 418.14057281 0 230.58029812 187.56027375 418.14057281 418.14057281 418.14057281S930.14057281 742.58029812 930.14057281 512C930.14057281 281.45034312 742.58029812 93.85942719 512 93.85942719zM512 870.14057281c-197.48958469 0-358.14057281-160.68001594-358.14057281-358.14057281 0-197.48958469 160.64937469-358.14057281 358.14057281-358.14057281 197.46055594 0 358.14057281 160.64937469 358.14057281 358.14057281C870.14057281 709.46055594 709.46055594 870.14057281 512 870.14057281z" ></path><path d="M512 362.00080625c-82.70985094 0-150.00080625 67.28934281-150.00080625 149.99919375s67.28934281 150.00080625 150.00080625 150.00080625 150.00080625-67.28934281 150.00080625-150.00080625S594.70985094 362.00080625 512 362.00080625z" ></path></symbol><symbol id="i-icon-refresh" viewBox="0 0 1024 1024"><path d="M924.06640625 494.43945312l-122.34375 122.34375001c-6.27539063 6.22265625-14.81835938 9.80859375-23.67773438 9.80859375s-17.296875-3.53320313-23.67773437-9.80859375l-122.23828125-122.34375c-13.02539063-13.078125-13.02539063-34.22460938 0-47.35546875 13.078125-13.078125 34.171875-13.078125 47.35546875 0l65.07421875 65.23242187L744.55859375 512c0-162-131.67773438-293.73046875-293.73046875-293.73046875C288.88085937 218.26953125 157.04492187 350 157.04492187 512s131.8359375 293.73046875 293.78320313 293.73046875c78.46875 0 152.24414063-30.53320313 207.82617188-86.00976563 12.97265625-13.078125 34.171875-13.078125 47.24999999 1e-8s13.02539063 34.171875 0 47.25c-68.08007813 68.18554688-158.67773438 105.6796875-255.07617187 105.67968749C251.9140625 872.59765625 90.125 710.86132813 90.125 512s161.7890625-360.703125 360.703125-360.703125c198.9140625 0 360.703125 161.7890625 360.703125 360.703125l0 0.31640625 65.1796875-65.23242188c13.078125-13.02539063 34.171875-13.02539063 47.35546875 1e-8C937.14453125 460.26757812 937.14453125 481.36132812 924.06640625 494.43945312z" ></path></symbol><symbol id="i-icon-exit-full-screen" viewBox="0 0 1024 1024"><path d="M121.9475 379.889375h224.5190625c18.6103125 0 33.75-15.1396875 33.75-33.75V121.619375c0-16.5684375-13.4315625-30-30-30s-30 13.4315625-30 30v198.27H121.9475c-16.5684375 0-30 13.4315625-30 30 0 16.5675 13.4315625 30 30 30zM121.9475 703.265h198.2690625v198.2690625c0 16.5684375 13.4315625 30 30 30s30-13.4315625 30-30V677.015c0-18.6103125-15.1396875-33.75-33.75-33.75H121.9475c-16.5684375 0-30 13.4315625-30 30s13.4315625 30 30 30zM673.7309375 931.439375c16.5684375 0 30-13.4315625 30-30V703.1703125H902c16.5684375 0 30-13.4315625 30-30s-13.4315625-30-30-30H677.4809375c-18.6103125 0-33.75 15.1396875-33.75 33.75v224.5190625c0 16.5684375 13.4315625 30 30 30zM677.4809375 380.4115625H902c16.5684375 0 30-13.4315625 30-30s-13.4315625-30-30-30H703.7309375V122.1415625c0-16.5684375-13.4315625-30-30-30s-30 13.4315625-30 30v224.52c0 18.609375 15.1396875 33.75 33.75 33.75z" fill="" ></path></symbol><symbol id="i-icon-notification" viewBox="0 0 1024 1024"><path d="M861.41176455 758.17647089l-63.52941182-111.17647089v-238.23529453c0-50.29411729-18.52941182-105.88235273-52.94117637-150.88235274-34.41176455-47.64705908-84.70588271-84.70588271-137.64705907-105.88235273 0 0-2.64705908 0-7.94117637-2.64705908v-2.64705821C596.70588271 99.05882364 559.64705908 62 512 62c-47.64705908 0-84.70588271 37.05882364-84.70588271 84.70588271v2.64705821c-2.64705908 0-5.29411729 2.64705908-7.94117637 2.64705908-55.58823545 18.52941182-103.23529453 55.58823545-140.29411728 103.23529453-34.41176455 47.64705908-52.94117637 100.58823545-52.94117637 153.52941094v238.23529453l-68.82352998 121.76470547c-10.58823545 15.88235273-10.58823545 37.05882364 0 52.94117724 10.58823545 15.88235273 29.11764727 26.47058818 47.64705908 26.47058819h169.41176455c13.23529453 66.17647089 71.47058818 113.82352911 140.29411816 113.8235291s127.05882363-47.64705908 140.29411728-113.8235291h169.41176456c29.11764727 0 55.58823545-23.82352911 55.58823544-52.94117637-5.29411729-13.23529453-10.58823545-26.47058818-18.52941181-37.05882363zM512 114.94117637c13.23529453 0 26.47058818 7.94117637 29.11764727 21.1764709H538.47058818h-2.64705907-5.29411729c-10.58823545-2.64705908-26.47058818-2.64705908-37.05882364 0h-5.29411728-2.64705908c2.64705908-10.58823545 13.23529453-21.1764709 26.47058818-21.17647091z m0 794.11764726c-37.05882364 0-71.47058818-23.82352911-82.05882363-58.23529453h166.76470634C583.47058818 882.58823545 549.05882364 909.05882363 512 909.05882363z m307.05882363-113.8235291H204.94117637l74.11764726-127.05882364c2.64705908-5.29411729 2.64705908-7.94117637 2.64705908-13.23529453v-243.52941181c0-84.70588271 66.17647089-174.70588271 156.17647002-206.47058819 5.29411729 0 26.47058818-7.94117637 50.29411816-10.58823544H538.47058818c23.82352911 2.64705908 47.64705908 10.58823545 52.94117637 13.23529453 87.35294092 31.76470547 153.52941182 121.76470547 153.52941181 206.47058818v243.52941182c0 5.29411729 0 10.58823545 2.64705909 13.23529365l68.8235291 121.76470635c0-2.64705908 2.64705908 0 2.64705908 2.64705908z" ></path></symbol><symbol id="i-icon-full-screen" viewBox="0 0 1024 1024"><path d="M898.71874973 933.875h-175.78124973a35.15625027 35.15625027 0 0 1 0-70.31249973h140.62500027v-140.62500027a35.15625027 35.15625027 0 0 1 70.31249973 0v175.78124973a35.15625027 35.15625027 0 0 1-35.15625027 35.15625027z m0-597.65624973a35.15625027 35.15625027 0 0 1-35.15624946-35.15625027V160.43749973h-175.78125054a35.15625027 35.15625027 0 0 1 0-70.31249973h210.9375a35.15625027 35.15625027 0 0 1 35.15625027 35.15625027v175.78124973a35.15625027 35.15625027 0 0 1-35.15625027 35.15625027zM336.21875027 160.43749973H160.43749973v175.78125054a35.15625027 35.15625027 0 0 1-70.31249973 0V125.28125027a35.15625027 35.15625027 0 0 1 35.15625027-35.15625027h210.9375a35.15625027 35.15625027 0 0 1 0 70.31249973zM125.28125027 687.78124973a35.15625027 35.15625027 0 0 1 35.15624946 35.15625027v140.62500027h140.62500027a35.15625027 35.15625027 0 0 1 0 70.31249973H125.28125027a35.15625027 35.15625027 0 0 1-35.15625027-35.15625027v-175.78124973a35.15625027 35.15625027 0 0 1 35.15625027-35.15625027z" ></path></symbol><symbol id="i-icon-menu-unfold" viewBox="0 0 1024 1024"><path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8z m-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56z m504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z m0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519c4.5-3.5 4.5-10.3 0-13.9L142.4 381.9c-5.8-4.6-14.4-0.5-14.4 6.9v246.3c0 7.4 8.5 11.6 14.4 7z" ></path></symbol><symbol id="i-icon-menu-fold" viewBox="0 0 1024 1024"><path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8z m-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56z m504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z m0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM115.4 518.9L271.7 642c5.8 4.6 14.4 0.5 14.4-6.9V388.9c0-7.4-8.5-11.5-14.4-6.9L115.4 505.1a8.74 8.74 0 0 0 0 13.8z" ></path></symbol></svg>',e=(c=document.getElementsByTagName("script"))[c.length-1].getAttribute("data-injectcss");if(e&&!l.__iconfont__svg__cssinject__){l.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(c){console&&console.log(c)}}!function(c){if(document.addEventListener)if(~["complete","loaded","interactive"].indexOf(document.readyState))setTimeout(c,0);else{var e=function(){document.removeEventListener("DOMContentLoaded",e,!1),c()};document.addEventListener("DOMContentLoaded",e,!1)}else document.attachEvent&&(n=c,o=l.document,i=!1,(a=function(){try{o.documentElement.doScroll("left")}catch(c){return void setTimeout(a,50)}t()})(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,t())});function t(){i||(i=!0,n())}var n,o,i,a}(function(){var c,e;(c=document.createElement("div")).innerHTML=t,t=null,(e=c.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",function(c,e){e.firstChild?function(c,e){e.parentNode.insertBefore(c,e)}(c,e.firstChild):e.appendChild(c)}(e,document.body))})}(window);
\ No newline at end of file
styles/font/iconfont.json 0 → 100644
View file @ 75dd27ad
{
"id": "1125611",
"name": "iview-admin-pro",
"font_family": "i-icon",
"css_prefix_text": "i-icon-",
"description": "",
"glyphs": [
{
"icon_id": "544041",
"name": "iconfont-radiobox",
"font_class": "record",
"unicode": "e61f",
"unicode_decimal": 58911
},
{
"icon_id": "587065",
"name": "refresh",
"font_class": "refresh",
"unicode": "e7d1",
"unicode_decimal": 59345
},
{
"icon_id": "1433808",
"name": "exit-full-screen",
"font_class": "exit-full-screen",
"unicode": "e657",
"unicode_decimal": 58967
},
{
"icon_id": "2552069",
"name": "notification",
"font_class": "notification",
"unicode": "e69d",
"unicode_decimal": 59037
},
{
"icon_id": "3556111",
"name": "full-screen",
"font_class": "full-screen",
"unicode": "e743",
"unicode_decimal": 59203
},
{
"icon_id": "6925933",
"name": "menu-unfold",
"font_class": "menu-unfold",
"unicode": "e68b",
"unicode_decimal": 59019
},
{
"icon_id": "7839858",
"name": "menu-fold",
"font_class": "menu-fold",
"unicode": "e600",
"unicode_decimal": 58880
}
]
}
styles/font/iconfont.svg 0 → 100644
View file @ 75dd27ad
<?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" >
<!--
2013-9-30: Created.
-->
<svg>
<metadata>
Created by iconfont
</metadata>
<defs>
<font id="i-icon" horiz-adv-x="1024" >
<font-face
font-family="i-icon"
font-weight="500"
font-stretch="normal"
units-per-em="1024"
ascent="896"
descent="-128"
/>
<missing-glyph />
<glyph glyph-name="record" unicode="&#58911;" d="M512 802.14057281c-230.54965688 0-418.14057281-187.5893025-418.14057281-418.14057281 0-230.58029812 187.56027375-418.14057281 418.14057281-418.14057281S930.14057281 153.41970188000005 930.14057281 384C930.14057281 614.5496568799999 742.58029812 802.14057281 512 802.14057281zM512 25.85942719000002c-197.48958469 0-358.14057281 160.68001594-358.14057281 358.14057281 0 197.48958469 160.64937469 358.14057281 358.14057281 358.14057281 197.46055594 0 358.14057281-160.64937469 358.14057281-358.14057281C870.14057281 186.53944406000005 709.46055594 25.85942719000002 512 25.85942719000002zM512 533.99919375c-82.70985094 0-150.00080625-67.28934281-150.00080625-149.99919375s67.28934281-150.00080625 150.00080625-150.00080625 150.00080625 67.28934281 150.00080625 150.00080625S594.70985094 533.99919375 512 533.99919375z" horiz-adv-x="1024" />
<glyph glyph-name="refresh" unicode="&#59345;" d="M924.06640625 401.56054688l-122.34375-122.34375001c-6.27539063-6.22265625-14.81835938-9.80859375-23.67773438-9.80859375s-17.296875 3.53320313-23.67773437 9.80859375l-122.23828125 122.34375c-13.02539063 13.078125-13.02539063 34.22460938 0 47.35546875 13.078125 13.078125 34.171875 13.078125 47.35546875 0l65.07421875-65.23242187L744.55859375 384c0 162-131.67773438 293.73046875-293.73046875 293.73046875C288.88085937 677.73046875 157.04492187 546 157.04492187 384s131.8359375-293.73046875 293.78320313-293.73046875c78.46875 0 152.24414063 30.53320313 207.82617188 86.00976563 12.97265625 13.078125 34.171875 13.078125 47.24999999-1e-8s13.02539063-34.171875 0-47.25c-68.08007813-68.18554688-158.67773438-105.6796875-255.07617187-105.67968749C251.9140625 23.40234375 90.125 185.13867187000005 90.125 384s161.7890625 360.703125 360.703125 360.703125c198.9140625 0 360.703125-161.7890625 360.703125-360.703125l0-0.31640625 65.1796875 65.23242188c13.078125 13.02539063 34.171875 13.02539063 47.35546875-1e-8C937.14453125 435.73242188 937.14453125 414.63867188 924.06640625 401.56054688z" horiz-adv-x="1024" />
<glyph glyph-name="exit-full-screen" unicode="&#58967;" d="M121.9475 516.110625h224.5190625c18.6103125 0 33.75 15.1396875 33.75 33.75V774.380625c0 16.5684375-13.4315625 30-30 30s-30-13.4315625-30-30v-198.27H121.9475c-16.5684375 0-30-13.4315625-30-30 0-16.5675 13.4315625-30 30-30zM121.9475 192.735h198.2690625v-198.2690625c0-16.5684375 13.4315625-30 30-30s30 13.4315625 30 30V218.985c0 18.6103125-15.1396875 33.75-33.75 33.75H121.9475c-16.5684375 0-30-13.4315625-30-30s13.4315625-30 30-30zM673.7309375-35.43937500000004c16.5684375 0 30 13.4315625 30 30V192.82968749999998H902c16.5684375 0 30 13.4315625 30 30s-13.4315625 30-30 30H677.4809375c-18.6103125 0-33.75-15.1396875-33.75-33.75v-224.5190625c0-16.5684375 13.4315625-30 30-30zM677.4809375 515.5884375H902c16.5684375 0 30 13.4315625 30 30s-13.4315625 30-30 30H703.7309375V773.8584375c0 16.5684375-13.4315625 30-30 30s-30-13.4315625-30-30v-224.52c0-18.609375 15.1396875-33.75 33.75-33.75z" horiz-adv-x="1024" />
<glyph glyph-name="notification" unicode="&#59037;" d="M861.41176455 137.82352910999998l-63.52941182 111.17647089v238.23529453c0 50.29411729-18.52941182 105.88235273-52.94117637 150.88235274-34.41176455 47.64705908-84.70588271 84.70588271-137.64705907 105.88235273 0 0-2.64705908 0-7.94117637 2.64705908v2.64705821C596.70588271 796.94117636 559.64705908 834 512 834c-47.64705908 0-84.70588271-37.05882364-84.70588271-84.70588271v-2.64705821c-2.64705908 0-5.29411729-2.64705908-7.94117637-2.64705908-55.58823545-18.52941182-103.23529453-55.58823545-140.29411728-103.23529453-34.41176455-47.64705908-52.94117637-100.58823545-52.94117637-153.52941094v-238.23529453l-68.82352998-121.76470547c-10.58823545-15.88235273-10.58823545-37.05882364 0-52.94117724 10.58823545-15.88235273 29.11764727-26.47058818 47.64705908-26.47058819h169.41176455c13.23529453-66.17647089 71.47058818-113.82352911 140.29411816-113.8235291s127.05882363 47.64705908 140.29411728 113.8235291h169.41176456c29.11764727 0 55.58823545 23.82352911 55.58823544 52.94117637-5.29411729 13.23529453-10.58823545 26.47058818-18.52941181 37.05882363zM512 781.05882363c13.23529453 0 26.47058818-7.94117637 29.11764727-21.1764709H538.47058818h-2.64705907-5.29411729c-10.58823545 2.64705908-26.47058818 2.64705908-37.05882364 0h-5.29411728-2.64705908c2.64705908 10.58823545 13.23529453 21.1764709 26.47058818 21.17647091z m0-794.11764726c-37.05882364 0-71.47058818 23.82352911-82.05882363 58.23529453h166.76470634C583.47058818 13.411764550000044 549.05882364-13.058823630000006 512-13.058823630000006z m307.05882363 113.8235291H204.94117637l74.11764726 127.05882364c2.64705908 5.29411729 2.64705908 7.94117637 2.64705908 13.23529453v243.52941181c0 84.70588271 66.17647089 174.70588271 156.17647002 206.47058819 5.29411729 0 26.47058818 7.94117637 50.29411816 10.58823544H538.47058818c23.82352911-2.64705908 47.64705908-10.58823545 52.94117637-13.23529453 87.35294092-31.76470547 153.52941182-121.76470547 153.52941181-206.47058818v-243.52941182c0-5.29411729 0-10.58823545 2.64705909-13.23529365l68.8235291-121.76470635c0 2.64705908 2.64705908 0 2.64705908-2.64705908z" horiz-adv-x="1024" />
<glyph glyph-name="full-screen" unicode="&#59203;" d="M898.71874973-37.875h-175.78124973a35.15625027 35.15625027 0 0 0 0 70.31249973h140.62500027v140.62500027a35.15625027 35.15625027 0 0 0 70.31249973 0v-175.78124973a35.15625027 35.15625027 0 0 0-35.15625027-35.15625027z m0 597.65624973a35.15625027 35.15625027 0 0 0-35.15624946 35.15625027V735.56250027h-175.78125054a35.15625027 35.15625027 0 0 0 0 70.31249973h210.9375a35.15625027 35.15625027 0 0 0 35.15625027-35.15625027v-175.78124973a35.15625027 35.15625027 0 0 0-35.15625027-35.15625027zM336.21875027 735.56250027H160.43749973v-175.78125054a35.15625027 35.15625027 0 0 0-70.31249973 0V770.71874973a35.15625027 35.15625027 0 0 0 35.15625027 35.15625027h210.9375a35.15625027 35.15625027 0 0 0 0-70.31249973zM125.28125027 208.21875027a35.15625027 35.15625027 0 0 0 35.15624946-35.15625027v-140.62500027h140.62500027a35.15625027 35.15625027 0 0 0 0-70.31249973H125.28125027a35.15625027 35.15625027 0 0 0-35.15625027 35.15625027v175.78124973a35.15625027 35.15625027 0 0 0 35.15625027 35.15625027z" horiz-adv-x="1024" />
<glyph glyph-name="menu-unfold" unicode="&#59019;" d="M408 454h480c4.4 0 8 3.6 8 8v56c0 4.4-3.6 8-8 8H408c-4.4 0-8-3.6-8-8v-56c0-4.4 3.6-8 8-8z m-8-204c0-4.4 3.6-8 8-8h480c4.4 0 8 3.6 8 8v56c0 4.4-3.6 8-8 8H408c-4.4 0-8-3.6-8-8v-56z m504 486H120c-4.4 0-8-3.6-8-8v-56c0-4.4 3.6-8 8-8h784c4.4 0 8 3.6 8 8v56c0 4.4-3.6 8-8 8z m0-632H120c-4.4 0-8-3.6-8-8v-56c0-4.4 3.6-8 8-8h784c4.4 0 8 3.6 8 8v56c0 4.4-3.6 8-8 8zM142.4 253.9L298.7 377c4.5 3.5 4.5 10.3 0 13.9L142.4 514.1c-5.8 4.6-14.4 0.5-14.4-6.9v-246.3c0-7.4 8.5-11.6 14.4-7z" horiz-adv-x="1024" />
<glyph glyph-name="menu-fold" unicode="&#58880;" d="M408 454h480c4.4 0 8 3.6 8 8v56c0 4.4-3.6 8-8 8H408c-4.4 0-8-3.6-8-8v-56c0-4.4 3.6-8 8-8z m-8-204c0-4.4 3.6-8 8-8h480c4.4 0 8 3.6 8 8v56c0 4.4-3.6 8-8 8H408c-4.4 0-8-3.6-8-8v-56z m504 486H120c-4.4 0-8-3.6-8-8v-56c0-4.4 3.6-8 8-8h784c4.4 0 8 3.6 8 8v56c0 4.4-3.6 8-8 8z m0-632H120c-4.4 0-8-3.6-8-8v-56c0-4.4 3.6-8 8-8h784c4.4 0 8 3.6 8 8v56c0 4.4-3.6 8-8 8zM115.4 377.1L271.7 254c5.8-4.6 14.4-0.5 14.4 6.9V507.1c0 7.4-8.5 11.5-14.4 6.9L115.4 390.9a8.74 8.74 0 0 1 0-13.8z" horiz-adv-x="1024" />
</font>
</defs></svg>
styles/index.less 0 → 100644
View file @ 75dd27ad
@import "./default/index.less";
@import "./font/iconfont.css";
@import "./setting.less";
@import "./common.less";
@import "./layout/index.less";
@import "./pages/account.less";
styles/layout/basic-layout/layout.less 0 → 100644
View file @ 75dd27ad
@menuSideWidthCollapse: 80px;
@menuHeaderHeight: 64px;
@headerTriggerMinPadding: 0 12px;
.dropdownMobile() {
width: 100%;
.ivu-select-dropdown{
left: 0 !important;
right: 0;
border-radius: 0;
margin: 0;
}
}
.i-layout{
&-header{
width: 100%;
background: #fff;
padding: 0;
box-shadow: 0 1px 4px rgba(0,21,41,.08);
transition: all @transition-time @ease-in-out;
z-index: 3;
display: block;
&-with-hide-sider{
transition: none;
}
&-with-menu{
display: flex;
}
&-color{
&-dark{
background: @menu-dark-title;
}
&-primary{
background: #2173dc;
background: -webkit-linear-gradient(to right, #1d42ab, #2173dc, #1e93ff);
background: -moz-linear-gradient(to right, #1d42ab, #2173dc, #1e93ff);
background: -o-linear-gradient(to right, #1d42ab, #2173dc, #1e93ff);
background: linear-gradient(to right, #1d42ab, #2173dc, #1e93ff);
.i-layout-header-search{
.placeholder(fade(#fff, 70%));
}
}
&-dark, &-primary{
color: #fff;
.i-layout-header-trigger:hover{
background: fade(#fff, 5%);
}
.ivu-menu{
background: transparent;
}
.ivu-menu-item{
border-width: 3px !important;
}
.ivu-menu-light.ivu-menu-horizontal .ivu-menu-item, .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu{
color: fade(#fff, 70%);
}
.ivu-menu-light.ivu-menu-horizontal .ivu-menu-item-active, .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu-active, .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item:hover, .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu:hover{
color: #fff;
border-bottom-color: #4fe3c1;
}
.i-layout-header-breadcrumb{
.ivu-breadcrumb-item-link{
color: fade(#fff, 70%);
}
a.ivu-breadcrumb-item-link:hover{
color: #fff;
}
& > span:last-child .ivu-breadcrumb-item-link{
color: #fff;
}
}
}
}
&-fix{
position: fixed;
top: 0;
right: 0;
left: @menuSideWidth;
z-index: 11;
&-collapse{
left: @menuSideWidthCollapse;
}
}
&-stick{
left: 0;
z-index: 14;
}
&-mobile{
left: 0;
display: block;
}
&-logo{
display: inline-block;
height: @menuHeaderHeight;
line-height: @menuHeaderHeight;
&-stick{
width: @menuSideWidth;
text-align: center;
}
img{
height: 80%;
vertical-align: middle;
}
}
&-trigger{
display: inline-block;
width: @menuHeaderHeight;
height: @menuHeaderHeight;
text-align: center;
cursor: pointer;
transition: all @transition-time @ease-in-out;
&:hover{
background: @trigger-background;
}
i{
font-size: 20px;
}
&-min{
width: auto;
padding: @headerTriggerMinPadding;
i{
font-size: 18px;
}
}
&-in{
padding: 0;
}
&-no-height{
height: auto;
}
&-nohover:hover{
background: transparent !important;
}
}
&-right{
height: @menuHeaderHeight;
float: right;
}
&-user{
&-name{
margin-left: 12px;
}
.ivu-dropdown-item{
font-size: 14px !important;
text-align: left;
i,span{
vertical-align: middle;
}
i{
margin-right: 6px;
}
}
&-mobile{
.dropdownMobile();
}
}
&-notice{
.ivu-notifications-rel{
padding: @headerTriggerMinPadding;
}
&-mobile{
.dropdownMobile();
}
}
&-i18n{
.ivu-dropdown-item{
text-align: left;
}
.ivu-notifications-rel{
padding: @headerTriggerMinPadding;
}
&-mobile{
.dropdownMobile();
}
}
&-search{
outline: none;
border: none;
background: transparent;
color: inherit;
.placeholder();
&-drop{
.dropdownMobile();
.ivu-select-dropdown{
line-height: normal;
}
&-main{
display: flex;
align-items: center;
margin: 0 5px;
.ivu-input-wrapper{
flex: auto;
}
&-cancel{
flex: auto;
width: 80px;
color: @text-color;
}
}
}
}
&-setting{
&-title{
margin: 12px 0;
color: @title-color;
font-size: @font-size-base;
font-weight: 500;
}
&-item{
display: flex;
align-items: center;
padding: 12px 0;
&-radio{
display: inline-block;
position: relative;
margin-right: 16px;
cursor: pointer;
&:after{
content: '';
display: block;
width: 6px;
height: 6px;
border-radius: 6px;
background: transparent;
margin: 0 auto;
}
&.on:after{
background: @success-color;
}
}
&-desc{
flex: 1 1;
font-size: @font-size-base;
}
&-action{
flex: 0 0 auto;
}
&-disabled &-desc{
opacity: 0.5;
}
}
}
&-breadcrumb{
display: inline-block;
.ivu-breadcrumb-item-link{
color: inherit;
}
& > span:last-child{
font-weight: normal;
}
.ivu-breadcrumb-item-separator{
vertical-align: middle;
}
}
}
&-sider{
min-height: 100vh;
background: #fff;
box-shadow: 2px 0 8px 0 rgba(29,35,41,.05);
position: relative;
z-index: 13;
&-fix{
position: fixed;
top: 0;
left: 0;
.i-layout-menu-side{
height: calc(~'100vh - 64px');
overflow-y: auto;
}
}
&-dark{
background: @menu-dark-title;
box-shadow: 2px 0 6px rgba(0,21,41,.35);
}
&-logo{
height: 63px;
line-height: 63px;
text-align: center;
border-bottom: 1px solid #f8f8f9;
overflow: hidden;
&-dark{
border-bottom: 1px solid @menu-dark-active-bg;
background: @menu-dark-title;
}
img{
height: 80%;
vertical-align: middle;
}
}
}
&-content{
&-fix-with-header{
padding-top: @menuHeaderHeight;
}
&-main{
margin: 24px;
}
&-with-tabs &-main{
margin-top: 0;
}
&-with-tabs-fix &-main{
margin-top: 44px;
.i-layout-page-header{
margin-top: 0;
}
}
}
&-inside{
min-height: 100vh;
transition: all @transition-time @ease-in-out;
&-fix-with-sider{
padding-left: @menuSideWidth;
&-collapse{
padding-left: @menuSideWidthCollapse;
}
}
&-mobile{
padding-left: 0;
}
&-with-hide-sider{
padding-left: 0;
}
}
&-drawer{
.ivu-drawer-body{
padding: 0;
overflow: visible;
}
.i-layout-menu-side{
height: calc(~'100vh - 64px');
overflow-y: auto;
}
&-dark{
.ivu-drawer-body{
background: @menu-dark-title;
}
}
}
&-tabs{
width: 100%;
background-color: @layout-body-background;
transition: all @transition-time @ease-in-out;
&-fix{
position: fixed;
z-index: 3;
}
&-main{
background: @layout-body-background;
padding: 6px 0;
margin: 0 12px 0 12px;
display: flex;
.ivu-tabs{
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
}
}
.ivu-tabs-nav-container{
margin-bottom: 0;
}
.ivu-tabs-bar{
border-bottom: none;
margin-bottom: 0;
}
.ivu-tabs-ink-bar{
display: none;
}
.ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab{
height: 32px;
background: #fff;
border-radius: 3px;
border: none;
margin-right: 6px;
color: #808695;
&:hover{
color: #515a6e;
}
}
.ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active{
height: 32px;
background: #fff;
color: @primary-color;
&:hover{
color: @primary-color;
}
}
.ivu-tabs-nav-scrollable{
padding: 0 32px;
}
.ivu-tabs-nav-prev, .ivu-tabs-nav-next{
width: 32px;
text-align: center;
i{
font-size: 16px;
}
}
.ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab .ivu-icon-ios-close{
width: 22px;
transform: translateZ(0);
margin-right: -6px;
}
&-title{
display: inline-block;
img, i{
display: inline-block;
height: 20px;
vertical-align: middle;
margin-right: 8px;
}
span{
display: inline-block;
vertical-align: middle;
}
}
&-close{
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
&-main{
width: 32px;
height: 32px;
line-height: 32px;
text-align: center;
background-color: #fff;
border-radius: 2px;
cursor: pointer;
i{
font-size: 16px;
}
}
}
}
&-page-header{
margin: -24px -24px 0px;
}
&-content-with-tabs:not(&-content-with-tabs-fix) &-page-header {
margin-top: 0;
}
}
.fade-quick-enter-active, .fade-quick-leave-active {
transition: opacity .2s;
}
.fade-quick-enter, .fade-quick-leave-to {
opacity: 0;
}
styles/layout/basic-layout/menu.less 0 → 100644
View file @ 75dd27ad
.i-layout-menu{
&-side{
position: static; // 菜单开启后，Dropdown 会被 overflow-y:hidden 隐藏掉，加此不受影响
&:after{
display: none !important;
}
&-title{
display: inline-block;
&-icon{
display: inline-block;
width: 24px;
height: 24px;
line-height: 21px;
vertical-align: middle;
text-align: center;
margin-right: 8px;
&-single{
margin-right: 0;
}
i{
margin-right: 0 !important;
}
img{
width: 100%;
height: 100%;
}
}
&-text{
&-selected{
color: @primary-color;
}
}
}
.ivu-menu-submenu-title, .ivu-menu-item{
height: 52px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ivu-menu-submenu-title-icon{
width: 14px;
height: 14px;
position: absolute;
top: 50%;
right: 8px;
float: none;
}
.ivu-dropdown-menu{
min-width: 160px;
}
.ivu-dropdown-item{
font-size: @font-size-base !important;
padding-right: 32px;
&-divided:before{
margin: 0 -32px 0 -16px;
}
}
.ivu-select-dropdown{
margin: 5px 0 5px 3px;
}
.ivu-tooltip, .ivu-tooltip-rel{
display: block;
text-align: center;
}
&.ivu-menu-dark .ivu-menu-item-active{
color: #fff !important;
}
&-arrow{
position: absolute;
top: 50%;
right: 16px;
transform: translate(0, -50%);
}
&-collapse{
&-top{
display: block;
&-item{
text-align: center;
}
}
&-item{
&-selected, &-selected:hover{
background-color: ~`colorPalette("@{primary-color}", 1)`;
color: @primary-color;
}
}
&-title{
text-align: center;
padding: 6px 0;
border-bottom: 1px solid @border-color-split;
}
&-dark{
.ivu-select-dropdown{
background-color: @menu-dark-title;
}
.ivu-dropdown-item{
color: @menu-dark-subsidiary-color;
transition: all @transition-time @ease-in-out;
&-divided{
border-color: @menu-dark-active-bg;
&:before{
background-color: @menu-dark-title;
}
}
}
.ivu-dropdown-item:hover{
background: transparent;
color: #fff;
}
.i-layout-menu-side-collapse-item{
&-selected, &-selected:hover{
background-color: @primary-color;
color: #fff;
}
}
}
&-dark &-title{
border-bottom: 1px solid @menu-dark-active-bg;
color: @menu-dark-subsidiary-color;
}
}
}
&-head{
display: inline-block;
overflow: hidden;
flex: 1;
.ivu-menu-horizontal.ivu-menu-light:after{
display: none;
}
.ivu-menu-horizontal{
display: inline-block;
vertical-align: middle;
height: auto; // 这里不能设置为 @menuHeaderHeight - 2px，因为在平板模式下，header 宽度不够，拿不到真实高度
line-height: @menuHeaderHeight - 6px;
}
&-logo{
display: inline-block;
height: @menuHeaderHeight;
text-align: center;
vertical-align: middle;
img{
height: 80%;
vertical-align: middle;
}
}
&-title{
display: inline-block;
&-icon{
display: inline-block;
width: 24px;
height: 24px;
line-height: 24px;
vertical-align: middle;
text-align: center;
&-single{
margin-right: 0;
}
i{
margin-right: 0 !important;
font-size: 16px;
}
img{
width: 100%;
height: 100%;
}
}
&-text{
vertical-align: middle;
margin-left: 6px;
}
}
.ivu-dropdown-rel{
padding: @headerTriggerMinPadding;
}
.ivu-dropdown-item{
text-align: left;
}
&-mobile{
vertical-align: baseline;
overflow: visible;
.ivu-dropdown-item{
font-size: 14px !important;
text-align: left;
i,span{
vertical-align: middle;
}
i{
margin-right: 6px;
}
}
&-drop{
.dropdownMobile();
}
}
}
}
styles/layout/index.less 0 → 100644
View file @ 75dd27ad
@import "basic-layout/layout.less";
@import "basic-layout/menu.less";
styles/pages/account.less 0 → 100644
View file @ 75dd27ad
.page-account{
display: flex;
flex-direction: column;
height: 100vh;
overflow: auto;
&-container{
flex: 1;
padding: 32px 0;
text-align: center;
width: 384px;
margin: 0 auto;
&-result{
width: 100%;
}
@media screen and (max-width: @screen-sm) {
width: 95%;
}
}
&-tabs{
.ivu-tabs-bar{
border-bottom: none;
}
.ivu-tabs-nav-scroll{
text-align: center;
}
.ivu-tabs-nav{
display: inline-block;
float: none;
}
}
&-top{
padding: 32px 0;
&-logo{
img{
height: 75px;
}
}
&-desc{
font-size: @font-size-base;
color: @subsidiary-color;
}
}
&-auto-login{
margin-bottom: 24px;
text-align: left;
a{
float: right;
}
}
&-other{
margin: 24px 0;
text-align: left;
span{
font-size: @font-size-base;
}
img{
width: 24px;
margin-left: 16px;
cursor: pointer;
vertical-align: middle;
opacity: 0.7;
transition: all @transition-time @ease-in-out;
&:hover{
opacity: 1;
}
}
}
.ivu-poptip, .ivu-poptip-rel{
display: block;
}
&-register{
float: right;
&-tip{
text-align: left;
&-low{
color: @error-color;
}
&-medium{
color: @warning-color;
}
&-strong{
color: @success-color;
}
&-title{
font-size: @font-size-base;
}
&-desc{
white-space: initial;
font-size: @font-size-base;
margin-top: 6px;
}
}
}
&-to-login{
text-align: center;
margin-top: 16px;
}
&-header{
text-align: right;
position: fixed;
top: 16px;
right: 24px;
}
}
@media (min-width: @screen-md-min) {
.page-account {
background-image: url('../../assets/svg/body.svg');
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
}
.page-account-container {
padding: 32px 0 24px 0;
}
}
styles/setting.less 0 → 100644
View file @ 75dd27ad
// 侧边菜单宽度，需与 setting.js 的 menuSideWidth 保持一致
@menuSideWidth: 256px;
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