feat: 删除无用代码 修改登录页翻译

frontend/src/hooks/interface/index.ts

@@ -1,27 +1,3 @@
-export namespace Table {
-    export interface Pageable {
-        pageNum: number;
-        pageSize: number;
-        total: number;
-    }
-    export interface TableStateProps {
-        tableData: any[];
-        pageable: Pageable;
-        searchParam: {
-            [key: string]: any;
-        };
-        searchInitParam: {
-            [key: string]: any;
-        };
-        totalParam: {
-            [key: string]: any;
-        };
-        icon?: {
-            [key: string]: any;
-        };
-    }
-}
-
 export namespace HandleData {
     export type MessageType = '' | 'success' | 'warning' | 'info' | 'error';
 }

frontend/src/hooks/useSelection.ts

@@ -1,43 +0,0 @@
-import { ref, computed } from 'vue';
-
-/**
- * @description 表格多选数据操作
- * */
-export const useSelection = () => {
-    // 是否选中数据
-    const isSelected = ref<boolean>(false);
-    // 选中的数据列表
-    const selectedList = ref([]);
-
-    // 当前选中的所有ids(数组)，可根据项目自行配置id字段
-    const selectedListIds = computed((): string[] => {
-        let ids: string[] = [];
-        selectedList.value.forEach((item) => {
-            ids.push(item['id']);
-        });
-        return ids;
-    });
-
-    // 获取行数据的 Key,用来优化 Table 的渲染;在使用跨页多选时,该属性是必填的
-    const getRowKeys = (row: { id: string }) => {
-        return row.id;
-    };
-
-    /**
-     * @description 多选操作
-     * @param {Array} rowArr 当前选择的所有数据
-     * @return void
-     */
-    const selectionChange = (rowArr: any) => {
-        rowArr.length === 0 ? (isSelected.value = false) : (isSelected.value = true);
-        selectedList.value = rowArr;
-    };
-
-    return {
-        isSelected,
-        selectedList,
-        selectedListIds,
-        selectionChange,
-        getRowKeys,
-    };
-};

frontend/src/hooks/useTable.ts

@@ -1,157 +0,0 @@
-import { Table } from './interface';
-import { reactive, computed, onMounted, toRefs } from 'vue';
-
-/**
- * @description table 页面操作方法封装
- * @param {Function} api 获取表格数据 api 方法(必传)
- * @param {Object} initParam 获取数据初始化参数(非必传，默认为{})
- * @param {Boolean} isPageable 是否有分页(非必传，默认为true)
- * @param {Function} dataCallBack 对后台返回的数据进行处理的方法(非必传)
- * */
-export const useTable = (
-    api: (params: any) => Promise<any>,
-    initParam: object = {},
-    isPageable: boolean = true,
-    dataCallBack?: (data: any) => any,
-) => {
-    const state = reactive<Table.TableStateProps>({
-        // 表格数据
-        tableData: [],
-        // 分页数据
-        pageable: {
-            // 当前页数
-            pageNum: 1,
-            // 每页显示条数
-            pageSize: 10,
-            // 总条数
-            total: 0,
-        },
-        // 查询参数(只包括查询)
-        searchParam: {},
-        // 初始化默认的查询参数
-        searchInitParam: {},
-        // 总参数(包含分页和查询参数)
-        totalParam: {},
-    });
-
-    /**
-     * @description 分页查询参数(只包括分页和表格字段排序,其他排序方式可自行配置)
-     * */
-    const pageParam = computed({
-        get: () => {
-            return {
-                pageNum: state.pageable.pageNum,
-                pageSize: state.pageable.pageSize,
-            };
-        },
-        set: (newVal: any) => {
-            console.log('我是分页更新之后的值', newVal);
-        },
-    });
-
-    // 初始化的时候需要做的事情就是 设置表单查询默认值 && 获取表格数据(reset函数的作用刚好是这两个功能)
-    onMounted(() => {
-        reset();
-    });
-
-    /**
-     * @description 获取表格数据
-     * @return void
-     * */
-    const getTableList = async () => {
-        try {
-            // 先把初始化参数和分页参数放到总参数里面
-            Object.assign(state.totalParam, initParam, isPageable ? pageParam.value : {});
-            let { data } = await api(state.totalParam);
-            dataCallBack && (data = dataCallBack(data));
-            state.tableData = isPageable ? data.datalist : data;
-            // 解构后台返回的分页数据 (如果有分页更新分页信息)
-            const { pageNum, pageSize, total } = data;
-            isPageable && updatePageable({ pageNum, pageSize, total });
-        } catch (error) {
-            console.log(error);
-        }
-    };
-
-    /**
-     * @description 更新查询参数
-     * @return void
-     * */
-    const updatedTotalParam = () => {
-        state.totalParam = {};
-        // 处理查询参数，可以给查询参数加自定义前缀操作
-        let nowSearchParam: { [propName: string]: any } = {};
-        // 防止手动清空输入框携带参数（这里可以自定义查询参数前缀）
-        for (let key in state.searchParam) {
-            // * 某些情况下参数为 false/0 也应该携带参数
-            if (state.searchParam[key] || state.searchParam[key] === false || state.searchParam[key] === 0) {
-                nowSearchParam[key] = state.searchParam[key];
-            }
-        }
-        Object.assign(state.totalParam, nowSearchParam, isPageable ? pageParam.value : {});
-    };
-
-    /**
-     * @description 更新分页信息
-     * @param {Object} resPageable 后台返回的分页数据
-     * @return void
-     * */
-    const updatePageable = (resPageable: Table.Pageable) => {
-        Object.assign(state.pageable, resPageable);
-    };
-
-    /**
-     * @description 表格数据查询
-     * @return void
-     * */
-    const search = () => {
-        state.pageable.pageNum = 1;
-        updatedTotalParam();
-        getTableList();
-    };
-
-    /**
-     * @description 表格数据重置
-     * @return void
-     * */
-    const reset = () => {
-        state.pageable.pageNum = 1;
-        state.searchParam = {};
-        // 重置搜索表单的时，如果有默认搜索参数，则重置默认的搜索参数
-        Object.keys(state.searchInitParam).forEach((key) => {
-            state.searchParam[key] = state.searchInitParam[key];
-        });
-        updatedTotalParam();
-        getTableList();
-    };
-
-    /**
-     * @description 每页条数改变
-     * @param {Number} val 当前条数
-     * @return void
-     * */
-    const handleSizeChange = (val: number) => {
-        state.pageable.pageNum = 1;
-        state.pageable.pageSize = val;
-        getTableList();
-    };
-
-    /**
-     * @description 当前页改变
-     * @param {Number} val 当前页
-     * @return void
-     * */
-    const handleCurrentChange = (val: number) => {
-        state.pageable.pageNum = val;
-        getTableList();
-    };
-
-    return {
-        ...toRefs(state),
-        getTableList,
-        search,
-        reset,
-        handleSizeChange,
-        handleCurrentChange,
-    };
-};

frontend/src/hooks/useTime.ts

@@ -1,44 +0,0 @@
-import { ref } from 'vue';
-
-/**
- * @description 获取本地时间
- */
-export const useTime = () => {
-    const year = ref(0); // 年份
-    const month = ref(0); // 月份
-    const week = ref(''); // 星期几
-    const day = ref(0); // 天数
-    const hour = ref<number | string>(0); // 小时
-    const minute = ref<number | string>(0); // 分钟
-    const second = ref<number | string>(0); // 秒
-    const nowTime = ref<string>(''); // 当前时间
-
-    // 更新时间
-    const updateTime = () => {
-        const date = new Date();
-        year.value = date.getFullYear();
-        month.value = date.getMonth() + 1;
-        week.value = '日一二三四五六'.charAt(date.getDay());
-        day.value = date.getDate();
-        hour.value =
-            (date.getHours() + '')?.padStart(2, '0') ||
-            new Intl.NumberFormat(undefined, {
-                minimumIntegerDigits: 2,
-            }).format(date.getHours());
-        minute.value =
-            (date.getMinutes() + '')?.padStart(2, '0') ||
-            new Intl.NumberFormat(undefined, {
-                minimumIntegerDigits: 2,
-            }).format(date.getMinutes());
-        second.value =
-            (date.getSeconds() + '')?.padStart(2, '0') ||
-            new Intl.NumberFormat(undefined, {
-                minimumIntegerDigits: 2,
-            }).format(date.getSeconds());
-        nowTime.value = `${year.value}年${month.value}月${day.value} ${hour.value}:${minute.value}:${second.value}`;
-    };
-
-    updateTime();
-
-    return { year, month, day, hour, minute, second, week, nowTime };
-};

frontend/src/lang/modules/en.ts

@@ -6,6 +6,8 @@ export default {
             edit: 'Edit',
             confirm: 'Confirm',
             cancel: 'Cancel',
+            reset: 'Reset',
+            login: 'Login',
         },
         table: {
             name: 'Name',
@@ -17,6 +19,14 @@ export default {
             delete: 'This operation cannot be rolled back. Do you want to continue',
             title: 'Delete',
             deleteSuccess: 'Delete Success',
+            loginSuccss: 'Login Success',
+        },
+        login: {
+            captchaHelper: 'Please enter the verification code',
+        },
+        rule: {
+            username: 'Please enter a username',
+            password: 'Please enter a password',
         },
     },
     menu: {

frontend/src/lang/modules/zh.ts

@@ -6,6 +6,8 @@ export default {
             edit: '编辑',
             confirm: '确认',
             cancel: '取消',
+            reset: '重置',
+            login: '登陆',
         },
         table: {
             name: '名称',
@@ -17,6 +19,14 @@ export default {
             delete: '此操作不可回滚,是否继续',
             title: '删除',
             deleteSuccess: '删除成功',
+            loginSuccss: '登陆成功',
+        },
+        login: {
+            captchaHelper: '请输入验证码',
+        },
+        rule: {
+            username: '请输入用户名',
+            password: '请输入密码',
         },
     },
     menu: {

frontend/src/views/demos/table/index.vue

@@ -35,7 +35,6 @@ import { User } from '@/api/interface/user';
 import { deleteUser, getUserList } from '@/api/modules/user';
 import { onMounted, reactive, ref } from '@vue/runtime-core';
 import { useDeleteData } from '@/hooks/useDeleteData';
-import i18n from '@/lang';
 const data = ref();
 const selects = ref<any>([]);
 const paginationConfig = reactive({
@@ -81,7 +80,7 @@ const batchDelete = async () => {
     selects.value.forEach((item: User.User) => {
         ids.push(item.ID);
     });
-    await useDeleteData(deleteUser, { ids: ids }, i18n.global.t('commons.msg.delete'));
+    await useDeleteData(deleteUser, { ids: ids }, 'commons.msg.delete');
 };
 
 const search = async () => {

frontend/src/views/login/components/LoginForm.vue

@@ -1,7 +1,7 @@
 <template>
     <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" size="large">
         <el-form-item prop="username">
-            <el-input v-model="loginForm.name" placeholder="用户名：admin / user">
+            <el-input v-model="loginForm.name">
                 <template #prefix>
                     <el-icon class="el-input__icon">
                         <user />
@@ -10,13 +10,7 @@
             </el-input>
         </el-form-item>
         <el-form-item prop="password">
-            <el-input
-                type="password"
-                v-model="loginForm.password"
-                placeholder="密码：123456"
-                show-password
-                autocomplete="new-password"
-            >
+            <el-input type="password" v-model="loginForm.password" show-password autocomplete="new-password">
                 <template #prefix>
                     <el-icon class="el-input__icon">
                         <lock />
@@ -27,15 +21,22 @@
     </el-form>
     <el-form-item prop="captcha">
         <div class="vPicBox">
-            <el-input v-model="loginForm.captcha" placeholder="请输入验证码" style="width: 60%" />
+            <el-input v-model="loginForm.captcha" :placeholder="$t('commons.login.captchaHelper')" style="width: 60%" />
             <div class="vPic">
-                <img v-if="captcha.imagePath" :src="captcha.imagePath" alt="请输入验证码" @click="loginVerify()" />
+                <img
+                    v-if="captcha.imagePath"
+                    :src="captcha.imagePath"
+                    :alt="$t('commons.login.captchaHelper')"
+                    @click="loginVerify()"
+                />
             </div>
         </div>
     </el-form-item>
     <div class="login-btn">
-        <el-button round @click="resetForm(loginFormRef)" size="large">重置</el-button>
-        <el-button round @click="login(loginFormRef)" size="large" type="primary" :loading="loading"> 登录 </el-button>
+        <el-button round @click="resetForm(loginFormRef)" size="large">{{ $t('commons.button.reset') }}</el-button>
+        <el-button round @click="login(loginFormRef)" size="large" type="primary" :loading="loading">
+            {{ $t('commons.button.login') }}
+        </el-button>
     </div>
 </template>
 
@@ -48,6 +49,7 @@ import { ElMessage } from 'element-plus';
 import { loginApi, getCaptcha } from '@/api/modules/login';
 import { GlobalStore } from '@/store';
 import { MenuStore } from '@/store/modules/menu';
+import i18n from '@/lang';
 
 const globalStore = GlobalStore();
 const menuStore = MenuStore();
@@ -56,8 +58,8 @@ const menuStore = MenuStore();
 type FormInstance = InstanceType<typeof ElForm>;
 const loginFormRef = ref<FormInstance>();
 const loginRules = reactive({
-    name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
-    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
+    name: [{ required: true, message: i18n.global.t('commons.rule.username'), trigger: 'blur' }],
+    password: [{ required: true, message: i18n.global.t('commons.rule.password'), trigger: 'blur' }],
 });
 
 // 登录表单数据
@@ -95,7 +97,7 @@ const login = (formEl: FormInstance | undefined) => {
             globalStore.setUserInfo(res.data.name);
             globalStore.setLogStatus(true);
             menuStore.setMenuList([]);
-            ElMessage.success('登录成功！');
+            ElMessage.success(i18n.global.t('commons.msg.loginSuccss'));
             router.push({ name: 'home' });
         } catch (error) {
             loginVerify();