refactor(live-stream): further optimize input and table component structure

- Continued to streamline the layout of input fields and table components in the live stream view for enhanced readability.
- Consolidated multiple lines of code into single lines where applicable, improving visual clarity and consistency.
- Ensured existing functionality remains intact while enhancing the overall user experience.

src/views/live-stream/index.vue

@@ -397,113 +397,69 @@
                     <span class="collapse-title">{{ t('PTZ') }}</span>
                   </template>
                   <div class="ptz-grid">
-                    <div
-                      class="ptz-btn"
-                      @mousedown="handlePTZ('UP_LEFT')"
-                      @mouseup="handlePTZStop"
-                      @mouseleave="handlePTZStop"
-                    >
-                      <el-icon>
-                        <TopLeft />
+                    <div class="ptz-btn" @mousedown="handlePTZ('UP_LEFT')">
+                      <el-icon size="24">
+                        <Icon icon="mdi:arrow-top-left" width="24" height="24" />
                       </el-icon>
                     </div>
-                    <div
-                      class="ptz-btn"
-                      @mousedown="handlePTZ('UP')"
-                      @mouseup="handlePTZStop"
-                      @mouseleave="handlePTZStop"
-                    >
-                      <el-icon>
-                        <Top />
+                    <div class="ptz-btn" @mousedown="handlePTZ('UP')">
+                      <el-icon size="24">
+                        <Icon icon="mdi:arrow-top" width="24" height="24" />
                       </el-icon>
                     </div>
-                    <div
-                      class="ptz-btn"
-                      @mousedown="handlePTZ('UP_RIGHT')"
-                      @mouseup="handlePTZStop"
-                      @mouseleave="handlePTZStop"
-                    >
-                      <el-icon>
-                        <TopRight />
+                    <div class="ptz-btn" @mousedown="handlePTZ('UP_RIGHT')">
+                      <el-icon size="24">
+                        <Icon icon="mdi:arrow-top-right" width="24" height="24" />
                       </el-icon>
                     </div>
-                    <div
-                      class="ptz-btn"
-                      @mousedown="handlePTZ('LEFT')"
-                      @mouseup="handlePTZStop"
-                      @mouseleave="handlePTZStop"
-                    >
-                      <el-icon>
-                        <Back />
+                    <div class="ptz-btn" @mousedown="handlePTZ('LEFT')">
+                      <el-icon size="24">
+                        <Icon icon="mdi:arrow-left" width="24" height="24" />
                       </el-icon>
                     </div>
                     <div class="ptz-btn ptz-center" @click="handlePTZStop">
-                      <el-icon>
-                        <Refresh />
+                      <el-icon size="24">
+                        <Icon icon="mdi:stop" width="24" height="24" />
                       </el-icon>
                     </div>
-                    <div
-                      class="ptz-btn"
-                      @mousedown="handlePTZ('RIGHT')"
-                      @mouseup="handlePTZStop"
-                      @mouseleave="handlePTZStop"
-                    >
-                      <el-icon>
-                        <Right />
+                    <div class="ptz-btn" @mousedown="handlePTZ('RIGHT')">
+                      <el-icon size="24">
+                        <Icon icon="mdi:arrow-right" width="24" height="24" />
                       </el-icon>
                     </div>
-                    <div
-                      class="ptz-btn"
-                      @mousedown="handlePTZ('DOWN_LEFT')"
-                      @mouseup="handlePTZStop"
-                      @mouseleave="handlePTZStop"
-                    >
-                      <el-icon>
-                        <BottomLeft />
+                    <div class="ptz-btn" @mousedown="handlePTZ('DOWN_LEFT')">
+                      <el-icon size="24">
+                        <Icon icon="mdi:arrow-left" width="24" height="24" />
                       </el-icon>
                     </div>
-                    <div
-                      class="ptz-btn"
-                      @mousedown="handlePTZ('DOWN')"
-                      @mouseup="handlePTZStop"
-                      @mouseleave="handlePTZStop"
-                    >
-                      <el-icon>
-                        <Bottom />
+                    <div class="ptz-btn" @mousedown="handlePTZ('DOWN')">
+                      <el-icon size="24">
+                        <Icon icon="mdi:arrow-down" width="24" height="24" />
                       </el-icon>
                     </div>
-                    <div
-                      class="ptz-btn"
-                      @mousedown="handlePTZ('DOWN_RIGHT')"
-                      @mouseup="handlePTZStop"
-                      @mouseleave="handlePTZStop"
-                    >
-                      <el-icon>
-                        <BottomRight />
+                    <div class="ptz-btn" @mousedown="handlePTZ('DOWN_RIGHT')">
+                      <el-icon size="24">
+                        <Icon icon="mdi:arrow-down-right" width="24" height="24" />
                       </el-icon>
                     </div>
                   </div>
 
                   <!-- 缩放按钮 -->
                   <div class="zoom-buttons">
-                    <el-button
-                      size="small"
-                      @mousedown="handleZoomIn"
-                      @mouseup="handlePTZStop"
-                      @mouseleave="handlePTZStop"
-                    >
-                      <el-icon>
-                        <ZoomIn />
+                    <el-button size="small" @mousedown="handleZoomIn">
+                      <el-icon size="20">
+                        <Icon icon="mdi:zoom-in-outline" width="20" height="20" />
                       </el-icon>
                     </el-button>
-                    <el-button
-                      size="small"
-                      @mousedown="handleZoomOut"
-                      @mouseup="handlePTZStop"
-                      @mouseleave="handlePTZStop"
-                    >
-                      <el-icon>
-                        <ZoomOut />
+                    <el-button size="small" @mousedown="handleZoomOut">
+                      <el-icon size="20">
+                        <Icon icon="mdi:zoom-out-outline" width="20" height="20" />
+                      </el-icon>
+                    </el-button>
+
+                    <el-button type="primary" size="small" @click="handlePTZStop">
+                      <el-icon size="20">
+                        <Icon icon="mdi:stop" width="20" height="20" />
                       </el-icon>
                     </el-button>
                   </div>
@@ -541,18 +497,18 @@
                       <span v-else class="preset-name" @dblclick="startEditPresetName(preset)">{{ preset.name }}</span>
                       <div class="preset-actions">
                         <el-tooltip :content="t('跳转')" placement="top">
-                          <el-icon class="action-icon" @click="handleGotoLocalPreset(preset)">
-                            <Position />
+                          <el-icon class="action-icon" size="20" @click="handleGotoLocalPreset(preset)">
+                            <Icon icon="mdi:arrow-up-left-bold" width="20" height="20" />
                           </el-icon>
                         </el-tooltip>
                         <el-tooltip :content="t('设置')" placement="top">
-                          <el-icon class="action-icon" @click="handleUpdateLocalPreset(preset)">
-                            <Setting />
+                          <el-icon class="action-icon" size="20" @click="handleUpdateLocalPreset(preset)">
+                            <Icon icon="mdi:gear" width="20" height="20" />
                           </el-icon>
                         </el-tooltip>
                         <el-tooltip :content="t('删除')" placement="top">
-                          <el-icon class="action-icon delete" @click="handleDeleteLocalPreset(preset)">
-                            <Close />
+                          <el-icon class="action-icon delete" size="20" @click="handleDeleteLocalPreset(preset)">
+                            <Icon icon="mdi:delete-forever" width="20" height="20" />
                           </el-icon>
                         </el-tooltip>
                       </div>