活到老学到老之vue-vben-admin项目添加简单页面

我用的是web-antd子项目。

在src/router/routes/modules目录下添加路由文件，例如，xxx.ts

javascript 复制代码

import type { RouteRecordRaw } from 'vue-router';

import { $t } from '@/locales';

const routes: RouteRecordRaw[] = [
  {
    meta: {
      icon: 'mdi:file-download', // 可自选图标
      title: $t('page.xxx.title'), // 多语言 key，可在 locales 配置中定义
      order: 1100,
    },
    name: 'xxx',
    path: '/xxx',
    component: () => import('#/views/xxx/index.vue'),
  },
];

export default routes;

在src/views目录下创建目录xxx，在src/views/xxx目录下创建index.vue

javascript 复制代码

<script setup lang="ts">
import { ref } from 'vue';

import { Alert, Button, Card, Input, message } from 'ant-design-vue';

import PageWrapper from '#/components/Page/PageWrapper.vue';

const aabUrl = ref('');
const apkUrl = ref('');
const errorMessage = ref('');
const loading = ref(false);

const handleSubmit = async () => {
  if (!aabUrl.value) {
    message.warning('请输入 yyy 链接');
    return;
  }
  loading.value = true;
  errorMessage.value = '';
  apkUrl.value = '';

  // 先用假数据联调 UI
  await new Promise((r) => setTimeout(r, 500));
  apkUrl.value = 'https://example.com/test.apk';
  message.success('解析成功！');
  loading.value = false;
};
</script>

<template>
  <PageWrapper title="yyy 解析下载">
    <div class="p-4">
      <Card>
        <div style="margin-bottom: 16px">
          <Input
            v-model:value="zzz"
            placeholder="粘贴 yyy 下载链接"
            style="width: 400px; margin-right: 10px"
          />
          <Button type="primary" :loading="loading" @click="handleSubmit">
            提交
          </Button>
        </div>

        <Alert v-if="kkkUrl" type="success" message="kkk 解析成功，点击下载：">
          <template #description>
            <a :href="kkkUrl" target="_blank">点击下载 KKK</a>
          </template>
        </Alert>

        <Alert
          v-if="errorMessage"
          type="error"
          :message="errorMessage"
          show-icon
        />
      </Card>
    </div>
  </PageWrapper>
</template>

<style scoped>
/* 可选样式 */
</style>

在src目录下创建components/Page/PageWrapper.vue，页面装饰器

javascript 复制代码

<script setup lang="ts">
// 可以为空或包含 props，如 title
</script>

<template>
  <div class="page-wrapper">
    <slot></slot>
  </div>
</template>

<style scoped>
.page-wrapper {
  padding: 16px;
}
</style>

配置多语言：

在src/locales/langs/zh-CN/page.json中添加：

javascript 复制代码

{
  "auth": {
    "login": "登录",
    "register": "注册",
    "codeLogin": "验证码登录",
    "qrcodeLogin": "二维码登录",
    "forgetPassword": "忘记密码"
  },
  "dashboard": {
    "title": "概览",
    "analytics": "分析页",
    "workspace": "工作台"
  },
  "xxx": {
    "title": "yyy 下载",
    "submit": "提交",
    "placeholder": "粘贴 yyy 下载链接",
    "success": "解析成功, KKK 准备就绪",
    "error": "解析失败，请检查链接是否有效"
  }
}

在src/locales/langs/en-US/page.json中添加：

javascript 复制代码

{
  "auth": {
    "codeLogin": "Code Login",
    "forgetPassword": "Forget Password",
    "login": "Login",
    "qrcodeLogin": "Qr Code Login",
    "register": "Register"
  },
  "dashboard": {
    "analytics": "Analytics",
    "title": "Dashboard",
    "workspace": "Workspace"
  },
  "xxx": {
    "title": "yyy Download",
    "submit": "Submit",
    "placeholder": "download link",
    "success": "analysis success",
    "error": "analysis fail, please check the link is valid"
  }
}

重启项目

bash 复制代码

h
                                                                      20:02:31
  Shortcuts
  press r + enter to restart the server                               20:02:31
  press u + enter to show server url                                  20:02:31
  press o + enter to open in browser                                  20:02:31
  press c + enter to clear console                                    20:02:31
  press q + enter to quit

页面添加成功