wood/clash-and-dashboard
1
0
Fork 0
mirror of https://github.com/woodchen-ink/clash-and-dashboard.git synced 2025-07-18 14:01:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add: component <Proxy>

Browse Source
This commit is contained in:
Dreamacro 2018-09-22 17:53:48 +08:00
parent 2982026060
commit 0988ca8131
9 changed files with 142 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/assets/proxy/shadowsocks.svg Normal file
View File

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 51.2 (57519) - http://www.bohemiancoding.com/sketch -->
<title>icon-Shadowsocks</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="icon-Shadowsocks" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<circle id="Oval" fill="#1A7DC0" cx="20" cy="20" r="20"></circle>
<path d="M30,10 L26.1875946,26.8 C26.1875946,26.8 20.3101362,25.05 18.1656581,24.3 L25.1550681,15.3666667 L15.4652042,23.4 L9,21.1666667 L30,10 Z M18.2133132,26.2166667 L20.6596067,27.05 L18.133888,31 L18.2133132,26.2166667 Z" id="Shape" fill="#FFFFFF" fill-rule="nonzero"></path>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 830 B

30
src/assets/proxy/vmess.svg Normal file
View File

@ -0,0 +1,30 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 51.2 (57519) - http://www.bohemiancoding.com/sketch -->
<title>icon-Vmess</title>
<desc>Created with Sketch.</desc>
<defs>
<circle id="path-1" cx="20" cy="20" r="20"></circle>
</defs>
<g id="icon-Vmess" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<circle stroke="#DB0D82" cx="20" cy="20" r="19.5"></circle>
<rect id="Rectangle-4" fill="#DB0D82" fill-rule="nonzero" mask="url(#mask-2)" x="0" y="0" width="40" height="20"></rect>
<g id="三角形" mask="url(#mask-2)" fill="#FFFFFF" fill-rule="nonzero">
<g transform="translate(3.000000, 3.000000)">
<polygon id="Rectangle" points="4.36334582 12.7584642 34 17 0 17"></polygon>
<polygon id="Rectangle-2" points="11.5531686 5.57403581 33.7709345 16.9601915 7.96918628 9.05707955"></polygon>
<polygon id="Rectangle-3" points="17.0024557 0.139281027 33.7759553 16.9586254 14.5515616 2.57241522"></polygon>
</g>
</g>
<g id="三角形" mask="url(#mask-2)" fill="#DB0D82" fill-rule="nonzero">
<g transform="translate(20.000000, 28.500000) scale(1, -1) translate(-20.000000, -28.500000) translate(3.000000, 20.000000)">
<polygon id="Rectangle" points="4.36334582 12.7584642 34 17 0 17"></polygon>
<polygon id="Rectangle-2" points="11.5531686 5.57403581 33.7709345 16.9601915 7.96918628 9.05707955"></polygon>
<polygon id="Rectangle-3" points="17.0024557 0.139281027 33.7759553 16.9586254 14.5515616 2.57241522"></polygon>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

28
src/components/Proxy/index.tsx Normal file
View File

@ -0,0 +1,28 @@
import * as React from 'react'
import { BaseComponentProps, ProxyType } from '@models'
import classnames from 'classnames'
import './style.scss'
const shadowsocks = require('@assets/proxy/shadowsocks.svg')
const vmess = require('@assets/proxy/vmess.svg')
const iconMapping = {
[ProxyType.Shadowsocks]: shadowsocks,
[ProxyType.Shadowsocks]: shadowsocks,
[ProxyType.Vmess]: vmess
}
interface ProxyProps extends BaseComponentProps {
type: ProxyType
name: string
}
export const Proxy: React.SFC<ProxyProps> = props => {
const { type, name, className } = props
const icon = iconMapping[type]
return (
<div className={classnames('proxy', className)}>
<img className="proxy-icon" src={icon}/>
<span className="proxy-name">{ name }</span>
</div>
)
}

27
src/components/Proxy/style.scss Normal file
View File

@ -0,0 +1,27 @@
@import '~@styles/variables';
.proxy {
display: flex;
flex-direction: column;
align-items: center;
height: 80px;
width: 80px;
box-shadow: 0 0 20px rgba($color-primary-dark, 0.2);
border-radius: 4px;
}
.proxy-icon {
margin-top: 12px;
height: 40px;
width: 40px;
}
.proxy-name {
width: 80%;
margin-top: 6px;
color: $color-primary-dark;
font-size: 10px;
text-overflow: ellipsis;
overflow: hidden;
text-align: center;
}

1
src/components/index.ts
View File

@ -1,2 +1,3 @@
export * from './Header'
export * from './Icon'
export * from './Proxy'

22
src/containers/Proxies/index.tsx
View File

@ -1,12 +1,30 @@
import * as React from 'react'
import { Header, Icon } from '@components'
import { Header, Icon, Proxy } from '@components'
import { ProxyType } from '@models'
import './style.scss'
export default class Proxies extends React.Component<{}, {}> {
render () {
return <div className="container">
const proxies: { type: ProxyType, name: string }[] = [
{ type: ProxyType.Shadowsocks, name: 'shadowsocks' },
{ type: ProxyType.Vmess, name: 'vmess' }
]
return <div className="proxies-container">
<Header title="代理" >
<Icon type="plus" size={20} style={{ fontWeight: 'bold' }} />
</Header>
<ul className="proxies-list">
{
proxies.map(
proxy => (
<li>
<Proxy type={proxy.type} name={proxy.name} />
</li>
)
)
}
</ul>
</div>
}
}

14
src/containers/Proxies/style.scss
View File

@ -1 +1,15 @@
@import '~@styles/variables';
.proxies-container {
margin-top: 20px;
}
.proxies-list {
display: flex;
flex-wrap: wrap;
list-style: none;
li {
margin: 20px 15px 0 0;
}
}

7
src/models/Proxy.ts
View File

@ -1,6 +1,13 @@
/**
* proxy config interface
*/
export enum ProxyType {
Shadowsocks = 'Shadowsocks',
Vmess = 'Vmess',
Socks5 = 'Socks5'
}
export interface Proxy {
/**

4
src/views/App.scss
View File

@ -1 +1,5 @@
@import '~@styles/common';
.page-container {
width: 545px;
}