时钟设置对话框增加新增字段

package.json

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

src/components/AboutDialog.vue

@@ -51,13 +51,21 @@
               >{{ $t("server version") }}: {{ server_version }}</q-item-section
             >
           </q-item>
-          <q-item v-if="click_count > target_click_count">
+          <q-item
+            v-if="
+              click_count > target_click_count || $store.state.advanced_debug
+            "
+          >
             <q-item-section
               >{{ $t("server commit hash") }}:
               {{ server_commit_hash }}</q-item-section
             >
           </q-item>
-          <div v-if="click_count > target_click_count">
+          <div
+            v-if="
+              click_count > target_click_count || $store.state.advanced_debug
+            "
+          >
             <q-item>
               <q-item-section
                 >{{ $t("server branch name") }}:
@@ -83,16 +91,6 @@
               >
             </q-item>
           </div>
-          <q-item
-            v-if="
-              click_count > target_click_count * 2 &&
-              click_count < target_click_count * 2 + 2
-            "
-          >
-            <q-item-section
-              ><q-btn :label="$t('restart')" @click="restart_device" />
-            </q-item-section>
-          </q-item>
         </q-list>
       </q-card-section>
     </q-card>
@@ -130,12 +128,6 @@ export default defineComponent({
     let kernel_version = ref("unknow");
     let rootfs_version = ref("unknow");
 
-    const restart_device = () => {
-      GlobalData.getInstance()
-        .getCurrentClient()
-        ?.restartDevice(1000 * 5);
-    };
-
     return {
       show_dialog,
       click_count,
@@ -148,7 +140,6 @@ export default defineComponent({
       kernel_version,
       rootfs_version,
 
-      restart_device,
       async showDialog() {
         click_count.value = 0;
         show_dialog.value = true;

src/components/ClockSignalSourceDialog.vue

@@ -38,10 +38,7 @@
 
         <q-separator />
 
-        <q-card-section
+        <q-card-section style="max-height: 68vh; width: 55vw" class="scroll">
-          style="max-height: 50vh; width: 55vw; height: 50vh"
-          class="scroll"
-        >
           <q-list>
             <q-item v-if="false">
               <q-item-section avatar class="head_1">
@@ -51,6 +48,33 @@
                 <q-input v-model="clock_entity.font_name" />
               </q-item-section>
             </q-item>
+            <q-item>
+              <q-item-section>
+                <q-item>
+                  <q-item-section avatar class="head_1">
+                    {{ $t("clock type") }}
+                  </q-item-section>
+                  <q-item-section>
+                    <q-select
+                      v-model="clock_entity.type"
+                      :options="[
+                        {
+                          label: $t('normal clock'),
+                          value: 0,
+                        },
+                        {
+                          label: $t('analog clock'),
+                          value: 2,
+                        },
+                      ]"
+                      emit-value
+                      map-options
+                    >
+                    </q-select>
+                  </q-item-section>
+                </q-item>
+              </q-item-section>
+              <q-item-section>
                 <q-item>
                   <q-item-section avatar class="head_1">
                     {{ $t("font size") }}
@@ -58,14 +82,11 @@
                   <q-item-section>
                     <q-input v-model="clock_entity.font_size" type="number" />
                   </q-item-section>
-              <q-item-section avatar>
+                </q-item>
-                <q-checkbox
-                  v-model="clock_entity.bold"
-                  left-label
-                  :label="$t('font bold')"
-                />
               </q-item-section>
             </q-item>
+            <q-item>
+              <q-item-section class="q-mr-md">
                 <q-item>
                   <q-item-section avatar class="head_1">
                     {{ $t("font color") }}
@@ -89,6 +110,8 @@
                     </q-input>
                   </q-item-section>
                 </q-item>
+              </q-item-section>
+              <q-item-section>
                 <q-item>
                   <q-item-section avatar class="head_1">
                     {{ $t("background color") }}
@@ -111,14 +134,232 @@
                       </template>
                     </q-input>
                   </q-item-section>
-              <q-item-section avatar>
+                </q-item>
+              </q-item-section>
+            </q-item>
+            <q-item>
+              <q-item-section>
+                <q-item>
+                  <q-item-section avatar class="head_1">
+                    {{ $t("date format") }}
+                  </q-item-section>
+                  <q-item-section>
+                    <q-select
+                      v-model="clock_entity.date_format"
+                      :options="date_format_options"
+                      emit-value
+                      map-options
+                    >
+                    </q-select>
+                  </q-item-section>
+                </q-item>
+              </q-item-section>
+
+              <q-item-section>
+                <q-item>
+                  <q-item-section avatar class="head_1">
+                    {{ $t("time format") }}
+                  </q-item-section>
+                  <q-item-section>
+                    <q-select
+                      v-model="clock_entity.time_format"
+                      :options="time_format_options"
+                      emit-value
+                      map-options
+                    >
+                    </q-select>
+                  </q-item-section>
+                </q-item>
+              </q-item-section>
+            </q-item>
+            <q-item>
+              <q-item-section>
+                <q-item>
+                  <q-item-section avatar class="head_2">
+                    {{ $t("text") }}
+                  </q-item-section>
+                  <q-item-section>
+                    <q-input
+                      :disable="clock_entity.multiple_lines"
+                      v-model="clock_entity.text"
+                    />
+                  </q-item-section>
+                </q-item>
+              </q-item-section>
+              <q-tooltip v-if="clock_entity.multiple_lines">
+                {{
+                  $t(
+                    "the current property is only valid for single-line displays"
+                  )
+                }}</q-tooltip
+              >
+            </q-item>
+            <q-item>
+              <q-item-section>
+                <q-checkbox
+                  left-label
+                  v-model="clock_entity.show_date"
+                  :label="$t('date')"
+                />
+              </q-item-section>
+              <q-item-section>
+                <q-checkbox
+                  left-label
+                  v-model="clock_entity.show_time"
+                  :label="$t('time')"
+                />
+              </q-item-section>
+              <q-item-section>
+                <q-checkbox
+                  left-label
+                  v-model="clock_entity.show_week"
+                  :label="$t('week')"
+                />
+              </q-item-section>
+              <q-item-section>
                 <q-checkbox
                   v-model="clock_entity.background_transparent"
                   left-label
                   :label="$t('background transparent')"
                 />
               </q-item-section>
+              <q-item-section>
+                <q-checkbox
+                  left-label
+                  v-model="clock_entity.multiple_lines"
+                  :label="$t('multiple lines')"
+                />
+              </q-item-section>
+              <q-item-section>
+                <q-checkbox
+                  v-model="clock_entity.bold"
+                  left-label
+                  :label="$t('font bold')"
+                />
+              </q-item-section>
             </q-item>
+            <div class="q-mt-xs" v-if="clock_entity.type == 2">
+              <q-separator class="q-mb-md" />
+              <q-item>
+                <q-item-section>
+                  <q-btn
+                    flat
+                    no-caps
+                    class="fit"
+                    :style="{
+                      'background-color':
+                        clock_entity.analog_hour_pointer_color,
+                      color:
+                        getForegroundColor(
+                          clock_entity.analog_hour_pointer_color
+                        ) + ' !important',
+                    }"
+                    :label="$t('hour pointer color')"
+                  >
+                    <q-popup-proxy
+                      cover
+                      transition-show="scale"
+                      transition-hide="scale"
+                    >
+                      <q-color
+                        v-model="clock_entity.analog_hour_pointer_color"
+                      /> </q-popup-proxy></q-btn
+                ></q-item-section>
+                <q-item-section>
+                  <q-btn
+                    flat
+                    no-caps
+                    class="fit"
+                    :style="{
+                      'background-color': clock_entity.analog_minute_color,
+                      color:
+                        getForegroundColor(clock_entity.analog_minute_color) +
+                        ' !important',
+                    }"
+                    :label="$t('minute mark color')"
+                  >
+                    <q-popup-proxy
+                      cover
+                      transition-show="scale"
+                      transition-hide="scale"
+                    >
+                      <q-color
+                        v-model="clock_entity.analog_minute_color"
+                      /> </q-popup-proxy
+                  ></q-btn>
+                </q-item-section>
+                <q-item-section>
+                  <q-btn
+                    flat
+                    no-caps
+                    class="fit"
+                    :style="{
+                      'background-color':
+                        clock_entity.analog_minute_pointer_color,
+                      color:
+                        getForegroundColor(
+                          clock_entity.analog_minute_pointer_color
+                        ) + ' !important',
+                    }"
+                    :label="$t('minute pointer color')"
+                  >
+                    <q-popup-proxy
+                      cover
+                      transition-show="scale"
+                      transition-hide="scale"
+                    >
+                      <q-color
+                        v-model="clock_entity.analog_minute_pointer_color"
+                      /> </q-popup-proxy></q-btn
+                ></q-item-section>
+                <q-item-section>
+                  <q-btn
+                    flat
+                    no-caps
+                    class="fit"
+                    :style="{
+                      'background-color': clock_entity.analog_second_color,
+                      color:
+                        getForegroundColor(clock_entity.analog_second_color) +
+                        ' !important',
+                    }"
+                    :label="$t('second mark color')"
+                  >
+                    <q-popup-proxy
+                      cover
+                      transition-show="scale"
+                      transition-hide="scale"
+                    >
+                      <q-color
+                        v-model="clock_entity.analog_second_color"
+                      /> </q-popup-proxy></q-btn
+                ></q-item-section>
+                <q-item-section>
+                  <q-btn
+                    flat
+                    no-caps
+                    class="fit"
+                    :style="{
+                      'background-color':
+                        clock_entity.analog_second_pointer_color,
+                      color:
+                        getForegroundColor(
+                          clock_entity.analog_second_pointer_color
+                        ) + ' !important',
+                    }"
+                    :label="$t('second pointer color')"
+                  >
+                    <q-popup-proxy
+                      cover
+                      transition-show="scale"
+                      transition-hide="scale"
+                    >
+                      <q-color
+                        v-model="clock_entity.analog_second_pointer_color"
+                      /> </q-popup-proxy></q-btn
+                ></q-item-section>
+              </q-item>
+            </div>
           </q-list>
         </q-card-section>
 
