web1/src/views/login/index.vue

@@ -1,589 +1,109 @@
 <template>
-  <div class="page flex-col">
+  <AppPage :show-footer="true" bg-cover :style="{ backgroundImage: `url(${bgImg})` }">
-    <div class="section_1 flex-col" :style="{ backgroundImage: `url(${loginBgFull})` }">
+    <div
-      <div class="box_1 flex-row">
+      style="transform: translateY(25px)"
-        <div class="section_2 flex-col">
+      class="m-auto max-w-1500 min-w-750 f-c-c rounded-12 bg-white bg-opacity-80"
-          <div class="group_1 flex-col" :style="{ backgroundImage: `url(${loginBoxLeft})` }"></div>
+      dark:bg-dark
+    >
+      <div w-750 px-20 style="height: 400px; padding-top: 50px; text-align: center;">
+        <img style="width: 371px; height: 60px; margin: auto;" src="@/assets/images/logo.png" alt="">
+        <div mt-50 style="text-align: center; font-size: 48px; color: #303133; line-height: 48px; font-weight: 600; ">
+          非遗IP价值评估系统
         </div>
-        <div class="section_3 flex-col">
+        <div style="text-align: center; margin-top: 16px; color: #606266;">
-          <img class="image_1" referrerpolicy="no-referrer" :src="loginTitleImg" />
+          基于深度学习算法的智能评估系统，为您的知识产权和非物质文化遗产提供专业的价值评估服务
-          <n-form ref="formRef" :model="loginInfo" :rules="rules" :show-label="false">
+        </div>
-            <n-form-item path="phone">
+        <div mt-30>
-              <div class="block_1 flex-row">
+          <n-input
-                <div class="image-text_1 flex-row">
+            v-model:value="loginInfo.phone"
-                  <img class="thumbnail_1" referrerpolicy="no-referrer" :src="iconUserImg" />
+            style="display: inline-block; width: 260px; height: 42px; text-align: left; line-height: 42px;"
-                  <n-input
+            placeholder="请输入手机号"
-                    v-model:value="loginInfo.phone"
+            :maxlength="20"
-                    class="input-reset text-group_1 custom-n-input"
+            @keypress.enter="handleRegister"
-                    placeholder="请输入账号"
-                    type="text"
-                    :bordered="false"
-                    @keypress.enter="handleLogin"
-                  />
-                </div>
-              </div>
-            </n-form-item>
-            <div class="block_2 flex-row justify-between">
-              <n-form-item path="verifyCode" class="verify-code-item">
-                <div class="section_4 flex-row">
-                  <div class="image-text_2 flex-row">
-                    <img class="thumbnail_2" referrerpolicy="no-referrer" :src="iconCodeImg" />
-                    <n-input
-                      v-model:value="loginInfo.verifyCode"
-                      class="input-reset text-group_2 custom-n-input"
-                      placeholder="请输入验证码"
-                      type="text"
-                      :bordered="false"
-                      @keypress.enter="handleLogin"
-                    />
-                  </div>
-                </div>
-              </n-form-item>
-              <div
-                class="text-wrapper_1 flex-col cursor-pointer"
-                @click="handleSendCode"
-                :class="{ disabled: countdown > 0 }"
-              >
-                <span class="text_1">{{
-                  countdown > 0 ? `${countdown}秒后重新获取` : '获取验证码'
-                }}</span>
-              </div>
-            </div>
-          </n-form>
-          <div class="block_3 flex-row">
-            <n-checkbox v-model:checked="isAgreed" class="agreement-checkbox">
-              <span class="text-group_3">阅读并同意</span>
-              <span class="text_2">《用户协议》</span>
-            </n-checkbox>
-          </div>
-          <div
-            class="text-wrapper_2 flex-col cursor-pointer"
-            @click="handleLogin"
-            :style="{ backgroundImage: `url(${loginBtnBg})` }"
           >
