diff --git a/index.html b/index.html index f7f6135..9e1ab79 100644 --- a/index.html +++ b/index.html @@ -10,6 +10,10 @@ /> <title>pure-admin-thin</title> <link rel="icon" href="/favicon.ico" /> + <link + rel="stylesheet" + href="//at.alicdn.com/t/c/font_4406593_6x8qubg8wo.css" + /> <script> window.process = {}; </script> diff --git a/mock/asyncRoutes.ts b/mock/asyncRoutes.ts index da7ec1f..80b1228 100644 --- a/mock/asyncRoutes.ts +++ b/mock/asyncRoutes.ts @@ -2,46 +2,31 @@ * @Author: donghao donghao@supervision.ltd * @Date: 2024-01-12 14:35:28 * @LastEditors: donghao donghao@supervision.ltd - * @LastEditTime: 2024-01-12 17:25:12 + * @LastEditTime: 2024-01-15 13:38:56 * @FilePath: \general-work-web\General-AI-Platform-Web-Client\mock\asyncRoutes.ts * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE */ // 模拟后端动态生成路由 import { MockMethod } from "vite-plugin-mock"; +// import { useI18n } from "vue-i18n"; +// const { t } = useI18n(); /** * roles:页面级别权限,这里模拟二种 "admin"、"common" * admin:管理员角色 * common:普通角色 */ -// const permissionRouter = { -// path: "/permission", -// meta: { -// title: "menus.permission", -// icon: "lollipop", -// rank: 10 -// }, -// children: [ -// { -// path: "/permission/page/index", -// name: "PermissionPage", -// meta: { -// title: "menus.permissionPage", -// roles: ["admin", "common"] -// } -// }, -// { -// path: "/permission/button/index", -// name: "PermissionButton", -// meta: { -// title: "menus.permissionButton", -// roles: ["admin", "common"], -// auths: ["btn_add", "btn_edit", "btn_delete"] -// } -// } -// ] -// }; +const demoRouter = { + path: "/demo/leftTree", + name: "DemoLeftTree", + meta: { + title: "测试", + icon: "lollipop", + roles: ["admin", "common"], + rank: 101 + } +}; export default [ { @@ -50,7 +35,7 @@ export default [ response: () => { return { success: true, - data: [] + data: [demoRouter] }; } } diff --git a/package.json b/package.json index 9e8d645..2c4b3ef 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,7 @@ "echarts-gl": "^2.0.9", "element-plus": "2.3.6", "js-cookie": "^3.0.5", + "lottie-web": "^5.12.2", "mitt": "^3.0.0", "mockjs": "^1.1.0", "nprogress": "^0.2.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index eb1b9d2..b76b062 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -41,6 +41,9 @@ dependencies: js-cookie: specifier: ^3.0.5 version: 3.0.5 + lottie-web: + specifier: ^5.12.2 + version: 5.12.2 mitt: specifier: ^3.0.0 version: 3.0.0 @@ -5524,6 +5527,7 @@ packages: { integrity: sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w== } + requiresBuild: true /jsonfile@6.1.0: resolution: @@ -5808,6 +5812,14 @@ packages: wrap-ansi: 6.2.0 dev: true + /lottie-web@5.12.2: + resolution: + { + integrity: sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg==, + tarball: https://registry.npmmirror.com/lottie-web/-/lottie-web-5.12.2.tgz + } + dev: false + /lru-cache@5.1.1: resolution: { @@ -6696,6 +6708,7 @@ packages: { integrity: sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A== } + requiresBuild: true dependencies: jsonc-parser: 3.2.0 mlly: 1.4.0 @@ -9155,6 +9168,7 @@ packages: { integrity: sha512-TrY6DsjTQQgyS3E3dBaOXf0TpPD8u9FVrVYmKVegJuFw51n/YB9XPt+U6ydzFG5ZIN7+DIjPbNmXoBj9esYhgQ== } + requiresBuild: true /unctx@2.3.1: resolution: diff --git a/public/favicon.ico b/public/favicon.ico index bef93d4..da979d7 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/src/assets/animate/device/01.json b/src/assets/animate/device/01.json new file mode 100644 index 0000000..ea93985 --- /dev/null +++ b/src/assets/animate/device/01.json @@ -0,0 +1,1062 @@ +{ + "nm": "scene1", + "ddd": 0, + "h": 500, + "w": 500, + "meta": { "g": "@lottiefiles/creator 0.48.0" }, + "layers": [ + { + "ty": 0, + "nm": " scene1", + "sr": 1, + "st": 0, + "op": 210, + "ip": 0, + "hd": false, + "ddd": 0, + "bm": 0, + "hasMask": false, + "ao": 0, + "ks": { + "a": { "a": 0, "k": [226.99806213378906, 251] }, + "s": { "a": 0, "k": [100, 100] }, + "sk": { "a": 0, "k": 0 }, + "p": { "a": 0, "k": [226.99806213378906, 251] }, + "r": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 } + }, + "ef": [], + "w": 500, + "h": 500, + "refId": "Scene 1", + "ind": 1 + }, + { + "ty": 0, + "nm": " scene1", + "sr": 1, + "st": 0, + "op": 210, + "ip": 0, + "hd": false, + "ddd": 0, + "bm": 0, + "hasMask": false, + "ao": 0, + "ks": { + "a": { "a": 0, "k": [226.99806213378906, 251] }, + "s": { "a": 0, "k": [100, 100] }, + "sk": { "a": 0, "k": 0 }, + "p": { "a": 0, "k": [226.99806213378906, 251] }, + "r": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 } + }, + "ef": [], + "w": 500, + "h": 500, + "refId": "Scene 1", + "ind": 2 + } + ], + "v": "5.7.0", + "fr": 30, + "op": 210, + "ip": 0, + "assets": [ + { + "nm": "scene1", + "id": "Scene 1", + "layers": [ + { + "ty": 4, + "nm": "Shape Layer 1", + "sr": 1, + "st": 0, + "op": 207.89999999999998, + "ip": 146.99999999999997, + "hd": false, + "ddd": 0, + "bm": 0, + "hasMask": false, + "ao": 0, + "ks": { + "a": { "a": 0, "k": [32.00000000000001, 33] }, + "s": { "a": 0, "k": [500, 500] }, + "sk": { "a": 0, "k": 0 }, + "p": { + "a": 1, + "k": [ + { + "o": { "x": 0.167, "y": 0.167 }, + "i": { "x": 0.833, "y": 0.833 }, + "s": [347, 251], + "t": 148 + }, + { + "o": { "x": 0.167, "y": 0.167 }, + "i": { "x": 0.833, "y": 0.833 }, + "s": [433, 251], + "t": 159 + }, + { + "o": { "x": 0.167, "y": 0.167 }, + "i": { "x": 0.833, "y": 0.833 }, + "s": [433, 251], + "t": 188 + }, + { + "o": { "x": 0.167, "y": 0.167 }, + "i": { "x": 0.833, "y": 0.833 }, + "s": [433, 233], + "t": 191 + }, + { "s": [433, 251], "t": 194 } + ] + }, + "r": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 } + }, + "ef": [], + "shapes": [ + { + "ty": "gr", + "bm": 0, + "hd": false, + "nm": "Group 5", + "it": [ + { + "ty": "sh", + "bm": 0, + "hd": false, + "nm": "Path 5", + "d": 1, + "ks": { + "a": 0, + "k": { + "c": true, + "i": [ + [0, 0], + [0, -11.3888407], + [-4.3333333, 0], + [0, 11.388840700000003], + [9.388840700000003, 0], + [3.1184307999999987, -3.696753659999999], + [5.215011799999999, 0] + ], + "o": [ + [-9.38884075, 0], + [0, 11.388840700000003], + [4.3333333, 0], + [0, -11.3888407], + [-5.215011799999999, 0], + [-3.1184307999999987, -3.696753659999999], + [0, 0] + ], + "v": [ + [19, 6], + [2, 23], + [32, 60], + [62, 23], + [45, 6], + [32, 12.0449665], + [19, 6] + ] + } + } + }, + { + "ty": "fl", + "bm": 0, + "hd": false, + "nm": "Fill", + "c": { + "a": 1, + "k": [ + { + "o": { "x": 0.167, "y": 0.167 }, + "i": { "x": 0.833, "y": 0.833 }, + "s": [0.1137, 0.6392, 0.2235], + "t": 184 + }, + { "s": [0.6392, 0.1137, 0.6157], "t": 191 } + ] + }, + "r": 2, + "o": { "a": 0, "k": 100 } + }, + { + "ty": "tr", + "a": { "a": 0, "k": [32, 33] }, + "s": { "a": 0, "k": [25, 25] }, + "sk": { "a": 0, "k": 0 }, + "p": { "a": 0, "k": [32, 33] }, + "r": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 } + } + ] + } + ], + "ind": 1 + }, + { + "ty": 4, + "nm": "Shape Layer 1", + "sr": 1, + "st": 0, + "op": 207.89999999999998, + "ip": 132.3, + "hd": false, + "ddd": 0, + "bm": 0, + "hasMask": false, + "ao": 0, + "ks": { + "a": { "a": 0, "k": [32.00000000000001, 33] }, + "s": { "a": 0, "k": [500, 500] }, + "sk": { "a": 0, "k": 0 }, + "p": { + "a": 1, + "k": [ + { + "o": { "x": 0.167, "y": 0.167 }, + "i": { "x": 0.833, "y": 0.833 }, + "s": [261, 251], + "t": 133.3 + }, + { + "o": { "x": 0.167, "y": 0.167 }, + "i": { "x": 0.833, "y": 0.833 }, + "s": [347, 251], + "t": 142.3 + }, + { + "o": { "x": 0.167, "y": 0.167 }, + "i": { "x": 0.833, "y": 0.833 }, + "s": [347, 251], + "t": 184 + }, + { + "o": { "x": 0.167, "y": 0.167 }, + "i": { "x": 0.833, "y": 0.833 }, + "s": [347, 237], + "t": 186 + }, + { "s": [347, 251], "t": 189 } + ] + }, + "r": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 } + }, + "ef": [], + "shapes": [ + { + "ty": "gr", + "bm": 0, + "hd": false, + "nm": "Group 5", + "it": [ + { + "ty": "sh", + "bm": 0, + "hd": false, + "nm": "Path 5", + "d": 1, + "ks": { + "a": 0, + "k": { + "c": true, + "i": [ + [0, 0], + [0, -11.3888407], + [-4.3333333, 0], + [0, 11.388840700000003], + [9.388840700000003, 0], + [3.1184307999999987, -3.696753659999999], + [5.215011799999999, 0] + ], + "o": [ + [-9.38884075, 0], + [0, 11.388840700000003], + [4.3333333, 0], + [0, -11.3888407], + [-5.215011799999999, 0], + [-3.1184307999999987, -3.696753659999999], + [0, 0] + ], + "v": [ + [19, 6], + [2, 23], + [32, 60], + [62, 23], + [45, 6], + [32, 12.0449665], + [19, 6] + ] + } + } + }, + { + "ty": "fl", + "bm": 0, + "hd": false, + "nm": "Fill", + "c": { + "a": 1, + "k": [ + { + "o": { "x": 0.167, "y": 0.167 }, + "i": { "x": 0.833, "y": 0.833 }, + "s": [0.1137, 0.6392, 0.2235], + "t": 178 + }, + { "s": [0.6392, 0.1137, 0.6157], "t": 185 } + ] + }, + "r": 2, + "o": { "a": 0, "k": 100 } + }, + { + "ty": "tr", + "a": { "a": 0, "k": [32, 33] }, + "s": { "a": 0, "k": [25, 25] }, + "sk": { "a": 0, "k": 0 }, + "p": { "a": 0, "k": [32, 33] }, + "r": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 } + } + ] + } + ], + "ind": 2 + }, + { + "ty": 4, + "nm": "Shape Layer 1", + "sr": 1, + "st": 0, + "op": 206.99999999999997, + "ip": 117.00000000000001, + "hd": false, + "ddd": 0, + "bm": 0, + "hasMask": false, + "ao": 0, + "ks": { + "a": { "a": 0, "k": [32, 33] }, + "s": { "a": 0, "k": [500, 500] }, + "sk": { "a": 0, "k": 0 }, + "p": { + "a": 1, + "k": [ + { + "o": { "x": 0.167, "y": 0.167 }, + "i": { "x": 0.833, "y": 0.833 }, + "s": [174, 251], + "t": 118 + }, + { + "o": { "x": 0.167, "y": 0.167 }, + "i": { "x": 0.833, "y": 0.833 }, + "s": [261, 251], + "t": 128 + }, + { + "o": { "x": 0.167, "y": 0.167 }, + "i": { "x": 0.833, "y": 0.833 }, + "s": [261, 251], + "t": 178 + }, + { + "o": { "x": 0.167, "y": 0.167 }, + "i": { "x": 0.833, "y": 0.833 }, + "s": [261, 233], + "t": 181 + }, + { "s": [261, 251], "t": 185 } + ] + }, + "r": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 } + }, + "ef": [], + "shapes": [ + { + "ty": "gr", + "bm": 0, + "hd": false, + "nm": "Group 5", + "it": [ + { + "ty": "sh", + "bm": 0, + "hd": false, + "nm": "Path 5", + "d": 1, + "ks": { + "a": 0, + "k": { + "c": true, + "i": [ + [0, 0], + [0, -11.3888407], + [-4.3333333, 0], + [0, 11.388840700000003], + [9.388840700000003, 0], + [3.1184307999999987, -3.696753659999999], + [5.215011799999999, 0] + ], + "o": [ + [-9.38884075, 0], + [0, 11.388840700000003], + [4.3333333, 0], + [0, -11.3888407], + [-5.215011799999999, 0], + [-3.1184307999999987, -3.696753659999999], + [0, 0] + ], + "v": [ + [19, 6], + [2, 23], + [32, 60], + [62, 23], + [45, 6], + [32, 12.0449665], + [19, 6] + ] + } + } + }, + { + "ty": "fl", + "bm": 0, + "hd": false, + "nm": "Fill", + "c": { + "a": 1, + "k": [ + { + "o": { "x": 0.167, "y": 0.167 }, + "i": { "x": 0.833, "y": 0.833 }, + "s": [0.1137, 0.6392, 0.2235], + "t": 173 + }, + { "s": [0.6392, 0.1137, 0.6157], "t": 179 } + ] + }, + "r": 2, + "o": { "a": 0, "k": 100 } + }, + { + "ty": "tr", + "a": { + "a": 0, + "k": [101.60000000000001, 18.599999999999994] + }, + "s": { "a": 0, "k": [25, 25] }, + "sk": { "a": 0, "k": 0 }, + "p": { "a": 0, "k": [49.400000000000006, 29.4] }, + "r": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 } + } + ] + } + ], + "ind": 3 + }, + { + "ty": 4, + "nm": "Shape Layer 1", + "sr": 1, + "st": 0, + "op": 206.99999999999997, + "ip": 105, + "hd": false, + "ddd": 0, + "bm": 0, + "hasMask": false, + "ao": 0, + "ks": { + "a": { "a": 0, "k": [32.00000000000001, 33] }, + "s": { "a": 0, "k": [500, 500] }, + "sk": { "a": 0, "k": 0 }, + "p": { + "a": 1, + "k": [ + { + "o": { "x": 0.167, "y": 0.167 }, + "i": { "x": 0.833, "y": 0.833 }, + "s": [91.49612426757818, 251], + "t": 106 + }, + { + "o": { "x": 0.167, "y": 0.167 }, + "i": { "x": 0.833, "y": 0.833 }, + "s": [174.00000000000003, 251], + "t": 116 + }, + { + "o": { "x": 0.167, "y": 0.167 }, + "i": { "x": 0.833, "y": 0.833 }, + "s": [174.00000000000003, 251], + "t": 173 + }, + { + "o": { "x": 0.167, "y": 0.167 }, + "i": { "x": 0.833, "y": 0.833 }, + "s": [174.00000000000003, 233], + "t": 176 + }, + { "s": [174.00000000000003, 251], "t": 179 } + ] + }, + "r": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 } + }, + "ef": [], + "shapes": [ + { + "ty": "gr", + "bm": 0, + "hd": false, + "nm": "Group 5", + "it": [ + { + "ty": "sh", + "bm": 0, + "hd": false, + "nm": "Path 5", + "d": 1, + "ks": { + "a": 0, + "k": { + "c": true, + "i": [ + [0, 0], + [0, -11.3888407], + [-4.3333333, 0], + [0, 11.388840700000003], + [9.388840700000003, 0], + [3.1184307999999987, -3.696753659999999], + [5.215011799999999, 0] + ], + "o": [ + [-9.38884075, 0], + [0, 11.388840700000003], + [4.3333333, 0], + [0, -11.3888407], + [-5.215011799999999, 0], + [-3.1184307999999987, -3.696753659999999], + [0, 0] + ], + "v": [ + [19, 6], + [2, 23], + [32, 60], + [62, 23], + [45, 6], + [32, 12.0449665], + [19, 6] + ] + } + } + }, + { + "ty": "fl", + "bm": 0, + "hd": false, + "nm": "Fill", + "c": { + "a": 1, + "k": [ + { + "o": { "x": 0.167, "y": 0.167 }, + "i": { "x": 0.833, "y": 0.833 }, + "s": [0.1137, 0.6392, 0.2235], + "t": 168 + }, + { "s": [0.6392, 0.1137, 0.6157], "t": 174 } + ] + }, + "r": 2, + "o": { "a": 0, "k": 100 } + }, + { + "ty": "tr", + "a": { "a": 0, "k": [32, 33] }, + "s": { "a": 0, "k": [25, 25] }, + "sk": { "a": 0, "k": 0 }, + "p": { "a": 0, "k": [32, 33] }, + "r": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 } + } + ] + } + ], + "ind": 4 + }, + { + "ty": 4, + "nm": "Shape Layer 1", + "sr": 1, + "st": 0, + "op": 207.89999999999998, + "ip": 86.1, + "hd": false, + "ddd": 0, + "bm": 0, + "hasMask": false, + "ao": 0, + "ks": { + "a": { "a": 0, "k": [32, 33] }, + "s": { "a": 0, "k": [500, 500] }, + "sk": { "a": 0, "k": 0 }, + "p": { + "a": 1, + "k": [ + { + "o": { "x": 0.167, "y": 0.167 }, + "i": { "x": 0.833, "y": 0.833 }, + "s": [250, 251], + "t": 98.1 + }, + { + "o": { "x": 0.167, "y": 0.167 }, + "i": { "x": 0.833, "y": 0.833 }, + "s": [91.49612426757815, 251], + "t": 103.1 + }, + { + "o": { "x": 0.167, "y": 0.167 }, + "i": { "x": 0.833, "y": 0.833 }, + "s": [91.49612426757815, 251], + "t": 166 + }, + { + "o": { "x": 0.167, "y": 0.167 }, + "i": { "x": 0.833, "y": 0.833 }, + "s": [91.49612426757815, 232], + "t": 170 + }, + { "s": [91.49612426757815, 251], "t": 174 } + ] + }, + "r": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 } + }, + "ef": [], + "shapes": [ + { + "ty": "gr", + "bm": 0, + "hd": false, + "nm": "Group 5", + "it": [ + { + "ty": "sh", + "bm": 0, + "hd": false, + "nm": "Path 5", + "d": 1, + "ks": { + "a": 0, + "k": { + "c": true, + "i": [ + [0, 0], + [0, -11.3888407], + [-4.3333333, 0], + [0, 11.388840700000003], + [9.388840700000003, 0], + [3.1184307999999987, -3.696753659999999], + [5.215011799999999, 0] + ], + "o": [ + [-9.38884075, 0], + [0, 11.388840700000003], + [4.3333333, 0], + [0, -11.3888407], + [-5.215011799999999, 0], + [-3.1184307999999987, -3.696753659999999], + [0, 0] + ], + "v": [ + [19, 6], + [2, 23], + [32, 60], + [62, 23], + [45, 6], + [32, 12.0449665], + [19, 6] + ] + } + } + }, + { + "ty": "fl", + "bm": 0, + "hd": false, + "nm": "Fill", + "c": { + "a": 1, + "k": [ + { + "o": { "x": 0.167, "y": 0.167 }, + "i": { "x": 0.833, "y": 0.833 }, + "s": [0, 0, 0], + "t": 80 + }, + { + "o": { "x": 0.167, "y": 0.167 }, + "i": { "x": 0.833, "y": 0.833 }, + "s": [0.2078, 0.4039, 0.8941], + "t": 86.1 + }, + { + "o": { "x": 0.167, "y": 0.167 }, + "i": { "x": 0.833, "y": 0.833 }, + "s": [0.1137, 0.6392, 0.2235], + "t": 96.1 + }, + { + "o": { "x": 0.167, "y": 0.167 }, + "i": { "x": 0.833, "y": 0.833 }, + "s": [0.1137, 0.6392, 0.2235], + "t": 164 + }, + { "s": [0.6392, 0.1137, 0.6157], "t": 169 } + ] + }, + "r": 2, + "o": { "a": 0, "k": 100 } + }, + { + "ty": "tr", + "a": { "a": 0, "k": [32, 33] }, + "s": { + "a": 1, + "k": [ + { + "o": { "x": 0.167, "y": 0.167 }, + "i": { "x": 0.833, "y": 0.833 }, + "s": [100, 100], + "t": 86.1 + }, + { "s": [25, 25], "t": 98.1 } + ] + }, + "sk": { "a": 0, "k": 0 }, + "p": { "a": 0, "k": [32, 33] }, + "r": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 } + } + ] + } + ], + "ind": 5 + }, + { + "ty": 4, + "nm": "Shape Layer 1", + "sr": 1, + "st": 0, + "op": 105, + "ip": 46.5, + "hd": false, + "ddd": 0, + "bm": 0, + "hasMask": false, + "ao": 0, + "ks": { + "a": { "a": 0, "k": [32, 33] }, + "s": { "a": 0, "k": [500, 500] }, + "sk": { "a": 0, "k": 0 }, + "p": { "a": 0, "k": [250, 251] }, + "r": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 } + }, + "ef": [], + "shapes": [ + { + "ty": "gr", + "bm": 0, + "hd": false, + "nm": "Group 5", + "it": [ + { + "ty": "sh", + "bm": 0, + "hd": false, + "nm": "Path 5", + "d": 1, + "ks": { + "a": 0, + "k": { + "c": true, + "i": [ + [0, 0], + [0, -11.3888407], + [-4.3333333, 0], + [0, 11.388840700000003], + [9.388840700000003, 0], + [3.1184307999999987, -3.696753659999999], + [5.215011799999999, 0] + ], + "o": [ + [-9.38884075, 0], + [0, 11.388840700000003], + [4.3333333, 0], + [0, -11.3888407], + [-5.215011799999999, 0], + [-3.1184307999999987, -3.696753659999999], + [0, 0] + ], + "v": [ + [19, 6], + [2, 23], + [32, 60], + [62, 23], + [45, 6], + [32, 12.0449665], + [19, 6] + ] + } + } + }, + { + "ty": "fl", + "bm": 0, + "hd": false, + "nm": "Fill", + "c": { + "a": 1, + "k": [ + { + "o": { "x": 0.167, "y": 0.167 }, + "i": { "x": 0.833, "y": 0.833 }, + "s": [0.8941, 0.2078, 0.2078], + "t": 47 + }, + { "s": [0.2078, 0.4039, 0.8941], "t": 60 } + ] + }, + "r": 2, + "o": { + "a": 1, + "k": [ + { + "o": { "x": 0.167, "y": 0.167 }, + "i": { "x": 0.833, "y": 0.833 }, + "s": [100], + "t": 82 + }, + { "s": [0], "t": 95 } + ] + } + }, + { + "ty": "tr", + "a": { "a": 0, "k": [32, 33] }, + "s": { + "a": 1, + "k": [ + { + "o": { "x": 0.167, "y": 0.167 }, + "i": { "x": 0.833, "y": 0.833 }, + "s": [100, 100], + "t": 46.5 + }, + { + "o": { "x": 0.167, "y": 0.167 }, + "i": { "x": 0.833, "y": 0.833 }, + "s": [120, 120], + "t": 65.5 + }, + { + "o": { "x": 0.167, "y": 0.167 }, + "i": { "x": 0.833, "y": 0.833 }, + "s": [90, 90], + "t": 67.5 + }, + { + "o": { "x": 0.167, "y": 0.167 }, + "i": { "x": 0.833, "y": 0.833 }, + "s": [110, 110], + "t": 73.5 + }, + { + "o": { "x": 0.167, "y": 0.167 }, + "i": { "x": 0.833, "y": 0.833 }, + "s": [97, 97], + "t": 78.5 + }, + { + "o": { "x": 0.167, "y": 0.167 }, + "i": { "x": 0.833, "y": 0.833 }, + "s": [102, 102], + "t": 82.5 + }, + { "s": [100, 100], "t": 86.5 } + ] + }, + "sk": { "a": 0, "k": 0 }, + "p": { "a": 0, "k": [32, 33] }, + "r": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 } + } + ] + } + ], + "ind": 6 + }, + { + "ty": 4, + "nm": "Shape Layer 1", + "sr": 1, + "st": 0, + "op": 58.50000000000001, + "ip": 0, + "hd": false, + "ddd": 0, + "bm": 0, + "hasMask": false, + "ao": 0, + "ks": { + "a": { "a": 0, "k": [32, 33] }, + "s": { "a": 0, "k": [500, 500] }, + "sk": { "a": 0, "k": 0 }, + "p": { "a": 0, "k": [250, 251] }, + "r": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 } + }, + "ef": [], + "shapes": [ + { + "ty": "gr", + "bm": 0, + "hd": false, + "nm": "Group 5", + "it": [ + { + "ty": "sh", + "bm": 0, + "hd": false, + "nm": "Path 5", + "d": 1, + "ks": { + "a": 0, + "k": { + "c": true, + "i": [ + [0, 0], + [0, -11.3888407], + [-4.3333333, 0], + [0, 11.388840700000003], + [9.388840700000003, 0], + [3.1184307999999987, -3.696753659999999], + [5.215011799999999, 0] + ], + "o": [ + [-9.38884075, 0], + [0, 11.388840700000003], + [4.3333333, 0], + [0, -11.3888407], + [-5.215011799999999, 0], + [-3.1184307999999987, -3.696753659999999], + [0, 0] + ], + "v": [ + [19, 6], + [2, 23], + [32, 60], + [62, 23], + [45, 6], + [32, 12.0449665], + [19, 6] + ] + } + } + }, + { + "ty": "fl", + "bm": 0, + "hd": false, + "nm": "Fill", + "c": { "a": 0, "k": [0.8941, 0.2078, 0.2078] }, + "r": 2, + "o": { "a": 0, "k": 100 } + }, + { + "ty": "tr", + "a": { "a": 0, "k": [32, 33] }, + "s": { + "a": 1, + "k": [ + { + "o": { "x": 0.167, "y": 0.167 }, + "i": { "x": 0.833, "y": 0.833 }, + "s": [100, 100], + "t": 0 + }, + { + "o": { "x": 0.167, "y": 0.167 }, + "i": { "x": 0.833, "y": 0.833 }, + "s": [120, 120], + "t": 19 + }, + { + "o": { "x": 0.167, "y": 0.167 }, + "i": { "x": 0.833, "y": 0.833 }, + "s": [90, 90], + "t": 27 + }, + { + "o": { "x": 0.167, "y": 0.167 }, + "i": { "x": 0.833, "y": 0.833 }, + "s": [110, 110], + "t": 33 + }, + { + "o": { "x": 0.167, "y": 0.167 }, + "i": { "x": 0.833, "y": 0.833 }, + "s": [97, 97], + "t": 38 + }, + { + "o": { "x": 0.167, "y": 0.167 }, + "i": { "x": 0.833, "y": 0.833 }, + "s": [102, 102], + "t": 42 + }, + { "s": [100, 100], "t": 46 } + ] + }, + "sk": { "a": 0, "k": 0 }, + "p": { "a": 0, "k": [32, 33] }, + "r": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 } + } + ] + } + ], + "ind": 7 + } + ] + } + ] +} diff --git a/src/assets/svg/menu/welcome.svg b/src/assets/svg/menu/welcome.svg new file mode 100644 index 0000000..d5bb5b8 --- /dev/null +++ b/src/assets/svg/menu/welcome.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" class="re-screen" color="#00000073" viewBox="0 0 16 16"><path fill="currentColor" d="M3 12h10V4H3v8zm2-6h6v4H5V6zM2 6H1V2.5l.5-.5H5v1H2v3zm13-3.5V6h-1V3h-3V2h3.5l.5.5zM14 10h1v3.5l-.5.5H11v-1h3v-3zM2 13h3v1H1.5l-.5-.5V10h1v3z"/></svg> \ No newline at end of file diff --git a/src/assets/svg/menu/workbench.svg b/src/assets/svg/menu/workbench.svg new file mode 100644 index 0000000..bb01465 --- /dev/null +++ b/src/assets/svg/menu/workbench.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" class="re-screen" color="#00000073" viewBox="0 0 16 16"><path fill="currentColor" d="M3.5 4H1V3h2V1h1v2.5l-.5.5zM13 3V1h-1v2.5l.5.5H15V3h-2zm-1 9.5V15h1v-2h2v-1h-2.5l-.5.5zM1 12v1h2v2h1v-2.5l-.5-.5H1zm11-1.5-.5.5h-7l-.5-.5v-5l.5-.5h7l.5.5v5zM10 7H6v2h4V7z"/></svg> \ No newline at end of file diff --git a/src/components/CustomTree/index.ts b/src/components/CustomTree/index.ts new file mode 100644 index 0000000..5580aee --- /dev/null +++ b/src/components/CustomTree/index.ts @@ -0,0 +1,5 @@ +import collapseTree from "./src/collapseTree"; + +const CollapseTree = collapseTree; + +export { CollapseTree }; diff --git a/src/components/CustomTree/src/collapseTree.tsx b/src/components/CustomTree/src/collapseTree.tsx new file mode 100644 index 0000000..7187381 --- /dev/null +++ b/src/components/CustomTree/src/collapseTree.tsx @@ -0,0 +1,27 @@ +/* + * @Author: donghao donghao@supervision.ltd + * @Date: 2024-01-15 14:34:20 + * @LastEditors: donghao donghao@supervision.ltd + * @LastEditTime: 2024-01-15 15:21:52 + * @FilePath: \general-work-web\General-AI-Platform-Web-Client\src\components\CustomTree\src\collapseTree.tsx + * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE + */ + +import { defineComponent, ref } from "vue"; + +export default defineComponent({ + name: "CollapseTree", + props: { + value: { + type: undefined, + default: [] + } + }, + setup() { + const count = ref<number>(1); + + return () => { + return <div>123{count}</div>; + }; + } +}); diff --git a/src/layout/components/appMain.vue b/src/layout/components/appMain.vue index cc6bca4..c7cbba1 100644 --- a/src/layout/components/appMain.vue +++ b/src/layout/components/appMain.vue @@ -1,27 +1,27 @@ <script setup lang="ts"> -import { useGlobal } from "@pureadmin/utils"; -import backTop from "@/assets/svg/back_top.svg?component"; -import { h, computed, Transition, defineComponent } from "vue"; -import { usePermissionStoreHook } from "@/store/modules/permission"; +// import { useGlobal } from "@pureadmin/utils"; +// import backTop from "@/assets/svg/back_top.svg?component"; +// import { h, computed, Transition, defineComponent } from "vue"; +// import { usePermissionStoreHook } from "@/store/modules/permission"; const props = defineProps({ fixedHeader: Boolean }); -const { - // $storage, - $config -} = useGlobal<GlobalPropertiesApi>(); +// const { +// // $storage, +// $config +// } = useGlobal<GlobalPropertiesApi>(); -const keepAlive = computed(() => { - return $config?.KeepAlive; -}); +// const keepAlive = computed(() => { +// return $config?.KeepAlive; +// }); -const transitions = computed(() => { - return route => { - return route.meta.transition; - }; -}); +// const transitions = computed(() => { +// return route => { +// return route.meta.transition; +// }; +// }); // const hideTabs = computed(() => { // return $storage?.configure.hideTabs; @@ -41,92 +41,48 @@ const transitions = computed(() => { // ]; // }); -const transitionMain = defineComponent({ - render() { - return h( - Transition, - { - name: - transitions.value(this.route) && - this.route.meta.transition.enterTransition - ? "pure-classes-transition" - : (transitions.value(this.route) && - this.route.meta.transition.name) || - "fade-transform", - enterActiveClass: - transitions.value(this.route) && - `animate__animated ${this.route.meta.transition.enterTransition}`, - leaveActiveClass: - transitions.value(this.route) && - `animate__animated ${this.route.meta.transition.leaveTransition}`, - mode: "out-in", - appear: true - }, - { - default: () => [this.$slots.default()] - } - ); - }, - props: { - route: { - type: undefined, - required: true - } - } -}); +// const transitionMain = defineComponent({ +// render() { +// return h( +// Transition, +// { +// name: +// transitions.value(this.route) && +// this.route.meta.transition.enterTransition +// ? "pure-classes-transition" +// : (transitions.value(this.route) && +// this.route.meta.transition.name) || +// "fade-transform", +// enterActiveClass: +// transitions.value(this.route) && +// `animate__animated ${this.route.meta.transition.enterTransition}`, +// leaveActiveClass: +// transitions.value(this.route) && +// `animate__animated ${this.route.meta.transition.leaveTransition}`, +// mode: "out-in", +// appear: true +// }, +// { +// default: () => [this.$slots.default()] +// } +// ); +// }, +// props: { +// route: { +// type: undefined, +// required: true +// } +// } +// }); </script> <template> <section :class="[props.fixedHeader ? 'app-main' : 'app-main-nofixed-header']" > - <router-view> - <template #default="{ Component, route }"> - <el-scrollbar v-if="props.fixedHeader"> - <el-backtop title="回到顶部" target=".app-main .el-scrollbar__wrap"> - <backTop /> - </el-backtop> - <transitionMain :route="route" style="margin: 0"> - <keep-alive - v-if="keepAlive" - :include="usePermissionStoreHook().cachePageList" - > - <component - :is="Component" - :key="route.fullPath" - class="main-content" - /> - </keep-alive> - <component - v-else - :is="Component" - :key="route.fullPath" - class="main-content" - /> - </transitionMain> - </el-scrollbar> - <div v-else> - <transitionMain :route="route"> - <keep-alive - v-if="keepAlive" - :include="usePermissionStoreHook().cachePageList" - > - <component - :is="Component" - :key="route.fullPath" - class="main-content" - /> - </keep-alive> - <component - v-else - :is="Component" - :key="route.fullPath" - class="main-content" - /> - </transitionMain> - </div> - </template> - </router-view> + <!-- TODO 使用keepAlive,解决路由切换页面不展示问题 --> + + <router-view /> </section> </template> diff --git a/src/layout/components/sidebar/vertical.vue b/src/layout/components/sidebar/vertical.vue index 8420b47..37efdc5 100644 --- a/src/layout/components/sidebar/vertical.vue +++ b/src/layout/components/sidebar/vertical.vue @@ -1,9 +1,8 @@ -<!-- TODO_welcome 左侧菜单栏 --> <script setup lang="ts"> import Logo from "./logo.vue"; -import { useRoute } from "vue-router"; +import { useRoute, useRouter } from "vue-router"; import { emitter } from "@/utils/mitt"; -import SidebarItem from "./sidebarItem.vue"; +// import SidebarItem from "./sidebarItem.vue"; // import leftCollapse from "./leftCollapse.vue"; import { useNav } from "@/layout/hooks/useNav"; import { responsiveStorageNameSpace } from "@/config"; @@ -13,6 +12,7 @@ import { usePermissionStoreHook } from "@/store/modules/permission"; import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue"; const route = useRoute(); +const router = useRouter(); const showLogo = ref( storageLocal().getItem<StorageConfigs>( `${responsiveStorageNameSpace()}configure` @@ -43,6 +43,8 @@ const defaultActive = computed(() => !isAllEmpty(route.meta?.activePath) ? route.meta.activePath : route.path ); +const activeName = ref(route.name || "Home"); + function getSubMenuData() { let path = ""; path = defaultActive.value; @@ -61,6 +63,17 @@ function getSubMenuData() { subMenuData.value = parenetRoute?.children; } +// 改变路由 +function changeRoute(routes) { + console.log("changeRoute_routes", routes); + router.push({ path: routes.path }); + activeName.value = routes.name; +} + +// const fetchMenuIcon = routes => { +// return workbenchIcon; +// }; + watch( () => [route.path, usePermissionStoreHook().wholeMenus], () => { @@ -91,7 +104,7 @@ onBeforeUnmount(() => { wrap-class="scrollbar-wrapper" :class="[device === 'mobile' ? 'mobile' : 'pc']" > - <el-menu + <!-- <el-menu router unique-opened mode="vertical" @@ -107,19 +120,25 @@ onBeforeUnmount(() => { :base-path="routes.path" class="select-none outer-most" /> - </el-menu> + </el-menu> --> - <!-- <ul class="menu_box"> - <li v-for="routes in menuData" :key="routes.path" > - <p>{{routes.meta.title}}</p> + <ul class="menu_box"> + <li + class="text-center" + :class="[activeName === routes.name ? 'active' : '']" + v-for="routes in menuData" + :key="routes.path" + @click="changeRoute(routes)" + > + <div class="flex justify-center"> + <!-- TODO 使用真实图标 --> + <i style="width: 24px; height: 24px" class="iconfont icon-shouye" /> + <!-- <img style="width: 24px;" src="/logo.svg" alt=""> --> + </div> + <p>{{ routes.meta.title }}</p> </li> - </ul> --> + </ul> </el-scrollbar> - <!-- <leftCollapse - v-if="device !== 'mobile'" - :is-active="pureApp.sidebar.opened" - @toggleClick="toggleSideBar" - /> --> </div> </template> @@ -145,7 +164,25 @@ onBeforeUnmount(() => { /* z-index: 10001; */ & > li { - background-color: red; + /* height: 60px; */ + + /* background-color: red; */ + padding-top: 16px; + + & > p { + padding-top: 6px; + } + + &.active { + /* inset: 0 8px; + margin: 4px 0; */ + clear: both; + content: ""; + background: var(--el-color-primary) !important; + border-radius: 3px; + + /* background-color: #155bd4; */ + } } } } diff --git a/src/router/modules/device.ts b/src/router/modules/device.ts index 13bccc3..e984392 100644 --- a/src/router/modules/device.ts +++ b/src/router/modules/device.ts @@ -4,17 +4,9 @@ export default { title: "设备列表", icon: "homeFilled", // showLink: false, - rank: 2 + rank: 2, + roles: ["admin", "common"] }, - children: [ - { - path: "/device", - name: "DeviceList", - component: () => import("@/views/device/index.vue"), - meta: { - title: "设备列表", - roles: ["admin", "common"] - } - } - ] + component: () => import("@/views/device/index.vue"), + name: "DeviceList" } as RouteConfigsTable; diff --git a/src/style/sidebar.scss b/src/style/sidebar.scss index bbb596e..bc12070 100644 --- a/src/style/sidebar.scss +++ b/src/style/sidebar.scss @@ -1,5 +1,8 @@ /* $sideBarWidth: vertical 模式下主体内容距离网页文档左侧的距离 */ // $bodyMargin: 24px; +.el-scrollbar { + height: auto !important; +} @mixin merge-style($sideBarWidth) { $menuActiveText: #7a80b4; @@ -102,18 +105,14 @@ right: 0; } - .el-scrollbar { - height: calc(100% - 44px); - } - &.has-logo { .el-scrollbar.pc { /* logo: 48px、leftCollapse: 40px、leftCollapse-shadow: 4px */ - height: calc(100% - 92px); + // height: calc(100% - 92px); } .el-scrollbar.mobile { - height: 100%; + // height: 100%; } } diff --git a/src/views/demo/animateDevice.vue b/src/views/demo/animateDevice.vue new file mode 100644 index 0000000..15d667c --- /dev/null +++ b/src/views/demo/animateDevice.vue @@ -0,0 +1,38 @@ +<!-- + * @Author: donghao donghao@supervision.ltd + * @Date: 2024-01-15 11:06:34 + * @LastEditors: donghao donghao@supervision.ltd + * @LastEditTime: 2024-01-15 11:07:03 + * @FilePath: \general-work-web\General-AI-Platform-Web-Client\src\views\demo\animateDevice.vue + * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE +--> +<script setup lang="ts"> +import { ref, onMounted } from "vue"; //引入相关api +import lottie from "lottie-web"; //引入动效库 +import json01 from "@/assets/animate/device/01.json"; //引入下载的动效json + +defineOptions({ + name: "animateDeviceDemo" +}); + +const animation1 = ref(null); //获取dom +function initAnimate() { + console.log(lottie, "lottie"); + lottie.loadAnimation({ + container: animation1.value, //选择渲染dom + renderer: "svg", //渲染格式 + loop: true, //循环播放 + autoplay: true, //是否i自动播放, + animationData: json01 //渲染动效json + }); +} +onMounted(() => { + initAnimate(); +}); +</script> + +<template> + <div> + <div ref="animation1" /> + </div> +</template> diff --git a/src/views/demo/leftTree.vue b/src/views/demo/leftTree.vue new file mode 100644 index 0000000..03f8017 --- /dev/null +++ b/src/views/demo/leftTree.vue @@ -0,0 +1,20 @@ +<!-- + * @Author: donghao donghao@supervision.ltd + * @Date: 2024-01-15 11:22:10 + * @LastEditors: donghao donghao@supervision.ltd + * @LastEditTime: 2024-01-15 15:23:07 + * @FilePath: \general-work-web\General-AI-Platform-Web-Client\src\views\demo\leftTree\index.vue + * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE +--> +<script setup lang="ts"> +import { CollapseTree } from "@/components/CustomTree"; +defineOptions({ + name: "DemoLeftTree" +}); +</script> + +<template> + <div> + <CollapseTree /> + </div> +</template>