网络设置新增主机名修改

src/components/SystemSettingDialog.vue

@@ -171,7 +171,10 @@
                         />
                       </q-item-section>
                     </q-item>
-                    <q-item class="q-pa-none" v-if="auto_ip != $t('enable')">
+                    <q-item
+                      class="q-pa-none"
+                      v-if="false && auto_ip != $t('enable')"
+                    >
                       <q-item-section avatar class="width_5_1">{{
                         $t("dns server") + "1:"
                       }}</q-item-section>
@@ -191,7 +194,10 @@
                         />
                       </q-item-section>
                     </q-item>
-                    <q-item class="q-pa-none" v-if="auto_ip != $t('enable')">
+                    <q-item
+                      class="q-pa-none"
+                      v-if="false && auto_ip != $t('enable')"
+                    >
                       <q-item-section avatar class="width_5_1">{{
                         $t("dns server") + "2:"
                       }}</q-item-section>
@@ -1125,6 +1131,7 @@ export default defineComponent({
     let dns2 = ref();
     let mac_address = ref("11:22:33:44:55:66");
     let ip_address_list: AdvancedIpAddressEntity[] = [];
+    let host_name = "player";
 
     let brightness = ref(0);
     let contrast = ref(0);
@@ -1377,9 +1384,10 @@ export default defineComponent({
       request.gateway = gateway.value;
       request.net_mask = netmask.value;
       request.mac_address = mac_address.value;
-      request.dns1 = dns1.value;
+      request.dns1 = dns1.value ?? "";
-      request.dns2 = dns2.value;
+      request.dns2 = dns2.value ?? "";
-      request.ip_address_list = ip_address_list;
+      request.ip_address_list = ip_address_list ?? [];
+      request.host_name = host_name ?? "";
 
       let success = false;
       try {
@@ -1678,6 +1686,15 @@ export default defineComponent({
       showDialog() {
         show_dialog.value = true;
 
+        GlobalData.getInstance()
+          .getCurrentClient()
+          ?.getSystemNetworkInfo()
+          .then((response) => {
+            if (response) {
+              host_name = (response.host_name ?? "player").trim();
+            }
+          });
+
         refresh_all();
       },
       resetData() {
@@ -1793,8 +1810,10 @@ export default defineComponent({
             if (info) {
               gateway.value = info.gateway || "192.168.1.1";
               netmask.value = info.net_mask || "255.255.0.0";
-              dns1.value = info.dns1 || "";
+              dns1.value =
-              dns2.value = info.dns2 || "";
+                GlobalData.getInstance()?.applicationConfig?.dns1 || "";
+              dns2.value =
+                GlobalData.getInstance()?.applicationConfig?.dns2 || "";
               mac_address.value = info.mac_address || "5A:30:C2:5A:54:Bf";
               ip_address.value = info.ip_address || "192.168.1.168";
               flag = true;
@@ -1848,16 +1867,23 @@ export default defineComponent({
         );
       },
       async onAdvanceNetwork() {
-        const _ip_address_list =
+        const result =
           await system_setting_advanced_network_dialog.value.showDialogAsync(
             GlobalData.getInstance()?.applicationConfig?.ip_list
           );
-        if (Array.isArray(_ip_address_list)) {
+        if (result) {
-          ip_address_list = _ip_address_list;
+          if (Array.isArray(result.ip_address_list)) {
+            ip_address_list = result.ip_address_list;
           } else {
             ip_address_list =
               GlobalData.getInstance()?.applicationConfig?.ip_list || [];
           }
+          if (typeof result.host_name == "string") {
+            host_name = result.host_name.trim();
+          } else {
+            host_name = "player";
+          }
+        }
       },
     };
   },

src/components/SystenSettingAdvancedNetworkDialog.vue

@@ -33,17 +33,48 @@
           class="scroll q-pa-xs q-ma-none"
           style="width: 60vw; height: 65vh"
         >
-          <q-card class="fit">
+          <q-card-section class="q-pb-none">
-            <q-card-section class="q-pa-none fit">
+            <q-card>
+              <q-card-section>
+                <q-item class="q-pa-none">
+                  <q-item-section avatar class="header_label_2 text-left">{{
+                    $t("host name") + ":"
+                  }}</q-item-section>
+                  <q-item-section>
+                    <q-input
+                      v-model="host_name"
+                      maxlength="20"
+                      :rules="[
+                        (val) =>
+                          (val && val.length > 0) ||
+                          $t('Please type something'),
+                        (val) =>
+                          isEnglishOrNum(val) ||
+                          $t(
+                            'Host names can only be numbers and letters and _-'
+                          ),
+                      ]"
+                      lazy-rules
+                    />
+                  </q-item-section>
+                </q-item>
+              </q-card-section>
+            </q-card>
+          </q-card-section>
+          <q-card-section>
             <q-table
-                class="fit"
               ref="advance_ip_table"
+              class="advance-ip-table"
               :title="$t('ip address')"
               :rows="advance_ip_rows"
               :columns="advance_ip_columns"
               row-key="uuid"
               :hide-bottom="true"
-                :selection="'single'"
+              selection="single"
+              virtual-scroll
+              :virtual-scroll-item-size="48"
+              :virtual-scroll-sticky-size-start="48"
+              :rows-per-page-options="[0]"
               @row-click="
                 (evt, row, index) => {
                   if (advance_ip_table_selected.length) {
@@ -96,7 +127,6 @@
               </template>
             </q-table>
           </q-card-section>
-          </q-card>
         </q-card-section>
 
         <q-separator />
@@ -125,11 +155,32 @@
   width: 15%;
 }
 .header_label_2 {
-  width: 15%;
+  width: 20%;
   align-items: center;
 }
 </style>
 
+<style lang="sass">
+.advance-ip-table
+  /* height or max-height is important */
+  max-height: 46vh
+
+  .q-table__top,
+  .q-table__bottom,
+  thead tr:first-child th /* bg color is important for th; just specify one */
+    background-color: #fff
+
+  thead tr th
+    position: sticky
+    z-index: 1
+  /* this will be the loading indicator */
+  thead tr:last-child th
+    /* height of all previous header rows */
+    top: 48px
+  thead tr:first-child th
+    top: 0
+</style>
+
 <script lang="ts">
 import { defineComponent, ref, Ref, reactive } from "vue";
 import { useStore } from "src/store";
@@ -152,6 +203,7 @@ export default defineComponent({
     let show_dialog = ref(false);
 
     const advance_ip_table_selected: Ref<AdvancedIpAddressEntity[]> = ref([]);
+    const host_name = ref("player");
 
     const advance_ip_columns = [
       {
@@ -206,6 +258,7 @@ export default defineComponent({
       advance_ip_columns,
       advance_ip_rows,
       advance_ip_table_selected,
+      host_name,
       loga(a: any) {
         console.log(a);
       },
@@ -217,6 +270,15 @@ export default defineComponent({
         return new Promise((resolove) => {
           _resolove = resolove;
 
+          GlobalData.getInstance()
+            .getCurrentClient()
+            ?.getSystemNetworkInfo()
+            .then((response) => {
+              if (response) {
+                host_name.value = (response.host_name ?? "player").trim();
+              }
+            });
+
           if (Array.isArray(_data)) {
             for (const item of _data) {
               if (item) {
@@ -236,6 +298,7 @@ export default defineComponent({
         }
         advance_ip_rows.value = [];
         advance_ip_table_selected.value = [];
+        host_name.value = "player";
       },
 
       async onSubmit() {
@@ -244,7 +307,10 @@ export default defineComponent({
         try {
           if (_resolove) {
             try {
-              _resolove(advance_ip_rows.value);
+              _resolove({
+                ip_address_list: advance_ip_rows.value,
+                host_name: host_name.value,
+              });
             } catch {
               _resolove(null);
             }
@@ -300,6 +366,9 @@ export default defineComponent({
           }
         }
       },
+      isEnglishOrNum(str: string) {
+        return /^[0-9a-zA-Z_\-]+$/.test(str);
+      },
     };
   },
 });

src/entities/WSProtocol.ts

@@ -1692,6 +1692,7 @@ export namespace Protocol {
     dns2: string = "";
     mac_address: string = "04:D9:F5:D3:F4:C5";
     ip_address_list: AdvancedIpAddressEntity[] = [];
+    host_name: string = "";
 
     constructor(rcp_id?: number) {
       super();
@@ -2704,9 +2705,8 @@ export namespace Protocol {
     ip_address = "192.168.1.1";
     gateway = "192.168.1.1";
     net_mask = "192.168.1.1";
-    dns1 = "";
-    dns2 = "";
     mac_address = "AA:BB:CC:DD:EE:FF";
+    host_name = "player";
   }
 
   export class SetHdmiInDecodeTypeRequestEntity extends PacketEntity {

src/i18n/zh-CN/index.ts

@@ -592,4 +592,7 @@ export default {
   "already existed": "已经存在",
   "please input gateway": "请输入网关",
   "advanced network setting": "高级网络设置",
+  "host name": "主机名称",
+  "Host names can only be numbers and letters and _-":
+    "主机名只能由数字、字母和_-组成",
 };