give the pages the CYBER shell they were missing
The token swap made every control dark, but the pages themselves kept their Arco defaults — bare `padding: 20px` with components laid straight on the background. That is why the running app still read as "not the prototype" no matter how many variables were replaced: the prototype's page structure (panel / panel-h / panel-b / kv / tabs) was never built. Rather than restate that shell in each of the 25 views, it now lives in global.scss as .cy-view / .cy-panel / .cy-panel-h / .cy-panel-b / .cy-kv / .cy-tabs / .cy-tab / .cy-stack / .cy-sec-t, and the settings components share a global .settings-section + .section-title so all nine panes pick up the mono section headers at once. The per-component duplicates of those two rules were deleted. Settings is converted as the reference case: Arco's a-tabs/a-tab-pane became the underline tab strip, and the pane body sits in a panel. The URL-query sync moved to a watcher on activeTab so pane order and deep links still hold. Pane order is a contract, so it is asserted. Two tests lock the shell in place — one for the global classes and the cyan underline selected state, one for the settings structure and pane order. Without them the next edit easily slides back to bare Arco.
This commit is contained in:
@@ -392,10 +392,7 @@ onMounted(() => { loadLockedIps(); });
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: $text-primary;
|
||||
margin: 0 0 16px;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
.locked-list {
|
||||
|
||||
@@ -81,7 +81,4 @@ function debouncedSave(key: string, value: any) {
|
||||
<style scoped lang="scss">
|
||||
@use '@/styles/variables' as *;
|
||||
|
||||
.settings-section {
|
||||
margin-top: 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -99,8 +99,4 @@ function debouncedSave(key: string, value: any) {
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use '@/styles/variables' as *;
|
||||
|
||||
.settings-section {
|
||||
margin-top: 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -128,10 +128,6 @@ async function testCompletionNotification() {
|
||||
<style scoped lang="scss">
|
||||
@use '@/styles/variables' as *;
|
||||
|
||||
.settings-section {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.notify-controls {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -137,20 +137,20 @@ function saveExclude(value: string[]) {
|
||||
<style scoped lang="scss">
|
||||
@use '@/styles/variables' as *;
|
||||
|
||||
.settings-section {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.gateway-auto-start-settings {
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin: 0 0 6px;
|
||||
font-size: 15px;
|
||||
margin: 0 0 8px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid $border-light;
|
||||
font-family: $font-code;
|
||||
font-size: 12.5px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
letter-spacing: 0.04em;
|
||||
color: $text-primary;
|
||||
}
|
||||
|
||||
.section-hint {
|
||||
|
||||
@@ -66,8 +66,4 @@ function debouncedSave(key: string, value: any) {
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use '@/styles/variables' as *;
|
||||
|
||||
.settings-section {
|
||||
margin-top: 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -126,10 +126,6 @@ async function handleSaveCustom(providerKey: string) {
|
||||
<style scoped lang="scss">
|
||||
@use '@/styles/variables' as *;
|
||||
|
||||
.settings-section {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.empty-hint {
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
@@ -500,10 +500,6 @@ watch(
|
||||
<style scoped lang="scss">
|
||||
@use '@/styles/variables' as *;
|
||||
|
||||
.settings-section {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.weixin-qr-section {
|
||||
margin-top: 12px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
@@ -29,7 +29,4 @@ async function save(values: Record<string, any>) {
|
||||
<style scoped lang="scss">
|
||||
@use '@/styles/variables' as *;
|
||||
|
||||
.settings-section {
|
||||
margin-top: 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -75,14 +75,21 @@ async function save() {
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin: 0 0 6px;
|
||||
font-size: 18px;
|
||||
margin: 0 0 8px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid $border-light;
|
||||
font-family: $font-code;
|
||||
font-size: 12.5px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
color: $text-primary;
|
||||
}
|
||||
|
||||
.section-hint {
|
||||
margin: 0 0 16px;
|
||||
margin: 0 0 14px;
|
||||
color: $text-muted;
|
||||
font-size: 13px;
|
||||
font-size: 12.5px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.input-lg {
|
||||
|
||||
@@ -145,7 +145,4 @@ async function toggleWriteApproval(section: "memory" | "skills", value: boolean)
|
||||
<style scoped lang="scss">
|
||||
@use "@/styles/variables" as *;
|
||||
|
||||
.settings-section {
|
||||
margin-top: 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -20,37 +20,53 @@ defineProps<{
|
||||
<style scoped lang="scss">
|
||||
@use '@/styles/variables' as *;
|
||||
|
||||
// CYBER 的键值行：等宽键名 + 发丝线分隔，整行 hover 微微抬起。
|
||||
// 不是原型 .kv 的两列网格——设置项的 hint 文本较长，左列会被挤坏，
|
||||
// 所以保留「标签在上、控件在右」的结构，只换成 CYBER 的排版与线条。
|
||||
.setting-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 0;
|
||||
gap: 16px;
|
||||
padding: 11px 12px;
|
||||
border-bottom: 1px solid $border-light;
|
||||
transition: background-color $transition-fast;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(var(--accent-primary-rgb), 0.035);
|
||||
}
|
||||
}
|
||||
|
||||
.setting-info {
|
||||
flex: 1;
|
||||
margin-right: 16px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.setting-label {
|
||||
font-size: 13px;
|
||||
font-family: $font-code;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.03em;
|
||||
color: $text-primary;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.setting-hint {
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
color: $text-muted;
|
||||
margin-top: 2px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.setting-control {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-mobile) {
|
||||
@@ -60,10 +76,6 @@ defineProps<{
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.setting-info {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.setting-control {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -309,9 +309,11 @@ onMounted(loadUsers)
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin: 0 0 6px;
|
||||
font-size: 16px;
|
||||
margin: 0 0 10px;
|
||||
font-family: $font-code;
|
||||
font-size: 12.5px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
color: $text-primary;
|
||||
}
|
||||
|
||||
|
||||
@@ -1530,6 +1530,7 @@ export default {
|
||||
// Settings
|
||||
settings: {
|
||||
title: 'Settings',
|
||||
paneUnit: 'panes',
|
||||
saved: 'Saved',
|
||||
saveFailed: 'Save failed',
|
||||
tabs: {
|
||||
|
||||
@@ -1522,6 +1522,7 @@ export default {
|
||||
// 设置
|
||||
settings: {
|
||||
title: '设置',
|
||||
paneUnit: '个面板',
|
||||
saved: '已保存',
|
||||
saveFailed: '保存失败',
|
||||
tabs: {
|
||||
|
||||
@@ -613,6 +613,195 @@ a {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
// ─── Page shell ────────────────────────────────────────────────
|
||||
// 原型里每个页面都是 panel / panel-h / panel-b / kv / tabs 这套外壳。
|
||||
// 这里抽成全局类，页面直接用，避免 25 个页面各写一遍同样的框。
|
||||
|
||||
// 内容区统一内边距
|
||||
.cy-view {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 20px 22px 40px;
|
||||
}
|
||||
|
||||
// 面板：卡片刻一个发丝线边框 + 小圆角
|
||||
.cy-panel {
|
||||
position: relative;
|
||||
background: $bg-card;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: $radius-lg;
|
||||
|
||||
+ .cy-panel {
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
// 面板头：标题用等宽字体带字距，右侧留操作位
|
||||
.cy-panel-h {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 11px 14px;
|
||||
border-bottom: 1px solid $border-light;
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-family: $font-code;
|
||||
font-size: 12.5px;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
letter-spacing: 0.04em;
|
||||
color: $text-primary;
|
||||
}
|
||||
|
||||
.cy-meta {
|
||||
font-family: $font-code;
|
||||
font-size: 11px;
|
||||
color: $text-faint;
|
||||
}
|
||||
|
||||
.cy-panel-actions {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
// 面板体
|
||||
.cy-panel-b {
|
||||
padding: 14px;
|
||||
|
||||
&.flush {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 键值表：左列键沉底、右列值，是设置类页面的主结构
|
||||
.cy-kv {
|
||||
display: grid;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: $radius-md;
|
||||
overflow: hidden;
|
||||
background: $bg-card;
|
||||
|
||||
.cy-kr {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(120px, 34%) 1fr;
|
||||
border-bottom: 1px solid $border-light;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.cy-kk {
|
||||
padding: 8px 11px;
|
||||
background: $bg-secondary;
|
||||
font-family: $font-code;
|
||||
font-size: 11.5px;
|
||||
color: $text-muted;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.cy-kv-v {
|
||||
padding: 8px 11px;
|
||||
font-size: 12.5px;
|
||||
min-width: 0;
|
||||
word-break: break-word;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
&.two .cy-kr {
|
||||
grid-template-columns: minmax(120px, 26%) 1fr minmax(120px, 26%) 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
// 表格式 tab 条：下划线指示，不做胶囊
|
||||
.cy-tabs {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
border-bottom: 1px solid $border-color;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.cy-tab {
|
||||
padding: 8px 13px;
|
||||
font-family: $font-code;
|
||||
font-size: 12.5px;
|
||||
color: $text-muted;
|
||||
border-bottom: 2px solid transparent;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
transition: color 0.14s ease, border-color 0.14s ease;
|
||||
|
||||
&:hover {
|
||||
color: $text-primary;
|
||||
}
|
||||
|
||||
&.on {
|
||||
color: $accent-primary;
|
||||
border-bottom-color: $accent-primary;
|
||||
text-shadow: 0 0 10px rgba(var(--accent-primary-rgb), 0.45);
|
||||
}
|
||||
|
||||
&.dis {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
// 竖排堆叠容器
|
||||
.cy-stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
// 分节小标题
|
||||
.cy-sec-t {
|
||||
font-family: $font-code;
|
||||
font-size: 11.5px;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: $text-faint;
|
||||
margin: 4px 0 2px;
|
||||
}
|
||||
|
||||
// 设置类页面的分区容器与标题。
|
||||
// 各 settings 组件都在用 .settings-section / .section-title 这两个类名，
|
||||
// 放全局是为了让 9 个 pane 的标题排版一次到位，不用逐个组件改样式。
|
||||
.settings-section {
|
||||
margin-top: 16px;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.settings-section .section-title,
|
||||
.section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin: 0 0 12px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid $border-light;
|
||||
font-family: $font-code;
|
||||
font-size: 12.5px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
color: $text-primary;
|
||||
}
|
||||
|
||||
// Responsive utility classes for inline width replacement
|
||||
.input-sm { width: 90px; }
|
||||
.input-md { width: 200px; }
|
||||
|
||||
@@ -40,20 +40,37 @@ const validTabs = computed(() => new Set([
|
||||
"voice",
|
||||
]));
|
||||
|
||||
// pane 顺序是契约（见 docs/cli-chat-sessions.md 与原型 renderSettings），不要重排。
|
||||
const tabs = computed(() => [
|
||||
{ key: "account", label: t("settings.tabs.account") },
|
||||
...(canManageUsers ? [{ key: "users", label: t("settings.tabs.users") }] : []),
|
||||
{ key: "display", label: t("settings.tabs.display") },
|
||||
{ key: "proxy", label: t("settings.tabs.proxy") },
|
||||
{ key: "agent", label: t("settings.tabs.agent") },
|
||||
{ key: "memory", label: t("settings.tabs.memory") },
|
||||
{ key: "compression", label: t("settings.tabs.compression") },
|
||||
{ key: "session", label: t("settings.tabs.session") },
|
||||
{ key: "privacy", label: t("settings.tabs.privacy") },
|
||||
{ key: "models", label: t("settings.tabs.models") },
|
||||
{ key: "voice", label: t("settings.tabs.voice") },
|
||||
]);
|
||||
|
||||
const paneCount = computed(() => tabs.value.length);
|
||||
|
||||
function normalizeTab(value: unknown): string {
|
||||
const tab = typeof value === "string" ? value : "";
|
||||
return validTabs.value.has(tab) ? tab : "account";
|
||||
}
|
||||
|
||||
function handleTabUpdate(tab: string | number) {
|
||||
activeTab.value = normalizeTab(tab);
|
||||
// tab 切到 URL query，刷新和分享链接都能停在同一个 pane 上。
|
||||
watch(activeTab, (tab) => {
|
||||
router.replace({
|
||||
query: {
|
||||
...route.query,
|
||||
tab: activeTab.value === "account" ? undefined : activeTab.value,
|
||||
tab: tab === "account" ? undefined : tab,
|
||||
},
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
watch(() => route.query.tab, (tab) => {
|
||||
activeTab.value = normalizeTab(tab);
|
||||
@@ -75,6 +92,9 @@ onMounted(() => {
|
||||
<div class="settings-view">
|
||||
<header class="page-header">
|
||||
<h2 class="header-title">{{ t("settings.title") }}</h2>
|
||||
<div class="header-actions">
|
||||
<span class="header-meta">{{ paneCount }} {{ t("settings.paneUnit") }}</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="settings-content">
|
||||
@@ -82,42 +102,37 @@ onMounted(() => {
|
||||
:loading="settingsStore.loading || settingsStore.saving"
|
||||
:tip="t('common.loading')"
|
||||
>
|
||||
<a-tabs v-model:active-key="activeTab" type="line" @change="handleTabUpdate">
|
||||
<a-tab-pane key="account" :title="t('settings.tabs.account')">
|
||||
<AccountSettings />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane v-if="canManageUsers" key="users" :title="t('settings.tabs.users')">
|
||||
<UserManagementSettings />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="display" :title="t('settings.tabs.display')">
|
||||
<DisplaySettings />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="proxy" :title="t('settings.tabs.proxy')">
|
||||
<ProxySettings />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="agent" :title="t('settings.tabs.agent')">
|
||||
<AgentSettings />
|
||||
<GatewayAutoStartSettings />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="memory" :title="t('settings.tabs.memory')">
|
||||
<MemorySettings />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="compression" :title="t('settings.tabs.compression')">
|
||||
<CompressionSettings />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="session" :title="t('settings.tabs.session')">
|
||||
<SessionSettings />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="privacy" :title="t('settings.tabs.privacy')">
|
||||
<PrivacySettings />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="models" :title="t('settings.tabs.models')">
|
||||
<ModelSettings />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="voice" :title="t('settings.tabs.voice')">
|
||||
<VoiceSettings />
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
<div class="cy-tabs">
|
||||
<button
|
||||
v-for="tab in tabs"
|
||||
:key="tab.key"
|
||||
type="button"
|
||||
class="cy-tab"
|
||||
:class="{ on: tab.key === activeTab }"
|
||||
@click="activeTab = tab.key"
|
||||
>
|
||||
{{ tab.label }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="cy-panel">
|
||||
<div class="cy-panel-b">
|
||||
<AccountSettings v-if="activeTab === 'account'" />
|
||||
<UserManagementSettings v-else-if="activeTab === 'users'" />
|
||||
<DisplaySettings v-else-if="activeTab === 'display'" />
|
||||
<ProxySettings v-else-if="activeTab === 'proxy'" />
|
||||
<div v-else-if="activeTab === 'agent'" class="cy-stack">
|
||||
<AgentSettings />
|
||||
<GatewayAutoStartSettings />
|
||||
</div>
|
||||
<MemorySettings v-else-if="activeTab === 'memory'" />
|
||||
<CompressionSettings v-else-if="activeTab === 'compression'" />
|
||||
<SessionSettings v-else-if="activeTab === 'session'" />
|
||||
<PrivacySettings v-else-if="activeTab === 'privacy'" />
|
||||
<ModelSettings v-else-if="activeTab === 'models'" />
|
||||
<VoiceSettings v-else-if="activeTab === 'voice'" />
|
||||
</div>
|
||||
</div>
|
||||
</a-spin>
|
||||
</div>
|
||||
</div>
|
||||
@@ -135,6 +150,30 @@ onMounted(() => {
|
||||
.settings-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
padding: 20px 22px 40px;
|
||||
|
||||
:deep(.arco-spin) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
:deep(.arco-tabs-content) {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.header-meta {
|
||||
font-family: $font-code;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.06em;
|
||||
color: $text-faint;
|
||||
}
|
||||
|
||||
.cy-panel {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
// 各 settings 组件根节点自带 margin-top，在面板里会多出一截
|
||||
.settings-content :deep(.settings-section:first-child) {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -57,6 +57,38 @@ describe('client style system', () => {
|
||||
expect(source).not.toMatch(/localStorage\.getItem\(['"]hermes_(brightness|style)/)
|
||||
})
|
||||
|
||||
it('exposes the CYBER page shell so pages stop falling back to bare Arco layouts', () => {
|
||||
// 原型里每个页面都是 panel / panel-h / panel-b / kv / tabs 这套外壳。
|
||||
// 25 个页面各写一遍同样的框会漂移，所以抽成全局类并在这里锁住。
|
||||
const globalStyles = readClientFile('styles/global.scss')
|
||||
|
||||
for (const cls of ['.cy-view', '.cy-panel', '.cy-panel-h', '.cy-panel-b', '.cy-kv', '.cy-tabs', '.cy-tab']) {
|
||||
expect(globalStyles).toContain(cls)
|
||||
}
|
||||
|
||||
// 选中态必须是霓虹青 + 发丝下划线，不是胶囊底色。
|
||||
const onRule = globalStyles.slice(globalStyles.indexOf('&.on {'), globalStyles.indexOf('&.dis {'))
|
||||
expect(onRule).toContain('color: $accent-primary;')
|
||||
expect(onRule).toContain('border-bottom-color: $accent-primary;')
|
||||
})
|
||||
|
||||
it('keeps the settings shell on the shared page header baseline', () => {
|
||||
// 设置页是唯一有 11 个 pane 的页面，最容易退回 Arco 的 a-tabs 默认外观。
|
||||
const settingsView = readClientFile('views/hermes/SettingsView.vue')
|
||||
|
||||
expect(settingsView).toContain('cy-tabs')
|
||||
expect(settingsView).toContain('cy-panel')
|
||||
// 不再依赖 a-tabs / a-tab-pane。
|
||||
expect(settingsView).not.toContain('<a-tabs')
|
||||
expect(settingsView).not.toContain('<a-tab-pane')
|
||||
// pane 顺序是契约：account 必须在 users 之前，其余按固定顺序。
|
||||
const order = ['account', 'users', 'display', 'proxy', 'agent', 'memory',
|
||||
'compression', 'session', 'privacy', 'models', 'voice']
|
||||
const positions = order.map(key => settingsView.indexOf(`key: "${key}"`))
|
||||
expect(positions.every(p => p > 0)).toBe(true)
|
||||
expect([...positions].sort((a, b) => a - b)).toEqual(positions)
|
||||
})
|
||||
|
||||
it('keeps mobile inputs at 16px so iOS does not zoom on focus', () => {
|
||||
const globalStyles = readClientFile('styles/global.scss')
|
||||
|
||||
|
||||
Reference in New Issue
Block a user