✨ 国际化信息页面

link gh-3

src/api/i18n/i18n-data.ts

@@ -0,0 +1,33 @@
+import httpClient from '@/utils/axios'
+import type { I18nData, I18nDataDTO, I18nDataQO } from './types'
+
+export function pageI18nData(query: I18nDataQO) {
+  return httpClient.get('/i18n/i18n-data/page', {
+    params: query
+  })
+}
+
+export function createI18nData(data: I18nDataDTO) {
+  return httpClient.post('/i18n/i18n-data', data)
+}
+
+export function removeI18nData(code: string, languageTag: string) {
+  return httpClient.delete('/i18n/i18n-data', {
+    params: {
+      code: code,
+      languageTag: languageTag
+    }
+  })
+}
+
+export function updateI18nData(data: I18nData) {
+  return httpClient.put('/i18n/i18n-data', data)
+}
+
+export function exportExcel(params: I18nDataQO) {
+  return httpClient.get('/i18n/i18n-data/export', { params, responseType: 'blob' })
+}
+
+export function importExcel() {
+  return httpClient.postForm('i18n/i18n-data/import', null, {})
+}

src/api/i18n/types.ts

@@ -0,0 +1,40 @@
+export interface I18nDataQO {
+  // 国际化标识
+  code?: string
+  // 文本值
+  message?: string
+  // 语言标签
+  languageTag?: string
+}
+
+export interface LanguageText {
+  // 语言标签
+  languageTag: string
+  // 文本值
+  message: string
+}
+
+export interface I18nBaseData {
+  // 唯一标识
+  code: string
+  // 备注
+  remarks?: string
+}
+
+export interface I18nData extends LanguageText, I18nBaseData {}
+
+/**
+ * i18nData新建修改的传输对象
+ */
+export interface I18nDataDTO extends I18nBaseData {
+  languageTexts: LanguageText[]
+}
+
+/**
+ * 角色分页视图对象
+ */
+export interface I18nDataPageVO extends I18nBaseData, LanguageText {
+  id: number
+  // 创建时间
+  createTime?: string
+}

src/locales/lang/en-US/ballcat.json

@@ -1,17 +1,77 @@
 {
   "locale.ballcat": "BallCat en-US",
-
   "user.login.submit": "Login",
   "user.login.submit.retry": "Login again",
   "user.login.expired": "Login status expired!",
-
   "user.pemission.reject": "No Permission!",
-
   "system.tip.title": "System Tip",
   "system.tip.request.error": "Abnormal network request!",
   "system.tip.request.error.message": "request error status code: {code}",
   "system.tip.network.error": "The network is abnormal, and the server cannot be accessed!",
-  "system.tip.network.error.message":
-    "The network is abnormal, please check whether your network is smooth!",
-  "system.tip.operate.error": "Operate Error! {message}"
+  "system.tip.network.error.message": "The network is abnormal, please check whether your network is smooth!",
+  "system.tip.operate.error": "Operate Error! {message}",
+
+  "lov": {
+    "selectedData": "The selected data"
+  },
+
+  "action": {
+    "query": "Query",
+    "reset": "Reset",
+    "expand": "Expand",
+    "collapse": "Collapse",
+    "more": "More",
+    "create": "New",
+    "delete": "Delete",
+    "edit": "Edit",
+    "export": "Export",
+    "import": "Import",
+    "details": "Details",
+    "selectFile": "Select File",
+    "choose": "Choose",
+    "cancel": "Cancel"
+  },
+
+  "common": {
+    "operation": "Operation",
+    "createTime": "Create Time",
+    "updateTime": "Update Time",
+    "remarks": "Remarks"
+  },
+
+  "message": {
+    "confirmDelete": "Are you sure delete?",
+    "pleaseEnter": "Please enter",
+    "pleaseSelectFile": "Please Select File"
+  },
+
+  "import": {
+    "batchImport": "Batch Import",
+    "downloadTemplate": "Download Template",
+    "whenDataExisting": "When the data already exists",
+    "skipExisting": "Skip Existing",
+    "overwriteExisting": "Overwrite Existing",
+    "importSuccess": "Import Success"
+  },
+
+  "i18n": {
+    "i18nData": {
+      "text": "I18N Data",
+      "languageTag": {
+        "text": "Language Tag",
+        "tips": "LanguageTag，eg. zh-CN en-Us",
+        "required": "Please enter i18n data language-tag！"
+      },
+      "code": {
+        "text": "Code",
+        "tips": "A unique code for i18n data",
+        "required": "Please enter i18n data code！"
+      },
+      "message": {
+        "text": "Message",
+        "tips": "The text of the i18n data",
+        "required": "Please enter i18n data message！！"
+      }
+    }
+  }
 }

src/locales/lang/zh-CN/ballcat.json

@@ -12,5 +12,70 @@
   "system.tip.request.error.message": "请求错误状态码: {code}",
   "system.tip.network.error": "网络异常, 无法访问到服务器!",
   "system.tip.network.error.message": "网络异常, 请检测您的网络是否通畅!",
