Skip to content

feat: 实现 Fluent 风格 Steam 成就追踪前端框架#1

Merged
PageSecOnd merged 1 commit into
mainfrom
codex/implement-front-end-design-for-game-tracking-app
May 14, 2026
Merged

feat: 实现 Fluent 风格 Steam 成就追踪前端框架#1
PageSecOnd merged 1 commit into
mainfrom
codex/implement-front-end-design-for-game-tracking-app

Conversation

@PageSecOnd

Copy link
Copy Markdown
Owner

Motivation

  • 实现完整的前端设计稿(Electron + Vue、Fluent Design)并提供一个本地优先的 Steam 游戏与成就追踪 UI 骨架以便后续接入同步、缓存与数据层。
  • 提供可运行的界面雏形以验证主要交互流与视觉规范(导航栏、命令栏、卡片网格、右侧详情抽屉、同步中心与设置)。

Description

  • 新增项目引导文件:package.json(依赖与脚本)、vite.config.jsindex.html,以及入口 src/main.js 用于启动 Vue 3 + Vite 应用。
  • src/App.vue 中实现主界面结构与交互:72px Navigation Rail、56px Command Bar、全局搜索、卡片网格、右侧 480px 详情抽屉(概览/成就分段)、同步中心与设置页以及状态/标签/备注的编辑交互。
  • 新增 src/styles.css,实现遵循设计稿的 Fluent 风格视觉系统(间距、圆角、阴影、进度条、分段控件、Chips 等)。
  • 提供内存假数据与基本 UI 状态处理(游戏列表、任务队列、筛选逻辑、抽屉打开/标签添加等),以便前端行为在无后端时也可演示。

Testing

  • 执行了 git status --short 并成功返回项目状态。
  • 尝试运行 npm install 获取依赖时遇到 npm registry 返回 403 Forbidden,导致依赖未能安装并阻止后续构建与运行验证。
  • 因为依赖安装失败,vite build / 运行时验证未能执行,待网络/registry 可用后需再运行完整的构建与功能验证。

Codex Task

Copilot AI review requested due to automatic review settings May 14, 2026 11:51
@PageSecOnd PageSecOnd merged commit 6d2ff95 into main May 14, 2026
1 check failed

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 30be3ca2bf

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread src/App.vue
])

const currentPageLabel = computed(() => navItems.find((i) => i.key === currentPage.value)?.label ?? '')
const filteredGames = computed(() => games.value.filter((g) => `${g.zhName} ${g.enName} ${g.tags.join(' ')} ${g.note}`.toLowerCase().includes(query.value.toLowerCase())))

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Filter wishlist entries by page state

Update the game list computation to include currentPage criteria, not just the search text. As written, filteredGames only checks query, so switching to 我的清单 still renders the full library (including non-wishlist states), which breaks the expected separation between Library and Wishlist views.

Useful? React with 👍 / 👎.

Comment thread src/App.vue
Comment on lines +23 to +26
<button class="primary">
<span v-if="syncing">⏳</span>
{{ currentPage === 'wishlist' ? '添加游戏' : syncing ? '同步中…' : '同步我的库' }}
</button>

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Wire primary command button to sync/add action

Attach a click handler that mutates state for the primary command. The button text and spinner depend on syncing, but there is no @click or other state transition here, so users cannot trigger sync/add behavior and the 同步中… branch is effectively dead in normal use.

Useful? React with 👍 / 👎.

@PageSecOnd PageSecOnd removed the request for review from Copilot May 14, 2026 12:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant