mirror of
https://github.com/woodchen-ink/clash-and-dashboard.git
synced 2025-07-18 14:01:56 +08:00
Style: cleanup code
This commit is contained in:
Dreamacro
parent
9246686393
commit
7dc38778a4
2
.github/workflows/node.yml
vendored
2
.github/workflows/node.yml
vendored
@ -23,7 +23,7 @@ jobs:
|
||||
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
|
||||
restore-keys: |
|
||||
${{ runner.os }}-yarn-
|
||||
- name: Install package
|
||||
- name: Install package and build
|
||||
run: |
|
||||
yarn
|
||||
yarn build
|
||||
|
||||
40
package.json
40
package.json
@ -26,48 +26,48 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/lodash-es": "^4.17.4",
|
||||
"@types/node": "^14.14.41",
|
||||
"@types/react": "^17.0.3",
|
||||
"@types/react-dom": "^17.0.3",
|
||||
"@types/node": "^15.0.2",
|
||||
"@types/react": "^17.0.5",
|
||||
"@types/react-dom": "^17.0.4",
|
||||
"@types/react-router-dom": "^5.1.7",
|
||||
"@types/react-table": "^7.0.29",
|
||||
"@types/react-table": "^7.7.0",
|
||||
"@types/react-virtualized-auto-sizer": "^1.0.0",
|
||||
"@types/react-window": "^1.8.2",
|
||||
"@typescript-eslint/eslint-plugin": "^4.22.0",
|
||||
"@typescript-eslint/parser": "^4.22.0",
|
||||
"@vitejs/plugin-react-refresh": "^1.3.2",
|
||||
"@types/react-window": "^1.8.3",
|
||||
"@typescript-eslint/eslint-plugin": "^4.23.0",
|
||||
"@typescript-eslint/parser": "^4.23.0",
|
||||
"@vitejs/plugin-react-refresh": "^1.3.3",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"eslint": "^7.24.0",
|
||||
"eslint": "^7.26.0",
|
||||
"eslint-config-react-app": "^6.0.0",
|
||||
"eslint-plugin-flowtype": "^5.7.1",
|
||||
"eslint-plugin-flowtype": "^5.7.2",
|
||||
"eslint-plugin-import": "^2.22.1",
|
||||
"eslint-plugin-jsx-a11y": "^6.4.1",
|
||||
"eslint-plugin-react": "^7.23.2",
|
||||
"eslint-plugin-react-hooks": "^4.2.0",
|
||||
"sass": "^1.32.11",
|
||||
"tailwindcss": "^2.1.1",
|
||||
"type-fest": "^1.0.2",
|
||||
"sass": "^1.32.12",
|
||||
"type-fest": "^1.1.1",
|
||||
"typescript": "^4.2.4",
|
||||
"vite": "^2.2.1",
|
||||
"vite-plugin-windicss": "^0.15.2",
|
||||
"vite-tsconfig-paths": "^3.3.8"
|
||||
"vite": "^2.3.0",
|
||||
"vite-plugin-windicss": "^0.15.10",
|
||||
"vite-tsconfig-paths": "^3.3.10",
|
||||
"windicss": "^2.5.14"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.21.1",
|
||||
"classnames": "^2.3.1",
|
||||
"dayjs": "^1.10.4",
|
||||
"eventemitter3": "^4.0.7",
|
||||
"immer": "^9.0.1",
|
||||
"immer": "^9.0.2",
|
||||
"lodash-es": "^4.17.21",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-router-dom": "^5.2.0",
|
||||
"react-table": "^7.6.3",
|
||||
"react-use": "^17.2.3",
|
||||
"react-table": "^7.7.0",
|
||||
"react-use": "^17.2.4",
|
||||
"react-virtualized-auto-sizer": "^1.0.5",
|
||||
"react-window": "^1.8.6",
|
||||
"recoil": "^0.2.0",
|
||||
"swr": "^0.5.5",
|
||||
"swr": "^0.5.6",
|
||||
"use-immer": "^0.5.1"
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,7 +12,7 @@ export function Header (props: HeaderProps) {
|
||||
const { title, children, className, style } = props
|
||||
|
||||
return <header className={classnames('header', className)} style={style}>
|
||||
<h1>{title}</h1>
|
||||
<div className="operations">{children}</div>
|
||||
<h1 className="md:text-xl">{title}</h1>
|
||||
<div className="flex flex-auto items-center justify-end">{children}</div>
|
||||
</header>
|
||||
}
|
||||
|
||||
@ -16,16 +16,3 @@
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.operations {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.header > h1 {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -28,7 +28,7 @@ export function Input (props: InputProps) {
|
||||
onChange = noop,
|
||||
onBlur = noop
|
||||
} = props
|
||||
const classname = classnames('input', `input-align-${align}`, { 'input-inside': inside }, className)
|
||||
const classname = classnames('input', `text-${align}`, { 'focus:shadow-none': inside }, className)
|
||||
|
||||
return (
|
||||
<input
|
||||
|
||||
@ -19,21 +19,3 @@ $height: 30px;
|
||||
box-shadow: 0 2px 5px rgba($color: $color-primary, $alpha: 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.input-align-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.input-align-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.input-align-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.input-inside {
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -23,7 +23,7 @@ export function Switch (props: SwitchProps) {
|
||||
|
||||
return (
|
||||
<div className={classname} onClick={handleClick}>
|
||||
<Icon className="switch-icon" type="check" size={20} style={{ fontWeight: 'bold' }} />
|
||||
<Icon className="switch-icon font-bold" type="check" size={20} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -45,7 +45,7 @@ export function Tags (props: TagsProps) {
|
||||
})
|
||||
|
||||
return (
|
||||
<div className={classnames('tags-container', className)} style={{ height: rowHeight }}>
|
||||
<div className={classnames('flex items-start overflow-y-hidden', className)} style={{ height: rowHeight }}>
|
||||
<ul ref={ulRef} className={classnames('tags', { expand })}>
|
||||
{ tags }
|
||||
</ul>
|
||||
|
||||
@ -1,11 +1,5 @@
|
||||
$height: 22px;
|
||||
|
||||
.tags-container {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.tags {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
|
||||
@ -240,7 +240,7 @@ export default function Connections() {
|
||||
</Header>
|
||||
{ devices.length > 1 && <Devices devices={devices} selected={device} onChange={handleDeviceSelected} /> }
|
||||
<Card className="connections-card">
|
||||
<div {...getTableProps()} className="connections" ref={tableRef}>
|
||||
<div {...getTableProps()} className="flex flex-col w-full flex-1 overflow-auto" ref={tableRef}>
|
||||
<div {...headerGroup.getHeaderGroupProps()} className="connections-header">
|
||||
{
|
||||
headerGroup.headers.map((column, idx) => {
|
||||
@ -271,7 +271,7 @@ export default function Connections() {
|
||||
}
|
||||
</div>
|
||||
|
||||
<div {...getTableBodyProps()} className="connections-body">
|
||||
<div {...getTableBodyProps()} className="flex-1">
|
||||
{
|
||||
rows.map(row => {
|
||||
prepareRow(row)
|
||||
@ -281,7 +281,7 @@ export default function Connections() {
|
||||
row.cells.map(cell => {
|
||||
const classname = classnames(
|
||||
'connections-block',
|
||||
{ center: shouldCenter.has(cell.column.id), completed: row.original.completed },
|
||||
{ 'text-center': shouldCenter.has(cell.column.id), completed: row.original.completed },
|
||||
{ fixed: scrollX > 0 && cell.column.id === Columns.Host }
|
||||
)
|
||||
return (
|
||||
|
||||
@ -6,19 +6,6 @@
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
|
||||
.connections {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.connections-body {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
.connections-th {
|
||||
$height: 30px;
|
||||
|
||||
@ -84,10 +71,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.connetions-item {
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.connections-block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -99,10 +82,6 @@
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
&.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.completed {
|
||||
background-color: darken($color-gray-light, 3%);
|
||||
color: rgba($color-primary-darken, 50%);
|
||||
|
||||
@ -42,7 +42,7 @@ export default function Logs () {
|
||||
return (
|
||||
<div className="page">
|
||||
<Header title={ t('title') } />
|
||||
<Card className="logs-card">
|
||||
<Card className="flex flex-col flex-1 mt-3">
|
||||
<ul className="logs-panel" ref={listRef}>
|
||||
{
|
||||
logs.map(
|
||||
|
||||
@ -1,10 +1,3 @@
|
||||
.logs-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.logs-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@ -51,7 +51,7 @@ function ProxyGroups () {
|
||||
</Checkbox>
|
||||
</Header>
|
||||
<Card className="proxies-group-card">
|
||||
<ul className="proxies-group-list">
|
||||
<ul className="list-none">
|
||||
{
|
||||
list.map(p => (
|
||||
<li className="proxies-group-item" key={p.name}>
|
||||
@ -76,10 +76,10 @@ function ProxyProviders () {
|
||||
providers.length !== 0 &&
|
||||
<div className="proxies-container">
|
||||
<Header title={t('providerTitle')} />
|
||||
<ul className="proxies-providers-list">
|
||||
<ul className="list-none">
|
||||
{
|
||||
providers.map(p => (
|
||||
<li className="proxies-providers-item" key={p.name}>
|
||||
<li className="my-5" key={p.name}>
|
||||
<Provider provider={p} />
|
||||
</li>
|
||||
))
|
||||
@ -119,8 +119,8 @@ function Proxies () {
|
||||
sortedProxies.length !== 0 &&
|
||||
<div className="proxies-container">
|
||||
<Header title={t('title')}>
|
||||
<Icon className="proxies-action-icon" type={sortMap[sort]} onClick={handleSort} size={20} />
|
||||
<Icon className="proxies-action-icon" type="speed" size={20} />
|
||||
<Icon className="ml-3" type={sortMap[sort]} onClick={handleSort} size={20} />
|
||||
<Icon className="ml-3" type="speed" size={20} />
|
||||
<span className="proxies-speed-test" onClick={handleNotitySpeedTest}>{t('speedTestText')}</span>
|
||||
</Header>
|
||||
<ul className="proxies-list">
|
||||
|
||||
@ -46,18 +46,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
.proxies-group-list {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.proxies-group-card {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.proxies-container .proxies-action-icon {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.proxies-speed-test {
|
||||
line-height: 32px;
|
||||
margin: 0 2px 0 6px;
|
||||
@ -66,14 +58,6 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.proxies-providers-item {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.proxies-providers-list {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.proxies-group-card {
|
||||
margin: 12px 0;
|
||||
|
||||
@ -42,7 +42,7 @@ export default function Rules () {
|
||||
const rule = rules[index]
|
||||
return (
|
||||
<li className="rule-item" style={style}>
|
||||
<div className="rule-item-row flex">
|
||||
<div className="py-1 flex">
|
||||
<div className="rule-type w-40 text-center">{ rule.type }</div>
|
||||
<div className="payload flex-1 text-center">{ rule.payload }</div>
|
||||
<div className="rule-proxy w-40 text-center">{ rule.proxy }</div>
|
||||
|
||||
@ -8,10 +8,6 @@
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.rules {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.rule-item {
|
||||
@ -23,10 +19,6 @@
|
||||
user-select: none;
|
||||
border-bottom: 1px solid rgba($color: $color-primary-lightly, $alpha: 0.5);
|
||||
|
||||
.rule-item-row {
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.drag-handler {
|
||||
cursor: row-resize;
|
||||
margin: 0 10px;
|
||||
@ -81,27 +73,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rule-proxy-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
|
||||
.label {
|
||||
margin-right: 5px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
padding: 0 8px;
|
||||
font-size: 10px;
|
||||
border-radius: 10px;
|
||||
color: $color-white;
|
||||
background: $color-gray-dark;
|
||||
}
|
||||
|
||||
.value {
|
||||
line-height: 20px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
@ -178,7 +178,7 @@ export default function Settings () {
|
||||
<div className="w-1/2 px-8"></div>
|
||||
</div>
|
||||
</Card>
|
||||
<Card className="clash-version" style={{ display: 'none' }}>
|
||||
<Card className="clash-version hidden">
|
||||
<span className="check-icon">
|
||||
<Icon type="check" size={20} />
|
||||
</span>
|
||||
|
||||
@ -1 +0,0 @@
|
||||
module.exports = {}
|
||||
3
windi.config.ts
Normal file
3
windi.config.ts
Normal file
@ -0,0 +1,3 @@
|
||||
import { defineConfig } from 'windicss/helpers'
|
||||
|
||||
export default defineConfig({})
|
||||
Loading…
x
Reference in New Issue
Block a user