feat: 1、新增水印文案自定义功能；2、input-item输入框组件新增清除功能(可用于快捷清除水印文案)；3、偏好设置、主题切换、语言选择、是否全屏按钮新增动画效果 #6800
Conversation
zouawen
requested review from
a team,
anncwb,
jinmao88,
mynetfan and
vince292007
as code owners
|
WalkthroughAdds optional custom watermark content to preferences and propagates it to layout watchers across apps and playground to use provided content (with fallback to user info). Extends preferences schema, updates preferences UI to edit/clear content, adds input clear button, i18n keys, a new shrink keyframe, and hover shrink classes on several icon buttons. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant UI as Preferences UI
participant Store as Preferences Store
participant Layout as Layout Watcher
participant WM as Watermark Manager
rect rgb(245,248,252)
note over Layout: immediate: true on mount
Layout->>Store: Read { watermark, watermarkContent }
alt watermark enabled
Layout->>WM: updateWatermark(content || "username - realName")
else disabled
Layout->>WM: destroyWatermark()
end
end
User->>UI: Toggle watermark / Edit content
UI->>Store: Update { watermark, watermarkContent }
Store-->>Layout: Change notification
alt watermark enabled
Layout->>WM: updateWatermark(content || fallback)
else disabled
Layout->>WM: destroyWatermark()
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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: 0
♻️ Duplicate comments (1)
apps/web-antd/src/layouts/basic.vue (1)
108-127: Same pattern and considerations as web-ele layout.This watch implementation is identical to the one in
apps/web-ele/src/layouts/basic.vue(lines 108-127). The same null-safety consideration for the fallback watermark text applies here. See the review comment on that file for suggested improvements regarding both the null check and potential code duplication across layouts.
🧹 Nitpick comments (2)
packages/effects/layouts/src/widgets/preferences/blocks/general/general.vue (1)
27-43: Consider preserving watermark content when toggling off.The current implementation clears
appWatermarkContentwhen the watermark is disabled. This means users lose their custom text if they temporarily toggle the watermark off. Consider preserving the value to improve UX, allowing users to re-enable the watermark without re-entering their custom text.If you choose to preserve the content, you can simplify to:
- <SwitchItem - v-model="appWatermark" - @update:model-value=" - (val) => { - if (!val) appWatermarkContent = ''; - } - " - > + <SwitchItem v-model="appWatermark"> {{ $t('preferences.watermark') }} </SwitchItem>apps/web-ele/src/layouts/basic.vue (1)
108-127: Consider null-safe fallback for userInfo.The fallback watermark text uses optional chaining (
userInfo?.username,userInfo?.realName), but ifuserInfois nullish, this produces"undefined - undefined". Consider adding an explicit check or providing a more graceful default.Apply this diff for a safer fallback:
watch( () => ({ enable: preferences.app.watermark, content: preferences.app.watermarkContent, }), async ({ enable, content }) => { if (enable) { + const fallback = userStore.userInfo + ? `${userStore.userInfo.username} - ${userStore.userInfo.realName}` + : ''; await updateWatermark({ - content: - content || - `${userStore.userInfo?.username} - ${userStore.userInfo?.realName}`, + content: content || fallback, }); } else { destroyWatermark(); } }, { immediate: true, }, );Note on duplication: This watch logic appears identical in
apps/web-antd/src/layouts/basic.vue(and per the AI summary, likely in other layouts). If this pattern is repeated across multiple layouts, consider extracting it into a shared composable (e.g.,useWatermarkSync) to reduce duplication and simplify future maintenance.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (11)
apps/web-antd/src/layouts/basic.vue(1 hunks)apps/web-ele/src/layouts/basic.vue(1 hunks)apps/web-naive/src/layouts/basic.vue(1 hunks)packages/@core/preferences/src/config.ts(1 hunks)packages/@core/preferences/src/types.ts(1 hunks)packages/effects/layouts/src/widgets/preferences/blocks/general/general.vue(3 hunks)packages/effects/layouts/src/widgets/preferences/blocks/input-item.vue(2 hunks)packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue(2 hunks)packages/locales/src/langs/en-US/preferences.json(1 hunks)packages/locales/src/langs/zh-CN/preferences.json(1 hunks)playground/src/layouts/basic.vue(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: Check (windows-latest)
- GitHub Check: Check (ubuntu-latest)
- GitHub Check: post-update (ubuntu-latest)
- GitHub Check: post-update (windows-latest)
🔇 Additional comments (12)
packages/@core/preferences/src/types.ts (1)
78-81: LGTM!The
watermarkContentproperty is correctly typed and appropriately positioned adjacent to the relatedwatermarkboolean field.packages/locales/src/langs/en-US/preferences.json (1)
40-40: LGTM!The English localization for watermark content is clear and appropriately placed.
packages/locales/src/langs/zh-CN/preferences.json (1)
40-40: LGTM!The Chinese localization is clear and maintains consistency with the English locale structure.
packages/@core/preferences/src/config.ts (1)
32-32: LGTM!An empty string is an appropriate default value for optional watermark content.
packages/effects/layouts/src/widgets/preferences/blocks/input-item.vue (2)
6-6: LGTM!The
CircleXimport supports the new clear button functionality.
50-61: LGTM!The clear button implementation follows best practices:
- Conditional rendering prevents unnecessary DOM nodes when input is empty
- Absolute positioning keeps the button within the input bounds
- Hover states and cursor styling provide clear affordances
- Click handler correctly resets the input value
packages/effects/layouts/src/widgets/preferences/blocks/general/general.vue (2)
5-5: LGTM!The
InputItemimport enables the new watermark content input field.
16-16: LGTM!The
appWatermarkContentmodel is correctly defined to manage custom watermark text.apps/web-naive/src/layouts/basic.vue (1)
109-128: LGTM!The watermark watcher correctly:
- Observes both
enableandcontentas a composite object- Uses custom content when provided, falling back to generated content from user info
- Handles the disabled state by destroying the watermark
- Runs immediately on component mount
playground/src/layouts/basic.vue (1)
124-143: LGTM!The watermark watcher implementation mirrors the pattern in other layout files, correctly handling custom content with appropriate fallback behavior.
packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue (2)
70-70: LGTM!The
appWatermarkContentmodel definition follows the same pattern as other preference models and is properly typed as a string.
271-271: LGTM!The binding to the General component is correctly placed alongside the existing
app-watermarkbinding, maintaining consistency with the component's API.
zouawen
changed the title
zouawen
changed the title
zouawen
changed the title
2 participants
Description
Type of change
Please delete options that are not relevant.
pnpm-lock.yamlunless you introduce a new test example.Checklist
pnpm run docs:devcommand.pnpm test.feat:,fix:,perf:,docs:, orchore:.Summary by CodeRabbit
New Features
UI/Style
Localization