Fix the distance between the low-resolution lower panel and the exercise center and add a shortcut key to toggle the panel

src/assets/css/style.scss

@@ -70,6 +70,7 @@ html.dark {
     --toolbar-width: 40vw;
     --panel-width: 380rem;
     --toolbar-height: 48rem;
+    --panel-margin-left: calc(50% - var(--practice-wrapper-padding-right) / 2 + var(--toolbar-width) / 2 + 9vw);
   }
   .footer {
     .bottom {
@@ -93,6 +94,7 @@ html.dark {
     --panel-width: 30vw;
     --toolbar-width: 50vw;
     --toolbar-height: 40rem;
+    --panel-margin-left: calc(50% - var(--practice-wrapper-padding-right) / 2 + var(--toolbar-width) / 2 + 9vw);
   }
 
   .footer {

src/components/Practice/Practice.vue

@@ -108,6 +108,10 @@ function toggleConciseMode() {
   settingStore.showPanel = !settingStore.showPanel
 }
 
+function togglePanel() {
+  settingStore.showPanel = !settingStore.showPanel
+}
+
 onMounted(() => {
   emitter.on(EventKey.next, next)
   emitter.on(EventKey.write, write)
@@ -123,6 +127,7 @@ onMounted(() => {
   emitter.on(ShortcutKey.OpenDictDetail, openDictDetail)
   emitter.on(ShortcutKey.ToggleTheme, toggleTheme)
   emitter.on(ShortcutKey.ToggleConciseMode, toggleConciseMode)
+  emitter.on(ShortcutKey.TogglePanel, togglePanel)
   practiceRef.getCurrentPractice()
 })
 
@@ -141,7 +146,7 @@ onUnmounted(() => {
   emitter.off(ShortcutKey.OpenDictDetail, openDictDetail)
   emitter.off(ShortcutKey.ToggleTheme, toggleTheme)
   emitter.off(ShortcutKey.ToggleConciseMode, toggleConciseMode)
-
+  emitter.off(ShortcutKey.TogglePanel, togglePanel)
 })
 
 </script>
@@ -153,7 +158,7 @@ onUnmounted(() => {
     <PracticeWord ref="practiceRef" v-else/>
     <Footer/>
   </div>
-<!--  <AddWordDialog></AddWordDialog>-->
+  <!--  <AddWordDialog></AddWordDialog>-->
   <DictModal :model-value="runtimeStore.showDictModal" @close="runtimeStore.showDictModal = false"/>
   <SettingModal v-if="runtimeStore.showSettingModal" @close="runtimeStore.showSettingModal = false"/>
   <Statistics/>

src/locales/i18n.json

@@ -270,5 +270,21 @@
 		"ko": "",
 		"de": "",
 		"fr": ""
+	},
+	"TogglePanel": {
+		"en": "",
+		"zh": "显示/隐藏列表",
+		"id": "",
+		"tw": "",
+		"th": "",
+		"ru": "",
+		"vi": "",
+		"es": "",
+		"pt": "",
+		"ja": "",
+		"uk": "",
+		"ko": "",
+		"de": "",
+		"fr": ""
 	}
 }

src/types.ts

@@ -171,7 +171,7 @@ export const SaveDict = {
 }
 export const SaveConfig = {
   key: 'typing-word-config',
-  version: 7
+  version: 8
 }
 
 export enum ShortcutKey {
@@ -193,6 +193,7 @@ export enum ShortcutKey {
   OpenDictDetail = 'OpenDictDetail',
   ToggleTheme = 'ToggleTheme',
   ToggleConciseMode = 'ToggleConciseMode',
+  TogglePanel = 'TogglePanel'
 }
 
 export const DefaultShortcutKeyMap = {
@@ -214,6 +215,7 @@ export const DefaultShortcutKeyMap = {
   [ShortcutKey.ToggleTheme]: 'Ctrl+Q',
   [ShortcutKey.OpenDictDetail]: 'Ctrl+J',
   [ShortcutKey.ToggleConciseMode]: 'Ctrl+M',
+  [ShortcutKey.TogglePanel]: 'Ctrl+L',
 }