From cb0e612b9819e693c64d074962157a76b0a3e417 Mon Sep 17 00:00:00 2001
From: vocoder712 <100213316+vocoder712@users.noreply.github.com>
Date: Mon, 27 Jul 2026 20:18:44 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BE=9D=E8=B5=96?=
 =?UTF-8?q?=E9=A1=B9=E7=AE=A1=E7=90=86=E7=95=8C=E9=9D=A2UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .agent/DECISIONS.md                           |  12 ++
 OpenUtauMobile/App.axaml.cs                   |   3 +-
 .../OpenUtauMobile/OpenUtauMobileTheme.axaml  |   5 +-
 .../Runtime/ThemeStaticTokens.cs              |  38 +++-
 .../OpenUtauMobile/Styles/TabItem.axaml       |  76 ++++++++
 .../OpenUtauMobile/Styles/TextBox.axaml       | 143 ++++++++++++++
 .../OpenUtauMobile/Styles/TextInput.axaml     |  35 ----
 .../Styles/Views/DependencyManagerView.axaml  |  61 +++++-
 .../Views/DependencyManagerView.axaml         | 174 +++++++-----------
 9 files changed, 398 insertions(+), 149 deletions(-)
 create mode 100644 OpenUtauMobile/Themes/OpenUtauMobile/Styles/TabItem.axaml
 create mode 100644 OpenUtauMobile/Themes/OpenUtauMobile/Styles/TextBox.axaml
 delete mode 100644 OpenUtauMobile/Themes/OpenUtauMobile/Styles/TextInput.axaml

diff --git a/.agent/DECISIONS.md b/.agent/DECISIONS.md
index c7c1f51..14764ac 100644
--- a/.agent/DECISIONS.md
+++ b/.agent/DECISIONS.md
@@ -84,3 +84,15 @@ Record meaningful technical decisions here. Use one entry per decision.
 - Alternatives considered: Launch the system Storage Access Framework picker; request permissions through an application context.
 - Impacted areas: Android 10 and earlier storage permission checks, runtime permission requests, and raw external-storage access.
 
+- Date: 2026-07-25
+- Decision: Give the dependency manager a page-scoped MD3 component token set and render its tabs with a compact custom state-layer template.
+- Rationale: The default desktop tab indicator, unconstrained count badges, and filled hover treatment produced inconsistent geometry and excessive contrast. Page-scoped tokens keep responsive spacing, badge shape, state opacity, and the short pill indicator consistent across generated color themes.
+- Alternatives considered: Modify the global Avalonia TabItem theme; continue using per-control literal values.
+- Impacted areas: Dependency manager layout and styles; shared static theme tokens.
+
+- Date: 2026-07-27
+- Decision: Supersede the dependency-manager-specific tab header template with a global MD3 secondary TabItem style.
+- Rationale: Secondary tabs are a shared component pattern. A global style gives every TabItem the same 48dp container, Title Small label, state layer, semantic colors, and full-width 2dp active indicator while allowing each view to supply arbitrary header content.
+- Alternatives considered: Keep the dependency manager's page-scoped short pill indicator; duplicate the secondary-tab template in each view.
+- Impacted areas: Global OpenUtau Mobile TabItem headers; dependency manager tab header markup and tokens.
+
diff --git a/OpenUtauMobile/App.axaml.cs b/OpenUtauMobile/App.axaml.cs
index a51b27b..41fe07d 100644
--- a/OpenUtauMobile/App.axaml.cs
+++ b/OpenUtauMobile/App.axaml.cs
@@ -1,6 +1,7 @@
 using Avalonia;
 using Avalonia.Controls.ApplicationLifetimes;
 using Avalonia.Markup.Xaml;
+using Avalonia.Media;
 using Avalonia.Styling;
 using OpenUtau.Core.Util;
 using OpenUtauMobile.Helpers;
@@ -31,7 +32,7 @@ public override void OnFrameworkInitializationCompleted()
 
         // Initialize runtime theme resources before creating UI.
         ThemeManagerV2.Initialize();
