Translate user account info page

packages/ui/certd-client/src/locales/langs/en-US/authentication.ts

@@ -77,4 +77,8 @@ export default {
 	newPasswordNotSameOld: "The new password cannot be the same as the old password",
 	enterPasswordAgain: "Please enter the password again",
 	passwordsNotMatch: "The two passwords do not match!",
+	avatar: "Avatar",
+	nickName: "Nickname",
+	phoneNumber: "Phone Number",
+	changePassword: "Change Password",
 }

packages/ui/certd-client/src/locales/langs/en-US/certd.ts

@@ -289,4 +289,15 @@ export default {
 	step3: "3. Enter the verification code",
 	inputVerifyCode: "Please enter the verification code",
 	cancel: "Cancel",
+	authorizationManagement: "Authorization Management",
+	manageThirdPartyAuth: "Manage third-party system authorization information",
+	name: "Name",
+	pleaseEnterName: "Please enter the name",
+	nameHelper: "Fill in as you like, useful to distinguish when multiple authorizations of the same type exist",
+	level: "Level",
+	system: "System",
+	usera: "User",
+	nickName: "Nickname",
+	max50Chars: "Maximum 50 characters",
+	myInfo: "My Information",
 };

packages/ui/certd-client/src/locales/langs/zh-CN/authentication.ts

@@ -78,4 +78,8 @@ export default {
 	newPasswordNotSameOld: "新密码不能和旧密码相同",
 	enterPasswordAgain: "请再次输入密码",
 	passwordsNotMatch: "两次输入密码不一致!",
+	avatar: "头像",
+	nickName: "昵称",
+	phoneNumber: "手机号",
+	changePassword: "修改密码",
 }

packages/ui/certd-client/src/locales/langs/zh-CN/certd.ts

@@ -295,4 +295,15 @@ export default {
 	step3: "3. 输入验证码",
 	inputVerifyCode: "请输入验证码",
 	cancel: "取消",
+	authorizationManagement: "授权管理",
+	manageThirdPartyAuth: "管理第三方系统授权信息",
+	name: "名称",
+	pleaseEnterName: "请填写名称",
+	nameHelper: "随便填，当多个相同类型的授权时，便于区分",
+	level: "级别",
+	system: "系统",
+	usera: "用户",
+	nickName: "昵称",
+	max50Chars: "最大50个字符",
+	myInfo: "我的信息",
 };

packages/ui/certd-client/src/views/certd/access/access-selector/access/crud.tsx

@@ -2,141 +2,143 @@
 import { ref } from "vue";
 import { getCommonColumnDefine } from "/@/views/certd/access/common";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+import { useI18n } from "vue-i18n";
 
 export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
-  const { crudBinding } = crudExpose;
-  const { props, ctx, api } = context;
-  const lastResRef = ref();
-  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
-    return await context.api.GetList(query);
-  };
-  const editRequest = async (req: EditReq) => {
-    const { form, row } = req;
-    form.id = row.id;
-    form.type = props.type;
-    const res = await context.api.UpdateObj(form);
-    lastResRef.value = res;
-    return res;
-  };
-  const delRequest = async (req: DelReq) => {
-    const { row } = req;
-    return await context.api.DelObj(row.id);
-  };
+	const { t } = useI18n();
+	const { crudBinding } = crudExpose;
+	const { props, ctx, api } = context;
+	const lastResRef = ref();
+	const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
+		return await context.api.GetList(query);
+	};
+	const editRequest = async (req: EditReq) => {
+		const { form, row } = req;
+		form.id = row.id;
+		form.type = props.type;
+		const res = await context.api.UpdateObj(form);
+		lastResRef.value = res;
+		return res;
+	};
+	const delRequest = async (req: DelReq) => {
+		const { row } = req;
+		return await context.api.DelObj(row.id);
+	};
 
