Merge pull request #66 from aice030/fix/55

Fix/55(View&Controller): 优化了页面布局和点击功能

Author: LiusCraft

client/src/components/AlarmChangeCard.vue

@@ -1,23 +1,18 @@
 <template>
-  <el-card class="alarm-change-card" shadow="hover">
+  <el-card class="alarm-change-card" shadow="hover" :class="{ 'expandable': item.details }" @click="handleCardClick">
     <div class="card-content">
       <div class="card-header">
         <div class="alarm-info">
           <div class="service-name">{{ item.service }}</div>
           <div class="change-description">{{ item.change }}</div>
           <div class="timestamp">{{ item.timestamp }}</div>
         </div>
-        <el-button
-          type="text"
-          size="small"
-          @click="toggleExpanded"
-          class="expand-btn"
-        >
+        <div v-if="item.details" class="expand-indicator">
           <el-icon>
             <ArrowUp v-if="isExpanded" />
             <ArrowDown v-else />
           </el-icon>
-        </el-button>
+        </div>
       </div>
 
       <!-- 详细信息 -->
@@ -45,6 +40,12 @@ const isExpanded = ref(false)
 const toggleExpanded = () => {
   isExpanded.value = !isExpanded.value
 }
+
+const handleCardClick = () => {
+  if (props.item.details) {
+    toggleExpanded()
+  }
+}
 </script>
 
 <style scoped>
@@ -83,14 +84,24 @@ const toggleExpanded = () => {
   color: #6b7280;
 }
 
-.expand-btn {
+.expand-indicator {
   width: 32px;
   height: 32px;
-  padding: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-left: 16px;
+  color: #6b7280;
+}
+
+.expandable {
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.expandable:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 
 .details-section {

client/src/components/BatchDetail.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="batch-detail">
+  <div class="batch-detail" :class="{ 'expandable': batch.moduleRecords }" @click="handleBatchClick">
     <div class="batch-header">
       <div class="batch-info">
         <div class="batch-name">{{ batch.name }}</div>
@@ -11,18 +11,12 @@
           {{ batch.status }}
         </el-tag>
       </div>
-      <el-button
-        v-if="batch.moduleRecords"
-        type="text"
-        size="small"
-        @click="toggleModuleExpanded"
-        class="expand-btn"
-      >
+      <div v-if="batch.moduleRecords" class="expand-indicator">
         <el-icon>
           <ArrowUp v-if="isModuleExpanded" />
           <ArrowDown v-else />
         </el-icon>
-      </el-button>
+      </div>
     </div>
 
     <div class="batch-details">
@@ -69,6 +63,13 @@ const toggleModuleExpanded = () => {
   isModuleExpanded.value = !isModuleExpanded.value
 }
 
+const handleBatchClick = (event: Event) => {
+  if (props.batch.moduleRecords) {
+    event.stopPropagation() // 阻止事件冒泡到父级
+    toggleModuleExpanded()
+  }
+}
+
 const getBatchStatusType = (status: string) => {
   switch (status) {
     case '异常':
@@ -113,13 +114,23 @@ const getBatchStatusType = (status: string) => {
   font-size: 12px;
 }
 
-.expand-btn {
+.expand-indicator {
   width: 24px;
   height: 24px;
-  padding: 0;
   display: flex;
   align-items: center;
   justify-content: center;
+  color: #6b7280;
+}
+
+.expandable {
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.expandable:hover {
+  background: #f1f5f9;
+  border-color: #cbd5e1;
 }
 
 .batch-details {

client/src/components/ChangeCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-card class="change-card" shadow="hover">
+  <el-card class="change-card" shadow="hover" :class="{ 'expandable': item.batches }" @click="handleCardClick">
     <template #header>
       <div class="card-header">
         <div class="card-title">
@@ -11,18 +11,12 @@
             <span v-else-if="item.state === '已完成'">发布完成，{{ item.ok ? '正常' : '异常' }}</span>
           </span>
         </div>
-        <el-button
-          v-if="item.batches"
-          type="text"
-          size="small"
-          @click="toggleExpanded"
-          class="expand-btn"
-        >
+        <div v-if="item.batches" class="expand-indicator">
           <el-icon>
             <ArrowUp v-if="isExpanded" />
             <ArrowDown v-else />
           </el-icon>
-        </el-button>
+        </div>
       </div>
     </template>
 
@@ -61,6 +55,12 @@ const toggleExpanded = () => {
   isExpanded.value = !isExpanded.value
 }
 
+const handleCardClick = () => {
+  if (props.item.batches) {
+    toggleExpanded()
+  }
+}
+
 const getStatusDotClass = (state: string) => {
   switch (state) {
     case '已完成':
@@ -124,13 +124,23 @@ const getProgressColor = (state: string) => {
   margin-left: 8px;
 }
 
-.expand-btn {
+.expand-indicator {
   width: 32px;
   height: 32px;
-  padding: 0;
   display: flex;
   align-items: center;
   justify-content: center;
+  color: #6b7280;
+}
+
+.expandable {
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.expandable:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 
 .card-content {

client/src/views/ChangeLogView.vue

@@ -295,12 +295,14 @@ onMounted(() => {
 .title {
   font-size: 24px;
   font-weight: 600;
+  color: #2c3e50;
 }
 
 .page-title {
   font-size: 32px;
   font-weight: 600;
   margin-bottom: 16px;
+  color: #2c3e50;
 }
 
 .tabs {

client/src/views/HomeView.vue

@@ -1452,13 +1452,16 @@ const disposeMetricsCharts = () => {
 .title {
   font-size: 24px;
   font-weight: 600;
+  color: #2c3e50;
 }
 
 .subtitle {
   text-align: center;
   font-size: 18px;
   font-weight: 500;
+  margin-top: -30px;
   margin-bottom: 12px;
+  color: #2c3e50;
 }
 
 .topology-card {
@@ -1554,7 +1557,7 @@ const disposeMetricsCharts = () => {
 
 .legend {
   position: absolute;
-  bottom: 12px;
+  bottom: 60px;
   right: 12px;
   background: rgba(255, 255, 255, 0.95);
   backdrop-filter: blur(8px);