Explorar o código

页面框架搭建,路由等。

jiaxiaoqiang hai 5 meses
pai
achega
6eb6e45d48

+ 1 - 1
index.html

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

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