refactor(layout): streamline sidebar and live stream components for improved readability

- Simplified the structure of the sidebar and live stream components by reducing unnecessary line breaks and consolidating attributes.
- Enhanced the layout of the sidebar and drawer components for better visual consistency and user experience.
- Updated the menu items to ensure proper rendering and accessibility across different screen sizes.

src/layout/index.vue

@@ -216,9 +216,9 @@ interface MenuItem {
 const menuItems: MenuItem[] = [
   { path: '/', title: '仪表盘', icon: 'mdi:view-dashboard' },
   { path: '/lss', title: 'LSS 管理', icon: 'mdi:power-plug' },
+  { path: '/live-stream', title: 'LiveStream 管理', icon: 'mdi:broadcast' },
   { path: '/camera', title: '摄像头管理', icon: 'mdi:video' },
   { path: '/machine', title: '机器管理', icon: 'mdi:monitor' },
-  { path: '/live-stream', title: 'LiveStream 管理', icon: 'mdi:broadcast' },
   { path: '/cc', title: 'Cloudflare Stream', icon: 'mdi:cloud' },
   { path: '/webrtc', title: 'WebRTC 流', icon: 'mdi:wifi' },
   { path: '/monitor', title: '多视频监控', icon: 'mdi:video' },

src/views/live-stream/index.vue

@@ -114,15 +114,23 @@
     <!-- 新增/编辑抽屉 -->
     <el-drawer
       v-model="drawerVisible"
-      :title="drawerTitle"
       direction="rtl"
       size="500px"
+      :with-header="false"
       destroy-on-close
       class="stream-drawer"
     >
       <div class="drawer-content">
+        <div class="drawer-header">{{ drawerTitle }}</div>
         <div class="drawer-body">
-          <el-form ref="formRef" :model="form" :rules="rules" label-width="80px" label-position="left">
+          <el-form
+            ref="formRef"
+            :model="form"
+            :rules="rules"
+            label-width="80px"
+            label-position="left"
+            class="stream-form"
+          >
             <el-form-item label="name:" prop="name">
               <el-input v-model="form.name" placeholder="live-stream name" style="width: 200px" />
             </el-form-item>
@@ -142,7 +150,7 @@
               </el-select>
             </el-form-item>
             <el-form-item label="命令模板:" prop="commandTemplate">
-              <div class="command-textarea-wrapper">
+              <div class="textarea-wrapper">
                 <el-input
                   v-model="form.commandTemplate"
                   type="textarea"
@@ -150,7 +158,6 @@
                   placeholder="请输入运行参数内容"
                   maxlength="1000"
                   show-word-limit
-                  class="command-textarea"
                 />
               </div>
             </el-form-item>
@@ -830,12 +837,6 @@ onMounted(() => {
 
 // 抽屉样式
 .stream-drawer {
-  :deep(.el-drawer__header) {
-    margin-bottom: 0;
-    padding: 16px 20px;
-    border-bottom: 1px solid #e5e7eb;
-  }
-
   :deep(.el-drawer__body) {
     padding: 0;
     display: flex;
@@ -850,11 +851,22 @@ onMounted(() => {
   height: 100%;
 }
 
+.drawer-header {
+  flex-shrink: 0;
+  padding: 16px 20px;
+  font-size: 16px;
+  font-weight: 500;
+  color: #303133;
+  border-bottom: 1px solid #e5e7eb;
+}
+
 .drawer-body {
   flex: 1;
   overflow-y: auto;
   padding: 20px;
+}
 
+.stream-form {
   :deep(.el-form-item) {
     margin-bottom: 18px;
   }
@@ -863,19 +875,25 @@ onMounted(() => {
     color: #606266;
     font-size: 14px;
   }
-}
 
-.command-textarea-wrapper {
-  width: 100%;
+  .form-value {
+    line-height: 32px;
+    color: #303133;
+    font-size: 14px;
+  }
+
+  .textarea-wrapper {
+    width: 100%;
 
-  :deep(.el-textarea__inner) {
-    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
-    font-size: 13px;
-    background-color: #fafafa;
-    border: 1px solid #dcdfe6;
+    :deep(.el-textarea__inner) {
+      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
+      font-size: 13px;
+      background-color: #fafafa;
+      border: 1px solid #dcdfe6;
 
-    &:focus {
-      border-color: #409eff;
+      &:focus {
+        border-color: #409eff;
+      }
     }
   }
 }