From 5aaa1b51a6b1c85f2da911bec57d5d867bfa8806 Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Tue, 5 Sep 2023 16:23:38 +0800 Subject: [PATCH 01/58] Update dependencies, add clean script --- package-lock.json | 161 +++++++++++++++++++++++++++------------------- package.json | 16 ++--- 2 files changed, 103 insertions(+), 74 deletions(-) diff --git a/package-lock.json b/package-lock.json index 16c4295..29c352d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,8 +8,8 @@ "name": "fatweb-ui", "version": "0.0.0", "dependencies": { - "@ant-design/icons": "^5.2.5", - "antd": "^5.8.5", + "@ant-design/icons": "^5.2.6", + "antd": "^5.8.6", "axios": "^1.5.0", "jwt-decode": "^3.1.2", "localforage": "^1.10.0", @@ -18,19 +18,18 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-router": "^6.15.0", - "react-router-dom": "^6.15.0", - "sort-by": "^0.0.2" + "react-router-dom": "^6.15.0" }, "devDependencies": { "@svgr/core": "^8.1.0", "@svgr/plugin-jsx": "^8.1.0", "@types/jsdom": "^21.1.2", "@types/lodash": "^4.14.197", - "@types/node": "^20.5.7", + "@types/node": "^20.5.9", "@types/react": "^18.2.21", "@types/react-dom": "^18.2.7", - "@typescript-eslint/eslint-plugin": "^6.5.0", - "@typescript-eslint/parser": "^6.5.0", + "@typescript-eslint/eslint-plugin": "^6.6.0", + "@typescript-eslint/parser": "^6.6.0", "@vitejs/plugin-react": "^4.0.4", "eslint": "^8.48.0", "eslint-config-prettier": "^9.0.0", @@ -45,7 +44,7 @@ "stylelint-config-prettier": "^9.0.5", "typescript": "^5.2.2", "unplugin-auto-import": "^0.16.6", - "unplugin-icons": "^0.16.6", + "unplugin-icons": "^0.17.0", "vite": "^4.4.9" } }, @@ -1508,7 +1507,7 @@ }, "node_modules/@types/json-schema": { "version": "7.0.12", - "resolved": "https://registry.npmmirror.com/@types/json-schema/-/json-schema-7.0.12.tgz", + "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.12.tgz", "integrity": "sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==", "dev": true }, @@ -1585,7 +1584,7 @@ }, "node_modules/@types/semver": { "version": "7.5.1", - "resolved": "https://registry.npmmirror.com/@types/semver/-/semver-7.5.1.tgz", + "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.1.tgz", "integrity": "sha512-cJRQXpObxfNKkFAZbJl2yjWtJCqELQIdShsogr1d2MilP8dKD9TE/nEKHkJgUNHdGKCQaf9HbIynuV2csLGVLg==", "dev": true }, @@ -1596,16 +1595,16 @@ "dev": true }, "node_modules/@typescript-eslint/eslint-plugin": { - "version": "6.5.0", - "resolved": "https://registry.npmmirror.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.5.0.tgz", - "integrity": "sha512-2pktILyjvMaScU6iK3925uvGU87E+N9rh372uGZgiMYwafaw9SXq86U04XPq3UH6tzRvNgBsub6x2DacHc33lw==", + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.6.0.tgz", + "integrity": "sha512-CW9YDGTQnNYMIo5lMeuiIG08p4E0cXrXTbcZ2saT/ETE7dWUrNxlijsQeU04qAAKkILiLzdQz+cGFxCJjaZUmA==", "dev": true, "dependencies": { "@eslint-community/regexpp": "^4.5.1", - "@typescript-eslint/scope-manager": "6.5.0", - "@typescript-eslint/type-utils": "6.5.0", - "@typescript-eslint/utils": "6.5.0", - "@typescript-eslint/visitor-keys": "6.5.0", + "@typescript-eslint/scope-manager": "6.6.0", + "@typescript-eslint/type-utils": "6.6.0", + "@typescript-eslint/utils": "6.6.0", + "@typescript-eslint/visitor-keys": "6.6.0", "debug": "^4.3.4", "graphemer": "^1.4.0", "ignore": "^5.2.4", @@ -1616,6 +1615,10 @@ "engines": { "node": "^16.0.0 || >=18.0.0" }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, "peerDependencies": { "@typescript-eslint/parser": "^6.0.0 || ^6.0.0-alpha", "eslint": "^7.0.0 || ^8.0.0" @@ -1660,20 +1663,24 @@ "dev": true }, "node_modules/@typescript-eslint/parser": { - "version": "6.5.0", - "resolved": "https://registry.npmmirror.com/@typescript-eslint/parser/-/parser-6.5.0.tgz", - "integrity": "sha512-LMAVtR5GN8nY0G0BadkG0XIe4AcNMeyEy3DyhKGAh9k4pLSMBO7rF29JvDBpZGCmp5Pgz5RLHP6eCpSYZJQDuQ==", + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.6.0.tgz", + "integrity": "sha512-setq5aJgUwtzGrhW177/i+DMLqBaJbdwGj2CPIVFFLE0NCliy5ujIdLHd2D1ysmlmsjdL2GWW+hR85neEfc12w==", "dev": true, "dependencies": { - "@typescript-eslint/scope-manager": "6.5.0", - "@typescript-eslint/types": "6.5.0", - "@typescript-eslint/typescript-estree": "6.5.0", - "@typescript-eslint/visitor-keys": "6.5.0", + "@typescript-eslint/scope-manager": "6.6.0", + "@typescript-eslint/types": "6.6.0", + "@typescript-eslint/typescript-estree": "6.6.0", + "@typescript-eslint/visitor-keys": "6.6.0", "debug": "^4.3.4" }, "engines": { "node": "^16.0.0 || >=18.0.0" }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, "peerDependencies": { "eslint": "^7.0.0 || ^8.0.0" }, @@ -1684,32 +1691,40 @@ } }, "node_modules/@typescript-eslint/scope-manager": { - "version": "6.5.0", - "resolved": "https://registry.npmmirror.com/@typescript-eslint/scope-manager/-/scope-manager-6.5.0.tgz", - "integrity": "sha512-A8hZ7OlxURricpycp5kdPTH3XnjG85UpJS6Fn4VzeoH4T388gQJ/PGP4ole5NfKt4WDVhmLaQ/dBLNDC4Xl/Kw==", + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.6.0.tgz", + "integrity": "sha512-pT08u5W/GT4KjPUmEtc2kSYvrH8x89cVzkA0Sy2aaOUIw6YxOIjA8ilwLr/1fLjOedX1QAuBpG9XggWqIIfERw==", "dev": true, "dependencies": { - "@typescript-eslint/types": "6.5.0", - "@typescript-eslint/visitor-keys": "6.5.0" + "@typescript-eslint/types": "6.6.0", + "@typescript-eslint/visitor-keys": "6.6.0" }, "engines": { "node": "^16.0.0 || >=18.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" } }, "node_modules/@typescript-eslint/type-utils": { - "version": "6.5.0", - "resolved": "https://registry.npmmirror.com/@typescript-eslint/type-utils/-/type-utils-6.5.0.tgz", - "integrity": "sha512-f7OcZOkRivtujIBQ4yrJNIuwyCQO1OjocVqntl9dgSIZAdKqicj3xFDqDOzHDlGCZX990LqhLQXWRnQvsapq8A==", + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-6.6.0.tgz", + "integrity": "sha512-8m16fwAcEnQc69IpeDyokNO+D5spo0w1jepWWY2Q6y5ZKNuj5EhVQXjtVAeDDqvW6Yg7dhclbsz6rTtOvcwpHg==", "dev": true, "dependencies": { - "@typescript-eslint/typescript-estree": "6.5.0", - "@typescript-eslint/utils": "6.5.0", + "@typescript-eslint/typescript-estree": "6.6.0", + "@typescript-eslint/utils": "6.6.0", "debug": "^4.3.4", "ts-api-utils": "^1.0.1" }, "engines": { "node": "^16.0.0 || >=18.0.0" }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, "peerDependencies": { "eslint": "^7.0.0 || ^8.0.0" }, @@ -1720,22 +1735,26 @@ } }, "node_modules/@typescript-eslint/types": { - "version": "6.5.0", - "resolved": "https://registry.npmmirror.com/@typescript-eslint/types/-/types-6.5.0.tgz", - "integrity": "sha512-eqLLOEF5/lU8jW3Bw+8auf4lZSbbljHR2saKnYqON12G/WsJrGeeDHWuQePoEf9ro22+JkbPfWQwKEC5WwLQ3w==", + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.6.0.tgz", + "integrity": "sha512-CB6QpJQ6BAHlJXdwUmiaXDBmTqIE2bzGTDLADgvqtHWuhfNP3rAOK7kAgRMAET5rDRr9Utt+qAzRBdu3AhR3sg==", "dev": true, "engines": { "node": "^16.0.0 || >=18.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" } }, "node_modules/@typescript-eslint/typescript-estree": { - "version": "6.5.0", - "resolved": "https://registry.npmmirror.com/@typescript-eslint/typescript-estree/-/typescript-estree-6.5.0.tgz", - "integrity": "sha512-q0rGwSe9e5Kk/XzliB9h2LBc9tmXX25G0833r7kffbl5437FPWb2tbpIV9wAATebC/018pGa9fwPDuvGN+LxWQ==", + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.6.0.tgz", + "integrity": "sha512-hMcTQ6Al8MP2E6JKBAaSxSVw5bDhdmbCEhGW/V8QXkb9oNsFkA4SBuOMYVPxD3jbtQ4R/vSODBsr76R6fP3tbA==", "dev": true, "dependencies": { - "@typescript-eslint/types": "6.5.0", - "@typescript-eslint/visitor-keys": "6.5.0", + "@typescript-eslint/types": "6.6.0", + "@typescript-eslint/visitor-keys": "6.6.0", "debug": "^4.3.4", "globby": "^11.1.0", "is-glob": "^4.0.3", @@ -1745,6 +1764,10 @@ "engines": { "node": "^16.0.0 || >=18.0.0" }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, "peerDependenciesMeta": { "typescript": { "optional": true @@ -1753,7 +1776,7 @@ }, "node_modules/@typescript-eslint/typescript-estree/node_modules/lru-cache": { "version": "6.0.0", - "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-6.0.0.tgz", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", "dev": true, "dependencies": { @@ -1765,7 +1788,7 @@ }, "node_modules/@typescript-eslint/typescript-estree/node_modules/semver": { "version": "7.5.4", - "resolved": "https://registry.npmmirror.com/semver/-/semver-7.5.4.tgz", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", "dev": true, "dependencies": { @@ -1780,34 +1803,38 @@ }, "node_modules/@typescript-eslint/typescript-estree/node_modules/yallist": { "version": "4.0.0", - "resolved": "https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", "dev": true }, "node_modules/@typescript-eslint/utils": { - "version": "6.5.0", - "resolved": "https://registry.npmmirror.com/@typescript-eslint/utils/-/utils-6.5.0.tgz", - "integrity": "sha512-9nqtjkNykFzeVtt9Pj6lyR9WEdd8npPhhIPM992FWVkZuS6tmxHfGVnlUcjpUP2hv8r4w35nT33mlxd+Be1ACQ==", + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.6.0.tgz", + "integrity": "sha512-mPHFoNa2bPIWWglWYdR0QfY9GN0CfvvXX1Sv6DlSTive3jlMTUy+an67//Gysc+0Me9pjitrq0LJp0nGtLgftw==", "dev": true, "dependencies": { "@eslint-community/eslint-utils": "^4.4.0", "@types/json-schema": "^7.0.12", "@types/semver": "^7.5.0", - "@typescript-eslint/scope-manager": "6.5.0", - "@typescript-eslint/types": "6.5.0", - "@typescript-eslint/typescript-estree": "6.5.0", + "@typescript-eslint/scope-manager": "6.6.0", + "@typescript-eslint/types": "6.6.0", + "@typescript-eslint/typescript-estree": "6.6.0", "semver": "^7.5.4" }, "engines": { "node": "^16.0.0 || >=18.0.0" }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, "peerDependencies": { "eslint": "^7.0.0 || ^8.0.0" } }, "node_modules/@typescript-eslint/utils/node_modules/lru-cache": { "version": "6.0.0", - "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-6.0.0.tgz", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", "dev": true, "dependencies": { @@ -1819,7 +1846,7 @@ }, "node_modules/@typescript-eslint/utils/node_modules/semver": { "version": "7.5.4", - "resolved": "https://registry.npmmirror.com/semver/-/semver-7.5.4.tgz", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", "dev": true, "dependencies": { @@ -1834,21 +1861,25 @@ }, "node_modules/@typescript-eslint/utils/node_modules/yallist": { "version": "4.0.0", - "resolved": "https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", "dev": true }, "node_modules/@typescript-eslint/visitor-keys": { - "version": "6.5.0", - "resolved": "https://registry.npmmirror.com/@typescript-eslint/visitor-keys/-/visitor-keys-6.5.0.tgz", - "integrity": "sha512-yCB/2wkbv3hPsh02ZS8dFQnij9VVQXJMN/gbQsaaY+zxALkZnxa/wagvLEFsAWMPv7d7lxQmNsIzGU1w/T/WyA==", + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.6.0.tgz", + "integrity": "sha512-L61uJT26cMOfFQ+lMZKoJNbAEckLe539VhTxiGHrWl5XSKQgA0RTBZJW2HFPy5T0ZvPVSD93QsrTKDkfNwJGyQ==", "dev": true, "dependencies": { - "@typescript-eslint/types": "6.5.0", + "@typescript-eslint/types": "6.6.0", "eslint-visitor-keys": "^3.4.1" }, "engines": { "node": "^16.0.0 || >=18.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" } }, "node_modules/@vitejs/plugin-react": { @@ -6592,11 +6623,6 @@ "tslib": "^2.0.3" } }, - "node_modules/sort-by": { - "version": "0.0.2", - "resolved": "https://registry.npmmirror.com/sort-by/-/sort-by-0.0.2.tgz", - "integrity": "sha512-iOX5oHA4a0eqTMFiWrHYqv924UeRKFBLhym7iwSVG37Egg2wApgZKAjyzM9WZjMwKv6+8Zi+nIaJ7FYsO9EkoA==" - }, "node_modules/source-map-js": { "version": "1.0.2", "resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.0.2.tgz", @@ -7340,9 +7366,9 @@ } }, "node_modules/unplugin-icons": { - "version": "0.16.6", - "resolved": "https://registry.npmmirror.com/unplugin-icons/-/unplugin-icons-0.16.6.tgz", - "integrity": "sha512-jL70sAC7twp4hI/MTfm+vyvTRtHqiEIzf3XOjJz7yzhMEEQnk5Ey5YIXRAU03Mc4BF99ITvvnBzfyRZee86OeA==", + "version": "0.17.0", + "resolved": "https://registry.npmjs.org/unplugin-icons/-/unplugin-icons-0.17.0.tgz", + "integrity": "sha512-gMv66eY/Hj64heM55XrfDH3LUCWI51mtkBVUPVl9VkpvLgAYhdVe9nRuzu6p+idmCLSQVq7xiPxQcD4aXCgW5A==", "dev": true, "dependencies": { "@antfu/install-pkg": "^0.1.1", @@ -7353,6 +7379,9 @@ "local-pkg": "^0.4.3", "unplugin": "^1.4.0" }, + "funding": { + "url": "https://github.com/sponsors/antfu" + }, "peerDependencies": { "@svgr/core": ">=7.0.0", "@svgx/core": "^1.0.1", diff --git a/package.json b/package.json index d5ad9f7..2e64a58 100644 --- a/package.json +++ b/package.json @@ -7,13 +7,14 @@ "dev": "vite", "dev-host": "vite --host 0.0.0.0", "build": "vite build && tsc && vite build", + "clean": "rimraf dist .eslintrc-auto-import.json auto-imports.d.ts", "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0", "format": "prettier --write src/", "preview": "vite preview" }, "dependencies": { - "@ant-design/icons": "^5.2.5", - "antd": "^5.8.5", + "@ant-design/icons": "^5.2.6", + "antd": "^5.8.6", "axios": "^1.5.0", "jwt-decode": "^3.1.2", "localforage": "^1.10.0", @@ -22,19 +23,18 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-router": "^6.15.0", - "react-router-dom": "^6.15.0", - "sort-by": "^0.0.2" + "react-router-dom": "^6.15.0" }, "devDependencies": { "@svgr/core": "^8.1.0", "@svgr/plugin-jsx": "^8.1.0", "@types/jsdom": "^21.1.2", "@types/lodash": "^4.14.197", - "@types/node": "^20.5.7", + "@types/node": "^20.5.9", "@types/react": "^18.2.21", "@types/react-dom": "^18.2.7", - "@typescript-eslint/eslint-plugin": "^6.5.0", - "@typescript-eslint/parser": "^6.5.0", + "@typescript-eslint/eslint-plugin": "^6.6.0", + "@typescript-eslint/parser": "^6.6.0", "@vitejs/plugin-react": "^4.0.4", "eslint": "^8.48.0", "eslint-config-prettier": "^9.0.0", @@ -49,7 +49,7 @@ "stylelint-config-prettier": "^9.0.5", "typescript": "^5.2.2", "unplugin-auto-import": "^0.16.6", - "unplugin-icons": "^0.16.6", + "unplugin-icons": "^0.17.0", "vite": "^4.4.9" } } From 75e872127c20b1eac1b43ea6ba71690c1e050ca0 Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Tue, 5 Sep 2023 21:35:27 +0800 Subject: [PATCH 02/58] Change css to scss --- package-lock.json | 24 +++++++++ package.json | 1 + src/assets/css/base.css | 63 ---------------------- src/assets/css/base.scss | 63 ++++++++++++++++++++++ src/assets/css/common.css | 106 ------------------------------------- src/assets/css/common.scss | 105 ++++++++++++++++++++++++++++++++++++ src/assets/css/login.css | 63 ---------------------- src/assets/css/login.scss | 63 ++++++++++++++++++++++ src/assets/css/manager.css | 35 ------------ src/index.css | 69 ------------------------ src/main.tsx | 4 +- src/pages/Login.tsx | 2 +- src/router/index.tsx | 9 +--- 13 files changed, 260 insertions(+), 347 deletions(-) delete mode 100644 src/assets/css/base.css create mode 100644 src/assets/css/base.scss delete mode 100644 src/assets/css/common.css create mode 100644 src/assets/css/common.scss delete mode 100644 src/assets/css/login.css create mode 100644 src/assets/css/login.scss delete mode 100644 src/assets/css/manager.css delete mode 100644 src/index.css diff --git a/package-lock.json b/package-lock.json index 29c352d..c7826bc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -41,6 +41,7 @@ "eslint-plugin-react-refresh": "^0.4.3", "jsdom": "^22.1.0", "prettier": "^3.0.3", + "sass": "^1.66.1", "stylelint-config-prettier": "^9.0.5", "typescript": "^5.2.2", "unplugin-auto-import": "^0.16.6", @@ -4049,6 +4050,12 @@ "resolved": "https://registry.npmmirror.com/immediate/-/immediate-3.0.6.tgz", "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==" }, + "node_modules/immutable": { + "version": "4.3.4", + "resolved": "https://registry.npmmirror.com/immutable/-/immutable-4.3.4.tgz", + "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==", + "dev": true + }, "node_modules/import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmmirror.com/import-fresh/-/import-fresh-3.3.0.tgz", @@ -6475,6 +6482,23 @@ "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "dev": true }, + "node_modules/sass": { + "version": "1.66.1", + "resolved": "https://registry.npmmirror.com/sass/-/sass-1.66.1.tgz", + "integrity": "sha512-50c+zTsZOJVgFfTgwwEzkjA3/QACgdNsKueWPyAR0mRINIvLAStVQBbPg14iuqEQ74NPDbXzJARJ/O4SI1zftA==", + "dev": true, + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/saxes": { "version": "6.0.0", "resolved": "https://registry.npmmirror.com/saxes/-/saxes-6.0.0.tgz", diff --git a/package.json b/package.json index 2e64a58..2592cd4 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,7 @@ "eslint-plugin-react-refresh": "^0.4.3", "jsdom": "^22.1.0", "prettier": "^3.0.3", + "sass": "^1.66.1", "stylelint-config-prettier": "^9.0.5", "typescript": "^5.2.2", "unplugin-auto-import": "^0.16.6", diff --git a/src/assets/css/base.css b/src/assets/css/base.css deleted file mode 100644 index 1426524..0000000 --- a/src/assets/css/base.css +++ /dev/null @@ -1,63 +0,0 @@ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -html { - scroll-behavior: smooth; -} - -em, -i { - font-style: normal -} - -li { - list-style: none -} - -img { - border: 0; - vertical-align: middle -} - -button { - cursor: pointer -} - -a { - color: #666; - text-decoration: none -} - -button, -input { - font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif; - border: 0; - outline: none; -} - -body { - -webkit-font-smoothing: antialiased; - background-color: #fff; - font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif; - color: #666 -} - -.hide, -.none { - display: none -} - -.clearfix:after { - visibility: hidden; - clear: both; - display: block; - content: "."; - height: 0 -} - -.clearfix { - *zoom: 1 -} \ No newline at end of file diff --git a/src/assets/css/base.scss b/src/assets/css/base.scss new file mode 100644 index 0000000..8bb5df0 --- /dev/null +++ b/src/assets/css/base.scss @@ -0,0 +1,63 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +em, +i { + font-style: normal +} + +li { + list-style: none +} + +img { + border: 0; + vertical-align: middle +} + +button { + cursor: pointer +} + +a { + color: #666; + text-decoration: none +} + +button, +input { + font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif; + border: 0; + outline: none; +} + +body { + -webkit-font-smoothing: antialiased; + background-color: #fff; + font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif; + color: #666 +} + +.hide, +.none { + display: none +} + +.clearfix:after { + visibility: hidden; + clear: both; + display: block; + content: "."; + height: 0 +} + +.clearfix { + *zoom: 1 +} \ No newline at end of file diff --git a/src/assets/css/common.css b/src/assets/css/common.css deleted file mode 100644 index 1435e89..0000000 --- a/src/assets/css/common.css +++ /dev/null @@ -1,106 +0,0 @@ -:root { - --main-color: #00D4FF; - --background-color: #F5F5F5; - --font-main-color: #4D4D4D; - --font-secondary-color: #9E9E9E; -} - -.body { - color: var(--font-main-color); - user-select: none; - min-width: 1800px; - min-height: 400px; -} - -.fill { - height: 100%; - width: 100%; -} - -.fill-with { - width: 100%; -} - -.fill-height { - height: 100%; -} - -.background-white { - background-color: white; -} - -.center-box { - display: flex; - justify-content: center; - align-items: center; -} - -.vertical-center-box { - display: flex; - align-items: center; -} - -.horizontal-center-box { - display: flex; - justify-content: center; -} - -.icon-size-xs { - width: 16px; - height: 16px; -} - -.icon-size-xs > use { - width: 16px; - height: 16px; -} - -.icon-size-sm { - width: 20px; - height: 20px; -} - -.icon-size-sm > use { - width: 20px; - height: 20px; -} - -.icon-size-md { - width: 24px; - height: 24px; -} - -.icon-size-md > use { - width: 24px; - height: 24px; -} - -.icon-size-lg { - width: 32px; - height: 32px; -} - -.icon-size-lg > use { - width: 32px; - height: 32px; -} - -.icon-size-xl { - width: 64px; - height: 64px; -} - -.icon-size-xl > use { - width: 64px; - height: 64px; -} - -.icon-size-menu { - width: 23px; - height: 23px; -} - -.icon-size-menu > use { - width: 23px; - height: 23px; -} diff --git a/src/assets/css/common.scss b/src/assets/css/common.scss new file mode 100644 index 0000000..539eee8 --- /dev/null +++ b/src/assets/css/common.scss @@ -0,0 +1,105 @@ +$main-color: #00D4FF; +$background-color: #F5F5F5; +$font-main-color: #4D4D4D; +$font-secondary-color: #9E9E9E; + +.body { + color: $font-main-color; + user-select: none; + min-width: 1800px; + min-height: 400px; +} + +.fill { + height: 100%; + width: 100%; +} + +.fill-with { + width: 100%; +} + +.fill-height { + height: 100%; +} + +.background-white { + background-color: white; +} + +.center-box { + display: flex; + justify-content: center; + align-items: center; +} + +.vertical-center-box { + display: flex; + align-items: center; +} + +.horizontal-center-box { + display: flex; + justify-content: center; +} + +.icon-size-xs { + width: 16px; + height: 16px; + + > use { + width: 16px; + height: 16px; + } +} + +.icon-size-sm { + width: 20px; + height: 20px; + + > use { + width: 20px; + height: 20px; + } +} + +.icon-size-md { + width: 24px; + height: 24px; + + > use { + width: 24px; + height: 24px; + } +} + +.icon-size-lg { + width: 32px; + height: 32px; + + > use { + + width: 32px; + height: 32px; + } +} + +.icon-size-xl { + width: 64px; + height: 64px; + + > use { + width: 64px; + height: 64px; + } +} + +.icon-size-menu { + width: 23px; + height: 23px; + + > use { + width: 23px; + height: 23px; + } +} diff --git a/src/assets/css/login.css b/src/assets/css/login.css deleted file mode 100644 index fd5fe6e..0000000 --- a/src/assets/css/login.css +++ /dev/null @@ -1,63 +0,0 @@ -.login-background { - display: flex; - height: 100vh; - width: 100vw; - justify-content: center; - align-items: center; - background-color: #B3E5FC; -} - -.login-box { - display: flex; - width: 800px; - height: 450px; - background-color: #448AFF; -} - -.login-box-left { - display: flex; - justify-content: center; - align-items: center; - height: 100%; - flex: 2; -} - -.login-box-left-text { - font-size: 3rem; - color: white; - font-weight: bold; -} - -.login-box-left-text>div:last-child { - font-size: 1.8rem; - font-weight: normal; -} - -.login-box-right { - position: relative; - height: 100%; - flex: 3; - background-color: white; -} - -.login-from-text { - position: absolute; - top: 60px; - left: 40px; - font-weight: bold; - font-size: 2rem; -} - -.login-from { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - margin-top: 30px; - width: 100%; - height: 100%; -} - -.login-from-item { - width: 80%; -} \ No newline at end of file diff --git a/src/assets/css/login.scss b/src/assets/css/login.scss new file mode 100644 index 0000000..22629a8 --- /dev/null +++ b/src/assets/css/login.scss @@ -0,0 +1,63 @@ +.login-background { + display: flex; + height: 100vh; + width: 100vw; + justify-content: center; + align-items: center; + background-color: #B3E5FC; +} + +.login-box { + display: flex; + width: 800px; + height: 450px; + background-color: #448AFF; +} + +.login-box-left { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + flex: 2; +} + +.login-box-left-text { + font-size: 3rem; + color: white; + font-weight: bold; + + > div:last-child { + font-size: 1.8rem; + font-weight: normal; + } +} + +.login-box-right { + position: relative; + height: 100%; + flex: 3; + background-color: white; +} + +.login-from-text { + position: absolute; + top: 60px; + left: 40px; + font-weight: bold; + font-size: 2rem; +} + +.login-from { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-top: 30px; + width: 100%; + height: 100%; +} + +.login-from-item { + width: 80%; +} \ No newline at end of file diff --git a/src/assets/css/manager.css b/src/assets/css/manager.css deleted file mode 100644 index 17c4829..0000000 --- a/src/assets/css/manager.css +++ /dev/null @@ -1,35 +0,0 @@ -.top-bar { - display: flex; - justify-content: right; - background-color: #317ece; - padding: 10px 20px; -} - -.top-bar > button:hover { - color: #F5F5F5; - border-color: #F5F5F5; -} - -.search-row { - display: flex; - gap: 20px; - margin: 10px 10px; -} - -.search-row > * { - display: flex; - gap: 5px; - align-items: center; - flex: 1; - font-size: 1rem; -} - -.search-row > *:not(.operation-buttons) > *:last-child { - flex: 1; -} - -.operation-buttons { - display: flex; - justify-content: right; - gap: 10px; -} \ No newline at end of file diff --git a/src/index.css b/src/index.css deleted file mode 100644 index 2c3fac6..0000000 --- a/src/index.css +++ /dev/null @@ -1,69 +0,0 @@ -:root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - -webkit-text-size-adjust: 100%; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } -} diff --git a/src/main.tsx b/src/main.tsx index 89528f3..e91aef2 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,8 +1,8 @@ import React from 'react' import ReactDOM from 'react-dom/client' import App from './App.tsx' -import '@/assets/css/base.css' -import '@/assets/css/common.css' +import '@/assets/css/base.scss' +import '@/assets/css/common.scss' import zh_CN from 'antd/locale/zh_CN' ReactDOM.createRoot(document.getElementById('root')!).render( diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx index 40f71af..488f004 100644 --- a/src/pages/Login.tsx +++ b/src/pages/Login.tsx @@ -2,7 +2,7 @@ import React from 'react' import { login } from '@/utils/auth.ts' import { LOGIN_SUCCESS, LOGIN_USERNAME_PASSWORD_ERROR } from '@/constants/Common.constants.ts' import { setToken } from '@/utils/common.ts' -import '@/assets/css/login.css' +import '@/assets/css/login.scss' const Login: React.FC = () => { const [messageApi, contextHolder] = message.useMessage() diff --git a/src/router/index.tsx b/src/router/index.tsx index 316eacc..aeac318 100644 --- a/src/router/index.tsx +++ b/src/router/index.tsx @@ -12,15 +12,8 @@ const routes: RouteObject[] = [ }, { path: '', - id: 'manager', + id: 'home', Component: React.lazy(() => import('@/pages/Home')), - children: [ - { - id: 'manager-sub', - path: 'sub', - Component: React.lazy(() => import('@/pages/Home')) - } - ], handle: { auth: false } From 54b10d2c316964fe65487582e0b65e1094e27b6d Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Tue, 5 Sep 2023 22:21:08 +0800 Subject: [PATCH 03/58] Change logo and title --- index.html | 4 ++-- public/logo.svg | 1 + public/vite.svg | 1 - src/assets/svg/logo.svg | 1 + 4 files changed, 4 insertions(+), 3 deletions(-) create mode 100644 public/logo.svg delete mode 100644 public/vite.svg create mode 100644 src/assets/svg/logo.svg diff --git a/index.html b/index.html index fdacc4a..93b7658 100644 --- a/index.html +++ b/index.html @@ -2,9 +2,9 @@ - + - Vite + React + TS + FatWeb
diff --git a/public/logo.svg b/public/logo.svg new file mode 100644 index 0000000..e2769cb --- /dev/null +++ b/public/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/vite.svg b/public/vite.svg deleted file mode 100644 index e7b8dfb..0000000 --- a/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/svg/logo.svg b/src/assets/svg/logo.svg new file mode 100644 index 0000000..243d161 --- /dev/null +++ b/src/assets/svg/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file From af2ca2888b5fdfdb60fc906f8558f0090c828ae0 Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Tue, 5 Sep 2023 22:55:20 +0800 Subject: [PATCH 04/58] Add logo to home page --- src/App.css | 42 -------------------------------------- src/assets/css/header.scss | 25 +++++++++++++++++++++++ src/assets/css/home.scss | 1 + src/pages/Home.tsx | 7 ++++++- 4 files changed, 32 insertions(+), 43 deletions(-) delete mode 100644 src/App.css create mode 100644 src/assets/css/header.scss create mode 100644 src/assets/css/home.scss diff --git a/src/App.css b/src/App.css deleted file mode 100644 index b9d355d..0000000 --- a/src/App.css +++ /dev/null @@ -1,42 +0,0 @@ -#root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; -} -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); -} -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); -} - -@keyframes logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; - } -} - -.card { - padding: 2em; -} - -.read-the-docs { - color: #888; -} diff --git a/src/assets/css/header.scss b/src/assets/css/header.scss new file mode 100644 index 0000000..891575f --- /dev/null +++ b/src/assets/css/header.scss @@ -0,0 +1,25 @@ +.nav { + display: flex; + position: fixed; + align-items: center; + z-index: 1; + width: 100%; + height: 70px; + background-color: white; + border: { + bottom: { + width: 1px; + style: solid; + color: rgba(204, 204, 204, .33); + } + } + + .logo { + padding: 0 40px; + + .title { + font-size: 2.8em; + font-family: century gothic, texgyreadventor, stheiti, sans-serif; + } + } +} \ No newline at end of file diff --git a/src/assets/css/home.scss b/src/assets/css/home.scss new file mode 100644 index 0000000..1bd162e --- /dev/null +++ b/src/assets/css/home.scss @@ -0,0 +1 @@ +@import url(header.scss); \ No newline at end of file diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 28044c9..ff09f43 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,9 +1,14 @@ import React from 'react' +import '@/assets/css/home.scss' const Home: React.FC = () => { return ( <> -

FatWeb

+
+ + FatWeb + +
) } From ecbe15621576ad6941555b5229e777f77a00c916 Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Wed, 6 Sep 2023 18:20:56 +0800 Subject: [PATCH 05/58] Fix conflicts between eslint and prettier --- .eslintrc.cjs | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 8d0ca95..522cb9d 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -24,11 +24,10 @@ module.exports = { rules: { 'no-cond-assign': 'error', 'eqeqeq': 'error', - 'indent': ['error', 4, { 'SwitchCase': 1 }], 'prettier/prettier': [ 'error', { - endOfLine: 'auto' + endOfLine: 'auto', } ], 'react-refresh/only-export-components': [ From 2b4e54a69dab8763d68a9d9dfa62ce658c5bfc02 Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Wed, 6 Sep 2023 18:22:07 +0800 Subject: [PATCH 06/58] Update dependency @types/lodash --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 2592cd4..816c380 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "@svgr/core": "^8.1.0", "@svgr/plugin-jsx": "^8.1.0", "@types/jsdom": "^21.1.2", - "@types/lodash": "^4.14.197", + "@types/lodash": "^4.14.198", "@types/node": "^20.5.9", "@types/react": "^18.2.21", "@types/react-dom": "^18.2.7", From 530d201b1c2c745a5ad82f381a94525c4586ddb8 Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Wed, 6 Sep 2023 18:27:18 +0800 Subject: [PATCH 07/58] Add MainFramework and loading mask. Add animation to menu. --- src/App.tsx | 5 ++- src/assets/css/_mixins.scss | 22 ++++++++++ src/assets/css/common.scss | 18 +++++++- src/assets/css/header.scss | 68 +++++++++++++++++++++++++++++ src/assets/css/home.scss | 1 - src/assets/svg/loading.svg | 1 + src/components/FitFullScreen.tsx | 11 +++++ src/components/Home.tsx | 12 +++++ src/components/LoadingMask.tsx | 27 ++++++++++++ src/components/Project.tsx | 11 +++++ src/pages/Home.tsx | 16 ------- src/pages/MainFramework.tsx | 75 ++++++++++++++++++++++++++++++++ src/router/index.tsx | 30 ++++++++++--- vite.config.ts | 6 +++ 14 files changed, 279 insertions(+), 24 deletions(-) create mode 100644 src/assets/css/_mixins.scss create mode 100644 src/assets/svg/loading.svg create mode 100644 src/components/FitFullScreen.tsx create mode 100644 src/components/Home.tsx create mode 100644 src/components/LoadingMask.tsx create mode 100644 src/components/Project.tsx delete mode 100644 src/pages/Home.tsx create mode 100644 src/pages/MainFramework.tsx diff --git a/src/App.tsx b/src/App.tsx index 3561770..c4573eb 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,10 +1,13 @@ import React from 'react' import router from '@/router' +import LoadingMask from '@/components/LoadingMask.tsx' const App: React.FC = () => { return ( <> - + }> + + ) } diff --git a/src/assets/css/_mixins.scss b/src/assets/css/_mixins.scss new file mode 100644 index 0000000..47308ed --- /dev/null +++ b/src/assets/css/_mixins.scss @@ -0,0 +1,22 @@ +@mixin keyframes($animationName) { + @-webkit-keyframes #{$animationName} { + @content + } + @-moz-keyframes #{$animationName} { + @content + } + @-o-keyframes #{$animationName} { + @content + } + @keyframes #{$animationName} { + @content + } +} + +@mixin unique-keyframes { + $animationName: unique-id(); + animation-name: $animationName; + @include keyframes($animationName) { + @content + } +} \ No newline at end of file diff --git a/src/assets/css/common.scss b/src/assets/css/common.scss index 539eee8..9747a19 100644 --- a/src/assets/css/common.scss +++ b/src/assets/css/common.scss @@ -6,7 +6,7 @@ $font-secondary-color: #9E9E9E; .body { color: $font-main-color; user-select: none; - min-width: 1800px; + min-width: 900px; min-height: 400px; } @@ -103,3 +103,19 @@ $font-secondary-color: #9E9E9E; height: 23px; } } + +#loading-mask { + position: absolute; + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + z-index: 100; + background-color: rgba(200, 200, 200, 0.2); +} + +#fit-fullscreen { + width: 100vw; + height: 100vh; +} \ No newline at end of file diff --git a/src/assets/css/header.scss b/src/assets/css/header.scss index 891575f..012474f 100644 --- a/src/assets/css/header.scss +++ b/src/assets/css/header.scss @@ -1,3 +1,5 @@ +@use "mixins" as mixins; + .nav { display: flex; position: fixed; @@ -13,6 +15,16 @@ color: rgba(204, 204, 204, .33); } } + animation: .5s ease both; + + @include mixins.unique-keyframes { + 0% { + transform: translateY(-100%); + } + 100% { + transform: translateY(0); + } + } .logo { padding: 0 40px; @@ -22,4 +34,60 @@ font-family: century gothic, texgyreadventor, stheiti, sans-serif; } } + + nav { + display: flex; + justify-content: end; + flex: 1; + transition: { + property: all; + duration: .5s; + }; + + .menu { + padding: 0 30px; + + .item { + display: inline-block; + font-size: 1.5em; + transition: { + property: all; + duration: .3s; + }; + + a { + padding: 5px 20px; + color: rgba(102, 102, 102, .8); + } + } + + .active { + border: { + bottom: { + width: 2px; + style: solid; + color: #CCC; + }; + }; + } + + :hover { + transform: translateY(-5px); + } + } + } +} + +.nav.hide { + animation: .5s ease both; + + @include mixins.unique-keyframes { + 0% { + transform: translateY(0); + } + 100% { + display: none; + transform: translateY(-100%); + } + } } \ No newline at end of file diff --git a/src/assets/css/home.scss b/src/assets/css/home.scss index 1bd162e..e69de29 100644 --- a/src/assets/css/home.scss +++ b/src/assets/css/home.scss @@ -1 +0,0 @@ -@import url(header.scss); \ No newline at end of file diff --git a/src/assets/svg/loading.svg b/src/assets/svg/loading.svg new file mode 100644 index 0000000..a7c3d67 --- /dev/null +++ b/src/assets/svg/loading.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/FitFullScreen.tsx b/src/components/FitFullScreen.tsx new file mode 100644 index 0000000..fab7cc3 --- /dev/null +++ b/src/components/FitFullScreen.tsx @@ -0,0 +1,11 @@ +import React from 'react' + +const FitFullScreen: React.FC = (props: PropsWithChildren) => { + return ( + <> +
{props.children}
+ + ) +} + +export default FitFullScreen diff --git a/src/components/Home.tsx b/src/components/Home.tsx new file mode 100644 index 0000000..6b49d5c --- /dev/null +++ b/src/components/Home.tsx @@ -0,0 +1,12 @@ +import React from 'react' +import '@/assets/css/home.scss' + +const Home: React.FC = () => { + return ( + <> +

Home

+ + ) +} + +export default Home diff --git a/src/components/LoadingMask.tsx b/src/components/LoadingMask.tsx new file mode 100644 index 0000000..0f41ca8 --- /dev/null +++ b/src/components/LoadingMask.tsx @@ -0,0 +1,27 @@ +import React from 'react' +import Icon from '@ant-design/icons' +import FitFullScreen from '@/components/FitFullScreen.tsx' +import { COLOR_FONT_MAIN } from '@/constants/Common.constants.ts' + +const LoadingMask: React.FC = () => { + const loadingIcon = ( + <> + + + ) + return ( + <> + +
+ +
+ + + ) +} + +export default LoadingMask diff --git a/src/components/Project.tsx b/src/components/Project.tsx new file mode 100644 index 0000000..5175273 --- /dev/null +++ b/src/components/Project.tsx @@ -0,0 +1,11 @@ +import React from 'react' + +const Project: React.FC = () => { + return ( + <> +

App

+ + ) +} + +export default Project diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx deleted file mode 100644 index ff09f43..0000000 --- a/src/pages/Home.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react' -import '@/assets/css/home.scss' - -const Home: React.FC = () => { - return ( - <> -
- - FatWeb - -
- - ) -} - -export default Home diff --git a/src/pages/MainFramework.tsx b/src/pages/MainFramework.tsx new file mode 100644 index 0000000..6497756 --- /dev/null +++ b/src/pages/MainFramework.tsx @@ -0,0 +1,75 @@ +import React, { createContext } from 'react' +import '@/assets/css/header.scss' +import LoadingMask from '@/components/LoadingMask.tsx' + +export const MainFrameworkContext = createContext<{ + hideNavbar: boolean + setHideNavbar: (newValue: boolean) => void +}>({ + hideNavbar: false, + setHideNavbar: () => undefined +}) + +const MainFramework: React.FC = () => { + const [hideNavbar, setHideNavbar] = useState(false) + + return ( + <> +
+
+ + FatWeb + + +
+ + + + + + } + > + + + +
+ + ) +} + +export default MainFramework diff --git a/src/router/index.tsx b/src/router/index.tsx index aeac318..274ca0a 100644 --- a/src/router/index.tsx +++ b/src/router/index.tsx @@ -10,13 +10,33 @@ const routes: RouteObject[] = [ id: 'login', Component: React.lazy(() => import('@/pages/Login')) }, + { + path: '/loading', + id: 'loading', + Component: React.lazy(() => import('@/components/LoadingMask')) + }, { path: '', - id: 'home', - Component: React.lazy(() => import('@/pages/Home')), - handle: { - auth: false - } + id: 'mainFramework', + Component: React.lazy(() => import('@/pages/MainFramework')), + children: [ + { + path: '', + id: 'home', + Component: React.lazy(() => import('@/components/Home')), + handle: { + auth: false + } + }, + { + path: 'project', + id: 'project', + Component: React.lazy(() => import('@/components/Project')), + handle: { + auth: false + } + } + ] }, { path: '*', diff --git a/vite.config.ts b/vite.config.ts index 42e70a7..d49fe24 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -26,6 +26,7 @@ export default defineConfig({ 'react-router', 'react-router-dom', { + react: ['Suspense'], 'react-router': ['useMatches', 'RouterProvider'], 'react-router-dom': ['createBrowserRouter'], antd: ['message'] @@ -34,6 +35,11 @@ export default defineConfig({ from: 'react-router', imports: ['RouteObject'], type: true + }, + { + from: 'react', + imports: ['PropsWithChildren'], + type: true } ], From eb8b02256a6c3b76cedacb23fb04422e32e9fffe Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Thu, 7 Sep 2023 00:18:28 +0800 Subject: [PATCH 08/58] Optimize build --- package-lock.json | 8 ++++---- package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index c7826bc..c67c05d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,7 +24,7 @@ "@svgr/core": "^8.1.0", "@svgr/plugin-jsx": "^8.1.0", "@types/jsdom": "^21.1.2", - "@types/lodash": "^4.14.197", + "@types/lodash": "^4.14.198", "@types/node": "^20.5.9", "@types/react": "^18.2.21", "@types/react-dom": "^18.2.7", @@ -1519,9 +1519,9 @@ "dev": true }, "node_modules/@types/lodash": { - "version": "4.14.197", - "resolved": "https://registry.npmmirror.com/@types/lodash/-/lodash-4.14.197.tgz", - "integrity": "sha512-BMVOiWs0uNxHVlHBgzTIqJYmj+PgCo4euloGF+5m4okL3rEYzM2EEv78mw8zWSMM57dM7kVIgJ2QDvwHSoCI5g==", + "version": "4.14.198", + "resolved": "https://registry.npmmirror.com/@types/lodash/-/lodash-4.14.198.tgz", + "integrity": "sha512-trNJ/vtMZYMLhfN45uLq4ShQSw0/S7xCTLLVM+WM1rmFpba/VS42jVUgaO3w/NOLiWR/09lnYk0yMaA/atdIsg==", "dev": true }, "node_modules/@types/minimist": { diff --git a/package.json b/package.json index 816c380..6ec90f0 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "scripts": { "dev": "vite", "dev-host": "vite --host 0.0.0.0", - "build": "vite build && tsc && vite build", + "build": "vite build", "clean": "rimraf dist .eslintrc-auto-import.json auto-imports.d.ts", "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0", "format": "prettier --write src/", From 6230d7288c9810cac24b820a55a306da22e8a487 Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Thu, 7 Sep 2023 00:18:59 +0800 Subject: [PATCH 09/58] Add button in Home.tsx to test navbar hidden --- src/components/Home.tsx | 12 ++++++++++++ src/pages/MainFramework.tsx | 20 +++++++++++++------- 2 files changed, 25 insertions(+), 7 deletions(-) diff --git a/src/components/Home.tsx b/src/components/Home.tsx index 6b49d5c..e73e06a 100644 --- a/src/components/Home.tsx +++ b/src/components/Home.tsx @@ -1,10 +1,22 @@ import React from 'react' import '@/assets/css/home.scss' +import { MainFrameworkContext } from '@/pages/MainFramework' const Home: React.FC = () => { + const { + navbarHiddenState: { navbarHidden, setNavbarHidden } + } = useContext(MainFrameworkContext) + const handleButtonClick = () => { + setNavbarHidden(!navbarHidden) + } return ( <>

Home

+
+ + {navbarHidden ? '显示' : '隐藏'} + +
) } diff --git a/src/pages/MainFramework.tsx b/src/pages/MainFramework.tsx index 6497756..df695b0 100644 --- a/src/pages/MainFramework.tsx +++ b/src/pages/MainFramework.tsx @@ -3,20 +3,24 @@ import '@/assets/css/header.scss' import LoadingMask from '@/components/LoadingMask.tsx' export const MainFrameworkContext = createContext<{ - hideNavbar: boolean - setHideNavbar: (newValue: boolean) => void + navbarHiddenState: { + navbarHidden: boolean + setNavbarHidden: (newValue: boolean) => void + } }>({ - hideNavbar: false, - setHideNavbar: () => undefined + navbarHiddenState: { + navbarHidden: false, + setNavbarHidden: () => undefined + } }) const MainFramework: React.FC = () => { - const [hideNavbar, setHideNavbar] = useState(false) + const [navbarHidden, setNavbarHidden] = useState(false) return ( <>
-
+
FatWeb @@ -56,7 +60,9 @@ const MainFramework: React.FC = () => {
- + From e3d2a089f606dbe4cefe49f35e8d3d9e1b936c15 Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Thu, 7 Sep 2023 18:10:28 +0800 Subject: [PATCH 10/58] Add dynamic menu to MainFramework --- src/pages/MainFramework.tsx | 47 ++++++++++++++----------------------- src/router/index.tsx | 13 ++++++++++ src/vite-env.d.ts | 17 ++++++++++---- 3 files changed, 42 insertions(+), 35 deletions(-) diff --git a/src/pages/MainFramework.tsx b/src/pages/MainFramework.tsx index df695b0..4f1a3dd 100644 --- a/src/pages/MainFramework.tsx +++ b/src/pages/MainFramework.tsx @@ -1,6 +1,7 @@ import React, { createContext } from 'react' import '@/assets/css/header.scss' import LoadingMask from '@/components/LoadingMask.tsx' +import router from '@/router' export const MainFrameworkContext = createContext<{ navbarHiddenState: { @@ -16,6 +17,8 @@ export const MainFrameworkContext = createContext<{ const MainFramework: React.FC = () => { const [navbarHidden, setNavbarHidden] = useState(false) + const routeId = useMatches()[1].id + const routeChildren = router.routes[0].children?.find((value) => value.id === routeId)?.children return ( <> @@ -26,36 +29,20 @@ const MainFramework: React.FC = () => {
diff --git a/src/router/index.tsx b/src/router/index.tsx index 274ca0a..666df6f 100644 --- a/src/router/index.tsx +++ b/src/router/index.tsx @@ -25,6 +25,17 @@ const routes: RouteObject[] = [ id: 'home', Component: React.lazy(() => import('@/components/Home')), handle: { + name: '主页', + menu: true, + auth: false + } + }, + { + path: 'https://blog.fatweb.top', + id: 'blog', + handle: { + name: '博客', + menu: true, auth: false } }, @@ -33,6 +44,8 @@ const routes: RouteObject[] = [ id: 'project', Component: React.lazy(() => import('@/components/Project')), handle: { + name: '项目', + menu: true, auth: false } } diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts index 2bc780f..33556af 100644 --- a/src/vite-env.d.ts +++ b/src/vite-env.d.ts @@ -1,12 +1,14 @@ /// -type Captcha = { - value: string - base64Src: string +type RouteHandle = { + name?: string + menu?: boolean + auth?: boolean } -type RouteHandle = { - auth: boolean +interface FitFullscreenProps extends PropsWithChildren { + zIndex?: number + backgroundColor?: string } type _Response = { @@ -15,6 +17,11 @@ type _Response = { data: T | null } +type Captcha = { + value: string + base64Src: string +} + type Token = { token: string } From 9148ce234f6ad3e794f29b6a3182d2e50b53dda4 Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Thu, 7 Sep 2023 18:11:25 +0800 Subject: [PATCH 11/58] Optimize navbar --- src/assets/css/header.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/assets/css/header.scss b/src/assets/css/header.scss index 012474f..6d5c914 100644 --- a/src/assets/css/header.scss +++ b/src/assets/css/header.scss @@ -86,7 +86,6 @@ transform: translateY(0); } 100% { - display: none; transform: translateY(-100%); } } From 45956673d206c78d18c03ce892732f66cf08902d Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Thu, 7 Sep 2023 18:11:39 +0800 Subject: [PATCH 12/58] Optimize LoadingMask --- src/components/LoadingMask.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/LoadingMask.tsx b/src/components/LoadingMask.tsx index 0f41ca8..8675314 100644 --- a/src/components/LoadingMask.tsx +++ b/src/components/LoadingMask.tsx @@ -7,7 +7,7 @@ const LoadingMask: React.FC = () => { const loadingIcon = ( <> From 2c8429d01213b15007fe411ef42c57f0d2a4dc48 Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Thu, 7 Sep 2023 18:12:33 +0800 Subject: [PATCH 13/58] Add slogan to home page --- src/assets/css/common.scss | 11 ++++++- src/assets/css/home.scss | 44 +++++++++++++++++++++++++++ src/assets/svg/down.svg | 1 + src/components/FitCenter.tsx | 11 +++++++ src/components/FitFullScreen.tsx | 12 ++++++-- src/components/Home.tsx | 51 ++++++++++++++++++++++++-------- 6 files changed, 115 insertions(+), 15 deletions(-) create mode 100644 src/assets/svg/down.svg create mode 100644 src/components/FitCenter.tsx diff --git a/src/assets/css/common.scss b/src/assets/css/common.scss index 9747a19..c161ddb 100644 --- a/src/assets/css/common.scss +++ b/src/assets/css/common.scss @@ -116,6 +116,15 @@ $font-secondary-color: #9E9E9E; } #fit-fullscreen { - width: 100vw; + position: relative; + width: 100%; height: 100vh; +} + +#fit-center { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; } \ No newline at end of file diff --git a/src/assets/css/home.scss b/src/assets/css/home.scss index e69de29..5397f58 100644 --- a/src/assets/css/home.scss +++ b/src/assets/css/home.scss @@ -0,0 +1,44 @@ +@use "mixins" as mixins; + +.center-box { + display: flex; + flex-direction: column; +} + +.big-logo { + font: { + size: 5em; + weight: bold; + }; + color: #666; +} + +.slogan { + font: { + size: 1.3em; + style: italic; + }; + color: #666; +} + +.scroll-to-down { + position: absolute; + bottom: 20px; + animation: 1.5s infinite; + @include mixins.unique-keyframes { + 0%, + 100% { + -ms-filter: none; + filter: none; + opacity: 1; + transform: translateY(10px); + } + + 50% { + -ms-filter: alpha(opacity=40); + filter: alpha(opacity=40); + opacity: .4; + transform: translateY(-10px); + } + } +} \ No newline at end of file diff --git a/src/assets/svg/down.svg b/src/assets/svg/down.svg new file mode 100644 index 0000000..872d226 --- /dev/null +++ b/src/assets/svg/down.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/FitCenter.tsx b/src/components/FitCenter.tsx new file mode 100644 index 0000000..15bee2c --- /dev/null +++ b/src/components/FitCenter.tsx @@ -0,0 +1,11 @@ +import React from 'react' + +const FitCenter: React.FC = (props: PropsWithChildren) => { + return ( + <> +
{props.children}
+ + ) +} + +export default FitCenter diff --git a/src/components/FitFullScreen.tsx b/src/components/FitFullScreen.tsx index fab7cc3..5a6d7bb 100644 --- a/src/components/FitFullScreen.tsx +++ b/src/components/FitFullScreen.tsx @@ -1,9 +1,17 @@ import React from 'react' -const FitFullScreen: React.FC = (props: PropsWithChildren) => { +const FitFullScreen: React.FC = (props: FitFullscreenProps) => { return ( <> -
{props.children}
+
+ {props.children} +
) } diff --git a/src/components/Home.tsx b/src/components/Home.tsx index e73e06a..1eeda90 100644 --- a/src/components/Home.tsx +++ b/src/components/Home.tsx @@ -1,22 +1,49 @@ import React from 'react' import '@/assets/css/home.scss' -import { MainFrameworkContext } from '@/pages/MainFramework' +import FitFullScreen from '@/components/FitFullScreen.tsx' +import FitCenter from '@/components/FitCenter.tsx' +import Icon from '@ant-design/icons' const Home: React.FC = () => { - const { - navbarHiddenState: { navbarHidden, setNavbarHidden } - } = useContext(MainFrameworkContext) - const handleButtonClick = () => { - setNavbarHidden(!navbarHidden) + const [slogan, setSlogan] = useState('') + const [sloganType, setSloganType] = useState(true) + const typeText = '/* 因为热爱 所以折腾 */' + if (sloganType) { + setTimeout(() => { + if (slogan.length < typeText.length) { + setSlogan(typeText.substring(0, slogan.length + 1)) + } else { + setSloganType(false) + } + }, 150) + } else { + setTimeout(() => { + if (slogan.length > 0) { + setSlogan(typeText.substring(0, slogan.length - 1)) + } else { + setSloganType(true) + } + }, 50) } + return ( <> -

Home

-
- - {navbarHidden ? '显示' : '隐藏'} - -
+ + +
+
FatWeb
+ + {slogan || <> } + +
+
+ +
+ + ) } From e191881a33614e5d269d9f43804d09f70befeb7e Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Fri, 8 Sep 2023 00:48:05 +0800 Subject: [PATCH 14/58] Add HideScrollbar --- src/assets/css/hide-scrollbar.scss | 15 ++++++ src/components/HideScrollbar.tsx | 47 ++++++++++++++++++ src/components/Home.tsx | 1 + src/pages/MainFramework.tsx | 77 ++++++++++++++++-------------- 4 files changed, 103 insertions(+), 37 deletions(-) create mode 100644 src/assets/css/hide-scrollbar.scss create mode 100644 src/components/HideScrollbar.tsx diff --git a/src/assets/css/hide-scrollbar.scss b/src/assets/css/hide-scrollbar.scss new file mode 100644 index 0000000..fe32d78 --- /dev/null +++ b/src/assets/css/hide-scrollbar.scss @@ -0,0 +1,15 @@ +body { + overflow: hidden; +} + +#root { + height: 100vh; + width: 100vw; +} + +#hide-scrollbar { + position: relative; + height: 100vh; + width: 100vw; + overflow: scroll; +} \ No newline at end of file diff --git a/src/components/HideScrollbar.tsx b/src/components/HideScrollbar.tsx new file mode 100644 index 0000000..43fccf7 --- /dev/null +++ b/src/components/HideScrollbar.tsx @@ -0,0 +1,47 @@ +import React, { PropsWithChildren } from 'react' +import '@/assets/css/hide-scrollbar.scss' + +const HideScrollbar: React.FC = (prop: PropsWithChildren) => { + const hideScrollbarRef = useRef(null) + const [verticalScrollbarWidth, setVerticalScrollbarWidth] = useState(0) + const [horizontalScrollbarWidth, setHorizontalScrollbarWidth] = useState(0) + + useEffect(() => { + const hideScrollbarElement = hideScrollbarRef.current + + const windowResizeListener = () => { + setVerticalScrollbarWidth( + (hideScrollbarElement?.offsetWidth ?? 0) - (hideScrollbarElement?.clientWidth ?? 0) + ) + setHorizontalScrollbarWidth( + (hideScrollbarElement?.offsetHeight ?? 0) - + (hideScrollbarElement?.clientHeight ?? 0) + ) + + return windowResizeListener + } + + window.addEventListener('resize', windowResizeListener()) + + return () => { + window.removeEventListener('resize', windowResizeListener()) + } + }, []) + + return ( + <> +
+ {prop.children} +
+ + ) +} + +export default HideScrollbar diff --git a/src/components/Home.tsx b/src/components/Home.tsx index 1eeda90..948ef5c 100644 --- a/src/components/Home.tsx +++ b/src/components/Home.tsx @@ -44,6 +44,7 @@ const Home: React.FC = () => {
+ ) } diff --git a/src/pages/MainFramework.tsx b/src/pages/MainFramework.tsx index 4f1a3dd..4648329 100644 --- a/src/pages/MainFramework.tsx +++ b/src/pages/MainFramework.tsx @@ -2,6 +2,7 @@ import React, { createContext } from 'react' import '@/assets/css/header.scss' import LoadingMask from '@/components/LoadingMask.tsx' import router from '@/router' +import HideScrollbar from '@/components/HideScrollbar.tsx' export const MainFrameworkContext = createContext<{ navbarHiddenState: { @@ -22,45 +23,47 @@ const MainFramework: React.FC = () => { return ( <> -
-
- - FatWeb - - -
+ +
+
+ + FatWeb + + +
- - - - - } + - - - -
+ + + + } + > + + + +
+ ) } From e8823b54363103dca29e39914f852844b313f3e2 Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Fri, 8 Sep 2023 00:56:16 +0800 Subject: [PATCH 15/58] Fix unique prop warning --- src/pages/MainFramework.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/MainFramework.tsx b/src/pages/MainFramework.tsx index 4648329..0c45d63 100644 --- a/src/pages/MainFramework.tsx +++ b/src/pages/MainFramework.tsx @@ -33,7 +33,7 @@ const MainFramework: React.FC = () => {