@@ -148,7 +389,11 @@
 
 <style scoped>
 .head_1 {
-  width: 15%;
+  width: 25%;
+}
+
+.head_2 {
+  width: 12%;
 }
 </style>
 
@@ -156,7 +401,7 @@
 import { defineComponent, ref, Ref, watch, computed } from "vue";
 import { useStore } from "src/store";
 import GlobalData from "src/common/GlobalData";
-import { useQuasar } from "quasar";
+import { useQuasar, date as DateHelper } from "quasar";
 import { useI18n } from "vue-i18n";
 import ClockWindowParamEntity from "src/entities/ClockWindowParamEntity";
 
@@ -169,6 +414,33 @@ export default defineComponent({
     let $q = useQuasar();
     let $t = useI18n();
 
+    const now = Date.now();
+    const date_format_options = ref([
+      {
+        label: DateHelper.formatDate(now, "YYYY年MM月DD日"),
+        value: "yyyy年MM月dd日",
+      },
+      {
+        label: DateHelper.formatDate(now, "YYYY/MM/DD"),
+        value: "yyyy/MM/dd",
+      },
+      {
+        label: DateHelper.formatDate(now, "YYYY-MM-DD"),
+        value: "yyyy-MM-dd",
+      },
+    ]);
+
+    const time_format_options = ref([
+      {
+        label: DateHelper.formatDate(now, "HH时mm分ss秒"),
+        value: "hh时mm分ss秒",
+      },
+      {
+        label: DateHelper.formatDate(now, "HH:mm:ss"),
+        value: "hh:mm:ss",
+      },
+    ]);
+
     let show_dialog = ref(false);
     let loading = ref(false);
 
@@ -191,6 +463,9 @@ export default defineComponent({
       show_dialog,
       loading,
       clock_entity,
+      date_format_options,
+      time_format_options,
+
       showDialogAsync(options: any) {
         if (_resolove) {
           _resolove();
@@ -227,6 +502,56 @@ export default defineComponent({
         } catch {}
         loading.value = false;
       },
+      getForegroundColor(color: string) {
+        // rgbToHex(0, 51, 255) => "#0033ff"
+        function rgbToHex(r: any, g: any, b: any) {
+          return (
+            "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
+          );
+        }
+
+        //hexToRgb("#0033ff") => {r: 0, g: 51, b: 255}
+        //hexToRgb("#0033ff").g => 51
+        function hexToRgb(hex: any) {
+          // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
+          var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+          hex = hex.replace(
+            shorthandRegex,
+            function (m: any, r: any, g: any, b: any) {
+              return r + r + g + g + b + b;
+            }
+          );
+
+          var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+          return result
+            ? {
+                r: parseInt(result[1], 16),
+                g: parseInt(result[2], 16),
+                b: parseInt(result[3], 16),
+              }
+            : null;
+        }
+
+        //灰度 = 红×0.299 + 绿×0.587 + 蓝×0.114
+        function getGrayLevelFromRgb(r: any, g: any, b: any) {
+          return (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+        }
+
+        // getGrayLevel('#167df0') => 0.4208352941176471
+        function getGrayLevel(hex: any) {
+          var rgb = hexToRgb(hex);
+          if (rgb) {
+            return getGrayLevelFromRgb(rgb.r, rgb.g, rgb.b);
+          }
+          return "#000000";
+        }
+
+        function getColor(background_color: any) {
+          var grayLevel = getGrayLevel(background_color);
+          return grayLevel > 0.5 ? "#000000b3" : "#fff";
+        }
+        return getColor(color ?? "#000000");
+      },
     };
   },
 });

src/entities/ClockWindowParamEntity.ts

@@ -7,4 +7,17 @@ export default class ClockWindowParamEntity {
   font_color = "#000000";
   background_color = "#000000";
   background_transparent = true;
+
+  date_format = "yyyy/MM/dd";
+  time_format = "hh:mm:ss";
+  show_date = true;
+  show_time = true;
+  show_week = true;
+  analog_minute_color = "#ff0000";
+  analog_minute_pointer_color = "#00ff00";
+  analog_second_color = "#00ff00";
+  analog_second_pointer_color = "#0000ff";
+  analog_hour_pointer_color = "#ff0000";
+  text = "";
+  multiple_lines = false;
 }

src/i18n/zh-CN/index.ts

@@ -514,4 +514,20 @@ export default {
   "lossless ": "无损",
   "picture quality": "画质",
   set: "设置",
+  "time format": "时间格式",
+  "date format": "日期格式",
+  "multiple lines": "多行",
+  week: "星期",
+  date: "日期",
+  "normal clock": "普通时钟",
+  "analog clock": "模拟时钟",
+  "clock type": "时钟类型",
+  text: "文本",
+  "hour pointer color": "时针",
+  "minute pointer color": "分针",
+  "second pointer color": "秒针",
+  "minute mark color": "分标",
+  "second mark color": "秒标",
+  "the current property is only valid for single-line displays":
+    "当前属性只对单行显示有效",
 };