create-meadminjs 1.0.0

package/template/meadmin/view/admin/src/views/system/admin/components/addOrUp.vue

@@ -0,0 +1,111 @@
+<template>
+  <me-dialog v-model="show" :title="t(id ? '编辑' : '新增')" :close-on-click-modal="false" @closed="emit('closed')">
+    <el-form ref="formEl" v-loading="loading" :model="info" :rules="rules" class="add" label-width="auto">
+      <el-form-item :label="t('角色组')" prop="roleIds">
+        <el-tree-select v-model="info.roleIds" :data="treeAllList || []" check-strictly node-key="id" multiple filterable :props="{ label: 'roleName' }" :render-after-expand="false" />
+      </el-form-item>
+      <el-form-item :label="t('用户名')" prop="username">
+        <el-input v-model="info.username" clearable></el-input>
+      </el-form-item>
+      <el-form-item :label="t('昵称')" prop="nickname">
+        <el-input v-model="info.nickname" clearable></el-input>
+      </el-form-item>
+      <el-form-item :label="t('密码')" prop="password">
+        <el-input v-model="info.password" clearable :placeholder="t('留空，代表不修改密码')"></el-input>
+      </el-form-item>
+      <el-form-item :label="t('头像')" prop="avatar">
+        <me-upload list-type="picture" :limit="1" :model-value="info.avatar ? [info.avatar] : []" @update:model-value="(files) => (info.avatar = files.length ? files[0] : null)"></me-upload>
+      </el-form-item>
+      <el-form-item :label="t('邮箱')" prop="email">
+        <el-input v-model="info.email" clearable></el-input>
+      </el-form-item>
+      <el-form-item :label="t('手机号')" prop="mobile">
+        <el-input v-model="info.mobile" clearable></el-input>
+      </el-form-item>
+      <el-form-item :label="t('状态')" prop="status">
+        <el-select v-model="info.status">
+          <el-option v-for="val in dict.status" :key="val.value" :value="val.value" :label="val.label" />
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <me-button @click="() => (show = false)">{{ t('取消') }}</me-button>
+      <me-button type="primary" @click="submit">{{ t('提交') }}</me-button>
+    </template>
+  </me-dialog>
+</template>
+
+<script setup lang="ts" name="AddOrUpSystemAdmin">
+import { SystemAdmin, addSystemAdminApi, systemAdminInfoApi, updateSystemAdminApi } from '@/api/system/admin';
+import { systemRoleTreeAllApi } from '@/api/system/role';
+import { useLocalesI18n } from '@/locales/i18n';
+import { resetObj } from '@/utils/helper';
+import { isMobile } from '@/utils/validate.js';
+import { FormInstance, FormRules } from 'element-plus';
+import { getDict } from '../dict.js';
+const { data: treeAllList, runAsync: getTreeAllAsync } = systemRoleTreeAllApi();
+const { runAsync: systemAdminInfoApiRunAsync } = systemAdminInfoApi();
+const { runAsync: updateSystemAdminApiRunsync } = updateSystemAdminApi();
+const { runAsync: addSystemAdminApiRunsync } = addSystemAdminApi();
+let { t, loadRes } = useLocalesI18n({}, [(locale: string) => import(`../lang/${locale}.json`), 'systemAdmin']);
+await Promise.all([loadRes, getTreeAllAsync()]);
+const dict = getDict(t);
+const show = defineModel<boolean>();
+const props = defineProps<{
+  id?: string;
+}>();
+const emit = defineEmits<{
+  (e: 'success'): void;
+  (e: 'closed'): void;
+}>();
+const info = reactive(new SystemAdmin());
+const loading = ref(false);
+watch(
+  () => props.id,
+  async (id?: string) => {
+    if (id) {
+      loading.value = true;
+      const enitity = await systemAdminInfoApiRunAsync(id);
+      resetObj(info, Object.assign({ roleIds: enitity.roles.map((item) => item.id) }, enitity));
+      loading.value = false;
+    }
+  },
+  { immediate: true },
+);
+const rules: FormRules = {
+  username: [
+    { required: true, message: t('{label} 必须填写', { label: t('用户名') }), trigger: 'blur' },
+    { type: 'string', min: 1, max: 50, message: t('{label} 长度必须在 {min} 及 {max} 之间', { label: t('用户名'), min: 1, max: 50 }), trigger: 'blur' },
+  ],
+  nickname: [
+    { required: true, message: t('{label} 必须填写', { label: t('昵称') }), trigger: 'blur' },
+    { type: 'string', min: 1, max: 20, message: t('{label} 长度必须在 {min} 及 {max} 之间', { label: t('昵称'), min: 1, max: 20 }), trigger: 'blur' },
+  ],
+  email: [
+    { type: 'string', max: 100, message: t('{label} 长度必须小于等于 {max}', { label: t('邮箱'), max: 100 }), trigger: 'blur' },
+
+    { type: 'email', message: t('{label} 必须是正确的邮箱格式', { label: t('邮箱') }), trigger: 'blur' },
+  ],
+  mobile: [
+    { required: true, message: t('{label} 必须填写', { label: t('手机号') }), trigger: 'blur' },
+
+    { validator: (rule, value: string | number) => isMobile(value), message: t('{label} 必须是正确的手机号', { label: t('手机号') }), trigger: 'blur' },
+  ],
+  status: [{ required: true, message: t('{label} 必须选择', { label: t('状态') }), trigger: 'blur' }],
+};
+const formEl = ref<FormInstance>();
+const submit = async () => {
+  try {
+    await formEl.value!.validate();
+  } catch (invalidFields) {
+    return formEl.value!.scrollToField(Object.keys(invalidFields!)[0]);
+  }
+  if (props.id) {
+    await updateSystemAdminApiRunsync(props.id, info);
+  } else {
+    await addSystemAdminApiRunsync(info);
+  }
+  show.value = false;
+  emit('success');
+};
+</script>

package/template/meadmin/view/admin/src/views/system/admin/components/info.vue

@@ -0,0 +1,75 @@
+<template>
+  <me-dialog v-model="show" :title="t('详情')" :close-on-click-modal="false" @closed="emit('closed')">
+    <el-descriptions v-loading="loading" class="info" :border="true">
+      <el-descriptions-item :label="t('ID')">{{ formatterStrExec(data?.id) }}</el-descriptions-item>
+      <el-descriptions-item :label="t('用户名')">{{ formatterStrExec(data?.username) }}</el-descriptions-item>
+      <el-descriptions-item :label="t('昵称')">{{ formatterStrExec(data?.nickname) }}</el-descriptions-item>
+      <el-descriptions-item :label="t('头像')">
+        <me-files-view :files="data?.avatar ? [data.avatar] : []"></me-files-view>
+      </el-descriptions-item>
+      <el-descriptions-item :label="t('邮箱')">
+        {{ formatterStrExec(data?.email) }}
+      </el-descriptions-item>
+      <el-descriptions-item :label="t('手机号')">
+        {{ formatterStrExec(data?.mobile) }}
+      </el-descriptions-item>
+      <el-descriptions-item :label="t('登录失败次数')">
+        {{ formatterStrExec(data?.loginFailure) }}
+      </el-descriptions-item>
+      <el-descriptions-item :label="t('最后登录时间')">
+        {{ formatterStrExec(data?.lastLoginAt) }}
+      </el-descriptions-item>
+      <el-descriptions-item :label="t('最后登录ip')">
+        {{ formatterStrExec(data?.lastLoginIp) }}
+      </el-descriptions-item>
+      <el-descriptions-item :label="t('状态')">
+        {{ formatterDictExec(dict, 'status', data?.status) }}
+      </el-descriptions-item>
+      <el-descriptions-item :label="t('具有的角色')">
+        <el-tag v-for="item in data?.roles || []" :key="item.id">{{ item.roleName }}</el-tag>
+      </el-descriptions-item>
+      <el-descriptions-item :label="t('创建时间')">
+        {{ formatterAtExec(data?.createdAt) }}
+      </el-descriptions-item>
+      <el-descriptions-item :label="t('最后更新时间')">
+        {{ formatterAtExec(data?.updatedAt) }}
+      </el-descriptions-item>
+      <el-descriptions-item :label="t('创建人')"> {{ formatterStrExec(data?.createdAdmin?.nickname) }}({{ formatterStrExec(data?.createdAdmin?.username) }}) </el-descriptions-item>
+      <el-descriptions-item :label="t('最后更新人')"> {{ formatterStrExec(data?.updatedAdmin?.nickname) }}({{ formatterStrExec(data?.updatedAdmin?.username) }}) </el-descriptions-item>
+    </el-descriptions>
+    <template #footer>
+      <me-button @click="() => (show = false)">{{ t('关闭') }}</me-button>
+    </template>
+  </me-dialog>
+</template>
+
+<script setup lang="ts" name="Info">
+import { systemAdminInfoApi } from '@/api/system/admin.js';
+import { useLocalesI18n } from '@/locales/hooks.js';
+import { formatterAtExec, formatterDictExec, formatterStrExec } from '@/utils/helper.js';
+import { getDict } from '../dict.js';
+let { t, loadRes } = useLocalesI18n({}, [(locale: string) => import(`../lang/${locale}.json`), 'systemAdmin']);
+await loadRes;
+const dict = getDict(t);
+const show = defineModel<boolean>();
+const props = defineProps<{
+  id?: string;
+}>();
+const emit = defineEmits<{
+  (e: 'closed'): void;
+}>();
+const { data, loading, runAsync } = systemAdminInfoApi();
+watch(
+  () => props.id,
+  async (id?: string) => {
+    if (id) {
+      runAsync(id);
+    }
+  },
+  { immediate: true },
+);
+</script>
+<style lang="scss" scoped>
+.info {
+}
+</style>

package/template/meadmin/view/admin/src/views/system/admin/dict.ts

@@ -0,0 +1,7 @@
+export const getDict = (t = (str: string) => str) =>
+  reactive({
+    status: [
+      { value: 1, label: t('启用') },
+      { value: 0, label: t('禁用') },
+    ],
+  });

package/template/meadmin/view/admin/src/views/system/admin/index.vue

@@ -0,0 +1,145 @@
+<template>
+  <page>
+    <template #searchForm>
+      <me-search-form :model="params" :default-all="true" class="search-form" @search="search(1)">
+        <el-form-item :label="t('ID')" prop="id">
+          <el-input v-model="params.id" clearable></el-input>
+        </el-form-item>
+        <el-form-item :label="t('用户名')" prop="username">
+          <el-input v-model="params.username"></el-input>
+        </el-form-item>
+        <el-form-item :label="t('昵称')" prop="nickname">
+          <el-input v-model="params.nickname"></el-input>
+        </el-form-item>
+        <el-form-item :label="t('邮箱')" prop="email">
+          <el-input v-model="params.email" clearable></el-input>
+        </el-form-item>
+        <el-form-item :label="t('手机号')" prop="mobile">
+          <el-input v-model="params.mobile" clearable></el-input>
+        </el-form-item>
+        <el-form-item :label="t('最后登录时间')" prop="lastLoginAt">
+          <el-date-picker v-model="params.startLastLoginAt" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" clearable />&nbsp; - &nbsp;
+          <el-form-item prop="priceEnd">
+            <el-date-picker v-model="params.endLastLoginAt" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" clearable />
+          </el-form-item>
+        </el-form-item>
+        <el-form-item :label="t('最后登录ip')" prop="lastLoginIp">
+          <el-input v-model="params.lastLoginIp" clearable></el-input>
+        </el-form-item>
+        <el-form-item :label="t('状态')" prop="status">
+          <el-select v-model="params.status" clearable>
+            <el-option v-for="val in dict.status" :key="val.value" :value="val.value" :label="val.label" />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="t('创建时间')" prop="createdAt">
+          <el-date-picker v-model="params.startCreatedAt" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" clearable />&nbsp; - &nbsp;
+          <el-form-item prop="priceEnd">
+            <el-date-picker v-model="params.endCreatedAt" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" clearable />
+          </el-form-item>
+        </el-form-item>
+        <el-form-item :label="t('最后更新时间')" prop="updatedAt">
+          <el-date-picker v-model="params.startUpdatedAt" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" clearable />&nbsp; - &nbsp;
+          <el-form-item prop="priceEnd">
+            <el-date-picker v-model="params.endUpdatedAt" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" clearable />
+          </el-form-item>
+        </el-form-item>
+      </me-search-form>
+    </template>
+    <me-vxe-table
+      align="center"
+      border
+      :loading="loading"
+      :data="data?.list"
+      :pagination-options="{
+        currentPage: params.page,
+        pageSize: params.pageSize,
+        total: data?.total ?? 0,
+        layout: 'sizes, prev, pager, next, jumper, ->, total',
+        change: search,
+      }"
+      :on-add="permission('system_admin_add') ? showAddOrUp : undefined"
+      @refresh="search(1)"
+    >
+      <vxe-column field="id" :title="t('ID')" :formatter="formatterStr"></vxe-column>
+      <vxe-column field="username" :title="t('用户名')" :formatter="formatterStr"></vxe-column>
+      <vxe-column field="nickname" :title="t('昵称')" :formatter="formatterStr"></vxe-column>
+      <vxe-column field="avatar" :title="t('头像')">
+        <template #default="{ row }: { row: SystemAdminInfo }">
+          <me-files-view :files="row.avatar ? [row.avatar] : []"></me-files-view>
+        </template>
+      </vxe-column>
+      <vxe-column field="email" :title="t('邮箱')" :formatter="formatterStr"></vxe-column>
+      <vxe-column field="mobile" :title="t('手机号')" :formatter="formatterStr"></vxe-column>
+      <vxe-column field="loginFailure" :title="t('登录失败次数')" :formatter="formatterStr"></vxe-column>
+      <vxe-column field="lastLoginAt" :title="t('最后登录时间')" :formatter="formatterAt"></vxe-column>
+      <vxe-column field="lastLoginIp" :title="t('最后登录ip')" :formatter="formatterStr"></vxe-column>
+      <vxe-column field="status" :title="t('状态')" :formatter="formatterDict"></vxe-column>
+      <vxe-column field="roles" :title="t('具有的角色')" :formatter="formatterArrFn((obj) => obj.roleName)"></vxe-column>
+      <vxe-column field="createdAt" :title="t('创建时间')" :formatter="formatterAt"></vxe-column>
+      <vxe-column field="updatedAt" :title="t('最后更新时间')" :formatter="formatterAt"></vxe-column>
+      <vxe-column v-if="permission(['system_admin_info', 'system_admin_edit', 'system_admin_del'])" :title="t('操作')" fixed="right">
+        <template #default="{ row }: { row: SystemAdminInfo }">
+          <span>
+            <me-button link :title="t('详情')" @click="showInfo(row.id)">
+              <mel-icon-memo />
+            </me-button>
+            <me-button v-if="permission('system_admin_edit')" link :title="t('编辑')" @click="showAddOrUp(row.id)">
+              <mel-icon-edit />
+            </me-button>
+            <el-popconfirm v-if="permission('system_admin_del')" :title="t('确认删除？')" placement="left" @confirm="del(row.id)">
+              <template #reference>
+                <me-button :key="row.id" :loading="delLoading && delId === row.id" type="danger" link :title="t('删除')">
+                  <mel-icon-delete />
+                </me-button>
+              </template>
+            </el-popconfirm>
+          </span>
+        </template>
+      </vxe-column>
+    </me-vxe-table>
+  </page>
+</template>
+
+<script setup lang="ts" name="SystemAdmin">
+import { delSystemAdminApi, SystemAdminInfo, systemAdminListApi, SystemAdminListParam } from '@/api/system/admin';
+import { useActionModel } from '@/hooks/index.js';
+import { useLocalesI18n } from '@/locales/i18n';
+import { createformatterDictFn, formatterArrFn, formatterAt, formatterStr } from '@/utils/helper.js';
+import { permission } from '@/utils/permission.js';
+import AddOrUp from './components/addOrUp.vue';
+import Info from './components/info.vue';
+import { getDict } from './dict.js';
+let { t, loadRes } = useLocalesI18n({}, [(locale: string) => import(`./lang/${locale}.json`), 'systemAdmin']);
+const dict = getDict(t);
+const formatterDict = createformatterDictFn<SystemAdminInfo>(dict);
+const { open } = useActionModel(AddOrUp);
+const { open: openInfo } = useActionModel(Info);
+const params = reactive(new SystemAdminListParam());
+const { loading, data, runAsync } = systemAdminListApi();
+const search = (page = params.page, pageSize = params.pageSize) => runAsync(Object.assign(params, { page, pageSize }));
+const { runAsync: delRun, loading: delLoading } = delSystemAdminApi();
+const delId = ref<string>();
+const del = async (id: string) => {
+  delId.value = id;
+  await delRun(id);
+  await search(1);
+};
+const showAddOrUp = (id?: string) => {
+  open({
+    id,
+    onSuccess: async () => {
+      await search(1);
+    },
+  });
+};
+const showInfo = (id?: string) => {
+  openInfo({ id });
+};
+await Promise.all([loadRes, search(1)]);
+</script>
+<style lang="scss" scoped>
+.view-img {
+  width: 40px;
+  height: 40px;
+}
+</style>

