Forráskód Böngészése

refactor(camera): enhance placeholder translations and improve form layout

- Updated input placeholders in the camera search form and dialog to use translation function for better localization.
- Adjusted the layout of the camera dialog form, including the addition of a scrollbar and improved spacing for a cleaner user interface.
- Ensured consistent use of translation for all form labels and options to enhance user experience.
yb 1 hete
szülő
commit
df41f4289f
1 módosított fájl, 92 hozzáadás és 79 törlés
  1. 92 79
      src/views/camera/index.vue

+ 92 - 79
src/views/camera/index.vue

@@ -6,7 +6,7 @@
         <el-form-item :label="t('摄像头ID')">
           <el-input
             v-model.trim="searchForm.cameraId"
-            placeholder="请输入摄像头ID"
+            :placeholder="t('请输入摄像头ID')"
             clearable
             data-id="search-camera-id"
             @keyup.enter="handleSearch"
@@ -15,15 +15,15 @@
         <el-form-item :label="t('名称')">
           <el-input
             v-model.trim="searchForm.name"
-            placeholder="请输入名称"
+            :placeholder="t('请输入名称')"
             clearable
             data-id="search-name"
             @keyup.enter="handleSearch"
           />
         </el-form-item>
         <el-form-item :label="t('所属机器')">
-          <el-select v-model="searchForm.machineId" placeholder="全部" clearable data-id="search-machine">
-            <el-option label="全部" value="" />
+          <el-select v-model="searchForm.machineId" :placeholder="t('全部')" clearable data-id="search-machine">
+            <el-option :label="t('全部')" value="" />
             <el-option
               v-for="machine in machineList"
               :key="machine.machineId"
@@ -33,26 +33,26 @@
           </el-select>
         </el-form-item>
         <el-form-item :label="t('状态')">
-          <el-select v-model="searchForm.status" placeholder="全部" clearable data-id="search-status">
-            <el-option label="全部" value="" />
-            <el-option label="在线" value="ONLINE" />
-            <el-option label="离线" value="OFFLINE" />
+          <el-select v-model="searchForm.status" :placeholder="t('全部')" clearable data-id="search-status">
+            <el-option :label="t('全部')" value="" />
+            <el-option :label="t('在线')" value="ONLINE" />
+            <el-option :label="t('离线')" value="OFFLINE" />
           </el-select>
         </el-form-item>
         <el-form-item :label="t('启用状态')">
-          <el-select v-model="searchForm.enabled" placeholder="全部" clearable data-id="search-enabled">
-            <el-option label="全部" value="" />
-            <el-option label="已启用" :value="true" />
-            <el-option label="已禁用" :value="false" />
+          <el-select v-model="searchForm.enabled" :placeholder="t('全部')" clearable data-id="search-enabled">
+            <el-option :label="t('全部')" value="" />
+            <el-option :label="t('已启用')" :value="true" />
+            <el-option :label="t('已禁用')" :value="false" />
           </el-select>
         </el-form-item>
         <el-form-item :label="t('创建时间')">
           <el-date-picker
             v-model="searchForm.dateRange"
             type="daterange"
-            range-separator="至"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
+            :range-separator="t('')"
+            :start-placeholder="t('开始日期')"
+            :end-placeholder="t('结束日期')"
             value-format="YYYY-MM-DD"
             data-id="search-date-range"
           />
@@ -189,76 +189,85 @@
 
     <!-- 新增/编辑弹窗 -->
     <el-dialog v-model="dialogVisible" :title="dialogTitle" width="650px" destroy-on-close data-id="dialog-camera">
-      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px" data-id="form-camera">
-        <el-form-item :label="t('摄像头ID')" prop="cameraId">
-          <el-input v-model="form.cameraId" placeholder="请输入摄像头ID" :disabled="isEdit" data-id="input-camera-id" />
-        </el-form-item>
-        <el-form-item :label="t('名称')" prop="name">
-          <el-input v-model="form.name" placeholder="请输入名称" data-id="input-name" />
-        </el-form-item>
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item :label="t('IP地址')" prop="ip">
-              <el-input v-model="form.ip" placeholder="请输入IP地址" data-id="input-ip" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item :label="t('端口')" prop="port">
-              <el-input-number v-model="form.port" :min="1" :max="65535" data-id="input-port" />
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item :label="t('用户名')" prop="username">
-              <el-input v-model="form.username" placeholder="请输入用户名" data-id="input-username" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item :label="t('密码')" prop="password">
+      <el-scrollbar>
+        <div class="form-container">
+          <el-form ref="formRef" :model="form" :rules="rules" label-width="auto" data-id="form-camera">
+            <el-form-item :label="t('摄像头ID')" prop="cameraId">
               <el-input
-                v-model="form.password"
-                type="password"
-                placeholder="请输入密码"
-                show-password
-                data-id="input-password"
+                v-model="form.cameraId"
+                placeholder="请输入摄像头ID"
+                :disabled="isEdit"
+                data-id="input-camera-id"
               />
             </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item :label="t('品牌')" prop="brand">
-              <el-select v-model="form.brand" placeholder="请选择" data-id="select-brand">
-                <el-option label="海康威视" value="hikvision" />
-                <el-option label="大华" value="dahua" />
-                <el-option label="其他" value="other" />
-              </el-select>
+            <el-form-item :label="t('名称')" prop="name">
+              <el-input v-model="form.name" placeholder="请输入名称" data-id="input-name" />
             </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item :label="t('能力')" prop="capability">
-              <el-select v-model="form.capability" placeholder="请选择" data-id="select-capability">
-                <el-option label="仅切换" value="switch_only" />
-                <el-option label="支持PTZ" value="ptz_enabled" />
+            <el-row>
+              <el-col :span="12">
+                <el-form-item :label="t('IP地址')" prop="ip">
+                  <el-input v-model="form.ip" placeholder="请输入IP地址" data-id="input-ip" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item :label="t('端口')" prop="port">
+                  <el-input v-model="form.port" data-id="input-port" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item :label="t('用户名')" prop="username">
+                  <el-input v-model="form.username" placeholder="请输入用户名" data-id="input-username" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item :label="t('密码')" prop="password">
+                  <el-input
+                    v-model="form.password"
+                    type="password"
+                    placeholder="请输入密码"
+                    show-password
+                    data-id="input-password"
+                  />
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item :label="t('品牌')" prop="brand">
+                  <el-select v-model="form.brand" placeholder="请选择" data-id="select-brand">
+                    <el-option label="海康威视" value="hikvision" />
+                    <el-option label="大华" value="dahua" />
+                    <el-option label="其他" value="other" />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item :label="t('能力')" prop="capability">
+                  <el-select v-model="form.capability" placeholder="请选择" data-id="select-capability">
+                    <el-option label="仅切换" value="switch_only" />
+                    <el-option label="支持PTZ" value="ptz_enabled" />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-form-item :label="t('所属机器')" prop="machineId">
+              <el-select v-model="form.machineId" placeholder="请选择机器" clearable data-id="select-machine">
+                <el-option
+                  v-for="machine in machineList"
+                  :key="machine.machineId"
+                  :label="machine.name"
+                  :value="machine.machineId"
+                />
               </el-select>
             </el-form-item>
-          </el-col>
-        </el-row>
-        <el-form-item :label="t('所属机器')" prop="machineId">
-          <el-select v-model="form.machineId" placeholder="请选择机器" clearable data-id="select-machine">
-            <el-option
-              v-for="machine in machineList"
-              :key="machine.machineId"
-              :label="machine.name"
-              :value="machine.machineId"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item v-if="isEdit" :label="t('启用状态')">
-          <el-switch v-model="form.enabled" data-id="switch-enabled" />
-        </el-form-item>
-      </el-form>
+            <el-form-item v-if="isEdit" :label="t('启用状态')">
+              <el-switch v-model="form.enabled" data-id="switch-enabled" />
+            </el-form-item>
+          </el-form>
+        </div>
+      </el-scrollbar>
       <template #footer>
         <el-button data-id="btn-cancel" @click="dialogVisible = false">{{ t('取消') }}</el-button>
         <el-button type="primary" :loading="submitLoading" data-id="btn-submit" @click="handleSubmit">
@@ -669,6 +678,10 @@ onMounted(() => {
   overflow: hidden;
 }
 
+.form-container {
+  padding-top: 18px;
+}
+
 .search-form {
   flex-shrink: 0;
   margin-bottom: 16px;