mirror of
https://github.com/wwiinnddyy/LanMountainDesktop.git
synced 2026-06-20 23:54:26 +08:00
557 lines
18 KiB
Markdown
557 lines
18 KiB
Markdown
# 橘鸦新闻组件 UI 设计文档
|
|
|
|
## 1. 数据源分析
|
|
|
|
### RSS 结构
|
|
```xml
|
|
<item>
|
|
<title>2026-03-23</title> <!-- 日期作为标题 -->
|
|
<link>https://imjuya.github.io/juya-ai-daily/issue-37/</link>
|
|
<description>AI 早报 2026-03-23 视频版...</description>
|
|
<content:encoded>
|
|
<![CDATA[
|
|
<img src="封面图片URL" alt=""> <!-- 每日封面图 -->
|
|
<h1>AI 早报 2026-03-23</h1>
|
|
<p><strong>视频版</strong>: B站链接 | YouTube链接</p>
|
|
<h2>要闻</h2>
|
|
<ul>
|
|
<li>微信正式推出ClawBot插件... #1</li>
|
|
</ul>
|
|
<h2>开发者</h2>
|
|
<ul>
|
|
<li>Claude Code 测试新功能... #2</li>
|
|
</ul>
|
|
...更多分类
|
|
]]>
|
|
</content:encoded>
|
|
<pubDate>Mon, 23 Mar 2026 00:34:38 +0000</pubDate>
|
|
</item>
|
|
```
|
|
|
|
### 推送时间规律
|
|
- **推送时间**: 每天凌晨 00:30 - 02:00 (UTC+0)
|
|
- **北京时间**: 每天上午 08:30 - 10:00
|
|
- **历史数据**: RSS包含约30天的历史数据(从2026-02-18开始)
|
|
- **更新频率**: 每日一期，一期多条新闻
|
|
|
|
### 内容结构
|
|
每期早报包含：
|
|
1. **封面图片** - 每日独特的封面图
|
|
2. **视频版链接** - B站和YouTube双平台
|
|
3. **要闻** - 2-3条重要新闻
|
|
4. **开发者** - 技术相关动态
|
|
5. **产品发布** - 新产品/功能
|
|
6. **模型发布** - AI模型更新
|
|
7. **其他分类** - 投资、开源、研究等
|
|
|
|
---
|
|
|
|
## 2. 设计理念
|
|
|
|
### 品牌调性
|
|
- **橘鸦官网风格**: 柔和、温暖、阅读友好
|
|
- **主色调**: 砖红色/陶土色 (#bb5649) - 来自官网
|
|
- **背景色**: 米白色/奶油色 (#fefefe, #f8f5ec) - 柔和不刺眼
|
|
- **文字色**: 深灰蓝 (#34495e) - 温和专业
|
|
- **视觉风格**: 简洁优雅、阅读舒适、温暖亲切
|
|
|
|
### 设计关键词
|
|
- 柔和温暖
|
|
- 阅读友好
|
|
- 优雅简洁
|
|
- 舒适护眼
|
|
- **垂直连续滚动** ← 核心交互
|
|
|
|
---
|
|
|
|
## 3. 色彩方案 (参考橘鸦官网)
|
|
|
|
### 官网色彩提取
|
|
```
|
|
官网主色 (砖红/陶土): #bb5649
|
|
官网文字: #34495e
|
|
官网背景: #fefefe
|
|
官网次要背景: #f8f5ec (米黄/奶油)
|
|
官网引用块背景: rgba(192,91,77,.05)
|
|
官网引用块边框: rgba(192,91,77,.3)
|
|
官网链接悬停: #bb5649
|
|
官网元信息: #757575
|
|
```
|
|
|
|
### 日间模式 (Light Mode) - 柔和风格
|
|
| 元素 | 颜色 | 用途 |
|
|
|-----|------|------|
|
|
| 卡片背景 | #fefefe | 主卡片底色 (官网背景色) |
|
|
| 卡片边框 | #e6e6e6 | 细微边框 |
|
|
| 品牌标题 | #bb5649 | "橘鸦" 文字 (官网主色) |
|
|
| 日期标题 | #bb5649 | 日期大标题 |
|
|
| 新闻标题 | #34495e | 新闻条目文字 |
|
|
| 分类标签 | #bb5649 | 要闻/开发者等 |
|
|
| 时间戳 | #757575 | 发布时间 |
|
|
| 悬停背景 | rgba(192,91,77,.05) | 条目悬停效果 |
|
|
| 分隔线 | #e6e6e6 | 日期分隔 |
|
|
| 加载提示 | #757575 | 加载更多提示 |
|
|
|
|
### 夜间模式 (Dark Mode) - 柔和暗色
|
|
| 元素 | 颜色 | 用途 |
|
|
|-----|------|------|
|
|
| 卡片背景 | #2d2a2a | 深暖灰 |
|
|
| 卡片边框 | #3d3a3a | 细微边框 |
|
|
| 品牌标题 | #d4736a | 柔和砖红 |
|
|
| 日期标题 | #d4736a | 日期大标题 |
|
|
| 新闻标题 | #e8e4e0 | 新闻条目文字 |
|
|
| 分类标签 | #d4736a | 要闻/开发者等 |
|
|
| 时间戳 | #9a9590 | 次要信息 |
|
|
| 悬停背景 | rgba(212,115,106,.1) | 条目悬停效果 |
|
|
| 分隔线 | #3d3a3a | 日期分隔 |
|
|
| 加载提示 | #9a9590 | 加载更多提示 |
|
|
|
|
---
|
|
|
|
## 4. 布局设计
|
|
|
|
### 组件尺寸
|
|
- **默认尺寸**: 4格宽 x 4格高
|
|
- **最小尺寸**: 4格宽 x 4格高
|
|
- **滚动方向**: 垂直滚动
|
|
|
|
### 垂直连续滚动布局
|
|
|
|
```
|
|
┌─────────────────────────────────────────┐
|
|
│ 🧱 橘鸦 · AI早报 [🔗 官网] │ ← Header (固定或随滚动)
|
|
├─────────────────────────────────────────┤
|
|
│ │
|
|
│ ┌───────────────────────────────────┐ │
|
|
│ │ 📰 封面图 2026-03-23 │ │ ← 今天的新闻
|
|
│ │ │ │
|
|
│ └───────────────────────────────────┘ │
|
|
│ │
|
|
│ # 2026年3月23日 星期一 │ ← 日期大标题
|
|
│ │
|
|
│ ## 📌 要闻 │
|
|
│ • 微信正式推出ClawBot插件... │
|
|
│ • OpenAI发布GPT-5.4预览版... │
|
|
│ │
|
|
│ ## 💻 开发者 │
|
|
│ • Claude Code测试新功能... │
|
|
│ • 阶跃星辰推出StepPlan... │
|
|
│ │
|
|
│ 📺 视频版: B站 | YouTube │
|
|
│ │
|
|
│ ───────────────────────────────────── │ ← 日期分隔线
|
|
│ │
|
|
│ ┌───────────────────────────────────┐ │
|
|
│ │ 📰 封面图 2026-03-22 │ │ ← 昨天的新闻
|
|
│ │ │ │ (往下滑动显示)
|
|
│ └───────────────────────────────────┘ │
|
|
│ │
|
|
│ # 2026年3月22日 星期日 │
|
|
│ │
|
|
│ ## 📌 要闻 │
|
|
│ • OpenAI发布GPT-5.4... │
|
|
│ • Google推出新功能... │
|
|
│ │
|
|
│ ## 💻 开发者 │
|
|
│ • Anthropic更新Claude... │
|
|
│ │
|
|
│ 📺 视频版: B站 | YouTube │
|
|
│ │
|
|
│ ───────────────────────────────────── │
|
|
│ │
|
|
│ ┌───────────────────────────────────┐ │ ← 前天的新闻
|
|
│ │ 📰 封面图 2026-03-21 │ │ (继续往下滑动)
|
|
│ │ │ │
|
|
│ └───────────────────────────────────┘ │
|
|
│ │
|
|
│ # 2026年3月21日 星期六 │
|
|
│ │
|
|
│ ... │
|
|
│ │
|
|
│ ───────────────────────────────────── │
|
|
│ │
|
|
│ 正在加载更多... ↓ │ ← 加载提示
|
|
│ │
|
|
└─────────────────────────────────────────┘
|
|
```
|
|
|
|
### 日期分隔设计
|
|
```
|
|
┌─────────────────────────────────────────┐
|
|
│ │
|
|
│ ─────────── 3月22日 星期日 ─────────── │ ← 日期分隔条
|
|
│ │
|
|
│ [昨天的新闻内容] │
|
|
│ │
|
|
└─────────────────────────────────────────┘
|
|
```
|
|
|
|
### 单期新闻结构
|
|
```
|
|
┌─────────────────────────────────────────┐
|
|
│ │
|
|
│ [封面图 - 16:9 比例] │
|
|
│ │
|
|
│ # 2026年3月23日 星期一 │ ← 日期大标题
|
|
│ │
|
|
│ ## 📌 要闻 │ ← 分类标题
|
|
│ • 新闻条目1 │
|
|
│ • 新闻条目2 │
|
|
│ │
|
|
│ ## 💻 开发者 │
|
|
│ • 新闻条目3 │
|
|
│ • 新闻条目4 │
|
|
│ │
|
|
│ ## 🚀 产品发布 │
|
|
│ • 新闻条目5 │
|
|
│ │
|
|
│ 📺 视频版: [B站] [YouTube] │ ← 视频链接
|
|
│ │
|
|
└─────────────────────────────────────────┘
|
|
```
|
|
|
|
---
|
|
|
|
## 5. 字体规范
|
|
|
|
### 字体族
|
|
```xml
|
|
FontFamily="MiSans VF, avares://LanMountainDesktop/Assets/Fonts#MiSans"
|
|
```
|
|
|
|
### 字号规范
|
|
|
|
| 元素 | 字号 | 字重 | 说明 |
|
|
|-----|------|------|------|
|
|
| 品牌标题 | 20px | SemiBold | 顶部固定标题 |
|
|
| 日期大标题 | 22px | Bold | 每期日期 |
|
|
| 分类标题 | 16px | SemiBold | 要闻/开发者等 |
|
|
| 新闻条目 | 14px | Regular | 主要阅读内容 |
|
|
| 视频链接 | 13px | Regular | 底部视频入口 |
|
|
| 加载提示 | 13px | Regular | 加载更多 |
|
|
|
|
---
|
|
|
|
## 6. 核心交互: 垂直连续滚动
|
|
|
|
### 滚动行为
|
|
```
|
|
用户往下滑动
|
|
↓
|
|
显示今天的新闻内容
|
|
↓
|
|
继续往下滑动
|
|
↓
|
|
显示日期分隔线
|
|
↓
|
|
显示昨天的新闻内容
|
|
↓
|
|
继续往下滑动
|
|
↓
|
|
显示前天的新闻内容
|
|
↓
|
|
...
|
|
↓
|
|
到达已加载内容的底部
|
|
↓
|
|
显示"正在加载更多..."
|
|
↓
|
|
自动加载更早的新闻
|
|
```
|
|
|
|
### 加载策略
|
|
```csharp
|
|
// 初始加载: 最近3天的新闻
|
|
// 滚动到底部: 自动加载接下来3天
|
|
// 最大加载: 30天历史数据
|
|
// 内存管理: 只保留可视区域 ±3 天的数据
|
|
```
|
|
|
|
### 滚动位置记忆
|
|
```csharp
|
|
// 记录用户当前滚动位置
|
|
// 切换主题/刷新时不重置位置
|
|
// 下次打开组件时恢复到上次位置
|
|
```
|
|
|
|
---
|
|
|
|
## 7. 交互设计
|
|
|
|
### 悬停效果
|
|
```
|
|
新闻条目悬停:
|
|
- 背景色: 透明 → rgba(192,91,77,.05)
|
|
- 过渡时间: 200ms
|
|
- 光标: Hand cursor
|
|
```
|
|
|
|
### 点击效果
|
|
```
|
|
新闻条目点击:
|
|
- 打开浏览器跳转原文链接
|
|
- 轻微缩放: scale(0.98)
|
|
- 过渡时间: 100ms
|
|
```
|
|
|
|
### 封面图点击
|
|
```
|
|
封面图点击:
|
|
- 打开当期官网页面
|
|
- 轻微放大效果
|
|
```
|
|
|
|
### 日期标题点击
|
|
```
|
|
日期标题点击:
|
|
- 展开/收起该期新闻
|
|
- 箭头图标旋转动画
|
|
```
|
|
|
|
---
|
|
|
|
## 8. 动画效果
|
|
|
|
### 滚动动画
|
|
```
|
|
内容跟随滚动:
|
|
- 自然滚动，无额外动画
|
|
- 保持流畅 60fps
|
|
```
|
|
|
|
### 加载动画
|
|
```
|
|
新内容加载:
|
|
- 淡入: opacity 0 → 1 (300ms)
|
|
- 缓动: ease-out
|
|
```
|
|
|
|
### 日期分隔线动画
|
|
```
|
|
日期分隔线进入视口:
|
|
- 轻微放大: scale(0.95) → scale(1)
|
|
- 透明度: 0.5 → 1
|
|
- 时长: 200ms
|
|
```
|
|
|
|
---
|
|
|
|
## 9. 响应式适配
|
|
|
|
### 缩放规则
|
|
```csharp
|
|
scale = Math.Clamp(currentCellSize / 48, 0.56, 2.0)
|
|
|
|
字体缩放: baseFontSize * scale
|
|
间距缩放: baseSpacing * scale
|
|
```
|
|
|
|
### 最小尺寸保障
|
|
```
|
|
最小字体: 11px
|
|
最小间距: 8px
|
|
最小触摸区域: 44px
|
|
```
|
|
|
|
---
|
|
|
|
## 10. 代码结构预览
|
|
|
|
### XAML 结构
|
|
```xml
|
|
<UserControl>
|
|
<Border x:Name="RootBorder" CornerRadius="24" Background="#fefefe">
|
|
<Grid RowDefinitions="Auto,*">
|
|
|
|
<!-- Header (固定) -->
|
|
<Grid Grid.Row="0" ColumnDefinitions="*,Auto" Margin="16">
|
|
<TextBlock Text="🧱 橘鸦 · AI早报"
|
|
Foreground="#bb5649" FontSize="20"/>
|
|
<Button x:Name="OfficialWebsiteButton" Grid.Column="1"
|
|
Content="🔗 官网" Click="OnOfficialWebsiteClick"
|
|
Background="Transparent" Foreground="#bb5649"/>
|
|
</Grid>
|
|
|
|
<!-- 滚动内容区 -->
|
|
<ScrollViewer Grid.Row="1" x:Name="ContentScrollViewer"
|
|
VerticalScrollBarVisibility="Auto">
|
|
<StackPanel x:Name="NewsStackPanel">
|
|
|
|
<!-- 今天的新闻 -->
|
|
<local:DailyNewsView Date="2026-03-23"
|
|
CoverImageUrl="..."
|
|
Categories="..."/>
|
|
|
|
<!-- 日期分隔线 -->
|
|
<local:DateSeparator Date="2026-03-22"/>
|
|
|
|
<!-- 昨天的新闻 -->
|
|
<local:DailyNewsView Date="2026-03-22"
|
|
CoverImageUrl="..."
|
|
Categories="..."/>
|
|
|
|
<!-- 更多历史新闻... -->
|
|
|
|
<!-- 加载提示 -->
|
|
<TextBlock x:Name="LoadingMoreText"
|
|
Text="正在加载更多... ↓"
|
|
HorizontalAlignment="Center"
|
|
Margin="0,20"/>
|
|
|
|
</StackPanel>
|
|
</ScrollViewer>
|
|
|
|
</Grid>
|
|
</Border>
|
|
</UserControl>
|
|
```
|
|
|
|
### DailyNewsView 组件
|
|
```xml
|
|
<!-- 单期新闻视图 -->
|
|
<Border x:Class="DailyNewsView" Margin="0,0,0,24">
|
|
<StackPanel>
|
|
<!-- 封面图 -->
|
|
<Border CornerRadius="12" ClipToBounds="True"
|
|
PointerPressed="OnCoverImageClick" Cursor="Hand">
|
|
<Image Source="{Binding CoverImageUrl}" Stretch="UniformToFill"/>
|
|
</Border>
|
|
|
|
<!-- 日期大标题 -->
|
|
<TextBlock Text="{Binding FormattedDate}"
|
|
FontSize="22" FontWeight="Bold"
|
|
Foreground="#bb5649" Margin="0,16,0,12"/>
|
|
|
|
<!-- 分类列表 -->
|
|
<ItemsControl ItemsSource="{Binding Categories}">
|
|
<ItemsControl.ItemTemplate>
|
|
<DataTemplate>
|
|
<StackPanel Margin="0,0,0,12">
|
|
<TextBlock Text="{Binding IconAndName}"
|
|
FontSize="16" FontWeight="SemiBold"
|
|
Foreground="#bb5649"/>
|
|
<ItemsControl ItemsSource="{Binding Items}"/>
|
|
</StackPanel>
|
|
</DataTemplate>
|
|
</ItemsControl.ItemTemplate>
|
|
</ItemsControl>
|
|
|
|
<!-- 视频链接 -->
|
|
<StackPanel Orientation="Horizontal" Margin="0,8,0,0">
|
|
<TextBlock Text="📺 视频版:" Foreground="#757575"/>
|
|
<HyperlinkButton Content="B站" NavigateUri="{Binding BilibiliUrl}"/>
|
|
<TextBlock Text="|" Foreground="#757575" Margin="4,0"/>
|
|
<HyperlinkButton Content="YouTube" NavigateUri="{Binding YoutubeUrl}"/>
|
|
</StackPanel>
|
|
|
|
</StackPanel>
|
|
</Border>
|
|
```
|
|
|
|
---
|
|
|
|
## 11. 数据模型
|
|
|
|
```csharp
|
|
// 每日早报数据
|
|
public sealed record JuyaDailyNews(
|
|
DateTime Date,
|
|
string Title,
|
|
string CoverImageUrl,
|
|
string IssueUrl,
|
|
string BilibiliUrl,
|
|
string YoutubeUrl,
|
|
IReadOnlyList<JuyaNewsCategory> Categories,
|
|
DateTimeOffset FetchedAt);
|
|
|
|
// 新闻分类
|
|
public sealed record JuyaNewsCategory(
|
|
string Name,
|
|
string Icon,
|
|
IReadOnlyList<JuyaNewsItem> Items);
|
|
|
|
// 单条新闻
|
|
public sealed record JuyaNewsItem(
|
|
string Title,
|
|
string Url,
|
|
int? Number);
|
|
```
|
|
|
|
---
|
|
|
|
## 12. 与现有组件对比
|
|
|
|
| 特性 | CnrDailyNews | IfengNews | **JuyaNews (建议)** |
|
|
|-----|--------------|-----------|---------------------|
|
|
| 浏览方式 | 静态展示 | 静态展示 | **垂直连续滚动** |
|
|
| 历史查看 | 不支持 | 不支持 | **下滑自动加载** |
|
|
| 交互方式 | 点击刷新 | 点击刷新 | **滚动浏览** |
|
|
| 内容组织 | 平铺 | 平铺 | **按日期分组** |
|
|
|
|
---
|
|
|
|
## 13. 设计亮点
|
|
|
|
1. **垂直滚动**: 像社交媒体一样自然浏览
|
|
2. **连续阅读**: 今天→昨天→前天，无缝衔接
|
|
3. **日期分隔**: 清晰的日期标识，不会混淆
|
|
4. **自动加载**: 滑到底部自动加载更多历史
|
|
5. **柔和色彩**: 砖红色 + 米白色，阅读舒适
|
|
6. **主题适配**: 日间/夜间模式都柔和护眼
|
|
|
|
---
|
|
|
|
## 14. 实现建议
|
|
|
|
### 滚动加载实现
|
|
```csharp
|
|
public partial class JuyaNewsWidget : UserControl
|
|
{
|
|
private readonly List<JuyaDailyNews> _loadedNews = new();
|
|
private DateTime _earliestLoadedDate;
|
|
private bool _isLoadingMore;
|
|
|
|
private void OnScrollChanged(object? sender, ScrollChangedEventArgs e)
|
|
{
|
|
var scrollViewer = (ScrollViewer)sender!;
|
|
|
|
// 检测是否滚动到底部
|
|
if (scrollViewer.VerticalOffset >= scrollViewer.ScrollableHeight - 100)
|
|
{
|
|
LoadMoreNews();
|
|
}
|
|
}
|
|
|
|
private async void LoadMoreNews()
|
|
{
|
|
if (_isLoadingMore) return;
|
|
_isLoadingMore = true;
|
|
|
|
// 加载接下来3天的新闻
|
|
var nextBatch = await FetchNewsBatch(_earliestLoadedDate.AddDays(-1), 3);
|
|
|
|
foreach (var news in nextBatch)
|
|
{
|
|
AddNewsToView(news);
|
|
_loadedNews.Add(news);
|
|
}
|
|
|
|
_earliestLoadedDate = nextBatch.Last().Date;
|
|
_isLoadingMore = false;
|
|
}
|
|
}
|
|
```
|
|
|
|
### 内存优化
|
|
```csharp
|
|
// 只保留可视区域附近的新闻
|
|
// 远离可视区域的新闻释放图片资源
|
|
// 保留文字内容，图片按需加载
|
|
```
|
|
|
|
---
|
|
|
|
*设计版本: v4.0*
|
|
*更新日期: 2026-03-24*
|
|
*更新内容: 改为垂直连续滚动浏览模式*
|