-  "system.tip.operate.error": "操作异常! {message}"
+  "system.tip.operate.error": "操作异常! {message}",
+
+
+  "lov": {
+    "selectedData": "已选数据"
+  },
+
+  "action": {
+    "query": "查询",
+    "reset": "重置",
+    "expand": "展开",
+    "collapse": "收起",
+    "more": "更多",
+    "create": "新建",
+    "delete": "删除",
+    "edit": "编辑",
+    "export": "导出",
+    "import": "导入",
+    "details": "详情",
+    "selectFile": "选择文件",
+    "choose": "选择",
+    "cancel": "取消"
+  },
+
+  "common": {
+    "operation": "操作",
+    "createTime": "创建时间",
+    "updateTime": "更新时间",
+    "remarks": "备注"
+  },
+
+  "message": {
+    "confirmDelete": "确认要删除吗？",
+    "pleaseEnter": "请输入",
+    "pleaseSelectFile": "请选择一个文件"
+  },
+
+  "import": {
+    "batchImport": "批量导入",
+    "downloadTemplate": "下载模板文件",
+    "whenDataExisting": "当数据已存在时",
+    "skipExisting": "跳过已有",
+    "overwriteExisting": "覆盖已有",
+    "importSuccess": "导入成功"
+  },
+
+  "i18n": {
+    "i18nData": {
+      "text": "国际化信息",
+      "languageTag": {
+        "text": "语言标签",
+        "tips": "语言标签，eg. zh-CN en-Us",
+        "required": "请输入语言标签！"
+      },
+      "code": {
+        "text": "国际化标识",
+        "tips": "国际化信息的标识",
+        "required": "请输入国际化标识！"
+      },
+      "message": {
+        "text": "文本值",
+        "tips": "国际化信息的文本",
+        "required": "请输入文本值！"
+      }
+    }
+  }
 }

src/views/i18n/LanguageText.vue

@@ -0,0 +1,111 @@
+<template>
+  <a-space direction="vertical">
+    <div v-for="language in languageList" :key="language.languageTag">
+      <a-input
+        v-model:value="language.languageTag"
+        placeholder="语言标签"
+        style="width: 25%; margin-right: 8px"
+        :disabled="true"
+      />
+      <a-input
+        v-model:value="language.message"
+        placeholder="文本值"
+        style="width: 60%; margin-right: 8px"
+      />
+      <minus-circle-outlined
+        v-if="languageList.length > 1"
+        class="dynamic-delete-button"
+        :disabled="languageList.length === 1"
+        @click="() => remove(language)"
+      />
+    </div>
+    <a-popover trigger="click">
+      <template #content>
+        <a-transfer
+          :row-key="transferKey"
+          :data-source="allLanguageList"
+          :render="transferKey"
+          :titles="['Source', 'Target']"
+          :target-keys="langTags"
+          :lazy="false"
+          @change="langTagChange"
+        />
+      </template>
+      <a-button type="dashed" style="width: 60%">
+        <PlusOutlined />
+        Add field
+      </a-button>
+    </a-popover>
+  </a-space>
+</template>
+
+<script setup lang="ts">
+import type { LanguageText } from '@/api/i18n/types'
+import { supportLanguage } from '@/config'
+
+const supportLanguageTags = Object.keys(supportLanguage)
+
+const langTags = ref<string[]>([])
+const allLanguageList = ref<LanguageText[]>([])
+const languageList = ref<LanguageText[]>([])
+
+watch(langTags.value, () => {
+  languageList.value = allLanguageList.value.filter(
+    x => langTags.value.findIndex(key => key === x.languageTag) !== -1
+  )
+})
+
+onMounted(() => {
+  allLanguageList.value = supportLanguageTags.map(languageTag => {
+    return {
+      languageTag,
+      message: ''
+    }
+  })
+  langTags.value = [...supportLanguageTags]
+})
+
+const langTagChange = (nextTargetKeys: string[]) => {
+  langTags.value = nextTargetKeys
+}
+
+const transferKey = (item: LanguageText) => item.languageTag
+
+const remove = (language: LanguageText) => {
+  const index = langTags.value.findIndex(key => key === language.languageTag)
+  langTags.value.splice(index, 1)
+}
+
+defineExpose({
+  data: languageList,
+  resetData() {
+    allLanguageList.value = supportLanguageTags.map(languageTag => {
+      return {
+        languageTag,
+        message: ''
+      }
+    })
+    langTags.value = [...supportLanguageTags]
+  }
+})
+</script>
+
+<style scoped lang="less">
+.dynamic-delete-button {
+  cursor: pointer;
+  position: relative;
+  top: 4px;
+  font-size: 24px;
+  color: #999;
+  transition: all 0.3s;
+}
+
+.dynamic-delete-button:hover {
+  color: #777;
+}
+
+.dynamic-delete-button[disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+</style>