From 7bb59bc1bd29464fcdbbc486dc0bd6b91d7300bb Mon Sep 17 00:00:00 2001
From: pnoker <pnokers@gmail.com>
Date: Fri, 18 Apr 2025 14:39:14 +0800
Subject: [PATCH] style: add scoped attribute to all Vue component styles and
 refactor shared SCSS

---
 src/App.vue                                   |   2 +-
 src/components/card/base/BaseCard.vue         |  14 +-
 src/components/card/blank/BlankCard.vue       |  14 +-
 src/components/card/detail/DetailCard.vue     |  14 +-
 src/components/card/skeleton/SkeletonCard.vue | 137 +++++----
 src/components/card/styles/edit-card.scss     |  69 +++--
 src/components/card/styles/things-card.scss   | 273 +++++++++---------
 src/components/card/styles/tool-card.scss     |  11 +-
 src/components/card/title/TitleCard.vue       |  38 +--
 src/components/layout/Layout.vue              |   2 +-
 src/components/particles/particles.vue        |   2 +-
 src/views/application/Application.vue         |   2 +-
 .../application/card/ApplicationCard.vue      |   2 +-
 src/views/dashboard/Dashboard.vue             |   2 +-
 src/views/dashboard/card/DashboardCard.vue    |   2 +-
 src/views/device/Device.vue                   |   2 +-
 src/views/device/add/DeviceAddForm.vue        |   2 +-
 src/views/device/card/DeviceCard.vue          |   2 +-
 src/views/device/detail/DeviceDetail.vue      |   2 +-
 src/views/device/edit/DeviceEdit.vue          |   2 +-
 src/views/device/import/DeviceImportForm.vue  |   2 +-
 src/views/device/tool/DeviceTool.vue          |   2 +-
 src/views/driver/Driver.vue                   |   2 +-
 src/views/driver/card/DriverCard.vue          |   2 +-
 src/views/driver/detail/DriverDetail.vue      |   2 +-
 src/views/driver/tool/DriverTool.vue          |   2 +-
 src/views/home/Home.vue                       |   2 +-
 src/views/login/Login.vue                     |   2 +-
 src/views/point/add/PointAddForm.vue          |   2 +-
 src/views/point/card/PointCard.vue            |   2 +-
 src/views/point/detail/PointDetail.vue        |   2 +-
 src/views/point/edit/PointEdit.vue            |   2 +-
 src/views/point/info/PointInfoCard.vue        |   2 +-
 src/views/point/tool/PointTool.vue            |   2 +-
 src/views/point/value/PointValue.vue          |   2 +-
 src/views/point/value/card/PointValueCard.vue |   2 +-
 .../point/value/detail/PointValueDetail.vue   |   2 +-
 .../point/value/edit/PointValueEditForm.vue   |   2 +-
 src/views/point/value/tool/PointValueTool.vue |   2 +-
 src/views/profile/Profile.vue                 |   2 +-
 src/views/profile/add/ProfileAddForm.vue      |   2 +-
 src/views/profile/card/ProfileCard.vue        |   2 +-
 src/views/profile/detail/ProfileDetail.vue    |   2 +-
 src/views/profile/edit/ProfileEdit.vue        |   2 +-
 src/views/profile/tool/ProfileTool.vue        |   2 +-
 45 files changed, 315 insertions(+), 329 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 7117beeb5..041bd4b7a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -20,7 +20,7 @@
     </div>
 </template>
 
-<style lang="scss">
+<style lang="scss" scoped>
     #app {
         width: 100%;
         height: 100%;
diff --git a/src/components/card/base/BaseCard.vue b/src/components/card/base/BaseCard.vue
index 724ee97f6..6c4f861a2 100644
--- a/src/components/card/base/BaseCard.vue
+++ b/src/components/card/base/BaseCard.vue
@@ -16,7 +16,7 @@
 
 <template>
     <div class="base-card">
-        <el-card shadow="hover">
+        <el-card class="base-card__body" shadow="hover">
             <div class="base-card__container">
                 <slot />
             </div>
@@ -26,7 +26,7 @@
 
 <script lang="ts" setup></script>
 
-<style lang="scss">
+<style lang="scss" scoped>
     .base-card {
         border-radius: 4px;
         box-sizing: border-box;
@@ -40,17 +40,17 @@
             }
         }
 
-        .el-card {
+        :deep(.el-card) {
             width: 100%;
             box-sizing: border-box;
         }
 
-        .el-tabs__nav {
-            margin: 0 5px 0 5px;
+        :deep(.el-tabs__nav) {
+            margin: 0 5px;
         }
 
         .base-card__container {
-            .el-tabs__header {
+            :deep(.el-tabs__header) {
                 margin-bottom: 0;
 
                 .el-tabs__nav-wrap:after {
@@ -58,7 +58,7 @@
                 }
             }
 
-            .el-tab-pane {
+            :deep(.el-tab-pane) {
                 background: #f6f7f9;
             }
         }
diff --git a/src/components/card/blank/BlankCard.vue b/src/components/card/blank/BlankCard.vue
index 92f37c4e0..902ce9757 100644
--- a/src/components/card/blank/BlankCard.vue
+++ b/src/components/card/blank/BlankCard.vue
@@ -26,7 +26,7 @@
 
 <script lang="ts" setup></script>
 
-<style lang="scss">
+<style lang="scss" scoped>
     .blank-card {
         border-radius: 4px;
         box-sizing: border-box;
@@ -40,21 +40,21 @@
             }
         }
 
-        .el-card {
+        :deep(.el-card) {
             width: 100%;
             box-sizing: border-box;
         }
 
-        .el-card.blank-card__body {
+        :deep(.el-card.blank-card__body) {
             border: 0;
         }
 
-        .el-card__body {
-            padding: 10px 5px 0 5px;
+        :deep(.el-card__body) {
+            padding: 10px 5px 0;
         }
 
-        .el-tabs__nav {
-            margin: 0 5px 0 5px;
+        :deep(.el-tabs__nav) {
+            margin: 0 5px;
         }
     }
 </style>
diff --git a/src/components/card/detail/DetailCard.vue b/src/components/card/detail/DetailCard.vue
index b7ae945e1..6e2cd5776 100644
--- a/src/components/card/detail/DetailCard.vue
+++ b/src/components/card/detail/DetailCard.vue
@@ -16,7 +16,7 @@
 
 <template>
     <div class="detail-card">
-        <el-card shadow="hover">
+        <el-card class="detail-card__body" shadow="hover">
             <div class="detail-card__container">
                 <slot />
             </div>
@@ -26,7 +26,7 @@
 
 <script lang="ts" setup></script>
 
-<style lang="scss">
+<style lang="scss" scoped>
     .detail-card {
         border-radius: 4px;
         box-sizing: border-box;
@@ -40,17 +40,17 @@
             }
         }
 
-        .el-card {
+        :deep(.el-card) {
             width: 100%;
             box-sizing: border-box;
         }
 
-        .el-card__body {
-            padding: 10px 5px 0 5px;
+        :deep(.el-card__body) {
+            padding: 10px 5px 0;
         }
 
-        .el-tabs__nav {
-            margin: 0 5px 0 5px;
+        :deep(.el-tabs__nav) {
+            margin: 0 5px;
         }
     }
 </style>
diff --git a/src/components/card/skeleton/SkeletonCard.vue b/src/components/card/skeleton/SkeletonCard.vue
index f39763021..a2c891b8f 100644
--- a/src/components/card/skeleton/SkeletonCard.vue
+++ b/src/components/card/skeleton/SkeletonCard.vue
@@ -20,7 +20,7 @@
             <el-row>
                 <el-col v-for="data in 12" :key="data" :lg="6" :md="8" :sm="12" :xl="4" :xs="24">
                     <div class="skeleton-card">
-                        <el-card shadow="hover">
+                        <el-card class="skeleton-card__body" shadow="hover">
                             <div class="skeleton-card__container">
                                 <div class="skeleton-card__header">
                                     <el-skeleton-item ariant="image" class="skeleton-card-icon" />
@@ -77,14 +77,11 @@
     })
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
     .skeleton-card {
         border-radius: 4px;
         box-sizing: border-box;
-
-        margin-left: 3px;
-        margin-right: 3px;
-        margin-bottom: 6px;
+        margin: 0 3px 6px;
     }
 
     .skeleton-card__container {
@@ -92,79 +89,79 @@
         display: flex;
         flex-direction: column;
         justify-content: space-between;
+    }
 
-        .skeleton-card__header {
+    .skeleton-card__header {
+        width: 100%;
+        height: 55px;
+        display: flex;
+        border-bottom: 1px solid #dcdfe6;
+    }
+
+    .skeleton-card-icon {
+        width: 55px;
+        height: 48px;
+        margin-right: 12px;
+        border-radius: 4px;
+        overflow: hidden;
+
+        img {
             width: 100%;
-            height: 55px;
-            display: flex;
-            border-bottom: 1px solid #dcdfe6;
-
-            .skeleton-card-icon {
-                width: 55px;
-                height: 48px;
-                margin-right: 12px;
-                border-radius: 4px;
-                overflow: hidden;
-
-                img {
-                    width: 100%;
-                    height: 100%;
-                }
-            }
-
-            .skeleton-card-name {
-                height: 28px;
-                margin-top: 10px;
-                line-height: 48px;
-            }
+            height: 100%;
         }
+    }
 
-        .skeleton-card__body {
-            display: flex;
-            flex-direction: column;
+    .skeleton-card-name {
+        height: 28px;
+        margin-top: 10px;
+        line-height: 48px;
+    }
 
-            .skeleton-card-content {
-                display: flex;
-                justify-content: space-around;
+    .skeleton-card__body {
+        display: flex;
+        flex-direction: column;
+    }
 
-                ul {
-                    width: 100%;
-                    padding-inline-start: 25px;
-                    list-style: none;
+    .skeleton-card-content {
+        display: flex;
+        justify-content: space-around;
 
-                    li {
-                        font-size: 13px;
-                        margin-top: 8px;
-                    }
-                }
+        ul {
+            width: 100%;
+            padding-inline-start: 25px;
+            list-style: none;
 
-                .skeleton-card-text {
-                    margin-top: 2px;
-                }
-
-                .skeleton-card-description {
-                    margin-top: 10px;
-                }
-            }
-        }
-
-        .skeleton-card__footer {
-            height: 35px;
-            margin-top: 10px;
-            display: flex;
-            justify-content: flex-end;
-            align-items: center;
-            border-top: 1px solid #dcdfe6;
-
-            .skeleton-card-operation {
-                display: flex;
-
-                .skeleton-card-button {
-                    width: 28px;
-                    height: 20px;
-                    margin-right: 10px;
-                }
+            li {
+                font-size: 13px;
+                margin-top: 8px;
             }
         }
     }
+
+    .skeleton-card-text {
+        margin-top: 2px;
+    }
+
+    .skeleton-card-description {
+        margin-top: 10px;
+    }
+
+    .skeleton-card__footer {
+        height: 35px;
+        margin-top: 10px;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        border-top: 1px solid #dcdfe6;
+    }
+
+    .skeleton-card-operation {
+        display: flex;
+    }
+
+    .skeleton-card-button {
+        width: 28px;
+        height: 20px;
+        margin-right: 10px;
+    }
 </style>
diff --git a/src/components/card/styles/edit-card.scss b/src/components/card/styles/edit-card.scss
index 2a68acc58..bd459f9e2 100644
--- a/src/components/card/styles/edit-card.scss
+++ b/src/components/card/styles/edit-card.scss
@@ -16,53 +16,52 @@
 
 .edit-card {
     margin-top: 1px;
+}
 
-    .edit-card-header {
-        margin-bottom: 4px;
+.edit-card-header {
+    margin-bottom: 4px;
 
-        .el-card {
-            border: 0;
-        }
+    :deep(.el-card) {
+        border: 0;
     }
+}
 
-    .edit-card-body {
-        .edit-form-item {
-            display: flex;
-            margin-top: 10px;
-            margin-bottom: 10px;
+.edit-card-body {
+    .edit-form-item {
+        display: flex;
+        margin: 10px 0;
+        justify-content: center;
+
+        :deep(.el-row) {
             justify-content: center;
-
-            .el-row {
-                justify-content: center;
-            }
-
-            .el-alert {
-                margin-bottom: 10px;
-            }
-
-            .el-textarea__inner {
-                height: 80px;
-            }
         }
 
-        .edit-form-button {
-            display: flex;
-            margin-top: 10px;
+        :deep(.el-alert) {
+            margin-bottom: 10px;
+        }
 
-            .el-form-item__content {
-                justify-content: center;
-            }
+        :deep(.el-textarea__inner) {
+            height: 80px;
         }
     }
 
-    .el-form-item__label {
-        display: block;
-        width: 100px;
-        height: 32px;
-        text-align: justify;
-    }
+    .edit-form-button {
+        display: flex;
+        margin-top: 10px;
 
-    .el-form-item__label::after {
+        :deep(.el-form-item__content) {
+            justify-content: center;
+        }
+    }
+}
+
+:deep(.el-form-item__label) {
+    display: block;
+    width: 100px;
+    height: 32px;
+    text-align: justify;
+
+    &::after {
         display: inline-block;
         width: 100%;
         content: '';
diff --git a/src/components/card/styles/things-card.scss b/src/components/card/styles/things-card.scss
index da098800d..3cdb20615 100644
--- a/src/components/card/styles/things-card.scss
+++ b/src/components/card/styles/things-card.scss
@@ -14,10 +14,15 @@
  * limitations under the License.
  */
 
+@mixin text-ellipsis {
+    display: block;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
 .things-card {
-    margin-left: 3px;
-    margin-right: 3px;
-    margin-bottom: 6px;
+    margin: 0 3px 6px;
     border-radius: 4px;
     box-sizing: border-box;
 
@@ -26,185 +31,173 @@
         display: flex;
         flex-direction: column;
         justify-content: space-between;
+    }
 
-        .things-card__header {
-            width: 100%;
-            height: 55px;
-            display: flex;
+    .things-card__header {
+        width: 100%;
+        height: 55px;
+        display: flex;
 
-            .things-card-header-icon {
-                width: 48px;
-                height: 48px;
-                margin-right: 12px;
-                border-radius: 4px;
-                overflow: hidden;
+        .things-card-header-icon {
+            width: 48px;
+            height: 48px;
+            margin-right: 12px;
+            border-radius: 4px;
+            overflow: hidden;
 
-                img {
-                    width: 100%;
-                    height: 100%;
-                }
-            }
-
-            .things-card-header-name {
-                height: 48px;
-                line-height: 48px;
-                font-size: 14px;
-                font-weight: bold;
-                color: rgba(0, 0, 0, 0.85);
-                cursor: pointer;
-
-                &:hover {
-                    color: #1890ff;
-                }
-            }
-
-            .things-card-header-status {
-                height: 48px;
-                line-height: 48px;
-                text-align: right;
-                flex: 1;
+            img {
+                width: 100%;
+                height: 100%;
             }
         }
 
-        .things-card__body {
+        .things-card-header-name {
+            height: 48px;
+            line-height: 48px;
+            font-size: 14px;
+            font-weight: bold;
+            color: rgba(0, 0, 0, 0.85);
+            cursor: pointer;
+
+            &:hover {
+                color: #1890ff;
+            }
+        }
+
+        .things-card-header-status {
+            height: 48px;
+            line-height: 48px;
+            text-align: right;
+            flex: 1;
+        }
+    }
+
+    .things-card__body {
+        display: flex;
+        flex-direction: column;
+
+        ul {
+            padding-inline-start: 5px;
+            list-style: none;
+
+            li {
+                font-size: 13px;
+                margin-top: 8px;
+            }
+        }
+
+        .things-card-body-content {
+            display: flex;
+            justify-content: space-around;
+
+            p.nowrap-description {
+                text-align: center;
+            }
+        }
+
+        .things-card-body-content-time {
+            display: flex;
+            justify-content: center;
+            margin-top: 5px;
+        }
+
+        .things-card-body-content-column {
             display: flex;
             flex-direction: column;
+        }
 
-            ul {
-                padding-inline-start: 5px;
-                list-style: none;
+        .things-card-body-content-value {
+            display: flex;
+            flex-direction: column;
+            list-style: none;
+            text-align: center;
+            margin-top: 20px;
 
-                li {
-                    font-size: 13px;
-                    margin-top: 8px;
-                }
+            .value {
+                font-weight: bold;
+                font-size: xx-large;
+                animation: hue 1s ease-in;
+                cursor: pointer;
             }
 
-            .things-card-body-content {
-                display: flex;
-                justify-content: space-around;
-
-                p.nowrap-description {
-                    text-align: center;
-                }
+            .value-edit {
+                cursor: pointer;
+                color: #409eff;
             }
 
-            .things-card-body-content-time {
-                display: flex;
-                justify-content: center;
-                margin-top: 5px;
+            .value-detail {
+                margin: 8px 0 -4px;
+                cursor: pointer;
+                color: #409eff;
+                font-size: 18px;
             }
 
-            .things-card-body-content-column {
-                display: flex;
-                flex-direction: column;
+            .value-point {
+                height: 17px;
             }
 
-            .things-card-body-content-value {
-                display: flex;
-                flex-direction: column;
-                list-style: none;
-                text-align: center;
-                margin-top: 20px;
-
-                .value {
-                    font-weight: bold;
-                    font-size: xx-large;
-                    animation: hue 1s ease-in;
-                    cursor: pointer;
-                }
-
-                .value-edit {
-                    cursor: pointer;
+            @keyframes hue {
+                0% {
                     color: #409eff;
                 }
-
-                .value-detail {
-                    margin-top: 8px;
-                    margin-bottom: -4px;
-                    cursor: pointer;
+                50% {
+                    color: #f3f4fe;
+                }
+                100% {
                     color: #409eff;
-                    font-size: 18px;
                 }
-
-                .value-point {
-                    height: 17px;
-                }
-
-                @keyframes hue {
-                    0% {
-                        color: #409eff;
-                    }
-
-                    50% {
-                        color: #f3f4fe;
-                    }
-
-                    100% {
-                        color: #409eff;
-                    }
-                }
-            }
-
-            .things-body-content-item-column-2 {
-                width: 200px;
             }
         }
 
-        .things-card__footer {
+        .things-body-content-item-column-2 {
+            width: 200px;
+        }
+    }
+
+    .things-card__footer {
+        height: 35px;
+        margin-top: 2px;
+        display: flex;
+        justify-content: flex-end;
+        border-top: 1px solid #dcdfe6;
+
+        .things-card-footer-title {
+            text-align: center;
+            font-size: 14px;
+            font-weight: bold;
+            width: 100%;
+            margin-top: 5px;
+        }
+
+        .things-card-footer-copy-id {
+            height: 35px;
+            line-height: 35px;
+            text-align: center;
+        }
+
+        .things-card-footer-operation {
             height: 35px;
-            margin-top: 2px;
             display: flex;
-            justify-content: flex-end;
-            border-top: 1px solid #dcdfe6;
 
-            .things-card-footer-title {
-                text-align: center;
-                font-size: 14px;
-                font-weight: bold;
-                width: 100%;
-                margin-top: 5px;
-            }
-
-            .things-card-footer-copy-id {
-                height: 35px;
-                line-height: 35px;
-                text-align: center;
-            }
-
-            .things-card-footer-operation {
-                height: 35px;
-                display: flex;
-
-                .operation-tooltip {
-                    margin-right: 10px;
-                }
+            .operation-tooltip {
+                margin-right: 10px;
             }
         }
     }
 
     .nowrap-name {
-        display: block;
+        @include text-ellipsis;
         width: 200px;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
     }
 
     .nowrap-item {
-        display: block;
+        @include text-ellipsis;
         width: 300px;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
     }
 
     .nowrap-description {
-        display: block;
+        @include text-ellipsis;
         width: 350px;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
     }
 
     .el-card {
diff --git a/src/components/card/styles/tool-card.scss b/src/components/card/styles/tool-card.scss
index ebce06596..fd348ebe2 100644
--- a/src/components/card/styles/tool-card.scss
+++ b/src/components/card/styles/tool-card.scss
@@ -15,8 +15,7 @@
  */
 
 .tool-card {
-    margin-top: 1px;
-    margin-bottom: 4px;
+    margin: 1px 0 4px;
 
     .tool-card__body {
         display: flex;
@@ -28,7 +27,7 @@
         }
 
         .tool-card-body-button {
-            .el-form-item__content {
+            :deep(.el-form-item__content) {
                 display: flex;
                 justify-content: center;
             }
@@ -50,9 +49,7 @@
 
     .tool-select {
         .tool-select-input {
-            margin-left: 10px;
-            margin-right: 10px;
-            margin-bottom: 5px;
+            margin: 0 10px 5px;
         }
 
         .tool-select-pagination {
@@ -61,7 +58,7 @@
         }
     }
 
-    .el-card {
+    :deep(.el-card) {
         border: 0;
     }
 }
diff --git a/src/components/card/title/TitleCard.vue b/src/components/card/title/TitleCard.vue
index 313b92c0c..60277dd65 100644
--- a/src/components/card/title/TitleCard.vue
+++ b/src/components/card/title/TitleCard.vue
@@ -16,7 +16,7 @@
 
 <template>
     <div class="title-card">
-        <el-card shadow="hover">
+        <el-card class="title-card__body" shadow="hover">
             <div class="title-card__container">
                 <slot name="header">
                     <span class="title-card__header">{{ props.title }}</span>
@@ -36,11 +36,28 @@
     })
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
     .title-card {
         border-radius: 4px;
         box-sizing: border-box;
 
+        :deep(.el-card) {
+            width: 100%;
+            box-sizing: border-box;
+        }
+
+        :deep(.el-card__header) {
+            padding: 10px;
+        }
+
+        :deep(.el-card__body) {
+            padding: 10px 5px 0;
+        }
+
+        :deep(.el-tabs__nav) {
+            margin: 0 5px;
+        }
+
         .title-card__container {
             .title-card__header {
                 font-size: 14px;
@@ -51,23 +68,6 @@
                 padding-top: 0;
                 padding-left: 0;
             }
-
-            .el-card {
-                width: 100%;
-                box-sizing: border-box;
-            }
-
-            .el-card__header {
-                padding: 10px;
-            }
-
-            .el-card__body {
-                padding: 10px 5px 0px 5px;
-            }
-
-            .el-tabs__nav {
-                margin: 0 5px 0 5px;
-            }
         }
     }
 </style>
diff --git a/src/components/layout/Layout.vue b/src/components/layout/Layout.vue
index 287df5710..6bc860cfb 100644
--- a/src/components/layout/Layout.vue
+++ b/src/components/layout/Layout.vue
@@ -110,6 +110,6 @@
     }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
     @use '@/components/layout/style.scss';
 </style>
diff --git a/src/components/particles/particles.vue b/src/components/particles/particles.vue
index 179ca535c..479b374ee 100644
--- a/src/components/particles/particles.vue
+++ b/src/components/particles/particles.vue
@@ -410,7 +410,7 @@
     }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
     canvas {
         display: block;
     }
diff --git a/src/views/application/Application.vue b/src/views/application/Application.vue
index a911eaa25..4ecc75090 100644
--- a/src/views/application/Application.vue
+++ b/src/views/application/Application.vue
@@ -20,7 +20,7 @@
 
 <script lang="ts" src="./index.ts" />
 
-<style lang="scss">
+<style lang="scss" scoped>
     .things-application-iframe {
         width: 100%;
         height: 100%;
diff --git a/src/views/application/card/ApplicationCard.vue b/src/views/application/card/ApplicationCard.vue
index e643e4ef6..6f6c2f05a 100644
--- a/src/views/application/card/ApplicationCard.vue
+++ b/src/views/application/card/ApplicationCard.vue
@@ -66,7 +66,7 @@
     }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
     @use '@/components/card/styles/things-card.scss';
 
     .things-card-application {
diff --git a/src/views/dashboard/Dashboard.vue b/src/views/dashboard/Dashboard.vue
index 03b71b46d..50631c762 100644
--- a/src/views/dashboard/Dashboard.vue
+++ b/src/views/dashboard/Dashboard.vue
@@ -20,7 +20,7 @@
 
 <script lang="ts" src="./index.ts" />
 
-<style lang="scss">
+<style lang="scss" scoped>
     .things-dashboard-iframe {
         width: 100%;
         height: 100%;
diff --git a/src/views/dashboard/card/DashboardCard.vue b/src/views/dashboard/card/DashboardCard.vue
index f23fba9d4..875aa6953 100644
--- a/src/views/dashboard/card/DashboardCard.vue
+++ b/src/views/dashboard/card/DashboardCard.vue
@@ -66,7 +66,7 @@
     }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
     @use '@/components/card/styles/things-card.scss';
 
     .things-card-dashboard {
diff --git a/src/views/device/Device.vue b/src/views/device/Device.vue
index 200fde7f7..d2432950c 100644
--- a/src/views/device/Device.vue
+++ b/src/views/device/Device.vue
@@ -76,4 +76,4 @@
 
 <script lang="ts" src="./index.ts" />
 
-<style lang="scss"></style>
+<style lang="scss" scoped></style>
diff --git a/src/views/device/add/DeviceAddForm.vue b/src/views/device/add/DeviceAddForm.vue
index c3102fc6d..ce8ada78f 100644
--- a/src/views/device/add/DeviceAddForm.vue
+++ b/src/views/device/add/DeviceAddForm.vue
@@ -94,7 +94,7 @@
 
 <script lang="ts" src="./index.ts" />
 
-<style lang="scss">
+<style lang="scss" scoped>
     @use '@/components/dialog/styles/things-dialog';
     @use '@/components/card/styles/tool-card';
 </style>
diff --git a/src/views/device/card/DeviceCard.vue b/src/views/device/card/DeviceCard.vue
index da1239357..022864e08 100644
--- a/src/views/device/card/DeviceCard.vue
+++ b/src/views/device/card/DeviceCard.vue
@@ -102,6 +102,6 @@
 
 <script lang="ts" src="./index.ts" />
 
-<style lang="scss">
+<style lang="scss" scoped>
     @use '@/components/card/styles/things-card.scss';
 </style>
diff --git a/src/views/device/detail/DeviceDetail.vue b/src/views/device/detail/DeviceDetail.vue
index 71894f30c..0e40595f5 100644
--- a/src/views/device/detail/DeviceDetail.vue
+++ b/src/views/device/detail/DeviceDetail.vue
@@ -194,6 +194,6 @@
     })
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
     @use '@/components/card/styles/things-card.scss';
 </style>
diff --git a/src/views/device/edit/DeviceEdit.vue b/src/views/device/edit/DeviceEdit.vue
index a143c9dd8..72d264155 100644
--- a/src/views/device/edit/DeviceEdit.vue
+++ b/src/views/device/edit/DeviceEdit.vue
@@ -216,7 +216,7 @@
 
 <script lang="ts" src="./index.ts" />
 
-<style lang="scss">
+<style lang="scss" scoped>
     @use '@/components/card/styles/edit-card';
     @use '@/components/card/styles/tool-card';
 </style>
diff --git a/src/views/device/import/DeviceImportForm.vue b/src/views/device/import/DeviceImportForm.vue
index 103eb110c..6e69027a6 100644
--- a/src/views/device/import/DeviceImportForm.vue
+++ b/src/views/device/import/DeviceImportForm.vue
@@ -100,7 +100,7 @@
 
 <script lang="ts" src="./index.ts" />
 
-<style lang="scss">
+<style lang="scss" scoped>
     @use '@/components/dialog/styles/things-dialog';
     @use '@/components/card/styles/tool-card';
 </style>
diff --git a/src/views/device/tool/DeviceTool.vue b/src/views/device/tool/DeviceTool.vue
index c78958695..2128bdb3a 100644
--- a/src/views/device/tool/DeviceTool.vue
+++ b/src/views/device/tool/DeviceTool.vue
@@ -92,6 +92,6 @@
 
 <script lang="ts" src="./index.ts" />
 
-<style lang="scss">
+<style lang="scss" scoped>
     @use '@/components/card/styles/tool-card';
 </style>
diff --git a/src/views/driver/Driver.vue b/src/views/driver/Driver.vue
index 87c8ffe7e..bde660379 100644
--- a/src/views/driver/Driver.vue
+++ b/src/views/driver/Driver.vue
@@ -37,4 +37,4 @@
 
 <script lang="ts" src="./index.ts" />
 
-<style lang="scss"></style>
+<style lang="scss" scoped></style>
diff --git a/src/views/driver/card/DriverCard.vue b/src/views/driver/card/DriverCard.vue
index 19586a342..cf3287306 100644
--- a/src/views/driver/card/DriverCard.vue
+++ b/src/views/driver/card/DriverCard.vue
@@ -87,7 +87,7 @@
 
 <script lang="ts" src="./index.ts" />
 
-<style lang="scss">
+<style lang="scss" scoped>
     @use '@/components/card/styles/things-card.scss';
     @use '@/views/driver/card/style.scss';
 </style>
diff --git a/src/views/driver/detail/DriverDetail.vue b/src/views/driver/detail/DriverDetail.vue
index e9b5a77e7..345fe9150 100644
--- a/src/views/driver/detail/DriverDetail.vue
+++ b/src/views/driver/detail/DriverDetail.vue
@@ -89,7 +89,7 @@
 
 <script lang="ts" src="./index.ts" />
 
-<style lang="scss">
+<style lang="scss" scoped>
     .detail-content {
         margin-left: 0 !important;
         margin-right: 0 !important;
diff --git a/src/views/driver/tool/DriverTool.vue b/src/views/driver/tool/DriverTool.vue
index 7c5cc068d..981dc2a6e 100644
--- a/src/views/driver/tool/DriverTool.vue
+++ b/src/views/driver/tool/DriverTool.vue
@@ -72,6 +72,6 @@
 
 <script lang="ts" src="./index.ts" />
 
-<style lang="scss">
+<style lang="scss" scoped>
     @use '@/components/card/styles/tool-card.scss';
 </style>
diff --git a/src/views/home/Home.vue b/src/views/home/Home.vue
index 6fc046e4a..0c827f4f6 100644
--- a/src/views/home/Home.vue
+++ b/src/views/home/Home.vue
@@ -24,6 +24,6 @@
 
 <script lang="ts" src="./index.ts" />
 
-<style lang="scss">
+<style lang="scss" scoped>
     @use '@/views/home/style.scss';
 </style>
diff --git a/src/views/login/Login.vue b/src/views/login/Login.vue
index 27d0efc76..d4d41a4b5 100644
--- a/src/views/login/Login.vue
+++ b/src/views/login/Login.vue
@@ -109,6 +109,6 @@
     }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
     @use '@/views/login/style.scss';
 </style>
diff --git a/src/views/point/add/PointAddForm.vue b/src/views/point/add/PointAddForm.vue
index 7b9a61171..ddabcefcf 100644
--- a/src/views/point/add/PointAddForm.vue
+++ b/src/views/point/add/PointAddForm.vue
@@ -76,6 +76,6 @@
 
 <script lang="ts" src="./index.ts" />
 
-<style lang="scss">
+<style lang="scss" scoped>
     @use '@/components/dialog/styles/things-dialog';
 </style>
diff --git a/src/views/point/card/PointCard.vue b/src/views/point/card/PointCard.vue
index 6a30dfcd5..36aed8048 100644
--- a/src/views/point/card/PointCard.vue
+++ b/src/views/point/card/PointCard.vue
@@ -130,6 +130,6 @@
 
 <script lang="ts" src="./index.ts" />
 
-<style lang="scss">
+<style lang="scss" scoped>
     @use '@/components/card/styles/things-card.scss';
 </style>
diff --git a/src/views/point/detail/PointDetail.vue b/src/views/point/detail/PointDetail.vue
index 1e6562c77..c3585735c 100644
--- a/src/views/point/detail/PointDetail.vue
+++ b/src/views/point/detail/PointDetail.vue
@@ -65,6 +65,6 @@
 
 <script lang="ts" src="./index.ts" />
 
-<style lang="scss">
+<style lang="scss" scoped>
     @use '@/components/card/styles/things-card.scss';
 </style>
diff --git a/src/views/point/edit/PointEdit.vue b/src/views/point/edit/PointEdit.vue
index 5528cb3d6..8f47acd3b 100644
--- a/src/views/point/edit/PointEdit.vue
+++ b/src/views/point/edit/PointEdit.vue
@@ -112,6 +112,6 @@
 
 <script lang="ts" src="./index.ts" />
 
-<style lang="scss">
+<style lang="scss" scoped>
     @use '@/components/card/styles/edit-card.scss';
 </style>
diff --git a/src/views/point/info/PointInfoCard.vue b/src/views/point/info/PointInfoCard.vue
index 47fc6cd5a..0396b7212 100644
--- a/src/views/point/info/PointInfoCard.vue
+++ b/src/views/point/info/PointInfoCard.vue
@@ -49,6 +49,6 @@
 
 <script lang="ts" src="./index.ts" />
 
-<style lang="scss">
+<style lang="scss" scoped>
     @use '@/components/card/styles/things-card.scss';
 </style>
diff --git a/src/views/point/tool/PointTool.vue b/src/views/point/tool/PointTool.vue
index 06beb874f..c8954b36f 100644
--- a/src/views/point/tool/PointTool.vue
+++ b/src/views/point/tool/PointTool.vue
@@ -94,6 +94,6 @@
 
 <script lang="ts" src="./index.ts" />
 
-<style lang="scss">
+<style lang="scss" scoped>
     @use '@/components/card/styles/tool-card.scss';
 </style>
diff --git a/src/views/point/value/PointValue.vue b/src/views/point/value/PointValue.vue
index eb6dbb143..f4068885f 100644
--- a/src/views/point/value/PointValue.vue
+++ b/src/views/point/value/PointValue.vue
@@ -209,4 +209,4 @@
     })
 </script>
 
-<style lang="scss"></style>
+<style lang="scss" scoped></style>
diff --git a/src/views/point/value/card/PointValueCard.vue b/src/views/point/value/card/PointValueCard.vue
index e4918ebe8..89376efaf 100644
--- a/src/views/point/value/card/PointValueCard.vue
+++ b/src/views/point/value/card/PointValueCard.vue
@@ -218,6 +218,6 @@
     })
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
     @use '@/components/card/styles/things-card';
 </style>
diff --git a/src/views/point/value/detail/PointValueDetail.vue b/src/views/point/value/detail/PointValueDetail.vue
index dde79fd5d..dcae4e286 100644
--- a/src/views/point/value/detail/PointValueDetail.vue
+++ b/src/views/point/value/detail/PointValueDetail.vue
@@ -36,6 +36,6 @@
 
 <script lang="ts" src="./index.ts" />
 
-<style lang="scss">
+<style lang="scss" scoped>
     @use '@/components/dialog/styles/things-dialog';
 </style>
diff --git a/src/views/point/value/edit/PointValueEditForm.vue b/src/views/point/value/edit/PointValueEditForm.vue
index 5b36d42fb..07b64b2ba 100644
--- a/src/views/point/value/edit/PointValueEditForm.vue
+++ b/src/views/point/value/edit/PointValueEditForm.vue
@@ -45,6 +45,6 @@
 
 <script lang="ts" src="./index.ts" />
 
-<style lang="scss">
+<style lang="scss" scoped>
     @use '@/components/dialog/styles/things-dialog';
 </style>
diff --git a/src/views/point/value/tool/PointValueTool.vue b/src/views/point/value/tool/PointValueTool.vue
index 7b10a956e..10cde09d6 100644
--- a/src/views/point/value/tool/PointValueTool.vue
+++ b/src/views/point/value/tool/PointValueTool.vue
@@ -249,6 +249,6 @@
     }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
     @use '@/components/card/styles/tool-card.scss';
 </style>
diff --git a/src/views/profile/Profile.vue b/src/views/profile/Profile.vue
index dc931c22a..6c7fa6217 100644
--- a/src/views/profile/Profile.vue
+++ b/src/views/profile/Profile.vue
@@ -48,4 +48,4 @@
 
 <script lang="ts" src="./index.ts" />
 
-<style lang="scss"></style>
+<style lang="scss" scoped></style>
diff --git a/src/views/profile/add/ProfileAddForm.vue b/src/views/profile/add/ProfileAddForm.vue
index d6dd22a56..17aea4257 100644
--- a/src/views/profile/add/ProfileAddForm.vue
+++ b/src/views/profile/add/ProfileAddForm.vue
@@ -45,6 +45,6 @@
 
 <script lang="ts" src="./index.ts" />
 
-<style lang="scss">
+<style lang="scss" scoped>
     @use '@/components/dialog/styles/things-dialog.scss';
 </style>
diff --git a/src/views/profile/card/ProfileCard.vue b/src/views/profile/card/ProfileCard.vue
index 5c6d84bb2..1228d059a 100644
--- a/src/views/profile/card/ProfileCard.vue
+++ b/src/views/profile/card/ProfileCard.vue
@@ -90,6 +90,6 @@
 
 <script lang="ts" src="./index.ts" />
 
-<style lang="scss">
+<style lang="scss" scoped>
     @use '@/components/card/styles/things-card.scss';
 </style>
diff --git a/src/views/profile/detail/ProfileDetail.vue b/src/views/profile/detail/ProfileDetail.vue
index 7dbbfdbc0..ef0e551bf 100644
--- a/src/views/profile/detail/ProfileDetail.vue
+++ b/src/views/profile/detail/ProfileDetail.vue
@@ -70,6 +70,6 @@
 
 <script lang="ts" src="./index.ts" />
 
-<style lang="scss">
+<style lang="scss" scoped>
     @use '@/components/card/styles/things-card.scss';
 </style>
diff --git a/src/views/profile/edit/ProfileEdit.vue b/src/views/profile/edit/ProfileEdit.vue
index 41397fbfd..bb87d6e79 100644
--- a/src/views/profile/edit/ProfileEdit.vue
+++ b/src/views/profile/edit/ProfileEdit.vue
@@ -74,6 +74,6 @@
 
 <script lang="ts" src="./index.ts" />
 
-<style lang="scss">
+<style lang="scss" scoped>
     @use '@/components/card/styles/edit-card.scss';
 </style>
diff --git a/src/views/profile/tool/ProfileTool.vue b/src/views/profile/tool/ProfileTool.vue
index f891a4edc..3a82ca021 100644
--- a/src/views/profile/tool/ProfileTool.vue
+++ b/src/views/profile/tool/ProfileTool.vue
@@ -64,6 +64,6 @@
 
 <script lang="ts" src="./index.ts" />
 
-<style lang="scss">
+<style lang="scss" scoped>
     @use '@/components/card/styles/tool-card.scss';
 </style>