组件封装

2025-09-22 17:45:53 +08:00
parent fb974f1100
commit 614e5ad34e
42 changed files with 4200 additions and 552 deletions
--- a/src/components/MesStatus/index.vue
+++ b/src/components/MesStatus/index.vue
@@ -0,0 +1,109 @@
+<template>
+  <!-- Status Item -->
+  <div class="status-item status-button" @click="show">
+    <i-lucide-database class="status-icon" />
+    <span class="status-label">MES 登录状态:</span>
+    <span class="status-value success">{{ mesStatus }}</span>
+  </div>
+
+  <a-modal v-model:open="dialogVisible" :title="modalTitle" :footer="null">
+    <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>
+  </a-modal>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useDialog } from '@/utils/useDialog';
+
+// useDialog管理弹窗状态
+const { visible: dialogVisible, show, hide } = useDialog();
+
+// Modal配置数据
+const mesStatus = ref('已登录');
+const modalTitle = ref('MES 登录状态');
+const modalItems = ref([
+  { label: 'MES 服务器', value: '192.168.1.100:8080'},
+  { label: '登录状态', value: mesStatus.value},
+  { label: '用户名', value: 'admin'},
+  { label: '连接时间', value: '2024-01-15 09:30:25'},
+  { label: '最后活动', value: '2024-01-15 14:25:30'}
+]);
+
+// 暴露方法
+defineExpose({
+  show,
+  hide
+});
+</script>
+
+<style scoped lang="scss">
+@import '@/assets/styles/_variables.scss';
+
+.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;
+}
+</style>