-            <span class="text_3">立即登录</span>
+           <template #prefix>
-          </div>
+            <img style="width: 18px; height: 18px; margin-right: 8px;" src="@/assets/images/phone.png" alt="">
+          </template>
+          </n-input>
+
+          <n-button
+            w-126
+            h-42
+            rounded-5
+            type="primary"
+            style="background: linear-gradient( 93deg, #880C22 0%, #A30113 100%); margin-left: 20px; font-size: 16px; border: none !important;"
+            @click="handleRegister"
+          >
+            立即登录
+            <img style="width: 18px; height: 18px; margin-left: 2px;" src="@/assets/images/go.png" alt="">
+          </n-button>
         </div>
       </div>
     </div>
-  </div>
+  </AppPage>
 </template>
 
 <script setup>
-import { ref, onBeforeUnmount } from 'vue'
+import { lStorage, setToken } from '@/utils'
-import { useRouter, useRoute } from 'vue-router'
+import bgImg from '@/assets/images/login_bg.png'
-import { setToken } from '@/utils'
 import api from '@/api'
-
+import { addDynamicRoutes } from '@/router'
-// Images
+import { useI18n } from 'vue-i18n'
-import loginTitleImg from '@/assets/img/login_title.png'
-import iconUserImg from '@/assets/img/icon_user.png'
-import iconCodeImg from '@/assets/img/icon_code.png'
-import iconCheckboxImg from '@/assets/img/icon_checkbox.png'
-import loginBgFull from '@/assets/img/login_bg_full.png'
-import loginBoxLeft from '@/assets/img/login_box_left.png'
-import loginBtnBg from '@/assets/img/login_btn_bg.png'
 
 const router = useRouter()
 const { query } = useRoute()
+const { t } = useI18n({ useScope: 'global' })
 
 const loginInfo = ref({
   phone: '',
-  verifyCode: '',
-  requestId: '',
 })
 
-const isAgreed = ref(false)
+initLoginInfo()
-const countdown = ref(0)
+
-let countdownTimer = null
+function initLoginInfo() {
+  if(localStorage.getItem('phone')){
+    loginInfo.value.phone = localStorage.getItem('phone')
+  }
+  // const localLoginInfo = lStorage.get('loginInfo')
+  // if (localLoginInfo) {
+  //   loginInfo.value.phone = localLoginInfo.phone || ''
+  //   loginInfo.value.password = localLoginInfo.password || ''
+  // }
+}
+
 const loading = ref(false)
 
