Home Explore Help
Register Sign In
jiaxiaoqiang
/
gongyeyitiji4-web
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

页面框架搭建，路由等。

jiaxiaoqiang 5 months ago
parent
c533a67772
commit
6eb6e45d48
19 changed files with 528 additions and 178 deletions
Split View Show Diff Stats
  1. 1 1
      index.html
  2. 0 10
      pnpm-lock.yaml
  3. 3 0
      src/App.vue
  4. 1 0
      src/plugins/permission.ts
  5. 47 7
      src/router/index.ts
  6. 1 1
      src/settings.ts
  7. 26 0
      src/styles/index.scss
  8. 63 56
      src/styles/variables.scss
  9. 148 103
      src/typings/components.d.ts
  10. 15 0
      src/views/main/components/layout.vue
  11. 104 0
      src/views/main/components/menu.vue
  12. 23 0
      src/views/main/main.vue
  13. 9 0
      src/views/modules/applications/apps.vue
  14. 26 0
      src/views/modules/components/ChildHeader.vue
  15. 9 0
      src/views/modules/devices/devs.vue
  16. 15 0
      src/views/modules/home/home.vue
  17. 19 0
      src/views/modules/home/test/test.vue
  18. 9 0
      src/views/modules/workbench/workBench.vue
  19. 9 0
      src/views/modules/workshop/workShop.vue

+ 1 - 1
index.html
View File 

@@ -1,5 +1,5 @@
 
 <!doctype html>
 
-<html lang="en">
 
+<html lang="en" class="dark">
 
   <head>
 
     <meta charset="UTF-8" />
 
     <link rel="icon" href="/favicon.ico" />

+ 0 - 10
pnpm-lock.yaml
View File 

@@ -153,9 +153,6 @@ importers:
 
       fast-glob:
 
         specifier: ^3.3.2
 
         version: 3.3.3
 
-      husky:
 
-        specifier: ^9.0.11
 
-        version: 9.1.7
 
       lint-staged:
 
         specifier: ^15.2.2
 
         version: 15.4.3
 
@@ -2765,11 +2762,6 @@ packages:
 
     resolution: {integrity: sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==}
 
     engines: {node: '>=16.17.0'}
 
 
-  husky@9.1.7:
 
-    resolution: {integrity: sha512-5gs5ytaNjBrh5Ow3zrvdUUY+0VxIuWVL4i9irt6friV+BqdCfmV11CQTWMiBYWHbXhco+J1kHfTOUkePhCDvMA==}
 
-    engines: {node: '>=18'}
 
-    hasBin: true
 
-
 
   i18next@20.6.1:
 
     resolution: {integrity: sha512-yCMYTMEJ9ihCwEQQ3phLo7I/Pwycf8uAx+sRHwwk5U9Aui/IZYgQRyMqXafQOw5QQ7DM1Z+WyEXWIqSuJHhG2A==}
 
 
@@ -7760,8 +7752,6 @@ snapshots:
 
 
   human-signals@5.0.0: {}
 
 
-  husky@9.1.7: {}
 
-
 
   i18next@20.6.1:
 
     dependencies:
 
       '@babel/runtime': 7.26.9

+ 3 - 0
src/App.vue
View File 

@@ -34,4 +34,7 @@ const fontColor = computed(() => {
 
     ? "rgba(255, 255, 255, .15)"
 
     : "rgba(0, 0, 0, .15)";
 
 });
 
+
 
+//设置为深色模式
 
+settingsStore.changeTheme(ThemeEnum.DARK);
 
 </script>

+ 1 - 0
src/plugins/permission.ts
View File 

