create-meadminjs 1.0.0

package/template/meadmin/view/admin/src/views/example/demo/index.vue

@@ -0,0 +1,126 @@
+<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="mobile">
+          <el-input v-model="params.mobile" clearable></el-input>
+        </el-form-item>
+        <el-form-item :label="t('类型')" prop="type">
+          <el-select v-model="params.type" clearable>
+            <el-option v-for="val in dict.type" :key="val.value" :value="val.value" :label="val.label" />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="t('名称')" prop="name">
+          <el-input v-model="params.name" clearable></el-input>
+        </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('example_demo_add') ? showAddOrUp : undefined"
+      @refresh="search(1)"
+    >
+      <vxe-column field="id" :title="t('ID')" :formatter="formatterStr"></vxe-column>
+      <vxe-column field="mobile" :title="t('手机号')" :formatter="formatterStr"></vxe-column>
+      <vxe-column field="type" :title="t('类型')" :formatter="formatterDict"></vxe-column>
+      <vxe-column field="name" :title="t('名称')" :formatter="formatterStr"></vxe-column>
+      <vxe-column field="books" :title="t('书籍')" :formatter="formatterArrFn('name')"></vxe-column>
+      <vxe-column field="user" :title="t('用户')" :formatter="formatterObjectFn('username')"></vxe-column>
+      <vxe-column field="avatar" :title="t('头像')">
+        <template #default="{ row }: { row: ExampleDemoInfo }">
+          <me-files-view :files="row.avatar ? [row.avatar] : []"></me-files-view>
+        </template>
+      </vxe-column>
+      <vxe-column field="files" :title="t('附件')">
+        <template #default="{ row }: { row: ExampleDemoInfo }">
+          <me-files-view :files="row.files"></me-files-view>
+        </template>
+      </vxe-column>
+      <vxe-column field="createdAt" :title="t('创建时间')" :formatter="formatterAt"></vxe-column>
+      <vxe-column field="updatedAt" :title="t('最后更新时间')" :formatter="formatterAt"></vxe-column>
+      <vxe-column field="createdAdmin" :title="t('创建者')" :formatter="formatterObjectFn((obj) => `${obj.nickname}(${obj.username})`)"></vxe-column>
+      <vxe-column field="updatedAdmin" :title="t('最后更新者')" :formatter="formatterObjectFn((obj) => `${obj.nickname}(${obj.username})`)"></vxe-column>
+      <vxe-column v-if="permission(['example_demo_add', 'example_demo_edit', 'exampleDemo_del'])" :title="t('操作')" fixed="right" min-width="150px">
+        <template #default="{ row }: { row: ExampleDemoInfo }">
+          <me-button v-if="permission('example_demo_info')" link :title="t('详情')" @click="showInfo(row.id)">
+            <mel-icon-memo />
+          </me-button>
+          <me-button v-if="permission('example_demo_edit')" link :title="t('编辑')" @click="showAddOrUp(row.id)">
+            <mel-icon-edit />
+          </me-button>
+          <el-popconfirm v-if="permission('example_demo_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>
+        </template>
+      </vxe-column>
+    </me-vxe-table>
+  </page>
+</template>
+
+<script setup lang="ts" name="ExampleDemo">
+import { delExampleDemoApi, ExampleDemoInfo, exampleDemoListApi, ExampleDemoListParam } from '@/api/example/demo';
+import { useActionModel } from '@/hooks/index.js';
+import { useLocalesI18n } from '@/locales/i18n';
+import { createformatterDictFn, formatterArrFn, formatterAt, formatterObjectFn, 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';
+const { open: openInfo } = useActionModel(Info);
+const { open: openAddOrUp } = useActionModel(AddOrUp);
+let { t, loadRes } = useLocalesI18n({}, [(locale: string) => import(`./lang/${locale}.json`), 'exampleDemo']);
+const dict = getDict(t);
+const formatterDict = createformatterDictFn<ExampleDemoInfo>(dict);
+const params = reactive(new ExampleDemoListParam());
+const { loading, data, runAsync } = exampleDemoListApi();
+const search = (page = params.page, pageSize = params.pageSize) => runAsync(Object.assign(params, { page, pageSize }));
+const { runAsync: delRun, loading: delLoading } = delExampleDemoApi();
+const delId = ref<string>();
+const del = async (id: string) => {
+  delId.value = id;
+  await delRun(id);
+  await search(1);
+};
+const showInfo = (id?: string) => {
+  openInfo({ id });
+};
+const showAddOrUp = (id?: string) => {
+  openAddOrUp({
+    id,
+    onSuccess: async () => {
+      await search(1);
+    },
+  });
+};
+
+await Promise.all([loadRes, search(1)]);
+</script>

package/template/meadmin/view/admin/src/views/example/demo/lang/dict.ts

@@ -0,0 +1,8 @@
+export const getDict = (t = (str: string) => str) =>
+  reactive({
+    type: [
+      { value: 0, label: t('书籍') },
+      { value: 1, label: t('电子产品') },
+      { value: 2, label: t('卡片') },
+    ],
+  });

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

@@ -0,0 +1,14 @@
+{
+  "创建者": "Created admin",
+  "最后更新者": "Updated admin",
+  "ID": "Id",
+  "手机号": "Mobile",
+  "类型": "Type",
+  "名称": "Name",
+  "书籍": "Books",
+  "用户": "User",
+  "头像": "Avatar",
+  "附件": "Files",
+  "创建时间": "Created time",
+  "最后更新时间": "Updated time"
+}

package/template/meadmin/view/admin/src/views/file/components/add.vue

@@ -0,0 +1,24 @@
+<template>
+  <me-dialog v-model="show" :title="t('上传文件')" :close-on-click-modal="false" @closed="emit('closed')">
+    <div style="height: 300px">
+      <el-form-item :label="t('文件')">
+        <me-upload v-model="files" :show-select="true"></me-upload>
+      </el-form-item>
+    </div>
+
+    <template #footer>
+      <me-button @click="() => (show = false)">{{ t('关闭') }}</me-button>
+    </template>
+  </me-dialog>
+</template>
+<script setup lang="ts" name="AddFile">
+import { FileInfo } from '@/api/file';
+import { useLocalesI18n } from '@/locales/hooks';
+let { t, loadRes } = useLocalesI18n({}, [(locale: string) => import(`../lang/${locale}.json`), 'file']);
+await loadRes;
+const show = defineModel<boolean>();
+const emit = defineEmits<{
+  (e: 'closed'): void;
+}>();
+const files = ref([] as FileInfo[]);
+</script>

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

@@ -0,0 +1,51 @@
+<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('文件名')" :span="2"> {{ formatterStrExec(data?.name) }} </el-descriptions-item>
+      <el-descriptions-item :label="t('mime类型')"> {{ formatterStrExec(data?.mimeType) }} </el-descriptions-item>
+      <el-descriptions-item :label="t('路径')" :span="2"> {{ formatterStrExec(data?.path) }} </el-descriptions-item>
+      <el-descriptions-item :label="t('文件大小')"> {{ formatterStrExec(data?.size) }} </el-descriptions-item>
+      <el-descriptions-item :label="t('存储引擎')"> {{ formatterStrExec(data?.storage) }} </el-descriptions-item>
+      <el-descriptions-item :label="t('预览')" :span="2">
+        <me-files-view :files="data ? [data] : []"></me-files-view>
+      </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('创建者')"> {{ formatterObjectExecFn((obj) => `${obj.nickname}(${obj.username})`)(data?.createdAdmin) }} </el-descriptions-item>
+      <el-descriptions-item :label="t('最后更新者')"> {{ formatterObjectExecFn((obj) => `${obj.nickname}(${obj.username})`)(data?.updatedAdmin) }} </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 { fileInfoApi } from '@/api/file.js';
+import { useLocalesI18n } from '@/locales/hooks.js';
+import { formatterAtExec, formatterObjectExecFn, formatterStrExec } from '@/utils/helper.js';
+let { t, loadRes } = useLocalesI18n({}, [(locale: string) => import(`../lang/${locale}.json`), 'exampleDemo']);
+await loadRes;
+const show = defineModel<boolean>();
+const props = defineProps<{
+  id?: string;
+}>();
+const emit = defineEmits<{
+  (e: 'closed'): void;
+}>();
+const { data, loading, runAsync } = fileInfoApi();
+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/file/components/up.vue

@@ -0,0 +1,72 @@
+<template>
+  <me-dialog v-model="show" :title="t('编辑')" :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="name">
+        <el-input v-model="info.name"></el-input>
+      </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('mime类型')" prop="mimeType">
+        <el-input v-model="info.mimeType"></el-input>
+      </el-form-item>
+      <el-form-item :label="t('文件大小')" prop="size">
+        <el-input-number v-model="info.size" :value-on-clear="null"></el-input-number>
+      </el-form-item>
+      <el-form-item :label="t('存储引擎')" prop="storage">
+        <el-input v-model="info.storage"></el-input>
+      </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="UpFile">
+import { FileInfo, fileInfoApi, updateFileApi } from '@/api/file';
+import { useLocalesI18n } from '@/locales/i18n';
+import { resetObj } from '@/utils/helper';
+import { FormInstance, FormRules } from 'element-plus';
+
+let { t, loadRes } = useLocalesI18n({}, [(locale: string) => import(`../lang/${locale}.json`), 'file']);
+await loadRes;
+
+const show = defineModel<boolean>();
+const props = defineProps<{
+  id: string;
+}>();
+const emit = defineEmits<{
+  (e: 'success'): void;
+  (e: 'closed'): void;
+}>();
+const info = reactive({} as FileInfo);
+const loading = ref(false);
+watch(
+  () => props.id,
+  async (id: string) => {
+    loading.value = true;
+    resetObj(info, await fileInfoApi({ noLoading: true }).runAsync(id));
+    loading.value = false;
+  },
+  { immediate: true },
+);
+const rules: FormRules = {
+  name: [
+    { required: true, message: t('{label} 必须填写', { label: t('文件名') }), trigger: 'blur' },
+    { type: 'string', min: 1, max: 300, message: t('{label} 长度必须在 {min} 及 {max} 之间', { label: t('文件名'), min: 1, max: 300 }), trigger: 'blur' },
+  ],
+};
+const formEl = ref<FormInstance>();
+const submit = async () => {
+  try {
+    await formEl.value!.validate();
+  } catch (invalidFields) {
+    return formEl.value!.scrollToField(Object.keys(invalidFields!)[0]);
+  }
+  await updateFileApi().runAsync(props.id, info);
+  show.value = false;
+  emit('success');
+};
+</script>

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

@@ -0,0 +1,132 @@
+<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="name">
+          <el-input v-model="params.name" clearable></el-input>
+        </el-form-item>
+        <el-form-item :label="t('路径')" prop="path">
+          <el-input v-model="params.path" clearable></el-input>
+        </el-form-item>
+        <el-form-item :label="t('mime类型')" prop="mimeType">
+          <el-input v-model="params.mimeType" clearable></el-input>
+        </el-form-item>
+        <el-form-item :label="t('文件大小')" prop="size">
+          <el-input-number v-model="params.size" clearable></el-input-number>
+        </el-form-item>
+        <el-form-item :label="t('存储引擎')" prop="storage">
+          <el-input v-model="params.storage" clearable></el-input>
+        </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
+      :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,
+      }"
+      align="center"
+      border
+      :on-add="permission('file_add') ? showAdd : undefined"
+      @refresh="search(1)"
+    >
+      <vxe-column field="id" :title="t('ID')" :formatter="formatterStr"></vxe-column>
+      <vxe-column :title="t('预览')">
+        <template #default="{ row }: { row: FileInfo }">
+          <me-files-view :files="[row]"></me-files-view>
+        </template>
+      </vxe-column>
+      <vxe-column field="name" :title="t('文件名')" :formatter="formatterStr"></vxe-column>
+      <vxe-column field="path" :title="t('路径')" :formatter="formatterStr"></vxe-column>
+      <vxe-column field="mimeType" :title="t('mime类型')" :formatter="formatterStr"></vxe-column>
+      <vxe-column field="size" :title="t('文件大小')" :formatter="formatterStr"></vxe-column>
+      <vxe-column field="storage" :title="t('存储引擎')" :formatter="formatterStr"></vxe-column>
+      <vxe-column field="createdAdmin" :title="t('创建者(管理员))')" :formatter="formatterStr">
+        <template #default="{ row }: { row: FileInfo }"> {{ row.createdAdmin.nickname }}({{ row.createdAdmin.username }}) </template>
+      </vxe-column>
+      <vxe-column field="createdAt" :title="t('创建时间')" :formatter="formatterAt"></vxe-column>
+      <vxe-column v-if="permission(['file_info', 'file_edit', 'file_del'])" :title="t('操作')" fixed="right" min-width="150px">
+        <template #default="{ row }: { row: FileInfo }">
+          <me-button v-if="permission('file_info')" link :title="t('详情')" @click="showInfo(row.id)">
+            <mel-icon-memo />
+          </me-button>
+          <el-button v-if="permission('file_edit')" link :title="t('编辑')" @click="showUp(row.id)">
+            <mel-icon-edit />
+          </el-button>
+          <el-popconfirm v-if="permission('file_del')" :title="t('确认删除？')" placement="left" @confirm="del(row.id)">
+            <template #reference>
+              <el-button :key="row.id" link :loading="delLoading && delId === row.id" :title="t('删除')" type="danger">
+                <mel-icon-delete />
+              </el-button>
+            </template>
+          </el-popconfirm>
+        </template>
+      </vxe-column>
+    </me-vxe-table>
+  </page>
+</template>
+
+<script setup lang="ts" name="File">
+import { delFileApi, FileInfo, fileListApi, FileListParam } from '@/api/file';
+import { useActionModel } from '@/hooks/index.js';
+import { useLocalesI18n } from '@/locales/i18n';
+import { formatterAt, formatterStr } from '@/utils/helper.js';
+import { permission } from '@/utils/permission.js';
+import Add from './components/add.vue';
+import Info from './components/info.vue';
+import Up from './components/up.vue';
+const { open: openUp } = useActionModel(Up);
+const { open: openAdd } = useActionModel(Add);
+const { open: openInfo } = useActionModel(Info);
+let { t, loadRes } = useLocalesI18n({}, [(locale: string) => import(`./lang/${locale}.json`), 'file']);
+const params = reactive(new FileListParam());
+const { loading, data, runAsync } = fileListApi();
+const search = (page = params.pageSize, pageSize = params.pageSize) => runAsync(Object.assign(params, { page, pageSize }));
+const { runAsync: delRun, loading: delLoading } = delFileApi();
+const delId = ref<string>();
+const del = async (id: string) => {
+  delId.value = id;
+  await delRun(id);
+  await search(1);
+};
+const showAdd = () => {
+  openAdd({
+    onClosed: async () => {
+      await search(1);
+    },
+  });
+};
+const showUp = (id: string) => {
+  openUp({
+    id,
+    onSuccess: async () => {
+      await search(1);
+    },
+  });
+};
+const showInfo = (id: string) => {
+  openInfo({
+    id,
+  });
+};
+await Promise.all([loadRes, search(1)]);
+</script>

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

@@ -0,0 +1,11 @@
+{
+  "ID": "Id",
+  "文件名": "name",
+  "路径": "Path",
+  "mime类型": "Mime type",
+  "文件大小": "Size",
+  "存储引擎": "Storage",
+  "创建者": "Created admin",
+  "创建时间": "Created time",
+  "最后更新时间": "Updated time"
+}

package/template/meadmin/view/admin/src/views/login/components/header.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="header">
+    <me-dark-switch v-if="themeConfig.showDark"></me-dark-switch>
+    <me-size-select v-if="themeConfig.showSize"></me-size-select>
+    <me-locale-select v-if="localeConfig.localeList.length > 1"></me-locale-select>
+  </div>
+</template>
+<script setup lang="ts" name="Header">
+import { localeConfig } from '@/config';
+import { useSettingStore } from '@/store';
+const { themeConfig } = storeToRefs(useSettingStore());
+</script>
+<style lang="scss" scoped>
+.header {
+  display: flex;
+  justify-content: right;
+  align-items: center;
+  padding: 12px;
+}
+</style>

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

@@ -0,0 +1,163 @@
+<template>
+  <div class="login">
+    <img src="/logo.svg?url" class="bg" />
+    <login-header class="header"></login-header>
+    <div class="form" @keyup.enter.exact="login">
+      <div class="title">ME-Admin</div>
+      <el-form ref="formRef" :rules="rules" :model="loginParams">
+        <el-form-item prop="username">
+          <el-input v-model="loginParams.username" autofocus :placeholder="t('用户名')" clearable />
+        </el-form-item>
+        <el-form-item prop="password">
+          <el-input v-model="loginParams.password" type="password" :placeholder="t('密码')" clearable show-password />
+        </el-form-item>
+        <el-form-item prop="captcha">
+          <el-input v-model="loginParams.captcha" :placeholder="t('验证码')" clearable>
+            <template #append>
+              <img :src="captchaObj?.imageBase64" class="captcha" @click="getCaptch()" />
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-button class="submit" type="primary" @click="login">{{ t('登录') }}</el-button>
+      </el-form>
+    </div>
+  </div>
+</template>
+<script setup lang="ts" name="Login">
+import { LoginParams, loginCaptchaApi } from '@/api/login';
+import { useLocalesI18n } from '@/locales/i18n';
+import { useUserStore } from '@/store';
+import type { FormInstance, FormRules } from 'element-plus';
+import LoginHeader from './components/header.vue';
+const userStore = useUserStore();
+const formRef = ref<FormInstance>();
+const route = useRoute();
+const router = useRouter();
+let loginParams = reactive(new LoginParams());
+//验证码
+const { data: captchaObj, runAsync: getCaptchRun } = loginCaptchaApi();
+const getCaptch = async () => {
+  await getCaptchRun();
+  loginParams.captchaId = captchaObj.value!.id;
+};
+getCaptch();
+let { t } = useLocalesI18n();
+const rules = computed<FormRules>(() => ({
+  username: [
+    {
+      required: true,
+      message: t('请填写') + ' ' + t('用户名'),
+      trigger: 'blur',
+    },
+    {
+      min: 3,
+      max: 8,
+      message: t('长度必须在 {0} 到 {1}个字符之间', [3, 8]),
+      trigger: 'blur',
+    },
+  ],
+  password: [
+    {
+      required: true,
+      message: t('请填写') + ' ' + t('密码'),
+      trigger: 'blur',
+    },
+    {
+      min: 6,
+      max: 20,
+      message: t('长度必须在 {0} 到 {1}个字符之间', [6, 20]),
+      trigger: 'blur',
+    },
+  ],
+  captcha: [
+    {
+      required: true,
+      message: t('请填写') + ' ' + t('验证码'),
+      trigger: 'blur',
+    },
+  ],
+}));
+const login = async () => {
+  formRef.value?.validate(async (valid, fields) => {
+    if (valid) {
+      await userStore.login(loginParams);
+      await router.replace((route.query.redirect as string) || '/');
+    } else {
+      console.log('提交错误', fields);
+    }
+  });
+};
+</script>
+<style lang="scss" scoped>
+.login {
+  background-color: var(--el-bg-color-page);
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .bg {
+    position: absolute;
+    left: 50%;
+    top: 40%;
+    max-width: 500px;
+    max-height: 500px;
+    width: 100%;
+    height: 100%;
+    transform: translate(-50%, -50%);
+
+    @media only screen and (max-width: 500px) {
+      background-size: contain;
+    }
+  }
+
+  .header {
+    width: 100%;
+  }
+
+  .form {
+    z-index: 1;
+    position: absolute;
+    left: 50%;
+    top: 40%;
+    transform: translate(-50%, -50%);
+    width: 80%;
+    max-width: 500px;
+    margin: auto;
+    padding: 30px 20px;
+    background-color: var(--el-mask-color);
+    border-radius: 4px;
+    box-shadow: 0px 0px 4px var(--el-border-color);
+
+    .title {
+      text-align: center;
+      width: 100%;
+      margin-bottom: 20px;
+      font-size: 20px;
+      font-weight: bold;
+    }
+    :deep(.el-input) {
+      .captcha {
+        margin: 0 -19px;
+        height: calc(var(--el-component-size) - 2px);
+        cursor: pointer;
+      }
+    }
+    :deep(.el-input--large) {
+      .captcha {
+        height: calc(var(--el-component-size-large) - 2px);
+      }
+    }
+
+    :deep(.el-input--small) {
+      .captcha {
+        height: calc(var(--el-component-size-small) - 2px);
+      }
+    }
+    .submit {
+      width: 100%;
+      margin: auto;
+      display: block;
+    }
+  }
+}
+</style>

package/template/meadmin/view/admin/src/views/redirect.vue

@@ -0,0 +1,12 @@
+<template>
+  <span></span>
+</template>
+<script setup lang="ts" name="Redirect">
+import { useRouteStore } from '@/store';
+const route = useRoute();
+const router = useRouter();
+const fullPath = route.params.path as string;
+const routeStore = useRouteStore();
+routeStore.cacheFullPath.delete(fullPath);
+onMounted(() => router.replace(fullPath));
+</script>