add i18n

src/views/user/composables/edit.js

@@ -3,6 +3,7 @@ import { create, detail, update, remove } from '@/api/user'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { useRouter } from 'vue-router'
 import { list as groups } from '@/api/group'
+import { T } from '@/utils/i18n'
 
 export function useGetDetail (id) {
   let item = ref({})  //保留原始值
@@ -28,7 +29,7 @@ export function useGetDetail (id) {
     form,
     item,
     getDetail,
-    groupsList
+    groupsList,
   }
 }
 
@@ -36,9 +37,10 @@ export function useSubmit (form, id) {
   const root = ref(null)
   const router = useRouter()
   const rules = reactive({
-    username: [{ required: true, message: '用户名是必须的' }],
+    username: [{ required: true, message: T('ParamRequired', { param: T('Username') }) }],
+    group_id: [{ required: true, message: T('ParamRequired', { param: T('Group') }) }],
     // nickname: [{ required: true, message: '昵称是必须的' }],
-    status: [{ required: true, message: '请选择状态' }],
+    status: [{ required: true, message: T('ParamRequired', { param: T('Status') }) }],
   })
 
   const validate = async () => {
@@ -65,7 +67,7 @@ export function useSubmit (form, id) {
 
     const res = await submitFunc()
     if (res) {
-      ElMessage.success('操作成功')
+      ElMessage.success(T('OperationSuccess'))
       router.back()
     }
   }

src/views/user/composables/index.js

@@ -3,6 +3,7 @@ import { list, remove, changePwd } from '@/api/user'
 import { list as groups } from '@/api/group'
 import { useRouter } from 'vue-router'
 import { ElMessageBox, ElMessage } from 'element-plus'
+import { T } from '@/utils/i18n'
 
 export function useRepositories () {
 
@@ -74,15 +75,15 @@ export function useToEditOrAdd () {
     toAdd,
     toEdit,
     toTag,
-    toAddressBook
+    toAddressBook,
   }
 }
 
 export function useDel () {
   const del = async (id) => {
-    const cf = await ElMessageBox.confirm('确定删除么?', {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
+    const cf = await ElMessageBox.confirm(T('Confirm?', { param: T('Delete') }), {
+      confirmButtonText: T('Confirm'),
+      cancelButtonText: T('Cancel'),
       type: 'warning',
     }).catch(_ => false)
     if (!cf) {
@@ -99,16 +100,16 @@ export function useDel () {
 
 export function useChangePwd () {
   const changePass = async (admin) => {
-    const input = await ElMessageBox.prompt('请输入新密码', '重置密码', {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
+    const input = await ElMessageBox.prompt(T('PleaseInputNewPassword'), T('ResetPassword'), {
+      confirmButtonText: T('Confirm'),
+      cancelButtonText: T('Cancel'),
     }).catch(_ => false)
     if (!input) {
       return
     }
-    const confirm = await ElMessageBox.confirm('确定重置密码么？', {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
+    const confirm = await ElMessageBox.confirm(T('Confirm?', { param: T('ResetPassword') }), {
+      confirmButtonText: T('Confirm'),
+      cancelButtonText: T('Cancel'),
     }).catch(_ => false)
     if (!confirm) {
       return
@@ -117,7 +118,7 @@ export function useChangePwd () {
     if (!res) {
       return
     }
-    ElMessage.success('修改成功')
+    ElMessage.success(T('OperationSuccess'))
   }
 
   return { changePass }

src/views/user/edit.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="form-card">
     <el-form ref="root" label-width="120px" :model="form" :rules="rules">
-      <el-form-item label="用户名" prop="username">
+      <el-form-item :label="T('Username')" prop="username">
         <el-input v-model="form.username"></el-input>
       </el-form-item>
-      <el-form-item label="昵称" prop="nickname">
+      <el-form-item :label="T('Nickname')" prop="nickname">
         <el-input v-model="form.nickname"></el-input>
       </el-form-item>
-      <el-form-item label="小组" prop="group_id">
-        <el-select v-model="form.group_id" placeholder="请选择小组">
+      <el-form-item :label="T('Group')" prop="group_id">
+        <el-select v-model="form.group_id">
           <el-option
               v-for="item in groupsList"
               :key="item.id"
@@ -17,57 +17,37 @@
           ></el-option>
         </el-select>
       </el-form-item>
-      <el-form-item label="是否是管理员" prop="is_admin">
+      <el-form-item :label="T('IsAdmin')" prop="is_admin">
         <el-switch v-model="form.is_admin"
                    :active-value="true"
                    :inactive-value="false"
         ></el-switch>
       </el-form-item>
-      <el-form-item label="状态" prop="status">
+      <el-form-item :label="T('Status')" prop="status">
         <el-switch v-model="form.status"
                    :active-value="ENABLE_STATUS"
                    :inactive-value="DISABLE_STATUS"
         ></el-switch>
       </el-form-item>
       <el-form-item>
-        <el-button @click="cancel">取消</el-button>
-        <el-button @click="submit" type="primary">提交</el-button>
+        <el-button @click="cancel">{{ T('Cancel') }}</el-button>
+        <el-button @click="submit" type="primary">{{ T('Submit') }}</el-button>
       </el-form-item>
     </el-form>
   </div>
 </template>
 
-<script>
-  import { defineComponent, toRef } from 'vue'
+<script setup>
   import { useRoute } from 'vue-router'
   import { useGetDetail, useSubmit } from '@/views/user/composables/edit'
   import { ENABLE_STATUS, DISABLE_STATUS } from '@/utils/common_options'
+  import { T } from '@/utils/i18n'
 
-  export default defineComponent({
-    name: 'UserEdit',
-    props: {},
-    setup (props, context) {
+  const route = useRoute()
+  const { form, item, getDetail, groupsList } = useGetDetail(route.params.id)
 
-      const route = useRoute()
-      const { form, item, getDetail, groupsList } = useGetDetail(route.params.id)
+  const { root, rules, validate, submit, cancel } = useSubmit(form, route.params.id)
 
-      const { root, rules, validate, submit, cancel } = useSubmit(form, route.params.id)
-
-      return {
-        form,
-        item,
-        getDetail,
-
-        rules,
-        validate,
-        root,
-        submit,
-        cancel,
-        groupsList,
-        ENABLE_STATUS, DISABLE_STATUS,
-      }
-    },
-  })
 </script>
 
 <style lang="scss" scoped>

src/views/user/index.vue

@@ -1,36 +1,36 @@
 <template>
   <div>
     <el-card class="list-query" shadow="hover">
-      <el-form inline label-width="60px">
-        <el-form-item label="用户名">
+      <el-form inline label-width="80px">
+        <el-form-item :label="T('Username')">
           <el-input v-model="listQuery.username"></el-input>
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" @click="handlerQuery">筛选</el-button>
-          <el-button type="danger" @click="toAdd">添加</el-button>
+          <el-button type="primary" @click="handlerQuery">{{ T('Filter') }}</el-button>
+          <el-button type="danger" @click="toAdd">{{ T('Add') }}</el-button>
         </el-form-item>
       </el-form>
     </el-card>
     <el-card class="list-body" shadow="hover">
       <el-table :data="listRes.list" v-loading="listRes.loading" border>
         <el-table-column prop="id" label="id" align="center"></el-table-column>
-        <el-table-column prop="username" label="用户名" align="center"/>
-        <el-table-column prop="nickname" label="昵称" align="center"/>
-        <el-table-column label="所在小组" align="center">
+        <el-table-column prop="username" :label="T('Username')" align="center"/>
+        <el-table-column prop="nickname" :label="T('Nickname')" align="center"/>
+        <el-table-column :label="T('Group')" align="center">
           <template #default="{row}">
             <span v-if="row.group_id"> <el-tag>{{ listRes.groups?.find(g => g.id === row.group_id)?.name }} </el-tag> </span>
-            <span v-else> 未分组 </span>
+            <span v-else> - </span>
           </template>
         </el-table-column>
-        <el-table-column prop="created_at" label="创建时间" align="center"/>
-        <el-table-column prop="updated_at" label="更新时间" align="center"/>
-        <el-table-column label="操作" align="center" width="550">
+        <el-table-column prop="created_at" :label="T('CreatedAt')" align="center"/>
+        <el-table-column prop="updated_at" :label="T('UpdatedAt')" align="center"/>
+        <el-table-column :label="T('Actions')" align="center" width="650">
           <template #default="{row}">
-            <el-button @click="toTag(row)">他的标签</el-button>
-            <el-button @click="toAddressBook(row)">他的地址簿</el-button>
-            <el-button @click="toEdit(row)">编辑</el-button>
-            <el-button type="warning" @click="changePass(row)">重置密码</el-button>
-            <el-button type="danger" @click="remove(row)">删除</el-button>
+            <el-button @click="toTag(row)">{{ T('UserTags') }}</el-button>
+            <el-button @click="toAddressBook(row)">{{ T('UserAddressBook') }}</el-button>
+            <el-button @click="toEdit(row)">{{ T('Edit') }}</el-button>
+            <el-button type="warning" @click="changePass(row)">{{ T('ResetPassword') }}</el-button>
+            <el-button type="danger" @click="remove(row)">{{ T('Delete') }}</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -49,7 +49,7 @@
 
 <script setup>
   import { useRepositories, useDel, useToEditOrAdd, useChangePwd } from '@/views/user/composables'
-
+  import { T } from '@/utils/i18n'
   //列表
   const {
     listRes,