From 7aa74eae941d0fa8ab6858d147ca71acd2b1c73b Mon Sep 17 00:00:00 2001
From: rmbgame <rmb@rmbgame.net>
Date: Tue, 2 Mar 2021 04:50:19 +0800
Subject: [PATCH] ui process update

---
 .../App.axaml                                 | 31 +++++-----
 .../Views/MainWindow.axaml                    |  4 --
 .../Views/MainWindow.axaml.cs                 |  2 +-
 .../Application/UI/MainView.axaml             | 46 +++++++++++++--
 .../UI/Pages/About/About_OpenSourcePage.axaml | 17 ++++++
 .../Pages/About/About_OpenSourcePage.axaml.cs | 19 ++++++
 .../Application/UI/Pages/AboutPage.axaml      | 20 +++++++
 .../Application/UI/Pages/AboutPage.axaml.cs   | 19 ++++++
 .../Application/UI/Pages/DebugPage.axaml      | 14 +++++
 .../Application/UI/Pages/DebugPage.axaml.cs   | 19 ++++++
 .../Application/UI/Pages/StartPage.axaml      | 17 ++++++
 .../Application/UI/Pages/StartPage.axaml.cs   | 19 ++++++
 ....SteamTools.Client.Desktop.Avalonia.csproj | 12 ++++
 .../Extensions/ViewModelExtensions.cs         | 22 +++++++
 ...plication.SteamTools.Client.Desktop.csproj |  6 ++
 .../UI/ViewModels/Base/ItemViewModel.cs       | 31 ++++++++++
 .../UI/ViewModels/Base/TabItemViewModel.cs    | 59 +++++++++++++++++++
 .../UI/ViewModels/Base/ViewModelBase.cs       | 16 ++++-
 .../UI/ViewModels/Base/WindowViewModel.cs     |  5 ++
 .../UI/ViewModels/MainWindowViewModel.cs      | 41 ++++++++++++-
 .../UI/ViewModels/Pages/AboutPageViewModel.cs | 16 +++++
 .../UI/ViewModels/Pages/DebugPageViewModel.cs | 33 +++++++++++
 .../ViewModels/Pages/GameListPageViewModel.cs | 14 +++++
 .../Settings/SettingsPageViewModel.cs         | 10 +++-
 .../UI/ViewModels/Pages/StartPageViewModel.cs | 14 +++++
 .../Pages/SteamAccountPageViewModel.cs        | 14 +++++
 26 files changed, 489 insertions(+), 31 deletions(-)
 create mode 100644 System.Application.SteamTools.Client.Desktop.Avalonia/Application/UI/Pages/About/About_OpenSourcePage.axaml
 create mode 100644 System.Application.SteamTools.Client.Desktop.Avalonia/Application/UI/Pages/About/About_OpenSourcePage.axaml.cs
 create mode 100644 System.Application.SteamTools.Client.Desktop.Avalonia/Application/UI/Pages/AboutPage.axaml
 create mode 100644 System.Application.SteamTools.Client.Desktop.Avalonia/Application/UI/Pages/AboutPage.axaml.cs
 create mode 100644 System.Application.SteamTools.Client.Desktop.Avalonia/Application/UI/Pages/DebugPage.axaml
 create mode 100644 System.Application.SteamTools.Client.Desktop.Avalonia/Application/UI/Pages/DebugPage.axaml.cs
 create mode 100644 System.Application.SteamTools.Client.Desktop.Avalonia/Application/UI/Pages/StartPage.axaml
 create mode 100644 System.Application.SteamTools.Client.Desktop.Avalonia/Application/UI/Pages/StartPage.axaml.cs
 create mode 100644 System.Application.SteamTools.Client.Desktop/Extensions/ViewModelExtensions.cs
 create mode 100644 System.Application.SteamTools.Client.Desktop/UI/ViewModels/Base/ItemViewModel.cs
 create mode 100644 System.Application.SteamTools.Client.Desktop/UI/ViewModels/Base/TabItemViewModel.cs
 create mode 100644 System.Application.SteamTools.Client.Desktop/UI/ViewModels/Pages/AboutPageViewModel.cs
 create mode 100644 System.Application.SteamTools.Client.Desktop/UI/ViewModels/Pages/DebugPageViewModel.cs
 create mode 100644 System.Application.SteamTools.Client.Desktop/UI/ViewModels/Pages/GameListPageViewModel.cs
 rename System.Application.SteamTools.Client.Desktop/UI/ViewModels/{ => Pages}/Settings/SettingsPageViewModel.cs (85%)
 create mode 100644 System.Application.SteamTools.Client.Desktop/UI/ViewModels/Pages/StartPageViewModel.cs
 create mode 100644 System.Application.SteamTools.Client.Desktop/UI/ViewModels/Pages/SteamAccountPageViewModel.cs

diff --git a/System.Application.SteamTools.Client.Desktop.Avalonia.App/App.axaml b/System.Application.SteamTools.Client.Desktop.Avalonia.App/App.axaml
index 106b3e35b..500e8e67e 100644
--- a/System.Application.SteamTools.Client.Desktop.Avalonia.App/App.axaml
+++ b/System.Application.SteamTools.Client.Desktop.Avalonia.App/App.axaml
@@ -2,20 +2,23 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:ui="clr-namespace:System.Application.UI"
              x:Class="System.Application.UI.App">
