opt.: simplify settings page (#488)

2025-12-17 07:14:28 +01:00 · 2024-07-24 00:30:17 +08:00
parent e4dbc3ba12
commit 287869ed45
18 changed files with 181 additions and 111 deletions
--- a/lib/app.dart
+++ b/lib/app.dart
@@ -3,6 +3,7 @@ import 'package:fl_lib/fl_lib.dart';
 import 'package:fl_lib/l10n/gen_l10n/lib_l10n.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/l10n.dart';
+import 'package:locale_names/locale_names.dart';
 import 'package:server_box/core/extension/context/locale.dart';
 import 'package:server_box/data/res/build_data.dart';
 import 'package:server_box/data/res/rebuild.dart';
--- a/lib/intro.dart
+++ b/lib/intro.dart
@@ -18,13 +18,15 @@ final class _IntroPage extends StatelessWidget {
        final padTop = cons.maxHeight * .16;
        final pages_ = pages.map((e) => e(context, padTop)).toList();
        return IntroPage(
-          pages: pages_,
-          onDone: (ctx) {
-            Stores.setting.introVer.put(BuildData.build);
-            Navigator.of(ctx).pushReplacement(
-              MaterialPageRoute(builder: (_) => const HomePage()),
-            );
-          },
+          args: IntroPageArgs(
+            pages: pages_,
+            onDone: (ctx) {
+              Stores.setting.introVer.put(BuildData.build);
+              Navigator.of(ctx).pushReplacement(
+                MaterialPageRoute(builder: (_) => const HomePage()),
+              );
+            },
+          ),
        );
      },
    );
