feat(app): 更新应用名称并优化批次绑定功能

云

7 小时以前 5d321660a2f1a4b8756f816283e96481a8c934e4

 src/views/_core/authentication/login.vue

@@ -11,10 +11,15 @@

import { checkCaptcha, getCaptcha } from '#/api/core/auth';
import { useAuthStore } from '#/store';
import { selectTerminal, terminalType } from '#/mobile/terminal';
import { errorText } from '#/mobile/api';
import { useRoute } from 'vue-router';

defineOptions({ name: 'Login' });

const authStore = useAuthStore();
const route = useRoute();
const loginError = ref(route.query.loadError ? '菜单加载失败，请重新登录后重试。' : '');
const captchaEnable = isCaptchaEnable();

const loginRef = ref();
@@ -22,13 +27,24 @@

const captchaType = 'blockPuzzle'; // 验证码类型：'blockPuzzle' | 'clickWord'

/** 滑块验证码尺寸：移动端按视口宽度收缩，避免超出屏幕无法拖动 */
const captchaImgSize = computed(() => {
  const width =
    terminalType.value === 'mobile'
      ? Math.min(315, Math.max(260, window.innerWidth - 48))
      : 400;
  return { width: `${width}px`, height: `${Math.round(width / 2)}px` };
});

/** 处理登录 */
async function handleLogin(values: AuthApi.LoginParams) {
  if (captchaEnable) {
    verifyRef.value.show();
    return;
  }
  await authStore.authLogin('username', values);
  loginError.value = '';
  try { await authStore.authLogin('username', values); }
  catch (e) { loginError.value = errorText(e); }
}

/** 验证码通过，执行登录 */
@@ -37,10 +53,11 @@
}: {
  captchaVerification: string;
}) {
  await authStore.authLogin('username', {
  loginError.value = '';
  try { await authStore.authLogin('username', {
    ...(await loginRef.value.getFormApi().getValues()),
    captchaVerification,
  });
  }); } catch (e) { loginError.value = errorText(e); }
}

const formSchema = computed((): VbenFormSchema[] => {
@@ -79,12 +96,36 @@

<template>
  <div>
    <div class="login-brand">
      <img
        src="/images/tahe-logo.png"
        alt="塔河种业"
        class="login-brand-logo"
      />
      <p class="login-brand-name">塔河种业加工销售供应链数字化管理平台</p>
    </div>
    <fieldset class="terminal-selector">
      <legend>选择使用端</legend>
      <div class="terminal-options">
        <label :class="{ selected: terminalType === 'mobile' }">
          <input type="radio" name="terminal" value="mobile" :checked="terminalType === 'mobile'" :disabled="authStore.loginLoading" @change="selectTerminal('mobile')" />
          <span>移动端</span>
        </label>
        <label :class="{ selected: terminalType === 'pc' }">
          <input type="radio" name="terminal" value="pc" :checked="terminalType === 'pc'" :disabled="authStore.loginLoading" @change="selectTerminal('pc')" />
          <span>PC 端</span>
        </label>
      </div>
      <p>已按屏幕大小选择，可手动切换</p>
    </fieldset>
    <AuthenticationLogin
      ref="loginRef"
      :form-schema="formSchema"
      :loading="authStore.loginLoading"
      :show-field-labels="terminalType === 'mobile'"
      :submit-button-text="terminalType === 'mobile' ? '登录移动端' : '登录 PC 端'"
      title="欢迎回来"
      sub-title="登录种植业数字化平台，开启智慧种植"
      :sub-title="terminalType === 'mobile' ? '使用已有账号登录现场作业' : '登录塔河种业加工销售供应链数字化管理平台'"
      :show-code-login="false"
      :show-qrcode-login="false"
      :show-third-party-login="false"
@@ -93,15 +134,30 @@
      :show-doc-link="false"
      @submit="handleLogin"
    />
    <p v-if="loginError" class="login-error" role="alert">{{loginError}}</p>
    <Verification
      ref="verifyRef"
      v-if="captchaEnable"
      :captcha-type="captchaType"
      :check-captcha-api="checkCaptcha"
      :get-captcha-api="getCaptcha"
      :img-size="{ width: '400px', height: '200px' }"
      :img-size="captchaImgSize"
      mode="pop"
      @on-success="handleVerifySuccess"
    />
  </div>
</template>

<style scoped>
.login-brand { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 24px; }
.login-brand-logo { height: 72px; width: auto; }
.login-brand-name { margin: 0; text-align: center; font-size: 16px; font-weight: 600; letter-spacing: 0.02em; color: #0f172a; }
.terminal-selector { border: 0; margin: 0 0 24px; padding: 0; }
.login-error { padding:12px;color:#b91c1c;background:#fef2f2;border-radius:8px; }
.terminal-selector legend { font-size: 16px; margin-bottom: 8px; }
.terminal-options { display: flex; gap: 12px; }
.terminal-options label { display:flex;align-items:center;justify-content:center;gap:8px;flex:1;min-height:52px;border:1px solid #64748b;border-radius:8px;cursor:pointer; }
.terminal-options label.selected { border-color:#0369a1;color:#0369a1;background:#f0f9ff; }
.terminal-options label:focus-within { outline:2px solid #0369a1;outline-offset:2px; }
.terminal-selector p { margin-top:8px;color:#475569;font-size:14px; }
</style>