-        var seed = ThemeSeedResolver.ResolveSeed(
+        Color seed = ThemeSeedResolver.ResolveSeed(
             ServiceHub.SystemAccentColorProvider,
             out _,
             out _);
diff --git a/OpenUtauMobile/Themes/OpenUtauMobile/OpenUtauMobileTheme.axaml b/OpenUtauMobile/Themes/OpenUtauMobile/OpenUtauMobileTheme.axaml
index d4764b2..571a715 100644
--- a/OpenUtauMobile/Themes/OpenUtauMobile/OpenUtauMobileTheme.axaml
+++ b/OpenUtauMobile/Themes/OpenUtauMobile/OpenUtauMobileTheme.axaml
@@ -15,8 +15,9 @@
     <StyleInclude Source="/Themes/OpenUtauMobile/Styles/Button.axaml" />
     <StyleInclude Source="/Themes/OpenUtauMobile/Styles/ComponentAbstractions.axaml" />
     <StyleInclude Source="/Themes/OpenUtauMobile/Styles/Card.axaml" />
-    <StyleInclude Source="/Themes/OpenUtauMobile/Styles/TextInput.axaml" />
+    <StyleInclude Source="/Themes/OpenUtauMobile/Styles/TextBox.axaml" />
     <StyleInclude Source="/Themes/OpenUtauMobile/Styles/ComboBox.axaml" />
+    <StyleInclude Source="/Themes/OpenUtauMobile/Styles/TabItem.axaml" />
     <StyleInclude Source="/Themes/OpenUtauMobile/Styles/Slider.axaml" />
     <StyleInclude Source="/Themes/OpenUtauMobile/Styles/DawKnob.axaml" />
     <StyleInclude Source="/Themes/OpenUtauMobile/Styles/Icon.axaml" />
@@ -41,4 +42,4 @@
     <StyleInclude Source="/Themes/OpenUtauMobile/Styles/Controls/ProjectInfoEditPopup.axaml" />
     <StyleInclude Source="/Themes/OpenUtauMobile/Styles/Controls/SingerList.axaml" />
     <StyleInclude Source="/Themes/OpenUtauMobile/Styles/Controls/TrackHeader.axaml" />
-</Styles>
\ No newline at end of file
+</Styles>
diff --git a/OpenUtauMobile/Themes/OpenUtauMobile/Runtime/ThemeStaticTokens.cs b/OpenUtauMobile/Themes/OpenUtauMobile/Runtime/ThemeStaticTokens.cs
index 597283d..262b1db 100644
--- a/OpenUtauMobile/Themes/OpenUtauMobile/Runtime/ThemeStaticTokens.cs
+++ b/OpenUtauMobile/Themes/OpenUtauMobile/Runtime/ThemeStaticTokens.cs
@@ -1,5 +1,6 @@
 using System;
 using Avalonia;
+using Avalonia.Media;
 
 namespace OpenUtauMobile.Themes.OpenUtauMobile.Runtime;
 
@@ -8,6 +9,7 @@ namespace OpenUtauMobile.Themes.OpenUtauMobile.Runtime;
 /// </summary>
 public static class ThemeBaseLayoutTokens
 {
+    public static double SpaceXXS => 2d;
     public static double SpaceXS => 4d;
     public static double SpaceS => 8d;
     public static double SpaceM => 16d;
@@ -203,6 +205,40 @@ public static class ThemeSemComponentTokens
     public static double SliderMinHeight => 48d;
 }
 
+public static class ThemeSemTabItemTokens
+{
+    public static double ContainerHeight => 48d;
+    public static double ActiveIndicatorHeight => 2d;
+    public static double LabelSize => ThemeBaseTypographyTokens.LabelLSize;
+
+    public static Thickness HeaderInset => new(24, 0);
+
+    public static CornerRadius ActiveIndicatorCorner => ThemeBaseShapeTokens.CornerNone;
+
+    public static FontWeight LabelWeight => FontWeight.Medium;
+}
+
+public static class ThemeSemDependencyManagerTokens
+{
+    public static double ContentMaxWidth => 1248d;
+    public static double BadgeMinWidth => 16d;
+    public static double BadgeHeight => 16d;
+    public static double SearchFieldHeight => 48d;
+    public static double IconButtonSize => 48d;
+
+    public static Thickness PageInset => new(24, 16, 24, 24);
+    public static Thickness BadgeInset => new(4, 0);
+    public static Thickness SearchFieldInset => new(40, 0, 16, 0);
+    public static Thickness SearchFieldEndSpacing => new(0, 0, 12, 0);
+    public static Thickness ToolbarBottomSpacing => new(0, 0, 0, 16);
+    public static Thickness CardInset => new(16);
+    public static Thickness CardBottomSpacing => new(0, 0, 0, 12);
+
+    public static CornerRadius SearchFieldCorner => ThemeBaseShapeTokens.CornerXXXXL;
+    public static CornerRadius IconButtonCorner => ThemeBaseShapeTokens.CornerXXXXL;
+    public static CornerRadius BadgeCorner => ThemeBaseShapeTokens.CornerM;
+}
+
 public static class ThemeSemOpacityTokens
 {
     // ── Semantic Opacity Levels ──
@@ -221,4 +257,4 @@ public static class ThemeSemOpacityTokens
     // ── Overlay Opacity ──
     public static double Scrim => ThemeBaseOpacityTokens.OverlayScrim;
     public static double LightScrim => ThemeBaseOpacityTokens.OverlayLightScrim;
-}
\ No newline at end of file
+}
diff --git a/OpenUtauMobile/Themes/OpenUtauMobile/Styles/TabItem.axaml b/OpenUtauMobile/Themes/OpenUtauMobile/Styles/TabItem.axaml
new file mode 100644
index 0000000..3e5b926
--- /dev/null
+++ b/OpenUtauMobile/Themes/OpenUtauMobile/Styles/TabItem.axaml
@@ -0,0 +1,76 @@
+<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:theme="clr-namespace:OpenUtauMobile.Themes.OpenUtauMobile.Runtime">
+    <Design.PreviewWith>
+        <Border Padding="24">
+            <StackPanel>
+                <TabItem Header="Available" IsSelected="True" />
+                <TabItem Header="Installed" />
+                <TabItem Header="Disabled" IsEnabled="False" />
+            </StackPanel>
+        </Border>
+    </Design.PreviewWith>
+
+    <Style Selector="TabItem">
+        <Setter Property="MinHeight" Value="{x:Static theme:ThemeSemTabItemTokens.ContainerHeight}" />
+        <Setter Property="Padding" Value="{x:Static theme:ThemeSemTabItemTokens.HeaderInset}" />
+        <Setter Property="Margin" Value="{x:Static theme:ThemeSemLayoutTokens.InsetNone}" />
+        <Setter Property="Background" Value="{DynamicResource Sem.Color.Surface}" />
+        <Setter Property="Foreground" Value="{DynamicResource Sem.Color.OnSurfaceVariant}" />
+        <Setter Property="BorderThickness" Value="{x:Static theme:ThemeSemLayoutTokens.BorderNone}" />
+        <Setter Property="FontSize" Value="{x:Static theme:ThemeSemTabItemTokens.LabelSize}" />
+        <Setter Property="FontWeight" Value="{x:Static theme:ThemeSemTabItemTokens.LabelWeight}" />
+        <Setter Property="HorizontalContentAlignment" Value="Center" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="Cursor" Value="Hand" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="TabItem">
+                <Grid MinHeight="{TemplateBinding MinHeight}"
+                      Background="{TemplateBinding Background}">
+                    <ContentPresenter x:Name="PART_ContentPresenter"
+                                      Margin="{TemplateBinding Padding}"
+                                      Content="{TemplateBinding Header}"
+                                      ContentTemplate="{TemplateBinding HeaderTemplate}"
+                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                                      RecognizesAccessKey="True" />
+                    <Border x:Name="PART_StateLayer"
+                            Background="{DynamicResource Sem.Color.OnSurface}"
+                            IsHitTestVisible="False"
+                            Opacity="0" />
+                    <Border x:Name="PART_SelectedIndicator"
+                            Height="{x:Static theme:ThemeSemTabItemTokens.ActiveIndicatorHeight}"
+                            Background="{DynamicResource Sem.Color.Primary}"
+                            CornerRadius="{x:Static theme:ThemeSemTabItemTokens.ActiveIndicatorCorner}"
+                            HorizontalAlignment="Stretch"
+                            VerticalAlignment="Bottom"
+                            IsVisible="False" />
+                </Grid>
+            </ControlTemplate>
+        </Setter>
+    </Style>
+
+    <Style Selector="TabItem:selected">
+        <Setter Property="Foreground" Value="{DynamicResource Sem.Color.OnSurface}" />
+    </Style>
+
+    <Style Selector="TabItem:pointerover /template/ Border#PART_StateLayer">
+        <Setter Property="Opacity" Value="{x:Static theme:ThemeSemOpacityTokens.Hover}" />
+    </Style>
+
+    <Style Selector="TabItem:focus /template/ Border#PART_StateLayer">
+        <Setter Property="Opacity" Value="{x:Static theme:ThemeSemOpacityTokens.Focus}" />
+    </Style>
+
+    <Style Selector="TabItem:pressed /template/ Border#PART_StateLayer">
+        <Setter Property="Opacity" Value="{x:Static theme:ThemeSemOpacityTokens.Pressed}" />
+    </Style>
+
+    <Style Selector="TabItem:selected /template/ Border#PART_SelectedIndicator">
+        <Setter Property="IsVisible" Value="True" />
+    </Style>
+
+    <Style Selector="TabItem:disabled">
+        <Setter Property="Opacity" Value="{x:Static theme:ThemeSemOpacityTokens.Disabled}" />
+    </Style>
+</Styles>
diff --git a/OpenUtauMobile/Themes/OpenUtauMobile/Styles/TextBox.axaml b/OpenUtauMobile/Themes/OpenUtauMobile/Styles/TextBox.axaml
new file mode 100644
index 0000000..0a13c0c
--- /dev/null
+++ b/OpenUtauMobile/Themes/OpenUtauMobile/Styles/TextBox.axaml
@@ -0,0 +1,143 @@
+<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:theme="clr-namespace:OpenUtauMobile.Themes.OpenUtauMobile.Runtime">
+    <Design.PreviewWith>
+        <Border Padding="128">
+            <StackPanel Orientation="Vertical"
+                        Spacing="8">
+                <TextBox Width="200"
+                         PlaceholderText="Placeholder" />
+                <TextBox Width="200"
+                         Text="Read-only"
+                         IsReadOnly="True" />
+                <TextBox Width="200"
+                         Text="Disabled"
+                         IsEnabled="False" />
+            </StackPanel>
+        </Border>
+    </Design.PreviewWith>
+    <Style Selector="TextBox">
+        <Setter Property="Background" Value="{DynamicResource Sem.Color.Surface}" />
+        <Setter Property="Foreground" Value="{DynamicResource Sem.Color.OnSurface}" />
+        <Setter Property="CaretBrush" Value="{DynamicResource Sem.Color.Primary}" />
+        <Setter Property="SelectionBrush" Value="{DynamicResource Sem.Color.PrimaryContainer}" />
+        <Setter Property="SelectionForegroundBrush" Value="{DynamicResource Sem.Color.OnPrimaryContainer}" />
+        <Setter Property="PlaceholderForeground" Value="{DynamicResource Sem.Color.Outline}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource Sem.Color.OutlineVariant}" />
+        <Setter Property="BorderThickness"
+                Value="{x:Static theme:ThemeSemComponentTokens.InputBorderThickness}" />
+        <Setter Property="CornerRadius"
+                Value="{x:Static theme:ThemeSemComponentTokens.InputCornerRadius}" />
+        <Setter Property="Padding"
+                Value="{x:Static theme:ThemeSemComponentTokens.InputPadding}" />
+    </Style>
+
+    <Style Selector="TextBox:pointerover">
+        <Setter Property="Foreground" Value="{DynamicResource Sem.Color.OnSurface}" />
+        <Setter Property="PlaceholderForeground" Value="{DynamicResource Sem.Color.OnSurfaceVariant}" />
+    </Style>
+
+    <Style Selector="TextBox:pointerover /template/ Border#PART_BorderElement">
+        <Setter Property="Background" Value="{DynamicResource Sem.Color.SurfaceContainerLow}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource Sem.Color.Outline}" />
+    </Style>
+
+    <Style Selector="TextBox:focus, TextBox:focus-within">
+        <Setter Property="Background" Value="{DynamicResource Sem.Color.Surface}" />
+        <Setter Property="Foreground" Value="{DynamicResource Sem.Color.OnSurface}" />
+        <Setter Property="CaretBrush" Value="{DynamicResource Sem.Color.Primary}" />
+        <Setter Property="PlaceholderForeground" Value="{DynamicResource Sem.Color.OnSurfaceVariant}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource Sem.Color.Primary}" />
+    </Style>
+
+    <Style Selector="TextBox:focus /template/ Border#PART_BorderElement,
+                     TextBox:focus-within /template/ Border#PART_BorderElement">
+        <Setter Property="Background" Value="{DynamicResource Sem.Color.Surface}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource Sem.Color.Primary}" />
+    </Style>
+
+    <Style Selector="TextBox[IsReadOnly=True]">
+        <Setter Property="Background" Value="{DynamicResource Sem.Color.SurfaceContainerLow}" />
+        <Setter Property="Foreground" Value="{DynamicResource Sem.Color.OnSurfaceVariant}" />
+        <Setter Property="CaretBrush" Value="{DynamicResource Sem.Color.OnSurfaceVariant}" />
+        <Setter Property="PlaceholderForeground" Value="{DynamicResource Sem.Color.Outline}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource Sem.Color.OutlineVariant}" />
+    </Style>
+
+    <Style Selector="TextBox[IsReadOnly=True] /template/ Border#PART_BorderElement">
+        <Setter Property="Background" Value="{DynamicResource Sem.Color.SurfaceContainerLow}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource Sem.Color.OutlineVariant}" />
+    </Style>
+
+    <Style Selector="TextBox[IsReadOnly=True]:focus,
+                     TextBox[IsReadOnly=True]:focus-within">
+        <Setter Property="BorderBrush" Value="{DynamicResource Sem.Color.Primary}" />
+    </Style>
+
+    <Style Selector="TextBox[IsReadOnly=True]:focus /template/ Border#PART_BorderElement,
+                     TextBox[IsReadOnly=True]:focus-within /template/ Border#PART_BorderElement">
+        <Setter Property="BorderBrush" Value="{DynamicResource Sem.Color.Primary}" />
+    </Style>
+
+    <Style Selector="TextBox:error">
+        <Setter Property="CaretBrush" Value="{DynamicResource Sem.Color.Error}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource Sem.Color.Error}" />
+    </Style>
+
+    <Style Selector="TextBox:error /template/ Border#PART_BorderElement">
+        <Setter Property="BorderBrush" Value="{DynamicResource Sem.Color.Error}" />
+    </Style>
+
+    <Style Selector="TextBox /template/ Button,
+                     TextBox /template/ ToggleButton">
+        <Setter Property="Background" Value="{DynamicResource Sem.Color.Surface}" />
+        <Setter Property="Foreground" Value="{DynamicResource Sem.Color.OnSurfaceVariant}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource Sem.Color.Surface}" />
+    </Style>
+
+    <Style Selector="TextBox /template/ Button:pointerover,
+                     TextBox /template/ ToggleButton:pointerover">
+        <Setter Property="Background" Value="{DynamicResource Sem.Color.SurfaceContainerHigh}" />
+        <Setter Property="Foreground" Value="{DynamicResource Sem.Color.OnSurface}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource Sem.Color.SurfaceContainerHigh}" />
+    </Style>
+
+    <Style Selector="TextBox /template/ Button:pointerover /template/ ContentPresenter#PART_ContentPresenter,
+                     TextBox /template/ ToggleButton:pointerover /template/ ContentPresenter#PART_ContentPresenter">
+        <Setter Property="Background" Value="{DynamicResource Sem.Color.SurfaceContainerHigh}" />
+        <Setter Property="Foreground" Value="{DynamicResource Sem.Color.OnSurface}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource Sem.Color.SurfaceContainerHigh}" />
+    </Style>
+
+    <Style Selector="TextBox /template/ Button:pressed,
+                     TextBox /template/ ToggleButton:pressed,
+                     TextBox /template/ ToggleButton:checked">
+        <Setter Property="Background" Value="{DynamicResource Sem.Color.PrimaryContainer}" />
+        <Setter Property="Foreground" Value="{DynamicResource Sem.Color.OnPrimaryContainer}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource Sem.Color.PrimaryContainer}" />
+    </Style>
+
+    <Style Selector="TextBox /template/ Button:pressed /template/ ContentPresenter#PART_ContentPresenter,
+                     TextBox /template/ ToggleButton:pressed /template/ ContentPresenter#PART_ContentPresenter,
+                     TextBox /template/ ToggleButton:checked /template/ ContentPresenter#PART_ContentPresenter">
+        <Setter Property="Background" Value="{DynamicResource Sem.Color.PrimaryContainer}" />
+        <Setter Property="Foreground" Value="{DynamicResource Sem.Color.OnPrimaryContainer}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource Sem.Color.PrimaryContainer}" />
+    </Style>
+
+    <Style Selector="TextBox:disabled">
+        <Setter Property="Background" Value="{DynamicResource Sem.Color.SurfaceContainerLow}" />
+        <Setter Property="Foreground" Value="{DynamicResource Sem.Color.Outline}" />
+        <Setter Property="CaretBrush" Value="{DynamicResource Sem.Color.Outline}" />
+        <Setter Property="SelectionBrush" Value="{DynamicResource Sem.Color.SurfaceContainerHighest}" />
+        <Setter Property="SelectionForegroundBrush" Value="{DynamicResource Sem.Color.Outline}" />
+        <Setter Property="PlaceholderForeground" Value="{DynamicResource Sem.Color.Outline}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource Sem.Color.OutlineVariant}" />
+        <Setter Property="Opacity" Value="{x:Static theme:ThemeSemOpacityTokens.Disabled}" />
+    </Style>
+
+    <Style Selector="TextBox:disabled /template/ Border#PART_BorderElement">
+        <Setter Property="Background" Value="{DynamicResource Sem.Color.SurfaceContainerLow}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource Sem.Color.OutlineVariant}" />
+    </Style>
+</Styles>
diff --git a/OpenUtauMobile/Themes/OpenUtauMobile/Styles/TextInput.axaml b/OpenUtauMobile/Themes/OpenUtauMobile/Styles/TextInput.axaml
deleted file mode 100644
index 98b716a..0000000
--- a/OpenUtauMobile/Themes/OpenUtauMobile/Styles/TextInput.axaml
+++ /dev/null
@@ -1,35 +0,0 @@
-<Styles xmlns="https://github.com/avaloniaui"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        xmlns:theme="clr-namespace:OpenUtauMobile.Themes.OpenUtauMobile.Runtime">
-    <Design.PreviewWith>
-        <Border Padding="128">
-            <StackPanel Orientation="Vertical"
-                        Spacing="8">
-                <TextBox Width="200" />
-            </StackPanel>
-        </Border>
-    </Design.PreviewWith>
-    <Styles.Resources>
-        <ResourceDictionary>
-            <ControlTheme x:Key="Theme.TextBox.Default"
-                          TargetType="TextBox"
-                          BasedOn="{StaticResource {x:Type TextBox}}">
-                <Setter Property="Background" Value="{DynamicResource Sem.Color.Surface}" />
-                <Setter Property="Foreground" Value="{DynamicResource Sem.Color.OnSurface}" />
-                <Setter Property="BorderBrush" Value="{DynamicResource Sem.Color.OutlineVariant}" />
-                <Setter Property="BorderThickness"
-                        Value="{x:Static theme:ThemeSemComponentTokens.InputBorderThickness}" />
-                <Setter Property="CornerRadius" Value="{x:Static theme:ThemeSemComponentTokens.InputCornerRadius}" />
-                <Setter Property="Padding" Value="{x:Static theme:ThemeSemComponentTokens.InputPadding}" />
-            </ControlTheme>
-        </ResourceDictionary>
-    </Styles.Resources>
-
-    <Style Selector="TextBox">
-        <Setter Property="Theme" Value="{StaticResource Theme.TextBox.Default}" />
-    </Style>
-
-    <Style Selector="TextBox:focus">
-        <Setter Property="BorderBrush" Value="{DynamicResource Sem.Color.Primary}" />
-    </Style>
-</Styles>
\ No newline at end of file
diff --git a/OpenUtauMobile/Themes/OpenUtauMobile/Styles/Views/DependencyManagerView.axaml b/OpenUtauMobile/Themes/OpenUtauMobile/Styles/Views/DependencyManagerView.axaml
index ddfbeb0..1514bed 100644
--- a/OpenUtauMobile/Themes/OpenUtauMobile/Styles/Views/DependencyManagerView.axaml
+++ b/OpenUtauMobile/Themes/OpenUtauMobile/Styles/Views/DependencyManagerView.axaml
@@ -3,15 +3,64 @@
         xmlns:theme="clr-namespace:OpenUtauMobile.Themes.OpenUtauMobile.Runtime">
     <Style Selector="Border.DependencyCard">
         <Setter Property="Background" Value="{DynamicResource Sem.Color.SurfaceContainerLow}" />