@@ -4,6 +4,7 @@ import { usePermissionStore } from "@/store/modules/permission";
 
 import NProgress from "@/utils/nprogress";
 
 
 export function setupPermission() {
 
+  return;
 
   // 白名单路由
 
   const whiteList = ["/login"];

+ 47 - 7
src/router/index.ts
View File 

@@ -1,21 +1,61 @@
 
-import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
 
+import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
 
 
 export const Layout = () => import("@/layout/index.vue");
 
 
 // 静态路由
 
 export const constantRoutes: RouteRecordRaw[] = [
 
+  // {
 
+  //   path: "/redirect",
 
+  //   component: Layout,
 
+  //   meta: { hidden: true },
 
+  //   children: [
 
+  //     {
 
+  //       path: "/redirect/:path(.*)",
 
+  //       component: () => import("@/views/redirect/index.vue"),
 
+  //     },
 
+  //   ],
 
+  // },
 
+
 
   {
 
-    path: "/redirect",
 
-    component: Layout,
 
+    path: "/main",
 
+    component: () => import("@/views/main/main.vue"),
 
     meta: { hidden: true },
 
+    redirect: "/main/home",
 
     children: [
 
       {
 
-        path: "/redirect/:path(.*)",
 
-        component: () => import("@/views/redirect/index.vue"),
 
+        path: "home",
 
+        component: () => import("@/views/modules/home/home.vue"),
 
+      },
 
+      {
 
+        path: "work-bench",
 
+        component: () => import("@/views/modules/workbench/workBench.vue"),
 
+      },
 
+      {
 
+        path: "devices",
 
+        component: () => import("@/views/modules/devices/devs.vue"),
 
+      },
 
+      {
 
+        path: "apps",
 
+        component: () => import("@/views/modules/applications/apps.vue"),
 
+      },
 
+      {
 
+        path: "work-shop",
 
+        component: () => import("@/views/modules/workshop/workShop.vue"),
 
       },
 
     ],
 
   },
 
-
 
+  {
 
+    path: "/test",
 
+    component: () => import("@/views/modules/home/test/test.vue"),
 
+    meta: { hidden: true },
 
+    // redirect: "/main/home",
 
+    // children: [
 
+    //   {
 
+    //     path: "test1",
 
+    //     component: () => import("@/views/modules/home/home.vue"),
 
+    //   },
 
+    // ],
 
+  },
 
   {
 
     path: "/login",
 
     component: () => import("@/views/demo/test-dark.vue"),
 
@@ -115,7 +155,7 @@ export const constantRoutes: RouteRecordRaw[] = [
 
  * 创建路由
 
  */
 
 const router = createRouter({
 
-  history: createWebHashHistory(),
 
+  history: createWebHistory(),
 
   routes: constantRoutes,
 
   // 刷新时，滚动条位置还原
 
   scrollBehavior: () => ({ left: 0, top: 0 }),

+ 1 - 1
src/settings.ts
View File 

@@ -8,7 +8,7 @@ const defaultSettings: AppSettings = {
 
   fixedHeader: true,
 
   sidebarLogo: true,
 
   layout: "left",
 
-  theme: "light",
 
+  theme: "dark",
 
   size: "default",
 
   language: "zh-cn",
 
   themeColor: "#409EFF",

+ 26 - 0
src/styles/index.scss
View File 

@@ -36,3 +36,29 @@
 
   background-color: white;
 
   border-radius: 10px;
 
 }
 
+
 
+//二级页面公共样式，上下结构，上面是childHeader
 
+.child-page-container {
 
+  height: 100%;
 
+  width: 100%;
 
+  display: flex;
 
+  flex-direction: column;
 
+  align-items: center;
 
+  justify-content: center;
 
+  background-color: $hj-bg;
 
+
 
+  .child-header {
 
+    width: 100%;
 
+    height: $child-header-height;
 
+    border: 2px solid blue;
 
+    display: flex;
 
+    align-items: center;
 
+    justify-content: space-between;
 
+    padding: 0 72px;
 
+  }
 
+  .child-bottom {
 
+    width: 100%;
 
+    height: calc(100vh - $child-header-height);
 
+    border: 2px solid orange;
 
+  }
 
+}

+ 63 - 56
src/styles/variables.scss
View File 

@@ -8,37 +8,39 @@
 
   --sidebar-logo-background: #2d3748;
 
 
 
-  --hj-red-1: #ff4d4f;
 
-  --hj-orange-1: #fa8c16;
 
-  --hj-yellow-1: #fadb14;
 
-  --hj-green-1: #a0d911;
 
-  --hj-cyan-1: #13c2c2;
 
-  --hj-blue-1: #1890ff;
 
-  --hj-purple-1: #722ed1;
 
-  --hj-white-1: #ffffff;
 
-  --hj-black-1: #000000;
 
-
 
-  --hj-red-2: #ff7875;
 
-  --hj-orange-2: #ffac13;
 
-  --hj-yellow-2: #ffe58f;
 
-  --hj-green-2: #d9ec53;
 
-  --hj-cyan-2: #40a9ff;
 
-  --hj-blue-2: #40a9ff;
 
-  --hj-purple-2: #aa70e4;
 
-  --hj-white-2: #f0f0f0;
 
-  --hj-black-2: #1f1f1f;
 
-
 
-  --hj-red-3: #d93025;
 
-  --hj-orange-3: #eb572c;
 
-  --hj-yellow-3: #d4b110;
 
-  --hj-green-3: #7cb305;
 
+  --hj-red-3: #ff4d4d;
 
+  --hj-orange-3: #fa8c16;
 
+  --hj-yellow-3: #fadb14;
 
+  --hj-green-3: #a0d911;
 
   --hj-cyan-3: #00b96b;
 
   --hj-blue-3: #096dd9;
 
   --hj-purple-3: #531dab;
 
   --hj-white-3: #d9d9d9;
 
   --hj-black-3: #303030;
 
 
-  --hj-bg: #dd6a75;
 
+  --hj-red-2: #ff7a7a;
 
+  --hj-orange-2: #faa31a;
 
+  --hj-yellow-2: #ffe518;
 
+  --hj-green-2: #b2e440;
 
+  --hj-cyan-2: #00d87a;
 
+  --hj-blue-2: #0a85d8;
 
+  --hj-purple-2: #622ebc;
 
+
 
+  --hj-red-1: #ffb2b2;
 
+  --hj-orange-1: #fbad58;
 
+  --hj-yellow-1: #fff168;
 
+  --hj-green-1: #c8e677;
 
+  --hj-cyan-1: #00ec9a;
 
+  --hj-blue-1: #1098d8;
 
+  --hj-purple-1: #7339b8;
 
+
 
+  --hj-white-1: #ffffff;
 
+  --hj-white-2: #f0f0f0;
 
+
 
+  --hj-black-1: #1a1a1a;
 
+  --hj-black-2: #303030;
 
+
 
+  --hj-bg: #fff;
 
 }
 
 
 /** 暗黑主题 */
 
@@ -49,37 +51,39 @@ html.dark {
 
   --menu-hover: rgb(0 0 0 / 20%);
 
   --sidebar-logo-background: rgb(0 0 0 / 20%);
 
 
-  --hj-red-1: #ff4d4d;
 
-  --hj-orange-1: #fa8c16;
 
-  --hj-yellow-1: #fadb14;
 
-  --hj-green-1: #a0d911;
 
-  --hj-cyan-1: #13c2c2;
 
-  --hj-blue-1: #1890ff;
 
-  --hj-purple-1: #722ed1;
 
-  --hj-white-1: #ffffff;
 
-  --hj-black-1: #000000;
 
-
 
-  --hj-red-2: #ff7875;
 
-  --hj-orange-2: #ffac13;
 
-  --hj-yellow-2: #ffe58f;
 
-  --hj-green-2: #d9ec53;
 
-  --hj-cyan-2: #40a9ff;
 
-  --hj-blue-2: #40a9ff;
 
-  --hj-purple-2: #aa70e4;
 
-  --hj-white-2: #f0f0f0;
 
-  --hj-black-2: #1f1f1f;
 
-
 
-  --hj-red-3: #d93025;
 
-  --hj-orange-3: #eb572c;
 
-  --hj-yellow-3: #d4b110;
 
-  --hj-green-3: #7cb305;
 
-  --hj-cyan-3: #00b96b;
 
-  --hj-blue-3: #096dd9;
 
-  --hj-purple-3: #531dab;
 
-  --hj-white-3: #d9d9d9;
 
-  --hj-black-3: #303030;
 
-
 
-  --hj-bg: #47c22c;
 
+  --hj-red-3: #822c2c;
 
+  --hj-orange-3: #8a590f;
 
+  --hj-yellow-3: #8a7000;
 
+  --hj-green-3: #426e32;
 
+  --hj-cyan-3: #005f43;
 
+  --hj-blue-3: #003d7a;
 
+  --hj-purple-3: #3b005c;
 
+  --hj-white-3: #7a7a7a;
 
+  --hj-black-3: #1a1a1a;
 
+
 
+  --hj-red-2: #a14141;
 
+  --hj-orange-2: #b26a10;
 
+  --hj-yellow-2: #b28200;
 
+  --hj-green-2: #57854a;
 
+  --hj-cyan-2: #007655;
 
+  --hj-blue-2: #005199;
 
+  --hj-purple-2: #4b0072;
 
+
 
+  --hj-red-1: #c15a5a;
 
+  --hj-orange-1: #c27a10;
 
+  --hj-yellow-1: #c29000;
 
+  --hj-green-1: #68995c;
 
+  --hj-cyan-1: #008e6a;
 
+  --hj-blue-1: #006ac2;
 
+  --hj-purple-1: #5a178b;
 
+
 
+  --hj-white-1: #f0f0f0;
 
+  --hj-white-2: #d9d9d9;
 
+
 
+  --hj-black-1: #303030;
 
+  --hj-black-2: #424242;
 
+
 
+  --hj-bg: #000;
 
 }
 
 
 $menu-background: var(--menu-background); // 菜单背景色
 
@@ -93,6 +97,9 @@ $sidebar-width-collapsed: 54px; // 侧边栏收缩宽度
 
 $navbar-height: 50px; // 导航栏高度
 
 $tags-view-height: 34px; // TagsView 高度
 
 
+//二级页面上面的header的高度
 
+$child-header-height: 116px;
 
+
 
 $hj-bg: var(--hj-bg);
 
 $hj-red-1: var(--hj-red-1);
 
 $hj-orange-1: var(--hj-orange-1);

+ 148 - 103
src/typings/components.d.ts
View File 

@@ -5,109 +5,154 @@
 
 // Read more: https://github.com/vuejs/core/pull/3399
 
 export { }
 
 
-declare module 'vue' {
 
-  ExcelUpload: typeof import('./../components/Upload/ExcelUpload.vue')['default']
 
-  CommonTable: typeof import('./../components/CommonTable/index.vue')['default']
 
-  AppLink: typeof import('./../components/AppLink/index.vue')['default']
 
-  AppMain: typeof import('./../layout/components/AppMain/index.vue')['default']
 
-  BarChart: typeof import('./../views/dashboard/components/BarChart.vue')['default']
 
-  Breadcrumb: typeof import('./../components/Breadcrumb/index.vue')['default']
 
-  DeptTree: typeof import('./../views/system/user/components/dept-tree.vue')['default']
 
-  Dictionary: typeof import('./../components/Dictionary/index.vue')['default']
 
-  DictItem: typeof import('./../views/system/dict/components/dict-item.vue')['default']
 
-  ElAlert: typeof import('element-plus/es')['ElAlert']
 
-  ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
 
-  ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
 
-  ElButton: typeof import('element-plus/es')['ElButton']
 
-  ElCard: typeof import('element-plus/es')['ElCard']
 
-  ElCol: typeof import('element-plus/es')['ElCol']
 
-  ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
 
-  ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
 
-  ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
 
-  ElDialog: typeof import('element-plus/es')['ElDialog']
 
-  ElDivider: typeof import('element-plus/es')['ElDivider']
 
-  ElDrawer: typeof import('element-plus/es')['ElDrawer']
 
-  ElDropdown: typeof import('element-plus/es')['ElDropdown']
 
-  ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
 
-  ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
 
-  ElForm: typeof import('element-plus/es')['ElForm']
 
-  ElFormItem: typeof import('element-plus/es')['ElFormItem']
 
-  ElIcon: typeof import('element-plus/es')['ElIcon']
 
-  ElImage: typeof import('element-plus/es')['ElImage']
 
-  ElInput: typeof import('element-plus/es')['ElInput']
 
-  ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
 
-  ElLink: typeof import('element-plus/es')['ElLink']
 
-  ElMenu: typeof import('element-plus/es')['ElMenu']
 
-  ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
 
-  ElOption: typeof import('element-plus/es')['ElOption']
 
-  ElPagination: typeof import('element-plus/es')['ElPagination']
 
-  ElPopover: typeof import('element-plus/es')['ElPopover']
 
-  ElRadio: typeof import('element-plus/es')['ElRadio']
 
-  ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
 
-  ElRow: typeof import('element-plus/es')['ElRow']
 
-  ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
 
-  ElSelect: typeof import('element-plus/es')['ElSelect']
 
-  ElStatistic: typeof import('element-plus/es')['ElStatistic']
 
-  ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
 
-  ElSwitch: typeof import('element-plus/es')['ElSwitch']
 
-  ElTable: typeof import('element-plus/es')['ElTable']
 
-  ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
 
-  ElTabPane: typeof import('element-plus/es')['ElTabPane']
 
-  ElTabs: typeof import('element-plus/es')['ElTabs']
 
-  ElTag: typeof import('element-plus/es')['ElTag']
 
-  ElText: (typeof import("element-plus/es"))["ElText"]
 
-  ElTooltip: typeof import('element-plus/es')['ElTooltip']
 
-  ElTree: typeof import('element-plus/es')['ElTree']
 
-  ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
 
-  ElUpload: typeof import('element-plus/es')['ElUpload']
 
-  ElWatermark: typeof import('element-plus/es')['ElWatermark']
 
-  FunnelChart: typeof import('./../views/dashboard/components/FunnelChart.vue')['default']
 
-  GithubCorner: typeof import('./../components/GithubCorner/index.vue')['default']
 
-  Hamburger: typeof import('./../components/Hamburger/index.vue')['default']
 
-  IconSelect: typeof import('./../components/IconSelect/index.vue')['default']
 
-  IEpCaretBottom: typeof import('~icons/ep/caret-bottom')['default']
 
-  IEpCaretTop: typeof import('~icons/ep/caret-top')['default']
 
-  IEpClose: typeof import('~icons/ep/close')['default']
 
-  IEpCollection: (typeof import("~icons/ep/collection"))["default"]
 
-  IEpDelete: typeof import('~icons/ep/delete')['default']
 
-  IEpDownload: typeof import('~icons/ep/download')['default']
 
-  IEpEdit: typeof import('~icons/ep/edit')['default']
 
-  IEpPlus: typeof import('~icons/ep/plus')['default']
 
-  IEpPosition: (typeof import("~icons/ep/position"))["default"]
 
-  IEpQuestionFilled: typeof import('~icons/ep/question-filled')['default']
 
-  IEpRefresh: typeof import('~icons/ep/refresh')['default']
 
-  IEpRefreshLeft: typeof import('~icons/ep/refresh-left')['default']
 
-  IEpSearch: typeof import('~icons/ep/search')['default']
 
-  IEpSetting: (typeof import("~icons/ep/setting"))["default"]
 
-  IEpTop: typeof import('~icons/ep/top')['default']
 
-  IEpUploadFilled: typeof import('~icons/ep/upload-filled')['default']
 
-  LangSelect: typeof import('./../components/LangSelect/index.vue')['default']
 
-  LayoutSelect: typeof import('./../layout/components/Settings/components/LayoutSelect.vue')['default']
 
-  MultiUpload: typeof import('./../components/Upload/MultiUpload.vue')['default']
 
-  NavBar: typeof import('./../layout/components/NavBar/index.vue')['default']
 
-  NavbarLeft: typeof import('./../layout/components/NavBar/components/NavbarLeft.vue')['default']
 
-  NavbarRight: typeof import('./../layout/components/NavBar/components/NavbarRight.vue')['default']
 
-  Pagination: typeof import('./../components/Pagination/index.vue')['default']
 
-  PieChart: typeof import('./../views/dashboard/components/PieChart.vue')['default']
 
-  RadarChart: typeof import('./../views/dashboard/components/RadarChart.vue')['default']
 
-  RightPanel: (typeof import("./../components/RightPanel/index.vue"))["default"]
 
-  RouterLink: typeof import('vue-router')['RouterLink']
 
-  RouterView: typeof import('vue-router')['RouterView']
 
-  Settings: typeof import('./../layout/components/Settings/index.vue')['default']
 
-  Sidebar: typeof import('./../layout/components/Sidebar/index.vue')['default']
 
-  SidebarLogo: typeof import('./../layout/components/Sidebar/components/SidebarLogo.vue')['default']
 
-  SidebarMenu: typeof import('./../layout/components/Sidebar/components/SidebarMenu.vue')['default']
 
-  SidebarMenuItem: typeof import('./../layout/components/Sidebar/components/SidebarMenuItem.vue')['default']
 
-  SidebarMenuItemTitle: typeof import('./../layout/components/Sidebar/components/SidebarMenuItemTitle.vue')['default']
 
-  SidebarMixTopMenu: typeof import('./../layout/components/Sidebar/components/SidebarMixTopMenu.vue')['default']
 
-  SingleUpload: typeof import('./../components/Upload/SingleUpload.vue')['default']
 
-  SizeSelect: typeof import('./../components/SizeSelect/index.vue')['default']
 
-  SvgIcon: typeof import('./../components/SvgIcon/index.vue')['default']
 
-  TagsView: typeof import('./../layout/components/TagsView/index.vue')['default']
 
-  ThemeColorPicker: typeof import('./../layout/components/Settings/components/ThemeColorPicker.vue')['default']
 
-  WangEditor: typeof import('./../components/WangEditor/index.vue')['default']
 
+declare module "vue" {
 
+  ExcelUpload: typeof import("./../components/Upload/ExcelUpload.vue")[
 
+    "default"
 
+  ];
 
+  CommonTable: typeof import("./../components/CommonTable/index.vue")[
 
+    "default"
 
+  ];
 
+  AppLink: typeof import("./../components/AppLink/index.vue")["default"];
 
+  AppMain: typeof import("./../layout/components/AppMain/index.vue")["default"];
 
+  BarChart: typeof import("./../views/dashboard/components/BarChart.vue")[
 
+    "default"
 
+  ];
 
+  Breadcrumb: typeof import("./../components/Breadcrumb/index.vue")["default"];
 
+  DeptTree: typeof import("./../views/system/user/components/dept-tree.vue")[
 
+    "default"
 
+  ];
 
+  Dictionary: typeof import("./../components/Dictionary/index.vue")["default"];
 
+  DictItem: typeof import("./../views/system/dict/components/dict-item.vue")[
 
+    "default"
 
+  ];
 
+  ElAlert: typeof import("element-plus/es")["ElAlert"];
 
+  ElBreadcrumb: typeof import("element-plus/es")["ElBreadcrumb"];
 
+  ElBreadcrumbItem: typeof import("element-plus/es")["ElBreadcrumbItem"];
 
+  ElButton: typeof import("element-plus/es")["ElButton"];
 
+  ElCard: typeof import("element-plus/es")["ElCard"];
 
+  ElCol: typeof import("element-plus/es")["ElCol"];
 
+  ElColorPicker: typeof import("element-plus/es")["ElColorPicker"];
 
+  ElConfigProvider: typeof import("element-plus/es")["ElConfigProvider"];
 
+  ElDatePicker: typeof import("element-plus/es")["ElDatePicker"];
 
+  ElDialog: typeof import("element-plus/es")["ElDialog"];
 
+  ElDivider: typeof import("element-plus/es")["ElDivider"];
 
+  ElDrawer: typeof import("element-plus/es")["ElDrawer"];
 
+  ElDropdown: typeof import("element-plus/es")["ElDropdown"];
 
+  ElDropdownItem: typeof import("element-plus/es")["ElDropdownItem"];
 
+  ElDropdownMenu: typeof import("element-plus/es")["ElDropdownMenu"];
 
+  ElForm: typeof import("element-plus/es")["ElForm"];
 
+  ElFormItem: typeof import("element-plus/es")["ElFormItem"];
 
+  ElIcon: typeof import("element-plus/es")["ElIcon"];
 
+  ElImage: typeof import("element-plus/es")["ElImage"];
 
+  ElInput: typeof import("element-plus/es")["ElInput"];
 
+  ElInputNumber: typeof import("element-plus/es")["ElInputNumber"];
 
+  ElLink: typeof import("element-plus/es")["ElLink"];
 
+  ElMenu: typeof import("element-plus/es")["ElMenu"];
 
+  ElMenuItem: typeof import("element-plus/es")["ElMenuItem"];
 
+  ElOption: typeof import("element-plus/es")["ElOption"];
 
+  ElPagination: typeof import("element-plus/es")["ElPagination"];
 
+  ElPopover: typeof import("element-plus/es")["ElPopover"];
 
+  ElRadio: typeof import("element-plus/es")["ElRadio"];
 
+  ElRadioGroup: typeof import("element-plus/es")["ElRadioGroup"];
 
+  ElRow: typeof import("element-plus/es")["ElRow"];
 
+  ElScrollbar: typeof import("element-plus/es")["ElScrollbar"];
 
+  ElSelect: typeof import("element-plus/es")["ElSelect"];
 
+  ElStatistic: typeof import("element-plus/es")["ElStatistic"];
 
+  ElSubMenu: typeof import("element-plus/es")["ElSubMenu"];
 
+  ElSwitch: typeof import("element-plus/es")["ElSwitch"];
 
+  ElTable: typeof import("element-plus/es")["ElTable"];
 
+  ElTableColumn: typeof import("element-plus/es")["ElTableColumn"];
 
+  ElTabPane: typeof import("element-plus/es")["ElTabPane"];
 
+  ElTabs: typeof import("element-plus/es")["ElTabs"];
 
+  ElTag: typeof import("element-plus/es")["ElTag"];
 
+  ElText: (typeof import("element-plus/es"))["ElText"];
 
+  ElTooltip: typeof import("element-plus/es")["ElTooltip"];
 
+  ElTree: typeof import("element-plus/es")["ElTree"];
 
+  ElTreeSelect: typeof import("element-plus/es")["ElTreeSelect"];
 
+  ElUpload: typeof import("element-plus/es")["ElUpload"];
 
+  ElWatermark: typeof import("element-plus/es")["ElWatermark"];
 
+  FunnelChart: typeof import("./../views/dashboard/components/FunnelChart.vue")[
 
+    "default"
 
+  ];
 
+  GithubCorner: typeof import("./../components/GithubCorner/index.vue")[
 
+    "default"
 
+  ];
 
+  Hamburger: typeof import("./../components/Hamburger/index.vue")["default"];
 
+  IconSelect: typeof import("./../components/IconSelect/index.vue")["default"];
 
+  IEpCaretBottom: typeof import("~icons/ep/caret-bottom")["default"];
 
+  IEpCaretTop: typeof import("~icons/ep/caret-top")["default"];
 
+  IEpClose: typeof import("~icons/ep/close")["default"];
 
+  IEpCollection: (typeof import("~icons/ep/collection"))["default"];
 
+  IEpDelete: typeof import("~icons/ep/delete")["default"];
 
+  IEpDownload: typeof import("~icons/ep/download")["default"];
 
+  IEpEdit: typeof import("~icons/ep/edit")["default"];
 
+  IEpPlus: typeof import("~icons/ep/plus")["default"];
 
+  IEpPosition: (typeof import("~icons/ep/position"))["default"];
 
+  IEpQuestionFilled: typeof import("~icons/ep/question-filled")["default"];
 
+  IEpRefresh: typeof import("~icons/ep/refresh")["default"];
 
+  IEpRefreshLeft: typeof import("~icons/ep/refresh-left")["default"];
 
+  IEpSearch: typeof import("~icons/ep/search")["default"];
 
+  IEpSetting: (typeof import("~icons/ep/setting"))["default"];
 
+  IEpTop: typeof import("~icons/ep/top")["default"];
 
+  IEpUploadFilled: typeof import("~icons/ep/upload-filled")["default"];
 
+  LangSelect: typeof import("./../components/LangSelect/index.vue")["default"];
 
+  LayoutSelect: typeof import(
 
+    "./../layout/components/Settings/components/LayoutSelect.vue"
 
+  )["default"];
 
+  MultiUpload: typeof import("./../components/Upload/MultiUpload.vue")[
 
+    "default"
 
+  ];
 
+  NavBar: typeof import("./../layout/components/NavBar/index.vue")["default"];
 
+  NavbarLeft: typeof import(
 
+    "./../layout/components/NavBar/components/NavbarLeft.vue"
 
+  )["default"];
 
+  NavbarRight: typeof import(
 
+    "./../layout/components/NavBar/components/NavbarRight.vue"
 
+  )["default"];
 
+  Pagination: typeof import("./../components/Pagination/index.vue")["default"];
 
+  PieChart: typeof import("./../views/dashboard/components/PieChart.vue")[
 
+    "default"
 
+  ];
 
+  RadarChart: typeof import("./../views/dashboard/components/RadarChart.vue")[
 
+    "default"
 
+  ];
 
+  RightPanel: (typeof import("./../components/RightPanel/index.vue"))[
 
+    "default"
 
+  ];
 
+  RouterLink: typeof import("vue-router")["RouterLink"];
 
+  RouterView: typeof import("vue-router")["RouterView"];
 
+  Settings: typeof import("./../layout/components/Settings/index.vue")[
 
+    "default"
 
+  ];
 
+  Sidebar: typeof import("./../layout/components/Sidebar/index.vue")["default"];
 
+  SidebarLogo: typeof import(
 
+    "./../layout/components/Sidebar/components/SidebarLogo.vue"
 
+  )["default"];
 
+  SidebarMenu: typeof import(
 
+    "./../layout/components/Sidebar/components/SidebarMenu.vue"
 
+  )["default"];
 
+  SidebarMenuItem: typeof import(
 
+    "./../layout/components/Sidebar/components/SidebarMenuItem.vue"
 
+  )["default"];
 
+  SidebarMenuItemTitle: typeof import(
 
+    "./../layout/components/Sidebar/components/SidebarMenuItemTitle.vue"
 
+  )["default"];
 
+  SidebarMixTopMenu: typeof import(
 
+    "./../layout/components/Sidebar/components/SidebarMixTopMenu.vue"
 
+  )["default"];
 
+  SingleUpload: typeof import("./../components/Upload/SingleUpload.vue")[
 
+    "default"
 
+  ];
 
+  SizeSelect: typeof import("./../components/SizeSelect/index.vue")["default"];
 
+  SvgIcon: typeof import("./../components/SvgIcon/index.vue")["default"];
 
+  TagsView: typeof import("./../layout/components/TagsView/index.vue")[
 
+    "default"
 
+  ];
 
+  ThemeColorPicker: typeof import(
 
+    "./../layout/components/Settings/components/ThemeColorPicker.vue"
 
+  )["default"];
 
+  WangEditor: typeof import("./../components/WangEditor/index.vue")["default"];
 
 }
 
 export interface ComponentCustomProperties {
 
-  vLoading: typeof import('element-plus/es')['ElLoadingDirective']
 
-}
 
+  vLoading: (typeof import("element-plus/es"))["ElLoadingDirective"];
 
 }

+ 15 - 0
src/views/main/components/layout.vue
View File 

@@ -0,0 +1,15 @@
 
+<script setup lang="ts"></script>
 
+
 
+<template>
 
+  <div class="layout">
 
+    <router-view />
 
+  </div>
 
+</template>
 
+
 
+<style scoped lang="scss">
 
+.layout {
 
+  height: 100%;
 
+  flex: 1;
 
+  border: 2px solid #0d9f12;
 
+}
 
+</style>

+ 104 - 0
src/views/main/components/menu.vue
View File 

@@ -0,0 +1,104 @@
 
+<script setup lang="ts">
 
+interface MenuItem {
 
+  name: string;
 
+  icon: string;
 
+  route: string;
 
+}
 
+
 
+const menus = ref<MenuItem[]>([
 
+  {
 
+    name: "首页",
 
+    icon: "home",
 
+    route: "/main/home",
 
+  },
 
+  {
 
+    name: "工作台",
 
+    icon: "work-bench",
 
+    route: "/main/work-bench",
 
+  },
 
+  {
 
+    name: "设备",
 
+    name: "设备",
 
+    icon: "devices",
 
+    route: "/main/devices",
 
+  },
 
+  {
 
+    name: "应用",
 
+    icon: "apps",
 
+    route: "/main/apps",
 
+  },
 
+  {
 
+    name: "车间",
 
+    icon: "work-shop",
 
+    route: "/main/work-shop",
 
+  },
 
+]);
 
+const currentMenu = ref<MenuItem>(menus.value[0]);
 
+
 
+const router = useRouter();
 
+const handleMenuClick = (menu: MenuItem) => {
 
+  if (menu.route != currentMenu.value.route) {
 
+    currentMenu.value = menu;
 
+    router.push(menu.route);
 
+  }
 
+};
 
+</script>
 
+
 
+<template>
 
+  <div class="menu">
 
+    <div
 
+      class="menu-box"
 
+      v-for="menu in menus"
 
+      :key="menu.name"
 
+      @click="handleMenuClick(menu)"
 
+    >
 
+      <!--      这里的图标可以用可变色的svg 传过去一个color属性，然后根据当前路由的颜色来显示不同的颜色-->
 
+      <div class="icon">{{ menu.icon }}</div>
 
+      <div
 
+        class="name"
 
+        :class="[menu.route === currentMenu.route ? 'selected' : 'normal']"
 
+      >
 
+        {{ menu.name }} {{ menu.route === currentMenu.route ? "▲" : "" }}
 
+      </div>
 
+    </div>
 
+  </div>
 
+</template>
 
+
 
+<style scoped lang="scss">
 
+.menu {
 
+  height: 100%;
 
+  width: 150px;
 
+  border: 2px solid blue;
 
+  display: flex;
 
+  flex-direction: column;
 
+  justify-content: center;
 
+  align-items: center;
 
+  padding: 45px;
 
+
 
+  .menu-box {
 
+    margin-bottom: 76px;
 
+    width: 60px;
 
+
 
+    .icon {
 
+      width: 60px;
 
+      height: 60px;
 
+      border: 1px solid #0a84ff;
 
+    }
 
+
 
+    .name {
 
+      margin-top: 10px;
 
+      font-weight: bold;
 
+      font-size: 16px;
 
+      line-height: 19px;
 
+      text-align: center;
 
+    }
 
+
 
+    .normal {
 
+      color: $hj-white-1;
 
+    }
 
+    .selected {
 
+      color: $hj-blue-1;
 
+    }
 
+  }
 
+}
 
+</style>

+ 23 - 0
src/views/main/main.vue
View File 

@@ -0,0 +1,23 @@
 
+<script setup lang="ts">
 
+import Menu from "./components/menu.vue";
 
+import Layout from "./components/layout.vue";
 
+</script>
 
+
 
+<template>
 
+  <div class="main">
 
+    <Menu />
 
+    <Layout> </Layout>
 
+  </div>
 
+</template>
 
+
 
+<style scoped lang="scss">
 
+.main {
 
+  width: 100%;
 
+  height: 100%;
 
+  display: flex;
 
+  justify-content: start;
 
+  align-items: center;
 
+  border: 2px solid red;
 
+  background: $hj-bg;
 
+}
 
+</style>

+ 9 - 0
src/views/modules/applications/apps.vue
View File 

@@ -0,0 +1,9 @@
 
+<script setup lang="ts"></script>
 
+
 
+<template>
 
+  <div class="apps">
 
+    <h1>Applications</h1>
 
+  </div>
 
+</template>
 
+
 
+<style scoped lang="scss"></style>

+ 26 - 0
src/views/modules/components/ChildHeader.vue
View File 

@@ -0,0 +1,26 @@
 
+<script setup lang="ts">
 
+const router = useRouter();
 
+const back = () => {
 
+  router.back();
 
+};
 
+</script>
 
+
 
+<template>
 
+  <div class="child-header">
 
+    <div @click="back">
 
+      <div>返回</div>
 
+    </div>
 
+    <div class="right-slot">
 
+      <slot></slot>
 
+    </div>
 
+  </div>
 
+</template>
 
+
 
+<style scoped lang="scss">
 
+.right-slot {
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: flex-end;
 
+  gap: 20px;
 
+}
 
+</style>

+ 9 - 0
src/views/modules/devices/devs.vue
View File 

@@ -0,0 +1,9 @@
 
+<script setup lang="ts"></script>
 
+
 
+<template>
 
+  <div class="devs">
 
+    <h1>Devices</h1>
 
+  </div>
 
+</template>
 
+
 
+<style scoped lang="scss"></style>

+ 15 - 0
src/views/modules/home/home.vue
View File 

@@ -0,0 +1,15 @@
 
+<script setup lang="ts">
 
+const router = useRouter();
 
+const gotoTest = () => {
 
+  router.push("/test");
 
+};
 
+</script>
 
+
 
+<template>
 
+  <div class="home">
 
+    <h1>Welcome to Home Page</h1>
 
+    <el-button type="primary" @click="gotoTest">Go to Test Page</el-button>
 
+  </div>
 
+</template>
 
+
 
+<style scoped lang="scss"></style>

+ 19 - 0
src/views/modules/home/test/test.vue
View File 

@@ -0,0 +1,19 @@
 
+<script setup lang="ts">
 
+import ChildHeader from "@/views/modules/components/ChildHeader.vue";
 
+</script>
 
+
 
+<template>
 
+  <div class="child-page-container">
 
+    <ChildHeader>
 
+      <template #default>
 
+        <el-tag>测试页面</el-tag>
 
+        <div>右侧功能</div>
 
+      </template>
 
+    </ChildHeader>
 
+    <div class="child-bottom">
 
+      <h1>This is the test page</h1>
 
+    </div>
 
+  </div>
 
+</template>
 
+
 
+<style scoped lang="scss"></style>

+ 9 - 0
src/views/modules/workbench/workBench.vue
View File 

@@ -0,0 +1,9 @@
 
+<script setup lang="ts"></script>
 
+
 
+<template>
 
+  <div class="workbench">
 
+    <h1>Workbench</h1>
 
+  </div>
 
+</template>
 
+
 
+<style scoped lang="scss"></style>

+ 9 - 0
src/views/modules/workshop/workShop.vue
View File 

@@ -0,0 +1,9 @@
 
+<script setup lang="ts"></script>
 
+
 
+<template>
 
+  <div class="workshop">
 
+    <h1>Workshop</h1>
 
+  </div>
 
+</template>
 
+
 
+<style scoped lang="scss"></style>