-  <Application.DataTemplates>
-    <ui:ViewLocator/>
-  </Application.DataTemplates>
-  <Application.Styles>
-    <FluentTheme Mode="Light" />
-    <StyleInclude Source="avares://System.Application.SteamTools.Client.Desktop.Avalonia/Application/UI/Styles/Styles.xaml" />
-    <StyleInclude Source="avares://System.Application.SteamTools.Client.Desktop.Avalonia/Application/UI/Styles/Controls/SideBar.xaml" />
-    <!--<StyleInclude Source="avares://AvaloniaEdit/AvaloniaEdit.xaml"/>-->
-    <Style Selector="Window">
-      <Setter Property="Icon" Value="avares://System.Application.SteamTools.Client.Desktop.Avalonia/Application/UI/Assets/Icon.ico"/>
-    </Style>
-  </Application.Styles>
-  <!-- (NativeMenu.Menu) https://github.com/AvaloniaUI/Avalonia/issues/3541 -->
-  <!--<NativeMenu.Menu>
+    <Application.DataTemplates>
+        <ui:ViewLocator/>
+    </Application.DataTemplates>
+    <Application.Styles>
+        <!--<FluentTheme Mode="Light" />-->
+        <StyleInclude Source="avares://Avalonia.Themes.Default/DefaultTheme.xaml" />
+        <StyleInclude Source="avares://Avalonia.Themes.Default/Accents/BaseDark.xaml" />
+        <StyleInclude Source="avares://Avalonia.Themes.Fluent/FluentDark.xaml" />
+        <StyleInclude Source="avares://System.Application.SteamTools.Client.Desktop.Avalonia/Application/UI/Styles/Styles.xaml" />
+        <StyleInclude Source="avares://System.Application.SteamTools.Client.Desktop.Avalonia/Application/UI/Styles/Controls/SideBar.xaml" />
+        <!--<StyleInclude Source="avares://AvaloniaEdit/AvaloniaEdit.xaml"/>-->
+        <Style Selector="Window">
+            <Setter Property="Icon" Value="avares://System.Application.SteamTools.Client.Desktop.Avalonia/Application/UI/Assets/Icon.ico"/>
+        </Style>
+    </Application.Styles>
+    <!-- (NativeMenu.Menu) https://github.com/AvaloniaUI/Avalonia/issues/3541 -->
+    <!--<NativeMenu.Menu>
     <NativeMenu>
       <NativeMenuItem Header="About My App" Command="{Binding AboutCommand}" />
     </NativeMenu>
diff --git a/System.Application.SteamTools.Client.Desktop.Avalonia.App/Views/MainWindow.axaml b/System.Application.SteamTools.Client.Desktop.Avalonia.App/Views/MainWindow.axaml
index b375296cb..f62482591 100644
--- a/System.Application.SteamTools.Client.Desktop.Avalonia.App/Views/MainWindow.axaml
+++ b/System.Application.SteamTools.Client.Desktop.Avalonia.App/Views/MainWindow.axaml
@@ -1,6 +1,5 @@
 <FluentWindow xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        xmlns:vm="clr-namespace:System.Application.UI.ViewModels;assembly=System.Application.SteamTools.Client.Desktop"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         mc:Ignorable="d"
@@ -20,9 +19,6 @@
       <Setter Property="Background" Value="{DynamicResource ThemeBackgroundBrush}" />
     </Style>
   </FluentWindow.Styles>
-  <Design.DataContext>
-    <vm:MainWindowViewModel/>
-  </Design.DataContext>
 
   <Panel Margin="{Binding #MainWindow.OffScreenMargin}">
     <local:MainView />
diff --git a/System.Application.SteamTools.Client.Desktop.Avalonia.App/Views/MainWindow.axaml.cs b/System.Application.SteamTools.Client.Desktop.Avalonia.App/Views/MainWindow.axaml.cs
index d9a163ad7..8fd31f1b3 100644
--- a/System.Application.SteamTools.Client.Desktop.Avalonia.App/Views/MainWindow.axaml.cs
+++ b/System.Application.SteamTools.Client.Desktop.Avalonia.App/Views/MainWindow.axaml.cs
@@ -21,7 +21,7 @@ namespace System.Application.UI.Views
             InitializeComponent();
 #if DEBUG
             this.AttachDevTools();
-#endif
+#endif 
         }
 
         protected override void OnClosing(CancelEventArgs e)
diff --git a/System.Application.SteamTools.Client.Desktop.Avalonia/Application/UI/MainView.axaml b/System.Application.SteamTools.Client.Desktop.Avalonia/Application/UI/MainView.axaml
index 70de8fb30..a275ce8d1 100644
--- a/System.Application.SteamTools.Client.Desktop.Avalonia/Application/UI/MainView.axaml
+++ b/System.Application.SteamTools.Client.Desktop.Avalonia/Application/UI/MainView.axaml
@@ -19,7 +19,6 @@
                 <ExperimentalAcrylicBorder.Material>
                     <ExperimentalAcrylicMaterial TintColor="black" MaterialOpacity="0.85" TintOpacity="1"/>
                 </ExperimentalAcrylicBorder.Material>