-  const addRequest = async (req: AddReq) => {
-    const { form } = req;
-    form.type = props.type;
-    const res = await context.api.AddObj(form);
-    lastResRef.value = res;
-    return res;
-  };
+	const addRequest = async (req: AddReq) => {
+		const { form } = req;
+		form.type = props.type;
+		const res = await context.api.AddObj(form);
+		lastResRef.value = res;
+		return res;
+	};
 
-  const selectedRowKey = ref([props.modelValue]);
+	const selectedRowKey = ref([props.modelValue]);
 
-  const onSelectChange = (changed: any) => {
-    selectedRowKey.value = changed;
-    ctx.emit("update:modelValue", changed[0]);
-  };
+	const onSelectChange = (changed: any) => {
+		selectedRowKey.value = changed;
+		ctx.emit("update:modelValue", changed[0]);
+	};
 
-  const typeRef = ref("aliyun");
-  context.typeRef = typeRef;
-  const commonColumnsDefine = getCommonColumnDefine(crudExpose, typeRef, api);
-  commonColumnsDefine.type.form.component.disabled = true;
-  return {
-    typeRef,
-    crudOptions: {
-      request: {
-        pageRequest,
-        addRequest,
-        editRequest,
-        delRequest,
-      },
-      toolbar: {
-        show: false,
-      },
-      search: {
-        show: false,
-      },
-      form: {
-        wrapper: {
-          width: "1050px",
-        },
-      },
-      rowHandle: {
-        width: 200,
-      },
-      table: {
-        scroll: {
-          x: 800,
-        },
-        rowSelection: {
-          type: "radio",
-          selectedRowKeys: selectedRowKey,
-          onChange: onSelectChange,
-        },
-        customRow: (record: any) => {
-          return {
-            onClick: () => {
-              onSelectChange([record.id]);
-            }, // 点击行
-          };
-        },
-      },
-      columns: {
-        id: {
-          title: "ID",
-          key: "id",
-          type: "number",
-          column: {
-            width: 50,
-          },
-          form: {
-            show: false,
-          },
-        },
-        name: {
-          title: "名称",
-          search: {
-            show: true,
-          },
-          type: ["text"],
-          form: {
-            rules: [{ required: true, message: "请填写名称" }],
-            helper: "随便填，当多个相同类型的授权时，便于区分",
-          },
-          column: {
-            width: 200,
-          },
-        },
-        from: {
-          title: "级别",
-          type: "dict-select",
-          dict: dict({
-            data: [
-              { label: "系统", value: "sys" },
-              { label: "用户", value: "user" },
-            ],
-          }),
-          search: {
-            show: false,
-          },
-          form: {
-            show: false,
-          },
-          column: {
-            width: 100,
-            align: "center",
-            component: {
-              color: "auto",
-            },
-            order: 10,
-          },
-          valueBuilder: ({ row, key, value }) => {
-            row[key] = row.userId > 0 ? "user" : "sys";
-          },
-        },
-        ...commonColumnsDefine,
-      },
-    },
-  };
+	const typeRef = ref("aliyun");
+	context.typeRef = typeRef;
+	const commonColumnsDefine = getCommonColumnDefine(crudExpose, typeRef, api);
+	commonColumnsDefine.type.form.component.disabled = true;
+	return {
+		typeRef,
+		crudOptions: {
+			request: {
+				pageRequest,
+				addRequest,
+				editRequest,
+				delRequest,
+			},
+			toolbar: {
+				show: false,
+			},
+			search: {
+				show: false,
+			},
+			form: {
+				wrapper: {
+					width: "1050px",
+				},
+			},
+			rowHandle: {
+				width: 200,
+			},
+			table: {
+				scroll: {
+					x: 800,
+				},
+				rowSelection: {
+					type: "radio",
+					selectedRowKeys: selectedRowKey,
+					onChange: onSelectChange,
+				},
+				customRow: (record: any) => {
+					return {
+						onClick: () => {
+							onSelectChange([record.id]);
+						}, // 点击行
+					};
+				},
+			},
+			columns: {
+				id: {
+					title: "ID",
+					key: "id",
+					type: "number",
+					column: {
+						width: 50,
+					},
+					form: {
+						show: false,
+					},
+				},
+				name: {
+					title: t("certd.name"),
+					search: {
+						show: true,
+					},
+					type: ["text"],
+					form: {
+						rules: [{ required: true, message: t("certd.pleaseEnterName") }],
+						helper: t("certd.nameHelper"),
+					},
+					column: {
+						width: 200,
+					},
+				},
+				from: {
+					title: t("certd.level"),
+					type: "dict-select",
+					dict: dict({
+						data: [
+							{ label: t("certd.system"), value: "sys" },
+							{ label: t("certd.usera"), value: "user" },
+						],
+					}),
+					search: {
+						show: false,
+					},
+					form: {
+						show: false,
+					},
+					column: {
+						width: 100,
+						align: "center",
+						component: {
+							color: "auto",
+						},
+						order: 10,
+					},
+					valueBuilder: ({ row, key, value }) => {
+						row[key] = row.userId > 0 ? "user" : "sys";
+					},
+				},
+				...commonColumnsDefine,
+			},
+		},
+	};
 }

