mirror of
https://github.com/YMFE/yapi.git
synced 2025-04-18 15:20:25 +08:00
chore: logoSvg component
This commit is contained in:
suxiaoxin
parent
39bc4501f3
commit
21d510a20a
@ -1,4 +1,3 @@
|
||||
import React from 'react';
|
||||
import moment from 'moment';
|
||||
import constants from './constants/variable'
|
||||
import Mock from 'mockjs'
|
||||
@ -76,39 +75,6 @@ exports.formatTime = (timestamp) => {
|
||||
return moment.unix(timestamp).format("YYYY-MM-DD HH:mm:ss")
|
||||
}
|
||||
|
||||
// 获取 YAPI LOGO 的 SVG
|
||||
// 参数 length 为 svg 的直径。
|
||||
exports.logoSVG = (length) => (<svg className="svg" width={length} height={length} viewBox="0 0 64 64" version="1.1">
|
||||
<title>Icon</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
|
||||
<stop stopColor="#FFFFFF" offset="0%"></stop>
|
||||
<stop stopColor="#F2F2F2" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<circle id="path-2" cx="31.9988602" cy="31.9988602" r="2.92886048"></circle>
|
||||
<filter x="-85.4%" y="-68.3%" width="270.7%" height="270.7%" filterUnits="objectBoundingBox" id="filter-3">
|
||||
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="1.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.159703351 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="首页" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
|
||||
<g id="大屏幕">
|
||||
<g id="Icon">
|
||||
<circle id="Oval-1" fill="url(#linearGradient-1)" cx="32" cy="32" r="32"></circle>
|
||||
<path d="M36.7078009,31.8054514 L36.7078009,51.7110548 C36.7078009,54.2844537 34.6258634,56.3695395 32.0579205,56.3695395 C29.4899777,56.3695395 27.4099998,54.0704461 27.4099998,51.7941246 L27.4099998,31.8061972 C27.4099998,29.528395 29.4909575,27.218453 32.0589004,27.230043 C34.6268432,27.241633 36.7078009,29.528395 36.7078009,31.8054514 Z" id="blue" fill="#2359F1" fillRule="nonzero"></path>
|
||||
<path d="M45.2586091,17.1026914 C45.2586091,17.1026914 45.5657231,34.0524383 45.2345291,37.01141 C44.9033351,39.9703817 43.1767091,41.6667796 40.6088126,41.6667796 C38.040916,41.6667796 35.9609757,39.3676862 35.9609757,37.0913646 L35.9609757,17.1034372 C35.9609757,14.825635 38.0418959,12.515693 40.6097924,12.527283 C43.177689,12.538873 45.2586091,14.825635 45.2586091,17.1026914 Z" id="green" fill="#57CF27" fillRule="nonzero" transform="translate(40.674608, 27.097010) rotate(60.000000) translate(-40.674608, -27.097010) "></path>
|
||||
<path d="M28.0410158,17.0465598 L28.0410158,36.9521632 C28.0410158,39.525562 25.9591158,41.6106479 23.3912193,41.6106479 C20.8233227,41.6106479 18.7433824,39.3115545 18.7433824,37.035233 L18.7433824,17.0473055 C18.7433824,14.7695034 20.8243026,12.4595614 23.3921991,12.4711513 C25.9600956,12.4827413 28.0410158,14.7695034 28.0410158,17.0465598 Z" id="red" fill="#FF561B" fillRule="nonzero" transform="translate(23.392199, 27.040878) rotate(-60.000000) translate(-23.392199, -27.040878) "></path>
|
||||
<g id="inner-round">
|
||||
<use fill="black" fillOpacity="1" filter="url(#filter-3)" xlinkHref="#path-2"></use>
|
||||
<use fill="#F7F7F7" fillRule="evenodd" xlinkHref="#path-2"></use>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>);
|
||||
|
||||
// 防抖函数，减少高频触发的函数执行的频率
|
||||
// 请在 constructor 里使用:
|
||||
// import { debounce } from '$/common';
|
||||
|
||||
@ -9,7 +9,7 @@ import { changeMenuItem } from '../../reducer/modules/menu'
|
||||
import { withRouter } from 'react-router';
|
||||
import Srch from './Search/Search'
|
||||
const { Header } = Layout;
|
||||
import { logoSVG } from '../../common.js';
|
||||
import LogoSVG from '../LogoSVG/index.js';
|
||||
import Breadcrumb from '../Breadcrumb/Breadcrumb.js'
|
||||
import GuideBtns from '../GuideBtns/GuideBtns.js';
|
||||
const plugin = require('client/plugin.js');
|
||||
@ -284,8 +284,7 @@ export default class HeaderCom extends Component {
|
||||
<div className="content g-row">
|
||||
<Link onClick={this.relieveLink} to="/group" className="logo">
|
||||
<div className="href">
|
||||
<span className="img">{logoSVG('32px')}</span>
|
||||
{/*<span className="logo-name">YApi</span>*/}
|
||||
<span className="img"><LogoSVG length="32px" /></span>
|
||||
</div>
|
||||
</Link>
|
||||
<Breadcrumb />
|
||||
|
||||
42
client/components/LogoSVG/index.js
Normal file
42
client/components/LogoSVG/index.js
Normal file
@ -0,0 +1,42 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
const LogoSVG = (props) => {
|
||||
let length = props.length;
|
||||
return <svg className="svg" width={length} height={length} viewBox="0 0 64 64" version="1.1">
|
||||
<title>Icon</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
|
||||
<stop stopColor="#FFFFFF" offset="0%"></stop>
|
||||
<stop stopColor="#F2F2F2" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<circle id="path-2" cx="31.9988602" cy="31.9988602" r="2.92886048"></circle>
|
||||
<filter x="-85.4%" y="-68.3%" width="270.7%" height="270.7%" filterUnits="objectBoundingBox" id="filter-3">
|
||||
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="1.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.159703351 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="首页" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
|
||||
<g id="大屏幕">
|
||||
<g id="Icon">
|
||||
<circle id="Oval-1" fill="url(#linearGradient-1)" cx="32" cy="32" r="32"></circle>
|
||||
<path d="M36.7078009,31.8054514 L36.7078009,51.7110548 C36.7078009,54.2844537 34.6258634,56.3695395 32.0579205,56.3695395 C29.4899777,56.3695395 27.4099998,54.0704461 27.4099998,51.7941246 L27.4099998,31.8061972 C27.4099998,29.528395 29.4909575,27.218453 32.0589004,27.230043 C34.6268432,27.241633 36.7078009,29.528395 36.7078009,31.8054514 Z" id="blue" fill="#2359F1" fillRule="nonzero"></path>
|
||||
<path d="M45.2586091,17.1026914 C45.2586091,17.1026914 45.5657231,34.0524383 45.2345291,37.01141 C44.9033351,39.9703817 43.1767091,41.6667796 40.6088126,41.6667796 C38.040916,41.6667796 35.9609757,39.3676862 35.9609757,37.0913646 L35.9609757,17.1034372 C35.9609757,14.825635 38.0418959,12.515693 40.6097924,12.527283 C43.177689,12.538873 45.2586091,14.825635 45.2586091,17.1026914 Z" id="green" fill="#57CF27" fillRule="nonzero" transform="translate(40.674608, 27.097010) rotate(60.000000) translate(-40.674608, -27.097010) "></path>
|
||||
<path d="M28.0410158,17.0465598 L28.0410158,36.9521632 C28.0410158,39.525562 25.9591158,41.6106479 23.3912193,41.6106479 C20.8233227,41.6106479 18.7433824,39.3115545 18.7433824,37.035233 L18.7433824,17.0473055 C18.7433824,14.7695034 20.8243026,12.4595614 23.3921991,12.4711513 C25.9600956,12.4827413 28.0410158,14.7695034 28.0410158,17.0465598 Z" id="red" fill="#FF561B" fillRule="nonzero" transform="translate(23.392199, 27.040878) rotate(-60.000000) translate(-23.392199, -27.040878) "></path>
|
||||
<g id="inner-round">
|
||||
<use fill="black" fillOpacity="1" filter="url(#filter-3)" xlinkHref="#path-2"></use>
|
||||
<use fill="#F7F7F7" fillRule="evenodd" xlinkHref="#path-2"></use>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
}
|
||||
|
||||
LogoSVG.propTypes = {
|
||||
length: PropTypes.any
|
||||
}
|
||||
|
||||
export default LogoSVG;
|
||||
@ -5,7 +5,8 @@ import { Link } from 'react-router-dom';
|
||||
import { Row, Col, Button, Icon, Card } from 'antd';
|
||||
import PropTypes from "prop-types";
|
||||
import { withRouter } from 'react-router';
|
||||
import { logoSVG, getImgPath } from '../../common.js';
|
||||
import { getImgPath } from '../../common.js';
|
||||
import LogoSVG from '../../components/LogoSVG/index.js'
|
||||
import { changeMenuItem } from '../../reducer/modules/menu'
|
||||
const plugin = require('client/plugin.js');
|
||||
|
||||
@ -32,7 +33,7 @@ const HomeGuest = () => (
|
||||
<Col lg={9} xs={24}>
|
||||
<div className="home-des">
|
||||
<div className="logo">
|
||||
{logoSVG('72px')}
|
||||
<LogoSVG length='72px' />
|
||||
<span className="name">YAPI</span>
|
||||
</div>
|
||||
<div className="detail">高效、易用、功能强大的API管理平台<br /><span className="desc">旨在为开发、产品、测试人员提供更优雅的接口管理服务</span></div>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React, { PureComponent as Component } from 'react';
|
||||
import Login from './LoginWrap';
|
||||
import { Row, Col, Card } from 'antd';
|
||||
import { logoSVG } from '../../common.js';
|
||||
import LogoSVG from '../../components/LogoSVG/index.js';
|
||||
|
||||
class LoginContainer extends Component {
|
||||
render() {
|
||||
@ -19,7 +19,7 @@ class LoginContainer extends Component {
|
||||
<Col xs={20} sm={16} md={12} lg={8} className="container-login">
|
||||
<Card className="card-login">
|
||||
<h2 className="login-title">YAPI</h2>
|
||||
<div className="login-logo">{logoSVG('100px')}</div>
|
||||
<div className="login-logo"><LogoSVG length='100px' /></div>
|
||||
<Login/>
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user