style: 样式调整

package.json

@@ -64,6 +64,7 @@
     "typescript": "^4.9.3",
     "vite": "^4.0.0",
     "vite-plugin-html": "^3.2.0",
+    "vite-plugin-progress": "^0.0.7",
     "vite-plugin-style-import": "^2.0.0",
     "vite-plugin-vue-setup-extend": "^0.4.0",
     "vue-tsc": "^1.0.11"

src/components/CardBox/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="card">
+    <div class="card j-table-card-box">
         <div
             class="card-warp"
             :class="{ active: active ? 'active' : '' }"
@@ -225,11 +225,13 @@ const handleClick = () => {
 
         .card-content {
             position: relative;
-            padding: 30px 12px 16px 30px;
+            padding: 30px 12px 30px 30px;
             overflow: hidden;
 
             .card-item-avatar {
                 margin-right: 16px;
+              display: flex;
+              align-items: center;
             }
 
             .card-item-body {
@@ -237,6 +239,10 @@ const handleClick = () => {
                 flex-direction: column;
                 flex-grow: 1;
                 width: 0;
+
+              .ant-row{
+                margin-top: 19px;
+              }
             }
 
             .card-state {
@@ -285,7 +291,7 @@ const handleClick = () => {
             }
 
             :deep(.card-item-content-text) {
-                color: rgba(0, 0, 0, 0.75);
+                color: rgba(0, 0, 0, 0.7);
                 font-size: 12px;
             }
         }

src/components/Layout/BasicLayoutPage.vue

@@ -4,6 +4,7 @@
         v-model:openKeys="state.openKeys"
         v-model:collapsed="state.collapsed"
         v-model:selectedKeys="state.selectedKeys"
+        :headerHeight='60'
         :pure="state.pure"
         :breadcrumb="{ routes: breadcrumb }"
         @backClick='routerBack'

src/components/Search/Search.vue

@@ -7,6 +7,7 @@
     :deleteRequest='deleteSearchHistory'
     :columns='columns'
     :class='props.class'
+    style='padding-top: 18px; padding-bottom: 18px;'
     @search='searchSubmit'
   />
 </template> 

src/style.less

@@ -3,6 +3,97 @@
     right: -12px;
 }
 
+.ant-pro-page-container {
+    .ant-page-header-footer {
+        border-top: 1px solid #e9e9e9;
+        padding-top: 10px;
+    }
+}
+
+.ant-pro-basicLayout {
+    .ant-pro-top-nav-header-main {
+        gap: 16px;
+    }
+
+    .ant-pro-top-nav-header {
+
+        .ant-menu-item {
+            padding: 0 10px !important;
+            &:not(:first-child) {
+                margin-left: 8px;
+            }
+            &:hover {
+                background-color: transparent;
+            }
+        }
+
+        .ant-menu-item-selected,& .ant-menu-item-active {
+            transition: background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+        }
+
+        h1,& .right-content, & .anticon-bell {
+            color: #fff;
+        }
+
+        & .ant-pro-menu-item-title,& .anticon,& .ant-menu-item-active {
+            color: rgba(#fff, 0.55);
+        }
+
+        .ant-menu-item-selected {
+            & .ant-pro-menu-item-title,& .anticon {
+                color: #fff;
+            }
+        }
+
+        .ant-menu-item-selected,& .ant-menu-item-active {
+            transition: background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+            background: linear-gradient(0deg, rgba(#fff, 0.25) 0%, rgba(#fff, 0) 82%);
+            &::after {
+                left: 0;
+                right: 0;
+                border-bottom-color: rgba(#fff, .8);
+            }
+        }
+
+        &.light {
+            background: #3F4960;
+            box-shadow: 0 1px 0px 0px #E9E9E9;
+
+            h1,& .right-content, & .anticon-bell {
+                color: #fff;
+            }
+
+            .ant-menu-item-selected,& .ant-menu-item-active {
+                transition: background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+                background: linear-gradient(0deg, rgba(#fff, 0.15) 0%, rgba(#fff, 0) 82%);
+                &::after {
+                    left: 0;
+                    right: 0;
+                    border-bottom-color: rgba(#fff, .7);
+                }
+            }
+        }
+    }
+
+    .ant-layout-sider {
+        box-shadow: 1px 0 0 0 #E9E9E9 !important;
+    }
+
+    .ant-page-header.has-breadcrumb {
+        background: transparent;
+        padding-top: 20px;
+        padding-bottom: 0;
+    }
+
+    .ant-pro-page-container-children-content {
+        margin-top: 16px;
+    }
+
+    .ant-pro-sider-menu {
+        padding-top: 6px;
+    }
+}
+
 // 说明文档样式
 .doc {
     height: 750px;

src/views/device/Instance/Detail/Info/index.vue

@@ -17,9 +17,9 @@
         <j-descriptions-item label="产品名称">{{
             instanceStore.current?.productName
         }}</j-descriptions-item>
-        <j-descriptions-item label="产品分类">{{
+<!--        <j-descriptions-item label="产品分类">{{-->
-            instanceStore.current?.classifiedName
+<!--            instanceStore.current?.classifiedName-->
-        }}</j-descriptions-item>
+<!--        }}</j-descriptions-item>-->
         <j-descriptions-item label="设备类型">{{
             instanceStore.current?.deviceType?.text
         }}</j-descriptions-item>

src/views/device/Instance/index.vue

@@ -164,8 +164,8 @@
                     >
                         <template #img>
                             <img
-                                :width="88"
+                                :width="80"
-                                :height="88"
+                                :height="80"
                                 :src="
                                     slotProps?.photoUrl ||
                                     getImage('/device/instance/device-card.png')
@@ -173,12 +173,12 @@
                             />
                         </template>
                         <template #content>
-                            <Ellipsis style="width: calc(100% - 100px)">
+                            <Ellipsis style="width: calc(100% - 100px); margin-bottom: 18px;">
                                 <span style="font-size: 16px; font-weight: 600">
                                     {{ slotProps.name }}
                                 </span>
                             </Ellipsis>
-                            <j-row style="margin-top: 20px">
+                            <j-row>
                                 <j-col :span="12">
                                     <div class="card-item-content-text">
                                         设备类型

src/views/device/Product/index.vue

@@ -69,7 +69,7 @@
                             </slot>
                         </template>
                         <template #content>
-                            <Ellipsis style="width: calc(100% - 100px)"
+                            <Ellipsis style="width: calc(100% - 100px); margin-bottom: 18px;"
                                 ><span
                                     style="font-weight: 600; font-size: 16px"
                                 >
@@ -621,8 +621,8 @@ onMounted(() => {
     background: #f0f2f5;
 }
 .productImg {
-    width: 88px;
+    width: 80px;
-    height: 88px;
+    height: 80px;
 }
 .productName {
     white-space: nowrap; /*强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。*/

src/views/edge/Device/index.vue

@@ -68,7 +68,7 @@
                                     {{ slotProps.name }}
                                 </span>
                             </Ellipsis>
-                            <j-row style="margin-top: 20px">
+                            <j-row style="margin-top: 18px">
                                 <j-col :span="12">
                                     <div class="card-item-content-text">
                                         设备类型

src/views/edge/Resource/index.vue

@@ -38,7 +38,7 @@
                                     {{ slotProps.name }}
                                 </span>
                             </Ellipsis>
-                            <j-row style="margin-top: 20px">
+                            <j-row style="margin-top: 18px">
                                 <j-col :span="12">
                                     <div class="card-item-content-text">
                                         通讯协议

src/views/iot-card/Platform/index.vue

@@ -27,7 +27,7 @@
                           </slot>
                       </template>
                       <template #content>
-                          <h3  style='font-size: 16px;width: calc(100% - 90px)'>
+                          <h3  style='font-size: 16px;width: calc(100% - 90px); margin-bottom: 18px;'>
                             <Ellipsis>
                               {{ slotProps.name }}
                             </Ellipsis>

src/views/link/Protocol/index.vue

@@ -43,10 +43,7 @@
                             <template #content>
                                 <div class="card-item-content">
                                     <Ellipsis
-                                        style="
+                                        style="margin-bottom: 18px;"
-                                            width: calc(100% - 100px);
-                                            margin-bottom: 10px;
-                                        "
                                     >
                                         <span
                                             style="

src/views/rule-engine/Alarm/Configuration/index.vue

@@ -78,7 +78,7 @@
                                         <div class="content-des-title">
                                             关联场景联动
                                         </div>
-                                        <Ellipsis
+                                        <Ellipsis style='margin-bottom: 18px;'
                                             ><div>
                                                 {{ (slotProps?.scene || []).map((item: any) => item?.name).join(',') || '' }}
                                             </div></Ellipsis

src/views/rule-engine/Alarm/Log/TabComponent/indev.vue

@@ -60,7 +60,7 @@
                             />
                         </template>
                         <template #content>
-                            <Ellipsis style="width: calc(100% - 100px)">
+                            <Ellipsis style="width: calc(100% - 100px);">
                                 <span style="font-weight: 500">
                                     {{ slotProps.alarmName }}
                                 </span>

src/views/rule-engine/Instance/index.vue

@@ -46,12 +46,12 @@
                             <template #img>
                                 <slot name="img">
                                     <img
-                                        :src="getImage('/device-product.png')"
+                                        :src="getImage('/scene/trigger-type/scene.png')"
                                     />
                                 </slot>
                             </template>
                             <template #content>
-                                <Ellipsis style="width: calc(100% - 100px)">
+                                <Ellipsis style="width: calc(100% - 100px); margin-bottom: 18px;">
                                     <span
                                         style="
                                             font-weight: 600;

src/views/rule-engine/Scene/index.vue

@@ -61,7 +61,7 @@
                         <span class='subTitle-content'>
                           <Ellipsis :lineClamp="2">
                                   {{
-                                      slotProps?.description ||
+                                      slotProps?.description ? slotProps?.description :
                                       typeMap.get(slotProps.triggerType)?.tip
                                   }}
                           </Ellipsis>
@@ -388,7 +388,7 @@ const handleView = (id: string, triggerType: string) => {
 <style scoped lang='less'>
 .subTitle {
   position: relative;
-  margin-top: 10px;
+  margin-top: 18px;
 
   .subTitle-title {
     position: absolute;

src/views/system/Department/components/AddDeviceOrProductDialog.vue

@@ -70,8 +70,11 @@
                         </slot>
                     </template>
                     <template #content>
-                        <h3 class="card-item-content-title">
+                        <h3 class="card-item-content-title" style='margin-bottom: 18px;'>
+                          <Ellipsis style="width: calc(100% - 100px);"
+                          >
                             {{ slotProps.name }}
+                          </Ellipsis>
                         </h3>
                         <j-row>
                             <j-col :span="12">

src/views/system/Department/device/index.vue

@@ -87,8 +87,11 @@
                             </slot>
                         </template>
                         <template #content>
-                            <h3 class="card-item-content-title">
+                            <h3 class="card-item-content-title" style='margin-bottom: 18px;'>
+                              <Ellipsis style="width: calc(100% - 100px);"
+                              >
                                 {{ slotProps.name }}
+                              </Ellipsis>
                             </h3>
                             <j-row>
                                 <j-col :span="12">

src/views/system/Department/product/index.vue

@@ -86,8 +86,11 @@
                             </slot>
                         </template>
                         <template #content>
-                            <h3 class="card-item-content-title">
+                            <h3 class="card-item-content-title" style='margin-bottom: 18px;'>
+                              <Ellipsis style="width: calc(100% - 100px);"
+                              >
                                 {{ slotProps.name }}
+                              </Ellipsis>
                             </h3>
                             <j-row>
                                 <j-col :span="12">

vite.config.ts

@@ -14,6 +14,7 @@ import monacoEditorPlugin from 'vite-plugin-monaco-editor';
 import { JetlinksVueResolver } from './plugin/jetlinks'
 import { optimizeDeps } from './plugin/optimize'
 import copy from 'rollup-plugin-copy';
+import progress from 'vite-plugin-progress'
 
 // https://vitejs.dev/config/
 export default defineConfig(({ mode}) => {
@@ -83,7 +84,8 @@ export default defineConfig(({ mode}) => {
             targets: [
               {src: 'node_modules/@liveqing/liveplayer-v3/dist/component/liveplayer-lib.min.js', dest: 'public/js'},
             ]
-          })
+          }),
+          progress()
       ],
       server: {
           host:'0.0.0.0',

yarn.lock

@@ -986,6 +986,11 @@
   resolved "https://registry.npmjs.org/@types/node/-/node-18.14.0.tgz"
   integrity sha512-5EWrvLmglK+imbCJY0+INViFWUHg1AHel1sq4ZVSfdcNqGy9Edv3UB9IIzzg+xPaUcAgZYcfVs2fBcwDeZzU0A==
 
+"@types/node@^10.3.6":
+  version "10.17.60"
+  resolved "http://registry.jetlinks.cn/@types%2fnode/-/node-10.17.60.tgz#35f3d6213daed95da7f0f73e75bcc6980e90597b"
+  integrity sha512-F0KIgDJfy2nA3zMLmWGKxcH2ZVEtCZXHHdOQs2gSaQ27+lNeEfGxzkIw90aXswATX7AZ33tahPbzy6KAfUreVw==
+
 "@types/normalize-package-data@^2.4.0":
   version "2.4.1"
   resolved "https://registry.npmmirror.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz"
@@ -5413,6 +5418,11 @@ process@^0.11.10:
   resolved "https://registry.jetlinks.cn/process/-/process-0.11.10.tgz"
   integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==
 
+progress@^2.0.3:
+  version "2.0.3"
+  resolved "http://registry.jetlinks.cn/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
+  integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
+
 promise-all-reject-late@^1.0.0:
   version "1.0.1"
   resolved "https://registry.jetlinks.cn/promise-all-reject-late/-/promise-all-reject-late-1.0.1.tgz"
@@ -5525,6 +5535,13 @@ rc@1.2.8, rc@^1.0.1, rc@^1.1.6, rc@^1.2.1, rc@^1.2.8:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+rd@^2.0.1:
+  version "2.0.1"
+  resolved "http://registry.jetlinks.cn/rd/-/rd-2.0.1.tgz#e18a8af5b2f7440c0db1523ca04c6e0f9660003f"
+  integrity sha512-/XdKU4UazUZTXFmI0dpABt8jSXPWcEyaGdk340KdHnsEOdkTctlX23aAK7ChQDn39YGNlAJr1M5uvaKt4QnpNw==
+  dependencies:
+    "@types/node" "^10.3.6"
+
 read-cmd-shim@^2.0.0:
   version "2.0.0"
   resolved "http://47.108.170.157:9013/read-cmd-shim/-/read-cmd-shim-2.0.0.tgz#4a50a71d6f0965364938e9038476f7eede3928d9"
@@ -6402,6 +6419,13 @@ tough-cookie@~2.5.0:
     psl "^1.1.28"
     punycode "^2.1.1"
 
+treer@^1.0.4:
+  version "1.0.4"
+  resolved "http://registry.jetlinks.cn/treer/-/treer-1.0.4.tgz#3b5ff47baec11c97476b8b7712da71cf459d52a3"
+  integrity sha512-Q2oAOOxzGYq+/KoKT1bZSSwDL4Y4WYukjiYBAn6GrNlt1xKKf5JS216dsSzkPDoYTHA9CXdbYkehUG7F1JT+5A==
+  dependencies:
+    commander "^2.9.0"
+
 treeverse@^1.0.4:
   version "1.0.4"
   resolved "http://47.108.170.157:9013/treeverse/-/treeverse-1.0.4.tgz#a6b0ebf98a1bca6846ddc7ecbc900df08cb9cd5f"
@@ -6781,6 +6805,15 @@ vite-plugin-monaco-editor@^1.1.0:
   resolved "https://registry.jetlinks.cn/vite-plugin-monaco-editor/-/vite-plugin-monaco-editor-1.1.0.tgz"
   integrity sha512-IvtUqZotrRoVqwT0PBBDIZPNraya3BxN/bfcNfnxZ5rkJiGcNtO5eAOWWSgT7zullIAEqQwxMU83yL9J5k7gww==
 
+vite-plugin-progress@^0.0.7:
+  version "0.0.7"
+  resolved "http://registry.jetlinks.cn/vite-plugin-progress/-/vite-plugin-progress-0.0.7.tgz#10979d2195b4dd1960ad0ec9347ce844fc13b97d"
+  integrity sha512-zyvKdcc/X+6hnw3J1HVV1TKrlFKC4Rh8GnDnWG/2qhRXjqytTcM++xZ+SAPnoDsSyWl8O93ymK0wZRgHAoglEQ==
+  dependencies:
+    picocolors "^1.0.0"
+    progress "^2.0.3"
+    rd "^2.0.1"
+
 vite-plugin-style-import@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/vite-plugin-style-import/-/vite-plugin-style-import-2.0.0.tgz"