first commit

2024-08-16 20:19:48 +08:00 · 2024-08-16 20:19:48 +08:00 · cc20fab72c
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@ -0,0 +1,71 @@
+// @ts-check
+const { defineConfig } = require('eslint-define-config')
+module.exports = defineConfig({
+  root: true,
+  env: {
+    browser: true,
+    node: true,
+    es6: true
+  },
+  parser: 'vue-eslint-parser',
+  parserOptions: {
+    parser: '@typescript-eslint/parser',
+    ecmaVersion: 2020,
+    sourceType: 'module',
+    jsxPragma: 'React',
+    ecmaFeatures: {
+      jsx: true
+    }
+  },
+  extends: [
+    'plugin:vue/vue3-recommended',
+    'plugin:@typescript-eslint/recommended',
+    'prettier',
+    'plugin:prettier/recommended'
+  ],
+  rules: {
+    'vue/no-setup-props-destructure': 'off',
+    'vue/script-setup-uses-vars': 'error',
+    'vue/no-reserved-component-names': 'off',
+    '@typescript-eslint/ban-ts-ignore': 'off',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-var-requires': 'off',
+    '@typescript-eslint/no-empty-function': 'off',
+    'vue/custom-event-name-casing': 'off',
+    'no-use-before-define': 'off',
+    '@typescript-eslint/no-use-before-define': 'off',
+    '@typescript-eslint/ban-ts-comment': 'off',
+    '@typescript-eslint/ban-types': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-unused-vars': 'off',
+    'no-unused-vars': 'off',
+    'space-before-function-paren': 'off',
+
+    'vue/attributes-order': 'off',
+    'vue/one-component-per-file': 'off',
+    'vue/html-closing-bracket-newline': 'off',
+    'vue/max-attributes-per-line': 'off',
+    'vue/multiline-html-element-content-newline': 'off',
+    'vue/singleline-html-element-content-newline': 'off',
+    'vue/attribute-hyphenation': 'off',
+    'vue/require-default-prop': 'off',
+    'vue/require-explicit-emits': 'off',
+    'vue/html-self-closing': [
+      'error',
+      {
+        html: {
+          void: 'always',
+          normal: 'never',
+          component: 'always'
+        },
+        svg: 'always',
+        math: 'always'
+      }
+    ],
+    'vue/multi-word-component-names': 'off',
+    'vue/no-v-html': 'off',
+    'vue/require-toggle-inside-transition': 'off'
+  }
+})
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}
--- a/README.md
+++ b/README.md
@ -0,0 +1,29 @@
+# open-platform
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Compile and Minify for Production
+
+```sh
+npm run build
+```
--- a/env.d.ts
+++ b/env.d.ts
@ -0,0 +1,6 @@
+/// <reference types="vite/client" />
+declare module "*.vue" {
+  import { DefineComponent } from "vue"
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
--- a/index.html
+++ b/index.html
@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
--- a/package.json
+++ b/package.json
@ -0,0 +1,43 @@
+{
+  "name": "open-platform",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
+  },
+  "dependencies": {
+    "@element-plus/icons-vue": "^2.3.1",
+    "axios": "^1.7.4",
+    "element-plus": "^2.8.0",
+    "eslint-define-config": "^2.1.0",
+    "pinia": "^2.2.1",
+    "qs": "^6.13.0",
+    "vue": "^3.4.29",
+    "vue-router": "^4.4.3"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "^1.3.2",
+    "@tsconfig/node18": "^18.2.0",
+    "@types/node": "^18.17.5",
+    "@vitejs/plugin-vue": "^5.0.5",
+    "@vitejs/plugin-vue-jsx": "^3.0.2",
+    "@vue/eslint-config-typescript": "^11.0.3",
+    "@vue/tsconfig": "^0.4.0",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-vue": "^9.27.0",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^3.3.3",
+    "prettier-eslint": "^16.3.0",
+    "typescript": "~5.1.6",
+    "vite": "^5.3.1",
+    "vue-tsc": "^1.8.8"
+  }
+}
--- a/prettier.config.js
+++ b/prettier.config.js
@ -0,0 +1,19 @@
+export default {
+  printWidth: 100, // 一行最多多少字符
+  tabWidth: 2, // 缩进的宽度，2 个空格
+  useTabs: false, // 是否使用制表符，不使用制表符，使用空格
+  semi: false, // 语句结尾是否使用分号
+  bracketSpacing: true, // 大括号 {} 中开始和结束是否要空格，true — { foo: 1 }，false — {foo: 1}
+  trailingComma: "none", // 数组或对象或参数的最后一项是否尾随逗号，none — 没有尾随逗号，all — 尽可能使用尾随逗号，es5 — 在 ES5 中有效的尾随逗号（对象、数组等），TypeScript 和 Flow 类型参数中的尾随逗号。
+  arrowParens: "always", // 只有一个参数的箭头函数是否带括号，always — 始终带括号，avoid — 不带括号
+  proseWrap: "always", // 什么对代码进行折行，always — 如果超过 printWidth 指定的一行最多字符宽度，则进行折行；never — 将每块代码块展开成一行；preserve — 什么都不做，保持原样。
+  htmlWhitespaceSensitivity: "strict", // 根据显示样式决定 html 要不要折行
+  endOfLine: "auto", // 每行的结束符（回车符、换行符），取值请参考 https://www.prettier.cn/docs/options.html#end-of-line
+  // 每个文件格式化的范围是文件的全部内容
+  rangeStart: 0,
+  rangeEnd: Infinity,
+  // 不需要写文件开头的@prettier
+  requirePragma: false,
+  // 不需要自动在文件开头插入@prettier
+  insertPragma: false
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,6 @@
+<template>
+  <RouterView />
+</template>
+
+<script setup lang="ts" />
+<style></style>
--- a/src/api/Api.js
+++ b/src/api/Api.js
@ -0,0 +1,187 @@
+/**
+ * Created by sk on 2020 1 17.
+ */
+import axios from "axios"
+// @ts-ignore
+import QS from "qs"
+
+//基地址
+axios.defaults.baseURL = "http://127.0.0.1:4562" //接口代理地址参见：config/index.js中的proxyTable配置
+axios.defaults.withCredentials = true
+
+// 添加业务处理函数
+let responseHandle = null
+let errorHandle = null
+// 设置业务处理函数
+function setResponseHandle(handle) {
+  responseHandle = handle
+}
+
+function setErrorHandle(handle) {
+  errorHandle = handle
+}
+// 错误处理
+function interceptorErr(err) {
+  // showError(err)
+  throw err
+}
+
+function showError(err) {
+  errorHandle(err)
+}
+
+//添加一个请求拦截器
+axios.interceptors.request.use((config) => {
+  if (sessionStorage.getItem("szyxToken")) {
+    // 判断token是否存在
+    config.headers.token = sessionStorage.getItem("szyxToken") // 将token设置成请求头
+  }
+  return config
+}, interceptorErr)
+
+// 添加一个响应拦截器
+axios.interceptors.response.use((response) => {
+  if (responseHandle) {
+    return responseHandle(response.data)
+  }
+  return response.data
+}, interceptorErr)
+
+// let translateNetError = (error) => {
+//   return {
+//     status: error.response.status,
+//     message: '系统异常，' + error.response.statusText + '错误码：' + error.response.status,
+//   }
+// }
+//通用方法postJson
+const POSTJSON = (url, params, others = {}) => {
+  // return axios.post(url, params).then(res => res.data)
+  return new Promise((resolve, reject) => {
+    axios
+      .post(url, params, others)
+      .then((res) => {
+        resolve(res)
+      })
+      .catch((error) => {
+        // 处理error
+        showError(error)
+        reject(error)
+        //   resolve(translateNetError(error))
+      })
+  })
+}
+
+const POSTFORM = (url, params, others = {}) => {
+  // return axios.post(url, QS.stringify(params), {headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}}).then(res => res.data)
+  return new Promise((resolve, reject) => {
+    axios
+      .post(url, QS.stringify(params), {
+        headers: {
+          "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
+        },
+        ...others
+      })
+      .then((res) => {
+        resolve(res)
+      })
+      .catch((error) => {
+        showError(error)
+        reject(error)
+        //   resolve(translateNetError(error))
+      })
+  })
+}
+
+const GET = (url, params, others = {}) => {
+  // return axios.get(url, {params: params}).then(res => res.data)
+  return new Promise((resolve, reject) => {
+    axios
+      .get(url, { params: params, ...others })
+      .then((res) => {
+        resolve(res)
+      })
+      .catch((error) => {
+        showError(error)
+        reject(error)
+        //   resolve(translateNetError(error))
+      })
+  })
+}
+
+const PUT = (url, params) => {
+  // return axios.put(url, params).then(res => res.data)
+  return new Promise((resolve, reject) => {
+    axios
+      .put(url, params)
+      .then((res) => {
+        resolve(res)
+      })
+      .catch((error) => {
+        showError(error)
+        reject(error)
+        //   resolve(translateNetError(error))
+      })
+  })
+}
+
+const DELETE = (url, params) => {
+  // return axios.delete(url, {params: params}).then(res => res.data)
+  return new Promise((resolve, reject) => {
+    axios
+      .delete(url, { params: params })
+      .then((res) => {
+        resolve(res)
+      })
+      .catch((error) => {
+        showError(error)
+        reject(error)
+        //   resolve(translateNetError(error))
+      })
+  })
+}
+
+const PATCH = (url, params) => {
+  // return axios.patch(url, params).then(res => res.data)
+  return new Promise((resolve, reject) => {
+    axios
+      .patch(url, params)
+      .then((res) => {
+        resolve(res)
+      })
+      .catch((error) => {
+        showError(error)
+        reject(error)
+        //   resolve(translateNetError(error))
+      })
+  })
+}
+
+// 通用，可设置多属性 自定义header，以及其他参数
+const POSTJSONALL = (url, params, others = {}) => {
+  // return axios.post(url, params, others).then(res => res.data)
+  return new Promise((resolve, reject) => {
+    axios
+      .patch(url, params, others)
+      .then((res) => {
+        resolve(res)
+      })
+      .catch((error) => {
+        showError(error)
+        reject(error)
+        //   resolve(translateNetError(error))
+      })
+  })
+}
+
+export default {
+  ...axios,
+  POSTJSON,
+  POSTFORM,
+  GET,
+  PUT,
+  DELETE,
+  PATCH,
+  POSTJSONALL,
+  setResponseHandle,
+  setErrorHandle
+}
--- a/src/api/index.js
+++ b/src/api/index.js
@ -0,0 +1,33 @@
+import API from "./Api"
+// @ts-ignore
+import { CommonUtil } from "@/utils/CommonUtil"
+// @ts-ignore
+import router from "@/router"
+import { ElMessage } from "element-plus"
+
+// 错误处理
+function errorHandle(data) {
+  if (data.message === "请登录")
+    CommonUtil.debounce(() => {
+      router.push("/login")
+    }, 1000)
+  CommonUtil.debounce(() => {
+    ElMessage.error(data.message)
+  }, 1000)
+}
+
+// 处理handle
+function handle(data) {
+  if (data.code !== 200) {
+    throw Error(data.msg)
+  }
+  return data.data
+}
+
+API.setResponseHandle(handle)
+API.setErrorHandle(errorHandle)
+
+export default {
+  // 登录
+  login: (params) => API.POSTJSON("/tenant/v1/tenant/create", params)
+}
--- a/src/assets/base.css
+++ b/src/assets/base.css
@ -0,0 +1,86 @@
+/* color palette from <https://github.com/vuejs/theme> */
+:root {
+  --vt-c-white: #ffffff;
+  --vt-c-white-soft: #f8f8f8;
+  --vt-c-white-mute: #f2f2f2;
+
+  --vt-c-black: #181818;
+  --vt-c-black-soft: #222222;
+  --vt-c-black-mute: #282828;
+
+  --vt-c-indigo: #2c3e50;
+
+  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
+  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
+  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+
+  --vt-c-text-light-1: var(--vt-c-indigo);
+  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
+  --vt-c-text-dark-1: var(--vt-c-white);
+  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+}
+
+/* semantic color variables for this project */
+:root {
+  --color-background: var(--vt-c-white);
+  --color-background-soft: var(--vt-c-white-soft);
+  --color-background-mute: var(--vt-c-white-mute);
+
+  --color-border: var(--vt-c-divider-light-2);
+  --color-border-hover: var(--vt-c-divider-light-1);
+
+  --color-heading: var(--vt-c-text-light-1);
+  --color-text: var(--vt-c-text-light-1);
+
+  --section-gap: 160px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: var(--vt-c-black);
+    --color-background-soft: var(--vt-c-black-soft);
+    --color-background-mute: var(--vt-c-black-mute);
+
+    --color-border: var(--vt-c-divider-dark-2);
+    --color-border-hover: var(--vt-c-divider-dark-1);
+
+    --color-heading: var(--vt-c-text-dark-1);
+    --color-text: var(--vt-c-text-dark-2);
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  font-weight: normal;
+}
+
+body {
+  min-height: 100vh;
+  color: var(--color-text);
+  background: var(--color-background);
+  transition:
+    color 0.5s,
+    background-color 0.5s;
+  line-height: 1.6;
+  font-family:
+    Inter,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Fira Sans',
+    'Droid Sans',
+    'Helvetica Neue',
+    sans-serif;
+  font-size: 15px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
--- a/src/assets/logo.svg
+++ b/src/assets/logo.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
--- a/src/assets/main.css
+++ b/src/assets/main.css
@ -0,0 +1,33 @@
+@import './base.css';
+
+#app {
+  margin: 0 auto;
+  font-weight: normal;
+}
+
+a,
+.green {
+  text-decoration: none;
+  color: hsla(160, 100%, 37%, 1);
+  transition: 0.4s;
+  padding: 3px;
+}
+
+@media (hover: hover) {
+  a:hover {
+    background-color: hsla(160, 100%, 37%, 0.2);
+  }
+}
+
+/*@media (min-width: 1024px) {*/
+/*  body {*/
+/*    display: flex;*/
+/*    place-items: center;*/
+/*  }*/
+
+/*  #app {*/
+/*    display: grid;*/
+/*    grid-template-columns: 1fr 1fr;*/
+/*    padding: 0 2rem;*/
+/*  }*/
+/*}*/
--- a/src/components/CommonHeader.vue
+++ b/src/components/CommonHeader.vue
@ -0,0 +1,70 @@
+<script setup lang="ts">
+defineProps<{
+  title: string
+}>()
+</script>
+
+<template>
+  <div class="item">
+    <img
+        style="width: 30px"
+        src="@/assets/logo.svg"
+        alt="logo"
+    />
+    <div class="details">
+      <h3>
+        {{title}}
+      </h3>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.item {
+  display: flex;
+}
+
+.details {
+  flex: 1;
+  margin-left: 1rem;
+}
+
+h3 {
+  font-size: 1.2rem;
+  font-weight: 500;
+  margin-bottom: 0.4rem;
+  color: var(--color-heading);
+}
+
+@media (min-width: 1024px) {
+  .item {
+    margin-top: 0;
+  }
+
+  .item:before {
+    content: ' ';
+    border-left: 1px solid var(--color-border);
+    position: absolute;
+    left: 0;
+    bottom: calc(50% + 25px);
+    height: calc(50% - 25px);
+  }
+
+  .item:after {
+    content: ' ';
+    border-left: 1px solid var(--color-border);
+    position: absolute;
+    left: 0;
+    top: calc(50% + 25px);
+    height: calc(50% - 25px);
+  }
+
+  .item:first-of-type:before {
+    display: none;
+  }
+
+  .item:last-of-type:after {
+    display: none;
+  }
+}
+</style>
--- a/src/components/CommonView.vue
+++ b/src/components/CommonView.vue
@ -0,0 +1,19 @@
+<script setup lang="ts">
+import CommonHeader from "@/components/CommonHeader.vue";
+
+defineProps<{
+  title: string
+}>()
+</script>
+
+<template>
+  <div class="common-layout">
+    <el-container>
+      <el-header style="align-content: center">
+        <CommonHeader :title="title"/>
+      </el-header>
+      <el-main><slot></slot></el-main>
+    </el-container>
+  </div>
+</template>
+
--- a/src/components/WelcomeItem.vue
+++ b/src/components/WelcomeItem.vue
@ -0,0 +1,87 @@
+<template>
+  <div class="item">
+    <i>
+      <slot name="icon"></slot>
+    </i>
+    <div class="details">
+      <h3>
+        <slot name="heading"></slot>
+      </h3>
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.item {
+  margin-top: 2rem;
+  display: flex;
+  position: relative;
+}
+
+.details {
+  flex: 1;
+  margin-left: 1rem;
+}
+
+i {
+  display: flex;
+  place-items: center;
+  place-content: center;
+  width: 32px;
+  height: 32px;
+
+  color: var(--color-text);
+}
+
+h3 {
+  font-size: 1.2rem;
+  font-weight: 500;
+  margin-bottom: 0.4rem;
+  color: var(--color-heading);
+}
+
+@media (min-width: 1024px) {
+  .item {
+    margin-top: 0;
+    padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
+  }
+
+  i {
+    top: calc(50% - 25px);
+    left: -26px;
+    position: absolute;
+    border: 1px solid var(--color-border);
+    background: var(--color-background);
+    border-radius: 8px;
+    width: 50px;
+    height: 50px;
+  }
+
+  .item:before {
+    content: ' ';
+    border-left: 1px solid var(--color-border);
+    position: absolute;
+    left: 0;
+    bottom: calc(50% + 25px);
+    height: calc(50% - 25px);
+  }
+
+  .item:after {
+    content: ' ';
+    border-left: 1px solid var(--color-border);
+    position: absolute;
+    left: 0;
+    top: calc(50% + 25px);
+    height: calc(50% - 25px);
+  }
+
+  .item:first-of-type:before {
+    display: none;
+  }
+
+  .item:last-of-type:after {
+    display: none;
+  }
+}
+</style>
--- a/src/main.js
+++ b/src/main.js
@ -0,0 +1,23 @@
+import "./assets/main.css"
+
+import { createApp } from "vue"
+import { createPinia } from "pinia"
+
+import ElementPlus from "element-plus"
+import "element-plus/dist/index.css"
+
+import App from "./App.vue"
+import router from "./router"
+
+const app = createApp(App)
+import * as ElementPlusIconsVue from "@element-plus/icons-vue"
+
+app.use(ElementPlus)
+// app.use(ElementPlus, { size: 'small', zIndex: 3000 })
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+  app.component(key, component)
+}
+app.use(createPinia())
+app.use(router)
+
+app.mount("#app")
--- a/src/router/index.ts
+++ b/src/router/index.ts
@ -0,0 +1,35 @@
+import { createRouter, createWebHashHistory } from "vue-router"
+import HomeView from "../views/HomeView.vue"
+import Login from "@/views/Login.vue"
+import RegisterView from "@/views/RegisterView.vue"
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes: [
+    {
+      path: "/",
+      name: "home",
+      component: HomeView
+    },
+    {
+      path: "/about",
+      name: "about",
+      // route level code-splitting
+      // this generates a separate chunk (About.[hash].js) for this route
+      // which is lazy-loaded when the route is visited.
+      component: () => import("../views/AboutView.vue")
+    },
+    {
+      path: "/login",
+      name: "登录",
+      component: Login
+    },
+    {
+      path: "/register",
+      name: "注册",
+      component: RegisterView
+    }
+  ]
+})
+
+export default router
--- a/src/stores/counter.ts
+++ b/src/stores/counter.ts
@ -0,0 +1,12 @@
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useCounterStore = defineStore('counter', () => {
+  const count = ref(0)
+  const doubleCount = computed(() => count.value * 2)
+  function increment() {
+    count.value++
+  }
+
+  return { count, doubleCount, increment }
+})
--- a/src/style/common.css
+++ b/src/style/common.css
@ -0,0 +1,4 @@
+.common-layout{
+    width: 100vw; /* 100% of the viewport width */
+    height: 100vh; /* 100% of the viewport height */
+}
--- a/src/utils/CommonUtil.js
+++ b/src/utils/CommonUtil.js
@ -0,0 +1,112 @@
+import { md5_hex } from "./md5"
+
+class _CommonUtil {
+  functionReqMap = new Map()
+
+  setTimeOutMap = new Map()
+
+  /**
+   * 防抖函数（调用会立即触发，在wait时间内不再触发）
+   * @param fun  业务函数
+   * @param wait  等待时间（在等待时间内防止重复触发,默认1.5秒内拒绝所有数据）
+   * 使用示例：wait可以不填写，默认1500毫秒
+   * CommonUtil.debounce(()=>{
+   *     // todo
+   * },500)
+   */
+  debounce(fun, wait = 1500) {
+    let funcValue1 = fun.toString()
+    let hash = md5_hex(funcValue1)
+    let startTime = Date.now()
+    if (this.functionReqMap.get(hash)) {
+      let funcValue = this.functionReqMap.get(hash)
+      // 防止因为特殊原因没有移除map中该函数的记录，导致一直无法执行函数的问题
+      if (funcValue && funcValue.startTime + funcValue.wait <= startTime) {
+        this.functionReqMap.delete(hash)
+      } else {
+        return
+      }
+    }
+    this.functionReqMap.set(hash, {
+      startTime: startTime,
+      wait: wait
+    })
+    // 执行函数调用
+    fun()
+    // 拦截在wait期间的函数再次调用，在超时后，将限制解除
+    setTimeout(() => {
+      let needRemoveKeys = []
+      this.functionReqMap.forEach((value, key, map) => {
+        let curTime = Date.now()
+        let funcValue = map.get(key)
+        if (funcValue && funcValue.startTime + funcValue.wait <= curTime) {
+          // @ts-ignore
+          needRemoveKeys.push(key)
+        }
+      })
+      needRemoveKeys.map((value) => {
+        this.functionReqMap.delete(value)
+      })
+    }, wait)
+  }
+
+  debounceHold(fun, wait = 1500) {
+    return this.throttle(fun, wait)
+  }
+
+  uniqueIdMap = new WeakMap()
+
+  getUuid() {
+    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
+      var r = (Math.random() * 16) | 0,
+        v = c == "x" ? r : (r & 0x3) | 0x8
+      return v.toString(16)
+    })
+  }
+
+  getUniqueId(fun) {
+    if (!this.uniqueIdMap.has(fun)) {
+      this.uniqueIdMap.set(fun, this.getUuid())
+    }
+    return this.uniqueIdMap.get(fun)
+  }
+
+  /**
+   * 防抖动函数，调用后会延迟wait时间执行，当在wait时间内再次对同一函数调用，则会取消之前的定时器，重新定时
+   * @param fun
+   * @param wait
+   * @return setTimeout的句柄
+   */
+  throttle(fun, wait = 1500) {
+    let funcValue1 = this.getUniqueId(fun)
+    let hash = md5_hex(funcValue1)
+    if (this.setTimeOutMap.get(hash)) {
+      clearTimeout(this.setTimeOutMap.get(hash)?.timeoutNumber)
+      this.setTimeOutMap.delete(hash)
+    }
+    // this.checkTimeOutNumber()
+    let timeoutNumber = setTimeout(() => {
+      this.setTimeOutMap.get(hash) && clearTimeout(this.setTimeOutMap.get(hash)?.timeoutNumber)
+      this.setTimeOutMap.delete(hash)
+      // 执行函数调用
+      fun()
+    }, wait)
+
+    this.setTimeOutMap.set(hash, {
+      timeoutNumber: timeoutNumber,
+      startTime: new Date().getTime()
+    })
+    return timeoutNumber
+  }
+
+  /**
+   * 取消延迟执行函数
+   * @param timeoutId  debounceHold返回的timeout句柄
+   */
+  cancel(timeoutId) {
+    clearTimeout(timeoutId)
+  }
+}
+
+/* eslint-enable */
+export const CommonUtil = new _CommonUtil()
--- a/src/utils/md5.js
+++ b/src/utils/md5.js
@ -0,0 +1,252 @@
+/*
+ * A JavaScript implementation of the RSA Data Security, Inc. MD5 Message
+ * Digest Algorithm, as defined in RFC 1321.
+ * Version 2.1 Copyright (C) Paul Johnston 1999 - 2002.
+ * Other contributors: Greg Holt, Andrew Kepert, Ydnar, Lostinet
+ * Distributed under the BSD License
+ * See http://pajhome.org.uk/crypt/md5 for more info.
+ */
+
+/*
+ * Configurable variables. You may need to tweak these to be compatible with
+ * the server-side, but the defaults work in most cases.
+ */
+var hexcase = 0 /* hex output format. 0 - lowercase; 1 - uppercase        */
+var b64pad = "" /* base-64 pad character. "=" for strict RFC compliance   */
+var chrsz = 8 /* bits per input character. 8 - ASCII; 16 - Unicode      */
+
+/*
+ * These are the functions you'll usually want to call
+ * They take string arguments and return either hex or base-64 encoded strings
+ */
+//32位小写
+export function md5_hex(s) {
+  return binl2hex(core_md5(str2binl(s), s.length * chrsz))
+}
+export function md5_b64(s) {
+  return binl2b64(core_md5(str2binl(s), s.length * chrsz))
+}
+export function md5_str(s) {
+  return binl2str(core_md5(str2binl(s), s.length * chrsz))
+}
+export function md5_hex_hmac(key, data) {
+  return binl2hex(core_hmac_md5(key, data))
+}
+export function md5_b64_hmac(key, data) {
+  return binl2b64(core_hmac_md5(key, data))
+}
+export function md5_str_hmac(key, data) {
+  return binl2str(core_hmac_md5(key, data))
+}
+
+/*
+ * Perform a simple self-test to see if the VM is working
+ */
+function md5_vm_test() {
+  return md5_hex("abc") == "900150983cd24fb0d6963f7d28e17f72"
+}
+
+/*
+ * Calculate the MD5 of an array of little-endian words, and a bit length
+ */
+function core_md5(x, len) {
+  /* append padding */
+  x[len >> 5] |= 0x80 << len % 32
+  x[(((len + 64) >>> 9) << 4) + 14] = len
+
+  var a = 1732584193
+  var b = -271733879
+  var c = -1732584194
+  var d = 271733878
+
+  for (var i = 0; i < x.length; i += 16) {
+    var olda = a
+    var oldb = b
+    var oldc = c
+    var oldd = d
+
+    a = md5_ff(a, b, c, d, x[i + 0], 7, -680876936)
+    d = md5_ff(d, a, b, c, x[i + 1], 12, -389564586)
+    c = md5_ff(c, d, a, b, x[i + 2], 17, 606105819)
+    b = md5_ff(b, c, d, a, x[i + 3], 22, -1044525330)
+    a = md5_ff(a, b, c, d, x[i + 4], 7, -176418897)
+    d = md5_ff(d, a, b, c, x[i + 5], 12, 1200080426)
+    c = md5_ff(c, d, a, b, x[i + 6], 17, -1473231341)
+    b = md5_ff(b, c, d, a, x[i + 7], 22, -45705983)
+    a = md5_ff(a, b, c, d, x[i + 8], 7, 1770035416)
+    d = md5_ff(d, a, b, c, x[i + 9], 12, -1958414417)
+    c = md5_ff(c, d, a, b, x[i + 10], 17, -42063)
+    b = md5_ff(b, c, d, a, x[i + 11], 22, -1990404162)
+    a = md5_ff(a, b, c, d, x[i + 12], 7, 1804603682)
+    d = md5_ff(d, a, b, c, x[i + 13], 12, -40341101)
+    c = md5_ff(c, d, a, b, x[i + 14], 17, -1502002290)
+    b = md5_ff(b, c, d, a, x[i + 15], 22, 1236535329)
+
+    a = md5_gg(a, b, c, d, x[i + 1], 5, -165796510)
+    d = md5_gg(d, a, b, c, x[i + 6], 9, -1069501632)
+    c = md5_gg(c, d, a, b, x[i + 11], 14, 643717713)
+    b = md5_gg(b, c, d, a, x[i + 0], 20, -373897302)
+    a = md5_gg(a, b, c, d, x[i + 5], 5, -701558691)
+    d = md5_gg(d, a, b, c, x[i + 10], 9, 38016083)
+    c = md5_gg(c, d, a, b, x[i + 15], 14, -660478335)
+    b = md5_gg(b, c, d, a, x[i + 4], 20, -405537848)
+    a = md5_gg(a, b, c, d, x[i + 9], 5, 568446438)
+    d = md5_gg(d, a, b, c, x[i + 14], 9, -1019803690)
+    c = md5_gg(c, d, a, b, x[i + 3], 14, -187363961)
+    b = md5_gg(b, c, d, a, x[i + 8], 20, 1163531501)
+    a = md5_gg(a, b, c, d, x[i + 13], 5, -1444681467)
+    d = md5_gg(d, a, b, c, x[i + 2], 9, -51403784)
+    c = md5_gg(c, d, a, b, x[i + 7], 14, 1735328473)
+    b = md5_gg(b, c, d, a, x[i + 12], 20, -1926607734)
+
+    a = md5_hh(a, b, c, d, x[i + 5], 4, -378558)
+    d = md5_hh(d, a, b, c, x[i + 8], 11, -2022574463)
+    c = md5_hh(c, d, a, b, x[i + 11], 16, 1839030562)
+    b = md5_hh(b, c, d, a, x[i + 14], 23, -35309556)
+    a = md5_hh(a, b, c, d, x[i + 1], 4, -1530992060)
+    d = md5_hh(d, a, b, c, x[i + 4], 11, 1272893353)
+    c = md5_hh(c, d, a, b, x[i + 7], 16, -155497632)
+    b = md5_hh(b, c, d, a, x[i + 10], 23, -1094730640)
+    a = md5_hh(a, b, c, d, x[i + 13], 4, 681279174)
+    d = md5_hh(d, a, b, c, x[i + 0], 11, -358537222)
+    c = md5_hh(c, d, a, b, x[i + 3], 16, -722521979)
+    b = md5_hh(b, c, d, a, x[i + 6], 23, 76029189)
+    a = md5_hh(a, b, c, d, x[i + 9], 4, -640364487)
+    d = md5_hh(d, a, b, c, x[i + 12], 11, -421815835)
+    c = md5_hh(c, d, a, b, x[i + 15], 16, 530742520)
+    b = md5_hh(b, c, d, a, x[i + 2], 23, -995338651)
+
+    a = md5_ii(a, b, c, d, x[i + 0], 6, -198630844)
+    d = md5_ii(d, a, b, c, x[i + 7], 10, 1126891415)
+    c = md5_ii(c, d, a, b, x[i + 14], 15, -1416354905)
+    b = md5_ii(b, c, d, a, x[i + 5], 21, -57434055)
+    a = md5_ii(a, b, c, d, x[i + 12], 6, 1700485571)
+    d = md5_ii(d, a, b, c, x[i + 3], 10, -1894986606)
+    c = md5_ii(c, d, a, b, x[i + 10], 15, -1051523)
+    b = md5_ii(b, c, d, a, x[i + 1], 21, -2054922799)
+    a = md5_ii(a, b, c, d, x[i + 8], 6, 1873313359)
+    d = md5_ii(d, a, b, c, x[i + 15], 10, -30611744)
+    c = md5_ii(c, d, a, b, x[i + 6], 15, -1560198380)
+    b = md5_ii(b, c, d, a, x[i + 13], 21, 1309151649)
+    a = md5_ii(a, b, c, d, x[i + 4], 6, -145523070)
+    d = md5_ii(d, a, b, c, x[i + 11], 10, -1120210379)
+    c = md5_ii(c, d, a, b, x[i + 2], 15, 718787259)
+    b = md5_ii(b, c, d, a, x[i + 9], 21, -343485551)
+
+    a = safe_add(a, olda)
+    b = safe_add(b, oldb)
+    c = safe_add(c, oldc)
+    d = safe_add(d, oldd)
+  }
+  return [a, b, c, d]
+}
+
+/*
+ * These functions implement the four basic operations the algorithm uses.
+ */
+function md5_cmn(q, a, b, x, s, t) {
+  return safe_add(bit_rol(safe_add(safe_add(a, q), safe_add(x, t)), s), b)
+}
+function md5_ff(a, b, c, d, x, s, t) {
+  return md5_cmn((b & c) | (~b & d), a, b, x, s, t)
+}
+function md5_gg(a, b, c, d, x, s, t) {
+  return md5_cmn((b & d) | (c & ~d), a, b, x, s, t)
+}
+function md5_hh(a, b, c, d, x, s, t) {
+  return md5_cmn(b ^ c ^ d, a, b, x, s, t)
+}
+function md5_ii(a, b, c, d, x, s, t) {
+  return md5_cmn(c ^ (b | ~d), a, b, x, s, t)
+}
+
+/*
+ * Calculate the HMAC-MD5, of a key and some data
+ */
+function core_hmac_md5(key, data) {
+  var bkey = str2binl(key)
+  if (bkey.length > 16) bkey = core_md5(bkey, key.length * chrsz)
+
+  var ipad = Array(16),
+    opad = Array(16)
+  for (var i = 0; i < 16; i++) {
+    ipad[i] = bkey[i] ^ 0x36363636
+    opad[i] = bkey[i] ^ 0x5c5c5c5c
+  }
+
+  var hash = core_md5(ipad.concat(str2binl(data)), 512 + data.length * chrsz)
+  return core_md5(opad.concat(hash), 512 + 128)
+}
+
+/*
+ * Add integers, wrapping at 2^32. This uses 16-bit operations internally
+ * to work around bugs in some JS interpreters.
+ */
+function safe_add(x, y) {
+  var lsw = (x & 0xffff) + (y & 0xffff)
+  var msw = (x >> 16) + (y >> 16) + (lsw >> 16)
+  return (msw << 16) | (lsw & 0xffff)
+}
+
+/*
+ * Bitwise rotate a 32-bit number to the left.
+ */
+function bit_rol(num, cnt) {
+  return (num << cnt) | (num >>> (32 - cnt))
+}
+
+/*
+ * Convert a string to an array of little-endian words
+ * If chrsz is ASCII, characters >255 have their hi-byte silently ignored.
+ */
+function str2binl(str) {
+  var bin = []
+  var mask = (1 << chrsz) - 1
+  for (var i = 0; i < str.length * chrsz; i += chrsz)
+    bin[i >> 5] |= (str.charCodeAt(i / chrsz) & mask) << i % 32
+  return bin
+}
+
+/*
+ * Convert an array of little-endian words to a string
+ */
+function binl2str(bin) {
+  var str = ""
+  var mask = (1 << chrsz) - 1
+  for (var i = 0; i < bin.length * 32; i += chrsz)
+    str += String.fromCharCode((bin[i >> 5] >>> i % 32) & mask)
+  return str
+}
+
+/*
+ * Convert an array of little-endian words to a hex string.
+ */
+function binl2hex(binarray) {
+  var hex_tab = hexcase ? "0123456789ABCDEF" : "0123456789abcdef"
+  var str = ""
+  for (var i = 0; i < binarray.length * 4; i++) {
+    str +=
+      hex_tab.charAt((binarray[i >> 2] >> ((i % 4) * 8 + 4)) & 0xf) +
+      hex_tab.charAt((binarray[i >> 2] >> ((i % 4) * 8)) & 0xf)
+  }
+  return str
+}
+
+/*
+ * Convert an array of little-endian words to a base-64 string
+ */
+function binl2b64(binarray) {
+  var tab = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/"
+  var str = ""
+  for (var i = 0; i < binarray.length * 4; i += 3) {
+    var triplet =
+      (((binarray[i >> 2] >> (8 * (i % 4))) & 0xff) << 16) |
+      (((binarray[(i + 1) >> 2] >> (8 * ((i + 1) % 4))) & 0xff) << 8) |
+      ((binarray[(i + 2) >> 2] >> (8 * ((i + 2) % 4))) & 0xff)
+    for (var j = 0; j < 4; j++) {
+      if (i * 8 + j * 6 > binarray.length * 32) str += b64pad
+      else str += tab.charAt((triplet >> (6 * (3 - j))) & 0x3f)
+    }
+  }
+  return str
+}
--- a/src/views/AboutView.vue
+++ b/src/views/AboutView.vue
@ -0,0 +1,21 @@
+<template>
+  <div class="about">
+    <h1>This is an about page{{ c.count }}{{ c.doubleCount }}</h1>
+    <el-button @click="c.increment">点击 </el-button>
+  </div>
+</template>
+<script setup lang="ts">
+import { useCounterStore } from "@/stores/counter"
+
+const c = useCounterStore()
+</script>
+
+<style>
+@media (min-width: 1024px) {
+  .about {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+  }
+}
+</style>
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@ -0,0 +1,39 @@
+<template>
+  <div class="common-layout">
+    <el-container>
+      <el-header>
+        <el-menu
+          :default-active="activeIndex"
+          menu-trigger="click"
+          class="el-menu-demo"
+          mode="horizontal"
+          :ellipsis="false"
+          :router="true"
+        >
+          <el-menu-item index="/">
+            <img style="width: 60px" src="@/assets/logo.svg" alt="logo" />
+          </el-menu-item>
+          <el-menu-item index="/about">控制台</el-menu-item>
+          <el-menu-item index="/login">登录</el-menu-item>
+          <el-menu-item index="/register">注册</el-menu-item>
+        </el-menu>
+      </el-header>
+      <el-main>Main</el-main>
+    </el-container>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue"
+
+const activeIndex = ref("1")
+const handleSelect = (key: string, keyPath: string[]) => {
+  console.log(key, keyPath)
+}
+</script>
+
+<style>
+.el-menu--horizontal > .el-menu-item:nth-child(1) {
+  margin-right: auto;
+}
+</style>
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@ -0,0 +1,14 @@
+<script setup lang="ts">
+import CommonHeader from "@/components/CommonHeader.vue"
+</script>
+
+<template>
+  <el-container>
+    <el-header>
+      <CommonHeader title="登录" />
+    </el-header>
+    <el-main>Main</el-main>
+  </el-container>
+</template>
+
+<style scoped></style>
--- a/src/views/RegisterView.vue
+++ b/src/views/RegisterView.vue
@ -0,0 +1,123 @@
+<script setup lang="ts">
+import CommonView from "@/components/CommonView.vue"
+import { ref } from "vue"
+import { Lock, Phone, User } from "@element-plus/icons-vue"
+import { useRouter } from "vue-router"
+import { ElMessage } from "element-plus"
+// @ts-ignore
+import API from "@/api/index.js"
+
+const router = useRouter()
+
+const Api = API
+
+const email = ref("")
+const pwd = ref("")
+const pwd2 = ref("")
+const phone = ref("")
+const code = ref("")
+
+const open = () => {
+  router.push("/login")
+}
+
+const register = () => {
+  if (email.value.length === 0) {
+    ElMessage.error("请输入正确的邮箱地址")
+    return
+  }
+  if (pwd.value.length === 0) {
+    ElMessage.error("请输入密码")
+    return
+  }
+  if (pwd2.value.length === 0) {
+    ElMessage.error("请输入确认密码")
+    return
+  }
+  if (pwd2.value !== pwd.value) {
+    ElMessage.error("两次输入的密码不一致")
+    return
+  }
+  if (phone.value.length === 0) {
+    ElMessage.error("请输入正确手机号")
+    return
+  }
+  if (code.value.length === 0) {
+    ElMessage.error("请输入验证吗")
+    return
+  }
+  if (code.value !== "123456") {
+    ElMessage.error("验证码错误")
+    return
+  }
+  Api.login({
+    userEmail: email.value,
+    userPhone: phone.value,
+    userPwd: pwd.value
+  })
+}
+</script>
+
+<template>
+  <CommonView title="注册">
+    <div style="display: flex; place-content: center">
+      <el-card style="max-width: 480px">
+        <template #header>
+          <div class="card-header" style="display: flex; flex-direction: row-reverse">
+            <el-button type="primary" @click="open">登录</el-button>
+          </div>
+        </template>
+        <div class="flex gap-4 mb-4">
+          <el-input
+            class="text item"
+            v-model="email"
+            style="width: 440px"
+            placeholder="请输入邮箱地址"
+            :prefix-icon="User"
+            :clearable="true"
+          />
+          <el-input
+            v-model="pwd"
+            style="width: 440px; margin-top: 18px"
+            placeholder="请输入密码"
+            :prefix-icon="Lock"
+            :clearable="true"
+            :show-password="true"
+          />
+          <el-input
+            v-model="pwd2"
+            style="width: 440px; margin-top: 18px"
+            placeholder="请输入确认密码"
+            :prefix-icon="Lock"
+            :show-password="true"
+            :clearable="true"
+          />
+          <el-input
+            v-model="phone"
+            style="width: 440px; margin-top: 18px"
+            placeholder="请输入手机号"
+            :prefix-icon="Phone"
+            :clearable="true"
+          />
+          <el-input
+            v-model="code"
+            style="width: 440px; margin-top: 18px"
+            placeholder="请输入验证码"
+            :prefix-icon="Lock"
+            :show-password="true"
+            :clearable="true"
+          >
+            <template #append>
+              <el-button>获取验证码</el-button>
+            </template>
+          </el-input>
+          <el-button style="width: 440px; margin-top: 28px" type="primary" @click="register"
+            >注册
+          </el-button>
+        </div>
+      </el-card>
+    </div>
+  </CommonView>
+</template>
+
+<style scoped></style>
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@ -0,0 +1,12 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    "composite": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,14 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ],
+  "include": [
+    "env.d.ts"
+  ]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@ -0,0 +1,16 @@
+{
+  "extends": "@tsconfig/node18/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*"
+  ],
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"]
+  }
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@ -0,0 +1,24 @@
+import { fileURLToPath, URL } from "node:url"
+
+import { defineConfig } from "vite"
+import vue from "@vitejs/plugin-vue"
+import vueJsx from "@vitejs/plugin-vue-jsx"
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue(), vueJsx()],
+  resolve: {
+    alias: {
+      "@": fileURLToPath(new URL("./src", import.meta.url))
+    }
+  },
+  server: {
+    proxy: {
+      "/xuqm": {
+        target: "http://localhost:4562/xuqm",
+        rewrite: (path) => path.replace(/^\/xuqm/, ""), // 重写路径
+        changeOrigin: true // target是域名的话，需要这个参数，
+      }
+    }
+  }
+})
--- a/yarn.lock
+++ b/yarn.lock
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>`