Kaynağa Gözat

refactor(layout, views): enhance component structure and readability

- Improved the sidebar structure in `index.vue` by consolidating class bindings and reducing unnecessary line breaks for better readability.
- Streamlined input and table components in `lss/index.vue` for consistency and clarity, enhancing the overall user interface.
- Updated button layouts and styles to ensure proper alignment and spacing, improving visual aesthetics across the application.
yb 3 gün önce
ebeveyn
işleme
461f2bae83
2 değiştirilmiş dosya ile 81 ekleme ve 16 silme
  1. 74 15
      src/layout/index.vue
  2. 7 1
      src/views/lss/index.vue

+ 74 - 15
src/layout/index.vue

@@ -104,18 +104,32 @@
       <!-- Header -->
       <header class="layout__header">
         <!-- Mobile menu button -->
-        <button class="layout__menu-btn" @click="toggleSidebar">
-          <svg class="layout__icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
-          </svg>
-        </button>
-
-        <!-- Page Title / Breadcrumb -->
-        <div class="layout__breadcrumb">
-          <span v-for="(item, index) in breadcrumbs" :key="item.path" class="layout__breadcrumb-item">
-            <span v-if="index > 0" class="layout__breadcrumb-separator">/</span>
-            {{ t(item.meta?.title as string) }}
-          </span>
+        <div class="layout__header-left">
+          <!-- Mobile: Hamburger menu -->
+          <button class="layout__menu-btn layout__menu-btn--mobile" @click="toggleSidebar">
+            <svg class="layout__icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+            </svg>
+          </button>
+
+          <!-- Desktop: Compact chevron toggle -->
+          <button link class="layout__menu-btn layout__menu-btn--desktop" @click="toggleSidebar">
+            <Icon
+              icon="rivet-icons:chevron-left"
+              width="20"
+              height="20"
+              class="layout__menu-icon"
+              :class="{ 'layout__menu-icon--collapsed': !sidebarOpened }"
+            />
+          </button>
+
+          <!-- Page Title / Breadcrumb -->
+          <div class="layout__breadcrumb">
+            <span v-for="(item, index) in breadcrumbs" :key="item.path" class="layout__breadcrumb-item">
+              <span v-if="index > 0" class="layout__breadcrumb-separator">/</span>
+              {{ t(item.meta?.title as string) }}
+            </span>
+          </div>
         </div>
 
         <!-- Header Right -->
@@ -658,7 +672,7 @@ onUnmounted(() => {
     border-bottom: 1px solid #e5e7eb;
 
     @media (min-width: 1024px) {
-      padding: 0 2rem;
+      padding: 0 2rem 0 0;
     }
   }
 
@@ -669,13 +683,58 @@ onUnmounted(() => {
     border: none;
     color: #6b7280;
     cursor: pointer;
-    transition: color 150ms ease-in-out;
+    transition: all 150ms ease-in-out;
 
     &:hover {
-      color: #000000;
+      // color: #000000;
+    }
+
+    // Mobile: show hamburger, hide chevron
+    &--mobile {
+      display: block;
+
+      @media (min-width: 1024px) {
+        display: none;
+      }
+    }
+
+    // Desktop: show chevron, hide hamburger
+    &--desktop {
+      display: none;
+      height: 56px;
+      padding: 0;
+      margin-left: 0;
+      margin-right: 0;
+      background: #409eff;
+      color: #ffffff;
+
+      @media (min-width: 1024px) {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      &:hover {
+        background: #66b1ff;
+      }
+    }
+  }
+
+  // Menu icon rotation
+  &__menu-icon {
+    transition: transform 150ms ease-in-out;
+
+    &--collapsed {
+      transform: rotate(180deg);
     }
   }
 
+  &__header-left {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+
   &__breadcrumb {
     display: none;
     font-size: 1rem;

+ 7 - 1
src/views/lss/index.vue

@@ -911,7 +911,9 @@ const cameraForm = reactive({
   remark: '',
   enabled: true,
   paramConfig: '',
-  runtimeParams: ''
+  runtimeParams: '',
+  createdAt: '',
+  updatedAt: ''
 })
 
 // 摄像头表单验证规则(动态)
@@ -1157,6 +1159,8 @@ function resetCameraForm() {
   cameraForm.enabled = true
   cameraForm.paramConfig = ''
   cameraForm.runtimeParams = ''
+  cameraForm.createdAt = ''
+  cameraForm.updatedAt = ''
   cameraFormRef.value?.clearValidate()
 }
 
@@ -1220,6 +1224,8 @@ async function handleEditCamera(row: CameraInfoDTO) {
     cameraForm.model = camera.model || ''
     cameraForm.channelNo = camera.channelNo || ''
     cameraForm.remark = camera.remark || ''
+    cameraForm.createdAt = camera.createdAt || ''
+    cameraForm.updatedAt = camera.updatedAt || ''
     cameraForm.enabled = camera.enabled
     cameraForm.paramConfig = camera.paramConfig || ''
     cameraForm.runtimeParams = camera.runtimeParams || ''