SettingsPage

概述

SettingsPage 是一个预构建的设置页面组件，包含：

常规设置（语言、主题）
关于页面（版本信息、更新检查）

导入

import { SettingsPage } from '@linch-tech/desktop-core';

Props

interface SettingsPageProps {
  /**
   * 自定义页脚内容
   */
  footer?: ReactNode;
}

基本用法

import { SettingsPage } from '@linch-tech/desktop-core';

export function Settings() {
  return <SettingsPage />;
}

在路由中使用：

<Route path="/settings" element={<Settings />} />

页面结构

┌─────────────────────────────────────────────────┐
│  设置                                           │
│  管理应用设置                                    │
├────────────┬────────────────────────────────────┤
│            │                                    │
│  常规      │     [语言切换器]                   │
│  关于      │     [主题切换器]                   │
│            │                                    │
└────────────┴────────────────────────────────────┘

常规标签页

包含以下设置项：

语言选择

使用 LanguageSwitcher 组件，显示所有支持的语言选项。

主题选择

使用 ThemeSwitcher 组件，显示明/暗/系统三个选项。

关于标签页

包含以下内容：

应用 Logo
应用名称
当前版本号
更新检查按钮

更新状态

更新按钮根据状态显示不同内容：

状态	显示
`idle`	"检查更新" 按钮
`checking`	检查中... (加载动画)
`available`	显示新版本号 + "下载更新" 按钮
`downloading`	下载进度条
`ready`	"立即重启" 按钮
`up-to-date`	"已是最新版本" + "检查更新" 按钮
`error`	错误信息 + "重试" 按钮

自定义页脚

<SettingsPage
  footer={
    <div className="text-center text-sm text-muted-foreground">
      <p>Copyright © 2024 My Company</p>
      <p>All rights reserved.</p>
    </div>
  }
/>

禁用更新功能

如果 features.updater 设为 false，更新按钮将显示为禁用状态。

// src/config.ts
features: {
  updater: false,  // 禁用更新功能
},

翻译 Key

SettingsPage 使用以下内置翻译 key：

settings.title
settings.description
settings.tabs.general
settings.tabs.about
settings.appearance
settings.language_select
settings.theme_select
settings.about.current_version
settings.about.check_updates
settings.about.checking
settings.about.new_version
settings.about.download_update
settings.about.ready_to_install
settings.about.restart_now
settings.about.up_to_date
settings.about.check_error
settings.about.retry
settings.about.footer_line1
settings.about.footer_line2

完整示例

// src/pages/Settings.tsx
import { SettingsPage } from '@linch-tech/desktop-core';

export function Settings() {
  return (
    <SettingsPage
      footer={
        <div className="text-center text-sm text-muted-foreground pt-8 max-w-sm">
          <p>Built with Linch Desktop Core</p>
          <p>© 2024 My Company</p>
        </div>
      }
    />
  );
}

// src/App.tsx
import { Routes, Route } from 'react-router-dom';
import { Shell } from '@linch-tech/desktop-core';
import { Settings } from './pages/Settings';

function App() {
  return (
    <Routes>
      <Route element={<Shell />}>
        <Route path="/settings" element={<Settings />} />
      </Route>
    </Routes>
  );
}

注意事项

SettingsPage 是一个完整的页面组件，已包含页头。直接作为路由组件使用即可，无需额外包装。

更新功能需要在 tauri.conf.json 中正确配置 updater 端点才能工作。

SettingsPage

目录