fix(admin-web): 优化通知表单标签选择体验
- 新建通知时自动刷新可用标签列表 - 添加"刷新标签"按钮方便手动刷新 - 优化空标签提示,说明需勾选"可用于广告定向" - 改进"指定用户"输入框占位符文本和示例 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
41a47b1b53
commit
1b3d545c0d
|
|
@ -138,6 +138,8 @@ export default function NotificationsPage() {
|
||||||
publishedAt: '',
|
publishedAt: '',
|
||||||
expiresAt: '',
|
expiresAt: '',
|
||||||
});
|
});
|
||||||
|
// 刷新可用标签列表,确保显示最新创建的标签
|
||||||
|
loadTags();
|
||||||
setShowModal(true);
|
setShowModal(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -500,11 +502,28 @@ export default function NotificationsPage() {
|
||||||
{/* 按标签筛选 */}
|
{/* 按标签筛选 */}
|
||||||
{formData.targetType === 'BY_TAG' && (
|
{formData.targetType === 'BY_TAG' && (
|
||||||
<div className={styles.notifications__formGroup}>
|
<div className={styles.notifications__formGroup}>
|
||||||
<label>选择标签 (满足任一标签的用户)</label>
|
<label style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||||
|
<span>选择标签 (满足任一标签的用户)</span>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={loadTags}
|
||||||
|
style={{
|
||||||
|
padding: '2px 8px',
|
||||||
|
fontSize: '12px',
|
||||||
|
color: '#3b82f6',
|
||||||
|
background: 'transparent',
|
||||||
|
border: '1px solid #3b82f6',
|
||||||
|
borderRadius: '4px',
|
||||||
|
cursor: 'pointer',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
刷新标签
|
||||||
|
</button>
|
||||||
|
</label>
|
||||||
<div className={styles.notifications__tagSelector}>
|
<div className={styles.notifications__tagSelector}>
|
||||||
{availableTags.length === 0 ? (
|
{availableTags.length === 0 ? (
|
||||||
<div className={styles.notifications__empty} style={{ padding: '20px' }}>
|
<div className={styles.notifications__empty} style={{ padding: '20px' }}>
|
||||||
暂无可用标签,请先在"用户标签"中创建
|
暂无可用标签,请先在"用户标签"中创建(需勾选"可用于广告定向")
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className={styles.notifications__tagList}>
|
<div className={styles.notifications__tagList}>
|
||||||
|
|
@ -540,13 +559,13 @@ export default function NotificationsPage() {
|
||||||
{/* 指定用户 */}
|
{/* 指定用户 */}
|
||||||
{formData.targetType === 'SPECIFIC' && (
|
{formData.targetType === 'SPECIFIC' && (
|
||||||
<div className={styles.notifications__formGroup}>
|
<div className={styles.notifications__formGroup}>
|
||||||
<label>用户ID列表</label>
|
<label>用户ID列表(账户序列号)</label>
|
||||||
<textarea
|
<textarea
|
||||||
className={styles.notifications__userIdsInput}
|
className={styles.notifications__userIdsInput}
|
||||||
value={formData.userIds}
|
value={formData.userIds}
|
||||||
onChange={(e) => setFormData({ ...formData, userIds: e.target.value })}
|
onChange={(e) => setFormData({ ...formData, userIds: e.target.value })}
|
||||||
placeholder="请输入用户ID,每行一个或用逗号分隔"
|
placeholder="请输入用户账户序列号(如 000000000001),每行一个或用逗号分隔 例如: 000000000001 000000000002,000000000003"
|
||||||
rows={4}
|
rows={6}
|
||||||
/>
|
/>
|
||||||
<span className={styles.notifications__targetHint}>
|
<span className={styles.notifications__targetHint}>
|
||||||
支持换行或逗号分隔,当前 {formData.userIds.split(/[\n,]/).filter(s => s.trim()).length} 个用户
|
支持换行或逗号分隔,当前 {formData.userIds.split(/[\n,]/).filter(s => s.trim()).length} 个用户
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue