feat: add settings page with navigation and access control updates

web/src/views/AppShellRouteView.vue

@@ -3,6 +3,7 @@
     <SidebarRail
       :nav-items="filteredNavItems"
       :active-view="activeView"
+      :company-name="companyProfile.name"
       :current-user="currentUser"
       @navigate="handleNavigate"
       @open-chat="handleOpenChat"
@@ -19,10 +20,12 @@
         'approval-main': activeView === 'approval',
         'policies-main': activeView === 'policies',
         'audit-main': activeView === 'audit',
-        'employees-main': activeView === 'employees'
+        'employees-main': activeView === 'employees',
+        'settings-main': activeView === 'settings'
       }"
     >
       <TopBar
+        v-if="activeView !== 'settings'"
         :current-view="topBarView"
         :search="search"
         :active-view="activeView"
@@ -39,7 +42,7 @@
       />
 
       <FilterBar
-        v-if="activeView !== 'chat' && activeView !== 'overview' && activeView !== 'workbench' && activeView !== 'requests' && activeView !== 'approval' && activeView !== 'policies' && activeView !== 'audit' && activeView !== 'employees'"
+        v-if="activeView !== 'chat' && activeView !== 'overview' && activeView !== 'workbench' && activeView !== 'requests' && activeView !== 'approval' && activeView !== 'policies' && activeView !== 'audit' && activeView !== 'employees' && activeView !== 'settings'"
         :compact="activeView === 'overview'"
         :filters="filters"
         :ranges="ranges"
@@ -55,7 +58,8 @@
           'approval-workarea': activeView === 'approval',
           'policies-workarea': activeView === 'policies',
           'audit-workarea': activeView === 'audit',
-          'employees-workarea': activeView === 'employees'
+          'employees-workarea': activeView === 'employees',
+          'settings-workarea': activeView === 'settings'
         }"
       >
         <OverviewView
@@ -108,7 +112,8 @@
         <ApprovalCenterView v-else-if="activeView === 'approval'" />
         <PoliciesView v-else-if="activeView === 'policies'" />
         <AuditView v-else-if="activeView === 'audit'" />
-        <EmployeeManagementView v-else @overview-change="employeeSummary = $event" />
+        <EmployeeManagementView v-else-if="activeView === 'employees'" @overview-change="employeeSummary = $event" />
+        <SettingsView v-else />
       </section>
     </main>
 
@@ -139,6 +144,7 @@ import ApprovalCenterView from './ApprovalCenterView.vue'
 import PoliciesView from './PoliciesView.vue'
 import AuditView from './AuditView.vue'
 import EmployeeManagementView from './EmployeeManagementView.vue'
+import SettingsView from './SettingsView.vue'
 
 import { useAppShell } from '../composables/useAppShell.js'
 import { useSystemState } from '../composables/useSystemState.js'
@@ -183,7 +189,7 @@ const {
   uploadedFiles
 } = useAppShell()
 
