feat(subscription): 优化凭据导入与账号卡片 - #457
Conversation
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthrough更新订阅账户卡片的额度展示、详情概览、同步时间、加载骨架和响应式样式。调整订阅凭据导入入口、JSON 粘贴面板和风险提示。更新 DisclosurePanel 的指示器位置、摘要插槽、交互样式和无障碍支持。同步更新英文、日文和中文文案。连接抽屉改用国际化描述，并统一按钮尺寸。 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches✨ Simplify code
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: QUIET
Plan: Pro Plus
Run ID: 7f62628f-5117-4b69-ac93-5ae9f7f9897e
📒 Files selected for processing (11)
web/src/features/groups/credentials/GroupCredentialsTab.vueweb/src/features/groups/credentials/SubscriptionAccountCard.vueweb/src/features/import/ChannelPresetPicker.vueweb/src/features/import/NewGroupImport.vueweb/src/features/import/SubscriptionCredentialStager.vueweb/src/i18n/locales/en-US/group.tsweb/src/i18n/locales/en-US/import.tsweb/src/i18n/locales/ja-JP/group.tsweb/src/i18n/locales/ja-JP/import.tsweb/src/i18n/locales/zh-CN/group.tsweb/src/i18n/locales/zh-CN/import.ts
💤 Files with no reviewable changes (1)
- web/src/features/import/ChannelPresetPicker.vue
Included review availability: Your plan provides up to 8 included reviews per hour; 6 remain after this review.
There was a problem hiding this comment.
🟡 Changes recommended
The new custom quota progressbar UI can emit out-of-range/non-finite aria-valuenow and un-clamped widths, which can break accessibility expectations and rendering in edge cases.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Pull request overview
This PR refines the subscription-credential import flow and subscription account card UI in the web frontend, focusing on clearer entry actions (authorize vs. file import vs. paste JSON), streamlined risk messaging, and a reworked quota/overview presentation.
Changes:
- Refactors subscription credential staging UI to surface primary entry actions and demote JSON paste into a disclosure panel.
- Redesigns subscription account quota display into a flatter “meter + value + reset” row layout and consolidates details into a “runtime overview”.
- Updates i18n strings (zh-CN/ja-JP/en-US) to match the new UI copy and structure.
File summaries
| File | Description |
|---|---|
| web/src/i18n/locales/zh-CN/import.ts | Removes old subscription risk/description copy and adds new risk/paste/import labels. |
| web/src/i18n/locales/zh-CN/group.ts | Renames runtime/usage labels and adds quota reset prefix/suffix strings. |
| web/src/i18n/locales/ja-JP/import.ts | Mirrors subscription import copy changes for Japanese. |
| web/src/i18n/locales/ja-JP/group.ts | Mirrors group/runtime/quota copy changes for Japanese. |
| web/src/i18n/locales/en-US/import.ts | Mirrors subscription import copy changes for English. |
| web/src/i18n/locales/en-US/group.ts | Mirrors group/runtime/quota copy changes for English. |
| web/src/features/import/SubscriptionCredentialStager.vue | Reworks subscription account connection entry actions and messaging layout. |
| web/src/features/import/NewGroupImport.vue | Removes subscription step description and adjusts credential-step description computation. |
| web/src/features/import/ChannelPresetPicker.vue | Removes subscription risk inline notice from channel preset picker. |
| web/src/features/groups/credentials/SubscriptionAccountCard.vue | Replaces QuotaProgressBar with custom meter UI and reorganizes details into runtime overview. |
| web/src/features/groups/credentials/GroupCredentialsTab.vue | Minor dialog button sizing and description binding cleanup. |
Review details
Suppressed comments (1)
web/src/features/groups/credentials/SubscriptionAccountCard.vue:708
- The custom progressbar meter binds
aria-valuenowdirectly toremainingPercent(window)without clamping/finite checks.role="progressbar"expectsaria-valuenowwithin the declared min/max (0–100); out-of-range or NaN values can break assistive-tech expectations.
<span
class="subscription-account__quota-meter"
:role="remainingPercent(window) === undefined ? 'img' : 'progressbar'"
:aria-label="
remainingPercent(window) === undefined
- Files reviewed: 11/11 changed files
- Comments generated: 1
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
将额度条从「整行 34px 铺色」改为「淡色背景 + 3px 语义左竖条 + 3px 行底进度线」， 左竖条改用 inset 阴影避免与进度线的接缝断口。强调色采用在 sRGB 色域内的高饱和值， 同一值同时适配明暗主题。
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: bd010a42c3
ℹ️ 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".
| <span | ||
| v-if="supportsQuotaObservation && observation?.observed_at_ms != null" | ||
| class="subscription-account__sync-age" |
There was a problem hiding this comment.
When a card has a plan badge, quota observation, and a longer status or relative-time translation (for example, “Needs sign-in” and “3 minutes ago”), moving the non-shrinking sync age beside both action buttons makes the first header row wider than the card's 420px minimum column. The row does not wrap, .subscription-account__actions and its children cannot shrink, and the card hides overflow, so the rightmost menu can be clipped or unreachable. Keep the age in the second row or add a narrow-card layout that hides or wraps it while preserving the actions.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
已采纳并在 5c69015 修复：卡片宽度不超过 480px 时，操作组会整行换行，保留同步时间、同步和更多操作；宽卡布局不变。
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 5c690150cd
ℹ️ 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".
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
web/src/features/groups/credentials/SubscriptionAccountCard.vue (1)
524-610: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win避免刷新骨架被卡片高度裁切。
当实际只有一个额度窗口时，
refreshSkeletonRows仍会生成至少两行占位内容。.subscription-account__refresh-skeleton使用绝对定位，而main和detail仅使用visibility: hidden保留原高度。新增的头部、底部内边距和详情占位可能超过父卡片高度，随后被.subscription-account { overflow: hidden }裁切。让刷新骨架参与布局，或为刷新状态设置足够的卡片高度。同时不要为单窗口账户强制生成第二行占位内容。
建议修复
-const refreshSkeletonRows = computed(() => Math.max(2, Math.min(4, quotaWindows.value.length || 2))) +const refreshSkeletonRows = computed(() => Math.min(4, quotaWindows.value.length)).subscription-account--refreshing > .subscription-account__main, .subscription-account--refreshing > .subscription-account__detail { - visibility: hidden; + display: none; } .subscription-account__refresh-skeleton { - position: absolute; - inset: 0; + position: relative; }Also applies to: 1192-1205
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: QUIET
Plan: Pro Plus
Run ID: 0f77e0c9-2556-4322-ba8f-c01778d255f1
📒 Files selected for processing (1)
web/src/features/groups/credentials/SubscriptionAccountCard.vue
Included review availability: Your plan provides up to 8 included reviews per hour; 6 remain after this review.
There was a problem hiding this comment.
Note
Quiet mode is enabled, so only the most important comments were posted inline. Other review comments are grouped below.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
web/src/features/groups/credentials/SubscriptionAccountCard.vue (1)
515-518: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win将进度百分比限制在有效范围内。
quotaFillStyle会将remainingPercent直接写入 CSS 宽度。该值也用于aria-valuenow。remainingPercent的utilization分支没有限制范围。如果上游返回小于
0或大于1的utilization，卡片会生成负宽度或大于100%的宽度，并输出无效的 ARIA 进度值。请在remainingPercent中统一限制结果。建议修改
function remainingPercent(window: CredentialQuotaWindowDto): number | undefined { - if (window.utilization !== undefined) return Math.round((1 - window.utilization) * 100) + if (window.utilization !== undefined && Number.isFinite(window.utilization)) { + return Math.max(0, Math.min(100, Math.round((1 - window.utilization) * 100))) + }
🟡 Other comments (1)
web/src/features/groups/credentials/SubscriptionAccountCard.vue-110-132 (1)
110-132: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win使用
label_key对专属窗口分组。Line 110-132 忽略了
window.label_key。当窗口没有model_ids，且label不带· <period>后缀时，不同专属窗口会返回相同的scope:分组键。排序会将这些窗口错误地合并。在解析显示标签前，使用
label_key生成稳定的subject:分组键。建议修改
if (modelIDs.length > 0) return `models:${modelIDs.join('\u0000')}` + if (window.label_key) return `subject:${window.label_key}` const period = quotaWindowPeriodLabel(window.window_seconds)
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: QUIET
Plan: Pro Plus
Run ID: a0b607e5-83f1-4206-b779-60e7bb8b3790
📒 Files selected for processing (1)
web/src/features/groups/credentials/SubscriptionAccountCard.vue
Included review availability: Your plan provides up to 8 included reviews per hour; 6 remain after this review.
|
CodeRabbit outside-diff feedback follow-up:
|
关联 Issue / Related Issue
无（订阅凭据管理前端交互优化）
变更内容 / Change Content
自查清单 / Checklist
make check，或在说明中写明无法运行的原因和未验证范围。 / I ranmake check, or documented why it could not run and what remains unverified.无需更新公开文档或执行数据迁移；本次仅调整管理前端交互与三语文案。
Summary by CodeRabbit
新功能
体验优化