package/template/meadmin/view/admin/src/views/system/admin/lang/en.json

@@ -0,0 +1,19 @@
+{
+  "ID": "Id",
+  "用户名": "Username",
+  "昵称": "Nickname",
+  "密码": "Password",
+  "头像": "Avatar",
+  "邮箱": "Email",
+  "手机号": "Mobile",
+  "登录失败次数": "Login failure",
+  "最后登录时间": "Last login time",
+  "最后登录ip": "Last login ip",
+  "状态": "Status",
+  "具有的角色": "Roles",
+  "具有权限的菜单": "Role menus",
+  "创建时间": "Created time",
+  "最后更新时间": "Updated time",
+  "角色组": "Role Group",
+  "留空，代表不修改密码": "Leave blank to keep the password unchanged"
+}

package/template/meadmin/view/admin/src/views/system/menuRole/components/menu/components/addOrUp.vue

@@ -0,0 +1,145 @@
+<template>
+  <me-dialog v-model="show" :title="t(id ? '编辑' : '新增')" :close-on-click-modal="false" @closed="$emit('closed')">
+    <el-form ref="formEl" v-loading="loading" :model="info" :rules="rules" class="add" label-width="auto">
+      <el-form-item :label="t('父级')" prop="parentId">
+        <el-tree-select v-model="info.parentId" :data="treeAllList || []" check-strictly node-key="id" :props="{ label: 'title' }" :render-after-expand="false" clearable filterable />
+      </el-form-item>
+      <el-form-item :label="t('菜单名称')" prop="title">
+        <el-input v-model="info.title"></el-input>
+      </el-form-item>
+      <el-form-item :label="t('类型')" prop="menuType">
+        <el-select v-model="info.menuType">
+          <el-option v-for="val in dict.menuType" :key="val.value" :value="val.value" :label="val.label" />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="t('状态')" prop="status">
+        <el-select v-model="info.status" :value-on-clear="null">
+          <el-option v-for="val in dict.status" :key="val.value" :value="val.value" :label="val.label" />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="t('权限')" prop="rule">
+        <el-input v-model="info.rule"></el-input>
+      </el-form-item>
+      <el-form-item :label="t('排序(降序)')" prop="orderNum">
+        <el-input-number v-model="info.orderNum" :value-on-clear="null"></el-input-number>
+      </el-form-item>
+      <el-form-item :label="t('路径')" prop="path">
+        <el-input v-model="info.path"></el-input>
+      </el-form-item>
+      <el-form-item :label="t('外链')" prop="isLink">
+        <el-select v-model="info.isLink" :value-on-clear="null">
+          <el-option v-for="val in dict.isLink" :key="val.value" :value="val.value" :label="val.label" />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="t('组件路径(相对于views文件夹)')" prop="component">
+        <el-input v-model="info.component"></el-input>
+      </el-form-item>
+      <el-form-item :label="t('隐藏')" prop="hideMenu">
+        <el-select v-model="info.hideMenu" :value-on-clear="null">
+          <el-option v-for="val in dict.hideMenu" :key="val.value" :value="val.value" :label="val.label" />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="t('缓存')" prop="cache">
+        <el-select v-model="info.cache" :value-on-clear="null">
+          <el-option v-for="val in dict.cache" :key="val.value" :value="val.value" :label="val.label" />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="t('图标')" prop="icon">
+        <el-input v-model="info.icon"></el-input>
+      </el-form-item>
+      <el-form-item :label="t('固定tag')" prop="affix">
+        <el-select v-model="info.affix" :value-on-clear="null">
+          <el-option v-for="val in dict.affix" :key="val.value" :value="val.value" :label="val.label" />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="t('恒定展示(只有一个子元素时不隐藏)')" prop="alwaysShow">
+        <el-select v-model="info.alwaysShow" :value-on-clear="null">
+          <el-option v-for="val in dict.alwaysShow" :key="val.value" :value="val.value" :label="val.label" />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="t('面包屑')" prop="breadcrumb">
+        <el-select v-model="info.breadcrumb" :value-on-clear="null">
+          <el-option v-for="val in dict.breadcrumb" :key="val.value" :value="val.value" :label="val.label" />
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <me-button @click="() => (show = false)">{{ t('取消') }}</me-button>
+      <me-button type="primary" @click="submit">{{ t('提交') }}</me-button>
+    </template>
+  </me-dialog>
+</template>
+
+<script setup lang="ts" name="AddOrUpSystemMenu">
+import { SystemMenu, addSystemMenuApi, systemMenuInfoApi, systemMenuTreeAllApi, updateSystemMenuApi } from '@/api/system/menu';
+import { useLocalesI18n } from '@/locales/i18n';
+import { resetObj } from '@/utils/helper';
+import { FormInstance, FormRules } from 'element-plus';
+import { getDict } from '../dict.js';
+let { t, loadRes } = useLocalesI18n({}, [(locale: string) => import(`../lang/${locale}.json`), 'systemMenu']);
+const { data: treeAllList, runAsync: getTreeAllAsync } = systemMenuTreeAllApi();
+const { runAsync: updateSystemMenuApiRunAsync } = updateSystemMenuApi();
+const { runAsync: addSystemMenuApiRunAsync } = addSystemMenuApi();
+const { runAsync: systemMenuInfoApiRunAsync } = systemMenuInfoApi();
+await Promise.all([loadRes, getTreeAllAsync()]);
+const dict = getDict(t);
+const show = defineModel<boolean>();
+const props = defineProps<{
+  id?: string;
+}>();
+const emit = defineEmits<{
+  (e: 'success'): void;
+  (e: 'closed'): void;
+}>();
+const info = reactive(new SystemMenu());
+const loading = ref(false);
+watch(
+  () => props.id,
+  async (id?: string) => {
+    if (id) {
+      loading.value = true;
+      resetObj(info, await systemMenuInfoApiRunAsync(id));
+      loading.value = false;
+    }
+  },
+  { immediate: true },
+);
+const rules: FormRules = {
+  parentId: [{ type: 'string', max: 100, message: t('{label} 长度必须小于等于 {max}', { label: t('父级id'), max: 100 }), trigger: 'blur' }],
+  title: [
+    { required: true, message: t('{label} 必须填写', { label: t('菜单名称') }), trigger: 'blur' },
+    { type: 'string', max: 100, message: t('{label} 长度必须小于等于 {max}', { label: t('菜单名称'), max: 100 }), trigger: 'blur' },
+  ],
+  menuType: [{ required: true, message: t('{label} 必须填写', { label: t('类型') }), trigger: 'blur' }],
+  rule: [
+    { required: true, message: t('{label} 必须填写', { label: t('权限') }), trigger: 'blur' },
+    { type: 'string', max: 100, message: t('{label} 长度必须小于等于 {max}', { label: t('权限'), max: 100 }), trigger: 'blur' },
+  ],
+  orderNum: [{ type: 'number', max: 9999, message: t('{label} 必须小于等于 {max}', { label: t('排序(降序)'), max: 9999 }), trigger: 'blur' }],
+  path: [{ type: 'string', max: 500, message: t('{label} 长度必须小于等于 {max}', { label: t('路径'), max: 500 }), trigger: 'blur' }],
+  component: [{ type: 'string', max: 500, message: t('{label} 长度必须小于等于 {max}', { label: t('组件路径(相对于views文件夹)'), max: 500 }), trigger: 'blur' }],
+  icon: [{ type: 'string', max: 50, message: t('{label} 长度必须小于等于 {max}', { label: t('图标'), max: 50 }), trigger: 'blur' }],
+};
+const formEl = ref<FormInstance>();
+const submit = async () => {
+  try {
+    await formEl.value!.validate();
+  } catch (invalidFields) {
+    return formEl.value!.scrollToField(Object.keys(invalidFields!)[0]);
+  }
+  if (props.id) {
+    await updateSystemMenuApiRunAsync(props.id, info);
+  } else {
+    await addSystemMenuApiRunAsync(info);
+  }
+  show.value = false;
+  emit('success');
+};
+</script>
+<style lang="scss" scoped>
+.add {
+  :deep(.el-form-item__label) {
+    max-width: 130px;
+  }
+}
+</style>

package/template/meadmin/view/admin/src/views/system/menuRole/components/menu/components/info.vue

@@ -0,0 +1,68 @@
+<template>
+  <me-dialog v-model="show" :title="t('详情')" :close-on-click-modal="false" @closed="emit('closed')">
+    <el-descriptions v-loading="loading" class="info" :border="true">
+      <el-descriptions-item :label="t('ID')">{{ formatterStrExec(data?.id) }}</el-descriptions-item>
+      <el-descriptions-item :label="t('父级')">{{ formatterStrExec(data?.parent?.title) }}</el-descriptions-item>
+      <el-descriptions-item :label="t('菜单名称')">{{ formatterStrExec(data?.title) }}</el-descriptions-item>
+      <el-descriptions-item :label="t('类型')">{{ formatterDictExec(dict, 'menuType', data?.menuType) }}</el-descriptions-item>
+      <el-descriptions-item :label="t('状态')">{{ formatterDictExec(dict, 'status', data?.status) }}</el-descriptions-item>
+      <el-descriptions-item :label="t('权限')">{{ formatterStrExec(data?.rule) }}</el-descriptions-item>
+      <el-descriptions-item :label="t('排序(降序)')">{{ formatterStrExec(data?.orderNum) }}</el-descriptions-item>
+      <el-descriptions-item :label="t('路径')">{{ formatterStrExec(data?.path) }}</el-descriptions-item>
+      <el-descriptions-item :label="t('外链')">{{ formatterDictExec(dict, 'isLink', data?.isLink) }}</el-descriptions-item>
+      <el-descriptions-item :label="t('组件路径(相对于views文件夹)')">{{ formatterStrExec(data?.component) }}</el-descriptions-item>
+      <el-descriptions-item :label="t('隐藏')">{{ formatterDictExec(dict, 'hideMenu', data?.hideMenu) }}</el-descriptions-item>
+      <el-descriptions-item :label="t('缓存')">{{ formatterDictExec(dict, 'cache', data?.cache) }}</el-descriptions-item>
+      <el-descriptions-item :label="t('图标')">{{ formatterStrExec(data?.icon) }}</el-descriptions-item>
+      <el-descriptions-item :label="t('固定tag')">{{ formatterDictExec(dict, 'affix', data?.affix) }}</el-descriptions-item>
+      <el-descriptions-item :label="t('恒定展示(只有一个子元素时不隐藏)')">{{ formatterDictExec(dict, 'alwaysShow', data?.alwaysShow) }}</el-descriptions-item>
+      <el-descriptions-item :label="t('面包屑')">{{ formatterDictExec(dict, 'breadcrumb', data?.breadcrumb) }}</el-descriptions-item>
+      <el-descriptions-item :label="t('创建时间')">
+        {{ formatterAtExec(data?.createdAt) }}
+      </el-descriptions-item>
+      <el-descriptions-item :label="t('最后更新时间')">
+        {{ formatterAtExec(data?.updatedAt) }}
+      </el-descriptions-item>
+      <el-descriptions-item :label="t('创建人')"> {{ formatterStrExec(data?.createdAdmin?.nickname) }}({{ formatterStrExec(data?.createdAdmin?.username) }}) </el-descriptions-item>
+      <el-descriptions-item :label="t('最后更新人')"> {{ formatterStrExec(data?.updatedAdmin?.nickname) }}({{ formatterStrExec(data?.updatedAdmin?.username) }}) </el-descriptions-item>
+    </el-descriptions>
+    <template #footer>
+      <me-button @click="() => (show = false)">{{ t('关闭') }}</me-button>
+    </template>
+  </me-dialog>
+</template>
+
+<script setup lang="ts" name="Info">
+import { systemMenuInfoApi } from '@/api/system/menu.js';
+import { useLocalesI18n } from '@/locales/hooks.js';
+import { formatterAtExec, formatterDictExec, formatterStrExec } from '@/utils/helper.js';
+import { getDict } from '../dict.js';
+let { t, loadRes } = useLocalesI18n({}, [(locale: string) => import(`../lang/${locale}.json`), 'systemAdmin']);
+await loadRes;
+const dict = getDict(t);
+const show = defineModel<boolean>();
+const props = defineProps<{
+  id?: string;
+}>();
+const emit = defineEmits<{
+  (e: 'closed'): void;
+}>();
+const { data, loading, runAsync } = systemMenuInfoApi();
+watch(
+  () => props.id,
+  async (id?: string) => {
+    if (id) {
+      runAsync(id);
+    }
+  },
+  { immediate: true },
+);
+</script>
+<style lang="scss" scoped>
+.info {
+  .view-img {
+    width: 80px;
+    height: 80px;
+  }
+}
+</style>

package/template/meadmin/view/admin/src/views/system/menuRole/components/menu/dict.ts

@@ -0,0 +1,36 @@
+export const getDict = (t = (str: string) => str) =>
+  reactive({
+    menuType: [
+      { value: 1, label: t('目录') },
+      { value: 2, label: t('菜单') },
+      { value: 3, label: t('按钮') },
+    ],
+    status: [
+      { value: 1, label: t('启用') },
+      { value: 0, label: t('禁用') },
+    ],
+    isLink: [
+      { value: 1, label: t('是') },
+      { value: 0, label: t('否') },
+    ],
+    hideMenu: [
+      { value: 1, label: t('是') },
+      { value: 0, label: t('否') },
+    ],
+    cache: [
+      { value: 1, label: t('是') },
+      { value: 0, label: t('否') },
+    ],
+    affix: [
+      { value: 1, label: t('是') },
+      { value: 0, label: t('否') },
+    ],
+    alwaysShow: [
+      { value: 1, label: t('是') },
+      { value: 0, label: t('否') },
+    ],
+    breadcrumb: [
+      { value: 1, label: t('展示') },
+      { value: 0, label: t('不展示') },
+    ],
+  });