cieanyau/console-dev
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复密码输入可访问性并统一新手机号为中国大陆区号

Browse Source
This commit is contained in:
cieanyau committed 2026-11-06 04:53:45 +08:00
1 parent 990b802553
commit f6ab3c9087
15 files changed
+592 -362
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/assets/styles/PhoneCodeField.CwyHXfML.css
+2 -31
View File
@@ -1,35 +1,6 @@
/* 手机号国家区号字段：区号选择、输入与字段错误说明。 */
/* 导入方：app/components/PhoneCodeField.vue、app/pages/forgot-password.vue、app/pages/oauth/bind.vue、app/pages/register.vue。 */
/* 固定手机号区号说明：只有静态文本，不继承输入框或国家选择器的交互外观。 */
.phone-code-field[data-v-24cb0489] {
gap: 6px;
display: grid;
}
.phone-code-field label[data-v-24cb0489] {
color: var(--p-text-muted-color);
font-size: 0.875rem;
}
.phone-code-input[data-v-24cb0489] {
border: 1px solid
var(--p-inputtext-border-color, var(--p-content-border-color));
border-radius: var(--p-inputtext-border-radius, 6px);
background: var(--p-inputtext-background, var(--p-content-background));
align-items: center;
gap: 6px;
padding: 8px 12px;
display: flex;
}
.phone-code-input input[data-v-24cb0489] {
width: 100%;
min-width: 0;
color: inherit;
font: inherit;
background: 0 0;
border: 0;
outline: 0;
}
.phone-code-input[data-v-24cb0489]:focus-within {
outline: 1px solid var(--p-primary-color);
}
small[data-v-24cb0489] {
color: var(--p-text-muted-color);
white-space: nowrap;
}
app/assets/styles/account.CTvLXxT_.css
+3 -2
View File
@@ -141,8 +141,9 @@
flex: 1;
min-width: 180px;
}
.code-select[data-v-8ca4eb3d] {
flex: 0 0 160px;
.inline[data-v-8ca4eb3d] > .phone-code-field {
flex: 0 0 auto;
min-width: 0;
}
.actions[data-v-8ca4eb3d] {
border-top: 1px solid var(--p-content-border-color, #e2e8f0);
app/components/HostList.vue
+1 -1
View File
@@ -62,7 +62,7 @@ import PaymentDialog from "~/components/PaymentDialog.vue";
import { t as useListPage_t } from "~/lib/useListPage.js";
import { r as instance_status_r } from "~/lib/instance-status.js";
import { t as instance_status_t } from "~/lib/instance-status.js";
import password from "primevue/password";
import password from "~/components/PasswordField.vue";
import textarea from "primevue/textarea";
import menu from "primevue/menu";
import tag from "primevue/tag";
app/components/PasswordField.vue
+95
View File
@@ -0,0 +1,95 @@
<script setup>
/** 复用 PrimeVue 的密码/反馈状态，只统一原生输入语义与可键盘访问的显隐操作。 */
import { computed, nextTick, ref, useSlots } from "vue";
import Password from "primevue/password";
defineOptions({ inheritAttrs: false });
const props = defineProps({
autocomplete: { type: String, default: undefined },
inputProps: { type: Object, default: () => ({}) },
disabled: Boolean,
});
const slots = useSlots();
const forwardedSlots = () =>
Object.keys(slots).filter(
(name) => !["maskicon", "unmaskicon"].includes(name),
);
// autocomplete 属于真实 input，而不是 Password 的包装 DIV；保留已有 aria 等输入属性。
const nativeProps = computed(() => ({
...props.inputProps,
autocomplete: props.autocomplete ?? props.inputProps?.autocomplete ?? "off",
}));
const toggleButton = ref(null);
async function togglePassword(callback) {
callback();
// PrimeVue切换两个显隐slot时会替换按钮；把焦点交回新按钮，键盘才能连续显示/隐藏。
await nextTick();
toggleButton.value?.focus();
}
</script>
<template>
<Password
v-bind="$attrs"
class="password-field"
:input-props="nativeProps"
:disabled="disabled"
>
<template v-for="name in forwardedSlots()" #[name]="scope">
<slot :name="name" v-bind="scope" />
</template>
<template #unmaskicon="{ toggleCallback, class: iconClass }">
<button
ref="toggleButton"
type="button"
:class="['password-toggle', iconClass]"
aria-label="显示密码"
aria-pressed="false"
:disabled="disabled"
@click="togglePassword(toggleCallback)"
>
<i class="pi pi-eye" aria-hidden="true" />
</button>
</template>
<template #maskicon="{ toggleCallback, class: iconClass }">
<button
ref="toggleButton"
type="button"
:class="['password-toggle', iconClass]"
aria-label="隐藏密码"
aria-pressed="true"
:disabled="disabled"
@click="togglePassword(toggleCallback)"
>
<i class="pi pi-eye-slash" aria-hidden="true" />
</button>
</template>
</Password>
</template>
<style scoped>
.password-field .password-toggle {
position: absolute;
inset-block: 0;
inset-inline-end: 0;
display: grid;
place-items: center;
width: 44px;
height: 100%;
min-height: 0;
margin: 0;
padding: 0;
color: var(--p-text-muted-color);
background: transparent;
border: 0;
border-radius: var(--p-form-field-border-radius, 6px);
cursor: pointer;
}
.password-field .password-toggle:focus-visible {
outline: 2px solid var(--p-primary-color);
outline-offset: -3px;
}
.password-field .password-toggle:disabled {
cursor: not-allowed;
}
</style>
app/components/PhoneCodeField.vue
+6 -173
View File
@@ -1,175 +1,8 @@
<script>
/** 国际电话区号输入；地区列表按需请求，加载失败仍允许直接填写区号，不阻塞账号表单。 */
<script setup>
/** 新输入手机号只支持中国大陆，区号由请求方固定为86，不再提供地区选择或加载国家列表。 */
import "~/assets/styles/PhoneCodeField.CwyHXfML.css";
import { toDisplayString } from "vue";
import { renderList } from "vue";
import { useId } from "vue";
import { onBeforeUnmount } from "vue";
import { ref } from "vue";
import { createCommentVNode } from "vue";
import { createElementBlock } from "vue";
import { Fragment } from "vue";
import { createElementVNode } from "vue";
import { unref } from "vue";
import { defineComponent } from "vue";
import { openBlock } from "vue";
import { useApi } from "~/lib/auth.js";
import { t as _plugin_vue_export_helper_t } from "~/lib/_plugin-vue_export-helper.js";
var m = {
class: `phone-code-field`,
},
h = [`for`],
g = {
class: `phone-code-input`,
},
_ = [`id`, `value`, `list`, `disabled`],
v = [`id`],
y = [`value`],
b = {
key: 0,
role: `status`,
},
x = {
key: 1,
role: `status`,
},
S = Object.assign(
_plugin_vue_export_helper_t(
defineComponent({
__name: `PhoneCodeField`,
props: {
modelValue: {},
disabled: {
type: Boolean,
},
},
emits: [`update:modelValue`],
setup(u, { emit: p }) {
let S = u,
C = p,
w = useId(),
T = useApi(),
E = ref([]),
D = ref(!1),
O = ref(``),
k = !1;
onBeforeUnmount(() => {
k = !0;
});
async function A() {
// 地区列表仅收录 1–4 位且首位非零的区号，成功列表可复用；卸载后不回写。
if (!(D.value || E.value.length)) {
((D.value = !0), (O.value = ``));
try {
let e = await T.get(`/country`, void 0, !1);
if (k) return;
E.value = (e.list || [])
.filter((e) => /^[1-9]\d{0,3}$/.test(String(e.phone_code)))
.map((e) => ({
phone_code: String(e.phone_code),
name: e.name_zh || e.name || ``,
}));
} catch {
k || (O.value = `地区列表暂不可用，可直接填写国际区号`);
} finally {
k || (D.value = !1);
}
}
}
return (n, r) => (
openBlock(),
createElementBlock(`div`, m, [
createElementVNode(
`label`,
{
for: `${unref(w)}-phone-code`,
},
`国际区号`,
8,
h,
),
createElementVNode(`div`, g, [
(r[1] ||= createElementVNode(
`span`,
{
"aria-hidden": `true`,
},
`+`,
-1,
)),
createElementVNode(
`input`,
{
id: `${unref(w)}-phone-code`,
value: S.modelValue,
list: `${unref(w)}-countries`,
inputmode: `numeric`,
autocomplete: `tel-country-code`,
maxlength: `4`,
disabled: u.disabled,
onFocus: A,
onInput: (r[0] ||= (e) =>
C(
`update:modelValue`,
e.target.value.replace(/^\+/, ``).trim(),
)),
},
null,
40,
_,
),
]),
createElementVNode(
`datalist`,
{
id: `${unref(w)}-countries`,
},
[
(openBlock(!0),
createElementBlock(
Fragment,
null,
renderList(
unref(E),
(t, n) => (
openBlock(),
createElementBlock(
`option`,
{
key: `${t.phone_code}-${n}`,
value: t.phone_code,
},
toDisplayString(t.name) +
` +` +
toDisplayString(t.phone_code),
9,
y,
)
),
),
128,
)),
],
8,
v,
),
unref(D)
? (openBlock(), createElementBlock(`small`, b, `正在加载地区…`))
: createCommentVNode(``, !0),
unref(O)
? (openBlock(),
createElementBlock(`small`, x, toDisplayString(unref(O)), 1))
: createCommentVNode(``, !0),
])
);
},
}),
[[`__scopeId`, `data-v-24cb0489`]],
),
{
__name: `PhoneCodeField`,
},
);
export {};
export default S;
</script>
<template>
<span class="phone-code-field" data-v-24cb0489>中国大陆 +86</span>
</template>
app/components/instance/InstanceAccess.vue
+2 -1
View File
@@ -44,7 +44,7 @@ import checkbox from "primevue/checkbox";
import OsIcon from "~/components/OsIcon.vue";
import OperationNotice from "~/components/OperationNotice.vue";
import OperatePasswordGate from "~/components/OperatePasswordGate.vue";
import password from "primevue/password";
import password from "~/components/PasswordField.vue";
import skeleton from "primevue/skeleton";
import { t as os_name_t } from "~/lib/os-name.js";
import { t as password_t } from "~/lib/password-2.js";
@@ -2048,6 +2048,7 @@ var xe = {
"onUpdate:modelValue": (n[27] ||= (e) =>
(unref(B).password = e)),
"input-id": `${unref(w)}-rescue-password`,
autocomplete: `new-password`,
feedback: !1,
toggleMask: ``,
class: `grow`,
app/components/instance/InstanceRenewDialog.vue
+1 -1
View File
@@ -31,7 +31,7 @@ import inputtext from "primevue/inputtext";
import select from "primevue/select";
import OperationNotice from "~/components/OperationNotice.vue";
import OperatePasswordGate from "~/components/OperatePasswordGate.vue";
import password from "primevue/password";
import password from "~/components/PasswordField.vue";
import skeleton from "primevue/skeleton";
import { n as renewal_quote_n } from "~/lib/renewal-quote.js";
import { r as renewal_quote_r } from "~/lib/renewal-quote.js";
app/config/primevue.js
+7
View File
@@ -15,6 +15,13 @@ const preset = definePreset(Aura, {
),
colorScheme: {
light: {
// 普通字号白字按钮至少4.5:1；浅色主色从blue-600起，hover/active继续加深，暗色令牌不变。
primary: {
color: "{primary.600}",
contrastColor: "#ffffff",
hoverColor: "{primary.700}",
activeColor: "{primary.800}",
},
surface: Object.fromEntries(
[0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950].map(
(shade) => [shade, shade === 0 ? "#ffffff" : `{slate.${shade}}`],
app/lib/useVerifyCode.js
+2 -7
View File
@@ -49,15 +49,10 @@ function i(i) {
email: t,
});
else {
let e = String(
typeof i.phoneCode == `function`
? i.phoneCode()
: (i.phoneCode ?? 86),
).trim();
if (!/^[1-9]\d{0,3}$/.test(e)) throw Error(`请输入有效的国际电话区号`);
// 此发送器只服务新输入手机号；已保存号码的安全验证走原后端账号契约，不在这里改写。
await a.post(`/phone/code`, {
...n,
phone_code: Number(e),
phone_code: 86,
phone: t,
});
}
app/pages/account/index.vue
+9 -77
View File
@@ -49,7 +49,8 @@ import CaptchaField from "~/components/CaptchaField.vue";
import select from "primevue/select";
import ClientLevelDialog from "~/components/ClientLevelDialog.vue";
import { t as interval_t } from "~/lib/interval.js";
import password from "primevue/password";
import password from "~/components/PasswordField.vue";
import PhoneCodeField from "~/components/PhoneCodeField.vue";
import skeleton from "primevue/skeleton";
import toggleswitch from "primevue/toggleswitch";
import { t as useCaptcha_t } from "~/lib/useCaptcha.js";
@@ -204,8 +205,7 @@ var Ce = {
_t = {
class: `field`,
},
vt = [`id`, `for`],
yt = [`id`],
vt = [`for`],
bt = {
class: `inline`,
},
@@ -729,7 +729,6 @@ var Ce = {
}
}
let q = reactive({
phone_code: 86,
newPhone: ``,
code: ``,
}),
@@ -799,7 +798,7 @@ var Ce = {
try {
if (!q.newPhone.trim()) throw Error(`请输入新手机号`);
(await jn(`phone`, `update`, {
phone_code: q.phone_code,
phone_code: 86,
phone: q.newPhone.trim(),
}),
(O.value = `验证码已发送`));
@@ -815,7 +814,7 @@ var Ce = {
(M(), (Y.value = !0));
try {
(await b.put(`/account/phone`, {
phone_code: q.phone_code,
phone_code: 86,
phone: q.newPhone,
code: q.code,
}),
@@ -1406,6 +1405,7 @@ var Ce = {
toggleMask: ``,
fluid: ``,
placeholder: `输入当前密码`,
autocomplete: `current-password`,
},
null,
8,
@@ -1617,6 +1617,7 @@ var Ce = {
toggleMask: ``,
fluid: ``,
placeholder: `输入新密码`,
autocomplete: `new-password`,
},
null,
8,
@@ -1647,6 +1648,7 @@ var Ce = {
toggleMask: ``,
fluid: ``,
placeholder: `再次输入新密码`,
autocomplete: `new-password`,
},
null,
8,
@@ -2068,88 +2070,18 @@ var Ce = {
createElementVNode(
`label`,
{
id: `${unref(x)}-phone-label`,
for: `${unref(x)}-new-phone`,
},
`新手机号`,
8,
vt,
),
createElementVNode(
`span`,
{
id: `${unref(x)}-phone-code-label`,
class: `sr-only`,
},
`国际区号`,
8,
yt,
),
createElementVNode(
`div`,
bt,
[
createVNode(
g,
{
modelValue:
unref(q)
.phone_code,
"onUpdate:modelValue":
(r[19] ||= (
e,
) =>
(unref(
q,
).phone_code =
e)),
"aria-labelledby": `${unref(x)}-phone-label ${unref(x)}-phone-code-label`,
options:
unref(Zt),
optionLabel: `phone_code`,
optionValue: `phone_code`,
filter: ``,
class: `code-select`,
},
{
option: withCtx(
({
option: t,
}) => [
createTextVNode(
`+` +
toDisplayString(
t.phone_code,
) +
` ` +
toDisplayString(
t.name,
),
1,
),
],
),
value: withCtx(
({
value: t,
}) => [
createTextVNode(
`+` +
toDisplayString(
t,
),
1,
),
],
),
_: 1,
},
8,
[
`modelValue`,
`aria-labelledby`,
`options`,
],
PhoneCodeField,
),
createVNode(
l,
app/pages/forgot-password.vue
+3 -20
View File
@@ -36,7 +36,7 @@ import { n as auth_redirect_n } from "~/lib/auth-redirect.js";
import { t as auth_redirect_t } from "~/lib/auth-redirect.js";
import inputtext from "primevue/inputtext";
import CaptchaField from "~/components/CaptchaField.vue";
import password from "primevue/password";
import password from "~/components/PasswordField.vue";
import PhoneCodeField from "~/components/PhoneCodeField.vue";
import { t as useCaptcha_t } from "~/lib/useCaptcha.js";
import { t as composables_t } from "~/lib/composables-2.js";
@@ -94,7 +94,6 @@ var D = {
code: ``,
password: ``,
re_password: ``,
phone_code: `86`,
}),
W = ref(``),
G = ref(!1),
@@ -120,7 +119,6 @@ var D = {
action: `password_reset`,
captcha: K,
error: W,
phoneCode: () => U.phone_code,
});
// 复用 password_reset 场景的验证码发送与倒计时，不在页面另写一套短信请求。
function fe() {
@@ -140,8 +138,6 @@ var D = {
if (!e)
return (W.value =
H.value === `email` ? `请输入邮箱` : `请输入手机号`);
if (H.value === `phone` && !/^[1-9]\d{0,3}$/.test(U.phone_code))
return (W.value = `请输入有效的国际电话区号`);
if (!U.code.trim()) return (W.value = `请输入验证码`);
if (!U.password) return (W.value = `请输入新密码`);
if (U.password !== U.re_password)
@@ -151,7 +147,7 @@ var D = {
(await z.post(`/account/password_reset`, {
type: H.value,
account: e,
phone_code: U.phone_code,
phone_code: `86`,
code: U.code.trim(),
password: U.password,
re_password: U.re_password,
@@ -205,20 +201,7 @@ var D = {
},
[
unref(H) === `phone`
? (openBlock(),
createBlock(
f,
{
key: 0,
modelValue: unref(U).phone_code,
"onUpdate:modelValue": (o[0] ||= (e) =>
(unref(U).phone_code = e)),
disabled: unref(G) || unref(Q),
},
null,
8,
[`modelValue`, `disabled`],
))
? (openBlock(), createBlock(f, { key: 0 }))
: createCommentVNode(``, !0),
createElementVNode(`div`, O, [
(o[8] ||= createElementVNode(
app/pages/login.vue
+4 -8
View File
@@ -15,7 +15,7 @@ import { NuxtLink } from "#components";
import Button from "primevue/button";
import InputText from "primevue/inputtext";
import Message from "primevue/message";
import Password from "primevue/password";
import Password from "~/components/PasswordField.vue";
import AuthProviders from "~/components/AuthProviders.vue";
import CaptchaField from "~/components/CaptchaField.vue";
import GenericOAuthProviders from "~/components/GenericOAuthProviders.vue";
@@ -42,7 +42,8 @@ const site = useSiteConfig();
const { config, error: configError } = site;
const form = reactive({ account: "", password: "", code: "" });
const loginMode = ref("password");
const phoneCode = ref("86");
// 新输入的手机号统一为中国大陆，不从用户输入或地区选择器派生区号。
const phoneCode = "86";
const errorMessage = ref("");
const submitting = ref(false);
const authProviders = ref(null);
@@ -115,7 +116,6 @@ const {
action: "login",
captcha,
error: errorMessage,
phoneCode: () => phoneCode.value,
});
const fieldsDisabled = computed(() => formLocked.value || sendingCode.value);
const captchaBusy = computed(
@@ -304,10 +304,6 @@ async function submitLogin() {
errorMessage.value = "当前登录方式未开放，请选择其他方式";
return;
}
if (isPhoneAccount.value && !/^[1-9]\d{0,3}$/.test(phoneCode.value)) {
errorMessage.value = "请输入有效的国际电话区号";
return;
}
if (loginMode.value === "code" && form.account.includes("@")) {
errorMessage.value = "请输入手机号";
return;
@@ -334,7 +330,7 @@ async function submitLogin() {
token: captchaToken.value,
type: loginMode.value,
code: form.code.trim(),
phoneCode: isPhoneAccount.value ? phoneCode.value : "",
phoneCode: isPhoneAccount.value ? phoneCode : "",
});
}
</script>
app/pages/oauth/bind.vue
+2 -21
View File
@@ -112,7 +112,6 @@ var ve = {
F = auth_redirect_r(M.query.redirect),
I = ref(`phone`),
L = ref(``),
R = ref(`86`),
z = ref(``),
B = ref(!1),
V = ref(!1),
@@ -182,7 +181,6 @@ var ve = {
action: `oauth`,
captcha: q,
error: H,
phoneCode: () => R.value,
}),
{
needed: Ae,
@@ -223,10 +221,6 @@ var ve = {
H.value = `请先阅读并同意服务协议和隐私协议`;
return;
}
if (I.value === `phone` && !/^[1-9]\d{0,3}$/.test(R.value)) {
H.value = `请输入有效的国际电话区号`;
return;
}
V.value = !0;
try {
let e = q.validationError?.();
@@ -238,7 +232,7 @@ var ve = {
{
type: I.value,
account: L.value.trim(),
phone_code: R.value,
phone_code: `86`,
code: z.value.trim(),
...(N && P
? {
@@ -404,20 +398,7 @@ var ve = {
),
createElementVNode(`div`, T, [
unref(I) === `phone`
? (openBlock(),
createBlock(
u,
{
key: 0,
modelValue: unref(R),
"onUpdate:modelValue": (n[2] ||= (e) =>
isRef(R) ? (R.value = e) : null),
disabled: unref(V) || unref(J),
},
null,
8,
[`modelValue`, `disabled`],
))
? (openBlock(), createBlock(u, { key: 0 }))
: createCommentVNode(``, !0),
createVNode(
g,
app/pages/register.vue
+3 -20
View File
@@ -43,7 +43,7 @@ import inputtext from "primevue/inputtext";
import CaptchaField from "~/components/CaptchaField.vue";
import select from "primevue/select";
import checkbox from "primevue/checkbox";
import password from "primevue/password";
import password from "~/components/PasswordField.vue";
import textarea from "primevue/textarea";
import PhoneCodeField from "~/components/PhoneCodeField.vue";
import { i as product_fields_i } from "~/lib/product-fields.js";
@@ -209,7 +209,6 @@ var ve = {
username: ``,
password: ``,
re_password: ``,
phone_code: `86`,
customfield: {},
}),
I = ref(``),
@@ -264,7 +263,6 @@ var ve = {
action: `register`,
captcha: R,
error: I,
phoneCode: () => F.phone_code,
});
// 仅对已开放且需要验证码的注册方式发送验证码，倒计时与验证码挑战由公共发送器管理。
function ze() {
@@ -291,8 +289,6 @@ var ve = {
if (!e)
return (I.value =
P.value === `email` ? `请输入邮箱` : `请输入手机号`);
if (P.value === `phone` && !/^[1-9]\d{0,3}$/.test(F.phone_code))
return (I.value = `请输入有效的国际电话区号`);
if (K.value && !F.code.trim()) return (I.value = `请输入验证码`);
if (!F.password) return (I.value = `请输入密码`);
if (F.password !== F.re_password)
@@ -308,7 +304,7 @@ var ve = {
(await w.post(`/register`, {
type: P.value,
account: e,
phone_code: F.phone_code,
phone_code: `86`,
code: K.value ? F.code.trim() : ``,
username: F.username.trim(),
password: F.password,
@@ -455,20 +451,7 @@ var ve = {
),
]),
unref(P) === `phone`
? (openBlock(),
createBlock(
m,
{
key: 3,
modelValue: unref(F).phone_code,
"onUpdate:modelValue": (a[2] ||= (e) =>
(unref(F).phone_code = e)),
disabled: unref(L) || unref(Z),
},
null,
8,
[`modelValue`, `disabled`],
))
? (openBlock(), createBlock(m, { key: 3 }))
: createCommentVNode(``, !0),
createElementVNode(`div`, D, [
createElementVNode(