packages/ui/certd-client/src/views/certd/access/index.vue

@@ -1,13 +1,13 @@
 <template>
-  <fs-page>
-    <template #header>
-      <div class="title">
-        授权管理
-        <span class="sub">管理第三方系统授权信息</span>
-      </div>
-    </template>
-    <fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
-  </fs-page>
+	<fs-page>
+		<template #header>
+			<div class="title">
+				{{ t("certd.authorizationManagement") }}
+				<span class="sub">{{ t("certd.manageThirdPartyAuth") }}</span>
+			</div>
+		</template>
+		<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
+	</fs-page>
 </template>
 
 <script lang="ts">
@@ -15,25 +15,29 @@ import { defineComponent, onActivated, onMounted } from "vue";
 import { useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
 import { createAccessApi } from "/@/views/certd/access/api";
+import { useI18n } from "vue-i18n";
+
 
 export default defineComponent({
-  name: "AccessManager",
-  setup() {
-    const api = createAccessApi("user");
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: { api } });
+	name: "AccessManager",
+	setup() {
+		const { t } = useI18n();
+		const api = createAccessApi("user");
+		const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: { api } });
 
-    // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
-    });
-    onActivated(() => {
-      crudExpose.doRefresh();
-    });
+		// 页面打开后获取列表数据
+		onMounted(() => {
+			crudExpose.doRefresh();
+		});
+		onActivated(() => {
+			crudExpose.doRefresh();
+		});
 
-    return {
-      crudBinding,
-      crudRef,
-    };
-  },
+		return {
+			crudBinding,
+			crudRef,
+			t
+		};
+	},
 });
 </script>

packages/ui/certd-client/src/views/certd/mine/change-password-button.vue

@@ -1,7 +1,7 @@
 <template>
-  <a-button v-if="showButton" type="primary" @click="open">
-    {{ $t("passwordForm.changePasswordButton") }}
-  </a-button>
+	<a-button v-if="showButton" type="primary" @click="open">
+		{{ $t("authentication.changePasswordButton") }}
+	</a-button>
 </template>
 
 <script setup lang="ts">
@@ -15,100 +15,100 @@ import { notification } from "ant-design-vue";
 import { useUserStore } from "/@/store/user";
 
 defineProps<{
-  showButton: boolean;
+	showButton: boolean;
 }>();
 
 let passwordFormRef = ref();
 
 const validatePass1 = async (rule: any, value: any) => {
-  if (value === "") {
-    throw new Error(t("passwordForm.enterPassword"));
-  }
-  const formData = passwordFormRef.value.getFormData();
-  if (formData.confirmNewPassword !== "") {
-    passwordFormRef.value.formRef.formRef.validateFields(["confirmNewPassword"]);
-  }
-  if (formData.password === formData.newPassword) {
-    throw new Error(t("passwordForm.newPasswordNotSameOld"));
-  }
+	if (value === "") {
+		throw new Error(t("authentication.enterPassword"));
+	}
+	const formData = passwordFormRef.value.getFormData();
+	if (formData.confirmNewPassword !== "") {
+		passwordFormRef.value.formRef.formRef.validateFields(["confirmNewPassword"]);
+	}
+	if (formData.password === formData.newPassword) {
+		throw new Error(t("authentication.newPasswordNotSameOld"));
+	}
 };
 const validatePass2 = async (rule: any, value: any) => {
-  if (value === "") {
-    throw new Error(t("passwordForm.enterPasswordAgain"));
-  } else if (value !== passwordFormRef.value.getFormData().newPassword) {
-    throw new Error(t("passwordForm.passwordsNotMatch"));
-  }
+	if (value === "") {
+		throw new Error(t("authentication.enterPasswordAgain"));
+	} else if (value !== passwordFormRef.value.getFormData().newPassword) {
+		throw new Error(t("authentication.passwordsNotMatch"));
+	}
 };
 
 const userStore = useUserStore();
 const { openDialog } = useFormWrapper();
 const { buildFormOptions } = useColumns();
 const passwordFormOptions: CrudOptions = {
-  form: {
-    col: {
-      span: 24,
-    },
-    wrapper: {
-      title: t("passwordForm.title"),
-      width: "500px",
-    },
-    async doSubmit({ form }) {
-      await api.changePassword(form);
-      //重新加载用户信息
-      await userStore.loadUserInfo();
-    },
-    async afterSubmit() {
-      notification.success({ message: t("passwordForm.successMessage") });
-    },
-  },
-  columns: {
-    password: {
-      title: t("passwordForm.oldPassword"),
-      type: "password",
-      form: {
-        rules: [{ required: true, message: t("passwordForm.oldPasswordRequired") }],
-      },
-    },
-    newPassword: {
-      title: t("passwordForm.newPassword"),
-      type: "password",
-      form: {
-        rules: [
-          { required: true, message: t("passwordForm.newPasswordRequired") },
-          //@ts-ignore
-          { validator: validatePass1, trigger: "blur" },
-        ],
-      },
-    },
-    confirmNewPassword: {
-      title: t("passwordForm.confirmNewPassword"),
-      type: "password",
-      form: {
-        rules: [
-          {
-            required: true,
-            message: t("passwordForm.confirmNewPasswordRequired"),
-          },
-          //@ts-ignore
-          { validator: validatePass2, trigger: "blur" },
-        ],
-      },
-    },
-  },
+	form: {
+		col: {
+			span: 24,
+		},
+		wrapper: {
+			title: t("authentication.title"),
+			width: "500px",
+		},
+		async doSubmit({ form }) {
+			await api.changePassword(form);
+			//重新加载用户信息
+			await userStore.loadUserInfo();
+		},
+		async afterSubmit() {
+			notification.success({ message: t("authentication.successMessage") });
+		},
+	},
+	columns: {
+		password: {
+			title: t("authentication.oldPassword"),
+			type: "password",
+			form: {
+				rules: [{ required: true, message: t("authentication.oldPasswordRequired") }],
+			},
+		},
+		newPassword: {
+			title: t("authentication.newPassword"),
+			type: "password",
+			form: {
+				rules: [
+					{ required: true, message: t("authentication.newPasswordRequired") },
+					//@ts-ignore
+					{ validator: validatePass1, trigger: "blur" },
+				],
+			},
+		},
+		confirmNewPassword: {
+			title: t("authentication.confirmNewPassword"),
+			type: "password",
+			form: {
+				rules: [
+					{
+						required: true,
+						message: t("authentication.confirmNewPasswordRequired"),
+					},
+					//@ts-ignore
+					{ validator: validatePass2, trigger: "blur" },
+				],
+			},
+		},
+	},
 };
 
 async function open(opts: { password: "" }) {
-  const formOptions = buildFormOptions(passwordFormOptions);
-  formOptions.newInstance = true; //新实例打开
-  passwordFormRef.value = await openDialog(formOptions);
-  passwordFormRef.value.setFormData({
-    password: opts.password,
-  });
-  console.log(passwordFormRef.value);
+	const formOptions = buildFormOptions(passwordFormOptions);
+	formOptions.newInstance = true; //新实例打开
+	passwordFormRef.value = await openDialog(formOptions);
+	passwordFormRef.value.setFormData({
+		password: opts.password,
+	});
+	console.log(passwordFormRef.value);
 }
 
 const scope = ref({
-  open: open,
+	open: open,
 });
 
 defineExpose(scope.value);

