kate522
bcba0f598a
A settings screen renders twenty-odd AppSecret and private-key fields as type="password". Chrome reads any page carrying a password input as a login form and fills the saved username and password into the first text box it finds — the settings search field at the top of the panel. Suppressing autocomplete on that one input could not fix it, because the trigger is the password inputs elsewhere on the page. Secret fields now render as text with CSS masking (-webkit-text-security: disc), so they still look like ciphertext but no longer register as password inputs; the mask lifts on focus so a freshly typed value can be checked. That covers the 21 schema-driven fields through JioField plus the four captcha provider forms and the WeChat template page. The search box keeps a second layer of defence: a descriptive name and autocomplete/autocorrect/spellcheck disabled, with the LastPass and 1Password ignore markers set. Verification: vite build succeeds and the emitted bundles no longer contain a single type="password"; 980 admin/widget tests pass. Note: assets/admin/build/ is gitignored, so the production build must be run on deploy. -webkit-text-security is WebKit/Blink only — Firefox falls back to plain text.
406 lines
13 KiB
Vue
406 lines
13 KiB
Vue
<template>
|
|
<div class="jio-form-renderer">
|
|
<!-- Page header with title and description -->
|
|
<div v-if="title" class="jio-form-renderer__header">
|
|
<div class="jio-form-renderer__header-left">
|
|
<FaIcon v-if="icon" :icon="icon" :size="22" class="jio-form-renderer__header-icon" />
|
|
<div>
|
|
<h1 class="jio-form-renderer__title">{{ title }}</h1>
|
|
<p v-if="description" class="jio-form-renderer__desc">{{ description }}</p>
|
|
</div>
|
|
</div>
|
|
<div v-if="showSearch" class="jio-form-renderer__search">
|
|
<n-input
|
|
v-model:value="searchQuery"
|
|
placeholder="搜索设置项..."
|
|
size="small"
|
|
clearable
|
|
name="jio-settings-search"
|
|
:input-props="searchInputProps"
|
|
>
|
|
<template #prefix>
|
|
<FaIcon icon="fa fas fa-search" :size="12" />
|
|
</template>
|
|
</n-input>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Loading state -->
|
|
<div v-if="loading" class="jio-form-renderer__loading">
|
|
<n-spin size="medium" />
|
|
<span>加载中...</span>
|
|
</div>
|
|
|
|
<!-- Error state -->
|
|
<n-alert
|
|
v-else-if="loadError"
|
|
type="error"
|
|
:title="'加载失败'"
|
|
:style="{ marginBottom: '16px' }"
|
|
>
|
|
{{ loadError }}
|
|
<template #footer>
|
|
<n-button size="small" @click="$emit('reload')">重试</n-button>
|
|
</template>
|
|
</n-alert>
|
|
|
|
<!-- Form content -->
|
|
<template v-else-if="schema && schema.length">
|
|
<template v-for="group in filteredSchema" :key="groupKey(group)">
|
|
<JioFieldGroup
|
|
v-if="isGroupVisible(group)"
|
|
:title="group.title"
|
|
:description="group.description"
|
|
:icon="group.icon"
|
|
:collapsible="!!group.collapsible"
|
|
:default-collapsed="resolveGroupCollapsed(group)"
|
|
>
|
|
<template v-if="group.fields && !hasGroupSlot(group)">
|
|
<template v-for="field in group.fields" :key="field.key">
|
|
<template v-if="isFieldVisible(field)">
|
|
<!-- Tabbed: renders tabs whose sub-fields are flat top-level keys -->
|
|
<div
|
|
v-if="field.type === 'tabbed' && (field.tabs || []).length"
|
|
class="jio-form-renderer__tabbed"
|
|
>
|
|
<n-tabs type="line" animated>
|
|
<n-tab-pane
|
|
v-for="tab in field.tabs"
|
|
:key="tab.key || tab.title"
|
|
:name="tabName(tab)"
|
|
:tab="tabName(tab)"
|
|
>
|
|
<template v-for="sub in (tab.fields || [])" :key="sub.key">
|
|
<JioField
|
|
v-if="isFieldVisible(sub)"
|
|
:schema="sub"
|
|
:model-value="getFieldValue(sub.key)"
|
|
:form-data="formData"
|
|
:error-message="errors?.[sub.key]"
|
|
@update:model-value="setFieldValue(sub.key, $event)"
|
|
@action="emit('field-action', $event)"
|
|
/>
|
|
</template>
|
|
</n-tab-pane>
|
|
</n-tabs>
|
|
</div>
|
|
<JioSorterField
|
|
v-else-if="field.type === 'custom' && field.renderer === 'sorter'"
|
|
:model-value="getFieldValue(field.key) || {}"
|
|
:options="field.options || []"
|
|
@update:model-value="setFieldValue(field.key, $event)"
|
|
/>
|
|
<slot
|
|
v-else-if="field.type === 'custom'"
|
|
:name="`field-${field.key}`"
|
|
v-bind="{ field, value: getFieldValue(field.key), setValue: (value) => setFieldValue(field.key, value), formData }"
|
|
>
|
|
<JioField
|
|
:schema="field"
|
|
:model-value="getFieldValue(field.key)"
|
|
:form-data="formData"
|
|
:error-message="errors?.[field.key]"
|
|
@update:model-value="setFieldValue(field.key, $event)"
|
|
@action="emit('field-action', $event)"
|
|
/>
|
|
</slot>
|
|
<JioField
|
|
v-else
|
|
:schema="field"
|
|
:model-value="getFieldValue(field.key)"
|
|
:form-data="formData"
|
|
:error-message="errors?.[field.key]"
|
|
@update:model-value="setFieldValue(field.key, $event)"
|
|
@action="emit('field-action', $event)"
|
|
/>
|
|
</template>
|
|
</template>
|
|
</template>
|
|
|
|
<!-- Custom group content slot -->
|
|
<slot :name="`group-${group.key}`" v-bind="{ group, formData }" />
|
|
</JioFieldGroup>
|
|
</template>
|
|
</template>
|
|
|
|
<!-- Empty state -->
|
|
<div v-else class="jio-form-renderer__empty">
|
|
<FaIcon icon="fa fas fa-cog" :size="32" />
|
|
<p>暂无配置项</p>
|
|
</div>
|
|
|
|
<!-- Sticky save bar -->
|
|
<JioSaveBar :dirty="dirty" :saving="saving" @save="$emit('save')" @reload="$emit('reload')" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
/**
|
|
* JioFormRenderer — the core schema-driven form engine.
|
|
*
|
|
* Takes a schema definition (array of field groups) and a reactive form data object,
|
|
* and renders a complete settings page with:
|
|
* - Grouped fields in card-style containers
|
|
* - Inline search/filter
|
|
* - Dirty state tracking with sticky save bar
|
|
* - Dependency-based field visibility
|
|
* - Loading and error states
|
|
*/
|
|
import { ref, computed, useSlots } from 'vue'
|
|
import FaIcon from './FaIcon.vue'
|
|
import JioSaveBar from './JioSaveBar.vue'
|
|
import JioFieldGroup from './JioFieldGroup.vue'
|
|
import JioField from './JioField.vue'
|
|
import JioSorterField from './JioSorterField.vue'
|
|
|
|
const props = defineProps({
|
|
/** Page title */
|
|
title: { type: String, default: '' },
|
|
/** Page description */
|
|
description: { type: String, default: '' },
|
|
/** Title icon (FA5 class) */
|
|
icon: { type: String, default: '' },
|
|
/**
|
|
* Schema definition: array of field groups.
|
|
* Each group: { key, title, description?, icon?, collapsible?, fields: FieldDef[] }
|
|
* Each field: { key, label, type, default, options?, dependsOn?, help?, ... }
|
|
*/
|
|
schema: { type: Array, default: () => [] },
|
|
/** Reactive form data object */
|
|
formData: { type: Object, default: () => ({}) },
|
|
/** Whether the form has unsaved changes */
|
|
dirty: { type: Boolean, default: false },
|
|
/** Whether data is currently loading */
|
|
loading: { type: Boolean, default: false },
|
|
/** Whether a save is in progress */
|
|
saving: { type: Boolean, default: false },
|
|
/** Load error message */
|
|
loadError: { type: String, default: '' },
|
|
/** Whether to show the search bar */
|
|
showSearch: { type: Boolean, default: true },
|
|
/** Validation errors keyed by field key */
|
|
errors: { type: Object, default: () => ({}) },
|
|
})
|
|
|
|
const emit = defineEmits(['update:formData', 'save', 'reload', 'field-action'])
|
|
const slots = useSlots()
|
|
|
|
const searchQuery = ref('')
|
|
|
|
// 同一页面上存在大量 type="password" 的凭证字段，Chrome 会把整页当成登录
|
|
// 表单，并把保存的账号灌进第一个文本框（也就是这个搜索框）。改名成搜索语义，
|
|
// 并显式关掉各类自动填充，才能让浏览器不再识别它。
|
|
const searchInputProps = {
|
|
autocomplete: 'off',
|
|
autocorrect: 'off',
|
|
autocapitalize: 'off',
|
|
spellcheck: 'false',
|
|
'data-lpignore': 'true',
|
|
'data-1p-ignore': 'true',
|
|
}
|
|
|
|
/** Evaluate dependsOn rule against current form data */
|
|
function matchDependsOn(dependsOn) {
|
|
if (!dependsOn) return true
|
|
if (typeof dependsOn === 'string') {
|
|
return !!props.formData[dependsOn]
|
|
}
|
|
if (typeof dependsOn === 'object') {
|
|
if (Array.isArray(dependsOn.all)) return dependsOn.all.every(matchDependsOn)
|
|
if (Array.isArray(dependsOn.any)) return dependsOn.any.some(matchDependsOn)
|
|
const { key, value, values, not, operator } = dependsOn
|
|
const currentVal = props.formData[key]
|
|
if (operator === 'truthy') return !!currentVal
|
|
if (operator === 'falsy') return !currentVal
|
|
if (operator === 'not_empty') return Array.isArray(currentVal) ? currentVal.length > 0 : currentVal !== '' && currentVal != null
|
|
if (operator === 'empty') return Array.isArray(currentVal) ? currentVal.length === 0 : currentVal === '' || currentVal == null
|
|
if (operator === 'eq') return currentVal === value
|
|
if (operator === 'neq') return currentVal !== value
|
|
if (not) {
|
|
if (Array.isArray(values)) {
|
|
// eslint-disable-next-line eqeqeq
|
|
return !values.some((v) => currentVal == v)
|
|
}
|
|
// eslint-disable-next-line eqeqeq
|
|
return currentVal !== value && currentVal != value
|
|
}
|
|
// values: match any of a list (e.g. provider ∈ [qq, polling])
|
|
if (Array.isArray(values)) {
|
|
// eslint-disable-next-line eqeqeq
|
|
return values.some((v) => currentVal == v)
|
|
}
|
|
// Loose equality so true matches 1 / '1' from some option stores.
|
|
// eslint-disable-next-line eqeqeq
|
|
return currentVal == value || (!!value === true && !!currentVal)
|
|
}
|
|
return true
|
|
}
|
|
|
|
function hasGroupSlot(group) {
|
|
return !!slots[`group-${group.key}`]
|
|
}
|
|
|
|
/** Check if a field should be visible based on its dependsOn rule */
|
|
function isFieldVisible(field) {
|
|
return matchDependsOn(field.dependsOn)
|
|
}
|
|
|
|
/**
|
|
* Tab label. `titleKey` binds the label to a live form value (e.g. the VIP level
|
|
* display name) so renaming a level renames its tab; `titleFallback` is used
|
|
* while that value is still empty.
|
|
*/
|
|
function tabName(tab) {
|
|
if (!tab) return ''
|
|
const dynamic = tab.titleKey ? props.formData?.[tab.titleKey] : ''
|
|
const label = typeof dynamic === 'string' ? dynamic.trim() : ''
|
|
return label || tab.titleFallback || tab.title || tab.key || ''
|
|
}
|
|
|
|
/** Whole group can be hidden (e.g. optional advanced blocks). */
|
|
function isGroupVisible(group) {
|
|
return matchDependsOn(group.dependsOn)
|
|
}
|
|
|
|
/** 可折叠分组的初始状态：defaultCollapsed 为真时默认收起。 */
|
|
function resolveGroupCollapsed(group) {
|
|
return !!group.defaultCollapsed
|
|
}
|
|
|
|
function groupKey(group) {
|
|
return group.key || group.title || 'group'
|
|
}
|
|
|
|
/** Get field value from formData */
|
|
function getFieldValue(key) {
|
|
return props.formData?.[key]
|
|
}
|
|
|
|
/** Set field value, emitting update for parent */
|
|
function setFieldValue(key, value) {
|
|
const newData = { ...props.formData, [key]: value }
|
|
emit('update:formData', newData)
|
|
}
|
|
|
|
/** Filter schema groups/fields by search query */
|
|
const filteredSchema = computed(() => {
|
|
const q = searchQuery.value?.toLowerCase().trim()
|
|
if (!q) return props.schema
|
|
|
|
return props.schema
|
|
.map(group => {
|
|
if (!group.fields) return null
|
|
|
|
// Check if group title matches
|
|
const groupMatch = (group.title || '').toLowerCase().includes(q)
|
|
|| (group.description || '').toLowerCase().includes(q)
|
|
|
|
// Filter fields by label, key, or help text matching query
|
|
const matchingFields = group.fields.filter(field => {
|
|
if (groupMatch) return true
|
|
if (field.type === 'tabbed' && Array.isArray(field.tabs)) {
|
|
return (field.label || '').toLowerCase().includes(q)
|
|
|| field.tabs.some(tab => (tab.fields || []).some(sub =>
|
|
(sub.label || '').toLowerCase().includes(q)
|
|
|| (sub.key || '').toLowerCase().includes(q)
|
|
|| (sub.help || '').toLowerCase().includes(q)
|
|
|| (sub.description || '').toLowerCase().includes(q)
|
|
))
|
|
}
|
|
return (field.label || '').toLowerCase().includes(q)
|
|
|| (field.key || '').toLowerCase().includes(q)
|
|
|| (field.help || '').toLowerCase().includes(q)
|
|
|| (field.description || '').toLowerCase().includes(q)
|
|
})
|
|
|
|
if (matchingFields.length === 0) return null
|
|
|
|
return { ...group, fields: groupMatch ? group.fields : matchingFields }
|
|
})
|
|
.filter(Boolean)
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.jio-form-renderer__header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
margin-bottom: 24px;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.jio-form-renderer__header-left {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
}
|
|
|
|
.jio-form-renderer__header-icon {
|
|
color: var(--jio-color-primary);
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.jio-form-renderer__title {
|
|
margin: 0;
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
color: var(--jio-color-text);
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.jio-form-renderer__desc {
|
|
margin: 4px 0 0;
|
|
font-size: 13px;
|
|
color: var(--jio-color-muted);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.jio-form-renderer__tabbed {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.jio-form-renderer__search {
|
|
min-width: 200px;
|
|
max-width: 280px;
|
|
}
|
|
|
|
.jio-form-renderer__loading {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 60px 0;
|
|
color: var(--jio-color-muted);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.jio-form-renderer__empty {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 60px 0;
|
|
color: var(--jio-color-border-strong);
|
|
}
|
|
|
|
.jio-form-renderer__empty p {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* Mobile */
|
|
@media (max-width: 768px) {
|
|
.jio-form-renderer__header {
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.jio-form-renderer__search {
|
|
max-width: 100%;
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|