176 lines
7.5 KiB
HTML
176 lines
7.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN" data-theme="light">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=1280">
|
||
<title>Fonrey 登录管理 · Tenant 识别（Story 1）</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
|
||
<script>
|
||
tailwind.config = {
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
primary: {
|
||
50: '#F0FDFA', 100: '#CCFBF1', 200: '#99F6E4',
|
||
500: '#14B8A6', 600: '#0F766E', 700: '#115E59', 800: '#134E4A'
|
||
},
|
||
neutral: {
|
||
50: '#F8FAFC', 100: '#F1F5F9', 200: '#E2E8F0', 300: '#CBD5E1',
|
||
400: '#94A3B8', 500: '#64748B', 600: '#475569', 700: '#334155',
|
||
800: '#1E293B', 900: '#0F172A'
|
||
},
|
||
success: { 50: '#F0FDF4', 600: '#16A34A' },
|
||
warning: { 50: '#FFFBEB', 600: '#D97706' },
|
||
danger: { 50: '#FEF2F2', 600: '#DC2626' }
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style>
|
||
[x-cloak] { display: none !important; }
|
||
</style>
|
||
</head>
|
||
<body class="min-h-screen bg-neutral-50 font-sans text-sm text-neutral-700 antialiased" x-data="tenantVerifyPage()">
|
||
<div class="fixed inset-0 -z-10">
|
||
<div class="absolute inset-y-0 left-0 w-[56%] bg-gradient-to-br from-primary-800 via-primary-700 to-primary-600"></div>
|
||
<div class="absolute -top-16 -left-24 w-96 h-96 rounded-full bg-white/10 blur-2xl"></div>
|
||
<div class="absolute bottom-0 left-1/3 w-80 h-80 rounded-full bg-primary-200/15 blur-2xl"></div>
|
||
</div>
|
||
|
||
<main class="mx-auto max-w-[1440px] min-h-screen grid grid-cols-12">
|
||
<section class="col-span-7 px-12 py-12 text-white flex flex-col justify-between">
|
||
<div>
|
||
<div class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-white/10 border border-white/20">
|
||
<div class="w-7 h-7 rounded-md bg-primary-500/90 flex items-center justify-center text-white font-semibold">F</div>
|
||
<span class="text-base font-semibold">Fonrey 房睿</span>
|
||
</div>
|
||
|
||
<h1 class="mt-8 text-4xl font-semibold leading-tight">欢迎使用 Fonrey 房睿</h1>
|
||
<p class="mt-4 text-primary-100 text-base leading-7 max-w-xl">
|
||
首次启动客户端时，请先输入 12 位公司识别码完成租户识别。
|
||
识别成功后将自动进入该租户的登录页面。
|
||
</p>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-2 gap-4 max-w-2xl">
|
||
<div class="rounded-lg border border-white/20 bg-white/10 p-4">
|
||
<div class="text-xs text-primary-100">识别码格式</div>
|
||
<div class="mt-1 text-xl font-semibold">12 位纯数字</div>
|
||
</div>
|
||
<div class="rounded-lg border border-white/20 bg-white/10 p-4">
|
||
<div class="text-xs text-primary-100">安全策略</div>
|
||
<div class="mt-1 text-xl font-semibold">公共接口限流保护</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="col-span-5 px-10 py-10 flex items-center justify-center">
|
||
<div class="w-full max-w-md rounded-xl bg-white border border-neutral-200 shadow-lg p-6">
|
||
<h2 class="text-xl font-semibold text-neutral-800">Tenant 识别</h2>
|
||
<p class="mt-2 text-sm text-neutral-500">请输入您公司的专属识别码以继续</p>
|
||
|
||
<div class="mt-6 space-y-1.5">
|
||
<label for="tenant-code" class="block text-sm font-medium text-neutral-700">公司识别码（Tenant Code）<span class="text-danger-600">*</span></label>
|
||
<input
|
||
id="tenant-code"
|
||
type="text"
|
||
inputmode="numeric"
|
||
maxlength="12"
|
||
:disabled="loading"
|
||
x-model="tenantCode"
|
||
@input="sanitizeTenantCode"
|
||
placeholder="请输入12位数字识别码"
|
||
class="block w-full px-3 py-2 text-sm rounded-md border border-neutral-300 placeholder:text-neutral-400 focus:outline-none focus:border-primary-600 focus:ring-2 focus:ring-primary-600/20 disabled:bg-neutral-100 disabled:text-neutral-400"
|
||
aria-describedby="tenant-help tenant-error"
|
||
>
|
||
<p id="tenant-help" class="text-xs text-neutral-500">支持粘贴，系统将自动去除前后空格并过滤非数字字符</p>
|
||
<div class="min-h-[22px]">
|
||
<p id="tenant-error" x-show="errorText" x-text="errorText" class="text-xs text-danger-600"></p>
|
||
</div>
|
||
</div>
|
||
|
||
<button
|
||
type="button"
|
||
@click="submitTenantCode"
|
||
:disabled="loading"
|
||
class="mt-1 inline-flex w-full items-center justify-center gap-1.5 px-4 py-2 text-sm font-medium rounded-md bg-primary-600 text-white hover:bg-primary-700 active:bg-primary-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-600/40 disabled:opacity-50 disabled:cursor-not-allowed"
|
||
>
|
||
<svg x-show="loading" class="w-4 h-4 animate-spin" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M16.75 7.25a6.5 6.5 0 1 0 0 9.5"/></svg>
|
||
<span x-text="loading ? '识别中…' : '确认'"></span>
|
||
</button>
|
||
|
||
<template x-if="networkError">
|
||
<div class="mt-3 rounded-md border border-warning-600/30 bg-warning-50 px-3 py-2 text-xs text-warning-600 flex items-center justify-between gap-2">
|
||
<span>网络连接失败，请检查网络后重试</span>
|
||
<button type="button" @click="networkError=false" class="text-primary-600 hover:underline">重试</button>
|
||
</div>
|
||
</template>
|
||
|
||
<template x-if="successText">
|
||
<div class="mt-3 rounded-md border border-success-600/30 bg-success-50 px-3 py-2 text-xs text-success-600" x-text="successText"></div>
|
||
</template>
|
||
|
||
<p class="mt-4 text-xs text-neutral-500">不知道识别码？请联系您公司的Tenant Admin（租户管理员）</p>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<script>
|
||
function tenantVerifyPage() {
|
||
return {
|
||
tenantCode: '',
|
||
loading: false,
|
||
networkError: false,
|
||
errorText: '',
|
||
successText: '',
|
||
|
||
sanitizeTenantCode() {
|
||
this.tenantCode = this.tenantCode.replace(/\s+/g, '').replace(/\D/g, '').slice(0, 12)
|
||
this.errorText = ''
|
||
this.networkError = false
|
||
this.successText = ''
|
||
},
|
||
|
||
submitTenantCode() {
|
||
this.errorText = ''
|
||
this.networkError = false
|
||
this.successText = ''
|
||
|
||
if (this.tenantCode.length !== 12) {
|
||
this.errorText = '识别码须为 12 位数字'
|
||
return
|
||
}
|
||
|
||
this.loading = true
|
||
|
||
setTimeout(() => {
|
||
this.loading = false
|
||
|
||
if (this.tenantCode === '999999999999') {
|
||
this.networkError = true
|
||
return
|
||
}
|
||
|
||
if (this.tenantCode === '202500010001') {
|
||
const tenantName = '沪居地产（演示租户）'
|
||
localStorage.setItem('tenant_code', this.tenantCode)
|
||
localStorage.setItem('tenant_name', tenantName)
|
||
this.successText = `识别成功，正在登录：${tenantName}`
|
||
|
||
setTimeout(() => {
|
||
window.location.href = `./登录_账号密码_UI.html?tenantCode=${this.tenantCode}&tenantName=${encodeURIComponent(tenantName)}`
|
||
}, 500)
|
||
return
|
||
}
|
||
|
||
this.errorText = '识别码无效，请联系您的Tenant Admin（租户管理员）获取正确的识别码'
|
||
}, 800)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|