✨ init store

.gitignore

+node_modules
+*.log*
+.nuxt
+.nitro
+.cache
+.output
+.env
+dist
+.DS_Store

.npmrc

+shamefully-hoist=true
+strict-peer-dependencies=false

App.vue

+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>
+<script setup lang="ts">
+import { ID_INJECTION_KEY } from "element-plus";
+
+provide(ID_INJECTION_KEY, {
+  prefix: 100,
+  current: 0
+});
+</script>
+<style lang="scss" scoped></style>

README.md

+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# yarn
+yarn install
+
+# npm
+npm install
+
+# pnpm
+pnpm install
+```
+
+## Development Server
+
+Start the development server on http://localhost:3000
+
+```bash
+npm run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+npm run build
+```
+
+Locally preview production build:
+
+```bash
+npm run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

api/axios.ts

+import axios from "axios";
+
+axios.defaults.withCredentials = true;
+axios.defaults.baseURL = "http://devbitapi-test.csdn.net:8080";
+// axios.defaults.baseURL = "http://192.168.80.190:8080";
+
+axios.interceptors.request.use(
+  config => {
+    const token = localStorage.getItem("token");
+    token && (config.headers.Authorization = "Bearer " + token);
+    return config;
+  },
+  error => {
+    return Promise.reject(error);
+  }
+);
+
+// axios.interceptors.response.use(
+//   function (response) {
+//     if (response.status !== 200) {
+//       alert("Error: " + response.statusText);
+//     }
+//     return response;
+//   },
+//   function (error) {
+//     return Promise.reject(error);
+//   }
+// );
+
+export default axios;

api/index.ts

+import axios from "./axios";
+
+interface RequestParams {
+  [key: string]: any;
+}
+
+export default {
+  getCodeImg: (params: RequestParams) =>
+    axios.get("/user/code_img", { params, responseType: "blob" }),
+  sendMsg: (params: RequestParams) => axios.get("/user/send_msg", { params }),
+  isUserNameUsed: (params: RequestParams) =>
+    axios.get("/user/is_username_used", { params }),
+  login: (params: RequestParams) => axios.post("/user/login", params),
+  logout: (params: RequestParams) => axios.get("/user/logout", { params }),
+  refreshToken: (params: RequestParams) =>
+    axios.post("/user/refresh_token", params),
+  register: (params: RequestParams) => axios.post("/user/register", params)
+};

assets/css/elementui.scss

+@forward "element-plus/theme-chalk/src/common/var.scss" with (
+  $colors: (
+    "primary": (
+      "base": rgb(67, 56, 202)
+    )
+  )
+);
+@use "element-plus/theme-chalk/src/index.scss" as *;

assets/css/tailwind.css

+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+

assets/hooks/getMsgCode.ts

+import api from "@/api";
+
+const useMsg = () => {
+  const btnText = ref("获取验证码");
+  const btnTime = ref(5);
+  const btnDisabled = ref(false);
+  const getMsgCode = (telNumber: string | number) => {
+    if (btnDisabled.value) return;
+    api.sendMsg({ telNumber }).then(({ data: res }) => {
+      console.log(res);
+      btnDisabled.value = true;
+      btnText.value = btnTime.value + "s后重试";
+      let timer = setInterval(() => {
+        btnText.value = --btnTime.value + "s后重试";
+        if (btnTime.value <= 0) {
+          clearInterval(timer);
+          btnText.value = "获取验证码";
+          btnDisabled.value = false;
+          btnTime.value = 5;
+        }
+      }, 1000);
+    });
+  };
+  return {
+    btnText,
+    getMsgCode
+  };
+};
+
+export default useMsg;

assets/hooks/index.ts

+import useMsg from "./getMsgCode";
+
+export { useMsg };

assets/utils/index.ts

+export const qs = (data: Record<string, any>) => {
+  const formData = new FormData();
+  for (const key in data) {
+    // eslint-disable-next-line no-prototype-builtins
+    if (data.hasOwnProperty(key)) {
+      if (data[key]) {
+        if (data[key].constructor === Array) {
+          if (data[key][0]) {
+            if (data[key][0].constructor === Object) {
+              formData.append(key, JSON.stringify(data[key]));
+            } else {
+              data[key].forEach((item: string, index: number) => {
+                formData.append(key + `[${index}]`, item);
+              });
+            }
+          } else {
+            formData.append(key + "[]", "");
+          }
+        } else if (data[key].constructor === Object) {
+          formData.append(key, JSON.stringify(data[key]));
+        } else {
+          formData.append(key, data[key]);
+        }
+      } else {
+        if (data[key] === 0) {
+          formData.append(key, 0);
+        } else {
+          formData.append(key, "");
+        }
+      }
+    }
+  }
+  return formData;
+};

components/Footer.vue

+<template>Footer</template>
+<script setup lang="ts"></script>

components/Header.vue

+<template>
+  <div class="header flex box-border">
+    <div class="flex-1 flex">
+      <img class="logo" src="@/assets/img/logo-main.png" alt="" />
+      <ul class="menu ml-4">
+        <li v-for="(item, index) in menu" :key="index">
+          <nuxt-link :to="item.pathName">{{ item.name }}</nuxt-link>
+        </li>
+      </ul>
+    </div>
+    <div class="menu">
+      <li>
+        <a @click="login">登录 / 注册</a>
+      </li>
+    </div>
+  </div>
+  <Login />
+</template>
+
+<script setup lang="ts">
+import Login from "./login.vue";
+import useStore from "@/store";
+const menu = [
+  {
+    name: "首页",
+    pathName: "/"
+  },
+  {
+    name: "机器人广场",
+    pathName: "/"
+  },
+  {
+    name: "应用广场",
+    pathName: "/"
+  },
+  {
+    name: "排行榜",
+    pathName: "/"
+  },
+  {
+    name: "开发者中心",
+    pathName: "/"
+  }
+];
+
+const login = () => {
+  useStore().login(true);
+};
+</script>
+
+<style lang="scss" scoped>
+.header {
+  height: 54px;
+  line-height: 54px;
+  background: #2c2c2c;
+  overflow: hidden;
+  padding: 4px 32px;
+  .logo {
+    height: 100%;
+  }
+  .menu {
+    display: flex;
+    list-style: none;
+    li {
+      margin-right: 24px;
+      width: 104px;
+      text-align: center;
+      margin: 4px 0;
+      line-height: 38px;
+      a {
+        border-radius: 4px;
+        color: #eeeeee;
+        display: block;
+        width: 100%;
+        height: 100%;
+        font-size: 14px;
+        &:hover {
+          background: #5e5e5e;
+          color: #fff;
+        }
+      }
+    }
+  }
+}
+</style>

components/HeaderDev.vue

+<template>
+  <div class="header flex box-border">
+    <div class="flex-1 flex">
+      <img class="logo" src="@/assets/img/logo-main.png" alt="" />
+      <ul class="menu ml-4">
+        <li v-for="(item, index) in menu" :key="index">
+          <nuxt-link :to="item.pathName">{{ item.name }}</nuxt-link>
+        </li>
+      </ul>
+    </div>
+    <div class="menu">
+      <li>
+        <a>控制台</a>
+      </li>
+      <li>
+        <a @click="login">登录 / 注册</a>
+      </li>
+    </div>
+  </div>
+  <Login />
+</template>
+
+<script setup lang="ts">
+import Login from "./login.vue";
+import useStore from "@/store";
+const menu = [
+  {
+    name: "首页",
+    pathName: "/"
+  },
+  {
+    name: "机器人文档",
+    pathName: "/"
+  },
+
+  {
+    name: "应用文档",
+    pathName: "/"
+  }
+];
+
+const login = () => {
+  useStore().login(true);
+};
+</script>
+
+<style lang="scss" scoped>
+.header {
+  height: 54px;
+  line-height: 54px;
+  background: #2c2c2c;
+  overflow: hidden;
+  padding: 4px 32px;
+  .logo {
+    height: 100%;
+  }
+  .menu {
+    display: flex;
+    list-style: none;
+    li {
+      margin-right: 24px;
+      width: 104px;
+      text-align: center;
+      margin: 4px 0;
+      line-height: 38px;
+      a {
+        border-radius: 4px;
+        color: #eeeeee;
+        display: block;
+        width: 100%;
+        height: 100%;
+        font-size: 14px;
+        &:hover {
+          background: #5e5e5e;
+          color: #fff;
+        }
+      }
+    }
+  }
+}
+</style>

components/login.vue

+<template>
+  <client-only>
+    <el-dialog v-model="showLogin" title="" width="480px">
+      <h2 class="text-center text-2xl">用户登录</h2>
+      <div
+        class="min-h-full flex flex-col justify-center py-8 pt-0 sm:px-6 lg:px-6"
+      >
+        <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
+          <div class="bg-white sm:rounded-lg sm:px-10">
+            <el-form
+              ref="formEl"
+              :model="form"
+              :rules="rules"
+              label-width="100px"
+              label-position="top"
+              class="demo-ruleForm w-full"
+              size="large"
+            >
+              <el-form-item label="用户名" prop="username">
+                <el-input v-model="form.username" />
+              </el-form-item>
+              <el-form-item label="密码" prop="password">
+                <el-input v-model="form.password" />
+              </el-form-item>
+              <el-form-item v-if="imgSrc" label="验证码" prop="imgCode">
+                <div class="flex w-full">
+                  <el-input v-model="form.imgCode" />
+                  <img
+                    @click="getCodeImg"
+                    class="ml-2 h-full cursor-pointer rounded-md"
+                    :src="imgSrc"
+                    alt=""
+                  />
+                </div>
+              </el-form-item>
+            </el-form>
+            <div class="flex items-center justify-between">
+              <div class="flex items-center">
+                <input
+                  id="remember-me"
+                  name="remember-me"
+                  type="checkbox"
+                  class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
+                />
+                <label
+                  for="remember-me"
+                  class="ml-2 block text-sm text-gray-900"
+                >
+                  记住我
+                </label>
+              </div>
+
+              <div class="text-sm">
+                <nuxt-link to="/user/forget">
+                  <a
+                    @click="store.login(false)"
+                    href="#"
+                    class="font-medium text-indigo-600 hover:text-indigo-500"
+                  >
+                    忘记密码?
+                  </a>
+                </nuxt-link>
+              </div>
+            </div>
+
+            <div class="mt-6">
+              <button
+                @click="submitForm"
+                type="submit"
+                class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+              >
+                登 录
+              </button>
+            </div>
+
+            <div class="mt-6">
+              <div class="relative">
+                <div class="absolute inset-0 flex items-center">
+                  <div class="w-full border-t border-gray-300" />
+                </div>
+                <div class="relative flex justify-center text-sm">
+                  <span class="px-2 bg-white text-gray-500"> 没有账号 </span>
+                </div>
+              </div>
+
+              <div class="mt-6">
+                <nuxt-link to="/user/register">
+                  <a
+                    @click="store.login(false)"
+                    href="#"
+                    class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+                  >
+                    <span class="">立即注册</span>
+                  </a>
+                </nuxt-link>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+  </client-only>
+</template>
+<script setup lang="ts">
+import {
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElNotification,
+  ElButton,
+  ElDialog
+} from "element-plus";
+import useStore from "@/store";
+import { storeToRefs } from "pinia";
+import { qs } from "@/assets/utils";
+import api from "@/api";
+
+const store = useStore();
+const { showLogin } = storeToRefs(store);
+
+const form = reactive({
+  username: "",
+  password: "",
+  imgCode: ""
+});
+
+const rules = {
+  password: [
+    { required: true, message: "请输入密码", trigger: "blur" },
+    { min: 6, max: 20, message: "密码长度在6到20个字符之间", trigger: "blur" }
+  ],
+  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
+  imgCode: [{ required: true, message: "请输入验证码", trigger: "blur" }]
+};
+
+const formEl = ref<any>(null);
+const submitForm = () => {
+  formEl.value.validate((valid: boolean) => {
+    if (!valid) return false;
+    api.login(qs(form)).then(({ data: res }) => {
+      if (res.code !== 200) {
+        getCodeImg();
+        ElNotification.error(res.msg);
+        return;
+      }
+      ElNotification.success("登录成功");
+      store.login(false);
+    });
+  });
+};
+
+function fileToBase64(file: Blob, callback: (result: string) => void) {
+  var reader = new FileReader();
+  reader.readAsDataURL(file);
+  reader.onload = function () {
+    var result = reader.result as string;
+    callback(result);
+  };
+}
+
+const imgSrc = ref("");
+const getCodeImg = () => {
+  api.getCodeImg({}).then(({ data: res }) => {
+    fileToBase64(res, url => {
+      imgSrc.value = url;
+    });
+  });
+};
+// definePageMeta({
+//   layout: false
+// });
+</script>
+
+<style lang="scss" scoped>
+.el-form {
+  :deep(.el-form-item) {
+    margin-bottom: 16px;
+    .el-form-item__label {
+      margin-bottom: 4px;
+      font-weight: bold;
+    }
+  }
+}
+</style>

components/notification.vue

+<!-- This example requires Tailwind CSS v2.0+ -->
+<template>
+  <!-- Global notification live region, render this permanently at the end of the document -->
+  <div
+    aria-live="assertive"
+    class="fixed inset-0 flex items-end px-4 py-6 pointer-events-none sm:p-6 sm:items-start"
+  >
+    <div class="w-full flex flex-col items-center space-y-4 sm:items-end">
+      <!-- Notification panel, dynamically insert this into the live region when it needs to be displayed -->
+      <transition
+        enter-active-class="transform ease-out duration-300 transition"
+        enter-from-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
+        enter-to-class="translate-y-0 opacity-100 sm:translate-x-0"
+        leave-active-class="transition ease-in duration-100"
+        leave-from-class="opacity-100"
+        leave-to-class="opacity-0"
+      >
+        <div
+          v-if="show"
+          class="max-w-sm w-full bg-white shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden"
+        >
+          <div class="p-4">
+            <div class="flex items-start">
+              <div class="flex-shrink-0">
+                <CheckCircleIcon
+                  class="h-6 w-6 text-green-400"
+                  aria-hidden="true"
+                />
+              </div>
+              <div class="ml-3 w-0 flex-1 pt-0.5">
+                <p class="text-sm font-medium text-gray-900">
+                  Successfully saved!
+                </p>
+                <p class="mt-1 text-sm text-gray-500">
+                  Anyone with a link can now view this file.
+                </p>
+              </div>
+              <div class="ml-4 flex-shrink-0 flex">
+                <button
+                  @click="show = false"
+                  class="bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+                >
+                  <span class="sr-only">Close</span>
+                  <XIcon class="h-5 w-5" aria-hidden="true" />
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref } from "vue";
+import { CheckCircleIcon } from "@heroicons/vue/outline";
+import { XIcon } from "@heroicons/vue/solid";
+
+export default {
+  components: {
+    CheckCircleIcon,
+    XIcon
+  },
+  setup() {
+    const show = ref(true);
+
+    return {
+      show
+    };
+  }
+};
+</script>

layouts/default.vue

+<template>
+  <Header></Header>
+  <slot></slot>
+  <!-- <Footer></Footer> -->
+</template>
+<script setup lang="ts">
+</script>

layouts/dev.vue

+<template>
+  <HeaderDev />
+  <slot></slot>
+  <!-- <Footer></Footer> -->
+</template>
+<script setup lang="ts"></script>

nuxt.config.ts

+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  title: "chat-appstore",
+  app: {
+    head: {
+      title: "应用市场",
+      meta: [{ name: "description", content: "应用市场" }],
+      link: [
+        // { rel: "stylesheet", href: "//unpkg.com/element-plus/dist/index.css" }
+      ],
+      script: [
+        // { src: "//unpkg.com/vue@3", tagPosition: "bodyClose" },
+        // { src: "//unpkg.com/element-plus", tagPosition: "bodyClose" }
+      ]
+    }
+  },
+  css: ["@/assets/css/elementui.scss"],
+  imports: {
+    autoImport: true
+  },
+  modules: ["@nuxtjs/tailwindcss", "@pinia/nuxt"],
+  tailwindcss: {
+    cssPath: "@/assets/css/tailwind.css"
+  },
+  elementPlus: {
+    /** Options */
+  }
+});

package.json

+{
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "devDependencies": {
+    "@nuxtjs/tailwindcss": "^6.6.1",
+    "element-plus": "^2.3.1",
+    "node-sass": "^8.0.0",
+    "sass": "^1.59.3"
+  },
+  "__npminstall_done": false,
+  "dependencies": {
+    "@pinia/nuxt": "^0.4.7",
+    "axios": "^1.3.4"
+  }
+}

pages/dev/index.vue

+<template>
+
+
+  
+</template>
+<script setup lang="ts">
+definePageMeta({
+  layout: "dev"
+});
+</script>

pages/dev/test.vue

+<template>
+  test
+</template>
+<script setup lang='ts'>
+</script>
+<style lang='scss' scoped>
+</style>
\ No newline at end of file

pages/index.vue

+<template>
+  <div>index page</div>
+</template>

pages/user/forget.vue

+<template>
+  <h2 class="mt-16 text-center text-2xl">忘记密码</h2>
+  <div class="min-h-full flex flex-col justify-center py-6 sm:px-6 lg:px-6">
+    <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
+      <div class="bg-white sm:rounded-lg sm:px-10">
+        <el-form
+          ref="formEl"
+          :model="form"
+          :rules="rules"
+          label-width="100px"
+          label-position="top"
+          class="demo-ruleForm w-full"
+          size="large"
+        >
+          <el-form-item label="用户名" prop="username">
+            <el-input v-model="form.username" />
+          </el-form-item>
+          <el-form-item label="密码" prop="password">
+            <el-input v-model="form.password" />
+          </el-form-item>
+          <el-form-item label="确认密码" prop="confirmPassword">
+            <el-input v-model="form.confirmPassword" />
+          </el-form-item>
+          <el-form-item label="手机号" prop="phone">
+            <el-input v-model="form.phone" />
+          </el-form-item>
+          <el-form-item label="验证码" prop="captcha">
+            <div class="flex w-full">
+              <el-input class="flex-1 mr-2" v-model="form.captcha" />
+              <el-button class="w-28" @click="getCaptcha">{{
+                btnText
+              }}</el-button>
+            </div>
+          </el-form-item>
+        </el-form>
+        <div class="flex items-center justify-between">
+          <div class="flex items-center">
+            <input
+              id="remember-me"
+              name="remember-me"
+              type="checkbox"
+              class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
+            />
+            <label for="remember-me" class="ml-2 block text-sm text-gray-600">
+              我已阅读并同意AI100使用协议
+            </label>
+          </div>
+        </div>
+        <div class="mt-6">
+          <button
+            @click="submitForm"
+            type="submit"
+            class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+          >
+            注 册
+          </button>
+        </div>
+        <div class="mt-6">
+          <div class="relative">
+            <div class="absolute inset-0 flex items-center">
+              <div class="w-full border-t border-gray-300" />
+            </div>
+            <div class="relative flex justify-center text-sm">
+              <span class="px-2 bg-white text-gray-500"> 已有账号 </span>
+            </div>
+          </div>
+          <div class="mt-6">
+            <a
+              href="#"
+              @click="login"
+              class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+            >
+              <span class="">立即登录</span>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ElForm, ElFormItem, ElInput, ElButton, ElDialog } from "element-plus";
+import useStore from "@/store";
+import { storeToRefs } from "pinia";
+import api from "@/api";
+
+const store = useStore();
+const { showLogin } = storeToRefs(store);
+
+const form = reactive({
+  username: "",
+  phone: "",
+  password: "",
+  confirmPassword: "",
+  captcha: ""
+});
+
+const rules = {
+  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
+  phone: [
+    { required: true, message: "请输入手机号", trigger: "blur" },
+    {
+      pattern: /^1[3456789]\d{9}$/,
+      message: "请输入正确的手机号",
+      trigger: "blur"
+    }
+  ],
+  password: [
+    { required: true, message: "请输入密码", trigger: "blur" },
+    { min: 6, max: 20, message: "密码长度在6到20个字符之间", trigger: "blur" }
+  ],
+  confirmPassword: [
+    { required: true, message: "请再次输入密码", trigger: "blur" },
+    { min: 6, max: 20, message: "密码长度在6到20个字符之间", trigger: "blur" },
+    {
+      trigger: "blur",
+      validator: (rule: any, value: string, callback: () => void) => {
+        if (value === "") {
+          callback(new Error("请再次输入密码"));
+        } else if (value !== form.password) {
+          callback(new Error("两次输入密码不一致"));
+        } else {
+          callback();
+        }
+      }
+    }
+  ],
+  captcha: [{ required: true, message: "请输入验证码", trigger: "blur" }]
+};
+
+const formEl = ref<any>(null);
+const submitForm = () => {
+  formEl.value.validate((valid: boolean) => {
+    if (!valid) return false;
+  });
+};
+
+const btnText = ref("获取验证码");
+const btnTime = ref(5);
+const getCaptcha = () => {
+  btnText.value = btnTime.value + "s后重试";
+  let timer = setInterval(() => {
+    btnText.value = --btnTime.value + "s后重试";
+    if (btnTime.value <= 0) {
+      clearInterval(timer);
+      btnText.value = "获取验证码";
+      btnTime.value = 5;
+    }
+  }, 1000);
+};
+
+const login = () => {
+  store.login(true);
+};
+// definePageMeta({
+//   layout: false
+// });
+</script>
+
+<style lang="scss" scoped>
+.el-form {
+  :deep(.el-form-item) {
+    margin-bottom: 16px;
+    .el-form-item__label {
+      margin-bottom: 4px;
+      font-weight: bold;
+    }
+  }
+}
+</style>

pages/user/register.vue

+<template>
+  <h2 class="mt-16 text-center text-2xl">用户注册</h2>
+  <div class="min-h-full flex flex-col justify-center py-6 sm:px-6 lg:px-6">
+    <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
+      <div class="bg-white sm:rounded-lg sm:px-10">
+        <el-form
+          ref="formEl"
+          :model="form"
+          :rules="rules"
+          label-width="100px"
+          label-position="top"
+          class="demo-ruleForm w-full"
+          size="large"
+        >
+          <el-form-item label="用户名" prop="username">
+            <el-input v-model="form.username" />
+          </el-form-item>
+          <el-form-item label="密码" prop="password">
+            <el-input v-model="form.password" type="password" />
+          </el-form-item>
+          <el-form-item label="确认密码" prop="confirmPassword">
+            <el-input v-model="form.confirmPassword" type="password" />
+          </el-form-item>
+          <el-form-item label="手机号" prop="telNumber">
+            <el-input maxlength="11" v-model="form.telNumber" />
+          </el-form-item>
+          <el-form-item label="验证码" prop="msgCode">
+            <div class="flex w-full">
+              <el-input class="flex-1 mr-2" v-model="form.msgCode" />
+              <el-button class="w-28" @click="getCode">{{ btnText }}</el-button>
+            </div>
+          </el-form-item>
+          <el-form-item prop="rule">
+            <div class="flex items-center justify-between">
+              <div class="flex items-center">
+                <input
+                  v-model="form.rule"
+                  id="remember-me"
+                  name="remember-me"
+                  type="checkbox"
+                  class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
+                />
+                <label
+                  for="remember-me"
+                  class="ml-2 block text-sm text-gray-600"
+                >
+                  我已阅读并同意AI100使用协议
+                </label>
+              </div>
+            </div>
+          </el-form-item>
+        </el-form>
+        <div class="mt-6">
+          <button
+            @click="submitForm"
+            type="submit"
+            class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+          >
+            注 册
+          </button>
+        </div>
+        <div class="mt-6">
+          <div class="relative">
+            <div class="absolute inset-0 flex items-center">
+              <div class="w-full border-t border-gray-300" />
+            </div>
+            <div class="relative flex justify-center text-sm">
+              <span class="px-2 bg-white text-gray-500"> 已有账号 </span>
+            </div>
+          </div>
+          <div class="mt-6">
+            <a
+              href="#"
+              @click="login"
+              class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+            >
+              <span class="">立即登录</span>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import {
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElButton,
+  ElDialog,
+  ElNotification
+} from "element-plus";
+import useStore from "@/store";
+import api from "@/api";
+import { useMsg } from "@/assets/hooks";
+import { qs } from "@/assets/utils";
+
+const store = useStore();
+
+const form = reactive({
+  username: "",
+  telNumber: "",
+  password: "",
+  confirmPassword: "",
+  msgCode: "",
+  rule: false
+});
+
+const rules = {
+  username: [
+    { required: true, message: "请输入用户名", trigger: "blur" },
+    {
+      trigger: "blur",
+      validator: (rule: any, value: string, callback: () => void) => {
+        if (value === "") {
+          callback(new Error("请输入用户名"));
+        } else {
+          api
+            .isUserNameUsed({
+              username: value
+            })
+            .then(({ data: res }) => {
+              console.log(res);
+              if (res.data) {
+                callback(new Error("用户名已被注册"));
+              } else {
+                callback();
+              }
+            });
+        }
+      }
+    }
+  ],
+  telNumber: [
+    { required: true, message: "请输入手机号", trigger: "blur" },
+    {
+      pattern: /^1[3456789]\d{9}$/,
+      message: "请输入正确的手机号",
+      trigger: "blur"
+    }
+  ],
+  password: [
+    { required: true, message: "请输入密码", trigger: "blur" },
+    { min: 6, max: 20, message: "密码长度在6到20个字符之间", trigger: "blur" }
+  ],
+  confirmPassword: [
+    { required: true, message: "请再次输入密码", trigger: "blur" },
+    { min: 6, max: 20, message: "密码长度在6到20个字符之间", trigger: "blur" },
+    {
+      trigger: "blur",
+      validator: (rule: any, value: string, callback: () => void) => {
+        if (value === "") {
+          callback(new Error("请再次输入密码"));
+        } else if (value !== form.password) {
+          callback(new Error("两次输入密码不一致"));
+        } else {
+          callback();
+        }
+      }
+    }
+  ],
+  rule: [
+    {
+      required: true,
+      pattern: /^true$/,
+      message: "请阅读并同意用户使用协议",
+      trigger: "change"
+    }
+  ],
+  msgCode: [{ required: true, message: "请输入验证码", trigger: "blur" }]
+};
+
+const formEl = ref<any>(null);
+const submitForm = () => {
+  formEl.value.validate((valid: boolean) => {
+    if (!valid) return false;
+    const data = qs(form);
+    api.register(data).then(({ data: res }) => {
+      console.log(res);
+      if (res?.code !== 200) return;
+      ElNotification.success("注册成功!");
+    });
+  });
+};
+
+// const btnText = ref("获取验证码");
+// const btnTime = ref(5);
+// const btnDisabled = ref(false);
+// const getCode = () => {
+//   if (btnDisabled.value) return;
+//   api.sendMsg({}).then(({ data: res }) => {
+//     console.log(res);
+//     btnDisabled.value = true;
+//     btnText.value = btnTime.value + "s后重试";
+//     let timer = setInterval(() => {
+//       btnText.value = --btnTime.value + "s后重试";
+//       if (btnTime.value <= 0) {
+//         clearInterval(timer);
+//         btnText.value = "获取验证码";
+//         btnDisabled.value = false;
+//         btnTime.value = 5;
+//       }
+//     }, 1000);
+//   });
+// };
+const { btnText, getMsgCode } = useMsg();
+const getCode = () => {
+  formEl.value.validateField(["telNumber"]).then((valid: boolean) => {
+    if (!valid) return false;
+    getMsgCode(form.telNumber);
+  });
+};
+
+const login = () => {
+  store.login(true);
+};
+// definePageMeta({
+//   layout: false
+// });
+</script>
+
+<style lang="scss" scoped>
+.el-form {
+  :deep(.el-form-item) {
+    margin-bottom: 16px;
+    .el-form-item__label {
+      margin-bottom: 4px;
+      font-weight: bold;
+    }
+  }
+}
+</style>

pages/user/test.vue

+<template>test
+</template>
+<script setup lang='ts'>
+</script>
+<style lang='scss' scoped>
+</style>
\ No newline at end of file

store/index.ts

+import { defineStore } from "pinia";
+
+const useStore = defineStore("store", {
+  state: () => ({
+    showLogin: false
+  }),
+  actions: {
+    login(isShow: boolean) {
+      this.showLogin = isShow;
+    }
+  }
+});
+
+export default useStore;

tsconfig.json

+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}