修复滚动条失效的BUG

src/components/SignalSourceTree.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <q-scroll-area style="height: 60vw; width: 20vw">
     <q-tree ref="tree" :nodes="tree_nodes" node-key="uuid" labelKey="name">
       <template v-slot:default-header="prop">
         <q-item
@@ -116,7 +116,7 @@
         </q-item>
       </template>
     </q-tree>
-  </div>
+  </q-scroll-area>
   <signal-source-group-dialog ref="group_dialog" />
   <signal-source-dialog ref="signal_source_dialog" />
 </template>

src/components/SubtitleDialog.vue

@@ -5,7 +5,7 @@
     @show="onShow"
     @before-hide="resetData"
   >
-    <q-card class="overflow-hidden" style="overflow-y: scroll; max-width: 70vw">
+    <q-card class="overflow-hidden" style="max-width: 70vw">
       <q-form @submit="onSubmit">
         <q-card-section class="q-ma-none q-pa-sm">
           <div class="row">
@@ -14,6 +14,23 @@
             </div>
             <q-space />
             <div>
+              <q-btn
+                flat
+                round
+                color="secondary"
+                :icon="
+                  $q.fullscreen.isActive ? 'fullscreen_exit' : 'fullscreen'
+                "
+                @click="toggleFullScreen"
+              >
+                <q-tooltip>
+                  {{
+                    $q.fullscreen.isActive
+                      ? $t("Exit Fullscreen")
+                      : $t("Go Fullscreen")
+                  }}
+                </q-tooltip>
+              </q-btn>
               <q-btn
                 :loading="loading"
                 flat
@@ -32,7 +49,7 @@
 
         <q-separator />
 
-        <q-card-section style="max-height: 75vh; width: 70vw" class="scroll">
+        <q-card-section class="scroll">
           <q-list>
             <q-item>
               <q-item-section>
@@ -112,19 +129,19 @@
                 <q-select
                   :label="$t('speed')"
                   v-model="subtitle.x_speed"
-                  :options="[1, 2, 3, 4, 5, 6, 7, 8, 9]"
+                  :options="[1, 2, 3, 4, 5, 6, 7, 8, 9, 15, 20]"
                 ></q-select>
               </q-item-section>
               <q-item-section></q-item-section>
             </q-item>
             <q-separator inset />
 
-            <q-item style="height: 45vh">
+            <q-item ref="editor_parent" style="height: 40vh">
               <div class="col">
                 <div class="row">
                   <div ref="wysiwyg_toolbar" class="fit ck-reset_all"></div>
                 </div>
-                <div class="row" style="height: 45vh">
+                <div class="row">
                   <div ref="wysiwyg_editor"></div>
                 </div>
               </div>
@@ -170,7 +187,6 @@ main .ck-editor[role='application'] .ck.ck-content,
   width: 100%;
   background: #fff;
   font-size: 1em;
-  line-height: 1.6em;
   min-height: var(--ck-sample-editor-min-height);
   padding: 1.5em 2em;
 }
@@ -210,12 +226,14 @@ import {
   computed,
   onMounted,
   onBeforeUnmount,
+  nextTick,
 } from "vue";
 import { useStore } from "src/store";
 import { useQuasar } from "quasar";
 import { useI18n } from "vue-i18n";
 import GlobalData from "src/common/GlobalData";
 import SubtitleEntity from "src/entities/SubtitleEntity";
+import { log } from "util";
 
 export default defineComponent({
   name: "ComponentSubtitleDialog",
@@ -229,6 +247,7 @@ export default defineComponent({
     let subtitle = ref(new SubtitleEntity());
     let wysiwyg_editor: Ref<HTMLElement | null> = ref(null);
     let wysiwyg_toolbar: Ref<HTMLElement | null> = ref(null);
+    let editor_parent: Ref<HTMLElement | null> = ref(null);
     let editor: any = null;
 
     const createEditor = () => {
@@ -237,35 +256,38 @@ export default defineComponent({
         return;
       }
 
+      const fontOptions: number[] = [9, 11, 13, 17];
+      for (let i = 17 + 2; i < 100; i += 2) {
+        fontOptions.push(i);
+      }
+
+      for (let i = 103; i < 150; i += 3) {
+        fontOptions.push(i);
+      }
+
+      for (let i = 154; i < 180; i += 4) {
+        fontOptions.push(i);
+      }
+
+      for (let i = 185; i < 200; i += 5) {
+        fontOptions.push(i);
+      }
+
+      for (let i = 210; i < 250; i += 10) {
+        fontOptions.push(i);
+      }
+
+      for (let i = 270; i < 300; i += 20) {
+        fontOptions.push(i);
+      }
+
+      for (let i = 330; i < 360; i += 30) {
+        fontOptions.push(i);
+      }
+
       (window as any).DecoupledDocumentEditor.create(wysiwyg_editor.value, {
         fontSize: {
-          options: [
+          options: fontOptions,
-            9,
-            11,
-            13,
-            "default",
-            17,
-            19,
-            21,
-            25,
-            29,
-            31,
-            35,
-            39,
-            41,
-            45,
-            49,
-            51,
-            55,
-            59,
-            61,
-            69,
-            71,
-            79,
-            89,
-            99,
-            109,
-          ],
         },
         toolbar: {
           items: [
@@ -284,8 +306,6 @@ export default defineComponent({
             "bulletedList",
             "todoList",
             "|",
-            "blockQuote",
-            "|",
             "undo",
             "redo",
           ],
@@ -315,6 +335,7 @@ export default defineComponent({
       subtitle,
       wysiwyg_editor,
       wysiwyg_toolbar,
+      editor_parent,
       async showDialog() {
         show_dialog.value = true;
         loading.value = true;
@@ -335,12 +356,18 @@ export default defineComponent({
       },
       onShow() {
         if (editor) {
+          setTimeout(() => {
             editor.ui.view.toolbar.isCompact = false;
             editor.ui.view.toolbar.maxWidth = "100%";
+          }, 500);
 
           document.querySelectorAll(".ck-dropdown__panel").forEach((item) => {
             ((item as HTMLElement)?.style as any).overflow = "auto";
-            ((item as HTMLElement)?.style as any).height = "45vh";
+            ((item as HTMLElement)?.style as any).overflowX = "hidden";
+            ((item as HTMLElement)?.style as any).height = "40vh";
+            item.querySelectorAll(".ck-button__label").forEach((item_) => {
+              ((item_ as HTMLElement)?.style as any).fontSize = "20px";
+            });
           });
 
           editor.setData(subtitle.value.text);
@@ -397,6 +424,17 @@ export default defineComponent({
         } catch {}
         loading.value = false;
       },
+      toggleFullScreen(e: any) {
+        console.log(e);
+        const target = e.target.parentNode.parentNode.parentNode;
+        console.log(target);
+        $q.fullscreen
+          .toggle(target)
+          .then(() => {})
+          .catch((err) => {
+            console.error(err);
+          });
+      },
     };
   },
 });

src/i18n/zh-CN/index.ts

@@ -170,4 +170,6 @@ export default {
   "set subtitle success": "设置字幕成功",
   "input data error": "输入数据错误",
   "editor error": "富文本编辑器内部错误",
+  "Exit Fullscreen": "退出全屏",
+  "Go Fullscreen": "全屏",
 };