-// Initialize login info
+async function handleRegister() {
-if (localStorage.getItem('phone')) {
-  loginInfo.value.phone = localStorage.getItem('phone')
-}
-
-const formRef = ref(null)
-const rules = {
-  phone: [
-    { required: true, message: '请输入手机号', trigger: ['input', 'blur'] },
-    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: ['input', 'blur'] },
-  ],
-  verifyCode: [{ required: true, message: '请输入验证码', trigger: ['input', 'blur'] }],
-}
-
-// Validate phone
-function validatePhone(phone) {
-  const phoneReg = /^1[3-9]\d{9}$/
-  return phoneReg.test(phone)
-}
-
-// Send verification code
-async function handleSendCode() {
-  if (countdown.value > 0) return
-
   const { phone } = loginInfo.value
-
   if (!phone) {
     $message.warning('请输入手机号')
     return
   }
-
+  loading.value = true
-  if (!validatePhone(phone)) {
+  await api.registerPhone({ phone })
-    $message.warning('请输入正确的手机号')
+  .then(res=>{
-    return
+    handleLogin()
-  }
+  })
-
+  .catch(res=>{
-  try {
+    handleLogin()
-    const res = await api.sendVerifyCode({ phone })
-    loginInfo.value.requestId = res.data.request_id
-    $message.success('验证码已发送')
-
-    // Start countdown
-    countdown.value = 60
-    countdownTimer = setInterval(() => {
-      countdown.value--
-      if (countdown.value <= 0) {
-        clearInterval(countdownTimer)
-        countdownTimer = null
-      }
-    }, 1000)
-  } catch (error) {
-    console.error(error)
-  }
-}
-
-// Login
-async function handleLogin() {
-  const { phone, verifyCode, requestId } = loginInfo.value
-
-  if (!isAgreed.value) {
-    $message.warning('请阅读并同意用户协议')
-    return
-  }
-
-  formRef.value?.validate(async (errors) => {
-    if (!errors) {
-      loading.value = true
-      try {
-        const res = await api.loginWithVerifyCode({
-          phone_number: phone,
-          verification_code: verifyCode,
-          device_id: requestId,
-        })
-        if (res.data?.token?.access_token) {
-          setToken(res.data.token.access_token)
-          localStorage.setItem('phone', phone)
-
-          if (query.redirect) {
-            const path = query.redirect
-            Reflect.deleteProperty(query, 'redirect')
-            router.push({ path, query })
-          } else {
-            router.push('/home')
-          }
-        } else {
-          $message.error('登录失败：未获取到token')
-        }
-      } catch (error) {
-        console.error(error)
-      } finally {
-        loading.value = false
-      }
-    }
   })
 }
 
-onBeforeUnmount(() => {
+async function handleLogin() {
-  if (countdownTimer) {
+  const { phone } = loginInfo.value
-    clearInterval(countdownTimer)
+  loading.value = true
-    countdownTimer = null
+  await api.loginPhone({ phone, password: phone.slice(5,11) }).catch(res=>{
-  }
+    setToken(res.error.access_token)
-})
+    if (query.redirect) {
+      const path = query.redirect
+      localStorage.setItem('phone', phone)
+      Reflect.deleteProperty(query, 'redirect')
+      router.push({ path, query })
+    } else {
+      router.push('/')
+    }
+    loading.value = false
+  })
+  
+}
 </script>
-
-<style scoped>
-/* Utility Classes */
-.flex-col {
-  display: flex;
-  flex-direction: column;
-}
-
-.flex-row {
-  display: flex;
-  flex-direction: row;
-}
-
-.justify-between {
-  justify-content: space-between;
-}
-
-.cursor-pointer {
-  cursor: pointer;
-}
-
-.input-reset {
-  border: none;
-  outline: none;
-  background: transparent;
-  padding: 0;
-  margin: 0;
-  width: 100%;
-}
-
-.disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-/* Page Styles */
-.page {
-  position: relative;
-  width: 100%;
-  height: 100vh;
-  overflow: hidden;
-  background-color: #f0f2f5; /* Fallback */
-}
-
-.section_1 {
-  background-size: cover;
-  background-position: center;
-  height: 100%;
-  width: 100%;
-  align-items: center;
-  justify-content: center;
-}
-
-.box_1 {
-  box-shadow: 0px 2px 30px 0px rgba(225, 206, 206, 0.22);
-  background-color: rgba(255, 255, 255, 1);
-  width: 900px;
-  height: 500px;
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.section_2 {
-  background-color: rgba(255, 255, 255, 1);
-  border-radius: 0px 100px 0px 0px;
-  height: 500px;
-  width: 400px;
-  position: relative;
-  overflow: hidden;
-}
-
-.group_1 {
-  /* Matches reference: width 841px, margin-left -270px inside a 400px container */
-  width: 841px;
-  height: 500px;
-  margin-left: -270px;
-  background-repeat: no-repeat;
-  /* Ensure the image covers this specific area if needed, or default */
-}
-
-.section_3 {
-  width: 331px;
-  height: 298px;
-  margin: 101px 85px 0 84px;
-}
-
-.image_1 {
-  width: 260px;
-  height: 42px;
-  margin-left: 1px;
-  /* Removed object-fit: contain to match reference behavior */
-}
-
-.block_1 {
-  background-color: rgba(255, 255, 255, 1);
-  border-radius: 4px;
-  width: 330px;
-  height: 42px;
-  border: 1px solid rgba(229, 229, 229, 1);
-  margin: 50px 0 0 1px;
-  align-items: center;
-}
-
-.image-text_1 {
-  width: 100%;
-  height: 16px;
-  margin: 0 15px;
-  align-items: center;
-}
-
-.thumbnail_1 {
-  width: 16px;
-  height: 16px;
-  margin-right: 10px;
-}
-
-.text-group_1 {
-  color: rgba(48, 49, 51, 1);
-  font-size: 14px;
-  font-family: Alibaba-PuHuiTi-R, sans-serif;
-  font-weight: normal;
-  line-height: 14px;
-}
-
-.text-group_1::placeholder {
-  color: rgba(189, 189, 189, 1);
-}
-
-.block_2 {
-  width: 330px;
-  height: 42px;
-  margin: 20px 0 0 1px;
-  align-items: center;
-}
-
-.section_4 {
-  background-color: rgba(255, 255, 255, 1);
-  border-radius: 4px;
-  width: 191px;
-  height: 42px;
-  border: 1px solid rgba(229, 229, 229, 1);
-  align-items: center;
-}
-
-.image-text_2 {
-  width: 100%;
-  height: 16px;
-  margin: 0 15px;
-  align-items: center;
-}
-
-.thumbnail_2 {
-  width: 16px;
-  height: 16px;
-  margin-right: 10px;
-}
-
-.text-group_2 {
-  color: rgba(48, 49, 51, 1);
-  font-size: 14px;
-  font-family: Alibaba-PuHuiTi-R, sans-serif;
-  font-weight: normal;
-  line-height: 14px;
-}
-
-.text-group_2::placeholder {
-  color: rgba(189, 189, 189, 1);
-}
-
-.text-wrapper_1 {
-  background-color: rgba(255, 255, 255, 1);
-  border-radius: 4px;
-  height: 42px;
-  border: 1px solid rgba(229, 229, 229, 1);
-  width: 131px;
-  justify-content: center;
-  align-items: center;
-  transition: all 0.3s ease;
-}
-
-.text-wrapper_1:hover:not(.disabled) {
-  border-color: rgba(163, 1, 19, 1);
-  background-color: rgba(163, 1, 19, 0.05);
-}
-
-.text-wrapper_1:active:not(.disabled) {
-  transform: scale(0.98);
-}
-
-.text_1 {
-  color: rgba(48, 49, 51, 1);
-  font-size: 14px;
-  font-family: Alibaba-PuHuiTi-R, sans-serif;
-  font-weight: normal;
-  text-align: center;
-  white-space: nowrap;
-  transition: color 0.3s ease;
-}
-
-.text-wrapper_1:hover:not(.disabled) .text_1 {
-  color: rgba(163, 1, 19, 1);
-}
-
-.block_3 {
-  width: 100%;
-  margin-top: 36px;
-  align-items: center;
-}
-
-.text-group_3 {
-  color: rgba(136, 136, 136, 1);
-  font-size: 12px;
-  letter-spacing: 0.32px;
-  font-family: Alibaba-PuHuiTi-R, sans-serif;
-  font-weight: normal;
-  white-space: nowrap;
-  line-height: 12px;
-  margin-right: 4px;
-}
-
-.text_2 {
-  color: rgba(163, 1, 19, 1);
-  font-size: 12px;
-  letter-spacing: 0.32px;
-  font-family: Alibaba-PuHuiTi-M, sans-serif;
-  font-weight: normal;
-  white-space: nowrap;
-  line-height: 12px;
-  transition: all 0.3s ease;
-  cursor: pointer;
-}
-
-.text_2:hover {
-  text-decoration: underline;
-  color: rgba(180, 1, 21, 1);
-}
-
-.text-wrapper_2 {
-  height: 42px;
-  background-size: 100% 100%;
-  background-repeat: no-repeat;
-  width: 330px;
-  margin: 10px 0 0 1px;
-  justify-content: center;
-  align-items: center;
-  transition: all 0.3s ease;
-  position: relative;
-}
-
-.text-wrapper_2:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(163, 1, 19, 0.3);
-}
-
-.text-wrapper_2:active {
-  transform: translateY(0);
-  box-shadow: 0 2px 6px rgba(163, 1, 19, 0.2);
-}
-
-.text_3 {
-  color: rgba(255, 255, 255, 1);
-  font-size: 18px;
-  font-family: Alibaba-PuHuiTi-M, sans-serif;
-  font-weight: normal;
-  text-align: center;
-  white-space: nowrap;
-  transition: all 0.3s ease;
-}
-
-.text-wrapper_2:hover .text_3 {
-  letter-spacing: 1px;
-}
-
-/* Custom Naive UI Overrides */
-.custom-n-input {
-  background-color: transparent !important;
-  font-size: 14px;
-  line-height: 14px;
-}
-
-.custom-n-input :deep(.n-input-wrapper) {
-  padding: 0 !important;
-}
-
-.custom-n-input :deep(.n-input__input-el) {
-  height: 16px !important;
-  line-height: 16px !important;
-  color: rgba(48, 49, 51, 1);
-  font-family: Alibaba-PuHuiTi-R, sans-serif;
-}
-
-.custom-n-input :deep(.n-input__placeholder) {
-  color: rgba(189, 189, 189, 1) !important;
-}
-
-.custom-n-input :deep(.n-input__state-border),
-.custom-n-input :deep(.n-input__border) {
-  display: none !important;
-}
-
-/* Fix Form Item Layout to prevent shifts */
-:deep(.n-form-item-feedback-wrapper) {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  padding-top: 2px;
-  line-height: 1;
-}
-
-:deep(.n-form-item) {
-  display: block;
-  margin-bottom: 0 !important;
-}
-
-/* Ensure the code input item doesn't break flex layout */
-.verify-code-item {
-  flex: 1;
-  /* The section_4 inside has fixed width, so we just let it be */
-  max-width: 191px;
-}
-
-/* Input Container Interactions */
-.block_1,
-.section_4 {
-  transition: all 0.3s ease;
-}
-
-.block_1:hover,
-.section_4:hover {
-  border-color: rgba(163, 1, 19, 0.5);
-}
-
-.block_1:focus-within,
-.section_4:focus-within {
-  border-color: rgba(163, 1, 19, 1);
-  box-shadow: 0 0 0 2px rgba(163, 1, 19, 0.1);
-}
-
-/* Error State Styling */
-:deep(.n-form-item.n-form-item--error) .block_1,
-:deep(.n-form-item.n-form-item--error) .section_4 {
-  border-color: #d03050;
-}
-
-:deep(.n-form-item.n-form-item--error) .block_1:focus-within,
-:deep(.n-form-item.n-form-item--error) .section_4:focus-within {
-  border-color: #d03050;
-  box-shadow: 0 0 0 2px rgba(208, 48, 80, 0.1);
-}
-
-/* Checkbox Customization */
-:deep(.agreement-checkbox .n-checkbox-box) {
-  border-radius: 2px;
-  transition: all 0.3s ease;
-}
-
-/* Checked State - Solid Red */
-:deep(.agreement-checkbox.n-checkbox--checked .n-checkbox-box) {
-  background-color: rgba(163, 1, 19, 1) !important;
-  border: 1px solid rgba(163, 1, 19, 1) !important;
-}
-
-/* Hide the separate border element when checked to prevent color overlap/double borders */
-:deep(.agreement-checkbox.n-checkbox--checked .n-checkbox-box .n-checkbox-box__border) {
-  display: none !important;
-}
-
-/* Hover State - Red Border */
-:deep(.agreement-checkbox:hover .n-checkbox-box .n-checkbox-box__border) {
-  border-color: rgba(163, 1, 19, 1) !important;
-}
-
-/* Focus State - Red Border & Shadow */
-:deep(.agreement-checkbox.n-checkbox--focus .n-checkbox-box .n-checkbox-box__border) {
-  border-color: rgba(163, 1, 19, 1) !important;
-}
-
-:deep(.agreement-checkbox.n-checkbox--focus .n-checkbox-box) {
-  box-shadow: 0 0 0 2px rgba(163, 1, 19, 0.2) !important;
-}
-
-/* Ensure checkmark is white */
-:deep(.agreement-checkbox .n-checkbox-icon) {
-  color: #fff !important;
-}
-</style>