-                <!--<AutoCompleteBox HorizontalAlignment="Stretch" Margin="20 40 20 0" Watermark="Search" Items="{Binding SearchItems}" />-->
                 <StackPanel IsHitTestVisible="False" Orientation="Horizontal" HorizontalAlignment="Center" Height="110" VerticalAlignment="Top">
                     <Image IsHitTestVisible="False" Source="/Application/UI/Assets/Icon.ico" Height="64" Width="64" VerticalAlignment="Center" Margin="-8,0,0,0"/>
                     <Label IsHitTestVisible="False" Content="{Binding Path=Title}" VerticalContentAlignment="Center" FontSize="20" Margin="8,0,0,0"/>
@@ -29,12 +28,43 @@
                 <ExperimentalAcrylicBorder.Material>
                     <ExperimentalAcrylicMaterial TintColor="{DynamicResource ThemeBackgroundBrush}" MaterialOpacity="0.85" TintOpacity="1"/>
                 </ExperimentalAcrylicBorder.Material>
-                <Label Content="{ReflectionBinding #TabControl.SelectedItem.Header}" Margin="20 15" FontSize="32"/>
+                <Label Content="{ReflectionBinding #TabControl.SelectedItem.Name}" Margin="20 10" FontSize="32"/>
             </ExperimentalAcrylicBorder>
         </DockPanel>
-
-        <TabControl x:Name="TabControl" Classes="sidebar" Margin="0 40 0 0">
-            <TabItem Header="{Binding Path=Res.Welcome,Mode=OneWay,Source={x:Static resx:R.Current}}" VerticalContentAlignment="Center">
+        <TabControl x:Name="TabControl"
+                    Items="{Binding TabItems}"
+                    SelectedItem="{Binding SelectedItem}"
+                    Classes="sidebar"
+                    Margin="0 40 0 0">
+            <TabControl.DataTemplates>
+                <DataTemplate DataType="vm:DebugPageViewModel">
+                    <pages:DebugPage/>
+                </DataTemplate>
+                <DataTemplate DataType="vm:AboutPageViewModel">
+                    <pages:AboutPage />
+                </DataTemplate>
+                <DataTemplate DataType="vm:SettingsPageViewModel">
+                    <pages:SettingsPage />
+                </DataTemplate>
+                <DataTemplate DataType="vm:StartPageViewModel">
+                    <pages:StartPage />
+                </DataTemplate>
+                <DataTemplate DataType="vm:SteamAccountPageViewModel">
+                    <pages:SteamAccountPage />
+                </DataTemplate>
+                <DataTemplate DataType="vm:GameListPageViewModel">
+                    <pages:GameListPage />
+                </DataTemplate>
+            </TabControl.DataTemplates>
+            <TabControl.ItemTemplate>
+                <DataTemplate>
+                    <TextBlock Text="{Binding Name}">
+                    </TextBlock>
+                </DataTemplate>
+            </TabControl.ItemTemplate>
+        </TabControl>
+        <!--<TabControl x:Name="TabControl" Classes="sidebar" Margin="0 30 0 0">
+            <TabItem Header="{Binding Path=Res.Welcome,Mode=OneWay,Source={x:Static resx:R.Current}}" VerticalContentAlignment="Center" Margin="0 10 0 0">
               <controls:CardView></controls:CardView>
             </TabItem>
             <TabItem Header="{Binding Path=Res.CommunityFix,Mode=OneWay,Source={x:Static resx:R.Current}}">
@@ -54,7 +84,11 @@
                 <pages:SettingsPage />
             </TabItem>
             <TabItem Header="{Binding Path=Res.About,Source={x:Static resx:R.Current}}">
+                <pages:AboutPage />
             </TabItem>
-        </TabControl>
+            <TabItem Header="Debug">
+                <pages:DebugPage />
+            </TabItem>
+        </TabControl>-->
     </Grid>
 </UserControl>
