完善类型配置，新增L1, L4数据展示界面

src/components/CameraStatus/index.vue

@@ -41,7 +41,7 @@ defineExpose({
 </script>
 
 <style scoped lang="scss">
-@import '@/assets/styles/_variables.scss';
+@use "@/assets/styles/variables" as *;
 
 .status-item {
   display: flex;

src/components/LmsStatus/index.vue

@@ -0,0 +1,161 @@
+<template>
+  <!-- Status Item -->
+  <div class="status-item status-button" @click="show">
+    <i-lucide-zap class="status-icon" />
+    <span class="status-label">LMS 状态:</span>
+    <span class="status-value" :class="onlineStatusClass">{{ lmsStatus }}</span>
+  </div>
+
+  <a-modal v-model:open="dialogVisible" :title="modalTitle" :footer="null">
+    <a-row :gutter="[0, 12]">
+      <a-col :span="8" class="modal-label">LMS 状态</a-col>
+      <a-col :span="16" class="modal-value">
+        <a-switch v-model:checked="isOnline" checked-children="在线" un-checked-children="离线" @change="handleToggleOnline" />
+      </a-col>
+    </a-row>
+    <a-row :gutter="[0, 12]">
+      <template v-for="(item, index) in modalItems" :key="index">
+        <a-col :span="8" class="modal-label">{{ item.label }}</a-col>
+        <a-col :span="16" class="modal-value">{{ item.value }}</a-col>
+      </template>
+    </a-row>
+    <div class="actions">
+      <a-button size="large" @click="redirectTo('L1')">L1 数据</a-button>
+      <a-button size="large" @click="redirectTo('L4')">L4 数据</a-button>
+    </div>
+  </a-modal>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue';
+import { useRouter } from 'vue-router';
+import { useDialog } from '@/utils/useDialog';
+import { fetchLmsWorkMode, updateLmsWorkMode } from '@/api/lms';
+import { message } from 'ant-design-vue';
+
+// useDialog管理弹窗状态
+const { visible: dialogVisible, show, hide } = useDialog();
+
+const isOnline = ref(false);
+const lmsStatus = computed(() => isOnline.value ? '在线' : '离线');
+
+const onlineStatusClass = computed(() => {
+  return isOnline.value ? 'success' : 'error';
+});
+
+// 当请求发送成功后才切换状态
+async function handleToggleOnline(checked: boolean | string | number) {
+  await updateLmsWorkMode(checked ? 1 : 0).then(() => {
+    isOnline.value = Boolean(checked);
+    message.success('切换成功');
+  }).catch((error) => {
+    message.error('切换失败');
+  });
+}
+
+const modalTitle = ref('LMS 状态');
+const modalItems = ref<{ label: string; value: string }[]>([]);
+
+// 初始化 LMS 状态
+async function initLmsStatus() {
+  try {
+    const { msg } = await fetchLmsWorkMode();
+    isOnline.value = msg === "1";
+  } catch (error) {
+    console.error('获取 LMS 工作模式失败:', error);
+  }
+}
+
+
+const router = useRouter();
+function redirectTo(type: string) {
+  router.push(`/${type}-data`);
+}
+
+// 初始化 LMS 状态
+onMounted(initLmsStatus);
+
+// 暴露方法
+defineExpose({
+  show,
+  hide
+});
+</script>
+
+<style scoped lang="scss">
+@use "@/assets/styles/variables" as *;
+
+.status-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+  
+  &.status-button {
+    cursor: pointer;
+    
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+  }
+  
+  .status-icon {
+    width: 16px;
+    height: 16px;
+    color: #8395B6;
+    
+    &.success {
+      color: $success-color;
+    }
+    
+    &.error {
+      color: $error-color;
+    }
+    
+    &.warning {
+      color: $warning-color;
+    }
+  }
+  
+  .status-label {
+    font-size: 13px;
+    color: #8395B6;
+    white-space: nowrap;
+  }
+  
+  .status-value {
+    font-size: 13px;
+    font-weight: 500;
+    
+    &.success {
+      color: $success-color;
+    }
+    
+    &.error {
+      color: $error-color;
+    }
+    
+    &.warning {
+      color: $warning-color;
+    }
+  }
+}
+
+.modal-label {
+  font-size: $text-size;
+  font-weight: bold;
+}
+
+.actions {
+  margin: 20px 0 10px;
+  display: flex;
+  gap: 10px;
+  justify-content: space-between;
+
+  .ant-btn {
+    flex: 1;
+  }
+}
+</style>

src/components/MesStatus/index.vue

@@ -42,7 +42,7 @@ defineExpose({
 </script>
 
 <style scoped lang="scss">
-@import '@/assets/styles/_variables.scss';
+@use "@/assets/styles/variables" as *;
 
 .status-item {
   display: flex;

src/components/NetworkStatus/index.vue

@@ -54,7 +54,7 @@ defineExpose({
 </script>
 
 <style scoped lang="scss">
-@import '@/assets/styles/_variables.scss';
+@use "@/assets/styles/variables" as *;
 
 .status-item {
   display: flex;

src/components/PlcStatus/index.vue

@@ -42,7 +42,7 @@ defineExpose({
 </script>
 
 <style scoped lang="scss">
-@import '@/assets/styles/_variables.scss';
+@use "@/assets/styles/variables" as *;
 
 .status-item {
   display: flex;

src/components/SettingsModal/index.vue

@@ -45,7 +45,7 @@ defineExpose({
 </script>
 
 <style scoped lang="scss">
-@import '@/assets/styles/_variables.scss';
+@use "@/assets/styles/variables" as *;
 
 .modal-label {
   font-size: $text-size;

src/components/SseStatus/index.vue

@@ -27,10 +27,6 @@
         <i-lucide-trash-2 />
         清空日志
       </a-button>
-      <a-button @click="test" class="clear-btn">
-        <i-lucide-trash-2 />
-        测试
-      </a-button>
     </div>
 
     <div class="sse-logs" ref="logContainer">      
@@ -81,16 +77,14 @@ let cooldownTimer: number | null = null;
 
 // 内部日志管理
 const logContainer = ref();
-function test() {
-  addSseLog('测试日志');
-}
+
 // 使用SSE工具函数
 const {
   clientId,
   serverUrl,
   isConnected,
   isConnecting,
-  sseStatusText,
+  sseStatus,
   sseStatusClass,
   logs,
   connect,
@@ -127,12 +121,11 @@ const {
   }
 });
 
-const sseStatus = ref(sseStatusText.value);
 const modalTitle = ref('SSE 连接状态');
 const modalItems = ref([
-  { label: '当前状态', value: sseStatus.value },
+  { label: '当前状态', value: sseStatus },
   { label: '客户端ID', value: clientId || 'hmi-main-client' },
-  { label: '服务器地址', value: serverUrl.value }
+  { label: '服务器地址', value: serverUrl }
 ]);
 
 // 启动连接冷却时间
@@ -175,13 +168,15 @@ const handleClearSseLogs = () => {
 
 // 监听日志变化，自动滚动
 watch(() => logs.value.length, () => {
-  const { scrollTop = 0, scrollHeight = 0, clientHeight = 0 } = logContainer.value;
-  const isUserAtBottom = scrollTop + clientHeight >= scrollHeight - 10;
-  nextTick(() => {
-    if (logContainer.value && isUserAtBottom) {
-      logContainer.value.scrollTop = logContainer.value.scrollHeight;
-    }
-  });
+  if (logContainer.value) {
+    const { scrollTop = 0, scrollHeight = 0, clientHeight = 0 } = logContainer.value;
+    const isUserAtBottom = scrollTop + clientHeight >= scrollHeight - 10;
+    nextTick(() => {
+      if (logContainer.value && isUserAtBottom) {
+        logContainer.value.scrollTop = logContainer.value.scrollHeight;
+      }
+    });
+  }
 });
 
 // 暴露方法和数据
@@ -207,7 +202,7 @@ onBeforeUnmount(() => {
 </script>
 
 <style scoped lang="scss">
-@import '@/assets/styles/_variables.scss';
+@use "@/assets/styles/variables" as *;
 
 .status-item {
   display: flex;