-const { currentUser, logout } = useSystemState()
+const { companyProfile, currentUser, logout } = useSystemState()
 const filteredNavItems = computed(() => filterNavItemsByAccess(navItems, currentUser.value))
 
 function handleLogout() {

web/src/views/SettingsView.vue

@@ -0,0 +1,510 @@
+<template>
+  <section class="settings-page">
+    <div class="settings-shell panel">
+      <aside class="settings-nav" aria-label="系统设置分类">
+        <div class="settings-nav-head">
+          <span class="nav-kicker">Settings</span>
+          <h2>系统设置</h2>
+          <p>已完成 {{ completedSectionCount }} / {{ sections.length }} 项配置，敏感字段不会保存在浏览器草稿中。</p>
+        </div>
+
+        <nav class="settings-nav-list">
+          <button
+            v-for="section in sections"
+            :key="section.id"
+            class="settings-nav-item"
+            :class="{
+              active: activeSection === section.id,
+              complete: sectionStatus[section.id]
+            }"
+            type="button"
+            @click="activateSection(section.id)"
+          >
+            <span class="nav-item-copy">
+              <strong>{{ section.label }}</strong>
+              <small>{{ section.desc }}</small>
+            </span>
+
+            <span class="nav-item-state">
+              <i :class="sectionStatus[section.id] ? 'mdi mdi-check' : 'mdi mdi-chevron-right'"></i>
+            </span>
+          </button>
+        </nav>
+
+        <div class="settings-nav-foot">
+          <span>当前环境</span>
+          <strong>{{ pageState.companyForm.environment }}</strong>
+        </div>
+      </aside>
+
+      <div class="settings-body">
+        <header class="settings-toolbar">
+          <div class="settings-toolbar-copy">
+            <span class="settings-breadcrumb">首页 / 系统设置 / {{ activeSectionConfig.label }}</span>
+            <h3>{{ activeSectionConfig.title }}</h3>
+            <p>{{ activeSectionConfig.longDesc }}</p>
+          </div>
+
+          <div class="settings-toolbar-actions">
+            <span class="section-status" :class="{ complete: sectionStatus[activeSection] }">
+              <i :class="sectionStatus[activeSection] ? 'mdi mdi-check-decagram' : 'mdi mdi-progress-clock'"></i>
+              <span>{{ sectionStatus[activeSection] ? '当前项已就绪' : '当前项待补全' }}</span>
+            </span>
+
+            <button class="save-button" type="button" @click="saveActiveSection">
+              <i class="mdi mdi-content-save-outline"></i>
+              <span>{{ activeSectionConfig.actionLabel }}</span>
+            </button>
+          </div>
+        </header>
+
+        <div class="settings-content">
+          <template v-if="activeSection === 'profile'">
+            <section class="settings-card">
+              <div class="card-head">
+                <div>
+                  <h4>系统基本信息</h4>
+                  <p>统一维护企业名称、显示名称和版权信息，保存后左侧品牌名称会立即同步预览。</p>
+                </div>
+              </div>
+
+              <div class="form-grid profile-grid">
+                <label class="field logo-field">
+                  <span><em>*</em> 系统图标</span>
+                  <div class="logo-tile" aria-hidden="true">
+                    <i class="mdi mdi-domain"></i>
+                  </div>
+                </label>
+
+                <label class="field">
+                  <span><em>*</em> 企业名称</span>
+                  <input v-model="pageState.companyForm.companyName" type="text" placeholder="请输入企业法定名称" />
+                </label>
+
+                <label class="field">
+                  <span>企业编码</span>
+                  <input v-model="pageState.companyForm.companyCode" type="text" placeholder="例如 XF-001" />
+                </label>
+
+                <label class="field field-wide">
+                  <span><em>*</em> 系统显示名称</span>
+                  <input v-model="pageState.companyForm.displayName" type="text" placeholder="请输入系统对内展示名称" />
+                </label>
+
+                <label class="field">
+                  <span>备案号</span>
+                  <input v-model="pageState.companyForm.recordNumber" type="text" placeholder="请输入备案号" />
+                </label>
+
+                <label class="field">
+                  <span>运行环境</span>
+                  <select v-model="pageState.companyForm.environment">
+                    <option value="生产环境">生产环境</option>
+                    <option value="预发布环境">预发布环境</option>
+                    <option value="测试环境">测试环境</option>
+                  </select>
+                </label>
+
+                <label class="field field-full">
+                  <span><em>*</em> 版权信息</span>
+                  <input
+                    v-model="pageState.companyForm.copyright"
+                    type="text"
+                    placeholder="例如 Copyright © 2024-2026 X-Financial. All Rights Reserved."
+                  />
+                </label>
+              </div>
+            </section>
+
+            <section class="settings-card">
+              <div class="card-head">
+                <div>
+                  <h4>品牌预览</h4>
+                  <p>用于确认侧边栏品牌、页脚版权和系统入口名称的实际展示效果。</p>
+                </div>
+              </div>
+
+              <div class="preview-card">
+                <div class="preview-icon">
+                  <i class="mdi mdi-domain"></i>
+                </div>
+
+                <div class="preview-copy">
+                  <strong>{{ pageState.companyForm.displayName || '系统显示名称' }}</strong>
+                  <p>{{ pageState.companyForm.companyName || '企业法定名称' }}</p>
+                  <small>{{ pageState.companyForm.copyright || '版权信息将显示在这里' }}</small>
+                </div>
+
+                <span class="preview-badge">{{ pageState.companyForm.environment }}</span>
+              </div>
+            </section>
+          </template>
+
+          <template v-else-if="activeSection === 'admin'">
+            <section class="settings-card">
+              <div class="card-head">
+                <div>
+                  <h4>管理员账号</h4>
+                  <p>维护最高权限管理员的登录账户、密码和安全通知邮箱。</p>
+                </div>
+              </div>
+
+              <div class="form-grid">
+                <label class="field">
+                  <span><em>*</em> 管理员账号</span>
+                  <input v-model="pageState.adminForm.adminAccount" type="text" placeholder="请输入管理员账号" />
+                </label>
+
+                <label class="field">
+                  <span><em>*</em> 管理员邮箱</span>
+                  <input v-model="pageState.adminForm.adminEmail" type="email" placeholder="请输入管理员邮箱" />
+                </label>
+
+                <label class="field">
+                  <span>新密码</span>
+                  <input
+                    v-model="pageState.adminForm.newPassword"
+                    type="password"
+                    autocomplete="new-password"
+                    placeholder="至少 5 位"
+                  />
+                </label>
+
+                <label class="field">
+                  <span>确认密码</span>
+                  <input
+                    v-model="pageState.adminForm.confirmPassword"
+                    type="password"
+                    autocomplete="new-password"
+                    placeholder="再次输入管理员密码"
+                  />
+                </label>
+              </div>
+            </section>
+
+            <section class="settings-card">
+              <div class="card-head">
+                <div>
+                  <h4>登录安全策略</h4>
+                  <p>控制会话超时、登录提醒和管理员高风险操作的基础安全策略。</p>
+                </div>
+              </div>
+
+              <div class="form-grid compact-grid">
+                <label class="field">
+                  <span><em>*</em> 会话超时（分钟）</span>
+                  <input v-model.number="pageState.adminForm.sessionTimeout" type="number" min="5" max="240" />
+                </label>
+
+                <label class="field">
+                  <span>安全通知邮箱</span>
+                  <input v-model="pageState.adminForm.noticeEmail" type="email" placeholder="用于接收安全提醒" />
+                </label>
+              </div>
+
+              <div class="switch-group">
+                <button class="switch-row" type="button" @click="toggleBoolean('adminForm', 'mfaEnabled')">
+                  <span class="switch-copy">
+                    <strong>开启双因素验证</strong>
+                    <small>要求管理员使用附加验证步骤登录后台。</small>
+                  </span>
+                  <span class="switch" :class="{ active: pageState.adminForm.mfaEnabled }"><i></i></span>
+                </button>
+
+                <button class="switch-row" type="button" @click="toggleBoolean('adminForm', 'strongPassword')">
+                  <span class="switch-copy">
+                    <strong>启用强密码策略</strong>
+                    <small>管理员密码修改时需要满足强度要求。</small>
+                  </span>
+                  <span class="switch" :class="{ active: pageState.adminForm.strongPassword }"><i></i></span>
+                </button>
+
+                <button class="switch-row" type="button" @click="toggleBoolean('adminForm', 'loginAlertEnabled')">
+                  <span class="switch-copy">
+                    <strong>异常登录提醒</strong>
+                    <small>检测到高风险登录时，向安全通知邮箱发送告警。</small>
+                  </span>
+                  <span class="switch" :class="{ active: pageState.adminForm.loginAlertEnabled }"><i></i></span>
+                </button>
+              </div>
+            </section>
+          </template>
+
+          <template v-else-if="activeSection === 'llm'">
+            <section class="settings-card">
+              <div class="card-head">
+                <div>
+                  <h4>模型接入</h4>
+                  <p>配置大语言模型的供应商、模型名称和接入地址，用于 AI 助手与识别流程。</p>
+                </div>
+              </div>
+
+              <div class="form-grid">
+                <label class="field">
+                  <span><em>*</em> 供应商</span>
+                  <select v-model="pageState.llmForm.provider">
+                    <option value="OpenAI Compatible">OpenAI Compatible</option>
+                    <option value="Azure OpenAI">Azure OpenAI</option>
+                    <option value="Ollama">Ollama</option>
+                    <option value="自定义网关">自定义网关</option>
+                  </select>
+                </label>
+
+                <label class="field">
+                  <span><em>*</em> 模型名称</span>
+                  <input v-model="pageState.llmForm.model" type="text" placeholder="请输入主模型名称" />
+                </label>
+
+                <label class="field field-full">
+                  <span><em>*</em> 接口地址</span>
+                  <input v-model="pageState.llmForm.endpoint" type="text" placeholder="请输入兼容接口地址" />
+                </label>
+
+                <label class="field">
+                  <span>Embedding 模型</span>
+                  <input v-model="pageState.llmForm.embeddingModel" type="text" placeholder="请输入向量模型名称" />
+                </label>
+
+                <label class="field">
+                  <span>API Key</span>
+                  <input v-model="pageState.llmForm.apiKey" type="password" autocomplete="off" placeholder="保存后不会保留在草稿中" />
+                </label>
+              </div>
+            </section>
+
+            <section class="settings-card">
+              <div class="card-head">
+                <div>
+                  <h4>推理与知识策略</h4>
+                  <p>控制响应质量、输出长度以及知识库、引用回溯等增强能力。</p>
+                </div>
+              </div>
+
+              <div class="form-grid compact-grid">
+                <label class="field">
+                  <span>推理模式</span>
+                  <select v-model="pageState.llmForm.reasoningMode">
+                    <option value="balanced">平衡</option>
+                    <option value="quality">优先质量</option>
+                    <option value="latency">优先速度</option>
+                  </select>
+                </label>
+
+                <label class="field">
+                  <span>最大 Token</span>
+                  <input v-model.number="pageState.llmForm.maxTokens" type="number" min="512" step="256" />
+                </label>
+
+                <label class="field field-full">
+                  <span>Temperature</span>
+                  <div class="range-shell">
+                    <input v-model.number="pageState.llmForm.temperature" type="range" min="0" max="1" step="0.1" />
+                    <strong>{{ pageState.llmForm.temperature.toFixed(1) }}</strong>
+                  </div>
+                </label>
+              </div>
+
+              <div class="switch-group">
+                <button class="switch-row" type="button" @click="toggleBoolean('llmForm', 'knowledgeEnabled')">
+                  <span class="switch-copy">
+                    <strong>启用知识库检索</strong>
+                    <small>允许模型在回答时结合制度知识库和业务文档。</small>
+                  </span>
+                  <span class="switch" :class="{ active: pageState.llmForm.knowledgeEnabled }"><i></i></span>
+                </button>
+
+                <button class="switch-row" type="button" @click="toggleBoolean('llmForm', 'citationEnabled')">
+                  <span class="switch-copy">
+                    <strong>输出引用来源</strong>
+                    <small>在 AI 助手回答中附带依据与来源提示。</small>
+                  </span>
+                  <span class="switch" :class="{ active: pageState.llmForm.citationEnabled }"><i></i></span>
+                </button>
+              </div>
+            </section>
+          </template>
+
+          <template v-else-if="activeSection === 'logs'">
+            <section class="settings-card">
+              <div class="card-head">
+                <div>
+                  <h4>日志级别与留存</h4>
+                  <p>定义系统记录粒度、归档周期和告警接收人，方便后续审计与排障。</p>
+                </div>
+              </div>
+
+              <div class="chip-row">
+                <button
+                  v-for="level in logLevels"
+                  :key="level"
+                  class="level-chip"
+                  :class="{ active: pageState.logForm.level === level }"
+                  type="button"
+                  @click="pageState.logForm.level = level"
+                >
+                  {{ level }}
+                </button>
+              </div>
+
+              <div class="form-grid">
+                <label class="field">
+                  <span><em>*</em> 留存天数</span>
+                  <input v-model.number="pageState.logForm.retentionDays" type="number" min="7" />
+                </label>
+
+                <label class="field">
+                  <span>归档周期</span>
+                  <select v-model="pageState.logForm.archiveCycle">
+                    <option value="daily">按天归档</option>
+                    <option value="weekly">按周归档</option>
+                    <option value="monthly">按月归档</option>
+                  </select>
+                </label>
+
+                <label class="field field-full">
+                  <span><em>*</em> 日志路径</span>
+                  <input v-model="pageState.logForm.logPath" type="text" placeholder="例如 server/logs/app.log" />
+                </label>
+
+                <label class="field field-full">
+                  <span>告警邮箱</span>
+                  <input v-model="pageState.logForm.alertEmail" type="email" placeholder="用于接收日志异常提醒" />
+                </label>
+              </div>
+            </section>
+
+            <section class="settings-card">
+              <div class="card-head">
+                <div>
+                  <h4>审计策略</h4>
+                  <p>决定是否记录关键操作、登录行为以及是否对敏感字段进行脱敏处理。</p>
+                </div>
+              </div>
+
+              <div class="switch-group">
+                <button class="switch-row" type="button" @click="toggleBoolean('logForm', 'operationAudit')">
+                  <span class="switch-copy">
+                    <strong>记录关键操作日志</strong>
+                    <small>保存配置修改、审批动作和账户管理等重要事件。</small>
+                  </span>
+                  <span class="switch" :class="{ active: pageState.logForm.operationAudit }"><i></i></span>
+                </button>
+
+                <button class="switch-row" type="button" @click="toggleBoolean('logForm', 'loginAudit')">
+                  <span class="switch-copy">
+                    <strong>记录登录审计</strong>
+                    <small>追踪登录来源、登录结果和异常登录行为。</small>
+                  </span>
+                  <span class="switch" :class="{ active: pageState.logForm.loginAudit }"><i></i></span>
+                </button>
+
+                <button class="switch-row" type="button" @click="toggleBoolean('logForm', 'maskSensitive')">
+                  <span class="switch-copy">
+                    <strong>敏感字段脱敏</strong>
+                    <small>日志写入时自动隐藏密码、密钥与认证令牌。</small>
+                  </span>
+                  <span class="switch" :class="{ active: pageState.logForm.maskSensitive }"><i></i></span>
+                </button>
+              </div>
+            </section>
+          </template>
+
+          <template v-else>
+            <section class="settings-card">
+              <div class="card-head">
+                <div>
+                  <h4>SMTP 基础配置</h4>
+                  <p>维护系统发信地址、认证账号和加密方式，用于审批提醒与系统通知。</p>
+                </div>
+              </div>
+
+              <div class="form-grid">
+                <label class="field">
+                  <span><em>*</em> SMTP Host</span>
+                  <input v-model="pageState.mailForm.smtpHost" type="text" placeholder="请输入 SMTP Host" />
+                </label>
+
+                <label class="field">
+                  <span><em>*</em> 端口</span>
+                  <input v-model.number="pageState.mailForm.port" type="number" min="1" max="65535" />
+                </label>
+
+                <label class="field">
+                  <span>加密方式</span>
+                  <select v-model="pageState.mailForm.encryption">
+                    <option value="SSL/TLS">SSL/TLS</option>
+                    <option value="STARTTLS">STARTTLS</option>
+                    <option value="None">无</option>
+                  </select>
+                </label>
+
+                <label class="field">
+                  <span>发件人名称</span>
+                  <input v-model="pageState.mailForm.senderName" type="text" placeholder="请输入发件人名称" />
+                </label>
+
+                <label class="field">
+                  <span><em>*</em> 发件人邮箱</span>
+                  <input v-model="pageState.mailForm.senderAddress" type="email" placeholder="请输入发件人邮箱" />
+                </label>
+
+                <label class="field">
+                  <span><em>*</em> 登录账号</span>
+                  <input v-model="pageState.mailForm.username" type="text" placeholder="请输入 SMTP 登录账号" />
+                </label>
+
+                <label class="field field-full">
+                  <span>SMTP 密码</span>
+                  <input v-model="pageState.mailForm.password" type="password" autocomplete="off" placeholder="保存后不会保留在草稿中" />
+                </label>
+              </div>
+            </section>
+
+            <section class="settings-card">
+              <div class="card-head">
+                <div>
+                  <h4>通知策略</h4>
+                  <p>控制是否启用邮件通知、日报摘要以及默认接收邮箱。</p>
+                </div>
+              </div>
+
+              <div class="switch-group">
+                <button class="switch-row" type="button" @click="toggleBoolean('mailForm', 'alertEnabled')">
+                  <span class="switch-copy">
+                    <strong>启用系统通知</strong>
+                    <small>审批、异常告警和系统事件可通过邮件触达用户。</small>
+                  </span>
+                  <span class="switch" :class="{ active: pageState.mailForm.alertEnabled }"><i></i></span>
+                </button>
+
+                <button class="switch-row" type="button" @click="toggleBoolean('mailForm', 'digestEnabled')">
+                  <span class="switch-copy">
+                    <strong>启用日报摘要</strong>
+                    <small>按固定时间发送系统运行与待办摘要。</small>
+                  </span>
+                  <span class="switch" :class="{ active: pageState.mailForm.digestEnabled }"><i></i></span>
+                </button>
+              </div>
+
+              <div class="form-grid compact-grid">
+                <label class="field">
+                  <span>摘要发送时间</span>
+                  <input v-model="pageState.mailForm.digestTime" type="time" />
+                </label>
+
+                <label class="field">
+                  <span>默认接收邮箱</span>
+                  <input v-model="pageState.mailForm.defaultReceiver" type="email" placeholder="请输入默认接收邮箱" />
+                </label>
+              </div>
+            </section>
+          </template>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script src="./scripts/SettingsView.js"></script>
+
+<style scoped src="../assets/styles/views/settings-view.css"></style>

web/src/views/scripts/SettingsView.js

@@ -0,0 +1,395 @@
+import { computed, ref } from 'vue'
+
+import { useSystemState } from '../../composables/useSystemState.js'
+import { useToast } from '../../composables/useToast.js'
+
+const SETTINGS_STORAGE_KEY = 'x-financial-settings-draft'
+const CURRENT_YEAR = new Date().getFullYear()
+
+const SECTION_DEFINITIONS = [
+  {
+    id: 'profile',
+    label: '企业信息',
+    title: '系统基本信息',
+    desc: '公司名称、品牌与版权',
+    longDesc: '统一维护企业名称、系统显示名和版权信息，保存后会直接同步到当前界面的品牌预览。',
+    actionLabel: '保存企业信息'
+  },
+  {
+    id: 'admin',
+    label: '管理员安全',
+    title: '管理员账号与安全策略',
+    desc: '账号、密码与登录安全',
+    longDesc: '管理最高权限管理员的账号、密码和登录安全策略，密码类字段仅用于本次填写，不会进入浏览器草稿。',
+    actionLabel: '保存安全设置'
+  },
+  {
+    id: 'llm',
+    label: '大语言模型',
+    title: '模型接入配置',
+    desc: '供应商、模型与推理策略',
+    longDesc: '配置 AI 助手与识别流程依赖的大模型接入信息，并维护推理模式、知识检索和输出行为。',
+    actionLabel: '保存模型配置'
+  },
+  {
+    id: 'logs',
+    label: '日志策略',
+    title: '日志与审计策略',
+    desc: '日志级别、留存与脱敏',
+    longDesc: '定义系统日志级别、留存周期和审计策略，保证后续排障、追溯和安全审计有完整依据。',
+    actionLabel: '保存日志策略'
+  },
+  {
+    id: 'mail',
+    label: '邮箱设置',
+    title: '邮箱通知配置',
+    desc: 'SMTP 与通知投递策略',
+    longDesc: '维护系统邮件发送配置和通知投递策略，审批、预警和摘要邮件都会依赖这里的设置。',
+    actionLabel: '保存邮箱配置'
+  }
+]
+
+const LOG_LEVELS = ['DEBUG', 'INFO', 'WARN', 'ERROR']
+
+function normalizeValue(value) {
+  return String(value ?? '').trim()
+}
+
+function buildDefaultState(companyProfile, currentUser) {
+  const companyName = normalizeValue(companyProfile?.name) || 'X-Financial'
+  const companyCode = normalizeValue(companyProfile?.code) || 'XF-001'
+  const adminEmail =
+    normalizeValue(companyProfile?.adminEmail) ||
+    normalizeValue(currentUser?.email) ||
+    'admin@example.com'
+  const adminAccount = normalizeValue(currentUser?.username) || 'superadmin'
+
+  return {
+    companyForm: {
+      companyName,
+      displayName: companyName,
+      companyCode,
+      recordNumber: '',
+      environment: '生产环境',
+      copyright: `Copyright © 2024-${CURRENT_YEAR} ${companyName}. All Rights Reserved.`
+    },
+    adminForm: {
+      adminAccount,
+      adminEmail,
+      newPassword: '',
+      confirmPassword: '',
+      sessionTimeout: Number(import.meta.env.VITE_AUTH_IDLE_TIMEOUT_MINUTES || 30),
+      noticeEmail: adminEmail,
+      mfaEnabled: true,
+      strongPassword: true,
+      loginAlertEnabled: true
+    },
+    llmForm: {
+      provider: 'OpenAI Compatible',
+      model: 'gpt-4.1-mini',
+      endpoint: 'https://api.openai.com/v1',
+      embeddingModel: 'text-embedding-3-large',
+      apiKey: '',
+      reasoningMode: 'balanced',
+      maxTokens: 4096,
+      temperature: 0.2,
+      knowledgeEnabled: true,
+      citationEnabled: true
+    },
+    logForm: {
+      level: 'INFO',
+      retentionDays: 180,
+      archiveCycle: 'weekly',
+      logPath: 'server/logs/app.log',
+      alertEmail: adminEmail,
+      operationAudit: true,
+      loginAudit: true,
+      maskSensitive: true
+    },
+    mailForm: {
+      smtpHost: 'smtp.exmail.qq.com',
+      port: 465,
+      encryption: 'SSL/TLS',
+      senderName: companyName,
+      senderAddress: adminEmail,
+      username: adminEmail,
+      password: '',
+      alertEnabled: true,
+      digestEnabled: false,
+      digestTime: '09:00',
+      defaultReceiver: adminEmail
+    }
+  }
+}
+
+function readStoredSettings() {
+  if (typeof window === 'undefined') {
+    return null
+  }
+
+  const raw = window.sessionStorage.getItem(SETTINGS_STORAGE_KEY)
+  if (!raw) {
+    return null
+  }
+
+  try {
+    return JSON.parse(raw)
+  } catch {
+    return null
+  }
+}
+
+function mergeStoredState(defaults, stored) {
+  return {
+    companyForm: { ...defaults.companyForm, ...(stored?.companyForm || {}) },
+    adminForm: { ...defaults.adminForm, ...(stored?.adminForm || {}) },
+    llmForm: { ...defaults.llmForm, ...(stored?.llmForm || {}) },
+    logForm: { ...defaults.logForm, ...(stored?.logForm || {}) },
+    mailForm: { ...defaults.mailForm, ...(stored?.mailForm || {}) }
+  }
+}
+
+function sanitizeForStorage(state) {
+  return {
+    companyForm: { ...state.companyForm },
+    adminForm: {
+      ...state.adminForm,
+      newPassword: '',
+      confirmPassword: ''
+    },
+    llmForm: {
+      ...state.llmForm,
+      apiKey: ''
+    },
+    logForm: { ...state.logForm },
+    mailForm: {
+      ...state.mailForm,
+      password: ''
+    }
+  }
+}
+
+function persistSettings(state) {
+  if (typeof window === 'undefined') {
+    return
+  }
+
+  window.sessionStorage.setItem(SETTINGS_STORAGE_KEY, JSON.stringify(sanitizeForStorage(state)))
+}
+
+function computeSectionStatus(state) {
+  return {
+    profile: Boolean(
+      normalizeValue(state.companyForm.companyName) &&
+        normalizeValue(state.companyForm.displayName) &&
+        normalizeValue(state.companyForm.copyright)
+    ),
+    admin: Boolean(
+      normalizeValue(state.adminForm.adminAccount) &&
+        normalizeValue(state.adminForm.adminEmail) &&
+        Number(state.adminForm.sessionTimeout) >= 5
+    ),
+    llm: Boolean(
+      normalizeValue(state.llmForm.provider) &&
+        normalizeValue(state.llmForm.model) &&
+        normalizeValue(state.llmForm.endpoint)
+    ),
+    logs: Boolean(
+      normalizeValue(state.logForm.level) &&
+        Number(state.logForm.retentionDays) > 0 &&
+        normalizeValue(state.logForm.logPath)
+    ),
+    mail: Boolean(
+      normalizeValue(state.mailForm.smtpHost) &&
+        Number(state.mailForm.port) > 0 &&
+        normalizeValue(state.mailForm.senderAddress) &&
+        normalizeValue(state.mailForm.username)
+    )
+  }
+}
+
+export default {
+  name: 'SettingsView',
+  setup() {
+    const { toast } = useToast()
+    const { companyProfile, currentUser, updateCompanyProfilePreview } = useSystemState()
+
+    const defaults = buildDefaultState(companyProfile.value, currentUser.value)
+    const pageState = ref(mergeStoredState(defaults, readStoredSettings()))
+    const activeSection = ref('profile')
+
+    const sections = SECTION_DEFINITIONS
+    const logLevels = LOG_LEVELS
+
+    const sectionStatus = computed(() => computeSectionStatus(pageState.value))
+    const completedSectionCount = computed(() => Object.values(sectionStatus.value).filter(Boolean).length)
+    const activeSectionConfig = computed(
+      () => sections.find((section) => section.id === activeSection.value) || sections[0]
+    )
+
+    function activateSection(sectionId) {
+      activeSection.value = sectionId
+    }
+
+    function toggleBoolean(formKey, field) {
+      pageState.value[formKey][field] = !pageState.value[formKey][field]
+    }
+
+    function saveProfileSection() {
+      const companyForm = pageState.value.companyForm
+
+      if (!normalizeValue(companyForm.companyName)) {
+        toast('请输入企业名称。')
+        return
+      }
+
+      if (!normalizeValue(companyForm.displayName)) {
+        toast('请输入系统显示名称。')
+        return
+      }
+
+      if (!normalizeValue(companyForm.copyright)) {
+        toast('请输入版权信息。')
+        return
+      }
+
+      updateCompanyProfilePreview({
+        name: normalizeValue(companyForm.displayName),
+        code: normalizeValue(companyForm.companyCode)
+      })
+
+      pageState.value.mailForm.senderName = normalizeValue(companyForm.displayName)
+      persistSettings(pageState.value)
+      toast('企业信息已保存并应用到当前界面预览。')
+    }
+
+    function saveAdminSection() {
+      const adminForm = pageState.value.adminForm
+
+      if (!normalizeValue(adminForm.adminAccount)) {
+        toast('请输入管理员账号。')
+        return
+      }
+
+      if (!normalizeValue(adminForm.adminEmail)) {
+        toast('请输入管理员邮箱。')
+        return
+      }
+
+      if (Number(adminForm.sessionTimeout) < 5) {
+        toast('会话超时时间不能少于 5 分钟。')
+        return
+      }
+
+      if (adminForm.newPassword) {
+        if (adminForm.newPassword.length < 5) {
+          toast('管理员密码至少需要 5 位。')
+          return
+        }
+
+        if (adminForm.newPassword !== adminForm.confirmPassword) {
+          toast('两次输入的管理员密码不一致。')
+          return
+        }
+      }
+
+      updateCompanyProfilePreview({
+        adminEmail: normalizeValue(adminForm.adminEmail)
+      })
+
+      persistSettings(pageState.value)
+      adminForm.newPassword = ''
+      adminForm.confirmPassword = ''
+      toast('管理员安全设置已保存。')
+    }
+
+    function saveLlmSection() {
+      const llmForm = pageState.value.llmForm
+
+      if (
+        !normalizeValue(llmForm.provider) ||
+        !normalizeValue(llmForm.model) ||
+        !normalizeValue(llmForm.endpoint)
+      ) {
+        toast('请完整填写模型供应商、模型名称和接口地址。')
+        return
+      }
+
+      persistSettings(pageState.value)
+      llmForm.apiKey = ''
+      toast('模型配置已保存。')
+    }
+
+    function saveLogsSection() {
+      const logForm = pageState.value.logForm
+
+      if (!normalizeValue(logForm.level) || Number(logForm.retentionDays) <= 0) {
+        toast('请填写有效的日志级别和留存天数。')
+        return
+      }
+
+      if (!normalizeValue(logForm.logPath)) {
+        toast('请输入日志路径。')
+        return
+      }
+
+      persistSettings(pageState.value)
+      toast('日志策略已保存。')
+    }
+
+    function saveMailSection() {
+      const mailForm = pageState.value.mailForm
+
+      if (!normalizeValue(mailForm.smtpHost) || Number(mailForm.port) <= 0) {
+        toast('请填写有效的 SMTP Host 和端口。')
+        return
+      }
+
+      if (!normalizeValue(mailForm.senderAddress) || !normalizeValue(mailForm.username)) {
+        toast('请填写发件人邮箱和 SMTP 登录账号。')
+        return
+      }
+
+      persistSettings(pageState.value)
+      mailForm.password = ''
+      toast('邮箱配置已保存。')
+    }
+
+    function saveActiveSection() {
+      if (activeSection.value === 'profile') {
+        saveProfileSection()
+        return
+      }
+
+      if (activeSection.value === 'admin') {
+        saveAdminSection()
+        return
+      }
+
+      if (activeSection.value === 'llm') {
+        saveLlmSection()
+        return
+      }
+
+      if (activeSection.value === 'logs') {
+        saveLogsSection()
+        return
+      }
+
+      saveMailSection()
+    }
+
+    return {
+      activeSection,
+      activeSectionConfig,
+      activateSection,
+      completedSectionCount,
+      logLevels,
+      pageState,
+      saveActiveSection,
+      sectionStatus,
+      sections,
+      toggleBoolean
+    }
+  }
+}