\ No newline at end of file
diff --git a/System.Application.SteamTools.Client.Desktop.Avalonia/Application/UI/Pages/About/About_OpenSourcePage.axaml b/System.Application.SteamTools.Client.Desktop.Avalonia/Application/UI/Pages/About/About_OpenSourcePage.axaml
new file mode 100644
index 000000000..16fccc462
--- /dev/null
+++ b/System.Application.SteamTools.Client.Desktop.Avalonia/Application/UI/Pages/About/About_OpenSourcePage.axaml
@@ -0,0 +1,17 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:vm="clr-namespace:System.Application.UI.ViewModels;assembly=System.Application.SteamTools.Client.Desktop"
+             xmlns:resx="clr-namespace:System.Application.UI.Resx;assembly=System.Application.SteamTools.Client.Desktop"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="System.Application.UI.Views.Pages.About_OpenSourcePage">
+	<Design.DataContext>
+		<vm:MainWindowViewModel/>
+	</Design.DataContext>
+	<StackPanel HorizontalAlignment="Stretch" Margin="{StaticResource PageMargin}" Background="Transparent" Spacing="20">
+        <TextBlock Text="">
+            
+        </TextBlock>
+	</StackPanel>
+</UserControl>
\ No newline at end of file
diff --git a/System.Application.SteamTools.Client.Desktop.Avalonia/Application/UI/Pages/About/About_OpenSourcePage.axaml.cs b/System.Application.SteamTools.Client.Desktop.Avalonia/Application/UI/Pages/About/About_OpenSourcePage.axaml.cs
new file mode 100644
index 000000000..082aa0a5e
--- /dev/null
+++ b/System.Application.SteamTools.Client.Desktop.Avalonia/Application/UI/Pages/About/About_OpenSourcePage.axaml.cs
@@ -0,0 +1,19 @@
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+using System.Application.UI.ViewModels;
+
+namespace System.Application.UI.Views.Pages
+{
+    public class About_OpenSourcePage : UserControl
+    {
+        public About_OpenSourcePage()
+        {
+            InitializeComponent();
+        }
+
+        private void InitializeComponent()
+        {
+            AvaloniaXamlLoader.Load(this);
+        }
+    }
+}
\ No newline at end of file
diff --git a/System.Application.SteamTools.Client.Desktop.Avalonia/Application/UI/Pages/AboutPage.axaml b/System.Application.SteamTools.Client.Desktop.Avalonia/Application/UI/Pages/AboutPage.axaml
new file mode 100644
index 000000000..4f88b59a0
--- /dev/null
+++ b/System.Application.SteamTools.Client.Desktop.Avalonia/Application/UI/Pages/AboutPage.axaml
@@ -0,0 +1,20 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:vm="clr-namespace:System.Application.UI.ViewModels;assembly=System.Application.SteamTools.Client.Desktop"
+             xmlns:resx="clr-namespace:System.Application.UI.Resx;assembly=System.Application.SteamTools.Client.Desktop"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             mc:Ignorable="d" 
+             d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="System.Application.UI.Views.Pages.AboutPage">
+	<StackPanel Margin="{StaticResource PageMargin}">
+        <TabControl>
+            <TabItem Header="{Binding Path=Res.CommunityFix,Mode=OneWay,Source={x:Static resx:R.Current}}">
+            </TabItem>
+            <TabItem Header="{Binding Path=Res.CommunityFix,Mode=OneWay,Source={x:Static resx:R.Current}}">
+            </TabItem>
+            <TabItem Header="{Binding Path=Res.CommunityFix,Mode=OneWay,Source={x:Static resx:R.Current}}">
+            </TabItem>
+        </TabControl>
+	</StackPanel>
+</UserControl>
\ No newline at end of file
diff --git a/System.Application.SteamTools.Client.Desktop.Avalonia/Application/UI/Pages/AboutPage.axaml.cs b/System.Application.SteamTools.Client.Desktop.Avalonia/Application/UI/Pages/AboutPage.axaml.cs
new file mode 100644
index 000000000..3de829b00
--- /dev/null
+++ b/System.Application.SteamTools.Client.Desktop.Avalonia/Application/UI/Pages/AboutPage.axaml.cs
@@ -0,0 +1,19 @@
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+using System.Application.UI.ViewModels;
+
+namespace System.Application.UI.Views.Pages
+{
+    public class AboutPage : UserControl
+    {
+        public AboutPage()
+        {
+            InitializeComponent();
+        }
+
+        private void InitializeComponent()
+        {
+            AvaloniaXamlLoader.Load(this);
+        }
+    }
+}
\ No newline at end of file
diff --git a/System.Application.SteamTools.Client.Desktop.Avalonia/Application/UI/Pages/DebugPage.axaml b/System.Application.SteamTools.Client.Desktop.Avalonia/Application/UI/Pages/DebugPage.axaml
new file mode 100644
index 000000000..d8be1c724
--- /dev/null
+++ b/System.Application.SteamTools.Client.Desktop.Avalonia/Application/UI/Pages/DebugPage.axaml
@@ -0,0 +1,14 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:vm="clr-namespace:System.Application.UI.ViewModels;assembly=System.Application.SteamTools.Client.Desktop"
+             xmlns:resx="clr-namespace:System.Application.UI.Resx;assembly=System.Application.SteamTools.Client.Desktop"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             mc:Ignorable="d" 
+             d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="System.Application.UI.Views.Pages.DebugPage">
+	<Grid RowDefinitions="*,Auto">
+        <TextBox Grid.Row="0" Text="{Binding DebugString}"></TextBox>
+        <Button Grid.Row="1" Height="35" MinWidth="200" Content="Debug Button" Command="{Binding DebugButton_Click}"></Button>
+	</Grid>
+</UserControl>
\ No newline at end of file
diff --git a/System.Application.SteamTools.Client.Desktop.Avalonia/Application/UI/Pages/DebugPage.axaml.cs b/System.Application.SteamTools.Client.Desktop.Avalonia/Application/UI/Pages/DebugPage.axaml.cs
new file mode 100644
index 000000000..94891a1c2
--- /dev/null
+++ b/System.Application.SteamTools.Client.Desktop.Avalonia/Application/UI/Pages/DebugPage.axaml.cs
@@ -0,0 +1,19 @@
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+using System.Application.UI.ViewModels;
+
+namespace System.Application.UI.Views.Pages
+{
+    public class DebugPage : UserControl
+    {
+        public DebugPage()
+        {
+            InitializeComponent();
+        }
+
+        private void InitializeComponent()
+        {
+            AvaloniaXamlLoader.Load(this);
+        }
+    }
+}
\ No newline at end of file
diff --git a/System.Application.SteamTools.Client.Desktop.Avalonia/Application/UI/Pages/StartPage.axaml b/System.Application.SteamTools.Client.Desktop.Avalonia/Application/UI/Pages/StartPage.axaml
new file mode 100644
index 000000000..f04904149
--- /dev/null
+++ b/System.Application.SteamTools.Client.Desktop.Avalonia/Application/UI/Pages/StartPage.axaml
@@ -0,0 +1,17 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:vm="clr-namespace:System.Application.UI.ViewModels;assembly=System.Application.SteamTools.Client.Desktop"
+             xmlns:resx="clr-namespace:System.Application.UI.Resx;assembly=System.Application.SteamTools.Client.Desktop"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="System.Application.UI.Views.Pages.StartPage">
+	<Design.DataContext>
+		<vm:MainWindowViewModel/>
+	</Design.DataContext>
+	<StackPanel HorizontalAlignment="Stretch" Margin="{StaticResource PageMargin}" Background="Transparent" Spacing="20">
+		<Grid ColumnDefinitions="Auto,Auto">
+        
+		</Grid>
+	</StackPanel>
+</UserControl>
\ No newline at end of file
diff --git a/System.Application.SteamTools.Client.Desktop.Avalonia/Application/UI/Pages/StartPage.axaml.cs b/System.Application.SteamTools.Client.Desktop.Avalonia/Application/UI/Pages/StartPage.axaml.cs
new file mode 100644
index 000000000..4204ca89c
--- /dev/null
+++ b/System.Application.SteamTools.Client.Desktop.Avalonia/Application/UI/Pages/StartPage.axaml.cs
@@ -0,0 +1,19 @@
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+using System.Application.UI.ViewModels;
+
+namespace System.Application.UI.Views.Pages
+{
+    public class StartPage : UserControl
+    {
+        public StartPage()
+        {
+            InitializeComponent();
+        }
+
+        private void InitializeComponent()
+        {
+            AvaloniaXamlLoader.Load(this);
+        }
+    }
+}
\ No newline at end of file
diff --git a/System.Application.SteamTools.Client.Desktop.Avalonia/System.Application.SteamTools.Client.Desktop.Avalonia.csproj b/System.Application.SteamTools.Client.Desktop.Avalonia/System.Application.SteamTools.Client.Desktop.Avalonia.csproj
index f118b97c9..f70d3f0b6 100644
--- a/System.Application.SteamTools.Client.Desktop.Avalonia/System.Application.SteamTools.Client.Desktop.Avalonia.csproj
+++ b/System.Application.SteamTools.Client.Desktop.Avalonia/System.Application.SteamTools.Client.Desktop.Avalonia.csproj
@@ -61,9 +61,21 @@
   </ItemGroup>
 
   <ItemGroup>
