3 lat temu · 619b10120c
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -18,6 +18,7 @@ module.exports = {
 
				     '@typescript-eslint/no-var-requires': 0,
			
 
				     'arrow-body-style': ['off'],
			
 
				     'no-return-assign': 'off',
			
 
				-    'func-call-spacing': 'off'
			
 
				+    'func-call-spacing': 'off',
			
 
				+    '@typescript-eslint/ban-types': 'off'
			
 
				   }
			
 
				 }
			
--- a/public/index.html
+++ b/public/index.html
@@ -5,7 +5,7 @@
 
				     <meta http-equiv="X-UA-Compatible" content="IE=edge">
			
 
				     <meta name="viewport" content="width=device-width,initial-scale=1.0">
			
 
				     <link rel="icon" href="logo.ico">
			
 
				-    <title>蛟龙云联</title>
			
 
				+    <title>7788</title>
			
 
				   </head>
			
 
				   <body>
			
 
				     <noscript>
			
--- a/src/components/ModalPro/index.vue
+++ b/src/components/ModalPro/index.vue
@@ -5,12 +5,12 @@
 
				     @ok="handleOk"
			
 
				     @cancel="close"
			
 
				     :closable="false"
			
 
				-    :confirmLoading="state.confirmLoading"
			
 
				     v-bind="{
			
 
				       cancelText: '取消',
			
 
				       okText: '确定',
			
 
				       ...propsState
			
 
				     }"
			
 
				+    :confirmLoading="state.confirmLoading"
			
 
				   >
			
 
				     <template #title>
			
 
				       <div ref="modalTitleRef" style="width: 100%; cursor: move">{{propsState.label || 'model'}}</div>
			
--- a/src/components/PagePro/index.vue
+++ b/src/components/PagePro/index.vue
@@ -0,0 +1,18 @@
 
				+<template>
			
 
				+  <a-row>
			
 
				+    <a-col><sider-pro /></a-col>
			
 
				+    <a-col><slot></slot></a-col>
			
 
				+  </a-row>
			
 
				+</template>
			
 
				+
			
 
				+<script setup lang="ts"  >
			
 
				+
			
 
				+export interface PagePro {
			
 
				+  openSiderPro: boolean
			
 
				+}
			
 
				+
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped >
			
 
				+
			
 
				+</style>
			
