update

packages/qjkankan-editor/src/framework/EditorMain.vue

@@ -21,11 +21,11 @@ export default {
   name: "editor-main",
   components: {
     AppMenu,
-    AppPlay
+    AppPlay,
   },
   created() {},
   async mounted() {},
-  computed: {}
+  computed: {},
 };
 </script>
 
@@ -43,7 +43,12 @@ export default {
   > .app-view {
     position: relative;
     flex: 1 0 auto;
-    height: 100%;
+    min-height: 100%;
+    overflow-y: scroll;
+    display: flex;
+    > div {
+      flex: 1;
+    }
   }
 }
 </style>

packages/qjkankan-editor/src/views/base/Toolbar.vue

@@ -1,104 +1,112 @@
 <template>
   <!-- 编辑器-基础-中间部分 -->
   <div class="app-view-toolbar app-view-full-toolbar">
-    <div class="main">
-      <div class="ui-title-big">
-        {{ $i18n.t(`edit_settings.base_setting`) }}
-      </div>
-      <div class="upload-con">
-        <div class="uc-l">
-          <div class="preview">
-            <img
-              :src="
-                info.icon ||
-                require('@/assets/images/default/img_cover_default_2.png')
-              "
-              alt=""
-            />
-            <button
-              class="ui-button submit setting-cover-btn"
-              @click="onClickSettingCover"
-            >
-              {{ $i18n.t(`edit_settings.setting_cover`) }}
-            </button>
-          </div>
-          <div
-            class="ui-remark"
-            v-html="$i18n.t(`edit_settings.cover_size`)"
-          ></div>
+    <div class="main base-config">
+      <div class="top-container">
+        <div class="ui-title-big">
+          {{ $i18n.t(`edit_settings.base_setting`) }}
         </div>
-        <div class="uc-r">
-          <div class="ui-title">
-            <span class="">{{ $i18n.t(`edit_settings.title`) }}</span>
-          </div>
-          <div class="title-input-wrapper">
-            <input
-              v-model.trim="info.name"
-              @input="emojistr"
-              @keydown.enter="onTitleInputEnter"
-              type="text"
-              autocomplete="new-password"
-              maxlength="50"
-              :placeholder="$i18n.t(`edit_settings.work_placeholder`)"
-            />
-            <span class="count">{{ titleLength }}/50</span>
-          </div>
-          <div class="ui-title jianjie">
-            <span>{{ $i18n.t(`edit_settings.description`) }}</span>
+        <div class="upload-con">
+          <div class="uc-l">
+            <div class="preview">
+              <img
+                :src="
+                  info.icon ||
+                  require('@/assets/images/default/img_cover_default_2.png')
+                "
+                alt=""
+              />
+              <button
+                class="ui-button submit setting-cover-btn"
+                @click="onClickSettingCover"
+              >
+                {{ $i18n.t(`edit_settings.setting_cover`) }}
+              </button>
+            </div>
+            <div
+              class="ui-remark"
+              v-html="$i18n.t(`edit_settings.cover_size`)"
+            ></div>
           </div>
-          <div class="jianjie-textarea-wrapper">
-            <!-- <textarea
+          <div class="uc-r">
+            <div class="ui-title">
+              <span class="">{{ $i18n.t(`edit_settings.title`) }}</span>
+            </div>
+            <div class="title-input-wrapper">
+              <input
+                v-model.trim="info.name"
+                @input="emojistr"
+                @keydown.enter="onTitleInputEnter"
+                type="text"
+                autocomplete="new-password"
+                maxlength="50"
+                :placeholder="$i18n.t(`edit_settings.work_placeholder`)"
+              />
+              <span class="count">{{ titleLength }}/50</span>
+            </div>
+            <div class="ui-title jianjie">
+              <span>{{ $i18n.t(`edit_settings.description`) }}</span>
+            </div>
+            <div class="jianjie-textarea-wrapper">
+              <!-- <textarea
               v-model.trim="info.description"
               maxlength="500"
               placeholder="请输入作品简介"
               type="text"
             /> -->
 
-            <editor
-              ref="editor"
-              :html="info.description"
-              :placeholder="$i18n.t(`edit_settings.intro_placeholder`)"
-              :maxlength="1000"
-              @change="onEditorChange"
-            ></editor>
+              <editor
+                ref="editor"
+                :html="info.description"
+                :placeholder="$i18n.t(`edit_settings.intro_placeholder`)"
+                :maxlength="1000"
+                @change="onEditorChange"
+              ></editor>
 