+    <Compile Update="Application\UI\Pages\About\About_OpenSourcePage.axaml.cs">
+      <DependentUpon>About_OpenSourcePage.axaml</DependentUpon>
+    </Compile>
+    <Compile Update="Application\UI\Pages\AboutPage.axaml.cs">
+      <DependentUpon>AboutPage.axaml</DependentUpon>
+    </Compile>
     <Compile Update="Application\UI\Pages\GameListPage.axaml.cs">
       <DependentUpon>GameListPage.axaml</DependentUpon>
     </Compile>
+    <Compile Update="Application\UI\Pages\DebugPage.axaml.cs">
+      <DependentUpon>DebugPage.axaml</DependentUpon>
+    </Compile>
+    <Compile Update="Application\UI\Pages\StartPage.axaml.cs">
+      <DependentUpon>StartPage.axaml</DependentUpon>
+    </Compile>
     <Compile Update="Application\UI\Pages\SteamAccountPage.axaml.cs">
       <DependentUpon>SteamAccountPage.axaml</DependentUpon>
     </Compile>
diff --git a/System.Application.SteamTools.Client.Desktop/Extensions/ViewModelExtensions.cs b/System.Application.SteamTools.Client.Desktop/Extensions/ViewModelExtensions.cs
new file mode 100644
index 000000000..6db13e749
--- /dev/null
+++ b/System.Application.SteamTools.Client.Desktop/Extensions/ViewModelExtensions.cs
@@ -0,0 +1,22 @@
+using System.Application.UI.ViewModels;
+
+namespace System.Application
+{
+    public static class ViewModelExtensions
+    {
+        /// <summary>
+        /// <see cref="IDisposable"/> 将对象添加到<see cref="ViewModelBase"/> 的<see cref="ViewModelBase.CompositeDisposable"/>中
+        /// </summary>
+        public static T AddTo<T>(this T disposable, ViewModelBase vm) where T : IDisposable
+        {
+            if (vm == null)
+            {
+                disposable.Dispose();
+                return disposable;
+            }
+
+            vm.CompositeDisposable.Add(disposable);
+            return disposable;
+        }
+    }
+}
diff --git a/System.Application.SteamTools.Client.Desktop/System.Application.SteamTools.Client.Desktop.csproj b/System.Application.SteamTools.Client.Desktop/System.Application.SteamTools.Client.Desktop.csproj
index 1a9e4c660..d15be75d7 100644
--- a/System.Application.SteamTools.Client.Desktop/System.Application.SteamTools.Client.Desktop.csproj
+++ b/System.Application.SteamTools.Client.Desktop/System.Application.SteamTools.Client.Desktop.csproj
@@ -61,6 +61,12 @@
     </None>
   </ItemGroup>
 
