Add app details and icon cache (T-204)

app-modern/ui/gio/shell.go

@@ -4,6 +4,7 @@ import (
 	"fmt"
 	"image"
 	"image/color"
+	"strings"
 
 	"gioui.org/io/semantic"
 	"gioui.org/layout"
@@ -60,10 +61,13 @@ type AppShell struct {
 	viewInstalled widget.Clickable
 	viewUpdates   widget.Clickable
 	resetFilters  widget.Clickable
+	closeDetail   widget.Clickable
 
 	categoryControls map[string]*widget.Clickable
 	rows             map[string]*rowControls
+	icons            map[string]paint.ImageOp
 	lastRendered     int
+	detailRendered   bool
 }
 
 // NewAppShell creates the catalog shell with an optional in-memory snapshot.
@@ -78,12 +82,22 @@ func NewAppShell(
 		categoryList:     layout.List{Axis: layout.Horizontal},
 		categoryControls: make(map[string]*widget.Clickable),
 		rows:             make(map[string]*rowControls),
+		icons:            make(map[string]paint.ImageOp),
 	}
 	shell.search.SingleLine = true
 	shell.SetItems(items)
 	return shell
 }
 
+// ApplyIcon stores a background-decoded image for future Layout calls.
+func (shell *AppShell) ApplyIcon(appID string, icon image.Image) {
+	if icon == nil {
+		delete(shell.icons, appID)
+		return
+	}
+	shell.icons[appID] = paint.NewImageOp(icon)
+}
+
 // SetItems applies a prepared, IO-free catalog/status snapshot.
 func (shell *AppShell) SetItems(items []application.CatalogListItem) {
 	shell.model.SetItems(items)
@@ -126,6 +140,7 @@ func NewTheme() *material.Theme {
 func (shell *AppShell) Layout(gtx layout.Context, theme *material.Theme) layout.Dimensions {
 	shell.drainInput(gtx)
 	shell.lastRendered = 0
+	shell.detailRendered = false
 	paint.Fill(gtx.Ops, shellColors.background)
 
 	return layout.UniformInset(unit.Dp(20)).Layout(gtx, func(gtx layout.Context) layout.Dimensions {
@@ -177,6 +192,9 @@ func (shell *AppShell) drainInput(gtx layout.Context) {
 		shell.search.SetText("")
 		shell.model.ResetFilters()
 	}
+	for shell.closeDetail.Clicked(gtx) {
+		shell.model.Select("")
+	}
 }
 
 func (shell *AppShell) layoutHeader(
@@ -320,14 +338,35 @@ func (shell *AppShell) layoutContent(
 		}),
 		layout.Rigid(layout.Spacer{Width: unit.Dp(16)}.Layout),
 		layout.Flexed(1, func(gtx layout.Context) layout.Dimensions {
-			return panel(
+			selected, hasSelection := shell.model.SelectedItem()
+			return layout.Flex{}.Layout(
 				gtx,
-				shellColors.surface,
-				unit.Dp(10),
-				layout.UniformInset(unit.Dp(16)),
-				func(gtx layout.Context) layout.Dimensions {
-					return shell.layoutCatalog(gtx, theme)
-				},
+				layout.Flexed(1, func(gtx layout.Context) layout.Dimensions {
+					return panel(
+						gtx,
+						shellColors.surface,
+						unit.Dp(10),
+						layout.UniformInset(unit.Dp(16)),
+						func(gtx layout.Context) layout.Dimensions {
+							return shell.layoutCatalog(gtx, theme)
+						},
+					)
+				}),
+				layout.Rigid(func(gtx layout.Context) layout.Dimensions {
+					if !hasSelection {
+						return layout.Dimensions{}
+					}
+					return layout.Spacer{Width: unit.Dp(12)}.Layout(gtx)
+				}),
+				layout.Rigid(func(gtx layout.Context) layout.Dimensions {
+					if !hasSelection {
+						return layout.Dimensions{}
+					}
+					width := gtx.Dp(unit.Dp(320))
+					gtx.Constraints.Min.X = width
+					gtx.Constraints.Max.X = width
+					return shell.layoutDetail(gtx, theme, selected)
+				}),
 			)
 		}),
 	)
@@ -407,7 +446,14 @@ func (shell *AppShell) layoutAppRow(
 					return layout.Flex{Alignment: layout.Middle}.Layout(
 						gtx,
 						layout.Rigid(func(gtx layout.Context) layout.Dimensions {
-							return shell.layoutLetterIcon(gtx, theme, item.Name)
+							return shell.layoutAppIcon(
+								gtx,
+								theme,
+								item.ID,
+								item.Name,
+								unit.Dp(48),
+								unit.Dp(8),
+							)
 						}),
 						layout.Rigid(layout.Spacer{Width: unit.Dp(12)}.Layout),
 						layout.Flexed(1, func(gtx layout.Context) layout.Dimensions {
@@ -454,14 +500,32 @@ func (shell *AppShell) layoutAppRow(
 	})
 }
 
-func (shell *AppShell) layoutLetterIcon(
+func (shell *AppShell) layoutAppIcon(
 	gtx layout.Context,
 	theme *material.Theme,
+	appID string,
 	name string,
+	iconSize unit.Dp,
+	radius unit.Dp,
 ) layout.Dimensions {
-	size := gtx.Dp(unit.Dp(48))
+	size := gtx.Dp(iconSize)
 	gtx.Constraints.Min = image.Pt(size, size)
 	gtx.Constraints.Max = gtx.Constraints.Min
+	if icon, exists := shell.icons[appID]; exists {
+		return panel(
+			gtx,
+			shellColors.surface,
+			radius,
+			layout.UniformInset(unit.Dp(2)),
+			func(gtx layout.Context) layout.Dimensions {
+				return widget.Image{
+					Src:      icon,
+					Fit:      widget.Contain,
+					Position: layout.Center,
+				}.Layout(gtx)
+			},
+		)
+	}
 	letter := "S"
 	for _, character := range name {
 		letter = string(character)
@@ -470,7 +534,7 @@ func (shell *AppShell) layoutLetterIcon(
 	return panel(
 		gtx,
 		shellColors.primary,
-		unit.Dp(8),
+		radius,
 		layout.UniformInset(unit.Dp(0)),
 		func(gtx layout.Context) layout.Dimensions {
 			return layout.Center.Layout(gtx, func(gtx layout.Context) layout.Dimensions {
@@ -482,6 +546,114 @@ func (shell *AppShell) layoutLetterIcon(
 	)
 }
 
+func (shell *AppShell) layoutDetail(
+	gtx layout.Context,
+	theme *material.Theme,
+	item application.CatalogListItem,
+) layout.Dimensions {
+	shell.detailRendered = true
+	return panel(
+		gtx,
+		shellColors.muted,
+		unit.Dp(10),
+		layout.UniformInset(unit.Dp(16)),
+		func(gtx layout.Context) layout.Dimensions {
+			return layout.Flex{Axis: layout.Vertical}.Layout(
+				gtx,
+				layout.Rigid(func(gtx layout.Context) layout.Dimensions {
+					return layout.Flex{Alignment: layout.Middle}.Layout(
+						gtx,
+						layout.Rigid(material.H6(theme, "软件详情").Layout),
+						layout.Flexed(1, layout.Spacer{}.Layout),
+						layout.Rigid(func(gtx layout.Context) layout.Dimensions {
+							return shell.layoutFilterButton(
+								gtx,
+								theme,
+								&shell.closeDetail,
+								"关闭",
+								false,
+							)
+						}),
+					)
+				}),
+				layout.Rigid(layout.Spacer{Height: unit.Dp(16)}.Layout),
+				layout.Rigid(func(gtx layout.Context) layout.Dimensions {
+					return layout.Center.Layout(gtx, func(gtx layout.Context) layout.Dimensions {
+						return shell.layoutAppIcon(
+							gtx,
+							theme,
+							item.ID,
+							item.Name,
+							unit.Dp(72),
+							unit.Dp(12),
+						)
+					})
+				}),
+				layout.Rigid(layout.Spacer{Height: unit.Dp(12)}.Layout),
+				layout.Rigid(func(gtx layout.Context) layout.Dimensions {
+					return layout.Center.Layout(gtx, material.H6(theme, item.Name).Layout)
+				}),
+				layout.Rigid(layout.Spacer{Height: unit.Dp(4)}.Layout),
+				layout.Rigid(func(gtx layout.Context) layout.Dimensions {
+					label := material.Body2(
+						theme,
+						fmt.Sprintf("%s · %s", item.ID, item.Version),
+					)
+					label.Color = shellColors.secondary
+					return layout.Center.Layout(gtx, label.Layout)
+				}),
+				layout.Rigid(layout.Spacer{Height: unit.Dp(16)}.Layout),
+				layout.Rigid(func(gtx layout.Context) layout.Dimensions {
+					return detailField(gtx, theme, "状态", statusLabel(item.Status))
+				}),
+				layout.Rigid(func(gtx layout.Context) layout.Dimensions {
+					return detailField(gtx, theme, "分类", fallbackText(item.Category, "未分类"))
+				}),
+				layout.Rigid(func(gtx layout.Context) layout.Dimensions {
+					return detailField(
+						gtx,
+						theme,
+						"标签",
+						fallbackText(strings.Join(item.Tags, " · "), "无"),
+					)
+				}),
+				layout.Rigid(func(gtx layout.Context) layout.Dimensions {
+					return detailField(
+						gtx,
+						theme,
+						"简介",
+						fallbackText(item.Description, "暂无简介"),
+					)
+				}),
+				layout.Rigid(func(gtx layout.Context) layout.Dimensions {
+					if item.Reason == "" {
+						return layout.Dimensions{}
+					}
+					return detailField(gtx, theme, "不可用原因", reasonLabel(item.Reason))
+				}),
+				layout.Rigid(func(gtx layout.Context) layout.Dimensions {
+					if item.Tutorial == "" {
+						return layout.Dimensions{}
+					}
+					return detailField(gtx, theme, "教程", item.Tutorial)
+				}),
+				layout.Rigid(func(gtx layout.Context) layout.Dimensions {
+					if item.Homepage == "" {
+						return layout.Dimensions{}
+					}
+					return detailField(gtx, theme, "主页", item.Homepage)
+				}),
+				layout.Rigid(layout.Spacer{Height: unit.Dp(8)}.Layout),
+				layout.Rigid(func(gtx layout.Context) layout.Dimensions {
+					label := material.Caption(theme, actionLabel(item)+"；实际操作将在后续用例接入")
+					label.Color = shellColors.secondary
+					return label.Layout(gtx)
+				}),
+			)
+		},
+	)
+}
+
 func (shell *AppShell) layoutEmptyState(
 	gtx layout.Context,
 	theme *material.Theme,
@@ -708,3 +880,43 @@ func actionLabel(item application.CatalogListItem) string {
 		return "查看详情"
 	}
 }
+
+func detailField(
+	gtx layout.Context,
+	theme *material.Theme,
+	labelText string,
+	value string,
+) layout.Dimensions {
+	return layout.Inset{Bottom: unit.Dp(12)}.Layout(gtx, func(gtx layout.Context) layout.Dimensions {
+		return layout.Flex{Axis: layout.Vertical}.Layout(
+			gtx,
+			layout.Rigid(func(gtx layout.Context) layout.Dimensions {
+				label := material.Caption(theme, labelText)
+				label.Color = shellColors.secondary
+				return label.Layout(gtx)
+			}),
+			layout.Rigid(layout.Spacer{Height: unit.Dp(3)}.Layout),
+			layout.Rigid(material.Body2(theme, value).Layout),
+		)
+	})
+}
+
+func fallbackText(value, fallback string) string {
+	if value == "" {
+		return fallback
+	}
+	return value
+}
+
+func reasonLabel(reason string) string {
+	switch reason {
+	case "deprecated":
+		return "软件已停止发布，不能新装或更新"
+	case "minimum_os":
+		return "当前 Windows 版本低于最低要求"
+	case "architecture":
+		return "没有适用于当前系统架构的软件包"
+	default:
+		return reason
+	}
+}