--- a/src/components/SiderPro/index.vue
+++ b/src/components/SiderPro/index.vue
@@ -0,0 +1,102 @@
 
				+<template>
			
 
				+  <a-row class="sider-pro"  >
			
 
				+    <a-col class="sider-pro-title" ><div class="title" >{{props.title}}</div></a-col>
			
 
				+    <a-col
			
 
				+      class="sider-pro-item"
			
 
				+      v-for="item in props.siders"
			
 
				+      :key="item.title"
			
 
				+      @click="changeSider(item)"
			
 
				+    >
			
 
				+      <div :class="['title', state.active == item.title ? 'active' : '']" >{{item.title}}</div>
			
 
				+    </a-col>
			
 
				+  </a-row>
			
 
				+</template>
			
 
				+
			
 
				+<script lang="ts" setup name="SiderPro" >
			
 
				+import { reactive } from 'vue'
			
 
				+
			
 
				+export interface SiderItemProps {
			
 
				+  title: string,
			
 
				+  children: Partial<SiderItemProps>[],
			
 
				+  link: string
			
 
				+}
			
 
				+
			
 
				+export interface SiderProProps {
			
 
				+  title: string,
			
 
				+  siders: Partial<SiderItemProps>[]
			
 
				+}
			
 
				+
			
 
				+const initProps: Partial<SiderProProps> = {
			
 
				+  title: '云服务器列表',
			
 
				+  siders: [
			
 
				+    { title: '总览' },
			
 
				+    { title: '事件' }
			
 
				+  ]
			
 
				+}
			
 
				+
			
 
				+const props = initProps
			
 
				+
			
 
				+const state = reactive({
			
 
				+  active: '总览'
			
 
				+})
			
 
				+
			
 
				+const changeSider = (records: SiderItemProps) => state.active = records.title
			
 
				+
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped >
			
 
				+.sider-pro {
			
 
				+  width: 188px;
			
 
				+  height: 100%;
			
 
				+  background-color: #fff;
			
 
				+  border-left: 1px solid #c3c5ca;
			
 
				+  display: flex;
			
 
				+  flex-direction: column;
			
 
				+  justify-content: flex-start;
			
 
				+  align-items: center;
			
 
				+  overflow: hidden;
			
 
				+  overflow-y: scroll;
			
 
				+  // scrollbar-width: none;
			
 
				+  scrollbar-width: 0;
			
 
				+  /* Firefox */
			
 
				+  -ms-overflow-style: none;
			
 
				+  .sider-pro-title {
			
 
				+    width: 100%;
			
 
				+    height: 51px;
			
 
				+    box-sizing: border-box;
			
 
				+    display: flex;
			
 
				+    justify-content: center;
			
 
				+    align-items: center;
			
 
				+    margin-bottom: 8px;
			
 
				+    .title {
			
 
				+      width: calc(100% - 40px);
			
 
				+      height: 100%;
			
 
				+      border-bottom: 1px solid #c3c5ca;
			
 
				+      display: flex;
			
 
				+      justify-content: center;
			
 
				+      align-items: center;
			
 
				+      font-size: 16px;
			
 
				+    }
			
 
				+  }
			
 
				+  .sider-pro-item {
			
 
				+    width: 100%;
			
 
				+    height: 38px;
			
 
				+    display: flex;
			
 
				+    justify-content: flex-start;
			
 
				+    align-items: center;
			
 
				+    padding: 0 20px;
			
 
				+    box-sizing: border-box;
			
 
				+    cursor: pointer;
			
 
				+    .title {
			
 
				+      padding-left: 8px;
			
 
				+      box-sizing: border-box;
			
 
				+      border-left: 1px solid transparent;
			
 
				+    }
			
 
				+    .active {
			
 
				+      border-left: 1px solid #5e7ce0;
			
 
				+      color: #526eec;
			
 
				+      box-sizing: border-box;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/components/TablePro/index.vue
+++ b/src/components/TablePro/index.vue
@@ -1,16 +1,64 @@
 
				 <template>
			
 
				-  <a-table>
			
 
				-
			
 
				-  </a-table>
			
 
				+  <a-table
			
 
				+    style="width: 100%;"
			
 
				+    v-bind="{...props}"
			
 
				+    :dataSource="state.data"
			
 
				+    :loading="state.loading"
			
 
				+    :pagination="state.pagination"
			
 
				+    @change="handleTableChange"
			
 
				+  />
			
 
				 </template>
			
 
				 
			
 
				 <script lang="ts" setup >
			
 
				 import { TableProps } from 'ant-design-vue/lib/vc-table/Table'
			
 
				+import { onMounted, reactive, watch } from 'vue'
			
 
				 
			
 
				 export interface TablePropPorps extends TableProps {
			
 
				-  column: string
			
 
				+  request: (params: any) => any
			
 
				+  params: any
			
 
				+}
			
 
				+
			
 
				+const props = defineProps<TablePropPorps>()
			
 
				+
			
 
				+const state = reactive({
			
 
				+  loading: false,
			
 
				+  data: [],
			
 
				+  pagination: {
			
 
				+    current: 1,
			
 
				+    total: 0,
			
 
				+    pageSize: 10
			
 
				+  }
			
 
				+})
			
 
				+
			
 
				+const handleTableChange = (pag: { pageSize: number; current: number }) => {
			
 
				+  state.pagination = {
			
 
				+    ...state.pagination,
			
 
				+    pageSize: pag.pageSize,
			
 
				+    current: pag.current
			
 
				+  }
			
 
				 }
			
 
				 
			
 
				+const request = async () => {
			
 
				+  state.loading = true
			
 
				+  const data = await props.request(props.params)
			
 
				+  state.loading = false
			
 
				+  console.log(data)
			
 
				+  state.data = data
			
 
				+}
			
 
				+
			
 
				+watch(
			
 
				+  () => props.request,
			
 
				+  () => request(),
			
 
				+  {
			
 
				+    deep: true,
			
 
				+    immediate: true
			
 
				+  }
			
 
				+)
			
 
				+
			
 
				+onMounted(() => {
			
 
				+
			
 
				+})
			
 
				+
			
 
				 </script>
			
 
				 
			
 
				 <style>
			
--- a/src/layout/layout.vue
+++ b/src/layout/layout.vue
@@ -1,17 +1,18 @@
 
				 <template>
			
 
				     <a-layout class="a-layout" >
			
 
				-        <Navbar />
			
 
				-        <a-layout>
			
 
				-        <Sider :router="silders" />
			
 
				-        <a-layout style="padding: 0 24px 24px">
			
 
				-          <Breadcrumb />
			
 
				-            <a-layout-content
			
 
				-            :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
			
 
				-            >
			
 
				-              <RouterView></RouterView>
			
 
				-            </a-layout-content>
			
 
				-        </a-layout>
			
 
				-        </a-layout>
			
 
				+      <Navbar />
			
 
				+      <a-layout>
			
 
				+      <Sider :router="silders" />
			
 
				+
			
 
				+      <a-layout style="padding: 0 24px 24px; margin-top: 20px;">
			
 
				+        <Breadcrumb />
			
 
				+          <a-layout-content
			
 
				+          :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
			
 
				+          >
			
 
				+            <RouterView></RouterView>
			
 
				+          </a-layout-content>
			
 
				+      </a-layout>
			
 
				+      </a-layout>
			
 
				   </a-layout>
			
 
				 </template>
			
 
				 
			
--- a/src/layout/navbar.vue
+++ b/src/layout/navbar.vue
@@ -45,6 +45,8 @@ const changeRouter = (path: string) => appRouter.changeNavbar(path)
 
				 
			
 
				 <style lang="less" scoped >
			
 
				 .header {
			
 
				+  position: relative;
			
 
				+  z-index: 2;
			
 
				   // width: 100vw;
			
 
				   // display: flex;
			
 
				   // height: 50px;
			
--- a/src/layout/sider.vue
+++ b/src/layout/sider.vue
@@ -11,13 +11,14 @@
 
				             @breakpoint="onBreakpoint"
			
 
				         >
			
 
				          <a-menu
			
 
				-            v-model:selectedKeys="selectedKeys2"
			
 
				+            :selectedKeys="selectedKeys2"
			
 
				             v-model:openKeys="openKeys"
			
 
				             mode="inline"
			
 
				             :style="{ height: '100%', borderRight: 0 }"
			
 
				             >
			
 
				+
			
 
				             <template v-for="item in appRouter.router.sider.route" :key="item.path">
			
 
				-              <a-sub-menu  v-if="item.children" :key="item.path">
			
 
				+              <a-sub-menu  v-if="item.children" :key="item.path" >
			
 
				                 <template #title>
			
 
				                   <user-outlined />
			
 
				                   <span>
			
@@ -28,7 +29,8 @@
 
				                   <user-outlined />{{_.name}}
			
 
				                 </a-menu-item>
			
 
				               </a-sub-menu>
			
 
				-              <a-menu-item v-else @click="changeRoute(item)" >
			
 
				+              <!-- v-if="!item.children"  :key="item.path" -->
			
 
				+              <a-menu-item v-if="!item.children"  :key="item.path"  @click="changeRoute(item)" >
			
 
				                 <user-outlined />
			
 
				                 <span>{{item.name}}</span>
			
 
				               </a-menu-item>
			
@@ -62,6 +64,8 @@ const selectedKeys2 = ref<string[]>([appRouter.router.sider!.selectPath])
 
				 const openKeys = ref<string[]>(appRouter.router.sider!.openKeys)
			
 
				 
			
 
				 emitter.on(Emitter.NAVBAR, () => {
			
 
				+  console.log('[appRouter.router.sider!.selectPath]:', [appRouter.router.sider!.selectPath])
			
 
				+
			
 
				   selectedKeys2.value = [appRouter.router.sider!.selectPath]
			
 
				   openKeys.value = appRouter.router.sider!.openKeys
			
 
				 })
			
@@ -80,6 +84,9 @@ const changeRoute = (route: Router.RoutesProps) => {
 
				   display: flex;
			
 
				   justify-content: center;
			
 
				   align-items: center;
			
 
				+}
			
 
				 
			
 
				+/deep/ .ant-layout-sider-children {
			
 
				+  margin-top: -4px;
			
 
				 }
			
 
				 </style>
			
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,7 +3,7 @@ import App from './App.vue'
 
				 import router from './router'
			
 
				 import '@/router/before'
			
 
				 import { createPinia } from 'pinia'
			
 
				-import antd, { ConfigProvider } from 'ant-design-vue'
			
 
				+import antd from 'ant-design-vue'
			
 
				 import 'ant-design-vue/dist/antd.css'
			
 
				 import UsePro from './utils/UsePro'
			
 
				 
			
--- a/src/pages/Dashboard/index.vue
+++ b/src/pages/Dashboard/index.vue
@@ -1,11 +1,27 @@
 
				 <template>
			
 
				-  <div class="Dashboard" >
			
 
				-    Dashboard
			
 
				-  </div>
			
 
				+  <a-row>
			
 
				+    <a-col> <sider-pro /></a-col>
			
 
				+    <a-col> <div class="Dashboard" >2233</div></a-col>
			
 
				+    <a-col :span="10" >
			
 
				+      <table-pro
			
 
				+        :params="{a: 123, b: 456}"
			
 
				+        :request="getFn"
			
 
				+      />
			
 
				+    </a-col>
			
 
				+  </a-row>
			
 
				 </template>
			
 
				 
			
 
				 <script lang="ts" setup >
			
 
				 
			
 
				+const getFn = (params) => {
			
 
				+  console.log('params:', params)
			
 
				+  return new Promise(resolve => {
			
 
				+    setTimeout(() => {
			
 
				+      resolve([])
			
 
				+    }, 2000)
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				 </script>
			
 
				 
			
 
				 <style lang="less" scoped >
			
--- a/src/pages/Iot/index.vue
+++ b/src/pages/Iot/index.vue
@@ -1,5 +1,7 @@
 
				 <template>
			
 
				+
			
 
				   <div class="iot" >
			
 
				+
			
 
				     <a-button type="primary"  @click="openModal" >上传背景</a-button>
			
 
				     <modal-pro
			
 
				       :visible="state.visible"
			
@@ -15,7 +17,7 @@
 
				 import { reactive } from 'vue'
			
 
				 
			
 
				 const state = reactive({
			
 
				-  visible: true
			
 
				+  visible: false
			
 
				 })
			
 
				 
			
 
				 const openModal = () => {
			
--- a/src/pages/Visual/index.vue
+++ b/src/pages/Visual/index.vue
@@ -0,0 +1,9 @@
 
				+<template>
			
 
				+  <div class="Visual" >
			
 
				+    Visual
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script setup lang="ts" >
			
 
				+
			
 
				+</script>
			
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -6,11 +6,13 @@ const routes: Array<ROUTER.RoutesProps> = [
 
				     name: '首页',
			
 
				     title: '首页',
			
 
				     component: () => import('@/layout/layout.vue'),
			
 
				+    redirect: '/dashboard',
			
 
				     children: [
			
 
				       {
			
 
				         path: '/dashboard',
			
 
				         name: '仪表盘',
			
 
				         component: () => import('@/pages/Dashboard/index.vue'),
			
 
				+        redirect: '/dashboard-item',
			
 
				         children: [
			
 
				           {
			
 
				             path: '/dashboard-item',
			
@@ -26,18 +28,12 @@ const routes: Array<ROUTER.RoutesProps> = [
 
				     name: '视觉平台',
			
 
				     title: '视觉平台',
			
 
				     component: () => import('@/layout/layout.vue'),
			
 
				+    redirect: '/visual-dashboard',
			
 
				     children: [
			
 
				       {
			
 
				         path: '/visual-dashboard',
			
 
				-        name: '仪表盘',
			
 
				-        component: () => import('@/pages/Dashboard/index.vue'),
			
 
				-        children: [
			
 
				-          {
			
 
				-            path: '/visual-dashboard-item',
			
 
				-            name: '仪表盘item',
			
 
				-            component: () => import('@/pages/Dashboard/index.vue')
			
 
				-          }
			
 
				-        ]
			
 
				+        name: '视觉平台仪表盘',
			
 
				+        component: () => import('@/pages/Visual/index.vue')
			
 
				       }
			
 
				     ]
			
 
				   },
			
--- a/src/styles/theme.less
+++ b/src/styles/theme.less
--- a/src/utils/UsePro.ts
+++ b/src/utils/UsePro.ts
@@ -1,6 +1,10 @@
 
				 import ModalPro from '@/components/ModalPro/index.vue'
			
 
				+import SiderPro from '@/components/SiderPro/index.vue'
			
 
				+import TablePro from '@/components/TablePro/index.vue'
			
 
				 import { App } from 'vue'
			
 
				 
			
 
				 export default function (app: App) {
			
 
				   app.component('modal-pro', ModalPro)
			
 
				+  app.component('sider-pro', SiderPro)
			
 
				+  app.component('table-pro', TablePro)
			
 
				 }