create-meadminjs 1.0.0

package/template/meadmin/view/index/src/views/login/components/register.vue

@@ -0,0 +1,192 @@
+<template>
+  <div class="register">
+    <div class="left">
+      <div class="explanation">
+        <div class="title">已有账户？</div>
+        <div class="desc">请使用您的账户进行登录</div>
+        <me-button class="button go" @click="setGo()">登录</me-button>
+      </div>
+    </div>
+    <div class="right">
+      <div class="form">
+        <div class="title">注 册</div>
+        <el-form ref="formRef" size="large" :rules="rules" :model="registerParams" @keyup.enter="submit">
+          <el-form-item prop="username" class="upload-item">
+            <me-up-avatar v-model="registerParams.avatar"></me-up-avatar>
+          </el-form-item>
+          <el-form-item prop="nickname">
+            <el-input v-model="registerParams.nickname" autofocus placeholder="昵称" clearable />
+          </el-form-item>
+          <el-form-item prop="username">
+            <el-input v-model="registerParams.username" placeholder="用户名" clearable />
+          </el-form-item>
+          <el-form-item prop="password">
+            <el-input v-model="registerParams.password" type="password" placeholder="密码" clearable show-password />
+          </el-form-item>
+          <el-form-item prop="password">
+            <el-input v-model="registerParams.reqPassword" type="password" placeholder="确认密码" clearable show-password />
+          </el-form-item>
+          <me-button class="button submit" @click="submit">注册</me-button>
+        </el-form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="Register">
+import { RegisterParams, registerApi } from '@/api/login';
+import { FormInstance } from 'element-plus';
+const registerParams = reactive(new RegisterParams());
+const rules = {
+  nickanem: [
+    {
+      required: true,
+      message: '请填写昵称',
+      trigger: 'blur',
+    },
+    {
+      min: 3,
+      max: 8,
+      message: '长度必须在 3 到 8个字符之间',
+      trigger: 'blur',
+    },
+  ],
+  username: [
+    {
+      required: true,
+      message: '请填写用户名',
+      trigger: 'blur',
+    },
+    {
+      min: 3,
+      max: 8,
+      message: '长度必须在 3 到 8个字符之间',
+      trigger: 'blur',
+    },
+  ],
+  password: [
+    {
+      required: true,
+      message: '请填写密码',
+      trigger: 'blur',
+    },
+    {
+      min: 6,
+      max: 20,
+      message: '长度必须在 6 到 20个字符之间',
+      trigger: 'blur',
+    },
+  ],
+  reqPassword: [
+    {
+      required: true,
+      message: '确认密码',
+      trigger: 'blur',
+      validator: (rule: any, value: string, callback: any) => {
+        if (!value) {
+          callback(new Error('请输入确认密码'));
+        } else if (value !== registerParams.password) {
+          callback(new Error('两次密码不一致'));
+        } else {
+          callback();
+        }
+      },
+    },
+  ],
+};
+const formRef = ref<FormInstance>();
+const { runAsync } = registerApi({});
+const submit = async () => {
+  formRef.value?.validate(async (valid, fields) => {
+    if (valid) {
+      await runAsync(registerParams);
+      emit('go', 'login');
+    } else {
+      console.log('提交错误', fields);
+    }
+  });
+};
+const emit = defineEmits<{
+  go: [id: 'login' | 'register'];
+}>();
+const setGo = () => {
+  emit('go', 'login');
+};
+</script>
+<style lang="scss" scoped>
+@use 'sass:math';
+
+.register {
+  background-image: linear-gradient(120deg, #8e44ad, #3498db) !important;
+
+  .right {
+    background-color: #fff;
+  }
+  .upload-item {
+    margin-bottom: 5px;
+  }
+  .upload-avater {
+    margin: 0 auto;
+    :deep(.el-upload-list) {
+      background-image: conic-gradient(#3498db 0deg, #8e44ad 0deg, var(--el-border-color-darker) 0deg);
+      width: 82px;
+      height: 82px;
+      border-radius: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .el-upload {
+        width: 80px;
+        height: 80px;
+        border-radius: 80px;
+        border-style: solid;
+        color: #a8abb2;
+        position: relative;
+        border-color: unset;
+      }
+
+      .text {
+        position: absolute;
+        background-color: rgba(0, 0, 0, 0.15);
+        color: #fcfcfc;
+        width: 100%;
+        height: 100%;
+        border-radius: 100%;
+        justify-content: center;
+        align-items: center;
+        display: none;
+        flex-direction: column;
+        line-height: 100%;
+        .text-desc {
+          font-size: 0.8em;
+        }
+      }
+      i {
+        font-size: 1.5em;
+      }
+      @keyframes conicProcess {
+        @for $i from 0 through 100 {
+          #{$i * 1%} {
+            background-image: conic-gradient(#3498db 0deg, #8e44ad #{math.div($i, 100) * 360 * 1deg}, var(--el-border-color-darker) #{math.div($i, 100) * 360 * 1deg});
+          }
+        }
+      }
+
+      &:hover {
+        animation: conicProcess 500ms ease-in;
+        animation-fill-mode: forwards;
+        .default-up-icon {
+          display: none;
+        }
+        .text {
+          display: flex;
+        }
+      }
+    }
+  }
+  :deep(.el-form-item__error) {
+    padding-left: 20px;
+  }
+}
+</style>

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

@@ -0,0 +1,147 @@
+<template>
+  <div class="index">
+    <div class="content">
+      <login class="content-body" :class="{ hidden: show === 'register' }" @go="(id) => (show = id)"></login>
+      <register class="content-body" @go="(id) => (show = id)"></register>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="LoginIndex">
+import Login from './components/login.vue';
+import Register from './components/register.vue';
+const { type = 'login' } = defineProps<{ type: 'login' | 'register' }>();
+const show = ref('login' as 'login' | 'register');
+watchEffect(() => {
+  show.value = type;
+});
+</script>
+<style lang="scss" scoped>
+.index {
+  padding-top: 15vh;
+  .content {
+    width: 800px;
+    height: 550px;
+    border-radius: 10px;
+    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+    margin: auto;
+    overflow: hidden;
+    display: flex;
+    .content-body {
+      background-image: linear-gradient(120deg, #3498db, #8e44ad);
+      transition: margin-left 600ms ease-in-out;
+      flex-shrink: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      :deep(.left),
+      :deep(.right) {
+        width: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        .button {
+          display: flex;
+          align-items: center;
+          margin: 0 auto;
+          margin-top: 25px;
+          border-radius: 20px;
+          font-size: 12px;
+          font-weight: bold;
+          padding: 12px 45px;
+          letter-spacing: 1px;
+          text-transform: uppercase;
+          transition: transform 80ms ease-in;
+          cursor: pointer;
+        }
+        button:hover {
+          transform: scale(1.05);
+        }
+        button:focus {
+          outline: none;
+        }
+        .form {
+          width: 85%;
+          .title {
+            text-align: center;
+            font-size: 32px;
+            font-weight: bolder;
+            margin-bottom: 30px;
+          }
+          .submit {
+            width: 200px;
+            background: linear-gradient(120deg, #3498db, #8e44ad);
+            color: #fff;
+          }
+
+          .el-input__wrapper {
+            box-shadow: unset;
+            border-radius: 0;
+            position: relative;
+            input {
+              border-bottom: 1px solid #dcdfe6;
+              padding: 5px;
+            }
+            &:after {
+              content: '';
+              width: 0;
+              position: absolute;
+              left: 15px;
+              right: 15px;
+              bottom: 1px;
+              height: 1px;
+              transition: width 500ms ease-in;
+            }
+            &:hover::after {
+              width: calc(100% - 30px);
+              background-image: linear-gradient(90deg, #3498db, #8e44ad);
+            }
+          }
+          .captcha-input {
+            input {
+              padding-right: 180px;
+            }
+            .el-input-group__append {
+              position: absolute;
+              right: 11px;
+              bottom: 2px;
+              box-shadow: none;
+              background: none;
+              padding: 0;
+
+              .captcha-img {
+                display: block;
+                width: 150px;
+                height: calc(var(--el-component-size) - 2px);
+                cursor: pointer;
+              }
+            }
+          }
+        }
+        .explanation {
+          color: #fff;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          .title {
+            font-size: 32px;
+            font-weight: bolder;
+            margin-bottom: 15px;
+            text-align: center;
+          }
+          .go {
+            background: transparent;
+            border: 1px solid #fff;
+            color: #fff;
+            padding: 20px 30px;
+          }
+        }
+      }
+    }
+    .hidden {
+      margin-left: -100%;
+    }
+  }
+}
+</style>

package/template/meadmin/view/index/src/views/promiseError.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="promise-error">
+    <mel-icon-warning-filled class="warn-icon"></mel-icon-warning-filled>
+    <div class="title">无权限访问</div>
+    <div class="footer">
+      <me-button class="button" @click="router.back">返回上一页</me-button>
+      <me-button class="button active" type="primary" plain @click="userStore.logOut">{{ userStore.token ? '重新登陆' : '去 登 陆' }}</me-button>
+    </div>
+  </div>
+</template>
+<script setup lang="ts" name="PromiseError">
+import { useUserStore } from '@/store';
+const userStore = useUserStore();
+const router = useRouter();
+defineProps<{ msg: string }>();
+</script>
+<style lang="scss" scoped>
+.promise-error {
+  margin-top: 10vh !important;
+  background-color: #fff;
+  padding: 80px 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: 16px;
+  border-radius: 10px;
+  .warn-icon {
+    font-size: 80px;
+    color: rgb(250, 182, 182);
+  }
+  .title {
+    margin-top: 15px;
+    font-size: 32px;
+    font-weight: bolder;
+  }
+  .footer {
+    margin-top: 20px;
+    .button {
+      border-radius: 99px;
+      width: 150px;
+      height: 40px;
+    }
+    .button:nth-child(n + 2) {
+      margin-left: 50px;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,9 @@
+<template>
+  <span></span>
+</template>
+<script setup lang="ts" name="Redirect">
+const route = useRoute();
+const router = useRouter();
+const fullPath = route.params.path as string;
+onMounted(() => router.replace(fullPath));
+</script>

package/template/meadmin/view/index/src/views/user/components/editPass.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="edit-pass">
+    <el-form ref="formRef" size="large" label-width="auto" :rules="rules" :model="editPassParams" @keyup.enter="submit">
+      <el-form-item prop="orgPassword" label="原始密码">
+        <el-input v-model="editPassParams.orgPassword" type="password" placeholder="原始密码" clearable show-password />
+      </el-form-item>
+      <el-form-item prop="password" label="新密码">
+        <el-input v-model="editPassParams.password" type="password" placeholder="新密码" clearable show-password />
+      </el-form-item>
+      <el-form-item prop="reqPassword" label="确认密码">
+        <el-input v-model="editPassParams.reqPassword" type="password" placeholder="请重复输入新密码" clearable show-password />
+      </el-form-item>
+      <me-button @click="resetForm(formRef)">重置</me-button>
+      <me-button type="primary" class="button submit" @click="submit">确定</me-button>
+    </el-form>
+  </div>
+</template>
+
+<script setup lang="ts" name="EditPass">
+import { updateUserApi } from '@/api/user.js';
+import { FormInstance, FormRules } from 'element-plus';
+const editPassParams = reactive({
+  orgPassword: '',
+  password: '',
+  reqPassword: '',
+});
+const rules: FormRules<typeof editPassParams> = {
+  orgPassword: [
+    {
+      required: true,
+      message: '请填写原始密码',
+      trigger: 'blur',
+    },
+  ],
+  password: [
+    {
+      required: true,
+      message: '请填写密码',
+      trigger: 'blur',
+    },
+    {
+      min: 6,
+      max: 20,
+      message: '长度必须在 6 到 20个字符之间',
+      trigger: 'blur',
+    },
+  ],
+  reqPassword: [
+    {
+      required: true,
+      message: '确认密码',
+      trigger: 'blur',
+      validator: (rule: any, value: string, callback: any) => {
+        if (!value) {
+          callback(new Error('请输入确认密码'));
+        } else if (value !== editPassParams.password) {
+          callback(new Error('两次密码不一致'));
+        } else {
+          callback();
+        }
+      },
+    },
+  ],
+};
+const formRef = ref<FormInstance>();
+const submit = async () => {
+  formRef.value?.validate(async (valid, fields) => {
+    if (valid) {
+      await updateUserApi().runAsync(editPassParams);
+    } else {
+      console.log('提交错误', fields);
+    }
+  });
+};
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  formEl.resetFields();
+};
+</script>
+<style lang="scss" scoped>
+.edit-pass {
+}
+</style>

package/template/meadmin/view/index/src/views/user/components/userInfo.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="user-info">
+    <el-form ref="formRef" size="large" label-width="auto" :rules="rules" :model="userParams" @keyup.enter="submit">
+      <el-form-item prop="username" class="upload-item">
+        <me-up-avatar v-model="userParams.avatar"></me-up-avatar>
+      </el-form-item>
+      <el-form-item prop="nickname" label="昵称">
+        <el-input v-model="userParams.nickname" autofocus placeholder="昵称" clearable />
+      </el-form-item>
+      <el-form-item prop="username" label="用户名">
+        <el-input v-model="userParams.username" placeholder="用户名" clearable />
+      </el-form-item>
+      <el-form-item prop="email" label="邮箱">
+        <el-input v-model="userParams.email" placeholder="邮箱" clearable />
+      </el-form-item>
+      <el-form-item prop="mobile" label="手机号">
+        <el-input v-model="userParams.mobile" placeholder="手机号" clearable />
+      </el-form-item>
+      <me-button @click="resetForm(formRef)">重置</me-button>
+      <me-button type="primary" class="button submit" @click="submit">确定</me-button>
+    </el-form>
+  </div>
+</template>
+
+<script setup lang="ts" name="UserInfo">
+import { updateUserApi, UpdateUserInfoParam, userInfoApi } from '@/api/user.js';
+import { FormInstance, FormRules } from 'element-plus';
+
+const userInfo = await userInfoApi().runAsync();
+const userParams = reactive(userInfo);
+const rules: FormRules<UpdateUserInfoParam> = {
+  nickname: [
+    {
+      required: true,
+      message: '请填写昵称',
+      trigger: 'blur',
+    },
+    {
+      min: 3,
+      max: 8,
+      message: '长度必须在 3 到 8个字符之间',
+      trigger: 'blur',
+    },
+  ],
+  username: [
+    {
+      required: true,
+      message: '请填写用户名',
+      trigger: 'blur',
+    },
+    {
+      min: 3,
+      max: 8,
+      message: '长度必须在 3 到 8个字符之间',
+      trigger: 'blur',
+    },
+  ],
+  email: [
+    {
+      type: 'email',
+      message: '请输入正确的邮箱格式',
+      trigger: ['blur'],
+    },
+  ],
+  mobile: [
+    {
+      pattern: /^1[0-9]\d{9}$/,
+      message: '请输入正确的手机号',
+      trigger: ['blur'],
+    },
+  ],
+};
+const formRef = ref<FormInstance>();
+const submit = async () => {
+  formRef.value?.validate(async (valid, fields) => {
+    if (valid) {
+      await updateUserApi().runAsync(userParams);
+    } else {
+      console.log('提交错误', fields);
+    }
+  });
+};
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  formEl.resetFields();
+};
+</script>
+<style lang="scss" scoped>
+.user-info {
+}
+</style>

package/template/meadmin/view/index/src/views/user/index.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="index">
+    <div class="left-menu">
+      <div class="title">个人中心</div>
+      <el-menu :default-active="active" class="menu">
+        <el-menu-item index="userInfo">
+          <mel-icon-user></mel-icon-user>
+          <router-link :to="PageEnum.USER + '/userInfo'">个人资料</router-link>
+        </el-menu-item>
+        <el-menu-item index="editPass">
+          <mel-icon-key></mel-icon-key>
+          <router-link :to="PageEnum.USER + '/editPass'">修改密码</router-link>
+        </el-menu-item>
+        <el-menu-item index="logout">
+          <mel-icon-arrow-right></mel-icon-arrow-right>
+          <span @click="logOut()">退出</span>
+        </el-menu-item>
+      </el-menu>
+    </div>
+    <div class="right-content">
+      <user-info v-if="active == 'userInfo'"></user-info>
+      <edit-pass v-else-if="active == 'editPass'"></edit-pass>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="UserIndex">
+import { PageEnum } from '@/dict/pageEnum.js';
+import { useUserStore } from '@/store/index.js';
+import editPass from './components/editPass.vue';
+import userInfo from './components/userInfo.vue';
+const userStore = useUserStore();
+const { active } = defineProps<{
+  active: 'userInfo' | 'editPass';
+}>();
+const router = useRouter();
+const logOut = () => {
+  userStore.logOut(router);
+};
+</script>
+<style lang="scss" scoped>
+.index {
+  padding-top: $page-padding;
+  display: flex;
+  justify-content: space-between;
+  .left-menu {
+    width: 200px;
+    background-color: #fff;
+    .title {
+      height: 50px;
+      display: flex;
+      align-items: center;
+      padding-left: 20px;
+      color: #9ea2ac;
+    }
+    .menu {
+      border-right: 0;
+    }
+  }
+  .right-content {
+    margin-left: 30px;
+    flex: 1;
+    background-color: #fff;
+    padding: $page-padding;
+  }
+}
+</style>

package/template/meadmin/view/index/template/components.d.ts

@@ -0,0 +1,9 @@
+declare module 'vue' {
+  export interface GlobalComponents {
+    //code
+  }
+}
+declare global {
+  //typeCode
+}
+export {};

package/template/meadmin/view/index/template/directives.d.ts

@@ -0,0 +1,6 @@
+declare module 'vue' {
+  export interface ComponentCustomProperties {
+    //code
+  }
+}
+export {};

package/template/meadmin/view/index/template/meIconComponents.d.ts

@@ -0,0 +1,6 @@
+declare module 'vue' {
+  export interface GlobalComponents {
+    //code
+  }
+}
+export {};

package/template/meadmin/view/index/tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "forceConsistentCasingInFileNames": true,
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "lib": ["esnext", "dom"],
+    "skipLibCheck": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"],
+      "#/*": ["types/*"]
+    },
+    "typeRoots": ["./node_modules/@types/", "./types", "./node_modules"],
+    "types": ["element-plus/global", "vite/client", "vite-svg-loader"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "types/**/*.d.ts", "mock/**/*.ts"],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ],
+  "vueCompilerOptions": {
+    "strictTemplates": false
+  }
+}