根据是否有中控功能，输出板功能来显示对应的界面

package.json

@@ -1,6 +1,6 @@
 {
   "name": "media_player_client",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "description": "A Quasar Framework app",
   "productName": "MediaPlayerClient",
   "author": "fangxiang <fangxiang@cloudview.work>",

src/components/AdvancedDebugDialog.vue

@@ -67,8 +67,8 @@
                 />
               </q-item-section>
             </q-item>
-            <q-separator />
-            <q-item>
+            <q-separator class="q-mt-md" />
+            <q-item class="q-mt-md">
               <q-item-section>
                 <q-btn @click="restartDevice"> {{ $t("restart") }} </q-btn>
               </q-item-section>

src/components/SystemSettingDialog.vue

@@ -66,6 +66,7 @@
             :disable="loading"
           />
           <q-tab
+            v-if="function_output_board_attribute"
             name="output_board"
             icon="save"
             :label="$t('output board setting')"
@@ -565,7 +566,11 @@
             </q-card>
           </q-tab-panel>
 
-          <q-tab-panel name="output_board" class="_panel">
+          <q-tab-panel
+            name="output_board"
+            class="_panel"
+            v-if="function_output_board_attribute"
+          >
             <q-card class="fit">
               <q-card-section>
                 <q-scroll-area style="height: 55vh">
@@ -906,6 +911,19 @@ export default defineComponent({
     let contrast = ref(0);
     let hue = ref(0);
 
+    const function_output_board_attribute = ref(
+      ($store.state.device_attribute & Protocol.EDeviceAttribute.OutputBoard) !=
+        0
+    );
+
+    watch(
+      () => $store.state.device_attribute,
+      (value) => {
+        function_output_board_attribute.value =
+          (value & Protocol.EDeviceAttribute.OutputBoard) != 0;
+      }
+    );
+
     let device_resolution = ref("");
     let device_resolution_options: Ref<string[]> = ref([]);
     let device_rotate = ref(0);
@@ -1341,6 +1359,7 @@ export default defineComponent({
 
     return {
       show_dialog,
+      function_output_board_attribute,
       loading,
       tab,
       auto_ip,

src/pad/TopToolbar.vue

@@ -68,6 +68,7 @@
       @click="lowerWindow"
     />
     <q-btn
+      v-if="function_center_control"
       class="col-auto"
       stretch
       stack
@@ -108,6 +109,17 @@
       v-if="plan_running"
       @click="stopPlan"
     />
+    <q-btn
+      v-if="false"
+      stretch
+      flat
+      stack
+      no-caps
+      icon="img:pad/toolbar/subtitle.png"
+      :label="$t('subtitle')"
+      class="col-auto"
+      @click="$refs.subtitle_dialog.showDialog()"
+    />
     <q-btn
       class="col-auto"
       stretch
@@ -181,6 +193,7 @@
   <background-image-dialog ref="background_image_dialog" />
   <file-manage-dialog ref="file_manage_dialog" />
   <center-control-dialog ref="center_control_dialog" />
+  <subtitle-dialog ref="subtitle_dialog" />
   <advanced-debug-dialog ref="advanced_debug_dialog" />
 </template>
 
@@ -191,10 +204,12 @@ import { useI18n } from "vue-i18n";
 import { useStore } from "src/store";
 import BackgroundImageDialog from "src/components/BackgroundImageDialog.vue";
 import FileManageDialog from "src/components/FileManageDialog.vue";
+import SubtitleDialog from "src/components/SubtitleDialog.vue";
 import CenterControlDialog from "src/components/CenterControlDialog.vue";
 import AdvancedDebugDialog from "src/components/AdvancedDebugDialog.vue";
 
 import GlobalData from "src/common/GlobalData";
+import { Protocol } from "src/entities/WSProtocol";
 
 export default defineComponent({
   name: "PadTopToolbarPage",
@@ -202,6 +217,7 @@ export default defineComponent({
     BackgroundImageDialog,
     FileManageDialog,
     CenterControlDialog,
+    SubtitleDialog,
     AdvancedDebugDialog,
   },
   setup() {
@@ -213,8 +229,23 @@ export default defineComponent({
       () => $store.state.current_running_plan.trim() != ""
     );
 
+    const function_center_control = ref(
+      ($store.state.device_attribute &
+        Protocol.EDeviceAttribute.CenterControl) !=
+        0
+    );
+
+    watch(
+      () => $store.state.device_attribute,
+      (value) => {
+        function_center_control.value =
+          (value & Protocol.EDeviceAttribute.CenterControl) != 0;
+      }
+    );
+
     return {
       plan_running,
+      function_center_control,
 
       toogleFullScreen() {
         if (!$q.fullscreen.isCapable) {