feat: i18n for help

Media-Fetch-Pro · Aug 4, 2023 · 35735eb · 35735eb
1 parent ce16db1
commit 35735eb
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 11 deletions.
diff --git a/web/src/App.vue b/web/src/App.vue
@@ -41,8 +41,21 @@ defineExpose({
         </n-icon>
     </NavTab>
     </div>
-    <RouterView />
-
+    <Transition>
+      <RouterView />
+    </Transition>
   </div>
 </template>
 
+
+<style scoped>
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.6s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/web/src/components/HelpModel.vue b/web/src/components/HelpModel.vue
@@ -42,7 +42,7 @@ const props = defineProps({
     },
     content: {
         type: String,
-        default: '内容'
+        default: 'Content'
     },
 })
 const showModal = ref(false)

diff --git a/web/src/locales/en-US.json b/web/src/locales/en-US.json
@@ -40,7 +40,17 @@
             "the-name-is-already-exist":"the name is already exist",
             "path-name-is-empty":"path name is empty",
             "path-value-is-empty":"path value is empty"
-
         }
-    }   
+    },
+    "help":{
+        "download-help":{
+            "title":"What is Video URL",
+            "content":"Please copy the URL of the video you want to download from the browser address bar"
+        },
+        "what-is-video-storage-path":{
+            "label":"What is Video Storage Path",
+            "title":"What is Video Storage Path",
+            "content":"Video Storage Path is the video storage path of the video you downloaded. If you use Media Fetch Pro in a Docker. you shouldn't to change this setting. You should to change the map to move the video to the outside of the container."
+        }
+    }
 }
diff --git a/web/src/locales/zh-CN.json b/web/src/locales/zh-CN.json
@@ -41,5 +41,16 @@
             "path-name-is-empty":"路径名为空",
             "path-value-is-empty":"路径为空"
         }
-    }   
+    },
+    "help":{
+        "download-help":{
+            "title":"How to get Video URL",
+            "content":"Please copy the URL of the video you want to download from the browser address bar"
+        },
+        "what-is-video-storage-path":{
+            "label":"什么是存储路径",
+            "title":"什么是存储路径",
+            "content":"存储路径是指下载的视频文件存储的位置。如果你是在通过 Docker 来使用 Media Fetch Pro 那么请不要修改这里，而是通过修改 Docker 的文件夹映射来修改存储路径。"
+        }
+    }
 }
diff --git a/web/src/views/DownloadView.vue b/web/src/views/DownloadView.vue
@@ -19,8 +19,8 @@ const store = useDownloadStore()
             <div class="flex gap-2">
                 <n-input class="w-full" v-model:value="store.url" type="text"  placeholder="Please input Video URL" />
                 <HelpModel 
-                    title="How to get Video URL"
-                    content="Please copy the URL of the video you want to download from the browser address bar"
+                    :title="t('help.download-help.title')"
+                    :content="t('help.download-help.content')"
                 />
             </div>
             <DownloadDialog />

diff --git a/web/src/views/SettingPage/StoragePathSetting.vue b/web/src/views/SettingPage/StoragePathSetting.vue
@@ -5,9 +5,9 @@
         </h1>
 
         <HelpModel 
-            label="What is Video Storage Path"
-            title="What is Video Storage Path"
-            content="Video Storage Path is the video storage path of the video you downloaded. If you use Media Fetch Pro in a Docker. you shouldn't to change this setting. You should to change the map to move the video to the outside of the container."
+            :label="t('help.what-is-video-storage-path.label')"
+            :title="t('help.what-is-video-storage-path.title')"
+            :content="t('help.what-is-video-storage-path.content')"
         />
     </div>