hermes-web/packages/client/src/views/hermes/SettingsView.vue

<script setup lang="ts">
import { computed, onMounted, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
import { useSettingsStore } from "@/stores/hermes/settings";
import DisplaySettings from "@/components/hermes/settings/DisplaySettings.vue";
import AgentSettings from "@/components/hermes/settings/AgentSettings.vue";
import GatewayAutoStartSettings from "@/components/hermes/settings/GatewayAutoStartSettings.vue";
import ProxySettings from "@/components/hermes/settings/ProxySettings.vue";
import MemorySettings from "@/components/hermes/settings/MemorySettings.vue";
import CompressionSettings from "@/components/hermes/settings/CompressionSettings.vue";
import SessionSettings from "@/components/hermes/settings/SessionSettings.vue";
import PrivacySettings from "@/components/hermes/settings/PrivacySettings.vue";
import ModelSettings from "@/components/hermes/settings/ModelSettings.vue";
import AccountSettings from "@/components/hermes/settings/AccountSettings.vue";
import UserManagementSettings from "@/components/hermes/settings/UserManagementSettings.vue";
import VoiceSettings from "@/components/hermes/settings/VoiceSettings.vue";
import { isStoredSuperAdmin } from "@/api/client";
import { useProfilesStore } from "@/stores/hermes/profiles";

const settingsStore = useSettingsStore();
const profilesStore = useProfilesStore();
const { t } = useI18n();
const canManageUsers = isStoredSuperAdmin();
const route = useRoute();
const router = useRouter();
const activeTab = ref("account");

const validTabs = computed(() => new Set([
  "account",
  ...(canManageUsers ? ["users"] : []),
  "display",
  "proxy",
  "agent",
  "memory",
  "compression",
  "session",
  "privacy",
  "models",
  "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";
}

// tab 切到 URL query，刷新和分享链接都能停在同一个 pane 上。
watch(activeTab, (tab) => {
  router.replace({
    query: {
      ...route.query,
      tab: tab === "account" ? undefined : tab,
    },
  });
});

watch(() => route.query.tab, (tab) => {
  activeTab.value = normalizeTab(tab);
}, { immediate: true });

async function loadSettingsForProfile() {
  if (!profilesStore.activeProfileName || profilesStore.profiles.length === 0) {
    await profilesStore.fetchProfiles();
  }
  await settingsStore.fetchSettings();
}

onMounted(() => {
  void loadSettingsForProfile();
});
</script>

<template>
  <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">
      <a-spin
        :loading="settingsStore.loading || settingsStore.saving"
        :tip="t('common.loading')"
      >
        <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>
</template>

<style scoped lang="scss">
@use "@/styles/variables" as *;

.settings-view {
  height: calc(100 * var(--vh));
  display: flex;
  flex-direction: column;
}

.settings-content {
  flex: 1;
  overflow-y: auto;
  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>