style: enhance theme styling and component consistency across the application

- Update SCSS styles to use CSS variables for background colors, borders, and text colors for better theming support
- Refactor dropdown and tooltip components to ensure consistent dark mode styling
- Improve layout styling in demo views and machine/user management pages for a cohesive look
- Adjust padding and border-radius for various components to align with the new design system

src/assets/styles/theme/element-override.scss

@@ -197,44 +197,74 @@ html.dark {
   // 下拉菜单弹出
   .el-select-dropdown,
   .el-dropdown-menu {
-    background-color: var(--bg-container);
-    border-color: var(--border-color);
+    background-color: var(--bg-container) !important;
+    border-color: var(--border-color) !important;
+  }
+
+  // Select 下拉选项
+  .el-select-dropdown {
+    .el-select-dropdown__item {
+      color: var(--text-regular);
+
+      &:hover,
+      &.hover {
+        background-color: var(--bg-hover);
+      }
+
+      &.is-selected,
+      &.selected {
+        color: var(--color-primary);
+        font-weight: var(--font-weight-medium);
+      }
+    }
   }
 
   // 弹出层
   .el-popper {
-    background-color: var(--bg-container);
-    border-color: var(--border-color);
+    background-color: var(--bg-container) !important;
+    border-color: var(--border-color) !important;
     border: 1px solid var(--border-color) !important;
 
-    &.el-popper--light {
-      background-color: var(--bg-container);
-      border: 1px solid var(--border-color);
+    &.el-popper--light,
+    &.is-light {
+      background-color: var(--bg-container) !important;
+      border: 1px solid var(--border-color) !important;
 
       .el-popper__arrow::before {
-        background-color: var(--bg-container);
-        border-color: var(--border-color);
+        background-color: var(--bg-container) !important;
+        border-color: var(--border-color) !important;
       }
     }
+
+    .el-popper__arrow::before {
+      background-color: var(--bg-container) !important;
+      border-color: var(--border-color) !important;
+    }
   }
 
   // 下拉菜单
-  .el-dropdown__popper {
+  .el-dropdown__popper,
+  .el-dropdown__popper.el-popper {
     background-color: var(--bg-container) !important;
     border: 1px solid var(--border-color) !important;
     box-shadow: var(--shadow-lg) !important;
 
     .el-dropdown-menu {
-      background-color: var(--bg-container);
-      border: none;
+      background-color: var(--bg-container) !important;
+      border: none !important;
 
       .el-dropdown-menu__item {
-        color: var(--text-regular);
+        color: var(--text-regular) !important;
 
         &:hover,
-        &:focus {
-          background-color: var(--bg-hover);
-          color: var(--color-primary);
+        &:focus,
+        &.is-hovering {
+          background-color: var(--bg-hover) !important;
+          color: var(--color-primary) !important;
+        }
+
+        &.active {
+          color: var(--color-primary) !important;
         }
       }
     }
@@ -255,4 +285,16 @@ html.dark {
     background-color: var(--bg-container);
     border-color: var(--border-color);
   }
+
+  // Tooltip 深色模式
+  .el-popper.is-dark {
+    background-color: var(--bg-container) !important;
+    color: var(--text-primary) !important;
+    border: 1px solid var(--border-color) !important;
+
+    .el-popper__arrow::before {
+      background-color: var(--bg-container) !important;
+      border-color: var(--border-color) !important;
+    }
+  }
 }

src/components/LangDropdown.vue

@@ -7,12 +7,8 @@
     </span>
     <template #dropdown>
       <el-dropdown-menu>
-        <el-dropdown-item command="zh-cn" :class="{ active: appStore.language === 'zh-cn' }">
-          简体中文
-        </el-dropdown-item>
-        <el-dropdown-item command="en" :class="{ active: appStore.language === 'en' }">
-          English
-        </el-dropdown-item>
+        <el-dropdown-item command="zh-cn" :class="{ active: appStore.language === 'zh-cn' }">简体中文</el-dropdown-item>
+        <el-dropdown-item command="en" :class="{ active: appStore.language === 'en' }">English</el-dropdown-item>
       </el-dropdown-menu>
     </template>
   </el-dropdown>
@@ -49,7 +45,7 @@ function handleLanguage(lang: string) {
     transition: background-color 0.2s;
 
     &:hover {
-      background-color: var(--lang-hover-bg, #f5f7fa);
+      background-color: var(--lang-hover-bg, #faf5f6);
       color: var(--lang-hover-color, #409eff);
     }
   }

src/components/ThemeSettings.vue

@@ -25,6 +25,7 @@
         <div class="section-title">主题色</div>
         <div class="color-presets">
           <el-tooltip
+            effect="dark"
             v-for="(colors, key) in themeColorPresets"
             :key="key"
             :content="colors.name"

src/components/ThemeSwitch.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="theme-switch">
-    <el-tooltip :content="isDark ? '切换到浅色模式' : '切换到深色模式'" placement="bottom">
+    <el-tooltip effect="dark" :content="isDark ? '切换到浅色模式' : '切换到深色模式'" placement="bottom">
       <el-button class="switch-btn" circle text @click="themeStore.toggleDarkMode">
         <el-icon :size="18">
           <Moon v-if="isDark" />
@@ -9,7 +9,7 @@
       </el-button>
     </el-tooltip>
 
-    <el-tooltip content="主题设置" placement="bottom">
+    <el-tooltip effect="dark" content="主题设置" placement="bottom">
       <el-button class="switch-btn" circle text @click="emit('openSettings')">
         <el-icon :size="18"><Setting /></el-icon>
       </el-button>

src/views/demo/cloudflare-stream.vue

@@ -239,7 +239,7 @@ function onError(error: any) {
 <style lang="scss" scoped>
 .page-container {
   min-height: 100vh;
-  background-color: #f5f7fa;
+  background-color: var(--bg-page);
 }
 
 .page-header {
@@ -247,8 +247,9 @@ function onError(error: any) {
   align-items: center;
   margin-bottom: 20px;
   padding: 15px 20px;
-  background-color: #fff;
-  border-radius: 4px;
+  background-color: var(--bg-container);
+  border-radius: var(--radius-base);
+  color: var(--text-primary);
 
   .title {
     font-size: 18px;
@@ -259,14 +260,14 @@ function onError(error: any) {
 .config-section {
   margin-bottom: 20px;
   padding: 20px;
-  background-color: #fff;
-  border-radius: 4px;
+  background-color: var(--bg-container);
+  border-radius: var(--radius-base);
 }
 
 .player-section {
   height: 500px;
   margin-bottom: 20px;
-  border-radius: 4px;
+  border-radius: var(--radius-base);
   overflow: hidden;
   background-color: #000;
 
@@ -276,7 +277,7 @@ function onError(error: any) {
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    color: #999;
+    color: var(--text-secondary);
 
     p {
       margin-top: 15px;
@@ -287,22 +288,22 @@ function onError(error: any) {
 
 .control-section {
   padding: 15px 20px;
-  background-color: #fff;
-  border-radius: 4px;
+  background-color: var(--bg-container);
+  border-radius: var(--radius-base);
   margin-bottom: 20px;
 }
 
 .status-section {
   margin-bottom: 20px;
   padding: 15px 20px;
-  background-color: #fff;
-  border-radius: 4px;
+  background-color: var(--bg-container);
+  border-radius: var(--radius-base);
 }
 
 .log-section {
   padding: 15px 20px;
-  background-color: #fff;
-  border-radius: 4px;
+  background-color: var(--bg-container);
+  border-radius: var(--radius-base);
 
   .log-header {
     display: flex;
@@ -313,43 +314,45 @@ function onError(error: any) {
     h4 {
       font-size: 14px;
       margin: 0;
+      color: var(--text-primary);
     }
   }
 
   .log-content {
     max-height: 200px;
     overflow-y: auto;
-    background-color: #fafafa;
-    border-radius: 4px;
+    background-color: var(--bg-hover);
+    border-radius: var(--radius-sm);
     padding: 10px;
   }
 
   .log-item {
     font-size: 12px;
     padding: 4px 0;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid var(--border-color-light);
+    color: var(--text-regular);
 
     &:last-child {
       border-bottom: none;
     }
 
     .time {
-      color: #999;
+      color: var(--text-secondary);
       margin-right: 10px;
     }
 
     &.success .message {
-      color: #67c23a;
+      color: var(--color-success);
     }
 
     &.error .message {
-      color: #f56c6c;
+      color: var(--color-danger);
     }
   }
 
   .log-empty {
     text-align: center;
-    color: #999;
+    color: var(--text-secondary);
     font-size: 12px;
     padding: 20px 0;
   }

src/views/demo/direct-url.vue

@@ -185,7 +185,7 @@ function onError(error: any) {
 <style lang="scss" scoped>
 .page-container {
   min-height: 100vh;
-  background-color: #f5f7fa;
+  background-color: var(--bg-page);
 }
 
 .page-header {
@@ -193,8 +193,9 @@ function onError(error: any) {
   align-items: center;
   margin-bottom: 20px;
   padding: 15px 20px;
-  background-color: #fff;
-  border-radius: 4px;
+  background-color: var(--bg-container);
+  border-radius: var(--radius-base);
+  color: var(--text-primary);
 
   .title {
     font-size: 18px;
@@ -205,14 +206,14 @@ function onError(error: any) {
 .config-section {
   margin-bottom: 20px;
   padding: 20px;
-  background-color: #fff;
-  border-radius: 4px;
+  background-color: var(--bg-container);
+  border-radius: var(--radius-base);
 }
 
 .player-section {
   height: 500px;
   margin-bottom: 20px;
-  border-radius: 4px;
+  border-radius: var(--radius-base);
   overflow: hidden;
   background-color: #000;
 
@@ -222,7 +223,7 @@ function onError(error: any) {
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    color: #999;
+    color: var(--text-secondary);
 
     p {
       margin-top: 15px;
@@ -233,22 +234,22 @@ function onError(error: any) {
 
 .control-section {
   padding: 15px 20px;
-  background-color: #fff;
-  border-radius: 4px;
+  background-color: var(--bg-container);
+  border-radius: var(--radius-base);
   margin-bottom: 20px;
 }
 
 .status-section {
   margin-bottom: 20px;
   padding: 15px 20px;
-  background-color: #fff;
-  border-radius: 4px;
+  background-color: var(--bg-container);
+  border-radius: var(--radius-base);
 }
 
 .log-section {
   padding: 15px 20px;
-  background-color: #fff;
-  border-radius: 4px;
+  background-color: var(--bg-container);
+  border-radius: var(--radius-base);
 
   .log-header {
     display: flex;
@@ -259,43 +260,45 @@ function onError(error: any) {
     h4 {
       font-size: 14px;
       margin: 0;
+      color: var(--text-primary);
     }
   }
 
   .log-content {
     max-height: 200px;
     overflow-y: auto;
-    background-color: #fafafa;
-    border-radius: 4px;
+    background-color: var(--bg-hover);
+    border-radius: var(--radius-sm);
     padding: 10px;
   }
 
   .log-item {
     font-size: 12px;
     padding: 4px 0;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid var(--border-color-light);
+    color: var(--text-regular);
 
     &:last-child {
       border-bottom: none;
     }
 
     .time {
-      color: #999;
+      color: var(--text-secondary);
       margin-right: 10px;
     }
 
     &.success .message {
-      color: #67c23a;
+      color: var(--color-success);
     }
 
     &.error .message {
-      color: #f56c6c;
+      color: var(--color-danger);
     }
   }
 
   .log-empty {
     text-align: center;
-    color: #999;
+    color: var(--text-secondary);
     font-size: 12px;
     padding: 20px 0;
   }

src/views/demo/rtsp-stream.vue

@@ -188,7 +188,7 @@ function onError(error: any) {
 <style lang="scss" scoped>
 .page-container {
   min-height: 100vh;
-  background-color: #f5f7fa;
+  background-color: var(--bg-page);
 }
 
 .page-header {
@@ -196,8 +196,9 @@ function onError(error: any) {
   align-items: center;
   margin-bottom: 20px;
   padding: 15px 20px;
-  background-color: #fff;
-  border-radius: 4px;
+  background-color: var(--bg-container);
+  border-radius: var(--radius-base);
+  color: var(--text-primary);
 
   .title {
     font-size: 18px;
@@ -208,14 +209,14 @@ function onError(error: any) {
 .config-section {
   margin-bottom: 20px;
   padding: 20px;
-  background-color: #fff;
-  border-radius: 4px;
+  background-color: var(--bg-container);
+  border-radius: var(--radius-base);
 }
 
 .player-section {
   height: 500px;
   margin-bottom: 20px;
-  border-radius: 4px;
+  border-radius: var(--radius-base);
   overflow: hidden;
   background-color: #000;
 
@@ -225,7 +226,7 @@ function onError(error: any) {
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    color: #999;
+    color: var(--text-secondary);
 
     p {
       margin-top: 15px;
@@ -236,22 +237,22 @@ function onError(error: any) {
 
 .control-section {
   padding: 15px 20px;
-  background-color: #fff;
-  border-radius: 4px;
+  background-color: var(--bg-container);
+  border-radius: var(--radius-base);
   margin-bottom: 20px;
 }
 
 .status-section {
   margin-bottom: 20px;
   padding: 15px 20px;
-  background-color: #fff;
-  border-radius: 4px;
+  background-color: var(--bg-container);
+  border-radius: var(--radius-base);
 }
 
 .log-section {
   padding: 15px 20px;
-  background-color: #fff;
-  border-radius: 4px;
+  background-color: var(--bg-container);
+  border-radius: var(--radius-base);
 
   .log-header {
     display: flex;
@@ -262,43 +263,45 @@ function onError(error: any) {
     h4 {
       font-size: 14px;
       margin: 0;
+      color: var(--text-primary);
     }
   }
 
   .log-content {
     max-height: 200px;
     overflow-y: auto;
-    background-color: #fafafa;
-    border-radius: 4px;
+    background-color: var(--bg-hover);
+    border-radius: var(--radius-sm);
     padding: 10px;
   }
 
   .log-item {
     font-size: 12px;
     padding: 4px 0;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid var(--border-color-light);
+    color: var(--text-regular);
 
     &:last-child {
       border-bottom: none;
     }
 
     .time {
-      color: #999;
+      color: var(--text-secondary);
       margin-right: 10px;
     }
 
     &.success .message {
-      color: #67c23a;
+      color: var(--color-success);
     }
 
     &.error .message {
-      color: #f56c6c;
+      color: var(--color-danger);
     }
   }
 
   .log-empty {
     text-align: center;
-    color: #999;
+    color: var(--text-secondary);
     font-size: 12px;
     padding: 20px 0;
   }

src/views/demo/sample-videos.vue

@@ -217,7 +217,7 @@ function onError(error: any) {
 <style lang="scss" scoped>
 .page-container {
   min-height: 100vh;
-  background-color: #f5f7fa;
+  background-color: var(--bg-page);
 }
 
 .page-header {
@@ -225,8 +225,9 @@ function onError(error: any) {
   align-items: center;
   margin-bottom: 20px;
   padding: 15px 20px;
-  background-color: #fff;
-  border-radius: 4px;
+  background-color: var(--bg-container);
+  border-radius: var(--radius-base);
+  color: var(--text-primary);
 
   .title {
     font-size: 18px;
@@ -237,14 +238,14 @@ function onError(error: any) {
 .config-section {
   margin-bottom: 20px;
   padding: 20px;
-  background-color: #fff;
-  border-radius: 4px;
+  background-color: var(--bg-container);
+  border-radius: var(--radius-base);
 }
 
 .player-section {
   height: 500px;
   margin-bottom: 20px;
-  border-radius: 4px;
+  border-radius: var(--radius-base);
   overflow: hidden;
   background-color: #000;
 
@@ -254,7 +255,7 @@ function onError(error: any) {
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    color: #999;
+    color: var(--text-secondary);
 
     p {
       margin-top: 15px;
@@ -265,22 +266,22 @@ function onError(error: any) {
 
 .control-section {
   padding: 15px 20px;
-  background-color: #fff;
-  border-radius: 4px;
+  background-color: var(--bg-container);
+  border-radius: var(--radius-base);
   margin-bottom: 20px;
 }
 
 .status-section {
   margin-bottom: 20px;
   padding: 15px 20px;
-  background-color: #fff;
-  border-radius: 4px;
+  background-color: var(--bg-container);
+  border-radius: var(--radius-base);
 }
 
 .log-section {
   padding: 15px 20px;
-  background-color: #fff;
-  border-radius: 4px;
+  background-color: var(--bg-container);
+  border-radius: var(--radius-base);
 
   .log-header {
     display: flex;
@@ -291,43 +292,45 @@ function onError(error: any) {
     h4 {
       font-size: 14px;
       margin: 0;
+      color: var(--text-primary);
     }
   }
 
   .log-content {
     max-height: 200px;
     overflow-y: auto;
-    background-color: #fafafa;
-    border-radius: 4px;
+    background-color: var(--bg-hover);
+    border-radius: var(--radius-sm);
     padding: 10px;
   }
 
   .log-item {
     font-size: 12px;
     padding: 4px 0;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid var(--border-color-light);
+    color: var(--text-regular);
 
     &:last-child {
       border-bottom: none;
     }
 
     .time {
-      color: #999;
+      color: var(--text-secondary);
       margin-right: 10px;
     }
 
     &.success .message {
-      color: #67c23a;
+      color: var(--color-success);
     }
 
     &.error .message {
-      color: #f56c6c;
+      color: var(--color-danger);
     }
   }
 
   .log-empty {
     text-align: center;
-    color: #999;
+    color: var(--text-secondary);
     font-size: 12px;
     padding: 20px 0;
   }

src/views/machine/index.vue

@@ -12,7 +12,9 @@
       <el-table-column prop="machineId" label="机器ID" min-width="120" show-overflow-tooltip />
       <el-table-column prop="name" label="名称" min-width="120" show-overflow-tooltip>
         <template #default="{ row }">
-          <el-link type="primary" :data-id="`link-edit-${row.machineId}`" @click="handleEdit(row)">{{ row.name }}</el-link>
+          <el-link type="primary" :data-id="`link-edit-${row.machineId}`" @click="handleEdit(row)">
+            {{ row.name }}
+          </el-link>
         </template>
       </el-table-column>
       <el-table-column prop="location" label="位置" min-width="120" show-overflow-tooltip />
@@ -32,8 +34,19 @@
       <el-table-column prop="createdAt" label="创建时间" width="170" align="center" />
       <el-table-column label="操作" width="150" align="center" fixed="right">
         <template #default="{ row }">
-          <el-button type="primary" link :icon="Edit" :data-id="`btn-edit-${row.machineId}`" @click="handleEdit(row)">编辑</el-button>
-          <el-button type="danger" link :icon="Delete" :disabled="deleteLoading" :data-id="`btn-delete-${row.machineId}`" @click="handleDelete(row)">删除</el-button>
+          <el-button type="primary" link :icon="Edit" :data-id="`btn-edit-${row.machineId}`" @click="handleEdit(row)">
+            编辑
+          </el-button>
+          <el-button
+            type="danger"
+            link
+            :icon="Delete"
+            :disabled="deleteLoading"
+            :data-id="`btn-delete-${row.machineId}`"
+            @click="handleDelete(row)"
+          >
+            删除
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -51,7 +64,13 @@
           <el-input v-model="form.location" placeholder="请输入位置" data-id="input-location" />
         </el-form-item>
         <el-form-item label="描述" prop="description">
-          <el-input v-model="form.description" type="textarea" :rows="3" placeholder="请输入描述" data-id="input-description" />
+          <el-input
+            v-model="form.description"
+            type="textarea"
+            :rows="3"
+            placeholder="请输入描述"
+            data-id="input-description"
+          />
         </el-form-item>
         <el-form-item v-if="isEdit" label="启用状态">
           <el-switch v-model="form.enabled" data-id="switch-enabled" />

src/views/user/index.vue

@@ -334,12 +334,12 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .page-container {
-  padding: 20px;
+  padding: var(--content-padding);
 }
 
 .search-form {
-  background-color: #fff;
-  border-radius: 4px;
+  background-color: var(--bg-container);
+  border-radius: var(--radius-base);
 }
 
 .table-actions {