login

app.vue

@@ -1,12 +1,12 @@
 <template>
-  <div>
+  <el-scrollbar>
     <el-config-provider>
       <NuxtLayout :name="layout">
         <NuxtPage></NuxtPage>
       </NuxtLayout>
     </el-config-provider>
     <!--    AppConf-->
-  </div>
+  </el-scrollbar>
 </template>
 <script setup lang="ts">
 // import TabLayout from "~/layouts/TabLayout.vue";

assets/style/public.scss

@@ -1,6 +1,6 @@
 #__nuxt {
   width: 100%;
-  height: 100%;
+  height: 100vh;
   min-width: 1800px;
   margin: 0 auto;
   max-width: 1940px;

components/Header/Index.vue

@@ -14,42 +14,75 @@
       </el-menu-item>
     </el-menu>
 
-    <div v-if="!token" @click="setLoginVisible(true)">登录</div>
+    <div class="login-action-wrap">
-    <el-dropdown v-else trigger="click">
+      <div class="login-btn cursor-pointer" v-if="!token" @click="setLoginVisible(true)">登录</div>
-    <span class="el-dropdown-link">
+      <el-dropdown popper-class="login-popper" @command="handleCommand" v-else trigger="click">
-      登录
+        <div class="el-dropdown-link text-xl" style="line-height: 100px;">
+      {{ userInfo.mobile }}
       <el-icon class="el-icon--right"><ElIconCaretBottom/></el-icon>
-    </span>
+    </div>
-      <template #dropdown>
+        <template #dropdown>
-        <el-dropdown-menu>
+          <el-dropdown-menu>
-          <el-dropdown-item>OCR识别</el-dropdown-item>
+            <el-dropdown-item command="0">OCR识别</el-dropdown-item>
-          <el-dropdown-item>优化翻译</el-dropdown-item>
+            <el-dropdown-item command="1">优化翻译</el-dropdown-item>
-          <el-dropdown-item>翻译文本</el-dropdown-item>
+            <el-dropdown-item command="2">翻译文本</el-dropdown-item>
-          <el-dropdown-item>翻译文件</el-dropdown-item>
+            <el-dropdown-item command="3">翻译文件</el-dropdown-item>
-          <el-dropdown-item>推出登录</el-dropdown-item>
+            <el-dropdown-item command="4">退出登录</el-dropdown-item>
-        </el-dropdown-menu>
+          </el-dropdown-menu>
-      </template>
+        </template>
-    </el-dropdown>
+      </el-dropdown>
+    </div>
   </el-header>
 </template>
 
-<script setup>
+<script setup lang="ts">
 
 
 const {prefixCls} = useDesign('header-wrap')
 const route = useRoute()
 const router = useRouter();
 const routes = ref(router.getRoutes().filter(it => !it.meta.hidden));
+//@ts-ignore
 routes.value.sort((a, b) => a.meta.order - b.meta.order);
 const activeRoute = ref(route.path)
 const store = useAppStore()
-const { setLoginVisible } = useUserInfo()
+const {setLoginVisible, setInfo, setToken} = useUserInfo()
-const token = computed(()=> useUserInfo().$state.token);
+const token = computed(() => useUserInfo().$state.token);
+const userInfo = ref()
+
+function handleCommand(command:string) {
+  if (command === '4') {
+    ElMessageBox.confirm(
+      '确定要退出登录吗？',
+      '提示',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }
+    )
+      .then(() => {
+        setInfo({})
+        setToken('')
+        ElNotification.success('已退出登录')
+      })
+      .catch(() => {
+        ElMessage({
+          type: 'info',
+          message: '已取消退出登录',
+        })
+      })
+  }
+}
 