packages/ui/certd-client/src/views/certd/mine/user-profile.vue

@@ -1,41 +1,50 @@
 <template>
-  <fs-page class="page-user-profile">
-    <template #header>
-      <div class="title">我的信息</div>
-    </template>
-    <div class="p-10">
-      <a-descriptions title="" bordered>
-        <a-descriptions-item label="用户名">{{ userInfo.username }}</a-descriptions-item>
-        <a-descriptions-item label="头像">
-          <a-avatar v-if="userInfo.avatar" size="large" :src="'api/basic/file/download?&key=' + userInfo.avatar" style="background-color: #eee"> </a-avatar>
-          <a-avatar v-else size="large" style="background-color: #00b4f5">
-            {{ userInfo.username }}
-          </a-avatar>
-        </a-descriptions-item>
-        <a-descriptions-item label="昵称">{{ userInfo.nickName }}</a-descriptions-item>
-        <a-descriptions-item label="邮箱">{{ userInfo.email }}</a-descriptions-item>
-        <a-descriptions-item label="手机号">{{ userInfo.phoneCode }}{{ userInfo.mobile }}</a-descriptions-item>
-        <a-descriptions-item label="修改密码">
-          <change-password-button :show-button="true"> </change-password-button>
-        </a-descriptions-item>
-      </a-descriptions>
-    </div>
-  </fs-page>
+	<fs-page class="page-user-profile">
+		<template #header>
+			<div class="title">{{ t("certd.myInfo") }}</div>
+		</template>
+		<div class="p-10">
+			<a-descriptions title="" bordered :column="1">
+				<a-descriptions-item :label="t('authentication.username')">{{ userInfo.username }}</a-descriptions-item>
+				<a-descriptions-item :label="t('authentication.avatar')">
+					<a-avatar v-if="userInfo.avatar" size="large"
+						:src="'api/basic/file/download?&key=' + userInfo.avatar" style="background-color: #eee">
+					</a-avatar>
+					<a-avatar v-else size="large" style="background-color: #00b4f5">
+						{{ userInfo.username }}
+					</a-avatar>
+				</a-descriptions-item>
+				<a-descriptions-item :label="t('authentication.nickName')">{{ userInfo.nickName }}</a-descriptions-item>
+				<a-descriptions-item :label="t('authentication.email')">{{ userInfo.email }}</a-descriptions-item>
+				<a-descriptions-item :label="t('authentication.phoneNumber')">{{ userInfo.phoneCode }}{{ userInfo.mobile
+					}}</a-descriptions-item>
+				<a-descriptions-item :label="t('authentication.changePassword')">
+					<change-password-button :show-button="true"> </change-password-button>
+				</a-descriptions-item>
+			</a-descriptions>
+
+		</div>
+	</fs-page>
 </template>
 
+
+
 <script lang="ts" setup>
 import * as api from "./api";
 import { Ref, ref } from "vue";
 import ChangePasswordButton from "/@/views/certd/mine/change-password-button.vue";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
 
 defineOptions({
-  name: "UserProfile"
+	name: "UserProfile"
 });
 
 const userInfo: Ref = ref({});
 
 const getUserInfo = async () => {
-  userInfo.value = await api.getMineInfo();
+	userInfo.value = await api.getMineInfo();
 };
 getUserInfo();
 </script>