From 82acef1ffa8f2be8a6a0741ab1ba6f0b385125b8 Mon Sep 17 00:00:00 2001 From: WenC <450292408@qq.com> Date: Wed, 13 Mar 2024 16:11:28 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 148 ++++-------------- package.json | 7 +- src/components/card/CardProj.tsx | 78 +++++++++ src/components/card/card-proj.css | 76 +++++++++ src/components/list/ListProj.tsx | 39 +++++ src/components/list/list-proj.css | 35 +++++ src/components/menu/MenuTree.tsx | 64 +++++--- src/components/menu/MenuTreeWithTopButton.tsx | 111 +++++++++++++ .../menu/menu-tree-with-top-button.css | 7 + src/components/menu/menu-tree.css | 29 +++- src/components/menu/menu-with-top-button.css | 1 - src/index.css | 8 +- src/interfaces/menu/IMenuTree.ts | 4 +- src/layout/body/body.css | 2 +- src/route/index/index.css | 5 +- src/route/index/index.tsx | 104 +----------- vite.config.ts | 7 +- 17 files changed, 468 insertions(+), 257 deletions(-) create mode 100644 src/components/card/CardProj.tsx create mode 100644 src/components/card/card-proj.css create mode 100644 src/components/list/ListProj.tsx create mode 100644 src/components/list/list-proj.css create mode 100644 src/components/menu/MenuTreeWithTopButton.tsx create mode 100644 src/components/menu/menu-tree-with-top-button.css diff --git a/package-lock.json b/package-lock.json index 62964c1..bc4f6bd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,19 +8,14 @@ "name": "ai-copyright", "version": "0.0.0", "dependencies": { - "@fortawesome/free-regular-svg-icons": "^6.5.1", - "@fortawesome/free-solid-svg-icons": "^6.5.1", - "@fortawesome/react-fontawesome": "^0.2.0", "antd": "^5.15.2", "axios": "^1.6.7", "localforage": "^1.10.0", "match-sorter": "^6.3.4", - "mockjs": "^1.1.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.22.3", - "sort-by": "^1.2.0", - "stylus": "^0.63.0" + "sort-by": "^1.2.0" }, "devDependencies": { "@types/react": "^18.2.56", @@ -47,7 +42,10 @@ "node_modules/@adobe/css-tools": { "version": "4.3.3", "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.3.3.tgz", - "integrity": "sha512-rE0Pygv0sEZ4vBWHlAgJLGDU7Pm8xoO6p3wsEceb7GYAjScrOHpEo8KK/eVkAcnSM+slAEtXjA2JpdjLp4fJQQ==" + "integrity": "sha512-rE0Pygv0sEZ4vBWHlAgJLGDU7Pm8xoO6p3wsEceb7GYAjScrOHpEo8KK/eVkAcnSM+slAEtXjA2JpdjLp4fJQQ==", + "dev": true, + "optional": true, + "peer": true }, "node_modules/@ampproject/remapping": { "version": "2.3.0", @@ -962,64 +960,6 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, - "node_modules/@fortawesome/fontawesome-common-types": { - "version": "6.5.1", - "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.1.tgz", - "integrity": "sha512-GkWzv+L6d2bI5f/Vk6ikJ9xtl7dfXtoRu3YGE6nq0p/FFqA1ebMOAWg3XgRyb0I6LYyYkiAo+3/KrwuBp8xG7A==", - "hasInstallScript": true, - "engines": { - "node": ">=6" - } - }, - "node_modules/@fortawesome/fontawesome-svg-core": { - "version": "6.5.1", - "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.1.tgz", - "integrity": "sha512-MfRCYlQPXoLlpem+egxjfkEuP9UQswTrlCOsknus/NcMoblTH2g0jPrapbcIb04KGA7E2GZxbAccGZfWoYgsrQ==", - "hasInstallScript": true, - "peer": true, - "dependencies": { - "@fortawesome/fontawesome-common-types": "6.5.1" - }, - "engines": { - "node": ">=6" - } - }, - "node_modules/@fortawesome/free-regular-svg-icons": { - "version": "6.5.1", - "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.5.1.tgz", - "integrity": "sha512-m6ShXn+wvqEU69wSP84coxLbNl7sGVZb+Ca+XZq6k30SzuP3X4TfPqtycgUh9ASwlNh5OfQCd8pDIWxl+O+LlQ==", - "hasInstallScript": true, - "dependencies": { - "@fortawesome/fontawesome-common-types": "6.5.1" - }, - "engines": { - "node": ">=6" - } - }, - "node_modules/@fortawesome/free-solid-svg-icons": { - "version": "6.5.1", - "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.1.tgz", - "integrity": "sha512-S1PPfU3mIJa59biTtXJz1oI0+KAXW6bkAb31XKhxdxtuXDiUIFsih4JR1v5BbxY7hVHsD1RKq+jRkVRaf773NQ==", - "hasInstallScript": true, - "dependencies": { - "@fortawesome/fontawesome-common-types": "6.5.1" - }, - "engines": { - "node": ">=6" - } - }, - "node_modules/@fortawesome/react-fontawesome": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz", - "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==", - "dependencies": { - "prop-types": "^15.8.1" - }, - "peerDependencies": { - "@fortawesome/fontawesome-svg-core": "~1 || ~6", - "react": ">=16.3" - } - }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.14", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz", @@ -1917,7 +1857,8 @@ "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", - "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==" + "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", + "dev": true }, "node_modules/brace-expansion": { "version": "2.0.1", @@ -2046,14 +1987,6 @@ "node": ">= 0.8" } }, - "node_modules/commander": { - "version": "12.0.0", - "resolved": "https://registry.npmjs.org/commander/-/commander-12.0.0.tgz", - "integrity": "sha512-MwVNWlYjDTtOjX5PiD7o5pK0UrFU/OYgcJfjjK4RaHZETNtjJqrZa9Y9ds88+A+f+d5lv+561eZ+yCKoS3gbAA==", - "engines": { - "node": ">=18" - } - }, "node_modules/compute-scroll-into-view": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-3.1.0.tgz", @@ -2062,7 +1995,8 @@ "node_modules/concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", - "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==" + "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==", + "dev": true }, "node_modules/convert-source-map": { "version": "2.0.0", @@ -2106,6 +2040,7 @@ "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", + "dev": true, "dependencies": { "ms": "2.1.2" }, @@ -2650,7 +2585,8 @@ "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", - "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==" + "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==", + "dev": true }, "node_modules/fsevents": { "version": "2.3.3", @@ -2679,6 +2615,7 @@ "version": "7.2.3", "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==", + "dev": true, "dependencies": { "fs.realpath": "^1.0.0", "inflight": "^1.0.4", @@ -2710,6 +2647,7 @@ "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "dev": true, "dependencies": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -2719,6 +2657,7 @@ "version": "3.1.2", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", + "dev": true, "dependencies": { "brace-expansion": "^1.1.7" }, @@ -2813,6 +2752,7 @@ "version": "1.0.6", "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==", + "dev": true, "dependencies": { "once": "^1.3.0", "wrappy": "1" @@ -2821,7 +2761,8 @@ "node_modules/inherits": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", - "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" + "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", + "dev": true }, "node_modules/is-extglob": { "version": "2.1.1", @@ -3079,21 +3020,11 @@ "url": "https://github.com/sponsors/isaacs" } }, - "node_modules/mockjs": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/mockjs/-/mockjs-1.1.0.tgz", - "integrity": "sha512-eQsKcWzIaZzEZ07NuEyO4Nw65g0hdWAyurVol1IPl1gahRwY+svqzfgfey8U8dahLwG44d6/RwEzuK52rSa/JQ==", - "dependencies": { - "commander": "*" - }, - "bin": { - "random": "bin/random" - } - }, "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", - "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", + "dev": true }, "node_modules/nanoid": { "version": "3.3.7", @@ -3125,14 +3056,6 @@ "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==", "dev": true }, - "node_modules/object-assign": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", - "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/object-path": { "version": "0.6.0", "resolved": "https://registry.npmjs.org/object-path/-/object-path-0.6.0.tgz", @@ -3145,6 +3068,7 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==", + "dev": true, "dependencies": { "wrappy": "1" } @@ -3221,6 +3145,7 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==", + "dev": true, "engines": { "node": ">=0.10.0" } @@ -3298,21 +3223,6 @@ "node": ">= 0.8.0" } }, - "node_modules/prop-types": { - "version": "15.8.1", - "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", - "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "dependencies": { - "loose-envify": "^1.4.0", - "object-assign": "^4.1.1", - "react-is": "^16.13.1" - } - }, - "node_modules/prop-types/node_modules/react-is": { - "version": "16.13.1", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" - }, "node_modules/proxy-from-env": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", @@ -4101,7 +4011,10 @@ "node_modules/sax": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/sax/-/sax-1.3.0.tgz", - "integrity": "sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==" + "integrity": "sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==", + "dev": true, + "optional": true, + "peer": true }, "node_modules/scheduler": { "version": "0.23.0", @@ -4194,6 +4107,9 @@ "version": "0.7.4", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz", "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==", + "dev": true, + "optional": true, + "peer": true, "engines": { "node": ">= 8" } @@ -4245,6 +4161,9 @@ "version": "0.63.0", "resolved": "https://registry.npmjs.org/stylus/-/stylus-0.63.0.tgz", "integrity": "sha512-OMlgrTCPzE/ibtRMoeLVhOY0RcNuNWh0rhAVqeKnk/QwcuUKQbnqhZ1kg2vzD8VU/6h3FoPTq4RJPHgLBvX6Bw==", + "dev": true, + "optional": true, + "peer": true, "dependencies": { "@adobe/css-tools": "~4.3.3", "debug": "^4.3.2", @@ -4475,7 +4394,8 @@ "node_modules/wrappy": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", - "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==" + "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==", + "dev": true }, "node_modules/yallist": { "version": "3.1.1", diff --git a/package.json b/package.json index 3eb9af0..98b05b7 100644 --- a/package.json +++ b/package.json @@ -10,19 +10,14 @@ "preview": "vite preview" }, "dependencies": { - "@fortawesome/free-regular-svg-icons": "^6.5.1", - "@fortawesome/free-solid-svg-icons": "^6.5.1", - "@fortawesome/react-fontawesome": "^0.2.0", "antd": "^5.15.2", "axios": "^1.6.7", "localforage": "^1.10.0", "match-sorter": "^6.3.4", - "mockjs": "^1.1.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.22.3", - "sort-by": "^1.2.0", - "stylus": "^0.63.0" + "sort-by": "^1.2.0" }, "devDependencies": { "@types/react": "^18.2.56", diff --git a/src/components/card/CardProj.tsx b/src/components/card/CardProj.tsx new file mode 100644 index 0000000..158396c --- /dev/null +++ b/src/components/card/CardProj.tsx @@ -0,0 +1,78 @@ +import './card-proj.css'; +import {DownOutlined, EditOutlined, SearchOutlined, EyeOutlined, FolderOutlined} from '@ant-design/icons'; +import {MenuProps} from 'antd'; +import {Dropdown, Space} from 'antd'; + +const items: MenuProps['items'] = [ + { + key: '1', + label: ( + + 1st menu item + + ), + }, +]; + +export default function CardProj() { + return ( +
+
+
+ 项目名称 +
+
+ 上下文:SDFSDF + 未生成 + 2024-03-02 11:15:35 +
+
+
+
+
+
+ 金额¥:500 +
+
+ + + 编辑 + + + + 查看 + + + + 预览 + +
+
+
+
+ + + e.preventDefault()}> + 功能管理 + + + + + + e.preventDefault()}> + 资料下载 + + + +
+
+ + + 目录 + +
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/card/card-proj.css b/src/components/card/card-proj.css new file mode 100644 index 0000000..6641104 --- /dev/null +++ b/src/components/card/card-proj.css @@ -0,0 +1,76 @@ +.card-proj { + border-radius: 6px; + border: 1px solid var(--color-border); + padding: 15px; +} + +.card-proj .left { + position: unset; +} + +.card-proj .right { + margin: 0; +} + +.card-proj .title { + display: flex; + justify-content: space-between; + align-items: center; +} + +.card-proj hr { + border-color: var(--color-border); + border-style: dashed; + border-left: 0; + border-bottom: 0; + border-right: 0; + margin-block-start: 10px; + margin-block-end: 10px; +} + +.card-proj .title .left { + padding: 5px; + font-weight: bold; +} + +.card-proj .title .right { + padding: 5px; +} + +.card-proj .title .right span { + margin-left: 10px; +} + +.card-proj .title .right span:first-child { + margin-left: 0; +} + +.card-proj .body { + width: unset; + border: unset !important; + padding: 0 !important; +} + +.card-proj .body .line { + display: flex; + justify-content: space-between; + align-items: center; + padding: 5px 0; +} + +.card-proj .body .line .left { + display: flex; +} + +.card-proj .body .line .left span { + margin-right: 10px; +} + +.card-proj .body .line .right span { + margin-left: 5px; +} + +.card-proj .body .line .right span a { + margin-left: 5px; +} + diff --git a/src/components/list/ListProj.tsx b/src/components/list/ListProj.tsx new file mode 100644 index 0000000..5646d9c --- /dev/null +++ b/src/components/list/ListProj.tsx @@ -0,0 +1,39 @@ +import './list-proj.css' +import CardProj from "../card/CardProj.tsx"; +import {useRef, MutableRefObject} from "react"; +import {Input, Pagination} from 'antd'; +import type {SearchProps} from 'antd/es/input/Search'; + +const {Search} = Input; + +const onSearch: SearchProps['onSearch'] = (value, _e, info) => console.log(info?.source, value); + +export default function ListProj() { + + const listProjRef: MutableRefObject = useRef(null); + const listRef: MutableRefObject = useRef(null); + + const domHeight = window.innerHeight - 301; + console.log(domHeight) + + return ( +
+
+ +
+
+
+ + + + + + +
+
+ +
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/list/list-proj.css b/src/components/list/list-proj.css new file mode 100644 index 0000000..48d9c30 --- /dev/null +++ b/src/components/list/list-proj.css @@ -0,0 +1,35 @@ +.list-proj { + width: 100%; + padding: 15px 0; +} + +.list-proj .top { + padding: 0 15px 15px 15px; + display: flex; + justify-content: right; + border-bottom: 1px solid var(--color-border); +} + +.list-proj .body { + width: unset; + margin: 0; +} + +.list-proj .list { + padding: 15px; + overflow: auto; +} + +.list-proj .body .card-proj { + margin-bottom: 10px; +} +.list-proj .body .card-proj:last-child { + margin-bottom: 0; +} + +.list-proj .body .page { + border-top: 1px solid var(--color-border); + padding-top: 15px; + display: flex; + justify-content: right; +} \ No newline at end of file diff --git a/src/components/menu/MenuTree.tsx b/src/components/menu/MenuTree.tsx index 2d79308..0c603d6 100644 --- a/src/components/menu/MenuTree.tsx +++ b/src/components/menu/MenuTree.tsx @@ -1,12 +1,15 @@ import './menu-tree.css'; -import {useContext} from "react"; -import {Axios} from "../../context/Context.ts"; -import {FontAwesomeIcon} from '@fortawesome/react-fontawesome' -import {faCheck, faCaretRight, faCaretDown, faEdit, faPlus, faRemove} from '@fortawesome/free-solid-svg-icons'; +import { + CaretRightOutlined, + CaretDownOutlined, + PlusOutlined, + CloseOutlined, + EditOutlined, + CheckOutlined +} from '@ant-design/icons'; import {IMenuTree, IMenuTreeItem} from "../../interfaces/menu/IMenuTree.ts"; export default function MenuTree(props: IMenuTree) { - const axios = useContext(Axios); const triggerChildren = (item: IMenuTreeItem) => { @@ -18,14 +21,14 @@ export default function MenuTree(props: IMenuTree) { trigger(); } - const renderBtnGroup = (item: IMenuTreeItem) => { - if(item.isEdit) { + const renderBtnGroup = (item: IMenuTreeItem, index: number, parent?: IMenuTreeItem) => { + if (item.isEdit) { return ( <> - { + { props.handleEditSaveClick(item); }}/> - { + { props.handleEditCancelClick(item); }}/> @@ -33,35 +36,44 @@ export default function MenuTree(props: IMenuTree) { } return ( <> - { + { props.handleEditClick(item); }}/> - { + { props.handleAddClick(item); }}/> - { - props.handleRemoveClick(item); + { + props.handleRemoveClick(item, index, parent); }}/> ); } const renderLabel = (item: IMenuTreeItem) => { - if(item.isEdit) { - return { - item.name = e.target.value; - props.handleNameChange(item); - }}/> + if (item.isEdit) { + const width = 180 - 30 - item.level * 10; + return { + item.name = e.target.value; + props.handleNameChange(item); + }}/> } - const icon = item.isOpen ? faCaretDown : faCaretRight; + const icon = item.isOpen ? { + triggerChildren(item) + }}/> : { + triggerChildren(item) + }}/>; + const width = 180 - 50 - (item.level * 10) - (5 + (item.isParent ? 8.75 : 0)); return ( <> - {item.isParent ? { - triggerChildren(item) - }}/> : <>} - { - triggerChildren(item) - }}>{item.name} + {item.isParent ? icon : <>} + { + triggerChildren(item) + }}>{item.name} ) } @@ -76,7 +88,7 @@ export default function MenuTree(props: IMenuTree) {
  • {renderLabel(item)}
    -
    {renderBtnGroup(item)}
    +
    {renderBtnGroup(item, index, parent)}
    {renderChildrenMenu}
  • diff --git a/src/components/menu/MenuTreeWithTopButton.tsx b/src/components/menu/MenuTreeWithTopButton.tsx new file mode 100644 index 0000000..716be14 --- /dev/null +++ b/src/components/menu/MenuTreeWithTopButton.tsx @@ -0,0 +1,111 @@ +import './menu-tree-with-top-button.css'; +import MenuTree from "./MenuTree.tsx"; +import {IMenuTreeItem} from "../../interfaces/menu/IMenuTree.ts"; +import {useState} from "react"; + +class MenuTreeItem implements IMenuTreeItem { + children: Array | null; + id: string; + isEdit: boolean; + isOpen: boolean; + isParent: boolean; + level: number; + name: string; + oldName: string; + + constructor(id: string, name: string, level: number) { + this.id = id; + this.name = name; + this.oldName = name; + this.level = level; + this.isEdit = false; + this.isOpen = false; + this.isParent = false; + this.children = null; + } + +} + +export default function MenuTreeWithTopButton() { + + const menuTrees: Array = []; + const [menuTreeArray, setMenuTreeArray] = useState(menuTrees); + + return ( +
    + + { + setMenuTreeArray([ + ...menuTreeArray + ]) + }} + handleExpand={() => { + }} + handleAddClick={(item) => { + item.isParent = true; + item.isOpen = true; + if (!item.children) { + item.children = new Array(); + } + const menuTreeItem = new MenuTreeItem(`${new Date().getTime()}`, item.level + '级目录', item.level + 1); + menuTreeItem.isOpen = true; + item.children.push(menuTreeItem); + setMenuTreeArray([ + ...menuTreeArray + ]) + } + } + handleEditClick={(item) => { + item.isEdit = true; + setMenuTreeArray([ + ...menuTreeArray + ]) + }} + handleRemoveClick={(_item, index, parent) => { + if (parent) { + parent?.children?.splice(index, 1); + } else { + menuTreeArray.splice(index, 1); + } + setMenuTreeArray([ + ...menuTreeArray + ]) + }} + handleEditSaveClick={(item) => { + // 这里发请求,成功之后修改,失败还原 + if (item.name === '') { + return; + } + item.oldName = item.name; + item.isEdit = false; + setMenuTreeArray([ + ...menuTreeArray + ]) + }} + handleEditCancelClick={(item) => { + item.name = item.oldName; + item.isEdit = false; + setMenuTreeArray([ + ...menuTreeArray + ]) + }} + handleNameChange={() => { + setMenuTreeArray([ + ...menuTreeArray + ]) + }} + /> +
    + ) +} \ No newline at end of file diff --git a/src/components/menu/menu-tree-with-top-button.css b/src/components/menu/menu-tree-with-top-button.css new file mode 100644 index 0000000..eb9d509 --- /dev/null +++ b/src/components/menu/menu-tree-with-top-button.css @@ -0,0 +1,7 @@ +.menu-tree-with-top-button { + padding: 0 15px; +} + +.menu-tree-with-top-button .btn { + width: 100%; +} \ No newline at end of file diff --git a/src/components/menu/menu-tree.css b/src/components/menu/menu-tree.css index 2a832e7..6ae0de8 100644 --- a/src/components/menu/menu-tree.css +++ b/src/components/menu/menu-tree.css @@ -1,24 +1,43 @@ .menu-tree { - padding: 0 15px; + margin-top: 10px; } .menu-tree ul { margin-left: 10px; } -.menu-tree ul li {} +.menu-tree ul li { + +} .menu-tree ul li .menu-title { display: flex; justify-content: space-between; align-items: center; + height: 22px; + line-height: 22px; } .menu-tree ul li .menu-title .label { cursor: pointer; + display: flex; + align-items: center; } .menu-tree ul li .menu-title .label span { margin-left: 5px; + display: inline-block; + overflow: hidden; + text-overflow: ellipsis; + word-break: break-all; + white-space: nowrap; + height: 22px; + line-height: 22px; } -.menu-tree ul li .menu-title .label span { - +.menu-tree ul li .menu-title .label .menu-name-input { + border: 0; + outline: 0; + height: 20px; + line-height: 20px; + text-decoration: 1px solid underline; + text-underline-offset: 2px; + background-color: transparent; } .menu-tree ul li .menu-title .icon-group { @@ -29,5 +48,5 @@ } .menu-tree ul li .menu-title .icon-group .icon { cursor: pointer; - padding-left: 5px; + padding-left: 2px; } \ No newline at end of file diff --git a/src/components/menu/menu-with-top-button.css b/src/components/menu/menu-with-top-button.css index c7ca669..8052cfc 100644 --- a/src/components/menu/menu-with-top-button.css +++ b/src/components/menu/menu-with-top-button.css @@ -8,7 +8,6 @@ .menu-with-top-button ul { padding: 10px; - background-color: yellow; } .menu-with-top-button ul li { diff --git a/src/index.css b/src/index.css index cff400f..2134b9f 100644 --- a/src/index.css +++ b/src/index.css @@ -1,5 +1,5 @@ :root { - --color-border: #eeeeee; + --color-border: #d9d9d9; --color-box-shadow: rgba(0, 0, 0, 0.3); --color-red: #ff5722; --color-orange: #ffb800; @@ -19,6 +19,12 @@ html, body { margin: 0; padding: 0; font-size: 14px; + background-color: #EEEEEE; +} + +a { + color: var(--color-dark); + text-decoration-line: none; } ul { diff --git a/src/interfaces/menu/IMenuTree.ts b/src/interfaces/menu/IMenuTree.ts index 5c8fbbc..e4aa8ee 100644 --- a/src/interfaces/menu/IMenuTree.ts +++ b/src/interfaces/menu/IMenuTree.ts @@ -21,11 +21,11 @@ export interface IMenuTree { handleAddClick(item: IMenuTreeItem): void; - handleRemoveClick(item: IMenuTreeItem): void; + handleRemoveClick(item: IMenuTreeItem, index: number, parent?: IMenuTreeItem): void; handleEditSaveClick(item: IMenuTreeItem): void; - handleEditCancelClick(item: IMenuTreeItem): void; + handleEditCancelClick(tem: IMenuTreeItem): void; handleNameChange(item: IMenuTreeItem): void; diff --git a/src/layout/body/body.css b/src/layout/body/body.css index 90004ba..5624718 100644 --- a/src/layout/body/body.css +++ b/src/layout/body/body.css @@ -1,5 +1,5 @@ .body { margin: 0 auto 10px auto; - background-color: red; width: var(--width-workspace); + background-color: #FFFFFF; } \ No newline at end of file diff --git a/src/route/index/index.css b/src/route/index/index.css index 42ac6de..9908fc9 100644 --- a/src/route/index/index.css +++ b/src/route/index/index.css @@ -12,7 +12,8 @@ } .index .right { - margin-left: 235px; + margin-left: 220px; + border-left: 1px solid var(--color-border); + box-sizing: border-box; height: 100%; - background-color: green; } \ No newline at end of file diff --git a/src/route/index/index.tsx b/src/route/index/index.tsx index 86cf0f8..67c1fb2 100644 --- a/src/route/index/index.tsx +++ b/src/route/index/index.tsx @@ -1,33 +1,9 @@ import './index.css'; -import {MouseEvent, useState} from "react"; +import {MouseEvent} from "react"; import {IMenuListItem, IMenuWithTopButton} from "../../interfaces/menu/IMenuWithTopButton.ts"; import MenuWithTopButton from "../../components/menu/MenuWithTopButton.tsx"; -import MenuTree from "../../components/menu/MenuTree.tsx"; -import {IMenuTree, IMenuTreeItem} from "../../interfaces/menu/IMenuTree.ts"; -import {name} from "axios"; - -class MenuTreeItem implements IMenuTreeItem { - children: Array | null; - id: string; - isEdit: boolean; - isOpen: boolean; - isParent: boolean; - level: number; - name: string; - oldName: string; - - constructor(id: string, name: string, level: number) { - this.id = id; - this.name = name; - this.oldName = name; - this.level = level; - this.isEdit = false; - this.isOpen = false; - this.isParent = false; - this.children = null; - } - -} +import MenuTreeWithTopButton from "../../components/menu/MenuTreeWithTopButton.tsx"; +import ListProj from "../../components/list/ListProj.tsx"; const projMenu: IMenuWithTopButton = { button: { @@ -68,8 +44,6 @@ const agentMenu: IMenuWithTopButton = { } export default function Index() { - const menuTrees: Array = []; - const [menuTreeArray, setMenuTreeArray] = useState(menuTrees); return (
    @@ -78,80 +52,16 @@ export default function Index() { list={projMenu.list} handleListItem={projMenu.handleListItem} /> - - { - setMenuTreeArray([ - ...menuTreeArray - ]) - }} - handleExpand={(item) => { - }} - handleAddClick={(item) => { - item.isParent = true; - item.isOpen = true; - if (!item.children) { - item.children = new Array(); - } - const menuTreeItem = new MenuTreeItem(`${new Date().getTime()}`, item.level + '级目录', item.level + 1); - menuTreeItem.isOpen = true; - item.children.push(menuTreeItem); - setMenuTreeArray([ - ...menuTreeArray - ]) - } - } - handleEditClick={(item) => { - item.isEdit = true; - setMenuTreeArray([ - ...menuTreeArray - ]) - }} - handleRemoveClick={(item) => { - - }} - handleEditSaveClick={(item) => { - console.log(item); - // 这里发请求,成功之后修改,失败还原 - if(item.name === '') { - return; - } - item.oldName = item.name; - item.isEdit = false; - setMenuTreeArray([ - ...menuTreeArray - ]) - }} - handleEditCancelClick={(item) => { - item.name = item.oldName; - item.isEdit = false; - setMenuTreeArray([ - ...menuTreeArray - ]) - }} - handleNameChange={(item) => { - setMenuTreeArray([ - ...menuTreeArray - ]) - }} - /> +
    -
    +
    + +
    ) } \ No newline at end of file diff --git a/vite.config.ts b/vite.config.ts index 5a33944..9042286 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,7 +1,10 @@ -import { defineConfig } from 'vite' +import {defineConfig} from 'vite' import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig({ - plugins: [react()], + plugins: [react()], + server: { + host: '0.0.0.0' + } })