+  <ItemGroup>
+        <None Update="Scripts\*.js">
+            <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+        </None>
+  </ItemGroup>
+
   <ItemGroup>
     <Folder Include="UI\ViewModels\Pages\" />
     <Folder Include="UI\ViewModels\Windows\" />
diff --git a/System.Application.SteamTools.Client.Desktop/UI/ViewModels/Base/ItemViewModel.cs b/System.Application.SteamTools.Client.Desktop/UI/ViewModels/Base/ItemViewModel.cs
new file mode 100644
index 000000000..b3f1a9d60
--- /dev/null
+++ b/System.Application.SteamTools.Client.Desktop/UI/ViewModels/Base/ItemViewModel.cs
@@ -0,0 +1,31 @@
+using ReactiveUI;
+
+namespace System.Application.UI.ViewModels
+{
+    public class ItemViewModel : ViewModelBase
+    {
+        #region IsSelected 変更通知
+
+        private bool _IsSelected;
+
+        public virtual bool IsSelected
+        {
+            get => _IsSelected;
+            set => this.RaiseAndSetIfChanged(ref _IsSelected, value);
+        }
+
+        #endregion
+
+        #region IsShowTab 変更通知
+
+        private bool _IsShowTab = true;
+
+        public virtual bool IsShowTab
+        {
+            get => _IsShowTab;
+            set => this.RaiseAndSetIfChanged(ref _IsShowTab, value);
+        }
+
+        #endregion
+    }
+}
diff --git a/System.Application.SteamTools.Client.Desktop/UI/ViewModels/Base/TabItemViewModel.cs b/System.Application.SteamTools.Client.Desktop/UI/ViewModels/Base/TabItemViewModel.cs
new file mode 100644
index 000000000..436ad82eb
--- /dev/null
+++ b/System.Application.SteamTools.Client.Desktop/UI/ViewModels/Base/TabItemViewModel.cs
@@ -0,0 +1,59 @@
+using ReactiveUI;
+using StatefulModel.EventListeners;
+using System.Application.UI.Resx;
+using System.Threading.Tasks;
+
+namespace System.Application.UI.ViewModels
+{
+    public abstract class TabItemViewModel : ItemViewModel
+    {
+        #region Name 変更通知
+
+        public abstract string Name { get; protected set; }
+
+        #endregion
+
+        #region Badge 変更通知
+
+        private int? _Badge;
+
+        public virtual int? Badge
+        {
+            get => _Badge;
+            protected set => this.RaiseAndSetIfChanged(ref _Badge, value);
+        }
+
+        #endregion
+
+        #region Status 変更通知
+
+        private ViewModelBase? _Status;
+
+        /// <summary>
+        /// 获取状态栏中显示的状态
+        /// </summary>
+        public virtual ViewModelBase? Status
+        {
+            get => _Status;
+            protected set => this.RaiseAndSetIfChanged(ref _Status, value);
+        }
+
+        #endregion
+
+        protected TabItemViewModel()
+        {
+            if (IsInDesignMode) return;
+
+            this.CompositeDisposable?.Add(new PropertyChangedEventListener(R.Current)
+            {
+                (sender, args) => this.RaisePropertyChanged(nameof(this.Name)),
+            });
+        }
+
+
+        internal async virtual Task Initialize()
+        {
+            await Task.CompletedTask;
+        }
+    }
+}
diff --git a/System.Application.SteamTools.Client.Desktop/UI/ViewModels/Base/ViewModelBase.cs b/System.Application.SteamTools.Client.Desktop/UI/ViewModels/Base/ViewModelBase.cs
index 372e04b2c..f74f5a32e 100644
--- a/System.Application.SteamTools.Client.Desktop/UI/ViewModels/Base/ViewModelBase.cs
+++ b/System.Application.SteamTools.Client.Desktop/UI/ViewModels/Base/ViewModelBase.cs
@@ -5,7 +5,18 @@ namespace System.Application.UI.ViewModels
 {
     public class ViewModelBase : ReactiveObject, IDisposable
     {
-        [NonSerialized] CompositeDisposable? _compositeDisposable;
+        [NonSerialized] private CompositeDisposable? _compositeDisposable = new CompositeDisposable();
+        public CompositeDisposable? CompositeDisposable
+        {
+            get => _compositeDisposable;
+            set
+            {
+                if (_compositeDisposable != value)
+                {
+                    _compositeDisposable = value;
+                }
+            }
+        }
 
         [NonSerialized] bool _disposed;
 
@@ -14,6 +25,7 @@ namespace System.Application.UI.ViewModels
         /// </summary>
         public static bool IsInDesignMode { get; set; }
 
+
         /// <summary>
         /// 释放该实例使用的所有资源
         /// </summary>
@@ -26,7 +38,7 @@ namespace System.Application.UI.ViewModels
         protected virtual void Dispose(bool disposing)
         {
             if (_disposed) return;
-            if (disposing) _compositeDisposable?.Dispose();
+            if (disposing) CompositeDisposable?.Dispose();
             _disposed = true;
         }
     }
diff --git a/System.Application.SteamTools.Client.Desktop/UI/ViewModels/Base/WindowViewModel.cs b/System.Application.SteamTools.Client.Desktop/UI/ViewModels/Base/WindowViewModel.cs
index 91526b803..fed8ec87a 100644
--- a/System.Application.SteamTools.Client.Desktop/UI/ViewModels/Base/WindowViewModel.cs
+++ b/System.Application.SteamTools.Client.Desktop/UI/ViewModels/Base/WindowViewModel.cs
@@ -11,5 +11,10 @@ namespace System.Application.UI.ViewModels
             get => title;
             set => this.RaiseAndSetIfChanged(ref title, value);
         }