-        <Setter Property="BorderBrush" Value="{DynamicResource Sem.Color.SurfaceContainerHigh}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource Sem.Color.OutlineVariant}" />
         <Setter Property="BorderThickness" Value="{x:Static theme:ThemeSemLayoutTokens.BorderDefault}" />
         <Setter Property="CornerRadius" Value="{x:Static theme:ThemeBaseShapeTokens.CornerL}" />
-        <Setter Property="Padding" Value="{x:Static theme:ThemeSemLayoutTokens.InsetL}" />
-        <Setter Property="Margin" Value="{x:Static theme:ThemeSemLayoutTokens.InsetBottomLG}" />
+        <Setter Property="Padding" Value="{x:Static theme:ThemeSemDependencyManagerTokens.CardInset}" />
+        <Setter Property="Margin" Value="{x:Static theme:ThemeSemDependencyManagerTokens.CardBottomSpacing}" />
     </Style>
 
-    <Style Selector="Border.DependencyCard:pointerover">
-        <Setter Property="BorderBrush" Value="{DynamicResource Sem.Color.SurfaceContainerLow}" />
+    <Style Selector="StackPanel.DependencyPageContent">
+        <Setter Property="HorizontalAlignment" Value="Stretch" />
+        <Setter Property="Margin" Value="{x:Static theme:ThemeSemDependencyManagerTokens.PageInset}" />
+    </Style>
+
+    <Style Selector="TabControl.DependencyTabs">
+        <Setter Property="MaxWidth" Value="{x:Static theme:ThemeSemDependencyManagerTokens.ContentMaxWidth}" />
+        <Setter Property="HorizontalAlignment" Value="Stretch" />
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="BorderThickness" Value="{x:Static theme:ThemeSemLayoutTokens.BorderNone}" />
+        <Setter Property="Padding" Value="{x:Static theme:ThemeSemLayoutTokens.InsetNone}" />
+    </Style>
+
+    <!-- 徽章 -->
+    <Style Selector="Border.DependencyCountBadge">
+        <Setter Property="MinWidth" Value="{x:Static theme:ThemeSemDependencyManagerTokens.BadgeMinWidth}" />
+        <Setter Property="Height" Value="{x:Static theme:ThemeSemDependencyManagerTokens.BadgeHeight}" />
+        <Setter Property="Padding" Value="{x:Static theme:ThemeSemDependencyManagerTokens.BadgeInset}" />
+        <Setter Property="CornerRadius" Value="{x:Static theme:ThemeSemDependencyManagerTokens.BadgeCorner}" />
+        <Setter Property="Background" Value="{DynamicResource Sem.Color.OnPrimaryContainer}" />
+        <Setter Property="VerticalAlignment" Value="Center" />
+    </Style>
+
+    <!-- 徽章文字 -->
+    <Style Selector="Border.DependencyCountBadge TextBlock">
+        <Setter Property="FontSize" Value="{x:Static theme:ThemeSemTypographyTokens.LabelSSize}" />
+        <Setter Property="FontWeight" Value="SemiBold" />
+        <Setter Property="Foreground" Value="{DynamicResource Sem.Color.OnError}" />
+        <Setter Property="HorizontalAlignment" Value="Center" />
+        <Setter Property="VerticalAlignment" Value="Center" />
+    </Style>
+    
+    <!-- 例如排序按钮 -->
+    <Style Selector="Button.DependencyIconButton">
+        <Setter Property="Width" Value="{x:Static theme:ThemeSemDependencyManagerTokens.IconButtonSize}" />
+        <Setter Property="Height" Value="{x:Static theme:ThemeSemDependencyManagerTokens.IconButtonSize}" />
+        <Setter Property="Padding" Value="{x:Static theme:ThemeSemLayoutTokens.InsetNone}" />
+        <Setter Property="CornerRadius" Value="{x:Static theme:ThemeSemDependencyManagerTokens.IconButtonCorner}" />
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="Foreground" Value="{DynamicResource Sem.Color.OnSurfaceVariant}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource Sem.Color.Outline}" />
+        <Setter Property="BorderThickness" Value="{x:Static theme:ThemeSemLayoutTokens.BorderDefault}" />
+        <Setter Property="Cursor" Value="Hand" />
+    </Style>
+
+    <Style Selector="Button.DependencyIconButton:pointerover /template/ ContentPresenter">
+        <Setter Property="Background" Value="{DynamicResource Sem.Color.SurfaceContainerLow}" />
+    </Style>
+
+    <Style Selector="Button.DependencyIconButton:pressed /template/ ContentPresenter">
+        <Setter Property="Background" Value="{DynamicResource Sem.Color.SurfaceContainer}" />
     </Style>
 
     <Style Selector="Ellipse.CircularProgressTrack">
@@ -31,4 +80,4 @@
         <Setter Property="CornerRadius" Value="{x:Static theme:ThemeSemShapeTokens.CornerXS}" />
         <Setter Property="Cursor" Value="Hand" />
     </Style>
-</Styles>
\ No newline at end of file
+</Styles>
diff --git a/OpenUtauMobile/Views/DependencyManagerView.axaml b/OpenUtauMobile/Views/DependencyManagerView.axaml
index 4238e66..3053192 100644
--- a/OpenUtauMobile/Views/DependencyManagerView.axaml
+++ b/OpenUtauMobile/Views/DependencyManagerView.axaml
@@ -15,24 +15,20 @@
 
     <Panel Background="{DynamicResource Sem.Color.Surface}">
         <DockPanel>
-
             <Border DockPanel.Dock="Top" Classes="TopBar">
                 <Grid ColumnDefinitions="Auto,*,Auto,Auto">
-
-                    <!-- Back button -->
+                    <!-- 返回 -->
                     <Button Grid.Column="0"
                             Classes="TopBarBtn"
                             Command="{Binding BackCommand}"
                             ToolTip.Tip="{DynamicResource Common.Back}"
                             Content="{iconPacks:PhosphorIcons ArrowLeft}">
                     </Button>
