diff --git a/src/components/ModeTree.vue b/src/components/ModeTree.vue
index 0706188..80baad8 100644
--- a/src/components/ModeTree.vue
+++ b/src/components/ModeTree.vue
@@ -1,115 +1,120 @@
 <template>
   <div>
-    <q-tree ref="tree" :nodes="tree_nodes" node-key="uuid" labelKey="name">
-      <template v-slot:default-header="prop">
-        <q-item
-          class="full-width"
-          clickable
-          @dblclick="
-            (evt) => !prop.node.is_group && callMode(prop.node.item_data)
-          "
-        >
-          <q-item-section avatar>
-            <q-icon
-              :name="
-                prop.node.is_group
-                  ? 'img:source_icon/group.png'
-                  : 'img:source_icon/hdmi.png'
-              "
-              color="orange"
-              size="28px"
-              class="q-mr-sm"
-            />
-          </q-item-section>
-          <q-item-section>
-            <div class="text-weight-bold text-primary">
-              <span v-if="prop.node.item_data"
-                >({{ prop.node.item_data?.number }})
-              </span>
-              &nbsp;&nbsp;{{ prop.node.name }}
-            </div>
-          </q-item-section>
-          <q-popup-proxy context-menu>
-            <q-popup-proxy context-menu />
-            <q-list>
-              <q-item
-                v-if="
-                  prop.node.name == $t('root') ||
-                  (prop.node.is_group && prop.node.item_data)
+    <q-scroll-area
+      :style="{ height: content_height + 'px' }"
+      style="width: 20vw"
+    >
+      <q-tree ref="tree" :nodes="tree_nodes" node-key="uuid" labelKey="name">
+        <template v-slot:default-header="prop">
+          <q-item
+            class="full-width"
+            clickable
+            @dblclick="
+              (evt) => !prop.node.is_group && callMode(prop.node.item_data)
+            "
+          >
+            <q-item-section avatar>
+              <q-icon
+                :name="
+                  prop.node.is_group
+                    ? 'img:source_icon/group.png'
+                    : 'img:source_icon/hdmi.png'
                 "
-                clickable
-                v-close-popup
-                v-ripple
-                @click="
-                  $refs.mode_dialog.showDialog({
-                    type: 1,
-                    data: { uuid: prop.node.uuid },
-                  })
-                "
-              >
-                <q-item-section avatar><q-icon name="add" /></q-item-section>
-                <q-item-section>{{ $t("add mode item") }}</q-item-section>
-              </q-item>
-              <q-item
-                clickable
-                v-close-popup
-                v-if="
-                  prop.node.name == $t('root') ||
-                  (prop.node.is_group && prop.node.item_data)
-                "
-                v-ripple
-                @click="
-                  () =>
-                    $refs.group_dialog.showDialog({
+                color="orange"
+                size="28px"
+                class="q-mr-sm"
+              />
+            </q-item-section>
+            <q-item-section>
+              <div class="text-weight-bold text-primary">
+                <span v-if="prop.node.item_data"
+                  >({{ prop.node.item_data?.number }})
+                </span>
+                &nbsp;&nbsp;{{ prop.node.name }}
+              </div>
+            </q-item-section>
+            <q-popup-proxy context-menu>
+              <q-popup-proxy context-menu />
+              <q-list>
+                <q-item
+                  v-if="
+                    prop.node.name == $t('root') ||
+                    (prop.node.is_group && prop.node.item_data)
+                  "
+                  clickable
+                  v-close-popup
+                  v-ripple
+                  @click="
+                    $refs.mode_dialog.showDialog({
                       type: 1,
-                      data: prop.node,
+                      data: { uuid: prop.node.uuid },
                     })
-                "
-              >
-                <q-item-section avatar
-                  ><q-icon name="create_new_folder"
-                /></q-item-section>
-                <q-item-section>{{ $t("add group") }}</q-item-section>
-              </q-item>
-              <q-item
-                clickable
-                v-ripple
-                v-close-popup
-                v-if="prop.node.item_data"
-                @click="
-                  () =>
-                    (prop.node.is_group
-                      ? $refs.group_dialog
-                      : $refs.mode_dialog
-                    ).showDialog({
-                      type: 2,
-                      data: prop.node,
-                    })
-                "
-              >
-                <q-item-section avatar><q-icon name="edit" /></q-item-section>
-                <q-item-section>{{ $t("edit") }}</q-item-section>
-              </q-item>
+                  "
+                >
+                  <q-item-section avatar><q-icon name="add" /></q-item-section>
+                  <q-item-section>{{ $t("add mode item") }}</q-item-section>
+                </q-item>
+                <q-item
+                  clickable
+                  v-close-popup
+                  v-if="
+                    prop.node.name == $t('root') ||
+                    (prop.node.is_group && prop.node.item_data)
+                  "
+                  v-ripple
+                  @click="
+                    () =>
+                      $refs.group_dialog.showDialog({
+                        type: 1,
+                        data: prop.node,
+                      })
+                  "
+                >
+                  <q-item-section avatar
+                    ><q-icon name="create_new_folder"
+                  /></q-item-section>
+                  <q-item-section>{{ $t("add group") }}</q-item-section>
+                </q-item>
+                <q-item
+                  clickable
+                  v-ripple
+                  v-close-popup
+                  v-if="prop.node.item_data"
+                  @click="
+                    () =>
+                      (prop.node.is_group
+                        ? $refs.group_dialog
+                        : $refs.mode_dialog
+                      ).showDialog({
+                        type: 2,
+                        data: prop.node,
+                      })
+                  "
+                >
+                  <q-item-section avatar><q-icon name="edit" /></q-item-section>
+                  <q-item-section>{{ $t("edit") }}</q-item-section>
+                </q-item>
 
-              <q-item
-                clickable
-                v-ripple
-                v-close-popup
-                v-if="prop.node.item_data"
-                @click="
-                  (evt) => deleteItem(evt, prop.node.is_group, prop.node.uuid)
-                "
-              >
-                <q-item-section avatar
-                  ><q-icon color="red" name="delete"
-                /></q-item-section>
-                <q-item-section>{{ $t("delete") }} &nbsp;</q-item-section>
-              </q-item>
-            </q-list>
-          </q-popup-proxy>
-        </q-item>
-      </template>
-    </q-tree>
+                <q-item
+                  clickable
+                  v-ripple
+                  v-close-popup
+                  v-if="prop.node.item_data"
+                  @click="
+                    (evt) => deleteItem(evt, prop.node.is_group, prop.node.uuid)
+                  "
+                >
+                  <q-item-section avatar
+                    ><q-icon color="red" name="delete"
+                  /></q-item-section>
+                  <q-item-section>{{ $t("delete") }} &nbsp;</q-item-section>
+                </q-item>
+              </q-list>
+            </q-popup-proxy>
+          </q-item>
+        </template>
+      </q-tree>
+    </q-scroll-area>
   </div>
   <mode-group-dialog ref="group_dialog" />
   <mode-dialog ref="mode_dialog" />
@@ -125,6 +130,7 @@ import GlobalData from "src/common/GlobalData";
 import { useQuasar } from "quasar";
 import { useI18n } from "vue-i18n";
 import { ModeEntity } from "src/entities/ModeEntity";
+import EventBus, { EventNamesDefine } from "src/common/EventBus";
 
 export default defineComponent({
   name: "PageModeTree",
@@ -141,6 +147,17 @@ export default defineComponent({
       set: (val) => {},
     });
 
+    const content_height = ref(0);
+
+    const refresh_content_height = () => {
+      content_height.value = window.innerHeight - 135;
+    };
+    refresh_content_height();
+
+    EventBus.getInstance().on(EventNamesDefine.WindowResize, () => {
+      refresh_content_height();
+    });
+
     const tree: any | null = ref(null);
 
     onMounted(async () => {
@@ -153,6 +170,7 @@ export default defineComponent({
     return {
       tree,
       tree_nodes,
+      content_height,
       loga(a: any) {
         console.log(a);
       },
diff --git a/src/components/PlanTree.vue b/src/components/PlanTree.vue
index 81333c4..f997c56 100644
--- a/src/components/PlanTree.vue
+++ b/src/components/PlanTree.vue
@@ -1,144 +1,155 @@
 <template>
   <div>
-    <q-tree ref="tree" :nodes="tree_nodes" node-key="uuid" labelKey="name">
-      <template v-slot:default-header="prop">
-        <q-item
-          class="full-width"
-          clickable
-          @dblclick="
-            (evt) => !prop.node.is_group && runPlan(prop.node.item_data)
-          "
-        >
-          <q-item-section avatar>
-            <q-icon
-              :name="
-                prop.node.is_group
-                  ? 'img:source_icon/group.png'
-                  : 'img:source_icon/hdmi.png'
-              "
-              color="orange"
-              size="28px"
-              class="q-mr-sm"
-            />
-          </q-item-section>
-          <q-item-section>
-            <div class="text-weight-bold text-primary">
-              {{ prop.node.name }}
-            </div>
-          </q-item-section>
-          <q-popup-proxy context-menu>
-            <q-popup-proxy context-menu />
-            <q-list>
-              <q-item
-                v-if="
-                  prop.node.name == $t('root') ||
-                  (prop.node.is_group && prop.node.item_data)
+    <q-scroll-area
+      :style="{ height: content_height + 'px' }"
+      style="width: 20vw"
+    >
+      <q-tree ref="tree" :nodes="tree_nodes" node-key="uuid" labelKey="name">
+        <template v-slot:default-header="prop">
+          <q-item
+            class="full-width"
+            clickable
+            @dblclick="
+              (evt) => !prop.node.is_group && runPlan(prop.node.item_data)
+            "
+          >
+            <q-item-section avatar>
+              <q-icon
+                :name="
+                  prop.node.is_group
+                    ? 'img:source_icon/group.png'
+                    : 'img:source_icon/hdmi.png'
                 "
-                clickable
-                v-close-popup
-                v-ripple
-                @click="
-                  $refs.plan_dialog.showDialog({
-                    type: 1,
-                    data: { uuid: prop.node.uuid },
-                  })
-                "
-              >
-                <q-item-section avatar><q-icon name="add" /></q-item-section>
-                <q-item-section>{{ $t("add plan item") }}</q-item-section>
-              </q-item>
-              <q-item
-                clickable
-                v-close-popup
-                v-if="
-                  prop.node.name == $t('root') ||
-                  (prop.node.is_group && prop.node.item_data)
-                "
-                v-ripple
-                @click="
-                  () =>
-                    $refs.group_dialog.showDialog({
+                color="orange"
+                size="28px"
+                class="q-mr-sm"
+              />
+            </q-item-section>
+            <q-item-section>
+              <div class="text-weight-bold text-primary">
+                {{ prop.node.name }}
+              </div>
+            </q-item-section>
+            <q-popup-proxy context-menu>
+              <q-popup-proxy context-menu />
+              <q-list>
+                <q-item
+                  v-if="
+                    prop.node.name == $t('root') ||
+                    (prop.node.is_group && prop.node.item_data)
+                  "
+                  clickable
+                  v-close-popup
+                  v-ripple
+                  @click="
+                    $refs.plan_dialog.showDialog({
                       type: 1,
-                      data: prop.node,
+                      data: { uuid: prop.node.uuid },
                     })
-                "
-              >
-                <q-item-section avatar
-                  ><q-icon name="create_new_folder"
-                /></q-item-section>
-                <q-item-section>{{ $t("add group") }}</q-item-section>
-              </q-item>
-              <q-item
-                clickable
-                v-ripple
-                v-close-popup
-                v-if="
-                  prop.node.item_data &&
-                  power_on_plan != prop.node.item_data.uuid
-                "
-                @click="(evt) => setPowerOnPlan(evt, prop.node.item_data.uuid)"
-              >
-                <q-item-section avatar><q-icon name="timer" /></q-item-section>
-                <q-item-section>{{ $t("set power on start") }}</q-item-section>
-              </q-item>
-              <q-item
-                clickable
-                v-ripple
-                v-close-popup
-                v-if="
-                  prop.node.item_data &&
-                  power_on_plan == prop.node.item_data.uuid
-                "
-                @click="
-                  (evt) => unsetPowerOnPlan(evt, prop.node.item_data.uuid)
-                "
-              >
-                <q-item-section avatar
-                  ><q-icon name="timer_off"
-                /></q-item-section>
-                <q-item-section>{{
-                  $t("unset power on start")
-                }}</q-item-section>
-              </q-item>
-              <q-item
-                clickable
-                v-ripple
-                v-close-popup
-                v-if="prop.node.item_data"
-                @click="
-                  () =>
-                    (prop.node.is_group
-                      ? $refs.group_dialog
-                      : $refs.plan_dialog
-                    ).showDialog({
-                      type: 2,
-                      data: prop.node,
-                    })
-                "
-              >
-                <q-item-section avatar><q-icon name="edit" /></q-item-section>
-                <q-item-section>{{ $t("edit") }}</q-item-section>
-              </q-item>
+                  "
+                >
+                  <q-item-section avatar><q-icon name="add" /></q-item-section>
+                  <q-item-section>{{ $t("add plan item") }}</q-item-section>
+                </q-item>
+                <q-item
+                  clickable
+                  v-close-popup
+                  v-if="
+                    prop.node.name == $t('root') ||
+                    (prop.node.is_group && prop.node.item_data)
+                  "
+                  v-ripple
+                  @click="
+                    () =>
+                      $refs.group_dialog.showDialog({
+                        type: 1,
+                        data: prop.node,
+                      })
+                  "
+                >
+                  <q-item-section avatar
+                    ><q-icon name="create_new_folder"
+                  /></q-item-section>
+                  <q-item-section>{{ $t("add group") }}</q-item-section>
+                </q-item>
+                <q-item
+                  clickable
+                  v-ripple
+                  v-close-popup
+                  v-if="
+                    prop.node.item_data &&
+                    power_on_plan != prop.node.item_data.uuid
+                  "
+                  @click="
+                    (evt) => setPowerOnPlan(evt, prop.node.item_data.uuid)
+                  "
+                >
+                  <q-item-section avatar
+                    ><q-icon name="timer"
+                  /></q-item-section>
+                  <q-item-section>{{
+                    $t("set power on start")
+                  }}</q-item-section>
+                </q-item>
+                <q-item
+                  clickable
+                  v-ripple
+                  v-close-popup
+                  v-if="
+                    prop.node.item_data &&
+                    power_on_plan == prop.node.item_data.uuid
+                  "
+                  @click="
+                    (evt) => unsetPowerOnPlan(evt, prop.node.item_data.uuid)
+                  "
+                >
+                  <q-item-section avatar
+                    ><q-icon name="timer_off"
+                  /></q-item-section>
+                  <q-item-section>{{
+                    $t("unset power on start")
+                  }}</q-item-section>
+                </q-item>
+                <q-item
+                  clickable
+                  v-ripple
+                  v-close-popup
+                  v-if="prop.node.item_data"
+                  @click="
+                    () =>
+                      (prop.node.is_group
+                        ? $refs.group_dialog
+                        : $refs.plan_dialog
+                      ).showDialog({
+                        type: 2,
+                        data: prop.node,
+                      })
+                  "
+                >
+                  <q-item-section avatar><q-icon name="edit" /></q-item-section>
+                  <q-item-section>{{ $t("edit") }}</q-item-section>
+                </q-item>
 
-              <q-item
-                clickable
-                v-ripple
-                v-close-popup
-                v-if="prop.node.item_data"
-                @click="
-                  (evt) => deleteItem(evt, prop.node.is_group, prop.node.uuid)
-                "
-              >
-                <q-item-section avatar
-                  ><q-icon color="red" name="delete"
-                /></q-item-section>
-                <q-item-section>{{ $t("delete") }} &nbsp;</q-item-section>
-              </q-item>
-            </q-list>
-          </q-popup-proxy>
-        </q-item>
-      </template>
-    </q-tree>
+                <q-item
+                  clickable
+                  v-ripple
+                  v-close-popup
+                  v-if="prop.node.item_data"
+                  @click="
+                    (evt) => deleteItem(evt, prop.node.is_group, prop.node.uuid)
+                  "
+                >
+                  <q-item-section avatar
+                    ><q-icon color="red" name="delete"
+                  /></q-item-section>
+                  <q-item-section>{{ $t("delete") }} &nbsp;</q-item-section>
+                </q-item>
+              </q-list>
+            </q-popup-proxy>
+          </q-item>
+        </template>
+      </q-tree>
+    </q-scroll-area>
   </div>
   <plan-group-dialog ref="group_dialog" />
   <plan-dialog ref="plan_dialog" />
@@ -178,6 +189,17 @@ export default defineComponent({
       set: (val) => {},
     });
 
+    const content_height = ref(0);
+
+    const refresh_content_height = () => {
+      content_height.value = window.innerHeight - 135;
+    };
+    refresh_content_height();
+
+    EventBus.getInstance().on(EventNamesDefine.WindowResize, () => {
+      refresh_content_height();
+    });
+
     const tree: any | null = ref(null);
 
     onMounted(async () => {
@@ -190,6 +212,7 @@ export default defineComponent({
     return {
       tree,
       tree_nodes,
+      content_height,
       power_on_plan,
       loga(a: any) {
         console.log(a);
diff --git a/src/components/SignalSourceDialog.vue b/src/components/SignalSourceDialog.vue
index bd5490c..333f42c 100644
--- a/src/components/SignalSourceDialog.vue
+++ b/src/components/SignalSourceDialog.vue
@@ -146,8 +146,9 @@
                   :hint="
                     $t('please input') +
                     media_url_label.substr(0, media_url_label.length - 2) +
-                    ',' +
-                    $t('dbclick select file')
+                    (media_url_label.startsWith($t('file path'))
+                      ? ',' + $t('dbclick select file')
+                      : '')
                   "
                   lazy-rules
                   :rules="[
@@ -186,10 +187,6 @@
                   :label="$t('user name')"
                   :hint="$t('please input user name')"
                   lazy-rules
-                  :rules="[
-                    (val) =>
-                      (val && val.length > 0) || $t('Please type something'),
-                  ]"
                   @keydown="
                     (evt) => {
                       if (evt.keyCode == 13) {
@@ -219,10 +216,6 @@
                   :label="$t('password')"
                   :hint="$t('please input password')"
                   lazy-rules
-                  :rules="[
-                    (val) =>
-                      (val && val.length > 0) || $t('Please type something'),
-                  ]"
                   @keydown="
                     (evt) => {
                       if (evt.keyCode == 13) {
@@ -470,6 +463,9 @@ export default defineComponent({
         loading.value = false;
       },
       async doSelectFile() {
+        if (!media_url_label.value.startsWith($t.t("file path"))) {
+          return;
+        }
         const obj = await file_manage_dialog.value.showDialogAsync("select");
         if (obj) {
           interface __I {
diff --git a/src/components/SignalSourceTree.vue b/src/components/SignalSourceTree.vue
index 5e2ae53..8b76f05 100644
--- a/src/components/SignalSourceTree.vue
+++ b/src/components/SignalSourceTree.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-scroll-area style="height: 60vw; width: 20vw">
+  <q-scroll-area :style="{ height: content_height + 'px' }" style="width: 20vw">
     <q-tree ref="tree" :nodes="tree_nodes" node-key="uuid" labelKey="name">
       <template v-slot:default-header="prop">
         <q-item
@@ -145,6 +145,17 @@ export default defineComponent({
     const $q = useQuasar();
     const $t = useI18n();
 
+    const content_height = ref(0);
+
+    const refresh_content_height = () => {
+      content_height.value = window.innerHeight - 135;
+    };
+    refresh_content_height();
+
+    EventBus.getInstance().on(EventNamesDefine.WindowResize, () => {
+      refresh_content_height();
+    });
+
     const tree_nodes = computed({
       get: () => $store.state.signal_source_tree,
       set: (val) => $store.commit("setSignalSourceTree", val),
@@ -162,6 +173,7 @@ export default defineComponent({
     return {
       tree,
       tree_nodes,
+      content_height,
       loga(a: any) {
         console.log(a);
       },
diff --git a/src/components/SystemSettingDialog.vue b/src/components/SystemSettingDialog.vue
index 92a96a1..33908e7 100644
--- a/src/components/SystemSettingDialog.vue
+++ b/src/components/SystemSettingDialog.vue
@@ -1003,12 +1003,12 @@ export default defineComponent({
     const applyGraphics = async () => {
       loading.value = true;
       const request = new Protocol.SetSystemGraphicsRequestEntity();
-      request.brightness = brightness.value;
-      request.contrast = contrast.value;
-      request.hue = hue.value;
+      request.brightness = parseInt(brightness.value.toString());
+      request.contrast = parseInt(contrast.value.toString());
+      request.hue = parseInt(hue.value.toString());
       request.output_board_resolution = output_board_resolution.value;
       request.device_resolution = device_resolution.value;
-      request.rotate = device_rotate.value;
+      request.rotate = parseInt(device_rotate.value.toString());
 
       let success = false;
       try {
@@ -1074,7 +1074,7 @@ export default defineComponent({
       request.system_muted = system_muted.value == $t.t("on");
       request.output_audio_card = output_audio_card.value;
       request.use_ntp = use_ntp.value == $t.t("enable");
-      request.ntp_sync_delay = ntp_sync_delay.value;
+      request.ntp_sync_delay = parseInt(ntp_sync_delay.value.toString());
       request.ntp_server = ntp_server.value;
       request.time_zone = time_zone_options.value.findIndex(
         (element) => element && element == time_zone.value
@@ -1138,13 +1138,17 @@ export default defineComponent({
     const applyOutputBoard = async () => {
       loading.value = true;
       const request = new Protocol.SetOutputBoardSettingRequestEntity();
-      request.wall_col = output_board_wall_col.value;
-      request.wall_row = output_board_wall_row.value;
+      request.wall_col = parseInt(output_board_wall_col.value.toString());
+      request.wall_row = parseInt(output_board_wall_row.value.toString());
       request.splicing = output_board_splicing.value == $t.t("on");
-      request.vertical_blanking = output_board_vertical_blanking.value;
-      request.horizon_blanking = output_board_horizon_blanking.value;
-      request.rotate = output_board_rotate.value;
-      request.volume = output_board_volume.value;
+      request.vertical_blanking = parseInt(
+        output_board_vertical_blanking.value.toString()
+      );
+      request.horizon_blanking = parseInt(
+        output_board_horizon_blanking.value.toString()
+      );
+      request.rotate = parseInt(output_board_rotate.value.toString());
+      request.volume = parseInt(output_board_volume.value.toString());
       request.mute = output_board_mute.value == $t.t("on");
 
       let success = false;
diff --git a/src/pages/LeftToolBar.vue b/src/pages/LeftToolBar.vue
index a857706..43ebbc2 100644
--- a/src/pages/LeftToolBar.vue
+++ b/src/pages/LeftToolBar.vue
@@ -8,7 +8,7 @@
       indicator-color="primary"
       align="justify"
       narrow-indicator
-      style="color:red"
+      style="color: red"
     >
       <q-tab name="signal_source" :label="$t('signal source')" />
       <q-tab name="" icon="" disable />