+
+        protected void InvokeOnUIDispatcher(Action action)
+        {
+            MainThreadDesktop.BeginInvokeOnMainThread(action);
+        }
     }
 }
\ No newline at end of file
diff --git a/System.Application.SteamTools.Client.Desktop/UI/ViewModels/MainWindowViewModel.cs b/System.Application.SteamTools.Client.Desktop/UI/ViewModels/MainWindowViewModel.cs
index 4d3ddb2f1..c46195daf 100644
--- a/System.Application.SteamTools.Client.Desktop/UI/ViewModels/MainWindowViewModel.cs
+++ b/System.Application.SteamTools.Client.Desktop/UI/ViewModels/MainWindowViewModel.cs
@@ -9,20 +9,55 @@ namespace System.Application.UI.ViewModels
 {
     public class MainWindowViewModel : WindowViewModel
     {
-        bool mTopmost;
+        #region 更改通知
 
+        bool mTopmost;
         public bool Topmost
         {
             get => mTopmost;
             set => this.RaiseAndSetIfChanged(ref mTopmost, value);
         }
-        public SettingsPageViewModel SettingsPage { get; }
+
+        private TabItemViewModel _SelectedItem;
+        public TabItemViewModel SelectedItem
+        {
+            get => _SelectedItem;
+            set => this.RaiseAndSetIfChanged(ref _SelectedItem, value);
+        }
+
+        #endregion
+
+        public StartPageViewModel StartPage { get; }
+        public GameListPageViewModel GameListPage { get; }
+        public SteamAccountPageViewModel SteamAccountPage { get; }
+
+
+        public IList<TabItemViewModel> TabItems { get; set; }
+
 
 
         public MainWindowViewModel() : base()
         {
             Title = ThisAssembly.AssemblyTrademark;
-            SettingsPage = new SettingsPageViewModel();
+
+            this.TabItems = new List<TabItemViewModel>
+            {
+                (this.StartPage = new StartPageViewModel().AddTo(this)),
+                (this.SteamAccountPage = new SteamAccountPageViewModel().AddTo(this)),
+                (this.GameListPage = new GameListPageViewModel().AddTo(this)),
+
+
+                
+				#region SystemTab
+                SettingsPageViewModel.Instance,
+                AboutPageViewModel.Instance,
+#if DEBUG
+				new DebugPageViewModel().AddTo(this),
+#endif
+				#endregion
+            };
+
+            this.SelectedItem = this.TabItems.First();
         }
     }
 }
diff --git a/System.Application.SteamTools.Client.Desktop/UI/ViewModels/Pages/AboutPageViewModel.cs b/System.Application.SteamTools.Client.Desktop/UI/ViewModels/Pages/AboutPageViewModel.cs
new file mode 100644
index 000000000..d28240b7b
--- /dev/null
+++ b/System.Application.SteamTools.Client.Desktop/UI/ViewModels/Pages/AboutPageViewModel.cs
@@ -0,0 +1,16 @@
+using System.Application.UI.Resx;
+
+namespace System.Application.UI.ViewModels
+{
+    public class AboutPageViewModel : TabItemViewModel
+    {
+        public static AboutPageViewModel Instance { get; } = new AboutPageViewModel();
+
+        public override string Name
+        {
+            get => AppResources.About;
+            protected set { throw new NotImplementedException(); }
+        }
+
+    }
+}
diff --git a/System.Application.SteamTools.Client.Desktop/UI/ViewModels/Pages/DebugPageViewModel.cs b/System.Application.SteamTools.Client.Desktop/UI/ViewModels/Pages/DebugPageViewModel.cs
new file mode 100644
index 000000000..547bbf47f
--- /dev/null
+++ b/System.Application.SteamTools.Client.Desktop/UI/ViewModels/Pages/DebugPageViewModel.cs
@@ -0,0 +1,33 @@
+using ReactiveUI;
+using System.Application.UI.Resx;
+using System.Collections.Generic;
+using System.Linq;
+
+namespace System.Application.UI.ViewModels
+{
+    public class DebugPageViewModel : TabItemViewModel
+    {
+        public override string Name
+        {
+            get => "Debug";
+            protected set { throw new NotImplementedException(); }
+        }
+
+        private string _DebugString = string.Empty;
+        public string DebugString
+        {
+            get => _DebugString;
+            protected set => this.RaiseAndSetIfChanged(ref _DebugString, value);
+        }
+
+        public DebugPageViewModel()
+        {
+
+        }
+
+        public void DebugButton_Click()
+        {
+            DebugString += "Test Command" + Environment.NewLine;
+        }
+    }
+}
\ No newline at end of file
diff --git a/System.Application.SteamTools.Client.Desktop/UI/ViewModels/Pages/GameListPageViewModel.cs b/System.Application.SteamTools.Client.Desktop/UI/ViewModels/Pages/GameListPageViewModel.cs
new file mode 100644
index 000000000..f4844436a
--- /dev/null
+++ b/System.Application.SteamTools.Client.Desktop/UI/ViewModels/Pages/GameListPageViewModel.cs
@@ -0,0 +1,14 @@
+using System.Application.UI.Resx;
+
+namespace System.Application.UI.ViewModels
+{
+    public class GameListPageViewModel : TabItemViewModel
+    {
+        public override string Name
+        {
+            get => AppResources.GameList;
+            protected set { throw new NotImplementedException(); }
+        }
+
+    }
+}
diff --git a/System.Application.SteamTools.Client.Desktop/UI/ViewModels/Settings/SettingsPageViewModel.cs b/System.Application.SteamTools.Client.Desktop/UI/ViewModels/Pages/Settings/SettingsPageViewModel.cs
similarity index 85%
rename from System.Application.SteamTools.Client.Desktop/UI/ViewModels/Settings/SettingsPageViewModel.cs
rename to System.Application.SteamTools.Client.Desktop/UI/ViewModels/Pages/Settings/SettingsPageViewModel.cs
index d178893f4..de24f7ebb 100644
--- a/System.Application.SteamTools.Client.Desktop/UI/ViewModels/Settings/SettingsPageViewModel.cs
+++ b/System.Application.SteamTools.Client.Desktop/UI/ViewModels/Pages/Settings/SettingsPageViewModel.cs
@@ -5,8 +5,16 @@ using System.Linq;
 
 namespace System.Application.UI.ViewModels
 {
-    public class SettingsPageViewModel : ViewModelBase
+    public class SettingsPageViewModel : TabItemViewModel
     {
+        public static SettingsPageViewModel Instance { get; } = new SettingsPageViewModel();
+
+        public override string Name
+        {
+            get => AppResources.Settings;
+            protected set { throw new NotImplementedException(); }
+        }
+
         public SettingsPageViewModel()
         {
             //Languages = R.Languages.Select(Convert).ToList();
diff --git a/System.Application.SteamTools.Client.Desktop/UI/ViewModels/Pages/StartPageViewModel.cs b/System.Application.SteamTools.Client.Desktop/UI/ViewModels/Pages/StartPageViewModel.cs
new file mode 100644
index 000000000..e3e992d12
--- /dev/null
+++ b/System.Application.SteamTools.Client.Desktop/UI/ViewModels/Pages/StartPageViewModel.cs
@@ -0,0 +1,14 @@
+using System.Application.UI.Resx;
+
+namespace System.Application.UI.ViewModels
+{
+    public class StartPageViewModel : TabItemViewModel
+    {
+        public override string Name
+        {
+            get => AppResources.Welcome;
+            protected set { throw new NotImplementedException(); }
+        }
+
+    }
+}
diff --git a/System.Application.SteamTools.Client.Desktop/UI/ViewModels/Pages/SteamAccountPageViewModel.cs b/System.Application.SteamTools.Client.Desktop/UI/ViewModels/Pages/SteamAccountPageViewModel.cs
new file mode 100644
index 000000000..c993e56b6
--- /dev/null
+++ b/System.Application.SteamTools.Client.Desktop/UI/ViewModels/Pages/SteamAccountPageViewModel.cs
@@ -0,0 +1,14 @@
+using System.Application.UI.Resx;
+
+namespace System.Application.UI.ViewModels
+{
+    public class SteamAccountPageViewModel : TabItemViewModel
+    {
+        public override string Name
+        {
+            get => AppResources.UserFastChange;
+            protected set { throw new NotImplementedException(); }
+        }
+
+    }
+}