-
-                    <!-- Title -->
+                    <!-- 标题 -->
                     <TextBlock Grid.Column="1"
                                Classes="TopBarTitle"
                                Text="{DynamicResource DependencyManager.Title}" />
-
-                    <!-- Refresh button -->
+                    <!-- 刷新 -->
                     <Button Grid.Column="2"
                             Classes="TopBarBtn"
                             Command="{Binding RefreshRegistryCommand}"
@@ -40,75 +36,68 @@
                             Margin="0,0,4,0"
                             Content="{iconPacks:PhosphorIcons ArrowsClockwise}">
                     </Button>
-
-                    <!-- Install from file button -->
+                    <!-- 从文件安装 -->
                     <Button Grid.Column="3"
                             Classes="TopBarBtn"
                             Command="{Binding InstallFromFileCommand}"
                             ToolTip.Tip="{DynamicResource DependencyManager.InstallFromFile}"
                             Content="{iconPacks:PhosphorIcons FileArchive}">
                     </Button>
-
                 </Grid>
             </Border>
 
             <TabControl SelectedIndex="{Binding SelectedTabIndex}"
-                        Background="Transparent"
-                        BorderThickness="0">
-
-                <!-- Tab 0: 鍙敤 -->
+                        Classes="DependencyTabs">
+                <!-- Tab 0: 可用 -->
                 <TabItem>
+                    <!-- Tab header -->
                     <TabItem.Header>
-                        <StackPanel Orientation="Horizontal" Spacing="8" Margin="8">
-                            <TextBlock Text="{DynamicResource DependencyManager.Available}"
-                                       FontSize="{x:Static theme:ThemeBaseTypographyTokens.HeadlineMSize}" />
-                            <Border Background="{DynamicResource Sem.Color.Primary}"
-                                    Padding="4,2"
-                                    CornerRadius="6">
-                                <TextBlock Text="{Binding AvailablePackages.Count}"
-                                           FontSize="12"
-                                           FontWeight="Medium"
-                                           Foreground="{DynamicResource Sem.Color.OnPrimary}" />
+                        <StackPanel Orientation="Horizontal"
+                                    Spacing="{x:Static theme:ThemeBaseLayoutTokens.SpaceXS}">
+                            <TextBlock Text="{DynamicResource DependencyManager.Available}" />
+                            <Border Classes="DependencyCountBadge">
+                                <TextBlock Text="{Binding AvailablePackages.Count}" />
                             </Border>
                         </StackPanel>
                     </TabItem.Header>
                     <ScrollViewer VerticalScrollBarVisibility="Auto"
                                   HorizontalScrollBarVisibility="Disabled">
-                        <StackPanel Margin="8">
-
-                            <!-- 绛涢€夊伐鍏?-->
-                            <Grid ColumnDefinitions="*,Auto" Margin="0,0,0,20">
-
-                                <!-- 鎼滅储鏍?-->
+                        <StackPanel Classes="DependencyPageContent">
+                            <!-- 顶栏 -->
+                            <Grid ColumnDefinitions="*,Auto"
+                                  Margin="{x:Static theme:ThemeSemDependencyManagerTokens.ToolbarBottomSpacing}">
+                                <!-- 搜索栏 -->
                                 <TextBox Grid.Column="0"
                                          Text="{Binding SearchText}"
-                                         Watermark="{DynamicResource DependencyManager.Search}"
+                                         PlaceholderText="{DynamicResource DependencyManager.Search}"
                                          CornerRadius="12"
-                                         Height="44"
                                          VerticalContentAlignment="Center"
                                          Margin="0,0,12,0"
-                                         Padding="32,0,16,0"
+                                         Padding="8,0,12,0"
                                          FontSize="14">
+
                                     <TextBox.InnerLeftContent>
-                                        <iconPacks:PackIconPhosphorIcons Kind="MagnifyingGlass"
-                                                                         HorizontalAlignment="Center" />
+                                        <iconPacks:PackIconPhosphorIcons
+                                            Kind="MagnifyingGlass"
+                                            Width="20"
+                                            Height="20"
+                                            Margin="12,0,4,0"
+                                            VerticalAlignment="Center"
+                                            HorizontalAlignment="Center"
+                                            Opacity="0.72"/>
                                     </TextBox.InnerLeftContent>
                                 </TextBox>
 
-                                <!-- 鎺掑簭鎸夐挳 -->
+                                <!-- 排序 -->
                                 <!-- TODO: Implement sort dropdown -->
                                 <Button Grid.Column="1"
-                                        Classes="btn-secondary"
-                                        Height="44"
-                                        Width="44"
-                                        Padding="0"
-                                        CornerRadius="12"
+                                        Classes="DependencyIconButton"
                                         Content="{iconPacks:PhosphorIcons FunnelSimple}">
                                 </Button>
 
                             </Grid>
 
-                            <!-- 蹇欑鎸囩ず鍣?-->
+                            <!-- 加载状态 -->
                             <StackPanel IsVisible="{Binding IsLoadingRegistry}"
                                         HorizontalAlignment="Center"
                                         VerticalAlignment="Center"
@@ -120,7 +109,7 @@
                                            HorizontalAlignment="Center" />
                             </StackPanel>
 
-                            <!-- 绌虹姸鎬?-->
+                            <!-- 无可用包 -->
                             <Border HorizontalAlignment="Center"
                                     VerticalAlignment="Center"
                                     Margin="0,60,0,0">
@@ -142,19 +131,15 @@
                                 </StackPanel>
                             </Border>
 
-                            <!-- Package list -->
-                            <ItemsControl ItemsSource="{Binding AvailablePackages}"
-                                          Padding="8">
+                            <!-- 可用包列表 -->
+                            <ItemsControl ItemsSource="{Binding AvailablePackages}">
                                 <ItemsControl.ItemTemplate>
                                     <DataTemplate x:DataType="vm:DependencyItemViewModel">
-
                                         <Border Classes="DependencyCard">
                                             <Grid RowDefinitions="Auto,Auto,Auto,Auto">
-
                                                 <!-- Row 0: Header (Icon + Name + Version) -->
                                                 <Grid Grid.Row="0" ColumnDefinitions="Auto,*,Auto" Margin="0,0,0,12">
-
-                                                    <!-- 鍗犱綅鍥炬爣 -->
+                                                    <!-- 图标 -->
                                                     <Border Grid.Column="0"
                                                             Width="48" Height="48"
                                                             CornerRadius="12"
@@ -166,8 +151,7 @@
                                                                 Foreground="{DynamicResource Sem.Color.Primary}"
                                                                 Kind="Cube" />
                                                     </Border>
-
-                                                    <!-- Name + Developers -->
+                                                    <!-- 名称 + 开发者 -->
                                                     <StackPanel Grid.Column="1" VerticalAlignment="Center" Spacing="4">
                                                         <TextBlock Text="{Binding Name}"
                                                                    FontSize="16"
@@ -178,9 +162,9 @@
                                                                    Foreground="{DynamicResource Sem.Color.Outline}" />
                                                     </StackPanel>
 
-                                                    <!-- Version badge -->
+                                                    <!-- 版本号 -->
                                                     <Border Grid.Column="2"
-                                                            Background="{DynamicResource Sem.Color.SurfaceContainer}"
+                                                            Background="{DynamicResource Sem.Color.SuccessContainer}"
                                                             Padding="10,5"
                                                             CornerRadius="8"
                                                             VerticalAlignment="Center">
@@ -189,18 +173,18 @@
                                                                    FontWeight="Medium"
                                                                    Foreground="{DynamicResource Sem.Color.OnSurfaceVariant}" />
                                                     </Border>
-
                                                 </Grid>
-
                                                 <!-- Row 1: ID -->
                                                 <TextBlock Grid.Row="1"
-                                                           Text="{Binding Id}"
                                                            FontSize="12"
                                                            FontFamily="Consolas,Courier New,monospace"
                                                            Foreground="{DynamicResource Sem.Color.Outline}"
-                                                           Margin="0,0,0,10" />
+                                                           Margin="0,0,0,10" >
+                                                    <Run Text="ID: " />
+                                                    <Run Text="{Binding Id}" />
+                                                </TextBlock>
 
-                                                <!-- Row 2: 鏍囩 -->
+                                                <!-- Row 2: 标签 -->
                                                 <ItemsControl Grid.Row="2"
                                                               ItemsSource="{Binding Tags}"
                                                               Margin="0,0,0,16">
@@ -223,11 +207,9 @@
                                                         </DataTemplate>
                                                     </ItemsControl.ItemTemplate>
                                                 </ItemsControl>
-
-                                                <!-- Row 3: Install button or Progress ring -->
+                                                <!-- 安装按钮 -->
                                                 <Grid Grid.Row="3">
