From 6ec2a804ba0271b70db6e425695f055a3a3a4903 Mon Sep 17 00:00:00 2001 From: jackqqq123 <1175861874@qq.com> Date: Wed, 24 Sep 2025 03:14:25 +0800 Subject: [PATCH] =?UTF-8?q?=E7=AC=AC=E4=B8=80=E7=89=88=E9=A1=B5=E9=9D=A2?= =?UTF-8?q?=E8=AE=BE=E8=AE=A1=EF=BC=9B=E5=AE=9E=E7=8E=B0=E4=B8=BB=E9=A2=98?= =?UTF-8?q?=E5=88=87=E6=8D=A2=EF=BC=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/instructions/prompt.instructions.md | 61 ++++- design/页面设计.md | 17 ++ src/LubanHub.App/App.axaml | 3 + src/LubanHub.App/App.axaml.cs | 34 ++- src/LubanHub.App/MainWindow.axaml | 260 +++++++++++++++++++- src/LubanHub.App/MainWindow.axaml.cs | 122 +++++++++ src/LubanHub.App/Program.cs | 21 +- src/LubanHub.App/Services/ThemeManager.cs | 71 ++++++ src/LubanHub.App/Themes/DarkTheme.axaml | 72 ++++++ src/LubanHub.App/Themes/LightTheme.axaml | 72 ++++++ src/LubanHub.App/Themes/Styles.axaml | 249 +++++++++++++++++++ 11 files changed, 971 insertions(+), 11 deletions(-) create mode 100644 design/页面设计.md create mode 100644 src/LubanHub.App/Services/ThemeManager.cs create mode 100644 src/LubanHub.App/Themes/DarkTheme.axaml create mode 100644 src/LubanHub.App/Themes/LightTheme.axaml create mode 100644 src/LubanHub.App/Themes/Styles.axaml diff --git a/.github/instructions/prompt.instructions.md b/.github/instructions/prompt.instructions.md index 576cbe0..d0b9ea2 100644 --- a/.github/instructions/prompt.instructions.md +++ b/.github/instructions/prompt.instructions.md @@ -2,4 +2,63 @@ applyTo: '**' --- - 说中文 -- 这是一个基于electron的项目管理工程,目标是让非程序员也能轻松使用luban管理配置表。 \ No newline at end of file +- 这是一个基于Avalonia的项目管理工程,目标是让非程序员也能轻松使用luban管理配置表。 + +## UI设计规范 + +### 🎨 主题兼容性 +- **深色模式支持**: 所有UI元素必须在深色主题下清晰可见,具有足够的对比度 +- **浅色模式支持**: 所有UI元素必须在浅色主题下保持良好的可读性和视觉效果 +- **动态主题切换**: 使用DynamicResource绑定,支持运行时主题切换 +- **颜色资源化**: 避免硬编码颜色值,统一使用主题资源字典中的颜色定义 + +### 🎯 交互状态设计 +- **主要操作按钮**: 使用主题蓝色系,在两种模式下都要突出显示 +- **成功/确认状态**: 使用绿色系,表示积极操作 +- **警告状态**: 使用黄色系,提醒用户注意 +- **错误/删除状态**: 使用红色系,表示危险操作 +- **悬停和按下状态**: 提供清晰的视觉反馈,确保在两种主题下都有足够的对比度 + +### 📝 文字层级 +- **主要文字**: 使用主题的主要文字颜色,确保最佳可读性 +- **次要文字**: 使用稍浅的颜色,但仍保持良好的可读性 +- **占位符文字**: 使用更浅的颜色,明确区分占位符和实际内容 +- **禁用文字**: 使用最浅的颜色,明确表示不可用状态 + +### 🔘 圆角规范 +- **按钮圆角**: `4px` +- **输入框圆角**: `4px` +- **卡片圆角**: `5px` +- **列表项圆角**: `3px` + +### 📏 间距规范 +- **小间距**: `5px` +- **标准间距**: `10px` +- **中等间距**: `15px` +- **大间距**: `20px` +- **页面边距**: `20px` +- **按钮内边距**: 水平`15px` 垂直`8px` +- **导航按钮内边距**: 水平`20px` 垂直`15px` + +### 🎭 动画规范 +- **过渡时间**: `0.2s` (200ms) +- **缓动函数**: `ease-out` +- **支持的过渡**: 背景色、前景色、透明度 + +### 📱 组件规范 +- **导航栏宽度**: `200px` +- **最小窗口尺寸**: 宽度`1000px` 高度`600px` +- **设计尺寸**: 宽度`1200px` 高度`800px` +- **按钮最小高度**: `36px` +- **输入框最小高度**: `32px` + +### 🎪 图标使用 +- 使用Emoji作为图标: 📚📁📦📱⚙️🎮📊🔧🤖➕🔄📂🌐等 +- 图标大小: 导航按钮中正常大小,卡片中`40px` + +### 🖱️ 交互反馈 +- 所有可点击元素必须有悬停状态 +- 按钮支持按下状态反馈 +- 输入框支持焦点状态 +- 列表项支持选中和悬停状态 +- 过渡动画让交互更流畅 \ No newline at end of file diff --git a/design/页面设计.md b/design/页面设计.md new file mode 100644 index 0000000..4ddfd22 --- /dev/null +++ b/design/页面设计.md @@ -0,0 +1,17 @@ +这是我的应用主页设计, +左侧按钮依次为知识库、项目、安装 +左侧最下方是设置按钮 + +- 点击知识库右侧内容区: + - 左侧,第一行为新建会话,下面是历史会话记录 + - 右侧,没有内容时显示问答窗口,可以切换AI模型,有内容时显示会话内容 +- 点击项目管理右侧内容区: + - 顶部,导入项目、新建项目 + - 下方,项目列表 +- 点击安装鲁班右侧内容区: + - 顶部,添加本地版本,在线安装 + - 下方,鲁班版本列表 +- 点击设置,右侧内容区: + - 下载目录,用于存放下载资源 + - 主体颜色,亮色、深色跟随系统 + \ No newline at end of file diff --git a/src/LubanHub.App/App.axaml b/src/LubanHub.App/App.axaml index 97d3b23..63c7ce7 100644 --- a/src/LubanHub.App/App.axaml +++ b/src/LubanHub.App/App.axaml @@ -6,5 +6,8 @@ + + + \ No newline at end of file diff --git a/src/LubanHub.App/App.axaml.cs b/src/LubanHub.App/App.axaml.cs index efdc4da..803b3b9 100644 --- a/src/LubanHub.App/App.axaml.cs +++ b/src/LubanHub.App/App.axaml.cs @@ -1,6 +1,7 @@ using Avalonia; using Avalonia.Controls.ApplicationLifetimes; using Avalonia.Markup.Xaml; +using System; namespace LubanHub.App; @@ -8,16 +9,39 @@ public partial class App : Application { public override void Initialize() { - AvaloniaXamlLoader.Load(this); + try + { + Console.WriteLine("正在初始化应用程序..."); + AvaloniaXamlLoader.Load(this); + Console.WriteLine("XAML加载完成。"); + } + catch (Exception ex) + { + Console.WriteLine($"初始化时发生错误: {ex.Message}"); + Console.WriteLine($"详细错误信息: {ex}"); + throw; + } } public override void OnFrameworkInitializationCompleted() { - if (ApplicationLifetime is IClassicDesktopStyleApplicationLifetime desktop) + try { - desktop.MainWindow = new MainWindow(); - } + Console.WriteLine("框架初始化完成,正在创建主窗口..."); + if (ApplicationLifetime is IClassicDesktopStyleApplicationLifetime desktop) + { + desktop.MainWindow = new MainWindow(); + Console.WriteLine("主窗口已创建。"); + } - base.OnFrameworkInitializationCompleted(); + base.OnFrameworkInitializationCompleted(); + Console.WriteLine("应用程序启动完成。"); + } + catch (Exception ex) + { + Console.WriteLine($"框架初始化完成时发生错误: {ex.Message}"); + Console.WriteLine($"详细错误信息: {ex}"); + throw; + } } } \ No newline at end of file diff --git a/src/LubanHub.App/MainWindow.axaml b/src/LubanHub.App/MainWindow.axaml index 01f9a23..e3a20f5 100644 --- a/src/LubanHub.App/MainWindow.axaml +++ b/src/LubanHub.App/MainWindow.axaml @@ -2,8 +2,262 @@ 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" - mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450" + mc:Ignorable="d" d:DesignWidth="1200" d:DesignHeight="800" x:Class="LubanHub.App.MainWindow" - Title="LubanHub"> - Welcome to Avalonia! + Title="LubanHub" + MinWidth="1000" MinHeight="600"> + + + + + + + + + + + + + + + + + + + + + +