@@ -38,7 +40,7 @@ final class _IntroPage extends StatelessWidget {
        IntroPage.title(icon: BoxIcons.bxs_terminal, big: true),
        SizedBox(height: padTop),
        ListTile(
-          leading: const Icon(Bootstrap.input_cursor),
+          leading: const Icon(Bootstrap.alphabet),
          title: Text(l10n.letterCache),
          subtitle: Text(l10n.letterCacheTip, style: UIs.textGrey),
          trailing: StoreSwitch(prop: _setting.letterCache),
@@ -61,8 +63,8 @@ final class _IntroPage extends StatelessWidget {
          trailing: StoreSwitch(prop: _setting.sftpRmrDir),
        ).cardx,
        ListTile(
-          leading: const Icon(IonIcons.stats_chart, size: _kIconSize),
-          title: Text(l10n.parseContainerStats),
+          leading: const Icon(MingCute.chart_line_line, size: _kIconSize),
+          title: Text(l10n.stat),
          subtitle: Text(l10n.parseContainerStatsTip, style: UIs.textGrey),
          trailing: StoreSwitch(prop: _setting.containerParseStat),
        ).cardx,
@@ -90,7 +92,7 @@ final class _IntroPage extends StatelessWidget {
            final selected = await ctx.showPickSingleDialog(
              title: l10n.language,
              items: AppLocalizations.supportedLocales,
-              name: (p0) => p0.code,
+              name: (p0) => '${p0.nativeDisplayLanguage} (${p0.code})',
              initial: _setting.locale.fetch().toLocale,
            );
            if (selected != null) {
--- a/lib/l10n/app_de.arb
+++ b/lib/l10n/app_de.arb
@@ -205,7 +205,6 @@
  "open": "Öffnen",
  "openLastPath": "Öffnen Sie den letzten Pfad",
  "openLastPathTip": "Verschiedene Server haben unterschiedliche Einträge, und der Eintrag ist der Pfad zum Ausgang",
-  "parseContainerStats": "Den Status der Container-Belegung analysieren",
  "parseContainerStatsTip": "Das Analysieren des Belegungsstatus durch Docker ist relativ langsam",
  "paste": "Einfügen",
  "path": "Pfad",
@@ -279,6 +278,7 @@
  "sshTip": "Diese Funktion befindet sich jetzt in der Experimentierphase.\n\nBitte melde Bugs auf {url} oder mach mit bei der Entwicklung.",
  "sshVirtualKeyAutoOff": "Automatische Umschaltung der virtuellen Tasten",
  "start": "Start",
+  "stat": "Statistik",
  "stats": "Statistik",
  "stop": "Stop",
  "stopped": "Ausgelaufen",
--- a/lib/l10n/app_en.arb
+++ b/lib/l10n/app_en.arb
@@ -205,7 +205,6 @@
  "open": "Open",
  "openLastPath": "Open the last path",
  "openLastPathTip": "Different servers will have different logs, and the log is the path to the exit",
-  "parseContainerStats": "Parse the container occupancy status",
  "parseContainerStatsTip": "Parsing the occupancy status of Docker is relatively slow.",
  "paste": "Paste",
  "path": "Path",
@@ -279,6 +278,7 @@
  "sshTip": "This function is now in the experimental stage.\n\nPlease report bugs on {url} or join our development.",
  "sshVirtualKeyAutoOff": "Auto switching of virtual keys",
  "start": "Start",
+  "stat": "Statistics",
  "stats": "Statistics",
  "stop": "Stop",
  "stopped": "Stopped",
--- a/lib/l10n/app_es.arb
+++ b/lib/l10n/app_es.arb
@@ -205,7 +205,6 @@
  "open": "Abrir",
  "openLastPath": "Abrir el último camino",
  "openLastPathTip": "Los diferentes servidores tendrán diferentes registros, y lo que se registra es la ruta de salida",
-  "parseContainerStats": "Analizar estado de uso del contenedor",
  "parseContainerStatsTip": "El análisis del estado de uso de Docker es bastante lento",
  "paste": "Pegar",
  "path": "Ruta",
@@ -279,6 +278,7 @@
  "sshTip": "Esta función está en fase de pruebas.\n\nPor favor, informa los problemas en {url}, o únete a nuestro desarrollo.",
  "sshVirtualKeyAutoOff": "Desactivación automática de teclas virtuales",
  "start": "Iniciar",
+  "stat": "Estadísticas",
  "stats": "Estadísticas",
  "stop": "Detener",
  "stopped": "Detenido",
--- a/lib/l10n/app_fr.arb
+++ b/lib/l10n/app_fr.arb
@@ -205,7 +205,6 @@
  "open": "Ouvrir",
  "openLastPath": "Ouvrir le dernier chemin",
  "openLastPathTip": "Les différents serveurs auront des journaux différents, et le journal est le chemin vers la sortie",
-  "parseContainerStats": "Analyser l'état d'occupation du conteneur",
  "parseContainerStatsTip": "L'analyse de l'occupation des conteneurs Docker est relativement lente.",
  "paste": "Coller",
  "path": "Chemin",
@@ -279,6 +278,7 @@
  "sshTip": "Cette fonctionnalité est actuellement à l'étape expérimentale.\n\nVeuillez signaler les bugs sur {url} ou rejoindre notre développement.",
  "sshVirtualKeyAutoOff": "Activation automatique des touches virtuelles",
  "start": "Démarrer",
+  "stat": "Statistiques",
  "stats": "Statistiques",
  "stop": "Arrêter",
  "stopped": "Arrêté",
--- a/lib/l10n/app_id.arb
+++ b/lib/l10n/app_id.arb
@@ -205,7 +205,6 @@
  "open": "Membuka",
  "openLastPath": "Buka jalur terakhir",
  "openLastPathTip": "Server yang berbeda akan memiliki catatan yang berbeda, dan catatan tersebut adalah jalur menuju pintu keluar",
-  "parseContainerStats": "Memecahkan status okupansi kontainer",
  "parseContainerStatsTip": "Parsing status okupansi oleh Docker agak lambat",
  "paste": "Tempel",
  "path": "Jalur",
@@ -279,6 +278,7 @@
  "sshTip": "Fungsi ini sekarang dalam tahap eksperimen.\n\nHarap laporkan bug di {url} atau bergabunglah dengan pengembangan kami.",
  "sshVirtualKeyAutoOff": "Switching Otomatis Kunci Virtual",
  "start": "Awal",
+  "stat": "Statistik",
  "stats": "Statistik",
  "stop": "Berhenti",
  "stopped": "dihentikan",
--- a/lib/l10n/app_ja.arb
+++ b/lib/l10n/app_ja.arb
@@ -205,7 +205,6 @@
  "open": "開く",
  "openLastPath": "最後のパスを開く",
  "openLastPathTip": "異なるサーバーには異なる記録があり、記録されているのは退出時のパスです",
-  "parseContainerStats": "コンテナ使用状況を解析",
  "parseContainerStatsTip": "Dockerの使用状況の解析は比較的遅いです",
  "paste": "貼り付け",
  "path": "パス",
@@ -279,6 +278,7 @@
  "sshTip": "この機能は現在テスト段階にあります。\n\n問題がある場合は、{url}でフィードバックしてください。",
  "sshVirtualKeyAutoOff": "仮想キーの自動オフ",
  "start": "開始",
+  "stat": "統計",
  "stats": "統計",
  "stop": "停止",
  "stopped": "停止しました",
--- a/lib/l10n/app_nl.arb
+++ b/lib/l10n/app_nl.arb
@@ -205,7 +205,6 @@
  "open": "Openen",
  "openLastPath": "Open het laatste pad",
  "openLastPathTip": "Verschillende servers hebben verschillende logs, en de log is het pad naar de uitgang",
-  "parseContainerStats": "Parseer de containerbezettingstatus",
  "parseContainerStatsTip": "Het parsen van de bezettingsstatus van Docker is relatief langzaam.",
  "paste": "Plakken",
  "path": "Pad",
@@ -279,6 +278,7 @@
  "sshTip": "Deze functie bevindt zich momenteel in de experimentele fase.\n\nMeld alstublieft bugs op {url} of sluit je aan bij onze ontwikkeling.",
  "sshVirtualKeyAutoOff": "Automatisch schakelen van virtuele toetsen",
  "start": "Starten",
+  "stat": "Statistieken",
  "stats": "Statistieken",
  "stop": "Stoppen",
  "stopped": "Gestopt",
--- a/lib/l10n/app_pt.arb
+++ b/lib/l10n/app_pt.arb
@@ -205,7 +205,6 @@
  "open": "Abrir",
  "openLastPath": "Abrir o último caminho",
  "openLastPathTip": "Registros diferentes para servidores diferentes, e registra o caminho ao sair",
-  "parseContainerStats": "Analisar status de uso do contêiner",
  "parseContainerStatsTip": "Análise de status do Docker pode ser lenta",
  "paste": "Colar",
  "path": "Caminho",
@@ -279,6 +278,7 @@
  "sshTip": "Esta funcionalidade está em fase de teste.\n\nPor favor, reporte problemas em {url} ou junte-se a nós no desenvolvimento.",
  "sshVirtualKeyAutoOff": "Desativação automática das teclas virtuais",
  "start": "Iniciar",
+  "stat": "Estatísticas",
  "stats": "Estatísticas",
  "stop": "Parar",
  "stopped": "Parado",
--- a/lib/l10n/app_ru.arb
+++ b/lib/l10n/app_ru.arb
@@ -205,7 +205,6 @@
  "open": "открыть",
  "openLastPath": "открыть последний путь",
  "openLastPathTip": "Для разных серверов будут сохранены разные записи, записывается путь при выходе",
-  "parseContainerStats": "анализ статуса использования контейнера",
  "parseContainerStatsTip": "Анализ статуса использования Docker может быть медленным",
  "paste": "вставить",
  "path": "путь",
@@ -279,6 +278,7 @@
  "sshTip": "Эта функция находится в стадии тестирования.\n\nПожалуйста, отправляйте отчеты о проблемах на {url} или присоединяйтесь к нашей разработке.",
  "sshVirtualKeyAutoOff": "автоматическое отключение виртуальных клавиш",
  "start": "старт",
+  "stat": "Статистика",
  "stats": "статистика",
  "stop": "остановить",
  "stopped": "остановлено",
--- a/lib/l10n/app_zh.arb
+++ b/lib/l10n/app_zh.arb
@@ -205,7 +205,6 @@
  "open": "打开",
  "openLastPath": "打开上次的路径",
  "openLastPathTip": "不同的服务器会有不同的记录，且记录的是退出时的路径",
-  "parseContainerStats": "解析容器占用状态",
  "parseContainerStatsTip": "Docker 解析占用状态较为缓慢",
  "paste": "粘贴",
  "path": "路径",
@@ -279,6 +278,7 @@
  "sshTip": "该功能目前处于测试阶段。\n\n请在 {url} 反馈问题，或者加入我们开发。",
  "sshVirtualKeyAutoOff": "虚拟按键自动切换",
  "start": "开始",
+  "stat": "统计",
  "stats": "统计",
  "stop": "停止",
  "stopped": "已停止",
--- a/lib/l10n/app_zh_tw.arb
+++ b/lib/l10n/app_zh_tw.arb
@@ -205,7 +205,6 @@
  "open": "打開",
  "openLastPath": "打開上次的路徑",
  "openLastPathTip": "不同的伺服器會有不同的記錄，且記錄的是退出時的路徑",
-  "parseContainerStats": "解析容器佔用狀態",
  "parseContainerStatsTip": "Docker 解析佔用狀態較為緩慢",
  "paste": "貼上",
  "path": "路徑",
@@ -279,6 +278,7 @@
  "sshTip": "該功能目前處於測試階段。\n\n請在 {url} 反饋問題，或者加入我們開發。",
  "sshVirtualKeyAutoOff": "虛擬按鍵自動切換",
  "start": "開始",
+  "stat": "統計",
  "stats": "統計",
  "stop": "停止",
  "stopped": "已停止",
--- a/lib/view/page/server/edit.dart
+++ b/lib/view/page/server/edit.dart
@@ -203,7 +203,7 @@ class _ServerEditPageState extends State<ServerEditPage> with AfterLayoutMixin {
      _buildMore(),
    ];
    return SingleChildScrollView(
-      padding: const EdgeInsets.fromLTRB(17, 17, 17, 47),
+      padding: const EdgeInsets.fromLTRB(17, 7, 17, 47),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
@@ -303,9 +303,8 @@ class _ServerEditPageState extends State<ServerEditPage> with AfterLayoutMixin {

  Widget _buildEnvs() {
    return _env.listenVal((val) {
-      final subtitle = val.isEmpty
-          ? null
-          : Text(val.keys.join(','), style: UIs.textGrey);
+      final subtitle =
+          val.isEmpty ? null : Text(val.keys.join(','), style: UIs.textGrey);
      return ListTile(
        leading: const Padding(
          padding: EdgeInsets.only(left: 10),
@@ -622,18 +621,26 @@ class _ServerEditPageState extends State<ServerEditPage> with AfterLayoutMixin {
  }

  Widget _buildWriteScriptTip() {
-    return ListTile(
-      leading: const Icon(Icons.tips_and_updates).paddingOnly(left: 13),
-      title: Text(l10n.attention),
-      onTap: () {
-        context.showRoundDialog(
-          title: l10n.attention,
-          child: SimpleMarkdown(data: l10n.writeScriptTip),
-          actions: Btns.oks(onTap: () => context.pop(true)),
-        );
-      },
-      trailing: const Icon(Icons.keyboard_arrow_right),
-    ).cardx;
+    return Center(
+      child: InkWell(
+        borderRadius: BorderRadius.circular(10),
+        onTap: () {
+          context.showRoundDialog(
+            title: l10n.attention,
+            child: SimpleMarkdown(data: l10n.writeScriptTip),
+            actions: Btns.oks(onTap: () => context.pop(true)),
+          );
+        },
+        child: Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            const Icon(Icons.tips_and_updates, size: 15, color: Colors.grey),
+            UIs.width13,
+            Text(l10n.attention, style: UIs.textGrey)
+          ],
+        ).paddingSymmetric(horizontal: 13, vertical: 3),
+      ),
+    ).paddingOnly(bottom: 13);
  }

  @override
--- a/lib/view/page/server/tab.dart
+++ b/lib/view/page/server/tab.dart
@@ -289,7 +289,8 @@ class _ServerPageState extends State<ServerPage>
          }
        },
        child: Padding(
-          padding: const EdgeInsets.symmetric(vertical: 13, horizontal: 7),
+          padding:
+              const EdgeInsets.only(left: 13, right: 3, top: 13, bottom: 13),
          child: _buildRealServerCard(srv),
        ),
      ),
@@ -458,13 +459,9 @@ class _ServerPageState extends State<ServerPage>
  }

  Widget _buildTopRightWidget(Server s) {
-    return switch (s.conn) {
-      ServerConn.connecting ||
-      ServerConn.loading ||
-      ServerConn.connected =>
-        Padding(
-          padding: const EdgeInsets.only(left: 11, right: 3),
-          child: SizedBox(
+    final (child, onTap) = switch (s.conn) {
+      ServerConn.connecting || ServerConn.loading || ServerConn.connected => (
+          SizedBox(
            width: 19,
            height: 19,
            child: CircularProgressIndicator(
@@ -472,46 +469,52 @@ class _ServerPageState extends State<ServerPage>
              valueColor: AlwaysStoppedAnimation(UIs.primaryColor),
            ),
          ),
+          null,
        ),
-      ServerConn.failed => InkWell(
-          onTap: () {
+      ServerConn.failed => (
+          const Icon(
+            Icons.refresh,
+            size: 21,
+            color: Colors.grey,
+          ),
+          () {
            TryLimiter.reset(s.spi.id);
            Pros.server.refresh(spi: s.spi);
          },
-          child: const Padding(
-            padding: EdgeInsets.only(left: 11, right: 3),
-            child: Icon(
-              Icons.refresh,
-              size: 21,
-              color: Colors.grey,
-            ),
-          ),
        ),
-      ServerConn.disconnected => InkWell(
-          onTap: () => Pros.server.refresh(spi: s.spi),
-          child: const Padding(
-            padding: EdgeInsets.only(left: 11, right: 3),
-            child: Icon(
-              BoxIcons.bx_link,
-              size: 21,
-              color: Colors.grey,
-            ),
+      ServerConn.disconnected => (
+          const Icon(
+            BoxIcons.bx_link,
+            size: 21,
+            color: Colors.grey,
          ),
+          () => Pros.server.refresh(spi: s.spi)
        ),
-      ServerConn.finished => InkWell(
-          onTap: () => Pros.server.closeServer(id: s.spi.id),
-          child: const Padding(
-            padding: EdgeInsets.only(left: 11, right: 3),
-            child: Icon(
-              BoxIcons.bx_unlink,
-              size: 17,
-              color: Colors.grey,
-            ),
+      ServerConn.finished => (
+          const Icon(
+            BoxIcons.bx_unlink,
+            size: 17,
+            color: Colors.grey,
          ),
+          () => Pros.server.closeServer(id: s.spi.id),
+        ),
+      _ when Stores.setting.serverTabUseOldUI.fetch() => (
+          ServerFuncBtnsTopRight(spi: s.spi),
+          null,
        ),
-      _ when Stores.setting.serverTabUseOldUI.fetch() =>
-        ServerFuncBtnsTopRight(spi: s.spi),
    };
+
+    final wrapped = SizedBox(
+      height: _kCardHeightMin,
+      width: 27,
+      child: child,
+    );
+    if (onTap == null) return wrapped;
+    return InkWell(
+      borderRadius: BorderRadius.circular(7),
+      onTap: onTap,
+      child: wrapped,
+    ).paddingOnly(left: 10);
  }

  Widget _buildTopRightText(Server s) {
@@ -646,20 +649,25 @@ ${ss.err?.message ?? l10n.unknownError}
          _tag == null || (pro.pick(id: e)?.spi.tags?.contains(_tag) ?? false))
      .toList();

+  static const _kCardHeightMin = 23.0;
+  static const _kCardHeightFlip = 97.0;
+  static const _kCardHeightNormal = 106.0;
+  static const _kCardHeightMoveOutFuncs = 132.0;
+
  double? _calcCardHeight(ServerConn cs, bool flip) {
    if (_textFactorDouble != 1.0) return null;
    if (cs != ServerConn.finished) {
-      return 23.0;
+      return _kCardHeightMin;
    }
    if (flip) {
-      return 97.0;
+      return _kCardHeightFlip;
    }
    if (Stores.setting.moveOutServerTabFuncBtns.fetch() &&
        // Discussion #146
        !Stores.setting.serverTabUseOldUI.fetch()) {
-      return 132;
+      return _kCardHeightMoveOutFuncs;
    }
-    return 106;
+    return _kCardHeightNormal;
  }

  void _askFor({
--- a/lib/view/page/setting/entry.dart
+++ b/lib/view/page/setting/entry.dart
@@ -5,6 +5,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_highlight/theme_map.dart';
 import 'package:flutter_gen/gen_l10n/l10n.dart';
 import 'package:icons_plus/icons_plus.dart';
+import 'package:locale_names/locale_names.dart';
 import 'package:server_box/core/extension/context/locale.dart';
 import 'package:server_box/data/res/rebuild.dart';
 import 'package:server_box/data/res/store.dart';
@@ -473,8 +474,12 @@ class _SettingPageState extends State<SettingPage> {
  Widget _buildTermFontSize() {
    return ListTile(
      leading: const Icon(MingCute.font_size_line),
-      title: Text(l10n.fontSize),
-      subtitle: Text(l10n.termFontSizeTip, style: UIs.textGrey),
+      // title: Text(l10n.fontSize),
+      // subtitle: Text(l10n.termFontSizeTip, style: UIs.textGrey),
+      title: TipText(
+        tip: l10n.termFontSizeTip,
+        text: l10n.fontSize,
+      ),
      trailing: ValBuilder(
        listenable: _setting.termFontSize.listenable(),
        builder: (val) => Text(
@@ -531,7 +536,7 @@ class _SettingPageState extends State<SettingPage> {
        final selected = await context.showPickSingleDialog(
          title: l10n.language,
          items: AppLocalizations.supportedLocales,
-          name: (p0) => p0.code,
+          name: (p0) => '${p0.nativeDisplayLanguage} (${p0.code})',
          initial: _setting.locale.fetch().toLocale,
        );
        if (selected != null) {
@@ -606,8 +611,12 @@ class _SettingPageState extends State<SettingPage> {
  Widget _buildFullScreenSwitch() {
    return ListTile(
      leading: const Icon(Bootstrap.phone_landscape_fill),
-      title: Text(l10n.fullScreen),
-      subtitle: Text(l10n.fullScreenTip, style: UIs.textGrey),
+      // title: Text(l10n.fullScreen),
+      // subtitle: Text(l10n.fullScreenTip, style: UIs.textGrey),
+      title: TipText(
+        tip: l10n.fullScreenTip,
+        text: l10n.fullScreen,
+      ),
      trailing: StoreSwitch(
        prop: _setting.fullScreen,
        callback: (_) => RNodes.app.notify(),
@@ -692,8 +701,12 @@ class _SettingPageState extends State<SettingPage> {
  Widget _buildSftpOpenLastPath() {
    return ListTile(
      leading: const Icon(MingCute.history_line),
-      title: Text(l10n.openLastPath),
-      subtitle: Text(l10n.openLastPathTip, style: UIs.textGrey),
+      // title: Text(l10n.openLastPath),
+      // subtitle: Text(l10n.openLastPathTip, style: UIs.textGrey),
+      title: TipText(
+        tip: l10n.openLastPathTip,
+        text: l10n.openLastPath,
+      ),
      trailing: StoreSwitch(prop: _setting.sftpOpenLastPath),
    );
  }
@@ -767,8 +780,12 @@ class _SettingPageState extends State<SettingPage> {
  Widget _buildTextScaler() {
    final ctrl = TextEditingController(text: _setting.textFactor.toString());
    return ListTile(
-      title: Text(l10n.textScaler),
-      subtitle: Text(l10n.textScalerTip, style: UIs.textGrey),
+      // title: Text(l10n.textScaler),
+      // subtitle: Text(l10n.textScalerTip, style: UIs.textGrey),
+      title: TipText(
+        tip: l10n.textScalerTip,
+        text: l10n.textScaler,
+      ),
      trailing: ValBuilder(
        listenable: _setting.textFactor.listenable(),
        builder: (val) => Text(
@@ -821,8 +838,12 @@ class _SettingPageState extends State<SettingPage> {

  Widget _buildServerFuncBtnsSwitch() {
    return ListTile(
-      title: Text(l10n.location),
-      subtitle: Text(l10n.moveOutServerFuncBtnsHelp, style: UIs.text13Grey),
+      // title: Text(l10n.location),
+      // subtitle: Text(l10n.moveOutServerFuncBtnsHelp, style: UIs.text13Grey),
+      title: TipText(
+        tip: l10n.moveOutServerFuncBtnsHelp,
+        text: l10n.location,
+      ),
      trailing: StoreSwitch(prop: _setting.moveOutServerTabFuncBtns),
    );
  }
@@ -913,8 +934,12 @@ class _SettingPageState extends State<SettingPage> {

  Widget _buildDoubleColumnServersPage() {
    return ListTile(
-      title: Text(l10n.doubleColumnMode),
-      subtitle: Text(l10n.doubleColumnTip, style: UIs.textGrey),
+      // title: Text(l10n.doubleColumnMode),
+      // subtitle: Text(l10n.doubleColumnTip, style: UIs.textGrey),
+      title: TipText(
+        tip: l10n.doubleColumnTip,
+        text: l10n.doubleColumnMode,
+      ),
      trailing: StoreSwitch(prop: _setting.doubleColumnServersPage),
    );
  }
@@ -937,8 +962,12 @@ class _SettingPageState extends State<SettingPage> {
  Widget _buildEditorHighlight() {
    return ListTile(
      leading: const Icon(MingCute.code_line, size: _kIconSize),
-      title: Text(l10n.highlight),
-      subtitle: Text(l10n.editorHighlightTip, style: UIs.textGrey),
+      // title: Text(l10n.highlight),
+      // subtitle: Text(l10n.editorHighlightTip, style: UIs.textGrey),
+      title: TipText(
+        tip: l10n.editorHighlightTip,
+        text: l10n.highlight,
+      ),
      trailing: StoreSwitch(prop: _setting.editorHighlight),
    );
  }
@@ -961,9 +990,11 @@ class _SettingPageState extends State<SettingPage> {

  Widget _buildContainerTrySudo() {
    return ListTile(
-      leading: const Icon(Clarity.administrator_solid),
-      title: Text(l10n.trySudo),
-      subtitle: Text(l10n.containerTrySudoTip, style: UIs.textGrey),
+      leading: const Icon(EvaIcons.person_done),
+      title: TipText(
+        tip: l10n.containerTrySudoTip,
+        text: l10n.trySudo,
+      ),
      trailing: StoreSwitch(prop: _setting.containerTrySudo),
    );
  }
@@ -978,9 +1009,13 @@ class _SettingPageState extends State<SettingPage> {

  Widget _buildContainerParseStat() {
    return ListTile(
-      leading: const Icon(IonIcons.stats_chart, size: _kIconSize),
-      title: Text(l10n.parseContainerStats),
-      subtitle: Text(l10n.parseContainerStatsTip, style: UIs.textGrey),
+      leading: const Icon(MingCute.chart_line_line, size: _kIconSize),
+      // title: Text(l10n.parseContainerStats),
+      // subtitle: Text(l10n.parseContainerStatsTip, style: UIs.textGrey),
+      title: TipText(
+        tip: l10n.parseContainerStatsTip,
+        text: l10n.stat,
+      ),
      trailing: StoreSwitch(prop: _setting.containerParseStat),
    );
  }
@@ -1002,8 +1037,12 @@ class _SettingPageState extends State<SettingPage> {

  Widget _buildRememberPwdInMem() {
    return ListTile(
-      title: Text(l10n.rememberPwdInMem),
-      subtitle: Text(l10n.rememberPwdInMemTip, style: UIs.textGrey),
+      // title: Text(l10n.rememberPwdInMem),
+      // subtitle: Text(l10n.rememberPwdInMemTip, style: UIs.textGrey),
+      title: TipText(
+        tip: l10n.rememberPwdInMemTip,
+        text: l10n.rememberPwdInMem,
+      ),
      trailing: StoreSwitch(prop: _setting.rememberPwdInMem),
    );
  }
@@ -1185,11 +1224,15 @@ class _SettingPageState extends State<SettingPage> {

  Widget _buildLetterCache() {
    return ListTile(
-      leading: const Icon(Bootstrap.input_cursor),
-      title: Text(l10n.letterCache),
-      subtitle: Text(
-        '${l10n.letterCacheTip}\n${l10n.needRestart}',
-        style: UIs.textGrey,
+      leading: const Icon(Bootstrap.alphabet),
+      // title: Text(l10n.letterCache),
+      // subtitle: Text(
+      //   '${l10n.letterCacheTip}\n${l10n.needRestart}',
+      //   style: UIs.textGrey,
+      // ),
+      title: TipText(
+        tip: '${l10n.letterCacheTip}\n${l10n.needRestart}',
+        text: l10n.letterCache,
      ),
      trailing: StoreSwitch(prop: _setting.letterCache),
    );
--- a/pubspec.lock
+++ b/pubspec.lock
@@ -385,8 +385,8 @@ packages:
    dependency: "direct main"
    description:
      path: "."
-      ref: "v1.0.84"
-      resolved-ref: "4069be5204fb1866ca72b702df47fa334b189d1a"
+      ref: "v1.0.87"
+      resolved-ref: a5cfc603d2f5ea9bb2caa91ab1ab9dadded46622
      url: "https://github.com/lppcg/fl_lib"
    source: git
    version: "0.0.1"
@@ -754,6 +754,14 @@ packages:
      url: "https://pub.dev"
    source: hosted
    version: "1.0.10"
+  locale_names:
+    dependency: "direct main"
+    description:
+      name: locale_names
+      sha256: "7a89ca54072f4f13d0f5df5a9ba69337554bf2fd057d1dd2a238898f3f159374"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.1"
  logging:
    dependency: transitive
    description:
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -30,6 +30,7 @@ dependencies:
  flutter_adaptive_scaffold: ^0.1.10+2
  device_info_plus: ^10.1.0
  extended_image: ^8.2.1
+  locale_names: ^1.1.1
  dartssh2:
    git:
      url: https://github.com/lollipopkit/dartssh2
@@ -61,7 +62,7 @@ dependencies:
  fl_lib:
    git:
      url: https://github.com/lppcg/fl_lib
-      ref: v1.0.84
+      ref: v1.0.87

 dependency_overrides:
  # dartssh2: