From 7d2f8d26b8b6f5ccdb8e4f2a5658a0f21e1a9a23 Mon Sep 17 00:00:00 2001 From: Dreamacro <8615343+Dreamacro@users.noreply.github.com> Date: Sun, 23 May 2021 22:02:10 +0800 Subject: [PATCH] Chore: windicss migration --- package.json | 30 +- src/components/Checkbox/style.scss | 4 +- src/components/Switch/style.scss | 6 +- src/components/Tags/index.tsx | 4 +- src/components/Tags/style.scss | 15 +- src/containers/Connections/index.tsx | 4 +- src/containers/Connections/style.scss | 9 +- .../ExternalControllerDrawer/index.tsx | 12 +- .../ExternalControllerDrawer/style.scss | 19 - src/containers/Logs/index.tsx | 4 +- src/containers/Logs/style.scss | 10 - .../Proxies/components/Group/style.scss | 4 - src/containers/Proxies/index.tsx | 2 +- src/containers/Proxies/style.scss | 8 - src/containers/Rules/index.tsx | 2 +- src/containers/Rules/style.scss | 12 - src/containers/Settings/index.tsx | 18 +- src/containers/Settings/style.scss | 8 - src/global.d.ts | 66 ---- vite.config.ts | 2 +- yarn.lock | 369 ++++++++++-------- 21 files changed, 249 insertions(+), 359 deletions(-) delete mode 100644 src/global.d.ts diff --git a/package.json b/package.json index 815b399..7f57fcb 100644 --- a/package.json +++ b/package.json @@ -26,31 +26,31 @@ }, "devDependencies": { "@types/lodash-es": "^4.17.4", - "@types/node": "^15.0.2", - "@types/react": "^17.0.5", - "@types/react-dom": "^17.0.4", + "@types/node": "^15.6.0", + "@types/react": "^17.0.6", + "@types/react-dom": "^17.0.5", "@types/react-router-dom": "^5.1.7", - "@types/react-table": "^7.7.0", + "@types/react-table": "^7.7.1", "@types/react-virtualized-auto-sizer": "^1.0.0", "@types/react-window": "^1.8.3", - "@typescript-eslint/eslint-plugin": "^4.23.0", - "@typescript-eslint/parser": "^4.23.0", + "@typescript-eslint/eslint-plugin": "^4.24.0", + "@typescript-eslint/parser": "^4.24.0", "@vitejs/plugin-react-refresh": "^1.3.3", "babel-eslint": "^10.1.0", - "eslint": "^7.26.0", + "eslint": "^7.27.0", "eslint-config-react-app": "^6.0.0", "eslint-plugin-flowtype": "^5.7.2", - "eslint-plugin-import": "^2.22.1", + "eslint-plugin-import": "^2.23.3", "eslint-plugin-jsx-a11y": "^6.4.1", "eslint-plugin-react": "^7.23.2", "eslint-plugin-react-hooks": "^4.2.0", - "sass": "^1.32.12", - "type-fest": "^1.1.1", + "sass": "^1.34.0", + "type-fest": "^1.1.3", "typescript": "^4.2.4", - "vite": "^2.3.0", + "vite": "^2.3.3", "vite-plugin-windicss": "^0.15.10", - "vite-tsconfig-paths": "^3.3.10", - "windicss": "^2.5.14" + "vite-tsconfig-paths": "^3.3.12", + "windicss": "^3.0.9" }, "dependencies": { "axios": "^0.21.1", @@ -66,8 +66,8 @@ "react-use": "^17.2.4", "react-virtualized-auto-sizer": "^1.0.5", "react-window": "^1.8.6", - "recoil": "^0.2.0", + "recoil": "^0.3.1", "swr": "^0.5.6", - "use-immer": "^0.5.1" + "use-immer": "^0.5.2" } } diff --git a/src/components/Checkbox/style.scss b/src/components/Checkbox/style.scss index c0e4a09..941dc70 100644 --- a/src/components/Checkbox/style.scss +++ b/src/components/Checkbox/style.scss @@ -18,7 +18,7 @@ $padding: 26px; height: $length; border-radius: 3px; transition: background-color 0.3s ease; - transform: translateY(-$length / 2); + transform: translateY(math.div(-$length, 2)); background-color: $color-white; border: 1px solid $color-primary-lightly; } @@ -33,7 +33,7 @@ $padding: 26px; left: 0; top: 50%; line-height: $length; - transform: translateY(-$length / 2) scale(0.6); + transform: translateY(math.div(-$length, 2)) scale(0.6); text-shadow: none; font-weight: bold; diff --git a/src/components/Switch/style.scss b/src/components/Switch/style.scss index ddf869d..f52fbec 100644 --- a/src/components/Switch/style.scss +++ b/src/components/Switch/style.scss @@ -7,7 +7,7 @@ $width: 32px; display: inline-block; width: $width; height: $height; - border-radius: $height / 2; + border-radius: math.div($height, 2); background-color: $color-gray; transition: background-color 0.3s ease; position: relative; @@ -38,10 +38,10 @@ $width: 32px; &::after { content: ''; position: absolute; - top: ($switch-radius - $height) / -2; + top: math.div($switch-radius - $height, -2); height: $switch-radius; width: $switch-radius; - border-radius: $switch-radius / 2; + border-radius: math.div($switch-radius, 2); background-color: $color-white; box-shadow: 0 0 8px rgba($color-primary-dark, 0.4); transition: transform 0.3s ease; diff --git a/src/components/Tags/index.tsx b/src/components/Tags/index.tsx index 4f4670a..2e4d9b1 100644 --- a/src/components/Tags/index.tsx +++ b/src/components/Tags/index.tsx @@ -36,7 +36,7 @@ export function Tags (props: TagsProps) { const tags = data .map(t => { - const tagClass = classnames({ 'tags-selected': select === t, 'can-click': canClick, error: errSet?.has(t) }) + const tagClass = classnames({ 'tags-selected': select === t, 'cursor-pointer': canClick, error: errSet?.has(t) }) return (
  • handleClick(t)}> { t } @@ -51,7 +51,7 @@ export function Tags (props: TagsProps) { { showExtend && - { expand ? t('collapseText') : t('expandText') } + { expand ? t('collapseText') : t('expandText') } } ) diff --git a/src/components/Tags/style.scss b/src/components/Tags/style.scss index bff1b3e..67c2c0e 100644 --- a/src/components/Tags/style.scss +++ b/src/components/Tags/style.scss @@ -16,15 +16,10 @@ $height: 22px; border: 1px solid $color-primary-dark; color: $color-primary-darken; height: $height; - border-radius: $height / 2; + border-radius: math.div($height, 2); padding: 0 6px; margin: 3px 4px; font-size: 10px; - cursor: default; - } - - li.can-click { - cursor: pointer; } li.error { @@ -45,11 +40,3 @@ $height: 22px; color: #fff; } } - -.tags-expand { - height: 30px; - line-height: 30px; - padding: 0 20px; - user-select: none; - cursor: pointer; -} diff --git a/src/containers/Connections/index.tsx b/src/containers/Connections/index.tsx index 2658989..030e788 100644 --- a/src/containers/Connections/index.tsx +++ b/src/containers/Connections/index.tsx @@ -232,7 +232,7 @@ export default function Connections() { return (
    - + {`(${t('total.text')}: ${t('total.upload')} ${formatTraffic(traffic.uploadTotal)} ${t('total.download')} ${formatTraffic(traffic.downloadTotal)})`} {t('keepClosed')} @@ -240,7 +240,7 @@ export default function Connections() {
    { devices.length > 1 && } -
    +
    { headerGroup.headers.map((column, idx) => { diff --git a/src/containers/Connections/style.scss b/src/containers/Connections/style.scss index ba996a0..3725d3e 100644 --- a/src/containers/Connections/style.scss +++ b/src/containers/Connections/style.scss @@ -38,7 +38,7 @@ position: absolute; opacity: 0; - right: $width / -2; + right: math.div($width, 2); top: $padding; bottom: $padding; width: $width; @@ -52,7 +52,7 @@ content: ''; display: block; position: absolute; - left: $width / 2; + left: math.div($width, 2); transform: translateX(-2px); width: 2px; height: 100%; @@ -109,9 +109,4 @@ color: $color-red; text-shadow: 0 0 6px rgba($color: $color-primary, $alpha: 0.2); } - - &.total { - flex: 1; - cursor: unset; - } } diff --git a/src/containers/ExternalControllerDrawer/index.tsx b/src/containers/ExternalControllerDrawer/index.tsx index a647970..5f4c732 100644 --- a/src/containers/ExternalControllerDrawer/index.tsx +++ b/src/containers/ExternalControllerDrawer/index.tsx @@ -40,9 +40,9 @@ export default function ExternalController () {

    {t('externalControllerSetting.note')}

    - {t('externalControllerSetting.host')} + {t('externalControllerSetting.host')}
    -
    {t('externalControllerSetting.port')}
    +
    {t('externalControllerSetting.port')}
    -
    {t('externalControllerSetting.secret')}
    +
    {t('externalControllerSetting.secret')}
    .alert { display: none; diff --git a/src/containers/Logs/index.tsx b/src/containers/Logs/index.tsx index 4e506cc..9a4a8f3 100644 --- a/src/containers/Logs/index.tsx +++ b/src/containers/Logs/index.tsx @@ -47,8 +47,8 @@ export default function Logs () { { logs.map( (log, index) => ( -
  • - { dayjs(log.time).format('YYYY-MM-DD HH:mm:ss') } +
  • + { dayjs(log.time).format('YYYY-MM-DD HH:mm:ss') } [{ log.type }] { log.payload }
  • ) diff --git a/src/containers/Logs/style.scss b/src/containers/Logs/style.scss index be0f48a..4f40868 100644 --- a/src/containers/Logs/style.scss +++ b/src/containers/Logs/style.scss @@ -11,14 +11,4 @@ color: #73808f; overflow-y: auto; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; - - li { - line-height: 20px; - display: inline-block; - } -} - -.logs-panel-time { - margin-right: 10px; - color: #adb7c3; } diff --git a/src/containers/Proxies/components/Group/style.scss b/src/containers/Proxies/components/Group/style.scss index c8c7e5a..403cb2d 100644 --- a/src/containers/Proxies/components/Group/style.scss +++ b/src/containers/Proxies/components/Group/style.scss @@ -20,10 +20,6 @@ height: 18px; } -.proxies-group-card { - padding: 0; -} - .proxies-group-item { border-bottom: 1px solid $color-gray; diff --git a/src/containers/Proxies/index.tsx b/src/containers/Proxies/index.tsx index 7452e8d..db9d0a0 100644 --- a/src/containers/Proxies/index.tsx +++ b/src/containers/Proxies/index.tsx @@ -50,7 +50,7 @@ function ProxyGroups () { {t('breakConnectionsText')} - +