+ Add translation support for all ui components under web/src/components/*.

web/src/components/arrayCtrl/arrayCtrl.vue

@@ -20,7 +20,7 @@
         @blur="handleInputConfirm"
       />
       <el-button v-else class="button-new-tag" size="small" @click="showInput">
-        + 新增
+        {{ t('components.arrayCtrl.new') }}
       </el-button>
     </template>
   </div>
@@ -33,6 +33,9 @@ defineOptions({
 })
 
 import { nextTick, ref } from 'vue'
+import { useI18n } from 'vue-i18n' // added by mohamed hassan to support multilanguage
+
+const { t } = useI18n() // added by mohamed hassan to support multilanguage
 
 const inputValue = ref('')
 const inputVisible = ref(false)

web/src/components/bottomInfo/bottomInfo.vue

@@ -5,7 +5,7 @@
 <template>
   <div class="flex flex-col md:flex-row gap-2 items-center text-sm text-slate-700 dark:text-slate-500 justify-center py-2">
     <div class="text-center">
-      <span class="mr-1">Powered by</span>
+      <span class="mr-1">{{ t('components.bottomInfo.poweredBy') }}</span>
       <span>
         <a
           class="font-bold text-active"
@@ -15,12 +15,12 @@
     </div>
     <slot />
     <div class="text-center">
-      <span class="mr-1">Copyright</span>
+      <span class="mr-1">{{ t('components.bottomInfo.copyright') }}</span>
       <span>
         <a
           class="font-bold text-active"
           href="https://github.com/flipped-aurora"
-        >flipped-aurora团队</a>
+        >{{ t('components.bottomInfo.faTeam') }}</a>
       </span>
     </div>
   </div>

web/src/components/selectFile/selectFile.vue

@@ -13,7 +13,7 @@
       class="upload-btn"
     >
       <el-button type="primary">
-        上传文件
+        {{ t('components.selectFile.uploadFiles') }}
       </el-button>
     </el-upload>
   </div>
@@ -24,6 +24,9 @@
 import { ref } from 'vue'
 import { ElMessage } from 'element-plus'
 import { getBaseUrl } from '@/utils/format'
+import { useI18n } from 'vue-i18n' // added by mohamed hassan to support multilanguage
+
+const { t } = useI18n() // added by mohamed hassan to support multilanguage
 
 defineOptions({
   name: 'UploadCommon',
@@ -54,7 +57,7 @@ const uploadSuccess = (res) => {
   if(code !== 0){
     ElMessage({
       type: 'error',
-      message: '上传失败'+res.msg
+      message: t('components.selectFile.uploadFailed') + res.msg
     })
     fileList.value.pop()
     return
@@ -77,7 +80,7 @@ const uploadRemove = (file) => {
 const uploadError = (err) => {
   ElMessage({
     type: 'error',
-    message: '上传失败'
+    message: t('components.selectFile.uploadFailed')
   })
   fullscreenLoading.value = false
   emits('on-error',err)

web/src/components/selectImage/selectComponent.vue

@@ -18,7 +18,7 @@
       <source :src="getUrl(model) + '#t=1'">
     </video>
 
-    <img v-if="model&&!isVideoExt(model)" class="w-full h-full" :src="getUrl(model)" alt="图片">
+    <img v-if="model&&!isVideoExt(model)" class="w-full h-full" :src="getUrl(model)" :alt="t('components.selectImage.selectComponent.image')">
     <div
       v-if="model"
       class="left-0 top-0 hidden text-gray-600 group-hover:bg-gray-600 group-hover:bg-opacity-30 w-full h-full group-hover:flex justify-center items-center absolute z-10"
@@ -27,7 +27,7 @@
       <el-icon>
         <delete />
       </el-icon>
-      删除
+      {{ t('general.delete') }}
     </div>
     <div
       v-else
@@ -37,13 +37,16 @@
       <el-icon>
         <plus />
       </el-icon>
-      上传
+      {{ t('components.selectImage.selectComponent.upload') }}
     </div>
   </div>
 </template>
 <script setup>
 import { getUrl, isVideoExt } from '@/utils/image'
 import { Delete, Plus } from '@element-plus/icons-vue'
+import { useI18n } from 'vue-i18n' // added by mohamed hassan to support multilanguage
+
+const { t } = useI18n() // added by mohamed hassan to support multilanguage
 
 defineProps({
   model: {

web/src/components/selectImage/selectImage.vue

@@ -26,11 +26,11 @@
 
     <el-drawer
         v-model="drawer"
-        title="媒体库"
+        :title="t('components.selectImage.selectImage.mediaLibrary')"
         size="650px"
     >
       <warning-bar
-          title="点击“文件名/备注”可以编辑文件名或者备注内容。"
+          :title="t('components.selectImage.selectImage.editFileNote')"
       />
       <div class="gva-btn-list gap-2">
         <upload-common
@@ -46,14 +46,14 @@
         <el-input
             v-model="search.keyword"
             class="keyword"
-            placeholder="请输入文件名或备注"
+            :placeholder="t('components.selectImage.selectImage.enterFileName')"
         />
         <el-button
             type="primary"
             icon="search"
             @click="getImageList"
         >
-          查询
+          {{ t('eneral.search') }}
         </el-button>
       </div>
       <div class="flex flex-wrap gap-4">
@@ -86,7 +86,7 @@
                     @click="chooseImg(item.url)"
                 >
                   <source :src="getUrl(item.url) + '#t=1'">
-                  您的浏览器不支持视频播放
+                  {{ t('components.selectImage.selectImage.browserNotSupportVideo') }}
                 </video>
                 <div
                     v-else
@@ -177,11 +177,11 @@ const handleCurrentChange = (val) => {
 }
 
 const editFileNameFunc = async(row) => {
-  ElMessageBox.prompt('请输入文件名或者备注', '编辑', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
+  ElMessageBox.prompt(t('components.selectImage.selectImage.enterFileNameOrComment'), t('general.edit'), {
+    confirmButtonText: t('general.confirm'),
+    cancelButtonText: t('general.cancel'),
     inputPattern: /\S/,
-    inputErrorMessage: '不能为空',
+    inputErrorMessage: t('general.cannotBeEmpty'),
     inputValue: row.name
   }).then(async({ value }) => {
     row.name = value
@@ -189,14 +189,14 @@ const editFileNameFunc = async(row) => {
     if (res.code === 0) {
       ElMessage({
         type: 'success',
-        message: '编辑成功!',
+        message: t('general.editSuccess'),
       })
       getImageList()
     }
   }).catch(() => {
     ElMessage({
       type: 'info',
-      message: '取消修改'
+      message: t('general.cancelModification')
     })
   })
 }
@@ -222,7 +222,7 @@ const chooseImg = (url) => {
     if (!typeSuccess) {
       ElMessage({
         type: 'error',
-        message: '当前类型不支持使用'
+        message: t('components.selectImage.selectImage.typeNotSupported')
       })
       return
     }
@@ -255,23 +255,23 @@ const getImageList = async() => {
 }
 
 const deleteCheck = (item) => {
-  ElMessageBox.confirm('是否删除该文件', '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
+  ElMessageBox.confirm(t('components.selectImage.selectImage.delectFileConfirmation'), t('general.hint'), {
+    confirmButtonText: t('general.confirm'),
+    cancelButtonText: t('general.cancel'),
     type: 'warning'
   }).then(async() => {
     const res = await deleteFile(item)
     if (res.code === 0) {
       ElMessage({
         type: 'success',
-        message: '删除成功!',
+        message: t('general.delectSuccess'),
       })
       getImageList()
     }
   }).catch(() => {
     ElMessage({
       type: 'info',
-      message: '已取消删除'
+      message: t('general.undeleted')
     })
   })
 }

web/src/components/upload/common.vue

@@ -9,7 +9,7 @@
       multiple
       class="upload-btn"
     >
-      <el-button type="primary">普通上传</el-button>
+      <el-button type="primary">{{ t('components.upload.common.normalUpload') }}</el-button>
     </el-upload>
   </div>
 </template>
@@ -20,6 +20,9 @@ import { ref } from 'vue'
 import { ElMessage } from 'element-plus'
 import { isVideoMime, isImageMime } from '@/utils/image'
 import { getBaseUrl } from '@/utils/format'
+import { useI18n } from 'vue-i18n' // added by mohamed hassan to support multilanguage
+
+const { t } = useI18n() // added by mohamed hassan to support multilanguage
 
 defineOptions({
   name: 'UploadCommon',
@@ -37,17 +40,17 @@ const checkFile = (file) => {
   const isImage = isImageMime(file.type)
   let pass = true
   if (!isVideo && !isImage) {
-    ElMessage.error('上传图片只能是 jpg,png,svg,webp 格式, 上传视频只能是 mp4,webm 格式!')
+    ElMessage.error(t('components.upload.common.fileFormatNote'))
     fullscreenLoading.value = false
     pass = false
   }
   if (!isLt5M && isVideo) {
-    ElMessage.error('上传视频大小不能超过 5MB')
+    ElMessage.error(t('components.upload.common.videoSizeError'))
     fullscreenLoading.value = false
     pass = false
   }
   if (!isLt500K && isImage) {
-    ElMessage.error('未压缩的上传图片大小不能超过 500KB，请使用压缩上传')
+    ElMessage.error(t('components.upload.common.imageSizeError'))
     fullscreenLoading.value = false
     pass = false
   }
@@ -67,7 +70,7 @@ const uploadSuccess = (res) => {
 const uploadError = () => {
   ElMessage({
     type: 'error',
-    message: '上传失败'
+    message: t('selectFile.uploadFailed')
   })
   fullscreenLoading.value = false
 }

web/src/components/upload/image.vue

@@ -8,7 +8,7 @@
       :before-upload="beforeImageUpload"
       :multiple="false"
     >
-      <el-button type="primary">压缩上传</el-button>
+      <el-button type="primary">{{ t('components.upload.image.compressedUpload') }}</el-button>
     </el-upload>
   </div>
 </template>
@@ -17,6 +17,9 @@
 import ImageCompress from '@/utils/image'
 import { ElMessage } from 'element-plus'
 import { getBaseUrl } from '@/utils/format'
+import { useI18n } from 'vue-i18n' // added by mohamed hassan to support multilanguage
+
+const { t } = useI18n() // added by mohamed hassan to support multilanguage
 
 defineOptions({
   name: 'UploadImage',
@@ -42,7 +45,7 @@ const beforeImageUpload = (file) => {
   const isJPG = file.type === 'image/jpeg'
   const isPng = file.type === 'image/png'
   if (!isJPG && !isPng) {
-    ElMessage.error('上传头像图片只能是 jpg或png 格式!')
+    ElMessage.error(t('components.upload.image.avatarImageFormatError'))
     return false
   }