-onMounted(()=>{
+
-  console.log('token>>>>>', token)
+watchEffect(()=>{
+  console.log('useUserInfo().$state.info>>>>>>> header', useUserInfo().$state.info)
+  userInfo.value = useUserInfo().$state.info;
 })
-function handleChange(val) {
+
+
+function handleChange(val: any) {
   activeRoute.value = val.path;
   if (val.meta.hasOwnProperty('headerHost') && val.meta.headerHost) {
     store.setMenuTheme('dark')
@@ -136,4 +169,48 @@ $prefix-cls: '#{$name-prefix}-header-wrap';
 
   //height: 100px;
 }
+
+.login-btn {
+  line-height: 100px;
+  font-size: 20px;
+  font-weight: 400;
+  //@apply ;
+}
+.login-action-wrap {
+  padding-right: 30px;
+}
+.is-host {
+  * {
+    color: $white;
+  }
+}
+</style>
+<style lang="scss">
+.login-popper {
+
+  .el-dropdown-menu {
+    @apply  shadow-2xl;
+    padding: 0 0;
+  }
+  .el-dropdown-menu__item {
+    width: 176px;
+    padding: 20px 0;
+    text-align: center;
+    line-height: 1;
+    //border-bottom: 1px solid #eee;
+    @apply text-base block relative;
+    &:after{
+      content: '';
+      position: absolute;
+      height: 1px;
+      background-color: #eee;
+      left: 12px;
+      right: 12px;
+      bottom: 0;
+    }
+    &:last-of-type:after {
+      height: 0;
+    }
+  }
+}
 </style>

components/Login/Index.vue

@@ -4,9 +4,15 @@
     v-model="loginVisible"
     footer=""
     header=""
-    :closable="false"
+    :show-close="false"
     @close="onClose"
   >
+    <template #header>
+      <h2 class="mb-3 text-2xl font-bold text-center xl:text-3xl enter-x xl:text-left">
+        欢迎来到
+        <p>{{ title }}</p>
+      </h2>
+    </template>
     <el-form
       class="p-4 enter-x"
       :model="formData"
@@ -56,7 +62,7 @@ import { computed, reactive, ref, unref } from 'vue';
 import {FormInstance} from "element-plus";
 
 const userStore = useUserInfo();
-
+const title = computed(()=> import.meta.env.VITE_GLOB_APP_TITLE)
 const formRules = ref({
 
 })
@@ -65,9 +71,9 @@ const formRef = ref<FormInstance>();
 const loading = ref(false);
 
 const formData = reactive({
-  account: 'vben',
+  account: 'test',
   password: '123456',
-  captcha: '123456',
+  // captcha: '123456',
 });
 const prefixCls = useDesign('login');
 
@@ -77,13 +83,19 @@ async function handleLogin(formEl: FormInstance | undefined) {
   await formEl.validate(async (vail: boolean) => {
     if (vail) {
       loading.value = true;
-      const userInfo = await userStore.login({
+      try {
-        ...formData
+        const userInfo = await userStore.login({
-      });
+          ...formData
-      if (userInfo) {
+        });
-        userStore.setLoginVisible(false);
+        if (userInfo) {
-        ElMessage.success('登录成功');
+          ElNotification.success('登录成功')
+        }
+      } catch (e) {
+        loading.value = false;
+      } finally {
+        loading.value = false;
       }
+    }else {
       loading.value = false;
     }
 
@@ -101,16 +113,13 @@ const onClose = () => {
 </script>
 
 <style lang="less">
-.mai-login-modal {
+//$elPrefix: 'el-dialog';
+.el-dialog {
   width: 1105px !important;
   max-width: 1105px !important;
   min-width: 1105px !important;
-
+  border-radius: 10px;
-  .ant-modal-content {
+  &__header {
-    padding: 0 105px;
-    border-radius: 16px;
-    box-sizing: border-box;
-
     h2 {
       font-size: 48px;
       line-height: 67px;
@@ -124,47 +133,43 @@ const onClose = () => {
         margin-top: 12px;
       }
     }
+  }
+  &__body {
+    padding: 0 105px;
+    border-radius: 16px;
+    box-sizing: border-box;
+
 
-    .ant-input {
+    .el-input__wrapper {
       height: 117px;
       font-size: 32px;
       border-radius: 8px;
       padding: 0 60px;
     }
 
-    .ant-input-suffix {
+    .el-input-group--append {
-      height: 100%;
+      height: 117px;
-
+      .el-input__wrapper {
-      .anticon {
+        border-radius: 8px 0 0 8px;
-        font-size: 32px;
-        margin: 0 20px;
       }
-
+      .el-input-group__append {
+        padding: 1px;
+        box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;
+      }
+      background-color: unset;
       img {
         width: 100%;
         height: 100%;
       }
     }
 
-    .ant-input-password {
+    .el-button {
-      border-radius: 8px;
-    }
-
-    .ant-input-affix-wrapper {
-      display: flex;
-      align-items: center;
-      height: 119px;
-      padding: 0;
-      border-radius: 8px;
-      overflow: hidden;
-    }
-
-    .ant-btn {
       font-size: 28px;
       height: 106px;
       margin-bottom: 107px;
       background-color: #14417a;
       border-radius: 8px;
+      @apply w-full;
     }
   }
 }

composables/useUserInfo.ts

@@ -24,12 +24,18 @@ const useUserInfo = defineStore('user', {
       this.loginVisible = val;
     },
 
-    async login(data: any){
+    async login(data: any, redirect?: string){
       const { commonApi } = useApi()
       const res = await commonApi.login(data);
-      // if (res.data)
+      // this.setInfo(res.data)
-      console.log('login>>>>', res)
+      // this.setToken(res.data.token)
-
+      // this.setLoginVisible(false)
+      this.token = res.data.userinfo.token;
+      this.loginVisible = false
+      this.info = res.data.userinfo
+      if(redirect) {
+        useRouter().push(redirect)
+      }
       return res;
     }
 

utils/http.ts

@@ -36,8 +36,12 @@ function transform(error: any) {
 const fetch = $fetch.create({
     async onRequest({options}){
       options.baseURL = '/api';
+      const token = useUserInfo().$state.token;
       console.log('options>>>', options)
       options.headers = new Headers(options.headers);
+      if (token) {
+        options.headers.set('X-Access-Token', token)
+      }
     },
     // 响应拦截
     onResponse(ctx) {

utils/index.ts

@@ -7,13 +7,6 @@ import { cloneDeep } from 'lodash-es';
 
 export const noop = () => {};
 
-/**
- * @description:  Set ui mount node
- */
-export function getPopupContainer(node?: HTMLElement): HTMLElement {
-  return (node?.parentNode as HTMLElement) ?? document.body;
-}
-
 /**
  * Add the object as a parameter to the URL
  * @param baseUrl url