-            <span class="count">{{ introLength }}/1000</span>
+              <span class="count">{{ introLength }}/1000</span>
+            </div>
           </div>
         </div>
       </div>
-      <menu>
-        <li
-          v-for="item in tabs"
-          :key="item"
-          :class="{ active: activeTab === item }"
-          @click="activeTab = item"
-        >
-          {{ $i18n.t(`baseSetting.${item}`) }}
-        </li>
-      </menu>
+      <div class="bottom-container">
+        <menu>
+          <li
+            v-for="item in tabs"
+            :key="item"
+            :class="{ active: activeTab === item }"
+            @click="activeTab = item"
+          >
+            {{ $i18n.t(`baseSetting.${item}`) }}
+          </li>
+        </menu>
 
-      <div class="settings-view-wrapper">
-        <OpeningTipSettings
-          v-show="activeTab === 'openTips'"
-        ></OpeningTipSettings>
-        <OpeningAnimationSettings
-          v-show="activeTab === 'openAnimate'"
-        ></OpeningAnimationSettings>
-        <PasswordSettings v-show="activeTab === 'password'"></PasswordSettings>
-        <AutoCruiseSettings
-          v-show="activeTab === 'cruise'"
-        ></AutoCruiseSettings>
-        <BackgroundMusicSettings
-          v-show="activeTab === 'bgm'"
-        ></BackgroundMusicSettings>
-        <CustomLogoSettings v-show="activeTab === 'logo'"></CustomLogoSettings>
-        <CustomMaskSettings
-          v-show="activeTab === 'customCover'"
-        ></CustomMaskSettings>
-        <CustomButtonSettings
-          v-show="activeTab === 'customButton'"
-        ></CustomButtonSettings>
-        <CoverBase v-show="activeTab === 'openCover'"></CoverBase>
+        <div class="settings-view-wrapper">
+          <OpeningTipSettings
+            v-show="activeTab === 'openTips'"
+          ></OpeningTipSettings>
+          <OpeningAnimationSettings
+            v-show="activeTab === 'openAnimate'"
+          ></OpeningAnimationSettings>
+          <PasswordSettings
+            v-show="activeTab === 'password'"
+          ></PasswordSettings>
+          <AutoCruiseSettings
+            v-show="activeTab === 'cruise'"
+          ></AutoCruiseSettings>
+          <BackgroundMusicSettings
+            v-show="activeTab === 'bgm'"
+          ></BackgroundMusicSettings>
+          <CustomLogoSettings
+            v-show="activeTab === 'logo'"
+          ></CustomLogoSettings>
+          <CustomMaskSettings
+            v-show="activeTab === 'customCover'"
+          ></CustomMaskSettings>
+          <CustomButtonSettings
+            v-show="activeTab === 'customButton'"
+          ></CustomButtonSettings>
+          <CoverBase v-show="activeTab === 'openCover'"></CoverBase>
+        </div>
       </div>
     </div>
 
@@ -219,11 +227,24 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.main {
-  position: fixed;
+.app-view-toolbar {
+  display: flex;
+  flex: 1;
+  width: 100%;
+  min-height: 100%;
+}
+.base-config.main {
   width: 930px;
-  top: 90px;
-  left: calc(50% - (930px) / 2);
+  padding-top: 20px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  .top-container {
+    flex: 0 0 336px;
+  }
+  .bottom-container {
+    flex: 1 1 100%;
+  }
 }
 
 .upload-con {
@@ -369,5 +390,11 @@ menu {
   vertical-align: top;
   display: inline-block;
   width: 762px;
+  height: 100%;
+  > div {
+    height: auto !important;
+    min-height: 100%;
+    overflow-y: scroll;
+  }
 }
 </style>

yarn.lock

@@ -11891,6 +11891,11 @@ mississippi@^3.0.0:
     stream-each "^1.1.0"
     through2 "^2.0.0"
 
+mitt@^3.0.0:
+  version "3.0.0"
+  resolved "http://192.168.0.47:4873/mitt/-/mitt-3.0.0.tgz#69ef9bd5c80ff6f57473e8d89326d01c414be0bd"
+  integrity sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ==
+
 mixin-deep@^1.2.0:
   version "1.3.2"
   resolved "https://mirrors.cloud.tencent.com/npm/mixin-deep/-/mixin-deep-1.3.2.tgz#1120b43dc359a785dce65b55b82e257ccf479566"