-
-                                                    <!-- 瀹夎鎸夐挳 (鏈畨瑁呬笖鏃犳洿鏂? -->
+                                                    <!-- 安装 -->
                                                     <Button Command="{Binding InstallCommand}"
                                                             Classes="btn-primary"
                                                             Height="40"
@@ -250,8 +232,7 @@
                                                                        FontSize="14" FontWeight="Medium" />
                                                         </StackPanel>
                                                     </Button>
-
-                                                    <!-- Update button (宸插畨瑁呬笖鏈夋洿鏂? -->
+                                                    <!-- 更新 -->
                                                     <Button Command="{Binding InstallCommand}"
                                                             Classes="btn-primary"
                                                             Height="40"
@@ -274,10 +255,9 @@
                                                                        FontSize="14" FontWeight="Medium" />
                                                         </StackPanel>
                                                     </Button>
-
-                                                    <!-- Installed button (宸插畨瑁呬笖鏃犳洿鏂? -->
+                                                    <!-- 已安装 -->
                                                     <Button IsEnabled="False"
-                                                            Classes="btn-secondary"
+                                                            Classes="btn-primary"
                                                             Height="40"
                                                             CornerRadius="10"
                                                             HorizontalAlignment="Stretch">
@@ -298,8 +278,7 @@
                                                                        FontSize="14" FontWeight="Medium" />
                                                         </StackPanel>
                                                     </Button>
-
-                                                    <!-- Progress ring (when installing) -->
+                                                    <!-- 进度条 -->
                                                     <Grid IsVisible="{Binding IsInstalling}"
                                                           HorizontalAlignment="Center"
                                                           VerticalAlignment="Center">
@@ -310,41 +289,30 @@
                                                                      CornerRadius="10"
                                                                      ShowProgressText="True" />
                                                     </Grid>
-
                                                 </Grid>
-
                                             </Grid>
                                         </Border>
-
                                     </DataTemplate>
                                 </ItemsControl.ItemTemplate>
                             </ItemsControl>
-
                         </StackPanel>
                     </ScrollViewer>
                 </TabItem>
 
-                <!-- Tab 1: Installed Packages -->
+                <!-- Tab 1: 已安装 -->
                 <TabItem>
                     <TabItem.Header>
-                        <StackPanel Orientation="Horizontal" Spacing="8" Margin="8">
-                            <TextBlock Text="{DynamicResource DependencyManager.InstalledTab}"
-                                       FontSize="{x:Static theme:ThemeBaseTypographyTokens.HeadlineMSize}" />
-                            <Border Background="{DynamicResource Sem.Color.Primary}"
-                                    Padding="4,2"
-                                    CornerRadius="6">
-                                <TextBlock Text="{Binding InstalledPackages.Count}"
-                                           FontSize="12"
-                                           FontWeight="Medium"
-                                           Foreground="{DynamicResource Sem.Color.OnPrimary}" />
+                        <StackPanel Orientation="Horizontal"
+                                    Spacing="{x:Static theme:ThemeBaseLayoutTokens.SpaceXS}">
+                            <TextBlock Text="{DynamicResource DependencyManager.InstalledTab}" />
+                            <Border Classes="DependencyCountBadge">
+                                <TextBlock Text="{Binding InstalledPackages.Count}" />
                             </Border>
                         </StackPanel>
                     </TabItem.Header>
                     <ScrollViewer VerticalScrollBarVisibility="Auto"
-                                  HorizontalScrollBarVisibility="Disabled"
-                                  Padding="24,20">
-                        <StackPanel Margin="0,0,8,0">
-
+                                  HorizontalScrollBarVisibility="Disabled">
+                        <StackPanel Classes="DependencyPageContent">
                             <!-- Loading indicator -->
                             <StackPanel IsVisible="{Binding IsLoadingInstalled}"
                                         HorizontalAlignment="Center"
@@ -380,29 +348,25 @@
                                 </StackPanel>
                             </Border>
 
-                            <!-- 宸插畨瑁呯殑渚濊禆鍖呭垪琛?-->
+                            <!-- 已安装包列表-->
                             <ItemsControl ItemsSource="{Binding InstalledPackages}">
                                 <ItemsControl.ItemTemplate>
                                     <DataTemplate x:DataType="vm:InstalledDependencyViewModel">
-
                                         <Border Classes="DependencyCard">
                                             <Grid RowDefinitions="Auto,Auto,Auto">
-
                                                 <!-- Row 0: Header -->
                                                 <Grid Grid.Row="0" ColumnDefinitions="Auto,*,Auto" Margin="0,0,0,12">
-
-                                                    <!-- Icon -->
+                                                    <!-- 图标 -->
                                                     <Border Grid.Column="0"
                                                             Width="48" Height="48"
                                                             CornerRadius="12"
-                                                            Background="{DynamicResource Sem.Color.SuccessContainer}"
+                                                            Background="{DynamicResource Sem.Color.PrimaryContainer}"
                                                             Margin="0,0,16,0">
-                                                        <Path Width="24" Height="24"
-                                                              Stretch="Uniform"
-                                                              HorizontalAlignment="Center"
-                                                              VerticalAlignment="Center"
-                                                              Fill="{DynamicResource Sem.Color.Success}"
-                                                              Data="{StaticResource icon-check}" />
+                                                        <iconPacks:PackIconPhosphorIcons Width="24" Height="24"
+                                                                HorizontalAlignment="Center"
+                                                                VerticalAlignment="Center"
+                                                                Foreground="{DynamicResource Sem.Color.Primary}"
+                                                                Kind="Cube" />
                                                     </Border>
 
                                                     <!-- ID -->
@@ -416,7 +380,7 @@
                                                                    Foreground="{DynamicResource Sem.Color.Outline}" />
                                                     </StackPanel>
 
-                                                    <!-- Version badge -->
+                                                    <!-- 版本号徽章 -->
                                                     <Border Grid.Column="2"
                                                             Background="{DynamicResource Sem.Color.SuccessContainer}"
                                                             Padding="10,5"
@@ -440,9 +404,11 @@
 
                                                 <!-- Row 2: Uninstall button -->
                                                 <Button Grid.Row="2"
+                                                        Classes="btn-primary"
                                                         Command="{Binding UninstallCommand}"
                                                         IsEnabled="{Binding !IsUninstalling}"
-                                                        Classes="btn-danger"
+                                                        Background="{DynamicResource Sem.Color.ErrorContainer}"
+                                                        Foreground="{DynamicResource Sem.Color.OnErrorContainer}"
                                                         Height="40"
                                                         CornerRadius="10"
                                                         HorizontalAlignment="Stretch">
@@ -478,4 +444,4 @@
         </DockPanel>
     </Panel>
 
-</UserControl>
\ No newline at end of file
+</UserControl>

From f82c452935e14be497055fb03bc870933c955faf Mon Sep 17 00:00:00 2001
From: vocoder712 <100213316+vocoder712@users.noreply.github.com>
Date: Wed, 29 Jul 2026 11:22:08 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E4=BA=86=E4=BB=8E?=
 =?UTF-8?q?=E6=96=87=E4=BB=B6=E5=AE=89=E8=A3=85=E4=BE=9D=E8=B5=96=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .agent/DECISIONS.md                           |  12 ++
 OpenUtauMobile/Assets/Lang/Strings.en.resx    |  28 +++-
 OpenUtauMobile/Assets/Lang/Strings.ja.resx    |  28 +++-
 OpenUtauMobile/Assets/Lang/Strings.ru.resx    |  28 +++-
 OpenUtauMobile/Assets/Lang/Strings.uk.resx    |  28 +++-
 .../Assets/Lang/Strings.zh-Hans.resx          |  28 +++-
 OpenUtauMobile/Controls/LoadingPopup.axaml    |  41 +++++
 OpenUtauMobile/Controls/LoadingPopup.axaml.cs |  11 ++
 .../Services/LoadingPopupService.cs           |  81 ++++++++++
 .../ViewModels/DependencyManagerViewModel.cs  | 105 ++++++++++---
 .../ViewModels/LoadingPopupViewModel.cs       | 146 ++++++++++++++++++
 .../Views/DependencyManagerView.axaml         |  11 +-
 12 files changed, 517 insertions(+), 30 deletions(-)
 create mode 100644 OpenUtauMobile/Controls/LoadingPopup.axaml
 create mode 100644 OpenUtauMobile/Controls/LoadingPopup.axaml.cs
 create mode 100644 OpenUtauMobile/Services/LoadingPopupService.cs
 create mode 100644 OpenUtauMobile/ViewModels/LoadingPopupViewModel.cs

diff --git a/.agent/DECISIONS.md b/.agent/DECISIONS.md
index 14764ac..a45b40b 100644
--- a/.agent/DECISIONS.md
+++ b/.agent/DECISIONS.md
@@ -96,3 +96,15 @@ Record meaningful technical decisions here. Use one entry per decision.
 - Alternatives considered: Keep the dependency manager's page-scoped short pill indicator; duplicate the secondary-tab template in each view.
 - Impacted areas: Global OpenUtau Mobile TabItem headers; dependency manager tab header markup and tokens.
 
+- Date: 2026-07-29
+- Decision: Implement dependency installation from local files entirely in the Mobile layer without modifying the upstream-derived Core package manager.
+- Rationale: The existing Core API already supports file installation, while keeping this feature's UI state and error presentation outside Core avoids increasing the cost of future upstream synchronization.
+- Alternatives considered: Add transactional extraction, package metadata results, or typed installation errors to `OpenUtau.Core`; duplicate package parsing in a Mobile adapter.
+- Impacted areas: Dependency manager ViewModel, view state, and localization resources. Core installation behavior remains unchanged.
+
+- Date: 2026-07-29
+- Decision: Run non-cancellable background UI operations through a reusable LoadingPopup service with determinate and indeterminate progress modes.
+- Rationale: Centralizing first-frame yielding, UI-thread progress updates, and guaranteed dialog closure prevents operation-specific loading overlays from racing with completion or subsequent error dialogs.
+- Alternatives considered: Keep page-local busy indicators; open and close DialogHost directly in each ViewModel; add loading notifications to the upstream-derived Core.
+- Impacted areas: Shared popup controls and services; dependency installation now uses the indeterminate loading mode.
+
diff --git a/OpenUtauMobile/Assets/Lang/Strings.en.resx b/OpenUtauMobile/Assets/Lang/Strings.en.resx
index 72e59c1..4cc4283 100644
--- a/OpenUtauMobile/Assets/Lang/Strings.en.resx
+++ b/OpenUtauMobile/Assets/Lang/Strings.en.resx
@@ -837,6 +837,12 @@
   <data name="DependencyManager.Title" xml:space="preserve">
     <value>Dependency Management</value>
   </data>
+  <data name="LoadingPopup.Title" xml:space="preserve">
+    <value>Please wait</value>
+  </data>
+  <data name="LoadingPopup.DefaultMessage" xml:space="preserve">
+    <value>Working in the background…</value>
+  </data>
   <data name="DependencyManager.Refresh" xml:space="preserve">
     <value>Refresh List</value>
   </data>
@@ -882,8 +888,26 @@
   <data name="DependencyManager.Toast.InstalledListFailed" xml:space="preserve">
     <value>Failed to load installed list: {0}</value>
   </data>
-  <data name="DependencyManager.Toast.InstallFromFileNotImpl" xml:space="preserve">
-    <value>Install from file not implemented yet</value>
+  <data name="DependencyManager.FilePicker.SelectPackage" xml:space="preserve">
+    <value>Select dependency package</value>
+  </data>
+  <data name="DependencyManager.Loading.InstallFromFile" xml:space="preserve">
+    <value>Installing the dependency package…</value>
+  </data>
+  <data name="DependencyManager.Toast.InstallFromFileSuccess" xml:space="preserve">
+    <value>Installed dependency package "{0}"</value>
+  </data>
+  <data name="DependencyManager.Error.InvalidPackage" xml:space="preserve">
+    <value>The selected file is not a valid dependency package or is damaged.</value>
+  </data>
+  <data name="DependencyManager.Error.AccessDenied" xml:space="preserve">
+    <value>Unable to read the package or write to dependency storage. Check storage permissions.</value>
+  </data>
+  <data name="DependencyManager.Error.FileUnavailable" xml:space="preserve">
+    <value>The selected package is no longer available. Choose the file again.</value>
+  </data>
+  <data name="DependencyManager.Error.Storage" xml:space="preserve">
+    <value>Unable to install the package. Check available storage space and whether the file is in use.</value>
   </data>
   <data name="DependencyManager.Toast.Uninstalled" xml:space="preserve">
     <value>Uninstalled {0}</value>
diff --git a/OpenUtauMobile/Assets/Lang/Strings.ja.resx b/OpenUtauMobile/Assets/Lang/Strings.ja.resx
index 611000e..c6584d8 100644
--- a/OpenUtauMobile/Assets/Lang/Strings.ja.resx
+++ b/OpenUtauMobile/Assets/Lang/Strings.ja.resx
@@ -834,6 +834,12 @@
   <data name="DependencyManager.Title" xml:space="preserve">
     <value>依存関係管理</value>
   </data>
+  <data name="LoadingPopup.Title" xml:space="preserve">
+    <value>しばらくお待ちください</value>
+  </data>
+  <data name="LoadingPopup.DefaultMessage" xml:space="preserve">
+    <value>バックグラウンド処理を実行しています…</value>
+  </data>
   <data name="DependencyManager.Refresh" xml:space="preserve">
     <value>リストを更新</value>
   </data>
@@ -879,8 +885,26 @@
   <data name="DependencyManager.Toast.InstalledListFailed" xml:space="preserve">
     <value>インストール済みリストの読み込みに失敗: {0}</value>
   </data>
-  <data name="DependencyManager.Toast.InstallFromFileNotImpl" xml:space="preserve">
-    <value>ファイルからのインストールは未実装です</value>
+  <data name="DependencyManager.FilePicker.SelectPackage" xml:space="preserve">
+    <value>依存関係パッケージを選択</value>
+  </data>
+  <data name="DependencyManager.Loading.InstallFromFile" xml:space="preserve">
+    <value>依存関係パッケージをインストールしています…</value>
+  </data>
+  <data name="DependencyManager.Toast.InstallFromFileSuccess" xml:space="preserve">
+    <value>依存関係パッケージ「{0}」をインストールしました</value>
+  </data>
+  <data name="DependencyManager.Error.InvalidPackage" xml:space="preserve">
+    <value>選択したファイルは有効な依存関係パッケージではないか、破損しています。</value>
+  </data>
+  <data name="DependencyManager.Error.AccessDenied" xml:space="preserve">
+    <value>パッケージの読み込みまたは依存関係ストレージへの書き込みができません。ストレージ権限を確認してください。</value>
+  </data>
+  <data name="DependencyManager.Error.FileUnavailable" xml:space="preserve">
+    <value>選択したパッケージは利用できなくなりました。ファイルを再度選択してください。</value>
+  </data>
+  <data name="DependencyManager.Error.Storage" xml:space="preserve">
+    <value>パッケージをインストールできません。空き容量とファイルが使用中でないか確認してください。</value>
   </data>
   <data name="DependencyManager.Toast.Uninstalled" xml:space="preserve">
     <value>{0} をアンインストールしました</value>
diff --git a/OpenUtauMobile/Assets/Lang/Strings.ru.resx b/OpenUtauMobile/Assets/Lang/Strings.ru.resx
index 7ef7e65..d23c81a 100644
--- a/OpenUtauMobile/Assets/Lang/Strings.ru.resx
+++ b/OpenUtauMobile/Assets/Lang/Strings.ru.resx
@@ -819,6 +819,12 @@
   <data name="DependencyManager.Title" xml:space="preserve">
     <value>Управление зависимостями</value>
   </data>
+  <data name="LoadingPopup.Title" xml:space="preserve">
+    <value>Пожалуйста, подождите</value>
+  </data>
+  <data name="LoadingPopup.DefaultMessage" xml:space="preserve">
+    <value>Выполняется фоновая операция…</value>
+  </data>
   <data name="DependencyManager.Refresh" xml:space="preserve">
     <value>Обновить список</value>
   </data>
@@ -864,8 +870,26 @@
   <data name="DependencyManager.Toast.InstalledListFailed" xml:space="preserve">
     <value>Не удалось загрузить список установленных: {0}</value>
   </data>
-  <data name="DependencyManager.Toast.InstallFromFileNotImpl" xml:space="preserve">
-    <value>Установка из файла ещё не реализована</value>
+  <data name="DependencyManager.FilePicker.SelectPackage" xml:space="preserve">
+    <value>Выберите пакет зависимостей</value>
+  </data>
+  <data name="DependencyManager.Loading.InstallFromFile" xml:space="preserve">
+    <value>Установка пакета зависимостей…</value>
+  </data>
+  <data name="DependencyManager.Toast.InstallFromFileSuccess" xml:space="preserve">
+    <value>Пакет зависимостей «{0}» установлен</value>
+  </data>
+  <data name="DependencyManager.Error.InvalidPackage" xml:space="preserve">
+    <value>Выбранный файл не является допустимым пакетом зависимостей или повреждён.</value>
+  </data>
+  <data name="DependencyManager.Error.AccessDenied" xml:space="preserve">
+    <value>Не удалось прочитать пакет или записать данные зависимостей. Проверьте разрешения хранилища.</value>
+  </data>
+  <data name="DependencyManager.Error.FileUnavailable" xml:space="preserve">
+    <value>Выбранный пакет больше недоступен. Выберите файл ещё раз.</value>
+  </data>
+  <data name="DependencyManager.Error.Storage" xml:space="preserve">
+    <value>Не удалось установить пакет. Проверьте свободное место и не используется ли файл.</value>
   </data>
   <data name="DependencyManager.Toast.Uninstalled" xml:space="preserve">
     <value>Удалено: {0}</value>
diff --git a/OpenUtauMobile/Assets/Lang/Strings.uk.resx b/OpenUtauMobile/Assets/Lang/Strings.uk.resx
index 61b3171..2a22562 100644
--- a/OpenUtauMobile/Assets/Lang/Strings.uk.resx
+++ b/OpenUtauMobile/Assets/Lang/Strings.uk.resx
@@ -819,6 +819,12 @@
   <data name="DependencyManager.Title" xml:space="preserve">
     <value>Керування залежностями</value>
   </data>
+  <data name="LoadingPopup.Title" xml:space="preserve">
+    <value>Будь ласка, зачекайте</value>
+  </data>
+  <data name="LoadingPopup.DefaultMessage" xml:space="preserve">
+    <value>Виконується фонова операція…</value>
+  </data>
   <data name="DependencyManager.Refresh" xml:space="preserve">
     <value>Оновити список</value>
   </data>
@@ -864,8 +870,26 @@
   <data name="DependencyManager.Toast.InstalledListFailed" xml:space="preserve">
     <value>Не вдалося завантажити список встановлених: {0}</value>
   </data>
-  <data name="DependencyManager.Toast.InstallFromFileNotImpl" xml:space="preserve">
-    <value>Встановлення з файла ще не реалізовано</value>
+  <data name="DependencyManager.FilePicker.SelectPackage" xml:space="preserve">
+    <value>Виберіть пакет залежностей</value>
+  </data>
+  <data name="DependencyManager.Loading.InstallFromFile" xml:space="preserve">
+    <value>Встановлення пакета залежностей…</value>
+  </data>
+  <data name="DependencyManager.Toast.InstallFromFileSuccess" xml:space="preserve">
+    <value>Пакет залежностей «{0}» встановлено</value>
+  </data>
+  <data name="DependencyManager.Error.InvalidPackage" xml:space="preserve">
+    <value>Вибраний файл не є припустимим пакетом залежностей або пошкоджений.</value>
+  </data>
+  <data name="DependencyManager.Error.AccessDenied" xml:space="preserve">
+    <value>Не вдалося прочитати пакет або записати дані залежностей. Перевірте дозволи сховища.</value>
+  </data>
+  <data name="DependencyManager.Error.FileUnavailable" xml:space="preserve">
+    <value>Вибраний пакет більше недоступний. Виберіть файл ще раз.</value>
+  </data>
+  <data name="DependencyManager.Error.Storage" xml:space="preserve">
+    <value>Не вдалося встановити пакет. Перевірте вільне місце та чи не використовується файл.</value>
   </data>
   <data name="DependencyManager.Toast.Uninstalled" xml:space="preserve">
     <value>Видалено {0}</value>
diff --git a/OpenUtauMobile/Assets/Lang/Strings.zh-Hans.resx b/OpenUtauMobile/Assets/Lang/Strings.zh-Hans.resx
index e019fd2..5a4052f 100644
--- a/OpenUtauMobile/Assets/Lang/Strings.zh-Hans.resx
+++ b/OpenUtauMobile/Assets/Lang/Strings.zh-Hans.resx
@@ -837,6 +837,12 @@
   <data name="DependencyManager.Title" xml:space="preserve">
     <value>依赖项管理</value>
   </data>
+  <data name="LoadingPopup.Title" xml:space="preserve">
+    <value>请稍候</value>
+  </data>
+  <data name="LoadingPopup.DefaultMessage" xml:space="preserve">
+    <value>正在进行后台操作…</value>
+  </data>
   <data name="DependencyManager.Refresh" xml:space="preserve">
     <value>刷新列表</value>
   </data>
@@ -882,8 +888,26 @@
   <data name="DependencyManager.Toast.InstalledListFailed" xml:space="preserve">
     <value>加载已安装列表失败: {0}</value>
   </data>
-  <data name="DependencyManager.Toast.InstallFromFileNotImpl" xml:space="preserve">
-    <value>从文件安装功能待实现</value>
+  <data name="DependencyManager.FilePicker.SelectPackage" xml:space="preserve">
+    <value>选择依赖包</value>
+  </data>
+  <data name="DependencyManager.Loading.InstallFromFile" xml:space="preserve">
+    <value>正在安装依赖包…</value>
+  </data>
+  <data name="DependencyManager.Toast.InstallFromFileSuccess" xml:space="preserve">
+    <value>已安装依赖包“{0}”</value>
+  </data>
+  <data name="DependencyManager.Error.InvalidPackage" xml:space="preserve">
+    <value>所选文件不是有效的依赖包，或文件已损坏。</value>
+  </data>
+  <data name="DependencyManager.Error.AccessDenied" xml:space="preserve">
+    <value>无法读取依赖包或写入依赖项存储，请检查存储权限。</value>
+  </data>
+  <data name="DependencyManager.Error.FileUnavailable" xml:space="preserve">
+    <value>所选依赖包已不可用，请重新选择文件。</value>
+  </data>
+  <data name="DependencyManager.Error.Storage" xml:space="preserve">
+    <value>无法安装依赖包，请检查可用存储空间以及文件是否被占用。</value>
   </data>
   <data name="DependencyManager.Toast.Uninstalled" xml:space="preserve">
     <value>已卸载 {0}</value>
diff --git a/OpenUtauMobile/Controls/LoadingPopup.axaml b/OpenUtauMobile/Controls/LoadingPopup.axaml
new file mode 100644
index 0000000..e5dbd11
--- /dev/null
+++ b/OpenUtauMobile/Controls/LoadingPopup.axaml
@@ -0,0 +1,41 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:vm="clr-namespace:OpenUtauMobile.ViewModels"
+             xmlns:theme="clr-namespace:OpenUtauMobile.Themes.OpenUtauMobile.Runtime"
+             mc:Ignorable="d"
+             x:Class="OpenUtauMobile.Controls.LoadingPopup"
+             x:DataType="vm:LoadingPopupViewModel"
+             d:DataContext="{d:DesignInstance Type=vm:LoadingPopupViewModel, IsDesignTimeCreatable=False}"
+             Classes="PopupDialogRoot">
+
+    <Border Classes="PopupDialogSurface">
+        <DockPanel>
+            <Border Classes="PopupTitleBar"
+                    DockPanel.Dock="Top">
+                <TextBlock Text="{DynamicResource LoadingPopup.Title}"
+                           Classes="PopupTitle" />
+            </Border>
+
+            <StackPanel Margin="{x:Static theme:ThemeSemLayoutTokens.InsetCardComfortable}"
+                        Spacing="{x:Static theme:ThemeSemLayoutTokens.SpaceMD}">
+                <TextBlock Text="{Binding Message}"
+                           FontSize="{x:Static theme:ThemeSemTypographyTokens.BodyMSize}"
+                           Foreground="{DynamicResource Sem.Color.OnSurface}"
+                           TextWrapping="Wrap"
+                           TextAlignment="Center" />
+
+                <ProgressBar Value="{Binding Progress}"
+                             IsIndeterminate="{Binding IsIndeterminate}"
+                             HorizontalAlignment="Stretch" />
+
+                <TextBlock Text="{Binding ProgressText}"
+                           IsVisible="{Binding IsIndeterminate, Converter={x:Static BoolConverters.Not}}"
+                           FontSize="{x:Static theme:ThemeSemTypographyTokens.LabelMSize}"
+                           Foreground="{DynamicResource Sem.Color.Primary}"
+                           HorizontalAlignment="Center" />
+            </StackPanel>
+        </DockPanel>
+    </Border>
+</UserControl>
diff --git a/OpenUtauMobile/Controls/LoadingPopup.axaml.cs b/OpenUtauMobile/Controls/LoadingPopup.axaml.cs
new file mode 100644
index 0000000..be4f9e4
--- /dev/null
+++ b/OpenUtauMobile/Controls/LoadingPopup.axaml.cs
@@ -0,0 +1,11 @@
+namespace OpenUtauMobile.Controls;
+
+public partial class LoadingPopup : PopupDialogControl
+{
+    protected override PopupDialogWidthPreset WidthPreset => PopupDialogWidthPreset.Compact;
+
+    public LoadingPopup()
+    {
+        InitializeComponent();
+    }
+}
diff --git a/OpenUtauMobile/Services/LoadingPopupService.cs b/OpenUtauMobile/Services/LoadingPopupService.cs
new file mode 100644
index 0000000..3047625
--- /dev/null
+++ b/OpenUtauMobile/Services/LoadingPopupService.cs
@@ -0,0 +1,81 @@
+using System;
+using System.Threading.Tasks;
+using Avalonia.Threading;
+using OpenUtauMobile.Controls;
+using OpenUtauMobile.ViewModels;
+
+namespace OpenUtauMobile.Services;
+
+/// <summary>
+/// 在通用加载弹窗中运行后台操作
+/// </summary>
+/// <remarks>
+/// 适用于安装、导入、导出等需要阻止用户继续操作，且通常无法立即完成的后台任务。
+/// 短暂操作或不阻塞交互的状态提示应优先使用 Toast 或页面内加载状态。
+///
+/// 无法获取进度时调用 <see cref="RunAsync(string, Func{LoadingPopupViewModel, Task})"/>；
+/// 可获取 0–100 进度时调用带初始进度的重载，并通过
+/// <see cref="LoadingPopupViewModel.UpdateProgress"/> 持续更新进度和说明。
+///
+/// Service 会先显示弹窗，再运行任务，并在任务成功或抛出异常时关闭弹窗。
+/// 异常会在弹窗完全关闭后继续向调用方传播，因此成功提示和错误弹窗应由调用方在
+/// <c>await RunAsync(...)</c> 之后处理。调用方不应自行关闭 LoadingPopup。
+/// </remarks>
+/// <example>
+/// <code>
+/// await LoadingPopupService.RunAsync(message, _ => InstallAsync());
+///
+/// await LoadingPopupService.RunAsync(message, 0d, async loading =>
+/// {
+///     loading.UpdateProgress(50d, nextMessage);
+///     await ExportAsync();
+/// });
+/// </code>
+/// </example>
+public static class LoadingPopupService
+{
+    /// <summary>使用无确定进度的加载弹窗运行后台操作</summary>
+    public static async Task RunAsync(
+        string message,
+        Func<LoadingPopupViewModel, Task> operation)
+    {
+        LoadingPopupViewModel viewModel = new(message);
+        await RunAsync(viewModel, operation);
+    }
+
+    /// <summary>使用确定进度的加载弹窗运行后台操作</summary>
+    public static async Task RunAsync(
+        string message,
+        double initialProgress,
+        Func<LoadingPopupViewModel, Task> operation)
+    {
+        LoadingPopupViewModel viewModel = new(message, initialProgress);
+        await RunAsync(viewModel, operation);
+    }
+
+    private static async Task RunAsync(
+        LoadingPopupViewModel viewModel,
+        Func<LoadingPopupViewModel, Task> operation)
+    {
+        ArgumentNullException.ThrowIfNull(operation);
+
+        Task<object?> popupTask = PopupService.Show<object>(
+            new LoadingPopup(),
+            viewModel);
+
+        // 先让弹窗完成布局和首帧渲染，再启动可能包含同步阶段的后台操作。
+        await Dispatcher.UIThread.InvokeAsync(
+            () => { },
+            DispatcherPriority.Background);
+
+        try
+        {
+            await operation(viewModel);
+        }
+        finally
+        {
+            viewModel.Close();
+            await popupTask;
+        }
+    }
+}
diff --git a/OpenUtauMobile/ViewModels/DependencyManagerViewModel.cs b/OpenUtauMobile/ViewModels/DependencyManagerViewModel.cs
index dd7d270..770b072 100644
--- a/OpenUtauMobile/ViewModels/DependencyManagerViewModel.cs
+++ b/OpenUtauMobile/ViewModels/DependencyManagerViewModel.cs
@@ -1,5 +1,7 @@
 using System;
+using System.Collections.Generic;
 using System.Collections.ObjectModel;
+using System.IO;
 using System.Linq;
 using System.Reactive;
 using System.Reactive.Linq;
@@ -7,6 +9,7 @@
 using OpenUtau.Core;
 using OpenUtauMobile.Helpers;
 using OpenUtauMobile.Services;
+using OpenUtauMobile.Storage;
 using ReactiveUI;
 using ReactiveUI.Fody.Helpers;
 
@@ -50,6 +53,10 @@ public class DependencyManagerViewModel : NavigateViewModelBase
     [Reactive]
     public int SortMode { get; set; } = 0;
 
+    /// <summary>是否正在从本地文件安装依赖包</summary>
+    [Reactive]
+    public bool IsInstallingFromFile { get; set; }
+
     // ═══════════════════════════════════════════════════
     //  Commands
     // ═══════════════════════════════════════════════════
@@ -68,7 +75,12 @@ public DependencyManagerViewModel(MainViewModel navigator) : base(navigator)
         BackCommand = ReactiveCommand.Create(OnBack);
         RefreshRegistryCommand = ReactiveCommand.CreateFromTask(LoadAvailablePackagesAsync);
         RefreshInstalledCommand = ReactiveCommand.CreateFromTask(LoadInstalledPackagesAsync);
-        InstallFromFileCommand = ReactiveCommand.CreateFromTask(OnInstallFromFileAsync);
+        IObservable<bool> canInstallFromFile = this
+            .WhenAnyValue(x => x.IsInstallingFromFile)
+            .Select(isInstalling => !isInstalling);
+        InstallFromFileCommand = ReactiveCommand.CreateFromTask(
+            OnInstallFromFileAsync,
+            canInstallFromFile);
 
         // 自动加载数据
         Task.Run(async () =>
@@ -99,11 +111,11 @@ private async Task LoadAvailablePackagesAsync()
         IsLoadingRegistry = true;
         try
         {
-            var packages = await PackageManager.Inst.FetchRegistryAsync();
+            List<RegistrySoftware> packages = await PackageManager.Inst.FetchRegistryAsync();
 
             // 清空并重新填充
             AvailablePackages.Clear();
-            foreach (var pkg in packages)
+            foreach (RegistrySoftware pkg in packages)
             {
                 AvailablePackages.Add(new DependencyItemViewModel(pkg, this));
             }
@@ -129,11 +141,11 @@ public async Task LoadInstalledPackagesAsync()
         IsLoadingInstalled = true;
         try
         {
-            var installed = await PackageManager.Inst.GetInstalledAsync();
+            List<OudepMetadata> installed = await PackageManager.Inst.GetInstalledAsync();
 
             // 清空并重新填充
             InstalledPackages.Clear();
-            foreach (var meta in installed)
+            foreach (OudepMetadata meta in installed)
             {
                 InstalledPackages.Add(new InstalledDependencyViewModel(meta, this));
             }
@@ -154,21 +166,78 @@ public async Task LoadInstalledPackagesAsync()
     /// <summary>更新可用包的已安装状态</summary>
     private void UpdateInstalledStatus()
     {
-        foreach (var pkg in AvailablePackages)
+        foreach (DependencyItemViewModel pkg in AvailablePackages)
         {
             pkg.UpdateInstalledStatus(InstalledPackages);
         }
     }
 
     /// <summary>从本地文件安装依赖包</summary>
-    private Task OnInstallFromFileAsync()
+    private async Task OnInstallFromFileAsync()
+    {
+        string[] filters = [$"*{PackageManager.OudepExt}"];
+        string archivePath;
+        try
+        {
+            archivePath = await FilePicker.PickSingleFileAsync(
+                L.S("DependencyManager.FilePicker.SelectPackage"),
+                filters);
+        }
+        catch (Exception ex)
+        {
+            ShowInstallFromFileError(
+                L.S("DependencyManager.Error.FileUnavailable"),
+                ex);
+            return;
+        }
+
+        if (string.IsNullOrEmpty(archivePath))
+        {
+            return;
+        }
+
+        IsInstallingFromFile = true;
+        try
+        {
+            await LoadingPopupService.RunAsync(
+                L.S("DependencyManager.Loading.InstallFromFile"),
+                _ => PackageManager.Inst.InstallFromFileAsync(archivePath));
+            string fileName = Path.GetFileName(archivePath);
+            ToastService.Enqueue(string.Format(
+                L.S("DependencyManager.Toast.InstallFromFileSuccess"),
+                fileName));
+            SelectedTabIndex = 1;
+        }
+        catch (Exception ex)
+        {
+            string message = GetInstallFromFileErrorMessage(ex);
+            ShowInstallFromFileError(message, ex);
+        }
+        finally
+        {
+            IsInstallingFromFile = false;
+            await LoadInstalledPackagesAsync();
+        }
+    }
+
+    /// <summary>将安装异常转换为面向用户的错误信息</summary>
+    private static string GetInstallFromFileErrorMessage(Exception exception)
     {
-        // TODO: 实现文件选择器
-        // 1. 打开文件选择器,选择 .oudep 文件
-        // 2. 调用 PackageManager.Inst.InstallFromFileAsync(filePath)
-        // 3. 安装完成后刷新已安装列表
-        ToastService.Enqueue(L.S("DependencyManager.Toast.InstallFromFileNotImpl"));
-        return Task.CompletedTask;
+        return exception switch
+        {
+            UnauthorizedAccessException => L.S("DependencyManager.Error.AccessDenied"),
+            FileNotFoundException or DirectoryNotFoundException =>
+                L.S("DependencyManager.Error.FileUnavailable"),
+            IOException => L.S("DependencyManager.Error.Storage"),
+            _ => L.S("DependencyManager.Error.InvalidPackage")
+        };
+    }
+
+    /// <summary>显示从文件安装失败弹窗</summary>
+    private static void ShowInstallFromFileError(string message, Exception exception)
+    {
+        ErrorMessageNotification notification = new(message, exception);
+        ErrorDialogService.Show(new ErrorDialogViewModel(notification));
     }
 
     /// <summary>卸载指定的依赖包</summary>
@@ -258,15 +327,15 @@ public DependencyItemViewModel(RegistrySoftware software, DependencyManagerViewM
     /// <summary>更新已安装状态</summary>
     public void UpdateInstalledStatus(ObservableCollection<InstalledDependencyViewModel> installedPackages)
     {
-        var installed = installedPackages.FirstOrDefault(p => p.Id == Id);
+        InstalledDependencyViewModel? installed = installedPackages.FirstOrDefault(p => p.Id == Id);
         IsInstalled = installed != null;
         InstalledVersion = installed?.Version ?? string.Empty;
 
         // 检查是否有更新：已安装且远程版本号更高
         if (IsInstalled && !string.IsNullOrEmpty(InstalledVersion) && !string.IsNullOrEmpty(LatestVersion))
         {
-            if (Version.TryParse(InstalledVersion, out var installedVer) &&
-                Version.TryParse(LatestVersion, out var latestVer))
+            if (Version.TryParse(InstalledVersion, out Version? installedVer) &&
+                Version.TryParse(LatestVersion, out Version? latestVer))
             {
                 HasUpdate = latestVer > installedVer;
             }
@@ -289,7 +358,7 @@ private async Task OnInstallAsync()
 
         try
         {
-            var progress = new Progress<int>(percent => { InstallProgress = percent; });
+            Progress<int> progress = new(percent => { InstallProgress = percent; });
 
             await PackageManager.Inst.InstallAsync(_software, progress);
             ToastService.Enqueue(string.Format(L.S("DependencyManager.Toast.InstallSuccess"), Name));
@@ -350,4 +419,4 @@ private async Task OnUninstallAsync()
             IsUninstalling = false;
         }
     }
-}
\ No newline at end of file
+}
diff --git a/OpenUtauMobile/ViewModels/LoadingPopupViewModel.cs b/OpenUtauMobile/ViewModels/LoadingPopupViewModel.cs
new file mode 100644
index 0000000..a8dcad3
--- /dev/null
+++ b/OpenUtauMobile/ViewModels/LoadingPopupViewModel.cs
@@ -0,0 +1,146 @@
+using System;
+using System.Threading;
+using Avalonia.Threading;
+using OpenUtauMobile.Helpers;
+using ReactiveUI;
+using ReactiveUI.Fody.Helpers;
+
+namespace OpenUtauMobile.ViewModels;
+
+/// <summary>
+/// 通用后台操作加载弹窗 ViewModel
+/// </summary>
+/// <remarks>
+/// 由 <see cref="OpenUtauMobile.Services.LoadingPopupService"/> 创建并管理生命周期。
+/// 后台任务可使用本类型更新进度或提示文本，不应直接持有或显示对应 View。
+/// </remarks>
+public class LoadingPopupViewModel : PopupViewModelBase, IProgress<double>
+{
+    private const double MinimumProgress = 0d;
+    private const double MaximumProgress = 100d;
+    private int _isClosed;
+
+    /// <summary>当前后台操作说明</summary>
+    [Reactive]
+    public string Message { get; private set; }
+
+    /// <summary>当前进度，范围为 0–100</summary>
+    [Reactive]
+    public double Progress { get; private set; }
+
+    /// <summary>是否使用无确定进度的加载状态</summary>
+    [Reactive]
+    public bool IsIndeterminate { get; private set; }
+
+    /// <summary>用于界面显示的进度文本</summary>
+    public string ProgressText => $"{Progress:0}%";
+
+    /// <param name="message">后台操作说明</param>
+    public LoadingPopupViewModel(string message)
+    {
+        Message = NormalizeMessage(message);
+        IsIndeterminate = true;
+    }
+
+    /// <param name="message">后台操作说明</param>
+    /// <param name="progress">初始进度，超出 0–100 时自动截断</param>
+    public LoadingPopupViewModel(string message, double progress)
+    {
+        Message = NormalizeMessage(message);
+        Progress = NormalizeProgress(progress);
+        IsIndeterminate = false;
+    }
+
+    /// <summary>报告确定进度</summary>
+    public void Report(double value)
+    {
+        UpdateProgress(value);
+    }
+
+    /// <summary>更新确定进度和可选操作说明</summary>
+    public void UpdateProgress(double progress, string? message = null)
+    {
+        RunOnUiThread(() =>
+        {
+            Progress = NormalizeProgress(progress);
+            IsIndeterminate = false;
+            if (message != null)
+            {
+                Message = NormalizeMessage(message);
+            }
+
+            this.RaisePropertyChanged(nameof(ProgressText));
+        });
+    }
+
+    /// <summary>切换为无确定进度的加载状态</summary>
+    public void SetIndeterminate(string? message = null)
+    {
+        RunOnUiThread(() =>
+        {
+            IsIndeterminate = true;
+            if (message != null)
+            {
+                Message = NormalizeMessage(message);
+            }
+        });
+    }
+
+    /// <summary>更新后台操作说明</summary>
+    public void UpdateMessage(string message)
+    {
+        RunOnUiThread(() => Message = NormalizeMessage(message));
+    }
+
+    /// <summary>由后台操作完成方关闭弹窗</summary>
+    public void Close()
+    {
+        if (Interlocked.Exchange(ref _isClosed, 1) != 0)
+        {
+            return;
+        }
+
+        RunOnUiThread(() => RaiseClose(null), allowAfterClose: true);
+    }
+
+    /// <summary>后台操作期间忽略返回请求</summary>
+    public override void RequestBack()
+    {
+    }
+
+    private void RunOnUiThread(Action action, bool allowAfterClose = false)
+    {
+        if (!allowAfterClose && Volatile.Read(ref _isClosed) != 0)
+        {
+            return;
+        }
+
+        if (Dispatcher.UIThread.CheckAccess())
+        {
+            action();
+            return;
+        }
+
+        Dispatcher.UIThread.Post(() =>
+        {
+            if (allowAfterClose || Volatile.Read(ref _isClosed) == 0)
+            {
+                action();
+            }
+        });
+    }
+
+    private static string NormalizeMessage(string message)
+    {
+        return string.IsNullOrWhiteSpace(message)
+            ? L.S("LoadingPopup.DefaultMessage")
+            : message;
+    }
+
+    private static double NormalizeProgress(double progress)
+    {
+        return double.IsFinite(progress)
+            ? Math.Clamp(progress, MinimumProgress, MaximumProgress)
+            : MinimumProgress;
+    }
+}
diff --git a/OpenUtauMobile/Views/DependencyManagerView.axaml b/OpenUtauMobile/Views/DependencyManagerView.axaml
index 3053192..52af51d 100644
--- a/OpenUtauMobile/Views/DependencyManagerView.axaml
+++ b/OpenUtauMobile/Views/DependencyManagerView.axaml
@@ -40,8 +40,15 @@
                     <Button Grid.Column="3"
                             Classes="TopBarBtn"
                             Command="{Binding InstallFromFileCommand}"
-                            ToolTip.Tip="{DynamicResource DependencyManager.InstallFromFile}"
-                            Content="{iconPacks:PhosphorIcons FileArchive}">
+                            ToolTip.Tip="{DynamicResource DependencyManager.InstallFromFile}">
+                        <Grid>
+                            <iconPacks:PackIconPhosphorIcons
+                                Kind="FileArchive"
+                                IsVisible="{Binding IsInstallingFromFile, Converter={x:Static BoolConverters.Not}}" />
+                            <iconPacks:PackIconPhosphorIcons
+                                Kind="HourglassMedium"
+                                IsVisible="{Binding IsInstallingFromFile}" />
+                        </Grid>
                     </Button>
                 </Grid>
             </Border>