Преглед на файлове

refactor(views): streamline input components and enhance layout consistency in live-stream and lss views

- Consolidated attributes in input components for improved readability and consistency across `live-stream/index.vue` and `lss/index.vue`.
- Enhanced layout of table and pagination components for better user experience.
- Simplified drawer component structures to maintain visual consistency across the application.
yb преди 3 дни
родител
ревизия
200362ef90
променени са 2 файла, в които са добавени 30 реда и са изтрити 23 реда
  1. 16 15
      src/views/live-stream/index.vue
  2. 14 8
      src/views/lss/index.vue

+ 16 - 15
src/views/live-stream/index.vue

@@ -189,14 +189,12 @@
                 </el-select>
               </el-form-item>
               <el-form-item :label="t('命令模板') + ':'" prop="commandTemplate">
-                <div class="code-editor-wrapper">
-                  <CodeEditor
-                    v-model="form.commandTemplate"
-                    language="bash"
-                    height="400px"
-                    placeholder="#!/bin/bash&#10;# FFmpeg 命令模板,可使用 {RTSP_URL} 等变量"
-                  />
-                </div>
+                <CodeEditor
+                  v-model="form.commandTemplate"
+                  language="bash"
+                  height="400px"
+                  placeholder="#!/bin/bash&#10;# FFmpeg 命令模板,可使用 {RTSP_URL} 等变量"
+                />
               </el-form-item>
             </el-form>
           </div>
@@ -436,12 +434,14 @@
 
     <!-- 命令模板查看/编辑抽屉 -->
     <el-drawer v-model="commandDialogVisible" :title="t('命令模板')" direction="rtl" size="800px" destroy-on-close>
-      <CodeEditor
-        v-model="currentCommandTemplate"
-        language="bash"
-        height="450px"
-        placeholder="#!/bin/bash&#10;# FFmpeg 推流命令模板"
-      />
+      <div class="command-template-container">
+        <CodeEditor
+          v-model="currentCommandTemplate"
+          language="bash"
+          height="450px"
+          placeholder="#!/bin/bash&#10;# FFmpeg 推流命令模板"
+        />
+      </div>
       <template #footer>
         <div class="drawer-footer">
           <el-button @click="commandDialogVisible = false">{{ t('取消') }}</el-button>
@@ -1297,7 +1297,8 @@ onMounted(async () => {
   box-sizing: border-box;
 }
 
-.code-editor-wrapper {
+.command-template-container {
+  padding: 0 20px;
 }
 
 .search-form {

+ 14 - 8
src/views/lss/index.vue

@@ -607,14 +607,16 @@
       destroy-on-close
       class="params-drawer"
     >
-      <CodeEditor
-        v-model="paramsContent"
-        language="json"
-        height="500px"
-        :placeholder="
-          paramsDialogType === 'config' ? t('请输入参数配置(JSON 格式)') : t('请输入运行参数(JSON 格式)')
-        "
-      />
+      <div class="params-content-container">
+        <CodeEditor
+          v-model="paramsContent"
+          language="json"
+          height="500px"
+          :placeholder="
+            paramsDialogType === 'config' ? t('请输入参数配置(JSON 格式)') : t('请输入运行参数(JSON 格式)')
+          "
+        />
+      </div>
       <template #footer>
         <div class="drawer-footer">
           <el-button @click="paramsDialogVisible = false">{{ t('取消') }}</el-button>
@@ -1416,6 +1418,10 @@ onMounted(() => {
   padding: 0 20px;
 }
 
+.params-content-container {
+  padding: 0 20px;
+}
+
 .search-form {
   flex-shrink: 0;
   margin-bottom: 16px;